/* =============================================================================
   Protéger, accompagner, inclure — style.css
   (nom interne : « Mission 2 — Protéger, accompagner, inclure »)
   @version 1.0.0

   Une feuille lue à deux endroits, comme celles de la série :
   1. dans la page hôte : seules les règles #mission-parcours-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), APRÈS la feuille commune de la
      série (mission-racines/style.css : jetons --mr-*, composants mr-*,
      réutilisés tels quels) : les jetons des trois engagements, la scène
      de la ville (classes mp-*) et les composants propres à ce parcours.
   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-parcours-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'accueil sur la ville */
  background: linear-gradient(180deg, #0e1a3c 0%, #22366b 36%, #4a5a93 56%, #a88aa6 71%, #efb08a 84%, #f9d6a2 93%, #e2d8c4 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;
}

/* Sur un téléphone, une carte plus haute : l'accueil y tient sans défilement */
@media (max-width: 47.99em) {
  #mission-parcours-root {
    aspect-ratio: 2 / 3;
    min-block-size: 34rem;
    max-block-size: max(34rem, calc(100svh - 6rem));
    border-radius: 22px;
  }
}

/* Tablette debout : un cadre plus haut, pour que la carte d'accueil et ses
   boutons tiennent sans défiler */
@media (min-width: 48em) and (max-width: 63.99em) {
  #mission-parcours-root {
    aspect-ratio: 4 / 3;
  }
}

