/* ══════════════════════════════════════════════════════════════
   SOCLE ÉDITORIAL — la direction visuelle de TopPopote
   Extrait de accueil_ardoise.css et accueil_nuit.css le 27/08 par
   DÉPLACEMENT de texte : aucune valeur n'a été retapée. L'accueil l'a
   adopté le premier, « Fais ma semaine » suit, le planning et les
   courses suivront probablement.

   Se charge AVANT les feuilles de la page qui le consomme. Toute
   surcharge de page reste en aval et continue de gagner.

   Ce qu'il ne porte PAS, volontairement :
   - `.hn-meta` : déclaré DEUX fois dans accueil_nuit.css (une primitive
     générique puis une refonte complète dans le hero). Ce n'est pas une
     primitive, c'est un composant d'accueil au nom générique.
   - `.ard{padding-top:89px}` et le grain `.ard::after` : écrits pour
     résoudre des problèmes d'accueil.
   - une règle `body{background}` : base.css:7 la pose déjà pour toutes
     les pages. La recopier ici l'écraserait partout.
   ══════════════════════════════════════════════════════════════ */

/* Les jetons sont posés sur le body et non sur `.ard` : les modales des pages du
   registre sont écrites en FRÈRES du conteneur `.ard` — les six overlays de
   /planning/ sont des voisins de `#pw-page`, pas ses descendants — donc hors de
   sa portée. Mesuré au navigateur : `var(--ard-rule-strong)` y calculait à
   invalide, la bordure de `.nk-modal-input` tombait à `0px none` et le fond du
   bouton Valider à `transparent` sous un texte blanc (R55/R56). Le body est
   l'hôte commun des deux univers, exactement comme pour --bg-footer plus bas.
   La portée reste celle du registre : `body.ard-page`, rien de plus.
   Le STYLE de l'ardoise (fond, grain, resets) reste sur `.ard`, lui. */
body.ard-page{
  --ard-gold:#c8a25a;
  --ard-gold-text:#c8a25a;   /* l'or quand il porte du texte — surchargé en light */
  --ard-tr:.22s cubic-bezier(.2,.7,.3,1);
  --ard-tr-slow:.5s cubic-bezier(.2,.7,.3,1);
  --ard-serif:'Fraunces',Georgia,serif;
  --ard-sans:'DM Sans',system-ui,sans-serif;
  --ard-gut:clamp(20px,4vw,64px);
}
[data-theme="dark"] body.ard-page{
  --ard-bg:#080d0a;          /* l'ardoise */
  --ard-bg-2:#0d1511;
  --ard-bg-3:#111c16;
  --ard-ink:#f2efe6;         /* la craie — jamais blanc pur */
  --ard-ink-2:rgba(242,239,230,.62);
  --ard-ink-3:rgba(242,239,230,.54);
  --ard-ink-4:rgba(242,239,230,.13);
  --ard-rule:rgba(242,239,230,.14);
  /* Le bord d'un champ est son seul indicateur de limite : 3:1 (WCAG 1.4.11).
     --ard-rule ne donne que 1,39:1 ici, --ard-rule-strong donne 3,22:1. */
  --ard-rule-strong:rgba(242,239,230,.38);
  --ard-accent:#34d399;
  --ard-accent-text:#34d399;  /* l'accent quand il porte du texte */
  --ard-on-accent:#04170d;
  --ard-shadow:0 30px 80px -20px rgba(0,0,0,.75);
}
[data-theme="light"] body.ard-page{
  --ard-bg:#f4f1ea;          /* le papier */
  --ard-bg-2:#eee9de;
  --ard-bg-3:#e6e0d2;
  --ard-ink:#141d17;
  --ard-ink-2:rgba(20,29,23,.72);
  --ard-ink-3:rgba(20,29,23,.7);
  --ard-ink-4:rgba(20,29,23,.14);
  --ard-rule:rgba(20,29,23,.16);
  /* Mesuré sur les trois fonds, car ce jeton borde aussi le champ de la recherche,
     posé sur --ard-bg-2 et rempli de --ard-bg-3 : 48 % n'y donnait que 3,00:1 et
     2,94:1, sous le seuil. 52 % tient partout — 3,42, 3,36 et 3,28:1. */
  --ard-rule-strong:rgba(20,29,23,.52);
  --ard-accent:#047857;
  --ard-accent-text:#035c46;  /* l'accent quand il porte du texte */
  /* Sur le papier, l'or de la maquette ne fait plus que 2,12:1 (il tient 8,18:1
     sur l'ardoise). Même teinte — h 39°, s 50 % — assombrie jusqu'à tenir le
     plus foncé des trois fonds : 5,38:1 sur --ard-bg, 5,01:1 sur --ard-bg-2 et
     4,61:1 sur --ard-bg-3, où la refonte a posé le marché. Un calibrage qui
     n'aurait visé que les deux premiers laisserait le kicker du marché à
     4,40:1. L'or décoratif (--ard-gold, fond du badge) ne bouge pas : c'est un
     fond, il porte du texte foncé. */
  --ard-gold-text:#7a5e29;
  --ard-on-accent:#ffffff;
  --ard-shadow:0 24px 60px -24px rgba(20,29,23,.28);
}
/* ─── Le pied de la maquette ────────────────────────────────
   Le footer de base.html est rendu hors de .ard : il gardait donc le
   --bg-footer vert de Night Kitchen (#dfeee5) alors que l'accueil est
   crème. Pas un écart de luminosité, un virage de teinte — et propre à
   l'accueil, les autres pages étant vertes sur vert.
   Le jeton est posé sur le body, hôte commun aux deux univers, et non
   sur .ard : le footer n'est pas dedans. La valeur est recopiée depuis
   --ard-bg-2 plutôt que référencée, faute de quoi var(--ard-bg-2)
   calculerait à invalide ici et éteindrait le fond ; la dette est tenue
   par FooterDeLArdoiseTests, qui rougit dès que les deux divergent. */
