/* ══════════════════════════════════════════════════════════════════
   MODE CUISINE ET MINUTEURS (spec 2026-10-01-refonte-mode-cuisine) :
   l'écran du mode, ses minuteurs, et ce qui reste à l'écran mode fermé.
   Jetons --ard-* (night_kitchen.css). Chargé par la fiche recette et par
   le harness recettes/tests/harness/mode_cuisine.html.
   ══════════════════════════════════════════════════════════════════ */

/* Seuls jetons propres gardés : ceux des pastilles des cartes (règles de base
   ci-dessous ; la fiche les surcharge dans fiche_recette.css). */
:root,
[data-theme="dark"] {
  --rd-nk-timer-bg: rgba(245,158,11,0.07);
  --rd-nk-timer-brd:rgba(245,158,11,0.20);
  --rd-nk-timer-c:  #f59e0b;
}
[data-theme="light"] {
  --rd-nk-timer-bg: rgba(180,83,9,0.06);
  --rd-nk-timer-brd:rgba(180,83,9,0.20);
  --rd-nk-timer-c:  #92400e;
}

/* Hauteur de la nav du mode (.rd-cm-nav, plus bas) : padding haut et bas, bouton (.rd-cm-btn),
   filet de 1 px. Mode ouvert, la bande « Terminé » se pose dessus et le corps (.rd-cm-main) gagne
   sa hauteur en padding bas : sur :root et pas sur .rd-cm, car la bande est sa sœur dans le DOM.
   --rd-stop-h : 3 de filet + 2 x 14 de padding + 48 de bouton (.rd-timers-stop) ; 12 de padding
   sous 640 px. Retoucher la nav, le corps ou la bande = retoucher ces jetons. */
:root {
  --rd-cm-nav-pad: 16px;
  --rd-cm-btn-h: 52px;
  --rd-cm-nav-h: calc(2 * var(--rd-cm-nav-pad) + var(--rd-cm-btn-h) + 1px);
  --rd-cm-main-pb: 40px;
  --rd-stop-h: 79px;
}
@media (max-width: 640px) { :root { --rd-cm-nav-pad: 12px; --rd-cm-main-pb: 28px; --rd-stop-h: 75px; } }

/* ── Mode fermé : barre de progression 2 px et étiquette d'étape sous la manchette ── */
.rd-prog-bar {
  position: fixed; top: var(--nav-h-sticky, 0px); left: 0; right: 0; z-index: 500;
  height: 2px; background: var(--ard-rule); pointer-events: none;
}
.rd-prog-fill {
  height: 100%; width: 0%; background: var(--ard-accent);
  transition: width .5s cubic-bezier(.25,1,.5,1);
}
.rd-sticky-step {
  position: fixed; top: calc(var(--nav-h-sticky, 0px) + 12px); right: var(--ard-gut); z-index: 500;
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--ard-rule-strong); border-radius: 2px;
  background: var(--ard-bg); color: var(--ard-ink);
  font-family: var(--ard-sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.rd-sticky-step.visible { opacity: 1; }
.rd-sticky-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ard-accent); }
@media (max-width: 640px) { .rd-sticky-step { right: 16px; } }
@media (prefers-reduced-motion: reduce) {
  .rd-prog-fill, .rd-sticky-step { transition: none; }
}

/* Pastilles de minuteur dans la carte d'étape (spec § 3.3) : les règles de base des minuteurs,
   plus compactes. La couche positionnée date du chiffre fantôme de l'ancien habit ; gardée telle quelle. */
.rd-nk-timers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}
.rd-nk-timers:empty { display: none; }
.rd-nk-timers .rd-cm-timer { min-height: 32px; padding: 6px 12px; font-size: 13px; }
.rd-nk-timers .rd-cm-timer-ctl,
.rd-nk-timers .rd-cm-timer-stop { width: 28px; height: 28px; margin: -6px 0; }

