/* talnivo-scroll.css : mécanisme du moteur (actes épinglés, séquences, rangées, entrées).
   Le style de la page vit dans site.css. Par défaut (sans JS, ou mouvement réduit), tout est statique. */

[data-act] { position: relative; }
[data-act] > .scene { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }

/* Avec JS et mouvement autorisé : la scène est épinglée pendant la hauteur de l'acte. */
.js:not(.reduit) [data-act] > .scene {
  position: sticky; top: 0; height: 100vh; height: 100svh;
}

/* Séquence de photos (travelling sans vidéo) */
[data-seq] { position: absolute; inset: 0; }
[data-seq] > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  will-change: opacity, transform;
}
/* Sans mouvement : seule la première image est montrée. */
html:not(.js) [data-seq] > img:not(:first-child),
.reduit [data-seq] > img:not(:first-child) { display: none; }
.js:not(.reduit) [data-seq] > img:not(:first-child) { opacity: 0; }

/* Indices : visibles par défaut, pilotés seulement quand le moteur tourne. */
.js:not(.reduit) [data-cue] { opacity: 0; will-change: opacity, transform; }

/* Rangée latérale */
[data-rail] { display: flex; will-change: transform; }
html:not(.js) [data-rail-zone], .reduit [data-rail-zone] {
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
html:not(.js) [data-rail] > *, .reduit [data-rail] > * { scroll-snap-align: start; }

/* Révélation : seulement avec mouvement */
.js:not(.reduit) [data-reveal] { clip-path: inset(100% 0 0 0); will-change: clip-path; }

/* Entrées une seule fois */
.js:not(.reduit) [data-in] > * {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 620ms cubic-bezier(.2,.7,.2,1), transform 620ms cubic-bezier(.2,.7,.2,1);
}
.js:not(.reduit) [data-in].vu > * { opacity: 1; transform: none; }

/* Acte trop haut pour l'écran : présenté sans épinglage (voir mesurer() dans le moteur). */
.js [data-act].acte-statique > .scene { position: relative !important; height: auto !important; min-height: 100vh; overflow: visible !important; }
.js .acte-statique [data-cue] { opacity: 1 !important; transform: none !important; }
.js .acte-statique [data-seq] > img:not(:first-child) { display: none; }
.js .acte-statique [data-seq] > img:first-child { transform: none !important; }
.js .acte-statique [data-rail-zone] { overflow-x: auto; scroll-snap-type: x proximity; }
.js .acte-statique [data-rail] { transform: none !important; }

/* Un bloc qui reçoit le focus clavier reste visible. */
.js [data-cue]:focus-within { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }

@media (prefers-reduced-motion: reduce) {
  [data-act] { height: auto !important; }
  * { scroll-behavior: auto !important; }
}