/* ══════════════════════════════════════════════════════════════════
   LA FICHE RECETTE - registre éditorial (préfixe fr-)
   Spec : docs/superpowers/specs/2026-09-30-refonte-fiche-recette-design.md
   Maquettes : .claude/design-drafts/2026-09-30-fiche-recette-v2.html (et -225-v2)
   Se charge APRÈS editorial.css (.ard : fond, encre, resets) et
   mode_cuisine.css. Les jetons --ard-* et --hn-gold-* viennent de
   night_kitchen.css, posés sur body dans les deux thèmes.
   Les classes rd-*, les data-* et les ids restent le contrat du JS : le
   style passe par les classes fr-* posées à côté.
   ══════════════════════════════════════════════════════════════════ */

/* ── Socle ── */
/* La manchette est fixe : la page réserve sa hauteur (constante des pages ardoise, cf. historique.css). */
.fr-page{padding-top:var(--nav-h)}
/* Fais ma semaine et planification rendent la page sans barre : ni réserve, ni collant sous elle. */
.fr-page.rd-page--fms{--nav-h:0px;--nav-h-sticky:0px}
/* Le JS montre et cache par .hidden : sans ce poids, une règle fr-* qui pose un display gagnerait sur l'utilitaire. */
.fr-page .hidden{display:none}
.fr-shell{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--ard-gut)}
.fr-i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fr-i--plein{fill:currentColor;stroke:none}

/* ── Boutons et liens ── */
.fr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border:1px solid transparent;border-radius:2px;white-space:nowrap;cursor:pointer;transition:background-color var(--ard-tr),color var(--ard-tr),border-color var(--ard-tr)}
.fr-btn:focus-visible,.fr-lien:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}
.fr-btn--solid{background:var(--ard-accent);border-color:var(--ard-accent);color:var(--ard-on-accent)}
.fr-btn--solid:hover{filter:brightness(1.08)}
.fr-btn--line{background:transparent;border-color:var(--ard-rule-strong);color:var(--ard-ink)}
.fr-btn--line:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}
.fr-btn--carre{width:48px;padding:0}
.fr-btn--sm{min-height:40px;padding:0 16px;font-size:11.5px}
.fr-btn[aria-pressed="true"]{border-color:var(--ard-gold-text);color:var(--ard-gold-text);background:var(--hn-gold-08)}
.fr-btn[aria-pressed="true"] .fr-i{fill:currentColor}
.fr-lien{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;border-bottom:1px solid transparent;background:none;font-size:13px;font-weight:600;color:var(--ard-ink-2);cursor:pointer}
.fr-lien:hover{color:var(--ard-gold-text);border-bottom-color:currentColor}
.fr-lien .fr-i{width:15px;height:15px}

/* ── Titres ── */
.fr-kicker{display:inline-flex;align-items:center;gap:12px;margin:0;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ard-gold-text);line-height:1}
.fr-kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.75}
.fr-h2{margin:14px 0 0;font-family:var(--ard-serif);font-weight:500;font-size:clamp(30px,3vw,40px);line-height:1.08;letter-spacing:-.015em}
.fr-h2 em{font-style:italic;font-weight:400}
.fr-h3{margin:44px 0 0;font-family:var(--ard-serif);font-size:24px;font-weight:500}
.fr-cap{text-transform:capitalize}

/* ── Bandeaux : planification (Fais ma semaine, planning) et modération (§ 5.1) ── */
.fr-bandeau{position:sticky;top:var(--nav-h-sticky);z-index:50;background:var(--ard-bg-2);border-bottom:1px solid var(--ard-gold)}
.fr-bandeau-in{display:flex;align-items:center;gap:16px;min-height:64px;padding-top:10px;padding-bottom:10px}
.fr-bandeau-in>.fr-i{color:var(--ard-gold-text)}
.fr-bandeau-txt{flex:1;min-width:0}
.fr-bandeau-lbl{margin:0;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text)}
.fr-bandeau-quand{margin:2px 0 0;font-family:var(--ard-serif);font-size:18px}
.fr-bandeau-fermer{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid var(--ard-rule-strong);border-radius:50%;color:var(--ard-ink)}
.fr-bandeau-fermer:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}
.fr-moderation{border-bottom:1px solid var(--ard-rule);background:var(--hn-gold-08)}
.fr-moderation-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;padding-top:16px;padding-bottom:16px}
.fr-moderation-lbl{margin:0;font-family:var(--ard-serif);font-size:19px}
.fr-moderation-sous{margin:2px 0 0;font-size:13px;color:var(--ard-ink-2)}
.fr-moderation-btns{display:flex;gap:10px}
@media (max-width:480px){
  .fr-bandeau-in{flex-wrap:wrap}
  .fr-bandeau-in .fr-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .fr-page *{transition:none!important}
}

