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

{% block title %}Créer une carte FORCE de vente{% endblock %}

{% block body %}


<!-- PAGE FORCE - Modèle Force de vente (Doré/Professionnel) -->
<section class="modele-force-section" id="modele-force"
    style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); min-height: 100vh; width: 100%; position: relative;">

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

        <!-- BLOC 1 : Mockup Force - Position FIXED -->
        <div id="mockup" style="height: 100vh; position: sticky; top: 0; width: 31%;margin-left:auto;margin-right:auto;">
            <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);
                    position: relative;
                ">
                    <!-- Encoche -->
                    <div style="
                        position: absolute;
                        top: 20px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 120px;
                        height: 28px;
                        background: #2a2a2a;
                        border-radius: 0 0 18px 18px;
                        z-index: 10;
                    "></div>
                    <!-- Caméra -->
                    <div style="
                        position: absolute;
                        top: 32px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 14px;
                        height: 14px;
                        background: #444;
                        border-radius: 50%;
                        z-index: 11;
                    "></div>

                    <div class="smartphone-screen" style="
                        width: 100%;
                        height: 100%;
                        background: #ffffff;
                        border-radius: 35px;
                        overflow: hidden;
                        overflow-y: scroll;
                        position: relative;
                        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
                    ">
                        <div class="vcard-container" style="max-width: 100%; margin: 0; background: white;">

                            <!-- HEADER -->
                            <div class="header" style="
                                background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
                                color: white;
                                padding: 40px 30px 45px;
                                text-align: center;
                                position: relative;
                                overflow: hidden;
                            ">
                                <div style="
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    background: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.03\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
                                    opacity: 0.4;
                                "></div>

                                <div class="logo" style="
                                    font-size: 48px;
                                    font-weight: 900;
                                    letter-spacing: 3px;
                                    color: #c9a569;
                                    line-height: 1;
                                    text-shadow: 0 2px 10px rgba(201, 165, 105, 0.3);
                                    position: relative;
                                    z-index: 1;
                                ">LOGO</div>
                                <div class="company-name" id="mockup-entreprise" style="
                                    font-size: 28px;
                                    font-weight: 700;
                                    letter-spacing: 3px;
                                    color: white;
                                    margin-top: 8px;
                                    position: relative;
                                    z-index: 1;
                                ">VOTRE ENTREPRISE</div>
                                <div class="tagline" id="mockup-slogan" style="
                                    font-size: 14px;
                                    margin-top: 8px;
                                    opacity: 0.9;
                                    position: relative;
                                    z-index: 1;
                                ">Votre slogan inspirant</div>
                            </div>

                            <!-- PROFILE SECTION -->
                            <div class="profile-section" style="
                                text-align: center;
                                padding: 30px 25px;
                                background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
                                border-bottom: 1px solid #e0e0e0;
                            ">
                                <img id="mockup-photo"
                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%232c3e50;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%231a252f;stop-opacity:1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='200' cy='200' r='200' fill='url(%23grad)'/%3E%3Ctext x='200' y='240' font-family='Arial' font-size='180' fill='%23c9a569' text-anchor='middle' font-weight='bold'%3EJD%3C/text%3E%3C/svg%3E"
                                    alt="Profile" style="
                                    width: 120px;
                                    height: 120px;
                                    border-radius: 50%;
                                    margin: 0 auto 20px;
                                    border: 5px solid #c9a569;
                                    object-fit: cover;
                                    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
                                ">
                                <div class="profile-name" id="mockup-nom" style="
                                    font-size: 26px;
                                    font-weight: 700;
                                    color: #2c3e50;
                                    margin-bottom: 8px;
                                    letter-spacing: 0.5px;
                                ">Jean DUPONT</div>
                                <div class="profile-title" id="mockup-fonction" style="
                                    font-size: 16px;
                                    color: #c9a569;
                                    font-weight: 600;
                                    margin-bottom: 15px;
                                ">Agent Immobilier Premium</div>
                                <div class="profile-description" id="mockup-specialite" style="
                                    font-size: 14px;
                                    color: #1d1d1f;
                                    line-height: 1.6;
                                    max-width: 280px;
                                    margin: 0 auto;
                                ">Spécialiste du marché de prestige.</div>
                            </div>

                            <!-- CONTACT INFO -->
                            <div class="contact-info" style="padding: 25px; background: white;">
                                <!-- FIXE -->
                                <a href="tel:+33512345678" id="mockup-fixe-link" style="
                                    display: flex;
                                    align-items: center;
                                    padding: 15px;
                                    margin-bottom: 12px;
                                    background: #f8f9fa;
                                    border-radius: 12px;
                                    text-decoration: none;
                                    color: #2c3e50;
                                    transition: all 0.3s ease;
                                    border: 2px solid transparent;
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="#c9a569" stroke-width="2"
                                        style="width: 24px; height: 24px; margin-right: 15px; flex-shrink: 0;">
                                        <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>
                                    <div style="flex: 1;">
                                        <div
                                            style="font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;">
                                            FIXE</div>
                                        <div id="mockup-fixe"
                                            style="font-size: 15px; font-weight: 600; color: #2c3e50;">+33 5 12 34 56 78
                                        </div>
                                    </div>
                                </a>

                                <!-- MOBILE -->
                                <a href="tel:+33612345678" id="mockup-mobile-link" style="
                                    display: flex;
                                    align-items: center;
                                    padding: 15px;
                                    margin-bottom: 12px;
                                    background: #f8f9fa;
                                    border-radius: 12px;
                                    text-decoration: none;
                                    color: #2c3e50;
                                    transition: all 0.3s ease;
                                    border: 2px solid transparent;
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="#c9a569" stroke-width="2"
                                        style="width: 24px; height: 24px; margin-right: 15px; flex-shrink: 0;">
                                        <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>
                                    <div style="flex: 1;">
                                        <div
                                            style="font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;">
                                            MOBILE</div>
                                        <div id="mockup-mobile"
                                            style="font-size: 15px; font-weight: 600; color: #2c3e50;">+33 6 12 34 56 78
                                        </div>
                                    </div>
                                </a>

                                <a href="mailto:contact@example.fr" id="mockup-email-link" style="
                                    display: flex;
                                    align-items: center;
                                    padding: 15px;
                                    margin-bottom: 12px;
                                    background: #f8f9fa;
                                    border-radius: 12px;
                                    text-decoration: none;
                                    color: #2c3e50;
                                    transition: all 0.3s ease;
                                    border: 2px solid transparent;
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="#c9a569" stroke-width="2"
                                        style="width: 24px; height: 24px; margin-right: 15px; flex-shrink: 0;">
                                        <path
                                            d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                                        <polyline points="22,6 12,13 2,6" />
                                    </svg>
                                    <div style="flex: 1;">
                                        <div
                                            style="font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;">
                                            EMAIL</div>
                                        <div id="mockup-email"
                                            style="font-size: 15px; font-weight: 600; color: #2c3e50;">
                                            contact@example.fr</div>
                                    </div>
                                </a>

                                <a href="#" style="
                                    display: flex;
                                    align-items: center;
                                    padding: 15px;
                                    margin-bottom: 12px;
                                    background: #f8f9fa;
                                    border-radius: 12px;
                                    text-decoration: none;
                                    color: #2c3e50;
                                    border: 2px solid transparent;
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="#c9a569" stroke-width="2"
                                        style="width: 24px; height: 24px; margin-right: 15px; flex-shrink: 0;">
                                        <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>
                                    <div style="flex: 1;">
                                        <div
                                            style="font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px;">
                                            ADRESSE</div>
                                        <div id="mockup-adresse"
                                            style="font-size: 13px; font-weight: 600; color: #2c3e50;">123 Avenue des
                                            Champs-Élysées, Paris</div>
                                    </div>
                                </a>

                                <!-- Bouton Ajouter aux contacts -->
                                <a href="#" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                    width: 100%;
                                    padding: 18px;
                                    background: linear-gradient(135deg, #c9a569 0%, #b8935f 100%);
                                    color: white;
                                    text-decoration: none;
                                    border-radius: 12px;
                                    font-weight: 700;
                                    font-size: 16px;
                                    margin-top: 8px;
                                    box-shadow: 0 4px 15px rgba(201, 165, 105, 0.3);
                                    letter-spacing: 0.5px;
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"
                                        style="width: 22px; height: 22px;">
                                        <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 aux contacts
                                </a>
                            </div>


                            <!-- ════════════════════════════════════════════════════════════ -->
                            <!-- SHARE SECTION - Partager ma carte -->
                            <!-- ════════════════════════════════════════════════════════════ -->
                            <div class="share-section" style="
                                padding: 30px 20px;
                                background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
                                position: relative;
                                overflow: hidden;
                            ">
                                <div style="
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    background: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23c9a569\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
                                    opacity: 1;
                                "></div>

                                <h3 style="
                                    color: white;
                                    font-size: 22px;
                                    margin-bottom: 20px;
                                    font-weight: 700;
                                    text-align: center;
                                    position: relative;
                                    z-index: 1;
                                ">📤 Partager ma carte</h3>

                                <div style="
                                    display: grid;
                                    grid-template-columns: repeat(2, 1fr);
                                    gap: 12px;
                                    position: relative;
                                    z-index: 1;
                                ">
                                    <!-- WhatsApp -->
                                    <a href="#" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 8px;
                                        padding: 18px 12px;
                                        border-radius: 16px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        background: linear-gradient(135deg, #25D366 0%, #20BA5A 100%);
                                        color: white;
                                        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 28px; height: 28px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>WhatsApp</span>
                                    </a>

                                    <!-- Email -->
                                    <a href="#" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 8px;
                                        padding: 18px 12px;
                                        border-radius: 16px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%);
                                        color: white;
                                        box-shadow: 0 4px 15px rgba(234, 67, 53, 0.3);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 28px; height: 28px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>Email</span>
                                    </a>

                                    <!-- SMS -->
                                    <a href="#" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 8px;
                                        padding: 18px 12px;
                                        border-radius: 16px;
                                        text-decoration: none;
                                        font-size: 13px;
                                        font-weight: 600;
                                        background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
                                        color: white;
                                        box-shadow: 0 4px 15px rgba(0, 136, 204, 0.3);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 28px; height: 28px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>SMS</span>
                                    </a>

                                    <!-- QR Code -->
                                    <button style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 8px;
                                        padding: 18px 12px;
                                        border-radius: 16px;
                                        font-size: 13px;
                                        font-weight: 600;
                                        background: white;
                                        color: #c9a569;
                                        border: 2px solid #c9a569;
                                        cursor: pointer;
                                        box-shadow: 0 4px 15px rgba(201, 165, 105, 0.3);
                                    ">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            style="width: 28px; height: 28px;">
                                            <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>
                                        <span>QR Code</span>
                                    </button>
                                </div>
                            </div>

                            <!-- ════════════════════════════════════════════════════════════ -->
                            <!-- DIRECT ACCESS SECTION - Accès direct + Réseaux sociaux -->
                            <!-- ════════════════════════════════════════════════════════════ -->
                            <div class="direct-access-section" style="
                                padding: 30px 20px;
                                background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
                                position: relative;
                                overflow: hidden;
                            ">
                                <div style="
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    background: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23c9a569\' fill-opacity=\'0.03\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
                                    opacity: 1;
                                "></div>

                                <h3 style="
                                    color: white;
                                    font-size: 22px;
                                    margin-bottom: 20px;
                                    font-weight: 700;
                                    text-align: center;
                                    position: relative;
                                    z-index: 1;
                                ">🔗 Accès direct</h3>

                                <!-- Bouton Mon Actu -->
                                <a href="#" style="
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 12px;
                                    padding: 20px;
                                    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
                                    color: white;
                                    border-radius: 16px;
                                    text-decoration: none;
                                    font-weight: 700;
                                    font-size: 16px;
                                    margin-bottom: 25px;
                                    position: relative;
                                    overflow: hidden;
                                    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
                                    z-index: 1;
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        style="width: 24px; height: 24px;">
                                        <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 style="
                                    text-align: center;
                                    color: rgba(255, 255, 255, 0.7);
                                    font-size: 12px;
                                    margin-bottom: 15px;
                                    font-weight: 500;
                                    position: relative;
                                    z-index: 1;
                                    text-transform: uppercase;
                                    letter-spacing: 1px;
                                ">Suivez-nous sur nos réseaux</div>

                                <!-- Social Grid -->
                                <div style="
                                    display: grid;
                                    grid-template-columns: repeat(3, 1fr);
                                    gap: 10px;
                                    position: relative;
                                    z-index: 1;
                                ">
                                    <!-- LinkedIn -->
                                    <a href="#" id="mockup-linkedin-link" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 6px;
                                        padding: 16px 8px;
                                        border-radius: 14px;
                                        text-decoration: none;
                                        font-size: 11px;
                                        font-weight: 600;
                                        background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
                                        color: white;
                                        box-shadow: 0 3px 12px rgba(0, 119, 181, 0.3);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 24px; height: 24px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>LinkedIn</span>
                                    </a>

                                    <!-- Facebook -->
                                    <a href="#" id="mockup-facebook-link" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 6px;
                                        padding: 16px 8px;
                                        border-radius: 14px;
                                        text-decoration: none;
                                        font-size: 11px;
                                        font-weight: 600;
                                        background: linear-gradient(135deg, #1877f2 0%, #0d5dbf 100%);
                                        color: white;
                                        box-shadow: 0 3px 12px rgba(24, 119, 242, 0.3);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 24px; height: 24px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>Facebook</span>
                                    </a>

                                    <!-- YouTube -->
                                    <a href="#" id="mockup-youtube-link" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 6px;
                                        padding: 16px 8px;
                                        border-radius: 14px;
                                        text-decoration: none;
                                        font-size: 11px;
                                        font-weight: 600;
                                        background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
                                        color: white;
                                        box-shadow: 0 3px 12px rgba(255, 0, 0, 0.3);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 24px; height: 24px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>Youtube</span>
                                    </a>

                                    <!-- TikTok -->
                                    <a href="#" id="mockup-tiktok-link" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 6px;
                                        padding: 16px 8px;
                                        border-radius: 14px;
                                        text-decoration: none;
                                        font-size: 11px;
                                        font-weight: 600;
                                        background: linear-gradient(135deg, #000000 0%, #333333 100%);
                                        color: white;
                                        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 24px; height: 24px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>TikTok</span>
                                    </a>

                                    <!-- Instagram -->
                                    <a href="#" id="mockup-insta-link" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 6px;
                                        padding: 16px 8px;
                                        border-radius: 14px;
                                        text-decoration: none;
                                        font-size: 11px;
                                        font-weight: 600;
                                        background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
                                        color: white;
                                        box-shadow: 0 3px 12px rgba(238, 42, 123, 0.3);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 24px; height: 24px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>Instagram</span>
                                    </a>

                                    <!-- X (Twitter) -->
                                    <a href="#" id="mockup-x-link" style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 6px;
                                        padding: 16px 8px;
                                        border-radius: 14px;
                                        text-decoration: none;
                                        font-size: 11px;
                                        font-weight: 600;
                                        background: linear-gradient(135deg, #14171a 0%, #000000 100%);
                                        color: white;
                                        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
                                    ">
                                        <svg viewBox="0 0 24 24" style="width: 24px; height: 24px;">
                                            <path fill="currentColor"
                                                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>
                                        <span>X</span>
                                    </a>
                                </div>
                            </div>

                            <!-- ════════════════════════════════════════════════════════════ -->
                            <!-- WEBSITE SECTION - Sites web + Expertises -->
                            <!-- ════════════════════════════════════════════════════════════ -->
                            <div class="website-section" style="
                                padding: 30px 20px;
                                background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                            ">
                                <h3 style="
                                    color: #2c3e50;
                                    font-size: 22px;
                                    margin-bottom: 20px;
                                    font-weight: 700;
                                    text-align: center;
                                ">🌐 Nos sites web</h3>

                                <!-- Site 1 -->
                                <a href="#" style="
                                    display: flex;
                                    align-items: center;
                                    gap: 15px;
                                    padding: 18px 20px;
                                    background: white;
                                    border-radius: 14px;
                                    text-decoration: none;
                                    color: #2c3e50;
                                    margin-bottom: 12px;
                                    border: 2px solid #e0e0e0;
                                    font-weight: 600;
                                    font-size: 14px;
                                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="#c9a569" stroke-width="2"
                                        style="width: 28px; height: 28px; flex-shrink: 0;">
                                        <path
                                            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
                                        <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
                                        <line x1="12" y1="22.08" x2="12" y2="12" />
                                    </svg>
                                    www.renfortimmo.com
                                </a>

                                <!-- Site 2 -->
                                <a href="#" style="
                                    display: flex;
                                    align-items: center;
                                    gap: 15px;
                                    padding: 18px 20px;
                                    background: white;
                                    border-radius: 14px;
                                    text-decoration: none;
                                    color: #2c3e50;
                                    margin-bottom: 12px;
                                    border: 2px solid #e0e0e0;
                                    font-weight: 600;
                                    font-size: 14px;
                                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                                ">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="#c9a569" stroke-width="2"
                                        style="width: 28px; height: 28px; flex-shrink: 0;">
                                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
                                        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
                                    </svg>
                                    www.renfortimmo.fr
                                </a>

                                <!-- EXPERTISES -->
                                <div style="
                                    margin-top: 25px;
                                    padding-top: 25px;
                                    border-top: 2px solid #d0d0d0;
                                ">
                                    <h3 style="
                                        color: #2c3e50;
                                        font-size: 18px;
                                        margin-bottom: 18px;
                                        font-weight: 700;
                                        letter-spacing: 0.5px;
                                        text-align: center;
                                    ">✨ Nos Expertises</h3>
                                    <div style="
                                        display: grid;
                                        grid-template-columns: repeat(2, 1fr);
                                        gap: 10px;
                                        justify-content: center;
                                    ">
                                        <div style="
                                            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                                            color: white;
                                            padding: 12px 20px;
                                            border-radius: 30px;
                                            font-size: 13px;
                                            font-weight: 700;
                                            letter-spacing: 0.5px;
                                            box-shadow: 0 4px 12px rgba(201, 165, 105, 0.3);
                                            text-transform: uppercase;
                                            text-align: center;
                                        ">Optimiser</div>
                                        <div style="
                                            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                                            color: white;
                                            padding: 12px 20px;
                                            border-radius: 30px;
                                            font-size: 13px;
                                            font-weight: 700;
                                            letter-spacing: 0.5px;
                                            box-shadow: 0 4px 12px rgba(201, 165, 105, 0.3);
                                            text-transform: uppercase;
                                            text-align: center;
                                        ">Valoriser</div>
                                        <div style="
                                            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                                            color: white;
                                            padding: 12px 20px;
                                            border-radius: 30px;
                                            font-size: 13px;
                                            font-weight: 700;
                                            letter-spacing: 0.5px;
                                            box-shadow: 0 4px 12px rgba(201, 165, 105, 0.3);
                                            text-transform: uppercase;
                                            text-align: center;
                                        ">Développer</div>
                                        <div style="
                                            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                                            color: white;
                                            padding: 12px 20px;
                                            border-radius: 30px;
                                            font-size: 13px;
                                            font-weight: 700;
                                            letter-spacing: 0.5px;
                                            box-shadow: 0 4px 12px rgba(201, 165, 105, 0.3);
                                            text-transform: uppercase;
                                            text-align: center;
                                        ">Débloquer</div>
                                    </div>
                                </div>
                            </div>

                            <!-- ════════════════════════════════════════════════════════════ -->
                            <!-- SECTION RECOMMANDATION - Spécifique Force de Vente -->
                            <!-- ════════════════════════════════════════════════════════════ -->
                            <div class="referral-section" style="
                                padding: 25px;
                                background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
                                margin: 0;
                            ">
                                <h3 style="
                                    color: #c9a569 !important;
                                    font-size: 20px;
                                    margin-bottom: 10px;
                                    font-weight: 700;
                                    text-align: center;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    gap: 10px;
                                ">
                                    <span>🤝</span>
                                    Recommandez-moi
                                </h3>
                                <div style="
                                    text-align: center;
                                    color: #666;
                                    font-size: 13px;
                                    line-height: 1.5;
                                    margin-bottom: 20px;
                                    padding: 0 10px;
                                ">
                                    Vous êtes satisfait de mes services ? Partagez mon contact avec vos proches !
                                </div>

                                <!-- Avantages -->
                                <div style="
                                    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                                    padding: 15px;
                                    border-radius: 12px;
                                    margin-bottom: 20px;
                                    color: white;
                                    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
                                ">
                                    <div style="
                                        font-size: 15px;
                                        font-weight: 700;
                                        margin-bottom: 10px;
                                        display: flex;
                                        align-items: center;
                                        gap: 8px;
                                    ">
                                        <span>🎁</span>
                                        Vos avantages :
                                    </div>
                                    <ul style="
                                        font-size: 13px;
                                        line-height: 1.8;
                                        padding-left: 20px;
                                        margin: 0;
                                    ">
                                        <li style="margin-bottom: 5px;">✨ Service VIP prioritaire</li>
                                        <li style="margin-bottom: 5px;">💎 Remise de 500€ sur votre prochain projet</li>
                                        <li style="margin-bottom: 5px;">🎯 Accès exclusif à nos biens avant-première
                                        </li>
                                    </ul>
                                </div>

                                <!-- Formulaire de recommandation -->
                                <div style="
                                    background: white;
                                    padding: 20px;
                                    border-radius: 12px;
                                    border: 2px solid #e0e0e0;
                                ">
                                    <div style="margin-bottom: 15px;">
                                        <label style="
                                            display: block;
                                            font-size: 12px;
                                            font-weight: 600;
                                            color: #2c3e50;
                                            margin-bottom: 6px;
                                            text-transform: uppercase;
                                            letter-spacing: 0.5px;
                                        ">Votre nom <span style="color: #e74c3c;">*</span></label>
                                        <input type="text" placeholder="Ex: Marie Martin" style="
                                            width: 100%;
                                            padding: 12px 15px;
                                            border: 2px solid #e0e0e0;
                                            border-radius: 8px;
                                            font-size: 14px;
                                            background: #f8f9fa;
                                        ">
                                    </div>

                                    <div style="margin-bottom: 15px;">
                                        <label style="
                                            display: block;
                                            font-size: 12px;
                                            font-weight: 600;
                                            color: #2c3e50;
                                            margin-bottom: 6px;
                                            text-transform: uppercase;
                                            letter-spacing: 0.5px;
                                        ">Nom du contact <span style="color: #e74c3c;">*</span></label>
                                        <input type="text" placeholder="Ex: Pierre Dubois" style="
                                            width: 100%;
                                            padding: 12px 15px;
                                            border: 2px solid #e0e0e0;
                                            border-radius: 8px;
                                            font-size: 14px;
                                            background: #f8f9fa;
                                        ">
                                    </div>

                                    <div style="margin-bottom: 15px;">
                                        <label style="
                                            display: block;
                                            font-size: 12px;
                                            font-weight: 600;
                                            color: #2c3e50;
                                            margin-bottom: 6px;
                                            text-transform: uppercase;
                                            letter-spacing: 0.5px;
                                        ">Email du contact <span style="color: #e74c3c;">*</span></label>
                                        <input type="email" placeholder="Ex: pierre@email.com" style="
                                            width: 100%;
                                            padding: 12px 15px;
                                            border: 2px solid #e0e0e0;
                                            border-radius: 8px;
                                            font-size: 14px;
                                            background: #f8f9fa;
                                        ">
                                    </div>

                                    <div style="margin-bottom: 18px;">
                                        <label style="
                                            display: block;
                                            font-size: 12px;
                                            font-weight: 600;
                                            color: #2c3e50;
                                            margin-bottom: 6px;
                                            text-transform: uppercase;
                                            letter-spacing: 0.5px;
                                        ">Téléphone du contact <span style="color: #e74c3c;">*</span></label>
                                        <input type="tel" placeholder="Ex: +33 6 12 34 56 78" style="
                                            width: 100%;
                                            padding: 12px 15px;
                                            border: 2px solid #e0e0e0;
                                            border-radius: 8px;
                                            font-size: 14px;
                                            background: #f8f9fa;
                                        ">
                                    </div>

                                    <button type="button" style="
                                        width: 100%;
                                        padding: 16px;
                                        background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
                                        color: white;
                                        border: none;
                                        border-radius: 10px;
                                        font-size: 15px;
                                        font-weight: 700;
                                        cursor: pointer;
                                        text-transform: uppercase;
                                        letter-spacing: 1px;
                                        box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
                                    ">
                                        Envoyer la recommandation
                                    </button>
                                </div>
                            </div>

                            <!-- FOOTER -->
                            <div style="
                                background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
                                color: white;
                                padding: 30px 20px;
                                text-align: center;
                            ">
                                <p style="font-size: 13px; margin: 0 0 5px 0; opacity: 0.8;">© 2026 Num-Ecard</p>
                                <p style="font-size: 13px; margin: 0; opacity: 0.8;">Tous droits réservés</p>
                            </div>

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

        <!-- BLOC 2 : Formulaire -->
        <div id="bloc2" style="flex: 1 1 auto; max-width: 600px; padding-bottom: 10px;">
            <div style="color: white; margin-bottom: 40px; text-align: center;">
                <div
                    style="font-size: 18px; font-weight: 600; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px;">
                    💼 Carte Force de Vente - Premium Gold
                </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 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.logo is defined %}
                        <div class="form-group">
                            {{ 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>

                    <div class="form-row full">

                        {# Titre et Logo (spécifique Premium) - Vérifier si les champs existent #}
                        {% if form.titre is defined %}
                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(form.titre,'Slogan') }}
                                {{ form_widget(form.titre) }}
                                {{ form_errors(form.titre) }}
                                <div class="form-help">Ex: Photographie d'Art & d'Âme</div>
                            </div>

                            {% endif %}
                        </div>


                    </div>




                </div>

                {# 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 class="form-row">

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

                        <div class="form-group" style="color: black;">
                            {{ form_label(form.specialite) }}
                            {{ form_widget(form.specialite) }}
                            {{ form_errors(form.specialite) }}
                        </div>

                    </div>


                </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 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.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 %}
                    </div>
                </div>
                {% endif %}

                {# Section 6 : Réseaux sociaux #}
                <div class="form-section">
                    <h3 class="form-section-title">📱 Réseaux sociaux</h3>

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

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

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

                {# 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>


            <!-- Formulaire -->

            <!-- Prix -->
            <div style="
                background: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
                padding: 30px 40px;
                border-radius: 16px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                margin-top: 40px;
                text-align: center;
            ">
                <div style="font-size: 56px; font-weight: 700; color: white; margin-bottom: 8px;">
                    549 € <span style="font-size: 24px; font-weight: 400;">H.T</span>
                </div>
                <div style="font-size: 18px; color: white;">(TVA 20%)</div>
                <div
                    style="font-size: 14px; color: white; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.3);">
                    Délai : 10 jours ouvrés
                </div>
            </div>

            <script>
                // ============================================
                // MISE À JOUR DU MOCKUP EN TEMPS RÉEL
                // ============================================
                document.addEventListener('DOMContentLoaded', function () {
                    
                    // Fonction principale de mise à jour
                    function updateMockup() {
                        // === NOM COMPLET ===
                        const nom = document.querySelector('[name="force[nom]"]')?.value || '';
                        const prenom = document.querySelector('[name="force[prenom]"]')?.value || '';
                        const mockupNom = document.getElementById('mockup-nom');
                        if (mockupNom) {
                            mockupNom.textContent = (prenom || nom) ? `${prenom} ${nom}`.trim() : 'Jean DUPONT';
                        }

                        // === CHAMPS TEXTE SIMPLES ===
                        const textMappings = {
                            'entreprise': { mockupId: 'mockup-entreprise', defaultValue: 'VOTRE ENTREPRISE' },
                            'titre': { mockupId: 'mockup-slogan', defaultValue: 'Votre slogan inspirant' },
                            'fonction': { mockupId: 'mockup-fonction', defaultValue: 'Agent Immobilier Premium' },
                            'specialite': { mockupId: 'mockup-specialite', defaultValue: 'Spécialiste du marché de prestige.' },
                            'fixe': { mockupId: 'mockup-fixe', defaultValue: '+33 5 12 34 56 78' },
                            'mobile': { mockupId: 'mockup-mobile', defaultValue: '+33 6 12 34 56 78' },
                            'email': { mockupId: 'mockup-email', defaultValue: 'contact@example.fr' },
                            'adresse': { mockupId: 'mockup-adresse', defaultValue: '123 Avenue des Champs-Élysées, Paris' }
                        };

                        Object.entries(textMappings).forEach(([field, config]) => {
                            const input = document.querySelector(`[name="force[${field}]"]`);
                            const mockupEl = document.getElementById(config.mockupId);
                            if (input && mockupEl) {
                                mockupEl.textContent = input.value.trim() || config.defaultValue;
                            }
                        });

                        // === LIENS CONTACT (tel:, mailto:) ===
                        const fixeInput = document.querySelector('[name="force[fixe]"]');
                        const mobileInput = document.querySelector('[name="force[mobile]"]');
                        const emailInput = document.querySelector('[name="force[email]"]');
                        
                        const fixeLink = document.getElementById('mockup-fixe-link');
                        const mobileLink = document.getElementById('mockup-mobile-link');
                        const emailLink = document.getElementById('mockup-email-link');

                        if (fixeLink && fixeInput) {
                            fixeLink.href = fixeInput.value ? `tel:${fixeInput.value.replace(/\s/g, '')}` : '#';
                        }
                        if (mobileLink && mobileInput) {
                            mobileLink.href = mobileInput.value ? `tel:${mobileInput.value.replace(/\s/g, '')}` : '#';
                        }
                        if (emailLink && emailInput) {
                            emailLink.href = emailInput.value ? `mailto:${emailInput.value}` : '#';
                        }

                        // === RÉSEAUX SOCIAUX ===
                        const socialMappings = {
                            'linkedin': 'mockup-linkedin-link',
                            'facebook': 'mockup-facebook-link',
                            'youtube': 'mockup-youtube-link',
                            'tiktok': 'mockup-tiktok-link',
                            'insta': 'mockup-insta-link',
                            'x': 'mockup-x-link'
                        };

                        Object.entries(socialMappings).forEach(([field, linkId]) => {
                            const input = document.querySelector(`[name="force[${field}]"]`);
                            const link = document.getElementById(linkId);
                            if (input && link) {
                                const url = input.value.trim();
                                if (url) {
                                    // Ajouter https:// si pas de protocole
                                    link.href = url.startsWith('http') ? url : `https://${url}`;
                                    link.style.opacity = '1';
                                    link.style.pointerEvents = 'auto';
                                } else {
                                    link.href = '#';
                                    link.style.opacity = '0.5';
                                    link.style.pointerEvents = 'none';
                                }
                            }
                        });
                    }

                    // === GESTION UPLOAD PHOTO ===
                    const photoInput = document.querySelector('[name="force[photo]"]');
                    if (photoInput) {
                        photoInput.addEventListener('change', function (e) {
                            const file = e.target.files[0];
                            if (file && file.type.startsWith('image/')) {
                                const reader = new FileReader();
                                reader.onload = function (event) {
                                    const mockupPhoto = document.getElementById('mockup-photo');
                                    if (mockupPhoto) {
                                        mockupPhoto.src = event.target.result;
                                        mockupPhoto.style.objectFit = 'cover';
                                    }
                                };
                                reader.readAsDataURL(file);
                            }
                        });
                    }

                    // === GESTION UPLOAD LOGO ===
                    const logoInput = document.querySelector('[name="force[logo]"]');
                    if (logoInput) {
                        logoInput.addEventListener('change', function (e) {
                            const file = e.target.files[0];
                            if (file && file.type.startsWith('image/')) {
                                const reader = new FileReader();
                                reader.onload = function (event) {
                                    const mockupLogo = document.querySelector('.logo');
                                    if (mockupLogo) {
                                        // Remplacer le texte LOGO par une image
                                        mockupLogo.innerHTML = `<img src="${event.target.result}" alt="Logo" style="max-height: 60px; max-width: 150px; object-fit: contain;">`;
                                    }
                                };
                                reader.readAsDataURL(file);
                            }
                        });
                    }

                    // === ÉCOUTER TOUS LES CHANGEMENTS ===
                    // Sélectionner tous les inputs du formulaire
                    const formInputs = document.querySelectorAll(
                        '[name^="force["] input, ' +
                        '[name^="force["] textarea, ' +
                        'input[name^="force["], ' +
                        'textarea[name^="force["]'
                    );

                    formInputs.forEach(el => {
                        // 'input' pour mise à jour instantanée pendant la frappe
                        el.addEventListener('input', updateMockup);
                        // 'change' pour les selects et autres
                        el.addEventListener('change', updateMockup);
                    });

                    // Mise à jour initiale
                    updateMockup();

                    // Debug : afficher les champs trouvés
                    console.log('Mockup sync initialized. Found', formInputs.length, 'form inputs.');
                });
            </script>

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

{% endblock %}