/* ============================================================
   BAZAR DU BOSS — SITE MARCHAND « façon Taobao »
   Feuille de style des maquettes (locale, ZÉRO CDN, CSP-safe).
   Auteur : Bazar-design (DAYDGROUP).
   RÉVISION DESIGN (sobriété 1:1 Taobao) :
   - Fond blanc dominant, gouttières gris très clair (#f5f5f5).
   - UNE SEULE couleur d'accent = orange/rouge Taobao (#ff4400),
     appliquée avec parcimonie : prix, bouton d'achat, petits badges.
   - Texte gris foncé (#333) / gris moyen, séparateurs gris clair (#eee).
   - Placeholders photo = gris neutre uni (#f0f0f0), plus AUCUN dégradé vif.
   - Coins peu arrondis, ombres discrètes.
   ============================================================ */

:root{
  /* ----- Accent unique : orange / rouge Taobao ----- */
  --bz-orange:#ff4400;        /* accent principal (prix, CTA achat, badge promo) */
  --bz-orange-2:#ff5000;      /* variante hover / bouton achat plein */
  --bz-orange-soft:#fff5f0;   /* fond teinté très léger (option sélectionnée) */

  /* ----- Neutres (texte, séparateurs, fonds) ----- */
  --bz-texte:#333333;         /* texte principal */
  --bz-gris-2:#666666;        /* texte secondaire foncé */
  --bz-gris:#888888;          /* texte secondaire / méta */
  --bz-bord:#eeeeee;          /* séparateurs fins */
  --bz-bord-2:#e5e5e5;        /* bordures un peu plus marquées */
  --bz-ph:#f0f0f0;            /* placeholder photo neutre uni */
  --bz-fond:#f5f5f5;          /* gouttières / fond général */
  --bz-blanc:#ffffff;

  /* Compat : anciennes variables ré-aliassées vers la palette sobre */
  --bz-prix:var(--bz-orange);
  --bz-cta:var(--bz-orange);      /* plus de dégradé : orange plein */

  --bz-r:4px; --bz-r-s:2px;       /* coins peu arrondis */
  --bz-ombre:0 1px 3px rgba(0,0,0,.08);
  --bz-ombre-fort:0 4px 16px rgba(0,0,0,.14);

  --bz-tap:44px;              /* cible tactile mini */
  --bz-larg:1240px;          /* largeur max desktop (dense marketplace) */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--bz-texte);background:var(--bz-fond);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}
.bz-wrap{max-width:var(--bz-larg);margin:0 auto;padding:0 12px}

/* ============================================================
   1. TOPBAR + EN-TÊTE (logo | grosse recherche | compte/panier)
   ============================================================ */
