/*
 * Twinbi Style
 */
:root{
    --noir-plus: #17181D;
    --noir-minus: #292C35;
    --gris-plus: #585F72;
    --gris-minus: #9DA4B9;
    --clair-plus: #D8DCE8;
    --clair-minus: #EEF0F7;
    --gold-plus: #E09145;
    --gold: #F8BC83;
    --gold-minus: #FCD9B8;
    --gold-soft-plus: #FFE6CE;
    --gold-soft: #FFEDDB;
    --gold-soft-minus: #FFF9F3;
    --rouge-plus: #78142C;
    --rouge-minus: #A82142;
    --bg: #f5f5f5;
    --white: #ffffff;
    --border-radius-4: 4px;
}

a,
.btn,
.tw-animate,
.tw-animate::before,
.tw-animate::after,
#header .header-top .menu > li > span,
.twinbiCategory .item img,
.listingProductLeft ul.product_list li,
#search_widget form,
.twinbiSubCategoryHTML a img{
    -webkit-transition: all ease .3s;
    -moz-transition: all ease .3s;
    -ms-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
}
body{
    background: var(--gold-soft-minus);
    color: var(--noir-plus);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}
a,
.block-promo .promo-code-button.cancel-promo{
    color: inherit;
}
a:focus,
.btn:focus{
    outline: none;
    text-decoration: none;
}
.page-content.page-cms ul, p{
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.done,
#blockcart-modal .product-name,
#blockcart-modal .modal-title i.material-icons{
    color: var(--gold);
}
body#checkout section.checkout-step.-reachable.-current .step-number,
.custom-radio input[type=radio]:checked+span,
.bootstrap-touchspin .group-span-filestyle .btn-touchspin, .group-span-filestyle .bootstrap-touchspin .btn-touchspin, .group-span-filestyle .btn-default{
    background-color: var(--gold);
}
body#checkout section.checkout-step .address-item.selected{
    border-color: var(--gold);
}
body#checkout section.checkout-step .carriere-name-container{
    max-width:calc(100% - 30px);
}
body#checkout section.checkout-step .carrier-delay{
    max-width:calc(100% - 90px);
}
#header,
#wrapper{
    background: inherit;
}
body#checkout #footer{
    padding: inherit;
}
.page-index #main .page-footer{
    margin:0
}
/* reCAPTCHA : badge masque (obligation Google de garder la mention textuelle a cote des formulaires concernes) */
.grecaptcha-badge{
    visibility: hidden;
}
.grecaptcha-disclaimer{
    color: var(--gris-plus);
    font-size: 11px;
    line-height: 16px;
    margin: 8px 0 0;
    & a{
        color: inherit;
        text-decoration: underline;
    }
}
/* HEADER */
#header{
    background: var(--rouge-plus);
    border: none;
    padding: 15px 0px;
}
#header .header-right-mobile #_mobile_cart{
    position: relative;
}
#header .menu{
    align-items: center;
    gap: 10px;
    margin: 0px;
    padding: 0px;
    width: fit-content;
    & > li{
        position: relative;
    }
    & li a, & li span{
        font-weight: 600;
        color: var(--white);
        text-transform: uppercase;
        font-size: 12px;
        padding: 12px 20px;
        &:hover{
            color: var(--white);
            background: var(--rouge-minus);
            border-radius: var(--border-radius-4);
        }
    }
    & ul li a{
        display: block;
    }
}
#header .header-nav .menu > li > ul,
#header .header-nav .cart-preview .body,
#header .header-right-mobile .cart-preview .body{
    display: flex;
    flex-flow: column;
    gap: 10px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0px;
    background: var(--rouge-plus);
    min-width: 285px;
    padding: 15px;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -o-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    opacity: 0;
    visibility: hidden;
}
#header .header-nav .cart-preview .body,
#header .header-right-mobile .cart-preview .body{
    top: 100%;
}
#header .header-nav .cart-preview .body,
#header .header-right-mobile .cart-preview .body{
    padding: 15px;
    left: auto;
    right: 0px;
    visibility: hidden;
    z-index: 9;
}
/*#header .header-right-mobile .cart-preview:hover .body*/
#header .header-nav .menu li.sfHover ul,
#header .header-nav .cart-preview:hover .body{
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
#header .header-nav .blockcart,
#header .header-nav .blockcart.active,
#header .header-right-mobile .blockcart,
#header .header-right-mobile .blockcart.active{
    background: transparent;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-flow: column;
    & a.header{
        position: relative;
        margin: 0px;
        text-decoration: none;
        & > span{
            position: absolute;
            color: var(--white);
            bottom: 0;
            right: -5px;
        }
    }
}
#header .header-nav .header-right{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    & .user-info{
        margin: 0px;
        padding: 0px;
    }
}
#header .search-widgets,
#header .user-info a,
#header .header-nav .blockcart a.header{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 36px;
    border-radius: var(--border-radius-4);
    &:hover{
        background: var(--rouge-minus);
    }
}
#header .header-nav,
#header .user-info{
    & .tw-icon{
        background-color: var(--white);
    }
}
.js-top-menu-bottom .block-social{
    margin-top: 15px;
}
#mobile_top_menu_wrapper .js-top-menu-bottom .block-social ul{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left:10px;
    & li{
        background: transparent;
        width: auto;
        height: auto;
        margin: 0px;
        display: inline-flex;
        align-items: center;
        justify-items: center;
        & a{
            color: var(--white);
            font-size: 22px;
            text-indent: unset;
            &:hover{
                color: var(--gold);
            }
        }
    }
}
/* FOOTER */
footer .footer-container{
    background: var(--rouge-plus);
    padding-top: 90px;
    padding-bottom: 70px;
    & .twinbiHTML, & .twinbiContact{
        color: var(--white);
    }
    & .twinbiHTML{
        display: flex;
        flex-flow: column;
        gap: 5px;
        & .des p{
            font-weight: 600;
            font-size: 14px;
            text-align: left;
            line-height: 26px;
        }
    }
    .block-social ul {
        gap: 20px;
        & li{
            background: transparent;
            width: auto;
            height: auto;
            margin: 0px;
            display: inline-flex;
            align-items: center;
            justify-items: center;
            & a{
                color: var(--white);
                font-size: 30px;
                text-indent: unset;
                &:hover{
                    color: var(--gold);
                }
            }
        }
    }
    & .twinbiContact{
        display: flex;
        flex-direction: column;
        gap: 10px;
        & li{
            display: grid;
            grid-template-columns: 24px 1fr;
            gap: 3px;
            align-items: flex-start;
            line-height: 24px;
            & a{
                color: var(--white);
                &:hover{
                    color: var(--gold);
                }
            }
            & i{
                margin-top: 5px;
            }
        }
    }
    & ul.linklist{
        display: flex;
        flex-direction: column;
        gap: 15px;
        & a{
            color: var(--gold);
            &:hover{
                color: var(--gold-plus);
            }
        }
    }
}
.copyRight{
    background: var(--rouge-minus);
    padding: 12px 0px;
    & ul.linklist{
        display: flex;
        justify-content: space-between;
        color: var(--white);
        margin: 0px;
    }
    & li{
        font-size: 12px;
    }
    & a, span{
        color: var(--white);

        &:hover{
            color: var(--gold);
        }
    }
}
.btn.btn-devis{
    position: fixed;
    right: -140px;
    top: 100px;
    padding-left: 8px;
    padding-right: 8px;
    z-index: 99999;
    &:hover{
        right: -5px;
    }
}
/* ICON */
.tw-icon{
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
}
.tw-icon.icon-mon-compte{
    mask-image: url(../img/mon-compte.svg);
    width: 14px;
    height: 18px;
}
.tw-icon.icon-panier{
    mask-image: url(../img/panier.svg);
    width: 20px;
    height: 18px;
}
.tw-icon.icon-search{
    mask-image: url(../img/search.svg);
    width: 20px;
    height: 20px;
}
.tw-icon.icon-imprimer{
    mask-image: url(../img/imprimer.svg);
    width: 24px;
    height: 24px;
    background-color: var(--gold);
}
.tw-icon.icon-devis{
    mask-image: url(../img/devis.svg);
    width: 24px;
    height: 24px;
    background-color: var(--white);
}
/* CONTENT */
h1, .h1{
    font-size: clamp(38px, 5vw, 50px);
    font-weight: 600;
    line-height: 1.08;
}

