/* ============================================================
   MAXSTORE & SERVICES — Design System
   Direction: premium retail, warm gold / deep ink, mobile-first
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  /* Palette chaude e-commerce — rouge / orange / jaune énergiques */
  --ink:#2a1206;
  --ink-2:#3a1608;
  --navy:#7a1a10;          /* ex-navy repurposé : rouge profond (footer, blocs sombres) */
  --navy-2:#e8541f;
  --blue:#e8541f;          /* accent principal repurposé en ORANGE vif (liens, en-têtes) */
  --gold:#e11d13;          /* boutons primaires : rouge promo */
  --gold-2:#7a1a10;
  --amber:#ff7a1a;         /* orange chaud */
  --yellow:#ffc61a;        /* jaune soldes */
  --teal:#89888d;
  --green:#16a34a;
  --red:#e11d13;
  --bg:#fff7f1;            /* fond crème chaud */
  --surface:#ffffff;
  --surface-2:#fff0e6;
  --text:#26160f;
  --muted:#8a6f63;
  --line:#f2ddce;
  --grad-hot:linear-gradient(135deg,#ff7a1a 0%,#e11d13 100%);
  --grad-sun:linear-gradient(135deg,#ffc61a 0%,#ff7a1a 55%,#e11d13 100%);
  --shadow:0 10px 28px rgba(120,30,10,.10);
  --shadow-2:0 18px 46px rgba(120,30,10,.18);
  --radius:18px;
  --radius-sm:12px;
  --max:1280px;
  --font:'Century Gothic','Montserrat','Avenir Next','Trebuchet MS','Segoe UI',sans-serif;
  --display:var(--font);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--text);
  line-height:1.55;
  background:var(--bg);
}
body, button, input, textarea, select{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;cursor:pointer;font-weight:800;border-radius:999px;
  padding:12px 20px;font-size:15px;transition:.18s ease;line-height:1;
  letter-spacing:.1px
}
.btn:hover{transform:translateY(-2px)}
.btn-orange{background:var(--grad-hot);color:#fff;box-shadow:0 10px 24px rgba(225,29,19,.30)}
.btn-orange:hover{filter:brightness(1.05);box-shadow:0 14px 30px rgba(225,29,19,.40)}
.btn-whatsapp{background:linear-gradient(135deg,#25d366,#128c4b);color:#fff;box-shadow:0 10px 24px rgba(18,140,75,.28)}
.btn-whatsapp:hover{filter:brightness(1.05)}
.btn-outline{background:rgba(255,255,255,.9);border:1.5px solid var(--line);color:var(--gold)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);background:#fff}
.btn-block{width:100%}
.btn-lg{padding:15px 28px;font-size:16px}

/* ---------- TOP BAR ---------- */
.topbar{
  background:var(--navy);
  color:#fff;
  font-size:13px;
  border-bottom:1px solid rgba(0,0,0,.04)
}
.topbar .container{
  display:flex;justify-content:space-between;align-items:center;
  min-height:38px;flex-wrap:wrap;gap:8px
}
.topbar .tb-left span{margin-right:16px;display:inline-flex;align-items:center;gap:6px}
.topbar .tb-right span{display:inline-flex;align-items:center;gap:6px}

/* ---------- BRAND BAR ---------- */
.brandbar{
  background:#f3f4f6;
  border-bottom:1px solid rgba(12,18,32,.06);
  color:var(--muted);
  font-size:13px
}
.brandbar .container{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:34px
}
.brandbar-link{
  color:var(--gold);
  font-weight:800;
  display:inline-flex;align-items:center;gap:6px
}
.brandbar-center{
  display:flex;align-items:center;gap:8px;font-weight:800;color:#3b4252;letter-spacing:.04em
}
.brandbar-spacer{width:120px}

/* ---------- HEADER ---------- */
.header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(12,18,32,.06);
  box-shadow:0 8px 30px rgba(12,18,32,.05)
}
.header .container{display:flex;align-items:center;gap:18px;min-height:82px}
.logo{
  display:flex;align-items:center;gap:12px;
  font-weight:800;font-size:22px;color:var(--ink);
  white-space:nowrap;letter-spacing:-.3px
}
.logo-mark{
  width:54px;height:54px;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(246,239,225,.96));
  border:1px solid rgba(12,18,32,.08);
  box-shadow:0 14px 28px rgba(12,18,32,.08)
}
.logo-mark img{width:100%;height:100%;object-fit:cover}
.logo-copy{
  display:flex;flex-direction:column;line-height:1.05
}
.logo-copy em{
  font-style:normal;color:var(--gold-2);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase
}
.search{
  flex:1;display:flex;max-width:620px;
  background:#fff;border:1px solid rgba(12,18,32,.08);
  border-radius:999px;padding:4px;box-shadow:0 12px 30px rgba(12,18,32,.05)
}
.search input{
  flex:1;border:none;background:transparent;
  padding:12px 16px;font-size:15px;outline:none;color:var(--text)
}
.search input::placeholder{color:#8a92a5}
.search button{
  background:var(--gold);color:#fff;
  border:none;border-radius:999px;padding:0 18px;cursor:pointer;font-size:17px;
  box-shadow:0 10px 20px rgba(245,114,36,.22)
}
.header-actions{display:flex;align-items:center;gap:12px}
.header-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--navy);font-weight:800;font-size:14px;
  padding:10px 12px;border-radius:999px;border:1px solid rgba(12,18,32,.06);
  background:rgba(255,255,255,.9)
}
.header-trade{
  background:linear-gradient(135deg,#fff7ed,#fef3c7);
  border-color:rgba(231,66,47,.18);
  color:var(--gold);
}
.header-link span:first-child{font-size:18px}
.cart-btn{
  position:relative;display:flex;align-items:center;gap:8px;
  background:var(--gold);color:#fff;
  border:1px solid var(--gold);cursor:pointer;
  padding:10px 16px;border-radius:999px;font-size:14px;font-weight:800;
  transition:.18s ease;box-shadow:0 10px 24px rgba(231,66,47,.25)
}
.cart-btn:hover{filter:brightness(1.06)}
.cart-btn .ic{display:grid;place-items:center;color:#fff}
.cart-btn .ic svg{display:block;stroke:#fff}
.btn-orange svg,.btn-whatsapp svg{stroke:#fff;flex:0 0 auto}
.search button svg{display:block;stroke:#fff}
.cart-count{
  position:absolute;top:-7px;right:-8px;
  background:var(--red);color:#fff;border-radius:999px;
  min-width:19px;height:19px;padding:0 5px;font-size:11px;
  display:grid;place-items:center;font-weight:900;border:2px solid #fff
}
.mobile-search{display:none;padding:10px 16px 0}
.mobile-search .js-search{
  width:100%;border:1px solid rgba(12,18,32,.08);border-radius:999px;
  background:#fff;padding:12px 16px;outline:none;box-shadow:0 12px 28px rgba(12,18,32,.05)
}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;
  background:#fff;
  color:var(--text)
}

/* ---------- MARKET HOME LAYOUT (Jumia-style) ---------- */
.market-stage{
  position:relative;
  padding:14px 0 0;
}

/* ── Homepage 3-column grid ── */
.market-home-grid{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  gap:16px;
  align-items:stretch;
  position:relative;
}

/* ── LEFT SIDEBAR ── */
.cat-sidebar{
  background:#fff;
  border:1px solid rgba(12,18,32,.06);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  z-index:20;
  position:relative;
}
.cat-sidebar-head{
  background:var(--blue);
  color:#fff;
  font-size:14px;
  font-weight:800;
  padding:12px 16px;
  letter-spacing:.02em;
  display:flex;align-items:center;gap:8px;
}
.cat-sidebar-head svg{flex:0 0 auto}
.cat-sidebar-item{
  display:grid;
  grid-template-columns:20px 1fr auto 12px;
  align-items:center;column-gap:9px;
  padding:9px 12px;color:#3a2a22;font-weight:600;font-size:13.5px;
  border-bottom:1px solid rgba(120,30,10,.05);
  cursor:pointer;transition:background .14s,color .14s;
  text-decoration:none;
}
.cat-sidebar-item.is-soon{color:#9a877c}
.cat-sidebar-item.is-soon .csi-icon{opacity:.55}
.cat-sidebar-item.is-soon .csi-label{color:#9a877c}
.cat-sidebar-item:last-child{border-bottom:none}
.cat-sidebar-item:hover,.cat-sidebar-item.is-hovered{
  background:rgba(232,84,31,.10);color:var(--gold);
}
.cat-sidebar-item .csi-icon{width:20px;text-align:center;flex:0 0 auto;color:var(--gold)}
.cat-sidebar-item.is-soon:hover{background:rgba(154,135,124,.10);color:#6d5a50}
.cat-sidebar-item .csi-label{min-width:0;line-height:1.25}
.cat-sidebar-item .csi-arrow{color:#c9b3a6;font-size:16px;justify-self:end}
.cat-sidebar-item:hover .csi-arrow,.cat-sidebar-item.is-hovered .csi-arrow{color:var(--gold)}
/* Badge « Bientôt » : compact, gris, aligné dans sa propre colonne pour éviter tout décalage */
.soon-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 7px;border-radius:999px;background:#ece5e0;color:#9a877c;
  font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;line-height:1.4;justify-self:end;
}

/* ── FLYOUT MEGA-MENU ── */
.cat-flyout{
  position:absolute;
  left:230px;
  top:0;
  width:640px;
  background:#fff;
  border:1px solid rgba(12,18,32,.08);
  border-radius:0 14px 14px 0;
  box-shadow:0 18px 48px rgba(12,18,32,.16);
  z-index:30;
  display:none;
  padding:20px 22px 20px;
  min-height:100%;
}
.cat-flyout.is-visible{display:block}
.cat-flyout-title{
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  color:var(--blue);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
}
.cat-flyout-title a{font-size:12px;color:var(--blue);text-transform:none;letter-spacing:0;font-weight:700}
.cat-flyout-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px 20px;
}
.cat-flyout-col h4{
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text);margin-bottom:9px;font-weight:900;
}
.cat-flyout-links{display:flex;flex-direction:column;gap:7px}
.cat-flyout-links a{font-size:13px;color:#374151}
.cat-flyout-links a:hover{color:var(--blue)}

/* ── HERO SLIDER (centre) ── */
.hero-slider-wrap{
  border-radius:14px;overflow:hidden;
  background:#f0f2f5;
  position:relative;
  min-height:370px;
  flex:1;
}
.hero-slider{
  display:flex;height:100%;
}
.hero-slide{
  flex:0 0 100%;
  display:none;
  position:relative;height:100%;
  min-height:370px;
}
.hero-slide.active{display:flex}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;
  position:absolute;inset:0;
}
.hero-slide-copy{
  position:relative;z-index:2;
  padding:36px 40px;display:flex;flex-direction:column;justify-content:center;
  max-width:55%;
}
.hero-slide-copy .slide-tag{
  display:inline-flex;background:var(--gold);color:#fff;
  font-size:11px;font-weight:800;padding:5px 12px;border-radius:999px;
  margin-bottom:14px;align-self:flex-start;letter-spacing:.06em;
}
.hero-slide-copy h2{
  font-size:clamp(26px,3.2vw,40px);font-weight:900;color:#fff;line-height:1.1;
  margin-bottom:10px;text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.hero-slide-copy p{color:rgba(255,255,255,.9);font-size:16px;margin-bottom:18px}
.hero-slide-copy .slide-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--navy);font-weight:800;font-size:14px;
  padding:12px 22px;border-radius:999px;align-self:flex-start;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.hero-slide-copy .slide-discount{
  background:var(--red);color:#fff;font-size:22px;font-weight:900;
  padding:8px 16px;border-radius:12px;align-self:flex-start;margin-bottom:10px;
}
.hero-slide-overlay{
  position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.06) 70%);z-index:1;
}
/* Carousel dots & arrows */
.slider-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:7px;z-index:5;
}
.slider-dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);
  border:none;cursor:pointer;transition:.18s;padding:0;
}
.slider-dot.active{background:#fff;width:22px;border-radius:4px}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.88);
  border:none;cursor:pointer;font-size:18px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18);transition:.15s;
}
.slider-arrow:hover{background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.24)}
.slider-arrow.prev{left:12px}
.slider-arrow.next{right:12px}

