/* =============================================
   FICHIER DE DEBUG POUR LE MENU BURGER
   À charger en dernier pour écraser tout
   ============================================= */

@media (max-width: 992px) {
    
    /* Forcer l'affichage du bouton burger */
    .burger-menu {
        display: flex !important;
        position: absolute !important;
        top: 70px !important;
        right: 20px !important;
        z-index: 10000 !important;
        background: white !important;
        padding: 8px !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Quand le menu est ouvert, le burger doit être au-dessus */
    .burger-menu.active {
        z-index: 10001 !important;
    }
    
    /* Menu mobile par défaut (caché à droite) - PRIORITÉ ABSOLUE */
    body .nav-links,
    body div.nav-links,
    body #navLinks,
    nav .nav-links,
    .main-nav .nav-links,
    .nav-content .nav-links,
    .nav-links {
        position: fixed !important;
        top: 70px !important;
        right: -430px !important;
        width: 300px !important;
        max-width: 90vw !important;
        height: 100vh !important;
        background: white !important;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3) !important;
        transition: right 0.4s ease !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        padding-top: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Menu ouvert (glisse depuis la droite) - ULTRA PRIORITÉ */
    html body .main-nav .nav-content .nav-links.active,
    html body .main-nav .nav-links.active,
    html body .nav-content .nav-links.active,
    html body nav .nav-links.active,
    html body .nav-links.active,
    html body div.nav-links.active,
    html body #navLinks.active,
    body .nav-links.active,
    body div.nav-links.active,
    body #navLinks.active,
    .nav-links.active,
    div.nav-links.active,
    #navLinks.active,
    .nav-links.active {
        right: 0px !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateX(0) !important;
        margin-right: 0 !important;
        display: flex !important;
    }
    
    /* Forcer l'ouverture si la classe active est présente - sélecteur encore plus spécifique */
    body #navLinks.nav-links.active,
    body .main-nav #navLinks.nav-links.active,
    body .nav-content #navLinks.nav-links.active {
        right: 0px !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
    }
    
    /* Test : forcer le menu à être toujours visible (debug) */
    /* Décommentez pour tester : 
    .nav-links {
        right: 0 !important;
        background: yellow !important;
    }
    */
    
    /* Overlay - DOIT ÊTRE SOUS LE MENU */
    .nav-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important; /* Noir semi-transparent */
        z-index: 9998 !important;  /* Inférieur au menu (9999) */
        display: none !important;
        pointer-events: none !important;
    }
    
    .nav-overlay.active {
        display: block !important;
        pointer-events: auto !important;  /* Pour fermer en cliquant dessus */
    }
    
    /* Menu items */
    .main-menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        position: relative !important;
        z-index: 10001 !important;
    }
    
    .main-menu > li {
        width: 100% !important;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
        z-index: 10002 !important;
    }
    
    .main-menu > li > a {
        display: block !important;
        padding: 15px 25px !important;
        color: #333 !important;
        text-decoration: none !important;
        background: white !important;
        width: 100% !important;
        position: relative !important;
        z-index: 10003 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    .main-menu > li > a:hover {
        background: #f0f0f0 !important;
    }
    
    /* Sous-menus */
    .main-menu .dropdown-menu,
    .main-menu .sub-menu {
        position: relative !important;
        z-index: 10004 !important;
        pointer-events: auto !important;
    }
    
    .main-menu .dropdown-menu li a,
    .main-menu .sub-menu li a {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10005 !important;
    }
}

/* Debug global */
body.debug-burger .nav-links {
    border: 3px solid red !important;
}

body.debug-burger .burger-menu {
    border: 3px solid blue !important;
}

body.debug-burger .nav-overlay {
    border: 3px solid green !important;
}