.bz-topbar{
  background:var(--bz-fond);color:var(--bz-gris);
  border-bottom:1px solid var(--bz-bord);
  font-size:12.5px;font-weight:600;letter-spacing:.2px;
}
.bz-topbar__in{max-width:var(--bz-larg);margin:0 auto;padding:6px 12px;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.bz-topbar a{color:var(--bz-gris-2)}
.bz-topbar a:hover{color:var(--bz-orange)}
.bz-topbar__links{display:flex;gap:14px}
@media (max-width:719px){ .bz-topbar__links{display:none} .bz-topbar__in{justify-content:center} }

.bz-header{background:var(--bz-blanc);border-bottom:1px solid var(--bz-bord);position:sticky;top:0;z-index:50}
.bz-header__in{max-width:var(--bz-larg);margin:0 auto;padding:12px;
  display:flex;align-items:center;gap:16px}

/* Wordmark : mark orange plein (unique touche d'accent du logo) */
.bz-logo{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.bz-logo__mark{width:42px;height:42px;border-radius:var(--bz-r);flex:0 0 auto;
  background:var(--bz-orange);
  display:grid;place-items:center;position:relative}
.bz-logo__mark b{font-size:22px;color:#fff;font-weight:900}
.bz-logo__txt{line-height:1}
.bz-logo__txt .l1{font-weight:900;font-size:18px;letter-spacing:.3px;color:var(--bz-texte)}
.bz-logo__txt .l1 span{color:var(--bz-orange)}
.bz-logo__txt .l2{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--bz-gris)}

/* GROSSE barre de recherche : signature Taobao = cadre orange + bouton orange, coins nets */
.bz-search{flex:1 1 auto;min-width:0;max-width:640px;margin:0 auto}
.bz-search__box{display:flex;border:2px solid var(--bz-orange);border-radius:var(--bz-r-s);overflow:hidden;background:#fff}
.bz-search__box input{flex:1 1 auto;min-width:0;border:0;outline:none;
  padding:0 16px;height:44px;font-size:15px;color:var(--bz-texte);background:transparent}
.bz-search__btn{flex:0 0 auto;border:0;cursor:pointer;height:44px;padding:0 22px;
  background:var(--bz-orange);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px}
.bz-search__btn:hover{background:var(--bz-orange-2)}
.bz-search__hot{display:flex;gap:12px;margin-top:6px;padding:0 6px;font-size:12px;color:var(--bz-gris);flex-wrap:wrap}
.bz-search__hot a:hover{color:var(--bz-orange)}

.bz-actions{display:flex;gap:8px;flex:0 0 auto}
.bz-act{display:flex;align-items:center;gap:7px;height:44px;padding:0 12px;border-radius:var(--bz-r);
  background:var(--bz-fond);color:var(--bz-gris-2);font-weight:700;font-size:13px;position:relative}
.bz-act:hover{background:var(--bz-bord)}
.bz-act .ico{font-size:18px}
.bz-act--cart{background:#fff;color:var(--bz-orange);box-shadow:inset 0 0 0 1px var(--bz-orange)}
.bz-act--cart:hover{background:var(--bz-orange-soft)}
.bz-cart-count{position:absolute;top:-3px;right:-3px;background:var(--bz-orange);color:#fff;
  font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* Rangée d'onglets (rayons phares) sous l'en-tête : blanc, actif orange */
.bz-tabs{background:#fff;border-bottom:1px solid var(--bz-bord)}
.bz-tabs__in{max-width:var(--bz-larg);margin:0 auto;padding:0 12px;
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.bz-tabs__in::-webkit-scrollbar{display:none}
.bz-tab{white-space:nowrap;padding:11px 14px;font-size:13.5px;font-weight:700;color:var(--bz-gris-2);border-bottom:2px solid transparent}
.bz-tab:hover{color:var(--bz-orange)}
.bz-tab.is-active{color:var(--bz-orange);border-bottom-color:var(--bz-orange)}
.bz-tab--hot{color:var(--bz-orange)}

/* ============================================================
   2. RAIL CATÉGORIES (colonne gauche accueil) + flyout
   ============================================================ */
.bz-cats{width:220px;flex:0 0 220px;background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r);
  overflow:visible;position:relative;align-self:flex-start}
.bz-cats__h{background:#fff;color:var(--bz-texte);font-weight:800;font-size:14px;padding:11px 14px;
  border-bottom:1px solid var(--bz-bord);border-radius:var(--bz-r) var(--bz-r) 0 0}
.bz-cats__list{padding:4px 0}
.bz-cat{position:relative}
.bz-cat__a{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--bz-gris-2)}
.bz-cat__a .ico{width:20px;text-align:center}
.bz-cat__a .arr{margin-left:auto;color:var(--bz-gris)}
.bz-cat:hover>.bz-cat__a{background:var(--bz-fond);color:var(--bz-orange)}
/* Flyout sous-catégories (survol) */
.bz-cat__fly{position:absolute;top:0;left:100%;min-width:420px;min-height:100%;
  background:#fff;border:1px solid var(--bz-bord);border-radius:0 var(--bz-r) var(--bz-r) 0;
  box-shadow:var(--bz-ombre-fort);padding:14px 16px;z-index:30;display:none}
.bz-cat:hover>.bz-cat__fly{display:block}
.bz-cat__fly h4{margin:0 0 6px;font-size:12px;color:var(--bz-gris);text-transform:uppercase;letter-spacing:.5px}
.bz-cat__fly .subs{display:flex;flex-wrap:wrap;gap:6px 10px}
.bz-cat__fly .subs a{font-size:13px;padding:4px 8px;border-radius:var(--bz-r-s);background:var(--bz-fond);color:var(--bz-gris-2)}
.bz-cat__fly .subs a:hover{background:var(--bz-orange);color:#fff}

/* ============================================================
   3. HERO / BANDEAU + ENCARTS DROITE (accueil)
   ============================================================ */
.bz-home{display:flex;gap:14px;padding:14px 0}
.bz-home__center{flex:1 1 auto;min-width:0}
.bz-hero{position:relative;border-radius:var(--bz-r);overflow:hidden;height:300px;
  background:var(--bz-ph);color:var(--bz-texte);border:1px solid var(--bz-bord)}
.bz-hero__slides{position:absolute;inset:0}
.bz-hero__slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 40px;opacity:0;transition:opacity .5s;background-size:cover;background-position:center}
.bz-hero__slide.is-on{opacity:1}
.bz-hero__slide h2{margin:0;font-size:34px;font-weight:900;line-height:1.1;max-width:60%;color:var(--bz-texte)}
.bz-hero__slide p{margin:8px 0 0;font-size:16px;color:var(--bz-gris-2);max-width:55%}
.bz-hero__slide .bz-btn{margin-top:16px;align-self:flex-start}
.bz-hero__dots{position:absolute;bottom:12px;left:40px;display:flex;gap:7px;z-index:3}
.bz-hero__dots button{width:10px;height:10px;border-radius:50%;border:0;cursor:pointer;background:rgba(0,0,0,.2)}
.bz-hero__dots button.is-on{background:var(--bz-orange);width:22px;border-radius:5px}

.bz-side{width:230px;flex:0 0 230px;display:flex;flex-direction:column;gap:12px}
.bz-side__card{background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r);padding:14px}
.bz-side__welcome{text-align:center}
.bz-side__welcome .who{font-weight:800}
.bz-side__welcome .btns{display:flex;gap:8px;margin-top:10px}
.bz-side__welcome .btns .bz-btn{flex:1}
.bz-side__list a{display:flex;align-items:center;gap:9px;padding:7px 4px;font-size:13.5px;font-weight:600;color:var(--bz-gris-2);border-bottom:1px solid var(--bz-bord)}
.bz-side__list a:last-child{border-bottom:0}
.bz-side__list a:hover{color:var(--bz-orange)}
.bz-side__list .ico{width:20px;text-align:center}
.bz-side__promo{background:var(--bz-orange-soft);border:1px solid #ffd9c9;color:var(--bz-orange);text-align:center;font-weight:700}
.bz-side__promo b{font-size:22px;display:block;color:var(--bz-orange)}

/* Bandeau confiance */
.bz-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 18px}
.bz-trust div{background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r);
  padding:12px 14px;display:flex;gap:10px;align-items:center;font-size:12.5px;font-weight:700;color:var(--bz-gris-2)}
.bz-trust b{font-size:22px}

/* ============================================================
   4. SECTIONS + GRILLE PRODUITS DENSE
   ============================================================ */
.bz-sec{margin:18px 0}
.bz-sec__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bz-sec__bar{width:4px;height:20px;border-radius:2px;background:var(--bz-orange)}
.bz-sec__title{font-size:20px;font-weight:900;color:var(--bz-texte)}
.bz-sec__sub{color:var(--bz-gris);font-size:13px}
.bz-sec__more{margin-left:auto;font-size:13px;font-weight:700;color:var(--bz-gris)}
.bz-sec__more:hover{color:var(--bz-orange)}

.bz-grid{display:grid;gap:12px;grid-template-columns:repeat(5,1fr)}
.bz-grid--4{grid-template-columns:repeat(4,1fr)}

.bz-prod{background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r-s);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .14s,box-shadow .14s,border-color .14s;position:relative}
.bz-prod:hover{transform:translateY(-2px);box-shadow:var(--bz-ombre-fort);border-color:var(--bz-orange)}
.bz-prod__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--bz-ph)}
.bz-prod__media img,.bz-prod__ph{width:100%;height:100%;object-fit:cover}
/* Placeholder photo NEUTRE UNI (gris) + petit label discret ; plus de dégradé */
.bz-prod__ph{display:grid;place-items:center;background:var(--bz-ph);color:#bbb;font-weight:600;font-size:12px;text-align:center;padding:10px;line-height:1.35}
.bz-prod__badge{position:absolute;top:6px;left:6px;font-size:10px;font-weight:900;text-transform:uppercase;
  letter-spacing:.4px;padding:3px 7px;border-radius:var(--bz-r-s)}
.bz-badge--promo{background:var(--bz-orange);color:#fff}
.bz-badge--new{background:#fff;color:var(--bz-gris-2);border:1px solid var(--bz-bord-2)}
.bz-badge--arr{background:#555;color:#fff}
.bz-prod__flag{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.92);border-radius:var(--bz-r-s);
  padding:2px 6px;font-size:14px;line-height:1.2;box-shadow:var(--bz-ombre)}
.bz-prod__vid{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);color:#fff;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px}
.bz-prod__body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:5px;flex:1}
.bz-prod__title{font-size:13px;line-height:1.35;font-weight:600;color:var(--bz-texte);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.bz-prod__pricerow{display:flex;align-items:baseline;gap:7px;margin-top:auto}
.bz-prod__price{font-size:18px;font-weight:900;color:var(--bz-prix)}
.bz-prod__price small{font-size:11px;font-weight:700}
.bz-prod__old{font-size:12px;color:var(--bz-gris);text-decoration:line-through}
.bz-prod__meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--bz-gris)}
.bz-prod__sales{color:var(--bz-gris)}
.bz-prod__stock{color:var(--bz-gris);font-weight:700}
.bz-prod__stock.low{color:var(--bz-orange)}

/* ============================================================
   5. BOUTONS
   ============================================================ */
.bz-btn{border:0;cursor:pointer;border-radius:var(--bz-r);padding:0 18px;height:var(--bz-tap);
  font-size:14.5px;font-weight:800;display:inline-flex;align-items:center;gap:8px;justify-content:center}
/* CTA principal (Acheter maintenant) : orange plein */
.bz-btn--primary{background:var(--bz-orange);color:#fff}
.bz-btn--primary:hover{background:var(--bz-orange-2)}
/* Bouton secondaire (Ajouter au panier) : contour orange, fond blanc */
.bz-btn--or{background:#fff;color:var(--bz-orange);box-shadow:inset 0 0 0 1.5px var(--bz-orange)}
.bz-btn--or:hover{background:var(--bz-orange-soft)}
/* Bouton neutre : contour gris */
.bz-btn--ghost{background:#fff;color:var(--bz-gris-2);box-shadow:inset 0 0 0 1px var(--bz-bord-2)}
.bz-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--bz-orange);color:var(--bz-orange)}
.bz-btn--sm{height:36px;padding:0 12px;font-size:13px;border-radius:var(--bz-r-s)}
.bz-btn--block{width:100%}

/* ============================================================
   6. FIL D'ARIANE + FILTRES (recherche / catégorie)
   ============================================================ */
.bz-fil{font-size:12.5px;color:var(--bz-gris);padding:12px 0 4px}
.bz-fil a{color:var(--bz-gris-2);font-weight:700}
.bz-fil a:hover{color:var(--bz-orange)}
.bz-fil b{color:var(--bz-texte)}

.bz-listing{display:flex;gap:14px;padding-bottom:24px}
.bz-filters{width:220px;flex:0 0 220px}
.bz-fbox{background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r);padding:12px 14px;margin-bottom:12px}
.bz-fbox h4{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--bz-texte)}
.bz-fbox label{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;cursor:pointer;color:var(--bz-gris-2)}
.bz-fbox label:hover{color:var(--bz-orange)}
.bz-price-range{display:flex;gap:6px;align-items:center;margin-top:6px}
.bz-price-range input{width:100%;border:1px solid var(--bz-bord-2);border-radius:var(--bz-r-s);padding:7px 8px;font-size:13px}
.bz-chips{display:flex;flex-wrap:wrap;gap:6px}
.bz-chip{font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:var(--bz-r);background:#fff;border:1px solid var(--bz-bord-2);color:var(--bz-gris-2)}
.bz-chip:hover{border-color:var(--bz-orange);color:var(--bz-orange)}
.bz-chip.is-active{background:var(--bz-orange-soft);color:var(--bz-orange);border-color:var(--bz-orange)}

.bz-results{flex:1 1 auto;min-width:0}
.bz-toolbar{background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r);
  padding:8px 12px;display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.bz-toolbar .count{margin-left:auto;font-size:12.5px;color:var(--bz-gris)}
.bz-sort{display:flex;gap:4px}
.bz-sort button{border:0;background:var(--bz-fond);border-radius:var(--bz-r-s);padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--bz-gris-2)}
.bz-sort button.is-active{background:var(--bz-orange-soft);color:var(--bz-orange)}
.bz-sort button:hover{background:var(--bz-bord)}
.bz-sort button.is-active:hover{background:var(--bz-orange-soft)}