h2, .h2{
    font-size: clamp(28px, 3.5vw, 34px);
    font-weight: 600;
    line-height: 1.14;
}

h3, .h3{
    font-size: 26px;
    font-weight: 600;
    line-height: 1.27;
    margin-bottom: 12px;
}

h4, .h4{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}
.text-center{
    text-align: center;
}
.product-price{
    color: inherit;
}
.twBlockContent p:last-child{
    margin: 0px;
}
.twTitle strong{
    font-weight: 600;
    color: var(--rouge-minus);
}
.twTitle.twMainTitle, .twTitles.twMainTitle{
    padding: 75px 0px;
}
body #wrapper{
    padding: 0px;
    background: var(--gold-soft-minus);
    min-height: calc(100vh - 457px);
}
.pagination .page-list{
    background: none;
    gap: 10px;
    display: flex;
    justify-content: center;
    & li a{
        font-size: 14px;
        font-weight: 500;
        padding: 5px;
        border: 1px solid var(--gold);
        display: inline-block;
        min-width: 30px;
        border-radius: var(--border-radius-4);
        text-align: center;
    }
    & li.current a,
    & li a:hover{
        background: var(--gold);
        color: var(--white);
    }
}
a:hover,
body#checkout a:hover{
    color: var(--rouge-plus);
}
hr{
    border-color: var(--gold-soft-plus);
}
#main .page-content.page-cms{
    background: none;
    padding: 0;
}
#search_widget.active form input::-moz-placeholder{
    color: var(--white);
}
#search_widget.active form input::-ms-input-placeholder{
    color: var(--white);
}
#search_widget.active form input::-webkit-input-placeholder{
    color: var(--white);
}
/* page category */
#wrapper .breadcrumb{
    margin: 0px;
    padding: 10px 0px;
    border-bottom: 1px solid var(--gold-soft-plus);
    font-size: 12px;
    font-weight: 400;
    & li:last-child{
        font-weight: 600;
        color: inherit;
    }
    & a:hover{
        color: var(--gold-plus);
    }
}
.pageCategory .twMainTitle{
    padding: 75px 0px;
    &.twShowProducts{
        display: flex;
        flex-flow: column;
        gap: 10px;
        padding-top: 0px;
        padding-bottom: 40px;
        & .twCategoryDescription *{
            font-weight: 600;
            color: var(--gris-plus);
        }
        & .twCategoryDescription p:last-child,
        & .twTitle{
            margin: 0px;
        }
        & .btn{
            width: fit-content;
        }
    }
}
body#cart .lbl,
.pageCategory .lbl{
    display: inline-flex;
    background: var(--rouge-plus);
    padding: 2px 5px;
    border-radius: 2px;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    width: fit-content
}
.pageCategory #products{
    margin-top: 40px;
}
body:not(.page-search) .pageCategory #products .products{
    flex-flow: column;
}
.twCatTitle span{
    color:var(--rouge-minus)
}
.twSubCategoriesNav{
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    & a{
        background: var(--gold-plus);
        border-radius: var(--border-radius-4);
        font-weight: 600;
        color: var(--white);
        padding: 5px 10px;
        &:hover{
            background: var(--gold);
        }
    }
}
.twSubCategoryInner{
    margin-bottom: 80px;
    & > .twTitle{
        margin-bottom: 10px;
    }
    /* La grille Bootstrap (.row/.col-md-6) est en float, qui n'egalise pas la hauteur
       des colonnes d'une meme ligne : si une carte est plus haute que l'autre, la carte
       suivante remonte se caler sous la plus courte au lieu de redemarrer une ligne a
       gauche. On repasse en flex pour forcer des colonnes de meme hauteur par ligne. */
    & .row{
        display: flex;
        flex-wrap: wrap;
    }
    & .row > [class*='col-']{
        display: flex;
    }
    & .twSubCategoryItem{
        width: 100%;
        display: flex;
    }
    & .inner{
        display: grid;
        width: 100%;
        grid-template-columns: 202px 1fr;
        gap: 0px 20px;
        align-items: center;
        background: var(--white);
        border-radius: 12px;
        border-radius: 12px;
        margin-bottom: 30px;
        overflow: hidden;
        position: relative;
        z-index: 1;
        & > a{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
        }
        & .meta{
            display: flex;
            flex-flow: column;
            gap: 10px;
            & .twTitle{
                margin: 0px;
            }
            & .twCategoryDescription *{
                font-weight: 600;
                color: var(--gris-plus);
            }
            & .twCategoryDescription p:last-child{
                margin: 0px;
            }
        }
    }
    & .twSubCategoryItem{
        position: relative;
        &::after{
            position: absolute;
            content: '';
            width: 100%;
            height: 23px;
            background: rgba(23, 24, 29, 0.15);
            bottom: 0px;
            filter: blur(20px);
            border-radius: 100%;
            opacity: 0;
            left: 0px;
            z-index: 0;
        }
        &:hover{
            transform: translateY(-10px);
            &::after{
                opacity: 1;
            }
        }
    }
}
.listingProductLeft{
    overflow-x: auto;
}
.listingProductLeft .product_list{
    display: flex;
    flex-flow: column;
    gap: 4px;
}
.listingProductLeft .product_list li{
    position: relative;
    cursor: pointer;
    &:hover, &.active{
        & .product-container{
            background:var(--clair-minus);
        }
    }
    &.active{
        & .product-container{
            border:1px solid var(--rouge-minus);
        }
    }
}
.listingProductLeft .product_list_header,
.listingProductLeft .product_list .product-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 0;
    min-width: 100%;
    & .item{
        flex: 1 1 0px;
        text-align: center;
        &.item-dispo{
            flex: 1.3 1 0px;
        }
        & .current-price{
            margin:0;
        }
    }
}
.listingProductLeft .product_list_header{
    padding-bottom: 0;
    & label{
        font-weight: 600;
        color: var(--gris-plus);
        line-height: 1.3;
        display: block;
        text-align: center;
        & .unite{
            display: block;
            font-size: 11px;
            font-weight: 400;
        }
    }
}
.listingProductLeft .product_list .product-container{
    background: var(--white);
    border-radius: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
    z-index: 1;
    transition: 0.3s;
    border:1px solid transparent;
    & .val{
        font-weight: 600;
        font-size: 13px;
        line-height: normal;
        & .product-prices{
            margin: 0px;
        }
    }
    & .item-dispo{
        display: flex;
        flex-flow: column;
        gap: 5px;
        align-items: center;
    }
    & .btn-readmore{
        font-size: 12px;
        /* Etend la zone cliquable du lien "Demander un devis" a toute la ligne produit
           (li.undispo) : le ::after se positionne par rapport a .product-container
           (deja position:relative ci-dessus), pas par rapport au lien lui-meme. */
        &::after{
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
        }
    }
    & .dispo_cont{
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding-right: 6px;
        font-size: 11px;
        & span.dot_dispo{
            width: 8px;
            height: 8px;
            background: #82EC79;
            border-radius: 100%;
            &.unactive{
                background: #EC7979;
            }
        }
    }
}
.custom_product_form form,
.custom_product_form .content_prices{
    display: flex;
    flex-flow: column;
    gap: 15px;
}
.custom_product_form form .label{
    text-align: left;
    margin-bottom: 5px;
    & span:last-child{
        display: block;
        color: var(--gris-minus);
    }
}
.custom_product_form form .form-control{
    font-weight: 600;
    color: var(--noir-plus);
}
.custom_product_form .box_val_mm.error{
    border-color: red;
}
.field-help{
    position: relative;
    display: inline-flex!important;
    vertical-align: middle;
    margin-left: 6px;
}
.field-help-toggle{
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--gold);
    border-radius: 100%;
    background: var(--white);
    color: var(--gold-plus);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.field-help-popover{
    /* !important : .custom_product_form form .label span:last-child (display:block) est
       plus specifique et matche aussi ce span (dernier enfant de .field-help), il ecrase
       sinon ce display:none. */
    display: none !important;
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 240px;
    background: var(--white);
    border: 1px solid var(--clair-plus);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    & img{
        display: block;
        max-width: 100%;
        margin-bottom: 6px;
        &:last-child{
            margin-bottom: 0;
        }
    }
}
/* Hover pratique sur desktop ; le tap (voir script.js, classe .open) couvre le tactile
   ou :hover ne fonctionne pas. */
