/* =============================================================
   MEHDI MEZZAZ — Couche immersive commune (toutes les pages)
   Chargée après style.css et, sur les pages immersives, après le
   moteur scrollcraft.css. Le moteur n'est jamais modifié : tout
   passe par ses attributs data-sc-* et par des classes mm-*.

   1. Jetons et remise à niveau du corps
   2. Barre haute et menu plein écran
   3. Héros à plans (épinglé)
   4. Pile de cartes (sticky)
   5. Rail horizontal (pan)
   6. Frise épinglée (étapes)
   7. Ouverture du fond sombre (iris)
   8. Bandeau final
   9. Photos en profondeur, chaîne, études de cas
  10. Mobile
  11. Mouvement réduit et repli sans moteur
   ============================================================= */

/* ——— 1. Jetons ——— */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif');
  size-adjust: 98.55%; ascent-override: 93.4%; descent-override: 29.4%; line-gap-override: 0%;
}
:root {
  --mm-bar-h: 72px;
  --header-h: var(--mm-bar-h);
  --mm-ease: cubic-bezier(.2, .7, .2, 1);
  --mm-ease-io: cubic-bezier(.7, 0, .2, 1);
  --mm-serif: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  /* Le moteur se règle sur l'identité du site, pas l'inverse. */
  --sc-canvas: #F6F7F9; --sc-surface: #FFFFFF; --sc-ink: #111827; --sc-ink-soft: #4A5465;
  --sc-accent: #B45309; --sc-accent-ink: #FFFFFF;
  --sc-font-display: var(--mm-serif);
  --sc-font-text: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
/* scrollcraft.css réécrit le corps (taille fluide, fond sombre) : on rétablit
   celui du site. overflow-x: clip et non hidden, sinon aucun sticky ne colle. */
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.7; letter-spacing: normal;
  background: var(--ivory); color: var(--dark);
}
/* Les apparitions du moteur ne masquent rien si JavaScript est absent. */
html:not(.js) [data-sc-in], html:not(.js) [data-sc-stagger] > *,
.mm-static [data-sc-in], .mm-static [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }

/* ——— 2. Barre haute ——— */
header#header.mm-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--mm-bar-h); background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  /* Ni transform ni filtre ici : le menu fixe à l'intérieur doit se
     positionner par rapport à l'écran, pas par rapport à la barre. */
}
.mm-bar__inner {
  position: relative; z-index: 2; height: 100%;
  max-width: 1320px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: transform .5s var(--mm-ease);
}
.mm-bar__inner::before {
  content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background: rgba(246, 247, 249, .9);
  backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease, background .3s ease;
}
.mm-bar.is-scrolled .mm-bar__inner::before { border-bottom-color: var(--border); }
.mm-bar.is-hidden .mm-bar__inner { transform: translateY(-105%); }
.mm-bar__logo {
  font-family: var(--mm-serif); font-size: 1.55rem; font-weight: 600; line-height: 1;
  color: var(--navy); white-space: nowrap; letter-spacing: 0;
}
.mm-bar__actions { display: flex; align-items: center; gap: .75rem; }
.mm-bar__cta { white-space: nowrap; }
.mm-bar__toggle {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 44px; padding: 0 1rem 0 .85rem; cursor: pointer;
  background: transparent; color: var(--navy);
  border: 1px solid var(--border); border-radius: 999px;
  font: 600 .7rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.mm-bar__toggle:hover { border-color: var(--navy); }
.mm-bar__icon { position: relative; width: 18px; height: 10px; }
.mm-bar__icon span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .45s var(--mm-ease), top .45s var(--mm-ease);
}
.mm-bar__icon span:first-child { top: 0; }
.mm-bar__icon span:last-child { top: 8.5px; }
.mm-menu-open .mm-bar__icon span:first-child { top: 4.25px; transform: rotate(45deg); }
.mm-menu-open .mm-bar__icon span:last-child { top: 4.25px; transform: rotate(-45deg); }

