/* PRODUCT FILTERS */
#product_filters { padding: 15px; }
#product_filters > div { margin-bottom: 15px; }
#product_filters > div h4 { margin-top: 25px; font-size: 18px; color: var(--mauve); }
#product_filters > div h4:first-of-type { margin-top: 0; }
#product_filters h4 { font-size: 15px; font-weight: bold; }
#product_filters label { display: block; margin-bottom: 0; }
#product_filters label:hover, #product_filters .resetprices { cursor: pointer; color:var(--rouge); }
#product_filters .pprices ul { margin: 0; padding: 0; list-style-type: none; }
#product_filters .pprices ul li { display: block; }
#product_filters .pprices ul li:hover { cursor: pointer; color:var(--rouge); }
#product_filters .pprices .choose_price { display: flex; flex-direction: row; margin-top: 8px; }
#product_filters .pprices .choose_price input { padding: 0; width: 57px; margin-right: 3px; text-align: center; }
#product_filters .pprices .choose_price button { width: auto; padding: 2px 8px; }

/* PRODUCTS CATEGORIES */
.product-list{width: 100%;--promo-w: 74px;--promo-s: 27px;}
.product-list .owl-carousel{width: 100%;}
.product-list .owl-carousel .owl-dots{display: none;}
.product-list .owl-carousel .owl-nav{position: absolute; top: -100px; right: 0;}
.product-list .owl-carousel .owl-nav button{border: none; outline: none;background-color: var(--red); color: white; border-radius: 0;margin: 0; border: var(--red) 1px solid;}
.product-list .owl-carousel .owl-nav button.disabled{background-color: white; color: var(--red);}
.product-list .owl-carousel .product-item{margin: 0 auto;}
.product-item{ border: var(--red) 1px solid; border-radius: 0; display: block; position: relative; box-shadow: rgb(0,0,0,.16) 0 3px 6px;width: 327px; padding: 0;}
.product-item figure { text-align: center; margin: 15px; position: relative;}
.product-item .caption { padding: 11px 10px; border-top: var(--red) 1px solid; display: grid; grid-template-columns: 2fr 1fr; gap: 15px;}
.product-item .caption h3{grid-column: 1/3;}
.product-item .price { text-align: right; font-weight: bold; font-size: 24px; font-family: 'Muli', sans-serif; white-space: nowrap;}
.product-item .price * { }
.product-item .product_sales_badge { position: absolute; top: 0; right: 0; padding: 5px; background: var(--red); color: white; font-weight: bold; font-size: 12px; padding: 6px 20px; text-transform: uppercase;}
.product-item .marque { position: absolute; top: 0; left: 0; padding: 5px; background: #000; color: white; font-weight: bold; font-size: 12px; padding: 6px 20px; text-transform: uppercase;}
.product-item h3 { font-size: 18px; padding: 8px 0 0; margin-bottom: 0;}
.product-item h3 a{
    color: black;font-weight: bold; font-size: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-item .cat{font-size: 12px;margin-bottom: 10px;}
.product-item .product_price_sales{color: #A7A7A7; font-size: 21px; position: relative; max-width: max-content; margin: 0 0 0 auto;}
.product-item .product_price_sales:before{position: absolute; content: "";left: 0;top: 50%;right: 0;border-top: #A7A7A7 2px solid;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-ms-transform:rotate(-5deg);-o-transform:rotate(-5deg);transform:rotate(-5deg);}
.product-item .flash { display: flex; flex-direction: row; justify-content: space-between; background: var(--primary); color: white; padding: 5px 8px; font-size: 11px; }
.product-item .product_variants { padding: 10px; border-top:1px solid #CCC; font-size: 12px; }
.product-item .product_variants ul {  margin: 0; padding: 0; list-style-type: none; }
.product-item .product_variants ul label { font-weight: bold;  margin-bottom: 8px; }
.product-item figure{margin: 0; min-height: 345px; display: grid; justify-content: center; align-items: center;}
.product-item figure img{width: auto!important; height: 100%; max-height: 228px; margin: 0 auto; transition: transform .3s ease; will-change: transform;}
.product-item:hover figure img{transform: scale(1.1);}
.product-item .product_promo{
    align-self: flex-end;
    background-color: var(--red); color: white;
    font-size: var(--promo-s); font-weight: bold;
    display: flex;  justify-content: center; align-items: center;
    min-width: var(--promo-w); aspect-ratio: 1;padding: 5px;
    max-width: max-content;
    border-radius: 50%;
    position: absolute;
    bottom: 6%; right: 3%;
}

/* PRODUCTS */
#product_gallery ul { margin: 0; padding: 0; list-style-type: none; }
#product_gallery ul li { display: block;}
#product_gallery ul.g_medias li:not(:first-of-type) { display: none; }

#product_info .product_price { font-size:36px; color: var(--primary); font-weight: bold; }
#product_info .product_price span { font-size: 0.8em; }
#product_info .product_marque { margin: 15px 0; }
#product_info .product_price_sales { font-size: 18px; font-weight: bold; color: var(--danger); margin: 0 0 10px; }
#product_info .product_price_sales span { font-size: 0.8em; }
#product_info .flash { display: flex; flex-direction: row; justify-content: space-between; background: var(--info); color: white; padding: 5px 8px; font-size: 20px; }

#product_details .tab-content { border: 1px solid #DEE2E6; border-top: 0; padding: 20px; }
#product_details #p_details .list-group-item span:first-of-type { min-width: 250px; color: var(--info); display: inline-block;  }

#salebar { position: fixed; bottom: 0; left: 0; background-color: #ffffff; box-shadow: 0 0 5px rgba(0,0,0,0.25); width: 100%; z-index: 99; }
#salebar .salebar_content { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 15px 10px 2px; }
#salebar .salebar_content .product_title { display: flex; flex-direction: column; }
#salebar .salebar_content .product_title h3 { font-size: 22px; }
#salebar .salebar_content figure { width: 80px; height: 80px; box-shadow: 0 0 3px rgba(0,0,0,0.2); border-radius: 5px; margin: 0 0 12px; }
#salebar .salebar_content figure img { object-fit: contain; width: 100%; height: 100%; border-radius: 5px; }
#salebar .salebar_content .product_info { display: flex; flex-flow: row nowrap; align-items: center; }
#salebar .salebar_content .product_info h3 { margin-left: 20px; }
#salebar .salebar_content .product_price { color: var(--primary); font-weight: bold; font-size: 28px; line-height: 1em; }
#salebar .salebar_content .product_price span { font-weight: normal; }
#salebar .salebar_content .product_price .product_price_sales { font-size: 18px; }


/* TAG ITEM */
#list_tags{width: 100%;}
#list_tags .owl-carousel{width: 100%;}
#list_tags .owl-carousel .owl-dots{display: none;}
#list_tags .owl-carousel .owl-nav{position: absolute; top: -100px; right: 0;}
#list_tags .owl-carousel .owl-nav button{border: none; outline: none;background-color: var(--red); color: white; border-radius: 0;margin: 0; border: var(--red) 1px solid;}
#list_tags .owl-carousel .owl-nav button.disabled{background-color: white; color: var(--red);}
#list_tags .owl-carousel .tag_item{margin: 0 auto;}
.tag_item{overflow: hidden;}
.tag_item, .tag_item > picture > img{max-width: 340px; max-height: 589px; position: relative;}
.tag_item > picture > img{object-fit: cover;transform: scale(1.2);transition: transform .2s ease; will-change: transform;}
.tag_item > picture:after{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.53); content: '';}
.tag_item .text{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 295px;}
.tag_item .icon-bloc{border: white 1px solid; border-radius: 5px; width: 100%; min-height: 467px; display: flex; justify-content: center; align-items: center;}
.tag_item .icon img{ width: 100%; max-width: 120px; height: auto;}
.tag_item h2{text-transform: uppercase; font-size: 25px; color: white; font-weight: bold;text-align: center;margin-top: 15px;}
/*.tag_item:hover .icon img{display: block;}*/
.tag_item:hover > picture > img{transform: scale(1)}
.tag_item .link{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9;}

/* Fiche Produits */
#product_fiche{
    /*--fiche-h: 652px;*/
    --fiche-h: 550px;
    --fiche-t: 4.5%;
    --ref-s: 52px;
    --title-s: 36px;
    --subtitle-s: 28px;
    --a-partir-s: 21px;
    --qtt-s: 24px;
    --price-s: 38px;
    --promo-s: 30px;
    --promo-w: 129px;
    --qt-s: 20px;
    --qt-w: 98px;
    --flash-s: 25px;
    --pdf-s: 25px;
    --pdf-svg-s: 36px;
}

#product_details{
    --tab-p: 30px 20px;
    --tab-link-s: 25px;
    --tab-link-h: 65px;
    --tab-ct-s: 21px;
}

#product_info{padding-bottom: 30px;}

/*#product_fiche{padding-top: var(--fiche-t); min-height: var(--fiche-h); background: url('/theme/charte/imgs/fiche-product-bg.png') no-repeat; background-size: cover; background-position: center;}*/
#product_fiche{padding-top: var(--fiche-t); min-height: var(--fiche-h);}
#product_fiche #product_gallery > .row{padding: 0 15px;}
#product_fiche #product_gallery{max-width: 38%;}
#product_fiche #product_gallery .g_medias{padding-left: 3%;}
#product_fiche #product_gallery .owl-nav button,
#product_fiche #product_gallery .owl-dot{outline: 0; background-color: transparent;border: none;}
#product_fiche #product_gallery .owl-dot span{background-color: black}
#product_fiche #product_gallery .owl-dot.active span{background-color: var(--red)}
#product_fiche #product_gallery .owl-nav button svg path{fill: black; transition: fill .3s ease; will-change: fill;}
#product_fiche #product_gallery .owl-nav button:hover svg path{fill: var(--red);}
#product_fiche #product_gallery .owl-nav button svg{width: 20px; height: auto;}
#product_fiche #product_gallery .owl-nav button{
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: rgba(255,255,255,.6); box-shadow: rgba(0,0,0,.16) 0 3px 6px;
    display: flex; justify-content: center; align-items: center;
}
#product_fiche #product_gallery .owl-nav .owl-prev{left: 0;}
#product_fiche #product_gallery .owl-nav .owl-next{right: 0;}

#product_fiche .product_reference h3{font-size: var(--ref-s); font-weight: bold; color: var(--red)}
#product_fiche .product_title h3, #product_fiche .product_title h1{font-size: var(--title-s);}
#product_fiche .product_subtitle h4{font-size: var(--subtitle-s);}
#product_fiche .a-partir{font-size: var(--a-partir-s); font-weight: bold;line-height: 1.0em;}
#product_fiche .product_price{font-size: var(--price-s); font-weight: bold;line-height: 1.0em; color: black}
#product_fiche #product_info .row-1{display: grid; grid-template-columns: 1fr auto; gap: 20px;}
#product_fiche #product_info .info, #product_fiche #product_info .variant{padding-top: 7%;}
#product_fiche #product_info .variant{max-width: 30%;}
#product_fiche .pdf, #product_fiche .caracteristique_technique{font-size: var(--pdf-s); font-weight: normal; display: flex; justify-content: center; align-items: center;max-width: max-content;white-space: nowrap;margin: 0 0 0 auto;border-radius: 5px; padding: 10px 40px;margin-bottom: 15px;}
#product_fiche .pdf{width: 100%;}

#product_fiche .pdf svg{font-size: var(--pdf-svg-s); margin-right: 5%;}
#product_fiche .caracteristique_technique{margin: 0 auto 0 0;}
#product_fiche .caract_tech:empty{display: none;}
/*#product_fiche .pdfs_col{flex-direction: row; flex-wrap: wrap;}*/
#product_fiche .pdfs_col a:not(:first-of-type){margin-left: 15px;}

#product_fiche .quantity{
    font-size: var(--qtt-s);
    font-weight: bold;
    line-height: 1.0em;
    color: white;
    padding: 10px;
    background-color: var(--red);
    max-width: max-content;
}

