/* =============================================================================
   Mission 1 — Mes racines, mes droits — style.css
   @version 1.0.0

   Une seule feuille, lue à deux endroits (comme celle de « Chaque goutte ») :
   1. dans la page hôte : seules les règles #mission-racines-root s'y
      appliquent (place réservée avant le JavaScript, remise à zéro de
      l'héritage du thème) ;
   2. dans la racine fantôme (Shadow DOM) de l'aventure : :host et classes mr-*.
   Aucune règle ne vise html, body ou * dans la page. !important réservé au
   mouvement réduit. Contrastes notés en commentaire (WCAG 2.2 AA).
   ============================================================================= */

/* ===========================================================================
   1. HÔTE — contexte de la page
   =========================================================================== */
#mission-racines-root {
  display: block;
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  /* Place réservée avant l'exécution du JavaScript : aucun décalage */
  aspect-ratio: 16 / 10;
  min-block-size: 30rem;
  max-block-size: max(30rem, calc(100svh - 7rem));
  margin-inline: auto;
  border-radius: 28px;
  overflow: clip;
  isolation: isolate;
  scroll-margin-block-start: var(--bs-scroll-margin-top, 5rem);
  /* Fond d'attente : l'aube de l'introduction */
  background: linear-gradient(180deg, #0b1630 0%, #1a2d59 34%, #38427a 54%, #da9063 82%, #f3c074 92%, #e3c68e 100%);
  box-shadow: 0 2px 6px rgb(20 33 61 / 0.1), 0 24px 56px -20px rgb(20 33 61 / 0.4);
  /* Tout ce que la page transmet par héritage est remis à zéro ici */
  color: #14213d;
  font: 400 1rem/1.5 'Atkinson Hyperlegible Next', 'Atkinson Repli', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-indent: 0;
  text-transform: none;
  text-shadow: none;
  white-space: normal;
}

@media (max-width: 47.99em) {
  #mission-racines-root {
    aspect-ratio: 4 / 5;
    min-block-size: 28rem;
    max-block-size: max(28rem, calc(100svh - 6rem));
    border-radius: 22px;
  }
}

[data-bs-theme="dark"] #mission-racines-root,
#mission-racines-root[data-theme="dark"] {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 24px 56px -20px rgb(0 0 0 / 0.8);
}

/* Version autonome (index.html) : l'aventure occupe toute la fenêtre */
#mission-racines-root.mission-racines-hote--pleine-page {
  aspect-ratio: auto;
  block-size: 100vh;
  block-size: 100dvh;
  min-block-size: 20rem;
  max-block-size: none;
  border-radius: 0;
  box-shadow: none;
}

#mission-racines-root .mission-racines-noscript {
  margin: 0;
  padding: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #14213d;
  background: rgb(255 253 248 / 0.94);
}

/* ===========================================================================
   2. RACINE FANTÔME — jetons
   Bleu nuit (confiance), ivoire et sable (douceur), ors (lumière), verts
   (croissance). Contrastes mesurés sur les surfaces indiquées.
   =========================================================================== */
:host {
  --mr-surface: #fbf6ec;
  --mr-surface-2: #fffdf8;
  --mr-surface-3: #f3ead9;
  --mr-encre: #14213d;            /* 14,83:1 sur #fbf6ec */
  --mr-encre-2: #5c5348;          /* 7,00:1 sur #fbf6ec ; 6,31:1 sur #f3ead9 */
  --mr-ligne: #e3d6bf;
  --mr-ligne-forte: #b9a98a;      /* 3,06:1 : bord porteur des choix */
  --mr-or: #e8a93b;               /* décor, jamais du texte sur le clair */
  --mr-or-clair: #ffd98a;
  --mr-ocre-texte: #7a4f0e;       /* 6,60:1 sur #fbf6ec ; 6,30:1 sur #fbf0dc */
  --mr-vert: #2f6b4f;
  --mr-vert-texte: #256043;       /* 6,88:1 sur #fbf6ec ; 6,47:1 sur #e8f2ea */
  --mr-alerte-texte: #8e3a26;     /* 6,59:1 sur #fbede4 */
  --mr-bouton: #1f3461;           /* blanc : 12,19:1 */
  --mr-bouton-survol: #2a4580;    /* blanc : 9,29:1 */
  --mr-bouton-texte: #ffffff;
  --mr-or-bouton: #e9b865;        /* encre #14213d : 8,75:1 */
  --mr-or-bouton-survol: #f2c77e;
  --mr-juste-fond: #e8f2ea;
  --mr-essai-fond: #fbf0dc;
  --mr-alerte-fond: #fbede4;
  --mr-savoir-fond: #eaf0f8;      /* encre #1f3461 : 10,64:1 */
  --mr-verre: rgb(255 253 248 / 0.93);
  --mr-verre-bord: rgb(20 33 61 / 0.12);
  --mr-verre-nuit: rgb(11 22 48 / 0.8);   /* sur le ciel le plus clair : #3b3e47 */
  --mr-encre-nuit: #f3e9d6;       /* 8,87:1 sur #3b3e47 */
  --mr-encre-nuit-2: #c9b99a;     /* 5,54:1 sur #3b3e47 */
  --mr-or-nuit: #ffd98a;          /* 7,91:1 sur #3b3e47 */
  --mr-ombre: 0 1px 2px rgb(20 33 61 / 0.08), 0 12px 32px -12px rgb(20 33 61 / 0.32);
  --mr-ombre-haute: 0 2px 6px rgb(20 33 61 / 0.1), 0 28px 60px -22px rgb(20 33 61 / 0.45);
  --mr-voile: rgb(11 22 48 / 0.6);
  --mr-focus-1: #14213d;
  --mr-focus-2: #fffdf8;
  --mr-r-s: 10px;
  --mr-r: 16px;
  --mr-r-xl: 28px;
  --mr-police-titre: 'Figtree', 'Figtree Repli', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mr-police-texte: 'Atkinson Hyperlegible Next', 'Atkinson Repli', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mr-courbe: cubic-bezier(0.2, 0, 0, 1);
  --mr-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mr-rapide: 180ms;
  --mr-moyen: 320ms;
  --mr-lent: 600ms;
  --mr-barre-h: 4.25rem;

  color-scheme: light;
}

/* Thème sombre du site : l'interface passe à la nuit, l'illustration reste
   lumineuse (son ciel porte déjà le bleu nuit de l'aube). */
