<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vizion OS — Le système complet pour lancer et scaler ton business digital</title>
  <meta name="description"
    content="Vizion OS : formation Academy, outils VIZION (Web, IA, Trend, Flow, Planner), communauté privée et système de revente. Tout ce qu'il faut pour lancer, automatiser et scaler ton business digital.">
  <link rel="stylesheet" href="/fonts/inter.css">
  <link rel="stylesheet" href="./css/styles.css">
  <link rel="stylesheet" href="./css/hero-effects.css">
  <link rel="stylesheet" href="./css/bento-new.css">
  <link rel="stylesheet" href="./css/stacked-cards.css">

  <!-- Favicons -->
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/apple-touch-icon.png">
  <link rel="manifest" href="./json/site.webmanifest">
</head>

<body>

  <!-- Page Loader -->
  <div id="page-loader" style="position:fixed;inset:0;z-index:9999;background:#070a08;display:flex;align-items:center;justify-content:center;transition:opacity 0.4s ease;">
    <div style="width:36px;height:36px;border:3px solid rgba(52,211,153,0.15);border-top-color:#34d399;border-radius:50%;animation:loaderSpin 0.7s linear infinite;"></div>
  </div>
  <style>@keyframes loaderSpin{to{transform:rotate(360deg)}}</style>
  <script>window.addEventListener('load',function(){var l=document.getElementById('page-loader');if(l){l.style.opacity='0';setTimeout(function(){l.remove()},400);}});</script>

  <!-- Icônes SVG réutilisables — définies une seule fois, référencées par <use href="#id"> -->
  <svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
    <defs>
      <!-- Fusée (modules de formation) -->
      <symbol id="icon-rocket" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
        <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
        <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
        <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
      </symbol>

      <!-- Cœur / favori -->
      <symbol id="icon-heart" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
      </symbol>

      <!-- Téléchargement -->
      <symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <polyline points="7 10 12 15 17 10"/>
        <line x1="12" y1="15" x2="12" y2="3"/>
      </symbol>

      <!-- Livre (stat chapitres) -->
      <symbol id="icon-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
      </symbol>

      <!-- Chapeau de diplôme (stat leçons) -->
      <symbol id="icon-graduation" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
        <path d="M6 12v5c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2v-5"/>
      </symbol>

      <!-- Plus (nouvelle leçon) -->
      <symbol id="icon-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M12 2v20M2 12h20"/>
      </symbol>
    </defs>
  </svg>

  <!-- Hero Section -->
  <section class="hero hero-v2">

    <!-- Notifications qui remontent en carrousel -->
    <div class="notifications-carousel" id="notifications-carousel"></div>

    <div class="container">
      <!-- Badge + Titre + sous-titre -->
      <div class="hero-eyebrow">
        <span class="hero-eyebrow-dot"></span>
        <span>Vizion MRR</span>
      </div>

      <h1 class="hero-title">
        Ton business digital avec<br>le <span class="text-gradient-purple">MRR 2.0</span> en <span class="year-badge">2026</span>
      </h1>

      <p class="hero-subtitle">
        Formation, outils IA, communauté et revente — tout inclus, prêt à scaler.
      </p>

    </div>
  </section>

  <!-- Section Vidéo VSL -->
  <section class="hero-vsl-section" id="hero-vsl">
    <div class="container">
      <div class="hero-video-card">
        <div class="hero-video-card-inner">
          <div class="cl-video-container">
            <div class="cl-video-player">
              <div class="hero-video-section">
                <div class="hero-youtube-wrapper"
                     id="hero-youtube-wrapper"
                     data-video-id="">
                  <div class="hero-video-spinner" id="hero-video-spinner"></div>
                  <!-- Thumbnail chargée dynamiquement depuis la BDD -->
                  <img
                    id="hero-youtube-thumb"
                    class="hero-youtube-iframe"
                    src=""
                    alt="Présentation Vizion OS"
                    style="width:100%;height:100%;object-fit:cover;cursor:pointer;background:#0a0a0a;opacity:0;transition:opacity 0.4s ease;"
                    loading="lazy"
                  />
                </div>
              </div>
            </div>

            <div class="cl-video-overlay"></div>
            <div class="cl-click-indicator">
              <div class="cl-play-btn">
                <span class="cl-play-ripple"></span>
                <span class="cl-play-ripple cl-play-ripple--2"></span>
                <span class="cl-play-glass">
                  <svg width="22" height="26" viewBox="0 0 22 26" fill="none">
                    <path d="M2 1.5L20.5 13L2 24.5V1.5Z" fill="white" stroke="white" stroke-width="2" stroke-linejoin="round"/>
                  </svg>
                </span>
              </div>
              <span class="cl-click-text">Lancer la vidéo</span>
            </div>

            <!-- Images flottantes -->
            <div class="cl-results-wrapper">
              <img class="cl-result-main" src="assets/proof/proof1.jpeg" alt="Virements Revolut">
              <img class="cl-result-secondary" src="assets/proof/proof2.jpeg" alt="Total Payouts 92 031 $US">
            </div>
            <!-- Images droite : petit (Payouts) en haut + grand (Stripe) en bas -->
            <div class="cl-results-wrapper-right">
              <img class="cl-result-right-secondary" src="assets/proof/proof4.png" alt="Social proof">
              <img class="cl-result-right" src="assets/proof/proof3.png" alt="Paiements Stripe">
            </div>
          </div>
        </div>

        <!-- CTA sous la vidéo -->
        <div class="hero-video-cta">
          <div style="display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;">
            <a href="#pricing-scroll" id="hero-main-cta" class="btn btn-primary btn-compact cta-premium btn-glow-pulse">
              <span class="cta-diamond-icon">💰</span>
              <span>Rejoindre maintenant</span>
              <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
                <path d="M7.5 15l5-5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </a>
            <a href="/app" target="_blank" rel="noopener" class="btn btn-primary btn-compact cta-premium btn-glow-pulse" style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#fff;">
              <span class="cta-diamond-icon">🚀</span>
              <span>Accéder à la plateforme</span>
              <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
                <path d="M7.5 15l5-5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </a>
          </div>
          <p class="hero-video-cta-sub">Accès à vie — Commissions jusqu'à 75%</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Nouvelle Section Méthode d'accompagnement -->
  <section class="section section-dark" id="methode">
    <div class="container">
      <!-- Header Section -->
      <div class="methode-header">
        <!-- Section Title -->
        <div class="section-header animate-on-scroll">
          <div class="section-title-icon-wrapper">
            <svg class="section-title-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2">
              <polygon
                points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
            </svg>
          </div>
          <div class="section-title">
            3 piliers. Un seul objectif : scaler.
          </div>
        </div>
      </div>

      <!-- Main Grid -->
      <div class="methode-grid">
        <!-- Features de la Formation - Takes 2 rows -->
        <div class="methode-card methode-card-large">
          <div class="methode-card-header">
            <div class="methode-card-top">
              <div class="methode-icon-box">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon
                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                  </polygon>
                </svg>
              </div>
              <div class="methode-badge" id="academy-top-badge">Academy — 3 niveaux</div>
            </div>

            <h3 class="methode-card-title">Une Academy structurée</h3>

            <p class="methode-card-description">
              3 niveaux de licence (Starter, Pro, Premium) pour avancer à ton rythme et accéder à plus de modules, plus de leçons et de meilleures commissions.
            </p>
          </div>

          <div class="methode-card-content">
            <div class="methode-academy-stats">
              <span class="methode-stat-badge" id="academy-modules-badge">Chargement...</span>
              <span class="methode-stat-badge" id="academy-lessons-badge"></span>
              <span class="methode-stat-badge" id="academy-quiz-badge"></span>
            </div>
            <div id="academy-modules-list">
              <!-- Modules loaded dynamically from Supabase -->
            </div>
          </div>

          <script>
            (function() {
              var SUPABASE_URL = 'https://zrwpzetcfdpicjfdvikt.supabase.co';
              var SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inpyd3B6ZXRjZmRwaWNqZmR2aWt0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ5NDAwNTUsImV4cCI6MjA5MDUxNjA1NX0.huMkumw8BbEyxbnYnc9ijuMzRhK9jZ1jYe0bHV_jyWE';

              function apiFetch(path) {
                return fetch(SUPABASE_URL + '/rest/v1/' + path, {
                  headers: { 'apikey': SUPABASE_KEY, 'Authorization': 'Bearer ' + SUPABASE_KEY }
                }).then(function(r) { return r.json(); });
              }

              function parseSecs(duration) {
                if (!duration) return 0;
                var parts = duration.split(':').map(Number);
                if (parts.length === 3) return parts[0]*3600 + parts[1]*60 + parts[2];
                if (parts.length === 2) return parts[0]*60 + parts[1];
                return 0;
              }

              async function loadAcademyModules() {
                try {
                  // Fetch categories, modules, chapters, lessons separately
                  var [cats, modules, chapters, lessons] = await Promise.all([
                    apiFetch('academy_categories?is_draft=eq.false&select=id,order_index&order=order_index.asc'),
                    apiFetch('academy_modules?is_draft=eq.false&select=id,title,order_index,category_id&order=order_index.asc'),
                    apiFetch('academy_chapters?is_draft=eq.false&select=id,module_id'),
                    apiFetch('academy_lessons?is_draft=eq.false&select=id,duration,chapter_id&limit=1000')
                  ]);

                  // Build category order map
                  var catOrder = {};
                  cats.forEach(function(c) { catOrder[c.id] = c.order_index; });

                  // Build chapter -> module map
                  var chapterToModule = {};
                  chapters.forEach(function(ch) { chapterToModule[ch.id] = ch.module_id; });

                  // Sort modules by category order then module order
                  modules.sort(function(a, b) {
                    var catDiff = (catOrder[a.category_id] || 0) - (catOrder[b.category_id] || 0);
                    return catDiff !== 0 ? catDiff : (a.order_index || 0) - (b.order_index || 0);
                  });

                  // Calculate per-module duration and lesson count
                  var moduleDurations = {};
                  var moduleLessons = {};
                  var totalSeconds = 0;
                  lessons.forEach(function(l) {
                    var modId = chapterToModule[l.chapter_id];
                    if (!modId) return;
                    var secs = parseSecs(l.duration);
                    totalSeconds += secs;
                    moduleDurations[modId] = (moduleDurations[modId] || 0) + secs;
                    moduleLessons[modId] = (moduleLessons[modId] || 0) + 1;
                  });

                  var totalHours = Math.floor(totalSeconds / 3600);

                  // Update stats badges
                  var quizCount = lessons.filter(function(l) { return l.lesson_type === 'quiz'; }).length;
                  document.getElementById('academy-top-badge').textContent = 'Academy — ' + totalHours + 'h de formation';
                  document.getElementById('academy-modules-badge').textContent = '🎓 ' + modules.length + ' modules';
                  document.getElementById('academy-lessons-badge').textContent = '📚 ' + lessons.length + ' leçons';
                  document.getElementById('academy-quiz-badge').textContent = '🎯 ' + quizCount + ' quiz';

                  // Render first 4 modules
                  var html = '';
                  var showCount = Math.min(4, modules.length);
                  for (var i = 0; i < showCount; i++) {
                    var mod = modules[i];
                    var mins = Math.round((moduleDurations[mod.id] || 0) / 60);
                    var lCount = moduleLessons[mod.id] || 0;
                    var durationText = mins >= 60
                      ? Math.floor(mins/60) + 'h' + (mins%60 > 0 ? String(mins%60).padStart(2,'0') : '')
                      : mins + ' min';
                    var cleanTitle = mod.title.replace(/^\d+\s*[—–\-]\s*/, '');

                    html += '<div class="methode-module-item">';
                    html += '<div class="methode-module-icon"><span class="methode-module-num">' + (i+1) + '</span></div>';
                    html += '<div class="methode-module-content">';
                    html += '<div class="methode-module-header">';
                    html += '<span class="methode-module-number">Module ' + (i+1) + '</span>';
                    html += '<span class="methode-module-separator">•</span>';
                    html += '<span class="methode-module-name">' + cleanTitle + '</span>';
                    html += '</div>';
                    if (mins > 0 || lCount > 0) {
                      html += '<div class="methode-module-meta">';
                      if (mins > 0) html += '<span class="methode-module-duration">⏱ ' + durationText + '</span>';
                      if (lCount > 0) html += '<span class="methode-module-lessons">' + lCount + ' leçons</span>';
                      html += '</div>';
                    }
                    html += '</div></div>';
                  }

                  // "+ X autres modules"
                  if (modules.length > 4) {
                    var remaining = modules.length - 4;
                    html += '<div class="methode-module-item methode-module-more">';
                    html += '<div class="methode-module-icon"><span class="methode-module-num">+</span></div>';
                    html += '<div class="methode-module-content"><div class="methode-module-header">';
                    html += '<span class="methode-module-name">+ ' + remaining + ' autres modules</span>';
                    html += '</div></div></div>';
                  }

                  document.getElementById('academy-modules-list').innerHTML = html;
                } catch (e) {
                  console.error('Academy load error:', e);
                }
              }

              loadAcademyModules();
            })();
          </script>
        </div>

        <!-- Pratique > Théorie -->
        <div class="methode-card bento-card-choice">
          <div class="methode-card-header">
            <div class="methode-icon-box">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
              </svg>
            </div>

            <h3 class="methode-card-title">Vizion MRR — deux sources de revenus.</h3>

            <p class="methode-card-description">
              Tes clients passent au niveau supérieur ? Touches une commission sur chaque évolution.
            </p>
          </div>

          <div class="methode-card-content">
            <div class="mrr-flow-h">
              <!-- Left option -->
              <div class="mrr-flow-h-card">
                <div class="mrr-flow-h-icon">💰</div>
                <div class="mrr-flow-h-label">Vizion MRR</div>
                <div class="mrr-flow-h-desc">Revends l'accès et garde 100% des gains.</div>
              </div>

              <!-- SVG connector left -->
              <div class="mrr-flow-h-connector">
                <svg viewBox="0 0 60 4" preserveAspectRatio="none">
                  <line x1="0" y1="2" x2="60" y2="2" stroke="rgba(52,211,153,0.3)" stroke-width="1.5" stroke-dasharray="4 3" class="mrr-dash-anim"/>
                  <circle r="2.5" fill="#34d399" opacity="0.8">
                    <animateMotion dur="1.4s" repeatCount="indefinite" path="M0,2 L60,2"/>
                  </circle>
                  <circle r="1.5" fill="#34d399" opacity="0.4">
                    <animateMotion dur="2s" repeatCount="indefinite" path="M0,2 L60,2"/>
                  </circle>
                </svg>
              </div>

              <!-- Central node -->
              <div class="mrr-flow-h-node">
                <div class="mrr-flow-h-node-glow"></div>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                </svg>
                <span>Encaisse</span>
              </div>

              <!-- SVG connector right -->
              <div class="mrr-flow-h-connector">
                <svg viewBox="0 0 60 4" preserveAspectRatio="none">
                  <line x1="0" y1="2" x2="60" y2="2" stroke="rgba(52,211,153,0.3)" stroke-width="1.5" stroke-dasharray="4 3" class="mrr-dash-anim"/>
                  <circle r="2.5" fill="#34d399" opacity="0.8">
                    <animateMotion dur="1.4s" repeatCount="indefinite" path="M60,2 L0,2"/>
                  </circle>
                  <circle r="1.5" fill="#34d399" opacity="0.4">
                    <animateMotion dur="2s" repeatCount="indefinite" path="M60,2 L0,2"/>
                  </circle>
                </svg>
              </div>

              <!-- Right option -->
              <div class="mrr-flow-h-card mrr-flow-h-card--accent">
                <div class="mrr-flow-h-icon">📈</div>
                <div class="mrr-flow-h-label">Évolution</div>
                <div class="mrr-flow-h-desc">Commission sur chaque montée de niveau.</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Communauté Privée -->
        <div class="methode-card methode-card-community">
          <div class="methode-card-header">
            <div class="methode-icon-box">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
              </svg>
            </div>

            <h3 class="methode-card-title">Communauté privée</h3>

            <p class="methode-card-description">
              Forum intégré à la plateforme : pose tes questions, partage tes victoires, tu ne seras jamais seul(e).
            </p>
          </div>

          <div class="methode-card-content">
          </div>
        </div>
      </div>

      <!-- Bottom Section -->
      <div class="methode-bottom-grid">
        <!-- Plan validé - Spans 2 columns -->
        <div class="methode-card methode-card-wide">
          <div class="methode-card-header">
            <div class="methode-icon-box">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"></path>
              </svg>
            </div>

            <h3 class="methode-card-title">Un système d'évolution 🏆</h3>

            <p class="methode-card-description">
              Progressez à votre rythme et débloquez de nouveaux outils et avantages à chaque palier.
            </p>
          </div>

          <div class="methode-card-content">
            <div class="methode-phases-container">
              <div class="methode-progress-line">
                <div class="methode-progress-fill"></div>
                <div class="methode-progress-dot methode-progress-dot-1">
                  <svg class="methode-progress-check" width="10" height="10" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="3">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
                <div class="methode-progress-dot methode-progress-dot-2">
                  <svg class="methode-progress-check" width="10" height="10" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="3">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
                <div class="methode-progress-dot methode-progress-dot-3">
                  <svg class="methode-progress-check" width="10" height="10" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="3">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
              </div>
              <div class="methode-phases-grid">
                <div class="methode-phase-card methode-phase-card-1">
                  <div class="methode-phase-glow"></div>
                  <div class="methode-phase-content">
                    <div class="methode-phase-top">
                      <span class="methode-phase-badge">Niveau 1</span>
                    </div>
                    <div class="methode-phase-title">Pack Starter 🚀</div>
                  </div>
                  <div class="methode-phase-dot methode-phase-dot-1">
                    <span class="methode-phase-number">1</span>
                    <svg class="methode-phase-check" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="3">
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                </div>

                <div class="methode-phase-card methode-phase-card-2">
                  <div class="methode-phase-glow"></div>
                  <div class="methode-phase-content">
                    <div class="methode-phase-top">
                      <span class="methode-phase-badge">Niveau 2</span>
                    </div>
                    <div class="methode-phase-title">Pack Pro ⚡</div>
                  </div>
                  <div class="methode-phase-dot methode-phase-dot-2">
                    <span class="methode-phase-number">2</span>
                    <svg class="methode-phase-check" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="3">
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>
                </div>

                <div class="methode-phase-card methode-phase-card-3" id="phase-3">
                  <div class="methode-phase-glow"></div>
                  <div class="methode-confetti-container" id="confetti-container"></div>
                  <div class="methode-phase-content">
                    <div class="methode-phase-top">
                      <span class="methode-phase-badge">Niveau 3</span>
                    </div>
                    <div class="methode-phase-title">Pack Premium 👑</div>
                  </div>
                  <div class="methode-phase-dot methode-phase-dot-3">
                    <span class="methode-phase-number">3</span>
                    <svg class="methode-phase-check" width="12" height="12" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="3">
                      <polyline points="20 6 9 17 4 12"></polyline>
                    </svg>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Business clé en main -->
        <div class="methode-card methode-card-guarantee">
          <div class="methode-card-content methode-guarantee-content">
            <div class="methode-guarantee-icon-wrapper">
              <div class="methode-guarantee-icon-box" style="font-size: 48px; line-height: 1; display: flex; align-items: center; justify-content: center;">
                💰
                <div class="methode-guarantee-check">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                    <polyline points="20 6 9 17 4 12"></polyline>
                  </svg>
                </div>
              </div>
            </div>
            <h3 class="methode-guarantee-title">Ton business clé en main</h3>
            <p class="methode-guarantee-text">
              Scripts, séquences email, pages de vente, leads magnets, ressources téléchargeables… tout est dans le Kit. Tu n'as plus qu'à copier/coller, créer ton contenu et encaisser.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="stacked-section">
    <div class="container">
      <div class="section-header animate-on-scroll">
        <div class="section-title-icon-wrapper">
          <svg class="section-title-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2">
            <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path>
            <line x1="4" y1="22" x2="4" y2="15"></line>
          </svg>
        </div>
        <div class="section-title">
          Tout ce dont vous avez besoin pour réussir
        </div>
      </div>

      <div class="stacked-cards-wrapper">

        <!-- Card 1: Vizion Web -->
        <div class="stacked-card">
          <div class="stacked-card-content">
            <div class="card-icon-wrapper">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2"></rect>
                <path d="M3 9h18M9 21V9"></path>
              </svg>
            </div>
            <h3 class="card-title">Vizion Web — ta page de vente en quelques clics</h3>
            <p class="card-description">
              Construis ta landing page et ton lien en bio en glissant des blocs. Hero, témoignages, offre, CTA... tout s'assemble visuellement.
              <br><br>Aucune compétence technique. Tu glisses, tu publies. 🚀
            </p>
          </div>
          <div class="stacked-card-visual">
            <div class="visual-mockup-container vw-mockup" id="vw-mockup-interactive">
              <!-- Top bar: main tabs + live indicator -->
              <div class="vw2-topbar">
                <div class="vw2-main-tabs">
                  <div class="vw2-mtab vw2-mtab-active" onclick="vwSwitchMain(this,'bio')">
                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                    Link in Bio
                  </div>
                  <div class="vw2-mtab" onclick="vwSwitchMain(this,'lp')">
                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg>
                    Landing Page
                  </div>
                  <div class="vw2-mtab" onclick="vwSwitchMain(this,'themes')">
                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
                    Thème
                  </div>
                </div>
                <a class="vw2-live-badge" id="vw-live-btn" target="_blank" rel="noopener" data-bio-url="" data-lp-url="" style="pointer-events:none">
                  <span class="vw2-live-dot"></span>
                  <span class="vw2-live-dot-ping"></span>
                  Voir en live
                </a>
              </div>

              <!-- ===== VIEW: LINK IN BIO (Blocs) ===== -->
              <div class="vw2-body vw-view vw-view-active" id="vw-view-bio">
                <div class="vw2-editor" style="border-right:none">
                  <!-- Sub tabs (Blocs only, Avis/Stories shown but not clickable) -->
                  <div class="vw2-subtabs-bar">
                    <div class="vw2-stab vw2-stab-active">
                      <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                      Blocs
                    </div>
                    <div class="vw2-stab" style="opacity:0.35;cursor:default">
                      <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                      Avis
                    </div>
                    <div class="vw2-stab" style="opacity:0.35;cursor:default">
                      <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                      Stories
                    </div>
                  </div>
                  <!-- Blocs list -->
                  <div class="vw2-bloclist">
                    <div class="vw2-bloclist-header">
                      <div class="vw2-bloc-icon-header">
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                      </div>
                      <div>
                        <div class="vw2-bloclist-title">Blocs</div>
                        <div class="vw2-bloclist-count">11 bloc(s) actif(s)</div>
                      </div>
                    </div>
                    <!-- Pinned: Profil -->
                    <div class="vw2-block vw2-block-pinned">
                      <div class="vw2-block-pin">
                        <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 17v5M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24z"/></svg>
                      </div>
                      <div class="vw2-block-icon" style="background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.2)">
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                      </div>
                      <div class="vw2-block-info">
                        <span class="vw2-block-name">Profil</span>
                        <span class="vw2-block-desc">Photo, nom, bio & réseaux</span>
                      </div>
                      <svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg>
                    </div>
                    <!-- Sortable blocks -->
                    <div class="vw2-block">
                      <div class="vw2-block-drag">⋮⋮</div>
                      <div class="vw2-block-icon"><span>🎬</span></div>
                      <div class="vw2-block-info"><span class="vw2-block-name">Ma vidéo</span><span class="vw2-block-desc">Vidéo · Bloc 1</span></div>
                      <div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div>
                    </div>
                    <div class="vw2-block">
                      <div class="vw2-block-drag">⋮⋮</div>
                      <div class="vw2-block-icon"><span>🛍️</span></div>
                      <div class="vw2-block-info"><span class="vw2-block-name">Mon produit</span><span class="vw2-block-desc">Produit · Bloc 2</span></div>
                      <div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div>
                    </div>
                    <div class="vw2-block">
                      <div class="vw2-block-drag">⋮⋮</div>
                      <div class="vw2-block-icon"><span>📊</span></div>
                      <div class="vw2-block-info"><span class="vw2-block-name">Mes résultats</span><span class="vw2-block-desc">Résultats · Bloc 4</span></div>
                      <div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div>
                    </div>
                    <div class="vw2-block">
                      <div class="vw2-block-drag">⋮⋮</div>
                      <div class="vw2-block-icon"><span>💬</span></div>
                      <div class="vw2-block-info"><span class="vw2-block-name">Témoignages</span><span class="vw2-block-desc">Avis · Bloc 5</span></div>
                      <div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div>
                    </div>
                    <div class="vw2-block">
                      <div class="vw2-block-drag">⋮⋮</div>
                      <div class="vw2-block-icon"><span>📧</span></div>
                      <div class="vw2-block-info"><span class="vw2-block-name">Newsletter</span><span class="vw2-block-desc">Formulaire · Bloc 6</span></div>
                      <div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div>
                    </div>
                    <div class="vw2-block">
                      <div class="vw2-block-drag">⋮⋮</div>
                      <div class="vw2-block-icon"><span>🧲</span></div>
                      <div class="vw2-block-info"><span class="vw2-block-name">Lead Magnet</span><span class="vw2-block-desc">Capture · Bloc 7</span></div>
                      <div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div>
                    </div>
                    <!-- Pinned: Footer -->
                    <div class="vw2-block vw2-block-pinned">
                      <div class="vw2-block-pin">
                        <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 17v5M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24z"/></svg>
                      </div>
                      <div class="vw2-block-icon" style="background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.2)">
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
                      </div>
                      <div class="vw2-block-info">
                        <span class="vw2-block-name">Footer</span>
                        <span class="vw2-block-desc">Mentions légales & liens</span>
                      </div>
                      <svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg>
                    </div>
                  </div>
                </div>
              </div>

              <!-- ===== VIEW: LANDING PAGE ===== -->
              <div class="vw2-body vw-view" id="vw-view-lp" style="display:none">
                <div class="vw2-editor" style="border-right:none">
                  <div class="vw2-subtabs-bar">
                    <div class="vw2-stab vw2-stab-active">
                      <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                      Blocs
                    </div>
                  </div>
                  <div class="vw2-bloclist">
                    <div class="vw2-bloclist-header">
                      <div class="vw2-bloc-icon-header"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>
                      <div><div class="vw2-bloclist-title">Blocs</div><div class="vw2-bloclist-count">6 bloc(s) actif(s)</div></div>
                    </div>
                    <div class="vw2-block"><div class="vw2-block-drag">⋮⋮</div><div class="vw2-block-icon"><span>🎯</span></div><div class="vw2-block-info"><span class="vw2-block-name">Promesse de vente</span><span class="vw2-block-desc">Titre, sous-titre et CTA</span></div><div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div></div>
                    <div class="vw2-block"><div class="vw2-block-drag">⋮⋮</div><div class="vw2-block-icon"><span>🎬</span></div><div class="vw2-block-info"><span class="vw2-block-name">Vidéo (VSL)</span><span class="vw2-block-desc">YouTube ou Vimeo</span></div><div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div></div>
                    <div class="vw2-block"><div class="vw2-block-drag">⋮⋮</div><div class="vw2-block-icon"><span>⚡</span></div><div class="vw2-block-info"><span class="vw2-block-name">Pack mis en avant</span><span class="vw2-block-desc">Ton offre principale</span></div><div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div></div>
                    <div class="vw2-block"><div class="vw2-block-drag">⋮⋮</div><div class="vw2-block-icon"><span>💬</span></div><div class="vw2-block-info"><span class="vw2-block-name">Témoignage</span><span class="vw2-block-desc">Preuve sociale client</span></div><div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div></div>
                    <div class="vw2-block"><div class="vw2-block-drag">⋮⋮</div><div class="vw2-block-icon"><span>📣</span></div><div class="vw2-block-info"><span class="vw2-block-name">Appel à l'action</span><span class="vw2-block-desc">Bouton CTA final</span></div><div class="vw2-block-actions"><svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg class="vw2-block-chevron" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></div></div>
                  </div>
                </div>
              </div>

              <!-- ===== VIEW: THÈMES ===== -->
              <div class="vw2-body vw-view" id="vw-view-themes" style="display:none;flex-direction:column">
                <!-- Theme header like real platform -->
                <div class="vw2-theme-header">
                  <div class="vw2-theme-section-title">Couleurs & Style</div>
                  <div class="vw2-theme-cats">
                    <div class="vw2-theme-cat vw2-theme-cat-active">Tous <span class="vw2-theme-cat-count">24</span></div>
                    <div class="vw2-theme-cat">Starter <span class="vw2-theme-cat-count">5</span></div>
                    <div class="vw2-theme-cat">Pro <span class="vw2-theme-cat-count">6</span></div>
                    <div class="vw2-theme-cat">Premium <span class="vw2-theme-cat-count">13</span></div>
                  </div>
                </div>
                <div class="vw2-themes-grid">
                  <div class="vw2-theme-card vw2-theme-active" onclick="vwSelectTheme(this)">
                    <div class="vw2-theme-preview" style="background:linear-gradient(135deg,#0d1117,#111827)"><div class="vw2-theme-dot" style="background:#10b981;box-shadow:0 0 12px #10b981"></div></div>
                    <div class="vw2-theme-meta"><span class="vw2-theme-name">Émeraude</span><span class="vw2-theme-check">✓ Actif</span></div>
                  </div>
                  <div class="vw2-theme-card" onclick="vwSelectTheme(this)">
                    <div class="vw2-theme-preview" style="background:linear-gradient(135deg,#0d0d1a,#1a1030)"><div class="vw2-theme-dot" style="background:#8b5cf6;box-shadow:0 0 12px #8b5cf6"></div></div>
                    <div class="vw2-theme-meta"><span class="vw2-theme-name">Violet</span><span class="vw2-theme-check"></span></div>
                  </div>
                  <div class="vw2-theme-card" onclick="vwSelectTheme(this)">
                    <div class="vw2-theme-preview" style="background:linear-gradient(135deg,#1a0d0d,#271111)"><div class="vw2-theme-dot" style="background:#ef4444;box-shadow:0 0 12px #ef4444"></div></div>
                    <div class="vw2-theme-meta"><span class="vw2-theme-name">Rouge</span><span class="vw2-theme-check"></span></div>
                  </div>
                  <div class="vw2-theme-card" onclick="vwSelectTheme(this)">
                    <div class="vw2-theme-preview" style="background:linear-gradient(135deg,#0d1a1a,#112727)"><div class="vw2-theme-dot" style="background:#06b6d4;box-shadow:0 0 12px #06b6d4"></div></div>
                    <div class="vw2-theme-meta"><span class="vw2-theme-name">Cyan</span><span class="vw2-theme-check"></span></div>
                  </div>
                  <div class="vw2-theme-card" onclick="vwSelectTheme(this)">
                    <div class="vw2-theme-preview" style="background:linear-gradient(135deg,#1a1a0d,#272711)"><div class="vw2-theme-dot" style="background:#f59e0b;box-shadow:0 0 12px #f59e0b"></div></div>
                    <div class="vw2-theme-meta"><span class="vw2-theme-name">Ambre</span><span class="vw2-theme-check"></span></div>
                  </div>
                  <div class="vw2-theme-card" onclick="vwSelectTheme(this)">
                    <div class="vw2-theme-preview" style="background:linear-gradient(135deg,#1a0d1a,#271127)"><div class="vw2-theme-dot" style="background:#ec4899;box-shadow:0 0 12px #ec4899"></div></div>
                    <div class="vw2-theme-meta"><span class="vw2-theme-name">Rose</span><span class="vw2-theme-check"></span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 2: Forum -->
        <div class="stacked-card">
          <div class="stacked-card-content">
            <div class="card-icon-wrapper">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              </svg>
            </div>
            <h3 class="card-title">Forum — une communauté qui avance ensemble</h3>
            <p class="card-description">
              Pose tes questions, partage tes victoires et échange avec des membres qui vivent la même aventure.
              <br><br>Tu n'es jamais seul(e). La communauté est là pour toi 💪
            </p>
          </div>
          <div class="stacked-card-visual">
            <div class="visual-mockup-container fm2-mockup" id="fm2-mockup">
              <!-- Channel tabs -->
              <div class="fm2-channels">
                <div class="fm2-chan fm2-chan-active" onclick="fmSwitchChan(this,'tous')">Tous</div>
                <div class="fm2-chan" onclick="fmSwitchChan(this,'annonces')">🚨 Annonces</div>
                <div class="fm2-chan" onclick="fmSwitchChan(this,'generale')">💬 Générale</div>
                <div class="fm2-chan" onclick="fmSwitchChan(this,'temoignages')">Témoignages</div>
                <div class="fm2-chan" onclick="fmSwitchChan(this,'aide')">❓ Aide</div>
              </div>
              <!-- Compose bar -->
              <div class="fm2-compose">
                <div class="fm2-compose-avatar">V</div>
                <div class="fm2-compose-input">Vous, créez votre sujet...</div>
                <div class="fm2-compose-btn">+ Publier</div>
              </div>
              <!-- Posts container -->
              <div class="fm2-posts" id="fm2-posts">
                <!-- Channel: tous (default) — 4 posts -->
                <div class="fm2-post-group fm2-post-group-active" data-chan="tous">
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#10b981">S</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">sarah_m</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">💬 Générale</span></div>
                      <div class="fm2-post-title">1 000 € de commissions ce mois-ci 🎉</div>
                      <div class="fm2-post-desc">Juste pour partager ma victoire avec vous tous. La méthode fonctionne !</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️ 🔥 😂</span><span class="fm2-post-stat">💬 28</span><span class="fm2-post-stat">👁 142</span><span class="fm2-post-time">Il y a 2h</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#8b5cf6">L</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">lucas_v</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">💬 Générale</span></div>
                      <div class="fm2-post-title">Mon setup Vizion Web qui convertit à 8 %</div>
                      <div class="fm2-post-desc">Je vous explique étape par étape comment j'ai optimisé ma page.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️ 🔥</span><span class="fm2-post-stat">💬 9</span><span class="fm2-post-stat">👁 67</span><span class="fm2-post-time">Il y a 5h</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#f59e0b">A</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">alice_r</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">❓ Aide</span></div>
                      <div class="fm2-post-title">Comment démarrer sans audience ?</div>
                      <div class="fm2-post-desc">Je viens de rejoindre, par où commencer ?</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️</span><span class="fm2-post-stat">💬 5</span><span class="fm2-post-stat">👁 31</span><span class="fm2-post-time">Il y a 8h</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#06b6d4">T</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">theo_d</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">Témoignages</span></div>
                      <div class="fm2-post-title">5 400 € récurrents grâce au MRR</div>
                      <div class="fm2-post-desc">Le fait de garder 100 % c'est juste incroyable comme modèle.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️</span><span class="fm2-post-stat">💬 19</span><span class="fm2-post-stat">👁 210</span><span class="fm2-post-time">Il y a 12h</span></div>
                    </div>
                  </div>
                </div>
                <!-- Channel: annonces — 4 posts -->
                <div class="fm2-post-group" data-chan="annonces">
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#ef4444">A</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">admin</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">🚨 Annonces</span></div>
                      <div class="fm2-post-title">Mise à jour VIZION IA v3.0 disponible</div>
                      <div class="fm2-post-desc">Nouvelle fonctionnalité : génération de hooks automatiques.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️ 😂</span><span class="fm2-post-stat">💬 45</span><span class="fm2-post-stat">👁 320</span><span class="fm2-post-time">Il y a 1j</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#ef4444">A</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">admin</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">🚨 Annonces</span></div>
                      <div class="fm2-post-title">Nouveau module Academy : Tunnel avancé</div>
                      <div class="fm2-post-desc">15 leçons pour maîtriser les tunnels de vente.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️</span><span class="fm2-post-stat">💬 22</span><span class="fm2-post-stat">👁 198</span><span class="fm2-post-time">Il y a 3j</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#ef4444">A</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">admin</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">🚨 Annonces</span></div>
                      <div class="fm2-post-title">VIZION Trend est maintenant disponible</div>
                      <div class="fm2-post-desc">Analysez les tendances TikTok en temps réel.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️</span><span class="fm2-post-stat">💬 38</span><span class="fm2-post-stat">👁 275</span><span class="fm2-post-time">Il y a 5j</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#ef4444">A</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">admin</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">🚨 Annonces</span></div>
                      <div class="fm2-post-title">Commissions Pro passent à 50 %</div>
                      <div class="fm2-post-desc">Encore plus de revenus pour les membres Pro.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️ 🔥 😂</span><span class="fm2-post-stat">💬 61</span><span class="fm2-post-stat">👁 410</span><span class="fm2-post-time">Il y a 1 sem</span></div>
                    </div>
                  </div>
                </div>
                <!-- Channel: generale — 4 posts -->
                <div class="fm2-post-group" data-chan="generale">
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#06b6d4">T</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">theo_d</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">💬 Générale</span></div>
                      <div class="fm2-post-title">Qui est passé au Pack Pro ce mois-ci ?</div>
                      <div class="fm2-post-desc">Upgrade faite hier, les outils Flow et Planner sont incroyables.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️</span><span class="fm2-post-stat">💬 14</span><span class="fm2-post-stat">👁 89</span><span class="fm2-post-time">Il y a 3h</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#ec4899">K</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">kenza_l</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">💬 Générale</span></div>
                      <div class="fm2-post-title">Astuce : automatiser ses DM avec le Kit</div>
                      <div class="fm2-post-desc">Je vous montre ma méthode pour gagner 2h par jour.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️ 🔥</span><span class="fm2-post-stat">💬 7</span><span class="fm2-post-stat">👁 54</span><span class="fm2-post-time">Il y a 6h</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#10b981">S</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">sarah_m</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">💬 Générale</span></div>
                      <div class="fm2-post-title">Meilleure niche pour débuter en 2026 ?</div>
                      <div class="fm2-post-desc">Vous recommandez quoi pour quelqu'un qui part de zéro ?</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️</span><span class="fm2-post-stat">💬 21</span><span class="fm2-post-stat">👁 130</span><span class="fm2-post-time">Il y a 10h</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#8b5cf6">D</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">dylan_t</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">💬 Générale</span></div>
                      <div class="fm2-post-title">Le leaderboard me motive à fond</div>
                      <div class="fm2-post-desc">Top 5 cette semaine, la gamification ça pousse à l'action.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️</span><span class="fm2-post-stat">💬 11</span><span class="fm2-post-stat">👁 78</span><span class="fm2-post-time">Il y a 14h</span></div>
                    </div>
                  </div>
                </div>
                <!-- Channel: temoignages — 4 posts -->
                <div class="fm2-post-group" data-chan="temoignages">
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#f59e0b">N</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">nolan_r</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">Témoignages</span></div>
                      <div class="fm2-post-title">2 200 € le premier mois complet</div>
                      <div class="fm2-post-desc">Honnêtement j'y croyais pas. Juste en suivant les modules dans l'ordre.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️ 😂</span><span class="fm2-post-stat">💬 33</span><span class="fm2-post-stat">👁 201</span><span class="fm2-post-time">Il y a 1j</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#10b981">M</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">marilena_p</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">Témoignages</span></div>
                      <div class="fm2-post-title">20 600 $ en 3 semaines en octobre</div>
                      <div class="fm2-post-desc">Le mois d'octobre c'est une dinguerie !</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️</span><span class="fm2-post-stat">💬 51</span><span class="fm2-post-stat">👁 380</span><span class="fm2-post-time">Il y a 2j</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#ec4899">I</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">ines_b</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">Témoignages</span></div>
                      <div class="fm2-post-title">5 400 € récurrents grâce au MRR</div>
                      <div class="fm2-post-desc">Le fait de garder 100 % c'est juste incroyable.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️ 🔥</span><span class="fm2-post-stat">💬 27</span><span class="fm2-post-stat">👁 165</span><span class="fm2-post-time">Il y a 3j</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#8b5cf6">Y</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">yanis_f</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">Témoignages</span></div>
                      <div class="fm2-post-title">Lancé en 48h, premiers résultats en 1 semaine</div>
                      <div class="fm2-post-desc">Page VIZION Web + modules terminés + lien d'affiliation prêt.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">🔥 ❤️</span><span class="fm2-post-stat">💬 16</span><span class="fm2-post-stat">👁 95</span><span class="fm2-post-time">Il y a 4j</span></div>
                    </div>
                  </div>
                </div>
                <!-- Channel: aide — 4 posts -->
                <div class="fm2-post-group" data-chan="aide">
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#6366f1">J</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">julie_m</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">❓ Aide</span></div>
                      <div class="fm2-post-title">Problème pour connecter mon domaine</div>
                      <div class="fm2-post-desc">J'ai suivi le tuto mais ça ne fonctionne pas encore.</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️</span><span class="fm2-post-stat">💬 3</span><span class="fm2-post-stat">👁 18</span><span class="fm2-post-time">Il y a 4h</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#06b6d4">R</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">ryan_b</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">❓ Aide</span></div>
                      <div class="fm2-post-title">Comment utiliser le Script Viral ?</div>
                      <div class="fm2-post-desc">C'est dans quel menu exactement ?</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️</span><span class="fm2-post-stat">💬 6</span><span class="fm2-post-stat">👁 42</span><span class="fm2-post-time">Il y a 9h</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#f59e0b">A</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">alice_r</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">❓ Aide</span></div>
                      <div class="fm2-post-title">Ma landing page ne s'affiche pas correctement</div>
                      <div class="fm2-post-desc">Sur mobile le CTA est coupé, comment régler ça ?</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️</span><span class="fm2-post-stat">💬 8</span><span class="fm2-post-stat">👁 35</span><span class="fm2-post-time">Il y a 1j</span></div>
                    </div>
                  </div>
                  <div class="fm2-post">
                    <div class="fm2-post-avatar" style="background:#10b981">E</div>
                    <div class="fm2-post-body">
                      <div class="fm2-post-meta"><span class="fm2-post-user">emma_c</span><span class="fm2-post-dot">•</span><span class="fm2-post-cat">❓ Aide</span></div>
                      <div class="fm2-post-title">Différence entre Pack Pro et Premium ?</div>
                      <div class="fm2-post-desc">J'hésite à upgrade, quelqu'un peut m'éclairer ?</div>
                      <div class="fm2-post-footer"><span class="fm2-reactions">❤️</span><span class="fm2-post-stat">💬 12</span><span class="fm2-post-stat">👁 68</span><span class="fm2-post-time">Il y a 2j</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 3: Academy -->
        <div class="stacked-card">
          <div class="stacked-card-content">
            <div class="card-icon-wrapper">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <path d="M22 10v6M2 10l10-5 10 5-10 5z"></path>
                <path d="M6 12v5c3 3 9 3 12 0v-5"></path>
              </svg>
            </div>
            <h3 class="card-title">L'Academy — 3 niveaux, +250 leçons</h3>
            <p class="card-description">
              Starter, Pro ou Premium : avance à ton rythme, débloque plus de contenu et monte en compétences à chaque niveau.
              <br><br>Plus tu évolues, plus tu gagnes 💰
            </p>
          </div>
          <div class="stacked-card-visual">
            <div class="visual-mockup-container ac2-mockup">
              <!-- Category bar (full width like the real platform) -->
              <div class="ac2-catbar">
                <div class="ac2-catbar-left">
                  <div class="ac2-cat-header">
                    <div class="ac2-cat-dot"></div>
                    <div class="ac2-cat-label">Phase 1 : Introduction</div>
                  </div>
                  <div class="ac2-cat-title">Comprendre où tu mets les pieds</div>
                </div>
                <div class="ac2-catbar-right">
                  <div class="ac2-cat-stat">5 modules</div>
                  <div class="ac2-cat-stat">16 chapitres</div>
                  <div class="ac2-cat-stat">58 leçons</div>
                  <div class="ac2-cat-stat ac2-cat-stat-accent">⏱ 4h 4m</div>
                </div>
              </div>
              <!-- Module list (vertical, 4 modules) -->
              <div class="ac2-modules">
                <!-- Module 01 -->
                <div class="ac2-module">
                  <div class="ac2-module-thumb">
                    <div class="ac2-thumb-glow"></div>
                    <div class="ac2-module-num">01</div>
                    <div class="ac2-module-thumb-title">Introduction</div>
                    <div class="ac2-module-thumb-sub">Made by VIZION</div>
                  </div>
                  <div class="ac2-module-body">
                    <div class="ac2-module-meta">1 chapitre, 1 leçon</div>
                    <div class="ac2-module-name">01 — Introduction & fonctionnement MRR</div>
                    <div class="ac2-module-bottom"><div class="ac2-module-progress"><div class="ac2-progress-bar"><div class="ac2-progress-fill" style="width:100%"></div></div><span class="ac2-progress-text">100%</span></div><div class="ac2-module-arrow">→</div></div>
                  </div>
                </div>
                <!-- Module 02 -->
                <div class="ac2-module">
                  <div class="ac2-module-thumb">
                    <div class="ac2-thumb-glow"></div>
                    <div class="ac2-module-num">02</div>
                    <div class="ac2-module-thumb-title">Mindset</div>
                    <div class="ac2-module-thumb-sub">Made by VIZION</div>
                  </div>
                  <div class="ac2-module-body">
                    <div class="ac2-module-meta">6 chapitres, 18 leçons</div>
                    <div class="ac2-module-name">02 — Mindset & État d'Esprit</div>
                    <div class="ac2-module-bottom"><div class="ac2-module-progress"><div class="ac2-progress-bar"><div class="ac2-progress-fill" style="width:65%"></div></div><span class="ac2-progress-text">65%</span></div><div class="ac2-module-arrow">→</div></div>
                  </div>
                </div>
                <!-- Module 03 -->
                <div class="ac2-module">
                  <div class="ac2-module-thumb">
                    <div class="ac2-thumb-glow"></div>
                    <div class="ac2-module-num">03</div>
                    <div class="ac2-module-thumb-title">Fiscalité</div>
                    <div class="ac2-module-thumb-sub">Made by VIZION</div>
                  </div>
                  <div class="ac2-module-body">
                    <div class="ac2-module-meta">4 chapitres, 20 leçons</div>
                    <div class="ac2-module-name">03 — Fiscalité et déclaration d'activité</div>
                    <div class="ac2-module-bottom"><div class="ac2-module-progress"><div class="ac2-progress-bar"><div class="ac2-progress-fill" style="width:30%"></div></div><span class="ac2-progress-text">30%</span></div><div class="ac2-module-arrow">→</div></div>
                  </div>
                </div>
                <!-- Module 04 -->
                <div class="ac2-module">
                  <div class="ac2-module-thumb">
                    <div class="ac2-thumb-glow"></div>
                    <div class="ac2-module-num">04</div>
                    <div class="ac2-module-thumb-title">Marketing</div>
                    <div class="ac2-module-thumb-sub">Made by VIZION</div>
                  </div>
                  <div class="ac2-module-body">
                    <div class="ac2-module-meta">3 chapitres, 9 leçons</div>
                    <div class="ac2-module-name">04 — L'opportunité du Marketing digital</div>
                    <div class="ac2-module-bottom"><div class="ac2-module-progress"><div class="ac2-progress-bar"><div class="ac2-progress-fill" style="width:10%"></div></div><span class="ac2-progress-text">10%</span></div><div class="ac2-module-arrow">→</div></div>
                  </div>
                </div>
                <!-- Module 05 -->
                <div class="ac2-module">
                  <div class="ac2-module-thumb">
                    <div class="ac2-thumb-glow"></div>
                    <div class="ac2-module-num">05</div>
                    <div class="ac2-module-thumb-title">Réseaux</div>
                    <div class="ac2-module-thumb-sub">Made by VIZION</div>
                  </div>
                  <div class="ac2-module-body">
                    <div class="ac2-module-meta">5 chapitres, 14 leçons</div>
                    <div class="ac2-module-name">05 — Création & Optimisation des Réseaux Sociaux</div>
                    <div class="ac2-module-bottom"><div class="ac2-module-progress"><div class="ac2-progress-bar"><div class="ac2-progress-fill" style="width:0%"></div></div><span class="ac2-progress-text">0%</span></div><div class="ac2-module-arrow">→</div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 4: Espace Vendeur -->
        <div class="stacked-card">
          <div class="stacked-card-content">
            <div class="card-icon-wrapper">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                <polyline points="17 6 23 6 23 12"></polyline>
              </svg>
            </div>
            <h3 class="card-title">Évolution &amp; Revendeur — grandis et génère des revenus</h3>
            <p class="card-description">
              Progresse à travers les niveaux et augmente tes commissions. Partage ton lien et génère des revenus à chaque vente référée.
              <br><br>Le business qui grandit avec toi 💸
            </p>
          </div>
          <div class="stacked-card-visual">
            <div class="visual-mockup-container ev2-mockup">
              <!-- Tab bar -->
              <div class="ev2-tabs">
                <div class="ev2-tab ev2-tab-active">
                  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                  Vue d'Ensemble
                </div>
                <div class="ev2-tab">
                  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/></svg>
                  Ventes MRR (100%)
                </div>
                <div class="ev2-tab">
                  <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M23 6l-9.5 9.5-5-5L1 18"/></svg>
                  Évolution
                </div>
              </div>
              <!-- 4 stat cards -->
              <div class="ev2-stats">
                <div class="ev2-stat">
                  <div class="ev2-stat-icon">C</div>
                  <div class="ev2-stat-label">C.A Global All-Time</div>
                  <div class="ev2-stat-value">87 340,00 €</div>
                  <div class="ev2-stat-sub">Cumul historique global</div>
                </div>
                <div class="ev2-stat">
                  <div class="ev2-stat-icon">V</div>
                  <div class="ev2-stat-label">Volume de Ventes</div>
                  <div class="ev2-stat-value">156</div>
                  <div class="ev2-stat-sub">Ventes MRR + évolutions</div>
                </div>
                <div class="ev2-stat">
                  <div class="ev2-stat-icon" style="color:#34d399">R</div>
                  <div class="ev2-stat-label">Revenu du mois</div>
                  <div class="ev2-stat-value" style="color:#34d399">9 870,00 €</div>
                  <div class="ev2-stat-sub">Performance du mois</div>
                </div>
                <div class="ev2-stat">
                  <div class="ev2-stat-icon" style="color:#34d399">C</div>
                  <div class="ev2-stat-label">Croissance Mensuelle</div>
                  <div class="ev2-stat-value" style="color:#34d399">+38.2%</div>
                  <div class="ev2-stat-sub">vs mois précédent</div>
                </div>
              </div>
              <!-- Chart -->
              <div class="ev2-chart">
                <div class="ev2-chart-header">
                  <div class="ev2-chart-left">
                    <div class="ev2-chart-icon">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2"><path d="M23 6l-9.5 9.5-5-5L1 18"/></svg>
                    </div>
                    <div>
                      <div class="ev2-chart-eyebrow">Revenus Confirmés</div>
                      <div class="ev2-chart-title">Cette semaine</div>
                    </div>
                  </div>
                  <div class="ev2-chart-right">
                    <div class="ev2-chart-amount">2 695 <span class="ev2-chart-currency">€</span></div>
                    <div class="ev2-chart-trend">↗ +38.2%</div>
                  </div>
                </div>
                <div class="ev2-chart-periods">
                  <div class="ev2-period">Jour</div>
                  <div class="ev2-period ev2-period-active">Semaine</div>
                  <div class="ev2-period">Année</div>
                </div>
                <div class="ev2-chart-area">
                  <svg viewBox="0 0 200 50" preserveAspectRatio="none" width="100%" height="100%">
                    <defs>
                      <linearGradient id="ev2Grad" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stop-color="#10b981" stop-opacity="0.25"/>
                        <stop offset="100%" stop-color="#10b981" stop-opacity="0"/>
                      </linearGradient>
                    </defs>
                    <path d="M0,42 C15,40 25,38 35,35 C50,30 60,28 75,22 C90,16 100,18 115,14 C130,10 145,8 155,12 C170,16 180,10 190,6 L200,4" stroke="#34d399" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M0,42 C15,40 25,38 35,35 C50,30 60,28 75,22 C90,16 100,18 115,14 C130,10 145,8 155,12 C170,16 180,10 190,6 L200,4 L200,50 L0,50 Z" fill="url(#ev2Grad)"/>
                  </svg>
                </div>
              </div>
              <!-- Sales history table -->
              <div class="ev2-table">
                <div class="ev2-table-header">
                  <div class="ev2-table-title">Dernières ventes</div>
                </div>
                <div class="ev2-table-head">
                  <div class="ev2-th ev2-th-name">Affilié</div>
                  <div class="ev2-th ev2-th-pack">Pack</div>
                  <div class="ev2-th ev2-th-amount">Bénéfice</div>
                  <div class="ev2-th ev2-th-date">Date</div>
                </div>
                <div class="ev2-table-row">
                  <div class="ev2-td ev2-td-name"><div class="ev2-td-avatar" style="background:#10b981">S</div><div><div class="ev2-td-user">Sarah Martin</div><div class="ev2-td-handle">@sarah_m</div></div></div>
                  <div class="ev2-td ev2-td-pack"><span class="ev2-pack-badge ev2-pack-premium">Premium</span></div>
                  <div class="ev2-td ev2-td-amount">+899,00 €</div>
                  <div class="ev2-td ev2-td-date">22/03/2026</div>
                </div>
                <div class="ev2-table-row">
                  <div class="ev2-td ev2-td-name"><div class="ev2-td-avatar" style="background:#8b5cf6">L</div><div><div class="ev2-td-user">Lucas Dupont</div><div class="ev2-td-handle">@lucas_d</div></div></div>
                  <div class="ev2-td ev2-td-pack"><span class="ev2-pack-badge ev2-pack-pro">Pro</span></div>
                  <div class="ev2-td ev2-td-amount">+499,00 €</div>
                  <div class="ev2-td ev2-td-date">21/03/2026</div>
                </div>
                <div class="ev2-table-row">
                  <div class="ev2-td ev2-td-name"><div class="ev2-td-avatar" style="background:#f59e0b">A</div><div><div class="ev2-td-user">Alice Roux</div><div class="ev2-td-handle">@alice_r</div></div></div>
                  <div class="ev2-td ev2-td-pack"><span class="ev2-pack-badge ev2-pack-starter">Starter</span></div>
                  <div class="ev2-td ev2-td-amount">+199,00 €</div>
                  <div class="ev2-td ev2-td-date">20/03/2026</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Card 5: Autres outils -->
        <div class="stacked-card">
          <div class="stacked-card-content">
            <div class="card-icon-wrapper">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
              </svg>
            </div>
            <h3 class="card-title">Autres outils — tout ce qu'il te faut pour scaler</h3>
            <p class="card-description">
              Vizion Trend pour les tendances virales, IA pour tes scripts, Flow pour le focus...
              <br><br>Un arsenal complet intégré à la plateforme ⚡
            </p>
          </div>
          <div class="stacked-card-visual">
            <div class="visual-mockup-container tools2-mockup" id="tools2-mockup">
              <!-- Navigation dots -->
              <div class="tools2-nav">
                <div class="tools2-dot tools2-dot-active" onclick="toolsGoTo(0)"></div>
                <div class="tools2-dot" onclick="toolsGoTo(1)"></div>
                <div class="tools2-dot" onclick="toolsGoTo(2)"></div>
                <div class="tools2-dot" onclick="toolsGoTo(3)"></div>
                <div class="tools2-dot" onclick="toolsGoTo(4)"></div>
                <div class="tools2-dot" onclick="toolsGoTo(5)"></div>
              </div>
              <!-- Slides container -->
              <div class="tools2-slides" id="tools2-slides">

                <!-- SLIDE 0: VIZION Kit -->
                <div class="tools2-slide tools2-slide-active" data-tool="0">
                  <div class="tools2-header"><div class="tools2-eyebrow">Bibliothèque de ressources</div><div class="tools2-title">VIZION Kit.</div></div>
                  <div class="tools2-tabs">
                    <div class="tools2-tab tools2-tab-active">Tout</div>
                    <div class="tools2-tab">Hooks</div>
                    <div class="tools2-tab">Scripts</div>
                    <div class="tools2-tab">Partenariats</div>
                  </div>
                  <div class="tools2-kit-list">
                    <div class="tools2-kit-item">
                      <div class="tools2-kit-thumb"><span class="tools2-kit-thumb-text">Hooks</span></div>
                      <div class="tools2-kit-body">
                        <div class="tools2-kit-tags"><span class="tools2-kit-tag">Hooks</span><span class="tools2-kit-type">📄 Texte</span></div>
                        <div class="tools2-kit-name">50 hooks viraux pour TikTok</div>
                        <div class="tools2-kit-cta">Accéder →</div>
                      </div>
                    </div>
                    <div class="tools2-kit-item">
                      <div class="tools2-kit-thumb"><span class="tools2-kit-thumb-text">Scripts</span></div>
                      <div class="tools2-kit-body">
                        <div class="tools2-kit-tags"><span class="tools2-kit-tag">Scripts</span><span class="tools2-kit-type">📄 PDF</span></div>
                        <div class="tools2-kit-name">Scripts de vente haute conversion</div>
                        <div class="tools2-kit-cta">Accéder →</div>
                      </div>
                    </div>
                    <div class="tools2-kit-item">
                      <div class="tools2-kit-thumb"><span class="tools2-kit-thumb-text">Partenariat</span></div>
                      <div class="tools2-kit-body">
                        <div class="tools2-kit-tags"><span class="tools2-kit-tag">Partenariats</span><span class="tools2-kit-type">🔗 Lien</span></div>
                        <div class="tools2-kit-name">Accès partenaire exclusif</div>
                        <div class="tools2-kit-cta">Accéder →</div>
                      </div>
                    </div>
                    <div class="tools2-kit-item">
                      <div class="tools2-kit-thumb"><span class="tools2-kit-thumb-text">Emails</span></div>
                      <div class="tools2-kit-body">
                        <div class="tools2-kit-tags"><span class="tools2-kit-tag">Scripts</span><span class="tools2-kit-type">📄 Texte</span></div>
                        <div class="tools2-kit-name">Séquences email automatisées</div>
                        <div class="tools2-kit-cta">Accéder →</div>
                      </div>
                    </div>
                    <div class="tools2-kit-item">
                      <div class="tools2-kit-thumb"><span class="tools2-kit-thumb-text">CTA</span></div>
                      <div class="tools2-kit-body">
                        <div class="tools2-kit-tags"><span class="tools2-kit-tag">Hooks</span><span class="tools2-kit-type">📄 Texte</span></div>
                        <div class="tools2-kit-name">30 CTA qui convertissent</div>
                        <div class="tools2-kit-cta">Accéder →</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- SLIDE 1: VIZION Flow -->
                <div class="tools2-slide" data-tool="1">
                  <div class="tools2-flow-all">
                    <div class="tools2-tabs" style="justify-content:center">
                      <div class="tools2-tab tools2-tab-active">Dashboard</div>
                      <div class="tools2-tab">Objectif</div>
                      <div class="tools2-tab">Musique</div>
                    </div>
                    <div class="tools2-flow-ring">
                      <svg viewBox="0 0 140 140" width="140" height="140">
                        <circle cx="70" cy="70" r="62" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="4"/>
                        <circle cx="70" cy="70" r="62" fill="none" stroke="#34d399" stroke-width="4" stroke-dasharray="389.56" stroke-dashoffset="0" stroke-linecap="round" transform="rotate(-90 70 70)"/>
                      </svg>
                      <div class="tools2-flow-inner">
                        <div class="tools2-flow-session">S1 / 5</div>
                        <div class="tools2-flow-time">25:00</div>
                        <div class="tools2-flow-label">⚡ Focus</div>
                      </div>
                    </div>
                    <div class="tools2-flow-btn">Lancer le flow</div>
                    <div class="tools2-flow-modes">
                      <div class="tools2-fmode tools2-fmode-active">Focus</div>
                      <div class="tools2-fmode">Pause</div>
                      <div class="tools2-fmode">Repos</div>
                    </div>
                  </div>
                </div>

                <!-- SLIDE 2: VIZION Planner -->
                <div class="tools2-slide" data-tool="2">
                  <div class="tools2-header"><div class="tools2-eyebrow">VIZION Lab</div><div class="tools2-title">Vizion Planner.</div></div>
                  <div class="tools2-planner-week">
                    <div class="tools2-planner-nav">← 23 - 29 mars →</div>
                    <div class="tools2-planner-stats"><span>● 5/7</span><span>⚡ 12h</span><span>🔥 4</span></div>
                  </div>
                  <!-- Calendar grid: hours left, days columns -->
                  <div class="tools2-cal">
                    <div class="tools2-cal-hours">
                      <div class="tools2-cal-h">8:00</div>
                      <div class="tools2-cal-h">9:00</div>
                      <div class="tools2-cal-h">10:00</div>
                      <div class="tools2-cal-h">11:00</div>
                      <div class="tools2-cal-h">12:00</div>
                      <div class="tools2-cal-h">13:00</div>
                      <div class="tools2-cal-h">14:00</div>
                    </div>
                    <div class="tools2-cal-days">
                      <!-- Day headers -->
                      <div class="tools2-cal-day-head tools2-cal-today"><div class="tools2-cal-dlabel">lun.</div><div class="tools2-cal-dnum">23</div></div>
                      <div class="tools2-cal-day-head"><div class="tools2-cal-dlabel">mar.</div><div class="tools2-cal-dnum">24</div></div>
                      <div class="tools2-cal-day-head"><div class="tools2-cal-dlabel">mer.</div><div class="tools2-cal-dnum">25</div></div>
                      <div class="tools2-cal-day-head"><div class="tools2-cal-dlabel">jeu.</div><div class="tools2-cal-dnum">26</div></div>
                      <div class="tools2-cal-day-head"><div class="tools2-cal-dlabel">ven.</div><div class="tools2-cal-dnum">27</div></div>
                      <div class="tools2-cal-day-head"><div class="tools2-cal-dlabel">sam.</div><div class="tools2-cal-dnum">28</div></div>
                      <div class="tools2-cal-day-head"><div class="tools2-cal-dlabel">dim.</div><div class="tools2-cal-dnum">29</div></div>
                    </div>
                    <!-- Grid body with events -->
                    <div class="tools2-cal-body">
                      <div class="tools2-cal-grid">
                        <!-- 7 rows (hours) x 7 cols (days) = grid cells -->
                        <div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div>
                        <div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div>
                        <div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div>
                        <div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div>
                        <div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div>
                        <div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div>
                        <div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div><div class="tools2-cal-cell"></div>
                      </div>
                      <!-- Events positioned on the grid -->
                      <div class="tools2-cal-event" style="grid-column:1;grid-row:2/4;background:rgba(16,185,129,0.15);border-left:2px solid #34d399">📞 Prospect<br><span style="font-size:4px;opacity:0.5">9h - 10h30</span></div>
                      <div class="tools2-cal-event" style="grid-column:1;grid-row:6/8;background:rgba(139,92,246,0.15);border-left:2px solid #8b5cf6">🎬 Vidéo TikTok<br><span style="font-size:4px;opacity:0.5">13h - 14h30</span></div>
                      <div class="tools2-cal-event" style="grid-column:2;grid-row:2/4;background:rgba(16,185,129,0.15);border-left:2px solid #34d399">📞 Prospect<br><span style="font-size:4px;opacity:0.5">9h - 10h30</span></div>
                      <div class="tools2-cal-event" style="grid-column:3;grid-row:4/6;background:rgba(245,158,11,0.15);border-left:2px solid #f59e0b">📧 Emails<br><span style="font-size:4px;opacity:0.5">11h - 12h30</span></div>
                      <div class="tools2-cal-event" style="grid-column:4;grid-row:2/3;background:rgba(59,130,246,0.15);border-left:2px solid #3b82f6">📊 Stats<br><span style="font-size:4px;opacity:0.5">9h - 9h45</span></div>
                      <div class="tools2-cal-event" style="grid-column:5;grid-row:3/5;background:rgba(236,72,153,0.15);border-left:2px solid #ec4899">📝 Contenu<br><span style="font-size:4px;opacity:0.5">10h - 11h30</span></div>
                      <div class="tools2-cal-event" style="grid-column:5;grid-row:6/8;background:rgba(16,185,129,0.15);border-left:2px solid #34d399">🎬 Vidéo<br><span style="font-size:4px;opacity:0.5">13h - 14h30</span></div>
                    </div>
                  </div>
                </div>

                <!-- SLIDE 3: VIZION Tracker -->
                <div class="tools2-slide" data-tool="3">
                  <div class="tools2-header"><div class="tools2-eyebrow">VIZION Lab</div><div class="tools2-title">Vizion Tracker.</div></div>
                  <div class="tools2-tracker-stats-row">
                    <div class="tools2-tracker-perf">
                      <div class="tools2-tracker-emoji">💪</div>
                      <div><div class="tools2-tracker-pct">78%</div><div class="tools2-tracker-msg">Bonne semaine !</div></div>
                    </div>
                    <div class="tools2-tracker-stat-card">
                      <div style="font-size:5px;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.06em">Coches semaine</div>
                      <div style="font-size:10px;font-weight:800;color:#fff">38/49</div>
                    </div>
                    <div class="tools2-tracker-stat-card">
                      <div style="font-size:5px;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.06em">Jour top</div>
                      <div style="font-size:10px;font-weight:800;color:#fff">Lundi</div>
                    </div>
                  </div>
                  <div class="tools2-tracker-table">
                    <div class="tools2-trow tools2-trow-head"><div class="tools2-tcell-habit">Habitude</div><div class="tools2-tcell">L</div><div class="tools2-tcell">M</div><div class="tools2-tcell">M</div><div class="tools2-tcell">J</div><div class="tools2-tcell">V</div><div class="tools2-tcell">S</div><div class="tools2-tcell">D</div></div>
                    <div class="tools2-trow"><div class="tools2-tcell-habit">😴 8h de sommeil</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">❌</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div></div>
                    <div class="tools2-trow"><div class="tools2-tcell-habit">💧 Boire 2L d'eau</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">❌</div><div class="tools2-tcell">✅</div></div>
                    <div class="tools2-trow"><div class="tools2-tcell-habit">📚 1h de lecture</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">❌</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">❌</div></div>
                    <div class="tools2-trow"><div class="tools2-tcell-habit">🚀 Avancer projet</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">❌</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div></div>
                    <div class="tools2-trow"><div class="tools2-tcell-habit">🎧 Podcast</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">❌</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div></div>
                    <div class="tools2-trow"><div class="tools2-tcell-habit">👟 10K steps</div><div class="tools2-tcell">❌</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">✅</div><div class="tools2-tcell">❌</div></div>
                  </div>
                  <!-- Progression par habitude -->
                  <div class="tools2-tracker-bottom">
                    <div class="tools2-tracker-bottom-title">Progression par habitude</div>
                    <div class="tools2-tracker-prog-list">
                      <div class="tools2-prog-item"><div class="tools2-prog-left"><span>😴</span><span class="tools2-prog-name">8h de sommeil</span><span class="tools2-prog-niv">Niv. 2</span></div><div class="tools2-prog-right"><span class="tools2-prog-streak">12j</span><span class="tools2-prog-taux">86%</span></div><div class="tools2-prog-bar-wrap"><div class="tools2-prog-bar-bg"><div class="tools2-prog-bar-fill" style="width:86%"></div></div><span class="tools2-prog-sub">6 / 7 jours pour le niveau 3</span></div></div>
                      <div class="tools2-prog-item"><div class="tools2-prog-left"><span>💧</span><span class="tools2-prog-name">Boire 2L d'eau</span><span class="tools2-prog-niv">Niv. 2</span></div><div class="tools2-prog-right"><span class="tools2-prog-streak">8j</span><span class="tools2-prog-taux">71%</span></div><div class="tools2-prog-bar-wrap"><div class="tools2-prog-bar-bg"><div class="tools2-prog-bar-fill" style="width:71%"></div></div><span class="tools2-prog-sub">5 / 7 jours pour le niveau 3</span></div></div>
                      <div class="tools2-prog-item"><div class="tools2-prog-left"><span>📚</span><span class="tools2-prog-name">1h de lecture</span><span class="tools2-prog-niv">Niv. 1</span></div><div class="tools2-prog-right"><span class="tools2-prog-streak">3j</span><span class="tools2-prog-taux">57%</span></div><div class="tools2-prog-bar-wrap"><div class="tools2-prog-bar-bg"><div class="tools2-prog-bar-fill" style="width:57%"></div></div><span class="tools2-prog-sub">4 / 7 jours pour le niveau 2</span></div></div>
                      <div class="tools2-prog-item"><div class="tools2-prog-left"><span>🚀</span><span class="tools2-prog-name">Avancer projet</span><span class="tools2-prog-niv">Niv. 1</span></div><div class="tools2-prog-right"><span class="tools2-prog-streak">5j</span><span class="tools2-prog-taux">71%</span></div><div class="tools2-prog-bar-wrap"><div class="tools2-prog-bar-bg"><div class="tools2-prog-bar-fill" style="width:71%"></div></div><span class="tools2-prog-sub">5 / 7 jours pour le niveau 2</span></div></div>
                    </div>
                  </div>
                </div>

                <!-- SLIDE 4: VIZION IA -->
                <div class="tools2-slide" data-tool="4">
                  <div class="tools2-header"><div class="tools2-eyebrow">Intelligence Artificielle</div><div class="tools2-title">VIZION IA</div></div>
                  <div class="tools2-ia-bar">
                    <div class="tools2-ia-tool tools2-ia-tool-active">✍️ Script Viral</div>
                    <div class="tools2-ia-tool tools2-ia-tool-soon">🎣 Bientôt</div>
                    <div class="tools2-ia-tool tools2-ia-tool-soon">🎨 Bientôt</div>
                  </div>
                  <div class="tools2-ia-step">Script Viral — Étape 1 sur 7</div>
                  <div class="tools2-ia-question">Quel type de script veux-tu créer ?</div>
                  <div class="tools2-ia-options">
                    <div class="tools2-ia-opt"><span>🔥</span><div><div class="tools2-ia-opt-title">Script de vente</div><div class="tools2-ia-opt-desc">Pour passer ton audience à l'action.</div></div></div>
                    <div class="tools2-ia-opt"><span>💸</span><div><div class="tools2-ia-opt-title">Script storytelling</div><div class="tools2-ia-opt-desc">Raconte une histoire vraie et émotionnelle.</div></div></div>
                    <div class="tools2-ia-opt"><span>🎯</span><div><div class="tools2-ia-opt-title">Script Éducatif</div><div class="tools2-ia-opt-desc">Enseigner, clarifier, transmettre de la valeur.</div></div></div>
                  </div>
                  <div class="tools2-ia-history">
                    <div class="tools2-ia-history-title">Historique (3)</div>
                    <div class="tools2-ia-history-item"><div class="tools2-ia-hist-date">22 mars, 14:30</div><div class="tools2-ia-hist-text">Comment j'ai fait 2000€ en 7 jours sans montrer mon visage...</div><div class="tools2-ia-hist-tag">🔥 Script de vente</div></div>
                    <div class="tools2-ia-history-item"><div class="tools2-ia-hist-date">20 mars, 09:15</div><div class="tools2-ia-hist-text">3 erreurs qui te font perdre 90% de tes viewers...</div><div class="tools2-ia-hist-tag">🎯 Éducatif</div></div>
                    <div class="tools2-ia-history-item"><div class="tools2-ia-hist-date">18 mars, 16:45</div><div class="tools2-ia-hist-text">J'ai tout quitté à 22 ans pour lancer mon business...</div><div class="tools2-ia-hist-tag">💸 Storytelling</div></div>
                  </div>
                </div>

                <!-- SLIDE 5: VIZION Trend -->
                <div class="tools2-slide" data-tool="5">
                  <div class="tools2-header"><div class="tools2-eyebrow">TikTok Trends · Base de données</div><div class="tools2-title">VIZION Trend.</div></div>
                  <div class="tools2-trend-cats">
                    <div class="tools2-trend-cat tools2-trend-cat-active">💰 MRR</div>
                    <div class="tools2-trend-cat">📈 Business</div>
                    <div class="tools2-trend-cat">📱 Marketing</div>
                    <div class="tools2-trend-cat">🚀 Entrepreneur</div>
                  </div>
                  <div class="tools2-trend-grid">
                    <div class="tools2-trend-card">
                      <div class="tools2-trend-rank-badge">1</div>
                      <div class="tools2-trend-video" style="background:url('https://images.unsplash.com/photo-1616469829581-73993eb86b02?w=200&h=300&fit=crop&crop=face') center/cover"><div class="tools2-trend-play">▶</div></div>
                      <div class="tools2-trend-card-tags">#capcut #musculation</div>
                      <div class="tools2-trend-card-stats">👁 117.6k · ❤️ 6.9k</div>
                    </div>
                    <div class="tools2-trend-card">
                      <div class="tools2-trend-rank-badge">2</div>
                      <div class="tools2-trend-video" style="background:url('https://images.unsplash.com/photo-1557804506-669a67965ba0?w=200&h=300&fit=crop&crop=face') center/cover"><div class="tools2-trend-play">▶</div></div>
                      <div class="tools2-trend-card-tags">#debutant #conseils</div>
                      <div class="tools2-trend-card-stats">👁 98.8k · ❤️ 4.8k</div>
                    </div>
                    <div class="tools2-trend-card">
                      <div class="tools2-trend-rank-badge">3</div>
                      <div class="tools2-trend-video" style="background:url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=200&h=300&fit=crop&crop=face') center/cover"><div class="tools2-trend-play">▶</div></div>
                      <div class="tools2-trend-card-tags">#business #digital</div>
                      <div class="tools2-trend-card-stats">👁 21.2k · ❤️ 2.1k</div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Arrow buttons -->
              <div class="tools2-arrows">
                <div class="tools2-arrow tools2-arrow-prev" onclick="toolsPrev()">‹</div>
                <div class="tools2-arrow tools2-arrow-next" onclick="toolsNext()">›</div>
              </div>
            </div>
          </div>
        </div>




    </div>
  </section>

  <!-- Section Comparaison Avant vs Après -->
  <section id="comparison" class="section section-dark">
    <div class="container">
      <div class="section-header animate-on-scroll">
        <div class="section-title-icon-wrapper">
          <svg class="section-title-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2">
            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
          </svg>
        </div>
        <div class="section-title">Autres formations MRR vs Vizion MRR</div>
      </div>

      <div class="comparison-container animate-on-scroll animate-delay-2">
        <!-- Colonne "Avant" -->
        <div class="comparison-column comparison-column-before">
          <div class="comparison-header">
            <span class="comparison-emoji">😔</span>
            <h3 class="comparison-title">Autres formations MRR</h3>
          </div>
          <div class="comparison-cards">
            <div class="comparison-card comparison-card-negative">
              <div class="comparison-card-icon comparison-card-icon-negative">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="comparison-card-text">Juste une formation vidéo, sans outils intégrés.</div>
            </div>
            <div class="comparison-card comparison-card-negative">
              <div class="comparison-card-icon comparison-card-icon-negative">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="comparison-card-text">Commissions plafonnées à 40-50%, voire moins.</div>
            </div>
            <div class="comparison-card comparison-card-negative">
              <div class="comparison-card-icon comparison-card-icon-negative">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="comparison-card-text">Tu dois te débrouiller pour créer ta page de vente tout seul.</div>
            </div>
            <div class="comparison-card comparison-card-negative">
              <div class="comparison-card-icon comparison-card-icon-negative">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="comparison-card-text">Pas d'IA, pas de générateur de contenu, tout est manuel.</div>
            </div>
            <div class="comparison-card comparison-card-negative">
              <div class="comparison-card-icon comparison-card-icon-negative">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="comparison-card-text">Groupe Telegram ou Discord basique, sans vraie structure.</div>
            </div>
            <div class="comparison-card comparison-card-negative">
              <div class="comparison-card-icon comparison-card-icon-negative">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="12"></line>
                  <line x1="12" y1="16" x2="12.01" y2="16"></line>
                </svg>
              </div>
              <div class="comparison-card-text">Aucun système d'évolution ni de gamification pour te motiver.</div>
            </div>
          </div>
        </div>

        <!-- Colonne "Après" -->
        <div class="comparison-column comparison-column-after">
          <div class="comparison-header">
            <span class="comparison-emoji">🚀</span>
            <h3 class="comparison-title">Vizion MRR</h3>
          </div>
          <div class="comparison-cards">
            <div class="comparison-card comparison-card-positive">
              <div class="comparison-card-icon comparison-card-icon-positive">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </div>
              <div class="comparison-card-text">Formation + outils IA + landing page + forum, tout dans une seule plateforme.</div>
            </div>
            <div class="comparison-card comparison-card-positive">
              <div class="comparison-card-icon comparison-card-icon-positive">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </div>
              <div class="comparison-card-text">Jusqu'à 75% de commissions et tu gardes 100% de tes gains.</div>
            </div>
            <div class="comparison-card comparison-card-positive">
              <div class="comparison-card-icon comparison-card-icon-positive">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </div>
              <div class="comparison-card-text">VIZION Web génère ta landing page et ton lien en bio en quelques clics.</div>
            </div>
            <div class="comparison-card comparison-card-positive">
              <div class="comparison-card-icon comparison-card-icon-positive">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </div>
              <div class="comparison-card-text">VIZION IA génère tes scripts, contenus et analyses vidéo automatiquement.</div>
            </div>
            <div class="comparison-card comparison-card-positive">
              <div class="comparison-card-icon comparison-card-icon-positive">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </div>
              <div class="comparison-card-text">Forum intégré avec vraie communauté structurée, pas un simple groupe.</div>
            </div>
            <div class="comparison-card comparison-card-positive">
              <div class="comparison-card-icon comparison-card-icon-positive">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
                  <polyline points="20 6 9 17 4 12"></polyline>
                </svg>
              </div>
              <div class="comparison-card-text">Système d'évolution gamifié : badges, niveaux et leaderboard pour te motiver.</div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </section>


  <!-- Pricing Scroll Section -->
  <section id="pricing-scroll" class="pricing-section-new">
    <div class="container">
      <!-- Section Header -->
      <div class="section-header animate-on-scroll">
        <div class="section-title-icon-wrapper">
          <svg class="section-title-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
          </svg>
        </div>
        <div class="section-title">Choisis ton pack — Accès à vie</div>
      </div>

      <!-- Pricing Grid -->
      <div class="pricing-grid" id="pricing-grid">
        <!-- Cards rendered by JS -->
      </div>

      <!-- Divider -->
      <div class="pricing-divider">
        <div class="pricing-divider-line"></div>
        <span class="pricing-divider-label">Nos outils en détail</span>
        <div class="pricing-divider-line"></div>
      </div>

      <!-- Tools Showcase (integrated) -->
      <div class="tools-showcase" id="tools-showcase">
        <div class="tools-showcase-grid" id="tools-showcase-grid">
          <!-- Rendered by JS -->
        </div>
      </div>

      <!-- Trust / micro-copy -->
      <div class="pricing-trust-row">
        <div class="pricing-trust-item">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span>Paiement sécurisé 100%</span>
        </div>
        <div class="pricing-trust-item">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span>Support & communauté inclus</span>
        </div>
        <div class="pricing-trust-item">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
            <polyline points="20 6 9 17 4 12"></polyline>
          </svg>
          <span>Mises à jour incluses à vie</span>
        </div>
      </div>
    </div>

    <script>
    (function() {
      var SUPABASE_URL = 'https://zrwpzetcfdpicjfdvikt.supabase.co';
      var SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inpyd3B6ZXRjZmRwaWNqZmR2aWt0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ5NDAwNTUsImV4cCI6MjA5MDUxNjA1NX0.huMkumw8BbEyxbnYnc9ijuMzRhK9jZ1jYe0bHV_jyWE';

      function apiFetch(path) {
        return fetch(SUPABASE_URL + '/rest/v1/' + path, {
          headers: { 'apikey': SUPABASE_KEY, 'Authorization': 'Bearer ' + SUPABASE_KEY }
        }).then(function(r) { return r.json(); });
      }

      // Tools with min pack level (1=starter, 2=pro, 3=premium)
      var TOOLS = [
        { name: 'VIZION Web', desc: 'Landing page & link in bio par un web designer', minPack: 1, packLabel: 'Starter', icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M2 7h20"/><circle cx="6" cy="5" r="0.5" fill="currentColor"/><circle cx="8.5" cy="5" r="0.5" fill="currentColor"/><circle cx="11" cy="5" r="0.5" fill="currentColor"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>' },
        { name: 'VIZION Flow', desc: 'Technique de deep focus des top entrepreneurs', minPack: 2, packLabel: 'Pro', icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/><path d="M4.9 4.9l1.4 1.4"/><path d="M17.7 4.9l-1.4 1.4"/></svg>' },
        { name: 'VIZION Planner', desc: 'Planifie ta semaine et tes contenus', minPack: 2, packLabel: 'Pro', icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="2" width="6" height="5" rx="1"/><path d="M9 14l2 2 4-4"/></svg>' },
        { name: 'VIZION IA', desc: 'Scripts, hooks, analyse vidéo par IA', minPack: 3, packLabel: 'Premium', icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h-2V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"/><path d="M6 8h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2z"/><circle cx="9" cy="11" r="1" fill="currentColor"/><circle cx="15" cy="11" r="1" fill="currentColor"/><path d="M9 14v3a3 3 0 0 0 6 0v-3"/></svg>' },
        { name: 'VIZION Trend', desc: 'Veille concurrentielle TikTok quotidienne', minPack: 3, packLabel: 'Premium', icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 16l4-6 4 4 5-8"/><path d="M17 6h3v3"/></svg>' }
      ];

      var PACKS = [
        { key: 'starter', id: 1, name: 'Starter', tagline: 'Les Fondations', emoji: '🚀', color: '#a1a1aa', modules: 5, lessons: 48, evoComm: 25 },
        { key: 'pro', id: 2, name: 'Pro', tagline: 'Accélération', emoji: '⚡', color: '#3b82f6', popular: true, modules: 15, lessons: 144, evoComm: 50 },
        { key: 'premium', id: 3, name: 'Premium', tagline: 'Domination Complète', emoji: '👑', color: '#f59e0b', modules: 25, lessons: 250, evoComm: 75 }
      ];

      function checkSvg() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg>'; }
      function lockSvg() { return '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>'; }
      function layersSvg() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>'; }
      function zapSvg() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>'; }
      function globeSvg() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>'; }
      function timerSvg() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>'; }
      function sparklesSvg() { return '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.5 5.5L19 10l-5.5 1.5L12 17l-1.5-5.5L5 10l5.5-1.5L12 3z"/></svg>'; }

      async function loadPricing() {
        try {
          var [settingsRes, promosRes, splitRes, acaChapters, acaLessons] = await Promise.all([
            apiFetch('global_settings?key=eq.evolution_prices&select=value'),
            apiFetch('evolution_promotions?is_active=eq.true&select=*'),
            apiFetch('global_settings?key=eq.evolution_split&select=value'),
            apiFetch('academy_chapters?is_draft=eq.false&select=id,required_pack'),
            apiFetch('academy_lessons?is_draft=eq.false&select=id,duration,chapter_id&limit=1000')
          ]);

          var prices = settingsRes[0] ? settingsRes[0].value : { starter: 199, pro: 499, premium: 899 };
          var splits = splitRes[0] ? splitRes[0].value : { starter: 25, pro: 50, premium: 75 };
          var promos = promosRes || [];

          // Calculate cumulative hours per pack using required_pack on chapters
          function parseDur(d) { if (!d) return 0; var p = d.split(':'); return (parseInt(p[0])||0)*60 + (parseInt(p[1])||0); }
          var chapterPack = {};
          (acaChapters||[]).forEach(function(c) { chapterPack[c.id] = c.required_pack || 1; });
          // Sum seconds per required_pack level
          var secsByPack = { 1: 0, 2: 0, 3: 0 };
          (acaLessons||[]).forEach(function(l) {
            var rp = chapterPack[l.chapter_id];
            if (rp && secsByPack[rp] !== undefined) secsByPack[rp] += parseDur(l.duration);
          });
          // Cumulative: pack 1 = level 1, pack 2 = level 1+2, pack 3 = level 1+2+3
          var packHours = {
            1: Math.round(secsByPack[1] / 3600),
            2: Math.round((secsByPack[1] + secsByPack[2]) / 3600),
            3: Math.round((secsByPack[1] + secsByPack[2] + secsByPack[3]) / 3600)
          };

          var grid = document.getElementById('pricing-grid');
          var html = '';

          PACKS.forEach(function(pack) {
            var basePrice = prices[pack.key] || 0;
            var finalPrice = basePrice;
            var promoLabel = '';
            var discountPercent = 0;
            var commission = splits[pack.key] || pack.evoComm;

            promos.forEach(function(promo) {
              if (!promo.target_packs || promo.target_packs.indexOf(pack.key) === -1) return;
              if (promo.ends_at && new Date(promo.ends_at) < new Date()) return;
              var discounted = basePrice;
              if (promo.type === 'percent') discounted = basePrice * (1 - parseFloat(promo.value) / 100);
              else if (promo.type === 'fixed') discounted = basePrice - parseFloat(promo.value);
              if (discounted < finalPrice) {
                finalPrice = Math.round(discounted);
                promoLabel = promo.label;
                discountPercent = Math.round((1 - finalPrice / basePrice) * 100);
              }
            });

            var hasPromo = finalPrice < basePrice;
            var popularTag = pack.popular ? '<div class="pricing-card-popular">Le plus populaire</div>' : '';

            html += '<div class="pricing-card' + (pack.popular ? ' pricing-card--popular' : '') + '" style="--pack-color: ' + pack.color + ';">';
            html += popularTag;
            html += '<div class="pricing-card-header">';
            html += '<span class="pricing-card-emoji">' + pack.emoji + '</span>';
            html += '<h3 class="pricing-card-name">' + pack.name + '</h3>';
            // tagline removed
            html += '</div>';

            // Price
            html += '<div class="pricing-card-price">';
            if (hasPromo) {
              html += '<div class="pricing-card-promo-row">';
              html += '<span class="pricing-card-old-price">' + basePrice + '€</span>';
              html += '<span class="pricing-card-discount">-' + discountPercent + '%</span>';
              html += '</div>';
              if (promoLabel) html += '<div class="pricing-card-promo-label">' + promoLabel + '</div>';
            }
            html += '<div class="pricing-card-amount">' + finalPrice + '€</div>';
            html += '<div class="pricing-card-period">Accès à vie</div>';
            html += '</div>';

            // Stats row (modules, leçons, commission)
            html += '<div class="pricing-card-stats">';
            html += '<div class="pricing-stat"><span class="pricing-stat-value">' + pack.modules + '</span><span class="pricing-stat-label">modules</span></div>';
            html += '<div class="pricing-stat"><span class="pricing-stat-value">' + pack.lessons + '</span><span class="pricing-stat-label">leçons</span></div>';
            html += '<div class="pricing-stat pricing-stat--green"><span class="pricing-stat-value">' + commission + '%</span><span class="pricing-stat-label">commission</span></div>';
            html += '</div>';

            // Pack includes (mirrors Evolution.tsx)
            var features = [
              { icon: layersSvg(), label: 'Plus de ' + (packHours[pack.id] || 0) + 'h de formation', highlight: true },
              { icon: zapSvg(), label: commission + '% de commission d\'évolution', highlight: true },
              { icon: globeSvg(), label: pack.id >= 1 ? 'VIZION Web inclus' : 'VIZION Web verrouillé', highlight: pack.id >= 1 },
              { icon: timerSvg(), label: pack.id >= 2 ? 'Flow + Planner inclus' : 'Flow + Planner verrouillés', highlight: pack.id >= 2 },
              { icon: sparklesSvg(), label: pack.id >= 3 ? 'IA + Trends + Mastermind' : 'IA + Trends verrouillés', highlight: pack.id >= 3 }
            ];
            html += '<div class="pricing-card-section-label">Ce pack inclut :</div>';
            html += '<ul class="pricing-card-features">';
            features.forEach(function(f) {
              var cls = f.highlight ? 'pricing-feat--on' : 'pricing-feat--off';
              html += '<li class="' + cls + '">' + f.icon + '<span>' + f.label + '</span></li>';
            });
            html += '</ul>';

            // Tools compact icons row
            html += '<div class="pricing-card-section-label">Outils VIZION</div>';
            html += '<div class="pricing-tools-icons">';
            TOOLS.forEach(function(tool) {
              var unlocked = pack.id >= tool.minPack;
              html += '<div class="pricing-tool-icon' + (unlocked ? ' pricing-tool-icon--on' : ' pricing-tool-icon--off') + '">';
              html += tool.icon;
              html += '<div class="pricing-tool-tooltip"><strong>' + tool.name + '</strong><span>' + tool.desc + '</span></div>';
              html += '</div>';
            });
            html += '</div>';

            html += '<button class="pricing-card-cta js-checkout" data-pack="' + pack.key + '">Commencer maintenant</button>';
            html += '</div>';
          });

          grid.innerHTML = html;

          // Render tools showcase below
          var packColors = { 1: '#a1a1aa', 2: '#3b82f6', 3: '#f59e0b' };
          var showcaseGrid = document.getElementById('tools-showcase-grid');
          var toolsHtml = '';
          TOOLS.forEach(function(tool) {
            var c = packColors[tool.minPack];
            toolsHtml += '<div class="tools-showcase-card" style="--tool-color: ' + c + ';">';
            toolsHtml += '<div class="tools-showcase-card-top">';
            toolsHtml += '<div class="tools-showcase-card-icon">' + tool.icon.replace(/width="16"/g, 'width="20"').replace(/height="16"/g, 'height="20"') + '</div>';
            toolsHtml += '<span class="tools-showcase-tag" style="--tag-color: ' + c + ';">' + tool.packLabel + '</span>';
            toolsHtml += '</div>';
            toolsHtml += '<h4 class="tools-showcase-card-name">' + tool.name + '</h4>';
            toolsHtml += '<p class="tools-showcase-card-desc">' + tool.desc + '</p>';
            toolsHtml += '</div>';
          });
          showcaseGrid.innerHTML = toolsHtml;
        } catch (e) {
          console.error('Pricing load error:', e);
        }
      }

      loadPricing();
    })();
    </script>
  </section>

  <!-- Témoignages Screenshots Section -->
  <section id="testimonials-screenshots" class="reviews-section">
    <div class="container">
      <div class="section-header animate-on-scroll">
        <div class="section-title-icon-wrapper">
          <svg class="section-title-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
          </svg>
        </div>
        <div class="section-title">Ce qu'ils en disent</div>
      </div>
    </div>

    <!-- Row 1 — scrolls left -->
    <div class="reviews-marquee">
      <div class="reviews-track" id="reviews-track-1">
      </div>
    </div>

    <!-- Row 3 — scrolls right -->
    <div class="reviews-marquee">
      <div class="reviews-track reviews-track--reverse" id="reviews-track-2">
      </div>
    </div>

    <div class="container">
      <div class="hero-video-disclaimer" style="margin-top:24px;">
        <p class="video-disclaimer-text">
          Les résultats peuvent varier selon les individus et ne sont pas garantis.
        </p>
      </div>
    </div>
  </section>

  <!-- FAQ Section -->
  <section id="faq" class="faq-section">
    <div class="faq-container">
      <div class="faq-header">
        <div class="section-header animate-on-scroll">
          <div class="section-title-icon-wrapper">
            <svg class="section-title-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
              <path d="M13 8H7"></path>
              <path d="M17 12H7"></path>
              <path d="M13 16H7"></path>
            </svg>
          </div>
          <div class="section-title">Des questions ?</div>
        </div>
      </div>

      <div class="faq-list" id="faq-list">
        <!-- FAQ items will be added by JavaScript -->
      </div>

    </div>
  </section>

  <!-- Scripts -->
  <script src="./js/testimonials.js"></script>
  <script>
  (function() {
    var SUPABASE_URL = 'https://zrwpzetcfdpicjfdvikt.supabase.co';
    var SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inpyd3B6ZXRjZmRwaWNqZmR2aWt0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ5NDAwNTUsImV4cCI6MjA5MDUxNjA1NX0.huMkumw8BbEyxbnYnc9ijuMzRhK9jZ1jYe0bHV_jyWE';
    var PER_ROW = 6;

    var GRADE_TO_BADGE = { starter: 'Membre Starter', pro: 'Membre Pro', premium: 'Membre Premium' };
    var BADGE_COLORS = { 'Membre Starter': '#a1a1aa', 'Membre Pro': '#3b82f6', 'Membre Premium': '#f59e0b' };

    function stars(n) {
      var s = '';
      for (var i = 0; i < (n || 5); i++) s += '★';
      return '<span class="review-card-stars">' + s + '</span>';
    }

    function escHtml(str) {
      var d = document.createElement('div');
      d.appendChild(document.createTextNode(str));
      return d.innerHTML;
    }

    function buildCard(r) {
      var bc = BADGE_COLORS[r.badge] || '#34d399';
      return '<div class="review-card">' +
        '<div class="review-card-head">' +
          '<span class="review-card-avatar" style="background:' + bc + '">' + escHtml(r.name.charAt(0)) + '</span>' +
          '<div class="review-card-identity">' +
            '<span class="review-card-name">' + escHtml(r.name) + '</span>' +
            '<span class="review-card-badge" style="color:' + bc + '"><span class="review-badge-check" style="background:' + bc + '15;color:' + bc + '">✓</span>' + escHtml(r.badge) + '</span>' +
          '</div>' +
          stars(r.rating) +
        '</div>' +
        '<div class="review-card-headline">' + escHtml(r.headline) + '</div>' +
        '<p class="review-card-text">' + escHtml(r.text) + '</p>' +
      '</div>';
    }

    function fillTrack(id, data) {
      var track = document.getElementById(id);
      if (!track) return;
      var html = '';
      for (var i = 0; i < 2; i++) { data.forEach(function(r) { html += buildCard(r); }); }
      track.innerHTML = html;
      track.addEventListener('mouseenter', function() { track.style.animationPlayState = 'paused'; });
      track.addEventListener('mouseleave', function() { track.style.animationPlayState = 'running'; });
    }

    // Fisher-Yates shuffle
    function shuffle(arr) {
      var a = arr.slice();
      for (var i = a.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var tmp = a[i]; a[i] = a[j]; a[j] = tmp;
      }
      return a;
    }

    // Pick `count` items from `pool`, filling with duplicates if needed,
    // but never placing the same testimonial adjacent to each other.
    function pickWithoutAdjacentDupes(pool, count) {
      if (pool.length === 0) return [];
      if (pool.length >= count) return shuffle(pool).slice(0, count);

      // Not enough unique items — fill with duplicates smartly
      var result = [];
      var shuffled = shuffle(pool);
      var idx = 0;
      for (var i = 0; i < count; i++) {
        // Try to pick one that isn't the same as the previous
        var attempts = 0;
        var candidate = shuffled[idx % shuffled.length];
        while (result.length > 0 && candidate.id === result[result.length - 1].id && attempts < pool.length) {
          idx++;
          candidate = shuffled[idx % shuffled.length];
          attempts++;
        }
        result.push(candidate);
        idx++;
        // Re-shuffle when we've gone through the full set
        if (idx % shuffled.length === 0) shuffled = shuffle(pool);
      }
      return result;
    }

    // Also ensure no duplicate between last of ROW1 and first of ROW2
    function splitIntoRows(items, perRow) {
      var row1 = items.slice(0, perRow);
      var row2 = items.slice(perRow);
      // If last of row1 === first of row2, swap first of row2 with another in row2
      if (row1.length > 0 && row2.length > 1 && row1[row1.length - 1].id === row2[0].id) {
        for (var i = 1; i < row2.length; i++) {
          if (row2[i].id !== row2[0].id && row2[i].id !== row1[row1.length - 1].id) {
            var tmp = row2[0]; row2[0] = row2[i]; row2[i] = tmp;
            break;
          }
        }
      }
      return [row1, row2];
    }

    function mapDbToCard(t) {
      return {
        id: t.id,
        name: t.name || 'Anonyme',
        badge: GRADE_TO_BADGE[t.grade] || 'Membre',
        headline: t.tag || t.short_text.slice(0, 40),
        text: t.short_text || t.full_text,
        rating: t.rating || 5
      };
    }

    // Fetch active testimonials from DB and render
    fetch(SUPABASE_URL + '/rest/v1/vizion_web_testimonials?is_active=eq.true&select=id,name,initial,tag,short_text,full_text,rating,grade&order=created_at.desc', {
      headers: { 'apikey': SUPABASE_KEY, 'Authorization': 'Bearer ' + SUPABASE_KEY }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      if (!Array.isArray(data) || data.length === 0) return;
      var cards = data.map(mapDbToCard);
      var total = PER_ROW * 2;
      var picked = pickWithoutAdjacentDupes(cards, total);
      var rows = splitIntoRows(picked, PER_ROW);
      fillTrack('reviews-track-1', rows[0]);
      fillTrack('reviews-track-2', rows[1]);
    })
    .catch(function(err) {
      console.warn('Testimonials fetch failed, section left empty:', err);
    });

    // Screenshot grid (center) — statique, adapte le nombre au viewport
    var ssGrid = document.getElementById('reviews-track-screenshots');
    if (ssGrid) {
      function fillProofGrid() {
        var wrapperWidth = ssGrid.parentElement.clientWidth;
        var minCard = 320;
        var gap = 16;
        var count = Math.floor((wrapperWidth + gap) / (minCard + gap));
        if (count < 2) count = 2;
        if (count > 8) count = 8;
        var totalUsed = count * minCard + (count - 1) * gap;
        var sidePad = Math.max(0, (wrapperWidth - totalUsed) / 2);
        ssGrid.style.padding = '0 ' + sidePad + 'px';
        var ssHtml = '';
        for (var j = 0; j < count; j++) {
          ssHtml += '<div class="proof-grid-card"><img src="./assets/proof/proof2.jpeg" alt="Résultats financiers" loading="lazy"/></div>';
        }
        ssGrid.innerHTML = ssHtml;
      }
      fillProofGrid();
      window.addEventListener('resize', fillProofGrid);
    }
  })();
  </script>
  <script src="./js/faq.js"></script>

  <!-- Footer -->
  <footer class="footer-new">
    <div class="footer-new-glow"></div>
    <div class="container">
      <!-- Top: CTA block -->
      <div class="footer-cta-block">
        <h2 class="footer-cta-title">Prêt à lancer ton business ?</h2>
        <p class="footer-cta-sub">Rejoins la plateforme et accède à tout le système.</p>
        <a href="#pricing-scroll" id="footer-main-cta" class="footer-cta-btn">
          Commencer maintenant
          <svg width="16" height="16" viewBox="0 0 20 20" fill="none"><path d="M7.5 15l5-5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </a>
      </div>

      <!-- Separator -->
      <div class="footer-sep"></div>

      <!-- Bottom: brand + links + copyright -->
      <div class="footer-bottom">
        <div class="footer-brand">
          <img src="./assets/logo.svg" alt="Vizion OS" width="28" height="28" />
          <span>Vizion OS</span>
        </div>
        <div class="footer-links">
          <a href="./mentions-legales.html" target="_blank" rel="noopener noreferrer">Mentions légales</a>
          <a href="./conditions-vente.html" target="_blank" rel="noopener noreferrer">Conditions de vente</a>
          <a href="./politique-confidentialite.html" target="_blank" rel="noopener noreferrer">Confidentialité</a>
          <a href="./politique-cookies.html" target="_blank" rel="noopener noreferrer">Cookies</a>
        </div>
        <p class="footer-copy">© <span id="year"></span> Vizion OS — Tous droits réservés</p>
      </div>
    </div>
  </footer>

  <script src="./js/script.js"></script>
  <script src="./js/pricing-scroll.js"></script>


  <!-- Sticky CTA -->
  <a href="#pricing-scroll" id="sticky-cta" class="sticky-cta" aria-label="Rejoindre maintenant">
    <span class="cta-diamond-icon">💰</span>
    <span class="sticky-cta-text">Rejoindre maintenant</span>
    <svg width="14" height="14" viewBox="0 0 20 20" fill="none">
      <path d="M7.5 15l5-5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </a>

  <script>
    (function () {
      var heroCta = document.querySelector('.btn-glow-pulse');
      var stickyCta = document.getElementById('sticky-cta');
      if (!heroCta || !stickyCta) return;

      var heroVisible = true;
      var bottomCtaVisible = false;

      // Footer CTA "Prêt à lancer ton business"
      var bottomCta = document.querySelector('.footer-cta-block');

      function updateSticky() {
        if (heroVisible || bottomCtaVisible) {
          stickyCta.classList.remove('sticky-cta--visible');
        } else {
          stickyCta.classList.add('sticky-cta--visible');
        }
      }

      var heroObserver = new IntersectionObserver(function (entries) {
        entries.forEach(function (entry) {
          heroVisible = entry.isIntersecting;
          updateSticky();
        });
      }, { threshold: 0 });
      heroObserver.observe(heroCta);

      if (bottomCta) {
        var bottomObserver = new IntersectionObserver(function (entries) {
          entries.forEach(function (entry) {
            bottomCtaVisible = entry.isIntersecting;
            updateSticky();
          });
        }, { threshold: 0 });
        bottomObserver.observe(bottomCta);
      }
    })();
  </script>

  <!-- Landing page settings: fetch video + live links from DB -->
  <script>
    (function() {
      var SUPABASE_URL = 'https://zrwpzetcfdpicjfdvikt.supabase.co';
      var SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inpyd3B6ZXRjZmRwaWNqZmR2aWt0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ5NDAwNTUsImV4cCI6MjA5MDUxNjA1NX0.huMkumw8BbEyxbnYnc9ijuMzRhK9jZ1jYe0bHV_jyWE';

      var container = document.querySelector('.cl-video-container');
      var overlay = document.querySelector('.cl-video-overlay');
      var wrapper = document.getElementById('hero-youtube-wrapper');
      var thumb = document.getElementById('hero-youtube-thumb');
      var liveBtn = document.getElementById('vw-live-btn');

      var videoId = null;
      var loaded = false;

      // Fetch all landing page settings in one call
      fetch(SUPABASE_URL + '/rest/v1/global_settings?key=eq.landing_page_settings&select=value&limit=1', {
        headers: { 'apikey': SUPABASE_KEY, 'Authorization': 'Bearer ' + SUPABASE_KEY }
      })
      .then(function(r) { return r.json(); })
      .then(function(rows) {
        if (!rows || !rows[0] || !rows[0].value) return;
        var cfg = rows[0].value;

        // Video
        if (cfg.youtube_id && wrapper) {
          videoId = cfg.youtube_id;
          wrapper.setAttribute('data-video-id', videoId);
          if (thumb) {
            thumb.src = 'https://img.youtube.com/vi/' + videoId + '/maxresdefault.jpg';
            thumb.onload = function() {
              wrapper.classList.add('video-loaded');
              thumb.style.opacity = '1';
            };
            thumb.onerror = function() {
              wrapper.classList.add('video-loaded');
              thumb.style.opacity = '1';
            };
          }
        } else if (wrapper) {
          wrapper.classList.add('video-loaded');
        }

        // Live links
        if (liveBtn) {
          if (cfg.bio_url) liveBtn.setAttribute('data-bio-url', cfg.bio_url);
          if (cfg.lp_url) liveBtn.setAttribute('data-lp-url', cfg.lp_url);
          // Activate button if bio URL exists (bio tab is active by default)
          if (cfg.bio_url) {
            liveBtn.href = cfg.bio_url;
            liveBtn.style.pointerEvents = 'auto';
          }
        }
      })
      .catch(function(err) {
        console.warn('Landing page settings fetch failed:', err);
        if (wrapper) wrapper.classList.add('video-loaded');
      });

      // Click to play
      if (container && overlay && wrapper) {
        overlay.addEventListener('click', function() {
          if (loaded || !videoId) return;
          loaded = true;
          var iframe = document.createElement('iframe');
          iframe.id = 'hero-youtube';
          iframe.className = 'hero-youtube-iframe';
          iframe.src = 'https://www.youtube.com/embed/' + videoId + '?rel=0&modestbranding=1&color=white&autoplay=1&enablejsapi=1';
          iframe.title = 'Présentation Vizion OS';
          iframe.frameBorder = '0';
          iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
          iframe.allowFullscreen = true;
          iframe.style.width = '100%';
          iframe.style.height = '100%';
          wrapper.innerHTML = '';
          wrapper.appendChild(iframe);
          container.classList.add('playing');
        });
      }
    })();
  </script>

  <!-- In-view : images flottantes visibles quand la vidéo est dans le viewport -->
  <script>
    (function() {
      var videoContainer = document.querySelector('.cl-video-container');
      var vslSection = document.querySelector('.hero-vsl-section');
      if (!videoContainer || !vslSection) return;

      // Petites images : hover de la section
      vslSection.addEventListener('mouseenter', function() {
        videoContainer.classList.add('in-view');
      });
      vslSection.addEventListener('mouseleave', function() {
        videoContainer.classList.remove('in-view');
      });

      // Grandes images : animation d'apparition au scroll
      var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            videoContainer.classList.remove('out-of-view');
          } else {
            videoContainer.classList.add('out-of-view');
          }
        });
      }, { threshold: 0.15 });
      observer.observe(vslSection);
    })();
  </script>

  <!-- Vizion Web Interactive Mockup -->
  <script>
    /* Tools slider */
    var toolsCurrent = 0;
    function toolsGoTo(idx) {
      var slides = document.querySelectorAll('#tools2-slides .tools2-slide');
      var dots = document.querySelectorAll('#tools2-mockup .tools2-dot');
      slides.forEach(function(s) { s.classList.remove('tools2-slide-active'); });
      dots.forEach(function(d) { d.classList.remove('tools2-dot-active'); });
      toolsCurrent = ((idx % slides.length) + slides.length) % slides.length;
      slides[toolsCurrent].classList.add('tools2-slide-active');
      dots[toolsCurrent].classList.add('tools2-dot-active');
    }
    function toolsNext() { toolsGoTo(toolsCurrent + 1); }
    function toolsPrev() { toolsGoTo(toolsCurrent - 1); }

    /* Forum channel switching */
    function fmSwitchChan(el, chan) {
      el.parentElement.querySelectorAll('.fm2-chan').forEach(function(t) { t.classList.remove('fm2-chan-active'); });
      el.classList.add('fm2-chan-active');
      var posts = document.getElementById('fm2-posts');
      posts.querySelectorAll('.fm2-post-group').forEach(function(g) { g.classList.remove('fm2-post-group-active'); });
      var target = posts.querySelector('[data-chan="' + chan + '"]');
      if (target) { void target.offsetWidth; target.classList.add('fm2-post-group-active'); }
    }

    function vwSwitchMain(el, view) {
      el.closest('.vw2-topbar').querySelectorAll('.vw2-mtab').forEach(function(t) { t.classList.remove('vw2-mtab-active'); });
      el.classList.add('vw2-mtab-active');
      var mockup = document.getElementById('vw-mockup-interactive');
      mockup.querySelectorAll('.vw-view').forEach(function(v) { v.classList.remove('vw-view-active'); v.style.display = 'none'; });
      var target = document.getElementById('vw-view-' + view);
      if (target) { target.style.display = 'flex'; void target.offsetWidth; target.classList.add('vw-view-active'); }
      // Update live button: hide on themes, change URL per tab
      var liveBtn = document.getElementById('vw-live-btn');
      if (liveBtn) {
        if (view === 'themes') { liveBtn.style.display = 'none'; }
        else {
          liveBtn.style.display = 'flex';
          var url = view === 'bio' ? liveBtn.dataset.bioUrl : liveBtn.dataset.lpUrl;
          if (url) {
            liveBtn.href = url;
            liveBtn.style.pointerEvents = 'auto';
          } else {
            liveBtn.removeAttribute('href');
            liveBtn.style.pointerEvents = 'none';
          }
        }
      }
    }
    function vwSwitchSub(el, sub) {
      el.closest('.vw2-subtabs-bar').querySelectorAll('.vw2-stab').forEach(function(t) { t.classList.remove('vw2-stab-active'); });
      el.classList.add('vw2-stab-active');
      var editor = el.closest('.vw2-editor');
      editor.querySelectorAll('.vw-subview').forEach(function(v) { v.classList.remove('vw-subview-active'); v.style.display = 'none'; });
      var target = document.getElementById('vw-sub-' + sub);
      if (target) { target.style.display = 'flex'; void target.offsetWidth; target.classList.add('vw-subview-active'); }
    }
    function vwSelectTheme(el) {
      el.parentElement.querySelectorAll('.vw2-theme-card').forEach(function(c) { c.classList.remove('vw2-theme-active'); c.querySelector('.vw2-theme-check').textContent = ''; });
      el.classList.add('vw2-theme-active');
      el.querySelector('.vw2-theme-check').textContent = '✓ Actif';
    }
  </script>
</body>

</html>