/* ══════════════════════════════════════════════════════════════
   LES RUBRIQUES - fil d'Ariane et rangées de sous-catégories
   Lot 2 de la refonte taxonomie, mockup validé le 27/09 :
   .claude/design-drafts/2026-09-27-toutes-recettes-sous-categories.html

   Chargé par les quatre listes APRÈS tr_chapitre.css. Registre : un
   sommaire de revue, pas une barre d'app.
   - Niveau 2 : puces à filet, compteur en chiffres tabulaires ; cochée =
     filet d'encre, graisse, pastille d'or.
   - Niveau 3 : un cran plus bas, sans cadre, soulignement d'encre si cochée.
   Plus de vert depuis le lot vignettes et onglets (mockup du 28/09).
   ══════════════════════════════════════════════════════════════ */

/* ── Le fil d'Ariane vit dans le kicker : même or, mêmes filets ── */
.tr-sc-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
  margin: 0; padding: 0; list-style: none;
}
.tr-sc-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.tr-sc-crumbs li + li::before {
  content: "›"; opacity: .6; letter-spacing: 0; font-size: 1.15em; transform: translateY(-1px);
}
.tr-sc-crumb {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
button.tr-sc-crumb { cursor: pointer; }
button.tr-sc-crumb:hover { text-decoration: underline; }
.tr-sc-crumb:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.tr-sc-crumbs [aria-current="page"] { color: var(--ard-ink); }

/* ── Les rangées ── */
.tr-sc {
  max-width: 1400px; margin: 0 auto;
  padding: 8px 24px 14px;
  border-bottom: 1px solid var(--ard-rule);
}
.tr-sc[hidden] { display: none; }
.tr-sc-row {
  /* offsetLeft des puces relatif à la rangée : toutes_recettes.js s'en sert
     pour ramener la puce cochée dans le champ sur mobile. */
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 4px 0;
}

/* Puce de niveau 2. Filet --ard-rule-strong : le contour d'une commande doit
   tenir 3:1 (WCAG 1.4.11, spec D7) ; le --ard-rule du mockup donnait 1,39:1. */
.tr-sc-chip {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--ard-rule-strong); border-radius: 999px;
  background: transparent;
  font: 500 13.5px/1 var(--ard-sans); color: var(--ard-ink-2);
  white-space: nowrap; cursor: pointer;
  scroll-snap-align: start;
  transition: color var(--ard-tr), border-color var(--ard-tr), background-color var(--ard-tr);
}
/* Cible tactile de 44 px sans épaissir la puce (36 + 2 x 4). */
.tr-sc-chip::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.tr-sc-chip:hover { color: var(--ard-ink); border-color: var(--ard-ink-3); }
.tr-sc-chip:active { background: var(--ard-bg-2); }
.tr-sc-n {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--ard-ink-3);
}
.tr-sc-chip[aria-checked="true"] {
  color: var(--ard-ink); font-weight: 700;
  border-color: var(--ard-ink); background: var(--ard-bg-3);
  padding-left: 11px;
}
.tr-sc-chip[aria-checked="true"]::after {
  content: ""; order: -1; flex: none;
  width: 6px; height: 6px; border-radius: 50%; background: var(--ard-gold-text);
}
.tr-sc-chip[aria-checked="true"] .tr-sc-n,
.tr-sc-link[aria-checked="true"] .tr-sc-n { color: var(--ard-gold-text); }
/* Une rubrique qui a des enfants l'annonce par un chevron discret. */
.tr-sc-more {
  flex: none; width: 10px; height: 10px; margin-left: -2px;
  color: var(--ard-ink-3); transition: transform var(--ard-tr);
}
.tr-sc-chip[aria-checked="true"] .tr-sc-more { transform: rotate(180deg); color: var(--ard-ink); }
/* « Tout <catégorie> » est séparée du reste par un filet vertical. */
.tr-sc-sep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--ard-rule-strong); }

/* Rangée de niveau 3 */
.tr-sc-row--l3 { gap: 0 22px; padding: 2px 0 0 2px; }
.tr-sc-elbow {
  flex: none; width: 16px; height: 22px; margin-right: -10px; align-self: center;
  color: var(--ard-rule-strong);
}
.tr-sc-link {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 1px;
  border: 0; background: none; cursor: pointer;
  font: 500 13px/1 var(--ard-sans); color: var(--ard-ink-2); white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--ard-tr);
}
.tr-sc-link .tr-sc-n { font-size: 11px; }
.tr-sc-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; border-radius: 1px;
  background: var(--ard-ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ard-tr);
}
.tr-sc-link:hover { color: var(--ard-ink); }
.tr-sc-link[aria-checked="true"] { color: var(--ard-ink); font-weight: 700; }
.tr-sc-link[aria-checked="true"]::after { transform: scaleX(1); }

.tr-sc-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.tr-sc-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-radius: 3px; }

/* ── Le rappel de la rubrique, en tête du tiroir ── */
.tr-dr-scope { margin: -4px 0 14px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.tr-dr-scope b { color: var(--text-primary); }

/* ── Mobile et tablette (< 1024 px) : mêmes rangées, en bandes qui défilent,
   aimantées (proximity : on garde la main, on n'est pas happé). ── */
@media (max-width: 1023px) {
  .tr-chapter .tr-sc-crumbs::after { display: none; }
  .tr-sc-crumbs ol { gap: 0 7px; }
  .tr-sc-crumbs li { gap: 7px; }

  .tr-sc { padding: 0 0 8px; }
  .tr-sc-row {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    /* 6 px : l'anneau de focus (2 + 3 px) n'est pas rogné par le défilement. */
    padding: 6px 14px;
    scroll-snap-type: x proximity; scroll-padding-inline: 14px;
    scrollbar-width: none;
    /* Un fondu à droite dit « ça continue » ; seul l'alpha du masque compte. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .tr-sc-row::-webkit-scrollbar { display: none; }
  /* La dernière puce sort du fondu en fin de course. */
  .tr-sc-row::after { content: ""; flex: none; width: 28px; height: 1px; }
  .tr-sc-chip { height: 34px; padding: 0 13px; font-size: 13px; }
  .tr-sc-chip::before { top: -5px; bottom: -5px; }
  .tr-sc-chip[aria-checked="true"] { padding-left: 10px; }
  .tr-sc-row--l3 { gap: 0 18px; padding: 0 14px 0 16px; }
  .tr-sc-link { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tr-sc-chip, .tr-sc-link, .tr-sc-link::after, .tr-sc-more { transition: none; }
}