:host([data-theme="dark"]) {
  --mr-surface: #0f1830;
  --mr-surface-2: #15213f;
  --mr-surface-3: #1c2a4e;
  --mr-encre: #f3e9d6;            /* 13,20:1 sur #15213f */
  --mr-encre-2: #c9b99a;          /* 8,24:1 sur #15213f */
  --mr-ligne: #2b3a60;
  --mr-ligne-forte: #5a6b94;
  --mr-ocre-texte: #e8a93b;       /* 7,38:1 sur #2e2412 */
  --mr-vert-texte: #8fc2a6;       /* 6,99:1 sur #17302a */
  --mr-alerte-texte: #f0b4a2;     /* 9,42:1 sur #2a1914 */
  --mr-bouton: #e9b865;           /* encre #14213d : 8,75:1 */
  --mr-bouton-survol: #f2c77e;
  --mr-bouton-texte: #14213d;
  --mr-juste-fond: #17302a;
  --mr-essai-fond: #2e2412;
  --mr-alerte-fond: #2a1914;
  --mr-savoir-fond: #1c2a4e;
  --mr-verre: rgb(21 33 63 / 0.93);
  --mr-verre-bord: rgb(255 255 255 / 0.14);
  --mr-ombre: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px -12px rgb(0 0 0 / 0.75);
  --mr-ombre-haute: 0 2px 6px rgb(0 0 0 / 0.45), 0 28px 60px -22px rgb(0 0 0 / 0.85);
  --mr-voile: rgb(0 0 0 / 0.66);
  --mr-focus-1: #f3e9d6;
  --mr-focus-2: #0f1830;

  color-scheme: dark;
}

/* ===========================================================================
   3. SOCLE
   =========================================================================== */
.mr-ancre {
  position: absolute;
  inset: 0;
}

.mr-defs {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.mr-app,
.mr-immersif,
.mr-dialogue {
  font-family: var(--mr-police-texte);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--mr-encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

.mr-app {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container: mr / size;
  background: #1a2d59;
}

:is(.mr-app, .mr-dialogue) *,
:is(.mr-app, .mr-dialogue) *::before,
:is(.mr-app, .mr-dialogue) *::after {
  box-sizing: border-box;
}

:is(.mr-app, .mr-dialogue) :where(h1, h2, h3, h4, h5, p, ul, ol, li, figure) {
  margin: 0;
  padding: 0;
}

:is(.mr-app, .mr-dialogue) :where(ul, ol) {
  list-style: none;
}

:is(.mr-app, .mr-dialogue) [hidden] {
  display: none !important;
}

.mr-picto {
  display: block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
}

.mr-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Focus visible : double contour (sombre + clair), lisible sur tous les fonds */
:is(.mr-app, .mr-dialogue) :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--mr-focus-1);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--mr-focus-2);
}

/* Sur la carte nuit de l'introduction, le contour s'inverse */
.mr-accueil :is(button, a, [tabindex]):focus-visible {
  outline-color: #fff4dc;
  box-shadow: 0 0 0 6px #0b1630;
}

/* Le focus n'est jamais masqué par le bandeau collant du site (WCAG 2.4.11) */
.mr-app :is(button, a, [tabindex]) {
  scroll-margin-block: var(--bs-scroll-margin-top, 5rem) 1rem;
}

:is(.mr-app, .mr-dialogue) :is(h1, h2, h3, h4, p, div)[tabindex="-1"]:focus {
  outline: none;
}

:is(.mr-app, .mr-dialogue) :is(h1, h2, h3, h4, p, div)[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--mr-focus-1);
  outline-offset: 4px;
  border-radius: 6px;
  box-shadow: none;
}

/* Verre dépoli : fond presque opaque (le contraste ne dépend jamais de la
   scène), flouté par-dessus pour la profondeur. */
.mr-progression,
.mr-bouton-outil,
.mr-repere,
.mr-panneau,
.mr-finale-carte,
.mr-passer-intro,
.mr-passer-finale {
  background: var(--mr-verre);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--mr-verre-bord);
  box-shadow: var(--mr-ombre);
}

.mr-lien-texte {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

/* ===========================================================================
   4. SCÈNE
   =========================================================================== */
.mr-scene-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  user-select: none;
}

