/* ══════════════════════════════════════════════════════════════
   PICBOIS47 — PAGE MUNICIPALITÉS (reconstruite le 23 sept. 2026).
   Chargée par cette page seulement. precision47.css donne la base et
   les révélations [data-rv] ; pages.css donne l'en-tête de page, la
   bande noire, l'appel compact et le pied. Ici : un geste par écran.

   Le même mouvement raconté six fois : une demande dispersée devient un
   parcours documenté, qu'une personne reprend au bon moment.
   Filets de 1 px, carrés et joints — aucun rayon, aucun dégradé, aucune
   donnée inventée. Un seul rouge par écran, toujours sur une décision.
   ══════════════════════════════════════════════════════════════ */

/* Géométrie de la grille à douze colonnes, réutilisée par les repères
   posés en absolu (l'axe de la fiche technique). */
.mu-zone, .mu-hero { --g: var(--sp-3); --c: calc((100% - 11 * var(--g)) / 12); }

.mu-zone { padding: var(--sp-8) 0; }
.mu-zone + .mu-zone:not(.bande-noire) { border-top: 1px solid var(--pg-filet); }
/* `>` et non un descendant quelconque : la piste du parcours porte son
   propre cadre, qui doit rester un bloc et non devenir une cellule. */
.mu-zone > .cadre-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); row-gap: var(--sp-5); align-items: start; }

.mu-tete { grid-column: 1 / span 6; display: grid; gap: var(--sp-3); align-content: start; }
.mu-tete-large { grid-column: 1 / span 8; }
.mu-tete h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.mu-intro { max-width: 52ch; font-size: var(--t-lead); line-height: 1.55; }
.mu-tete-noire .mu-intro { color: var(--text); }

.mu-conclusion {
  grid-column: 1 / span 8; margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--pg-filet);
  max-width: 58ch; font-size: var(--t-lead); line-height: 1.5; color: var(--pg-encre);
}


/* ═══ ÉCRAN 1 — LE HÉROS ═══════════════════════════════════════
   Le titre domine les colonnes 1 à 8 ; le schéma opérationnel occupe
   9 à 12 et déborde vers la droite, comme la fenêtre de Services. */

.mu-hero { padding: var(--sp-7) 0 var(--sp-5); overflow: hidden; }
.mu-hero .cadre-section { align-items: start; row-gap: 0; }
.mu-hero .label:first-child { grid-row: 1; }
.mu-hero .fil-entree { grid-row: 2; margin-top: var(--sp-2); }
.mu-hero h1 { grid-column: 1 / span 7; grid-row: 3; margin-top: var(--sp-4); font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.02; letter-spacing: -0.04em; max-width: 16ch; }
.mu-hero .page-chapo { grid-column: 1 / span 6; grid-row: 4; margin-top: var(--sp-4); max-width: 44ch; }
.mu-hero-action { grid-column: 1 / span 7; grid-row: 5; margin-top: var(--sp-5); }
.mu-reassure { grid-column: 1 / span 8; grid-row: 6; margin-top: var(--sp-3); font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.08em; color: var(--pg-sourdine); }

/* L'action reprend mot pour mot le langage de `appel-action` : mono sur
   aplat d'encre, joint rouge, repères de coin. Il vit ici parce que le
   composant partagé est borné à `.appel-compact`. */
.mu-hero-action {
  position: relative; justify-self: start;
  display: inline-flex; align-items: center; gap: 0.6em; min-height: 56px; padding: 0 26px 0 22px;
  font-family: var(--f-mono); font-size: 1.0625rem; font-weight: 500;
  color: var(--pg-ivoire); background: var(--pg-encre);
  transition: gap var(--dur) var(--ease);
}
.mu-hero-action i { width: 8px; height: 8px; background: var(--red); }
.mu-hero-action::before, .mu-hero-action::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.mu-hero-action::before { left: -7px; top: -7px; border-left: 1px solid var(--pg-encre); border-top: 1px solid var(--pg-encre); }
.mu-hero-action::after { right: -7px; bottom: -7px; border-right: 1px solid var(--pg-encre); border-bottom: 1px solid var(--pg-encre); }
.mu-hero-action:hover { gap: 1em; }
.mu-hero-action:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }

