/* =============================================================
   Socle · Onglets (.sc-tabs)
   Navigation entre plusieurs vues d'un même écran.
   Anatomie : .sc-tabs > .sc-tabs__list > .sc-tabs__tab
              puis un .sc-tabs__panel par onglet.
   Variante : --pills (piste segmentée, sans soulignement).
   JS : js/components/tabs.js (initTabs) pour le clavier,
   aria-selected, le tabindex roving et l'affichage des panneaux.
   ============================================================= */

.sc-tabs {
  display: flex;
  flex-direction: column;
}

/* ---- Barre d'onglets ----
   Les tokens privés vivent sur la liste et sur l'onglet, si bien
   qu'un extrait de barre reste stylé hors de son .sc-tabs. */

.sc-tabs__list {
  --_list-gap: var(--gap-s);
  --_list-padding: 0;
  --_list-bg: transparent;
  --_list-radius: 0;
  --_list-border-width: var(--border-hairline);
  --_list-self: stretch;

  display: flex;
  align-items: center;
  align-self: var(--_list-self);
  gap: var(--_list-gap);
  padding: var(--_list-padding);
  background: var(--_list-bg);
  border-radius: var(--_list-radius);
  border-block-end: var(--_list-border-width) solid var(--color-border);
}

/* ---- Onglet ---- */

.sc-tabs__tab {
  /* Tokens de composant : la variante ne fait que réassigner ceci. */
  --_tab-padding: var(--padding-s) var(--padding-m);
  --_tab-radius: 0;
  --_tab-text: var(--color-text-secondary);
  --_tab-text-hover: var(--color-text);
  --_tab-text-selected: var(--color-accent-text);
  --_tab-bg: transparent;
  --_tab-bg-hover: transparent;
  --_tab-bg-active: transparent;
  --_tab-bg-selected: transparent;
  --_tab-indicator: transparent;
  --_tab-indicator-active: var(--color-border-strong);
  --_tab-indicator-selected: var(--color-accent);
  --_tab-indicator-width: var(--border-emphasis);
  --_tab-shadow-selected: none;
  /* Le trait de l'onglet recouvre celui de la barre. */
  --_tab-offset: calc(var(--border-hairline) * -1);

  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: var(--_tab-padding);
  margin-block-end: var(--_tab-offset);
  border: none;
  border-block-end: var(--_tab-indicator-width) solid var(--_tab-indicator);
  border-radius: var(--_tab-radius);
  background: var(--_tab-bg);
  color: var(--_tab-text);
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-tight);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    color var(--motion-fast),
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast);
}

.sc-tabs__tab svg {
  flex: none;
}

/* ---- États ----
   L'onglet sélectionné garde son apparence sous le pointeur :
   le survol ne concerne que les onglets au repos. */

.sc-tabs__tab:is(:hover, [data-state="hover"]):not(:disabled):not([data-disabled]):not([aria-selected="true"]) {
  color: var(--_tab-text-hover);
  background: var(--_tab-bg-hover);
}

/* Enfoncé : le trait apparaît en neutre, comme un aperçu de
   l'endroit où l'accent va se poser. */
.sc-tabs__tab:is(:active, [data-state="active"]):not(:disabled):not([data-disabled]):not([aria-selected="true"]) {
  color: var(--_tab-text-hover);
  background: var(--_tab-bg-active);
  border-block-end-color: var(--_tab-indicator-active);
}

/* Simulation du focus clavier pour la doc (le vrai focus passe
   par :focus-visible dans base.css). */
.sc-tabs__tab[data-state="focus"] {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.sc-tabs__tab[aria-selected="true"] {
  color: var(--_tab-text-selected);
  background: var(--_tab-bg-selected);
  border-block-end-color: var(--_tab-indicator-selected);
  box-shadow: var(--_tab-shadow-selected);
}

/* Un onglet peut être un <a> : pointer-events neutralise le clic
   là où l'attribut disabled n'existe pas. */
.sc-tabs__tab:disabled,
.sc-tabs__tab[data-disabled] {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Panneau ---- */

.sc-tabs__panel {
  padding-block: var(--padding-l);
}

.sc-tabs__panel[hidden] {
  display: none;
}

/* Respiration entre les blocs du panneau. */
.sc-tabs__panel > * + * {
  margin-block-start: var(--gap-m);
}

/* ---- Variante pastilles ----
   Piste segmentée : la barre devient un fond, et l'onglet sélectionné
   s'y marque à la teinte.

   Il s'y marquait avant par une surface posée et son ombre, ce qui
   demandait à --color-bg-surface de se détacher de --color-bg-subtle
   toujours dans le même sens. Or ces deux rôles s'inversent d'un thème
   à l'autre : en clair la surface remonte au blanc et le segment se
   lit posé, en sombre elle redescend sous la piste et le segment se lit
   creusé, pendant que son ombre prétend le contraire. La teinte, elle,
   dit la même chose dans les deux thèmes, et c'est déjà par elle que le
   système marque la ligne retenue d'un tableau et l'item courant d'une
   barre latérale. L'onglet sélectionné rejoint donc la variante par
   défaut, qui prend l'accent elle aussi.
   Le rayon et l'ombre suivent la charte : six pixels comme tous les
   contrôles, et plus rien qui flotte. */

.sc-tabs--pills .sc-tabs__list {
  --_list-gap: var(--gap-2xs);
  --_list-padding: var(--padding-2xs);
  --_list-bg: var(--color-bg-subtle);
  --_list-radius: var(--radius-control);
  --_list-border-width: 0;
  --_list-self: flex-start;
}

.sc-tabs--pills .sc-tabs__tab {
  --_tab-padding: var(--padding-xs) var(--padding-l);
  --_tab-radius: var(--radius-control);
  --_tab-indicator-active: transparent;
  --_tab-indicator-width: 0;
  --_tab-offset: 0;
  --_tab-bg-hover: var(--color-bg-active);
  --_tab-bg-active: var(--color-bg-active);
  --_tab-bg-selected: var(--color-accent-subtle);
  --_tab-shadow-selected: none;
}