/* YNEO — états d'interaction. --------------------------------------------------------------------------- Complément de anim.js : Motion gère les animations d'entrée, le CSS gère les états (hover, active, focus). Aucun contenu n'est masqué ici — le masquage est posé par JavaScript, pour que la page reste lisible si le CDN tombe. Constat de l'audit : le site n'avait AUCUN état :active, donc aucun retour visuel au clic, en particulier au doigt sur mobile. */ .btn, .card, .numlist li a, .fchips span, .chip { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; } /* Retour au clic — l'enfoncement rassure sur mobile, où il n'y a pas de survol */ .btn:active { transform: translateY(1px) scale(.985); } .card:active { transform: translateY(-1px) scale(.995); } .chip:active, .fchips span:active{ transform: scale(.96); } .numlist li a:active { opacity: .7; } /* Carte : l'ombre suit l'élévation, sinon le décalage paraît flotter */ .card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.13); } /* Puce de formulaire cochée : léger appui visuel */ .fchips input[type=radio]:checked + span { transform: scale(1.04); } /* Pastille numérotée : elle accompagne le survol du libellé */ .numlist li a .n { transition: transform .18s cubic-bezier(.22,1,.36,1); } .numlist li a:hover .n { transform: scale(1.12); } /* Navigation : soulignement qui se déploie depuis la gauche */ .nav ul a { position: relative; } .nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .28s cubic-bezier(.22,1,.36,1); } .nav ul a:hover::after, .nav ul a[aria-current]::after { transform: scaleX(1); transform-origin: left; } @media (prefers-reduced-motion: reduce) { .btn, .card, .numlist li a, .fchips span, .chip, .numlist li a .n, .nav ul a::after { transition: none; } .btn:active, .card:active, .chip:active, .fchips span:active, .fchips input[type=radio]:checked + span { transform: none; } } /* Corps de FAQ : conteneur créé par gsap-anim.js pour rendre
animable en hauteur. Neutre par défaut, pour ne rien changer sans JS. */ .faq-corps { will-change: height; } /* --------------------------------------------------------------------------- Masquage AVANT premier rendu. La classe .anim-prep est posée par un script inline dans , donc avant que le navigateur ne peigne quoi que ce soit. Sans ça, l'élément s'affiche puis GSAP le masque puis le révèle : c'est le clignotement 100 → 0 → 100. gsap-anim.js reprend la main (gsap.set) et retire la classe dans la foulée. Filet : le script inline retire la classe au bout de 2,5 s si GSAP n'a pas pris le relais — le contenu ne peut donc jamais rester invisible. */ html.anim-prep main .kicker, html.anim-prep main .s-title, html.anim-prep main h2, html.anim-prep main h3, html.anim-prep main p, html.anim-prep main ol, html.anim-prep main ul, html.anim-prep main .btn, html.anim-prep main .card, html.anim-prep main .stats > div, html.anim-prep main figure, html.anim-prep main blockquote, html.anim-prep .hero h1, html.anim-prep .hero p, html.anim-prep .hero .cta-row { opacity: 0; } /* Jamais masquer ce qui sert à l'interaction ou à l'orientation */ html.anim-prep main form *, html.anim-prep main .filtres *, html.anim-prep main nav *, html.anim-prep main .crumbs *, html.anim-prep main .faq-corps * { opacity: 1 !important; }