/* Le schéma occupe la droite de la grille et déborde jusqu'au bord de la
   page — le geste hors marge du langage Précision 47. */
.mu-schema { grid-column: 8 / -1; grid-row: 3 / span 4; margin: 0 calc(-1 * var(--marge-cadre)) 0 0; align-self: center; justify-self: end; width: calc(100% + var(--marge-cadre)); }
.mu-schema svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Deux compositions du même réseau : la large sur ordinateur, la haute sur
   téléphone. Rien n'est réduit — la seconde est redessinée. */
.mu-schema .mu-schema-haut { display: none; }
.mu-demande, .mu-demande-v { fill: var(--pg-encre); }

/* Le vocabulaire graphique : filets, aplats, un joint rouge. */
.mu-trait { fill: none; stroke: var(--pg-encre); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mu-plein { fill: var(--pg-encre); }
.mu-joint { fill: var(--red); }
.mu-mot { font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--pg-encre); }
.mu-mot-centre { text-anchor: middle; }
.mu-legende { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--pg-sourdine); }
.mu-demande { fill: var(--pg-encre); }

/* Le mouvement du héros : les entrées arrivent par la gauche, la zone de
   traitement se pose, le joint rouge apparaît, les services sortent à
   droite — puis une demande traverse et s'arrête sur la décision. */
html[data-motion="on"] .mu-entrees,
html[data-motion="on"] .mu-traitement,
html[data-motion="on"] .mu-sorties,
html[data-motion="on"] .mu-axe,
html[data-motion="on"] .mu-decision,
html[data-motion="on"] .mu-legende { opacity: 0; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
html[data-motion="on"] .mu-entrees { transform: translateX(-18px); transition-delay: 260ms; }
html[data-motion="on"] .mu-axe { transition-delay: 520ms; }
html[data-motion="on"] .mu-traitement { transform: translateY(12px); transition-delay: 620ms; }
html[data-motion="on"] .mu-decision { transition-delay: 980ms; }
html[data-motion="on"] .mu-sorties { transform: translateX(18px); transition-delay: 1120ms; }
html[data-motion="on"] .mu-legende { transition-delay: 1400ms; }
html[data-motion="on"] .mu-joint { transform: scale(0); transform-origin: 425px 126px; transition: transform 380ms var(--ease-spring) 1100ms; }
html[data-motion="on"] .mu-demande, html[data-motion="on"] .mu-demande-v { opacity: 0; }
html[data-motion="on"].pret .mu-entrees,
html[data-motion="on"].pret .mu-traitement,
html[data-motion="on"].pret .mu-sorties,
html[data-motion="on"].pret .mu-axe,
html[data-motion="on"].pret .mu-decision,
html[data-motion="on"].pret .mu-legende { opacity: 1; transform: none; }
html[data-motion="on"].pret .mu-joint { transform: none; }
html[data-motion="on"].pret .mu-demande { animation: mu-voyage 4600ms var(--ease-out) 1500ms forwards; }
@keyframes mu-voyage-haut {
  0%   { opacity: 0; transform: translateY(0); }
  6%   { opacity: 1; transform: translateY(10px); }
  26%  { transform: translateY(68px); }
  46%  { transform: translateY(160px); }
  58%  { transform: translateY(276px); }
  70%  { transform: translateY(276px); }   /* l'arrêt : une personne décide */
  92%  { opacity: 1; transform: translateY(500px); }
  100% { opacity: 0; transform: translateY(500px); }
}
@keyframes mu-voyage {
  0%   { opacity: 0; transform: translateX(0); }
  6%   { opacity: 1; transform: translateX(12px); }
  26%  { transform: translateX(160px); }
  46%  { transform: translateX(290px); }
  58%  { transform: translateX(404px); }
  70%  { transform: translateX(404px); }   /* l'arrêt : une personne décide */
  92%  { opacity: 1; transform: translateX(520px); }
  100% { opacity: 0; transform: translateX(520px); }
}


/* ═══ ÉCRAN 2 — CE QU'ON PEUT AMÉLIORER ════════════════════════
   Ni trois cartes, ni trois icônes : un seul filet traverse la largeur
   et les trois interventions y sont suspendues par des descentes de
   longueurs différentes. La composition dit « trois branches d'un même
   parcours » avant qu'un mot soit lu. */

.mu-interventions { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); padding-top: var(--sp-6); align-items: start; }
.mu-fil-continu { position: absolute; left: 0; right: 0; top: var(--sp-6); height: 1px; background: var(--pg-encre); transform-origin: left center; }
.mu-int { position: relative; display: grid; gap: var(--sp-2); align-content: start; }
.mu-int-1 { grid-column: 1 / span 4; padding-top: 34px; }
.mu-int-2 { grid-column: 5 / span 4; padding-top: 78px; }
.mu-int-3 { grid-column: 9 / span 4; padding-top: 122px; }
.mu-descente { position: absolute; left: 0; top: 0; width: 1px; background: var(--pg-filet-fort); transform-origin: top center; }
.mu-int-1 .mu-descente { height: 22px; }
.mu-int-2 .mu-descente { height: 66px; }
.mu-int-3 .mu-descente { height: 110px; }

