#banner{
    margin-top: 12rem;
}

main.main-section{
    overflow: hidden;
}

body #main{
    margin-top: 3rem;
    position: relative;
}

body section:not(#banner,#accroche,#bref,#autre) h2{
    text-align: center;
    text-transform: uppercase;
    margin:2rem 0;

}
body #accroche h3{
   margin:0
}
body #accroche h3::before{
    content: none;
}

#banner .col-xl-6{
    background-color: var(--bs-blue);
}
#banner .col-xl-6+.col-xl-6{
    background-color: transparent;
    z-index: -1;
}

#banner .wrap{
    text-align: center;
}
#banner h2{
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.8rem;
    color: #fff;
    margin: 1rem 0;
}
#banner p{
    font-size: 1.6rem;
    line-height: 2.2rem;
}

#actualite{
    background: linear-gradient( transparent 11rem,var(--bs-cyan) 11rem);
}

#bref h2 {
    display: inline-block;
    margin-bottom: 1rem !important;
}
#bref h3 {
    margin-block: 2rem 1rem;
}

.news-list-view.bref .article .more{
    border-bottom: 1px solid;
    padding-bottom: 1rem;
    margin: 0;
    text-align: right;
    padding-right: 3rem;
}

#bref h2::after {
    content: "";
    display: block !important;
    width: 50%;
    height: 0.5rem;
    background: var(--bs-cyan);
    border-radius: var(--bs-border-radius);
    transition: width ease-out 1s;
    margin-top: 1rem;
}

@media (max-width: 36em){

}
/* SMall devices (phone, 576px / 36em and up) */
@media (min-width: 36em){


}
@media (max-width: 48em){

}
/* Medium devices (tablets, 768px / 48em and up) */
@media ( min-width :48em) {

    #banner .wrap{
        padding: 5rem;
    }
    #banner h2{
        font-size: 2.6rem;
        line-height: 4rem;
        margin: 0 0 2rem 0;
    }

    #banner p {
        font-size: 2.6rem;
        line-height: 3.6rem;
    }

    body #accroche h3 {
        margin-top: 0;
    }

    body section:not(#banner,#accroche) {
        margin-top: 5rem;
    }

    body section:not(#banner,#accroche,#agenda,#autre) h2{
        margin: 4rem 0;
    }

}


@media(max-width: 61.98em) {


}

/* Large devices (desktops, 992px / 62em and up) */
@media (min-width: 62em) {

    #actualite{
        background: linear-gradient( transparent 50%,var(--bs-cyan) 50%);
    }

}

/* X-Large devices (large desktops, 1200px / 75em and up) */
@media (min-width: 75em) {

    #banner .container{
        padding: 0 18rem;
    }

    #main .container {
        padding: 0 8rem;
    }
    #accroche .container{
        padding: 0 16rem 3rem;
    }

    #actualite{
        background: none;
    }

    #actualite .container{
        background: linear-gradient( transparent 50%,var(--bs-cyan) 50%);
    }

}

/* XX-Large devices (large desktops, 1400px / 87.5em and up) */
@media (min-width: 87.5em) {

    #header .parent{
        padding: 7.5rem 0;
        margin-top: 9rem;
    }

}

/* XXX-Large devices (larger desktops, 1600px / 100em and up) */
@media (min-width: 100em) {
    body #accroche .container::before, body #agenda .container::before{
        content:'';
        position: absolute;
        background-image: url('../Images/SVG/carre-couleur.svg');
        background-position: right top;
        background-repeat: no-repeat;
        width: 100%;
        height: 30vw;
        z-index: -1;
        top: -7rem;
        right: calc(30vw / 2 - 100%);
        transform: rotateX(0deg) rotateY(180deg);
    }

    body #agenda .container::before{
        background-position: left top;
        top: calc(-30vw / 2);
        left: -30vw;
        transform: rotate(0deg);
    }
    body #main>section .container{
        position: relative;
    }
}