/* START HERO */

.hero,

.hero .bigSpacing,

.hero .bigSpacing .uniformSpacing{

    min-height: fit-content;

}

.hero{

    position: relative;

    height: 90vh;

    display: flex;

}



.hero > img{

    width: 30%;

    height: auto;

    object-fit: cover;

    border-left: 4px solid var(--basicColor1);

}



.hero .bigSpacing{

    height: 100%;

    background-attachment: fixed;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: left;

    width: 70%;

}





.hero .bigSpacing .uniformSpacing {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



@media screen and (max-width: 800px) {

    .hero .bigSpacing{

        width: 100%;

    }



    .hero > img {

        display: none;

    }

}





/* END HERO */





/* START imgText */

.imgText .smallUniformSpacing{

    display: flex;

    align-items: center;

    gap: 3em;

}



.imgText .smallUniformSpacing .introText{

    width: 50%;

}



.imgText .smallUniformSpacing .imgContainer{

    width: 50%;

    height: auto;

    aspect-ratio: 1/1;

}



.imgText .smallUniformSpacing .imgContainer img{

    width: 100%;

    height: 100%;

}



@media screen and (max-width: 700px) {

    .imgText .smallUniformSpacing{

        flex-direction: column;

    }



    .imgText .smallUniformSpacing .imgContainer,

    .imgText .smallUniformSpacing .introText{

        width: 100%;

    }

}





/* END imgText */



/* START bigImgText */

.bigImgText {

    position: relative;

    display: flex;

    gap: 5em;

    align-items: center;

    overflow: hidden;

}



.bigImgText .fixedImg {

    position: relative;

    width: 50%;

    aspect-ratio: 4/3;

    overflow: hidden;

    max-height: 100%;

}



.bigImgText .fixedImg img {

    width: 100%;

    height: 120%; /* un peu plus grand pour effet parallaxe */

    object-fit: cover;

    position: absolute;

    top: 0;

    left: 0;

    transform: translateY(0);

}



.bigImgText .bigSpacing {

    width: 50%;

    display: flex;

}



.bigImgText .bigSpacing .uniformSpacing {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.bigImgText .bigSpacing .uniformSpacing .containerListe,

.bigImgText .bigSpacing .uniformSpacing .containerListe .editor-tpl{

    display: flex;

    flex-wrap: wrap;

    gap: 1em;

}



.bigImgText .bigSpacing .uniformSpacing .containerListe .element{

    width: calc((100% - 1em) / 2);

    display: flex;

    gap: .5em;

}



.bigImgText .bigSpacing .uniformSpacing .containerListe .element{

    width: calc((100% - 1em) / 2);

    display: flex;

    align-items: center;

    gap: .5em;

}



.bigImgText .bigSpacing .uniformSpacing .containerListe a.element{

    cursor: pointer;

}



.bigImgText .bigSpacing .uniformSpacing .containerListe a.element p{

    transition: ease all .3s;

}



.bigImgText .bigSpacing .uniformSpacing .containerListe a.element:hover p{

    transform: translateX(10px);

}





.bigImgText .bigSpacing .uniformSpacing .containerListe .element div{

    padding: .5em;

    border-radius: 100%;

    width: 2em;

    height: auto;

    min-width: 2em;

    max-width: 2em;

    aspect-ratio: 1/1;

    display: flex;

    align-items: center;

    justify-content: center;

}



.bigImgText .bigSpacing .uniformSpacing .containerListe .element div svg{

    width: 100%;

    height: 100%;

}



@media screen and (max-width: 1200px) {

    .bigImgText .bigSpacing .uniformSpacing .containerListe .element{

        width: 100%;

    }

}

@media screen and (max-width: 900px) {

    .bigImgText .bigSpacing{

        width: 100%;

    }



    .bigImgText .bigSpacing .uniformSpacing .containerListe .element{

        width: calc((100% - 1em) / 2);

    }



    .bigImgText{

        gap: 0;

        flex-direction: column;

    }



    .bigImgText .fixedImg{

        width: 80%;

        aspect-ratio: 4/3;

    }



    .bigImgText .fixedImg img {

        height: 150%; /* un peu plus grand pour effet parallaxe */

    }



}



@media screen and (max-width: 600px) {

    .bigImgText .bigSpacing .uniformSpacing .containerListe .element{

        width: 100%;

    }



}





/* END bigImgText */



/* START bigBandeauParalaxe */

.bigBandeauParalaxe{

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    background-attachment: fixed;

    background-size: cover;

    background-repeat: no-repeat;

}



.bigBandeauParalaxe .moyensContainer{

    width: 40%;

    height: fit-content;

    padding: 3em;

    display: flex;

    flex-direction: column;

    gap: 2em;

}



.bigBandeauParalaxe .bigSpacing{

    height: 100%;

    width: 50%;

    margin-left: auto;

}





.bigBandeauParalaxe .bigSpacing .uniformSpacing {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.bigBandeauParalaxe .bigSpacing .uniformSpacing iframe {

    width: 100%;

    height: auto;

    aspect-ratio: 16/9;

}



.bigBandeauParalaxe .containerListe,

.bigBandeauParalaxe .containerListe .editor-tpl{

    display: flex;

    flex-wrap: wrap;

    gap: 1em;

}





.bigBandeauParalaxe .containerListe .element{

    width: 100%;

    display: flex;

    align-items: center;

    gap: .5em;

}



.bigBandeauParalaxe .containerListe a.element{

    cursor: pointer;

}



.bigBandeauParalaxe .containerListe a.element p{

    transition: ease all .3s;

}



.bigBandeauParalaxe .containerListe a.element:hover p{

    transform: translateX(10px);

}





.bigBandeauParalaxe .containerListe .element div{

    padding: .5em;

    border-radius: 100%;

    width: 2em;

    height: auto;

    min-width: 2em;

    min-height: 2em;

    aspect-ratio: 1/1;

    display: flex;

    align-items: center;

    justify-content: center;

}



.bigBandeauParalaxe .containerListe .element div svg{

    width: 100%;

    height: 100%;

}



@media screen and (max-width: 900px) {

    .bigBandeauParalaxe{

        flex-direction: column

    }



    .bigBandeauParalaxe .bigSpacing{

        margin: 0 auto;

        width: 100%;

    }



    .bigBandeauParalaxe .moyensContainer{

        margin: 0 auto;

        width: 80%;

    }

}









/* END bigBandeauParalaxe */