/* ══════════════════════════════════════════════════════════════
   L'EN-TÊTE DE CHAPITRE — les pages de recettes entrent dans le
   socle éditorial (core/css/editorial.css), qui annonçait lui-même
   la suite : « L'accueil l'a adopté le premier, "Fais ma semaine"
   suit, le planning et les courses suivront probablement. »

   Se charge APRÈS editorial.css (dont il consomme les jetons) et
   après toutes_recettes.css / mes_favoris.css, dont il reprend la
   main sur le titre et le compteur.

   Ce qu'il ne touche pas, volontairement : les cartes, les onglets,
   les chips. accueil_nuit.css:8 pose la règle chromatique — « l'or
   est éditorial, le vert est produit » — et un onglet est un
   contrôle, pas un titre. Le défaut n'était pas le vert : c'était le
   vert DANS un titre.
   ══════════════════════════════════════════════════════════════ */

/* La page entre dans le socle pour ses jetons et son fond. C'est en
   CLAIR que l'écart avec l'accueil sautait aux yeux — vert #f0f7f2
   ici, papier crème #f4f1ea là-bas ; en sombre les deux ardoises se
   distinguent à peine. La typographie de base, elle, reste celle de
   Night Kitchen : seul le chapitre passe en DM Sans / Fraunces, et
   `.ard` imposerait sinon sa fonte et sa craie à toute la page. */
.tr-page.ard {
  background: var(--ard-bg);
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ── LE BLOC ──────────────────────────────────────────────────
   Il prend la place que le titre occupait deux barres plus bas et
   emmène le compteur avec lui : une revue ouvre sa rubrique par son
   nom, pas par sa boîte à outils. Gouttière et largeur recopiées de
   .tr-nav / .tr-rail (1400 px, 24 px) pour que le kicker tombe
   exactement au-dessus du premier onglet. */
.tr-chapter {
  max-width: 1400px;
  margin: 0 auto;
  padding: 34px 24px 26px;
  border-bottom: 1px solid var(--ard-rule);
  position: relative;
  z-index: 1;
}

/* Le socle donne le kicker à filets ; le hero de l'accueil le porte
   sous un titre de 78 px, ici le titre en fait 46 — mêmes valeurs,
   remises à l'échelle. */
.tr-chapter .hn-kicker {
  font-size: 13px;
  gap: 13px;
}
.tr-chapter .hn-kicker::before,
.tr-chapter .hn-kicker::after { width: 26px; }

/* Le titre passe en Fraunces (chargée globalement par base.html) et
   son mot-clé en or : c'est le motif exact du hero de l'accueil, où
   « Filets de sardine grillés » est doré sous « Ce soir, à ta table ».
   La classe .tr-hero-title est conservée telle quelle — c'est une
   cible de fetch_partial.js:44, la renommer casserait la mise à jour
   AJAX du titre. */
.tr-chapter .tr-hero-title {
  margin: 17px 0 0;
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings: 'SOFT' 34, 'WONK' 1;
  font-weight: 500;
  letter-spacing: -.022em;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.04;
  color: var(--ard-ink);
  text-shadow: none;
}
.tr-chapter .tr-hero-title span { color: var(--ard-gold-text); }

/* Le socle taille le filet à 280 px pour un titre de 78 px. Sous un
   titre de 46 px, le dégradé s'éteint 85 px avant l'épi, qui se met à
   flotter tout seul. Seule la longueur est retouchée — le motif et le
   dégradé restent ceux du socle. */
.tr-chapter .hn-flourish { margin: 19px 0 0; gap: 13px; }
.tr-chapter .hn-flourish span { width: min(170px, 26vw); }

/* Une seule ligne de métadonnées dorées, à la place du sous-titre vert
   ET du compteur du rail : la forme du « 15 MIN · 2 PARTS · FACILE »
   de l'accueil. */
.tr-chapter-meta {
  margin: 17px 0 0;
  font-family: var(--ard-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ard-gold-text);
}
.tr-chapter-sep { opacity: .45; }
/* Le compteur garde sa classe (cible AJAX) mais rentre dans le rang :
   plus de vert, plus de graisse à part — la ligne est d'un seul or.
   C'est lui, et non le <p>, qui porte la mise en ligne : toute la méta
   a emménagé dedans pour suivre les filtres en AJAX (tr_header.html), et
   `gap` ne descend pas jusqu'aux petits-enfants. */
.tr-chapter-meta .tr-hero-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.tr-chapter-meta .tr-hero-count strong {
  color: inherit;
  font-weight: inherit;
}

/* ── MOBILE ───────────────────────────────────────────────────
   Le titre n'existait pas sous 1024 px : toutes_recettes.css:933
   posait .tr-hero{display:none!important} et le h1 y mesurait 0 px de
   haut sur les trois pages. Il existe désormais — au prix de 170 px
   avant la première recette, soit la moitié haute d'un écran utile.
   Les respirations se resserrent donc, et le fleuron saute : un filet
   de 150 px surmonté d'un épi, sous un titre de 29 px, pèse plus qu'il
   ne dit. Le desktop, lui, ne perd aucune carte et garde son rythme. */
@media (max-width: 1023px) {
  .tr-chapter { padding: 15px 14px 13px; }
  .tr-chapter .tr-hero-title { margin-top: 10px; }
  .tr-chapter-meta {
    margin-top: 11px;
    font-size: 11.5px;
    letter-spacing: 1.4px;
  }
  .tr-chapter-meta .tr-hero-count { gap: 7px; }
}
@media (max-width: 640px) {
  .tr-chapter .tr-hero-title { font-size: 29px; }
  .tr-chapter .hn-flourish { display: none; }
}

/* ── LA BARRE D'OUTILS ────────────────────────────────────────
   Elle est sticky : son fond n'est pas un ornement, il masque les
   cartes qui défilent dessous. Il restait donc celui de Night Kitchen
   — mesuré rgba(240,250,244,.95) en clair, un vert pâle qui tire un
   bandeau froid en travers du papier crème, juste sous le chapitre.
   Le mockup la posait à même le papier ; il ne défile pas, lui. On
   garde le voile et le flou, teintés du fond de la page. color-mix
   plutôt qu'une valeur recopiée : le jour où le socle change d'encre,
   la barre suit sans qu'on ait à s'en souvenir. */
.tr-page.ard .tr-nav {
  background: color-mix(in srgb, var(--ard-bg) 92%, transparent);
  border-bottom-color: var(--ard-rule);
}

@media (max-width: 1023px) {
  /* Même barre, même rôle : sous 1024 px c'est .tr-mob-bar qui colle
     en haut, et c'est son ::before qui porte le voile. */
  .tr-page.ard .tr-mob-bar { border-bottom-color: var(--ard-rule); }
  .tr-page.ard .tr-mob-bar::before {
    background: color-mix(in srgb, var(--ard-bg) 97%, transparent);
  }
}