/* ── La une (§ 5.2) ── */
.fr-une{padding:56px 0 64px}
.fr-une>.fr-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.fr-ariane{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--ard-ink-3)}
.fr-ariane a:hover{color:var(--ard-gold-text)}
.fr-ariane span[aria-hidden]{opacity:.5}
.fr-une .fr-kicker{margin-top:28px}
.fr-titre{margin:18px 0 0;font-family:var(--ard-serif);font-weight:500;font-size:clamp(40px,5vw,70px);line-height:1.02;letter-spacing:-.025em;text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.fr-titre em{display:block;font-style:italic;font-weight:400;color:var(--ard-gold-text)}
.fr-chapo{margin:24px 0 0;max-width:34em;font-family:var(--ard-serif);font-size:20px;line-height:1.5;color:var(--ard-ink-2);font-weight:300}
.fr-signe{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:30px;padding-top:22px;border-top:1px solid var(--ard-rule)}
.fr-auteur{display:flex;align-items:center;gap:12px}
.fr-auteur-av{display:block;width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;border:1px solid var(--ard-rule-strong)}
.fr-auteur-av img{width:100%;height:100%;object-fit:cover}
.fr-auteur-n{font-weight:700;font-size:15px}
.fr-auteur-g{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ard-gold-text)}
.fr-auteur-d{font-size:13px;color:var(--ard-ink-3)}
.fr-note{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ard-ink-2)}
a.fr-note:hover{color:var(--ard-gold-text)}
/* Étoiles (balise etoiles) : la moyenne s'arrondit au demi ; l'or couvre la moitié gauche d'une étoile vide. */
.fr-etoiles{display:inline-flex;gap:2px;color:var(--ard-gold)}
.fr-etoiles .fr-i{width:15px;height:15px}
.fr-etoiles .vide{color:var(--ard-ink-4)}
.fr-etoiles--grand .fr-i{width:18px;height:18px}
.fr-demi{position:relative;display:inline-flex}
.fr-demi svg+svg{position:absolute;inset:0;color:var(--ard-gold);clip-path:inset(0 50% 0 0)}
.fr-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.fr-auteur-actions{display:flex;gap:22px;margin-top:18px}
.fr-photo{position:relative;margin:0}
.fr-photo::before{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--hn-gold-38);pointer-events:none}
.fr-photo img,.fr-photo-vide{position:relative;display:block;width:100%;aspect-ratio:5/4;object-fit:cover;background:var(--ard-bg-3)}
.fr-photo-vide{display:grid;place-items:center;color:var(--ard-ink-3)}
.fr-photo-vide .fr-i{width:64px;height:64px;stroke-width:1.1}

