/**
 * Effets de vague (ripple) pour le menu mobile
 * Ce fichier ajoute des effets de vague pour les interactions tactiles
 */

@media (max-width: 767px) {
    /* Effet de vague pour les interactions tactiles */
    .mobile-menu a {
        position: relative;
        overflow: hidden;
    }
    
    .mobile-menu a .ripple {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4);
        transform: scale(0);
        animation: rippleEffect 0.6s linear;
        pointer-events: none;
    }
    
    @keyframes rippleEffect {
        to {
            transform: scale(2);
            opacity: 0;
        }
    }
    
    /* Style pour améliorer l'effet tactile */
    .mobile-menu a:active {
        transform: scale(0.98);
    }
    
    /* Effet de pulsation pour le bouton du menu quand il est actif */
    .mobile-menu-button[aria-expanded="true"] {
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }
    
    /* Effet de transition amélioré pour les liens du menu */
    .mobile-menu a {
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background-color 0.3s ease,
                    box-shadow 0.3s ease;
    }
    
    /* Animation de rotation pour les icônes au survol */
    .mobile-menu a:hover i {
        animation: wiggle 0.5s ease;
    }
    
    @keyframes wiggle {
        0%, 100% { transform: rotate(0); }
        25% { transform: rotate(10deg); }
        75% { transform: rotate(-10deg); }
    }
    
    /* Effet d'expansion au survol */
    .mobile-menu a:hover {
        transform: scale(1.03);
        z-index: 10;
    }
    
    /* Animation pour l'élément actif */
    .mobile-menu a.active i {
        animation: pulse-icon 2s infinite;
    }
    
    @keyframes pulse-icon {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
}