/* AYKO SHOP — feuille de style principale
   Extraite telle quelle de la maquette validée : aucune retouche, pour que le
   rendu PHP soit strictement identique à ce qui a été approuvé. */
/* ==========================================================================
   1. TOKENS
   Structure façon grande marketplace (dense, orientée promo), mais palette
   propre : sarcelle = marque, magenta = urgence/promo (remplace l'orange),
   or = coupons et notes, indigo = rayon digital.
   ========================================================================== */
:root{
  /* Teal et encre repris du logo : #00867B et #002A51. Les nuances foncées et
     claires en sont dérivées, pour que les survols et les fonds restent dans la
     même famille. */
  --brand:#00867B;  --brand-d:#00564F;  --brand-l:#12A99C;
  --deal:#E11D6B;   --deal-d:#A80D4E;
  --gold:#FDA800;   /* orange du logo */
  --volt:#6E56F8;   --volt-d:#151033;
  --ink:#002A51;    --txt:#2B3440;      --mut:#77828F;
  /* Fond des zones sombres — barre du haut, pied de page. Distinct de --ink,
     qui colore aussi les titres : les régler ensemble teindrait le texte de la
     couleur de la barre. */
  --barre:#002A51;
  --bg:#F3F5F6;     --card:#FFFFFF;     --line:#E3E7EA;
  --font:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:10px;
  --sh:0 1px 2px rgba(20,24,31,.05),0 8px 24px -14px rgba(20,24,31,.4);
  /* Largeur du contenu. À 1320 px, un écran de 1920 laissait 300 px perdus de
     chaque côté. 1600 récupère l'essentiel sans aller jusqu'au bord : au-delà,
     une ligne de texte devient trop longue pour être lue confortablement. */
  --wrap:1600px;
}
html[lang="ar"]{--font:'IBM Plex Sans Arabic',system-ui,sans-serif;--mono:'IBM Plex Sans Arabic',monospace}

*,*::before,*::after{box-sizing:border-box}
/* Racine à 17 px au lieu des 16 px par défaut : toutes les tailles exprimées
   en rem suivent, sans avoir à les reprendre une par une. Le texte courant
   passe de 15 à 16 px. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:106.25%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);font-size:.94rem;line-height:1.55;overflow-x:hidden}
body.locked{overflow:hidden}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
/* Anneau de focus : vert de marque (le magenta était lu comme une erreur de saisie).
   Sur les fonds sombres il passe en blanc pour rester contrasté. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.topbar :focus-visible,.slideshow :focus-visible,.digital :focus-visible,
.footer :focus-visible,.flash :focus-visible,.seller :focus-visible{outline-color:#fff}
/* La marge latérale vaut environ 1 cm : le contenu ne touche jamais le bord de
   l'écran, même quand la largeur maximale est atteinte. */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:12px}
@media (min-width:700px){ .wrap{padding-inline:38px} }
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:-9999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{inset-inline-start:12px}

/* ============================ 2. TOPBAR ============================ */
.topbar{background:var(--barre);color:#B4BCC6;font-size:.75rem}
.topbar-in{display:flex;align-items:center;gap:14px;height:32px}
.topbar .free{display:flex;align-items:center;gap:6px;color:var(--gold);font-weight:500;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .free svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;flex:none}
.topbar nav{display:none;gap:14px}
.topbar nav a:hover{color:#fff}

/* Sélecteur de langue : un bouton globe qui ouvre un menu, plutôt que trois onglets */
.langbox{position:relative;margin-inline-start:auto;flex:none}
.langbtn{display:flex;align-items:center;gap:6px;height:24px;padding-inline:9px;border-radius:6px;
  border:1px solid rgba(255,255,255,.22);color:#B4BCC6;font-size:.72rem;font-weight:600;letter-spacing:.04em}
.langbtn:hover{background:rgba(255,255,255,.1);color:#fff}
.langbtn .globe{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;fill:none;flex:none}
.langbtn .chev{width:9px;height:9px;stroke:currentColor;stroke-width:2.6;fill:none;opacity:.65;transition:transform .2s}
.langbtn[aria-expanded="true"]{background:rgba(255,255,255,.12);color:#fff}
.langbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.langmenu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:90;min-width:180px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);padding:6px}
.langmenu[hidden]{display:none}
.langmenu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border-radius:7px;
  font-size:.85rem;color:var(--txt);text-align:start}
.langmenu button:hover{background:#EEF2F1}
.langmenu button[aria-checked="true"]{color:var(--brand);font-weight:600}
.langmenu .code{font-family:var(--mono);font-size:.72rem;color:var(--mut);letter-spacing:.06em}
.langmenu .tick{width:15px;height:15px;stroke:var(--brand);stroke-width:2.8;fill:none;
  margin-inline-start:auto;opacity:0;flex:none}
.langmenu button[aria-checked="true"] .tick{opacity:1}

/* ============================ 3. HEADER ============================ */
/* La barre de rayons étant masquée sur mobile, la recherche devient le dernier
   enfant de l'en-tête : sa marge basse s'échappait par fusion de marges et le
   champ collait au bord. L'espace est donc porté par l'en-tête lui-même. */
.header{position:sticky;top:0;z-index:60;background:var(--card);box-shadow:0 1px 0 var(--line);
  padding-block-end:10px}
.header-in{display:flex;align-items:center;gap:10px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.3rem;letter-spacing:-.03em;color:var(--brand)}
.logo-mark,.logo-img{flex:none;display:block;max-width:100%;object-fit:contain}
.logo-nom{font-weight:400;color:var(--brand)}
.logo-nom b{font-weight:700;color:var(--ink)}
.foot-brand .logo-nom,.foot-brand .logo-nom b,
.bo-marque .logo-nom,.bo-marque .logo-nom b{color:#fff}
.bo-marque .logo-nom{opacity:.8}
.bo-marque .logo-nom b{opacity:1}
.logo .mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--brand),var(--deal));
  display:grid;place-items:center;flex:none}
.logo .mark i{width:11px;height:11px;background:#fff;border-radius:2px;transform:rotate(45deg);display:block}
.burger{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line)}
.burger svg{width:19px;height:19px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}

/* Grande barre de recherche cerclée — signature des places de marché */
.search{flex:1;display:none;align-items:center;height:40px;background:var(--card);
  border:2px solid var(--brand);border-radius:999px;overflow:hidden}
.search select{height:100%;border:0;background:transparent;padding-inline:14px 6px;font:inherit;
  font-size:.82rem;color:var(--mut);cursor:pointer;max-width:150px}
.search .sep{width:1px;height:18px;background:var(--line)}
/* L'anneau suit la forme en pilule du conteneur : pas de rectangle sur le champ */
.search:focus-within{box-shadow:0 0 0 3px rgba(14,107,102,.18)}
.search input:focus-visible,.search select:focus-visible{outline:none}
.search input{flex:1;height:100%;border:0;background:transparent;padding-inline:12px;font:inherit;font-size:.88rem;min-width:0}
.search input::placeholder{color:#9AA5B1}
.search .go{height:32px;margin-inline-end:4px;padding-inline:18px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:6px}
.search .go:hover{background:var(--brand-d)}
.search .go svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}

/* Recherche compacte affichée sous l'en-tête tant que la barre complète est masquée */
.msearch{display:flex;align-items:center;gap:8px;height:38px;margin:2px 12px 0;padding-inline:14px;
  border-radius:999px;background:var(--card);border:1px solid var(--line)}
/* L'anneau suit la forme en pilule du conteneur : pas de rectangle sur le champ */
.msearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,107,102,.18)}
.msearch input:focus-visible{outline:none}
.msearch input{flex:1;min-width:0;height:100%;border:0;background:transparent;font:inherit;
  font-size:.85rem;color:var(--txt)}
.msearch input::placeholder{color:var(--mut)}
.msearch svg{width:16px;height:16px;stroke:var(--brand);stroke-width:2.2;fill:none;stroke-linecap:round;flex:none}

