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

{% block header_cta_label %}Découvrir les prompts{% endblock %}
{% block header_active_code %}promptly{% endblock %}

{% set _pc = tool_color_details['promptly'] %}
{% set c1     = _pc.primary %}
{% set c1dark = _pc.secondary %}
{% set c2     = _pc.border %}
{% set c3     = _pc.bg %}

{% block title %}Promptly — La bibliothèque de prompts IA, centralisée et gratuite | Bubul.app{% endblock %}
{% block meta_description %}Promptly réunit tous vos prompts IA dans une seule bibliothèque. Créez, retrouvez et lancez vos meilleurs prompts en 1 clic, sans copier-coller. 100% gratuit.{% endblock %}
{% block meta_keywords %}promptly, bibliothèque prompts ia, gestion prompts, partage prompts ia, prompt template, serenia, bubul{% endblock %}
{% block canonical %}https://bubul.app/outils/promptly{% endblock %}
{% block og_title %}Promptly — Tous vos prompts IA au même endroit.{% endblock %}
{% block og_description %}Créez, retrouvez et lancez vos prompts IA en 1 clic. Bibliothèque gratuite, recherche instantanée, lancement direct sur Serenia.{% endblock %}
{% block twitter_title %}Promptly — Tous vos prompts IA au même endroit.{% endblock %}
{% block twitter_description %}Une bibliothèque pour tous vos prompts IA. Retrouvez-les en quelques lettres, lancez-les en 1 clic sur Serenia.{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        html { scroll-behavior: smooth; }
        .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; }
        @keyframes plBlink { 0%,100%{opacity:1;} 50%{opacity:0;} }
        @keyframes plHeartPop { 0%{transform:scale(1);} 40%{transform:scale(1.35);} 70%{transform:scale(0.9);} 100%{transform:scale(1);} }
        #faq { scroll-margin-top: 80px; }
    </style>
{% endblock %}