.field-help:hover .field-help-popover,
.field-help.open .field-help-popover{
    display: block!important;
}
.custom_product_form #quantity_wanted_p{
    display: flex;
    align-items: center;
    gap: 0px 10px;
    margin-bottom: 0px;
    & > span{
        display: flex;
        align-items: center;
        gap: 5px;
        & input{
            border: none;
            background: transparent;
            font-weight: 600;
            max-width: 30px;
            text-align: center;
        }
        & a{
            width: 20px;
            height: 20px;
            background: var(--gold-plus);
            color: var(--white);
            border-radius: 2px;
            font-size: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }
}
.custom_product_form .box_val_mm{
    display: flex;
    align-items: center;
    justify-content: space-between;
    & span:last-child{
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 20px;
        font-weight: 600;
    }
}
.custom_product_form.product-actions .add-to-cart{
    padding: 0 20px;
    height: 40px;
    & i{
        background-color: var(--white);
    }
}
.nonCommercialse{
    flex-flow: column;
    gap: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    padding: 30px;
    background: var(--white);
    border: 1px solid var(--gold-minus);
}
#non-commercialse {
    height: auto;
    font-size: 22px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    text-align: center;
}
#non-commercialse a{
    text-decoration:underline;
    &:hover{
        text-decoration: none;
        color: var(--white);
    }
}
/* page cart */
body#cart #wrapper,
body#checkout #wrapper,
body#my-account #wrapper{
    padding-top: 50px;
}
.cart-container ul.cart-items{
    display: flex;
    flex-flow: column;
    gap: 30px 0px;
    & li{
        margin: 0px;
        padding: 0px;
        border: none;
    }
    & .product-line-grid-body{
        padding: 20px;
        & .twCatInformation{
            display: grid;
            grid-template-columns: 90px 1fr;
            gap: 0px 20px;
            align-items: center;
        }
        & .twProductFeature{
            display: flex;
            & li{
                &::before{
                    content: '|';
                    margin: 0 0px 0 5px;
                }
                &:first-child::before{
                    display: none;
                }
            }
        }
        & .product-line-info{
            padding-top: 20px;
            & .row [class*='col-']:first-child > div{
                border: none;
                padding: 0px;
            }
            & .row [class*='col-'] span{
                font-weight: 600;
                display: block;
                color: var(--gris-minus);
                &:last-child{
                    color: var(--noir-plus);
                    font-size: 20px;
                }
            }
        }
    }
    & .product-line-grid{
        border-radius: 12px;
        background: var(--white);
        & .product-line-actions{
            background: var(--gold-soft);
            padding: 10px 20px;
            & > .row{
                align-items: center;
                display: flex;
            }
        }
        & .qty, & .product-price{
            font-weight: 600;
            color: var(--gris-minus);
            & span{
                color: var(--noir-minus);
            }
        }
        & .qty, & .product-price, & .cart-line-product-actions{
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
    }
    & .product-line-info .row [class*='col-'] > div,
    & .product-line-grid .product-price{
        border-left: 1px solid var(--gold-soft-plus);
        padding-left: 15px;
    }
    & .product-line-grid .product-price{
        border-color: var(--white);
    }
}

.blockcart.cart-preview .body ul{
    display: flex;
    flex-flow: column;
    gap: 20px;
    & li{
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        padding-bottom: 20px;
    }
    & .cartTotal{
        font-size: inherit;
        color: var(--white);
        & .row .col-xs-6:last-child{
            font-weight: 600;
            font-size: 20px;
        }
    }
    & .cart-line-item{
        display: flex;
        flex-flow: column;
        gap: 5px;
        color: var(--white);
        & .colRight{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        & .colLeft{
            text-align: left;
            & .product-name{
                display: flex;
                flex-flow: column;
                justify-content: flex-start;
                align-items: flex-start;
            }
            & .product-price{
                font-weight: 600;
                font-size: 20px;
            }
        }
    }
}
.cart-summary .blockcart.cart-preview .body ul{
    & li{
        border-bottom: 1px solid var(--gold-soft-plus);
    }
    & .cart-line-item{
        color: var(--noir-plus);
        & .colRight{
            display: none;
        }
        & .colLeft{
            display: flex;
            flex-flow: column;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 4px;
            & .customizations{
                font-size: 12px;
                color: var(--gris-plus);
                margin-bottom: 7px;
            }
            & .product-price{
                align-self: flex-end;
            }
        }
    }
}
.cart-summary .blockcart.cart-preview .header,
.cart-summary .blockcart.cart-preview .body ul li.cartTotal,
.cart-summary .blockcart.cart-preview .body .linkCart{
    display: none;
}
.cart-summary .cart-summary-totals,
.cart-summary .block-promo{
    display: flex;
    flex-flow: column;
    gap: 20px 0px;
    margin-top: 20px;
    border-bottom: 1px solid var(--gold-soft-plus);
    padding-bottom: 20px;
    & .cart-summary-line{
        margin: 0px;
        & .label{
            font-size: inherit;
        }
        & .value{
            font-weight: 600;
            font-size: 20px;
        }
    }
    & .promo-code{
        padding: 20px 0px 0px 0px;
    }
}

/* page checkout */
body#checkout .cart-summary .block-promo{
    border-bottom: none;
}
body#checkout section.checkout-step{
    padding: 0px;
    background: transparent;
    &.-complete:not(.-current){
        color: var(--gold);
    }
}
body#checkout .twHeadingCheckout{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    & section.checkout-step .step-title{
        font-size: 13px;
        padding: 0px !important;
        border: none !important;
        font-weight: 600;
    }
    & section.checkout-step.-unreachable .step-title{
        color: var(--gris-minus);
    }
}
body#checkout .twContentCheckout section.checkout-step .content{
    padding: 0px;
}
body#checkout .twContentCheckout ul.nav{
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 5px;
    background: var(--white);
    border-radius: 10px;
    & li{
        margin: 0px;
    }
    & a{
        display: inline-flex;
        height: 60px;
        align-items: center;
        justify-content: center;
        padding: 18px 30px;
        font-weight: 600;
        color: var(--noir-plus);
        border: 1px solid transparent;
        border-radius: var(--border-radius-4);
        &:hover, &.active{
            color: var(--gold-plus);
            border-color: var(--gold-plus);
        }
    }
}
body#checkout section.checkout-step .address-selector,
body#checkout .delivery-options{
    flex-flow: column;
    gap: 20px;
    & .address-item{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        border-width: 1px;
        border-radius: 12px;
        padding: 30px;
        background: var(--white);
        & > header{
            min-height: auto;
        }
        & .radio-block{
            padding: 0px;
        }
        & .address{
            margin: 0px;
        }
        & .address-footer{
            display: flex;
            flex-flow: column;
            padding: 0px;
            margin: 0px;
            gap: 10px;
        }
    }
}
body#checkout section.checkout-step .delivery-options .delivery-option,
p.alert-commande{
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--gold-soft-plus);
    & label{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        flex-wrap: wrap;
        width: 100%;
        & .carrier-price{
            display: inline-flex;
            align-items: center;
            background: var(--gold-minus);
            font-weight: 600;
            height: 40px;
            padding: 0 20px;
            border-radius: var(--border-radius-4);
            color: var(--noir-plus);
        }
    }
}
body#checkout .payment-options .payment-option > label{
    font-weight: 600;
}
body#checkout section.checkout-step .custom-radio,
body#checkout .custom-checkbox input[type=checkbox]+span{
    width: 20px;
    height: 20px;
    border-color: var(--gold-soft-plus);
    border-radius: var(--border-radius-4);
    background: var(--white);
    & > span{
        border-radius: 1px;
        width: 10px;
        height: 10px;
        top: 4px;
        left: 4px;
    }
    & input[type=radio]:checked+span{
        background: var(--rouge-plus);
    }
}
body#checkout .condition-label{
    display: flex;
    align-items: center;
    color: var(--gris-plus);
    & label{
        margin: 0px;
        color: var(--gris-plus);
    }
    & a{
        color: var(--gris-plus);
        text-decoration: underline;
    }
}
/* page calculator module */
.twinbiCaculator{
    & .form-group{
        margin-bottom: 20px;
    }
    & label{
        display: block;
        font-weight: 400;
        color: var(--gris-plus);
        margin-bottom: 5px;
        text-align: left;
        &.form-label-result{
            color: var(--noir-plus);
        }
    }
    & .form-result{
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        background: none;
        outline: 0;
        box-shadow: none;
        font-size: 20px;
        font-weight: 600;
        color: var(--noir-plus);
    }
}
.twinbiCaculator .form-group.boxVal.disabled .form-control,
.twinbiCaculator .form-control[readonly]{
    pointer-events: none;
}
.twinbiCaculator .form-group.boxVal.disabled .form-control{
    background: var(--clair-minus);
}
/* page my account */
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i{
    color: var(--rouge-plus);
}
.page-my-account #content .links a .link-item{
    border-radius: var(--border-radius-4);
    border: 1px solid var(--gold);
}
.page-customer-account #content{
    padding: 0px;
    background: transparent;
}
.page-registration #content{
    max-width: unset;
}
.twCard,
.page-addresses .address{
    background: var(--white);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--gold-minus) !important;
}
body#order-confirmation #order-details{
    margin-top: 0px;
}
.page-addresses .address{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    & .address-body address{
        min-height: unset;
        margin: 0px;
    }
    & .tw-address-footer{
        display: flex;
        flex-flow: column;
        gap: 5px;
    }
}
body#history .table thead th{
    color: var(--gris-minus);
    font-weight: 600;
    font-size: 14px;
    background: none;
    border: none;
}
body#history .table thead th,
body#history .table tbody tr td,
body#history .table tbody tr th{
    &:first-child{
        padding-left: 0px;
    }
    &:last-child{
        padding-right: 0px;
    }
}
body#history .table tbody tr td,
body#history .table tbody tr th{
    color: var(--noir-plus);
}
body#history .table-labeled td,
body#history .table-labeled tr{
    background: transparent;

}
.twLinkNavCustomer{
    display: flex;
    gap: 70px;
    margin-bottom: 30px;
    & a{
        text-transform: uppercase;
        font-weight: 600;
        color: var(--gris-minus);
        &:hover, &.active{
            color: var(--noir-plus);
        }
    }
}
.col_sidebar_right{
    position: sticky;
    /* Decale la colonne vers le haut (jusqu'a masquer la photo de 224px) uniquement
       si l'ecran est trop court pour afficher la photo + le formulaire (~600px) en
       entier. Sur un grand ecran, calc(100vh - 824px) est positif et clamp() ramene
       le top a 0 : aucun decalage. */
    top: clamp(-380px, calc(100vh - 994px), 10px)
}
.sidebarCategoryImages{
    display: grid;
    align-items: flex-start;
    gap: 10px;
}
.sidebarCategoryImages > img{
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 100%;
    height: auto;
}
.sidebarDimImages{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
}
.sidebarDimImages > img{
    /*flex: 1 1 0;*/
    min-width: 0;
    width: auto;
    max-width: 100%;
    height: auto;
}
.listingProductRight .modal{
    position: static;
    display: block;
}
#products{
    color: inherit;
}

