/* ══════════════════════════════════════════════════════════════════
   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)}
/* 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 du lot « boutons qui tranchent » : un contour seul sur le fond est un cadre, pas un bouton). --line et --fond prennent le kraft de .hn-btn--fond (--hn-btn-fond, night_kitchen.css), le texte à l'encre et le liseré or, qui tient le bord à 3:1 là où le kraft seul tombe dessous (--ard-bg-2 et --ard-bg-3 en clair). Le survol trace le bord à l'encre : le fond ne bouge pas. */
.fr-btn--line,.fr-btn--fond{background:var(--hn-btn-fond);border-color:var(--ard-gold-text);color:var(--ard-ink)}
.fr-btn--line:hover,.fr-btn--fond:hover{border-color:var(--ard-ink);color:var(--ard-ink)}
.fr-btn--carre{width:48px;padding:0}
.fr-btn--sm{min-height:40px;padding:0 16px;font-size:11.5px}
/* Une couleur, un sens (lot « boutons percutants », D1 et D3, décision de Freddy du 13/11 ; la même grammaire dans l'atelier Fais ma semaine) : le bleu pour « Partager » (il mène ailleurs), l'or pour « J'aime », le rouge pour « Je n'aime pas ». Au repos, une teinte douce de la couleur (--hn-teinte-*, night_kitchen.css), le liseré et l'icône à la couleur pleine, le texte à l'encre : le rouge en texte sur le kraft ne ferait que 1,8:1 en clair. Après .fr-btn--line, au même poids : l'ordre décide. */
.fr-btn--partage{background:var(--hn-teinte-bleu);border-color:var(--ard-bleu);color:var(--ard-bleu)}
.fr-btn--aime{background:var(--hn-teinte-or);border-color:var(--ard-gold-text);color:var(--ard-ink)}
.fr-btn--aime .fr-i{color:var(--ard-gold-text)}
.fr-btn--ecarter{background:var(--hn-teinte-rouge);border-color:var(--ga-err);color:var(--ard-ink)}
.fr-btn--ecarter .fr-i{color:var(--ga-err)}
/* Le survol de .fr-btn--line (le bord à l'encre) ne passe plus : les valeurs du repos, recopiées. Au doigt il resterait collé après l'appui, pendant un envoi il reviendrait sous la souris. */
.fr-btn--partage:hover{background:var(--hn-teinte-bleu);border-color:var(--ard-bleu);color:var(--ard-bleu)}
.fr-btn--aime:not([aria-pressed="true"]):hover{background:var(--hn-teinte-or);border-color:var(--ard-gold-text);color:var(--ard-ink)}
.fr-btn--ecarter:not([aria-pressed="true"]):hover{background:var(--hn-teinte-rouge);border-color:var(--ga-err);color:var(--ard-ink)}
/* Au pointeur fin, la teinte se renforce (D3). Plus de rouge plein au survol de « Je n'aime pas » (M1 du 05/11, remplacé le 13/11) : le plein est gardé pour l'état enfoncé, sinon le clic à la souris ne changerait plus rien de visible. Ni « J'aime » ni « Je n'aime pas » ne s'y renforcent pendant un envoi du duo : leur clic est alors ignoré (une écriture à la fois, décision de Freddy du 04/11), et un bouton qui ne répond pas n'invite pas au clic ; Fais ma semaine coupe de même ses capsules. */
@media (hover:hover) and (pointer:fine){
  .fr-btn--partage:hover{background:var(--hn-teinte-bleu-fort)}
  .fr-actions-moi:not(:has([aria-busy="true"])) .fr-btn--aime:not([aria-pressed="true"]):hover{background:var(--hn-teinte-or-fort)}
  .fr-actions-moi:not(:has([aria-busy="true"])) .fr-btn--ecarter:not([aria-pressed="true"]):hover{background:var(--hn-teinte-rouge-fort)}
}
/* « J'aime » enfoncé : l'or plein, son encre (D6, décision de Freddy du 10/11), le cœur rempli à la couleur du texte. Après les survols, au même poids : un état enfoncé n'a pas de survol. */
.fr-btn[aria-pressed="true"]{background:var(--ard-gold-text);border-color:var(--ard-gold-text);color:var(--hn-on-gold)}
.fr-btn[aria-pressed="true"] .fr-i{color:inherit;fill:currentColor}
/* « Je n'aime pas » enfoncé : le rouge plein et le texte du bouton destructif, pas l'or (décisions de Freddy du 05/11 et du 10/11, D6). Son pouce se remplit par la règle du cœur juste au-dessus : l'état ne tient pas à la seule couleur. Après la règle d'or : même poids, l'ordre décide. */
.fr-btn--ecarter[aria-pressed="true"]{background:var(--ga-err);border-color:var(--ga-err);color:var(--ga-on-err)}
/* Pendant un envoi, le bouton s'efface à moitié : l'« Annuler » d'un toast ne change l'état qu'à la réponse. Le bouton touché (data-vise, posé par son clic) montre déjà l'état visé et reste entier (D5 du lot « boutons percutants ») : l'attente est annoncée par aria-busy. L'atelier dit la même chose : les capsules coupées s'effacent, celle du refus reste pleine. */
.fr-btn[aria-busy="true"]{opacity:.55;cursor:progress}
.fr-btn[aria-busy="true"][data-vise]{opacity:1}
/* Le geste au clic (geste.css, geste.js) : ses calques passent sous le texte et l'icône, au-dessus du fond. Ses couleurs : le repos, l'icône au repos, le plein et son encre. */
.fr-btn--aime,.fr-btn--ecarter{position:relative;isolation:isolate}
.fr-btn--aime{--gst-repos:var(--hn-teinte-or);--gst-repos-icone:var(--ard-gold-text);--gst-plein:var(--ard-gold-text);--gst-plein-encre:var(--hn-on-gold)}
.fr-btn--ecarter{--gst-repos:var(--hn-teinte-rouge);--gst-repos-icone:var(--ga-err);--gst-plein:var(--ga-err);--gst-plein-encre:var(--ga-on-err)}
/* Le fond et l'encre changent d'un coup, seul le liseré passe en douceur : l'icône prend sa couleur tout de suite, et un fond plein qui partait en 220 ms la noyait (or sur or, rouge sur rouge) quand l'état change sans geste (« J'aime » relâché par « Je n'aime pas », un échec, un « Annuler »). Le passage à la teinte forte au survol se fait aussi d'un coup (relecture du 13/11). */
.fr-btn--aime,.fr-btn--ecarter{transition:border-color var(--ard-tr)}
/* Sans premium, le cadenas de « Mon menu » suit le texte de « Planifier ce repas », à sa couleur : l'or ne se lit pas sur le vert. */
.fr-btn .tp-cadenas{width:14px;height:14px;flex:none;margin-left:-4px}
/* Un lien d'action est souligné au repos, comme .nr-link de la création (D8 du lot « boutons qui tranchent », décision de Freddy du 10/11) : le soulignement dit « on peut cliquer » sans attendre le survol. Il suit le texte, pas l'icône. */
.fr-lien{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font-size:13px;font-weight:600;color:var(--ard-ink-2);cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fr-lien:hover{color:var(--ard-gold-text);text-decoration-thickness:2px}
.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}

