@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('./fonts/open-sans-v28-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('./fonts/open-sans-v28-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('./fonts/open-sans-v28-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('./fonts/open-sans-v28-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed Light';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('./fonts/OpenSans-CondLight-webfont.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed Bold';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('./fonts/OpenSans-CondBold-webfont.woff') format('woff');
    font-display: swap;
}

/* https://github.com/dimsemenov/Magnific-Popup */
.mfp-bg{top:0;left:0;width:100%;height:100%;z-index:1042;overflow:hidden;position:fixed;background:#0b0b0b;opacity:.8}.mfp-wrap{top:0;left:0;width:100%;height:100%;z-index:1043;position:fixed;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-moz-zoom-out;cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-ready .mfp-preloader{display:none}.mfp-s-error .mfp-content{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;box-shadow:none;touch-action:manipulation}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px;white-space:nowrap}.mfp-arrow{position:absolute;opacity:.65;margin:0;top:50%;margin-top:-55px;padding:0;width:90px;height:110px;-webkit-tap-highlight-color:transparent}.mfp-arrow:active{margin-top:-54px}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow:after,.mfp-arrow:before{content:'';display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent}.mfp-arrow:after{border-top-width:13px;border-bottom-width:13px;top:8px}.mfp-arrow:before{border-top-width:21px;border-bottom-width:21px;opacity:.7}.mfp-arrow-left{left:0}.mfp-arrow-left:after{border-right:17px solid #fff;margin-left:31px}.mfp-arrow-left:before{margin-left:25px;border-right:27px solid #3f3f3f}.mfp-arrow-right{right:0}.mfp-arrow-right:after{border-left:17px solid #fff;margin-left:39px}.mfp-arrow-right:before{border-left:27px solid #3f3f3f}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:40px 0 40px;margin:0 auto}.mfp-figure{line-height:0}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media all and (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight : 500;
    padding-top: 124px;
}

.bg_noir {
    background: black;
    color: white;
}

.bg_white {
    background: white;
    color: black;
}

.bg_anthracite,
.subnav > div  {
    background: #303030;
    color: white;
}

.bg_beton_noir,
.tabs > input:checked + label {
    /*
    background-image: url(/style/fond/fond-beton-noir.jpg);
    background-repeat: repeat-y;
    background-position: center center;
    */
    background: #303030;
    color: white;
}

.tabs > input + label {border-color: black;}
.tabs > input ~ .tab {border-top-color: black;}
.tabs:not(.fill) > input:checked + label {border-bottom-color: transparent}

.bg_beton_blanc{
    background-image: url(/style/fond/fond-beton-blanc3.jpg);
    background-repeat: repeat;
    background-position: center center;
    background-color: transparent;
    color: black;
}

.bg_gris {background: #eeeeee;}
.bg_anthracite {background: #242424}

.btn_action,
.btn_defaut {
    border-radius: 5ex!important
}

    .btn_action.btn_max {
        line-height: 30px;
    }

header {
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 301;
    /*height: 120px;*/
}

    #nav-logo {
        display: none;
    }

    #nav-recherche {
        padding: var(--demi-espace) 0;
    }

    :target:not(.popup) {
        padding-top: 1em;
        margin-top: -1em;
    }

    #top {
        padding-bottom: var(--espace);
        font-size: 80%;
        text-transform: uppercase;
    }

    #top > a {order: -1}

    li.separation {
        border-right: 1px solid white;
        padding-right: var(--demi-espace);
    }

    .baseline {
        font-family: 'Open Sans Condensed Bold', sans-serif;
        font-weight: 700;
    }

    h1 {
        display: block;
        font-size: 3rem;
        text-transform: uppercase;
        font-family: 'Open Sans Condensed Light', sans-serif;
        font-weight: 300;
        line-height: 1.2em;
    }

    h2, .h2 {
        display: block;
        font-size: 2rem;
        text-transform: uppercase;
        font-family: 'Open Sans Condensed Light', sans-serif;
        font-weight: 300;
        line-height: 1.2em;
        margin-bottom: var(--espace);
    }

        h2.neutre {
            line-height: var(--line-height);
            font-size: var(--root-font-size);
            text-transform: none;
            font-family: inherit;
            font-weight: normal;
            margin-bottom: var(--espace);
        }
        
        h2.neutre::after {
            display: block;
            max-width: 100px;
            content: '';
            border-bottom: 4px solid #00f;
        }

        h1.big, h2.big, .h2.big {
            margin-bottom: var(--triple-espace);
            font-size: 3.2rem;
            font-weight: bold;
        }
        
        h1.big {font-family: 'Open Sans', sans-serif;}

    h3, .h3 {
        font-size: 1.2rem;
        font-weight: 300;
        font-family: 'Open Sans Condensed Light', sans-serif;
        text-transform: uppercase;
        line-height: 1.1em;
    }

        h2.bold, h3.bold {
            font-weight: 700;
            font-family: 'Open Sans Condensed Bold', sans-serif;
        }

        .nav__link {
            text-transform: uppercase;
            font-size: 110%;
            font-weight: 600;
        }

    .neonBleuFixe {
        text-shadow:
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #15ecff,
                0 0 70px #15ecff,
                0 0 80px #15ecff,
                0 0 100px #15ecff,
                0 0 150px #15ecff;
    }
    .neonRougeFixe {
        text-shadow:
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #FF1177,
                0 0 70px #FF1177,
                0 0 80px #FF1177,
                0 0 100px #FF1177,
                0 0 150px #FF1177;
    }
    .neonVertFixe {
        text-shadow:
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #53ff17,
                0 0 70px #53ff17,
                0 0 80px #53ff17,
                0 0 100px #53ff17,
                0 0 150px #53ff17;
    }

    .facebook {color: #3c5a99!important}
    .twitter {color: #1da1f2!important}
    .google_plus {color: #dc4a38!important}

    /* accueil */

    #slide {position : relative;}
    #slide  strong {
        font-family: 'Montserrat', sans-serif;
        font-size : 500%;
        font-weight : 400;
        text-transform : uppercase;
        position : absolute; top : 30px; left: 60%; transform : translate(-60%,0);
        display : block;
        z-index : 99;
    }

    /* produit (aperçu) */

    .produitA > div {
        height: 100%;
        background: #eee;
        border-radius: 1ex;   
    }
    
    .produitA__aperçu {
        min-height: 210px;
    }
    
    .produitA__vignette {
        display: block;
        text-align: center;
    }
    
        .produitA__vignette img {
            max-height: 210px;
        }

    .produitA--francais {}
    
    .produitA__pictos {
        width: auto;
        top: calc(-1 * var(--demi-espace));
        right: calc(-1 * var(--demi-espace));
    }
    
        .produitA__pictos img {display: block;}
        
    .produitA__arret {
        width: auto;
        top: 0;
        left: 0;
        color: white;
        padding: 2px 4px;
        background: black;
        font-weight: bold;
        font-size: 75%;
        text-transform: uppercase;
        max-width: 200px;
    }
        
    .produitA__favori {
        font-size: 130%;
    }
        
    .produitA__marque {}
    .produitA__libelle {}

    .produitA__offre {}
        .produitA__tarif {font-size: 150%; font-weight: 700;}
        .produitA__tarif--normal {}
        .produitA__tarif--promo {}
        .produitA__tarif--surdemande {}

    /* produit (détail) */

    .produit {
        display: grid;
        grid-template-columns:  1fr;
        grid-template-areas:
           "intro"
           "options"
           "offre"
           "photo"
           "complement";
    }

    .produit__descriptif {grid-area: intro}
    .produit__options {grid-area: options}
    .produit__complement {grid-area: complement}
    .produit__photo {grid-area: photo}
    .produit__vente {grid-area: offre}

    .produit__reference {text-transform: uppercase}
    .produit__stock[data-vente="1"] {color: green}
    .produit__stock[data-vente="0"] {color: var(--color-alerte)}

    .produit__demande {}

    .produit__offre {padding-bottom: var(--espace)}
    .offre__tarif,
    .offre__tarif--promo {font-size: 300%; font-weight: 700}
    .offre__tarif--habituel {}
    .offre__conditionnement {}
    .offre__information {display: block;}
    .offre__economie, .ecTarif__remise {
        padding: var(--espace) 0;
        color: var(--color-info);
        font-size: 90%;
    }

    .produit__quantite {
        display: inline-block;
        border-color: var(--color-light);
    }

    /* temoignages */
    
    .commentaire {
        position: relative;
        padding: 75px 30px 0 30px;
    }

    .commentaire > div {
        height: 100%;
        padding: 80px 20px 40px 20px;
        box-shadow: 5px 4px 5px rgba(0,0,0,0.2);
        background: #eeeeee;
        border-radius: 50px;
    }
    
    .commentaire__avatar {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
     
    .commentaire__date {
        padding: var(--espace) 0;
        text-align: right;
        color: #999;
    }
    
    .commentaire__texte {
        max-height: 200px;
        overflow: hidden;
        font-style: italic;
        font-family: Georgia;
        font-size: 90%;
    }

    /* rassurance */

    .rassurance {
        font-family: 'Open Sans Condensed Light', sans-serif;
        font-size: 120%;
        text-transform: uppercase;
    }
    .rassurance li {
        padding-left: var(--espace);
        padding-right: var(--espace)
    }

    /* faq */

    .cmsArticleFaq {border-bottom : 1px solid #cecece;}
    .cmsArticleFaq > div {display : none;}
    a.suite_faq i{float: right;}

/* icones */
.ico-bag::before {content : "\f290"; font-weight : bold;}
.ico-compte::before {content : "\f007"; font-weight : bold;}
.ico-phone::before {content : "\f095"; font-weight : bold;}
.ico-clock::before {content : "\f017"; font-weight : bold; }
.ico-mail::before {content : "\f0e0"; font-weight : bold;}
.ico-map::before {content : "\f3c5"; font-weight : bold;}
.ico-disclaimer::before {content : "\f256"; font-weight : bold;}
.ico-truck::before {content : "\f0d1"; font-weight : bold;}
.ico-time::before {content : "\f017"; font-weight : bold;}

.ico > i + a {flex: 1 1 0%}

.picto {
    font-size: 18px;
    line-height: 18px;
    padding: 0 5px;
}

.picto img {vertical-align: middle}

@media all and (max-width: 1280px) {
    #top h1 {display : none;}
}



form.box.column input+span {
    font-size: 80%;
    color: var(--color-light);
    display: block;
    max-width: 100%;
}



/* encart */

    .encart_info {
        background: var(--color-info);
        color: var(--color-info-inverse);
    }

    .encart_alerte {
        background: var(--color-alerte);
        color: var(--color-alerte-inverse);
    }

    .encart_partenaire,
    .encart_shop {
        background: #eee;
    }

/* panier */

.nav-etape {
    background : #ebebeb;
    font-size: 80%;
}
.nav-etape li {
    flex: 1 0 25%;
    align-self: stretch;
    padding: var(--demi-espace);
    text-align: center;
    background: var(--color-info);
    color: var(--color-info-inverse);
    opacity: 0.3;
}

.nav-etape li.atteint{opacity: 1}

.nav-etape li.actif a{color : #fff;}

.table.col5.panier__articles,
.table.col6.panier__articles {
    display: flex;
    flex-wrap: wrap;
}
.table.col5.panier__articles > *,
.table.col6.panier__articles > * {word-break: initial}
/*.table.col6.panier__articles > .pannier_article {flex-grow: 1}*/

/* commande */
.table.col4.commande__articles {grid-template-columns: minmax(200px,67%) minmax(100px,11%) minmax(100px,11%) minmax(100px,11%)}

body.js .no-js {display: none}

.pagination {font-size: 80%}
.pagination span {display: none}
.pagination ul {
    display: flex;
    justify-content: center;
    list-style: none;
}
.pagination li {padding: var(--demi-espace)}
.pagination .cp {background-color: var(--color-default); color: var(--color-inverse)}


.encart {
    flex-basis: 300px;
    flex-shrink: 0;
}

    .encart + div {
        max-width: 100%
    }

.encart > div,
.encart-gauche > div,
.encart-droit > div {
    height: 100%;
    border-radius: 1ex;
    background-repeat: no-repeat;
    background-size: contain;
}
.encart-droit {order: 2}

#filtres {
    border-bottom: 1px solid #eee;
}

    #filtres label {color: #0000ff; flex-basis: 20%}
    #filtres select {flex-basis: 80%; flex-grow: 1}

/* media-queries */

@media screen and (max-width:450px) {

    .encart-gauche,
    .encart-droit {
        display: none;
    }

    .btn-slide {font-size: 80%}
    
}

@media screen and (min-width:450px) {

    .encart-horizontal {
        display: none
    }

}


@media screen and (max-width:36rem) {

    /* xs */

    #accueil :target:not(.popup) {
        padding-top: 2em;
        margin-top: -2em;
    }
    
    h1.big, h2.big, .h2.big {
        font-size: 2.2rem;
    }
    
    .produitA .produitA__pictos {top: 0; right: 0;}
    .produitA .produitA__pictos img {width: 35px;}

}

/* body {border-top: 2px solid red;} */

@media screen and (min-width:36rem) {
    
    /* sm */
    
    .produitA {}
    
    /* body {border-color: brown!important;} */
    
    :target:not(.popup) {
        padding-top: 3em;
        margin-top: -3em;
    }

    /* accueil */
    #bloc-avantages-clients {
        background: url(/style/accueil/fond-fumee.jpg) no-repeat center center;
    }
    
    .produit {
        grid-template-columns:  1fr 33%;
        grid-template-areas:
           "intro offre"
           "options offre"
           "complement photo";
    }
    .nav-etape {font-size: 90%}
    .table.col5.panier__articles,
    .table.col6.panier__articles {
        display: grid;
    }
    .table.col5.panier__articles {
        grid-template-columns: 10% minmax(200px,1fr) minmax(60px,10%) minmax(150px,10%) minmax(60px,15%);
    }
    .table.col6.panier__articles {
        grid-template-columns: 0% minmax(200px,1fr) minmax(60px,10%) minmax(150px,10%) minmax(60px,20%) auto;
    }

    .ecPointsRetrait-table {display: table-row}
    .ecPointsRetrait-liste, .ecPointsRetrait-carte {
        display: table-cell;
        vertical-align: top;
    }
    .ecPointsRetrait-liste {width: 30%}
    .ecPointsRetrait-carte {
        width: 70%;
        padding-left: 10px;
    }
    .ecPointsRetrait-liste .ecListe,
    .ecPointsRetrait-carte .ecMapCanvas {height: 600px}
    
    

}

@media screen and (min-width:48rem) {

    .encart-droit {order: 3}
    
    /* md */
    
    /* body {border-color: orange!important;} */
    
    body {
        padding-top: 0
    }
    
    .ancres {
        position: sticky;
        top: 120px;
        z-index: 100;
    }
    
    #nav-logo {
        display: initial;
        order: -1;
    }
    
    #nav-logo img {
        max-width: 100%;
        margin-top: -100px;
    }
    
    .table.col6.panier__articles {
        grid-template-columns: 10% minmax(200px,1fr) minmax(60px,10%) minmax(150px,10%) minmax(60px,15%) auto;
    }
    
    .encart + div {
        max-width: calc(100% - 300px);
    }
    
    
}

