/* ===== préversion + aperçus (?bsapercu=1) : masquer le footer réel,
   remplacé par le footer A ; la classe body est posée par bs-chrome.php ===== */
body.bs-chrome-actif .wd-footer,
body.bs-chrome-actif .wd-prefooter,
body.bs-chrome-actif .wd-copyrights{display:none !important;}

/* ===== header BS 2026 · look direction B (classes STABLES uniquement) ===== */
.whb-header_820260{--bsc-y:#FFD600;--bsc-k:#181A1F;--bsc-line:#E4E1D8;--bsc-paper:#FAF9F6;}
.whb-header_820260 .whb-general-header{background-color:#fff;border-bottom:1px solid var(--bsc-line);}
.whb-header_820260 .whb-header-bottom{background-color:#fff !important;border-bottom:1px solid var(--bsc-line);box-shadow:none !important;}
/* recherche : champ arrondi fond papier + bouton jaune */
.whb-header_820260 .wd-search-form form{border:1.5px solid var(--bsc-line);border-radius:999px;overflow:hidden;background:var(--bsc-paper);}
.whb-header_820260 .wd-search-form input[type="text"]{border:0;background:transparent;padding-inline-start:18px;box-shadow:none;}
.whb-header_820260 .wd-search-form button[type="submit"],
.whb-header_820260 .wd-search-form .searchsubmit{background:var(--bsc-y);color:var(--bsc-k);border-radius:999px;margin:4px;font-weight:700;}
.whb-header_820260 .wd-search-form button[type="submit"]:hover{background:#E8BF00;}
/* rail des rayons : pastilles sur une ligne, défilable */
.whb-header_820260 .whb-header-bottom .wd-nav-header{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding-block:4px;}
.whb-header_820260 .whb-header-bottom .wd-nav-header::-webkit-scrollbar{display:none;}
.whb-header_820260 .whb-header-bottom .wd-nav-header > li > a{border-radius:999px;padding:9px 15px;font-weight:600;font-size:13.5px;color:#23252B;white-space:nowrap;background:transparent;transition:background .15s ease;}
.whb-header_820260 .whb-header-bottom .wd-nav-header > li > a:hover{background:#F4F3EF;color:var(--bsc-k);}
.whb-header_820260 .whb-header-bottom .wd-nav-header > li:first-child > a{background:var(--bsc-y);font-weight:700;}
.whb-header_820260 .whb-header-bottom .wd-nav-header > li:first-child > a:hover{background:#E8BF00;}
/* bloc retrait Sainte-Maxime */
.whb-header_820260 .bs-h-pickup{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#23252B;white-space:nowrap;}
.whb-header_820260 .bs-h-pickup svg{width:16px;height:16px;color:#8A7100;flex:0 0 auto;}
.whb-header_820260 .bs-h-pickup b{font-weight:800;}
@media (max-width:1199px){.whb-header_820260 .bs-h-pickup{display:none;}}

/* ===== footer A ===== */
/* ==========================================================================
   FOOTER BUY-SMART · styles préfixés bs-f-* · aucun reset global
   ========================================================================== */
.bs-f{
  --y:#FFD600; --ink:#14151A; --ink2:#1B1D23; --line:#2C2F37;
  --fog:#B9BCC5; --fog2:#9A9EA8; --w:#FFFFFF;
  background:var(--ink); color:var(--fog);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.bs-f *,.bs-f *::before,.bs-f *::after{box-sizing:border-box;}
.bs-f h2,.bs-f p,.bs-f ul,.bs-f li,.bs-f form,.bs-f address{margin:0;}
.bs-f ul{list-style:none;padding:0;}
.bs-f a{color:inherit;text-decoration:none;}
.bs-f img{display:block;max-width:100%;height:auto;}
.bs-f :focus-visible{outline:2px solid var(--y);outline-offset:3px;border-radius:3px;}
.bs-f-wrap{max-width:1280px;margin:0 auto;padding:0 22px;}
.bs-f-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;}
/* note Google : 5 étoiles remplies à 90 % */
.bs-f-stars{position:relative;display:inline-block;font-size:13px;letter-spacing:1.5px;line-height:1;}
.bs-f-stars-b{color:#454952;}
.bs-f-stars-f{position:absolute;left:0;top:0;width:90%;overflow:hidden;white-space:nowrap;color:#FABB05;}
/* titres de colonne */
.bs-f-ct{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--w);}
/* listes de liens */
.bs-f-links{display:grid;}
.bs-f-links a{display:flex;align-items:center;min-height:44px;font-size:13.5px;color:var(--fog);
  transition:color .18s ease,transform .18s ease;}
.bs-f-links a:hover{color:var(--y);transform:translateX(3px);}
/* adresse */
.bs-f-addr{font-style:normal;}
.bs-f-hours{color:var(--fog2);}
/* newsletter */
.bs-f-news-p{font-size:13px;color:var(--fog);max-width:38ch;}
.bs-f-news-p em{font-style:normal;background:var(--y);color:#181A1F;font-weight:700;
  padding:0 .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.bs-f-field{display:flex;margin-top:16px;border:1px solid #3A3E48;border-radius:10px;
  overflow:hidden;background:#101116;transition:border-color .2s ease;}
.bs-f-field:focus-within{border-color:var(--y);}
.bs-f-field input{flex:1 1 auto;min-width:0;background:transparent;border:0;color:var(--w);
  font:inherit;font-size:14px;padding:13px 14px;min-height:48px;}
.bs-f-field input::placeholder{color:#767A84;}
.bs-f-field input:focus{outline:0;}
.bs-f-field button{flex:0 0 auto;background:var(--y);color:#181A1F;border:0;font:inherit;
  font-weight:800;font-size:13.5px;padding:0 20px;min-height:48px;cursor:pointer;
  transition:filter .15s ease;}
.bs-f-field button:hover{filter:brightness(1.08);}
.bs-f-consent{display:flex;gap:10px;align-items:flex-start;min-height:44px;padding:9px 0;
  font-size:11.5px;line-height:1.5;color:var(--fog2);cursor:pointer;}
.bs-f-consent input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;accent-color:var(--y);}
.bs-f-consent a{color:var(--fog);text-decoration:underline;text-underline-offset:2px;}
.bs-f-consent a:hover{color:var(--y);}
/* barre légale */
.bs-f-legal{border-top:1px solid var(--line);}
.bs-f-legal-in{display:grid;gap:18px;padding-top:20px;padding-bottom:24px;}
.bs-f-pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
.bs-f-pay-t{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fog2);}
.bs-f-pay-l{display:flex;flex-wrap:wrap;gap:6px;}
.bs-f-pay-l li{background:var(--w);border-radius:5px;padding:3px 6px;line-height:0;}
.bs-f-pay-l img{height:19px;width:auto;}
.bs-f-retract{font-size:11.5px;color:var(--fog2);}
.bs-f-copy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:11.5px;color:var(--fog2);}
.bs-f-copy a{color:var(--fog);text-decoration:underline;text-underline-offset:2px;}
.bs-f-copy a:hover{color:var(--y);}
.bs-f-legal-logo img{height:22px;width:auto;opacity:.9;}
.bs-f-legalnav{border-top:1px solid var(--line);}
.bs-f-legalnav-l{display:flex;flex-wrap:wrap;gap:0 22px;padding-top:4px;padding-bottom:8px;}
.bs-f-legalnav-l li{display:flex;align-items:center;}
.bs-f-legalnav-l a{display:flex;align-items:center;min-height:40px;font-size:11.5px;color:var(--fog2);
  transition:color .18s ease;}
.bs-f-legalnav-l a:hover{color:var(--y);}
@media (min-width:900px){
  .bs-f-legal-in{grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:18px 40px;}
  .bs-f-copy{justify-content:flex-end;}
}
/* ---- mobile : cibles tactiles à 44 px ---- */
@media (max-width:899px){
  .bs-f .bs-f-links a{min-height:44px;}
  .bs-f .bs-f-legalnav-l a{min-height:44px;}
  .bs-f .bs-f-logo{display:inline-block;padding:7px 0;}
  .bs-f .bs-f-legal-logo{display:inline-flex;align-items:center;min-height:44px;}
  .bs-f .bs-f-note{min-height:46px;}
}
@media (prefers-reduced-motion:reduce){
  .bs-f *{transition:none !important;}
}
/* ---------- A · barre de service ---------- */
.bs-f--a .bs-f-service{background:#16171D;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.bs-f--a .bs-f-service-in{display:grid;}
.bs-f--a .bs-f-svc{display:flex;gap:12px;align-items:flex-start;padding:14px 0;}
.bs-f--a .bs-f-svc+.bs-f-svc{border-top:1px solid var(--line);}
.bs-f--a .bs-f-svc svg{width:19px;height:19px;flex:0 0 auto;color:var(--y);margin-top:1px;}
.bs-f--a .bs-f-svc b{display:block;color:var(--w);font-weight:600;font-size:13px;line-height:1.4;}
.bs-f--a .bs-f-svc small{display:block;color:var(--fog2);font-size:11.5px;line-height:1.4;margin-top:1px;}
@media (min-width:900px){
  .bs-f--a .bs-f-service-in{grid-template-columns:repeat(3,1fr);}
  .bs-f--a .bs-f-svc{padding:18px 30px 18px 0;}
  .bs-f--a .bs-f-svc+.bs-f-svc{border-top:0;border-left:1px solid var(--line);padding-left:30px;}
}
/* ---------- A · grille ---------- */
.bs-f--a .bs-f-grid{display:grid;padding-top:38px;padding-bottom:34px;gap:0;}
.bs-f--a .bs-f-brand{padding-bottom:26px;}
.bs-f--a .bs-f-logo img{height:30px;width:auto;}
.bs-f--a .bs-f-pitch{margin-top:16px;font-size:13px;max-width:36ch;}
.bs-f--a .bs-f-addr{margin-top:22px;padding-left:14px;border-left:3px solid var(--y);display:grid;gap:3px;}
.bs-f--a .bs-f-addr b{color:var(--w);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.bs-f--a .bs-f-addr>span{font-size:13.5px;line-height:1.5;}
.bs-f--a .bs-f-hours{font-size:12.5px !important;}
.bs-f--a .bs-f-map{display:inline-flex;align-items:center;gap:6px;margin-top:8px;min-height:32px;
  font-size:12.5px;font-weight:700;color:var(--y);}
@media (max-width:899px){.bs-f--a .bs-f-map{min-height:44px;margin-top:4px;}}
.bs-f--a .bs-f-map svg{width:13px;height:13px;}
.bs-f--a .bs-f-map:hover{text-decoration:underline;text-underline-offset:3px;}
.bs-f--a .bs-f-note{display:inline-flex;align-items:center;gap:10px;margin-top:20px;min-height:44px;
  border:1px solid var(--line);border-radius:999px;padding:0 16px;font-size:12.5px;
  white-space:nowrap;transition:border-color .2s ease,background-color .2s ease;}
.bs-f--a .bs-f-note b{color:var(--w);font-weight:700;}
.bs-f--a .bs-f-note:hover{border-color:#4A4E58;background:#191B21;}
/* accordéons (mobile) : ouverts par défaut, refermés par le script.
   L'état visuel passe par .is-closed posé sur la colonne (pas de :has() requis). */
.bs-f--a .bs-f-col{border-top:1px solid var(--line);}
.bs-f--a .bs-f-acc{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:52px;padding:0;background:none;border:0;cursor:pointer;
  color:inherit;font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;text-align:left;}
.bs-f--a .bs-f-chev{width:18px;height:18px;flex:0 0 auto;color:var(--fog2);
  transition:transform .25s ease;}
.bs-f--a .bs-f-acc[aria-expanded="false"] .bs-f-chev{transform:rotate(-90deg);}
.bs-f--a .bs-f-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s ease;}
.bs-f--a .bs-f-panel>div{overflow:hidden;transition:visibility 0s linear 0s;}
.bs-f--a .bs-f-col.is-closed .bs-f-panel{grid-template-rows:0fr;}
.bs-f--a .bs-f-col.is-closed .bs-f-panel>div{visibility:hidden;transition-delay:.25s;}
.bs-f--a .bs-f-links{padding-bottom:8px;}
.bs-f--a .bs-f-news{border-top:1px solid var(--line);padding-top:26px;margin-top:2px;}
.bs-f--a .bs-f-news .bs-f-ct{display:block;}
.bs-f--a .bs-f-news-p{margin-top:14px;}
@media (min-width:900px){
  .bs-f--a .bs-f-grid{grid-template-columns:1.25fr .85fr 1fr 1.2fr;
    gap:clamp(26px,3.2vw,48px);padding-top:54px;padding-bottom:50px;}
  .bs-f--a .bs-f-brand{padding-bottom:0;}
  .bs-f--a .bs-f-col,.bs-f--a .bs-f-news{border-top:0;padding-top:0;margin-top:0;}
  .bs-f--a .bs-f-acc{min-height:0;padding:0 0 16px;pointer-events:none;cursor:default;}
  .bs-f--a .bs-f-chev{display:none;}
  .bs-f--a .bs-f-panel{grid-template-rows:1fr !important;}
  .bs-f--a .bs-f-panel>div{visibility:visible !important;}
  .bs-f--a .bs-f-links a{min-height:0;padding:6px 0;}
  .bs-f--a .bs-f-news .bs-f-ct{padding-bottom:16px;}
}
/* ===== rail desktop : confinement + flèches ===== */
.whb-header_820260 .whb-header-bottom .whb-column{min-width:0;max-width:100%;}
.whb-header_820260 .whb-header-bottom .wd-header-nav{min-width:0;max-width:100%;}
.whb-header_820260 .whb-header-bottom .wd-nav-header{max-width:100%;scroll-behavior:smooth;}
.bs-h-railwrap{position:relative;}
.bs-h-rnav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:34px;height:34px;border-radius:999px;background:#fff;border:1px solid #E4E1D8;box-shadow:0 4px 14px rgba(24,26,31,.14);cursor:pointer;font-size:20px;line-height:1;color:#181A1F;display:flex;align-items:center;justify-content:center;padding:0 0 3px;}
.bs-h-rnav:hover{border-color:#181A1F;}
.bs-h-rnav--prev{left:-6px;}
.bs-h-rnav--next{right:-6px;}
.bs-h-rail-start .bs-h-rnav--prev,.bs-h-rail-end .bs-h-rnav--next,.bs-h-rail-noscroll .bs-h-rnav{display:none;}
@media (max-width:1024px){.bs-h-rnav{display:none;}}

/* ===== étape B (08/08) · empilement : les suggestions de recherche passent DEVANT le rail ===== */
.whb-header_820260 .whb-general-header{position:relative;z-index:360;}
.whb-header_820260 .whb-header-bottom{position:relative;z-index:350;}
.whb-header_820260 .whb-header-bottom .whb-col-mobile{position:relative;z-index:2;}
.whb-header_820260 .whb-header-bottom .whb-col-center{position:relative;z-index:1;}

/* ===== étape B (08/08) · charte : placeholder et croix de recherche en #62656D (AA sur fond clair) ===== */
.whb-header_820260 .wd-search-form input[type="text"]::placeholder{color:#62656D;opacity:1;}
.whb-header_820260 .wd-search-form .wd-clear-search{color:#62656D;}

/* ===== étape B (08/08) · rail des rayons en mobile : 3e rangée sous la recherche =====
   La colonne du rail (whb-col-center, masquée par whb-visible-lg sous 1025px) est
   réaffichée en pleine largeur SOUS la colonne recherche (whb-col-mobile). La rangée
   header-bottom n'est pas collante : hauteur auto sans incidence sur l'offset sticky. */
@media (max-width:1024px){
  .whb-header_820260 .whb-header-bottom .whb-header-bottom-inner{flex-wrap:wrap;height:auto;max-height:none;padding-block:6px;row-gap:2px;}
  .whb-header_820260 .whb-header-bottom .whb-col-mobile{flex:0 0 100%;max-width:100%;}
  .whb-header_820260 .whb-header-bottom .whb-col-center{display:flex;flex:0 0 100%;max-width:100%;order:5;min-width:0;}
  .whb-header_820260 .whb-header-bottom .wd-nav-header{gap:4px;padding-block:2px;}
  .whb-header_820260 .whb-header-bottom .wd-nav-header > li > a{display:flex;align-items:center;min-height:44px;padding:0 13px;font-size:13px;}
}

/* ===== étape C (08/08) · panneau mobile « Le Comptoir » =====
   Section 2 de maquettes/menu-mobile.html, posée TELLE QUELLE (feuille de production).
   Tout est scopé .mobile-nav ; jamais de display sur .wd-sub-menu ; la fusion des
   onglets est faite ici en CSS, le réglage « Show categories menu » reste coché. */
/* WoodMart livre .mobile-nav en display:block, overflow-y:auto, padding 0 (mesuré).
   On le passe en colonne flex : c'est ce qui permet d'ancrer le comptoir en bas quand
   la liste est plus courte que l'écran. Tous les enfants sont des blocs, le rendu ne
   change pas par ailleurs. Sans cette règle, `margin-top:auto` serait inerte.          */
.mobile-nav{
  --y:#FFD600; --k:#181A1F; --gold:#8A7100; --paper:#FAF9F6; --w:#FFFFFF;
  --fog:#62656D; --fogl:#B9BCC5; --line:#E4E1D8;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--w);
  display:flex; flex-direction:column;
}

/* ---- largeur : 300px coupait les libellés longs à 15px/700 ---- */
.wd-side-hidden-nav{width:min(320px,86vw);}

/* ---- fusion des deux onglets en une seule liste ----
   C'est le CSS qui fait la fusion, PAS un réglage du thème. Les trois règles ne
   nomment aucune des deux listes : elles disent « une seule liste s'affiche, la
   première du DOM, quel que soit son .wd-active ». Le panneau ne peut donc jamais
   s'ouvrir vide, que WoodMart imprime une liste ou deux, et le résultat survit à
   une bascule du réglage « Show categories menu ».
   NE PAS écrire .mobile-pages-menu{display:none} : si c'est la seule liste
   imprimée, le panneau s'ouvre VIDE.                                              */
.mobile-nav .wd-nav-mob-tab{display:none;}
.mobile-nav .wd-nav-mobile{display:block;}
.mobile-nav .wd-nav-mobile ~ .wd-nav-mobile{display:none;}

/* ---- bandeau enseigne : la barre de fermeture devient un bandeau encre ---- */
/* display:flex est posé explicitement : ne pas dépendre de la valeur du thème */
.mobile-nav .wd-heading{
  display:flex;background:var(--k);height:48px;min-height:48px;padding:0 6px 0 18px;
  align-items:center;justify-content:flex-end;position:sticky;top:0;z-index:3;
}
.mobile-nav .close-side-widget{margin:0;}
.mobile-nav .close-side-widget > a{
  display:flex;align-items:center;justify-content:center;gap:0;
  width:44px;height:44px;border-radius:999px;color:#fff;
  border:1px solid rgba(255,255,255,.22);transition:background-color .18s ease;
}
.mobile-nav .close-side-widget > a:hover{background:rgba(255,255,255,.1);}
.mobile-nav .close-side-widget .wd-action-icon{position:relative;width:15px;height:15px;display:block;}
.mobile-nav .close-side-widget .wd-action-icon::before,
.mobile-nav .close-side-widget .wd-action-icon::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1.7px;background:#fff;border-radius:2px;
}
.mobile-nav .close-side-widget .wd-action-icon::before{transform:rotate(45deg);}
.mobile-nav .close-side-widget .wd-action-icon::after{transform:rotate(-45deg);}
/* « Fermer » reste lu par les lecteurs d'écran, il n'est plus affiché */
.mobile-nav .close-side-widget .wd-action-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---- la liste des rayons ---- */
.mobile-nav .wd-nav-mobile{margin:0;padding:0;list-style:none;}
.mobile-nav .wd-nav-mobile > li{position:relative;}
/* le filet est en retrait de 50px : il se cale sous le texte, pas sous l'icône,
   ce qui dessine une étagère au lieu d'un tableau */
.mobile-nav .wd-nav-mobile > li + li::before{
  content:"";position:absolute;top:0;left:50px;right:0;height:1px;background:var(--line);
}
.mobile-nav .wd-nav-mobile > li > a{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:0 6px 0 18px;
  font-size:15px;font-weight:700;line-height:1.25;text-transform:none;letter-spacing:0;
  color:var(--k);text-decoration:none;transition:padding-left .2s ease,background-color .18s ease;
}
.mobile-nav .wd-nav-mobile > li > a:hover{background:var(--paper);padding-left:24px;}
.mobile-nav .wd-nav-mobile .nav-link-text{flex:1 1 auto;min-width:0;}

/* icônes : les SVG filaires déjà en médiathèque, mis au gabarit */
.mobile-nav .wd-nav-img{
  width:22px;height:22px;flex:0 0 22px;object-fit:contain;
  filter:brightness(0);opacity:.9;
}

/* ---- l'ouvre-sous-menu : plus de colonne, plus de filet vertical ----
   La rangée devient deux cibles : le libellé mène au rayon, le chevron déplie.
   Le chevron n'existe pas quand le rayon n'a pas de sous-niveau : le doigt sait
   avant de toucher. C'est WoodMart qui ne pose .wd-nav-opener que sur les
   éléments à enfants, il n'y a rien à faire pour l'obtenir.                      */
.mobile-nav .wd-nav-mobile .wd-nav-opener{
  position:absolute;top:0;right:0;width:46px;height:48px;
  border:0 !important;background:none;
  display:flex;align-items:center;justify-content:center;
}
.mobile-nav .wd-nav-mobile .wd-nav-opener::before,
.mobile-nav .wd-nav-mobile .wd-nav-opener::after{
  content:"";position:absolute;left:50%;width:7.5px;height:1.7px;border-radius:2px;background:var(--fog);
  transition:transform .2s ease,background-color .2s ease;
}
.mobile-nav .wd-nav-mobile .wd-nav-opener::before{transform:translate(-72%,-2.6px) rotate(45deg);}
.mobile-nav .wd-nav-mobile .wd-nav-opener::after{transform:translate(-72%,2.6px) rotate(-45deg);}
.mobile-nav .wd-nav-mobile .wd-nav-opener.wd-active::before{transform:translate(-72%,2.6px) rotate(-45deg);background:var(--k);}
.mobile-nav .wd-nav-mobile .wd-nav-opener.wd-active::after{transform:translate(-72%,-2.6px) rotate(45deg);background:var(--k);}
/* le lien laisse la place au chevron seulement s'il y en a un */
.mobile-nav .wd-nav-mobile > li.menu-item-has-children > a{padding-right:50px;}

/* ---- rangée dépliée ---- */
.mobile-nav .wd-nav-mobile > li.opener-page > a{background:var(--paper);}

/* ---- le sous-niveau ----
   ATTENTION : ne jamais toucher au display du sous-menu, c'est jQuery qui pose
   un style inline en slideDown. On n'habille que l'intérieur.                    */
.mobile-nav .wd-sub-menu{
  margin:0;padding:4px 0 8px;list-style:none;background:var(--paper);
  box-shadow:inset 2px 0 0 var(--y);
}
.mobile-nav .wd-sub-menu > li > a{
  display:flex;align-items:center;min-height:44px;padding:0 18px 0 50px;
  font-size:13.5px;font-weight:500;text-transform:none;color:var(--fog);text-decoration:none;
  transition:color .18s ease,padding-left .2s ease;
}
/* survol à l'encre et non au doré : le doré sur papier tombe à 4,49:1, sous AA */
.mobile-nav .wd-sub-menu > li > a:hover{color:var(--k);padding-left:56px;}

/* ---- les deux exceptions jaunes, et elles seules ----
   Classes posées sur l'élément de menu (Apparence > Menus > Classes CSS).       */
.mobile-nav .wd-nav-mobile > li.bs-mn-new > a{
  background:var(--y);min-height:54px;font-weight:800;font-size:15.5px;
}
.mobile-nav .wd-nav-mobile > li.bs-mn-new > a:hover{background:var(--y);}
.mobile-nav .wd-nav-mobile > li.bs-mn-new + li::before{display:none;}

.mobile-nav .wd-nav-mobile > li.bs-mn-deal{margin-top:6px;border-top:1px solid var(--line);}
.mobile-nav .wd-nav-mobile > li.bs-mn-deal::before{display:none;}
/* fond BLANC et non papier : le doré #8A7100 tombe à 4,49:1 sur #FAF9F6,
   sous le seuil AA de 4,5. Sur blanc il remonte à 4,73:1.                        */
.mobile-nav .wd-nav-mobile > li.bs-mn-deal > a{
  background:var(--w);min-height:54px;font-weight:800;color:var(--gold);
}
.mobile-nav .wd-nav-mobile > li.bs-mn-deal > a:hover{background:var(--paper);color:var(--k);}
/* l'icône reste à l'encre comme les 11 autres : en production .wd-nav-img est un
   <img> de la médiathèque, aucun filter CSS ne le recolore proprement en #8A7100.
   L'accent doré est porté par le libellé, ça suffit.                              */

/* ---- le comptoir ----
   Il vit dans la zone de widgets NATIVE de WoodMart « Area after the mobile menu »
   (id mobile-menu-widgets), que le thème imprime en dernier enfant du panneau.
   Un widget « HTML personnalisé » suffit : zéro PHP, zéro hook, zéro JavaScript.
   L'ancrage est posé sur .widgetarea-mobile, qui est l'enfant DIRECT du panneau :
   sticky a besoin d'un parent plus haut que lui, ce que le conteneur du widget,
   à la hauteur de son contenu, ne serait pas.                                     */
.mobile-nav .widgetarea-mobile{
  position:sticky;bottom:0;z-index:2;margin-top:auto;
  background:var(--w);border-top:1px solid var(--line);
  padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -10px 24px rgba(24,26,31,.06);
}
.mobile-nav .mobile-menu-widget{margin:0;}
.mobile-nav .widgetarea-mobile .widget-title{display:none;}
.mobile-nav .bs-mn-access{display:flex;gap:8px;margin:0 0 9px;padding:0;list-style:none;}
.mobile-nav .bs-mn-access li{flex:1 1 0;min-width:0;}
.mobile-nav .bs-mn-access a{
  display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-size:12.5px;font-weight:700;color:var(--k);text-decoration:none;white-space:nowrap;
  transition:border-color .18s ease,background-color .18s ease;
}
.mobile-nav .bs-mn-access a:hover{border-color:var(--k);background:var(--w);}
.mobile-nav .bs-mn-access svg{width:17px;height:17px;flex:0 0 17px;}

.mobile-nav .bs-mn-pickup{
  display:flex;align-items:flex-start;gap:9px;margin:0;padding:0 4px;
  font-size:12.5px;line-height:1.35;color:var(--fog);
}
.mobile-nav .bs-mn-pickup svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;color:var(--gold);}
.mobile-nav .bs-mn-pickup b{display:block;color:var(--k);font-weight:800;font-size:13px;}
.mobile-nav .bs-mn-pickup b mark{background:var(--y);color:var(--k);padding:0 .1em;}
.mobile-nav .bs-mn-pickup small{display:block;font-size:11.5px;font-weight:500;color:var(--fog);margin-top:1px;}

/* Contact : rangée pleine largeur, cible 44px comme partout ailleurs.
   #8A8D95 est proscrit sur du texte (3,15:1 sur papier), on reste sur --fog.     */
.mobile-nav .bs-mn-links{
  display:flex;margin:7px 0 0;padding:6px 0 0;
  border-top:1px solid var(--line);list-style:none;
}
.mobile-nav .bs-mn-links li{flex:1 1 auto;}
.mobile-nav .bs-mn-links a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:0 4px;
  font-size:12.5px;font-weight:600;color:var(--fog);text-decoration:none;
}
.mobile-nav .bs-mn-links a:hover{color:var(--gold);}
.mobile-nav .bs-mn-links svg{width:14px;height:14px;flex:0 0 14px;}

/* ---- accessibilité ----
   Pas de border-radius sur le focus : le tracé suit déjà le rayon de l'élément, et
   une valeur fixe transformerait les deux pastilles du comptoir en rectangles.      */
.mobile-nav a:focus-visible,
.mobile-nav .wd-nav-opener:focus-visible{outline:2px solid var(--k);outline-offset:-3px;}
.mobile-nav .wd-heading a:focus-visible{outline-color:#fff;}
/* le panneau lui-même porte le glissement, et le voile est son FRÈRE, pas son
   descendant : les deux doivent être nommés, `.mobile-nav *` ne les atteint pas.
   Le dépliage du sous-niveau reste animé par le slideDown jQuery de WoodMart,
   qu'aucune règle CSS ne peut arrêter.                                             */
@media (prefers-reduced-motion:reduce){
  .mobile-nav,.mobile-nav *,.mobile-nav *::before,.mobile-nav *::after,
  .wd-close-side{transition:none !important;animation:none !important;}
}

/* ===== étape C (08/08) · surcharges d'intégration, constatées sur le SERVI =====
   base-deferred.css du thème (imprimée APRÈS bs-chrome.css) repasse la pastille
   « Fermer » à 25px (.wd-heading .wd-action-btn.wd-style-text > a) et le bandeau
   en relative. Mêmes valeurs que la section 2, spécificité rehaussée, classes
   stables uniquement. */
.mobile-nav .wd-heading .close-side-widget.wd-action-btn.wd-style-text > a{width:44px;height:44px;}
/* header-el-mobile-nav.css pose aussi background-color:inherit sur .wd-heading.
   Retour Alex 08/08 soir : le bandeau prend le fond du panneau (blanc) au lieu de
   l'encre de la maquette ; filet bas discret pour la séparation quand la liste
   défile dessous. La croix passe à l'encre (bloc « retours » en fin de fichier). */
.mobile-nav.wd-side-hidden .wd-heading{position:sticky;top:0;z-index:3;background-color:var(--w);border-bottom:1px solid var(--line);}
/* header-el-mobile-nav.css peint l'ouvre-menu actif en noir plein
   (background-color:var(--wd-primary-color)) : le chevron reste sans fond,
   comme la section 2 le veut, l'état ouvert est dit par la rangée papier. */
.mobile-nav.wd-side-hidden .wd-nav-mobile .wd-nav-opener,
.mobile-nav.wd-side-hidden .wd-nav-mobile .wd-nav-opener.wd-active{background:none;color:inherit;}

/* ===== étape D (08/08) · footer A : habillage du formulaire mc4wp 15528 =====
   Le template stocké du formulaire porte des styles INLINE (partagé avec le footer
   actuel du site : on n'y touche pas avant la bascule), d'où les !important.
   Valeurs identiques à .bs-f-field / .bs-f-consent de la maquette. */
.bs-f .bs-f-form--mc4wp .mc4wp-form-fields > div:first-child{display:flex !important;margin-top:16px;border:1px solid #3A3E48;border-radius:10px;overflow:hidden;background:#101116;transition:border-color .2s ease;}
.bs-f .bs-f-form--mc4wp .mc4wp-form-fields > div:first-child:focus-within{border-color:var(--y);}
.bs-f .bs-f-form--mc4wp input[type="email"]{flex:1 1 auto;min-width:0;background:transparent !important;border:0 !important;color:var(--w) !important;font:inherit;font-size:14px;padding:13px 14px !important;min-height:48px;margin:0 !important;}
.bs-f .bs-f-form--mc4wp input[type="email"]::placeholder{color:#767A84;}
.bs-f .bs-f-form--mc4wp input[type="submit"]{flex:0 0 auto;background:var(--y) !important;color:#181A1F !important;border:0 !important;font:inherit;font-weight:800;font-size:13.5px;padding:0 20px !important;min-height:48px;cursor:pointer;transition:filter .15s ease;margin:0 !important;border-radius:0;}
.bs-f .bs-f-form--mc4wp input[type="submit"]:hover{filter:brightness(1.08);}
.bs-f .bs-f-form--mc4wp .mc4wp-form-fields > div:last-child{margin-top:0 !important;}
.bs-f .bs-f-form--mc4wp .mc4wp-form-fields > div:last-child label{display:flex !important;gap:10px;align-items:flex-start !important;min-height:44px;padding:9px 0;font-size:11.5px;line-height:1.5;color:var(--fog2);cursor:pointer;margin:0 !important;font-weight:400;}
.bs-f .bs-f-form--mc4wp input[type="checkbox"]{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0 !important;accent-color:var(--y);}
.bs-f .bs-f-form--mc4wp .mc4wp-form-fields a{color:var(--fog);text-decoration:underline;text-underline-offset:2px;}
.bs-f .bs-f-form--mc4wp .mc4wp-form-fields a:hover{color:var(--y);}
.bs-f .bs-f-form--mc4wp .mc4wp-response{margin-top:10px;font-size:12.5px;color:var(--fog);}
.bs-f .bs-f-form--mc4wp .mc4wp-response p{margin:0;}

/* ===== étape D (08/08) · footer A : badge Trustindex dans la pastille note =====
   Une seule source de note (décision du 07/08), le carrousel n'est pas chargé. */
.bs-f .bs-f-note--ti{height:auto;min-height:44px;padding:8px 14px;white-space:normal;}
.bs-f .bs-f-note--ti .ti-widget{margin:0 !important;}

/* ===== étape D (08/08) · footer A : mode compact sur le checkout =====
   Inactif tant que le footer n'est pas global ; ne garde que la barre légale. */
.bs-f--compact .bs-f-service{display:none;}
.bs-f--compact .bs-f-grid{display:none;}

/* ===== retours Alex (08/08 après-midi) · sticky réparé =====
   Le CSS compilé du header builder émet --wd-header-general-sticky-h:.00001px :
   la hauteur sticky (64) posée par wp-cli dans la STRUCTURE n'a jamais été
   recompilée côté CSS. On fournit la variable avec la valeur du builder ; les
   offsets WoodMart (--wd-header-sticky-h) se recalculent seuls. Syntaxe
   :root:has() déjà utilisée par le thème lui-même. */
:root:has(.whb-header_820260){--wd-header-general-sticky-h:64px;}

/* En mode collé mobile, le thème masque les rangées non-sticky : on réaffiche la
   rangée recherche SANS la colonne du rail (~112px collés au total, cible
   passation 110). Desktop inchangé : le rail se replie nativement. */
@media (max-width:1024px){
  :root:has(.whb-header_820260){--wd-header-bottom-sticky-h:52px;}
  .whb-header_820260.whb-sticked .whb-header-bottom.whb-not-sticky-row{display:block;}
  .whb-header_820260.whb-sticked .whb-header-bottom .whb-col-center{display:none;}
}

/* ===== retours Alex (08/08 après-midi) · rail en casse normale, comme la maquette ===== */
.whb-header_820260 .whb-header-bottom .wd-nav-header > li > a{text-transform:none;letter-spacing:0;}

/* ===== retours Alex (08/08 soir) · croix de fermeture du panneau à l'encre =====
   (le bandeau est passé en fond blanc : voir la surcharge .wd-heading plus haut) */
.mobile-nav .close-side-widget > a{color:var(--k);border-color:rgba(24,26,31,.25);}
.mobile-nav .close-side-widget > a:hover{background:var(--paper);}
.mobile-nav .close-side-widget .wd-action-icon::before,
.mobile-nav .close-side-widget .wd-action-icon::after{background:var(--k);}
.mobile-nav .wd-heading a:focus-visible{outline-color:var(--k);}
/* base-deferred.css (chargée APRÈS bs-chrome) écrase le ::after de la croix de
   fermeture (opacity:0 + inset décalé, mécanique d'icône du thème) : la pastille
   n'affichait qu'UNE diagonale. On rétablit la seconde barre, mêmes cotes que la
   section 2. */
.mobile-nav .close-side-widget .wd-action-icon::after{opacity:1;top:50%;inset-inline-start:0;width:100%;height:1.7px;}

/* ===== retours Alex (08/08 soir) · mini-panier latéral (cart-widget-side) =====
   Même langage que le panneau menu : bandeau blanc + pastille croix encre 44px,
   fond blanc, filets E4E1D8, rouge réservé au sous-total, Commander en pilule
   jaune. Classes stables WooCommerce/WoodMart uniquement, chargé préversion. */
.cart-widget-side{--y:#FFD600;--k:#181A1F;--gold:#8A7100;--paper:#FAF9F6;--w:#FFFFFF;--fog:#62656D;--line:#E4E1D8;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;background:var(--w);}
.cart-widget-side .wd-heading{display:flex;align-items:center;justify-content:space-between;
  background-color:var(--w);border-bottom:1px solid var(--line);min-height:48px;padding:0 6px 0 18px;}
.cart-widget-side .wd-heading .title{font-weight:800;font-size:15px;color:var(--k);text-transform:none;letter-spacing:0;}
.cart-widget-side .close-side-widget > a{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;color:var(--k);border:1px solid rgba(24,26,31,.25);
  transition:background-color .18s ease;}
.cart-widget-side .close-side-widget > a:hover{background:var(--paper);}
.cart-widget-side .close-side-widget .wd-action-icon{position:relative;width:15px;height:15px;display:block;}
.cart-widget-side .close-side-widget .wd-action-icon::before,
.cart-widget-side .close-side-widget .wd-action-icon::after{content:"";position:absolute;top:50%;left:0;
  inset-inline-start:0;width:100%;height:1.7px;background:var(--k);border-radius:2px;opacity:1;}
.cart-widget-side .close-side-widget .wd-action-icon::before{transform:rotate(45deg);}
.cart-widget-side .close-side-widget .wd-action-icon::after{transform:rotate(-45deg);}
.cart-widget-side .close-side-widget .wd-action-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
/* lignes produit */
.cart-widget-side .woocommerce-mini-cart-item{padding-block:14px;}
.cart-widget-side .woocommerce-mini-cart-item + .woocommerce-mini-cart-item{border-top:1px solid var(--line);}
.cart-widget-side .cart-item-image img{border:1px solid var(--line);border-radius:12px;background:#fff;}
.cart-widget-side .cart-info .wd-entities-title{font-weight:700;font-size:13.5px;line-height:1.35;color:var(--k);}
.cart-widget-side .cart-info .wd-entities-title a{color:var(--k);}
.cart-widget-side .cart-info .quantity{color:var(--fog);font-size:12.5px;font-weight:600;}
.cart-widget-side .cart-info .quantity .woocommerce-Price-amount{color:var(--k);font-weight:800;}
.cart-widget-side a.remove{width:28px;height:28px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--fog) !important;font-size:0;}
.cart-widget-side a.remove:hover{border-color:var(--k);color:var(--k) !important;background:var(--paper);}
/* pied : sous-total + boutons */
.cart-widget-side .shopping-cart-widget-footer{border-top:1px solid var(--line);background:var(--w);
  padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));}
.cart-widget-side .woocommerce-mini-cart__total{display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--fog);margin:0;}
.cart-widget-side .woocommerce-mini-cart__total strong{font-weight:700;color:var(--fog);text-transform:none;letter-spacing:0;}
.cart-widget-side .woocommerce-mini-cart__total .woocommerce-Price-amount{font-weight:800;font-size:20px;color:#D92B1F;}
.cart-widget-side .woocommerce-mini-cart__buttons{display:grid;gap:9px;margin:12px 0 0;}
.cart-widget-side .woocommerce-mini-cart__buttons .button{display:flex;align-items:center;justify-content:center;
  min-height:48px;border-radius:999px;font-weight:800;font-size:14px;text-transform:none;letter-spacing:0;
  transition:background-color .15s ease;}
.cart-widget-side .woocommerce-mini-cart__buttons .button:not(.checkout){background:#fff;border:1.5px solid var(--k);color:var(--k);}
.cart-widget-side .woocommerce-mini-cart__buttons .button:not(.checkout):hover{background:var(--paper);}
.cart-widget-side .woocommerce-mini-cart__buttons .button.checkout{background:var(--y);border:0;color:var(--k);}
.cart-widget-side .woocommerce-mini-cart__buttons .button.checkout:hover{background:#E8BF00;}
.cart-widget-side .woocommerce-mini-cart__empty-message{padding:26px 18px;color:var(--fog);font-size:13.5px;}
@media (prefers-reduced-motion:reduce){
  .cart-widget-side,.cart-widget-side *{transition:none !important;animation:none !important;}
}
/* base-deferred.css repasse aussi la pastille du mini-panier à 25px : spécificité
   rehaussée, même remède que pour le panneau menu. */
.cart-widget-side .wd-heading .close-side-widget.wd-action-btn.wd-style-text > a{width:44px;height:44px;}

/* ===== audit fiche produit (08/08 soir) · contrôles à la charte =====
   1) Les variables boutons du thème portent le VIEUX jaune #F7C500 : on les aligne
   sur le jaune charte #FFD600 (hover #E8BF00) pour tous les CTA du site sous le
   nouveau chrome (préversion/aperçus aujourd'hui, tout le site après bascule). */
body.bs-chrome-actif{
  --btn-default-bgcolor:#FFD600;--btn-default-bgcolor-hover:#E8BF00;
  --btn-accented-bgcolor:#FFD600;--btn-accented-bgcolor-hover:#E8BF00;
  --wd-alternative-color:#8A7100;
}
/* 2) Sélecteur de quantité : pilule bordée charte, boutons 44px encre, plus de gris. */
body.bs-chrome-actif form.cart .quantity{border:1.5px solid #E4E1D8;border-radius:999px;background:#fff;overflow:hidden;}
body.bs-chrome-actif form.cart .quantity .minus,
body.bs-chrome-actif form.cart .quantity .plus{background:#fff;color:#181A1F;font-size:16px;font-weight:700;min-width:44px;min-height:44px;transition:background-color .15s ease;}
body.bs-chrome-actif form.cart .quantity .minus:hover,
body.bs-chrome-actif form.cart .quantity .plus:hover{background:#FAF9F6;}
body.bs-chrome-actif form.cart .quantity input.qty{font-weight:700;color:#181A1F;}
/* 3) Ajouter au panier : pilule jaune charte, encre, 800, casse normale. */
body.bs-chrome-actif form.cart .single_add_to_cart_button{color:#181A1F;border-radius:999px;font-weight:800;text-transform:none;letter-spacing:0;}
/* Renfort : le custom CSS du thème et les feuilles woo différées repassent leurs
   valeurs en dur (#D0D5DD, #F7C500, radius 12, uppercase) après bs-chrome :
   déclarations verrouillées, périmètre fiche produit uniquement. */
body.bs-chrome-actif form.cart .quantity{border:1.5px solid #E4E1D8 !important;border-radius:999px !important;}
body.bs-chrome-actif form.cart .single_add_to_cart_button{background-color:#FFD600 !important;color:#181A1F !important;border-radius:999px !important;text-transform:none !important;letter-spacing:0 !important;}
body.bs-chrome-actif form.cart .single_add_to_cart_button:hover{background-color:#E8BF00 !important;}
/* Le mu-plugin EXISTANT bs-fiche-produit.css verrouille le vieux jaune #F7C500 et
   le radius 12 en !important avec une forte spécificité : on préfixe son propre
   sélecteur (scopé chrome). À la bascule, la vraie correction sera d'aligner
   bs-fiche-produit.css lui-même sur la charte (chantier fiche produit). */
body.bs-chrome-actif.single-product .elementor-widget-wd_single_product_add_to_cart form.cart .single_add_to_cart_button{
  background-color:#FFD600 !important;background:#FFD600 !important;color:#181A1F !important;
  border-radius:999px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:800 !important;
}
body.bs-chrome-actif.single-product .elementor-widget-wd_single_product_add_to_cart form.cart .single_add_to_cart_button:hover{
  background-color:#E8BF00 !important;background:#E8BF00 !important;color:#181A1F !important;
}

/* ===== mini-panier (09/08) · steppers de quantité natifs WoodMart, à la charte =====
   div.quantity = le stepper (minus/qty/plus), span.quantity = le prix de ligne. */
.cart-widget-side .cart-info div.quantity{display:inline-flex;align-items:center;vertical-align:middle;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;height:34px;margin:8px 10px 0 0;}
.cart-widget-side .cart-info div.quantity .minus,
.cart-widget-side .cart-info div.quantity .plus{width:32px;height:32px;min-width:32px;border:0;background:#fff;
  color:var(--k);font-size:15px;font-weight:700;cursor:pointer;transition:background-color .15s ease;}
.cart-widget-side .cart-info div.quantity .minus:hover,
.cart-widget-side .cart-info div.quantity .plus:hover{background:var(--paper);}
.cart-widget-side .cart-info div.quantity input.qty{width:34px;border:0;background:transparent;text-align:center;
  font-weight:700;color:var(--k);font-size:13px;padding:0;-moz-appearance:textfield;appearance:textfield;}
.cart-widget-side .cart-info div.quantity input.qty::-webkit-outer-spin-button,
.cart-widget-side .cart-info div.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-widget-side .cart-info span.quantity{display:inline-flex;align-items:center;vertical-align:middle;
  border:0;background:none;padding:0;margin:8px 0 0;color:var(--k);font-weight:800;font-size:13.5px;}
/* chaque ligne porte un lien de recouvrement plein cadre (a.cart-item-link.wd-fill) :
   le stepper et la croix doivent rester AU-DESSUS pour être cliquables. */
.cart-widget-side .cart-info div.quantity{position:relative;z-index:2;}
.cart-widget-side .woocommerce-mini-cart-item a.remove{position:relative;z-index:2;}

/* ===== mini-panier (09/08, retour Alex) · prix de ligne épuré + layout mobile =====
   Les feuilles différées du thème (widget-general/woo-widget-shopping-cart, imprimées
   APRÈS bs-chrome) rhabillent le span.quantity en pilule bordée : on verrouille. */
.cart-widget-side .woocommerce-mini-cart-item .cart-info span.quantity{
  border:0 !important;background:none !important;padding:0 !important;border-radius:0 !important;
  box-shadow:none !important;color:var(--fog);font-weight:600;font-size:12.5px;}
.cart-widget-side .woocommerce-mini-cart-item .cart-info span.quantity .woocommerce-Price-amount{
  color:var(--k);font-weight:800;font-size:13.5px;}
/* ligne compacte : titre pleine largeur, stepper et prix côte à côte, croix en haut à droite */
.cart-widget-side .woocommerce-mini-cart-item{position:relative;padding-right:34px;}
.cart-widget-side .woocommerce-mini-cart-item a.remove{position:absolute !important;top:14px;right:0 !important;left:auto !important;}
.cart-widget-side .cart-info{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;}
.cart-widget-side .cart-info .wd-entities-title{flex:1 1 100%;}
/* le panneau ne déborde jamais d'un petit écran */
.cart-widget-side{width:min(340px,92vw);}