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

{% block header_cta_label %}Essayer Monalisia{% endblock %}
{% block header_active_code %}monalisia{% endblock %}

{% set c1 = tool is not null and tool.colorPrimary is not null ? tool.colorPrimary : '#ED8600' %}
{% set c2 = tool is not null and tool.colorSecondary is not null ? tool.colorSecondary : '#FEFEFE' %}
{% set c3 = tool is not null and tool.colorBackground is not null ? tool.colorBackground : '#FFF7ED' %}
{% set c1dark = '#D97706' %}
{% set gtStyle = 'background:linear-gradient(135deg,' ~ c1 ~ ',' ~ c2 ~ ');-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;' %}

{% block title %}Monalisia — Générez des infographies IA depuis un texte ou un PDF | Bubul.app{% endblock %}

{% block meta_description %}Décrivez votre sujet ou importez un PDF. Monalisia génère une infographie professionnelle aux couleurs de votre charte en 60 secondes. Pipette couleurs, 3 formats PNG haute qualité. Bêta gratuite pour formateurs.{% endblock %}

{% block meta_keywords %}monalisia, générateur infographie ia, infographie pdf, création visuelle ia, infographie formation, design automatique ia, pipette couleurs, bubul{% endblock %}

{% block canonical %}https://bubul.app/outils/monalisia{% endblock %}

{% block og_title %}Monalisia — Un texte suffit. Monalisia fait l'infographie.{% endblock %}
{% block og_description %}Décrivez votre sujet ou importez un PDF. Monalisia génère une infographie structurée aux couleurs de votre charte en 1 minute. Bêta gratuite sur Bubul.app.{% endblock %}
{% block twitter_title %}Monalisia — Un texte suffit. Monalisia fait l'infographie.{% endblock %}
{% block twitter_description %}De votre texte à une infographie PNG prête à partager en 1 minute. Pipette couleurs, 3 formats, export haute qualité. Bêta gratuite.{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        html { scroll-behavior: smooth; }

        /* Reveal animations */
        .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }
        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }

        /* Mockup génération animations */
        @keyframes monSpin { to { transform: rotate(360deg); } }
        @keyframes monProgress { 0%,100% { width: 68%; } 50% { width: 84%; } }
        @keyframes monFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
        @keyframes monShimmer { 0%,100% { opacity:0.4; } 50% { opacity:0.9; } }

        /* Comparison grid — subgrid pour aligner les flèches */
        @media (min-width: 768px) {
            .comparison-grid {
                grid-template-rows: auto auto auto auto;
            }
            .comparison-card {
                grid-row: span 4;
                display: grid;
                grid-template-rows: subgrid;
            }
        }

        /* Skeleton shimmer */
        @keyframes sk { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
        .sk-m { background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%); background-size: 600px 100%; animation: sk 1.6s ease-in-out infinite; }

        /* ─────────────────────────────────────
           FEATURE 1 MOCKUP RESPONSIVE
        ───────────────────────────────────── */
        @media (max-width: 480px) {
            .mfd1-desc-hint { display: none !important; }
        }
        @media (max-width: 380px) {
            .mfd1-ai-btn { display: none !important; }
        }

        /* ─────────────────────────────────────
           FEATURE 2 MOCKUP RESPONSIVE
        ───────────────────────────────────── */
        @media (max-width: 480px) {
            .mfd2-swatch-label { display: none !important; }
            .mfd2-reset-btn { display: none !important; }
        }

        /* ─────────────────────────────────────
           FEATURE 3 MOCKUP RESPONSIVE
        ───────────────────────────────────── */
        @media (max-width: 480px) {
            .mfd3-formats { transform: scale(0.8); transform-origin: center top; margin-bottom: -20px; }
        }
        @media (max-width: 360px) {
            .mfd3-formats { transform: scale(0.65); margin-bottom: -40px; }
        }
    </style>
    <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=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500&family=Sora:wght@600;700;800&display=swap" rel="stylesheet">
{% endblock %}

{% block landing_content %}

{# ===== SCHEMA.ORG JSON-LD ===== #}
<script type="application/ld+json">
[
    {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Monalisia",
        "applicationCategory": "DesignApplication",
        "operatingSystem": "Web browser",
        "description": "Monalisia est le g\u00e9n\u00e9rateur d'infographies IA de Bubul. Cr\u00e9ez des visuels professionnels depuis un texte ou un PDF en moins d'une minute, avec des couleurs personnalis\u00e9es et 3 formats disponibles.",
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
        "featureList": [
            "G\u00e9n\u00e9ration d'infographie depuis un texte",
            "Import PDF jusqu'\u00e0 20 Mo",
            "Personnalisation des couleurs avec pipette",
            "Am\u00e9lioration du prompt par IA",
            "3 formats : Paysage, Portrait, Carr\u00e9",
            "Export PNG haute qualit\u00e9",
            "Galerie personnelle d'infographies"
        ],
        "creator": { "@type": "Organization", "name": "bubul.app", "url": "https://bubul.app" }
    },
    {
        "@context": "https://schema.org",
        "@type": "HowTo",
        "name": "Comment cr\u00e9er une infographie avec Monalisia",
        "step": [
            { "@type": "HowToStep", "position": 1, "name": "D\u00e9crivez ou importez votre contenu", "text": "Saisissez votre sujet en texte libre (jusqu'\u00e0 5 000 caract\u00e8res) ou importez un document PDF." },
            { "@type": "HowToStep", "position": 2, "name": "Configurez vos couleurs", "text": "Utilisez la pipette pour extraire les couleurs de vos visuels existants, ou choisissez manuellement vos couleurs primaire et secondaire." },
            { "@type": "HowToStep", "position": 3, "name": "Choisissez votre format", "text": "S\u00e9lectionnez Paysage (1536\u00d71024), Portrait (1024\u00d71536) ou Carr\u00e9 (1024\u00d71024) selon votre usage." },
            { "@type": "HowToStep", "position": 4, "name": "G\u00e9n\u00e9rez et t\u00e9l\u00e9chargez", "text": "L'IA cr\u00e9e votre infographie en moins d'une minute. T\u00e9l\u00e9chargez le fichier PNG directement." }
        ]
    },
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
            {
                "@type": "Question",
                "name": "Qu'est-ce que Monalisia ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Monalisia est l'outil de g\u00e9n\u00e9ration d'infographies IA de Bubul. Il transforme votre texte ou PDF en infographie professionnelle en moins d'une minute, avec des couleurs personnalis\u00e9es et 3 formats disponibles." }
            },
            {
                "@type": "Question",
                "name": "Comment cr\u00e9er une infographie sans comp\u00e9tences en design ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Avec Monalisia, il suffit de d\u00e9crire votre sujet en texte ou d'importer un PDF. L'IA g\u00e9n\u00e8re automatiquement une infographie professionnelle. Aucune comp\u00e9tence en design graphique n'est requise." }
            },
            {
                "@type": "Question",
                "name": "Peut-on g\u00e9n\u00e9rer une infographie depuis un PDF ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Oui. Importez un document PDF (jusqu'\u00e0 20 Mo) et Monalisia en extrait le contenu pour g\u00e9n\u00e9rer une infographie adapt\u00e9e. Id\u00e9al pour transformer vos supports de formation existants." }
            },
            {
                "@type": "Question",
                "name": "Comment adapter les couleurs \u00e0 ma charte graphique ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Monalisia propose une pipette (eyedropper) qui identifie les couleurs directement depuis vos images ou logos. Vous pouvez aussi saisir manuellement vos couleurs primaire et secondaire via un s\u00e9lecteur de couleurs." }
            },
            {
                "@type": "Question",
                "name": "Dans quel format sont t\u00e9l\u00e9charg\u00e9es les infographies ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Les infographies sont export\u00e9es en PNG haute qualit\u00e9. Trois formats sont disponibles : Paysage (1536\u00d71024), Portrait (1024\u00d71536) et Carr\u00e9 (1024\u00d71024)." }
            },
            {
                "@type": "Question",
                "name": "Qu'est-ce qu'un token et combien en faut-il ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Les tokens sont l'unit\u00e9 de consommation IA sur Bubul. La g\u00e9n\u00e9ration d'une infographie consomme des tokens. Un quota est offert \u00e0 l'inscription en b\u00eata. Vous suivez votre consommation depuis votre tableau de bord." }
            }
        ]
    }
]
</script>