.mu-micro { margin: 0 0 var(--sp-2); }
.mu-micro svg { display: block; width: 100%; max-width: 210px; height: auto; }
/* Les modules retenus de la troisième vignette : un aplat posé par-dessus
   son contour — pas de classe supplémentaire à styler. */
.mu-garde { fill: var(--pg-encre); }
.mu-int h3 { font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.2; letter-spacing: -0.022em; text-wrap: balance; }
.mu-int p { max-width: 36ch; font-size: var(--t-small); }
.mu-reperes { margin-top: var(--sp-1); padding-top: 12px; border-top: 1px solid var(--pg-filet); font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.06em; color: var(--pg-sourdine); line-height: 1.7; }

html[data-motion="on"] [data-rv="interventions"] .mu-fil-continu { transform: scaleX(0); transition: transform 1100ms var(--ease-out); }
html[data-motion="on"] [data-rv="interventions"] .mu-descente { transform: scaleY(0); transition: transform 460ms var(--ease-out); }
html[data-motion="on"] [data-rv="interventions"] .mu-int > *:not(.mu-descente) { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
html[data-motion="on"] [data-rv="interventions"] .mu-int-1 .mu-descente { transition-delay: 380ms; }
html[data-motion="on"] [data-rv="interventions"] .mu-int-2 .mu-descente { transition-delay: 620ms; }
html[data-motion="on"] [data-rv="interventions"] .mu-int-3 .mu-descente { transition-delay: 860ms; }
html[data-motion="on"] [data-rv="interventions"] .mu-int-1 > *:not(.mu-descente) { transition-delay: 560ms; }
html[data-motion="on"] [data-rv="interventions"] .mu-int-2 > *:not(.mu-descente) { transition-delay: 800ms; }
html[data-motion="on"] [data-rv="interventions"] .mu-int-3 > *:not(.mu-descente) { transition-delay: 1040ms; }
html[data-motion="on"] [data-rv="interventions"].vu .mu-fil-continu { transform: none; }
html[data-motion="on"] [data-rv="interventions"].vu .mu-descente { transform: none; }
html[data-motion="on"] [data-rv="interventions"].vu .mu-int > *:not(.mu-descente) { opacity: 1; transform: none; }


/* ═══ ÉCRAN 3 — LE PARCOURS, SUR LA BANDE NOIRE ════════════════
   Le sommet démonstratif. Quatre stations sur un fil continu ; le
   dossier se remplit d'une station à l'autre ; une demande avance,
   s'arrête sur la décision humaine — seul rouge de l'écran — et repart. */

.mu-parcours .mu-tete { grid-column: 1 / span 7; }
.mu-parcours-piste { margin-top: var(--sp-7); }
.mu-stations { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-3); padding: 56px 0 0; margin: 0; list-style: none; }
.mu-piste-fil { position: absolute; left: 0; right: 0; top: 28px; height: 1px; background: var(--ligne-ivoire-forte); transform-origin: left center; }
.mu-station { position: relative; display: grid; gap: 10px; align-content: start; }
.mu-noeud { position: absolute; left: 0; top: -33px; width: 11px; height: 11px; background: var(--ink); }
.mu-st-humaine .mu-noeud { width: 15px; height: 15px; top: -35px; background: var(--red); }
.mu-station b { font-size: 1rem; font-weight: 600; color: var(--ink); }
.mu-station p { max-width: 30ch; font-size: var(--t-small); color: var(--text); }
/* Le dossier se complète : une rangée pleine de plus à chaque station. */
.mu-dossier { display: grid; gap: 4px; width: 64px; margin-top: var(--sp-1); }
.mu-dossier i { display: block; height: 5px; background: var(--ligne-ivoire); }
.mu-st-1 .mu-dossier i:nth-child(-n+1),
.mu-st-2 .mu-dossier i:nth-child(-n+2),
.mu-st-3 .mu-dossier i:nth-child(-n+3),
.mu-st-4 .mu-dossier i:nth-child(-n+4) { background: var(--ink); }
.mu-piste-demande { position: absolute; left: 0; top: 24px; width: 9px; height: 9px; background: var(--ink); opacity: 0; }
.mu-resultats { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--ligne-ivoire); font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

