/* Transition entre pages : View Transitions inter-documents (Chrome, Edge, Safari 18.2+).
   Le menu reste en place pendant que le contenu se fond ; aucun delai ni flash blanc avant le chargement.
   Les autres navigateurs gardent le fondu de front.js (setupPageTransitions). */

/* Bureau uniquement : sur mobile (tactile), l'instantane de la page puis le fondu provoquaient un flash et un gel au changement de page ;
   la navigation y reste immediate, sans transition. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) and (min-width: 861px) {
    @view-transition {
        navigation: auto;
    }

    .site-header {
        view-transition-name: site-header;
    }

    ::view-transition-group(root) {
        animation-duration: 0.45s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    ::view-transition-old(root) {
        animation: pt-out 0.28s cubic-bezier(0.65, 0, 0.35, 1) both;
    }

    ::view-transition-new(root) {
        animation: pt-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* le menu change d'apparence (transparent sur hero sombre, plein sinon) : fondu court, sans glissement */
    ::view-transition-group(site-header) {
        animation-duration: 0.32s;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    ::view-transition-old(site-header),
    ::view-transition-new(site-header) {
        height: 100%;
    }
}

@keyframes pt-out {
    to { opacity: 0; transform: translate3d(0, -8px, 0); }
}

@keyframes pt-in {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
}