@media screen and (min-width:62rem) {
    
    .encart-droit {order: 4}
    
    /* lg */

    /* body {border-color: yellow!important;} */
    
    :target:not(.popup) {
        padding-top: 4em;
        margin-top: -4em;
    }

        #accueil :target:not(.popup) {
            padding-top: 5em;
            margin-top: -5em;
        }

    .produit {
        grid-template-columns: 25% 1fr 25%;
        grid-template-areas:
            "photo intro offre"
            "photo options offre"
            "photo complement offre";
    }
    .produit__descriptif,
    .produit__options,
    .produit__complement {padding-right: var(--espace)}
    
    .encart-droit {order: 4}

}

@media screen and (min-width:75rem) {

    /* xl */
    
    /* body {border-color: green!important;} */
    
    #nav-logo {
        order: 0;
    }
    
    #nav-logo img {
        margin-top: clamp(-80px,-8vw,-50px);
    }
    
}

.mainnav {
    /*height: 40px;*/
    text-align: center;
}

.nav__link {
    height: 50px;
    display: block;
}
.subnav > div {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.45s ease-out;
    text-align: left;
    visibility: hidden;
    opacity: 0;
}

.subnav:hover > div {
    max-height: 800px;
    visibility: visible;
    opacity: 1;
}

a.n-picto {
    display: inline-block;
    width: 100px;
    padding-top: 75px;
    font-size: 90%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center top;
    text-transform: uppercase;
    text-align: center;
}

