/* ═══════════════════════════════════════════
   MARCHÉ SÉNÉGAL — Styles communs
   Importé par toutes les pages HTML
   ═══════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --green:#1C6845; --gl:#287B53; --gp:#E9F1E8; --g2:#C4D5C5;
  --gold:#D8A72B; --gdl:#F8EED5;
  --dark:#10271D; --text:#24352C; --muted:#68766D;
  --bg:#F5F4EF; --white:#FCFBF7; --border:#E2E2D9;
  --red:#C0392B; --rp:#FDE8E6;
  --blue:#1565C0; --bluep:#E3F2FD;
  --shadow:0 8px 24px rgba(31,54,39,.06);
  --shadow-lg:0 18px 48px rgba(31,54,39,.12);
  --radius:18px;
  --nav-h:68px;
  --sidebar-w:240px; --topbar-h:64px;
  --font-ui:'Manrope',sans-serif;
  --font-display:'Newsreader',Georgia,serif;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-ui);background:var(--bg);color:var(--text);overflow-x:hidden;font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}

/* Shared visual language: warm paper, forest ink, restrained motion. */
::selection{background:#dce9d9;color:var(--dark)}
:focus-visible{outline:3px solid #bb8f27;outline-offset:3px}
a,button,[role="button"],input,select,textarea{transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .22s ease,transform .22s cubic-bezier(.2,.75,.25,1)}
button:active,[role="button"]:active{transform:translateY(1px) scale(.985)}
input,select,textarea{accent-color:var(--green)}
input:focus,select:focus,textarea:focus{border-color:var(--green)!important;box-shadow:0 0 0 4px rgba(28,104,69,.1)!important;outline:0}
.nav,.topbar{background:rgba(252,251,247,.94);border-color:rgba(27,54,38,.09);box-shadow:0 4px 24px rgba(35,48,39,.035)}
.nav-logo,.sb-logo-text{font-family:var(--font-display);font-weight:500;letter-spacing:-.035em}
.nav-logo{font-size:1.34rem}
.sb-logo-text{color:#f1f0e7;font-size:1.25rem}
.sidebar{background:linear-gradient(165deg,#10271d 0%,#0d2119 68%,#152b20 100%);box-shadow:10px 0 34px rgba(12,34,23,.08)}
.sb-logo{min-height:66px;border-bottom-color:rgba(255,255,255,.07)}
.sb-shop{padding-top:18px;padding-bottom:18px;border-bottom-color:rgba(255,255,255,.07)}
.sb-avatar,.tb-profile-av{background:#2a7750}
.sb-item{border-radius:0 10px 10px 0;margin-right:10px;padding-top:11px;padding-bottom:11px}
.sb-item.active{background:rgba(57,129,82,.24);color:#f8f8f1}
.sb-item.active::before{width:3px;background:#d6ae43}
.sb-section-label{letter-spacing:.13em;color:rgba(241,240,231,.4)}
.topbar{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.tb-title{font-family:var(--font-display);font-size:1.32rem;font-weight:500;letter-spacing:-.025em}
.nav-search,.tb-search{box-shadow:none;border-color:#e4e3da}
.nav-search:focus-within,.tb-search:focus-within{box-shadow:0 0 0 4px rgba(28,104,69,.09)}
.nav-btn,.nav-cart,.tb-btn,.tb-profile{border-color:#e2e2d9;box-shadow:0 1px 2px rgba(30,44,34,.03)}
.nav-btn-primary,.nav-search-btn,.tb-search-btn{background:var(--green);border-color:var(--green)}
.nav-btn-primary:hover,.nav-search-btn:hover,.tb-search-btn:hover{background:#15583a}
.mobile-nav{background:rgba(252,251,247,.96);backdrop-filter:blur(16px);border-color:rgba(27,54,38,.1)}
.mn-item.act .mn-icon{background:var(--green)}
.toast{border-radius:12px;box-shadow:0 16px 40px rgba(13,33,23,.2)}

@media(prefers-reduced-motion:no-preference){
  body.espace-vendeur .page-section.active{animation:page-arrive .42s cubic-bezier(.2,.7,.2,1) both}
  body.espace-vendeur .kpi-card,body.espace-vendeur .stat-card,body.espace-vendeur .chart-card,body.espace-vendeur .table-card,body.espace-vendeur .prod-card,body.espace-vendeur .orders-card,body.espace-vendeur .form-card,body.espace-vendeur .card{animation:surface-arrive .48s cubic-bezier(.2,.7,.2,1) both}
  body.espace-vendeur .kpi-card:nth-child(2),body.espace-vendeur .stat-card:nth-child(2){animation-delay:45ms}
  body.espace-vendeur .kpi-card:nth-child(3),body.espace-vendeur .stat-card:nth-child(3){animation-delay:90ms}
  body.espace-vendeur .kpi-card:nth-child(4),body.espace-vendeur .stat-card:nth-child(4){animation-delay:135ms}
  .sb-item:hover{transform:translateX(3px)}
  .nav-btn:hover,.nav-cart:hover,.tb-btn:hover,.tb-profile:hover{transform:translateY(-1px)}
  .prod-card:hover,.kpi-card:hover,.stat-card:hover,.chart-card:hover{transform:translateY(-3px)}
}
@keyframes page-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes surface-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Seller workspace components share a calm, lighter-weight editorial scale. */
body.espace-vendeur h1,body.espace-vendeur .page-header h1,body.espace-vendeur .ph-title,body.espace-vendeur .tb-title{font-family:var(--font-display);font-weight:400;letter-spacing:-.035em;color:#173b2a}
body.espace-vendeur .page-header h1,body.espace-vendeur h1{font-size:clamp(2rem,3.2vw,3.25rem);line-height:1.02;text-wrap:balance}
body.espace-vendeur .page-header p{max-width:56ch;line-height:1.65;color:var(--muted)}
body.espace-vendeur .kpi-card,body.espace-vendeur .stat-card,body.espace-vendeur .chart-card,body.espace-vendeur .table-card,body.espace-vendeur .prod-table-card,body.espace-vendeur .order-card,body.espace-vendeur .orders-card,body.espace-vendeur .promo-card-item,body.espace-vendeur .new-promo-card,body.espace-vendeur .form-card,body.espace-vendeur .preview-card,body.espace-vendeur .card,body.espace-vendeur .prod-card{border:1px solid rgba(38,55,42,.09)!important;border-radius:18px!important;box-shadow:0 6px 24px rgba(35,49,37,.045)}
body.espace-vendeur .tc-header,body.espace-vendeur .cc-header{border-color:rgba(38,55,42,.08)}
body.espace-vendeur .prod-row{transition:background-color .2s,transform .2s}
body.espace-vendeur .prod-row:hover{background:#f7f6ef;transform:translateX(2px)}
body.espace-vendeur .kpi-value,body.espace-vendeur .stat-value,body.espace-vendeur .stat-card strong,body.espace-vendeur .sb-badge{font-variant-numeric:tabular-nums}

/* ── Drapeau sénégalais ── */
.flag{display:flex;width:30px;height:19px;border-radius:3px;overflow:hidden;flex-shrink:0}
.flag span{flex:1}
.fg{background:#00853F}.fy{background:#FDEF42}.fr{background:#E31B23}

/* ── Toast ── */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--dark);color:#fff;padding:10px 22px;border-radius:99px;font-size:.84rem;font-weight:500;opacity:0;transition:all .28s;pointer-events:none;z-index:500;white-space:nowrap;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════════════════════════════════════
   NAVBAR HORIZONTALE — pages acheteur
   ══════════════════════════════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav-h);background:rgba(250,250,247,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1.5px solid var(--border);display:flex;align-items:center;padding:0 4vw;gap:12px}
.nav-logo{display:flex;align-items:center;gap:9px;font-family:'Newsreader',serif;font-size:1.2rem;font-weight:900;color:var(--green);flex-shrink:0;white-space:nowrap}
.nav-logo:hover{color:var(--gl)}
.nav-search{flex:1;min-width:0;max-width:520px;display:flex;align-items:center;background:#fff;border:1.5px solid var(--border);border-radius:99px;padding:0 5px 0 16px;height:42px;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
.nav-search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(27,107,58,.1)}
.nav-search input{flex:1;min-width:0;border:none;outline:none;font-size:.88rem;color:var(--text);background:transparent}
.nav-search input::placeholder{color:var(--muted)}
.nav-search-btn{flex-shrink:0;background:var(--green);color:#fff;border:none;border-radius:99px;height:32px;padding:0 14px;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background .2s;white-space:nowrap}
.nav-search-btn:hover{background:var(--gl)}
.nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
.nav-btn{display:flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:99px;font-size:.82rem;font-weight:500;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--text);transition:all .2s;white-space:nowrap;flex-shrink:0}
.nav-btn:hover{border-color:var(--green);color:var(--green);background:var(--gp)}
.nav-btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.nav-btn-primary:hover{background:var(--gl);color:#fff}
.nav-cart{position:relative;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;transition:all .2s;flex-shrink:0}
.nav-cart:hover{border-color:var(--green);background:var(--gp)}
.cart-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--dark);font-size:.58rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.nav-hamburger{display:none;flex-direction:column;gap:5px;width:38px;height:38px;border-radius:10px;border:1.5px solid var(--border);background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.nav-hamburger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:all .25s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:#fff;border-bottom:1.5px solid var(--border);padding:16px 4vw 20px;z-index:190;box-shadow:0 8px 32px rgba(0,0,0,.1);flex-direction:column;gap:12px}
.nav-drawer.open{display:flex}
.nav-drawer .nav-search{max-width:100%;width:100%}
.nav-drawer-row{display:flex;gap:8px}
.nav-drawer-row .nav-btn{flex:1;justify-content:center;height:42px}

/* ── Navigation mobile barre du bas ── */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:#fff;border-top:1.5px solid var(--border);padding:8px 0 max(10px,env(safe-area-inset-bottom))}
.mn-items{display:flex}
.mn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;cursor:pointer}
.mn-icon{width:24px;height:24px;border-radius:7px;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:background .18s}
.mn-item.act .mn-icon{background:var(--green)}
.mn-label{font-size:.62rem;color:var(--muted);font-weight:500}
.mn-item.act .mn-label{color:var(--green)}

/* ══════════════════════════════════════
   SIDEBAR — pages vendeur / admin
   ══════════════════════════════════════ */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:100;background:var(--dark);display:flex;flex-direction:column;transition:transform .3s}
.sb-logo{display:flex;align-items:center;gap:9px;padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-logo-text{font-family:'Newsreader',serif;font-size:1.1rem;font-weight:900;color:var(--green)}
.sb-shop{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-shop-row{display:flex;align-items:center;gap:10px}
.sb-avatar{width:38px;height:38px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;color:#fff;flex-shrink:0}
.sb-shop-name{font-size:.86rem;font-weight:600;color:#fff}
.sb-shop-status{font-size:.7rem;color:#4CAF50;margin-top:1px;display:flex;align-items:center;gap:4px}
.sb-status-dot{width:6px;height:6px;border-radius:50%;background:#4CAF50}
.sb-plan{display:inline-block;background:rgba(230,168,23,.2);color:var(--gold);font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:99px;margin-top:4px}
.sb-nav{flex:1;overflow-y:auto;padding:10px 0}
.sb-section-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.3);padding:14px 20px 6px}
.sb-item{display:flex;align-items:center;gap:11px;padding:10px 20px;cursor:pointer;font-size:.86rem;font-weight:500;color:rgba(255,255,255,.55);transition:all .18s;position:relative}
.sb-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.sb-item.active{background:rgba(27,107,58,.3);color:#fff}
.sb-item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);border-radius:0 2px 2px 0}
.sb-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0}
.sb-badge{margin-left:auto;background:var(--red);color:#fff;font-size:.6rem;font-weight:700;padding:2px 6px;border-radius:99px;min-width:18px;text-align:center}
.sb-badge.gold{background:var(--gold);color:var(--dark)}
.sb-bottom{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08)}
.sb-help{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.06);cursor:pointer;transition:background .18s;margin-bottom:8px}
.sb-help:hover{background:rgba(255,255,255,.1)}
.sb-help-text{font-size:.8rem;color:rgba(255,255,255,.55)}
.sb-logout{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;cursor:pointer;font-size:.8rem;color:rgba(255,255,255,.4);transition:all .18s}
.sb-logout:hover{color:var(--red);background:rgba(192,57,43,.1)}

/* Topbar vendeur */
.topbar{position:fixed;top:0;left:var(--sidebar-w);right:0;z-index:90;height:var(--topbar-h);background:rgba(250,250,247,.97);backdrop-filter:blur(16px);border-bottom:1.5px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:14px}
.tb-title{font-size:1.05rem;font-weight:600;color:var(--dark);flex-shrink:0}
.tb-search{flex:1;max-width:360px;display:flex;align-items:center;background:#fff;border:1.5px solid var(--border);border-radius:99px;padding:0 5px 0 14px;height:36px;transition:border-color .2s}
.tb-search:focus-within{border-color:var(--green)}
.tb-search input{flex:1;border:none;outline:none;font-size:.84rem;color:var(--text);background:transparent}
.tb-search input::placeholder{color:var(--muted)}
.tb-search-btn{width:28px;height:28px;border-radius:50%;background:var(--green);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;transition:background .18s}
.tb-search-btn:hover{background:var(--gl)}
.tb-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.tb-btn{position:relative;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.95rem;transition:all .18s}
.tb-btn:hover{border-color:var(--green);background:var(--gp)}
.tb-notif-badge{position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:var(--red);color:#fff;font-size:.55rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.tb-profile{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;border:1.5px solid var(--border);background:#fff;cursor:pointer;transition:all .18s}
.tb-profile:hover{border-color:var(--green);background:var(--gp)}
.tb-profile-av{width:28px;height:28px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff}
.tb-profile-name{font-size:.82rem;font-weight:500;color:var(--text)}
.hamburger-btn{display:none;width:38px;height:38px;border-radius:9px;border:1.5px solid var(--border);background:#fff;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center;flex-shrink:0}
.hamburger-btn span{display:block;width:16px;height:2px;background:var(--text);border-radius:2px}

/* ── Responsive commun ── */
@media(max-width:768px){
  .nav-search{display:none}
  .nav-btn.nav-btn-login{display:none}
  .nav-hamburger{display:flex}
  .mobile-nav{display:block}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .topbar{left:0}
  .hamburger-btn{display:flex}
}

/* ══════════════════════════════════════
   ESPACE VENDEUR — barre latérale commune
   Construite par marche-senegal-menu-vendeur.js, qui pose aussi la
   classe « espace-vendeur » sur le body. Le préfixe protège les pages
   acheteur (marché, admin), qui ont leur propre barre du même nom.
   ══════════════════════════════════════ */
body.espace-vendeur .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:95}
body.espace-vendeur .sidebar-overlay.show{display:block}
body.espace-vendeur .sb-item{text-decoration:none}

@media(max-width:960px){
  body.espace-vendeur .sidebar{transform:translateX(-100%)}
  body.espace-vendeur .sidebar.open{transform:translateX(0)}
  body.espace-vendeur .topbar{left:0}
  body.espace-vendeur .hamburger-btn{display:flex}
}

/* ═══════════════════════════════════════════
   SPATIAL GLASS — Design system transversal
   Les tokens donnent une profondeur cohérente sans rendre
   le contenu commercial transparent.
   ═══════════════════════════════════════════ */
:root{
  --space-ink:#17241f;
  --space-muted:#6f7c75;
  --space-canvas:#eef2ed;
  --space-canvas-deep:#e5ebe5;
  --space-solid:rgba(255,255,255,.9);
  --space-solid-strong:#fffefa;
  --space-glass:rgba(255,255,255,.62);
  --space-glass-strong:rgba(255,255,255,.78);
  --space-glass-dark:rgba(18,39,29,.72);
  --space-line:rgba(35,63,47,.13);
  --space-line-light:rgba(255,255,255,.62);
  --space-shadow:0 10px 28px rgba(25,48,35,.08),0 2px 8px rgba(25,48,35,.04);
  --space-shadow-float:0 22px 55px rgba(25,48,35,.14),0 5px 14px rgba(25,48,35,.06);
  --space-radius-sm:12px;
  --space-radius-md:18px;
  --space-radius-lg:26px;
  --space-radius-pill:999px;
  --space-blur:16px;
  --space-blur-heavy:28px;
  --buyer-accent:#1b6b3a;
  --buyer-accent-soft:#e8f5ec;
  --seller-accent:#e3b62d;
  --seller-accent-ink:#402f05;
}

body:has(.nav):not(.espace-vendeur){
  --accent:var(--buyer-accent);
  --accent-soft:var(--buyer-accent-soft);
  background:
    radial-gradient(circle at 12% 0%,rgba(188,211,194,.62),transparent 34rem),
    radial-gradient(circle at 92% 18%,rgba(240,216,188,.42),transparent 30rem),
    linear-gradient(145deg,var(--space-canvas),#f7f5ef 58%,#ecefe9);
  color:var(--space-ink);
}

body.espace-vendeur{
  --accent:var(--seller-accent);
  --accent-soft:#fff5cf;
  background:
    radial-gradient(circle at 86% 0%,rgba(245,203,72,.2),transparent 28rem),
    linear-gradient(145deg,#f0f3ee,#f8f7f1 58%,#e9efe9);
}

/* Level 1: navigation and secondary controls. */
body:has(.nav) .nav,
body:has(.topbar) .topbar,
body:has(.nav) .mobile-nav{
  background:var(--space-glass-strong);
  border-color:var(--space-line-light);
  box-shadow:0 8px 30px rgba(25,48,35,.07);
  backdrop-filter:blur(var(--space-blur));
  -webkit-backdrop-filter:blur(var(--space-blur));
}

body:has(.nav) .nav-search,
body:has(.topbar) .tb-search,
body:has(.nav) .nav-btn,
body:has(.nav) .nav-cart,
body:has(.topbar) .tb-btn,
body:has(.topbar) .tb-profile,
body:has(.nav) .nav-hamburger{
  background:var(--space-glass);
  border-color:var(--space-line);
  box-shadow:inset 0 1px 0 var(--space-line-light),0 4px 14px rgba(25,48,35,.04);
}

/* Level 2: solid content cards keep product information crisp. */
body:has(.nav) .prod-card,
body:has(.nav) .shop-card,
body:has(.nav) .market-card,
body:has(.nav) .order-card,
body:has(.nav) .cart-card,
body:has(.nav) .profile-card{
  background:var(--space-solid-strong);
  border-color:var(--space-line);
  border-radius:var(--space-radius-md);
  box-shadow:var(--space-shadow);
}

body:has(.nav) .prod-card:hover,
body:has(.nav) .shop-card:hover,
body:has(.nav) .market-card:hover{
  box-shadow:var(--space-shadow-float);
}

/* Level 3: floating panels, filters and dialogs. */
.modal,.modal-content,.drawer,.dropdown-menu,.filter-panel,.floating-panel,
.toast,.nav-drawer{
  background:var(--space-glass-strong);
  border:1px solid var(--space-line-light);
  box-shadow:var(--space-shadow-float);
  backdrop-filter:blur(var(--space-blur-heavy));
  -webkit-backdrop-filter:blur(var(--space-blur-heavy));
}

.modal-content,.floating-panel{border-radius:var(--space-radius-lg)}
.dropdown-menu,.filter-panel,.nav-drawer{border-radius:var(--space-radius-md)}

/* Shared controls: one visual language, predictable touch targets. */
body:has(.nav) .btn,
body:has(.topbar) .btn,
body:has(.nav) button:not(.prod-wish),
body:has(.topbar) button{
  min-height:40px;
  border-radius:var(--space-radius-pill);
}

body:has(.nav) .btn-primary,
body:has(.nav) .btn-cta,
body:has(.nav) .nav-btn-primary,
body:has(.nav) .nav-search-btn{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 24%,transparent);
}

body.espace-vendeur .btn-primary,
body.espace-vendeur .btn-add,
body.espace-vendeur .btn-create,
body.espace-vendeur .nav-btn-primary,
body.espace-vendeur .tb-search-btn{
  background:var(--seller-accent);
  border-color:var(--seller-accent);
  color:var(--seller-accent-ink);
  box-shadow:0 9px 20px rgba(227,182,45,.22);
}

body.espace-vendeur .sb-item.active{background:rgba(227,182,45,.17);color:#fff}
body.espace-vendeur .sb-item.active::before{background:var(--seller-accent)}
body.espace-vendeur .sb-plan,.espace-vendeur .sb-badge.gold{background:rgba(227,182,45,.2);color:#f5cf55}

input,select,textarea{
  border-radius:var(--space-radius-sm);
  border-color:var(--space-line);
  background:rgba(255,255,255,.72);
}

/* Keep large content areas readable while giving them spatial separation. */
.page-section,.content-section,.section-wrap,.main-content,.page-content{position:relative}
.section-wrap.bg{background:rgba(255,255,255,.24)}

@media(max-width:768px){
  body:has(.nav) .nav{padding-inline:16px}
  body:has(.nav) .nav-logo{font-size:1.18rem}
  body:has(.nav) .mobile-nav{padding-top:9px}
  .modal,.modal-content,.drawer,.filter-panel,.floating-panel{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  body:has(.nav) .prod-card,body:has(.nav) .shop-card{border-radius:var(--space-radius-sm)}
}

@media(prefers-reduced-motion:reduce){
  .modal,.modal-content,.drawer,.dropdown-menu,.filter-panel,.floating-panel,.toast{backdrop-filter:none;-webkit-backdrop-filter:none}
}

@supports not (selector(:has(*))){
  .nav,.topbar,.mobile-nav{background:var(--space-glass-strong)}
}

/* Surfaces communes rencontrées dans les écrans catalogue, panier,
   commande, profil et administration. Le contenu reste opaque ; seule la
   couche de support reçoit l'effet spatial. */
body:has(.nav) .card,
body:has(.nav) .content-card,
body:has(.nav) .info-card,
body:has(.nav) .contact-card,
body:has(.nav) .detail-panel,
body:has(.nav) .items-card,
body:has(.nav) .delivery-card,
body:has(.nav) .review-card,
body:has(.nav) .promo-card,
body:has(.nav) .chat-panel,
body:has(.nav) .form-box,
body:has(.nav) .form-card,
body:has(.nav) .preview-card,
body:has(.nav) .actions-card,
body:has(.nav) .cart-section,
body:has(.nav) .filter-tabs,
body:has(.nav) .filters-sidebar,
body:has(.nav) .prod-filters{
  background:var(--space-solid);
  border-color:var(--space-line);
  border-radius:var(--space-radius-md);
  box-shadow:var(--space-shadow);
}

body:has(.nav) .hero,
body:has(.nav) .market-hero,
body:has(.nav) .shop-hero,
body:has(.nav) .search-hero,
body:has(.nav) .cta-section{
  border-radius:var(--space-radius-lg);
  box-shadow:var(--space-shadow-float);
  overflow:hidden;
}

body:has(.nav) .filter-chip,
body:has(.nav) .region-filter,
body:has(.nav) .mode-tabs,
body:has(.nav) .markets-tabs,
body:has(.nav) .info-tab{
  border-color:var(--space-line);
  border-radius:var(--space-radius-pill);
  background:var(--space-glass);
}

body:has(.nav) .filter-chip.active,
body:has(.nav) .mode-tabs .active,
body:has(.nav) .info-tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

body.espace-vendeur .card,
body.espace-vendeur .content-card,
body.espace-vendeur .info-card,
body.espace-vendeur .contact-card,
body.espace-vendeur .form-box,
body.espace-vendeur .form-card,
body.espace-vendeur .preview-card,
body.espace-vendeur .actions-card,
body.espace-vendeur .chart-card,
body.espace-vendeur .orders-card,
body.espace-vendeur .kpi-card{
  background:var(--space-solid);
  border-color:var(--space-line);
  box-shadow:var(--space-shadow);
}

body.espace-vendeur .filter-chip.active,
body.espace-vendeur .tab.active,
body.espace-vendeur .ft-tab.active,
body.espace-vendeur .mode-tab.active{
  background:var(--seller-accent);
  border-color:var(--seller-accent);
  color:var(--seller-accent-ink);
}

@media(max-width:768px){
  body:has(.nav) .hero,body:has(.nav) .market-hero,body:has(.nav) .shop-hero,body:has(.nav) .search-hero,body:has(.nav) .cta-section{border-radius:var(--space-radius-md)}
  body:has(.nav) .card,body:has(.nav) .content-card,body:has(.nav) .form-box{border-radius:var(--space-radius-sm)}
}

/* Composition acheteur : un premier plan éditorial, puis une fiche
   produit claire. Le hero garde son fond dense pour garantir le contraste. */
body:has(.nav) .hero{
  background:
    radial-gradient(circle at 82% 12%,rgba(188,218,195,.22),transparent 22rem),
    radial-gradient(circle at 18% 100%,rgba(140,75,49,.24),transparent 24rem),
    linear-gradient(135deg,#102b20,#183e2c 58%,#214d38);
}
body:has(.nav) .hero-phone,
body:has(.nav) .hp-card{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 28px 70px rgba(2,17,10,.28),inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body:has(.nav) .hero-phone{border-radius:32px}
body:has(.nav) .hero-badge{background:rgba(227,182,45,.16);border-color:rgba(227,182,45,.38)}
body:has(.nav) .hero h1 .acc{color:#f0c85a}
body:has(.nav) .prod-img,
body:has(.nav) .pc-img{border-radius:var(--space-radius-md);overflow:hidden}
body:has(.nav) .prod-card .prod-cart-btn,
body:has(.nav) .prod-card .add-btn,
body:has(.nav) .add-cart-btn{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 7px 16px color-mix(in srgb,var(--accent) 22%,transparent)}
body:has(.nav) .prod-badge,
body:has(.nav) .pc-badge{border-radius:var(--space-radius-pill);box-shadow:0 4px 12px rgba(25,48,35,.1)}

/* Composition vendeur : workspace solide et actions jaunes hiérarchisées. */
body.espace-vendeur .main,
body.espace-vendeur .content,
body.espace-vendeur .page-content{background:transparent}
body.espace-vendeur .table-card,
body.espace-vendeur .prod-table-card,
body.espace-vendeur .order-card,
body.espace-vendeur .stat-card{
  background:var(--space-solid);
  border-color:var(--space-line);
  border-radius:var(--space-radius-md);
  box-shadow:var(--space-shadow);
}
body.espace-vendeur .ph-btn-primary,
body.espace-vendeur .sh-btn-primary,
body.espace-vendeur .save-btn,
body.espace-vendeur .publish-btn,
body.espace-vendeur .add-btn,
body.espace-vendeur .btn-save{
  background:var(--seller-accent);
  border-color:var(--seller-accent);
  color:var(--seller-accent-ink);
  box-shadow:0 9px 20px rgba(227,182,45,.2);
}
body.espace-vendeur .ph-btn-primary:hover,
body.espace-vendeur .sh-btn-primary:hover,
body.espace-vendeur .save-btn:hover,
body.espace-vendeur .publish-btn:hover{background:#f0c844;border-color:#f0c844;color:#302404}
body.espace-vendeur .kpi-icon.ki-gold,
body.espace-vendeur .stat-card:nth-child(2) .sc-icon{background:rgba(227,182,45,.18);color:#9b7612}

@media(max-width:768px){
  body:has(.nav) .hero-phone{border-radius:24px}
  body:has(.nav) .prod-img,body:has(.nav) .pc-img{border-radius:var(--space-radius-sm)}
  body.espace-vendeur .ph-btn-primary,body.espace-vendeur .sh-btn-primary,body.espace-vendeur .save-btn,body.espace-vendeur .publish-btn{min-height:44px}
}

/* ═══════════════════════════════════════════
   POLISH RESPONSIVE — cohérence finale multi-écrans
   Cette couche reste centralisée afin que les 16 pages gardent le même rythme.
   ═══════════════════════════════════════════ */
:root{
  --content-max:1380px;
  --ease-ms:cubic-bezier(.2,.72,.24,1);
}

body{
  line-height:1.5;
  font-size:clamp(14px,.18vw + 13px,16px);
  font-size-adjust:.52;
}

h1,h2,h3,h4,p{ text-wrap:pretty; }
h1,h2,h3{ line-height:1.12; }

button,.btn,a[role="button"]{ -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(216,167,43,.72);
  outline-offset:3px;
}

body:has(.nav) .nav{
  padding-inline:max(16px,calc((100vw - var(--content-max))/2));
}
body:has(.nav) .nav-logo{
  font-weight:700;
  letter-spacing:-.025em;
}
body:has(.nav) .nav-search{ margin-inline:clamp(8px,2vw,30px); }

/* Le hero reste lisible et respirant sans devenir gigantesque sur desktop. */
body:has(.nav) .hero{
  min-height:min(570px,calc(100svh - var(--nav-h) - 20px));
  max-width:var(--content-max);
  margin-inline:auto;
  padding-inline:clamp(24px,5vw,76px);
}
body:has(.nav) .hero > div:first-child{ position:relative;z-index:2;max-width:590px; }
body:has(.nav) .hero h1{ font-size:clamp(2.45rem,4.2vw,3.75rem);letter-spacing:-.03em; }
body:has(.nav) .hero-desc{ max-width:48ch; }

/* Une animation courte et commune, sans déplacer les cartes au chargement. */
@media(prefers-reduced-motion:no-preference){
  body:has(.nav) .hero > div:first-child{ animation:ms-content-in .55s var(--ease-ms) both; }
  body:has(.nav) .hero-phone{ animation:ms-phone-in .7s .08s var(--ease-ms) both; }
  body:has(.nav) .market-card,body:has(.nav) .mk-card,body:has(.nav) .prod-card,
  body:has(.nav) .shop-card,body:has(.nav) .cat-card,body:has(.nav) .rc{
    transition:transform .24s var(--ease-ms),box-shadow .24s var(--ease-ms),border-color .2s ease;
  }
}
@keyframes ms-content-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ms-phone-in{from{opacity:0;transform:translateY(18px) rotate(1deg)}to{opacity:1;transform:none}}

/* Espaces tactiles minimums sur les interfaces mobiles. */
@media(max-width:900px){
  body:has(.nav){ padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
  body:has(.nav) .mobile-nav{ padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  body:has(.nav) .mn-item{ min-height:42px; }
  body:has(.nav) .mn-label{ font-size:.68rem; }
  body:has(.nav) .hero{ min-height:clamp(440px,calc(100svh - 90px),570px); }
  body:has(.nav) .hero-right{ display:none; }
  body:has(.nav) .section-wrap{ padding-block:clamp(40px,7vw,64px); }
  body:has(.nav) .products-grid,body:has(.nav) .results-grid{ gap:clamp(10px,2.2vw,16px); }
}

@media(max-width:600px){
  body:has(.nav) .nav{ min-height:58px; }
  body:has(.nav) .nav-logo .nav-logo-text{ display:inline; font-size:1rem; }
  body:has(.nav) .nav-logo{ gap:7px; }
  body:has(.nav) .nav-actions{ gap:6px; }
  body:has(.nav) .nav-hamburger{ width:38px;height:38px; }
  body:has(.nav) .hero{
    min-height:clamp(455px,calc(100svh - 88px),560px);
    padding:clamp(34px,9vw,52px) 20px 32px;
    align-content:center;
  }
  body:has(.nav) .hero h1{ font-size:clamp(2.05rem,9.6vw,2.7rem);line-height:1.04; }
  body:has(.nav) .hero-desc{ font-size:.92rem;line-height:1.62;max-width:35ch; }
  body:has(.nav) .hero-btns{ gap:10px;margin-bottom:1.5rem; }
  body:has(.nav) .hero-btns .btn{ width:min(100%,320px);justify-content:center;min-height:46px; }
  body:has(.nav) .hero-stats{ gap:1.15rem; }
  body:has(.nav) .hstat-label{ font-size:.68rem; }
  body:has(.nav) .section-top{ align-items:flex-start; }
  body:has(.nav) .section-title{ font-size:clamp(1.55rem,7vw,2rem); }
  body:has(.nav) .prod-img,body:has(.nav) .rc-img{ height:clamp(124px,34vw,155px); }
  body:has(.nav) .prod-body,body:has(.nav) .rc-body{ padding:10px; }
  body:has(.nav) .prod-name,body:has(.nav) .rc-name{ font-size:.82rem; }
  body:has(.nav) .prod-price,body:has(.nav) .rc-price{ font-size:.9rem; }
  body:has(.nav) .search-hero{ padding:30px 20px 24px; }
  body:has(.nav) .sh-title{ font-size:clamp(1.55rem,7vw,2.1rem);line-height:1.1; }
  body:has(.nav) .sh-bar{ min-height:50px; }
  body:has(.nav) .sh-bar-btn{ height:40px;padding-inline:14px; }
}

@media(max-width:350px){
  body:has(.nav) .nav-logo .nav-logo-text{ display:none; }
  body:has(.nav) .hero h1{ font-size:1.95rem; }
  body:has(.nav) .hero-btns .btn{ padding-inline:14px; }
}

@media(prefers-reduced-motion:reduce){
  body:has(.nav) .hero > div:first-child,body:has(.nav) .hero-phone{ animation:none; }
}

/* ═══════════════════════════════════════════
   SCALE & HIERARCHY — interface plus ample
   Les écrans précédents manquaient de présence : cette couche augmente
   l'échelle utile sans casser les petits écrans.
   ═══════════════════════════════════════════ */
:root{
  --content-max:1480px;
  --space-gutter:clamp(20px,4.6vw,78px);
}

body{
  font-size:clamp(15px,.22vw + 14px,17px);
  color:#173126;
}

body:has(.nav) .nav{
  min-height:74px;
  padding-inline:var(--space-gutter);
}
body:has(.nav) .nav-logo{font-size:1.08rem;}
body:has(.nav) .nav-search{min-height:44px;}

body:has(.nav) .hero{
  min-height:min(650px,calc(100svh - 92px));
  padding-inline:clamp(30px,7vw,112px);
}
body:has(.nav) .hero h1{
  font-size:clamp(3rem,5.1vw,5.25rem);
  line-height:1.02;
  max-width:11ch;
}
body:has(.nav) .hero-desc{
  font-size:clamp(1rem,.35vw + .92rem,1.16rem);
  max-width:52ch;
}
body:has(.nav) .hero-phone{width:clamp(230px,20vw,290px);}

body:has(.nav) .section-wrap{
  padding-inline:var(--space-gutter);
}
body:has(.nav) .section-title{
  font-size:clamp(2rem,3.1vw,3rem);
  letter-spacing:-.035em;
}
body:has(.nav) .section-subtitle{font-size:1rem;}

body:has(.nav) .prod-card,
body:has(.nav) .market-card,
body:has(.nav) .mk-card,
body:has(.nav) .shop-card,
body:has(.nav) .cat-card{
  border-radius:18px;
}
body:has(.nav) .prod-body,
body:has(.nav) .rc-body{padding:clamp(14px,1.5vw,20px);}
body:has(.nav) .prod-name,
body:has(.nav) .rc-name{font-size:clamp(.95rem,.25vw + .84rem,1.12rem);}
body:has(.nav) .prod-price,
body:has(.nav) .rc-price{font-size:clamp(1rem,.3vw + .9rem,1.2rem);}

@media(max-width:900px){
  body:has(.nav) .nav{min-height:64px;padding-inline:16px;}
  body:has(.nav) .hero{min-height:clamp(480px,calc(100svh - 94px),610px);}
}

@media(max-width:600px){
  body:has(.nav) .hero{
    padding:42px 22px 36px;
    border-radius:0;
  }
  body:has(.nav) .hero h1{
    font-size:clamp(2.55rem,12vw,3.45rem);
    max-width:10ch;
  }
  body:has(.nav) .hero-desc{font-size:1rem;max-width:34ch;}
  body:has(.nav) .section-wrap{padding-inline:18px;}
  body:has(.nav) .section-title{font-size:clamp(1.8rem,9vw,2.35rem);}
}