.anim-par{
    contain: paint;
}

/* --- Base commune --- */
.section {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}

/* --- États initiaux selon la direction --- */

/* Par défaut : Bas vers Haut */
.section {
    transform: translateY(60px);
}

/* Gauche vers Droite */
.section.left {
    transform: translateX(-100px);
}

/* Droite vers Gauche */
.section.right {
    transform: translateX(100px);
}

/* --- État Visible (commun à tous) --- */
.section.visible {
    opacity: 1;
    transform: translate(0, 0); /* Remet tout à zéro (X et Y) */
}