.n-picto-accus {background-image: url(/style/nav-rubrique/accu.jpg)}
.n-picto-atomiseurs-reservoirs {background-image: url(/style/nav-rubrique/atomiseurs-reservoirs.jpg)}
/*.n-picto-bieres {background-image: url(/style/nav-rubrique/bieres.png)}*/
.n-picto-boissons {background-image: url(/style/nav-rubrique/boissons.png)}
.n-picto-bonbons {background-image: url(/style/nav-rubrique/bonbons.png)}
.n-picto-booster {background-image: url(/style/nav-rubrique/booster.png)}
/*.n-picto-cadeaux {background-image: url(/style/nav-rubrique/cadeau-fidelite.png)}*/
.n-picto-cartouches {background-image: url(/style/nav-rubrique/cartouches.jpg)}
.n-picto-chargeurs {background-image: url(/style/nav-rubrique/chargeur.jpg)}
.n-picto-classic {background-image: url(/style/nav-rubrique/classic.png)}
.n-picto-classic-gourmands {background-image: url(/style/nav-rubrique/classic-gourmand.png)}
.n-picto-coils {background-image: url(/style/nav-rubrique/coils.png)}
.n-picto-coton {background-image: url(/style/nav-rubrique/coton.png)}
.n-picto-custards {background-image: url(/style/nav-rubrique/custards.png)}
.n-picto-delta-9-thc {background-image: url(/style/nav-rubrique/delta-9.jpg)}
.n-picto-divers-cbd {background-image: url(/style/nav-rubrique/divers-cbd.jpg)}
.n-picto-divers-cadeaux {background-image: url(/style/nav-rubrique/divers-cadeaux.jpg)}
.n-picto-drip-tip {background-image: url(/style/nav-rubrique/drip-tip.jpg)}
.n-picto-e-cig-kit {background-image: url(/style/nav-rubrique/e-cig-kit.jpg)}
.n-picto-e-liquides-10ml {background-image: url(/style/nav-rubrique/e-liquide-10ml.jpg)}
.n-picto-flacons {background-image: url(/style/nav-rubrique/flacons.png)}
.n-picto-fleurs {background-image: url(/style/nav-rubrique/fleurs-cbd.jpg)}
.n-picto-floraux {background-image: url(/style/nav-rubrique/floral.png)}
.n-picto-frais {background-image: url(/style/nav-rubrique/frais.png)}
.n-picto-fruites {background-image: url(/style/nav-rubrique/fruites.png)}
.n-picto-fruites-frais {background-image: url(/style/nav-rubrique/fruites-frais.png)}
.n-picto-goodies {background-image: url(/style/nav-rubrique/goodies.png)}
.n-picto-gourmands {background-image: url(/style/nav-rubrique/gourmands.png)}
.n-picto-huiles {background-image: url(/style/nav-rubrique/huiles-cbd.jpg)}
.n-picto-macerats {background-image: url(/style/nav-rubrique/macerat.png)}
.n-picto-menthe {background-image: url(/style/nav-rubrique/menthe.png)}
.n-picto-nico-pouch {background-image: url(/style/nav-rubrique/nico-pouch-on.png)}
.n-picto-outils {background-image: url(/style/nav-rubrique/outils.png)}
.n-picto-pyrex {background-image: url(/style/nav-rubrique/pyrex.jpg)}
.n-picto-reservoirs {background-image: url(/style/nav-rubrique/reservoir.jpg)}
.n-picto-resines {background-image: url(/style/nav-rubrique/resines.jpg)}
.n-picto-resistance {background-image: url(/style/nav-rubrique/resistance.png)}
.n-picto-sales {background-image: url(/style/nav-rubrique/sales.png)}
.n-picto-terpenes {background-image: url(/style/nav-rubrique/terpene.png)}
.n-picto-vaporisateurs {background-image: url(/style/nav-rubrique/vaporisateur.jpg)}

