/* ══════════════════════════════════════════════════════════════
   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:var(--nav-h)}` 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.
   Les --ard-* et les --hn-gold-* sont passés dans night_kitchen.css, sur le
   body de toutes les pages : la manchette, présente partout, les emploie.
   Ceux qui restent ici gardent la portée du registre : `body.ard-page`.
   Le STYLE de l'ardoise (fond, grain, resets) reste sur `.ard`, lui. */

.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);
}

/* --hn-btn-fond, le fond « kraft » de .hn-btn--fond, vit dans night_kitchen.css,
   sur le body de toutes les pages (lot « Et tu ne manges jamais… », 08/11/2026). */
[data-theme="dark"] body.ard-page{
  --hn-on-gold:#150f04;
}
[data-theme="light"] body.ard-page{
  --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)}

/* Le bouton secondaire : un geste avec un verbe prend un fond (décisions de Freddy
   du 08/11 et du 10/11, D1 et D3 : un contour seul sur le fond de la page est un
   cadre, pas un bouton). --ghost et --line, qui étaient des contours, prennent le
   kraft de --fond : un seul bouton secondaire sur le site. Règle 6 de
   CLAUDE.md : en sombre le fond n'est pas noir, le texte est la craie ; en clair il
   n'est pas blanc, le texte est l'encre. Le liseré or (D3, D7) tient le bord à 3:1
   là où le kraft seul tombe dessous : --ard-bg-2 (2,98:1) et --ard-bg-3 (2,74:1) en
   clair, où le liseré donne 5,01 et 4,61:1. Une icône or prend la couleur du texte :
   l'or sur le kraft ne fait que 1,69:1. Le survol trace le bord à l'encre : le fond
   ne bouge pas, le texte garde ses 4,5:1. */
.hn-btn--ghost,.hn-btn--line,.hn-btn--fond{background:var(--hn-btn-fond);border-color:var(--ard-gold-text);color:var(--ard-ink)}
.hn-btn--ghost svg,.hn-btn--line svg,.hn-btn--fond svg{color:inherit}
.hn-btn--ghost:hover,.hn-btn--line:hover,.hn-btn--fond:hover{background:var(--hn-btn-fond);border-color:var(--ard-ink);color:var(--ard-ink)}
.hn-btn--ghost:active,.hn-btn--line:active,.hn-btn--fond:active{transform:none;box-shadow:inset 0 0 0 1px var(--ard-ink)}

.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}