/* ── RIGHT INFO PANEL ── */
.hero-right{
  display:flex;flex-direction:column;gap:0;
}
.hero-info-card{
  background:#fff;border:1px solid rgba(12,18,32,.06);border-radius:12px;
  padding:13px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:0 6px 18px rgba(12,18,32,.05);
  text-decoration:none;color:var(--text);transition:box-shadow .15s;
  cursor:pointer;
}
.hero-info-card:hover{box-shadow:0 10px 28px rgba(12,18,32,.1);border-color:rgba(245,114,36,.25)}
.hi-icon{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(245,114,36,.1);color:var(--gold);font-size:20px;flex:0 0 auto;
}
.hi-text b{display:block;font-size:13px;color:var(--navy);margin-bottom:2px;font-weight:800}
.hi-text span{font-size:12px;color:var(--muted)}
.hero-promo-card{
  flex:1;border-radius:12px;overflow:hidden;position:relative;
  min-height:120px;background:linear-gradient(135deg,var(--gold),#e85d04);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
}
.hero-promo-card .hpc-badge{
  font-size:36px;font-weight:900;color:#fff;line-height:1;
}
.hero-promo-card .hpc-title{font-size:13px;color:rgba(255,255,255,.9);margin-top:4px;font-weight:700}
.hero-promo-card .hpc-sub{font-size:11px;color:rgba(255,255,255,.8)}

/* ── FLASH DEALS ── */
.market-flash{
  background:#fff;border:1px solid rgba(12,18,32,.06);box-shadow:var(--shadow);border-radius:14px;
  overflow:hidden;margin-top:14px;
}
.market-flash-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  background:var(--gold);color:#fff;padding:12px 18px;
}
.mfh-left{display:flex;align-items:center;gap:12px}
.mfh-badge{
  width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.18);display:grid;place-items:center
}
.market-flash-head h2{font-size:17px;font-weight:800}
.mfh-count{font-size:14px;font-weight:700;text-align:center}
.mfh-link{font-size:14px;font-weight:800}
.market-flash-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(168px,1fr);
  gap:12px;padding:14px;overflow-x:auto;
}

/* ── CATEGORY PAGE: 2-col grid (sidebar + content) ── */
.cat-main-content{min-width:0}
.mall-group-jumia{margin-bottom:6px}
.mgroup-label{
  font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:4px 0 2px;margin-bottom:8px;
  border-top:2px solid var(--line);padding-top:10px;
}

/* ── CATEGORY PAGE: Subcategory icon nav ── */
.subcat-icon-nav{
  display:flex;gap:10px;overflow-x:auto;padding:0 0 10px;margin:0 0 20px;
  scrollbar-width:none;
}
.subcat-icon-nav::-webkit-scrollbar{display:none}
.subcat-icon-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-decoration:none;color:var(--text);white-space:nowrap;
  min-width:72px;cursor:pointer;
}
.subcat-icon-item .sii-img{
  width:64px;height:64px;border-radius:50%;overflow:hidden;border:2px solid var(--line);
  background:#f4f6f8;display:grid;place-items:center;transition:.15s;
}
.subcat-icon-item .sii-img img{width:100%;height:100%;object-fit:cover}
.subcat-icon-item .sii-img .sii-emoji{font-size:28px}
.subcat-icon-item:hover .sii-img,.subcat-icon-item.active .sii-img{border-color:var(--blue)}
.subcat-icon-item span{font-size:12px;font-weight:700;color:var(--text);text-align:center;max-width:72px;white-space:normal;line-height:1.2}
.subcat-icon-item:hover span,.subcat-icon-item.active span{color:var(--blue)}

/* ── CATEGORY PAGE: sections with horizontal product scroll ── */
.cat-section{
  margin-bottom:28px;
  background:#fff;border:1px solid rgba(12,18,32,.05);border-radius:14px;overflow:hidden;
  box-shadow:0 6px 18px rgba(12,18,32,.06);
}
.cat-section-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:var(--blue);
}
.cat-section-head h2{font-size:17px;font-weight:800;color:#fff}
.cat-section-head a{font-size:13px;color:rgba(255,255,255,.9);font-weight:700;display:flex;align-items:center;gap:4px}
.cat-section-head a:hover{color:#fff}
.cat-product-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);
  gap:12px;padding:14px 16px;overflow-x:auto;
  scrollbar-width:none;
}
.cat-product-row::-webkit-scrollbar{display:none}
.cat-product-row .card{min-width:180px}

/* Legacy: keep market-menu etc for category page sidebar */
.market-menu,.market-side{
  background:#fff;border:1px solid rgba(12,18,32,.06);box-shadow:var(--shadow);border-radius:14px
}
.market-menu{
  padding:14px;display:flex;flex-direction:column;gap:6px;min-height:auto;
}
.market-menu-head{
  display:flex;align-items:baseline;justify-content:space-between;padding:2px 6px 10px;border-bottom:1px solid var(--line);margin-bottom:4px
}
.market-menu-head h2{font-size:16px;color:var(--navy);font-weight:800}
.market-menu-head span{font-size:12px;color:var(--muted);font-weight:700}
.market-menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 8px;border-radius:10px;color:#2f3948;font-weight:600;font-size:13.5px;
  text-decoration:none;transition:background .14s;
}
.market-menu-item.is-soon{opacity:.72}
.market-menu-item:hover,.market-menu-item.active{background:rgba(245,114,36,.1);color:var(--gold)}
.mmi-arrow{color:#9aa3b2;font-size:18px}
.market-menu-item:hover .mmi-arrow,.market-menu-item.active .mmi-arrow{color:var(--gold)}
.market-side{padding:14px;display:flex;flex-direction:column;gap:12px}
.market-panel.is-soon .market-panel-grid,
.market-panel.is-soon .market-panel-link{opacity:.9}
.market-panel-col-soon p{color:var(--muted);margin-top:8px}
.soon-list{list-style:none;display:grid;gap:8px;margin-top:14px;padding:0}
.soon-list li{
  padding:10px 12px;border-radius:12px;background:#f7f8fb;
  border:1px solid var(--line);font-weight:700;color:#475569
}

/* Kicker/badge chip */
.market-kicker{
  display:inline-flex;align-items:center;align-self:flex-start;
  background:rgba(245,114,36,.12);backdrop-filter:blur(8px);
  padding:7px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px
}
.market-help-card{
  display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px
}
.mh-icon{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(245,114,36,.12);color:var(--gold);font-size:18px;font-weight:900;flex:0 0 auto
}
.market-help-card b{display:block;color:var(--navy);font-size:14px;margin-bottom:2px}
.market-help-card p{color:var(--muted);font-size:12.5px}
.market-promo-card{
  border-radius:14px;background:#fff4eb;color:var(--text);padding:18px 16px;min-height:100px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  box-shadow:0 16px 32px rgba(0,0,0,.08)
}
.market-promo-card span{font-size:26px;font-weight:900;line-height:1.02;max-width:140px}
.market-promo-card b{font-size:16px;margin-top:8px}
.market-promo-card small{font-size:13px;opacity:.92;margin-top:6px}
.deal-card{
  position:relative;background:#fff;border:1px solid rgba(12,18,32,.06);border-radius:16px;
  box-shadow:0 10px 24px rgba(12,18,32,.06);overflow:hidden;min-width:180px
}
.deal-badge{
  position:absolute;top:10px;right:10px;z-index:2;background:rgba(255,255,255,.9);color:var(--gold);
  font-size:12px;font-weight:900;padding:4px 7px;border-radius:999px
}
.deal-media{
  display:block;aspect-ratio:1/1;background:#f7f8fb
}
.deal-media img{width:100%;height:100%;object-fit:cover}
.deal-body{padding:10px 11px 12px}
.deal-body h3{
  font-size:13px;line-height:1.35;font-weight:800;min-height:36px;margin:6px 0 10px
}
.deal-price{display:flex;flex-direction:column;gap:3px;font-size:15px;font-weight:900;color:var(--navy)}
.deal-old{font-size:12px;color:var(--muted);text-decoration:line-through;font-weight:700}
.deal-actions{display:flex;justify-content:flex-end;margin-top:8px}
.deal-actions .btn{width:34px;height:34px;padding:0;border-radius:10px}

/* ---------- TRADE FLOW ---------- */
.trade-overlay{
  position:fixed;inset:0;background:rgba(15,23,40,.58);backdrop-filter:blur(4px);
  z-index:320;opacity:0;pointer-events:none;transition:.2s ease
}
.trade-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-46%);
  width:min(760px,calc(100vw - 24px));max-height:min(88vh,920px);overflow:auto;
  background:#fff;border-radius:24px;box-shadow:0 28px 68px rgba(12,18,32,.28);
  z-index:321;opacity:0;pointer-events:none;transition:.22s ease;padding:22px
}
.trade-overlay.open,.trade-modal.open{opacity:1;pointer-events:auto}
.trade-modal.open{transform:translate(-50%,-50%)}
.trade-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:16px;border-bottom:1px solid var(--line)
}
.trade-kicker{
  display:inline-flex;padding:6px 11px;border-radius:999px;background:#eff6ff;color:var(--blue);
  font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase
}
.trade-head h3{font-size:28px;color:var(--navy);margin:10px 0 4px}
.trade-head p{color:var(--muted);max-width:520px}
.trade-close{
  width:40px;height:40px;border:none;border-radius:50%;background:#f3f4f6;cursor:pointer;font-size:18px
}
.trade-body{padding-top:18px}
.trade-step h4{font-size:24px;color:var(--navy);margin-bottom:8px}
.trade-step p{color:var(--muted);margin-bottom:18px}
.trade-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.trade-choice{
  border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff;cursor:pointer;
  text-align:left;display:flex;flex-direction:column;gap:8px;font-weight:800;color:var(--navy)
}
.trade-choice small{font-weight:600;color:var(--muted)}
.trade-choice:hover{border-color:var(--blue);box-shadow:0 12px 28px rgba(20,130,189,.12)}
.trade-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.trade-field{display:flex;flex-direction:column;gap:7px}
.trade-field-full{grid-column:1 / -1}
.trade-field label{font-size:13px;font-weight:800;color:var(--navy)}
.trade-field input,
.trade-field textarea,
.trade-field select{
  width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:13px 14px;outline:none
}
.trade-field textarea{min-height:110px;resize:vertical}
.trade-note{
  font-size:12.5px;color:var(--muted);background:#f7f8fb;border:1px dashed var(--line);
  border-radius:14px;padding:12px 14px
}
.trade-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.trade-refusal{
  background:#fff7ed;border:1px solid #fed7aa;border-radius:18px;padding:18px
}
.trade-refusal h4{color:#9a3412;margin-bottom:8px}
.trade-target-chip{
  display:inline-flex;align-items:center;gap:8px;background:#eff6ff;color:var(--navy);
  border:1px solid rgba(20,130,189,.18);border-radius:999px;padding:9px 14px;font-weight:800;margin-bottom:14px
}
.hero::after{
  content:"";
  position:absolute;inset:auto -8% -30% auto;width:42%;height:78%;
  background:rgba(245,114,36,.08);
  pointer-events:none;transform:rotate(-12deg)
}
.hero .container{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center;
  padding:52px 16px
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(38px,5vw,56px);line-height:1.02;margin-bottom:16px;
  letter-spacing:-.8px
}
.hero h1 em{
  color:var(--gold);font-style:normal;text-shadow:0 10px 24px rgba(244,183,61,.2)
}
.hero p{
  font-size:17px;opacity:.92;margin-bottom:24px;max-width:600px
}
.hero-img{
  position:relative;justify-self:end;max-width:460px
}
.hero-img img{
  border-radius:28px;
  box-shadow:0 28px 68px rgba(0,0,0,.32);
  transform:rotate(-2deg);
  border:1px solid rgba(255,255,255,.16)
}
.hero-badges{
  display:flex;gap:12px;margin-top:18px;flex-wrap:wrap
}
.hero-badges .hb{
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:10px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:7px
}

/* ---------- TRUST STRIP ---------- */
.trust{background:rgba(255,255,255,.55);border-bottom:1px solid rgba(12,18,32,.06)}
.trust .container{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px 16px
}
.trust .t{
  display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.78);
  border:1px solid rgba(12,18,32,.06);border-radius:16px;padding:14px 16px;
  box-shadow:0 14px 30px rgba(12,18,32,.05)
}
.trust .t .ti{font-size:26px}
.trust .t b{display:block;font-size:14px;color:var(--navy)}
.trust .t small{color:var(--muted);font-size:12px}

