{# templates/card/index.html.twig #}

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

{% block title %}{{title}}{% endblock %}

{% block body %}

<!-- PAGE 3 - Modèle Premium (Lavender) -->
<section class="modele-premium-section" id="modele-premium"
    style="background: #ffffff; min-height: 100vh;max-width: 1400px; margin: 0 auto; position: relative;">


    <!-- Layout avec 2 colonnes -->
    <div id="content" style="display: flex; gap: 2px; position: relative;top:-46px;">

        <!-- BLOC 1 : Mockup Premium - Position FIXED -->
        <div id="mockup" style="height: 100vh;position: sticky;top: 0;width: 44%;">
            <div style="position: fixed; top: 50px; width: 375px;">
                <div class="smartphone-mockup" style="
                        width: 375px;
                        height: 96vh;
                        background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
                        border-radius: 45px;
                        padding: 15px;
                        box-shadow: 
                            0 40px 80px rgba(0, 0, 0, 0.8),
                            0 20px 40px rgba(0, 0, 0, 0.6),
                            inset 0 0 0 1px rgba(100, 100, 100, 0.3),
                            inset 0 0 0 2px rgba(58, 58, 58, 0.5),
                            inset 0 0 30px rgba(0, 0, 0, 0.6);
                        position: relative;
                    ">
                    <div class="smartphone-screen" style="
                            width: 100%;
                            height: 100%;
                            background: #0a0a0a;
                            border-radius: 35px;
                            overflow: hidden;
                            overflow-y: scroll;
                            position: relative;
                            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
                        ">
                        <div class="card-content" style="padding: 0; height: auto; min-height: 100%;">
                            <div class="vcard-container"
                                style="max-width: 100%; margin: 0; background: white; border-radius: 40px; box-shadow: none; overflow: visible;">
                                <!-- HEADER -->
                                <div class="header" style="
                                background: linear-gradient(135deg, #1a0f1e 0%, #2d1b34 100%);
                                color: white;
                                padding: 15px 20px 15px;
                                text-align: center;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                position: relative;
                                overflow: hidden;
                                border-radius: 40px 40px 0 0;
                            ">
                                    <div class="logo" id="mockup-logo" style="
                                    font-size: 32px;
                                    font-weight: 900;
                                    margin: 0 auto 5px;
                                    letter-spacing: 2px;
                                    line-height: 1;
                                    position: relative;
                                ">📸</div>
                                    <div class="company-name" id="mockup-entreprise" style="
                                    font-size: 18px;
                                    font-weight: 800;
                                    letter-spacing: 1.5px;
                                    color: white;
                                    text-shadow: 0 0 20px rgba(155, 89, 182, 0.3);
                                ">LUMIÈRE & ÉMOTIONS</div>
                                    <div class="tagline" id="mockup-titre" style="
                                    font-size: 11px;
                                    margin-top: 3px;
                                    opacity: 0.95;
                                    color: #e8daef;
                                    font-weight: 500;
                                    font-style: italic;
                                ">Photographie d'Art & d'Âme</div>
                                </div>

                                <!-- PROFILE -->
                                <div class="profile"
                                    style="padding: 22px 20px 10px; text-align: center; background: white;">
                                    <h1 class="name" style="
                                    font-size: 26px;
                                    font-weight: 800;
                                    margin-bottom: 5px;
                                    color: #2d1b34;
                                ">
                                        <span id="mockup-prenom">Élodie</span>
                                        <span id="mockup-nom">XXXXXXXX</span>
                                    </h1>
                                    <p class="position" id="mockup-fonction" style="
                                    font-size: 15px;
                                    font-weight: 600;
                                    color: #9b59b6;
                                    margin-bottom: 10px;
                                ">Photographe Professionnelle</p>
                                    <p class="slogan" id="mockup-slogan" style="
                                    font-size: 12px;
                                    font-style: italic;
                                    color: #666;
                                    margin-bottom: 0;
                                ">« Capturer l'instant, révéler l'émotion »</p>
                                </div>

                                <!-- CONTACT BUTTONS -->
                                <div class="contact-buttons" style="
                                padding: 15px 20px;
                                display: flex;
                                flex-direction: column;
                                gap: 8px;
                                background: white;
                            ">
                                    <a href="tel:+33562345678" id="mockup-fixe-link" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
                                    color: white;
                                    padding: 12px 20px;
                                    border-radius: 10px;
                                    text-decoration: none;
                                    font-size: 14px;
                                    font-weight: 600;
                                    transition: all 0.3s;
                                ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            style="width: 20px; height: 20px;">
                                            <path
                                                d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
                                        </svg>
                                        <span id="mockup-fixe">05 62 34 56 78</span>
                                    </a>
                                    <a href="tel:+33689012345" id="mockup-mobile-link" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
                                    color: white;
                                    padding: 12px 20px;
                                    border-radius: 10px;
                                    text-decoration: none;
                                    font-size: 14px;
                                    font-weight: 600;
                                    transition: all 0.3s;
                                ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            style="width: 20px; height: 20px;">
                                            <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
                                            <line x1="12" y1="18" x2="12.01" y2="18" /></svg>
                                        <span id="mockup-mobile">06 89 01 23 45</span>
                                    </a>
                                    <a href="#" onclick="alert('Visioconférence'); return false;" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
                                    color: white;
                                    padding: 12px 20px;
                                    border-radius: 10px;
                                    text-decoration: none;
                                    font-size: 14px;
                                    font-weight: 600;
                                    transition: all 0.3s;
                                ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            style="width: 20px; height: 20px;">
                                            <path d="M23 7l-7 5 7 5V7z" />
                                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2" /></svg>
                                        Visio
                                    </a>
                                    <a href="https://maps.google.com/?q=31000+Toulouse" target="_blank" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
                                    color: white;
                                    padding: 12px 20px;
                                    border-radius: 10px;
                                    text-decoration: none;
                                    font-size: 14px;
                                    font-weight: 600;
                                    transition: all 0.3s;
                                ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            style="width: 20px; height: 20px;">
                                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                                            <circle cx="12" cy="10" r="3" /></svg>
                                        Adresse
                                    </a>
                                    <a href="mailto:contact@lumiere-emotions.fr" id="mockup-email-link" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
                                    color: white;
                                    padding: 12px 20px;
                                    border-radius: 10px;
                                    text-decoration: none;
                                    font-size: 14px;
                                    font-weight: 600;
                                    transition: all 0.3s;
                                ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            style="width: 20px; height: 20px;">
                                            <path
                                                d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
                                        </svg>
                                        <span id="mockup-email">contact@lumiere-emotions.fr</span>
                                    </a>
                                    <a href="javascript:void(0)" onclick="alert('Télécharger vCard')" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                                    color: white;
                                    padding: 12px 20px;
                                    border-radius: 10px;
                                    text-decoration: none;
                                    font-size: 14px;
                                    font-weight: 600;
                                    transition: all 0.3s;
                                    margin-top: 5px;
                                ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"
                                            style="width: 20px; height: 20px;">
                                            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
                                            <polyline points="17 21 17 13 7 13 7 21" />
                                            <polyline points="7 3 7 8 15 8" />
                                        </svg>
                                        Ajouter à mes contacts
                                    </a>
                                </div>

                                <!-- SERVICES -->
                                <div class="services" style="
                                padding: 15px 20px 20px;
                                background: white;
                            ">
                                    <h3 style="
                                    font-size: 14px;
                                    font-weight: 700;
                                    margin-bottom: 12px;
                                    color: #2d1b34;
                                    text-align: center;
                                ">✨ Mes Spécialités</h3>
                                    <div class="pills-container" style="
                                    display: grid;
                                    grid-template-columns: repeat(2, 1fr);
                                    gap: 10px;
                                ">
                                        <div class="pill" id="mockup-service1" style="
                                        background: white;
                                        color: #2d1b34;
                                        padding: 12px 16px;
                                        border-radius: 25px;
                                        font-size: 13px;
                                        font-weight: 600;
                                        border: 2px solid rgba(155, 89, 182, 0.3);
                                        text-align: center;
                                    ">💍 Mariages</div>
                                        <div class="pill" id="mockup-service2" style="
                                        background: white;
                                        color: #2d1b34;
                                        padding: 12px 16px;
                                        border-radius: 25px;
                                        font-size: 13px;
                                        font-weight: 600;
                                        border: 2px solid rgba(155, 89, 182, 0.3);
                                        text-align: center;
                                    ">👨‍👩‍👧‍👦 Portraits</div>
                                        <div class="pill" id="mockup-service3" style="
                                        background: white;
                                        color: #2d1b34;
                                        padding: 12px 16px;
                                        border-radius: 25px;
                                        font-size: 13px;
                                        font-weight: 600;
                                        border: 2px solid rgba(155, 89, 182, 0.3);
                                        text-align: center;
                                    ">💼 Corporate</div>
                                        <div class="pill" id="mockup-service4" style="
                                        background: white;
                                        color: #2d1b34;
                                        padding: 12px 16px;
                                        border-radius: 25px;
                                        font-size: 13px;
                                        font-weight: 600;
                                        border: 2px solid rgba(155, 89, 182, 0.3);
                                        text-align: center;
                                    ">🎨 Artistique</div>
                                    </div>
                                </div>

                                <!-- SHARE SECTION - Partager ma carte -->
                                <div class="share-section" style="
                                padding: 12px 15px;
                                background: #f9f9f9;
                                border: 1px solid #9b59b6;
                                border-radius: 12px;
                                margin: 0 15px 15px 15px;
                            ">
                                    <h3 style="
                                    font-size: 14px;
                                    font-weight: 700;
                                    margin-bottom: 6px;
                                    color: #2d1b34;
                                    text-align: center;
                                ">📤 Partager ma carte</h3>

                                    <div class="share-buttons" style="
                                    display: grid;
                                    grid-template-columns: repeat(2, 1fr);
                                    gap: 10px;
                                ">
                                        <a href="javascript:void(0);" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 10px 10px;
                                        border-radius: 10px;
                                        text-decoration: none;
                                        font-size: 12px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
                                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 16px; height: 16px; margin-right: 6px; fill: currentColor;">
                                                <path
                                                    d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
                                            </svg>
                                            WhatsApp
                                        </a>

                                        <a href="javascript:void(0);" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 10px 10px;
                                        border-radius: 10px;
                                        text-decoration: none;
                                        font-size: 12px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%);
                                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 16px; height: 16px; margin-right: 6px; fill: currentColor;">
                                                <path
                                                    d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.222V6h16zM4 18V9.044l7.386 5.745a.994.994 0 0 0 1.228 0L20 9.044 20.002 18H4z" />
                                            </svg>
                                            Email
                                        </a>

                                        <a href="javascript:void(0);" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 10px 10px;
                                        border-radius: 10px;
                                        text-decoration: none;
                                        font-size: 12px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
                                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 16px; height: 16px; margin-right: 6px; fill: currentColor;">
                                                <path
                                                    d="M20 2H4c-1.103 0-2 .897-2 2v18l4-4h14c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zm0 14H6.414L4 18.414V4h16v12z" />
                                            </svg>
                                            SMS
                                        </a>

                                        <button class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 10px 10px;
                                        border-radius: 10px;
                                        font-size: 12px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: #c9a569;
                                        background: white;
                                        box-shadow: 0 2px 8px rgba(201, 165, 105, 0.2);
                                        border: 2px solid #c9a569;
                                        cursor: pointer;
                                    ">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                style="width: 16px; height: 16px; margin-right: 6px;">
                                                <rect x="3" y="3" width="7" height="7" />
                                                <rect x="14" y="3" width="7" height="7" />
                                                <rect x="3" y="14" width="7" height="7" />
                                                <rect x="14" y="14" width="3" height="3" />
                                                <rect x="18" y="18" width="3" height="3" />
                                            </svg>
                                            QR Code
                                        </button>
                                    </div>
                                </div>

                                <!-- DIRECT ACCESS SECTION - Accès direct -->
                                <div class="share-section" style="
                                padding: 12px 15px;
                                background: #f9f9f9;
                                border: 1px solid #9b59b6;
                                border-radius: 12px;
                                margin: 0 15px;
                            ">
                                    <h3 style="
                                    font-size: 14px;
                                    font-weight: 700;
                                    margin-bottom: 8px;
                                    color: #2d1b34;
                                    text-align: center;
                                ">🔗 Accès direct</h3>

                                    <div class="share-buttons" style="
                                    display: grid;
                                    grid-template-columns: 1fr;
                                    gap: 10px;
                                    margin-bottom: 10px;
                                ">
                                        <a href="javascript:void(0);" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 12px 10px;
                                        border-radius: 12px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
                                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                                    ">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                style="width: 18px; height: 18px; margin-right: 8px;">
                                                <path
                                                    d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                                            </svg>
                                            Mon Actu
                                        </a>
                                    </div>

                                    <div class="share-subtitle" style="
                                    font-size: 11px;
                                    color: #666;
                                    margin-bottom: 8px;
                                    text-align: center;
                                ">Suivez-nous sur nos réseaux</div>

                                    <div class="share-buttons" style="
                                    display: grid;
                                    grid-template-columns: repeat(2, 1fr);
                                    gap: 10px;
                                ">
                                        <a href="javascript:void(0);" id="mockup-linkedin" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 12px 10px;
                                        border-radius: 12px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #0077B5 0%, #005582 100%);
                                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 18px; height: 18px; margin-right: 8px; fill: currentColor;">
                                                <path
                                                    d="M20 3H4a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM8.339 18.337H5.667v-8.59h2.672v8.59zM7.003 8.574a1.548 1.548 0 1 1 0-3.096 1.548 1.548 0 0 1 0 3.096zm11.335 9.763h-2.669V14.16c0-.996-.018-2.277-1.388-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248h-2.667v-8.59h2.56v1.174h.037c.355-.675 1.227-1.387 2.524-1.387 2.704 0 3.203 1.778 3.203 4.092v4.71z" />
                                            </svg>
                                            LinkedIn
                                        </a>

                                        <a href="javascript:void(0);" id="mockup-facebook" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 12px 10px;
                                        border-radius: 12px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
                                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 18px; height: 18px; margin-right: 8px; fill: currentColor;">
                                                <path
                                                    d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                                            </svg>
                                            Facebook
                                        </a>

                                        <a href="javascript:void(0);" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 12px 10px;
                                        border-radius: 12px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
                                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 18px; height: 18px; margin-right: 8px; fill: currentColor;">
                                                <path
                                                    d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
                                            </svg>
                                            Youtube
                                        </a>

                                        <a href="javascript:void(0);" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 12px 10px;
                                        border-radius: 12px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #000000 0%, #00F2EA 100%);
                                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 18px; height: 18px; margin-right: 8px; fill: currentColor;">
                                                <path
                                                    d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z" />
                                            </svg>
                                            TikTok
                                        </a>

                                        <a href="javascript:void(0);" id="mockup-instagram" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 12px 10px;
                                        border-radius: 12px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #E4405F 0%, #833AB4 100%);
                                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 18px; height: 18px; margin-right: 8px; fill: currentColor;">
                                                <path
                                                    d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                                            </svg>
                                            Instagram
                                        </a>

                                        <a href="javascript:void(0);" class="share-btn" style="
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        padding: 12px 10px;
                                        border-radius: 12px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        transition: all 0.3s;
                                        color: white;
                                        background: linear-gradient(135deg, #000000 0%, #14171A 100%);
                                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                                    ">
                                            <svg viewBox="0 0 24 24"
                                                style="width: 18px; height: 18px; margin-right: 8px; fill: currentColor;">
                                                <path
                                                    d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                                            </svg>
                                            X
                                        </a>
                                    </div>
                                </div>

                                <!-- WEBSITE LINKS - Découvrez Mon Univers Créatif -->
                                <div class="website-section" style="
                                padding: 15px 20px 20px;
                                background: white;
                                margin-top: 15px;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                            ">
                                    <h3 style="
                                    font-size: 14px;
                                    font-weight: 700;
                                    margin-bottom: 6px;
                                    color: #2d1b34;
                                    text-align: center;
                                ">🌐 Découvrez Mon Univers Créatif</h3>
                                    <div class="website-subtitle" style="
                                    font-size: 11px;
                                    color: #666;
                                    margin-bottom: 12px;
                                    text-align: center;
                                ">Explorez mon portfolio et mes créations</div>
                                    <a href="https://www.lumiereemotion-portfolio.fr" target="_blank" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
                                    color: white;
                                    padding: 12px 16px;
                                    border-radius: 10px;
                                    text-decoration: none;
                                    font-size: 13px;
                                    font-weight: 600;
                                    margin-bottom: 8px;
                                    transition: all 0.3s;
                                    width: 100%;
                                    max-width: 280px;
                                ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            style="width: 20px; height: 20px; flex-shrink: 0;">
                                            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
                                            <line x1="8" y1="21" x2="16" y2="21" />
                                            <line x1="12" y1="17" x2="12" y2="21" />
                                        </svg>
                                        Portfolio & Galeries Photo
                                    </a>
                                    <a href="https://www.lumiereemotion-booking.fr" target="_blank" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    background: linear-gradient(135deg, #9b59b6 0%, #c39bd3 100%);
                                    color: white;
                                    padding: 12px 16px;
                                    border-radius: 10px;
                                    text-decoration: none;
                                    font-size: 13px;
                                    font-weight: 600;
                                    transition: all 0.3s;
                                    width: 100%;
                                    max-width: 280px;
                                ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            style="width: 20px; height: 20px; flex-shrink: 0;">
                                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                                            <line x1="16" y1="2" x2="16" y2="6" />
                                            <line x1="8" y1="2" x2="8" y2="6" />
                                            <line x1="3" y1="10" x2="21" y2="10" />
                                        </svg>
                                        Réservation de Séance Photo
                                    </a>
                                </div>

                                <!-- FOOTER -->
                                <div class="footer" style="
                                background: linear-gradient(135deg, #1a0f1e 0%, #2d1b34 100%);
                                color: white;
                                padding: 20px;
                                text-align: center;
                                border-radius: 0 0 40px 40px;
                            ">
                                    <div class="footer-stats" style="
                                    display: flex;
                                    justify-content: space-around;
                                    margin-bottom: 15px;
                                ">
                                        <div class="stat">
                                            <div class="stat-number" id="mockup-expertise" style="
                                            font-size: 20px;
                                            font-weight: 800;
                                            color: #c39bd3;
                                            margin-bottom: 4px;
                                        ">12 ans</div>
                                            <div class="stat-label" style="
                                            font-size: 11px;
                                            color: #e8daef;
                                            font-weight: 500;
                                        ">D'expertise</div>
                                        </div>
                                        <div class="stat">
                                            <div class="stat-number" id="mockup-seances" style="
                                            font-size: 20px;
                                            font-weight: 800;
                                            color: #c39bd3;
                                            margin-bottom: 4px;
                                        ">500+</div>
                                            <div class="stat-label" style="
                                            font-size: 11px;
                                            color: #e8daef;
                                            font-weight: 500;
                                        ">Séances</div>
                                        </div>
                                        <div class="stat">
                                            <div class="stat-number" id="mockup-satisfaction" style="
                                            font-size: 20px;
                                            font-weight: 800;
                                            color: #c39bd3;
                                            margin-bottom: 4px;
                                        ">100%</div>
                                            <div class="stat-label" style="
                                            font-size: 11px;
                                            color: #e8daef;
                                            font-weight: 500;
                                        ">Satisfaction</div>
                                        </div>
                                    </div>
                                    <div class="footer-content" style="
                                    font-size: 12px;
                                    color: #e8daef;
                                    font-weight: 500;
                                ">💜 Merci de votre confiance 💜</div>
                                    <div style="
                                    font-size: 11px;
                                    color: #e8daef;
                                    margin-top: 10px;
                                    opacity: 0.7;
                                ">NUM-ECARD - Tous droits réservés</div>
                                </div>

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

        <!-- BLOC 2 : Formulaire et Prix - Défile normalement -->
        <div id="bloc2" style="flex: 1 1 auto; max-width: 600px;  padding-bottom: 10px;">
            <!-- Indicateur (nom du modèle) -->
            <div style="color: #1d1d1f; margin-bottom: 40px; text-align: center;">
                <div
                    style="font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #9b59b6; text-transform: uppercase; letter-spacing: 0.5px;">
                    Personnalisé avec votre Charte Graphique</div>
            </div>

            <!-- Formulaire -->
            {# templates/card/_form.html.twig #}

            <div class="card-form-container" style="max-width: 600px; margin: 0 auto;">
                {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}


                {# Section 1 : Informations personnelles #}
                <div class="form-section">
                    <h3 class="form-section-title">👤 Informations personnelles</h3>

                    <div class="form-row">
                        <div class="form-group">
                            {{ form_label(form.prenom) }}
                            {{ form_widget(form.prenom) }}
                            {{ form_errors(form.prenom) }}
                        </div>
                        <div class="form-group">
                            {{ form_label(form.nom) }}
                            {{ form_widget(form.nom) }}
                            {{ form_errors(form.nom) }}
                        </div>
                    </div>

                    {# Photo de profil (spécifique Force) - Vérifier si le champ existe #}
                    {% if form.photo is defined %}
                    <div class="form-row full">
                        <div class="form-group">
                            {{ form_label(form.photo) }}
                            {{ form_widget(form.photo) }}
                            {{ form_errors(form.photo) }}
                            {{ form_help(form.photo) }}
                        </div>
                    </div>
                    {% endif %}
                </div>

                {# Section 2 : Informations professionnelles #}
                <div class="form-section">
                    <h3 class="form-section-title">💼 Informations professionnelles</h3>

                    <div class="form-row ">
                        <div class="form-group">
                            {{ form_label(form.entreprise) }}
                            {{ form_widget(form.entreprise) }}
                            {{ form_errors(form.entreprise) }}
                        </div>
                        {% if form.titre is defined %}
                           <div class="form-group">
                            {{ form_label(form.titre) }}
                            {{ form_widget(form.titre) }}
                            {{ form_errors(form.titre) }}
                            <div class="form-help">Ex: Photographie d'Art & d'Âme</div>
                            </div>
                        {% endif %}
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            {{ form_label(form.fonction) }}
                            {{ form_widget(form.fonction) }}
                            {{ form_errors(form.fonction) }}
                        </div>

                        {# Secteur (spécifique Force) - Vérifier si le champ existe #}
                        {% if form.secteur is defined %}
                        <div class="form-group">
                            {{ form_label(form.secteur) }}
                            {{ form_widget(form.secteur) }}
                            {{ form_errors(form.secteur) }}
                        </div>
                        {% endif %}
                        <div class="form-row full">
                    {# Slogan (commun à Force et Premium) - Vérifier si le champ existe #}
                    {% if form.slogan is defined %}
                        <div class="form-group">
                            {{ form_label(form.slogan, 'Slogan') }}
                            {{ form_widget(form.slogan) }}
                            {{ form_errors(form.slogan) }}
                            <div class="form-help">Votre phrase d'accroche</div>
                        </div>
                    {% endif %}
                    </div>
                    </div>

                    {# Titre et Logo (spécifique Premium) - Vérifier si les champs existent #}
                    {% if form.titre is defined %}
                        <div class="form-row">
                         
                            {% if form.logo is defined %}
                            <div class="form-group" style="font-size: 10px;">
                                {{ form_label(form.logo) }}
                                {{ form_widget(form.logo) }}
                                {{ form_errors(form.logo) }}
                                <div class="form-help">Emoji ou caractère spécial</div>
                            </div>
                            {% endif %}
                        </div>
                    {% endif %}

                    
                </div>

                {# Section 3 : Contact #}
                <div class="form-section">
                    <h3 class="form-section-title">📞 Contact</h3>

                    <div class="form-row">
                        <div class="form-group">
                            {{ form_label(form.fixe) }}
                            {{ form_widget(form.fixe) }}
                            {{ form_errors(form.fixe) }}
                        </div>
                        <div class="form-group">
                            {{ form_label(form.mobile) }}
                            {{ form_widget(form.mobile) }}
                            {{ form_errors(form.mobile) }}
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            {{ form_label(form.email) }}
                            {{ form_widget(form.email) }}
                            {{ form_errors(form.email) }}
                        </div>
                        <div class="form-group">
                            {{ form_label(form.siteWeb) }}
                            {{ form_widget(form.siteWeb) }}
                            {{ form_errors(form.siteWeb) }}
                        </div>
                    </div>

                    <div class="form-row full">
                        <div class="form-group">
                            {{ form_label(form.adresse) }}
                            {{ form_widget(form.adresse) }}
                            {{ form_errors(form.adresse) }}
                        </div>
                    </div>
                </div>

                {# Section 4 : Services et zone (spécifique Force) - Vérifier si les champs existent #}
                {% if form.services is defined %}
                <div class="form-section">
                    <h3 class="form-section-title">🎯 Services & Zone d'intervention</h3>

                    <div class="form-row full">
                        <div class="form-group">
                            {{ form_label(form.services) }}
                            {{ form_widget(form.services) }}
                            {{ form_errors(form.services) }}
                            {{ form_help(form.services) }}
                        </div>
                    </div>

                    {% if form.zoneIntervention is defined and form.horaires is defined %}
                    <div class="form-row">
                        <div class="form-group">
                            {{ form_label(form.zoneIntervention) }}
                            {{ form_widget(form.zoneIntervention) }}
                            {{ form_errors(form.zoneIntervention) }}
                        </div>
                        <div class="form-group">
                            {{ form_label(form.horaires) }}
                            {{ form_widget(form.horaires) }}
                            {{ form_errors(form.horaires) }}
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% endif %}

                 {# Section 6 : Spécialités (spécifique Premium) - 4 champs #}
                {% if form.spe1 is defined %}
                <div class="form-section">
                    <h3 class="form-section-title">✨ Vos Spécialités</h3>

                    <div class="form-row">
                        <div class="form-group">
                            {{ form_label(form.spe1) }}
                            {{ form_widget(form.spe1) }}
                            {{ form_errors(form.spe1) }}
                            <div class="form-help">{{ form_help(form.spe1) }}</div>
                        </div>
                        {% if form.spe2 is defined %}
                        <div class="form-group">
                            {{ form_label(form.spe2) }}
                            {{ form_widget(form.spe2) }}
                            {{ form_errors(form.spe2) }}
                            <div class="form-help">{{ form_help(form.spe2) }}</div>
                        </div>
                        {% endif %}
                    </div>

                    <div class="form-row">
                        {% if form.spe3 is defined %}
                        <div class="form-group">
                            {{ form_label(form.spe3) }}
                            {{ form_widget(form.spe3) }}
                            {{ form_errors(form.spe3) }}
                            <div class="form-help">{{ form_help(form.spe3) }}</div>
                        </div>
                        {% endif %}
                        {% if form.spe4 is defined %}
                        <div class="form-group">
                            {{ form_label(form.spe4) }}
                            {{ form_widget(form.spe4) }}
                            {{ form_errors(form.spe4) }}
                            <div class="form-help">{{ form_help(form.spe4) }}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                {# Section 5 : Statistiques (spécifique Premium) - Vérifier si les champs existent #}
                {% if form.expertise is defined %}
                <div class="form-section">
                    <h3 class="form-section-title">📊 Vos Statistiques</h3>

                    <div class="form-row">
                        <div class="form-group">
                            {{ form_label(form.expertise) }}
                            {{ form_widget(form.expertise) }}
                            {{ form_errors(form.expertise) }}
                            <div class="form-help">Ex: 12 ans</div>
                        </div>
                        {% if form.actu is defined %}
                        <div class="form-group">
                            {{ form_label(form.actu) }}
                            {{ form_widget(form.actu) }}
                            {{ form_errors(form.actu) }}
                            <div class="form-help">Actualités</div>
                        </div>
                        {% endif %}
                        {% if form.seances is defined %}
                        <div class="form-group">
                            {{ form_label(form.seances) }}
                            {{ form_widget(form.seances) }}
                            {{ form_errors(form.seances) }}
                            <div class="form-help">Ex: 500+</div>
                        </div>
                        {% endif %}
                              {% if form.satifaction is defined %}
                            <div class="form-group">
                                {{ form_label(form.satifaction,'Satisfaction') }}
                                {{ form_widget(form.satifaction) }}
                                {{ form_errors(form.satifaction) }}
                                <div class="form-help">Ex: 500+</div>
                            </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

               

                {# Bouton de soumission #}
                <button type="submit" class="submit-button">
                    ✅ Ajouter au panier
                </button>

                {# Afficher tous les champs qui n'ont pas encore été rendus (au cas où) #}
                {{ form_rest(form) }}

                {{ form_end(form) }}
            </div>

            <!-- Prix -->
            <div
                style="background: rgba(0, 0, 0, 0.05); backdrop-filter: blur(10px); padding: 30px 40px; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.1); margin-top: 40px; text-align: center;">
                <div style="font-size: 56px; font-weight: 700; color: #1d1d1f; margin-bottom: 8px;">349 € <span
                        style="font-size: 24px; font-weight: 400;">H.T</span></div>
                <div style="font-size: 18px; color: rgba(0, 0, 0, 0.7);">(Tva Applicable 20%)</div>
                <div
                    style="font-size: 14px; color: #1d1d1f; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.1);">
                    Délai de livraison : 10 jours ouvrés <a href="#cgv"
                        style="color: #9b59b6; text-decoration: none;">*</a></div>
            </div>

            <script>
                /**
                 * Gère l'affichage dynamique du champ de quantité personnalisée
                 */
                function toggleCustomQty() {
                    const select = document.getElementById('qty-select-premium');
                    const customInput = document.getElementById('qty-custom-premium');

                    if (select && customInput) {
                        if (select.value === 'custom') {
                            customInput.style.display = 'inline-block';
                            customInput.focus();
                            customInput.setAttribute('required', 'required');
                        } else {
                            customInput.style.display = 'none';
                            customInput.removeAttribute('required');
                        }
                    }
                }

                // Initialisation au chargement de la page
                document.addEventListener('DOMContentLoaded', toggleCustomQty);

            </script>

        </div>

    </div>
</section>

<script>
    // ============================================================================
    // MISE À JOUR EN TEMPS RÉEL DU MOCKUP PREMIUM
    // ============================================================================

    document.addEventListener('DOMContentLoaded', function () {
        console.log('🎯 Initialisation de la mise à jour en temps réel PREMIUM...');

        setTimeout(function () {

            // ========================================================================
            // 🔍 DIAGNOSTIC COMPLET DES CHAMPS
            // ========================================================================
            console.log('');
            console.log('========================================');
            console.log('🔍 DIAGNOSTIC : Liste de TOUS les inputs du formulaire');
            console.log('========================================');

            const allInputs = document.querySelectorAll('input, textarea, select');
            console.log(`📊 Total d'inputs trouvés : ${allInputs.length}`);
            console.log('');

            allInputs.forEach((input, index) => {
                console.log(`[${index + 1}] Type: ${input.tagName}`);
                console.log(`    ID: "${input.id || '(vide)'}"`);
                console.log(`    Name: "${input.name || '(vide)'}"`);
                console.log(`    Type: ${input.type || '(pas de type)'}`);
                console.log(`    Placeholder: "${input.placeholder || '(vide)'}"`);
                console.log('');
            });

            console.log('========================================');
            console.log('');

            // ========================================================================
            // 🧪 TEST IMMÉDIAT - Est-ce que le JavaScript fonctionne ?
            // ========================================================================
            console.log('');
            console.log('========================================');
            console.log('🧪 TEST : Le JavaScript fonctionne-t-il ?');
            console.log('========================================');

            // Test 1 : Changer le nom directement
            const testNom = document.getElementById('mockup-nom');
            if (testNom) {
                console.log('✅ TEST 1 : mockup-nom trouvé !');
                const originalText = testNom.textContent;
                testNom.textContent = '🔥 TEST RÉUSSI 🔥';
                setTimeout(() => {
                    testNom.textContent = originalText;
                    console.log('✅ TEST 1 : Texte restauré');
                }, 2000);
            } else {
                console.error('❌ TEST 1 : mockup-nom NOT FOUND !');
            }

            // Test 2 : Changer le prénom directement
            const testPrenom = document.getElementById('mockup-prenom');
            if (testPrenom) {
                console.log('✅ TEST 2 : mockup-prenom trouvé !');
                const originalText = testPrenom.textContent;
                testPrenom.textContent = '✨ JS MARCHE ✨';
                setTimeout(() => {
                    testPrenom.textContent = originalText;
                    console.log('✅ TEST 2 : Texte restauré');
                }, 2000);
            } else {
                console.error('❌ TEST 2 : mockup-prenom NOT FOUND !');
            }

            // Test 3 : Changer l'entreprise
            const testEntreprise = document.getElementById('mockup-entreprise');
            if (testEntreprise) {
                console.log('✅ TEST 3 : mockup-entreprise trouvé !');
            } else {
                console.error('❌ TEST 3 : mockup-entreprise NOT FOUND !');
            }

            // Test 4 : Tester les spécialités
            ['mockup-service1', 'mockup-service2', 'mockup-service3', 'mockup-service4'].forEach((id, index) => {
                const elem = document.getElementById(id);
                if (elem) {
                    console.log(`✅ TEST SPE${index + 1} : ${id} trouvé !`);
                } else {
                    console.error(`❌ TEST SPE${index + 1} : ${id} NOT FOUND !`);
                }
            });

            console.log('');
            console.log('👀 REGARDEZ LE MOCKUP ! Si vous voyez "TEST RÉUSSI" et "JS MARCHE",');
            console.log('   alors le JavaScript fonctionne et le problème vient des IDs des inputs.');
            console.log('');
            console.log('💡 ASTUCE : Tapez dans la console → testAllFields()');
            console.log('   pour tester manuellement tous les champs !');
            console.log('========================================');
            console.log('');

            // ========================================================================
            // FONCTION: Rechercher un input par plusieurs patterns (ULTRA-ROBUSTE)
            // ========================================================================
            function findInput(patterns) {
                console.log(`🔍 Recherche de: ${patterns.join(', ')}`);
                
                for (const pattern of patterns) {
                    // Méthode 1 : Par ID exact
                    let el = document.getElementById(pattern);
                    if (el) {
                        console.log(`  ✅ Trouvé par ID exact: #${pattern}`);
                        return el;
                    }

                    // Méthode 2 : Par fin d'ID (ex: premium_nom)
                    el = document.querySelector(`[id$="_${pattern}"]`);
                    if (el) {
                        console.log(`  ✅ Trouvé par fin d'ID: #${el.id}`);
                        return el;
                    }
                    
                    // Méthode 3 : Par ID contenant le pattern
                    el = document.querySelector(`[id*="${pattern}"]`);
                    if (el) {
                        console.log(`  ✅ Trouvé par ID contenant: #${el.id}`);
                        return el;
                    }

                    // Méthode 4 : Par name exact
                    el = document.querySelector(`[name="${pattern}"]`);
                    if (el) {
                        console.log(`  ✅ Trouvé par name exact: ${el.name}`);
                        return el;
                    }

                    // Méthode 5 : Par name se terminant par [pattern]
                    el = document.querySelector(`[name$="[${pattern}]"]`);
                    if (el) {
                        console.log(`  ✅ Trouvé par name: ${el.name}`);
                        return el;
                    }
                    
                    // Méthode 6 : Par name contenant le pattern
                    el = document.querySelector(`[name*="${pattern}"]`);
                    if (el) {
                        console.log(`  ✅ Trouvé par name contenant: ${el.name}`);
                        return el;
                    }
                }
                
                console.error(`  ❌ AUCUN input trouvé pour: ${patterns.join(', ')}`);
                return null;
            }

            // ========================================================================
            // RECHERCHE DES INPUTS DU FORMULAIRE
            // ========================================================================
            console.log('🔍 Recherche des inputs...');

            const inputNom = findInput(['premium_nom', 'nom']);
            const inputPrenom = findInput(['premium_prenom', 'prenom']);
            const inputEntreprise = findInput(['premium_entreprise', 'entreprise']);
            const inputTitre = findInput(['premium_titre', 'titre']);
            const inputFonction = findInput(['premium_fonction', 'fonction']);
            const inputSlogan = findInput(['premium_slogan', 'slogan']);
            const inputFixe = findInput(['premium_fixe', 'fixe']);
            const inputMobile = findInput(['premium_mobile', 'mobile']);
            const inputEmail = findInput(['premium_email', 'email']);
            const inputAdresse = findInput(['premium_adresse', 'adresse']);
            const inputCodePostal = findInput(['premium_code_postal', 'code_postal']);
            const inputVille = findInput(['premium_ville', 'ville']);
            const inputSiteWeb = findInput(['premium_siteWeb', 'siteWeb', 'site_web']);
            const inputExpertise = findInput(['premium_expertise', 'expertise']);
            const inputSeances = findInput(['premium_seances', 'seances']);
            const inputLogo = findInput(['premium_logo', 'logo']);
            const inputDescription = findInput(['premium_description', 'description']);
            const inputSpe1 = findInput(['premium_spe1', 'spe1']);
            const inputSpe2 = findInput(['premium_spe2', 'spe2']);
            const inputSpe3 = findInput(['premium_spe3', 'spe3']);
            const inputSpe4 = findInput(['premium_spe4', 'spe4']);
            const inputValeur1 = findInput(['premium_valeur1', 'valeur1']);
            const inputValeur2 = findInput(['premium_valeur2', 'valeur2']);
            const inputValeur3 = findInput(['premium_valeur3', 'valeur3']);
            const inputFacebook = findInput(['premium_facebook', 'facebook']);
            const inputInstagram = findInput(['premium_instagram', 'instagram']);
            const inputLinkedin = findInput(['premium_linkedin', 'linkedin']);
            const inputSatisfaction = findInput(['premium_satifaction', 'satifaction', 'satisfaction']);

            console.log('');
            console.log('📋 Résumé des inputs trouvés:');
            console.log('  - Nom:', inputNom ? '✓' : '✗');
            console.log('  - Prénom:', inputPrenom ? '✓' : '✗');
            console.log('  - Entreprise:', inputEntreprise ? '✓' : '✗');
            console.log('  - Titre:', inputTitre ? '✓' : '✗');
            console.log('  - Fonction:', inputFonction ? '✓' : '✗');
            console.log('  - Slogan:', inputSlogan ? '✓' : '✗');
            console.log('  - Fixe:', inputFixe ? '✓' : '✗');
            console.log('  - Mobile:', inputMobile ? '✓' : '✗');
            console.log('  - Email:', inputEmail ? '✓' : '✗');
            console.log('  - Adresse:', inputAdresse ? '✓' : '✗');
            console.log('  - Code Postal:', inputCodePostal ? '✓' : '✗');
            console.log('  - Ville:', inputVille ? '✓' : '✗');
            console.log('  - Site Web:', inputSiteWeb ? '✓' : '✗');
            console.log('  - Expertise:', inputExpertise ? '✓' : '✗');
            console.log('  - Séances:', inputSeances ? '✓' : '✗');
            console.log('  - Logo:', inputLogo ? '✓' : '✗');
            console.log('  - Description:', inputDescription ? '✓' : '✗');
            console.log('  - Spécialités (1-4):', inputSpe1 ? '✓' : '✗');
            console.log('  - Valeurs (1-3):', inputValeur1 ? '✓' : '✗');
            console.log('  - Facebook:', inputFacebook ? '✓' : '✗');
            console.log('  - Instagram:', inputInstagram ? '✓' : '✗');
            console.log('  - LinkedIn:', inputLinkedin ? '✓' : '✗');
            console.log('  - Satisfaction:', inputSatisfaction ? '✓' : '✗');

            // ========================================================================
            // LISTENERS - NOM / PRÉNOM (séparés)
            // ========================================================================
            if (inputNom) {
                inputNom.addEventListener('input', function () {
                    const mockupNom = document.getElementById('mockup-nom');
                    if (mockupNom) {
                        mockupNom.textContent = this.value.toUpperCase() || 'XXXXXXXX';
                        console.log('✓ Nom mis à jour:', this.value);
                    }
                });
            }

            if (inputPrenom) {
                inputPrenom.addEventListener('input', function () {
                    const mockupPrenom = document.getElementById('mockup-prenom');
                    if (mockupPrenom) {
                        mockupPrenom.textContent = this.value || 'Prénom';
                        console.log('✓ Prénom mis à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - ENTREPRISE
            // ========================================================================
            if (inputEntreprise) {
                inputEntreprise.addEventListener('input', function () {
                    const mockup = document.getElementById('mockup-entreprise');
                    if (mockup) {
                        mockup.textContent = this.value || 'VOTRE ENTREPRISE';
                        console.log('✓ Entreprise mise à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - TITRE (tagline)
            // ========================================================================
            if (inputTitre) {
                inputTitre.addEventListener('input', function () {
                    const mockup = document.getElementById('mockup-titre');
                    if (mockup) {
                        mockup.textContent = this.value || 'Votre titre';
                        console.log('✓ Titre mis à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - FONCTION
            // ========================================================================
            if (inputFonction) {
                inputFonction.addEventListener('input', function () {
                    const mockup = document.getElementById('mockup-fonction');
                    if (mockup) {
                        mockup.textContent = this.value || 'Votre Fonction';
                        console.log('✓ Fonction mise à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - SLOGAN
            // ========================================================================
            if (inputSlogan) {
                inputSlogan.addEventListener('input', function () {
                    const mockup = document.getElementById('mockup-slogan');
                    if (mockup) {
                        mockup.textContent = this.value ? '« ' + this.value + ' »' :
                            '« Votre slogan »';
                        console.log('✓ Slogan mis à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - TÉLÉPHONE FIXE
            // ========================================================================
            if (inputFixe) {
                inputFixe.addEventListener('input', function () {
                    const mockupSpan = document.getElementById('mockup-fixe');
                    const mockupLink = document.getElementById('mockup-fixe-link');
                    if (mockupSpan) {
                        mockupSpan.textContent = this.value || '05 XX XX XX XX';
                    }
                    if (mockupLink && this.value) {
                        const cleanValue = this.value.replace(/[\s\-\.]/g, '');
                        mockupLink.href = 'tel:' + cleanValue;
                    }
                    console.log('✓ Fixe mis à jour:', this.value);
                });
            }

            // ========================================================================
            // LISTENERS - TÉLÉPHONE MOBILE
            // ========================================================================
            if (inputMobile) {
                inputMobile.addEventListener('input', function () {
                    const mockupSpan = document.getElementById('mockup-mobile');
                    const mockupLink = document.getElementById('mockup-mobile-link');
                    if (mockupSpan) {
                        mockupSpan.textContent = this.value || '06 XX XX XX XX';
                    }
                    if (mockupLink && this.value) {
                        const cleanValue = this.value.replace(/[\s\-\.]/g, '');
                        mockupLink.href = 'tel:' + cleanValue;
                    }
                    console.log('✓ Mobile mis à jour:', this.value);
                });
            }

            // ========================================================================
            // LISTENERS - EMAIL
            // ========================================================================
            if (inputEmail) {
                inputEmail.addEventListener('input', function () {
                    const mockupSpan = document.getElementById('mockup-email');
                    const mockupLink = document.getElementById('mockup-email-link');
                    if (mockupSpan) {
                        mockupSpan.textContent = this.value || 'contact@exemple.fr';
                    }
                    if (mockupLink && this.value) {
                        mockupLink.href = 'mailto:' + this.value;
                    }
                    console.log('✓ Email mis à jour:', this.value);
                });
            }

            // ========================================================================
            // LISTENERS - EXPERTISE (années d'expérience)
            // ========================================================================
            if (inputExpertise) {
                inputExpertise.addEventListener('input', function () {
                    const mockup = document.getElementById('mockup-expertise');
                    if (mockup) {
                        mockup.textContent = this.value || '0';
                        console.log('✓ Expertise mise à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - SÉANCES
            // ========================================================================
            if (inputSeances) {
                inputSeances.addEventListener('input', function () {
                    const mockup = document.getElementById('mockup-seances');
                    if (mockup) {
                        mockup.textContent = this.value || '0';
                        console.log('✓ Séances mises à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - SATISFACTION
            // ========================================================================
            if (inputSatisfaction) {
                inputSatisfaction.addEventListener('input', function () {
                    const mockup = document.getElementById('mockup-satisfaction');
                    if (mockup) {
                        mockup.textContent = this.value || '100%';
                        console.log('✓ Satisfaction mise à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - ADRESSE COMPLÈTE
            // ========================================================================
            function updateAdresse() {
                const mockup = document.getElementById('mockup-adresse');
                if (mockup) {
                    const adresse = inputAdresse?.value || '';
                    const codePostal = inputCodePostal?.value || '';
                    const ville = inputVille?.value || '';

                    let fullAdresse = '';
                    if (adresse) fullAdresse += adresse;
                    if (codePostal || ville) {
                        if (fullAdresse) fullAdresse += ', ';
                        if (codePostal) fullAdresse += codePostal + ' ';
                        if (ville) fullAdresse += ville;
                    }

                    mockup.textContent = fullAdresse || '123 Rue de la Créativité, 31000 Toulouse';
                    console.log('✓ Adresse mise à jour:', fullAdresse);
                }
            }
            if (inputAdresse) inputAdresse.addEventListener('input', updateAdresse);
            if (inputCodePostal) inputCodePostal.addEventListener('input', updateAdresse);
            if (inputVille) inputVille.addEventListener('input', updateAdresse);

            // ========================================================================
            // LISTENERS - SITE WEB
            // ========================================================================
            if (inputSiteWeb) {
                inputSiteWeb.addEventListener('input', function () {
                    const mockupSpan = document.getElementById('mockup-site');
                    const mockupLink = document.getElementById('mockup-site-link');
                    if (mockupSpan) {
                        mockupSpan.textContent = this.value || 'www.votresite.fr';
                    }
                    if (mockupLink && this.value) {
                        const url = this.value.startsWith('http') ? this.value : 'https://' +
                            this.value;
                        mockupLink.href = url;
                    }
                    console.log('✓ Site web mis à jour:', this.value);
                });
            }

            // ========================================================================
            // LISTENERS - DESCRIPTION
            // ========================================================================
            if (inputDescription) {
                inputDescription.addEventListener('input', function () {
                    const mockup = document.getElementById('mockup-description');
                    if (mockup) {
                        mockup.textContent = this.value || 'Votre description personnalisée...';
                        console.log('✓ Description mise à jour');
                    }
                });
            }

            // ========================================================================
            // LISTENERS - SPÉCIALITÉS (1 à 4)
            // ========================================================================
            const specialites = [
                { input: inputSpe1, mockupId: 'mockup-service1', default: '💍 Mariages' },
                { input: inputSpe2, mockupId: 'mockup-service2', default: '👨‍👩‍👧‍👦 Portraits' },
                { input: inputSpe3, mockupId: 'mockup-service3', default: '💼 Corporate' },
                { input: inputSpe4, mockupId: 'mockup-service4', default: '🎨 Artistique' }
            ];

            specialites.forEach((spe, index) => {
                if (spe.input) {
                    spe.input.addEventListener('input', function () {
                        const mockup = document.getElementById(spe.mockupId);
                        if (mockup) {
                            mockup.textContent = this.value || spe.default;
                            console.log('✓ Spécialité ' + (index + 1) + ' mise à jour:',
                                this.value);
                        }
                    });
                }
            });

            // ========================================================================
            // LISTENERS - VALEURS (1 à 3)
            // ========================================================================
            const valeurs = [{
                    input: inputValeur1,
                    mockupId: 'mockup-valeur1',
                    default: 'Valeur 1'
                },
                {
                    input: inputValeur2,
                    mockupId: 'mockup-valeur2',
                    default: 'Valeur 2'
                },
                {
                    input: inputValeur3,
                    mockupId: 'mockup-valeur3',
                    default: 'Valeur 3'
                }
            ];

            valeurs.forEach((valeur, index) => {
                if (valeur.input) {
                    valeur.input.addEventListener('input', function () {
                        const mockup = document.getElementById(valeur.mockupId);
                        if (mockup) {
                            mockup.textContent = this.value || valeur.default;
                            console.log('✓ Valeur ' + (index + 1) + ' mise à jour:',
                                this.value);
                        }
                    });
                }
            });

            // ========================================================================
            // LISTENERS - RÉSEAUX SOCIAUX
            // ========================================================================
            if (inputFacebook) {
                inputFacebook.addEventListener('input', function () {
                    const mockupLink = document.getElementById('mockup-facebook');
                    if (mockupLink && this.value) {
                        const url = this.value.startsWith('http') ? this.value :
                            'https://facebook.com/' + this.value;
                        mockupLink.href = url;
                        console.log('✓ Facebook mis à jour:', this.value);
                    }
                });
            }

            if (inputInstagram) {
                inputInstagram.addEventListener('input', function () {
                    const mockupLink = document.getElementById('mockup-instagram');
                    if (mockupLink && this.value) {
                        const url = this.value.startsWith('http') ? this.value :
                            'https://instagram.com/' + this.value;
                        mockupLink.href = url;
                        console.log('✓ Instagram mis à jour:', this.value);
                    }
                });
            }

            if (inputLinkedin) {
                inputLinkedin.addEventListener('input', function () {
                    const mockupLink = document.getElementById('mockup-linkedin');
                    if (mockupLink && this.value) {
                        const url = this.value.startsWith('http') ? this.value :
                            'https://linkedin.com/in/' + this.value;
                        mockupLink.href = url;
                        console.log('✓ LinkedIn mis à jour:', this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - LOGO (upload fichier)
            // ========================================================================
            if (inputLogo) {
                inputLogo.addEventListener('change', function () {
                    const mockupLogo = document.getElementById('mockup-logo');
                    if (this.files && this.files[0] && mockupLogo) {
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            mockupLogo.innerHTML = '<img src="' + e.target.result +
                                '" style="max-width: 80px; max-height: 60px; object-fit: contain;">';
                            console.log('✓ Logo mis à jour');
                        };
                        reader.readAsDataURL(this.files[0]);
                    }
                });
            }

            console.log('');
            console.log('========================================');
            console.log('✅ INITIALISATION PREMIUM TERMINÉE');
            console.log('========================================');

            // ========================================================================
            // 🎯 FONCTION DE TEST MANUEL - Accessible depuis la console
            // ========================================================================
            window.testAllFields = function() {
                console.log('');
                console.log('🔬 TEST MANUEL DE TOUS LES CHAMPS');
                console.log('==================================');
                
                const tests = [
                    { input: inputNom, name: 'Nom', mockup: 'mockup-nom' },
                    { input: inputPrenom, name: 'Prénom', mockup: 'mockup-prenom' },
                    { input: inputEntreprise, name: 'Entreprise', mockup: 'mockup-entreprise' },
                    { input: inputTitre, name: 'Titre', mockup: 'mockup-titre' },
                    { input: inputFonction, name: 'Fonction', mockup: 'mockup-fonction' },
                    { input: inputSlogan, name: 'Slogan', mockup: 'mockup-slogan' },
                    { input: inputFixe, name: 'Fixe', mockup: 'mockup-fixe' },
                    { input: inputMobile, name: 'Mobile', mockup: 'mockup-mobile' },
                    { input: inputEmail, name: 'Email', mockup: 'mockup-email' },
                    { input: inputSiteWeb, name: 'Site Web', mockup: 'mockup-site' },
                    { input: inputExpertise, name: 'Expertise', mockup: 'mockup-expertise' },
                    { input: inputSeances, name: 'Séances', mockup: 'mockup-seances' },
                    { input: inputSpe1, name: 'Spé 1', mockup: 'mockup-service1' },
                    { input: inputSpe2, name: 'Spé 2', mockup: 'mockup-service2' },
                    { input: inputSpe3, name: 'Spé 3', mockup: 'mockup-service3' },
                    { input: inputSpe4, name: 'Spé 4', mockup: 'mockup-service4' },
                    { input: inputSatisfaction, name: 'Satisfaction', mockup: 'mockup-satisfaction' }
                ];
                
                tests.forEach(test => {
                    const inputStatus = test.input ? '✅ Input trouvé' : '❌ Input NOT FOUND';
                    const mockupElem = document.getElementById(test.mockup);
                    const mockupStatus = mockupElem ? '✅ Mockup trouvé' : '❌ Mockup NOT FOUND';
                    
                    console.log(`${test.name}:`);
                    console.log(`  Input: ${inputStatus}`);
                    if (test.input) console.log(`    ID: ${test.input.id}`);
                    console.log(`  Mockup: ${mockupStatus}`);
                    console.log('');
                });
                
                console.log('💡 Pour tester un champ spécifique, tapez dans un input et regardez la console.');
            };
            
            console.log('');
            console.log('💡 COMMANDE DISPONIBLE : testAllFields()');
            console.log('   Tapez cette commande dans la console pour diagnostiquer tous les champs');

        }, 500); // Délai pour s'assurer que le formulaire est chargé
    });

</script>

{% endblock %}