/* =========================================================
   Animation au scroll : styles des roles (js/motion.js ecrit --mp / --mv).
   Seulement transform (translate / scale) et opacity.
   Reglages globaux : variables --m-* ci-dessous.
   ========================================================= */
:root {
  --m-dist: 56px;        /* montee des textes, boutons */
  --m-dist-lg: 96px;     /* titres, cartes, panneaux */
    --m-scale: 0.88;       /* echelle de depart des cartes */
  --m-par: 90px;         /* amplitude du parallax continu */
}
@media (max-width: 900px) {
  :root { --m-dist: 36px; --m-dist-lg: 60px; --m-scale: 0.93; --m-par: 0px; }
}

.m-on [data-m] { --mp: 1; --mv: 0.5; }

.m-on [data-m="title"] { opacity: var(--mp); translate: 0 calc((1 - var(--mp)) * var(--m-dist-lg)); }
.m-on [data-m="text"]  { opacity: var(--mp); translate: 0 calc((1 - var(--mp)) * var(--m-dist)); }
.m-on [data-m="btn"]   { opacity: var(--mp); translate: 0 calc((1 - var(--mp)) * var(--m-dist)); scale: calc(0.94 + 0.06 * var(--mp)); }
.m-on [data-m="card"]  { opacity: var(--mp); translate: 0 calc((1 - var(--mp)) * var(--m-dist-lg)); scale: calc(var(--m-scale) + (1 - var(--m-scale)) * var(--mp)); }
.m-on [data-m="panel"] { opacity: var(--mp); translate: 0 calc((1 - var(--mp)) * var(--m-dist-lg)); scale: calc(0.86 + 0.14 * var(--mp)); }

/* Images : fondu + leger zoom, puis parallax pendant le defilement */
.m-on [data-m="media"] {
  opacity: var(--mp);
  scale: calc(1.16 - 0.16 * var(--mp));
  translate: 0 calc((1 - var(--mp)) * var(--m-dist) + (var(--mv) - 0.5) * var(--m-par) * -0.5);
}
.m-on [data-m="graphic"] {
  opacity: var(--mp);
  scale: calc(0.8 + 0.2 * var(--mp));
  translate: 0 calc((1 - var(--mp)) * var(--m-dist-lg) + (var(--mv) - 0.5) * var(--m-par) * -0.6);
}

/* Section Solutions : "scroll reveal" gauche / droite.
   Colonne gauche = entre par la gauche, colonne droite = par la droite, l'emblème grandit au centre. */
:root { --m-side: clamp(200px, 38vw, 600px); }
@media (max-width: 900px) { :root { --m-side: 64vw; } }
#solutions-preview { overflow-x: clip; }
.m-on [data-m="side"] {
  opacity: var(--mp);
  translate: calc((1 - var(--mp)) * var(--mx, 0) * var(--m-side)) 0;
  scale: calc(0.9 + 0.1 * var(--mp));
  transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.m-on [data-m="side"]:hover { transform: translateY(-4px); }
.m-on [data-m="emblem"] {
  opacity: var(--mp);
  scale: calc(0.72 + 0.28 * var(--mp));
  translate: 0 calc((var(--mv) - 0.5) * var(--m-par) * -0.8);
}

/* Composition "A propos" : chaque piece a sa profondeur */
.m-on [data-m="piece"] {
  opacity: var(--mp);
  translate: 0 calc((1 - var(--mp)) * var(--m-dist-lg) * (0.6 + var(--md, 1) * 0.35) + (var(--mv) - 0.5) * var(--m-par) * (-0.25 * var(--md, 1)));
  scale: calc(0.94 + 0.06 * var(--mp));
}

/* Heros : le fond bouge plus lentement que le contenu quand on defile */
.m-on .ax-hero .ax-bg { scale: 1.12; translate: 0 calc(var(--hp, 0) * 5%); }
.m-on .ax-hero .ax-inner { opacity: calc(1 - var(--hp, 0) * 0.9); translate: 0 calc(var(--hp, 0) * -28px); }
.m-on #hero .wy-scene { translate: 0 calc(var(--hp, 0) * 46px); }
.m-on #hero .wy-text { translate: 0 calc(var(--hp, 0) * -22px); }

/* Les anciennes revelations par classe restent valables pour les elements non pris en charge */
@media (prefers-reduced-motion: reduce) {
  .m-on [data-m] { opacity: 1 !important; translate: none !important; scale: none !important; }
}

/* Les elements agrandis au depart (images, panneaux) ne doivent jamais creer de defilement horizontal */
main, footer.ft { overflow-x: clip; }