/* ---------- SECTION ---------- */
.section{padding:34px 0}
.section-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;
  flex-wrap:wrap;gap:10px
}
.section-head h2{
  font-size:24px;color:var(--navy);position:relative;padding-left:16px;font-family:var(--display)
}
.section-head h2::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:6px;
  background:var(--gold);border-radius:3px
}
.section-head a{color:var(--gold-2);font-weight:800;font-size:14px}

/* ---------- MALL CATEGORY TILES ---------- */
.mall-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mall-card{
  position:relative;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(242,246,250,.98));
  border:1px solid rgba(12,18,32,.06);
  box-shadow:var(--shadow);transition:.2s ease
}
.mall-card.is-soon{
  filter:saturate(.78);
  background:linear-gradient(180deg,#f7f8fa,#edf1f5);
}
.mall-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.mall-card-link{display:block;padding:22px 20px 20px;min-height:250px}
.mall-card-link::after{
  content:"";position:absolute;inset:auto -35% -45% auto;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,114,36,.12), transparent 70%);
}
.mall-card-visual{
  height:132px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#dbe4ee,#f8fbff);
  margin-bottom:16px;position:relative
}
.mall-card-visual::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,44,84,.08),rgba(13,44,84,.28))
}
.mall-card-visual img{
  width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01)
}
.mall-card-icon{
  width:58px;height:58px;border-radius:18px;display:grid;place-items:center;
  background:var(--gold);color:#fff;font-size:27px;
  box-shadow:0 12px 24px rgba(13,44,84,.20);
  position:relative;margin-top:-42px;border:3px solid #fff
}
.mall-card-meta{
  margin-top:16px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase
}
.mall-card h3{
  margin-top:10px;font-family:var(--display);font-size:24px;line-height:1.08;color:var(--navy)
}
.mall-card p{
  margin-top:10px;color:#334155;font-size:14px;min-height:44px;position:relative;z-index:1
}
.mall-card-samples{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  color:var(--gold);font-weight:900;font-size:12px;position:relative;z-index:1
}
.mall-card-samples::before{content:"▸";color:var(--gold-2)}
.coming-soon-panel{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;
  box-shadow:var(--shadow);display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px
}
.coming-soon-copy h2{font-size:24px;color:var(--navy);margin:14px 0 10px}
.coming-soon-copy p{color:var(--muted)}
.coming-soon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.soon-card{
  background:#f7f8fb;border:1px solid var(--line);border-radius:16px;padding:14px;
  display:flex;flex-direction:column;gap:6px
}
.soon-card strong{color:var(--navy);font-size:15px}
.soon-card span{color:var(--muted);font-size:13px}

/* ---------- MALL GROUP / EMPTY STATES ---------- */
.mall-group{margin:22px 0 34px}
.mall-group-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-left:6px solid var(--gold);padding-left:12px;margin-bottom:14px
}
.mall-group-head h2{
  font-family:var(--display);font-size:22px;color:var(--navy);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap
}
.mall-group-head h2 small{font-family:var(--font);font-size:13px;font-weight:700;color:var(--muted)}
.mall-empty-card{background:transparent;border:none;box-shadow:none}
.product-empty{background:transparent;border:none;box-shadow:none}
.empty-state{
  position:relative;
  width:100%;min-height:230px;background:rgba(255,255,255,.92);border:1px dashed rgba(12,18,32,.18);
  border-radius:22px;padding:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center
}
.empty-state__media{
  width:100%;max-width:320px;aspect-ratio:1.6/1;border-radius:18px;overflow:hidden;
  box-shadow:0 14px 28px rgba(12,18,32,.10)
}
.empty-state__media img{width:100%;height:100%;object-fit:cover;display:block}
.empty-state::before{
  content:"Rayon visuel";position:absolute;top:14px;left:14px;
  font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);background:rgba(245,114,36,.12);padding:5px 10px;border-radius:999px
}
.empty-state h3{font-family:var(--display);font-size:22px;color:var(--navy)}
.empty-state p{max-width:500px;color:var(--muted)}

/* ---------- PRODUCT GRID ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  position:relative;background:rgba(255,255,255,.92);
  border:1px solid rgba(12,18,32,.06);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow);transition:.2s ease;display:flex;flex-direction:column
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2)}
.card .badge{
  position:absolute;top:12px;left:12px;z-index:3;
  background:var(--red);color:#fff;
  font-size:11px;font-weight:900;padding:5px 10px;border-radius:999px;letter-spacing:.4px
}
.card .discount{
  position:absolute;top:12px;right:12px;z-index:3;
  background:var(--gold);color:#fff;
  font-size:12px;font-weight:900;padding:5px 9px;border-radius:999px
}
.card-img{
  aspect-ratio:1/1;background:linear-gradient(180deg,#f8f8fb,#eef2f8);
  display:grid;place-items:center;overflow:hidden
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.3s ease}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1}
.brand-tag{
  font-size:11px;color:var(--gold-2);font-weight:900;text-transform:uppercase;letter-spacing:.7px
}
.card h3{
  font-size:14.5px;font-weight:800;margin:5px 0 8px;line-height:1.34;min-height:39px
}
.card h3 a:hover{color:var(--navy)}
.stars{color:var(--gold-2);font-size:13px;margin-bottom:8px}
.stars small{color:var(--muted);margin-left:5px}
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto}
.price{font-size:19px;font-weight:900;color:var(--navy)}
.old-price{font-size:13px;color:var(--muted);text-decoration:line-through}
.card .card-actions{margin-top:12px;display:flex;gap:8px}
.card .card-actions .btn{padding:10px 12px;font-size:13.5px;flex:1}

/* ---------- BANNER CTA ---------- */
.banner{
  position:relative;overflow:hidden;
  background:#fff;
  color:var(--text);border-radius:24px;
  padding:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  box-shadow:var(--shadow-2)
}
.banner::before{
  content:"";position:absolute;inset:-30% auto auto -10%;width:240px;height:240px;border-radius:50%;
  background:rgba(245,114,36,.12);filter:blur(10px)
}
.banner h3{font-size:24px;font-family:var(--display);margin-bottom:6px}
.banner p{opacity:.92;max-width:560px}

/* ---------- PRODUCT DETAIL ---------- */
.breadcrumb{font-size:13px;color:var(--muted)}
.breadcrumb a:hover{color:var(--gold-2)}
.page-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0}
.btn-back{
  display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1px solid rgba(12,18,32,.08);color:var(--navy);
  font-weight:800;font-size:14px;border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:.18s ease;box-shadow:0 10px 24px rgba(12,18,32,.05)
}
.btn-back:hover{border-color:var(--gold);color:var(--gold-2);transform:translateX(-2px)}

