/* Brique « retour-haut » — le bouton « haut de page » (JulienWeb, 12/10/2026).

   Le bouton est un .jws-btn (commun.css § 3) : orange, contenu indigo, survol inversé, repère de
   focus. Cette feuille n'ajoute que sa place (fixe, en bas à droite), sa forme (rond de 44 px, la
   pilule du site refermée sur elle-même) et sa flèche.

   Réglages : --jws-rh-cote (le côté du bouton), --jws-rh-marge (l'écart avec les bords de l'écran
   et avec le pied de page). --jws-rh-leve est posée par retour-haut.js : la hauteur de pied de page
   visible à l'écran, dont le bouton remonte pour rester au-dessus.

   z-index 80 : sous l'en-tête collé et ses menus (99 et plus), au-dessus du contenu. */

.jws-btn.jws-retour-haut {
    --jws-rh-cote: 44px;
    --jws-rh-marge: 16px;
    position: fixed;
    right: calc(var(--jws-rh-marge) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--jws-rh-marge) + var(--jws-rh-leve, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--jws-rh-cote);
    height: var(--jws-rh-cote);
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);   /* le détache d'une photo ou d'un bloc orange */
    opacity: 0;
    visibility: hidden;                          /* caché : ni cliquable, ni atteint au clavier */
    translate: 0 8px;
    transition: opacity .2s ease, translate .2s ease, visibility 0s linear .2s, background-color .2s ease;
}

.jws-btn.jws-retour-haut[hidden] {
    display: none;
}

.jws-btn.jws-retour-haut.est-visible {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity .2s ease, translate .2s ease, visibility 0s, background-color .2s ease;
}

/* La flèche : le chevron en mosaïque des flèches du carrousel (style.css, bloc 4), même tracé,
   tourné vers le haut. « rotate », pas « transform », comme partout sur le site. */
.jws-retour-haut__fleche {
    display: block;
    width: 30px;
    height: 30px;
    rotate: -90deg;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.8 12.8' fill='%23000'%3E%3Cpolygon points='3.6,0.15 5.05,1.6 3.6,3.05 2.15,1.6'/%3E%3Cpolygon points='5.2,1.75 6.65,3.2 5.2,4.65 3.75,3.2'/%3E%3Cpolygon points='6.8,3.35 8.25,4.8 6.8,6.25 5.35,4.8'/%3E%3Cpolygon points='8.4,4.95 9.85,6.4 8.4,7.85 6.95,6.4'/%3E%3Cpolygon points='6.8,6.55 8.25,8 6.8,9.45 5.35,8'/%3E%3Cpolygon points='5.2,8.15 6.65,9.6 5.2,11.05 3.75,9.6'/%3E%3Cpolygon points='3.6,9.75 5.05,11.2 3.6,12.65 2.15,11.2'/%3E%3Cpolygon points='10.9,5.6 11.7,6.4 10.9,7.2 10.1,6.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.8 12.8' fill='%23000'%3E%3Cpolygon points='3.6,0.15 5.05,1.6 3.6,3.05 2.15,1.6'/%3E%3Cpolygon points='5.2,1.75 6.65,3.2 5.2,4.65 3.75,3.2'/%3E%3Cpolygon points='6.8,3.35 8.25,4.8 6.8,6.25 5.35,4.8'/%3E%3Cpolygon points='8.4,4.95 9.85,6.4 8.4,7.85 6.95,6.4'/%3E%3Cpolygon points='6.8,6.55 8.25,8 6.8,9.45 5.35,8'/%3E%3Cpolygon points='5.2,8.15 6.65,9.6 5.2,11.05 3.75,9.6'/%3E%3Cpolygon points='3.6,9.75 5.05,11.2 3.6,12.65 2.15,11.2'/%3E%3Cpolygon points='10.9,5.6 11.7,6.4 10.9,7.2 10.1,6.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .jws-btn.jws-retour-haut,
    .jws-btn.jws-retour-haut.est-visible {
        translate: 0 0;
        transition: none;
    }
}

@media print {
    .jws-btn.jws-retour-haut {
        display: none;
    }
}