/* ══════════════════════════════════════
   MODE CUISINE - l'écran (spec mode cuisine § 5.1 à 5.5)
══════════════════════════════════════ */
.rd-cm {
  position: fixed; inset: 0; z-index: 800;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  /* Sans colonne minmax(0, 1fr), la colonne implicite prend la largeur min-content de la
     tête : un titre long (nowrap) l'élargirait et pousserait la croix hors de l'écran. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--ard-bg); color: var(--ard-ink);
  font-family: var(--ard-sans);
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}
.rd-cm.open { opacity: 1; visibility: visible; }
/* Le Mode Cuisine ne rend pas ses frères inert (contrairement au mode magasin
   des courses) : sans cette règle, le bandeau resterait tabulable derrière
   l'overlay, invisible mais atteignable au clavier et au lecteur d'écran. */
body:has(.rd-cm.open) .ckb { display: none; }
.rd-cm button:focus-visible { outline: 2px solid var(--ard-gold-text); outline-offset: 3px; }

/* Tête : nom du mode, recette, minuteurs des autres étapes, fermer */
.rd-cm-top {
  display: flex; align-items: center; gap: 20px;
  padding: 18px var(--ard-gut); border-bottom: 1px solid var(--ard-rule);
}
.rd-cm-tete { flex: 1; min-width: 0; }
.rd-cm-title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--ard-gold-text);
}
.rd-cm-title svg { width: 15px; height: 15px; flex: none; }
.rd-cm-recette {
  margin: 4px 0 0; font-family: var(--ard-serif); font-size: 19px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-cm-recette em { color: var(--ard-gold-text); }
.rd-cm-close {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--ard-rule-strong); border-radius: 2px;
  background: none; color: var(--ard-ink); cursor: pointer;
  transition: border-color var(--ard-tr);
}
.rd-cm-close:hover { border-color: var(--ard-ink); }

/* Fil des étapes : un segment par étape, faites à l'encre, en cours en vert */
.rd-cm-dots { display: flex; gap: 6px; padding: 0 var(--ard-gut); }
.rd-cm-dot {
  flex: 1 1 0; min-width: 0; height: 28px;
  display: flex; align-items: center;
  padding: 0; border: 0; background: none; cursor: pointer; appearance: none;
}
.rd-cm-dot::before { content: ""; width: 100%; height: 2px; background: var(--ard-rule); }
.rd-cm-dot.done::before { background: var(--ard-ink-3); }
.rd-cm-dot.active::before { height: 3px; background: var(--ard-accent); }

/* Corps : défile seul. « safe center » retombe en haut quand l'étape déborde,
   sinon son début deviendrait inatteignable (test_etape_longue). */
.rd-cm-main {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 72px;
  align-content: start; align-content: safe center;
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 32px var(--ard-gut) var(--rd-cm-main-pb);
  min-height: 0; overflow: hidden auto; touch-action: pan-y;
}
.rd-cm-main:has(#rd-cm-ingr:empty) { grid-template-columns: minmax(0, 1fr); }
.rd-cm-col { min-width: 0; }
.rd-cm-step { display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px; }
.rd-cm-ghost {
  font-family: var(--ard-serif); font-weight: 300; font-size: 72px; line-height: .8;
  color: var(--ard-accent-text); font-variant-numeric: lining-nums tabular-nums;
  transition: opacity .25s ease;
}
.rd-cm-step-lbl {
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--ard-ink-3);
}
.rd-cm-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.rd-cm-img-wrap { margin: 0 0 24px; border-radius: 2px; overflow: hidden; }
.rd-cm-img-wrap.hidden { display: none; }
.rd-cm-img { display: block; width: 100%; max-height: 34vh; object-fit: cover; }
.rd-cm-txt {
  max-width: 30ch; margin: 0;
  font-family: var(--ard-serif); font-weight: 400;
  font-size: clamp(25px, 1rem + 1.9vw, 42px); line-height: 1.32; letter-spacing: -.005em;
  text-wrap: pretty; overflow-wrap: anywhere; color: var(--ard-ink);
  transition: opacity .25s ease, transform .25s ease;
}
.rd-cm-txt.fading { opacity: 0; transform: translateY(8px); }