{% block landing_content %}

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "Promptly",
    "applicationCategory": "ProductivityApplication",
    "operatingSystem": "Web browser",
    "description": "Promptly est la biblioth\u00e8que de prompts IA de Bubul. Cr\u00e9ez, organisez et partagez vos prompts p\u00e9dagogiques.",
    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
    "creator": { "@type": "Organization", "name": "bubul.app", "url": "https://bubul.app" }
}
</script>
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "Comment utiliser Promptly, la biblioth\u00e8que de prompts IA",
    "description": "Cr\u00e9ez et r\u00e9utilisez vos prompts IA en 3 \u00e9tapes simples, puis lancez-les sur Serenia.",
    "totalTime": "PT2M",
    "step": [
        {
            "@type": "HowToStep",
            "position": 1,
            "name": "\u00c9crivez votre prompt",
            "text": "Un titre, votre texte, quelques tags pour le ranger. Choisissez s'il reste priv\u00e9 ou s'il rejoint la biblioth\u00e8que publique."
        },
        {
            "@type": "HowToStep",
            "position": 2,
            "name": "Retrouvez-le en un mot",
            "text": "Tapez un mot dans la barre de recherche : Promptly fouille les titres, les contenus et les tags en m\u00eame temps. Vos favoris remontent en haut."
        },
        {
            "@type": "HowToStep",
            "position": 3,
            "name": "Envoyez-le sur Serenia",
            "text": "Le bouton \u00ab Ouvrir sur Serenia \u00bb place votre prompt directement dans la zone de saisie. Vous lancez la conversation, l'IA r\u00e9pond."
        }
    ]
}
</script>
{# Le JSON-LD FAQPage est g\u00e9n\u00e9r\u00e9 automatiquement par la molecule _organisms/landing/faq.html.twig
   \u00e0 partir de la liste `questions` pass\u00e9e en bas de page. Pas besoin de le dupliquer ici. #}

{# ================================================================
   HERO MOCKUP (statique, côté droit)
   ================================================================ #}
{% set promptlyHeroMockup %}
<div style="border-radius:20px; overflow:hidden; border:1px solid {{ c1 }}1f; box-shadow:0 32px 100px {{ c1 }}1a, 0 6px 24px rgba(0,0,0,0.05); font-family:-apple-system,BlinkMacSystemFont,sans-serif;">

    <div style="display:flex;align-items:center;gap:10px;padding:14px 22px;background:#F0F4FA;border-bottom:1px solid {{ c1 }}14;">
        <div style="display:flex;gap:7px;">
            <span style="width:14px;height:14px;border-radius:50%;background:#FF5F56;display:inline-block;"></span>
            <span style="width:14px;height:14px;border-radius:50%;background:#FFBD2E;display:inline-block;"></span>
            <span style="width:14px;height:14px;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:8px;padding:6px 18px;border-radius:999px;background:white;border:1px solid {{ c1 }}1f;font-family:monospace;font-size:13px;color:#8494B2;">
                <span style="width:8px;height:8px;border-radius:50%;background:#27C93F;flex-shrink:0;display:inline-block;"></span>
                bubul.app/promptly
            </div>
        </div>
    </div>

    <div style="background:#F9FAFB;padding:18px;display:flex;flex-direction:column;gap:12px;">

        <div style="background:white;border:1px solid #F3F4F6;border-radius:14px;padding:11px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px rgba(0,0,0,0.04);">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="#D1D5DB" stroke-width="2"/><path d="m21 21-4-4" stroke="#D1D5DB" stroke-width="2" stroke-linecap="round"/></svg>
            <span style="font-size:15px;color:#D1D5DB;">Rechercher un prompt…</span>
        </div>

        <div style="display:flex;align-items:center;gap:7px;flex-wrap:wrap;">
            <span style="font-size:14px;font-weight:600;padding:6px 14px;border-radius:10px;background:{{ c1 }};color:white;">Tous</span>
            <span style="font-size:14px;padding:6px 14px;border-radius:10px;background:white;color:#6B7280;border:1px solid #F3F4F6;">Pédagogie</span>
            <span style="font-size:14px;padding:6px 14px;border-radius:10px;background:white;color:#6B7280;border:1px solid #F3F4F6;">Quiz</span>
            <span style="font-size:14px;padding:6px 14px;border-radius:10px;background:white;color:#6B7280;border:1px solid #F3F4F6;">Rédaction</span>
            <span style="font-size:14px;padding:6px 14px;border-radius:10px;background:white;color:#6B7280;border:1px solid #F3F4F6;">Marketing</span>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">

            <div style="background:white;border-radius:14px;border:1px solid #F3F4F6;padding:14px;display:flex;flex-direction:column;gap:9px;">
                <div style="font-size:14px;font-weight:600;color:#111827;line-height:1.35;">Résumé de cours structuré</div>
                <div style="font-size:12px;color:#9CA3AF;font-family:monospace;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">Résume ce cours en 5 points clés adaptés à des débutants…</div>
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <span style="font-size:11px;padding:3px 9px;border-radius:6px;background:#F5F3FF;color:#6D28D9;border:1px solid #DDD6FE;">pédagogie</span>
                    <span style="display:flex;align-items:center;gap:3px;font-size:12px;color:#F59E0B;font-weight:600;">❤ 18</span>
                </div>
            </div>

            <div style="background:white;border-radius:14px;border:1px solid #F3F4F6;padding:14px;display:flex;flex-direction:column;gap:9px;">
                <div style="font-size:14px;font-weight:600;color:#111827;line-height:1.35;">Quiz formatif 10 QCM</div>
                <div style="font-size:12px;color:#9CA3AF;font-family:monospace;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">Génère 10 questions QCM avec 4 propositions et la bonne réponse…</div>
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <span style="font-size:11px;padding:3px 9px;border-radius:6px;background:#F5F3FF;color:#6D28D9;border:1px solid #DDD6FE;">quiz</span>
                    <span style="display:flex;align-items:center;gap:3px;font-size:12px;color:#F59E0B;font-weight:600;">❤ 14</span>
                </div>
            </div>

            <div style="background:white;border-radius:14px;border:1px solid #F3F4F6;padding:14px;display:flex;flex-direction:column;gap:9px;">
                <div style="font-size:14px;font-weight:600;color:#111827;line-height:1.35;">Email de bienvenue onboarding</div>
                <div style="font-size:12px;color:#9CA3AF;font-family:monospace;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">Rédige un email de bienvenue chaleureux pour un nouveau client…</div>
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <span style="font-size:11px;padding:3px 9px;border-radius:6px;background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;">rédaction</span>
                    <span style="display:flex;align-items:center;gap:3px;font-size:12px;color:#F59E0B;font-weight:600;">❤ 38</span>
                </div>
            </div>

            <div style="background:white;border-radius:14px;border:1px solid #F3F4F6;padding:14px;display:flex;flex-direction:column;gap:9px;">
                <div style="font-size:14px;font-weight:600;color:#111827;line-height:1.35;">Stratégie de contenu 30 jours</div>
                <div style="font-size:12px;color:#9CA3AF;font-family:monospace;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">Crée un calendrier éditorial de 30 jours pour ton audience…</div>
                <div style="display:flex;align-items:center;justify-content:space-between;">
                    <span style="font-size:11px;padding:3px 9px;border-radius:6px;background:#FFFBEB;color:#B45309;border:1px solid #FDE68A;">marketing</span>
                    <span style="display:flex;align-items:center;gap:3px;font-size:12px;color:#F59E0B;font-weight:600;">❤ 83</span>
                </div>
            </div>

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

{% include '_organisms/landing/hero-tool.html.twig' with {
    toolName: 'Promptly',
    toolIcon: 'magic-stick',
    h1: 'Vous avez les mots.<br><span style="background:linear-gradient(135deg,' ~ c1dark ~ ',' ~ c1 ~ ',#2DD4CF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">Promptly les retient.</span>',
    subtitle: 'Créez, retrouvez et lancez vos meilleurs prompts en 1 clic. Une seule bibliothèque pour ne plus jamais réécrire deux fois la même chose.',
    badge: 'Bibliothèque de prompts IA',
    ctaUrl: path('app_login'),
    ctaLabel: 'Explorer la bibliothèque',
    gradientStart: c1,
    gradientEnd: '#2DD4CF',
    userCount: null,
    visualHtml: promptlyHeroMockup
} only %}


{% include '_organisms/landing/social-proof.html.twig' with { stats: [
    { value: totalPromptCount > 0 ? totalPromptCount : '71', label: 'Prompts disponibles', sublabel: 'dans la bibliothèque',    gradient: 'linear-gradient(135deg, ' ~ c1dark ~ ', ' ~ c1 ~ ')' },
    { value: '100%',   label: 'Gratuit',             sublabel: 'inclus dans tous les plans', gradient: 'linear-gradient(135deg, ' ~ c1 ~ ', #2DD4CF)' },
    { value: '1 clic', label: 'Lancement Serenia',   sublabel: 'sans copier-coller',          gradient: 'linear-gradient(135deg, ' ~ c1dark ~ ', #2DD4CF)' },
    { value: '∞',      label: 'Prompts personnels',  sublabel: 'créez sans limite',           gradient: 'linear-gradient(135deg, ' ~ c1 ~ ', ' ~ c1dark ~ ')' }
] } only %}




{# ================================================================
   FEATURE 1 VISUAL — Recherche animée
   ================================================================ #}
{% set promptlySearchVisual %}
<div id="promptly-search-demo" 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;">

    <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/promptly
            </div>
        </div>
    </div>

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

        <div style="background:white;border-radius:12px;border:1px solid {{ c1 }}20;padding:10px 14px;display:flex;align-items:center;gap:8px;box-shadow:0 1px 4px rgba(0,0,0,0.04);">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="{{ c1 }}" stroke-width="2"/><path d="m21 21-4-4" stroke="{{ c1 }}" stroke-width="2" stroke-linecap="round"/></svg>
            <span class="ps-input-text" style="font-size:13px;color:#374151;font-weight:500;"></span><span class="ps-cursor" style="display:inline-block;width:2px;height:13px;background:{{ c1 }};border-radius:1px;animation:plBlink 0.9s step-end infinite;vertical-align:middle;margin-left:1px;"></span>
        </div>

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

            <div class="ps-card" data-tag="pédagogie" style="background:white;border-radius:10px;border:1px solid #F3F4F6;padding:10px 12px;display:flex;align-items:center;gap:10px;transition:opacity 0.35s, transform 0.35s;">
                <div style="width:32px;height:32px;border-radius:8px;background:#F5F3FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" stroke="#8B5CF6" stroke-width="1.5" stroke-linejoin="round"/></svg>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:12px;font-weight:600;color:#111827;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Résumé de cours structuré</div>
                    <div style="font-size:10px;color:#9CA3AF;">Résume ce cours en 5 points clés…</div>
                </div>
                <span style="flex-shrink:0;font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:#F5F3FF;color:#6D28D9;border:1px solid #DDD6FE;">pédagogie</span>
            </div>

            <div class="ps-card" data-tag="quiz" style="background:white;border-radius:10px;border:1px solid #F3F4F6;padding:10px 12px;display:flex;align-items:center;gap:10px;transition:opacity 0.35s, transform 0.35s;">
                <div style="width:32px;height:32px;border-radius:8px;background:#EFF6FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:12px;font-weight:600;color:#111827;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Quiz formatif 10 QCM</div>
                    <div style="font-size:10px;color:#9CA3AF;">Génère 10 questions QCM sur…</div>
                </div>
                <span style="flex-shrink:0;font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;">quiz</span>
            </div>

            <div class="ps-card" data-tag="rédaction" style="background:white;border-radius:10px;border:1px solid #F3F4F6;padding:10px 12px;display:flex;align-items:center;gap:10px;transition:opacity 0.35s, transform 0.35s;">
                <div style="width:32px;height:32px;border-radius:8px;background:#F0FDF4;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:12px;font-weight:600;color:#111827;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Email professionnel concis</div>
                    <div style="font-size:10px;color:#9CA3AF;">Rédige un email professionnel…</div>
                </div>
                <span style="flex-shrink:0;font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:#F0FDF4;color:#15803D;border:1px solid #BBF7D0;">rédaction</span>
            </div>

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

<script>
(function() {
    var el = document.getElementById("promptly-search-demo");
    if (!el) return;
    var inputEl = el.querySelector(".ps-input-text");
    var cards   = el.querySelectorAll(".ps-card");
    var terms   = ["quiz", "rédaction", "pédagogie"];
    var idx = 0;

    function setActive(tag) {
        cards.forEach(function(c) {
            var match = tag === null || c.dataset.tag === tag;
            c.style.opacity   = match ? "1" : "0.22";
            c.style.transform = match ? "scale(1)" : "scale(0.97)";
        });
    }

    function typeText(text, done) {
        var i = 0;
        (function tick() {
            i++;
            inputEl.textContent = text.slice(0, i);
            if (i < text.length) { setTimeout(tick, 85); } else { done(); }
        })();
    }

    function clearText(done) {
        var t = inputEl.textContent;
        var i = t.length;
        (function tick() {
            inputEl.textContent = t.slice(0, i);
            if (i > 0) { i--; setTimeout(tick, 40); } else { done(); }
        })();
    }

    function loop() {
        setActive(null);
        setTimeout(function() {
            var term = terms[idx];
            typeText(term, function() {
                setActive(term);
                setTimeout(function() {
                    clearText(function() {
                        idx = (idx + 1) % terms.length;
                        setTimeout(loop, 400);
                    });
                }, 1800);
            });
        }, 1200);
    }

    loop();
})();
</script>
{% endset %}


{# ================================================================
   FEATURE 2 VISUAL — Remplissage de variables (typewriter)
   ================================================================ #}
{% set promptlyVarsVisual %}
<div id="promptly-vars-demo" 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;">

    <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/promptly
            </div>
        </div>
    </div>

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

        <div style="background:white;border-radius:12px;border:1px solid {{ c1 }}25;padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 8px {{ c1 }}10;">

            <div style="display:flex;align-items:center;gap:10px;">
                <div style="width:36px;height:36px;border-radius:10px;background:{{ c1 }}12;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" stroke="{{ c1 }}" stroke-width="1.5" stroke-linejoin="round"/></svg>
                </div>
                <div style="flex:1;min-width:0;">
                    <div style="font-size:13px;font-weight:700;color:#111827;margin-bottom:3px;">Quiz formatif sur un thème</div>
                    <span style="font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;">quiz</span>
                </div>
            </div>

            {# Corps du prompt — les .pv-var sont initialisés par JS #}
            <div style="font-size:11px;color:#374151;line-height:1.9;font-family:monospace;background:#F9FAFB;border-radius:10px;padding:12px 14px;border:1px solid #F3F4F6;">
                Génère
                <span class="pv-var" data-slot="0" style="display:inline-block;min-width:16px;padding:1px 6px;border-radius:5px;background:{{ c1 }}12;border:1px dashed {{ c1 }}55;color:{{ c1 }};font-weight:700;font-size:10px;transition:background 0.2s,border-color 0.2s;">{{ '{{nombre}}' }}</span>
                questions QCM sur
                <span class="pv-var" data-slot="1" style="display:inline-block;min-width:28px;padding:1px 6px;border-radius:5px;background:{{ c1 }}12;border:1px dashed {{ c1 }}55;color:{{ c1 }};font-weight:700;font-size:10px;transition:background 0.2s,border-color 0.2s;">{{ '{{thème}}' }}</span>,
                niveau
                <span class="pv-var" data-slot="2" style="display:inline-block;min-width:28px;padding:1px 6px;border-radius:5px;background:{{ c1 }}12;border:1px dashed {{ c1 }}55;color:{{ c1 }};font-weight:700;font-size:10px;transition:background 0.2s,border-color 0.2s;">{{ '{{niveau}}' }}</span>.
                Pour chaque question, propose 4 réponses et indique la bonne.
            </div>

            {# Champs de saisie des variables #}
            <div style="display:flex;flex-direction:column;gap:6px;">
                <div style="font-size:9px;font-weight:700;color:#9CA3AF;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:2px;">Variables</div>

                <div style="display:flex;align-items:center;gap:8px;">
                    <span style="font-size:10px;font-weight:600;color:#6B7280;width:68px;flex-shrink:0;font-family:monospace;">{{ '{{nombre}}' }}</span>
                    <div class="pv-field" data-slot="0" style="flex:1;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:7px;padding:5px 10px;font-size:11px;color:#374151;font-family:monospace;min-height:26px;display:flex;align-items:center;transition:border-color 0.2s,box-shadow 0.2s;">
                        <span class="pv-ft"></span><span class="pv-cur" style="width:1.5px;height:11px;background:{{ c1 }};border-radius:1px;display:none;vertical-align:middle;animation:plBlink 0.8s step-end infinite;margin-left:1px;flex-shrink:0;"></span>
                    </div>
                </div>

                <div style="display:flex;align-items:center;gap:8px;">
                    <span style="font-size:10px;font-weight:600;color:#6B7280;width:68px;flex-shrink:0;font-family:monospace;">{{ '{{thème}}' }}</span>
                    <div class="pv-field" data-slot="1" style="flex:1;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:7px;padding:5px 10px;font-size:11px;color:#374151;font-family:monospace;min-height:26px;display:flex;align-items:center;transition:border-color 0.2s,box-shadow 0.2s;">
                        <span class="pv-ft"></span><span class="pv-cur" style="width:1.5px;height:11px;background:{{ c1 }};border-radius:1px;display:none;vertical-align:middle;animation:plBlink 0.8s step-end infinite;margin-left:1px;flex-shrink:0;"></span>
                    </div>
                </div>

                <div style="display:flex;align-items:center;gap:8px;">
                    <span style="font-size:10px;font-weight:600;color:#6B7280;width:68px;flex-shrink:0;font-family:monospace;">{{ '{{niveau}}' }}</span>
                    <div class="pv-field" data-slot="2" style="flex:1;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:7px;padding:5px 10px;font-size:11px;color:#374151;font-family:monospace;min-height:26px;display:flex;align-items:center;transition:border-color 0.2s,box-shadow 0.2s;">
                        <span class="pv-ft"></span><span class="pv-cur" style="width:1.5px;height:11px;background:{{ c1 }};border-radius:1px;display:none;vertical-align:middle;animation:plBlink 0.8s step-end infinite;margin-left:1px;flex-shrink:0;"></span>
                    </div>
                </div>
            </div>

            <div class="pv-btn" style="display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:9px;background:{{ c1 }};color:white;font-size:11px;font-weight:700;opacity:0.3;transition:opacity 0.4s,box-shadow 0.4s;">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Lancer sur Serenia
            </div>

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

<script>
(function() {
    var root = document.getElementById("promptly-vars-demo");
    if (!root) return;
    var c1 = "{{ c1 }}";

    var DATA = [
        ["10",               "5",                     "8"],
        ["la photosynthèse", "la Révolution française","les fractions"],
        ["débutant",         "intermédiaire",          "avancé"]
    ];
    var cycleIdx = 0;

    // Scoped selectors — no global getElementById
    var varEls  = root.querySelectorAll(".pv-var");   // 3 spans in prompt body
    var fields  = root.querySelectorAll(".pv-field"); // 3 input-like divs
    var btn     = root.querySelector(".pv-btn");

    function focus(field, on) {
        field.style.borderColor = on ? c1 : "#E5E7EB";
        field.style.boxShadow   = on ? "0 0 0 2px " + c1 + "22" : "none";
        field.querySelector(".pv-cur").style.display = on ? "inline-block" : "none";
    }

    // Typewriter: types `text` into field + mirrors to varEl, then calls done()
    function typeInto(slotIdx, text, done) {
        var field  = fields[slotIdx];
        var varEl  = varEls[slotIdx];
        var textEl = field.querySelector(".pv-ft");
        focus(field, true);
        varEl.style.borderStyle = "solid";
        var i = 0;
        (function tick() {
            i++;
            var partial = text.slice(0, i);
            textEl.textContent = partial;
            varEl.textContent  = partial;
            if (i < text.length) {
                setTimeout(tick, 68);
            } else {
                focus(field, false);
                varEl.style.background   = c1 + "20";
                varEl.style.borderColor  = c1 + "88";
                setTimeout(done, 260);
            }
        })();
    }

    var PLACEHOLDERS = ["{{ '{{nombre}}' }}", "{{ '{{thème}}' }}", "{{ '{{niveau}}' }}"];

    function resetAll() {
        varEls.forEach(function(v, i) {
            v.textContent        = PLACEHOLDERS[i];
            v.style.background   = c1 + "12";
            v.style.borderStyle  = "dashed";
            v.style.borderColor  = c1 + "55";
        });
        fields.forEach(function(f) {
            f.querySelector(".pv-ft").textContent = "";
            focus(f, false);
        });
        btn.style.opacity   = "0.3";
        btn.style.boxShadow = "none";
    }

    function runCycle() {
        resetAll();
        var si = 0;
        (function fillNext() {
            if (si >= DATA.length) {
                // All slots filled — activate button
                btn.style.opacity   = "1";
                btn.style.boxShadow = "0 4px 14px " + c1 + "55";
                setTimeout(function() {
                    cycleIdx = (cycleIdx + 1) % 3;
                    setTimeout(runCycle, 500);
                }, 2600);
                return;
            }
            setTimeout(function() {
                typeInto(si, DATA[si][cycleIdx], function() {
                    si++;
                    fillNext();
                });
            }, si === 0 ? 700 : 100);
        })();
    }

    runCycle();
})();
</script>
{% endset %}


{# ================================================================
   FEATURE 3 VISUAL — Lancement Serenia
   ================================================================ #}
{% set promptlySereniaVisual %}
<div id="promptly-serenia-demo" 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:9px 14px;background:#F0F4FA;border-bottom:1px solid #E5E7EB;">
        <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:5px;padding:3px 12px;border-radius:999px;background:white;border:1px solid #E5E7EB;font-family:monospace;font-size:10px;color:#9CA3AF;">
                <span style="width:5px;height:5px;border-radius:50%;background:#27C93F;flex-shrink:0;display:inline-block;"></span>
                <span class="pss-url-text">bubul.app/promptly</span>
            </div>
        </div>
    </div>

    <div style="background:#F9FAFB;position:relative;overflow:hidden;">

        {# ── ÉCRAN 1 : Promptly ── #}
        <div class="pss-screen-promptly" style="display:flex;flex-direction:column;transition:opacity 0.3s,transform 0.3s;">

            {# Header Promptly (fidèle à index.html.twig) #}
            <div style="background:linear-gradient(to right,{{ c1 }}0d,white,white);border-bottom:1px solid #E5E7EB;padding:10px 14px;display:flex;align-items:center;gap:10px;">
                <div style="width:36px;height:36px;border-radius:10px;background:{{ c1 }}14;border:1px solid {{ c1 }}1a;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" stroke="{{ c1 }}" stroke-width="1.5" stroke-linejoin="round"/></svg>
                </div>
                <div>
                    <div style="font-size:13px;font-weight:700;color:#111827;line-height:1.2;">Promptly</div>
                    <div style="font-size:10px;color:#9CA3AF;">Bibliothèque de prompts IA</div>
                </div>
                <div style="margin-left:auto;display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:{{ c1 }}0d;">
                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" stroke="{{ c1 }}" stroke-width="1.5" stroke-linejoin="round"/></svg>
                    <span style="font-size:11px;font-weight:600;color:{{ c1 }};">24 prompts</span>
                </div>
            </div>

            {# Card (fidèle à promptly-card molecule) #}
            <div style="padding:10px;">
                <div style="background:white;border-radius:12px;border:1px solid #F3F4F6;overflow:hidden;">
                    <div style="padding:12px;display:flex;flex-direction:column;gap:8px;">

                        {# Ligne titre + badge tag #}
                        <div style="display:flex;align-items:flex-start;gap:8px;">
                            <div style="flex:1;font-size:12px;font-weight:600;color:#111827;line-height:1.4;">Résumé de cours structuré</div>
                            <span style="flex-shrink:0;font-size:9px;font-weight:600;padding:2px 6px;border-radius:5px;background:#F5F3FF;color:#6D28D9;border:1px solid #DDD6FE;text-transform:uppercase;letter-spacing:0.04em;margin-top:1px;">pédagogie</span>
                        </div>

                        {# Aperçu body (monospace, gris, clamp) #}
                        <div style="font-size:10px;color:#9CA3AF;font-family:monospace;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
                            Résume ce cours en 5 points clés adaptés à des apprenants débutants. Format : liste à puces. Ton : pédagogique.
                        </div>

                        {# Footer card : auteur | actions #}
                        <div style="display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid #F3F4F6;">
                            <div style="display:flex;align-items:center;gap:5px;">
                                <div style="width:20px;height:20px;border-radius:50%;background:{{ c1 }}18;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:{{ c1 }};flex-shrink:0;">BN</div>
                                <span style="font-size:10px;color:#9CA3AF;">Baptiste</span>
                                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" style="color:#D1D5DB;"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20" stroke="currentColor" stroke-width="1.5"/></svg>
                            </div>
                            <div style="display:flex;align-items:center;gap:6px;">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" style="color:#D1D5DB;"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="1.5"/></svg>
                                <div style="display:flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#F59E0B;">
                                    <svg width="11" height="11" viewBox="0 0 24 24" fill="#F59E0B"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>
                                    18
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Barre d'action — sous la card #}
                    <div style="border-top:1px solid #F3F4F6;padding:8px 12px;display:flex;gap:6px;background:#FAFAFA;">
                        <button class="pss-btn-copy" style="display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 10px;border-radius:7px;border:1px solid #E5E7EB;background:white;font-size:10px;font-weight:600;color:#6B7280;cursor:pointer;transition:all 0.2s;flex-shrink:0;">
                            <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="2"/></svg>
                            Copier
                        </button>
                        <button class="pss-btn-serenia" style="display:flex;align-items:center;justify-content:center;gap:5px;flex:1;padding:5px 10px;border-radius:7px;border:none;background:{{ c1 }};color:white;font-size:10px;font-weight:700;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 6px {{ c1 }}40;">
                            <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            Ouvrir sur Serenia
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {# ── ÉCRAN 2 : Serenia ── #}
        <div class="pss-screen-serenia" style="display:none;flex-direction:column;opacity:0;transform:translateY(10px);transition:opacity 0.4s,transform 0.4s;">

            {# Header Serenia #}
            <div style="background:linear-gradient(to right,#6366F10d,white,white);border-bottom:1px solid #E5E7EB;padding:10px 14px;display:flex;align-items:center;gap:10px;">
                <div style="width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#6366F1,#8B5CF6);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px #6366F140;">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <div>
                    <div style="font-size:13px;font-weight:700;color:#111827;line-height:1.2;">Serenia</div>
                    <div style="font-size:10px;color:#9CA3AF;">Assistant IA conversationnel</div>
                </div>
                <div style="margin-left:auto;display:flex;align-items:center;gap:4px;font-size:9px;font-weight:600;color:#6366F1;background:#EEF2FF;padding:3px 8px;border-radius:5px;">
                    <span style="width:5px;height:5px;border-radius:50%;background:#6366F1;display:inline-block;animation:plBlink 1.5s ease-in-out infinite;"></span>
                    En ligne
                </div>
            </div>

            {# Zone chat #}
            <div style="flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;background:#F9FAFB;">

                {# Bulle assistant vide (historique) #}
                <div style="display:flex;align-items:flex-start;gap:7px;">
                    <div style="width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#6366F1,#8B5CF6);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="white" stroke-width="1.2"/></svg>
                    </div>
                    <div style="background:white;border:1px solid #E5E7EB;border-radius:2px 12px 12px 12px;padding:8px 10px;font-size:10px;color:#6B7280;max-width:80%;line-height:1.5;">
                        Bonjour ! Comment puis-je vous aider ?
                    </div>
                </div>

                {# Zone de saisie avec le prompt pré-rempli #}
                <div style="margin-top:auto;background:white;border:1px solid #6366F130;border-radius:10px;overflow:hidden;box-shadow:0 0 0 3px #6366F10a;">
                    <div style="padding:6px 10px 2px;display:flex;align-items:center;gap:4px;border-bottom:1px dashed #6366F118;">
                        <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" stroke="{{ c1 }}" stroke-width="1.5" stroke-linejoin="round"/></svg>
                        <span style="font-size:9px;font-weight:600;color:{{ c1 }};">via Promptly</span>
                    </div>
                    <div style="padding:7px 10px 4px;font-size:10px;color:#374151;font-family:monospace;line-height:1.6;">
                        Résume ce cours en 5 points clés adaptés à des apprenants débutants. Format : liste à puces. Ton : pédagogique.
                    </div>
                    <div style="padding:4px 8px 6px;display:flex;justify-content:flex-end;">
                        <div style="display:flex;align-items:center;gap:4px;padding:4px 12px;border-radius:7px;background:linear-gradient(135deg,#6366F1,#8B5CF6);color:white;font-size:10px;font-weight:700;">
                            <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            Envoyer
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
(function() {
    var el = document.getElementById("promptly-serenia-demo");
    if (!el) return;
    var c1 = "{{ c1 }}";
    var screenP  = el.querySelector(".pss-screen-promptly");
    var screenS  = el.querySelector(".pss-screen-serenia");
    var btnS     = el.querySelector(".pss-btn-serenia");
    var btnC     = el.querySelector(".pss-btn-copy");
    var urlText  = el.querySelector(".pss-url-text");
    var state = 0;

    function showPromptly() {
        state = 0;
        screenS.style.display  = "none";
        screenS.style.opacity  = "0";
        screenP.style.display  = "flex";
        screenP.style.opacity  = "1";
        screenP.style.transform = "translateY(0)";
        btnS.style.transform   = "scale(1)";
        urlText.textContent    = "bubul.app/promptly";
    }

    function showSerenia() {
        state = 1;
        screenP.style.opacity   = "0";
        screenP.style.transform = "translateY(-8px)";
        urlText.textContent     = "bubul.app/serenia";
        setTimeout(function() {
            screenP.style.display = "none";
            screenS.style.display = "flex";
            setTimeout(function() {
                screenS.style.opacity   = "1";
                screenS.style.transform = "translateY(0)";
            }, 40);
        }, 320);
    }

    btnS.addEventListener("click", function() {
        if (state === 0) { btnS.style.transform = "scale(0.95)"; setTimeout(showSerenia, 180); }
    });

    btnC.addEventListener("click", function() {
        btnC.textContent = "✓ Copié";
        btnC.style.color = c1; btnC.style.borderColor = c1 + "55";
        setTimeout(function() {
            btnC.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none"><rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" stroke="currentColor" stroke-width="2"/></svg> Copier';
            btnC.style.color = "#6B7280"; btnC.style.borderColor = "#E5E7EB";
        }, 1500);
    });

    function autoLoop() {
        setTimeout(function() {
            if (state !== 0) return;
            btnS.style.transform = "scale(0.95)";
            setTimeout(function() {
                showSerenia();
                setTimeout(function() { showPromptly(); autoLoop(); }, 3200);
            }, 180);
        }, 2800);
    }

    autoLoop();
})();
</script>
{% endset %}


{# ================================================================
   FEATURES ALTERNATING
   ================================================================ #}
{% include '_organisms/landing/features-alternating.html.twig' with {
    class: 'bg-white',
    id: 'features',
    features: [
        {
            tagLabel: 'Recherche instantanée',
            titleHtml: 'Trouver un prompt, <em class="not-italic" style="color:' ~ c1 ~ ';">c\'est instantané</em>',
            desc: 'Tapez un mot, n\'importe lequel — Promptly cherche partout : titre, contenu et tags. Plus besoin de se souvenir du nom exact d\'un prompt pour le retrouver.',
            bullets: [
                'Recherche partout en même temps (titre, texte, tags)',
                'Résultats qui s\'affinent à chaque lettre tapée',
                'Filtres par catégorie pour explorer un thème entier'
            ],
            accentColor: c1,
            visualHtml: promptlySearchVisual
        },
        {
            tagLabel: 'Prompts à trous',
            titleHtml: 'Un prompt, <em class="not-italic" style="color:' ~ c1 ~ ';">mille variantes</em>',
            desc: 'Glissez des variables dans votre prompt comme {{thème}} ou {{niveau}}. Au moment de l\'utiliser, vous n\'avez qu\'à remplir les blancs — comme un formulaire. Promptly fait le reste.',
            bullets: [
                'Variables {{...}} insérées dans le texte, à remplir au moment voulu',
                'Champs présentés un par un, comme un mini-formulaire',
                'Un prompt réutilisable à l\'infini avec des paramètres différents'
            ],
            accentColor: c1,
            visualHtml: promptlyVarsVisual
        },
        {
            tagLabel: 'Lancement direct',
            titleHtml: 'Vers Serenia en <em class="not-italic" style="color:' ~ c1 ~ ';">1 clic</em>',
            desc: 'Pourquoi copier-coller ? Cliquez sur « Ouvrir sur Serenia » et votre prompt arrive directement dans la conversation. Vous gardez votre rythme, l\'IA répond.',
            bullets: [
                'Le prompt s\'insère tout seul dans la zone de saisie Serenia',
                'Aucun copier-coller, aucune interruption',
                'Accessible depuis la bibliothèque ou la fiche d\'un prompt'
            ],
            accentColor: c1,
            visualHtml: promptlySereniaVisual
        }
    ]
} only %}


{# ================================================================
   GESTION DOSSIERS — Style Google Drive
   ================================================================ #}
<section class="py-20 reveal" style="background: linear-gradient(180deg, white 0%, {{ c3 }} 30%, {{ c3 }} 70%, white 100%);">
    <div class="max-w-[1280px] mx-auto px-6 lg:px-8">

        {# Header de section #}
        <div class="text-center max-w-2xl mx-auto mb-12">
            <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider mb-4"
                  style="background:{{ c1 }}14; color:{{ c1 }}; border:1px solid {{ c1 }}25;">
                <span>📁</span>
                Organisation
            </span>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight tracking-tight mb-4">
                Vos prompts <span style="color:{{ c1 }};">rangés comme dans un Drive</span>
            </h2>
            <p class="text-base sm:text-lg text-gray-500 leading-relaxed">
                Créez des dossiers, glissez vos prompts, organisez votre bibliothèque comme un vrai espace de travail. Plus votre collection grandit, plus vous gagnez en clarté.
            </p>
        </div>

        {# Layout 2 colonnes : bullets gauche / visuel droite #}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">

            {# Bullets gauche #}
            <div class="space-y-5 order-2 lg:order-1">
                {% set folderFeatures = [
                    { icon: 'folder', title: 'Dossiers et sous-dossiers', desc: 'Créez autant de dossiers que vous voulez. Imbriquez-les pour refléter exactement votre façon de travailler — un dossier par client, par cours, par projet.' },
                    { icon: 'sort', title: 'Glisser-déposer fluide', desc: 'Déplacez un prompt dans un dossier en le glissant simplement. Réorganisez votre bibliothèque sans friction, à tout moment.' },
                    { icon: 'edit', title: 'Renommer & supprimer', desc: 'Cliquez pour renommer un dossier. Supprimez-le et ses prompts retournent automatiquement à la racine — aucune perte de données.' },
                    { icon: 'lock', title: 'Privé par défaut', desc: 'Vos dossiers sont 100% privés. Personne d\'autre ne voit votre arborescence — c\'est votre espace de travail personnel.' }
                ] %}
                {% for feat in folderFeatures %}
                    <div class="flex items-start gap-4">
                        <div class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center"
                             style="background:{{ c1 }}14; color:{{ c1 }};">
                            {% include '_atoms/icon/icon.html.twig' with { name: feat.icon, size: 'sm', color: 'current' } only %}
                        </div>
                        <div>
                            <h3 class="text-base font-bold text-gray-900 mb-1">{{ feat.title }}</h3>
                            <p class="text-sm text-gray-500 leading-relaxed">{{ feat.desc }}</p>
                        </div>
                    </div>
                {% endfor %}
            </div>

            {# Visuel droite — Mockup Mes prompts avec dossiers #}
            <div class="order-1 lg:order-2">
                <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;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/promptly/mes-prompts
                            </div>
                        </div>
                    </div>

                    {# Header Mes prompts #}
                    <div style="background:white;padding:14px 18px;border-bottom:1px solid #F3F4F6;display:flex;align-items:center;gap:10px;">
                        <div style="font-size:14px;font-weight:700;color:#111827;">Mes prompts</div>
                        <div style="margin-left:auto;display:flex;gap:6px;">
                            <button style="display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:7px;background:white;border:1px solid #E5E7EB;font-size:10px;font-weight:600;color:#6B7280;cursor:pointer;">
                                <span>📁</span> Nouveau dossier
                            </button>
                            <button style="display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:7px;border:none;background:{{ c1 }};color:white;font-size:10px;font-weight:700;">
                                <span style="font-size:12px;line-height:1;">+</span> Nouveau prompt
                            </button>
                        </div>
                    </div>

                    {# Liste fichiers/dossiers style Drive #}
                    <div style="background:white;">

                        {# Dossier 1 ouvert avec sous-éléments #}
                        <div style="display:flex;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid #F3F4F6;background:#FFFBEB;">
                            <span style="font-size:12px;color:#9CA3AF;">▾</span>
                            <div style="width:26px;height:26px;border-radius:7px;background:#FEF3C7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" stroke="#F59E0B" stroke-width="1.8" stroke-linejoin="round"/></svg>
                            </div>
                            <span style="flex:1;font-size:12px;font-weight:600;color:#111827;">Cours universitaires</span>
                            <span style="font-size:10px;color:#9CA3AF;">3 prompts</span>
                        </div>

                        {# Sous-dossier indenté #}
                        <div style="display:flex;align-items:center;gap:10px;padding:10px 18px 10px 44px;border-bottom:1px solid #F3F4F6;">
                            <div style="width:22px;height:22px;border-radius:6px;background:#FEF3C7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" stroke="#F59E0B" stroke-width="1.8" stroke-linejoin="round"/></svg>
                            </div>
                            <span style="flex:1;font-size:11px;font-weight:600;color:#374151;">Master 1</span>
                            <span style="font-size:10px;color:#9CA3AF;">2 prompts</span>
                        </div>

                        {# Prompt indenté dans Cours #}
                        <div style="display:flex;align-items:center;gap:10px;padding:10px 18px 10px 44px;border-bottom:1px solid #F3F4F6;">
                            <div style="width:22px;height:22px;border-radius:6px;background:#F5F3FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="11" height="11" viewBox="0 0 24 24" fill="none"><path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" stroke="#8B5CF6" stroke-width="1.5" stroke-linejoin="round"/></svg>
                            </div>
                            <span style="flex:1;font-size:11px;font-weight:500;color:#374151;">Plan de cours type</span>
                            <span style="font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;background:#F5F3FF;color:#6D28D9;border:1px solid #DDD6FE;">pédagogie</span>
                        </div>

                        {# Dossier 2 (fermé) #}
                        <div style="display:flex;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid #F3F4F6;">
                            <span style="font-size:12px;color:#9CA3AF;">▸</span>
                            <div style="width:26px;height:26px;border-radius:7px;background:#FEF3C7;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" stroke="#F59E0B" stroke-width="1.8" stroke-linejoin="round"/></svg>
                            </div>
                            <span style="flex:1;font-size:12px;font-weight:600;color:#111827;">Marketing</span>
                            <span style="font-size:10px;color:#9CA3AF;">5 prompts</span>
                        </div>

                        {# Prompt orphelin (à la racine) #}
                        <div style="display:flex;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid #F3F4F6;">
                            <span style="font-size:12px;color:transparent;">▸</span>
                            <div style="width:26px;height:26px;border-radius:7px;background:#EFF6FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="#3B82F6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </div>
                            <span style="flex:1;font-size:12px;font-weight:500;color:#374151;">Quiz formatif 10 QCM</span>
                            <span style="font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;">quiz</span>
                        </div>

                        {# Prompt en cours de drag (semi-transparent + bordure) #}
                        <div style="display:flex;align-items:center;gap:10px;padding:11px 18px;background:{{ c1 }}08;border:2px dashed {{ c1 }}55;border-radius:8px;margin:6px;opacity:0.85;">
                            <span style="font-size:12px;color:{{ c1 }};">↘</span>
                            <div style="width:26px;height:26px;border-radius:7px;background:#F0FDF4;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="#22C55E" stroke-width="1.5" stroke-linecap="round"/></svg>
                            </div>
                            <span style="flex:1;font-size:12px;font-weight:500;color:#374151;">Email de prospection B2B</span>
                            <span style="font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;background:{{ c1 }}; color:white;">Glisser ici</span>
                        </div>

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

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



{# ================================================================
   ÉCOSYSTÈME
   ================================================================ #}
{% include '_organisms/landing/tools-ecosystem.html.twig' with {
    surtitle: 'Écosystème Bubul',
    titleHtml: 'Promptly s\'intègre à <br><span style="color:' ~ c1 ~ ';">tous les outils Bubul.</span>',
    subtitle: 'Moodia, Serenia, Slidia, Castia, Monalisia — vos prompts deviennent le carburant de toute la suite IA pédagogique, dans un seul compte.',
    accentColor: c1,
    exclude: ['promptly', 'sam']
} only %}


{# ================================================================
   FAQ
   ================================================================ #}
{% include '_organisms/landing/faq.html.twig' with {
    eyebrow: 'FAQ Promptly',
    accentColor: c1,
    accentColorDark: c1dark,
    tagline: 'Vos questions, nos réponses claires.',
    questions: [
        {
            question: 'Promptly est-il vraiment gratuit ?',
            answer: 'Oui, <strong>Promptly est gratuit pour tous</strong>, même sur le plan freemium. Créer, rechercher, organiser et lancer un prompt ne consomme <strong>aucun token</strong>.',
            icon: 'gift'
        },
        {
            question: 'Quelle est la différence entre un prompt public et un prompt privé ?',
            answer: 'Un prompt <strong>public</strong> est visible par toute la communauté Bubul dans la bibliothèque commune. Un prompt <strong>privé</strong> reste uniquement dans votre espace « Mes prompts » — personne d\'autre ne peut le voir. Les prompts privés sont réservés aux utilisateurs avec un <strong>abonnement payant</strong>.',
            icon: 'lock'
        },
        {
            question: 'Comment envoyer un prompt sur Serenia ?',
            answer: 'Depuis la fiche d\'un prompt, cliquez sur <strong>« Ouvrir sur Serenia »</strong>. Le prompt apparaît directement dans la zone de saisie Serenia, prêt à être envoyé. Aucun copier-coller, aucune perte de temps.',
            icon: 'send'
        },
        {
            question: 'Puis-je réutiliser les prompts des autres utilisateurs ?',
            answer: 'Oui. Tous les prompts <strong>publics</strong> de la communauté Bubul sont disponibles. Vous pouvez les lancer tels quels sur Serenia, ou les <strong>copier dans votre bibliothèque personnelle</strong> pour les modifier à votre sauce.',
            icon: 'copy'
        },
        {
            question: 'Comment fonctionnent les variables {{...}} ?',
            answer: 'Vous écrivez un prompt avec des « blancs » — par exemple <code>{{thème}}</code> ou <code>{{niveau}}</code>. Au moment de l\'utiliser, Promptly affiche un mini-formulaire : vous remplissez chaque variable, et le prompt final est composé automatiquement avant l\'envoi.',
            icon: 'edit'
        },
        {
            question: 'La recherche analyse-t-elle le contenu des prompts ?',
            answer: 'Oui. La recherche scanne <strong>le titre, le corps du prompt et les tags</strong> en même temps, en temps réel. Quelques lettres suffisent pour faire remonter le bon prompt.',
            icon: 'search'
        }
    ]
} only %}


{# ================================================================
   FOOTER
   ================================================================ #}
{% include '_organisms/landing/footer.html.twig' with {
    links: [
        { label: 'Accueil', href: path('app_landing') },
        { label: 'LMS', href: path('app_landing') ~ '#lms' },
        { label: 'Tarifs', href: path('app_landing') ~ '#tarifs' },
        { label: 'FAQ', href: '#faq' }
    ]
} only %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <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 %}