.banner{
    display: flex;
    /* mobile defaults use CSS variables set inline on the wrapper */
    padding-top: var(--bn-mt-mobile, 0);
    padding-bottom: var(--bn-mb-mobile, 0);
    flex-direction: column;
}
@media (min-width: 768px) {
    .banner {
        /* desktop defaults use CSS variables set inline on the wrapper */
        padding-top: var(--bn-mt-desktop, 0);
        padding-bottom: var(--bn-mb-desktop, 0);
    }
}
.banner__media-title{
    display: flex;
    width: 100%;
    position: relative;
    height: 280px;
    align-items: center;
}
.banner__media{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.banner__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner__media::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}
.banner__title{
    padding-left: var(--gutters);
}
.banner__title h1{
    display: flex;
    align-items: center;
    color: var(--wp--preset--color--blanc);
    font-size: 43px;
    font-weight: 400;
    margin: 0;
}
.banner__title h1 strong{
    font-family: "dunbar-tall", sans-serif;
    font-weight: 500;
}
.banner__links{
    display: flex;
    padding: 1rem var(--gutters);
    background-color: var(--wp--preset--color--blanc);
    gap: 0.5rem;
    align-items: center;
    border-bottom: 1px solid var(--wp--preset--color--beige);
}
.banner__links.is-stuck{
    position: fixed;
    top: var(--header-height, 0px);
    left: 0;
    right: 0;
    z-index: 2;
}
.banner__links-placeholder{
    display: block;
    width: 100%;
    height: 0;
}
.banner__link{
    color: var(--wp--preset--color--bleu-fonce);
    font-size: 14px;
    font-weight: 500;
    line-height: 27px; 
    text-transform: uppercase;
    transition: font-weight 0.3s ease-in-out;
}
.banner__link.active, .banner__link:hover{
    font-weight: 700;
    color: var(--wp--preset--color--bleu)
}
.banner__link-separator{
    width: 5px;
    height: 5px;
    background-color: var(--wp--preset--color--bleu);
}
.banner-links-mobile{
    display: none;
}
@media (max-width: 768px) {
    .banner__title h1{
        flex-wrap: wrap;
        align-items: flex-start;
        font-size: 19px;
    }
    .banner-links-mobile{
        display: flex;
        flex-direction: column ;
        width: 100%;
    }
    .banner-links-mobile-wrap{
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows ease .3s;
    }
    .banner-links-mobile-wrap div{
        overflow: hidden;
        transition: max-height ease .3s;
        max-height: 0;
    }
    .banner-links-mobile-wrap.active{
        grid-template-rows: 1fr;
    }
    .banner-links-mobile-wrap.active div{
        max-height: 1000px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-top: 2rem;
    }
    .banner__link, .banner__link-separator{
        display: none;

    }
    .banner-links-mobile-placeholder{
        color: var(--wp--preset--color--bleu-fonce);
        font-size: 20px;
        font-weight: 500;
        line-height: 27px;
        text-transform: uppercase;
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    .banner-links-mobile-placeholder::after{
        content: '';
        display: block;
        background: url(../../../assets/svg/chevron-down.svg) no-repeat center;
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease;
    }
    .banner-links-mobile:has(.banner-links-mobile-wrap.active) .banner-links-mobile-placeholder::after{
        transform: rotate(-180deg);
    }
    .banner__link-mobile{
        color: var(--wp--preset--color--bleu-fonce);
        font-size: 14px;
        font-weight: 500;
        line-height: 27px; 
        text-transform: uppercase;
        transition: font-weight 0.3s ease-in-out;
    }
}