<div class="monalisia-page" style="--c1: {{ c1 }}; --c2: {{ c2 }}; --c3: {{ c3 }};">

    {# ================================================
       1. HERO — organism hero-tool
       ================================================ #}
    {% set monalisiaHeroMockup %}
            {# Carte principale #}
            <div style="border-radius: 16px; overflow: hidden; border: 1px solid {{ c1 }}1f; box-shadow: 0 24px 80px {{ c1 }}1a, 0 4px 16px rgba(0,0,0,0.04); font-family: -apple-system, BlinkMacSystemFont, sans-serif;">

                {# Barre navigateur #}
                <div style="display:flex; align-items:center; gap:8px; padding:10px 16px; background:#F0F4FA; border-bottom:1px solid {{ c1 }}14;">
                    <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:4px 12px; border-radius:999px; background:white; border:1px solid {{ c1 }}1f; font-family:monospace; font-size:0.68rem; color:#8494B2; max-width:240px; width:100%; justify-content:center;">
                            <span style="width:6px; height:6px; border-radius:50%; background:#27C93F; flex-shrink:0;"></span>
                            bubul.app/monalisia
                        </div>
                    </div>
                </div>

                {# Contenu de l'app #}
                <div style="background:#F4F6FA; padding:8px; display:flex; flex-direction:column; gap:5px;">

                    {# Header de l'app #}
                    <div style="display:flex; align-items:center; justify-content:space-between; background:white; border-radius:10px; padding:7px 10px; border:1px solid #ECEEF2;">
                        <div style="display:flex; align-items:center; gap:7px;">
                            <div style="width:22px; height:22px; border-radius:7px; background:{{ c1 }}18; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-monalisia', size: 'xs', colorPrimary: c1, colorSecondary: c2, opacitySecondary: '0.4' } only %}
                            </div>
                            <div>
                                <div style="font-size:12px; font-weight:800; color:#1B2D4F;">Monalisia</div>
                                <div style="font-size:8px; color:#8494B2;">Transformez vos idées en infographies</div>
                            </div>
                        </div>
                        <div style="display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:6px; background:linear-gradient(135deg, {{ c1 }}, {{ c2 }}); cursor:pointer;">
                            <svg width="7" height="7" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="5" r="3" stroke="white" stroke-width="1.5"/><path d="M2 10c0-2.2 1.8-4 4-4s4 1.8 4 4" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>
                            <span style="font-size:9px; font-weight:700; color:white;">Mes infographies</span>
                        </div>
                    </div>

                    {# Section 1 — Description #}
                    <div style="background:white; border-radius:10px; border:1px solid #ECEEF2; overflow:hidden;">
                        {# Tabs Texte / PDF #}
                        <div style="display:flex; border-bottom:1px solid #ECEEF2;">
                            <div style="flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:5px 8px; border-bottom:2px solid {{ c1 }}; border-right:1px solid #ECEEF2;">
                                <svg width="7" height="7" viewBox="0 0 12 12" fill="none"><path d="M2 9.5L8.5 3a1.5 1.5 0 0 1 2 2L4 11.5H2V9.5z" stroke="{{ c1 }}" stroke-width="1.5" stroke-linecap="round"/></svg>
                                <span style="font-size:10px; font-weight:600; color:{{ c1 }};">Texte</span>
                            </div>
                            <div style="flex:1; display:flex; align-items:center; justify-content:center; gap:4px; padding:5px 8px; background:#FAFBFC;">
                                <svg width="7" height="7" viewBox="0 0 12 12" fill="none"><rect x="2" y="1" width="8" height="10" rx="1.5" stroke="#B0BDCF" stroke-width="1.5"/><path d="M4 4h4M4 6.5h4M4 9h2" stroke="#B0BDCF" stroke-width="1.2" stroke-linecap="round"/></svg>
                                <span style="font-size:10px; font-weight:500; color:#B0BDCF;">PDF</span>
                            </div>
                        </div>
                        <div style="padding:7px 8px;">
                            {# Label + bouton IA #}
                            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:5px;">
                                <div style="display:flex; align-items:center; gap:4px;">
                                    <svg width="7" height="7" viewBox="0 0 12 12" fill="none"><path d="M2 9.5L8.5 3a1.5 1.5 0 0 1 2 2L4 11.5H2V9.5z" stroke="{{ c1 }}" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    <span style="font-size:11px; font-weight:700; color:#1B2D4F;">Description</span>
                                    <span style="font-size:8px; color:#8494B2;">— Décrivez le contenu de votre infographie</span>
                                </div>
                                <div style="display:flex; align-items:center; gap:3px; padding:3px 7px; border-radius:6px; background:#7C3AED14; border:1px solid #7C3AED22; flex-shrink:0;">
                                    <svg width="7" height="7" viewBox="0 0 12 12" fill="none"><path d="M2 9.5L8.5 3a1.5 1.5 0 0 1 2 2L4 11.5H2V9.5z" stroke="#7C3AED" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    <span style="font-size:9px; font-weight:600; color:#7C3AED;">Améliorer avec l'IA</span>
                                </div>
                            </div>
                            {# Textarea #}
                            <div style="border:1px solid #ECEEF2; border-radius:7px; padding:6px 8px; background:#FAFBFC;">
                                <div style="font-size:9px; color:#C0CADB; line-height:1.65; margin-bottom:6px;">Décrivez le contenu de votre infographie ici.</div>
                                <div style="font-size:8px; color:#D0D9E8; line-height:1.6; font-style:italic;">Ex: Les 5 étapes clés de la méthode scientifique, avec des exemples concrets pour chaque étape...</div>
                                <div style="text-align:right; margin-top:8px;">
                                    <span style="font-size:8px; color:#C8D2E0; font-family:monospace;">0 / 5000</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Section 2 — Couleurs #}
                    <div style="background:white; border-radius:10px; border:1px solid #ECEEF2; padding:7px 8px;">
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;">
                            <div style="display:flex; align-items:center; gap:5px;">
                                <div style="width:16px; height:16px; border-radius:5px; background:{{ c1 }}18; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                                    <svg width="8" height="8" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="3.5" stroke="{{ c1 }}" stroke-width="1.5"/><circle cx="6" cy="6" r="1" fill="{{ c1 }}"/></svg>
                                </div>
                                <div>
                                    <div style="font-size:11px; font-weight:700; color:#1B2D4F;">Couleurs</div>
                                    <div style="font-size:8px; color:#8494B2;">Personnalisez les couleurs de votre infographie</div>
                                </div>
                            </div>
                            <div style="display:flex; align-items:center; gap:3px; flex-shrink:0;">
                                <svg width="7" height="7" viewBox="0 0 12 12" fill="none"><path d="M10 6A4 4 0 1 1 6 2" stroke="#8494B2" stroke-width="1.5" stroke-linecap="round"/><path d="M10 2v3H7" stroke="#8494B2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <span style="font-size:9px; color:#8494B2;">Réinitialiser</span>
                            </div>
                        </div>
                        {# Couleur principale / secondaire #}
                        <div style="display:flex; gap:5px; margin-bottom:6px;">
                            <div style="flex:1; display:flex; align-items:center; gap:5px; padding:5px 7px; border-radius:7px; border:1px solid {{ c1 }}30; background:{{ c1 }}06;">
                                <div style="width:14px; height:14px; border-radius:4px; background:{{ c1 }}; flex-shrink:0; border:1.5px solid {{ c1 }}55;"></div>
                                <div>
                                    <div style="font-size:9px; font-weight:600; color:#1B2D4F;">Principale</div>
                                    <div style="font-size:8px; color:#8494B2; font-family:monospace;">{{ c1 }}</div>
                                </div>
                            </div>
                            <div style="flex:1; display:flex; align-items:center; gap:5px; padding:5px 7px; border-radius:7px; border:1px solid #ECEEF2; background:#FAFBFC;">
                                <div style="width:14px; height:14px; border-radius:4px; background:{{ c2 }}; flex-shrink:0; border:1.5px solid {{ c2 }}55;"></div>
                                <div>
                                    <div style="font-size:9px; font-weight:600; color:#1B2D4F;">Secondaire</div>
                                    <div style="font-size:8px; color:#8494B2; font-family:monospace;">{{ c2 }}</div>
                                </div>
                            </div>
                        </div>
                        {# Bouton Identifier mes couleurs #}
                        <div style="display:flex; align-items:center; justify-content:center; gap:5px; padding:5px; border-radius:7px; background:linear-gradient(135deg, {{ c1 }}, {{ c2 }}); cursor:pointer;">
                            <svg width="8" height="8" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="4" stroke="white" stroke-width="1.5"/><circle cx="6" cy="6" r="1.5" fill="white"/><path d="M6 2v1M6 9v1M2 6h1M9 6h1" stroke="white" stroke-width="1" stroke-linecap="round"/></svg>
                            <span style="font-size:10px; font-weight:700; color:white;">Identifier mes couleurs</span>
                        </div>
                    </div>

                    {# Section 3 — Format #}
                    <div style="background:white; border-radius:10px; border:1px solid #ECEEF2; padding:7px 8px;">
                        <div style="display:flex; align-items:center; gap:5px; margin-bottom:6px;">
                            <div style="width:16px; height:16px; border-radius:5px; background:{{ c1 }}18; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
                                <svg width="8" height="8" viewBox="0 0 12 12" fill="none"><rect x="1" y="2.5" width="10" height="7" rx="1.5" stroke="{{ c1 }}" stroke-width="1.5"/></svg>
                            </div>
                            <div>
                                <div style="font-size:11px; font-weight:700; color:#1B2D4F;">Format</div>
                                <div style="font-size:8px; color:#8494B2;">Choisissez les dimensions de votre infographie</div>
                            </div>
                        </div>
                        <div style="display:flex; gap:4px;">
                            {# Paysage — sélectionné #}
                            <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; border-radius:7px; border:1.5px solid {{ c1 }}; background:{{ c1 }}08; position:relative;">
                                <div style="position:absolute; top:3px; right:3px; width:8px; height:8px; border-radius:50%; background:{{ c1 }}; display:flex; align-items:center; justify-content:center;">
                                    <svg width="5" height="5" viewBox="0 0 6 6" fill="none"><path d="M1 3l1.5 1.5L5 1.5" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </div>
                                <div style="width:20px; height:13px; border-radius:3px; border:1.5px solid {{ c1 }}66; background:{{ c1 }}10; margin-top:4px;"></div>
                                <div style="font-size:9px; font-weight:700; color:{{ c1 }};">Paysage</div>
                                <div style="font-size:7px; color:#8494B2; font-family:monospace;">1536×1024</div>
                            </div>
                            {# Portrait #}
                            <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; border-radius:7px; border:1px solid #ECEEF2; background:#FAFBFC;">
                                <div style="width:13px; height:18px; border-radius:3px; border:1.5px solid #D0D7E3; background:#F5F7FA; margin-top:2px;"></div>
                                <div style="font-size:9px; font-weight:600; color:#4A5E80;">Portrait</div>
                                <div style="font-size:7px; color:#8494B2; font-family:monospace;">1024×1536</div>
                            </div>
                            {# Carré #}
                            <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; border-radius:7px; border:1px solid #ECEEF2; background:#FAFBFC;">
                                <div style="width:16px; height:16px; border-radius:3px; border:1.5px solid #D0D7E3; background:#F5F7FA; margin-top:2px;"></div>
                                <div style="font-size:9px; font-weight:600; color:#4A5E80;">Carré</div>
                                <div style="font-size:7px; color:#8494B2; font-family:monospace;">1024×1024</div>
                            </div>
                        </div>
                    </div>

                    {# Bottom bar — Astuce + Générer #}
                    <div style="display:flex; align-items:center; justify-content:space-between; background:white; border-radius:10px; border:1px solid #ECEEF2; padding:7px 10px; gap:8px;">
                        <div style="display:flex; align-items:flex-start; gap:5px; min-width:0;">
                            <div style="width:14px; height:14px; border-radius:4px; background:{{ c1 }}18; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;">
                                <svg width="8" height="8" viewBox="0 0 12 12" fill="none"><path d="M6 1l1.5 3 3.5.5-2.5 2.5.5 3.5L6 9l-3 1.5.5-3.5L1 4.5 4.5 4z" fill="{{ c1 }}"/></svg>
                            </div>
                            <div style="font-size:8px; color:#4A5E80; line-height:1.55;"><strong style="color:{{ c1 }};">Astuce :</strong> Soyez précis et structurez votre description en points clés pour obtenir une infographie plus lisible.</div>
                        </div>
                        <div style="display:flex; align-items:center; gap:4px; padding:5px 10px; border-radius:7px; background:linear-gradient(135deg, {{ c1 }}, {{ c2 }}); cursor:pointer; flex-shrink:0;">
                            <svg width="8" height="8" viewBox="0 0 12 12" fill="none"><path d="M2 9.5L8.5 3a1.5 1.5 0 0 1 2 2L4 11.5H2V9.5z" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>
                            <span style="font-size:10px; font-weight:700; color:white;">Générer l'infographie</span>
                        </div>
                    </div>

                </div>{# end app content #}
            </div>{# end carte principale #}
    {% endset %}

    {% include '_organisms/landing/hero-tool.html.twig' with {
        toolName: 'Monalisia',
        toolIcon: 'bubul-monalisia',
        toolColor: 'primary',
        h1: 'Vous décrivez.<br><span style="' ~ gtStyle ~ '">Monalisia visualise.</span>',
        subtitle: 'Décrivez votre sujet ou importez un PDF. Monalisia structure le contenu, applique vos couleurs et génère un <code class="text-[0.85em] px-1 py-0.5 rounded font-mono" style="background: ' ~ c3 ~ '; color: ' ~ c1 ~ ';">.png</code> professionnel prêt à partager — sans aucune compétence en design.',
        badge: 'Générateur d\'infographies IA',
        ctaUrl: path('app_login'),
        ctaLabel: 'Créer mon infographie',
        pills: [],
        gradientStart: c1,
        gradientEnd: c2,
        visualHtml: monalisiaHeroMockup
    } only %}

{# ===== 3. PROBLEM / SOLUTION ===== #}
<section class="relative py-20 lg:py-28 overflow-hidden" style="background: color-mix(in srgb, {{ c3 }} 30%, white);">

    {# Orbes décoratives #}
    <div class="absolute -top-40 -right-40 w-[500px] h-[500px] rounded-full blur-[100px] pointer-events-none" style="background: radial-gradient(circle, {{ c1 }}08 0%, transparent 70%);"></div>
    <div class="absolute -bottom-24 -left-24 w-[350px] h-[350px] rounded-full blur-[80px] pointer-events-none" style="background: radial-gradient(circle, {{ c2 }}07 0%, transparent 70%);"></div>

    <div class="relative z-10 max-w-[1280px] mx-auto px-6 lg:px-8">

        {# Header #}
        <div class="text-center mb-14 reveal">
            <span class="inline-flex items-center gap-1.5 text-[0.72rem] font-semibold uppercase tracking-[0.1em] font-mono mb-5" style="color: {{ c1 }};">
                <span class="w-1.5 h-1.5 rounded-full inline-block" style="background: {{ c1 }};"></span>
                Avant / Après
            </span>
            <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold tracking-[-0.03em] leading-[1.15] text-[#1B2D4F] max-w-[660px] mx-auto">
                Pourquoi créer des infographies est si compliqué — et comment <span style="{{ gtStyle }}">Monalisia change la donne</span>
            </h2>
        </div>

        {# 3 cartes de comparaison avant / après #}
        <div class="comparison-grid grid grid-cols-1 md:grid-cols-3 gap-5 max-w-[960px] mx-auto">

            {% set comparisons = [
                {
                    problem: 'Créer visuellement prend des heures — sans logiciel de design, c\'est une impasse',
                    solution: 'Décrivez votre sujet en texte ou importez un PDF — l\'infographie se crée automatiquement'
                },
                {
                    problem: 'Adapter les couleurs à la charte de mon établissement est fastidieux',
                    solution: 'La pipette identifie vos couleurs en un clic depuis vos propres visuels'
                },
                {
                    problem: 'Les outils génériques demandent des compétences que je n\'ai pas',
                    solution: 'Aucune compétence requise. En moins d\'une minute, votre infographie est prête'
                }
            ] %}

            {% for item in comparisons %}
            <div class="comparison-card reveal group flex flex-col rounded-2xl overflow-hidden border border-gray-100 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_12px_40px_rgba(0,0,0,0.07)]"
                 style="transition-delay: {{ loop.index0 * 0.1 }}s;">

                {# Avant #}
                <div class="flex flex-col gap-3 p-6 pb-5">
                    <div class="flex items-center gap-2">
                        <div class="w-5 h-5 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                            <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M3 3l6 6M9 3l-6 6" stroke="#D10000" stroke-width="1.8" stroke-linecap="round"/></svg>
                        </div>
                        <span class="text-[0.62rem] font-bold uppercase tracking-[0.14em] text-red-400">Avant</span>
                    </div>
                    <p class="text-[0.875rem] leading-relaxed text-gray-400 line-through decoration-red-200 decoration-1">{{ item.problem }}</p>
                </div>

                {# Séparateur flèche #}
                <div class="mx-6 flex items-center gap-3">
                    <div class="flex-1 h-px" style="background: linear-gradient(90deg, transparent, {{ c1 }}28);"></div>
                    <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 transition-transform duration-300 group-hover:scale-110" style="background: {{ c1 }}14; border: 1px solid {{ c1 }}22;">
                        <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M6 2v8M3 7l3 3 3-3" stroke="{{ c1 }}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <div class="flex-1 h-px" style="background: linear-gradient(90deg, {{ c1 }}28, transparent);"></div>
                </div>

                {# Après #}
                <div class="flex flex-col gap-3 p-6 pt-5 flex-1">
                    <div class="flex items-center gap-2">
                        <div class="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0" style="background: {{ c1 }}20;">
                            <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M2 6l2.5 2.5L9.5 3" stroke="{{ c1 }}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                        <span class="text-[0.62rem] font-bold uppercase tracking-[0.14em]" style="color: {{ c1 }};">Avec Monalisia</span>
                    </div>
                    <p class="text-[0.875rem] leading-relaxed font-medium text-[#1B2D4F]">{{ item.solution }}</p>
                </div>

                {# Trait dégradé bas au hover #}
                <div class="h-[3px] opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="background: linear-gradient(90deg, {{ c1 }}, {{ c2 }});"></div>

            </div>
            {% endfor %}

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

{# ===== 4. FEATURES ===== #}
{% include '_organisms/landing/features-alternating.html.twig' with {
    class: 'bg-white',
    id: 'features',
    features: [
        {
            tagLabel: 'Saisie du contenu',
            titleHtml: 'Décrivez votre sujet ou <em class="not-italic" style="color:' ~ c1 ~ ';">importez un PDF</em>',
            desc: 'Saisissez votre sujet en texte libre (jusqu\'à 5 000 caractères) ou importez un document PDF (jusqu\'à 20 Mo). Monalisia transforme votre contenu en une infographie structurée et visuellement attractive.',
            bullets: [
                'Mode texte libre jusqu\'à 5 000 caractères',
                'Import PDF jusqu\'à 20 Mo avec extraction automatique',
                'Amélioration du prompt par l\'IA en un clic'
            ],
            accentColor: c1,
            visualHtml: '
<div style="border-radius:16px; overflow:hidden; border:1px solid ' ~ c1 ~ '1f; box-shadow:0 24px 80px ' ~ c1 ~ '1a, 0 4px 16px rgba(0,0,0,0.05); font-family:-apple-system,BlinkMacSystemFont,sans-serif;">

  <div style="display:flex; align-items:center; gap:8px; padding:10px 16px; background:#F0F4FA; border-bottom:1px solid ' ~ c1 ~ '14;">
    <div style="display:flex; gap:5px;">
      <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;display:inline-block;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;display:inline-block;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;display:inline-block;"></span>
    </div>
    <div style="flex:1;display:flex;justify-content:center;">
      <div style="display:flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:white;border:1px solid ' ~ c1 ~ '1f;font-family:monospace;font-size:10px;color:#8494B2;">
        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;display:inline-block;"></span>
        bubul.app/monalisia
      </div>
    </div>
  </div>

  <div style="background:#F4F6FA; padding:14px; display:flex; flex-direction:column; gap:10px;">

    <div style="background:white; border-radius:12px; border:1px solid #ECEEF2; overflow:hidden;">
      <div style="display:flex; border-bottom:1px solid #ECEEF2;">
        <div style="flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-bottom:2px solid ' ~ c1 ~ ';border-right:1px solid #ECEEF2;">
          <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2 9.5L8.5 3a1.5 1.5 0 0 1 2 2L4 11.5H2V9.5z" stroke="' ~ c1 ~ '" stroke-width="1.5" stroke-linecap="round"/></svg>
          <span style="font-size:11px;font-weight:600;color:' ~ c1 ~ ';">Texte</span>
        </div>
        <div style="flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;background:#FAFBFC;">
          <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><rect x="2" y="1" width="8" height="10" rx="1.5" stroke="#B0BDCF" stroke-width="1.5"/><path d="M4 4h4M4 6.5h4M4 9h2" stroke="#B0BDCF" stroke-width="1.2" stroke-linecap="round"/></svg>
          <span style="font-size:11px;font-weight:500;color:#B0BDCF;">PDF</span>
        </div>
      </div>

      <div style="padding:12px;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
          <div style="display:flex;align-items:center;gap:6px;">
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2 9.5L8.5 3a1.5 1.5 0 0 1 2 2L4 11.5H2V9.5z" stroke="' ~ c1 ~ '" stroke-width="1.5" stroke-linecap="round"/></svg>
            <span style="font-size:11px;font-weight:700;color:#1B2D4F;">Description</span>
            <span class="mfd1-desc-hint" style="font-size:9px;color:#8494B2;">— Décrivez le contenu de votre infographie</span>
          </div>
          <div class="mfd1-ai-btn" style="display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:7px;background:#7C3AED14;border:1px solid #7C3AED22;flex-shrink:0;">
            <svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M2 9.5L8.5 3a1.5 1.5 0 0 1 2 2L4 11.5H2V9.5z" stroke="#7C3AED" stroke-width="1.5" stroke-linecap="round"/></svg>
            <span style="font-size:9px;font-weight:600;color:#7C3AED;">Améliorer avec l\'IA</span>
          </div>
        </div>

        <div style="border:1px solid #ECEEF2;border-radius:9px;padding:10px 12px;background:#FAFBFC;min-height:80px;">
          <div style="font-size:10px;color:#C0CADB;margin-bottom:8px;">Décrivez le contenu de votre infographie ici.</div>
          <div style="font-size:9px;color:#D0D9E8;line-height:1.65;font-style:italic;">Ex: Les 5 étapes clés de la méthode scientifique, avec des exemples concrets pour chaque étape...</div>
          <div style="text-align:right;margin-top:10px;">
            <span style="font-size:9px;color:#C8D2E0;font-family:monospace;">0 / 5000</span>
          </div>
        </div>
      </div>
    </div>

    <div style="background:white;border-radius:12px;border:1px solid #ECEEF2;padding:12px;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
        <div style="display:flex;align-items:center;gap:8px;">
          <div style="width:20px;height:20px;border-radius:6px;background:' ~ c1 ~ '18;display:flex;align-items:center;justify-content:center;">
            <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="3.5" stroke="' ~ c1 ~ '" stroke-width="1.5"/><circle cx="6" cy="6" r="1" fill="' ~ c1 ~ '"/></svg>
          </div>
          <div>
            <div style="font-size:11px;font-weight:700;color:#1B2D4F;">Couleurs</div>
            <div style="font-size:9px;color:#8494B2;">Personnalisez les couleurs de votre infographie</div>
          </div>
        </div>
        <div style="display:flex;align-items:center;gap:4px;">
          <svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M10 6A4 4 0 1 1 6 2" stroke="#8494B2" stroke-width="1.5" stroke-linecap="round"/><path d="M10 2v3H7" stroke="#8494B2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <span style="font-size:9px;color:#8494B2;">Réinitialiser</span>
        </div>
      </div>
      <div style="display:flex;gap:8px;">
        <div style="flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;border:1px solid ' ~ c1 ~ '30;background:' ~ c1 ~ '06;">
          <div style="width:20px;height:20px;border-radius:5px;background:' ~ c1 ~ ';flex-shrink:0;border:1.5px solid ' ~ c1 ~ '55;"></div>
          <div>
            <div style="font-size:10px;font-weight:600;color:#1B2D4F;">Principale</div>
            <div style="font-size:9px;color:' ~ c1 ~ ';font-family:monospace;">' ~ c1 ~ '</div>
          </div>
        </div>
        <div style="flex:1;display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;border:1px solid #ECEEF2;background:#FAFBFC;">
          <div style="width:20px;height:20px;border-radius:5px;background:' ~ c2 ~ ';flex-shrink:0;border:1.5px solid ' ~ c2 ~ '55;"></div>
          <div>
            <div style="font-size:10px;font-weight:600;color:#1B2D4F;">Secondaire</div>
            <div style="font-size:9px;color:#8494B2;font-family:monospace;">' ~ c2 ~ '</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>'
        },
        {
            tagLabel: 'Personnalisation des couleurs',
            titleHtml: 'Vos couleurs en <em class="not-italic" style="color:' ~ c1 ~ ';">un seul clic</em>',
            desc: 'Utilisez la pipette pour sélectionner vos couleurs directement depuis une image. Saisissez également vos codes hex manuellement — votre charte graphique appliquée en quelques clics.',
            bullets: [
                'Pipette intelligente : capturez vos couleurs depuis n\'importe quelle image',
                'Deux couleurs paramétrables : primaire et secondaire',
                'Réinitialisation en un clic aux couleurs par défaut'
            ],
            accentColor: c1,
            visualHtml: '
<div style="border-radius:16px; overflow:hidden; border:1px solid ' ~ c1 ~ '1f; box-shadow:0 24px 80px ' ~ c1 ~ '1a, 0 4px 16px rgba(0,0,0,0.05); font-family:-apple-system,BlinkMacSystemFont,sans-serif;">

  <div style="display:flex; align-items:center; gap:8px; padding:10px 16px; background:#F0F4FA; border-bottom:1px solid ' ~ c1 ~ '14;">
    <div style="display:flex; gap:5px;">
      <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;display:inline-block;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;display:inline-block;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;display:inline-block;"></span>
    </div>
    <div style="flex:1;display:flex;justify-content:center;">
      <div style="display:flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:white;border:1px solid ' ~ c1 ~ '1f;font-family:monospace;font-size:10px;color:#8494B2;">
        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;display:inline-block;"></span>
        bubul.app/monalisia
      </div>
    </div>
  </div>

  <div id="monalisia-eyedropper" style="background:#0F1929; padding:10px; display:flex; flex-direction:column; gap:8px;">

    <div style="background:#1A2433; border-radius:10px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between;">
      <div style="display:flex;align-items:center;gap:8px;">
        <div class="ed-bubble" style="width:18px;height:18px;border-radius:50%;background:' ~ c1 ~ ';display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.3s;">
          <span class="ed-step-num" style="font-size:9px;font-weight:700;color:white;">1</span>
        </div>
        <span style="font-size:10px;color:#8BA4BF;">Cliquez sur la <strong class="ed-step-label" style="color:white;font-weight:700;">couleur principale</strong></span>
      </div>
      <div style="display:flex;align-items:center;gap:10px;">
        <div style="display:flex;align-items:center;gap:5px;">
          <div class="ed-sw-1" style="width:14px;height:14px;border-radius:3px;border:1.5px dashed #4A5E80;flex-shrink:0;transition:all 0.3s;"></div>
          <span class="mfd2-swatch-label" style="font-size:7px;color:#8BA4BF;font-weight:700;letter-spacing:0.08em;">PRINCIPALE</span>
        </div>
        <div style="display:flex;align-items:center;gap:5px;">
          <div class="ed-sw-2" style="width:14px;height:14px;border-radius:3px;border:1.5px dashed #4A5E80;flex-shrink:0;transition:all 0.3s;"></div>
          <span class="mfd2-swatch-label" style="font-size:7px;color:#8BA4BF;font-weight:700;letter-spacing:0.08em;">SECONDAIRE</span>
        </div>
        <div class="mfd2-reset-btn" style="width:18px;height:18px;border-radius:5px;background:#2A3B50;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
          <svg width="8" height="8" viewBox="0 0 10 10" fill="none"><path d="M2 2l6 6M8 2l-6 6" stroke="#8BA4BF" stroke-width="1.5" stroke-linecap="round"/></svg>
        </div>
      </div>
    </div>

    <div class="ed-img" style="border-radius:10px;overflow:hidden;position:relative;background:#EEF0F5;cursor:crosshair;user-select:none;">
      <div style="aspect-ratio:4/3;position:relative;padding:20px;display:flex;align-items:center;justify-content:center;">

        <div style="width:100%;border-radius:12px;overflow:hidden;box-shadow:0 6px 28px rgba(0,0,0,0.14);">
          <div style="background:' ~ c1 ~ ';padding:28px 20px;display:flex;align-items:center;gap:12px;">
            <div style="width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.25);flex-shrink:0;"></div>
            <div style="flex:1;display:flex;flex-direction:column;gap:7px;">
              <div style="height:8px;background:rgba(255,255,255,0.9);border-radius:4px;width:100px;"></div>
              <div style="height:5px;background:rgba(255,255,255,0.45);border-radius:3px;width:60px;"></div>
            </div>
          </div>
          <div style="background:' ~ c2 ~ ';padding:20px 20px;display:flex;flex-direction:column;gap:8px;">
            <div style="height:6px;background:rgba(0,0,0,0.08);border-radius:3px;width:85%;"></div>
            <div style="height:6px;background:rgba(0,0,0,0.06);border-radius:3px;width:60%;"></div>
            <div style="height:6px;background:rgba(0,0,0,0.05);border-radius:3px;width:72%;"></div>
          </div>
        </div>

        <div class="ed-crosshair" style="position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);pointer-events:none;transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);">
          <div class="ed-circle" style="width:48px;height:48px;border-radius:50%;background:' ~ c1 ~ ';border:3px solid white;box-shadow:0 2px 24px rgba(0,0,0,0.3);position:relative;transition:background 0.3s;">
            <div style="position:absolute;top:50%;left:0;right:0;height:1.5px;background:rgba(255,255,255,0.88);transform:translateY(-50%);"></div>
            <div style="position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:rgba(255,255,255,0.88);transform:translateX(-50%);"></div>
          </div>
          <div class="ed-tooltip" style="position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);background:' ~ c1 ~ ';border-radius:6px;padding:3px 10px;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,0.2);transition:background 0.3s;">
            <span class="ed-hex" style="font-size:9px;font-weight:700;color:white;font-family:monospace;">' ~ c1 ~ '</span>
          </div>
        </div>


      </div>
    </div>

  </div>
</div>

<script>
(function() {
  var el = document.getElementById("monalisia-eyedropper");
  if (!el) return;
  var c1 = "' ~ c1 ~ '";
  var c2 = "' ~ c2 ~ '";
  var state = 0;

  var bubble   = el.querySelector(".ed-bubble");
  var stepNum  = el.querySelector(".ed-step-num");
  var stepLbl  = el.querySelector(".ed-step-label");
  var sw1      = el.querySelector(".ed-sw-1");
  var sw2      = el.querySelector(".ed-sw-2");
  var circle   = el.querySelector(".ed-circle");
  var tooltip  = el.querySelector(".ed-tooltip");
  var hex      = el.querySelector(".ed-hex");
  var crosshair= el.querySelector(".ed-crosshair");

  function render(s) {
    if (s === 0) {
      bubble.style.background = c1;
      stepNum.textContent = "1";
      stepLbl.textContent = "couleur principale";
      sw1.style.background = "transparent"; sw1.style.border = "1.5px dashed #4A5E80";
      sw2.style.background = "transparent"; sw2.style.border = "1.5px dashed #4A5E80";
      circle.style.background = c1; tooltip.style.background = c1; hex.textContent = c1;
      crosshair.style.top = "38%"; crosshair.style.left = "50%";
    } else if (s === 1) {
      bubble.style.background = c2;
      stepNum.textContent = "2";
      stepLbl.textContent = "couleur secondaire";
      sw1.style.background = c1; sw1.style.border = "none";
      sw2.style.background = "transparent"; sw2.style.border = "1.5px dashed #4A5E80";
      circle.style.background = c2; tooltip.style.background = c2; hex.textContent = c2;
      crosshair.style.top = "65%"; crosshair.style.left = "50%";
    } else {
      sw2.style.background = c2; sw2.style.border = "none";
    }
  }

  function loop() {
    setTimeout(function() {
      render(1);
      setTimeout(function() {
        render(2);
        setTimeout(function() {
          render(0);
          loop();
        }, 1400);
      }, 1200);
    }, 1200);
  }

  render(0);
  loop();
})();
</script>'
        },
        {
            tagLabel: 'Choix du format',
            titleHtml: 'Trois formats pour <em class="not-italic" style="color:' ~ c1 ~ ';">tous vos usages</em>',
            desc: 'Paysage, Portrait ou Carré — choisissez le format adapté à votre support de diffusion.',
            bullets: [],
            accentColor: c1,
            visualHtml: '
<div style="border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.12);border:1px solid #E5E7EB;">
  <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F4FA;border-bottom:1px solid ' ~ c1 ~ '14;">
    <div style="display:flex;gap:5px;">
      <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;display:inline-block;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;display:inline-block;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;display:inline-block;"></span>
    </div>
    <div style="flex:1;display:flex;justify-content:center;">
      <div style="display:flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:white;border:1px solid ' ~ c1 ~ '1f;font-family:monospace;font-size:10px;color:#8494B2;">
        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;display:inline-block;"></span>
        bubul.app/monalisia
      </div>
    </div>
  </div>
  <div class="mfd3-formats" style="background:white;padding:28px 24px;display:flex;align-items:flex-end;justify-content:center;gap:20px;">

    <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
      <div style="width:130px;height:87px;border-radius:8px;background:' ~ c1 ~ '10;border:1.5px solid ' ~ c1 ~ '30;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;">
        <div style="height:5px;background:' ~ c1 ~ '50;border-radius:3px;width:65%;"></div>
        <div style="height:4px;background:' ~ c1 ~ '30;border-radius:2px;width:48%;"></div>
        <div style="height:4px;background:' ~ c1 ~ '30;border-radius:2px;width:55%;"></div>
      </div>
      <div style="text-align:center;">
        <div style="font-size:11px;font-weight:600;color:#374151;">Paysage</div>
        <div style="font-size:9px;color:#9CA3AF;font-family:monospace;margin-top:1px;">1536 × 1024</div>
      </div>
    </div>

    <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
      <div style="width:87px;height:130px;border-radius:8px;background:' ~ c1 ~ ';border:2px solid ' ~ c1 ~ ';display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;box-shadow:0 6px 24px ' ~ c1 ~ '50;">
        <div style="height:5px;background:rgba(255,255,255,0.8);border-radius:3px;width:65%;"></div>
        <div style="height:4px;background:rgba(255,255,255,0.45);border-radius:2px;width:48%;"></div>
        <div style="height:4px;background:rgba(255,255,255,0.45);border-radius:2px;width:55%;"></div>
      </div>
      <div style="text-align:center;">
        <div style="font-size:11px;font-weight:700;color:' ~ c1 ~ ';">Portrait</div>
        <div style="font-size:9px;color:' ~ c1 ~ ';font-family:monospace;margin-top:1px;font-weight:600;">1024 × 1536</div>
      </div>
    </div>

    <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
      <div style="width:100px;height:100px;border-radius:8px;background:' ~ c1 ~ '10;border:1.5px solid ' ~ c1 ~ '30;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;">
        <div style="height:5px;background:' ~ c1 ~ '50;border-radius:3px;width:60%;"></div>
        <div style="height:4px;background:' ~ c1 ~ '30;border-radius:2px;width:45%;"></div>
        <div style="height:4px;background:' ~ c1 ~ '30;border-radius:2px;width:52%;"></div>
      </div>
      <div style="text-align:center;">
        <div style="font-size:11px;font-weight:600;color:#374151;">Carré</div>
        <div style="font-size:9px;color:#9CA3AF;font-family:monospace;margin-top:1px;">1024 × 1024</div>
      </div>
    </div>

  </div>
</div>'
        },
        {
            tagLabel: 'Résultat final',
            titleHtml: 'Une infographie professionnelle <em class="not-italic" style="color:' ~ c1 ~ ';">en 60 secondes</em>',
            desc: 'Monalisia génère une infographie structurée avec vos couleurs. Timeline, statistiques, données clés — le tout exporté en PNG haute qualité, prêt à partager.',
            bullets: [
                'Structure automatique : titre, étapes, statistiques',
                'Couleurs fidèles à votre charte graphique',
                'Export PNG haute qualité instantané'
            ],
            accentColor: c1,
            visualHtml: '
<div style="border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.12);border:1px solid #E5E7EB;">

  <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F4FA;border-bottom:1px solid ' ~ c1 ~ '14;">
    <div style="display:flex;gap:5px;">
      <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;display:inline-block;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;display:inline-block;"></span>
      <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;display:inline-block;"></span>
    </div>
    <div style="flex:1;display:flex;justify-content:center;">
      <div style="display:flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:white;border:1px solid ' ~ c1 ~ '1f;font-family:monospace;font-size:10px;color:#8494B2;">
        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;flex-shrink:0;display:inline-block;"></span>
        bubul.app/monalisia
      </div>
    </div>
  </div>

  <div style="background:white;padding:16px;">

    <div style="display:flex;align-items:center;gap:10px;background:' ~ c1 ~ '0a;border:1px solid ' ~ c1 ~ '25;border-radius:10px;padding:10px 14px;margin-bottom:12px;">
      <div style="width:22px;height:22px;border-radius:50%;border:2.5px solid ' ~ c1 ~ '40;border-top-color:' ~ c1 ~ ';animation:monSpin 0.9s linear infinite;flex-shrink:0;"></div>
      <div style="flex:1;">
        <div style="font-size:11px;font-weight:700;color:' ~ c1 ~ ';margin-bottom:2px;">Génération en cours…</div>
        <div style="font-size:9px;color:#8494B2;">Mise en page de votre infographie</div>
      </div>
      <div style="font-size:12px;font-weight:800;color:' ~ c1 ~ ';">76%</div>
    </div>

    <div style="background:#F0F1F3;border-radius:99px;height:4px;margin-bottom:14px;overflow:hidden;">
      <div style="background:' ~ c1 ~ ';border-radius:99px;height:100%;animation:monProgress 2.5s ease-in-out infinite;"></div>
    </div>

    <div style="display:flex;flex-direction:column;gap:7px;">

      <div style="display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;background:' ~ c1 ~ '06;border:1px solid ' ~ c1 ~ '18;animation:monFadeIn 0.5s 0s both;">
        <div style="width:22px;height:22px;border-radius:50%;background:' ~ c1 ~ ';display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;font-weight:800;color:white;">1</div>
        <div style="flex:1;display:flex;flex-direction:column;gap:3px;">
          <div style="height:6px;background:' ~ c1 ~ '30;border-radius:3px;width:75%;"></div>
          <div style="height:4px;background:' ~ c1 ~ '18;border-radius:2px;width:52%;"></div>
        </div>
      </div>

      <div style="display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;background:' ~ c1 ~ '06;border:1px solid ' ~ c1 ~ '18;animation:monFadeIn 0.5s 0.3s both;">
        <div style="width:22px;height:22px;border-radius:50%;background:' ~ c1 ~ ';display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:10px;font-weight:800;color:white;">2</div>
        <div style="flex:1;display:flex;flex-direction:column;gap:3px;">
          <div style="height:6px;background:' ~ c1 ~ '30;border-radius:3px;width:60%;"></div>
          <div style="height:4px;background:' ~ c1 ~ '18;border-radius:2px;width:42%;"></div>
        </div>
      </div>

      <div style="display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;background:#F9FAFB;border:1.5px dashed #D1D5DB;animation:monFadeIn 0.5s 0.6s both;">
        <div style="width:22px;height:22px;border-radius:50%;background:#E5E7EB;flex-shrink:0;animation:monShimmer 1.4s ease-in-out infinite;"></div>
        <div style="flex:1;display:flex;flex-direction:column;gap:3px;">
          <div style="height:6px;background:#E5E7EB;border-radius:3px;width:55%;animation:monShimmer 1.4s 0.2s ease-in-out infinite;"></div>
          <div style="height:4px;background:#E5E7EB;border-radius:2px;width:38%;animation:monShimmer 1.4s 0.4s ease-in-out infinite;"></div>
        </div>
      </div>

    </div>
  </div>
</div>'
        }
    ]
} only %}


{# ===== 6. SCREENSHOTS / UI ===== #}
<section class="relative py-20 lg:py-28" id="interface" style="background: linear-gradient(135deg, {{ c1 }}0f 0%, {{ c1 }}06 100%);">

    {# Orbe décorative — cohérente avec le hero #}
    <div class="hidden lg:block absolute w-[500px] h-[500px] rounded-full opacity-[0.05] blur-[100px] -top-[100px] right-[5%] pointer-events-none"
         style="background: radial-gradient(circle, {{ c1 }} 0%, {{ c2 }} 100%);"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
        <div class="text-center mb-14 reveal">
            <p class="font-secondary text-xs font-bold tracking-[3px] mb-4 uppercase" style="color: {{ c1 }};">INTERFACE</p>
            <h2 class="font-secondary text-3xl md:text-4xl font-bold text-gray-900">
                Une interface pensée pour les formateurs
            </h2>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">

            {# Macro chrome partagé #}
            {% macro chrome(url, c1) %}
            <div style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:#F0F4FA;border-bottom:1px solid {{ c1 }}14;flex-shrink:0;">
                <div style="display:flex;gap:5px;">
                    <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;display:inline-block;"></span>
                    <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;display:inline-block;"></span>
                    <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;display:inline-block;"></span>
                </div>
                <div style="flex:1;display:flex;justify-content:center;">
                    <div style="display:flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:white;border:1px solid {{ c1 }}20;font-family:monospace;font-size:10px;color:#8494B2;">
                        <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;display:inline-block;flex-shrink:0;"></span>
                        {{ url }}
                    </div>
                </div>
            </div>
            {% endmacro %}

            {# Left: Creation form mockup #}
            <div class="reveal flex flex-col">
                <div class="flex-1 flex flex-col rounded-2xl overflow-hidden" style="border: 1px solid {{ c1 }}20; box-shadow: 0 24px 64px {{ c1 }}14, 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 {{ c1 }}14;">
                        <div style="display:flex;gap:5px;">
                            <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;display:inline-block;"></span>
                            <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;display:inline-block;"></span>
                            <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;display:inline-block;"></span>
                        </div>
                        <div style="flex:1;display:flex;justify-content:center;">
                            <div style="display:flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:white;border:1px solid {{ c1 }}20;font-family:monospace;font-size:10px;color:#8494B2;">
                                <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;display:inline-block;flex-shrink:0;"></span>
                                bubul.app/monalisia
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 flex flex-col p-6 bg-white gap-5">
                        {# Textarea #}
                        <div>
                            <div class="text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wide">Votre description</div>
                            <div class="p-4 rounded-xl flex flex-col gap-2.5" style="background:{{ c1 }}05; border:1px solid {{ c1 }}18; min-height:90px;">
                                <div class="h-1.5 rounded-full" style="width:92%; background:{{ c1 }}35;"></div>
                                <div class="h-1.5 rounded-full" style="width:76%; background:{{ c1 }}22;"></div>
                                <div class="h-1.5 rounded-full" style="width:61%; background:{{ c1 }}22;"></div>
                                <div class="h-1.5 rounded-full" style="width:83%; background:{{ c1 }}18;"></div>
                            </div>
                        </div>
                        {# Couleurs #}
                        <div>
                            <div class="text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wide">Couleurs</div>
                            <div class="flex gap-3">
                                <div class="flex items-center gap-2.5 px-3 py-2.5 rounded-xl flex-1" style="border:1px solid {{ c1 }}30; background:{{ c1 }}06;">
                                    <div class="w-6 h-6 rounded-lg shrink-0" style="background:{{ c1 }}; box-shadow:0 2px 8px {{ c1 }}50;"></div>
                                    <div>
                                        <div class="text-[0.6rem] text-gray-400 leading-none mb-0.5">Primaire</div>
                                        <div class="text-[0.65rem] font-semibold font-mono" style="color:{{ c1 }};">{{ c1 }}</div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2.5 px-3 py-2.5 rounded-xl flex-1 border border-gray-100 bg-gray-50">
                                    <div class="w-6 h-6 rounded-lg shrink-0 bg-gray-200 border border-gray-300"></div>
                                    <div>
                                        <div class="text-[0.6rem] text-gray-400 leading-none mb-0.5">Secondaire</div>
                                        <div class="text-[0.65rem] font-semibold font-mono text-gray-400">—</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {# Format #}
                        <div>
                            <div class="text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wide">Format</div>
                            <div class="flex gap-2">
                                <span class="px-4 py-1.5 rounded-full text-[0.72rem] font-semibold" style="background:{{ c1 }}; color:white; box-shadow:0 2px 10px {{ c1 }}40;">Paysage</span>
                                <span class="px-4 py-1.5 rounded-full text-[0.72rem] font-semibold text-gray-400 bg-white border border-gray-200">Portrait</span>
                                <span class="px-4 py-1.5 rounded-full text-[0.72rem] font-semibold text-gray-400 bg-white border border-gray-200">Carré</span>
                            </div>
                        </div>
                        {# CTA #}
                        <div class="mt-auto">
                            <div class="flex items-center justify-center gap-2 w-full py-3 rounded-xl text-white text-sm font-semibold"
                                 style="background:linear-gradient(135deg, {{ c1dark }}, {{ c1 }}); box-shadow:0 6px 20px {{ c1 }}40;">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="white"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
                                Générer l'infographie
                            </div>
                        </div>
                    </div>
                </div>
                <p class="text-center mt-4 text-sm text-gray-500"><strong>Mode texte</strong> — Décrivez, configurez et générez en quelques clics</p>
            </div>

            {# Right: Gallery mockup #}
            <div class="reveal reveal-delay-2 flex flex-col">
                <div class="flex-1 flex flex-col rounded-2xl overflow-hidden" style="border: 1px solid {{ c1 }}20; box-shadow: 0 24px 64px {{ c1 }}14, 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 {{ c1 }}14;">
                        <div style="display:flex;gap:5px;">
                            <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;display:inline-block;"></span>
                            <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;display:inline-block;"></span>
                            <span style="width:10px;height:10px;border-radius:50%;background:#27C93F;display:inline-block;"></span>
                        </div>
                        <div style="flex:1;display:flex;justify-content:center;">
                            <div style="display:flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;background:white;border:1px solid {{ c1 }}20;font-family:monospace;font-size:10px;color:#8494B2;">
                                <span style="width:6px;height:6px;border-radius:50%;background:#27C93F;display:inline-block;flex-shrink:0;"></span>
                                bubul.app/monalisia
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 p-5 bg-white">
                        <div class="text-xs font-semibold text-gray-500 mb-3 uppercase tracking-wide">Mes infographies</div>
                        <div class="grid grid-cols-3 gap-3">
                            {% set opacities = ['FF','EE','DD','CC','BB','AA'] %}
                            {% for i in 1..6 %}
                                <div class="relative rounded-xl overflow-hidden flex flex-col justify-end p-2.5 group cursor-pointer"
                                     style="aspect-ratio:3/2; background:linear-gradient(145deg, {{ c1dark }}, {{ c1 }}{{ opacities[i-1] }});">
                                    <div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                                         style="background:rgba(0,0,0,0.25);">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
                                    </div>
                                    <div class="h-1 rounded-full mb-1" style="width:75%;background:rgba(255,255,255,0.6);"></div>
                                    <div class="h-1 rounded-full" style="width:50%;background:rgba(255,255,255,0.35);"></div>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="mt-4 flex items-center justify-between">
                            <span class="text-xs text-gray-400">6 infographies</span>
                            <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold" style="background:{{ c1 }}10; color:{{ c1 }};">
                                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
                                Télécharger tout
                            </div>
                        </div>
                    </div>
                </div>
                <p class="text-center mt-4 text-sm text-gray-500"><strong>Vos infographies en galerie</strong> — Consultez et téléchargez vos créations</p>
            </div>

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


{# ===== 8. ECOSYSTEM ===== #}
{% include '_organisms/landing/tools-ecosystem.html.twig' with {
    titleHtml: 'Monalisia 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: ['monalisia', 'sam'],
    bgClass: 'bg-white',
} only %}

{# ===== 9. FAQ ===== #}
{% set monalisiaFaq = [
    { question: 'Qu\'est-ce que Monalisia ?', answer: 'Monalisia est l\'outil de génération d\'infographies de Bubul. Il transforme votre texte ou PDF en infographie professionnelle en 60 secondes. Vous choisissez vos couleurs, votre format, et Monalisia s\'occupe du reste — sans compétence en design requise.', icon: 'monalisia' },
    { question: 'Comment créer une infographie sans compétences en design ?', answer: 'Avec Monalisia, il suffit de décrire votre sujet en texte libre (jusqu\'à 5 000 caractères) ou d\'importer un PDF. Monalisia génère automatiquement une infographie structurée et visuellement attractive. Vous n\'avez qu\'à choisir vos couleurs et votre format.', icon: 'edit' },
    { question: 'Peut-on générer une infographie depuis un PDF ?', answer: 'Oui. Importez un document PDF (jusqu\'à 20 Mo) et Monalisia en extrait le contenu pertinent pour générer une infographie synthétique. C\'est idéal pour transformer vos supports de formation, rapports ou présentations existants en visuels partageables.', icon: 'document' },
    { question: 'Comment adapter les couleurs à ma charte graphique ?', answer: 'Monalisia propose un outil de pipette (eyedropper) intégré qui identifie les couleurs directement depuis vos images, logos ou captures d\'écran. Vous pouvez aussi saisir manuellement vos couleurs primaire et secondaire via un sélecteur visuel.', icon: 'palette-2' },
    { question: 'Dans quel format sont téléchargées les infographies ?', answer: 'Les infographies sont exportées uniquement en PNG haute qualité. Trois tailles sont disponibles : Paysage (1536×1024), Portrait (1024×1536) et Carré (1024×1024). Choisissez le format adapté à votre support de diffusion.', icon: 'widget-add' },
    { question: 'Qu\'est-ce qu\'un token et combien en faut-il ?', answer: 'Les tokens sont l\'unité de consommation IA sur Bubul. Chaque génération d\'infographie consomme des tokens. Un quota de tokens est offert à l\'inscription en bêta. Vous pouvez suivre votre consommation en temps réel depuis votre tableau de bord, avec une estimation avant chaque génération.', icon: 'chart' }
] %}
{% include '_organisms/landing/faq.html.twig' with { questions: monalisiaFaq, tagline: 'Tout ce que vous devez savoir sur Monalisia.', accentColor: '#EC4899', accentColorDark: '#DB2777' } only %}

{# ===== 10. FOOTER ===== #}
{% include '_organisms/landing/footer.html.twig' only %}

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

{% endblock %}

{% block javascripts %}
    {{ parent() }}

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

    <script>
    (function() {
        'use strict';
        function initReveal() {
            var observer = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.05 });
            document.querySelectorAll('.reveal:not(.visible)').forEach(function(el) {
                observer.observe(el);
            });
            setTimeout(function() {
                document.querySelectorAll('.reveal:not(.visible)').forEach(function(el) {
                    el.classList.add('visible');
                });
            }, 2000);
        }
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initReveal);
        } else {
            initReveal();
        }
        document.addEventListener('turbo:load', initReveal);
    })();
    </script>
{% endblock %}