/* ═══════════════════════════════════════════════════════════════
   SANABEE — Design System
   Source unique de vérité de la nouvelle boutique.
   Namespace `sb-` : aucune collision avec shop-components.css.
   Ne pas ajouter de <style> inline dans les pages.

   SOMMAIRE
   1. Tokens          7. Drawer          13. Formulaires
   2. Reset & base    8. Carte produit   14. États vides
   3. Layout          9. Carte pack      15. Pagination
   4. Boutons        10. Section sombre  16. Révélation scroll
   5. Bandeau        11. Toast           17. Page à propos
   6. Header         12. Footer          18. Utilitaires
                                         19. Mouvement réduit
═══════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ────────────────────────────────────────────── */
:root{
  /* Palette */
  --sb-violet:#2A1B33;
  --sb-violet-2:#3D2A4A;
  --sb-violet-deep:#150E1C;
  --sb-miel:#F2B01F;
  --sb-miel-vif:#FFC94D;
  --sb-miel-deep:#C88A0B;
  --sb-miel-dim:rgba(242,176,31,.12);
  --sb-miel-dim2:rgba(242,176,31,.20);
  --sb-miel-line:rgba(242,176,31,.34);
  --sb-success:#76B947;
  --sb-danger:#C0563F;

  --sb-off:#FFFDF8;
  --sb-white:#FFFFFF;
  --sb-border:#F3E7C5;

  /* Texte */
  --sb-txt:#2A1B33;
  --sb-txt2:rgba(42,27,51,.64);
  --sb-txt3:rgba(42,27,51,.42);

  /* Surfaces */
  --sb-bg:var(--sb-off);
  --sb-bg2:#FBF6EA;
  --sb-surf:var(--sb-white);
  --sb-surf2:#FDF9EF;

  /* Matériaux — verre clair et verre sombre, valeurs partagées */
  --sb-glass:rgba(255,253,248,.62);
  --sb-glass-line:rgba(255,255,255,.55);
  --sb-glass-top:inset 0 1px 0 rgba(255,255,255,.6);
  --sb-glass-blur:blur(20px) saturate(175%);
  --sb-glass-dk:rgba(42,27,51,.88);
  --sb-glass-dk-line:rgba(255,255,255,.12);
  --sb-glass-dk-top:inset 0 1px 0 rgba(255,255,255,.16);

  /* Rayons */
  --sb-r-xs:8px;
  --sb-r-sm:12px;
  --sb-r-md:20px;
  --sb-r-lg:28px;
  --sb-r-xl:40px;
  --sb-r-pill:100px;

  /* Espacement */
  --sb-sp-xs:6px;
  --sb-sp-sm:12px;
  --sb-sp-md:20px;
  --sb-sp-lg:32px;
  --sb-sp-xl:52px;
  --sb-sp-2xl:80px;

  /* Ombres — teintées violet, jamais noir pur.
     Chaque élévation combine une ombre de contact serrée
     et une ombre ambiante large : c'est ce qui donne la
     profondeur, pas un seul flou diffus. */
  --sb-sh-xs:0 1px 4px rgba(42,27,51,.05);
  --sb-sh-sm:0 1px 2px rgba(42,27,51,.05),0 4px 16px rgba(42,27,51,.07);
  --sb-sh-md:0 2px 4px rgba(42,27,51,.06),0 16px 40px rgba(42,27,51,.11);
  --sb-sh-lg:0 2px 6px rgba(42,27,51,.08),0 30px 70px rgba(42,27,51,.17);
  --sb-sh-miel:0 12px 30px rgba(242,176,31,.34);

  /* Mouvement */
  --sb-ease:cubic-bezier(.23,1,.32,1);
  --sb-ease-inout:cubic-bezier(.77,0,.175,1);
  /* Ressort léger : dépassement discret sur les micro-interactions */
  --sb-spring:cubic-bezier(.34,1.4,.64,1);
  --sb-fast:160ms;
  --sb-base:220ms;
  --sb-slow:400ms;

  /* Typo */
  --sb-f:'Cairo',system-ui,-apple-system,sans-serif;

  /* Z-index */
  --sb-z-raised:10;
  --sb-z-overlay:100;
  --sb-z-header:200;
  --sb-z-float:250;
  --sb-z-toast:300;
  --sb-z-drawer:400;

  /* Layout */
  --sb-nav-h:82px;
  --sb-nav-h-stuck:68px;
}








.sb-avis-capture{padding:0;overflow:hidden;display:flex;min-height:280px}
.sb-avis-capture img{width:100%;height:100%;object-fit:cover;display:block}
.sb-avis-photo{width:100%;border-radius:12px;margin:12px 0;object-fit:cover;max-height:220px}



/* ─── 2. RESET & BASE ──────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--sb-f);
  font-size:1rem;
  font-weight:400;
  line-height:1.7;
  color:var(--sb-txt);
  background:var(--sb-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction:rtl;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:var(--sb-f)}

/* Tracking optique : plus le titre est gros, plus il se resserre. */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:800;line-height:1.15;color:var(--sb-violet)}
h1{letter-spacing:-.03em}
h2{letter-spacing:-.025em}
h3,h4{letter-spacing:-.015em}
h5,h6{letter-spacing:-.005em}

:focus-visible{outline:2.5px solid var(--sb-miel-deep);outline-offset:3px;border-radius:6px}

/* Chiffres tabulaires — prix alignés, LTR isolé en contexte RTL */
.sb-num{font-feature-settings:"tnum";unicode-bidi:isolate;direction:ltr;display:inline-block}

/* ─── 3. LAYOUT ────────────────────────────────────────────── */
.sb-wrap{max-width:1280px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.sb-wrap{padding:0 18px}}

.sb-sec{padding:100px 0}
.sb-sec-sm{padding:70px 0}
.sb-sec-tight{padding-top:0}
@media(max-width:768px){
  .sb-sec{padding:64px 0}
  .sb-sec-sm{padding:48px 0}
}

.sb-kicker{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sb-miel-deep)}
.sb-kicker i{display:block;width:26px;height:2px;background:var(--sb-miel);border-radius:2px}
.sb-kicker.sb-light{color:var(--sb-miel-vif)}

.sb-sec-head{margin-bottom:52px;max-width:660px}
.sb-sec-head .sb-kicker{margin-bottom:18px}
.sb-sec-head h2{font-size:clamp(1.9rem,4vw,3rem)}
.sb-sec-head p{color:var(--sb-txt2);margin:16px 0 0;font-size:1.02rem}
.sb-sec-head.sb-row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sb-sec-head.sb-row > div{max-width:620px}

/* ─── 4. BOUTONS ───────────────────────────────────────────── */
.sb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sb-f);font-weight:800;font-size:.95rem;line-height:1;
  padding:16px 30px;border-radius:var(--sb-r-pill);border:1.5px solid transparent;
  cursor:pointer;text-align:center;
  transition:transform 180ms var(--sb-spring),box-shadow 180ms var(--sb-ease),
             background 180ms var(--sb-ease),color 180ms var(--sb-ease),border-color 180ms var(--sb-ease);
}
.sb-btn:active{transform:scale(.97);transition-duration:100ms}
.sb-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.sb-btn-sm{padding:11px 20px;font-size:.86rem}
.sb-btn-block{width:100%}

/* Primaire — CTA dominant, toujours or */
.sb-btn-p{background:var(--sb-miel);color:var(--sb-violet);box-shadow:var(--sb-sh-miel)}
/* Secondaire — contour violet */
.sb-btn-o{background:var(--sb-surf);color:var(--sb-violet);border-color:var(--sb-violet)}
/* Tertiaire — violet plein */
.sb-btn-v{background:var(--sb-violet);color:var(--sb-off)}
/* Sur fond sombre */
.sb-btn-ghost{background:transparent;color:var(--sb-off);border-color:rgba(255,253,248,.35)}
/* WhatsApp */
.sb-btn-wa{background:#1F7A44;color:#fff;box-shadow:0 8px 20px rgba(31,122,68,.28)}

@media(hover:hover) and (pointer:fine){
  .sb-btn-p:hover{background:var(--sb-miel-vif);transform:translateY(-3px);box-shadow:0 18px 40px rgba(242,176,31,.4)}
  .sb-btn-o:hover{background:var(--sb-violet);color:var(--sb-off)}
  .sb-btn-v:hover{transform:translateY(-3px);box-shadow:var(--sb-sh-md)}
  .sb-btn-ghost:hover{background:rgba(255,253,248,.1);border-color:var(--sb-off)}
  .sb-btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(31,122,68,.4)}
}

