@charset "UTF-8";

/* icons */
@font-face {
    font-family: "ficons";
    src: url("../fonts/icons/icomoon.eot");
    src: url("../fonts/icons/icomoon.eot?") format("embedded-opentype"),
    url("../fonts/icons/icomoon.woff") format("woff"),
    url("../fonts/icons/icomoon.ttf") format("truetype"),
    url("../fonts/icons/icomoon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.icons-chevron-right:before {
    content: "\e972";
}
.icons-chevron-left:before {
    content: "\e973";
}
.icons-chevron-up:before {
    content: "\e971";
}
.icons-filter:before {
    content: "\e92f";
}

/* general */
:root {
    /* couleurs */
    --white: #ffffff;
    --grey: #d6d6d6;
    --grey2: #868686;
    --grey3: #535455;
    --grey4: #292b2c;
    --blue1: #1c3b6a;
    --blue2: #3563b8;
    --blue3: #4576d1;
    --blue4: #d7e0f1;
    --red: #c7032d;
    --red2: #a80327;
    --gold: #c89909;
    --gold2: #b18606;

    /*  espacement */
    --m0: 0rem;
    --m1: 0.063rem;
    --m2: 0.125rem;
    --m3: 0.188rem;
    --m4: 0.25rem;
    --m6: 0.375rem;
    --m8: 0.5rem;
    --m10: 0.625rem;
    --m12: 0.75rem;
    --m14: 0.875rem;
    --m16: 1rem;
    --m18: 1.125rem;
    --m20: 1.25rem;
    --m24: 1.5rem;
    --m22: 1.375rem;
    --m26: 1.625rem;
    --m30: 1.875rem;
    --m32: 2rem;
    --m34: 2.125rem;
    --m36: 2.25rem;
    --m38: 2.375rem;
    --m40: 2.5rem;
    --m42: 2.625rem;
    --m46: 2.875rem;
    --m48: 3rem;
    --m50: 3.125rem;
    --m52: 3.25rem;
    --m54: 3.375rem;
    --m56: 3.5rem;
    --m58: 3.625rem;
    --m60: 3.75rem;
    --m64: 4rem;
    --m80: 5rem;
    --m96: 6rem;
    --m100: 6.25rem;
    --m120: 7.5rem;
    --m130: 8.125rem;
    --m167: 10.438rem;
    --m200: 12.5rem;
    --m640: 40rem;

}

html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    scroll-behavior: smooth;
    scrollbar-color: var(--obsidian) var(--obsidian-medium);
    scrollbar-width: thin;
}

body {
    min-height: 100%;
    overflow-x: hidden;
}

.banner-mcc-privilege{
    width:100px;
}

.fa {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: "ficons";
    font-size: inherit;
    line-height: 1;
    font-weight: normal;
    color: inherit;
    text-align: center;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    margin: 0;
    border: none;
    background: none;
}

/* texte */
.tright {
    text-align: right;
}

/* btn */
.btn2 {
    font-family: 'montserrat';
    font-size: var(--m14);
    font-weight: 600;
    color: var(--blue2);
    text-transform: uppercase;
    padding: var(--m6);
    border: solid var(--m2) var(--blue2);
    cursor: pointer;
    transition: all 0.2s linear;
    background: transparent;
}
.btn2:hover {
    color: var(--white);
    background: var(--blue2);
}

/* menu */
#header {
    position: relative;
    border-top: solid var(--m3) var(--gold);
    z-index: 1000;
}

/* top bar */
#topnavbar {
    position: relative;
    z-index: 1;
}
#topnavbar > div {
    width: 100%;
    max-width: 1710px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: var(--m30);
    margin: auto;
    padding: 0 var(--m24);
}
#topnavbar > div .right-header-top {
    display: flex;
    flex-direction: row;
    gap: var(--m20);
    margin-left: auto !important;
    margin-bottom: var(--m20) !important;
    order: 2;
}
#topnavbar > div .right-header-top .pointeur {
    display: flex !important;
    align-items: center;
    gap: var(--m4);
    cursor: pointer;
    transition: all 0.3s linear;
}
#topnavbar > div .right-header-top #mobile-cart {
    display: none !important;
}
#topnavbar > div .right-header-top .pointeur img {
    margin: 0 !important;
}
#topnavbar > div .right-header-top .pointeur img.avatar {
    margin-right: 5px !important;
}
.login p {
    margin: 0 !important;
}
#topnavbar > div .right-header-top ,
#headercart td {
    font-family: 'Oswald', sans-serif;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--grey4);
    margin: 0;
    transition: all 0.3s linear;
}
#topnavbar > div .right-header-top .pointeur:hover p {
    color: var(--grey3);
}
.qte-panier {
    color: var(--white) !important;
    font-weight: 600;
    border-radius: 50%;
    background: var(--red);
}

