/* Reloge - les touches Précédent / Suivant de l'application installée et le glissement du retour
   (reloge-navigation-app.js, Fred 2026-10-17). Rien de ceci ne joue dans un onglet du navigateur. */

/* Les transitions de vue entre deux pages, en mode application seulement : le script annule toutes celles
   qu'une touche n'a pas demandées. */
@media (display-mode: standalone) {
    @view-transition { navigation: auto; }
}

/* Deux touches carrées après le logo, dans l'orange des icônes de l'en-tête. Sélecteur double : le thème
   peint les boutons à sa façon. */
.reloge-nav-app { display: inline-flex; align-items: center; gap: .375rem; margin: 0 0 0 .875rem; flex: none; }
.reloge-nav-app button.reloge-nav-app__touche { display: inline-grid; place-items: center; width: 2rem; height: 2rem; min-width: 0;
    min-height: 0; margin: 0; padding: 0; border: .09375rem solid var(--theme-palette-color-5, #fd6905); border-radius: .5rem;
    background: #fff; color: var(--theme-palette-color-5, #fd6905); box-shadow: 0 .0625rem .1875rem rgba(0, 0, 0, .12);
    line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.reloge-nav-app button.reloge-nav-app__touche svg { display: block; width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Le survol seulement avec une souris : au doigt, il resterait allumé après le toucher. */
@media (hover: hover) {
    .reloge-nav-app button.reloge-nav-app__touche:hover:not(:disabled) { background: var(--theme-palette-color-5, #fd6905); color: #fff; }
}
.reloge-nav-app button.reloge-nav-app__touche:active:not(:disabled) { transform: translateY(.0625rem); box-shadow: none; }
.reloge-nav-app button.reloge-nav-app__touche:focus-visible { outline: .125rem solid var(--theme-palette-color-5, #fd6905); outline-offset: .125rem; }
.reloge-nav-app button.reloge-nav-app__touche:disabled { opacity: .35; cursor: default; box-shadow: none; }
@media (max-width: 359.98px) {
    .reloge-nav-app { gap: .25rem; margin-left: .5rem; }
    .reloge-nav-app button.reloge-nav-app__touche { width: 1.75rem; height: 1.75rem; }
}

/* Le glissement, comme le geste du doigt. Retour : la page quitte l'écran par la droite, par-dessus la
   précédente qui revient depuis la gauche. Suivant : l'inverse. */
@media (prefers-reduced-motion: no-preference) {
    html.reloge-vt-arriere::view-transition-old(root),
    html.reloge-vt-arriere::view-transition-new(root),
    html.reloge-vt-avant::view-transition-old(root),
    html.reloge-vt-avant::view-transition-new(root) { mix-blend-mode: normal; animation-duration: .32s; animation-fill-mode: both; }
    html.reloge-vt-arriere::view-transition-old(root) { z-index: 2; animation-name: reloge-nav-vers-droite; animation-timing-function: cubic-bezier(.4, 0, .6, 1);
        box-shadow: -.75rem 0 1.5rem rgba(0, 0, 0, .18); }
    html.reloge-vt-arriere::view-transition-new(root) { z-index: 1; animation-name: reloge-nav-depuis-gauche; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    html.reloge-vt-avant::view-transition-old(root) { z-index: 1; animation-name: reloge-nav-vers-gauche; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
    html.reloge-vt-avant::view-transition-new(root) { z-index: 2; animation-name: reloge-nav-depuis-droite; animation-timing-function: cubic-bezier(.2, .7, .3, 1);
        box-shadow: -.75rem 0 1.5rem rgba(0, 0, 0, .18); }
}
@keyframes reloge-nav-vers-droite { from { transform: none; } to { transform: translateX(100%); } }
@keyframes reloge-nav-depuis-gauche { from { transform: translateX(-30%); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes reloge-nav-vers-gauche { from { transform: none; opacity: 1; } to { transform: translateX(-30%); opacity: .6; } }
@keyframes reloge-nav-depuis-droite { from { transform: translateX(100%); } to { transform: none; } }