#homepage{
    --banner-h: 486px;
}

#homepage section{
    padding-bottom: 20px;
}

#homepage .container{padding-left: 0; padding-right: 0;}

/* =============================
         Slide Banners
============================= */

#homepage #banners .owl-item img,
#homepage #banners .owl-carousel .owl-stage,
#homepage #banners .owl-carousel .owl-stage-outer{max-height: var(--banner-h);}
#homepage #banners .owl-dots{display: none;}
#homepage #banners .owl-nav button{position: absolute;top: 50%; border: none; outline: none; background-color: transparent;transform: translateY(-50%);}
#homepage #banners .owl-nav button span{font-size: 70px;}
#homepage #banners .owl-nav button svg{height: 42px;}
#homepage #banners .owl-prev{left: 8%;}
#homepage #banners .owl-next{right: 8%;}

/* =============================
     Slide 1 : Les services
============================= */
#homepage #slide-1{
    padding-top: 20px;
    --svc-gap: 20px;
    --svc-w: 270px;
    --svcs-top: 38px;
    --svc-top: 124px;
}

#homepage #slide-1 h2{text-align: center;}
#homepage #slide-1 .services{
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--svc-w));
    gap: var(--svc-gap);
    padding-top: var(--svcs-top);
}

#homepage #slide-1 .services > * {
    border: #707070 1px solid;
    border-radius: 5px;
    aspect-ratio: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    padding-top: var(--svc-top);
    font-size: 21px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2em;
    background-position: top center;
}

/* ==================================
     Slide 2 : Produits du moment
=================================== */

#homepage #slide-2{padding-top: 120px;}
#list_products{width: 100%;}
#homepage #slide-2 .product-list{margin-top: 43px; width: 100%;}
#homepage #slide-2 .product-list > div{width: 100%;}

/* =============================
     Slide 3 : Besoins
============================= */

#homepage #slide-3{
    --slide-3-h: 750px;
    /*--col-1-w: 27%;*/
    --col-1-w: 22%;
    --title-fsize: 50px;
    --title-left: 38px;
    --bg-top: -10px;
    --bg-right: 25px;
    --bg-fsize: 527px;
    --col-1-after-size: 202px;
    --col-1-after-right: -17px;
    margin-top: 90px;
    border: var(--red) 1px solid;
    padding-bottom: 0;
    min-height: var(--slide-3-h);
}
#homepage #slide-3 .row{margin-right: 0; margin-left: 0;}
#homepage #slide-3 > .row{min-height: var(--slide-3-h);}
#homepage #slide-3 .row .col:first-of-type{max-width: var(--col-1-w);background-color: var(--red); display: flex; justify-content: center; align-items: center;}
#homepage #slide-3 .row .col:first-of-type:before{content: ''; position: absolute; top: 50%; right: var(--col-1-after-right); transform: translateY(-50%); width: var(--col-1-after-size); height: var(--col-1-after-size); background-color: var(--red); border-radius: 50%;}
#homepage #slide-3 .row .col:first-of-type *{color: white;}
#homepage #slide-3 .row .col:first-of-type h2, #homepage #slide-3 .section-title{max-width: max-content;max-height: max-content;font-size: var(--title-fsize);line-height: 1.0em;}
#homepage #slide-3 .section-title{position: relative; z-index: 1;}
#homepage #slide-3 .row .col:first-of-type h2{padding-left: var(--title-left);}
#homepage #slide-3 .row .col:last-of-type{max-width: calc(100% - var(--col-1-w)); display: flex; justify-content: center; align-items: center;padding-left: 36px;}
#homepage #slide-3 .section-bg{position: absolute; opacity: .36; top: -10px;right: 25px;max-width: max-content; z-index: 0}
#homepage #slide-3 .section-bg > div{font-size: var(--bg-fsize);font-weight: 600;line-height: 1.0em;}


/* =============================
     Slide 4 : Zoom produits
============================= */

#homepage #slide-4{padding-top: 65px;padding-bottom: 162px;}
#homepage #slide-4 .product-list{margin-top: 43px; width: 100%;}
#homepage #slide-4 .product-list > div{width: 100%;}


