.fade-in-left,.fade-in-left2,.fade-in-left3,
.fade-in-right,.fade-in-right2,.fade-in-right3 {
    opacity: 0;
}


.zoom-out.animate{
      animation: ZoomOut 1s ease-in-out ;
}
/* Animation de zoom Out */
@keyframes ZoomOut {
    0% {
        transform: scale(0.9);
         opacity: 0; 
    }
    100% {
        transform: scale(1); /* léger zoom */
         opacity: 1; 
    }
}

.zoom-outA1.animate{
      animation: ZoomOut1 0.9s ease-in-out ;
}
/* Animation de zoom Out */
@keyframes ZoomOut1 {
    0% {
        transform: scale(0.97);
        
    }
    100% {
        transform: scale(1); /* léger zoom */
        
    }
}

.zoom-outA2.animate{
      animation: ZoomOut2 .7s ease-in-out ;
}
/* Animation de zoom Out */
@keyframes ZoomOut2 {
    0% {
        transform: scale(0.9);
       
    }
    100% {
        transform: scale(1); /* léger zoom */
       
    }
}


/*hero-title*/
.hero-title {
    animation: titleZoom 1s ease-in-out ;
}

/* Animation de zoom */
@keyframes titleZoom {
    0% {
        transform: scale(0.9);
         opacity: 0; 
    }
    100% {
        transform: scale(1); /* léger zoom */
         opacity: 1; 
    }
}

.fade-in-left.animate {
    animation: fadeInLeft 1s ease-out forwards;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-450px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left2.animate {
    animation: fadeInLeft2 1.2s ease-out forwards;
}

@keyframes fadeInLeft2 {
    0% {
        opacity: 0;
        transform: translateX(-650px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left3.animate {
    animation: fadeInLeft3 1.4s ease-out forwards;
}

@keyframes fadeInLeft3 {
    0% {
        opacity: 0;
        transform: translateX(-850px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right.animate {
    animation: fadeInRight 1s ease-out forwards;
   
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(450px); 
    }
    100% {
        opacity: 1;
        transform: translateX(0); /
    }
}



.fade-in-right2.animate {
    animation: fadeInRight2 1.2s ease-out forwards;
   
}

@keyframes fadeInRight2 {
    0% {
        opacity: 0;
        transform: translateX(650px); 
    }
    100% {
        opacity: 1;
        transform: translateX(0); /
    }
}

.fade-in-right3.animate {
    animation: fadeInRight3 1.4s ease-out forwards;
   
}

@keyframes fadeInRight3 {
    0% {
        opacity: 0;
        transform: translateX(850px); 
    }
    100% {
        opacity: 1;
        transform: translateX(0); /
    }
}

/*bloc Sectors  effet au survol*/

.sector-card img {
    transition: transform 0.6s ease;   
}

.sector-card:hover img {
    transform: scale(1.08);            
}


.sector-card::after {
    transition: background 0.4s ease-in-out;
}


.sector-card:hover::after {
    background: rgba(0,0,0,0.65); 
}

.sector-info {
    transition: transform 0.4s ease-in-out;
}
.sector-card:hover .sector-info {
    transform: translateY(30px);  
}


/*bloc Professional Services  effet au survol*/
.service-card .service-content{
     transition: transform 0.4s ease-in-out;
     
}

.service-card .service-content:hover{
   
     transform: translateY(-20px);  
}


.service-card {
    background-size: 130%;   /* zoom final */
    transition: background-size 0.6s ease-in-out;
}

.service-card:hover {
    background-size: 140%;   /* zoom au survol */
}

.service-card::after {
    transition: background 0.4s ease-in-out;
}

.service-card:hover::after {
    background: rgba(0,0,0,0.75); /* plus sombre */
}

/* Fix spécial pour la carte verticale */
.service-card.Vertical {
    background-size: 270%; /* état normal */
}

.service-card.Vertical:hover {
    background-size: 280%; /* zoom plus fort */
}



.img-wrapper  {
    transition: transform 0.3s ease;   
}

.img-wrapper:hover {
    transform: scale(1.04);            
}

/*zoom 4 sections */
.zoom-outS1.animate{
      animation: ZoomOutS1 .9s ease-in-out forwards ;
}

.zoom-outS2.animate{
   
    animation: ZoomOutS1 .9s ease-in-out forwards;
    animation-delay: 0.2s;
           
}

.zoom-outS3.animate{
  
    animation: ZoomOutS1 .9s ease-in-out forwards;
          animation-delay: 0.4s;

}


.zoom-outS4.animate{
  
    animation: ZoomOutS1 .9s ease-in-out forwards;
          animation-delay: 0.6s;
}
/* Animation de zoom Out */
@keyframes ZoomOutS1 {
    0% {
        transform: scale(0.95);
         opacity: 0; 
    }
    100% {
        transform: scale(1); /* léger zoom */
         opacity: 1; 
    }
}

/* Inverser les animations si nécessaire */
.textRight .fade-in-left {
    animation-name: fadeInRight;
}

.textRight .fade-in-right {
    animation-name: fadeInLeft;
}


/* SI les animations ne fonctionne pas alors on ituluse cette class Accessibilité : respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

    /* Désactive toutes les animations */
    * {
        animation: none !important;
        transition: none !important;
    }

    /* Force les éléments animés à être visibles */
    .fade-in-left,
    .fade-in-left2,
    .fade-in-left3,
    .fade-in-right,
    .fade-in-right2,
    .fade-in-right3,
    .zoom-out,
    .zoom-outA1,
    .zoom-outA2,
    .zoom-outS1,
    .zoom-outS2,
    .zoom-outS3,
    .zoom-outS4 {
        opacity: 1 !important;
        transform: none !important;
    }
}