/* ===================== GES BOUTIQUE — CSS v3 (Jumia/Shopify inspired) ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --b-accent:       #1a4fff;
  --b-accent2:      #0e34c4;
  --b-accent-light: #e8eeff;
  --b-success:      #16a34a;
  --b-warn:         #d97706;
  --b-danger:       #dc2626;
  --b-flash:        #f97316;
  --b-bg:           #f5f7ff;
  --b-panel:        #ffffff;
  --b-ink:          #0f172a;
  --b-ink2:         #475569;
  --b-muted:        #94a3b8;
  --b-line:         #e2e8f0;
  --b-r:            12px;
  --b-r-lg:         18px;
  --b-sh:           0 2px 12px rgba(15,23,42,.08);
  --b-sh-lg:        0 12px 40px rgba(15,23,42,.14);
  --b-ease:         cubic-bezier(.4,0,.2,1);
  --b-spring:       cubic-bezier(.34,1.56,.64,1);
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --b-bg:           #0f172a;
  --b-panel:        #1e293b;
  --b-ink:          #f1f5f9;
  --b-ink2:         #94a3b8;
  --b-muted:        #64748b;
  --b-line:         #334155;
  --b-accent-light: #1e3a8a;
  --b-sh:           0 2px 12px rgba(0,0,0,.3);
  --b-sh-lg:        0 12px 40px rgba(0,0,0,.45);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--b-bg); color: var(--b-ink);
  min-height: 100vh; min-height: 100dvh; font-size: 14px; line-height: 1.6;
  overflow-x: clip;   /* anti-débordement horizontal sans casser position:sticky */
  transition: background .3s, color .3s;
}

/* ── WRAPPER SECTIONS ── */
.b-section-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ── HEADER SCROLLED STATE ── */
.b-header.scrolled {
  background:rgba(26,79,255,.97);
  backdrop-filter:blur(12px);
  box-shadow:0 4px 24px rgba(26,79,255,.4);
}

/* ── BARRE SOCIALE (style DMD-CI) ── */
.b-social-bar {
  display:none;   /* barre du haut retirée */
  background:var(--b-accent2);
  border-bottom:1px solid rgba(0,0,0,.15);
}
.b-social-bar-inner {
  max-width:1200px;margin:0 auto;padding:7px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.b-social-links { display:flex;align-items:center;gap:6px; }
.b-social-bar-right { display:flex;align-items:center;gap:16px; }
.b-sb-link {
  color:rgba(255,255,255,.9);text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.18);
  justify-content:center;
  transition:background .15s;
}
.b-sb-link:hover { background:rgba(255,255,255,.35); }
.b-social-bar-right .b-sb-link {
  width:auto;height:auto;border-radius:6px;
  padding:4px 10px;font-size:11px;font-weight:700;
  background:rgba(255,255,255,.15);letter-spacing:.02em;
}
.b-sb-tracking { background:rgba(255,255,255,.25) !important; }
[data-theme="dark"] .b-social-bar { background:#0e34c4; }

/* ── BANDEAU PROMO ── */
.b-promo-bar {
  background: linear-gradient(90deg,#7c3aed,var(--b-accent));
  color:#fff;text-align:center;font-size:12px;font-weight:600;
  padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;
}
.b-promo-close {
  position:absolute;right:12px;background:none;border:none;
  color:rgba(255,255,255,.7);cursor:pointer;font-size:14px;
}

/* ── HEADER ── */
.b-header {
  position:sticky;top:0;z-index:200;
  background:var(--b-accent);
  box-shadow:0 2px 20px rgba(26,79,255,.35);
}
.b-header-inner {
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:0 24px;height:64px;
}
.b-logo { display:flex;align-items:center;gap:10px;text-decoration:none;flex:1 1 0;min-width:0; }
.b-logo-icon {
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:19px;
}
.b-logo-name { font-size:17px;font-weight:900;color:#fff;letter-spacing:-.4px; }

/* Search */
.b-header-search {
  flex:0 1 520px;width:520px;position:relative;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.18);border-radius:10px;
  padding:9px 16px;border:1.5px solid rgba(255,255,255,.22);
  transition:background .2s,border-color .2s;
}
.b-header-search:focus-within { background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.45); }
.b-header-search input { flex:1;background:none;border:none;outline:none;color:#fff;font-size:13px;font-family:inherit; }
.b-header-search input::placeholder { color:rgba(255,255,255,.65); }
.b-header-search svg { color:rgba(255,255,255,.7); }

/* Suggestions */
.b-search-suggestions {
  position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--b-panel);border-radius:12px;border:1px solid var(--b-line);
  box-shadow:var(--b-sh-lg);z-index:500;overflow:hidden;display:none;
}
.b-search-suggestions.open { display:block; }
.b-suggest-item {
  padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;
  font-size:13px;transition:background .12s;border-bottom:1px solid var(--b-line);
}
.b-suggest-item:last-child { border:none; }
.b-suggest-item:hover { background:var(--b-accent-light); }
.b-suggest-img { width:36px;height:36px;border-radius:8px;object-fit:cover;background:var(--b-line);flex-shrink:0; }
.b-suggest-name { font-weight:700;flex:1; }
.b-suggest-price { color:var(--b-accent);font-weight:900; }

.b-header-actions { display:flex;align-items:center;gap:10px;flex:1 1 0;justify-content:flex-end; }
.b-cart-btn {
  position:relative;width:44px;height:44px;border-radius:10px;
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.28);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s;
}
.b-cart-btn:hover { background:rgba(255,255,255,.32); }
.b-cart-count {
  position:absolute;top:-7px;right:-7px;background:#ef4444;color:#fff;
  font-size:9px;font-weight:900;min-width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;padding:0 3px;border:2px solid var(--b-accent);
}
.b-cart-count.bump { animation:cartBump .35s var(--b-spring); }
@keyframes cartBump { 0%,100%{transform:scale(1)} 50%{transform:scale(1.5)} }

/* ── DARK MODE TOGGLE ── */
.b-dark-btn {
  width:44px;height:44px;border-radius:10px;
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.28);
  color:#fff;cursor:pointer;display:grid;place-items:center;
  transition:background .15s;font-size:18px;flex-shrink:0;
}
.b-dark-btn:hover { background:rgba(255,255,255,.32); }

