/* Trackday Giallo : couche d'animation pilotée par classes (td-anim-*).
   Règle d'or : AUCUN état masqué hors de `.tdg-js`. La classe tdg-js est posée sur <html>
   par un petit script en tête, seulement si le mouvement est autorisé : sans JS ou avec
   « réduire les animations », le contenu reste entièrement visible.
   Valeurs reprises de maquettes/accueil-giallo/style.css. */

/* ---------- Lenis (défilement doux) ---------- */
html.lenis, html.lenis body { height: auto; }
/* Le thème parent met scroll-behavior: smooth sur <html> : cela fausse Lenis et les mesures de ScrollTrigger. */
html.tdg-js, html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Découpage en lettres et en mots (créés par JS) ---------- */
.tdg-ligne-mot { display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; padding-bottom: .04em; }
.tdg-lettre { display: inline-block; will-change: transform; }.tdg-js .td-anim-lettres:not(.tdg-pret),
.tdg-js .td-anim-mots:not(.tdg-pret) { visibility: hidden; }
.tdg-js .td-anim-mots .tdg-mot { opacity: .12; }

/* ---------- États initiaux (posés seulement avec JS) ---------- */
.tdg-js .td-anim-revele { opacity: 0; transform: translateY(40px); }
.tdg-js .td-anim-rideau { clip-path: inset(100% 0 0 0); }

/* ---------- Parallaxe, galerie ---------- */
.tdg-parallaxe-actif { overflow: hidden; }
.tdg-parallaxe-actif > img, .tdg-parallaxe-actif > video { will-change: transform; }
.tdg-js .td-anim-galerie { overflow: hidden; }
.tdg-js .td-anim-galerie [data-vitesse] { will-change: transform; }

/* ---------- Bandeau continu ---------- */
.td-anim-bandeau.tdg-bandeau-actif { position: relative; overflow: hidden; }
/* Bouton pause du bandeau (créé par JS) : discret, aux couleurs du bandeau, icône pause ↔ lecture.
   Spécificité (0,2,0)+ : le reset de Hello Elementor (button, [type=button]:focus en rose) est chargé après. */
.td-anim-bandeau .tdg-bandeau-pause { position: absolute; top: 50%; right: var(--tdg-marge, 24px); z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: -20px 0 0; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: var(--tdg-marbre, #f4f4f4); color: var(--tdg-carbone, #222); cursor: pointer; }
.td-anim-bandeau .tdg-bandeau-pause:hover, .td-anim-bandeau .tdg-bandeau-pause:focus { background: var(--tdg-carbone, #222); color: var(--tdg-blanc, #fff); border-color: var(--tdg-carbone, #222); }
.tdg-bandeau-pause span { display: block; box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.tdg-bandeau-pause.est-en-pause span { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.tdg-bandeau-piste { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.tdg-bandeau-bloc { flex: none; display: flex; align-items: center; gap: var(--tdg-bandeau-gap, 40px); padding-right: var(--tdg-bandeau-gap, 40px); }

/* Sections épinglées : les conteneurs Elementor ont « transition: transform .4s » ; en fin d'épinglage, GSAP décale
   la section d'un coup (translateY) et cette transition la ferait sauter puis revenir. Classe doublée pour passer devant .e-con. */
.tdg-horizontal-actif.tdg-horizontal-actif, .tdg-etapes-actif.tdg-etapes-actif { transition: none; }

/* ---------- Section horizontale épinglée (écran large seulement, posée par JS) ---------- */
.tdg-horizontal-actif { overflow: hidden; }
.tdg-horizontal-actif .tdg-piste {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
	height: 100svh;
	align-items: center;
	gap: 4vw;
}
.tdg-horizontal-actif .td-anim-panneau { flex: none; }
:where(.tdg-horizontal-actif .td-anim-panneau) { width: 62vw; max-width: 980px; }

/* ---------- Section en étapes épinglées (écran large seulement, posée par JS) ---------- */
.tdg-etapes-actif { min-height: 100svh; }
/* .tdg-pile est un bloc généré par JS autour des étapes (ou des visuels) : il peut être frère direct de la section. */
.tdg-pile { display: grid; position: relative; flex: 1 1 0; min-width: 0; align-content: center; }
.tdg-pile > .td-anim-etape,
.tdg-pile > .td-anim-visuel { grid-area: 1 / 1; max-width: 100%; }
.tdg-js .tdg-etapes-actif .td-anim-etape { opacity: 0; transform: translateY(40px); transition: opacity .6s var(--tdg-ease-out), transform .8s var(--tdg-ease-out); }
.tdg-js .tdg-etapes-actif .td-anim-etape.est-active { opacity: 1; transform: none; }
.tdg-js .tdg-etapes-actif .td-anim-visuel { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--tdg-ease); }
.tdg-js .tdg-etapes-actif .td-anim-visuel.est-active { clip-path: inset(0 0 0 0); }
.tdg-etapes-actif [data-etapes-barre] { transform: scaleX(0); transform-origin: left; }

/* ---------- Barre de progression (créée par JS) ---------- */
.tdg-progression { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9990; pointer-events: none; }
.tdg-progression i { display: block; height: 100%; background: var(--tdg-accent); transform-origin: left; transform: scaleX(0); }

/* ---------- Curseur personnalisé (créé par JS, jamais sur écran tactile) ---------- */
.tdg-curseur {
	position: fixed; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
	border-radius: 50%; background: var(--tdg-blanc); mix-blend-mode: difference;
	z-index: 9995; pointer-events: none; display: grid; place-items: center;
	transition: width .4s var(--tdg-ease-out), height .4s var(--tdg-ease-out), margin .4s var(--tdg-ease-out), background .3s, opacity .3s;
}
.tdg-js .tdg-curseur { opacity: 0; }
.tdg-js .tdg-curseur.est-visible { opacity: 1; }
.tdg-curseur.est-grand { width: 88px; height: 88px; margin: -44px 0 0 -44px; mix-blend-mode: normal; background: var(--tdg-accent); }
.tdg-curseur__texte { font-family: var(--tdg-police); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--tdg-blanc); }
.tdg-js .tdg-curseur__texte { opacity: 0; transition: opacity .2s; }
.tdg-js .tdg-curseur.est-grand .tdg-curseur__texte { opacity: 1; }
@media (hover: none), (pointer: coarse) { .tdg-curseur { display: none; } }

/* Sous 900 px, les classes tdg-horizontal-actif et tdg-etapes-actif ne sont jamais posées :
   la mise en page Elementor d'origine reste en place (disposition verticale, sans épinglage). */