/* =========================================================
   SAMA BAZAR — Feuille de style unique
   Direction : « Indigo & Mangue »
   Gabarito (titres) + Instrument Sans (texte/UI)

   Fichier unique et volontairement unique : sur une connexion
   mobile senegalaise, chaque <link> supplementaire dans le
   <head> bloque le rendu le temps d'un aller-retour reseau.
   La latence coute plus cher que les octets — a servir gzip
   ou brotli, ou la totalite pese environ 11 Ko.

   Ne pas rajouter de feuille par page. Ajouter une section ici.

   SOMMAIRE
     A. Socle          — tokens, base, composants partages   (1 a 18)
     B. Accueil        — hero, bento, rails, selections      (19 a 24)
     C. Tunnel & compte— panier, checkout, suivi, compte     (25 a 36)
     D. Complements    — carte produit, rayons, WhatsApp     (37 a 39)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marque */
  --encre-950:#0E1533;
  --encre-800:#1E2A78;
  --encre-600:#3A49A8;
  --encre-100:#E7EAF8;
  --mangue-500:#FFB020;
  --mangue-600:#F0A00E;
  --mangue-100:#FFEFCC;
  --bissap-600:#B5194B;

  /* Neutres tirés vers le sable */
  --sable-0:#FFFFFF;
  --sable-50:#F7F6F2;
  --sable-100:#EFEDE6;
  --sable-200:#E4E2DB;
  --sable-400:#B4B0A5;
  --sable-600:#5B6076;

  /* Sémantiques */
  --succes:#12805C;
  --attention:#8A5A00;
  --erreur:#C0261F;
  --etoile:#E8A317;

  /* Rayons */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-full:999px;

  /* Élévation */
  --e1:0 1px 2px rgba(14,21,51,.06);
  --e2:0 4px 12px rgba(14,21,51,.08);
  --e3:0 12px 32px rgba(14,21,51,.14);

  /* Motion */
  --t-fast:120ms; --t-base:180ms; --t-slow:240ms;
  --ease:cubic-bezier(.2,.8,.25,1);

  /* Layout */
  --wrap:1320px;
  --gut:16px;

  --font-display:'Gabarito',system-ui,sans-serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,sans-serif;
}
@media (min-width:768px){ :root{ --gut:24px; } }
@media (min-width:1024px){ :root{ --gut:32px; } }

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--sable-50);
  color:var(--encre-950);
  font:400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;line-height:1.25;letter-spacing:-.015em}
h1{font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem)}
h2{font-size:1.375rem;letter-spacing:-.01em}
h3{font-family:var(--font-body);font-size:1rem;font-weight:600}
p{margin:0 0 .75rem}
p:last-child{margin-bottom:0}
a{color:var(--encre-800);text-decoration-thickness:1px;text-underline-offset:2px}
img,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}
table{border-collapse:collapse;width:100%}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
main > .wrap{padding-top:20px;padding-bottom:56px}
@media (min-width:1024px){ main > .wrap{padding-bottom:72px} }
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.muted{color:var(--sable-600)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:absolute;left:8px;top:-60px;z-index:100;
  background:var(--encre-800);color:#fff;padding:10px 16px;border-radius:var(--r-sm);
  transition:top var(--t-fast) var(--ease)
}
.skip-link:focus{top:8px}

:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--encre-800);outline-offset:2px;border-radius:var(--r-xs)
}

/* Icônes Lucide */
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--12{width:12px;height:12px}
.ic--20{width:20px;height:20px}
.ic--24{width:22px;height:22px}
.ill{width:100%;height:100%;color:var(--encre-800)}

.eyebrow{
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--sable-600);margin:0 0 .35rem
}
.link{display:inline-flex;align-items:center;gap:4px;font-size:.875rem;font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- 3. Bloc prix (élément signature) ---------- */
.price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.price__main{
  font-weight:600;font-size:1.125rem;line-height:1.1;
  box-shadow:inset 0 -.28em 0 var(--mangue-100);
}
.price__cur{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--sable-600)}
.price__old{font-size:.875rem;color:var(--sable-600);text-decoration-thickness:1px}
.price--lg .price__main{font-size:1.75rem}
.price--lg .price__cur{font-size:.8125rem}
.price--md .price__main{font-size:1.375rem}
.price--sm .price__main{font-size:1rem}
.price--xs{display:block;margin-top:2px}
.price--xs .price__main{font-size:.9375rem;box-shadow:none}
.price__note{font-size:.8125rem;color:var(--sable-600);margin:.35rem 0 0}

/* ---------- 4. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 18px;border-radius:var(--r-md);
  font-weight:600;font-size:.9375rem;text-decoration:none;cursor:pointer;
  border:1px solid transparent;background:none;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)
}
.btn:active{transform:scale(.98)}
.btn--cta{background:var(--mangue-500);color:var(--encre-950);min-height:52px;padding-inline:26px;font-size:1rem}
.btn--cta:hover{background:var(--mangue-600)}
.btn--sec{background:var(--sable-0);color:var(--encre-800);border-color:var(--encre-800)}
.btn--sec:hover{background:var(--encre-100)}
.btn--ghost{background:var(--sable-0);color:var(--encre-950);border-color:var(--sable-200)}
.btn--ghost:hover{background:var(--sable-50);border-color:var(--sable-400)}
.btn--full{width:100%;justify-content:center}
.btn[aria-pressed="true"]{border-color:var(--encre-800);color:var(--encre-800);background:var(--encre-100)}
.btn[aria-pressed="true"] .ic{fill:currentColor}

/* ---------- 5. Header ---------- */
.hdr{background:var(--sable-0);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--sable-200)}
.hdr__top{background:var(--encre-800);color:#fff;font-size:.75rem}
.hdr__top-in{display:flex;align-items:center;gap:10px;height:34px;overflow:hidden;white-space:nowrap}
.hdr__top-in p{margin:0;display:flex;align-items:center;gap:6px}
.hdr__top .sep{opacity:.5}
.hdr__phone{margin-left:auto;color:#fff;font-weight:600;text-decoration:none}
@media (max-width:767px){ .hdr__top-in .sep,.hdr__top-in p:nth-child(3){display:none} }

.hdr__main-in{display:flex;align-items:center;gap:14px;height:64px}
@media (min-width:1024px){ .hdr__main-in{height:72px;gap:24px} }
.hdr__burger{
  display:grid;place-items:center;width:44px;height:44px;margin-left:-10px;
  border:0;background:none;cursor:pointer;border-radius:var(--r-sm)
}
@media (min-width:1024px){ .hdr__burger{display:none} }
.logo{
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;
  color:var(--encre-800);text-decoration:none
}

.search{flex:1;position:relative;display:flex;align-items:center;min-width:0}
.search__ic{position:absolute;left:14px;color:var(--sable-600);pointer-events:none}
.search input{
  width:100%;height:44px;padding:0 14px 0 40px;
  background:var(--sable-50);border:1px solid var(--sable-200);border-radius:var(--r-md);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)
}
.search input::placeholder{color:var(--sable-600)}
.search input:focus{background:var(--sable-0);border-color:var(--encre-800);outline:none;box-shadow:0 0 0 3px rgba(30,42,120,.12)}
.search__btn{
  display:none;margin-left:-1px;height:44px;padding:0 20px;cursor:pointer;
  background:var(--encre-800);color:#fff;border:0;
  border-radius:0 var(--r-md) var(--r-md) 0;font-weight:600
}
@media (min-width:1024px){
  .search{max-width:640px}
  .search input{border-radius:var(--r-md) 0 0 var(--r-md)}
  .search__btn{display:block}
}

.hdr__actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.hdr__act{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  min-width:44px;min-height:44px;justify-content:center;padding:0 8px;
  color:var(--encre-950);text-decoration:none;font-size:.6875rem;font-weight:500;
  border-radius:var(--r-sm);transition:background var(--t-fast) var(--ease)
}
.hdr__act:hover{background:var(--sable-50)}
.hdr__act span{display:none}
@media (min-width:1024px){ .hdr__act span{display:block} }
@media (max-width:767px){ .hdr__act:not(.hdr__act--cart):not([href="/compte/listes"]){display:none} }
.hdr__cart-wrap{position:relative;display:block}
.hdr__badge{
  position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--bissap-600);color:#fff;font-size:.6875rem;font-weight:600;font-variant-numeric:tabular-nums
}