#product_details .nav-link{font-size: var(--tab-link-s); font-weight: bold; color: white; background-color: var(--red); min-height: var(--tab-link-h); display: flex; justify-content: center; align-items: center;border-radius: 0!important;}
#product_details .nav-link.active{background-color: black;}
#product_details .tab-content .tab-pane{font-size: var(--tab-ct-s); color: black;}
#product_details .tab-content{border: none; padding: var(--tab-p);}

#slide-services .section-title h2{text-align: center;}
#product_fiche #product_gallery .g_medias, #product_gallery ul li{max-width: max-content; max-height: max-content;position: relative;}
#product_fiche #product_gallery .g_medias{max-width: 83.333333%;}
#product_fiche #product_gallery .g_medias li{cursor: zoom-in;}
#product_fiche #product_gallery .g_medias .zoom{position: absolute; right: 0; bottom: 0; background-color: rgba(255,255,255,.7); font-size: 20px; padding: 10px;}
#product_gallery ul li.active img{border-color: var(--red);}
#product_fiche .promo{
    align-self: flex-end;
    background-color: var(--red); color: white;
    font-size: var(--promo-s); font-weight: bold;
    display: flex;  justify-content: center; align-items: center;
    min-width: var(--promo-w); aspect-ratio: 1; height: auto; padding: 20px;
    border-radius: 50%; max-width: 80px;
    right: 0;bottom: 0;transform: translate(50%, 0);position: absolute;
}