/*.n-picto-bieres:hover {background-image: url(/style/nav-rubrique/bieres-on.png)}*/
.n-picto-boissons:hover {background-image: url(/style/nav-rubrique/boissons-on.png)}
.n-picto-bonbons:hover {background-image: url(/style/nav-rubrique/bonbons-on.png)}
.n-picto-booster:hover {background-image: url(/style/nav-rubrique/booster-on.png)}
/*.n-picto-cadeaux:hover {background-image: url(/style/nav-rubrique/cadeau-fidelite-on.png)}*/
.n-picto-classic:hover {background-image: url(/style/nav-rubrique/classic-on.png)}
.n-picto-classic-gourmands:hover {background-image: url(/style/nav-rubrique/classic-gourmand-on.png)}
.n-picto-coils:hover {background-image: url(/style/nav-rubrique/coils-on.png)}
.n-picto-coton:hover {background-image: url(/style/nav-rubrique/coton-on.png)}
.n-picto-custards:hover {background-image: url(/style/nav-rubrique/custards-on.png)}
.n-picto-flacons:hover {background-image: url(/style/nav-rubrique/flacons-on.png)}
.n-picto-floraux:hover {background-image: url(/style/nav-rubrique/floral-on.png)}
.n-picto-frais:hover {background-image: url(/style/nav-rubrique/frais-on.png)}
.n-picto-fruites:hover {background-image: url(/style/nav-rubrique/fruites-on.png)}
.n-picto-fruites-frais:hover {background-image: url(/style/nav-rubrique/fruites-frais.png)}
.n-picto-goodies:hover {background-image: url(/style/nav-rubrique/goodies-on.png)}
.n-picto-gourmands:hover {background-image: url(/style/nav-rubrique/gourmands-on.png)}
.n-picto-macerats:hover {background-image: url(/style/nav-rubrique/macerat-on.png)}
.n-picto-menthe:hover {background-image: url(/style/nav-rubrique/menthe-on.png)}
.n-picto-nico-pouch:hover {background-image: url(/style/nav-rubrique/nico-pouch-on.png)}
.n-picto-outils:hover {background-image: url(/style/nav-rubrique/outils-on.png)}
.n-picto-resistance:hover {background-image: url(/style/nav-rubrique/resistance-on.png)}
.n-picto-sales:hover {background-image: url(/style/nav-rubrique/sales-on.png)}
.n-picto-terpenes:hover {background-image: url(/style/nav-rubrique/terpene-on.png)}