#cms .prefix_date_on {
    color: #fff;
    font-family: 'Old Standard TT';
    font-size: 40px;
    font-style: italic;
    float: left;
    margin-top: 44px;
}
#cms .pagenotfound {
    max-width: 824px;
    margin: 100px auto 100px auto;
    text-align: center;
}

.storeImages .row, .storeImages.row{
    margin-left: 0px;
    margin-right: 0px;
}
.storeImages .row [class*='col-'],
.storeImages.row [class*='col-']{
    padding-left: 0px;
    padding-right: 0px;
}
.storeImages img{
    object-fit: cover;
    width: 100%;
}
#stores .page-stores{
    width: 100%;
}

.btn,
#non-commercialse{
    display: inline-flex;
    align-items: center;
    gap: 0 5px;
    height: 40px;
    background: var(--gold-plus);
    color: var(--white);
    font-size: 14px;
    border-radius: var(--border-radius-4);
    padding: 0 20px;
    &:focus{
        outline: none;
    }
}
.btn:hover{
    background: var(--gold);
    color: var(--white) !important;
}
.btn.btn-secondary{
    background: transparent;
    border: 1px solid var(--rouge-plus);
    color: var(--rouge-plus);
    &:hover{
        background: transparent;
        border-color: var(--rouge-minus);
        color: var(--rouge-minus) !important;
    }
}
.btn.btn-small{
    height: 27px;
    font-weight: 600;
}
.btn-readmore{
    color: var(--gold);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 0 5px;
    &::after{
        font-family: 'Font Awesome 5 Light';
        font-weight: 300;
        content: "\f054";
    }
    &:hover{
        color: var(--gold-plus);
        & span{
            text-decoration: underline;
        }
    }
}
.btn-print{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    gap: 5px;
    &:hover{
        color: var(--gold-plus);
        & span{
            text-decoration: underline;
        }
        & .tw-icon{
            background-color: var(--gold-plus);
        }
    }
}
.custom_product_form input:focus,
.custom_product_form .form-control:focus,
.input-group.focus{
    border: none;
    box-shadow: none;
    outline: 0px;
}
.form-control, .form-select{
    height: 40px;
    border-radius: var(--border-radius-4);
    background-color: var(--white);
    border-color: var(--gold-soft-plus);
    width: 100%;
}
.form-control:focus,
.form-select:focus{
    outline: none !important;
    border-color: var(--gold-minus) !important;
}

