/* Interrupteur « Mensuel | Annuel » des vitrines (08/10/2026).
   Voir includes/kheweul_vitrine_periodes.php. */
.kwvp {
    display: flex; justify-content: center; gap: 4px;
    width: fit-content; max-width: 100%;
    margin: 0 auto 10px; padding: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
}
.kwvp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 20px;
    border: 0; border-radius: 999px;
    background: transparent; color: #334155;
    font-family: inherit; font-size: .92rem; font-weight: 700;
    cursor: pointer; transition: background .15s, color .15s, box-shadow .15s;
}
.kwvp-btn:hover { color: #0f172a; }
.kwvp-btn:focus-visible { outline: 2px solid #E89548; outline-offset: 2px; }
.kwvp-btn.on { background: #fff; color: #0f172a; box-shadow: 0 2px 8px rgba(15,23,42,.12); }
.kwvp-btn em {
    font-style: normal; font-size: .72rem; font-weight: 800;
    color: #15803d; background: rgba(34,197,94,.14);
    border-radius: 999px; padding: 3px 8px;
}
.kwvp-note { text-align: center; font-size: .8rem; color: #64748b; margin: 0 0 26px; }

body.dark-mode .kwvp { background: #1e293b; border-color: #334155; }
body.dark-mode .kwvp-btn { color: #cbd5e1; }
body.dark-mode .kwvp-btn.on { background: #0f172a; color: #fff; }
body.dark-mode .kwvp-note { color: #94a3b8; }

@media (max-width: 480px) {
    .kwvp-btn { padding: 0 14px; font-size: .86rem; }
}