/* ── La fiche (§ 5.3) ── */
.fr-fiche{border-top:1px solid var(--ard-rule);border-bottom:1px solid var(--ard-rule);background:var(--ard-bg-2)}
.fr-fiche dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.fr-fiche dl>div{padding:26px 28px;border-left:1px solid var(--ard-rule)}
.fr-fiche dl>div:first-child{border-left:0;padding-left:0}
.fr-fiche dt{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text)}
.fr-fiche dt .fr-i{width:15px;height:15px}
.fr-fiche dd{margin:10px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fr-val{font-family:var(--ard-serif);font-size:30px;line-height:1;font-weight:500;letter-spacing:-.01em}
.fr-val small{font-family:var(--ard-sans);font-size:14px;font-weight:500;color:var(--ard-ink-2);letter-spacing:0}
.fr-sous{display:block;width:100%;margin-top:4px;font-size:13px;color:var(--ard-ink-3)}
/* Temps détaillés : un picto par temps, nommé pour les lecteurs d'écran (texte masqué). */
.fr-t{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.fr-t .fr-i{width:14px;height:14px}
/* Infobulle au survol du picto : encre et papier inversés, lisibles dans les 2 thèmes ; calée à gauche pour ne pas sortir de l'écran. */
.fr-t-ico{position:relative;display:inline-flex;cursor:help}
.fr-t-ico::after{content:attr(data-nom);position:absolute;bottom:calc(100% + 8px);left:-4px;padding:5px 9px;background:var(--ard-ink);color:var(--ard-bg);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;border-radius:2px;opacity:0;pointer-events:none;transition:opacity var(--ard-tr);z-index:2}
.fr-t-ico:hover::after{opacity:1}
/* Pastille Nutri-Score : couleurs officielles du label, fond verrouillé volontairement - texte blanc forcé OK (C : texte sombre). */
.fr-nutri{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#038141;color:#fff;font-weight:800;font-size:15px}
.fr-nutri--b{background:#85BB2F}
.fr-nutri--c{background:#FECB02;color:#1a1a1a}
.fr-nutri--d{background:#EE8100}
.fr-nutri--e{background:#E63E11}
.fr-echelle{display:inline-flex;gap:4px}
.fr-echelle i{width:18px;height:4px;background:var(--ard-ink-4)}
.fr-echelle i.on{background:var(--ard-gold)}

@media (max-width:960px){
  .fr-une{padding:0 0 44px}
  .fr-une>.fr-shell{grid-template-columns:1fr;gap:28px;padding:0}
  .fr-une .fr-photo{order:-1}
  .fr-photo::before{display:none}
  .fr-photo img,.fr-photo-vide{aspect-ratio:4/3}
  .fr-une-txt{padding:0 var(--ard-gut)}
  .fr-une .fr-kicker{margin-top:22px}
  .fr-chapo{font-size:18px}
  .fr-fiche dl{grid-template-columns:1fr 1fr}
  .fr-fiche dl>div{padding:20px 12px 20px 18px}
  .fr-fiche dl>div:nth-child(odd){border-left:0;padding-left:0}
  .fr-fiche dl>div:nth-child(n+3){border-top:1px solid var(--ard-rule)}
  .fr-val{font-size:25px}
}
@media (max-width:480px){
  .fr-actions .fr-btn--solid{flex:1}
}

/* ── Le corps : ingrédients | préparation (§ 5.4) ── */
.fr-corps{padding:72px 0 40px}
.fr-corps>.fr-shell{display:grid;grid-template-columns:360px minmax(0,1fr);gap:clamp(40px,5vw,88px);align-items:start}
.fr-portions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding:10px 0;border-top:1px solid var(--ard-rule);border-bottom:1px solid var(--ard-rule)}
.fr-portions-lbl{font-size:14px;color:var(--ard-ink-2)}
.fr-pas{display:flex;align-items:center;gap:6px}
.fr-pas button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ard-rule-strong);border-radius:50%;color:var(--ard-ink)}
.fr-pas button:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}
.fr-pas button:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}
.fr-pas button .fr-i{width:16px;height:16px}
.fr-pas output{min-width:92px;text-align:center;font-family:var(--ard-serif);font-size:22px;line-height:1.1}
/* updatePortions anime #nb-personnes par transform : il lui faut une boîte. */
.fr-pas #nb-personnes{display:block}
.fr-pas output small{display:block;font-family:var(--ard-sans);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ard-ink-3)}
.fr-liste{list-style:none;margin:6px 0 0;padding:0}
/* Une ligne sur 3 lignes : nom (+ Opt.), note de préparation, quantité ; la vignette centrée sur l'ensemble. */
.fr-ing{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ard-rule)}
.fr-liste-sec{padding:30px 0 10px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text);border-bottom:1px solid var(--hn-gold-38)}
.fr-vign{grid-row:1/3;align-self:center;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--ard-bg-3);border:1px solid var(--ard-rule)}
.fr-vign--vide{display:grid;place-items:center;color:var(--ard-ink-3);font-family:var(--ard-serif);font-size:17px;font-style:italic}
.fr-nom{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.fr-opt{margin-left:8px;font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ard-ink-3)}
.fr-prec{display:block;font-size:13px;font-weight:400;color:var(--ard-ink-3);font-style:italic}
.fr-qte{grid-column:2;font-family:var(--ard-serif);font-size:16px;color:var(--ard-gold-text);font-variant-numeric:tabular-nums}
.fr-qte small{font-family:var(--ard-sans);font-size:13px;color:var(--ard-ink-2)}
.fr-qte em{margin-left:8px;font-family:var(--ard-sans);font-style:normal;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--ard-ink-3)}
.fr-ust{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fr-ust:empty{margin-top:0}
.fr-ust-p{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border:1px solid var(--ard-rule);border-radius:99px;font-size:14px}
.fr-ust-p img,.fr-ust-p b{width:28px;height:28px;flex:none;border-radius:50%;object-fit:cover;background:var(--ard-bg-3)}
.fr-ust-p b{display:inline-grid;place-items:center;color:var(--ard-ink-3);font-family:var(--ard-serif);font-size:14px;font-style:italic;font-weight:400}
.fr-ingr .fr-lien{margin-top:14px}

/* Desktop : la colonne est toujours collante et jamais plus haute que la fenêtre ; au-delà elle défile seule,
   portions en tête. Sous la manchette fixe : --nav-h-sticky (comme frigo.css). Pas de JS de hauteur. */
@media (min-width:961px){
  .fr-ingr{position:sticky;top:calc(var(--nav-h-sticky) + 24px);max-height:calc(100vh - var(--nav-h-sticky) - 48px);overflow-y:auto;padding-right:16px;scrollbar-width:thin;scrollbar-color:var(--ard-rule-strong) transparent}
  .fr-ingr:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:6px}
  .fr-portions{position:sticky;top:0;z-index:1;background:var(--ard-bg)}
  /* « Suite des ingrédients » : visible seulement s'il reste des ingrédients cachés (.a-suite, posée par le JS) ;
     marge négative = aucune hauteur ajoutée, donc pas de défilement pour rien. */
  .fr-ingr.a-suite .fr-suite{position:sticky;bottom:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;width:100%;height:76px;margin-top:-76px;padding:0 0 10px;border:0;background:linear-gradient(to bottom,transparent,var(--ard-bg) 62%);font-family:var(--ard-sans);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--ard-gold-text);cursor:pointer}
  .fr-suite:hover span{border-bottom:1px solid currentColor}
  .fr-suite .fr-i{width:16px;height:16px;animation:fr-suite 1.8s ease-in-out infinite}
}
.fr-suite{display:none}
@keyframes fr-suite{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.fr-suite .fr-i{animation:none}}

