/* ══════════════════════════════════════════════════════════════
   LE SOMMAIRE - onglets de niveau 1 et barre des espaces des quatre listes
   Lot vignettes et onglets, variante A « Sommaire » du mockup validé le 28/09 :
   .claude/design-drafts/2026-09-28-toutes-recettes-vignettes-onglets.html

   Chargé APRÈS tr_rubriques.css. Les onglets deviennent un sommaire de
   revue : Fraunces, sans icône, l'onglet ouvert en italique sur un filet
   d'or. La barre des espaces perd son vert : l'espace ouvert est en encre
   sur --ard-bg-3. Classes et data-* inchangés : toutes_recettes.js lit
   .tr-ctab, .active, data-cat, data-href et #catTabs.
   ══════════════════════════════════════════════════════════════ */

/* ── Onglets de niveau 1 ── */
.tr-rail { max-width: 1400px; margin: 0 auto; padding: 6px 24px 0; }
.tr-rail .tr-cat-tabs {
  /* Position : l'offsetLeft des onglets se lit par rapport au rail, pour
     ramener l'onglet ouvert dans le champ sur mobile (toutes_recettes.js). */
  position: relative;
  display: flex; gap: 34px;
  overflow-x: auto; overflow-y: hidden;
  border-bottom: 1px solid var(--ard-rule);
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.tr-rail .tr-cat-tabs::-webkit-scrollbar { display: none; }
.tr-rail .tr-ctab {
  position: relative; flex: none;
  display: inline-flex; align-items: center;
  min-height: 56px; margin: 0; padding: 6px 0 4px;
  border: 0; border-radius: 0; background: none; cursor: pointer;
  font-family: var(--ard-serif); font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-size: 20px; font-weight: 450; letter-spacing: -.01em;
  color: var(--ard-ink-2); white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--ard-tr);
}
.tr-rail .tr-ctab:hover { color: var(--ard-ink); }
/* Le filet d'or de l'onglet ouvert. bottom:0 et non -1px : le rail défile,
   un pixel de débord ouvrirait un défilement vertical. */
.tr-rail .tr-ctab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ard-gold-text);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--ard-tr);
}
.tr-rail .tr-ctab.active { color: var(--ard-ink); font-weight: 550; }
.tr-rail .tr-ctab.active::after { transform: none; }
.tr-rail .tr-ctab-lbl { font: inherit; letter-spacing: inherit; }
.tr-rail .tr-ctab.active .tr-ctab-lbl { font-style: italic; }
/* Anneau vers l'intérieur : le rail défile et rognerait un anneau extérieur. */
.tr-rail .tr-ctab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

/* ── Barre des espaces : un groupe à filet, l'espace ouvert en encre ── */
.tr-page.ard .tr-page-toggle-bar-inner {
  gap: 4px; padding: 4px;
  border: 1px solid var(--ard-rule); border-radius: 999px;
}
.tr-page.ard .tr-ptbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border: 0; border-radius: 999px; background: none;
  font-family: var(--ard-sans); font-size: 13.5px; font-weight: 600;
  color: var(--ard-ink-2); white-space: nowrap; text-decoration: none;
  transition: color var(--ard-tr), background-color var(--ard-tr);
}
.tr-page.ard .tr-ptbtn:hover { color: var(--ard-ink); }
.tr-page.ard .tr-ptbtn.active { background: var(--ard-bg-3); color: var(--ard-ink); }
.tr-page.ard .tr-ptbtn svg { flex: none; width: 14px; height: 14px; }
/* « Créer » est une commande, pas un espace : une pilule à filet d'encre. */
.tr-page.ard .tr-ptbtn-creer {
  margin-left: 6px;
  border: 1px solid var(--ard-rule-strong);
  color: var(--ard-ink);
}
.tr-page.ard .tr-ptbtn-creer:hover { border-color: var(--ard-ink); }
.tr-page.ard .tr-ptbtn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ── Mobile et tablette : le sommaire défile, un fondu dit « ça continue » ── */
@media (max-width: 1023px) {
  .tr-rail { padding: 0 14px; }
  .tr-rail .tr-cat-tabs {
    gap: 24px; padding-right: 32px;
    scroll-padding-inline-start: 56px;
    /* masque alpha, pas une couleur */
    -webkit-mask-image: linear-gradient(90deg, black 88%, transparent);
            mask-image: linear-gradient(90deg, black 88%, transparent);
  }
  .tr-rail .tr-ctab { min-height: 52px; font-size: 18px; }
  .tr-page.ard .tr-mob-toggle {
    width: max-content; max-width: calc(100% - 28px);
    margin: 7px 14px 0; padding: 4px;
  }
  .tr-page.ard .tr-mob-toggle .tr-ptbtn { height: 32px; padding: 0 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-rail .tr-ctab, .tr-rail .tr-ctab::after, .tr-page.ard .tr-ptbtn { transition: none; }
}