/**
 * Styles améliorés pour le menu mobile
 * Ces styles rendent le menu plus attrayant et moderne
 */

/* Amélioration du menu avec des styles plus modernes */
@media (max-width: 767px) {
    /* Style de fond moderne avec effet de verre (glassmorphism) */
    .mobile-menu {
        background: linear-gradient(135deg, rgba(46, 62, 152, 0.95), rgba(78, 204, 226, 0.95)) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
        border-radius: 0 0 16px 16px !important;
        overflow: hidden !important;
        padding: 12px 0 24px 0 !important;
    }
    
    /* Amélioration des liens du menu avec des styles plus attrayants */
    .mobile-menu a {
        margin: 8px 12px !important;
        padding: 16px 20px !important;
        border-radius: 12px !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border: none !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        color: white !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Effet de survol amélioré */
    .mobile-menu a:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Effet de pression */
    .mobile-menu a:active {
        transform: translateY(1px) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Style pour le lien actif */
    .mobile-menu a.active {
        background-color: rgba(255, 255, 255, 0.25) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
        position: relative !important;
    }
    
    /* Indicateur visuel pour le lien actif */
    .mobile-menu a.active::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        width: 4px !important;
        background: white !important;
        border-radius: 0 4px 4px 0 !important;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
    }
    
    /* Style amélioré pour les icônes */
    .mobile-menu a i {
        margin-right: 15px !important;
        font-size: 22px !important;
        width: 28px !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.2) !important;
        padding: 8px !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
        color: white !important;
    }
    
    /* Style d'icône pour le lien actif */
    .mobile-menu a.active i {
        background: rgba(255, 255, 255, 0.4) !important;
    }
    
    /* Séparation visuelle entre les éléments du menu */
    .mobile-menu::after {
        content: '' !important;
        display: block !important;
        height: 4px !important;
        width: 60% !important;
        background: rgba(255, 255, 255, 0.2) !important;
        margin: 24px auto 8px !important;
        border-radius: 4px !important;
    }
    
    /* Amélioration du bouton du menu */
    .mobile-menu-button {
        background: rgba(255, 255, 255, 0.15) !important;
        padding: 12px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Effet de survol du bouton */
    .mobile-menu-button:hover {
        background: rgba(255, 255, 255, 0.25) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Effet d'activation du bouton */
    .mobile-menu-button:active {
        transform: scale(0.95) !important;
    }
    
    /* Style de l'icône hamburger */
    .hamburger-icon {
        width: 28px !important;
        height: 22px !important;
    }
    
    /* Style des barres de l'icône hamburger */
    .hamburger-icon span {
        height: 3px !important;
        background-color: white !important;
        border-radius: 6px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Animation plus douce pour le menu */
    @keyframes enhancedFadeIn {
        from {
            opacity: 0;
            transform: translateY(-30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    @keyframes enhancedFadeOut {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        to {
            opacity: 0;
            transform: translateY(-30px) scale(0.95);
        }
    }
    
    .mobile-menu.animate-fade-in {
        animation: enhancedFadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    }
    
    .mobile-menu.animate-fade-out {
        animation: enhancedFadeOut 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards !important;
    }
}