.bz-pager{display:flex;gap:6px;justify-content:center;padding:20px 0}
.bz-pager a{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--bz-bord-2);background:#fff;border-radius:var(--bz-r-s);
  display:grid;place-items:center;font-weight:700;font-size:13.5px;color:var(--bz-gris-2)}
.bz-pager a:hover{border-color:var(--bz-orange);color:var(--bz-orange)}
.bz-pager a.is-active{background:var(--bz-orange);color:#fff;border-color:var(--bz-orange)}

/* ============================================================
   7. PAGE PRODUIT
   ============================================================ */
.bz-pdp{display:flex;gap:20px;padding:16px 0}
.bz-gallery{width:440px;flex:0 0 440px}
.bz-gallery__main{position:relative;aspect-ratio:1/1;border:1px solid var(--bz-bord);border-radius:var(--bz-r);
  overflow:hidden;background:var(--bz-ph);cursor:zoom-in}
.bz-gallery__main img,.bz-gallery__main .ph{width:100%;height:100%;object-fit:cover}
.bz-gallery__main .ph{display:grid;place-items:center;background:var(--bz-ph);color:#bbb;font-weight:700;font-size:16px}
.bz-gallery__playbig{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.3)}
.bz-gallery__playbig.is-video{display:grid}
.bz-gallery__playbig span{width:64px;height:64px;border-radius:50%;background:var(--bz-orange);color:#fff;
  display:grid;place-items:center;font-size:26px}
.bz-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.bz-thumb{width:66px;height:66px;border-radius:var(--bz-r-s);overflow:hidden;border:2px solid transparent;cursor:pointer;position:relative;background:var(--bz-ph)}
.bz-thumb img,.bz-thumb .ph{width:100%;height:100%;object-fit:cover}
.bz-thumb .ph{display:grid;place-items:center;background:var(--bz-ph);color:#bbb;font-size:10px;font-weight:700}
.bz-thumb.is-active{border-color:var(--bz-orange)}
.bz-thumb--video::after{content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;background:rgba(0,0,0,.35);font-size:16px}

.bz-buy{flex:1 1 auto;min-width:0}
.bz-buy__title{font-size:22px;font-weight:800;line-height:1.3;margin:0 0 8px;color:var(--bz-texte)}
.bz-buy__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bz-buy__flag{display:inline-flex;align-items:center;gap:6px;background:var(--bz-fond);border-radius:var(--bz-r);
  padding:5px 12px;font-size:13px;font-weight:700;color:var(--bz-gris-2)}
.bz-buy__flag .fl{font-size:18px}
.bz-buy__sales{font-size:13px;color:var(--bz-gris)}
/* Bloc prix : fond blanc / très léger tint orange, bordure fine */
.bz-buy__pricebox{background:var(--bz-orange-soft);border:1px solid #ffd9c9;
  border-radius:var(--bz-r);padding:14px 18px;margin:6px 0 16px}
.bz-buy__price{font-size:34px;font-weight:900;color:var(--bz-prix)}
.bz-buy__price small{font-size:16px}
.bz-buy__old{font-size:16px;color:var(--bz-gris);text-decoration:line-through;margin-left:10px}
.bz-buy__save{display:inline-block;margin-left:10px;background:var(--bz-orange);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:var(--bz-r-s)}
.bz-opt{margin:12px 0}
.bz-opt__lib{font-size:13px;font-weight:700;color:var(--bz-gris);margin-bottom:6px}
.bz-opt__vals{display:flex;flex-wrap:wrap;gap:8px}
.bz-opt__v{border:1.5px solid var(--bz-bord-2);background:#fff;border-radius:var(--bz-r-s);padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;min-height:40px;color:var(--bz-gris-2)}
.bz-opt__v:hover{border-color:var(--bz-orange)}
.bz-opt__v.is-active{border-color:var(--bz-orange);background:var(--bz-orange-soft);color:var(--bz-orange)}
.bz-qty{display:inline-flex;align-items:center;border:1px solid var(--bz-bord-2);border-radius:var(--bz-r-s);overflow:hidden}
.bz-qty button{width:40px;height:40px;border:0;background:var(--bz-fond);font-size:18px;font-weight:800;cursor:pointer;color:var(--bz-gris-2)}
.bz-qty input{width:56px;height:40px;border:0;text-align:center;font-size:15px;font-weight:700}
.bz-buy__cta{display:flex;gap:12px;margin:18px 0}
.bz-buy__cta .bz-btn{flex:1;height:52px;font-size:16px}
.bz-buy__reassure{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--bz-gris);border-top:1px solid var(--bz-bord);padding-top:12px}
.bz-buy__reassure span{display:flex;gap:6px;align-items:center}

/* Onglets fiche */
.bz-tabsdoc{background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r);margin:8px 0 24px;overflow:hidden}
.bz-tabsdoc__nav{display:flex;border-bottom:1px solid var(--bz-bord);overflow-x:auto}
.bz-tabsdoc__nav button{border:0;background:transparent;padding:14px 20px;font-size:15px;font-weight:800;color:var(--bz-gris);
  cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.bz-tabsdoc__nav button.is-active{color:var(--bz-orange);border-bottom-color:var(--bz-orange)}
.bz-tabsdoc__panel{padding:20px;display:none;font-size:14px;line-height:1.6;color:var(--bz-gris-2)}
.bz-tabsdoc__panel.is-active{display:block}
.bz-spec{width:100%;border-collapse:collapse;max-width:680px}
.bz-spec th,.bz-spec td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--bz-bord);font-size:13.5px}
.bz-spec th{width:200px;background:var(--bz-fond);font-weight:700;color:var(--bz-texte)}
.bz-avis{border-bottom:1px solid var(--bz-bord);padding:12px 0}
.bz-avis__h{display:flex;gap:8px;align-items:center;font-weight:700;font-size:13.5px}
.bz-stars{color:var(--bz-orange)}

