/* ============================================================================
   KIT — parts/onglets.css        Dépend de : tokens.css, motion.css

   Les filtres de rubrique. Le jeton actif GLISSE d'un onglet à l'autre :
   c'est un seul élément déplacé, pas un fond qui s'allume et s'éteint.

     <nav class="onglets">
       <span class="jeton" aria-hidden="true"></span>
       <button class="onglet" aria-pressed="true">Tous</button>
       …
     </nav>

   Le JS (ui/onglets.js, étape 2) positionne `--jeton-x` et `--jeton-l` à
   partir du bouton actif. Sans JS, chaque onglet garde un fond propre :
   l'interface reste lisible et utilisable.
   ========================================================================= */

.onglets {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pas-1);
  padding: var(--pas-1);
  background: var(--fond-creux);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }

/* Le jeton qui glisse. Positionné par le JS ; masqué tant qu'il n'a pas de
   largeur, pour ne jamais apparaître au mauvais endroit au chargement.

   Le jeton porte une HAUTEUR et une ordonnée, pas seulement une abscisse :
   .onglets s'enroule (flex-wrap), et sur un écran étroit cinq rubriques
   tiennent sur trois lignes. Avec un simple top/bottom, le jeton s'étirait
   sur toute la hauteur du groupe au lieu de coiffer l'onglet actif.        */
.onglets .jeton {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--jeton-l, 0);
  /* Repli sur l'ancien comportement — pleine hauteur, une seule ligne — pour
     qu'un appelant qui ne pose que l'abscisse et la largeur reste correct. */
  height: var(--jeton-h, calc(100% - 2 * var(--pas-1)));
  transform: translate(var(--jeton-x, 0), var(--jeton-y, var(--pas-1)));
  background: var(--encre);
  border-radius: var(--r-pilule);
  box-shadow: var(--pose-1);
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--pose) var(--sortie),
    width     var(--pose) var(--sortie),
    opacity   var(--vif)  var(--doux);
}
.onglets[data-jeton="pret"] .jeton { opacity: 1; }

.onglet {
  position: relative;
  z-index: 1;
  font-family: var(--f-texte);
  font-size: var(--t-400);
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  padding: 0.5rem 0.95rem;
  border: 0;
  border-radius: var(--r-pilule);
  background: none;
  color: var(--encre-2);
  cursor: pointer;
  transition: color var(--vif) var(--doux), background-color var(--vif) var(--doux);
}
.onglet:hover { color: var(--encre); }
.onglet:focus-visible { outline: 2px solid var(--laiton); outline-offset: 1px; }
.onglet[aria-pressed="true"] { color: var(--surface); }

/* Repli sans JS : le fond est porté par l'onglet lui-même. Dès que le jeton
   est prêt, il le reprend et l'onglet redevient transparent.                */
.onglets:not([data-jeton="pret"]) .onglet[aria-pressed="true"] { background: var(--encre); }

/* Le compteur accolé à un onglet. */
.onglet .nombre {
  margin-left: 0.4rem;
  font-family: var(--f-mono);
  font-size: var(--t-100);
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

/* ── Variante « soulignée » : pour les sections d'une page, pas les filtres */
.onglets.souligne {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  padding: 0;
  gap: var(--pas-4);
  width: 100%;
}
.onglets.souligne .jeton {
  top: auto;
  bottom: -1px;
  height: 2px;
  background: var(--laiton);
  border-radius: var(--r-pilule);
  box-shadow: none;
}
.onglets.souligne .onglet { padding: var(--pas-3) 0; border-radius: 0; }
.onglets.souligne .onglet[aria-pressed="true"] { color: var(--encre); background: none; }
.onglets.souligne:not([data-jeton="pret"]) .onglet[aria-pressed="true"] {
  background: none;
  box-shadow: inset 0 -2px 0 var(--laiton);
}

/* ── La barre de recherche qui accompagne les filtres ────────────────────── */
.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-3);
}
.barre-filtres .recherche { position: relative; flex: 1 1 220px; min-width: 0; }
.barre-filtres .recherche input { padding-left: 2.4rem; border-radius: var(--r-pilule); }
.barre-filtres .recherche::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -8px;
  border: 1.5px solid var(--encre-3);
  border-radius: 50%;
  pointer-events: none;
}
.barre-filtres .recherche::after {
  content: "";
  position: absolute;
  left: 1.72rem;
  top: 50%;
  width: 6px;
  height: 1.5px;
  margin-top: 3px;
  background: var(--encre-3);
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}