/*
 * Bouton flottant « revenir en haut » — Figma node 2644:67451 : carré bleu, emblème de
 * cercles concentriques, pas de rayon.
 *
 * Deux écarts assumés à la maquette, demandés après relecture : l'emblème est réduit, et le
 * carré est collé au bord droit — contre la barre de défilement — au lieu d'être détaché de
 * 32. La maquette ne montrait pas le bouton en situation.
 */

.back-to-top {
    --back-to-top-dur: 380ms;
    /* Courbe à léger dépassement : c'est elle qui donne le petit rebond en fin de course. */
    --back-to-top-ease: cubic-bezier(0.34, 1.56, 0.64, 1);

    position: fixed;
    inset-block-end: var(--space-bloc);
    /*
     * Collé au bord. En position fixe, le bloc de référence exclut la barre de défilement :
     * un zéro place donc le carré juste contre elle, sans avoir à mesurer sa largeur.
     */
    inset-inline-end: 0;
    /* Sous la barre d'en-tête collée, qui est à 100 : elle doit rester au-dessus de tout. */
    z-index: 90;
    display: flex;
    padding: var(--space-s);
    background-color: var(--color-primary);
    color: var(--color-neutral-50);
    /*
     * Masqué au repos. visibility, et pas seulement opacity : un lien transparent resterait
     * cliquable et surtout atteignable au clavier, ce qui donnerait un arrêt de tabulation
     * sur une commande invisible.
     */
    opacity: 0;
    visibility: hidden;
    /*
     * Le bouton entre depuis le bord droit, en grandissant. L'origine à droite fait glisser
     * le carré hors de l'écran plutôt que de le rétrécir sur place — il apparaît de là où il
     * est ancré.
     */
    transform-origin: 100% 100%;
    transform: translateX(100%) scale(0.85);
    transition:
        opacity var(--back-to-top-dur) var(--back-to-top-ease),
        transform var(--back-to-top-dur) var(--back-to-top-ease),
        /* visibility ne s'interpole pas : allow-discrete la fait basculer À LA FIN du
           fondu de sortie, au lieu de couper le lien dès la première image. */
        visibility var(--back-to-top-dur) allow-discrete;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Le survol garde la durée courte des survols du site, pas celle de l'entrée. */
.back-to-top.is-visible:hover,
.back-to-top.is-visible:focus-visible {
    opacity: 0.7;
    transition: opacity var(--hover-dur) var(--hover-ease);
}

.back-to-top__icon {
    display: block;
    /* Emblème de 62 dans la maquette, réduit à 44 : le carré passe de 82 à 68 de côté. */
    width: 44px;
    height: 44px;
}

/*
 * Le repère qui commande l'apparition : un écran de haut, collé en haut du document. Hors
 * flux, invisible et transparent aux clics — il ne fait que se laisser observer.
 */
.back-to-top__sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100vh;
    pointer-events: none;
    visibility: hidden;
}

@media (max-width: 768px) {
    .back-to-top {
        inset-block-end: var(--space-m);
        padding: var(--space-compact);
    }

    .back-to-top__icon {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /*
     * Pas de glissement ni de rebond : le bouton est là ou il n'est pas. Le fondu très court
     * suffit à ce que l'apparition ne soit pas un claquement, et --hover-dur tombe déjà à
     * 1ms sous cette préférence.
     */
    .back-to-top {
        --back-to-top-dur: var(--hover-dur);
        transform: none;
    }
}