/* ─────────────────────────────────────────────────────────
   MENU MOBILE BELLE ÉPOQUE
   Charte graphique : _references/charte-belle-epoque.html
───────────────────────────────────────────────────────── */

/* Drawer container */
.popup-drawer {
    background-color: var(--bg) !important;
}

.drawer-overlay {
    background-color: rgba(10, 13, 17, .72) !important;
}

/* Header du drawer (logo + croix) */
.drawer-header {
    border-bottom: 1px solid var(--line-2) !important;
    padding: 24px !important;
}

/* Croix fermeture */
.drawer-toggle svg {
    color: var(--ink-2) !important;
    fill: var(--ink-2) !important;
}

/* Liens du menu — Inter (interface), pas Newsreader (réservé aux titres) */
.mobile-navigation .menu-item a {
    font-family: var(--ui) !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    color: var(--ink) !important;
    text-decoration: none;
    padding: 16px 24px !important;
    border-bottom: 1px solid var(--line-2) !important;
    display: block;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-navigation .menu-item a:hover,
.mobile-navigation .menu-item.current-menu-item a {
    color: var(--ice-2) !important;
    padding-left: 32px !important;
}

/* Lien actif */
.mobile-navigation .current-menu-item > a {
    color: var(--ice-2) !important;
}