:root {
/* Couleurs principales */
--primary-color: var(--primary-color, #000);           /* Fond pour menu-header et menu-close */
--background-color: var(--button-text-color, #fff);        /* Texte sur fond foncé */
--primary-color: var(--text-color, #000);         /* Texte pour liens et chevrons */
--background-color: var(--background-color, #fff);               /* Fond blanc */
--border-color-light: var(--border-color-light, #ddd);           /* Couleur de bordure légère */
--light-bg: var(--light-bg, #f0f0f0);        /* Fond du bouton menu-back */

/* Ombres et overlays */
--shadow-light: rgba(0, 0, 0, 0.3); /* Ombre portée pour le menu */
--overlay-dark: rgba(0, 0, 0, 0.5); /* Overlay pour le menu mobile */
}

#mobile-menu-container {
    display: none;
}

@media (max-width: 991px) {
    #desktop-menu {
        display: none !important;
    }
    #mobile-menu-container {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100%;
        background: var(--background-color);
        box-shadow: 2px 0 5px var(--shadow-light);
        transition: left 0.3s ease-in-out;
        z-index: 1001;
        overflow-y: auto;
        max-height: 100vh;
        display: block;
    }
    
    #mobile-menu-container.active {
        left: 0;
    }
    
    #mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--overlay-dark);
        display: none;
        z-index: 1000;
    }
    
    #mobile-menu-overlay.active {
        display: block;
    }
    
    #menu-header {
        display: flex;
        justify-content: space-between;
        padding: 15px;
        background: var(--primary-color);
        color: var(--background-color);
    }
    
    #menu-content {
        overflow-y: auto;
        max-height: calc(100vh - 50px);
    }
    
    #mobile-menu-container .menu-level {
        list-style: none;
        padding: 0;
    }
    
    #mobile-menu-container .menu-item {
        padding: 10px;
        border-bottom: 1px solid var(--border-color-light);
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }
    
    #mobile-menu-container .menu-item a {
        flex-grow: 1;
        text-decoration: none;
        color: var(--primary-color);
    }

    #mobile-menu-container .menu-item.is-button a {
        color: var(--primary-color);
        font-weight: bold;
    }
    
    #mobile-menu-container .menu-expand {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 16px;
    }
    
    #mobile-menu-container .hidden {
        display: none;
    }
    
    #mobile-menu-container .mega-menu-column {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--background-color);
        height: 100%;
        overflow-y: auto;
        padding: 0px 20px;
    }
    
    #mobile-menu-container .mega-menu-column.mega-menu-level-2, 
    #mobile-menu-container .mega-menu-column.mega-menu-level-3, 
    #mobile-menu-container .mega-menu-column.mega-menu-level-4, 
    #mobile-menu-container .mega-menu-column.mega-menu-level-5 {
        display: block;
        position: relative;
    }

    #mobile-menu-container .mega-menu-level-3, 
    #mobile-menu-container .mega-menu-level-4, 
    #mobile-menu-container .mega-menu-level-5 {
        opacity: 1;
    }
    
    #mobile-menu-container .mega-menu-column.hidden {
        display: none;
    }
    
    #menu-title {
        display: flex;
        align-items: center;
    }

    #menu-close {
        background-color: var(--primary-color);
        border: none;
        color: var(--background-color);
        font-size: 24px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #menu-close:hover {
        transform: scale(1.1);
    }
    
    #mobile-menu-container .menu-item .chevron {
        font-weight: bold;
        width: 50px;
        text-align: right;
        font-size: 25px;
        color: var(--primary-color);
        height: 24px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAABnRSTlMAHiXy6t8iJwLjAAAANUlEQVQY02MgFwgisZmMFZA4Zo5IUiLJSFKMbkZESqUoYKjDNFw5RYAYCSckW0IEULxAPgAAZQ0HP01tIysAAAAASUVORK5CYII=);
        background-repeat: no-repeat;
        background-position: right;
    }
    
    #menu-back {
        display: block;
        padding: 10px;
        background: var(--light-bg);
        border: none;
        cursor: pointer;
    }
    
    #menu-back.visible {
        display: block;
    }
    
    .mega-menu-column {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--background-color);
        height: 100%;
        overflow-y: auto;
        padding: 20px;
    }
    
    #mobile-menu-container .mega-menu-visible {
        display: block !important;
        position: relative;
    }
    
    #mobile-menu-container .mega-menu-column.hidden {
        display: none !important;
    }
    
    .mega-menu-row {
        display: flex;
        align-items: stretch;
        flex-direction: column;
    }
}