.mr-scene {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.mr-plan {
  transform-origin: 0 0;
  transform-box: view-box;
}

.mr-bulle-texte {
  font-family: var(--mr-police-titre);
  font-weight: 800;
}

/* ---- Lumière du ciel : l'aube reste dessous, le jour et l'or se posent dessus */
.mr-ciel-jour,
.mr-ciel-or {
  opacity: 0;
  transition: opacity 2.4s ease;
}

.mr-scene:is([data-ciel="jour"], [data-ciel="or"]) .mr-ciel-jour,
.mr-scene[data-ciel="or"] .mr-ciel-or {
  opacity: 1;
}

.mr-soleil {
  transform: translateY(80px);
  transition: transform 3.4s var(--mr-courbe);
}

.mr-scene[data-intro="true"] .mr-soleil { transform: translateY(14px); }
.mr-scene[data-ciel="jour"] .mr-soleil { transform: translateY(-260px); }
.mr-scene[data-ciel="or"] .mr-soleil { transform: translateY(-150px); }

.mr-etoiles {
  transition: opacity 2s ease;
}

.mr-scene:not([data-ciel="aube"]) .mr-etoiles { opacity: 0; }

/* Voile de l'aube : il se dissipe quand le jour se lève */
.mr-voile-aube {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.6s ease;
}

.mr-scene[data-ciel="aube"] .mr-voile-aube { opacity: 0.42; }
.mr-scene[data-ciel="aube"][data-intro="true"] .mr-voile-aube { opacity: 0.3; }

/* ---- Racines : fils de lumière (introduction), puis racines découvertes */
.mr-racine path:first-child {
  transition: fill var(--mr-lent) ease;
}

.mr-racine[data-allumee="true"] path:first-child { fill: #f4d8a6; }

.mr-racine-lumiere {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.mr-scene[data-intro="true"][data-ciel="aube"] .mr-racine-lumiere { opacity: 0.55; }
.mr-racine-lumiere[data-allumee="true"] { opacity: 1; }

.mr-racine-fil {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.4s var(--mr-courbe) 0.5s;
}

.mr-scene[data-intro="true"][data-ciel="aube"] .mr-racine-fil,
.mr-racine-lumiere[data-allumee="true"] .mr-racine-fil {
  stroke-dashoffset: 0;
}

.mr-racine-halo {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.mr-racine-lumiere[data-allumee="true"] .mr-racine-halo { opacity: 0.3; }

.mr-racine-impulsion {
  opacity: 0;
}

.mr-scene[data-intro="true"][data-ciel="aube"] .mr-racine-impulsion {
  opacity: 0.85;
  animation: mr-impulsion 3.4s linear 1.6s infinite;
}

.mr-racine-lumiere[data-allumee="true"] .mr-racine-impulsion {
  opacity: 0.95;
  animation-duration: 2.4s;
}

/* ---- Arbre : halo de la finale */
.mr-arbre-halo {
  opacity: 0;
  transition: opacity 2s ease;
}

.mr-scene[data-finale="true"] .mr-arbre-halo { opacity: 0.85; }

/* ---- Lieux : la situation, puis la réponse respectueuse */
.mr-lieu .mr-avant,
.mr-lieu .mr-apres {
  transition: opacity var(--mr-lent) ease;
}

.mr-lieu .mr-apres { opacity: 0; }
.mr-lieu[data-etat="apres"] .mr-avant { opacity: 0; }
.mr-lieu[data-etat="apres"] .mr-apres { opacity: 1; }

.mr-lieu-lueur {
  opacity: 0;
  transition: opacity 1.2s ease;
}

.mr-projecteur {
  opacity: 0.7;
  transition: opacity 1.2s ease;
}

.mr-scene[data-finale="true"] .mr-projecteur { opacity: 0; }

.mr-lieu[data-etat="apres"] .mr-lieu-lueur { opacity: 0.45; }
.mr-scene[data-finale="true"] .mr-lieu-lueur { opacity: 0.75; }

.mr-bulle,
.mr-salut,
.mr-perso-entree {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.mr-lieu[data-etat="apres"] .mr-bulle-pop {
  animation: mr-pop 0.5s var(--mr-ressort) 0.7s both;
}

.mr-lieu[data-etat="apres"] .mr-salut {
  animation: mr-pop 0.5s var(--mr-ressort) both;
  animation-delay: calc(var(--i, 0) * 130ms + 600ms);
}

.mr-lieu[data-etat="apres"] .mr-salut.is-active {
  animation: mr-accent 0.9s var(--mr-ressort);
}

.mr-salut-flotte {
  animation: mr-flotte 4.5s ease-in-out infinite alternate;
}

.mr-salut-flotte:nth-child(2n) { animation-duration: 5.2s; animation-delay: -1.4s; }
.mr-salut-flotte:nth-child(3n) { animation-duration: 3.9s; animation-delay: -2.2s; }

/* ---- Sous l'arbre : l'enfant, le cercle de confiance, Amani */
.mr-confiance,
.mr-amani,
.mr-aide-enfant {
  transition: opacity var(--mr-lent) ease, transform var(--mr-lent) var(--mr-ressort);
}

.mr-confiance[data-visible="false"],
.mr-amani[data-visible="false"] {
  opacity: 0;
  transform: translateY(8px);
}

.mr-cercle-aide[data-enfant="false"] .mr-lieu[data-lieu="aide"] {
  opacity: 0;
}

.mr-cercle-aide .mr-lieu[data-lieu="aide"] {
  transition: opacity var(--mr-lent) ease;
}

/* ---- Finale : fils de lumière vers les trois univers */
.mr-lien {
  opacity: 0;
  transition: opacity 1s ease;
}

.mr-liens[data-allume="true"] .mr-lien { opacity: 1; }

.mr-lien-fil {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.6s var(--mr-courbe);
}

.mr-liens[data-allume="true"] .mr-lien-fil { stroke-dashoffset: 0; }

.mr-lien-impulsion { opacity: 0; }

.mr-liens[data-allume="true"] .mr-lien-impulsion {
  opacity: 0.9;
  animation: mr-impulsion 3s linear 2.6s infinite;
}

/* ---- Animations en boucle (pause : bouton, mouvement réduit, hors écran) */
.mr-anim-nuage { animation: mr-derive 90s ease-in-out infinite alternate; }
.mr-nuage:nth-of-type(2n) .mr-anim-nuage { animation-duration: 120s; animation-delay: -40s; }
.mr-anim-oiseaux { animation: mr-vol 34s linear infinite; }
.mr-anim-halo { animation: mr-respire 7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
.mr-anim-feuillage { animation: mr-balance 6.5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.mr-arbre-decor:nth-child(3n) .mr-anim-feuillage { animation-duration: 8s; animation-delay: -2s; }
.mr-anim-vie { animation: mr-vie 3.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.mr-personnage:nth-child(3n) .mr-anim-vie { animation-duration: 4.1s; animation-delay: -1.3s; }
.mr-anim-vapeur { animation: mr-vapeur 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.mr-scene[data-finale="true"] .mr-anim-vie { animation: mr-fete 1.3s ease-in-out infinite; }

.mr-app[data-pause="true"] :is(.mr-anim, .mr-repere-onde),
.mr-app[data-suspendu="true"] :is(.mr-anim, .mr-repere-onde) {
  animation-play-state: paused;
}

/* ===========================================================================
   5. BARRE HAUTE — progression, options
   =========================================================================== */
.mr-barre {
  position: absolute;
  z-index: 30;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) 0.5rem max(0.75rem, env(safe-area-inset-left));
  pointer-events: none;
}

.mr-barre > * { pointer-events: auto; }

.mr-progression {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem;
  border-radius: 999px;
  font: 800 0.9375rem/1 var(--mr-police-titre);
  font-variant-numeric: tabular-nums;
  color: var(--mr-encre);
  transition: opacity var(--mr-moyen) var(--mr-courbe), transform var(--mr-moyen) var(--mr-courbe);
}

.mr-app[data-ecran="accueil"] .mr-progression {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
}

.mr-progression-etapes {
  display: inline-flex;
  gap: 0.25rem;
}

.mr-badge {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  color: var(--mr-encre-2);
  background: var(--mr-surface-3);
  border: 1.5px solid var(--mr-ligne-forte);
  transition: background-color var(--mr-moyen), color var(--mr-moyen), border-color var(--mr-moyen);
}

.mr-badge .mr-badge-picto {
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
}

.mr-badge.is-courant {
  color: var(--mr-encre);
  border-color: var(--mr-or);
  box-shadow: 0 0 0 3px rgb(232 169 59 / 0.35);
}

.mr-badge.is-fait {
  color: #fff;
  background: var(--mr-vert);
  border-color: var(--mr-vert);
}

.mr-badge-coche {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-end: -4px;
  inline-size: 0.9375rem;
  block-size: 0.9375rem;
  padding: 2px;
  border-radius: 50%;
  color: var(--mr-vert);
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--mr-vert);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity var(--mr-moyen), transform var(--mr-moyen) var(--mr-ressort);
}

.mr-badge.is-fait .mr-badge-coche {
  opacity: 1;
  transform: none;
}

.mr-options {
  display: flex;
  gap: 0.375rem;
  margin-inline-start: auto;
}

.mr-bouton-outil {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0 1rem 0 0.75rem;
  border-radius: 999px;
  color: var(--mr-encre);
  font: 700 0.875rem/1 var(--mr-police-titre);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--mr-rapide), scale var(--mr-rapide) var(--mr-courbe);
}

.mr-bouton-outil:hover { background: var(--mr-surface-2); }
.mr-bouton-outil:active { scale: 0.95; }
.mr-bouton-outil[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--mr-or), var(--mr-ombre); }

@container mr (max-width: 1040px) {
  .mr-bouton-outil { padding: 0; }

  .mr-bouton-outil .mr-bouton-libelle {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Étroit : les pastilles seules portent la progression (le libellé complet
   reste le nom accessible du groupe) */
@container mr (max-width: 520px) {
  .mr-progression { gap: 0.3125rem; padding-inline-end: 0.3125rem; }
  .mr-progression-texte { display: none; }
  .mr-badge { inline-size: 1.625rem; block-size: 1.625rem; }
  .mr-badge .mr-badge-picto { inline-size: 0.875rem; block-size: 0.875rem; }
  .mr-badge-coche { inline-size: 0.75rem; block-size: 0.75rem; padding: 1px; }
  .mr-progression-etapes { gap: 0.1875rem; }
  .mr-options { gap: 0.25rem; }
}

@container mr (max-width: 380px) {
  .mr-badge { inline-size: 1.375rem; block-size: 1.375rem; border-width: 1px; }
  .mr-badge .mr-badge-picto { inline-size: 0.75rem; block-size: 0.75rem; }
  .mr-bouton-outil { min-inline-size: 2.5rem; min-block-size: 2.5rem; }
}

/* ===========================================================================
   6. BOUTONS
   =========================================================================== */
.mr-bouton {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-block-size: 3rem;
  padding: 0.75rem 1.375rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 1.0625rem/1.2 var(--mr-police-titre);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--mr-rapide), border-color var(--mr-rapide), scale var(--mr-rapide) var(--mr-courbe);
}

.mr-bouton:active { scale: 0.97; }

.mr-bouton--principal {
  color: var(--mr-bouton-texte);
  background: var(--mr-bouton);
  box-shadow: 0 1px 2px rgb(20 33 61 / 0.3), 0 12px 26px -12px rgb(20 33 61 / 0.8);
}

.mr-bouton--principal:hover { background: var(--mr-bouton-survol); }

.mr-bouton--secondaire {
  color: var(--mr-encre);
  background: var(--mr-surface-2);
  border-color: var(--mr-encre-2);
}

.mr-bouton--secondaire:hover { border-color: var(--mr-encre); }

.mr-bouton--discret {
  min-block-size: 2.75rem;
  padding: 0.5rem 1rem;
  color: var(--mr-encre);
  background: transparent;
  border-color: var(--mr-ligne-forte);
  font-size: 0.9375rem;
}

.mr-bouton--discret:hover { background: var(--mr-surface-3); }

.mr-bouton--grand {
  min-block-size: 3.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 1.1875rem;
}

.mr-bouton-icone {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  transition: translate var(--mr-rapide) var(--mr-courbe);
}

.mr-bouton:hover .mr-bouton-icone--fin { translate: 3px 0; }

/* ===========================================================================
   7. REPÈRES DES RACINES (vrais boutons collés à la scène)
   =========================================================================== */
.mr-reperes {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--mr-moyen) var(--mr-courbe), visibility 0s linear var(--mr-moyen);
}

.mr-app[data-phase="racines-exploration"] .mr-reperes {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--mr-moyen) var(--mr-courbe) 120ms, visibility 0s;
}

.mr-repere {
  appearance: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 3rem;
  padding: 0.3125rem 1rem 0.3125rem 0.3125rem;
  border-radius: 999px;
  color: var(--mr-encre);
  font: 800 0.9375rem/1.1 var(--mr-police-titre);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: background-color var(--mr-rapide);
}

.mr-repere-pastille {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  border-radius: 50%;
  color: #14213d;                 /* 8,75:1 sur l'or #e9b865 */
  background: var(--mr-or-bouton);
  transition: background-color var(--mr-rapide);
}

/* Survol et appui : retour visuel sans déplacement. Grossir le bouton faisait
   glisser pastille et texte de quelques pixels sous le curseur (décalage au
   survol) et rendait la visée hasardeuse ; une cible ne bouge jamais quand le
   pointeur l'atteint. La pastille s'éclaircit, comme les boutons principaux. */
.mr-repere:hover { background: var(--mr-surface-2); }
.mr-repere:not(.is-ouvert):hover .mr-repere-pastille { background: var(--mr-or-bouton-survol); }
.mr-repere:active { background: var(--mr-surface-3); }

.mr-repere-picto {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.mr-repere-coche {
  position: absolute;
  inset-block-end: -3px;
  inset-inline-end: -3px;
  inline-size: 1.0625rem;
  block-size: 1.0625rem;
  padding: 2px;
  border-radius: 50%;
  color: var(--mr-vert);
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--mr-vert);
  opacity: 0;
}

.mr-repere-onde {
  position: absolute;
  inset-block-start: 0.3125rem;
  inset-inline-start: 0.3125rem;
  inline-size: 2.375rem;
  block-size: 2.375rem;
  border-radius: 50%;
  border: 2px solid var(--mr-or);
  pointer-events: none;
  animation: mr-pulsation 2.4s var(--mr-courbe) infinite;
}

.mr-repere.is-ouvert .mr-repere-pastille {
  color: #fff;
  background: var(--mr-vert);
}

.mr-repere.is-ouvert .mr-repere-coche { opacity: 1; }
.mr-repere.is-ouvert .mr-repere-onde { display: none; }

@container mr (max-width: 420px) {
  .mr-repere {
    min-block-size: 2.75rem;
    padding-inline-end: 0.75rem;
    font-size: 0.875rem;
  }

  .mr-repere-pastille,
  .mr-repere-onde {
    inline-size: 2.125rem;
    block-size: 2.125rem;
  }
}

/* ===========================================================================
   8. ACCUEIL — carte nuit sur l'aube, typographie cinématographique
   =========================================================================== */
.mr-accueil {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--mr-barre-h) 0.875rem max(0.875rem, env(safe-area-inset-bottom));
  pointer-events: none;
}

.mr-accueil-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  inline-size: min(100%, 34rem);
  padding: 1.625rem 1.375rem 1.25rem;
  border-radius: var(--mr-r-xl);
  text-align: center;
  color: var(--mr-encre-nuit);
  background: var(--mr-verre-nuit);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgb(255 217 138 / 0.22);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2), 0 30px 70px -26px rgb(0 0 0 / 0.7);
  pointer-events: auto;
}

.mr-surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font: 800 0.8125rem/1 var(--mr-police-titre);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mr-ocre-texte);
}