html[data-motion="on"] [data-rv="parcours"] .mu-piste-fil { transform: scaleX(0); transition: transform 1700ms var(--ease-out); }
html[data-motion="on"] [data-rv="parcours"] .mu-station > * { opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
html[data-motion="on"] [data-rv="parcours"] .mu-noeud { transform: scale(0); transition: transform 360ms var(--ease-spring); }
html[data-motion="on"] [data-rv="parcours"] .mu-st-1 > * { transition-delay: 200ms; }
html[data-motion="on"] [data-rv="parcours"] .mu-st-2 > * { transition-delay: 900ms; }
html[data-motion="on"] [data-rv="parcours"] .mu-st-3 > * { transition-delay: 1700ms; }
html[data-motion="on"] [data-rv="parcours"] .mu-st-4 > * { transition-delay: 2700ms; }
html[data-motion="on"] [data-rv="parcours"] .mu-resultats { opacity: 0; transition: opacity 600ms var(--ease-out) 3400ms; }
html[data-motion="on"] [data-rv="parcours"].vu .mu-piste-fil { transform: none; }
html[data-motion="on"] [data-rv="parcours"].vu .mu-station > * { opacity: 1; transform: none; }
html[data-motion="on"] [data-rv="parcours"].vu .mu-resultats { opacity: 1; }
html[data-motion="on"] [data-rv="parcours"].vu .mu-piste-demande { animation: mu-piste 4400ms var(--ease-out) 300ms forwards; }
@keyframes mu-piste {
  0%   { opacity: 1; left: 0; }
  22%  { left: 25%; }
  46%  { left: 51%; }
  62%  { left: 51%; }          /* l'arrêt : la décision revient à une personne */
  88%  { opacity: 1; left: calc(100% - 9px); }
  100% { opacity: 0; left: calc(100% - 9px); }
}


/* ═══ ÉCRAN 4 — LA CONFORMITÉ, UN DOSSIER TECHNIQUE OUVERT ═════
   Index des sujets à gauche, axe du cycle de vie de l'information au
   centre, explications à droite. L'axe est continu et se termine sur le
   seul repère rouge : la validation, qui n'appartient pas à Picbois47. */

.mu-fiche { position: relative; grid-column: 1 / -1; margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); }
/* L'axe est posé au centre exact de la colonne 4, calculé sur la grille. */
.mu-axe { position: absolute; top: 18px; bottom: 26px; width: 1px; background: var(--pg-filet-fort); transform-origin: top center; left: calc(3 * var(--c) + 3 * var(--g) + var(--c) / 2); }
.mu-rang { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; padding: var(--sp-4) 0; border-top: 1px solid var(--pg-filet); }
.mu-rang:first-of-type { border-top: 0; }
.mu-sujet { grid-column: 1 / span 3; margin: 0; font-family: var(--f-mono); font-size: clamp(0.875rem, 1.05vw, 1rem); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--pg-encre); }
.mu-jalon { grid-column: 4; display: grid; justify-items: center; gap: 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-sourdine); text-align: center; padding-top: 4px; }
.mu-jalon i { width: 9px; height: 9px; background: var(--pg-encre); }
.mu-jalon-rouge i { width: 13px; height: 13px; background: var(--red); }
.mu-explication { grid-column: 5 / -1; margin: 0; max-width: 62ch; }
.mu-rang-fin { border-top: 1px solid var(--pg-encre); }
.mu-sujet-fin { color: var(--pg-encre); }
.mu-reserve { color: var(--pg-sourdine); font-size: var(--t-small); }

