/* ============================================================
   ANIMATIONS AU DÉFILEMENT
   Tout ici est PILOTÉ PAR LA POSITION, jamais déclenché par un
   minuteur : on remonte, tout se rejoue à l'envers depuis la
   position courante. Rien ne tourne quand on ne défile pas.

   Exécuté par le compositeur, hors du fil principal.
   Uniquement transform. Jamais depuis une opacité nulle.

   Toute cette feuille est sous double garde : le navigateur
   doit savoir faire, et la personne ne doit pas avoir demandé
   moins de mouvement. Sinon la page reste exactement telle
   qu'elle est, complète et lisible.
   ============================================================ */

@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){

  /* ---------- 1. Cascade dans les grilles ----------
     Le décalage ne vient pas d'un délai en millisecondes mais
     d'une PLAGE décalée : chaque carte se lève un peu plus tard
     dans la traversée. Donc réversible, comme le reste. */
  .js .domaine,
  .js .argument,
  .js .etape,
  .js .autre,
  .js .format{
    animation:lever linear both;
    animation-timeline:view();
    animation-range:entry calc(var(--r, 0) * 7%) entry calc(46% + var(--r, 0) * 7%);
  }

  .js .domaine:nth-child(2),
  .js .argument:nth-child(2),
  .js .etape:nth-child(2),
  .js .format:nth-child(2){ --r:1 }
  .js .domaine:nth-child(3),
  .js .argument:nth-child(3),
  .js .etape:nth-child(3),
  .js .format:nth-child(3){ --r:2 }
  .js .domaine:nth-child(4),
  .js .etape:nth-child(4){ --r:3 }

  /* ---------- 2. Les barres du comparatif ----------
     Elles se tracent à mesure qu'on descend, et se rétractent
     si on remonte. Le chiffre, lui, est lisible dès le départ. */
  .js .delai .mesure-ligne__trait{
    transition:none;
    animation:tracer-barre linear both;
    animation-timeline:view();
    animation-range:entry 12% entry 58%;
  }
  .js .delai .mesure-ligne--apres .mesure-ligne__trait{
    animation-range:entry 22% entry 68%;
  }

  /* ---------- 3. Le bloc d'accroche s'éloigne ----------
     Pendant qu'on quitte le premier écran, le bloc monte un peu
     plus vite que le texte. Deux plans, pas un effet. */
  .js .accroche__bloc{
    animation:eloigner linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 100%;
  }

  /* ---------- 4. Les en-têtes de section ----------
     Déjà pris en charge dans base.css par .apparait ; on ne
     redéclare rien ici pour éviter deux sources de vérité. */
}
}

/* Les images-clés vivent hors du @supports : une règle inutilisée
   ne coûte rien, et elles restent lisibles au même endroit. */
@keyframes lever{
  from{ transform:translateY(var(--glisse-carte)) }
  to  { transform:none }
}
@keyframes tracer-barre{
  from{ transform:scaleX(0) }
  to  { transform:scaleX(var(--part, 1)) }
}
@keyframes eloigner{
  from{ transform:none }
  to  { transform:translateY(calc(var(--parallaxe) * -1)) }
}