/* * Palladium — transitions de vue entre pages (site public) * * Les sites Palladium naviguent en chargement de document complet * (data-enhance-nav="false") : l'API View Transitions inter-documents * (Chrome/Edge 126+) anime alors CHAQUE navigation même-origine * automatiquement dès cette opt-in CSS. Amélioration progressive pure — * les navigateurs sans support naviguent normalement, aucune régression. * * Choix : fondu enchaîné de la racine + léger glissé/échelle de la nouvelle * page. AUCUN view-transition-name par élément — nommer deux éléments * pareil (ex. deux en-têtes) fait ÉCHOUER toute la transition ; le fondu * racine est universel et sûr. * * Désactivation par site : ou * (posé par un script de site). * Respecte prefers-reduced-motion. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { /* on pilote nous-mêmes les keyframes ci-dessous */ animation-duration: .32s; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } /* Ancienne page : fondu sortant rapide */ ::view-transition-old(root) { animation-name: pd-vt-fade-out; } /* Nouvelle page : fondu entrant + très léger glissé vers le haut */ ::view-transition-new(root) { animation-name: pd-vt-fade-in; } @keyframes pd-vt-fade-out { to { opacity: 0; } } @keyframes pd-vt-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── Désactivation explicite par site ── */ html[data-pd-transitions="off"] { view-transition-name: none; } html[data-pd-transitions="off"]::view-transition-old(root), html[data-pd-transitions="off"]::view-transition-new(root) { animation: none; } /* ── Accessibilité : pas de mouvement si l'utilisateur le demande ── */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .001s; animation-name: pd-vt-none; } @keyframes pd-vt-none { from, to { opacity: 1; transform: none; } } }