/* ------------------------------------------------------------------
   scene.css — le geste. Version 4.1 : le calme, et le fluide.

   La regle, dictee apres la v3 : l'animation doit etre douce,
   progressive et constructive — elle sert le narratif, jamais
   l'effet. La construction se raconte par l'ORDRE des arrivees
   (le stagger), pas par la distance, le flou ou la rotation.
   Un mouvement qu'on remarque pour lui-meme est un mouvement
   de trop.

   Trois matieres :
   · une PIECE (.pi) apparait presque sur place — une vingtaine de
     pixels de course, pas plus — et se pose sans bruit ;
   · un TEXTE (.mv) ne tombe pas en bloc : ses enfants se suivent,
     sur-titre, titre, liste, cloture. Le conteneur ne bouge pas ;
   · un FIL (.fil) monte seul, c'est un trait, il n'a pas de poids.

   La v3 ajoutait un flou d'arrivee, une micro-rotation et un
   flottement perpetuel. Retires tous les trois : c'etait du
   spectacle, pas du recit. La 4.1 retire aussi ce qui sautillait :
   la courbe expo (un bond par piece, puis une traine morte), le
   scale sur les images (claquement de nettete a l'arrivee), et
   l'opacite qui finissait avant le mouvement (le deplacement
   restait visible a nu). La courbe est desormais cubique et douce,
   le fondu couvre tout le trajet, et rien ne change d'echelle.

   PROGRESSION, PAS DEPENDANCE. Tout est visible par defaut. C'est le
   script qui pose data-anim pour demander a cacher, juste avant de
   faire entrer. Si le script ne se charge pas, la page est la.

   Les ombres sont en cqw : elles suivent la largeur du conteneur.
-------------------------------------------------------------------*/

:root{
  --encre:#02060D;
  --trait:rgba(242,235,219,.17);
  /* Le langage de mouvement (--mv-entree, --mv-doux, --mv-x, --mv-pas,
     --mv-amp, --mv-long) vit dans assets/mouvement.css, et nulle part
     ailleurs. Cette feuille le LIT. Ne l'y redeclare pas : ces jetons ont
     ete dupliques ici et dans cas.css jusqu'au 31/08/2026, et une correction
     de courbe faite d'un seul cote a laisse le rebond en place. */
}

.sc{
  position:relative; width:100%;
  aspect-ratio:var(--ratio);
  container-type:inline-size;
}

.pw{
  position:absolute;
  left:var(--l); top:var(--t); width:var(--w);
  z-index:var(--z);
}
.sc[data-anim] .pw{ will-change:transform; }

.pi{
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--om);
  outline:1px solid var(--trait);
  outline-offset:-1px;
}
.pi img{ display:block; width:100%; height:auto; }

/* CVE 2026-08-31 · L'ARMEMENT NE S'ANIME JAMAIS.
   scene.js est charge en `defer` : il s'execute APRES l'analyse du HTML, donc
   souvent apres que le voile a leve et que la page est visible. Poser
   `data-anim` applique alors `opacity:0` AVEC la transition active : le contenu
   affiche disparait en fondu, puis revient. Un aller-retour, en bien moins
   d'une seconde. C'est le defaut que Christophe voyait a chaque arrivee.

   Mesure du 31/08 : le sur-titre passait de 1 a 0,13 d'opacite et redescendait
   de 10,5 px avant de remonter.

   Le script pose cette classe, arme, force un reflow, puis la retire. */
.sc-arme .pi, .sc-arme .fil, .sc-arme .mv > *{
  transition:none !important;
}

/* ── L'ENTREE D'UNE PIECE ────────────────────────────────────────────
   Elle vient de sa direction (--dx --dy) mais de tout pres, a peine
   plus petite, et fond en place. L'opacite se resout avant la
   position : la piece est deja la quand elle finit de se poser. */
.sc[data-anim] .pi{
  opacity:0;
  transform:translate3d(calc(var(--dx) * var(--mv-amp)),
                        calc(var(--dy) * var(--mv-amp)), 0);
  transition:
    opacity   var(--mv-duree) var(--mv-doux),
    transform var(--mv-duree) var(--mv-entree);
  /* La figure entre APRES le texte : voir --mv-fig dans mouvement.css. */
  transition-delay:calc(var(--mv-fig) + var(--n) * var(--mv-pas));
}
.sc[data-anim][data-vu="true"] .pi{ opacity:1; transform:translate3d(0,0,0); }

/* La respiration de la v3 (flottement perpetuel des pieces) a ete
   retiree : une illustration posee doit rester posee. Le seul
   mouvement continu qui reste est la parallaxe, parce qu'elle repond
   au lecteur au lieu de s'agiter toute seule. */

/* La scene vide : le contour de l'ecran qu'on attendait. */
.fil{
  position:absolute;
  left:var(--l); top:var(--t); width:var(--w); height:var(--h);
  border:1px solid var(--trait);
  border-radius:.7cqw;
}
.sc[data-anim] .fil{
  opacity:0; transform:translate3d(0,22px,0);
  transition-delay:var(--mv-fig);
  transition:
    opacity   var(--mv-long) var(--mv-doux),
    transform var(--mv-long) var(--mv-entree);
}
.sc[data-anim][data-vu="true"] .fil{ opacity:1; transform:translate3d(0,0,0); }

/* ── LA CASCADE D'UN TEXTE ───────────────────────────────────────────
   Le bloc ne bouge pas ; ses enfants se suivent, 90 ms d'ecart.
   L'ordre du DOM est l'ordre de lecture : sur-titre, titre, liste,
   cloture — la hierarchie s'explique d'elle-meme en entrant. */
.mv[data-anim] > *{
  opacity:0;
  transform:translate3d(0,12px,0);
  transition:
    opacity   var(--mv-duree) var(--mv-doux),
    transform var(--mv-duree) var(--mv-entree);
}
.mv[data-anim] > :nth-child(2){ transition-delay:calc(1 * var(--mv-pas)); }
.mv[data-anim] > :nth-child(3){ transition-delay:calc(2 * var(--mv-pas)); }
.mv[data-anim] > :nth-child(4){ transition-delay:calc(3 * var(--mv-pas)); }
.mv[data-anim] > :nth-child(5){ transition-delay:calc(4 * var(--mv-pas)); }
.mv[data-anim] > :nth-child(6){ transition-delay:calc(5 * var(--mv-pas)); }
.mv[data-anim] > :nth-child(n+7){ transition-delay:calc(6 * var(--mv-pas)); }
.mv[data-anim][data-vu="true"] > *{ opacity:1; transform:translate3d(0,0,0); }

@media (prefers-reduced-motion:reduce){
  .sc[data-anim] .pi,
  .sc[data-anim] .fil,
  .mv[data-anim] > *{
    opacity:1!important; transform:none!important; transition:none!important;
  }
}