.rayons{position:relative;border-top:1px solid var(--sable-200);background:var(--sable-0)}
.rayons__in{display:flex;align-items:center;gap:2px;height:46px;overflow-x:auto;scrollbar-width:none}
.rayons__in::-webkit-scrollbar{display:none}
.rayons a{
  display:flex;align-items:center;height:34px;padding:0 12px;flex:none;
  color:var(--encre-950);text-decoration:none;font-size:.875rem;font-weight:500;
  border-radius:var(--r-sm);transition:background var(--t-fast) var(--ease)
}
.rayons a:hover{background:var(--sable-50)}
.rayons a[aria-current]{background:var(--encre-100);color:var(--encre-800);font-weight:600}
.rayons__promo{color:var(--bissap-600)!important;font-weight:600!important}
.rayons__all{
  display:none;align-items:center;gap:8px;height:34px;padding:0 14px;margin-right:8px;flex:none;
  border:1px solid var(--sable-200);border-radius:var(--r-sm);background:var(--sable-0);
  font-size:.875rem;font-weight:600;cursor:pointer
}
@media (min-width:1024px){ .rayons__all{display:flex} }
.rayons__all[aria-expanded="true"]{background:var(--encre-100);border-color:var(--encre-800)}
/* Lien "Tout le catalogue" de la barre des rayons : meme poids que le bouton
   du mega-menu, pour que les deux portes d'entree soient equivalentes. */
.rayons__cat{font-weight:600;color:var(--encre-800);white-space:nowrap}

/* Panneau "Tous les rayons". Le bouton existait et n'ouvrait rien. */
.mega{
  position:absolute;left:0;right:0;z-index:39;display:none;
  background:var(--sable-0);border-bottom:1px solid var(--sable-200);box-shadow:var(--e2)
}
.mega.is-on{display:block}
@media (max-width:1023px){ .mega{display:none!important} }
.mega__in{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 32px;padding:24px 0 28px}
.mega__col h3{margin:0 0 10px;font-size:.9375rem}
.mega__col h3 a{color:var(--encre-950);text-decoration:none}
.mega__col h3 a:hover{color:var(--encre-800);text-decoration:underline}
.mega__col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mega__col li a{
  display:block;font-size:.875rem;color:var(--sable-600);text-decoration:none;
  padding:2px 0
}
.mega__col li a:hover{color:var(--encre-800);text-decoration:underline}
.mega__all{margin-top:6px;font-size:.8125rem;font-weight:600;color:var(--encre-800)}

/* ---------- 6. Fil d'Ariane ---------- */
.crumb{padding:16px 0 4px;font-size:.8125rem}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0}
.crumb li{display:flex;align-items:center;gap:6px;color:var(--sable-600)}
.crumb a{color:var(--sable-600);text-decoration:none}
.crumb a:hover{color:var(--encre-800);text-decoration:underline}
.crumb [aria-current]{color:var(--encre-950);font-weight:500}
@media (max-width:767px){ .crumb li:not(:nth-last-child(-n+2)){display:none} }

/* ---------- 7. Grille fiche produit ---------- */
.pdp{display:grid;gap:24px;padding:12px 0 40px}
@media (min-width:1024px){
  .pdp{grid-template-columns:minmax(0,1.05fr) minmax(380px,440px);gap:48px;padding-bottom:64px}
}

/* Galerie */
.gal__stage{position:relative;background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);overflow:hidden}
.gal__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;aspect-ratio:1/1
}
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{
  flex:0 0 100%;scroll-snap-align:center;margin:0;
  display:grid;place-items:center;padding:0
}
.gal__slide img{width:100%;height:100%;object-fit:contain}
.gal__slide .ill{padding:9%}
.gal__slide--a{background:var(--sable-0)}
.gal__slide--b{background:var(--sable-50)}
.gal__slide--c{background:var(--encre-100)}
.gal__slide--d{background:var(--mangue-100)}
.ill--zoom{transform:scale(1.35)}
.ill--tilt{transform:rotate(-8deg) scale(1.1)}
.ill--small{transform:scale(.75)}

.tag{
  position:absolute;left:12px;top:12px;z-index:2;
  padding:4px 8px;border-radius:var(--r-xs);
  font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums
}
.tag--promo{background:var(--bissap-600);color:#fff}
.gal__zoom{
  position:absolute;right:12px;top:12px;z-index:2;
  width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid var(--sable-200);border-radius:var(--r-full);
  transition:transform var(--t-fast) var(--ease)
}
.gal__zoom:hover{transform:scale(1.06)}

.gal__dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.gal__dots i{width:6px;height:6px;border-radius:var(--r-full);background:var(--sable-400);transition:width var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.gal__dots i.is-on{width:20px;background:var(--encre-800)}
@media (min-width:768px){ .gal__dots{display:none} }

.gal__thumbs{display:none;gap:8px;margin-top:10px}
@media (min-width:768px){ .gal__thumbs{display:flex} }
.gal__thumb{
  width:78px;height:78px;padding:0;cursor:pointer;overflow:hidden;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-sm);
  transition:border-color var(--t-fast) var(--ease)
}
.gal__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal__thumb:hover{border-color:var(--sable-400)}
.gal__thumb.is-on{border-color:var(--encre-800);box-shadow:0 0 0 1px var(--encre-800)}

/* Colonne achat */
.buy{display:flex;flex-direction:column}
.buy h1{margin-bottom:.5rem}
.rate{display:inline-flex;align-items:center;gap:6px;font-size:.875rem;margin-bottom:1rem;text-decoration:none;color:var(--encre-950);align-self:flex-start}
.rate--link:hover{text-decoration:underline}
.share{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  padding:6px 10px;min-height:36px;cursor:pointer;
  background:none;border:1px solid var(--sable-200);border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:600;color:var(--encre-800)
}
.share:hover{background:var(--sable-50);border-color:var(--sable-400)}
.buy__top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.stars{display:inline-flex;gap:1px;color:var(--sable-200)}
.stars .ic{width:15px;height:15px;fill:currentColor;stroke:none}
.stars .ic.on{color:var(--etoile)}
.stars--sm .ic{width:13px;height:13px}

/* Variantes */
.opt{margin:1.25rem 0 0}
.opt legend{font-size:.875rem;font-weight:600;margin-bottom:.5rem}
.opt legend span{font-weight:400;color:var(--sable-600)}
.opt__row{display:flex;flex-wrap:wrap;gap:8px}

.swatch{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;cursor:pointer;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);
  font-size:.875rem;font-weight:500;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)
}
.swatch span{width:20px;height:20px;border-radius:var(--r-full);background:var(--sw);border:1px solid rgba(14,21,51,.14)}
.swatch:hover{border-color:var(--sable-400)}
.swatch.is-on{border-color:var(--encre-800);box-shadow:0 0 0 1px var(--encre-800)}

