/******* Animations d'entrées *****/
.fade_in_right,
.fade_in_left,
.rotate_in_right,
.rotate_in_left,
.fade_in_top,
.fade_in_bottom,
.roll_in_left,
.roll_in_right,
.zoom_in,
.swipe_left,
.swipe_right,
.stretch {
    opacity: 0; /* Assurez-vous qu'ils sont invisibles par défaut */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transition pour une animation fluide */
    position: relative; /* Position relative pour mieux contrôler le débordement */
    max-width: 100%; /* Limite la largeur pour éviter le débordement */
    max-height: 100%; /* Limite la hauteur pour éviter le débordement */
    overflow: hidden; /* Empêche le débordement */
}

/* Transformations initiales */
.fade_in_right {
    transform: translateX(30px); /* Réduire le décalage horizontal pour éviter le débordement */
}

.fade_in_left {
    transform: translateX(-30px); /* Réduire le décalage horizontal pour éviter le débordement */
}

.rotate_in_right {
    transform: rotateY(90deg); /* Rotation initiale pour rotate_in_right */
}

.rotate_in_left {
    transform: rotateY(-90deg); /* Rotation initiale pour rotate_in_left */
}

.fade_in_top {
    transform: translateY(-30px); /* Réduire le décalage vertical pour éviter le débordement */
}

.fade_in_bottom {
    transform: translateY(30px); /* Réduire le décalage vertical pour éviter le débordement */
}

.roll_in_left {
    transform: translateY(30px) rotate(180deg); /* Roule vers le bas à gauche */
}

.roll_in_right {
    transform: translateY(30px) rotate(-180deg); /* Roule vers le bas à droite */
}

.zoom_in {
    transform: scale(0.5); /* Zoom initial */
}

.swipe_left {
    transform: translateX(-100%); /* Balayage à gauche */
}

.swipe_right {
    transform: translateX(100%); /* Balayage à droite */
}

.stretch {
    transform: scale(0); /* Élargissement initial */
}

/* Ajustement des transformations pour mobile */
@media only screen and (max-width: 768px) {
    .fade_in_right {
        transform: translateX(15px); /* Réduire encore plus le décalage horizontal pour mobile */
    }

    .fade_in_left {
        transform: translateX(-15px); /* Réduire encore plus le décalage horizontal pour mobile */
    }

    .fade_in_top {
        transform: translateY(-15px); /* Réduire encore plus le décalage vertical pour mobile */
    }

    .fade_in_bottom {
        transform: translateY(15px); /* Réduire encore plus le décalage vertical pour mobile */
    }

    /* Ajustements de largeur */
    .fade_in_right, .fade_in_left, .fade_in_top, .fade_in_bottom {
        max-width: 100%; /* Ajustez selon vos besoins */
        margin: 0 auto; /* Centrez les éléments */
    }

    /* Pour s'assurer que les éléments ne débordent pas */
    .fade_in_right, .fade_in_left, .fade_in_top, .fade_in_bottom,
    .roll_in_left, .roll_in_right, .zoom_in, .swipe_left, .swipe_right, .stretch {
        box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur/hauteur */
        overflow: hidden; /* Empêche le débordement */
    }
}