/* ─── 5. BANDEAU DÉFILANT ──────────────────────────────────── */
.sb-marquee{
  background:var(--sb-violet);color:var(--sb-off);
  padding:11px 0;overflow:hidden;white-space:nowrap;
}
.sb-marquee-t{
  display:inline-flex;gap:42px;
  animation:sb-slide 34s linear infinite;
  will-change:transform;
}
.sb-marquee-t span{
  font-size:.8rem;font-weight:700;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:12px;
}
.sb-marquee-t span::after{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--sb-miel);flex-shrink:0;
}
@keyframes sb-slide{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media(hover:hover) and (pointer:fine){
  .sb-marquee:hover .sb-marquee-t{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){.sb-marquee-t{animation:none}}

/* ─── 6. HEADER ────────────────────────────────────────────── */
/* Capsule flottante en verre, façon Apple : approximation web
   (backdrop-filter), pas le Liquid Glass officiel d'Apple.
   Une seule capsule pour desktop et mobile ; sous 1080px la
   navigation passe dans le tiroir.
   Formes : capsule, liens et boutons en pilule ; tiroir 28px.
   Aucune hauteur animée : l'état « collé » (.sb-stuck, posé par
   un IntersectionObserver) ne change que l'opacité, l'ombre et
   l'échelle du logo. */

/* Le header ne colle que si <body> n'est pas un conteneur de défilement.
   L'overflow-x:hidden de la section 2 en fait un et neutralise tout
   position:sticky de la page (header, galerie produit…). clip masque le
   débordement horizontal de la même façon sans créer de conteneur ; un
   navigateur trop ancien pour clip ignore la ligne et garde hidden. */
html,body{overflow-x:clip}

.sb-hdr{
  position:sticky;top:0;z-index:var(--sb-z-header);
  padding-block:10px;
  pointer-events:none; /* la bande transparente autour de la capsule laisse passer les clics */
}
/* Repère posé juste avant le header : quand il sort de l'écran, la capsule se densifie */
.sb-hdr-sentinel{display:block;height:1px;margin-bottom:-1px;pointer-events:none}

.sb-hdr-cap{
  pointer-events:auto;
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:68px;padding-inline:12px 10px;
  border-radius:var(--sb-r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,253,248,.58));
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 .5px rgba(42,27,51,.07),
    0 10px 30px -18px rgba(42,27,51,.3);
  transition:background 320ms var(--sb-ease),box-shadow 320ms var(--sb-ease);
}
.sb-hdr.sb-stuck .sb-hdr-cap{
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,253,248,.8));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 .5px rgba(42,27,51,.09),
    0 18px 40px -20px rgba(42,27,51,.38);
}

.sb-logo{display:flex;align-items:center;flex:none;padding-inline:6px;border-radius:var(--sb-r-pill)}
.sb-logo img{height:50px;width:auto;transform-origin:center;transition:transform 320ms var(--sb-ease)}
.sb-hdr.sb-stuck .sb-logo img{transform:scale(.9)}

/* ── Navigation : rail en retrait, pastille blanche sous le lien actif ── */
.sb-nav{
  display:flex;align-items:center;gap:2px;
  list-style:none;margin:0;padding:4px;
  border-radius:var(--sb-r-pill);
  background:rgba(42,27,51,.045);
  box-shadow:inset 0 0 0 .5px rgba(42,27,51,.06);
}
.sb-nav > li{position:relative}
.sb-nav a{
  position:relative;z-index:0;
  display:flex;align-items:center;
  min-height:40px;padding:0 16px;
  border-radius:var(--sb-r-pill);
  font-weight:700;font-size:.9rem;letter-spacing:0;white-space:nowrap;
  color:var(--sb-txt2);
  transition:color 200ms var(--sb-ease);
}
.sb-nav a::before{
  content:'';position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  background:#FFFEFB;
  box-shadow:0 1px 2px rgba(42,27,51,.08),0 4px 12px -6px rgba(42,27,51,.22);
  opacity:0;transform:scale(.92);
  transition:opacity 220ms var(--sb-ease),transform 260ms var(--sb-spring);
}
.sb-nav a.sb-on{color:var(--sb-violet)}
.sb-nav a.sb-on::before{opacity:1;transform:none}
.sb-nav a:focus-visible{outline:2.5px solid var(--sb-violet);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .sb-nav a:hover{color:var(--sb-violet)}
  .sb-nav a:not(.sb-on):hover::before{opacity:.6;transform:none}
}

/* ── Actions ── */
.sb-acts{display:flex;align-items:center;gap:6px;flex:none}

.sb-ib{
  position:relative;
  width:42px;height:42px;border-radius:50%;border:0;
  display:grid;place-items:center;
  background:transparent;color:var(--sb-violet);cursor:pointer;
  transition:background 200ms var(--sb-ease),transform 200ms var(--sb-spring);
}
.sb-ib:active{transform:scale(.92)}
.sb-ib:focus-visible{outline:2.5px solid var(--sb-violet);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.sb-ib:hover{background:rgba(42,27,51,.07)}}

.sb-count{
  position:absolute;top:-2px;left:-2px;min-width:20px;height:20px;padding:0 5px;
  background:var(--sb-violet);color:var(--sb-miel-vif);
  font-size:.64rem;font-weight:800;font-variant-numeric:tabular-nums;
  border-radius:var(--sb-r-pill);display:grid;place-items:center;
  border:2px solid #FFFEFB;
  transition:transform var(--sb-base) var(--sb-spring);
}
.sb-count.sb-bump{animation:sb-bump .35s var(--sb-spring)}
@keyframes sb-bump{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}

.sb-hdr-cta.sb-btn{
  min-height:42px;padding:0 18px;margin-inline-start:4px;
  font-size:.88rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px -10px rgba(200,138,11,.8);
}

/* ── Bouton menu (mobile) ── */
.sb-burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(42,27,51,.06);
  transition:background 200ms var(--sb-ease),transform 200ms var(--sb-spring);
}
.sb-burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--sb-violet)}
.sb-burger i:nth-child(2){width:12px;align-self:center;transform:translateX(-3px)}
.sb-burger:active{transform:scale(.92)}
.sb-burger:focus-visible{outline:2.5px solid var(--sb-violet);outline-offset:2px}

/* Écrans moyens : on resserre les liens avant de basculer en mobile */
@media(max-width:1240px){
  .sb-nav a{padding:0 12px;font-size:.86rem}
  .sb-hdr-cap{gap:12px}
}

@media(max-width:1080px){
  .sb-hdr{padding-block:8px}
  .sb-hdr-cap{height:60px;padding-inline:8px 8px}
  .sb-logo img{height:44px}
  .sb-nav,.sb-acts > :not(.sb-burger){display:none}
  .sb-burger{display:flex}
}

/* ── Boutons flottants mobile ── */
.sb-float-cart,.sb-float-wa{position:fixed;bottom:24px;z-index:var(--sb-z-float);display:none;place-items:center;transition:transform 180ms var(--sb-spring)}
.sb-float-cart{right:20px;width:60px;height:60px;border-radius:22px;background:var(--sb-miel);color:var(--sb-violet);box-shadow:0 14px 32px rgba(242,176,31,.42)}
.sb-float-wa{left:20px;width:56px;height:56px;border-radius:50%;background:#25D366;box-shadow:0 12px 30px rgba(37,211,102,.42)}
.sb-float-cart:active,.sb-float-wa:active{transform:scale(.94)}
.sb-float-cart .sb-count{top:-6px;left:-6px;min-width:24px;height:24px;font-size:.72rem}
@media(max-width:1080px){.sb-float-cart,.sb-float-wa{display:grid}}
@media(hover:hover) and (pointer:fine){.sb-float-wa:hover,.sb-float-cart:hover{transform:scale(1.07)}}

/* Info-bulle du bouton WhatsApp (déplacée ici depuis le partial du header) */
.sb-float-wa-tip{
  position:absolute;top:50%;margin-top:-14px;
  inset-inline-end:calc(100% + 12px);
  background:var(--sb-violet);color:#fff;
  font-size:.78rem;font-weight:700;white-space:nowrap;
  padding:7px 14px;border-radius:var(--sb-r-pill);
  opacity:0;pointer-events:none;transform:translateX(-6px);
  transition:opacity 200ms var(--sb-ease),transform 200ms var(--sb-ease);
}
.sb-float-wa:hover .sb-float-wa-tip,
.sb-float-wa:focus-visible .sb-float-wa-tip{opacity:1;transform:none}
@media(hover:none){.sb-float-wa-tip{display:none}}

/* ─── 7. DRAWER ────────────────────────────────────────────── */
/* Feuille en verre détachée des bords, liens groupés façon
   Réglages iOS. Fermé, le tiroir est en visibility:hidden : ses
   liens sortent de l'ordre de tabulation. */

.sb-drawer{
  position:fixed;inset:0;z-index:var(--sb-z-drawer);
  pointer-events:none;visibility:hidden;
  transition:visibility 0s linear 420ms;
}
.sb-drawer.sb-open{pointer-events:auto;visibility:visible;transition:visibility 0s}

.sb-drawer-bg{
  position:absolute;inset:0;
  background:rgba(21,14,28,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity 320ms var(--sb-ease);
}
.sb-drawer.sb-open .sb-drawer-bg{opacity:1}

.sb-drawer-p{
  position:absolute;top:10px;bottom:10px;right:10px;
  width:min(360px,calc(100vw - 20px));
  display:flex;flex-direction:column;gap:16px;
  padding:14px;overflow-y:auto;overscroll-behavior:contain;
  border-radius:var(--sb-r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,253,248,.82));
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff,0 30px 80px -30px rgba(21,14,28,.6);
  transform:translateX(calc(100% + 20px));
  transition:transform 420ms cubic-bezier(.32,.72,0,1);
}
.sb-drawer.sb-open .sb-drawer-p{transform:none}

.sb-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 0}
.sb-drawer-top img{height:40px;width:auto}
.sb-dclose{
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(42,27,51,.07);color:var(--sb-violet);
  transition:background 200ms var(--sb-ease),transform 200ms var(--sb-spring);
}
.sb-dclose:active{transform:scale(.92)}
.sb-dclose:focus-visible{outline:2.5px solid var(--sb-violet);outline-offset:2px}