.marques-eliquides {
    max-height: 200px;
    scrollbar-color: white transparent;
}

    .lettre {
        padding: 4px 6px;
        background: #333;
        cursor: pointer;
    }

        .lettre:not(.selectionnee):hover {color: var(--color-action-hover)}
        .lettre.selectionnee {
            background: var(--color-action);
        }

.marque {
    display: inline-block;
    padding: var(--demi-espace);
    font-size: 90%;
}

/* slider : https://github.com/ganlanyuan/tiny-slider */
.tns-outer {position: relative}

.tns-controls {
    position: absolute;
    z-index: 100;
    top: 42%;
    left: -3%;
    width: 106%;
    display: flex;
    justify-content: space-between;
}

#slider-ow .tns-controls {
    width: 100%;
    left: 0;
}

.tns-controls button {
    background: #eaebe8;
    height: 50px;
    width: 50px;
    color: #d3d3d3 !important;
    border-radius: 50px;
    line-height: 1em;
    display: inline-block;
    padding: 7px 9px;
    border: none;
}

.tns-controls button i {color: black}

.tns-nav {text-align: center}
.tns-nav > [aria-controls] {width: 15px;height: 15px;padding: 0;margin: 0 5px;border-radius: 50%;background: #d3d3d3;border: 0;}

blockquote p {
    padding-bottom: 0;
    color: #666;
    font-size: 120%;
}

blockquote p::before {content: '\201C'}
blockquote p::after {content: '\201D'}

/* commentaires clients */

.ecPoll {display: inline-block}
select+.ecPoll {padding-left: 10px; vertical-align: bottom}

.ecPoll-0 {
    width: 37px;
    height: 32px;
    background: transparent url(ecommerce/poll.png) no-repeat;
    float: left;
}

.ecPoll-0 {display: block;}
.ecPoll-1 {background-position: 0 -82px;}
.ecPoll-2{background-position: 0 -164px;}

.ecArticleCommentaires a:link,
.ecArticleCommentaires a:visited {
    color: inherit;
    text-decoration: underline;
}

.ecCommentTitre {}
.ecCommentDate {display: inline-block; color: #999;}
.ecCommentAuteur {margin: 4px 0;}
.ecCommentTexte {}
.ecCommentTexteLabel {display: none;}


/* select2 */

.select2-container .select2-selection--single {
    height: auto!important;
    border-radius: 0!important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    /*height: 100%!important;*/
    /*display: inline-block!important;*/
}
.select2-selection__arrow b{display:none !important;}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 80%!important;
    overflow: hidden
}

.select2-container--default .select2-selection--single {
    border: 0!important;
}

.recherche-globale {width: 25vw;}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: inline-block!important;
    width: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: inherit!important;
    padding: 4px 0 4px 40px;
    background: transparent url(/style/picto-loupe.png) no-repeat 4px center;
}