/* =============================
     Slide 5 : Reportage
============================= */
#homepage #slide-5{background-color: var(--red);padding-top: 3.4%;margin-bottom: 6%;}
#homepage #slide-5 .section-reportage,#homepage #slide-5 .section-reportage > .col{margin: 0; padding: 0;}
#homepage #slide-5 *{color: white;}
#homepage #slide-5 .reportage-item{width: 100%;position: relative; display: flex;}
#homepage #slide-5 .reportage-item figure{margin-left: 10%;margin-top: 2%}
#homepage #slide-5 .reportage-item figure img{margin-bottom: -13%; width: 100%; max-width: 1016px;height: auto;}
#homepage #slide-5 .reportage-item .caption{max-width: 550px;width: 100%;margin-left: -7%;margin-top: -6%;}
#homepage #slide-5 .reportage-item .info{background-color: #000;padding: 78px 57px;width: 100%;}
#homepage #slide-5 .reportage-item .cat{font-size: 50px; font-weight: bold; text-transform: uppercase; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
#homepage #slide-5 .reportage-item h3{font-size: 28px; font-weight: bold;text-transform: uppercase; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
#homepage #slide-5 .reportage-item .rep-link{font-size: 15px; font-weight: bold;display: inline-block; margin-top: 15px;text-decoration: underline;}
#homepage #slide-5 .reportage-item .excerpt{font-size: 20px; font-weight: bold;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.2em;}

/* =============================
     Slide 6 : Nos Marques
============================= */
#homepage #slide-6{padding-top: 4.4%;margin-bottom: 6%;}
#homepage #slide-6 .marques-list{margin-top: 7%;}
#homepage #slide-6 .marques-list .owl-item a{display: inline-block;}
#homepage #slide-6 .marques-list .owl-item img{width: max-content; max-width: 180px;}
#homepage #slide-6 .marques-list .owl-item a,
#homepage #slide-6 .marques-list .owl-item > div {max-width: max-content;}
#homepage #slide-6 .owl-dots{display: none;}
#homepage #slide-6 .owl-nav button{position: absolute;top: 50%; border: none; outline: none; background-color: transparent;transform: translateY(-50%);color: black;}
#homepage #slide-6 .owl-nav button span{font-size: 70px;}
#homepage #slide-6 .owl-nav button svg{height: 42px;}
#homepage #slide-6 .owl-prev{left: 1%;}
#homepage #slide-6 .owl-next{right: 1%;}



/* =============================
         Responsive
============================= */
@media (max-width: 1920px){
    #homepage{
        --banner-h: calc(100vw * 486 / var(--bkpt));
    }
    #homepage #slide-1{
        padding-top: calc(100vw * 20 / var(--bkpt));
        --svc-gap: calc(100vw * 20 / var(--bkpt));
        --svc-w: calc(100vw * 270 / var(--bkpt));
        --svcs-top: calc(100vw * 38 / var(--bkpt));
        --svc-top: calc(100vw * 124 / var(--bkpt));
    }

    #homepage #banners .owl-nav button span{font-size: calc(100vw * 70 / var(--bkpt));}
    #homepage #banners .owl-nav button svg{height: calc(100vw * 42 / var(--bkpt));}

    #homepage #slide-1 .services > *{font-size: calc(100vw * 21 / var(--bkpt));}
    #homepage #slide-1 .service{background-size: calc(100vw * 209 / var(--bkpt)) auto!important;}

    #homepage #slide-2{padding-top: calc(100vw * 120 / var(--bkpt));}
    #homepage #slide-2 .product-list{margin-top: calc(100vw * 43 / var(--bkpt));}
    #homepage #slide-2 .product-list .item figure{margin-top: calc(100vw * 59 / var(--bkpt));}

    #homepage #slide-3{
        --slide-3-h: calc(100vw * 750 / var(--bkpt));
        --title-fsize: calc(100vw * 50 / var(--bkpt));
        --title-left: calc(100vw * 38 / var(--bkpt));
        --bg-top: calc(100vw * -10 / var(--bkpt));
        --bg-right: calc(100vw * 25 / var(--bkpt));
        --bg-fsize: calc(100vw * 527 / var(--bkpt));
        --col-1-after-size: calc(100vw * 202 / var(--bkpt));
        --col-1-after-right: calc(100vw * -17 / var(--bkpt));
        margin-top: calc(100vw * 90 / var(--bkpt));
    }
    #homepage #slide-3 .row .col:last-of-type{padding-left: calc(100vw * 36 / var(--bkpt));}

    #homepage #slide-4{padding-top: calc(100vw * 65 / var(--bkpt));padding-bottom: calc(100vw * 162 / var(--bkpt));}
    #homepage #slide-4 .product-list{margin-top: calc(100vw * 43 / var(--bkpt));}
    #homepage #slide-4 .product-list .item figure{margin-top: calc(100vw * 59 / var(--bkpt));}

    #homepage #slide-5 .reportage-item .caption{max-width: calc(100vw * 550 / var(--bkpt));}
    #homepage #slide-5 .reportage-item .info{padding: calc(100vw * 78 / var(--bkpt)) calc(100vw * 57 / var(--bkpt));}
    #homepage #slide-5 .reportage-item figure img{margin-bottom: -13%; max-width: calc(100vw * 1016 / var(--bkpt));}
    #homepage #slide-5 .reportage-item .cat{font-size: calc(100vw * 50 / var(--bkpt));}
    #homepage #slide-5 .reportage-item h3{font-size: calc(100vw * 28 / var(--bkpt));}
    #homepage #slide-5 .reportage-item .rep-link{font-size: calc(100vw * 18 / var(--bkpt));}
    #homepage #slide-5 .reportage-item .excerpt{font-size: calc(100vw * 20 / var(--bkpt));}
}