/* ============================================================
   8. LIGHTBOX (galerie zoom / vidéo) — fond noir semi-opaque
   ============================================================ */
.bz-lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.8);display:none;
  align-items:center;justify-content:center;padding:16px}
.bz-lb.is-open{display:flex}
.bz-lb__inner{max-width:90vw;max-height:90vh;position:relative}
.bz-lb__inner img,.bz-lb__inner .ph{max-width:90vw;max-height:90vh;border-radius:var(--bz-r);background:#000}
.bz-lb__inner .ph{width:70vw;height:70vh;display:grid;place-items:center;color:#fff;font-weight:700;font-size:22px}
.bz-lb__close{position:absolute;top:-12px;right:-12px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--bz-texte);font-size:22px;font-weight:800;box-shadow:var(--bz-ombre-fort)}

/* ============================================================
   9. PIED DE PAGE — clair et sobre
   ============================================================ */
.bz-foot{background:#fff;color:var(--bz-gris);margin-top:24px;border-top:1px solid var(--bz-bord)}
.bz-foot__in{max-width:var(--bz-larg);margin:0 auto;padding:26px 12px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bz-foot h5{color:var(--bz-texte);font-size:13px;margin:0 0 10px}
.bz-foot a{display:block;font-size:12.5px;padding:3px 0;color:var(--bz-gris)}
.bz-foot a:hover{color:var(--bz-orange)}
.bz-foot__bottom{border-top:1px solid var(--bz-bord);text-align:center;font-size:12px;padding:14px 12px;background:var(--bz-fond)}
.bz-foot__bottom b{color:var(--bz-texte)}

/* ============================================================
   10. RESPONSIVE — mobile-first prioritaire (Afrique de l'Ouest)
   ============================================================ */
@media (max-width:1100px){ .bz-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){
  .bz-grid,.bz-grid--4{grid-template-columns:repeat(3,1fr)}
  .bz-gallery{width:360px;flex-basis:360px}
}
@media (max-width:719px){
  /* Recherche pleine largeur, rail → bouton menu, grille 2 colonnes */
  .bz-header__in{flex-wrap:wrap;gap:10px}
  .bz-search{order:3;flex-basis:100%;max-width:none;margin:0}
  .bz-logo__txt .l2{display:none}
  .bz-home{flex-direction:column}
  .bz-cats{display:none}          /* remplacé par le menu (voir menu_categories.html) */
  .bz-side{width:auto;flex-basis:auto;flex-direction:row;overflow-x:auto}
  .bz-side__card{min-width:200px}
  .bz-trust{grid-template-columns:repeat(2,1fr)}
  .bz-grid,.bz-grid--4{grid-template-columns:repeat(2,1fr);gap:8px}
  .bz-listing,.bz-pdp{flex-direction:column}
  /* Filtres → TIROIR off-canvas (glisse depuis la gauche), ouvert par « Filtrer » */
  .bz-filters{position:fixed;top:0;bottom:0;left:0;width:min(86%,340px);flex-basis:auto;
    background:#fff;z-index:130;box-shadow:var(--bz-ombre-fort);
    transform:translateX(-100%);transition:transform .25s ease;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0 14px calc(16px + env(safe-area-inset-bottom))}
  .bz-filters.is-open{transform:none}
  .bz-filters__head{display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;background:#fff;z-index:2;
    margin:0 -14px 12px;padding:12px 14px;border-bottom:1px solid var(--bz-bord);
    font-weight:800;font-size:15px;color:var(--bz-texte)}
  .bz-filters__x{width:40px;height:40px;border:0;background:var(--bz-fond);
    border-radius:var(--bz-r);font-size:22px;line-height:1;color:var(--bz-gris-2);cursor:pointer}
  .bz-fscrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:125;display:none}
  .bz-fscrim.is-open{display:block}
  body.bz-filters-open{overflow:hidden}
  .bz-gallery{width:auto;flex-basis:auto}
  .bz-hero{height:190px}
  .bz-hero__slide h2{font-size:22px;max-width:80%}
  .bz-hero__slide p{max-width:85%}
  .bz-foot__in{grid-template-columns:repeat(2,1fr)}
  .bz-buy__cta .bz-btn{height:48px}
  .bz-mobtoolbar{display:flex}
}
.bz-mobtoolbar{display:none;gap:8px;padding:8px 0}
.bz-mobtoolbar button{flex:1;height:44px;border:1px solid var(--bz-bord-2);background:#fff;border-radius:var(--bz-r);font-weight:700;font-size:13.5px;color:var(--bz-gris-2)}
/* En-tête du tiroir de filtres + voile : masqués hors mobile (injectés par market.js) */
@media (min-width:720px){ .bz-filters__head,.bz-fscrim{display:none} }

/* Cibles tactiles ≥44px sur mobile (tri, pagination, quantité) */
@media (max-width:719px){
  .bz-sort button{min-height:40px;padding:9px 14px}
  .bz-pager a{min-width:44px;height:44px}
  .bz-qty button{width:44px;height:44px}
  .bz-qty input{height:44px}
  .bz-perpage select{min-height:38px}
  /* Long libellés produits/titres : jamais de débordement horizontal */
  .bz-spec th{width:40%}
}
/* Sécurité anti-débordement : coupe les mots trop longs (URL, réf, nom collé) */
.bz-prod__title,.bz-buy__title,.bz-hero__slide h2,.bz-hero__slide p,
.bz-sec__title,.bz-cathead h1,.bz-fil{overflow-wrap:break-word;word-break:break-word}

/* Accessibilité : réduire animations */
@media (prefers-reduced-motion:reduce){
  .bz-hero__slide{transition:none}
  .bz-prod{transition:none}
  .bz-rail__track{scroll-behavior:auto}
  .bz-filters{transition:none}
}

/* ============================================================
   11. RECOMMANDATIONS — rails défilants + flux « Pour vous »
   Réutilise la carte produit .bz-prod (charte sobre inchangée).
   3 briques :
     A) .bz-rail        → rail horizontal tactile (Récemment vus,
                          reco contextuelle, « Recommandé pour vous »)
     B) .bz-sec__hint   → sous-titre contextuel (raison de la reco)
     C) .bz-loadmore    → flux dense « Pour vous » + « Voir plus »
   ============================================================ */

/* En-tête de section : variante « reco » (petit pictogramme + libellé) */
.bz-sec__title .bz-tag{display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--bz-orange);background:var(--bz-orange-soft);border:1px solid #ffd9c9;
  border-radius:var(--bz-r-s);padding:2px 7px}
/* Raison de la reco (« Parce que vous avez regardé… ») */
.bz-sec__hint{margin-left:auto;font-size:12.5px;color:var(--bz-gris);font-weight:600}
.bz-sec__hint b{color:var(--bz-gris-2)}

/* ----- A) RAIL HORIZONTAL défilant (tactile + flèches desktop) ----- */
.bz-rail{position:relative;margin:0 -2px}
.bz-rail__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.bz-rail__track::-webkit-scrollbar{display:none}
.bz-rail__track > .bz-prod{flex:0 0 176px;width:176px;scroll-snap-align:start}
/* Flèches de défilement (apparaissent au survol, desktop uniquement) */
.bz-rail__nav{position:absolute;top:calc(50% - 12px);transform:translateY(-50%);z-index:6;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--bz-bord-2);
  background:rgba(255,255,255,.96);box-shadow:var(--bz-ombre-fort);cursor:pointer;
  display:none;place-items:center;font-size:20px;font-weight:800;color:var(--bz-gris-2)}
.bz-rail__nav:hover{color:var(--bz-orange);border-color:var(--bz-orange)}
.bz-rail__nav--prev{left:-4px}
.bz-rail__nav--next{right:-4px}
.bz-rail__nav[disabled]{opacity:.35;cursor:default}
.bz-rail__nav[disabled]:hover{color:var(--bz-gris-2);border-color:var(--bz-bord-2)}
@media (hover:hover) and (min-width:720px){
  .bz-rail:hover .bz-rail__nav{display:grid}
}

/* ----- Variante « Récemment vus » : mini-cartes compactes ----- */
.bz-rail--recent .bz-prod{flex-basis:150px;width:150px}
.bz-rail--recent .bz-prod__title{-webkit-line-clamp:1;min-height:0}
.bz-rail--recent .bz-prod__meta{display:none}
.bz-rail--recent .bz-prod__price{font-size:15px}
.bz-rail--recent .bz-prod__body{padding:7px 9px 9px;gap:4px}

/* ----- B) Flux dense « Pour vous » (grille + chargement progressif) ----- */
.bz-loadmore{text-align:center;padding:18px 0 4px}
.bz-loadmore .muted{display:block;margin-top:8px;font-size:12px;color:var(--bz-gris)}

/* Carte « vide » de squelette pendant le chargement progressif (démo) */
.bz-prod--skel{pointer-events:none}
.bz-prod--skel .bz-prod__ph{color:transparent}

@media (max-width:719px){
  /* Rails : cartes un peu plus étroites, défilement au doigt (flèches masquées) */
  .bz-rail__track > .bz-prod{flex-basis:150px;width:150px}
  .bz-rail--recent .bz-prod{flex-basis:132px;width:132px}
  .bz-rail__nav{display:none !important}
}

/* ============================================================
   12. INTÉGRATION AU VRAI SITE (bazar-dev)
   - Icônes SVG du sprite (rail catégories, header)
   - Badge pays (drapeau + nom) réutilisable
   - Barre d'achat COLLANTE mobile (fiche produit)
   - Réassurance produit / états vides / messages flash
   - Couche de COMPAT : variables héritées des pages panier/compte/
     commande (inline styles) ré-aliassées vers la palette sobre.
   ============================================================ */

/* --- Icônes SVG (trait fin) du sprite inc/icones.php --- */
.bz-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle}
.bz-cat__a .bz-ic{color:var(--bz-gris-2)}
.bz-cat:hover>.bz-cat__a .bz-ic{color:var(--bz-orange)}