/* Liens groupés */
.sb-dgroup{
  display:flex;flex-direction:column;
  padding:2px 16px;border-radius:20px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 .5px rgba(42,27,51,.08),0 1px 2px rgba(42,27,51,.04);
}
.sb-dlink{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;
  font-weight:700;font-size:1.02rem;color:var(--sb-violet);
}
.sb-dlink + .sb-dlink{border-top:1px solid rgba(42,27,51,.07)}
.sb-dlink svg{flex:none;opacity:.35;transition:transform 300ms var(--sb-ease),opacity 200ms var(--sb-ease)}
.sb-dlink.sb-on{color:#8A5A00}
.sb-dlink.sb-on svg{opacity:1}
.sb-dlink:focus-visible{outline:2.5px solid var(--sb-violet);outline-offset:2px;border-radius:10px}
@media(hover:hover) and (pointer:fine){.sb-dlink:hover svg{opacity:.8;transform:translateX(-3px)}}

/* Entrée en cascade à l'ouverture : l'œil suit l'ordre des liens */
@media(prefers-reduced-motion:no-preference){
  .sb-drawer.sb-open .sb-dlink{animation:sb-din 480ms var(--sb-ease) backwards}
  .sb-drawer.sb-open .sb-dlink:nth-child(2){animation-delay:40ms}
  .sb-drawer.sb-open .sb-dlink:nth-child(3){animation-delay:80ms}
  .sb-drawer.sb-open .sb-dlink:nth-child(4){animation-delay:120ms}
  .sb-drawer.sb-open .sb-dlink:nth-child(5){animation-delay:160ms}
  .sb-drawer.sb-open .sb-dlink:nth-child(6){animation-delay:200ms}
}
@keyframes sb-din{from{opacity:0;transform:translateX(14px)}}

.sb-drawer-cta{display:grid;gap:10px;margin-top:auto}
.sb-drawer-soc{display:flex;justify-content:center;gap:10px}
.sb-drawer-soc a{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--sb-violet);
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 .5px rgba(42,27,51,.1);
  transition:background 200ms var(--sb-ease),transform 200ms var(--sb-spring);
}
.sb-drawer-soc a:active{transform:scale(.92)}
.sb-drawer-note{font-size:.78rem;color:#6E6275;margin:0;text-align:center}

@media(prefers-reduced-motion:reduce){
  .sb-drawer-p{transition:opacity 200ms linear;transform:none;opacity:0}
  .sb-drawer.sb-open .sb-drawer-p{opacity:1}
}
@media(prefers-reduced-transparency:reduce){
  .sb-hdr-cap,.sb-drawer-p{background:var(--sb-off);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ─── 8. CARTE PRODUIT ─────────────────────────────────────── */
/* Verre clair façon Apple : approximation web (backdrop-filter),
   pas le Liquid Glass officiel d'Apple. Namespace `sbc-`.
   Texte réduit au nom et au prix. L'action, ce sont les boutons
   de format : un clic ajoute ce format au panier.
   Rayons concentriques : carte 28px / padding 10px / photo 18px ;
   rail d'actions 20px / padding 4px / boutons 16px.
   Les cartes produit et pack partagent ces valeurs. */

.sbc,.sbp{
  --sbc-ink:#8A5A00;   /* miel lisible sur clair, AA 5.8:1 */
  --sbc-muted:#6E6275; /* secondaire lisible, AA 5.6:1 */
  --sbc-glass:
    radial-gradient(120% 60% at 100% 0%,rgba(255,255,255,.62),rgba(255,255,255,0) 55%),
    linear-gradient(150deg,rgba(255,255,255,.84),rgba(255,255,255,.5));
  --sbc-edge:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 .5px rgba(42,27,51,.07),
    0 2px 4px rgba(42,27,51,.04),
    0 26px 50px -30px rgba(120,78,10,.42);
  --sbc-edge-hi:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 .5px rgba(42,27,51,.08),
    0 4px 10px -2px rgba(42,27,51,.08),
    0 36px 64px -32px rgba(120,78,10,.55);
  --sbc-stage:
    radial-gradient(70% 60% at 30% 18%,#FFF6DA 0%,rgba(255,246,218,0) 70%),
    radial-gradient(60% 60% at 82% 92%,rgba(242,176,31,.18),rgba(242,176,31,0) 70%),
    var(--sb-bg2);
}

.sbc{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  padding:10px;
  border-radius:var(--sb-r-lg);
  background:var(--sbc-glass);
  -webkit-backdrop-filter:var(--sb-glass-blur);
  backdrop-filter:var(--sb-glass-blur);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--sbc-edge);
  transition:transform 420ms var(--sb-ease),box-shadow 420ms var(--sb-ease);
}

/* ── Photo ── */
.sbc-media{
  position:relative;display:block;
  aspect-ratio:1/1;overflow:hidden;
  border-radius:18px;
  background:var(--sbc-stage);
  box-shadow:inset 0 0 0 .5px rgba(42,27,51,.06);
}
.sbc-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 900ms var(--sb-ease),filter 420ms var(--sb-ease),opacity 300ms var(--sb-ease);
}
/* Photo introuvable : scène miel + nom, jamais d'icône cassée */
.sbc-media.is-broken img,.sbp-media.is-broken img{opacity:0}
.sbc-media.is-broken::after,.sbp-media.is-broken::after{
  content:attr(data-title);position:absolute;inset:0;display:grid;place-items:center;
  padding:1.5rem;text-align:center;font-size:1.3rem;font-weight:800;line-height:1.5;
  color:rgba(138,90,0,.55);
}
.sbc-badge{
  position:absolute;top:10px;inset-inline-end:10px;z-index:2;
  padding:6px 12px;border-radius:var(--sb-r-pill);
  font-size:.7rem;font-weight:800;color:var(--sb-violet);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px) saturate(170%);
  -webkit-backdrop-filter:blur(12px) saturate(170%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px -6px rgba(42,27,51,.3);
}
.sbc-oos{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.sbc-oos span{
  background:rgba(42,27,51,.72);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.78rem;font-weight:800;
  padding:9px 20px;border-radius:var(--sb-r-pill);
}

/* ── Corps : le nom et le prix sur une même ligne ── */
.sbc-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:14px 6px 4px}
.sbc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sbc-name-link{flex:1;min-width:0}
.sbc-name{
  margin:0;color:var(--sb-violet);
  font-size:1.18rem;font-weight:800;line-height:1.4;letter-spacing:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color 200ms var(--sb-ease);
}
@media(hover:hover) and (pointer:fine){.sbc-name-link:hover .sbc-name{color:var(--sbc-ink)}}

/* Chiffres : isolés en LTR pour un ordre correct en contexte RTL. */
.sbc-n{font-variant-numeric:tabular-nums;unicode-bidi:isolate;direction:ltr}

.sbc-price{flex:none;display:inline-flex;align-items:baseline;gap:4px}
.sbc-price b{font-size:1.22rem;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--sbc-ink)}
.sbc-price span{font-size:.72rem;font-weight:700;color:var(--sbc-muted)}

/* ── Rail d'actions : un bouton par format ── */
.sbc-fmts{
  margin-top:auto;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;
  padding:4px;border-radius:20px;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 .5px rgba(42,27,51,.1),inset 0 1px 3px rgba(42,27,51,.07);
}
.sbc-fmt{
  position:relative;overflow:hidden;
  appearance:none;margin:0;border:0;cursor:pointer;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;padding:8px 6px;border-radius:16px;
  font-family:var(--sb-f);color:var(--sb-violet);
  background:var(--sb-miel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -8px rgba(200,138,11,.75);
  transition:transform 200ms var(--sb-spring),
             background 200ms var(--sb-ease),
             box-shadow 200ms var(--sb-ease);
}
.sbc-fmt-sz{display:inline-flex;align-items:center;gap:5px;font-size:.98rem;font-weight:800;line-height:1.25}
.sbc-fmt-sz svg{flex:none}
.sbc-fmt-pr{display:inline-flex;align-items:baseline;gap:3px;font-size:.72rem;font-weight:700;line-height:1.25;color:rgba(42,27,51,.78)}
.sbc-fmt:active{transform:scale(.96)}
.sbc-fmt:focus-visible{outline:2.5px solid var(--sb-violet);outline-offset:2px}
.sbc-fmt:disabled{
  cursor:not-allowed;background:transparent;color:var(--sbc-muted);
  box-shadow:inset 0 0 0 1px rgba(42,27,51,.14);transform:none;
}
.sbc-fmt:disabled .sbc-fmt-pr{color:var(--sbc-muted);text-decoration:line-through}
/* Lien de repli (formats non transmis) et rupture : même forme, même rail */
.sbc-fmt--link{flex-direction:row;gap:8px;font-weight:800;font-size:.95rem}
.sbc-fmt--quiet{background:transparent;color:var(--sbc-muted);box-shadow:none}

/* Confirmation d'ajout : le bouton passe en prune le temps d'un souffle.
   Partagée par la carte pack. */
.sb-added{
  position:absolute;inset:0;display:grid;place-items:center;
  border-radius:inherit;background:var(--sb-violet);color:var(--sb-miel-vif);
  opacity:0;transform:scale(.9);pointer-events:none;
  transition:opacity 200ms var(--sb-ease),transform 280ms var(--sb-spring);
}
.is-added > .sb-added{opacity:1;transform:none}

@media(hover:hover) and (pointer:fine){
  .sbc-fmt:not(:disabled):not(.sbc-fmt--quiet):hover{
    background:var(--sb-miel-vif);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 20px -10px rgba(200,138,11,.85);
  }
  .sbc-fmt--quiet:hover{color:var(--sb-violet);background:rgba(42,27,51,.05)}
  .sbc-fmt--link:hover svg{transform:translateX(-3px)}
}
.sbc-fmt--link svg{transition:transform 300ms var(--sb-ease)}

/* ── Rupture ── */
.sbc-off .sbc-media img{filter:grayscale(.55) brightness(.9)}

@media(hover:hover) and (pointer:fine){
  .sbc:hover{transform:translateY(-6px);box-shadow:var(--sbc-edge-hi)}
  .sbc:hover .sbc-media img{transform:scale(1.05)}
}

/* ── Grille produit ── */
.sbc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1080px){.sbc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sbc-grid{grid-template-columns:1fr;gap:16px}}

/* ─── 9. CARTE PACK ────────────────────────────────────────── */
/* Même matériau que la carte produit, en horizontal : la liste du
   contenu est l'argument de vente, elle occupe le centre.
   Namespace `sbp-`. */

.sbp{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:10px;
  padding:10px;
  border-radius:var(--sb-r-lg);
  background:var(--sbc-glass);
  -webkit-backdrop-filter:var(--sb-glass-blur);
  backdrop-filter:var(--sb-glass-blur);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--sbc-edge);
  transition:transform 420ms var(--sb-ease),box-shadow 420ms var(--sb-ease);
}

