/* ═══════════════════════════════════════════════════════════════
   BizVa v13 — Rebrand Layer (loaded last, non-destructive)
   Goal: modern, soft, fluid, elegant. Keeps palette & Poppins.
═══════════════════════════════════════════════════════════════ */

:root{
  /* Refined palette — same hues, calmer luminance */
  --primary:hsl(24 55% 30%);
  --primary-light:hsl(24 55% 42%);
  --primary-soft:hsl(24 55% 96%);
  --secondary:hsl(45 95% 52%);
  --accent:hsl(152 42% 36%);
  --espresso:hsl(22 22% 13%);
  --espresso-soft:hsl(22 22% 22%);
  --cream:hsl(40 38% 98%);
  --muted:hsl(36 24% 95.5%);
  --muted-fg:hsl(22 12% 44%);
  --border:hsl(35 22% 90%);
  --card:#ffffff;

  /* Modern soft shadow system */
  --sh-xs:0 1px 2px hsl(22 25% 12% / .04);
  --sh-sm:0 2px 8px hsl(22 25% 12% / .06);
  --sh-md:0 8px 24px -8px hsl(22 25% 12% / .12);
  --sh-lg:0 24px 56px -16px hsl(22 25% 12% / .18);
  --sh-warm:0 18px 44px -18px hsl(24 55% 30% / .35);
  --sh-gold:0 16px 40px -14px hsl(45 95% 52% / .45);

  /* Smooth gradients */
  --grad-primary:linear-gradient(135deg,hsl(24 60% 34%) 0%,hsl(24 70% 26%) 100%);
  --grad-gold:linear-gradient(135deg,hsl(45 100% 58%) 0%,hsl(38 95% 50%) 100%);
  --grad-cream:linear-gradient(180deg,hsl(40 50% 99%) 0%,hsl(36 30% 96%) 100%);
  --grad-hero:radial-gradient(1200px 600px at 15% 10%,hsl(45 95% 52% / .14),transparent 60%),
              radial-gradient(900px 500px at 90% 90%,hsl(152 42% 36% / .12),transparent 60%),
              linear-gradient(160deg,hsl(40 38% 98%) 0%,hsl(36 30% 95%) 100%);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --r-sm:.625rem;
  --r-md:.875rem;
  --r-lg:1.25rem;
  --r-xl:1.75rem;
  --r-pill:999px;
}

/* ── BASE / TYPOGRAPHY ─────────────────────────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--cream);
  color:var(--espresso);
  font-feature-settings:"ss01","cv11";
  line-height:1.55;
  letter-spacing:-.005em;
}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--espresso)}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.65rem,3vw,2.5rem);font-weight:700}
h3{font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:700}
p{color:hsl(22 16% 28%)}
.text-muted,.muted{color:var(--muted-fg)!important}
::selection{background:hsl(45 95% 52% / .35);color:var(--espresso)}

/* Tasteful focus ring */
*:focus-visible{outline:2px solid hsl(24 55% 42% / .55);outline-offset:2px;border-radius:.5rem}

/* ── SCROLLBAR ─────────────────────────────────────────────── */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:hsl(22 18% 78%);border-radius:999px;border:2px solid var(--cream)}
*::-webkit-scrollbar-thumb:hover{background:hsl(22 18% 60%)}
.no-scrollbar::-webkit-scrollbar{display:none}

/* ── NAVBAR — glass + soft border ──────────────────────────── */
#navbar{
  background:hsl(40 38% 98% / .78)!important;
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid hsl(35 22% 90% / .8);
  box-shadow:0 1px 0 hsl(35 22% 90% / .5),0 6px 20px -16px hsl(22 25% 12% / .25);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
#navbar .kente{height:2px!important;opacity:.85}
#navbar .nav-link{
  position:relative;padding:.5rem .85rem;border-radius:var(--r-pill);
  font-weight:500;font-size:.875rem;color:var(--espresso-soft);
  transition:color .2s var(--ease),background .2s var(--ease);
}
#navbar .nav-link:hover{color:var(--primary);background:hsl(24 55% 96%)}
#navbar .nav-link.active{color:var(--primary);background:hsl(24 55% 94%)}
#navbar a[onclick*="home"] > div:first-child{
  background:var(--grad-primary)!important;
  box-shadow:0 6px 16px -6px hsl(24 55% 30% / .55);
  border-radius:.85rem!important;
}

/* ── BUTTONS — refined, fluid ──────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.35rem;border-radius:var(--r-pill);
  font-family:'Poppins',sans-serif;font-weight:600;font-size:.875rem;
  cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  white-space:nowrap;letter-spacing:.005em;
}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--grad-primary);color:var(--cream);box-shadow:var(--sh-warm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px -18px hsl(24 55% 30% / .55);filter:brightness(1.04)}
.btn-gold{background:var(--grad-gold);color:var(--espresso);box-shadow:var(--sh-gold)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn-outline{background:rgba(255,255,255,.6);border:1px solid var(--border);color:var(--espresso);backdrop-filter:blur(6px)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.btn-ghost{background:transparent;color:var(--muted-fg)}
.btn-ghost:hover{color:var(--primary);background:var(--primary-soft)}
.btn-sm{padding:.5rem 1rem;font-size:.8rem}
.btn-lg{padding:1rem 2rem;font-size:.95rem}

/* ── INPUTS — soft, accessible ─────────────────────────────── */
.input{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-md);
  border:1px solid var(--border);background:#fff;
  font:500 .9rem/'Poppins',sans-serif;color:var(--espresso);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
  outline:none;
}
.input:hover{border-color:hsl(35 22% 78%)}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 4px hsl(24 55% 42% / .12);background:#fff}
.input::placeholder{color:hsl(22 12% 60%)}
.label{display:block;font-weight:600;font-size:.78rem;color:var(--espresso);margin-bottom:.45rem;letter-spacing:.01em}
textarea.input{min-height:7rem;resize:vertical}