/* Fil de lecture : il reste en haut de l'écran quand la barre se retire. */
.mm-bar__progress {
  position: absolute; left: 0; right: 0; top: var(--mm-bar-h); z-index: 3; height: 2px;
  background: var(--gold-deco, #A67C3D); transform-origin: left center;
  transform: scaleX(var(--mm-read, 0)); transition: top .5s var(--mm-ease);
}
.mm-bar.is-hidden .mm-bar__progress { top: 0; }
.mm-menu-open .mm-bar__progress { opacity: 0; }

/* ——— Menu plein écran ——— */
.mm-menu {
  position: fixed; inset: 0; z-index: 1;
  background: var(--navy); color: var(--ivory);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--mm-bar-h) + 2rem) clamp(1.5rem, 9vw, 9rem) clamp(2rem, 6vh, 3.5rem);
  overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .75s var(--mm-ease-io), visibility 0s linear .75s;
}
.mm-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .75s var(--mm-ease-io); }
.mm-menu::before {
  /* trame fine, même grammaire que les héros */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    repeating-linear-gradient(90deg, rgba(245,165,36,.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(246,247,249,.035) 0 1px, transparent 1px 96px);
}
.mm-menu__nav { position: relative; display: grid; gap: clamp(2rem, 6vh, 3.5rem); }
.mm-menu__main { display: grid; gap: .1rem; }
.mm-menu__main a {
  display: inline-flex; align-items: baseline; gap: .5em;
  font-family: var(--mm-serif); font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(2.4rem, 7.2vw, 5.4rem); line-height: 1.04;
  color: var(--ivory); text-decoration: none;
  transition: color .35s ease, transform .5s var(--mm-ease);
}
.mm-menu__main a::after {
  content: '\2192'; font-family: var(--font-body); font-size: .32em; color: var(--gold-light);
  opacity: 0; transform: translateX(-.4em); transition: opacity .35s ease, transform .45s var(--mm-ease);
}
.mm-menu__main a:hover, .mm-menu__main a:focus-visible { color: var(--gold-light); transform: translateX(.18em); }
.mm-menu__main a:hover::after, .mm-menu__main a:focus-visible::after { opacity: 1; transform: none; }
.mm-menu__main a[aria-current] { color: var(--gold-light); font-style: italic; }
.mm-menu__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem;
  padding-top: 1.75rem; border-top: 1px solid rgba(246,247,249,.16);
}
.mm-menu__more { display: flex; flex-wrap: wrap; gap: .25rem 2rem; }
.mm-menu__more a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: #C6D0DE; text-decoration: none; border-bottom: 1px solid transparent;
}
.mm-menu__more a:hover, .mm-menu__more a:focus-visible, .mm-menu__more a[aria-current] { color: var(--gold-light); border-bottom-color: currentColor; }
/* Entrée en cascade des liens, une fois le rideau tombé. */
.mm-menu li { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .7s var(--mm-ease); }
.mm-menu.is-open li { opacity: 1; transform: none; }
.mm-menu.is-open .mm-menu__main li:nth-child(1) { transition-delay: .22s; }
.mm-menu.is-open .mm-menu__main li:nth-child(2) { transition-delay: .28s; }
.mm-menu.is-open .mm-menu__main li:nth-child(3) { transition-delay: .34s; }
.mm-menu.is-open .mm-menu__main li:nth-child(4) { transition-delay: .40s; }
.mm-menu.is-open .mm-menu__main li:nth-child(5) { transition-delay: .46s; }
.mm-menu.is-open .mm-menu__more li { transition-delay: .55s; }
.mm-menu__cta { opacity: 0; transition: opacity .5s ease .55s; }
.mm-menu.is-open .mm-menu__cta { opacity: 1; }