/* ── Photo : colonne pleine hauteur ── */
.sbp-media{
  position:relative;display:block;overflow:hidden;
  min-height:300px;border-radius:18px;
  background:var(--sbc-stage);
  box-shadow:inset 0 0 0 .5px rgba(42,27,51,.06);
}
.sbp-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 900ms var(--sb-ease),opacity 300ms var(--sb-ease);
}

/* Économie : pastille miel, chiffre dominant. */
.sbp-eco{
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;
  display:inline-flex;align-items:baseline;gap:5px;
  background:var(--sb-miel);color:var(--sb-violet);
  padding:7px 14px;border-radius:var(--sb-r-pill);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px -8px rgba(200,138,11,.75);
}
.sbp-eco-l,.sbp-eco-u{font-size:.7rem;font-weight:800;opacity:.78}
.sbp-eco b{font-size:1.05rem;font-weight:900;line-height:1;letter-spacing:-.03em}

/* Chiffres isolés LTR : ordre correct en contexte RTL. */
.sbp-n{font-variant-numeric:tabular-nums;unicode-bidi:isolate;direction:ltr}

/* ── Corps ── */
.sbp-body{display:flex;flex-direction:column;min-width:0;padding:12px 10px 4px}
.sbp-name{margin:0;font-size:1.35rem;font-weight:800;line-height:1.4;letter-spacing:0;color:var(--sb-violet)}
.sbp-name a{transition:color 200ms var(--sb-ease)}
@media(hover:hover) and (pointer:fine){.sbp-name a:hover{color:var(--sbc-ink)}}

/* ── Contenu : panneau en retrait, lignes fines, quantité en pastille ── */
.sbp-items{
  list-style:none;margin:14px 0 0;padding:2px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 .5px rgba(42,27,51,.1),inset 0 1px 3px rgba(42,27,51,.06);
}
.sbp-items li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0}
.sbp-items li + li{border-top:1px solid rgba(42,27,51,.07)}
.sbp-item-n{min-width:0;font-size:.93rem;font-weight:700;line-height:1.5;color:var(--sb-violet)}
.sbp-item-n em{font-style:normal;font-weight:600;font-size:.82rem;color:var(--sbc-muted);margin-inline-start:4px}
.sbp-item-q{
  flex:none;display:inline-grid;place-items:center;
  min-width:38px;height:26px;padding:0 9px;border-radius:var(--sb-r-pill);
  background:var(--sb-miel-dim2);color:var(--sbc-ink);
  font-size:.82rem;font-weight:900;
}

/* ── Cadeau : aparté miel ── */
.sbp-gift{
  display:flex;align-items:center;gap:12px;
  margin-top:10px;padding:10px 14px;border-radius:18px;
  background:linear-gradient(145deg,rgba(255,236,178,.72),rgba(255,248,226,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 .5px rgba(200,138,11,.32);
}
.sbp-gift-ic{
  flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--sb-miel);color:var(--sb-violet);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.sbp-gift-t{min-width:0;font-size:.9rem;font-weight:700;line-height:1.5;color:var(--sb-violet)}
.sbp-gift-t b{display:block;font-size:.76rem;font-weight:800;color:var(--sbc-ink)}

/* ── Pied : prix et action côte à côte ── */
.sbp-foot{margin-top:auto;padding-top:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.sbp-price{display:flex;flex-direction:column;gap:2px}
.sbp-old{display:inline-flex;align-items:baseline;gap:4px;font-size:.82rem;font-weight:600;color:var(--sbc-muted);text-decoration:line-through;text-decoration-thickness:1px}
.sbp-now{display:inline-flex;align-items:baseline;gap:6px}
.sbp-now b{font-size:1.85rem;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--sb-violet)}
.sbp-now > span{font-size:.8rem;font-weight:700;color:var(--sbc-muted)}

.sbp-cta{
  position:relative;overflow:hidden;flex:1 1 190px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:12px 20px;
  background:var(--sb-miel);color:var(--sb-violet);
  border:none;border-radius:16px;
  font-family:var(--sb-f);font-weight:800;font-size:.98rem;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px -10px rgba(200,138,11,.8);
  transition:transform 220ms var(--sb-spring),box-shadow 240ms var(--sb-ease),background 240ms var(--sb-ease);
}
.sbp-cta:active{transform:scale(.975)}
.sbp-cta:focus-visible{outline:2.5px solid var(--sb-violet);outline-offset:2px}

@media(hover:hover) and (pointer:fine){
  .sbp:hover{transform:translateY(-6px);box-shadow:var(--sbc-edge-hi)}
  .sbp:hover .sbp-media img{transform:scale(1.05)}
  .sbp-cta:hover{background:var(--sb-miel-vif);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 24px -10px rgba(200,138,11,.9)}
}

/* ── Bascule verticale : l'horizontal ne tient pas en étroit ── */
@media(max-width:720px){
  .sbp{grid-template-columns:1fr}
  .sbp-media{min-height:0;aspect-ratio:4/3}
  .sbp-body{padding:12px 6px 4px}
}

/* ── Grille pack : 2 colonnes, la carte est large ── */
.sb-pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:900px){.sb-pack-grid{grid-template-columns:1fr;gap:18px}}

/* ── Sur section sombre (.sb-dark) ──
   Le verre clair devient opaque, sinon le violet le grise ; et les titres
   restent prune, car `.sb-dark h3` les passerait en crème sur fond crème. */
.sb-dark .sbc,.sb-dark .sbp{
  background:linear-gradient(150deg,#FFFDF8,#FBF3E0);
  border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 30px 60px -30px rgba(0,0,0,.55);
}
.sb-dark .sbc-name,.sb-dark .sbp-name{color:var(--sb-violet)}

/* ── Matériau : repli sans flou, et transparence réduite ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sbc,.sbp{background:rgba(255,253,248,.96)}
}
@media(prefers-reduced-transparency:reduce){
  .sbc,.sbp,.sbc-badge{background:var(--sb-off);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ─── 10. SECTION SOMBRE ───────────────────────────────────── */
.sb-dark{background:var(--sb-violet);color:var(--sb-off);position:relative;overflow:hidden}
.sb-dark::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 45% at 88% 6%,rgba(242,176,31,.15),transparent 62%);pointer-events:none}
.sb-dark .sb-wrap{position:relative;z-index:1}
.sb-dark h2,.sb-dark h3,.sb-dark h4{color:var(--sb-off)}
.sb-dark .sb-sec-head p{color:rgba(255,253,248,.66)}