.select2-selection.select2-selection--single,
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above {
  background: #eee;
  border: 0;
}

/*** expedition   *****************************************/


/* types */

.ecTypeExpedition {}

.ecTypeExpedition-libelle {background: #F5F5F5}
.ecTypeExpedition-libelle::after {
    content: '\25B6';
    position: absolute;
    right: var(--espace);
}
.ecTypeExpedition-libelle.ecTypeExpedition--isOpen::after {content: '\25BC'}
.ecTypeExpedition:nth-child(1n+2) .ecModesExpedition {display: none}

/* modes */

.ecModeExpedition,
.ecExpeditionOption-choix {flex: 1 1 0%}

.ecModeExpedition.ecSelectionne {}
.ecModeExpedition .ecExpeditionOptions {display: none}
.ecModeExpedition.ecSelectionne .ecExpeditionOptions{display: block}

/* points retraits */

.ecPointsRetrait-liste .ecListe {overflow-y: scroll}
.ecPointsRetrait-carte .ecMapCanvas {width: 100%; z-index: 1}

.ecPointsRetrait-liste .ecListe,
.ecPointsRetrait-carte .ecMapCanvas {height: 300px}

.ecPointRetrait {
    border-top: 1px solid #F0F0F0;
    background: #FAFAFA;
}

.ecPointRetrait:first-child {border-top: none}
.ecPointRetraitFerme {opacity: 0.5}

.ecPointRetrait.ecSelectionne {
    background-color: #f0f0f0;
}

.ecPointRetrait-adresse {}
.ecPointRetrait-distance {}
.ecPointRetrait-info {}
.ecPointRetrait-horaires .ecTable {}

.ecPointRetrait-carte {float: left; display: none;}
.ecPointRetrait-carte a:before {
    content : "\f041";
    padding-right : 5px;
    font-family : "Font Awesome 5 Free";
    font-size: 140%;
    line-height: 1;
}

.ecMarkerGetHoraires {}
.ecMarkerSelectPoint {}

/* offres (modes et points retraits) */

.ecCustomRadio input {
    opacity: 0;
    position: absolute;
}

.ecCustomRadio input, .ecCustomRadio span {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.ecCustomRadio input + span::before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 3ex;
    height: 3ex;
    padding: 2px;
    margin-right: 10px;
    /*text-align: center;*/
}

.ecCustomRadio input + span::before {border-radius: 50%}

.ecCustomRadio input:checked + span::before {
    background: #ccc;
    box-shadow: 0px 0px 0px 4px #FFF inset;
}

.ecCustomRadio.ecCustomRadio-retrait {padding-left: 5ex}
.ecCustomRadio.ecCustomRadio-retrait input + span::before {margin-left: -5ex}

.ecExpeditionOption-erreur {color: red}

.ecExpeditionPicto {vertical-align: middle}

.cn_phone .ecPointsRetrait-carte #map{display : none;}

.mfp-content #map {
    background: #fff none repeat scroll 0 0;
    height: 350px;
    margin: 20px auto;
    max-width: 600px;
    padding: 10px;
    position: relative;
    width: auto;
}


