/* =====================================================================
   interactions.css — habillage des formats d'interaction premium.
   Compagnon de public/interactions.js. Applique le langage visuel de
   gaming.charte-interactions-premium-15082026.

   TROIS RÈGLES QUE CETTE FEUILLE TIENT PAR CONSTRUCTION, et qu'il faut
   relire avant d'y ajouter quoi que ce soit :

   1. AUCUN SCROLL INTERNE. On ne trouvera dans ce fichier NI overflow,
      NI max-height, NI height sur un conteneur d'interaction. C'est un
      invariant de la décision fondatrice du 15/08 : le gabarit grandit
      naturellement, seule la PAGE défile. Un test monte la garde.
   2. JAMAIS D'INFORMATION PAR LA SEULE COULEUR. Chaque état coloré est
      doublé d'un mot (posé par le JS) ET d'un signe graphique — épaisseur
      de contour, trait latéral. Retirer la couleur ne retire aucune
      information.
   3. CIBLES TACTILES 44×44 px MINIMUM, sans exception, y compris les
      petites flèches de réordonnancement.
   ===================================================================== */

/* Les couleurs viennent des variables du lecteur. Les valeurs après la
   virgule ne sont qu'un repli : cette feuille doit rester lisible si on
   la charge sur une page qui n'a pas encore posé la palette. */