.align-items-center{
    align-items: center;
}
.img-responsive,
#cms img{
    max-width: 100%;
    height: auto;
}
#cart-subtotal-shipping {
    display: none;
}

body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo)>.col-xs-12{
    padding-left:0
}

#customer-form .form-control-comment,
.register-form .form-control-comment{
    display:none;
}
.container_boutique{
    padding-bottom:20px;
}
.container_boutique .card{
    cursor:pointer;
}

@media (min-width: 1200px){
    #header .container,
    #wrapper .breadcrumb .container{
        width: 1440px;
    }
}
@media (min-width: 768px){
    #header .container{
        width: 100%;
        max-width: 1500px;
    }
}
/* Nav mobile active jusqu'a 991px : le desktop (menu horizontal) ne prend le relais
   qu'a partir de 992px. */
@media (min-width: 992px){
    #header .container > .header{
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 0 80px;
        align-items: center;
    }
    #header .header-nav{
        display: flex;
        justify-content: space-between;
        border: none;
    }
    #header .header-nav nav,
    #header .menu{
        display: flex;
        align-items: center;
        width: fit-content;
    }
}
@media (max-width: 1190px) and (min-width: 992px){
    body #header .container > .header{
        display: flex;
        flex-flow: column;
        gap: 15px;
    }
}
@media (min-width: 768px){
    #wrapper #subcategories > .row{
        margin-left: 0px;
        margin-right: 0px;
    }
    #wrapper.cat-12 #subcategories > .row .col-md-3{
        background: var(--white);
    }
    .d-md-flex{
        display: flex;
        flex-wrap: wrap;
    }
    .md-position-sticky{
        position: sticky;
        top: 15px;
    }
}
/* Nav mobile (hamburger) active jusqu'a 991px, relais desktop a partir de 992px
   (voir le @media (min-width: 992px) plus haut qui affiche le menu horizontal). */