#product_fiche .product_variants  ul{display: grid; grid-template-columns: 1fr auto; gap: 15px;}
#product_fiche .product_variants  ul li{background-color: transparent;padding: 0!important; margin: 0;border: none;}
#product_fiche .product_variants  ul li.active{border: none;}

#product_fiche .quantite, #product_fiche .product_variants  ul li a{
    align-self: flex-end;
    background-color: var(--red); color: white;
    font-size: var(--qt-s); font-weight: bold;
    display: flex;  justify-content: center; align-items: center;
    min-width: var(--qt-w); aspect-ratio: 1;padding: 5px;
    max-width: max-content;
    border-radius: 50%;
    border: none;
    transition: background-color .3s ease;
    will-change: background-color;
    /*position: absolute;*/
    /*bottom: 6%; right: 3%;*/
}

#product_fiche .quantite:hover, #product_fiche .product_variants  ul li a:hover{
    background-color: #000;
}

#product_fiche .normes{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 20px;
    padding-top: 20px;
}
#product_fiche .normes .img-norme{
    max-width: 60px;
    max-height: 38px;
    margin-right: 5px;
}
#product_fiche .normes .img-norme:last-of-type{
    margin-right: 0px;
}
/* chaque image est dans un <picture> (WebP) : l'espacement se porte sur le <picture> */
#product_fiche .normes picture{margin-right: 5px;}
#product_fiche .normes picture:last-of-type{margin-right: 0px;}
#product_info .flash{background-color: var(--red); max-width: max-content;border-radius: 5px;font-size: var(--flash-s); font-weight: bold;padding: 10px 33px;}
#product_page #commercial{margin-top: 5%;}
#product_page #newsletter{display: none;}
#product_page .product-list{margin-top: 2.5%;}
#product_page #slide-products{margin-top: 6%;}
#product_page #slide-services{margin-top: 7%;margin-bottom: 3.5%;}