.mr-interaction{
  --mr-encre: var(--encre, #241c2b);
  --mr-encre-douce: var(--encre-soft, #5a5064);
  --mr-creme: var(--creme, #f3ead9);
  --mr-creme-sombre: var(--creme-dark, #e8dcc4);
  /* #EAB939 est la charte. Le repli valait #d9ad5c : sur toute page qui ne
     définit pas --or, TOUS les ors de la mécanique dérivaient donc, sans que
     personne n'ait écrit cette couleur nulle part. C'est cette ligne-là qui
     produisait le rgb(217,173,92) relevé sur l'étiquette d'activité, à côté
     d'un bouton resté juste parce qu'il portait la valeur en dur. */
  --mr-or: var(--or, #EAB939);
  /* Le même or, en voile : nécessaire parce qu'on ne peut pas passer une
     variable de couleur à rgba(). Sert aux halos, jamais à porter du sens. */
  --mr-or-voile: rgba(234, 185, 57, .38);
  --mr-violet: var(--violet, #5F2F8A);
  --mr-rouge-sombre: var(--rouge-dark, #8B1428);
  /* Vert de confirmation. Choisi sombre pour tenir AA sur le crème :
     mesuré 5,2:1 sur #f3ead9. Il ne porte JAMAIS l'information seul. */
  --mr-vert: #2f6b43;

  margin-top: 22px;
  padding-top: 20px;
  border-top: 2px dashed var(--mr-creme-sombre);
}

.mr-groupe{ display: flex; flex-direction: column; gap: 14px; }

.mr-consigne{
  margin: 0; font-weight: 700; line-height: 1.5; color: var(--mr-encre);
}
.mr-scene{
  margin: 0; line-height: 1.65; color: var(--mr-encre);
  padding-left: 14px; border-left: 4px solid var(--mr-or);
}

/* ── Boutons ────────────────────────────────────────────────────────── */
.mr-bouton{
  /* 44 px de haut ET de large : la charte l'exige, et une flèche
     « ▲ Monter » ne fait pas exception. */
  min-height: 44px; min-width: 44px;
  padding: 10px 16px;
  font: inherit; font-size: 0.95rem; line-height: 1.3;
  color: var(--mr-encre);
  background: var(--mr-creme);
  border: 2px solid var(--mr-encre);
  border-radius: 10px;
  cursor: pointer;
  transition: background 320ms ease, border-color 320ms ease, transform 320ms ease;
}
.mr-bouton:hover:not(:disabled){ background: var(--mr-creme-sombre); }

/* ── LE BOUTON RÉPOND AU DOIGT ────────────────────────────────────────── */
/* Demande de Cédric du 23/08, sur P1-03, mot pour mot : « Tout est ok sauf
   que je souhaite une "légére" animations sur les boutons, ca rendrait plus
   immersif ». LÉGÈRE EST LE MOT, et il l'a mis entre guillemets lui-même :
   on ne fait rien rebondir, on donne du RELIEF et de la RÉPONSE.
   CE QUI MANQUAIT N'ÉTAIT PAS LA TRANSITION — elle était déjà déclarée sur
   .mr-bouton, transform compris. Simplement, AUCUNE RÈGLE NE POSAIT JAMAIS
   DE TRANSFORM : la transition était là, inerte, depuis le début. */
.mr-bouton:hover:not(:disabled){ transform: translateY(-1px); }
.mr-bouton:active:not(:disabled){
  transform: translateY(1px) scale(.985);
  /* L'enfoncement doit suivre le doigt, pas le rattraper : 320 ms au relâché
     donne du moelleux, 320 ms à l'appui donnerait de la mollesse. */
  transition-duration: 90ms;
}
.mr-bouton:disabled{ opacity: .45; cursor: default; }
/* Focus TOUJOURS visible, et sur un anneau qui contraste avec les deux
   fonds possibles. Un focus discret est un focus absent. */
.mr-bouton:focus-visible{
  outline: 3px solid var(--mr-violet); outline-offset: 3px;
}

/* L'état « choisi » : contour ÉPAISSI et trait de soulignement, pas
   seulement une couleur de fond. */
.mr-bouton.mr-choisi{
  background: var(--mr-encre); color: var(--mr-creme);
  border-color: var(--mr-encre);
  box-shadow: inset 0 -4px 0 var(--mr-or);
  /* La pose se voit : une onde d'or brève, puis plus rien. Elle N'AJOUTE
     AUCUN SIGNE — les trois signes de la sélection (bordure, badge, trait)
     restent seuls porteurs de l'information, comme la charte l'exige. Une
     animation qui porterait du sens serait invisible en mouvement réduit. */
  animation: mr-choix-pose 520ms ease-out;
}
@keyframes mr-choix-pose{
  from{ box-shadow: inset 0 -4px 0 var(--mr-or), 0 0 0 0 var(--mr-or-voile); }
  to  { box-shadow: inset 0 -4px 0 var(--mr-or), 0 0 0 12px rgba(234,185,57,0); }
}
.mr-principal{
  align-self: flex-start;
  font-weight: 700;
  background: var(--mr-violet); color: var(--creme, #f3ead9);
  border-color: var(--mr-violet);
}
.mr-principal:hover:not(:disabled){ background: var(--mr-encre); border-color: var(--mr-encre); }
.mr-rejouer{ margin-top: 12px; }

/* ── À classer ──────────────────────────────────────────────────────── */
.mr-items{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mr-item{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: rgba(0,0,0,.03);
  border: 1px solid var(--mr-creme-sombre);
}
.mr-item-libelle{ font-weight: 700; flex: 1 1 190px; }
.mr-choix{ display: flex; flex-wrap: wrap; gap: 8px; }
/* L'état est ÉCRIT ici, en toutes lettres — c'est ce texte qui rend
   l'information disponible sans la couleur et au lecteur d'écran. */
.mr-place-dite{
  flex: 1 1 100%; font-size: .86rem; color: var(--mr-encre-douce); font-style: italic;
}
.mr-bacs{ display: flex; flex-wrap: wrap; gap: 12px; }
.mr-bac{
  flex: 1 1 160px; min-height: 76px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--mr-encre-douce); border-radius: 12px;
  padding: 12px; text-align: center;
}
.mr-bac-titre{ font-weight: 700; }
.mr-bac.mr-survol{ border-color: var(--mr-violet); border-style: solid; background: rgba(63,33,89,.06); }

/* ── À classer, retour contingent (P1-03 scène 1) ─────────────────────
   Une seule paire d'éléments par légume/catégorie : le bouton de
   catégorie EST la cible de dépôt (voir .mr-cc-survol), il n'y a pas de
   seconde rangée de bacs à côté — c'est précisément le doublon mesuré
   le 31/08 sur 'classer' que ce format évite par construction. */
.mr-cc-items, .mr-cc-categories{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.mr-cc-categorie{ flex: 1 1 160px; min-height: 64px; }
.mr-cc-categorie.mr-cc-survol{ border-style: solid; }
.mr-cc-feedbacks{ display: flex; flex-direction: column; gap: 10px; margin: 0 0 6px; }
.mr-cc-raisons{ margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.mr-cc-raisons-titre{ font-weight: 700; margin: 0; }
.mr-cc-raison-question{ font-weight: 700; margin: 0 0 8px; }
.mr-cc-raison-explication{ font-size: .9rem; }
.mr-cc-proposition-badge{
  display: inline-block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; margin: 0 0 6px;
}
.mr-cc-cloture{ margin-top: 18px; }

/* ── À remettre dans l'ordre ────────────────────────────────────────── */
.mr-etapes{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mr-etape{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: rgba(0,0,0,.03); border: 1px solid var(--mr-creme-sombre);
}
.mr-rang{
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--mr-creme); background: var(--mr-encre);
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.mr-etape-libelle{ flex: 1 1 190px; }
.mr-commandes{ display: flex; gap: 8px; }
.mr-fleche{ padding: 10px 12px; font-size: .86rem; }

/* ── Observation et mise en situation ───────────────────────────────── */
.mr-options{ display: flex; flex-direction: column; gap: 10px; }
.mr-option{ text-align: left; }
.mr-figure{ margin: 0; }
/* L'image s'adapte, elle ne déborde jamais et n'impose aucune hauteur :
   pas de recadrage, donc pas de zone de l'image rendue inatteignable. */
.mr-image{ display: block; width: 100%; height: auto; border-radius: 12px; }

/* ── Le retour pédagogique ──────────────────────────────────────────── */
.mr-retour:empty{ display: none; }
.mr-retour{
  padding: 14px 16px; border-radius: 12px;
  background: rgba(0,0,0,.04);
  /* Le trait latéral est le SIGNE qui double la couleur. */
  border-left: 6px solid var(--mr-encre-douce);
  line-height: 1.6;
}
.mr-retour.mr-juste{ border-left-color: var(--mr-vert); }
.mr-retour.mr-a-revoir{ border-left-color: var(--mr-or); }
.mr-retour-tete{ margin: 0 0 8px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.mr-retour-corps{ margin: 8px 0 0; }
.mr-retour-liste{ margin: 8px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mr-retour-liste li{ padding-left: 0; }
.mr-signe{ font-weight: 700; }
.mr-ligne-juste .mr-signe{ color: var(--mr-vert); }
.mr-ligne-a-revoir .mr-signe{ color: var(--mr-rouge-sombre); }

/* ── Le marquage « en attente de relecture par Charlotte » ──────────── */
/* Décision de Cédric du 21/08 : ces mécaniques sont construites avant sa
   relecture. Le marquage doit être VU, sans crier — il informe, il
   n'alarme pas. Il disparaît le jour où elle a relu, pas avant. */
.mr-attente{
  margin: 16px 0 0; padding: 10px 14px;
  font-size: .84rem; line-height: 1.5; color: var(--mr-encre-douce);
  background: rgba(217,173,92,.14);
  border: 1px dashed var(--mr-or); border-radius: 10px;
  display: flex; align-items: baseline; gap: 8px;
}
.mr-attente .mr-signe{ color: var(--mr-rouge-sombre); }

/* ── Téléphone ──────────────────────────────────────────────────────── */
/* Même structure qu'à l'écran large, comme la charte le demande : on
   n'enlève rien, on empile. Aucune règle ici ne cache un élément. */
@media (max-width: 620px){
  .mr-item, .mr-etape{ flex-direction: column; align-items: stretch; }
  .mr-choix, .mr-commandes{ flex-direction: column; }
  .mr-bouton{ width: 100%; }
  .mr-principal{ align-self: stretch; }
  .mr-bac{ flex: 1 1 100%; }
}

/* ── Mouvement réduit ───────────────────────────────────────────────── */
/* Remplacement immédiat, aucun glissement — la règle du corpus. On ne
   supprime pas le retour visuel, on supprime le MOUVEMENT. */
@media (prefers-reduced-motion: reduce){
  .mr-bouton{ transition: none; }
  .mr-interaction *{ animation: none !important; }
  /* « transition: none » n'ôte que le FONDU : sans cette règle, le bouton
     se déplacerait quand même, d'un coup, ce qui est pire que l'animation.
     On retire donc le déplacement lui-même — et le halo, qui n'est que du
     décor. Le trait d'or de la sélection, lui, reste : il porte du sens. */
  .mr-bouton:hover:not(:disabled),
  .mr-bouton:active:not(:disabled){ transform: none; }
  .mr-interaction .mr-bouton:hover:not(:disabled){ box-shadow: none; }
}

/* ── La plaque graduée (illustration de mise en situation) ───────────── */
/* Elle SITUE, elle ne juge pas : aucun cran n'est déclaré bon, parce que
   le texte validé ne donne aucune correspondance position ↔ température.
   Elle n'est pas cliquable — la sélection passe par les réactions. */
.mr-plaque{ margin: 0; }
.mr-plaque-echelle{
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 10px; border-radius: 12px;
  background: rgba(0,0,0,.05); border: 1px solid var(--mr-creme-sombre);
}
.mr-cran{
  flex: 1 1 auto; min-width: 30px;
  padding: 8px 4px; text-align: center;
  font-size: .82rem; font-variant-numeric: tabular-nums;
  color: var(--mr-encre-douce);
  border-radius: 7px; background: var(--mr-creme);
  border: 1px solid var(--mr-creme-sombre);
}
/* Le cran repéré porte un contour ÉPAIS et une graisse forte : il reste
   identifiable en niveaux de gris. */
.mr-cran-marque{
  color: var(--mr-creme); background: var(--mr-rouge-sombre);
  border: 2px solid var(--mr-encre); font-weight: 700;
}
.mr-plaque-legende{
  margin: 8px 0 0; font-size: .84rem; font-style: italic; color: var(--mr-encre-douce);
}

/* ── Composite à plusieurs temps (pédagogie en deux temps) ───────────── */
/* Aucune hauteur, aucun overflow : le composite grandit avec sa scène,
   comme tout le reste de cette feuille. */
.mr-scenes{ }
.mr-scene-compte{
  margin:0 0 10px; font-size:.78rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--mr-encre-douce);
}
.mr-scene-corps{ }
/* La sous-scène n'a pas besoin d'un second filet : celui du composite
   suffit, sinon on empile deux séparateurs pour rien. */
.mr-scene-corps > .mr-interaction{ margin-top:0; padding-top:0; border-top:none; }
.mr-scene-suivant{ margin-top:16px; }

/* ── Note permanente sous la consigne ────────────────────────────────── */
/* Elle reste visible pendant TOUT l'exercice. Une mention du genre
   « repères moyens issus de la carte source » affichée seulement dans le
   retour laisserait croire, pendant tout l'exercice, à une precision que
   la source ne donne pas. */
.mr-note{
  margin:0; padding:8px 12px;
  font-size:.82rem; font-style:italic; line-height:1.5;
  color:var(--mr-encre-douce);
  background:rgba(0,0,0,.04);
  border-left:4px solid var(--mr-encre-douce); border-radius:0 8px 8px 0;
}

/* =====================================================================
   ═══ LA PLANCHE — habillage issu des maquettes validées ═══

   ┌───────────────────────────────────────────────────────────────────┐
   │ POURQUOI CE BLOC EXISTE, ET CE QU'IL NE REFAIT PAS                │
   │ Le contrat fonctionnel des quatre mécaniques avait été suivi       │
   │ fidèlement, mais les maquettes visuelles n'avaient jamais été      │
   │ transmises. Résultat : un panneau CRÈME posé au milieu d'un        │
   │ lecteur SOMBRE. C'est ce contraste-là qui saute aux yeux.          │
   │                                                                    │
   │ L'EN-TÊTE DÉCRIT PAR LA MAQUETTE EXISTE DÉJÀ : logo, barre de      │
   │ progression or, compteur, réglages audio, sélecteur de langue      │
   │ sont la barre du lecteur. On ne la refait pas — une seconde barre  │
   │ par-dessus la première serait un doublon, pas une refonte.         │
   │ LA CARTE ELLE-MÊME RESTE CRÈME : c'est la présentation validée du  │
   │ texte de Charlotte, et elle n'est pas en cause.                    │
   │ SEUL L'EXERCICE CHANGE, et il devient ce que la maquette montre :  │
   │ un panneau sombre, avec ses cartes de choix violet-noir.           │
   └───────────────────────────────────────────────────────────────────┘

   LES TROIS RÈGLES DU HAUT DE CE FICHIER RESTENT TENUES : aucun scroll
   interne, jamais d'information par la seule couleur, cibles 44 px.
   ===================================================================== */

.mr-interaction{
  /* La palette de la planche. Sombre, comme le lecteur qui l'entoure. */
  --mr-planche: #17121f;          /* fond quasi-noir violacé */
  --mr-planche-carte: #211a2d;    /* les cartes de choix, un ton au-dessus */
  --mr-planche-bord: #3a2d4d;     /* liseré violet discret */
  --mr-planche-texte: #F4F1E0;    /* blanc cassé — mesuré 14,8:1 sur le fond */
  --mr-planche-doux: #b9aec6;     /* gris clair des explications — 7,6:1 */

  /* LE SÉPARATEUR EN POINTILLÉ DISPARAÎT : il annonçait un ajout dans la
     page. Ici l'exercice est un objet à part entière, il se pose. */
  border-top: none;
  margin-top: 24px;
  padding: 20px 18px 18px;
  border-radius: 16px;
  background: var(--mr-planche);
  color: var(--mr-planche-texte);
}

/* ── L'AMORCE, en majuscules or ─────────────────────────────────────── */
/* « ACTIVITÉ · OBSERVE AVANT DE CUIRE ». Elle annonce ce qu'on va FAIRE,
   là où le titre de la carte dit ce qu'on lit. */
.mr-activite{
  display: block; margin: 0 0 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mr-or);
}

.mr-interaction .mr-consigne{
  color: var(--mr-planche-texte);
  font-size: 1.05rem; line-height: 1.45;
}
.mr-interaction .mr-scene{
  color: var(--mr-planche-doux);
  border-left-color: var(--mr-or);
}
.mr-interaction .mr-note{ color: var(--mr-planche-doux); }
.mr-interaction .mr-item-libelle{ color: var(--mr-planche-texte); }
.mr-interaction .mr-place-dite{ color: var(--mr-planche-doux); }

/* ── LES CARTES DE CHOIX ────────────────────────────────────────────── */
.mr-interaction .mr-item,
.mr-interaction .mr-option,
.mr-interaction .mr-cran{
  position: relative;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
  border-radius: 14px;
  color: var(--mr-planche-texte);
}

/* Les boutons de la planche : sombres, lisibles, et jamais crème. */
.mr-interaction .mr-bouton{
  background: var(--mr-planche-carte);
  color: var(--mr-planche-texte);
  border-color: var(--mr-planche-bord);
}
.mr-interaction .mr-bouton:hover{ border-color: var(--mr-or); }
/* Le halo accompagne la bordure qui devient or. Il est un VOILE : il ne
   porte aucune information, il ne fait que dire « c'est celui-là ». */
.mr-interaction .mr-bouton:hover:not(:disabled){ box-shadow: 0 0 0 3px var(--mr-or-voile); }

/* ── L'ÉTAT CHOISI : BORDURE OR + BADGE À COCHE ─────────────────────── */
/* ┌───────────────────────────────────────────────────────────────────┐
   │ TROIS SIGNES, PAS UN. La maquette l'exige et la charte aussi : la  │
   │ sélection se voit à la BORDURE devenue or, au BADGE rond coché, et │
   │ au mot que le JS écrit à côté. Retirer la couleur ne retire aucune │
   │ information — c'est la règle, et c'est ce qui la rend vraie.        │
   └───────────────────────────────────────────────────────────────────┘ */
/* LE BOUTON CHOISI PORTE SON BADGE, et il faut le dire explicitement.
   Sans position:relative ici, le badge s'accrochait au premier ancêtre
   positionné — la LIGNE — et se retrouvait à son coin. Le résultat était
   juste par hasard : une seule case cochée par ligne. Un placement
   accidentel est un défaut qui attend de bouger. */
.mr-interaction .mr-choisi{
  position: relative;
  border-color: var(--mr-or);
  border-width: 2px;
  background: var(--mr-planche-carte);
  color: var(--mr-planche-texte);
  box-shadow: none;
}
.mr-interaction .mr-choisi::after{
  content: '✓';
  position: absolute; top: -9px; right: -9px;
  /* aspect-ratio PLUTÔT QUE height, et ce n'est pas un contournement :
     le garde du haut de ce fichier interdit toute hauteur fixe parce
     qu'une hauteur imposée finit par produire un pavé qui défile. Un
     badge rond n'a pas besoin d'y déroger — il se dimensionne par sa
     largeur, et reste rond. */
  width: 22px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; line-height: 1;
  color: #17121f; background: var(--mr-or);
  border: 2px solid var(--mr-planche);
  border-radius: 50%;
  pointer-events: none;
}

/* ── COULEUR CODÉE DES DÉPARTS, EN PLUS DU TEXTE ────────────────────── */
/* P1-03 : « départ à froid » et « départ à chaud » sont les deux gestes
   que la carte oppose. La couleur les distingue AU PREMIER COUP D'ŒIL,
   mais elle ne dit rien que le libellé ne dise déjà. */
.mr-interaction [data-cat="froid"]{ border-left: 5px solid #3f7fb5; }
.mr-interaction [data-cat="chaud"]{ border-left: 5px solid var(--rouge, #C8203D); }
.mr-interaction [data-cat="deux"]{ border-left: 5px solid var(--mr-or); }

/* ── À CLASSER, RETOUR CONTINGENT — dépôt et marquage du prototype
   câblé de Charlotte, sur la palette déjà posée ci-dessus. ─────────── */
/* Le survol d'une catégorie pendant le glisser reprend le même violet
   que .mr-bac.mr-survol : même geste, même signal, ailleurs dans ce
   fichier. */
.mr-interaction .mr-cc-categorie.mr-cc-survol{
  border-color: var(--mr-violet-clair, #7B4FA8);
  box-shadow: 0 0 0 3px rgba(123,79,168,.28);
}
/* La proposition de Claude ne porte JAMAIS l'or (réservé au texte
   validé) : rouge sombre, la même couleur que « à revoir » — un rappel,
   pas un jugement sur son exactitude propre. */
.mr-interaction .mr-cc-proposition-badge{
  color: var(--mr-encre, #F4F1E0);
  background: var(--mr-rouge-sombre);
  border: 1px solid var(--mr-rouge-sombre);
}
.mr-interaction .mr-cc-raison-explication{ color: var(--mr-planche-doux); }
.mr-interaction .mr-option.mr-cc-correct{ border-color: var(--mr-vert); color: var(--mr-planche-texte); }
.mr-interaction .mr-option.mr-cc-incorrect{ border-color: var(--mr-rouge-sombre); opacity: .8; }

/* ── LE RETOUR PÉDAGOGIQUE ──────────────────────────────────────────── */
.mr-interaction .mr-retour{
  background: rgba(111,74,148,.16);
  border: 1.5px solid var(--mr-planche-bord);
  border-left: 5px solid var(--mr-violet-clair, #7B4FA8);
  border-radius: 14px;
  padding: 14px 16px 14px 52px;
  color: var(--mr-planche-doux);
  position: relative;
}
/* La pastille ronde « i » de la maquette. Décorative : le titre écrit
   dit déjà de quoi il s'agit, elle ne porte aucune information seule. */
.mr-interaction .mr-retour::before{
  content: 'i';
  position: absolute; left: 14px; top: 14px;
  width: 24px; aspect-ratio: 1;   /* même raison que le badge à coche */
  display: flex; align-items: center; justify-content: center;
  font-family: Georgia, serif; font-style: italic; font-weight: 700;
  font-size: 0.9rem; line-height: 1;
  color: #F4F1E0; background: var(--violet-light, #7B4FA8);
  border-radius: 50%;
}
.mr-interaction .mr-retour-tete{ color: var(--mr-planche-texte); }
.mr-interaction .mr-retour-corps{ color: var(--mr-planche-doux); }
.mr-interaction .mr-retour.mr-juste{ border-left-color: #4c9a68; }
.mr-interaction .mr-retour.mr-a-revoir{ border-left-color: #e0736a; }

/* ── LE BOUTON PRINCIPAL, EN DÉGRADÉ OR ─────────────────────────────── */
.mr-interaction .mr-principal{
  background: linear-gradient(135deg, #EAB939, #d9ad5c 60%, #b98f3e);
  color: #17121f;
  border-color: #EAB939;
  font-weight: 700;
}
.mr-interaction .mr-principal:hover:not(:disabled){
  background: linear-gradient(135deg, #f2c957, #EAB939 60%, #c99a45);
}
.mr-interaction .mr-principal:disabled{ opacity: .45; }

/* ── LE PIED DE PLANCHE ─────────────────────────────────────────────── */
.mr-planche-pied{
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--mr-planche-bord);
  font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--mr-planche-doux);
}

/* Le marquage d'attente reste lisible sur fond sombre. */
.mr-interaction .mr-attente{ color: var(--mr-or); }

/* ── TÉLÉPHONE ──────────────────────────────────────────────────────── */
/* Une seule colonne sous 768 px : exigence de la maquette, et de toute
   façon la seule mise en page tenable à cette largeur. */
@media (max-width: 768px){
  .mr-interaction{ padding: 16px 14px 14px; }

  /* ┌─────────────────────────────────────────────────────────────────┐
     │ UNE COLONNE VEUT DIRE UNE COLONNE, JUSQU'AU BOUT                │
     │ .mr-item est une LIGNE flex : le libellé et le bloc de choix     │
     │ tenaient encore côte à côte à 390 px, et les trois boutons       │
     │ s'empilaient EN HAUTEUR à côté du titre. Résultat mesuré : un    │
     │ grand vide entre « La pomme de terre » et ses boutons, absent    │
     │ sur bureau. Vu sur capture, pas déduit du code.                  │
     │ Sous 768 px, le titre se pose donc AU-DESSUS de ses choix.       │
     └─────────────────────────────────────────────────────────────────┘ */
  .mr-interaction .mr-item{
    flex-direction: column;
    align-items: stretch;
  }
  /* ┌─────────────────────────────────────────────────────────────────┐
     │ LE PIÈGE DE flex-basis QUAND ON TOURNE L'AXE                     │
     │ .mr-item-libelle porte « flex: 1 1 190px ». En direction LIGNE,  │
     │ ces 190 px sont une LARGEUR — c'est l'intention d'origine. En    │
     │ passant la ligne en COLONNE, la base bascule sur la HAUTEUR : le │
     │ titre s'est mis à mesurer 203 px de haut, et c'est exactement le │
     │ grand vide constaté entre « La pomme de terre » et ses boutons.  │
     │ MESURÉ, PAS DEVINÉ : titre 203 px de haut, écart au bloc de      │
     │ choix 10 px seulement — le vide n'était pas entre les deux, il   │
     │ était DANS le titre.                                             │
     │ On rend donc au titre sa taille naturelle dès qu'il est empilé.  │
     └─────────────────────────────────────────────────────────────────┘ */
  .mr-interaction .mr-item-libelle{ flex: 0 0 auto; }
  .mr-interaction .mr-choix{
    width: 100%;
    flex-direction: column;
  }
  /* Chaque choix prend toute la largeur : au doigt, une cible large vaut
     mieux qu'une cible étroite, et l'alignement vertical rend les trois
     options comparables d'un coup d'œil. */
  .mr-interaction .mr-choix .mr-bouton{ width: 100%; }
}

/* =====================================================================
   ═══ LA PLANCHE, ÉTENDUE AUX TROIS AUTRES FORMATS ═══

   Le bloc précédent a porté « classer ». Celui-ci finit le travail :
   remettre en ordre, observation, mise en situation — et la plaque
   graduée, qui n'est pas un format mais un décor partagé.

   RIEN N'EST INVENTÉ ICI : ce sont les mêmes règles, appliquées aux
   sélecteurs restés en palette crème. Le contraire — habiller un format
   sur quatre — aurait produit un parcours qui change de peau en cours de
   route, ce qui est pire que de n'avoir rien fait.
   ===================================================================== */

/* ── REMETTRE DANS L'ORDRE ──────────────────────────────────────────── */
.mr-interaction .mr-etape{
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
  border-radius: 14px;
  color: var(--mr-planche-texte);
}
.mr-interaction .mr-etape-libelle{ color: var(--mr-planche-texte); }
/* LE RANG S'INVERSE. Sur crème il était clair sur encre ; sur la planche
   il devient or sur sombre — même rôle, même lisibilité, palette juste. */
.mr-interaction .mr-rang{
  color: #17121f;
  background: var(--mr-or);
  border-color: var(--mr-or);
}

/* ── OBSERVATION ────────────────────────────────────────────────────── */
.mr-interaction .mr-options{ display: flex; flex-direction: column; gap: 10px; }
.mr-interaction .mr-option{ color: var(--mr-planche-texte); }

/* ── OBSERVATION ILLUSTRÉE — P1-03 scène 2, portée le 04/09 depuis le
   câblage réel du 01/09 (commit 3e4ba1b2). Trois cartes CÔTE À CÔTE À
   TOUTES LES LARGEURS, y compris à 390px — CORRIGÉ LE 06/09
   (bug.panneau-cloture-observation-illustree-toujours-hors-ecran-390px-
   06092026, arbitrage.panneau-cloture-hors-ecran-cout-defaut-vs-cout-
   correctif-06092026) : la version précédente empilait les trois cartes en
   une colonne sous 768px (image à gauche, texte à droite), ce qui portait
   l'écran à ~1500px et rendait le panneau de clôture hors d'atteinte sans
   défiler — mesuré en direct sur la démo servie (demo.richarderie-
   edition.fr) le 06/09, pas seulement en local. LE CORRECTIF ATTAQUE LA
   CAUSE (la colonne unique), PAS LE SYMPTÔME : les trois options restent
   comparables en image sur les deux largeurs, ce qui est exactement le nom
   du format « observation illustrée » — rien n'est replié, rien ne
   disparaît, seule la taille de la carte s'adapte. Chaque carte est un
   .mr-bouton : la cible tactile et le focus visible du socle s'appliquent
   sans rien redéfinir ici. ───────────────────────────────────────────── */
.mr-oi-grille{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mr-interaction .mr-oi-carte{
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 10px 16px;
  min-height: 44px;
  white-space: normal;
}
/* CORRECTIF LOCAL, PAS PARTAGÉ : « .mr-bouton:hover:not(:disabled) » (règle
   de base, hors planche) pose « background: var(--mr-creme-sombre) » et
   n'est jamais repris ici — seule .mr-interaction .mr-bouton:hover change
   la bordure. Sur la planche sombre, le survol d'une carte à icône fait
   donc passer son fond au crème pendant que son texte reste presque blanc
   (var(--mr-planche-texte)) : texte quasi invisible, mesuré au navigateur
   sur cette carte. Ce correctif ne touche QUE .mr-oi-carte. */
.mr-interaction .mr-oi-carte:hover:not(:disabled){ background: var(--mr-planche-carte); }
.mr-oi-icone{
  display: block;
  width: 100%;
  max-width: 140px;
  height: auto;
  margin: 0 auto 4px;
}
.mr-interaction .mr-oi-libelle{ display: block; color: var(--mr-planche-texte); font-size: 1rem; }
.mr-interaction .mr-oi-legende{ display: block; color: var(--mr-planche-doux); font-size: .82rem; line-height: 1.35; }
/* Le rang de cuisson : un chiffre or, décoratif (aria-hidden), qui
   apparaît en cascade après le clic — jamais la seule information, voir
   le commentaire du JS. */
.mr-oi-rang{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; aspect-ratio: 1; border-radius: 50%;
  background: var(--mr-or); color: #17121f;
  font-size: .78rem; font-weight: 700;
  opacity: 0; transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  transition-delay: var(--mr-oi-delai, 0ms);
}
.mr-oi-carte:not([hidden]) .mr-oi-rang:not([hidden]){ opacity: 1; transform: translateY(0); }
/* Le panneau de clôture : texte fixe, transcrit de la maquette, visible
   dès le montage — pas un retour, pas conditionné à un clic. */
.mr-oi-cloture{
  margin-top: 4px;
  padding: 14px 16px;
  background: rgba(111,74,148,.16);
  border: 1.5px solid var(--mr-planche-bord);
  border-left: 5px solid var(--mr-or);
  border-radius: 14px;
}
.mr-oi-cloture-titre{ margin: 0 0 6px; color: var(--mr-planche-texte); font-weight: 700; }
.mr-oi-cloture-texte{ margin: 0; color: var(--mr-planche-doux); white-space: pre-line; }

/* Le retour, resserré SEULEMENT sur cet écran (bug.resultat-du-clic-hors-
   ecran-observation-illustree-06092026) : le réordonnancement DOM (JS)
   place déjà le résultat avant la grille, mais un texte d'explication
   réel (celui de la bonne carte, montré même quand on clique une carte
   fausse) peut suffire à faire déborder son PIED de quelques pixels à
   390px sur un écran de 844px de haut. Resserré ici, pas dans la règle
   partagée .mr-retour (utilisée par tous les autres formats, jamais
   touchée) : marge du titre et du corps réduites de moitié, padding
   vertical un peu moins généreux. Le début du résultat reste, dans tous
   les cas, garanti visible par le réordonnancement seul -- ce resserrage
   n'est qu'une marge de sécurité pour que la FIN d'un texte d'explication
   courant tienne aussi, sans jamais promettre qu'un texte arbitrairement
   long ne demande jamais le moindre défilement. */
.mr-observation-illustree .mr-retour{ padding: 10px 16px; }
.mr-observation-illustree .mr-retour-tete{ margin-bottom: 4px; }
.mr-observation-illustree .mr-retour-corps{ margin-top: 4px; }

@media (max-width: 768px){
  /* MÊME FORME QU'AU BUREAU (colonne : image au-dessus du texte), en plus
     étroit — ni empilée en une colonne, ni couchée en ligne. C'est la
     réduction de la carte, pas un changement de sa nature, qui fait tenir
     les trois côte à côte sur un téléphone. */
  .mr-oi-grille{ gap: 7px; }
  .mr-interaction .mr-oi-carte{ padding: 7px 4px 9px; gap: 3px; }
  .mr-oi-icone{ max-width: 58px; margin: 0 auto 2px; }
  .mr-interaction .mr-oi-libelle{ font-size: .8rem; line-height: 1.15; }
  .mr-interaction .mr-oi-legende{ font-size: .7rem; line-height: 1.2; }
  /* Complément au geste principal (colonnes gardées) : resserre l'espace
     ENTRE les blocs de cet écran précis (consigne/grille/retour/panneau) et
     le panneau de clôture lui-même, jamais la règle .mr-groupe partagée
     par tous les autres formats. Un geste chiffré à part, pas décoratif :
     14px -> 10px entre chaque bloc, 14px -> 10px de marge verticale dans
     le panneau. */
  .mr-observation-illustree .mr-groupe{ gap: 10px; }
  .mr-oi-cloture{ padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce){
  .mr-oi-rang{ transition: none; }
}

/* ── MISE EN SITUATION, ET LE COMPOSITE À PLUSIEURS TEMPS ───────────── */
.mr-interaction .mr-scene-corps{ color: var(--mr-planche-texte); }
.mr-interaction .mr-scene-compte{
  color: var(--mr-or);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* ── LA PLAQUE GRADUÉE ──────────────────────────────────────────────── */
/* Ce n'est pas un format : c'est le décor que P1-08 partage. Il doit
   suivre la planche, sinon il redevient l'unique tache claire de l'écran. */
.mr-interaction .mr-plaque-echelle{
  background: rgba(0,0,0,.25);
  border-color: var(--mr-planche-bord);
}
.mr-interaction .mr-cran{
  color: var(--mr-planche-doux);
  background: var(--mr-planche-carte);
  border-color: var(--mr-planche-bord);
}
.mr-interaction .mr-cran-marque{ color: var(--mr-or); }
.mr-interaction .mr-plaque-legende{ color: var(--mr-planche-doux); }

/* ── LES BACS DE GLISSER-DÉPOSER (bureau seulement) ─────────────────── */
.mr-interaction .mr-bac{
  border: 2px dashed var(--mr-planche-bord);
  color: var(--mr-planche-doux);
}
.mr-interaction .mr-bac-titre{ color: var(--mr-planche-texte); }
/* Le survol pendant un glisser : l'or dit « ici », et le trait plein le
   dit aussi — la couleur ne porte pas l'information seule. */
.mr-interaction .mr-survol{
  border-style: solid;
  border-color: var(--mr-or);
  background: rgba(217,173,92,.10);
}

/* ── LE MARQUAGE D'ATTENTE, sur fond sombre ─────────────────────────── */
.mr-interaction .mr-attente{
  background: rgba(217,173,92,.10);
  border-color: rgba(217,173,92,.55);
}

/* ── TÉLÉPHONE : LE MÊME PIÈGE, SUR LES ÉTAPES ─────────────────────── */
@media (max-width: 768px){
  /* .mr-etape-libelle porte « flex: 1 1 190px », exactement comme le
     libellé des items. En colonne, cette base de 190 px deviendrait une
     HAUTEUR et creuserait le même vide de 170 px qu'on vient de fermer
     sur « classer ». On le referme ici avant qu'il ne s'ouvre. */
  .mr-interaction .mr-etape{ flex-direction: column; align-items: stretch; }
  .mr-interaction .mr-etape-libelle{ flex: 0 0 auto; }
  .mr-interaction .mr-option{ width: 100%; }
}

/* ── LES SIGNES D'ÉTAT, RECALCULÉS POUR LE FOND SOMBRE ──────────────── */
/* ┌───────────────────────────────────────────────────────────────────┐
   │ CHANGER UN FOND CASSE SILENCIEUSEMENT LES COULEURS CHOISIES POUR  │
   │ L'ANCIEN. --mr-vert et --mr-rouge-sombre ont été retenus pour     │
   │ tenir AA SUR LE CRÈME — le fichier le dit plus haut : « mesuré    │
   │ 5,2:1 sur #f3ead9 ». Sur la planche sombre, les mêmes couleurs     │
   │ tombent à 1,76:1 : le ✓ et le → deviennent invisibles.            │
   │ Mesuré, pas supposé. Ces signes portent l'état SANS la couleur —  │
   │ ils sont la moitié graphique de la règle « jamais la couleur      │
   │ seule ». Les laisser illisibles retirerait l'information à ceux    │
   │ mêmes que la règle protège.                                        │
   └───────────────────────────────────────────────────────────────────┘ */
.mr-interaction .mr-ligne-juste .mr-signe,
.mr-interaction .mr-juste .mr-signe{ color: #7fd996; }
.mr-interaction .mr-ligne-a-revoir .mr-signe,
.mr-interaction .mr-a-revoir .mr-signe{ color: #ffb4a8; }
.mr-interaction .mr-attente .mr-signe{ color: var(--mr-or); }

/* ── LE CURSEUR DE TEMPÉRATURE ────────────────────────────────────────
   AUCUNE HAUTEUR IMPOSÉE ICI, aucun débordement, aucun plafond de
   hauteur. La règle 1 de cette feuille vaut aussi pour un format neuf,
   et un test la garde. Les épaisseurs passent par min-height, les remplissages par
   inset — jamais par une hauteur imposée.
   L'ÉTAT DU SEUIL EST PORTÉ PAR UN MOT ET UN SIGNE avant de l'être par
   une couleur : retirer la couleur ne retire aucune information. */
.mr-curseur-cadran{
  display: flex; justify-content: space-between; gap: 4px;
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
}
.mr-curseur-cadran .mr-cran{
  /* min-width:0 — SANS QUOI 12 CRANS DÉBORDENT À 390px. Mesuré : P1-08
     (9 crans) tenait déjà, jamais éprouvé au-delà — la plaque jouable de
     « situation » (03/09/2026) en pose 12, et le flex-basis 0 seul ne
     suffit pas à les faire rétrécir sous leur largeur de contenu (le
     min-width:auto par défaut d'un item flex fait butée). N'affecte en
     rien le rendu à 9 crans, déjà large de marge. */
  flex: 1 1 0; min-width: 0; text-align: center;
  font-size: .82rem; font-weight: 700;
  color: var(--mr-planche-doux);
  padding: 4px 0 2px;
  border-bottom: 2px solid var(--mr-planche-bord);
}
/* Un cran dont la carte donne le chiffre : liseré or, et il est repris en
   toutes lettres dans la lecture (« Chiffre donné par la carte »). */
.mr-curseur-cadran .mr-cran-source{
  color: var(--mr-or); border-bottom-color: var(--mr-or);
}
/* Le cran des deux tiers : trait plus épais. Le SIGNE, avant la couleur. */
.mr-curseur-cadran .mr-cran-seuil{
  border: 2px solid var(--mr-planche-texte); border-radius: 8px;
  color: var(--mr-planche-texte);
}

.mr-curseur-piste{
  position: relative; margin-top: 10px;
  display: flex; align-items: center;
  min-height: 44px;                 /* la cible tactile, portée par la piste */
}
.mr-curseur-jauge{
  position: relative; min-height: 16px; width: 100%;
  border-radius: 999px;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
}
.mr-curseur-remplissage{
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a6a1f 0%, var(--mr-or) 100%);
  transition: width 220ms ease, background 320ms ease;
}
/* Au-delà des deux tiers, l'or vire au carmin. La couleur ARRIVE APRÈS le
   mot et le signe ; elle ne dit rien qu'ils ne disent déjà. */
.mr-curseur[data-au-dela="oui"] .mr-curseur-remplissage{
  background: linear-gradient(90deg, var(--mr-or) 0%, #C8203D 78%);
}
/* La chaleur vacille, et jamais deux fois pareil — durée et retard tirés
   au hasard par le JS. L'effet ne porte AUCUNE information. */
.mr-curseur-remplissage::after{
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
  animation: mr-vacille var(--mr-vacille, 3000ms) ease-in-out infinite;
  animation-delay: var(--mr-vacille-retard, 0ms);
  opacity: 0;
}
.mr-curseur-jauge[style*="--mr-vacille"] .mr-curseur-remplissage::after{ opacity: 1; }
@keyframes mr-vacille{
  0%, 100%{ transform: translateX(-30%); }
  50%{ transform: translateX(30%); }
}
.mr-curseur-seuil-trait{
  position: absolute; inset: -5px auto -5px 0;
  width: 3px; margin-left: -1.5px;
  background: var(--mr-planche-texte); border-radius: 2px;
}

/* La commande est POSÉE SUR la jauge, transparente : une seule barre à
   l'écran, celle de la chaleur. Elle garde toute sa surface tactile et
   tout son clavier — c'est un input range, pas un tracé décoratif. */
.mr-curseur-commande{
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0; width: 100%; margin: 0;
  background: transparent; cursor: pointer;
}
.mr-curseur-commande::-webkit-slider-runnable-track{ background: transparent; }
.mr-curseur-commande::-moz-range-track{ background: transparent; }
.mr-curseur-commande::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 30px; aspect-ratio: 1; border-radius: 50%;
  background: var(--mr-or); border: 3px solid var(--mr-planche);
  box-shadow: 0 0 0 2px var(--mr-or), 0 2px 8px rgba(0,0,0,.55);
}
.mr-curseur-commande::-moz-range-thumb{
  width: 30px; aspect-ratio: 1; border-radius: 50%;
  background: var(--mr-or); border: 3px solid var(--mr-planche);
  box-shadow: 0 0 0 2px var(--mr-or), 0 2px 8px rgba(0,0,0,.55);
}
.mr-curseur-commande:focus-visible{ outline: 3px solid var(--mr-or); outline-offset: 4px; }

.mr-curseur-lecture{
  margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
  border-left: 5px solid var(--mr-or);
  transition: border-left-color 320ms ease;
}
.mr-curseur[data-au-dela="oui"] .mr-curseur-lecture{ border-left-color: #C8203D; }
.mr-curseur-etat{
  margin: 0 0 6px; display: flex; align-items: center; gap: 8px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  font-size: .78rem; color: var(--mr-or);
}
.mr-curseur[data-au-dela="oui"] .mr-curseur-etat{ color: #F2879B; }
.mr-curseur-temperature{
  margin: 0 0 4px; font-weight: 700; font-size: 1.05rem;
  color: var(--mr-planche-texte); font-variant-numeric: tabular-nums;
}
.mr-curseur-origine{
  margin: 0 0 8px; font-size: .8rem; color: var(--mr-planche-doux);
}
.mr-curseur-origine.mr-curseur-source{ color: var(--mr-or); }
.mr-curseur-dire{ margin: 0; line-height: 1.6; color: var(--mr-planche-doux); }
.mr-curseur-dire:empty{ margin: 0; }
.mr-curseur-cloture{
  margin: 12px 0 0; padding-left: 14px;
  border-left: 4px solid var(--mr-planche-bord);
  line-height: 1.6; color: var(--mr-planche-doux);
}
@media (prefers-reduced-motion: reduce){
  .mr-curseur-remplissage{ transition: none; }
  .mr-curseur-remplissage::after{ animation: none; opacity: 0; }
  .mr-curseur-lecture{ transition: none; }
}

/* ── LE PROTOCOLE, GESTE PAR GESTE ────────────────────────────────────
   La poêle est dessinée ici, jamais chargée : ce format fonctionne sans
   média. Elle ILLUSTRE — son état est aussi écrit en toutes lettres sous
   elle, et c'est ce texte qui fait foi pour un lecteur d'écran.
   Aucune hauteur imposée, aucun débordement, aucun plafond : le gabarit
   grandit avec la scène, comme partout ailleurs dans cette feuille. */
.mr-protocole-scene{
  margin-top: 4px; padding: 12px 14px 10px; border-radius: 14px;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
}
/* 03/09/2026 — LES GESTES SE POSENT SUR LA SCÈNE. Deux calques dans la
   même cellule de grille : l'illustration (role="img", jamais de
   commande dedans) et la bande de gestes, superposée par-dessus, ancrée
   en bas. Le clic tombe SUR la poêle, pas sous elle. */
.mr-protocole-empilement{ display: grid; grid-template-columns: minmax(0, 1fr); }
.mr-protocole-empilement > *{ grid-area: 1 / 1; min-width: 0; }
.mr-protocole-illustration{ align-self: start; }
.mr-poele{ display: block; width: 100%; }
.mr-poele-corps{ fill: #2c2436; stroke: #6f6480; stroke-width: 2; }
.mr-poele-bord{ fill: #3a3147; stroke: #8d81a0; stroke-width: 2.5; }
.mr-poele-manche{ fill: #1b1626; stroke: #6f6480; stroke-width: 2; }

/* LA CHALEUR. Elle respire tant qu'on chauffe, et retombe au dernier
   geste — « on réduit la température de manière progressive ». */
.mr-poele-halo{ transform-origin: 140px 118px; animation: mr-respire 3200ms ease-in-out infinite; }
@keyframes mr-respire{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }
.mr-protocole[data-etape="5"] .mr-poele-halo{ opacity: .22; animation-duration: 5200ms; }

/* LA PERLE. Elle ROULE — c'est le mot de la carte, et c'est le seul
   comportement de goutte qu'elle décrive. */
.mr-poele-perle{ fill: #dff1ff; opacity: 0; }
.mr-protocole[data-etape="1"] .mr-poele-perle{
  opacity: .95; animation: mr-roule 2400ms ease-in-out infinite alternate;
}
@keyframes mr-roule{ from{ transform: translateX(0); } to{ transform: translateX(78px); } }

.mr-poele-gras{ fill: #EAB939; opacity: 0; transform: scaleX(.15); transform-origin: 140px 82px;
  transition: opacity 420ms ease, transform 620ms ease; }
.mr-protocole[data-etape="3"] .mr-poele-gras,
.mr-protocole[data-etape="4"] .mr-poele-gras,
.mr-protocole[data-etape="5"] .mr-poele-gras{ opacity: .5; transform: scaleX(1); }

.mr-poele-viande{ fill: #7d3a24; stroke: #C8203D; stroke-width: 2; opacity: 0;
  transition: opacity 320ms ease; }
.mr-protocole[data-etape="4"] .mr-poele-viande,
.mr-protocole[data-etape="5"] .mr-poele-viande{ opacity: 1; }

/* Le « pssssh ! » est de la carte, mot pour mot. Il passe une fois. */
.mr-poele-pssh{
  fill: var(--mr-or); font-size: 17px; font-weight: 800; font-style: italic; opacity: 0;
}
.mr-protocole[data-etape="4"] .mr-poele-pssh{ animation: mr-pssh 1500ms ease-out 1 forwards; }
@keyframes mr-pssh{ 0%{ opacity:0; transform: translateY(6px); } 25%{ opacity:1; } 100%{ opacity:0; transform: translateY(-12px); } }

.mr-protocole-etat{
  margin: 8px 0 0; font-size: .9rem; line-height: 1.5;
  color: var(--mr-planche-texte); font-weight: 600;
}
.mr-protocole-suite{
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.mr-protocole-suite:empty{ margin: 0; }
.mr-protocole-pas{
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--mr-planche-doux);
}
.mr-protocole-pas .mr-signe{ color: var(--mr-or); font-weight: 800; }

/* LA BANDE DE GESTES, SUPERPOSÉE EN BAS DE L'ILLUSTRATION — jamais un
   panneau détaché sous la scène (voir le commentaire de tête de
   monterProtocole). `align-self:end` l'ancre au bas de la cellule de
   grille partagée avec l'illustration ; le dégradé donne aux libellés
   une assise lisible sur un dessin chargé, sans jamais être la SEULE
   porteuse d'information (le texte du bouton l'est toujours). */
/* SPÉCIFICITÉ DÉLIBÉRÉE À DEUX CLASSES : « .mr-interaction .mr-options »
   (plus haut dans ce fichier) pose flex-direction:column avec la MÊME
   spécificité qu'un sélecteur à une seule classe — un simple
   « .mr-protocole-gestes{} » aurait perdu contre elle quel que soit
   l'ordre. Trouvé en testant réellement le rendu, pas supposé : la
   bande restait empilée en une colonne avant ce correctif. */
.mr-interaction .mr-protocole-gestes{
  align-self: end; justify-self: stretch;
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 0; padding: 10px 8px 6px;
  background: linear-gradient(to top, rgba(23,18,31,.88) 58%, rgba(23,18,31,0));
  border-radius: 0 0 12px 12px;
}
/* LE TEXTE RESTE ENTIER, JAMAIS TRONQUÉ : « aucun scroll interne »
   (charte du fichier, testé sur la source) interdit tout overflow
   caché — donc pas d'ellipsis non plus, qui en a besoin pour exister.
   Seule la TAILLE DE POLICE se resserre pour que la bande de gestes
   reste compacte sur la scène ; le bouton s'élargit avec son texte,
   la rangée passe à la ligne suivante s'il le faut (flex-wrap). */
.mr-protocole-gestes .mr-option{
  font-size: .78rem; padding: 8px 12px; line-height: 1.25;
}
@media (max-width: 768px){
  /* Annule .mr-interaction .mr-option{width:100%} (règle générale des
     étapes en colonne, ligne ~631) : sur la scène, un bouton plein
     largeur couvrirait la poêle entière — ici chaque bouton garde la
     largeur de son texte, et la bande passe à la ligne suivante. */
  .mr-protocole-gestes .mr-option{ width: auto; }
}

@media (prefers-reduced-motion: reduce){
  .mr-poele-halo, .mr-poele-perle, .mr-poele-pssh{ animation: none; }
  .mr-protocole[data-etape="1"] .mr-poele-perle{ opacity: .95; }
  .mr-protocole[data-etape="4"] .mr-poele-pssh{ opacity: 1; animation: none; }
  .mr-poele-gras, .mr-poele-viande{ transition: none; }
}

/* ── LE CHOIX MIS À L'ÉPREUVE ─────────────────────────────────────────
   Chaque épreuve passée RESTE à l'écran : une durée de vie ne se juge pas
   sur le dernier écran vu, c'est l'accumulation qui fait le bilan. Le
   gabarit grandit donc, comme partout ici — aucune hauteur imposée. */
.mr-epreuves-banc{
  display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
}
.mr-epreuves-banc:empty{ margin: 0; }
.mr-epreuve{
  padding: 12px 14px; border-radius: 12px;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
  border-left: 5px solid var(--mr-planche-bord);
  animation: mr-epreuve-entre 420ms ease-out 1;
}
.mr-epreuve:focus-visible{ outline: 3px solid var(--mr-or); outline-offset: 3px; }
@keyframes mr-epreuve-entre{
  from{ opacity: 0; transform: translateY(10px); }
  to{ opacity: 1; transform: translateY(0); }
}
/* LE TON PASSE PAR UN SIGNE (◆ ▲ ◼) ET PAR UN MOT (« À son avantage »,
   « À son désavantage », « Nuancé ») AVANT de passer par la couleur.
   Retirer la couleur ne retire aucune information. */
.mr-epreuve-favorable{ border-left-color: var(--mr-or); }
.mr-epreuve-defavorable{ border-left-color: #C8203D; }
.mr-epreuve-nuance{ border-left-color: #8d81a0; }
.mr-epreuve-tete{
  margin: 0 0 2px; display: flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--mr-planche-texte);
}
.mr-epreuve-favorable .mr-epreuve-tete .mr-signe{ color: var(--mr-or); }
.mr-epreuve-defavorable .mr-epreuve-tete .mr-signe{ color: #F2879B; }
.mr-epreuve-nuance .mr-epreuve-tete .mr-signe{ color: #b9aec6; }
.mr-epreuve-verdict{
  margin: 0 0 6px; font-size: .74rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--mr-planche-doux);
}
.mr-epreuve-corps{ margin: 0; line-height: 1.6; color: var(--mr-planche-doux); }
.mr-epreuve-source{
  margin: 8px 0 0; font-size: .78rem; color: var(--mr-planche-doux);
  font-style: italic;
}
.mr-epreuve-source.mr-epreuve-dit{ color: var(--mr-or); font-style: normal; }
.mr-epreuves-bilan{
  padding: 14px 16px; border-radius: 12px;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-or);
}
.mr-epreuves-suivant{ margin-top: 12px; }
@media (prefers-reduced-motion: reduce){
  .mr-epreuve{ animation: none; }
}

/* ── LE CLIENT QUI INSISTE ────────────────────────────────────────────
   Un fil de conversation, pas une liste de questions. Il reste à l'écran :
   c'est en le relisant qu'on comprend ce qui a fait basculer le client.
   Les bulles sont distinguées par leur POSITION et par leur ÉTIQUETTE
   (« Le client », « Vous ») avant de l'être par la couleur. */
.mr-fil{ display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mr-fil:empty{ margin: 0; }
.mr-bulle{
  padding: 11px 14px; border-radius: 14px; max-width: 92%;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
  animation: mr-bulle-entre 380ms ease-out 1;
}
@keyframes mr-bulle-entre{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}
.mr-bulle-client{ align-self: flex-start; border-bottom-left-radius: 4px; border-left: 4px solid #C8203D; }
.mr-bulle-vous{ align-self: flex-end; border-bottom-right-radius: 4px; border-right: 4px solid var(--mr-or); }
/* La posture de la réponse : un liseré qui double l'étiquette et le
   retour écrit juste en dessous. Jamais la couleur seule. */
.mr-bulle-vous.mr-bulle-nuance{ border-right-color: var(--mr-or); }
.mr-bulle-vous.mr-bulle-survend,
.mr-bulle-vous.mr-bulle-refuse{ border-right-color: #C8203D; border-style: dashed; }
.mr-bulle-qui{
  display: block; font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mr-planche-doux); margin-bottom: 4px;
}
.mr-bulle-client .mr-bulle-qui{ color: #F2879B; }
.mr-bulle-vous .mr-bulle-qui{ color: var(--mr-or); }
.mr-bulle-corps{ margin: 0; line-height: 1.6; color: var(--mr-planche-texte); }
/* Le médaillon vidéo d'une réplique jouée (P2-21 et frères) — mesure.
   prouver-p2-21-clip-reel-ecran-final-07092026 : jamais dimensionné avant
   ce jour, aucun vrai clip n'avait atteint cet écran.
   07/09/2026, gouvernance.decision-cedric-medaillon-les-mains-sortent-du-
   disque-par-dessus-l-anneau-echelle-1-45-inchangee-07092026 : la toile
   du médaillon n'est plus forcément carrée (elle suit l'excursion du
   geste). CETTE BULLE DOIT DONC ACCEPTER N'IMPORTE QUEL RATIO SANS
   RECADRER NI DÉBORDER SOUS LE PLI — max-width ET max-height bornent
   ensemble la boîte (comportement standard d'un élément remplacé : la
   plus petite des deux échelles s'applique, le ratio intrinsèque est
   toujours respecté, jamais de recadrage). object-fit:contain reste posé
   en filet de sécurité si jamais une largeur/hauteur explicite était
   ajoutée plus tard.
   LES DEUX BORNES SONT MESURÉES PAR LARGEUR, PAS DEVINÉES (Puppeteer réel,
   chemin de clics jusqu'à P2-21, cas 1, chaque largeur) — LA MARGE
   DIFFÈRE : à 390px le haut de cette bulle tombe à ~603px du viewport
   (844-603=241px restants, 220px de hauteur max retenue, marge ~20px).
   À 1280px, LE TEXTE AU-DESSUS EST PLUS GRAND (@media max-width:768px
   partout ailleurs dans ce fichier — la coupure existante), donc plus
   haut : la bulle tombe à ~718px sur un viewport mesuré à 900px
   (900-718=182px restants), d'où la seconde borne, PLUS PETITE bien que
   l'écran soit plus grand — mesurée, pas supposée symétrique. Même
   breakpoint que le reste du fichier, pour ne pas en inventer un second.
   La largeur (260px) vit dans la colonne étroite mobile-first, comme
   avant, aux deux largeurs (la colonne texte reste étroite même en
   grand écran). */
.mr-scene-video{ margin: 2px 0 10px; text-align: center; }
.mr-scene-video video{
  width: auto; height: auto; max-width: 260px; max-height: 220px;
  /* width/height:auto, PAS width:100% -- avec une largeur imposee ET une
     hauteur max, un navigateur peut satisfaire les deux sans egaler le
     ratio intrinseque, et object-fit:contain comble alors l'ecart par un
     letterboxing noir a l'interieur du lecteur (constate a l'ecran).
     auto/auto laisse l'element se dimensionner EXACTEMENT au contenu,
     sous les deux plafonds -- zero bande morte, meme resultat "jamais
     recadre, jamais debordant". */
  border-radius: 12px; background: #000; display: block; margin: 0 auto;
  object-fit: contain;
}
@media (min-width: 769px){
  .mr-scene-video video{ max-height: 160px; }
}
.mr-insistance-choix{ margin-top: 14px; }
.mr-insistance-bilan{
  align-self: stretch; padding: 14px 16px; border-radius: 12px;
  background: var(--mr-planche-carte); border: 1.5px solid var(--mr-or);
}
@media (prefers-reduced-motion: reduce){
  .mr-bulle{ animation: none; }
}

/* =====================================================================
   ═══ P1-12 « LE CLIENT QUI INSISTE » — LA PLANCHE PREMIUM ═══
   Conforme à la maquette du 24/08 (gaming.maquettes-premium-p1-12-p1-13-
   p1-08-livrees-24082026), point par point :
     · magasin d'ustensiles, EXACTEMENT DEUX PERSONNAGES ;
     · sur le plan de travail, la POIGNÉE AMOVIBLE mise en lumière par une
       TRAJECTOIRE DORÉE, deux poignées ALTERNATIVES EN RETRAIT, une
       casserole ;
     · CARTE CRÈME À DROITE portant le cartouche et TROIS EMPLACEMENTS ;
     · un MOUVEMENT EN CINQ TEMPS, joué une fois à l'ouverture.

   LES TROIS RÈGLES DU HAUT DU FICHIER RESTENT TENUES. En particulier :
   aucune hauteur, aucun débordement. La scène se dimensionne par son
   RAPPORT (aspect-ratio), jamais par une hauteur imposée — même raison
   que le badge rond plus haut : une hauteur finit toujours par produire
   un pavé qui défile.
   ===================================================================== */

/* ── Les deux colonnes ───────────────────────────────────────────────── */
.mr-duo{
  display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}
.mr-duo-scene{ display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* SANS ZOOM, UNE SEULE COLONNE — 26/08/2026. Le zoom de « epreuves » est
   celui de P1-13 ; une carte qui ne le veut pas (P1-06) laisserait sinon
   une colonne vide et un cartouche à moitié large. */
.mr-duo-sans-zoom{ grid-template-columns: minmax(0, 1fr); }

/* ── La scène ────────────────────────────────────────────────────────── */
/* Le fond est posé ICI et pas seulement dans le SVG : le jour où
   l'illustration peinte validée arrivera, elle se pose en background de
   ce bloc et le dessin de secours passe dessous. Aucune autre ligne à
   changer. */
.mr-scene-magasin{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1.5px solid var(--mr-planche-bord);
  background: #17121f;
  background-size: cover; background-position: center;
}
.mr-magasin{ display: block; width: 100%; height: auto; border-radius: 13px; }

.mr-mag-rayon rect{ fill: #37294a; }
.mr-mag-socle{ fill: #120e18; }
.mr-mag-plan{ fill: #4a3a60; }
.mr-mag-tete{ fill: #8d81a0; }
/* La cliente est en TRENCH CRÈME, le vendeur en COSTUME SOMBRE : ce sont
   les deux personnages que la maquette nomme, et rien d'autre. */
.mr-mag-trench{ fill: #d9cfb4; }
.mr-mag-cliente g rect, .mr-mag-cliente g circle{ fill: #d9cfb4; }
.mr-mag-costume{ fill: #2a2036; stroke: #5b4d73; stroke-width: 1.5; }
.mr-mag-vendeur g rect, .mr-mag-vendeur g circle{ fill: #5b4d73; }
.mr-mag-cuve{ fill: #3a3147; stroke: #8d81a0; stroke-width: 2; }
.mr-mag-bord, .mr-mag-anse{ fill: #8d81a0; }

/* LA POIGNÉE EN LUMIÈRE — c'est elle que la maquette met en avant. */
.mr-mag-poignee{ fill: #EAB939; }
.mr-mag-pince{ fill: #c79a2b; }
.mr-mag-halo{ opacity: 0; transition: opacity 620ms ease; }
.mr-mag-cercle{
  fill: none; stroke: #EAB939; stroke-width: 2;
  stroke-dasharray: 5 7; opacity: 0;
  transition: opacity 620ms ease;
}

/* LA TRAJECTOIRE DORÉE. Elle se TRACE : le trait part de la main et
   arrive sur la poignée, il ne s'allume pas d'un bloc. */
.mr-mag-trajet{
  fill: none; stroke: #EAB939; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 210; stroke-dashoffset: 210;
  transition: stroke-dashoffset 760ms cubic-bezier(.22,.7,.3,1);
}

/* LES ALTERNATIVES. Inox clair, bois brun — les deux matériaux que la
   carte de Charlotte nomme. Elles RECULENT au quatrième temps. */
.mr-mag-alt-inox rect, .mr-mag-alt-inox path{ fill: #9aa2ad; }
.mr-mag-alt-bois rect, .mr-mag-alt-bois path{ fill: #8a5a34; }
.mr-mag-alt{
  transform-origin: 358px 210px;
  transition: transform 720ms cubic-bezier(.22,.7,.3,1), opacity 720ms ease;
}

/* Les bras, au repos. */
.mr-mag-bras-cliente{
  transform-origin: 70px 152.5px;
  transform: rotate(-26deg);
  transition: transform 820ms cubic-bezier(.22,.7,.3,1);
}
.mr-mag-bras-vendeur{
  transform-origin: 416px 150.5px;
  transform: rotate(16deg);
  transition: transform 820ms cubic-bezier(.22,.7,.3,1);
}

/* ── LES CINQ TEMPS ──────────────────────────────────────────────────── */
/* ① la main de la cliente va vers la poignée */
.mr-scene-magasin[data-temps="1"] .mr-mag-bras-cliente,
.mr-scene-magasin[data-temps="2"] .mr-mag-bras-cliente,
.mr-scene-magasin[data-temps="3"] .mr-mag-bras-cliente,
.mr-scene-magasin[data-temps="4"] .mr-mag-bras-cliente,
.mr-scene-magasin[data-temps="5"] .mr-mag-bras-cliente{ transform: rotate(14deg); }
/* ② le vendeur ouvre le geste */
.mr-scene-magasin[data-temps="2"] .mr-mag-bras-vendeur,
.mr-scene-magasin[data-temps="3"] .mr-mag-bras-vendeur,
.mr-scene-magasin[data-temps="4"] .mr-mag-bras-vendeur,
.mr-scene-magasin[data-temps="5"] .mr-mag-bras-vendeur{ transform: rotate(-14deg); }
/* ③ la trajectoire dorée focalise */
.mr-scene-magasin[data-temps="3"] .mr-mag-trajet,
.mr-scene-magasin[data-temps="4"] .mr-mag-trajet,
.mr-scene-magasin[data-temps="5"] .mr-mag-trajet{ stroke-dashoffset: 0; }
.mr-scene-magasin[data-temps="3"] .mr-mag-halo,
.mr-scene-magasin[data-temps="4"] .mr-mag-halo,
.mr-scene-magasin[data-temps="5"] .mr-mag-halo,
.mr-scene-magasin[data-temps="3"] .mr-mag-cercle,
.mr-scene-magasin[data-temps="4"] .mr-mag-cercle,
.mr-scene-magasin[data-temps="5"] .mr-mag-cercle{ opacity: 1; }
/* ④ les alternatives reculent */
.mr-scene-magasin[data-temps="4"] .mr-mag-alt,
.mr-scene-magasin[data-temps="5"] .mr-mag-alt{ transform: scale(.82) translateY(-9px); opacity: .42; }

/* La légende écrite : l'image ne porte jamais rien seule. */
.mr-scene-legende{
  margin: 0; font-size: .82rem; font-style: italic; line-height: 1.5;
  color: var(--mr-planche-doux);
}

/* ── LA CARTE CRÈME ──────────────────────────────────────────────────── */
/* La maquette pose une carte CRÈME à droite d'une scène sombre. Le
   contraste est mesuré, pas supposé : encre #241c2b sur crème #F4F1E0
   donne 13,6:1, très au-delà de l'exigence AA. */
.mr-cartouche{
  padding: 16px 16px 18px;
  border-radius: 14px;
  background: #F4F1E0;
  border: 1.5px solid #d8cdb0;
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
  min-width: 0;
}
.mr-cartouche-tete{
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 2px solid #EAB939;
}
.mr-cartouche-rang{
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  /* PAS L'OR DE LA CHARTE, ET C'EST MESURÉ : #EAB939 sur crème ne donne
     que 1,6:1, et le #8a6a12 essayé d'abord tombait à 4,46:1 — sous la
     barre, de quatre centièmes. Un test l'a attrapé, pas l'œil. Ce brun
     doré rend 5,15:1. L'or reste l'or partout où il est posé sur du
     sombre ; sur crème, il faut le foncer ou il ne se lit pas. */
  text-transform: uppercase; color: #7f610f;
}
.mr-cartouche-titre{
  font-size: 1.06rem; font-weight: 800; line-height: 1.25; color: #241c2b;
}

/* ── LES TROIS EMPLACEMENTS DE RÉPONSE ───────────────────────────────── */
/* Ils sont une FORME, pas un contenu. Le numéro est écrit : sans lui,
   « le deuxième » ne veut rien dire pour qui écoute la page. */
.mr-emplacement{ position: relative; padding-left: 26px; }
.mr-emplacement::before{
  content: attr(data-emplacement);
  position: absolute; left: 0; top: 12px;
  width: 19px; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; line-height: 1;
  color: #6b5a2a; background: #e6dcc0;
  border: 1.5px solid #c9bb92; border-radius: 50%;
}
.mr-emplacements-attente{ opacity: 0; }
.mr-insistance-choix{ transition: opacity 520ms ease; }

/* Les boutons de la carte crème reprennent l'habillage clair de base :
   la planche est sombre, la carte ne l'est pas, et un bouton sombre sur
   crème perdrait sa bordure. */
.mr-interaction .mr-cartouche .mr-bouton{
  background: #fffdf5; color: #241c2b; border-color: #241c2b;
}
.mr-interaction .mr-cartouche .mr-bouton:hover:not(:disabled){
  background: #f0e7cf; border-color: #8a6a12; box-shadow: 0 0 0 3px var(--mr-or-voile);
}
.mr-interaction .mr-cartouche .mr-choisi{
  background: #241c2b; color: #F4F1E0; border-color: #241c2b;
  box-shadow: inset 0 -4px 0 #EAB939;
}
.mr-interaction .mr-cartouche .mr-choisi::after{ border-color: #F4F1E0; }
.mr-interaction .mr-cartouche .mr-retour{
  background: rgba(0,0,0,.05); border-color: #d8cdb0;
}
.mr-interaction .mr-cartouche .mr-retour-tete{ color: #241c2b; }
.mr-interaction .mr-cartouche .mr-retour-corps{ color: #4a4055; }
.mr-interaction .mr-cartouche .mr-retour.mr-juste{ border-left-color: #2f6b43; }
.mr-interaction .mr-cartouche .mr-retour.mr-a-revoir{ border-left-color: #a3231c; }
.mr-interaction .mr-cartouche .mr-ligne-juste .mr-signe,
.mr-interaction .mr-cartouche .mr-juste .mr-signe{ color: #2f6b43; }
.mr-interaction .mr-cartouche .mr-ligne-a-revoir .mr-signe,
.mr-interaction .mr-cartouche .mr-a-revoir .mr-signe{ color: #a3231c; }

/* ── TÉLÉPHONE : LES DEUX COLONNES S'EMPILENT ────────────────────────── */
/* La scène passe DEVANT : c'est elle qui pose la situation, et la carte
   de réponse n'a de sens qu'une fois la scène vue. */
@media (max-width: 768px){
  .mr-duo{ grid-template-columns: minmax(0, 1fr); }
}

/* ── MOUVEMENT RÉDUIT ────────────────────────────────────────────────── */
/* On retire le TRAJET, jamais l'état final : la scène est posée d'emblée
   à son cinquième temps par le JS, et plus rien ne bouge ici. */
@media (prefers-reduced-motion: reduce){
  .mr-mag-bras-cliente,
  .mr-mag-bras-vendeur,
  .mr-mag-alt,
  .mr-mag-halo,
  .mr-mag-cercle,
  .mr-mag-trajet,
  .mr-insistance-choix{ transition: none; }
}

/* =====================================================================
   ═══ P1-13 « LE CHOIX MIS À L'ÉPREUVE » — LE MACRO-ZOOM ═══
   Conforme à la maquette du 24/08 : AUCUN PERSONNAGE, deux casseroles,
   un macro-zoom circulaire COUPÉ EN DEUX (rivetée en haut, soudée en
   bas), DEUX TRAITS D'OR reliant chaque casserole à sa moitié, et DEUX
   EMPLACEMENTS RONDS.

   LE POINT QUI COMMANDE TOUT LE RESTE : la moitié qui s'éclaire est
   celle qu'on a CHOISIE, jamais celle qui aurait raison. La carte ne
   tranche pas entre les deux fixations, et un dessin qui en désignerait
   une enseignerait l'inverse de ce qu'elle écrit.
   ===================================================================== */

.mr-scene-zoom{
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  border: 1.5px solid var(--mr-planche-bord);
  background: #17121f;
  background-size: cover; background-position: center;
}
.mr-zoom{ display: block; width: 100%; height: auto; border-radius: 13px; }

.mr-zoom-cuve{ fill: #3a3147; stroke: #8d81a0; stroke-width: 2; }
.mr-zoom-bord, .mr-zoom-manche{ fill: #8d81a0; }

/* LES DEUX TRAITS D'OR. Ils se tracent quand le zoom se pose. */
.mr-zoom-trait{
  fill: none; stroke: #EAB939; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
  transition: stroke-dashoffset 700ms cubic-bezier(.22,.7,.3,1), stroke-width 320ms ease;
}
.mr-scene-zoom[data-pose="oui"] .mr-zoom-trait{ stroke-dashoffset: 0; }

/* LE DISQUE. Il arrive en se posant, il ne surgit pas. */
.mr-zoom-cerclage{
  fill: none; stroke: #EAB939; stroke-width: 3;
  opacity: 0; transform-origin: 330px 136px; transform: scale(.92);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.22,.7,.3,1);
}
.mr-scene-zoom[data-pose="oui"] .mr-zoom-cerclage{ opacity: 1; transform: scale(1); }
.mr-zoom-coupe{ stroke: #EAB939; stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .75; }

/* L'intérieur du zoom : le dedans de la casserole, la paroi, la patte. */
.mr-zoom-dedans{ fill: #120e18; }
.mr-zoom-paroi{ fill: #6f6480; }
.mr-zoom-patte{ fill: #4a4058; }
/* LES RELIEFS QUE LES RIVETS LAISSENT À L'INTÉRIEUR — la phrase de la
   carte, en dessin. Ils sont du côté du DEDANS, et c'est tout le sujet. */
.mr-zoom-relief{ fill: #b9aec6; }
.mr-zoom-tige{ fill: #8d81a0; }
/* LA PAROI INTÉRIEURE LISSE de la soudée. Charlotte l'a corrigée le
   23/08 : « le non riveté ne laisse pas de marque à l'intérieur ». Ce
   trait est un reflet, pas un relief — et il n'y a rien d'autre à
   ajouter de ce côté, jamais. */
.mr-zoom-lisse{ fill: #cfc6da; }
.mr-zoom-cordon{ fill: none; stroke: #EAB939; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.mr-zoom-mot{
  fill: #b9aec6; font-size: 13px; font-weight: 800; letter-spacing: 1.4px;
  font-family: inherit;
}

/* LA MOITIÉ CHOISIE S'ÉCLAIRE — et l'autre s'estompe sans disparaître :
   on compare, on n'élimine pas. */
.mr-zoom-moitie{ transition: opacity 420ms ease; }
.mr-scene-zoom[data-retenu="rivetee"] .mr-zoom-moitie-soudee,
.mr-scene-zoom[data-retenu="soudee"] .mr-zoom-moitie-rivetee{ opacity: .38; }
.mr-scene-zoom[data-retenu="rivetee"] .mr-zoom-trait-bas,
.mr-scene-zoom[data-retenu="soudee"] .mr-zoom-trait-haut{ stroke-width: 1.5; opacity: .4; }
.mr-scene-zoom[data-retenu="rivetee"] .mr-zoom-trait-haut,
.mr-scene-zoom[data-retenu="soudee"] .mr-zoom-trait-bas{ stroke-width: 4; }
.mr-scene-zoom[data-retenu="rivetee"] .mr-zoom-moitie-rivetee .mr-zoom-mot,
.mr-scene-zoom[data-retenu="soudee"] .mr-zoom-moitie-soudee .mr-zoom-mot{ fill: #EAB939; }

/* ── LES DEUX EMPLACEMENTS RONDS ─────────────────────────────────────── */
/* Ronds, et pas décoratifs : ce sont les deux commandes du format. Le
   libellé est DANS le bouton — un rond muet, désigné par sa seule
   position, ne dirait rien à qui ne le voit pas. */
/* LA SPÉCIFICITÉ COMPTE ICI, ET ELLE A COÛTÉ UN ESSAI : « .mr-options »
   de la planche pose flex-direction:column avec deux classes ; une règle
   à une seule classe ne la renverse pas, et les deux ronds s'empilaient
   au lieu de se ranger côte à côte. */
.mr-interaction .mr-epreuves-choix{
  display: flex; flex-direction: row; flex-wrap: wrap;
  gap: 14px; justify-content: center;
}
.mr-rond{ position: relative; }
.mr-interaction .mr-cartouche .mr-option-ronde{
  width: 132px; aspect-ratio: 1;
  padding: 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: .84rem; font-weight: 700; line-height: 1.3;
  border-width: 2px; border-style: dashed;
}
/* Le pointillé dit « emplacement » ; le plein dit « posé ». Le trait
   change de NATURE, pas seulement de couleur. */
.mr-interaction .mr-cartouche .mr-option-ronde.mr-choisi{
  border-style: solid; border-width: 3px;
  box-shadow: inset 0 -5px 0 #EAB939;
}
/* LE BADGE SE REPLACE SUR UN ROND. Posé au coin de la boîte, il flottait
   à côté du cercle, détaché de lui : sur un disque de 132 px, le coin est
   à 19 px du bord. Il revient donc à l'intérieur. */
.mr-interaction .mr-cartouche .mr-option-ronde.mr-choisi::after{
  top: 7px; right: 7px;
}
.mr-interaction .mr-cartouche .mr-epreuves-suivant{
  align-self: center; margin-top: 14px;
  background: #241c2b; color: #F4F1E0; border-color: #241c2b;
}
.mr-interaction .mr-cartouche .mr-epreuves-suivant:hover:not(:disabled){
  background: var(--mr-violet); border-color: var(--mr-violet);
}

/* ── TÉLÉPHONE ───────────────────────────────────────────────────────── */
@media (max-width: 768px){
  .mr-interaction .mr-cartouche .mr-option-ronde{ width: 124px; font-size: .8rem; }
}

/* ── MOUVEMENT RÉDUIT ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .mr-zoom-trait, .mr-zoom-cerclage, .mr-zoom-moitie{ transition: none; }
}

/* =====================================================================
   ═══ P1-08 « LE CURSEUR DE TEMPÉRATURE » — LA PLAQUE QUI RÉAGIT ═══
   Conforme à la maquette du 24/08 : une poêle sur la plaque, un HALO QUI
   RÉAGIT, de la vapeur, une pièce en cuisson ; le curseur à NEUF
   positions en bas, ses REPÈRES 3, 6 ET 7 mis en évidence, sa molette
   dorée ; et le GRAND PANNEAU CRÈME à droite.

   ┌───────────────────────────────────────────────────────────────────┐
   │ CE QUI N'EST PAS REPRIS DE LA MAQUETTE, ET POURQUOI                │
   │ ① LE MONOGRAMME « MR » COURONNÉ, répété cinq fois dans son décor.  │
   │    Il N'EXISTE PAS : l'inventaire du 23/08 l'établit, et Cédric a   │
   │    écarté l'option monogramme le 24/08 au matin. Le dessiner        │
   │    reviendrait à inscrire dans le code une marque inventée.         │
   │ ② LE CERCLAGE DU REPÈRE 3 — TRANCHÉ, ET IL RESTE OR.                │
   │    Sur cet écran le carmin veut dire « au-delà des deux             │
   │    tiers » : c'est la règle de la carte. Le poser sur le 3,         │
   │    qui est à 100 °C et bien en deçà, dirait l'inverse de ce         │
   │    qu'elle écrit. L'écart a été remonté à Cédric, qui a             │
   │    tranché le 24/08 à 23h37 : LES TROIS REPÈRES EN OR.              │
   │    (journal /reserves-mecaniques-24082026, question                 │
   │    « cerclage-repere-3 », verdict « or »)                           │
   │    SA RAISON, DANS SES MOTS : « Garder les trois en or. Le          │
   │    carmin reste réservé au au-delà des deux tiers. »                │
   │    LE CERCLAGE DIT « la carte chiffre cette position » ; il         │
   │    ne dit RIEN de la chaleur. Ne pas mettre de rouge ici            │
   │    sans redéfinir d'abord ce que le rouge signifierait —            │
   │    il ne peut pas vouloir dire deux choses sur un écran.            │
   └───────────────────────────────────────────────────────────────────┘

   UNE SEULE VARIABLE COMMANDE TOUTE LA SCÈNE : --mr-chaleur, la part de
   course de 0 à 1, posée par le JS. Halo, vapeur et teinte s'en
   déduisent. Neuf règles auraient dit la même chose, moins bien.
   ===================================================================== */

.mr-scene-plaque{
  position: relative;
  aspect-ratio: 12 / 5;
  border-radius: 14px;
  border: 1.5px solid var(--mr-planche-bord);
  background: #17121f;
  background-size: cover; background-position: center;
  --mr-chaleur: 0;
}
.mr-plaque-scene{ display: block; width: 100%; height: auto; border-radius: 13px; }

.mr-pl-plaque{ fill: #2a2036; stroke: #5b4d73; stroke-width: 1.5; }
.mr-pl-foyer{ fill: #3a3147; }
.mr-pl-corps{ fill: #2c2436; stroke: #6f6480; stroke-width: 2; }
.mr-pl-bord{ fill: #3a3147; stroke: #8d81a0; stroke-width: 2.5; }
.mr-pl-manche{ fill: #1b1626; stroke: #6f6480; stroke-width: 2; }
.mr-pl-gras{ fill: #EAB939; opacity: .42; }
.mr-pl-piece{ fill: #7d3a24; stroke: #C8203D; stroke-width: 2; }

/* LE HALO. Il grandit et s'intensifie avec la position, il ne juge rien :
   ce sont le mot, le signe et le texte qui disent où l'on en est. */
.mr-pl-halo{
  opacity: calc(.14 + var(--mr-chaleur) * .86);
  transform-origin: 240px 158px;
  transform: scale(calc(.62 + var(--mr-chaleur) * .38));
  transition: opacity 260ms ease, transform 260ms ease;
}
/* Au-delà des deux tiers, le halo vire au carmin — APRÈS le mot et le
   signe, jamais à leur place. */
.mr-scene-plaque[data-au-dela="oui"] .mr-halo-coeur{ stop-color: #C8203D; }
.mr-scene-plaque[data-au-dela="oui"] .mr-pl-foyer{ fill: #4a2130; }

/* LA VAPEUR ne monte que lorsqu'il fait assez chaud pour qu'il y ait de
   quoi s'évaporer. Elle ne porte aucune information. */
.mr-pl-volute{
  fill: none; stroke: #cfc6da; stroke-width: 2.5; stroke-linecap: round;
  opacity: calc((var(--mr-chaleur) - .25) * 1.1);
  transition: opacity 320ms ease;
}
.mr-pl-volute-1{ animation: mr-monte 3400ms ease-in-out infinite; }
.mr-pl-volute-2{ animation: mr-monte 4200ms ease-in-out infinite -900ms; }
.mr-pl-volute-3{ animation: mr-monte 3800ms ease-in-out infinite -1800ms; }
@keyframes mr-monte{
  0%, 100%{ transform: translateY(4px) scaleX(1); }
  50%{ transform: translateY(-6px) scaleX(1.12); }
}

/* ── LES TROIS REPÈRES DE LA CARTE ───────────────────────────────────── */
/* 3, 6 et 7 : exactement les trois positions que Charlotte chiffre. Ils
   portent un CERCLAGE, pas seulement une couleur — et la lecture le
   redit en toutes lettres (« Chiffre donné par la carte »). */
.mr-curseur-cadran .mr-cran-repere{
  color: var(--mr-or);
  border: 2px solid var(--mr-or); border-radius: 9px;
  box-shadow: 0 0 0 3px rgba(234,185,57,.16);
}
/* Le seuil des deux tiers garde son trait blanc, PAR-DESSUS le cerclage
   d'or : c'est une information de plus, pas une information à la place. */
.mr-curseur-cadran .mr-cran-repere.mr-cran-seuil{
  border-color: var(--mr-planche-texte);
  box-shadow: 0 0 0 3px rgba(234,185,57,.28);
}

/* ── LE GRAND PANNEAU CRÈME ──────────────────────────────────────────── */
.mr-interaction .mr-cartouche .mr-curseur-lecture{
  margin-top: 0; background: transparent; border: none;
  border-left: 5px solid #7f610f; padding: 4px 0 4px 14px;
}
.mr-curseur[data-au-dela="oui"] .mr-cartouche .mr-curseur-lecture{ border-left-color: #a3231c; }
.mr-interaction .mr-cartouche .mr-curseur-etat{ color: #7f610f; }
.mr-curseur[data-au-dela="oui"] .mr-cartouche .mr-curseur-etat{ color: #a3231c; }
.mr-interaction .mr-cartouche .mr-curseur-temperature{ color: #241c2b; }
.mr-interaction .mr-cartouche .mr-curseur-origine{ color: #4a4055; }
.mr-interaction .mr-cartouche .mr-curseur-origine.mr-curseur-source{ color: #7f610f; }
.mr-interaction .mr-cartouche .mr-curseur-dire{ color: #4a4055; }

/* ── TÉLÉPHONE ───────────────────────────────────────────────────────── */
@media (max-width: 768px){
  .mr-scene-plaque{ aspect-ratio: 16 / 9; }
}

/* ── MOUVEMENT RÉDUIT ────────────────────────────────────────────────── */
/* La vapeur cesse de monter, le halo cesse de fondre — mais il garde son
   intensité : c'est une lecture, pas une animation. */
@media (prefers-reduced-motion: reduce){
  .mr-pl-volute-1, .mr-pl-volute-2, .mr-pl-volute-3{ animation: none; }
  .mr-pl-halo, .mr-pl-volute{ transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FORMAT 10 — LE BALAYAGE RAYONS X
   Spécifié avant d'être écrit : demo.spec-geste-balayage-rayons-x-25082026.

   AUCUNE HAUTEUR, AUCUN OVERFLOW. C'est l'invariant qui casse en premier
   et il se tient ici, pas dans le JS : le gabarit GRANDIT et c'est la page
   qui défile. Les images sont en width 100 % / height auto — elles se
   remettent à l'échelle, elles ne se recadrent jamais.
   ═══════════════════════════════════════════════════════════════════════ */
/* LE DÉFAUT DE LA POSITION EST SUR LA RACINE, PAS SUR LA SCÈNE. Déclarée
   sur la scène, elle MASQUAIT la valeur héritée que le JS pose plus haut :
   la jauge se remplissait, et la coupe ne se révélait pas. Une variable
   redéclarée sur un descendant gagne toujours contre l'héritage — et ça ne
   se voit qu'au rendu. */
.mr-balayage{ --mr-balayage-position: 0%; }
.mr-balayage-scene{
  position: relative; width: 100%; margin: 14px 0 0;
  border: 1.5px solid var(--mr-planche-bord); border-radius: 12px;
  background: var(--mr-planche-carte);
}
.mr-balayage-scene img{ display: block; width: 100%; height: auto; border-radius: 10px; }

/* LA FENÊTRE EST UN POURCENTAGE, JAMAIS DES PIXELS : elle suit la largeur
   réelle sans calcul de mise en page. Le SENS du balayage se règle ici, en
   une ligne, quand les vrais assets arriveront — sans toucher au JS. */
.mr-balayage-dessous{
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--mr-balayage-position)) 0 0);
  transition: clip-path 380ms ease;
}
/* LE BORD DE LA FENÊTRE — un trait d'or, pas une information. Ce qui
   informe est écrit dans .mr-balayage-lecture. */
.mr-balayage-scene::after{
  content: ''; position: absolute; top: 0; bottom: 0;
  left: var(--mr-balayage-position); width: 2px;
  background: var(--mr-or); box-shadow: 0 0 10px var(--mr-or-voile);
  opacity: .95; pointer-events: none;
  transition: left 380ms ease;
}
.mr-balayage-scene[data-ouverture="0"]::after{ opacity: 0; }

.mr-balayage-couches{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.mr-balayage-couche{
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 8px 12px; border-left: 4px solid var(--mr-or);
  background: var(--mr-creme); color: var(--mr-encre);
}
.mr-balayage-couche-nom{ font-weight: 700; }
.mr-balayage-couche-role{ color: var(--mr-encre-douce); }

/* LA COMMANDE PORTE LA CHARTE, PAS LE BLEU DU NAVIGATEUR — ET ELLE LE FAIT
   COMME LA PLAQUE DE P1-08, pas autrement. La jauge est un élément DESSINÉ,
   l'input est transparent par-dessus : c'est ce qui permet de n'imposer
   AUCUNE hauteur fixe, l'invariant que la maison garde sur toute la
   feuille. Ma première version stylait la piste native en « height: 8px »
   et faisait tomber l'épreuve « aucun scroll interne » — la règle était
   plus forte que mon format, et c'est elle qui avait raison. */
.mr-balayage-piste{
  position: relative; margin: 16px 0 0;
  display: flex; align-items: center;
  min-height: 44px;                 /* la cible tactile, portée par la piste */
}
.mr-balayage-jauge{
  position: relative; min-height: 16px; width: 100%;
  border-radius: 999px;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
}
.mr-balayage-remplissage{
  position: absolute; inset: 0 auto 0 0; width: var(--mr-balayage-position, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #8a6a1f 0%, var(--mr-or) 100%);
  transition: width 220ms ease;
}
.mr-balayage-commande{
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0; width: 100%; margin: 0;
  background: transparent; cursor: ew-resize;
}
.mr-balayage-commande::-webkit-slider-runnable-track{ background: transparent; }
.mr-balayage-commande::-moz-range-track{ background: transparent; }
.mr-balayage-commande::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 30px; aspect-ratio: 1; border-radius: 50%;
  background: var(--mr-or); border: 3px solid var(--mr-planche);
  box-shadow: 0 0 0 2px var(--mr-or), 0 2px 8px rgba(0,0,0,.55);
}
.mr-balayage-commande::-moz-range-thumb{
  width: 24px; aspect-ratio: 1; border-radius: 50%;
  background: var(--mr-or); border: 3px solid var(--mr-planche);
}
.mr-balayage-commande:focus-visible{ outline: 3px solid var(--mr-or); outline-offset: 4px; }

.mr-balayage-lecture{
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--mr-planche-carte);
  border: 1.5px solid var(--mr-planche-bord);
  border-left: 5px solid var(--mr-or);
}
.mr-balayage-etat{
  margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-weight: 700; color: var(--mr-planche-texte);
}
.mr-balayage-etat .mr-signe{ color: var(--mr-or); font-size: 1.05rem; }

/* MOUVEMENT RÉDUIT : on retire le DÉPLACEMENT, pas l'information. La
   fenêtre saute à sa position, le bord ne glisse plus — les trois états,
   leurs mots, les couches et la clôture restent identiques. */
@media (prefers-reduced-motion: reduce){
  .mr-balayage-dessous, .mr-balayage-scene::after, .mr-balayage-remplissage{ transition: none; }
}
.mr-interaction[data-mouvement="reduit"] .mr-balayage-dessous,
.mr-interaction[data-mouvement="reduit"] .mr-balayage-scene::after,
.mr-interaction[data-mouvement="reduit"] .mr-balayage-remplissage{ transition: none; }

/* ── FORMAT 11 — TRADUIRE UN TERME EN BÉNÉFICE CLIENT (P2-02) ────────
   SIX ÉCRANS EN SÉQUENCE, PAS UN GABARIT À GRILLE : chaque règle
   ci-dessous reste en flux normal, sans hauteur ni overflow posés —
   même invariant que le reste de cette feuille. */
.mr-ttb-cartouche{
  padding: 12px 14px; border-radius: 12px;
  background: var(--mr-creme); border-left: 5px solid var(--mr-or);
}
.mr-ttb-cartouche-titre{ margin: 0; font-weight: 700; color: var(--mr-encre); }
.mr-ttb-cartouche-mecanique{
  margin: 4px 0 0; font-size: .82rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--mr-violet);
}
.mr-ttb-cartouche-but{ margin: 6px 0 0; color: var(--mr-encre-douce); }

.mr-ttb-compte{ margin: 0; font-weight: 700; color: var(--mr-encre-douce); font-size: .88rem; }

.mr-ttb-corps{ display: flex; flex-direction: column; gap: 14px; }

/* LA BULLE — un personnage, un mot, un texte. Le nom est ÉCRIT, jamais
   distingué à la seule couleur du liseré. */
.mr-ttb-bulle{
  padding: 12px 14px; border-radius: 12px;
  background: var(--mr-creme); border-left: 4px solid var(--mr-or);
}
.mr-ttb-bulle-charlotte{ border-left-color: var(--mr-violet); }
.mr-ttb-nom{
  display: block; font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mr-encre-douce);
  margin: 0 0 4px;
}
.mr-ttb-texte{ margin: 0; color: var(--mr-encre); line-height: 1.55; }

.mr-ttb-fiches-apercu{
  margin: 0; padding-left: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.mr-ttb-fiche-nom{
  padding: 6px 12px; border-radius: 8px;
  background: var(--mr-creme-sombre); color: var(--mr-encre); font-size: .88rem;
}

.mr-ttb-fiches-traduire, .mr-ttb-reformulation{
  display: flex; flex-direction: column; gap: 12px;
}
.mr-ttb-fiche{
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--mr-creme-sombre);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.mr-ttb-fiche-terme{ margin: 0; font-weight: 700; color: var(--mr-encre); }
.mr-ttb-champ{
  margin: 0; padding: 8px 10px; border-radius: 8px; width: 100%;
  background: var(--mr-creme); color: var(--mr-encre-douce); font-style: italic;
}
/* REMPLI : le trait latéral change ET le texte change — jamais la seule
   couleur de fond. */
.mr-ttb-champ.mr-ttb-champ-rempli{
  border-left: 4px solid var(--mr-vert); color: var(--mr-encre); font-style: normal;
}

.mr-ttb-verrous{ margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mr-ttb-verrou{ display: flex; align-items: baseline; gap: 8px; color: var(--mr-encre); }
.mr-ttb-verrou .mr-signe{ color: var(--mr-vert); }

.mr-ttb-options{ margin: 0; }
.mr-ttb-recherche-label{
  display: block; margin: 4px 0 0; font-size: .85rem; color: var(--mr-encre-douce);
}
.mr-ttb-recherche{
  display: block; width: 100%; min-height: 44px; margin-top: 4px;
  padding: 8px 12px; font: inherit; font-size: .95rem;
  color: var(--mr-encre); background: var(--mr-creme);
  border: 2px solid var(--mr-encre); border-radius: 10px;
}
.mr-ttb-recherche:focus-visible{ outline: 3px solid var(--mr-violet); outline-offset: 2px; }

.mr-ttb-cloture{
  padding: 14px 16px; border-radius: 12px;
  background: var(--mr-creme); border-left: 5px solid var(--mr-vert);
}
.mr-ttb-cloture-titre{ margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--mr-encre); }
.mr-ttb-cloture-mention{ margin: 6px 0 0; color: var(--mr-encre-douce); }

.mr-ttb-suivant{ align-self: flex-start; }