/* ═══════════════════════════════════════════════════════════════
   MainPay Africa — style.css
   Palette : #0A0E1A (fond), #6CBF34 (vert), #FFFFFF (texte)
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; background: #020302; }
body {
  font-family: 'Manrope', sans-serif;
  background: #020302;
  color: #F1F3EE;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Variables ── */
:root {
  --green: #6CBF34;
  --green-light: #9BD870;
  --green-dark: #4E8A22;
  --orange: #F26A0A;
  --orange-light: #FF9F5A;
  --bg: #020302;
  --bg-card: #0F130D;
  --bg-card2: #14180F;
  --border: rgba(241,243,238,0.10);
  --text: #F1F3EE;
  --text-muted: #9DA699;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(108,191,52,0.12);
  --transition: 0.25s ease;
  --max-w: 1200px;
  --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  /* Montants/soldes/numéros de compte — jamais le texte courant. Signature
     "fintech de précision" (pairing Web3/DeFi) : distingue immédiatement
     une valeur chiffrée fiable d'un simple texte, chiffres tabulaires. */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Lueur chaude secondaire — contraste avec le vert, utilisée avec parcimonie
     pour la profondeur cinématographique du hero (jamais sur les CTA/boutons,
     qui restent 100% verts pour garder l'identité de marque intacte). */
  --glow-warm: 242,106,10;
}

/* ── Utilitaires ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
/* Montant/numéro de compte — voir --font-mono plus haut */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.text-green { color: var(--green); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(108,191,52,0.12); color: var(--green);
  border: 1px solid rgba(108,191,52,0.25);
  padding: 6px 14px; border-radius: 100px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }

/* ── Boutons — pleines pilules (999px), comme la maquette démo ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 13px 26px; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green); color: #071307;
}
.btn-primary:hover { background: var(--green-light); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); }
.btn-orange {
  background: var(--orange); color: #160800;
}
.btn-orange:hover { background: var(--orange-light); transform: translateY(-1px); }
.btn-outline {
  background: rgba(241,243,238,0.04); color: var(--text);
  border: 1px solid rgba(241,243,238,0.2);
}
.btn-outline:hover { border-color: var(--green); color: var(--green-light); transform: translateY(-1px); }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { min-height: 40px; padding: 9px 18px; font-size: 13px; }
.btn svg { width: 18px; height: 18px; }
/* App pas encore publiquement disponible — visible mais non cliquable */
.btn.soon { opacity: 0.45; cursor: default; pointer-events: none; box-shadow: none; }
.btn.soon:hover { transform: none; }

/* ── Typographie ── */
/* ── Titres en relief — effet d'extrusion/gravure via text-shadow empilés
   (profondeur réelle, pas juste une ombre portée plate). Réservé aux H1
   (gros titres) : à la taille du corps de texte, le même traitement
   nuirait à la lisibilité — l'échelle fait partie du "premium", pas juste
   l'effet. ── */
h1 {
  font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.5),
    0 2px 0 rgba(0,0,0,0.45),
    0 3px 0 rgba(0,0,0,0.4),
    0 4px 0 rgba(0,0,0,0.3),
    0 6px 16px rgba(0,0,0,0.55);
}
h1 span { text-shadow:
    0 1px 0 rgba(0,100,30,0.6),
    0 2px 0 rgba(0,100,30,0.5),
    0 3px 0 rgba(0,100,30,0.4),
    0 4px 0 rgba(0,100,30,0.3),
    0 6px 16px rgba(108,191,52,0.35);
}
h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.3; }
h4 { font-size: 1.1rem; font-weight: 600; }
p { color: var(--text-muted); line-height: 1.75; }
.lead { font-size: 1.15rem; color: var(--text-muted); max-width: 600px; }
.section-label {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--green); margin-bottom: 12px;
}
.section-title { margin-bottom: 16px; }
.section-subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 560px; }

/* ── Navigation ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 0 24px;
  transition: all var(--transition);
}
.nav.scrolled {
  background: rgba(2,3,2,0.78);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav-logo {
  display: flex; align-items: center; gap: 0;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
}
.nav-logo img {
  height: 44px; width: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
  filter: brightness(1.1);
}
/* Fallback si image absente */
.nav-logo .logo-mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  color: #000; font-weight: 900; font-size: 18px;
}
.nav-links {
  display: flex; align-items: center; gap: 4px;
}
.nav-links a {
  padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-muted);
  transition: all var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; border-radius: 8px;
}
.hamburger span {
  width: 22px; height: 2px; background: var(--text);
  border-radius: 2px; transition: all var(--transition);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-menu {
  display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
  background: var(--bg); z-index: 999; padding: 24px;
  flex-direction: column; gap: 8px;
  border-top: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 14px 16px; border-radius: 12px;
  font-size: 16px; font-weight: 500; color: var(--text-muted);
  transition: all var(--transition);
}
.mobile-menu a:hover { color: var(--text); background: var(--bg-card); }
.mobile-menu .mobile-cta { margin-top: 16px; }

/* ── Hero ── */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 120px 0 80px;
  position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% -15%, rgba(108,191,52,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 88% 85%, rgba(var(--glow-warm),0.10) 0%, transparent 55%),
    radial-gradient(ellipse 35% 35% at 5% 75%, rgba(78,138,34,0.10) 0%, transparent 50%);
}
/* Aurora mesh — dégradés fluides animés lentement, palette dans la marque
   (vert MainPay + cyan/bleu analogues + touche chaude), jamais un arc-en-ciel
   générique. "Aurora UI" (skill ui-ux-pro-max) : recommandé pour hero
   sections/produits premium, boucle 8-12s, blend-mode screen pour la
   luminosité sans écraser le texte. */
.hero-aurora {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(108,191,52,0.4) 0%, transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(108,191,52,0.28) 0%, transparent 46%),
    radial-gradient(circle at 65% 82%, rgba(242,106,10,0.22) 0%, transparent 46%),
    radial-gradient(circle at 25% 78%, rgba(var(--glow-warm),0.16) 0%, transparent 42%);
  filter: blur(70px) saturate(1.25);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: auroraDrift 13s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate(0%, 0%) scale(1); }
  50%  { transform: translate(-3%, 2.5%) scale(1.08); }
  100% { transform: translate(2.5%, -3%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .hero-aurora { animation: none; } }

.hero-grid {
  position: absolute; inset: 0; z-index: 0; opacity: 0.04;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
                    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Vignette — assombrit les bords pour concentrer l'œil sur le centre (effet
   cinéma/objectif photo), jamais assez fort pour nuire à la lisibilité du nav. */
.hero-vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
/* Grain filmique — texture bruit SVG en pure CSS, aucune image à charger.
   Opacité très faible : perceptible, jamais visible comme "défaut". */
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Détail éditorial — libellé vertical façon pellicule de film ── */
.hero-editorial-label {
  position: absolute; left: 20px; top: 50%; z-index: 1;
  display: none; /* activé ≥1100px, voir media query */
  align-items: center; gap: 10px;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; color: var(--text-muted);
}
.hero-editorial-label::before {
  content: ''; width: 1px; height: 48px; background: linear-gradient(var(--green), transparent);
}
@media (min-width: 1100px) { .hero-editorial-label { display: flex; } }
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
}
.hero-content .badge { margin-bottom: 24px; }
.hero-content h1 { margin-bottom: 24px; }
.hero-content h1 span { color: var(--green); }
.hero-content .lead { margin-bottom: 40px; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.store-btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 12px 20px; border-radius: 12px;
  transition: all var(--transition);
}
.store-btn:hover { border-color: var(--green); transform: translateY(-2px); }
.store-btn svg { width: 24px; height: 24px; flex-shrink: 0; }
.store-btn-text { text-align: left; }
.store-btn-text small { font-size: 11px; color: var(--text-muted); display: block; }
.store-btn-text strong { font-size: 14px; font-weight: 600; }
/* App/appli pas encore publiquement disponible (TestFlight/pas soumis) — visible mais non cliquable */
.store-btn.soon { opacity: 0.45; cursor: default; pointer-events: none; }
.store-btn.soon:hover { border-color: var(--border); transform: none; }
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Perspective plus courte = déformation/profondeur plus marquée, comme
     une vraie prise de vue produit en grand angle plutôt qu'un cadre plat. */
  perspective: 900px;
}

/* ── Scène positionnée — contient le téléphone + badges ──
   transform-style preserve-3d + inclinaison pilotée par JS (main.js,
   suivi du pointeur) : donne une vraie profondeur de parallaxe sans
   recourir à un moteur 3D (WebGL) — choix délibéré pour rester léger sur
   les téléphones d'entrée de gamme/connexions lentes du marché cible. */
