.delayed-div {
    opacity: 0; /* Masque les divs au début */
    transform: translateX(
        20px
    ); /* Déplace les divs vers le bas pour l'effet de glissement */
    animation: slideIn 1s ease-out forwards; /* Animation de glissement */
}
.image-great {
    opacity: 0; /* Masque les divs au début */
    transform: translateX(
        1000px
    ); /* Déplace les divs vers le bas pour l'effet de glissement */
    animation: slideIn2 1s ease-out forwards; /* Animation de glissement */
}
/* Animations spécifiques à chaque div */
.delayed-div:nth-child(1) {
    animation-delay: 0s; /* Première div apparait immédiatement */
}

.delayed-div:nth-child(2) {
    animation-delay: 1s; /* Deuxième div apparaît après 1 seconde */
}

.delayed-div:nth-child(3) {
    animation-delay: 2s; /* Troisième div apparaît après 2 secondes */
}
.image-great {
    animation-delay: 1s; /* Troisième div apparaît après 2 secondes */
}
/* Définir l'animation de glissement */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(
            20px
        ); /* Position de départ : décalée vers le bas */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Position finale : alignée à sa place */
    }
}

@keyframes slideIn2 {
    0% {
        opacity: 0;
        transform: translateY(
            -2000px
        ); /* Position de départ : décalée vers le bas */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Position finale : alignée à sa place */
    }
}