.mr-accueil .mr-surtitre { color: var(--mr-or-nuit); }

.mr-accueil .mr-surtitre::before,
.mr-accueil .mr-surtitre::after {
  content: "";
  inline-size: 1.75rem;
  block-size: 1px;
  background: currentColor;
  opacity: 0.6;
}

.mr-accueil-titre {
  font: 900 clamp(2rem, 6.6cqi, 3.75rem)/0.98 var(--mr-police-titre);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff4dc;
}

.mr-mot { display: inline-block; }

.mr-accueil-titre::after {
  content: "";
  display: block;
  inline-size: 4rem;
  block-size: 4px;
  margin: 0.875rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8a93b, #ffd98a);
}

.mr-accueil-message {
  max-inline-size: 30ch;
  font-size: clamp(1.0625rem, 2.6cqi, 1.375rem);
  line-height: 1.45;
  color: var(--mr-encre-nuit);
  text-wrap: pretty;
}

.mr-accueil-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 0.375rem;
}

/* Sur la carte nuit, l'action principale est dorée */
.mr-accueil .mr-bouton--principal {
  color: #14213d;                 /* 8,75:1 sur #e9b865 */
  background: var(--mr-or-bouton);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 14px 30px -12px rgb(232 169 59 / 0.75);
}

.mr-accueil .mr-bouton--principal:hover { background: var(--mr-or-bouton-survol); }

