/***** animation *****/
.animate.fade_in					{ opacity:0; transition:opacity 800ms ease-out; transition-delay:0ms;}
.animate.fade_in.play				{ opacity:1;}
.animate.fade_up					{ opacity:0; transition:opacity 800ms ease-out, transform 800ms ease-out; transition-delay:0ms;}
.animate.fade_up.play				{ opacity:1; transform:translateY(0);}

@media (min-width:1201px) {
.animate.fade_up					{ transform:translateY(40px);}

.animate.clip_ttb					{ clip-path:inset(0 0 100% 0); transition:clip-path 800ms ease-out;}
.animate.clip_ttb.play				{ clip-path:inset(-1px -1px -1px -1px);}
.animate.clip_btt					{ clip-path:inset(100% 0 0 0); transition:clip-path 800ms ease-out;}
.animate.clip_btt.play				{ clip-path:inset(-1px -1px -1px -1px);}
.animate.clip_ltr					{ clip-path:inset(0 100% 0 0); transition:clip-path 800ms ease-out;}
.animate.clip_ltr.play				{ clip-path:inset(-1px -1px -1px -1px);}
.animate.clip_rtl					{ clip-path:inset(0 0 0 100%); transition:clip-path 800ms ease-out;}
.animate.clip_rtl.play				{ clip-path:inset(-1px -1px -1px -1px);}

.animate.delay-200 					{ transition-delay: 200ms;}
.animate.delay-300 					{ transition-delay: 300ms;}
.animate.delay-400 					{ transition-delay: 400ms;}
.animate.delay-600					{ transition-delay: 600ms;}
.animate.delay-800					{ transition-delay: 800ms;}
.animate.delay-1000					{ transition-delay: 1000ms;}
.animate.delay-1200					{ transition-delay: 1200ms;}
}
@media (max-width:1200px) {
.animate.fade_in.play,			 
.animate.fade_up.play				{ transition-delay:300ms;}

.animate.clip_ttb,					
.animate.clip_ltr,					
.animate.clip_rtl					{ opacity:0; transition:opacity 800ms ease-out; transition-delay:0ms;}
.animate.clip_ttb.play,	 
.animate.clip_ltr.play, 
.animate.clip_rtl.play				{ opacity:1; transition-delay:300ms;}
}

/***** animation *****/
.service_propose {
    opacity: 0;
    transform: translateY(30px); /* Départ de l'élément décalé vers le bas */
    transition: opacity 3s ease-out, transform 1s ease-out;
}

/* Ajouter la classe 'play' pour animer */
.service_propose.play {
    opacity: 1;
    transform: translateY(0); /* L'élément remontera */
}

@media (min-width:1201px) {
    .service_propose {
        transform: translateY(40px);
    }
}

/* Ajouter des délais pour chaque élément dans la file */
.service_propose:nth-child(1) {
    transition-delay: 400ms;
}
.service_propose:nth-child(2) {
    transition-delay: 1000ms;
}
.service_propose:nth-child(3) {
    transition-delay: 1400ms;
}
.service_propose:nth-child(4) {
    transition-delay: 1800ms;
}
.service_propose:nth-child(5) {
    transition-delay: 2000ms;
}