{% extends 'base.landing.html.twig' %}

{% block header_cta_label %}Essayer Moodia{% endblock %}
{% block header_active_code %}moodia{% endblock %}

{% set c1 = tool is not null and tool.colorPrimary is not null ? tool.colorPrimary : '#1281E4' %}
{% set c2 = tool is not null and tool.colorSecondary is not null ? tool.colorSecondary : '#38B2FA' %}
{% set c3 = tool is not null and tool.colorBackground is not null ? tool.colorBackground : '#EDF5FD' %}
{% set c1dark = '#0A6BC4' %}

{% block title %}Moodia — Créez un cours Moodle complet en 20 minutes | Bubul{% endblock %}
{% block meta_description %}Transformez n'importe quel PDF en cours Moodle structuré en 20 minutes. Sections, quiz, audio, export .mbz. Essai gratuit pour formateurs.{% endblock %}
{% block meta_keywords %}moodia, création cours moodle ia, pdf vers moodle, générateur formation ia, export mbz moodle{% endblock %}
{% block canonical %}https://bubul.app/outils/moodia{% endblock %}
{% block og_title %}Moodia — Un PDF suffit. Moodia fait le reste.{% endblock %}
{% block og_description %}Importez votre PDF, l'IA génère sections, quiz et audio. Export .mbz en 20 minutes. Bêta gratuite sur Bubul.app.{% endblock %}
{% block twitter_title %}Moodia — Un PDF suffit. Moodia fait le reste.{% endblock %}
{% block twitter_description %}De votre PDF à un cours Moodle déployé en 20 minutes. Sections, quiz, audio. Bêta gratuite.{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <style>

        /* Fonts scopés à cette page */
        .moodia-page .font-mono      { font-family: 'JetBrains Mono', monospace; }

        /* Scroll reveal (partagé avec les organismes inclus) */
        .moodia-page .reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1); }
        .moodia-page .reveal.visible { opacity: 1; transform: none; }

        /* Compare row — text-decoration line-through */
        .moodia-page .cr-cross { text-decoration: line-through; opacity: 0.6; }
        @media (max-width: 768px) {
            .moodia-page .cr-arrow-icon { transform: rotate(90deg); }
        }

        /* Spots décoratifs */
        .spot {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
            z-index: 0;
        }

        /* Skeleton shimmer animation for feature mockups */
        @keyframes sk { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
        .sk-mo { background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%); background-size: 600px 100%; animation: sk 1.6s ease-in-out infinite; }
        @keyframes spin-mo { to { transform: rotate(360deg); } }
    </style>
{% endblock %}

{% block landing_content %}

<script type="application/ld+json">
{
    "@context": "https://schema.org", "@type": "SoftwareApplication",
    "name": "Moodia",
    "description": "Outil IA qui convertit des PDF en cours Moodle complets avec export MBZ en 20 minutes.",
    "applicationCategory": "EducationalApplication", "operatingSystem": "Web", "inLanguage": "fr",
    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR", "description": "Bêta gratuite" },
    "featureList": ["Conversion PDF vers cours Moodle","Quiz auto-générés","Export MBZ natif","Audio intégré"],
    "provider": { "@type": "Organization", "name": "Bubul", "url": "https://bubul.app" }
}
</script>


