/* ============================================================
SAMEY — motion.css
Tokens, géométrie des scènes scrubbées, états initiaux,
replis sans JS et reduced-motion.
Hooké aux classes et data-* uniquement : ni couleur, ni type,
ni layout de page ici. Ce fichier ne fait que bouger.
PATCHÉ le 19/08/2026 pour le thème enfant (rapport P0 §4) : alias de classes
.m-* pour chaque accroche data-* (Elementor free ne pose que des classes),
100svh, .m-coarse (aucun pin au tactile), nav en verre sur photo seulement,
repli sans JS de la bande (!important contre le style en ligne).
============================================================ */

:root{
--ease-out:cubic-bezier(.22,1,.36,1);
--ease-inout:cubic-bezier(.65,0,.35,1);
--d-fast:180ms;
--d-reveal:600ms;
--d-hero:1200ms;
--stagger-chars:.03s;
--stagger-lines:.08s;
--stagger-cards:.09s;
--y-reveal:24px;
--y-para:16px;
--y-card:28px;
}

/* ---- Scènes scrubbées : le wrapper donne la longueur de scroll,
la scène est épinglée par sticky (aucun layout piloté en JS). ---- */
[data-scene],.m-scene{position:relative}
.m-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex}

/* ---- Signature : révélation en cascade entre les moments ---- */
.m-js .m-reveal{opacity:0;transform:translateY(var(--y-reveal))}
.m-js .m-reveal[data-para],.m-js .m-reveal.m-para{transform:translateY(var(--y-para))}
.m-reveal{transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.m-reveal.is-in{opacity:1;transform:none}
.m-js .m-cascade > *,.m-js .m-cascade .m-cascade-item{opacity:0;transform:translateY(var(--y-card))}
.m-cascade > *,.m-cascade .m-cascade-item{transition:opacity var(--d-reveal) var(--ease-out),transform var(--d-reveal) var(--ease-out)}
.m-cascade.is-in > *,.m-cascade.is-in .m-cascade-item{opacity:1;transform:none}
/* Elementor : l'enfant direct est un wrapper unique ; motion.js pose .m-cascade-item sur les vrais éléments */

/* ---- .m-title : les mots montent dans une ligne clippée ---- */
.m-line{display:block;overflow:hidden}
.m-word{display:inline-block;will-change:transform}
.m-js .m-title .m-word{transform:translateY(105%)}
.m-title .m-word{transition:transform 900ms var(--ease-out)}
.m-title.is-in .m-word{transform:translateY(0)}

/* ---- Mots pilotés par le scroll (moment 4) : opacité écrite en JS ---- */
.m-word-dim{transform:none!important;opacity:.14}

/* ---- Couches scrubbées : jamais du texte, jamais la photo principale ---- */
.m-parallax{will-change:transform}
[data-hero-photo],.m-hero-photo{will-change:transform,clip-path}
[data-strip-row],.m-strip-a,.m-strip-b{will-change:transform}
[data-col],.m-col{will-change:transform}
[data-arc-row],.m-arc-a,.m-arc-b,[data-arc-band],.m-arc-band{will-change:transform}
[data-curtain]{will-change:clip-path}
[data-panel]{will-change:transform}
[data-dim]{opacity:0;will-change:opacity}
.m-js [data-panel-text] > *{opacity:0}
[data-curtain-panel]{will-change:transform}

/* ---- Bande : les deux textes de section, un seul visible ---- */
[data-strip-copy],.m-strip-copy{opacity:0;transform:translateY(10px);transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out);pointer-events:none}
[data-strip-copy].is-active,.m-strip-copy.is-active{opacity:1;transform:none;pointer-events:auto}

/* ---- Étapes allumées par le trait (moment 5) ---- */
[data-step],.m-step{opacity:.32;transition:opacity 260ms var(--ease-out)}
[data-step].is-active,.m-step.is-active{opacity:1}
[data-line],.m-line-track{transform:scaleY(0);transform-origin:top}

