/* 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;
}


@keyframes roll-in-left {
    0% {
        transform: translateX(-120vw) rotate(-720deg);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}
.roll-in-left {
    animation: roll-in-left 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s both;
    /* Optionnel: pour que le transform fonctionne bien */
    will-change: transform;
}



@keyframes roll-in-right {
    0% {
        transform: translateX(120vw) rotate(720deg);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

.roll-in-right {
    animation: roll-in-right 2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s both;
    will-change: transform;
}


/* Animation du premier nuage */
.cloud-1 {
    animation: floatCloud1 30s ease-in-out infinite alternate;
    transform-origin: center center;
}

/* Animation du deuxième nuage */
.cloud-2 {
    animation: floatCloud2 40s ease-in-out infinite alternate;
    transform-origin: center center;
}

/* Définition des animations */
@keyframes floatCloud1 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(40px, 20px);
    }
    100% {
        transform: translate(-20px, 10px);
    }
}

@keyframes floatCloud2 {
    0% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(-30px, 10px);
    }
    66% {
        transform: translate(20px, -15px);
    }
    100% {
        transform: translate(10px, 5px);
    }
}