/* START HERO */

.hero,

.hero .bigSpacing,

.hero .bigSpacing .uniformSpacing{

    min-height: fit-content;

}

.hero{

    position: relative;

    height: 40vh;

    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{

        flex-direction: column;

    }



    .hero .bigSpacing,

    .hero > img{

        width: 100%;

    }



    .hero > img{

        height: auto;

        aspect-ratio: 21/9;

        border: none;

    }

}





/* END HERO */



/* START bigImgText */



.containerBigImgText .bigImgText:nth-child(odd){

    flex-direction: row-reverse;

    background-color: var(--basicColor3);

}



.bigImgText {

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    gap: 1.5em;

}



.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 .containerText {

    width: 50%;

    display: flex;

}



.bigImgText .containerText .uniformSpacing {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.bigImgText .containerText .uniformSpacing .containerListe,

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

    display: flex;

    flex-wrap: wrap;

    gap: 1em;

}



.bigImgText .containerText .uniformSpacing .containerListe .element{

    width: 100%;

    display: flex;

    align-items: center;

    gap: .5em;

}



.bigImgText .containerText .uniformSpacing .containerListe a.element{

    cursor: pointer;

}



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

    transition: ease all .3s;

}



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

    transform: translateX(10px);

}





.bigImgText .containerText .uniformSpacing .containerListe .element div,

.bigImgText .containerText .uniformSpacing .cardContainer .element .titleContainer div{

    padding: .5em;

    border-radius: 100%;

    width: 2em;

    height: auto;

    max-width: 2em;

    min-width: 2em;

    aspect-ratio: 1/1;

    display: flex;

    align-items: center;

    justify-content: center;

}



.bigImgText .containerText .uniformSpacing .containerListe .element div svg,

.bigImgText .containerText .uniformSpacing .cardContainer .element .titleContainer div svg{

    width: 100%;

    height: 100%;

}



.bigImgText .containerText .uniformSpacing .cardContainer {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1em 2em;

}



.bigImgText .containerText .uniformSpacing .cardContainer > :last-child:nth-child(odd) {

    grid-column: span 2;

}





.bigImgText .containerText .uniformSpacing .cardContainer .element,

.bigImgText .containerText .uniformSpacing .infosContainer .element {

    display: flex;

    flex-direction: column;

    gap: 1em;

    padding: 2em;

}



.bigImgText .containerText .uniformSpacing .cardContainer .element .titleContainer {

    display: flex;

    gap: .5em;

}



.bigImgText .containerText .uniformSpacing .cardContainer .element a {

    padding: 1em 2em;

    width: fit-content;

}



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

    .bigImgText .bigSpacingSide .uniformSpacing .containerListe .element{

        width: 100%;

    }

}

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

    .bigImgText .bigSpacingSide,

    .bigImgText .encart{

        width: 100%;

    }



    .bigImgText{

        flex-direction: column !important;

    }



    .bigImgText .fixedImg{

        width: 80%;

        aspect-ratio: 4/3;

    }



    .bigImgText .fixedImg img {

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

    }



    .bigImgText.iframe .iframeContainer{

        width: 80%

    }

}



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

    .bigImgText .containerText .uniformSpacing .cardContainer .element{

        grid-column: span 2;

    }

}





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

    .bigImgText .bigSpacingSide .uniformSpacing .containerListe .element{

        width: 100%;

    }



}

/* END bigImgText */