.bg_noir [data-erreur]::before,
.bg_beton_noir [data-erreur]::before {
    border-radius: 0.5ex;
    padding: 2px 4px;
    background: var(--color-alerte);
    color: white;
}

#m-nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    /*height: 120px;*/
    overscroll-behavior-y: contain;
    /*overflow-y: auto;*/
}

.m-nav-head {
    padding: var(--demi-espace);
    background-color: #303030;
    color: white;
}

    .m-nav-head > .text_center {font-size: 0.75rem;}

.m-nav-block > div {
    display: flex;
    gap: var(--espace);
    align-items: center;
}

.m-nav__checkbox {display: none}
.m-nav__toggle {cursor: pointer}

.m-nav {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 450px;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    /*transform: translate3d(-450px, 0, 0);*/
    /*transform: translate(-450px);*/
    /*transition: transform 0.35s;*/
    z-index: 1;
    background-color: #303030;
    display: none;
}

.m-nav__overlay {
    background-color: rgba(103, 103, 103, 0.5);
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: 1;
    display: none;
}

.m-nav__header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    padding: var(--espace);
}


.m-nav__title {
    width: 100%;
    font-weight: bold;
    text-align: center;
}
.m-nav__site,
.m-nav__title {color: white}

/*.m-nav .m-nav {transform: translate3d(480px, 0, 0)}*/
/*.m-nav .m-nav {transform: translate(480px)}*/

.m-items {
    padding-top: 80px
}

