/* ==========================================================================
   Enjeux Informatique — Couche mouvement au défilement
   Chargée après styles.css. Tout est en enhancement progressif : sans JS,
   aucune classe .mo-* n'est posée et la page reste celle de styles.css.
   ========================================================================== */

/* Le défilement inertiel et le `scroll-behavior: smooth` natif sont deux
   moteurs concurrents : quand l'inertie prend la main, on coupe le natif. */
html.mo-inertia { scroll-behavior: auto; }

/* Les sections découpent leur débord sans devenir un conteneur de
   défilement — sinon `position: sticky` ne fonctionne plus à l'intérieur. */
.section, .page-hero { overflow: clip; }

/* --- Parallaxe : couches décoratives uniquement ---------------------------
   On pilote la propriété `translate`, pas `transform` : les halos du hero ont
   déjà une animation de transform, les deux se composent sans s'écraser. */
[data-mo-par] { will-change: translate; }

/* --- Révélation par clip-path (médias) ---------------------------------- */
.mo-clip {
  clip-path: inset(0 0 100% 0 round var(--radius-lg));
  transition: clip-path 1.05s cubic-bezier(.16, 1, .3, 1);
  will-change: clip-path;
}
.mo-clip.is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
.mo-clip__scale { transition: transform 1.25s cubic-bezier(.16, 1, .3, 1); transform: scale(1.07); }
.mo-clip.is-in .mo-clip__scale { transform: none; }
.mo-clip.is-done { clip-path: none; will-change: auto; }

/* --- Inertie rendue visible : les médias suivent la vitesse de défilement -
   Amplitude volontairement plafonnée côté JS (≈0.9°) : on veut sentir la
   matière, pas voir l'effet. */
.mo-vel { transform: skewY(var(--mo-skew, 0deg)); transform-origin: 50% 50%; }

/* --- Séquence épinglée : « Un accompagnement en 4 étapes » ---------------- */
.seq__count, .seq__rail { display: none; }

@media (min-width: 900px) {
  .seq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }

  .seq__aside { position: sticky; top: calc(var(--header-h) + 56px); }
  .seq__aside .section-head { margin-bottom: 28px; max-width: none; }

  .seq__count {
    display: flex; align-items: baseline; gap: 10px;
    font-family: var(--font-display); color: var(--ink-300);
    font-size: .95rem; font-variant-numeric: tabular-nums;
  }
  .seq__count b {
    font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--brand-600);
    display: inline-block; min-width: 1.6em;
  }

  /* Le rail se remplit au rythme de la progression dans la séquence : c'est
     le chemin parcouru, pas un ornement. */
  .seq__steps { position: relative; display: grid; grid-template-columns: 1fr; gap: 0; padding-left: 38px; }
  .seq__rail {
    display: block; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px;
    background: var(--line);
  }
  .seq__rail::after {
    content: ""; position: absolute; inset: 0; background: var(--grad-brand);
    transform: scaleY(var(--seq-p, 0)); transform-origin: 50% 0;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
  }

  .seq .step {
    padding: 34px 0; border: 0; background: none; box-shadow: none; margin: 0;
    opacity: .34; transition: opacity .55s ease, transform .55s cubic-bezier(.16, 1, .3, 1);
    transform: translateY(6px);
  }
  .seq .step.is-active { opacity: 1; transform: none; }
  .seq .step::before {
    content: ""; position: absolute; left: -38px; top: 46px;
    width: 9px; height: 9px; border-radius: 50%; margin-left: -4px;
    background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--ink-300);
    transition: background .4s ease, box-shadow .4s ease;
  }
  .seq .step.is-active::before { background: var(--brand-500); box-shadow: inset 0 0 0 1px var(--brand-500); }
  .seq .step { position: relative; }
  /* Le rang de l'étape est déjà porté par le rail et le compteur fixé :
     la pastille numérotée ferait doublon. */
  .seq .step .step__num { display: none; }
  .seq .step h3 { font-size: 1.5rem; margin-bottom: 8px; }
  /* La colonne est large : on borne la longueur de ligne pour rester dans
     une mesure de lecture confortable. */
  .seq .step p { margin-bottom: 0; color: var(--ink-500); max-width: 52ch; padding-right: 24px; }
}

/* --- Vignettes WebGL ----------------------------------------------------- */
.mo-gl-host { position: relative; display: block; }
.mo-gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
/* L'image reste dans le DOM (alt, SEO, impression) ; le canvas ne la masque
   qu'une fois la texture réellement téléversée. */
.mo-gl-on .mo-gl-host > img { opacity: 0; }
.mo-gl-host > img { transition: opacity .2s ease; }

/* --- Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.mo-inertia { scroll-behavior: auto; }
  .mo-clip { clip-path: none !important; transition: none; }
  .mo-clip__scale { transform: none !important; transition: none; }
  .mo-vel { transform: none !important; }
  .seq .step { opacity: 1 !important; transform: none !important; }
  .seq__rail::after { transition: none; }
  [data-mo-par] { translate: none !important; }
}

/* Impression : aucune couche de mouvement ne doit masquer du contenu. */
@media print {
  .mo-clip { clip-path: none !important; }
  .mo-gl { display: none; }
  .mo-gl-on .mo-gl-host > img { opacity: 1; }
}