.chip{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;cursor:pointer;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);
  font-size:.9375rem;font-weight:600;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)
}
.chip:hover{border-color:var(--sable-400)}
.chip.is-on{border-color:var(--encre-800);box-shadow:0 0 0 1px var(--encre-800)}
.chip.is-out{color:var(--sable-600);background:var(--sable-50);text-decoration:line-through}
.chip.is-out em{font-style:normal;font-size:.6875rem;font-weight:500;text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
.chip--sm{min-height:36px;padding:0 12px;font-size:.8125rem;font-weight:500}
.chip--sm.is-on{background:var(--encre-100)}

/* Signal de demande */
.alert-box{
  margin-top:14px;padding:14px;border-radius:var(--r-md);
  background:var(--sable-0);border:1px solid var(--encre-800)
}
.alert-box__h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;margin-bottom:.25rem;color:var(--encre-800)}
.alert-box .muted{font-size:.8125rem;margin-bottom:.75rem}
.alert-box__form{display:flex;gap:8px;flex-wrap:wrap}
.alert-box__form input{
  flex:1;min-width:160px;height:44px;padding:0 12px;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
.alert-box__form input:focus{outline:none;border-color:var(--encre-800);box-shadow:0 0 0 3px rgba(30,42,120,.12)}

/* Livraison */
.ship{
  margin-top:20px;padding:14px;border-radius:var(--r-md);
  background:var(--sable-0);border:1px solid var(--sable-200)
}
.ship__stock{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;color:var(--succes);margin-bottom:.75rem}
.ship__row{display:flex;align-items:center;gap:8px;margin-bottom:.6rem;color:var(--sable-600)}
.ship__row select{
  flex:1;height:44px;padding:0 12px;cursor:pointer;
  background:var(--sable-50);border:1px solid var(--sable-200);border-radius:var(--r-md);color:var(--encre-950)
}
.ship__row select:focus{outline:none;border-color:var(--encre-800);box-shadow:0 0 0 3px rgba(30,42,120,.12)}
.ship__res{display:flex;align-items:flex-start;gap:8px;font-size:.9375rem;margin-bottom:.35rem}
.ship__res .ic{margin-top:3px;color:var(--encre-800)}
.ship__free{font-size:.8125rem;color:var(--sable-600);margin:0}

/* Actions */
.actions{display:flex;gap:10px;margin-top:20px}
.actions--sec{margin-top:10px}
.actions--sec .btn{flex:1;min-height:44px;font-size:.875rem}
.actions .btn--cta{flex:1}
.qty{display:flex;align-items:center;border:1px solid var(--sable-200);border-radius:var(--r-md);background:var(--sable-0);overflow:hidden}
.qty button{width:44px;height:52px;display:grid;place-items:center;cursor:pointer;border:0;background:none;transition:background var(--t-fast) var(--ease)}
.qty button:hover{background:var(--sable-50)}
.qty input{
  width:34px;height:52px;text-align:center;border:0;background:none;
  font-weight:600;font-variant-numeric:tabular-nums
}
.qty input:focus{outline:none}

.trust{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.trust li{display:flex;align-items:center;gap:10px;font-size:.875rem;color:var(--encre-950)}
.trust .ic{color:var(--encre-800)}

/* ---------- 8. Accordéons ---------- */
.acc{background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);overflow:hidden;margin-bottom:40px}
.acc__item + .acc__item{border-top:1px solid var(--sable-200)}
.acc__item h2{margin:0;font-size:1rem}
.acc__item button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:60px;padding:0 18px;cursor:pointer;border:0;background:none;
  font-family:var(--font-display);font-size:1.0625rem;font-weight:600;text-align:left;
  transition:background var(--t-fast) var(--ease)
}
.acc__item button:hover{background:var(--sable-50)}
.acc__item button .ic{transition:transform var(--t-base) var(--ease);color:var(--sable-600)}
.acc__item.is-open button .ic{transform:rotate(180deg)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease)}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__body > div{overflow:hidden}
.acc__body > div > *{max-width:68ch}
.acc__body > div{padding-inline:18px}
.acc__item.is-open .acc__body > div{padding-bottom:20px}

.specs th{text-align:left;font-weight:500;color:var(--sable-600);padding:9px 16px 9px 0;width:42%;vertical-align:top}
.specs td{padding:9px 0;font-weight:500}
.specs tr + tr th,.specs tr + tr td{border-top:1px solid var(--sable-100)}