/* search menu */
.modsearchheader {
    display: flex;
    flex-direction: row;
    gap: var(--m24);
    margin-bottom: var(--m12);
}
.search-header .full-search-input {
    padding: 0;
    border-radius: 0;
}
.search-header .full-search-input input {
    width: 100%;
    height: 100%;
    font-size: var(--m16);
    line-height: 1;
    margin: 0;
    padding: 0 0 0 25px;
    background: transparent;
}

/* menu open */
.btnmenuopen {
    display: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--m8);
    color: var(--white);
    cursor: pointer;
    transition: all 0.3s ease-out;
}
.btnmenuopen:hover {
    opacity: 0.7;
}
.btnmenuopen p {
    font-size: 1.25rem;
    text-transform: uppercase;
    margin: 0;
}
.menuopen {
    width: var(--m20);
    height: var(--m16);
    position: relative;
}
.menuopen::before,
.menuopen::after,
.menuopen span {
    width: 100%;
    height: var(--m2);
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: var(--m4);
    will-change: transform;
    background: var(--white);
    transition: all 0.3s ease-out;
}
.menuopen::after {
    bottom: 0;
}
.menuopen::before {
    top: 50%;
    transform: translateY(-50%);
}

/* menu */
#navbar ul {
    list-style: none;
}
.menumobile {
    display: none;
}
#menu {
    width: 100%;
    display: flex;
    overflow: auto;
    padding: .25rem var(--m24);
    background: var(--blue1);
}
.contentmenu {
    width: 100%;
    max-width: 1710px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--m4);
    margin: auto;
}
.menu,
.menuoffresspe,
.menuoffreavantages {
    display: flex;
    align-items: center;
    gap: var(--m4);
    margin: 0;
}
.menu > li > a,
.menuoffresspe > li > *,
.menuoffreavantages a,
.menuoffreavantages span.obflink {
    min-height: var(--m54);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--m6);
    font-family: 'Oswald';
    font-size: 1.063rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--white);
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: .7rem;
    transition: all 0.3s linear;
}
.menu > li > a:hover {
    opacity: 0.8;
}
.menu > li > a b,
.menuoffresspe>li>* b,
.menuoffreavantages>* b {
    font-weight: 600;
}
.menu>li.linkclassic {
    margin-left: var(--m10);
}
.menu > li.linkclassic > a {
    position: relative;
    padding: 7px 17px;
}
.menu>li.linkclassic>a::before {
    content: '';
    width: 1px;
    height: 70%;
    position: absolute;
    left: 0;
    top: 15%;
    background: var(--white);
}
.menu>li.linkclassic>a img {
    height: var(--m24);
}

#menuoffres {
    display: flex;
    flex: 1 1 auto;
    gap: var(--m4);
}
.menuoffresspe li {
    margin: 0 !important;
}

.menuoffreavantages {
    margin-left: auto;
}
.menuoffreavantages:hover a {
    display: flex;
}
.menuoffreavantages p {
    color: var(--white);
    margin: 0;
}
.menuoffreavantages img {
    margin: 0 !important;
}
.menuoffreavantages > * {
    cursor: pointer;
   /* background: var(--blue2);*/
    background:var(--blue1);
    transition: all 0.3s linear;
}
.menuoffreavantages>*:hover {
    background: var(--blue3);
}

.li-privileges{
    background: var(--blue3)!important;
}

.li-privileges>*:hover{
    background:var(--blue2)!important;
}

.menuoffreavantages .d-inline a,
.menuoffreavantages .d-inline span {
    display: flex !important;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--m8);
}
.menuoffreavantages .d-inline p {
    color: var(--white);
    margin: 0;
}
.menuoffreavantages .d-inline img {
    margin: 0 !important;
}
.menuoffreavantages .infosbtn {
    line-height: 1;
}

#header .obflink:not(.bg-bleu-fonce) {
   /* display: flex !important;*/
    justify-content: flex-start;
    align-items: center;
    gap: var(--m8);
}

#header .obflink p {
    /*    line-height: 14px;*/
    margin: 0;
}
#header .obflink p span {
    margin-top: 4px;
}

#header .no-account .obflink.bg-bleu-fonce {
    margin: 10px 0;
    display: inline-block;
}
#header .no-account>div>span {
    justify-content: center !important;
}

.mobile {
    display: none;
}
.thelp {
    font-family: Montserrat, sans-serif;
    font-size: .875rem;
    line-height: 1;
    color: var(--grey4);
    text-transform: uppercase;
    margin: 0 auto;
}
.linkhelp {
    text-align: center;
    margin: 0;
}
.linkhelp .icon {
    color: var(--blue2);
    padding: 0 !important;
}
.linkhelp a {
    font-family: 'Oswald', sans-serif;
    font-size: .875rem;
    color: var(--blue2);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.select-lang {
    position: absolute;
    top: var(--m10);
    right: var(--m12);
    z-index: 10;
}
.dropdown-menu {
    display: none;
}
#contactlang,
#topmenu {
    width: calc(100% - 200px);
    max-width: 1526px;
    display: flex;
    justify-content: space-between;
    margin-left: 4.4vw;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
#contactlang {
    z-index: 100;
}
#topmenu {
    padding: var(--m12) 0 var(--m10);
    border-bottom: 1px solid #cfd4df;
    z-index: 10;
}
.topmenu {
    display: flex;
    gap: var(--m30);
    margin: 0;
}
.topmenu a, .topmenu span {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--blue1);
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s linear;
}
.topmenu a:hover,
.topmenu span:hover {
    color: var(--blue2);
}

