/*
 * Flèche « remonter » : un rond discret en bas à droite, qui monte en fondu
 * passé le premier écran. Sur téléphone, il se pose au-dessus du dock des
 * pages de service.
 */
.remonter {
    position: fixed;
    inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
    inset-inline-end: 1.25rem;
    z-index: calc(var(--z-entete) - 1);
    display: grid;
    place-items: center;
    inline-size: 2.9rem;
    block-size: 2.9rem;
    padding: 0;
    border: 1px solid rgb(15 8 65 / 0.12);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--encre);
    box-shadow: 0 10px 28px -12px rgb(15 8 65 / 0.45);
    cursor: pointer;
    opacity: 0;
    translate: 0 0.75rem;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-sortie), translate 0.45s var(--ease-sortie), border-color 0.3s var(--ease-sortie), color 0.3s var(--ease-sortie);
}

.remonter.est-visible {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
}

.remonter svg {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate 0.35s var(--ease-sortie);
}

.remonter:hover,
.remonter:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.remonter:hover svg {
    translate: 0 -2px;
}

.remonter:focus-visible {
    box-shadow: 0 0 0 3px rgb(113 34 246 / 0.3), 0 10px 28px -12px rgb(15 8 65 / 0.45);
}

@media (max-width: 63.99rem) {
    /* Au-dessus du dock flottant des pages de service. */
    body:has(.dock) .remonter {
        inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .remonter,
    .remonter svg {
        transition: none;
    }
}