@media (max-width: 1630px){
    #homepage .container{padding-left: 15px; padding-right: 15px;}
}


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

    #homepage #slide-3{--bkpt: 1600}
    /*#homepage #slide-3 > .row > .col:first-of-type{--bkpt: 1920; --bg-fsize: calc(100vw * 527 / var(--bkpt));--title-fsize: calc(100vw * 50 / var(--bkpt));}*/

    #homepage #slide-5 .reportage-item .caption,
    #homepage #slide-5 .reportage-item figure{margin: 0;max-width: 100%;}
    #homepage #slide-5 .reportage-item{flex-direction: column;}
    #homepage #slide-5 .reportage-item figure img{margin-bottom: 0;}
    #homepage #slide-5 .reportage-item .cat {font-size: calc(100vw * 30 / var(--bkpt));}
    #homepage #slide-5 .reportage-item h3 {font-size: calc(100vw * 24 / var(--bkpt));}
    #homepage #slide-5 .reportage-item .info {padding: calc(100vw * 30 / var(--bkpt));}
}

@media (max-width: 768px){
    .product-item {
        --bkpt: 768;
    }
    #homepage #slide-1 .services{justify-content: center!important;}

    #homepage #slide-3 {--bkpt: 1024;--bg-fsize: calc(100vw * 400 / var(--bkpt));}
    #homepage #slide-3 .row > .col{max-width: 100%!important;}
    #homepage #slide-3 .row .col:first-of-type{aspect-ratio: 2;}
    #homepage #slide-3 .row .col:last-of-type{padding-top: 20px; padding-bottom: 60px;}
    #homepage #slide-3 .row .col:first-of-type h2{padding-left: 0;}
    #homepage #slide-3 .row .col:first-of-type h2 br{display: none;}
}

@media (max-width: 480px){
    #homepage {
        --banner-h: 120px;
        --section-title-size: 24px;
    }

    #homepage #slide-1{
        padding-top: 20px;
        --svc-gap: 15px;
        --svc-w: 150px;
        --svcs-top: 38px;
        --svc-top: 84px;
    }

    #homepage #slide-1 .service{background-size: 120px auto!important;}
    #homepage #slide-1 .services > * {font-size: 12px;}
    #homepage #slide-1 .services .text{padding: 0 15px}

    .product-item {
        --bkpt: 480;
    }

    #homepage #slide-3 {--bkpt: 768;}

    #homepage #slide-5 .reportage-item .cat {font-size: 24px;}
    #homepage #slide-5 .reportage-item h3 {font-size: 20px;}
    #homepage #slide-5 .reportage-item .info {padding: 20px;}
    #homepage #slide-5 .reportage-item .excerpt{font-size: 14px;}
    #homepage #slide-5 .reportage-item .rep-link{font-size: 14px;}

    .section-title.red-dot h2:after{display: none;}
    .banners .owl-item img{min-height: var(--banner-h); width: auto;object-fit: cover; object-position: center;}

    #homepage #slide-6 .marques-list .owl-item img{max-width: calc(100vw * 180 / var(--bkpt))}
}