/* ---------- 9. Souvent achetés ensemble ---------- */
.bundle{margin-bottom:40px}
.bundle h2{margin-bottom:14px}
.bundle__in{
  display:grid;gap:18px;padding:18px;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
@media (min-width:900px){ .bundle__in{grid-template-columns:1fr 260px;align-items:center} }
.bundle__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bundle__list label{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px;border-radius:var(--r-sm);transition:background var(--t-fast) var(--ease)}
.bundle__list label:hover{background:var(--sable-50)}
.bundle__list input{width:20px;height:20px;flex:none;accent-color:var(--encre-800);cursor:pointer}
.bundle__thumb{width:56px;height:56px;flex:none;padding:0;overflow:hidden;background:var(--sable-50);border-radius:var(--r-sm)}
.bundle__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bundle__thumb .ill{padding:8px}
.bundle__txt{font-size:.9375rem;line-height:1.35}
.bundle__side{
  padding:16px;border-radius:var(--r-md);background:var(--sable-50);border:1px solid var(--sable-200)
}
.bundle__side .price{margin:2px 0 12px}

/* ---------- 10. Avis ---------- */
.reviews{margin-bottom:40px}
.reviews h2{margin-bottom:16px}
.reviews__head{
  display:grid;gap:20px;padding:20px;margin-bottom:16px;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
@media (min-width:700px){ .reviews__head{grid-template-columns:200px 1fr;align-items:center} }
.reviews__score{text-align:center}
.reviews__big{font-family:var(--font-display);font-size:2.75rem;font-weight:700;line-height:1;margin:0 0 6px;font-variant-numeric:tabular-nums}
.reviews__big span{font-size:1rem;font-weight:600;color:var(--sable-600)}
.reviews__score .stars{justify-content:center;margin-bottom:6px}
.reviews__score .muted{font-size:.8125rem;margin:0}

.histo{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.histo li{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;gap:10px;font-size:.8125rem;font-variant-numeric:tabular-nums}
.histo__bar{height:8px;border-radius:var(--r-full);background:var(--sable-100);overflow:hidden}
.histo__bar i{display:block;height:100%;width:var(--w);background:var(--etoile);border-radius:var(--r-full)}
.histo__n{text-align:right;color:var(--sable-600)}

.reviews__filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.reviews__list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
.rev{padding:16px;background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)}
.rev__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.rev__who{font-weight:600;font-size:.9375rem;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rev__top .muted{font-size:.8125rem;margin:0}
.rev .stars{margin:6px 0 8px}
.rev p{font-size:.9375rem}
.badge-ok{
  display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--r-xs);
  background:rgba(18,128,92,.1);color:var(--succes);font-size:.6875rem;font-weight:600
}
.rev__reply{margin-top:12px;padding:12px;border-left:3px solid var(--encre-800);background:var(--sable-50);border-radius:0 var(--r-sm) var(--r-sm) 0}
.rev__reply p{font-size:.875rem;margin-bottom:.4rem}
.rev__help{margin:10px 0 0}
.rev__help button{
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-size:.8125rem;font-weight:600;color:var(--encre-800);text-decoration:underline;text-underline-offset:3px
}

/* ---------- 11. Recommandations + cartes produit ---------- */
.reco{margin-bottom:40px}
.reco__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){ .grid{grid-template-columns:repeat(3,1fr);gap:16px} }
@media (min-width:1024px){ .grid{grid-template-columns:repeat(4,1fr)} }

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);
  overflow:hidden;transition:box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)
}
.card:hover{box-shadow:var(--e1);transform:translateY(-1px)}
.card__img{aspect-ratio:1/1;background:var(--sable-50);display:flex;align-items:center;justify-content:center}
.card__b{padding:12px;display:grid;gap:4px;flex:1}
.card__brand{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--sable-600);margin:0}
.card__t{font-size:.875rem;font-weight:600;line-height:1.35;margin:0;min-height:2.4em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__t a{color:inherit;text-decoration:none}
.card__t a::after{content:"";position:absolute;inset:0}
.card__ship{display:flex;align-items:center;gap:5px;font-size:.6875rem;color:var(--sable-600);margin:2px 0 0}
.card__wish{
  position:absolute;right:8px;top:8px;z-index:2;width:36px;height:36px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid var(--sable-200);border-radius:var(--r-full)
}
.card__wish[aria-pressed="true"]{color:var(--bissap-600)}
.card__wish[aria-pressed="true"] .ic{fill:currentColor}

/* Skeletons */
.sk{background:var(--sable-100);border-radius:var(--r-sm);animation:pulse 1.5s ease-in-out infinite}
.sk--img{aspect-ratio:1/1;border-radius:0}
.sk--l1{height:9px;width:40%}
.sk--l2{height:13px;width:88%;margin-top:6px}
.sk--l3{height:15px;width:52%;margin-top:8px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- 12. Bloc demande ---------- */
.demand{margin-bottom:48px}
.demand__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:22px;border-radius:var(--r-md);
  background:var(--encre-100);border:1px solid #D3D9F3
}
.demand h2{margin-bottom:.35rem}
.demand p{color:var(--encre-800);max-width:56ch;font-size:.9375rem}

/* ---------- 13. Footer ---------- */
.ftr{background:var(--encre-950);color:#D9DCEA;padding:40px 0 20px;margin-top:auto}
.ftr__in{display:grid;gap:28px}
@media (min-width:768px){ .ftr__in{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.logo--ftr{color:#fff;margin:0 0 .5rem}
.ftr .muted{color:#9AA0BC;font-size:.875rem}
.ftr a{color:#D9DCEA}
.ftr h3{color:#fff;margin-bottom:.6rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.06em}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.875rem}
.ftr ul a{text-decoration:none}
.ftr ul a:hover{text-decoration:underline}
.pay li{color:#9AA0BC}
.lowdata{
  margin-top:14px;padding:8px 12px;min-height:40px;cursor:pointer;
  background:none;color:#D9DCEA;border:1px solid #333A63;border-radius:var(--r-sm);font-size:.8125rem
}
.lowdata[aria-pressed="true"]{background:#fff;color:var(--encre-950);border-color:#fff;font-weight:600}
.ftr__legal{margin-top:28px;padding-top:16px;border-top:1px solid #262D52;font-size:.8125rem;color:#8A90AE}

/* ---------- 14. Barre d'achat sticky ---------- */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  background:var(--sable-0);border-top:1px solid var(--sable-200);box-shadow:var(--e3);
  transform:translateY(100%);transition:transform var(--t-slow) var(--ease);
  padding-bottom:env(safe-area-inset-bottom)
}
.buybar.is-on{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.buybar__name{font-size:.8125rem;color:var(--sable-600);margin:0 0 2px}
.buybar .btn--cta{min-height:46px}
@media (max-width:520px){ .buybar__name{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} }

/* ---------- 15. Toasts ---------- */
.toasts{position:fixed;left:50%;bottom:96px;z-index:60;transform:translateX(-50%);display:grid;gap:8px;width:min(420px,calc(100vw - 32px))}
.toast{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:var(--encre-950);color:#fff;border-radius:var(--r-md);box-shadow:var(--e3);
  font-size:.9375rem;opacity:0;transform:translateY(10px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)
}
.toast.is-visible{opacity:1;transform:none}
.toast--success{background:var(--succes)}
.toast--error{background:var(--erreur)}
.toast--info{background:var(--encre-950)}
.toast .ic{color:var(--mangue-500)}
.toast button{
  margin-left:auto;background:none;border:0;cursor:pointer;
  color:var(--mangue-500);font-weight:600;font-size:.875rem;text-decoration:underline;text-underline-offset:3px
}

/* ---------- 16. Visionneuse plein écran ---------- */
/* Aucun padding sur la scène : la photo occupe tout l'espace disponible.
   Les marges servent uniquement à dégager les commandes. */
.lightbox{
  position:fixed;inset:0;z-index:80;background:rgba(14,21,51,.97);
  display:none;grid-template-rows:1fr auto;
}
.lightbox[open],.lightbox.is-on{display:grid}
body.lb-open{overflow:hidden}

.lightbox__stage{
  position:relative;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  touch-action:pan-y pinch-zoom;
}
.lightbox__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;
}

.lightbox__close,.lightbox__nav{
  position:absolute;z-index:2;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;border-radius:var(--r-full);
  transition:background var(--t-fast) var(--ease)
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__close{top:14px;right:14px;width:48px;height:48px}
.lightbox__nav{top:50%;transform:translateY(-50%);width:48px;height:48px}
.lightbox__nav--prev{left:14px}
.lightbox__nav--next{right:14px}
.lightbox__nav[disabled]{opacity:.3;pointer-events:none}

.lightbox__count{
  position:absolute;top:20px;left:20px;z-index:2;
  padding:5px 11px;border-radius:var(--r-full);
  background:rgba(255,255,255,.12);color:#fff;
  font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums
}

.lightbox__strip{
  display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;padding:12px 14px 16px
}
.lightbox__strip::-webkit-scrollbar{display:none}
.lightbox__strip button{
  width:56px;height:56px;flex:none;padding:0;overflow:hidden;cursor:pointer;
  background:none;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);
  opacity:.55;transition:opacity var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)
}
.lightbox__strip button img{width:100%;height:100%;object-fit:cover;display:block}
.lightbox__strip button.is-on{opacity:1;border-color:#fff}
.lightbox__strip:has(button:only-child){display:none}

@media (min-width:768px){
  .lightbox__close{top:20px;right:20px}
  .lightbox__nav--prev{left:24px}
  .lightbox__nav--next{right:24px}
  .lightbox__strip button{width:64px;height:64px}
}

/* ---------- 17. Mode données réduites ---------- */
/* Mode donnees reduites.
   La decision est prise cote serveur (LowDataModeMiddleware) : le HTML rendu
   contient deja des images plus petites et saute les blocs secondaires. Ces
   regles ne font que finir le travail cote presentation. */
body.lowdata .reco{display:none}
body.lowdata .ticker__list li:nth-child(n+4){display:none}
body.lowdata .wa-fab__label{display:none}
body.lowdata .card{box-shadow:none}
body.lowdata .card:hover{transform:none;box-shadow:none}
body.lowdata *{animation:none!important;transition:none!important}
/* Le bouton du pied de page est devenu un lien : meme apparence. */
a.lowdata{display:inline-block;text-decoration:none}

/* ---------- 18. Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
}

/* =========================================================
   B. ACCUEIL
   ========================================================= */

/* ---------- Titres de section ---------- */
.sec{padding:44px 0}
.sec--last{padding-bottom:56px}
.sec__hd{margin-bottom:18px}
.sec__hd h2{margin-bottom:.3rem}
.sec__hd p{font-size:.9375rem;margin:0;max-width:60ch}
.sec__hd--row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec__ic{display:inline-block;vertical-align:-3px;margin-right:4px;color:var(--bissap-600)}
@media (min-width:1024px){ .sec{padding:60px 0} }

/* ---------- 1. Hero ---------- */
.hero{background:var(--sable-0);border-bottom:1px solid var(--sable-200)}
.hero__in{display:grid;gap:32px;padding:36px 0 44px}
@media (min-width:1024px){
  .hero__in{grid-template-columns:minmax(0,1.15fr) minmax(340px,400px);gap:56px;align-items:center;padding:64px 0 72px}
}

.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,1.2rem + 3.2vw,3.25rem);line-height:1.08;letter-spacing:-.025em;
  margin-bottom:1rem
}
.hero__sub{font-size:1.0625rem;color:var(--sable-600);max-width:52ch;margin-bottom:1.5rem}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1.75rem}
.hero__cta .btn{min-height:52px}

.hero__mini{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 24px;
  font-size:.875rem;font-weight:500
}
.hero__mini li{display:flex;align-items:center;gap:8px}
.hero__mini .ic{color:var(--encre-800)}

/* Panneau « Recherché en ce moment » — la vitrine du capteur de demande */
.ticker{
  padding:20px;border-radius:var(--r-lg);
  background:var(--sable-50);border:1px solid var(--sable-200)
}
.ticker__hd{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.ticker__hd h2{font-size:.9375rem;font-family:var(--font-body);font-weight:600;letter-spacing:0}
.pulse{
  width:8px;height:8px;flex:none;border-radius:var(--r-full);background:var(--succes);
  box-shadow:0 0 0 0 rgba(18,128,92,.45);animation:pulseRing 2.4s var(--ease) infinite
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(18,128,92,.4)}
  70%{box-shadow:0 0 0 8px rgba(18,128,92,0)}
  100%{box-shadow:0 0 0 0 rgba(18,128,92,0)}
}

.ticker__list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:2px;counter-reset:t}
.ticker__list li{
  display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;
  padding:9px 8px;border-radius:var(--r-sm);
  transition:background var(--t-base) var(--ease)
}
.ticker__list li:hover{background:var(--sable-0)}
.ticker__rk{
  font-family:var(--font-display);font-weight:700;font-size:.8125rem;
  color:var(--sable-400);text-align:center;font-variant-numeric:tabular-nums
}
.ticker__list li:first-child .ticker__rk{color:var(--encre-800)}
.ticker__q{font-size:.9375rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticker__n{
  font-size:.8125rem;font-weight:600;color:var(--sable-600);font-variant-numeric:tabular-nums;
  transition:color var(--t-base) var(--ease)
}
.ticker__n.is-up{color:var(--succes)}
.ticker__n--none em{
  font-style:normal;display:inline-block;margin-left:6px;padding:2px 6px;border-radius:var(--r-xs);
  background:var(--mangue-100);color:var(--attention);font-size:.6875rem;font-weight:600
}
.ticker__ft{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0;font-size:.8125rem;padding-top:12px;border-top:1px solid var(--sable-200)}

/* ---------- 2. Bento des rayons ---------- */
.rayonx{padding:44px 0;background:var(--sable-50)}
@media (min-width:1024px){ .rayonx{padding:60px 0} }

.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){ .bento{grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-rows:160px} }

.tile{
  position:relative;display:flex;flex-direction:column;gap:2px;
  min-height:150px;padding:16px;overflow:hidden;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);
  color:var(--encre-950);text-decoration:none;
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)
}
.tile:hover{border-color:var(--encre-800);transform:translateY(-2px);box-shadow:var(--e1)}
.tile__ic{width:26px;height:26px;fill:none;stroke:var(--encre-800);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:auto}
.tile__n{font-family:var(--font-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;margin-top:14px}
.tile__c{font-size:.75rem;color:var(--sable-600)}
.tile__bar{display:block;height:4px;margin-top:10px;border-radius:var(--r-full);background:var(--sable-100);overflow:hidden}
.tile__bar i{display:block;height:100%;width:var(--w);background:var(--encre-800);border-radius:var(--r-full)}
.tile__pc{font-size:.6875rem;font-weight:600;color:var(--encre-800);margin-top:6px}

@media (min-width:768px){
  .tile--xl{grid-column:span 2;grid-row:span 2;padding:24px}
  .tile--xl .tile__ic{width:38px;height:38px}
  .tile--xl .tile__n{font-size:1.625rem}
  .tile--xl .tile__c{font-size:.875rem}
  .tile--tall{grid-row:span 2}
  .tile--wide{grid-column:span 2}
}
@media (max-width:767px){
  .tile--xl{grid-column:span 2;min-height:170px}
  .tile--wide{grid-column:span 2;min-height:118px}
  .tile--wide .tile__n{margin-top:8px}
}


/* Rail horizontal (vu récemment) */
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);gap:12px;
  overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin
}
.rail .card{scroll-snap-align:start}
@media (min-width:1024px){ .rail{grid-auto-columns:minmax(0,1fr);overflow:visible;gap:16px} }

/* ---------- 4. Bande réassurance ---------- */
.reass{background:var(--encre-800);color:#fff}
.reass__in{display:grid;gap:20px;padding:28px 0}
@media (min-width:640px){ .reass__in{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .reass__in{grid-template-columns:repeat(4,1fr);gap:28px;padding:32px 0} }
.reass div{display:flex;gap:12px;align-items:flex-start}
.reass .ic{flex:none;margin-top:2px;opacity:.85}
.reass p{margin:0;font-size:.8125rem;color:#C6CCE9;line-height:1.5}
.reass strong{display:block;color:#fff;font-size:.9375rem;font-weight:600;margin-bottom:2px}

/* ---------- 5. Sélections éditoriales ---------- */
.selec{display:grid;gap:14px}
@media (min-width:768px){ .selec{grid-template-columns:repeat(3,1fr)} }
.scard{
  display:flex;flex-direction:column;min-height:190px;padding:20px;
  border-radius:var(--r-md);border:1px solid transparent;text-decoration:none;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)
}
.scard:hover{transform:translateY(-2px);box-shadow:var(--e2)}
.scard--a{background:var(--encre-950);color:#fff}
.scard--b{background:var(--mangue-100);color:var(--encre-950);border-color:#F3DFB4}
.scard--c{background:var(--encre-100);color:var(--encre-950);border-color:#D3D9F3}
.scard__k{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;opacity:.6}
.scard__t{font-family:var(--font-display);font-weight:600;font-size:1.3125rem;line-height:1.2;letter-spacing:-.015em;margin:10px 0 6px}
.scard__d{font-size:.875rem;opacity:.75;max-width:34ch}
.scard__go{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding-top:16px;font-size:.875rem;font-weight:600}
.scard--a .scard__go{color:var(--mangue-500)}
.scard--b .scard__go,.scard--c .scard__go{color:var(--encre-800)}

/* ---------- 6. Bloc demande ---------- */
.ask{background:var(--sable-0);border-block:1px solid var(--sable-200);padding:44px 0}
@media (min-width:1024px){ .ask{padding:60px 0} }
.ask__in{display:grid;gap:28px}
@media (min-width:900px){ .ask__in{grid-template-columns:1fr minmax(320px,400px);gap:56px;align-items:center} }
.ask h2{margin-bottom:.6rem}
.ask__txt p{max-width:58ch;color:var(--sable-600)}
.ask__proof{display:flex;align-items:center;gap:9px;margin-top:1rem;font-size:.875rem;font-weight:600;color:var(--succes)}

.ask__form{padding:20px;border-radius:var(--r-md);background:var(--sable-50);border:1px solid var(--sable-200)}
.field{margin-bottom:14px}
.field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:6px}
.field label .muted{font-weight:400}
.field input{
  width:100%;height:48px;padding:0 14px;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
.field input:focus{outline:none;border-color:var(--encre-800);box-shadow:0 0 0 3px rgba(30,42,120,.12)}
.field input::placeholder{color:var(--sable-400)}

/* ---------- 7. Mode données réduites ---------- */
body.lowdata .rail,body.lowdata .selec{display:none}


/* =========================================================
   C. TUNNEL D'ACHAT & ESPACE COMPTE
   ========================================================= */

/* ---------- Pagination + barre de tri ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:32px 0}
.pager__btn{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);
  color:var(--encre-950);text-decoration:none
}
.pager__btn:hover{border-color:var(--encre-800)}
.pager__info{font-size:.875rem;color:var(--sable-600)}

.sortbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}
@media (min-width:1024px){ .sortbar{justify-content:flex-end} .sortbar__filters{display:none} }

/* ---------- Filtres a facettes ---------- */
.listing{display:grid;gap:24px}
@media (min-width:1024px){ .listing{grid-template-columns:236px minmax(0,1fr);gap:32px;align-items:start} }
.listing__main{min-width:0}

.facets{
  display:none;padding:16px;border-radius:var(--r-md);
  background:var(--sable-0);border:1px solid var(--sable-200)
}
.facets.is-on{display:block}
@media (min-width:1024px){
  .facets{display:block;position:sticky;top:120px;padding:0;background:none;border:0}
}
.facets__hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px}
.facets__hd h2{font-size:1rem}
.facets__clear{font-size:.8125rem;font-weight:600;color:var(--bissap-600)}

.facet{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--sable-200)}
.facet:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.facet__t{font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sable-600);margin:0 0 8px}
.facet__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}

.facet__opt{
  display:flex;align-items:center;gap:9px;min-height:36px;padding:4px 6px;
  border-radius:var(--r-sm);color:var(--encre-950);text-decoration:none;font-size:.875rem;
  transition:background var(--t-fast) var(--ease)
}
.facet__opt:hover{background:var(--sable-50)}
.facet__opt.is-on{font-weight:600}
.facet__box{
  width:18px;height:18px;flex:none;display:grid;place-items:center;
  border:1px solid var(--sable-400);border-radius:var(--r-xs);background:var(--sable-0)
}
.facet__opt.is-on .facet__box{background:var(--encre-800);border-color:var(--encre-800);color:#fff}
.facet__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.facet__n{font-size:.75rem;color:var(--sable-600);font-variant-numeric:tabular-nums}

.facet__range{display:flex;align-items:center;gap:6px;margin-top:10px}
.facet__range input{
  width:100%;min-width:0;height:38px;padding:0 8px;font-size:.875rem;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-sm)
}
.facet__range input:focus{outline:none;border-color:var(--encre-800)}

/* ---------- Autocompletion de recherche ---------- */
.search--combo{position:relative}
.suggest{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;
  max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;background:var(--sable-0);
  border:1px solid var(--sable-200);border-radius:var(--r-md);box-shadow:var(--e3)
}
.suggest__t{
  margin:8px 8px 4px;font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--sable-600)
}
.suggest__row{
  display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px;
  border-radius:var(--r-sm);color:var(--encre-950);text-decoration:none;font-size:.875rem
}
.suggest__row:hover,.suggest__row.is-on{background:var(--sable-50)}
.suggest__row.is-on{outline:2px solid var(--encre-800);outline-offset:-2px}
.suggest__row--plain{min-height:40px;color:var(--sable-600)}
.suggest__img{
  width:38px;height:38px;flex:none;object-fit:cover;
  background:var(--sable-50);border-radius:var(--r-xs)
}
.suggest__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest__price{flex:none;font-weight:600;font-variant-numeric:tabular-nums;font-size:.8125rem}
.suggest__empty{margin:0;padding:14px 10px;font-size:.875rem;color:var(--sable-600)}

.noresult{max-width:420px;margin-top:8px}
.noresult .ask__form{margin-top:16px}

/* ---------- Page selection ---------- */
.selhead{
  padding:26px;border-radius:var(--r-md);margin-bottom:20px;
  border:1px solid transparent
}
.selhead h1{margin:6px 0 8px}
.selhead__k{margin:0;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;opacity:.6}
.selhead__d{margin:0;max-width:56ch;opacity:.8}
.selhead__n{margin:14px 0 0;font-size:.875rem;font-weight:600;opacity:.7}
.selhead.scard--a{background:var(--encre-950);color:#fff}
.selhead.scard--b{background:var(--mangue-100);color:var(--encre-950);border-color:#F3DFB4}
.selhead.scard--c{background:var(--encre-100);color:var(--encre-950);border-color:#D3D9F3}
.selhead__intro{max-width:68ch;margin-bottom:8px}

/* ---------- Page demande de produit ---------- */
.askpage{display:grid;gap:28px}
@media (min-width:900px){ .askpage{grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start} }
.askpage__main .ask__form{max-width:520px}
.askpage__side{
  padding:20px;border-radius:var(--r-md);
  background:var(--sable-50);border:1px solid var(--sable-200)
}
.askpage__side h2{font-size:1rem;margin-bottom:12px}
.askpage__side .muted{font-size:.8125rem;margin-top:12px}
.field textarea{
  width:100%;padding:10px 14px;min-height:84px;resize:vertical;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
.field select{
  width:100%;height:48px;padding:0 12px;cursor:pointer;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
.field textarea:focus,.field select:focus{outline:none;border-color:var(--encre-800);box-shadow:0 0 0 3px rgba(30,42,120,.12)}

/* ---------- Liste des marques ---------- */
.brandgrid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){ .brandgrid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .brandgrid{grid-template-columns:repeat(5,1fr)} }
.brandcard{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-height:132px;padding:18px 12px;text-align:center;text-decoration:none;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);
  color:var(--encre-950);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)
}
.brandcard:hover{border-color:var(--encre-800);transform:translateY(-1px)}
.brandcard__logo{max-width:100%;max-height:44px;object-fit:contain}
.brandcard__initial{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--encre-100);color:var(--encre-800);
  font-family:var(--font-display);font-weight:700;font-size:1.25rem
}
.brandcard__n{font-weight:600;font-size:.9375rem;margin-top:2px}
.brandcard__c{font-size:.75rem;color:var(--sable-600)}

/* ---------- Formulaire d'adresse ---------- */
.address-form{
  margin-top:20px;padding:20px;max-width:560px;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
.address-form h2{font-size:1.0625rem;margin-bottom:14px}
.address-form__actions{display:flex;gap:10px;margin-top:6px}
.field--check{display:flex;align-items:flex-end}
.field--check label{display:flex;align-items:center;gap:8px;font-weight:500;min-height:48px}
.field--check input{width:20px;height:20px;accent-color:var(--encre-800)}
.sortbar select{
  height:44px;padding:0 14px;cursor:pointer;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);
  font-size:.875rem;font-weight:500
}

.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chips-row .chip{min-height:36px;padding:0 14px;font-size:.8125rem}

/* ---------- Footer toujours en bas, meme sur une page courte/vide ----------
   body devient un conteneur flex colonne pleine hauteur ; main absorbe
   l'espace restant (flex:1) et pousse le footer en bas de viewport. */
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
.hdr,.ftr{flex-shrink:0}

.card__out{font-size:.75rem;color:var(--erreur);font-weight:600;margin:2px 0 0}
.brand__logo{max-height:48px;margin-bottom:12px}

/* ---------- Panier ---------- */
.cart-page h1{margin-bottom:20px}
.cart-layout{display:grid;gap:24px}
@media (min-width:1024px){ .cart-layout{grid-template-columns:1fr 340px;align-items:start} }

.cart-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cart-line{
  display:grid;grid-template-columns:64px 1fr auto auto auto;align-items:center;gap:14px;
  padding:14px;background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
.cart-line--sk{grid-template-columns:64px 1fr}
.cart-line__img{width:64px;height:64px;padding:6px;background:var(--sable-50);border-radius:var(--r-sm);flex:none}
.cart-line__info{min-width:0}
.cart-line__name{font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--encre-950)}
.cart-line__warn{font-size:.75rem;color:var(--erreur);margin:2px 0 0}
.cart-line__subtotal{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cart-line__remove{
  width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:var(--sable-600);border-radius:var(--r-full)
}
.cart-line__remove:hover{background:var(--sable-50);color:var(--erreur)}
.cart-empty{padding:40px 20px;text-align:center;color:var(--sable-600)}

.cart-summary{
  padding:20px;border-radius:var(--r-md);background:var(--sable-0);
  border:1px solid var(--sable-200);position:sticky;top:88px
}
.cart-summary h2{margin-bottom:14px}
.cart-summary__lines{margin:0 0 16px;display:grid;gap:8px}
.cart-summary__lines > div{display:flex;justify-content:space-between;font-size:.9375rem}
.cart-summary__total{padding-top:10px;border-top:1px solid var(--sable-200);font-weight:700;font-size:1.0625rem}
.cart-wa{margin-top:10px}
.cart-wa__note{margin:8px 0 0;font-size:.75rem;text-align:center}
.btn.is-disabled{opacity:.5;pointer-events:none}

/* ---------- Checkout ---------- */
.checkout-page h1{margin-bottom:20px}
.checkout-layout{display:grid;gap:24px}
@media (min-width:1024px){ .checkout-layout{grid-template-columns:1fr 360px;align-items:start} }

.field-group{
  padding:20px;margin-bottom:16px;border-radius:var(--r-md);
  background:var(--sable-0);border:1px solid var(--sable-200)
}
.field-group h2{margin-bottom:14px;font-size:1.0625rem}
.field-row{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){ .field-row{grid-template-columns:repeat(2,1fr)} }
.field select{
  width:100%;height:48px;padding:0 14px;cursor:pointer;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md)
}
.field select:disabled{background:var(--sable-50);color:var(--sable-600);cursor:not-allowed}
.field textarea{
  width:100%;padding:12px 14px;
  background:var(--sable-0);border:1px solid var(--sable-200);border-radius:var(--r-md);resize:vertical
}

.saved-addresses{display:grid;gap:8px;margin-bottom:16px}
.addr-radio{
  display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--sable-200);border-radius:var(--r-md);font-size:.9375rem
}
.addr-radio:has(input:checked){border-color:var(--encre-800);background:var(--encre-100)}

.pay-options{display:grid;gap:8px}
.pay-option{
  display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;
  border:1px solid var(--sable-200);border-radius:var(--r-md);font-weight:600;font-size:.9375rem
}
.pay-option:has(input:checked){border-color:var(--encre-800);background:var(--encre-100)}
.pay-option--soon{opacity:.55;cursor:not-allowed}
.pay-option--soon em{font-style:normal;font-size:.75rem}

.checkout-summary{
  padding:20px;border-radius:var(--r-md);background:var(--sable-0);
  border:1px solid var(--sable-200);position:sticky;top:88px
}
.checkout-summary__items{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;font-size:.875rem}
.checkout-summary__items li{display:flex;justify-content:space-between;gap:12px}
.checkout-error{
  margin-top:12px;padding:12px;border-radius:var(--r-sm);
  background:rgba(192,38,31,.08);color:var(--erreur);font-size:.875rem
}

/* ---------- Confirmation ---------- */
.success-page{display:grid;place-items:center;padding:60px 0;text-align:center}
.success-card{max-width:440px}
.success-card .ic{color:var(--succes);margin:0 auto 16px}
.success-ref{
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  padding:10px 20px;margin:12px 0;display:inline-block;
  background:var(--encre-100);border-radius:var(--r-md);letter-spacing:.02em
}
.success-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:20px 0}

/* ---------- Suivi de commande ---------- */
.tracking-page{max-width:520px;margin-inline:auto;padding:32px 0}
.tracking-form{display:grid;gap:0}
.tracking-error{
  margin-top:12px;padding:12px;border-radius:var(--r-sm);
  background:rgba(192,38,31,.08);color:var(--erreur);font-size:.875rem
}
.tracking-result{margin-top:24px}
.tracking-card{padding:20px;border-radius:var(--r-md);background:var(--sable-0);border:1px solid var(--sable-200)}
.tracking-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}

/* ---------- Statuts de commande (partagé compte + suivi) ---------- */
.order-status{
  padding:4px 10px;border-radius:var(--r-full);font-size:.75rem;font-weight:600;
  background:var(--sable-100);color:var(--sable-600)
}
.order-status--confirmed,.order-status--preparing{background:var(--encre-100);color:var(--encre-800)}
.order-status--shipped{background:var(--mangue-100);color:var(--attention)}
.order-status--delivered{background:rgba(18,128,92,.1);color:var(--succes)}
.order-status--issue,.order-status--cancelled{background:rgba(192,38,31,.08);color:var(--erreur)}

/* ---------- Compte ---------- */
.account-page{padding:32px 0}
.account-page h1{margin-bottom:20px}
.account-nav{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--sable-200)}
.account-nav a{
  padding:10px 4px;margin-right:20px;color:var(--sable-600);text-decoration:none;
  font-weight:600;font-size:.9375rem;border-bottom:2px solid transparent
}
.account-nav a.is-active{color:var(--encre-950);border-color:var(--encre-800)}

.profile-info{margin:0 0 16px;display:grid;gap:10px}
.profile-info > div{display:flex;justify-content:space-between;font-size:.9375rem;padding-bottom:8px;border-bottom:1px solid var(--sable-100)}
.profile-info dt{color:var(--sable-600)}
.profile-info dd{margin:0;font-weight:500}

.address-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.address-card{padding:16px;border-radius:var(--r-md);border:1px solid var(--sable-200)}
.address-card.is-default{border-color:var(--encre-800)}
.address-card__label{font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.address-card__actions{display:flex;gap:14px;margin-top:10px}
.address-card__actions button{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:.8125rem;font-weight:600;color:var(--encre-800);text-decoration:underline;text-underline-offset:3px
}

.order-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.order-card{padding:16px;border-radius:var(--r-md);background:var(--sable-0);border:1px solid var(--sable-200)}
.order-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.order-card__ref{font-family:var(--font-display);font-weight:700;font-size:1.0625rem}
.order-card__actions{display:flex;gap:16px;margin-top:10px;align-items:center}
.order-card__actions button{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:.8125rem;font-weight:600;color:var(--erreur)
}

/* ---------- Formulaire d'avis inline ---------- */
.review-form{
  margin-top:14px;padding:16px;border-radius:var(--r-md);
  background:var(--sable-0);border:1px solid var(--sable-200);max-width:420px
}
.review-form__stars{display:flex;gap:10px;margin:6px 0 14px}
.review-form__stars label{
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:.75rem;color:var(--sable-600)
}
.review-form__stars input{accent-color:var(--encre-800)}

/* ---------- Menu mobile ouvert ---------- */
body.menu-open{overflow:hidden}
/* Filet de securite sans JavaScript : au-dessus du point de rupture le tiroir
   est masque, le verrouillage du defilement ne doit donc plus s'appliquer.
   Sinon, agrandir la fenetre ou pivoter le telephone bloque la page. */
@media (min-width:1024px){ body.menu-open{overflow:visible} }

/* Tiroir de navigation mobile.
   Il n'existait pas : seul le verrouillage du defilement etait declare, le
   burger bloquait donc la page sans rien afficher. */
.drawer{
  position:fixed;inset:0;z-index:70;visibility:hidden;
  transition:visibility 0s linear var(--t-base)
}
body.menu-open .drawer{visibility:visible;transition-delay:0s}
@media (min-width:1024px){ .drawer{display:none} }

.drawer__veil{
  position:absolute;inset:0;background:rgba(14,21,51,.5);
  opacity:0;transition:opacity var(--t-base) var(--ease)
}
body.menu-open .drawer__veil{opacity:1}

.drawer__panel{
  position:absolute;inset:0 auto 0 0;width:min(86vw,340px);
  display:flex;flex-direction:column;
  background:var(--sable-0);box-shadow:var(--e3);
  transform:translateX(-100%);transition:transform var(--t-base) var(--ease)
}
body.menu-open .drawer__panel{transform:none}

.drawer__hd{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 8px 0 16px;flex:none;
  border-bottom:1px solid var(--sable-200)
}
/* Le voile est en z-index 70, l'en-tete en 40 : une fois ouvert, le tiroir
   recouvre le burger. La croix ci-dessous est donc le seul bouton de fermeture
   visible — elle doit rester grande et evidente. */
.drawer__close{
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:var(--encre-950);border-radius:var(--r-full)
}
.drawer__close:hover{background:var(--sable-50)}

.drawer__body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 0 16px}
.drawer__t{
  margin:14px 16px 6px;font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--sable-600)
}
.drawer__body ul{list-style:none;margin:0;padding:0}
.drawer__body a,.drawer__body button.drawer__item{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:48px;padding:0 16px;cursor:pointer;
  background:none;border:0;text-align:left;
  color:var(--encre-950);text-decoration:none;font-size:.9375rem;font-weight:500
}
.drawer__body a:hover,.drawer__item:hover{background:var(--sable-50)}
.drawer__body a[aria-current]{color:var(--encre-800);font-weight:600;background:var(--encre-100)}
.drawer__sep{height:1px;margin:10px 16px;background:var(--sable-200)}
.drawer__ft{flex:none;padding:14px 16px;border-top:1px solid var(--sable-200)}

