/* CSS commun pour AWMOTORS */

/* Animations d'apparition */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Menu mobile responsive - assure que le toggle fonctionne */
#mobile-menu.hidden {
    display: none !important;
}

#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Assurer que le menu mobile ne dépasse pas l'écran */
@media (max-width: 1023px) {
    /* Solution radicale pour empêcher tout débordement */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Navbar responsive - marges équilibrées */
    #navbar {
        left: 0.75rem !important;
        right: 0.75rem !important;
        top: 0.75rem !important;
        max-width: calc(100vw - 1.5rem) !important;
        box-sizing: border-box !important;
    }
    
    /* Contenu navbar - padding équilibré */
    #navbar .px-8 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Logo plus petit sur mobile */
    #navbar img {
        height: 2.5rem !important; /* 40px au lieu de 48px */
        width: auto !important;
    }
    
    /* Réduire l'espace entre les éléments sur mobile */
    #navbar .space-x-8 {
        gap: 0.5rem !important;
    }
    
    #navbar .space-x-8 > * {
        margin-left: 0 !important;
    }
    
    /* Menu mobile */
    #mobile-menu {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        box-sizing: border-box !important;
    }
    
    #mobile-menu .px-8 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Forcer tous les conteneurs à ne pas dépasser */
    .container, .max-w-5xl, .max-w-4xl, .max-w-6xl {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* Règles spécifiques pour les écrans très petits */
@media (max-width: 480px) {
    /* Compact mais pas trop collé pour petits écrans */
    #navbar {
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
    
    #navbar .px-8 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Logo encore plus petit sur très petits écrans */
    #navbar img {
        height: 2rem !important; /* 32px sur très petits écrans */
        width: auto !important;
    }
    
    /* Espaces réduits entre éléments */
    #navbar .space-x-8 {
        gap: 0.375rem !important;
    }
    
    /* Menu mobile compact */
    #mobile-menu {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
    }
    
    #mobile-menu .px-8 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Responsive breakpoints */
@media (min-width: 1024px) {
    #mobile-menu {
        display: none !important;
    }
    
    .lg\:hidden {
        display: none !important;
    }
    
                    /* Restaurer les marges normales sur desktop */
                #navbar {
                    left: 1.5rem !important;
                    right: 1.5rem !important;
                    top: 1.5rem !important;
                    max-width: none;
                }
                
                #navbar .px-8 {
                    padding-left: 2rem !important;
                    padding-right: 2rem !important;
                }
                
                /* Restaurer la taille normale du logo sur desktop */
                #navbar img {
                    height: 3rem !important; /* 48px - taille normale */
                    width: auto !important;
                }
                
                #navbar .space-x-8 > * {
                    margin-left: 2rem !important;
                }
}

/* Nettoyage des classes responsive */
@media (max-width: 1023px) {
    .lg\:hidden {
        display: block !important;
    }
    
    .hidden\:lg {
        display: none !important;
    }
}