/* ═══ Recettes composées - la base dans le parcours (maquette écrans A à D) ═══ */
.rd-cm-txt .fr-txt-base {
  display: inline; color: var(--ard-gold-text);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  text-decoration-color: var(--hn-gold-38);
}
.rd-cm-base {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  max-width: 620px; margin-top: 34px; padding: 18px 20px;
  border: 1px solid var(--hn-gold-38); background: var(--hn-gold-08);
}
.rd-cm-base-txt { flex: 1; min-width: 200px; }
.rd-cm-base-k {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ard-gold-text);
}
.rd-cm-base-t { margin: 4px 0 0; font-family: var(--ard-serif); font-size: 22px; line-height: 1.2; }
.rd-cm-base-m { margin: 4px 0 0; font-size: 13.5px; color: var(--ard-ink-2); }
.rd-cm-base.faite { background: transparent; border-style: dashed; }
.rd-cm-base.faite .rd-cm-base-m { color: var(--ard-accent-text); font-weight: 600; }
/* On cuisine les mains occupées : 44 px de haut pour les gestes de la base. */
.rd-cm-base .fr-btn,
.rd-cm-sous .fr-btn { min-height: 44px; }
/* « Revoir ses étapes » garde son aspect de lien : la zone de tap déborde dans une marge
   négative, et le soulignement passe du bord de la zone au texte, sinon il s'en écarterait.
   La zone déborde aussi de 13 px sur les côtés : le cadre de focus, rentré de 10 px, retombe
   alors à 3 px du texte tout autour, comme sur les autres liens. */
.rd-cm-base .fr-lien { min-height: 44px; padding: 0 13px; margin: -13px; }
.rd-cm-base .fr-lien:focus-visible { outline-offset: -10px; }
.rd-cm-base .fr-lien:hover {
  border-bottom-color: transparent;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* Dans une base : la bande de rappel prend une rangée de la grille, sous la tête. */
.rd-cm--base { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.rd-cm-sous {
  display: flex; align-items: center; gap: 16px;
  padding: 10px var(--ard-gut); background: var(--ard-bg-2); border-bottom: 1px solid var(--ard-gold);
}
.rd-cm-sous[hidden] { display: none; }
.rd-cm-sous-txt { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; color: var(--ard-ink-2); }
.rd-cm-sous-txt b {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ard-gold-text);
}
.rd-cm-sous .fr-btn .fr-i { transform: rotate(180deg); }
.rd-cm-btn.retour svg { transform: rotate(180deg); }
@media (max-width: 640px) {
  .rd-cm-sous { padding: 8px 16px; }
  /* Le libellé reste lu par les lecteurs d'écran : seule la flèche se voit. */
  .rd-cm-sous .fr-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rd-cm-sous .fr-btn { width: 44px; padding: 0; }
}

/* ═══ Mode Cuisine - minuteurs (spec § 3.3, § 5.2, § 5.3) ═══ */
.rd-cm-timers { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.rd-cm-timers:empty { display: none; }

.rd-cm-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--rd-nk-timer-brd);
  border-radius: 999px;
  background: var(--rd-nk-timer-bg);
  color: var(--rd-nk-timer-c);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  appearance: none;
  cursor: pointer;
}
.rd-cm-timer.running,
.rd-cm-timer.paused { padding-right: 6px; cursor: default; }
/* Au repos, le glyphe « démarrer » occupe la case de la pause (spec § 3.8). Règle seule, exprès :
   un navigateur sans :has() l'ignore sans invalider les voisines. */
.rd-cm-timer:has(> .rd-cm-timer-ctl) { padding-right: 6px; }
.rd-cm-timer.paused { border-style: dashed; }
.rd-cm-timer-txt { font-variant-numeric: tabular-nums; }

/* cible ≥ 32 px ; les marges négatives absorbent tout le padding vertical, sinon la pastille
   « en cours » monterait à 42 px quand les autres en font 40.
   .rd-cm-timer-ctl : span décoratif au repos (un bouton dans un bouton est interdit), bouton pause / reprise ensuite. */
.rd-cm-timer-ctl,
.rd-cm-timer-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: -8px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  appearance: none;
  cursor: pointer;
}
button.rd-cm-timer-ctl:hover,
button.rd-cm-timer-ctl:focus-visible,
.rd-cm-timer-stop:hover,
.rd-cm-timer-stop:focus-visible { background: var(--bg-element); }

/* minuteurs des autres étapes, dans la tête (:empty : vides, ils ne prennent pas de place) */
.rd-cm-timers-others {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0;
}
.rd-cm-timers-others:empty { display: none; }