<div class="moodia-page" style="--c1: {{ c1 }}; --c2: {{ c2 }}; --c3: {{ c3 }}; position: relative; overflow: clip;">

    {# ===== Spots décoratifs bleus ===== #}
    {# Hero #}
    <div class="spot" style="width:700px;height:700px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 22%, transparent) 0%,transparent 70%);top:-200px;right:-200px;"></div>
    <div class="spot" style="width:600px;height:600px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 18%, transparent) 0%,transparent 70%);top:-150px;left:-200px;"></div>
    {# Section 2 — steps #}
    <div class="spot" style="width:500px;height:500px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 10%, transparent) 0%,transparent 70%);top:900px;right:-150px;"></div>
    <div class="spot" style="width:400px;height:400px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 8%, transparent) 0%,transparent 70%);top:1100px;left:-120px;"></div>
    {# Section 3 — features #}
    <div class="spot" style="width:500px;height:500px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 9%, transparent) 0%,transparent 70%);top:1800px;right:-100px;"></div>
    <div class="spot" style="width:450px;height:450px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 8%, transparent) 0%,transparent 70%);top:2200px;left:-140px;"></div>
    {# Section 4 — compare / FAQ #}
    <div class="spot" style="width:480px;height:480px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 9%, transparent) 0%,transparent 70%);top:2900px;right:-120px;"></div>
    <div class="spot" style="width:420px;height:420px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 8%, transparent) 0%,transparent 70%);top:3400px;left:-100px;"></div>
    {# CTA final #}
    <div class="spot" style="width:600px;height:600px;background:radial-gradient(circle,color-mix(in srgb, var(--c1) 12%, transparent) 0%,transparent 70%);top:4000px;right:-150px;"></div>

    {# ================================================
       1. HERO — organism hero-tool
       ================================================ #}

    {% set moodiaHeroMockup %}

                    {# ── Version MOBILE (colonne unique, sans sidebar) ── #}
                    <div class="block lg:hidden">
                        <div style="position: relative; border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c1) 12%, transparent); box-shadow: 0 20px 60px color-mix(in srgb, var(--c1) 12%, transparent), 0 4px 16px rgba(0,0,0,0.04);">
                            {# Chrome #}
                            <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F4FA;border-bottom:1px solid color-mix(in srgb, var(--c1) 8%, transparent);">
                                <div style="display:flex;gap:5px;">
                                    <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;"></span>
                                    <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;"></span>
                                    <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;"></span>
                                </div>
                                <div style="flex:1;display:flex;justify-content:center;">
                                    <div style="display:flex;align-items:center;gap:5px;padding:3px 12px;border-radius:999px;background:white;border:1px solid color-mix(in srgb, var(--c1) 12%, transparent);font-family:monospace;font-size:0.65rem;color:#8494B2;max-width:220px;width:100%;justify-content:center;">
                                        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;"></span>
                                        bubul.app/moodia
                                    </div>
                                </div>
                            </div>
                            {# App header #}
                            <div style="background:white;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;padding:10px 14px;">
                                <div style="width:18px;height:18px;border-radius:5px;background:#F3F4F6;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
                                </div>
                                <div style="flex:1;font-size:11px;font-weight:700;color:#1B2D4F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Introduction à la programmation</div>
                                <div style="display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#F0FDF4;flex-shrink:0;">
                                    <span style="width:5px;height:5px;border-radius:50%;background:#22C55E;"></span>
                                    <span style="font-size:9px;color:#16A34A;font-weight:500;">Enregistré</span>
                                </div>
                                <div style="display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:{{ c1 }};flex-shrink:0;">
                                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><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"/></svg>
                                </div>
                            </div>
                            {# Breadcrumb #}
                            <div style="background:white;border-bottom:1px solid #E5E7EB;padding:6px 16px;display:flex;align-items:center;gap:6px;">
                                <span style="font-size:10px;color:#94A3B8;">Introduction</span>
                                <span style="font-size:10px;color:#CBD5E1;">/</span>
                                <span style="font-size:10px;font-weight:600;color:#1B2D4F;">Les langages de programmation</span>
                            </div>
                            {# Contenu principal #}
                            <div style="background:#F5F5F5;padding:12px 14px;display:flex;flex-direction:column;gap:10px;">
                                {# Meta card #}
                                <div style="background:white;border:1px solid #E5E7EB;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;">
                                    <div style="display:flex;align-items:center;gap:7px;">
                                        <span style="font-size:9px;font-weight:700;color:{{ c1 }};background:{{ c1 }}15;padding:2px 7px;border-radius:4px;">Page</span>
                                        <span style="font-size:12px;font-weight:700;color:#1B2D4F;">Les langages de programmation</span>
                                    </div>
                                    <div style="font-size:10px;color:#94A3B8;font-style:italic;">Un panorama des langages les plus utilisés en 2024 : Python, JavaScript, Java.</div>
                                    <div style="display:flex;align-items:center;gap:4px;">
                                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                        <span style="font-size:9px;color:#94A3B8;">15 min</span>
                                    </div>
                                </div>
                                {# Contenu éditorial #}
                                <div style="background:white;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;">
                                    <div style="font-size:14px;font-weight:800;color:#1B2D4F;font-family:'Poppins',sans-serif;">Les langages de programmation</div>
                                    <p style="font-size:11px;color:#374151;line-height:1.65;margin:0;">Il existe des centaines de langages de programmation, chacun conçu pour des usages spécifiques. Python domine la data science, JavaScript règne sur le web.</p>
                                    <div style="display:flex;flex-direction:column;gap:5px;">
                                        <div style="display:flex;align-items:baseline;gap:6px;"><span style="color:#374151;flex-shrink:0;">•</span><span style="font-size:11px;color:#374151;"><strong style="color:#1B2D4F;">Python</strong> — idéal pour débuter, très utilisé en IA.</span></div>
                                        <div style="display:flex;align-items:baseline;gap:6px;"><span style="color:#374151;flex-shrink:0;">•</span><span style="font-size:11px;color:#374151;"><strong style="color:#1B2D4F;">JavaScript</strong> — indispensable pour le web.</span></div>
                                        <div style="display:flex;align-items:baseline;gap:6px;"><span style="color:#374151;flex-shrink:0;">•</span><span style="font-size:11px;color:#374151;"><strong style="color:#1B2D4F;">Java</strong> — robuste, présent en entreprise.</span></div>
                                    </div>
                                </div>
                            </div>
                            {# Pagination #}
                            <div style="background:white;border-top:1px solid #F0F2F5;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;">
                                <div style="display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;background:#F3F4F6;">
                                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
                                    <span style="font-size:9px;color:#94A3B8;font-weight:500;">Précédent</span>
                                </div>
                                <span style="font-size:11px;font-weight:600;color:#94A3B8;">3 / 12</span>
                                <div style="display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;background:#F3F4F6;">
                                    <span style="font-size:9px;color:#4A5E80;font-weight:600;">Suivant</span>
                                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#4A5E80" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# ── Version DESKTOP (split sidebar + canvas) ── #}
                    <div class="hidden lg:block">
                        <div style="position: relative; border-radius: 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c1) 12%, transparent); box-shadow: 0 24px 80px color-mix(in srgb, var(--c1) 12%, transparent), 0 4px 16px rgba(0,0,0,0.06);">
                            {# Barre navigateur #}
                            <div style="display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: #F0F4FA; border-bottom: 1px solid color-mix(in srgb, var(--c1) 8%, transparent);">
                                <div style="display: flex; gap: 6px;">
                                    <span style="width: 12px; height: 12px; border-radius: 50%; background: #FF5F56;"></span>
                                    <span style="width: 12px; height: 12px; border-radius: 50%; background: #FFBD2E;"></span>
                                    <span style="width: 12px; height: 12px; border-radius: 50%; background: #27C93F;"></span>
                                </div>
                                <div style="flex: 1; display: flex; justify-content: center; padding: 0 16px;">
                                    <div style="display: flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: white; border: 1px solid color-mix(in srgb, var(--c1) 12%, transparent); font-family: monospace; font-size: 0.75rem; color: #8494B2; max-width: 280px; width: 100%; justify-content: center;">
                                        <span style="width: 7px; height: 7px; border-radius: 50%; background: #27C93F; flex-shrink: 0;"></span>
                                        bubul.app/moodia/editor
                                    </div>
                                </div>
                            </div>
                            {# Éditeur Moodia — tailles agrandies pour lisibilité #}
                            <div style="background: #F5F5F5; aspect-ratio: 16/10; overflow: hidden; display: flex; flex-direction: column;">

                              {# ── App header ── #}
                              <div style="background: white; border-bottom: 1px solid #E5E7EB; display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 40px; flex-shrink: 0;">
                                <div style="width: 22px; height: 22px; border-radius: 6px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
                                </div>
                                <div style="flex: 1; font-size: 12px; font-weight: 700; color: #1B2D4F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Introduction à la programmation</div>
                                <div style="display: flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #F0FDF4; flex-shrink: 0;">
                                  <span style="width: 6px; height: 6px; border-radius: 50%; background: #22C55E;"></span>
                                  <span style="font-size: 9px; color: #16A34A; font-weight: 500;">Enregistré</span>
                                </div>
                                <div style="display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: {{ c1 }}; flex-shrink: 0;">
                                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><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"/></svg>
                                </div>
                              </div>

                              {# ── Split layout ── #}
                              <div style="flex: 1; display: flex; overflow: hidden; background: #F5F5F5;">

                                {# ── Sidebar ── #}
                                <div style="width: 170px; background: white; border-right: 1px solid #E5E7EB; display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0;">
                                  <div style="padding: 7px 12px; border-bottom: 1px solid #F0F2F5; display: flex; align-items: center; gap: 6px;">
                                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="{{ c1 }}" stroke-width="2.5" stroke-linecap="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                                    <span style="font-size: 9px; font-weight: 700; color: #8494B2; text-transform: uppercase; letter-spacing: 0.06em;">Structure du cours</span>
                                  </div>
                                  <div style="flex: 1; overflow: hidden; padding: 4px 0;">

                                    {# Section 1 ouverte #}
                                    <div style="display: flex; align-items: center; gap: 6px; padding: 5px 12px;">
                                      <svg width="8" height="8" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2" stroke-linecap="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                                      <span style="font-size: 10px; font-weight: 700; color: #1B2D4F; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Introduction</span>
                                      <span style="font-size: 8px; color: #94A3B8; background: #F3F4F6; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;">5</span>
                                    </div>
                                    {# Activités section 1 #}
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 26px;">
                                      <span style="width: 9px; height: 9px; border-radius: 50%; background: #22C55E; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #4A5E80; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Bienvenue</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 26px;">
                                      <span style="width: 9px; height: 9px; border-radius: 3px; background: {{ c1 }}; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #4A5E80; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Qu'est-ce que la prog…</span>
                                    </div>
                                    {# Activité active #}
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 24px; background: {{ c1 }}0D; border-left: 2px solid {{ c1 }}; margin: 1px 0;">
                                      <span style="width: 9px; height: 9px; border-radius: 3px; background: {{ c1 }}; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #1B2D4F; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Les langages</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 26px;">
                                      <span style="width: 9px; height: 9px; border-radius: 3px; background: {{ c1 }}; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #4A5E80; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Variables et types</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 26px;">
                                      <span style="width: 9px; height: 9px; border-radius: 50%; background: #A855F7; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #4A5E80; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Introduction — Podcast</span>
                                    </div>

                                    {# Section 2 ouverte #}
                                    <div style="display: flex; align-items: center; gap: 6px; padding: 5px 12px; margin-top: 3px; border-top: 1px solid #F3F4F6;">
                                      <svg width="8" height="8" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="#94A3B8" stroke-width="1.5" stroke-linecap="round"/></svg>
                                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2" stroke-linecap="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
                                      <span style="font-size: 10px; font-weight: 700; color: #1B2D4F; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Algorithmique</span>
                                      <span style="font-size: 8px; color: #94A3B8; background: #F3F4F6; padding: 1px 5px; border-radius: 3px; flex-shrink: 0;">4</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 26px;">
                                      <span style="width: 9px; height: 9px; border-radius: 3px; background: {{ c1 }}; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #4A5E80; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Les algorithmes</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 26px;">
                                      <span style="width: 9px; height: 9px; border-radius: 3px; background: {{ c1 }}; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #4A5E80; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Boucles et conditions</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 26px;">
                                      <span style="width: 9px; height: 9px; border-radius: 3px; background: #F59E0B; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #4A5E80; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Exercices pratiques</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 7px; padding: 4px 12px 4px 26px;">
                                      <span style="width: 9px; height: 9px; border-radius: 50%; background: #A855F7; flex-shrink: 0;"></span>
                                      <span style="font-size: 9px; color: #4A5E80; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">Algorithmique — Audio</span>
                                    </div>

                                  </div>
                                </div>

                                {# ── Canvas ── #}
                                <div style="flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #F5F5F5;">

                                  {# Breadcrumb #}
                                  <div style="background: white; border-bottom: 1px solid #E5E7EB; padding: 6px 20px; display: flex; align-items: center; gap: 8px; flex-shrink: 0;">
                                    <span style="font-size: 10px; color: #94A3B8;">Introduction</span>
                                    <span style="font-size: 10px; color: #CBD5E1;">/</span>
                                    <span style="font-size: 10px; font-weight: 600; color: #1B2D4F;">Les langages de programmation</span>
                                  </div>

                                  {# Zone édition #}
                                  <div style="flex: 1; overflow: hidden; padding: 12px 18px 6px; display: flex; flex-direction: column; gap: 8px; background: #F5F5F5;">

                                    {# Card méta activité #}
                                    <div style="background: white; border: 1px solid #E5E7EB; border-radius: 9px; padding: 10px 14px; display: flex; flex-direction: column; gap: 5px; flex-shrink: 0;">
                                      <div style="display: flex; align-items: center; gap: 8px;">
                                        <span style="font-size: 9px; font-weight: 700; color: {{ c1 }}; background: {{ c1 }}15; padding: 2px 7px; border-radius: 4px; flex-shrink: 0;">Page</span>
                                        <span style="font-size: 12px; font-weight: 700; color: #1B2D4F; flex: 1;">Les langages de programmation</span>
                                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" stroke-width="2" stroke-linecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
                                      </div>
                                      <div style="font-size: 10px; color: #94A3B8; font-style: italic;">Un panorama des langages les plus utilisés en 2024 : Python, JavaScript, Java et leurs cas d'usage.</div>
                                      <div style="display: flex; align-items: center; gap: 4px;">
                                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                        <span style="font-size: 9px; color: #94A3B8;">15 min</span>
                                      </div>
                                    </div>

                                    {# Toolbar formatage #}
                                    <div style="background: white; border: 1px solid #E5E7EB; border-radius: 6px; padding: 5px 10px; display: flex; align-items: center; gap: 7px; flex-shrink: 0;">
                                      <span style="font-size: 10px; font-weight: 700; color: #4A5E80;">B</span>
                                      <span style="font-size: 10px; font-style: italic; color: #4A5E80;">I</span>
                                      <span style="font-size: 10px; text-decoration: underline; color: #4A5E80;">U</span>
                                      <span style="width: 1px; height: 12px; background: #E5E7EB;"></span>
                                      <span style="font-size: 9px; font-weight: 700; color: #4A5E80;">H2</span>
                                      <span style="font-size: 9px; font-weight: 700; color: #94A3B8;">H3</span>
                                      <span style="width: 1px; height: 12px; background: #E5E7EB;"></span>
                                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2" stroke-linecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
                                    </div>

                                    {# Contenu éditorial #}
                                    <div style="display: flex; flex-direction: column; gap: 7px; overflow: hidden; background: white; border-radius: 9px; padding: 12px 14px;">

                                      <div style="font-size: 15px; font-weight: 800; color: #1B2D4F; line-height: 1.15; font-family: 'Poppins', sans-serif;">Les langages de programmation</div>

                                      <p style="font-size: 11px; color: #374151; line-height: 1.65; margin: 0;">Il existe des centaines de langages de programmation, chacun conçu pour des usages spécifiques. Python domine la data science, JavaScript règne sur le web, Java reste incontournable en entreprise.</p>

                                      <div style="font-size: 13px; font-weight: 700; color: #1B2D4F;">Les langages les plus populaires</div>

                                      <div style="display: flex; flex-direction: column; gap: 5px; padding-left: 4px;">
                                        <div style="display: flex; align-items: baseline; gap: 6px;">
                                          <span style="font-size: 12px; color: #374151; flex-shrink: 0;">•</span>
                                          <span style="font-size: 11px; color: #374151; line-height: 1.5;"><strong style="color: #1B2D4F;">Python</strong> : idéal pour débuter, très utilisé en IA.</span>
                                        </div>
                                        <div style="display: flex; align-items: baseline; gap: 6px;">
                                          <span style="font-size: 12px; color: #374151; flex-shrink: 0;">•</span>
                                          <span style="font-size: 11px; color: #374151; line-height: 1.5;"><strong style="color: #1B2D4F;">JavaScript</strong> : indispensable pour le web.</span>
                                        </div>
                                        <div style="display: flex; align-items: baseline; gap: 6px;">
                                          <span style="font-size: 12px; color: #374151; flex-shrink: 0;">•</span>
                                          <span style="font-size: 11px; color: #374151; line-height: 1.5;"><strong style="color: #1B2D4F;">Java</strong> : robuste, présent en entreprise.</span>
                                        </div>
                                      </div>

                                    </div>

                                  </div>

                                  {# Pagination #}
                                  <div style="background: white; border-top: 1px solid #F0F2F5; padding: 7px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;">
                                    <div style="display: flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; background: #F3F4F6;">
                                      <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
                                      <span style="font-size: 9px; color: #94A3B8; font-weight: 500;">Précédent</span>
                                    </div>
                                    <span style="font-size: 10px; font-weight: 600; color: #94A3B8;">3 / 12</span>
                                    <div style="display: flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; background: #F3F4F6;">
                                      <span style="font-size: 9px; color: #4A5E80; font-weight: 600;">Suivant</span>
                                      <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#4A5E80" stroke-width="2.5" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
                                    </div>
                                  </div>

                                </div>
                              </div>
                            </div>
                        </div>
                    </div>
    {% endset %}

    {% include '_organisms/landing/hero-tool.html.twig' with {
        toolName: 'Moodia',
        toolIcon: 'bubul-moodia',
        toolColor: 'primary',
        h1: 'Vous avez le savoir.<br><span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">Moodia le structure.</span>',
        subtitle: 'Vous avez un PDF ? Importez-le. Vous partez de zéro ? L\'IA s\'en charge. Structure, quiz, audio — votre cours LMS est prêt en 20 minutes. Pas en 12 heures.',
        badge: 'Créateur de cours LMS',
        ctaUrl: path('app_login'),
        ctaLabel: 'Créer un cours',
        pills: [],
        gradientStart: c1,
        gradientEnd: c2,
        visualHtml: moodiaHeroMockup
    } only %}

    {# ================================================
       2. HOW IT WORKS — organisme steps-tool
       ================================================ #}
    {% include '_organisms/landing/steps-tool.html.twig' with {
        variant: 'cards',
        titleHtml: '4 étapes. <span style="-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-image:linear-gradient(90deg,' ~ c1 ~ ',' ~ c2 ~ ');">20 minutes.</span>',
        subtitle: 'Un PDF sous la main ? Importez-le. Aucun support ? Décrivez votre sujet et l\'IA fait le reste. Dans les deux cas, votre cours est prêt pendant votre pause café.',
        accentColor: c1,
        gradientEnd: c2,
        bgStyle: 'background: color-mix(in srgb, ' ~ c3 ~ ' 20%, white);',
        steps: [
            { num: '1', time: '10 secondes',  title: 'Importez ou générez', desc: 'Glissez un PDF existant, ou laissez l\'IA créer un cours complet à partir d\'un simple sujet.' },
            { num: '2', time: '1 minute',     title: 'Personnalisez',       desc: 'Titre, public visé, niveau, langue, durée — Moodia s\'adapte précisément à votre contexte.' },
            { num: '3', time: 'À votre rythme', title: 'Éditez',            desc: 'Relisez, ajustez, réorganisez avant et après l\'export. Le cours reste sauvegardé, modifiable à tout moment.' },
            { num: '4', time: '30 secondes',  title: 'Déployez',            desc: 'Téléchargez le .mbz et importez-le dans votre LMS. Structure, quiz, audio — tout est prêt.' }
        ]
    } only %}

    {# ================================================
       3. FEATURES — organisme features-alternating
       ================================================ #}
    {# VisualHTML définis en blocs {% set %}...{% endset %} pour que {{ c1 }} soit résolu en contexte template #}

    {% set moodiaVisualConfig %}
<div style="border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb, var(--c1) 14%, transparent);box-shadow:0 24px 80px color-mix(in srgb, var(--c1) 10%, transparent), 0 4px 16px rgba(0,0,0,0.04);">
  {# Title bar — style hero #}
  <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F4FA;border-bottom:1px solid color-mix(in srgb, var(--c1) 8%, transparent);">
    <div style="display:flex;gap:5px;">
      <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;"></span>
    </div>
    <div style="flex:1;display:flex;justify-content:center;padding:0 16px;">
      <div style="display:flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:white;border:1px solid color-mix(in srgb, var(--c1) 12%, transparent);font-family:monospace;font-size:0.6rem;color:#8494B2;max-width:200px;width:100%;justify-content:center;">
        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;"></span>
        bubul.app/moodia/config
      </div>
    </div>
  </div>
  <div class="flex" style="background:#F5F5F5">

    {# Colonne principale #}
    <div class="flex-1 flex flex-col gap-1.5 p-2.5 min-w-0">

      {# Section card skeleton helper: icône colorée + titre lisible + barres #}
      {# 1 — Identité #}
      <div class="bg-white rounded-lg border border-[#E5E7EB] p-2">
        <div class="flex items-center gap-1.5 mb-2 pb-1.5 border-b border-[#F3F4F6]">
          <div class="w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0" style="background:{{ c1 }}18;">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="{{ c1 }}" stroke-width="2.5" stroke-linecap="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
          </div>
          <span class="text-[10px] font-bold text-[#1B2D4F]">Identité du cours</span>
        </div>
        <div class="flex flex-col gap-1.5">
          <div class="bg-white border border-[#E5E7EB] rounded h-5 px-2 flex items-center">
            <div class="h-2 w-24 bg-[#E2E8F0] rounded"></div>
          </div>
          <div class="bg-white border border-[#E5E7EB] rounded h-5 px-2 flex items-center">
            <div class="h-2 w-32 bg-[#E2E8F0] rounded"></div>
          </div>
        </div>
      </div>

      {# 2 — Paramètres #}
      <div class="bg-white rounded-lg border border-[#E5E7EB] p-2">
        <div class="flex items-center gap-1.5 mb-2 pb-1.5 border-b border-[#F3F4F6]">
          <div class="w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0 bg-[#DCFCE7]">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#16A34A" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
          </div>
          <span class="text-[10px] font-bold text-[#1B2D4F]">Paramètres</span>
        </div>
        <div class="grid grid-cols-3 gap-1.5">
          <div class="bg-white border border-[#E5E7EB] rounded h-5 px-2 flex items-center justify-between">
            <div class="h-2 w-10 bg-[#E2E8F0] rounded"></div>
            <svg width="6" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round"/></svg>
          </div>
          <div class="bg-white border border-[#E5E7EB] rounded h-5 px-2 flex items-center justify-between">
            <div class="h-2 w-8 bg-[#E2E8F0] rounded"></div>
            <svg width="6" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round"/></svg>
          </div>
          <div class="bg-white border border-[#E5E7EB] rounded h-5 px-2 flex items-center justify-between">
            <div class="h-2 w-9 bg-[#E2E8F0] rounded"></div>
            <svg width="6" height="6" viewBox="0 0 10 6" fill="none"><path d="M1 1l4 4 4-4" stroke="#CBD5E1" stroke-width="1.5" stroke-linecap="round"/></svg>
          </div>
        </div>
      </div>

      {# 3 — Approche : les 3 cartes restent lisibles #}
      <div class="bg-white rounded-lg border border-[#E5E7EB] p-2">
        <div class="flex items-center gap-1.5 mb-2 pb-1.5 border-b border-[#F3F4F6]">
          <div class="w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0 bg-[#EEF2FF]">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
          </div>
          <span class="text-[10px] font-bold text-[#1B2D4F]">Approche pédagogique</span>
        </div>
        <div class="grid grid-cols-3 gap-1.5">
          <div class="rounded-lg border border-[#E5E7EB] p-1.5 flex flex-col items-center gap-1">
            <div class="w-6 h-6 rounded-xl flex items-center justify-center bg-[#DBEAFE]">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2" stroke-linecap="round"><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>
            <span class="text-[8px] font-semibold text-[#1B2D4F]">Cours</span>
          </div>
          <div class="rounded-lg border-2 p-1.5 flex flex-col items-center gap-1" style="border-color:{{ c1 }};background:{{ c1 }}08;">
            <div class="w-6 h-6 rounded-xl flex items-center justify-center bg-[#EDE9FE]">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2" stroke-linecap="round"><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"/><line x1="9" y1="7" x2="15" y2="7"/><line x1="9" y1="11" x2="12" y2="11"/></svg>
            </div>
            <span class="text-[8px] font-bold text-[#1B2D4F]">Cours + Quiz</span>
          </div>
          <div class="rounded-lg border border-[#E5E7EB] p-1.5 flex flex-col items-center gap-1">
            <div class="w-6 h-6 rounded-xl flex items-center justify-center bg-[#FEF3C7]">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#D97706" stroke-width="2" stroke-linecap="round"><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>
            <span class="text-[8px] font-semibold text-[#1B2D4F]">Quiz seul</span>
          </div>
        </div>
      </div>

      {# 4 — Objectifs #}
      <div class="bg-white rounded-lg border border-[#E5E7EB] p-2">
        <div class="flex items-center gap-1.5 pb-1.5 border-b border-[#F3F4F6] mb-2">
          <div class="w-5 h-5 rounded-md flex items-center justify-center flex-shrink-0 bg-[#FEF9C3]">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#CA8A04" stroke-width="2.5" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
          </div>
          <span class="flex-1 text-[10px] font-bold text-[#1B2D4F]">Objectifs</span>
          <span class="px-2 py-0.5 rounded-full bg-[#EDE9FE] text-[8px] font-bold text-[#7C3AED]">✦ Générer</span>
        </div>
        <div class="bg-white border border-[#E5E7EB] rounded h-8 px-2 py-1.5 flex flex-col gap-1.5">
          <div class="h-2 w-full bg-[#E2E8F0] rounded"></div>
          <div class="h-2 w-4/5 bg-[#E2E8F0] rounded"></div>
        </div>
      </div>

      {# Barre actions #}
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-1 px-3 py-1.5 rounded-lg border border-[#E5E7EB] bg-white">
          <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#4A5E80" stroke-width="2.5" stroke-linecap="round"><polyline points="15 18 9 12 15 6"/></svg>
          <span class="text-[9px] font-semibold text-[#4A5E80]">Retour</span>
        </div>
        <div style="display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:8px;background:linear-gradient(135deg, {{ c1dark }}, {{ c1 }}, {{ c2 }});box-shadow:0 4px 14px color-mix(in srgb, var(--c1) 40%, transparent), 0 1px 3px rgba(0,0,0,0.12);flex-shrink:0;">
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.95;flex-shrink:0;"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
          <span style="font-size:0.58rem;font-weight:700;color:white;white-space:nowrap;letter-spacing:0.01em;">Générer le cours</span>
        </div>
      </div>
    </div>

    {# Colonne droite — Aperçu skeleton (masquée sur mobile) #}
    <div class="hidden sm:block w-[100px] flex-shrink-0 p-2.5 pl-0">
      <div class="bg-white rounded-lg border border-[#E5E7EB] p-2 flex flex-col gap-2 h-full">
        <div class="flex items-center gap-1.5 pb-1.5 border-b border-[#F3F4F6]">
          <div class="w-3 h-3 rounded-full" style="background:{{ c1 }};"></div>
          <span class="text-[9px] font-bold text-[#1B2D4F]">Aperçu</span>
        </div>
        <div class="h-2.5 w-full bg-[#1B2D4F] rounded opacity-[0.12]"></div>
        <div class="flex flex-col gap-2">
          {% for bg in [c1~'18', '#DCFCE7', c1~'18', '#FEF9C3', '#EDE9FE'] %}
          <div class="flex items-center gap-1.5">
            <div class="w-4 h-4 rounded-md flex-shrink-0" style="background:{{ bg }};"></div>
            <div class="flex-1 flex flex-col gap-1">
              <div class="h-1.5 w-8 bg-[#E2E8F0] rounded"></div>
              <div class="h-1.5 w-12 bg-[#EEF2F7] rounded"></div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

  </div>
</div>
    {% endset %}

    {% set moodiaVisualGeneration %}
<div style="border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb, var(--c1) 14%, transparent);box-shadow:0 24px 80px color-mix(in srgb, var(--c1) 10%, transparent), 0 4px 16px rgba(0,0,0,0.04);">
  <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F4FA;border-bottom:1px solid color-mix(in srgb, var(--c1) 8%, transparent);">
    <div style="display:flex;gap:5px;">
      <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;"></span>
    </div>
    <div style="flex:1;display:flex;justify-content:center;padding:0 16px;">
      <div style="display:flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:white;border:1px solid color-mix(in srgb, var(--c1) 12%, transparent);font-family:monospace;font-size:0.6rem;color:#8494B2;max-width:200px;width:100%;justify-content:center;">
        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;"></span>
        bubul.app/moodia/generate
      </div>
    </div>
  </div>
  <div class="p-5 flex gap-4 items-start min-h-[230px]" style="background:#F5F5F5">
    <div class="flex-1 flex flex-col items-center justify-center gap-2 pt-2.5">
      <div class="relative w-[100px] h-[100px]">
        <svg width="100" height="100" viewBox="0 0 100 100" class="absolute top-0 left-0">
          <circle cx="50" cy="50" r="42" fill="none" stroke="#C8DCF0" stroke-width="5"/>
          <circle cx="50" cy="50" r="42" fill="none" stroke="{{ c1 }}" stroke-width="5" stroke-linecap="round" stroke-dasharray="264" stroke-dashoffset="153" transform="rotate(-90 50 50)"/>
        </svg>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center leading-none">
          <span class="text-[22px] font-black font-mono" style="color:{{ c1 }};">42</span><span class="text-[10px] font-bold" style="color:{{ c1 }};">%</span>
        </div>
      </div>
      <div class="text-[9px] text-[#6B7280] text-center">Génération en cours...</div>
      <div class="flex items-center gap-1 text-[9px] text-[#9CA3AF] font-mono">
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
        00:38
      </div>
    </div>
    <div class="flex flex-col gap-[8px] pt-1.5" style="flex:1.1;">
      <span class="text-[8px] font-bold text-[#1B2D4F] mb-0.5">Étapes de génération</span>
      <div class="flex items-center gap-[7px]">
        <div class="w-[19px] h-[19px] rounded-full bg-[#DCFCE7] flex items-center justify-center flex-shrink-0">
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#16A34A" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <span class="text-[8px] text-[#94A3B8] line-through">Analyse du document source</span>
      </div>
      <div class="flex items-center gap-[7px]">
        <div class="w-[19px] h-[19px] rounded-full bg-[#DCFCE7] flex items-center justify-center flex-shrink-0">
          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#16A34A" stroke-width="2.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        <span class="text-[8px] text-[#94A3B8] line-through">Structure du cours</span>
      </div>
      <div class="flex items-center gap-[7px]">
        <div class="w-[19px] h-[19px] rounded-full flex items-center justify-center flex-shrink-0" style="background:{{ c1 }}20;">
          <span class="text-[8px] font-bold" style="color:{{ c1 }};">3</span>
        </div>
        <span class="text-[8px] font-semibold" style="color:{{ c1 }};">Rédaction du contenu</span>
      </div>
      <div class="flex items-center gap-[7px] opacity-35">
        <div class="w-[19px] h-[19px] rounded-full bg-[#E2EAF5] flex items-center justify-center flex-shrink-0"><span class="text-[8px] text-[#64748B] font-bold">4</span></div>
        <span class="text-[8px] text-[#4A5E80]">Placement des images</span>
      </div>
      <div class="flex items-center gap-[7px] opacity-35">
        <div class="w-[19px] h-[19px] rounded-full bg-[#E2EAF5] flex items-center justify-center flex-shrink-0"><span class="text-[8px] text-[#64748B] font-bold">5</span></div>
        <span class="text-[8px] text-[#4A5E80]">Compilation finale</span>
      </div>
      <span class="text-[7.5px] text-[#94A3B8]">Temps estimé : ~2 min</span>
    </div>
  </div>
</div>
    {% endset %}

    {% set moodiaVisualAudio %}
<div style="border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb, var(--c1) 14%, transparent);box-shadow:0 24px 80px color-mix(in srgb, var(--c1) 10%, transparent), 0 4px 16px rgba(0,0,0,0.04);">
  {# Browser bar #}
  <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F4FA;border-bottom:1px solid color-mix(in srgb, var(--c1) 8%, transparent);">
    <div style="display:flex;gap:5px;">
      <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;"></span>
    </div>
    <div style="flex:1;display:flex;justify-content:center;padding:0 16px;">
      <div style="display:flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:white;border:1px solid color-mix(in srgb, var(--c1) 12%, transparent);font-family:monospace;font-size:0.6rem;color:#8494B2;max-width:200px;width:100%;justify-content:center;">
        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;"></span>
        bubul.app/moodia/editor
      </div>
    </div>
  </div>
  {# Editor content #}
  <div style="background:white;padding:12px 14px;display:flex;flex-direction:column;gap:7px;">
    {# Ligne 1 : badge Audio + titre + corbeille #}
    <div style="display:flex;align-items:center;gap:7px;">
      <div style="display:flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;background:#EDE9FE;flex-shrink:0;">
        <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2.5" stroke-linecap="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
        <span style="font-size:7.5px;font-weight:700;color:#7C3AED;">Audio</span>
      </div>
      <span style="font-size:10px;font-weight:700;color:#1B2D4F;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Comprendre les bases du cours</span>
      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" stroke-width="2" stroke-linecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/></svg>
    </div>
    {# Textarea #}
    <div style="border:1px solid #E5E7EB;border-radius:6px;padding:6px 8px;min-height:30px;background:white;">
      <span style="font-size:7.5px;color:#CBD5E1;">Entrez un sujet ou collez un texte…</span>
    </div>
    {# Durée #}
    <div style="display:flex;align-items:center;gap:3px;">
      <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      <span style="font-size:7px;color:#9CA3AF;">1 min</span>
    </div>
    {# Toolbar #}
    <div style="border:1px solid #E5E7EB;border-radius:6px;padding:3px 6px;display:flex;align-items:center;gap:2px;background:white;">
      <span style="font-size:7.5px;font-weight:700;color:#374151;padding:1px 3px;border-radius:3px;">B</span>
      <span style="font-size:7.5px;font-style:italic;color:#374151;padding:1px 2px;">I</span>
      <span style="font-size:7.5px;text-decoration:underline;color:#374151;padding:1px 2px;">U</span>
      <span style="font-size:7.5px;text-decoration:line-through;color:#374151;padding:1px 2px;">S</span>
      <div style="width:1px;height:9px;background:#E5E7EB;margin:0 2px;flex-shrink:0;"></div>
      <span style="font-size:6.5px;font-weight:700;color:#374151;padding:1px 2px;">H2</span>
      <span style="font-size:6.5px;font-weight:700;color:#374151;padding:1px 2px;">H3</span>
      <div style="width:1px;height:9px;background:#E5E7EB;margin:0 2px;flex-shrink:0;"></div>
      <svg width="8" height="7" viewBox="0 0 24 24" fill="none" stroke="#6B7280" stroke-width="2.5" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
      <svg width="8" height="7" viewBox="0 0 24 24" fill="none" stroke="#6B7280" stroke-width="2.5" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="9" y1="12" x2="21" y2="12"/><line x1="6" y1="18" x2="21" y2="18"/></svg>
      <div style="width:1px;height:9px;background:#E5E7EB;margin:0 2px;flex-shrink:0;"></div>
      <svg width="8" height="7" viewBox="0 0 24 24" fill="none" stroke="#6B7280" stroke-width="2" stroke-linecap="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/></svg>
    </div>
    {# Corps du texte — lignes skeleton #}
    <div style="display:flex;flex-direction:column;gap:2.5px;padding:2px 0;">
      <div style="height:5px;background:#E2E8F0;border-radius:3px;width:100%;"></div>
      <div style="height:5px;background:#E2E8F0;border-radius:3px;width:97%;"></div>
      <div style="height:5px;background:#E2E8F0;border-radius:3px;width:100%;"></div>
      <div style="height:5px;background:#E2E8F0;border-radius:3px;width:90%;"></div>
      <div style="height:5px;background:#E2E8F0;border-radius:3px;width:95%;"></div>
      <div style="height:5px;background:#E2E8F0;border-radius:3px;width:70%;"></div>
    </div>
    {# Audio player card #}
    <div style="border:1px solid #DDD6FE;border-radius:10px;padding:8px 10px;background:white;display:flex;flex-direction:column;gap:6px;">
      <div style="display:flex;align-items:center;gap:8px;">
        <div style="width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#6D28D9);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
          <svg width="8" height="9" viewBox="0 0 10 12" fill="white"><path d="M1 1.5l8 4.5-8 4.5V1.5z"/></svg>
        </div>
        <div style="flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;">
          <div style="display:flex;align-items:center;justify-content:space-between;">
            <span style="font-size:8px;font-weight:700;color:#1B2D4F;">Audio généré</span>
            <span style="font-size:6.5px;color:#9CA3AF;font-family:monospace;">0:00 / 1:01</span>
          </div>
          <div style="height:3px;background:#EDE9FE;border-radius:999px;overflow:hidden;">
            <div style="width:0;height:100%;background:#7C3AED;border-radius:999px;"></div>
          </div>
          <div style="display:flex;align-items:center;gap:3px;">
            <span style="font-size:6.5px;color:#9CA3AF;">Généré avec</span>
            <span style="font-size:6.5px;font-weight:700;color:#7C3AED;">Castia</span>
          </div>
        </div>
        <div style="display:flex;align-items:flex-end;gap:1.5px;height:20px;flex-shrink:0;">
          <div style="width:2px;height:35%;background:#C4B5FD;border-radius:1px;"></div>
          <div style="width:2px;height:65%;background:#C4B5FD;border-radius:1px;"></div>
          <div style="width:2px;height:50%;background:#C4B5FD;border-radius:1px;"></div>
          <div style="width:2px;height:90%;background:#C4B5FD;border-radius:1px;"></div>
          <div style="width:2px;height:42%;background:#C4B5FD;border-radius:1px;"></div>
          <div style="width:2px;height:75%;background:#C4B5FD;border-radius:1px;"></div>
          <div style="width:2px;height:55%;background:#C4B5FD;border-radius:1px;"></div>
          <div style="width:2px;height:80%;background:#C4B5FD;border-radius:1px;"></div>
          <div style="width:2px;height:45%;background:#C4B5FD;border-radius:1px;"></div>
        </div>
      </div>
      {# Boutons actions #}
      <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:5px;border-top:1px solid #F3F4F6;">
        <div style="display:flex;align-items:center;gap:3px;">
          <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#6B7280" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          <span style="font-size:7px;color:#6B7280;font-weight:600;">Télécharger</span>
        </div>
        <div style="display:flex;align-items:center;gap:3px;">
          <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#6B7280" stroke-width="2" stroke-linecap="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
          <span style="font-size:7px;color:#6B7280;font-weight:600;">Régénérer</span>
        </div>
      </div>
    </div>
  </div>
</div>
    {% endset %}

    {% set moodiaVisualExport %}
<div style="border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb, var(--c1) 14%, transparent);box-shadow:0 24px 80px color-mix(in srgb, var(--c1) 10%, transparent), 0 4px 16px rgba(0,0,0,0.04);">
  <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F4FA;border-bottom:1px solid color-mix(in srgb, var(--c1) 8%, transparent);">
    <div style="display:flex;gap:5px;">
      <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;"></span>
    </div>
    <div style="flex:1;display:flex;justify-content:center;padding:0 16px;">
      <div style="display:flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:white;border:1px solid color-mix(in srgb, var(--c1) 12%, transparent);font-family:monospace;font-size:0.6rem;color:#8494B2;max-width:200px;width:100%;justify-content:center;">
        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;"></span>
        bubul.app/moodia/export
      </div>
    </div>
  </div>
  <div class="flex items-center justify-center py-6 px-4 min-h-[230px]" style="background:#F5F5F5">
  <div class="bg-white rounded-[20px] py-5 px-[22px] w-full max-w-[300px] shadow-[0_12px_40px_rgba(0,0,0,0.11)] border border-[#E8EDF5]">
    <div class="flex items-center gap-[11px] mb-3.5">
      <div class="w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0" style="background:{{ c1 }}15;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M12 3v13M12 16l-4-4m4 4l4-4M4 18v1a2 2 0 002 2h12a2 2 0 002-2v-1" stroke="{{ c1 }}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div>
        <div class="text-[13px] font-bold text-[#1B2D4F] mb-0.5">Export du cours</div>
        <div class="text-[10px] text-[#6B7280]">Génération du fichier LMS</div>
      </div>
    </div>
    <div class="h-px mb-3" style="background:#F5F5F5"></div>
    <div class="h-[9px] rounded-full overflow-hidden mb-2" style="background:{{ c1 }}15;">
      <div class="w-[15%] h-full rounded-full" style="background:linear-gradient(90deg,{{ c1dark }},{{ c1 }},{{ c2 }});"></div>
    </div>
    <div class="flex items-center justify-between mb-3">
      <span class="text-[10px] text-[#4A5E80]">Génération audio 1/1</span>
      <span class="text-[10px] font-bold" style="color:{{ c1 }};">15%</span>
    </div>
    <div class="text-[9px] text-[#9CA3AF] leading-relaxed">
      Votre cours est converti au format LMS (.mbz). Ce fichier pourra être importé directement dans votre plateforme.
    </div>
  </div>
  </div>
</div>
    {% endset %}

    {% set moodiaFeatures = [
        {
            tagLabel: 'Configuration du cours',
            titleHtml: 'Un PDF, un sujet, ou <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">partez de zéro</span>',
            desc: 'Vous avez un support existant ? Importez votre PDF. Vous partez de rien ? Donnez un sujet à l\'IA et elle crée le cours complet. Dans les deux cas, Moodia structure tout le cours pour votre LMS.',
            bullets: ['Import PDF ou génération IA depuis un simple sujet', 'Structure, chapitres et objectifs automatiques', '1h de formation générée en ~1 min d\'attente'],
            accentColor: c1,
            visualHtml: moodiaVisualConfig
        },
        {
            tagLabel: 'Génération en direct',
            titleHtml: 'Lancez. Votre cours se <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">construit en direct.</span>',
            desc: 'Tout se crée sous vos yeux, en temps réel. En quelques minutes, votre cours est complet — chapitres, quiz, audio — structuré et prêt à être déposé sur votre plateforme.',
            bullets: ['Le cours se construit devant vous, minute par minute', 'Chapitres, quiz et audio inclus d\'emblée', 'Prêt à déposer sur votre plateforme, sans retouche'],
            accentColor: c1,
            visualHtml: moodiaVisualGeneration
        },
        {
            tagLabel: 'Apprentissage varié',
            titleHtml: 'De l\'audio directement <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">dans vos sections</span>',
            desc: 'Moodia intègre des contenus audio au fil du cours pour varier les modes d\'apprentissage. Lire, puis écouter — vos apprenants retiennent mieux quand le format change.',
            bullets: ['Audio intégré dans les sections du cours', 'Voix naturelles via ElevenLabs V3', 'Alterner lecture et écoute améliore la rétention'],
            accentColor: c1,
            visualHtml: moodiaVisualAudio
        },
        {
            tagLabel: 'Export & déploiement',
            titleHtml: 'Fichier .mbz. <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">Zéro configuration.</span>',
            desc: 'Le cours généré s\'exporte au format natif LMS. Importez-le en un clic — sections, activités, quiz, audio, tout est en place sans rien toucher.',
            bullets: ['Format .mbz natif LMS', 'Import en un clic sur votre LMS', 'Compatible avec la plupart des versions LMS'],
            accentColor: c1,
            visualHtml: moodiaVisualExport
        }
    ] %}

    {% include '_organisms/landing/features-alternating.html.twig' with {
        features: moodiaFeatures,
        class: 'bg-white'
    } only %}

    {# ================================================
       4. MARQUEE — masqué temporairement (pas encore d'entreprises)
       ================================================ #}
    {# {% include '_organisms/landing/marquee.html.twig' with {
        id: 'moodia-marquee',
        bgColor: '{{ c1 }}'
    } only %} #}

    {# ================================================
       5. BEFORE / AFTER — inline (contenu spécifique Moodia)
       ================================================ #}
    <section class="py-14 lg:py-24 relative overflow-hidden" style="background: color-mix(in srgb, var(--c1) 6%, white);" id="compare">
        <div class="max-w-[1280px] mx-auto px-6 lg:px-8">

            <div class="flex justify-center mb-4">
                <span class="inline-flex items-center gap-1.5 text-[0.72rem] font-semibold uppercase tracking-[0.1em] font-mono" style="color: var(--c1);">
                    <span class="w-1.5 h-1.5 rounded-full inline-block" style="background: var(--c1);"></span>
                    Avant / après
                </span>
            </div>
            <h2 class="text-center text-[clamp(1.6rem,3vw,2.5rem)] font-bold tracking-[-0.03em] leading-[1.15] mb-4 max-w-[600px] mx-auto text-[#1B2D4F]">
                La différence est <span style="-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-image:linear-gradient(90deg, var(--c1), var(--c2));">immédiate</span>
            </h2>
            <p class="text-center text-[0.95rem] text-[#4A5E80] leading-[1.7] max-w-[480px] mx-auto mb-10 lg:mb-14">
                Chaque ligne de votre ancien workflow, transformée.
            </p>

            {# Lignes de comparaison #}
            {% set compareRows = [
                { before: 'Rédiger le contenu du cours',       tb: '4–6h',  after: 'Un PDF ou un simple sujet suffit',          ta: '10 sec' },
                { before: 'Copier-coller entre 4 outils',      tb: '1–2h',  after: 'Tout généré dans une seule interface',       ta: '~7 min' },
                { before: 'Quiz rédigés un par un',            tb: '2–3h',  after: 'Quiz créés par l\'IA, éditables à la main',  ta: 'inclus'  },
                { before: 'Mise en page manuelle dans le LMS', tb: '1–2h',  after: 'Export .mbz natif, zéro configuration',     ta: '30 sec' },
                { before: 'Aucun support audio',               tb: '—',     after: 'Audio intégré dans les sections',            ta: 'inclus'  }
            ] %}

            <div class="max-w-[900px] mx-auto">

                {# Desktop : tableau continu #}
                <div class="hidden sm:block rounded-2xl overflow-hidden shadow-[0_4px_32px_rgba(0,0,0,0.07)] border border-[#E4EBF5]">
                    <div class="grid grid-cols-2 text-[0.7rem] font-bold uppercase tracking-[0.1em] font-mono">
                        <div class="flex items-center gap-2 px-5 py-3 bg-[#F6F8FB] border-b border-r border-[#E4EBF5] text-[#9BAABF]">
                            <span class="w-5 h-5 rounded-full bg-[#E8EDF5] flex items-center justify-center text-[0.65rem] font-black text-[#9BAABF] shrink-0">✕</span>
                            Sans Moodia
                        </div>
                        <div class="flex items-center gap-2 px-5 py-3 border-b border-[#E4EBF5] text-white" style="background: var(--c1);">
                            <span class="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center text-[0.65rem] font-black shrink-0">✓</span>
                            Avec Moodia
                        </div>
                    </div>
                    {% for row in compareRows %}
                    <div class="grid grid-cols-2 reveal border-b border-[#E4EBF5]" style="transition-delay: {{ loop.index0 * 0.08 }}s;">
                        <div class="flex items-center justify-between gap-3 px-5 py-4 bg-white border-r border-[#E4EBF5]">
                            <span class="text-[0.84rem] text-[#A0AEBB] cr-cross leading-snug">{{ row.before }}</span>
                            <span class="text-[0.68rem] font-semibold text-[#C8D3DE] font-mono shrink-0 whitespace-nowrap">{{ row.tb }}</span>
                        </div>
                        <div class="flex items-center justify-between gap-3 px-5 py-4" style="background: color-mix(in srgb, var(--c1) 5%, white);">
                            <span class="text-[0.84rem] font-medium text-[#1B2D4F] leading-snug">{{ row.after }}</span>
                            <span class="text-[0.62rem] font-bold px-2.5 py-1 rounded-full font-mono text-white shrink-0 whitespace-nowrap" style="background: var(--c1);">{{ row.ta }}</span>
                        </div>
                    </div>
                    {% endfor %}
                    <div class="grid grid-cols-2">
                        <div class="flex items-center gap-3 px-5 py-5 bg-[#F6F8FB] border-r border-t border-[#E4EBF5]">
                            <span class="text-[1.6rem] font-black tracking-[-0.04em] text-[#C8D3DE] line-through leading-none">~12h</span>
                            <span class="text-[0.7rem] text-[#B0BDCF] font-mono leading-tight">temps<br>total</span>
                        </div>
                        <div class="flex items-center gap-3 px-5 py-5 border-t border-[#E4EBF5]" style="background: color-mix(in srgb, var(--c1) 8%, white);">
                            <span class="text-[1.6rem] font-black tracking-[-0.04em] leading-none" style="color: var(--c1);">~20 min</span>
                            <span class="text-[0.7rem] font-mono leading-tight" style="color: color-mix(in srgb, var(--c1) 60%, #4A5E80);">avec<br>Moodia</span>
                        </div>
                    </div>
                </div>

                {# Mobile : cartes empilées avec gap #}
                <div class="flex flex-col gap-3 sm:hidden">
                    {% for row in compareRows %}
                    <div class="reveal rounded-2xl overflow-hidden border border-[#E4EBF5] shadow-[0_2px_8px_rgba(0,0,0,0.04)]" style="transition-delay: {{ loop.index0 * 0.08 }}s;">
                        <div class="flex flex-col gap-1 px-4 py-3 bg-white border-b border-[#E4EBF5]">
                            <span class="text-[0.58rem] font-bold uppercase tracking-[0.1em] text-[#B0BDCF] font-mono">Sans Moodia</span>
                            <div class="flex items-center justify-between gap-3">
                                <span class="text-[0.84rem] text-[#A0AEBB] cr-cross leading-snug">{{ row.before }}</span>
                                <span class="text-[0.68rem] font-semibold text-[#C8D3DE] font-mono shrink-0">{{ row.tb }}</span>
                            </div>
                        </div>
                        <div class="flex flex-col gap-1 px-4 py-3" style="background: color-mix(in srgb, var(--c1) 5%, white);">
                            <span class="text-[0.58rem] font-bold uppercase tracking-[0.1em] font-mono" style="color: var(--c1);">Avec Moodia</span>
                            <div class="flex items-center justify-between gap-3">
                                <span class="text-[0.84rem] font-medium text-[#1B2D4F] leading-snug">{{ row.after }}</span>
                                <span class="text-[0.62rem] font-bold px-2.5 py-1 rounded-full font-mono text-white shrink-0" style="background: var(--c1);">{{ row.ta }}</span>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    <div class="rounded-2xl overflow-hidden border shadow-[0_2px_12px_rgba(0,0,0,0.06)]" style="border-color: color-mix(in srgb, var(--c1) 20%, #E4EBF5);">
                        <div class="flex items-center gap-3 px-4 py-4 bg-[#F6F8FB] border-b border-[#E4EBF5]">
                            <span class="text-[0.58rem] font-bold uppercase tracking-[0.1em] text-[#B0BDCF] font-mono mr-1">Sans Moodia</span>
                            <span class="text-[1.4rem] font-black tracking-[-0.04em] text-[#C8D3DE] line-through leading-none">~12h</span>
                        </div>
                        <div class="flex items-center gap-3 px-4 py-4" style="background: color-mix(in srgb, var(--c1) 8%, white);">
                            <span class="text-[0.58rem] font-bold uppercase tracking-[0.1em] font-mono mr-1" style="color: var(--c1);">Avec Moodia</span>
                            <span class="text-[1.4rem] font-black tracking-[-0.04em] leading-none" style="color: var(--c1);">~20 min</span>
                        </div>
                    </div>
                </div>

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

    {# ================================================
       6. AUTRES OUTILS — organisme tools-ecosystem
       ================================================ #}
    {% include '_organisms/landing/tools-ecosystem.html.twig' with {
        titleHtml: 'Moodia n\'est que <span class="bg-gradient-to-r from-gradient-start via-gradient-middle to-gradient-end bg-clip-text text-transparent">le début</span>',
        exclude: ['moodia', 'sam'],
        bgClass: 'bg-white',
    } only %}

</div>{# end .moodia-page #}

{# ===== FAQ ===== #}
{% set moodiaFaq = [
    {
        question: "Comment fonctionne la génération de cours ?",
        answer: "Importez votre PDF ou décrivez votre sujet, configurez le titre, votre public, la durée, la langue et le niveau. Moodia génère automatiquement le plan, les sections, les activités pédagogiques et les quiz. Le tout en quelques minutes.",
        icon: 'book'
    },
    {
        question: "Quels formats de fichiers sont acceptés ?",
        answer: "Moodia accepte les <strong>fichiers PDF</strong> jusqu'à 20 Mo. Vous pouvez aussi partir d'un sujet libre en texte sans aucun document.",
        icon: 'document'
    },
    {
        question: "Combien de temps prend la génération ?",
        answer: "Entre 2 et 8 minutes selon la taille du document et le nombre de sections. La génération se fait en temps réel — vous voyez le cours se construire sous vos yeux.",
        icon: 'bolt'
    },
    {
        question: "Puis-je déployer directement sur mon LMS ?",
        answer: "Oui. Moodia peut exporter sur votre LMS au format <strong>.mbz</strong>.",
        icon: 'upload'
    },
    {
        question: "Mes documents sont-ils stockés ?",
        answer: "Oui. Votre PDF est conservé sur nos serveurs pour vous permettre de <strong>rééditer et mettre à jour votre cours</strong> à tout moment. Vous pouvez supprimer vos fichiers depuis votre espace personnel.",
        icon: 'shield'
    },
    {
        question: "Qu'est-ce qu'un token ?",
        answer: "Les tokens sont l'unité de consommation IA sur Bubul. Chaque génération consomme des tokens selon la taille du cours. Votre solde est visible en temps réel depuis votre tableau de bord.",
        icon: 'chart'
    }
] %}
{% include '_organisms/landing/faq.html.twig' with { questions: moodiaFaq, tagline: 'Tout ce que vous devez savoir sur Moodia.', accentColor: c1, accentColorDark: c1dark } only %}

{# ===== Footer ===== #}
{% include '_organisms/landing/footer.html.twig' with {
    tagline: 'Moodia transforme vos PDF en cours LMS complets grâce à l\'IA — sections, quiz, audio, export .mbz ou déploiement API direct.'
} only %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
    (function () {
        'use strict';

        // Marquee Moodia
        var stats = [
            {v:'80+',          l:'formateurs utilisent Moodia'},
            {v:'~20 min',      l:'pour créer un cours complet'},
            {v:'.MBZ',         l:'compatible avec tous vos LMS'},
            {v:'RGPD',         l:'conforme dès le 1er jour'},
            {v:'Hébergé',      l:'en France & Allemagne'},
            {v:'0 donnée',     l:'utilisée pour l\'entraînement IA'},
            {v:'6 outils',     l:'dans une seule interface'},
            {v:'Bêta gratuite',l:'aucune carte bancaire'}
        ];
        var mq = document.getElementById('moodia-marquee');
        if (mq) {
            var html = stats.map(function(s) {
                return '<div style="display:flex;align-items:baseline;gap:10px;flex-shrink:0;">'
                     + '<span style="font-size:1.6rem;font-weight:700;letter-spacing:-0.02em;">' + s.v + '</span>'
                     + '<span style="font-size:0.88rem;opacity:0.7;">' + s.l + '</span></div>'
                     + '<div style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.25);flex-shrink:0;"></div>';
            }).join('');
            mq.innerHTML = html + html;
        }

        // Scroll reveal
        function initReveal() {
            var obs = new IntersectionObserver(function(entries) {
                entries.forEach(function(e) {
                    if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
                });
            }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
            document.querySelectorAll('.reveal').forEach(function(el) { obs.observe(el); });
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initReveal);
        } else {
            initReveal();
        }
        document.addEventListener('turbo:load', initReveal);

        // Smooth anchor scroll
        document.addEventListener('click', function(e) {
            var a = e.target.closest('a[href^="#"]');
            if (!a) return;
            var target = document.getElementById(a.getAttribute('href').slice(1));
            if (!target) return;
            e.preventDefault();
            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    })();
    </script>
{% endblock %}