@media (max-width:960px){
  .fr-corps{padding-top:48px}
  .fr-corps>.fr-shell{grid-template-columns:1fr;gap:56px}
  .fr-ing{grid-template-columns:34px minmax(0,1fr);column-gap:12px;padding:8px 0}
  .fr-vign{width:34px;height:34px}
  .fr-vign--vide{font-size:15px}
  .fr-liste-sec{padding:22px 0 8px}
}

/* ── Préparation (§ 5.5) ── */
.fr-prep-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.fr-prep-meta{margin:10px 0 0;font-size:14px;color:var(--ard-ink-3)}
.fr-etapes{list-style:none;margin:30px 0 0;padding:0}
.fr-etape{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;padding:28px 0;border-top:1px solid var(--ard-rule);cursor:pointer}
.fr-etape:last-child{border-bottom:1px solid var(--ard-rule)}
.fr-num{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ard-rule-strong);border-radius:50%;background:transparent;padding:0;cursor:pointer;font-family:var(--ard-serif);font-style:italic;font-size:21px;color:var(--ard-gold-text);transition:background-color var(--ard-tr),color var(--ard-tr),border-color var(--ard-tr)}
.fr-num:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}
.fr-num .fr-i{display:none;width:18px;height:18px}
.fr-txt{margin:6px 0 0;font-size:18px;line-height:1.7;max-width:40em;overflow-wrap:break-word}
.fr-etape .rd-nk-timers{margin-top:16px}
/* Les pastilles des minuteurs passent à l'or dans la fiche ; le Mode Cuisine garde les siennes (mode_cuisine.css). */
.fr-etape .rd-nk-timers .rd-cm-timer{border-color:var(--hn-gold-38);background:transparent;color:var(--ard-gold-text)}
.fr-etape .rd-nk-timers button.rd-cm-timer:hover{background:var(--hn-gold-08)}
/* « Terminé » : encre pleine inversée, la voix de la bande « Terminé » ; repère fixe, sans mouvement (décision du 01/10).
   Le survol est repris ici : sinon la règle de survol ci-dessus, plus spécifique, rendrait le fond transparent. */
.fr-etape .rd-nk-timers .rd-cm-timer.done,
.fr-etape .rd-nk-timers button.rd-cm-timer.done:hover{border-color:var(--ard-ink);background:var(--ard-ink);color:var(--ard-bg)}
/* « Dans cette étape » : les pastilles de la prod, reprises de la maquette v2 -
   vignette ronde (photo ou initiale), nom au-dessus de la quantité. Écart voulu avec la maquette :
   le nom n'est jamais tronqué (pas d'ellipse), il passe à la ligne. */
.fr-dans{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.fr-dans:empty{display:none}
.fr-dans-t{width:100%;margin:0 0 2px;font-size:13.5px;color:var(--ard-ink-3)}
.fr-chip{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:5px 12px 5px 5px;background:var(--ard-bg-2);border:1px solid var(--ard-rule);border-radius:999px}
.fr-chip-av{flex-shrink:0;width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--ard-bg-3);border:1.5px solid var(--ard-rule)}
b.fr-chip-av{display:grid;place-items:center;color:var(--ard-ink-3);font-family:var(--ard-serif);font-size:16px;font-style:italic;font-weight:400}
.fr-chip-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.fr-chip-n{overflow-wrap:anywhere;font-size:13px;font-weight:700;line-height:1.2;color:var(--ard-ink)}
.fr-chip-q{white-space:nowrap;font-size:12px;font-weight:500;line-height:1;color:var(--ard-ink-3);font-variant-numeric:tabular-nums}
.fr-etape-img{display:block;width:100%;max-height:320px;margin-top:18px;object-fit:cover}
/* Seule l'étape active montre ses actions ; les autres passent en encre atténuée une fois la lecture commencée. */
.fr-etape-actions{display:none;align-items:center;gap:22px;margin-top:22px}
.fr-etape.active .fr-etape-actions{display:flex}
.fr-etape.active .fr-num{background:var(--ard-accent);border-color:var(--ard-accent);color:var(--ard-on-accent);font-style:normal;font-weight:600}
.fr-etape.done .fr-num{border-color:var(--ard-accent);color:var(--ard-accent-text)}
.fr-etape.done .fr-num span{display:none}
.fr-etape.done .fr-num .fr-i{display:block}
.fr-etape.done .fr-txt{color:var(--ard-ink-3)}
.fr-etapes.is-started .fr-etape:not(.active):not(.done) .fr-txt{color:var(--ard-ink-2)}
.fr-etapes-vide{margin:30px 0 0;padding:28px 0;border-top:1px solid var(--ard-rule);font-family:var(--ard-serif);font-size:20px;font-style:italic;color:var(--ard-ink-2)}
/* Le bloc de fin ne prend aucune place tant que la recette n'est pas finie (ancien trou de ~440 px). */
.fr-fin{display:none;margin-top:36px;padding:32px 36px;border:1px solid var(--hn-gold-38);background:var(--hn-gold-08);text-align:center}
.fr-fin.show{display:block}
.fr-fin-ico{width:34px;height:34px;color:var(--ard-gold-text)}
.fr-fin-t{margin:12px 0 0;font-family:var(--ard-serif);font-weight:500;font-size:28px}
.fr-fin p{margin:8px 0 22px;color:var(--ard-ink-2)}
/* Mode Cuisine : l'initiale remplace l'émoji des ingrédients sans photo (spec § 6). */
.rd-cm-ing-ini{font-family:var(--ard-serif);font-style:italic;font-size:15px}

