.article{
    --art-top: 40px;
    /*--title-s: 80px;*/
    --title-s: 62px;
    --title-l: -1.5%;
    /*--title-t: 4%;*/
    --title-t: 30px;
    /*--medias-t: -3.8%;*/
    --medias-t: 30px;
    --medias-b: 0;
    /*--medias-l: 7.8%;*/
    --medias-l: 0;
    /*--ch-ct-h: 536px;*/
    --ch-ct-h: 300px;
    --ch-ct-t: 267px;
    /*--ch-t: 4.5%;*/
    --ch-t: 15px;
    --ch-txt-b: 20px;
    --text-w: 1452px;
    --text-t: 9%;
    --text-s: 21px;
    --text-title-s: 51px;
    --rep-link-size: 15px;
    --rep-sh-w: 147px;
    --rep-sh-h: 26px;
}

.container{padding: 0;}
.article{margin-top: var(--art-top); margin-bottom: 8.3%;}
.article > .container > h1{font-size: var(--title-s);line-height: 100%; color: var(--red); font-weight: bold;margin-left: var(--title-l); margin-top: var(--title-t);position: relative; z-index: 2;text-transform: uppercase;line-height: 1.2em;}
.article picture img{width: auto; margin: 0 auto}
.article .medias{margin-top: var(--medias-t);margin-left: var(--medias-l);position: relative; z-index: 1; margin-bottom: var(--medias-b);text-align: center;}
.article .medias .site_image img{max-height: 450px;}
.article .share{display: flex; width: var(--rep-sh-w); min-height: var(--rep-sh-h); justify-content: center; align-items: center; border: white 1px solid;margin-top: 10px;font-size: var(--rep-link-size);color: white; background-color: black}
.article .share svg{margin-right: 3%;}
.article .text{width: 100%; max-width: var(--text-w); margin: 0 0 0 auto; font-size: var(--text-s);}

.article .chapeau-content{background: var(--red) url("/theme/charte/imgs/une-bg.png"); min-height: var(--ch-ct-h); margin-top: calc(var(--ch-ct-t) * -1);}
.article .chapeau-content *{color: white;}
.article .chapeau-content .chapeau{padding-top: calc(var(--ch-ct-t) + var(--ch-t));padding-bottom: 20px;}
.article .chapeau-content .text{margin-bottom: var(--ch-txt-b);}

.article .content{margin-top: 3%;}
.article .content h1{font-weight: bold; font-size: var(--text-title-s)}
.article .content img{max-width: 100%;height: auto!important;}


.product-list{margin-top: 2.5%;margin-bottom: 6.5%;}

@media (max-width: 1920px){
    .article{
        --art-top: calc(100vw * 40 / var(--bkpt));
        --medias-t: calc(100vw * 30 / var(--bkpt));
        /*--title-s: calc(100vw * 80 / var(--bkpt));*/
        --title-s: calc(100vw * 62 / var(--bkpt));
        /*--ch-ct-h: calc(100vw * 536 / var(--bkpt));*/
        --ch-ct-h: calc(100vw * 300 / var(--bkpt));
        --ch-ct-t: calc(100vw * 267 / var(--bkpt));
        --text-s: calc(100vw * 21 / var(--bkpt));
        --text-w: calc(100vw * 1452 / var(--bkpt));
        --rep-sh-w: calc(100vw * 147 / var(--bkpt));
        --rep-sh-h: calc(100vw * 26 / var(--bkpt));
        --ch-txt-b: calc(100vw * 20 / var(--bkpt));
    }
}

@media (max-width: 1670px){
    .article{
        --title-l: 0;
    }
}

@media (max-width: 1630px){
    .article{
        --text-w: 100%;
        --medias-l: 0;
    }
    .article .medias{margin: var(--medias-t) auto 0; width: max-content;}
    .article picture img{width: 100%;max-width: 90vw;height: auto;}
    .article .text{padding: 0 15px;}
    .article .container, #slide-products{padding-left: 15px; padding-right: 15px;}
    #slide-products .row{margin-left: 0; margin-right: 0;}
}

@media (max-width: 1024px){
    .product-list .owl-carousel .owl-nav{
        top: 105%;
        right: 50%;
        transform: translateX(50%);
    }

    .product-list{margin-bottom: 100px;}
}

@media (max-width: 768px){
    section{overflow: hidden;}
    .product-item {--bkpt: 768;}
}

@media (max-width: 480px){
    .article{
        --title-s: 32px;
        --ch-ct-t: 10%;
        --ch-ct-h: 0;
        --medias-t: 20px;
    }

    .product-list{padding-bottom: 30px;}
    .product-item{--bkpt: 480;}

    section{overflow: hidden;}
    .article > .container > h1{text-align: center;}
    .article .text{font-size: 14px;}

    #slide-products{padding-top: 20px;}

    .section-title.red-dot h2:after{display: none;}
}