/* Style de base pour tous les 3 éléments à animer */
.animate-on-scroll {
opacity: 0;
transition: all 1s ease-out;
will-change: opacity, transform;
}

/* Slide à gauche */
.slide-left {
transform: translateX(-50px);
}

.slide-left.visible {
opacity: 1;
transform: translateX(0);
}

/* Slide à droite */
.slide-right {
transform: translateX(50px);
}

.slide-right.visible {
opacity: 1;
transform: translateX(0);
}

/* Zoom */
.zoom {
transform: scale(0.8);
}

.zoom.visible {
opacity: 1;
transform: scale(1);
}

/* pour les telephone */
@media (max-width: 768px) {

.slide-left,
.slide-right {
transform: none;
}

.zoom {
transform: scale(1);
}}