[data-bs-theme="dark"] #mission-parcours-root,
#mission-parcours-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) : le parcours occupe toute la fenêtre */
#mission-parcours-root.mission-parcours-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-parcours-root .mission-parcours-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 des trois engagements
   Bleu profond (protéger), turquoise (accompagner), orange (inclure), et
   l'ambre de la vigilance (signaux d'alerte). Les variantes « vif » ne
   servent qu'au décor et aux lumières, jamais au texte. Contrastes mesurés
   sur les surfaces de la série (#fbf6ec, #f3ead9 ; #15213f, #1c2a4e).
   =========================================================================== */
:host {
  --mp-bleu: #1d4f9e;           /* 7,32:1 sur #fbf6ec ; 6,60:1 sur #f3ead9 ; blanc dessus 7,88:1 */
  --mp-turquoise: #0b6f68;      /* 5,59:1 sur #fbf6ec ; 5,04:1 sur #f3ead9 ; blanc dessus 6,02:1 */
  --mp-orange: #a5470c;         /* 5,56:1 sur #fbf6ec ; 5,01:1 sur #f3ead9 ; blanc dessus 5,99:1 */
  --mp-ambre: #8a5a00;          /* 5,50:1 sur #fbf6ec ; blanc dessus 5,93:1 */
  --mp-bleu-fond: #e8eefa;      /* bleu dessus 6,77:1 */
  --mp-turquoise-fond: #e3f4f1; /* turquoise dessus 5,30:1 ; encre 14,05:1 */
  --mp-orange-fond: #fcece0;    /* orange dessus 5,19:1 */
  --mp-ambre-fond: #fbf0dc;     /* ambre dessus 5,25:1 ; encre 14,15:1 */
  --mp-sur-aplat: #ffffff;      /* texte et pictogrammes sur les aplats ci-dessus */
  --mp-bleu-vif: #2f6fd6;
  --mp-turquoise-vif: #16b3a6;
  --mp-orange-vif: #f08a3c;
  --mp-ambre-vif: #f2b134;
  /* Sur la carte nuit de l'accueil (verre #0b1630, au pire #3b3e47 sur le ciel le plus clair) */
  --mp-bleu-nuit: #93b8ff;      /* 9,00:1 ; au pire 5,36:1 */
  --mp-turquoise-nuit: #5fe0d3; /* 11,17:1 ; au pire 6,66:1 */
  --mp-orange-nuit: #ffb074;    /* 10,00:1 ; au pire 5,96:1 */
  /* Accent de l'étape en cours (filet du panneau, étape, repères) */
  --mp-accent: var(--mr-or);
  --mp-accent-texte: var(--mr-ocre-texte);
  --mp-accent-aplat: var(--mp-bleu);
}

/* Thème sombre du site : les mêmes couleurs, éclaircies pour la nuit */
:host([data-theme="dark"]) {
  --mp-bleu: #93b8ff;           /* 7,98:1 sur #15213f ; 7,07:1 sur #1c2a4e */
  --mp-turquoise: #5fe0d3;      /* 8,78:1 sur #1c2a4e */
  --mp-orange: #ffb074;         /* 7,86:1 sur #1c2a4e */
  --mp-ambre: #f2c14e;          /* 8,40:1 sur #1c2a4e */
  --mp-bleu-fond: #1b2b52;      /* bleu dessus 6,96:1 ; encre 11,52:1 */
  --mp-turquoise-fond: #123536; /* turquoise dessus 8,24:1 ; encre 10,98:1 */
  --mp-orange-fond: #33241a;    /* orange dessus 8,32:1 */
  --mp-ambre-fond: #2e2412;     /* ambre dessus 9,09:1 ; encre 12,66:1 */
  --mp-sur-aplat: #14213d;      /* encre nuit sur les aplats clairs : ≥ 8,02:1 */
}

/* Hors du monde dessiné (vue très large d'un téléphone), le fond prolonge le sol */
.mp-app { background: #cbb894; }

/* L'accent suit l'engagement de l'étape en cours */
.mp-app[data-etape="proteger"] { --mp-accent: var(--mp-bleu-vif); --mp-accent-texte: var(--mp-bleu); --mp-accent-aplat: var(--mp-bleu); }
.mp-app[data-etape="alerte"] { --mp-accent: var(--mp-ambre-vif); --mp-accent-texte: var(--mp-ambre); --mp-accent-aplat: var(--mp-ambre); }
.mp-app[data-etape="accompagner"] { --mp-accent: var(--mp-turquoise-vif); --mp-accent-texte: var(--mp-turquoise); --mp-accent-aplat: var(--mp-turquoise); }
.mp-app[data-etape="inclure"] { --mp-accent: var(--mp-orange-vif); --mp-accent-texte: var(--mp-orange); --mp-accent-aplat: var(--mp-orange); }

/* ===========================================================================
   3. SCÈNE — la ville, ses lumières, ses lieux
   =========================================================================== */
/* ---- Lumière du ciel : l'aube reste dessous, les autres se posent dessus */
.mp-ciel-soir,
.mp-ciel-jour,
.mp-ciel-or {
  opacity: 0;
  transition: opacity 2.4s ease;
}

.mp-scene[data-ciel="soir"] .mp-ciel-soir,
.mp-scene[data-ciel="jour"] .mp-ciel-jour,
.mp-scene[data-ciel="or"] .mp-ciel-or {
  opacity: 1;
}

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

.mp-scene[data-intro="true"] .mp-soleil { transform: translateY(32px); }
.mp-scene[data-ciel="soir"] .mp-soleil { transform: translateY(260px); }
.mp-scene[data-ciel="jour"] .mp-soleil { transform: translateY(-300px); }
.mp-scene[data-ciel="or"] .mp-soleil { transform: translateY(-80px); }

/* À la finale, le soleil du ciel s'efface derrière celui où convergent les rayons */
.mp-scene[data-finale="true"] .mp-soleil { opacity: 0; transition: transform 3.4s var(--mr-courbe), opacity 1.6s ease 1.2s; }

/* ---- Le soir : la ville s'assombrit, ses fenêtres et ses lampadaires s'allument */
.mp-ombre-soir,
.mp-voile-soir,
.mp-fenetres-ville,
.mp-vitre-nuit,
.mp-lampe-lueur,
.mp-lampe-ampoule,
.mp-arret-lueur,
.mp-guirlande {
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease;
}

.mp-scene[data-ciel="aube"] .mp-ombre-soir { opacity: 0.14; }
.mp-scene[data-ciel="soir"] .mp-ombre-soir { opacity: 0.32; }
.mp-scene[data-ciel="soir"] .mp-ombre-sol { opacity: 0.34; }
.mp-scene[data-ciel="soir"] .mp-fenetres-rangee { opacity: 1; }
.mp-scene[data-ciel="aube"] .mp-voile-soir { opacity: 0.18; }
.mp-scene[data-ciel="soir"] .mp-voile-soir { opacity: 0.4; }
.mp-scene[data-ciel="aube"] .mp-fenetres-ville { opacity: 0.5; }
.mp-scene[data-ciel="soir"] .mp-fenetres-ville { opacity: 0.85; }
.mp-scene[data-ciel="aube"] .mp-vitre-nuit { opacity: 0.45; }
.mp-scene[data-ciel="soir"] .mp-vitre-nuit { opacity: 0.8; }
.mp-scene:is([data-ciel="soir"], [data-ciel="aube"]) :is(.mp-lampe-lueur, .mp-lampe-ampoule) { opacity: 0.9; }
.mp-scene[data-ciel="soir"] .mp-arret-lueur { opacity: 0.55; }
.mp-scene:is([data-ciel="soir"], [data-ciel="or"]) .mp-guirlande,
.mp-lieu[data-lieu="communaute"]:is([data-etat="apres"], [data-etat="projets"]) .mp-guirlande { opacity: 1; }

/* ---- Le chemin pressenti : des points dorés qui avancent doucement */
.mp-chemin-pointille {
  opacity: 0;
  transition: opacity 1.6s ease 0.4s;
}

.mp-scene[data-intro="true"] .mp-chemin-pointille {
  opacity: 0.9;
  animation: mp-avance 7s linear infinite;
}

.mp-scene[data-ciel="jour"] .mp-chemin-pointille { opacity: 0.55; }

/* ---- Les trois lumières du chemin */
.mp-segment-halo {
  opacity: 0;
  transition: opacity 1.4s ease 0.3s;
}

.mp-segment[data-allume="true"] .mp-segment-halo { opacity: 0.38; }

.mp-segment-fil {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  /* Éteint, le trait est caché : son bout arrondi laisserait un point */
  opacity: 0;
  transition: stroke-dashoffset 2.3s var(--mr-courbe), opacity 0.2s ease;
}

.mp-segment[data-allume="true"] .mp-segment-fil { stroke-dashoffset: 0; opacity: 1; }
.mp-segment-fil--loin { transition-delay: 1.6s; }

/* Le turquoise : des points lumineux qui s'allument l'un après l'autre */
.mp-segment-point {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity 0.4s ease, transform 0.5s var(--mr-ressort);
  transition-delay: calc(var(--i, 0) * 120ms);
}

.mp-segment[data-allume="true"] .mp-segment-point {
  opacity: 1;
  transform: none;
}

.mp-segment-impulsion { opacity: 0; }

.mp-segment[data-allume="true"] .mp-segment-impulsion {
  opacity: 0.9;
  animation: mr-impulsion 3.2s linear 2.4s infinite;
}

/* La lumière qui parcourt le chemin pendant les transitions */
.mp-comete {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mp-comete[data-visible="true"] { opacity: 1; }

/* ---- Malik : une seule figure visible, celle du lieu où il se trouve */
.mp-malik {
  opacity: 0;
  transition: opacity var(--mr-lent) ease;
}

.mp-scene[data-malik="arret"] .mp-malik[data-malik="arret"],
.mp-scene[data-malik="abri"] .mp-malik[data-malik="abri"],
.mp-scene[data-malik="reseau"] .mp-malik[data-malik="reseau"],
.mp-scene[data-malik="communaute"] .mp-malik[data-malik="communaute"] {
  opacity: 1;
}

/* ---- Les moments d'un lieu (un seul visible à la fois) */
.mp-etat {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mr-lent) ease, visibility 0s linear var(--mr-lent);
}

.mp-lieu[data-etat="accueil"] .mp-etat-accueil,
.mp-lieu[data-etat="proteger"] .mp-etat-proteger,
.mp-lieu[data-etat="alerte"] .mp-etat-alerte {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--mr-lent) ease, visibility 0s;
}

/* ---- Arrêt de tram : la personne et les signaux d'alerte */
.mp-inconnu { transition: opacity 1.2s ease; }
.mp-lieu[data-alerte-finie="true"] .mp-inconnu { opacity: 0.3; }

.mp-signal {
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity 0.35s ease, transform 0.5s var(--mr-ressort);
}

.mp-signal[data-visible="true"] {
  opacity: 1;
  transform: none;
}

/* ---- Lieu d'accueil : les lumières et les personnes découvertes */
.mp-lumiere-rez,
.mp-lumiere-etage,
.mp-lumiere-porte,
.mp-lumiere-applique,
.mp-element,
.mp-sac-etage,
.mp-lieu-lueur {
  opacity: 0;
  transition: opacity 1s ease;
}

.mp-lieu[data-rez="true"] .mp-lumiere-rez,
.mp-lieu[data-lieu-vu="true"] .mp-lumiere-etage,
.mp-lieu:is([data-ecoute-vu="true"], [data-etat="apres"]) .mp-lumiere-porte,
.mp-lieu:is([data-lieu-vu="true"], [data-ecoute-vu="true"]) .mp-lumiere-applique,
.mp-lieu[data-pro-vu="true"] .mp-element-pro,
.mp-lieu[data-aide-vu="true"] .mp-element-aide,
.mp-lieu[data-ecoute-vu="true"] .mp-element-ecoute,
.mp-lieu[data-etat="apres"] .mp-sac-etage {
  opacity: 1;
}

.mp-lieu[data-lieu="abri"][data-etat="apres"] .mp-element-ecoute.mp-avant { opacity: 0; }

.mp-lieu[data-lieu="abri"] .mp-apres {
  opacity: 0;
  transition: opacity var(--mr-lent) ease;
}

.mp-lieu[data-lieu="abri"][data-etat="apres"] .mp-apres { opacity: 1; }
.mp-lieu[data-lieu="abri"][data-etat="apres"] .mp-lieu-lueur { opacity: 0.45; }

/* ---- Place des services : les besoins autour de Malik, puis le réseau */
.mp-malik-reseau-accueil,
.mp-malik-reseau-suite {
  transition: opacity var(--mr-lent) ease;
}

.mp-lieu[data-lieu="reseau"]:not([data-etat="accueil"]) .mp-malik-reseau-accueil,
.mp-lieu[data-lieu="reseau"][data-etat="accueil"] .mp-malik-reseau-suite {
  opacity: 0;
}

.mp-besoin {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: opacity 0.4s ease, transform 0.55s var(--mr-ressort);
}

.mp-besoin[data-visible="true"] {
  opacity: 1;
  transform: none;
}

.mp-noeuds,
.mp-liens {
  opacity: 0;
  transition: opacity var(--mr-lent) ease;
}

.mp-lieu[data-lieu="reseau"][data-etat="carte"] :is(.mp-noeuds, .mp-liens) { opacity: 1; }

.mp-noeud-plein,
.mp-noeud-picto-allume,
.mp-noeud-halo {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.mp-noeud[data-actif="true"] :is(.mp-noeud-plein, .mp-noeud-picto-allume) { opacity: 1; }
.mp-noeud[data-actif="true"] .mp-noeud-halo { opacity: 0.8; }
.mp-noeud[data-actif="true"] .mp-noeud-picto-eteint { opacity: 0; }

.mp-lien-fil {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: stroke-dashoffset 1s var(--mr-courbe), opacity 0.2s ease;
}

.mp-lien[data-actif="true"] .mp-lien-fil { stroke-dashoffset: 0; opacity: 1; }

.mp-lien-halo,
.mp-lien-impulsion {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.mp-lien[data-actif="true"] .mp-lien-halo { opacity: 0.35; }
.mp-lien[data-actif="true"] .mp-lien-attente { opacity: 0; }

.mp-lien[data-actif="true"] .mp-lien-impulsion {
  opacity: 0.9;
  animation: mr-impulsion 2.8s linear 1s infinite;
}

.mp-lieu[data-lieu="reseau"][data-etat="carte"] .mp-lieu-lueur { opacity: 0.4; }

/* ---- Espace collectif : la situation, puis la réponse inclusive, puis les projets */
.mp-lieu[data-lieu="communaute"] :is(.mp-avant, .mp-apres) {
  transition: opacity var(--mr-lent) ease;
}

.mp-lieu[data-lieu="communaute"] .mp-apres,
.mp-lieu[data-lieu="communaute"]:is([data-etat="apres"], [data-etat="projets"]) .mp-avant {
  opacity: 0;
}

.mp-lieu[data-lieu="communaute"]:is([data-etat="apres"], [data-etat="projets"]) .mp-apres { opacity: 1; }

/* Pendant les projets, Malik quitte la scène de théâtre pour l'activité choisie */
.mp-scene .mp-lieu[data-lieu="communaute"][data-etat="projets"] .mp-apres .mp-malik { opacity: 0; }
.mp-lieu[data-lieu="communaute"]:is([data-etat="apres"], [data-etat="projets"]) .mp-lieu-lueur { opacity: 0.4; }

.mp-fresque {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.mp-lieu[data-fresque="true"] .mp-fresque { opacity: 1; }

.mp-projet-lumiere,
.mp-projet-malik,
.mp-projet-halo,
.mp-ampoule-lueur {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.mp-projet[data-vu="true"] .mp-projet-lumiere,
.mp-projet[data-courant="true"] .mp-projet-malik,
.mp-projet[data-courant="true"] .mp-ampoule-lueur { opacity: 1; }
.mp-projet[data-courant="true"] .mp-projet-halo { opacity: 0.75; }
.mp-scene[data-finale="true"] .mp-projet[data-vu="true"] .mp-projet-halo { opacity: 0.5; }

/* ---- Finale : chaque lieu rayonne, trois rayons convergent vers le soleil */
.mp-scene[data-finale="true"] .mp-lieu-lueur { opacity: 0.7; }

.mp-rayon-fil {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: stroke-dashoffset 2.4s var(--mr-courbe), opacity 0.2s ease;
}

.mp-rayon[data-rayon="turquoise"] .mp-rayon-fil { transition-delay: 0.3s; }
.mp-rayon[data-rayon="orange"] .mp-rayon-fil { transition-delay: 0.6s; }
.mp-convergence[data-allume="true"] .mp-rayon-fil { stroke-dashoffset: 0; opacity: 1; }

.mp-rayon-halo,
.mp-rayon-impulsion,
.mp-convergence-coeur,
.mp-etincelle {
  opacity: 0;
}

.mp-convergence[data-allume="true"] .mp-rayon-halo {
  opacity: 0.32;
  transition: opacity 1.6s ease 1s;
}

.mp-convergence[data-allume="true"] .mp-convergence-coeur {
  opacity: 1;
  transition: opacity 2s ease 1.6s;
}

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

.mp-etincelle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.mp-convergence[data-allume="true"] .mp-etincelle {
  animation: mp-etincelle 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 180ms + 2s);
}

/* ---- Animations en boucle : pause (bouton), hors écran, onglet caché */
.mr-app[data-pause="true"] :is(.mp-chemin-pointille, .mp-segment-impulsion, .mp-lien-impulsion, .mp-rayon-impulsion, .mp-etincelle),
.mr-app[data-suspendu="true"] :is(.mp-chemin-pointille, .mp-segment-impulsion, .mp-lien-impulsion, .mp-rayon-impulsion, .mp-etincelle) {
  animation-play-state: paused;
}

/* ===========================================================================
   4. INTERFACE — les composants de la série, aux couleurs du parcours
   =========================================================================== */
/* La progression se montre dès l'accueil : les quatre étapes du parcours */
.mp-app[data-ecran="accueil"] .mr-progression {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.mp-badge.is-courant {
  border-color: var(--mp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-accent) 35%, transparent);
}

.mp-badge.is-fait {
  color: var(--mp-sur-aplat);
}

.mp-badge[data-couleur="bleu"].is-fait { background: var(--mp-bleu); border-color: var(--mp-bleu); }
.mp-badge[data-couleur="ambre"].is-fait { background: var(--mp-ambre); border-color: var(--mp-ambre); }
.mp-badge[data-couleur="turquoise"].is-fait { background: var(--mp-turquoise); border-color: var(--mp-turquoise); }
.mp-badge[data-couleur="orange"].is-fait { background: var(--mp-orange); border-color: var(--mp-orange); }

/* Le panneau porte la couleur de l'engagement en cours */
.mp-app .mr-panneau::before { background: var(--mp-accent); }
.mp-app .mr-panneau-etape { color: var(--mp-accent-texte); }
.mp-app .mr-sous-titre.mp-sous-titre { color: var(--mp-accent-texte); }

.mp-note {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--mr-encre-2);
}

/* ---- Accueil : trois mots, trois couleurs */
.mp-titre-engagements .mr-mot[data-couleur="bleu"] { color: var(--mp-bleu-nuit); }
.mp-titre-engagements .mr-mot[data-couleur="turquoise"] { color: var(--mp-turquoise-nuit); }
.mp-titre-engagements .mr-mot[data-couleur="orange"] { color: var(--mp-orange-nuit); }

.mp-accueil .mr-accueil-titre {
  font-size: clamp(1.75rem, 5.4cqi, 3.25rem);
  line-height: 1;
}

.mp-accueil .mr-accueil-titre::after,
.mp-finale .mr-finale-titre::after {
  background: linear-gradient(90deg, var(--mp-bleu-vif), var(--mp-turquoise-vif), var(--mp-orange-vif));
}

.mp-accueil-sous-titre {
  font: 800 clamp(1.0625rem, 2.8cqi, 1.375rem)/1.25 var(--mr-police-titre);
  color: #fff4dc;               /* 16,41:1 sur la carte nuit */
  text-wrap: balance;
}

.mp-accueil .mp-accueil-message {
  max-inline-size: 38ch;
  font-size: clamp(0.9375rem, 2.2cqi, 1.125rem);
  line-height: 1.5;
}

.mp-app.is-intro .mp-accueil-sous-titre { animation: mr-revele 0.9s var(--mr-courbe) 1.9s both; }
.mp-app.is-intro-fini .mp-accueil-sous-titre { animation: none; }

.mp-accueil .mr-accueil-carte {
  max-block-size: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Grand écran horizontal : la carte devient un bandeau bas, à deux colonnes
   (le titre à gauche, le texte à droite) ; la ville occupe toute la largeur
   au-dessus, comme un plan d'ouverture. */
@container mr (min-width: 700px) and (min-aspect-ratio: 5 / 4) {
  .mp-accueil {
    align-items: flex-end;
    justify-content: center;
    padding: calc(var(--mr-barre-h) + 0.5rem) 1.5rem 1.5rem;
  }

  .mp-accueil .mr-accueil-carte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    align-items: start;
    column-gap: 2.25rem;
    row-gap: 0.625rem;
    inline-size: min(100%, 68rem);
    padding: 1.75rem 2rem 1.5rem;
    text-align: start;
  }

  .mp-accueil .mr-accueil-carte > * { grid-column: 1; }
  .mp-accueil :is(.mr-accueil-surtitre, .mr-accueil-titre) { grid-column: 1 / -1; }

  .mp-accueil .mr-accueil-titre {
    font-size: clamp(1.75rem, 3.4cqi, 2.75rem);
    text-wrap: balance;
  }

  .mp-accueil .mp-accueil-message {
    grid-column: 2;
    grid-row: 3 / span 2;
    align-self: start;
    max-inline-size: none;
  }

  .mp-accueil .mr-accueil-note { grid-column: 2; grid-row: 5; align-self: end; }
  .mp-accueil .mr-accueil-actions { justify-content: flex-start; }
  .mp-accueil .mr-accueil-titre::after { margin-inline: 0; }
}

/* Téléphone : une carte plus compacte, pour laisser voir la ville et garder
   le bouton sur une ligne */
@container mr (max-width: 440px) {
  .mp-accueil .mr-accueil-carte {
    gap: 0.5rem;
    padding: 1.125rem 1rem 1rem;
  }

  .mp-accueil .mr-accueil-titre { font-size: clamp(1.5rem, 7.4cqi, 1.875rem); }
  .mp-accueil .mr-accueil-titre::after { margin-block-start: 0.625rem; }
  .mp-accueil-sous-titre { font-size: 1.0625rem; }

  .mp-accueil .mp-accueil-message {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .mp-accueil .mr-bouton--grand {
    padding-inline: 1.25rem;
    font-size: 1.0625rem;
  }
}

/* ---- Repères collés à la scène : la couleur de leur engagement */
.mp-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);
}

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

.mp-reperes .mr-repere-pastille {
  color: var(--mp-sur-aplat);
  background: var(--mp-accent-aplat);
}

.mp-reperes .mr-repere:not(.is-ouvert):hover .mr-repere-pastille {
  background: color-mix(in srgb, var(--mp-accent-aplat) 85%, white);
}

.mp-reperes .mr-repere-onde { border-color: var(--mp-accent); }

/* ---- Notions : trois mots, avec prudence */
.mp-notions-intro { font-weight: 700; }

.mp-notions-liste {
  display: grid;
  gap: 0.375rem 0.75rem;
  margin: 0.25rem 0 0;
}

.mp-notions-liste dt {
  font: 800 1rem/1.3 var(--mr-police-titre);
  color: var(--mr-encre);
}

.mp-notions-liste dd {
  margin: 0 0 0.375rem;
  font-size: clamp(1rem, 2.6cqi, 1.0625rem);
  line-height: 1.5;
}

.mp-notions-nuance {
  font-style: italic;
  color: var(--mr-encre-2);
}

/* ---- Signaux d'alerte : chaque proposition se révèle ; jamais la couleur seule */
.mp-signaux-liste {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.mp-signal-bouton {
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.625rem;
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.625rem 0.75rem;
  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.4 var(--mr-police-texte);
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color var(--mr-rapide), background-color var(--mr-rapide);
}

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

.mp-signal-icone {
  display: grid;
  place-items: center;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  border-radius: 50%;
  color: var(--mr-encre-2);
  background: var(--mr-surface-3);
}

.mp-signal-picto {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.mp-signal-corps {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mp-signal-verdict {
  font: 800 0.875rem/1.3 var(--mr-police-titre);
}

.mp-signal-bouton[data-etat="signal"] {
  border-color: var(--mp-ambre);
  background: var(--mp-ambre-fond);
}

.mp-signal-bouton[data-etat="signal"] .mp-signal-icone {
  color: var(--mp-sur-aplat);
  background: var(--mp-ambre);
}

.mp-signal-bouton[data-etat="signal"] .mp-signal-verdict { color: var(--mp-ambre); }

.mp-signal-bouton[data-etat="neutre"] {
  border-style: dashed;
  border-color: var(--mr-vert);
  background: var(--mr-juste-fond);
}

.mp-signal-bouton[data-etat="neutre"] .mp-signal-icone {
  color: #fff;                  /* 7,41:1 sur #256043 */
  background: #256043;
}

.mp-signal-bouton[data-etat="neutre"] .mp-signal-verdict { color: var(--mr-vert-texte); }

.mp-signal-retour {
  min-block-size: 1.5em;
  padding-inline-start: 0.75rem;
  border-inline-start: 4px solid transparent;
  font-weight: 700;
}

.mp-signal-retour[data-etat="signal"] { border-color: var(--mp-ambre-vif); }
.mp-signal-retour[data-etat="neutre"] { border-color: var(--mr-vert); }

/* ---- Grilles de cartes (besoins, projets) */
.mp-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.5rem;
}

.mp-carte .mp-carte-visuel {
  color: var(--mp-accent-texte);
  background: color-mix(in srgb, var(--mp-accent) 16%, var(--mr-surface-2));
}

.mp-carte .mp-carte-visuel .mr-carte-picto { color: inherit; }

.mp-carte[aria-pressed="true"],
.mp-carte[data-vu="true"] {
  border-color: var(--mp-accent-aplat);
  background: color-mix(in srgb, var(--mp-accent) 12%, var(--mr-surface-2));
}

.mp-carte[aria-pressed="true"] .mr-carte-etat,
.mp-carte[data-vu="true"] .mr-carte-etat { color: var(--mp-accent-texte); }

.mp-carte[aria-pressed="true"] .mp-carte-visuel,
.mp-carte[data-vu="true"] .mp-carte-visuel {
  color: var(--mp-sur-aplat);
  background: var(--mp-accent-aplat);
}

.mp-carte[aria-current="true"] {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-accent) 40%, transparent);
}

/* ---- Les questions de Malik */
.mp-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mp-question-bulle {
  padding: 0.5rem 0.875rem;
  border-radius: 16px 16px 16px 4px;
  color: var(--mr-encre);
  background: var(--mp-turquoise-fond);
  font: 700 0.9375rem/1.35 var(--mr-police-titre);
}

/* ---- Finale : trois couleurs, une signature */
.mp-finale .mp-titre-engagements .mr-mot[data-couleur="bleu"] { color: var(--mp-bleu); }
.mp-finale .mp-titre-engagements .mr-mot[data-couleur="turquoise"] { color: var(--mp-turquoise); }
.mp-finale .mp-titre-engagements .mr-mot[data-couleur="orange"] { color: var(--mp-orange); }

.mp-finale-message2 {
  font-size: clamp(1rem, 2.4cqi, 1.125rem);
  color: var(--mr-encre-2);
}

.mp-finale .mr-retenir-item[data-couleur="bleu"] .mr-retenir-picto { color: var(--mp-sur-aplat); background: var(--mp-bleu); }
.mp-finale .mr-retenir-item[data-couleur="turquoise"] .mr-retenir-picto { color: var(--mp-sur-aplat); background: var(--mp-turquoise); }
.mp-finale .mr-retenir-item[data-couleur="orange"] .mr-retenir-picto { color: var(--mp-sur-aplat); background: var(--mp-orange); }

.mp-signature {
  max-inline-size: 44ch;
  padding-block: 0.25rem;
  font: 800 clamp(1.0625rem, 2.6cqi, 1.25rem)/1.35 var(--mr-police-titre);
  font-style: italic;
  text-wrap: balance;
  color: var(--mr-encre);
}

/* ---- « Revoir le parcours » : chaque étape à sa couleur */
.mp-carnet-etape[data-couleur="bleu"] .mr-carnet-picto { color: var(--mp-bleu); }
.mp-carnet-etape[data-couleur="ambre"] .mr-carnet-picto { color: var(--mp-ambre); }
.mp-carnet-etape[data-couleur="turquoise"] .mr-carnet-picto { color: var(--mp-turquoise); }
.mp-carnet-etape[data-couleur="orange"] .mr-carnet-picto { color: var(--mp-orange); }

/* ===========================================================================
   5. IMAGES CLÉS ET PRÉFÉRENCES
   =========================================================================== */
@keyframes mp-avance { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -40.2; } }
@keyframes mp-etincelle {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 0.95; }
  100% { transform: translateY(-170px) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-chemin-pointille,
  .mp-segment-impulsion,
  .mp-lien-impulsion,
  .mp-rayon-impulsion,
  .mp-etincelle {
    animation: none !important;
  }

  .mp-segment-impulsion,
  .mp-lien-impulsion,
  .mp-rayon-impulsion,
  .mp-etincelle { opacity: 0 !important; }

  /* La règle de la série change chaque transition en 1 ms, celle de la
     visibilité comprise : les repères seraient encore masqués à l'instant où
     ils reçoivent le focus. Ils apparaissent donc sans transition. */
  .mp-reperes { transition: none !important; }
}

@media (forced-colors: active) {
  .mp-signal-bouton,
  .mp-question-bulle { border: 2px solid CanvasText; }

  .mp-badge.is-fait,
  .mp-reperes .mr-repere-pastille,
  .mp-signal-bouton[data-etat] .mp-signal-icone,
  .mp-carte[aria-pressed="true"] .mp-carte-visuel,
  .mp-carte[data-vu="true"] .mp-carte-visuel {
    color: HighlightText;
    background: Highlight;
  }

  .mp-signal-bouton:focus-visible { outline-color: Highlight; }
}