.mr-accueil .mr-bouton--secondaire {
  color: var(--mr-encre-nuit);
  background: transparent;
  border-color: rgb(243 233 214 / 0.6);
}

.mr-accueil .mr-bouton--secondaire:hover { border-color: var(--mr-encre-nuit); }

.mr-accueil-note {
  font-size: 0.875rem;
  color: var(--mr-encre-nuit-2);
}

.mr-passer-intro,
.mr-passer-finale {
  position: absolute;
  z-index: 26;
  inset-block-start: calc(var(--mr-barre-h) + 0.25rem);
  inset-inline-end: max(0.75rem, env(safe-area-inset-right));
  min-block-size: 2.75rem;
  padding: 0.5rem 1rem;
  color: var(--mr-encre);
  pointer-events: auto;
}

/* Ouverture : le titre se lève, le message suit, puis l'invitation */
.mr-app.is-intro .mr-accueil-carte { animation: mr-carte 1s var(--mr-courbe) 0.3s both; }
.mr-app.is-intro .mr-accueil-surtitre { animation: mr-revele 0.9s var(--mr-courbe) 0.8s both; }
.mr-app.is-intro .mr-mot { animation: mr-mot 0.9s var(--mr-courbe) both; animation-delay: calc(var(--i) * 110ms + 1.1s); }
.mr-app.is-intro .mr-accueil-titre::after { animation: mr-trait 0.9s var(--mr-courbe) 1.7s both; }
.mr-app.is-intro .mr-accueil-message { animation: mr-revele 0.9s var(--mr-courbe) 2.1s both; }
.mr-app.is-intro .mr-accueil-actions { animation: mr-revele 0.8s var(--mr-ressort) 2.7s both; }
.mr-app.is-intro .mr-accueil-note { animation: mr-revele 0.8s var(--mr-courbe) 3s both; }

.mr-app.is-intro-fini :is(.mr-accueil-carte, .mr-accueil-surtitre, .mr-mot, .mr-accueil-message, .mr-accueil-actions, .mr-accueil-note),
.mr-app.is-intro-fini .mr-accueil-titre::after {
  animation: none;
}

/* ===========================================================================
   9. PANNEAU — feuille basse (portrait), latéral (paysage)
   =========================================================================== */
.mr-panneau {
  position: absolute;
  z-index: 28;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  max-block-size: min(60%, 34rem);
  border-width: 1px 0 0;
  border-radius: var(--mr-r-xl) var(--mr-r-xl) 0 0;
  box-shadow: 0 -14px 40px -18px rgb(20 33 61 / 0.45);
  animation: mr-feuille 380ms var(--mr-courbe) both;
}

/* Filet doré en tête, aligné sur le texte (écho des intertitres du site) */
.mr-panneau::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: 1.25rem;
  inline-size: 2.75rem;
  block-size: 4px;
  border-radius: 999px;
  background: var(--mr-or);
}

.mr-panneau-defile {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.25rem 0.875rem;
}

.mr-panneau-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem max(0.875rem, env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--mr-ligne);
}

.mr-panneau-actions .mr-bouton--principal { margin-inline-start: auto; }

/* Le contenu défile : ses blocs gardent leur taille (une vignette ne s'écrase pas) */
.mr-panneau-defile > *,
.mr-finale-carte > * {
  flex-shrink: 0;
}

@container mr (max-width: 420px) {
  .mr-panneau-actions { gap: 0.375rem; padding-inline: 1rem; }
  .mr-panneau-actions .mr-bouton { padding-inline: 0.875rem; font-size: 1rem; }
  .mr-panneau-defile { padding-inline: 1rem; }
  .mr-repere-det { display: none; }
}

.mr-panneau-etape {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 800 0.75rem/1.2 var(--mr-police-titre);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mr-ocre-texte);
}

.mr-panneau-etape-picto {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.mr-panneau-titre {
  font: 800 clamp(1.3125rem, 4cqi, 1.875rem)/1.12 var(--mr-police-titre);
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--mr-encre);
}

/* ---- Le guide : Amani et sa bulle */
.mr-guide {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.75rem;
}

.mr-guide-avatar {
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--mr-or);
  background: #f6dfa9;
  box-shadow: 0 6px 14px -8px rgb(20 33 61 / 0.6);
}