/* ── Le mot du chef (§ 5.6) ── */
.fr-astuces{margin-top:64px}
.fr-astuce{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;margin-top:26px;padding:26px 0;border-top:1px solid var(--ard-gold);border-bottom:1px solid var(--ard-rule)}
.fr-astuce+.fr-astuce{margin-top:0;border-top:0}
.fr-astuce-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--hn-gold-08);color:var(--ard-gold-text)}
.fr-astuce-ico svg{width:20px;height:20px}
.fr-astuce-t{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text)}
.fr-astuce p{margin:8px 0 0;font-family:var(--ard-serif);font-size:19px;line-height:1.6;font-weight:300;max-width:38em}

@media (max-width:960px){
  .fr-prep-tete .fr-btn{width:100%}
  .fr-etape,.fr-astuce{grid-template-columns:52px minmax(0,1fr);gap:4px}
  .fr-num,.fr-astuce-ico{width:38px;height:38px;font-size:18px}
  .fr-txt{font-size:17px}
}
/* Pastilles des étapes : seuil de la maquette v2, validé par le propriétaire (aucune taille < 11.5 px). */
@media (max-width:767px){
  .fr-dans{gap:7px}
  .fr-chip{gap:6px;padding:4px 10px 4px 4px}
  .fr-chip-av{width:30px;height:30px}
  b.fr-chip-av{font-size:15px}
  .fr-chip-n{font-size:12.5px}
  .fr-chip-q{font-size:11.5px}
}
@media (max-width:480px){
  .fr-etape-actions{flex-wrap:wrap;gap:14px 22px}
}

