/* Liste des animations */

/* Animation section apparaît au scroll */

.animation-from-bottom {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s, transform 1s;
}
.animation-from-top {
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 1s, transform 1s;
}
.animation-from-left {
    opacity: 0;
    transform: translateX(-150px);
    transition: opacity 1s, transform 1s;
}
.animation-from-right {
    opacity: 0;
    transform: translateX(150px);
    transition: opacity 1s, transform 1s;
}
.hidden {
    opacity: 0;
}
.visible {
    opacity: 1;
    transform: translateY(0);
    transform: translateX(0);
}

/* Enlever les + flottants sur mobile et tablette */
.floating-plus{
    display: none;
}

@media screen and ( min-width:1170px ) {

    /* Animation 1 (accueil) : Rotate */
    @keyframes rotate {
        0% {
            opacity: 1;
            transform: translateX(100%) rotate(360deg) scale(0);
        }
        100% {
            opacity: 1;
            transform: translateX(0) rotate(0deg) scale(1.8);
        }
    }
    .rotate::before, .rotate::after{
        animation: rotate .5s linear forwards;
    }

    /* Animation 2 Trait : appearFromRightTop */
    @keyframes appearFromRightTop {
        0% {
            transform: translateY(-130%) translateX(100%);
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateY(0) translateX(-80%);
        }
    }
    .appearFromRightTop::after, .appearFromRightTop::before{
        animation: appearFromRightTop .8s ease-in-out forwards;
    }

    /*  Animation 3 Trait : appearFromLeftTop */
    @keyframes appearFromLeftTop {
        0% {
            transform: translateY(-100%) translateX(-100%);
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateY(0) translateX(0%);
        }
    }
    .appearFromLeftTop::before, .appearFromLeftTop::after{
        animation: appearFromLeftTop .8s ease-in-out forwards;
    }

    /* Animation 4 Trait (accueil) : appearFromLeftBottom */
    @keyframes appearFromLeftBottom {
        0% {
            transform: translateY(100%) translateX(-100%);
            opacity: 1;
        }
        100% {
            transform: translateY(-40%) translateX(0%);
            opacity: 1;
        }
    }
    .appearFromLeftBottom::before, .appearFromLeftBottom::after{
        animation: appearFromLeftBottom .8s ease-in-out forwards;
    }

    /*  Animation 5 Trait : appearFromRightTop2 */
    @keyframes appearFromRightTop2 {
        0% {
            transform: translateY(-100%) translateX(100%);
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateY(0) translateX(0);
        }
    }
    .appearFromRightTop2::after{
        animation: appearFromRightTop2 1s ease-in-out forwards;
    }


    /*  Animation 6 Trait : appearFromLeftTop2 */
    @keyframes appearFromLeftTop2 {
        0% {
            transform: translateY(-100%) translateX(-100%) rotate(90deg);
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateY(0) translateX(0%) rotate(90deg);
        }
    }
    .appearFromLeftTop2::after{
        animation: appearFromLeftTop2 .8s ease-in-out forwards;
    }


    /* Floating plus animation */

    /* Main */
    .floating-plus__conteneur {
        position: absolute;
        top: 18vh;
        right: 10%;
        width: 8rem;
        height: 8rem;
    }
    .floating-plus__conteneur2 {
        position: absolute;
        bottom: 20%;
        left: 10%;
        width: 5rem;
        height: 5rem;
    }
    /* Intro */
    .floating-plus__conteneur3 {
        position: absolute;
        top: 5rem;
        right: 12%;
        width: 6rem;
        height: 6rem;
    }
    /* L'équipe */
    .floating-plus__conteneur4 {
        position: absolute;
        top: -5rem;
        left: 20%;
        width: 8rem;
        height: 8rem;
    }
    /* Choisir */
    .floating-plus__conteneur5 {
        position: absolute;
        top: -1rem;
        right: 27%;
        width: 5rem;
        height: 5rem;
    }

    /* Page expertise */
    .floating-plus__conteneur6 {
        position: absolute;
        top: 25%;
        right: 8%;
        width: 8rem;
        height: 8rem;
    }
    .floating-plus__conteneur7 {
        position: absolute;
        top: -5rem;
        right: -32rem;
        width: 5rem;
        height: 5rem;
    }
    .floating-plus__conteneur8 {
        position: absolute;
        top: -5rem;
        right: 27%;
        width: 5rem;
        height: 5rem;
    }
    .floating-plus__conteneur9 {
        position: absolute;
        bottom: -5rem;
        left: -20%;
        width: 5rem;
        height: 5rem;
    }
    .floating-plus__conteneur10 {
        position: absolute;
        top: 3rem;
        right: 15%;
        width: 8rem;
        height: 8rem;
    }
    .floating-plus__conteneur11 {
        position: absolute;
        bottom: 30%;
        right: -35vw;
        width: 8rem;
        height: 8rem;
    }
    .floating-plus__conteneur12 {
        position: absolute;
        bottom: 30%;
        right: -30vw;
        width: 8rem;
        height: 8rem;
    }
    .floating-plus__conteneur13 {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 8rem;
        height: 8rem;
    }
	.floating-plus__conteneur14 {
        position: absolute;
        top: 20%;
        right: -30vw;
        width: 8rem;
        height: 8rem;
    }
	.floating-plus__conteneur15 {
        position: absolute;
        top: 3rem;
        left: 15%;
        width: 8rem;
        height: 8rem;
    }


    .floating-plus {
        display: block;
        position: absolute;
        font-size: 4rem;
        font-weight: 100;
        opacity: 0.8;
        transform-origin: center center;
        user-select: none;
    }
    /* 2 types d'animations pour donner un effet plus aléatoire */
    @keyframes float {
        0% {
            transform: translate(4px, 4px);
        }
        50% {
            transform: translate(-4px, -4px);
        }
        100% {
            transform: translate(4px, 4px);
        }
    }
    @keyframes float2 {
        0% {
            transform: translate(4px, -4px);
        }
        50% {
            transform: translate(-4px, 4px);
        }
        100% {
            transform: translate(4px, -4px);
        }
    }
    /* Positions des + */
    .floating-plus:nth-child(1) {
        top: 10%;
        left: 80%;
        animation-duration: 4s;
        color: var(--blanc);
        animation: float2 5s infinite ease-in-out;
    }
    .floating-plus:nth-child(2) {
        top: 30%;
        left: 20%;
        animation-duration: 3s;
        color: var(--orange);
        animation: float2 5s infinite ease-in-out;
    }
    .floating-plus:nth-child(3) {
        top: 70%;
        left: 50%;
        animation-duration: 5s;
        color: var(--orange);
        animation: float 5s infinite ease-in-out;
    }
    .floating-plus:nth-child(4) {
        top: 78%;
        left: 15%;
        animation-duration: 6s;
        color: var(--blanc);
        animation: float 5s infinite ease-in-out;
    }
    .floating-plus:nth-child(5) {
        top: 80%;
        left: 90%;
        animation-duration: 4.5s;
        color: var(--orange);
        animation: float2 5s infinite ease-in-out;
    }
    .floating-plus:nth-child(6) {
        top: 40%;
        left: 70%;
        animation-duration: 5.5s;
        color: var(--orange);
        animation: float 5s infinite ease-in-out;

    }
    .floating-plus:nth-child(7) {
        top: 0;
        left: 40%;
        animation-duration: 3.5s;
        color: var(--orange);
        animation: float2 5s infinite ease-in-out;
    }
    .floating-plus:nth-child(8) {
        top: 0;
        left: 0;
        animation-duration: 3s;
        color: var(--blanc);
        animation: float 5s infinite ease-in-out;
    }
}

/* Animation flèches footer carte */


.direction {
    opacity: 0; /* Masquer toutes les flèches par défaut */
    transition: opacity 0.5s; /* Transition de l'opacité */
}

.direction.show {
    opacity: 1; /* Afficher la flèche */
}

/* Définissez les classes d'animation pour les flèches */
@keyframes arrowAnimation {
0% {
    opacity: 0;
}
50% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}