/* ─── 11. TOAST ────────────────────────────────────────────── */
.sb-toast{
  position:fixed;bottom:28px;right:50%;transform:translateX(50%) translateY(90px);
  background:var(--sb-violet);color:var(--sb-off);border-radius:var(--sb-r-pill);
  padding:13px 24px;display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:.88rem;box-shadow:var(--sb-sh-lg);
  z-index:var(--sb-z-toast);opacity:0;white-space:nowrap;max-width:90vw;
  transition:transform var(--sb-slow) var(--sb-spring),opacity var(--sb-base) var(--sb-ease);
}
.sb-toast svg{color:var(--sb-miel);flex-shrink:0}
.sb-toast.sb-show{transform:translateX(50%) translateY(0);opacity:1}

/* ─── 12. FOOTER ───────────────────────────────────────────── */
.sb-ft{
  position:relative;
  background:var(--sb-violet-deep);
  color:rgba(255,253,248,.68);
  margin-top:70px;
  padding-top:34px;
}

/* Coulée de miel : le violet vient mordre la page claire au-dessus.
   Miroir exact de la coulée du header — la marque referme la page. */
.sb-ft-drip{
  position:absolute;top:0;left:0;right:0;
  width:100%;height:32px;transform:translateY(-99%);
  display:block;pointer-events:none;
}
.sb-ft-drip path{fill:var(--sb-violet-deep)}

/* ── Bande réassurance : réglure, filet or, sans boîtes ── */
.sb-ft-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid rgba(255,253,248,.12);
}
.sb-ft-trust-i{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:26px 24px 24px;
  border-inline-start:1px solid rgba(255,253,248,.09);
  /* Dégradé : lumière en haut, s'éteint vers le bas. */
  background:linear-gradient(to bottom,rgba(255,253,248,.055) 0%,rgba(255,253,248,.012) 55%,transparent 100%);
  transition:background 300ms var(--sb-ease);
}
.sb-ft-trust-i:first-child{border-inline-start:none}

/* Filet or : court au repos, s'étend au survol. */
.sb-ft-trust-i::before{
  content:'';position:absolute;top:-1px;inset-inline-start:0;
  width:34px;height:2px;background:var(--sb-miel);
  transition:width 380ms var(--sb-ease);
}
.sb-ft-trust-i .sb-ic{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgba(242,176,31,.34);
  background:none;color:var(--sb-miel);
  display:grid;place-items:center;flex-shrink:0;margin-bottom:16px;
  transition:border-color 300ms var(--sb-ease),background 300ms var(--sb-ease);
}
.sb-ft-trust-i b{
  color:var(--sb-off);font-weight:800;font-size:.92rem;
  line-height:1.3;margin-bottom:5px;letter-spacing:-.01em;
}
.sb-ft-trust-i > span:last-child{
  font-size:.77rem;color:rgba(255,253,248,.48);line-height:1.5;
}
@media(hover:hover) and (pointer:fine){
  .sb-ft-trust-i:hover{background:linear-gradient(to bottom,rgba(255,253,248,.09) 0%,rgba(255,253,248,.025) 55%,transparent 100%)}
  .sb-ft-trust-i:hover::before{width:100%}
  .sb-ft-trust-i:hover .sb-ic{border-color:var(--sb-miel);background:rgba(242,176,31,.1)}
}

@media(max-width:900px){
  .sb-ft-trust{grid-template-columns:1fr 1fr}
  .sb-ft-trust-i:nth-child(3){border-inline-start:none}
  .sb-ft-trust-i:nth-child(n+3){border-top:1px solid rgba(255,253,248,.09)}
  .sb-ft-trust-i:nth-child(n+3)::before{top:-1px}
}
@media(max-width:520px){
  .sb-ft-trust{grid-template-columns:1fr}
  .sb-ft-trust-i{
    flex-direction:row;align-items:center;gap:16px;
    padding:20px 18px;border-inline-start:none;
    border-top:1px solid rgba(255,253,248,.09);
  }
  .sb-ft-trust-i:first-child{border-top:none}
  .sb-ft-trust-i::before{display:none}
  .sb-ft-trust-i .sb-ic{margin-bottom:0;width:38px;height:38px}
  .sb-ft-trust-i b{margin-bottom:2px}
}

/* ── Cœur centré ── */
.sb-ft-core{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:46px 32px 40px;gap:0;
}
@media(max-width:600px){.sb-ft-core{padding:36px 18px 32px}}

/* Le logo a des contours violets : sans pastille claire il disparaît. */
.sb-ft-logo{
  background:var(--sb-off);border-radius:12px;padding:9px 13px;
  display:inline-block;margin-bottom:16px;
  transition:transform 200ms var(--sb-ease);
}
.sb-ft-logo img{height:60px;width:auto;display:block}
@media(hover:hover) and (pointer:fine){.sb-ft-logo:hover{transform:translateY(-10px)}}

.sb-ft-tagline{
  font-size:.9rem;line-height:1.7;max-width:38ch;margin:0 0 26px;
  color:rgba(255,253,248,.62);
}

/* ── Navigation : mêmes entrées que le header ── */
.sb-ft-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin-bottom:30px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,253,248,.1);
  width:100%;max-width:620px;
}
.sb-ft-nav a{
  font-size:.89rem;font-weight:700;color:rgba(255,253,248,.72);
  padding:9px 16px;border-radius:var(--sb-r-pill);
  transition:color var(--sb-fast) var(--sb-ease),background var(--sb-fast) var(--sb-ease);
}
.sb-ft-nav a.sb-on{color:var(--sb-miel-vif);background:rgba(242,176,31,.12)}
@media(hover:hover) and (pointer:fine){
  .sb-ft-nav a:hover{color:var(--sb-miel-vif);background:rgba(242,176,31,.12)}
}

/* ── Appel : l'action dominante du footer ── */
.sb-ft-call{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--sb-miel);color:var(--sb-violet);
  font-weight:800;font-size:1rem;
  padding:15px 30px;border-radius:var(--sb-r-pill);
  box-shadow:0 12px 30px rgba(242,176,31,.3);
  margin-bottom:18px;
  transition:transform 180ms var(--sb-spring),box-shadow 180ms var(--sb-ease),background 180ms var(--sb-ease);
}
.sb-ft-call .sb-num{direction:ltr;unicode-bidi:plaintext;letter-spacing:.03em}
.sb-ft-call:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
  .sb-ft-call:hover{background:var(--sb-miel-vif);transform:translateY(-3px);box-shadow:0 18px 40px rgba(242,176,31,.4)}
}
@media(max-width:400px){.sb-ft-call{font-size:.92rem;padding:14px 22px;width:100%;justify-content:center}}

/* ── Email ── */
.sb-ft-mail{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.9rem;font-weight:600;color:rgba(255,253,248,.72);
  margin-bottom:26px;
  transition:color var(--sb-fast) var(--sb-ease);
}
.sb-ft-mail svg{color:var(--sb-miel);flex-shrink:0}
@media(hover:hover) and (pointer:fine){.sb-ft-mail:hover{color:var(--sb-miel-vif)}}

/* ── Réseaux sociaux ── */
.sb-ft-soc{display:flex;gap:10px;margin-bottom:28px}
.sb-ft-soc a{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,253,248,.14);
  background:rgba(255,253,248,.04);
  display:grid;place-items:center;color:rgba(255,253,248,.75);
  transition:background var(--sb-fast) var(--sb-ease),
             border-color var(--sb-fast) var(--sb-ease),
             color var(--sb-fast) var(--sb-ease),
             transform var(--sb-base) var(--sb-spring);
}
.sb-ft-soc a:active{transform:scale(.92)}
@media(hover:hover) and (pointer:fine){
  .sb-ft-soc a:hover{background:var(--sb-miel);border-color:var(--sb-miel);color:var(--sb-violet);transform:translateY(-3px)}
}