/* ── CARDS — modern, soft, elegant ─────────────────────────── */
.card,.service-card,.product-card{
  background:var(--card);
  border-radius:var(--r-lg);
  border:1px solid hsl(35 22% 92%);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .25s var(--ease);
}
.card:hover,.service-card:hover,.product-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--sh-md);
  border-color:hsl(35 22% 82%);
}
.service-card::after{height:3px!important;opacity:.9;border-radius:0 0 var(--r-lg) var(--r-lg)}
.service-card img{transition:transform .9s var(--ease-out)}
.service-card:hover img{transform:scale(1.06)}

/* ── KENTE — slightly softer, less rigid ───────────────────── */
.kente{height:3px;border-radius:3px;opacity:.85}
.kente-border::before{opacity:.7}

/* ── SECTIONS — fluid spacing ──────────────────────────────── */
section{padding-block:clamp(3rem,6vw,5.5rem)!important}
section[style*="padding:3rem 0"]{padding-block:clamp(2rem,4vw,3.25rem)!important}
section[style*="padding:2rem 0"]{padding-block:clamp(1.5rem,3vw,2.25rem)!important}

/* Hero — modern aurora gradient */
#page-home > section:first-of-type{
  background:var(--grad-hero)!important;
}
#page-home > section:first-of-type::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 300px at 80% 20%, hsl(45 95% 52% / .12), transparent 60%),
    radial-gradient(500px 280px at 20% 80%, hsl(24 55% 42% / .10), transparent 60%);
  mix-blend-mode:normal;
}
#page-home h1{letter-spacing:-.035em}