@media (prefers-reduced-motion:reduce){
  .drawer__panel,.drawer__veil{transition:none}
}

/* ---------- Connexion / Inscription ---------- */
.auth-page{display:grid;place-items:center;padding:48px 0;min-height:60vh}
.auth-card{width:100%;max-width:420px;padding:28px;border-radius:var(--r-md);background:var(--sable-0);border:1px solid var(--sable-200)}
.auth-card h1{margin-bottom:6px}
.auth-form{margin-top:20px;display:grid;gap:16px}
.field-hint{margin:4px 0 0;font-size:.75rem;color:var(--sable-600)}
.auth-error{
  padding:12px;border-radius:var(--r-sm);
  background:rgba(192,38,31,.08);color:var(--erreur);font-size:.875rem
}
.auth-switch{margin-top:18px;text-align:center;font-size:.9375rem;color:var(--sable-600)}
.auth-switch a{color:var(--encre-800);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq-page{max-width:760px;margin-inline:auto;padding:32px 0}
.faq-page h1{margin-bottom:24px}
.faq-group{margin-bottom:32px}
.faq-group h2{margin-bottom:12px;font-size:1.125rem}
.faq-cta{margin-top:32px;padding:20px;text-align:center;border-radius:var(--r-md);background:var(--encre-100)}
.faq-cta a{font-weight:600;color:var(--encre-800)}

/* ---------- Page statique (CGV, Livraison, A propos...) ---------- */
.static-page{max-width:760px;margin-inline:auto;padding:32px 0}
.static-page h1{margin-bottom:20px}
.static-page__body{font-size:.9375rem;line-height:1.7;color:var(--sable-800)}
.static-page__body h2{margin:24px 0 10px;font-size:1.0625rem}
.static-page__body p{margin-bottom:12px}
.static-page__body ul,.static-page__body ol{margin:0 0 12px 20px}

/* ---------- Variantes de toast (succès / erreur / info) ---------- */



/* =========================================================
   D. COMPLEMENTS
   ========================================================= */

/* ---------------------------------------------------------
   1. Carte produit — le CTA manquant
   ---------------------------------------------------------
   Point technique : styles.css définit
   `.card__t a::after{content:"";position:absolute;inset:0}`,
   soit un lien étiré sur toute la carte. Tout élément
   interactif ajouté doit donc passer AU-DESSUS de cet overlay,
   sinon il devient incliquable.
   --------------------------------------------------------- */

.card__act{
  position:relative;      /* au-dessus de l'overlay du lien étiré */
  z-index:2;
  padding:0 12px 12px;
}

/* .card__name n'est définie nulle part alors que le partial d'origine
   l'utilisait : le titre des cartes de grille n'était donc pas stylé du tout.
   Le partial passe désormais à .card__t ; cette règle sert de filet pour les
   templates pas encore migrés et pourra être supprimée ensuite. */
.card__name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:.875rem;font-weight:600;line-height:1.35;min-height:2.4em;
  color:inherit;text-decoration:none
}