.mr-portrait {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.mr-guide-bulle {
  position: relative;
  padding: 0.625rem 0.875rem 0.75rem;
  border-radius: 4px 16px 16px 16px;
  background: var(--mr-surface-3);
}

.mr-guide-nom {
  font: 800 0.8125rem/1.2 var(--mr-police-titre);
  color: var(--mr-ocre-texte);
}

.mr-guide-texte {
  font-size: clamp(1rem, 2.6cqi, 1.0625rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- Textes du panneau */
.mr-situation,
.mr-texte,
.mr-phrase,
.mr-felicitation,
.mr-consigne,
.mr-essai-aide {
  font-size: clamp(1rem, 2.6cqi, 1.0625rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.mr-phrase {
  font: 700 clamp(1.0625rem, 2.8cqi, 1.1875rem)/1.4 var(--mr-police-titre);
}

.mr-consigne,
.mr-compte {
  color: var(--mr-encre-2);
}

.mr-compte {
  font: 700 0.875rem/1.3 var(--mr-police-titre);
}

.mr-sous-titre {
  font: 800 1rem/1.25 var(--mr-police-titre);
  color: var(--mr-ocre-texte);
}

.mr-question {
  font: 800 clamp(1.125rem, 3cqi, 1.3125rem)/1.25 var(--mr-police-titre);
  color: var(--mr-encre);
}

.mr-felicitation { font-weight: 700; }

/* ---- Vignettes illustrées */
.mr-vignette {
  overflow: hidden;
  border-radius: var(--mr-r);
  box-shadow: inset 0 0 0 1px var(--mr-verre-bord);
  animation: mr-revele 0.5s var(--mr-courbe) both;
}

.mr-vignette-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 240 / 132;
}

/* ---- Choix de réponse : l'état ne repose jamais sur la couleur seule */
.mr-choix {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mr-choix-bouton {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding: 0.625rem 0.875rem 0.625rem 0.625rem;
  border: 2px solid var(--mr-ligne-forte);
  border-radius: 14px;
  color: var(--mr-encre);
  background: var(--mr-surface-2);
  font: 600 clamp(1rem, 2.6cqi, 1.0625rem)/1.35 var(--mr-police-texte);
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--mr-rapide), background-color var(--mr-rapide), scale var(--mr-rapide) var(--mr-courbe);
}

.mr-choix-bouton:hover { border-color: var(--mr-encre); }
.mr-choix-bouton:active { scale: 0.985; }

.mr-choix-lettre {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  color: var(--mr-encre);
  background: var(--mr-surface-3);
  font: 800 0.9375rem/1 var(--mr-police-titre);
}

.mr-choix-statut {
  display: inline-flex;
  color: var(--mr-encre-2);
}

.mr-choix-picto {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.mr-choix-bouton[data-etat="essaye"] {
  border-style: dashed;
  border-color: var(--mr-ocre-texte);
  background: var(--mr-essai-fond);
}

.mr-choix-bouton[data-etat="essaye"] .mr-choix-statut { color: var(--mr-ocre-texte); }

.mr-choix-bouton[data-etat="juste"] {
  border-color: var(--mr-vert);
  background: var(--mr-juste-fond);
  font-weight: 700;
}

.mr-choix-bouton[data-etat="juste"] .mr-choix-lettre {
  color: #fff;                    /* 7,41:1 sur #256043 */
  background: #256043;
}

.mr-choix-bouton[data-etat="juste"] .mr-choix-statut { color: var(--mr-vert-texte); }

.mr-choix-bouton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

.mr-choix-bouton[aria-disabled="true"]:hover { border-color: var(--mr-ligne-forte); }

/* ---- Retour après une réponse */
.mr-retour {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: 14px;
  border-inline-start: 4px solid;
  animation: mr-revele 0.45s var(--mr-courbe) both;
}

.mr-retour--juste {
  background: var(--mr-juste-fond);
  border-color: var(--mr-vert);
}

.mr-retour--essai {
  background: var(--mr-essai-fond);
  border-color: var(--mr-or);
}

.mr-retour-titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 800 1.0625rem/1.2 var(--mr-police-titre);
}

.mr-retour--juste .mr-retour-titre { color: var(--mr-vert-texte); }
.mr-retour--essai .mr-retour-titre { color: var(--mr-ocre-texte); }

.mr-retour-picto {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}

.mr-retour-texte {
  font-size: clamp(1rem, 2.6cqi, 1.0625rem);
  line-height: 1.55;
}

.mr-reessayer { align-self: flex-start; }

/* ---- Encadrés : à retenir, bon à savoir, règle qui protège */
.mr-encadre {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  background: var(--mr-surface-2);
  box-shadow: inset 0 0 0 1px var(--mr-ligne);
}

.mr-encadre-titre {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font: 800 0.8125rem/1.2 var(--mr-police-titre);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mr-ocre-texte);
}

.mr-encadre-picto {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.mr-encadre-texte {
  font: 700 clamp(1rem, 2.6cqi, 1.0625rem)/1.5 var(--mr-police-texte);
}

.mr-encadre--savoir {
  background: var(--mr-savoir-fond);
  box-shadow: none;
}

.mr-encadre--savoir .mr-encadre-titre { color: var(--mr-encre); }
.mr-encadre--savoir .mr-encadre-texte { font-weight: 400; }

.mr-encadre--alerte {
  background: var(--mr-alerte-fond);
  box-shadow: inset 4px 0 0 #c0563b;
}

.mr-encadre--alerte .mr-encadre-titre { color: var(--mr-alerte-texte); }

/* ---- Bonjour dans d'autres langues */
.mr-bonjours {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block-start: 0.25rem;
}

.mr-bonjours-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.mr-bonjour {
  appearance: none;
  min-block-size: 2.75rem;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--mr-ligne-forte);
  border-radius: 999px;
  color: var(--mr-encre);
  background: var(--mr-surface-2);
  font: 800 0.9375rem/1 var(--mr-police-titre);
  cursor: pointer;
  touch-action: manipulation;
}

.mr-bonjour:hover { border-color: var(--mr-encre); }

.mr-bonjour[aria-current="true"] {
  border-color: var(--mr-or);
  background: var(--mr-essai-fond);
}

.mr-bonjours-info {
  min-block-size: 1.5em;
  font-weight: 700;
  color: var(--mr-encre);
}

/* ---- Messages de l'étape « demander de l'aide » */
.mr-messages {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mr-message {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.625rem;
  font-size: clamp(1rem, 2.6cqi, 1.0625rem);
  line-height: 1.45;
  color: var(--mr-encre-2);
}

.mr-message.is-nouveau {
  color: var(--mr-encre);
  font-weight: 700;
  animation: mr-revele 0.5s var(--mr-courbe) both;
}

.mr-message-num {
  display: grid;
  place-items: center;
  inline-size: 1.625rem;
  block-size: 1.625rem;
  border-radius: 50%;
  color: #14213d;
  background: var(--mr-or-clair);  /* encre #14213d : 11,82:1 */
  font: 800 0.8125rem/1 var(--mr-police-titre);
}

/* ---- Les personnes de confiance (bascule) */
.mr-confiance-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem;
}

.mr-carte-personne {
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.625rem;
  min-block-size: 3.5rem;
  padding: 0.4375rem 2rem 0.4375rem 0.4375rem;
  border: 2px solid var(--mr-ligne-forte);
  border-radius: 14px;
  color: var(--mr-encre);
  background: var(--mr-surface-2);
  font: 700 0.9375rem/1.25 var(--mr-police-texte);
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--mr-rapide), background-color var(--mr-rapide);
}

.mr-carte-personne:hover { border-color: var(--mr-encre); }

.mr-carte-visuel {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  color: var(--mr-encre);
  background: #f3e3c3;
}

.mr-carte-visuel .mr-carte-picto {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: #14213d;
}

.mr-carte-etat {
  position: absolute;
  inset-block-start: 0.375rem;
  inset-inline-end: 0.375rem;
}

.mr-carte-coche {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.mr-carte-personne[aria-pressed="true"] {
  border-color: var(--mr-vert);
  background: var(--mr-juste-fond);
}

.mr-carte-personne[aria-pressed="true"] .mr-carte-etat { color: var(--mr-vert-texte); }

.mr-carte-personne[data-refuse="true"] {
  border-style: dashed;
  border-color: var(--mr-ocre-texte);
  background: var(--mr-essai-fond);
}

.mr-carte-personne[data-refuse="true"] .mr-carte-etat { color: var(--mr-ocre-texte); }

.mr-confiance-retour {
  min-block-size: 1.5em;
  font-weight: 700;
}

.mr-aide-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
  background: var(--mr-savoir-fond);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.mr-aide-picto {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* ---- Défi : cinq feuilles, une par droit */
.mr-defi-progres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  font: 700 0.875rem/1.3 var(--mr-police-titre);
  color: var(--mr-encre-2);
}

.mr-defi-feuilles {
  display: inline-flex;
  gap: 0.25rem;
}

.mr-defi-feuille {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  color: var(--mr-encre-2);
  border: 1.5px solid var(--mr-ligne-forte);
}

.mr-defi-feuille-picto {
  inline-size: 1rem;
  block-size: 1rem;
}

.mr-defi-feuille.is-courante { border-color: var(--mr-or); box-shadow: 0 0 0 2px rgb(232 169 59 / 0.35); }

.mr-defi-feuille.is-fleurie {
  color: #fff;
  background: var(--mr-vert);
  border-color: var(--mr-vert);
}

/* Panneau latéral sur grand écran horizontal */
@container mr (min-width: 600px) and (min-aspect-ratio: 5 / 4) {
  .mr-panneau {
    inset-block: calc(var(--mr-barre-h) + 0.25rem) 0.875rem;
    inset-inline: auto 0.875rem;
    inline-size: min(27rem, 42%);
    block-size: fit-content;
    max-block-size: calc(100% - var(--mr-barre-h) - 1.125rem);
    margin-block: auto;
    border-width: 1px;
    border-radius: var(--mr-r-xl);
    box-shadow: var(--mr-ombre-haute);
    animation-name: mr-lateral;
  }

  .mr-panneau-defile { padding: 1.75rem 1.5rem 1rem; }
  .mr-panneau-actions { padding: 0.875rem 1.5rem 1.125rem; }
  .mr-panneau::before { inset-inline-start: 1.5rem; inset-block-start: 0.875rem; }
}

@container mr (max-height: 640px) {
  .mr-panneau-defile { gap: 0.5rem; padding-block-start: 1.25rem; }
  .mr-panneau-titre { font-size: clamp(1.1875rem, 5cqb, 1.5rem); }
  .mr-guide-avatar { inline-size: 2.75rem; block-size: 2.75rem; }
  .mr-choix-bouton { min-block-size: 2.875rem; padding-block: 0.4375rem; }
  .mr-panneau .mr-bouton { min-block-size: 2.75rem; padding-block: 0.5rem; }
}

/* ===========================================================================
   10. FINALE — l'arbre en fleurs, puis la carte
   =========================================================================== */
.mr-finale {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--mr-barre-h) 0.75rem max(0.75rem, env(safe-area-inset-bottom));
  pointer-events: none;
}

.mr-finale-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  inline-size: min(100%, 38rem);
  max-block-size: min(100%, max(66%, 24rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: var(--mr-r-xl);
  text-align: center;
  box-shadow: var(--mr-ombre-haute);
  pointer-events: auto;
  animation: mr-carte 0.7s var(--mr-courbe) both;
}

.mr-finale.is-attente .mr-finale-carte {
  visibility: hidden;
  animation: none;
}

.mr-finale:not(.is-attente) .mr-passer-finale { display: none; }

.mr-finale-titre {
  font: 900 clamp(1.5rem, 4.4cqi, 2.5rem)/1.04 var(--mr-police-titre);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--mr-encre);
}

.mr-finale-titre::after {
  content: "";
  display: block;
  inline-size: 4rem;
  block-size: 4px;
  margin: 0.75rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f6b4f, #e8a93b, #ffd98a);
}

.mr-finale-message {
  max-inline-size: 40ch;
  font-size: clamp(1.0625rem, 2.6cqi, 1.25rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.mr-retenir {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  inline-size: 100%;
  padding: 0.875rem 1rem;
  border-radius: var(--mr-r);
  background: var(--mr-surface-3);
  text-align: start;
}

.mr-retenir-titre {
  font: 800 0.8125rem/1.2 var(--mr-police-titre);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mr-ocre-texte);
}

.mr-retenir-liste {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mr-retenir-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.625rem;
  font: 700 clamp(1rem, 2.6cqi, 1.0625rem)/1.35 var(--mr-police-texte);
  animation: mr-revele 0.6s var(--mr-courbe) both;
  animation-delay: calc(var(--i) * 160ms + 3.2s);
}

.mr-retenir-picto {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 3px;
  border-radius: 50%;
  color: #14213d;
  background: var(--mr-or-clair);
}

.mr-revele {
  animation: mr-revele 0.8s var(--mr-courbe) both;
  animation-delay: calc(var(--etape, 0) * 600ms + 200ms);
}

.mr-finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.mr-finale-transparence {
  max-inline-size: 64ch;
  padding-block-start: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mr-encre-2);
  border-block-start: 1px solid var(--mr-ligne);
}

@container mr (min-width: 760px) and (min-aspect-ratio: 5 / 4) {
  .mr-accueil,
  .mr-finale {
    align-items: center;
    justify-content: flex-start;
    padding: calc(var(--mr-barre-h) + 0.5rem) 2.25rem 2rem;
  }

  .mr-accueil-carte {
    align-items: flex-start;
    inline-size: min(44%, 31rem);
    padding: 2.25rem 2.25rem 2rem;
    text-align: start;
  }

  .mr-accueil-titre::after,
  .mr-finale-titre::after { margin-inline: 0; }

  .mr-accueil-actions { justify-content: flex-start; }

  .mr-finale-carte {
    align-items: flex-start;
    inline-size: min(48%, 35rem);
    max-block-size: 100%;
    padding: 2rem 2rem 1.5rem;
    text-align: start;
  }

  .mr-finale-actions { justify-content: flex-start; }
}

@container mr (max-height: 560px) {
  .mr-accueil-titre { font-size: clamp(1.625rem, 8cqb, 2.5rem); }
  .mr-accueil-carte { gap: 0.5rem; padding-block: 1.125rem; }
  .mr-finale-titre { font-size: clamp(1.375rem, 6.6cqb, 2rem); }
}

@container mr (max-width: 480px) {
  .mr-finale-carte {
    gap: 0.625rem;
    max-block-size: min(100%, max(76%, 24rem));
    padding: 1.25rem 1rem 1rem;
  }

  .mr-finale-actions .mr-bouton { min-block-size: 2.875rem; padding: 0.625rem 1.125rem; font-size: 1rem; }
}

/* ===========================================================================
   11. PLEIN ÉCRAN (petits écrans) et REPRISE
   =========================================================================== */
/* Le cadre s'étire par ses bords et non par 100dvh : le réglage A−/A+ du site
   applique un zoom à <main>, qui multiplie les unités de fenêtre. */
.mr-immersif {
  position: fixed;
  inset: 0;
  inline-size: auto;
  block-size: auto;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--mr-surface);
}

.mr-immersif::backdrop { background: var(--mr-voile); }

.mr-reprise {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: linear-gradient(180deg, transparent 30%, rgb(11 22 48 / 0.45));
}

.mr-app[data-compact="true"] :is(.mr-barre, .mr-reperes, .mr-panneau, .mr-finale, .mr-accueil) {
  display: none;
}

/* ===========================================================================
   12. DIALOGUES : « À propos », « Mes découvertes »
   =========================================================================== */
.mr-dialogue {
  inline-size: min(38rem, calc(100% - 2rem));
  max-block-size: calc(100% - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--mr-verre-bord);
  border-radius: var(--mr-r-xl);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--mr-surface-2);
  box-shadow: var(--mr-ombre-haute);
}

