/* Styles pour réduire la taille des formes animées de la section Expertises uniquement en version mobile */

@media (max-width: 768px) {
    /* Réduction de la taille des formes animées */
    .expertise-shape.shape1 {
        width: 70px !important;
        height: 70px !important;
        top: 8% !important;
        left: 2% !important;
        opacity: 0.7 !important;
    }
    
    .expertise-shape.shape2 {
        width: 50px !important;
        height: 50px !important;
        bottom: 7% !important;
        right: 5% !important;
        opacity: 0.7 !important;
    }
    
    .expertise-shape.shape3 {
        width: 40px !important;
        height: 75px !important;
        top: 15% !important;
        right: 30% !important;
        opacity: 0.7 !important;
    }
    
    .expertise-shape.shape4 {
        width: 60px !important;
        height: 60px !important;
        bottom: 40% !important;
        left: 10% !important;
        opacity: 0.7 !important;
    }
    
    .expertise-shape.shape5 {
        width: 45px !important;
        height: 45px !important;
        top: 60% !important;
        left: 65% !important;
        opacity: 0.7 !important;
    }
    
    /* Réduction de la taille des pseudo-éléments */
    .expertise-floating-elements::after {
        width: 35px !important;
        height: 35px !important;
        top: 20% !important;
        right: 70% !important;
        opacity: 0.7 !important;
    }
    
    .expertise-floating-elements::before {
        width: 30px !important;
        height: 30px !important;
        bottom: 20% !important;
        right: 45% !important;
        opacity: 0.7 !important;
    }
    
    /* Réduction de l'ampleur des animations pour les rendre moins intrusives sur mobile */
    @keyframes float-expertise-mobile {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(-10px, 10px);
        }
        100% {
            transform: translate(10px, -10px);
        }
    }
    
    @keyframes float-rotate-mobile {
        0% {
            transform: rotate(0deg) translate(5px, 5px);
        }
        50% {
            transform: rotate(180deg) translate(-5px, -5px);
        }
        100% {
            transform: rotate(360deg) translate(5px, 5px);
        }
    }
    
    .expertise-shape {
        animation-name: float-expertise-mobile !important;
    }
    
    .shape3, .shape5, .expertise-floating-elements::before {
        animation-name: float-rotate-mobile !important;
    }
}