/* ============================================================================= SCROLL.CSS – 🔝 Bouton « Scroll-to-top » flottant Harmonisé le 2025-07-04 ----------------------------------------------------------------------------- ✔ Palette unifiée : couleurs via var(--primary) & var(--accent) ✔ Fallbacks personnalisables : --scroll-btn-* (facultatif) ✔ Focus visible AA + prefers-reduced-motion 👉 rotation désactivée ✔ Indentation & commentaires identiques aux autres feuilles ✔ Aucune classe renommée (HTML + JS inchangés) ---------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------- 1 · VARIABLES (optionnelles) ------------------------------------------------------------------------ */ :root { /* Ces variables peuvent être redéfinies page par page si besoin */ --scroll-btn-bg: var(--primary); /* Couleur de fond */ --scroll-btn-color: #fff; /* Couleur d’icône */ --scroll-btn-hover: color-mix(in srgb, var(--primary) 75%, black 25%); /* Fond au survol */ } /* --------------------------------------------------------------------------- 2 · STYLE PRINCIPAL DU BOUTON ------------------------------------------------------------------------ */ .scroll-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 46px; height: 46px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--scroll-btn-color); background-color: var(--scroll-btn-bg); line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgb(0 0 0 / .10); opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity .3s ease, transform .3s ease, background-color .3s ease; z-index: 1000; } /* Apparition quand le reçoit .scrolled (via JS) */ body.scrolled .scroll-to-top { opacity: 1; visibility: visible; transform: scale(1); } /* Survol & focus */ .scroll-to-top:is(:hover, :focus) { background-color: var(--scroll-btn-hover); } /* Animation iconique (rotation) – désactivée si l’utilisateur préfère moins d’animations */ .scroll-to-top:hover { transform: scale(1.08) rotate(360deg); } @media (prefers-reduced-motion: reduce) { .scroll-to-top:hover { transform: scale(1.05); } } /* Focus clavier */ .scroll-to-top:focus-visible { outline: 2px dashed var(--accent); outline-offset: 3px; } /* --------------------------------------------------------------------------- 3 · BREAKPOINTS – Position mobile (optionnel) ------------------------------------------------------------------------ */ @media (max-width: 575.98px) { .scroll-to-top { bottom: 1.25rem; right: 1.25rem; width: 42px; height: 42px; } } @media (max-width: 768px) { .scroll-to-top { bottom: 1rem !important; } section:last-of-type { margin-bottom: 2rem !important; } .cta-text { margin-bottom: 0.5rem !important; } footer { padding-bottom: 0 !important; margin-bottom: 0 !important; } }