html, body{ background: var(--white-color); scroll-behavior: smooth; }
/* overflow-x: clip (pas hidden) + overflow-y: visible explicite : évite
   qu'overflow-y ne soit forcé à "auto" (règle CSS overflow-x/-y non-visible),
   ce qui transformerait body en conteneur de scroll et casserait tous les
   position: sticky descendants (ex: .site-header dans Header.vue) — le
   header ne se "re-collait" plus en haut au scroll vers le haut. */
body{ overflow-x: clip; overflow-y: visible; }
::selection{ background: var(--success-color); color: var(--white-color); }
.flex-none{ flex: none; } 

/* ===================== Icônes trait (inline SVG, currentColor) ===================== */
.i{ display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.i-14{ width:14px; height:14px }
.i-16{ width:16px; height:16px }
.i-18{ width:18px; height:18px }
.i-20{ width:20px; height:20px }
.i-22{ width:22px; height:22px }
.i-24{ width:24px; height:24px }
.i-28{ width:28px; height:28px }
.i-32{ width:32px; height:32px }
.i-solid{ fill: currentColor; stroke: none; }

/* ===================== Skip-link / accessibilité ===================== */
.skip-link{
    position: absolute; 
    left: -999px; 
    top: 0;
    background: var(--black-color-alt); 
    color:#fff; 
    padding: 10px 16px; 
    z-index: 100;
}
.skip-link:focus{ 
    left: var(--10px); 
    top: var(--10px); 
}
a:focus-visible, button:focus-visible, input:focus-visible{
    outline: 2px solid var(--success-color);
    outline-offset: 2px;
}




/* ===================== Menu mobile (tiroir) ===================== */
#mobileOverlay{
    position: fixed; inset: 0;
    background: rgba(10,20,45,.55);
    z-index: 49;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
#mobileOverlay.show{ opacity: 1; pointer-events: auto; }
#mobileDrawer{
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 86%;
    max-width: 360px;
    background: #fff;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .35s ease;
    overflow-y: auto;
}
#mobileDrawer.open{ transform: translateX(0); }
#mobileDrawer .drawer-head{
    background: var(--black-color-alt);
    color: #fff;
}
.drawer-links{ display: flex; flex-direction: column; border-bottom: 1px solid #eee; }
.drawer-links a{
    padding: var(--15px);
    font-weight: 600;
    font-size: 14px;
    color: var(--black-color-alt);
    border-bottom: 1px solid #f3f3f3;
}

/* Item sur mobile */

.acc-item{ border-bottom: 1px solid #eee; }
.acc-head{
    display: flex; align-items:center; justify-content: space-between;
    padding: var(--15px);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.acc-head svg{ transition: transform .25s; }
.acc-item.open .acc-head svg{ transform: rotate(180deg); }
.acc-body{
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: #FAFBFF;
}
.acc-item.open .acc-body{ max-height: 400px; }
.acc-body a{ display:block; padding: var(--8px) var(--15px) var(--8px) var(--30px); font-size: 13px; color: var(--black-color-alt); }