/* ── Les avis (§ 5.9) ── */
.fr-avis{margin-top:48px;padding:80px 0 96px;border-top:3px double var(--ard-gold);background:var(--ard-bg-2)}
.fr-avis-tete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:clamp(32px,5vw,72px);align-items:center;margin-top:36px;padding-bottom:40px;border-bottom:1px solid var(--ard-rule)}
.fr-moy{display:flex;align-items:center;gap:20px}
.fr-moy-n{font-family:var(--ard-serif);font-size:64px;line-height:1;font-weight:500}
.fr-moy-n small{font-size:22px;color:var(--ard-ink-3)}
.fr-moy-c{margin:6px 0 0;font-size:13px;color:var(--ard-ink-3)}
.fr-barres{display:grid;gap:7px;font-size:12px;color:var(--ard-ink-3)}
.fr-barres>div{display:grid;grid-template-columns:14px 1fr 22px;gap:12px;align-items:center}
.fr-barres i{display:block;height:4px;background:var(--ard-ink-4)}
.fr-barres b{display:block;height:100%;background:var(--ard-gold)}
.fr-noter{text-align:center}
.fr-noter p{margin:0 0 10px;font-size:13px;color:var(--ard-ink-2)}
.fr-noter .fr-noter-fait{margin:0;font-family:var(--ard-serif);font-size:19px;font-style:italic}
/* Les cinq étoiles de l'appel (écrites par initCTAStars) */
#starWidgetCTA{display:inline-flex;gap:6px}
.rd-cta-star{width:30px;height:30px;color:var(--ard-ink-3);cursor:pointer;transition:transform var(--ard-tr),color var(--ard-tr)}
.rd-cta-star:hover,.rd-cta-star.filled{color:var(--ard-gold);fill:var(--ard-gold)}
.rd-cta-star.active{transform:scale(1.12)}
.fr-alerte-staff{display:flex;align-items:center;gap:8px;margin:24px 0 0;font-size:13px;font-weight:600}
.fr-alerte-staff .fr-i{color:var(--red)}
/* Formulaire : textarea et select à filet ; ces sélecteurs pèsent plus que les utilitaires posés par CommentaireForm. */
.fr-avis-form{margin-top:36px;padding:28px 0 32px;border-bottom:1px solid var(--ard-rule)}
.fr-avis-form .fr-h3{margin:0}
.fr-champ-lbl{display:block;margin:22px 0 8px;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text)}
.fr-avis-form textarea,.fr-avis-form select{width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--ard-rule-strong);border-radius:0;background:transparent;color:var(--ard-ink);font:inherit;font-size:16px;resize:vertical}
.fr-avis-form select option{background:var(--ard-bg);color:var(--ard-ink)}
.fr-avis-form textarea:focus,.fr-avis-form select:focus{outline:none;border-bottom-color:var(--ard-gold-text);box-shadow:none}
/* Les étoiles du formulaire (écrites par initInteractiveStars ; demi-notes au survol) */
#starWidget{display:flex;align-items:center;gap:6px;margin-top:18px;cursor:pointer}
.star-item{position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.star-bg{position:absolute;width:100%;height:100%;color:var(--ard-ink-4)}
.star-fill{position:absolute;top:0;left:0;width:0;height:100%;overflow:hidden;color:var(--ard-gold);transition:width .15s}
.star-fill svg{width:34px;height:34px}
.star-item.filled .star-fill{width:100%}
.star-item.half-filled .star-fill{width:50%}
#ratingText{margin-left:12px;font-size:14px;font-weight:600;color:var(--ard-ink-2)}
.fr-xp{margin-top:12px}
.fr-xp-ligne{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ard-ink-3)}
.fr-xp-piste{height:3px;margin-top:6px;background:var(--ard-ink-4)}
.fr-xp-barre{width:0;height:100%;background:var(--ard-gold);transition:width var(--ard-tr)}
.fr-avis-form-pied{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px 18px;margin-top:22px}
.fr-avis-form-pied .fr-lien{margin-right:auto}
/* Liste */
.fr-vide{margin:40px 0 0;font-family:var(--ard-serif);font-size:22px;font-style:italic;font-weight:300;color:var(--ard-ink-2);text-align:center}
.fr-cmts{list-style:none;margin:8px 0 0;padding:0;columns:2;column-gap:64px}
.fr-cmt{break-inside:avoid;padding:28px 0;border-bottom:1px solid var(--ard-rule)}
.fr-cmt-tete{display:flex;align-items:center;gap:12px}
.fr-cmt-av{display:block;width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;border:1px solid var(--ard-rule)}
.fr-cmt-av img{width:100%;height:100%;object-fit:cover}
.fr-cmt-n{font-weight:700;font-size:14px}
.fr-cmt-d{font-size:12px;color:var(--ard-ink-3)}
.fr-cmt-tete .fr-etoiles{margin-left:auto}
.fr-cmt-top{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--ard-gold-text)}
.fr-cmt-signale{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:12px;font-weight:600;color:var(--ard-ink-2)}
.fr-cmt-signale .fr-i{width:14px;height:14px;color:var(--red)}
.fr-cmt-texte{margin:10px 0 0;font-size:15.5px;line-height:1.65;overflow-wrap:break-word}
.fr-cmt-actions{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.fr-cmt-actions .fr-lien{font-size:12.5px}
.fr-like.liked{color:var(--ard-gold-text)}
.fr-like.liked .fr-i{fill:currentColor}
.fr-reponses{margin-top:14px;padding-left:18px;border-left:1px solid var(--hn-gold-38)}
.fr-reponse{padding:10px 0}
.fr-reponse+.fr-reponse{border-top:1px solid var(--ard-rule)}
.fr-reponse-tete{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--ard-ink-3)}
.fr-reponse-av{display:block;width:24px;height:24px;flex:none;border-radius:50%;overflow:hidden}
.fr-reponse-av img{width:100%;height:100%;object-fit:cover}
.fr-reponse-n{font-weight:700;color:var(--ard-ink-2)}
.fr-reponse p{margin:6px 0 0;font-size:14px;color:var(--ard-ink-2);overflow-wrap:break-word}
.fr-repondre{display:flex;gap:10px;align-items:flex-end;margin-top:10px}
.fr-repondre textarea{flex:1;min-width:0;padding:8px 0;border:0;border-bottom:1px solid var(--ard-rule-strong);background:transparent;color:var(--ard-ink);font:inherit;font-size:14px;resize:vertical}
.fr-repondre textarea:focus{outline:none;border-bottom-color:var(--ard-gold-text)}
.fr-plus{display:flex;justify-content:center;margin-top:36px}

@media (max-width:960px){
  .fr-avis{padding:56px 0 64px}
  .fr-avis-tete{grid-template-columns:1fr;gap:28px}
  .fr-cmts{columns:1}
}

/* ── Modales (§ 5.10) : gabarit .pm-* de modale_partage.css ──
   recette_detail.js les ouvre par .flex (Tailwind, chargé avant modale_partage.css, perd contre .pm-overlay{display:none}). */
