/*
 * SISPE : transitions entre les pages (CSS View Transitions, module W3C récent, pas encore reconnu par le validateur
 * CSS du W3C) et barre de progression de public/js/sispe-nav.js. Chargé dans le <head> par layouts/partials/pwa-head.
 */
/* ===== Transitions entre les pages et barre de progression (layouts/partials/pwa-head, public/js/sispe-nav.js) ===== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; animation-timing-function: ease-out; }
.sp-sidebar { view-transition-name: sp-sidebar; }
nav.navbar.sticky-top { view-transition-name: sp-navbar; }
.sp-nav-progress { position: fixed; top: 0; left: 0; z-index: 2000; height: 3px; width: 0; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, #D4A574, #8B6F47); box-shadow: 0 0 6px rgba(139, 111, 71, .5); }
.sp-nav-progress.run { opacity: 1; width: 85%; transition: width 8s cubic-bezier(.08, .7, .2, 1), opacity .15s; }
.sp-nav-progress.done { width: 100%; opacity: 0; transition: width .2s ease-out, opacity .25s ease .1s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .sp-nav-progress.run { transition: none; width: 85%; }
}