@media (max-width: 991px){
    /* Le bundle core (theme.css) utilise des classes utilitaires Bootstrap
       (.hidden-md-up) qui forcent display:none!important a partir de 768px, cible
       fixe qui ne connait pas notre seuil 991px. Entre 768 et 991px ces elements
       (header-right-mobile / mobile_top_menu_wrapper, tous deux avec la classe
       hidden-md-up dans header.tpl) restaient donc masques malgre nos regles
       ci-dessous : il faut du !important pour les emporter sur cette plage. */
    #header .header-logo{
        text-align: center;
    }
    #header.is-open{
        position: fixed;
        width: 100%;
        height: 100%;
    }
    #header .container{
        width: 100%;
        & .header-right-mobile{
            display: flex !important;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            & .item{
                display: flex;
                gap: 15px;
                align-items: center;
                justify-content: flex-end;
            }
            & #menu-icon, & a{
                color: var(--white);
            }
            & .tw-icon{
                background-color: var(--white);
                &.icon-panier{
                    display: inline-block
                }
            }
        }
    }
    /* Transition d'ouverture : display:none/block (jQuery show()/hide(), voir theme.js)
       ne peut pas s'animer, donc l'etat visuel (opacity/translateY) est pilote par la
       classe .is-visible, ajoutee/retiree juste apres le show()/hide() dans theme.js. */
    #header #mobile_top_menu_wrapper{
        position: absolute;
        width: 100%;
        background: var(--rouge-plus);
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity .25s ease, transform .25s ease;
    }
    #header #mobile_top_menu_wrapper.is-visible{
        /* .hidden-md-up (core) force display:none!important des 768px : sans ce
           display ici, le menu ne s'ouvre plus du tout entre 768 et 991px, meme si
           le JS ajoute bien .is-visible (l'opacite/transform ne se voient pas sur
           un element display:none). */
        display: block !important;
        opacity: 1;
        transform: translateY(0);
    }
    /* Bouton hamburger -> croix (3 spans, voir header.tpl) */
    #menu-icon{
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 24px;
        height: 20px;
        cursor: pointer;
        & .bar{
            display: block;
            width: 100%;
            height: 2px;
            background: currentColor;
            border-radius: 2px;
            transition: transform .25s ease, opacity .25s ease;
        }
    }
    #header .header-right-mobile .blockcart .cart-products-count{
        color:var(--gold-plus)!important;
        right: -15px!important;
        bottom: -4px!important;
    }
    #header.is-open #menu-icon{
        & .bar:nth-child(1){
            transform: translateY(7px) rotate(45deg);
        }
        & .bar:nth-child(2){
            opacity: 0;
        }
        & .bar:nth-child(3){
            transform: translateY(-7px) rotate(-45deg);
        }
    }
    #header .logo{
        display: block;
        margin-bottom: 15px;
        text-align: center!important;
    }
    #header .header-nav{
        display: none;
    }

    #header .menu{
        display: flex;
        flex-flow: column;
        gap: 5px;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
        & li{
            width: 100%;
            & a{
                padding: 8px;
                display: block;
            }
        }
    }
    #header .menu > li ul{
        visibility: visible;
        opacity: 1;
        filter: alpha(opacity=100);
        -webkit-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        transform: rotateX(0deg);
        position: static;
        padding: 5px 15px;
        display: none;
    }
}
@media (max-width: 767px){
    footer .footer-container{
        padding: 30px 0px;
    }
    .copyRight ul.linklist{
        flex-flow: column;
        gap: 10px;
    }
    .twTitle.twMainTitle, .twTitles.twMainTitle{
        padding: 35px 0px;
    }
    #products .products{
        display: block;
    }
    .cart-container ul.cart-items {
        & .product-line-grid-body {
            & .twProductFeature{
                flex-flow: column;
                gap: 5px;
                & li::before{
                    display: none;
                }
            }
        }
    }
    .cart-container ul.cart-items {
        & .product-line-info .row [class*='col-'] > div,
        & .product-line-grid .product-price{
            border: none;
            padding-left: 0px;
            padding-top: 10px;
        }
    }
    .cart-container ul.cart-items {
        & .product-line-grid {
            & .product-line-actions {
                & > .row{
                    flex-flow: column;
                }
            }
        }
    }
    body#checkout .twHeadingCheckout,
    .twLinkNavCustomer,
    #blockcart-modal .cart-content .cart-content-btn{
        flex-flow: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }
    #blockcart-modal .cart-content .cart-content-btn{
        width: 100%;
        gap: 5px;
        & .btn{
            margin: 0px;
        }
    }
    #js-checkout-summary{
        margin-top: 35px;
    }
    .listingProductLeft .product_list{
        max-height:60vh;
        overflow:auto;
    }
    .listingProductLeft .product_list_header label{
        font-size:10px;
    }
    .listingProductLeft .product_list .product-container .val {
        font-size:11px;
    }
    .listingProductLeft .product_list .product-container .dispo_cont .label_dispo{
        display:none;
    }
    .twSubCategoriesNav{
        display: block;
        & a{
            display:block;
            margin-bottom:5px;
            font-size:13px;
        }
    }
}