.social-media {
    display: flex;
    gap: var(--m6);
    padding-right: var(--m80);
}

.nav-item {
    transition: all 0.3s linear;
}
.nav-item.bg-gold:hover {
    background-color: var(--gold2);
}
.nav-item.bg-rouge:hover {
    background-color: var(--red2);
}



/* mega menu */
.modmegamenu {
    width: 100%;
    display: none;
    flex-direction: row;
    gap: var(--m18);
    position: absolute;
    left: 0;
    right: 0;
    top: 191px;
    padding: var(--m24);
    border-bottom: solid var(--m3) var(--gold);
    z-index: 100;
    background: var(--white);
}
.menu > li.hovermenu .modmegamenu {
    display: flex;
}
.sectionsmegamenu {
    flex: 1 1 auto;
    column-gap: var(--m24);
    column-count: 5;
}
.sectionpromo {
    flex: 0 1 auto;
}

.blocmegamenu {
    break-inside: avoid;
    page-break-inside: avoid;
    padding-bottom: var(--m12);
}
.blocmegamenu > a {
    display: block;
    font-family: Oswald;
    font-size: var(--m16);
    font-weight: 500;
    color: var(--blue1);
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    margin: 0 0 var(--m10);
    padding: 0 0 var(--m2);
    border-bottom: solid var(--m1) var(--grey);
    transition: all 0.3s linear;
}
.blocmegamenu > a.mobile {
    display: none;
}
.blocmegamenu>a span {
    display:inline-block;
    position: relative;
}
.blocmegamenu > a span::before {
    content: "";
    width: 100%;
    height: 2px;
    display: block;
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--m3));
    background: var(--gold);
}
.blocmegamenu > a:hover {
    color: var(--blue2);
}

.submegamenu {
    padding-left: var(--m14);
}
.submegamenu li::before {
    font-family: 'icomoon';
    content: '\ec6b';
    margin: 0 2px 0-15px;
    font-size: .5rem;
}
.submegamenu li a {
    display: initial;
    font-size: var(--m10);
    line-height: 1;
    font-weight: 700;
    color: var(--blue2)!important;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
}
.submegamenu li a::before {
    content: "";
    width: 100%;
    height: var(--m1);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    background: var(--blue2);
    transition: all 0.3s linear;
}
.submegamenu li a:hover::before {
    opacity: 1;
}
.blocmegamenu.opensubmegamenu .submegamenu {
    transform: translate(0, 0);
    z-index: 100;
}

/* submenu */
.modsubmenu {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--m6);
}
.modsubmenu .fa {
    width: var(--m24);
    height: var(--m24);
    display: none;
    font-size: var(--m20);
    font-weight: 900;
    color: var(--grey2);
    cursor: pointer;
    transition: all 0.3s linear;
}
.modsubmenu .fa:hover {
    color: var(--grey);
}
.modsubmenu.mobile .fa {
    display: block;
}
.modsubmenu.mobile .listesubmenu {
    overflow-x: auto;
    scroll-behavior: smooth;
}
.modsubmenu .listesubmenu {
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex: 1 1 auto;
    gap: var(--m12);
    list-style-type: none;
    margin: 0;
    padding: var(--m6) 0;
    overflow-x: hidden;
}

.modsubmenu .listesubmenu li a {
    display: block;
    font-size: var(--m14);
    font-weight: 600;
    color: var(--blue2);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    padding: var(--m10) var(--m16);
    border: solid var(--m1) var(--grey);
    transition: all 0.3s linear;
}
.modsubmenu .listesubmenu li a:hover,
.modsubmenu .listesubmenu li.active a,
.modsubmenu .listesubmenu li.active a:hover {
    color: var(--white);
    border-color: var(--blue2);
    background-color: var(--blue2);
}

/* slider produits */
.slider .slick-track {
    display: flex;
    flex-direction: row;
}

.slider .slick-slide>div,
.slider .slick-slide>div>div {
    height: 100%;
    padding-bottom: 15px;
}

.category-level-3 {
    width: calc(100% - 1.5%);
}
.category-level-3 .slick-track {
    display: flex !important;
    flex-direction: row;
}

.category-level-3 .slick-track .slick-slide>div,
.category-level-3 .slick-track .slick-slide>div>div {
    height: 100%;
}