/* --- Badge pays d'origine (drapeau emoji + nom) --- */
.bz-pays{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--bz-gris-2)}
.bz-pays__flag{font-size:16px;line-height:1}
.bz-pays__nom{font-weight:700}

/* --- Grille produit : cartes cliquables (a.bz-prod déjà stylé) --- */
.bz-grid .bz-prod{min-width:0}

/* --- Onglet fiche : liste avis vide --- */
.bz-avis--vide{color:var(--bz-gris);font-size:13.5px}

/* --- Barre d'achat COLLANTE (mobile only) sur la fiche produit --- */
.bz-stickybuy{display:none}
@media (max-width:719px){
  .bz-stickybuy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
    gap:8px;padding:8px 10px;background:#fff;border-top:1px solid var(--bz-bord);
    box-shadow:0 -2px 10px rgba(0,0,0,.08);
    /* Safe-area iOS (encoche / barre d'accueil) : le contenu ne passe jamais dessous */
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
    padding-left:calc(10px + env(safe-area-inset-left));
    padding-right:calc(10px + env(safe-area-inset-right))}
  .bz-stickybuy .bz-btn{flex:1;height:46px;min-width:0}
  .bz-stickybuy__price{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;
    padding:0 6px;font-weight:900;color:var(--bz-orange);font-size:16px;line-height:1.1;white-space:nowrap}
  .bz-stickybuy__price small{font-size:10px;color:var(--bz-gris);font-weight:700}
  body.has-stickybuy{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* --- Recherche/catégorie : header de catégorie sobre --- */
.bz-cathead{background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r);
  padding:14px 16px;margin:4px 0 12px}