/* Soft hero banners */
.hero-banner{
  background:var(--grad-cream)!important;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.hero-banner::after{
  content:"";position:absolute;inset:auto -10% -40% auto;width:60vw;height:60vw;border-radius:50%;
  background:radial-gradient(circle,hsl(45 95% 52% / .12),transparent 70%);
  pointer-events:none;
}

/* Espresso (dark) sections — richer */
section[style*="var(--espresso)"]{
  background:linear-gradient(160deg,hsl(22 22% 12%) 0%,hsl(22 24% 9%) 100%)!important;
  color:hsl(40 30% 92%);
}
section[style*="var(--espresso)"] h1,
section[style*="var(--espresso)"] h2,
section[style*="var(--espresso)"] h3{color:#fff}
section[style*="var(--espresso)"] p{color:hsl(40 20% 78%)}

/* Muted sections — gentle paper */
section[style*="var(--muted)"]{background:var(--grad-cream)!important}

/* Africa pattern — subtler */
.africa-pattern{position:relative}
.africa-pattern::before{
  content:"";position:absolute;inset:0;opacity:.04;pointer-events:none;
  background-image:radial-gradient(hsl(45 95% 52%) 1px,transparent 1px),
                   radial-gradient(hsl(45 95% 52%) 1px,transparent 1px);
  background-size:32px 32px,32px 32px;background-position:0 0,16px 16px;
}

/* ── MODALS ─────────────────────────────────────────────────
   Règles retirées d'ici : la mise en page complète des modales
   (fond, boîte, entête, corps) vit désormais UNIQUEMENT dans
   assets/bizva-consolidated.css — notamment pour éviter que le
   backdrop-filter:blur(10px) qui était ici ne revienne alourdir
   l'ouverture des modales sur mobile. */

/* ── TOASTS — softer ──────────────────────────────────────── */
.toast{border-radius:var(--r-pill);padding:.85rem 1.25rem;box-shadow:var(--sh-md);font-weight:500}
.toast-ok{background:linear-gradient(135deg,#22c55e,#16a34a)}
.toast-err{background:linear-gradient(135deg,#ef4444,#dc2626)}
.toast-info{background:var(--grad-primary)}

/* ── BADGES ───────────────────────────────────────────────── */
.badge,[class*="badge"]{border-radius:var(--r-pill)}

/* ── FOOTER ───────────────────────────────────────────────── */
#main-footer{
  background:linear-gradient(180deg,hsl(22 22% 11%) 0%,hsl(22 26% 7%) 100%)!important;
  position:relative;
}
#main-footer::before{
  content:"";display:block;height:3px;
  background:repeating-linear-gradient(90deg,hsl(45 95% 52%) 0 8px,hsl(24 55% 30%) 8px 16px,hsl(22 22% 13%) 16px 24px,hsl(152 42% 36%) 24px 32px);
  opacity:.9;
}
#main-footer a:hover{color:hsl(45 95% 60%)!important;transition:color .2s var(--ease)}

/* ── BOTTOM NAV (mobile) ──────────────────────────────────── */
#bottom-nav{
  background:hsl(40 38% 98% / .92)!important;
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-top:1px solid hsl(35 22% 90% / .8)!important;
  box-shadow:0 -8px 24px -8px hsl(22 25% 12% / .12);
}
#bottom-nav a,#bottom-nav button{transition:color .2s var(--ease),transform .2s var(--ease)}
#bottom-nav a:active,#bottom-nav button:active{transform:scale(.92)}

/* ── MOBILE MENU ──────────────────────────────────────────── */
#mob-menu{
  background:hsl(40 38% 98% / .98)!important;
  backdrop-filter:blur(20px);
}
#mob-menu .nav-link{transition:all .2s var(--ease);font-weight:500}
#mob-menu .nav-link:hover{background:var(--primary-soft);color:var(--primary);transform:translateX(2px)}

/* ── IMAGES — softer corners ──────────────────────────────── */
img{border-radius:inherit}
.card img,.service-card img{border-radius:0}

/* ── REVEAL ANIMATIONS (driven by v13 JS) ─────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.page-section-enter{animation:fadeUp .6s var(--ease-out) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── UTILITIES — subtle dividers ──────────────────────────── */
hr{border:none;border-top:1px solid var(--border);margin:1.5rem 0}

/* ── REDUCE MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── PRINT (invoice etc.) ─────────────────────────────────── */
@media print{
  #navbar,#bottom-nav,#main-footer,.modal-bg,#toasts{display:none!important}
  body{background:#fff}
}

/* ── v13.1 — Hero quick service selector ───────────────── */
.hero-srv-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;padding:.85rem .4rem;border-radius:.85rem;
  background:linear-gradient(180deg,#fff,#fdf6e8);
  border:1.5px solid rgba(212,145,42,.22);
  color:var(--espresso);font-weight:600;font-size:.78rem;
  cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font-family:inherit;line-height:1.1;
}
.hero-srv-card>:first-child{font-size:1.35rem}
.hero-srv-card:hover{
  transform:translateY(-2px);
  border-color:hsl(var(--gold));
  box-shadow:0 8px 18px -8px rgba(212,145,42,.55);
}
.hero-srv-card:active{transform:translateY(0)}

/* ── Carte hero "Espresso Contraste" (variante validée) ── */
.hero-card-dark{
  background:linear-gradient(165deg,rgba(58,34,16,.92),rgba(30,16,6,.96));
  border:1px solid rgba(212,145,42,.35);
}
.hero-srv-card.hero-srv-card-dark{
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(212,145,42,.3);
  color:#fdf3e2;
}
.hero-srv-card.hero-srv-card-dark:hover{
  border-color:hsl(var(--gold));
  box-shadow:0 8px 18px -8px rgba(212,145,42,.6);
}

/* ── v32 — Mini-formulaire rapide (hero) ─────────────────── */
.hero-quick-select{
  width:100%;padding:.6rem .7rem;border-radius:.6rem;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.2);
  color:#fff;font-size:.8rem;font-family:inherit;
}
.hero-quick-select:focus{outline:none;border-color:hsl(var(--gold))}
.hero-phone-wrap{
  display:flex;border-radius:.6rem;overflow:hidden;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.2);
}
.hero-dial-select{
  border:none;background:rgba(255,255,255,.05);color:#fdf3e2;
  font-size:.7rem;padding:0 .35rem;border-right:1.5px solid rgba(255,255,255,.15);
  font-family:inherit;max-width:5.2rem;
}
.hero-dial-select:focus{outline:none}
.hero-phone-input{
  flex:1;min-width:0;background:transparent;border:none;color:#fff;
  font-size:.78rem;padding:0 .6rem;font-family:inherit;
}
.hero-phone-input::placeholder{color:rgba(255,255,255,.5)}
.hero-phone-input:focus{outline:none}
.hero-urgency-pill{
  flex:1;text-align:center;padding:.4rem .3rem;border-radius:.5rem;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);
  color:#fdf3e2;font-size:.68rem;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .18s ease;
}
.hero-urgency-pill:hover{border-color:hsl(var(--gold))}
.hero-urgency-pill.active{
  background:linear-gradient(135deg,hsl(var(--gold)),hsl(38,100%,55%));
  border-color:transparent;color:var(--espresso);
}
.hero-quick-input{
  width:100%;padding:.6rem .7rem .6rem 1.9rem;border-radius:.6rem;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.2);
  color:#fff;font-size:.8rem;font-family:inherit;
}
.hero-quick-input::placeholder{color:rgba(255,255,255,.5)}
.hero-quick-input:focus{outline:none;border-color:hsl(var(--gold))}
.hero-quick-btn-secondary{
  width:100%;padding:.55rem;border-radius:.6rem;background:transparent;
  border:1.5px solid rgba(255,255,255,.3);color:#fff;font-weight:600;
  font-size:.8rem;cursor:pointer;font-family:inherit;
}
.hero-quick-btn-secondary:hover{border-color:hsl(var(--gold));color:hsl(var(--gold))}

/* ── v31 — Bandeau métiers du bas, désormais cliquable ───── */
.tool-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;padding:.75rem .5rem;border-radius:.85rem;min-width:78px;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.14);
  cursor:pointer;transition:all .18s ease;font-family:inherit;
}
.tool-chip:hover{border-color:hsl(var(--gold));background:rgba(255,255,255,.08);transform:translateY(-2px)}
.tool-chip svg{stroke:rgba(255,250,240,.85);transition:stroke .18s ease}
.tool-chip:hover svg{stroke:hsl(var(--gold))}
.tool-chip span{color:rgba(255,250,240,.75);font-size:.72rem;font-weight:500;text-align:center}

/* ── Mini-formulaire rapide du hero (v32) — CSS manquant à l'origine :
   ces éléments s'affichaient avec le style par défaut du navigateur sur
   fond de carte sombre (texte blanc sur liste déroulante blanche,
   illisible). ── */
.hero-quick-select,
.hero-quick-input{
  width:100%;
  height:2.4rem;
  padding:0 .7rem;
  border-radius:.6rem;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(212,145,42,.3);
  color:#fdf3e2;
  font-family:inherit;
  font-size:.8rem;
  outline:none;
  transition:border-color .15s;
}
.hero-quick-select{ cursor:pointer; }
.hero-quick-select:focus,
.hero-quick-input:focus{ border-color:hsl(var(--gold)); }
.hero-quick-input::placeholder{ color:rgba(255,248,230,.45); }
/* Les <option> héritent du fond sombre : sans ceci, la liste déroulante
   du <select> reste blanche par défaut sur la plupart des navigateurs,
   avec le texte clair de .hero-quick-select devenu illisible dessus. */