[data-theme="dark"] body.ard-page{--bg-footer:#0d1511}
[data-theme="light"] body.ard-page{--bg-footer:#eee9de}

.ard *,.ard *::before,.ard *::after{box-sizing:border-box}
.ard{
  position:relative; overflow-x:clip;
  background:var(--ard-bg); color:var(--ard-ink);
  font-family:var(--ard-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background var(--ard-tr),color var(--ard-tr);
}

/* `:where()` annule la spécificité de `a` : sans lui, `.ard a` pèse (0,1,1) et
   bat toute règle de composant à une seule classe. Cinq familles de liens
   perdaient ainsi la couleur qu'elles se donnaient — dont le tampon du hero,
   qui tombait à 2,08:1 sur son fond doré. Un reset doit peser le moins
   possible ; il énonce un défaut, il ne dispute pas. */
.ard :where(a){color:inherit;text-decoration:none}
.ard :where(button){font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.ard img{display:block;max-width:100%}

body.ard-page{
  --hn-shell:1280px;
  --hn-gut:32px;
  --hn-pad-y:140px;
  --hn-h1:clamp(40px,5.4vw,78px);
  --hn-h2:clamp(32px,3.6vw,48px);
  --hn-h3:clamp(20px,1.7vw,24px);
}

[data-theme="dark"] body.ard-page{
  --hn-gold-08:rgba(200,162,90,.08);
  --hn-gold-18:rgba(200,162,90,.18);
  --hn-gold-38:rgba(200,162,90,.38);
  --hn-on-gold:#150f04;
}
[data-theme="light"] body.ard-page{
  --hn-gold-08:rgba(122,94,41,.08);
  --hn-gold-18:rgba(122,94,41,.2);
  --hn-gold-38:rgba(122,94,41,.42);
  --hn-on-gold:#f6f3ec;
}

.hn-shell{width:100%;max-width:var(--hn-shell);margin:0 auto;padding:0 var(--hn-gut)}
.hn-section{padding:var(--hn-pad-y) 0}

.hn-serif{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-variation-settings:'SOFT' 34,'WONK' 1;
  font-weight:500;
  letter-spacing:-.022em;
}
.hn-h1{font-size:var(--hn-h1);line-height:1.02}
.hn-h1 .hn-dish{
  display:block;
  font-size:.84em;
  color:var(--ard-gold-text);
  margin-top:.1em;
}
.hn-h2{font-size:var(--hn-h2);line-height:1.08}
.hn-gold{color:var(--ard-gold-text)}

.hn-kicker{
  display:inline-flex;align-items:center;gap:14px;
  font-size:14px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--ard-gold-text);
  line-height:1;
}
.hn-kicker::before,.hn-kicker::after{
  content:"";display:block;width:30px;height:1px;background:var(--ard-gold-text);opacity:.75;
}
.hn-kicker--tight::before{width:22px}
.hn-kicker--tight::after{width:22px}

.hn-lead{color:var(--ard-ink-2);font-size:16px;line-height:1.6}

.hn-head{text-align:center;max-width:720px;margin:0 auto 64px}
.hn-head .hn-h2{margin:22px 0 20px}
.hn-head .hn-lead{margin:0 auto;max-width:520px}

.hn-flourish{display:flex;align-items:center;gap:16px;margin:34px 0 30px}
.hn-flourish span{
  display:block;height:1px;width:min(280px,42vw);
  background:linear-gradient(to right,var(--ard-gold-text),var(--hn-gold-18) 72%,transparent);
}
.hn-flourish svg{width:30px;height:14px;color:var(--ard-gold-text);opacity:.85;flex:none}

.hn-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;
  font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  border:1px solid transparent;border-radius:2px;
  transition:background-color var(--ard-tr),color var(--ard-tr),border-color var(--ard-tr),transform var(--ard-tr);
  white-space:nowrap;
}
.hn-btn svg{width:16px;height:16px;flex:none;transition:transform var(--ard-tr)}
.hn-btn:hover{transform:translateY(-2px)}
.hn-btn:hover svg{transform:translateX(4px)}
.hn-btn:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}

.hn-btn--solid{background:var(--ard-accent);color:var(--ard-on-accent);border-color:var(--ard-accent)}
.hn-btn--solid:hover{filter:brightness(1.08)}

.hn-btn--ghost{border-color:var(--hn-gold-38);color:var(--ard-gold-text)}
.hn-btn--ghost:hover{border-color:var(--ard-gold-text);background:var(--hn-gold-08)}

/* Deux portes se suivent sous la bande de recherche : la première doit primer sans
   devenir un second vert plein. « Je cuisine ça » porte déjà --solid juste au-dessus,
   et dans cette page l'or est éditorial quand le vert est produit. L'or monte donc en
   intensité : bord opaque et fond à 8 %, soit 6,94:1 en sombre et 4,50:1 en clair. */
.hn-btn--ghost-hi{border-color:var(--ard-gold-text);background:var(--hn-gold-08);color:var(--ard-gold-text)}

.hn-btn--line{border-color:var(--ard-rule);color:var(--ard-ink)}
.hn-btn--line:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}