.cat-hero{
  background:#fff;
  color:var(--text);border-radius:24px;padding:30px;margin-bottom:18px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center
}
.cat-hero::after{
  content:"";position:absolute;right:-36px;top:-36px;width:180px;height:180px;border-radius:50%;
  background:rgba(245,114,36,.12)
}
.cat-hero-copy{position:relative;z-index:1}
.cat-hero h1{font-size:clamp(28px,4vw,38px);margin-bottom:10px;line-height:1.12;font-family:var(--display)}
.cat-hero h1 small{font-size:14px;font-family:var(--font);font-weight:700;opacity:.85}
.cat-hero p{max-width:900px;opacity:.92}
.cat-hero-media{
  position:relative;z-index:1;border-radius:22px;overflow:hidden;min-height:220px;
  box-shadow:0 18px 36px rgba(0,0,0,.22)
}
.cat-hero-media img{width:100%;height:100%;object-fit:cover;display:block}

.subcat-nav{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 26px
}
.subcat-nav-label{font-size:13px;color:var(--muted);font-weight:800}
.subcat-chip{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  border:1px solid rgba(12,18,32,.08);background:rgba(255,255,255,.92);
  border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800;color:var(--navy);
  transition:.18s ease
}
.subcat-chip:hover,.subcat-chip.active{
  background:var(--gold);color:#fff;border-color:transparent
}
.subcat-chip b{
  background:rgba(21,41,75,.08);color:var(--navy);border-radius:999px;font-size:11px;
  padding:1px 7px;font-weight:900
}
.subcat-chip:hover b,.subcat-chip.active b{background:rgba(255,255,255,.18);color:#fff}

.subcat{scroll-margin-top:110px;margin-bottom:30px}
.subcat-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-left:6px solid var(--gold-2);padding-left:12px;margin-bottom:16px
}
.subcat-head h2{
  font-size:21px;color:var(--navy);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-family:var(--display)
}
.subcat-head h2 small{font-size:13px;font-weight:700;color:var(--muted);font-family:var(--font)}

