/* Réglages communs à tout le site (chargé par includes/partials/head.php) */

/* ---------- Barre de défilement ----------
   Rigole transparente, poignée en rectangle arrondi : fine au repos, plus large au survol et quand on la tire
   (la zone cliquable reste de 14px, seule la partie visible change grâce à la bordure transparente).
   Couleur #7f8aa3 : contraste ≥ 3:1 sur fond blanc (élément d'interface, WCAG 1.4.11). */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    min-height: 40px;
    background-color: #7f8aa3;
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #67728a;
    border-width: 2px;
}
::-webkit-scrollbar-thumb:active {
    background-color: #535d73;
    border-width: 2px;
}

/* Firefox : pas de survol possible sur la barre, on garde une barre fine aux mêmes couleurs.
   (Réservé à Firefox : dans Chrome/Edge, scrollbar-color désactiverait les réglages ci-dessus.) */
@supports (-moz-appearance: none) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #7f8aa3 transparent;
    }
}

/* Mode contraste élevé de Windows : on laisse le système dessiner la barre */
@media (forced-colors: active) {
    ::-webkit-scrollbar-thumb { background-color: CanvasText; }
}

/* ---------- Vagues de transition (Figma « Background transitions », 4580:24583) ----------
   À placer avant (« top », blanc en haut) et après (« bottom », blanc en bas) un bloc de sections au fond #eef7fe.
   Trois formes de vague, 80px de haut sur grand écran, 40px minimum sur téléphone. */
.wave-2026 {
    display: block;
    height: clamp(40px, 4.63vw, 80px);
    background: center / 100% 100% no-repeat;
}
.wave-2026--top-1    { background-image: url('/images/waves/wave-1-top.svg'); }
.wave-2026--top-2    { background-image: url('/images/waves/wave-2-top.svg'); }
.wave-2026--top-3    { background-image: url('/images/waves/wave-3-top.svg'); }
.wave-2026--bottom-1 { background-image: url('/images/waves/wave-1-bottom.svg'); }
.wave-2026--bottom-2 { background-image: url('/images/waves/wave-2-bottom.svg'); }
.wave-2026--bottom-3 { background-image: url('/images/waves/wave-3-bottom.svg'); }