.m-items a,
.m-items label {
    display: block;
    padding: var(--demi-espace) var(--espace);
    text-decoration: none;
    color: black;
    cursor: pointer;
    border-bottom: 1px solid #484747;
    position: relative;
    color: white;
}

.m-item-gout {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 10px 0;
    padding-left: 100px!important;
    height: 75px;
    line-height: 60px;
}

.a-label__chevron::after {
    content: "";
    position: absolute;
    display: inline-block;
    height: 10px;
    width: 10px;
    border-color: #333;
    border-style: solid;
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
    top: 50%;
    margin-top: -5px;
    right: var(--espace);
}

.m-nav .m-nav label.m-nav__toggle {
    display: flex;
    border-bottom: 0;
    padding: 0;
    box-sizing: content-box;
}

.m-nav__checkbox:checked ~ .m-nav__overlay {display: block}
.m-nav__checkbox:checked ~ .m-nav {
    overflow-y: auto;
    /*transform: translate3d(0, 0, 0)*/
    /*transform: translate(0);*/
    display: block;
}

.star-ratings-css {
    unicode-bidi: bidi-override;
    color: #BFCAD6;
    font-size: 2rem;
    display: inline-block;
    position: relative;
  }

  .star-ratings-css-top {
    color: #FC951D;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  .descriptifRubrique,
  .descriptifRubrique2 {
      font-size: 0.85rem;
  }

.descriptifRubrique h2,
.descriptifRubrique2 h2 {
    font-size: 1.5rem;
}

.descriptifRubrique h2 {
    column-span: all;
}

.steep-offert {
    padding-left: 110px;
}

.steep-offert img {
    width: 100px; transform: translateX(-110px) translateY(-40px); position: absolute;
}

.finder.vscomp-ele {
    max-width: none;
}

.finder .vscomp-wrapper {font-size: inherit}
.finder .vscomp-toggle-button {
	border: none;
	padding: 7px 30px;
	background-image: url(/style/picto-loupe.png);
	background-repeat: no-repeat;
	background-position: 4px center;
}

@media screen and (min-width:48rem) {
    
    .finder.vscomp-ele {
        width: auto;
        max-width: 250px;
    }
    
    .finder .vscomp-toggle-button {
	    border-radius: 1.5ex;
    }

}

#newsletter-popup{
    position: relative;
    background: #FFF;
    padding: 0px;
    width: auto;
    max-width: 900px;
    margin: 20px auto;
    color: black;
}

.erreur_popup {
    color : #a2311d;
}
.erreur_popup::before{
    content : '\f06a';
    font-family: FontAwesome;
    color : #a2311d;
    padding-right : 5px;
    font-style: normal;
}

@media screen and (max-width:36rem) {

	.steep-offert {
		padding-left: 0;
	}

	.steep-offert img {
		display: none;
	}
	
	[class*="padd05_"] {--padd: var(--quart-espace)}
    [class*="padd_"] {--padd: var(--demi-espace)}
    [class*="padd2_"] {--padd: var(--espace)}
    [class*="padd3_"] {--padd: var(--double-espace)}
	
}

.vscomp-wrapper,
.vscomp-dropbox-container {z-index: 1000!important;}

#slider {
    visibility: hidden;
    min-height: max(calc(100vw * 490.0 / 1800.0),200px);
}

.slide-content {
    display: block;
    width: 100%;
    /*min-height: 324px;*/
    height:calc(100vw * 490.0 / 1800.0);
    background-repeat: no-repeat;
    background-size: contain;
}


#info-port-gratuit {
    padding: 0.5ex;
    font-size: 80%;
}

.nav-panier::after {
    content: attr(data-articles);
    display: inline-block;
    border-radius: 50%;
    padding: 0.25ex 0.5ex;
    font-size: 0.75rem;
    line-height: 1;
    background: white;
    color: black;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    top: 0;
    right: 0;
}


.favori span {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    text-rendering: auto;
    line-height: 1;
}
.btn.favori:focus {
    color: var(--color-default);
    background: var(--color-default-hover);
}
.favori span::before {content: "\f004"; color: red;}
.favori.marked span {font-weight: 900;}

@media screen and (min-width:1200px) {
    .fond_eliquides.fond1 {background: transparent url(/style/fond/fond-kdo.jpg) no-repeat center 146px fixed}
    .fond_eliquides.fond2 {background: transparent url(/style/fond/fond-res.jpg) no-repeat center 146px fixed}
}

.slide {min-width: 100%}