@media (max-width: 590px){
    .listingProductLeft .product_list_header,
    .listingProductLeft .product_list .product-container{
        padding-left: 15px;
        padding-right: 15px;
    }
    #js-product-list > .row .col-xs-12 img{
        object-fit: cover;
        width: 100%;
    }
}

@media (max-width: 480px){
    .twSubCategoryInner {
        & .inner{
            grid-template-columns: 100px 1fr;
            & .meta{
                padding: 15px 0px;
            }
        }
    }
}

/* Bandeau d'information (twinbi_announcement) */
.twinbiAnnouncement{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: var(--rouge-plus);
    color: var(--white);
    transition: transform .3s ease;
}
.twinbiAnnouncement.is-hidden{
    transform: translateY(100%);
}
.twinbiAnnouncement .container{
    padding: 12px 20px;
    text-align: center;
}
.twinbiAnnouncement-message,
.twinbiAnnouncement-message *{
    color: var(--white);
    font-size: 18px;
    margin: 0;
}
@media (max-width: 768px){
    .twinbiAnnouncement .container{
        padding: 10px 15px;
    }
    .twinbiAnnouncement-message,
    .twinbiAnnouncement-message *{
        font-size: 13px;
    }
}

@media print {
    #_desktop_cart,
    #_desktop_user_info,
    .header-top,
    .footer-container,
    .page-footer,
    .twinbiAnnouncement{
        display:none;
    }
    header .col-md-9{
        width:100%!important;
    }
    @page {
        margin: 0;
    }
}