/* Barre au-dessus du rideau : texte clair. */
.mm-menu-open { overflow: hidden; }
.mm-menu-open .mm-bar__inner { transform: none; }
.mm-menu-open .mm-bar__inner::before { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.mm-menu-open .mm-bar__logo { color: var(--ivory); }
.mm-menu-open .mm-bar__toggle { color: var(--ivory); border-color: rgba(246,247,249,.32); }
.mm-menu-open .mm-bar__cta { visibility: hidden; }

/* ——— 3. Héros à plans ———
   Quatre plans qui bougent à des vitesses différentes : la trame (loin),
   la lueur, le motif ou le sujet (milieu), la copie (près). */
.mm-hero { position: relative; padding: 0 !important; border-bottom: 0 !important; background: var(--white); }
.mm-hero [data-sc-stage] { display: grid; align-items: center; overflow: clip; }
.mm-hero:not(.sc-act--pinned) [data-sc-stage] { min-height: 100svh; position: relative; }
.mm-hero--beige { background: var(--beige); }
.mm-hero--navy { background: var(--navy); color: var(--ivory); }
.mm-plane { position: absolute; pointer-events: none; }
.mm-plane--grid {
  inset: -12% 0;
  background:
    repeating-linear-gradient(90deg, rgba(15,27,45,.055) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(15,27,45,.04) 0 1px, transparent 1px 88px);
  -webkit-mask-image: radial-gradient(120% 90% at 75% 40%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 75% 40%, #000 30%, transparent 78%);
  transform: translate3d(0, calc(var(--sc-p, 0) * 70px), 0);
}
.mm-hero--navy .mm-plane--grid {
  background:
    repeating-linear-gradient(90deg, rgba(245,165,36,.07) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(246,247,249,.045) 0 1px, transparent 1px 88px);
}
.mm-plane--glow {
  width: 70vmax; height: 70vmax; right: -22vmax; top: -24vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(166,124,61,.20), rgba(166,124,61,0));
  transform: translate3d(0, calc(var(--sc-p, 0) * -120px), 0);
}
.mm-hero--navy .mm-plane--glow { background: radial-gradient(closest-side, rgba(245,165,36,.16), rgba(245,165,36,0)); }
.mm-plane--glyph {
  right: max(-6vw, -80px); top: 50%; width: min(52vw, 640px); aspect-ratio: 1;
  color: var(--gold-deco, #A67C3D); opacity: .16;
  transform: translate3d(0, calc(-50% + var(--sc-p, 0) * -150px), 0)
             rotate(calc(var(--sc-p, 0) * -14deg)) scale(calc(1 + var(--sc-p, 0) * .1));
}
.mm-hero--navy .mm-plane--glyph { color: var(--gold-light); opacity: .13; }
.mm-plane--glyph svg { width: 100%; height: 100%; }
.mm-plane--glyph svg * { stroke-width: .35; vector-effect: none; }
.mm-plane--subject {
  right: max(2vw, calc(50vw - 640px)); bottom: 0; width: clamp(16rem, 28vw, 24rem);
  transform-origin: bottom center;
  transform: translate3d(0, calc(var(--sc-p, 0) * 40px), 0) scale(calc(1 + var(--sc-p, 0) * .05));
}
.mm-plane--subject img { display: block; width: 100%; height: auto; filter: drop-shadow(-24px 14px 34px rgba(15,27,45,.28)); }
/* Écrans en lévitation (études de cas) : trois profondeurs distinctes. */
.mm-plane--shot {
  border-radius: 18px; overflow: hidden; background: var(--white);
  box-shadow: 0 30px 60px -24px rgba(15,27,45,.45), 0 0 0 1px rgba(15,27,45,.06);
}
.mm-plane--shot img { display: block; width: 100%; height: auto; }
.mm-plane--shot.s1 { width: clamp(9rem, 15vw, 14rem); right: 22vw; top: 22%; transform: translate3d(0, calc(var(--sc-p, 0) * -90px), 0) rotate(-4deg); }
.mm-plane--shot.s2 { width: clamp(10rem, 17vw, 16rem); right: 9vw; top: 12%; transform: translate3d(0, calc(var(--sc-p, 0) * -190px), 0) rotate(3deg); z-index: 1; }
.mm-plane--shot.s3 { width: clamp(8rem, 13vw, 12rem); right: 1vw; top: 48%; transform: translate3d(0, calc(var(--sc-p, 0) * -40px), 0) rotate(7deg); opacity: .92; }
.mm-plane--shot.wide { width: clamp(16rem, 30vw, 30rem); }

.mm-hero__copy {
  position: relative; z-index: 3; width: 100%;
  padding-top: calc(var(--mm-bar-h) + clamp(1.5rem, 5vh, 3rem));
  padding-bottom: clamp(2rem, 6vh, 4rem);
  transform: translate3d(0, calc(var(--sc-p, 0) * -48px), 0);
  opacity: calc(1 - var(--sc-p, 0) * .12);
}
.mm-hero h1 { max-width: 15.5em; }
.mm-hero--home h1, .mm-hero--subject h1, .mm-hero--shots h1 { max-width: 12.5em; }
.mm-hero--subject .mm-hero__copy > *, .mm-hero--shots .mm-hero__copy > * { max-width: min(60%, 46rem); }
.mm-hero--navy .breadcrumb, .mm-hero--navy .breadcrumb a, .mm-hero--navy .page-meta, .mm-hero--navy .hero-note { color: rgba(246,247,249,.72); }
.mm-hero--navy h1 { color: var(--ivory); }
.mm-hero--navy .lead { color: rgba(246,247,249,.82); }
.mm-hero--navy .eyebrow { color: var(--gold-light); }
.mm-hero--navy .btn-primary { background: var(--ivory); color: var(--navy); }
.mm-hero--navy .btn-primary:hover { background: var(--white); color: var(--navy); }
.mm-hero--navy .btn-outline { color: var(--ivory); border-color: rgba(246,247,249,.55); }
.mm-hero--navy .btn-outline:hover { background: var(--ivory); color: var(--navy); }
/* Chorégraphie d'arrivée : la copie monte en cascade, une fois. */
@keyframes mm-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes mm-unveil { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0, 18px, 0); } to { opacity: 1; clip-path: inset(0 0 -10% 0); transform: none; } }
.js .mm-hero__copy > * { animation: mm-rise .9s var(--mm-ease) both; }
.js .mm-hero__copy > h1 { animation-name: mm-unveil; animation-duration: 1.1s; }
.js .mm-hero__copy > :nth-child(2) { animation-delay: .08s; }
.js .mm-hero__copy > :nth-child(3) { animation-delay: .18s; }
.js .mm-hero__copy > :nth-child(4) { animation-delay: .3s; }
.js .mm-hero__copy > :nth-child(5) { animation-delay: .42s; }
.js .mm-hero__copy > :nth-child(n+6) { animation-delay: .52s; }
.js .mm-hero .mm-plane--subject, .js .mm-hero .mm-plane--shot { animation: mm-rise 1.2s var(--mm-ease) .25s both; }
/* Accueil : le héros garde sa grille d'origine (copie + parcours). */
.mm-hero--home .mm-hero__copy > div { max-width: min(58%, 44rem); }
.mm-hero--home .mm-hero__copy > div > * { animation: mm-rise .9s var(--mm-ease) both; }
.mm-hero--home .mm-hero__copy > div > h1 { animation-name: mm-unveil; animation-duration: 1.1s; animation-delay: .08s; }
.mm-hero--home .mm-hero__copy > div > :nth-child(3) { animation-delay: .2s; }
.mm-hero--home .mm-hero__copy > div > :nth-child(n+4) { animation-delay: .32s; }
.js .mm-hero--home .mm-hero__copy > div { animation: none; }

