/* Mobile Menu Fix - Basé sur Restoria-3-Video-Hero */

/* Cacher le menu principal et info-toggler sur mobile */
@media (max-width: 991px) {
    .main-header .nav-outer,
    .main-header .info-toggler {
        display: none !important;
    }
    
    /* Afficher le nav-toggler sur mobile */
    .main-header .nav-toggler {
        display: block !important;
    }
    
    /* Ajuster l'espacement du header sur mobile */
    .main-header .header-upper {
        padding: 10px 0;
    }
    
    /* Ajuster la taille du logo sur mobile */
    .main-header .logo img {
        max-height: 35px;
    }
    
    /* Optimiser le bouton de réservation */
    .main-header .links-box .link-btn .theme-btn {
        padding: 8px 15px;
        font-size: 12px;
        min-width: auto;
    }
    
    /* Réduire l'espacement du links-box */
    .main-header .links-box {
        margin-left: 15px;
    }
    
    .main-header .links-box .link {
        margin-left: 10px;
    }
    
    /* Optimiser le nav-toggler */
    .main-header .nav-toggler {
        margin-left: 10px;
    }
    
    .main-header .nav-toggler button {
        padding: 8px;
    }
}

/* Ajustements pour très petits écrans */
@media (max-width: 480px) {
    .main-header .nav-box{
        position   : absolute;
    }
    .main-header .header-upper {
        padding: 8px 0;
    }
    
    .main-header .logo img {
        max-height: 30px;
    }
    
    /* Optimiser encore plus le bouton de réservation */
    .main-header .links-box .link-btn .theme-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    /* Réduire encore plus les espacements */
    .main-header .links-box {
        margin-left: 10px;
    }
    
    .main-header .links-box .link {
        margin-left: 8px;
    }
    
    .main-header .nav-toggler {
        margin-left: 8px;
    }
    
    .main-header .nav-toggler button {
        padding: 6px;
    }
}

/* Menu backdrop pour le menu mobile */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.menu-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* Assurer que le nav-toggler est visible sur mobile */
@media (max-width: 991px) {
    .main-header .nav-toggler {
        display: block !important;
    }
    
    .main-header .info-toggler {
        display: none !important;
    }
}