.phone-scene {
  position: relative;
  width: 420px;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.phone-scene > * { transform: translateZ(0); }

/* Cadre viseur — clin d'œil direct au scan biométrique Palm Pay (le produit
   se "vise" avant le scan) : 4 coins façon viseur caméra autour de la scène. */
.viewfinder {
  position: absolute; inset: -28px; z-index: 0; pointer-events: none;
  opacity: 0.5;
}
.viewfinder span {
  position: absolute; width: 22px; height: 22px;
  border: 1.5px solid var(--green);
}
.viewfinder span:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.viewfinder span:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.viewfinder span:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.viewfinder span:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

/* ── Téléphone en scène "photo produit" — inclinaison 3D fixe (comme une
   vraie photo de rendu 3D, pas un cadre plat de face) + lévitation. ── */
.phone-hero {
  position: relative;
  z-index: 2;
  animation: phoneFloat 5s ease-in-out infinite;
  transform-origin: center bottom;
  transform-style: preserve-3d;
}

@keyframes phoneFloat {
  0%, 100% { transform: translateY(0px) rotate(-8deg) rotateY(-26deg) rotateX(10deg) translateZ(20px); }
  50%       { transform: translateY(-18px) rotate(-6deg) rotateY(-24deg) rotateX(9deg) translateZ(20px); }
}

/* Ombre portée — sur fond quasi-noir, une ombre NOIRE est invisible (noir
   sur noir). On utilise à la place un halo lumineux coloré sous le
   téléphone, comme s'il flottait et projetait sa propre lumière verte au
   sol — lisible sur fond sombre, cohérent avec le glow déjà en place. */
.phone-ground-shadow {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 240px; height: 46px;
  background: radial-gradient(ellipse, rgba(108,191,52,0.45) 0%, rgba(108,191,52,0.12) 45%, transparent 75%);
  filter: blur(10px);
  z-index: 1;
  animation: groundShadowPulse 5s ease-in-out infinite;
}
@keyframes groundShadowPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%       { opacity: 0.6; transform: translateX(-50%) scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-hero { animation: none; transform: rotate(-8deg) rotateY(-26deg) rotateX(10deg) translateZ(20px); }
  .phone-ground-shadow { animation: none; }
  .phone-hero .iphone-glow { animation: none; }
}

/* Glow pulsant */
.phone-hero .iphone-glow {
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.1); }
}

/* ── Carousel d'écrans ── */
.screen-carousel { position: relative; width: 100%; }
.screen-slide { width: 100%; display: block; opacity: 0; }
.slide-1 { animation: screenFade 20s 0s  infinite ease-in-out; }
.slide-2 { animation: screenFade 20s 5s  infinite ease-in-out; position: absolute; top: 0; left: 0; }
.slide-3 { animation: screenFade 20s 10s infinite ease-in-out; position: absolute; top: 0; left: 0; }
.slide-4 { animation: screenFade 20s 15s infinite ease-in-out; position: absolute; top: 0; left: 0; }

@keyframes screenFade {
  0%   { opacity: 1; }
  20%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── Badges — base commune ── */
.scene-badge {
  position: absolute;
  /* Verre dépoli — laisse transparaître l'aurora derrière plutôt qu'un
     aplat opaque, cohérent avec le reste du traitement "verre". */
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  white-space: nowrap;
  z-index: 10;
}

/* Haut-gauche — Palm Pay */
.badge-top-left {
  top: 40px;
  left: 0px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  border-color: rgba(108,191,52,0.25);
  animation: badgeFloat 4.2s 0s ease-in-out infinite;
}

/* Haut-droite — Solde */
.badge-top-right {
  top: 55px;
  right: 0px;
  animation: badgeFloat 4.2s 0.8s ease-in-out infinite;
}

/* Bas-gauche — Tontine */
.badge-bottom-left {
  bottom: 80px;
  left: 5px;
  border-color: rgba(108,191,52,0.2);
  animation: badgeFloat 4.2s 1.4s ease-in-out infinite;
}

/* Bas-droite — Transfert reçu */
.badge-bottom-right {
  bottom: 55px;
  right: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-color: rgba(59,130,246,0.25);
  animation: badgeFloat 4.2s 2.1s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0px) translateZ(60px); }
  50%       { transform: translateY(-9px) translateZ(60px); }
}

.float-dot-blue {
  background: #3B82F6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
}

.hero-phone-mockup {
  width: 280px; height: 560px; border-radius: 40px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,0.5), 0 0 80px rgba(108,191,52,0.1);
  overflow: hidden;
}
.hero-phone-mockup::before {
  content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 6px; background: var(--border);
  border-radius: 3px;
}
.hero-phone-screen {
  position: absolute; inset: 20px 8px 8px;
  background: linear-gradient(160deg, #111827 0%, #0d1520 100%);
  border-radius: 32px; padding: 24px 16px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
}
.mock-balance { text-align: center; padding: 16px 0 8px; }
.mock-balance .amount { font-size: 28px; font-weight: 800; }
.mock-balance small { font-size: 11px; color: var(--text-muted); }
.mock-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-action { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mock-action-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(108,191,52,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.mock-action small { font-size: 10px; color: var(--text-muted); }
.mock-card {
  background: linear-gradient(135deg, rgba(108,191,52,0.2), rgba(78,138,34,0.1));
  border: 1px solid rgba(108,191,52,0.2);
  border-radius: 16px; padding: 14px;
}
.mock-card-label { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.mock-card-value { font-size: 14px; font-weight: 700; color: var(--green); }
.mock-txs { flex: 1; }
.mock-tx { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.mock-tx-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.mock-tx-info { flex: 1; }
.mock-tx-name { font-size: 11px; font-weight: 600; }
.mock-tx-date { font-size: 10px; color: var(--text-muted); }
.mock-tx-amount { font-size: 11px; font-weight: 700; }
.mock-tx-amount.plus { color: var(--green); }
.mock-tx-amount.minus { color: #FF5252; }
.float-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }

/* ── Stats bar — carte flottante en verre sous la nav (pas une bande qui
   touche les bords, cohérent avec l'esthétique "glass" du reste du site) ── */
.stats-bar { padding: 16px 0 0; }
.stats-grid {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.stat-item {
  flex: 1 1 150px;
  text-align: center; padding: 18px 12px;
  background: rgba(15,19,13,0.55);
}
/* Hauteur de ligne fixée en px (pas juste line-height:1) : empêche tout
   changement de hauteur de ".stats-bar" quand "···" devient le vrai chiffre
   (fetch async, main.js) ou quand la police web finit de charger — un
   `.stat-number` qui grandit après coup décale tout le bas de page et
   invalide les bornes déjà calculées par ScrollTrigger pour les scènes
   suivantes (cause réelle du bug "vidéo figée en remontant", voir home.js). */
.stat-number { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--green); line-height: 36px; height: 36px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 13px; color: var(--text-muted); }

/* ── Barre de confiance (trust strip) ── */
.trust-strip {
  display: block;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card2);
  padding: 20px 0;
  transition: background var(--transition);
}
.trust-strip:hover { background: var(--bg-card); }
.trust-strip-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 32px;
}
.trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.trust-item svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }

/* ── Features — Bento Grid (style "financial dashboard / high-end corporate")
   Palm Pay en grande cellule vedette (vrai différenciateur du produit) au
   lieu de 6 cartes identiques — plus scannable, moins générique. ── */
.features-grid { margin-top: 64px; display: flex; flex-direction: column; gap: 20px; }
.features-secondary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  /* Glassmorphism discret — recommandé pour "financial dashboards, high-end
     corporate" : flou + bordure claire fine + fond semi-transparent plutôt
     qu'un aplat uni, pour se détacher du glow du fond. */
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0; transition: opacity var(--transition);
}
/* Reflet de verre — balayage lumineux diagonal au survol, comme une surface
   vitrée qui accroche la lumière. */
.feature-card::after {
  content: '';
  position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
  transition: left 0.7s ease;
}
.feature-card:hover { border-color: rgba(108,191,52,0.3); transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-card:hover::before { opacity: 1; }
.feature-card:hover::after { left: 130%; }
.feature-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(108,191,52,0.08); border: 1px solid rgba(108,191,52,0.18);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; color: var(--green); flex-shrink: 0;
}
.feature-icon svg { width: 22px; height: 22px; }

/* Cellule vedette Palm Pay — occupe toute la largeur, fond vert léger */
.feature-card.featured {
  background: linear-gradient(135deg, rgba(108,191,52,0.12), rgba(17,24,39,0.6));
  border-color: rgba(108,191,52,0.3);
  padding: 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
.feature-card.featured .feature-icon {
  width: 72px; height: 72px; margin-bottom: 0;
  background: rgba(108,191,52,0.15); border-color: rgba(108,191,52,0.3);
}
.feature-card.featured .feature-icon svg { width: 32px; height: 32px; }
.feature-card.featured h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 8px; }
.feature-card.featured p { font-size: 15px; max-width: 520px; }
/* Mini 3 étapes Palm Pay — comment fonctionne la fonctionnalité vedette */
.featured-steps {
  display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap;
}
.featured-steps li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.featured-steps li span {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
  box-shadow: inset 0 -2px 0 var(--green-dark);
}
.security-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(108,191,52,0.08); border: 1px solid rgba(108,191,52,0.18);
  display: flex; align-items: center; justify-content: center;
  color: var(--green); flex-shrink: 0;
}
.security-icon svg { width: 20px; height: 20px; }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { font-size: 14px; }

/* ── How it works ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; position: relative; }
.steps::before {
  content: ''; position: absolute; top: 28px; left: calc(16.666% + 16px); right: calc(16.666% + 16px);
  height: 1px; background: linear-gradient(90deg, var(--green), var(--bg));
}
.step { text-align: center; }
.step-number {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green); color: #000;
  font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  position: relative; z-index: 1;
  box-shadow: inset 0 -4px 0 var(--green-dark), 0 0 24px rgba(108,191,52,0.4);
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 14px; max-width: 240px; margin: 0 auto; }

/* ── Split section ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split-content .section-label { margin-bottom: 8px; }
.split-content h2 { margin-bottom: 16px; }
.split-content p { margin-bottom: 24px; }
.split-list { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.split-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; color: var(--text-muted);
}
.split-list li::before {
  content: '✓'; min-width: 20px; height: 20px;
  background: rgba(108,191,52,0.15); color: var(--green);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 2px;
}
.split-visual {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 24px; padding: 40px;
  min-height: 360px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.split-visual::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(108,191,52,0.08) 0%, transparent 70%);
}

/* ── Icônes illustratives dans split-visual ── */
.visual-mockup { position: relative; z-index: 1; text-align: center; }
.visual-icon-big { font-size: 80px; margin-bottom: 16px; }
.visual-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(108,191,52,0.12); border: 1px solid rgba(108,191,52,0.2);
  padding: 8px 14px; border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--green);
  margin: 4px;
}