/* Hauteurs des actes épinglés posées en CSS : la page a sa taille finale
   avant le montage du moteur, sans saut de mise en page. */
[data-sc-act][data-sc-span="1.4"] { height: 140vh; }
[data-sc-act][data-sc-span="1.5"] { height: 150vh; }
[data-sc-act][data-sc-span="1.6"] { height: 160vh; }
[data-sc-act][data-sc-span="1.8"] { height: 180vh; }
[data-sc-act][data-sc-span="2"] { height: 200vh; }
[data-sc-act][data-sc-span="2.2"] { height: 220vh; }
[data-sc-act][data-sc-span="2.5"] { height: 250vh; }
[data-sc-act][data-sc-span="2.8"] { height: 280vh; }
[data-sc-act][data-sc-span="3"] { height: 300vh; }
[data-sc-act="pin"] [data-sc-stage], [data-sc-act="pan"] [data-sc-stage] { position: sticky; top: 0; height: 100vh; height: 100svh; }
.mm-downgraded [data-sc-stage] { height: auto; position: relative; padding-block: clamp(3rem, 8vh, 5rem); }
.mm-downgraded.mm-hero [data-sc-stage] { padding-block: 0; }

/* Têtes de section : sur-titre, titre, chapeau arrivent l'un après l'autre. */
.mm-head.section-head > h2 { transition-duration: 900ms; }

