/* ============================================================================
   cab-onglets : basculer entre des vues d'un même objet.

   CE QUI GOUVERNE LE DESSIN

   1. Le trait actif SE DÉPLACE. Il ne saute pas d'un onglet à l'autre : il
      glisse sous le filet, et c'est ce glissement qui montre que « Lignes »
      et « Avenants » sont deux angles sur le même dossier, pas deux endroits
      différents. Un trait qui apparaît d'un coup ailleurs ne raconte rien.
   2. Ce ne sont PAS des liens. Des onglets qui changent l'URL, rechargent la
      page ou mènent à un autre objet ne sont pas des onglets : ils devraient
      être une navigation. Le composant suppose que tout le contenu des
      panneaux est déjà là (ou chargé silencieusement), pas qu'on attend une
      page.
   3. Densité : 32 à 34 px de hauteur de contrôle, comme le reste de la
      bibliothèque. Pas de fond plein sur l'onglet actif : le poids de police
      et le trait suffisent, un aplat ferait concurrence au contenu du dessous.
   ============================================================================ */

:where(:root),
:where([data-cab-theme]) {
  --cabo-encre:  var(--cab-ink, #06121A);
  --cabo-douce:  var(--cab-ink-2, #4D5B68);
  --cabo-faible: var(--cab-ink-3, #687585);
  --cabo-filet:  var(--cab-line, #E7E9EC);
  --cabo-fond:   var(--cab-surface, #FFFFFF);
  --cabo-accent: var(--cab-accent, #9A1B38);
  --cabo-sans:   var(--cab-font-sans, system-ui, sans-serif);
}

.cab-onglets { display: flex; flex-direction: column; min-width: 0; }

/* --- la liste ---------------------------------------------------------- */

.cab-onglets__liste {
  position: relative;
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--cabo-filet);
  /* Le scroll horizontal évite qu'un dossier à sept onglets ne les tasse
     jusqu'à l'illisible : mieux vaut faire défiler que rétrécir le texte. */
  overflow-x: auto;
  scrollbar-width: none;
}
.cab-onglets__liste::-webkit-scrollbar { display: none; }

.cab-onglets__onglet {
  appearance: none;
  flex: none;
  border: 0;
  /* Le padding vit dans le bouton, pas dans l'espacement entre boutons :
     c'est ce qui donne une cible de clic confortable ET un survol qui se lit
     comme une zone, pas comme une ligne de texte qui réagit au pixel près.
     Le trait qui glisse hérite de cette largeur, padding compris. */
  padding: 0 10px;
  border-radius: 6px 6px 0 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-family: var(--cabo-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--cabo-douce);
  white-space: nowrap;
  transition: color 140ms ease, background-color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.cab-onglets__onglet:hover { color: var(--cabo-encre); background: color-mix(in srgb, var(--cabo-encre) 6%, transparent); }
/* Réponse à la pression, pas au relâchement (apple-design §1) : la cible réagit à
   l'instant où le doigt la touche, sans attendre le clic. Ajouté le 2026-08-19. */
.cab-onglets__onglet:active { color: var(--cabo-encre); background: color-mix(in srgb, var(--cabo-encre) 12%, transparent); }

.cab-onglets__onglet[aria-selected="true"] { color: var(--cabo-encre); font-weight: 600; }
.cab-onglets__onglet:focus-visible {
  outline: 2px solid var(--cabo-accent);
  outline-offset: -2px;
}

/* Une pastille de compte, pour « Avenants (3) » sans l'écrire dans le libellé :
   le chiffre change plus souvent que le texte autour ne doit se redessiner. */
.cab-onglets__compte {
  margin-left: 6px;
  font-family: var(--cabo-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--cabo-faible);
}
.cab-onglets__onglet[aria-selected="true"] .cab-onglets__compte { color: var(--cabo-douce); }

/* --- le trait qui glisse -------------------------------------------------- */

.cab-onglets__trait {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  /* Largeur unitaire : c'est scaleX qui porte la largeur réelle. Animer `width`
     relance la mise en page à chaque image ; transform reste sur le compositeur
     (apple-design §11). Pas de border-radius ici, sinon l'échelle l'écraserait. */
  width: 1px;
  background: var(--cabo-accent);
  transform: translateX(0) scaleX(0);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

/* --- le panneau ------------------------------------------------------------ */

.cab-onglets__panneau { padding: 16px 0; }
/* Le panneau est focusable (tabindex="0") pour qu'on puisse y entrer au
   clavier même si son premier contenu n'est pas interactif : il garde donc
   un anneau visible, en retrait pour ne pas déborder sur le panneau voisin. */
.cab-onglets__panneau:focus-visible { outline: 2px solid var(--cabo-accent); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .cab-onglets__trait { transition: none; }
  .cab-onglets__onglet { transition: none; }
}