/* 1. Style de base appliqué à toutes vos sections */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px); /* Décale la section légèrement vers le bas */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Optimise la fluidité de l'animation */
}

/* 2. Style appliqué automatiquement au scroll grâce au JavaScript */
.animate-on-scroll.active {
    opacity: 1;
    transform: translateY(0); /* Remet la section à sa position initiale */
}

/* Optionnel : Variantes d'animations */
.fade-in-left {
    opacity: 0;
    transform: translateX(-50px); /* Arrive par la gauche */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-left.active {
    opacity: 1;
    transform: translateX(0);
}
/* Style de départ : masqué et décalé de 50 pixels vers la droite */
.fade-in-right {
    opacity: 0;
    transform: translateX(50px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* Style d'arrivée : devient visible et reprend sa place initiale */
.fade-in-right.active {
    opacity: 1;
    transform: translateX(0);
}