/* ——— 4. Pile de cartes ———
   Chaque situation se pose sur la précédente en la recouvrant. */
.mm-stack .container { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.mm-stack .section-head { position: sticky; top: calc(var(--mm-bar-h) + 2.5rem); margin-bottom: 0; }
.mm-stack .problems { display: block; }
.mm-stack .problem {
  position: sticky; top: calc(var(--mm-bar-h) + 1.5rem + var(--k, 0) * 12px);
  margin-bottom: 22vh; min-height: 8.5rem; align-items: center;
  padding: 1.5rem 1.6rem; border-radius: 14px;
  box-shadow: 0 -2px 0 rgba(15,27,45,.02), 0 18px 40px -22px rgba(15,27,45,.32);
}
.mm-stack .problem:last-child { margin-bottom: 0; }
.mm-stack .problem p > span:first-child { font-family: var(--mm-serif); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 500; line-height: 1.2; color: var(--navy); display: block; }
.mm-stack .problems-cta { grid-column: 2; margin-top: 2rem; }
.mm-stack .problem:nth-child(1) { --k: 0; } .mm-stack .problem:nth-child(2) { --k: 1; } .mm-stack .problem:nth-child(3) { --k: 2; }
.mm-stack .problem:nth-child(4) { --k: 3; } .mm-stack .problem:nth-child(5) { --k: 4; } .mm-stack .problem:nth-child(6) { --k: 5; }

/* ——— 5. Rail horizontal ——— */
.mm-pan [data-sc-stage] { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 4vh, 2.75rem); padding-top: var(--mm-bar-h); }
.mm-pan .section-head { margin-bottom: 0; }
.mm-rail { display: flex; gap: clamp(1rem, 2vw, 1.75rem); width: max-content; padding-inline: max(1.5rem, calc((100vw - 1180px) / 2 + 1.5rem)); }
.mm-rail > * { flex: 0 0 min(30rem, 80vw); margin: 0; }
.mm-rail.gates > * { flex-basis: min(32rem, 84vw); }
.mm-pan .container.mm-pan__head { width: 100%; }
/* Sans épinglage (écran trop court, moteur absent) : simple grille. */
.mm-rail--static { width: auto; flex-wrap: wrap; padding-inline: 0; }
.mm-rail--static > * { flex: 1 1 18rem; }
.mm-pan--static [data-sc-stage] { height: auto; position: relative; padding-top: 0; }
.mm-pan__track { overflow: visible; }
.mm-pan--static .mm-pan__track { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* ——— 6. Frise épinglée ———
   La ligne d'or avance avec le défilement, chaque étape s'allume à son tour. */
.mm-timeline [data-sc-stage] { display: grid; align-content: center; padding-top: var(--mm-bar-h); }
.mm-timeline :is(.steps, .flow-steps) { position: relative; }
.mm-timeline :is(.steps, .flow-steps)::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1.1rem; height: 2px;
  background: linear-gradient(90deg, var(--gold-deco, #A67C3D), var(--gold-light));
  transform-origin: left center; transform: scaleX(clamp(0, var(--sc-p, 0) * 1.35, 1));
}
.mm-timeline :is(.step, .flow-step) {
  --on: clamp(0, (var(--sc-p, 0) - var(--t, 0)) * 8, 1);
  opacity: calc(.22 + var(--on) * .78);
  transform: translate3d(0, calc((1 - var(--on)) * 22px), 0);
  transition: none;
}
.mm-timeline :is(.step, .flow-step):nth-child(1) { --t: 0; }
.mm-timeline :is(.step, .flow-step):nth-child(2) { --t: .11; }
.mm-timeline :is(.step, .flow-step):nth-child(3) { --t: .22; }
.mm-timeline :is(.step, .flow-step):nth-child(4) { --t: .33; }
.mm-timeline :is(.step, .flow-step):nth-child(5) { --t: .44; }
.mm-timeline :is(.step, .flow-step):nth-child(6) { --t: .55; }
.mm-timeline .fade-in { opacity: calc(.22 + var(--on) * .78); }
/* Accueil : le parcours en 4 temps devient une scène à part entière. */
.mm-process { background: var(--navy); }
.mm-process .flow { background: transparent; box-shadow: none; padding: 0; max-width: 1180px; }
.mm-process .flow-title { font-size: .72rem; margin-bottom: 2.4rem; }
.mm-process .flow-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.mm-process .flow-step { display: block; padding: 1.4rem 1.3rem 1.5rem; background: rgba(255,255,255,.04); }
.mm-process .flow-step + .flow-step::before { display: none; }
.mm-process .flow-num { margin-bottom: 1.1rem; width: 2.6rem; height: 2.6rem; font-size: 1.35rem; }
.mm-process .flow-step strong { font-family: var(--mm-serif); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 500; margin-bottom: .45rem; }

/* ——— 7. Ouverture du fond sombre ———
   Le navy s'ouvre depuis un cadre arrondi jusqu'au plein écran. */
.mm-iris { position: relative; isolation: isolate; background: transparent !important; }
.mm-iris::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--navy);
  --o: clamp(0, 1 - var(--sc-p, 0) * 2.8, 1);
  clip-path: inset(calc(var(--o) * 9%) calc(var(--o) * 7%) round calc(var(--o) * 48px));
}

