/**
 * Onglets et panneau — .talia-tabset
 *
 * SOURCE UNIQUE des onglets « changement de vue », pour les DEUX consommateurs :
 * les blocs du thème et le markup des outils. Chargée sans condition de page.
 *
 * POURQUOI UN SIXIÈME SYSTÈME N'EN EST PAS UN (relevé FRT-23, 2026-09-24)
 * Cinq systèmes d'onglets coexistaient — `.catalog-tab`, `.account-tabs-nav`,
 * `.tool-tabs-nav`, `.talia-comparateur-cout__tab`, `.talia-tabs` (admin) —
 * pour TROIS formes visuelles, et AUCUN panneau stylé : `.tool-tab-content`
 * fait deux déclarations, `.talia-tab-content` une seule.
 *
 * Ce fichier n'ajoute pas une sixième pilule. Il ajoute la forme qui manquait,
 * et il distingue deux intentions que les cinq systèmes confondaient :
 *
 *   - une PILULE filtre une liste (on restreint ce qui est affiché) —
 *     c'est `.catalog-tab`, qui reste ce qu'il est et n'entre pas ici ;
 *   - un ONGLET ACCOLÉ change de vue (on remplace le contenu) — c'est ce
 *     composant, et c'est la forme du zoning.
 *
 * NOM : `.talia-tabset` et non `.talia-tabs`, déjà pris par
 * `admin-gen-images.css`. Les deux ne se croisent jamais (admin contre front),
 * mais deux systèmes sous un même nom, c'est précisément le problème que cette
 * story règle.
 *
 * LE FOND DU PANNEAU N'EST PAS UNE NOUVELLE COULEUR. `main.css:471-500` déclare
 * déjà `.is-style-bg-secondary` et `.is-style-bg-tertiary` comme styles du bloc
 * Groupe : ce sont les « fonds légers » que le rédacteur connaît. Le panneau
 * prend les mêmes jetons, donc le mode sombre est gratuit — aucune règle
 * `[data-theme]` dans ce fichier.
 *
 * @package Toolbox
 * @since 3.0.0.138 (FRT-23)
 */

.talia-tabset {
  --tabset-surface: var(--bg-secondary);
  --tabset-radius: var(--border-radius-lg, 0.75rem);
}

.talia-tabset--tertiary { --tabset-surface: var(--bg-tertiary); }
.talia-tabset--plain    { --tabset-surface: transparent; }

/* ==========================================================================
   Sans JavaScript : tout est lisible
   La barre d'onglets ne sert à rien tant que le script n'a pas pris la main —
   on ne l'affiche donc pas, et chaque panneau garde son titre visible. Rien
   n'est caché avant que quelque chose ne sache le rouvrir.
   ========================================================================== */

.talia-tabset__list {
  display: none;
}

.talia-tabset.is-enhanced .talia-tabset__list {
  display: flex;
}

