/* ============================================================ MOTION — Socle d'animations (PWA, compatibilité maximale) ------------------------------------------------------------ Principe : on n'anime QUE `transform` et `opacity` (traités par le thread compositeur GPU → fluide sur tous navigateurs/OS, même quand le thread JS est occupé). Aucune lib externe. Tout est désactivé sous prefers-reduced-motion (accessibilité + « réduire les animations » iOS/Android). Voir CALENDRIER (calendar-editorial.css) pour l'idiome d'origine. ============================================================ */ :root { /* Easing « joy » (identique au calendrier) + variantes */ --motion-ease: cubic-bezier(0.16, 1, 0.3, 1); --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* Durées */ --motion-fast: 150ms; --motion-base: 260ms; --motion-slow: 340ms; } /* ── Keyframes réutilisables ──────────────────────────────── */ @keyframes motion-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes motion-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes motion-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } @keyframes motion-slide-in-right { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes motion-page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes motion-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } } /* ── Classes utilitaires (pour l'itération page par page) ──── */ /* Ajouter la classe + un inline `style="animation-delay:Nms"` pour un effet en cascade sur une liste/grille. */ .anim-fade-in { animation: motion-fade-in var(--motion-base) var(--motion-ease) both; } .anim-fade-up { animation: motion-fade-up var(--motion-base) var(--motion-ease) both; } .anim-scale-in { animation: motion-scale-in var(--motion-base) var(--motion-ease) both; } .anim-slide-in { animation: motion-slide-in-right var(--motion-base) var(--motion-ease) both; } /* ── Page-enter : fondu-montée à chaque navigation ──────────── Déclenché par le routeur (classe re-posée sur #app). On anime le CONTENEUR, pas son contenu : marche que le handler retourne une string ou peuple #app lui-même. #app n'a aucun descendant position:fixed (modales + FAB sont au niveau ), donc le transform temporaire ne crée pas de containing-block gênant. */ #app.page-enter { animation: motion-page-enter var(--motion-slow) var(--motion-ease) both; } /* ── Modales : scale-in du contenu + fondu du backdrop ──────── Le passage display:none → flex (toggle .hidden) relance l'anim. */ .modal-container:not(.hidden) .modal-content { animation: motion-modal-in var(--motion-base) var(--motion-ease) both; } .modal-container:not(.hidden) .modal-backdrop { animation: motion-fade-in var(--motion-base) var(--motion-ease-soft) both; } /* Modales « overlay » ad-hoc (ex. synchro calendrier) */ .modal-overlay > .modal { animation: motion-modal-in var(--motion-base) var(--motion-ease) both; } /* ── Boutons : micro-interaction à l'appui ──────────────────── Retour tactile léger, sans toucher la couleur/le layout. */ .btn { transition: transform var(--motion-fast) var(--motion-ease-soft), background var(--motion-fast) ease, color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease; } .btn:not(:disabled):not([disabled]):active { transform: translateY(1px) scale(0.985); } .btn-icon:not(:disabled):active { transform: scale(0.92); } /* ── Respect des préférences système ──────────────────────── */ @media (prefers-reduced-motion: reduce) { .anim-fade-in, .anim-fade-up, .anim-scale-in, .anim-slide-in, #app.page-enter, .modal-container:not(.hidden) .modal-content, .modal-container:not(.hidden) .modal-backdrop, .modal-overlay > .modal { animation: none !important; } .btn:active, .btn-icon:active { transform: none !important; } }