/* Bouton compact — .btn fait 44px, .btn--cta 52px : trop haut dans une carte
   de grille sur mobile où quatre cartes tiennent déjà tout l'écran. */
.btn--sm{min-height:40px;padding-inline:12px;font-size:.875rem;gap:6px}
.btn--sm.btn--cta{min-height:40px;padding-inline:12px;font-size:.875rem}

/* Le CTA de carte reste neutre au repos et s'affirme au survol : quatre boutons
   mangue pleins par rangée écraseraient la page et annuleraient la règle
   « une seule zone jaune » qui rend le CTA repérable en vision périphérique. */
@media (hover:hover) and (min-width:768px){
  .card__act .btn--cta{
    background:var(--sable-0);
    color:var(--encre-950);
    border-color:var(--sable-200);
  }
  .card:hover .card__act .btn--cta,
  .card__act .btn--cta:focus-visible{
    background:var(--mangue-500);
    border-color:var(--mangue-600);
  }
}
/* Sur mobile le survol n'existe pas : le CTA reste plein en permanence. */

.card__act .btn[disabled]{opacity:.45;pointer-events:none}

/* Badge "épuisé" — pendant de .tag--promo, déjà défini dans styles.css */
.tag--out{background:var(--sable-200);color:var(--sable-600)}