/* promo */
.vignettes .sliderpromo {
    height: 100% !important;
    padding: 0;
}
.sliderpromo {
    width: 100%;
    max-width: 910px;
    /*height: calc(100% - 15px) !important;*/
    position: relative;
    overflow: hidden;
    margin: auto;
    /*padding-bottom: 15px;*/
}
.sliderpromo .slick-list {
    height: 100%;
    padding: 15px 0;
    box-shadow: 0 1px 9px 0 rgba(0, 0, 0, .2);
}
.sliderpromo .slick-track,
.sliderpromo .slick-track * {
    height: 100%;
}

.sliderpromo .slick-slide,
.sliderpromo .slick-slide * {
    padding: 0 !important;
}

.sliderpromo .col {
    padding: 0;
}
.sliderpromo .slick-track {
/*    min-width: 48vw;*/
    min-width: 25vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sliderpromo .slick-track img {
    width: 100%;
    object-fit: cover;
}
.sliderpromo .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translate(-50%, 0ù);
    font-size: 0;
    border: none;
    z-index: 10;
    background: transparent;
}
/*
.sliderpromo .slick-arrow::after {
  font-family: "ficons";
  font-size: var(--m24);
  font-weight: 900;
  color: var(--grey);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  opacity: 1;
}*/
.sliderpromo .slick-prev {
    left: 0;
}
.sliderpromo .slick-prev::after {
    content: '\e973';
}
.sliderpromo .slick-next {
    right: 0;
}
.sliderpromo .slick-next::after {
     content: '\e972';
}

.publicite {
    display: block !important;
}

.slick-dots {
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: absolute;
    bottom: var(--m24);
    left: 50%;
    transform: translate(0, -50%);
    list-style-type: none;
}
.slick-dots li {
    margin: 0;
}
.slick-dots li button {
    width: 14px;
    height: 14px;
    font-size: 0 !important;
    border: solid 2px #fff !important;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    cursor: pointer !important;
    background: var(--grey2);
    transition: all 0.3s linear;
}
.slick-dots li button::before {
    display: none;
}
.slick-dots li button:hover {
    background: var(--blue2);
}

.slick-dots li.slick-active button {
    background: var(--blue1);
}

/* grille produits */
#products-list .row.vignettes {
    display: grid;
    grid-template-columns: repeat(6, minmax(200px, 1fr));
}
#products-list .row.vignettes > a {
    display: none;
}
#products-list .row.vignettes>div {
    width: 100% !important;
    flex: inherit !important;
    max-width: inherit;
}

.slick-slide>div,
.slick-slide>div>div {
    padding: 0 !important;
}

.sliderpromo {
    grid-column: span 2;
}
.sliderpromo .containers,
.sliderpromo .containers .rows,
.sliderpromo .containers .sliderpromo,
.sliderpromo .containers .slick-list,
.sliderpromo .containers .slick-list * {
    height: 100%;
}

.category-level-3 .slick-slide {
    width: calc((20% - 20px) / 6);
}

.category-level-3 .sliderpromo {
    height: calc(100% - 30px) !important;
    margin-top: 15px;
    padding: 0;
}
.category-level-3 .sliderpromo img {
    aspect-ratio: 910/403;
}

.category-level-3 .sliderpromo .slick-list {
    padding: 0 !important;
}

.category-level-3>.slick-list>.slick-track>.slick-slide {
    flex: 0 0 calc((100vw / 6) - 1.1vw) !important;
}

.category-level-3 .slick-track {
    display: flex !important;
}

@media screen and (max-width: 1600px) {
    .row.vignettes {
        grid-template-columns: repeat(4, minmax(200px, 1fr));
    }
    .category-level-3>.slick-list>.slick-track>.slick-slide {
        flex: 0 0 calc((100vw / 4) - 1.1vw) !important;
    }
    .slick-slide.pub-resize {
        width: 46vw !important;
    }

    #products-list .row.vignettes {
        grid-template-columns: repeat(5, minmax(200px, 1fr));
    }

}

