/* ╔════════════════════════════════════════════════════════════════╗
       ║  1. RESET & BASE                                               ║
       ╚════════════════════════════════════════════════════════════════╝ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg); color: var(--text-1);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    h1, h2, h3, h4 { font-family: 'Outfit', -apple-system, 'Inter', sans-serif; }
    img, svg { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    input { font-family: inherit; }
    ul { list-style: none; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  2. DESIGN TOKENS — thème sombre (défaut) puis clair           ║
       ╚════════════════════════════════════════════════════════════════╝ */
    :root {
      /* Marque */
      --bg:           #06070F;
      --navy:         #0d0f1e;
      --cyan:         #2997ff;
      --purple:       #bf5af2;
      --amber:        #ffd60a;   /* statut Disponible */
      --green:        #30d158;   /* statut Ouvert */
      --orange:       #ff6b35;   /* statut Rupture */
      --red:          #ff453a;   /* statut Fermé */

      /* Verre liquide (cartes, boutons translucides) */
      --glass:        linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.01) 100%);
      --glass-hover:  linear-gradient(145deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.02) 100%);
      --glass-strong: linear-gradient(145deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 100%);
      --border-top:   rgba(255,255,255,0.18);
      --border-left:  rgba(255,255,255,0.08);
      --border-dim:   rgba(255,255,255,0.015);
      --border-bright:rgba(255,255,255,0.26);
      --shadow-base:  0 20px 48px -12px rgba(0,0,0,0.6);
      --inner-glow:   inset 0 1px 1px rgba(255,255,255,0.12);
      --inner-glow-strong: inset 0 1px 2px rgba(255,255,255,0.22);

      /* Texte */
      --text-1: #ffffff;
      --text-2: rgba(255,255,255,.75);
      --text-3: rgba(255,255,255,.62);

      /* Écran du téléphone (mockups SVG) */
      --ph-screen: #07101e;  --ph-map: #091220;  --ph-panel: #07101e;
      --ph-card: rgba(255,255,255,.048);  --ph-stroke: rgba(255,255,255,.09);
      --ph-hi: rgba(255,255,255,.88);  --ph-mid: rgba(255,255,255,.55);
      --ph-lo: rgba(255,255,255,.38);  --ph-div: rgba(255,255,255,.08);
      --ph-road: rgba(255,255,255,.065);  --ph-home: rgba(255,255,255,.26);
    }

    /* Thème clair — variantes désaturées, contrastes vérifiés séparément */
    [data-theme="light"] {
      color-scheme: light;
      --bg:           #F8FAFC;
      --cyan:         #0071e3;
      --purple:       #8944ab;
      --amber:        #b45309;
      --green:        #1d8348;
      --orange:       #c2410c;
      --red:          #c0392b;

      --glass:        linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.45) 100%);
      --glass-hover:  linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.65) 100%);
      --glass-strong: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 100%);
      --border-top:   rgba(255,255,255,1);
      --border-left:  rgba(255,255,255,0.8);
      --border-dim:   rgba(0,0,0,0.03);
      --border-bright:rgba(255,255,255,1);
      --shadow-base:  0 16px 40px -8px rgba(0,0,50,0.08);
      --inner-glow:   inset 0 2px 4px rgba(255,255,255,0.9);
      --inner-glow-strong: inset 0 2px 6px rgba(255,255,255,1);

      --text-1: #0F172A;
      --text-2: #334155;
      --text-3: #64748B;

      --ph-screen: #e8eff8;  --ph-map: #d2e4f5;  --ph-panel: #e4ecf7;
      --ph-card: rgba(0,0,0,.04);  --ph-stroke: rgba(0,0,0,.10);
      --ph-hi: rgba(0,0,0,.86);  --ph-mid: rgba(0,0,0,.50);
      --ph-lo: rgba(0,0,0,.38);  --ph-div: rgba(0,0,0,.07);
      --ph-road: rgba(0,80,160,.11);  --ph-home: rgba(0,0,0,.22);
    }

    /* Transition douce entre thèmes */
    body, .gc, .bg-canvas, #nav.solid, .pillar, .fbadge, .map-widget,
    .btn-ghost, .mitem, footer, .ttag, .feat-icon, .step-card, .step-num,
    .picon, .price-card, .tcard, .faq-item, .stat-card {
      transition-property: background, background-color, border-color, color, box-shadow;
      transition-duration: .4s;
      transition-timing-function: cubic-bezier(.25,.8,.25,1);
    }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  3. FOND AMBIANT — orbes flottants flous                       ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .bg-canvas { position:fixed; inset:0; z-index:0; overflow:hidden;
      background: radial-gradient(ellipse 140% 80% at 15% -5%, #0a1628 0%, transparent 55%),
                  radial-gradient(ellipse 80%  70% at 85% 110%, #140825 0%, transparent 55%), var(--bg); }
    [data-theme="light"] .bg-canvas {
      background: radial-gradient(ellipse 130% 70% at 12% -5%, rgba(0,212,255,.08) 0%, transparent 50%),
                  radial-gradient(ellipse 80% 60% at 88% 110%, rgba(168,85,247,.08) 0%, transparent 50%), var(--bg); }
    .bg-orb { position:absolute; border-radius:50%; filter:blur(120px); opacity:.28; mix-blend-mode:screen; }
    [data-theme="light"] .bg-orb { opacity:.2; mix-blend-mode:multiply; }
    .orb-1 { width:800px;height:800px;top:-240px;left:-180px;
      background:radial-gradient(circle,#0d2244 0%,transparent 70%); animation:oF1 26s ease-in-out infinite; }
    .orb-2 { width:560px;height:560px;top:28%;right:-140px;
      background:radial-gradient(circle,#2a0d5e 0%,transparent 70%); animation:oF2 32s ease-in-out infinite; }
    .orb-3 { width:460px;height:460px;bottom:8%;left:18%;
      background:radial-gradient(circle,#062a3a 0%,transparent 70%); animation:oF1 22s ease-in-out infinite reverse; }
    [data-theme="light"] .orb-1 { background:radial-gradient(circle,#7dd3fc 0%,transparent 70%); }
    [data-theme="light"] .orb-2 { background:radial-gradient(circle,#c4b5fd 0%,transparent 70%); }
    [data-theme="light"] .orb-3 { background:radial-gradient(circle,#67e8f9 0%,transparent 70%); }
    @keyframes oF1 { 0%,100%{transform:translate(0,0)scale(1)} 33%{transform:translate(55px,38px)scale(1.08)} 66%{transform:translate(-38px,75px)scale(.96)} }
    @keyframes oF2 { 0%,100%{transform:translate(0,0)scale(1)} 40%{transform:translate(-75px,-58px)scale(1.12)} 70%{transform:translate(38px,38px)scale(.92)} }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  4. LAYOUT & UTILITAIRES                                       ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .container { max-width:1200px; margin:0 auto; padding:0 28px; position:relative; z-index:1; }
    section    { position:relative; z-index:1; padding:120px 0; }

    /* Tête de section centrée */
    .section-head { text-align:center; margin-bottom:72px; }
    .section-head h2 { font-size:clamp(30px,4.8vw,56px); font-weight:900; letter-spacing:-.045em; line-height:1.1; margin-bottom:18px; }
    .section-head p { font-size:18px; color:var(--text-2); max-width:600px; margin:0 auto; line-height:1.7; }

    /* Séparateur de sections */
    .divider { height:1px; margin:0 24px; position:relative; z-index:1; opacity:.5;
      background:linear-gradient(to right,transparent,var(--border-bright),transparent); }
    [data-theme="light"] .divider { background:linear-gradient(to right,transparent,rgba(0,0,0,.08),transparent); opacity:1; }

    /* Pastille-label de section (ex. « Le problème ») */
    .label { display:inline-flex; align-items:center; gap:8px; padding:5px 14px;
      background:rgba(41,151,255,.08); border:1px solid rgba(41,151,255,.22); border-radius:999px;
      font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5ac8fa; margin-bottom:22px; }
    [data-theme="light"] .label { background:rgba(0,113,227,.08); border-color:rgba(0,113,227,.25); color:#0071e3; }
    .label-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan);
      box-shadow:0 0 10px var(--cyan); animation:blink 2s ease-in-out infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.5} }

    /* Texte en dégradé */
    .gt-cyan { background:linear-gradient(135deg,#5ac8fa,#2997ff);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .gt-full { background:linear-gradient(135deg,#2997ff 0%,#bf5af2 55%,#ff6cab 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  5. COMPOSANTS PARTAGÉS                                        ║
       ╚════════════════════════════════════════════════════════════════╝ */
    /* Carte « verre liquide » de base */
    .gc {
      background: var(--glass);
      border: 1px solid transparent;
      border-top-color: var(--border-top);
      border-left-color: var(--border-left);
      border-right-color: var(--border-dim);
      border-bottom-color: var(--border-dim);
      border-radius: 24px;
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      backdrop-filter: blur(24px) saturate(160%);
      box-shadow: var(--shadow-base), var(--inner-glow);
      transition: all .38s cubic-bezier(.22,.68,0,1.2);
    }
    .gc:hover {
      background: var(--glass-hover);
      transform: translateY(-6px);
      box-shadow: 0 32px 64px -16px rgba(0,0,0,0.7), var(--inner-glow-strong);
    }
    [data-theme="light"] .gc:hover { box-shadow: 0 24px 48px -12px rgba(0,0,50,0.12), var(--inner-glow-strong); }

    /* Bouton principal (plein) */
    .btn-primary {
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:13px 26px; border-radius:980px;
      background:#0071e3; color:#fff;
      font-size:14px; font-weight:600; letter-spacing:-.01em;
      transition:all .25s cubic-bezier(.25,.8,.25,1); cursor:pointer;
    }
    .btn-primary:hover { background:#0077ed; box-shadow:0 4px 16px rgba(0,113,227,.4); }
    .btn-primary svg { width:16px; height:16px; }

    /* Bouton secondaire (verre) */
    .btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:14px;
      background:var(--glass); border:1px solid transparent; border-top-color:var(--border-top); border-left-color:var(--border-left);
      font-size:14px; font-weight:500; color:var(--text-1); box-shadow:var(--shadow-base), var(--inner-glow);
      transition:all .3s; cursor:pointer; }
    .btn-ghost:hover { background:var(--glass-hover); transform:translateY(-2px); }
    .btn-ghost svg { width:17px; height:17px; }

    /* Badges store (App Store / Google Play) */
    .store-badge {
      display:flex; align-items:center; gap:12px; padding:10px 22px; border-radius:16px;
      background:linear-gradient(135deg,#1a1a1c,#000);
      border:1px solid transparent; border-top-color:rgba(255,255,255,.25); border-left-color:rgba(255,255,255,.15);
      transition:transform .3s, box-shadow .3s; min-width:175px;
      box-shadow:0 8px 24px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.1);
    }
    .store-badge:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.6), inset 0 1px 3px rgba(255,255,255,.2); }
    [data-theme="light"] .store-badge { background:#0F172A; box-shadow:0 8px 24px rgba(0,0,0,.15); }
    .store-badge-meta { text-align:left; }
    .store-badge-meta span { display:block; font-size:10px; color:#A6A6A6; letter-spacing:.5px; margin-bottom:2px; text-transform:uppercase; }
    .store-badge-meta strong { display:block; font-size:18px; font-weight:600; color:#fff; letter-spacing:-.5px; line-height:1; }

    /* Pastilles de statut — alignées sur les 4 statuts réels du produit */
    .status-pill { display:flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
      font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
      border:1px solid transparent; box-shadow:inset 0 1px 1px rgba(255,255,255,.1); }
    .sp-dot { width:6px; height:6px; border-radius:50%; }
    .s-ouvert  { background:rgba(48,209,88,.15);  color:var(--green);  border-top-color:rgba(48,209,88,.4); }
    .s-ouvert  .sp-dot { background:var(--green);  box-shadow:0 0 8px var(--green);  animation:blink 2s infinite; }
    .s-dispo   { background:rgba(255,214,10,.12); color:var(--amber);  border-top-color:rgba(255,214,10,.35); }
    .s-dispo   .sp-dot { background:var(--amber);  box-shadow:0 0 8px var(--amber);  animation:blink 2s .4s infinite; }
    .s-rupture { background:rgba(255,107,53,.14); color:var(--orange); border-top-color:rgba(255,107,53,.4); }
    .s-rupture .sp-dot { background:var(--orange); box-shadow:0 0 8px var(--orange); animation:blink 2s .8s infinite; }
    .s-ferme   { background:rgba(255,69,58,.14);  color:var(--red);    border-top-color:rgba(255,69,58,.3); }
    .s-ferme   .sp-dot { background:var(--red); }

    /* Logo SVG : alternance dark/light */
    .logo-svg { display:block; width:auto; height:52px; }
    .logo-svg--light { display:none; }
    [data-theme="light"] .logo-svg--dark  { display:none; }
    [data-theme="light"] .logo-svg--light { display:block; }

    /* Animations de marque (point live + ondes du logo) */
    @keyframes pulseGlow {
      0%,100% { transform:scale(.95); opacity:.8; }
      50% { transform:scale(1.05); opacity:1; filter:drop-shadow(0 0 14px var(--purple)); }
    }
    .live-dot-animate { transform-origin:center; animation:pulseGlow 2s infinite ease-in-out; }
    @keyframes signalWave {
      0% { opacity:0; transform:translateX(-5px); } 50% { opacity:1; } 100% { opacity:0; transform:translateX(2px); }
    }
    .wave-animate-1 { animation:signalWave 1.5s infinite linear; }
    .wave-animate-2 { animation:signalWave 1.5s infinite linear .3s; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  6. NAVIGATION (desktop + mobile)                              ║
       ╚════════════════════════════════════════════════════════════════╝ */
    #nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 0;
      transition:background .4s, border-color .4s, box-shadow .4s; }
    #nav.solid { background:rgba(6,7,15,.82); -webkit-backdrop-filter:blur(40px) saturate(180%);
      backdrop-filter:blur(40px) saturate(180%);
      border-bottom:1px solid rgba(255,255,255,.06); }
    [data-theme="light"] #nav.solid { background:rgba(255,255,255,.88); border-bottom-color:rgba(0,0,0,.04); }
    .nav-row { display:flex; align-items:center; justify-content:space-between; }
    .nav-links { display:flex; gap:32px; align-items:center; }
    .nav-links a { font-size:13px; font-weight:500; color:var(--text-2); transition:color .2s; }
    .nav-links a:hover { color:var(--text-1); }
    .nav-actions { display:flex; align-items:center; gap:12px; }

    /* Sélecteur de langue FR / EN */
    .lang-toggle { display:flex; align-items:center; gap:3px; }
    .lang-sep { color:var(--text-3); font-size:13px; margin:0 1px; }
    .lang-btn { padding:5px 9px; border-radius:7px; font-size:12px; font-weight:700; color:var(--text-3);
      transition:all .2s; border:1px solid transparent; }
    .lang-btn.active { background:var(--glass-strong); color:var(--text-1);
      border-top-color:var(--border-top); box-shadow:var(--inner-glow); }
    .lang-btn:hover:not(.active) { color:var(--text-2); }
    .mobile-nav-lang { display:flex; gap:10px; align-items:center; margin-top:8px; }
    @media(max-width:480px) { .nav-actions .lang-toggle { display:none; } }

    /* Bouton bascule de thème */
    .theme-btn { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
      background:var(--glass-strong); border:1px solid transparent; border-top-color:var(--border-top);
      color:var(--text-1); transition:all .3s; box-shadow:0 4px 12px rgba(0,0,0,.2), var(--inner-glow); }
    .theme-btn:hover { transform:translateY(-2px); }
    .theme-btn svg { width:18px; height:18px; }
    .icon-sun  { display:none; }
    [data-theme="light"] .icon-sun  { display:block; }
    [data-theme="light"] .icon-moon { display:none; }

    /* Burger + panneau plein écran mobile */
    .burger-btn { display:none; width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center;
      background:var(--glass-strong); border:1px solid transparent; border-top-color:var(--border-top);
      color:var(--text-1); box-shadow:0 4px 12px rgba(0,0,0,.2), var(--inner-glow); }
    .burger-btn svg { width:20px; height:20px; }
    .mobile-nav { position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.97);
      -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
      opacity:0; pointer-events:none; transition:opacity .3s cubic-bezier(.25,.8,.25,1); }
    .mobile-nav.open { opacity:1; pointer-events:auto; }
    [data-theme="light"] .mobile-nav { background:rgba(248,250,252,.97); }
    .mobile-nav a { font-family:'Outfit',sans-serif; font-size:26px; font-weight:700; color:var(--text-1);
      letter-spacing:-.02em; padding:6px 0; transition:color .2s; }
    .mobile-nav a:hover { color:var(--cyan); }
    .mobile-nav-close { position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:12px;
      display:flex; align-items:center; justify-content:center; background:var(--glass-strong);
      border:1px solid transparent; border-top-color:var(--border-top); color:var(--text-1); }
    .mobile-nav-close svg { width:20px; height:20px; }

    /* Lien d'évitement (accessibilité clavier) */
    .skip-link { position:absolute; left:-9999px; top:0; z-index:9999; padding:10px 20px;
      background:var(--cyan); color:#000; font-weight:700; border-radius:0 0 10px 10px; font-size:14px; }
    .skip-link:focus { left:50%; transform:translateX(-50%); }
    :focus-visible { outline:2px solid #2997ff; outline-offset:3px; border-radius:4px; }
    /* ╔════════════════════════════════════════════════════════════════╗
       ║  7. HERO                                                       ║
       ╚════════════════════════════════════════════════════════════════╝ */
    #hero { min-height:100vh; display:flex; align-items:center; padding-top:110px; padding-bottom:72px; overflow:hidden; }
    .hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
    .hero-eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 14px;
      background:rgba(41,151,255,.1); border:1px solid rgba(41,151,255,.28); border-radius:999px;
      font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5ac8fa; margin-bottom:28px; }
    [data-theme="light"] .hero-eyebrow { background:rgba(0,113,227,.08); border-color:rgba(0,113,227,.25); color:#0071e3; }
    .pulse-dot { width:7px; height:7px; border-radius:50%; background:#00f5ff; box-shadow:0 0 12px #00f5ff; animation:blink 2s ease-in-out infinite; }
    [data-theme="light"] .pulse-dot { background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
    h1.hero-h1 { font-size:clamp(38px,7.5vw,72px); font-weight:900; letter-spacing:-.055em; line-height:1.04; margin-bottom:24px; }
    .hero-sub { font-size:19px; color:var(--text-2); line-height:1.68; max-width:520px; margin-bottom:36px; letter-spacing:-.012em; }
    .hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
    .hero-note { font-size:13px; color:var(--text-3); margin-bottom:30px; }

    /* Drapeaux des pays couverts */
    .country-strip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .country-strip-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--text-3); margin-right:2px; }
    .c-tag { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-1);
      padding:5px 12px; background:var(--glass); border:1px solid transparent;
      border-top-color:var(--border-top); border-left-color:var(--border-left); border-radius:999px;
      box-shadow:0 4px 12px rgba(0,0,0,.2), var(--inner-glow); }
    .c-tag svg { width:14px; height:14px; border-radius:50%; }
    .c-sep { color:var(--text-3); font-size:11px; }

    /* Mockup téléphone + anneaux + badges flottants */
    .hero-visual { position:relative; display:flex; justify-content:center; align-items:center; perspective:1000px; }
    .ring { position:absolute; border-radius:50%; border:1px solid transparent;
      border-top-color:rgba(0,212,255,.2); border-left-color:rgba(0,212,255,.1); }
    .ring-1 { width:480px; height:480px; animation:ringP 5s ease-in-out infinite; }
    .ring-2 { width:360px; height:360px; border-top-color:rgba(168,85,247,.2); border-left-color:rgba(168,85,247,.1);
      animation:ringP 5s ease-in-out 1.5s infinite reverse; }
    @keyframes ringP { 0%,100%{transform:scale(1)rotate(0)} 50%{transform:scale(1.04)rotate(5deg);opacity:.6} }
    .phone-wrap { position:relative; z-index:2; animation:pFloat 6s ease-in-out infinite; transform-style:preserve-3d; }
    @keyframes pFloat { 0%,100%{transform:translateY(0)rotateX(2deg)rotateY(-2deg)} 50%{transform:translateY(-20px)rotateX(-2deg)rotateY(2deg)} }
    .phone-svg { width:268px; filter:drop-shadow(0 50px 100px rgba(0,0,0,.8)) drop-shadow(0 0 60px rgba(0,212,255,.2)); }
    .fbadge { position:absolute; display:flex; align-items:center; gap:8px; padding:10px 16px;
      background:linear-gradient(135deg,rgba(30,41,59,.9),rgba(15,23,42,.9));
      border:1px solid transparent; border-top-color:rgba(255,255,255,.3); border-left-color:rgba(255,255,255,.15);
      border-radius:16px; -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px); box-shadow:0 12px 32px rgba(0,0,0,.5);
      font-size:13px; font-weight:700; white-space:nowrap; z-index:3; color:#fff; }
    [data-theme="light"] .fbadge { background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(248,250,252,.9)); color:#0F172A;
      box-shadow:0 12px 32px rgba(0,0,0,.08); }
    .fb-1 { top:12%; right:-32px; animation:bF 4s ease-in-out infinite; }
    .fb-2 { bottom:32%; left:-54px; animation:bF 4s ease-in-out 1.4s infinite; }
    .fb-3 { bottom:12%; right:-14px; animation:bF 4s ease-in-out .7s infinite; }
    @keyframes bF { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    .bdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .bdot-g { background:var(--green); box-shadow:0 0 10px var(--green); animation:blink 2s infinite; }
    .bdot-y { background:var(--amber); box-shadow:0 0 10px var(--amber); animation:blink 2s .5s infinite; }
    .bdot-o { background:var(--orange); box-shadow:0 0 10px var(--orange); animation:blink 2s 1s infinite; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  8. MARQUEE — bandeau de confiance                             ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .marquee-container { display:flex; flex-direction:column; gap:16px; overflow:hidden; padding:40px 0;
      position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05);
      -webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);
      mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent); }
    [data-theme="light"] .marquee-container { border-color:rgba(0,0,0,.03); }
    .marquee-track { display:flex; gap:16px; width:max-content; }
    .marquee-track:hover { animation-play-state:paused; }
    .track-left  { animation:mqLeft 40s linear infinite; }
    .track-right { animation:mqRight 45s linear infinite; }
    @keyframes mqLeft  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    @keyframes mqRight { from{transform:translateX(-50%)} to{transform:translateX(0)} }
    .mitem { display:flex; align-items:center; gap:12px; padding:12px 24px;
      background:var(--glass); border:1px solid transparent; border-top-color:var(--border-left);
      border-radius:999px; font-size:14px; font-weight:600; color:var(--text-2); white-space:nowrap;
      transition:all .3s; box-shadow:var(--inner-glow); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
    .mitem:hover { background:var(--glass-hover); border-top-color:var(--cyan); color:var(--text-1); transform:translateY(-3px); }
    .mitem svg { width:22px; height:22px; flex-shrink:0; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  9. STATISTIQUES — compteurs animés au scroll                  ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .social-proof { padding:72px 0; border-bottom:1px solid rgba(255,255,255,.04); }
    [data-theme="light"] .social-proof { border-bottom-color:rgba(0,0,0,.06); }
    .sp-grid { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
    .sp-stat { padding:32px 24px; border-right:1px solid rgba(255,255,255,.04); }
    .sp-stat:last-child { border-right:none; }
    [data-theme="light"] .sp-stat { border-right-color:rgba(0,0,0,.05); }
    .sp-num { font-family:'Outfit',sans-serif; font-size:clamp(36px,5.5vw,56px); font-weight:900;
      letter-spacing:-.05em; line-height:1; margin-bottom:10px; font-variant-numeric:tabular-nums;
      background:linear-gradient(135deg,#5ac8fa,#2997ff);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .sp-label { font-size:14px; font-weight:500; color:var(--text-3); line-height:1.4; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  10. LE PROBLÈME — bento grid                                  ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .problem-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
    .problem-card { padding:32px; display:flex; flex-direction:column; justify-content:center; }
    .problem-card:nth-child(1) { grid-column:span 7; }
    .problem-card:nth-child(2) { grid-column:span 5; }
    .problem-card:nth-child(3) { grid-column:span 5; }
    .problem-card:nth-child(4) { grid-column:span 7; }
    .picon { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center;
      margin-bottom:20px; border:1px solid transparent; border-top-color:rgba(255,255,255,.2);
      box-shadow:inset 0 2px 4px rgba(255,255,255,.1), 0 8px 16px rgba(0,0,0,.2); }
    .picon svg { width:28px; height:28px; stroke-width:2; stroke:currentColor; fill:none; stroke-linecap:round; stroke-linejoin:round; }
    .pi-r { background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(239,68,68,.05)); color:var(--red); }
    .pi-a { background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(245,158,11,.05)); color:var(--amber); }
    .pi-p { background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(168,85,247,.05)); color:var(--purple); }
    .pi-b { background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(6,182,212,.05)); color:var(--cyan); }
    .problem-card h3 { font-size:19px; font-weight:800; margin-bottom:10px; letter-spacing:-.025em; color:var(--text-1); }
    .problem-card p  { font-size:15px; color:var(--text-2); line-height:1.65; max-width:90%; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  11. COMMENT ÇA FONCTIONNE — 3 étapes + bannière prestataire   ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
    .steps-line { position:absolute; top:62px; left:16.66%; right:16.66%; height:3px; z-index:0; border-radius:2px; overflow:hidden; }
    .steps-line-bg { position:absolute; inset:0; background:rgba(255,255,255,.05); }
    [data-theme="light"] .steps-line-bg { background:rgba(0,0,0,.05); }
    .steps-line-progress { position:absolute; inset:0;
      background:linear-gradient(90deg,transparent,var(--cyan),var(--purple),transparent);
      background-size:200% 100%; animation:lineFlow 2s linear infinite; }
    @keyframes lineFlow { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
    .step-card { padding:44px 32px; text-align:center; border-radius:24px; position:relative; overflow:hidden; z-index:1;
      background:var(--glass); border:1px solid transparent; border-top-color:var(--border-top); border-left-color:var(--border-left);
      -webkit-backdrop-filter:blur(32px); backdrop-filter:blur(32px); box-shadow:var(--shadow-base), var(--inner-glow);
      transition:all .5s cubic-bezier(.2,.8,.2,1); }
    .step-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px;
      background:linear-gradient(90deg,var(--cyan),var(--purple)); opacity:0; transition:opacity .4s; }
    .step-card:hover, .step-card.is-active { transform:translateY(-14px) scale(1.02); background:var(--glass-hover); }
    .step-card:hover::before, .step-card.is-active::before { opacity:1; }
    .step-num { width:60px; height:60px; border-radius:20px; margin:0 auto 26px;
      background:linear-gradient(135deg,rgba(6,182,212,.15),rgba(168,85,247,.15));
      border:1px solid transparent; border-top-color:rgba(0,212,255,.4);
      display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:900; color:var(--cyan);
      transition:all .5s cubic-bezier(.2,.8,.2,1); }
    .step-card:hover .step-num, .step-card.is-active .step-num { transform:scale(1.15) rotate(-8deg); }
    .step-icon-wrap { height:68px; display:flex; justify-content:center; align-items:center; margin-bottom:20px; color:var(--text-1); }
    .step-icon { width:48px; height:48px; stroke:currentColor; transition:all .4s; }
    .step-card:hover .step-icon, .step-card.is-active .step-icon { color:var(--cyan); }
    .step-card h3 { font-size:20px; font-weight:800; margin-bottom:12px; letter-spacing:-.03em; }
    .step-card p  { font-size:15px; color:var(--text-2); line-height:1.65; }

    /* Bannière « Vous êtes prestataire ? » */
    .provider-banner { margin-top:48px; padding:40px 48px; display:flex; align-items:center; gap:44px; flex-wrap:wrap; }
    .pb-icon { width:64px; height:64px; flex-shrink:0; color:var(--amber); padding:14px; border-radius:20px;
      background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.05));
      border:1px solid transparent; border-top-color:rgba(245,158,11,.4); }
    .pb-icon svg { width:100%; height:100%; stroke:currentColor; stroke-width:1.5; fill:none; }
    .pb-body { flex:1; min-width:240px; }
    .pb-body h3 { font-size:24px; font-weight:900; letter-spacing:-.035em; margin-bottom:10px; }
    .pb-body p  { font-size:15px; color:var(--text-2); line-height:1.68; }
    /* ╔════════════════════════════════════════════════════════════════╗
       ║  12. DISPONIBILITÉ EN DIRECT — cartes services + widget carte  ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .live-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; flex-wrap:wrap; gap:22px; }
    .live-header h2 { font-size:clamp(30px,4.8vw,56px); font-weight:900; letter-spacing:-.045em; max-width:520px; line-height:1.08; }
    .ticker { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--green);
      padding:8px 18px; background:rgba(48,209,88,.15); border:1px solid transparent; border-top-color:rgba(48,209,88,.4);
      border-radius:999px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
    .svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
    .svc-card { padding:24px; }
    .svc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
    .svc-emoji { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:14px;
      background:rgba(255,255,255,.05); border:1px solid transparent; border-top-color:rgba(255,255,255,.15);
      box-shadow:0 8px 16px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.1); }
    .svc-emoji svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .svc-country { font-size:16px; }
    .svc-card h4 { font-size:15.5px; font-weight:700; margin-bottom:6px; color:var(--text-1); letter-spacing:-.02em; }
    .svc-meta { font-size:13px; color:var(--text-3); margin-bottom:16px; }
    .svc-footer { display:flex; justify-content:space-between; align-items:center; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
    [data-theme="light"] .svc-footer { border-top-color:rgba(0,0,0,.04); }
    .svc-dist { display:flex; align-items:center; gap:3px; font-size:12px; color:var(--text-2); font-weight:600; }
    .svc-dist svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2; }
    .svc-time { font-size:11px; color:var(--text-3); }

    /* Widget carte avec balayage radar */
    .map-widget { position:relative; width:100%; height:300px; margin-top:24px; border-radius:28px; overflow:hidden;
      background:linear-gradient(135deg,#091220,#040810); border:1px solid transparent; border-top-color:var(--border-top);
      box-shadow:0 24px 48px rgba(0,0,0,.6), inset 0 2px 4px rgba(255,255,255,.1); }
    [data-theme="light"] .map-widget { background:linear-gradient(135deg,#e0e7ff,#f8fafc); box-shadow:0 24px 48px rgba(0,0,50,.1); }
    .map-grid { position:absolute; inset:0;
      background-image:linear-gradient(rgba(0,212,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.06) 1px,transparent 1px);
      background-size:44px 44px; }
    .map-road-h { position:absolute; left:0; right:0; height:6px; background:rgba(255,255,255,.06); border-radius:3px; }
    .map-road-v { position:absolute; top:0; bottom:0; width:6px; background:rgba(255,255,255,.06); border-radius:3px; }
    [data-theme="light"] .map-road-h, [data-theme="light"] .map-road-v { background:rgba(255,255,255,.8); }
    .map-radar { position:absolute; top:50%; left:50%; width:250%; height:250%; border-radius:50%; pointer-events:none; z-index:1;
      background:conic-gradient(from 0deg,transparent 70%,rgba(6,182,212,.15) 85%,rgba(6,182,212,.5) 100%);
      transform-origin:center; animation:radarSpin 4s linear infinite; }
    @keyframes radarSpin { 0%{transform:translate(-50%,-50%)rotate(0)} 100%{transform:translate(-50%,-50%)rotate(360deg)} }
    .mpin { position:absolute; border-radius:50%; transform:translate(-50%,-50%); transition:opacity .5s; z-index:2;
      box-shadow:0 0 12px currentColor; }
    .mpin::after { content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid currentColor;
      opacity:.4; animation:mping 3s ease-out infinite; }
    @keyframes mping { 0%{transform:scale(.5);opacity:.8} 100%{transform:scale(2.5);opacity:0} }
    .map-label { position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:8px;
      font-size:12px; font-weight:800; color:var(--cyan); letter-spacing:.09em; text-transform:uppercase; z-index:3;
      background:rgba(15,23,42,.6); padding:6px 14px; border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
      border:1px solid rgba(0,212,255,.2); }
    [data-theme="light"] .map-label { background:rgba(255,255,255,.8); }
    .map-count { position:absolute; bottom:16px; right:16px; font-size:12.5px; font-weight:600; color:var(--text-1);
      background:rgba(0,0,0,.6); padding:8px 16px; border-radius:999px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); z-index:3;
      border:1px solid transparent; border-top-color:rgba(255,255,255,.2); }
    [data-theme="light"] .map-count { background:rgba(255,255,255,.85); }

    /* Légende des 4 statuts (sous la carte) */
    .status-legend { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:28px; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  13. CATÉGORIES                                                ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .cat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px; }
    .cat-card { aspect-ratio:1; padding:26px 18px; border-radius:26px; display:flex; flex-direction:column;
      align-items:center; justify-content:center; text-align:center; gap:12px; }
    .cat-icon { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center;
      border:1px solid transparent; border-top-color:rgba(255,255,255,.2); margin-bottom:4px;
      box-shadow:inset 0 2px 4px rgba(255,255,255,.1), 0 8px 16px rgba(0,0,0,.2); transition:transform .3s; }
    .cat-card:hover .cat-icon { transform:scale(1.1) translateY(-4px); }
    .cat-icon svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .ci-food    { background:linear-gradient(135deg,rgba(249,115,22,.2),rgba(249,115,22,.05)); color:var(--orange); }
    .ci-money   { background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(34,197,94,.05)); color:var(--green); }
    .ci-pharma  { background:linear-gradient(135deg,rgba(239,68,68,.2),rgba(239,68,68,.05)); color:var(--red); }
    .ci-fuel    { background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.05)); color:var(--amber); }
    .ci-mech    { background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(139,92,246,.05)); color:var(--purple); }
    .ci-grocery { background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(6,182,212,.05)); color:var(--cyan); }
    .ci-print   { background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(59,130,246,.05)); color:#3b82f6; }
    .ci-shop    { background:linear-gradient(135deg,rgba(236,72,153,.2),rgba(236,72,153,.05)); color:#ec4899; }
    .cat-name { font-size:14.5px; font-weight:700; color:var(--text-1); letter-spacing:-.02em; }
    .cat-sub  { font-size:11.5px; color:var(--text-3); line-height:1.45; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  14. EXPÉRIENCE MOBILE — avantages utilisateurs                ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .mobile-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
    .mobile-copy h2 { font-size:clamp(30px,4.8vw,56px); font-weight:900; letter-spacing:-.045em; line-height:1.08; margin-bottom:22px; }
    .mobile-copy > p { font-size:18px; color:var(--text-2); line-height:1.72; margin-bottom:44px; }
    .feat-list { display:flex; flex-direction:column; gap:22px; }
    .feat-item { display:flex; gap:16px; align-items:flex-start; }
    .feat-icon { width:46px; height:46px; flex-shrink:0; border-radius:14px; color:var(--cyan);
      background:var(--glass-strong); border:1px solid transparent; border-top-color:var(--border-top);
      box-shadow:0 8px 16px rgba(0,0,0,.2), var(--inner-glow);
      display:flex; align-items:center; justify-content:center; transition:transform .3s cubic-bezier(.25,.8,.25,1); }
    .feat-item:hover .feat-icon { transform:scale(1.15) rotate(5deg); }
    .feat-icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .feat-text h4 { font-size:16px; font-weight:700; margin-bottom:6px; color:var(--text-1); letter-spacing:-.025em; }
    .feat-text p  { font-size:14.5px; color:var(--text-2); line-height:1.65; }
    .mobile-phone-wrap { display:flex; justify-content:center; position:relative; }
    .mobile-glow { position:absolute; inset:10%; border-radius:50%;
      background:radial-gradient(ellipse,rgba(168,85,247,.25) 0%,transparent 70%);
      filter:blur(44px); animation:glowP 5.5s ease-in-out infinite; mix-blend-mode:screen; }
    [data-theme="light"] .mobile-glow { background:radial-gradient(ellipse,rgba(139,92,246,.15) 0%,transparent 70%); mix-blend-mode:multiply; }
    @keyframes glowP { 0%,100%{opacity:.8;transform:scale(1)} 50%{opacity:1;transform:scale(1.2)} }
    .phone-2-svg { width:260px; position:relative; z-index:1;
      filter:drop-shadow(0 60px 120px rgba(0,0,0,.9)) drop-shadow(0 0 50px rgba(168,85,247,.25));
      animation:pFloat2 7s ease-in-out infinite; }
    @keyframes pFloat2 { 0%,100%{transform:translateY(0)rotate(2deg)} 50%{transform:translateY(-18px)rotate(-1deg)} }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  15. COMMERÇANTS — offre & tarifs (FCFA)                       ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .price-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; margin-top:8px; }
    .price-card { padding:36px 30px; display:flex; flex-direction:column; position:relative; }
    .price-card.featured { border-top-color:rgba(0,212,255,.5); }
    .price-card.featured::before { content:'Recommandé'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
      padding:4px 14px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
      background:linear-gradient(135deg,#2997ff,#bf5af2); color:#fff; box-shadow:0 6px 16px rgba(41,151,255,.4); }
    .price-name { font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-bottom:14px; }
    .price-amount { font-family:'Outfit',sans-serif; font-size:40px; font-weight:900; letter-spacing:-.04em; color:var(--text-1); line-height:1; }
    .price-amount small { font-size:15px; font-weight:600; color:var(--text-3); letter-spacing:0; }
    .price-period { font-size:13px; color:var(--text-3); margin:8px 0 24px; }
    .price-feats { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; flex:1; }
    .price-feat { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text-2); line-height:1.5; }
    .price-feat svg { width:17px; height:17px; flex-shrink:0; stroke:var(--green); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
    .merchant-note { text-align:center; font-size:13.5px; color:var(--text-3); margin-top:28px; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  16. TÉMOIGNAGES                                               ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .tcard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
    .tcard { padding:34px 30px; display:flex; flex-direction:column; gap:20px; }
    .tcard-quote { font-size:15.5px; color:var(--text-2); line-height:1.7; flex:1; }
    .tcard-quote::before { content:'“'; display:block; font-family:'Outfit',sans-serif; font-size:44px; font-weight:900;
      line-height:.6; margin-bottom:14px;
      background:linear-gradient(135deg,#2997ff,#bf5af2);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .tcard-person { display:flex; align-items:center; gap:14px; }
    .tcard-avatar { width:46px; height:46px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-family:'Outfit',sans-serif; font-size:16px; font-weight:800; color:#fff;
      border:1px solid rgba(255,255,255,.2); box-shadow:0 6px 16px rgba(0,0,0,.3); }
    .av-1 { background:linear-gradient(135deg,#f97316,#c2410c); }
    .av-2 { background:linear-gradient(135deg,#06b6d4,#0e7490); }
    .av-3 { background:linear-gradient(135deg,#a855f7,#7e22ce); }
    .tcard-name { font-size:14.5px; font-weight:700; color:var(--text-1); }
    .tcard-role { font-size:12.5px; color:var(--text-3); }
    .tcard-stars { display:flex; gap:3px; }
    .tcard-stars svg { width:15px; height:15px; fill:var(--amber); }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  17. CONFIANCE & ANCRAGE LOCAL                                 ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .trust-box { padding:64px; border-radius:36px; text-align:center; position:relative; overflow:hidden; }
    .trust-box::before { content:''; position:absolute; top:0; left:10%; right:10%; height:2px;
      background:linear-gradient(to right,transparent,var(--cyan),var(--purple),transparent); opacity:.8; }
    .trust-box h2 { font-size:clamp(28px,4.5vw,52px); font-weight:900; letter-spacing:-.045em; margin-bottom:18px; line-height:1.08; }
    .trust-box > p { font-size:18px; color:var(--text-2); max-width:640px; margin:0 auto 52px; line-height:1.72; }
    .countries-row { display:flex; justify-content:center; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
    .cntry { display:flex; flex-direction:column; align-items:center; gap:10px; }
    .cntry-flag { width:36px; height:36px; border-radius:50%; overflow:hidden;
      border:1px solid rgba(255,255,255,.2); box-shadow:0 6px 16px rgba(0,0,0,.4);
      transition:transform .3s cubic-bezier(.25,.8,.25,1); }
    .cntry:hover .cntry-flag { transform:scale(1.15) translateY(-2px); }
    .cntry-name { font-size:12px; font-weight:700; color:var(--text-2); letter-spacing:.05em; text-transform:uppercase; }
    .pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-bottom:48px; }
    .pillar { padding:32px 24px; border-radius:20px;
      background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.005));
      border:1px solid transparent; border-top-color:rgba(255,255,255,.1); transition:transform .3s; }
    .pillar:hover { transform:translateY(-6px); }
    [data-theme="light"] .pillar { background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.3)); }
    .pillar-icon { width:44px; height:44px; margin:0 auto 16px; color:var(--cyan); }
    .pillar-icon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
    .pillar h4 { font-size:16px; font-weight:700; margin-bottom:8px; color:var(--text-1); letter-spacing:-.025em; }
    .pillar p  { font-size:14px; color:var(--text-2); line-height:1.65; }
    .trust-tags { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
    .ttag { display:flex; align-items:center; gap:8px; padding:8px 18px;
      background:var(--glass-strong); border:1px solid transparent; border-top-color:var(--border-top);
      border-radius:999px; font-size:13.5px; font-weight:500; color:var(--text-1);
      box-shadow:0 4px 12px rgba(0,0,0,.2), var(--inner-glow); }
    .ttag svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  18. FAQ — accordéon natif <details>                           ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
    .faq-item { border-radius:18px; background:var(--glass); border:1px solid transparent;
      border-top-color:var(--border-top); border-left-color:var(--border-left);
      box-shadow:var(--shadow-base), var(--inner-glow); overflow:hidden; transition:all .3s; }
    .faq-item[open] { background:var(--glass-hover); }
    .faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:22px 26px; cursor:pointer; list-style:none;
      font-family:'Outfit',sans-serif; font-size:16px; font-weight:700; color:var(--text-1); letter-spacing:-.02em; }
    .faq-item summary::-webkit-details-marker { display:none; }
    .faq-chevron { width:20px; height:20px; flex-shrink:0; stroke:var(--text-3); fill:none; stroke-width:2.5;
      stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.25,.8,.25,1); }
    .faq-item[open] .faq-chevron { transform:rotate(180deg); stroke:var(--cyan); }
    .faq-body { padding:0 26px 24px; font-size:14.5px; color:var(--text-2); line-height:1.7; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  19. CTA FINAL + CAPTURE EMAIL                                 ║
       ╚════════════════════════════════════════════════════════════════╝ */
    #cta { padding:120px 0; }
    .cta-wrap { text-align:center; position:relative; }
    .cta-glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:640px; height:320px;
      pointer-events:none; filter:blur(80px); mix-blend-mode:screen;
      background:radial-gradient(ellipse,rgba(41,151,255,.1) 0%,rgba(191,90,242,.08) 40%,transparent 70%); }
    [data-theme="light"] .cta-glow { mix-blend-mode:multiply; }
    .cta-wrap h2 { font-size:clamp(36px,6.5vw,76px); font-weight:900; letter-spacing:-.06em; line-height:1.04; margin-bottom:22px; }
    .cta-wrap > p { font-size:19px; color:var(--text-2); max-width:560px; margin:0 auto 44px; line-height:1.68; }
    .cta-btns { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:48px; }
    .cta-small { margin-top:28px; font-size:13.5px; font-weight:500; color:var(--text-3); }

    /* Formulaire email (liste de lancement) */
    .email-form { display:flex; gap:10px; max-width:480px; margin:0 auto; }
    .email-input { flex:1; padding:14px 20px; border-radius:14px; font-size:15px; color:var(--text-1);
      background:var(--glass); border:1px solid transparent; border-top-color:var(--border-top); border-left-color:var(--border-left);
      box-shadow:var(--inner-glow); outline:none; transition:border-color .25s, box-shadow .25s; }
    .email-input::placeholder { color:var(--text-3); }
    .email-input:focus { border-color:rgba(41,151,255,.5); box-shadow:0 0 0 4px rgba(41,151,255,.12); }
    .email-input.invalid { border-color:rgba(255,69,58,.6); box-shadow:0 0 0 4px rgba(255,69,58,.1); }
    .email-msg { margin-top:12px; font-size:13.5px; min-height:20px; }
    .email-msg.err { color:var(--red); }
    .email-msg.ok  { color:var(--green); font-weight:600; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  20. FOOTER                                                    ║
       ╚════════════════════════════════════════════════════════════════╝ */
    footer { padding:64px 0 36px; border-top:1px solid rgba(255,255,255,.05); position:relative; z-index:1;
      background:linear-gradient(180deg,transparent,rgba(0,0,0,.3)); }
    [data-theme="light"] footer { border-top-color:rgba(0,0,0,.04); background:linear-gradient(180deg,transparent,rgba(0,0,0,.02)); }
    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:48px; }
    .footer-brand p { font-size:13.5px; color:var(--text-3); line-height:1.65; margin-top:14px; max-width:280px; }
    .footer-col h5 { font-family:'Outfit',sans-serif; font-size:12px; font-weight:800; letter-spacing:.08em;
      text-transform:uppercase; color:var(--text-3); margin-bottom:18px; }
    .footer-col ul { display:flex; flex-direction:column; gap:12px; }
    .footer-col a { font-size:14px; font-weight:500; color:var(--text-2); transition:color .2s; }
    .footer-col a:hover { color:var(--text-1); }
    .footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
      padding-top:28px; border-top:1px solid rgba(255,255,255,.05); }
    [data-theme="light"] .footer-bottom { border-top-color:rgba(0,0,0,.05); }
    .footer-copy { font-size:13px; color:var(--text-3); }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  21. RÉVÉLATION AU SCROLL                                      ║
       ╚════════════════════════════════════════════════════════════════╝ */
    .rv { opacity:0; transform:translateY(36px);
      transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
    .rv.in { opacity:1; transform:translateY(0); }
    .rv-d1 { transition-delay:.1s; } .rv-d2 { transition-delay:.2s; }
    .rv-d3 { transition-delay:.3s; } .rv-d4 { transition-delay:.4s; }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  22. RESPONSIVE                                                ║
       ╚════════════════════════════════════════════════════════════════╝ */
    @media(max-width:1024px) {
      .problem-grid { grid-template-columns:repeat(2,1fr); }
      .problem-card:nth-child(n) { grid-column:span 1; }
      .hero-grid { gap:30px; }
      .mobile-grid { gap:40px; }
      .footer-grid { grid-template-columns:1fr 1fr; }
    }
    @media(max-width:860px) {
      .nav-links { display:none; }
      .burger-btn { display:flex; }
    }
    @media(max-width:768px) {
      section { padding:80px 0; }
      .container { padding:0 20px; }
      .hero-grid { grid-template-columns:1fr; gap:40px; text-align:center; }
      .hero-eyebrow { margin:0 auto 20px; }
      .hero-sub { margin:0 auto 32px; font-size:16px; }
      .hero-ctas { justify-content:center; flex-direction:column; align-items:center; }
      .hero-ctas > a, .hero-ctas > .btn-ghost { width:100%; max-width:320px; justify-content:center; }
      .country-strip { justify-content:center; margin-top:10px; }
      .hero-visual { order:-1; margin-bottom:20px; }
      .steps { grid-template-columns:1fr; gap:16px; }
      .steps-line { display:none; }
      .step-card { padding:32px 24px; }
      .mobile-grid { grid-template-columns:1fr; gap:48px; text-align:center; }
      .feat-item { text-align:left; }
      .mobile-phone-wrap { order:-1; }
      .trust-box { padding:40px 24px; border-radius:28px; }
      .live-header { flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:32px; }
      .provider-banner { flex-direction:column; padding:32px 24px; text-align:center; gap:20px; }
      .provider-banner .pb-icon { margin:0 auto; }
      .ring-1, .ring-2 { width:320px; height:320px; }
      .phone-svg { width:220px; }
      .phone-2-svg { width:240px; }
      .fbadge { font-size:11.5px; padding:8px 12px; }
      .fb-1 { top:0; right:-5px; } .fb-2 { bottom:15%; left:-10px; } .fb-3 { bottom:0; right:-5px; }
      .problem-grid { grid-template-columns:1fr; }
      .sp-grid { grid-template-columns:repeat(2,1fr); }
      .email-form { flex-direction:column; }
    }
    @media(max-width:480px) {
      section { padding:60px 0; }
      h1.hero-h1 { font-size:clamp(30px,9vw,40px); }
      .store-badge-meta strong { font-size:16px; }
      .cat-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
      .cat-card { padding:20px 12px; border-radius:20px; }
      .cat-icon { width:48px; height:48px; }
      .cta-btns { flex-direction:column; align-items:center; }
      .cta-btns > a { width:100%; justify-content:center; }
      .logo-svg { height:40px; }
      .footer-grid { grid-template-columns:1fr; gap:32px; }
    }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  23. ACCESSIBILITÉ — mouvement réduit, scrollbar               ║
       ╚════════════════════════════════════════════════════════════════╝ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
      }
    }
    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background:transparent; }
    ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
    ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }

    /* ╔════════════════════════════════════════════════════════════════╗
       ║  EX-INLINE — classes extraites des attributs style=             ║
       ╚════════════════════════════════════════════════════════════════╝ */
    /* Utilitaires */
    .mt-8  { margin-top:8px; }
    .mt-40 { margin-top:40px; }
    .mb-12 { margin-bottom:12px; }
    .flex-shrink-0 { flex-shrink:0; }
    .flex-ac-8 { display:flex; gap:8px; align-items:center; }
    .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0,0,0,0); white-space:nowrap; border:0; }

    /* Accents de texte inline */
    .txt-amber  { color:var(--amber); }
    .txt-purple { color:var(--purple); }

    /* Variantes de badge .label */
    .label--amber  { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.22); color:var(--amber); }
    .label--purple { background:rgba(139,92,246,.08); border-color:rgba(139,92,246,.22); color:var(--purple); }
    .label--mb26   { margin-bottom:26px; }
    .label-dot--amber  { background:var(--amber);  box-shadow:0 0 8px var(--amber); }
    .label-dot--purple { background:var(--purple); box-shadow:0 0 8px var(--purple); }

    /* Boutons */
    .btn-primary--lg { font-size:17px; padding:14px 32px; }
    .btn--center { justify-content:center; }

    /* Tarifs */
    .price-amount--sm { font-size:30px; }

    /* Badge live (point) */
    .bdot--sm { width:7px; height:7px; }

    /* Cartes services — variantes d'icône */
    .svc-emoji--orange { color:var(--orange); }
    .svc-emoji--amber  { color:var(--amber); }
    .svc-emoji--red    { color:var(--red); }
    .svc-emoji--purple { color:var(--purple); }
    .svc-emoji--wave   { background:linear-gradient(135deg,#0044ee,#0088ff); }
    .wave-w { font-size:17px; font-weight:900; font-family:'Outfit',sans-serif; color:#fff; }

    /* Carte démo — routes */
    .map-road-h--1 { top:38%; }
    .map-road-h--2 { top:58%; }
    .map-road-v--1 { left:35%; }
    .map-road-v--2 { left:62%; }

    /* Carte démo — épingles */
    .mpin-1 { top:36%; left:44%; width:13px; height:13px; background:#22c55e; color:#22c55e; }
    .mpin-2 { top:53%; left:64%; width:13px; height:13px; background:#ffd60a; color:#ffd60a; animation-delay:.7s; }
    .mpin-3 { top:29%; left:27%; width:12px; height:12px; background:#ff6b35; color:#ff6b35; animation-delay:1.1s; }
    .mpin-4 { top:63%; left:37%; width:12px; height:12px; background:#22c55e; color:#22c55e; animation-delay:.3s; }
    .mpin-5 { top:41%; left:71%; width:12px; height:12px; background:#22c55e; color:#22c55e; animation-delay:1.7s; }
    .mpin-6 { top:21%; left:57%; width:11px; height:11px; background:#ef4444; color:#ef4444; animation-delay:.5s; }
    .mpin-7 { top:70%; left:54%; width:12px; height:12px; background:#ffd60a; color:#ffd60a; animation-delay:.9s; }

    /* Logo footer + drapeaux */
    .logo-svg--42 { height:42px; }
    .footer-flags { font-size:13px; color:var(--text-3); }