/* ALL */

.block-banner .slick-slide img {
    display: block;
}

.component-hero-banner__banner-home {
    /* youtube video ratio */
    --banner-home-height: 56.25vw;
}

.home .componentHero .swiper .swiper-slide img,
.home .componentHero .swiper .swiper-slide picture,
.home .componentHero .swiper .swiper-slide picture img,
.home .componentHero .swiper .swiper-slide video,
.componentHero .slide img,
.componentHero .slide picture,
.componentHero .slide picture img,
.componentHero .slide video {
    max-width: 100%;
    width: 100%;
    display: block;
    height: var(--banner-home-height); 
    max-height: 100vh; 
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.component-hero-banner__banner-home .banner-subtitle {
    font-size: 1.25rem; /* 20px */
    line-height: 1.4375rem; /* 23px */
    font-weight: 300;
    letter-spacing: 0.02em; /* 2% */
}

.component-hero-banner__banner-home .banner-title a,
.component-hero-banner__banner-home .banner-subtitle a {
    text-decoration: none;
}

/* BLOC BANNER : component-hero-banner__banner-home */

.component-hero-banner__banner-home {
    position: relative;
    top: -7.5rem;
    margin-bottom: -12rem;
}

.component-hero-banner--h1__banner-home{
    color:var(--blue);
    margin-top: 0.5rem;
    position: relative;
    z-index: 1;
    font-family: "Sharp Grotesk", sans-serif;
    font-style: normal;
    font-weight: 800;
    text-wrap: initial;
}

.component-hero-banner--h2__banner-home{
    position: relative;
    color: var(--white);
    font-size: var(--h2-s-size);
    font-weight: var(--h2-s-weight);
    line-height: var(--h2-s-line-height);
    font-family: "Space Grotesk", "sans-serif";
    margin: 0;
    z-index: 1;
    text-wrap: initial;
}

.component-hero-banner__banner-home .background-wrapper{
    display: grid;
    grid-template-columns: 1fr;
}

.component-hero-banner__banner-home .background-wrapper--item{
    position: relative;
    width: fit-content; /* adapte selon ton image */
    height: var(--banner-home-height);
    overflow: hidden;
    /* display: inline-block; */
    margin: auto;
    width: 100%;
}

.component-hero-banner__banner-home .background-wrapper--item:before {
    z-index: 1;
}

.component-hero-banner__banner-home .component-wrapper-video--embed-foreground {
    height: 0;
    padding-bottom: var(--banner-home-height);
    position: relative;
}

.component-hero-banner__banner-home .component-wrapper-video--embed-youtube {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: scale(1.36);
    pointer-events: none;
}

.component-hero-banner__banner-home .topic-image-text {
    height: 100%;
}

.component-hero-banner__banner-home .background-wrapper--item img,
.component-hero-banner__banner-home .background-wrapper--item video {
    width:100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.6) contrast(0.8) sepia(1) hue-rotate(180deg) saturate(2); 
    transition: filter 0.2s ease-out;
    display: block;
}

.component-hero-banner__banner-home .background-wrapper--item img:hover, .component-hero-banner__banner-home .background-wrapper--item video:hover {
    filter:none;
}

.component-hero-banner__banner-home .background-title{
    position: relative;
    top: -2.5rem;
    padding: 0.5rem 1rem;
    flex-direction: column;
    display: flex;
    justify-content: center;
    gap:1rem;
    pointer-events: none;
}