.actions{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.act{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:8px;position:relative;min-height:40px}
.act.opt{display:none}
.act:hover{background:#EEF2F1;color:var(--brand)}
.act svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.act-txt{display:none;font-size:.78rem;line-height:1.1}
.act-txt small{display:block;color:var(--mut);font-size:.72rem}
.act-txt b{font-weight:600}
.badge{position:absolute;top:0;inset-inline-end:0;min-width:17px;height:17px;padding-inline:4px;
  background:var(--deal);color:#fff;border-radius:999px;font-family:var(--mono);font-size:10px;
  font-weight:700;display:grid;place-items:center}

/* ============================ 4. NAV + MEGA MENU ============================ */
.navbar{background:var(--card);border-block-start:1px solid var(--line);display:none;position:relative;z-index:55}
.navbar-in{display:flex;align-items:center;gap:4px;height:42px;font-size:.85rem}
/* Liste des rayons de la barre de navigation.
   Sans cette règle, le <ul> reste un bloc et les rayons s'empilent
   verticalement en débordant de la barre. */
.deptlist{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none;min-width:0}
.deptlist li{display:flex}
.deptlist .nlink{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.allbtn{display:flex;align-items:center;gap:8px;height:30px;padding-inline:12px;border-radius:7px;
  background:var(--brand);color:#fff;font-weight:600;margin-inline-end:6px}
.allbtn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.allbtn .chev{transition:transform .2s}
.allbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nlink{padding:6px 11px;border-radius:7px;white-space:nowrap;color:var(--txt)}
.nlink:hover{background:#EEF2F1;color:var(--brand)}
.nlink.hot{color:var(--deal);font-weight:600}
.nlink.hot:hover{background:rgba(225,29,107,.09)}
.nlink.dig{color:var(--volt);font-weight:600;margin-inline-start:auto}
.nlink.dig:hover{background:rgba(110,86,248,.1)}

.mega{position:absolute;inset-inline:0;top:100%;background:var(--card);box-shadow:var(--sh);
  border-block-end:1px solid var(--line);padding-block:22px 26px;display:none}
.mega.open{display:block;animation:drop .16s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mega-col h4{margin:0 0 10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand)}
.mega-col li{margin-block-end:7px}
.mega-col a{font-size:.85rem;color:var(--mut)}
.mega-col a:hover{color:var(--deal);text-decoration:underline;text-underline-offset:3px}
.mega-col a.all{color:var(--brand);font-weight:600}
.mega-promo{background:linear-gradient(135deg,#F6F8F8,#EAF1F0);border-radius:var(--r);padding:18px;align-self:start}
.mega-promo b{display:block;font-size:.98rem;margin-block-end:5px;color:var(--ink)}
.mega-promo p{font-size:.82rem;color:var(--mut);margin-block-end:12px}
.mega-promo .mini{font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--deal);
  border-block-end:1px solid currentColor;padding-block-end:2px}
.mega.is-digital{background:var(--volt-d);color:#E8E4FF}
.mega.is-digital .mega-col h4{color:#A99BFF}
.mega.is-digital .mega-col a{color:#B9B2E8}
.mega.is-digital .mega-col a:hover{color:#fff}
.mega.is-digital .mega-promo{background:rgba(110,86,248,.18)}
.mega.is-digital .mega-promo b{color:#fff}
.mega.is-digital .mega-promo p{color:#B9B2E8}
.mega.is-digital .mega-promo .mini{color:#A99BFF}
/* z-index 58 : le voile reste sous l'en-tête pour le mega menu,
   et passe au-dessus (classe .top) quand le tiroir mobile s'ouvre. */
.scrim{position:fixed;inset:0;background:rgba(20,24,31,.4);z-index:58;display:none}
.scrim.open{display:block}
.scrim.top{z-index:75}

/* ============================ 5. TIROIR MOBILE ============================ */
.drawer{position:fixed;inset-block:0;inset-inline-start:0;width:min(86vw,330px);background:var(--card);
  z-index:80;transform:translateX(-102%);transition:transform .25s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
html[dir="rtl"] .drawer{transform:translateX(102%)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-block-end:1px solid var(--line)}
.drawer-close{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line)}
.drawer-close svg{width:17px;height:17px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.drawer-body{flex:1;overflow-y:auto;padding:6px 0 26px}
.acc-head{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:.92rem;font-weight:500;text-align:start}
.acc-head .ico{width:19px;height:19px;stroke:var(--brand);fill:none;stroke-width:1.7;flex:none}
.acc-head .chev{width:12px;height:12px;stroke:var(--mut);stroke-width:2.2;fill:none;margin-inline-start:auto;transition:transform .2s}
.acc-head[aria-expanded="true"]{color:var(--brand)}
.acc-head[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-panel{display:none;padding:2px 14px 10px;background:var(--bg)}
.acc-panel.open{display:block}
.acc-panel a{display:block;padding:7px 0 7px 29px;font-size:.85rem;color:var(--mut)}
html[dir="rtl"] .acc-panel a{padding:7px 29px 7px 0}
.drawer .digital-row{color:var(--volt);font-weight:600}
.drawer .digital-row .ico{stroke:var(--volt)}
/* Bas du tiroir : les liens de la topbar, invisibles sur mobile, sont repris ici */
.drawer-foot{border-block-start:1px solid var(--line);margin-block-start:8px;padding:14px}
.drawer-foot h5{margin:0 0 8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut)}
.drawer-foot a{display:block;padding:8px 0;font-size:.88rem}
.drawer-langs{display:flex;gap:6px;margin-block-start:10px}
.drawer-langs button{flex:1;padding:9px 4px;border-radius:8px;border:1px solid var(--line);
  font-size:.8rem;font-weight:600;color:var(--mut)}
.drawer-langs button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

/* ============================ 6. BLOC D'ACCUEIL ============================ */
.top{padding-block:12px}
/* Zones nommées : la grille se réorganise à chaque palier sans toucher au HTML */
.top-grid{display:grid;gap:10px;grid-template-columns:1fr;
  grid-template-areas:"slide" "aside"}
.railbox{grid-area:rail}
.slideshow{grid-area:slide}
.aside{grid-area:aside}

/* Colonne des rayons avec volet au survol */
.railbox{display:none;background:var(--card);border-radius:var(--r);padding:8px 0;position:relative}
.rail li>a{display:flex;align-items:center;gap:9px;padding:7px 14px;font-size:.85rem;color:var(--txt)}
.rail li>a:hover{background:#EEF2F1;color:var(--brand)}
.rail svg.ico{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none}
.rail .arr{width:12px;height:12px;stroke:var(--mut);stroke-width:2.4;fill:none;margin-inline-start:auto}
html[dir="rtl"] .rail .arr{transform:scaleX(-1)}
.rail li.dig>a{color:var(--volt);font-weight:600}
.flyout{position:absolute;inset-inline-start:100%;top:0;width:640px;min-height:100%;background:var(--card);
  box-shadow:var(--sh);border-radius:0 var(--r) var(--r) 0;padding:20px;display:none;z-index:20}
html[dir="rtl"] .flyout{border-radius:var(--r) 0 0 var(--r)}
/* Une seule liste depuis la refonte : la grille en trois colonnes la
   comprimait dans le premier tiers du volet. C'est la liste elle-même qui se
   répartit en colonnes. */
.flyout.open{display:block}
.flyout h4{margin:0 0 9px;font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.flyout li{margin-block-end:6px}
.flyout a{font-size:.84rem;color:var(--mut)}
.flyout a:hover{color:var(--deal)}

/* Carrousel — la hauteur est fixée par palier, la photo remplit exactement le cadre */
.slideshow{position:relative;border-radius:var(--r);overflow:hidden;background:var(--brand-d);
  height:clamp(215px,62vw,290px);display:flex;flex-direction:column}
.slides-viewport{flex:1;height:100%;overflow:hidden;touch-action:pan-y}
.slides-track{display:flex;height:100%;will-change:transform}
/*
 * PAS de « row-reverse » ici : le script inverse déjà le sens de la translation
 * en RTL. Les deux se cumulaient et sortaient la piste du cadre — en arabe,
 * aucune diapo n'était visible.
 */
.slides-track.anim{transition:transform .5s cubic-bezier(.4,0,.2,1)}

.slide{flex:0 0 100%;min-width:100%;height:100%;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px 18px 52px;color:#fff;-webkit-user-select:none;user-select:none}
/* object-fit:cover -> la photo couvre toute la zone sans jamais être déformée */
.slide .ph{position:absolute;inset:0;z-index:0;margin:0;
  background:linear-gradient(120deg,rgba(var(--veil),1),rgba(var(--veil),.55))}
.slide .ph img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Voile dégradé : le texte reste lisible quelle que soit la photo */
.slide .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(var(--vdir,180deg),rgba(var(--veil),.22),rgba(var(--veil),.88) 62%)}
html[dir="rtl"] .slide{--vdir:180deg}
.slide.s-brand{--veil:8,63,60}
.slide.s-deal{--veil:138,15,68}
.slide.s-volt{--veil:21,16,51}
.slide.s-gold{--veil:110,66,4}
.slide-txt{position:relative;z-index:2;max-width:42ch}
.slide .eyebrow{display:inline-block;margin-block-end:9px;padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.18);font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase}
.slide h2{margin:0 0 9px;font-size:clamp(1.35rem,5.2vw,2.2rem);line-height:1.08;font-weight:700;letter-spacing:-.02em}
.slide p{margin-block-end:16px;font-size:clamp(.85rem,3vw,.98rem);color:rgba(255,255,255,.85);max-width:38ch}
.slide-cta{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:999px;
  background:#fff;color:var(--ink);font-weight:600;font-size:.88rem}
.slide-cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
html[dir="rtl"] .slide-cta svg{transform:scaleX(-1)}
.slide-price{position:absolute;bottom:56px;inset-inline-end:18px;z-index:3;background:#fff;color:var(--ink);
  border-radius:9px;padding:7px 11px;text-align:center}
.slide-price small{display:block;font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.slide-price b{font-family:var(--mono);font-size:1rem;color:var(--deal)}
.nav{position:absolute;top:calc(50% - 16px);transform:translateY(-50%);z-index:6;width:36px;height:36px;
  border-radius:50%;background:rgba(20,24,31,.4);border:1px solid rgba(255,255,255,.25);display:none;place-items:center}
.nav:hover{background:rgba(20,24,31,.7)}
.nav svg{width:17px;height:17px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-prev{inset-inline-start:10px}
.nav-next{inset-inline-end:10px}
html[dir="rtl"] .nav svg{transform:scaleX(-1)}
.slides-bar{position:absolute;inset-inline:0;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;padding:11px 16px 13px}
.playpause{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;flex:none}
.playpause svg{width:11px;height:11px;fill:#fff}
.playpause .ico-play{display:none}
.playpause[aria-pressed="true"] .ico-pause{display:none}
.playpause[aria-pressed="true"] .ico-play{display:block}
.dots{display:flex;gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);transition:width .25s,background .25s}
.dot[aria-current="true"]{width:22px;border-radius:999px;background:#fff}
.counter{margin-inline-start:auto;font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.7)}
.progress{position:absolute;inset-inline:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:7}
.progress i{display:block;height:100%;width:0;background:#fff}
html[dir="rtl"] .progress i{margin-inline-start:auto}
.progress i.run{animation:fill var(--delay,6000ms) linear forwards}
@keyframes fill{from{width:0}to{width:100%}}

/* Colonne de droite */
.aside{display:grid;gap:10px;grid-template-columns:1fr}
.welcome{display:none}
.welcome{background:var(--card);border-radius:var(--r);padding:16px;text-align:center}
.welcome .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--deal));
  margin:0 auto 9px;display:grid;place-items:center}
.welcome .av svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
.welcome p{font-size:.84rem;color:var(--mut);margin-block-end:11px}
.welcome .b1{display:block;padding:8px;border-radius:999px;background:var(--deal);color:#fff;font-size:.83rem;font-weight:600;margin-block-end:7px}
.welcome .b2{display:block;padding:8px;border-radius:999px;border:1px solid var(--line);font-size:.83rem;font-weight:600}
.coupon{background:linear-gradient(135deg,var(--deal),#8A0F44);color:#fff;border-radius:var(--r);padding:16px;position:relative;overflow:hidden}
.coupon::after{content:"";position:absolute;inset-inline-end:-30px;bottom:-40px;width:120px;height:120px;
  border-radius:50%;background:rgba(255,255,255,.12)}
.coupon small{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.coupon b{display:block;font-size:1.5rem;font-weight:700;line-height:1.1;margin-block:4px 6px}
.coupon span{font-size:.8rem;opacity:.9}
.coupon .code{display:inline-block;margin-block-start:10px;padding:4px 11px;border-radius:6px;
  background:rgba(255,255,255,.2);font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.08em}

/* ============================ 7. AVANTAGES ============================ */
.perks{background:var(--card);border-radius:var(--r);display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:14px;margin-block-end:14px}
.perk{display:flex;align-items:center;gap:9px}
.perk svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.6;flex:none;stroke-linecap:round;stroke-linejoin:round}
.perk b{display:block;font-size:.82rem;color:var(--ink)}
.perk span{font-size:.74rem;color:var(--mut)}

/* ============================ 8. VENTE FLASH ============================ */
.flash{background:linear-gradient(120deg,#8A0F44,#E11D6B 65%,#FF5C9A);border-radius:var(--r);
  padding:18px 16px;color:#fff;margin-block-end:14px}
.flash-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-end:14px}
.flash-head h2{margin:0;font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:8px}
.flash-head h2 svg{width:20px;height:20px;fill:var(--gold);stroke:none}
.timer{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-weight:700}
.timer i{background:rgba(0,0,0,.28);border-radius:6px;padding:4px 7px;font-size:.9rem;font-style:normal;min-width:30px;text-align:center}
.timer em{font-style:normal;opacity:.7}
.timer .lbl{font-family:var(--font);font-size:.76rem;font-weight:500;opacity:.9;margin-inline-end:2px}
.flash .more{margin-inline-start:auto;font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:5px}
.flash .more svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none}
html[dir="rtl"] .flash .more svg{transform:scaleX(-1)}
.rail-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-block-end:2px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rail-scroll::-webkit-scrollbar{display:none}
.fcard{flex:none;width:clamp(132px,40vw,158px);background:var(--card);border-radius:8px;overflow:hidden;
  color:var(--txt);scroll-snap-align:start}
.fcard .th{aspect-ratio:1/1;background:#EEF1F0;position:relative}
.fcard .th img{width:100%;height:100%;object-fit:cover}
.fcard .off{position:absolute;top:6px;inset-inline-start:6px;background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:.72rem;font-weight:700;padding:2px 6px;border-radius:5px}
.fcard .bd{padding:8px 9px 10px}
.fcard .pz{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--deal)}
.fcard .po{font-family:var(--mono);font-size:.7rem;color:var(--mut);text-decoration:line-through;margin-inline-start:5px}
.bar{height:5px;border-radius:999px;background:#EDEFF1;margin-block-start:7px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--deal))}
.fcard .sold{font-size:.72rem;color:var(--mut);margin-block-start:4px}

/* ============================ 9. GRILLE PRODUITS ============================ */
.sec{padding-block:6px 20px}
.sec-head{display:flex;align-items:center;gap:12px;margin-block-end:12px}
.sec-head h2{margin:0;font-size:1.15rem;font-weight:700;color:var(--ink)}
.sec-head .more{margin-inline-start:auto;font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--brand)}
.filters{display:flex;gap:7px;overflow-x:auto;margin-block-end:12px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:.8rem;white-space:nowrap}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

.grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* position:relative est indispensable : le bouton « favori » est en
   position absolue. Sans repère ici, il se cale sur la page entière et tous
   les cœurs se superposent dans le coin supérieur droit de l'écran. */
.pcard{position:relative;background:var(--card);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.pcard:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.pcard .th{position:relative;aspect-ratio:1/1;background:#EEF1F0}
.pcard .th img{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;top:7px;inset-inline-start:7px;padding:2px 7px;border-radius:5px;
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--ink);color:#fff}
.tag.sale{background:var(--deal)}
.tag.new{background:var(--brand)}
.fav{position:absolute;top:6px;inset-inline-end:6px;width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center}
.fav svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:1.9}
.fav[aria-pressed="true"] svg{fill:var(--deal);stroke:var(--deal)}
.pcard .bd{padding:9px 10px 11px;display:flex;flex-direction:column;gap:3px;flex:1}
/* Le prix passe avant le titre : c'est l'info que l'œil cherche en premier */
.pz-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pz{font-family:var(--mono);font-size:1.08rem;font-weight:700;color:var(--deal)}
.po{font-family:var(--mono);font-size:.72rem;color:var(--mut);text-decoration:line-through}
.off-t{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--deal);
  background:rgba(225,29,107,.1);padding:1px 5px;border-radius:4px}
.pcard h3{margin:0;font-size:.82rem;font-weight:400;line-height:1.35;color:var(--txt);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--mut)}
.meta b{color:var(--gold);font-weight:600}
.ship{font-size:.72rem;color:var(--brand);font-weight:600}
.store{font-size:.72rem;color:var(--mut);margin-block-start:auto;padding-block-start:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loadmore{display:block;margin:18px auto 0;padding:10px 26px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font-size:.86rem;font-weight:600;color:var(--brand)}
.loadmore:hover{border-color:var(--brand)}

/* ============================ 10. RAYON DIGITAL ============================ */
.digital{background:var(--volt-d);color:#E8E4FF;border-radius:var(--r);padding:22px 16px 26px;
  margin-block:8px 20px;position:relative;overflow:hidden}
.digital::before{content:"";position:absolute;top:-140px;inset-inline-start:40%;width:460px;height:300px;
  background:radial-gradient(ellipse,rgba(110,86,248,.45),transparent 70%)}
.digital>*{position:relative}
.dbadge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  background:rgba(110,86,248,.25);border:1px solid rgba(169,155,255,.35);color:#A99BFF;
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-block-end:11px}
.dbadge svg{width:11px;height:11px;fill:currentColor}
.digital .sec-head h2{color:#fff}
.digital .sec-head .more{color:#A99BFF}
.dgrid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.dcard{background:rgba(255,255,255,.06);border:1px solid rgba(169,155,255,.2);border-radius:8px;
  padding:13px;display:flex;flex-direction:column;gap:7px;transition:border-color .2s,background .2s,transform .2s}
.dcard:hover{background:rgba(110,86,248,.16);border-color:var(--volt);transform:translateY(-2px)}
.dicon{width:38px;height:38px;border-radius:9px;background:rgba(110,86,248,.25);display:grid;place-items:center}
.dicon svg{width:19px;height:19px;stroke:#A99BFF;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dseller{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#A99BFF}
.dcard h3{margin:0;font-size:.85rem;font-weight:600;color:#fff;line-height:1.35}
.dmeta{display:flex;flex-wrap:wrap;gap:5px}
.dmeta span{font-family:var(--mono);font-size:.72rem;padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.08);color:#B9B2E8}
.dprice{margin-block-start:auto;padding-block-start:9px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;border-block-start:1px solid rgba(169,155,255,.16)}
.dprice .pz{color:#fff}
.dget{padding:6px 13px;border-radius:999px;background:var(--volt);color:#fff;font-size:.76rem;font-weight:600}

/* ============================ 11. RAYONS EN PASTILLES ============================ */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--card);
  border-radius:var(--r);padding:14px;margin-block-end:20px}
.cat{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;padding:6px 2px;border-radius:8px}
.cat:hover{background:#EEF2F1}
.cat .disc{width:44px;height:44px;border-radius:14px;background:#EEF2F1;display:grid;place-items:center}
.cat svg{width:21px;height:21px;stroke:var(--brand);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cat span{font-size:.72rem;line-height:1.2;color:var(--mut)}
.cat.is-digital .disc{background:var(--volt-d)}
/* Une photo apporte ses propres couleurs : le fond teinté sous elle la salit,
   et le fond sombre des produits digitaux noircissait les zones transparentes.
   Dès qu'une image est présente, la pastille passe au blanc. */
.cat .disc:has(img),
.cat.is-digital .disc:has(img){background:#fff}
li[data-dept] a:has(.vignette-rayon) .ico{background:#fff}
.cat.is-digital svg{stroke:#A99BFF}
.cat.is-digital span{color:var(--volt);font-weight:600}

/* ============================ 12. PIED DE PAGE ============================ */
.seller{background:linear-gradient(120deg,var(--brand-d),var(--brand) 60%,var(--brand-l));color:#fff;
  border-radius:var(--r);padding:24px 18px;margin-block-end:20px}
.seller h2{margin:0 0 8px;font-size:clamp(1.1rem,4vw,1.5rem);font-weight:700}
.seller p{margin-block-end:16px;color:rgba(255,255,255,.85);max-width:48ch;font-size:.9rem}
.seller a{display:inline-block;padding:10px 20px;border-radius:999px;background:#fff;color:var(--brand-d);font-weight:600;font-size:.88rem}
.footer{background:var(--barre);color:#9AA5B1;padding-block:32px 20px;font-size:.85rem}
.foot-grid{display:grid;gap:22px;grid-template-columns:1fr}
.footer h4{color:#fff;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px}
.footer li{margin-block-end:6px}
.footer a:hover{color:var(--gold)}
.foot-brand .logo{color:#fff;margin-block-end:8px}
.foot-brand p{max-width:34ch;font-size:.82rem}
.pay{display:flex;gap:6px;margin-block-start:12px;flex-wrap:wrap}
.pay span{font-family:var(--mono);font-size:.72rem;padding:3px 7px;border-radius:4px;background:rgba(255,255,255,.09)}
.foot-bottom{margin-block-start:24px;padding-block-start:14px;border-block-start:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-family:var(--mono);font-size:.72rem}

/* ============================ 13. RESPONSIVE ============================ */
/* Très petits écrans (320-359 px) : on allège l'en-tête */
@media (max-width:359px){
  .logo{font-size:1.1rem}
  .act{padding:6px}
  .slide p{display:none}
}
@media (min-width:520px){
  .grid,.dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .perks{grid-template-columns:repeat(4,1fr)}
  .cats{grid-template-columns:repeat(7,1fr)}
  .aside{grid-template-columns:1fr 1fr}
  .welcome{display:block}
}
@media (min-width:700px){
  .act.opt{display:flex}
  /* Le voile devient latéral : la photo respire à droite, le texte reste à gauche */
  .slide{padding:30px 30px 56px;justify-content:center}
  .slide .veil{--vdir:90deg;
    background:linear-gradient(var(--vdir),rgba(var(--veil),.94),rgba(var(--veil),.7) 46%,rgba(var(--veil),.1))}
  html[dir="rtl"] .slide .veil{--vdir:270deg}
  .nav{display:grid}
  .slideshow{height:330px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:960px){
  .search{display:flex}
  .msearch{display:none}
  .header{padding-block-end:0}
  .burger{display:none}
  .navbar{display:block}
  .topbar nav{display:flex;margin-inline-start:auto}
  .langbox{margin-inline-start:0}
  .act-txt{display:block}
  .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .seller{padding:34px 32px}
  .top-grid{grid-template-columns:220px 1fr;grid-template-areas:"rail slide" "aside aside"}
  /* Aucun slide : la zone du carrousel disparaît au lieu de laisser un vide. */
  .top-grid.sans-carrousel{grid-template-columns:220px 1fr;grid-template-areas:"rail aside"}
  .railbox{display:block}
  .slideshow{height:380px}
}
@media (min-width:1200px){
  .top-grid{grid-template-columns:220px 1fr 250px;grid-template-areas:"rail slide aside"}
  .top-grid.sans-carrousel{grid-template-columns:220px 1fr;grid-template-areas:"rail aside"}
  .aside{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  /* Cinq par ligne plutôt que six : la carte reste assez large pour que le nom
     du produit tienne sur deux lignes et que la photo se lise. */
  .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .slideshow{height:420px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slides-track.anim{transition:none}
  .progress i.run{animation:none;width:100%}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ==========================================================================
   PAGES INTÉRIEURES — comptes, panier, fiche produit, listes
   Ajouté après la maquette d'accueil ; reprend les mêmes variables.
   ========================================================================== */

/* --- Alertes et messages ------------------------------------------------- */
.alerte{border-radius:var(--r);padding:12px 15px;margin-block:14px;font-size:.88rem}
.alerte ul{margin:0;padding-inline-start:18px;list-style:disc}
.alerte-succes{background:#E7F3F1;color:#0A524E}
.alerte-erreur{background:#FDECF3;color:#A80D4E}
.alerte-info{background:#FFF6E6;color:#7A4A05}

/* --- Blocs de page ------------------------------------------------------- */
.page-etroite{max-width:520px;padding-block:28px 44px}
.page-panier,.page-produit,.page-liste{padding-block:18px 44px}
.vide{background:var(--card);border-radius:var(--r);padding:40px 24px;text-align:center;color:var(--mut)}
.vide p{margin-block-end:18px}
.sous-titre{color:var(--mut);font-size:.9rem;margin-block-end:18px}
.fil{font-size:.8rem;color:var(--mut);margin-block-end:14px}
.fil a{color:var(--brand)}

/* --- Formulaires --------------------------------------------------------- */
.carte-form{background:var(--card);border-radius:var(--r);padding:26px 24px;box-shadow:var(--sh)}
.carte-form h1{margin:0 0 4px;font-size:1.5rem;color:var(--ink)}
.champ{margin-block-end:14px}
.champ label{display:block;font-size:.82rem;font-weight:600;margin-block-end:5px;color:var(--ink)}
.champ input,.champ select{width:100%;height:44px;padding-inline:13px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.92rem;background:var(--card);color:var(--txt)}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,107,102,.18)}
.champ.en-erreur input{border-color:var(--deal)}
.champ .erreur{display:block;margin-block-start:5px;font-size:.78rem;color:var(--deal)}
.champ .aide{display:block;margin-block-start:5px;font-size:.78rem;color:var(--mut)}
.duo{display:grid;gap:0 12px;grid-template-columns:1fr 1fr}
/* Sous 560 px, deux colonnes deviennent trop étroites pour certains champs :
   un sélecteur de date a une largeur minimale imposée par le navigateur et
   débordait de la page. */
@media (max-width:560px){ .duo{grid-template-columns:1fr} }
/* Un champ ne dépasse jamais sa colonne, quelle que soit sa largeur naturelle. */
.champ input,.champ select,.champ textarea{min-width:0;max-width:100%}
.ligne-options{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  align-items:center;font-size:.84rem;margin-block:4px 18px}
.ligne-options a{color:var(--brand)}
.case{display:flex;align-items:center;gap:7px;font-weight:400}
.case input{width:auto;height:auto}
.btn-principal{display:block;width:100%;padding:13px 20px;border-radius:999px;background:var(--brand);
  color:#fff;font-size:.95rem;font-weight:600;text-align:center;border:0;cursor:pointer}
.btn-principal:hover{background:var(--brand-d)}
.btn-principal.desactive{background:#9AA5B1;pointer-events:none}
/* Le centrage venait des écrans de connexion, où il a du sens. Appliqué à
   toutes les mentions du site, il centrait les textes secondaires au milieu
   des cartes et des listes. Il est désormais explicite là où on le veut. */
.mention{font-size:.76rem;color:var(--mut);margin-block-start:12px}
.mention-centre,.page-auth .carte-form > .mention{text-align:center}
.bascule{margin-block-start:20px;padding-block-start:16px;border-block-start:1px solid var(--line);
  font-size:.88rem;text-align:center;color:var(--mut)}
.bascule a{color:var(--brand);font-weight:600}
.form-deconnexion button{color:inherit;font:inherit;padding:8px 0;cursor:pointer;text-align:start}

/* --- Panier -------------------------------------------------------------- */
.page-panier h1{font-size:1.5rem;margin-block-end:16px}
.page-panier h1 .compte{color:var(--mut);font-weight:400;font-size:1rem}
.panier-grid{display:grid;gap:16px;grid-template-columns:1fr}
.panier-lignes{background:var(--card);border-radius:var(--r);padding:6px 16px 16px}
.panier-ligne{display:grid;grid-template-columns:76px 1fr;gap:12px;padding-block:16px;
  border-block-end:1px solid var(--line);align-items:start}
.panier-ligne:last-of-type{border-block-end:0}
.pl-img img{width:76px;height:76px;object-fit:cover;border-radius:8px;background:#EEF1F0}
.pl-info h2{margin:2px 0 4px;font-size:.92rem;font-weight:500;line-height:1.35}
.pl-boutique{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--brand)}
.pl-digital{font-size:.76rem;color:var(--volt);font-weight:600}
.pl-stock{font-size:.76rem;color:var(--deal)}
.pl-qte select{height:38px;padding-inline:10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.pl-prix{text-align:end}
.pl-prix .pz{font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--deal)}
.pl-prix .pu{display:block;font-size:.74rem;color:var(--mut)}
.lien-retirer{background:none;border:0;padding:4px 0;font-size:.78rem;color:var(--mut);
  text-decoration:underline;cursor:pointer}
.lien-retirer:hover{color:var(--deal)}
.vider{padding-block-start:12px;text-align:end}
.qte-fixe{font-size:.8rem;color:var(--mut)}

.panier-resume{background:var(--card);border-radius:var(--r);padding:20px 18px;align-self:start}
.panier-resume h2{margin:0 0 14px;font-size:1.05rem}
.panier-resume h3{margin:18px 0 8px;font-size:.86rem;color:var(--mut)}
.coupon-form{display:flex;gap:8px;margin-block-end:14px}
.coupon-form input{flex:1;min-width:0;height:40px;padding-inline:12px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:.86rem}
.coupon-form button{padding-inline:16px;border-radius:8px;background:var(--ink);color:#fff;
  border:0;font-size:.84rem;font-weight:600;cursor:pointer}
.coupon-actif{font-size:.82rem;color:var(--brand);margin-block-end:12px}
.totaux{display:grid;grid-template-columns:1fr auto;gap:9px 12px;margin:0;font-size:.9rem}
.totaux dt{color:var(--mut)}
.totaux dd{margin:0;text-align:end;font-family:var(--mono)}
.totaux .remise{color:var(--deal)}
.totaux .gratuit{color:var(--brand);font-weight:600}
.totaux .total{font-size:1.1rem;font-weight:700;color:var(--ink);padding-block-start:9px;
  border-block-start:1px solid var(--line)}
.info-port{font-size:.78rem;color:var(--brand);margin-block-start:10px}
.paiements{font-size:.84rem;margin-block-end:16px}
.paiements li{padding-block:5px;color:var(--txt)}
.paiements li.indispo{color:var(--mut);text-decoration:line-through}
.paiements li.indispo span{display:block;text-decoration:none;font-size:.76rem;color:var(--deal)}
.lien-continuer{display:block;text-align:center;margin-block-start:12px;font-size:.86rem;color:var(--brand)}

/* --- Fiche produit ------------------------------------------------------- */
.produit-grid{display:grid;gap:20px;grid-template-columns:1fr}
/* height:auto est indispensable : l'attribut height="700" du HTML est traduit
   par le navigateur en hauteur fixe, et « aspect-ratio » ne s'applique que si
   l'une des deux dimensions est automatique. Sans cela, l'image occupait
   366 × 700 sur mobile et se retrouvait rognée de moitié en largeur. */
/* « contain » plutôt que « cover » sur l'image principale : les vendeurs
   envoient des photos de tous formats, et rogner un tiers d'une photo 4:3 peut
   couper le produit lui-même. Le cadre reste carré pour que la page ne saute
   pas d'une fiche à l'autre ; les bandes sont comblées par le fond.
   Les vignettes et les cartes de liste gardent « cover », où l'uniformité prime
   sur l'exhaustivité. */
.galerie img#img-principale{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  border-radius:var(--r);background:#F3F5F6}
.vignettes{display:flex;gap:8px;margin-block-start:10px;overflow-x:auto;scrollbar-width:none}
.vignettes::-webkit-scrollbar{display:none}
.vignette{flex:none;border:2px solid transparent;border-radius:8px;padding:0;background:none;cursor:pointer}
.vignette img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.vignette[aria-current="true"]{border-color:var(--brand)}
.achat h1{margin:4px 0 8px;font-size:1.3rem;line-height:1.3}
.achat .boutique{font-size:.82rem}
.achat .boutique a{color:var(--brand);font-weight:600}
.achat .note{color:var(--gold);margin-inline-start:8px}
.achat .meta{display:flex;gap:8px;font-size:.8rem;color:var(--mut);margin-block-end:14px}
.achat .meta b{color:var(--gold)}
.prix-bloc{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-block-end:6px}
.prix-bloc .pz{font-family:var(--mono);font-size:1.7rem;font-weight:700;color:var(--deal)}
.prix-bloc .po{font-family:var(--mono);font-size:.9rem;color:var(--mut);text-decoration:line-through}
.bandeau-flash{font-size:.8rem;color:var(--deal);font-weight:600;margin-block-end:12px}
.achat .resume{font-size:.9rem;color:var(--txt);margin-block-end:16px}
.fiche-digital{background:var(--volt-d);color:#E8E4FF;border-radius:var(--r);padding:14px 16px;
  font-size:.84rem;margin-block-end:16px}
.fiche-digital li{padding-block:3px}
.fiche-digital b{color:#fff}
.form-achat{margin-block-end:16px}
.champ-qte select,.form-achat select{max-width:220px}
.btn-achat{max-width:340px}
.garanties{display:grid;gap:6px;font-size:.82rem;color:var(--mut)}
.garanties li{padding-inline-start:18px;position:relative}
.garanties li{padding-inline-start:22px}
/* Coche dessinée en CSS plutôt qu'un caractère « ✓ » : la police du site ne le
   contient pas, et la fonte de secours le rendait comme un « V ». */
.garanties li::before{content:"";position:absolute;inset-inline-start:2px;top:.42em;
  width:9px;height:5px;border-inline-start:2px solid var(--brand);
  border-block-end:2px solid var(--brand);transform:rotate(-45deg)}
.description{background:var(--card);border-radius:var(--r);padding:20px;margin-block:24px}
.description h2{margin:0 0 10px;font-size:1.05rem}
.description p{font-size:.9rem;line-height:1.65}

/* --- Listes -------------------------------------------------------------- */
.liste-head{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  align-items:flex-end;margin-block-end:14px}
.liste-head h1{margin:0;font-size:1.4rem}
.liste-head .sous-titre{margin:2px 0 0}
.champ-tri{margin:0}
.champ-tri select{height:38px;min-width:190px}
.sous-rayons{display:flex;gap:8px;overflow-x:auto;margin-block-end:16px;scrollbar-width:none}
.sous-rayons::-webkit-scrollbar{display:none}
.sous-rayons .chip{text-decoration:none}
.pagination{display:flex;gap:16px;justify-content:center;align-items:center;
  margin-block-start:26px;font-size:.88rem}
.pagination a{color:var(--brand);font-weight:600}
.pagination span{color:var(--mut)}

@media (min-width:700px){
  .panier-ligne{grid-template-columns:96px 1fr 130px 150px;align-items:center}
  .pl-img img{width:96px;height:96px}
  .produit-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media (min-width:960px){
  .panier-grid{grid-template-columns:1fr 340px}
  /* Bornée : au-delà, le visuel reste à 460 px et la colonne d'achat s'étire
     seule, laissant un vide à droite. Une fiche n'a pas besoin de toute la
     largeur d'un écran de 1920. */
  .produit-grid{grid-template-columns:1.1fr .9fr;gap:40px;max-width:1180px}
}

/* --- Tunnel de commande, confirmation, espace client --------------------- */
.bloc-titre{margin:22px 0 12px;font-size:1rem;color:var(--ink);padding-block-end:8px;
  border-block-end:1px solid var(--line)}
.bloc-titre:first-child{margin-block-start:8px}
.mode-paiement{display:flex;gap:11px;align-items:flex-start;padding:14px;border:1px solid var(--line);
  border-radius:var(--r);margin-block-end:10px;cursor:pointer}
.mode-paiement:has(input:checked){border-color:var(--brand);background:#F3F8F7}
.mode-paiement input{margin-block-start:3px}
.mode-paiement b{display:block;font-size:.92rem}
.mode-paiement small{color:var(--mut);font-size:.8rem}
.mode-indispo{padding:14px;border:1px dashed var(--line);border-radius:var(--r);
  margin-block-end:10px;color:var(--mut)}
.mode-indispo b{display:block;text-decoration:line-through}
.mode-indispo span{font-size:.8rem;color:var(--deal)}
.recap{font-size:.85rem;margin-block-end:14px;padding-block-end:12px;border-block-end:1px solid var(--line)}
.recap li{display:grid;grid-template-columns:32px 1fr auto;gap:6px;padding-block:5px;align-items:baseline}
.recap .q{color:var(--mut);font-family:var(--mono)}
.recap .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recap .p{font-family:var(--mono);font-weight:600}
.pastille-ok{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:var(--brand);
  color:#fff;font-size:1.6rem;display:grid;place-items:center}
.carte-form .totaux{margin-block:16px}
.fichiers{margin-block-end:18px;font-size:.9rem}
.fichiers li{display:flex;justify-content:space-between;gap:12px;padding-block:9px;
  border-block-end:1px solid var(--line)}
.fichiers a{color:var(--brand);font-weight:600}
.form-dl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-start:8px}
.btn-dl{padding:8px 16px;border-radius:999px;background:var(--volt);color:#fff;border:0;
  font-size:.83rem;font-weight:600;cursor:pointer}
.btn-dl:hover{background:#8270FF}
.ligne-commande{grid-template-columns:1fr auto}
.etat{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:600;
  background:#EEF2F1;color:var(--mut);margin-block-end:6px}
.etat-confirmee{background:#E7F3F1;color:var(--brand-d)}
.etat-expediee,.etat-livree{background:#E9F0FB;color:#1B4F8C}
.etat-annulee{background:#FDECF3;color:var(--deal-d)}
.adresse{font-size:.86rem;line-height:1.7;color:var(--txt);margin-block-end:14px;
  padding-block-end:14px;border-block-end:1px solid var(--line)}

/* --- Recherche, ventes flash, boutique, favoris, suivi ------------------- */
.flash-page{margin-block-end:18px}
.flash-note{position:relative;font-size:.86rem;color:rgba(255,255,255,.85);margin-block-start:-4px}
.sold .urgent{color:var(--deal)}
.pcard .bar{height:5px;border-radius:999px;background:#EDEFF1;margin-block-start:7px;overflow:hidden}
.pcard .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--deal))}
.pcard .sold{font-size:.72rem;color:var(--mut);margin-block-start:4px}
.btn-mini{padding:6px 13px;border-radius:999px;background:var(--brand);color:#fff;border:0;
  font-size:.78rem;font-weight:600;cursor:pointer;margin-block-start:6px}
.btn-mini:hover{background:var(--brand-d)}
.fav-form{position:absolute;top:0;inset-inline-end:0;z-index:2}

.boutique-entete{display:flex;gap:16px;align-items:center;background:var(--card);
  border-radius:var(--r);padding:18px;margin-block-end:14px}
.boutique-logo{width:62px;height:62px;border-radius:16px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--deal));color:#fff;
  font-family:var(--mono);font-weight:700;font-size:1.2rem}
.boutique-entete h1{margin:0 0 4px;font-size:1.3rem}
.boutique-entete .meta{display:flex;flex-wrap:wrap;gap:7px;font-size:.82rem;color:var(--mut)}
.boutique-entete .meta b{color:var(--gold)}
.badge-verifie{margin-block-start:6px;font-size:.78rem;color:var(--brand);font-weight:600}
.boutique-desc{background:var(--card);border-radius:var(--r);padding:16px 18px;
  font-size:.88rem;line-height:1.6;margin-block-end:16px}

.etapes{list-style:none;margin:0 0 8px;padding:0}
.etapes li{position:relative;padding:0 0 16px 22px;border-inline-start:2px solid var(--line);
  margin-inline-start:5px}
html[dir="rtl"] .etapes li{padding:0 22px 16px 0}
.etapes li:last-child{border-inline-start-color:transparent}
.etapes li::before{content:"";position:absolute;inset-inline-start:-7px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--brand)}
.etapes b{display:block;font-size:.92rem}
.etapes span{font-size:.78rem;color:var(--mut)}
.etapes em{display:block;font-size:.8rem;color:var(--mut);font-style:normal}

/* --- Pages éditoriales, contact, vendeur, coupons ------------------------ */
.page-contenu h1{margin:0 0 16px;font-size:1.5rem}
.page-contenu h2{margin:22px 0 8px;font-size:1.05rem;color:var(--ink)}
.page-contenu h3{margin:16px 0 6px;font-size:.94rem;color:var(--ink)}
.page-contenu p{margin-block-end:10px;font-size:.92rem;line-height:1.65}
.page-contenu ul{margin:0 0 12px;padding-inline-start:20px;list-style:disc;font-size:.92rem;line-height:1.7}
.page-contenu em{color:var(--deal);font-style:italic}
.champ textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.92rem;background:var(--card);color:var(--txt);resize:vertical}
.champ textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,107,102,.18)}

.page-vendre{padding-block:18px 44px}
.page-vendre .seller h2{margin:0 0 8px}

.coupons-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.coupon-carte{background:linear-gradient(135deg,var(--deal),#8A0F44);color:#fff;border-radius:var(--r);
  padding:18px;position:relative;overflow:hidden}
.coupon-carte::after{content:"";position:absolute;inset-inline-end:-30px;bottom:-40px;width:110px;height:110px;
  border-radius:50%;background:rgba(255,255,255,.12)}
.coupon-carte .valeur{font-size:1.6rem;font-weight:700;margin-block-end:6px;position:relative}
.coupon-carte .cond{font-size:.8rem;opacity:.92;line-height:1.5;position:relative}
.coupon-carte .code-bloc{margin-block-start:12px;position:relative}
.coupon-carte .code{display:inline-block;padding:5px 12px;border-radius:6px;background:rgba(255,255,255,.22);
  font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.08em}
.coupon-carte .mention{color:rgba(255,255,255,.8);margin-block-start:8px;position:relative}

/* --- Espace vendeur, page 404 -------------------------------------------- */
.page-vendeur{padding-block:18px 44px}
.menu-vendeur{display:flex;gap:6px;overflow-x:auto;margin-block-end:16px;scrollbar-width:none}
.menu-vendeur::-webkit-scrollbar{display:none}
.menu-vendeur a{flex:none;padding:9px 16px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);font-size:.86rem;white-space:nowrap}
.menu-vendeur a[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:#fff}

.cartes-stats{display:grid;gap:10px;grid-template-columns:repeat(2,1fr);margin-block-end:16px}
.cartes-stats .stat{background:var(--card);border-radius:var(--r);padding:14px 16px}
.cartes-stats small{display:block;font-size:.75rem;color:var(--mut);margin-block-end:4px}
.cartes-stats b{font-family:var(--mono);font-size:1.15rem;font-weight:700}
.cartes-stats .negatif{color:var(--deal)}
.cartes-stats .positif{color:var(--brand)}

.barres{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.barres li{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;font-size:.84rem}
.barres .lib{font-family:var(--mono);color:var(--mut)}
.barres .jauge{height:10px;border-radius:999px;background:#EDEFF1;overflow:hidden}
.barres .jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-l))}
.barres .val{font-family:var(--mono);font-weight:600}
.recap .q.epuise{color:var(--deal);font-weight:700}

.table-vendeur{display:grid;gap:8px}
.ligne-produit{display:grid;gap:10px;align-items:center;background:var(--card);border-radius:var(--r);
  padding:12px;grid-template-columns:56px 1fr}
.ligne-produit.inactif{opacity:.6}
.ligne-produit img{width:56px;height:56px;object-fit:cover;border-radius:8px;background:#EEF1F0}
.lp-nom a{font-size:.9rem;font-weight:600}
.lp-nom .mention{display:block}
.lp-champ{display:flex;gap:6px;align-items:center}
.lp-champ input{width:100%;max-width:110px;height:36px;padding-inline:10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:.85rem}
.lp-champ input.alerte-stock{border-color:var(--deal);color:var(--deal);font-weight:600}
.lp-champ button,.lc-action button{height:36px;padding-inline:12px;border-radius:8px;background:var(--ink);
  color:#fff;border:0;font-size:.78rem;font-weight:600;cursor:pointer}
.bascule-etat{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:.78rem;font-weight:600;cursor:pointer}
.ligne-produit.inactif .bascule-etat{color:var(--mut)}

.ligne-commande-v{display:grid;gap:10px;background:var(--card);border-radius:var(--r);padding:14px;
  grid-template-columns:1fr}
.ligne-commande-v b{font-size:.9rem}
.lc-action{display:flex;gap:6px}
.lc-action select{flex:1;height:36px;padding-inline:10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:.84rem}
.code-404{font-family:var(--mono);font-size:3rem;font-weight:700;color:var(--brand);margin-block-end:6px}

@media (min-width:700px){
  .cartes-stats{grid-template-columns:repeat(4,1fr)}
  .ligne-produit{grid-template-columns:56px 1fr 150px 150px 120px}
  .ligne-commande-v{grid-template-columns:1.1fr 1.4fr 1.2fr 1fr 190px;align-items:center}
}

/* --- Back-office, fiche produit vendeur ---------------------------------- */
.pastille{display:inline-grid;place-items:center;min-width:18px;height:18px;padding-inline:5px;
  border-radius:999px;background:var(--deal);color:#fff;font-family:var(--mono);font-size:.72rem;font-weight:700}
.menu-vendeur a[aria-current="page"] .pastille{background:#fff;color:var(--deal)}
.message-admin{background:var(--card);border-radius:var(--r);padding:14px}
.ma-tete{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin-block-end:8px}
.ma-tete a{color:var(--brand)}
.ma-corps{font-size:.88rem;line-height:1.6;padding:10px 12px;background:var(--bg);
  border-radius:8px;margin-block-end:10px;white-space:pre-line}
.bloc-langue{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-block-end:12px}
.bloc-langue legend{padding-inline:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--brand);font-weight:700}
.galerie-admin{display:flex;flex-wrap:wrap;gap:12px}
.galerie-admin figure{margin:0;text-align:center;border:2px solid transparent;border-radius:var(--r);padding:6px}
.galerie-admin figure.principale{border-color:var(--brand)}
.galerie-admin img{width:110px;height:110px;object-fit:cover;border-radius:8px;background:#EEF1F0}
.galerie-admin figcaption{display:flex;flex-direction:column;gap:4px;align-items:center;margin-block-start:6px}
.champ input[type=file]{padding:9px;background:var(--bg)}

/* --- Profil, adresses, avis, coupons admin ------------------------------- */
.zone-danger{border:1px solid #F3C7D9}
.zone-danger .bloc-titre{color:var(--deal);border-block-end-color:#F3C7D9}
.btn-danger{display:block;width:100%;padding:12px 20px;border-radius:999px;background:var(--deal);
  color:#fff;border:0;font-size:.92rem;font-weight:600;cursor:pointer}
.btn-danger:hover{background:var(--deal-d)}
.carte-adresse{display:grid;gap:10px;grid-template-columns:1fr;background:var(--card);
  border-radius:var(--r);padding:14px;border:1px solid transparent}
.carte-adresse.defaut{border-color:var(--brand)}
.carte-adresse .adresse{border:0;padding:0;margin:6px 0 0}

.avis{margin-block:26px}
.form-avis{margin-block-end:16px}
.form-avis h3{margin:0 0 12px;font-size:1rem}
.notes{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px;border:0;padding:0;margin:0 0 12px}
.notes legend{float:inline-start;width:100%;font-size:.82rem;font-weight:600;margin-block-end:6px}
.notes label{display:flex;align-items:center;gap:4px;padding:6px 11px;border:1px solid var(--line);
  border-radius:999px;cursor:pointer;font-size:.84rem}
.notes label:has(input:checked){background:var(--gold);border-color:var(--gold);color:#3B2A00;font-weight:700}
.notes input{position:absolute;opacity:0;width:1px;height:1px}
.liste-avis{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.liste-avis li{background:var(--card);border-radius:var(--r);padding:14px}
.avis-tete{display:flex;flex-wrap:wrap;gap:9px;align-items:baseline;margin-block-end:6px}
.avis-tete b{color:var(--gold);letter-spacing:1px}
.vide-etoile{color:var(--line)}
.avis-texte{font-size:.9rem;line-height:1.6}
.editeur{font-family:var(--mono);font-size:.82rem;line-height:1.5}
.ligne-commande-v.inactif{opacity:.55}

@media (min-width:700px){
  .carte-adresse{grid-template-columns:1fr auto;align-items:center}
}

/* --- Clés de licence ------------------------------------------------------ */
.lic-compteurs{display:flex;gap:18px;font-size:.86rem;margin-block-end:12px}
.lic-compteurs b{font-family:var(--mono);font-size:1.1rem}
.lic-compteurs .epuise{color:var(--deal)}
.cle-licence{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-start:8px}
.cle-licence span{font-size:.78rem;color:var(--mut)}
.cle-licence code{padding:6px 12px;border-radius:7px;background:var(--volt-d);color:#fff;
  font-family:var(--mono);font-size:.86rem;letter-spacing:.06em;user-select:all}

/* --- Menu du compte dans l'en-tête ---------------------------------------- */
.userbox{position:relative}
.userbtn{background:none;border:0;cursor:pointer;font:inherit;color:inherit;
  display:flex;align-items:center;gap:7px}
.userbtn .chev{width:14px;height:14px;flex:none;opacity:.6}
.usermenu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:60;
  min-width:210px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 14px 34px -16px rgba(20,24,31,.4);padding:6px;overflow:hidden}
.usermenu a,.usermenu button{display:block;width:100%;padding:9px 12px;border-radius:8px;
  font-size:.86rem;text-align:start;background:none;border:0;cursor:pointer;font:inherit;color:var(--txt)}
.usermenu a:hover,.usermenu button:hover{background:var(--bg)}
.usermenu .sep{margin-block-start:6px;padding-block-start:8px;border-block-start:1px solid var(--line)}
.usermenu form.sep{margin-block-start:6px;padding-block-start:6px;border-block-start:1px solid var(--line)}
.usermenu form button{color:var(--deal);font-weight:600}

/* =============================================================================
   BACK-OFFICE — mise en page autonome
   Menu vertical permanent à partir de 1024 px, panneau latéral en dessous.
   ========================================================================== */
body.bo{background:#F1F3F4}
.bo-layout{display:flex;min-height:100vh}

/* --- Menu vertical -------------------------------------------------------- */
.bo-nav{position:fixed;inset-block:0;inset-inline-start:0;z-index:70;width:260px;
  background:var(--ink);color:#E8ECEF;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .22s ease}
html[dir="rtl"] .bo-nav{transform:translateX(100%)}
.bo-nav.ouvert{transform:none}
.bo-marque{display:flex;align-items:center;gap:10px;padding:16px 18px;
  border-block-end:1px solid rgba(255,255,255,.1)}
.bo-marque .logo{color:#fff;font-size:1.05rem}
.bo-etiquette{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;background:var(--brand);color:#fff}
.bo-fermer{margin-inline-start:auto;background:none;border:0;color:#98A3AD;cursor:pointer;padding:4px}
.bo-fermer svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

.bo-nav{overflow-y:auto;scrollbar-width:thin}
.bo-menu{padding:8px 10px}
.bo-groupe{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#5C6C7A;padding:12px 12px 5px;margin:0}
.bo-menu ul{list-style:none;margin:0;padding:0}
.bo-menu a{display:flex;align-items:center;gap:11px;padding:8px 11px;border-radius:9px;
  font-size:.86rem;color:#C7CFD6;position:relative;transition:background .15s,color .15s}
.bo-menu a svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.bo-menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.bo-menu a[aria-current="page"]{background:var(--brand);color:#fff;font-weight:600}
.bo-menu a[aria-current="page"]::before{content:"";position:absolute;inset-inline-start:-10px;
  top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--gold)}
.bo-menu a:hover{padding-inline-start:14px}
.bo-menu a span:first-of-type{flex:1;min-width:0}
.bo-menu .pastille{background:var(--deal);color:#fff}
.bo-menu a[aria-current="page"] .pastille{background:#fff;color:var(--deal)}

.bo-pied{padding:12px 10px;border-block-start:1px solid rgba(255,255,255,.1);display:grid;gap:4px}
.bo-retour,.bo-quitter{display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;
  border-radius:9px;font-size:.86rem;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:start;color:#C7CFD6}
.bo-retour svg,.bo-quitter svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.7;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.bo-retour{background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.bo-retour:hover{background:var(--brand)}
.bo-quitter:hover{background:rgba(225,29,107,.18);color:#FF8FB8}

.bo-voile{position:fixed;inset:0;z-index:60;background:rgba(20,24,31,.5);opacity:0;visibility:hidden;
  transition:opacity .2s}
.bo-voile.actif{opacity:1;visibility:visible}

/* --- Corps ---------------------------------------------------------------- */
.bo-corps{flex:1;min-width:0;display:flex;flex-direction:column}
.bo-barre{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:12px 16px;background:var(--card);border-block-end:1px solid var(--line)}
.bo-burger{background:none;border:1px solid var(--line);border-radius:9px;padding:7px;cursor:pointer}
.bo-burger svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.bo-titre{margin:0;font-size:1.05rem;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bo-actions{display:flex;align-items:center;gap:10px}
.bo-lien-site{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);font-size:.82rem;color:var(--brand);font-weight:600}
.bo-lien-site svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.bo-lien-site:hover{background:#F0F6F5}
.bo-qui{font-size:.82rem;color:var(--mut);white-space:nowrap}
.bo-contenu{flex:1;padding:16px}
.bo-bas{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;
  font-size:.76rem;color:var(--mut);border-block-start:1px solid var(--line)}

/* Le contenu du back-office réutilise les composants du site, sans la largeur
   contrainte du site public : les tableaux ont besoin de toute la place. */
.bo .liste-head{margin-block-end:14px}
.bo .cartes-stats{grid-template-columns:repeat(2,1fr)}
.bo .panier-grid{grid-template-columns:1fr}
.bo .carte-form{max-width:820px}

@media (min-width:700px){
  .bo .cartes-stats{grid-template-columns:repeat(4,1fr)}
  .bo-contenu{padding:22px}
}
@media (min-width:1024px){
  .bo-nav{position:sticky;top:0;height:100vh;transform:none;flex:none}
  html[dir="rtl"] .bo-nav{transform:none}
  .bo-burger,.bo-fermer{display:none}
  .bo-voile{display:none}
  .bo .panier-grid{grid-template-columns:1fr 340px}
  .bo-contenu{padding:26px 28px}
}

/* --- Après-vente : notation, photos, réclamations ------------------------- */
.page-evaluer .carte-form{margin-block-end:14px}
.notes-etoiles{display:inline-flex;flex-direction:row-reverse;gap:2px}
.notes-etoiles input{position:absolute;opacity:0;width:1px;height:1px}
.notes-etoiles label{font-size:1.5rem;line-height:1;color:var(--line);cursor:pointer;padding:0 1px}
.notes-etoiles label:hover,.notes-etoiles label:hover ~ label,
.notes-etoiles input:checked ~ label{color:var(--gold)}
.notes-etoiles input:focus-visible + label{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.criteres{display:grid;gap:6px}
.criteres .champ{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.criteres label{margin:0;font-weight:400;color:var(--mut);font-size:.84rem}
.bloc-avis-produit{border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-block-end:12px}
.bloc-avis-produit h3{margin:0 0 10px;font-size:.94rem}
.avis-photos,.msg-images{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:8px}
.avis-photos img,.msg-images img{width:84px;height:84px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);background:#EEF1F0}
.avis-criteres{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:8px;font-size:.78rem;color:var(--mut)}
.avis-criteres b{color:var(--gold)}

.fil-messages{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.msg{padding:12px 14px;border-radius:var(--r);background:var(--bg)}
.msg-admin,.msg-vendeur{background:#EAF3F2;border-inline-start:3px solid var(--brand)}
.msg-client{background:var(--bg);border-inline-start:3px solid var(--line)}
.msg-tete{display:flex;gap:10px;align-items:baseline;margin-block-end:5px;font-size:.86rem}
.msg-corps{font-size:.9rem;line-height:1.6;white-space:pre-line}
.ligne-commande-v.non-lu{border-inline-start:3px solid var(--deal)}
.etat-ouvert{background:#FFF1E0;color:#8A4B00}
.etat-en_cours{background:#E9F0FB;color:#1B4F8C}
.etat-attente_client{background:#FDECF3;color:var(--deal-d)}
.etat-resolu{background:#E7F3F1;color:var(--brand-d)}
.etat-ferme{background:#EEF2F1;color:var(--mut)}

/* --- Onglets d'état, barre de filtres, tableau réactif -------------------- */
.onglets{display:flex;gap:4px;overflow-x:auto;margin-block-end:14px;
  border-block-end:1px solid var(--line);scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglets a{flex:none;display:flex;align-items:center;gap:7px;padding:10px 14px;
  font-size:.88rem;color:var(--mut);border-block-end:2px solid transparent;white-space:nowrap}
.onglets a:hover{color:var(--ink)}
.onglets a[aria-current="page"]{color:var(--brand);border-block-end-color:var(--brand);font-weight:600}
.onglets .compteur{font-family:var(--mono);font-size:.72rem;padding:1px 7px;border-radius:999px;
  background:var(--bg);color:var(--mut)}
.onglets a[aria-current="page"] .compteur{background:var(--brand);color:#fff}

.barre-filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-end:12px}
.barre-filtres .champ{margin:0}
.barre-filtres select,.barre-filtres input{height:38px;border:1px solid var(--line);border-radius:9px;
  padding-inline:11px;font:inherit;font-size:.85rem;background:var(--card);color:var(--txt)}
.champ-recherche{position:relative;flex:1;min-width:200px}
.champ-recherche svg{position:absolute;inset-inline-start:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--mut);stroke-width:2;fill:none;stroke-linecap:round;pointer-events:none}
.champ-recherche input{width:100%;padding-inline-start:34px}
html[dir="rtl"] .champ-recherche input{padding-inline-start:11px;padding-inline-end:34px}
.resume-liste{font-size:.82rem;color:var(--mut);margin-block-end:10px}

/* Tableau : colonnes sur grand écran, cartes en dessous de 860 px.
   Un seul balisage, deux présentations. */
.tableau-reactif{background:var(--card);border-radius:var(--r);overflow:hidden}
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl thead{display:none}
.tbl tr{display:block;padding:12px 14px;border-block-end:1px solid var(--line)}
.tbl tr:last-child{border-block-end:0}
.tbl tr.inactif{opacity:.62}
.tbl td{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:4px 0;
  border:0;text-align:start}
.tbl td::before{content:attr(data-libelle);font-size:.76rem;color:var(--mut);flex:none}
.tbl td:not([data-libelle])::before{content:none}
/* .tbl td est plus spécifique que .col-produit : sans le sélecteur complet,
   le justify-content:space-between de la règle générale l'emporte et rejette le
   nom du produit à droite de la carte. */
.tbl td.col-produit{flex-direction:row;justify-content:flex-start;padding-block-end:8px}
.tbl td.col-produit::before{content:none}
.tbl td.col-produit img{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#EEF1F0;flex:none}
.tbl td.col-produit span{display:flex;flex-direction:column;min-width:0;text-align:start}
.tbl td.col-produit a{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tbl td.col-produit small{font-family:var(--mono);font-size:.7rem;color:var(--mut)}
.tbl td.col-actions{display:flex;gap:6px;justify-content:flex-end;padding-block-start:8px}
.tbl .mono{font-family:var(--mono)}
.stock-bas{color:var(--deal);font-weight:700}
.etat-avant{background:#FFF4DA;color:#8A5B00}
.bascule-etat.etoile{padding-inline:11px;font-size:.95rem;line-height:1}

@media (min-width:860px){
  .tbl thead{display:table-header-group}
  .tbl tr{display:table-row;padding:0}
  .tbl th{padding:11px 12px;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
    color:var(--mut);text-align:start;border-block-end:1px solid var(--line);background:var(--bg)}
  .tbl td{display:table-cell;padding:10px 12px;vertical-align:middle;
    border-block-end:1px solid var(--line)}
  .tbl td::before{content:none}
  .tbl .num,.tbl th.num{text-align:end}
  .tbl td.col-produit{display:flex;gap:10px;align-items:center}
  .tbl td.col-actions{display:table-cell;white-space:nowrap}
  .col-actions form{display:inline-block}
}

/* --- Boutiques du back-office -------------------------------------------- */
.boutique-pastille{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--deal));color:#fff;
  font-family:var(--mono);font-weight:700;font-size:.78rem}
.form-commission{display:flex;gap:4px;align-items:center}
.form-commission input{width:52px;height:32px;padding-inline:7px;border:1px solid var(--line);
  border-radius:7px;font:inherit;font-family:var(--mono);font-size:.78rem;text-align:center}
.tbl td small{display:block;font-size:.72rem;color:var(--mut);font-family:inherit}
.tbl td small.mention{margin-block-start:2px}

/* En mode cartes, une cellule peut contenir plusieurs éléments (valeur +
   précision en dessous). Sans autorisation de retour à la ligne, le second
   déborde hors de la carte. */
@media (max-width:859px){
  .tbl td{flex-wrap:wrap;align-items:baseline;gap:8px}
  .tbl td::before{flex:0 0 auto}
  .tbl td > *{min-width:0}
  .tbl td small{flex:1 0 100%;text-align:end}
  .tbl td .mention{text-align:end}
  .tbl td.num{justify-content:space-between}
  .form-commission{flex:1;justify-content:flex-end}
}

/* --- Fiche d'une boutique ------------------------------------------------- */
.fiche-entete{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--card);
  border-radius:var(--r);padding:16px 18px;margin-block-end:14px}
.boutique-pastille.grande{width:54px;height:54px;border-radius:14px;font-size:1.05rem}
.fiche-titre{flex:1;min-width:200px}
.fiche-titre h2{margin:0 0 4px;font-size:1.25rem}
.fiche-titre .mention{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fiche-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fiche-actions form{display:inline}
.bo .cartes-stats .stat .mention{display:block;font-family:inherit;font-size:.72rem;margin-block-start:3px}
.lien-plus{float:inline-end;font-size:.78rem;font-weight:400;color:var(--brand)}
.liste-avis.compacte li{padding:10px 12px}
.liste-avis.compacte .avis-texte{font-size:.82rem}
.recap .n .etat{margin-inline-start:6px}
.champ input:disabled{background:var(--bg);color:var(--mut)}

@media (min-width:700px){
  .bo .cartes-stats{grid-template-columns:repeat(4,1fr)}
}
/* Le « / total » d'une carte de chiffre reste sur la même ligne. */
.bo .cartes-stats .stat .sur{font-family:var(--mono);font-weight:400;color:var(--mut);font-size:.9rem}

/* --- Espace vendeur étendu, détail de commande ---------------------------- */
.logo-boutique{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.logo-boutique img{width:96px;height:96px;object-fit:cover;border-radius:16px;
  border:1px solid var(--line);background:var(--bg)}
.logo-boutique > div{flex:1;min-width:220px}
.etapes-suivi{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:0}
.etapes-suivi li{display:flex;gap:12px;padding-block:10px;position:relative}
.etapes-suivi li:not(:last-child)::before{content:"";position:absolute;
  inset-inline-start:5px;top:24px;bottom:-6px;width:2px;background:var(--line)}
.pastille-etape{width:12px;height:12px;flex:none;border-radius:50%;background:var(--brand);
  margin-block-start:5px;position:relative;z-index:1}
.etapes-suivi li:last-child .pastille-etape{background:var(--deal)}
.etapes-suivi b{display:block;font-size:.88rem}
.etapes-suivi .mention{font-size:.76rem}
.etapes-suivi p.mention{margin-block-start:3px}

/* --- Espace client -------------------------------------------------------- */
.page-compte{padding-block:20px}
.compte-entete{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-block-end:14px}
.compte-entete h1{margin:0 0 3px}
.etat.grande{font-size:.84rem;padding:7px 15px}
.rappels{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:14px}
.rappel{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--r);
  background:#FFF4DA;color:#8A5B00;font-size:.86rem;font-weight:600}
.rappel b{font-family:var(--mono);font-size:1.15rem}

.liste-commandes{display:grid;gap:12px}
.carte-commande{background:var(--card);border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line)}
.cc-tete{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--bg);border-block-end:1px solid var(--line)}
.cc-ref{font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--ink)}
.cc-tete .mention{margin-inline-start:8px}
.cc-corps{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:14px 16px}
.cc-vignettes{display:flex;gap:6px;align-items:center;flex:none}
.cc-vignettes img{width:56px;height:56px;object-fit:cover;border-radius:9px;background:#EEF1F0;
  border:1px solid var(--line)}
.cc-reste{display:grid;place-items:center;width:40px;height:56px;border-radius:9px;background:var(--bg);
  font-family:var(--mono);font-size:.78rem;color:var(--mut)}
.cc-detail{flex:1;min-width:180px}
.cc-articles a{font-weight:600;display:block;margin-block-end:3px}
.cc-articles .mention{display:block;font-size:.78rem}
.cc-total{font-family:var(--mono);font-weight:700;font-size:1.05rem;margin:0;flex:none}
.cc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;
  border-block-start:1px solid var(--line)}

/* Parcours de la commande */
.parcours{display:flex;list-style:none;margin:0 0 16px;padding:14px 16px;gap:4px;
  background:var(--card);border-radius:var(--r);overflow-x:auto;scrollbar-width:none}
.parcours::-webkit-scrollbar{display:none}
.parcours li{flex:1;min-width:110px;display:flex;flex-direction:column;align-items:center;
  gap:5px;position:relative;text-align:center;color:var(--mut);font-size:.8rem}
.parcours li:not(:last-child)::after{content:"";position:absolute;top:14px;
  inset-inline-start:calc(50% + 18px);inset-inline-end:calc(-50% + 18px);height:2px;background:var(--line)}
.parcours li.faite:not(:last-child)::after{background:var(--brand)}
.pc-point{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:2px solid var(--line);font-size:.76rem;font-weight:700;
  position:relative;z-index:1}
.parcours li.faite .pc-point{background:var(--brand);border-color:var(--brand);color:#fff}
.parcours li.courante .pc-lib{color:var(--ink);font-weight:700}
.pc-date{font-family:var(--mono);font-size:.7rem}

.ligne-article{display:flex;gap:12px;align-items:flex-start;padding-block:12px;
  border-block-end:1px solid var(--line)}
.ligne-article:last-child{border-block-end:0}
.ligne-article img{width:64px;height:64px;object-fit:cover;border-radius:9px;background:#EEF1F0;flex:none}
.la-info{flex:1;min-width:0}
.la-info a,.la-info b{font-weight:600;display:block;margin-block-end:3px}
.la-total{font-family:var(--mono);font-weight:600;margin:0;flex:none}

@media (max-width:640px){
  .cc-corps{gap:10px}
  .cc-total{width:100%;text-align:end}
}

/* --- Espace client : navigation et mises en page ------------------------- */
/* Le menu défile sur mobile et se replie sur plusieurs lignes sur grand
   écran : une barre coupée à droite, comme avant, cachait deux entrées. */
.menu-compte{display:flex;gap:6px;overflow-x:auto;margin-block-end:18px;
  scrollbar-width:none;padding-block-end:2px}
.menu-compte::-webkit-scrollbar{display:none}
.menu-compte a{flex:none;padding:9px 16px;border-radius:999px;background:var(--card);
  border:1px solid var(--line);font-size:.86rem;color:var(--txt);white-space:nowrap}
.menu-compte a:hover{border-color:var(--brand);color:var(--brand)}
.menu-compte a[aria-current="page"]{background:var(--brand);border-color:var(--brand);
  color:#fff;font-weight:600}

.grille-compte{display:grid;gap:14px}
.grille-adresses{display:grid;gap:12px;margin-block-end:16px}
.page-compte .carte-form{max-width:none}
.page-compte .fil{margin-block-end:10px}

@media (min-width:900px){
  .menu-compte{flex-wrap:wrap;overflow:visible}
  .grille-compte{grid-template-columns:1fr 1fr;align-items:start}
  .grille-adresses{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .page-compte .panier-grid{grid-template-columns:1fr 340px;align-items:start}
}
@media (min-width:1200px){
  .grille-adresses{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}

/* --- Tableau de bord du compte ------------------------------------------- */
.carte-profil{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:18px 20px;
  border-radius:var(--r);background:linear-gradient(135deg,var(--ink),#013F63);color:#fff;
  margin-block-end:18px}
.avatar{width:56px;height:56px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);font-size:1.5rem;font-weight:700}
.cp-info{flex:1;min-width:180px}
.cp-info h1{margin:0 0 3px;font-size:1.3rem;color:#fff}
.cp-info .mention{color:rgba(255,255,255,.72);margin:0}
.cp-chiffres{display:flex;gap:22px;margin:0;flex-wrap:wrap}
.cp-chiffres div{text-align:end}
.cp-chiffres dt{font-size:.72rem;color:rgba(255,255,255,.65);margin-block-end:2px}
.cp-chiffres dd{margin:0;font-family:var(--mono);font-size:1.1rem;font-weight:700}

.rappel.urgent{background:#FDECF3;color:#A80D4E}

.suivi-compact{padding-block:12px;border-block-end:1px solid var(--line)}
.suivi-compact:last-child{border-block-end:0}
.sc-tete{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.sc-barre{display:flex;gap:4px;margin-block:8px 6px}
.sc-barre span{flex:1;height:5px;border-radius:3px;background:var(--line)}
.sc-barre span.faite{background:var(--brand)}
.suivi-compact .mention{margin:0}

.liste-mini{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.liste-mini li{display:flex;gap:12px;align-items:center;padding-block:10px;
  border-block-end:1px solid var(--line)}
.liste-mini li:last-child{border-block-end:0}
.lm-images{display:flex;gap:4px;flex:none}
.lm-images img{width:44px;height:44px;object-fit:cover;border-radius:8px;background:#EEF1F0}
.lm-texte{flex:1;min-width:0}
.lm-texte a{font-family:var(--mono);font-weight:600;font-size:.86rem;display:block}
.lm-texte small{display:block;margin:0}
.lm-fin{text-align:end;flex:none;display:grid;gap:4px;justify-items:end}
.lm-fin b{font-family:var(--mono);font-size:.92rem}

.grille-envies{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.envie{display:grid;gap:5px;justify-items:center;text-align:center;padding:10px;
  border:1px solid var(--line);border-radius:var(--r)}
.envie:hover{border-color:var(--brand)}
.envie img{width:80px;height:80px;object-fit:cover;border-radius:9px;background:#EEF1F0}
.en-nom{font-size:.8rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.en-prix{font-family:var(--mono);font-weight:700;font-size:.86rem;color:var(--brand)}

.raccourcis{list-style:none;margin:0;padding:0}
.raccourcis a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 2px;border-block-end:1px solid var(--line);font-size:.88rem;color:var(--txt)}
.raccourcis li:last-child a{border-block-end:0}
.raccourcis a:hover{color:var(--brand)}
.raccourcis b{font-family:var(--mono);color:var(--mut)}
.raccourcis a:hover b{color:var(--brand)}
.page-compte aside .bascule-etat{display:block;text-align:center;margin-block-start:8px}

@media (max-width:620px){
  .cp-chiffres{gap:16px;width:100%}
  .cp-chiffres div{text-align:start}
}

/* --- Espace vendeur : particularités du gabarit --------------------------- */
.bo-boutique{display:flex;gap:10px;align-items:center;padding:12px 16px;margin:10px;
  border-radius:var(--r);background:rgba(255,255,255,.06)}
.bo-boutique b{display:block;color:#fff;font-size:.86rem;line-height:1.3}
.bo-boutique .etat{margin-block-start:4px;font-size:.72rem}
.bo-boutique .boutique-pastille{width:34px;height:34px;border-radius:9px;font-size:.72rem}
.bo-vendeur .bo-menu a[aria-current="page"]{background:var(--brand)}

/* --- Espace vendeur : édition sur place et états ------------------------- */
.form-inline{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.form-inline input{width:74px;height:32px;padding-inline:8px;border:1px solid var(--line);
  border-radius:7px;font:inherit;font-family:var(--mono);font-size:.8rem;text-align:end}
.form-inline input.stock-bas{border-color:var(--deal);color:var(--deal)}
.etat-en_attente{background:#FFF1E0;color:#8A4B00}
.etat-accepte{background:#E9F0FB;color:#1B4F8C}
.etat-prepare{background:#EDE9FE;color:#4C1D95}
.etat-expedie{background:#E0F2FE;color:#075985}
.etat-livre{background:#E7F3F1;color:var(--brand-d)}
.etat-annule{background:#FDECF3;color:var(--deal-d)}
.bo .liste-mini li{border-block-end:1px solid var(--line)}
.bascule-etat.coche{padding:6px 9px;line-height:0}
.bascule-etat.coche svg{width:15px;height:15px;stroke:var(--brand);stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* --- Espace vendeur : identité en pied de menu ---------------------------- */
.bo-utilisateur{display:flex;align-items:center;gap:10px;padding:10px 11px;margin-block-end:6px;
  border-radius:10px;background:rgba(255,255,255,.06)}
.avatar-mini{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-weight:700;font-size:.86rem}
.bu-nom{flex:1;min-width:0}
.bu-nom b{display:block;color:#fff;font-size:.82rem;line-height:1.25}
.bu-nom small{display:block;color:#8894A0;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.bu-sortie{background:none;border:0;cursor:pointer;padding:5px;border-radius:7px;color:#98A3AD}
.bu-sortie svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.bu-sortie:hover{background:rgba(225,29,107,.2);color:#FF8FB8}

/* --- Cartes de chiffres : relief et hiérarchie ---------------------------- */
.bo .cartes-stats .stat{position:relative;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);overflow:hidden}
.bo .cartes-stats .stat::after{content:"";position:absolute;inset-inline-start:0;inset-block:0;
  width:3px;background:var(--brand);opacity:.85}
.bo .cartes-stats .stat small{display:block;font-size:.74rem;color:var(--mut);margin-block-end:6px}
.bo .cartes-stats .stat b{font-family:var(--mono);font-size:1.32rem;line-height:1.15;display:block}
.bo .cartes-stats .stat b.positif{color:var(--brand)}
.bo .cartes-stats .stat b.negatif{color:var(--deal)}
.bo .cartes-stats .stat:has(b.negatif)::after{background:var(--deal)}
.bo .cartes-stats .stat:has(b.positif)::after{background:var(--brand-l)}

/* --- Démarrage d'une boutique -------------------------------------------- */
.demarrage{display:grid;gap:16px;padding:20px 22px;border-radius:var(--r);margin-block-end:16px;
  background:linear-gradient(135deg,var(--ink),#014A73);color:#fff}
.demarrage h2{margin:0 0 4px;font-size:1.15rem;color:#fff}
.demarrage p{margin:0;color:rgba(255,255,255,.75);font-size:.88rem}
.etapes-demarrage{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.etapes-demarrage li{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.08);font-size:.86rem}
.etapes-demarrage li b{width:24px;height:24px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:rgba(255,255,255,.16);font-size:.76rem}
.etapes-demarrage li span{flex:1}
.etapes-demarrage li.faite{opacity:.6}
.etapes-demarrage li.faite b{background:var(--brand-l);color:#fff}
.etapes-demarrage .btn-mini{background:#fff;color:var(--ink)}
.vide.compact{padding:24px 16px}
.vide.compact p{margin:0 0 6px}
@media (min-width:900px){ .demarrage{grid-template-columns:1fr 1.2fr;align-items:center} }

/* --- Aides de saisie ------------------------------------------------------ */
.net-vendeur{font-size:.84rem;color:var(--brand);font-weight:600;margin-block:-4px 12px;min-height:1.2em}
.net-vendeur:empty{display:none}
.compteur-caracteres{display:block;text-align:end;font-family:var(--mono);font-size:.7rem;
  color:var(--mut);margin-block-start:3px}
.compteur-caracteres.proche{color:var(--deal)}
[data-depend][hidden]{display:none}

/* --- Arborescence des rayons --------------------------------------------- */
/* --- Rayons (back-office) ---------------------------------------------------
   Une ligne par rayon, sous-rayons repliés. Avec dix rayons de dix sous-rayons,
   la liste dépliée faisait cent lignes qu'il fallait parcourir pour en trouver
   une seule. */
.arbre-rayons{display:grid;gap:8px}
.rayon{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  transition:border-color .15s}
.rayon:hover{border-color:#CFD8DE}
.rayon.inactif{opacity:.55}

.rayon-tete{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:12px 16px}

/* Vignette : photo du rayon si elle existe, icône sinon. Le cadre garde la même
   emprise dans les deux cas pour que les lignes restent alignées. */
.rayon-icone{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--bg);overflow:hidden;cursor:pointer;border:1px solid transparent;
  transition:border-color .15s}
.rayon-icone:hover{border-color:var(--brand)}
.rayon-icone img{width:100%;height:100%;object-fit:cover}
.rayon-icone svg{width:20px;height:20px;stroke:var(--brand);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.rayon-nom{flex:1;min-width:200px}
.rayon-nom a{font-weight:700;font-size:1rem;color:var(--ink);display:block}
.rayon-nom a:hover{color:var(--brand)}
/* Les métadonnées passent en pastilles : « slug · type · 12 produits » sur une
   ligne de texte se lisait comme une phrase, alors que ce sont trois faits
   distincts. */
.rayon-nom small,.sr-nom small{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:.74rem;color:var(--mut);margin-block-start:4px}
.rayon-nom small code,.sr-nom small code{background:var(--bg);border-radius:5px;
  padding:1px 6px;font-size:.72rem;color:var(--txt)}

.rayon-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rayon-actions form{display:inline}

/* Bouton de dépliage, aligné sous le nom. */
.rayon-deplier{display:inline-flex;align-items:center;gap:7px;margin:0 0 12px 72px;
  padding:5px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);
  font-family:var(--font);font-size:.78rem;font-weight:600;color:var(--mut);cursor:pointer}
.rayon-deplier:hover{border-color:var(--brand);color:var(--brand)}
.rayon-deplier svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.rayon-deplier[aria-expanded="true"] svg{transform:rotate(90deg)}
.rayon-deplier[aria-expanded="true"]{border-color:var(--brand);color:var(--brand);
  background:#F1F8F7}
html[dir="rtl"] .rayon-deplier{margin:0 72px 12px 0}
html[dir="rtl"] .rayon-deplier svg{transform:scaleX(-1)}
html[dir="rtl"] .rayon-deplier[aria-expanded="true"] svg{transform:scaleX(-1) rotate(90deg)}

.sous-rayons-admin{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line);
  background:var(--bg)}
.sous-rayons-admin[hidden]{display:none}
.sous-rayons-admin li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:10px 16px 10px 72px;border-block-end:1px solid var(--line)}
.sous-rayons-admin li:last-child{border-block-end:0}
.sous-rayons-admin li:hover{background:var(--card)}
.sous-rayons-admin li.inactif{opacity:.5}
/* Un trait vertical rattache visuellement les sous-rayons à leur rayon. */
.sous-rayons-admin li::before{content:'';position:absolute;inset-inline-start:34px;
  width:1px;height:100%;background:var(--line)}
.sous-rayons-admin li{position:relative}
.sr-nom{flex:1;min-width:170px}
.sr-nom a{font-weight:600;font-size:.9rem;color:var(--txt)}
.sr-nom a:hover{color:var(--brand)}
html[dir="rtl"] .sous-rayons-admin li{padding:10px 72px 10px 16px}
html[dir="rtl"] .sous-rayons-admin li::before{inset-inline-start:auto;inset-inline-end:34px}

@media (max-width:640px){
  .rayon-tete{padding:12px}
  .rayon-deplier{margin-inline-start:12px}
  html[dir="rtl"] .rayon-deplier{margin:0 12px 12px 0}
  .sous-rayons-admin li{padding-inline-start:24px}
  .sous-rayons-admin li::before{display:none}
  .rayon-actions{width:100%}
}

/* --- Journal d'activité --------------------------------------------------- */
.journal{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.journal li{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px 16px;
  background:var(--card);border-inline-start:3px solid var(--line);border-radius:0 10px 10px 0}
.journal li.non-lu{border-inline-start-color:var(--brand);background:#F4FBFA}
.journal li.gravite-attention.non-lu{border-inline-start-color:var(--gold);background:#FFFBF2}
.journal li.gravite-urgent.non-lu{border-inline-start-color:var(--deal);background:#FEF4F8}
.j-type{flex:none;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);min-width:92px}
.j-corps{flex:1;min-width:200px}
.j-corps a,.j-corps b{font-weight:600;font-size:.9rem;display:block}
.j-corps small{display:block;font-size:.76rem;color:var(--mut);margin-block-start:2px}
.j-date{flex:none;font-family:var(--mono);font-size:.74rem;color:var(--mut)}
.j-action{flex:none}
@media (max-width:640px){
  .j-type{min-width:0}
  .j-date{width:100%}
}

/* --- Gestion du carrousel ------------------------------------------------- */
.zones-upload{display:grid;gap:14px;margin-block-end:18px}
.zone-upload{border:1px dashed var(--line);border-radius:var(--r);padding:14px}
.zu-tete{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;
  margin-block-end:10px}
.zu-taille{font-family:var(--mono);font-size:.78rem;color:var(--brand);background:#E7F3F1;
  padding:3px 9px;border-radius:999px}
.zu-apercu{width:100%;height:auto;max-width:340px;aspect-ratio:2/1;object-fit:cover;border-radius:9px;
  background:var(--bg);display:block}
.zu-vide{width:100%;max-width:340px;aspect-ratio:2/1;border-radius:9px;background:var(--bg);
  display:grid;place-items:center}
.zu-vide svg{width:34px;height:34px;stroke:var(--mut);stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.zone-upload .champ{margin-block:12px 0}

.liste-slides{display:grid;gap:12px}
.carte-slide{display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.carte-slide.inactif{opacity:.6}
.cs-visuel{position:relative;width:180px;height:94px;flex:none;border-radius:9px;overflow:hidden;
  background:var(--brand-d);display:flex;align-items:flex-end;padding:8px 10px}
.cs-visuel.s-deal{background:#8A0F44}
.cs-visuel.s-volt{background:#151033}
.cs-visuel.s-gold{background:#6E4204}
.cs-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.cs-texte{position:relative;color:#fff;line-height:1.2}
.cs-texte small{display:block;font-size:.6rem;opacity:.8;text-transform:uppercase;letter-spacing:.08em}
.cs-texte b{font-size:.82rem}
.cs-infos{flex:1;min-width:180px}
.cs-infos p{margin:0 0 4px}
.cs-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cs-actions form{display:inline}
@media (min-width:760px){ .zones-upload{grid-template-columns:1fr 1fr} }

/* Slide sans texte : toute la surface est cliquable, au-dessus de l'image mais
   sous les flèches de navigation. */
.slide-lien{position:absolute;inset:0;z-index:2;display:block}
.slide-lien:focus-visible{outline:3px solid #fff;outline-offset:-6px}

/* --- Liste des boutiques : cartes entièrement cliquables ------------------ */
.liste-boutiques{display:grid;gap:10px}
.carte-boutique{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:14px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:var(--txt);
  transition:border-color .15s,box-shadow .15s}
.carte-boutique:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(0,42,81,.07)}
.carte-boutique.inactif{opacity:.62}
.cb-logo{flex:none}
.cb-logo img{width:52px;height:52px;object-fit:cover;border-radius:12px;display:block}
.cb-logo .boutique-pastille{width:52px;height:52px;border-radius:12px;font-size:.9rem}
.cb-identite{flex:1;min-width:200px}
.cb-identite b{display:block;font-size:.98rem;color:var(--ink)}
.cb-identite small{display:block;font-size:.76rem;color:var(--mut);margin-block-start:2px}
.cb-chiffres{display:flex;flex-wrap:wrap;gap:20px;flex:none}
.cb-chiffres span{display:block;text-align:end;min-width:76px}
.cb-chiffres b{display:block;font-family:var(--mono);font-size:.94rem;color:var(--ink)}
.cb-chiffres b.positif{color:var(--brand)}
.cb-chiffres i{font-style:normal;color:var(--mut);font-size:.82rem}
.cb-chiffres small{display:block;font-size:.72rem;color:var(--mut)}
.cb-etat{display:flex;align-items:center;gap:8px;flex:none}
.cb-fleche{width:18px;height:18px;stroke:var(--mut);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.carte-boutique:hover .cb-fleche{stroke:var(--brand)}

/* --- Raccourcis d'une fiche ---------------------------------------------- */
.raccourcis-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;
  margin-block-end:16px}
.raccourcis-fiche a{display:block;padding:12px 14px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--line);text-align:center;color:var(--txt)}
.raccourcis-fiche a:hover{border-color:var(--brand);color:var(--brand)}
.raccourcis-fiche b{display:block;font-family:var(--mono);font-size:1.02rem;color:var(--ink)}
.raccourcis-fiche a:hover b{color:var(--brand)}
.raccourcis-fiche span{font-size:.76rem;color:var(--mut)}

@media (max-width:760px){
  .cb-chiffres{gap:14px;width:100%;justify-content:space-between}
  .cb-chiffres span{text-align:start;min-width:0}
  .cb-etat{width:100%;justify-content:space-between}
}

/* --- Liste des boutiques : tableau sur ordinateur, cartes sur téléphone ---- */
.tbl-boutiques td.col-produit img{width:38px;height:38px;object-fit:cover;border-radius:9px}
.tbl-boutiques .boutique-pastille{width:38px;height:38px;border-radius:9px;font-size:.76rem}
.tbl-boutiques td.col-produit a{font-weight:600}
.tbl-boutiques td.col-produit small{display:block;margin-block-start:3px}
.tbl-boutiques td.positif{color:var(--brand)}
.tbl-boutiques .sur{color:var(--mut);font-size:.86em}

/* --- Accueil : carte du client connecté ---------------------------------- */
/* Compacte à dessein : la colonne ne doit pas dépasser la hauteur du
   carrousel, et une carte plus haute serait tronquée en bas. */
.carte-connecte{background:var(--card);border-radius:var(--r);padding:12px 14px;
  border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.cc-salut{display:flex;align-items:center;gap:9px;margin:0}
.cc-avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-l),var(--brand));color:#fff;font-weight:700;
  font-size:.9rem}
.cc-salut b{font-size:.94rem;color:var(--ink)}
/* Une seule ligne : la référence et l'état se suffisent, le libellé prenait
   une ligne entière pour ne rien apprendre. */
.cc-commande{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  background:var(--bg);min-width:0}
.cc-commande small{display:none}
.cc-commande b{font-family:var(--mono);font-size:.8rem;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cc-commande .etat{flex:none}
.cc-commande:hover{background:#E7F3F1}
.cc-vide{font-size:.8rem;color:var(--mut);margin:0}
/* Pavés sur deux colonnes : quatre entrées tiennent sur deux lignes courtes. */
.cc-liens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cc-liens a{display:flex;flex-direction:column;gap:0;padding:7px 9px;border-radius:9px;
  background:var(--bg);font-size:.74rem;color:var(--mut);line-height:1.2}
.cc-liens a:hover{background:#E7F3F1;color:var(--brand)}
.cc-liens b{font-family:var(--mono);font-size:.9rem;color:var(--ink)}
.cc-liens a:hover b{color:var(--brand)}
.cc-liens b.alerte-nb{color:var(--deal)}

/* --- Colonne latérale de l'accueil ---------------------------------------- */
/* Sur mobile, empilement simple. */
.aside-pile{display:grid;gap:10px}

/* 1200 px : le seuil EXACT où la colonne passe à côté du carrousel. En dessous
   elle occupe sa propre ligne, et la sortir du flux la réduirait à néant. */
@media (min-width:1200px){
  /* La colonne latérale ne doit pas dépasser le carrousel : son contenu est
     sorti du flux, la hauteur de la ligne est donc dictée par le carrousel
     seul. Ce qui ne tiendrait pas est masqué plutôt que de déborder. */
  .aside{position:relative}
  .aside-pile{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;
    overflow:hidden}
  .aside-pile > .welcome,
  .aside-pile > .carte-connecte{flex:1 1 auto;min-height:0;overflow:hidden}
  .aside-pile > .coupon{flex:0 0 auto}
}
.masque-contact{background:#FFF4DA;border:1px solid #F5C97A;border-radius:8px;padding:9px 11px;
  color:#7A5200}

/* --- Consignes de paiement (virement, etc.) ------------------------------- */
.consignes-paiement{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-block-start:16px}
.consignes-paiement h2{margin:0 0 8px;font-size:1rem;color:var(--ink)}
.consignes-paiement p{margin:0 0 8px;font-size:.9rem}

/* --- Saisie d'un code de vérification ------------------------------------- */
.champ-code{font-family:var(--mono);font-size:1.5rem;letter-spacing:.5em;text-align:center;
  padding-inline:14px}

/* --- Liaison WhatsApp par QR ---------------------------------------------- */
.wa-qr{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.wa-qr img{border:1px solid var(--line);border-radius:12px;background:#fff;flex:none}
.wa-qr>div{flex:1;min-width:240px}
.wa-etapes{margin:8px 0 10px;padding-inline-start:20px;font-size:.88rem;line-height:1.9}
.wa-lie{background:#E7F3F1;border-radius:var(--r);padding:14px 16px}
.wa-lie p{margin:0 0 6px}

/* --- Tableau de bord : cartes de chiffres ---------------------------------- */
/* 210 px au minimum : en dessous, « 3 200,00 MAD » se coupait en deux lignes et
   la carte perdait sa lisibilité d'un coup d'œil. */
.bo .cartes-stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
/* Le montant reste sur une ligne ; s'il devient très long, c'est la taille qui
   cède, pas la mise en page. */
.bo .cartes-stats b{white-space:nowrap;font-size:clamp(.95rem, 2.4vw, 1.15rem)}
.bo .cartes-stats .sur{white-space:nowrap;color:var(--mut);font-size:.86em}
.cartes-stats .stat .label{display:block;font-size:.75rem;color:var(--mut);margin-block-end:4px}
.cartes-stats .stat>small{display:block;font-size:.72rem;color:var(--mut);margin-block-start:3px}

/* --- Tableau de bord : état des services ---------------------------------- */
.etat-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;
  margin-block-end:14px}
.service{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);color:var(--txt)}
.service:hover{border-color:var(--brand)}
.service b{display:block;font-size:.9rem;color:var(--ink)}
.service small{display:block;font-size:.76rem;color:var(--mut);margin-block-start:2px;line-height:1.35}
/* Le voyant porte l'information : vert, rouge, orange, gris. */
.voyant{width:11px;height:11px;flex:none;border-radius:50%;margin-block-start:4px;background:var(--mut)}
.service-ok .voyant{background:#00A878;box-shadow:0 0 0 3px rgba(0,168,120,.18)}
.service-ko .voyant{background:#E11D6B;box-shadow:0 0 0 3px rgba(225,29,107,.18)}
.service-attente .voyant{background:#E9A23B;box-shadow:0 0 0 3px rgba(233,162,59,.18)}
.service-eteint .voyant{background:#B7C0C8}

/* --- Pastilles « à traiter » ----------------------------------------------- */
.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.pastilles a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  background:var(--bg);font-size:.84rem;color:var(--txt)}
.pastilles a:hover{background:#E7F3F1;color:var(--brand)}
.pastilles b{font-family:var(--mono);color:var(--deal)}

/* --- Grille de cartes ------------------------------------------------------ */
.dash-grille{display:grid;grid-template-columns:1fr;gap:12px;margin-block-start:12px}
@media (min-width:980px){ .dash-grille{grid-template-columns:1fr 1fr} }

/* --- Barres des quatorze derniers jours ------------------------------------
   Nom distinct de « .barres », déjà utilisée ailleurs pour des barres
   horizontales : les deux se seraient écrasées. */
.barres-jours{display:flex;align-items:flex-end;gap:5px;height:130px;margin-block-end:10px}
.barres-jours .barre{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%}
.barres-jours .barre i{display:block;width:100%;background:var(--brand);border-radius:4px 4px 0 0;
  min-height:2px;transition:background .15s}
.barres-jours .barre:hover i{background:var(--brand-l)}
.barres-jours .barre small{font-size:.66rem;color:var(--mut);margin-block-start:4px}

/* --- Répartition en jauges -------------------------------------------------- */
.repartition{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.repartition li{display:grid;grid-template-columns:1fr 90px 44px;align-items:center;gap:10px;
  font-size:.86rem}
.repartition small{display:block;font-size:.74rem;color:var(--mut)}
.jauge{display:block;height:7px;border-radius:99px;background:var(--bg);overflow:hidden}
.jauge i{display:block;height:100%;background:var(--brand);border-radius:99px}
.repartition b{font-family:var(--mono);text-align:end;font-size:.84rem}

/* --- Listes compactes ------------------------------------------------------- */
.liste-fine{list-style:none;margin:0;padding:0}
.liste-fine li{border-block-end:1px solid var(--line)}
.liste-fine li:last-child{border-block-end:0}
.liste-fine li>a,.liste-fine li>span:first-child{display:flex}
/* Le nom et sa précision s'empilent : « display:flex » les mettait côte à côte,
   et « Casque sans fil » se lisait « Casque sans fil0 vendu(s) ». */
.zone-aimes .liste-fine li>span:first-child,
.zone-notes .liste-fine li>span:first-child{display:block;min-width:0}
.liste-fine li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.liste-fine a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  color:var(--txt)}
.liste-fine a:hover b{color:var(--brand)}
.liste-fine b{font-size:.88rem;color:var(--ink)}
.liste-fine small{display:block;font-size:.74rem;color:var(--mut);margin-block-start:2px}
.liste-fine .fin{text-align:end;flex:none}
.liste-fine .fin b{font-family:var(--mono)}
.lien-fin{float:inline-end;font-size:.78rem;font-weight:400}

/* --- Choix d'une déclinaison, axe par axe --------------------------------- */
.axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.axes .champ{margin:0}

/* --- Compteur de quantité -------------------------------------------------- */
.compteur{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--card)}
.compteur button{width:42px;border:0;background:var(--bg);color:var(--ink);font-size:1.15rem;
  line-height:1;cursor:pointer;font-family:var(--font)}
.compteur button:hover:not(:disabled){background:#E7F3F1;color:var(--brand)}
.compteur button:disabled{opacity:.4;cursor:default}
.compteur input{width:62px;border:0;text-align:center;font-family:var(--mono);font-size:.95rem;
  background:transparent;color:var(--ink);padding-block:10px}
/* Les flèches natives feraient doublon avec nos deux boutons. */
.compteur input::-webkit-outer-spin-button,
.compteur input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.compteur input[type=number]{-moz-appearance:textfield;appearance:textfield}
.compteur input:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

/* Coche vectorielle : indépendante de la police chargée. */
.coche{width:1em;height:1em;stroke:currentColor;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em}
.pastille-ok .coche{width:.9em;height:.9em;stroke-width:3}
.pl-variante{font-size:.8rem;color:var(--mut);margin:2px 0 0}

/* La liste des combinaisons est plus longue qu'un simple « M » : elle prend
   toute la largeur pour rester lisible. */
select#variante{width:100%}

/* --- Liste des déclinaisons (espace vendeur) ------------------------------ */
.liste-declinaisons{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.liste-declinaisons li{display:grid;gap:10px;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg)}
.liste-declinaisons li.inactif{opacity:.6}
.dl-titre b{font-size:.94rem;color:var(--ink)}
.dl-titre small{display:block;font-size:.74rem;color:var(--mut);margin-block-start:2px}
.dl-champs{display:grid;grid-template-columns:1fr;gap:10px}
.dl-champs .champ{margin:0}
.dl-champs label{font-size:.74rem}
.dl-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block-start:4px;border-block-start:1px solid var(--line)}
.dl-actions .case{margin:0;font-size:.84rem}

@media (min-width:720px){
  /* Combinaison à gauche, champs à droite : l'œil suit une seule colonne de
     libellés au lieu de sauter d'un en-tête de tableau à sa case. */
  .liste-declinaisons li{grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto;
    align-items:start}
  .dl-champs{grid-template-columns:120px auto 1fr}
  .dl-actions{flex-direction:column;align-items:flex-end;border:0;padding:0;gap:8px}
}
.decl-groupes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px;font-size:.86rem}
.decl-groupes b{font-family:var(--mono);font-size:.84rem}
.attributs{display:grid;gap:2px}
.attribut-ligne[hidden]{display:none}
.attr-ajouter[hidden]{display:none}

/* Déclinaison unique : une mention, pas un menu. */
.declinaison-unique{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 12px}
.declinaison-unique span:first-child{font-size:.8rem;color:var(--mut)}
.declinaison-unique b{font-size:.94rem;color:var(--ink)}

/* --- Tableau de bord vendeur ----------------------------------------------
   Les cartes coulent en deux colonnes plutôt que dans une grille à lignes :
   une grille alignait les lignes entre elles, si bien qu'une carte courte
   laissait un grand blanc en attendant sa voisine. */
.bo-dash{display:grid;gap:12px}
.bo-dash>.carte-form{margin:0}

@media (min-width:1080px){
  .bo-dash-cartes{columns:2;column-gap:12px}
  /* Une carte ne doit jamais se couper au milieu d'une colonne. */
  .bo-dash-cartes>.carte-form{break-inside:avoid;margin:0 0 12px}
}

/* Les barres gardent leur hauteur propre. */
.zone-courbe .barres-jours{height:150px}
@media (min-width:720px){ .dl-champs-4{grid-template-columns:repeat(4,1fr)} }
.fin-ligne{font-size:.78rem;color:var(--mut);font-weight:400}

/* --- Annuaire des boutiques ------------------------------------------------ */
.barre-filtres{display:flex;flex-wrap:wrap;gap:10px;align-items:end;
  background:var(--card);border-radius:var(--r);padding:14px 16px;margin-block-end:14px}
.barre-filtres .champ{margin:0;flex:1 1 180px}
.grille-boutiques{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
/* Carte de boutique : bannière en fond, logo en médaillon à cheval dessus.
   C'est la devanture qui distingue une boutique d'une ligne dans une liste. */
.bq-carte{position:relative;display:flex;flex-direction:column;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-align:center;padding-block-end:16px;transition:border-color .15s,box-shadow .15s}
.bq-carte:hover{border-color:var(--brand);box-shadow:0 6px 24px rgba(0,42,81,.08)}

.bq-couv{position:relative;display:block;width:100%;aspect-ratio:16/6;overflow:hidden;
  background:var(--bg)}
.bq-couv img{width:100%;height:100%;object-fit:cover;display:block}
/* Sans bannière : un dégradé dont la teinte vient du nom, pour que deux
   boutiques voisines ne se ressemblent pas. */
.bq-couv-vide{display:block;width:100%;height:100%;
  background:linear-gradient(135deg,hsl(var(--t) 42% 34%),hsl(calc(var(--t) + 40deg) 38% 46%))}

.bq-etat{position:absolute;top:8px;inset-inline-end:8px;padding:3px 9px;border-radius:99px;
  background:rgba(255,255,255,.94);font-size:.68rem;font-weight:600;color:var(--mut)}
.bq-etat.en-ligne{color:#0B7A5C}

/* Le médaillon chevauche la bannière : la marge négative est ce qui crée
   l'effet de devanture. */
.bq-logo{position:relative;margin-block-start:-36px;flex:none;width:72px;height:72px;
  border-radius:50%;overflow:hidden;background:var(--card);border:3px solid var(--card);
  box-shadow:0 2px 10px rgba(0,42,81,.14);display:grid;place-items:center}
.bq-logo img{width:100%;height:100%;object-fit:cover}
.bq-initiales{font-family:var(--mono);font-weight:700;color:var(--brand);font-size:1.3rem}

.bq-corps{display:block;padding:10px 14px 0}
.bq-corps b{display:block;font-size:1rem;color:var(--ink)}
.bq-ville{display:block;font-size:.78rem;color:var(--mut);margin-block-start:2px}
.bq-nb{display:block;font-size:.8rem;color:var(--txt);margin-block-start:6px}

.bq-note{display:flex;align-items:center;justify-content:center;gap:5px;margin-block-start:6px;
  font-size:.8rem;color:var(--mut)}
.bq-note b{display:inline;font-size:.84rem;color:var(--txt)}
.etoiles{letter-spacing:1px;color:var(--line)}
.etoiles .pleine{color:var(--gold)}

.bq-lien{display:inline-flex;align-items:center;gap:6px;margin-block-start:14px;
  padding:8px 18px;border:1px solid var(--brand);border-radius:99px;
  font-size:.84rem;font-weight:600;color:var(--brand);background:none}
.bq-lien:hover{background:var(--brand);color:#fff}
.champ-cle{font-family:var(--mono);font-size:.86rem;background:var(--bg)}

/* --- Panier flottant --------------------------------------------------------
   Toujours visible, collé au bord et à mi-hauteur : le client garde son panier
   sous les yeux sans remonter en haut de page. Disposition verticale — icône,
   nombre d'articles, puis le total sur un bandeau coloré, la seule information
   qu'on cherche du regard. inset-inline-end le place à droite en français et à
   gauche en arabe, sans règle supplémentaire. */
/* Collé au bord de l'écran : pas de marge, et pas d'arrondi du côté attaché —
   un coin arrondi contre le bord laisse voir un liseré de fond qui donne
   l'impression d'un élément mal calé. La bordure de ce côté disparaît aussi. */
/* --- Panier flottant --------------------------------------------------------
   Une pastille compacte plutôt qu'une carte : le bloc de 93 px de large barrait
   le contenu en permanence pour une information qu'on ne consulte qu'au moment
   de commander. Le détail se déplie au survol. */
.panier-flottant{position:fixed;inset-inline-end:0;top:50%;transform:translateY(-50%);
  z-index:60;display:flex;align-items:center;gap:0;
  padding:9px;background:var(--card);color:var(--txt);
  border:1px solid var(--line);border-inline-end:0;
  border-start-start-radius:14px;border-end-start-radius:14px;
  border-start-end-radius:0;border-end-end-radius:0;
  box-shadow:-4px 6px 20px rgba(0,42,81,.14);text-decoration:none;
  transition:gap .2s ease, padding .2s ease, box-shadow .2s ease}

.panier-flottant:hover,
.panier-flottant:focus-visible{gap:10px;padding-inline-start:14px;
  box-shadow:-6px 8px 28px rgba(0,42,81,.22)}
.panier-flottant:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.pf-icone{position:relative;flex:none;width:34px;height:34px;border-radius:10px;
  background:var(--brand);display:grid;place-items:center}
.pf-icone svg{width:18px;height:18px;stroke:#fff;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.pf-nb{position:absolute;top:-6px;inset-inline-end:-6px;min-width:17px;height:17px;
  padding-inline:4px;border-radius:99px;background:var(--deal);color:#fff;
  font-family:var(--mono);font-size:.63rem;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--card)}

/* Replié : largeur nulle, sans display:none — la transition ne s'anime pas
   entre « none » et « block ». */
.pf-detail{display:grid;gap:1px;max-width:0;overflow:hidden;white-space:nowrap;
  opacity:0;transition:max-width .2s ease, opacity .15s ease}
.panier-flottant:hover .pf-detail,
.panier-flottant:focus-visible .pf-detail{max-width:130px;opacity:1}

.pf-nb-texte{font-size:.68rem;color:var(--mut);line-height:1.2}
.pf-total{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--ink);
  line-height:1.2;letter-spacing:-.02em}

/* Sur mobile, seule la pastille subsiste : l'écran est trop étroit pour un
   dépliement au survol, qui n'existe d'ailleurs pas au doigt. */
@media (max-width:720px){
  .panier-flottant{padding:8px}
  .panier-flottant:hover,.panier-flottant:focus-visible{gap:0;padding-inline-start:8px}
  .pf-icone{width:30px;height:30px}
  .pf-icone svg{width:16px;height:16px}
  .pf-detail,
  .panier-flottant:hover .pf-detail{max-width:0;opacity:0}
}


/* Mouvement réduit : le détail apparaît sans animation, mais reste accessible.
   Le supprimer entièrement priverait de l'information. */
@media (prefers-reduced-motion:reduce){
  .panier-flottant,.panier-flottant:hover{transition:none;transform:translateY(-50%)}
  .pf-detail{transition:none}
}

/* --- Tiroir du panier ------------------------------------------------------
   Glisse depuis le bord au clic sur la carte flottante. inset-inline-end le
   place à droite en français, à gauche en arabe. */
.tiroir-fond{position:fixed;inset:0;z-index:80;background:rgba(0,42,81,.42);
  opacity:0;transition:opacity .2s}
.tiroir-fond.ouvert{opacity:1}

.tiroir-panier{position:fixed;inset-block:0;inset-inline-end:0;z-index:81;
  width:min(420px,100vw);display:flex;flex-direction:column;background:var(--card);
  box-shadow:-8px 0 40px rgba(0,42,81,.2);
  transform:translateX(100%);transition:transform .22s ease-out}
[dir="rtl"] .tiroir-panier{transform:translateX(-100%)}
.tiroir-panier.ouvert{transform:none}

.tp-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-block-end:1px solid var(--line);flex:none}
.tp-tete h2{display:flex;align-items:center;gap:9px;margin:0;font-size:1.05rem;color:var(--ink)}
.tp-tete small{font-size:.8rem;font-weight:400;color:var(--mut)}
.tp-icone{width:32px;height:32px;border-radius:9px;background:var(--brand);
  display:grid;place-items:center;flex:none}
.tp-icone svg{width:17px;height:17px;stroke:#fff;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.tp-fermer{width:34px;height:34px;border:0;border-radius:9px;background:var(--bg);
  display:grid;place-items:center;cursor:pointer;flex:none}
.tp-fermer:hover{background:#E7F3F1}
.tp-fermer svg{width:17px;height:17px;stroke:var(--txt);stroke-width:2;fill:none;
  stroke-linecap:round}

/* La liste défile seule : l'en-tête et le pied restent visibles, c'est là que
   se trouvent le total et le bouton de commande. */
.tp-lignes{flex:1;overflow-y:auto;list-style:none;margin:0;padding:8px 18px}
.tp-lignes li{display:flex;gap:12px;padding:12px 0;border-block-end:1px solid var(--line)}
.tp-lignes li:last-child{border-block-end:0}
.tp-vignette{flex:none;width:56px;height:56px;border-radius:10px;overflow:hidden;
  background:var(--bg)}
.tp-vignette img{width:100%;height:100%;object-fit:cover}
.tp-corps{flex:1;min-width:0}
.tp-corps a{display:block;font-size:.88rem;color:var(--ink);line-height:1.3}
.tp-corps a:hover{color:var(--brand)}
.tp-corps small{display:block;font-size:.75rem;color:var(--mut);margin-block-start:2px}
.tp-fin{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.tp-fin b{font-family:var(--mono);font-size:.86rem;color:var(--ink);white-space:nowrap}
.tp-retirer{width:26px;height:26px;border:0;border-radius:7px;background:transparent;
  display:grid;place-items:center;cursor:pointer}
.tp-retirer:hover{background:#FDECF3}
.tp-retirer svg{width:13px;height:13px;stroke:var(--mut);stroke-width:2;fill:none;
  stroke-linecap:round}
.tp-retirer:hover svg{stroke:var(--deal)}

.tp-pied{flex:none;padding:16px 18px;border-block-start:1px solid var(--line);
  background:var(--bg)}
.tp-pied dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0 0 10px;
  font-size:.86rem}
.tp-pied dd{margin:0;text-align:end;font-family:var(--mono)}
.tp-pied .total{font-weight:700;font-size:1rem;color:var(--ink)}
.tp-pied .remise{color:var(--deal)}
.tp-pied .btn-principal{display:block;width:100%;text-align:center;margin-block-start:8px}
.tp-pied .lien-continuer{display:block;text-align:center;margin-block-start:8px;font-size:.84rem}
.tp-pied .mention{font-size:.76rem;margin:0}

.tp-vide{flex:1;display:grid;place-content:center;justify-items:center;gap:12px;
  padding:30px 18px;text-align:center}
.tp-vide-icone{width:72px;height:72px;border-radius:50%;background:#E7F3F1;
  display:grid;place-items:center}
.tp-vide-icone svg{width:32px;height:32px;stroke:var(--brand);stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.tp-vide p{color:var(--mut);margin:0}

@media (prefers-reduced-motion:reduce){
  .tiroir-fond,.tiroir-panier{transition:none}
}

/* --- Espace client ----------------------------------------------------------
   Trois colonnes : identité et menu à gauche, l'essentiel au centre, adresse et
   suggestions à droite. Sur mobile tout s'empile, le menu d'abord. */
/* L'espace client occupe toute la largeur : trois colonnes tiennent mal dans la
   gouttière du site, et le contenu — commandes, tableaux — respire mieux. */
.espace-client{display:grid;gap:14px;align-items:start;padding-block:18px;
  max-width:none;padding-inline:18px}
/* Sans min-width:0, une colonne de grille refuse de descendre sous la largeur
   de son contenu : les onglets et la barre de recherche débordaient l'écran sur
   mobile, entraînant toute la page avec eux. */
.espace-client>*{min-width:0}
@media (min-width:900px){ .espace-client{grid-template-columns:250px 1fr} }
@media (min-width:1200px){
  /* Deux colonnes par défaut : seul le tableau de bord a une colonne de droite.
     Réserver sa place partout laissait un grand vide sur les autres pages. */
  .espace-client{grid-template-columns:260px 1fr}
  .espace-client:has(.ec-droite){grid-template-columns:260px 1fr 320px}
}
@media (min-width:1600px){
  .espace-client{grid-template-columns:280px 1fr}
  .espace-client:has(.ec-droite){grid-template-columns:280px 1fr 360px}
}

.ec-profil{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 18px;text-align:center;display:grid;justify-items:center;gap:4px}
.ec-profil .avatar{width:72px;height:72px;border-radius:50%;background:var(--brand);
  color:#fff;display:grid;place-items:center;font-size:1.7rem;font-weight:700;
  margin-block-end:8px}
/* Le tableau de bord porte un h1, les autres pages un h2 — le titre principal
   y est celui du contenu. Les deux doivent s'afficher pareil. */
.ec-profil h1,.ec-profil h2{margin:0;font-size:1.05rem;line-height:1.3;color:var(--ink)}
.ec-profil .mention{margin:0;font-size:.8rem}

/* Le menu passe en colonne dans cet espace : la même navigation que partout,
   mais lisible d'un coup d'œil à côté du contenu. */
.ec-menu{margin-block-start:12px}
.ec-menu .menu-compte{display:grid;gap:2px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:8px;overflow:visible}
.ec-menu .menu-compte a{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:9px;font-size:.88rem;white-space:normal;border:0}
.ec-menu .menu-compte a:hover{background:var(--bg)}
.ec-menu .menu-compte a[aria-current="page"]{background:var(--brand);color:#fff}
/* L'icône reprend la couleur du texte : elle passe donc en blanc sur l'entrée
   active, sans règle supplémentaire. */
.ec-menu .menu-compte svg{width:18px;height:18px;flex:none;stroke:currentColor;
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.ec-menu .menu-compte a[aria-current="page"] svg{opacity:1}
.mc-sep{border:0;border-block-start:1px solid var(--line);margin:6px 4px}

/* Hors espace client, le menu reste horizontal : les icônes y seraient à
   l'étroit. */
.menu-compte:not(.ec-menu .menu-compte) svg{display:none}

.ec-titre{margin:0 0 12px;font-size:1.15rem;color:var(--ink)}

.ec-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;margin-block-end:14px}
.ec-chiffre{background:var(--card);border:1px solid var(--ec-ton, var(--line));
  border-radius:var(--r);padding:14px 16px;color:var(--txt);
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
/* La bordure s'épaissit au survol plutôt que de changer de teinte : la couleur
   identifie le compteur, elle ne doit pas bouger. */
.ec-chiffre:hover{box-shadow:0 0 0 1px var(--ec-ton, var(--brand)) inset}
.ec-c-texte{display:grid;gap:2px}
.ec-chiffre b{font-family:var(--mono);font-size:1.4rem;color:var(--ink)}
.ec-chiffre span span,.ec-chiffre .ec-c-texte span{font-size:.78rem;color:var(--mut)}
.ec-chiffre svg{width:22px;height:22px;flex:none;stroke:var(--ec-ton, var(--brand));
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Quatre tons de la charte : le vert de la marque, le rose des promotions, le
   bleu nuit des titres, et un ambre déjà utilisé pour les états d'attente. */
.ec-livraison{--ec-ton:#00867B}
.ec-panier{--ec-ton:#E11D6B}
.ec-favoris{--ec-ton:#E9A23B}
.ec-commandes{--ec-ton:#0B5FA5}

/* Lignes compactes, partagées par le panier et les produits consultés. */
.ec-lignes{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ec-lignes li{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-block-end:1px solid var(--line)}
.ec-lignes li:last-child{border-block-end:0}
.ec-vignette{flex:none;width:48px;height:48px;border-radius:9px;overflow:hidden;
  background:var(--bg)}
.ec-vignette img{width:100%;height:100%;object-fit:cover}
.ec-corps{flex:1;min-width:0}
.ec-corps a{display:block;font-size:.86rem;color:var(--ink);line-height:1.3}
.ec-corps a:hover{color:var(--brand)}
.ec-corps small{display:block;font-size:.76rem;color:var(--mut);margin-block-start:2px}
.ec-corps s{color:var(--mut);margin-inline-start:5px}
.ec-lignes>li>b{font-family:var(--mono);font-size:.86rem;white-space:nowrap}

.ec-pied-panier{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-block-start:12px;padding-block-start:12px;
  border-block-start:1px solid var(--line);font-size:.9rem}
.ec-pied-panier b{font-family:var(--mono);color:var(--ink)}

.ec-vide{text-align:center;padding:18px 0;display:grid;gap:10px;justify-items:center}
.ec-vide p{margin:0;color:var(--mut)}

/* --- Adresse de livraison (espace client) ---------------------------------- */
.ec-adresse{display:flex;gap:12px;align-items:flex-start}
.ec-adr-icone{flex:none;width:38px;height:38px;border-radius:10px;background:#E7F3F1;
  display:grid;place-items:center}
.ec-adr-icone svg{width:19px;height:19px;stroke:var(--brand);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ec-adr-nom{margin:0 0 4px;font-size:.92rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ec-adr-lignes{margin:0;font-size:.84rem;color:var(--mut);line-height:1.5}
.ec-adr-modifier{display:inline-block;margin-block-start:8px;font-size:.82rem;color:var(--brand)}
.ec-adr-modifier:hover{text-decoration:underline}

/* Sans adresse enregistrée : l'invitation prend la place, centrée, plutôt qu'une
   phrase grise suivie d'un bouton perdu dans le coin. */
.ec-adr-vide{display:grid;justify-items:center;gap:8px;text-align:center;padding:14px 0 4px}
.ec-adr-vide .ec-adr-icone{width:52px;height:52px;border-radius:50%}
.ec-adr-vide .ec-adr-icone svg{width:24px;height:24px}
.ec-adr-vide p{margin:0;font-size:.9rem;color:var(--ink)}
.ec-adr-vide .mention{font-size:.8rem;max-width:34ch}
.ec-adr-vide .btn-principal{margin-block-start:4px}

/* --- Photo de profil -------------------------------------------------------
   Avatar centré, bouton dessous : la même disposition qu'un profil de réseau
   social, que le client reconnaît sans avoir à la déchiffrer. */
.carte-photo{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px 16px;margin-block-end:14px}
.cp-entete{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-block-end:6px}
.cp-entete h2{margin:0;font-size:.95rem;color:var(--ink)}

.cp-verifie,.cp-non-verifie{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:99px;font-size:.78rem;font-weight:600}
.cp-verifie{background:#E7F3F1;color:var(--brand)}
.cp-verifie svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.cp-non-verifie{background:#FDF3E3;color:#8A6014}

.cp-centre{display:grid;justify-items:center;gap:9px;text-align:center}
.cp-avatar{width:92px;height:92px;border-radius:50%;overflow:hidden;background:var(--brand);
  color:#fff;display:grid;place-items:center;font-size:2rem;font-weight:700;
  box-shadow:0 0 0 5px var(--bg)}
.cp-avatar img{width:92px;height:92px;object-fit:cover;display:block}

/* Le champ de fichier natif est masqué : ce label en tient lieu. */
.cp-bouton{display:inline-block;padding:7px 15px;border-radius:9px;background:var(--ink);
  color:#fff;font-size:.82rem;font-weight:600;cursor:pointer}
.cp-bouton:hover{background:var(--brand)}
.cp-bouton:focus-within{outline:2px solid var(--brand);outline-offset:2px}
/* Le focus clavier atterrit sur le champ masqué : on le rend visible via son
   label, sinon la navigation au clavier se perd. */
#photo:focus-visible + .cp-envoyer,#photo:focus-visible ~ .cp-bouton{outline:2px solid var(--brand)}

.cp-centre .mention{margin:0;font-size:.74rem;max-width:44ch}
.cp-centre .erreur{margin:0}

/* L'avatar du menu accepte aussi une photo : même règle de recadrage. */
.avatar img,.ec-profil .avatar img{width:100%;height:100%;object-fit:cover;
  border-radius:50%;display:block;aspect-ratio:1}
.avatar{overflow:hidden}

.cp-envoyer[hidden]{display:none}

/* --- Fiche de commande : accès à la réclamation ---------------------------- */
.mc-etat{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mc-ticket{width:38px;height:38px;border-radius:10px;border:1px solid var(--brand);
  background:#E7F3F1;display:grid;place-items:center;flex:none;color:var(--brand)}
.mc-ticket:hover{background:var(--brand);color:#fff}
/* stroke et fill suivent color : les trois points changent de teinte avec le
   contour, sans règle en double. */
.mc-ticket svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* --- Réclamation : rappel de la commande ---------------------------------- */
.tk-commande{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 14px;
  padding:10px 14px;background:var(--bg);border-radius:10px;
  border-inline-start:3px solid var(--brand)}
.tk-etiquette{font-size:.76rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.tk-commande a{font-family:var(--mono);font-size:.94rem;font-weight:700;color:var(--ink)}
.tk-commande a:hover{color:var(--brand)}
.tk-commande small{font-size:.78rem;color:var(--mut)}

/* --- Annulation par le client ---------------------------------------------- */
.mc-annuler{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-block-end:14px;padding:12px 16px;background:#FDF3E3;
  border:1px solid #F0DDB8;border-radius:var(--r)}
.mc-annuler b{font-size:.92rem;color:#7A5410}
.mc-annuler .mention{margin:2px 0 0;font-size:.8rem;color:#8A6014}
.mc-annuler-champs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mc-annuler input{min-width:200px;padding:8px 12px;border:1px solid #E4CFA4;
  border-radius:9px;background:var(--card);font-size:.86rem;font-family:var(--font)}

/* --- Fenêtre de confirmation ------------------------------------------------
   Remplace window.confirm(), illisible et non traduisible. */
/* [hidden] doit l'emporter : « display:grid » annule le display:none du
   navigateur, et le voile continuait d'intercepter les clics de toute la page. */
.confirm-fond[hidden]{display:none}
/* La confirmation passe AU-DESSUS des autres fenêtres : elle est appelée depuis
   elles — supprimer une zone depuis sa fiche, par exemple — et resterait
   inatteignable derrière. */
.confirm-fond{position:fixed;inset:0;z-index:140;display:grid;place-items:center;
  padding:20px;background:rgba(0,42,81,.5);opacity:0;transition:opacity .18s}
.confirm-fond.ouvert{opacity:1}
.confirm-boite{width:min(420px,100%);background:var(--card);border-radius:16px;
  padding:26px 24px 20px;text-align:center;box-shadow:0 18px 60px rgba(0,42,81,.3);
  transform:scale(.96);transition:transform .18s}
.confirm-fond.ouvert .confirm-boite{transform:none}

.confirm-icone{display:grid;place-items:center;width:56px;height:56px;margin-inline:auto;
  border-radius:50%;background:#FDF3E3}
.confirm-icone svg{width:26px;height:26px;stroke:#C98A16;stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.confirm-boite h2{margin:14px 0 6px;font-size:1.05rem;color:var(--ink)}
.confirm-boite p{margin:0;font-size:.9rem;color:var(--mut);line-height:1.5}

.confirm-actions{display:flex;gap:10px;margin-block-start:20px}
.confirm-actions button{flex:1;padding:11px 16px;border-radius:10px;font-size:.9rem;
  font-weight:600;cursor:pointer;font-family:var(--font);border:1px solid var(--line)}
.confirm-non{background:var(--card);color:var(--txt)}
.confirm-non:hover{background:var(--bg)}
/* Le geste irréversible porte la couleur d'alerte : le bouton neutre doit être
   celui qui ne fait rien. */
.confirm-oui{background:var(--deal);border-color:var(--deal);color:#fff}
.confirm-oui:hover{background:var(--deal-d);border-color:var(--deal-d)}
.confirm-actions button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .confirm-fond,.confirm-boite{transition:none}
}

/* --- Suivi transporteur (fiche de commande) -------------------------------- */
.mc-suivi{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-block-end:14px;padding:12px 16px;background:#E7F3F1;
  border-radius:10px}
.mc-suivi small{display:block;font-size:.76rem;color:var(--mut)}
.mc-suivi b{font-family:var(--mono);font-size:.98rem;color:var(--ink);cursor:copy}
.mc-suivi b:hover{color:var(--brand)}
.mc-suivi .mention{margin:0;font-size:.78rem}

/* Le badge « non vérifié » porte son propre bouton d'envoi. */
.cp-non-verifie button{margin-inline-start:8px;padding:3px 10px;border:0;border-radius:99px;
  background:#8A6014;color:#fff;font-size:.72rem;font-weight:600;cursor:pointer;
  font-family:var(--font)}
.cp-non-verifie button:hover{background:#6B4A0F}

/* Bouton « Racheter », à côté de l'état de la commande. */
.mc-racheter{margin:0}
.mc-racheter button{display:inline-flex;align-items:center;gap:7px}
.mc-racheter svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* --- Réglages de notification ---------------------------------------------- */
.reglages-notif{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:2px}
.reglages-notif li{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;padding:12px 0;border-block-end:1px solid var(--line)}
.reglages-notif li:last-child{border-block-end:0}
.reglages-notif .case{display:flex;align-items:flex-start;gap:10px;margin:0;cursor:pointer}
.reglages-notif .case input{margin-block-start:3px}
.reglages-notif b{display:block;font-size:.9rem;color:var(--ink);font-weight:600}
.reglages-notif small{display:block;font-size:.78rem;color:var(--mut);margin-block-start:2px}
/* Ce qui n'est pas désactivable n'a pas de case : une case grisée invite à
   cliquer et déçoit. */
.reglages-notif .oblig{opacity:.85}

/* Bouton facture, à côté de l'état de la commande. */
.mc-facture{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;flex:none;color:var(--txt)}
.mc-facture:hover{border-color:var(--brand);background:#E7F3F1;color:var(--brand)}
.mc-facture svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* --- Tableau de bord vendeur : états, portefeuille -------------------------- */
.grille-etats{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}
.etat-carte{display:grid;gap:2px;padding:11px 13px;border-radius:10px;color:var(--txt);
  border:1px solid var(--ec-ton,var(--line));background:var(--card)}
.etat-carte:hover{box-shadow:0 0 0 1px var(--ec-ton,var(--brand)) inset}
.etat-carte small{font-size:.74rem;color:var(--mut)}
.etat-carte b{font-family:var(--mono);font-size:1.25rem;color:var(--ink)}
/* Une couleur par étape du parcours : le vendeur repère « à préparer » sans lire. */
.etat-en_attente{--ec-ton:#E9A23B}
.etat-accepte{--ec-ton:#0B5FA5}
.etat-prepare{--ec-ton:#7A4FBF}
.etat-expedie{--ec-ton:#00867B}
.etat-livre{--ec-ton:#1E9E62}
.etat-annule{--ec-ton:#E11D6B}

.pf-net{margin:0 0 12px;display:grid;gap:2px}
.pf-net b{font-family:var(--mono);font-size:1.5rem;color:var(--brand)}
.pf-net small{font-size:.76rem;color:var(--mut)}
.pf-lignes{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:2px}
.pf-lignes li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-block-end:1px solid var(--line);font-size:.86rem}
.pf-lignes li:last-child{border-block-end:0}
.pf-lignes b{font-family:var(--mono)}
.coeurs{color:var(--deal);font-family:var(--mono);white-space:nowrap}

/* --- Tableau de bord vendeur : cartes de chiffres ---------------------------
   Fond teinté, bordure de la même famille, icône dans un carré arrondi. Chaque
   ton correspond à une famille de chiffre : recette, activité, alerte. */
/* align-content:start : les cartes d'une même rangée ont la même hauteur, mais
   leur contenu reste calé en haut. Sans cela, une carte sans ligne de détail
   voyait son chiffre glisser au milieu. */
.vd-stat{display:grid;gap:4px;align-content:start;min-height:0;
  padding:11px 13px;border-radius:12px;
  background:var(--vd-fond,#F4F7F9);border:1px solid var(--vd-bord,var(--line));
  color:var(--txt);transition:box-shadow .15s}
a.vd-stat:hover{box-shadow:0 0 0 1px var(--vd-ton) inset}
.vd-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.vd-tete small{font-size:.78rem;color:var(--mut);line-height:1.3}
.vd-icone{flex:none;width:28px;height:28px;border-radius:9px;background:#fff;
  display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,42,81,.08)}
.vd-icone svg{width:15px;height:15px;stroke:var(--vd-ton);stroke-width:1.8;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.vd-stat b{font-family:var(--mono);font-size:1.15rem;color:var(--ink);white-space:nowrap}
.vd-detail{font-size:.75rem;color:var(--mut)}

/* Les tons : vert de la marque pour la recette, bleu pour l'activité, ambre et
   rose pour ce qui appelle une action. */
.vd-ca      {--vd-ton:#00867B; --vd-fond:#E7F3F1; --vd-bord:#BFE0DB}
.vd-jour    {--vd-ton:#0B5FA5; --vd-fond:#E8F1F9; --vd-bord:#C3DAEE}
.vd-net     {--vd-ton:#1E9E62; --vd-fond:#E9F6EF; --vd-bord:#C2E4D2}
.vd-cmd     {--vd-ton:#7A4FBF; --vd-fond:#F1ECFA; --vd-bord:#D9CBEF}
.vd-panier  {--vd-ton:#00867B; --vd-fond:#F1F7F6; --vd-bord:#D5E7E4}
.vd-produits{--vd-ton:#0B5FA5; --vd-fond:#F0F5FA; --vd-bord:#D3E2EF}
.vd-stock   {--vd-ton:#C98A16; --vd-fond:#FDF3E3; --vd-bord:#F0DDB8}
.vd-note    {--vd-ton:#E9A23B; --vd-fond:#FEF7EC; --vd-bord:#F5E4C4}

@media (max-width:600px){
  .vd-stat{padding:13px 14px}
  .vd-stat b{font-size:1.15rem}
  .vd-icone{width:30px;height:30px;border-radius:9px}
  .vd-icone svg{width:15px;height:15px}
}

/* --- Menu latéral clair (espace vendeur) ------------------------------------
   Fond clair, entrée active en pastille teintée : la même grammaire que les
   cartes du tableau de bord. L'administration conserve son menu sombre, ce qui
   évite de confondre les deux espaces. */
.bo-nav-clair{background:var(--card);color:var(--txt);
  border-inline-end:1px solid var(--line)}
.bo-nav-clair .bo-marque{border-block-end:1px solid var(--line)}
.bo-nav-clair .bo-marque .logo{color:var(--ink)}
.bo-nav-clair .bo-fermer{color:var(--mut)}
.bo-nav-clair .bo-groupe{color:var(--mut)}

.bo-nav-clair .bo-menu a{color:var(--txt);font-weight:500}
.bo-nav-clair .bo-menu a svg{stroke:var(--mut)}
.bo-nav-clair .bo-menu a:hover{background:var(--bg);color:var(--ink)}
.bo-nav-clair .bo-menu a:hover svg{stroke:var(--brand)}

/* L'entrée active : pastille teintée et texte de la marque, plutôt qu'un aplat
   plein — le contraste reste suffisant et la barre respire. */
.bo-nav-clair .bo-menu a[aria-current="page"]{background:#E7F3F1;color:var(--brand);
  font-weight:700}
.bo-nav-clair .bo-menu a[aria-current="page"] svg{stroke:var(--brand)}
.bo-nav-clair .bo-menu a[aria-current="page"]::before{background:var(--brand);
  inset-inline-start:-10px;width:4px;height:24px}
.bo-nav-clair .bo-menu a[aria-current="page"] .pastille{background:var(--brand);color:#fff}

.bo-nav-clair .bo-pied{border-block-start:1px solid var(--line)}
.bo-nav-clair .bo-retour,.bo-nav-clair .bo-quitter{color:var(--txt)}
.bo-nav-clair .bo-retour{background:#E7F3F1;color:var(--brand)}
.bo-nav-clair .bo-retour:hover{background:var(--brand);color:#fff}
.bo-nav-clair .bo-quitter:hover{background:#FDECF3;color:var(--deal)}
.bo-nav-clair .bo-quitter:hover svg{stroke:var(--deal)}

/* --- Rangées du tableau de bord vendeur ------------------------------------
   Trois temps : la journée, les totaux, l'état des commandes. Chacun porte son
   titre — sans lui, huit chiffres à la suite mêlent « ce matin » et « depuis
   l'ouverture ». */
/* La dernière rangée touchait le bloc suivant : un peu d'air en dessous, sinon
   « Mes commandes par état » se lit comme le titre de ce qui vient après. */
.zone-stats{display:grid;grid-template-columns:1fr;gap:16px;margin-block-end:18px}
/* Une rangée employée seule — page des revenus, des avis — porte sa propre
   marge : sans elle, les cartes touchent le bloc qui suit. Dans .zone-stats,
   c'est le « gap » qui espace, donc la marge y est neutralisée. */
.vd-rangee{margin-block-end:18px}
.zone-stats>.vd-rangee{margin-block-end:0}
.vd-rangee-titre{margin:0 0 7px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.vd-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.vd-cartes-etats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
/* Les cartes d'état n'ont pas d'icône : le libellé occupe toute la largeur. */
.vd-cartes-etats .vd-tete{display:block}
.vd-cartes-etats .vd-stat{--vd-fond:var(--card); --vd-bord:var(--ec-ton,var(--line))}
.vd-cartes-etats .vd-stat b{color:var(--ec-ton,var(--ink))}

/* --- Menu du compte dans la barre du back-office ---------------------------- */
.bo-compte{position:relative}
.bo-compte-btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;
  font-family:var(--font);font-size:.86rem;color:var(--txt)}
.bo-compte-btn:hover{border-color:var(--brand)}
.bo-compte-btn svg{width:15px;height:15px;stroke:var(--mut);stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.bo-compte-btn .avatar-mini{width:26px;height:26px;font-size:.76rem}

.bo-compte-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);z-index:80;
  min-width:230px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 34px rgba(0,42,81,.16);padding:6px;display:grid;gap:2px}
.bo-compte-menu[hidden]{display:none}
.bcm-tete{display:grid;gap:2px;padding:9px 11px 10px;border-block-end:1px solid var(--line);
  margin-block-end:4px}
.bcm-tete b{font-size:.88rem;color:var(--ink)}
.bcm-tete small{font-size:.76rem;color:var(--mut);overflow:hidden;text-overflow:ellipsis}
.bo-compte-menu a,.bcm-sortie{display:block;width:100%;padding:9px 11px;border-radius:8px;
  font-size:.86rem;color:var(--txt);text-align:start;background:none;border:0;cursor:pointer;
  font-family:var(--font)}
.bo-compte-menu a:hover,.bcm-sortie:hover{background:var(--bg)}
/* La déconnexion se distingue : c'est le seul geste irréversible du menu. */
.bcm-sortie{color:var(--deal);font-weight:600;margin-block-start:4px;
  border-block-start:1px solid var(--line);border-radius:0 0 8px 8px}
.bcm-sortie:hover{background:#FDECF3}

/* --- Cloche de la barre du back-office ------------------------------------- */
.bo-cloche{position:relative;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);display:grid;place-items:center;
  flex:none;color:var(--txt)}
.bo-cloche:hover{border-color:var(--brand);background:#E7F3F1;color:var(--brand)}
.bo-cloche svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.bo-cloche-nb{position:absolute;top:-5px;inset-inline-end:-5px;min-width:18px;height:18px;
  padding-inline:5px;border-radius:99px;background:var(--deal);color:#fff;
  font-family:var(--mono);font-size:.66rem;font-weight:700;display:grid;place-items:center}

/* --- Tableau des notifications --------------------------------------------- */
.tbl-notifs .td-message small{display:block;font-size:.78rem;color:var(--mut);margin-block-start:2px}
/* Un liseré plutôt qu'un fond plein : la ligne reste lisible et l'œil repère
   la colonne des non-lues d'un seul balayage. */
.tbl-notifs .ligne-non-lue td:first-child{box-shadow:inset 3px 0 0 var(--deal)}
.tbl-notifs .ligne-non-lue{background:#FFF5F9}
.tbl-notifs .ligne-non-lue .td-message b,
.tbl-notifs .ligne-non-lue .td-message a{font-weight:700}
.etat-nouveau{background:#FDECF3;color:var(--deal)}
.etat-lu{background:var(--bg);color:var(--mut)}

/* --- Pastille de type de produit ------------------------------------------- */
.tag-type{display:inline-block;padding:3px 9px;border-radius:99px;font-size:.74rem;
  font-weight:600;white-space:nowrap}
.tag-physique{background:#E8F1F9;color:#0B5FA5}
.tag-digital{background:#F1ECFA;color:#7A4FBF}

/* --- Pagination numérotée --------------------------------------------------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;
  margin-block-start:16px}
.pagination a,.pagination span{display:grid;place-items:center;min-width:36px;height:36px;
  padding-inline:10px;border-radius:9px;font-size:.86rem;color:var(--txt)}
.pagination a{border:1px solid var(--line);background:var(--card)}
.pagination a:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-courante{background:var(--brand);color:#fff;font-weight:700}
/* Un bouton désactivé reste visible mais inerte : le faire disparaître décale
   les autres à chaque changement de page. */
.pagination .inactif{color:var(--mut);opacity:.5}
.pagination .ellipse{min-width:20px;padding-inline:0;color:var(--mut)}

/* --- Valeur modifiable (prix, stock) ---------------------------------------- */
.val-modif{padding:5px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-family:var(--mono);font-size:.86rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.val-modif:hover{border-color:var(--brand);color:var(--brand);background:#E7F3F1}
.val-modif.stock-bas{border-color:var(--deal);color:var(--deal)}

/* --- Fenêtre d'édition ------------------------------------------------------ */
.modif-fond[hidden],.modif-boite[hidden]{display:none}
.modif-fond{position:fixed;inset:0;z-index:120;background:rgba(0,42,81,.5)}
.modif-boite{position:fixed;z-index:121;inset-inline:0;top:50%;transform:translateY(-50%);
  width:min(380px,calc(100% - 32px));margin-inline:auto;background:var(--card);
  border-radius:16px;padding:22px;box-shadow:0 18px 60px rgba(0,42,81,.3)}
.modif-boite h2{margin:0 0 4px;font-size:1.05rem;color:var(--ink)}
.modif-produit{margin:0 0 16px;font-size:.84rem;color:var(--mut)}
.modif-boite .champ{margin-block-end:18px}
.modif-boite input[type=text]{font-family:var(--mono);font-size:1.05rem;text-align:center}
.modif-actions{display:flex;gap:10px}
.modif-actions button{flex:1}

/* Le nom du produit ne doit pas étirer la rangée : deux lignes au maximum, puis
   des points de suspension. Le titre complet reste dans l'infobulle. */
.col-produit span>a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-width:340px}

/* --- Rangée cliquable (zones de livraison) ---------------------------------- */
.ligne-cliquable{cursor:pointer}
.ligne-cliquable:hover{background:#E7F3F1}
.ligne-cliquable:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.ligne-cliquable.inactif{opacity:.55}
.modif-large{width:min(460px,calc(100% - 32px))}
.modif-large .duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zone-suppr{margin-block-start:14px;padding-block-start:12px;
  border-block-start:1px solid var(--line);text-align:center}

/* Rangée menant à une page : le curseur l'annonce, le survol le confirme. */
.ligne-vers{cursor:pointer}
.ligne-vers:hover{background:#F1F7F6}

/* Une carte qui porte un tableau occupe toute la largeur. La limite de 820 px
   sert à garder les FORMULAIRES lisibles — au-delà, l'œil peine à relier une
   étiquette à son champ — mais elle comprime inutilement les colonnes.
   Le sélecteur reprend « .bo » pour l'emporter sur la règle d'origine. */
.bo .carte-form:has(> .tableau-reactif),
.bo .carte-form:has(> .tbl),
.bo .carte-form:has(> table){max-width:none}

/* Barre d'outils des zones de livraison : recherche à gauche, ajout à droite. */
.zones-barre{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-block-end:14px}
.zones-barre .barre-filtres{margin:0;flex:1;min-width:260px}
/* « btn-principal » porte width:100% — il est fait pour clore un formulaire.
   Dans la barre d'outils il doit se contenter de sa largeur de texte. */
.zones-barre>.btn-principal{flex:none;width:auto;white-space:nowrap;padding-inline:22px}

/* --- Badge de boutique certifiée -------------------------------------------
   La pastille bleue est le code visuel que le public associe à la vérification
   d'identité ; s'en écarter demanderait un apprentissage. */
.badge-certifie{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  font-size:.76rem;font-weight:600;color:#0B5FA5}
.badge-certifie svg{width:17px;height:17px;flex:none;fill:#0B5FA5}
.badge-certifie .coche{fill:none;stroke:#fff;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
/* Dans les listes serrées, la pastille se suffit à elle-même. */
.badge-certifie.seul{gap:0}
h1 .badge-certifie svg{width:22px;height:22px}

/* --- Photo de rayon (back-office) ------------------------------------------- */
.rayon-photo{margin:0;flex:none}
.rayon-photo .rayon-icone{cursor:pointer;overflow:hidden;display:grid;place-items:center}
.rayon-photo .rayon-icone:hover{outline:2px solid var(--brand);outline-offset:1px}
.rayon-photo .rayon-icone img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Photo de rayon dans le formulaire -------------------------------------- */
.cat-photo-champ{display:flex;align-items:flex-start;gap:16px}
.cat-photo-apercu{flex:none;width:92px;height:92px;border-radius:12px;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);display:grid;place-items:center}
.cat-photo-apercu img{width:100%;height:100%;object-fit:cover;display:block}
.cat-photo-apercu svg{width:34px;height:34px;stroke:var(--mut);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.cat-photo-actions{flex:1;min-width:0;display:grid;gap:8px;justify-items:start}
.cat-photo-actions input[type=file]{font-size:.84rem}

/* La vignette d'un rayon garde le format carré du pictogramme qu'elle remplace. */
.vignette-rayon{border-radius:7px;object-fit:cover;aspect-ratio:1}
.ico.vignette-rayon{width:20px;height:20px}
.disc .vignette-rayon{width:100%;height:100%;border-radius:inherit}

/* Le sélecteur de devise reprend l'apparence de celui de la langue.
   « position:relative » est indispensable : le menu se place en absolu par
   rapport à son parent, sinon il tombe en bas de la page. */
#devSel{position:relative}
#devSel .langbtn{font-family:var(--mono);letter-spacing:.02em}

/* Bloc d'avance au tunnel : le montant doit sauter aux yeux avant de valider. */
.avance-bloc b{display:block;margin-block-end:4px}
.avance-bloc p{margin:0}
.avance-bloc .mention{margin-block-start:4px}

/* Tarif « autres villes » : bandeau en tête du barème de la boutique. */
.autres-villes{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-block-end:14px}
.autres-villes b{font-size:.95rem;color:var(--ink)}
.autres-villes .mention{margin:2px 0 0;font-size:.8rem;max-width:52ch}
.autres-champs{display:flex;align-items:center;gap:10px;flex:none}
.autres-champs input{width:150px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  font-family:var(--mono);text-align:center}

/* --- Gratuité de la livraison (espace vendeur) ------------------------------ */
.gratuite-bloc{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-block-end:14px}
.gratuite-bloc .case{display:flex;align-items:flex-start;gap:10px;margin:0;cursor:pointer;flex:1;
  min-width:240px}
.gratuite-bloc .case b{display:block;font-size:.95rem;color:var(--ink)}
.gratuite-bloc .case small{display:block;font-size:.8rem;color:var(--mut);margin-block-start:2px}
.gratuite-seuil{display:grid;gap:3px;flex:none}
.gratuite-seuil label{font-size:.8rem;font-weight:600;color:var(--ink)}
.gratuite-seuil input{width:150px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  font-family:var(--mono);text-align:center}
.gratuite-seuil .aide{max-width:34ch}
/* Sans objet quand le port est offert partout : on le montre plutôt que de le
   laisser croire actif. */
.gratuite-seuil.inactif{opacity:.45}

/* Barème de la boutique : liste à gauche, réglages à droite. Empilés, ils
   repoussaient le tableau sous la ligne de flottaison. */
.zones-grid>aside .carte-form{max-width:none}
.zones-grid .gratuite-bloc,
.zones-grid .autres-villes{display:grid;gap:12px;align-items:start}
.zones-grid .gratuite-bloc .case,
.zones-grid .autres-champs,
.zones-grid .gratuite-seuil{min-width:0}
.zones-grid .autres-villes{grid-template-columns:1fr}
.zones-grid .autres-champs{display:grid;grid-template-columns:1fr auto;gap:10px}
.zones-grid .autres-champs input,
.zones-grid .gratuite-seuil input{width:100%}

/* --- Barre d'actions d'une fiche de commande -------------------------------
   Les champs n'étaient stylés que dans « .champ » ; posés directement dans le
   formulaire, ils gardaient l'apparence brute du navigateur. */
.fiche-actions select,
.fiche-actions input[type=text]{height:40px;padding-inline:12px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.88rem;background:var(--card);color:var(--txt);
  min-width:0}
.fiche-actions select{padding-inline-end:32px;cursor:pointer;
  /* Le chevron du navigateur disparaît avec appearance:none : on le redessine,
     sinon rien n'indique que la liste s'ouvre. */
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377828F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px;
  background-position:right 10px center}
html[dir="rtl"] .fiche-actions select{background-position:left 10px center}
.fiche-actions input[type=text]{width:150px}
.fiche-actions select:focus,
.fiche-actions input[type=text]:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,107,102,.18)}
.fiche-actions .btn-mini{height:40px}

@media (max-width:700px){
  /* Sur un écran étroit, les quatre commandes s'empilent plutôt que de se
     comprimer jusqu'à devenir illisibles. */
  .fiche-actions{display:grid;grid-template-columns:1fr;width:100%}
  .fiche-actions select,
  .fiche-actions input[type=text],
  .fiche-actions .btn-mini{width:100%}
}

/* --- Invitation à ouvrir une boutique --------------------------------------
   En bas à GAUCHE : la droite est occupée par le panier flottant, et se faire
   recouvrir par une publicité maison serait le comble. */
.inv-vendeur{position:fixed;inset-block-end:16px;inset-inline-start:16px;z-index:70;
  width:min(330px,calc(100vw - 32px));padding:18px 18px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 14px 40px rgba(0,42,81,.18);
  display:grid;gap:8px;
  /* Départ légèrement plus bas et transparent : l'animation est une arrivée,
     pas une apparition brutale. */
  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1)}
.inv-vendeur[hidden]{display:none}
.inv-vendeur.visible{opacity:1;transform:none}

.inv-icone{width:40px;height:40px;border-radius:12px;background:#E7F3F1;
  display:grid;place-items:center}
.inv-icone svg{width:20px;height:20px;stroke:var(--brand);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.inv-vendeur b{font-size:.98rem;color:var(--ink);line-height:1.3}
.inv-vendeur p{margin:0;font-size:.84rem;color:var(--mut);line-height:1.5}
.inv-actions{display:flex;align-items:center;gap:12px;margin-block-start:4px}
.inv-plus-tard{border:0;background:none;font-family:var(--font);font-size:.82rem;
  color:var(--mut);cursor:pointer;padding:0}
.inv-plus-tard:hover{color:var(--txt);text-decoration:underline}

.inv-fermer{position:absolute;top:8px;inset-inline-end:8px;width:28px;height:28px;
  border:0;border-radius:50%;background:none;color:var(--mut);display:grid;place-items:center;
  cursor:pointer}
.inv-fermer:hover{background:var(--bg);color:var(--txt)}
.inv-fermer svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round}

@media (max-width:560px){
  /* Sur mobile, la carte occupe la largeur mais reste au-dessus de la barre
     d'onglets du navigateur. */
  /*
   * Remontée au-dessus de la barre de messagerie : à pleine largeur, elle la
   * recouvrait et interceptait le clic — le bouton était visible mais mort.
   */
  .inv-vendeur{inset-inline:12px;inset-block-end:56px;width:auto;padding:15px}
}

/* Qui a demandé moins d'animations la voit apparaître sans mouvement. */
@media (prefers-reduced-motion:reduce){
  .inv-vendeur{transition:opacity .2s ease;transform:none}
  .inv-vendeur.visible{transform:none}
}

/* --- Visuel produit : taille contenue et loupe ------------------------------
   L'image occupait toute la largeur de la colonne : sur un grand écran, il
   fallait défiler pour atteindre le bouton d'achat. On la plafonne, et le
   grossissement se fait à la loupe plutôt qu'en occupant la page. */
.visuel{position:relative;overflow:hidden;border-radius:var(--r);background:#F3F5F6;
  max-width:460px;margin-inline:auto;cursor:zoom-in;outline-offset:3px}
.galerie img#img-principale{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:contain;border-radius:0;background:transparent;
  transition:transform .25s ease}

/* Pendant le zoom, l'image suit le pointeur : « transform-origin » est piloté
   par le script, et la transition est coupée pour que le suivi reste collé. */
.visuel.zoome{cursor:zoom-out}
.visuel.zoome img#img-principale{transform:scale(2.4);transition:none}

.visuel-loupe{position:absolute;inset-block-end:10px;inset-inline-end:10px;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,42,81,.18);
  pointer-events:none;transition:opacity .2s}
.visuel-loupe svg{width:17px;height:17px;stroke:var(--ink);stroke-width:1.9;fill:none;
  stroke-linecap:round}
.visuel.zoome .visuel-loupe{opacity:0}

.vignettes{justify-content:center}

@media (max-width:900px){
  /* Sur mobile, la colonne est déjà étroite : le plafond n'a plus lieu d'être. */
  .visuel{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .galerie img#img-principale{transition:none}
}

/* --- Réseaux sociaux dans le pied ------------------------------------------- */
.foot-rs{display:flex;gap:10px;flex-wrap:wrap;padding-block:16px 4px;
  border-block-start:1px solid rgba(255,255,255,.12);margin-block-start:8px}
.foot-rs a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:background .15s}
.foot-rs a:hover{background:var(--brand)}
.foot-rs svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* --- Retour en haut ---------------------------------------------------------
   En bas à DROITE. Le panier flottant occupe la droite mais à mi-hauteur, et
   l'invitation à vendre le bas gauche : ce coin est le seul vraiment libre.
   L'avoir mis à gauche faisait recouvrir la flèche par l'invitation — un bouton
   qu'on voit mais sur lequel on ne peut pas cliquer. */
.haut{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:65;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--txt);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,42,81,.16);
  opacity:0;transform:translateY(10px);transition:opacity .25s, transform .25s}
.haut[hidden]{display:none}
.haut.visible{opacity:1;transform:none}
.haut:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.haut svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  .haut{transition:opacity .2s;transform:none}
}

/* --- Choix des couleurs (réglages) ------------------------------------------ */
.couleur-duo{display:flex;align-items:center;gap:8px}
.couleur-duo input[type=color]{flex:none;width:44px;height:44px;padding:3px;border:1px solid var(--line);
  border-radius:9px;background:var(--card);cursor:pointer}
.couleur-duo input[type=text]{flex:1;min-width:0;height:44px;padding-inline:12px;
  border:1px solid var(--line);border-radius:9px;font-family:var(--mono);font-size:.88rem}
.couleur-reset{flex:none;border:0;background:none;font-family:var(--font);font-size:.8rem;
  color:var(--mut);cursor:pointer;padding:4px}
.couleur-reset:hover{color:var(--txt);text-decoration:underline}

/* --- Éditeur de texte enrichi ----------------------------------------------
   Le champ HTML reste dans le formulaire mais masqué : c'est lui qui part au
   serveur, l'éditeur ne fait que l'alimenter. */
.red-boite{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.red-barre{display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:6px 8px;
  background:var(--bg);border-block-end:1px solid var(--line)}
.red-btn{min-width:32px;height:30px;padding-inline:7px;border:1px solid transparent;border-radius:7px;
  background:none;font-family:var(--font);font-size:.86rem;color:var(--txt);cursor:pointer;
  display:grid;place-items:center;line-height:1}
.red-btn:hover{background:var(--card);border-color:var(--line)}
.red-gras{font-weight:800}
.red-italique{font-style:italic}
.red-code{font-family:var(--mono);font-size:.76rem}
.red-sep{width:1px;height:18px;background:var(--line);margin-inline:4px}

.red-zone{min-height:280px;max-height:60vh;overflow-y:auto;padding:16px 18px;
  font-size:.94rem;line-height:1.65;color:var(--txt);outline:none}
.red-zone[hidden]{display:none}
.red-zone:focus{box-shadow:inset 0 0 0 2px rgba(14,107,102,.16)}
/* Le rendu de la zone reprend celui du site : ce qu'on voit en écrivant est ce
   que verra le visiteur. */
.red-zone h2{font-size:1.15rem;margin:18px 0 8px;color:var(--ink)}
.red-zone h3{font-size:1rem;margin:14px 0 6px;color:var(--ink)}
.red-zone p{margin:0 0 10px}
/* Les puces et numéros doivent se voir : la règle globale du site les retire
   sur les listes de navigation, il faut les rétablir ici. */
.red-zone ul{list-style:disc;margin:0 0 10px;padding-inline-start:24px}
.red-zone ol{list-style:decimal;margin:0 0 10px;padding-inline-start:24px}
.red-zone li{margin-block-end:4px}
.red-zone a{color:var(--brand);text-decoration:underline}
.red-zone:empty::before{content:attr(data-vide);color:var(--mut)}

/* Champ HTML : masqué par défaut, révélé par le bouton « </> ». */
.red-source{display:none;width:100%;border:0;border-block-start:1px solid var(--line);
  padding:14px 16px;font-family:var(--mono);font-size:.82rem;line-height:1.6;resize:vertical}
.red-source.visible{display:block}
.red-source:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(14,107,102,.16)}

/* --- Page de contenu long (CGV, confidentialité…) ---------------------------
   520 px suffisent pour une page d'aide ; pour un document de vingt articles,
   c'est une colonne de journal qui triple la hauteur de défilement. */
.page-doc{max-width:1080px;padding-block:24px 44px}
.doc-grid{display:grid;gap:24px;grid-template-columns:1fr}

@media (min-width:900px){
  /*
   * La seconde colonne n'est réservée QUE sur les pages qui ont un sommaire.
   * Sans « .page-doc », une page courte gardait 236 px vides à droite et voyait
   * son texte comprimé à 270 px — une colonne de deux mots par ligne.
   */
  .page-doc .doc-grid{grid-template-columns:1fr 236px;align-items:start}
  .page-doc .doc-sommaire{position:sticky;top:16px}
}

.doc-sommaire{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px}
.doc-sommaire b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);margin-block-end:10px}
.doc-sommaire ol{margin:0;padding-inline-start:20px;font-size:.84rem;line-height:1.5}
.doc-sommaire li{margin-block-end:7px}
.doc-sommaire a{color:var(--txt);text-decoration:none}
.doc-sommaire a:hover{color:var(--brand);text-decoration:underline}

/* Typographie du document : plus aérée que la page d'aide, avec des titres qui
   se détachent vraiment du corps de texte. */
.page-doc .carte-form{padding:34px 38px}
.page-doc h1{font-size:1.7rem;margin:0 0 6px}
.page-doc h2{margin:30px 0 10px;font-size:1.14rem;padding-block-start:16px;
  border-block-start:1px solid var(--line)}
.page-doc h2:first-of-type{border-block-start:0;padding-block-start:0}
.page-doc h3{margin:20px 0 8px;font-size:1rem}
.page-doc p{font-size:.95rem;line-height:1.75;margin-block-end:12px}
.page-doc ul,.page-doc ol{font-size:.95rem;line-height:1.8;margin-block-end:14px;
  padding-inline-start:22px}
.page-doc li{margin-block-end:5px}
/* Le décalage compense la barre collante quand on arrive par une ancre. */
.page-doc h2[id]{scroll-margin-top:80px}
.doc-maj{margin-block-start:28px;padding-block-start:14px;border-block-start:1px solid var(--line)}

@media (max-width:899px){
  .page-doc .carte-form{padding:22px 20px}
  /* Sur mobile le sommaire passe AVANT le texte : il sert de plan. */
  .doc-sommaire{order:-1}
  .doc-grid{display:flex;flex-direction:column}
}

/* Aperçu de la bannière dans l'espace vendeur : même proportion que la carte
   de l'annuaire, pour que le vendeur voie ce que verront les clients. */
.couv-apercu{position:relative;width:100%;max-width:520px;aspect-ratio:16/6;
  border-radius:var(--r);overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.couv-apercu img{width:100%;height:100%;object-fit:cover;display:block}

/* --- Catalogue : filtres à gauche, grille à droite -------------------------- */
.page-catalogue{padding-block:20px 44px}
.cat-grid{display:grid;gap:22px;grid-template-columns:1fr}

@media (min-width:900px){
  .cat-grid{grid-template-columns:250px 1fr;align-items:start}
  /* Les filtres suivent le défilement : sur une grille de 24 produits, on
     ajuste un critère sans avoir à remonter. */
  .cat-filtres{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
  .cat-ouvrir-filtres{display:none}
}

.cat-filtres{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px}
.cf-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-block-end:12px;border-block-end:1px solid var(--line)}
.cf-tete b{font-size:1rem;color:var(--ink)}
.cf-vider{font-size:.8rem;color:var(--deal)}
.cf-vider:hover{text-decoration:underline}

.cf-bloc{padding-block:14px;border-block-end:1px solid var(--line)}
.cf-bloc:last-of-type{border-block-end:0}
.cf-titre{display:block;font-size:.86rem;color:var(--ink);margin-block-end:10px}

.cf-prix{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.cf-prix input{width:100%;min-width:0;height:36px;padding-inline:10px;border:1px solid var(--line);
  border-radius:8px;font-family:var(--mono);font-size:.82rem;text-align:center}
.cf-prix span{font-size:.78rem;color:var(--mut)}
.cf-prix .btn-mini{grid-column:1 / -1;margin-block-start:8px;width:100%}

.cf-select{width:100%;height:40px;padding-inline:10px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.86rem;background:var(--card);color:var(--txt)}

/* Interrupteur : plus lisible qu'une case pour un critère qui bascule. */
.cf-bascule{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-block:7px;font-size:.86rem;color:var(--txt);cursor:pointer}
.cf-bascule input{position:absolute;opacity:0;width:0;height:0}
.cf-piste{flex:none;width:38px;height:21px;border-radius:99px;background:var(--line);
  position:relative;transition:background .18s}
.cf-piste::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:17px;height:17px;
  border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.cf-bascule input:checked + .cf-piste{background:var(--brand)}
.cf-bascule input:checked + .cf-piste::after{transform:translateX(17px)}
html[dir="rtl"] .cf-bascule input:checked + .cf-piste::after{transform:translateX(-17px)}
.cf-bascule input:focus-visible + .cf-piste{outline:2px solid var(--brand);outline-offset:2px}

.cf-case{display:flex;align-items:center;gap:8px;padding-block:6px;font-size:.86rem;
  color:var(--txt);cursor:pointer}
.cf-case input{flex:none;accent-color:var(--brand)}
.cf-case .etoiles{font-size:.8rem;letter-spacing:.5px}

.cat-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  margin-block-end:16px}
.cat-tete h1{font-size:1.4rem;margin:0}
.cat-tete .sous-titre{margin:4px 0 0}

@media (max-width:899px){
  /* Panneau plein écran : une colonne de filtres au-dessus de la grille
     repousserait les produits sous la ligne de flottaison. */
  .cat-filtres{position:fixed;inset-block:0;inset-inline-start:0;z-index:90;
    width:min(320px,86vw);border-radius:0;overflow-y:auto;
    transform:translateX(-102%);transition:transform .25s ease}
  html[dir="rtl"] .cat-filtres{inset-inline-start:auto;inset-inline-end:0;transform:translateX(102%)}
  .cat-filtres.ouvert{transform:none;box-shadow:0 0 40px rgba(0,42,81,.3)}
}

/* --- Curseur de prix à deux poignées ----------------------------------------
   Deux <input range> superposés : le navigateur fournit le clavier, le tactile
   et l'accessibilité, ce qu'une reconstruction en div aurait fait perdre. */
.cf-piste-prix{position:relative;height:30px;margin-block-end:12px}
.cf-piste-prix[hidden]{display:none}

.cp-rail{position:absolute;inset-block-start:13px;inset-inline:10px;height:4px;
  border-radius:99px;background:var(--line)}
.cp-plage{position:absolute;inset-block-start:13px;height:4px;border-radius:99px;
  background:var(--brand);margin-inline-start:10px}

/* Les deux champs se superposent : « pointer-events:none » sur la piste laisse
   passer le clic vers la poignée qui se trouve dessous. */
.cf-piste-prix input[type=range]{position:absolute;inset-block-start:0;inset-inline:0;
  width:100%;height:30px;margin:0;background:none;appearance:none;-webkit-appearance:none;
  pointer-events:none}
.cf-piste-prix input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:20px;height:20px;border-radius:50%;background:var(--card);
  border:3px solid var(--brand);box-shadow:0 1px 5px rgba(0,42,81,.28);cursor:grab;
  pointer-events:auto;transition:transform .12s}
.cf-piste-prix input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:var(--card);border:3px solid var(--brand);box-shadow:0 1px 5px rgba(0,42,81,.28);
  cursor:grab;pointer-events:auto;transition:transform .12s}

/* La poignée grossit sous le doigt : sans repère visuel, on ne sait pas
   laquelle des deux on a saisie. */
.cf-piste-prix input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15);cursor:grabbing}
.cf-piste-prix input[type=range]:active::-moz-range-thumb{transform:scale(1.15);cursor:grabbing}
.cf-piste-prix input[type=range]::-webkit-slider-runnable-track{height:30px;background:none}
.cf-piste-prix input[type=range]::-moz-range-track{height:30px;background:none}
.cf-piste-prix input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--brand);
  outline-offset:2px}

/* --- Messagerie flottante ---------------------------------------------------
   Une barre ancrée au bas de l'écran plutôt qu'une pastille ronde : le libellé
   dit ce que c'est, ce qu'une icône seule laisse deviner. Les coins du bas sont
   droits — elle est posée sur le bord, pas flottante au-dessus. */
/* À 1 cm du bord droit — même marge que le contenu du site, pour que la barre
   s'aligne sur lui plutôt que de flotter au hasard. */
.chat-bulle{position:fixed;inset-block-end:0;inset-inline-end:38px;z-index:66}

.chat-btn{position:relative;display:flex;align-items:center;gap:9px;
  height:42px;padding-inline:16px 14px;border:0;
  border-start-start-radius:12px;border-start-end-radius:12px;
  border-end-start-radius:0;border-end-end-radius:0;
  background:var(--brand);color:#fff;cursor:pointer;
  font-family:var(--font);font-size:.88rem;font-weight:600;
  box-shadow:0 -3px 18px rgba(0,42,81,.2);
  transition:background .15s}
.chat-btn:hover{background:var(--brand-d)}
.chat-btn:focus-visible{outline:2px solid var(--card);outline-offset:-3px}

.chat-btn > svg:first-child{flex:none;width:19px;height:19px;stroke:currentColor;
  stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chat-libelle{white-space:nowrap}

/* Le chevron pivote à l'ouverture : c'est le seul indice que la barre est un
   panneau repliable et non un simple lien. */
.chat-chev{flex:none;width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.chat-btn[aria-expanded="true"] .chat-chev{transform:rotate(180deg)}

/* La pastille déborde en haut à droite de la barre, pour rester visible même
   quand le panneau est ouvert. */
.chat-nb{position:absolute;top:-9px;inset-inline-end:-7px;min-width:21px;height:21px;
  padding-inline:5px;border-radius:99px;background:var(--deal);color:#fff;
  font-family:var(--mono);font-size:.68rem;font-weight:700;display:grid;place-items:center;
  border:2px solid var(--card);box-shadow:0 2px 6px rgba(0,42,81,.25)}

/* Le panneau prolonge la barre vers le haut : même largeur au minimum, mêmes
   coins arrondis en haut. */
.chat-panneau{position:absolute;inset-block-end:42px;inset-inline-end:0;
  width:min(340px,calc(100vw - 24px));
  background:var(--card);border:1px solid var(--line);border-block-end:0;
  border-start-start-radius:12px;border-start-end-radius:12px;
  box-shadow:0 -6px 34px rgba(0,42,81,.18);overflow:hidden}
.chat-panneau[hidden]{display:none}

.chat-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-block-end:1px solid var(--line)}
.chat-tete b{font-size:.94rem;color:var(--ink)}
.chat-fermer{width:26px;height:26px;border:0;border-radius:50%;background:none;
  color:var(--mut);display:grid;place-items:center;cursor:pointer}
.chat-fermer:hover{background:var(--bg);color:var(--txt)}
.chat-fermer svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round}

.chat-corps{max-height:min(70vh,560px);overflow-y:auto}
.chat-liste{list-style:none;margin:0;padding:0}
.chat-liste li{border-block-end:1px solid var(--line)}
.chat-liste li:last-child{border-block-end:0}
.chat-liste a{display:block;padding:12px 15px;color:var(--txt)}
.chat-liste a:hover{background:var(--bg)}
.cl-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cl-tete b{font-size:.86rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cl-tete small{flex:none;font-size:.72rem;color:var(--mut)}
/* Deux lignes au maximum : la liste sert à choisir un fil, pas à le lire. */
.cl-extrait{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:.78rem;color:var(--mut);line-height:1.4;margin-block-start:3px}

.chat-vide{padding:22px 16px;text-align:center}
.chat-vide p{margin:0 0 12px;font-size:.85rem;color:var(--mut)}
/* --- Onglets et formulaires du panneau ------------------------------------ */
.chat-onglets{display:grid;grid-template-columns:1fr 1fr;border-block-end:1px solid var(--line)}
.chat-onglet{padding:11px 8px;border:0;background:none;cursor:pointer;
  font-family:var(--font);font-size:.83rem;font-weight:600;color:var(--mut);
  border-block-end:2px solid transparent;margin-block-end:-1px}
.chat-onglet:hover{color:var(--txt)}
.chat-onglet.actif{color:var(--brand);border-block-end-color:var(--brand)}

.chat-form{padding:14px 15px 16px}
.chat-form[hidden]{display:none}
.chat-form .champ{margin-block-end:10px}
.chat-form .champ label{font-size:.8rem}
.chat-form .champ input,.chat-form .champ textarea{height:auto;padding:9px 11px;
  font-size:.86rem;border-radius:9px}
.chat-form .champ input{height:38px}
.chat-form textarea{resize:vertical;min-height:78px}
.chat-form .btn-principal{width:100%;height:40px;font-size:.86rem}

.chat-aide{margin:0 0 12px;font-size:.79rem;color:var(--mut);line-height:1.5}
.chat-erreur{margin:0 0 10px;padding:8px 10px;border-radius:8px;
  background:rgba(225,29,107,.08);color:var(--deal);font-size:.79rem}
.chat-ok{margin:0;padding:11px 15px;background:rgba(11,122,92,.08);color:#0B7A5C;
  font-size:.82rem;border-block-end:1px solid var(--line)}

@media (max-width:640px){
  /* Le libellé cède la place : sur un écran étroit, l'icône et la pastille
     suffisent à faire comprendre de quoi il s'agit. */
  .chat-bulle{inset-inline-end:12px}
  .chat-btn{height:40px;padding-inline:13px}
  .chat-libelle,.chat-chev{display:none}
  .chat-panneau{position:fixed;inset-inline:12px;inset-block-end:40px;width:auto}
}

@media (prefers-reduced-motion:reduce){
  .chat-btn,.chat-chev{transition:none}
}


/* --- Messagerie : conversation et formulaires -------------------------------
   Le panneau prend deux visages : formulaires tant que l'accès n'est pas
   ouvert, conversation ensuite. */
.chat-ok,.chat-erreur{margin:0;padding:10px 15px;font-size:.82rem;line-height:1.45}
.chat-ok{background:#E7F3F1;color:#0B6B5F}
.chat-erreur{background:#FDECF2;color:var(--deal-d)}

.chat-onglets{display:flex;border-block-end:1px solid var(--line)}
.chat-onglet{flex:1;padding:11px 8px;border:0;background:none;cursor:pointer;
  font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--mut);
  border-block-end:2px solid transparent}
.chat-onglet.actif{color:var(--brand);border-block-end-color:var(--brand)}
.chat-onglet:hover{color:var(--txt)}

.chat-form{padding:14px 15px 16px}
.chat-form[hidden]{display:none}
.chat-aide{margin:0 0 12px;font-size:.8rem;color:var(--mut);line-height:1.5}
.chat-form .champ{margin-block-end:10px}
.chat-form label{display:block;font-size:.78rem;font-weight:600;color:var(--ink);
  margin-block-end:4px}
.chat-form input,.chat-form textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:.86rem;background:var(--card);color:var(--txt)}
.chat-form textarea{resize:vertical;min-height:76px}
.chat-form input:focus,.chat-form textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(14,107,102,.16)}
.chat-form .btn-principal{width:100%;margin-block-start:4px}

/* Bandeau de la commande en cours : rappelle sur quoi on discute et permet de
   refermer l'accès — utile sur un appareil partagé. */
.chat-cmd{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 15px;background:var(--bg);border-block-end:1px solid var(--line);
  font-size:.78rem;color:var(--mut)}
.chat-quitter{border:0;background:none;font-family:var(--font);font-size:.76rem;
  color:var(--deal);cursor:pointer;padding:0}
.chat-quitter:hover{text-decoration:underline}

.chat-vendeurs{display:flex;gap:4px;padding:8px 12px;overflow-x:auto;
  border-block-end:1px solid var(--line)}
.chat-vend{flex:none;padding:5px 11px;border:1px solid var(--line);border-radius:99px;
  background:var(--card);font-family:var(--font);font-size:.76rem;color:var(--txt);cursor:pointer}
.chat-vend.actif{background:var(--brand);border-color:var(--brand);color:#fff}

.chat-conv[hidden]{display:none}
.chat-fil{max-height:300px;overflow-y:auto;padding:14px 15px;display:grid;gap:10px}

/* « Moi » à droite, l'autre à gauche : le sens de lecture suffit à distinguer
   qui parle, sans étiquette à chaque message. */
.cm{max-width:82%;padding:9px 12px;border-radius:13px;font-size:.83rem;line-height:1.45}
.cm p{margin:0;white-space:pre-wrap;word-break:break-word}
.cm small{display:block;margin-block-start:4px;font-size:.68rem;opacity:.7}
.cm.moi{justify-self:end;background:var(--brand);color:#fff;border-end-end-radius:4px}
.cm.lui{justify-self:start;background:var(--bg);color:var(--txt);border-end-start-radius:4px}

.chat-envoi{display:flex;gap:8px;align-items:flex-end;padding:11px 13px;
  border-block-start:1px solid var(--line)}
.chat-envoi textarea{flex:1;min-width:0;padding:9px 11px;border:1px solid var(--line);
  border-radius:11px;font:inherit;font-size:.84rem;resize:none;max-height:110px}
.chat-envoi textarea:focus{outline:none;border-color:var(--brand)}
.chat-envoi button{flex:none;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer}
.chat-envoi button:hover{background:var(--brand-d)}
.chat-envoi svg{width:17px;height:17px;fill:currentColor;stroke:none}
html[dir="rtl"] .chat-envoi svg{transform:scaleX(-1)}

/* --- Vitrine d'une boutique -------------------------------------------------
   Même composition que la carte de l'annuaire — bannière, logo à cheval — pour
   qu'on reconnaisse la boutique d'un écran à l'autre. */
/*
 * Pas d'« overflow:hidden » sur la carte : il rognait la moitié haute du logo,
 * qui déborde volontairement sur la bannière. C'est la BANNIÈRE seule qui
 * découpe son image, et ses coins hauts sont arrondis pour compenser.
 */
.bq-vitrine{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-block-end:20px}

/* Hauteur plafonnée : à 1520 px de large, la proportion 4:1 donnait une
   bannière de 381 px qui remplissait l'écran avant le nom de la boutique. */
.bqv-couv{position:relative;width:100%;aspect-ratio:1200/300;max-height:240px;
  overflow:hidden;background:var(--bg);
  border-start-start-radius:var(--r);border-start-end-radius:var(--r)}
.bqv-couv img{width:100%;height:100%;object-fit:cover;display:block}

/*
 * « align-items:flex-end » alignait tout sur le bas et neutralisait la marge
 * négative du logo, qui ne chevauchait plus que 20 px. On aligne en haut et on
 * décale les autres colonnes à la place.
 */
.bqv-corps{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;padding:0 24px 18px}
/*
 * Le médaillon chevauche la bannière : la marge négative crée la devanture.
 * « position:relative » est indispensable — la bannière l'étant déjà, elle
 * passait au-dessus et rognait la moitié haute du logo.
 */
.bqv-logo{position:relative;z-index:1;flex:none;margin-block-start:-46px;
  width:96px;height:96px;border-radius:50%;
  overflow:hidden;background:var(--card);border:4px solid var(--card);
  box-shadow:0 3px 14px rgba(0,42,81,.18);display:grid;place-items:center}
.bqv-logo img{width:100%;height:100%;object-fit:cover}
.bqv-logo .bq-initiales{font-size:1.7rem}

.bqv-titre{flex:1;min-width:200px;padding-block-start:16px}
.bqv-titre h1{margin:0;font-size:1.45rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bqv-lieu{margin:4px 0 0;font-size:.84rem;color:var(--mut)}

/* Trois chiffres seulement : la note, le catalogue, les ventes — ceux qui
   répondent à « puis-je faire confiance ? ». */
.bqv-chiffres{display:flex;gap:26px;flex:none;padding-block-start:16px}
.bqv-chiffres span{display:grid;gap:2px;text-align:center}
.bqv-chiffres b{font-family:var(--mono);font-size:1.3rem;color:var(--ink);line-height:1.1}
.bqv-chiffres small{font-size:.74rem;color:var(--mut);display:flex;align-items:center;gap:5px;
  justify-content:center;white-space:nowrap}
/*
 * Les étoiles sont des <span> ; sans « display:inline-flex » elles héritaient
 * de la grille du parent et s'empilaient les unes sous les autres.
 */
.bqv-chiffres .etoiles{display:inline-flex;gap:1px;font-size:.72rem;letter-spacing:0;
  line-height:1}

.bqv-desc{padding:0 24px 20px;font-size:.9rem;line-height:1.65;color:var(--txt);
  max-width:78ch}

@media (max-width:700px){
  .bqv-corps{padding:0 16px 16px;gap:12px}
  .bqv-logo{width:76px;height:76px;margin-block-start:-36px}
  .bqv-titre h1{font-size:1.2rem}
  /* Les chiffres passent à la ligne et se répartissent : à trois de front sur
     un écran étroit, les libellés se coupaient. */
  .bqv-chiffres{width:100%;justify-content:space-between;gap:10px;
    padding-block-start:14px;border-block-start:1px solid var(--line)}
  .bqv-desc{padding:0 16px 18px}
}

/* --- Vignettes des sous-rayons ----------------------------------------------
   Une image reconnaît plus vite qu'une ligne de texte parmi vingt autres. */
.ico-sous{flex:none;width:22px;height:22px;border-radius:6px;object-fit:cover;
  vertical-align:middle;margin-inline-end:8px}
img.ico-sous{background:var(--bg)}
/* Sans photo : une réserve invisible qui garde les libellés alignés, plutôt
   qu'un pictogramme générique répété sur chaque ligne. */
.ico-vide{background:none}

.mega-col li a{display:flex;align-items:center}
.acc-panel a{display:flex;align-items:center}
/* « Voir tout » n'a pas de vignette : on l'aligne sur les libellés voisins,
   sinon il part seul contre la marge. */
.mega-col a.all{padding-inline-start:30px}

/* Pastille avec vignette, en tête d'un rayon. */
.chip-img{display:inline-flex;align-items:center;padding-inline-start:6px}
.chip-img .ico-sous{width:24px;height:24px;margin-inline-end:7px}

/* Sous-rayons du mega-menu : une seule liste répartie en colonnes par le
   navigateur, plutôt qu'un découpage arbitraire en groupes de trois. */
.mega-liste ul{columns:3;column-gap:24px}
.mega-liste li{break-inside:avoid}
.mega-liste{grid-column:span 3}
@media (max-width:1100px){ .mega-liste ul{columns:2} }

/* Volet des sous-rayons sur l'accueil : une seule liste en trois colonnes,
   comme le mega-menu de l'en-tête. */
.flyout-liste ul{columns:3;column-gap:22px}
.flyout-liste li{break-inside:avoid}
.flyout-liste li a{display:flex;align-items:center}
.flyout-liste a.all{padding-inline-start:30px}
@media (max-width:1100px){ .flyout-liste ul{columns:2} }



/* --- Réglage des notifications WhatsApp ------------------------------------- */
.wa-groupe{margin-block-end:16px}
.wa-groupe > b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);margin-block-end:8px}
.wa-groupe ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.wa-groupe li{border:1px solid var(--line);border-radius:9px;background:var(--card)}
.wa-groupe li:hover{border-color:var(--brand)}
.wa-groupe .case{display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;cursor:pointer}
.wa-groupe .case input{flex:none;accent-color:var(--brand)}
.wa-groupe .case span{font-size:.86rem;color:var(--txt)}
/* Le destinataire en gris à côté du libellé : « Versement » ne dit pas à qui. */
.wa-groupe .case small{display:inline;margin-inline-start:6px;font-size:.76rem;color:var(--mut)}

/* Suppression d'un message de contact : à côté du sélecteur d'état, discrète —
   c'est un geste irréversible qu'on ne veut pas rendre trop facile. */
.ma-suppr{display:inline-block;margin-inline-start:10px}

/* --- Logo du site (réglages) ------------------------------------------------ */
.logo-champ{display:grid;gap:8px}
.logo-champ > b{font-size:.84rem;color:var(--ink)}
/* L'aperçu de la version claire est sur fond sombre : un logo blanc sur fond
   blanc serait invisible, et on croirait l'envoi raté. */
.logo-apercu{display:grid;place-items:center;height:86px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);padding:10px}
.logo-apercu.sombre{background:var(--barre)}
.logo-apercu img{max-height:100%;max-width:100%;object-fit:contain}
.logo-apercu small{font-size:.78rem;color:var(--mut)}
.logo-apercu.sombre small{color:rgba(255,255,255,.6)}
.logo-champ .case{display:flex;align-items:center;gap:8px;margin:0;font-size:.8rem}

/* Aperçu de l'icône : petit et sur damier, pour qu'on voie la transparence
   plutôt que de croire à un fond blanc. */
.favicon-apercu{background:
  repeating-conic-gradient(#EDF1F4 0% 25%, #FFF 0% 50%) 50% / 14px 14px}
.favicon-apercu img{max-height:72px;max-width:72px}