/* Puce d'un minuteur : dans la tête du mode et dans la pile mode fermé (texte seul, chipTexte) */
.rd-cm-timer-chip {
  display: inline-flex; align-items: center; flex: none;
  min-height: 36px; padding: 0 12px;
  border: 1px solid var(--ard-rule-strong); border-radius: 2px;
  background: var(--ard-bg); color: var(--ard-ink-2);
  font-family: var(--ard-sans); font-size: 12px; font-weight: 600; letter-spacing: .4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  appearance: none; cursor: pointer;
}
.rd-cm-timer-chip:hover { border-color: var(--ard-ink); }

/* ── Minuteurs dans le mode (spec § 5.4). Préfixés .rd-cm : les pastilles des cartes
      gardent les règles de base ci-dessus. Libellés d'état en CSS, le nom accessible
      reste l'aria-label posé par le module. ── */
.rd-cm .rd-cm-timer {
  gap: 12px; min-height: 56px; padding: 0 20px;
  border: 1px solid var(--ard-rule-strong); border-radius: 2px;
  background: none; color: var(--ard-ink);
  font-family: var(--ard-sans); font-size: 12px; font-weight: 700;
}
.rd-cm button.rd-cm-timer[data-rdt-start]:hover { border-color: var(--ard-ink); }
.rd-cm .rd-cm-timer[data-rdt-start] .rd-cm-timer-txt {
  font-family: var(--ard-serif); font-size: 22px; font-weight: 400; line-height: 1;
}
.rd-cm .rd-cm-timer[data-rdt-start] .rd-cm-timer-ctl { display: none; }
.rd-cm .rd-cm-timer[data-rdt-start] > svg { width: 18px; height: 18px; stroke-width: 1.6; }
.rd-cm .rd-cm-timer[data-rdt-start]::after {
  content: "Lancer"; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ard-accent-text);
}
/* Cadran : en cours, en pause, terminé */
.rd-cm .rd-cm-timer.running,
.rd-cm .rd-cm-timer.paused,
.rd-cm .rd-cm-timer.done { gap: 18px; padding: 12px 12px 12px 20px; }
.rd-cm .rd-cm-timer.running { border-color: var(--ard-accent); }
.rd-cm .rd-cm-timer.done {
  padding-right: 24px; border-color: var(--ard-accent); background: var(--ard-bg-2);
  cursor: pointer;
}
.rd-cm .rd-cm-timer.running > svg,
.rd-cm .rd-cm-timer.paused > svg,
.rd-cm .rd-cm-timer.done > svg { display: none; }
.rd-cm .rd-cm-timer.running .rd-cm-timer-txt,
.rd-cm .rd-cm-timer.paused .rd-cm-timer-txt,
.rd-cm .rd-cm-timer.done .rd-cm-timer-txt {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--ard-serif); font-size: 44px; font-weight: 400; line-height: 1;
}
.rd-cm .rd-cm-timer.paused .rd-cm-timer-txt { color: var(--ard-ink-3); }
.rd-cm .rd-cm-timer.done .rd-cm-timer-txt { color: var(--ard-accent-text); }
.rd-cm .rd-cm-timer .rd-cm-timer-txt::before {
  font-family: var(--ard-sans); font-size: 10.5px; font-weight: 700; line-height: 1.2;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ard-ink-3);
}
.rd-cm .rd-cm-timer.running .rd-cm-timer-txt::before { content: "En cours"; color: var(--ard-accent-text); }
.rd-cm .rd-cm-timer.paused .rd-cm-timer-txt::before { content: "En pause"; }
/* Deux blancs après \0000B7 : l'échappement avale toujours le premier. */
.rd-cm .rd-cm-timer.done .rd-cm-timer-txt::before {
  content: "Minuteur \0000B7  tape pour arr\0000EAter"; color: var(--ard-accent-text);
}
.rd-cm .rd-cm-timer-ctl,
.rd-cm .rd-cm-timer-stop {
  width: 44px; height: 44px; margin: 0;
  border: 1px solid var(--ard-rule); border-radius: 2px;
}
/* Le module dessine ces icônes à 14 px ; le cadran les veut à 18 px, trait fin. */
.rd-cm .rd-cm-timer-ctl svg,
.rd-cm .rd-cm-timer-stop svg { width: 18px; height: 18px; stroke-width: 1.6; }
.rd-cm button.rd-cm-timer-ctl:hover,
.rd-cm button.rd-cm-timer-ctl:focus-visible,
.rd-cm .rd-cm-timer-stop:hover,
.rd-cm .rd-cm-timer-stop:focus-visible { background: none; border-color: var(--ard-ink); }
@media (max-width: 640px) {
  .rd-cm .rd-cm-timers { margin-top: 26px; }
  .rd-cm .rd-cm-timer.running .rd-cm-timer-txt,
  .rd-cm .rd-cm-timer.paused .rd-cm-timer-txt,
  .rd-cm .rd-cm-timer.done .rd-cm-timer-txt { font-size: 36px; }
}