/* ── 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}
/* 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-in{flex-wrap:wrap}
  .fr-bandeau-txt{flex:1 1 calc(100% - 40px)}
  .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}
/* Agir (Planifier, Partager), puis, sur sa propre ligne à toute largeur (M3), ce que tu penses du plat : « J'aime » et « Je n'aime pas » s'excluent (D15), ils voyagent ensemble. En planification (sans Planifier), Partager reste seul sur sa ligne : voulu. */
.fr-actions-moi{display:flex;flex-wrap:wrap;gap:12px;flex-basis:100%}
/* Sous le duo, « Je n'aime pas » enfoncé dit ce que le refus change (décision de Freddy du 05/11) : au rouge du bouton, en petit, sur sa propre ligne. --ga-err sur --ard-bg : 8,2:1 en sombre, 5,9:1 en clair. */
.fr-ppm-phrase{flex-basis:100%;margin:0;font-size:13px;line-height:1.4;color:var(--ga-err)}
.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}
  /* « J'aime » et « Je n'aime pas » se partagent la ligne du duo ; au plus étroit, « Je n'aime pas » passe dessous plutôt que de rogner son libellé. */
  .fr-actions-moi .fr-btn{flex:1 1 auto}
}

/* ── 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}
/* Nom long : la mention passe à la ligne. La pastille sort du flux et le texte garde son retrait,
   le rayon vaut la demi-hauteur d'une ligne : sur une ligne la puce reste une pastille. */