.pm-overlay.flex{display:grid}
.pm.fr-pm-large{position:relative;width:min(100%,560px)}
.fr-pm-fermer{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ard-rule-strong);border-radius:50%;background:transparent;color:var(--ard-ink);cursor:pointer}
.fr-pm-fermer:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}
.fr-pm-fermer:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:2px}
/* Confirmation destructive : fond verrouillé volontairement (danger) - texte blanc forcé OK. */
.pm-btn.fr-pm-danger{background:#b91c1c;border-color:#b91c1c;color:#fff}
.pm-btn.fr-pm-danger:hover{filter:brightness(1.1)}
/* Partager */
.fr-partage-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0 0;padding:0;list-style:none}
.fr-partage-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:12px 4px;border:1px solid var(--ard-rule);border-radius:2px;background:transparent;color:var(--ard-ink);font:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.fr-partage-item:hover{border-color:var(--ard-gold-text)}
.fr-partage-item:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:2px}
.fr-partage-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff}
.fr-partage-ico svg{width:22px;height:22px;fill:currentColor}
/* Couleurs des marques : fonds verrouillés volontairement - icône blanche forcée OK. */
.fr-partage-ico--whatsapp{background:#25D366}
.fr-partage-ico--facebook{background:#1877F2}
.fr-partage-ico--instagram{background:linear-gradient(135deg,#405DE6,#833AB4,#C13584,#E1306C,#FD1D1D)}
.fr-partage-ico--x{background:#000}
.fr-partage-ico--neutre{background:var(--ard-bg-3);color:var(--ard-ink)}
.fr-partage-ico--neutre svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fr-partage-lien{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--ard-rule)}
.fr-partage-url{flex:1;min-width:0;font-size:13px;color:var(--ard-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Le matériel (les classes rd-ust-* sont aussi écrites par recette_detail.js) */
.fr-ust-recherche{position:relative;margin-top:22px}
.fr-ust-recherche>.fr-i{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ard-ink-3)}
.rd-ust-search-input{width:100%;padding:12px 28px;border:0;border-bottom:1px solid var(--ard-rule-strong);background:transparent;color:var(--ard-ink);font:inherit;font-size:16px}
.rd-ust-search-input:focus{outline:none;border-bottom-color:var(--ard-gold-text)}
.rd-ust-spinner{position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid var(--ard-rule);border-top-color:var(--ard-gold-text);border-radius:50%;animation:fr-tourne .8s linear infinite}
@keyframes fr-tourne{to{transform:rotate(360deg)}}
.rd-ust-dropdown{margin-top:6px;max-height:220px;overflow:auto;border:1px solid var(--ard-rule)}
.rd-ust-drop-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer}
.rd-ust-drop-item:hover{background:var(--hn-gold-08)}
.rd-ust-drop-av{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;overflow:hidden;background:var(--ard-bg-3);color:var(--ard-ink-3)}
.rd-ust-drop-av img{width:100%;height:100%;object-fit:cover}
.rd-ust-drop-empty{padding:10px 12px;font-size:13px;color:var(--ard-ink-3)}
.fr-ust-actuels{margin:22px 0 0;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text)}
.rd-ust-current-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rd-ust-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 14px;border:1px solid var(--ard-rule);border-radius:99px;font-size:14px}
.rd-ust-chip-remove{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ard-ink-3);cursor:pointer}
.rd-ust-chip-remove:hover{color:var(--ard-ink);background:var(--ard-bg-3)}
.rd-ust-chip-remove svg{width:12px;height:12px}
.rd-ust-empty{font-size:14px;font-style:italic;color:var(--ard-ink-3)}
@media (prefers-reduced-motion:reduce){.rd-ust-spinner{animation-duration:2.4s}}
@media (max-width:480px){.fr-partage-grille{grid-template-columns:repeat(2,1fr)}}

/* ── Accompagnements (§ 5.8) : grille de 3 (jusqu'à 6 cartes), lignes compactes en mobile ── */
.fr-acc{padding:40px 0 24px}
/* Six colonnes : 3 cartes par rangée, 2 à 2 et 4 cartes ; à 5, la 2e rangée est centrée. Aucune case vide. */
.fr-acc-grille{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;margin-top:28px}
.fr-acc-grille>*{grid-column:span 2}
.fr-acc-grille--n2>*,.fr-acc-grille--n4>*{grid-column:span 3}
.fr-acc-grille--n5>:nth-child(4){grid-column:2/span 2}
.fr-acc-carte{display:block;border:1px solid var(--ard-rule);background:var(--ard-bg-2);transition:border-color var(--ard-tr)}
.fr-acc-carte:hover{border-color:var(--ard-gold-text)}
.fr-acc-carte:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}
.fr-acc-carte img,.fr-acc-vide{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--ard-bg-3)}
.fr-acc-vide{display:grid;place-items:center;color:var(--ard-ink-3)}
.fr-acc-vide .fr-i{width:40px;height:40px;stroke-width:1.2}
.fr-acc-texte{padding:18px 20px 20px}
.fr-acc-texte h3{margin:0;font-family:var(--ard-serif);font-weight:500;font-size:20px;line-height:1.25}
.fr-acc-meta{margin:10px 0 0;font-size:13px;color:var(--ard-ink-3)}
.fr-acc-meta:empty{display:none}

@media (max-width:960px){
  .fr-acc-grille{grid-template-columns:1fr;gap:14px;margin-top:22px}
  .fr-acc-grille>.fr-acc-carte{grid-column:auto}
  .fr-acc-carte{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center}
  .fr-acc-carte img,.fr-acc-vide{height:100%;aspect-ratio:1}
  .fr-acc-texte{padding:14px 16px}
  .fr-acc-texte h3{font-size:17px}
}