@media screen and (max-width: 1380px) {
    .row.vignettes {
        grid-template-columns: repeat(4, minmax(200px, 1fr));
    }
    .category-level-3>.slick-list>.slick-track>.slick-slide {
        flex: 0 0 calc((100vw / 4) - 1.1vw) !important;
    }
    .slick-slide.pub-resize {
        width: 46vw !important;
    }

    #products-list .row.vignettes {
        grid-template-columns: repeat(5, minmax(200px, 1fr));
    }

}
@media screen and (max-width: 1034px) {
    .row.vignettes {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
    .category-level-3>.slick-list>.slick-track>.slick-slide {
        flex: 0 0 calc((100vw / 3) - 1.1vw) !important;
    }
    .slick-slide.pub-resize {
        width: 58vw !important;
    }

    #products-list .row.vignettes {
        grid-template-columns: repeat(5, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 680px) {
    .row.vignettes {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .category-level-3>.slick-list>.slick-track>.slick-slide {
        flex: 0 0 calc((100vw / 2) - 1.1vw) !important;
    }
    .row.vignettes .sliderpromo,
    .row.vignettes .sslider {
        order: -1;
    }
    .vignettes .slick-dotted.slick-slider {
        padding-bottom: 30px !important;
    }
    .slick-slide.pub-resize {
        width: 99vw !important;
        order: -1;
    }
    #products-list .row.vignettes {
        grid-template-columns: repeat(5, minmax(200px, 1fr));
    }
}


/* fiche produits */
.vignette-produit {
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
    padding-bottom: 15px;
}
.vignette-produit:hover .desc-vignette-produit {
    margin-top: -29px !important;
}
.vignette-produit:hover .infosprix a {
    position: absolute;
    bottom: 0 !important;
    width: 100%;
}

.desc-vignette-produit {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.desc-vignette-produit::after {
    content: '';
    display: block;
    width: 90%;
    height: 1px;
    position: absolute;
    left: 5%;
    bottom: 0;
    background: #98a5bd;
}
.desc-vignette-produit > img {
    position: absolute;
    transform: translate(0%, calc(-100% - 12px));
}

/* vignettes */
.vignettes.n2 > div {
    flex: 0 0 16.6%;
    max-width: 16.6%;
    min-width: 180px;
}

/* modal */
.modmodal {
    display: inline-block;
    position: relative;
    z-index: 20;
}

.modmodal .action {
    display: inline-block;
    font-family: "oswald";
    font-size: var(--m18);
    font-weight: 500;
    color: var(--blue1);
    text-transform: uppercase;
    padding: var(--m6);
    border: solid var(--m1) var(--grey);
    line-height: 1;
    cursor: pointer;
    margin: 0;
}

.modmodal .modal {
    width: 100vw;
    max-width: 380px;
    height: auto;
    display: none;
    padding: var(--m16) !important;
    position: absolute;
    top: inherit;
    bottom: -4px;
    left: inherit;
    right: 0;
    border: solid var(--m1) var(--grey);
    box-shadow: 0 0 var(--m8);
    transform: translate(0%, 100%);
    background: var(--white);
    z-index: 9000;
}

.modmodal.active .modal {
    display: block;
}

.modmodal .action span {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--m4);
    position: relative;
    padding-right: var(--m14);

}

.modmodal .action span i {
    font-size: var(--m24);
}
.modmodal .action .counter {
    width: var(--m14);
    height: var(--m14);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: var(--m0);
    top: var(--m0);
    font-size: var(--m8);
    line-height: 1;
    color: var(--white);
    padding: var(--m2);
    border-radius: 50%;
    visibility: hidden;
    background: var(--red);
}
.modmodal .action .counter.is-visible {
    visibility: visible;
}
.modmodal .blocfilters #filters {
    margin-bottom: auto !important;
    padding: 0 0 0 0;
    border-bottom: none !important;
}
.panel-right .readall-wrapper {
    margin-bottom: 1rem;
}

.modmodal .titlefliter {
    font-family: 'montserrat';
    font-size: var(--m16);
    font-weight: 600;
    color: var(--blue2);
    text-align: left;
    text-transform: uppercase;
    position: relative;
    margin: 0 0 var(--m10);
    padding: 0 0 var(--m2);
    border-bottom: solid var(--m1) var(--grey);
}

.modmodal .titlefliter::before {
    content: "";
    width: 25%;
    height: 2px;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--gold);
}

.modmodal .modcheckbox {
    font-size: var(--m14);
    color: var(--blue2);
    text-align: left;
}

.modmodal .blocfilters {
    margin-bottom: var(--m16);
}

/* titre section */
#categorie-2 h2 {
    position: relative;
    border-bottom: none;
}
.underline::before {
    content: '';
    display: block;
    height: 3px;
    background: #1f3a6d;
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 134px);
}
.selected_filters_list {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -22px;
}

/* checkbox */
.modcheckbox {
    margin: 0;
}
.modcheckbox input[type="checkbox"] {
    display: none;
}

.modcheckbox input[type="checkbox"]:checked+label .check {
    border-color: var(--fern);
    background: var(--fern);
}

.modcheckbox input[type="checkbox"]:checked+label .check::before {
    opacity: 1;
}

.modcheckbox label {
    display: inline-flex !important;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: var(--m8);
    font-size: var(--m14);
    font-weight: 300;
    line-height: 1.5;
    color: var(--blue2);
    margin: 0 !important;
    padding: 0;
    cursor: pointer;
}
.modcheckbox label .check {
    width: var(--m16);
    height: var(--m16);
    flex: 0 0 var(--m16);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: solid var(--m1) var(--grey);
    border-radius: var(--m2);
    background: transparent;
    transition: all 0.3s linear;
}
.modcheckbox label .check::before {
    font-family: 'ficons';
    content: '\e903';
    font-size: var(--txt);
    font-weight: 900;
    color: var(--snow);
    opacity: 0;
    transition: all 0.3s linear;
}