html[data-motion="on"] [data-rv="fiche"] .mu-axe { transform: scaleY(0); transition: transform 1400ms var(--ease-out) 200ms; }
html[data-motion="on"] [data-rv="fiche"] .mu-rang > * { opacity: 0; transform: translateY(8px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
html[data-motion="on"] [data-rv="fiche"] .mu-rang:nth-of-type(1) > * { transition-delay: 240ms; }
html[data-motion="on"] [data-rv="fiche"] .mu-rang:nth-of-type(2) > * { transition-delay: 400ms; }
html[data-motion="on"] [data-rv="fiche"] .mu-rang:nth-of-type(3) > * { transition-delay: 560ms; }
html[data-motion="on"] [data-rv="fiche"] .mu-rang:nth-of-type(4) > * { transition-delay: 720ms; }
html[data-motion="on"] [data-rv="fiche"] .mu-rang:nth-of-type(5) > * { transition-delay: 880ms; }
html[data-motion="on"] [data-rv="fiche"] .mu-rang:nth-of-type(6) > * { transition-delay: 1040ms; }
html[data-motion="on"] [data-rv="fiche"] .mu-rang:nth-of-type(7) > * { transition-delay: 1240ms; }
html[data-motion="on"] [data-rv="fiche"].vu .mu-axe { transform: none; }
html[data-motion="on"] [data-rv="fiche"].vu .mu-rang > * { opacity: 1; transform: none; }


/* ═══ ÉCRAN 5 — LE MANDAT : UN ESCALIER ════════════════════════
   Trois moments, chacun un cran plus bas et plus à droite, reliés par un
   fil continu qui descend dans la gouttière. Le livrable gagne une
   rangée pleine d'un moment au suivant et finit sur le transfert. */

.mu-escalier { position: relative; grid-column: 1 / -1; margin-top: var(--sp-5); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-3); align-items: start; }
.mu-moment { position: relative; display: grid; gap: var(--sp-2); align-content: start; }
/* Chaque moment est un cran plus bas : son palier est le trait de tête,
   la chute descend dans la gouttière jusqu'au palier suivant. */
.mu-moment-1 { grid-column: 1 / span 4; padding-top: 0; }
.mu-moment-2 { grid-column: 5 / span 4; padding-top: 72px; }
.mu-moment-3 { grid-column: 9 / span 4; padding-top: 144px; }
.mu-palier { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--pg-encre); transform-origin: left center; }
/* Le palier rejoint la chute dans la gouttière : l'escalier est continu. */
.mu-moment-1 .mu-palier, .mu-moment-2 .mu-palier { right: calc(-1 * var(--sp-3)); }
.mu-moment-2 .mu-palier { top: 72px; }
.mu-moment-3 .mu-palier { top: 144px; }
.mu-chute { position: absolute; right: calc(-1 * var(--sp-3)); top: 0; width: 1px; height: 72px; background: var(--pg-encre); transform-origin: top center; }
.mu-moment-2 .mu-chute { top: 72px; }
.mu-moment-nom { margin-top: var(--sp-3); font-family: var(--f-mono); font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-encre); }
.mu-livrable { display: grid; gap: 4px; width: 66px; }
.mu-livrable i { display: block; height: 5px; background: var(--pg-filet); }
.mu-moment-1 .mu-livrable i:nth-child(-n+2),
.mu-moment-2 .mu-livrable i:nth-child(-n+3),
.mu-moment-3 .mu-livrable i:nth-child(-n+4) { background: var(--pg-encre); }
.mu-points { display: grid; gap: 10px; margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
.mu-points li { position: relative; padding-left: 20px; font-size: var(--t-small); }
.mu-points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 1px; background: var(--pg-filet-fort); }
.mu-transfert { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-2); font-family: var(--f-mono); font-size: var(--t-annot); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pg-encre); }
.mu-transfert i { flex: 0 0 auto; width: 11px; height: 11px; background: var(--red); }