/* ── HERO CAROUSEL ── */
.b-hero {
  position:relative;overflow:hidden;
}
/* Bannière personnalisée : image affichée en entier, sans recadrage ni padding */
.b-hero-slide.b-hero-slide-img { padding:0;display:block;min-width:100%; }
.b-hero-slide.b-hero-slide-img img { width:100%;height:auto;display:block; }
.b-hero-slides { display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);opacity:0;min-height:280px; }
.b-hero-slides.b-ready { opacity:1;transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .35s ease; }
@media (max-width:860px){ .b-hero-slides { min-height:220px; } }
@media (max-width:560px){ .b-hero-slides { min-height:185px; } }
.b-hero-slide {
  min-width:100%;padding:60px 40px 72px;
  display:grid;grid-template-columns:1.2fr 0.8fr;
  align-items:center;gap:32px;position:relative;
}
.b-hero-slide:nth-child(1) { background:linear-gradient(135deg,var(--b-accent) 0%,#7c3aed 60%,#db2777 100%); }
.b-hero-slide:nth-child(2) { background:linear-gradient(135deg,#f97316 0%,#ea580c 60%,#dc2626 100%); }
.b-hero-slide:nth-child(3) { background:linear-gradient(135deg,#16a34a 0%,#15803d 60%,#0891b2 100%); }
.b-hero-dots {
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:10;
}
.b-hero-dot {
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
  border:none;cursor:pointer;padding:0;transition:background .2s,transform .2s;
}
.b-hero-dot.active { background:#fff;transform:scale(1.3); width:20px; border-radius:4px; }
.b-hero-prev,.b-hero-next {
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;z-index:10;
  background:rgba(255,255,255,.25);color:#fff;font-size:20px;display:grid;place-items:center;
  transition:background .15s;
}
.b-hero-prev { left:16px; }
.b-hero-next { right:16px; }
.b-hero-prev:hover,.b-hero-next:hover { background:rgba(255,255,255,.45); }
/* Flèches retirées : défilement automatique uniquement */
.b-hero-prev,.b-hero-next { display:none !important; }

/* ════════ CARROUSEL HERO PREMIUM : crossfade + ratio fixe + Ken Burns + points animés ════════ */
.b-hero-slides.b-hero-fade {
  display:block; position:relative;
  aspect-ratio: 2.6 / 1;          /* hauteur stable → plus de « saut » entre images */
  min-height:0;
}
.b-hero-fade .b-hero-slide {
  position:absolute; inset:0; padding:0; min-width:0;
  opacity:0; transition:opacity .9s ease;
}
.b-hero-fade .b-hero-slide.b-active { opacity:1; z-index:1; }
.b-hero-fade .b-hero-slide-img { background-size:cover; background-position:center; overflow:hidden; }
.b-hero-fade .b-hero-slide-img,
.b-hero-fade .b-hero-slide-img a { width:100%; height:100%; display:block; position:relative; }
/* Fond flou (copie de l'image) pour combler les bords sans recadrer le contenu */
.b-hero-fade .b-hero-slide-img::before {
  content:""; position:absolute; inset:0; z-index:0;
  background:inherit; background-size:cover; background-position:center;
  filter:blur(24px) brightness(.85); transform:scale(1.15);
}
/* Image nette ENTIÈRE visible (rien coupé) au-dessus du fond flou */
.b-hero-fade .b-hero-slide-img a { z-index:1; }
.b-hero-fade .b-hero-slide-img img {
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain; display:block;
}
/* Image mobile dédiée : on bascule desktop ↔ mobile sous 560px */
.b-hero-fade .b-hero-slide-img .bh-mob { display:none; }
@media (max-width:560px) {
  .b-hero-fade .b-hero-slide-img.has-mob .bh-desk { display:none; }
  .b-hero-fade .b-hero-slide-img.has-mob .bh-mob { display:block; }
}

/* Points avec barre de progression (synchro 5 s) */
.b-hero-dot { position:relative; overflow:hidden; }
.b-hero-dot.active { background:rgba(255,255,255,.4) !important; }
.b-dot-fill { position:absolute; left:0; top:0; height:100%; width:0; background:#fff; border-radius:inherit; }
.b-hero-dot.active .b-dot-fill { animation:bDotFill 5s linear forwards; }
@keyframes bDotFill { from { width:0; } to { width:100%; } }


/* Ratio un peu plus haut sur petit écran */
@media (max-width:560px) {
  .b-hero-slides.b-hero-fade { aspect-ratio: 1.9 / 1; }
  /* Mobile : l'image remplit tout le bloc (recadrage centré, plus de bandes) */
  .b-hero-fade .b-hero-slide-img img { object-fit: cover; }
}

/* Accessibilité : respecte « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  .b-hero-dot.active .b-dot-fill { animation:none; width:100%; }
  .b-hero-fade .b-hero-slide { transition:opacity .25s ease; }
}

/* ── HERO inner styles ── */
.b-hero-blob { position:absolute;border-radius:50%;opacity:.12;pointer-events:none; }
.b-hero-blob1 { width:500px;height:500px;background:radial-gradient(circle,#fff 0%,transparent 70%);top:-150px;right:-100px; }
.b-hero-blob2 { width:300px;height:300px;background:radial-gradient(circle,#fff 0%,transparent 70%);bottom:-80px;left:60px; }
.b-hero-content { position:relative;color:#fff;padding:0 20px; }
.b-hero-badge {
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);
  border-radius:50px;padding:5px 14px;font-size:11px;font-weight:700;margin-bottom:18px;
}
.b-hero h1 { font-size:clamp(28px,4vw,48px);font-weight:900;letter-spacing:-.5px;line-height:1.1;margin-bottom:14px; }
.b-hero p { font-size:15px;opacity:.88;margin-bottom:28px;line-height:1.6; }
.b-hero-btns { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px; }
.b-hero-cta {
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--b-accent);padding:13px 28px;border-radius:50px;
  font-size:14px;font-weight:800;text-decoration:none;
  box-shadow:0 8px 28px rgba(0,0,0,.22);transition:transform .18s var(--b-spring),box-shadow .18s;
}
.b-hero-cta:hover { transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.28); }
.b-hero-cta-outline {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.4);
  padding:13px 24px;border-radius:50px;font-size:14px;font-weight:700;cursor:pointer;
  transition:background .18s;font-family:inherit;
}
.b-hero-cta-outline:hover { background:rgba(255,255,255,.25); }
.b-hero-stats { display:flex;align-items:center;gap:20px;opacity:.9; }
.b-hero-stat { text-align:center; }
.b-hero-stat strong { display:block;font-size:22px;font-weight:900; }
.b-hero-stat span { font-size:11px;opacity:.8; }
.b-hero-stat-sep { width:1px;height:30px;background:rgba(255,255,255,.3); }
.b-hero-visual {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:20px 16px 20px 0;
}
.b-hero-card-float {
  background:rgba(255,255,255,.18);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.32);border-radius:14px;padding:13px 18px;
  display:flex;align-items:center;gap:12px;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.15);width:100%;max-width:230px;
}
.b-float-icon { font-size:26px;flex-shrink:0; }
.b-float-text strong { display:block;font-size:13px;font-weight:800; }
.b-float-text span { font-size:11px;opacity:.8; }
.b-hero-card-float1 { animation:bFloat 3s ease-in-out infinite; }
.b-hero-card-float2 { animation:bFloat 3.5s ease-in-out infinite .4s; }
.b-hero-card-float3 { animation:bFloat 4s ease-in-out infinite .8s; }
@keyframes bFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* ── SECTION HEADERS COMMUNS (style DMD-CI) ── */
.b-sec-hdr { display:flex;align-items:center;justify-content:space-between;margin-bottom:30px; }
.b-sec-title {
  font-size:20px;font-weight:900;color:var(--b-ink);
  display:flex;align-items:center;gap:10px;
  letter-spacing:.5px;text-transform:uppercase;
  padding-bottom:8px;position:relative;
}
.b-sec-title::after {
  content:'';position:absolute;left:0;bottom:0;
  width:50px;height:3px;border-radius:2px;
  background:var(--b-accent);
}
.b-sec-title.b-flash-title { color:var(--b-flash); }
.b-see-all {
  font-size:12px;font-weight:800;color:var(--b-ink);text-decoration:none;
  padding:6px 14px;border:1.5px solid var(--b-line);border-radius:6px;
  transition:all .18s;display:flex;align-items:center;gap:4px;
  background:var(--b-panel);letter-spacing:.02em;
}
.b-see-all:hover { border-color:var(--b-accent);color:var(--b-accent);transform:translateY(-1px); }

/* Section title dans b-section-hdr (Catalogue) */
.b-section-title {
  font-size:20px;font-weight:900;color:var(--b-ink);
  display:flex;align-items:center;gap:10px;
  letter-spacing:.5px;text-transform:uppercase;
  padding-bottom:8px;position:relative;
}
.b-section-title::after {
  content:'';position:absolute;left:0;bottom:0;
  width:50px;height:3px;border-radius:2px;
  background:var(--b-accent);
}

/* ── CATÉGORIES VISUELLES (Jumia style) ── */
.b-cat-section { padding:60px 0 28px; }
.b-cat-visual-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;width:100%;
}
/* Carte « Collection » (diagonale colorée + image produit) */
.b-coll-card {
  position:relative;overflow:hidden;border-radius:16px;aspect-ratio:5/2;
  background:linear-gradient(135deg,#eef1f5,#dde2e9);
  text-decoration:none;display:block;
  box-shadow:0 6px 20px rgba(0,0,0,.09);
  transition:transform .25s var(--b-spring),box-shadow .25s;
  animation:bCardIn .4s var(--b-ease) both;
}
.b-coll-card:hover { transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.18); }
.b-coll-img {
  position:absolute;top:0;right:0;height:100%;width:62%;object-fit:cover;object-position:center;
  transition:transform .4s ease;
}
.b-coll-card:hover .b-coll-img { transform:scale(1.06); }
.b-coll-ph { position:absolute;top:0;right:0;height:100%;width:62%;display:grid;place-items:center;font-size:60px;opacity:.5; }
.b-coll-ph svg { width:56px;height:56px; }
.b-coll-shape {
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,var(--b-accent) 0%,var(--b-accent2,var(--b-accent)) 100%);
  -webkit-clip-path:polygon(0 0,66% 0,42% 100%,0 100%);
  clip-path:polygon(0 0,66% 0,42% 100%,0 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 0 0 30px;
}
.b-coll-title {
  color:#fff;font-size:23px;font-weight:800;line-height:1.12;letter-spacing:-.3px;text-shadow:0 1px 4px rgba(0,0,0,.18);
  /* Rester DANS la bande bleue diagonale : largeur bornée + césure propre */
  max-width:46%;overflow-wrap:break-word;hyphens:auto;
}
.b-coll-title span { font-weight:400;opacity:.92; }
/* Noms longs : la police se réduit automatiquement (classe posée en JS) */
.b-coll-title.b-coll-title--sm { font-size:19px; }
.b-coll-title.b-coll-title--xs { font-size:16px; }
.b-coll-count { color:rgba(255,255,255,.82);font-size:11px;font-weight:700;margin-top:6px; }
.b-coll-btn { display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em; }
.b-coll-arrow {
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.25);font-size:13px;transition:background .2s,transform .2s;
}
.b-coll-card:hover .b-coll-arrow { background:rgba(255,255,255,.45);transform:translateX(3px); }
@media (max-width:560px) {
  .b-cat-visual-grid { grid-template-columns:1fr; }
  .b-coll-title { font-size:20px; }
  .b-coll-title.b-coll-title--sm { font-size:18px; }
  .b-coll-title.b-coll-title--xs { font-size:15px; }
}
.b-cat-visual-skeleton {
  border-radius:20px;height:128px;
  background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%);
  background-size:200% 100%;animation:bSkeleton 1.4s linear infinite;
}
@keyframes bSkeleton { 0%{background-position:200%} 100%{background-position:-200%} }

/* ── BANNIÈRES PROMOTIONNELLES ── */
.b-bannieres-section { padding:36px 0; }
.b-bannieres-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px; }
.b-banniere-card {
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/7;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.12);transition:transform .2s var(--b-spring),box-shadow .2s;
  display:block;text-decoration:none;background:var(--b-line);
}
.b-banniere-card:hover { transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.18); }
.b-banniere-card img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s; }
.b-banniere-card:hover img { transform:scale(1.04); }
.b-banniere-overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 55%);
  display:flex;align-items:flex-end;padding:16px;
}
.b-banniere-desc { color:#fff;font-size:14px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5);line-height:1.3; }
.b-banniere-card.b-ban-noimg { background:linear-gradient(135deg,var(--b-accent) 0%,var(--b-accent2) 100%);display:flex;align-items:center;justify-content:center; }
.b-banniere-card.b-ban-noimg .b-banniere-desc { position:static;font-size:16px;padding:0 20px;text-align:center; }

/* Bannières promo — pleine largeur horizontale */
.b-ban-promo-section { padding:20px 0; }
.b-ban-promo-grid { display:flex;flex-direction:column;gap:14px; }
.b-ban-promo-card {
  position:relative;border-radius:14px;overflow:hidden;
  min-height:120px;display:flex;align-items:center;
  background:linear-gradient(135deg,var(--b-accent) 0%,var(--b-accent2) 100%);
  text-decoration:none;cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.10);
  transition:transform .2s var(--b-spring),box-shadow .2s;
}
.b-ban-promo-card:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.16); }
.b-ban-promo-card img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s; }
.b-ban-promo-card:hover img { transform:scale(1.03); }
.b-ban-promo-overlay {
  position:relative;z-index:1;padding:24px 32px;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,transparent 70%);
  width:100%;min-height:120px;display:flex;align-items:center;
}
.b-ban-promo-desc { color:#fff;font-size:20px;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.4);line-height:1.2;max-width:60%; }

/* Bannières mobile — visibles uniquement sur mobile */
.b-ban-mobile-section { padding:12px 0; display:none; }
@media (max-width:640px) {
  .b-ban-mobile-section { display:block !important; }
}

/* Bannières autre — avant footer */
.b-ban-autre-section { padding:28px 0;background:var(--b-surface); }

/* ── FLASH VENTE ── */
.b-flash-section { padding:44px 0; background:linear-gradient(180deg,var(--b-bg) 0%,rgba(249,115,22,.04) 100%); }
.b-flash-title { color:var(--b-flash); }
.b-flash-bolt { font-size:20px;animation:bFlashPulse .8s ease-in-out infinite alternate; }
@keyframes bFlashPulse { from{opacity:1} to{opacity:.4} }

/* Bannière flash (style image) */
.b-flash-banner {
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--b-accent);color:#fff;
  border-radius:12px;padding:14px 20px;margin-bottom:18px;
  box-shadow:0 8px 24px rgba(26,79,255,.28);
}
.b-flash-banner-l { display:flex;align-items:center;gap:12px;flex-wrap:wrap; }
.b-flash-state { font-weight:900;font-size:12px;letter-spacing:.06em;background:rgba(255,255,255,.22);padding:6px 13px;border-radius:20px; }
.b-flash-date  { font-weight:700;font-size:12px;background:rgba(0,0,0,.14);padding:6px 13px;border-radius:20px; }
.b-flash-banner-r { display:flex;align-items:center;gap:12px; }
.b-flash-cd-label { font-size:11px;font-weight:800;letter-spacing:.06em;opacity:.95; }
.b-flash-cd {
  display:flex;align-items:center;gap:4px;background:#111827;color:#fff;
  padding:7px 14px;border-radius:9px;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:21px;
}
.b-flash-cd i { opacity:.55;font-style:normal; }
@media (max-width:640px) {
  .b-flash-banner { padding:12px 14px; }
  .b-flash-cd { font-size:17px;padding:6px 10px; }
  .b-flash-cd-label { display:none; }
}
.b-flash-countdown {
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;color:var(--b-ink2);
}
.b-cd-unit {
  background:linear-gradient(135deg,#f97316,#dc2626);color:#fff;border-radius:10px;padding:7px 12px;
  text-align:center;min-width:48px;box-shadow:0 4px 12px rgba(249,115,22,.3);
}
.b-cd-unit span { font-size:20px;font-weight:900;font-family:monospace;display:block; }
.b-cd-unit label { font-size:9px;opacity:.8;display:block; }
.b-cd-sep { font-size:22px;font-weight:900;color:var(--b-flash);margin-top:-4px;animation:bFlashPulse .8s ease-in-out infinite alternate; }

/* Horizontal scroll */
.b-flash-scroll, .b-best-scroll {
  overflow-x:auto;overflow-y:visible;
  scrollbar-width:none;-ms-overflow-style:none;
  margin:0 -24px;padding:4px 24px 16px;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
}
.b-flash-scroll::-webkit-scrollbar, .b-best-scroll::-webkit-scrollbar { display:none; }

/* Carrousel avec barre de défilement visible */
.b-best-scroll--bar { scrollbar-width:thin;scrollbar-color:var(--b-accent) var(--b-line); padding-bottom:14px; }
.b-best-scroll--bar::-webkit-scrollbar { display:block;height:8px; }
.b-best-scroll--bar::-webkit-scrollbar-track { background:var(--b-line);border-radius:20px;margin:0 24px; }
.b-best-scroll--bar::-webkit-scrollbar-thumb { background:var(--b-accent);border-radius:20px; }
.b-best-scroll--bar::-webkit-scrollbar-thumb:hover { background:var(--b-accent2,var(--b-accent)); }
.b-flash-track, .b-best-track {
  display:flex;gap:18px;width:max-content;
}

/* Mini card pour flash/bestsellers */
.b-mini-card {
  background:var(--b-panel);border-radius:16px;border:1.5px solid var(--b-line);
  width:180px;flex-shrink:0;overflow:hidden;cursor:pointer;scroll-snap-align:start;
  transition:transform .22s var(--b-ease),box-shadow .22s,border-color .22s;
  animation:bCardIn .4s var(--b-ease) both;
  box-shadow:0 2px 8px rgba(15,23,42,.05);
}
.b-mini-card:hover { transform:translateY(-5px);box-shadow:0 16px 36px rgba(26,79,255,.14);border-color:#c7d2fe; }
.b-mini-card-img-wrap { width:100%;aspect-ratio:1;overflow:hidden;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);position:relative; }
.b-mini-card-img { width:100%;height:100%;object-fit:cover;transition:transform .35s var(--b-ease); }
.b-mini-card:hover .b-mini-card-img { transform:scale(1.06); }
.b-mini-card-ph { width:100%;height:100%;display:grid;place-items:center;font-size:36px; }
.b-mini-card-badge {
  position:absolute;top:7px;left:7px;
  background:var(--b-flash);color:#fff;
  font-size:9px;font-weight:800;padding:3px 7px;border-radius:6px;
}
.b-mini-card-body { padding:10px 12px 12px; }
.b-mini-card-name {
  font-size:12px;font-weight:700;line-height:1.35;margin-bottom:6px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.b-mini-card-footer { display:flex;align-items:center;justify-content:space-between; }
.b-mini-card-price { font-size:14px;font-weight:900;color:var(--b-accent); }
.b-mini-add-btn {
  width:28px;height:28px;border-radius:8px;
  background:var(--b-accent);color:#fff;border:none;
  font-size:18px;cursor:pointer;display:grid;place-items:center;
  transition:background .15s,transform .12s;
}
.b-mini-add-btn:hover { background:var(--b-accent2);transform:scale(1.1); }

/* ── MEILLEURES VENTES ── */
.b-bestsellers-section { padding:16px 0 40px; margin-top:40px; }

/* ── LOADER INLINE ── */
.b-loader-inline { display:flex;align-items:center;justify-content:center;padding:24px 40px; }
.b-spinner-sm {
  width:24px;height:24px;border-radius:50%;
  border:2.5px solid var(--b-line);border-top-color:var(--b-accent);
  animation:bSpin .7s linear infinite;
}

/* ── FILTRE BAR (style DMD-CI) ── */
.b-catalogue-section { padding-top:10px; }
/* Bloc catégories + outils : défile normalement avec les produits (pas fixe) */
.b-sticky-tools {
  position:static;
  background:var(--b-bg);
  margin:0 -32px;padding:0 32px;
}
.b-filter-bar {
  background:transparent;border-bottom:none;box-shadow:none;
  margin:0 -32px;
}
.b-filter-bar-inner {
  max-width:1200px;margin:0 auto;padding:10px 24px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.b-cats { display:flex;gap:6px;flex-wrap:wrap;flex:1;align-items:center; }
.b-cat-btn {
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:30px;border:none;
  background:transparent;
  font-size:13px;font-weight:700;color:var(--b-ink2);
  cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;font-family:inherit;
}
.b-cat-btn:hover { background:var(--b-accent-light);color:var(--b-accent); }
.b-cat-btn.active { background:var(--b-accent);color:#fff; }
.b-cat-btn-ico { font-size:15px;line-height:1;display:inline-grid;place-items:center; }
.b-cat-btn-ico svg { width:16px;height:16px; }
.b-cat-badge {
  display:inline-flex;align-items:center;
  font-size:9px;font-weight:900;letter-spacing:.02em;
  padding:2px 7px;border-radius:20px;line-height:1.4;
  text-transform:uppercase;white-space:nowrap;
}
.b-cat-badge.hot  { background:#fee2e2;color:#dc2626; }
.b-cat-badge.new  { background:#dcfce7;color:#16a34a; }
.b-cat-btn.active .b-cat-badge { background:rgba(255,255,255,.25);color:#fff; }
.b-sort-select {
  border:1.5px solid var(--b-line);background:var(--b-panel);
  color:var(--b-ink2);font-size:12px;font-weight:600;
  padding:8px 12px;border-radius:9px;outline:none;cursor:pointer;font-family:inherit;
}
.b-sort-select:focus { border-color:var(--b-accent); }

/* Barre outils : nombre d'articles + tri (séparée par un trait) */
.b-toolbar {
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 0;margin:0;background:transparent;
  border-top:1px solid var(--b-line);
}
.b-result-count { font-size:13px;color:var(--b-muted); }
.b-result-count strong { color:var(--b-ink);font-weight:800; }

/* ── GRILLE ── */
.b-section-hdr { display:flex;align-items:center;margin:28px 0 20px; }
.b-section-count {
  font-size:12px;font-weight:700;color:var(--b-accent);
  background:var(--b-accent-light);border-radius:20px;padding:3px 12px;
}
.b-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%; }
@media (max-width:1200px) { .b-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px)  { .b-grid { grid-template-columns:repeat(2,1fr); } }

/* ── CARTE PRODUIT ── */
.b-card {
  background:var(--b-panel);border-radius:var(--b-r-lg);
  border:1.5px solid var(--b-line);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  transition:transform .22s var(--b-ease),box-shadow .22s,border-color .22s;
  cursor:pointer;animation:bCardIn .4s var(--b-ease) both;
  box-shadow:0 1px 4px rgba(15,23,42,.05);
}
@keyframes bCardIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.b-card:hover { transform:translateY(-6px);box-shadow:0 20px 48px rgba(26,79,255,.14);border-color:#c7d2fe; }
.b-card.oos { opacity:.72; }

.b-card-img-wrap { overflow:hidden;position:relative;aspect-ratio:1;background:linear-gradient(135deg,#f1f5f9,#e2e8f0); }
.b-card-img { width:100%;height:100%;object-fit:cover;transition:transform .4s var(--b-ease); }
.b-card:hover .b-card-img { transform:scale(1.08); }
.b-card-img-ph { width:100%;height:100%;display:grid;place-items:center;font-size:48px; }

.b-card-badges { position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:4px; }
.b-badge { display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:800;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.04em; }
.b-badge-new  { background:#16a34a;color:#fff; }
.b-badge-promo    { background:var(--b-accent);color:#fff; }
.b-badge-top      { background:#f59e0b;color:#fff; }
.b-badge-oos      { background:rgba(15,23,42,.65);color:#fff; }
.b-badge-flash    { background:#cc0000;color:#fff;animation:b-flash-pulse 1.4s infinite; }
.b-badge-promo-tag{ background:#f97316;color:#fff; }
@keyframes b-flash-pulse { 0%,100%{opacity:1} 50%{opacity:.72} }

.b-card-actions { position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px;z-index:3; }
.b-wish-btn, .b-quick-btn {
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid var(--b-line);
  display:grid;place-items:center;cursor:pointer;font-size:14px;color:var(--b-ink);
  transition:transform .15s var(--b-spring),background .15s,color .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.b-wish-btn:hover, .b-quick-btn:hover { transform:scale(1.15); }
.b-wish-btn.active { background:#fee2e2;border-color:#fca5a5; }
.b-quick-btn:hover { background:var(--b-accent);color:#fff;border-color:var(--b-accent); }

.b-card-body { padding:11px 13px 13px;flex:1;display:flex;flex-direction:column;gap:4px; }
.b-card-cat { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--b-accent); }
.b-card-name {
  font-size:13px;font-weight:700;color:var(--b-ink);line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.b-card-brand { font-size:11px;color:var(--b-muted);font-weight:500; }

/* Stars */
.b-card-stars { font-size:11px;color:#f59e0b;letter-spacing:1px;margin-top:auto;padding-top:6px; }
.b-stars-empty { color:#cbd5e1; }   /* étoiles grises quand aucun avis (comme les grandes boutiques) */

.b-card-footer {
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--b-line);
}
/* Référence code sur l'image */
.b-card-ref {
  position:absolute;bottom:8px;left:8px;
  background:rgba(15,23,42,.65);color:#fff;
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;
  font-family:monospace;letter-spacing:.04em;
}

/* Prix + étoiles sur la même ligne */
.b-card-row-price { display:flex;align-items:center;justify-content:space-between;margin-top:2px;padding-top:0; }
.b-card-price { font-size:17px;font-weight:900;color:var(--b-accent); }

/* Bouton pleine largeur style DMD */
.b-add-btn-full {
  width:100%;
  background:var(--b-accent);color:#fff;border:none;
  font-size:13px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;letter-spacing:.03em;flex-shrink:0;
  /* Révélé au survol sur PC (la carte s'agrandit) */
  max-height:0;padding:0 16px;opacity:0;overflow:hidden;
  transition:max-height .25s var(--b-ease),padding .25s,opacity .2s,background .15s;
}
.b-card:hover .b-add-btn-full { max-height:54px;padding:13px 16px;opacity:1; }
.b-add-btn-full:hover:not(:disabled) { background:var(--b-accent2); }
.b-add-btn-full:disabled { background:#94a3b8;cursor:not-allowed; }
.b-add-btn {
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--b-accent),var(--b-accent2));color:#fff;border:none;
  font-size:22px;cursor:pointer;display:grid;place-items:center;flex-shrink:0;
  transition:opacity .15s,transform .12s;box-shadow:0 4px 12px rgba(26,79,255,.3);
}
.b-add-btn:hover { opacity:.88;transform:scale(1.12); }
.b-add-btn:disabled { background:var(--b-muted);cursor:not-allowed;transform:none;box-shadow:none; }

.b-stock-bar-wrap { margin-top:7px; }
.b-stock-bar-bg { height:3px;background:var(--b-line);border-radius:99px;overflow:hidden; }
.b-stock-bar { height:100%;border-radius:99px;transition:width .5s var(--b-ease); }
.b-stock-bar.ok  { background:linear-gradient(90deg,#22c55e,#16a34a); }
.b-stock-bar.low { background:linear-gradient(90deg,#f59e0b,#d97706); }
.b-stock-bar.oos { background:var(--b-muted); }

.b-empty { grid-column:1/-1;text-align:center;padding:80px 20px;color:var(--b-muted); }
.b-empty p { font-size:16px;margin-top:8px; }

/* ── TÉMOIGNAGES ── */
.b-temoignages { padding:64px 0;background:var(--b-bg); }
.b-temo-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px; }
.b-temo-card {
  background:var(--b-panel);border-radius:20px;border:1.5px solid var(--b-line);
  padding:26px 24px 20px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--b-sh);transition:box-shadow .25s,transform .25s;
  position:relative;overflow:hidden;
}
.b-temo-card::before {
  content:'❝';position:absolute;top:14px;right:18px;font-size:52px;
  color:var(--b-accent);opacity:.08;line-height:1;pointer-events:none;
}
.b-temo-card:hover { box-shadow:0 16px 48px rgba(26,79,255,.1);transform:translateY(-4px); }
.b-temo-stars { font-size:16px;letter-spacing:2px; }
.b-temo-card p { font-size:13px;color:var(--b-ink2);line-height:1.7;flex:1;font-style:italic; }
.b-temo-author { display:flex;align-items:center;gap:12px;padding-top:4px;border-top:1px solid var(--b-line); }
.b-temo-avatar {
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--b-accent),#7c3aed);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:900;flex-shrink:0;
}
.b-temo-author strong { display:block;font-size:13px;font-weight:800; }
.b-temo-author span { font-size:11px;color:var(--b-muted); }

/* ── AVANTAGES ── */
.b-avantages { background:linear-gradient(135deg,var(--b-accent) 0%,#7c3aed 100%);margin-top:24px; }
.b-avantages-inner {
  max-width:1200px;margin:0 auto;padding:32px 24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;
}
.b-avantage-card { display:flex;align-items:center;gap:16px; }
.b-avantage-icon {
  width:52px;height:52px;border-radius:14px;
  background:rgba(255,255,255,.2);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;font-size:24px;flex-shrink:0;
}
.b-avantage-card strong { display:block;font-size:14px;font-weight:800;color:#fff;margin-bottom:3px; }
.b-avantage-card p { font-size:12px;color:rgba(255,255,255,.75); }

/* ── FOOTER ── */
.b-footer { background:#0f172a;color:rgba(255,255,255,.7); }
.b-footer-inner {
  max-width:1200px;margin:0 auto;padding:44px 24px 32px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:36px;
}
.b-footer-logo { font-size:18px;font-weight:900;color:#fff;display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.b-footer-brand p { font-size:12px;line-height:1.7;color:rgba(255,255,255,.55); }
.b-footer-social { display:flex;gap:8px;margin-top:14px; }
.b-social-btn {
  display:inline-flex;align-items:center;gap:6px;
  background:#25d366;color:#fff;border:none;border-radius:8px;
  padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;
  transition:background .15s,transform .12s;
}
.b-social-btn:hover { background:#1da851;transform:scale(1.04); }

.b-footer-links,.b-footer-contact { display:flex;flex-direction:column;gap:8px; }
.b-footer-links strong,.b-footer-contact strong,.b-footer-newsletter strong {
  font-size:11px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px;display:block;
}
.b-footer-links a { font-size:12px;color:rgba(255,255,255,.6);text-decoration:none;transition:color .15s; }
.b-footer-links a:hover { color:#fff; }
.b-footer-contact span { font-size:12px;color:rgba(255,255,255,.6); }

.b-footer-newsletter p { font-size:12px;color:rgba(255,255,255,.55);line-height:1.5;margin-bottom:10px; }
.b-newsletter-form { display:flex;gap:8px; }
.b-newsletter-form input {
  flex:1;padding:9px 12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:8px;color:#fff;font-size:12px;outline:none;font-family:inherit;
}
.b-newsletter-form input::placeholder { color:rgba(255,255,255,.45); }
.b-newsletter-form input:focus { border-color:rgba(255,255,255,.5); }
.b-nl-btn {
  padding:9px 14px;background:var(--b-accent);color:#fff;border:none;border-radius:8px;
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:background .15s;
}
.b-nl-btn:hover { background:var(--b-accent2); }

.b-footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;padding:14px 24px;font-size:11px;color:rgba(255,255,255,.35);
}

/* ── PANIER SIDEBAR ── */
.b-cart-overlay { position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s; }
.b-cart-overlay.open { opacity:1;pointer-events:all; }
.b-cart-drawer {
  position:fixed;top:0;right:0;bottom:0;z-index:1001;width:min(420px,100vw);
  background:var(--b-panel);display:flex;flex-direction:column;
  box-shadow:-8px 0 48px rgba(15,23,42,.2);transform:translateX(100%);transition:transform .3s var(--b-ease);
}
.b-cart-drawer.open { transform:none; }
.b-cart-hdr { display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--b-line);flex-shrink:0; }
.b-cart-hdr h2 { font-size:16px;font-weight:800; }
.b-cart-close { width:32px;height:32px;border-radius:8px;border:1px solid var(--b-line);background:var(--b-bg);cursor:pointer;font-size:16px;display:grid;place-items:center;color:var(--b-ink2); }
.b-cart-items { flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px; }
.b-cart-empty-state { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:20px;color:var(--b-muted); }
.b-cart-empty-state p { font-size:14px; }
.b-empty-shop-btn { display:inline-block;padding:10px 22px;background:var(--b-accent);color:#fff;border-radius:10px;font-size:13px;font-weight:700;text-decoration:none; }
.b-cart-item { display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:start;background:var(--b-bg);border-radius:11px;padding:12px;border:1px solid var(--b-line); }
.b-cart-item-img { width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--b-line); }
.b-cart-item-info h4 { font-size:12px;font-weight:700;line-height:1.35;margin-bottom:3px; }
.b-cart-item-price { font-size:13px;color:var(--b-accent);font-weight:900;margin-bottom:6px; }
.b-cart-item-qty { display:flex;align-items:center;gap:6px; }
.b-qty-btn { width:26px;height:26px;border-radius:7px;border:1px solid var(--b-line);background:var(--b-panel);cursor:pointer;font-size:15px;font-weight:700;display:grid;place-items:center;color:var(--b-ink2); }
.b-qty-num { font-size:13px;font-weight:800;min-width:22px;text-align:center; }
.b-item-del { background:none;border:none;cursor:pointer;color:var(--b-muted);font-size:18px; }
.b-item-del:hover { color:#ef4444; }
.b-cart-footer { border-top:1px solid var(--b-line);padding:16px 18px;flex-shrink:0;display:flex;flex-direction:column;gap:12px; }
.b-cart-total-row { display:flex;flex-direction:column;gap:6px; }
.b-cart-total,.b-cart-delivery { display:flex;justify-content:space-between;align-items:center; }
.b-cart-total span,.b-cart-delivery span { font-size:13px;color:var(--b-ink2); }
.b-cart-total strong { font-size:22px;font-weight:900;color:var(--b-ink); }
.b-checkout-btn { width:100%;padding:14px;background:var(--b-accent);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .12s;font-family:inherit; }
.b-checkout-btn:hover { background:var(--b-accent2);transform:translateY(-1px); }
.b-cart-hint { text-align:center;font-size:11px;color:var(--b-muted); }

/* ── MODAL PRODUIT ── */
.b-prod-overlay { position:fixed;inset:0;z-index:900;background:rgba(15,23,42,.55);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px; }
.b-prod-overlay.open { display:flex;animation:bFade .2s ease; }
@keyframes bFade { from{opacity:0} to{opacity:1} }
.b-prod-box { position:relative;background:var(--b-panel);border-radius:var(--b-r-lg);width:min(900px,100%);max-height:92vh;overflow-y:auto;box-shadow:var(--b-sh-lg);animation:bBoxIn .28s var(--b-spring); }
@keyframes bBoxIn { from{transform:scale(.9) translateY(16px);opacity:0} to{transform:none;opacity:1} }
.b-prod-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch; }
.b-prod-media { position:relative;background:#f8fafc;display:flex;align-items:center;justify-content:center;padding:26px;min-height:340px;border-radius:var(--b-r-lg) 0 0 0; }
.b-prod-img { width:100%;aspect-ratio:1;object-fit:contain;background:transparent;border-radius:10px; }
.b-prod-img-ph { width:100%;aspect-ratio:1;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);display:grid;place-items:center;font-size:72px;border-radius:10px; }
.b-prod-badges { position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:6px;z-index:2; }
.b-prod-thumbs { position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 12px;z-index:2; }
.b-prod-thumb { width:54px;height:54px;border:2px solid #e2e8f0;border-radius:8px;overflow:hidden;cursor:pointer;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1); }
.b-prod-thumb img { width:100%;height:100%;object-fit:contain; }
.b-prod-thumb.active { border-color:var(--b-accent); }
.b-pbadge { font-size:11px;font-weight:800;padding:5px 10px;border-radius:20px;color:#fff;width:fit-content;box-shadow:0 2px 8px rgba(0,0,0,.15); }
.b-pbadge.flash { background:#ef4444; }
.b-pbadge.promo { background:#dc2626; }
.b-pbadge.new   { background:#16a34a; }
.b-prod-body { padding:24px 26px 28px; }
.b-prod-price-row { display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:8px; }
.b-prod-oldprice { font-size:16px;color:var(--b-muted);text-decoration:line-through;font-weight:600; }
.b-prod-disc { font-size:12px;font-weight:800;color:#fff;background:#dc2626;padding:3px 8px;border-radius:6px; }
.b-prod-price.sale { color:#dc2626; }
.b-prod-attrs { display:flex;flex-direction:column;gap:1px;margin:14px 0 18px;border:1px solid var(--b-line);border-radius:10px;overflow:hidden; }
.b-prod-attr { display:flex;justify-content:space-between;gap:12px;padding:9px 13px;font-size:13px;background:var(--b-bg); }
.b-prod-attr span { color:var(--b-muted); }
.b-prod-attr strong { color:var(--b-ink);font-weight:700; }
.b-prod-related { padding:4px 26px 26px; }
.b-prod-related-title { font-size:15px;font-weight:800;color:var(--b-ink);margin:10px 0 14px;padding-top:18px;border-top:1px solid var(--b-line); }
.b-prod-related-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,190px));gap:14px;justify-content:center;padding-bottom:6px; }
.b-prod-rel-card { width:100%;border:1px solid var(--b-line);border-radius:12px;overflow:hidden;cursor:pointer;background:var(--b-panel);transition:transform .15s,box-shadow .15s; }
.b-prod-rel-card:hover { transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.1); }
.b-prod-rel-card img, .b-prod-rel-card .b-rel-ph { width:100%;aspect-ratio:1;object-fit:contain;background:#f8fafc;display:grid;place-items:center;font-size:30px; }
.b-rel-name { font-size:12px;font-weight:600;padding:8px 10px 2px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.b-rel-price { font-size:13px;font-weight:800;color:var(--b-accent);padding:0 10px 10px; }
.b-prod-close { position:absolute;top:14px;right:14px;z-index:5;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;font-size:15px;color:var(--b-ink);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.15); }
.b-prod-cat { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--b-accent);margin-bottom:6px; }
.b-prod-name { font-size:22px;font-weight:900;margin-bottom:4px;line-height:1.2; }
.b-prod-code { font-size:11px;color:var(--b-muted);font-family:monospace;margin-bottom:4px; }
.b-prod-brand { font-size:12px;color:var(--b-ink2);font-weight:600;margin-bottom:12px; }
.b-prod-stars { font-size:14px;color:#f59e0b;margin-bottom:12px; }
.b-prod-price { font-size:30px;font-weight:900;color:var(--b-accent);margin-bottom:6px; }
.b-prod-stock-info { font-size:12px;color:var(--b-success);font-weight:700;margin-bottom:20px; }
.b-prod-stock-info.low { color:var(--b-warn); }
.b-prod-stock-info.oos { color:var(--b-muted); }
.b-prod-qty-row { display:flex;align-items:center;gap:12px;margin-bottom:16px; }
.b-prod-qty-row label { font-size:12px;font-weight:700;color:var(--b-ink2); }
.b-prod-qty-ctrl { display:flex;align-items:center;gap:8px; }
.b-prod-qty-input { width:60px;text-align:center;border:1.5px solid var(--b-line);border-radius:8px;padding:7px;font-size:15px;font-weight:800;outline:none;font-family:inherit; }
.b-prod-qty-input:focus { border-color:var(--b-accent); }
.b-prod-add-btn { width:100%;padding:14px;background:var(--b-accent);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .12s;font-family:inherit; }
.b-prod-add-btn:hover:not(:disabled) { background:var(--b-accent2);transform:translateY(-1px); }
.b-prod-add-btn:disabled { background:var(--b-muted);cursor:not-allowed; }
.b-prod-share-btn { width:100%;margin-top:10px;padding:11px;background:transparent;color:var(--b-accent);border:1.5px solid var(--b-accent);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,color .15s;font-family:inherit; }
.b-prod-share-btn:hover { background:var(--b-accent);color:#fff; }

/* ── BOUTON & MODAL COMPTE CLIENT ── */
/* En-tête sur fond accent : le bouton compte reste BLANC (comme panier/mode sombre) */
.b-account-btn { display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:#fff;padding:6px 8px;border-radius:10px;transition:background .15s; }
.b-account-btn:hover { background:rgba(255,255,255,.2); }
.b-account-btn.is-auth { color:#fff; }
.b-account-btn.is-auth:hover { background:rgba(255,255,255,.2); }
.b-account-ico { position:relative;display:inline-grid;place-items:center;flex-shrink:0; }
.b-account-check { display:none;position:absolute;right:-5px;bottom:-4px;width:12px;height:12px;padding:2px;box-sizing:content-box;background:#16a34a;color:#fff;border:2px solid var(--b-accent);border-radius:50%; }
.b-account-btn.is-auth .b-account-check { display:block; }
.b-account-label { font-size:13px;font-weight:800;line-height:1.1;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:#fff; }
.b-account-label .b-acc-hi { display:block;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.8); }
/* Eyebrow « Bonjour, » dans l'en-tête du panneau compte */
.b-acc-hello { display:block;font-size:12px;font-weight:700;color:var(--b-muted);line-height:1;margin-bottom:2px; }
.b-acc-overlay { position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.6);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px; }
.b-acc-overlay.open { display:flex; }
.b-acc-box { background:var(--b-panel);border-radius:18px;width:100%;max-width:600px;padding:30px 30px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.3);max-height:94vh;overflow-y:auto;border:1px solid var(--b-line); }
.b-acc-close { position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:var(--b-line);border:none;cursor:pointer;font-size:15px;color:var(--b-ink);display:grid;place-items:center; }
.b-acc-tabs { display:flex;gap:8px;margin-bottom:18px; }
.b-acc-tab { flex:1;padding:10px;border:none;background:var(--b-line);color:var(--b-ink2);border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s; }
.b-acc-tab.active { background:var(--b-accent);color:#fff; }
.b-acc-form { display:flex;flex-direction:column;gap:6px; }
.b-acc-form label { font-size:12px;font-weight:700;color:var(--b-ink2);margin-top:6px; }
.b-acc-form input { padding:11px 13px;border:1.5px solid var(--b-line);border-radius:10px;font-size:14px;outline:none;font-family:inherit;background:var(--b-bg);color:var(--b-ink); }
.b-acc-form input:focus { border-color:var(--b-accent); }
.b-acc-submit { margin-top:16px;padding:13px;background:var(--b-accent);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;transition:background .15s; }
.b-acc-submit:hover { background:var(--b-accent2); }
.b-acc-avatar { width:64px;height:64px;border-radius:50%;background:var(--b-accent);color:#fff;font-size:28px;font-weight:900;display:grid;place-items:center;margin:0 auto 12px; }
.b-acc-title { text-align:center;font-size:18px;font-weight:800;color:var(--b-ink);margin:0; }
.b-acc-sub { text-align:center;font-size:13px;color:var(--b-muted);margin:4px 0 16px; }
.b-acc-info { display:flex;flex-direction:column;gap:8px;margin-bottom:18px; }
.b-acc-info-row { display:flex;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--b-bg);border:1px solid var(--b-line);border-radius:10px;font-size:13px; }
.b-acc-info-row span { color:var(--b-muted); }
/* Sidebar catégories : liste pro (icône SVG + nom + compteur + chevron + flyout) */
#b-cats-opts { overflow:visible;max-height:none; }   /* le flyout ne doit pas être rogné */
.b-catlist-row { position:relative;display:flex;align-items:center; }
.b-catlist-item { flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--b-ink2,#334155);font-size:13px;font-weight:600;transition:background .15s,color .15s; }
.b-catlist-item:hover { background:var(--b-accent-light,#e8eeff);color:var(--b-accent); }
.b-catlist-item.active { background:var(--b-accent-light,#eef3ff);color:var(--b-accent);font-weight:800; }
.b-catlist-ico { width:22px;height:22px;display:grid;place-items:center;flex-shrink:0;color:var(--b-accent); }
.b-catlist-ico svg { width:19px;height:19px; }
.b-catlist-item.active .b-catlist-ico { color:var(--b-accent); }
.b-catlist-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.b-catlist-n { font-size:11px;color:var(--b-muted);font-weight:700;flex-shrink:0; }
.b-catlist-chev { color:var(--b-muted);flex-shrink:0;transition:transform .2s; }
.b-catlist-item:hover .b-catlist-chev, .b-catlist-item:hover .b-catlist-n { color:var(--b-accent); }
/* Bouton chevron (ouvre le flyout / accordéon des sous-catégories) */
.b-catlist-tog { flex-shrink:0;display:grid;place-items:center;width:30px;height:34px;margin-left:-4px;border:0;background:transparent;color:var(--b-muted);cursor:pointer;border-radius:8px; }
.b-catlist-tog:hover { background:var(--b-accent-light,#e8eeff);color:var(--b-accent); }
.b-catlist-tog .b-catlist-chev { transition:transform .2s; }

/* Flyout des sous-catégories */
.b-catlist-flyout { display:none;position:absolute;left:100%;top:-6px;z-index:40;width:250px;background:var(--b-panel,#fff);border:1px solid var(--b-line,#e5e7eb);border-radius:16px;box-shadow:0 18px 45px rgba(15,23,42,.18);padding:14px; }
.b-catlist-fly-head { display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--b-accent);padding-bottom:9px;margin-bottom:8px;border-bottom:2px solid var(--b-accent-light,#eef3ff); }
.b-catlist-fly-head svg { width:17px;height:17px;flex-shrink:0; }
.b-catlist-fly-subs { display:flex;flex-direction:column;gap:2px;max-height:230px;overflow-y:auto; }
.b-catlist-fly-sub { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:9px;text-decoration:none;color:var(--b-ink2,#334155);font-size:13px;font-weight:600;transition:background .15s,color .15s; }
.b-catlist-fly-sub:hover { background:var(--b-bg,#f8fafc);color:var(--b-accent); }
.b-catlist-fly-n { font-size:11px;color:var(--b-muted);font-weight:700; }
.b-catlist-fly-all { display:block;margin-top:10px;padding:11px 12px;background:var(--b-accent);color:#fff;border-radius:11px;text-align:center;text-decoration:none;font-size:13px;font-weight:700;transition:filter .15s; }
.b-catlist-fly-all:hover { filter:brightness(1.07); }

/* Desktop (souris) : le flyout apparaît au survol de la ligne, à droite. */
@media (hover:hover) and (pointer:fine) {
  .b-catlist-row.has-sub:hover .b-catlist-flyout { display:block;animation:bFlyIn .16s ease; }
  .b-catlist-row.has-sub:hover > .b-catlist-item { background:var(--b-accent-light,#e8eeff);color:var(--b-accent); }
}
@keyframes bFlyIn { from { opacity:0;transform:translateX(-6px); } to { opacity:1;transform:none; } }

/* Tactile / mobile : le flyout se déplie sous la ligne (accordéon). */
@media (hover:none), (pointer:coarse), (max-width:900px) {
  .b-catlist-flyout { position:static;left:auto;top:auto;width:auto;box-shadow:none;border:0;border-radius:0;padding:4px 4px 8px 30px; }
  .b-catlist-row:not(.open) .b-catlist-flyout { display:none; }
  .b-catlist-row.open .b-catlist-flyout { display:block; }
  .b-catlist-row.open .b-catlist-tog .b-catlist-chev { transform:rotate(90deg); }
  .b-catlist-fly-head { display:none; }
}

.b-acc-logout { width:100%;padding:12px;background:transparent;color:#dc2626;border:1.5px solid #dc2626;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;margin-top:8px; }
.b-acc-logout:hover { background:#dc2626;color:#fff; }

/* Statistiques espace client */
.b-acc-stats { display:flex;gap:8px;margin-bottom:16px; }
.b-acc-stat { flex:1;text-align:center;background:var(--b-bg);border:1px solid var(--b-line);border-radius:12px;padding:10px 6px; }
.b-acc-stat strong { display:block;font-size:16px;font-weight:900;color:var(--b-accent); }
.b-acc-stat span { font-size:10px;color:var(--b-muted);font-weight:600; }

/* Historique commandes */
.b-acc-orders-hdr { font-size:13px;font-weight:800;color:var(--b-ink);margin:6px 0 10px; }
.b-acc-orders { display:flex;flex-direction:column;gap:10px;margin-bottom:16px; }
.b-acc-orders-loading, .b-acc-orders-empty { text-align:center;color:var(--b-muted);font-size:13px;padding:18px 6px;line-height:1.6; }

/* ── Espace client redesign : tailles, en-tête, favoris, onglets, état vide ── */
.b-acc-sizes { display:flex;gap:6px;background:var(--b-bg);border:1px solid var(--b-line);border-radius:99px;padding:4px;width:max-content;margin:0 0 16px; }
.b-acc-size { border:none;background:transparent;color:var(--b-ink2);font-weight:700;font-size:12px;padding:6px 14px;border-radius:99px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s; }
.b-acc-size.active { background:var(--b-accent);color:#fff;box-shadow:0 2px 8px rgba(26,79,255,.35); }

.b-acc-head { display:flex;align-items:center;gap:14px;margin-bottom:14px; }
.b-acc-head .b-acc-avatar { margin:0;flex-shrink:0;background:linear-gradient(135deg,#f97316,#ea580c); }
.b-acc-head-txt { min-width:0; }
.b-acc-name { font-size:18px;font-weight:900;color:var(--b-ink);margin:0;line-height:1.2;word-break:break-word; }
.b-acc-phone { font-size:13px;color:var(--b-muted);margin:2px 0 0;font-family:monospace; }

.b-acc-fav-btn { width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--b-bg);border:1px solid var(--b-line);border-radius:12px;padding:12px;font-size:14px;font-weight:800;color:var(--b-ink);cursor:pointer;font-family:inherit;margin-bottom:16px;transition:border-color .15s,background .15s; }
.b-acc-fav-btn:hover { border-color:#f43f5e;background:#fff1f2; }
.b-acc-fav-pill { background:#f43f5e;color:#fff;font-size:11px;font-weight:900;min-width:20px;height:20px;border-radius:99px;display:grid;place-items:center;padding:0 6px; }

.b-acc-ptabs { display:flex;gap:6px;background:var(--b-bg);border:1px solid var(--b-line);border-radius:12px;padding:5px;margin-bottom:16px; }
.b-acc-ptab { flex:1;border:none;background:transparent;color:var(--b-ink2);font-weight:700;font-size:13px;padding:9px 6px;border-radius:9px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .15s,color .15s; }
.b-acc-ptab.active { background:var(--b-panel);color:var(--b-accent);box-shadow:0 2px 8px rgba(15,23,42,.08); }
.b-acc-ppane[hidden] { display:none; }

/* État vide compact : « Découvrir » et « Se déconnecter » restent visibles sans défilement */
.b-acc-empty { text-align:center;padding:10px 10px 4px; }
.b-acc-empty-ico { font-size:36px;margin-bottom:6px; }
.b-acc-empty p { color:var(--b-muted);font-size:13px;margin:0 0 10px; }
.b-acc-empty-btn { width:100%;padding:12px;background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:filter .15s; }
.b-acc-empty-btn:hover { filter:brightness(1.05); }

/* Sélecteur de taille → ajuste la largeur du modal */
.b-acc-box[data-acc-size="sm"] { max-width:460px; }
.b-acc-box[data-acc-size="md"] { max-width:600px; }
.b-acc-box[data-acc-size="lg"] { max-width:760px; }

/* ── Carte commande : barre de progression + articles + boutons ── */
.b-acc-steps { display:flex; align-items:flex-start; margin:14px 0 10px; }
.b-acc-step { display:flex; flex-direction:column; align-items:center; gap:5px; flex:0 0 auto; }
.b-acc-step-dot { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:var(--b-line); color:var(--b-muted); }
.b-acc-step.done .b-acc-step-dot { background:#16a34a; color:#fff; }
.b-acc-step-lbl { font-size:10px; font-weight:700; color:var(--b-muted); white-space:nowrap; }
.b-acc-step.done .b-acc-step-lbl { color:var(--b-ink); }
.b-acc-step-line { flex:1 1 auto; height:3px; background:var(--b-line); border-radius:2px; margin:13px 2px 0; }
.b-acc-step-line.on { background:#16a34a; }

.b-acc-items { display:flex; flex-direction:column; gap:5px; margin:8px 0; padding-top:10px; border-top:1px solid var(--b-line); }
.b-acc-item-row { display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--b-ink); }
.b-acc-item-row em { color:var(--b-muted); font-style:normal; }
.b-acc-order-addr { font-size:12px; color:var(--b-muted); margin:2px 0 10px; }

.b-acc-obtns { display:flex; gap:8px; flex-wrap:wrap; }
.b-acc-obtn { flex:1 1 0; min-width:92px; text-align:center; padding:9px 8px; border:1.5px solid var(--b-line); border-radius:10px; background:var(--b-bg); color:var(--b-ink); font-size:12px; font-weight:700; cursor:pointer; text-decoration:none; font-family:inherit; white-space:nowrap; transition:background .15s,border-color .15s; }
.b-acc-obtn:hover:not(:disabled) { background:var(--b-line); }
.b-acc-obtn:disabled { opacity:.5; cursor:not-allowed; }
.b-acc-obtn.primary { border-color:#16a34a; color:#16a34a; }
.b-acc-obtn.primary:hover { background:#dcfce7; }
.b-acc-cancel { text-align:center; color:#dc2626; font-weight:700; font-size:13px; padding:10px; background:#fee2e2; border-radius:10px; margin:10px 0; }
.b-acc-order-details[hidden] { display:none; }
.b-acc-order-details { animation:bAccDetailIn .2s ease; }
@keyframes bAccDetailIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.b-acc-obtn.active { background:var(--b-line); }
.b-acc-input-locked { background:var(--b-line) !important; color:var(--b-muted) !important; cursor:not-allowed; }

/* ── Modal Mot de passe oublié ── */
.b-forgot-title { font-size:18px;font-weight:900;color:var(--b-ink);margin:0 0 12px; }
.b-forgot-steps { margin:0 0 18px;padding-left:18px;color:var(--b-ink2);font-size:13px;line-height:1.7; }
.b-forgot-steps li { margin-bottom:2px; }
.b-forgot-code-btn { width:100%;padding:13px;margin:6px 0 4px;background:#0d9488;color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;transition:filter .15s; }
.b-forgot-code-btn:hover:not(:disabled) { filter:brightness(1.06); }
.b-forgot-code-btn:disabled { opacity:.6;cursor:not-allowed; }
.b-acc-order { background:var(--b-bg);border:1px solid var(--b-line);border-radius:12px;padding:12px; }
.b-acc-order-top { display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px; }
.b-acc-order-ref { font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--b-ink); }
.b-acc-order-badge { font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap; }
.b-acc-order-meta { display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--b-muted);margin-bottom:4px; }
.b-acc-order-meta strong { color:var(--b-accent);font-size:14px; }
.b-acc-order-items { font-size:11px;color:var(--b-ink2);line-height:1.5;margin-bottom:8px; }
.b-acc-order-track { font-size:12px;font-weight:700;color:var(--b-accent);text-decoration:none; }
.b-acc-order-track:hover { text-decoration:underline; }
.b-prod-close { position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.88);border:1px solid rgba(0,0,0,.08);cursor:pointer;font-size:16px;display:grid;place-items:center;color:var(--b-ink);box-shadow:0 2px 8px rgba(0,0,0,.12); }

/* ── MODAL COMMANDE ── */
.b-order-overlay { position:fixed;inset:0;z-index:1100;background:rgba(15,23,42,.6);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px; }
.b-order-overlay.open { display:flex;animation:bFade .2s ease; }
.b-order-box { background:var(--b-panel);border-radius:var(--b-r-lg);width:min(500px,100%);max-height:94vh;overflow-y:auto;box-shadow:var(--b-sh-lg);animation:bBoxIn .28s var(--b-spring); }
.b-order-hdr { padding:20px 24px 16px;border-bottom:1px solid var(--b-line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--b-panel);z-index:1; }
.b-order-hdr h2 { font-size:18px;font-weight:800; }
.b-order-body { padding:20px 24px;display:flex;flex-direction:column;gap:16px; }
.b-field label { display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--b-ink2);margin-bottom:6px; }
.b-field input,.b-field textarea { width:100%;padding:11px 14px;border:1.5px solid var(--b-line);border-radius:10px;background:var(--b-bg);color:var(--b-ink);font-size:14px;outline:none;transition:border-color .15s;font-family:inherit; }
.b-field input:focus,.b-field textarea:focus { border-color:var(--b-accent);background:#fff; }
.b-field textarea { min-height:80px;resize:vertical; }
.b-order-summary { background:var(--b-bg);border:1.5px solid var(--b-line);border-radius:12px;padding:16px; }
.b-order-summary-title { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--b-ink2);margin-bottom:12px; }
.b-order-sum-row { display:flex;justify-content:space-between;font-size:13px;padding:4px 0;border-bottom:1px solid var(--b-line); }
.b-order-sum-row:last-of-type { border:none;font-weight:900;font-size:15px;padding-top:10px;color:var(--b-accent); }
.b-order-delivery-note { font-size:11px;color:var(--b-success);font-weight:600;margin-top:10px; }
.b-submit-btn { width:100%;padding:15px;background:var(--b-accent);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s;font-family:inherit; }
.b-submit-btn:hover:not(:disabled) { background:var(--b-accent2); }
.b-submit-btn:disabled { opacity:.6;cursor:not-allowed; }
.b-order-legal { font-size:11px;color:var(--b-muted);text-align:center;line-height:1.6; }

/* ── CONFIRMATION ── */
.b-confirm-box { text-align:center;padding:36px 28px; }
.b-confirm-icon { font-size:60px;margin-bottom:14px;animation:bConfirmPop .5s var(--b-spring); }
@keyframes bConfirmPop { from{transform:scale(0)} to{transform:scale(1)} }
.b-confirm-title { font-size:22px;font-weight:900;margin-bottom:10px; }
.b-confirm-ref { display:inline-block;background:var(--b-accent);color:#fff;font-size:14px;font-weight:800;padding:7px 20px;border-radius:20px;font-family:monospace;margin:8px 0 18px;letter-spacing:.06em; }
.b-confirm-msg { font-size:13px;color:var(--b-ink2);line-height:1.7;margin-bottom:22px; }
.b-confirm-close { padding:12px 32px;background:var(--b-accent);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit; }

/* ── TOAST ── */
.b-toast { position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--b-ink);color:#fff;padding:11px 22px;border-radius:50px;font-size:13px;font-weight:600;box-shadow:0 8px 28px rgba(0,0,0,.28);opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .22s,transform .22s var(--b-spring);z-index:9999; }
.b-toast.show { opacity:1;transform:translateX(-50%) translateY(0); }
.b-toast.success { background:#16a34a; }
.b-toast.error { background:#dc2626; }

/* ── WHATSAPP BUTTON ── */
.b-wa-btn { position:fixed;bottom:88px;right:20px;z-index:500;width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 4px 20px rgba(37,211,102,.45);text-decoration:none;animation:bWaPulse 2.5s ease-in-out infinite; }
.b-wa-btn:hover { transform:scale(1.12);animation:none; }
@keyframes bWaPulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.45)} 50%{box-shadow:0 4px 28px rgba(37,211,102,.75),0 0 0 8px rgba(37,211,102,.12)} }

/* Bouton Facebook flottant : juste au-dessus du WhatsApp */
.b-fb-btn { position:fixed;bottom:152px;right:20px;z-index:500;width:52px;height:52px;border-radius:50%;background:#1877f2;color:#fff;display:grid;place-items:center;box-shadow:0 4px 20px rgba(24,119,242,.45);text-decoration:none;transition:transform .15s; }
.b-fb-btn:hover { transform:scale(1.12); }

/* ── BOTTOM NAV MOBILE ── */
.b-bottom-nav { display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--b-panel);border-top:1px solid var(--b-line);box-shadow:0 -4px 20px rgba(15,23,42,.1);padding:8px 4px max(8px,env(safe-area-inset-bottom));grid-template-columns:repeat(5,1fr); }
.b-bnav-item { display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--b-muted);text-decoration:none;cursor:pointer;padding:4px 8px;background:none;border:none;font-family:inherit;transition:color .15s; }
.b-bnav-item.b-bnav-active,.b-bnav-item:hover { color:var(--b-accent); }
.b-bnav-cart { position:relative; }
.b-bnav-cart-icon { width:40px;height:40px;background:var(--b-accent);border-radius:50%;display:grid;place-items:center;color:#fff;margin-bottom:-2px;box-shadow:0 4px 12px rgba(26,79,255,.4); }
.b-bnav-count { position:absolute;top:0;right:14px;background:#ef4444;color:#fff;font-size:9px;font-weight:900;min-width:16px;height:16px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--b-panel); }

/* ── LOADER ── */
.b-loader { grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 0;gap:12px;color:var(--b-muted); }
.b-spinner { width:36px;height:36px;border-radius:50%;border:3px solid var(--b-line);border-top-color:var(--b-accent);animation:bSpin .7s linear infinite; }
@keyframes bSpin { to{transform:rotate(360deg)} }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .b-footer-inner { grid-template-columns:1fr 1fr; }
  .b-footer-brand { grid-column:1/-1; }
}
@media (max-width:860px) {
  .b-hero-slide { grid-template-columns:1fr; }
  .b-hero-visual { display:none; }
}
@media (max-width:640px) {
  body { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  .b-bottom-nav { display:grid; }
  .b-social-bar { display:none; }
  /* Header mobile : tout sur une ligne, verticalement centré ; recherche au milieu */
  .b-header-inner { padding:0 14px; gap:10px; height:56px; }
  .b-logo { flex:0 0 auto; min-width:0; }                       /* icône du logo, ne s'étire pas */
  .b-logo-name { display:none; }                                /* texte du logo masqué */
  .b-header-search { flex:1 1 auto; width:auto; min-width:0; }   /* recherche : occupe et centre le milieu */
  .b-header-actions { flex:0 0 auto; gap:8px; }
  /* Mobile : on retire panier, favoris et compte du header (panier + compte sont dans la barre du bas) */
  .b-cart-btn, .b-fav-btn, .b-account-btn { display:none !important; }
  /* Bloc réassurance (Livraison, Paiement, Achat, Support) masqué sur mobile */
  .b-reassurance { display:none; }
  .b-hero-slide { padding:40px 16px 60px; }
  .b-hero h1,.b-hero-slide h1 { font-size:26px; }
  .b-section-wrap { padding:0 14px; }
  .b-grid { grid-template-columns:repeat(2,1fr);gap:12px; }
  .b-add-btn-full { max-height:48px;padding:11px 10px;opacity:1;font-size:12px; }
  .b-cat-visual-grid { grid-template-columns:repeat(2,1fr);gap:10px; }
  .b-temo-grid { grid-template-columns:1fr; }
  .b-prod-box { border-radius:20px 20px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:90vh;width:100%; }
  .b-prod-grid { grid-template-columns:1fr; }
  .b-prod-media { min-height:0;padding:18px;border-radius:20px 20px 0 0; }
  .b-prod-img, .b-prod-img-ph { aspect-ratio:4/3; }
  .b-prod-body { padding:18px 18px 22px; }
  .b-prod-related { padding:0 18px 20px; }
  .b-order-box { border-radius:20px 20px 0 0;position:fixed;bottom:0;left:0;right:0;max-height:96vh;width:100%; }
  .b-wa-btn { bottom:90px;right:14px;width:46px;height:46px; }
  .b-fb-btn { bottom:148px;right:14px;width:46px;height:46px; }   /* Facebook juste au-dessus du WhatsApp (comme sur PC) */
  .b-toast { bottom:90px; }
  .b-avantages-inner { grid-template-columns:1fr 1fr; }
  .b-footer-inner { grid-template-columns:1fr; }
  .b-newsletter-form { flex-direction:column; }
  .b-hero-stats { gap:14px; }
  .b-bnav-item { font-size:9px;padding:4px 4px; }
}
@media (min-width:641px) {
  .b-wa-btn { bottom:24px; }
  .b-fb-btn { bottom:88px; }
  .b-toast { bottom:28px; }
}

/* ── PETITS TÉLÉPHONES (≤480px) ── */
@media (max-width:480px) {
  .b-header-inner { gap:8px; padding:0 10px; height:54px; }
  .b-sticky-tools { top:54px; }
  .b-logo-icon { width:34px;height:34px;font-size:17px; }
  .b-logo-name { font-size:15px; }
  .b-header-search { padding:8px 12px; min-width:0; }
  .b-header-search input { font-size:12px; }
  .b-header-actions { gap:4px;margin-left:4px; }
  .b-account-label { display:none !important; }   /* icône seule pour gagner de la place */
  .b-account-btn, .b-dark-btn, .b-cart-btn { padding:6px; }
  .b-hero-slide { padding:32px 14px 52px; }
  .b-hero h1,.b-hero-slide h1 { font-size:23px; }
  .b-hero-slide p { font-size:13px; }
  .b-hero-stats { gap:10px;flex-wrap:wrap; }
  .b-grid { gap:10px; }
  .b-acc-box { padding:22px 18px;border-radius:16px; }
  .b-acc-stats { gap:6px; }
  .b-acc-stat strong { font-size:14px; }
}

/* ── TRÈS PETITS ÉCRANS (≤360px) ── */
@media (max-width:360px) {
  .b-logo-name { display:none; }     /* logo en icône seule, place à la recherche */
  .b-hero h1,.b-hero-slide h1 { font-size:21px; }
  .b-cat-visual-grid { grid-template-columns:1fr; }
}

/* ── Pagination du catalogue ── */
.b-pagination { display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin:28px 0 8px; }
.b-pg-btn {
  min-width:38px;height:38px;padding:0 12px;border-radius:10px;
  border:1px solid var(--b-line);background:#fff;color:var(--b-ink2);
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.b-pg-btn:hover:not(:disabled) { border-color:var(--b-accent);color:var(--b-accent); }
.b-pg-btn:active:not(:disabled) { transform:scale(.95); }
.b-pg-btn.active { background:var(--b-accent);color:#fff;border-color:var(--b-accent); }
.b-pg-btn.nav { font-size:18px;font-weight:900; }
.b-pg-btn:disabled { opacity:.4;cursor:not-allowed; }
.b-pg-dots { padding:0 4px;color:var(--b-muted);font-weight:800; }

/* ── Skeleton loading (cartes fantômes animées) ── */
.b-skel-card { background:#fff;border:1px solid var(--b-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column; }
.b-skel-body { padding:12px 14px;display:flex;flex-direction:column;gap:9px;flex:1; }
.b-skel { position:relative;overflow:hidden;background:#eef2f7;border-radius:6px; }
.b-skel::after {
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:b-shimmer 1.3s infinite;
}
@keyframes b-shimmer { 100% { transform:translateX(100%); } }
.b-skel-img  { aspect-ratio:1;border-radius:0; }
.b-skel-line { height:11px; }
.b-skel-line.sm { width:40%; }
.b-skel-line.md { width:60%; }
.b-skel-price{ height:18px;width:50%;margin-top:4px; }
.b-skel-btn  { height:42px;border-radius:0;margin:0; }
@media (prefers-reduced-motion:reduce){ .b-skel::after{ animation:none; } }

/* ── Catalogue : filtres latéraux + grille ── */
.b-cat-layout { display:flex;gap:22px;align-items:flex-start; }
.b-cat-main { flex:1;min-width:0; }
.b-filters {
  width:240px;flex-shrink:0;background:#fff;border:1px solid var(--b-line);
  border-radius:16px;overflow:hidden;position:sticky;top:74px;
}
/* Desktop : le flyout des sous-catégories doit déborder à droite ET passer AU-DESSUS
   de la grille produits (sinon il apparaît rogné / « sous les articles »).
   Placé après la règle de base pour gagner dans la cascade. Mobile = drawer, reste clippé. */
@media (min-width:861px) { .b-filters { overflow:visible;z-index:30; } }
.b-filters-head {
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--b-line);font-weight:800;font-size:14px;
}
.b-filters-head > span:first-child { flex:1; }
.b-filters-clear { background:none;border:none;color:var(--b-accent);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit; }
.b-filters-clear:hover { text-decoration:underline; }
.b-filters-mclose { display:none;background:none;border:none;font-size:18px;cursor:pointer;color:var(--b-muted); }
.b-filters-body { padding:6px 16px 16px; }
.b-filter-group { padding:14px 0;border-bottom:1px solid var(--b-line); }
.b-filter-group:last-child { border-bottom:none; }
.b-filter-title { font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--b-ink2);margin-bottom:10px; }
.b-price-display { font-size:14px;font-weight:800;color:var(--b-ink);margin-bottom:10px; }
.b-price-sliders { position:relative;height:32px; }
.b-price-range { position:absolute;left:0;right:0;width:100%;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0;top:12px; }
.b-price-range::-webkit-slider-runnable-track { height:4px;background:var(--b-line);border-radius:4px; }
.b-price-range::-moz-range-track { height:4px;background:var(--b-line);border-radius:4px; }
.b-price-range::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--b-accent);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;pointer-events:auto;margin-top:-7px; }
.b-price-range::-moz-range-thumb { width:16px;height:16px;border-radius:50%;background:var(--b-accent);border:2px solid #fff;cursor:pointer;pointer-events:auto; }
.b-filter-opts { display:flex;flex-direction:column;gap:7px;max-height:200px;overflow-y:auto; }
.b-filter-opt { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--b-ink2);cursor:pointer; }
.b-filter-opt input { width:15px;height:15px;accent-color:var(--b-accent);cursor:pointer;flex-shrink:0; }
.b-filter-opt .b-filter-opt-n { margin-left:auto;font-size:11px;color:var(--b-muted);font-weight:700; }
.b-filter-opt .b-color-dot { width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);flex-shrink:0; }
.b-filters-toggle { display:none;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--b-line);background:#fff;border-radius:30px;font-size:13px;font-weight:700;color:var(--b-ink);cursor:pointer;font-family:inherit; }
.b-filters-overlay { display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1400; }

@media (max-width:860px) {
  .b-filters-toggle { display:inline-flex; }
  .b-filters {
    position:fixed;top:0;left:0;bottom:0;width:84%;max-width:320px;z-index:1500;
    border-radius:0;transform:translateX(-100%);transition:transform .25s ease;
    display:flex;flex-direction:column;
  }
  .b-filters.open { transform:translateX(0); }
  .b-filters-body { overflow-y:auto;flex:1; }
  .b-filters-mclose { display:block; }
  .b-filters-overlay.open { display:block; }
}

/* ── Puces de filtres actifs ── */
.b-active-filters { display:none;flex-wrap:wrap;gap:7px;margin-bottom:16px; }
.b-chip {
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:30px;
  border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s;
}
.b-chip:hover { background:#dbeafe; }
.b-chip-x { font-size:11px;opacity:.7; }
.b-chip-clear { background:#fef2f2;border-color:#fecaca;color:#dc2626; }
.b-chip-clear:hover { background:#fee2e2; }

/* ── Bouton Favoris (header) ── */
.b-fav-btn {
  position:relative;width:44px;height:44px;border-radius:10px;
  background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.28);
  color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s;
}
.b-fav-btn:hover { background:rgba(255,255,255,.32); }
.b-fav-count {
  position:absolute;top:-7px;right:-7px;background:#ef4444;color:#fff;
  font-size:9px;font-weight:900;min-width:18px;height:18px;border-radius:50%;
  place-items:center;padding:0 3px;border:2px solid var(--b-accent);
}
@media (max-width:640px){ .b-fav-btn { padding:6px;width:auto;height:auto; } }

/* ── Prix Min/Max + OK ── */
.b-price-inputs { display:flex;align-items:center;gap:6px; }
.b-price-input { width:100%;min-width:0;padding:8px 9px;border:1px solid var(--b-line);border-radius:9px;font-size:13px;background:#fff;color:var(--b-ink);font-family:inherit; }
.b-price-input:focus { outline:none;border-color:var(--b-accent); }
.b-price-sep { color:var(--b-muted);flex-shrink:0; }
.b-price-ok { flex-shrink:0;padding:8px 14px;border:none;border-radius:9px;background:#ea580c;color:#fff;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit; }
.b-price-ok:hover { filter:brightness(1.05); }

/* ── Toolbar : Trier / Afficher ── */
.b-toolbar-right { display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap; }
.b-toolbar-lbl { display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--b-muted);text-transform:uppercase;letter-spacing:.03em; }

/* ── Widget Top ventes (sidebar) ── */
.b-sidebar-best { display:flex;flex-direction:column;gap:10px; }
.b-sb-best-item { display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit; }
.b-sb-best-rank { width:20px;height:20px;flex-shrink:0;border-radius:50%;background:var(--b-accent);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center; }
.b-sb-best-item img, .b-sb-best-ph { width:42px;height:42px;flex-shrink:0;border-radius:8px;object-fit:cover;background:var(--b-line);display:grid;place-items:center;font-size:18px; }
.b-sb-best-info { display:flex;flex-direction:column;gap:2px;min-width:0; }
.b-sb-best-name { font-size:12px;font-weight:600;color:var(--b-ink);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.b-sb-best-price { font-size:12px;font-weight:800;color:#ea580c; }
.b-sb-best-item:hover .b-sb-best-name { color:var(--b-accent); }

/* ── Accordéon des groupes de filtres ── */
.b-filter-head { width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;padding:0;margin-bottom:10px;cursor:pointer;font-family:inherit;color:inherit; }
.b-filter-head .b-filter-title { margin-bottom:0;flex:1;text-align:left; }
.b-filter-badge { font-size:10px;font-weight:900;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--b-accent);color:#fff;display:none;place-items:center; }
.b-filter-badge:not(:empty) { display:grid; }
.b-filter-chevron { width:16px;height:16px;color:var(--b-muted);flex-shrink:0;transition:transform .2s; }
.b-filter-group.collapsed .b-filter-chevron { transform:rotate(-90deg); }
.b-filter-group.collapsed .b-filter-opts,
.b-filter-group.collapsed .b-color-swatches,
.b-filter-group.collapsed .b-filter-content,
.b-filter-group.collapsed .b-sidebar-best { display:none; }

/* ── Pastilles couleur cliquables ── */
.b-color-swatches { display:flex;flex-wrap:wrap;gap:9px; }
.b-color-swatch { display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;padding:2px;font-family:inherit;width:46px; }
.b-sw-dot { width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--b-line);transition:box-shadow .15s,transform .12s; }
.b-color-swatch:hover .b-sw-dot { transform:scale(1.08); }
.b-color-swatch.active .b-sw-dot { box-shadow:0 0 0 2px var(--b-accent);transform:scale(1.05); }
.b-sw-name { font-size:10px;font-weight:600;color:var(--b-muted);max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.b-color-swatch.active .b-sw-name { color:var(--b-accent);font-weight:800; }

/* ── Bouton mobile « Voir X résultats » ── */
.b-filters-apply { display:none; }
@media (max-width:860px) {
  .b-filters-apply {
    display:block;flex-shrink:0;margin:0;width:100%;padding:14px;border:none;
    background:var(--b-accent);color:#fff;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;
  }
}

/* ── Meilleures ventes : grille pleine largeur (6 articles) ── */
.b-best-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:20px;width:100%; }
.b-best-grid .b-mini-card { width:100%; }
@media (max-width:1100px){ .b-best-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){  .b-best-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Vus récemment : cartes de taille normale, groupe centré ── */
.b-recent-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,210px));gap:14px;width:100%;justify-content:center; }
.b-recent-grid .b-mini-card { width:100%; }
@media (max-width:640px){ .b-recent-grid { grid-template-columns:repeat(2,1fr); } }

/* ── Hero + colonne services ── */
.b-hero-row { display:flex;gap:14px;align-items:stretch;max-width:1200px;margin:0 auto;padding:14px 24px 0; }
.b-hero-row .b-hero { flex:1;min-width:0;border-radius:16px;border:1px solid var(--b-line);box-shadow:0 12px 32px rgba(15,23,42,.16); }
.b-hero-services { width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:10px; }
.b-hs-card {
  display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:14px;
  background:#fff;border:1px solid var(--b-line);text-decoration:none;flex:1;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.b-hs-card:hover { transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.1);border-color:var(--b-accent); }
.b-hs-ico { width:42px;height:42px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;font-size:20px;background:var(--b-accent-light,#e8eeff); }
.b-hs-card.wa .b-hs-ico { background:#dcfce7; }
.b-hs-card.track .b-hs-ico { background:#fef3c7; }
.b-hs-txt { display:flex;flex-direction:column;gap:2px;min-width:0; }
.b-hs-txt strong { font-size:13.5px;font-weight:800;color:var(--b-ink);line-height:1.2; }
.b-hs-txt span { font-size:12px;color:var(--b-muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.b-hs-card.phone .b-hs-txt span { color:var(--b-accent);font-weight:800;font-family:monospace;font-size:13px; }
@media (max-width:980px) {
  .b-hero-row { flex-direction:column;padding:0; }
  .b-hero-row .b-hero { border-radius:0; }
  .b-hero-services { width:100%;flex-direction:row;flex-wrap:wrap;padding:12px 14px 0; }
  .b-hero-services .b-hs-card { flex:1 1 calc(50% - 5px); }
}
@media (max-width:560px) {
  .b-hero-services .b-hs-card { flex:1 1 100%; }
}

/* ── Bannière de bienvenue : hauteur maîtrisée ── */
.b-hero-slide.b-hero-welcome {
  display:flex;align-items:center;
  min-height:280px;padding:36px 48px;
  background-size:cover;background-position:center;
}
.b-hero-slide.b-hero-welcome .b-hero-content { max-width:620px;padding:0; }
.b-hero-slide.b-hero-welcome h1 { font-size:clamp(22px,2.6vw,34px);margin-bottom:10px; }
.b-hero-slide.b-hero-welcome p { font-size:14px;margin-bottom:18px; }
@media (max-width:560px){
  .b-hero-slide.b-hero-welcome h1 { font-size:20px; }
  .b-hero-slide.b-hero-welcome p { font-size:12.5px; }
}
@media (max-width:860px){
  .b-hero-slide.b-hero-welcome { min-height:220px;padding:28px 22px; }
}
@media (max-width:560px){
  .b-hero-slide.b-hero-welcome { min-height:185px;padding:22px 18px; }
}

/* ── Bandeau de réassurance (sous le hero) ── */
.b-reassurance { max-width:1200px;margin:18px auto 0;padding:0 24px; }
.b-reassurance-inner {
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  background:var(--b-panel,#fff);border:1px solid var(--b-line);border-radius:16px;padding:16px 20px;
  box-shadow:0 4px 18px rgba(15,23,42,.05);
}
.b-rea-item { display:flex;align-items:center;gap:12px;min-width:0; }
.b-rea-item + .b-rea-item { border-left:1px solid var(--b-line);padding-left:14px; }
.b-rea-ico { font-size:24px;flex-shrink:0; }
.b-rea-item strong { display:block;font-size:13.5px;font-weight:800;color:var(--b-ink);line-height:1.2; }
.b-rea-item span { font-size:11.5px;color:var(--b-muted);font-weight:600; }
@media (max-width:860px) {
  .b-reassurance { padding:0 14px; }
  .b-reassurance-inner { grid-template-columns:repeat(2,1fr);gap:14px 10px; }
  .b-rea-item:nth-child(odd) + .b-rea-item, .b-rea-item:nth-child(3) { border-left:none;padding-left:0; }
}
@media (max-width:460px) {
  .b-reassurance-inner { grid-template-columns:1fr; }
  .b-rea-item + .b-rea-item { border-left:none;padding-left:0; }
}

/* ════════════════════════════════════════════════════
   FOND DÉCORATIF DERRIÈRE TOUT LE BLOC HERO (couleur du thème)
   100 % additif : pseudo-éléments en z-index négatif, pleine largeur,
   pointer-events:none → ne modifie ni le HTML ni les fonctions.
   ════════════════════════════════════════════════════ */
.b-hero-row, .b-reassurance { position: relative; }
.b-hero-row::before, .b-reassurance::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* Fond gris clair pro (neutre, met les blocs en valeur) */
  background: linear-gradient(180deg, #f4f6fa 0%, #e9edf3 100%);
  pointer-events: none;
}
/* Le hero couvre aussi l'écart (18px) qui le sépare de la réassurance → fond continu */
.b-hero-row::before    { top: 0; height: calc(100% + 18px); }
/* La réassurance termine le fond : bande basse réduite + coins doux */
.b-reassurance::before {
  top: 0; height: calc(100% + 14px);
  border-radius: 0 0 18px 18px;
  box-shadow: 0 16px 34px -22px rgba(15,23,42,.25);
}
/* Mode sombre : gris foncé neutre à la place du gris clair */
html[data-theme="dark"] .b-hero-row::before,
html[data-theme="dark"] .b-reassurance::before {
  background: linear-gradient(180deg, #1c2230 0%, #161b26 100%);
}
/* Fin liséré lumineux en haut du bloc bleu (effet verre) */
.b-hero-row::after {
  content: ""; position: absolute; z-index: -1; left: 50%; transform: translateX(-50%);
  top: 0; width: 100vw; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  pointer-events: none;
}

/* ── Cartes services : plus premium + clairement cliquables ── */
.b-hs-card { position: relative; overflow: hidden; }
.b-hs-card .b-hs-ico { transition: transform .18s ease, box-shadow .18s ease; }
.b-hs-card:hover { box-shadow: 0 12px 30px -8px rgba(8,18,60,.45); }
.b-hs-card:hover .b-hs-ico { transform: scale(1.08); box-shadow: 0 6px 14px rgba(26,79,255,.25); }
/* Flèche « → » qui apparaît au survol (signale le clic) */
.b-hs-card::after {
  content: "→"; position: absolute; right: 14px; top: 50%;
  transform: translate(8px, -50%); opacity: 0;
  font-size: 17px; font-weight: 900; color: var(--b-accent);
  transition: opacity .18s ease, transform .18s ease; pointer-events: none;
}
.b-hs-card:hover::after { opacity: .9; transform: translate(0, -50%); }
/* Léger reflet diagonal qui balaie la carte au survol */
.b-hs-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .55s ease;
}
.b-hs-card:hover::before { transform: translateX(120%); }

/* ── Carte réassurance : flotte mieux sur le bleu ── */
.b-reassurance-inner { box-shadow: 0 10px 28px -14px rgba(15,23,42,.22) !important; }
.b-rea-item { transition: transform .15s ease; }
.b-rea-item:hover { transform: translateY(-2px); }

/* ── Bannière hero : cadre net qui ressort sur le bleu ── */
.b-hero-row .b-hero { box-shadow: 0 16px 40px -14px rgba(15,23,42,.28); }

/* ── Mini pied de page ── */
.b-minifoot {
  text-align:center;padding:18px 24px;
  background:#0f172a;color:rgba(255,255,255,.72);
  font-size:12.5px;
}