/*
back-to-top.css

QUOI : Bouton flottant « retour en haut de page » (bas-droite) — apparaît après un scroll significatif
       sur les pages longues (catégorie/ville/annuaire), où l'on peut se perdre au défilement.

COMMENT : S'appuie sur les variables `:root` de style.css avec repli `var(--token, …)`, même stratégie
          que assistant.css (chargé en `<link>` autonome, indépendant du bundle app.css). Traitement
          volontairement plus sobre (fond clair, liseré marine) que la bulle assistant : le dégradé
          marine saturé reste réservé à cette dernière, seul vrai point d'engagement flottant du site.
          Visibilité pilotée par la classe `.is-visible` (ajoutée/retirée par back-to-top.js au scroll).

OÙ : Chargé par `_site_header.html.twig`, couplé à `_back_to_top.html.twig` et `back-to-top.js`.

POURQUOI : Signalé par l'utilisateur — sur les pages longues, rien ne permettait de revenir en haut sans
           un défilement manuel complet. Ancré bas-droite ; la bulle assistant passe en bas-gauche
           (assistant.css) pour ne jamais se superposer.
*/

.back-to-top {
    --btt-marine: var(--c-marine, #0a3d62);
    --btt-surface: var(--c-surface, var(--c-blanc, #ffffff));
    --btt-border: var(--c-bordure, #e8dec8);
    --btt-shadow: var(--shadow-md, 0 8px 24px rgba(10, 61, 98, .10), 0 2px 6px rgba(10, 61, 98, .05));
    --btt-shadow-hover: var(--shadow-lg, 0 20px 48px rgba(10, 61, 98, .15), 0 6px 16px rgba(10, 61, 98, .08));
    --btt-ease: var(--ease-out, cubic-bezier(.16, 1, .3, 1));

    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--btt-border);
    border-radius: 50%;
    background: var(--btt-surface);
    color: var(--btt-marine);
    cursor: pointer;
    box-shadow: var(--btt-shadow);

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.92);
    pointer-events: none;
    transition: opacity var(--duration-base, 220ms) var(--btt-ease),
                transform var(--duration-base, 220ms) var(--btt-ease),
                box-shadow var(--duration-base, 220ms) var(--btt-ease),
                border-color var(--duration-base, 220ms) var(--btt-ease),
                visibility 0s linear var(--duration-base, 220ms);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity var(--duration-base, 220ms) var(--btt-ease),
                transform var(--duration-base, 220ms) var(--btt-ease),
                box-shadow var(--duration-base, 220ms) var(--btt-ease),
                border-color var(--duration-base, 220ms) var(--btt-ease),
                visibility 0s linear 0s;
}

.back-to-top:hover {
    transform: translateY(-2px);
    border-color: var(--btt-marine);
    box-shadow: var(--btt-shadow-hover);
}

.back-to-top.is-visible:hover {
    transform: translateY(-2px) scale(1);
}

.back-to-top:focus-visible {
    outline: 3px solid var(--c-focus, rgba(30, 96, 145, .35));
    outline-offset: 3px;
}

.back-to-top__icon {
    width: 1.35rem;
    height: 1.35rem;
    transform: rotate(180deg); /* réutilise #ic-chevron (pointe vers le bas ailleurs) plutôt qu'un nouveau symbole */
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity var(--duration-fast, 150ms) linear, visibility 0s linear; }
    .back-to-top.is-visible { transition: opacity var(--duration-fast, 150ms) linear, visibility 0s linear; }
    .back-to-top:hover { transform: none; }
}

/* Mobile : la bulle assistant garde ses 20px bas-gauche, ce bouton ses 20px bas-droite — jamais de
   superposition, aucun ajustement de position nécessaire en dessous de 600px. */

[data-theme="dark"] .back-to-top {
    --btt-marine: #cfe2f1;
    --btt-surface: #16242f;
    --btt-border: rgba(160, 196, 224, 0.18);
    --btt-shadow: 0 8px 24px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .18);
    --btt-shadow-hover: 0 20px 48px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .22);
}