@media print {
    body.printing header,
    body.printing footer,
    body.printing #notifications,
    body.printing .elementor-top-section:not(.printing),
    body.printing .e-con:not(.printing),
    body.printing .twFAQ .item:not(.printing),
        /* La sidebar (nav categories) de twCategoryCMS n'est pas un ancetre de l'item imprime,
           donc elle ne recoit jamais .printing : on la masque explicitement. */
    body.printing .twCategoryCMS .col-md-4{
        display: none !important;
    }

    body.printing .twFAQ .item.printing,
    body.printing .twFAQ .item.printing * {
        display: block !important;
    }

    body.printing .twFAQ .item.printing{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    body.printing .btn,
    body.printing .twFAQ .item.printing .btn-print {
        display: none !important;
    }

    /* Chevron d'accordeon (::after du titre) : inutile a l'impression. */
    body.printing .twFAQ .item.printing .twTitle::after{
        content: none !important;
    }

    /* Les navigateurs n'impriment pas les background-image par defaut : on le force
       pour que l'illustration du titre soit bien presente sur la version imprimee. */
    body.printing .twFAQ .item.printing .twTitle{
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* #wrapper impose une hauteur mini (~100vh) pour l'affichage ecran ; l'item imprime
       etant en position:absolute, il ne "remplit" plus ce conteneur, qui reserve quand
       meme cet espace vide et le fait deborder sur une 2e page blanche. */
    body.printing #wrapper{
        min-height: 0 !important;
    }
}