.hn-btn--sm{min-height:42px;padding:0 20px;font-size:12px;letter-spacing:1.4px}

/* --- Les deux étages : « Les chefs de la maison », puis « La table des
   membres ». Le sous-titre d'étage est un titre courant de revue : le titre
   à gauche, le filet qui court vers la droite et s'éteint. Fraunces en 400,
   un cran sous le 500 du .hn-serif — un sous-titre ne dispute pas le h2.
   L'encre reste au titre, l'or au filet : la discipline de la page.
   :is(h2,h3) : l'étage est un h3 sur l'accueil, sous le h2 de section, et
   un h2 sur /classement/, sous le h1 de page — même dessin dans les deux.
   Une grille et non un flex : le chapeau (.hn-etage-lead) entre dans le
   même bloc, en seconde rangée, et le filet reste en première. -------- */
.hn-etage{
  display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:22px;
  margin:clamp(72px,7.5vw,96px) 0 44px;
}
.hn-head + .hn-etage{margin-top:0}
.hn-etage :is(h2,h3){
  grid-column:1;grid-row:1;margin:0;
  font-size:var(--hn-h3);font-weight:400;line-height:1.2;color:var(--ard-ink);
}
.hn-etage::after{
  content:"";grid-column:2;grid-row:1;height:1px;
  background:linear-gradient(to right,var(--ard-gold-text),var(--hn-gold-18) 60%,transparent);
}
/* Un cran sous .hn-lead (15 px, encre 3) : le chapeau d'étage reste sous
   le chapeau de section quand la page en a un. */
.hn-etage-lead{
  grid-column:1/-1;margin:10px 0 0;max-width:560px;
  font-size:15px;line-height:1.6;color:var(--ard-ink-3);
}

/* --- Étage 1 : la grille des chefs de la maison. Des médaillons plus
   petits et plus serrés que le podium (64 contre 88) : c'est la maison qui
   se présente, pas un classement. Pas de rang, pas de nombre en Fraunces
   or — le compte reste en petites capitales, comme sous le podium, pour ne
   pas concurrencer l'honneur de l'étage 2. role="list" sur le <ul> : Safari
   retire la sémantique de liste dès que list-style vaut none. ---------- */
.hn-maison{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 16px;
}
.hn-maison-chef{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:8px 4px;border-radius:2px;
}
.hn-maison-chef:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:4px}
/* Même anneau que .hn-ava, réduit avec le médaillon : 3 + 1 px de halo
   pour 64 px, là où 88 px en portent 5 + 1. */
