/* * Sympa — motion.css * * Système d'animation : apparition des éléments au défilement * + respect de la préférence système « réduire les animations ». * * Note : les états survol/clic des composants (boutons, cartes) sont * définis AVEC leurs composants dans components.css — un composant et * ses états forment un tout. * * tokens.css doit être chargé avant ce fichier. */ /* ── Apparition au défilement (scroll reveal) ──────────────────────── * * Accessibilité d'abord : par défaut un élément .s-reveal est VISIBLE. * Il n'est masqué (pour être ensuite révélé) que si JavaScript est actif * ET que les animations sont autorisées — reveal.js ajoute alors la * classe « sympa-js » sur la balise . * * Conséquence : si JS est désactivé ou échoue, aucun contenu n'est * jamais caché. Le site reste lisible. */ .sympa-js .s-reveal { opacity: 0; transform: translateY(8px); transition: opacity var(--sympa-dur-lg) var(--sympa-ease-out), transform var(--sympa-dur-lg) var(--sympa-ease-out); } /* État révélé — la classe « in » est ajoutée par reveal.js quand l'élément entre dans la zone visible de l'écran. */ .sympa-js .s-reveal.in { opacity: 1; transform: translateY(0); } /* ── Préférence « réduire les animations » ─────────────────────────── * * Si l'utilisateur a activé « réduire les animations » dans les * réglages d'accessibilité de son système, on neutralise animations * et transitions sur tout le site. * * Le !important est ici nécessaire et standard : cet override * d'accessibilité doit l'emporter sur toute animation déclarée * ailleurs. C'est le seul endroit du thème où il est utilisé. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* Filet de sécurité : le contenu « reveal » reste pleinement visible. */ .sympa-js .s-reveal { opacity: 1; transform: none; } }