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

{% block header_cta_label %}Essayer Pixia{% endblock %}
{% block header_active_code %}pixia{% endblock %}

{% set c1 = tool is not null and tool.colorPrimary is not null ? tool.colorPrimary : '#6366F1' %}
{% set c2 = tool is not null and tool.colorSecondary is not null ? tool.colorSecondary : '#4F46E5' %}
{% set c3 = tool is not null and tool.colorBackground is not null ? tool.colorBackground : '#EEF2FF' %}
{% set c1dark = '#4338CA' %}
{% set gtStyle = 'background:linear-gradient(135deg,' ~ c1 ~ ',' ~ c2 ~ ');-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;' %}

{% block title %}Pixia — Générateur d'images IA pour la pédagogie | Bubul.app{% endblock %}

{% block meta_description %}Décrivez votre visuel ou importez un PDF. Pixia génère une image pédagogique professionnelle avec DALL-E en quelques secondes. 5 styles, 3 formats, amélioration IA du prompt. Bêta gratuite pour formateurs.{% endblock %}

{% block meta_keywords %}pixia, générateur image ia, image pédagogique ia, dall-e formation, création visuelle ia, image cours, prompt ia, bubul{% endblock %}

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

{% block og_title %}Pixia — Un texte suffit. Pixia génère l'image.{% endblock %}
{% block og_description %}Décrivez votre visuel ou importez un PDF. Pixia génère une image pédagogique avec DALL-E en quelques secondes. 5 styles, 3 formats. Bêta gratuite sur Bubul.app.{% endblock %}
{% block twitter_title %}Pixia — Un texte suffit. Pixia génère l'image.{% endblock %}
{% block twitter_description %}De votre texte à une image PNG prête à l'emploi en quelques secondes. 5 styles, 3 formats, amélioration IA. 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; }

        /* Animations mockup */
        @keyframes pxSpin { to { transform: rotate(360deg); } }
        @keyframes pxFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
        @keyframes pxShimmer { 0%,100% { opacity:0.4; } 50% { opacity:0.9; } }
        @keyframes pxPulse { 0%,100% { opacity:0.6; } 50% { opacity:1; } }

        /* Comparison grid — subgrid */
        @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; }
        }

        /* Feature 3 — formats responsif */
        @media (max-width: 480px) {
            .pxfd3-formats { transform: scale(0.8); transform-origin: center top; margin-bottom: -20px; }
        }
        @media (max-width: 360px) {
            .pxfd3-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": "Pixia",
        "applicationCategory": "DesignApplication",
        "operatingSystem": "Web browser",
        "description": "Pixia est le générateur d'images IA de Bubul. Créez des visuels pédagogiques professionnels depuis un texte ou un PDF en quelques secondes, avec 5 styles et 3 formats disponibles.",
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
        "featureList": [
            "Génération d'image depuis un texte",
            "Import PDF jusqu'à 20 Mo",
            "Amélioration du prompt par IA",
            "5 styles : Vivid, Natural, Cinématique, Animé, Esquisse",
            "4 niveaux de qualité : Low, Standard, HD, Ultra",
            "3 formats : Carré, Paysage, Portrait",
            "Export PNG haute qualité",
            "Galerie personnelle d'images"
        ],
        "creator": { "@type": "Organization", "name": "bubul.app", "url": "https://bubul.app" }
    },
    {
        "@context": "https://schema.org",
        "@type": "HowTo",
        "name": "Comment créer une image pédagogique avec Pixia",
        "step": [
            { "@type": "HowToStep", "position": 1, "name": "Décrivez ou importez votre contenu", "text": "Saisissez votre description en texte libre ou importez un document PDF. Pixia en extrait l'essentiel pour générer un visuel adapté." },
            { "@type": "HowToStep", "position": 2, "name": "Choisissez un style", "text": "Sélectionnez parmi 5 styles : Vivid (hyper-réaliste), Natural (photographique), Cinématique, Animé ou Esquisse." },
            { "@type": "HowToStep", "position": 3, "name": "Sélectionnez le format", "text": "Carré (1024×1024), Paysage (1536×1024) ou Portrait (1024×1536) selon votre support de diffusion." },
            { "@type": "HowToStep", "position": 4, "name": "Générez et téléchargez", "text": "Pixia génère votre image en quelques secondes via DALL-E. Téléchargez le fichier PNG directement." }
        ]
    },
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
            {
                "@type": "Question",
                "name": "Qu'est-ce que Pixia ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Pixia est l'outil de génération d'images IA de Bubul. Il transforme votre texte ou PDF en image pédagogique professionnelle en quelques secondes, avec 5 styles et 3 formats disponibles." }
            },
            {
                "@type": "Question",
                "name": "Comment générer une image sans maîtriser les prompts IA ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Avec Pixia, décrivez simplement ce que vous voulez voir en français. Le bouton « Améliorer avec l'IA » optimise automatiquement votre description pour obtenir de meilleurs résultats." }
            },
            {
                "@type": "Question",
                "name": "Peut-on générer une image depuis un PDF ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Oui. Importez un document PDF (jusqu'à 20 Mo) et Pixia en extrait le contenu pour générer un visuel adapté à votre support pédagogique." }
            },
            {
                "@type": "Question",
                "name": "Quels styles sont disponibles dans Pixia ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Pixia propose 5 styles : Vivid (hyper-réaliste), Natural (photographique), Cinématique (série TV), Animé (cel-shading) et Esquisse (dessin à la main)." }
            },
            {
                "@type": "Question",
                "name": "Dans quel format sont téléchargées les images ?",
                "acceptedAnswer": { "@type": "Answer", "text": "Les images sont exportées en PNG haute qualité. Trois formats sont disponibles : Carré (1024×1024), Paysage (1536×1024) et Portrait (1024×1536)." }
            },
            {
                "@type": "Question",
                "name": "Combien de tokens faut-il pour générer une image ?",
                "acceptedAnswer": { "@type": "Answer", "text": "La consommation varie selon la qualité choisie : de 5 000 tokens (Low) à 500 000 tokens (Ultra). La qualité Standard (25 000 tokens) est recommandée pour la majorité des usages pédagogiques." }
            }
        ]
    }
]
</script>

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

    {# ================================================
       1. HERO — organism hero-tool
       ================================================ #}
    {% set pixiaHeroMockup %}
            {# 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/pixia
                        </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-pixia', size: 'xs', colorPrimary: c1, colorSecondary: c2, opacitySecondary: '0.4' } only %}
                            </div>
                            <div>
                                <div style="font-size:12px; font-weight:800; color:#1B2D4F;">Pixia</div>
                                <div style="font-size:8px; color:#8494B2;">Générez des images pédagogiques IA</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"><rect x="1" y="1" width="4.5" height="4.5" rx="1" stroke="white" stroke-width="1.5"/><rect x="6.5" y="1" width="4.5" height="4.5" rx="1" stroke="white" stroke-width="1.5"/><rect x="1" y="6.5" width="4.5" height="4.5" rx="1" stroke="white" stroke-width="1.5"/><rect x="6.5" y="6.5" width="4.5" height="4.5" rx="1" stroke="white" stroke-width="1.5"/></svg>
                            <span style="font-size:9px; font-weight:700; color:white;">Mes images</span>
                        </div>
                    </div>

                    {# Tabs Prompt / PDF #}
                    <div style="background:white; border-radius:10px; 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: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 }};">Prompt</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;">
                            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:5px;">
                                <span style="font-size:11px; font-weight:700; color:#1B2D4F;">Description de l'image</span>
                                <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="M6 1l1.2 2.4 2.8.4-2 2 .4 2.8L6 7.4l-2.4 1.2.4-2.8-2-2 2.8-.4z" fill="#7C3AED"/></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:7px; padding:6px 8px; background:#FAFBFC; min-height:38px;">
                                <div style="font-size:9px; color:#C0CADB; line-height:1.65;">Décrivez l'image que vous souhaitez générer…</div>
                                <div style="font-size:8px; color:#D0D9E8; line-height:1.6; font-style:italic; margin-top:3px;">Ex: Schéma pédagogique montrant le cycle de l'eau avec des flèches et des étiquettes…</div>
                            </div>
                        </div>
                    </div>

                    {# Styles #}
                    <div style="background:white; border-radius:10px; border:1px solid #ECEEF2; padding:7px 8px;">
                        <div style="font-size:11px; font-weight:700; color:#1B2D4F; margin-bottom:6px;">Style</div>
                        <div style="display:flex; gap:4px; flex-wrap:wrap;">
                            <div style="padding:3px 8px; border-radius:5px; background:{{ c1 }}; border:1.5px solid {{ c1 }};">
                                <span style="font-size:9px; font-weight:700; color:white;">Vivid</span>
                            </div>
                            <div style="padding:3px 8px; border-radius:5px; background:#FAFBFC; border:1px solid #ECEEF2;">
                                <span style="font-size:9px; font-weight:600; color:#4A5E80;">Natural</span>
                            </div>
                            <div style="padding:3px 8px; border-radius:5px; background:#FAFBFC; border:1px solid #ECEEF2;">
                                <span style="font-size:9px; font-weight:600; color:#4A5E80;">Ciné</span>
                            </div>
                            <div style="padding:3px 8px; border-radius:5px; background:#FAFBFC; border:1px solid #ECEEF2;">
                                <span style="font-size:9px; font-weight:600; color:#4A5E80;">Animé</span>
                            </div>
                            <div style="padding:3px 8px; border-radius:5px; background:#FAFBFC; border:1px solid #ECEEF2;">
                                <span style="font-size:9px; font-weight:600; color:#4A5E80;">Esquisse</span>
                            </div>
                        </div>
                    </div>

                    {# Format + Qualité #}
                    <div style="display:flex; gap:5px;">
                        <div style="flex:1; background:white; border-radius:10px; border:1px solid #ECEEF2; padding:7px 8px;">
                            <div style="font-size:11px; font-weight:700; color:#1B2D4F; margin-bottom:5px;">Format</div>
                            <div style="display:flex; gap:3px;">
                                <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 3px; border-radius:6px; border:1.5px solid {{ c1 }}; background:{{ c1 }}08;">
                                    <div style="width:12px; height:12px; border-radius:2px; border:1.5px solid {{ c1 }}66; background:{{ c1 }}10;"></div>
                                    <span style="font-size:8px; font-weight:700; color:{{ c1 }};">Carré</span>
                                </div>
                                <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 3px; border-radius:6px; border:1px solid #ECEEF2; background:#FAFBFC;">
                                    <div style="width:16px; height:10px; border-radius:2px; border:1.5px solid #D0D7E3; background:#F5F7FA;"></div>
                                    <span style="font-size:8px; font-weight:600; color:#4A5E80;">Paysage</span>
                                </div>
                                <div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 3px; border-radius:6px; border:1px solid #ECEEF2; background:#FAFBFC;">
                                    <div style="width:10px; height:16px; border-radius:2px; border:1.5px solid #D0D7E3; background:#F5F7FA;"></div>
                                    <span style="font-size:8px; font-weight:600; color:#4A5E80;">Portrait</span>
                                </div>
                            </div>
                        </div>
                        <div style="flex:1; background:white; border-radius:10px; border:1px solid #ECEEF2; padding:7px 8px;">
                            <div style="font-size:11px; font-weight:700; color:#1B2D4F; margin-bottom:5px;">Qualité</div>
                            <div style="display:flex; flex-direction:column; gap:3px;">
                                <div style="display:flex; align-items:center; gap:4px; padding:3px 6px; border-radius:5px; border:1.5px solid {{ c1 }}; background:{{ c1 }}08;">
                                    <div style="width:6px; height:6px; border-radius:50%; background:{{ c1 }};"></div>
                                    <span style="font-size:9px; font-weight:700; color:{{ c1 }};">Standard</span>
                                </div>
                                <div style="display:flex; align-items:center; gap:4px; padding:3px 6px; border-radius:5px; border:1px solid #ECEEF2; background:#FAFBFC;">
                                    <div style="width:6px; height:6px; border-radius:50%; background:#D0D7E3;"></div>
                                    <span style="font-size:9px; font-weight:500; color:#6A7B9A;">HD</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Bouton générer #}
                    <div style="display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 10px; border-radius:10px; background:linear-gradient(135deg, {{ c1 }}, {{ c2 }}); cursor:pointer;">
                        <svg width="9" height="9" viewBox="0 0 12 12" fill="none"><path d="M6 1l1.2 2.4 2.8.4-2 2 .4 2.8L6 7.4l-2.4 1.2.4-2.8-2-2 2.8-.4z" fill="white"/></svg>
                        <span style="font-size:11px; font-weight:700; color:white;">Générer l'image</span>
                    </div>

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

    {% include '_organisms/landing/hero-tool.html.twig' with {
        toolName: 'Pixia',
        toolIcon: 'bubul-pixia',
        toolColor: 'primary',
        h1: 'Vous décrivez.<br><span style="' ~ gtStyle ~ '">Pixia visualise.</span>',
        subtitle: 'Décrivez votre visuel ou importez un PDF. Pixia améliore votre prompt, choisit le style adapté 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> pédagogique prêt à l\'emploi — sans aucune maîtrise du prompt engineering.',
        badge: 'Générateur d\'images IA',
        ctaUrl: path('app_login'),
        ctaLabel: 'Créer mon image',
        pills: [],
        gradientStart: c1,
        gradientEnd: c2,
        visualHtml: pixiaHeroMockup
    } only %}

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

    <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">

        <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 visuels pédagogiques est si difficile — et comment <span style="{{ gtStyle }}">Pixia change la donne</span>
            </h2>
        </div>

        <div class="comparison-grid grid grid-cols-1 md:grid-cols-3 gap-5 max-w-[960px] mx-auto">

            {% set comparisons = [
                {
                    problem: 'Créer des visuels pédagogiques prend des heures et exige des compétences en design graphique',
                    solution: 'Décrivez l\'image souhaitée en quelques mots — Pixia la génère en quelques secondes avec DALL-E'
                },
                {
                    problem: 'Maîtriser le prompt engineering pour obtenir de bons résultats est une discipline à part entière',
                    solution: 'Le bouton IA améliore automatiquement votre description pour obtenir des visuels plus précis et adaptés'
                },
                {
                    problem: 'Adapter le même visuel à différents supports demande de relancer toute la chaîne de création',
                    solution: 'Carré, Paysage ou Portrait — générez le format adapté à chaque support en un seul clic'
                }
            ] %}

            {% 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 Pixia</span>
                    </div>
                    <p class="text-[0.875rem] leading-relaxed font-medium text-[#1B2D4F]">{{ item.solution }}</p>
                </div>

                <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 en texte ou <em class="not-italic" style="color:' ~ c1 ~ ';">importez un PDF</em>',
            desc: 'Saisissez votre description en texte libre ou importez un document PDF (jusqu\'à 20 Mo). Pixia en extrait l\'essentiel et améliore automatiquement votre prompt pour générer un visuel pédagogique précis et professionnel.',
            bullets: [
                'Mode texte libre — décrivez en français naturel',
                '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/pixia
      </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 ~ ';">Prompt</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;">
          <span style="font-size:11px;font-weight:700;color:#1B2D4F;">Description de l\'image</span>
          <div 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="M6 1l1.2 2.4 2.8.4-2 2 .4 2.8L6 7.4l-2.4 1.2.4-2.8-2-2 2.8-.4z" fill="#7C3AED"/></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 l\'image que vous souhaitez générer…</div>
          <div style="font-size:9px;color:#D0D9E8;line-height:1.65;font-style:italic;">Ex: Schéma pédagogique montrant le cycle de l\'eau avec des flèches et des étiquettes claires...</div>
          <div style="text-align:right;margin-top:10px;">
            <span style="font-size:9px;color:#C8D2E0;font-family:monospace;">0 / 2000</span>
          </div>
        </div>
      </div>
    </div>

    <div style="background:white;border-radius:12px;border:1px solid #ECEEF2;padding:12px;">
      <div style="font-size:11px;font-weight:700;color:#1B2D4F;margin-bottom:8px;">Style visuel</div>
      <div style="display:flex;gap:6px;flex-wrap:wrap;">
        <div style="padding:5px 10px;border-radius:7px;background:' ~ c1 ~ ';border:1.5px solid ' ~ c1 ~ ';">
          <span style="font-size:10px;font-weight:700;color:white;">Vivid</span>
        </div>
        <div style="padding:5px 10px;border-radius:7px;background:#FAFBFC;border:1px solid #ECEEF2;">
          <span style="font-size:10px;font-weight:600;color:#4A5E80;">Natural</span>
        </div>
        <div style="padding:5px 10px;border-radius:7px;background:#FAFBFC;border:1px solid #ECEEF2;">
          <span style="font-size:10px;font-weight:600;color:#4A5E80;">Cinématique</span>
        </div>
        <div style="padding:5px 10px;border-radius:7px;background:#FAFBFC;border:1px solid #ECEEF2;">
          <span style="font-size:10px;font-weight:600;color:#4A5E80;">Animé</span>
        </div>
        <div style="padding:5px 10px;border-radius:7px;background:#FAFBFC;border:1px solid #ECEEF2;">
          <span style="font-size:10px;font-weight:600;color:#4A5E80;">Esquisse</span>
        </div>
      </div>
    </div>

  </div>
</div>'
        },
        {
            tagLabel: '5 styles artistiques',
            titleHtml: 'Le style parfait pour <em class="not-italic" style="color:' ~ c1 ~ ';">chaque usage</em>',
            desc: 'Hyper-réaliste, photographique, cinématique, cel-shading animé ou esquisse à la main — choisissez le registre visuel qui correspond à votre charte pédagogique et à votre public.',
            bullets: [
                'Vivid : images hyper-réalistes, couleurs saturées, impact maximal',
                'Natural : rendu photographique pour des visuels documentaires',
                'Cinématique, Animé, Esquisse — 3 registres créatifs supplémentaires'
            ],
            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/pixia
      </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;padding:14px;">
      <div style="font-size:11px;font-weight:700;color:#1B2D4F;margin-bottom:10px;">Style visuel</div>
      <div style="display:flex;flex-direction:column;gap:6px;">

        <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;border:1.5px solid ' ~ c1 ~ ';background:' ~ c1 ~ '08;">
          <div style="width:32px;height:32px;border-radius:7px;background:linear-gradient(135deg,' ~ c1 ~ ',' ~ c2 ~ ');flex-shrink:0;"></div>
          <div style="flex:1;">
            <div style="font-size:11px;font-weight:700;color:' ~ c1 ~ ';">Vivid</div>
            <div style="font-size:9px;color:#8494B2;margin-top:1px;">Hyper-réaliste · couleurs saturées · fort impact visuel</div>
          </div>
          <div style="width:16px;height:16px;border-radius:50%;background:' ~ c1 ~ ';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 5l2 2 4-4" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
        </div>

        <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;border:1px solid #ECEEF2;background:#FAFBFC;">
          <div style="width:32px;height:32px;border-radius:7px;background:linear-gradient(135deg,#64748B,#94A3B8);flex-shrink:0;"></div>
          <div style="flex:1;">
            <div style="font-size:11px;font-weight:600;color:#4A5E80;">Natural</div>
            <div style="font-size:9px;color:#8494B2;margin-top:1px;">Photographique · tons réalistes · ambiance documentaire</div>
          </div>
        </div>

        <div style="display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;border:1px solid #ECEEF2;background:#FAFBFC;">
          <div style="width:32px;height:32px;border-radius:7px;background:linear-gradient(135deg,#0F172A,#334155);flex-shrink:0;"></div>
          <div style="flex:1;">
            <div style="font-size:11px;font-weight:600;color:#4A5E80;">Cinématique</div>
            <div style="font-size:9px;color:#8494B2;margin-top:1px;">Style film · lumière dramatique · rendu cinéma</div>
          </div>
        </div>

        <div style="display:flex;align-items:center;gap:6px;">
          <div style="flex:1;height:1px;background:#ECEEF2;"></div>
          <span style="font-size:9px;color:#B0BDCF;">+ 2 styles</span>
          <div style="flex:1;height:1px;background:#ECEEF2;"></div>
        </div>

      </div>
    </div>

  </div>
</div>'
        },
        {
            tagLabel: 'Formats',
            titleHtml: 'Trois formats pour <em class="not-italic" style="color:' ~ c1 ~ ';">tous vos supports</em>',
            desc: 'Carré pour les réseaux sociaux, Paysage pour les diaporamas, Portrait pour les affiches et supports imprimés — choisissez le format adapté à votre 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/pixia
      </div>
    </div>
  </div>
  <div class="pxfd3-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:100px;height:100px;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 ~ ';">Carré</div>
        <div style="font-size:9px;color:' ~ c1 ~ ';font-family:monospace;margin-top:1px;font-weight:600;">1024 × 1024</div>
      </div>
    </div>

    <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 ~ '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;">Portrait</div>
        <div style="font-size:9px;color:#9CA3AF;font-family:monospace;margin-top:1px;">1024 × 1536</div>
      </div>
    </div>

  </div>
</div>'
        },
        {
            tagLabel: 'Galerie personnelle',
            titleHtml: 'Toutes vos images <em class="not-italic" style="color:' ~ c1 ~ ';">au même endroit</em>',
            desc: 'Pixia conserve toutes vos créations dans une galerie personnelle. Retrouvez, téléchargez ou supprimez vos images à tout moment. Chaque génération affiche le prompt utilisé pour pouvoir le réutiliser.',
            bullets: [
                'Galerie masonry avec aperçu instantané',
                'Prompt enregistré avec chaque image pour la réutiliser',
                'Téléchargement PNG en un clic'
            ],
            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/pixia
      </div>
    </div>
  </div>

  <div style="background:#F4F6FA;padding:14px;">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
      <span style="font-size:11px;font-weight:700;color:#1B2D4F;">Mes images</span>
      <span style="font-size:9px;color:#8494B2;">6 images</span>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;">
      <div style="border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(145deg,' ~ c1 ~ 'FF,' ~ c2 ~ 'CC);animation:pxFadeIn 0.5s 0s both;"></div>
      <div style="border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(145deg,' ~ c1 ~ 'DD,' ~ c2 ~ 'AA);animation:pxFadeIn 0.5s 0.1s both;"></div>
      <div style="border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(145deg,' ~ c1 ~ 'BB,' ~ c2 ~ '88);animation:pxFadeIn 0.5s 0.2s both;"></div>
      <div style="border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(145deg,' ~ c1 ~ 'AA,' ~ c2 ~ '77);animation:pxFadeIn 0.5s 0.3s both;"></div>
      <div style="border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(145deg,' ~ c1 ~ '88,' ~ c2 ~ '55);animation:pxFadeIn 0.5s 0.4s both;"></div>
      <div style="border-radius:8px;overflow:hidden;aspect-ratio:1/1;background:linear-gradient(145deg,' ~ c1 ~ '66,' ~ c2 ~ '44);animation:pxFadeIn 0.5s 0.5s both;"></div>
    </div>
    <div style="display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:7px;border-radius:8px;background:' ~ c1 ~ '10;border:1px solid ' ~ c1 ~ '20;">
      <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.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span style="font-size:10px;font-weight:600;color:' ~ c1 ~ ';">Télécharger tout</span>
    </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%);">

    <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">

            {# 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/pixia
                            </div>
                        </div>
                    </div>
                    <div class="flex-1 flex flex-col p-6 bg-white gap-5">
                        {# Prompt #}
                        <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>
                        {# Style #}
                        <div>
                            <div class="text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wide">Style</div>
                            <div class="flex gap-2 flex-wrap">
                                <span class="px-3 py-1.5 rounded-full text-[0.72rem] font-semibold" style="background:{{ c1 }}; color:white; box-shadow:0 2px 10px {{ c1 }}40;">Vivid</span>
                                <span class="px-3 py-1.5 rounded-full text-[0.72rem] font-semibold text-gray-400 bg-white border border-gray-200">Natural</span>
                                <span class="px-3 py-1.5 rounded-full text-[0.72rem] font-semibold text-gray-400 bg-white border border-gray-200">Cinématique</span>
                                <span class="px-3 py-1.5 rounded-full text-[0.72rem] font-semibold text-gray-400 bg-white border border-gray-200">Animé</span>
                                <span class="px-3 py-1.5 rounded-full text-[0.72rem] font-semibold text-gray-400 bg-white border border-gray-200">Esquisse</span>
                            </div>
                        </div>
                        {# Format + Qualité #}
                        <div class="grid grid-cols-2 gap-4">
                            <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-3 py-1.5 rounded-full text-[0.72rem] font-semibold" style="background:{{ c1 }}; color:white; box-shadow:0 2px 10px {{ c1 }}40;">Carré</span>
                                    <span class="px-3 py-1.5 rounded-full text-[0.72rem] font-semibold text-gray-400 bg-white border border-gray-200">Paysage</span>
                                </div>
                            </div>
                            <div>
                                <div class="text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wide">Qualité</div>
                                <div class="flex gap-2">
                                    <span class="px-3 py-1.5 rounded-full text-[0.72rem] font-semibold" style="background:{{ c1 }}; color:white; box-shadow:0 2px 10px {{ c1 }}40;">Standard</span>
                                </div>
                            </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="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                Générer l'image
                            </div>
                        </div>
                    </div>
                </div>
                <p class="text-center mt-4 text-sm text-gray-500"><strong>Formulaire de génération</strong> — Décrivez, choisissez le style et générez</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/pixia
                            </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 images</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:1/1; 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 images</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>Votre galerie</strong> — Consultez et téléchargez toutes vos créations</p>
            </div>

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


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

{# ===== 9. FAQ ===== #}
{% set pixiaFaq = [
    { question: 'Qu\'est-ce que Pixia ?', answer: 'Pixia est l\'outil de génération d\'images IA de Bubul. Il transforme votre description texte ou PDF en image pédagogique professionnelle en quelques secondes, via DALL-E. 5 styles et 3 formats sont disponibles pour s\'adapter à tous vos supports de diffusion.', icon: 'pixia' },
    { question: 'Comment générer une image sans maîtriser les prompts IA ?', answer: 'Décrivez simplement ce que vous voulez voir en français naturel. Le bouton « Améliorer avec l\'IA » analyse votre description et la reformule automatiquement pour obtenir de meilleurs résultats avec DALL-E. Vous n\'avez pas besoin de connaître les techniques de prompt engineering.', icon: 'edit' },
    { question: 'Peut-on générer une image depuis un PDF ?', answer: 'Oui. Importez un document PDF (jusqu\'à 20 Mo) et Pixia en extrait le contenu essentiel pour générer un visuel adapté à votre support pédagogique. Idéal pour créer des illustrations complémentaires à vos supports existants.', icon: 'document' },
    { question: 'Quels styles sont disponibles dans Pixia ?', answer: 'Pixia propose 5 styles : Vivid (hyper-réaliste, couleurs saturées), Natural (rendu photographique), Cinématique (style film avec lumière dramatique), Animé (cel-shading, univers cartoon) et Esquisse (dessin à la main). Chaque style peut être combiné avec 4 niveaux de qualité.', icon: 'palette-2' },
    { question: 'Dans quel format sont téléchargées les images ?', answer: 'Les images sont exportées en PNG haute qualité. Trois formats sont disponibles : Carré (1024×1024) pour les réseaux sociaux, Paysage (1536×1024) pour les diaporamas et Paysages, Portrait (1024×1536) pour les affiches et supports verticaux.', icon: 'widget-add' },
    { question: 'Combien de tokens faut-il pour générer une image ?', answer: 'La consommation varie selon la qualité choisie : Low (5 000 tokens), Standard (25 000 tokens, recommandé), HD (50 000 tokens) et Ultra (500 000 tokens avec le modèle le plus avancé). La qualité Standard offre le meilleur rapport qualité/tokens pour la majorité des usages pédagogiques.', icon: 'chart' }
] %}
{% include '_organisms/landing/faq.html.twig' with { questions: pixiaFaq, tagline: 'Tout ce que vous devez savoir sur Pixia.', accentColor: c1, accentColorDark: c1dark } only %}

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

</div>{# end .pixia-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 %}