/* up */
.up {
    width: var(--m46);
    height: var(--m46);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--m20);
    font-weight: 900;
    color: var(--white);
    text-decoration: none;
    position: fixed;
    bottom: var(--m20);
    right: var(--m20);
    border-radius: 50%;
    border: solid var(--m4) var(--white);
    box-shadow: 0 0 4px var(--grey);
    cursor: pointer;
    z-index: 10;
    background: var(--blue2);
    transition: all 0.3s linear;
}
.up:hover {
    box-shadow: 0 0 0px var(--grey);
}

.menuoffreavantages .li-privileges .infosbtn {
    display: none !important;
}


/* responsive */

/* 1380 */
@media screen and (max-width:86.25rem) {

    .menuoffreavantages .li-privileges .infosbtn {
        display: block !important;
    }


    #header {
        border: none;
        position: relative;
        margin-bottom: var(--m58);
    }
    #header .desktop {
        z-index: 20;
    }
    #header .desktop {
        display: none;
    }

    #header .mobile {
        display: block;
    }
    #topnavbar {
        min-height: 53px;
        border-top: solid var(--m3) var(--gold);
        z-index: 101;
        background: var(--blue1);
    }
    #topnavbar>div {
        justify-content: space-between;
        align-items: center;
        padding: var(--m12) var(--m24);
    }
    #topnavbar > div .right-header-top {
        margin: 0 !important;
    }

    .login.mr-4.dropdown {
        margin: 0 !important;
    }
    .login td {
        font-size: 0;
        color: var(--white);
    }
    .login td span {
        display: none;
    }
    #headercart>tbody>tr>td:last-child {
        display: none;
    }
    .qte-panier {
        top: 13px !important;
        right: -5px !important;
    }

    .btnmenuopen {
        display: flex;
    }
    .menumobile {
        display: block;
    }
    .logoheader {
        width: 65px;
        margin-bottom: -20px;
        position: absolute;
        top: var(--m2);
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 10;
    }
    .logoheader img {
        width: 65px;
        margin-bottom: -20px;
        border-radius: 100px;
        box-shadow: 0 0 5px 1px #0000008f;
    }
    #topnavbar>div .right-header-top .pointeur img {
        width: var(--m32);
    }
    #topnavbar>div .right-header-top .pointeur img:not(.avatar) {
        filter: brightness(0) saturate(100%) invert(99%) sepia(3%) saturate(521%) hue-rotate(232deg) brightness(119%) contrast(100%);
    }
    #topnavbar>div .right-header-top .pointeur p:not(.qte-panier) {
        display: none;
    }
    #topnavbar>div .right-header-top .pointeur p.qte-panier {
        width: var(--m14);
        height: var(--m14);
        font-size: var(--m8);
        right: 0;
    }

    #contactlang {
        width: 100%;
        padding: var(--m20) var(--m24);
        border-bottom: 1px solid #d0d4dd;
    }
    #contactlang .thelp {
        display: none;
    }
    .select-lang {
        position: relative;
        top: inherit;
        right: inherit;
    }
    .select-lang ul {
        width: auto;
    }
    .select-lang a {
        height: 18px;
    }
    .select-lang .dropdown-toggle {
        display: none;
    }
    #navbar .select-lang .dropdown-menu {
        display: flex;
        position: relative;
        padding: 0;
        box-shadow: inherit;
    }
    .select-lang a {
        min-width: auto;
    }

    #menu {
        display: block;
        position: fixed;
        top: 53px;
        bottom: 0;
        padding: 0;
        z-index: 100;
        overflow: auto;
        transform: translate(0%, -115%);
        background: var(--white);
        transition: all 0.3s linear;
    }

    /* ouverture menu */
    .openmenu {
        overflow: hidden;
    }
    .openmenu #header {
        width: 100%;
        position: fixed;
    }
    .openmenu #menu {
        transform: translate(0%, 0%);
    }
    .openmenu #header .menuopen span {
        transform: rotate(-45deg) translateX(-36%) translateY(50%);
    }
    .openmenu #header .menuopen::before {
        display: none;
    }
    .openmenu #header .menuopen::after {
        transform: rotate(45deg) translateX(-50%) translateY(-100%);
    }

    .contentmenu, .menu,
    .menuoffresspe,
    .menuoffreavantages,
    #menuoffres, #topmenu, .topmenu {
        flex-direction: column;
        justify-content: inherit;
        align-items: inherit;
    }
    #contactlang, #topmenu {
        width: 100%;
        margin-left: inherit;
        position: relative;
        top: inherit;
        left: inherit;
        transform: inherit;
    }
    #topnavbar > .rows {
        min-height: 53px;
        position: relative;
    }
    .modsearchheader {
        width: 100%;
        margin: 0;
        padding: 5px 20px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        transform: translate(0%, 100%);
        background: #e0e3ea;
    }
    .search-header,
    .search-header .full-search-input {
        width: 100%;
    }
    .search-header .full-search-input {
        max-width: 320px;
        margin: auto;
        background-color: var(--white);
    }

    .menu li {
        position: relative;
    }
    .menu li, #menuoffres {
        padding: 0 var(--m8);
    }
    #menuoffres {
        padding: var(--m6) var(--m16) var(--m8);
        border-bottom: 1px solid #d0d4dd;
    }
    .menu > li > a, .menuoffresspe > li > *, .menuoffreavantages a,
    .menuoffreavantages span.obflink {
        min-height: var(--m42);
        gap: var(--m2);
        font-size: var(--m12);
    }
    .menu, .menuoffresspe, .menuoffreavantages, #menuoffres {
        gap: var(--m2);
    }
    .menu > li > a, .menuoffresspe > li > *, .menuoffreavantages a,
    .menuoffreavantages span {
        justify-content: flex-start !important;
    }
    .menuoffreavantages img {
        display: none;
    }
    .menuoffreavantages p {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: var(--m4);
        color: var(--white);
        margin: 0 !important;
    }
    .menu > li > a {
        position: relative;
        font-size: var(--m14);
        color: var(--blue1);
        border-bottom: 1px solid #d0d4dd;
    }
    .menu > li.linkclassic {
        margin-left: 0;
    }

    .menu > li.sublinkmenu a::after {
        font-family: 'ficons';
        content: '\e972';
        font-size: var(--m14);
        font-weight: 600;
        color: var(--blue2);
        position: absolute;
        top: 50%;
        right: var(--m6);
        transform: translate(0%, -50%);
    }
    .hovermenu {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
    }

    .menu > li.linkclassic > a::before {
        display: none;
    }
    .menuoffreavantages {
        margin-left: 0;
    }
    #header .obflink img {
        display: none;
    }
    .infosbtn {
        font-weight: 500;
    }
    .infosbtn br {
        display: none;
    }

    #topmenu {
        padding: 0;
    }
    .topmenu {
        gap: var(--m2);
        padding: 0 var(--m6);
    }
    .topmenu li:not(:last-child) {
        border-bottom: 1px solid #d0d4dd;
    }
    .topmenu li a,
    .topmenu li span {
        height: var(--m42);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: var(--m10);
        padding: .7rem;
    }
    .topmenu li.bigmenu a {
        font-size: var(--m12);
    }
    .social-media {
        height: var(--m42);
        margin: 0 !important;
        padding: 0 var(--m16);
        border-top: 1px solid #d0d4dd;
    }

    header .panier button {
        display: inline-block !important;
        width: 32px;
    }

    .openmenu .modsearchheader {
        display: none;
    }

    .back,
    .supcat {
        width: 100%;
        min-height: var(--m42);
        font-size: var(--m14);
        display: flex !important;
        justify-content: flex-start;
        align-items: center;
        gap: var(--m4);
        position: relative;
        font-family: 'oswald';
        font-weight: 600;
        color: var(--blue2);
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
        padding: .7rem;
        border: none;
        background: var(--white);
    }

    .supcat {
        font-size: var(--m18);
        font-weight: 800;
        color: var(--blue1);
        padding: .7rem !important;
        background: var(--blue4);
    }
    .supcat::after {
        font-family: 'oswald' !important;
        content: 'Tout voir' !important;
        font-size: var(--m12) !important;
        font-weight: 500 !important;
    }
    .blocmegamenu {
        position: relative;
        padding-bottom: var(--m0);
    }
    .blocmegamenu > a,
    .submegamenu a {
        min-height: var(--m42);
        display: block;
        line-height: 1;
        margin: 0;
        padding: .7rem;

        span::before {
            display: none;
        }
    }
    .blocmegamenu > a.mobile {
        display: block;
    }
    .blocmegamenu > a::before {
        display: none;
    }

    .submegamenu {
        width: 100%;
        display: block;
        padding: 0;
        position: fixed;
        top: 0px;
        bottom: 0;
        left: 0;
        overflow: auto;
        background: var(--white);
        transform: translate(-100%, 0);
        z-index: 1;
        transition: all 0.3s linear;
    }
    .blocmegamenu.opensubmenu .submegamenu {
        transform: translate(0%, 0);
    }
    .submegamenu li {
        padding: 0;
        border-bottom: solid 1px var(--grey);
    }
    .submegamenu li::before {
        display: none;
    }
    .submegamenu li a {
        font-family: 'oswald';
        font-size: var(--m14);
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }


    .modmegamenu {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 58px;
        /*bottom: 0;*/
        padding: var(--m0);
        transform: translate(-100%, 0);
        transition: all 0.3s linear;
    }
    .opensubmenu .modmegamenu {
        transform: translate(0%, 0);
    }
    .modmegamenu .sectionpromo {
        display: none;
    }
    .sectionsmegamenu {
        column-count: inherit;
    }

}