.product{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;background:rgba(255,255,255,.94);
  border:1px solid rgba(12,18,32,.06);border-radius:24px;padding:28px;box-shadow:var(--shadow-2)
}
.gallery .main-img{
  position:relative;aspect-ratio:1/1;border:1px solid rgba(12,18,32,.08);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#f8f8fb,#eef2f8);cursor:zoom-in
}
.gallery .main-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s cubic-bezier(.2,.7,.3,1);transform-origin:center center}
.gallery .main-img.zooming{cursor:zoom-out}
.gallery .main-img.zooming img{transform:scale(2.2)}
.view-caption{
  position:absolute;left:14px;bottom:14px;z-index:2;
  background:rgba(255,255,255,.94);color:var(--gold);font-weight:800;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);box-shadow:var(--shadow);pointer-events:none
}
.zoom-hint{
  position:absolute;right:14px;top:14px;z-index:2;
  background:rgba(38,22,15,.62);color:#fff;font-size:11px;font-weight:600;
  padding:6px 11px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;backdrop-filter:blur(4px)
}
.gallery .main-img:hover .zoom-hint{opacity:1}
.gallery .main-img.zooming .zoom-hint,.gallery .main-img.zooming .view-caption{opacity:0}
.thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.thumb{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 6px 5px;
  border:2px solid rgba(12,18,32,.08);border-radius:16px;cursor:pointer;
  transition:.16s ease;background:#fff;font-family:inherit
}
.thumb img{width:66px;height:66px;object-fit:cover;border-radius:11px;display:block;background:linear-gradient(180deg,#f8f8fb,#eef2f8)}
.thumb-lb{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.thumb:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:var(--shadow)}
.thumb.active{border-color:var(--gold);background:var(--surface-2)}
.thumb.active .thumb-lb{color:var(--gold)}
.p-info h1{
  font-size:clamp(25px,3vw,34px);color:var(--navy);line-height:1.15;margin-bottom:10px;
  font-family:var(--display)
}
.p-meta{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap;
  font-size:13px;color:var(--muted)
}
.p-stock{color:var(--green);font-weight:800}
.p-price{display:flex;align-items:baseline;gap:12px;margin:14px 0;flex-wrap:wrap}
.p-price .price{font-size:32px;color:var(--navy)}
.p-price .old-price{font-size:17px}
.p-price .save{
  background:rgba(225,77,90,.12);color:var(--red);font-weight:800;font-size:13px;
  padding:5px 10px;border-radius:999px
}
.p-desc{color:#374151;margin:14px 0;font-size:15px}
.p-color{margin:14px 0;font-size:14px}
.p-color b{color:var(--navy)}
.p-actions{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap}
.p-actions .btn{flex:1;min-width:180px;padding:15px 18px}
.p-reassure{
  display:grid;gap:10px;border-top:1px solid var(--line);padding-top:18px;margin-top:8px
}
.p-reassure .r{display:flex;align-items:center;gap:10px;font-size:14px;color:#283247}
.p-reassure .r span{font-size:18px}
.specs{
  background:rgba(255,255,255,.94);border-radius:24px;box-shadow:var(--shadow);padding:26px;margin-top:24px;
  border:1px solid rgba(12,18,32,.06)
}
.specs h2{
  font-size:20px;color:var(--navy);margin-bottom:16px;padding-left:12px;border-left:6px solid var(--gold-2);
  font-family:var(--display)
}
.spec-table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:16px}
.spec-table td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:14.5px}
.spec-table td:first-child{font-weight:800;color:var(--navy);width:38%;background:#f9fafc}

/* ---------- FOOTER ---------- */
.footer{
  background:#111827;
  color:#cfd7e7;margin-top:42px;font-size:14px
}
.footer .container{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;
  padding:48px 16px 30px
}
.footer h4{color:#fff;font-size:16px;margin-bottom:16px}
.footer a{display:block;padding:5px 0;opacity:.88}
.footer a:hover{opacity:1;color:var(--gold)}
.footer .f-logo{
  font-size:24px;font-weight:900;color:#fff;margin-bottom:12px;letter-spacing:-.2px
}
.footer .f-logo span{color:var(--gold)}
.pay-title{font-size:12px;text-transform:uppercase;letter-spacing:.7px;opacity:.72;margin-top:16px}
.pay-logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pay-logo{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:5px 10px 5px 5px;
  font-size:12px;font-weight:700;color:#dfe6f2
}
.pay-logo .pl-mark{
  display:grid;place-items:center;min-width:30px;height:24px;border-radius:8px;color:#111;
  font-weight:900;font-size:11px;padding:0 6px
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;padding:16px;font-size:13px;opacity:.86
}

/* ---------- WIDGET TÉLÉCONSEILLER ---------- */
.wa-agent{
  position:fixed;bottom:22px;right:22px;z-index:300;display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:999px;padding:8px 18px 8px 8px;box-shadow:0 14px 34px rgba(12,18,32,.2);
  color:var(--navy);transition:.2s ease;max-width:320px;border:1px solid rgba(12,18,32,.06)
}
.wa-agent:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(12,18,32,.24)}
.wa-avatar{
  position:relative;width:50px;height:50px;border-radius:50%;
  background:var(--gold);
  display:grid;place-items:center;flex:0 0 auto
}
.wa-avatar .online-dot{
  position:absolute;bottom:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:var(--green);border:2.5px solid #fff;box-shadow:0 0 0 0 rgba(32,178,108,.45);
  animation:pulse 2s infinite
}
.wa-text{font-size:14px;font-weight:800;line-height:1.2;display:flex;flex-direction:column}
.wa-text small{font-size:12px;font-weight:700;color:var(--green)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(32,178,108,.45)}
  70%{box-shadow:0 0 0 10px rgba(32,178,108,0)}
  100%{box-shadow:0 0 0 0 rgba(32,178,108,0)}
}

/* ---------- DRAWER PANIER ---------- */
.cart-overlay{
  position:fixed;inset:0;background:rgba(12,18,32,.56);opacity:0;visibility:hidden;
  transition:.25s ease;z-index:400
}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:400px;max-width:92vw;background:#fff;z-index:401;
  transform:translateX(105%);transition:.3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-14px 0 34px rgba(0,0,0,.22)
}
.cart-drawer.open{transform:translateX(0)}
.cd-head{
  display:flex;justify-content:space-between;align-items:center;padding:18px 20px;
  border-bottom:1px solid var(--line)
}
.cd-head h3{font-size:18px;color:var(--navy);font-family:var(--display)}
.cd-close{
  background:#f2f4f8;border:none;width:36px;height:36px;border-radius:12px;cursor:pointer;font-size:16px
}
.cd-close:hover{background:var(--line)}
.cd-items{flex:1;overflow-y:auto;padding:14px 18px}
.cd-empty{text-align:center;color:var(--muted);padding:50px 10px;font-size:34px}
.cd-empty p{font-size:16px;color:var(--text);font-weight:800;margin:10px 0 4px}
.cd-empty span{font-size:13px}
.cd-item{
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)
}
.cd-item img{
  width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--line)
}
.cd-meta{flex:1;min-width:0}
.cd-name{font-size:13.5px;font-weight:800;line-height:1.35}
.cd-price{color:var(--gold-2);font-weight:900;font-size:14px;margin:3px 0 6px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{
  width:26px;height:26px;border:1px solid var(--line);background:#fff;border-radius:8px;
  cursor:pointer;font-size:15px;font-weight:800
}
.qty button:hover{border-color:var(--gold-2);color:var(--gold-2)}
.qty span{min-width:20px;text-align:center;font-weight:800}
.cd-rm{
  margin-left:auto;border:none!important;background:none!important;color:var(--red)!important;
  font-size:14px;cursor:pointer
}
.cd-foot{padding:18px 20px;border-top:1px solid var(--line);background:#fbfcfe}
.cd-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:16px}
.cd-total b{font-size:22px;color:var(--navy)}
.cd-foot .btn{margin-bottom:10px}

/* ---------- PAGE CHECKOUT ---------- */
.checkout-title{font-size:26px;color:var(--navy);margin:6px 0 20px;font-family:var(--display)}
.checkout{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}
.co-card{
  background:rgba(255,255,255,.94);border-radius:24px;box-shadow:var(--shadow);padding:24px;margin-bottom:20px;
  border:1px solid rgba(12,18,32,.06)
}
.co-card h2{
  font-size:18px;color:var(--navy);margin-bottom:16px;padding-left:11px;border-left:6px solid var(--gold-2);
  font-family:var(--display)
}
.co-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)
}
.co-item img{
  width:72px;height:72px;object-fit:cover;border-radius:14px;border:1px solid var(--line)
}
.co-name{font-weight:800;font-size:15px}
.co-price{color:var(--muted);font-size:13px;margin:3px 0 8px}
.co-line-total{font-weight:900;color:var(--navy);white-space:nowrap}
#orderForm label{
  display:block;font-size:13.5px;font-weight:800;color:var(--navy);margin-bottom:12px
}
#orderForm input,#orderForm textarea{
  width:100%;margin-top:7px;border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;background:#fff;outline:none;transition:.18s ease
}
#orderForm input:focus,#orderForm textarea:focus{
  border-color:rgba(244,183,61,.7);box-shadow:0 0 0 4px rgba(244,183,61,.12)
}
.co-summary{
  margin:18px 0 16px;background:#fbfcfe;border:1px solid var(--line);border-radius:18px;padding:14px 16px
}
.co-line{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.co-line span{color:var(--muted)}
.co-line b{color:var(--navy)}
.co-grand{font-size:18px;font-weight:900;padding-top:10px;border-top:1px solid var(--line);margin-top:6px}
.co-grand b{font-size:22px}
.co-note{margin-top:14px;color:var(--muted);font-size:13px}
.cart-empty{
  background:rgba(255,255,255,.92);border:1px solid rgba(12,18,32,.06);border-radius:24px;
  padding:32px;text-align:center;box-shadow:var(--shadow)
}

/* ---------- LEGAL ---------- */
.legal{
  background:rgba(255,255,255,.94);border:1px solid rgba(12,18,32,.06);border-radius:24px;
  padding:28px;box-shadow:var(--shadow)
}
.legal h1{font-size:28px;color:var(--navy);margin-bottom:10px;font-family:var(--display)}
.legal h2{font-size:18px;color:var(--navy);margin:24px 0 10px;font-family:var(--display)}
.legal p,.legal li{color:#334155}
.legal ul{padding-left:20px;margin:8px 0 10px}
.legal-note,.legal-date{color:var(--muted)}

/* ---------- TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(18px);
  background:rgba(12,18,32,.95);color:#fff;padding:12px 16px;border-radius:999px;
  box-shadow:0 14px 34px rgba(12,18,32,.25);opacity:0;visibility:hidden;transition:.22s ease;
  z-index:500;font-size:14px;font-weight:800
}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ---------- RESPONSIVE ---------- */

/* ── VIKING MEDIA SIDE BANNERS (fixed, wide screens only) ── */
.viking-side-banner{
  /* Collée au bord de l'écran, dans l'espace libre à côté du contenu (max 1280px).
     Largeur = espace libre disponible − marge ; jamais au-dessus du texte/icônes. */
  position:fixed;top:120px;width:min(200px, calc(50vw - 668px));z-index:40;
  background:#0a0a0a;border-radius:14px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  max-height:calc(100vh - 150px);overflow-y:auto;
  display:none;
}
@media(min-width:1500px){.viking-side-banner{display:block}}
.viking-side-banner.vsb-left{left:10px}
.viking-side-banner.vsb-right{right:10px}
.vsb-inner{
  padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;
  background:linear-gradient(170deg,#0f0f0f 0%,#1a1a1a 100%);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
}
.vsb-logo{
  font-size:11px;font-weight:900;letter-spacing:.15em;color:#e7422f;
  text-transform:uppercase;text-align:center;border-bottom:1px solid rgba(255,255,255,.12);
  padding-bottom:10px;width:100%;
}
.vsb-logo span{display:block;font-size:16px;letter-spacing:.05em;color:#fff;margin-bottom:2px}
.vsb-img{width:70px;height:70px;border-radius:50%;object-fit:cover;border:2px solid rgba(231,66,47,.4)}
.vsb-tagline{
  font-size:10px;color:rgba(255,255,255,.75);text-align:center;line-height:1.5;font-weight:600;
}
.vsb-services{width:100%;display:flex;flex-direction:column;gap:6px}
.vsb-service{
  display:flex;align-items:center;gap:6px;font-size:10px;color:rgba(255,255,255,.7);font-weight:600;
}
.vsb-service svg{flex:0 0 auto;color:#e7422f}
.vsb-divider{width:100%;height:1px;background:rgba(255,255,255,.1)}
.vsb-contact{font-size:10px;color:rgba(255,255,255,.6);text-align:center;line-height:1.6}
.vsb-cta{
  display:block;width:100%;background:#e7422f;color:#fff;border-radius:8px;
  padding:8px 4px;font-size:10px;font-weight:900;text-align:center;letter-spacing:.05em;
  text-decoration:none;margin-top:4px;
}
.vsb-cta:hover{background:#c73525}

/* ── VIKING AD (right panel of hero) ── */
.hero-viking-ad{
  background:#0a0a0a;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  background:linear-gradient(160deg,#0f0f0f 0%,#1c1c1c 100%);
  border:1px solid rgba(231,66,47,.2);
  box-shadow:0 18px 46px rgba(0,0,0,.28);
  padding:20px 16px;gap:14px;
}
.hva-logo-row{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:14px}
.hva-group{font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.hva-brand{font-size:18px;font-weight:900;color:#fff;letter-spacing:.04em}
.hva-brand em{color:#e7422f;font-style:normal}
.hva-pole{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase}
.hva-tagline{font-size:12px;color:rgba(255,255,255,.8);line-height:1.55;font-weight:500}
.hva-services{display:flex;flex-direction:column;gap:8px;flex:1}
.hva-svc{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:rgba(255,255,255,.75);font-weight:600}
.hva-svc svg{flex:0 0 auto;margin-top:1px;color:#e7422f}
.hva-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.hva-contact{font-size:11px;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:7px}
.hva-contact svg{flex:0 0 auto;color:#1482bd}
.hva-cta{
  background:#e7422f;color:#fff;border-radius:999px;padding:10px 14px;
  font-size:12px;font-weight:900;text-align:center;text-decoration:none;display:block;
  letter-spacing:.04em;
}
.hva-cta:hover{background:#c73525}

/* ── HEADER CONTACT ICONS ── */
.hdr-contact{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;border-radius:999px;border:1px solid rgba(12,18,32,.06);
  background:rgba(255,255,255,.9);text-decoration:none;color:var(--navy);
  font-size:12px;font-weight:700;
}
.hdr-contact svg{flex:0 0 auto}
.hdr-contact.wapp{color:#25d366;border-color:rgba(37,211,102,.2)}
.hdr-contact.wapp:hover{background:rgba(37,211,102,.06)}
.hdr-contact.phone{color:#1482bd;border-color:rgba(20,130,189,.2)}
.hdr-contact.phone:hover{background:rgba(20,130,189,.06)}

/* ── CSI-ICON SVG size fix ── */
.cat-sidebar-item .csi-icon svg{width:16px;height:16px;display:block}


@media (max-width: 1180px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .mall-grid{grid-template-columns:repeat(3,1fr)}
  .footer .container{grid-template-columns:1.2fr 1fr 1fr}
  .market-home-grid{grid-template-columns:220px minmax(0,1fr)}
  .hero-right{display:none}
  .cat-flyout{width:560px}
}

@media (max-width: 960px){
  .header .container{gap:14px}
  .search{max-width:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .mall-grid{grid-template-columns:repeat(2,1fr)}
  .trust .container{grid-template-columns:repeat(2,1fr)}
  .product,.checkout{grid-template-columns:1fr}
  .cat-hero{grid-template-columns:1fr}
  .hero .container{grid-template-columns:1fr;gap:20px;padding:40px 16px}
  .hero-img{justify-self:start;max-width:420px}
  .footer .container{grid-template-columns:1fr 1fr}
  .market-home-grid{grid-template-columns:1fr}
  .cat-sidebar{display:none}
  .cat-flyout{display:none!important}
  .hero-right{display:grid;grid-template-columns:repeat(3,1fr)}
  .cat-flyout-grid{grid-template-columns:repeat(2,1fr)}
  /* Category page: collapse to 1 col on tablet */
  .market-stage [style*="grid-template-columns:220px"]{grid-template-columns:1fr!important}
  .coming-soon-panel,.trade-form{grid-template-columns:1fr}
}

@media (max-width: 768px){
  .topbar .tb-left,.topbar .tb-right{display:flex;flex-direction:column;gap:3px}
  .header .container{min-height:74px}
  .search{display:none}
  .mobile-search{display:block}
  .brandbar .container{justify-content:center}
  .brandbar-link,.brandbar-spacer{display:none}
  .logo{font-size:20px}
  .logo-mark{width:48px;height:48px}
  .hero h1{font-size:clamp(32px,10vw,46px)}
  .section{padding:28px 0}
  .banner,.cat-hero,.product,.specs,.legal,.co-card{border-radius:16px}
  .card .card-actions,.p-actions{gap:10px}
  .p-actions .btn{min-width:0}
  .wa-agent{right:14px;left:14px;bottom:14px;max-width:none;justify-content:center}
  .cart-drawer{width:min(420px,100vw)}
  .header-link span:last-child{display:none}
  .market-flash-head{grid-template-columns:1fr;justify-items:start;text-align:left}
  .mfh-count,.mfh-link{justify-self:start}
  .hero-right{grid-template-columns:1fr 1fr;display:grid}
  .hero-promo-card{display:none}
  .market-menu{min-height:auto}
  .market-menu-item{padding:8px 6px}
  .trade-head h3{font-size:24px}
  .trade-choices{grid-template-columns:1fr}
}

@media (max-width: 620px){
  .grid{grid-template-columns:1fr}
  .mall-grid{grid-template-columns:1fr}
  .trust .container{grid-template-columns:1fr}
  .footer .container{grid-template-columns:1fr}
  .thumb img{width:58px;height:58px}
  .card h3{min-height:auto}
  .section-head h2,.cat-hero h1,.checkout-title,.legal h1{padding-left:0}
  .section-head h2::before{display:none}
  .subcat-head{padding-left:0;border-left:none}
  .subcat-head h2{font-size:19px}
  .hero-right{grid-template-columns:1fr;display:flex;flex-direction:column}
  .hero-slider-wrap{min-height:240px}
  .hero-slide{min-height:240px}
  .hero-slide-copy{padding:22px 22px;max-width:70%}
  .hero-slide-copy h2{font-size:20px}
  .cat-section-head h2{font-size:15px}
  .trade-modal{padding:18px}
}

/* hide contact labels on medium screens */
@media(max-width:1180px){.hdr-contact-label{display:none}}
/* hero-right full height match */
.hero-right{display:flex;flex-direction:column}
.hero-viking-ad{flex:1}


/* ── PLACEHOLDERS PUBLICITAIRES (remplacez le lien + l'image dans le code) ── */
.ph-box{
  display:flex;align-items:center;gap:14px;
  margin:14px 0 18px;padding:14px 18px;
  border:2px dashed rgba(231,66,47,.45);border-radius:14px;
  background:repeating-linear-gradient(45deg,rgba(231,66,47,.04),rgba(231,66,47,.04) 12px,transparent 12px,transparent 24px);
  color:var(--muted);cursor:default;transition:.18s ease
}
.ph-box:hover{border-color:var(--gold);background:rgba(231,66,47,.06)}
.ph-box .ph-copy{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.ph-box .ph-copy b{color:var(--text);font-size:14px}
.ph-box .ph-copy small{font-size:12px}
.ph-badge{
  flex:0 0 auto;display:grid;place-items:center;
  width:44px;height:30px;border-radius:8px;
  background:var(--gold);color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em
}
.vsb-slot{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 8px;border:1.5px dashed rgba(255,255,255,.35);border-radius:10px;
  color:rgba(255,255,255,.75);font-size:10.5px;font-weight:700;text-align:center;line-height:1.4;
  transition:.18s ease
}
.vsb-slot:hover{border-color:#e7422f;color:#fff}
.vsb-slot small{color:rgba(255,255,255,.45);font-weight:600}
.vsb-slot img{width:100%;border-radius:8px}
.vsb-service{display:flex;align-items:center;gap:6px;font-size:10px;color:rgba(255,255,255,.7);font-weight:600}
.hva-svc{font-size:11.5px;color:rgba(255,255,255,.75);font-weight:600}

/* ── Lien "Voir la page sous-catégorie" dans les rayons ── */
.subcat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.subcat-head h2 a{color:inherit}
.subcat-head h2 a:hover{color:var(--gold)}
.subcat-more{font-size:13px;font-weight:800;color:var(--blue);white-space:nowrap}
.subcat-more:hover{color:var(--gold)}
.subcat-chip.active{background:var(--gold);color:#fff;border-color:var(--gold)}

@media(max-width:768px){
  .ph-box{padding:10px 12px}
  .ph-box .ph-copy small{display:none}
}

/* ── PAGES SOUS-CATÉGORIES : héros coloré par univers + tuiles visuelles (façon Jumia) ── */
.leaf-hero{
  --lh1:#1482bd;--lh2:#0d2c54;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:0;
  border-radius:var(--radius);overflow:hidden;margin:6px 0 18px;
  background:linear-gradient(120deg,var(--lh2) 0%,var(--lh1) 78%);
  color:#fff;box-shadow:var(--shadow-2)
}
.leaf-hero-copy{padding:34px 34px 30px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.leaf-kicker{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  padding:6px 12px;border-radius:999px
}
.leaf-hero h1{font-size:clamp(28px,4vw,40px);line-height:1.08;font-family:var(--display)}
.leaf-sub{
  display:inline-block;align-self:flex-start;font-weight:900;font-size:14px;
  background:#fff;color:var(--lh2);padding:6px 14px;border-radius:999px
}
.leaf-hero-copy p{opacity:.92;max-width:560px}
.leaf-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn-light{background:#fff;color:var(--lh2)}
.btn-light:hover{filter:brightness(.96)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.leaf-hero-media{position:relative;min-height:240px}
.leaf-hero-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--lh1) 0%,transparent 32%)
}
.leaf-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.leaf-tiles{
  display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px;margin-bottom:10px;
  scrollbar-width:thin
}
.leaf-tile{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  width:96px;text-align:center;font-size:12px;font-weight:700;color:var(--text);
  transition:.18s ease
}
.leaf-tile-img{
  width:76px;height:76px;border-radius:50%;overflow:hidden;display:block;
  border:2.5px solid transparent;box-shadow:var(--shadow);background:#fff;
  transition:.18s ease
}
.leaf-tile-img img{width:100%;height:100%;object-fit:cover}
.leaf-tile:hover .leaf-tile-img{border-color:var(--gold);transform:translateY(-2px)}
.leaf-tile.active .leaf-tile-img{border-color:var(--gold)}
.leaf-tile.active span:last-child{color:var(--gold)}

@media (max-width: 860px){
  .leaf-hero{grid-template-columns:1fr}
  .leaf-hero-media{min-height:190px;order:-1}
  .leaf-hero-media::before{background:linear-gradient(0deg,var(--lh1) 0%,transparent 40%);}
  .leaf-hero-copy{padding:22px 20px 24px}
}

/* ============================================================
   REDESIGN CHALEUREUX + PUBS LATÉRALES + PARCOURS TROC
   (bloc ajouté — surcharge les styles précédents)
   ============================================================ */

/* ---- En-tête sidebar catégories : dégradé chaud ---- */
.cat-sidebar-head{background:var(--grad-hot)!important}
.cart-btn,.search button{background:var(--grad-hot)}
.header-trade{background:linear-gradient(135deg,#fff1e6,#ffe1c2);border-color:rgba(225,29,19,.20);color:var(--gold)}
.header-trade .ht-ic{display:inline-flex}
.header-trade:hover{background:linear-gradient(135deg,#ffe6d2,#ffd3a8)}

/* ---- Vibrance générale : titres de section avec barre chaude ---- */
.section-head h2{position:relative}
.section-head h2::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:6px;height:1.1em;border-radius:6px;background:var(--grad-hot);
}
.mall-card,.card,.deal-card{transition:transform .2s ease,box-shadow .2s ease}
.mall-card:hover,.card:hover,.deal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.badge,.discount,.deal-badge{background:var(--grad-sun)!important;color:#3a1200!important}
.mfh-badge,.market-promo-card b{color:#fff}

/* ============ BANNIÈRES PUBLICITAIRES LATÉRALES (drop-in GIF) ============ */
/* Placées dans les gouttières, jamais au-dessus du contenu (max 1280px centré). */
.side-col{
  position:fixed;top:50%;transform:translateY(-50%);z-index:60;display:none;
  width:clamp(96px, calc((100vw - 1300px)/2 - 20px), 300px);
}
.side-col-gauche{left:16px}
.side-col-droite{right:16px}
.side-col-link{
  display:block;border-radius:14px;overflow:hidden;background:#0c0c0c;
  box-shadow:0 18px 50px rgba(120,30,10,.30);border:1px solid rgba(0,0,0,.10);
  transition:transform .2s ease,box-shadow .2s ease;
}
.side-col-link:hover{transform:translateY(-3px);box-shadow:0 26px 60px rgba(120,30,10,.42)}
.side-col-img{width:100%;height:auto;aspect-ratio:730/2000;object-fit:cover;display:block}
.side-col-tag{
  display:block;text-align:center;font-size:9px;letter-spacing:.16em;
  color:#c3ab9d;margin-top:7px;font-weight:800;
}
@media(min-width:1500px){.side-col{display:block}}
/* Ancienne bannière Viking désactivée */
.viking-side-banner{display:none!important}

/* ================== PAGES PARCOURS TROC ================== */
.troc-page{padding:22px 0 60px;background:
  radial-gradient(1200px 400px at 80% -50px, rgba(255,122,26,.10), transparent 60%),
  radial-gradient(900px 380px at -10% 0, rgba(225,29,19,.08), transparent 55%);}
.troc-breadcrumb{font-size:13px;color:var(--muted);margin:4px 0 18px}
.troc-breadcrumb a{color:var(--gold);font-weight:700}
.troc-breadcrumb span{color:#c9b3a6;margin:0 2px}
.troc-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.10em;
  text-transform:uppercase;color:var(--gold);background:var(--surface-2);
  padding:6px 12px;border-radius:999px;margin-bottom:12px}
.troc-kicker-light{background:rgba(255,255,255,.16);color:#fff}

.troc-hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;
  background:linear-gradient(135deg,#7a1a10 0%,#e11d13 55%,#ff7a1a 100%);
  color:#fff;border-radius:24px;padding:44px 40px;box-shadow:var(--shadow-2);
  overflow:hidden;margin-bottom:28px;
}
.troc-hero-compact{padding:34px 40px}
.troc-hero-copy h1{font-size:clamp(26px,3.4vw,42px);line-height:1.1;margin-bottom:14px;letter-spacing:-.5px}
.troc-hero-copy p{font-size:16px;color:rgba(255,255,255,.92);max-width:56ch;margin-bottom:22px}
.troc-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.troc-hero .btn-outline{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.troc-hero .btn-outline:hover{background:#fff;color:var(--gold)}
.troc-hero-badges{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;font-weight:700;color:rgba(255,255,255,.95)}
.troc-hero-badges span{background:rgba(255,255,255,.14);padding:7px 12px;border-radius:999px}
.troc-hero-visual img{border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.28);width:100%;height:100%;object-fit:cover;max-height:340px}

.troc-section{margin:38px 0}
.troc-section-head{text-align:center;max-width:720px;margin:0 auto 26px}
.troc-section-head h2{font-size:clamp(22px,2.6vw,32px);color:var(--ink);margin-bottom:8px}
.troc-section-head p{color:var(--muted)}

.troc-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.troc-trust-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:22px 18px;box-shadow:var(--shadow);transition:transform .2s}
.troc-trust-card:hover{transform:translateY(-4px)}
.troc-trust-card .tt-ic{font-size:30px;display:block;margin-bottom:10px}
.troc-trust-card h3{font-size:16px;color:var(--ink);margin-bottom:6px}
.troc-trust-card p{font-size:13.5px;color:var(--muted);line-height:1.5}

.troc-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.troc-step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 18px;
  box-shadow:var(--shadow);position:relative}
.troc-step-num{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--grad-hot);color:#fff;font-weight:900;font-size:19px;margin-bottom:14px;box-shadow:0 8px 18px rgba(225,29,19,.28)}
.troc-step h3{font-size:15.5px;color:var(--ink);margin-bottom:6px;line-height:1.25}
.troc-step p{font-size:13.5px;color:var(--muted);line-height:1.5}

.troc-path-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.troc-path-card,.troc-alt-card{display:block;background:var(--surface);border:1.5px solid var(--line);
  border-radius:20px;padding:28px 26px;box-shadow:var(--shadow);transition:transform .2s,border-color .2s,box-shadow .2s}
.troc-path-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow-2)}
.troc-path-ic{font-size:34px;display:block;margin-bottom:12px}
.troc-path-card h3,.troc-alt-card h3{font-size:20px;color:var(--ink);margin-bottom:8px}
.troc-path-card p,.troc-alt-card p{color:var(--muted);margin-bottom:14px;line-height:1.55}
.troc-path-link{font-weight:800;color:var(--gold)}
.troc-path-yes{border-top:5px solid var(--green)}
.troc-path-no{border-top:5px solid var(--amber)}
.troc-alt-card{border-top:5px solid var(--gold)}

.troc-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.troc-check{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow)}
.troc-check b{display:block;color:var(--green);font-size:15px;margin-bottom:4px}
.troc-check span{color:var(--muted);font-size:13.5px}

.troc-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.troc-faq-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 18px;box-shadow:var(--shadow)}
.troc-faq-item summary{cursor:pointer;font-weight:800;color:var(--ink);padding:14px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.troc-faq-item summary::-webkit-details-marker{display:none}
.troc-faq-item summary::after{content:"＋";color:var(--gold);font-size:20px;font-weight:700}
.troc-faq-item[open] summary::after{content:"－"}
.troc-faq-item p{color:var(--muted);padding:0 0 16px;line-height:1.6}

.troc-cta-band,.troc-info-band{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,#2a1206,#7a1a10);color:#fff;border-radius:20px;padding:30px 34px;box-shadow:var(--shadow-2)}
.troc-info-band{background:var(--surface-2);color:var(--ink)}
.troc-cta-band h2,.troc-info-band h3{font-size:23px;margin-bottom:4px}
.troc-cta-band p{color:rgba(255,255,255,.9)}
.troc-info-band p{color:var(--muted);max-width:60ch}

/* ---- Formulaire de troc (page dédiée) ---- */
.troc-form-hero{background:linear-gradient(135deg,#7a1a10,#e11d13);color:#fff;border-radius:22px;
  padding:34px 34px;margin-bottom:24px;box-shadow:var(--shadow-2)}
.troc-form-hero h1{font-size:clamp(24px,3vw,36px);margin-bottom:10px}
.troc-form-hero p{color:rgba(255,255,255,.92);max-width:70ch}
.troc-form-hero strong{color:var(--yellow)}
.troc-form-wrap{display:grid;grid-template-columns:1.6fr .9fr;gap:22px;align-items:start}
.troc-form-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
.troc-form-reminder{background:#fff6ea;border:1px solid #ffd9a8;color:#7a4a10;border-radius:12px;
  padding:12px 16px;font-size:13.5px;margin-bottom:20px}
.troc-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.troc-field{display:flex;flex-direction:column;gap:6px}
.troc-field-full{grid-column:1/-1}
.troc-field label{font-size:12.5px;font-weight:800;color:var(--ink)}
.troc-field input,.troc-field select,.troc-field textarea{
  border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14px;background:#fff;color:var(--text);
  transition:border-color .15s,box-shadow .15s}
.troc-field input:focus,.troc-field select:focus,.troc-field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(225,29,19,.12)}
.troc-field textarea{min-height:88px;resize:vertical}
.troc-note{font-size:12.5px;color:var(--muted);background:var(--surface-2);border-radius:10px;padding:12px 14px;margin:16px 0}
.troc-form-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.troc-form-aside{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow);position:sticky;top:100px}
.troc-form-aside h3{font-size:17px;color:var(--ink);margin-bottom:8px}
.troc-form-aside p{color:var(--muted);font-size:13.5px;margin-bottom:14px}
.troc-form-aside ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.troc-form-aside li{font-size:13px;color:var(--text);line-height:1.5}

@media(max-width:900px){
  .troc-hero,.troc-form-wrap{grid-template-columns:1fr}
  .troc-hero-visual{order:-1}
  .troc-trust-grid,.troc-steps{grid-template-columns:repeat(2,1fr)}
  .troc-path-grid,.troc-check-grid,.troc-form{grid-template-columns:1fr}
  .troc-form-aside{position:static}
}
@media(max-width:560px){
  .troc-trust-grid,.troc-steps{grid-template-columns:1fr}
  .troc-hero,.troc-form-hero{padding:26px 20px}
}

/* ---- Panneau droit accueil : cartes services MAXSTORE ---- */
.home-promo{display:flex;flex-direction:column;gap:12px;height:100%}
.home-promo-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:18px 16px;box-shadow:var(--shadow);
  flex:1;justify-content:center;transition:transform .2s,box-shadow .2s}
.home-promo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.home-promo-card h3{font-size:15px;color:var(--ink);line-height:1.2}
.home-promo-card p{font-size:12.5px;color:var(--muted);line-height:1.45}
.home-promo-card .hp-ic{display:inline-flex;width:40px;height:40px;border-radius:12px;
  align-items:center;justify-content:center;background:var(--grad-hot);color:#fff;box-shadow:0 8px 18px rgba(225,29,19,.25)}
.home-promo-card .hp-ic svg{width:22px;height:22px}
.home-promo-card .hp-emoji{font-size:26px}
.hp-link{font-size:12.5px;font-weight:800;color:var(--gold);margin-top:2px}
.hp-troc{background:linear-gradient(135deg,#fff3ea,#ffe6d4);border-color:rgba(225,29,19,.16)}
.hp-wa{background:linear-gradient(135deg,#eafaf0,#d8f5e2);border-color:rgba(18,140,75,.18)}
.hp-wa .hp-link{color:#0f8a4a}

/* ============================================================
   BATCH 2 — logos paiement, icônes vecto, pubs horizontales,
   cadenas catégories, contact, téléconseiller minimaliste
   ============================================================ */

/* ---- Icônes vectorielles réassurance ---- */
.p-reassure .r-ic,.co-reassure .r-ic{display:inline-flex;width:26px;height:26px;flex:0 0 auto;
  align-items:center;justify-content:center;border-radius:8px;background:var(--surface-2);color:var(--gold)}
.p-reassure .r-ic svg,.co-reassure .r-ic svg{width:17px;height:17px}
.p-reassure .r span.r-ic{font-size:0}

/* ---- Logos moyens de paiement ---- */
.pay-methods{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pay-chip{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 8px;
  background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 2px 6px rgba(120,30,10,.06)}
.pay-chip img{height:22px;width:auto;object-fit:contain;display:block}
.pay-chip-cash{font-size:12px;font-weight:800;color:var(--green);background:#eafaf0;border-color:#bfeccd}
.p-pay{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.p-pay-label,.pay-title{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px;
  color:var(--muted);font-weight:800;margin-bottom:4px}
.co-pay{margin-top:12px}
.co-reassure{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:13.5px;color:var(--text);font-weight:600}
.co-reassure span{display:inline-flex;align-items:center;gap:7px}

/* ---- Bannières pub horizontales (1200×140, drop-in) ---- */
.hstrip{margin:26px 0}
.hstrip-link{position:relative;display:block;border-radius:16px;overflow:hidden;background:#140a07;
  box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.hstrip-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.hstrip-img{width:100%;height:auto;aspect-ratio:1200/140;object-fit:cover;display:block}
.hstrip-tag{position:absolute;top:8px;right:10px;font-size:8.5px;letter-spacing:.14em;font-weight:800;
  color:rgba(255,255,255,.7);background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px}

/* ---- Footer : catégories bientôt grisées + cadenas ---- */
.footer a.foot-cat{display:flex;align-items:center;gap:7px}
.footer a.foot-cat.is-soon{opacity:.5;color:#9aa3b2}
.footer a.foot-cat.is-soon:hover{color:#b9c1cf}
.foot-lock{display:inline-flex;width:14px;height:14px;opacity:.8}
.foot-lock svg{width:14px;height:14px}
.foot-soon{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(255,255,255,.10);color:#aeb6c4;padding:1px 6px;border-radius:999px;margin-left:auto}
/* Footer : contact avec icônes vectorielles */
.footer a.foot-contact{display:flex;align-items:center;gap:9px}
.fc-ic{display:inline-flex;width:24px;height:24px;flex:0 0 auto;align-items:center;justify-content:center;
  border-radius:7px;background:rgba(255,255,255,.08);color:#fff}
.fc-ic svg{width:15px;height:15px}

/* ---- Sidebar catégories verrouillées ---- */
.cat-sidebar-item .csi-lock{display:inline-flex;width:16px;height:16px;justify-self:end;color:#b7a89f}
.cat-sidebar-item .csi-lock svg{width:15px;height:15px}
.cat-sidebar-item.is-soon{background:#f6f0ec}
.cat-sidebar-item.is-soon .csi-icon{color:#b7a89f}

/* ---- Téléconseiller flottant minimaliste ---- */
.wa-agent{padding:7px 16px 7px 7px;gap:10px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(120,30,10,.18)}
.wa-avatar{width:46px;height:46px;background:transparent;overflow:visible}
.wa-avatar img{width:46px;height:46px;border-radius:13px;object-fit:cover;display:block}
.wa-text{font-size:13.5px;color:var(--ink)}
.wa-text small{font-size:11.5px;color:#128c4b}
@media(max-width:600px){
  .wa-agent .wa-text{display:none}
  .wa-agent{padding:7px;border-radius:50%}
}

/* ---- Menu catégories (pages catégorie) : bientôt verrouillé/grisé ---- */
.market-menu-item.is-soon{opacity:1;color:#a9988e;background:#f6f0ec}
.market-menu-item.is-soon .mmi-label{color:#a9988e}
.mmi-lock{display:inline-flex;width:15px;height:15px;color:#bcaea4}
.mmi-lock svg{width:15px;height:15px}
.subcat-chip{transition:transform .15s,border-color .15s,box-shadow .15s}
.subcat-chip:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 8px 18px rgba(225,29,19,.14)}
.subcat-chip b{color:var(--gold)}

/* ---- Cartes produit : accent chaud cohérent partout ---- */
.card .price,.deal-price,.p-price .price{color:var(--gold)}
.brand-tag{background:var(--surface-2);color:var(--gold)}
.market-panel-col-soon{opacity:.85}

/* ---- Bannière contact accueil : dégradé chaud ---- */
.banner{background:var(--grad-hot)!important;color:#fff}
.banner h3{color:#fff}.banner p{color:rgba(255,255,255,.92)}

/* ============================================================
   BATCH 3 — page « Toutes les catégories » + parcours catégorie illustré
   ============================================================ */

/* ---- Sidebar head devient un lien cliquable ---- */
a.cat-sidebar-head{text-decoration:none}
a.cat-sidebar-head:hover{filter:brightness(1.05)}

/* ---- Hero catégorie (chaleureux) ---- */
.cat-hero{background:linear-gradient(135deg,#fff3ea 0%,#ffe7d6 100%);border:1px solid var(--line)}
.cat-hero::after{background:rgba(225,29,19,.10)}
.cat-hero-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--grad-hot);padding:5px 12px;border-radius:999px;margin-bottom:12px}
.cat-hero.is-soon .cat-hero-kicker{background:#b7a89f}
.cat-hero h1{color:var(--ink)}
.cat-hero-stats{display:flex;gap:10px;margin-top:14px}
.cat-hero-stats span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:13px;font-weight:700;color:var(--gold)}

/* ---- Grille des groupes / sous-catégories ---- */
.grp-section{margin:26px 0}
.grp-section-head{margin-bottom:16px}
.grp-section-head h2{font-size:clamp(20px,2.4vw,26px);color:var(--ink)}
.grp-section-head p{color:var(--muted);font-size:14px}
.grp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.grp-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;text-decoration:none}
.grp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--gold)}
.grp-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#f3e7de}
.grp-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.grp-card:hover .grp-media img{transform:scale(1.05)}
.grp-lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(30,15,8,.42);color:#fff}
.grp-lock svg{width:34px;height:34px}
.grp-body{padding:14px 16px 16px}
.grp-body h3{font-size:16.5px;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.grp-body h3 span{font-size:12px;font-weight:800;color:var(--gold);background:var(--surface-2);border-radius:999px;padding:2px 9px}
.grp-chips{display:flex;flex-wrap:wrap;gap:6px}
.grp-chip{font-size:12px;font-weight:700;color:var(--text);background:var(--surface-2);border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;transition:background .15s,color .15s}
.grp-chip:hover{background:var(--grad-hot);color:#fff;border-color:transparent}
.grp-chip-more{color:var(--gold)}
.grp-card.is-soon{opacity:.92}
.grp-card.is-soon .grp-body h3 span{color:#9a877c;background:#efe7e1}
.grp-soon-list{font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---- CTA « bientôt » catégorie ---- */
.cat-soon-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,#2a1206,#7a1a10);color:#fff;border-radius:20px;padding:28px 32px;margin:24px 0}
.cat-soon-cta h2{font-size:22px;margin:8px 0 4px}
.cat-soon-cta p{color:rgba(255,255,255,.88);max-width:60ch}
.cat-soon-cta .soon-pill{background:rgba(255,255,255,.16);color:#fff;display:inline-flex;align-items:center;gap:6px}
.cat-soon-cta .soon-pill svg{width:13px;height:13px}

/* ---- Page « Toutes les catégories » ---- */
.allcat-page{padding:22px 0 60px;background:
  radial-gradient(1000px 360px at 85% -60px, rgba(255,122,26,.10), transparent 60%),
  radial-gradient(800px 340px at -10% 0, rgba(225,29,19,.07), transparent 55%)}
.allcat-hero{background:linear-gradient(135deg,#7a1a10,#e11d13 60%,#ff7a1a);color:#fff;border-radius:24px;
  padding:40px 36px;margin:6px 0 26px;box-shadow:var(--shadow-2)}
.allcat-hero h1{font-size:clamp(28px,3.6vw,44px);margin-bottom:10px}
.allcat-hero p{color:rgba(255,255,255,.92);max-width:70ch}
.allcat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.allcat-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;text-decoration:none}
.allcat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--gold)}
.allcat-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f3e7de}
.allcat-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.allcat-card:hover .allcat-media img{transform:scale(1.06)}
.allcat-card.is-soon .allcat-media img{filter:grayscale(.55) brightness(.94)}
.allcat-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.allcat-badge svg{width:12px;height:12px}
.allcat-live{background:var(--green);color:#fff}
.allcat-soon{background:rgba(30,15,8,.72);color:#fff}
.allcat-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.allcat-body h2{font-size:19px;color:var(--ink)}
.allcat-groups{font-size:13px;color:var(--muted);flex:1}
.allcat-meta{display:flex;gap:8px}
.allcat-meta span{font-size:11.5px;font-weight:700;color:var(--gold);background:var(--surface-2);border-radius:999px;padding:3px 9px}
.allcat-cta{font-size:13.5px;font-weight:800;color:var(--gold);margin-top:2px}
.allcat-card.is-soon .allcat-cta{color:#9a877c}
@media(max-width:560px){.allcat-hero,.cat-hero{padding:24px 18px}.cat-hero{grid-template-columns:1fr}}

/* ============================================================
   BATCH 4 — RESPONSIVE : hamburger + menu mobile catégories + recherche mobile
   ============================================================ */

/* Hamburger (masqué sur desktop) */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);border-radius:12px;
  background:#fff;cursor:pointer;padding:0 11px}
.hamburger span{display:block;height:2.5px;width:100%;background:var(--gold);border-radius:3px;transition:.25s ease}
.hamburger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Overlay + drawer */
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(20,10,6,.5);z-index:400;opacity:0;
  visibility:hidden;transition:opacity .25s}
.mobile-menu-overlay.open{opacity:1;visibility:visible}
.mobile-menu{position:fixed;top:0;left:0;height:100%;width:min(340px,86vw);z-index:401;
  background:#fff;box-shadow:0 0 60px rgba(20,10,6,.35);transform:translateX(-100%);
  transition:transform .28s ease;display:flex;flex-direction:column;overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  background:var(--grad-hot);color:#fff;font-weight:800;position:sticky;top:0;z-index:2}
.mm-close{background:rgba(255,255,255,.2);border:none;color:#fff;width:32px;height:32px;border-radius:9px;
  font-size:16px;cursor:pointer}
.mm-all{display:block;padding:13px 18px;font-weight:800;color:var(--gold);background:var(--surface-2);
  border-bottom:1px solid var(--line)}
.mm-cats{display:flex;flex-direction:column}
.mm-cat{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:10px;
  padding:13px 18px;border-bottom:1px solid rgba(120,30,10,.05);color:#3a2a22;font-weight:600;font-size:14.5px}
.mm-cat .mm-ic{color:var(--gold);display:inline-flex}
.mm-cat .mm-ic svg{width:19px;height:19px}
.mm-cat:hover,.mm-cat:active{background:rgba(232,84,31,.08)}
.mm-cat.is-soon{color:#9a877c}
.mm-cat.is-soon .mm-ic{color:#b7a89f;opacity:.7}
.mm-arrow{color:#c9b3a6;font-size:18px}
.mm-lock{display:inline-flex;color:#b7a89f}.mm-lock svg{width:16px;height:16px}
.mm-badge{font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:#ece5e0;color:#9a877c;padding:2px 7px;border-radius:999px}
.mm-extra{margin-top:auto;padding:14px 18px 22px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line)}
.mm-extra a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  font-weight:700;color:var(--ink);background:var(--surface-2)}
.mm-extra a .mm-ic{color:var(--gold);display:inline-flex}
.mm-extra a .mm-ic svg{width:19px;height:19px}

/* Recherche mobile : champ + bouton */
.mobile-search .msearch-form{display:flex;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:5px 5px 5px 6px;box-shadow:0 10px 26px rgba(120,30,10,.07)}
.mobile-search .msearch-form input{flex:1;border:none;background:transparent;outline:none;
  padding:9px 10px;font-size:15px;color:var(--text)}
.mobile-search .msearch-form button{flex:0 0 auto;background:var(--grad-hot);color:#fff;border:none;
  border-radius:999px;width:44px;height:40px;display:grid;place-items:center;cursor:pointer}

/* Points de bascule */
@media(max-width:960px){
  .hamburger{display:flex}
  .header .container{gap:12px}
  .logo-copy{font-size:19px}
}
@media(max-width:768px){
  .mobile-search{display:block}
}
@media(min-width:961px){
  .mobile-menu,.mobile-menu-overlay{display:none}
}

/* Header allégé sur mobile : le troc passe dans le menu, on garde panier */
@media(max-width:768px){
  .header-trade{display:none}
  .logo-copy em{display:none}
}
@media(max-width:560px){
  .cart-btn .cart-label{display:none}
  .cart-btn{padding:10px 12px}
  .header .container{gap:10px;min-height:64px}
  .logo-mark{width:42px;height:42px}
  .logo-copy{font-size:16px}
}
@media(max-width:380px){
  .logo-copy{display:none}
}

/* ============================================================
   BATCH 5 — POLISH MOBILE (couche finale)
   Objectif : rendu téléphone fluide, moderne et professionnel,
   aligné sur la version ordinateur. Tout est scopé en @media,
   le desktop n'est jamais modifié.
   ============================================================ */

/* — 1. Anti-débordement horizontal (défaut mobile n°1) — */
@media (max-width: 960px){
  html,body{max-width:100%;overflow-x:hidden}
  img,video,iframe,svg{max-width:100%}
  .container{padding-left:14px;padding-right:14px}
  *{min-width:0}
}

/* — 2. Confort tactile + fluidité (pas d'effets "qui sautent" au tap) — */
@media (hover:none){
  *{-webkit-tap-highlight-color:transparent}
  .btn:hover,.card:hover,.mall-card:hover,.deal-card:hover,.grp-card:hover,
  .allcat-card:hover,.hstrip-link:hover,.troc-path-card:hover,.home-promo-card:hover,
  .leaf-tile:hover .leaf-tile-img{transform:none}
  .card:hover .card-img img,.grp-card:hover .grp-media img,
  .allcat-card:hover .allcat-media img{transform:none}
}

/* — 3. Grille produits : 2 colonnes sur téléphone (au lieu d'une seule) — */
@media (max-width: 700px){
  .grid,.mall-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{border-radius:16px}
  .card-img{aspect-ratio:1/1}
  .card-body{padding:11px 12px 13px}
  .card .brand-tag{font-size:10px;letter-spacing:.5px}
  .card h3{font-size:13px;line-height:1.3;min-height:34px;margin:4px 0 6px}
  .price{font-size:16px}
  .old-price{font-size:11.5px}
  .card .badge,.card .discount{font-size:10px;padding:3px 7px;top:9px}
  .card .badge{left:9px}.card .discount{right:9px}
  .card .card-actions{flex-direction:column;gap:7px;margin-top:10px}
  .card .card-actions .btn{width:100%;flex:none;padding:10px 10px;font-size:12.5px}
}

/* — 4. Rythme vertical & titres plus nets sur petit écran — */
@media (max-width: 700px){
  .section{padding:22px 0}
  .section-head{margin-bottom:14px}
  .section-head h2{font-size:clamp(18px,5.4vw,22px)}
  .banner{padding:22px 18px;border-radius:18px}
  .banner .btn{width:100%}
  .hstrip{margin:16px 0}
  .grp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grp-body{padding:12px 13px 14px}
  .grp-body h3{font-size:14.5px}
}

/* — 5. En-tête compact et aligné sur téléphone — */
@media (max-width: 560px){
  .header .container{gap:9px;min-height:60px}
  .cart-btn{padding:9px 12px;border-radius:12px}
  .mobile-search .msearch-form input{font-size:16px} /* évite le zoom auto iOS */
}

/* — 6. Très petits écrans : on garde 2 colonnes mais plus dense — */
@media (max-width: 360px){
  .grid,.mall-grid,.grp-grid{gap:9px}
  .card h3{font-size:12.5px}
  .price{font-size:15px}
  .container{padding-left:11px;padding-right:11px}
}

/* — 7. Boutons pleine largeur là où c'est attendu sur mobile — */
@media (max-width: 560px){
  .p-actions{flex-direction:column}
  .p-actions .btn{width:100%}
  .leaf-hero-actions .btn,.cat-soon-cta .btn{width:100%}
  .troc-hero-cta .btn,.troc-form-actions .btn{width:100%}
}