/* ========================================================================== Animations — états initiaux + effets purement CSS La classe .js-anim est posée sur par un script inline dans le , donc uniquement si le JS tourne. Un chien de garde la retire au bout de 3 s si animations.js n'a pas démarré : sans JS, ou si un fichier ne se charge pas, le contenu reste visible. Le ciblage suit la STRUCTURE des pages (section > .container > blocs), pas des noms de classes : les 22 pages ont des classes différentes mais la même ossature. animations.js réaffiche systématiquement tout ce qu'il n'anime pas. ========================================================================== */ /* --- 1. état initial des blocs qui se révèlent au scroll --- transition-property : plusieurs boutons du site sont en `transition: all`. L'opacité posée par GSAP repassait alors dans une transition CSS de 0,3 s, ce qui rendait leur apparition molle (et bloquait le bouton final). On garde les transitions de survol, on retire juste l'opacité. */ html.js-anim body > section > .container > *, html.js-anim body > div.stats-band > .container > *, html.js-anim body > div.article-hero > .container > * { opacity: 0; transition-property: background, background-color, border, border-color, color, box-shadow, transform, filter; } /* --- 2. dégradé animé sur le mot mis en couleur du titre d'accueil --- */ html.js-anim .hero-text h1 span { background: linear-gradient(90deg, #00b0cc, #8fe9f6, #00b0cc); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: lc-degrade 6s linear infinite; } @keyframes lc-degrade { to { background-position: -200% 0; } } /* --- 3. halo lumineux qui suit le curseur sur les cartes --- */ .lc-spot { position: relative; } .lc-spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient( 240px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 176, 204, 0.15), transparent 62% ); } .lc-spot:hover::after { opacity: 1; } /* --- 4. mots découpés par SplitText : garder un retour à la ligne normal --- */ .lc-mot { display: inline-block; } /* --- 5. réglage système « réduire les animations » : tout est neutralisé --- */ @media (prefers-reduced-motion: reduce) { html.js-anim body > section > .container > *, html.js-anim body > div.stats-band > .container > *, html.js-anim body > div.article-hero > .container > * { opacity: 1 !important; transform: none !important; } html.js-anim .hero-text h1 span { animation: none; } .lc-spot::after { display: none; } }