@media (max-width: 1200px) {

    .category-level-3 span.font15,
    .slider .vignette-produit .font14 {
        font-size: 0.775rem;
    }

    #products-list .row.vignettes {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* 550 */
@media screen and (max-width: 34.375rem) {

    .vignette-produit .add-panier {
        display: block !important;
        margin-bottom: -15px;
    }

    .modmodal.modalmobile.fixedmodal {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 90;
    }
    .modmodal.modalmobile.fixedmodal .action {
        width: 100%;
        text-align: center;
        position: relative;
        border-color: var(--blue3);
        box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.4);
        z-index: 10;
        background: var(--blue2);
    }
    .modmodal.modalmobile.fixedmodal .action span {
        display: inline-flex;
        justify-content: center;
        color: var(--white);
    }
    .modmodal.modalmobile .modal {
        width: 100vw;
        max-width: inherit;
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: -150vh;
        transform: inherit;
        z-index: 2;
        transition: all 0.3s linear;
    }
    .modmodal.modalmobile.active .modal {
        bottom: 37px;
        transform: translate(0, 0%);
    }
    .modmodal.modalmobile::after {
        width: 100%;
        height: 0vh;
        content: "";
        position: fixed;
        top: 100vh;
        bottom: 0;
        left: 0;
        opacity: 0;
        background: rgba(0, 0, 0, .5);
        transform: translate(0, 100%);
        transition: opacity ease-out 300ms;
    }
    .modmodal.modalmobile.active::after {
        height: 100%;
        top: 0vh;
        opacity: 1;
        transform: translate(0, 0%);
    }

    .category-level-3 .sliderpromo {
        width: calc(100vw - 10px) !important;
        margin-top: 0;
    }
    .category-level-3 .vignette-produit .add-panier {
        display: block;
        margin-bottom: -15px;
    }


    .vignettes.n2>div>div {
        padding: 10px !important;
    }
    .vignettes.n2 > div > div > * {
        margin: 0;
        width: 100%;
    }
    .vignettes.n2 > div > div > a {
        width: 100%;
        display: block;
        text-align: center;
    }
    .vignettes.n2 > div > div > a img {
        position: relative;
        float: inherit;
        margin: auto;
    }

}
/* ============================================================================
   CORRECTIF : largeur de la slide publicité dans le slider best-sellers
   (.category-level-3 + .pub-resize)

   ➜ La pub occupe la largeur de TROIS articles.

   Calcul : une colonne = calc((100vw / nb_colonnes) - 1.1vw).
   Trois colonnes = 3 × cette valeur = calc((300vw / nb_colonnes) - 3.3vw).

   La classe `.pub-resize` est ajoutée en JS (layout.twig) sur la .slick-slide
   qui contient la pub. La largeur est indépendante du nombre de produits.
   ============================================================================ */

