/* ==================== FIX ABSOLU MENU MOBILE VARIABLE ==================== */
/* Ce fichier doit être chargé EN DERNIER pour écraser tous les autres styles */

@media (max-width: 768px) {

    /* Utilisation des variables CSS pour respecter le thème */
    .nav-menu,
    ul.nav-menu,
    #navMenu,
    nav .nav-menu,
    .navbar .nav-menu,
    [data-theme="dark"] .nav-menu,
    [data-theme="light"] .nav-menu,
    [data-theme="dark"] ul.nav-menu,
    [data-theme="light"] ul.nav-menu,
    [data-theme="dark"] #navMenu,
    [data-theme="light"] #navMenu {
        background-color: var(--bg-primary) !important;
        background: var(--bg-primary) !important;
        background-image: none !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active,
    ul.nav-menu.active,
    #navMenu.active,
    [data-theme="dark"] .nav-menu.active,
    [data-theme="light"] .nav-menu.active {
        background-color: var(--bg-primary) !important;
        background: var(--bg-primary) !important;
        background-image: none !important;
    }

    /* Texte couleur variable pour lisibilité par défaut */
    .nav-menu .nav-link,
    .nav-menu a {
        color: var(--text-primary) !important;
    }

    .nav-menu .nav-link i,
    .nav-menu a i {
        color: var(--text-primary) !important;
    }

    /* Exception : bouton Commander toujours en blanc dans le menu mobile */
    .nav-menu .btn-commande,
    .nav-menu .btn-commande:visited,
    .nav-menu .btn-commande:hover,
    .nav-menu .btn-commande:active {
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
        color: #ffffff !important;
        border-color: transparent !important;
    }

    .nav-menu .btn-commande i {
        color: #ffffff !important;
    }
}