html[data-motion="on"] [data-rv="escalier"] .mu-palier { transform: scaleX(0); transition: transform 700ms var(--ease-out); }
html[data-motion="on"] [data-rv="escalier"] .mu-chute { transform: scaleY(0); transition: transform 420ms var(--ease-out); }
html[data-motion="on"] [data-rv="escalier"] .mu-moment > *:not(.mu-palier):not(.mu-chute) { opacity: 0; transform: translateY(10px); transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
html[data-motion="on"] [data-rv="escalier"] .mu-moment-1 .mu-palier { transition-delay: 120ms; }
html[data-motion="on"] [data-rv="escalier"] .mu-moment-1 .mu-chute { transition-delay: 820ms; }
html[data-motion="on"] [data-rv="escalier"] .mu-moment-2 .mu-palier { transition-delay: 1240ms; }
html[data-motion="on"] [data-rv="escalier"] .mu-moment-2 .mu-chute { transition-delay: 1940ms; }
html[data-motion="on"] [data-rv="escalier"] .mu-moment-3 .mu-palier { transition-delay: 2360ms; }
html[data-motion="on"] [data-rv="escalier"] .mu-moment-1 > *:not(.mu-palier):not(.mu-chute) { transition-delay: 420ms; }
html[data-motion="on"] [data-rv="escalier"] .mu-moment-2 > *:not(.mu-palier):not(.mu-chute) { transition-delay: 1540ms; }
html[data-motion="on"] [data-rv="escalier"] .mu-moment-3 > *:not(.mu-palier):not(.mu-chute) { transition-delay: 2660ms; }
html[data-motion="on"] [data-rv="escalier"] .mu-transfert { transition-delay: 3100ms !important; }
html[data-motion="on"] [data-rv="escalier"].vu .mu-palier { transform: none; }
html[data-motion="on"] [data-rv="escalier"].vu .mu-chute { transform: none; }
html[data-motion="on"] [data-rv="escalier"].vu .mu-moment > *:not(.mu-palier):not(.mu-chute) { opacity: 1; transform: none; }


/* ═══ ÉCRAN 6 — DEUX FAÇONS DE COMMENCER ═══════════════════════
   Quatre colonnes contre six, séparées par deux colonnes de vide
   assumé. Aucun rectangle, aucune grille tarifaire : deux filets. */

.mu-depart .mu-tete { grid-column: 1 / span 7; }
.mu-formule { display: grid; gap: var(--sp-2); align-content: start; padding-top: var(--sp-3); border-top: 1px solid var(--pg-encre); }
.mu-formule-express { grid-column: 1 / span 4; }
.mu-formule-complet { grid-column: 7 / span 6; }
.mu-formule h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.14; letter-spacing: -0.026em; }
.mu-formule-complet h3 { font-size: clamp(1.45rem, 2.6vw, 2.1rem); }
.mu-cond { display: block; margin-top: 6px; font-family: var(--f-mono); font-size: var(--t-annot); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-sourdine); }
.mu-formule > p { max-width: 44ch; font-size: var(--t-small); }
.mu-formule-complet > p { max-width: 50ch; font-size: 1rem; }
.mu-comprend { display: grid; gap: 8px; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--pg-filet); font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.06em; color: var(--pg-sourdine); line-height: 1.75; }
.mu-comprend .label { color: var(--pg-encre); }
.mu-precision { color: var(--pg-sourdine); }
.mu-formule .lien-mono { margin-top: var(--sp-2); }


