/* Animation de base pour le fondu de bas en haut */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(120px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classe pour les éléments à animer */
.fade-in-up {
    opacity: 0;
}

/* Animation appliquée quand la classe "animate" est ajoutée */
.fade-in-up.animate {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.5s; /* Délai global pour tous les éléments */
}

/* Délai pour chaque élément consécutif */
.communes-ctn:nth-child(1).animate {
    animation-delay: 0.2s;
}

.communes-ctn:nth-child(2).animate {
    animation-delay: 0.4s;
}

.communes-ctn:nth-child(3).animate {
    animation-delay: 0.6s;
}





/* Animation de base pour le fade-in de droite à gauche */
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(200px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Classe pour les éléments à animer */
.fade-in-right {
    opacity: 0;
}

/* Animation appliquée quand la classe "animate" est ajoutée */
.fade-in-right.animate {
    animation: fadeInRight 0.8s ease forwards;
}







/* Animation de base pour le fade-in de gauche à droite */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Classe pour les éléments à animer */
.fade-in-left {
    opacity: 0;
}

/* Animation appliquée quand la classe "animate" est ajoutée */
.fade-in-left.animate {
    animation: fadeInLeft 0.8s ease forwards;
}