.pagination{margin: 40px auto; justify-content: center;}
.pagination .page-item.active .page-link{background-color: var(--red);border-color: var(--red); color: white}
.pagination .page-item .page-link {color: var(--red); border-radius: 0!important; border: var(--red) 1px solid;}

 

@media(max-width: 1920px){
    .product-item{width: calc(100vw * 327 / var(--bkpt));}
    .product-item figure { min-height: calc(100vw * 345 / var(--bkpt)); }
    .product-item .caption { padding: calc(100vw * 11 / var(--bkpt)) calc(100vw * 10 / var(--bkpt)); gap: calc(100vw * 15 / var(--bkpt));}
    .product-item .price {font-size: calc(100vw * 24 / var(--bkpt));}
    .product-item h3 { font-size: calc(100vw * 18 / var(--bkpt)); padding: calc(100vw * 8 / var(--bkpt)) 0 0;}
    .product-item h3 a{font-size: calc(100vw * 20 / var(--bkpt));}
    .product-item figure img{max-height: calc(100vw * 228 / var(--bkpt)); margin: 0 auto;}
    .product-list .owl-carousel .product-item{margin: 0 auto;} .owl-carousel .owl-nav{top: calc(100vw * -100 / var(--bkpt));;}

    /* TAG ITEM */
    .tag_item, .tag_item > picture > img{max-width: calc(100vw * 340 / var(--bkpt)); max-height: calc(100vw * 589 / var(--bkpt));}
    .tag_item .text{max-width: calc(100vw * 295 / var(--bkpt));}
    .tag_item .icon-bloc{ min-height: calc(100vw * 467 / var(--bkpt)); }
    .tag_item h2{text-transform: uppercase; font-size: calc(100vw * 25 / var(--bkpt)); margin-top: calc(100vw * 15 / var(--bkpt));}
    .tag_item .icon img{max-width: calc(100vw * 120 / var(--bkpt));}
    #product_fiche .promo{padding: calc(100vw * 20 / var(--bkpt));}

    #product_fiche{
        /*--fiche-h: calc(100vw * 652 / var(--bkpt));*/
        --fiche-h: calc(100vw * 550 / var(--bkpt));
        --fiche-t: 4.5%;
        --ref-s: calc(100vw * 52 / var(--bkpt));
        --title-s: calc(100vw * 36 / var(--bkpt));
        --a-partir-s: calc(100vw * 21 / var(--bkpt));
        --qtt-s: calc(100vw * 24 / var(--bkpt));
        --price-s: calc(100vw * 38 / var(--bkpt));
        --promo-s: calc(100vw * 30 / var(--bkpt));
        --promo-w: calc(100vw * 129 / var(--bkpt));
        --qt-s: calc(100vw * 20 / var(--bkpt));
        --qt-w: calc(100vw * 98 / var(--bkpt));
        --flash-s: calc(100vw * 25 / var(--bkpt));
        --pdf-s: calc(100vw * 25 / var(--bkpt));
        --pdf-svg-s: calc(100vw * 36 / var(--bkpt));
    }

    #product_details{
        --tab-p: calc(100vw * 30 / var(--bkpt)) calc(100vw * 20 / var(--bkpt));
        --tab-link-s: calc(100vw * 25 / var(--bkpt));
        --tab-link-h: calc(100vw * 65 / var(--bkpt));
        --tab-ct-s: calc(100vw * 21 / var(--bkpt));
    }
}

