/* START heroVideo*/

.heroVideo {

    height: 90vh;

}



.heroVideo .bigSpacing{

    height: 100%;

}



.heroVideo .uniformSpacing{

    display: flex;

    height: 100%;

    position: relative;

    z-index: 2;

    align-items: flex-end;

}



.heroVideo .containerVideo {

    position: initial;

}



body:not(#editor) .heroVideo .sliderContainer {

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 1;

}



.heroVideo  .horizontalScroll {

    margin: 0;

}



body:not(#editor) .heroVideo.afterFilter:after {

    z-index: -10;

}



body:not(#editor) .heroVideo  .sliderWrapper {

    position: relative;

    z-index: 1;

}



body:not(#editor) .heroVideo  .sliderWrapper,

body:not(#editor) .heroVideo  .horizontalScroll,

body:not(#editor) .heroVideo .sliderSlide  {

    height: 100%;

    width: 100%;

    object-fit: cover;

}



body#editor .sliderWrapper .editor-tpl{

    display: flex;

    gap: 1em;

}



body#editor .heroVideo {

    height: auto;

}



.heroVideo .sliderWrapper{

    gap: 0;

}



.heroVideo .containerSliderButton{

    position: absolute;

    top: 0;

    right: 1em;

    height: 100%;

    z-index: 200;

}



.heroVideo .sliderDots {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: .5em;

    height: 100%;

    z-index: 200;

}



.heroVideo .sliderDot {

    display: inline-block;

    width: 12px;

    height: 12px;

    margin: 0 5px;

    background-color: transparent;

    border-radius: 50%;

    cursor: pointer;

    border: 1px solid var(--basicWhite);

    cursor: pointer;



}



.heroVideo .sliderDot.active {

    background-color: var(--basicWhite);

}





.heroVideo .scrollIcone{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .5em;

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    z-index: 1;

}



.heroVideo .scrollIcone svg{

    width: 1.5em;

    height: 1.5em;

}



.heroVideo .scrollIcone div{

    width: 1px;

    height: 3.5em;

}



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

    .heroVideo .uniformSpacing{

        align-items: center;

    }

}



/* END heroVideo*/



/* START textTripleImg */

.textTripleImg .uniformSpacing {

    display: flex;

    gap: 2.5em;

}



.textTripleImg .uniformSpacing .introText{

    width: calc((100% - 2.5em) / 3);



}



.textTripleImg .uniformSpacing .containerImg {

    display: flex;

    gap: 2em;

    width: calc((100% - 2.5em) / 3 * 2);

    height: auto;

    aspect-ratio: 7/5;

}



.textTripleImg .uniformSpacing .containerImg > img{

    height: 100%;

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

}



.textTripleImg .uniformSpacing .containerImg img{

    object-fit: cover;

}



.textTripleImg .uniformSpacing .containerImg .imgColonne{

    display: flex;

    flex-direction: column;

    gap: 2em;

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

    height: 100%;

}



.textTripleImg .uniformSpacing .containerImg .imgColonne img{

    height: calc((100% - 2em) / 2);

    max-width: 100%;

    width: 100%;

}





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

    .textTripleImg .uniformSpacing{

        flex-direction: column;

    }



    .textTripleImg .uniformSpacing .introText,

    .textTripleImg .uniformSpacing .containerImg {

        width: 100%;

    }



    .textTripleImg .uniformSpacing .containerImg{

        flex-direction: column;

    }



    .textTripleImg .uniformSpacing .containerImg img{

        width: 100%;

        aspect-ratio: 19 / 9;

    }

    .textTripleImg .uniformSpacing .containerImg .imgColonne{

        width: 100%;

        flex-direction: row;

    }

    .textTripleImg .uniformSpacing .containerImg .imgColonne img{

        height: auto;

        max-width: 100%;

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

        aspect-ratio: 9 / 16;

    }

}





/* END textTripleImg */



/* START listeCategories */

.listeCategories .uniformSpacing{

    display: flex;

    flex-direction: column;

    gap: 2.5em;

}



.listeCategories .uniformSpacing .containerImg{

    display: flex;

    gap: 1.5em;

    width: 100%;

    flex-wrap: wrap;

}



.listeCategories .uniformSpacing .containerImg a{

    width: calc((100% - 1.5em * 2) / 3);

    height: auto;

    aspect-ratio: 2/3;

    position: relative;

}



.listeCategories .containerImg a img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.listeCategories .uniformSpacing .containerImg a p{

    position: absolute;

    bottom: 2.5em;

    left: 2.5em;

}



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

    .listeCategories .uniformSpacing .containerImg a{

        width: 100%;

        aspect-ratio: 4/3;



    }

}



/* END listeCategories */



/* START bandeauImgText */

.bandeauImgText {

    padding-top: 7em;

    padding-bottom: 7em;

}



.bandeauImgText .uniformSpacing {

 display: flex;

    gap: 2.5em;

}



.bandeauImgText .uniformSpacing .introText{

    background-color: #111111;

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

    padding: 3em;

    max-height: 20em;

    overflow-y: auto;

    opacity: .9;

    position: relative;

    z-index: 10;

}



.bandeauImgText .uniformSpacing .containerImg{

    position: absolute;

    top: 0;

    right: 0;

    height: 100%;

    width: auto;

    max-width: 45%;

}



.bandeauImgText .uniformSpacing .containerImg img{

    height: 100%;

    width: 100%;

    object-fit: cover;

}



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

    .bandeauImgText .uniformSpacing .introText{

        width: 100%;

    }

}



/* END bandeauImgText */



/* START actualite */

.actualite .uniformSpacing{

    display: flex;

    flex-direction: column;

    gap: 1.5em;

}



.actualite .uniformSpacing .listingContainer{

    display: flex;

    gap: 1.5em;

    flex-wrap: wrap;

}



.actualite .uniformSpacing .listingContainer a{

    width: calc((100% - 1.5em * 2) / 3);

    display: flex;

    flex-direction: column;

    gap: 1.5em;

}



.actualite .uniformSpacing .listingContainer a .imgContainer img{

    width: 100%;

    aspect-ratio: 16/9;

    height: auto;

    object-fit: cover;

}



.actualite .uniformSpacing .listingContainer a .imgContainer p{

    position: absolute;

    bottom: 3em;

    left: 0;

    padding: .25em 1em;

    border-radius: 0 var(--basicRadius) var(--basicRadius) 0;

    width: fit-content;

}



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

    .actualite .uniformSpacing .listingContainer a{

        width: 100%;

    }

}



/* END actualite */