.fr-ust-p--attente{position:relative;flex-wrap:wrap;row-gap:0;min-height:38px;padding:6px 14px 6px 40px;border-style:dashed;border-color:var(--ard-rule-strong);border-radius:19px}
.fr-ust-p--attente img,.fr-ust-p--attente b{position:absolute;left:4px;top:50%;margin-top:-14px}
.fr-ust-att{font-size:13px;color:var(--ard-ink-3)}
.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}
/* L'ancre #etape-N du balisage Recipe : l'étape visée s'arrête sous la manchette fixe. */
.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;scroll-margin-top:var(--nav-h)}
.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)}
/* Le geste de lancement : le kraft, le liseré or et l'encre du bouton secondaire ; le survol
   trace le bord à l'encre (D21 du lot « boutons qui tranchent », décision de Freddy du 10/11).
   En cours, en pause et « Terminé » gardent les règles qui les entourent. */
.fr-etape .rd-nk-timers button.rd-cm-timer[data-rdt-start]{border-color:var(--ard-gold-text);background:var(--hn-btn-fond);color:var(--ard-ink)}
.fr-etape .rd-nk-timers button.rd-cm-timer[data-rdt-start]:hover{border-color:var(--ard-ink);background:var(--hn-btn-fond)}
/* « 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{position:relative;display:inline-flex;gap:6px}
.rd-cta-defs{position:absolute}
.rd-cta-or{stop-color:var(--ard-gold)}
.rd-cta-star{width:30px;height:30px;color:var(--ard-ink-3);cursor:pointer;transition:transform var(--ard-tr),color var(--ard-tr)}
/* Le survol passe par le JS (demi-pas) : un :hover remplirait l'étoile entière. */
.rd-cta-star.filled{color:var(--ard-gold);fill:var(--ard-gold)}
.rd-cta-star.half-filled{color:var(--ard-gold);fill:url(#rd-cta-demi)}
.rd-cta-star.active{transform:scale(1.12)}
/* Chaque groupe d'étoiles est un curseur au clavier (role slider) : l'anneau ne paraît qu'au clavier. */
#starWidgetCTA:focus-visible,#starWidget:focus-visible{outline:2px solid var(--ard-accent);outline-offset:4px;border-radius:2px}
.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 encadré, select à filet ; les utilitaires de CommentaireForm vivent dans un @layer Tailwind, toute règle de cette feuille les bat. */
.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 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}
.fr-avis-form select option{background:var(--ard-bg);color:var(--ard-ink)}
.fr-avis-form select:focus{border-bottom-color:var(--ard-gold-text);box-shadow:none}
.fr-avis-form select:focus-visible{outline:2px solid var(--ard-accent);outline-offset:2px}
/* Champs de texte encadrés, comme .cf-input, mais sur le fond de la page : la section est déjà en --ard-bg-2, un champ de ce fond ne se verrait pas. */
.fr-avis-form textarea,.fr-repondre textarea{border:1px solid var(--ard-rule-strong);border-radius:2px;background:var(--ard-bg);color:var(--ard-ink);caret-color:var(--ard-accent);font:inherit;resize:vertical;transition:border-color var(--ard-tr)}
.fr-avis-form textarea{width:100%;min-height:120px;padding:12px 14px;line-height:1.55;font-size:16px}
.fr-repondre textarea{flex:1;min-width:0;padding:8px 12px;line-height:1.5;font-size:14px}
.fr-avis-form textarea::placeholder,.fr-repondre textarea::placeholder{color:var(--ard-ink-3);opacity:1}
.fr-avis-form textarea:hover,.fr-repondre textarea:hover{border-color:var(--ard-ink-2)}
.fr-avis-form textarea:focus,.fr-repondre textarea:focus{outline:2px solid var(--ard-accent);outline-offset:2px;border-color:var(--ard-accent);box-shadow:none}
/* Les étoiles du formulaire (écrites par initInteractiveStars ; demi-notes au survol) */
#starWidget{display:flex;width:fit-content;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}
/* Étoile vide en contour --ard-ink-3, comme l'appel : --ard-ink-4 (filet) restait sous 1,5:1 dans les deux thèmes. */
.star-bg{position:absolute;width:100%;height:100%;color:var(--ard-ink-3)}
.star-item.filled .star-bg,.star-item.half-filled .star-bg{color:var(--ard-gold)}
.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}
/* Le « J'aime » d'un commentaire n'a pas de libellé, seulement son compteur : le soulignement de .fr-lien (D8) tomberait sur le nombre. Le cœur et le nombre suffisent à dire le geste. */
.fr-like{text-decoration:none}
.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-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, ouvertes par pmOuvrir (base.js) ── */
.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) : un rail d'une seule ligne (jusqu'à 6 cartes), flèches sur ordinateur ── */
.fr-acc{padding:40px 0 24px}
.fr-acc-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.fr-acc-nav{display:flex;gap:10px;flex:none;padding-bottom:4px}
.fr-acc-nav[hidden]{display:none}
.fr-acc-fl{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--ard-rule);border-radius:999px;background:none;color:var(--ard-ink-2);cursor:pointer;transition:border-color var(--ard-tr),color var(--ard-tr)}
.fr-acc-fl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fr-acc-fl:hover:not(:disabled){border-color:var(--ard-gold-text);color:var(--ard-gold-text)}
.fr-acc-fl:focus-visible{outline:2px solid var(--ard-gold-text);outline-offset:3px}
.fr-acc-fl:disabled{opacity:.35;cursor:default}
/* Le rail déborde de 6 px puis les reprend en padding : le contour de focus des cartes n'est pas rogné. */
.fr-acc-rail{display:flex;gap:28px;margin:22px -6px 0;padding:6px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:6px;overscroll-behavior-x:contain;scrollbar-width:none}
.fr-acc-rail::-webkit-scrollbar{display:none}
/* Trois cartes et le début de la quatrième, qui dit qu'il y a une suite. */
.fr-acc-rail>.fr-acc-carte{flex:0 0 calc((100% - 84px)/3.3);scroll-snap-align:start}
/* 2 ou 3 cartes : rien à faire défiler, elles se partagent la ligne. */
.fr-acc-rail--n2>.fr-acc-carte,.fr-acc-rail--n3>.fr-acc-carte{flex:1 1 0}
.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-nav{display:none}
  /* Le rail va d'un bord à l'autre de l'écran ; la carte suivante dépasse et dit qu'on peut glisser. */
  .fr-acc-rail{gap:14px;margin:18px calc(var(--ard-gut) * -1) 0;padding:6px var(--ard-gut);scroll-padding-inline:var(--ard-gut)}
  .fr-acc-rail>.fr-acc-carte,.fr-acc-rail--n2>.fr-acc-carte,.fr-acc-rail--n3>.fr-acc-carte{flex:0 0 min(72%,280px)}
  .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}