.bz-cathead h1{margin:0;font-size:22px;color:var(--bz-texte)}
.bz-cathead__ico{width:26px;height:26px;color:var(--bz-orange)}
.bz-cathead__sub{color:var(--bz-gris);font-size:13px}

/* --- Sélecteur « produits par page » --- */
.bz-perpage{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--bz-gris)}
.bz-perpage select{border:1px solid var(--bz-bord-2);border-radius:var(--bz-r-s);
  padding:6px 8px;font-size:13px;font-family:inherit;color:var(--bz-gris-2)}

/* --- États vides + messages flash (repris des pages existantes) --- */
.bz-empty{padding:48px 20px;text-align:center;color:var(--bz-gris);
  background:#fff;border:1px solid var(--bz-bord);border-radius:var(--bz-r);margin:12px 0}
.bz-empty b{color:var(--bz-texte)}
.bz-link-retour{display:inline-block;margin:6px 0;color:var(--bz-orange);font-weight:800}
.bz-flash{border-radius:var(--bz-r);padding:12px 14px;margin:10px 0;font-size:14px;font-weight:600}
.bz-flash--warn{background:#fff3d6;color:#8a5a00;border:1px solid #ffdf9e}
.bz-flash--ok{background:#d9f7ee;color:#065f46;border:1px solid #9ee7cf}
.bz-flash--err{background:#fde2e2;color:#991b1b;border:1px solid #f6b9b9}

/* --- Badge d'état de commande (compte / commandes) --- */
.bz-etat{display:inline-block;font-size:11px;font-weight:800;padding:2px 9px;border-radius:999px;background:#eee;color:#555;margin-left:6px}
.bz-etat--recue{background:#fff3d6;color:#8a5a00}
.bz-etat--validee,.bz-etat--retiree,.bz-etat--livree{background:#d9f7ee;color:#065f46}
.bz-etat--preparee,.bz-etat--expediee{background:#dbeafe;color:#1e40af}
.bz-etat--annulee{background:#fde2e2;color:#991b1b}

/* --- COMPAT : variables héritées (pages panier/compte/commande) ---
   Ces pages utilisent des styles inline avec var(--bz-magenta/--bz-nuit/…).
   On les ré-aliasse vers la charte sobre pour un rendu cohérent. --- */
:root{
  --bz-magenta:var(--bz-orange);
  --bz-turquoise:#12a05a;
  --bz-nuit:#333333;
  --bz-creme:#ffffff;
  --bz-r-lg:12px;
}
/* Les pages secondaires posent des border-radius généreux : on adoucit sans casser. */
/* Produit sans prix fixé (fiche CM en attente) : visible, non achetable */
.bz-prod__price--bientot,.bz-buy__price--bientot{color:var(--bz-gris,#888);font-weight:700;font-size:13px}
.bz-buy__price--bientot{font-size:20px}