/*
 * Menu Mobile
 * Gestion du menu mobile: panneau lateral droit
 */


/* Bouton hamburger */

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    background: var(--color-text);
    border-radius: 999px;
}


/* Fond sombre derrière le menu */

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.45);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 250ms ease,
        visibility 250ms ease;
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
}


/* Panneau mobile */

.mobile-menu-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1200;

    width: min(320px, 85vw);
    height: 100dvh;
    padding: 80px 24px 28px;

    background: var(--color-background);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);

    overflow-y: auto;

    transform: translateX(100%);
    visibility: hidden;

    transition:
        transform 250ms ease,
        visibility 250ms ease;
}

.mobile-menu-panel.is-open {
    transform: translateX(0);
    visibility: visible;
}


/* Croix de fermeture */

.mobile-menu-close {
    position: absolute;
    top: 15px;
    right: 18px;

    width: 44px;
    height: 44px;

    padding: 0;
    border: 0;
    border-radius: 3px;

    color: var(--color-text);
    font-size: 2rem;
    line-height: 1;

    cursor: pointer;
}
.mobile-menu-close:hover {
    background: var(--color-muted);
}


/* Liens du menu */

.mobile-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-menu li {
    border-bottom: 1px solid var(--color-border);
}

.mobile-menu a {
    display: block;
    padding: 8px 12px;

    color: var(--color-text);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;

    border-radius: 6px;

    transition:
        color 200ms ease,
        background-color 200ms ease;
}

.mobile-menu a:hover,
.mobile-menu a:focus-visible {
    color: var(--color-primary);
    background: rgba(14, 90, 107, 0.08);
}


/* Bloque le défilement derrière le menu */

body.mobile-menu-open {
    overflow: hidden;
}


/* Affichage mobile */

@media (max-width: 768px) {
    .primary-navigation {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }
}


/* Affichage ordinateur */

@media (min-width: 769px) {
    .mobile-menu-panel,
    .mobile-menu-overlay {
        display: none;
    }
}