.hero-quick-select option{
  background:#2a1810;
  color:#fdf3e2;
}

.hero-phone-wrap{
  display:flex;
  align-items:stretch;
  height:2.4rem;
  border-radius:.6rem;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(212,145,42,.3);
  transition:border-color .15s;
  overflow:visible;
}
.hero-phone-wrap:focus-within{ border-color:hsl(var(--gold)); }
.hero-wa-icon{ font-size:.85rem; flex-shrink:0; line-height:1; display:flex; align-items:center; padding-left:.55rem; color:rgba(255,248,230,.65); }
/* ── Indicatif pays + numéro séparés (logique portée du formulaire
   d'inscription CPF) : un premier bloc compact "🇹🇬 +228" avec recherche,
   puis le champ numéro seul — au lieu d'un unique champ mêlant les deux. ── */
.hero-tel-prefix-search{
  flex:none;
  width:5.5rem;
  position:relative;
  border-left:1.5px solid rgba(212,145,42,.25);
  border-right:1.5px solid rgba(212,145,42,.25);
  margin-left:.4rem;
}
.hero-tel-prefix-input{
  border:none!important;
  background:transparent!important;
  height:100%;
  padding:0 .3rem 0 1.85rem;   /* v462 : place du drapeau (image) à gauche */
  font-size:.72rem;
  font-weight:700;
  color:#fdf3e2!important;
  font-family:inherit;
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
  outline:none!important;
}
.hero-phone-input{
  flex:1;
  min-width:0;
  background:transparent!important;
  border:none!important;
  color:#fdf3e2!important;
  font-size:.8rem!important;
  outline:none!important;
  height:100%;
  padding:0 .6rem;
}
.hero-phone-input::placeholder{ color:rgba(255,248,230,.45); }
.hero-tel-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  z-index:50;
  width:230px;
  max-height:220px;
  overflow-y:auto;
  background:#241608;
  border:1px solid rgba(212,145,42,.35);
  border-radius:.6rem;
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}
.hero-tel-dropdown.open{ display:block; }
.hero-tel-option{
  padding:.5rem .7rem;
  font-size:.75rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.45rem;
  color:#fdf3e2;
}
.hero-tel-option:hover{ background:rgba(212,145,42,.16); }
.hero-tel-option-flag{ font-size:.85rem; }
.hero-tel-option-flag{ display:inline-flex; align-items:center; flex:none; }
.hero-tel-flagbox{ position:absolute; left:.5rem; top:50%; transform:translateY(-50%); display:flex; align-items:center; pointer-events:none; font-size:.85rem; }
.hero-tel-empty{ padding:.7rem; font-size:.7rem; color:rgba(255,248,230,.5); text-align:center; }

.hero-urgency-pill{
  flex:1;
  padding:.4rem .3rem;
  border-radius:.5rem;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(212,145,42,.25);
  color:rgba(255,248,230,.75);
  font-size:.68rem;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
}
.hero-urgency-pill:hover{ border-color:hsl(var(--gold)); }
.hero-urgency-pill.active{
  background:linear-gradient(135deg,hsl(var(--gold)),hsl(38,100%,55%));
  border-color:transparent;
  color:var(--espresso);
}

/* ── Compte à rebours visible avant ouverture auto du grand formulaire ── */
.hero-quick-countdown{
  margin-bottom:.6rem;
  padding:.5rem .6rem;
  border-radius:.55rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(212,145,42,.3);
}
.hero-quick-countdown-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.4rem;
}
.hero-quick-countdown-text{
  font-size:.7rem;
  color:rgba(255,248,230,.8);
}
.hero-quick-countdown-text strong{ color:hsl(var(--gold)); }
.hero-quick-countdown-cancel{
  flex-shrink:0;
  width:1.25rem;
  height:1.25rem;
  border-radius:50%;
  border:1px solid rgba(255,248,230,.3);
  background:transparent;
  color:rgba(255,248,230,.6);
  font-size:.65rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-quick-countdown-cancel:hover{ border-color:hsl(var(--gold)); color:hsl(var(--gold)); }
.hero-quick-countdown-bar{
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.1);
  overflow:hidden;
}
.hero-quick-countdown-fill{
  height:100%;
  width:0%;
  border-radius:2px;
  background:linear-gradient(90deg,hsl(var(--gold)),hsl(38,100%,55%));
}

