/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gray-100); height:var(--header-h);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:100%; position:relative; }
.site-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--navy); }
.site-logo img{ height:34px; width:auto; }

/* Bouton hamburger — toujours visible, évite tout débordement du header */
.menu-toggle-btn{
  width:42px; height:42px; border-radius:var(--radius-sm); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; background:var(--gray-100);
}
.menu-toggle-btn span{ display:block; width:20px; height:2px; background:var(--navy); transition:transform .2s ease, opacity .2s ease; }
.menu-toggle-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle-btn.open span:nth-child(2){ opacity:0; }
.menu-toggle-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.header-menu{
  position:absolute; top:calc(var(--header-h) - 8px); right:0; background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:12px; display:flex; flex-direction:column; gap:4px; min-width:220px;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.header-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.header-menu-link{ padding:10px 12px; border-radius:var(--radius-sm); font-size:14px; color:var(--navy); font-weight:600; }
.header-menu-link:hover{ background:var(--gray-100); }
.header-menu-divider{ height:1px; background:var(--gray-100); margin:6px 4px; }
.header-menu-btn{ width:100%; margin-top:2px; }

/* ---- Hero ---- */
.hero{ position:relative; padding:72px 0 56px; background:linear-gradient(180deg, var(--gray-100) 0%, var(--white) 100%); overflow:hidden; }
.hero-center{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; }
.hero h1{ font-size:44px; }
.hero h1 .accent{ color:var(--accent); }
.hero-sub{ font-size:18px; color:var(--gray-700); margin:0 auto 28px; max-width:600px; }
.hero-cta-row{ display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.hero-price-tag{ font-size:14px; color:var(--gray-500); }
.hero-price-tag strong{ color:var(--navy); font-size:20px; }
.hero-visual{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); max-width:640px; margin:0 auto; }
@media (max-width:860px){ .hero h1{ font-size:30px; } }

/* Fond du hero : simple, fiable, deux tâches de couleur floues qui dérivent lentement */
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-blob{ position:absolute; width:520px; height:520px; border-radius:50%; filter:blur(70px); opacity:.35; background:var(--accent); animation:blobDrift 12s ease-in-out infinite; }
.hero-blob.b1{ top:-160px; left:-160px; }
.hero-blob.b2{ top:20%; right:-200px; background:var(--accent-dark); animation-duration:15s; animation-delay:1s; }
@keyframes blobDrift{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(30px,20px) scale(1.08);} }
@media (prefers-reduced-motion: reduce){ .hero-blob{ animation:none; } }

/* Carte "coupon" animée — fiable, sans SVG complexe */
.coupon-card{
  position:relative; z-index:2; max-width:360px; margin:36px auto 28px; background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:18px 20px; text-align:left; border:1px solid var(--gray-100);
}
.coupon-card-head{ font-weight:700; font-size:13px; color:var(--accent-dark); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.coupon-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; border-bottom:1px dashed var(--gray-100); }
.coupon-odd{ font-weight:700; color:var(--ink); }
.coupon-card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:13px; color:var(--gray-700); }
.coupon-stamp{
  display:inline-flex; align-items:center; gap:5px; background:var(--accent-light); color:var(--accent-dark);
  font-weight:700; padding:5px 10px; border-radius:var(--radius-pill); font-size:12px;
  animation:stampPulse 2.2s ease-in-out infinite;
}
@keyframes stampPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

