/* =====================================================================
 * navigation.css - Supprimer le clignotement entre deux pages
 * ---------------------------------------------------------------------
 * Le site recharge une page PHP complète à chaque clic. Entre l'ancienne
 * et la nouvelle, le navigateur peint un écran blanc pendant quelques
 * dizaines de millisecondes. C'est court, mais c'est précisément ce
 * clignotement qui dit « page web » plutôt que « application », et il se
 * répète à chaque geste.
 *
 * LA SOLUTION N'EST PAS UNE ANIMATION, C'EST L'OPT-IN.
 *
 * `@view-transition { navigation: auto }` demande au navigateur de
 * conserver l'image de l'ancienne page jusqu'à ce que la nouvelle soit
 * prête à être peinte. Le blanc disparaît même sans la moindre
 * animation — c'est l'essentiel du gain, et il vaut aussi pour le site
 * de bureau, sans rien y changer d'autre.
 *
 * L'animation par-dessus n'est qu'une finition, réservée aux petits
 * écrans : un fondu de 110 ms en sortie, 160 ms en entrée. Assez pour
 * que l'œil lise « un écran qui glisse », trop court pour donner
 * l'impression d'attendre.
 *
 * Le choix d'une media query plutôt que des classes `app-native` /
 * `app-mode-force` est délibéré : lors d'une transition entre deux
 * documents, l'instant où ces classes sont posées par rapport au début
 * de la transition n'est pas garanti. Une largeur d'écran, elle, est
 * connue avant tout script.
 *
 * Navigateurs qui ne connaissent pas encore l'API (Firefox à ce jour) :
 * la règle est ignorée, la navigation reste ce qu'elle est aujourd'hui.
 * Rien ne casse.
 * ===================================================================== */

@view-transition {
    navigation: auto;
}

/* Par défaut — donc sur ordinateur — aucune animation : on ne garde que
   la suppression du blanc. Le rendu est identique à aujourd'hui, en
   plus propre. */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

@media (max-width: 900px) {
    ::view-transition-old(root) {
        animation: rmcf-page-sortie 110ms linear both;
    }
    ::view-transition-new(root) {
        animation: rmcf-page-entree 160ms linear both;
    }
}

@keyframes rmcf-page-sortie {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes rmcf-page-entree {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Respect du réglage système « réduire les animations » : certaines
   personnes en ont besoin, un fondu n'est jamais indispensable. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* =====================================================================
 * Barre de progression
 * ---------------------------------------------------------------------
 * Les styles sont ici plutôt qu'injectés par le script : une barre de
 * chargement qui se peint après le premier rendu arriverait en retard,
 * justement au moment où elle devrait déjà être visible.
 *
 * L'élément est créé par assets/js/navigation.js, qui ne la montre
 * qu'au-delà de 180 ms d'attente — une navigation rapide ne doit pas
 * provoquer un éclair de couleur.
 * ===================================================================== */
.rmcf-progress {
    position: fixed;
    top: 0; left: 0;
    z-index: 2147483000;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, #003d7a, #4a90d9);
    box-shadow: 0 0 8px rgba(0, 61, 122, .45);
    opacity: 0;
    pointer-events: none;
    transition: width 220ms ease-out, opacity 120ms linear;
}
.rmcf-progress.visible { opacity: 1; }

/* La barre se place sous l'encoche en mode application plein écran,
   sinon elle passerait sous l'heure et la batterie. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .rmcf-progress { top: env(safe-area-inset-top); }
}
html.app-native .rmcf-progress { top: env(safe-area-inset-top); }

@media (prefers-reduced-motion: reduce) {
    .rmcf-progress { transition: none; }
}