/* Pile des minuteurs, mode fermé (spec § 5.6) : en bas à gauche, une puce par minuteur.
   Au-dessus du toast (24 du toast + 68 de sa hauteur + 12 d'air ; 148 sous 768 px, où la nav
   mobile remonte le toast), donc déjà au-dessus de la bande « Terminé » (~80 px) : pas de :has. */
.rd-timers-bar {
  position: fixed; left: var(--ard-gut); bottom: 104px; z-index: 600;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.rd-timers-bar[hidden] { display: none; }
.rd-timers-bar .rd-cm-timer-chip { min-height: 42px; }
.rd-timers-bar .rd-cm-timer-chip:focus-visible { outline: 2px solid var(--ard-gold-text); outline-offset: 3px; }

/* Bande « Terminé » (spec § 2 et § 5.6) : encre pleine inversée, lisible dans les deux thèmes.
   Elle bat lentement jusqu'au STOP : après un rechargement le bip est muet et iOS ne vibre pas
   (recette_cuisine_mode.js), l'alarme n'est alors que visuelle. Au-dessus du mode (800) et de
   la nav mobile, sous le toast (9999). Mode fermé, elle couvre la nav mobile du site le temps de
   l'alarme : voulu, la cible prime (mains mouillées). Mode ouvert, elle se pose au-dessus de la
   nav du mode (--rd-cm-nav-h) : « Étape suivante » reste à portée pendant l'alarme. */
.rd-timers-stop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 14px var(--ard-gut) calc(14px + env(safe-area-inset-bottom, 0px));
  border: 0; border-top: 3px solid var(--ard-accent); border-radius: 0;
  background: var(--ard-ink); color: var(--ard-bg);
  font: inherit; font-family: var(--ard-sans); text-align: left;
  cursor: pointer; appearance: none;
  animation: rd-stop-pulse 1.6s ease-in-out infinite;
}
.rd-timers-stop[hidden] { display: none; }
/* L'or ne contraste pas sur l'encre : le focus prend la couleur du papier, à l'intérieur. */
.rd-timers-stop:focus-visible { outline: 2px solid var(--ard-bg); outline-offset: -6px; }
.rd-timers-stop-lbl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-timers-stop-lbl b { font-family: var(--ard-serif); font-size: 20px; font-weight: 500; line-height: 1.2; }
.rd-timers-stop-lbl span { font-size: 12px; letter-spacing: .4px; opacity: .75; }
.rd-timers-stop-btn {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  min-height: 48px; padding: 0 22px;
  border: 1px solid currentColor; border-radius: 2px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
@keyframes rd-stop-pulse { 50% { background-color: color-mix(in srgb, var(--ard-ink) 82%, var(--ard-bg)); } }
@media (max-width: 640px) {
  .rd-timers-stop { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .rd-timers-stop-lbl b { font-size: 17px; }
}
body:has(.rd-cm.open) .rd-timers-stop {
  bottom: calc(var(--rd-cm-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: 14px;
}
/* La bande couvre alors le bas du corps : le corps gagne sa hauteur en padding, pour que la fin
   d'une étape longue défile au-dessus. */
body:has(.rd-cm.open):has(.rd-timers-stop:not([hidden])) .rd-cm-main {
  padding-bottom: calc(var(--rd-cm-main-pb) + var(--rd-stop-h));
}
@media (max-width: 640px) {
  body:has(.rd-cm.open) .rd-timers-stop { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-timers-stop { animation: none; }
}

/* région live : lue par le lecteur d'écran, jamais affichée (.sr-only n'existe que dans le dist Tailwind) */
.rd-cm-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* 68 du toast remonté par la nav mobile + 68 de sa hauteur (deux lignes) + 12 d'air. */
  .rd-timers-bar { left: 16px; bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
}

/* « Dans cette étape » : la liste du marché, en menu imprimé */
.rd-cm-marche {
  align-self: start; min-width: 0; margin-top: 84px;
  padding-left: 32px; border-left: 1px solid var(--ard-rule);
}
.rd-cm-marche:has(#rd-cm-ingr:empty) { display: none; }
.rd-cm-kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--ard-gold-text);
}
.rd-cm-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.rd-cm-ing-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--ard-rule);
}
.rd-cm-ing-chip:last-child { border-bottom: 0; }
.rd-cm-ing-av {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--ard-bg-3); color: var(--ard-ink-2);
}
.rd-cm-ing-av img { width: 100%; height: 100%; object-fit: cover; }
.rd-cm-ing-name { min-width: 0; font-size: 15.5px; font-weight: 500; overflow-wrap: anywhere; }
.rd-cm-ing-qty {
  margin-left: auto; padding-left: 12px;
  font-family: var(--ard-serif); font-size: 17px; color: var(--ard-gold-text); white-space: nowrap;
}
.rd-cm-ing-qty--gout {
  font-family: var(--ard-sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--ard-ink-3);
}

/* Pied : précédente à filet, suivante pleine. Sa hauteur est --rd-cm-nav-h (la bande s'y pose). */
.rd-cm-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: var(--rd-cm-nav-pad) var(--ard-gut) calc(var(--rd-cm-nav-pad) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ard-rule);
}
.rd-cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--rd-cm-btn-h); padding: 0 24px;
  border: 1px solid transparent; border-radius: 2px; background: none;
  font-family: var(--ard-sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  transition: background-color var(--ard-tr), color var(--ard-tr), border-color var(--ard-tr);
}
.rd-cm-btn.prev { border-color: var(--ard-rule-strong); color: var(--ard-ink); }
.rd-cm-btn.prev:hover { border-color: var(--ard-ink); }
.rd-cm-btn.prev:disabled { opacity: .35; cursor: default; }
.rd-cm-btn.next,
.rd-cm-btn.finish {
  min-width: 240px;
  border-color: var(--ard-accent); background: var(--ard-accent); color: var(--ard-on-accent);
}
.rd-cm-btn.next:hover,
.rd-cm-btn.finish:hover { background: color-mix(in srgb, var(--ard-accent) 88%, var(--ard-ink)); }