.mr-dialogue::backdrop {
  background: var(--mr-voile);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.mr-dialogue-carte {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.75rem;
}

.mr-dialogue-titre {
  padding-block-start: 0.75rem;
  font: 800 1.5rem/1.15 var(--mr-police-titre);
  letter-spacing: -0.02em;
  border-block-start: 3px solid var(--mr-or);
}

.mr-dialogue-sous-titre {
  font: 800 1.0625rem/1.25 var(--mr-police-titre);
}

.mr-dialogue-carte p {
  font-size: 1.0625rem;
  line-height: 1.6;
}

.mr-dialogue-note,
.mr-dialogue-intro { color: var(--mr-encre-2); }

.mr-dialogue-fermer { align-self: flex-start; margin-block-start: 0.25rem; }

.mr-dialogue-croix {
  position: sticky;
  z-index: 2;
  inset-block-start: 0.75rem;
  float: inline-end;
  margin: 0.75rem 0.75rem -3.5rem 0;
  background: var(--mr-surface-3);
}

.mr-dialogue-croix .mr-bouton-libelle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mr-numeros {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mr-numeros li {
  font-size: 1rem;
  line-height: 1.5;
}

.mr-numero {
  display: inline-block;
  min-inline-size: 2.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 8px;
  color: var(--mr-encre);
  background: var(--mr-savoir-fond);
  font: 800 1rem/1.6 var(--mr-police-titre);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mr-carnet-liste {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mr-carnet-etape {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: var(--mr-r);
  background: var(--mr-surface-3);
}

.mr-carnet-titre-etape {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 800 1.0625rem/1.25 var(--mr-police-titre);
}

.mr-carnet-picto {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  color: var(--mr-vert-texte);
}

.mr-carnet-items {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mr-carnet-items li {
  position: relative;
  padding-inline-start: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

.mr-carnet-items li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 0.4375rem;
  block-size: 0.4375rem;
  border-radius: 50%;
  background: var(--mr-or);
}

.mr-carnet-a-venir { color: var(--mr-encre-2); font-style: italic; }
.mr-carnet-etape .mr-bouton { align-self: flex-start; }

/* ===========================================================================
   13. IMAGES CLÉS
   =========================================================================== */
@keyframes mr-impulsion { from { stroke-dashoffset: 107; } to { stroke-dashoffset: -7; } }
@keyframes mr-derive { from { transform: translateX(-40px); } to { transform: translateX(52px); } }
@keyframes mr-vol {
  0% { transform: translate(-280px, 24px); opacity: 0; }
  6% { opacity: 0.9; }
  46% { transform: translate(320px, -22px); opacity: 0.9; }
  54%, 100% { transform: translate(380px, -28px); opacity: 0; }
}
@keyframes mr-respire { from { transform: scale(0.94); opacity: 0.85; } to { transform: scale(1.06); opacity: 1; } }
@keyframes mr-balance { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes mr-vie { from { transform: translateY(0); } to { transform: translateY(-0.9px); } }
@keyframes mr-fete { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.4px); } }
@keyframes mr-vapeur { 0% { transform: translateY(2px); opacity: 0; } 40% { opacity: 0.7; } 100% { transform: translateY(-6px); opacity: 0; } }
@keyframes mr-flotte { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes mr-pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mr-accent { 0% { transform: none; } 45% { transform: scale(1.35); } 100% { transform: none; } }
@keyframes mr-pulsation { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes mr-mot { from { transform: translateY(0.5em); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mr-trait { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mr-revele { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mr-feuille { from { transform: translateY(100%); } to { transform: none; } }
@keyframes mr-lateral { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mr-carte { from { transform: translateY(24px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===========================================================================
   14. PRÉFÉRENCES — mouvement réduit, contraste, transparence, couleurs forcées
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :is(.mr-app, .mr-dialogue) *,
  :is(.mr-app, .mr-dialogue) *::before,
  :is(.mr-app, .mr-dialogue) *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .mr-anim,
  .mr-repere-onde,
  .mr-salut-flotte,
  .mr-racine-impulsion,
  .mr-lien-impulsion {
    animation: none !important;
  }

  .mr-racine-impulsion,
  .mr-lien-impulsion { opacity: 0 !important; }
}

@media (prefers-contrast: more) {
  :host {
    --mr-verre: var(--mr-surface-2);
    --mr-verre-bord: var(--mr-encre);
    --mr-encre-2: var(--mr-encre);
    --mr-ligne-forte: var(--mr-encre);
    --mr-verre-nuit: rgb(11 22 48 / 0.96);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :host {
    --mr-verre: var(--mr-surface-2);
    --mr-verre-nuit: rgb(11 22 48 / 0.96);
  }
}

@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .mr-progression,
  .mr-bouton-outil,
  .mr-repere,
  .mr-panneau,
  .mr-finale-carte,
  .mr-accueil-carte,
  .mr-passer-intro,
  .mr-passer-finale {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .mr-progression,
  .mr-bouton,
  .mr-bouton-outil,
  .mr-repere,
  .mr-panneau,
  .mr-accueil-carte,
  .mr-finale-carte,
  .mr-dialogue,
  .mr-choix-bouton,
  .mr-carte-personne,
  .mr-bonjour,
  .mr-retour,
  .mr-encadre {
    border: 2px solid CanvasText;
  }

  .mr-bouton--principal,
  .mr-repere-pastille,
  .mr-accueil .mr-bouton--principal {
    color: ButtonText;
    background: ButtonFace;
  }

  .mr-badge.is-fait,
  .mr-repere.is-ouvert .mr-repere-pastille,
  .mr-choix-bouton[data-etat="juste"] .mr-choix-lettre,
  .mr-defi-feuille.is-fleurie {
    color: HighlightText;
    background: Highlight;
  }

  :is(.mr-app, .mr-dialogue) :is(button, a, [tabindex]):focus-visible {
    outline-color: Highlight;
  }
}