/* ── Liens légaux ── */
.sb-ft-legal{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;
  font-size:.79rem;color:rgba(255,253,248,.45);
}
.sb-ft-legal a{transition:color var(--sb-fast) var(--sb-ease)}
@media(hover:hover) and (pointer:fine){.sb-ft-legal a:hover{color:var(--sb-miel-vif)}}

/* ── Barre du bas ── */
.sb-ft-bot{
  border-top:1px solid rgba(255,253,248,.09);
  padding:20px 0;
  text-align:center;
  font-size:.79rem;
  color:rgba(255,253,248,.45);
}
.sb-ft-bot b{color:rgba(255,253,248,.72);font-weight:800}

/* Le bouton WhatsApp flottant ne doit pas masquer le footer sur mobile */
@media(max-width:1080px){.sb-ft-bot{padding-bottom:86px}}

/* ─── 13. FORMULAIRES ──────────────────────────────────────── */
.sb-field{margin-bottom:16px}
.sb-field label{display:block;font-size:.86rem;font-weight:700;margin-bottom:8px;color:var(--sb-violet)}
.sb-field label .sb-req{color:var(--sb-miel-deep)}
.sb-field input,.sb-field select,.sb-field textarea{
  width:100%;padding:14px 16px;border:1.5px solid var(--sb-border);border-radius:var(--sb-r-sm);
  background:var(--sb-surf2);color:var(--sb-violet);font-size:.98rem;text-align:right;
  transition:border-color var(--sb-fast) var(--sb-ease),box-shadow var(--sb-fast) var(--sb-ease);
}
.sb-field input:focus,.sb-field select:focus,.sb-field textarea:focus{outline:none;border-color:var(--sb-miel);box-shadow:0 0 0 3px var(--sb-miel-dim)}
.sb-field input::placeholder,.sb-field textarea::placeholder{color:var(--sb-txt3)}
.sb-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%232A1B33' stroke-width='2.4'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center}
.sb-field.sb-err input,.sb-field.sb-err select{border-color:var(--sb-danger)}
.sb-field .sb-msg{color:var(--sb-danger);font-size:.78rem;margin-top:5px;display:none}
.sb-field.sb-err .sb-msg{display:block}
.sb-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.sb-row2{grid-template-columns:1fr}}

/* ─── 14. ÉTATS VIDES ──────────────────────────────────────── */
.sb-empty{text-align:center;padding:70px 20px;color:var(--sb-txt3)}
.sb-empty svg{opacity:.5;margin:0 auto 16px;color:var(--sb-miel-deep)}
.sb-empty h3{color:var(--sb-txt2);font-size:1.1rem;margin-bottom:8px}

/* ─── 15. PAGINATION ───────────────────────────────────────── */
.sb-pagination{display:flex;gap:6px;justify-content:center;margin-top:44px;list-style:none;flex-wrap:wrap;padding:0}
.sb-pagination a,.sb-pagination span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1.5px solid var(--sb-border);border-radius:14px;color:var(--sb-violet);font-weight:700;font-size:.88rem;background:var(--sb-white);transition:border-color var(--sb-fast) var(--sb-ease),background var(--sb-fast) var(--sb-ease)}
.sb-pagination .active span{background:var(--sb-miel);color:var(--sb-violet);border-color:var(--sb-miel)}
.sb-pagination .disabled span{color:var(--sb-txt3);opacity:.5;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){.sb-pagination a:hover{border-color:var(--sb-miel);color:var(--sb-miel-deep)}}

/* ─── 16. RÉVÉLATION AU SCROLL ─────────────────────────────── */
/* Visible par défaut. L'état masqué n'est appliqué que si <html>
   porte .js-ready — donc jamais de contenu invisible si le JS
   ne s'exécute pas. Ajouter dans le <head> du layout :
   <script>document.documentElement.classList.add('js-ready')</script> */
.sb-rv{opacity:1;transform:none}

.js-ready .sb-rv{
  opacity:0;transform:translateY(18px);
  transition:opacity 620ms var(--sb-ease),transform 620ms var(--sb-ease);
}
.js-ready .sb-rv.sb-in{opacity:1;transform:none}
.js-ready .sb-rv-stagger.sb-in > *{animation:sb-pop 540ms var(--sb-ease) backwards}
.js-ready .sb-rv-stagger.sb-in > *:nth-child(1){animation-delay:0ms}
.js-ready .sb-rv-stagger.sb-in > *:nth-child(2){animation-delay:70ms}
.js-ready .sb-rv-stagger.sb-in > *:nth-child(3){animation-delay:140ms}
.js-ready .sb-rv-stagger.sb-in > *:nth-child(4){animation-delay:210ms}
.js-ready .sb-rv-stagger.sb-in > *:nth-child(5){animation-delay:280ms}
.js-ready .sb-rv-stagger.sb-in > *:nth-child(6){animation-delay:350ms}
@keyframes sb-pop{from{opacity:0;transform:translateY(16px)}}

/* ─── 17. PAGE À PROPOS ────────────────────────────────────── */
/* =========================================================
   Sanabee : page « من نحن » (apropos)
   Verre dépoli : approximation web (backdrop-filter),
   pas le « Liquid Glass » officiel d'Apple.
   Tout est préfixé .sba pour ne rien casser dans le layout.
   ========================================================= */

.sba {
  --sba-cream: #FFFDF8;
  --sba-cream-2: #FBF6EA;
  --sba-honey: #F2B01F;
  --sba-honey-soft: #FFE3A1;
  --sba-honey-ink: #8A5A00;      /* miel lisible sur crème (AA) */
  --sba-ink: #2A1B33;            /* prune de la marque */
  --sba-ink-deep: #150E1C;
  --sba-muted: #6E6275;
  --sba-line: rgba(42, 27, 51, .08);

  --sba-r-lg: 28px;              /* cartes */
  --sba-r-md: 18px;              /* éléments internes */
  --sba-ease: cubic-bezier(.22, 1, .36, 1);

  --sba-wrap: 1120px;
  --sba-pad: clamp(1.25rem, 4vw, 2.5rem);
  --sba-space: clamp(4rem, 9vw, 7.5rem);

  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--sba-ink);
  font-family: inherit;
}

.sba *, .sba *::before, .sba *::after { box-sizing: border-box; }

.sba h1, .sba h2, .sba h3, .sba p { margin: 0; }
/* Arabe : jamais de letter-spacing (casse les liaisons) */
.sba h1, .sba h2, .sba h3 { color: var(--sba-ink); letter-spacing: 0; text-wrap: balance; }
.sba p { line-height: 1.95; text-wrap: pretty; }
.sba strong { font-weight: 700; }

.sba-wrap {
  width: min(var(--sba-wrap), 100% - 2 * var(--sba-pad));
  margin-inline: auto;
}

.sba-ic { width: 1.25em; height: 1.25em; flex: none; display: block; }

.sba-tone { color: var(--sba-muted); font-weight: inherit; }

.sba-eyebrow {
  display: inline-block;
  font-size: .9rem;
  font-weight: 700;
  color: var(--sba-honey-ink);
  margin-block-end: .9rem;
}

/* ---------- Ambiance : halos miel derrière le verre ---------- */
.sba-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 176, 31, .42), rgba(242, 176, 31, 0));
  animation: sba-drift 20s ease-in-out infinite alternate;
  will-change: transform;
}
.sba-orb--a { width: 720px; height: 720px; inset-inline-start: -260px; top: -300px; }
.sba-orb--b { width: 520px; height: 520px; inset-inline-end: -180px; bottom: -220px;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .5), rgba(255, 214, 120, 0));
  animation-delay: -7s; }
.sba-orb--c { width: 820px; height: 820px; inset-inline-end: -320px; bottom: -200px; animation-delay: -3s; }
.sba-orb--d { width: 640px; height: 640px; inset-inline-start: -240px; top: 10%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .45), rgba(255, 214, 120, 0));
  animation-delay: -11s; }

@keyframes sba-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 4%, 0) scale(1.06); }
}

/* ---------- Matériau verre ---------- */
.sba-glass {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .38));
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(255, 255, 255, .25),
    0 0 0 .5px rgba(42, 27, 51, .06),
    0 1px 2px rgba(90, 60, 10, .05),
    0 24px 60px -28px rgba(120, 78, 10, .32);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sba-glass { background: rgba(255, 253, 248, .94); }
}

/* ---------- Boutons (règle : boutons en pilule, cartes 28px) ---------- */
.sba-btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 48px;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .5s var(--sba-ease), box-shadow .5s var(--sba-ease), background-color .3s;
}
.sba-btn:active { transform: translateY(1px) scale(.98); }
.sba-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sba-cream), 0 0 0 5px var(--sba-ink); }

