/*
Theme Name: jdb
Theme URI: https://synergie-media.com
Author: synergie media
Description: Custom Wordpress theme for Jeff de Bruge Maroc
Author: Fahd Idaghdour
Author URI: http://fahdos.com
Requires at least: 6.1
Tested up to: 6.3
Requires PHP: 7.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: jeffdebruges
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;600;800&family=Sue+Ellen+Francisco&display=swap');

/* ==========================================================================
   Reset 2020 ^^
   ========================================================================== */

*,*::before,*::after {box-sizing: border-box;}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {margin: 0;}
ul, ol{list-style: none; padding: 0; margin: 0;}
html {scroll-behavior: smooth;}
body {min-height: 100vh;text-rendering: optimizeSpeed;line-height: 1.5;}
a:not([class]) {text-decoration-skip-ink: auto;}
img,picture {max-width: 100%;display: block;}
input,button,textarea,select {font: inherit;}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}}
a {text-decoration: none; color: #000; transition: all 200ms ease-out;}
a:active, a:hover {outline: 0;  transition: all 200ms ease-out; outline:none}
:focus { outline: none; }
button {border: none; background: none; padding: 0;}
button:hover {cursor: pointer;}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

h1 {font-family: var(--sue); font-weight: normal;}

:root {
  --primary: #54BCBF;
  --dark: #2D190D;
  --sue : 'Sue Ellen Francisco', cursive;
}

/* ==========================================================================
   General
   ========================================================================== */
html {background: url(./assets/images/bg.jpg) repeat;}
body {font-family: 'Manrope', sans-serif; letter-spacing: .025rem; font-weight: normal; font-style: normal; font-size: 14px; color: #222; line-height: 1.45;}
section {width: 100%; padding: 40px 20px;}
.row {width: 100%; max-width: 1200px; margin: 0 auto; display: flex;}

/* Header
   ========================================================================== */
.header {position: relative; display: flex; flex-direction: column;}
.header:before {content: ''; position: absolute; top: 0; left: 0; z-index: -1; height: calc(100% - 25px); width: 100%; background: var(--primary);}
.header .preheader {background: var(--dark); font-weight: 600; font-size: 13px; color: #fff; padding: 5px 20px;}
.header .preheader .row {justify-content: center;}

.header .mainheader { padding: 20px; width:100%; }
.header .mainheader .row {display: flex; justify-content: space-between; align-items: center;}
.header .mainheader .logo {}
.header .mainheader .headmeta {display: flex;  }
.header .mainheader .headmeta form {display: flex; align-self: center; border-bottom: 1px solid #000; margin-right: 10px;}
.header .mainheader .headmeta form input {background: none; border: none; min-width: 200px; }
.header .mainheader .headmeta form input:focus {border: none;}
.header .mainheader .headmeta form input::placeholder {color: #000; font-weight: 600;}
.header .mainheader .headmeta form button {border: none; background: none;}
.header .mainheader .headmeta form button img {width: 18px;}
.header .mainheader .headmeta ul {display: flex; align-items: center;}
.header .mainheader .headmeta li {}
.header .mainheader .headmeta li a {display: flex; font-weight: 600;padding-left: 25px; margin-left: 25px; border-left: 1px dashed #fff;}
.header .mainheader .headmeta li a img {width: 18px; filter: invert(); margin-right: 10px;}
.header .mainheader .headmeta li a:hover span {text-decoration: underline;}

.header .mainheader .headmeta ul .droppanier {display: none;}

.header .headnav {position: relative; display: flex; justify-content: space-between; align-items: center; background: #fff; width: 100%; max-width: 1200px; margin: 0 auto; padding: 5px;
box-shadow: -1px 5px 10px 2px rgba(0,0,0,0.10);
-webkit-box-shadow: -1px 5px 10px 2px rgba(0,0,0,0.10);
-moz-box-shadow: -1px 5px 10px 2px rgba(0,0,0,0.10); }
.header .headnav:before {content: ''; position: absolute; right: 0; height: 0; width: 320px; height: 100%; background: url('./assets/images/pat.svg') left center no-repeat; background-size: 340px; z-index: 0; opacity: 0.05}
.header .headnav ul {margin: 0; z-index: 1;}
.header .headnav ul li {display: inline-block;}
.header .headnav ul li a { border-right: 1px dashed var(--primary); padding:0 15px; text-transform:uppercase; }
.header .headnav ul li:last-child a {border: none;}
.header .headnav ul li .sub-menu {display: none; position: absolute; left: 0; width: 100%; padding: 30px 40px;  column-gap: 30px; grid-template-columns: 1fr 1fr 1fr; background: #fff;}
.header .headnav ul li .sub-menu li {}
.header .headnav ul li .sub-menu a {border: none;}
.header .headnav ul li .sub-menu a:hover {text-decoration: underline;}
.header .headnav ul li:hover .sub-menu {display: grid;}

.header .headnav .headaction { position: relative; z-index: 1; background: var(--dark); color: #fff; font-weight: 600; display: flex; justify-content: center; align-items: center; padding: 7px 15px;}
.header .headnav .headaction img {width: 26px; margin-right: 5px; filter: invert();}
.header .headnav .headaction:hover {background: var(--primary); color: var(--dark);}


/* Footer
   ========================================================================== */
.valeur {background: var(--dark); padding: 60px 0;}
.valeur .row {display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.valeur .item {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.valeur .item a {display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: var(--sue); text-transform: uppercase; color: #fff; font-size: 22px;}
.valeur .item a img {margin-bottom: 20px;}
.valeur .item a:hover span {text-decoration: underline;}

footer {}
footer .row {display: flex; flex-direction: column;}
footer .footernewsletter { padding:40px 0; width: 100%; display: flex; border-bottom: 1px dashed #d1baaa; }
footer .footernewsletter h1 {text-transform: uppercase; font-size: 22px; display: flex; flex-direction: column; padding-right: 40px; white-space: nowrap; }
footer .footernewsletter h1 img {width: 80px; align-self: flex-end;}
footer .footernewsletter form {flex-grow: 2;}
footer .footernewsletter form fieldset { display: flex; border: none; padding: 0; margin-bottom: 20px;}
footer .footernewsletter form input {flex: 1 1 auto; border: none; height: 50px; padding: 5px 15px;}
footer .footernewsletter form button {background: #f5f5f5; color: #a2a2a2; font-weight: 800; font-size: 15px; letter-spacing: 1px; padding: 5px 40px; height: 50px;}
footer .footernewsletter form fieldset:hover button {background: var(--dark); color: #fff;}
footer .footernewsletter p {font-size: 13px;}
footer .footernewsletter p a {font-weight: 600; text-decoration: underline;}
footer .bottom { padding:40px 0; display:flex; justify-content:space-between; }
footer .bottom .leftbloc {padding-right: 60px; border-right: 1px dashed #d1baaa; }
footer .bottom .rightbloc {padding-left: 60px; border-left: 1px dashed #d1baaa; }
footer .bottom .rightbloc h3 { font-family:var(--sue); font-weight:normal; font-size:24px; text-transform:uppercase; }
footer .bottom .rightbloc .icons {display: flex;justify-content: space-between; align-items: flex-end;}
footer .bottom .rightbloc .icons .sm {display: flex;}
footer .bottom .rightbloc .icons .sm a {margin-left: 10px;}
footer .bottom nav {}
footer .bottom nav ul { display: grid; grid-gap: 10px; column-gap: 40px; grid-template-columns: 1fr 1fr;}
footer .bottom nav ul li {display: inline-block;}
footer .bottom nav ul li a:hover {text-decoration: underline;}
footer .end {background: var(--dark); padding: 10px 20px}
footer .end .row {display: flex; flex-direction: row; justify-content: space-between; color: #fff; font-size: 13px;}
footer .end .row li {padding-left: 20px; display: inline-block;}
footer .end .row a {color: #fff;}
footer .end .row a:hover {text-decoration: underline;}



/* ==========================================================================
   Container
   ========================================================================== */

.container {padding-top: 20px;}
.container .row {flex-direction: column;}

.breadcrumb {margin-bottom:20px;}
.breadcrumb ul li {display: inline-block; font-size: 12px;}
.breadcrumb ul li a {padding-right: 20px; position: relative;}
.breadcrumb ul li a:after {content: '-'; position: absolute; right: 6px; height: 50%;}

/* Home
   ========================================================================== */

.intro {padding: 20px 0px; position: relative;}
.intro .hero {position: absolute; top: 20px; left: 0; width: calc(100% - 460px); z-index: -1; }
.intro .hero img {width: 100%; height: auto;}
.intro .introcontent {position: relative; display: flex; align-items: flex-end;}
.intro .introcontent .map {flex:0 0 520px; }
.intro .introcontent .map img {width: 100%;}
.intro .introcontent article {padding: 40px 40px 40px 80px; position: relative ;}
.intro .introcontent article:before {content: ""; position: absolute; top: 0; left: 40px;height: 100%; width: calc(100vw - 80px); max-width: 1160px; background: #fff; z-index:  -1;}
.intro .introcontent article h1 {font-size: 32px; text-transform: uppercase ; max-width: 430px; margin-bottom: 30px;}
.intro .introcontent article p { margin-bottom: 20px;}

.separateur {padding: 20px 0 20px 0; background: url('./assets/images/courbe.svg') center center no-repeat; display: flex; justify-content: center; align-items: center;}
.separateur .sepcenter {background: url('./assets/images/bg.jpg') top left repeat; padding: 20px;}

.sectitle {text-align: center; text-transform: uppercase; font-size: 32px; margin-bottom: 10px;}
.subtitle { text-align:center; margin-bottom:40px;}

.homeboutique {padding: 20px 40px; }
.homeboutique .homeslider {max-width: 1200px;}
.homeboutique .homeslider .item {padding: 0 10px}
.homeboutique .homeslider .item a {display: block; position: relative; padding: 10px; background: #fff;}
.homeboutique .homeslider .item a:before {content: ''; z-index: 0; position: absolute; left: 5px; top: 5px; height: calc(100% - 10px); width: calc(100% - 10px); border: 1px dashed #d1baaa;}
.homeboutique .homeslider .item img {display: block; width: 100%; margin-bottom: 10px;}
.homeboutique .homeslider .item h2 { font-size:14px; text-align:center; text-transform:uppercase; margin-bottom:5px; }
.homeboutique .homeslider .item a:hover {background: var(--primary);}
.homeboutique .homeslider .item a:hover:before {border: 1px dashed #fff;}
.homeboutique .homeslider .item a:hover h2 {color:#fff;}

.promobloc {padding: 0; margin: 40px 0; position: relative; display: flex; overflow: hidden; min-height: 225px; align-items: center; justify-content: space-between;}
.promobloc img {position: absolute; top: 0; left: 0; display: block; width: 100%; max-width: 100%; z-index: -1;}
.promobloc article {padding-left: 400px;}
.promobloc article h1 {font-size: 32px; margin-bottom: 10px; text-transform: uppercase;}
.promobloc article p { text-transform:uppercase; font-weight:600; max-width:450px ; }
.promobloc a.promolink { padding: 10px 40px; border:2px solid #fff; margin:0 40px; white-space: nowrap; font-weight: 600; text-transform:uppercase; }
.promobloc a.promolink:hover {background: #fff;}

.ensavoirplus {padding: 20px 0;}
.ensavoirplus .blocs {display: grid; grid-gap: 40px; grid-template-columns: 1fr 1fr 1fr;}
.ensavoirplus .blocs article {padding: 20px; background: #fff; display: flex; flex-direction: column;}
.ensavoirplus .blocs article img {display: block; width: 100%; max-width: 100%; margin-bottom: 20px;}
.ensavoirplus .blocs article h2 {font-family: var(--sue); font-weight: normal; text-align: center; text-transform: uppercase; margin-bottom: 20px;}
.ensavoirplus .blocs article p {text-align: center; margin-bottom: 30px;}
.ensavoirplus .blocs article a {font-weight: 600; border: 2px solid var(--primary); padding: 7px 20px; align-self:center; }
.ensavoirplus .blocs article a:hover {background: var(--primary); color: #fff;}

.engagement {padding:  40px 0; display:flex; justify-content:flex-end; align-items:center; margin:40px 0; }
.engagement article {flex: 0 0 500px; padding: 40px; background: #fff;}
.engagement article h1 {font-size: 32px; margin-bottom: 20px; text-transform: uppercase;}
.engagement article p {margin-bottom: 20px;}


/* Single Product
   ========================================================================== */
.singleprodcut {}
.singleprodcut .productinfo {position: relative; width: 100%; display: flex; padding: 30px; margin-bottom:40px; }
.singleprodcut .productinfo .prdimage {position: relative !important; width:50% !important;  display:flex; align-self:flex-start; }
.singleprodcut .productinfo .prdimage:before {content: ''; position: absolute; top: -30px; left: -30px; width: calc(200% + 60px); height: calc(100% + 60px); background: #fff; z-index: -1;}
.singleprodcut .productinfo .prdimage .bigview {flex-grow: 1; padding: 0 20px; margin: auto;}
.singleprodcut .productinfo .prdimage .bigview img {}
.singleprodcut .productinfo .prdimage .flex-control-thumbs {order: 1; margin-right: 10px;}
.singleprodcut .productinfo .prdimage .flex-control-thumbs li {width: initial !important; margin: 0 0 10px 0px !important;}
.singleprodcut .productinfo .prdimage .flex-control-thumbs img {width: 40px; max-width: 100%; display: block; }
.singleprodcut .productinfo .prdimage .flex-viewport {order: 2;}
.singleprodcut .productinfo .prdmeta {width: 50%; padding: 50px 40px; background:#FAF8F5; }
.singleprodcut .productinfo .prdmeta h1 {text-transform: uppercase; font-size: 34px; margin-bottom: 20px;}
.singleprodcut .productinfo .prdmeta .prdprice {font-size: 26px; font-weight: 800;}
.singleprodcut .productinfo .prdmeta .excerpt {padding-bottom: 30px; margin-bottom: 35px; border-bottom: 1px dashed #d1baaa}
.singleprodcut .productinfo .prdmeta .excerpt p {margin-bottom: 10px;}
.singleprodcut .productinfo .prdmeta .metaboutiques h2 {display: flex; align-items: center; font-size:17px; font-weight:600; margin-bottom:10px; }
.singleprodcut .productinfo .prdmeta .metaboutiques h2 img {width: 21px; margin-right: 10px;}
.singleprodcut .productinfo .prdmeta .metaboutiques span {font-size: 12px;}
.singleprodcut .productinfo .prdmeta .boutiquelinks {margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px;}
.singleprodcut .productinfo .prdmeta .boutiquelinks a {background: #fff; border: 2px solid var(--primary); padding: 7px 35px; font-size: 15px; display: inline-block; font-weight: 800;}
.singleprodcut .productinfo .prdmeta .boutiquelinks a:hover {background: var(--primary); color: #fff;}

.singleprodcut .productdetails {background: #fff; padding: 40px;}
.singleprodcut .productdetails .tabset > input[type="radio"] {position: absolute;left: -200vw;}
.singleprodcut .productdetails .tabset .tab-panel { display: none;}
.singleprodcut .productdetails .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.singleprodcut .productdetails .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.singleprodcut .productdetails .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.singleprodcut .productdetails .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.singleprodcut .productdetails .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.singleprodcut .productdetails .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {display: block;}
.singleprodcut .productdetails .tab-panels {width: 100%; border-top: 1px solid #54bcbf69;}
.singleprodcut .productdetails .tabset > label {position: relative;display: inline-block;padding: 10px 30px;cursor: pointer;font-family: var(--sue);text-transform: uppercase;font-size: 22px;}
.singleprodcut .productdetails input:focus-visible + label {outline: 2px solid rgba(0,102,204,1); border-radius: 3px;}
.singleprodcut .productdetails .tabset > label:hover,
.singleprodcut .productdetails .tabset > input:focus + label{color: var(--primary);}
.singleprodcut .productdetails .tabset > input:checked + label {border-color: #ccc;border-bottom: 5px solid var(--primary);margin-bottom: -3px;}
.singleprodcut .productdetails .tab-panel {padding: 40px 0 0 0; max-width: 900px; margin: 0 auto;}
.singleprodcut .productdetails .tab-panel h2 {margin-bottom: 20px; font-size: 20px; font-weight: 600;}
.singleprodcut .productdetails .tab-panel p {line-height: 1.5; margin-bottom: 20px;}

.table {width: 100%;}
.table thead th {font-weight: 700; background-color: #f1eee9;}
.table td, .table th {border: 0.0625rem dashed #d1baaa; padding: 0.625rem; font-weight: 400;}
.table th {text-align: left;}

.panelfull {max-width: 100% !important;}
.assortiment {display: grid; grid-gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr;}
.assortiment .item {display: flex; flex-direction: column; align-items: center; background: #f5f5f5; padding: 20px; border-radius: 5px;}
.assortiment .item h3 {text-transform: uppercase; font-size: 16px; text-align: center; margin-bottom: 10px;}
.assortiment .item img {width: 100%; max-width:130px; margin-bottom:10px; }
.assortiment .item p {text-align: center; font-size: 12px;}
.assortiment .item button.assoview {border: 2px solid var(--primary); font-size: 14px; background: #fff; padding: 7px 20px; font-weight: 600;}
.assortiment .item button.assoview:hover {background: var(--primary);}
.popup { display: none; position: fixed; z-index: 900; top: 0; left: 0; height: 100vh; width: 100%; background: rgba(0, 0, 0, .5); justify-content: center; align-items: center;}
.popup article { height: fit-content ; max-height: calc(100vh - 80px); width: calc(100% - 80px);  max-width: 1200px; background: #fff;   display: flex; position: relative;}
.popup article p {text-align: left; font-size: 14px;}
.popup .popclose {position: absolute; right: 20px; top: 20px; height: 40px; width: 40px; background: #ddd; display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.popup .popclose img {display: block;width: 26px; height: 26px; margin:0;}
.popup .popclose:hover {background: var(--primary);}
.popup .imgcontainer {flex: 0 0 40%; padding: 40px; height: 100%;}
.popup .imgcontainer img {display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto;}
.popup .contentbloc {background: #faf8f5; padding: 40px 40px 20px 40px;}
.popup .contentbloc h3 {font-family: var(--sue); font-weight: normal; text-transform: uppercase; font-size: 32px; text-align: left;}
.popup .contentbloc hr {border: none; border-bottom: 1px dashed #d1baaa; margin: 20px 0 20px 0;}
.popup .contentbloc .subasso {font-weight: 600;}
.popup .contentbloc ul {}
.popup .contentbloc ul li {min-width: 49%; display: inline-block; padding: 0 40px 10px 0}
.popup .contentbloc strong {display: block;}
.popup .contentbloc .ingredient strong {display: initial;}
.popup.show {display: flex;}


.heroslider {padding: 0}
.heroslider .heroitem {min-height: 480px; background-size:cover; padding: 40px 60px; display:flex !important; align-items:center; }
.heroslider .heroitem article {width: 100%; max-width: 480px; background: #fff; padding: 30px;}
.heroslider .heroitem article h1 {text-transform: uppercase; font-size: 32px; margin-bottom: 20px;}
.heroslider .heroitem article p {margin-bottom: 20px;}
.heroslider .heroitem article a { position: relative; align-self: center; background: #fff; border: 2px solid var(--primary); padding: 7px 15px; font-size: 14px; display: inline-block; font-weight: 600;}
.heroslider .heroitem article a:hover {cursor: pointer; background: var(--primary); color: #fff;}


.featuredprd .prd {position: relative; background: #fff; padding: 20px; display: flex !important; flex-direction: column; justify-content: center;}
.featuredprd .prd:before {content: ''; z-index: 0; position: absolute; left: 5px; top: 5px; height: calc(100% - 10px); width: calc(100% - 10px); border: 1px dashed #d1baaa;}
.featuredprd .prd a {position: relative; z-index: 1;}
.featuredprd .prd img {display: block; margin-bottom: 10px;}
.featuredprd .prd h2 {text-transform: uppercase ; font-weight: 400; font-size: 14px; text-align: center; margin-bottom: 20px;}
.featuredprd .prd .prdmeta {display: flex; justify-content: space-between; margin-bottom: 20px;}
.featuredprd .prd a.button, .featuredprd .prd button { position: relative; align-self: center; background: #fff; border: 2px solid var(--primary); padding: 7px 15px; font-size: 14px; display: inline-block; font-weight: 600;}
.featuredprd .prd a.button:hover, .featuredprd .prd button:hover {cursor: pointer; background: var(--primary); color: #fff;}
.featuredprd .slick-slide {padding: 0 5px;}



/* Category
   ========================================================================== */
.catbanner {position: relative; width: 100%; height: 240px; padding-left: 60px; display: flex;flex-direction: column; justify-content: center;}
.catbanner h1 {text-transform: uppercase; font-size: 34px;}
.catbanner span { font-size:16px; text-transform:uppercase; font-weight:300; }
.catbanner img {width: 100%; position: absolute; top: 0; right: 0; z-index:-1;}

.maincat {display: flex; padding: 40px 0;}
.maincat aside {flex: 0 0 320px; padding-right: 20px;}
.maincat aside h2 {font-size: 18px;}
.maincat aside button.btnlink {font-weight: 600; text-decoration: underline; font-size: 12px;}
.maincat aside .sideitem { padding: 20px 0; border-bottom: 1px dashed #d1baaa;}
.maincat aside .sideitem ~ .sideitem {display: block;}
.maincat aside .sideitem h3 {margin-bottom: 10px; font-size: 14px}
.maincat aside .sidecheck .checkitem { display: block; position: relative; padding-left: 25px; margin-bottom: 12px; cursor: pointer; font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;}
.maincat aside .sidecheck .checkitem input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.maincat aside .sidecheck .checkmark { position: absolute; top: 2px; left: 0; height: 15px; width: 15px; background-color: #fff; border: 1px solid #ccc; border-radius: 2px;}
.maincat aside .sidecheck .checkmark:after { content: ""; position: absolute; display: none;}
.maincat aside .sidecheck .checkitem input:checked ~ .checkmark:after { display: block; border: solid var(--primary); border-width: 0 2px 2px 0;}
.maincat aside .sidecheck .checkitem .checkmark:after { left: 4px; top: 1px; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);}

.maincat .prdlist {width: 100%;}

.maincat .products {display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr 1fr;}
.maincat .prd {position: relative; background: #fff; padding: 20px; display: flex; flex-direction: column; justify-content: center;}
.maincat .prd:before {content: ''; z-index: 0; position: absolute; left: 5px; top: 5px; height: calc(100% - 10px); width: calc(100% - 10px); border: 1px dashed #d1baaa;}
.maincat .prd a {position: relative; z-index: 1;}
.maincat .prd img {display: block; margin-bottom: 10px;}
.maincat .prd h2 {text-transform: uppercase ; font-weight: 400; font-size: 14px; text-align: center; margin-bottom: 20px;}
.maincat .prd .prdmeta {display: flex; justify-content: space-between; margin-bottom: 20px;}
.maincat .prd a.button, .maincat .prd button { position: relative; align-self: center; background: #fff; border: 2px solid var(--primary); padding: 7px 15px; font-size: 14px; display: inline-block; font-weight: 600;}
.maincat .prd a.button:hover, .maincat .prd button:hover {cursor: pointer; background: var(--primary); color: #fff;}
.maincat .tri {display: flex; justify-content: flex-end; margin-bottom: 20px;}
.maincat .tri > span {margin-right: 10px;}
.maincat .tri .dropdown {position: relative;}
.maincat .tri .dropdown button {display: flex; font-weight: 800;}
.maincat .tri .dropdown button:hover {cursor: pointer;}
.maincat .tri .dropdown button span {text-decoration: underline;}
.maincat .tri .dropdown button img {display: block; width: 20px;}
.maincat .tri .dropdown ul {position: absolute; display: none; margin-top: 10px; background: #fff; padding: 15px 15px 10px 15px; right: 0; top: 100%; z-index: 10;
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.24);
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.24);}
.maincat .tri .dropdown ul li {min-width: 200px; margin-bottom: 5px;}
.maincat .tri .dropdown ul li button {display: inline; text-decoration: underline; text-align: left;}

.maincat .pagenav { padding: 30px 0 20px 0; display:flex; justify-content:center; }
.maincat .pagenav ul {}
.maincat .pagenav ul li {display: inline-block; padding: 0 2px;}
.maincat .pagenav ul li span {display: flex; justify-content: center; align-items: center; background: #e5e5e5; height: 40px; width: 40px;}
.maincat .pagenav ul li a {display: flex; justify-content: center; align-items: center; background: #fff; height: 40px; width: 40px;}
.maincat .pagenav ul li a:hover, .maincat .pagenav ul li.current a {color: #fff; background: var(--primary);}

.rangeslider .range_container { display: flex; flex-direction: column;  padding-top: 15px;}
.rangeslider .sliders_control { position: relative; min-height: 22px;}
.rangeslider .form_control { position: relative; display: flex; justify-content: space-between; font-size: 16px; color: #635a5a;}
.rangeslider .form_control .form_control_container {font-weight: 600;}
.rangeslider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: all; width: 24px; height: 24px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--primary); cursor: pointer;}
.rangeslider input[type=range]::-moz-range-thumb { -webkit-appearance: none; pointer-events: all; width: 24px; height: 24px; background-color: #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--primary); cursor: pointer;}
.rangeslider input[type=range]::-webkit-slider-thumb:hover { background: #f7f7f7;}
.rangeslider input[type=range]::-webkit-slider-thumb:active { box-shadow: inset 0 0 3px var(--primary), 0 0 9px var(--primary); -webkit-box-shadow: inset 0 0 3px var(--primary), 0 0 9px var(--primary);}
.rangeslider input[type="number"] {  color: #8a8383;  width: 50px;  height: 30px;  font-size: 20px;  border: none;}
.rangeslider input[type=number]::-webkit-inner-spin-button,
.rangeslider input[type=number]::-webkit-outer-spin-button { opacity: 1;}
.rangeslider input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; width: 100%; position: absolute; background-color: #C6C6C6; pointer-events: none;}
#fromSlider { height: 0; z-index: 1;}

/* Single Page
   ========================================================================== */
.singlepage {}
.singlepage .pagetitle {font-size: 36px; text-transform: uppercase; margin-bottom: 20px;}
.singlepage .pagecontent {background: #fff; padding: 30px; font-size: 15px;}
.singlepage .pagecontent h1 {font-family: var(--sue); font-weight: normal; margin-bottom: 20px; font-size: 30px;}
.singlepage .pagecontent h2 {font-family: var(--sue); font-weight: normal; margin-bottom: 20px; font-size: 26px;}
.singlepage .pagecontent h3 {font-family: var(--sue); font-weight: normal; margin-bottom: 20px; font-size: 22px;}
.singlepage .pagecontent h4 { font-weight: normal; margin-bottom: 20px; font-size: 19px;}
.singlepage .pagecontent h5 {font-weight: normal; margin-bottom: 20px; font-size: 16px;}
.singlepage .pagecontent h6 { margin-bottom: 20px; font-size: 14px;}
.singlepage .pagecontent p { margin-bottom:20px; }
.singlepage .pagecontent blockquote { font-style: italic; font-size: 16px; font-weight: 600; color: var(--dark); border-left:5px solid #eee; padding-left:20px; margin-bottom:20px; }
.singlepage .pagecontent blockquote small {display:block; line-height:1.7em;}
.singlepage .pagecontent ul {list-style: circle; padding-left: 30px; margin-bottom: 20px;}
.singlepage .pagecontent ul ul {margin-bottom: 0;}
.singlepage .pagecontent ul li {margin-bottom: 5px;}
.singlepage .pagecontent hr {width:200px; margin:0 auto 30px auto; }
.singlepage .pagecontent ol {list-style: decimal; padding-left: 30px; margin-bottom: 20px;}
.singlepage .pagecontent ol ol {margin-bottom: 0;}
.singlepage .pagecontent ol li {margin-bottom: 5px;}

.villename {font-family: var(--sue); margin-bottom: 20px; font-weight: normal;text-transform: uppercase;}
.villedivider { margin: 40px 0; width:100%; border:0; border-bottom:1px dashed #c5bebe; }

.storeimgmap, .storeinfohours {background: #fff; padding: 30px 40px; font-size: 14px; margin-bottom: 40px; display: grid; grid-gap: 40px; grid-template-columns: 1fr 1fr;}
.storeimg, .storemap { padding: 0 }
.storeimg img, .storemap img {width: 100%; max-width: 100%; display: block;} 
.storehours h2, .storeinfo h2 { font-size:18px; margin-bottom:20px; }
.wpsl-location-address {margin-bottom: 20px;}
.storeinfo a {color: var(--primary) !important;}
.storehours table.wpsl-opening-hours {width: 100% !important; padding: 5px 20px 0 20px; background: #FAF8F5;}
.storehours table tr td {padding: 10px 0; border-bottom: 1px dashed #d1baaa;}
.storehours table tr td:last-of-type {display: flex; justify-content: space-evenly;}

.liststores {display: grid; grid-gap: 40px; grid-template-columns: 1fr 1fr;}
.storewidget { background: #fff; padding: 20px; display: flex;align-items: center;}
.storewidget .widgetimg {flex: 0 0 40%; margin-right: 20px; }
.storewidget img {width: 100%; max-width: 100%; display: block;}
.storewidget .storepage {padding: 7px 15px; border: 2px solid var(--primary); font-weight: 800; font-size: 13px;}
.storewidget .storepage:hover {background: var(--primary); color: #fff;}
.storewidget .widgetinfo span {font-family: var(--sue); text-transform: uppercase; font-size: 18px;}
.storewidget .widgetinfo .wpsl-location-address {margin-top: 15px;}
.storewidget .widgetinfo .wpsl-location-address span {font-family: 'Manrope', sans-serif; font-size:14px; text-transform:initial; }
.wpsl-gmap-canvas {height: 100% !important;}

#wpsl-search-wrap form {display: flex; justify-content: space-between;}
#wpsl-search-wrap form label {white-space: nowrap; width: auto;}
.wpsl-input label, #wpsl-radius label, #wpsl-category label {width: initial !important;}
.wpsl-dropdown .wpsl-selected-item, .wpsl-dropdown li, .wpsl-selected-item  {padding: 8px 12px !important;}
#wpsl-search-btn {border: 2px solid var(--primary) !important; color: #000 !important; background-color: #fff !important; background-image: none !important; padding: 7px 20px !important; font-weight: 600 !important;}
#wpsl-result-list {font-size: 13px;}
#wpsl-result-list li p > strong {margin-bottom: 5px; display: block;}
#wpsl-result-list a.wpsl-directions {font-weight: 600; text-decoration: underline;}
#wpsl-search-wrap .wpsl-select-wrap {flex-grow: 1; display:flex !important; justify-content: space-evenly; }
#wpsl-radius, #wpsl-results, .wpsl-input {display: flex !important; align-items:center; }



/* Slick Slider */
.slick-list,.slick-slider,.slick-track{position:relative;display:block}.slick-slider{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);
 -o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.slick-track{top:0;left:0;margin-left:auto;margin-right:auto}
.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-slide,.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-initialized .slick-slide,.slick-slide img{display:block}
.slick-arrow.slick-hidden,.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

.slick-arrow {position: absolute; top: calc(50% - 25px); z-index: 999; width: 40px; height: 40px; border-radius: 50%; opacity: 0.6; text-indent: -9999px; background-repeat: none; background-size: 50px;}
.slick-arrow.slick-prev {left: -40px; background: url('./assets/images/leftarrow.svg') center center no-repeat; background-size: 20px 20px;}
.slick-arrow.slick-next {right: -40px; background: url('./assets/images/rightarrow.svg') center center no-repeat; background-size: 20px 20px;}
.slick-arrow { background-color: #d1baaa !important;}
.slick-arrow:hover {cursor: pointer; background-color: var(--primary) !important;}

.featuredprd .slick-track{ display: flex !important;}
.featuredprd .slick-slide{height: inherit !important;}
.featuredprd .slick-slide > div {height: 100%;}
.featuredprd .slick-slide .prd {height: 100%; justify-content: space-between;}




.heroslider .slick-arrow {position: absolute; bottom: 20px; top: initial; z-index: 999; width: 40px; height: 40px; border-radius: 50%; opacity: 0.6; text-indent: -9999px; background-repeat: none; background-size: 50px;}
.heroslider .slick-arrow.slick-prev {left: calc(50% - 60px); background: url('./assets/images/leftarrow.svg') center center no-repeat; background-size: 20px 20px;}
.heroslider .slick-arrow.slick-next {right: calc(50% - 60px); background: url('./assets/images/rightarrow.svg') center center no-repeat; background-size: 20px 20px;}

.heroslider .slick-dots {position: absolute; bottom: 10px; left: 60px;}
.heroslider .slick-dots li {display: inline-block; padding: 0 3px;}
.heroslider .slick-dots li button {text-indent: -9999px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; opacity: .6;}
.heroslider .slick-dots li.slick-active button {background: #d1baaa; }


#burger-menu {display: none; cursor: pointer;height: 27px; width: 27px; overflow: visible; position: relative;z-index:30;}
#burger-menu span,
#burger-menu span:before,
#burger-menu span:after {
  background: #222;display: block;height: 4px;opacity: 1;position: absolute;transition: 0.3s ease-in-out;}
#burger-menu span:before,
#burger-menu span:after {
  content: "";}
#burger-menu span {right: 0px;top: 13px;width: 27px;}
#burger-menu span:before {left: 0px;top: -10px;width: 16px;}
#burger-menu span:after {left: 0px;top: 10px;width: 20px;}
#burger-menu.close span {transform: rotate(-45deg); top: 13px; width: 27px;}
#burger-menu.close span:before {top: 0px;transform: rotate(90deg);width: 27px;}
#burger-menu.close span:after {top: 0px; left:0; transform: rotate(90deg); opacity:0; width:0;}
#burger-menu.close {position: fixed; top:20px; right: 20px; z-index: 9993;}

.header #menu-menu-principal.overlay {position: fixed; top: 0; left: 0; z-index: 9992; background: #fff; height: 100vh; width: 100%; display: flex; flex-direction: column; height: 100%; justify-content: center; }
.header #menu-menu-principal.overlay  a {padding-right: 0; border:none; font-weight: 600; font-size:12px; }
.header #menu-menu-principal.overlay li { margin-bottom:10px; margin-left:0;  }
.header #menu-menu-principal.overlay li li {margin-bottom: 5px; width: 100%;}
.header #menu-menu-principal.overlay li li a {color: #222; font-weight: 400;}
.header #menu-menu-principal.overlay ul {display: block; position: initial; min-width: initial; height: auto; padding-top: 20px; background:transparent; box-shadow:none; }
.header #menu-menu-principal.overlay  li.focus > ul, .header nav.overlay ul li:hover > ul {top: initial; -webkit-transform: initial;left: initial;}
.header #menu-menu-principal.overlay .menu-item-has-children > a::before {display: none;}
.header #menu-menu-principal.overlay .sub-menu {padding: 7px 20px 0 20px;}



.woocommerce div.product form.cart .variations label {display: block; line-height: 1.3}
.woocommerce div.product form.cart .variations select {width: 100%;}

.woocommerce div.product form.cart div.quantity {width: 100%; margin-bottom: 35px !important; padding-bottom: 30px;  border-bottom: 1px dashed #d1baaa; display: flex; justify-content: flex-end; align-items: center;}
.woocommerce div.product form.cart .variations {margin-bottom: 35px !important; padding-bottom: 30px;  border-bottom: 1px dashed #d1baaa !important;}

.woocommerce div.product p.price, .woocommerce div.product span.price {color: #000 !important; font-size: 25px !important; font-weight: 800; margin-bottom: 10px; }
span.woocommerce-Price-currencySymbol {font-size: 16px;}
.woocommerce div.product .stock {color: #000 !important; margin-bottom: 10px; text-align: right;}
.woocommerce div.product form.cart .variations select {border: 2px solid var(--primary); padding: 5px; border-radius: 20px;}
.woocommerce .quantity .qty {border: 2px solid var(--primary); padding: 5px; border-radius: 20px; width: 60px !important;}
.quantity-css {font-weight: 600; margin-right: 10px;}

.woocommerce div.product form.cart .button {vertical-align: middle; float: right !important; position: relative;  align-self: center;  background: #fff;  border: 2px solid var(--primary); padding: 10px 15px;
    font-size: 14px; display: inline-block;  font-weight: 600; color: #000;}
 .woocommerce div.product form.cart .button:hover   {cursor: pointer; background: var(--primary); color: #fff;}

select.selected-templates {border: 1px solid #d1baaa; padding: 5px; width: 100%; max-width: 100%; margin-bottom: 20px;}
.cars-container .car-field {margin: 0 1px 2px 1px; width: 40px; max-width: calc(100% / 6 - 2px); text-align: center; border: 1px solid #d1baaa; aspect-ratio: 1/1;}
.pr-field-wrap {margin-bottom: 35px !important; padding-bottom: 30px;  border-bottom: 1px dashed #d1baaa !important;}
.pr-field-wrap label {font-weight: 600; margin-bottom: 10px; display: block;}
#calc_shipping_country_field, #calc_shipping_city_field, #calc_shipping_postcode_field, .woocommerce-shipping-totals .woocommerce-shipping-destination {display: none !important;}



#add_payment_method .wc-proceed-to-checkout a.checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button 
{ position: relative; align-self: center; background: var(--primary) !important; color: #fff !important; border: 2px solid var(--primary); padding: 7px 15px; font-size: 14px; display: inline-block; font-weight: 600;}
#add_payment_method .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover  
{cursor: pointer;  background-color: #fff !important; color: var(--dark) !important;}
#add_payment_method .cart-collaterals section.shipping-calculator-form, .woocommerce-cart .cart-collaterals section.shipping-calculator-form, .woocommerce-checkout .cart-collaterals section.shipping-calculator-form { padding:0; }


@media only screen and (max-width: 1000px) {
.intro {padding: 80px 0 20px 0;}
.intro .hero {width: 80%;}

}



@media only screen and (max-width: 768px) {
.header .headnav ul {display: none;}
.header .headnav ul.overlay {display: block;}
#burger-menu {display: block;}
.intro {padding: 0;}
.intro .hero {width: 100%; position: relative;}
.intro .introcontent {padding: 20px; background: #fff; flex-direction: column;}
.intro .introcontent article:before {display: none;}
.intro .introcontent article {padding: 20px;}
.intro .introcontent article h1 {font-size: 22px; max-width: 100%;}
.sectitle {font-size: 22px;}
.promobloc {background: #54BCBF; padding: 20px; flex-direction: column;}
.promobloc img {display: none;}
.promobloc article {padding: 0;}
.engagement article {flex: 0 0 100%; }
.engagement {padding: 0; }
.promobloc article h1, .engagement article h1 {font-size: 22px;}
.ensavoirplus .blocs, .valeur .row {grid-template-columns: 1fr;}
.valeur .row {grid-gap: 50px;}
footer .row {padding: 0 20px;}
footer .footernewsletter {flex-direction: column;}
footer .footernewsletter h1 img {display: none;}
footer .bottom {flex-direction: column;}
footer .bottom nav {margin: 40px 0;}
footer .bottom .leftbloc, footer .bottom .rightbloc {padding: 0; border: none;}
footer .bottom .leftbloc img {margin: 0 auto;}
footer .bottom .rightbloc h3 {text-align: center;}
footer .bottom .rightbloc .icons img {display: none;}
footer .bottom .rightbloc .icons .sm img {display: block;}
footer .bottom nav ul li {text-align: center;}
footer .bottom .rightbloc .icons {justify-content: center;}
footer .end .row {flex-direction: column; align-items: center;}
footer .end .row span {margin-bottom: 20px;}
footer .end .row ul {text-align: center;}
.maincat aside {display: none;}
.maincat .products {grid-template-columns: 1fr;}
.maincat .prd img {margin: 0 auto;}
.catbanner {padding-left: 20px;}
.catbanner h1 {font-size: 22px;}
.catbanner span {font-size: 12px;}
.catbanner img {height: 240px !important; object-fit: none; object-position: center;}
.singleprodcut .productinfo {padding: 20px 0;}
.singleprodcut .productinfo .prdimage:before {top: 0; left: 0; height: 100%; width: 100%;}
.singleprodcut .productinfo .prdimage {width: 100% !important; padding: 20px;}
.singleprodcut .productdetails {padding: 10px;}
.singleprodcut .productdetails .tab-panels {border-top: none;}
.singleprodcut .productdetails .tabset > label {width: 100%;}
.popup article {flex-direction: column; height: calc(100vh - 80px); overflow-x: scroll;}
.singleprodcut .productinfo .prdmeta h1 {font-size: 22px;}
.liststores {grid-template-columns: 1fr;}
#wpsl-search-wrap form, #wpsl-search-wrap .wpsl-select-wrap {flex-direction: column;}
#wpsl-radius,#wpsl-results {margin-bottom: 10px;}
.singlepage .pagetitle {font-size: 24px;}
.storeimgmap, .storeinfohours {grid-template-columns: 1fr;}
.wpsl-gmap-canvas {height: 400px !important;}
.preheader p {text-align: center;}
.header .mainheader .headmeta form, .header .mainheader .headmeta ul {display: none;}
.header .mainheader .row {justify-content: center;}
.header .headnav .headaction {font-size: 11px;}
.prdlist {width: 100%;}
#informations {overflow-y: scroll;}
}