.card__rank{
  position:absolute;left:0;top:0;z-index:2;
  width:30px;height:30px;display:grid;place-items:center;
  background:var(--encre-800);color:#fff;
  border-radius:var(--r-md) 0 var(--r-md) 0;
  font-family:var(--font-display);font-weight:700;font-size:.875rem;
  font-variant-numeric:tabular-nums
}


/* ---------------------------------------------------------
   2. Tuiles de rayon — icônes réelles
   ---------------------------------------------------------
   storefront-extra.css définit déjà .tile__ic--emoji, mais avec
   `display:block;margin-bottom:8px`, ce qui contredit le
   `margin-bottom:auto` de .tile__ic dans home.css : l'emoji ne
   se colle pas en haut de la tuile comme le fait l'icône SVG,
   et les tuiles xl/tall se retrouvent désalignées.
   On rétablit le comportement de .tile__ic.
   --------------------------------------------------------- */

.tile__ic--emoji{
  font-size:26px;line-height:1;
  width:auto;height:auto;
  margin-bottom:auto;      /* aligne l'emoji comme l'icone SVG */
  stroke:none;fill:none;   /* neutralise les règles héritées du sélecteur svg */
  -webkit-font-smoothing:auto;
}
@media (min-width:768px){
  .tile--xl .tile__ic--emoji{font-size:38px}
}