.component-hero-banner__banner-home img,
.component-hero-banner__banner-home picture,
.component-hero-banner__banner-home video {
    max-width: 100%;
    width: 100%;
    display: block;
    height: var(--banner-home-height);
    /* max-height: 100vh;  */
    object-fit: cover;
    min-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.component-hero-banner__banner-home .slide {
    position: relative;
}

.component-hero-banner__banner-home .banner-content {
    position: relative;
    top: -1.5rem;
}

.component-hero-banner__banner-home .banner-title {
    text-transform: uppercase;
}



@media screen and (min-width: 26.188rem) /*402px*/{

    /* BANNER */

    .component-hero-banner__banner-home{
        margin-bottom:-10rem;
    }

    .component-hero-banner__banner-home .background-title{
        top:-0.5rem;
    }

    .component-hero-banner--h2__banner-home{
        margin-top: 0
    }

    
}

@media screen and (min-width: 26.25rem) /*420px*/{

    /* BANNER */

    .component-hero-banner__banner-home .banner-content {
        position: relative;
        top: -3rem;
    }
    
}

@media screen and (min-width: 48rem) /*768px*/{

    /* BANNER */

    .component-hero-banner--h1__banner-home{
        line-height: 3rem;
    }

    .component-hero-banner--h2__banner-home{
        font-size: var(--h2-size);
        font-weight: 400;
        line-height: var(--h2-line-height);
    }

    .component-hero-banner__banner-home .background-title{
        top: -0.5rem;
    }
}

@media screen and (min-width: 64rem) { /* 1024px */

    .component-hero-banner__banner-home{
        top:0;
        background-color: var(--blue);
        height: var(--banner-home-height);
        margin-bottom: 0;
    }

    .component-hero-banner__banner-home .component-wrapper-video--embed-youtube {
        width: 200%;
        transform: translateX(-25%) scale(1.36);
    }

    .component-hero-banner--h1__banner-home{
        color: var(--white);
        padding: 0 3rem;
        line-height: 3.5rem;
        margin-top: 0;
        font-size: 3rem;
    }

    .component-hero-banner--h2__banner-home{
        font-size: 2.5rem;
        font-weight: 400;
        line-height: var(--h2-line-height);
        padding: 0 3rem;
    }

    .component-hero-banner__banner-home .background-wrapper{
        /* max-width: 1430px; */
        /* max-height:80vw; */
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .component-hero-banner__banner-home .background-wrapper--item{
        height: var(--banner-home-height);
    }

    .component-hero-banner__banner-home .banner-content{
        top:0;
    }

    .component-hero-banner__banner-home .background-wrapper:hover::after{
        background: none; 
    }

    .component-hero-banner__banner-home .background-title{
        position: relative;
        top: -17.5rem;
        gap: 1.5rem;
        /* max-width: 1430px; */
        margin: 0 auto;
    }

    .component-hero-banner__banner-home .block-banner .slick-slide img,
    .component-hero-banner__banner-home .block-banner .slick-slide video,
    .component-hero-banner__banner-home .block-banner video,
    .component-hero-banner__banner-home .block-banner img {
        height: 80vh; 
    }

    .component-hero-banner__banner-home .background-color::after {
        height: 80vh;
    }

}

@media screen and (min-width: 71rem) /*1136px*/ {
    .component-hero-banner__banner-home .background-title{
        top: -14rem;
    }
}



@media screen and (min-width: 120rem) /*1920px*/ {

    /* BANNER */

    .component-hero-banner__banner-home{
        height:60rem;
    }
    
    .component-hero-banner__banner-home .background-wrapper{
        max-width: 100%;
    }

    .component-hero-banner__banner-home .background-wrapper--item{
        height: 60rem;
    }

    .component-hero-banner__banner-home .background-title {
        top:-14rem;
        gap: 1rem;
        max-width: 100%;
    }

    .component-hero-banner--h1__banner-home{
        line-height: 3.5rem;
        margin:0;
        max-width: 120rem;
    }

    
}

/* Actu home */

.component-hero-banner__actu-home {
    padding: 2rem 0 5rem;
}

.component-hero-banner--subtitle__actu-home {
    margin-top: 0.5rem;
}

.component-hero-banner--slider-container__actu-home {
    margin-top: 2rem;
    position: relative;
}

.component-hero-banner--slider-container__actu-home,
.component-hero-banner--slider__actu-home {
    border-radius: var(--Border-mobile-radius, 2rem);
}

.component-hero-banner--slider-content__actu-home {
    padding: 1rem 1.5rem;
}

.component-hero-banner--slide.component-hero-banner--slide__actu-home {
    display: flex;
}

.component-hero-banner--slide__actu-home {
    flex-direction: column;
}

.component-hero-banner--slide-image-container__actu-home {
    align-self: stretch;
    display: flex    ;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

.component-hero-banner--slide-image-container__actu-home picture {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 100%;
}

.component-hero-banner--slide-image-container__actu-home img {
    object-fit: cover;
    height: 100%;
    max-width: unset;
    width: 100%;
}

.component-hero-banner--slide-text__actu-home p {
    margin-top: 1rem;
}

.component-hero-banner--slider-content__actu-home .component-cta {
    margin-top: 3rem;
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: .5rem;
}

.component-hero-banner--image__actu-home img {
    width: 100%;
}

.component-hero-banner--bullets__actu-home {
    display: none;
}

@media screen and (min-width: 64rem) {

    .component-hero-banner__actu-home {
        padding: 6rem 0 8rem;
    }

    .component-hero-banner--slider-container__actu-home {
        margin-top: 0;
    }

    .component-hero-banner--slide__actu-home {
        flex-direction: row;
    }

    .component-hero-banner--slide-image-container__actu-home {
        min-width: 33%;
        width: 33%;
    }

    .component-hero-banner--slider-content__actu-home .component-cta {
        margin-top: 2.5rem;
        border-color: var(--red);
        text-decoration: none;
    }

    .component-hero-banner--bullets__actu-home {
        display: block;
    }

    .component-hero-banner--navigation__actu-home {
        --swiper-navigation-width: 0rem;

        position: absolute;
        right: 0;
        transform: translateX(calc(-1 * ( 100% / 3 )));
        width: calc( ((var(--swiper-navigation-size) / 44 * 27) * 2) + var(--swiper-navigation-width) );
    }

}