/* ═══ ÉCRAN 7 — LES QUESTIONS ══════════════════════════════════
   Pleine largeur, séparées par des filets, sans encadré. Le marqueur est
   un carré qui se remplit — le vocabulaire de Précision 47. */

.mu-questions .mu-tete { grid-column: 1 / span 8; }
.mu-faq { grid-column: 1 / -1; }
.mu-faq details { border-top: 1px solid var(--pg-filet-fort); }
.mu-faq details:last-child { border-bottom: 1px solid var(--pg-filet-fort); }
.mu-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 44px; padding: 18px 0; cursor: pointer; list-style: none;
  color: var(--pg-encre); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.02em;
}
.mu-faq summary::-webkit-details-marker { display: none; }
.mu-faq summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid var(--pg-encre); transition: background var(--dur) var(--ease); }
.mu-faq details[open] summary::after { background: var(--pg-encre); }
.mu-faq details > p { margin: 0; padding: 0 0 var(--sp-4); max-width: 68ch; }


/* ═══ L'APPEL FINAL ════════════════════════════════════════════ */

.mu-appel .label { grid-column: 1 / -1; margin-bottom: var(--sp-1); font-size: var(--t-label); }
.mu-appel .appel-risque { margin-top: var(--sp-3); font-family: var(--f-mono); font-size: var(--t-annot); letter-spacing: 0.08em; color: var(--pg-sourdine); }


/* ═══ TÉLÉPHONE ET TABLETTE ════════════════════════════════════
   Rien n'est rapetissé : chaque composition est recomposée. Le fil
   horizontal devient vertical, l'escalier devient une pile, le schéma
   du héros passe sous le texte à sa pleine largeur. */

@media (max-width: 1100px) {
  .mu-int-1 { grid-column: 1 / span 6; }
  .mu-int-2 { grid-column: 7 / span 6; }
  .mu-int-3 { grid-column: 1 / span 6; padding-top: 34px; margin-top: var(--sp-5); }
  .mu-int-3 .mu-descente { height: 22px; }
  .mu-formule-express { grid-column: 1 / span 5; }
  .mu-formule-complet { grid-column: 7 / span 6; }
}