@media(max-width: 1200px){
    .product-item{--bkpt: 1200;}
}

@media(max-width: 1105px){
    /*#product_fiche .promo{position: absolute;    transform: translate(0);right: 19%;}*/
    #product_fiche #product_gallery .g_medias{margin-bottom: 20%;}
}

@media(max-width: 1024px){
    #product_fiche{--bkpt: 1920}
    /*#product_fiche .promo{transform: translate(0);right: 0;}*/
}

@media(max-width: 768px) {
    #product_fiche{--bkpt: 1024}
    #product_fiche > .row{flex-direction: column;}
    #product_fiche #product_gallery{max-width: 100%;}
    #product_info{margin-top: 10%;}
    #product_fiche #product_gallery .g_medias{margin-bottom: 0%;}
    #product_fiche .promo{transform: translate(0,0);}
}
@media (min-width: 480px) and (max-width: 1024px) {

}

@media (max-width: 480px) {
    .tag_item .icon img{display: unset;}

    #salebar .salebar_content { padding: 10px; }
    #salebar .salebar_content .product_info { display: none; }
    #salebar .salebar_content .product_price { font-size: 20px; }
    #salebar .salebar_content .product_price .product_price_sales { padding-right: 8px; }

    .product-item {
        --bkpt: 480;
        width: 100%;
    }
    .product-item .product_sales_badge,
    .product-item .marque{
        padding: 3px 15px;
    }

    #product_fiche{
        --ref-s: 20px;
        --title-s: 14px;
        --a-partir-s: 14px;
        --qtt-s: 20px;
        --price-s: 20px;
        --promo-s: 20px;
        --qt-s: 20px;
        --flash-s: 20px;
        --pdf-s: 20px;
        --pdf-svg-s: 30px;
    }

    #product_details{
        --tab-link-s: 16px;
        --tab-ct-s: 14px;
    }

    #product_fiche .pdfs_col a:not(:first-of-type){margin-left: auto;}
    #product_fiche .product_variants ul li a{max-width: 100%;width: 100%;}
    #product_fiche .product_variants ul{display: grid; grid-template-columns: repeat(auto-fit, 100px); gap: 15px;}


    #product_fiche .quantite{padding: 15px;}
    #product_info > .row{flex-direction: column}
    #product_fiche #product_info .row-1{grid-template-columns: 1fr;}
    #product_fiche #product_info .info, #product_fiche #product_info .variant {
        align-items: center;;
    }
    #product_fiche .product_variants  ul{justify-content: center;}

    #product_gallery > .row{padding-right: 20%;}
    #product_fiche #product_info .variant{max-width: 100%;}

    #product_fiche #product_info .info > *{
        margin: 5px auto;
        text-align: center;
    }

    #product_fiche #product_info .variant{padding-top: 0}
    #product_fiche #product_info .variant > *, #product_fiche .pdf{margin: 5px auto;}
    #product_fiche .pdf{margin-bottom: 15px;}
    #product_fiche .pdf span{white-space: normal; line-height: 1.2em;}
}