.hn-maison-ava{
  width:64px;height:64px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:var(--ard-bg-2);
  border:1px solid var(--ard-gold-text);
  box-shadow:0 0 0 3px var(--ard-bg),0 0 0 4px var(--hn-gold-18);
  font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 34,'WONK' 1;
  font-weight:600;font-size:22px;color:var(--ard-gold-text);line-height:1;
  transition:transform var(--ard-tr);
}
.hn-maison-ava img{width:100%;height:100%;object-fit:cover}
/* Comme le podium : seul le médaillon monte, le nom ne bouge pas et ne
   change pas de couleur. */
.hn-maison-chef:hover .hn-maison-ava{transform:translateY(-3px)}
.hn-maison-n{margin-top:14px;font-size:17px;line-height:1.2;color:var(--ard-ink)}
.hn-maison-c{
  margin-top:6px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ard-ink-3);font-variant-numeric:tabular-nums;
}
@media (max-width:1023px){
  .hn-maison{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  /* Trois colonnes sur 320 px de shell = 100 px la case. « 258 recettes »
     en capitales espacées de 1,8 px demande 104 px : l'espacement se
     resserre pour tenir sur une ligne à partir de 360 px d'écran. */
  .hn-maison{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 10px}
  .hn-maison-chef{padding:8px 0}
  .hn-maison-c{font-size:10.5px;letter-spacing:1.3px}
}

@media (max-width:1180px){
  body.ard-page{--hn-pad-y:104px;--hn-gut:24px}
}

@media (max-width:640px){
  body.ard-page{--hn-pad-y:80px;--hn-gut:20px}
  /* Onze boutons pour quatre largeurs : le lot du hero a mis les quatre du haut
     en pleine largeur, le reste de la page gardait la largeur de son texte et
     jusqu'à 147 px de vide à droite. Une seule règle les tient tous, y compris
     ceux du hero et de la recherche qui portaient la leur.
     width et non flex-basis : les conteneurs ne sont pas tous des flex (.hn-sub-r
     empile en colonne, .hn-rank-empty centre), et width traverse les deux cas. */
  .ard .hn-btn{width:100%}
}

/* ─── La carte de recette — partagée par l'accueil (« En vogue », rubriques) et
   le profil (« Les recettes de … »). Les variantes propres à l'accueil (.hn-badge,
   .hn-rate, .hn-more) et ses surcharges de grille restent dans
   accueil_nuit.css, chargé après cette feuille. ─── */
.hn-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--hn-gut)}
.hn-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--ard-bg-2);border:1px solid var(--ard-rule);border-radius:14px;overflow:hidden;
  transition:border-color var(--ard-tr),transform var(--ard-tr),background-color var(--ard-tr);
}
.hn-card:hover{transform:translateY(-6px);border-color:var(--hn-gold-38);background:var(--ard-bg-3)}
.hn-card:focus-within{border-color:var(--ard-gold-text);outline:2px solid var(--ard-gold-text);outline-offset:3px}
.hn-card-ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ard-bg-3)}
.hn-card-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.hn-card:hover .hn-card-ph img{transform:scale(1.06)}
.hn-card-ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.42),transparent 46%);
  opacity:.8;
}
.hn-card-body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1}
.hn-card-t{font-size:var(--hn-h3);line-height:1.24;transition:color var(--ard-tr)}
.hn-card:hover .hn-card-t{color:var(--ard-gold-text)}
.hn-card-t a::after{content:"";position:absolute;inset:0}
.hn-card-t a:focus-visible{outline:none}
.hn-card-meta{
  margin-top:auto;display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  padding-top:14px;border-top:1px solid var(--ard-rule);
  font-size:14px;color:var(--ard-ink-3);
}

/* Recette sans photo : la carte garde son cadre 4/3, occupé par le pictogramme. */
.hn-card-nopic{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;background:var(--ard-bg-3);
}
.hn-card-nopic svg{width:38px;height:38px;color:var(--ard-ink-3);fill:none;stroke:currentColor;stroke-width:1.4}

/* Le point séparateur des métas. Il vivait dans accueil_nuit.css:269 ; le planning l'emploie
   sans charger l'accueil, il monte donc au socle — même valeur, et accueil_nuit.css garde la
   sienne (identique, sans conflit). Seule règle que le lot planning ajoute ici. */
.hn-dot{width:3px;height:3px;border-radius:50%;background:var(--ard-gold-text);opacity:.6;flex:none}