/* ---- Nav : se rétracte à la descente, revient à la montée ---- */
.m-nav{transition:transform 250ms var(--ease-inout)}
.m-nav.is-hidden{transform:translateY(-100%)}
/* Verre dépoli SUR les photos seulement (brief) : hors du héros, la barre devient encre pleine.
!important parce que la maquette pose son fond en style en ligne. Posé par motion.js (is-over-photo). */
.m-js .m-nav:not(.is-over-photo){background-color:#16130F!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ---- Micro-interactions : 180 ms, un seul axe, pas de tilt 3D ---- */
.m-lift{transition:transform var(--d-fast) var(--ease-out)}
.m-lift:hover{transform:translateY(-2px)}
.m-frame{overflow:hidden}

/* ---- Sous 1025 : aucun pin, aucun scrub. Composition, pas réduction.
Les scènes redeviennent des sections empilées à leur état final (repli statique) ;
mobile.js, quand il tourne, lève ce repli (html.m-vif) et anime seul.
01/09 (verdict lot 4, S-9) : borne 767→1024, alignée sur motion.js (<1025) et mobile.js
(max-width:1024) — à 768-1024 les scènes restaient épinglées avec DEUX pilotes. ---- */
@media (max-width:1024px){
  [data-scene],.m-scene{height:auto!important;min-height:0!important}
  .m-stage{position:static!important;height:auto!important;overflow:visible!important;display:flex!important}
  [data-scene] [data-strip-row],.m-scene .m-strip-a,.m-scene .m-strip-b{transform:none}
  [data-scene="strip"].is-scrubbed [data-strip-row],.m-scene-strip.is-scrubbed .m-strip-a,.m-scene-strip.is-scrubbed .m-strip-b{transform:translate3d(0,0,0)}
  /* 07/09 : levé quand motion.js anime les colonnes sous 1025 (html.m-vif-cols) */
  html:not(.m-vif-cols) [data-col],html:not(.m-vif-cols) .m-col{transform:none!important}
  /* la piste redevient une fenêtre : c'est elle qui fait disparaître les images */
  /* !important obligatoire : pages-c.css cible la même piste par .elementor-12 .e-con.smy-…
     (5 classes), une règle à 3 classes ne passe pas. Mesuré : la piste restait à 780 px,
     soit plus haute que la colonne (740), donc course = 0 et rien ne défilait.
     46vh à 390×844 = 388 px : course = 740 − 388 = 352, départ = 844×0,22×vitesse
     (soit 111 px pour la colonne lente : la fenêtre est pleine à 71 % dès l'entrée).
     Et il faut QUATRE classes, pas trois : pages-c.css porte
     `@media (max-width:767.5px){.elementor-12 .e-con.m-col-piste{height:auto!important}}`,
     même spécificité et même !important que la première version de cette règle, mais
     chargé APRÈS motion.css — il gagnait au dernier mot (règle 4 du registre : lire ce
     qui s'applique vraiment, pas ce qu'on croit écrire). */
  .m-vif-cols .m-scene-columns.is-vif-cols .m-col-piste,.m-vif-cols [data-scene="columns"].is-vif-cols .m-col-piste{height:46vh!important;overflow:hidden!important;position:relative!important}
  .m-scene-columns.is-vif-cols .m-frame,[data-scene="columns"].is-vif-cols .m-frame{opacity:1;clip-path:none;transform:none;transition:none}
  /* 31/08 : levé quand mobile.js anime (html.m-vif) */
  html:not(.m-vif) [data-arc-row],html:not(.m-vif) .m-arc-a,html:not(.m-vif) .m-arc-b,html:not(.m-vif) [data-arc-band],html:not(.m-vif) .m-arc-band{transform:none!important}
  [data-scene] [data-hero-photo],.m-scene .m-hero-photo{transform:none!important;clip-path:none!important}
  [data-strip-copy],.m-strip-copy{opacity:1;transform:none;pointer-events:auto}
  [data-strip-copy]:nth-of-type(2),.m-strip-copy:nth-of-type(2){display:none!important}
  [data-scene="strip"].is-scrubbed [data-strip-copy],.m-scene-strip.is-scrubbed .m-strip-copy{opacity:0;transform:translateY(10px);pointer-events:none}
  [data-scene="strip"].is-scrubbed [data-strip-copy].is-active,.m-scene-strip.is-scrubbed .m-strip-copy.is-active{opacity:1;transform:none;pointer-events:auto}
  [data-scene="strip"].is-scrubbed [data-strip-copy]:nth-of-type(2),.m-scene-strip.is-scrubbed .m-strip-copy:nth-of-type(2){display:flex!important}
  /* Sélection : chaque photographie s'ouvre à l'entrée dans l'écran */
  [data-scene="columns"].is-scrubbed [data-col] .m-frame,.m-scene-columns.is-scrubbed .m-col .m-frame{opacity:0;clip-path:inset(9% 6%);transform:scale(1.03);transition:opacity 620ms var(--ease-out),clip-path 900ms var(--ease-out),transform 900ms var(--ease-out)}
  [data-scene="columns"].is-scrubbed [data-col] .m-frame.is-in,.m-scene-columns.is-scrubbed .m-col .m-frame.is-in{opacity:1;clip-path:inset(0);transform:none}
  [data-scene="columns"].is-scrubbed [data-col-head],.m-scene-columns.is-scrubbed .m-col-head{opacity:0;transform:translateY(20px);transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
  [data-scene="columns"].is-scrubbed [data-col-head].is-in,.m-scene-columns.is-scrubbed .m-col-head.is-in{opacity:1;transform:none}
  [data-step],.m-step{opacity:1}
  [data-line],.m-line-track{transform:scaleY(1)}
  [data-curtain]{clip-path:none!important}
  [data-curtain] img{transform:none!important}
  [data-panel]{transform:none!important}
  [data-dim]{display:none!important}
  [data-panel-text] > *{opacity:1!important;transform:none!important}
  [data-curtain-panel]{transform:none!important;position:static!important}
}

/* ---- Tactile (pointer:coarse, décision 13 du 19/08) : aucun pin, même en tablette
ou téléphone paysage. motion.js pose .m-coarse ; l'état final est affiché. ---- */
.m-coarse [data-scene],.m-coarse .m-scene{height:auto!important;min-height:0!important}
.m-coarse .m-stage{position:static!important;height:auto!important;overflow:hidden!important}
/* overflow:hidden gardé (pas visible) : au-dessus de 767 les rangées de la bande et l'arc du héros
   débordent en largeur et feraient défiler la page horizontalement (mesuré 3008 px à 1024 tactile) */
.m-coarse:not(.m-vif-cols) [data-col],.m-coarse:not(.m-vif-cols) .m-col,.m-coarse:not(.m-vif) [data-arc-row],.m-coarse:not(.m-vif) [data-arc-band]{transform:none!important}
/* la bande garde ses deux textes superposés (grid-area 1/1) : stripMobile les bascule en opacité */
.m-coarse [data-step]{opacity:1}.m-coarse [data-line]{transform:scaleY(1)}
.m-coarse .m-word-dim{opacity:1}

/* ---- Sans JS : tout est visible ---- */
html:not(.m-js) .m-reveal,
html:not(.m-js) .m-cascade > *,html:not(.m-js) .m-cascade-item,
html:not(.m-js) .m-title .m-word{opacity:1;transform:none}
html:not(.m-js) [data-step],html:not(.m-js) .m-step,html:not(.m-js) [data-strip-copy],html:not(.m-js) .m-strip-copy{opacity:1}
html:not(.m-js) [data-line],html:not(.m-js) .m-line-track{transform:scaleY(1)}

/* ---- prefers-reduced-motion : rien ne bouge, état final, tout lisible ---- */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;scroll-behavior:auto!important;
}
[data-scene],.m-scene{height:auto!important;min-height:0!important}
.m-stage{position:static!important;height:auto!important;overflow:visible!important}
.m-js .m-reveal,.m-js .m-cascade > *,.m-js .m-cascade-item{opacity:1;transform:none}
.m-js .m-title .m-word{transform:none}
.m-word-dim{opacity:1}
[data-hero-photo],.m-hero-photo{transform:none!important;clip-path:none!important}
[data-strip-row],.m-strip-a,.m-strip-b{transform:none!important}
[data-col],.m-col{transform:none!important}
[data-arc-row],.m-arc-a,.m-arc-b,[data-arc-band],.m-arc-band{transform:none!important}
[data-curtain]{clip-path:none!important}
[data-curtain] img{transform:none!important}
[data-panel]{transform:none!important}
[data-dim]{display:none!important}
[data-panel-text] > *{opacity:1!important;transform:none!important}
[data-curtain-panel]{transform:none!important;position:static!important}
[data-step],.m-step{opacity:1}
[data-line],.m-line-track{transform:scaleY(1)}
[data-strip-copy],.m-strip-copy{opacity:1;transform:none}
[data-strip-copy]:nth-of-type(2),.m-strip-copy:nth-of-type(2){display:none!important}
}