/* Le libellé sous la barre change de sens selon la source de données.
   Quand il s'agit de demande réelle, on le signale. */
.tile__pc--demand{color:var(--bissap-600)}


/* ---------------------------------------------------------
   3. Bouton WhatsApp flottant
   ---------------------------------------------------------
   Volontairement PAS vert. Le vert WhatsApp entrerait en
   concurrence directe avec le CTA mangue, seul accent du design
   system, et détruirait la hiérarchie visuelle qui fait tenir
   l'ensemble. La forme (bulle + combiné) suffit à l'identifier.
   --------------------------------------------------------- */

.wa-fab{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:inline-flex;align-items:center;gap:0;
  height:54px;padding:0 15px;
  border-radius:var(--r-full);
  background:var(--encre-800);color:#fff;
  border:1px solid var(--encre-950);
  box-shadow:var(--e3);
  text-decoration:none;
  transition:gap var(--t-base) var(--ease),padding var(--t-base) var(--ease),
             background var(--t-fast) var(--ease);
}
.wa-fab .ic{width:24px;height:24px;flex:none}
.wa-fab__label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:.9375rem;font-weight:600;
  transition:max-width var(--t-slow) var(--ease);
}
.wa-fab:hover,.wa-fab:focus-visible{
  background:var(--encre-950);gap:9px;padding-right:20px
}
.wa-fab:hover .wa-fab__label,
.wa-fab:focus-visible .wa-fab__label{max-width:180px}

@media (min-width:1024px){
  /* Sur grand écran la place ne manque pas, et un bouton muet se fait ignorer. */
  .wa-fab{right:24px;bottom:24px;gap:9px;padding-right:20px}
  .wa-fab .wa-fab__label{max-width:180px}
}

/* La barre d'achat mobile de la fiche produit occupe le bas de l'écran. */
body:has(.buybar) .wa-fab{bottom:84px}

/* Mode données réduites : le FAB reste, c'est un canal de secours quand la
   connexion est mauvaise — c'est précisément là qu'il sert le plus. */

@media (prefers-reduced-motion:reduce){
  .wa-fab,.wa-fab__label{transition:none}
}