.sba-btn--ghost {
  color: var(--sba-ink);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--sba-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.sba-btn--ghost .sba-ic { width: 1.1em; height: 1.1em; transition: transform .5s var(--sba-ease); }

.sba-btn--honey {
  color: var(--sba-ink);
  background: var(--sba-honey);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 24px -12px rgba(160, 100, 0, .55);
}
.sba-btn--lg { font-size: 1.35rem; font-weight: 800; padding: .6rem .7rem .6rem 1.6rem; min-height: 60px; }
.sba-btn-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sba-ink); color: var(--sba-honey);
}

@media (hover: hover) {
  .sba-btn--ghost:hover { background: rgba(255, 255, 255, .9); }
  .sba-btn--ghost:hover .sba-ic { transform: translateY(3px); }
  .sba-btn--honey:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 16px 30px -12px rgba(160, 100, 0, .6); }
}

/* ======================= HERO ======================= */
.sba-hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--sba-space);
}
.sba-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sba-hero h1 {
  font-size: clamp(3.25rem, 8vw, 6.25rem);
  font-weight: 800;
  line-height: 1.1;
  margin-block-end: clamp(1.25rem, 2.5vw, 2rem);
}
.sba-hero-lead {
  font-size: 1.05rem;
  color: var(--sba-muted);
  margin-block-end: .35rem;
}
.sba-hero-question {
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.55 !important;
  max-width: 23ch;
  margin-block-end: clamp(1.75rem, 3vw, 2.5rem) !important;
}

/* Cadre visuel : photo ou dégradé miel + verre */
.sba-frame {
  position: relative;
  aspect-ratio: 10 / 9;
  border-radius: var(--sba-r-lg);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 40px 80px -40px rgba(120, 78, 10, .45), 0 0 0 .5px rgba(42, 27, 51, .08);
}
.sba-frame-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
}
.sba-frame-mesh {
  position: absolute; inset: -10%;
  z-index: -1;
  background:
    radial-gradient(40% 45% at 72% 22%, #FFF1C7 0%, rgba(255, 241, 199, 0) 70%),
    radial-gradient(55% 55% at 22% 78%, #E08E0B 0%, rgba(224, 142, 11, 0) 72%),
    radial-gradient(50% 50% at 85% 85%, #F7B733 0%, rgba(247, 183, 51, 0) 70%),
    radial-gradient(45% 40% at 18% 18%, #FFD36B 0%, rgba(255, 211, 107, 0) 70%),
    linear-gradient(160deg, #FFD978 0%, #F2B01F 55%, #D9870A 100%);
  animation: sba-mesh 22s ease-in-out infinite alternate;
  will-change: transform;
}
/* grain fin, fixe (non animé) */
.sba-frame-mesh::after {
  content: "";
  position: absolute; inset: 0;
  opacity: .22;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes sba-mesh {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.06) rotate(2deg); }
}

.sba-chip {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem .55rem .9rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--sba-ink);
}
.sba-chip .sba-ic { color: var(--sba-honey-ink); }

.sba-frame-card {
  position: absolute;
  inset-inline: 1.25rem;
  bottom: 1.25rem;
  padding: 1.35rem 1.5rem;
  border-radius: var(--sba-r-md);
}
.sba-frame-card p { font-size: 1.02rem; line-height: 1.9; color: var(--sba-ink); }

/* ======================= MANIFESTE ======================= */
.sba-manifesto { padding-block: 0 var(--sba-space); }
.sba-manifesto-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  row-gap: 1.75rem;
}
.sba-manifesto h2 {
  grid-column: 1 / span 8;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.3;
}
.sba-manifesto-text {
  grid-column: 5 / span 8;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--sba-muted);
  max-width: 46ch;
}
.sba-mark {
  color: var(--sba-ink);
  font-weight: 800;
  background: linear-gradient(transparent 58%, rgba(242, 176, 31, .55) 58%, rgba(242, 176, 31, .55) 92%, transparent 92%);
  padding-inline: .15em;
}

/* ======================= BENTO ======================= */
.sba-bento-section { position: relative; padding-block: 0 clamp(2rem, 4vw, 3rem); }
.sba-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.25rem);
}
.sba-tile {
  position: relative;
  border-radius: var(--sba-r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1rem;
  overflow: hidden;
  isolation: isolate;
  transition: transform .7s var(--sba-ease), box-shadow .7s var(--sba-ease);
}
.sba-tile h3 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); font-weight: 800; line-height: 1.4; }
.sba-tile h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.4; }
.sba-tile h2 .sba-tone { display: block; }

.sba-tile-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  font-size: 1.35rem;
  margin-block-end: .25rem;
}

/* A : miel */
.sba-tile--honey {
  grid-column: span 7;
  min-height: 380px;
  color: var(--sba-ink);
  background:
    radial-gradient(60% 70% at 15% 10%, rgba(255, 244, 210, .95), rgba(255, 244, 210, 0) 70%),
    radial-gradient(55% 60% at 90% 100%, rgba(217, 135, 10, .55), rgba(217, 135, 10, 0) 70%),
    linear-gradient(150deg, #FFD978, #F2B01F);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 30px 60px -34px rgba(160, 100, 0, .6);
}
.sba-tile--honey p { color: rgba(42, 27, 51, .82); max-width: 54ch; }
.sba-tile--honey .sba-tile-icon {
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sba-tile-foot {
  margin-block-start: auto !important;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid rgba(42, 27, 51, .14);
  font-weight: 700;
  font-size: .95rem;
  color: var(--sba-ink) !important;
}

/* B : prune */
.sba-tile--ink {
  grid-column: span 5;
  color: #FFF6E3;
  background:
    radial-gradient(70% 60% at 0% 100%, rgba(242, 176, 31, .30), rgba(242, 176, 31, 0) 70%),
    radial-gradient(90% 80% at 100% 0%, #43304F 0%, rgba(67, 48, 79, 0) 70%),
    linear-gradient(170deg, #2A1B33, #150E1C);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -34px rgba(21, 14, 28, .7);
}
.sba-tile--ink h3 { color: #FFF6E3; }
.sba-tile--ink .sba-tone { color: rgba(255, 246, 227, .55); }
.sba-tile--ink p { color: rgba(255, 246, 227, .76); }
.sba-tile--ink .sba-tile-icon {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--sba-honey);
}
.sba-tile-quote {
  margin-block-start: auto !important;
  padding: 1rem 1.2rem;
  border-radius: var(--sba-r-md);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #FFF6E3 !important;
  font-size: 1.05rem;
}
.sba-tile-quote strong { color: var(--sba-honey); }

/* C : verre, pleine largeur */
.sba-tile--glass {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.sba-why-main { display: flex; flex-direction: column; gap: 1rem; }
.sba-why-main p { color: var(--sba-muted); max-width: 52ch; }
.sba-tile--glass .sba-tile-icon {
  background: var(--sba-ink);
  color: var(--sba-honey);
}
.sba-why-aside {
  display: flex; flex-direction: column; gap: 1rem;
  padding-inline-start: clamp(1.25rem, 3vw, 2.5rem);
  border-inline-start: 1px solid var(--sba-line);
}
.sba-why-aside p { color: var(--sba-muted); }
.sba-why-highlight {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.6 !important;
  color: var(--sba-ink) !important;
}
.sba-why-highlight strong { color: var(--sba-honey-ink); font-weight: 800; }

@media (hover: hover) {
  .sba-tile:hover { transform: translateY(-4px); }
}

/* ======================= PROCESS ======================= */
.sba-process {
  position: relative;
  padding-block: var(--sba-space);
  background: linear-gradient(180deg, rgba(251, 246, 234, 0), var(--sba-cream-2) 18%, var(--sba-cream-2) 82%, rgba(251, 246, 234, 0));
}
.sba-process-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.sba-process-head { position: sticky; top: 8rem; }
.sba-process-head h2 {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.35;
  max-width: 15ch;
}

.sba-steps {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  display: grid;
  gap: 1rem;
}
/* fil vertical qui relie les étapes */
.sba-steps::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(1.25rem + 25px);
  top: 2.5rem; bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(242, 176, 31, 0), rgba(242, 176, 31, .7) 12%, rgba(242, 176, 31, .7) 88%, rgba(242, 176, 31, 0));
  z-index: 0;
}
.sba-step {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem;
  border-radius: 22px;
  z-index: 1;
  transition: transform .7s var(--sba-ease);
}
.sba-step-node {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--sba-ink);
  color: var(--sba-honey);
  font-size: 1.2rem;
  box-shadow: 0 0 0 5px rgba(255, 253, 248, .9);
}
.sba-step h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.5; margin-block: .55rem .35rem; }
.sba-step p { color: var(--sba-muted); font-size: .98rem; line-height: 1.85; }

@media (hover: hover) {
  .sba-step:hover { transform: translateX(-4px); }
  [dir="ltr"] .sba-step:hover { transform: translateX(4px); }
}

/* ======================= MAGASIN + CONTACT ======================= */
.sba-visit-section { padding-block: 0; }
.sba-visit {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  border-radius: var(--sba-r-lg);
  overflow: hidden;
}
.sba-visit-place,
.sba-visit-call { padding: clamp(1.75rem, 3.5vw, 3rem); display: flex; flex-direction: column; gap: 1rem; }
.sba-visit-place h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.4; }
.sba-visit-place h2 .sba-tone { display: block; font-size: .6em; font-weight: 700; }
.sba-visit-place p { color: var(--sba-muted); max-width: 52ch; }
.sba-visit-place .sba-tile-icon { background: var(--sba-ink); color: var(--sba-honey); }

