/* --------------------------------------------------------------------------- Respect du réglage système « Réduire les animations ». --------------------------------------------------------------------------- POURQUOI CE FICHIER EXISTE iOS (Réglages › Accessibilité › Mouvement) et Android (Options pour les développeurs / Accessibilité) permettent de demander moins d'animations. C'est un vrai besoin médical : troubles vestibulaires, migraines, nausées. Le site ne l'écoutait nulle part, sauf la billetterie. POURQUOI UN FICHIER PARTAGÉ PLUTÔT QU'UN BLOC DANS CHAQUE FEUILLE Le mouvement est réparti sur 5 feuilles (store-style.bundle, store-tracker, admin-style, admin-analytics, login-style). Dupliquer le bloc 5 fois, c'est garantir qu'une copie divergera. Ici il y a UN endroit à corriger. CE FICHIER NE CHANGE RIEN POUR LA GRANDE MAJORITÉ DES VISITEURS : tout est enfermé dans @media (prefers-reduced-motion: reduce). Si le réglage n'est pas activé sur le téléphone, ce fichier n'a aucun effet visible. À CHARGER EN DERNIER dans le , après les autres feuilles. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { /* 0.01ms et NON 0 : à 0, certains navigateurs n'émettent plus les événements `transitionend` / `animationend`. Aucun JS du projet n'en dépend aujourd'hui (vérifié), mais si l'un en ajoute un demain, il continuera de fonctionner. C'est la convention retenue partout pour cette raison. */ /* POURQUOI `:not(#_)` ET PAS UN SIMPLE `*` — ne pas « simplifier » ceci. store-style.bundle.css contient 7 règles du type .une-classe .autre { transition: all 0.3s ease !important; } Entre deux déclarations !important, c'est la SPÉCIFICITÉ qui tranche — et `*` vaut 0. Un simple `*` laissait donc 18 éléments continuer de s'animer (mesuré, pas supposé). `:not(#_)` ne change RIEN à ce qui est sélectionné (aucun élément n'a l'id « _ ») mais emprunte la spécificité d'un sélecteur d'id, ce qui permet de passer devant n'importe quelle règle à base de classes. */ *:not(#_), *:not(#_)::before, *:not(#_)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* ------------------------------------------------------------------------- EXCEPTION VOLONTAIRE — les indicateurs de chargement continuent de tourner. ------------------------------------------------------------------------- ⚠️ NE PAS SUPPRIMER CE BLOC. Un spinner ne décore pas : il PORTE UNE INFORMATION — « ça travaille, ne pars pas ». Figé par la règle ci-dessus, il devient un rond immobile, et l'utilisateur croit que la page est plantée. C'est particulièrement grave pour `.spinner` : c'est le voile affiché PENDANT un paiement Mobile Money (index.ejs, #paygate-loader-overlay). Quelqu'un qui croit le paiement bloqué recharge la page ou repaie. Détail technique : dans index.ejs, ce spinner porte son animation en style INLINE. Une règle `!important` de feuille l'emporte sur un style inline sans !important — donc sans cette exception, il SERAIT bel et bien figé. `.demo-spin` (billetterie) n'est PAS listé ici, et c'est voulu : il fait partie de l'animation-tutoriel « comment ça marche », il est décoratif. Lui, on le fige. ------------------------------------------------------------------------- */ /* Même `:not(#_)` ici : sans lui, la règle ci-dessus (spécificité d'un id) passerait DEVANT ces classes et figerait quand même les spinners. */ .spinner:not(#_), .tracker-spinner:not(#_), .bil-spin:not(#_) { /* Ralenti plutôt que supprimé : l'information reste, l'agitation part. */ animation-duration: 1.4s !important; animation-iteration-count: infinite !important; } }