/* ── Recettes composées : le bloc « Préparation de base » dans la colonne des ingrédients ── */
.fr-prepa{padding:30px 0 0;list-style:none}
.fr-prepa-tete{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--ard-rule)}
.fr-prepa-vign{grid-row:1/4;width:40px;height:40px;border-radius:4px;background:var(--ard-bg-3);border:1px solid var(--hn-gold-38);display:grid;place-items:center;color:var(--ard-gold-text)}
.fr-prepa-vign .fr-i{width:20px;height:20px}
.fr-prepa-k{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--ard-gold-text)}
.fr-prepa-titre{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-family:var(--ard-serif);font-size:19px;font-weight:500;line-height:1.2;color:var(--ard-ink);text-decoration:none;border-bottom:1px solid var(--ard-rule-strong)}
span.fr-prepa-titre{border-bottom:0}
a.fr-prepa-titre:hover{color:var(--ard-gold-text);border-bottom-color:currentColor}
.fr-prepa-titre .fr-i{width:15px;height:15px}
.fr-prepa-dose{margin-top:4px;font-size:13px;color:var(--ard-ink-2)}
.fr-prepa-dose b{font-family:var(--ard-serif);font-weight:400;font-size:15px;color:var(--ard-gold-text)}
.fr-prepa-liste{list-style:none;margin:0;padding:0 0 0 16px;border-left:1px solid var(--hn-gold-38);margin-left:20px}
.fr-prepa-liste .fr-ing:last-child{border-bottom:0}
.fr-prepa-liste[hidden]{display:none}
.fr-prepa-voir{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:6px 0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--ard-ink-2);cursor:pointer}
.fr-prepa-voir:hover{color:var(--ard-gold-text)}
.fr-prepa-voir .fr-i{width:14px;height:14px;transition:transform var(--ard-tr)}
.fr-prepa-voir[aria-expanded="true"] .fr-i{transform:rotate(180deg)}
.fr-prepa-voir:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}
/* Une base imbriquée (niveau 2) : une ligne-lien, jamais dépliée ici. */
.fr-ing--base .fr-vign{border-radius:4px;border-color:var(--hn-gold-38);display:grid;place-items:center;color:var(--ard-gold-text)}
.fr-ing--base .fr-vign .fr-i{width:17px;height:17px}
.fr-ing--base .fr-nom a{color:inherit;text-decoration:none;border-bottom:1px solid var(--ard-rule-strong)}
.fr-ing--base .fr-nom a:hover{color:var(--ard-gold-text);border-bottom-color:currentColor}
.fr-prepa + .fr-ing,.fr-prepa + .fr-liste-sec{margin-top:8px}

/* La carte de la base dans la Préparation */
.fr-prepa-carte{margin:30px 0 0;padding:22px 24px;border:1px solid var(--hn-gold-38);background:var(--hn-gold-08)}
.fr-prepa-carte-t{margin:6px 0 0;font-family:var(--ard-serif);font-size:24px;font-weight:500;line-height:1.15}
.fr-prepa-carte-m{margin:6px 0 0;font-size:14px;color:var(--ard-ink-2)}
.fr-prepa-carte-a{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:16px}
.fr-prepa-carte .fr-lien .fr-i{transition:transform var(--ard-tr)}
.fr-prepa-carte [aria-expanded="true"] .fr-i{transform:rotate(180deg)}
.fr-prepa-etapes{list-style:none;margin:18px 0 0;padding:0;counter-reset:pe}
.fr-prepa-etapes[hidden]{display:none}
.fr-prepa-etapes li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px;padding:14px 0;border-top:1px solid var(--ard-rule);font-size:16px;line-height:1.6}
.fr-prepa-etapes li::before{counter-increment:pe;content:counter(pe);display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ard-rule-strong);border-radius:50%;font-family:var(--ard-serif);font-style:italic;font-size:15px;color:var(--ard-gold-text)}

/* La bande de la base ouverte depuis sa parente (variante de .fr-bandeau) */
.fr-retour{display:inline-flex;align-items:center;gap:8px}
.fr-retour .fr-i{transform:rotate(180deg)}
/* Mention de la base dans une étape : lien bien visible, or + soulignement épais. */
.fr-txt-base{display:inline-flex;align-items:baseline;gap:3px;color:var(--ard-gold-text);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--hn-gold-38)}
.fr-txt-base:hover{text-decoration-color:currentColor}
.fr-txt-base .fr-i{width:14px;height:14px;align-self:center}
.fr-txt-base:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}
.fr-portions--fige .fr-portions-val{font-family:var(--ard-serif);font-size:18px}
/* Mobile : le texte prend la ligne (après l'icône), le bouton passe dessous ; sinon il se plie en colonne étroite. */
@media (max-width:480px){
  .fr-bandeau--pour .fr-bandeau-txt{flex:1 1 calc(100% - 40px)}
}