.sba-visit-call {
  justify-content: center;
  color: #FFF6E3;
  background:
    radial-gradient(75% 70% at 0% 100%, rgba(242, 176, 31, .30), rgba(242, 176, 31, 0) 70%),
    radial-gradient(80% 80% at 100% 0%, #43304F 0%, rgba(67, 48, 79, 0) 70%),
    linear-gradient(165deg, #2A1B33, #150E1C);
}
.sba-visit-kicker { font-size: 1.35rem; font-weight: 800; color: #FFF6E3; }
.sba-visit-call p:not(.sba-visit-kicker) { color: rgba(255, 246, 227, .74); }
.sba-visit-call .sba-btn { align-self: flex-start; margin-block-start: .5rem; }

/* ======================= CLÔTURE ======================= */
.sba-closing-section { padding-block: clamp(1rem, 2vw, 1.5rem) var(--sba-space); }
.sba-closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--sba-r-lg);
  padding: clamp(2.5rem, 7vw, 6rem) var(--sba-pad);
  text-align: center;
  box-shadow: 0 40px 90px -45px rgba(160, 100, 0, .6);
}
.sba-closing-inner {
  max-width: 44rem;
  margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.sba-closing-lead { font-size: 1.15rem; font-weight: 700; color: rgba(42, 27, 51, .7); }
.sba-closing h2 { font-size: clamp(2.1rem, 5vw, 3.9rem); font-weight: 800; line-height: 1.3; }
.sba-closing p { color: rgba(42, 27, 51, .82); font-size: 1.1rem; }
.sba-closing-highlight {
  font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
  font-weight: 700;
  color: var(--sba-ink) !important;
  line-height: 1.7 !important;
  max-width: 40ch;
}
.sba-sign {
  display: inline-flex; align-items: center; gap: .9rem;
  margin-block-start: .75rem;
  padding: .75rem 1.4rem;
  border-radius: 999px;
}
.sba-sign strong { font-size: 1.15rem; font-weight: 800; }
.sba-sign span { color: var(--sba-muted); font-weight: 600; padding-inline-start: .9rem; border-inline-start: 1px solid var(--sba-line); }
.sba-tagline { font-weight: 700; color: var(--sba-ink) !important; font-size: 1rem !important; }

/* ======================= RÉVÉLATIONS ======================= */
.sba-js .sba-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .9s var(--sba-ease) calc(var(--i, 0) * 70ms),
    transform .9s var(--sba-ease) calc(var(--i, 0) * 70ms);
}
.sba-js .sba-reveal.is-in { opacity: 1; transform: none; }
/* les tuiles gardent leur hover après la révélation */
.sba-js .sba-tile.sba-reveal.is-in,
.sba-js .sba-step.sba-reveal.is-in { transition: opacity .9s var(--sba-ease) calc(var(--i, 0) * 70ms), transform .7s var(--sba-ease); }

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1023px) {
  .sba-tile--honey, .sba-tile--ink { grid-column: 1 / -1; min-height: 0; }
  .sba-process-grid { grid-template-columns: 1fr; }
  .sba-process-head { position: static; }
  .sba-process-head h2 { max-width: none; }
}

@media (max-width: 767px) {
  .sba-hero-grid { grid-template-columns: 1fr; }
  .sba-hero-question { max-width: none; }
  .sba-frame { aspect-ratio: 1 / 1.08; }
  .sba-chip { top: 1rem; inset-inline-end: 1rem; font-size: .82rem; }
  .sba-frame-card { inset-inline: .85rem; bottom: .85rem; padding: 1.1rem 1.15rem; }
  .sba-frame-card p { font-size: .95rem; }

  .sba-manifesto h2, .sba-manifesto-text { grid-column: 1 / -1; }

  .sba-tile--glass { grid-template-columns: 1fr; }
  .sba-why-aside { padding-inline-start: 0; border-inline-start: 0; padding-block-start: 1.25rem; border-block-start: 1px solid var(--sba-line); }

  .sba-steps::before { inset-inline-start: calc(1rem + 21px); }
  .sba-step { grid-template-columns: 42px minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .sba-step-node { width: 42px; height: 42px; font-size: 1.05rem; }

  .sba-visit { grid-template-columns: 1fr; }
  .sba-visit-call .sba-btn { align-self: stretch; justify-content: space-between; }

  .sba-sign { flex-direction: column; gap: .35rem; border-radius: var(--sba-r-md); }
  .sba-sign span { padding-inline-start: 0; border-inline-start: 0; }
}

/* ======================= ACCESSIBILITÉ ======================= */
@media (prefers-reduced-motion: reduce) {
  .sba-orb, .sba-frame-mesh { animation: none; }
  .sba-js .sba-reveal { transform: none; transition: opacity .4s linear; }
  .sba-tile, .sba-step, .sba-btn { transition: none; }
  .sba-tile:hover, .sba-step:hover, .sba-btn:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .sba-glass, .sba-btn--ghost, .sba-tile--honey .sba-tile-icon {
    background: var(--sba-cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ─── 18. UTILITAIRES ──────────────────────────────────────── */
.sb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sb-skip{position:absolute;top:-100px;right:4px;z-index:9999;padding:10px 18px;background:var(--sb-miel);color:var(--sb-violet);border-radius:var(--sb-r-sm);font-weight:800;transition:top .2s}
.sb-skip:focus{top:4px}

/* ─── 19. MOUVEMENT RÉDUIT ─────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .sb-rv,.js-ready .sb-rv,.js-ready .sb-rv-stagger.sb-in > *{
    opacity:1 !important;transform:none !important;animation:none !important;transition:none !important;
  }
  .sbc,.sbc *,.sbp,.sbp *,.sb-btn,.sb-process-card{
    transition:none !important;animation:none !important;
  }
  .sbc:hover,.sbc:hover .sbc-media img,
  .sbp:hover,.sbp:hover .sbp-media img,
  .sb-btn:hover,.sb-process-card:hover{transform:none !important}
  *{scroll-behavior:auto !important}
}





/* SB-AVIS-CARRES:START — avis de la home : carrés, capture bord à bord, capture entière au clic */
.sb-avis-sec .sb-avis-grid{align-items:stretch}
.sb-avis-sec .sb-rev{
  aspect-ratio:1/1;width:clamp(260px,26vw,330px);border-radius:24px;background:#16121A;
  box-shadow:0 0 0 1px rgba(42,27,51,.08),0 18px 40px rgba(42,27,51,.16);
  transition:transform 420ms var(--sb-ease),box-shadow 420ms var(--sb-ease);
}
@media(max-width:640px){.sb-avis-sec .sb-rev{width:78vw}}
.sb-avis-sec .sb-rev-bg{display:none}
.sb-avis-sec .sb-rev-img{
  inset:0;width:100%;height:100%;border-radius:0;filter:none;
  object-fit:cover;object-position:50% 34%;
  transition:object-position 900ms var(--sb-ease);
}
.sb-avis-sec .sb-rev::after{
  inset:auto 0 0;height:38%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(16,11,20,.78),rgba(16,11,20,0));
}
.sb-avis-sec .sb-rev-zoom{
  z-index:2;bottom:14px;inset-inline-start:14px;width:auto;height:auto;
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:0;opacity:1;
  font-size:.84rem;font-weight:800;color:var(--sb-violet);
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(0,0,0,.25);
}
.sb-avis-sec .sb-rev-zoom::after{content:"اقرأ الرأي كاملا"}
@media(hover:hover) and (pointer:fine){
  .sb-avis-sec .sb-rev:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(42,27,51,.08),0 30px 60px rgba(42,27,51,.24)}
  .sb-avis-sec .sb-rev:hover .sb-rev-img{object-position:50% 58%}
  .sb-avis-sec .sb-rev:hover .sb-rev-zoom{transform:none;background:var(--sb-miel)}
}
.sb-lb-img{border-radius:22px}
@media(prefers-reduced-motion:reduce){.sb-avis-sec .sb-rev,.sb-avis-sec .sb-rev-img{transition:none}}
/* SB-AVIS-CARRES:END */