/* ——— 8. Bandeau final ——— */
.mm-finale .cta-band {
  --f: clamp(0, var(--sc-p, 0) * 2.6, 1);
  transform: scale(calc(.9 + var(--f) * .1));
  border-radius: calc(4px + (1 - var(--f)) * 26px);
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(166,124,61,calc(.10 + var(--f) * .18)), transparent 60%),
    var(--navy);
  padding: clamp(2rem, 6vw, 4.5rem);
}
.mm-finale .cta-band h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }

/* ——— 9. Photos en profondeur ——— */
/* Le masque est sur l'image, pas sur le cadre : Chromium tient compte du
   clip-path de l'élément observé, un cadre masqué n'« entrerait » jamais. */
.mm-depth { overflow: hidden; border-radius: var(--radius); }
.mm-depth.sc-in { opacity: 1; transform: none; }
.mm-depth img {
  border-radius: 0 !important; box-shadow: none !important;
  clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--mm-ease-io);
  transform: translate3d(0, calc((var(--sc-p, .5) - .5) * -70px), 0) scale(1.12);
}
.mm-depth.sc-in img { clip-path: inset(0 0 0 0); }
/* Chaîne d'approche : un trait se tire sous chaque maillon. */
.mm-chain li { position: relative; }
.mm-chain li::after {
  content: ''; position: absolute; left: .75rem; right: .75rem; bottom: -5px; height: 2px;
  background: var(--gold-deco, #A67C3D); transform-origin: left center;
  transform: scaleX(clamp(0, (var(--sc-p, 0) - var(--mm-s, 0)) * 10, 1));
}
.mm-chain li:nth-child(1) { --mm-s: .18; } .mm-chain li:nth-child(2) { --mm-s: .24; } .mm-chain li:nth-child(3) { --mm-s: .30; }
.mm-chain li:nth-child(4) { --mm-s: .36; } .mm-chain li:nth-child(5) { --mm-s: .42; } .mm-chain li:nth-child(6) { --mm-s: .48; }

/* Études de cas : le héros prend toute la largeur, le texte garde sa colonne. */
.mm-case { padding-top: 0 !important; }
.mm-case .legal-header { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mm-case .mm-hero__copy .legal-inner { max-width: none; padding: 0; }
.mm-case .legal-section { scroll-margin-top: calc(var(--mm-bar-h) + 1rem); }
.mm-case .legal-inner { padding-top: clamp(2.5rem, 6vh, 4rem); }
.mm-gallery { margin-inline: calc(50% - 50vw); }
.mm-gallery .case-gallery { display: flex; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; }
.mm-gallery .case-gallery figure { flex: 0 0 auto; width: min(19rem, 64vw); margin: 0; }
.mm-gallery .case-gallery figure.is-wide { width: min(46rem, 86vw); }
.mm-gallery .case-gallery img { border-radius: 14px; box-shadow: 0 24px 48px -26px rgba(15,27,45,.5); }
.mm-gallery [data-sc-stage] { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; padding-top: var(--mm-bar-h); }
.mm-gallery h2 { max-width: 860px; margin-inline: auto; padding-inline: 1.5rem; width: 100%; }
/* Galerie qui tient dans l'écran : trois profondeurs au lieu d'un rail. */
.mm-gallery.mm-pan--static .case-gallery { justify-content: center; flex-wrap: nowrap; }
.mm-gallery.mm-pan--static .case-gallery figure { flex: 0 1 auto; }
.mm-gallery.mm-pan--static figure:nth-child(1) { transform: translate3d(0, calc((var(--sc-p, .5) - .5) * 60px), 0); }
.mm-gallery.mm-pan--static figure:nth-child(2) { transform: translate3d(0, calc((var(--sc-p, .5) - .5) * -90px), 0); }
.mm-gallery.mm-pan--static figure:nth-child(3) { transform: translate3d(0, calc((var(--sc-p, .5) - .5) * 30px), 0); }

/* Survol fin des cartes (souris seulement, désactivé par le moteur sinon). */
[data-sc-tilt] { transition: box-shadow .3s ease; }

/* ——— 10. Mobile ——— */
@media (max-width: 860px) {
  :root { --mm-bar-h: 60px; }
  .mm-bar__logo { font-size: 1.35rem; }
  .mm-bar__cta { display: none; }
  .mm-menu { justify-content: flex-start; padding-top: calc(var(--mm-bar-h) + 2.25rem); }
  .mm-menu__main a { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .mm-menu__foot { flex-direction: column; align-items: flex-start; }

  .mm-hero [data-sc-stage] { align-items: start; }
  .mm-hero h1 { font-size: clamp(2.05rem, 8.6vw, 2.7rem); }
  .mm-hero .lead { font-size: 1rem; }
  .mm-hero .hero-actions { gap: .6rem; }
  .mm-hero .btn-lg { padding: .85rem 1.15rem; }
  .mm-hero--subject .mm-hero__copy > *, .mm-hero--shots .mm-hero__copy > *, .mm-hero--home .mm-hero__copy > div { max-width: none; }
  .mm-plane--glyph { width: 92vw; right: -30vw; top: auto; bottom: -14vw; transform: translate3d(0, calc(var(--sc-p, 0) * -110px), 0) rotate(calc(var(--sc-p, 0) * -14deg)); opacity: .12; }
  .mm-plane--glow { width: 120vmax; height: 120vmax; right: -60vmax; top: -50vmax; }
  /* Sujet : en pied de scène, il monte derrière la copie au défilement. */
  /* Le sujet se tient en pied de scène, à droite, et monte d'un cran au
     défilement ; la copie garde la largeur, la note passe devant l'épaule. */
  .mm-plane--subject { right: -8vw; width: min(50vw, 15rem); opacity: 1; transform: translate3d(0, calc(10% - var(--sc-p, 0) * 50px), 0); }
  .mm-hero--subject .mm-hero__copy, .mm-hero--home .mm-hero__copy { padding-bottom: 24svh; }
  .mm-hero--subject .hero-note, .mm-hero--home .hero-note, .mm-hero--subject .page-meta { max-width: 58%; }
  .mm-plane--shot.s1 { width: 30vw; right: 40vw; top: auto; bottom: 4svh; }
  .mm-plane--shot.s2 { width: 34vw; right: 6vw; top: auto; bottom: 9svh; }
  .mm-plane--shot.s3 { display: none; }
  .mm-plane--shot.wide { width: 70vw; right: 15vw; }
  .mm-hero--shots .mm-hero__copy { padding-bottom: 42svh; }

  .mm-stack .container { grid-template-columns: 1fr; gap: 1.5rem; }
  .mm-stack .section-head { position: static; }
  .mm-stack .problem { top: calc(var(--mm-bar-h) + 1rem + var(--k, 0) * 8px); margin-bottom: 16svh; min-height: 0; padding: 1.25rem 1.2rem; }
  .mm-stack .problems-cta { grid-column: auto; }

  .mm-rail > * { flex-basis: 82vw; }
  .mm-rail.gates > * { flex-basis: 86vw; }
  .mm-pan [data-sc-stage] { gap: 1.25rem; }
  .mm-pan .section-head .lead { font-size: .95rem; }

  .mm-process .flow-steps { grid-template-columns: 1fr; gap: .7rem; }
  .mm-process .flow-step { display: grid; padding: 1rem 1.05rem; }
  .mm-process .flow-num { margin-bottom: 0; width: 2.2rem; height: 2.2rem; font-size: 1.1rem; }
  .mm-process .flow-step strong { font-size: 1.3rem; }
  .mm-process .flow-title { margin-bottom: 1.6rem; }
  .mm-timeline :is(.steps, .flow-steps)::before { top: -.8rem; }
  .mm-timeline .steps { grid-template-columns: 1fr; gap: .6rem; }
  .mm-timeline .step { padding: .85rem 1rem .9rem; }
  .mm-timeline .step p { font-size: .9rem; line-height: 1.5; }

  .mm-iris::before { clip-path: inset(calc(var(--o) * 5%) calc(var(--o) * 3%) round calc(var(--o) * 28px)); }
  .mm-gallery .case-gallery figure { width: 62vw; }
  .mm-gallery .case-gallery figure.is-wide { width: 88vw; }
}

/* ——— 11. Mouvement réduit ———
   Même composition, même contenu : seuls les déplacements disparaissent. */
@media (prefers-reduced-motion: reduce) {
  .mm-menu, .mm-menu.is-open, .mm-menu li, .mm-menu__cta, .mm-bar__inner, .mm-bar__icon span { transition: none !important; }
  .js .mm-hero__copy > *, .js .mm-hero__copy > div > *, .js .mm-hero .mm-plane--subject, .js .mm-hero .mm-plane--shot { animation: none !important; }
  .mm-plane, .mm-hero__copy { transform: none !important; }
  .mm-plane--glyph { transform: translateY(-50%) !important; }
  .mm-plane--shot.s1 { transform: rotate(-4deg) !important; } .mm-plane--shot.s2 { transform: rotate(3deg) !important; } .mm-plane--shot.s3 { transform: rotate(7deg) !important; }
  .mm-hero__copy { opacity: 1 !important; }
  .mm-timeline :is(.step, .flow-step), .mm-timeline .fade-in { opacity: 1 !important; transform: none !important; }
  .mm-timeline :is(.steps, .flow-steps)::before { transform: none; }
  .mm-iris::before { clip-path: none; }
  .mm-finale .cta-band { transform: none; border-radius: var(--radius); }
  .mm-depth img, .mm-depth.sc-in img { clip-path: none; transition: none; }
  .mm-gallery figure { transform: none !important; }
  .mm-depth img { transform: none; }
  .mm-chain li::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .mm-plane--glyph { transform: none !important; }
}
/* Repli : moteur absent ou acte rétrogradé, tout s'affiche à plat. */
.mm-downgraded.mm-timeline :is(.step, .flow-step), .mm-downgraded.mm-timeline .fade-in { opacity: 1; transform: none; }
.mm-downgraded.mm-timeline :is(.steps, .flow-steps)::before { transform: none; }
.mm-static .mm-timeline :is(.step, .flow-step) { opacity: 1; transform: none; }
.mm-static .mm-iris::before { clip-path: none; }
.mm-static .mm-finale .cta-band { transform: none; }
.mm-static .mm-depth img { clip-path: none; }