/* ── Testimonials ── */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.testimonial-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
}
.testimonial-stars { color: #FFB800; font-size: 14px; margin-bottom: 12px; }
.testimonial-text { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #000;
}
.testimonial-name { font-size: 14px; font-weight: 600; }
.testimonial-role { font-size: 12px; color: var(--text-muted); }

/* ── Partners strip ── */
.partners-strip {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.partners-strip .section-label { text-align: center; margin-bottom: 8px; }
.partners-strip h3 { text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--text-muted); margin-bottom: 40px; letter-spacing: 0.02em; }
.partners-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 48px; flex-wrap: wrap;
}
.partner-logo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 36px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.partner-logo-card:hover {
  border-color: rgba(108,191,52,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.partner-logo-card img {
  height: 44px; width: auto;
  object-fit: contain;
  filter: grayscale(20%) brightness(1.05);
  transition: filter var(--transition);
}
.partner-logo-card:hover img { filter: grayscale(0%) brightness(1.1); }

/* ── CTA Banner ── */
.cta-banner {
  background: linear-gradient(135deg, rgba(108,191,52,0.12) 0%, rgba(78,138,34,0.06) 100%);
  border: 1px solid rgba(108,191,52,0.2);
  border-radius: 24px; padding: 64px 48px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute;
  top: -80px; right: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,191,52,0.12) 0%, transparent 70%);
}
.cta-banner h2 { margin-bottom: 16px; }
.cta-banner p { margin-bottom: 36px; }
.cta-banner .btn-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ── Security section ── */
.security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.security-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  display: flex; gap: 16px; align-items: flex-start;
}
.security-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
.security-item h4 { margin-bottom: 6px; }
.security-item p { font-size: 13px; }

/* ── Countries ── */
.countries-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.country-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 10px 16px; border-radius: 100px;
  font-size: 14px; font-weight: 500;
  transition: all var(--transition);
}
.country-chip:hover { border-color: var(--green); color: var(--green); }
.country-chip .flag { font-size: 20px; }
.country-chip.coming { opacity: 0.5; }
.country-chip.coming::after { content: ' (bientôt)'; font-size: 11px; color: var(--text-muted); }

/* ── Page Hero (sous-pages) ── */
.page-hero {
  padding: 140px 0 80px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108,191,52,0.12) 0%, transparent 60%);
  text-align: center;
}
.page-hero .badge { margin-bottom: 20px; }
.page-hero h1 { margin-bottom: 20px; }
.page-hero .lead { margin: 0 auto 40px; }

/* ── Cards liste ── */
.cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.info-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
  transition: all var(--transition);
}
.info-card:hover { border-color: rgba(108,191,52,0.3); transform: translateY(-2px); }
.info-card-icon { font-size: 32px; margin-bottom: 16px; }
.info-card h3 { margin-bottom: 10px; }
.info-card p { font-size: 14px; }

/* ── Form ── */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text-muted); }
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: inherit; font-size: 14px;
  transition: border-color var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--green); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-success {
  background: rgba(108,191,52,0.1); border: 1px solid rgba(108,191,52,0.3);
  border-radius: var(--radius); padding: 20px;
  text-align: center; color: var(--green);
  display: none;
}

/* ── Footer ── */
.footer {
  background: var(--bg-card2);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-brand p { font-size: 14px; margin: 16px 0 24px; }
.footer-social { display: flex; gap: 12px; }
.social-link {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: all var(--transition);
}
.social-link:hover { border-color: var(--green); color: var(--green); }
.footer-col h5 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 14px; color: var(--text-muted); transition: color var(--transition); }
.footer-col ul a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid var(--border); padding-top: 32px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom p { font-size: 13px; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 13px; color: var(--text-muted); transition: color var(--transition); }
.footer-legal a:hover { color: var(--green); }

/* ── Divider ── */
.divider { height: 1px; background: var(--border); margin: 0; }

/* ══════════════════════════════════════════
   iPhone Pro — Mockup réaliste
   Cadre titane · Dynamic Island · Action Button
══════════════════════════════════════════ */

.iphone-mockup {
  position: relative;
  width: 175px;      /* taille affichage hero */
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

/* Filet de lumière spéculaire sur le bord gauche du cadre titane — le côté
   qui, avec l'inclinaison rotateY(-24deg) de .phoneFloat, fait face à la
   source de lumière supposée. Rendu en overlay plutôt qu'en pseudo-élément
   de .iphone-body (déjà occupé par Action Button/volume). */
.iphone-mockup::before {
  content: '';
  position: absolute;
  left: 5px; top: 10%; bottom: 10%;
  width: 1.5px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.55) 15%,
    rgba(255,255,255,0.15) 45%,
    rgba(255,255,255,0.35) 70%,
    transparent 100%
  );
  border-radius: 2px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.85;
  animation: rimLightShimmer 4.5s ease-in-out infinite;
}
@keyframes rimLightShimmer {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .iphone-mockup::before { animation: none; opacity: 0.7; }
}