@media (max-width: 1023px) {
  .rd-cm-main { grid-template-columns: minmax(0, 1fr); }
  .rd-cm-marche {
    margin-top: 34px; padding: 22px 0 0;
    border-left: 0; border-top: 1px solid var(--ard-rule);
  }
}
@media (max-width: 640px) {
  .rd-cm-top { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .rd-cm-recette { font-size: 16px; }
  /* Les puces des autres étapes passent sur une rangée à elles, sous le titre. */
  .rd-cm-timers-others {
    order: 3; flex-basis: calc(100% + 12px); justify-content: flex-start;
    flex-wrap: nowrap; overflow-x: auto;
    /* Le défilement rogne à la boîte de padding : 6 px d'air pour le contour de focus (2 + 3), repris par la marge. */
    padding: 6px; margin: -6px;
  }
  .rd-cm-dots { padding: 0 16px; }
  .rd-cm-main { padding: 22px 16px var(--rd-cm-main-pb); }
  .rd-cm-ghost { font-size: 56px; }
  .rd-cm-txt { font-size: 24px; line-height: 1.36; }
  .rd-cm-nav { padding: var(--rd-cm-nav-pad) 16px calc(var(--rd-cm-nav-pad) + env(safe-area-inset-bottom, 0px)); }
  .rd-cm-btn.prev { width: 52px; min-width: 52px; padding: 0; }
  .rd-cm-btn.prev .rd-cm-btn-lbl {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .rd-cm-btn.next,
  .rd-cm-btn.finish { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-cm, .rd-cm-txt, .rd-cm-ghost { transition: none; }
}