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

{% block header_cta_label %}Essayer Serenia{% endblock %}
{% block header_active_code %}serenia{% endblock %}

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

{% block title %}Serenia — Assistant IA pédagogique pour les formateurs | Bubul.app{% endblock %}
{% block meta_description %}Analysez vos documents PDF, DOCX et Excel, générez des visuels pédagogiques, obtenez des réponses en temps réel. Serenia est l'assistant IA conçu pour les formateurs. Aucune donnée stockée.{% endblock %}
{% block meta_keywords %}assistant IA pédagogique, IA formateur, chatbot formation, analyse document IA, génération image formation, Serenia, Bubul{% endblock %}
{% block canonical %}https://bubul.app/outils/serenia{% endblock %}
{% block og_title %}Serenia — Assistant IA pédagogique pour les formateurs | Bubul.app{% endblock %}
{% block og_description %}Analysez vos documents, générez des visuels, obtenez des réponses pédagogiques en temps réel. Sans données stockées.{% endblock %}
{% block twitter_title %}Serenia — Assistant IA pédagogique | Bubul.app{% endblock %}
{% block twitter_description %}Analysez vos documents, générez des visuels, obtenez des réponses pédagogiques en temps réel. Sans données stockées.{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        html { scroll-behavior: smooth; }
        .section { position: relative; }
        .font-display { font-family: 'Sora', 'Poppins', -apple-system, sans-serif; }
        .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

        /* ── Reveal ── */
        .reveal { opacity: 0; transform: translateY(28px); 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.10s; }
        .reveal-delay-2 { transition-delay: 0.20s; }
        .reveal-delay-3 { transition-delay: 0.30s; }
        .reveal-delay-4 { transition-delay: 0.40s; }

        /* ── Serenia gradient text ── */
        .serenia-gradient-text {
            background: linear-gradient(135deg, {{ c1dark }}, {{ c2 }}, {{ c2 }});
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Hero → organism: _organisms/landing/hero-tool.html.twig */

        /* ─────────────────────────────────────
           CHAT MOCKUP
        ───────────────────────────────────── */

        /* Floating badge */
        .serenia-float-badge {
            position: absolute;
            bottom: -14px; left: 28px;
            background: white;
            border: 1px solid {{ c3 }};
            border-radius: 100px;
            padding: 6px 14px;
            font-size: 0.73rem;
            color: #5A6B7F;
            font-family: 'Poppins', sans-serif; font-weight: 500;
            box-shadow: 0 4px 16px rgba(0,0,0,0.08);
            display: flex; align-items: center; gap: 6px;
            z-index: 2;
            animation: sereniaFloat 3s ease-in-out infinite;
        }
        @keyframes sereniaFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-4px); }
        }
        .serenia-float-dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: {{ c1 }};
            animation: sereniaLivePulse 1.5s ease-in-out infinite;
        }
        @keyframes sereniaLivePulse {
            0%, 100% { box-shadow: 0 0 0 3px rgba({{ c1dark|hex_to_rgb }}, 0.15); }
            50% { box-shadow: 0 0 0 6px rgba({{ c1dark|hex_to_rgb }}, 0.06); }
        }

        /* Window chrome */
        .serenia-chat-bar {
            background: #F0F4FA;
            border-bottom: 1px solid rgba({{ c1|hex_to_rgb }}, 0.08);
            padding: 10px 16px;
            display: flex; align-items: center; gap: 8px;
        }
        .s-dots { display: flex; gap: 5px; flex-shrink: 0; }
        .s-dot { width: 10px; height: 10px; border-radius: 50%; }
        .s-dot-r { background: #FF5F56; }
        .s-dot-y { background: #FFBD2E; }
        .s-dot-g { background: #28C840; }
        .s-title {
            flex: 1; text-align: center;
            color: #9CA3AF;
            font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
            display: flex; align-items: center; justify-content: center; gap: 6px;
        }
        .s-token {
            background: rgba({{ c1|hex_to_rgb }}, 0.10); border: 1px solid rgba({{ c1|hex_to_rgb }}, 0.20);
            color: {{ c1dark }}; border-radius: 20px; padding: 2px 10px;
            font-family: 'JetBrains Mono', monospace; font-size: 0.67rem; flex-shrink: 0;
        }

        /* Messages */
        .serenia-chat-body {
            padding: 18px 16px; background: #F8F9FF;
            display: flex; flex-direction: column; gap: 13px;
        }
        .s-file-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: white; border: 1px solid {{ c3 }};
            border-radius: 10px; padding: 7px 13px;
            font-size: 0.77rem; color: {{ c1dark }};
            box-shadow: 0 1px 4px rgba({{ c1dark|hex_to_rgb }}, 0.06);
            align-self: flex-start;
        }
        .s-file-ok {
            width: 15px; height: 15px; border-radius: 50%;
            background: #309344; color: white;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.5rem; flex-shrink: 0;
        }
        .s-msg-user {
            background: linear-gradient(135deg, {{ c1 }}, {{ c2 }});
            color: white; border-radius: 12px 12px 4px 12px;
            padding: 10px 14px; font-size: 0.83rem; line-height: 1.55;
            align-self: flex-end; max-width: 88%;
        }
        .s-msg-ai { display: flex; gap: 10px; align-items: flex-start; }
        .s-ai-avatar {
            width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
            background: linear-gradient(135deg, {{ c1 }}, {{ c2 }});
            color: white; display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 700; font-family: 'Poppins', sans-serif;
        }
        .s-ai-bubble {
            background: white; border: 1px solid {{ c3 }};
            border-radius: 4px 12px 12px 12px;
            padding: 10px 13px; font-size: 0.81rem; line-height: 1.6; color: #1A2B3F;
            box-shadow: 0 1px 4px rgba({{ c1dark|hex_to_rgb }}, 0.05);
            max-width: calc(100% - 40px);
        }
        .s-ai-name {
            font-family: 'Poppins', sans-serif; font-size: 0.7rem; font-weight: 600;
            color: {{ c1 }}; margin-bottom: 6px;
        }
        .s-list { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
        .s-list-item { display: flex; gap: 7px; font-size: 0.79rem; color: #374151; }
        .s-bullet { color: {{ c2 }}; flex-shrink: 0; font-weight: 700; }
        .s-cursor {
            display: inline-block; width: 2px; height: 12px;
            background: {{ c1 }}; vertical-align: middle; margin-left: 2px;
            animation: sCursor 1s step-end infinite;
        }
        @keyframes sCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

        /* Input area */
        .s-chat-input {
            padding: 11px 16px; border-top: 1px solid {{ c3 }}; background: white;
            display: flex; align-items: center; gap: 10px;
        }
        .s-input-bar {
            flex: 1; background: {{ c3 }}; border-radius: 10px;
            padding: 9px 13px; font-size: 0.8rem; color: {{ c1dark }};
            font-family: 'Roboto', sans-serif;
        }
        .s-send {
            width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
            background: linear-gradient(135deg, {{ c1 }}, {{ c2 }});
            display: flex; align-items: center; justify-content: center;
        }

        /* ─────────────────────────────────────
           PAIN CARDS
        ───────────────────────────────────── */
        .pain-card {
            background: white; border: 1px solid {{ c3 }};
            border-radius: 18px; padding: 32px 26px;
            transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
        }
        .pain-card:hover {
            box-shadow: 0 12px 40px rgba({{ c1dark|hex_to_rgb }}, 0.10);
            border-color: rgba({{ c1|hex_to_rgb }}, 0.3);
            transform: translateY(-2px);
        }
        .pain-card-icon {
            width: 48px; height: 48px; background: rgba({{ c1|hex_to_rgb }}, 0.08);
            border-radius: 13px; display: flex; align-items: center; justify-content: center;
            margin-bottom: 18px;
        }
        .pain-card-title {
            font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 600;
            color: #1A2B3F; margin-bottom: 10px;
        }
        .pain-card-text { font-size: 0.88rem; line-height: 1.75; color: #5A6B7F; }

        /* ─────────────────────────────────────
           SKELETON SHIMMER
        ───────────────────────────────────── */
        @keyframes sk { 0%{background-position:-600px 0} 100%{background-position:600px 0} }
        .serenia-page .sk {
            background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
            background-size: 600px 100%;
            animation: sk 1.6s ease-in-out infinite;
        }
        @keyframes sereniaTyping {
            0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
            40% { opacity: 1; transform: scale(1); }
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        .serenia-cursor { display: inline-block; width: 2px; height: 11px; border-radius: 1px; vertical-align: middle; margin-left: 2px; animation: blink 1s step-end infinite; }

        /* ─────────────────────────────────────
           RESPONSIVE
        ───────────────────────────────────── */
        @media (max-width: 1024px) {
            .serenia-mockup-wrap { max-width: 100%; margin: 0 auto; }
        }
        @media (max-width: 768px) {
            .serenia-float-badge { display: none; }
        }
        /* ─────────────────────────────────────
           HERO MOCKUP RESPONSIVE
        ───────────────────────────────────── */
        @media (max-width: 1023px) {
            .serenia-hero-mockup-wrap { max-width: 480px; margin: 0 auto; }
            .s-card-back { display: none; }
        }
        @media (max-width: 480px) {
            .serenia-hero-mockup-wrap { padding: 0 !important; }
            .s-header-badges { display: none !important; }
        }

        @media (max-width: 480px) {
            .serenia-trust-row { gap: 6px; }
            .s-token { display: none; }
        }

        /* ─────────────────────────────────────
           FEATURE 1 MOCKUP RESPONSIVE
        ───────────────────────────────────── */
        @media (max-width: 640px) {
            .sfd1-suggestions { grid-template-columns: 1fr 1fr !important; }
            .sfd1-badges { display: none !important; }
        }
        @media (max-width: 400px) {
            .sfd1-suggestions { grid-template-columns: 1fr !important; }
        }

        /* ─────────────────────────────────────
           FEATURE 2 MOCKUP RESPONSIVE
        ───────────────────────────────────── */
        @media (max-width: 640px) {
            .sfd2-badges { display: none !important; }
        }
    </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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
{% endblock %}

{% block landing_content %}

{# ── Schema.org ── #}
<script type="application/ld+json">
[{
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Serenia",
    "applicationCategory": "EducationalApplication",
    "operatingSystem": "Web",
    "inLanguage": "fr",
    "url": "https://bubul.app/outils/serenia",
    "offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
    "description": "Serenia est l'assistant IA conversationnel pour les formateurs. Analyse PDF/DOCX/Excel, g\u00e9n\u00e9ration d'images gpt-image-2, z\u00e9ro donn\u00e9e stock\u00e9e.",
    "audience": { "@type": "EducationalAudience", "educationalRole": "teacher" },
    "featureList": ["Analyse PDF DOCX Excel","G\u00e9n\u00e9ration images gpt-image-2","Streaming temps r\u00e9el","Z\u00e9ro donn\u00e9e stock\u00e9e","P\u00e9dagogie m\u00e9tier"],
    "provider": { "@type": "Organization", "name": "Bubul", "url": "https://bubul.app" }
},{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {"@type":"Question","name":"Qu'est-ce que Serenia ?","acceptedAnswer":{"@type":"Answer","text":"Serenia est un assistant IA conversationnel sp\u00e9cialis\u00e9 pour les formateurs. Il analyse vos documents p\u00e9dagogiques et g\u00e9n\u00e8re des visuels en temps r\u00e9el."}},
        {"@type":"Question","name":"Mes fichiers sont-ils stock\u00e9s ?","acceptedAnswer":{"@type":"Answer","text":"Non. Les fichiers restent c\u00f4t\u00e9 navigateur et disparaissent quand vous quittez la page. Rien n'est conserv\u00e9 sur nos serveurs."}},
        {"@type":"Question","name":"En quoi Serenia diff\u00e8re de ChatGPT ?","acceptedAnswer":{"@type":"Answer","text":"Serenia est calibr\u00e9 pour la p\u00e9dagogie : il analyse vos fichiers de formation et g\u00e9n\u00e8re des images avec gpt-image-2."}},
        {"@type":"Question","name":"Quels fichiers puis-je analyser ?","acceptedAnswer":{"@type":"Answer","text":"PDF, DOCX et Excel. Aucune limite de taille — les fichiers volumineux consomment plus de tokens."}},
        {"@type":"Question","name":"Serenia g\u00e9n\u00e8re-t-il des images ?","acceptedAnswer":{"@type":"Answer","text":"Oui avec gpt-image-2. D\u00e9crivez le visuel, il le cr\u00e9e directement dans la conversation."}},
        {"@type":"Question","name":"L'historique est-il sauvegard\u00e9 ?","acceptedAnswer":{"@type":"Answer","text":"Non. Chaque session est \u00e9ph\u00e9m\u00e8re. La conversation disparait d\u00e8s que vous quittez la page."}}
    ]
}]
</script>

{# ── 2. Hero ── #}
{% set sereniaHeroMockup %}
    {# 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 — style Slidia #}
        <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/serenia
                </div>
            </div>
        </div>

        {# App header — fidèle à l'UI réelle #}
        <div style="display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: white; border-bottom: 1px solid #ECEEF2;">
            <div style="display: flex; align-items: center; gap: 10px;">
                <div style="width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, {{ c1 }}, {{ c2 }}); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-serenia', size: 'sm', color: 'white' } only %}
                </div>
                <div>
                    <div style="font-size: 11px; font-weight: 700; color: #1A2B3F; line-height: 1.2;">Serenia</div>
                    <div style="font-size: 11px; color: #8898AA; line-height: 1.3;">IA p&eacute;dagogique priv&eacute;e &ndash; Vos donn&eacute;es restent les v&ocirc;tres</div>
                </div>
            </div>
            <div class="s-header-badges" style="display: flex; align-items: center; gap: 8px;">
                <div style="display: flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 20px; background: {{ c1 }}12; border: 1px solid {{ c1 }}22;">
                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="{{ c1 }}" stroke-width="2.5"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                    <span style="font-size: 10px; font-weight: 700; color: {{ c1 }}; font-family: monospace;">983 884</span>
                    <span style="font-size: 9px; color: {{ c1 }}; opacity: 0.7;">tokens</span>
                </div>
                <div style="display: flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 20px; background: #FFF4E6; border: 1px solid #FFD9A0;">
                    <span style="font-size: 8px;">&#9889;</span>
                    <span style="font-size: 10px; font-weight: 700; color: #ED8600; font-family: monospace;">880 Wh</span>
                </div>
            </div>
        </div>

        {# Zone de chat #}
        <div style="background: white; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-height: 180px;">

            {# Message user #}
            <div style="display: flex; justify-content: flex-end; align-items: center; gap: 8px;">
                <div style="background: linear-gradient(135deg, {{ c1 }}, {{ c1dark }}); color: white; border-radius: 18px 18px 4px 18px; padding: 9px 13px; font-size: 12px; line-height: 1.5; max-width: 75%;">
                    Comment vas&nbsp;tu&nbsp;?
                </div>
                <div style="width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, {{ c1 }}, {{ c2 }}); color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0;">AM</div>
            </div>

            {# Message AI #}
            <div style="display: flex; align-items: flex-start; gap: 8px;">
                <div style="width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, {{ c1 }}, {{ c2 }}); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-serenia', size: 'xs', color: 'white' } only %}
                </div>
                <div style="background: #F8F9FF; border: 1px solid {{ c1 }}18; border-radius: 4px 14px 14px 14px; padding: 9px 12px; font-size: 11px; line-height: 1.65; color: #1A2B3F; max-width: calc(100% - 36px);">
                    Je vais tr&egrave;s bien, merci&nbsp;! Je suis l&agrave; pour t&rsquo;aider. Et toi, comment se passe ta journ&eacute;e&nbsp;?
                </div>
            </div>

            {# Message user 2 #}
            <div style="display: flex; justify-content: flex-end; align-items: center; gap: 8px;">
                <div style="background: linear-gradient(135deg, {{ c1 }}, {{ c1dark }}); color: white; border-radius: 18px 18px 4px 18px; padding: 9px 13px; font-size: 12px; line-height: 1.5; max-width: 85%;">
                    Peux tu m&rsquo;aider &agrave; cr&eacute;er un cours sur la cuisine mol&eacute;culaire
                </div>
                <div style="width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, {{ c1 }}, {{ c2 }}); color: white; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0;">AM</div>
            </div>

            {# Message AI 2 — en cours de génération #}
            <div style="display: flex; align-items: flex-start; gap: 8px;">
                <div style="width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, {{ c1 }}, {{ c2 }}); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'bubul-serenia', size: 'xs', color: 'white' } only %}
                </div>
                <div style="background: #F8F9FF; border: 1px solid {{ c1 }}18; border-radius: 4px 14px 14px 14px; padding: 9px 12px; font-size: 11px; line-height: 1.65; color: #1A2B3F; max-width: calc(100% - 36px);">
                    Bien s&ucirc;r&nbsp;! Voici quelques id&eacute;es pour structurer ton cours&nbsp;:<br>
                    <strong style="font-size: 12px; color: #0F172A;">1. Introduction &agrave; la cuisine mol&eacute;culaire</strong>
                    <div style="margin-top: 4px; display: flex; flex-direction: column; gap: 2px;">
                        <div style="display: flex; gap: 5px; font-size: 11px; color: #374151;"><span style="color: {{ c1 }}; font-weight: 700;">&bull;</span> <strong>D&eacute;finition</strong> : Qu&rsquo;est-ce que la cuisine mol&eacute;culaire&nbsp;?</div>
                        <div style="display: flex; gap: 5px; font-size: 11px; color: #374151;"><span style="color: {{ c1 }}; font-weight: 700;">&bull;</span> Histoi<span class="s-cursor"></span></div>
                    </div>
                </div>
            </div>
        </div>

        {# Barre d'input — fidèle à l'UI réelle #}
        <div style="padding: 10px 12px; border-top: 1px solid #ECEEF2; background: white;">
            <div style="display: flex; align-items: center; gap: 8px; background: #F3F6FA; border: 1.5px solid {{ c1 }}22; border-radius: 12px; padding: 8px 12px;">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#B0BDCF" stroke-width="2" style="flex-shrink:0;"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
                <span style="flex: 1; font-size: 11px; color: #B0BDCF;">Posez votre question p&eacute;dagogique...</span>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#B0BDCF" stroke-width="2"><path d="M12 1a3 3 0 013 3v8a3 3 0 01-6 0V4a3 3 0 013-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8"/></svg>
                <div style="width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, {{ c1 }}, {{ c1dark }}); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </div>
            </div>
        </div>
    </div>
{% endset %}

{% include '_organisms/landing/hero-tool.html.twig' with {
    toolName: 'Serenia',
    toolIcon: 'bubul-serenia',
    toolColor: 'primary',
    h1: 'Des questions ?<br><span class="serenia-gradient-text">Serenia est l&agrave; pour &ccedil;a.</span>',
    subtitle: 'Importez vos documents de formation, posez vos questions en langage naturel &mdash; Serenia analyse, structure et r&eacute;pond instantan&eacute;ment. <strong style="color: #1A2B3F;">Z&eacute;ro donn&eacute;e stock&eacute;e.</strong>',
    badge: 'Assistant pédagogique',
    ctaUrl: path('app_login'),
    ctaLabel: 'Commencer une conversation',
    pills: [],
    gradientStart: c1,
    gradientEnd: c2,
    visualHtml: sereniaHeroMockup
} only %}

{# ── 3. Social proof ── #}
{% set sereniaStats = [
    { value: (betaCount ?? 0) > 0 ? betaCount ~ '+' : '–',                       gradient: 'linear-gradient(135deg, ' ~ c1dark ~ ', ' ~ c1 ~ ')', label: 'Formateurs', sublabel: 'sur la plateforme Bubul' },
    { value: (sereniaConversations ?? 0) > 0 ? sereniaConversations ~ '+' : '–', gradient: 'linear-gradient(135deg, ' ~ c1 ~ ', ' ~ c2 ~ ')',     label: 'Sessions',   sublabel: 'lancées avec Serenia' },
    { value: '3',                                                                 gradient: 'linear-gradient(135deg, ' ~ c1dark ~ ', ' ~ c2 ~ ')', label: 'Formats',    sublabel: 'PDF · DOCX · Excel' },
    { value: '100%',                                                              gradient: 'linear-gradient(135deg, ' ~ c1 ~ ', ' ~ c2 ~ ')',     label: 'Privé',      sublabel: 'Zéro donnée stockée' },
] %}
{% include '_organisms/landing/social-proof.html.twig' with { stats: sereniaStats } only %}

{# ── 4. Section problème — TODO(human) ── #}
<section class="py-20 lg:py-28" id="probleme" style="background: color-mix(in srgb, {{ c3 }} 20%, white);">
    <div class="max-w-[1100px] mx-auto px-6 lg:px-8">
        <div class="text-center mb-16 reveal">
            <p class="font-secondary text-xs font-bold tracking-[3px] mb-4 uppercase" style="color: {{ c2 }};">AVANT SERENIA</p>
            <h2 class="font-display text-3xl md:text-4xl lg:text-[2.6rem] font-bold mb-5 leading-tight" style="color: #0F172A;">
                Chaque heure pass&eacute;e &agrave; chercher<br class="hidden md:block"> est une heure sans former.
            </h2>
            <p class="text-lg max-w-[520px] mx-auto leading-relaxed" style="color: #5A6B7F;">
                Les formateurs perdent un temps pr&eacute;cieux sur des t&acirc;ches que Serenia r&eacute;sout en secondes.
            </p>
        </div>

        {# ===================================================================== #}
        {# TODO(human): Ajoute ici les 3 cartes "pain point" du formateur.       #}
        {# Utilise la structure `.pain-card` documentée dans les commentaires    #}
        {# du premier commit, ou ci-dessous :                                    #}
        {#                                                                        #}
        {# <div class="pain-card reveal">                                        #}
        {#     <div class="pain-card-icon">                                      #}
        {#         {% include '_atoms/icon/icon.html.twig' with {                #}
        {#             name: 'ICON_NAME', size: 'lg', color: 'primary'           #}
        {#         } only %}                                                      #}
        {#     </div>                                                             #}
        {#     <h3 class="pain-card-title">Titre court du problème</h3>          #}
        {#     <p class="pain-card-text">2 lignes max — le vécu concret.</p>     #}
        {# </div>                                                                 #}
        {# ===================================================================== #}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
            {# 3 pain-card ici #}
        </div>

    </div>
</section>

{# ── 5. Fonctionnalités (features-alternating avec skeleton UIs) ── #}
{% set sereniaFeatures = [
    {
        tagLabel: 'Historique & personnalisation',
        titleHtml: 'Naviguez entre vos &eacute;changes, <span style="background: linear-gradient(135deg, ' ~ c1dark ~ ', ' ~ c2 ~ '); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">adaptez votre IA</span>',
        desc: "Retrouvez n'importe quelle conversation en un clic depuis la sidebar. Configurez le style, le mode et la puissance de l'IA selon votre contexte — chaque session repart avec vos préférences.",
        bullets: [
            "Sidebar avec tout l'historique organisé par date",
            "STYLE, MODE et puissance IA personnalisables à chaque échange",
            "Upload de fichiers directement dans la barre de saisie"
        ],
        accentColor: c1,
        visualHtml: '
<div class="serenia-page">
<div style="position: relative; padding: 8px 8px 12px 8px;">
    <div id="sfd1" data-c1="' ~ c1 ~ '" data-c2="' ~ c2 ~ '" data-cdark="' ~ c1dark ~ '" style="position: relative; border: 1px solid ' ~ c1 ~ '1F; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 80px ' ~ c1 ~ '1A, 0 4px 16px rgba(0,0,0,0.04);">

        <div style="display:flex;align-items:center;gap:6px;padding:10px 14px;background:#EEF2F8;border-bottom:1px solid #E5E9F0;">
            <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;flex-shrink:0;"></span>
            <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;flex-shrink:0;"></span>
            <span style="width:10px;height:10px;border-radius:50%;background:#28C840;flex-shrink:0;"></span>
            <div style="flex:1;display:flex;justify-content:center;">
                <div style="background:white;border-radius:999px;padding:3px 12px;display:flex;align-items:center;gap:5px;border:1px solid #E2E6EE;">
                    <span style="width:6px;height:6px;border-radius:50%;background:#28C840;flex-shrink:0;"></span>
                    <span style="font-family:monospace;font-size:9px;color:#8898AA;">bubul.app/serenia</span>
                </div>
            </div>
        </div>

        <div style="display:flex;height:310px;">

            <div style="width:27%;border-right:1px solid #E5E9F0;background:#F7F8FA;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;">
                <div style="padding:10px 12px 8px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #ECEEF2;">
                    <div style="width:22px;height:22px;border-radius:7px;background:' ~ c1 ~ '18;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path fill="' ~ c1 ~ '" opacity="0.5" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88836 21.6244 10.4003 22 12 22Z"/><path fill="' ~ c1 ~ '" d="M7.825 12.85C7.36937 12.85 7 13.2194 7 13.675C7 14.1306 7.36937 14.5 7.825 14.5H13.875C14.3306 14.5 14.7 14.1306 14.7 13.675C14.7 13.2194 14.3306 12.85 13.875 12.85H7.825Z"/><path fill="' ~ c1 ~ '" d="M7.825 9C7.36937 9 7 9.36937 7 9.825C7 10.2806 7.36937 10.65 7.825 10.65H16.625C17.0806 10.65 17.45 10.2806 17.45 9.825C17.45 9.36937 17.0806 9 16.625 9H7.825Z"/></svg>
                    </div>
                    <span style="font-size:10px;font-weight:800;color:' ~ c1 ~ ';">Serenia</span>
                </div>
                <div style="padding:6px 8px 4px;">
                    <div style="display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:6px;margin-bottom:2px;">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
                        <span style="font-size:7.5px;color:#6B7280;">Nouvelle conversation</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:6px;">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#9CA3AF" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                        <span style="font-size:7.5px;color:#6B7280;">Rechercher dans les chats</span>
                    </div>
                </div>
                <div style="flex:1;overflow:hidden;padding:4px 0;">
                    <div style="padding:4px 12px 2px;">
                        <span style="font-size:6px;font-weight:700;letter-spacing:0.06em;color:#9CA3AF;text-transform:uppercase;">Aujourd&rsquo;hui</span>
                    </div>
                    <div id="sfd1-c1" style="padding:4px 10px;margin:0 4px;border-radius:6px;transition:background 0.3s;">
                        <span style="font-size:7.5px;color:#374151;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Seconde Guerre mondiale&hellip;</span>
                    </div>
                    <div id="sfd1-c2" style="padding:4px 10px;margin:0 4px;border-radius:6px;transition:background 0.3s;">
                        <span style="font-size:7.5px;color:#374151;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Communication p&eacute;dago&hellip;</span>
                    </div>
                    <div id="sfd1-c3" style="padding:4px 10px;margin:0 4px;border-radius:6px;transition:background 0.3s;">
                        <span style="font-size:7.5px;color:#374151;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">R&eacute;sum&eacute; concis seconde&hellip;</span>
                    </div>
                    <div style="padding:4px 12px 2px;margin-top:4px;">
                        <span style="font-size:6px;font-weight:700;letter-spacing:0.06em;color:#9CA3AF;text-transform:uppercase;">Hier</span>
                    </div>
                    <div id="sfd1-c4" style="padding:4px 10px;margin:0 4px;border-radius:6px;transition:background 0.3s;">
                        <span style="font-size:7.5px;color:#374151;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Introduction assistance&hellip;</span>
                    </div>
                    <div id="sfd1-c5" style="padding:4px 10px;margin:0 4px;border-radius:6px;transition:background 0.3s;">
                        <span style="font-size:7.5px;color:#374151;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Cours algorithmie d&eacute;v&hellip;</span>
                    </div>
                </div>
                <div style="padding:8px 10px;border-top:1px solid #E5E9F0;">
                    <div style="display:flex;align-items:center;gap:4px;margin-bottom:3px;">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path fill="' ~ c1 ~ '" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88836 21.6244 10.4003 22 12 22Z"/></svg>
                        <span style="font-size:7.5px;font-weight:700;color:' ~ c1 ~ ';font-family:monospace;">68 133 466</span>
                        <span style="font-size:7px;color:' ~ c1 ~ ';">tok.</span>
                    </div>
                    <div style="display:flex;align-items:center;gap:4px;">
                        <span style="color:#ED8600;font-size:9px;line-height:1;">&#9889;</span>
                        <span style="font-size:7.5px;font-weight:700;color:#ED8600;font-family:monospace;">9,56</span>
                        <span style="font-size:7px;color:#ED8600;">kWh</span>
                    </div>
                </div>
            </div>

            <div style="flex:1;display:flex;flex-direction:column;overflow:hidden;background:white;">
                <div style="flex:1;overflow:hidden;position:relative;">
                <div id="sfd1-welcome" style="padding:10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;box-sizing:border-box;">
                    <div style="width:46px;height:46px;border-radius:50%;background:' ~ c1 ~ '18;display:flex;align-items:center;justify-content:center;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path fill="' ~ c1 ~ '" opacity="0.5" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88836 21.6244 10.4003 22 12 22Z"/><path fill="' ~ c1 ~ '" d="M7.825 12.85C7.36937 12.85 7 13.2194 7 13.675C7 14.1306 7.36937 14.5 7.825 14.5H13.875C14.3306 14.5 14.7 14.1306 14.7 13.675C14.7 13.2194 14.3306 12.85 13.875 12.85H7.825Z"/><path fill="' ~ c1 ~ '" d="M7.825 9C7.36937 9 7 9.36937 7 9.825C7 10.2806 7.36937 10.65 7.825 10.65H16.625C17.0806 10.65 17.45 10.2806 17.45 9.825C17.45 9.36937 17.0806 9 16.625 9H7.825Z"/></svg>
                    </div>
                    <div style="text-align:center;">
                        <div style="font-size:13px;font-weight:800;color:#1A2B3F;margin-bottom:3px;">Bonjour, Andrew</div>
                        <div style="font-size:8px;color:#9CA3AF;">Comment puis-je vous aider aujourd&rsquo;hui ?</div>
                    </div>
                    <div style="width:70%;border:1px solid #E5E9F0;border-radius:8px;padding:7px 10px;background:white;">
                        <div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
                            <span style="font-size:6px;font-weight:700;letter-spacing:0.06em;color:#9CA3AF;width:28px;flex-shrink:0;text-transform:uppercase;">Style</span>
                            <div style="display:flex;align-items:center;gap:4px;">
                                <span style="padding:2px 8px;border-radius:99px;background:' ~ c1 ~ '15;border:1px solid ' ~ c1 ~ '35;font-size:7px;font-weight:600;color:' ~ c1 ~ ';">Bienveillant</span>
                                <span style="padding:2px 8px;border-radius:99px;border:1px solid #E5E7EB;font-size:7px;color:#6B7280;">Direct</span>
                                <span style="padding:2px 8px;border-radius:99px;border:1px solid #E5E7EB;font-size:7px;color:#6B7280;">Cr&eacute;atif</span>
                            </div>
                        </div>
                        <div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
                            <span style="font-size:6px;font-weight:700;letter-spacing:0.06em;color:#9CA3AF;width:28px;flex-shrink:0;text-transform:uppercase;">Mode</span>
                            <div style="display:flex;align-items:center;gap:4px;">
                                <span style="padding:2px 8px;border-radius:99px;border:1px solid #E5E7EB;font-size:7px;color:#6B7280;">Analyse</span>
                                <span style="padding:2px 8px;border-radius:99px;border:1px solid #E5E7EB;font-size:7px;color:#6B7280;">Cr&eacute;ation</span>
                                <span style="padding:2px 8px;border-radius:99px;background:' ~ c1 ~ '15;border:1px solid ' ~ c1 ~ '35;font-size:7px;font-weight:600;color:' ~ c1 ~ ';">Coaching</span>
                            </div>
                        </div>
                        <div style="display:flex;align-items:center;gap:6px;">
                            <span style="font-size:6px;font-weight:700;letter-spacing:0.06em;color:#9CA3AF;width:28px;flex-shrink:0;text-transform:uppercase;">IA</span>
                            <div style="display:flex;align-items:center;gap:4px;">
                                <span style="padding:2px 7px;border-radius:99px;background:#F0FDF4;border:1px solid #BBF7D0;font-size:7px;font-weight:600;color:#15803D;display:inline-flex;align-items:center;gap:3px;"><span style="width:5px;height:5px;border-radius:50%;background:#22C55E;flex-shrink:0;"></span>Rapide 1&times;</span>
                                <span style="padding:2px 7px;border-radius:99px;border:1px solid #E5E7EB;font-size:7px;color:#6B7280;display:inline-flex;align-items:center;gap:3px;"><span style="width:5px;height:5px;border-radius:50%;background:#F59E0B;flex-shrink:0;"></span>Standard &asymp;3&times;</span>
                                <span style="padding:2px 7px;border-radius:99px;border:1px solid #E5E7EB;font-size:7px;color:#6B7280;display:inline-flex;align-items:center;gap:3px;"><span style="width:5px;height:5px;border-radius:50%;background:#EF4444;flex-shrink:0;"></span>Complexe &asymp;5&times;</span>
                            </div>
                        </div>
                    </div>
                    <div style="display:flex;align-items:center;gap:4px;">
                        <svg width="8" height="8" viewBox="0 0 24 24" fill="#9CA3AF"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                        <span style="font-size:7.5px;color:#9CA3AF;">Donn&eacute;es prot&eacute;g&eacute;es &middot; Conversations chiffr&eacute;es</span>
                    </div>
                </div>
                <div id="sfd1-conv" style="display:none;padding:12px;flex-direction:column;gap:8px;overflow:hidden;height:100%;"></div>
                </div>
                <div style="padding:4px 10px;border-top:1px solid #ECEEF2;background:white;">
                    <div style="display:flex;align-items:center;gap:6px;background:#F3F6FA;border:1.5px solid #E5E7EB;border-radius:14px;padding:3px 8px;">
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#C4C9D4" stroke-width="2" style="flex-shrink:0;"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
                        <span style="flex:1;font-size:8px;color:#B0BDCF;">Posez votre question p&eacute;dagogique...</span>
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#C4C9D4" stroke-width="2"><path d="M12 1a3 3 0 013 3v8a3 3 0 01-6 0V4a3 3 0 013-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8"/></svg>
                        <div style="width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,' ~ c1 ~ ',' ~ c1dark ~ ');display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px ' ~ c1 ~ '40;">
                            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                        </div>
                    </div>
                    <div style="text-align:center;font-size:7px;color:#C4C9D4;margin-top:3px;">L&rsquo;IA peut faire des erreurs. V&eacute;rifiez les informations importantes.</div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
'
    },
    {
        tagLabel: 'Réponse instantanée',
        titleHtml: 'La réponse s&rsquo;affiche <span style="background: linear-gradient(135deg, ' ~ c1dark ~ ', ' ~ c2 ~ '); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">mot par mot</span>',
        desc: "Pas d'écran de chargement. La réponse de Serenia apparaît en temps réel pendant qu'elle est générée. Vous lisez pendant que l'IA rédige — un vrai gain de temps.",
        bullets: [
            "La réponse commence à s'afficher en moins d'une seconde",
            'Contexte préservé : référencez les messages précédents',
            'Reformulez, affinez, approfondissez sans perdre le fil'
        ],
        accentColor: c1,
        visualHtml: '
<div class="serenia-page">
<div style="position: relative; padding: 8px 8px 12px 8px;">
    <div id="sfd2" data-c1="' ~ c1 ~ '" data-c2="' ~ c2 ~ '" data-cdark="' ~ c1dark ~ '" style="position: relative; border: 1px solid ' ~ c1 ~ '1F; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 80px ' ~ c1 ~ '1A, 0 4px 16px rgba(0,0,0,0.04);">

        <div style="display:flex;align-items:center;gap:6px;padding:10px 14px;background:#EEF2F8;border-bottom:1px solid #E5E9F0;">
            <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;flex-shrink:0;"></span>
            <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;flex-shrink:0;"></span>
            <span style="width:10px;height:10px;border-radius:50%;background:#28C840;flex-shrink:0;"></span>
            <div style="flex:1;display:flex;justify-content:center;">
                <div style="background:white;border-radius:999px;padding:3px 12px;display:flex;align-items:center;gap:5px;border:1px solid #E2E6EE;">
                    <span style="width:6px;height:6px;border-radius:50%;background:#28C840;flex-shrink:0;"></span>
                    <span style="font-family:monospace;font-size:9px;color:#8898AA;">bubul.app/serenia</span>
                </div>
            </div>
        </div>

        <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:white;border-bottom:1px solid #ECEEF2;">
            <div style="display:flex;align-items:center;gap:8px;">
                <div style="width:30px;height:30px;border-radius:50%;background:' ~ c1 ~ '18;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill="' ~ c1 ~ '" opacity="0.5" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88836 21.6244 10.4003 22 12 22Z"/>
                        <path fill="' ~ c1 ~ '" d="M7.825 12.85C7.36937 12.85 7 13.2194 7 13.675C7 14.1306 7.36937 14.5 7.825 14.5H13.875C14.3306 14.5 14.7 14.1306 14.7 13.675C14.7 13.2194 14.3306 12.85 13.875 12.85H7.825Z"/>
                        <path fill="' ~ c1 ~ '" d="M7.825 9C7.36937 9 7 9.36937 7 9.825C7 10.2806 7.36937 10.65 7.825 10.65H16.625C17.0806 10.65 17.45 10.2806 17.45 9.825C17.45 9.36937 17.0806 9 16.625 9H7.825Z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-size:11px;font-weight:700;color:#1A2B3F;line-height:1.2;">Serenia</div>
                    <div style="font-size:7px;color:#8898AA;">IA p&eacute;dagogique priv&eacute;e</div>
                </div>
            </div>
            <div class="sfd2-badges" style="display:flex;gap:5px;align-items:center;">
                <div style="display:flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;background:' ~ c1 ~ '12;border:1px solid ' ~ c1 ~ '20;">
                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path fill="' ~ c1 ~ '" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88836 21.6244 10.4003 22 12 22Z"/></svg>
                    <span style="font-size:7px;font-weight:700;color:' ~ c1 ~ ';font-family:monospace;">982 981</span>
                    <span style="font-size:6.5px;color:' ~ c1 ~ ';">tokens</span>
                </div>
                <div style="display:flex;align-items:center;gap:2px;padding:2px 7px;border-radius:20px;background:#FFF4E6;border:1px solid #FFD9A0;">
                    <span style="color:#ED8600;font-size:9px;line-height:1;">⚡</span>
                    <span style="font-size:7px;font-weight:700;color:#ED8600;font-family:monospace;">880,3</span>
                    <span style="font-size:6.5px;color:#ED8600;">Wh</span>
                </div>
            </div>
        </div>

        <div id="sfd2-body" style="padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:#FAFBFF;height:200px;overflow:hidden;">
            <div id="sfd2-m1" style="align-self:flex-end;max-width:82%;background:linear-gradient(135deg,' ~ c1 ~ ',' ~ c2 ~ ');color:white;border-radius:12px 12px 4px 12px;padding:9px 13px;font-size:11px;line-height:1.5;opacity:0;transition:opacity 0.5s;">
                Comment structurer un module de 3h sur la gestion de conflit ?
            </div>
            <div id="sfd2-thinking" style="display:none;align-items:center;gap:8px;">
                <div style="width:28px;height:28px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,' ~ c1dark ~ ',' ~ c1 ~ ');display:flex;align-items:center;justify-content:center;">
                    <span style="color:white;font-size:11px;font-weight:700;">S</span>
                </div>
                <div style="display:flex;align-items:center;gap:4px;">
                    <div class="sfd2-dot" style="width:5px;height:5px;border-radius:50%;animation:sereniaTyping 1.4s ease-in-out infinite;"></div>
                    <div class="sfd2-dot" style="width:5px;height:5px;border-radius:50%;animation:sereniaTyping 1.4s ease-in-out 0.2s infinite;"></div>
                    <div class="sfd2-dot" style="width:5px;height:5px;border-radius:50%;animation:sereniaTyping 1.4s ease-in-out 0.4s infinite;"></div>
                    <span style="font-size:9px;color:#9CA3AF;margin-left:4px;">En cours de r&eacute;daction...</span>
                </div>
            </div>
            <div id="sfd2-airow" style="display:none;align-items:flex-start;gap:8px;">
                <div style="width:28px;height:28px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,' ~ c1dark ~ ',' ~ c1 ~ ');display:flex;align-items:center;justify-content:center;">
                    <span style="color:white;font-size:11px;font-weight:700;">S</span>
                </div>
                <div style="flex:1;background:' ~ c1 ~ '08;border-radius:8px;padding:10px 12px;">
                    <div style="font-size:10px;font-weight:600;color:' ~ c1 ~ ';margin-bottom:6px;">Serenia</div>
                    <div id="sfd2-text" style="font-size:11px;color:#1A2B3F;line-height:1.6;"></div>
                </div>
            </div>
        </div>

        <div style="display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1.5px solid #E5E7EB;background:white;">
            <div style="flex:1;background:#F9FAFB;border:1.5px solid #E5E7EB;border-radius:8px;padding:7px 12px;">
                <span style="font-size:11px;color:#9CA3AF;">Affiner la r&eacute;ponse...</span>
            </div>
            <div style="width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,' ~ c1dark ~ ',' ~ c1 ~ ');display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px ' ~ c1 ~ '30;">
                <span style="font-size:12px;color:white;">➤</span>
            </div>
        </div>

    </div>
</div>
</div>
<script>
(function() {
    var el = document.getElementById("sfd2");
    if (!el) return;
    var c1 = el.getAttribute("data-c1");
    var c2 = el.getAttribute("data-c2");
    var cdark = el.getAttribute("data-cdark");

    el.querySelectorAll(".sfd2-dot").forEach(function(d) { d.style.background = c1; });

    var m1       = document.getElementById("sfd2-m1");
    var thinking = document.getElementById("sfd2-thinking");
    var airow    = document.getElementById("sfd2-airow");
    var aitext   = document.getElementById("sfd2-text");

    var intro   = "Voici une structure en 3 temps :";
    var bullets = [
        "Ice-breaker : brise-glace (15 min)",
        "Apports theoriques : styles de conflit (45 min)",
        "Mise en situation : jeu de role (60 min)",
        "Debrief collectif et plan de suite"
    ];

    function wait(ms) { return new Promise(function(r) { setTimeout(r, ms); }); }

    async function typeInto(node, text, speed) {
        for (var i = 0; i < text.length; i++) {
            node.textContent += text[i];
            await wait(speed);
        }
    }

    async function run() {
        m1.style.opacity = "0";
        thinking.style.display = "none";
        airow.style.display = "none";
        airow.style.opacity = "1";
        aitext.innerHTML = "";

        await wait(500);
        m1.style.opacity = "1";
        await wait(1100);

        thinking.style.display = "flex";
        await wait(1700);
        thinking.style.display = "none";

        airow.style.display = "flex";
        var introSpan = document.createElement("span");
        aitext.appendChild(introSpan);
        await typeInto(introSpan, intro, 28);

        for (var b = 0; b < bullets.length; b++) {
            await wait(80);
            var row = document.createElement("div");
            row.style.cssText = "display:flex;gap:5px;font-size:11px;color:#374151;margin-top:3px;";
            var dot = document.createElement("span");
            dot.style.cssText = "color:" + c2 + ";font-weight:700;flex-shrink:0;";
            dot.textContent = "•";
            row.appendChild(dot);
            var tspan = document.createElement("span");
            row.appendChild(tspan);
            aitext.appendChild(row);
            await typeInto(tspan, bullets[b], 22);
            if (b === bullets.length - 1) {
                var cur = document.createElement("span");
                cur.style.cssText = "display:inline-block;width:2px;height:11px;background:" + c1 + ";vertical-align:middle;margin-left:2px;animation:sCursor 1s step-end infinite;";
                tspan.appendChild(cur);
            }
        }

        await wait(2800);
        m1.style.opacity = "0";
        airow.style.opacity = "0";
        await wait(600);
        airow.style.display = "none";
        airow.style.opacity = "1";
        run();
    }

    wait(300).then(function() { run(); });
})();
</script>'
    },
    {
        tagLabel: 'Analyse de documents',
        titleHtml: 'Uploadez, <span style="background: linear-gradient(135deg, ' ~ c1dark ~ ', ' ~ c2 ~ '); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Serenia analyse</span>',
        desc: "PDF, DOCX ou Excel — déposez votre fichier directement dans la conversation. Serenia le lit intégralement et répond à vos questions dessus. Idéal pour les référentiels, programmes et grilles d'évaluation.",
        bullets: [
            'PDF, DOCX et Excel acceptés — aucune limite de taille',
            'Le fichier reste côté navigateur, zéro stockage serveur',
            'Posez des questions ciblées sur le contenu du document'
        ],
        accentColor: c1,
        visualHtml: '
<div class="serenia-page">
<div style="position: relative; padding: 8px 8px 12px 8px;">
    <div style="position: relative; border: 1px solid ' ~ c1 ~ '1F; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 80px ' ~ c1 ~ '1A, 0 4px 16px rgba(0,0,0,0.04);">
        <div style="display:flex;align-items:center;gap:6px;padding:10px 14px;background:#EEF2F8;border-bottom:1px solid #E5E9F0;">
            <span style="width:10px;height:10px;border-radius:50%;background:#FF5F56;flex-shrink:0;"></span>
            <span style="width:10px;height:10px;border-radius:50%;background:#FFBD2E;flex-shrink:0;"></span>
            <span style="width:10px;height:10px;border-radius:50%;background:#28C840;flex-shrink:0;"></span>
            <div style="flex:1;display:flex;justify-content:center;">
                <div style="background:white;border-radius:999px;padding:3px 12px;display:flex;align-items:center;gap:5px;border:1px solid #E2E6EE;">
                    <span style="width:6px;height:6px;border-radius:50%;background:#28C840;flex-shrink:0;"></span>
                    <span style="font-family:monospace;font-size:9px;color:#8898AA;">bubul.app/serenia</span>
                </div>
            </div>
        </div>
        <div style="padding:14px 14px; display:flex; flex-direction:column; gap:10px; background:#FAFBFF; min-height:200px;">

            <div style="align-self:flex-end;max-width:88%;display:flex;flex-direction:column;gap:5px;align-items:flex-end;">
                <div style="background:white;border:1.5px solid #E5E7EB;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:8px;">
                    <div style="width:30px;height:30px;border-radius:6px;background:' ~ c1 ~ '12;flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="' ~ c1 ~ '" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="12" y2="17"/></svg>
                    </div>
                    <div style="flex:1;">
                        <div style="font-size:9px;font-weight:700;color:#1A2B3F;">Referentiel_BTS_2024.pdf</div>
                        <div style="font-size:7px;color:#9CA3AF;margin-top:1px;">2.4 Mo &middot; 47 pages</div>
                    </div>
                    <div style="display:flex;align-items:center;gap:4px;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:999px;padding:2px 8px;flex-shrink:0;">
                        <span style="width:5px;height:5px;border-radius:50%;background:#22C55E;flex-shrink:0;"></span>
                        <span style="font-size:8px;color:#15803D;font-weight:600;">Analys&eacute;</span>
                    </div>
                </div>
                <div style="background:linear-gradient(135deg,' ~ c1 ~ ',' ~ c2 ~ ');color:white;border-radius:12px 12px 4px 12px;padding:9px 13px;font-size:11px;line-height:1.5;">
                    Peux-tu me faire un r&eacute;sum&eacute; de ce document ?
                </div>
            </div>

            <div style="display:flex;gap:8px;align-items:flex-start;">
                <div style="width:28px;height:28px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,' ~ c1dark ~ ',' ~ c1 ~ ');display:flex;align-items:center;justify-content:center;">
                    <span style="color:white;font-size:11px;font-weight:700;">S</span>
                </div>
                <div style="flex:1;background:' ~ c1 ~ '08;border-radius:8px;padding:10px 12px;">
                    <div style="font-size:10px;font-weight:600;color:' ~ c1 ~ ';margin-bottom:6px;">Serenia</div>
                    <div style="font-size:11px;color:#1A2B3F;line-height:1.7;">
                        Voici le r&eacute;sum&eacute; de votre PDF :<br>
                        <span style="color:#374151;">Ce r&eacute;f&eacute;rentiel couvre le BTS Communication &mdash; 3 blocs m&eacute;tiers, des objectifs d&rsquo;&eacute;valuation et les crit&egrave;res associ&eacute;s sur 47 pages.</span>
                    </div>
                </div>
            </div>

        </div>
        <div style="display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1.5px solid #E5E7EB;background:white;">
            <div style="width:30px;height:30px;border-radius:8px;border:1.5px solid #E5E7EB;display:flex;align-items:center;justify-content:center;">
                <span style="font-size:12px;color:#9CA3AF;">📎</span>
            </div>
            <div style="flex:1;background:#F9FAFB;border:1.5px solid #E5E7EB;border-radius:8px;padding:7px 12px;">
                <span style="font-size:11px;color:#9CA3AF;">Posez votre question sur le document...</span>
            </div>
            <div style="width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,' ~ c1dark ~ ',' ~ c1 ~ ');display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px ' ~ c1 ~ '30;">
                <span style="font-size:12px;color:white;">➤</span>
            </div>
        </div>
    </div>
</div>
</div>'
    }
] %}
{% include '_organisms/landing/features-alternating.html.twig' with {
    features: sereniaFeatures,
    id: 'features',
    sectionStyle: 'background: #ffffff;'
} only %}

{# ── 6. Comment ça marche ── #}
{% include '_organisms/landing/steps-tool.html.twig' with {
    variant: 'cards',
    titleHtml: 'Simple comme <span style="-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-image:linear-gradient(135deg,' ~ c1dark ~ ',' ~ c1 ~ ');">une conversation</span>',
    subtitle: 'Pas de configuration. Pas de formation requise. Opérationnel en 10 secondes.',
    accentColor: c1,
    gradientEnd: c2,
    bgStyle: 'background: color-mix(in srgb, ' ~ c3 ~ ' 18%, white);',
    id: 'comment-ca-marche',
    steps: [
        { num: '1', title: 'Décrivez votre besoin',              desc: 'Tapez votre question ou déposez un fichier PDF, DOCX ou Excel. Serenia comprend vos documents sans configuration.' },
        { num: '2', title: 'Serenia vous répond instantanément', desc: 'La réponse apparaît en direct, sous vos yeux. Posez des questions de suivi, demandez des reformulations, creusez le sujet.' },
        { num: '3', title: 'Réutilisez le contenu',              desc: "Copiez la réponse dans vos supports ou téléchargez l'image générée. La session s'efface quand vous partez." }
    ]
} only %}


{# ── 8. Autres outils ── #}
{% include '_organisms/landing/tools-ecosystem.html.twig' with {
    titleHtml: 'Serenia n\'est que <span style="background: linear-gradient(135deg, ' ~ c1dark ~ ', ' ~ c1 ~ '); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">le début</span>',
    exclude: ['serenia', 'sam'],
    bgClass: 'bg-white',
    accentColor: c1
} only %}

{# ── 9. FAQ ── #}
{% set sereniaFaq = [
    {
        question: "Qu'est-ce que Serenia ?",
        answer: "Serenia est un <strong>assistant IA conversationnel spécialisé pour les formateurs</strong>. Contrairement à ChatGPT, il est calibré pour la pédagogie : il analyse vos documents de formation, génère des visuels pour vos cours et vous aide à structurer vos contenus — sans stocker aucune donnée.",
        icon: 'message'
    },
    {
        question: "Mes fichiers sont-ils stockés sur vos serveurs ?",
        answer: "Non. Les fichiers uploadés dans Serenia restent <strong>exclusivement côté navigateur</strong> pendant la conversation. Dès que vous quittez la page, tout est effacé. Aucun fichier n'est envoyé ni conservé sur nos serveurs.",
        icon: 'shield'
    },
    {
        question: "En quoi Serenia est différent de ChatGPT ?",
        answer: "Serenia est calibré pour la <strong>pédagogie</strong> : vocabulaire métier, analyse de fichiers de formation (PDF, DOCX, Excel) et génération de visuels avec <strong>gpt-image-2</strong> — le modèle d'image le plus performant du marché. Pas un généraliste : un spécialiste.",
        icon: 'bolt'
    },
    {
        question: "Quels types de fichiers puis-je analyser ?",
        answer: "Serenia accepte les <strong>PDF, DOCX et Excel (XLSX)</strong>. Vous pouvez uploader des référentiels de compétences, programmes, grilles d'évaluation — Serenia les lit et répond dessus. Pas de limite de taille, mais les gros fichiers consomment plus de tokens.",
        icon: 'user-id'
    },
    {
        question: "Serenia peut-il générer des images ?",
        answer: "Oui. Serenia intègre <strong>gpt-image-2</strong>. Décrivez le visuel que vous souhaitez pour illustrer votre formation — schéma, infographie, illustration — et Serenia le génère directement dans la conversation.",
        icon: 'star'
    },
    {
        question: "La conversation est-elle sauvegardée ?",
        answer: "Non. Chaque session Serenia est <strong>éphémère</strong> : dès que vous fermez l'onglet, la conversation disparaît. Pas d'historique, aucune trace côté serveur. C'est un choix délibéré pour votre confidentialité.",
        icon: 'book'
    }
] %}
{% include '_organisms/landing/faq.html.twig' with { questions: sereniaFaq, tagline: 'Tout ce que vous devez savoir sur Serenia.', accentColor: c1, accentColorDark: c1dark } only %}

{# ── 10. Footer ── #}
{% include '_organisms/landing/footer.html.twig' only %}

{# ── Reveal scroll ── #}
<script>
(function(){
    var io = new IntersectionObserver(function(e){
        e.forEach(function(n){ if(n.isIntersecting) n.target.classList.add('visible'); });
    },{threshold:0.08});
    document.querySelectorAll('.reveal').forEach(function(el){ io.observe(el); });
    setTimeout(function(){
        document.querySelectorAll('.reveal').forEach(function(el){ el.classList.add('visible'); });
    },2200);
})();
</script>

{% endblock %}