/* ── Lueur verte/titanium derrière le téléphone ── */
.iphone-glow {
  position: absolute;
  inset: -55px;
  background: radial-gradient(ellipse 70% 60% at 50% 72%,
    rgba(108,191,52,0.55)  0%,
    rgba(0,180,75,0.22)  38%,
    rgba(59,130,246,0.10) 60%,
    transparent 75%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}

/* ── Corps — titane naturel, coins "squircle" continus (signature iPhone,
   bien plus arrondis qu'un coin Android classique), bezels fins uniformes
   sur les 4 côtés (pas de barre haut/bas séparée — écran bord à bord). ── */
.iphone-body {
  background: linear-gradient(158deg,
    #4A4A4E 0%,       /* Titanium highlight haut */
    #333336 10%,
    #242428 35%,      /* Corps principal */
    #1A1A1C 65%,
    #121214 85%,
    #0A0A0B 100%
  );
  border-radius: 46px;         /* Coin continu iPhone — nettement plus arrondi */
  padding: 7px;                 /* Bezel fin uniforme (pas de top/bottom distincts) */
  position: relative;
  box-shadow:
    /* Reflet titanium haut — brossé */
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 1px 0 rgba(255,255,255,0.12),
    /* Highlight côté gauche (cadre plat) */
    inset 1.5px 0 0 rgba(255,255,255,0.09),
    /* Contour interne subtil */
    inset 0 0 0 0.5px rgba(255,255,255,0.06),
    /* Ombre bas intérieure */
    inset 0 -1.5px 0 rgba(0,0,0,0.75),
    /* Bordure titane nette */
    0 0 0 1px rgba(0,0,0,0.95),
    /* Ombre portée proche */
    0 10px 30px rgba(0,0,0,0.95),
    /* Ombre diffuse profonde */
    0 35px 80px rgba(0,0,0,0.75),
    /* Ombres latérales discrètes */
    4px 0 20px rgba(0,0,0,0.30),
    -4px 0 20px rgba(0,0,0,0.30);
}

/* ── Gauche : Action Button + Volume Up + Volume Down (3 marques, empilées
   via box-shadow — même technique que l'original, un seul élément) ── */
.iphone-body::before {
  content: '';
  position: absolute;
  left: -3px; top: 58px;
  width: 2.5px; height: 18px;      /* Action Button — plus court */
  background: linear-gradient(180deg, #46464A 0%, #2E2E32 100%);
  border-radius: 2px 0 0 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    /* Volume Up (gap de 20px) */
    0 38px 0 0 #3A3A3E,
    0 38px 0 1px #46464A,
    /* Volume Down (gap de 8px sous Volume Up) */
    0 64px 0 0 #3A3A3E,
    0 64px 0 1px #46464A;
}

/* ── Droite : bouton latéral (power) ── */
.iphone-body::after {
  content: '';
  position: absolute;
  right: -3px; top: 96px;
  width: 2.5px; height: 46px;     /* Bouton latéral — plus long sur iPhone */
  background: linear-gradient(180deg, #46464A 0%, #2E2E32 100%);
  border-radius: 0 2px 2px 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── Écran OLED edge-to-edge ── */
.iphone-screen {
  border-radius: 39px;        /* Coin continu, cohérent avec .iphone-body */
  overflow: hidden;
  background: #000;
  position: relative;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.6);
}

/* Reflet verre — mat anti-reflet, discret */
.iphone-screen::after {
  content: '';
  position: absolute;
  top: 0; left: -10%; right: -10%;
  height: 45%;
  background: linear-gradient(115deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.03) 35%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 2;
  transform: skewY(-6deg);
  transform-origin: top left;
}

/* Screenshot plein écran */
.iphone-screen img {
  width: 100%;
  display: block;
}

/* ── Dynamic Island — pilule flottante au-dessus de l'écran, jamais dans
   une barre de bezel séparée (c'est la signature iPhone moderne). ── */
.iphone-island {
  position: absolute;
  top: 17px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 15px;
  background: #000;
  border-radius: 10px;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}
/* Reflet caméra au sein de la pilule */
.iphone-island::after {
  content: '';
  position: absolute;
  top: 50%; right: 5px; transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 33% 30%, #1E2D3E 0%, #0C1C2C 60%, #030B12 100%);
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.08);
}

/* ── Barre d'accueil (home indicator) — pas de bouton physique ── */
.iphone-home-bar {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 4px;
  background: rgba(255,255,255,0.65);
  border-radius: 3px;
  z-index: 3;
}

/* ══════════════════════════════════════════
   MacBook Mockup
══════════════════════════════════════════ */
.macbook-mockup {
  width: 100%;
  max-width: 700px;
  position: relative;
  filter: drop-shadow(0 32px 64px rgba(0,0,0,0.7));
  /* Inclinaison "photo produit" (comme une vraie prise de vue en angle),
     pas un cadre plat de face. */
  transform: perspective(1600px) rotateX(8deg) rotateY(-10deg);
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.macbook-mockup:hover { transform: perspective(1600px) rotateX(5deg) rotateY(-6deg); }
.macbook-ground-shadow {
  position: absolute;
  bottom: -28px; left: 10%; right: 10%;
  height: 40px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 72%);
  filter: blur(10px);
  z-index: -1;
}
/* Glow derrière le laptop */
.macbook-glow {
  position: absolute;
  bottom: -10px; left: 5%; right: 5%;
  height: 50%;
  background: radial-gradient(ellipse,
    rgba(108,191,52,0.35) 0%,
    rgba(59,130,246,0.18) 45%,
    transparent 70%);
  filter: blur(36px);
  z-index: -1;
  pointer-events: none;
}
/* Écran (couvercle) */
.macbook-lid {
  background: linear-gradient(150deg, #2e2e2e 0%, #1c1c1c 100%);
  border-radius: 14px 14px 0 0;
  padding: 12px 14px 0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.macbook-camera-dot {
  width: 7px; height: 7px;
  background: #333;
  border-radius: 50%;
  margin: 0 auto 8px;
  box-shadow: inset 0 0 0 2px #222, 0 0 0 1px rgba(255,255,255,0.04);
}
.macbook-display {
  background: #000;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  border-bottom: none;
}
.macbook-display img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: top;
}
/* Charnière */
.macbook-hinge {
  height: 5px;
  background: linear-gradient(180deg, #111 0%, #222 100%);
}
/* Base / clavier */
.macbook-base {
  background: linear-gradient(180deg, #252525 0%, #1c1c1c 100%);
  border-radius: 0 0 12px 12px;
  padding: 10px 18px 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 16px 40px rgba(0,0,0,0.5);
}
.macbook-keyboard-area {
  background: #181818;
  border-radius: 5px;
  height: 68px;
  margin-bottom: 8px;
  /* Grille touches */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px,
      transparent 1px, transparent 13px),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px,
      transparent 1px, transparent 13px);
  background-size: 13px 13px;
  border: 1px solid rgba(255,255,255,0.04);
}
.macbook-trackpad-area {
  width: 88px; height: 30px;
  background: #1d1d1d;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 5px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════
   Screenshots Row — galerie
══════════════════════════════════════════ */

/* ── Laptop Frame (screenshots app web/PC) ── */
.laptop-frame {
  width: 100%;
  max-width: 580px;
  position: relative;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.6));
}
.laptop-screen {
  background: #0d1117;
  border-radius: 12px 12px 0 0;
  border: 8px solid #2a2a2a;
  border-bottom: none;
  overflow: hidden;
  position: relative;
}
.laptop-screen::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 28px;
  background: #1a1a1a;
  z-index: 1;
  display: flex;
  align-items: center;
}
.laptop-screen::after {
  content: '● ● ●';
  position: absolute; top: 6px; left: 12px;
  font-size: 9px; letter-spacing: 4px;
  color: #555;
  z-index: 2;
}
.laptop-screen img {
  width: 100%;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
  object-position: top;
  background: linear-gradient(160deg, #111827 0%, #0d1520 100%);
  margin-top: 28px;
}
.laptop-keyboard {
  background: linear-gradient(180deg, #2a2a2a, #1e1e1e);
  height: 22px;
  border-radius: 0 0 6px 6px;
}
.laptop-stand {
  width: 32%; height: 14px;
  background: #1e1e1e;
  margin: 0 auto;
  border-radius: 0 0 10px 10px;
}

/* ── Screenshots row (galerie horizontale) ── */
.screenshots-row {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 32px 24px 56px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: center;
  align-items: flex-start;
}
.screenshots-row::-webkit-scrollbar { display: none; }
.screenshots-row > div { scroll-snap-align: start; }
/* iPhone dans la galerie : taille réduite */
.screenshots-row .iphone-mockup { width: 166px; }
.screenshots-row .iphone-mockup .iphone-body {
  border-radius: 40px; padding: 6px;
}
.screenshots-row .iphone-mockup .iphone-screen { border-radius: 34px; }
.screenshots-row .iphone-mockup .iphone-island { top: 15px; height: 13px; }
.screenshots-row .iphone-mockup .iphone-home-bar { bottom: 11px; }
.screenshots-row .iphone-mockup .iphone-glow {
  filter: blur(16px);
  inset: -24px;
}

/* ── Screenshot caption ── */
.screenshot-caption {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
  font-weight: 500;
}

/* ── Animations ── */
.fade-up {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }
.fade-up:nth-child(5) { transition-delay: 0.4s; }
.fade-up:nth-child(6) { transition-delay: 0.5s; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-content .lead { margin: 0 auto 40px; }
  .hero-btns { justify-content: center; }
  .hero-stores { justify-content: center; }
  .hero-visual { display: none; }
  .features-secondary-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card.featured { grid-template-columns: 1fr; text-align: center; }
  .feature-card.featured .feature-icon { margin: 0 auto; }
  .featured-steps { justify-content: center; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split.reverse { direction: ltr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .laptop-frame { max-width: 100%; }
  .screenshots-duo .laptop-frame { max-width: 100%; }
  .screenshots-duo .phone-frame { display: none; }
}

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .nav-links, .nav-actions { display: none; }
  .hamburger { display: flex; }
  .stat-item { flex-basis: calc(50% - 1px); padding: 14px 8px; }
  .stat-number { font-size: 1.4rem; line-height: 24px; height: 24px; }
  .stat-label { font-size: 11px; }
  .features-secondary-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .cta-banner { padding: 48px 24px; }
  .hero-btns { flex-direction: column; align-items: center; }
}

/* ══════════════════════════════════════════════════════════════
   SYSTÈME "SCÈNES ANIMÉES" — accueil (index.html uniquement)
   Repris à l'identique de la maquette demo_reference.html : chaque
   fonctionnalité = scène épinglée plein écran, vidéo pilotée par le
   scroll (GSAP ScrollTrigger, voir js/home.js), texte par étapes.
══════════════════════════════════════════════════════════════ */
:root{
  --ink:#F1F3EE; --muted:#9DA699; --dim:#6B7468;
  --green-soft:var(--green-light); --orange-soft:var(--orange-light);
  --line:rgba(241,243,238,.10); --glass:rgba(16,20,16,.55);
  --f-display:'Sora',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.h1,.h2{font-family:var(--f-display);font-weight:600;letter-spacing:-.04em;text-wrap:balance;margin:0;text-shadow:none}
.h1{font-size:clamp(44px,6.2vw,88px);line-height:.98}
.h2{font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.grad{background:linear-gradient(90deg,var(--green-soft),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:var(--orange-soft)}

/* Défilement normal V2 (02/11) : plus de section épinglée ni de Lenis —
   remplace l'ancien système scroll-scrub. Vidéo en boucle, textes qui
   s'enchaînent seuls au rythme de la vidéo (voir js/home.js). */
/* SCENES */
.scene{position:relative;height:320vh}
.scene.short{height:240vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.media{position:absolute;top:50%;right:max(16px,3vw);transform:translateY(-50%);width:min(65%,1020px);aspect-ratio:16/9;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 50%,#000 58%,transparent 100%);
          mask-image:radial-gradient(ellipse 62% 66% at 50% 50%,#000 58%,transparent 100%)}
#palm .media{width:min(73%,1160px);right:0}
.media video,.media img{width:100%;height:100%;object-fit:contain;display:block;will-change:transform}
.copy{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.copy .wrap{width:100%}
.beats{position:relative;max-width:520px;min-height:340px}
.beat{display:flex;flex-direction:column;gap:20px}
.js .beat{position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%)}
.js .beat + .beat{opacity:0;visibility:hidden}
.eyebrow{color:var(--orange-soft)}
.lead{font-size:18px;color:var(--muted);max-width:46ch;margin:0}
.h1{font-size:clamp(44px,6.2vw,88px);line-height:.98}
.h2{font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.grad{background:linear-gradient(90deg,var(--green-soft),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.soon-label{font-size:12px;color:var(--dim)}
.steps-list{display:flex;flex-direction:column;gap:14px;list-style:none;padding:0;margin:0}
.steps-list li{display:flex;align-items:center;gap:16px;font-family:var(--f-display);font-size:clamp(20px,2.2vw,28px);font-weight:500}
.steps-list li i{font-style:normal;font-family:var(--f-mono);font-size:13px;color:var(--green-soft);width:36px;height:36px;border-radius:50%;border:1px solid rgba(155,216,112,.4);display:inline-flex;align-items:center;justify-content:center;flex:none}
.glass{padding:16px 18px;border-radius:18px;background:var(--glass);border:1px solid rgba(241,243,238,.12);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.5);max-width:340px}
.glass .k{font-size:12px;color:var(--muted)}
.glass .v{font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:-.02em}
.dots{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;margin-top:12px}
.dots span{height:6px;border-radius:3px;background:rgba(241,243,238,.12)}
.dots span.on{background:var(--green)}
.dots span.now{background:var(--orange)}
.list-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0}
.list-2 li{padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(241,243,238,.03);font-weight:600;font-size:15px}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.tag.live{border-color:rgba(108,191,52,.45);color:var(--green-soft)}
pre.code{margin:0;padding:18px 20px;border-radius:16px;background:rgba(10,13,10,.85);border:1px solid var(--line);font-family:var(--f-mono);font-size:13px;line-height:1.7;color:#C9D1C5;overflow-x:auto;max-width:100%}
pre.code .k{color:var(--orange-soft)} pre.code .n{color:var(--green-soft)}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);z-index:3}
.progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--orange))}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint::after{content:"";width:1px;height:36px;background:linear-gradient(var(--dim),transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* MANIFESTO */
.manifesto{padding-block:22vh}
.manifesto p{font-family:var(--f-display);font-size:clamp(32px,4.4vw,62px);line-height:1.12;letter-spacing:-.035em;font-weight:500;margin:0;max-width:1050px}
.manifesto .w{display:inline-block}
.pill{display:inline-flex;align-items:center;gap:10px;padding:4px 18px 4px 6px;border-radius:999px;vertical-align:middle;font-size:.56em;background:rgba(108,191,52,.10);border:1px solid rgba(108,191,52,.38);color:var(--green-soft)}
.pill b{width:38px;height:38px;border-radius:50%;background:var(--green);display:inline-flex;align-items:center;justify-content:center}

/* CTA + FOOTER */
.final{padding-block:16vh 8vh;text-align:center}
.final .card{position:relative;border-radius:40px;padding:clamp(48px,8vw,96px) 24px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(80% 120% at 50% 0%,rgba(108,191,52,.30),transparent 60%),radial-gradient(70% 100% at 50% 100%,rgba(242,106,10,.26),transparent 60%),#0A0D0A}
.final img{width:110px;height:110px}
.final h2{font-size:clamp(36px,5vw,64px);margin:18px auto 14px;max-width:760px}
.final p{color:var(--muted);max-width:520px;margin:0 auto}
.final .ctas{justify-content:center;margin-top:32px}
.badge{display:inline-block;font-size:12px;padding:6px 12px;border-radius:999px;background:rgba(108,191,52,.14);color:var(--green-soft)}
footer{overflow:hidden;padding-top:40px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px;padding-block:24px 48px}
.fbrand img{width:56px;height:56px}
.fbrand p{color:var(--muted);font-size:15px;max-width:40ch;margin:16px 0 20px}
.socials{display:flex;gap:10px}
.socials a{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;font-size:14px;color:var(--ink);background:rgba(241,243,238,.03)}
.socials a:hover{border-color:rgba(108,191,52,.5)}
.fcol{display:flex;flex-direction:column;gap:14px}
.fcol .mono{color:var(--dim);margin-bottom:4px}
.fcol a{color:var(--muted);text-decoration:none;font-size:15px}
.fcol a:hover,.flegal a:hover{color:var(--ink)}
.flegal{display:flex;gap:22px}
.flegal a{color:var(--dim);text-decoration:none}
@media (max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand{grid-column:1/-1}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--dim);font-size:13px;border-top:1px solid var(--line);padding-top:24px}
.giant{font-family:var(--f-display);font-weight:700;letter-spacing:-.065em;line-height:.8;text-align:center;white-space:nowrap;font-size:19vw;margin-top:4vh;
  background:linear-gradient(180deg,rgba(108,191,52,.85),rgba(242,106,10,.22) 70%,transparent);-webkit-background-clip:text;background-clip:text;color:transparent}

/* MARCHANDS : tableau de bord recréé en code */
.mscene{height:420vh}
.mscene .beats{max-width:430px}
@media (min-width:761px){.mlap{width:min(57%,900px) !important}}
.mlap{-webkit-mask-image:none !important;mask-image:none !important;aspect-ratio:16/10.6 !important;perspective:1600px}
.laptop{transform-origin:50% 100%;will-change:transform}
.lap-frame{padding:10px;border-radius:18px;background:linear-gradient(160deg,#2A2E33,#121417);box-shadow:0 60px 120px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.08)}
.screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:9px;background:#13203A}
.fit{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;transform:scale(var(--s,.5))}
.lap-base{height:14px;width:112%;margin-left:-6%;background:linear-gradient(#34383F,#16191D);border-radius:0 0 16px 16px}
.cam{width:1280px;height:800px;display:flex;font-family:"Poppins",var(--f-body);color:#EAF0FA;will-change:transform}
.d-side{width:250px;flex:none;background:#14203A;border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;padding-top:28px;gap:6px}
.d-side img{width:46px;height:46px;margin-bottom:22px}
.d-item{display:flex;align-items:center;gap:16px;width:210px;padding:11px 14px;font-size:15px;color:#C9D2E3;border-radius:12px}
.d-item svg{width:22px;height:22px;flex:none}
.d-item.on{color:#3DBA45;font-weight:600}
.d-item.on svg{background:#F26A0A;border-radius:999px;padding:6px;width:52px;height:34px;margin-left:-14px;color:#3DBA45}
.d-main{flex:1;min-width:0;background:linear-gradient(180deg,#14283A,#152238)}
.d-top{height:62px;display:flex;align-items:center;padding:0 22px;font-size:24px;font-weight:500}
.d-band{height:66px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;background:rgba(255,255,255,.03)}
.d-body{display:flex;gap:26px;padding:24px 22px}
.d-left{width:440px;flex:none;display:flex;flex-direction:column;gap:16px}
.d-shop{font-size:18px;font-weight:600;display:flex;gap:10px;align-items:center}
.d-shop svg{width:20px;height:20px;color:#3DBA45}
.d-welcome{margin:0 16px;padding:30px 20px;border-radius:16px;background:#1F2440;font-weight:600;font-size:16px}
.tg{position:relative;display:flex;height:50px;border-radius:14px;background:#1B2746;border:1px solid rgba(255,255,255,.12);overflow:hidden;font-size:13px;font-weight:700;letter-spacing:.02em}
.tg-knob{position:absolute;left:0;top:0;width:50%;height:100%;background:#3DBA45;border-radius:13px}
.tg span{position:relative;flex:1;display:flex;align-items:center;justify-content:center}
.tg .b{color:#FFFFFF}.tg .p{color:#9AA6C0}
.flip{perspective:1400px;height:216px}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.face{position:absolute;inset:0;border-radius:24px;padding:24px 26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.face.biz{background:linear-gradient(135deg,#145A2E,#0E3B22)}
.face.per{background:linear-gradient(135deg,#1F3C8A,#132652);transform:rotateY(180deg)}
.face::after{content:"";position:absolute;right:-50px;top:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.05)}
.face .chip{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.08em;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.14)}
.face .lg{position:absolute;right:24px;top:22px;width:44px;height:44px;border-radius:10px;background:#0B0F0B;padding:3px}
.face small{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.75)}
.face .amt{font-size:32px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.d-acc{text-align:center;font-size:14px;letter-spacing:.12em;color:#9AA6C0}
.d-btns{display:flex}
.d-btn{width:100px;height:96px;margin-right:12px;border-radius:16px;border:1px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;overflow:hidden;white-space:nowrap}
.d-btn svg{width:24px;height:24px}
.d-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.d-h{font-size:19px;font-weight:600}
.d-sel{align-self:flex-start;padding:16px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.14);font-weight:600;font-size:15px}
.d-kpis{display:flex;gap:18px}
.d-kpi{flex:1;padding:24px;border-radius:18px;border:1px solid}
.d-kpi small{font-size:14px;color:#C9D2E3}
.d-kpi div{font-size:27px;white-space:nowrap;font-weight:600;margin-top:10px;font-variant-numeric:tabular-nums}
.d-chart{flex:1;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:#16233F;padding:18px 26px 12px;display:flex;align-items:flex-end;gap:14px;min-height:200px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bar i{display:block;width:14px;border-radius:7px 7px 0 0;background:#3DBA45;transform-origin:bottom}
.bar span{font-size:11px;color:#9AA6C0}

.vwrap{position:relative;width:100%;height:100%}
.vo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vfit{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;transform:scale(var(--vs,.5))}
.vscr{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;font-family:"Poppins",var(--f-body);color:#fff;mix-blend-mode:screen}
.vbrand{position:absolute;left:0;right:0;top:96px;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:600;font-size:40px;color:#E8DCCB;text-shadow:0 0 18px rgba(108,191,52,.6)}
.vbrand img{width:64px;height:64px}
.vbrand b{font-weight:600}.vbrand span{color:#7FD94A}
@media (min-width:761px){#transferts .beats{max-width:390px}}
.vamt{position:absolute;left:0;right:0;text-align:center;font-weight:700;font-size:52px;letter-spacing:-.01em;text-shadow:0 0 22px rgba(108,191,52,.7)}
.vsub{position:absolute;left:0;right:0;text-align:center;font-size:30px;color:#B8E6A0;opacity:.85}
/* TÉLÉPHONE 3D + écrans de l'app recréés */
.wide-mask{-webkit-mask-image:radial-gradient(ellipse 72% 76% at 50% 50%,#000 64%,transparent 100%) !important;mask-image:radial-gradient(ellipse 72% 76% at 50% 50%,#000 64%,transparent 100%) !important}
.pscene{height:460vh}
.pscene.two{height:260vh}
.pmedia{-webkit-mask-image:none !important;mask-image:none !important;aspect-ratio:1024/1536 !important;width:min(30%,440px) !important;right:12% !important}
.pfit{position:absolute;left:0;top:0;width:1024px;height:1536px;transform-origin:0 0;transform:scale(var(--ps,.3))}
.pfit>img{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 52% 46%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 52% 46%,#000 70%,transparent 100%)}
.scr{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;border-radius:46px;overflow:hidden;background:#0A1328}
.pv{position:absolute;inset:0;font-family:"Poppins",var(--f-body);color:#EEF2FA;overflow:hidden}
.pv + .pv{opacity:0}
.static .pv + .pv{opacity:0}
.pv .pad{padding:44px 20px 0}
.pv h3{font-family:"Poppins",var(--f-body);font-weight:500;letter-spacing:-.01em;font-size:26px;margin:0}
.u-bg{background:linear-gradient(180deg,#0E2A60 0%,#0B1A3C 45%,#0A1328 100%)}
.m-bg{background:linear-gradient(180deg,#13254A 0%,#0F1D3A 60%,#0D1830 100%)}
.d-bg{background:#0A1328}
.ava{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#2E8B57,#1F5F3D);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px}
.ibtn{width:50px;height:50px;border-radius:16px;background:#0C1A33;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;position:relative}
.ibtn svg{width:24px;height:24px}
.ibtn b{position:absolute;top:8px;right:9px;width:15px;height:15px;border-radius:50%;background:#F26A0A;font-size:9px;display:flex;align-items:center;justify-content:center}
.bal{border-radius:28px;padding:24px 26px;background:linear-gradient(135deg,#1F67C9,#123B85 55%,#0C1F45);box-shadow:0 20px 50px rgba(20,80,200,.25)}
.bal small{display:block;font-size:14px;color:#C7D6F2}
.bal .acc{font-size:13px;letter-spacing:.12em;margin-top:4px;font-weight:500}
.bal .row{display:flex;align-items:center;justify-content:space-between;margin-top:20px}
.bal .big{font-size:31px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pillb{padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.18);font-size:14px;font-weight:500}
.promo{margin:22px 10px 0;padding:16px 18px;border-radius:22px;background:#1A2140;border:1px solid rgba(255,255,255,.06)}
.promo b{display:block;font-size:15px;font-weight:500}
.promo span{display:block;font-size:12px;color:#9EABC6;margin-top:2px}
.promo i{display:inline-block;font-style:normal;margin-top:10px;font-size:13px;color:#4ADE80;border:1px solid #2B7A3A;border-radius:999px;padding:5px 14px}
.dots3{display:flex;justify-content:center;gap:5px;margin-top:10px}.dots3 span{width:6px;height:6px;border-radius:3px;background:#3A4766}.dots3 span.on{width:22px;background:#3DBA45}
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px;text-align:center;font-size:13px;color:#8FA4CC}
.svc div{display:flex;flex-direction:column;align-items:center;gap:8px}
.svc i{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;border:1px solid}
.svc svg{width:28px;height:28px}
.nav5{position:absolute;left:12px;right:12px;bottom:14px;height:96px;border-radius:30px;background:#0F1E3E;border:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-around;font-size:11px;color:#8A99B8}
.nav5 div{display:flex;flex-direction:column;align-items:center;gap:4px;width:62px}
.nav5 svg{width:24px;height:24px}
.nav5 .on{color:#3DBA45;background:rgba(61,186,69,.14);border-radius:18px;padding:8px 0}
.nav5 .mid{margin-top:-34px}
.nav5 .mid i{width:56px;height:56px;border-radius:50%;background:#F26A0A;display:flex;align-items:center;justify-content:center;color:#2A1200;box-shadow:0 8px 24px rgba(242,106,10,.4)}
.mcard{position:relative;margin-top:22px;height:226px;border-radius:24px;overflow:hidden;padding:22px;background:linear-gradient(115deg,#1F8A4C 0%,#1C6E8C 35%,#1B63C6 60%,#1550B0 100%)}
.mcard::before{content:"";position:absolute;left:-10%;right:-10%;top:52%;height:60px;transform:rotate(-7deg);background:linear-gradient(90deg,rgba(242,140,40,.15),#E8862A 30%,#D9671E 70%,rgba(140,110,120,.4))}
.mcard>*{position:relative}
.mcard .t{font-size:21px;font-weight:700}.mcard .t span{color:#4ADE80}
.mcard img{position:absolute;right:18px;top:16px;width:46px;height:46px}
.mcard .num{margin-top:42px;font-size:17px;letter-spacing:.12em;font-weight:500}
.mcard .meta{display:flex;gap:32px;margin-top:8px;font-size:9px;letter-spacing:.06em;color:rgba(255,255,255,.75)}
.mcard .meta b{display:block;font-size:15px;color:#fff;letter-spacing:0;margin-top:2px;font-weight:500}
.mcard .who{font-size:12px;letter-spacing:.12em;margin-top:6px;font-weight:500}
.mcard .visa{position:absolute;right:20px;bottom:16px;font-size:30px;font-weight:800;font-style:italic;letter-spacing:-.02em}
.r3{display:flex;justify-content:space-around;margin-top:22px;text-align:center;font-size:12px;color:#8FA4CC}
.r3 i{width:62px;height:62px;border-radius:50%;background:#10213F;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.r3 svg{width:24px;height:24px;color:#fff}
.hrow{display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:16px;font-weight:500}
.hrow span{color:#3DBA45;font-size:14px}
.empty{margin-top:12px;padding:20px;border-radius:18px;background:#10213F;text-align:center;color:#7F92B8;font-size:14px}
.seg{display:flex;padding:5px;border-radius:16px;background:#10213F;margin-top:20px;font-size:15px;font-weight:500}
.seg span{flex:1;text-align:center;padding:10px 0;border-radius:12px;color:#8FA0C2}
.seg span.on{background:#2BC266;color:#06210F}
.srch{margin-top:16px;padding:13px 16px;border-radius:16px;background:#10213F;border:1px solid rgba(255,255,255,.08);color:#7F92B8;font-size:14px;display:flex;gap:10px;align-items:center}
.srch svg{width:18px;height:18px}
.lbl{font-size:11px;letter-spacing:.12em;color:#7F92B8;margin:18px 0 8px;font-weight:600}
.ct{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ct i{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:600;font-size:14px;flex:none}
.ct div{flex:1;min-width:0}
.ct b{display:block;font-size:15px;font-weight:500}
.ct small{font-size:12px;color:#8FA0C2}
.ct em{font-style:normal;font-size:12px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#C7D2E8}
.ckb{margin-top:18px;padding:16px;border-radius:22px;border:1px solid rgba(61,186,69,.3);background:#0E1D26;font-size:13px;color:#A7B4CE;display:flex;flex-direction:column;gap:10px}
.ckb div{display:flex;gap:10px;align-items:flex-start}
.ckb svg{width:18px;height:18px;flex:none;margin-top:1px}
.ckb a{color:#3DBA45;font-size:12px}
.palm{margin-top:16px;padding:28px 18px;border-radius:26px;background:#10213F;border:1px solid rgba(61,186,69,.3);text-align:center}
.palm i{width:110px;height:110px;border-radius:50%;background:#14354A;display:flex;align-items:center;justify-content:center;margin:0 auto}
.palm i svg{width:56px;height:56px;color:#2BC266}
.palm b{display:block;font-size:24px;color:#2BC266;font-weight:500;margin-top:16px}
.palm span{display:block;font-size:13px;color:#8FA0C2;margin-top:6px}
.why{display:flex;gap:14px;margin-top:14px}
.why i{width:48px;height:48px;border-radius:14px;background:#102A2A;display:flex;align-items:center;justify-content:center;flex:none}
.why svg{width:22px;height:22px;color:#2BC266}
.why b{display:block;font-size:15px;font-weight:500}
.why span{font-size:12px;color:#8FA0C2}
.okc{width:104px;height:104px;border-radius:50%;background:#12342A;border:2px solid #237A45;display:flex;align-items:center;justify-content:center;margin:120px auto 0;box-shadow:0 0 0 30px rgba(35,122,69,.08)}
.okc svg{width:46px;height:46px;color:#2BC266}
.conf{position:absolute;inset:0;pointer-events:none}
.conf span{position:absolute;width:10px;height:4px;border-radius:2px;animation:fall 3.4s linear infinite}
@keyframes fall{0%{transform:translateY(-40px) rotate(0)}100%{transform:translateY(520px) rotate(540deg)}}
.rcpt{margin:18px 6px 0;padding:6px 20px;border-radius:24px;background:#10213F;font-size:14px}
.rcpt div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.rcpt div:last-child{border:0}
.rcpt span{color:#8FA0C2}
.gbtn{margin:22px 6px 0;padding:16px;border-radius:18px;background:#2BC266;color:#06210F;text-align:center;font-weight:500;font-size:15px}
.mhead{display:flex;justify-content:space-between;align-items:center}
.mhead small{display:block;color:#3DBA45;font-size:15px}
.wcard{position:relative;margin-top:18px;height:200px;border-radius:28px;padding:22px 24px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.wcard.b{background:linear-gradient(140deg,#1D5E33,#123F25)}
.wcard.p{background:linear-gradient(140deg,#1F64C8,#143F8F)}
.wcard::after{content:"";position:absolute;right:-40px;top:-30px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.06)}
.wcard .chip{align-self:flex-start;font-size:12px;letter-spacing:.1em;font-weight:500;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14)}
.wcard img{position:absolute;right:22px;top:20px;width:42px;height:42px}
.wcard small{font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.75)}
.wcard .big{font-size:30px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.wacc{text-align:center;color:#8FA0C2;font-size:13px;letter-spacing:.14em;margin-top:12px}
.mb4{display:flex;gap:8px;margin-top:16px}
.mb4 div{flex:1;height:84px;border-radius:16px;border:1px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:500}
.mb4 svg{width:22px;height:22px}
.perf{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:16px;font-weight:500}
.perf span{font-size:12px;color:#3DBA45;border:1px solid #2B7A3A;border-radius:999px;padding:6px 10px}
.nav5m{position:absolute;left:0;right:0;bottom:0;height:92px;background:#0C1730;display:flex;align-items:center;justify-content:space-around;font-size:11px;color:#8A99B8;border-top:1px solid rgba(255,255,255,.05)}
.nav5m div{display:flex;flex-direction:column;align-items:center;gap:4px}
.nav5m svg{width:24px;height:24px}
.nav5m .on{color:#3DBA45}
.nav5m .mid i{width:50px;height:50px;border-radius:50%;background:#3DBA45;display:flex;align-items:center;justify-content:center;color:#062010;margin-top:-10px}

.tcard{margin-top:14px;padding:16px;border-radius:20px;background:#10213F;border:1px solid rgba(255,255,255,.07)}
.tt{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tt b{font-size:16px;font-weight:600}
.tb{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap}
.tb.g{background:rgba(61,186,69,.16);color:#4ADE80}.tb.o{background:rgba(242,106,10,.16);color:#FDBA74}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips span{font-size:11px;padding:4px 9px;border-radius:8px;background:#172C52;color:#B9C6E0}
.tm{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:#8FA0C2}
.tm span:first-child{color:#F5A524}
.cd{margin-top:10px;font-size:12px;font-weight:600;color:#4ADE80}
.fab{position:absolute;right:20px;bottom:28px;padding:14px 20px;border-radius:18px;background:#2BC266;color:#06210F;font-weight:600;font-size:14px;box-shadow:0 10px 26px rgba(43,194,102,.35)}
.esc{margin-top:16px;padding:18px;border-radius:22px;background:linear-gradient(140deg,#1D5E33,#123F25)}
.esc small{font-size:12px;color:rgba(255,255,255,.75)}
.esc .big{font-size:26px;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.ec{font-size:12px;margin-top:6px;color:#D7F5D9}
.pb{height:7px;border-radius:4px;background:rgba(255,255,255,.15);margin-top:8px;overflow:hidden}
.pb i{display:block;height:100%;background:linear-gradient(90deg,#4ADE80,#F5A524);border-radius:4px}
.ecr{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:10px;color:rgba(255,255,255,.75)}
.tabs3{display:flex;margin-top:14px;border-bottom:1px solid rgba(255,255,255,.1);font-size:13px}
.tabs3 span{flex:1;text-align:center;padding:10px 0;color:#8FA0C2}
.tabs3 span.on{color:#3DBA45;border-bottom:2px solid #3DBA45;font-weight:600}
.mem{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.mem i{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:600;font-size:13px;flex:none}
.mem div{flex:1;min-width:0}
.mem b{display:block;font-size:14px;font-weight:500}
.mem small{font-size:11px;color:#8FA0C2}
.mem em{font-style:normal;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px}
.mem em.g{background:rgba(61,186,69,.16);color:#4ADE80}.mem em.b{background:rgba(59,130,246,.18);color:#7FB0FF}.mem em.o{background:rgba(242,106,10,.16);color:#FDBA74}
.notif{position:absolute;left:14px;right:14px;top:40px;z-index:2;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:20px;background:rgba(22,36,66,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.notif svg{width:22px;height:22px;color:#9FB0D0;flex:none;margin-top:2px}
.notif b{display:block;font-size:15px;font-weight:600}
.notif span{font-size:12px;color:#B9C6E0}

/* MOBILE: vidéo en haut, texte en bas */
@media (max-width:760px){
  .nav .wrap{padding-block:10px}
  .brand img{width:30px;height:30px}
  .brand b{font-size:16px}
  .brand small{font-size:9px}
  .nav .btn{min-height:40px;padding:9px 16px;font-size:13px;white-space:nowrap}
  .media,#palm .media{width:104%;right:-2%;top:calc(env(safe-area-inset-top,0px) + 78px);transform:none;
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 55%,transparent 100%)}
  .copy{align-items:flex-end;padding-bottom:9vh}
  .beats{min-height:300px}
  .js .beat{top:auto;bottom:0;transform:none}
  .lead{font-size:16px}
  .list-2{grid-template-columns:1fr}
  .scroll-hint{display:none}
  .mlap{width:94% !important;right:3% !important}
  .pmedia{width:min(74%,340px) !important;left:0 !important;right:0 !important;margin:0 auto}
}


/* ===== DÉFILEMENT NORMAL : une partie = un écran. La vidéo tourne en boucle,
   les textes changent tout seuls, au rythme de la vidéo (sans avoir à faire défiler) ===== */
.js .scene,.js .scene.short,.js .mscene,.js .pscene,.js .pscene.two{height:100vh!important;height:100svh!important}
.js .stage{position:relative;height:100%}
.js .beat,.js .beat + .beat{opacity:1;visibility:hidden;pointer-events:none}
.js .beat.on,.js .beat.out{visibility:visible;pointer-events:auto}
.js .beat>*{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.js .beat.on>*{opacity:1;transform:none;filter:none}
.js .beat.on>*:nth-child(2){transition-delay:.08s}
.js .beat.on>*:nth-child(3){transition-delay:.16s}
.js .beat.on>*:nth-child(4){transition-delay:.24s}
.js .beat.on>*:nth-child(5){transition-delay:.32s}
.js .beat.out>*{opacity:0;transform:translateY(-22px);filter:blur(6px);transition-duration:.4s;transition-delay:0s}
.steps-nav{position:absolute;left:0;right:0;bottom:30px;z-index:4;display:flex;justify-content:center;gap:8px}
.steps-nav button{all:unset;cursor:pointer;width:34px;height:24px;display:flex;align-items:center}
.steps-nav button i{display:block;width:100%;height:4px;border-radius:2px;background:rgba(241,243,238,.18);overflow:hidden}
.steps-nav button i b{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--orange))}
.steps-nav button:focus-visible{outline:2px solid var(--green-soft);outline-offset:3px;border-radius:4px}
.pv{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.js .progress{display:none}
#palm .scroll-hint{bottom:64px}
@media (max-width:760px){.steps-nav{bottom:12px}}
/* Ordinateur : parties moins hautes et vidéos plus grandes = moins de noir */
@media (min-width:761px){
  .js .scene,.js .scene.short,.js .pscene,.js .pscene.two{height:min(82vh,760px)!important;min-height:520px}
  .js .mscene{height:min(88vh,820px)!important;min-height:560px}
  .js #palm{height:100vh!important;height:100svh!important}
  .js .beat{text-shadow:0 2px 20px rgba(0,0,0,.95),0 0 40px rgba(0,0,0,.8)}
  .js .media{right:0;width:min(66%,1180px);-webkit-mask-image:radial-gradient(ellipse 66% 70% at 50% 50%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 66% 70% at 50% 50%,#000 64%,transparent 100%)}
  .js #palm .media{width:min(74%,1220px)}
  .js .wide-mask{-webkit-mask-image:radial-gradient(ellipse 74% 78% at 50% 50%,#000 68%,transparent 100%)!important;mask-image:radial-gradient(ellipse 74% 78% at 50% 50%,#000 68%,transparent 100%)!important}
  .js .pmedia{width:min(30%,calc(min(82vh,760px) / 1.62),460px)!important}
  .js .steps-nav{bottom:18px}
  .js .scene + .scene{margin-top:-1px}
}
@media (prefers-reduced-motion:reduce){.js .beat>*{transition:none}}

/* Sans animation : tout est empilé et lisible, les vidéos tournent en boucle */
.static .scene{height:auto}
.static .stage{position:relative;height:auto;min-height:100svh}
.static .beat{position:relative !important;opacity:1 !important;visibility:visible !important;transform:none !important;top:auto !important;margin-bottom:40px}
.static .beats{min-height:0}
@media (prefers-reduced-motion:reduce){.scroll-hint::after{animation:none}}

/* ══════════════════════════════════════════════════════════════
   PAGES PARTICULIERS & MARCHANDS V2 (02/11) — repris à l'identique
   de pages_particuliers_marchands/{particuliers,marchands}.html.
   Intègre : pastille "Particuliers | Marchands" dans le nav existant,
   caisse en direct (marchands), simulateur de tontine (particuliers),
   écrans codés dépôt/retrait/salaires, fiche terminal, 4 étapes, FAQ.
══════════════════════════════════════════════════════════════ */
.nav-left{display:flex;align-items:center;gap:20px}
/* ===================== PAGE MARCHANDS ===================== */
:root{--paper:#0B0F0B}
.mhero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:110px 0 70px}
.mhero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 75% 45%,rgba(242,106,10,.16),transparent 70%),radial-gradient(50% 60% at 20% 80%,rgba(108,191,52,.12),transparent 70%);pointer-events:none}
.mhero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;width:100%}
.mhero .h1{font-size:clamp(44px,6vw,86px)}
.mhero .lead{margin-top:18px}
.mhero .ctas{margin-top:28px}
.trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;color:var(--muted);font-size:14px}
.trust span{display:flex;align-items:center;gap:8px}
.trust i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
/* Caisse en direct : la signature de la page */
.till{position:relative;aspect-ratio:1/1.02;max-width:620px;justify-self:end;width:100%}
.till video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:36px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%)}
.till-total{position:absolute;left:-6%;top:6%;padding:18px 22px;border-radius:22px;background:rgba(12,16,12,.78);border:1px solid rgba(241,243,238,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 70px rgba(0,0,0,.55);min-width:250px}
.till-total small{display:flex;align-items:center;gap:8px;font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.till-total small b{width:8px;height:8px;border-radius:50%;background:#4ADE80;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.till-total .v{font-family:var(--f-display);font-size:34px;font-weight:600;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--green-soft)}
.till-total .s{font-size:13px;color:var(--muted);margin-top:2px}
.feed{position:absolute;right:-4%;bottom:6%;width:min(300px,62%);display:flex;flex-direction:column-reverse;gap:10px}
.pay{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:rgba(12,16,12,.8);border:1px solid rgba(241,243,238,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.5);animation:payin .6s cubic-bezier(.2,.8,.2,1) both}
.pay.old{opacity:.55;transform:scale(.96)}
@keyframes payin{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
.pay i{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.pay i svg{width:20px;height:20px}
.pay div{flex:1;min-width:0}
.pay b{display:block;font-size:14px}
.pay span{font-size:12px;color:var(--muted)}
.pay em{font-style:normal;font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--green-soft);white-space:nowrap}
/* bandeau chiffres */
.facts{border-block:1px solid var(--line);background:rgba(241,243,238,.02)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{padding:34px 22px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact b{display:block;font-family:var(--f-display);font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.03em}
.fact span{color:var(--muted);font-size:14px}
/* écrans codés (employés, retraits) */
.ui{display:flex;align-items:center;justify-content:center;-webkit-mask-image:none!important;mask-image:none!important}
.panel{width:min(100%,520px);border-radius:28px;padding:22px;background:linear-gradient(160deg,rgba(22,30,22,.92),rgba(10,13,10,.92));border:1px solid rgba(241,243,238,.12);box-shadow:0 50px 110px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.panel h4{margin:0;font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.panel .sub{font-size:13px;color:var(--muted)}
.emp{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.emp:last-of-type{border-bottom:0}
.emp .av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.emp div{flex:1;min-width:0}
.emp b{display:block;font-size:15px}
.emp small{color:var(--muted);font-size:12px}
.emp .amt{font-family:var(--f-display);font-weight:600;font-size:15px;white-space:nowrap}
.st{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap;background:rgba(241,243,238,.08);color:var(--muted);transition:background .4s,color .4s}
.st.ok{background:rgba(108,191,52,.16);color:var(--green-soft)}
.paybtn{margin-top:16px;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:18px;background:rgba(108,191,52,.10);border:1px solid rgba(108,191,52,.35)}
.paybtn b{font-family:var(--f-display);font-size:22px;font-variant-numeric:tabular-nums}
.paybtn span{font-size:12px;color:var(--muted)}
.bar2{height:6px;border-radius:3px;background:rgba(241,243,238,.1);overflow:hidden;margin-top:10px}
.bar2 i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--orange));transition:width .6s ease}
.flow{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.wal{border-radius:22px;padding:18px;background:linear-gradient(140deg,#1D5E33,#123F25);min-height:128px;display:flex;flex-direction:column;justify-content:space-between}
.wal small{font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.75)}
.wal b{font-family:var(--f-display);font-size:24px;font-variant-numeric:tabular-nums}
.dests{display:flex;flex-direction:column;gap:10px}
.dest{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(241,243,238,.03);transition:border-color .4s,background .4s}
.dest.on{border-color:rgba(242,106,10,.6);background:rgba(242,106,10,.10)}
.dest i{width:30px;height:30px;border-radius:50%;flex:none}
.dest b{font-size:14px}.dest span{display:block;font-size:11.5px;color:var(--muted)}
.pipe{position:relative;width:70px;height:4px;border-radius:2px;background:rgba(241,243,238,.12);overflow:hidden}
.pipe::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,var(--orange),transparent);animation:pipe 1.3s linear infinite}
@keyframes pipe{to{left:100%}}
.soonb{display:inline-block;margin-left:8px;font:700 10px var(--f-mono);letter-spacing:.1em;padding:3px 8px;border-radius:999px;background:rgba(242,106,10,.16);color:var(--orange-soft);vertical-align:middle}
/* Terminal : fiche technique */
.spec{padding-block:14vh}
.spec .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.spec .vis{position:relative;border-radius:36px;overflow:hidden;aspect-ratio:4/3;background:#050705}
.spec .vis img,.spec .vis video{width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 60%,transparent 100%)}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 0}
.specs div{padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(241,243,238,.03)}
.specs b{display:block;font-family:var(--f-display);font-size:17px;font-weight:600}
.specs span{font-size:13px;color:var(--muted)}
/* 4 étapes */
.steps4{padding-block:12vh}
.steps4 .head{max-width:640px}
.track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:48px}
.track::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:var(--line)}
.track .fill{position:absolute;left:0;top:27px;height:2px;width:0;background:linear-gradient(90deg,var(--green),var(--orange));transition:width 1s ease}
.st4{position:relative}
.st4 .n{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 18px var(--f-mono);background:#0A0D0A;border:1px solid var(--line);color:var(--muted);transition:all .5s}
.st4.on .n{background:var(--green);color:#071307;border-color:var(--green);box-shadow:0 0 0 8px rgba(108,191,52,.12)}
.st4 h3{font-size:22px;margin:20px 0 8px}
.st4 p{margin:0;color:var(--muted);font-size:15px}
.st4 .t{display:inline-block;margin-top:12px;font:600 12px var(--f-mono);color:var(--orange-soft)}
/* FAQ */
.faq{padding-block:10vh}
.faq .grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:var(--f-display);font-size:19px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green-soft);font-size:24px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0;color:var(--muted);max-width:60ch}
@media (max-width:900px){
  .mhero .wrap,.spec .grid,.faq .grid{grid-template-columns:1fr}
  .till{justify-self:center;max-width:460px}
  .facts .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-left:0}
  .fact{border-top:1px solid var(--line)}
  .track{grid-template-columns:1fr 1fr;row-gap:36px}
  .track::before,.track .fill{display:none}
}
@media (max-width:560px){
  .till-total{left:0;top:2%;min-width:0;padding:14px 16px}.till-total .v{font-size:26px}
  .feed{right:0;width:78%}
  .track{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
}

@media (max-width:760px){
  .ui{top:calc(env(safe-area-inset-top,0px) + 70px)!important;height:auto;align-items:flex-start}
  .panel{padding:16px;border-radius:22px;width:100%}
  .panel h4{font-size:17px}
  .emp{padding:8px 0}.emp .av{width:34px;height:34px}.emp small{display:none}.emp b{font-size:14px}.emp .amt{font-size:13px}
  .emp:nth-of-type(n+4){display:none}
  .paybtn{margin-top:10px;padding:10px 12px}.paybtn b{font-size:18px}
  .flow{grid-template-columns:1fr auto 1fr;gap:10px}.pipe{width:28px}
  .wal{min-height:96px;padding:12px}.wal b{font-size:18px}
  .dest{padding:8px 10px}.dest span{display:none}.dest i{width:20px;height:20px}.dest b{font-size:12.5px}
  #retraits .paybtn{display:none}
}
@media (prefers-reduced-motion:reduce){.pay,.pipe::after,.till-total small b{animation:none}}


.aud{display:inline-flex;gap:3px;padding:4px;border-radius:999px;background:rgba(241,243,238,.06);border:1px solid var(--line)}
.aud a{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;color:var(--muted)}
.aud a.on{background:var(--ink);color:#071307}
.aud a:hover{color:var(--ink)}.aud a.on:hover{color:#071307}
@media (max-width:900px){.aud{display:none}}


/* ===================== PAGE PARTICULIERS ===================== */
.badges{display:flex;gap:10px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:14px;border:1px solid rgba(241,243,238,.18);background:rgba(241,243,238,.04);color:var(--ink);text-decoration:none}
.store small{display:block;font-size:10px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.store b{font-size:14px}
/* Simulateur de tontine : la signature de la page */
.sim{padding-block:14vh;position:relative}
.sim::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 70% 50%,rgba(108,191,52,.12),transparent 70%);pointer-events:none}
.sim .grid{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.ctrl{display:flex;flex-direction:column;gap:22px;margin-top:28px}
.ctrl label{display:flex;flex-direction:column;gap:10px;font-weight:600;font-size:15px}
.ctrl .row{display:flex;justify-content:space-between;align-items:baseline}
.ctrl output{font-family:var(--f-display);font-size:22px;font-weight:600;color:var(--green-soft);font-variant-numeric:tabular-nums}
.ctrl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green) var(--p,30%),rgba(241,243,238,.14) var(--p,30%));outline:none}
.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:4px solid var(--green);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.ctrl input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--green);cursor:pointer}
.ctrl input[type=range]:focus-visible{outline:2px solid var(--green-soft);outline-offset:6px}
.seg2{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(241,243,238,.06);border:1px solid var(--line);align-self:flex-start}
.seg2 button{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}
.seg2 button[aria-pressed=true]{background:var(--green);color:#071307}
.seg2 button:focus-visible{outline:2px solid var(--green-soft)}
.ring-wrap{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center}
.ring-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.mem-dot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 12px var(--f-body);background:#0E150E;border:1.5px solid rgba(241,243,238,.18);color:var(--muted);transition:all .45s cubic-bezier(.2,.8,.2,1)}
.mem-dot.paid{border-color:rgba(108,191,52,.6);color:var(--green-soft)}
.mem-dot.turn{background:var(--green);color:#071307;border-color:var(--green);transform:scale(1.25);box-shadow:0 0 0 8px rgba(108,191,52,.15),0 0 30px rgba(108,191,52,.5)}
.mem-dot.me{border-color:var(--orange);color:var(--orange-soft)}
.mem-dot.me.turn{background:var(--orange);color:#160800;box-shadow:0 0 0 8px rgba(242,106,10,.18),0 0 30px rgba(242,106,10,.55)}
.center{position:absolute;inset:22%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(16,24,16,.95),rgba(8,12,8,.95));border:1px solid var(--line);box-shadow:inset 0 0 60px rgba(108,191,52,.08)}
.center small{font:600 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.center b{font-family:var(--f-display);font-size:clamp(24px,3.2vw,38px);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:6px 0}
.center span{font-size:13px;color:var(--muted);max-width:80%}
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px}
.res div{padding:14px;border-radius:16px;border:1px solid var(--line);background:rgba(241,243,238,.03)}
.res b{display:block;font-family:var(--f-display);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.res span{font-size:12px;color:var(--muted)}
.note{font-size:12.5px;color:var(--dim);margin-top:14px}
@media (max-width:900px){.sim .grid{grid-template-columns:1fr}.ring-wrap{max-width:400px}}
@media (max-width:480px){.res{grid-template-columns:1fr 1fr}.mem-dot{width:34px;height:34px;margin:-17px 0 0 -17px;font-size:10.5px}}

/* Simulateur de tontine V2 (02/11) : cotisation 5 000-1 000 000 GNF pas 5 000,
   3 fréquences (jour/semaine/mois), ligne de calcul visible, 6 résultats
   (dont épargne annuelle et total versé = cagnotte). */
.ctrl .hint{display:block;font-size:12.5px;font-weight:400;color:var(--dim);margin-top:-4px}
.calc-line{margin-top:20px;padding:14px 16px;border-radius:14px;background:rgba(108,191,52,.06);border:1px solid rgba(108,191,52,.22);font-size:14.5px;color:var(--muted)}
.calc-line b{color:var(--green-soft);font-weight:600}
@media (max-width:560px){.res{grid-template-columns:1fr 1fr}}