@media (max-width: 860px) {
  .mu-zone { padding: var(--sp-6) 0; }
  .mu-zone > .cadre-section { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .mu-tete, .mu-tete-large, .mu-conclusion, .mu-interventions, .mu-fiche,
  .mu-escalier, .mu-formule-express, .mu-formule-complet, .mu-faq,
  .mu-parcours .mu-tete, .mu-depart .mu-tete, .mu-questions .mu-tete { grid-column: auto; }

  /* Héros : le texte d'abord, le schéma recomposé dessous, pleine largeur. */
  .mu-hero { padding: var(--sp-5) 0 var(--sp-4); }
  .mu-hero .cadre-section { grid-template-columns: 1fr; }
  .mu-hero h1, .mu-hero .page-chapo, .mu-hero-action, .mu-reassure, .mu-schema { grid-column: auto; grid-row: auto; max-width: none; }
  .mu-hero h1 { font-size: clamp(2.1rem, 8.6vw, 2.9rem); margin-top: var(--sp-3); }
  .mu-hero .page-chapo { margin-top: var(--sp-3); }
  .mu-hero-action { margin-top: var(--sp-4); width: 100%; justify-content: center; }
  .mu-schema { justify-self: start; max-width: 460px; margin-top: var(--sp-5); }
  .mu-schema .mu-schema-large { display: none; }
  .mu-schema .mu-schema-haut { display: block; }
  html[data-motion="on"] .mu-entrees { transform: translateY(-12px); }
  html[data-motion="on"] .mu-sorties { transform: translateY(12px); }
  html[data-motion="on"].pret .mu-demande-v { animation: mu-voyage-haut 4600ms var(--ease-out) 1500ms forwards; }

  /* Les trois interventions : une pile, chacune pendue au même filet. */
  .mu-interventions { grid-template-columns: 1fr; padding-top: var(--sp-5); row-gap: var(--sp-5); }
  .mu-fil-continu { top: var(--sp-5); }
  .mu-int-1, .mu-int-2, .mu-int-3 { grid-column: auto; padding-top: 30px; margin-top: 0; }
  .mu-int-2, .mu-int-3 { padding-top: var(--sp-3); }
  .mu-int-2 .mu-descente, .mu-int-3 .mu-descente { display: none; }
  .mu-int-1 .mu-descente { height: 20px; }
  .mu-int-2, .mu-int-3 { border-top: 1px solid var(--pg-filet); }
  .mu-int p { max-width: none; }

  /* Le parcours : le fil se redresse, les stations s'empilent. */
  .mu-parcours-piste { margin-top: var(--sp-5); }
  .mu-stations { grid-template-columns: 1fr; row-gap: var(--sp-4); padding: 0 0 0 28px; }
  .mu-piste-fil { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform-origin: center top; }
  .mu-noeud { left: -28px; top: 4px; }
  .mu-st-humaine .mu-noeud { left: -30px; top: 2px; }
  .mu-station p { max-width: none; }
  .mu-piste-demande { left: 1px; top: 0; }

  /* La fiche : l'axe disparaît, le jalon passe en tête de rangée. */
  .mu-fiche { grid-template-columns: 1fr; margin-top: var(--sp-4); }
  .mu-axe { display: none; }
  .mu-rang { grid-template-columns: 1fr; gap: 10px; padding: var(--sp-3) 0; }
  .mu-sujet, .mu-explication { grid-column: auto; max-width: none; }
  .mu-jalon { grid-column: auto; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; padding-top: 0; }

  /* L'escalier : une pile, le fil descend d'un moment à l'autre. */
  .mu-escalier { grid-template-columns: 1fr; row-gap: var(--sp-5); margin-top: var(--sp-4); }
  .mu-moment-1, .mu-moment-2, .mu-moment-3 { grid-column: auto; padding-top: var(--sp-3); }
  .mu-moment-2 .mu-palier, .mu-moment-3 .mu-palier { top: 0; }
  .mu-moment-1 .mu-palier, .mu-moment-2 .mu-palier { right: 0; }
  .mu-chute { display: none; }
  /* le débord du schéma n'a plus de raison d'être une fois la grille à plat */
  .mu-schema { width: 100%; margin-right: 0; }

  .mu-formule { padding-top: var(--sp-3); }
  .mu-formule > p, .mu-formule-complet > p { max-width: none; }
  .mu-faq summary { gap: var(--sp-3); }
}

@media (max-width: 480px) {
  .mu-hero-action { font-size: 0.9375rem; padding: 0 18px 0 16px; }
  .mu-schema { max-width: none; }
  .mu-reassure, .mu-resultats { line-height: 1.8; }
}

/* ═══ MOUVEMENT RÉDUIT ═════════════════════════════════════════
   `data-motion` n'est jamais posé à « on » dans ce cas, ce qui neutralise
   toutes les règles ci-dessus. Les deux animations nommées sont coupées
   ici par sécurité, et le voyage de la demande affiche son état final. */
@media (prefers-reduced-motion: reduce) {
  .mu-demande, .mu-demande-v, .mu-piste-demande { animation: none !important; opacity: 0 !important; }
  .mu-fil-continu, .mu-descente, .mu-piste-fil, .mu-axe, .mu-palier, .mu-chute { transform: none !important; }
}