/* Par défaut (> 1600px) : grille de 6 colonnes → 3 colonnes = 50vw */
.category-level-3 > .slick-list > .slick-track > .slick-slide.pub-resize {
    flex: 0 0 calc((100vw / 2) - 3.3vw) !important;
}

/* Grille à 4 colonnes (ordinateur portable) → 2 colonnes */
@media screen and (max-width: 1600px) {
    .category-level-3 > .slick-list > .slick-track > .slick-slide.pub-resize {
        flex: 0 0 calc((100vw / 2) - 2.2vw) !important;
    }
}
@media screen and (max-width: 1380px) {
    .category-level-3 > .slick-list > .slick-track > .slick-slide.pub-resize {
        flex: 0 0 calc((100vw / 2) - 2.2vw) !important;
    }
}

/* Grille à 3 colonnes → 2 colonnes (petit écran) */
@media screen and (max-width: 1034px) {
    .category-level-3 > .slick-list > .slick-track > .slick-slide.pub-resize {
        flex: 0 0 calc((200vw / 3) - 2.2vw) !important;
    }
}

/* Grille à 2 colonnes (mobile) : 2 colonnes = pleine largeur, placée en premier */
@media screen and (max-width: 680px) {
    .category-level-3 > .slick-list > .slick-track > .slick-slide.pub-resize {
        flex: 0 0 99vw !important;
        order: -1;
    }
}


/* ============================================================================
   CORRECTIF : l'image de la pub doit REMPLIR toute la hauteur et la largeur
   de la slide (effet "cover", recadrage assumé), et suivre la taille de la
   slide quand l'écran rétrécit.

   Le CSS ci-dessous assure le remplissage. La mise à jour de la LARGEUR au
   redimensionnement dépend de Slick : ajoutez l'appel `setPosition` sur
   `resize` dans layout.twig 
   ============================================================================ */
.category-level-3 .sliderpromo .slick-track img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;       /* neutralise un éventuel max-width: 100% de img-fluid/img-slider-home */
    object-fit: cover !important;     /* remplit toute la zone (rognage des bords si besoin) */
}