/* Titre "méthode des meilleurs" + carrousel d'avatars en boucle */
.hero-social-title{ font-size:15px; font-weight:600; color:var(--gray-700); margin:8px 0 14px; font-family:var(--font-body); }
.hero-avatar-track-wrap{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.hero-avatar-track{ display:flex; gap:28px; width:max-content; animation:avatarScroll 22s linear infinite; }
.hero-avatar-track:hover{ animation-play-state:paused; }
@keyframes avatarScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.hero-avatar-item{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
.hero-avatar-item img{ width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:var(--shadow-sm); background:var(--gray-100); }
.hero-avatar-item span{ font-size:11.5px; font-weight:700; color:var(--gray-700); white-space:nowrap; }

/* ---- Vidéo de présentation ---- */
.video-section{ padding-top:0; }
.video-frame{
  max-width:820px; margin:0 auto; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  background:var(--ink); aspect-ratio:16/9;
}
.video-el{ width:100%; height:100%; display:block; object-fit:cover; }

/* ---- Sections génériques ---- */
.section{ padding:72px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.section-head h2{ font-size:32px; }

/* ---- Modules preview (couverture = 1re slide de chaque module) ---- */
.modules-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.module-card{
  border-radius:var(--radius-md); overflow:hidden; background:var(--gray-100);
  transition:transform .15s ease, box-shadow .15s ease; box-shadow:var(--shadow-sm);
}
.module-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.module-cover{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.module-card-body{ padding:14px 16px; }
.module-num-tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dark); }
.module-card h4{ margin:4px 0 0; font-size:15px; }
@media (max-width:900px){ .modules-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .modules-grid{ grid-template-columns:1fr; } }

/* ---- Modale de paiement (checkout) ---- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(22,24,29,.62); z-index:100; padding:16px;
  display:none; align-items:center; justify-content:center;
}
.modal-overlay.is-open{ display:flex; animation:fadeIn .15s ease; }
.modal-box{
  background:#fff; border-radius:var(--radius-lg); padding:32px; max-width:420px; width:100%;
  max-height:90vh; overflow-y:auto; animation:fadeInUp .2s ease;
}

/* ---- Preuves / résultats ---- */
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.proof-grid img{ border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
@media (max-width:800px){ .proof-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---- Pricing ---- */
.pricing-card{
  max-width:420px; margin:0 auto; background:var(--navy); color:#fff; border-radius:var(--radius-lg);
  padding:40px 32px; text-align:center; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.pricing-card::before{
  content:''; position:absolute; inset:0; background:radial-gradient(circle at top right, rgba(47,191,113,.25), transparent 60%);
  pointer-events:none;
}
.pricing-card .price{ font-size:48px; font-weight:800; color:var(--gold); position:relative; }
.pricing-card .price-old{ text-decoration:line-through; color:rgba(255,255,255,.4); font-size:18px; }
.pricing-list{ list-style:none; padding:0; margin:24px 0; text-align:left; position:relative; }
.pricing-list li{ display:flex; gap:8px; align-items:flex-start; margin-bottom:10px; font-size:14px; color:rgba(255,255,255,.85); }
.pricing-list li::before{ content:'✓'; color:var(--accent); font-weight:700; }

/* ---- FAQ ---- */
.faq-item{ border-bottom:1px solid var(--gray-100); padding:18px 0; }
.faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:700; color:var(--navy); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--gray-700); font-size:14px; }
.faq-item.open .faq-a{ max-height:300px; padding-top:10px; }

/* ---- Footer ---- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.65); padding:18px 0; text-align:center; font-size:12px; }
.site-footer p{ margin:2px 0; color:inherit; }
.site-footer strong{ color:#fff; }

/* ---- Widget WhatsApp ---- */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:80; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg);
  animation:pulseWa 2.4s infinite;
}
@keyframes pulseWa{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5);} 50%{ box-shadow:0 0 0 12px rgba(37,211,102,0);} }
.wa-panel{
  position:fixed; right:20px; bottom:90px; z-index:80; width:300px; max-width:88vw;
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); overflow:hidden;
  animation:fadeInUp .2s ease;
}
.wa-panel-head{ background:#25D366; color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:flex-start; }
.wa-panel-head strong{ display:block; font-size:15px; }
.wa-panel-head span{ font-size:11px; opacity:.85; }
.wa-panel-head button{ color:#fff; font-size:16px; }
.wa-panel-body{ padding:14px 16px; }
.wa-panel-body p{ font-size:13px; margin-bottom:10px; }
.wa-quick-list{ display:flex; flex-direction:column; gap:8px; }
.wa-quick-item{
  text-align:left; background:var(--gray-100); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:13px; color:var(--navy); transition:background .15s ease;
}
.wa-quick-item:hover{ background:var(--accent-light); }

/* ---- Témoignages : défilement automatique, images 1:1 ---- */
.testimonials-track-wrap{
  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);
}
.testimonials-track{ display:flex; gap:18px; width:max-content; padding:0 20px; animation:testiScroll 30s linear infinite; }
.testimonials-track:hover{ animation-play-state:paused; }
@keyframes testiScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.testimonial-card{
  flex:0 0 auto; width:240px; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--gray-100);
}
.testimonial-card img{ width:100%; height:100%; object-fit:cover; }

/* ---- Popup configurable depuis l'admin ---- */
.fab-popup-overlay{
  position:fixed; inset:0; background:rgba(22,24,29,.6); z-index:110; display:flex;
  align-items:center; justify-content:center; padding:16px; animation:fadeIn .15s ease;
}
.fab-popup-box{ background:#fff; border-radius:var(--radius-lg); max-width:380px; width:100%; overflow:hidden; box-shadow:var(--shadow-lg); position:relative; animation:fadeInUp .2s ease; }
.fab-popup-image{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.fab-popup-body{ padding:20px; text-align:center; }
.fab-popup-close{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); z-index:2; }
.fab-popup-btn{ width:100%; margin-top:8px; }

/* ---- Badge moyens de paiement mobile money ---- */
.mobile-money-badge{ display:block; max-width:170px; width:100%; margin:8px auto 0; opacity:.85; }

/* ---- Preuves de gains : défilement automatique, images 1:1 (même style que témoignages) ---- */
.proof-track-wrap{
  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);
}
.proof-track{ display:flex; gap:18px; width:max-content; padding:0 20px; animation:testiScroll 26s linear infinite; }
.proof-track:hover{ animation-play-state:paused; }
.proof-card{
  flex:0 0 auto; width:240px; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); background:#fff;
}
.proof-card img{ width:100%; height:100%; object-fit:cover; }