/* ── Modale "Avis clients réels" (onglets + slider + formulaire) ── */
.reviews-modal-box,
#reviews-modal .modal-box{
  max-width:30rem;
  background:var(--espresso)!important;
  color:rgba(255,248,230,.92)!important;
  overflow:hidden;
}
.reviews-modal-head,
#reviews-modal .modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--espresso)!important;
  color:#fff8e6;
}
.reviews-modal-head h2{ color:#fff8e6; }
.reviews-modal-subtitle{
  font-size:.72rem;
  color:rgba(255,248,230,.55);
  margin-top:.15rem;
}
.reviews-modal-body{ padding-top:1rem; }
.reviews-tabs{
  display:flex;
  gap:.5rem;
  margin-bottom:1rem;
}
.reviews-tab{
  flex:1;
  text-align:center;
  padding:.6rem;
  border-radius:.55rem .55rem 0 0;
  font-size:.8rem;
  font-weight:500;
  cursor:pointer;
  color:rgba(255,248,230,.55);
  border-bottom:2px solid transparent;
  background:transparent;
}
.reviews-tab.active{
  color:#fff8e6;
  background:rgba(255,255,255,.06);
  border-bottom-color:hsl(var(--gold));
}
.reviews-panel{
  background:rgba(255,255,255,.06);
  border-radius:0 .7rem .7rem .7rem;
  padding:1.25rem;
}
.reviews-empty{
  text-align:center;
  font-size:.8rem;
  color:rgba(255,248,230,.65);
  padding:1.5rem 0;
}
.reviews-slide-top{
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.9rem;
}
.reviews-avatar{
  width:3.1rem;
  height:3.1rem;
  border-radius:50%;
  background:rgba(212,145,42,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.35rem;
  font-weight:700;
  color:hsl(var(--gold));
  flex-shrink:0;
}
.reviews-slide-who{ flex:1; min-width:0; }
.reviews-slide-name{ font-weight:500; font-size:.85rem; }
.reviews-slide-meta{ font-size:.68rem; color:rgba(255,248,230,.55); }
.reviews-slide-stars{ color:hsl(var(--gold)); font-size:.85rem; letter-spacing:1px; white-space:nowrap; }
.reviews-slide-text{
  font-size:.82rem;
  line-height:1.6;
  color:rgba(255,248,230,.92);
  min-height:4.2rem;
}
.reviews-slide-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1rem;
}
.reviews-nav-btn{
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:.85rem;
  flex-shrink:0;
}
.reviews-nav-btn:hover{ background:rgba(255,255,255,.16); }
.reviews-dots{ display:flex; gap:.4rem; }
.reviews-dot{
  height:6px;
  border-radius:3px;
  background:rgba(255,255,255,.25);
  width:6px;
  transition:width .2s,background .2s;
}
.reviews-dot.active{ width:1.1rem; background:hsl(var(--gold)); }
.reviews-form-stars{
  display:flex;
  gap:.4rem;
  font-size:1.4rem;
  cursor:pointer;
  margin:.4rem 0 .2rem;
}
.reviews-form-stars span{ color:rgba(255,248,230,.35); }
.reviews-form-stars span.on{ color:hsl(var(--gold)); }
.reviews-form-error{
  font-size:.7rem;
  color:hsl(4,80%,65%);
  margin:.15rem 0 .3rem;
}
#reviews-panel-form .label{ color:rgba(255,248,230,.7); font-size:.72rem; }
.reviews-form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  margin-top:.6rem;
}
@media (max-width:360px){
  .reviews-form-row{ grid-template-columns:1fr; }
}

