/*
Theme Name:  AfricBiz — Astra Child
Theme URI:   https://africbiz.com/
Description: Thème enfant Astra pour AfricBiz — plateforme B2B qui relie les usines, fabricants et exportateurs chinois vérifiés aux importateurs, grossistes et hommes d'affaires africains, au prix départ usine. v3 : repositionnement B2B complet, paiement 100 % sécurisé (séquestre), sourcing 48 h, achat groupé de conteneurs, suivi logistique temps réel, traduction FR/EN/中文, identification & confiance.
Author:      Elimboo
Author URI:  https://elimboo.com/
Template:    astra
Version:     3.11.0
Text Domain: astra-child-africbiz
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Polices (Bricolage Grotesque + Plus Jakarta Sans) chargées via wp_enqueue_style dans functions.php. */

/* =====================================================================
   AFRICBIZ — DESIGN SYSTEM 2026 (refonte)
   Palette verrouillée par le logo officiel :
     #2E90FA bleu · #1565C0 bleu profond · #F97316 orange · #0B1424 encre
   Thèse de marque : prix d'usine, 0 intermédiaire. L'orange = la couleur
   de l'économie réalisée (prix / promos / CTA). Le bleu = la confiance.
   ===================================================================== */
:root{
  --blue:#2E90FA; --blue-deep:#1565C0; --blue-ink:#0B3E8C;
  --orange:#F97316; --orange-deep:#EA580C;
  --ink:#0B1424; --ink-2:#101D38; --ink-70:#2A3650;
  --paper:#FFFFFF; --surface:#F4F7FC; --surface-2:#EEF3FA;
  --line:#E4EBF4; --muted:#5E6E86;

  --grad-blue:linear-gradient(135deg,#2E90FA 0%,#1565C0 100%);
  --grad-orange:linear-gradient(135deg,#FB923C 0%,#EA580C 100%);
  --grad-night:radial-gradient(120% 120% at 12% 8%, #15294f 0%, #0B1424 60%);

  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --pill:999px;
  --sh-sm:0 1px 2px rgba(11,20,36,.06),0 2px 6px rgba(11,20,36,.05);
  --sh:0 10px 30px -12px rgba(11,20,36,.18);
  --sh-lg:0 28px 64px -24px rgba(11,20,36,.30);
  --sh-orange:0 14px 34px -12px rgba(249,115,22,.55);
  --ease:cubic-bezier(.16,1,.3,1);
  --container:1200px; --gutter:clamp(16px,4vw,28px);
  --ff-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --ff-body:'Plus Jakarta Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff-body); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
h1,h2,h3,h4{font-family:var(--ff-display); line-height:1.1; letter-spacing:-.025em; margin:0; color:var(--ink)}
p{margin:0}
a{text-decoration:none; color:inherit}
img{max-width:100%; display:block}
.num{font-family:var(--ff-display); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

.wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.sec{padding-block:clamp(54px,7vw,104px)}
.sec--surface{background:var(--surface)}
.eyebrow{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-display);
  font-weight:600; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue-deep); background:rgba(46,144,250,.10);
  border:1px solid rgba(46,144,250,.16); padding:6px 13px; border-radius:var(--pill);
}
.head{max-width:720px; margin:0 auto clamp(34px,4vw,52px); text-align:center}
.head h2{font-size:clamp(1.7rem,3.6vw,2.7rem); font-weight:800; margin:16px 0 12px}
.head p{color:var(--muted); font-size:1.06rem}
.ic{width:1em; height:1em; flex:0 0 auto; vertical-align:-.16em}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-display); font-weight:600; font-size:1rem; cursor:pointer;
  padding:14px 26px; border-radius:var(--pill); border:1.5px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .2s}
.btn .ic{width:18px;height:18px}
.btn:hover{transform:translateY(-2px)}
.btn--cta{background:var(--grad-orange); color:#fff; box-shadow:var(--sh-orange)}
.btn--cta:hover{box-shadow:0 20px 44px -12px rgba(249,115,22,.7)}
.btn--blue{background:var(--grad-blue); color:#fff; box-shadow:var(--sh)}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue-deep)}
.btn--white{background:#fff; color:var(--ink); box-shadow:var(--sh)}
.btn--white:hover{background:var(--orange); color:#fff}
.btn--sm{padding:9px 16px; font-size:.86rem}
.on-dark .btn--ghost,.hero .btn--ghost,.cta-band .btn--ghost{color:#fff; border-color:rgba(255,255,255,.32)}
.on-dark .btn--ghost:hover,.hero .btn--ghost:hover,.cta-band .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.08); color:#fff}

/* ===================================================================
   TOP BAR + HEADER
   =================================================================== */
.topbar{background:var(--ink); color:rgba(255,255,255,.78); font-size:.8rem}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center; padding-block:8px}
.topbar .l,.topbar .r{display:flex; flex-wrap:wrap; gap:18px; align-items:center}
.topbar span{display:inline-flex; align-items:center; gap:7px}
.topbar .ic{width:15px;height:15px; color:var(--orange)}
.topbar a:hover{color:#fff}

.header{position:sticky; top:0; z-index:80; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line)}
.header .wrap{display:flex; align-items:center; gap:22px; padding-block:12px}
.brand{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.brand .logo{height:38px; width:auto}
.brand b{font-family:var(--ff-display); font-weight:800; font-size:1.35rem; letter-spacing:-.03em}
.brand b i{font-style:normal}
.brand b .a{color:var(--blue-deep)} .brand b .b{color:var(--orange)}
.nav{display:flex; gap:2px; margin-left:6px}
.nav a{position:relative; font-family:var(--ff-display); font-weight:600; font-size:.93rem; color:var(--ink); padding:8px 12px; border-radius:10px}
.nav a::after{content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px; background:var(--grad-orange); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease)}
.nav a:hover{color:var(--orange-deep)} .nav a:hover::after{transform:scaleX(1)}
.header .spacer{flex:1}
.hicons{display:flex; align-items:center; gap:6px}
.iconbtn{width:42px; height:42px; display:grid; place-items:center; border-radius:12px; color:var(--ink-70); border:1px solid transparent; transition:.2s}
.iconbtn:hover{background:var(--surface); color:var(--blue-deep)}
.iconbtn .ic{width:21px;height:21px}
.cart{position:relative}
.cart .badge{position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--orange); color:#fff; font-size:.66rem; font-weight:700; display:grid; place-items:center; font-family:var(--ff-display)}
.btn-publish{background:var(--grad-orange); color:#fff; box-shadow:var(--sh-orange); padding:11px 18px; border-radius:var(--pill); font-family:var(--ff-display); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:8px; transition:transform .2s var(--ease)}
.btn-publish:hover{transform:translateY(-2px)}
.btn-publish .ic{width:18px;height:18px}
.burger{display:none}

/* ---------- COMMAND BAR (locale + recherche + chips) ---------- */
.cmd{background:#fff; border-bottom:1px solid var(--line)}
.cmd .wrap{padding-block:14px}
.cmd-row{display:flex; align-items:center; gap:14px}
.locale{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; font-size:.9rem; color:var(--ink-70);
  background:var(--surface); border:1px solid var(--line); padding:11px 16px; border-radius:var(--pill)}
.locale .ic{width:18px;height:18px; color:var(--orange)} .locale b{font-family:var(--ff-display)}
.searchbar{flex:1; display:flex; gap:8px; background:#fff; border:2px solid var(--blue); border-radius:var(--pill); padding:5px 5px 5px 18px; box-shadow:0 8px 24px -16px rgba(46,144,250,.6)}
.searchbar .ic{width:20px;height:20px; color:var(--muted); align-self:center}
.searchbar input{flex:1; border:0; outline:0; background:transparent; font-size:1rem; font-family:var(--ff-body); color:var(--ink)}
.searchbar button{border:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; padding:11px 24px; border-radius:var(--pill); color:#fff; background:var(--grad-orange); font-family:var(--ff-display); font-weight:600}
.chips{display:flex; gap:8px; overflow-x:auto; margin-top:12px; scrollbar-width:none; padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; font-size:.84rem; color:var(--ink-70); background:var(--surface); border:1px solid var(--line); padding:7px 14px; border-radius:var(--pill); transition:.2s; font-weight:500}
.chip:hover{background:var(--blue); color:#fff; border-color:var(--blue)}

/* ===================================================================
   HERO
   =================================================================== */
.hero{position:relative; overflow:hidden; background:var(--grad-night); color:#fff; isolation:isolate}
.hero::before{content:""; position:absolute; inset:-25% -10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 46% at 16% 20%, rgba(46,144,250,.55), transparent 62%),
    radial-gradient(40% 52% at 88% 22%, rgba(249,115,22,.42), transparent 60%),
    radial-gradient(50% 60% at 70% 100%, rgba(21,101,192,.5), transparent 60%);
  filter:blur(8px); animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.06)}100%{transform:translate3d(-2%,1%,0) scale(1.03)}}
/* trame de fond légère */
.hero::after{content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:22px 22px}
.hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; padding-block:clamp(48px,6vw,82px)}
.hero .eyebrow{color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.2)}
.hero h1{font-size:clamp(2.15rem,4.6vw,3.55rem); font-weight:800; margin:18px 0; color:#fff}
.hero h1 .hl{position:relative; white-space:nowrap; color:#fff}
.hero h1 .hl::after{content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.34em; z-index:-1; border-radius:4px; background:var(--grad-orange); opacity:.95}
.hero .lead{font-size:clamp(1.04rem,1.5vw,1.22rem); color:rgba(255,255,255,.82); max-width:520px}
.hero-actions{display:flex; flex-wrap:wrap; gap:13px; margin-top:26px}
.hero-trust{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:24px; font-size:.88rem; color:rgba(255,255,255,.8)}
.hero-trust span{display:inline-flex; align-items:center; gap:7px}
.hero-trust .ic{width:17px;height:17px; color:#7FE3A4}
.paystrip{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.paystrip span{font-size:.76rem; color:rgba(255,255,255,.82); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); padding:6px 12px; border-radius:var(--pill); display:inline-flex; align-items:center; gap:6px}
.paystrip .ic{width:14px;height:14px; color:#fff}

/* visuel hero : photo cliente dans un panneau + carte deal flottante */
.hero-visual{position:relative}
.photo-card{position:relative; border-radius:var(--r-xl); overflow:hidden; background:#fff; box-shadow:var(--sh-lg); aspect-ratio:4/3.4}
.photo-card img{width:100%; height:100%; object-fit:cover; object-position:60% 40%}
.photo-card .glow{position:absolute; inset:auto -20% -30% auto; width:60%; aspect-ratio:1; background:radial-gradient(closest-side,rgba(46,144,250,.35),transparent 70%)}
.pill-float{position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.95); color:var(--ink); font-family:var(--ff-display); font-weight:600; font-size:.82rem; padding:8px 14px; border-radius:var(--pill); box-shadow:var(--sh)}
.pill-float .dot{width:8px; height:8px; border-radius:50%; background:#1FB55E; box-shadow:0 0 0 0 rgba(31,181,94,.5); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,181,94,.55)}70%{box-shadow:0 0 0 9px rgba(31,181,94,0)}100%{box-shadow:0 0 0 0 rgba(31,181,94,0)}}
.deal-card{position:absolute; left:-22px; bottom:-26px; width:min(290px,82%); background:#fff; color:var(--ink); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:15px 16px; border:1px solid var(--line)}
.deal-card .top{display:flex; align-items:center; gap:11px}
.deal-thumb{width:50px; height:50px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; color:var(--blue-deep); background:linear-gradient(135deg,rgba(46,144,250,.14),rgba(249,115,22,.12))}
.deal-thumb .ic{width:26px;height:26px}
.deal-card .name{font-family:var(--ff-display); font-weight:600; font-size:.92rem; line-height:1.2}
.deal-card .sup{font-size:.74rem; color:var(--muted); display:flex; align-items:center; gap:4px; margin-top:2px}
.deal-card .sup .ic{width:13px;height:13px; color:var(--blue)}
.deal-prices{display:flex; align-items:baseline; gap:9px; margin-top:11px; padding-top:11px; border-top:1px dashed var(--line)}
.price-now{font-family:var(--ff-display); font-weight:700; font-size:1.18rem; color:var(--ink); font-variant-numeric:tabular-nums}
.price-now small{font-size:.62em; color:var(--muted); font-weight:600}
.price-was{font-size:.82rem; color:var(--muted); text-decoration:line-through}
.save{margin-left:auto; font-family:var(--ff-display); font-weight:700; font-size:.78rem; color:#fff; background:var(--grad-orange); padding:4px 9px; border-radius:8px}

/* ===================================================================
   SIGNATURE — LA ROUTE DIRECTE (sans intermédiaire)
   =================================================================== */
.route{background:var(--ink-2); color:#fff; padding-block:clamp(30px,4vw,46px); position:relative; overflow:hidden}
.route .wrap{position:relative; z-index:2}
.route-top{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:14px; margin-bottom:24px}
.route-top h2{color:#fff; font-size:clamp(1.4rem,2.6vw,2rem); font-weight:800}
.route-top p{color:rgba(255,255,255,.72); font-size:.96rem; max-width:440px}
.route-line{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:10px}
.node{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center}
.node .disc{width:62px; height:62px; border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:#fff; position:relative}
.node .disc .ic{width:28px;height:28px}
.node.live .disc{background:var(--grad-blue); border-color:transparent; box-shadow:0 12px 30px -10px rgba(46,144,250,.7)}
.node.dest .disc{background:var(--grad-orange); border-color:transparent; box-shadow:var(--sh-orange)}
.node b{font-family:var(--ff-display); font-weight:600; font-size:.92rem}
.node span{font-size:.75rem; color:rgba(255,255,255,.6)}
.link{position:relative; height:3px; border-radius:3px; min-width:46px; background:rgba(255,255,255,.14); overflow:hidden}
.link::before{content:""; position:absolute; inset:0; width:40%; border-radius:3px; background:linear-gradient(90deg,transparent,var(--orange),transparent); animation:flow 2.4s linear infinite}
@keyframes flow{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.cut{position:relative}
.cut .disc{opacity:.4; background:rgba(255,255,255,.04)}
.cut .disc::after{content:""; position:absolute; inset:14px; border-radius:50%; }
.cut .strike{position:absolute; top:31px; left:50%; transform:translateX(-50%) rotate(-12deg); width:74px; height:2px; background:var(--orange); border-radius:2px}
.cut b,.cut span{opacity:.45; text-decoration:line-through}
.removed{margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.removed .rm-label{font-size:.8rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:rgba(255,255,255,.5)}
.rm{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:rgba(255,255,255,.62); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); padding:6px 13px 6px 10px; border-radius:var(--pill); text-decoration:line-through; text-decoration-color:rgba(249,115,22,.7); text-decoration-thickness:2px}
.rm .ic{width:15px; height:15px; color:var(--orange); flex:none}
.route-note{margin-top:22px; display:inline-flex; align-items:center; gap:9px; font-size:.9rem; color:#fff; background:rgba(249,115,22,.16); border:1px solid rgba(249,115,22,.32); padding:9px 16px; border-radius:var(--pill)}
.route-note .ic{width:18px;height:18px; color:var(--orange)}

/* ===================================================================
   CATÉGORIES
   =================================================================== */
.cats{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.cat{position:relative; display:flex; flex-direction:column; align-items:center; gap:13px; text-align:center; padding:30px 16px 26px;
  background:linear-gradient(180deg,#fff,#fbfdff); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  overflow:hidden; transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
/* liseré supérieur révélé au survol */
.cat::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-blue);
  transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease)}
.cat:hover{transform:translateY(-8px); box-shadow:0 26px 50px -22px rgba(21,101,192,.4); border-color:rgba(46,144,250,.28)}
.cat:hover::before{transform:scaleX(1); background:var(--grad-orange)}
.cat-ic{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; color:#fff;
  background:var(--grad-blue); box-shadow:0 12px 24px -8px rgba(46,144,250,.55), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .32s var(--ease),background .32s var(--ease),box-shadow .32s var(--ease)}
.cat-ic .ic{width:30px; height:30px; stroke-width:2.1; color:#fff; stroke:#fff}
.cat:hover .cat-ic{background:var(--grad-orange); box-shadow:0 16px 30px -8px rgba(249,115,22,.6), inset 0 1px 0 rgba(255,255,255,.3);
  transform:scale(1.08) rotate(-3deg)}
.cat b{font-family:var(--ff-display); font-weight:700; font-size:.98rem; color:var(--ink); letter-spacing:-.01em}
.cat span{font-size:.78rem; color:var(--muted)}
.cat .count{font-size:.72rem; color:var(--blue-deep); font-weight:600; background:rgba(46,144,250,.09); padding:2px 9px; border-radius:var(--pill)}

/* ===================================================================
   BANDEAU PRIX D'USINE (comparatif tangible)
   =================================================================== */
.savings{background:var(--grad-night); color:#fff; border-radius:var(--r-xl); padding:clamp(28px,4vw,48px); position:relative; overflow:hidden; box-shadow:var(--sh-lg)}
.savings::before{content:""; position:absolute; inset:auto -8% -50% 55%; width:55%; aspect-ratio:1; background:radial-gradient(closest-side,rgba(249,115,22,.4),transparent 70%)}
.savings .grid{position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center}
.savings h2{color:#fff; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:800}
.savings p{color:rgba(255,255,255,.82); margin:12px 0 22px; max-width:460px}
.compare{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg); padding:20px; backdrop-filter:blur(6px)}
.compare h4{color:#fff; font-size:.92rem; display:flex; align-items:center; gap:8px; margin-bottom:14px}
.compare h4 .ic{width:18px;height:18px; color:var(--orange)}
.bars{display:flex; flex-direction:column; gap:14px}
.bar-row .l{display:flex; justify-content:space-between; font-size:.84rem; margin-bottom:6px}
.bar-row .l span:last-child{font-family:var(--ff-display); font-weight:700; font-variant-numeric:tabular-nums}
.track{height:12px; border-radius:8px; background:rgba(255,255,255,.1); overflow:hidden}
.fill{height:100%; border-radius:8px}
.fill.market{width:100%; background:rgba(255,255,255,.3)}
.fill.factory{width:57%; background:var(--grad-orange)}
.compare .verdict{margin-top:16px; text-align:center; font-family:var(--ff-display); font-weight:700; color:#fff}
.compare .verdict b{color:#FFB066; font-size:1.3rem}

/* ===================================================================
   PRODUITS — grille deal cards
   =================================================================== */
.prods{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.prod{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.prod:hover{transform:translateY(-6px); box-shadow:var(--sh-lg)}
.prod .media{position:relative; aspect-ratio:1; background:linear-gradient(135deg,var(--surface),var(--surface-2)); display:grid; place-items:center; color:var(--blue-deep)}
.prod .media .ic{width:64px;height:64px; opacity:.55}
.prod .tag{position:absolute; top:11px; left:11px; font-family:var(--ff-display); font-weight:700; font-size:.7rem; padding:4px 9px; border-radius:8px; color:#fff; background:var(--grad-orange)}
.prod .tag.pro{background:var(--grad-blue)}
.prod .fav{position:absolute; top:11px; right:11px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; color:var(--muted); box-shadow:var(--sh-sm)}
.prod .fav .ic{width:17px;height:17px}
.prod .body{padding:14px 15px 16px}
.prod .name{font-family:var(--ff-display); font-weight:600; font-size:.95rem; line-height:1.25; min-height:2.4em}
.prod .sup{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; color:var(--muted); margin-top:7px; background:var(--surface); border:1px solid var(--line); padding:3px 9px; border-radius:var(--pill)}
.prod .sup .ic{width:13px;height:13px; color:var(--blue)}
.prod .prices{display:flex; align-items:baseline; gap:8px; margin-top:11px}
.prod .moq{font-size:.74rem; color:var(--muted); margin-top:6px; display:flex; align-items:center; gap:5px}
.prod .moq .ic{width:13px;height:13px}
.prod-foot{text-align:center; margin-top:36px}

/* ===================================================================
   CONFIANCE
   =================================================================== */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.trust-item{display:flex; flex-direction:column; gap:13px; padding:26px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); transition:.3s var(--ease)}
.trust-item:hover{transform:translateY(-5px); box-shadow:var(--sh-lg)}
.trust-ic{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:var(--orange); background:linear-gradient(135deg,rgba(249,115,22,.16),rgba(249,115,22,.05))}
.trust-ic .ic{width:26px;height:26px}
.trust-item h3{font-size:1.05rem}
.trust-item p{color:var(--muted); font-size:.92rem}

/* ---------- ÉTAPES ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:s}
.step{position:relative; padding:30px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm)}
.step .n{counter-increment:s; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-family:var(--ff-display); font-weight:800; color:#fff; background:var(--grad-blue); margin-bottom:16px; box-shadow:0 12px 26px -10px rgba(46,144,250,.6)}
.step .n::before{content:"0" counter(s)}
.step h3{font-size:1.1rem; margin-bottom:7px}
.step p{color:var(--muted); font-size:.92rem}
.step:not(:last-child)::after{content:""; position:absolute; top:54px; right:-12px; width:24px; height:2px; background:var(--line); z-index:1}

/* ---------- VILLES ---------- */
.cities{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.city{display:flex; align-items:center; gap:12px; padding:16px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); transition:.25s var(--ease)}
.city:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.city .ci{width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--grad-blue)}
.city .ci .ic{width:20px;height:20px}
.city b{font-family:var(--ff-display); font-weight:600; font-size:.92rem; display:block}
.city span{font-size:.76rem; color:var(--muted)}

/* ---------- COMMUNAUTÉ (photo) ---------- */
.community{background:var(--surface)}
.community .grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,4vw,56px); align-items:center}
.community .photo{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); aspect-ratio:5/4}
.community .photo img{width:100%;height:100%;object-fit:cover}
.community h2{font-size:clamp(1.7rem,3.2vw,2.5rem); font-weight:800; margin-bottom:14px}
.community p{color:var(--muted); margin-bottom:22px; max-width:480px}
.kpis{display:flex; flex-wrap:wrap; gap:26px; margin:24px 0 28px}
.kpi strong{display:block; font-family:var(--ff-display); font-weight:800; font-size:2.1rem; line-height:1; font-variant-numeric:tabular-nums;
  background:var(--grad-orange); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.kpi span{font-size:.84rem; color:var(--muted)}

/* ---------- TÉMOIGNAGES ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.quote{padding:26px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm)}
.stars{display:inline-flex; gap:2px; color:var(--orange); margin-bottom:12px}
.stars .ic{width:18px;height:18px}
.quote blockquote{margin:0 0 16px; font-size:1rem; color:var(--ink-70); line-height:1.6}
.quote cite{font-style:normal; display:flex; align-items:center; gap:11px}
.quote .av{width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-family:var(--ff-display); font-weight:700; background:var(--grad-blue)}
.quote .who b{font-family:var(--ff-display); font-size:.94rem; display:block}
.quote .who span{font-size:.78rem; color:var(--muted)}

/* ---------- DEVENIR FOURNISSEUR ---------- */
.supplier{background:var(--grad-night); color:#fff; position:relative; overflow:hidden}
.supplier .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.supplier::before{content:""; position:absolute; inset:auto -6% -40% 60%; width:46%; aspect-ratio:1; background:radial-gradient(closest-side,rgba(249,115,22,.35),transparent 70%)}
.supplier h2{color:#fff; font-size:clamp(1.6rem,3vw,2.4rem); font-weight:800; margin:14px 0}
.supplier p{color:rgba(255,255,255,.82); max-width:520px}
.supplier .perks{display:flex; flex-wrap:wrap; gap:8px 18px; margin:20px 0 26px}
.supplier .perks span{display:inline-flex; align-items:center; gap:8px; font-size:.92rem; color:rgba(255,255,255,.9)}
.supplier .perks .ic{width:17px;height:17px; color:#7FE3A4}
.supplier .art{display:grid; place-items:center}
.supplier .art img{width:min(220px,70%); animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- NEWSLETTER ---------- */
.news{text-align:center}
.news form{display:flex; gap:10px; max-width:480px; margin:22px auto 0}
.news input{flex:1; padding:14px 18px; border-radius:var(--pill); border:1.5px solid var(--line); font-size:1rem; font-family:var(--ff-body); box-shadow:var(--sh-sm)}
.news input:focus{outline:0; border-color:var(--blue)}

/* ---------- FOOTER ---------- */
.footer{background:linear-gradient(180deg,var(--ink),#070d1a); color:rgba(255,255,255,.72)}
.footer a:hover{color:var(--orange)}
.footer .grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; padding-block:clamp(44px,5vw,64px)}
.footer .logo{height:40px; margin-bottom:14px}
.footer .grid p{font-size:.92rem; max-width:300px}
.footer .pay{display:flex; flex-wrap:wrap; gap:7px; margin-top:16px}
.footer .pay span{font-size:.72rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); padding:5px 11px; border-radius:8px}
.footer h4{color:#fff; font-size:1rem; margin-bottom:14px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:10px; font-size:.92rem}
.footer .bottom{border-top:1px solid rgba(255,255,255,.1); padding-block:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.84rem; color:rgba(255,255,255,.55)}
.footer .bottom a{color:var(--orange); font-weight:600}

/* ---------- WHATSAPP ---------- */
.wa{position:fixed; right:18px; bottom:18px; z-index:90; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:0 10px 26px rgba(37,211,102,.5); transition:transform .25s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px}

/* ---------- REVEAL ---------- */
.ab-reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ab-reveal.is-visible{opacity:1; transform:none}
.ab-reveal[data-d="1"]{transition-delay:.08s}.ab-reveal[data-d="2"]{transition-delay:.16s}.ab-reveal[data-d="3"]{transition-delay:.24s}

/* =====================================================================
   RESPONSIVE
   =================================================================== */
@media(max-width:1080px){
  .cats{grid-template-columns:repeat(4,1fr)}
  .prods{grid-template-columns:repeat(3,1fr)}
  .cities{grid-template-columns:repeat(3,1fr)}
  .nav{display:none}
}
@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr; gap:54px}
  .hero-visual{max-width:460px}
  .savings .grid,.community .grid,.supplier .wrap{grid-template-columns:1fr; gap:30px}
  .trust,.steps{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .step:not(:last-child)::after{display:none}
  .route-line{grid-template-columns:1fr; gap:0; justify-items:center}
  .route-line .link{width:3px; height:34px; min-width:0}
  .route-line .link::before{width:100%; height:40%; background:linear-gradient(180deg,transparent,var(--orange),transparent); animation:flowv 2.4s linear infinite}
  @keyframes flowv{0%{transform:translateY(-120%)}100%{transform:translateY(320%)}}
  .cut .strike{top:31px}
  .btn-publish span,.locale,.topbar .l span:not(:first-child){display:none}
  .burger{display:grid}
}
@media(max-width:560px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .prods{grid-template-columns:repeat(2,1fr); gap:14px}
  .trust,.cities{grid-template-columns:1fr}
  .footer .grid{grid-template-columns:1fr 1fr}
  .searchbar button span{display:none}
  .searchbar button{padding:11px 14px}
  .searchbar input{font-size:.95rem}
  .news form{display:flex; flex-direction:column}
  .deal-card{position:relative; left:0; bottom:0; width:100%; margin-top:16px}
  .prod .name{min-height:0}
}


/* =====================================================================
   INTÉGRATION DE L'EN-TÊTE ASTRA (surcharge non destructive)
   Astra rend l'en-tête via ses propres templates ; on le brande au CSS
   pour qu'il adopte l'identité AfricBiz : fond blanc, typo de marque,
   trait orange animé sous les liens, panier orange, logo dimensionné.
   ===================================================================== */
.africbiz .site-header,
.africbiz .ast-primary-header-bar,
.africbiz .main-header-bar{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(11,20,36,.02);
}
.africbiz .site-logo-img img,
.africbiz .custom-logo-link img,
.africbiz .ast-site-identity img{ max-height:46px; width:auto; height:auto; }
.africbiz .main-header-menu .menu-link,
.africbiz .ast-builder-menu .menu-link,
.africbiz .main-navigation a,
.africbiz .ast-builder-menu-1 .menu-item > .menu-link{
  font-family:var(--ff-display); font-weight:600; letter-spacing:-.005em;
  color:var(--ink) !important; position:relative;
}
.africbiz .main-header-menu .menu-item > .menu-link::after,
.africbiz .ast-builder-menu .menu-item > .menu-link::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--grad-orange); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.africbiz .main-header-menu .menu-item:hover > .menu-link,
.africbiz .ast-builder-menu .menu-item:hover > .menu-link,
.africbiz .main-header-menu .current-menu-item > .menu-link,
.africbiz .ast-builder-menu .current-menu-item > .menu-link{ color:var(--orange) !important; }
.africbiz .main-header-menu .menu-item:hover > .menu-link::after,
.africbiz .ast-builder-menu .menu-item:hover > .menu-link::after,
.africbiz .main-header-menu .current-menu-item > .menu-link::after,
.africbiz .ast-builder-menu .current-menu-item > .menu-link::after{ transform:scaleX(1); }
.africbiz .ast-header-woo-cart .ast-cart-menu-wrap,
.africbiz .ast-header-account-wrap,
.africbiz .ast-header-search .astra-search-icon{ color:var(--ink); }
.africbiz .ast-header-woo-cart:hover .ast-cart-menu-wrap,
.africbiz .ast-header-account-wrap:hover{ color:var(--orange); }
.africbiz .ast-cart-menu-wrap .count,
.africbiz .ast-site-header-cart .ast-cart-menu-wrap .count{
  background:var(--orange) !important; border-color:var(--orange) !important; color:#fff !important;
}
.africbiz .ast-mobile-menu-buttons-minimal,
.africbiz .ast-button-wrap .menu-toggle{ color:var(--ink); }
.africbiz .menu-toggle:hover{ color:var(--orange); }

/* ---------- Bouton « Vendre » injecté dans le menu principal ---------- */
.africbiz .main-header-menu .ab-nav-cta > .menu-link,
.africbiz .ast-builder-menu .ab-nav-cta > .menu-link,
.africbiz .ab-nav-cta > a{
  background:var(--grad-orange) !important; color:#fff !important;
  border-radius:var(--pill); padding:9px 22px !important; box-shadow:var(--sh-orange);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.africbiz .ab-nav-cta > .menu-link::after,
.africbiz .ab-nav-cta > a::after{ display:none !important; }
.africbiz .ab-nav-cta:hover > .menu-link,
.africbiz .ab-nav-cta > a:hover{
  color:#fff !important; transform:translateY(-2px);
  box-shadow:0 18px 38px -12px rgba(249,115,22,.7);
}

/* ---------- Masquer le footer Astra par défaut (on a notre footer de marque) ---------- */
.africbiz .site-footer .ast-small-footer,
.africbiz .site-footer .ast-small-footer-wrap,
.africbiz .site-footer .site-primary-footer-wrap,
.africbiz .site-footer .site-below-footer-wrap,
.africbiz .site-footer .ast-footer-overlay{ display:none !important; }
.africbiz .site-footer{ border:0 !important; background:transparent !important; padding:0 !important; }
/* Notre footer de marque (.footer) reste visible. */
.africbiz .footer{ display:block !important; }

/* ---------- LOADER (écran de chargement) ---------- */
.ab-loader{position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background:var(--paper); transition:opacity .5s ease, visibility .5s ease}
.ab-loader.is-hidden{opacity:0; visibility:hidden}
.ab-loader .ab-loader-icon{width:84px; height:84px; animation:ab-spin 1.6s linear infinite}
@keyframes ab-spin{to{transform:rotate(360deg)}}

/* ---------- AJUSTEMENTS WORDPRESS / ASTRA ---------- */
/* Pleine largeur pour les modèles maison — mais PAS pour les pages
   WooCommerce (body.ab-woo), qui ont besoin du conteneur pour leurs marges. */
.africbiz:not(.ab-woo) #primary,
.africbiz:not(.ab-woo) .site-content .ast-container{max-width:none; padding:0; margin:0}
.africbiz .ab-home{overflow-x:hidden}
.africbiz:not(.ab-woo) .site-content{padding:0}
.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none}

/* Résultats de recherche live (rattachés à la barre de commande) */
.ab-search-results{position:absolute; left:0; right:0; top:calc(100% + 8px); background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:6px;
  z-index:90; max-height:60vh; overflow:auto}
.ab-search-results a{display:block; padding:10px 14px; border-radius:10px; color:var(--ink); font-size:.94rem}
.ab-search-results a:hover{background:var(--surface)}
@media(prefers-reduced-motion:reduce){
  .ab-loader .ab-loader-icon,.supplier .logo-spin{animation:none}
  *{scroll-behavior:auto}
}

/* ===================================================================
   WooCommerce — grille produits (page d'accueil & boutique)
   Aligne le rendu Woo par défaut sur le design AfricBiz (cartes .prod).
   =================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin:0; padding:0; list-style:none }
.woocommerce ul.products li.product{ width:auto!important; margin:0!important; float:none!important;
	background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:14px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); position:relative }
.woocommerce ul.products li.product:hover{ transform:translateY(-6px); box-shadow:var(--sh) }
.woocommerce ul.products li.product a img{ border-radius:var(--r-sm); margin-bottom:12px; aspect-ratio:1/1; object-fit:cover; width:100% }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family:var(--ff-display); font-weight:600; font-size:1rem; color:var(--ink); padding:0 2px; line-height:1.3 }
.woocommerce ul.products li.product .price{ color:var(--ink); font-family:var(--ff-display); font-weight:700; font-variant-numeric:tabular-nums; display:block; margin:6px 2px }
.woocommerce ul.products li.product .price del{ color:var(--muted); font-weight:500; font-size:.85em; margin-right:6px }
.woocommerce ul.products li.product .price ins{ text-decoration:none; color:var(--orange-deep) }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
	display:inline-flex; align-items:center; gap:7px; margin-top:8px; background:var(--grad-blue); color:#fff;
	border-radius:var(--pill); padding:9px 16px; font-weight:600; font-size:.9rem; box-shadow:var(--sh); border:0 }
.woocommerce ul.products li.product .button:hover{ background:var(--grad-orange); box-shadow:var(--sh-orange) }
.woocommerce span.onsale{ background:var(--grad-orange); color:#fff; border-radius:var(--pill);
	min-height:auto; min-width:auto; line-height:1; padding:6px 11px; font-weight:700; font-size:.78rem; top:18px; right:18px; margin:0 }
.woocommerce ul.products li.product .star-rating span::before{ color:var(--orange) }
@media(max-width:900px){ .woocommerce ul.products,.woocommerce-page ul.products{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:520px){ .woocommerce ul.products,.woocommerce-page ul.products{ grid-template-columns:1fr 1fr; gap:14px } }

/* =====================================================================
   MOTIF SIGNATURE — LE CYCLE AFRICBIZ (100% dérivé du logo)
   Les deux arcs du logo (bleu horaire + orange anti-horaire) deviennent
   un dispositif de marque récurrent : ornements rotatifs, badges cerclés,
   diagramme circulaire du cycle commercial Chine→Afrique.
   ===================================================================== */
.ab-cycle{display:block}
@keyframes ab-rotate{to{transform:rotate(360deg)}}
.ab-cycle--spin{animation:ab-rotate 24s linear infinite; transform-origin:50% 50%}
.ab-cycle--rev{animation:ab-rotate 30s linear infinite reverse; transform-origin:50% 50%}
.ab-cycle--ghost{opacity:.13}
.ab-cycle--ghost-d{opacity:.18}

/* Badge icône cerclé par le cycle (cartes valeurs / atouts) */
.cycle-badge{position:relative; width:92px; height:92px; display:grid; place-items:center; margin-inline:auto}
.cycle-badge .ab-cycle{position:absolute; inset:0; width:100%; height:100%}
.cycle-badge .ic{width:32px; height:32px; color:var(--blue-deep); position:relative; z-index:1; stroke-width:2}

/* =====================================================================
   HÉROS DE PAGE (toutes les pages internes)
   ===================================================================== */
.page-hero{position:relative; overflow:hidden; background:var(--grad-night); color:#fff;
  padding:clamp(74px,11vw,138px) 0 clamp(56px,8vw,96px); text-align:center}
.page-hero .wrap{position:relative; z-index:2; max-width:780px}
.page-hero .ring-orn{position:absolute; z-index:1; pointer-events:none}
.page-hero .ring-orn.a{top:-130px; right:-110px; width:440px; height:440px}
.page-hero .ring-orn.b{bottom:-180px; left:-130px; width:380px; height:380px}
.page-hero .crumbs{display:inline-flex; gap:8px; align-items:center; font-size:.84rem; color:rgba(255,255,255,.6); margin-bottom:18px}
.page-hero .crumbs a{color:rgba(255,255,255,.78)} .page-hero .crumbs a:hover{color:#fff}
.page-hero .crumbs .sep{opacity:.5}
.page-hero .eyebrow{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff}
.page-hero h1{font-family:var(--ff-display); font-weight:800; letter-spacing:-.025em; line-height:1.05; color:#fff;
  font-size:clamp(2.1rem,5.2vw,3.4rem); margin:16px 0 0}
.page-hero h1 .hl{background:var(--grad-orange); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.page-hero .lead{color:rgba(255,255,255,.82); font-size:clamp(1.02rem,1.7vw,1.18rem); margin:18px auto 0; max-width:620px}
.page-hero .ph-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px}

/* =====================================================================
   DIAGRAMME CIRCULAIRE — LE CYCLE (Comment ça marche / accueil)
   ===================================================================== */
.cycle-flow{position:relative; width:min(540px,90vw); aspect-ratio:1; margin:18px auto 6px}
.cycle-flow .track{position:absolute; inset:0; width:100%; height:100%}
.cycle-flow .hub{position:absolute; inset:0; margin:auto; width:148px; height:148px; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:var(--sh-lg); display:grid; place-content:center; text-align:center; gap:4px; z-index:3}
.cycle-flow .hub img{width:54px; height:54px; margin-inline:auto}
.cycle-flow .hub b{font-family:var(--ff-display); font-size:.92rem; color:var(--ink)}
.cycle-flow .hub span{font-size:.7rem; color:var(--muted)}
.cycle-flow .pt{position:absolute; z-index:4; width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-blue); color:#fff; box-shadow:0 12px 24px -8px rgba(46,144,250,.55); border:4px solid #fff}
.cycle-flow .pt .ic{width:30px; height:30px; color:#fff; stroke:#fff}
.cycle-flow .pt b{position:absolute; top:-12px; right:-12px; width:30px; height:30px; border-radius:50%;
  background:var(--grad-orange); color:#fff; font-family:var(--ff-display); font-size:.86rem; display:grid; place-items:center; box-shadow:var(--sh)}
.cycle-flow .pt.s1{top:-6px; left:50%; transform:translateX(-50%)}
.cycle-flow .pt.s2{right:-6px; top:50%; transform:translateY(-50%); background:var(--grad-orange); box-shadow:0 12px 24px -8px rgba(249,115,22,.55)}
.cycle-flow .pt.s3{bottom:-6px; left:50%; transform:translateX(-50%)}
.cycle-flow .pt.s4{left:-6px; top:50%; transform:translateY(-50%); background:var(--grad-orange); box-shadow:0 12px 24px -8px rgba(249,115,22,.55)}
/* Grille de détail des étapes sous le cercle */
.cycle-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:42px}
.cycle-step{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 20px; text-align:left; box-shadow:var(--sh-sm)}
.cycle-step .num{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--grad-blue); color:#fff; font-family:var(--ff-display); font-weight:700; margin-bottom:12px}
.cycle-step:nth-child(even) .num{background:var(--grad-orange)}
.cycle-step h3{font-family:var(--ff-display); font-size:1.05rem; margin-bottom:6px; color:var(--ink)}
.cycle-step p{font-size:.92rem; color:var(--muted)}
@media(max-width:720px){
  .cycle-flow{display:none}
  .cycle-steps{grid-template-columns:1fr; gap:14px}
}

/* =====================================================================
   COMPOSANTS DE PAGES INTERNES
   ===================================================================== */
/* Prose / contenu rédactionnel */
.ab-prose{max-width:760px; margin-inline:auto}
.ab-prose p{color:var(--muted); font-size:1.04rem; line-height:1.8; margin-bottom:18px}
.ab-prose h2{font-family:var(--ff-display); font-size:clamp(1.5rem,3vw,2rem); color:var(--ink); margin:34px 0 14px; letter-spacing:-.02em}
.ab-prose h3{font-family:var(--ff-display); font-size:1.2rem; color:var(--ink); margin:24px 0 10px}
.ab-prose strong{color:var(--ink)}
.ab-prose .lead-para{font-size:1.18rem; color:var(--ink); line-height:1.7; font-weight:500}

/* Grille de valeurs / atouts (badges cerclés) */
.values{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.value{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px 28px; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease)}
.value:hover{transform:translateY(-6px); box-shadow:var(--sh-lg)}
.value h3{font-family:var(--ff-display); font-size:1.18rem; margin:16px 0 8px; color:var(--ink)}
.value p{color:var(--muted); font-size:.96rem; line-height:1.6}
@media(max-width:760px){ .values{grid-template-columns:1fr} }

/* Bande de statistiques (cerclées) */
.stat-band{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center}
.stat-ring{position:relative; width:128px; height:128px; margin:0 auto 14px; display:grid; place-items:center}
.stat-ring .ab-cycle{position:absolute; inset:0; width:100%; height:100%}
.stat-ring strong{font-family:var(--ff-display); font-weight:800; font-size:1.9rem; color:var(--ink); font-variant-numeric:tabular-nums}
.stat-band .lbl{color:var(--muted); font-size:.95rem; max-width:200px; margin-inline:auto}
@media(max-width:680px){ .stat-band{grid-template-columns:1fr; gap:34px} }

/* Accordéon FAQ */
.faq-list{max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:12px}
.faq-cat{font-family:var(--ff-display); font-weight:700; color:var(--blue-deep); font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; margin:26px 0 6px; display:flex; align-items:center; gap:10px}
.faq-cat .ic{width:18px;height:18px; color:var(--orange)}
details.faq{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
details.faq[open]{border-color:rgba(46,144,250,.3); box-shadow:var(--sh)}
details.faq summary{list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--ff-display); font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:1.02rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:""; flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231565C0' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); background-size:14px; background-repeat:no-repeat; background-position:center; transition:transform .3s var(--ease)}
details.faq[open] summary::after{transform:rotate(135deg)}
details.faq .faq-body{padding:0 24px 22px; color:var(--muted); line-height:1.7; font-size:.98rem}

/* Formulaire de contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start}
.contact-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(26px,4vw,40px); box-shadow:var(--sh-sm)}
.ab-field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
.ab-field label{font-family:var(--ff-display); font-weight:600; font-size:.9rem; color:var(--ink)}
.ab-field input,.ab-field textarea,.ab-field select{font:inherit; padding:13px 16px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); transition:border-color .2s, box-shadow .2s}
.ab-field input:focus,.ab-field textarea:focus,.ab-field select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(46,144,250,.14)}
.ab-field textarea{resize:vertical; min-height:130px}
.contact-info{display:flex; flex-direction:column; gap:20px}
.contact-line{display:flex; gap:14px; align-items:flex-start}
.contact-line .ci{flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(46,144,250,.14),rgba(46,144,250,.04))}
.contact-line .ci .ic{width:22px; height:22px; color:var(--blue-deep)}
.contact-line b{font-family:var(--ff-display); color:var(--ink); display:block}
.contact-line span{color:var(--muted); font-size:.95rem}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:26px} }

/* Bande CTA universelle (sur fond sombre, ornée du cycle) */
.cta-band{position:relative; overflow:hidden; background:var(--grad-night); color:#fff; border-radius:var(--r-xl);
  padding:clamp(40px,6vw,68px); text-align:center}
.cta-band .ring-orn{position:absolute; z-index:1; opacity:.16; pointer-events:none}
.cta-band .ring-orn.a{top:-90px; right:-70px; width:300px; height:300px}
.cta-band .ring-orn.b{bottom:-120px; left:-80px; width:260px; height:260px}
.cta-band > *{position:relative; z-index:2}
.cta-band h2{font-family:var(--ff-display); color:#fff; font-size:clamp(1.6rem,3.4vw,2.3rem); letter-spacing:-.02em; margin-bottom:12px}
.cta-band p{color:rgba(255,255,255,.8); max-width:560px; margin:0 auto 26px}
.cta-band .ph-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* Étapes numérotées verticales (alternative générique) */
.vsteps{max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:8px}
.vstep{display:flex; gap:22px; padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg)}
.vstep .vn{flex:0 0 auto; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--ff-display); font-weight:700; font-size:1.2rem; background:var(--grad-blue)}
.vstep:nth-child(even) .vn{background:var(--grad-orange)}
.vstep h3{font-family:var(--ff-display); font-size:1.1rem; color:var(--ink); margin-bottom:5px}
.vstep p{color:var(--muted); font-size:.96rem; line-height:1.6}

/* Bandeau héros d'accueil — ornement cycle */
.hero{position:relative}
.hero .hero-cycle{position:absolute; z-index:0; top:-90px; right:-120px; width:520px; height:520px; opacity:.07; pointer-events:none}
.hero .wrap{position:relative; z-index:1}

/* =====================================================================
   DYNAMISME — DÉFILEMENTS INFINIS & MICRO-ANIMATIONS
   ===================================================================== */
/* Catégories en défilement infini (marquee plein écran, bords fondus) */
.cats-sec{overflow:hidden}
.cats-marquee{position:relative; margin-top:10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.cats-track{display:flex; width:max-content; padding:10px 0; will-change:transform; animation:ab-marquee 52s linear infinite}
.cats-track .cat{flex:0 0 208px; margin-right:18px}
.cats-marquee:hover .cats-track{animation-play-state:paused}
@keyframes ab-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Bandeau paiements/garanties (défile en sens inverse) */
.badge-marquee{position:relative; overflow:hidden; border-block:1px solid var(--line); background:linear-gradient(180deg,#fff,var(--surface));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.badge-track{display:flex; width:max-content; padding:15px 0; will-change:transform; animation:ab-marquee-rev 40s linear infinite}
.badge-marquee:hover .badge-track{animation-play-state:paused}
.badge-item{flex:0 0 auto; margin-right:14px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--ff-display); font-weight:600; font-size:.86rem; color:var(--ink);
  padding:9px 18px; border-radius:var(--pill); background:#fff; border:1px solid var(--line); box-shadow:var(--sh-sm)}
.badge-item .ic{width:18px; height:18px; color:var(--blue-deep)}
@keyframes ab-marquee-rev{from{transform:translateX(-50%)} to{transform:translateX(0)}}

/* Carte promo flottante (léger ballottement) */
@keyframes ab-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
.deal-card{animation:ab-bob 4.6s ease-in-out infinite}

/* Reflet qui balaie les boutons d'action principaux */
.btn--cta{position:relative; overflow:hidden}
.btn--cta::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-20deg); transition:left .65s var(--ease)}
.btn--cta:hover::after{left:150%}

/* Le « live » du héros respire un peu plus */
.pill-float{animation:ab-bob 5.2s ease-in-out infinite}

/* Respect de prefers-reduced-motion : tout s'immobilise proprement */
@media (prefers-reduced-motion: reduce){
  .cats-track{animation:none; flex-wrap:wrap; justify-content:center; width:100%; padding-inline:16px}
  .cats-track .cat{flex:0 0 160px; margin:8px}
  .cats-track .cat[aria-hidden="true"]{display:none}
  .badge-track{animation:none; flex-wrap:wrap; justify-content:center; width:100%; padding-inline:16px}
  .deal-card,.pill-float{animation:none}
  .btn--cta::after{display:none}
}

/* =====================================================================
   DENSITÉ MARKETPLACE — surpasser Afriova (top fournisseurs, communauté)
   ===================================================================== */
/* ----- Top fournisseurs ----- */
.suppliers{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.supplier-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 20px 20px; text-align:center;
  box-shadow:var(--sh-sm); transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.supplier-card::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-blue); border-radius:var(--r-lg) var(--r-lg) 0 0;
  transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease)}
.supplier-card:hover{transform:translateY(-8px); box-shadow:0 26px 50px -22px rgba(21,101,192,.4); border-color:rgba(46,144,250,.28)}
.supplier-card:hover::before{transform:scaleX(1); background:var(--grad-orange)}
.sup-rank{position:absolute; top:14px; left:14px; font-family:var(--ff-display); font-weight:800; font-size:.74rem; color:var(--blue-deep);
  background:rgba(46,144,250,.1); width:28px; height:28px; border-radius:50%; display:grid; place-items:center}
.sup-ava{width:74px; height:74px; border-radius:50%; margin:0 auto 10px; display:grid; place-items:center; color:#fff; position:relative;
  font-family:var(--ff-display); font-weight:800; font-size:1.5rem; background:var(--grad-blue); box-shadow:0 12px 26px -10px rgba(46,144,250,.6)}
.sup-ava.alt{background:var(--grad-orange); box-shadow:0 12px 26px -10px rgba(249,115,22,.6)}
.sup-ava .vchk{position:absolute; bottom:-2px; right:-2px; width:26px; height:26px; border-radius:50%; background:#1FB55E; border:3px solid #fff; display:grid; place-items:center}
.sup-ava .vchk svg{width:13px; height:13px; stroke:#fff; fill:none}
.sup-verif{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; color:#0F8A48;
  background:rgba(31,181,94,.12); padding:3px 11px; border-radius:var(--pill); margin-bottom:9px}
.sup-verif .ic{width:13px; height:13px; color:#1FB55E}
.sup-name{display:block; font-family:var(--ff-display); font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em}
.sup-cat{display:block; font-size:.78rem; color:var(--muted); margin-top:2px}
.sup-stars{display:flex; justify-content:center; gap:2px; margin:9px 0 13px}
.sup-stars .ic{width:15px; height:15px; color:#F59E0B; stroke:#F59E0B}
.sup-stats{display:flex; justify-content:center; gap:10px; padding-top:13px; border-top:1px solid var(--line)}
.sup-stats > div{flex:1}
.sup-stats strong{display:block; font-family:var(--ff-display); font-weight:800; font-size:1.15rem; color:var(--ink); font-variant-numeric:tabular-nums}
.sup-stats span{font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.sup-link{display:inline-flex; align-items:center; gap:6px; margin-top:15px; font-family:var(--ff-display); font-weight:600; font-size:.85rem; color:var(--blue-deep)}
.sup-link .ic{width:15px; height:15px; transition:transform .25s var(--ease)}
.supplier-card:hover .sup-link .ic{transform:translateX(3px)}

/* ----- Bandeau communauté WhatsApp ----- */
.wa-band{position:relative; overflow:hidden; background:var(--grad-night); text-align:center}
.wa-band .wrap{position:relative; z-index:1}
.wa-orn{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.1; pointer-events:none}
.wa-band .eyebrow{color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2)}
.wa-band h2{color:#fff; max-width:680px; margin:14px auto 10px}
.wa-band p{color:rgba(255,255,255,.78); max-width:560px; margin:0 auto 24px}
.wa-cta{background:#1FB55E; color:#fff; box-shadow:0 16px 34px -12px rgba(31,181,94,.6)}
.wa-cta:hover{background:#1AA152; box-shadow:0 20px 40px -12px rgba(31,181,94,.75); transform:translateY(-2px)}
.wa-cta svg{width:20px; height:20px; flex:0 0 auto}

@media (max-width:980px){ .suppliers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .suppliers{grid-template-columns:1fr} }

/* =====================================================================
   CONVERSION — plus commandés, urgence, preuve sociale, avis défilants
   ===================================================================== */
.pill-float b{font-weight:700}

/* ----- Héros : les plus commandés (remplace la carte unique) ----- */
.top-ordered{position:absolute; left:-22px; bottom:-30px; width:min(338px,88%); background:#fff; color:var(--ink);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:15px 16px; border:1px solid var(--line); animation:ab-bob 4.6s ease-in-out infinite}
.to-head{display:flex; align-items:center; gap:7px; font-family:var(--ff-display); font-weight:700; font-size:.86rem; color:var(--ink); margin-bottom:6px}
.to-head .ic{width:16px; height:16px; color:var(--orange)}
.to-head .live{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:.66rem; font-weight:600; color:#0F8A48; background:rgba(31,181,94,.12); padding:2px 9px; border-radius:var(--pill)}
.to-head .live .d{width:6px; height:6px; border-radius:50%; background:#1FB55E; animation:pulse 1.8s infinite}
.to-row{display:flex; align-items:center; gap:11px; padding:9px 0; border-top:1px solid var(--line)}
.to-row:first-of-type{border-top:0}
.to-rank{flex:0 0 auto; width:14px; font-family:var(--ff-display); font-weight:800; font-size:.76rem; color:var(--blue-deep); text-align:center}
.to-thumb{flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--grad-blue)}
.to-thumb.alt{background:var(--grad-orange)}
.to-thumb .ic{width:20px; height:20px; color:#fff; stroke:#fff}
.to-info{flex:1; min-width:0}
.to-name{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:var(--ff-display); font-weight:600; font-size:.85rem; line-height:1.2; overflow:hidden}
.to-sub{font-size:.7rem; color:var(--muted); display:flex; align-items:center; gap:3px}
.to-sub .ic{width:11px; height:11px; color:var(--blue)}
.to-price{flex:0 0 auto; text-align:right}
.to-now{font-family:var(--ff-display); font-weight:700; font-size:.92rem; color:var(--ink); display:block; font-variant-numeric:tabular-nums; line-height:1.1}
.to-now small{font-size:.6rem; color:var(--muted); font-weight:600}
.to-save{display:inline-block; margin-top:2px; font-size:.64rem; font-weight:700; color:#fff; background:var(--grad-orange); padding:1px 6px; border-radius:6px}
.to-foot{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:9px; padding-top:10px; border-top:1px solid var(--line); font-size:.74rem; color:var(--muted)}
.to-foot .ic{width:14px; height:14px; color:#1FB55E}
.to-foot b{color:var(--ink); font-weight:600}

/* ----- Compteur d'urgence ----- */
.urgency{display:inline-flex; align-items:center; gap:11px; margin:6px auto 0; padding:9px 18px; border-radius:var(--pill);
  background:linear-gradient(135deg,rgba(249,115,22,.13),rgba(249,115,22,.04)); border:1px solid rgba(249,115,22,.28);
  color:var(--orange-deep); font-family:var(--ff-display); font-weight:600; font-size:.9rem}
.urgency .ic{width:18px; height:18px; color:var(--orange)}
.urgency .cd{display:inline-flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums}
.urgency .cd b{background:var(--ink); color:#fff; padding:3px 7px; border-radius:7px; font-weight:800; min-width:30px; text-align:center; font-size:.92rem}
.urgency .cd i{font-style:normal; color:var(--orange-deep); font-weight:800}

/* ----- Notification « vient de commander » ----- */
.ab-toast{position:fixed; left:20px; bottom:20px; z-index:120; display:flex; align-items:flex-start; gap:11px; width:min(330px,calc(100vw - 40px));
  padding:12px 12px 12px 11px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-lg);
  transform:translateY(150%); opacity:0; transition:transform .55s var(--ease),opacity .45s var(--ease); pointer-events:none}
.ab-toast.show{transform:translateY(0); opacity:1; pointer-events:auto}
.ab-toast .t-ic{flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--grad-blue); box-shadow:0 10px 22px -8px rgba(46,144,250,.55)}
.ab-toast .t-ic svg{width:21px; height:21px}
.ab-toast .t-body{font-size:.82rem; line-height:1.4; color:var(--ink); flex:1; min-width:0}
.ab-toast .t-body b{font-weight:700}
.ab-toast .t-act{display:block}
.ab-toast .t-meta{display:flex; align-items:center; gap:5px; font-size:.7rem; color:var(--muted); margin-top:3px}
.ab-toast .t-meta::before{content:""; width:6px; height:6px; border-radius:50%; background:#1FB55E}
.ab-toast .t-x{flex:0 0 auto; width:22px; height:22px; border:0; background:transparent; color:var(--muted); cursor:pointer; border-radius:7px; display:grid; place-items:center; font-size:1.1rem; line-height:1}
.ab-toast .t-x:hover{background:var(--surface); color:var(--ink)}

/* ----- Avis clients en défilement infini ----- */
.quotes-sec{overflow:hidden}
.quotes-marquee{position:relative; overflow:hidden; margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.quotes-track{display:flex; width:max-content; padding:10px 0; will-change:transform; animation:ab-marquee 64s linear infinite}
.quotes-marquee:hover .quotes-track{animation-play-state:paused}
.quotes-track .quote{flex:0 0 372px; margin-right:20px; white-space:normal}

/* ----- « Acheter en toute confiance » relooké ----- */
.trust-item{position:relative; gap:15px; padding:30px 24px 26px; background:linear-gradient(180deg,#fff,#fbfdff); overflow:hidden}
.trust-item::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-blue); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease)}
.trust-item:hover{transform:translateY(-8px); box-shadow:0 26px 50px -22px rgba(21,101,192,.4); border-color:rgba(46,144,250,.28)}
.trust-item:hover::before{transform:scaleX(1); background:var(--grad-orange)}
.trust-ic{width:60px; height:60px; border-radius:18px; color:#fff; background:var(--grad-blue);
  box-shadow:0 14px 26px -10px rgba(46,144,250,.55), inset 0 1px 0 rgba(255,255,255,.25)}
.trust-ic .ic{width:28px; height:28px; color:#fff; stroke:#fff}
.trust-item.alt .trust-ic{background:var(--grad-orange); box-shadow:0 14px 26px -10px rgba(249,115,22,.55), inset 0 1px 0 rgba(255,255,255,.25)}
.trust-item h3{font-size:1.06rem; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.trust-badge{font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff; background:var(--grad-orange); padding:3px 9px; border-radius:var(--pill)}

/* ----- « Couverture » relookée (compteurs + flèche) ----- */
.cities{grid-template-columns:repeat(3,1fr); gap:16px}
.city{position:relative; gap:14px; padding:18px 20px; border-radius:var(--r-lg); overflow:hidden}
.city::before{content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--grad-blue); transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease)}
.city:hover{transform:translateY(-5px); box-shadow:0 22px 44px -20px rgba(21,101,192,.4); border-color:rgba(46,144,250,.28)}
.city:hover::before{transform:scaleY(1); background:var(--grad-orange)}
.city .ci{width:48px; height:48px; border-radius:14px; box-shadow:0 10px 22px -8px rgba(46,144,250,.5)}
.city .ci .ic{width:22px; height:22px; color:#fff; stroke:#fff}
.city .c-body{flex:1; min-width:0}
.city b{font-family:var(--ff-display); font-weight:700; font-size:.98rem; display:block; color:var(--ink)}
.city .c-sub{font-size:.74rem; color:var(--muted)}
.city .c-count{font-size:.74rem; font-weight:600; color:var(--blue-deep)}
.city .c-arrow{flex:0 0 auto; color:var(--muted); transition:transform .25s var(--ease),color .25s var(--ease)}
.city .c-arrow .ic{width:18px; height:18px}
.city:hover .c-arrow{color:var(--orange); transform:translateX(3px)}

@media (max-width:880px){ .top-ordered{position:relative; left:0; bottom:0; width:100%; margin-top:16px; animation:none} }
@media (max-width:860px){ .cities{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .cities{grid-template-columns:1fr} .ab-toast{left:12px; bottom:12px} }

@media (prefers-reduced-motion: reduce){
  .quotes-track{animation:none; flex-wrap:wrap; justify-content:center; width:100%; padding-inline:16px}
  .quotes-track .quote{flex:0 0 320px; margin:8px}
  .quotes-track .quote[aria-hidden="true"]{display:none}
  .top-ordered{animation:none}
  .ab-toast{transition:opacity .3s linear}
}

/* =====================================================================
   CORRECTIFS SITE RÉEL — header, sticky, panier, pleine largeur, blog
   ===================================================================== */

/* ---- Bouton « Vendre » : pill compacte (jamais un cercle géant) ---- */
.africbiz .site-header [class*="ast-custom-button"],
.africbiz .site-header .ast-header-button .menu-link,
.africbiz .main-header-bar [class*="ast-custom-button"],
.africbiz .ab-nav-cta > a,
.africbiz .ab-nav-cta > .menu-link{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:auto !important; max-width:none !important; min-width:0 !important;
  height:auto !important; min-height:0 !important; aspect-ratio:auto !important;
  margin:0 !important; padding:10px 22px !important;
  border-radius:var(--pill) !important; border:0 !important;
  font-family:var(--ff-display) !important; font-weight:600 !important; font-size:.92rem !important;
  line-height:1.2 !important; white-space:nowrap !important; text-align:center !important;
  background:var(--grad-orange) !important; color:#fff !important;
  box-shadow:0 12px 26px -10px rgba(249,115,22,.6) !important; transform:none !important;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease) !important;
}
.africbiz .site-header [class*="ast-custom-button"]:hover,
.africbiz .ab-nav-cta > a:hover{ transform:translateY(-2px) !important; color:#fff !important; }
.africbiz .site-header .ast-builder-button-wrap,
.africbiz .site-header .ast-header-button,
.africbiz .site-header .ast-custom-button-wrap{ width:auto !important; height:auto !important; aspect-ratio:auto !important; overflow:visible !important; }

/* ---- En-tête collant (menu) — PC + mobile ---- */
.africbiz .site-header { position: sticky !important; top: 0; z-index: 1100; }
.africbiz .site-header .main-header-bar,
.africbiz .site-header .ast-primary-header-bar {
  box-shadow: 0 2px 20px rgba(11,20,36,.07) !important;
}
/* Annuler tout row-wrap que le HFB Astra pourrait forcer */
.africbiz .ast-primary-header-bar .ast-flex,
.africbiz .ast-primary-header-bar .ast-builder-grid-row,
.africbiz .ast-primary-header-bar .ast-grid-right-section,
.africbiz .ast-primary-header-bar .ast-grid-left-section,
.africbiz .ast-primary-header-bar .ast-grid-center-section {
  align-items: center !important;
  min-height: 70px !important;
}
/* Forcer le menu à ne pas se replier sur deux lignes même sur HFB */
.africbiz [data-section="section-hb-header-main"] .ast-nav-menu,
.africbiz .ast-primary-header-bar .ast-nav-menu {
  flex-wrap: nowrap !important;
  align-items: center !important;
  height: 70px !important;
}


/* ---- Pleine largeur : supprime le vide blanc latéral (Astra container) ---- */
.africbiz.ab-tpl #content > .ast-container,
.africbiz.ab-tpl .site-content > .ast-container,
.africbiz.ab-tpl #primary,
.africbiz.ab-tpl .ast-container{
  max-width:none !important; width:100% !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-left:0 !important; margin-right:0 !important;
}
.africbiz.ab-tpl #primary{ margin:0 !important; }
.africbiz.ab-tpl #secondary,
.africbiz.ab-tpl .ast-separate-container .ast-sidebar-section{ display:none !important; }
.africbiz.ab-tpl .ast-separate-container .ast-article-single,
.africbiz.ab-tpl .ast-separate-container,
.africbiz.ab-tpl .entry-content,
.africbiz.ab-tpl article.post,
.africbiz.ab-tpl .ast-article-post,
.africbiz.ab-tpl .ast-article-single{
  background:transparent !important; box-shadow:none !important; margin:0 !important; padding:0 !important; border:0 !important;
}
.africbiz.ab-tpl .ab-home{ width:100%; max-width:100%; overflow-x:hidden; }

/* ---- WPForms : habillage AfricBiz ---- */
.africbiz .ab-wpforms .wpforms-form{ margin:0; }
.africbiz .ab-wpforms .wpforms-field{ padding:0 0 16px; }
.africbiz .ab-wpforms .wpforms-field-label,
.africbiz .ab-wpforms label.wpforms-field-label{ font-family:var(--ff-display); font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:7px; display:block; }
.africbiz .ab-wpforms input[type=text],
.africbiz .ab-wpforms input[type=email],
.africbiz .ab-wpforms input[type=tel],
.africbiz .ab-wpforms input[type=url],
.africbiz .ab-wpforms input[type=number],
.africbiz .ab-wpforms select,
.africbiz .ab-wpforms textarea{
  width:100%; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:var(--r-sm); padding:12px 14px; font:inherit; font-size:.95rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.africbiz .ab-wpforms input:focus,
.africbiz .ab-wpforms select:focus,
.africbiz .ab-wpforms textarea:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(46,144,250,.14); }
.africbiz .ab-wpforms textarea{ min-height:140px; resize:vertical; }
.africbiz .ab-wpforms .wpforms-field-description{ color:var(--muted); font-size:.8rem; margin-top:6px; }
.africbiz .ab-wpforms .wpforms-required-label{ color:var(--orange-deep); }
.africbiz .ab-wpforms .wpforms-submit,
.africbiz .ab-wpforms button[type=submit]{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--grad-orange) !important; color:#fff !important; border:0 !important;
  border-radius:var(--pill) !important; padding:13px 26px !important;
  font-family:var(--ff-display); font-weight:600; font-size:.95rem;
  box-shadow:var(--sh-orange); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.africbiz .ab-wpforms .wpforms-submit:hover{ transform:translateY(-2px); }

/* ---- Contact : carte + aside + promo ---- */
.africbiz .contact-grid{ grid-template-columns:1.25fr .85fr; gap:26px; }
.africbiz .cc-head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.africbiz .cc-head .cc-ic{ flex:0 0 auto; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:#fff; background:var(--grad-blue); box-shadow:0 12px 24px -10px rgba(46,144,250,.5); }
.africbiz .cc-head .cc-ic .ic{ width:24px; height:24px; color:#fff; stroke:#fff; }
.africbiz .cc-head h2{ font-size:1.3rem; }
.africbiz .cc-head p{ color:var(--muted); font-size:.9rem; margin-top:2px; }
.africbiz .contact-aside{ display:flex; flex-direction:column; gap:18px; }
.africbiz .contact-info{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-sm); }
.africbiz .contact-line a{ color:var(--blue-deep); }
.africbiz .contact-line a:hover{ color:var(--orange-deep); }
.africbiz .contact-promo{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--grad-night); color:#fff; padding:26px; }
.africbiz .contact-promo .ring-orn{ position:absolute; top:-60px; right:-60px; width:200px !important; height:200px !important; z-index:0; opacity:.2; }
.africbiz .contact-promo .cp-body{ position:relative; z-index:1; }
.africbiz .contact-promo strong{ font-family:var(--ff-display); font-size:1.05rem; display:block; }
.africbiz .contact-promo p{ color:rgba(255,255,255,.8); font-size:.88rem; margin:8px 0 16px; }
.africbiz .btn--wa{ display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff; padding:11px 20px; border-radius:var(--pill); font-family:var(--ff-display); font-weight:600; font-size:.9rem; box-shadow:0 12px 26px -10px rgba(37,211,102,.6); transition:transform .2s var(--ease); }
.africbiz .btn--wa:hover{ transform:translateY(-2px); color:#fff; }

/* ---- Blog : grille + cartes ---- */
.africbiz .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.africbiz .post-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease); }
.africbiz .post-card:hover{ transform:translateY(-7px); box-shadow:0 28px 54px -24px rgba(21,101,192,.4); border-color:rgba(46,144,250,.25); }
.africbiz .pc-media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--grad-night); }
.africbiz .pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.africbiz .post-card:hover .pc-media img{ transform:scale(1.05); }
.africbiz .pc-media .ab-cycle{ position:absolute; inset:0; margin:auto; width:72%; height:auto; opacity:.22; }
.africbiz .pc-media.alt{ background:linear-gradient(135deg,#10243f,#0b1424); }
.africbiz .pc-cat{ position:absolute; left:14px; top:14px; z-index:2; background:rgba(255,255,255,.95); color:var(--blue-deep); font-family:var(--ff-display); font-weight:700; font-size:.72rem; padding:5px 12px; border-radius:var(--pill); box-shadow:var(--sh-sm); }
.africbiz .pc-body{ display:flex; flex-direction:column; gap:10px; padding:22px; flex:1; }
.africbiz .pc-meta{ display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); }
.africbiz .pc-meta .ic{ width:13px; height:13px; color:var(--blue); }
.africbiz .pc-title{ font-size:1.16rem; line-height:1.25; }
.africbiz .pc-title a{ color:var(--ink); background-image:linear-gradient(var(--orange),var(--orange)); background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s var(--ease); }
.africbiz .post-card:hover .pc-title a{ background-size:100% 2px; }
.africbiz .pc-excerpt{ color:var(--muted); font-size:.92rem; line-height:1.55; flex:1; }
.africbiz .pc-more{ display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-family:var(--ff-display); font-weight:600; font-size:.88rem; color:var(--orange-deep); }
.africbiz .pc-more .ic{ width:16px; height:16px; transition:transform .25s var(--ease); }
.africbiz .post-card:hover .pc-more .ic{ transform:translateX(4px); }
@media (max-width:960px){ .africbiz .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .africbiz .blog-grid{ grid-template-columns:1fr; } .africbiz .contact-grid{ grid-template-columns:1fr; } }

/* ---- Pagination ---- */
.africbiz .ab-pagination{ margin-top:42px; }
.africbiz .ab-pagination .nav-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.africbiz .ab-pagination .page-numbers{ min-width:44px; height:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:var(--ff-display); font-weight:600; font-size:.9rem; transition:.2s var(--ease); }
.africbiz .ab-pagination .page-numbers:hover{ border-color:var(--blue); color:var(--blue-deep); }
.africbiz .ab-pagination .page-numbers.current{ background:var(--grad-orange); color:#fff; border-color:transparent; box-shadow:var(--sh-orange); }
.africbiz .ab-empty{ text-align:center; color:var(--muted); padding:46px 0; }

/* ---- Article unique ---- */
.africbiz .page-hero--article .wrap{ max-width:880px; }
.africbiz .page-hero--article h1{ font-size:clamp(1.9rem,4.4vw,3rem); }
.africbiz .article-meta{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; color:rgba(255,255,255,.72); font-size:.88rem; }
.africbiz .article-meta .ic{ width:15px; height:15px; vertical-align:-2px; }
.africbiz .article-meta .dot{ opacity:.5; }
.africbiz .article{ max-width:760px; margin-inline:auto; }
.africbiz .article-cover{ border-radius:var(--r-lg); overflow:hidden; margin-bottom:30px; box-shadow:var(--sh-lg); }
.africbiz .article-cover img{ width:100%; height:auto; display:block; }
.africbiz .article .ab-prose{ font-size:1.06rem; line-height:1.78; color:var(--ink-70); }
.africbiz .article-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.africbiz .article-tags a{ background:var(--surface); color:var(--blue-deep); font-size:.8rem; font-weight:600; padding:5px 12px; border-radius:var(--pill); }
.africbiz .article-tags a:hover{ background:rgba(46,144,250,.12); }
.africbiz .article-foot{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:36px; padding-top:24px; border-top:1px solid var(--line); }
.africbiz .af-back{ display:inline-flex; align-items:center; gap:7px; font-family:var(--ff-display); font-weight:600; color:var(--ink); }
.africbiz .af-back .ic{ width:16px; height:16px; transform:rotate(180deg); color:var(--orange); }
.africbiz .af-back:hover{ color:var(--orange-deep); }
.africbiz .af-share{ display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff; padding:9px 18px; border-radius:var(--pill); font-family:var(--ff-display); font-weight:600; font-size:.88rem; box-shadow:0 12px 26px -12px rgba(37,211,102,.6); transition:transform .2s var(--ease); }
.africbiz .af-share:hover{ transform:translateY(-2px); color:#fff; }

/* ---- Prose : listes & liens (pages de contenu / légal) ---- */
.africbiz .ab-prose ul,
.africbiz .ab-prose ol{ margin:0 0 18px; padding-left:22px; }
.africbiz .ab-prose li{ color:var(--muted); font-size:1.04rem; line-height:1.7; margin:6px 0; }
.africbiz .ab-prose li::marker{ color:var(--orange); }
.africbiz .ab-prose a{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:2px; }
.africbiz .ab-prose a:hover{ color:var(--orange-deep); }
.africbiz .ab-page{ }

/* ---- Sticky fiable (mobile inclus) : overflow-x:clip n'crée pas de conteneur de défilement ---- */
.africbiz body,
.africbiz #page,
.africbiz .site{ overflow-x:clip !important; }
.africbiz .site-header{ position:sticky !important; top:0; z-index:99; }
@media (max-width:921px){
  .africbiz .site-header,
  .africbiz .ast-mobile-header-wrap{ position:sticky !important; top:0; z-index:99; }
}

/* ---- Chips de catégories : défilement infini ---- */
.cmd .chips-marquee{position:relative; margin-top:12px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.cmd .chips-track{display:flex; gap:8px; width:max-content; will-change:transform; animation:ab-marquee 42s linear infinite}
.cmd .chips-marquee:hover .chips-track{animation-play-state:paused}
.cmd .chips-track .chip{flex:0 0 auto}
@media (prefers-reduced-motion:reduce){
  .cmd .chips-track{animation:none; flex-wrap:wrap; justify-content:center; width:100%}
  .cmd .chips-track .chip[aria-hidden="true"]{display:none}
}

/* ---- Fournisseur affiché sur les produits ---- */
.africbiz .ab-supplier-card{display:flex; align-items:center; gap:14px; margin:18px 0; padding:14px 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm)}
.africbiz .ab-supplier-card .abs-photo{flex:0 0 auto; box-shadow:0 6px 16px -8px rgba(11,20,36,.4)}
.africbiz .ab-supplier-card .abs-meta{display:flex; flex-direction:column; line-height:1.3}
.africbiz .ab-supplier-card .abs-label{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.africbiz .ab-supplier-card .abs-meta strong{font-family:var(--ff-display); font-size:1.02rem; color:var(--ink)}
.africbiz .ab-supplier-card .abs-city{font-size:.82rem; color:var(--muted)}
.africbiz .ab-supplier-card .abs-verif{display:inline-flex; align-items:center; gap:5px; margin-top:4px; width:fit-content;
  font-size:.72rem; font-weight:700; color:#15803d; background:#dcfce7; padding:3px 9px; border-radius:var(--pill)}
.africbiz .ab-supplier-card .abs-verif::before{content:"✔"}

.africbiz .ab-supplier-chip{display:inline-flex; align-items:center; gap:7px; margin:6px 0 2px;
  font-size:.8rem; color:var(--ink-70)}
.africbiz .ab-supplier-chip .abs-photo{flex:0 0 auto; border:1px solid var(--line)}
.africbiz .ab-supplier-chip span{font-weight:600; font-family:var(--ff-display)}

/* Avatar à initiale (repli sans photo) */
.africbiz .abs-initials{display:inline-grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue-deep)); font-family:var(--ff-display); font-weight:700; line-height:1}

/* ---- Portail fournisseur (front-end) ---- */
.africbiz .fp-login{max-width:440px; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:32px; box-shadow:var(--sh-sm)}
.africbiz .fp-login h2{font-size:1.3rem; margin-bottom:18px; text-align:center}
.africbiz .fp-login #loginform p{margin:0 0 14px}
.africbiz .fp-login #loginform label{display:block; font-family:var(--ff-display); font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--ink)}
.africbiz .fp-login #loginform input[type=text],
.africbiz .fp-login #loginform input[type=password]{width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; font-size:.95rem}
.africbiz .fp-login #loginform input:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(46,144,250,.14)}
.africbiz .fp-login .login-remember{font-size:.85rem; color:var(--muted)}
.africbiz .fp-login #wp-submit{width:100%; background:var(--grad-orange); color:#fff; border:0; border-radius:var(--pill); padding:13px; font-family:var(--ff-display); font-weight:700; font-size:.95rem; cursor:pointer; box-shadow:var(--sh-orange)}
.africbiz .fp-help{font-size:.85rem; color:var(--muted); text-align:center; margin-top:12px}
.africbiz .fp-help a{color:var(--blue-deep)} .africbiz .fp-help a:hover{color:var(--orange-deep)}

.africbiz .fp-notice{border-radius:var(--r); padding:14px 18px; margin-bottom:20px; font-weight:600; font-size:.92rem}
.africbiz .fp-notice.ok{background:#dcfce7; color:#15803d; border:1px solid #bbf7d0}
.africbiz .fp-notice.err{background:#fee2e2; color:#b91c1c; border:1px solid #fecaca}

.africbiz .fp-welcome{display:flex; align-items:center; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 20px; box-shadow:var(--sh-sm); margin-bottom:24px}
.africbiz .fp-welcome .abs-photo{flex:0 0 auto}
.africbiz .fp-welcome-meta{display:flex; flex-direction:column; line-height:1.3; flex:1}
.africbiz .fp-welcome-meta strong{font-family:var(--ff-display); font-size:1.1rem}
.africbiz .fp-welcome-meta span{font-size:.84rem; color:var(--muted)}
.africbiz .fp-logout{font-family:var(--ff-display); font-weight:600; font-size:.86rem; color:var(--ink-70); border:1px solid var(--line); padding:8px 16px; border-radius:var(--pill)}
.africbiz .fp-logout:hover{color:var(--orange-deep); border-color:rgba(249,115,22,.4)}

.africbiz .fp-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:24px; align-items:start}
@media(max-width:860px){ .africbiz .fp-grid{grid-template-columns:1fr} }
.africbiz .fp-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:28px; box-shadow:var(--sh-sm)}
.africbiz .fp-card h2{font-size:1.25rem}
.africbiz .fp-card-sub{color:var(--muted); font-size:.9rem; margin:4px 0 18px}
.africbiz .fp-form .fp-field{margin-bottom:16px}
.africbiz .fp-form label{display:block; font-family:var(--ff-display); font-weight:600; font-size:.88rem; margin-bottom:6px; color:var(--ink)}
.africbiz .fp-form input[type=text],.africbiz .fp-form input[type=tel],.africbiz .fp-form input[type=number],.africbiz .fp-form input[type=file],.africbiz .fp-form select,.africbiz .fp-form textarea{width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; font:inherit; font-size:.95rem; background:#fff}
.africbiz .fp-form input:focus,.africbiz .fp-form select:focus,.africbiz .fp-form textarea:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 4px rgba(46,144,250,.14)}
.africbiz .fp-form textarea{min-height:120px; resize:vertical}
.africbiz .fp-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:480px){ .africbiz .fp-row{grid-template-columns:1fr} }
.africbiz .fp-photo-row{display:flex; align-items:center; gap:16px; margin-bottom:16px}
.africbiz .fp-form .btn--cta.secondary{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none}
.africbiz .fp-form .btn--cta.secondary:hover{border-color:rgba(249,115,22,.4); color:var(--orange-deep)}

.africbiz .fp-count{color:var(--muted); font-weight:500; font-size:.95rem}
.africbiz .fp-list{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.africbiz .fp-prod{display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.africbiz .fp-prod-thumb{flex:0 0 auto; width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--grad-night); display:grid; place-items:center}
.africbiz .fp-prod-thumb img{width:100%; height:100%; object-fit:cover}
.africbiz .fp-prod-thumb .ab-cycle{width:70%; opacity:.4}
.africbiz .fp-prod-meta{flex:1; display:flex; flex-direction:column}
.africbiz .fp-prod-meta strong{font-family:var(--ff-display); font-size:.98rem}
.africbiz .fp-prod-meta span{font-size:.85rem; color:var(--muted)}
.africbiz .fp-badge{font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:var(--pill)}
.africbiz .fp-badge.ok{background:#dcfce7; color:#15803d}
.africbiz .fp-badge.wait{background:#fef3c7; color:#b45309}
.africbiz .fp-badge.draft{background:#e2e8f0; color:#475569}

/* ---- Devenir fournisseur : accès connexion ---- */
.africbiz .btn--light{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.4); box-shadow:none}
.africbiz .btn--light:hover{background:rgba(255,255,255,.22); color:#fff; transform:translateY(-2px)}
.africbiz .btn--outline{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:none}
.africbiz .btn--outline:hover{border-color:rgba(249,115,22,.45); color:var(--orange-deep)}
.africbiz .dv-login{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; max-width:720px; margin:18px auto 0; padding-top:22px; border-top:1px solid var(--line); text-align:center}
.africbiz .dv-login span{color:var(--muted); font-size:.92rem; font-weight:500}

/* ---- Supprime la flèche « retour en haut » d'Astra (gêne le bouton WhatsApp) ---- */
.africbiz #ast-scroll-top,
.africbiz .ast-scroll-to-top-wrapper,
.africbiz .ast-scroll-top-icon,
#ast-scroll-top{ display:none !important; }

/* =============================================================
   COUCHE v3 — CORRECTIONS CLIENT B2B
   Sélecteur de langue, bandeaux confiance, sourcing 48 h,
   conteneurs (achat groupé), suivi logistique, conditions
   fournisseurs, équipe, notices & formulaires natifs.
   ============================================================= */

/* ---- Sélecteur de langue (topbar) — correction n°5 ---- */
.ab-lang{ position:relative; display:inline-flex; }
.ab-lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:#fff; font:inherit; font-size:.8rem; padding:3px 10px; border-radius:999px; cursor:pointer;
}
.ab-lang-btn:hover{ background:rgba(255,255,255,.16); }
.ab-lang-btn .car{ font-size:.6rem; opacity:.7; }
.ab-lang-menu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:1200;
  min-width:150px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 14px 34px rgba(11,20,36,.18);
  padding:6px; margin:0; list-style:none;
}
.ab-lang-menu[hidden]{ display:none; }
.ab-lang-menu a{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-radius:8px; color:var(--ink); font-size:.86rem; text-decoration:none;
}
.ab-lang-menu a:hover{ background:var(--surface); color:var(--blue-deep); }
.ab-lang-menu .flag{ font-size:1rem; line-height:1; }
/* Masque la barre GTranslate par défaut si le widget natif est utilisé ailleurs. */
.topbar .gtranslate_wrapper select{ border-radius:999px; font-size:.8rem; padding:2px 8px; }

/* ---- Bandeau de confiance SSL / séquestre — correction n°4 ---- */
.ab-trust-strip{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ab-trust-strip .tb{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.76rem; font-weight:600; letter-spacing:.01em;
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#cfd8e6;
}
.ab-trust-strip .tb .dot{ width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.22); }
.ab-trust-strip .tb .ic{ width:14px; height:14px; color:var(--orange); }
/* Variante sur fond clair (checkout / panier). */
.ab-trust-strip--light .tb{ background:var(--surface); border-color:var(--line); color:var(--muted); }
.ab-legal-line{ font-size:.76rem; color:#8ea0b8; line-height:1.5; }
.ab-legal-line b{ color:#cfd8e6; }
.ab-pay-trust{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; margin:14px 0; font-size:.88rem; color:var(--muted);
}
.ab-pay-trust h4{ display:flex; align-items:center; gap:8px; margin:0; font-size:.95rem; color:var(--ink); }
.ab-pay-trust .ic{ width:20px; height:20px; flex:none; color:var(--blue-deep); margin-top:2px; }
.ab-pay-trust b{ color:var(--ink); }
.ab-pay-trust ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; width:100%; }
.ab-pay-trust ul li{
  position:relative; padding-left:22px; line-height:1.5;
  overflow-wrap:break-word; word-break:normal;
}
.ab-pay-trust ul li::before{
  content:""; position:absolute; left:0; top:.5em; width:8px; height:8px;
  border-radius:50%; background:var(--blue-deep); opacity:.55;
}

/* ---- Badge SLA 48 h — correction n°8 ---- */
.sla-badge{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  background:linear-gradient(120deg, rgba(249,115,22,.14), rgba(46,144,250,.12));
  border:1px solid rgba(249,115,22,.35); color:var(--ink);
  font-size:.9rem; padding:9px 16px; border-radius:999px;
}
.page-hero .sla-badge{ background:rgba(255,255,255,.08); border-color:rgba(249,115,22,.5); color:#fff; }
.sla-badge .ic{ width:17px; height:17px; color:var(--orange); }

/* ---- Notices (succès / erreur / info) ---- */
.ab-notice{
  display:flex; gap:12px; align-items:flex-start;
  border-radius:16px; padding:16px 18px; margin:18px auto 0;
  border:1px solid; font-size:.94rem;
}
.ab-notice > .ic{ width:20px; height:20px; flex:none; margin-top:2px; }
.ab-notice b{ display:block; margin-bottom:3px; }
.ab-notice p{ margin:0; color:inherit; opacity:.9; }
.ab-notice.ok{  background:#f0fdf4; border-color:#bbf7d0; color:#14532d; }
.ab-notice.ok  .ic{ color:#16a34a; }
.ab-notice.err{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d; }
.ab-notice.err .ic{ color:#dc2626; }
.ab-notice.info{ background:#eff6ff; border-color:#bfdbfe; color:#1e3a8a; }
.ab-notice.info .ic{ color:var(--blue); }

/* ---- Formulaires natifs (sourcing & réservation) ---- */
.ab-form label{ display:block; font-weight:600; font-size:.86rem; margin:14px 0 5px; color:var(--ink); }
.ab-form input[type="text"], .ab-form input[type="tel"], .ab-form input[type="email"],
.ab-form select, .ab-form textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:11px;
  background:#fff; font:inherit; font-size:.94rem; color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
}
.ab-form input:focus, .ab-form select:focus, .ab-form textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,144,250,.16);
}
.ab-form textarea{ resize:vertical; }
.ab-form .btn{ margin-top:18px; width:100%; justify-content:center; }
.ab-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.ab-form-note{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:.78rem; color:var(--muted); margin:12px 0 0; text-align:center;
}
.ab-form-note .ic{ width:13px; height:13px; flex:none; }
.ab-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.src-form-title{ display:flex; align-items:center; gap:9px; margin:0 0 4px; font-size:1.2rem; }
.src-form-title .ic{ width:20px; height:20px; color:var(--orange); }

/* ---- Page Trouver des produits — correction n°7 ---- */
.src-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:36px; align-items:start; }
.src-reassure{ display:flex; flex-direction:column; gap:9px; margin-top:22px; }
.src-reassure span{ display:inline-flex; align-items:center; gap:8px; font-size:.88rem; color:var(--muted); }
.src-reassure .ic{ width:16px; height:16px; color:var(--blue-deep); flex:none; }

/* ---- Bandeaux accueil : sourcing & suivi ---- */
.sourcing-band, .track-band{
  display:grid; grid-template-columns:1.4fr 1fr; gap:26px; align-items:center;
  background:linear-gradient(120deg, var(--ink) 0%, #14264a 60%, #0e3a70 100%);
  border-radius:var(--r-lg); padding:34px 38px; color:#fff;
  position:relative; overflow:hidden;
}
.sourcing-band::after, .track-band::after{
  content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px;
  background:radial-gradient(circle, rgba(249,115,22,.28), transparent 65%);
}
.sourcing-band h2, .track-band h2{ color:#fff; margin:12px 0 10px; font-size:clamp(1.3rem, 2.6vw, 1.7rem); }
.sourcing-band p, .track-band p{ color:#c6d3e4; margin:0; }
.sourcing-band .eyebrow, .track-band .eyebrow{ color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.sb-cta{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; justify-self:end; z-index:1; }
.sb-cta .sla-badge{ margin-top:0; background:rgba(255,255,255,.08); border-color:rgba(249,115,22,.5); color:#fff; }

/* ---- Recherche de code de suivi ---- */
.shp-lookup{
  display:flex; align-items:center; gap:10px; z-index:1;
  background:#fff; border-radius:999px; padding:8px 8px 8px 18px;
  box-shadow:0 16px 40px rgba(11,20,36,.22); max-width:520px; margin-top:22px;
}
.track-band .shp-lookup{ margin-top:0; justify-self:end; width:100%; }
.shp-lookup .ic{ width:20px; height:20px; color:var(--muted); flex:none; }
.shp-lookup input{
  flex:1; min-width:0; border:0; outline:none; font:inherit; font-size:.95rem;
  color:var(--ink); background:transparent; text-transform:uppercase;
}
.shp-lookup input::placeholder{ text-transform:none; }
.shp-lookup .btn{ padding:11px 22px; flex:none; }

/* ---- Timeline de suivi — correction n°11 ---- */
.shp-result{
  max-width:760px; margin:0 auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 32px; box-shadow:var(--sh);
}
.shp-head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:8px; }
.shp-code{
  font-family:var(--ff-display); font-weight:700; letter-spacing:.04em;
  background:var(--ink); color:#fff; padding:6px 14px; border-radius:10px; font-size:.95rem;
}
.shp-mode{
  display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:600;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 12px; color:var(--muted);
}
.shp-mode .ic{ width:14px; height:14px; color:var(--blue-deep); }
.shp-route{ font-size:1.02rem; color:var(--ink); margin:4px 0 2px; }
.shp-route b{ color:var(--blue-deep); }
.shp-eta{ font-size:.9rem; color:var(--muted); margin-bottom:18px; }
.shp-eta b{ color:var(--orange); }
.shp-pct{
  height:9px; border-radius:999px; background:var(--surface); overflow:hidden; margin:14px 0 26px;
  border:1px solid var(--line);
}
.shp-pct span{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--orange)); transition:width .8s var(--ease); }

.shp-timeline{ list-style:none; margin:0; padding:0; position:relative; }
.shp-timeline::before{
  content:""; position:absolute; left:17px; top:10px; bottom:10px; width:2px;
  background:var(--line);
}
.shp-timeline li{ position:relative; padding:0 0 22px 52px; }
.shp-timeline li:last-child{ padding-bottom:0; }
.shp-timeline .pt{
  position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; border:2px solid var(--line); background:#fff; z-index:1;
}
.shp-timeline .pt .ic{ width:17px; height:17px; color:var(--muted); }
.shp-timeline .body b{ display:block; font-family:var(--ff-display); font-size:.98rem; color:var(--ink); }
.shp-timeline .meta{ font-size:.8rem; color:var(--muted); }
.shp-timeline .note{ font-size:.86rem; color:var(--muted); margin-top:3px; }
.shp-timeline li.done .pt{ background:var(--blue-deep); border-color:var(--blue-deep); }
.shp-timeline li.done .pt .ic{ color:#fff; }
.shp-timeline li.now .pt{
  background:var(--orange); border-color:var(--orange);
  box-shadow:0 0 0 5px rgba(249,115,22,.18); animation:ab-pulse 2s infinite;
}
.shp-timeline li.now .pt .ic{ color:#fff; }
.shp-timeline li.now .body b{ color:var(--orange-deep, #c2410c); }
.shp-timeline li.todo{ opacity:.55; }
.shp-timeline--demo li{ padding-bottom:16px; }
@keyframes ab-pulse{
  0%,100%{ box-shadow:0 0 0 5px rgba(249,115,22,.18); }
  50%{ box-shadow:0 0 0 9px rgba(249,115,22,.08); }
}

/* ---- Cartes délais (ETA) ---- */
.eta-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.eta-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; text-align:center; box-shadow:var(--sh);
}
.eta-ic{
  width:52px; height:52px; margin:0 auto 14px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(46,144,250,.14), rgba(249,115,22,.12));
}
.eta-ic .ic{ width:26px; height:26px; color:var(--blue-deep); }
.eta-card h3{ font-size:1.02rem; margin:0 0 8px; }
.eta-days{ margin:0 0 8px; color:var(--ink); }
.eta-days b{ font-size:1.7rem; font-family:var(--ff-display); color:var(--orange); }
.eta-card p{ font-size:.88rem; color:var(--muted); margin:0; }

/* ---- Cartes conteneurs (achat groupé) — correction n°10 ---- */
.ctn-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.ctn-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--sh); display:flex; flex-direction:column; gap:12px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ctn-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.ctn-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ctn-route{ display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color:var(--muted); }
.ctn-route .ic{ width:15px; height:15px; color:var(--blue-deep); flex:none; }
.ctn-status{
  font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; background:#eff6ff; color:var(--blue-deep);
  border:1px solid #bfdbfe; white-space:nowrap;
}
.ctn-status.hot{ background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.ctn-name{ font-family:var(--ff-display); font-size:1.08rem; color:var(--ink); }
.ctn-progress .bar{
  height:10px; border-radius:999px; background:var(--surface); border:1px solid var(--line); overflow:hidden;
}
.ctn-progress .bar span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--orange));
}
.ctn-progress .pct{
  display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-top:5px;
}
.ctn-progress .pct b{ color:var(--ink); }
.ctn-meta{ display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; font-size:.82rem; color:var(--muted); }
.ctn-meta span{ display:inline-flex; align-items:center; gap:6px; }
.ctn-meta .ic{ width:14px; height:14px; color:var(--orange); flex:none; }
.ctn-meta b{ color:var(--ink); }
.ctn-prices{
  display:flex; gap:14px; font-size:.86rem; color:var(--muted);
  border-top:1px dashed var(--line); padding-top:12px;
}
.ctn-prices b{ color:var(--blue-deep); font-family:var(--ff-display); }
.ctn-cta{ margin-top:auto; }
.ctn-cta .btn{ width:100%; justify-content:center; padding:11px 18px; font-size:.9rem; }
.sec-more{ text-align:center; margin-top:26px; }

/* ---- Conditions / politiques fournisseurs — correction n°2 ---- */
.cond-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.cond-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; box-shadow:var(--sh);
}
.cond-card h3{
  display:flex; align-items:center; gap:9px; font-size:1.02rem; margin:0 0 12px;
}
.cond-card h3 .ic{ width:20px; height:20px; color:var(--orange); flex:none; }
.cond-card ul{ margin:0; padding:0; list-style:none; }
.cond-card li{
  position:relative; padding:5px 0 5px 22px; font-size:.9rem; color:var(--muted);
}
.cond-card li::before{
  content:""; position:absolute; left:0; top:12px; width:7px; height:7px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 0 3px rgba(46,144,250,.15);
}
.cond-card p{ font-size:.9rem; color:var(--muted); margin:0; }
.cond-card a{ color:var(--blue-deep); font-weight:600; }

/* ---- Barème des frais — correction n°2 ---- */
.fee-wrap{ max-width:920px; margin:0 auto; overflow-x:auto; }
.fee-table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--sh); font-size:.9rem;
}
.fee-table th{
  background:var(--ink); color:#fff; text-align:left; padding:13px 16px;
  font-family:var(--ff-display); font-size:.84rem; letter-spacing:.02em;
}
.fee-table td{ padding:13px 16px; border-top:1px solid var(--line); color:var(--muted); vertical-align:top; }
.fee-table td b{ color:var(--ink); }
.fee-table tr:nth-child(even) td{ background:var(--surface); }
.fee-free{
  display:inline-block; background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0;
  font-weight:700; font-size:.8rem; padding:3px 10px; border-radius:999px;
}
.fee-note{
  display:flex; align-items:center; gap:7px; justify-content:center;
  font-size:.82rem; color:var(--muted); margin:14px 0 0; text-align:center;
}
.fee-note .ic{ width:13px; height:13px; flex:none; }

/* ---- Équipe — correction n°3 ---- */
.team-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.team-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 20px; text-align:center; box-shadow:var(--sh);
}
.team-ava{
  width:72px; height:72px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--ff-display); font-weight:700; font-size:1.3rem;
  color:#fff; background:linear-gradient(135deg, var(--blue), var(--blue-deep));
  border:3px solid #fff; box-shadow:0 6px 18px rgba(21,101,192,.28); overflow:hidden;
}
.team-card:nth-child(even) .team-ava{ background:linear-gradient(135deg, var(--orange), #ea580c); box-shadow:0 6px 18px rgba(249,115,22,.28); }
.team-ava img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.team-card > b{ display:block; font-family:var(--ff-display); font-size:1rem; color:var(--ink); }
.team-role{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.02em;
  color:var(--blue-deep); background:#eff6ff; border:1px solid #bfdbfe;
  border-radius:999px; padding:3px 11px; margin:7px 0 10px;
}
.team-card p{ font-size:.85rem; color:var(--muted); margin:0; }

/* ---- Responsive v3 ---- */
@media (max-width: 980px){
  .src-grid{ grid-template-columns:1fr; gap:26px; }
  .sourcing-band, .track-band{ grid-template-columns:1fr; padding:28px 24px; }
  .sb-cta{ justify-self:start; }
  .track-band .shp-lookup{ justify-self:stretch; }
  .ctn-grid, .cond-grid, .eta-grid{ grid-template-columns:repeat(2, 1fr); }
  .team-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px){
  .ctn-grid, .cond-grid, .eta-grid, .team-grid{ grid-template-columns:1fr; }
  .ab-form-row{ grid-template-columns:1fr; }
  .shp-lookup{ flex-wrap:wrap; padding:10px; }
  .shp-lookup input{ width:100%; padding:6px 8px; }
  .shp-lookup .btn{ width:100%; justify-content:center; }
  .shp-result{ padding:22px 18px; }
  .fee-table th, .fee-table td{ padding:10px 10px; font-size:.82rem; }
  .topbar .r .ab-lang{ order:-1; }
}

/* =============================================================
   MEGA-MENU B2B — AfricBiz v3
   Architecture : menu principal Astra enrichi par CSS seul +
   hooks PHP pour les panneaux dropdowns riches.
   ============================================================= */

/* =========================================================
   SÉLECTEUR DE LANGUE — masquage & style topbar
   GTranslate injecte son .gtranslate_wrapper directement
   dans le <body>. Notre JS le déplace dans .topbar
   .ab-gt-placeholder ; en attendant (et en fallback) on
   le cache partout sauf dans .topbar.
   ========================================================= */

/* 1. Cacher le widget GTranslate partout hors de .topbar */
body > .gtranslate_wrapper,
body > #google_translate_element,
.main-header-bar .gtranslate_wrapper,
.main-header-bar [class*="language-switcher"],
.main-header-bar [class*="gtranslate"],
.ast-masthead-custom-menu-items .gtranslate_wrapper,
.site-header .gtranslate_wrapper,
.ast-header-custom-item [class*="language"],
.main-header-bar-wrap .gtranslate_wrapper {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Quand notre JS l'a déplacé dans .topbar, le rendre visible et compact */
.topbar .ab-lang--gt { display: inline-flex; align-items: center; }
.topbar .gtranslate_wrapper,
.topbar .ab-gt-placeholder .gtranslate_wrapper,
.topbar .ab-gt-placeholder > * {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  align-items: center;
}

/* 3. Style compact du widget GTranslate dans la topbar sombre */
.topbar .gtranslate_wrapper select,
.topbar .ab-gt-placeholder select {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .8rem;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.topbar .gtranslate_wrapper select:hover,
.topbar .ab-gt-placeholder select:hover {
  background: rgba(255,255,255,.18);
}
/* Cacher les images/drapeaux GTranslate trop grandes */
.topbar .gtranslate_wrapper img,
.topbar .ab-gt-placeholder img {
  display: none !important;
}

/* 4. Notre sélecteur fallback natif (quand GTranslate n'est pas installé) */
.topbar .ab-lang { display: inline-flex; position: relative; }
.topbar .ab-lang-menu {
  z-index: 9999;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
}

/* =====================================================================
   HEADER AFRICBIZ — identité visuelle complète
   Bleu #2E90FA · Bleu profond #1565C0 · Orange #F97316 · Encre #0B1424
   Police Bricolage Grotesque (--f-head) + Plus Jakarta Sans (--f-body)
   ===================================================================== */

/* ---- 1. Barre principale : fond blanc pur, hauteur fixe 70 px ---- */
.africbiz .main-header-bar,
.africbiz .site-header .main-header-bar,
.africbiz .ast-primary-header-bar {
  background: #fff !important;
  border-bottom: 1.5px solid var(--line) !important;
  box-shadow: 0 2px 20px rgba(11,20,36,.06) !important;
  min-height: 70px !important;
  padding: 0 !important;
}

/* Conteneur centré pleine largeur */
.africbiz .main-header-bar .ast-container,
.africbiz .ast-primary-header-bar .ast-container {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  min-height: 70px !important;
  gap: 0 !important;
}

/* ---- 2. Logo ---- */
.africbiz .site-logo-img img,
.africbiz .custom-logo-link img,
.africbiz .ast-site-identity img {
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
}
.africbiz .ast-site-identity { flex: none; margin-right: 32px; }

/* ---- 3. Zone de navigation : flex centré, hauteur pleine ---- */
.africbiz .main-navigation,
.africbiz .ast-main-header-bar-alignment .main-navigation {
  flex: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  height: 70px !important;
  overflow: visible !important;
}
.africbiz .main-navigation ul.ast-nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;           /* ← interdit le retour à la ligne */
  align-items: stretch !important;
  height: 100% !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* ---- 4. Chaque item de menu ---- */
.africbiz .main-navigation ul.ast-nav-menu > li {
  position: relative;
  display: flex;
  align-items: stretch;
  white-space: nowrap;
}

/* ---- 5. Liens du menu ---- */
.africbiz .main-navigation ul.ast-nav-menu > li > a,
.africbiz .main-navigation ul.ast-nav-menu > li > .menu-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
  font-family: var(--ff-body) !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -.01em !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border-bottom: 2.5px solid transparent;
  transition: color .18s, border-color .18s !important;
  height: 100%;
  position: relative;
}

/* Hover */
.africbiz .main-navigation ul.ast-nav-menu > li:hover > a,
.africbiz .main-navigation ul.ast-nav-menu > li:focus-within > a {
  color: var(--blue-deep) !important;
}

/* Indicateur page active */
.africbiz .main-navigation ul.ast-nav-menu > li.current-menu-item > a,
.africbiz .main-navigation ul.ast-nav-menu > li.current-menu-ancestor > a {
  color: var(--blue-deep) !important;
  border-bottom-color: var(--blue) !important;
}

/* Supprimer le pseudo-element ::after existant d'Astra (on utilise border-bottom) */
.africbiz .main-header-menu .menu-item > .menu-link::after,
.africbiz .ast-builder-menu .menu-item > .menu-link::after,
.africbiz .main-navigation ul.ast-nav-menu > li > a::after {
  display: none !important;
}

/* ---- 6. Chevron sous-menu Astra ---- */
.africbiz .ast-nav-menu .sub-arrow,
.africbiz .ast-nav-menu .dropdown-arrow {
  display: inline-block !important;
  width: 13px; height: 13px;
  margin-left: 3px;
  opacity: .5;
  transition: transform .22s, opacity .18s;
  flex: none;
}
.africbiz .ast-nav-menu li:hover > a .sub-arrow,
.africbiz .ast-nav-menu li.ast-submenu-focused > a .sub-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---- 7. Bouton CTA "Vendre / Devenir fournisseur" ---- */
.africbiz .main-navigation ul.ast-nav-menu > li.ab-nav-cta > a,
.africbiz .ab-nav-cta > a {
  background: var(--orange) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0 22px !important;
  margin: 12px 0 12px 10px !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  height: 44px !important;
  box-shadow: 0 4px 14px rgba(249,115,22,.28) !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
  border-bottom: none !important;
  white-space: nowrap !important;
}
.africbiz .main-navigation ul.ast-nav-menu > li.ab-nav-cta:hover > a,
.africbiz .ab-nav-cta > a:hover {
  background: #ea580c !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(249,115,22,.38) !important;
  border-bottom: none !important;
}
.africbiz .ab-nav-cta > a::after { display: none !important; }

/* ---- 8. Éléments complémentaires droite (panier, compte, recherche) ---- */
.africbiz .ast-header-woo-cart .ast-cart-menu-wrap,
.africbiz .ast-header-account-wrap,
.africbiz .ast-header-search .astra-search-icon {
  color: var(--muted);
  transition: color .18s;
}
.africbiz .ast-header-woo-cart:hover .ast-cart-menu-wrap,
.africbiz .ast-header-account-wrap:hover { color: var(--orange); }
.africbiz .ast-cart-menu-wrap .count,
.africbiz .ast-site-header-cart .ast-cart-menu-wrap .count {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* ---- 9. Sous-menus natifs Astra (dropdown standard) ---- */
.africbiz .main-navigation ul.ast-nav-menu li .sub-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  min-width: 230px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(11,20,36,.13) !important;
  padding: 8px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(6px) !important;
  transition: opacity .2s, visibility .2s, transform .2s !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  list-style: none !important;
  margin: 0 !important;
}
.africbiz .main-navigation ul.ast-nav-menu li:hover > .sub-menu,
.africbiz .main-navigation ul.ast-nav-menu li.ast-submenu-open > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
/* Liens dans le sous-menu */
.africbiz .main-navigation ul.ast-nav-menu li .sub-menu > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 13px !important;
  border-radius: 10px !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
  border-bottom: none !important;
  transition: background .15s, color .15s !important;
}
.africbiz .main-navigation ul.ast-nav-menu li .sub-menu > li > a:hover {
  background: var(--surface) !important;
  color: var(--blue-deep) !important;
}

/* =====================================================================
   MÉGA-MENU — panneaux déroulants riches
   ===================================================================== */

/* Conteneur du méga-panel rattaché au <li> */
.africbiz .main-navigation ul.ast-nav-menu > li.ab-mega > .ab-mega-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(96vw, 820px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 56px rgba(11,20,36,.14);
  padding: 26px 28px;
  display: grid;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
  pointer-events: none;
  z-index: 9999;
  /* Barre dégradée en haut */
  border-top: 3px solid transparent;
  background-clip: padding-box;
}
/* Ligne dégradée bleu→orange */
.africbiz .main-navigation ul.ast-nav-menu > li.ab-mega > .ab-mega-panel::before {
  content: '';
  position: absolute;
  top: -3px; left: 20px; right: 20px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--blue) 0%, var(--orange) 100%);
}
/* Ouverture */
.africbiz .main-navigation ul.ast-nav-menu > li.ab-mega:hover > .ab-mega-panel,
.africbiz .main-navigation ul.ast-nav-menu > li.ab-mega.ab-mega--open > .ab-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Largeur élargie pour boutique (9 catégories) */
.ab-mega-panel--boutique {
  width: min(96vw, 940px) !important;
  grid-template-columns: 1fr 220px !important;
}

/* Grille interne 3 colonnes (défaut) */
.ab-mega-panel { grid-template-columns: repeat(3, 1fr); }
.ab-mega-panel.cols-2 { grid-template-columns: 1.4fr 1fr; }

/* Titre de colonne */
.ab-mega-col { display: flex; flex-direction: column; gap: 3px; }
.ab-mega-col--cats { gap: 6px; }
.ab-mega-col-title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

/* Grille 3 colonnes pour catégories boutique */
.ab-mega-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

/* Lien riche */
.ab-mega-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: .86rem;
  transition: background .15s, color .15s;
}
.ab-mega-link:hover { background: var(--surface); color: var(--blue-deep); }

/* Icône du lien */
.ab-mega-link .ab-ml-ic {
  width: 32px; height: 32px;
  border-radius: 9px;
  flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(46,144,250,.1), rgba(249,115,22,.08));
  transition: background .15s;
}
.ab-mega-link:hover .ab-ml-ic { background: rgba(46,144,250,.16); }
.ab-mega-link .ab-ml-ic .ic { width: 16px; height: 16px; color: var(--blue-deep); }

.ab-mega-link .ab-ml-body { flex: 1; min-width: 0; }
.ab-mega-link .ab-ml-title {
  display: block;
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.ab-mega-link:hover .ab-ml-title { color: var(--blue-deep); }
.ab-mega-link .ab-ml-sub {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lien "tout voir" */
.ab-mega-link--all {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--blue-deep) !important;
  font-size: .84rem;
}
.ab-mega-link--all .ab-ml-ic { background: rgba(46,144,250,.12) !important; }
.ab-mega-link--all .ab-ml-ic .ic { color: var(--blue-deep) !important; }
.ab-mega-link--all .ab-ml-title { color: var(--blue-deep) !important; }
.ab-mega-link--all .ic:last-child { width: 14px; height: 14px; color: var(--blue-deep); margin-left: auto; }

/* Badge "48 h" */
.ab-ml-badge {
  display: inline-block;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  background: var(--orange); color: #fff;
  border-radius: 5px; padding: 1px 5px;
  margin-left: 5px; vertical-align: middle;
}

/* Panneau promo sombre (colonne droite boutique) */
.ab-mega-col--promo { gap: 10px; }
.ab-mega-promo {
  background: linear-gradient(145deg, var(--ink) 0%, #1a3a6e 100%);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.ab-mega-promo-icon .ic { width: 24px; height: 24px; color: var(--orange); }
.ab-mega-promo strong {
  display: block;
  font-family: var(--ff-display);
  font-size: .95rem;
  color: #fff;
  line-height: 1.25;
}
.ab-mega-promo p {
  font-size: .8rem;
  color: #9db4cc;
  margin: 0;
  line-height: 1.45;
}
.ab-mega-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .8rem; font-weight: 700;
  color: var(--orange) !important;
  text-decoration: none;
  transition: gap .18s;
  margin-top: 2px;
}
.ab-mega-cta:hover { gap: 9px; }
.ab-mega-cta .ic { width: 13px; height: 13px; color: var(--orange); flex: none; }

/* Badges de confiance dans la promo */
.ab-mega-trust {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
}
.ab-mega-trust span {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: #8ea0b8;
}
.ab-mega-trust .ic { width: 12px; height: 12px; color: var(--blue); flex: none; }

/* Panneau promo colonne classique (importer) */
.ab-mega-col .ab-mega-promo { flex: none; }

/* =====================================================================
   RESPONSIVE HEADER
   ===================================================================== */
@media (max-width: 1100px) {
  /* Réduire légèrement le padding des liens pour gagner de la place */
  .africbiz .main-navigation ul.ast-nav-menu > li > a,
  .africbiz .main-navigation ul.ast-nav-menu > li > .menu-link {
    padding: 0 10px !important;
    font-size: .83rem !important;
  }
  .africbiz .ast-site-identity { margin-right: 16px; }
}

@media (max-width: 920px) {
  /* Sur mobile, Astra reprend la main avec son burger */
  .africbiz .main-navigation ul.ast-nav-menu > li.ab-mega > .ab-mega-panel {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
    margin: 6px 0 !important;
    display: none !important;
  }
  .africbiz .main-navigation ul.ast-nav-menu > li.ab-mega.ab-mega--open > .ab-mega-panel {
    display: grid !important;
  }
  .ab-mega-panel { grid-template-columns: 1fr !important; }
  .ab-mega-panel--boutique { grid-template-columns: 1fr !important; width: 100% !important; }
  .ab-mega-cat-grid { grid-template-columns: 1fr 1fr !important; }
  .ab-mega-col--promo,
  .ab-mega-promo { display: none !important; } /* Allège sur mobile */
}

/* =====================================================================
   v3.3.0 — Réseaux sociaux (footer) + photos réelles de conteneurs
   ===================================================================== */

/* Icônes sociales du footer */
.ab-socials {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.ab-soc {
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  color: #cfd8e6;
  transition: background .18s, color .18s, transform .15s, border-color .18s;
}
.ab-soc svg { width: 19px; height: 19px; }
.ab-soc:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  transform: translateY(-2px);
}
.ab-soc-mail-txt {
  font-size: .84rem;
  color: #cfd8e6;
  text-decoration: none;
  margin-left: 2px;
}
.ab-soc-mail-txt:hover { color: var(--orange); }

/* Photo de la section « principe » — achat groupé */
.ctn-visual img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
  display: block;
}

/* Les photos réelles remplissent proprement leurs cadres existants */
.hero .photo-card img,
.community .photo img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   PANIER, COMMANDE & PAIEMENT — habillage des boutons WooCommerce natifs
   Ces boutons (Passer la commande, Mettre à jour le panier, Payer, boutons
   de la page « Payer la commande ») n'avaient aucun style dédié et
   dépendaient donc entièrement du thème parent / des plugins de paiement,
   avec un risque de texte peu ou pas lisible selon les cas. On leur donne
   ici l'habillage visuel de la marque, cohérent avec .btn--cta / .btn--blue.
   ========================================================================= */
.woocommerce #place_order,
.woocommerce-page #place_order,
.woocommerce a.button.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.button,
.woocommerce-order-pay #place_order,
.woocommerce-order-pay .payment_methods .button {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:10px;
  background:var(--grad-orange) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important; visibility:visible !important; text-shadow:none !important;
  border:none !important; border-radius:var(--pill) !important;
  padding:14px 22px !important; font-family:var(--ff-display); font-weight:600;
  font-size:.98rem; line-height:1.2; box-shadow:var(--sh-orange);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.woocommerce #place_order:hover,
.woocommerce a.button.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-order-pay #place_order:hover{
  transform:translateY(-2px); box-shadow:0 20px 44px -12px rgba(249,115,22,.7);
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}

/* Boutons secondaires (Mettre à jour le panier, Appliquer le bon, Continuer
   mes achats, Annuler sur la page « Payer la commande ») : contour clair,
   texte encre — jamais de texte blanc sur blanc ni bleu sur bleu. */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"],
.woocommerce a.button.wc-backward,
.woocommerce-order-pay a.button.cancel,
.woocommerce-order-pay .woocommerce-order-pay-methods + a.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#fff !important; color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink) !important;
  border:1px solid var(--line) !important; border-radius:var(--pill) !important;
  padding:12px 20px !important; font-weight:600; font-size:.92rem;
  box-shadow:none !important; opacity:1 !important; visibility:visible !important;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover,
.woocommerce a.button.wc-backward:hover{
  border-color:var(--blue) !important; color:var(--blue-deep) !important;
  -webkit-text-fill-color:var(--blue-deep) !important;
}

/* Ceinture de sécurité générale : sur les pages panier/commande/paiement,
   aucun bouton ou lien-bouton WooCommerce ne doit jamais rendre un texte
   invisible, quelle que soit son origine (thème parent, extension de
   paiement, mise à jour future). */
.woocommerce-cart .button,
.woocommerce-checkout .button,
.woocommerce-order-pay .button {
  opacity:1 !important; visibility:visible !important; text-shadow:none !important;
}

/* La réassurance « Paiement 100 % sécurisé » ne doit jamais se comprimer :
   largeur minimale garantie dans la colonne de droite du tunnel d'achat. */
.woocommerce-checkout .ab-pay-trust,
.woocommerce-checkout #order_review .ab-pay-trust {
  min-width:260px; width:100%;
}

/* =========================================================================
   CORRECTIONS CLIENT — SEPTEMBRE 2026
   ========================================================================= */

/* ---- Item 5 : photo réelle sur les vignettes de catégorie -------------- */
.cat-ic--photo{
  padding:0 !important; overflow:hidden; border-radius:16px;
  width:58px; height:58px; display:block; flex:none;
}
.cat-ic--photo img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:16px;
}
.cat:hover .cat-ic--photo img{ transform:scale(1.06); transition:transform .4s var(--ease); }

/* ---- Item 6 : badge flottant « Produit introuvable ? » ----------------- */
.ab-src-fab{
  position:fixed; right:18px; bottom:86px; z-index:91;
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 18px 11px 14px; border-radius:var(--pill);
  background:var(--grad-orange); color:#fff !important; text-decoration:none;
  box-shadow:var(--sh-orange); max-width:min(320px, calc(100vw - 36px));
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ab-src-fab:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -12px rgba(249,115,22,.72); }
.ab-src-fab__ic{ display:grid; place-items:center; flex:none; }
.ab-src-fab__ic .ic{ width:20px; height:20px; color:#fff; }
.ab-src-fab__txt{ display:flex; flex-direction:column; line-height:1.25; }
.ab-src-fab__txt b{ font-family:var(--ff-display); font-size:.9rem; font-weight:700; color:#fff; }
.ab-src-fab__txt span{ font-size:.75rem; color:rgba(255,255,255,.9); }
/* Pastille pulsante : attire l'œil sans clignotement agressif. */
.ab-src-fab__dot{
  position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px rgba(249,115,22,.9);
}
.ab-src-fab__dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:rgba(255,255,255,.85); animation:abSrcPulse 1.8s ease-out infinite;
}
@keyframes abSrcPulse{
  0%   { transform:scale(1);   opacity:.9; }
  70%  { transform:scale(2.6); opacity:0;  }
  100% { transform:scale(2.6); opacity:0;  }
}
@media (max-width:640px){
  .ab-src-fab{ right:12px; bottom:80px; padding:9px 14px 9px 11px; }
  .ab-src-fab__txt b{ font-size:.82rem; }
  .ab-src-fab__txt span{ font-size:.7rem; }
}
/* Respect des préférences d'accessibilité : pas d'animation si l'utilisateur
   a demandé à réduire les animations dans son système. */
@media (prefers-reduced-motion: reduce){
  .ab-src-fab__dot::after{ animation:none; }
}

/* ---- Item 7 : illustration de la page Litiges ------------------------- */
.lit-illus{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:34px; align-items:center;
}
.lit-illus__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh); border:1px solid var(--line);
}
.lit-illus__media img{ width:100%; height:auto; max-height:440px; object-fit:cover;
  object-position:center 22%; display:block; }
.lit-illus__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,20,36,0) 45%, rgba(11,20,36,.55));
}
.lit-illus__cap{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  color:#fff; font-size:.9rem; line-height:1.45;
}
@media (max-width:820px){
  .lit-illus{ grid-template-columns:1fr; gap:22px; }
}

/* ---- Item 11 : bandeau « Stock magasin Cotonou » ---------------------- */
/* Aux couleurs AfricBiz (bleu nuit + orange) — demande client, sept. 2026. */
.stock-band{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:22px; padding:30px 34px; border-radius:var(--r-lg);
  background:var(--grad-night); border:1px solid rgba(255,255,255,.08);
  color:#fff; position:relative; overflow:hidden; box-shadow:var(--sh);
}
.stock-band::after{
  content:""; position:absolute; right:-70px; top:-70px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(249,115,22,.32), transparent 68%);
  pointer-events:none;
}
.stock-band .sb-body{ flex:1 1 380px; position:relative; z-index:1; }
.stock-band .sb-cta{ position:relative; z-index:1; }
.stock-band h2{ margin:10px 0 8px; color:#fff; }
.stock-band p{ color:rgba(255,255,255,.82); margin:0; max-width:640px; }
.stock-badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:6px;
  padding:7px 15px; border-radius:var(--pill);
  background:var(--grad-orange); color:#fff;
  font-size:.82rem; font-weight:700; font-family:var(--ff-display);
  box-shadow:var(--sh-orange);
}
.stock-badge .ic{ width:16px; height:16px; color:#fff; }

/* ---- Fournisseurs : état vide (aucun fournisseur avec produits) -------- */
.sup-empty{
  grid-column:1/-1; text-align:center; padding:38px 20px;
  border:1px dashed var(--line); border-radius:var(--r-lg); background:var(--surface);
}
.sup-empty p{ color:var(--muted); margin:0 0 14px; }

/* ---- Badge topbar : mention Afrique de l'Ouest ------------------------ */
.locale-more{ opacity:.85; }
@media (max-width:760px){ .locale-more{ display:none; } }

/* ---- Photo d'illustration des témoignages ----------------------------- */
.quotes-photo{
  margin:0 0 30px; display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:26px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--sh-sm);
}
.quotes-photo img{
  width:100%; height:100%; max-height:210px; object-fit:cover;
  border-radius:var(--r); display:block;
}
.quotes-photo figcaption{ display:flex; flex-direction:column; gap:7px; }
.quotes-photo figcaption b{
  font-family:var(--ff-display); font-size:1.15rem; color:var(--ink); line-height:1.3;
}
.quotes-photo figcaption span{ color:var(--muted); font-size:.95rem; line-height:1.55; }
@media (max-width:720px){
  .quotes-photo{ grid-template-columns:1fr; text-align:center; }
  .quotes-photo img{ max-height:230px; }
}

/* =========================================================================
   MENU MOBILE — HAMBURGER (correction client, sept. 2026)
   Le thème forçait le menu desktop (display:flex !important, nowrap) sans
   aucune exception mobile : les rubriques débordaient hors de l'écran et
   le bouton hamburger d'Astra restait masqué. On neutralise ici ces règles
   sous 921 px pour rendre à Astra son comportement natif : hamburger +
   panneau déroulant vertical.
   ========================================================================= */
@media (max-width:921px){

  /* 1. On rend la main à Astra : le menu horizontal ne s'impose plus. */
  .africbiz .main-navigation,
  .africbiz .ast-main-header-bar-alignment .main-navigation{
    flex: 0 0 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  .africbiz .main-navigation ul.ast-nav-menu{
    display: block !important;
    flex-wrap: wrap !important;
    height: auto !important;
    width: 100% !important;
    padding: 6px 0 10px !important;
  }

  /* 2. Chaque rubrique passe en pleine largeur, l'une sous l'autre. */
  .africbiz .main-navigation ul.ast-nav-menu > li{
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    border-bottom: 1px solid var(--line);
  }
  .africbiz .main-navigation ul.ast-nav-menu > li:last-child{ border-bottom: none; }
  .africbiz .main-navigation ul.ast-nav-menu > li > a,
  .africbiz .main-navigation ul.ast-nav-menu > li > .menu-link{
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    padding: 14px 20px !important;
    font-size: .98rem !important;
    white-space: normal !important;
    border-bottom: none !important;
  }

  /* 3. Le bouton « Vendre » reste bien visible, mais sans déborder. */
  .africbiz .main-navigation ul.ast-nav-menu > li.ab-nav-cta{
    padding: 12px 20px; border-bottom: none;
  }
  .africbiz .main-navigation ul.ast-nav-menu > li.ab-nav-cta > a{
    justify-content: center; border-radius: var(--pill);
  }

  /* 4. Le bouton hamburger d'Astra redevient visible et cliquable. */
  .africbiz .ast-mobile-menu-buttons,
  .africbiz .ast-button-wrap,
  .africbiz .ast-mobile-menu-buttons-minimal,
  .africbiz .menu-toggle,
  .africbiz .ast-mobile-menu-trigger-minimal,
  .africbiz .ast-mobile-menu-trigger-fill,
  .africbiz .ast-mobile-menu-trigger-outline{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .africbiz .menu-toggle{
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-radius: 12px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--line) !important;
  }
  .africbiz .menu-toggle:hover,
  .africbiz .menu-toggle:focus{ color: var(--orange) !important; border-color: var(--orange) !important; }

  /* 5. Astra masque/affiche le panneau via .toggled-on : on ne l'entrave pas. */
  .africbiz .main-header-bar-navigation{
    width: 100%;
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
  .africbiz .ast-mobile-header-wrap .main-header-bar-navigation{ padding: 0; }
  .africbiz .main-header-bar-navigation.toggle-on,
  .africbiz .main-header-bar-navigation.toggled-on{ display: block !important; }

  /* 6. Le méga-menu (désactivé) ne doit rien réafficher au survol. */
  .africbiz .ab-mega--open .ab-mega-panel{ display: none !important; }
}

/* Sur très petit écran, on resserre un peu la barre du haut. */
@media (max-width:520px){
  .africbiz .main-navigation ul.ast-nav-menu > li > a,
  .africbiz .main-navigation ul.ast-nav-menu > li > .menu-link{
    padding: 13px 16px !important;
    font-size: .94rem !important;
  }
}

/* =========================================================================
   BANDEAU DE LA PAGE BOUTIQUE (refonte — correction client, sept. 2026)
   L'ancien bandeau `.ab-band` n'avait aucun style : le titre s'affichait
   brut, collé au bord gauche, hors du conteneur. Il est désormais placé
   dans le conteneur WooCommerce (priorité 15) et habillé aux couleurs
   de la marque.
   ========================================================================= */
.ab-shop-band{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:30px; align-items:center;
  margin:0 0 34px; padding:30px 34px;
  border-radius:var(--r-lg);
  background:var(--grad-night);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:var(--sh);
}
.ab-shop-band::after{
  content:""; position:absolute; right:-70px; top:-70px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(249,115,22,.30), transparent 68%);
  pointer-events:none;
}
.ab-shop-band__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--pill);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  font-family:var(--ff-display); font-size:.76rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#fff;
}
.ab-shop-band h2{
  margin:14px 0 10px; color:#fff;
  font-size:clamp(1.35rem, 2.4vw, 1.95rem); line-height:1.2;
}
.ab-shop-band p{
  margin:0; color:rgba(255,255,255,.82);
  font-size:.97rem; line-height:1.6; max-width:56ch;
}
.ab-shop-band__pts{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:11px; position:relative; z-index:1;
}
.ab-shop-band__pts li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:.93rem; line-height:1.45; color:rgba(255,255,255,.94);
}
.ab-shop-band__pts li::before{
  content:""; flex:none; margin-top:3px;
  width:18px; height:18px; border-radius:50%;
  background:var(--grad-orange);
  box-shadow:0 0 0 3px rgba(249,115,22,.18);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:12px 12px;
}
@media (max-width:900px){
  .ab-shop-band{ grid-template-columns:1fr; gap:22px; padding:26px 24px; }
}
@media (max-width:520px){
  .ab-shop-band{ padding:22px 20px; border-radius:var(--r); }
  .ab-shop-band__pts li{ font-size:.88rem; }
}

/* =========================================================================
   PAGES WOOCOMMERCE — CONTENEUR & FICHE PRODUIT
   (refonte complète — correction client, sept. 2026)

   Deux problèmes corrigés :
   1. Les pages boutique/produit n'avaient plus aucune marge latérale : la
      règle de pleine largeur des modèles maison s'appliquait aussi à elles.
      Elles reçoivent désormais la classe body.ab-woo et un vrai conteneur.
   2. La fiche produit n'avait AUCUN style dédié (galerie, prix, onglets…) :
      elle s'affichait avec la mise en forme brute de WooCommerce.
   ========================================================================= */

/* ---- 1. Conteneur des pages WooCommerce ------------------------------- */
.africbiz.ab-woo .site-content .ast-container,
.africbiz.ab-woo #primary{
  max-width: var(--container);
  margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.africbiz.ab-woo .site-content{ padding-top: 34px; padding-bottom: 60px; }
.africbiz.ab-woo #secondary,
.africbiz.ab-woo .ast-sidebar-section{ display:none; }
.africbiz.ab-woo .ast-separate-container .ast-article-single,
.africbiz.ab-woo article.post{ background:transparent; box-shadow:none; padding:0; border:0; }

/* ---- 2. Fil d'Ariane -------------------------------------------------- */
.africbiz.ab-woo .woocommerce-breadcrumb{
  font-size:.87rem; color:var(--muted); margin:0 0 20px;
}
.africbiz.ab-woo .woocommerce-breadcrumb a{ color:var(--blue-deep); text-decoration:none; }
.africbiz.ab-woo .woocommerce-breadcrumb a:hover{ color:var(--orange); }

/* ---- 3. Fiche produit : galerie + résumé ------------------------------ */
.africbiz.ab-woo div.product{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:46px; align-items:start; margin-bottom:20px;
}
.africbiz.ab-woo div.product .woocommerce-product-gallery{
  width:100% !important; float:none !important; margin:0 !important;
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--paper); box-shadow:var(--sh-sm);
}
.africbiz.ab-woo div.product .woocommerce-product-gallery__image img{
  border-radius:0; display:block; width:100%; height:auto;
}
.africbiz.ab-woo div.product .flex-control-thumbs{
  display:flex; flex-wrap:wrap; gap:10px; margin:12px; padding:0; list-style:none;
}
.africbiz.ab-woo div.product .flex-control-thumbs li{ width:auto !important; margin:0 !important; }
.africbiz.ab-woo div.product .flex-control-thumbs img{
  width:66px; height:66px; object-fit:cover; border-radius:12px;
  border:2px solid transparent; opacity:.75; transition:opacity .2s, border-color .2s;
}
.africbiz.ab-woo div.product .flex-control-thumbs img:hover,
.africbiz.ab-woo div.product .flex-control-thumbs img.flex-active{
  opacity:1; border-color:var(--blue);
}
.africbiz.ab-woo div.product .woocommerce-product-gallery__trigger{
  background:#fff !important; border:1px solid var(--line); border-radius:50%;
  width:42px; height:42px; display:grid; place-items:center; box-shadow:var(--sh-sm);
  top:16px !important; right:16px !important;
}

/* Colonne de droite : informations et achat */
.africbiz.ab-woo div.product .summary{
  width:100% !important; float:none !important; margin:0 !important;
  display:flex; flex-direction:column; gap:2px;
}
.africbiz.ab-woo div.product .product_title{
  font-family:var(--ff-display); font-size:clamp(1.5rem, 2.6vw, 2.05rem);
  line-height:1.22; color:var(--ink); margin:6px 0 12px;
}
.africbiz.ab-woo div.product .price{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(1.5rem, 2.8vw, 2rem); color:var(--ink);
  font-variant-numeric:tabular-nums; margin:0 0 4px;
}
.africbiz.ab-woo div.product .price del{ color:var(--muted); font-weight:500; font-size:.62em; margin-right:10px; }
.africbiz.ab-woo div.product .price ins{ text-decoration:none; color:var(--orange-deep); }
.africbiz.ab-woo div.product .woocommerce-product-details__short-description{
  color:var(--muted); font-size:.98rem; line-height:1.68; margin:14px 0 6px;
  padding-top:16px; border-top:1px solid var(--line);
}
.africbiz.ab-woo div.product .woocommerce-product-details__short-description strong{ color:var(--ink); }

/* Quantité + bouton d'achat */
.africbiz.ab-woo div.product form.cart{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:22px 0 18px; padding:18px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
}
.africbiz.ab-woo div.product form.cart .quantity input.qty{
  width:80px; height:52px; text-align:center; font-weight:700; font-size:1rem;
  border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);
}
.africbiz.ab-woo div.product form.cart button.single_add_to_cart_button{
  flex:1 1 220px; min-height:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--grad-orange) !important; color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:none !important; border-radius:var(--pill) !important;
  font-family:var(--ff-display); font-weight:700; font-size:1rem;
  box-shadow:var(--sh-orange); transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.africbiz.ab-woo div.product form.cart button.single_add_to_cart_button:hover{
  transform:translateY(-2px); box-shadow:0 20px 44px -12px rgba(249,115,22,.7);
}

/* Métadonnées (catégorie, référence) */
.africbiz.ab-woo div.product .product_meta{
  font-size:.9rem; color:var(--muted); padding-top:16px;
  border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px;
}
.africbiz.ab-woo div.product .product_meta a{ color:var(--blue-deep); text-decoration:none; }
.africbiz.ab-woo div.product .product_meta a:hover{ color:var(--orange); }

/* ---- 4. Onglets Description / Caractéristiques / Avis / FAQ ----------- */
.africbiz.ab-woo .woocommerce-tabs{
  margin:46px 0 0; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm);
}
.africbiz.ab-woo .woocommerce-tabs ul.tabs{
  display:flex; flex-wrap:wrap; gap:2px; margin:0 !important; padding:0 10px !important;
  list-style:none; background:var(--surface); border-bottom:1px solid var(--line);
}
.africbiz.ab-woo .woocommerce-tabs ul.tabs::before,
.africbiz.ab-woo .woocommerce-tabs ul.tabs li::before,
.africbiz.ab-woo .woocommerce-tabs ul.tabs li::after{ display:none !important; }
.africbiz.ab-woo .woocommerce-tabs ul.tabs li{
  background:transparent !important; border:none !important; border-radius:0 !important;
  margin:0 !important; padding:0 !important;
}
.africbiz.ab-woo .woocommerce-tabs ul.tabs li a{
  display:block; padding:16px 20px !important;
  font-family:var(--ff-display); font-weight:600; font-size:.95rem;
  color:var(--muted) !important; text-decoration:none;
  border-bottom:3px solid transparent; transition:color .2s, border-color .2s;
}
.africbiz.ab-woo .woocommerce-tabs ul.tabs li:hover a{ color:var(--ink) !important; }
.africbiz.ab-woo .woocommerce-tabs ul.tabs li.active a{
  color:var(--ink) !important; border-bottom-color:var(--orange);
}
.africbiz.ab-woo .woocommerce-tabs .panel{
  margin:0 !important; padding:30px 34px !important;
  color:var(--ink); font-size:.98rem; line-height:1.72;
}
.africbiz.ab-woo .woocommerce-tabs .panel > h2:first-child{ display:none; }
.africbiz.ab-woo .woocommerce-tabs .panel img{
  max-width:100%; height:auto; border-radius:var(--r); margin:16px 0; display:block;
}
.africbiz.ab-woo .woocommerce-tabs .panel p{ margin:0 0 14px; }
.africbiz.ab-woo .woocommerce-tabs .panel table{
  width:100%; border-collapse:collapse; margin:12px 0;
}
.africbiz.ab-woo .woocommerce-tabs .panel table th,
.africbiz.ab-woo .woocommerce-tabs .panel table td{
  padding:11px 14px; border:1px solid var(--line); text-align:left; font-size:.94rem;
}
.africbiz.ab-woo .woocommerce-tabs .panel table th{ background:var(--surface); font-weight:600; }

/* ---- 5. Produits similaires ------------------------------------------ */
.africbiz.ab-woo .related.products,
.africbiz.ab-woo .upsells.products{ margin-top:52px; }
.africbiz.ab-woo .related.products > h2,
.africbiz.ab-woo .upsells.products > h2{
  font-family:var(--ff-display); font-size:1.4rem; color:var(--ink); margin:0 0 22px;
}

/* ---- 6. Messages WooCommerce ----------------------------------------- */
.africbiz.ab-woo .woocommerce-message,
.africbiz.ab-woo .woocommerce-info,
.africbiz.ab-woo .woocommerce-error{
  border-radius:var(--r); border:1px solid var(--line);
  border-top:3px solid var(--blue); background:var(--surface);
  padding:16px 20px; color:var(--ink); font-size:.95rem;
}
.africbiz.ab-woo .woocommerce-message{ border-top-color:#047857; }
.africbiz.ab-woo .woocommerce-error{ border-top-color:#d63638; }
.africbiz.ab-woo .woocommerce-message .button,
.africbiz.ab-woo .woocommerce-info .button{
  background:var(--grad-orange) !important; color:#fff !important;
  border-radius:var(--pill) !important; padding:9px 18px !important;
}

/* ---- 7. Adaptation mobile -------------------------------------------- */
@media (max-width:900px){
  .africbiz.ab-woo div.product{ grid-template-columns:1fr; gap:26px; }
  .africbiz.ab-woo .site-content{ padding-top:22px; padding-bottom:44px; }
  .africbiz.ab-woo .woocommerce-tabs .panel{ padding:22px 20px !important; }
  .africbiz.ab-woo .woocommerce-tabs ul.tabs{ padding:0 6px !important; }
  .africbiz.ab-woo .woocommerce-tabs ul.tabs li a{ padding:13px 14px !important; font-size:.9rem; }
}
@media (max-width:520px){
  .africbiz.ab-woo div.product form.cart{ padding:14px; gap:10px; }
  .africbiz.ab-woo div.product form.cart button.single_add_to_cart_button{ flex:1 1 100%; }
}

/* =========================================================================
   ENCARTS PERMANENTS — correction client, sept. 2026
   « Produit du moment » (haut droite), « Prochain conteneur » et
   « Produit introuvable ? » (bas droite, empilés au-dessus de WhatsApp).
   ========================================================================= */

/* ---- Lien orange dans la barre du haut ------------------------------- */
.topbar .r .tb-hot{
  color:var(--orange) !important; font-weight:700;
}
.topbar .r .tb-hot .ic{ color:var(--orange); }
.topbar .r .tb-hot:hover{ color:var(--orange-deep) !important; }

/* ---- Badge « Prochain conteneur » ------------------------------------ */
.ab-ctn-fab{
  position:fixed; right:18px; bottom:150px; z-index:91;
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 18px 11px 14px; border-radius:var(--pill);
  background:linear-gradient(135deg,#1565C0 0%,#0B3E8C 100%);
  color:#fff !important; text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(21,101,192,.6);
  max-width:min(320px, calc(100vw - 36px));
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ab-ctn-fab:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -12px rgba(21,101,192,.75); }
.ab-ctn-fab__ic{ display:grid; place-items:center; flex:none; }
.ab-ctn-fab__ic .ic{ width:20px; height:20px; color:#fff; }
.ab-ctn-fab__txt{ display:flex; flex-direction:column; line-height:1.25; }
.ab-ctn-fab__txt b{ font-family:var(--ff-display); font-size:.9rem; font-weight:700; color:#fff; }
.ab-ctn-fab__txt span{ font-size:.75rem; color:rgba(255,255,255,.9); }
.ab-ctn-fab__dot{
  position:absolute; top:-4px; right:-4px; width:14px; height:14px; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px rgba(46,144,250,.9);
}
.ab-ctn-fab__dot::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:rgba(255,255,255,.85); animation:abSrcPulse 1.8s ease-out infinite .6s;
}

/* ---- Encart « Produit du moment » ------------------------------------ */
.ab-pom{
  position:fixed; top:96px; right:18px; z-index:92;
  width:min(304px, calc(100vw - 36px));
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); padding:14px;
  opacity:0; transform:translateY(-10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.ab-pom.is-in{ opacity:1; transform:translateY(0); }
.ab-pom__close{
  position:absolute; top:8px; right:9px; width:26px; height:26px;
  border:none; border-radius:50%; background:var(--surface); color:var(--muted);
  font-size:17px; line-height:1; cursor:pointer; transition:background .2s, color .2s;
}
.ab-pom__close:hover{ background:var(--line); color:var(--ink); }
.ab-pom__tag{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:10px;
  padding:5px 12px; border-radius:var(--pill);
  background:var(--grad-orange); color:#fff;
  font-family:var(--ff-display); font-size:.72rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase;
}
.ab-pom__tag .ic{ width:14px; height:14px; color:#fff; }
.ab-pom__link{ display:flex; gap:12px; align-items:flex-start; text-decoration:none; }
.ab-pom__img{
  width:72px; height:72px; flex:none; object-fit:cover;
  border-radius:12px; border:1px solid var(--line);
}
.ab-pom__body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ab-pom__body b{
  font-family:var(--ff-display); font-size:.93rem; line-height:1.3; color:var(--ink);
}
.ab-pom__price{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; font-size:.92rem; }
.ab-pom__price del{ color:var(--muted); font-weight:500; font-size:.85em; margin-right:5px; }
.ab-pom__price ins{ text-decoration:none; color:var(--orange-deep); }
.ab-pom__cta{
  display:inline-flex; align-items:center; gap:5px; margin-top:2px;
  font-size:.8rem; font-weight:600; color:var(--blue-deep);
}
.ab-pom__cta .ic{ width:14px; height:14px; }

/* ---- Empilement sur petit écran : on évite l'encombrement ------------- */
@media (max-width:900px){
  .ab-pom{ top:auto; bottom:calc(100% + 0px); display:none; } /* masqué : trop encombrant sur mobile */
  .ab-ctn-fab{ bottom:140px; right:12px; padding:9px 14px 9px 11px; }
  .ab-ctn-fab__txt b{ font-size:.82rem; }
  .ab-ctn-fab__txt span{ font-size:.7rem; }
}
@media (prefers-reduced-motion: reduce){
  .ab-ctn-fab__dot::after{ animation:none; }
  .ab-pom{ transition:none; opacity:1; transform:none; }
}

/* =========================================================================
   ILLUSTRATIONS DE PAGE — bandes texte + photo (correction client, sept. 2026)
   Permet d'aérer les pages composées uniquement de texte.
   ========================================================================= */
.ab-illus{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:38px; align-items:center; margin:8px 0;
}
.ab-illus--rev .ab-illus__media{ order:-1; }
.ab-illus__media{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh); margin:0;
}
.ab-illus__media img{
  width:100%; height:auto; max-height:400px; object-fit:cover; display:block;
}
.ab-illus__media figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 20px 16px; color:#fff; font-size:.88rem; line-height:1.45;
  background:linear-gradient(180deg, rgba(11,20,36,0), rgba(11,20,36,.78));
}
.ab-illus__txt h2{ margin:12px 0 12px; }
.ab-illus__txt p{ color:var(--muted); line-height:1.7; }
.ab-illus__txt p strong{ color:var(--ink); }
@media (max-width:820px){
  .ab-illus{ grid-template-columns:1fr; gap:22px; }
  .ab-illus--rev .ab-illus__media{ order:0; }
  .ab-illus__media img{ max-height:300px; }
}

/* Bande photo pleine largeur, pour couper un long bloc de texte. */
.ab-photostrip{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  margin:36px 0; border:1px solid var(--line); box-shadow:var(--sh);
}
.ab-photostrip img{ width:100%; height:auto; max-height:340px; object-fit:cover; display:block; }
.ab-photostrip__cap{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:34px 26px 20px;
  background:linear-gradient(180deg, rgba(11,20,36,0), rgba(11,20,36,.82));
  color:#fff;
}
.ab-photostrip__cap b{ display:block; font-family:var(--ff-display); font-size:1.15rem; margin-bottom:4px; }
.ab-photostrip__cap span{ font-size:.9rem; color:rgba(255,255,255,.88); }
@media (max-width:640px){
  .ab-photostrip img{ max-height:230px; }
  .ab-photostrip__cap{ padding:26px 18px 16px; }
  .ab-photostrip__cap b{ font-size:1rem; }
}

/* ---- Filtre par catégorie sur la boutique (client, sept. 2026) -------- */
.ab-catfilter{
  display:flex; flex-wrap:wrap; gap:9px; margin:0 0 30px;
}
.ab-catfilter__chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:var(--pill);
  background:var(--paper); border:1px solid var(--line);
  color:var(--ink) !important; text-decoration:none;
  font-size:.9rem; font-weight:600; white-space:nowrap;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.ab-catfilter__chip:hover{ border-color:var(--blue); color:var(--blue-deep) !important; }
.ab-catfilter__chip.is-active{
  background:var(--grad-orange); border-color:transparent;
  color:#fff !important; box-shadow:var(--sh-orange);
}
.ab-catfilter__n{
  display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 6px;
  border-radius:var(--pill); background:var(--surface); color:var(--muted);
  font-size:.74rem; font-weight:700;
}
.ab-catfilter__chip.is-active .ab-catfilter__n{ background:rgba(255,255,255,.24); color:#fff; }
@media (max-width:640px){
  .ab-catfilter{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
  .ab-catfilter::-webkit-scrollbar{ display:none; }
  .ab-catfilter__chip{ font-size:.85rem; padding:8px 14px; }
}