.talia-tabset.is-enhanced .talia-tabset__panel-title {
  /* le titre est repris par l'onglet : le répéter le dirait deux fois */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.talia-tabset.is-enhanced .talia-tabset__panel[hidden] {
  display: none;
}

/* ==========================================================================
   La barre
   ========================================================================== */

.talia-tabset__list {
  gap: var(--spacing-xs, 0.25rem);
  margin: 0;
  padding: 0 0 0 var(--spacing-sm, 0.5rem);
  list-style: none;
  /*
   * Défilement horizontal en mobile, sans rogner le dernier onglet : c'est le
   * défaut déjà corrigé pour le catalogue (main.css:6385), à ne pas
   * réintroduire. `scroll-padding-inline-end` garde une marge à l'arrivée.
   */
  overflow-x: auto;
  scroll-padding-inline-end: var(--spacing-md, 1rem);
  /*
   * L'ascenseur reste VISIBLE, en fin. La v3.0.0.138 le masquait
   * (`scrollbar-width: none` + `::-webkit-scrollbar { display: none }`) : du
   * contenu qui défile sans le moindre indice qu'il y en a plus. Le défilement
   * horizontal est le bon motif pour une barre qui déborde — passer à la ligne
   * casserait la forme accolée, seule la dernière rangée touchant le panneau —
   * mais il ne se devine pas. Il ne s'affiche de toute façon que s'il y a
   * débordement, et il est en surimpression sur mobile.
   */
  scrollbar-width: thin;
}

.talia-tabset__tab {
  flex: 0 0 auto;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  /*
   * `--text-secondary` et non `--text-muted` : un onglet inactif reste un
   * contrôle cliquable, il doit rester lisible. Le gris très pâle du zoning ne
   * passerait pas 4.5:1.
   */
  color: var(--text-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--tabset-radius) var(--tabset-radius) 0 0;
  cursor: pointer;
  transition: color var(--transition-normal, 0.2s ease),
              background-color var(--transition-normal, 0.2s ease);
}

.talia-tabset__tab:hover {
  color: var(--text-primary);
}

/*
 * L'onglet actif se fond dans le panneau : la bordure FAIT LE TOUR DE L'EN-TÊTE
 * — haut, gauche, droite — et s'ouvre en bas sur le panneau.
 *
 * La v3.0.0.138 obtenait ça en faisant déborder l'onglet d'un pixel
 * (`margin-bottom: -1px` + `z-index`) pour recouvrir la bordure haute du
 * panneau. Ça ne pouvait pas marcher : la barre porte `overflow-x: auto` pour
 * le défilement mobile, et un `overflow-x` autre que `visible` fait calculer
 * `overflow-y` à `auto` lui aussi. Le débord vertical était donc ROGNÉ, et la
 * ligne du panneau passait sous l'onglet actif.
 *
 * Le recouvrement est supprimé, pas réparé : le panneau n'a simplement plus de
 * bordure haute. Plus de débord, plus de `z-index`, plus rien à rogner — et
 * c'est une règle de moins qu'un futur `overflow` pourra casser.
 */
.talia-tabset__tab[aria-selected="true"] {
  color: var(--text-primary);
  background-color: var(--tabset-surface);
  border-color: var(--border-color);
}

.talia-tabset__tab:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

/* ==========================================================================
   Le panneau — la zone que les cinq systèmes n'avaient pas
   ========================================================================== */

.talia-tabset__panels {
  padding: var(--spacing-xl, 2rem);
  background-color: var(--tabset-surface);
  border: 1px solid var(--border-color);
  /* Pas de bordure haute : c'est celle de l'onglet actif qui ferme l'en-tête. */
  border-top: none;
  /*
   * Rayon sur LES QUATRE coins. La v3.0.0.141 laissait le coin haut-gauche
   * carré, pour que l'onglet actif et le panneau se lisent comme une seule
   * forme découpée. Deux raisons de l'abandonner :
   *
   *   - la barre est décalée de 8px, donc aucun onglet ne vient s'accrocher à
   *     ce coin : il sortait carré, tout seul, en face d'un coin droit arrondi ;
   *   - ça n'aurait de toute façon tenu que si le PREMIER onglet était actif.
   *     Le deuxième sélectionné, le coin carré se retrouve sous un onglet
   *     inactif, et la forme ne veut plus rien dire.
   *
   * Le panneau est donc une boîte à part entière, arrondie partout, et l'onglet
   * actif s'y pose en partageant son fond. Ça marche quel que soit l'onglet
   * sélectionné — c'est la seule version qui ne dépend pas du rang.
   */
  border-radius: var(--tabset-radius);
}

.talia-tabset--plain .talia-tabset__panels {
  padding-inline: 0;
  border-color: transparent;
}

.talia-tabset__panel:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 4px;
}

.talia-tabset__panel > :first-child { margin-top: 0; }
.talia-tabset__panel > :last-child { margin-bottom: 0; }

/* Panneaux empilés sans JS : un filet les sépare */
.talia-tabset:not(.is-enhanced) .talia-tabset__panel + .talia-tabset__panel {
  margin-top: var(--spacing-lg, 1.5rem);
  padding-top: var(--spacing-lg, 1.5rem);
  border-top: 1px solid var(--border-color);
}

@media (max-width: 767px) {
  .talia-tabset__panels {
    padding: var(--spacing-lg, 1.5rem);
  }

  .talia-tabset__tab {
    padding-inline: var(--spacing-md, 1rem);
  }
}