/* ── Section "Témoignages clients" (page d'accueil) ──────────── */
.testi-section{ background:var(--espresso); }
.testi-section-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%, hsl(var(--gold) / .12), transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, hsl(24 55% 30% / .35), transparent 60%);
}
.testi-slider-refined{
  position:relative;
  border-radius:1rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  padding-top:.25rem;
}
.testi-card-refined{
  padding:1.5rem;
  border-radius:.85rem;
}
.testi-refined-quote{
  color:rgba(255,248,230,.88);
  font-size:.875rem;
  font-style:italic;
  line-height:1.7;
  margin-bottom:1.1rem;
}
.testi-refined-avatar{
  width:2.9rem;
  height:2.9rem;
  border-radius:50%;
  background:rgba(212,145,42,.15);
  border:1.5px solid hsl(var(--gold) / .45);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1rem;
  color:hsl(var(--gold));
  flex-shrink:0;
}
.testi-refined-name{ font-weight:600; font-size:.85rem; color:#fff8e6; }
.testi-refined-meta{ font-size:.72rem; color:rgba(255,248,230,.55); }
#testimonials-slider .gte-dot{
  width:6px; height:6px; border-radius:3px;
  background:rgba(255,255,255,.25); border:none; padding:0; cursor:pointer;
  transition:width .2s,background .2s;
}
#testimonials-slider .gte-dot.active{ width:1.1rem; background:hsl(var(--gold)); }
.testi-see-all-link{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  color:hsl(var(--gold));
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.testi-see-all-link:hover{ color:#fff8e6; }
#reviews-panel-form .input{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}
#reviews-panel-form .input::placeholder{ color:rgba(255,248,230,.4); }
#reviews-modal .btn-ghost{ color:rgba(255,248,230,.75)!important; }
#reviews-modal .btn-ghost:hover{ background:rgba(255,255,255,.08)!important; color:#fff8e6!important; }

.hero-quick-btn-secondary{
  width:100%;
  padding:.6rem;
  border-radius:.6rem;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.3);
  color:#fdf3e2;
  font-weight:600;
  font-size:.8rem;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.hero-quick-btn-secondary:hover{
  border-color:hsl(var(--gold));
  background:rgba(255,255,255,.06);
}

/* ── Modale de date/créneau (v43) — CSS manquant à l'origine, comme le
   reste du mini-formulaire. Design hybride validé avec le client :
   grille classique pour une courte liste de jours (mode "Cette semaine",
   ≤7 jours), défilement horizontal pour une longue liste (mode "Urgent",
   jusqu'à 2 mois — une grille de ~60 cases serait ingérable). ── */
.hero-dm-sub{
  font-size:.78rem;
  font-weight:600;
  color:var(--muted-fg);
  margin-bottom:.5rem;
}
.hero-dm-days{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.4rem;
  margin-bottom:1rem;
}
.hero-dm-days.hero-dm-days-scroll{
  display:flex;
  overflow-x:auto;
  gap:.5rem;
  padding-bottom:.35rem;
  scroll-snap-type:x proximity;
}
.hero-dm-month{
  grid-column:1/-1;
  font-size:.72rem;
  font-weight:600;
  color:var(--muted-fg);
  margin:.4rem 0 .1rem;
}
.hero-dm-days-scroll .hero-dm-month{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:0 .3rem;
  white-space:nowrap;
}
.hero-day{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.15rem;
  padding:.6rem .25rem;
  border-radius:.7rem;
  background:var(--muted);
  border:1.5px solid transparent;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s;
  scroll-snap-align:start;
}
.hero-dm-days-scroll .hero-day{ min-width:3.4rem; flex-shrink:0; }
.hero-day:hover{ border-color:hsl(var(--gold)); }
.hero-day.active{
  background:linear-gradient(135deg,hsl(var(--gold)),hsl(38,100%,55%));
  border-color:transparent;
}
.hero-day-dow{ font-size:.65rem; color:var(--muted-fg); text-transform:uppercase; }
.hero-day.active .hero-day-dow{ color:var(--espresso); opacity:.75; }
.hero-day-num{ font-size:1rem; font-weight:700; color:var(--espresso); }
.hero-day.active .hero-day-num{ color:var(--espresso); }
.hero-day-mon{ font-size:.62rem; color:var(--muted-fg); }
.hero-day.active .hero-day-mon{ color:var(--espresso); opacity:.75; }

/* Aujourd'hui : fond teinté doux + pastille + libellé "Aujourd'hui" */
.hero-day.is-today{
  background:#fef3c7;
  position:relative;
}
.hero-day.is-today .hero-day-dow{
  color:#92400e;
  font-weight:700;
}
.hero-day.is-today .hero-day-num,
.hero-day.is-today .hero-day-mon{ color:#92400e; }
.hero-day-today-dot{
  position:absolute;
  top:.3rem;
  right:.3rem;
  width:6px;
  height:6px;
  border-radius:50%;
  background:hsl(38,95%,50%);
}
/* Demain : libellé seul, pas de fond ni de pastille */
.hero-day.is-tomorrow .hero-day-dow{
  color:hsl(var(--gold));
  font-weight:700;
}
/* La sélection (clic) l'emporte toujours sur les indicateurs aujourd'hui/demain */
.hero-day.is-today.active,
.hero-day.is-tomorrow.active{
  background:linear-gradient(135deg,hsl(var(--gold)),hsl(38,100%,55%));
}
.hero-day.is-today.active .hero-day-dow,
.hero-day.is-today.active .hero-day-num,
.hero-day.is-today.active .hero-day-mon,
.hero-day.is-tomorrow.active .hero-day-dow{
  color:var(--espresso);
}
.hero-day.is-today.active .hero-day-today-dot{ background:var(--espresso); }

.hero-dm-slots{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5rem;
  margin-bottom:1rem;
}
.hero-slot{
  padding:.6rem .5rem;
  border-radius:999px;
  background:var(--muted);
  border:1.5px solid transparent;
  font-family:inherit;
  font-size:.82rem;
  font-weight:600;
  color:var(--espresso);
  cursor:pointer;
  text-align:center;
  transition:all .15s;
}
.hero-slot:hover{ border-color:hsl(var(--gold)); }
.hero-slot.active{
  background:linear-gradient(135deg,hsl(var(--gold)),hsl(38,100%,55%));
  border-color:transparent;
}

.hero-dm-recap{
  padding:.6rem .8rem;
  border-radius:.6rem;
  background:rgba(212,145,42,.12);
  border:1px dashed hsl(var(--gold));
  color:var(--espresso);
  font-size:.82rem;
  font-weight:600;
  margin-bottom:.25rem;
}
.hero-dm-foot{
  display:flex;
  gap:.6rem;
  padding:1rem 1.5rem;
  border-top:1px solid var(--border);
}
.hero-dm-foot .btn{ flex:1; justify-content:center; }

/* Rappel cliquable affiché dans le hero une fois une date confirmée */
.hero-datepanel-recap{
  padding:.5rem .7rem;
  border-radius:.6rem;
  background:rgba(255,255,255,.08);
  border:1px dashed rgba(212,145,42,.5);
  color:hsl(var(--gold));
  font-size:.75rem;
  font-weight:600;
  cursor:pointer;
  margin-bottom:.65rem;
  transition:border-color .15s,background .15s;
}
.hero-datepanel-recap:hover{
  background:rgba(255,255,255,.12);
  border-color:hsl(var(--gold));
}


/* ── v57c — Ligne "Que cherchez-vous depuis…" responsive ────── */
.hero-quick-title-mobile{ display:none; }
@media(max-width:768px){
  .hero-quick-title-desktop{ display:none!important; }
  .hero-quick-title-mobile{ display:block!important; }
}

/* ── v57c — Textarea besoin + boutons médias compacts ───────── */
.hero-quick-desc{
  width:100%;resize:none;background:rgba(255,255,255,.07);
  border:1.5px solid rgba(255,255,255,.2);border-radius:.6rem;
  color:#fff;font-size:.8rem;font-family:inherit;
  padding:.55rem .7rem;box-sizing:border-box;
}
.hero-quick-desc::placeholder{ color:rgba(255,248,230,.45); }
.hero-quick-desc:focus{ outline:none;border-color:hsl(var(--gold)); }
.hero-quick-media-row{ display:flex;gap:.4rem;margin-top:.4rem; }
.hero-quick-media-btn{
  flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:.5rem;color:rgba(255,248,230,.85);font-size:.68rem;
  padding:.4rem .3rem;cursor:pointer;transition:border-color .15s,background .15s;
  display:flex;align-items:center;justify-content:center;gap:.25rem;text-align:center;white-space:nowrap;
}
.hero-quick-media-btn:hover{ border-color:hsl(var(--gold));background:rgba(255,255,255,.1); }
.hero-quick-media-btn.active{ border-color:hsl(var(--gold));color:hsl(var(--gold));font-weight:600; }
/* v72 — icône séparée "parcourir un fichier" (à côté du micro, façon variante A) */
.hero-quick-media-btn--icon{
  flex:0 0 auto;width:2.1rem;padding:.4rem 0;font-size:.85rem;
}

/* v78 — capture forcée caméra mobile : on RÉUTILISE les mêmes icônes
   📸 / 🎬📷 que le desktop (hero-photo-cam-btn, hero-video-cam-btn,
   bm-photo-cam-btn, bm-video-cam-btn), déjà présentes dans la ligne
   d'origine — donc AUCUN élément ajouté, AUCUN changement visuel sur
   desktop (elles restent gérées par bizvaDetectCameraButtons()). On les
   affiche en plus sous 769px ; leur clic (bizvaCameraTrigger) ouvre alors
   la capture forcée au lieu de l'aperçu webcam. Tout reste sur une seule
   ligne, comme avant. */
@media(max-width:768px){
  #hero-photo-cam-btn, #hero-video-cam-btn, #bm-photo-cam-btn, #bm-video-cam-btn{
    display:inline-flex!important;
  }
}

/* v77 — MOBILE UNIQUEMENT (rien ici ne touche l'affichage desktop) :
   1) les 2 boutons CTA "Essayer sans risques" / "Voir les prestataires"
      restent sur la même ligne (ils passaient à la ligne avec btn-lg) ;
   2) le champ téléphone et le champ email du mini-formulaire hero
      passent chacun sur leur propre ligne pleine largeur, au lieu de se
      partager une grille à 2 colonnes trop étroite sur petit écran. */
@media(max-width:768px){
  #hero-cta-row{ flex-wrap:nowrap;gap:.5rem; }
  #hero-cta-row > a{
    flex:1;min-width:0;justify-content:center;text-align:center;
    font-size:.76rem!important;padding:.65rem .5rem!important;white-space:nowrap;
  }
  #hero-cta-row > a svg{ width:14px;height:14px;flex-shrink:0; }
  /* v85 — !important requis : #hero-phone-email-row porte désormais un
     style inline `grid-template-columns:minmax(0,1fr) minmax(0,1fr)`
     (ajouté en v76 pour le 50/50 robuste desktop), qui bat toujours une
     règle externe sans !important. Sans lui, cette règle n'avait plus
     aucun effet sous 768px et Téléphone/Email restaient forcés en 2
     colonnes sur mobile au lieu de s'empiler chacun pleine largeur. */
  #hero-phone-email-row{ grid-template-columns:1fr!important; }
}

/* v80 — MOBILE UNIQUEMENT (rien ici ne touche l'affichage desktop) :
   1) le H1 du hero devient centré et perd le suffixe "en 2 minutes"
      (texte plus court : "Réservez un prestataire") ;
   2) le paragraphe d'intro "BizVa connecte les ménages africains…"
      est masqué pour alléger le haut de page mobile ;
   3) la ligne "Que cherchez-vous / Êtes-vous à …" du mini-formulaire
      (déplacée juste après le H1 par le script après la section hero)
      peut se rétrécir correctement dans son conteneur flex. */
@media(max-width:768px){
  #hero-h1{ text-align:center; }
  #hero-h1-suffix{ display:none!important; }
  #hero-intro-p{ display:none!important; }
}

/* v78 — bouton "🤝 Devenir prestataire" du header mobile : texte réduit sur
   petits écrans pour qu'il tienne bien centré dans son bouton (il partage
   la barre du header avec le panier et le menu, donc peu de largeur). */
@media(max-width:480px){
  #mobile-provider-cta{ font-size:.62rem!important;padding:.35rem .55rem!important;gap:.3rem; }
}
@media(max-width:380px){
  #mobile-provider-cta{ font-size:.56rem!important;padding:.3rem .5rem!important; }
}

/* v73 — pastille de compteur SUR l'icône 📁 (pas sur le bouton Vocal) */
.hero-file-badge{
  position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 3px;
  border-radius:999px;background:hsl(var(--gold));color:var(--espresso);
  font-size:.6rem;font-weight:700;line-height:16px;text-align:center;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #1b120c;
}

/* v73 — liste des fichiers joints (tout type sauf scripts/exécutables) */
.hero-quick-files-list{ display:flex;flex-wrap:wrap;gap:.35rem; }
.hero-quick-files-list:empty{ margin:0; }
.hero-file-chip{
  display:flex;align-items:center;gap:.3rem;max-width:150px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
  border-radius:.5rem;padding:.3rem .5rem;font-size:.68rem;color:rgba(255,248,230,.85);
}
.hero-file-chip .name{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;max-width:90px;
}
.hero-file-chip .name:hover{ color:hsl(var(--gold)); }
.hero-file-chip button{
  background:none;border:none;color:#e24b4a;cursor:pointer;font-size:.7rem;
  padding:0;line-height:1;flex-shrink:0;
}

/* ── v62 — 3 colonnes séparées Photo / Vidéo / Vocal, chacune en mini-grille 3 par ligne ── */
.hero-quick-media-grid{
  display:flex;gap:0;margin-top:.4rem;
}
.hero-quick-media-grid:empty{ margin-top:0; }
.hero-media-col{
  flex:1;min-width:0;padding:0 .5rem;border-right:1px solid rgba(255,255,255,.1);
}
.hero-media-col:first-child{ padding-left:0; }
.hero-media-col:last-child{ border-right:none;padding-right:0; }
.hero-media-col:empty{ display:none; }
.hero-media-col-head{
  font-size:.6rem;color:rgba(255,248,230,.45);margin-bottom:.3rem;
  letter-spacing:.02em;display:flex;align-items:center;gap:.25rem;
}
.hero-media-col-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,44px));gap:.3rem;
}
.hero-media-tile{
  position:relative;width:44px;height:44px;border-radius:.4rem;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
}
.hero-media-tile img{ width:100%;height:100%;object-fit:cover;display:block; }
.hero-media-tile.hero-media-video,
.hero-media-tile.hero-media-audio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
}
.hero-media-tile .hero-media-play{ font-size:.8rem;color:rgba(255,248,230,.85);line-height:1; }
.hero-media-tile .hero-media-dur{ font-size:.5rem;color:rgba(255,248,230,.65);line-height:1; }
.hero-media-del{
  position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:#e24b4a;color:#fff;border:none;display:flex;align-items:center;justify-content:center;
  font-size:.52rem;line-height:1;cursor:pointer;padding:0;
}
.hero-media-del:hover{ background:#c53a39; }
.hero-media-add{
  width:44px;height:44px;border-radius:.4rem;cursor:pointer;padding:0;
  border:1px dashed rgba(255,255,255,.35);background:rgba(255,255,255,.04);
  color:rgba(255,248,230,.7);font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:border-color .15s ease,color .15s ease;
}
.hero-media-add:hover{ border-color:hsl(var(--gold));color:hsl(var(--gold)); }

/* Aperçu média : petite fenêtre centrée (vidéo / vocal) */
.hero-media-preview-ov{
  position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:9999;
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.hero-media-preview-box{
  position:relative;background:#1b120c;border-radius:.6rem;padding:.6rem;
  max-width:min(88vw,320px);box-shadow:0 12px 32px rgba(0,0,0,.5);
}
.hero-media-preview-box img,
.hero-media-preview-box video{ display:block;max-width:100%;max-height:38vh;border-radius:.4rem; }
.hero-media-preview-box audio{ display:block;width:min(80vw,260px); }
.hero-media-preview-close{
  position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;
  background:#e24b4a;color:#fff;border:none;font-size:.7rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* Aperçu photo/vidéo : visionneuse quasi plein écran (façon Picasa) */
.hero-media-preview-ov--large{ background:rgba(0,0,0,.94);padding:0; }
.hero-media-preview-box--large{
  max-width:none;background:transparent;padding:0;box-shadow:none;
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
}
.hero-media-preview-box--large img,
.hero-media-preview-box--large video{
  max-width:96vw;max-height:96vh;width:auto;height:auto;object-fit:contain;
  border-radius:.5rem;box-shadow:0 12px 48px rgba(0,0,0,.6);
}
.hero-media-preview-box--large .hero-media-preview-close{
  position:fixed;top:1rem;right:1rem;width:36px;height:36px;font-size:.9rem;
}

/* Navigation entre fichiers (précédent / suivant) + compteur de position */
.hero-media-preview-nav{
  position:fixed;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:background .15s ease;z-index:2;
}
.hero-media-preview-nav:hover{ background:rgba(255,255,255,.22); }
.hero-media-preview-nav--prev{ left:.75rem; }
.hero-media-preview-nav--next{ right:.75rem; }
.hero-media-preview-counter{
  position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#fff;font-size:.75rem;font-weight:600;
  padding:.25rem .7rem;border-radius:999px;letter-spacing:.02em;
}
/* Petite fenêtre (vocal) : flèches/compteur restent DANS la boîte, pas plein écran */
.hero-media-preview-box:not(.hero-media-preview-box--large) .hero-media-preview-nav{
  position:absolute;top:50%;
}
.hero-media-preview-box:not(.hero-media-preview-box--large) .hero-media-preview-nav--prev{ left:-14px; }
.hero-media-preview-box:not(.hero-media-preview-box--large) .hero-media-preview-nav--next{ right:-14px; }
.hero-media-preview-box:not(.hero-media-preview-box--large) .hero-media-preview-nav{ width:32px;height:32px;font-size:1.2rem; }
.hero-media-preview-box:not(.hero-media-preview-box--large) .hero-media-preview-counter{
  position:absolute;bottom:-1.9rem;left:50%;transform:translateX(-50%);
}
@media (max-width:600px){
  .hero-media-preview-nav{ width:38px;height:38px;font-size:1.35rem; }
}

/* v75 — fenêtre d'aperçu webcam desktop (Photo/Vidéo façon appli de visio) */
.bizva-camera-ov{
  position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;padding:2rem;
}
.bizva-camera-box{
  position:relative;width:min(720px,92vw);max-height:85vh;
  background:#000;border-radius:1rem;overflow:hidden;
  box-shadow:0 25px 60px -15px rgba(0,0,0,.7);
}
.bizva-camera-box video{
  width:100%;max-height:70vh;display:block;background:#000;
  transform:scaleX(-1); /* effet miroir, comme une vraie webcam */
}
.bizva-camera-bar{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:1rem;background:rgba(0,0,0,.55);
}
.bizva-camera-btn{
  border:none;border-radius:999px;padding:.65rem 1.4rem;font-size:.85rem;
  font-weight:600;cursor:pointer;transition:filter .15s,transform .1s;
}
.bizva-camera-btn:active{ transform:scale(.97); }
.bizva-camera-btn--main{ background:hsl(var(--gold));color:var(--espresso); }
.bizva-camera-btn--main:hover{ filter:brightness(1.05); }
.bizva-camera-btn--main.bizva-camera-btn--recording{ background:#e53935;color:#fff; }
.bizva-camera-btn--close{ background:rgba(255,255,255,.12);color:#fff; }
.bizva-camera-btn--close:hover{ background:rgba(255,255,255,.2); }
.bizva-camera-timer{
  color:#fff;font-size:.85rem;font-variant-numeric:tabular-nums;font-weight:600;
}
@media (max-width:600px){
  .bizva-camera-ov{ display:none; } /* webcam = desktop uniquement */
}