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

{% block title %}Créer une carte ESSENTIEL{% endblock %}

{% block body %}


<script>
    // ============================================================================
    // CORRECTIF JS - SÉLECTEUR DROPDOWN + MULTI-CARTES
    // ============================================================================

    (function () {
        'use strict';

        console.log('🎨 Initialisation correctif 3-en-1...');

        // ========================================================================
        // GESTION DU DROPDOWN DE CHARTE
        // ========================================================================

        function initThemeSelector() {
            const selector = document.getElementById('theme-selector-mobile');

            if (!selector) {
                console.warn('⚠️ Sélecteur dropdown non trouvé');
                return;
            }

            console.log('✅ Sélecteur dropdown trouvé');

            // Événement de changement
            selector.addEventListener('change', function (e) {
                const chartIndex = parseInt(e.target.value);

                console.log('🎨 Changement vers charte:', chartIndex);

                // Appeler la fonction existante
                if (typeof applyTheme === 'function') {
                    applyTheme(chartIndex);
                    updateCharteInfo(chartIndex);

                    // Scroll vers le haut
                    const screen = document.querySelector('#charteMockupSection .smartphone-screen');
                    if (screen) screen.scrollTop = 0;

                    console.log('✅ Charte appliquée');
                } else {
                    console.error('❌ Fonction applyTheme non disponible');
                }
            });
        }

        // ========================================================================
        // MISE À JOUR DE L'INDICATEUR
        // ========================================================================

        function updateCharteInfo(chartIndex) {
            const charteInfo = document.getElementById('charteInfo');
            if (!charteInfo) return;

            const charteNames = {
                1: "Burgundy Elegance",
                2: "Emerald Sophistication",
                3: "Midnight Blue",
                4: "Royal Purple",
                5: "Ocean Teal",
                6: "Forest Green",
                7: "Sunset Orange",
                8: "Rose Gold",
                9: "Steel Grey",
                10: "Navy Classic",
                11: "Crimson Red",
                12: "Sapphire Blue",
                13: "Jade Green",
                14: "Chocolate Brown",
                15: "Amber Radiance",
                16: "Lavender Dream",
                17: "Coral Pink",
                18: "Slate Blue",
                19: "Olive Gold",
                20: "Plum Violet",
                21: "Turquoise Wave",
                22: "Copper Shine",
                23: "Indigo Night",
                24: "Mint Fresh",
                25: "Charcoal Black",
                26: "Ruby Red",
                27: "Sky Blue",
                28: "Lime Green",
                29: "Magenta Bold"
            };

            const nameElement = charteInfo.querySelector('div:nth-child(2)');
            const numberElement = charteInfo.querySelector('div:nth-child(3)');

            if (nameElement) nameElement.textContent = charteNames[chartIndex] || "Charte " + chartIndex;
            if (numberElement) numberElement.textContent = 'Charte ' + chartIndex + ' / 29';
        }

        // ========================================================================
        // FORCER VISIBILITÉ MULTI-CARTES
        // ========================================================================

        function forceMultiCardsVisibility() {
            const containers = document.querySelectorAll('.card-frame-container');

            if (containers.length === 0) {
                return;
            }

            console.log(`📦 ${containers.length} conteneurs Multi-Cartes trouvés`);

            containers.forEach((container, index) => {
                container.style.position = 'relative';
                container.style.width = '100%';
                container.style.minHeight = '450px';

                if (container.classList.contains('active')) {
                    container.style.display = 'block';
                    container.style.visibility = 'visible';
                    container.style.opacity = '1';
                    console.log(`✅ Conteneur ${index + 1} visible`);
                } else {
                    container.style.display = 'none';
                }

                // Forcer les iframes
                const iframes = container.querySelectorAll('iframe');
                iframes.forEach(iframe => {
                    iframe.style.display = 'block';
                    iframe.style.visibility = 'visible';
                    iframe.style.opacity = '1';
                    iframe.style.minHeight = '450px';
                    iframe.style.width = '100%';
                });
            });
        }

        // ========================================================================
        // INITIALISATION AU CHARGEMENT
        // ========================================================================

        // Attendre que le DOM soit prêt
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', init);
        } else {
            init();
        }

        function init() {
            console.log('🚀 Initialisation du site...');

            // Initialiser le sélecteur de thème
            initThemeSelector();

            // Forcer la visibilité des multi-cartes
            forceMultiCardsVisibility();

            // Observer les changements pour Multi-Cartes
            const observer = new MutationObserver(function () {
                forceMultiCardsVisibility();
            });

            const multiSection = document.querySelector('.modele-multi-section');
            if (multiSection) {
                observer.observe(multiSection, {
                    childList: true,
                    subtree: true,
                    attributes: true,
                    attributeFilter: ['class', 'style']
                });
                console.log('✅ Observer Multi-Cartes activé');
            }

            console.log('✅ Initialisation terminée');
        }

    })();

</script>
<!-- Modèle Essentiel Section -->


<section class="modele-essentiel-section" id="modele-essentiel"
    style="background: #f5f5f7;">
    <div style="max-width: 1400px; margin: 0 auto; position: relative; top: -60px;">

        <!-- Grille des 29 chartes (masquée) -->
        <div id="chartesGrid" style="display: none;">
            <!-- Les cartes seront générées par JavaScript -->
        </div>

        <!-- Layout avec 3 blocs côte à côte -->
        <div style="display: flex; align-items: flex-start; justify-content: center; gap: 80px;">

            <!-- BLOC 3 : Mockup avec boutons de navigation -->
            <div id="charteMockupSection"
                style="position: sticky; top: 20px; display: flex; justify-content: center; padding: 40px 20px; gap: 110px; justify-content: space-around; z-index: 10;">

                <!-- Nouveau sélecteur dropdown pour mobile -->
                <div class="theme-selector-wrapper" style="width: 100%; max-width: 350px; display: none;">
                    <label for="theme-selector-mobile"
                        style="display: block; color: white; font-size: 14px; font-weight: 600; margin-bottom: 8px; text-align: center;">
                        Choisissez votre charte graphique
                    </label>
                    <select id="theme-selector-mobile" class="theme-select-mobile">
                        <option value="1">Burgundy Elegance</option>
                        <option value="2">Emerald Sophistication</option>
                        <option value="3">Midnight Blue</option>
                        <option value="4">Royal Purple</option>
                        <option value="5">Ocean Teal</option>
                        <option value="6">Forest Green</option>
                        <option value="7">Sunset Orange</option>
                        <option value="8">Rose Gold</option>
                        <option value="9">Steel Grey</option>
                        <option value="10">Navy Classic</option>
                        <option value="11">Crimson Red</option>
                        <option value="12">Sapphire Blue</option>
                        <option value="13">Jade Green</option>
                        <option value="14">Chocolate Brown</option>
                        <option value="15" selected>Amber Radiance</option>
                        <option value="16">Lavender Dream</option>
                        <option value="17">Coral Pink</option>
                        <option value="18">Slate Blue</option>
                        <option value="19">Olive Gold</option>
                        <option value="20">Plum Violet</option>
                        <option value="21">Turquoise Wave</option>
                        <option value="22">Copper Shine</option>
                        <option value="23">Indigo Night</option>
                        <option value="24">Mint Fresh</option>
                        <option value="25">Charcoal Black</option>
                        <option value="26">Ruby Red</option>
                        <option value="27">Sky Blue</option>
                        <option value="28">Lime Green</option>
                        <option value="29">Magenta Bold</option>
                    </select>
                </div>

                <!-- Navigation desktop (boutons Previous/Next) -->
                <div class="desktop-chart-nav" style="position: relative; display: flex; justify-content: center;">
                    <!-- Bouton Précédent -->
                    <button class="chart-nav-btn"
                        style="position: absolute; left: -70px; top: 25%; transform: translateY(-50%); background: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 30px; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 100; color: #1d1d1f; font-weight: bold;"
                        onclick="previousChart()">‹</button>

                    <!-- Bouton Suivant -->
                    <button class="chart-nav-btn"
                        style="position: absolute; right: -80px; top: 25%; transform: translateY(-50%); background: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 30px; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 100; color: #1d1d1f; font-weight: bold;"
                        onclick="nextChart()">›</button>

                    <div class="smartphone-mockup">
                        <div class="smartphone-screen">
                            <div class="card-content">
                                <div class="vcard-container">
                                    <!-- HEADER -->
                                    <div class="header">
                                        <div class="logo">LOGO</div>
                                        <div class="company-name">VOTRE ENTREPRISE</div>
                                        <div class="tagline">Votre slogan inspirant</div>
                                    </div>

                                    <!-- PROFILE -->
                                    <div class="profile">
                                        <div class="name">Prénom NOM</div>
                                        <div class="position">Votre Fonction</div>
                                    </div>

                                    <!-- CONTACT BUTTONS -->
                                    <div class="contact-buttons">
                                        <a id="telFixeMockup" href="tel:+33531613866">
                                            <svg viewBox="0 0 24 24">
                                                <path
                                                    d="M20 10.999h2C22 5.869 18.127 2 12.99 2v2C17.052 4 20 6.943 20 10.999z" />
                                                <path
                                                    d="M13 8c2.103 0 3 .897 3 3h2c0-3.225-1.775-5-5-5v2zm3.422 5.443a1.001 1.001 0 0 0-1.391.043l-2.393 2.461c-.576-.11-1.734-.471-2.926-1.66-1.192-1.193-1.553-2.354-1.66-2.926l2.459-2.394a1 1 0 0 0 .043-1.391L6.859 3.513a1 1 0 0 0-1.391-.087l-2.17 1.861a1 1 0 0 0-.29.649c-.015.25-.301 6.172 4.291 10.766C11.305 20.707 16.323 21 17.705 21c.202 0 .326-.006.359-.008a.992.992 0 0 0 .648-.291l1.86-2.171a1 1 0 0 0-.086-1.391l-4.064-3.696z" />
                                            </svg>
                                            Fixe : 05 XX XX XX XX
                                        </a>

                                        <a id="telMobileMockup" href="tel:+33632111518">
                                            <svg viewBox="0 0 24 24">
                                                <path
                                                    d="M17.707 12.293a.999.999 0 0 0-1.414 0l-1.594 1.594c-.739-.22-2.118-.72-2.992-1.594s-1.374-2.253-1.594-2.992l1.594-1.594a.999.999 0 0 0 0-1.414l-4-4a.999.999 0 0 0-1.414 0L3.581 5.005c-.38.38-.594.902-.586 1.435.023 1.424.4 6.37 4.298 10.268s8.844 4.274 10.269 4.298h.028c.528 0 1.027-.208 1.405-.586l2.712-2.712a.999.999 0 0 0 0-1.414l-4-4.001zm-.127 6.712c-1.248-.021-5.518-.356-8.873-3.712-3.366-3.366-3.692-7.651-3.712-8.874L7 4.414 9.586 7 8.293 8.293a1 1 0 0 0-.272.912c.024.115.611 2.842 2.271 4.502s4.387 2.247 4.502 2.271a.991.991 0 0 0 .912-.271L17 14.414 19.586 17l-2.006 2.005z" />
                                            </svg>
                                            Mobile : 06 XX XX XX XX
                                        </a>

                                        <a href="#" onclick="alert('Visioconférence'); return false;">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M23 7l-7 5 7 5V7z" />
                                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
                                            </svg>
                                            Visioconférence
                                        </a>

                                        <a
                                            href="/cdn-cgi/l/email-protection#c7a4a8a9b3a6a4b387b5a2a9a1a8b5b3aeaaaaa8e9a4a8aa">
                                            <svg viewBox="0 0 24 24">
                                                <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>
                                            <span class="__cf_email__"
                                                data-cfemail="9dfef2f3e9fcfee9ddeff8f3fbf2efe9f4f0f0f2b3fef2f0">[email&#160;protected]</span>
                                        </a>

                                        <a href="https://maps.google.com/?q=31000+Toulouse" target="_blank">
                                            <svg viewBox="0 0 24 24">
                                                <path
                                                    d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
                                            </svg>
                                            XXXX 31000 Toulouse
                                        </a>

                                        <a href="javascript:void(0)" onclick="alert('Télécharger vCard')" style="
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
                        color: white;
                        padding: 12px 20px;
                        border-radius: 8px;
                        text-decoration: none;
                        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>

                                    <!-- SHARE SECTION -->
                                    <div class="share-section" style="
                    padding: 12px 15px;
                    background: #f9f9f9;
                    border: 1px solid #8B1538;
                    border-radius: 12px;
                    margin: 15px 15px;
                ">
                                        <h3 style="
                        font-size: 14px;
                        font-weight: 700;
                        margin-bottom: 10px;
                        color: #000000 !important;
                        text-align: center;
                    ">📤 Partager ma carte</h3>

                                        <div class="share-buttons" style="
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 10px;
                    ">
                                            <a href="#" onclick="alert('Fonction WhatsApp'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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="#" onclick="alert('Fonction Email'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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="#" onclick="alert('Fonction SMS'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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 onclick="alert('Afficher QR Code')" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: white;
                            color: #c9a569;
                            padding: 10px 12px;
                            border-radius: 10px;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            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;">
                                                    <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 -->
                                    <div class="share-section" style="
                    padding: 12px 15px;
                    background: #f9f9f9;
                    border: 1px solid #8B1538;
                    border-radius: 12px;
                    margin: 15px 15px;
                ">
                                        <h3 style="
                        font-size: 14px;
                        font-weight: 700;
                        margin-bottom: 6px;
                        color: black !important;
                        text-align: center;
                    ">🔗 Accès direct</h3>

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

                                        <div class="share-buttons" style="
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 10px;
                    ">
                                            <a href="#" onclick="alert('LinkedIn'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #0077B5 0%, #005582 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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="#" onclick="alert('Facebook'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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="#" onclick="alert('YouTube'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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="#" onclick="alert('TikTok'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #000000 0%, #00F2EA 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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="#" onclick="alert('Instagram'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #E4405F 0%, #833AB4 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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="#" onclick="alert('X (Twitter)'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 6px;
                            background: linear-gradient(135deg, #000000 0%, #14171A 100%);
                            color: white;
                            padding: 10px 12px;
                            border-radius: 10px;
                            text-decoration: none;
                            font-size: 12px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 2px 8px rgba(139, 21, 56, 0.15);
                            border: 1px solid rgba(139, 21, 56, 0.2);
                        ">
                                                <svg viewBox="0 0 24 24"
                                                    style="width: 16px; height: 16px; 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 -->
                                    <div class="website-links">
                                        <h3>🌐 Site web</h3>
                                        <a href="https://www.renfortimmo.com" target="_blank">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <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.xxxxxx.com
                                        </a>

                                        <!-- EXPERTISES -->
                                        <div style="margin-top: 15px; padding: 20px 15px; background: white;">
                                            <h3
                                                style="color: #2c3e50; font-size: 18px; margin-bottom: 15px; font-weight: 700; text-align: center;">
                                                ✨ Nos Expertises</h3>
                                            <div style="
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            gap: 12px;
                            margin-bottom: 15px;
                        ">
                                                <div style="
                                background: white;
                                color: #2c3e50;
                                padding: 12px 20px;
                                border-radius: 25px;
                                font-size: 14px;
                                font-weight: 600;
                                border: 2px solid #8B1538;
                                text-align: center;
                            ">Optimiser</div>
                                                <div style="
                                background: white;
                                color: #2c3e50;
                                padding: 12px 20px;
                                border-radius: 25px;
                                font-size: 14px;
                                font-weight: 600;
                                border: 2px solid #8B1538;
                                text-align: center;
                            ">Valoriser</div>
                                                <div style="
                                background: white;
                                color: #2c3e50;
                                padding: 12px 20px;
                                border-radius: 25px;
                                font-size: 14px;
                                font-weight: 600;
                                border: 2px solid #8B1538;
                                text-align: center;
                            ">Développer</div>
                                                <div style="
                                background: white;
                                color: #2c3e50;
                                padding: 12px 20px;
                                border-radius: 25px;
                                font-size: 14px;
                                font-weight: 600;
                                border: 2px solid #8B1538;
                                text-align: center;
                            ">Débloquer</div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- FOOTER -->
                                    <div class="footer" style="
                    background: white;
                    padding: 15px 20px;
                    text-align: center;
                    border-radius: 0 0 20px 20px;
                ">
                                        <p style="
                        margin: 0;
                        font-size: 12px;
                        color: #666;
                    ">Num-Ecard • Tous droits réservés</p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div><!-- Fin desktop-chart-nav -->
                </div><!-- Fin charteMockupSection -->



                <!-- BLOC 2 : Formulaire stylisé -->
                <div id="bloc2" style="flex: 0 0 auto; text-align: left; max-width: 600px; width: 100%;">

                    <!-- Indicateur (nom + numéro de charte) -->
                    <div id="charteInfo" class="form-section"
                        style="margin-bottom: 20px; text-align: center; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);">
                        <div
                            style="font-size: 14px; font-weight: 600; color: #86868b; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;">
                            🎨 Charte graphique sélectionnée
                        </div>
                        <div style="font-size: 24px; font-weight: 700; color: #1d1d1f; margin-bottom: 6px;">Amber
                            Radiance
                        </div>
                        <div style="font-size: 14px; color: #86868b;">Charte 15 / 52</div>
                    </div>

                    <!-- FORMULAIRE -->
                    {{ form_start(form, {'attr': {'class': 'essentiel-form'}}) }}

                    <!-- Section 1 : Informations personnelles -->
                    <div class="form-section">
                        <div class="form-section-title">👤 Informations personnelles</div>

                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(form.nom, 'Nom', {'label_attr': {'class': 'label'}}) }}
                                {{ form_widget(form.nom) }}
                                {{ form_errors(form.nom) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.prenom, 'Prénom', {'label_attr': {'class': 'label'}}) }}
                                {{ form_widget(form.prenom) }}
                                {{ form_errors(form.prenom) }}
                            </div>
                        </div>
                    </div>

                    <!-- Section 2 : Entreprise -->
                    <div class="form-section">
                        <div class="form-section-title">🏢 Entreprise</div>

                        <div class="form-row">
                            <div class="form-group">
                                {{ form_label(form.entreprise, 'Entreprise', {'label_attr': {'class': 'label'}}) }}
                                {{ form_widget(form.entreprise) }}
                                {{ form_errors(form.entreprise) }}
                            </div>
                            <div class="form-group">
                                {{ form_label(form.fonction, 'Fonction', {'label_attr': {'class': 'label'}}) }}
                                {{ form_widget(form.fonction) }}
                                {{ form_errors(form.fonction) }}
                            </div>
                        </div>
                    </div>

                    <!-- Section 3 : Identité visuelle -->
                    <div class="form-section">
                        <div class="form-section-title">🎨 Identité visuelle</div>

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

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

                    <!-- Section 4 : Coordonnées -->
                    <div class="form-section">
                        <div class="form-section-title">📞 Coordonnées</div>

                        <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.adresse) }}
                                {{ form_widget(form.adresse) }}
                                {{ form_errors(form.adresse) }}
                            </div>
                        </div>
                    </div>

                    <!-- Section 5 : Web -->
                    <div class="form-section">
                        <div class="form-section-title">🌐 Présence en ligne</div>

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

                    <!-- Section 6 : Réseaux sociaux -->
                    <div class="form-section">
                        <div class="form-section-title">📱 Réseaux sociaux</div>

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

                    <!-- Champ caché pour le thème -->
                    <input type="hidden" name="theme" id="themeName" value="15">

                    <!-- Bouton de soumission -->
                    <button type="submit" class="btn-submit-essentiel">
                        Créer ma carte
                    </button>

                    {{ form_end(form) }}

                    <!-- BLOC PRIX -->
                    <div class="form-section" style="text-align: center; margin-top: 30px;">
                        <div style="font-size: 48px; font-weight: 700; color: #0071e3; margin-bottom: 8px;">
                            199 € <span style="font-size: 20px; font-weight: 400; color: #86868b;">H.T</span>
                        </div>
                        <div style="font-size: 16px; color: #86868b; margin-bottom: 15px;">
                            (TVA Applicable 20%)
                        </div>
                        <div
                            style="font-size: 13px; color: #1d1d1f; padding: 15px; background: #f5f5f7; border-radius: 8px;">
                            📦 Délai de livraison : <strong>7 jours ouvrés</strong>
                        </div>
                    </div>

                </div>



            </div>
</section>
<script>
    // ========================================
    // MODÈLE ESSENTIEL - JAVASCRIPT
    // ========================================

    const chartsData = [{
            "number": 1,
            "name": "Élégance Bordeaux",
            "colors": [{
                "bg": "#8B1538",
                "text": "white",
                "code": "#8B1538",
                "label": "Bordeaux"
            }, {
                "bg": "#d4af37",
                "text": "white",
                "code": "#D4AF37",
                "label": "Or"
            }]
        },
        {
            "number": 2,
            "name": "Luxe Émeraude",
            "colors": [{
                "bg": "#0f5132",
                "text": "white",
                "code": "#0F5132",
                "label": "Émeraude"
            }, {
                "bg": "#b8860b",
                "text": "white",
                "code": "#B8860B",
                "label": "Or"
            }]
        },
        {
            "number": 3,
            "name": "Pourpre Royal",
            "colors": [{
                "bg": "#4A148C",
                "text": "white",
                "code": "#4A148C",
                "label": "Pourpre"
            }, {
                "bg": "#ffd700",
                "text": "#333",
                "code": "#FFD700",
                "label": "Or"
            }]
        },
        {
            "number": 4,
            "name": "Océan Profond",
            "colors": [{
                "bg": "#003f5c",
                "text": "white",
                "code": "#003F5C",
                "label": "Océan"
            }, {
                "bg": "#4682b4",
                "text": "white",
                "code": "#4682B4",
                "label": "Acier"
            }]
        },
        {
            "number": 5,
            "name": "Forêt Premium",
            "colors": [{
                "bg": "#1B4332",
                "text": "white",
                "code": "#1B4332",
                "label": "Forêt"
            }, {
                "bg": "#d4a574",
                "text": "white",
                "code": "#D4A574",
                "label": "Sable"
            }]
        },
        {
            "number": 6,
            "name": "Terre Chaude",
            "colors": [{
                "bg": "#CC6633",
                "text": "white",
                "code": "#CC6633",
                "label": "Terre"
            }, {
                "bg": "#daa520",
                "text": "white",
                "code": "#DAA520",
                "label": "Or"
            }]
        },
        {
            "number": 7,
            "name": "Acier Graphite",
            "colors": [{
                "bg": "#3c3c3c",
                "text": "white",
                "code": "#3C3C3C",
                "label": "Graphite"
            }, {
                "bg": "#00d4ff",
                "text": "#333",
                "code": "#00D4FF",
                "label": "Cyan"
            }]
        },
        {
            "number": 8,
            "name": "Sarcelle Sophistiqué",
            "colors": [{
                "bg": "#008B8B",
                "text": "white",
                "code": "#008B8B",
                "label": "Sarcelle"
            }, {
                "bg": "#ffd700",
                "text": "#333",
                "code": "#FFD700",
                "label": "Or"
            }]
        },
        {
            "number": 9,
            "name": "Ambre Prestige",
            "colors": [{
                "bg": "#D4AF37",
                "text": "#333",
                "code": "#D4AF37",
                "label": "Ambre"
            }, {
                "bg": "#1a1a1a",
                "text": "white",
                "code": "#1A1A1A",
                "label": "Noir"
            }]
        },
        {
            "number": 10,
            "name": "Pouvoir Cramoisi",
            "colors": [{
                "bg": "#8B0000",
                "text": "white",
                "code": "#8B0000",
                "label": "Rouge"
            }, {
                "bg": "#000000",
                "text": "white",
                "code": "#000000",
                "label": "Noir"
            }]
        },
        {
            "number": 11,
            "name": "Nuit Indigo",
            "colors": [{
                "bg": "#4B0082",
                "text": "white",
                "code": "#4B0082",
                "label": "Indigo"
            }, {
                "bg": "#ffd700",
                "text": "#333",
                "code": "#FFD700",
                "label": "Or"
            }]
        },
        {
            "number": 12,
            "name": "Or Rose",
            "colors": [{
                "bg": "#B76E79",
                "text": "white",
                "code": "#B76E79",
                "label": "Rose"
            }, {
                "bg": "#2c2c2c",
                "text": "white",
                "code": "#2C2C2C",
                "label": "Charbon"
            }]
        },
        {
            "number": 13,
            "name": "Rayonnement Ambré",
            "colors": [{
                "bg": "#D4A574",
                "text": "white",
                "code": "#D4A574",
                "label": "Ambre"
            }, {
                "bg": "#8B6914",
                "text": "white",
                "code": "#8B6914",
                "label": "Bronze"
            }]
        },
        {
            "number": 14,
            "name": "Essence Forestière",
            "colors": [{
                "bg": "#2D5016",
                "text": "white",
                "code": "#2D5016",
                "label": "Vert"
            }, {
                "bg": "#8B7355",
                "text": "white",
                "code": "#8B7355",
                "label": "Bois"
            }]
        },
        {
            "number": 15,
            "name": "Élite Champagne",
            "colors": [{
                "bg": "#E5D4B5",
                "text": "#333",
                "code": "#E5D4B5",
                "label": "Champagne"
            }, {
                "bg": "#1C1C1C",
                "text": "white",
                "code": "#1C1C1C",
                "label": "Noir"
            }]
        },
        {
            "number": 16,
            "name": "Autorité Cobalt",
            "colors": [{
                "bg": "#0047AB",
                "text": "white",
                "code": "#0047AB",
                "label": "Cobalt"
            }, {
                "bg": "#C0C0C0",
                "text": "#333",
                "code": "#C0C0C0",
                "label": "Argent"
            }]
        },
        {
            "number": 17,
            "name": "Héritage Bronze",
            "colors": [{
                "bg": "#8B4513",
                "text": "white",
                "code": "#8B4513",
                "label": "Bronze"
            }, {
                "bg": "#D2B48C",
                "text": "#333",
                "code": "#D2B48C",
                "label": "Tan"
            }]
        },
        {
            "number": 18,
            "name": "Fraîcheur Menthe",
            "colors": [{
                "bg": "#98D8C8",
                "text": "#333",
                "code": "#98D8C8",
                "label": "Menthe"
            }, {
                "bg": "#2F6F5E",
                "text": "white",
                "code": "#2F6F5E",
                "label": "Vert"
            }]
        },
        {
            "number": 19,
            "name": "Passion Rubis",
            "colors": [{
                "bg": "#9B111E",
                "text": "white",
                "code": "#9B111E",
                "label": "Rubis"
            }, {
                "bg": "#2C1810",
                "text": "white",
                "code": "#2C1810",
                "label": "Chocolat"
            }]
        },
        {
            "number": 20,
            "name": "Terre Olive",
            "colors": [{
                "bg": "#C65D3B",
                "text": "white",
                "code": "#C65D3B",
                "label": "Terre"
            }, {
                "bg": "#2C5530",
                "text": "white",
                "code": "#2C5530",
                "label": "Olive"
            }]
        },
        {
            "number": 21,
            "name": "Bordeaux Doré",
            "colors": [{
                "bg": "#800020",
                "text": "white",
                "code": "#800020",
                "label": "Bordeaux"
            }, {
                "bg": "#DAA520",
                "text": "white",
                "code": "#DAA520",
                "label": "Or"
            }]
        },
        {
            "number": 22,
            "name": "Aqua Marine",
            "colors": [{
                "bg": "#7FFFD4",
                "text": "#333",
                "code": "#7FFFD4",
                "label": "Aqua"
            }, {
                "bg": "#20B2AA",
                "text": "white",
                "code": "#20B2AA",
                "label": "Mer"
            }]
        },
        {
            "number": 23,
            "name": "Miel Caramel",
            "colors": [{
                "bg": "#D4A017",
                "text": "white",
                "code": "#D4A017",
                "label": "Miel"
            }, {
                "bg": "#8B4000",
                "text": "white",
                "code": "#8B4000",
                "label": "Caramel"
            }]
        },
        {
            "number": 24,
            "name": "Minuit Doré",
            "colors": [{
                "bg": "#191970",
                "text": "white",
                "code": "#191970",
                "label": "Minuit"
            }, {
                "bg": "#FFD700",
                "text": "#333",
                "code": "#FFD700",
                "label": "Or"
            }]
        },
        {
            "number": 25,
            "name": "Moderne Cyan",
            "colors": [{
                "bg": "#0F0F1E",
                "text": "white",
                "code": "#0F0F1E",
                "label": "Sombre"
            }, {
                "bg": "#00F2FE",
                "text": "#333",
                "code": "#00F2FE",
                "label": "Cyan"
            }]
        },
        {
            "number": 26,
            "name": "Violet Électrique",
            "colors": [{
                "bg": "#10002B",
                "text": "white",
                "code": "#10002B",
                "label": "Violet"
            }, {
                "bg": "#8338EC",
                "text": "white",
                "code": "#8338EC",
                "label": "Vif"
            }]
        },
        {
            "number": 27,
            "name": "Feu Orange",
            "colors": [{
                "bg": "#1A0F00",
                "text": "white",
                "code": "#1A0F00",
                "label": "Brun"
            }, {
                "bg": "#FF8C00",
                "text": "white",
                "code": "#FF8C00",
                "label": "Orange"
            }]
        },
        {
            "number": 28,
            "name": "Confiance Bleue",
            "colors": [{
                "bg": "#001219",
                "text": "white",
                "code": "#001219",
                "label": "Nuit"
            }, {
                "bg": "#005F73",
                "text": "white",
                "code": "#005F73",
                "label": "Bleu"
            }]
        },
        {
            "number": 29,
            "name": "Émeraude Naturel",
            "colors": [{
                "bg": "#081C15",
                "text": "white",
                "code": "#081C15",
                "label": "Noir"
            }, {
                "bg": "#2D6A4F",
                "text": "white",
                "code": "#2D6A4F",
                "label": "Vert"
            }]
        },
        {
            "number": 30,
            "name": "Vert Printemps",
            "colors": [{
                "bg": "#0A1410",
                "text": "white",
                "code": "#0A1410",
                "label": "Foncé"
            }, {
                "bg": "#059669",
                "text": "white",
                "code": "#059669",
                "label": "Émeraude"
            }]
        },
        {
            "number": 31,
            "name": "Bleu Royal",
            "colors": [{
                "bg": "#000814",
                "text": "white",
                "code": "#000814",
                "label": "Nuit"
            }, {
                "bg": "#4169E1",
                "text": "white",
                "code": "#4169E1",
                "label": "Royal"
            }]
        },
        {
            "number": 32,
            "name": "Rose Élégant",
            "colors": [{
                "bg": "#1A1315",
                "text": "white",
                "code": "#1A1315",
                "label": "Terre"
            }, {
                "bg": "#B76E79",
                "text": "white",
                "code": "#B76E79",
                "label": "Rose"
            }]
        },
        {
            "number": 33,
            "name": "Violet Majestueux",
            "colors": [{
                "bg": "#1A051A",
                "text": "white",
                "code": "#1A051A",
                "label": "Prune"
            }, {
                "bg": "#9D4EDD",
                "text": "white",
                "code": "#9D4EDD",
                "label": "Violet"
            }]
        },
        {
            "number": 34,
            "name": "Vert Écologique",
            "colors": [{
                "bg": "#0F1A0F",
                "text": "white",
                "code": "#0F1A0F",
                "label": "Nature"
            }, {
                "bg": "#4CAF50",
                "text": "white",
                "code": "#4CAF50",
                "label": "Vert"
            }]
        },
        {
            "number": 35,
            "name": "Magenta Audacieux",
            "colors": [{
                "bg": "#1A0A10",
                "text": "white",
                "code": "#1A0A10",
                "label": "Noir"
            }, {
                "bg": "#FF00FF",
                "text": "white",
                "code": "#FF00FF",
                "label": "Magenta"
            }]
        },
        {
            "number": 36,
            "name": "Bleu Minuit",
            "colors": [{
                "bg": "#0A0A12",
                "text": "white",
                "code": "#0A0A12",
                "label": "Nuit"
            }, {
                "bg": "#191970",
                "text": "white",
                "code": "#191970",
                "label": "Bleu"
            }]
        },
        {
            "number": 37,
            "name": "Or Solaire",
            "colors": [{
                "bg": "#1A1008",
                "text": "white",
                "code": "#1A1008",
                "label": "Café"
            }, {
                "bg": "#DAA520",
                "text": "white",
                "code": "#DAA520",
                "label": "Or"
            }]
        },
        {
            "number": 38,
            "name": "Cyan Océan",
            "colors": [{
                "bg": "#0A1414",
                "text": "white",
                "code": "#0A1414",
                "label": "Abysse"
            }, {
                "bg": "#008B8B",
                "text": "white",
                "code": "#008B8B",
                "label": "Cyan"
            }]
        },
        {
            "number": 39,
            "name": "Rose Pastel",
            "colors": [{
                "bg": "#1A0F12",
                "text": "white",
                "code": "#1A0F12",
                "label": "Sombre"
            }, {
                "bg": "#FFB6C1",
                "text": "#333",
                "code": "#FFB6C1",
                "label": "Rose"
            }]
        },
        {
            "number": 40,
            "name": "Améthyste Riche",
            "colors": [{
                "bg": "#0F1028",
                "text": "white",
                "code": "#0F1028",
                "label": "Indigo"
            }, {
                "bg": "#4B0082",
                "text": "white",
                "code": "#4B0082",
                "label": "Violet"
            }]
        },
        {
            "number": 41,
            "name": "Néon Violet",
            "colors": [{
                "bg": "#000000",
                "text": "white",
                "code": "#000000",
                "label": "Noir"
            }, {
                "bg": "#BF00FF",
                "text": "white",
                "code": "#BF00FF",
                "label": "Néon"
            }]
        },
        {
            "number": 42,
            "name": "Bordeaux Profond",
            "colors": [{
                "bg": "#1A0A0F",
                "text": "white",
                "code": "#1A0A0F",
                "label": "Vin"
            }, {
                "bg": "#800020",
                "text": "white",
                "code": "#800020",
                "label": "Rouge"
            }]
        },
        {
            "number": 43,
            "name": "Rose Intense",
            "colors": [{
                "bg": "#0A0A0A",
                "text": "white",
                "code": "#0A0A0A",
                "label": "Noir"
            }, {
                "bg": "#FF1493",
                "text": "white",
                "code": "#FF1493",
                "label": "Rose"
            }]
        },
        {
            "number": 44,
            "name": "Rouge Classique",
            "colors": [{
                "bg": "#000000",
                "text": "white",
                "code": "#000000",
                "label": "Noir"
            }, {
                "bg": "#FF0000",
                "text": "white",
                "code": "#FF0000",
                "label": "Rouge"
            }]
        },
        {
            "number": 45,
            "name": "Indigo Mystère",
            "colors": [{
                "bg": "#0F0F1A",
                "text": "white",
                "code": "#0F0F1A",
                "label": "Nuit"
            }, {
                "bg": "#483D8B",
                "text": "white",
                "code": "#483D8B",
                "label": "Indigo"
            }]
        },
        {
            "number": 46,
            "name": "Élégance Grise",
            "colors": [{
                "bg": "#000000",
                "text": "white",
                "code": "#000000",
                "label": "Noir"
            }, {
                "bg": "#2B2B2B",
                "text": "white",
                "code": "#2B2B2B",
                "label": "Gris"
            }]
        },
        {
            "number": 47,
            "name": "Vert Citron",
            "colors": [{
                "bg": "#0A140A",
                "text": "white",
                "code": "#0A140A",
                "label": "Foncé"
            }, {
                "bg": "#32CD32",
                "text": "white",
                "code": "#32CD32",
                "label": "Citron"
            }]
        },
        {
            "number": 48,
            "name": "Bleu Marine",
            "colors": [{
                "bg": "#000814",
                "text": "white",
                "code": "#000814",
                "label": "Noir"
            }, {
                "bg": "#0047AB",
                "text": "white",
                "code": "#0047AB",
                "label": "Bleu"
            }]
        },
        {
            "number": 49,
            "name": "Bronze Chaleureux",
            "colors": [{
                "bg": "#1A1008",
                "text": "white",
                "code": "#1A1008",
                "label": "Café"
            }, {
                "bg": "#CD853F",
                "text": "white",
                "code": "#CD853F",
                "label": "Bronze"
            }]
        },
        {
            "number": 50,
            "name": "Pêche Délicate",
            "colors": [{
                "bg": "#1A1410",
                "text": "white",
                "code": "#1A1410",
                "label": "Chaud"
            }, {
                "bg": "#FFDAB9",
                "text": "#333",
                "code": "#FFDAB9",
                "label": "Pêche"
            }]
        },
        {
            "number": 51,
            "name": "Azur Profond",
            "colors": [{
                "bg": "#0A1416",
                "text": "white",
                "code": "#0A1416",
                "label": "Sombre"
            }, {
                "bg": "#00BFFF",
                "text": "white",
                "code": "#00BFFF",
                "label": "Azur"
            }]
        },
        {
            "number": 52,
            "name": "Lilas Doux",
            "colors": [{
                "bg": "#1A1A2E",
                "text": "white",
                "code": "#1A1A2E",
                "label": "Nuit"
            }, {
                "bg": "#E6E6FA",
                "text": "#333",
                "code": "#E6E6FA",
                "label": "Lilas"
            }]
        }
    ];

    // Thèmes CSS ultra-lisibles (avec --text-on-white)
    const chartThemes = {
        "1": {
            "--primary-color": "#8B1538",
            "--primary-dark": "#D4AF37",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#8B1538",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #8B1538 0%, #D4AF37 100%)",
            "--radial-glow": "rgba(139, 21, 56, 0.08)",
            "--text-glow": "rgba(139, 21, 56, 0.2)",
            "--shadow-color": "rgba(139, 21, 56, 0.3)",
            "--shadow-hover": "rgba(139, 21, 56, 0.4)"
        },
        "2": {
            "--primary-color": "#0f5132",
            "--primary-dark": "#b8860b",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0f5132",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0f5132 0%, #b8860b 100%)",
            "--radial-glow": "rgba(15, 81, 50, 0.08)",
            "--text-glow": "rgba(15, 81, 50, 0.2)",
            "--shadow-color": "rgba(15, 81, 50, 0.3)",
            "--shadow-hover": "rgba(15, 81, 50, 0.4)"
        },
        "3": {
            "--primary-color": "#4A148C",
            "--primary-dark": "#ffd700",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#4A148C",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #4A148C 0%, #ffd700 100%)",
            "--radial-glow": "rgba(74, 20, 140, 0.08)",
            "--text-glow": "rgba(74, 20, 140, 0.2)",
            "--shadow-color": "rgba(74, 20, 140, 0.3)",
            "--shadow-hover": "rgba(74, 20, 140, 0.4)"
        },
        "4": {
            "--primary-color": "#003f5c",
            "--primary-dark": "#4682b4",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#003f5c",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #003f5c 0%, #4682b4 100%)",
            "--radial-glow": "rgba(0, 63, 92, 0.08)",
            "--text-glow": "rgba(0, 63, 92, 0.2)",
            "--shadow-color": "rgba(0, 63, 92, 0.3)",
            "--shadow-hover": "rgba(0, 63, 92, 0.4)"
        },
        "5": {
            "--primary-color": "#1B4332",
            "--primary-dark": "#d4a574",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#1B4332",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #1B4332 0%, #d4a574 100%)",
            "--radial-glow": "rgba(27, 67, 50, 0.08)",
            "--text-glow": "rgba(27, 67, 50, 0.2)",
            "--shadow-color": "rgba(27, 67, 50, 0.3)",
            "--shadow-hover": "rgba(27, 67, 50, 0.4)"
        },
        "6": {
            "--primary-color": "#CC6633",
            "--primary-dark": "#daa520",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#CC6633",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #CC6633 0%, #daa520 100%)",
            "--radial-glow": "rgba(204, 102, 51, 0.08)",
            "--text-glow": "rgba(204, 102, 51, 0.2)",
            "--shadow-color": "rgba(204, 102, 51, 0.3)",
            "--shadow-hover": "rgba(204, 102, 51, 0.4)"
        },
        "7": {
            "--primary-color": "#3c3c3c",
            "--primary-dark": "#00d4ff",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#3c3c3c",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #3c3c3c 0%, #00d4ff 100%)",
            "--radial-glow": "rgba(60, 60, 60, 0.08)",
            "--text-glow": "rgba(60, 60, 60, 0.2)",
            "--shadow-color": "rgba(60, 60, 60, 0.3)",
            "--shadow-hover": "rgba(60, 60, 60, 0.4)"
        },
        "8": {
            "--primary-color": "#008B8B",
            "--primary-dark": "#ffd700",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#008B8B",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #008B8B 0%, #ffd700 100%)",
            "--radial-glow": "rgba(0, 139, 139, 0.08)",
            "--text-glow": "rgba(0, 139, 139, 0.2)",
            "--shadow-color": "rgba(0, 139, 139, 0.3)",
            "--shadow-hover": "rgba(0, 139, 139, 0.4)"
        },
        "9": {
            "--primary-color": "#D4AF37",
            "--primary-dark": "#1a1a1a",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#D4AF37",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #D4AF37 0%, #1a1a1a 100%)",
            "--radial-glow": "rgba(212, 175, 55, 0.08)",
            "--text-glow": "rgba(212, 175, 55, 0.2)",
            "--shadow-color": "rgba(212, 175, 55, 0.3)",
            "--shadow-hover": "rgba(212, 175, 55, 0.4)"
        },
        "10": {
            "--primary-color": "#8B0000",
            "--primary-dark": "#000000",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#8B0000",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #8B0000 0%, #000000 100%)",
            "--radial-glow": "rgba(139, 0, 0, 0.08)",
            "--text-glow": "rgba(139, 0, 0, 0.2)",
            "--shadow-color": "rgba(139, 0, 0, 0.3)",
            "--shadow-hover": "rgba(139, 0, 0, 0.4)"
        },
        "11": {
            "--primary-color": "#4B0082",
            "--primary-dark": "#ffd700",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#4B0082",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #4B0082 0%, #ffd700 100%)",
            "--radial-glow": "rgba(75, 0, 130, 0.08)",
            "--text-glow": "rgba(75, 0, 130, 0.2)",
            "--shadow-color": "rgba(75, 0, 130, 0.3)",
            "--shadow-hover": "rgba(75, 0, 130, 0.4)"
        },
        "12": {
            "--primary-color": "#B76E79",
            "--primary-dark": "#2c2c2c",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#B76E79",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #B76E79 0%, #2c2c2c 100%)",
            "--radial-glow": "rgba(183, 110, 121, 0.08)",
            "--text-glow": "rgba(183, 110, 121, 0.2)",
            "--shadow-color": "rgba(183, 110, 121, 0.3)",
            "--shadow-hover": "rgba(183, 110, 121, 0.4)"
        },
        "13": {
            "--primary-color": "#D4A574",
            "--primary-dark": "#8B6914",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#D4A574",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #D4A574 0%, #8B6914 100%)",
            "--radial-glow": "rgba(212, 165, 116, 0.08)",
            "--text-glow": "rgba(212, 165, 116, 0.2)",
            "--shadow-color": "rgba(212, 165, 116, 0.3)",
            "--shadow-hover": "rgba(212, 165, 116, 0.4)"
        },
        "14": {
            "--primary-color": "#2D5016",
            "--primary-dark": "#8B7355",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#2D5016",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #2D5016 0%, #8B7355 100%)",
            "--radial-glow": "rgba(45, 80, 22, 0.08)",
            "--text-glow": "rgba(45, 80, 22, 0.2)",
            "--shadow-color": "rgba(45, 80, 22, 0.3)",
            "--shadow-hover": "rgba(45, 80, 22, 0.4)"
        },
        "15": {
            "--primary-color": "#E5D4B5",
            "--primary-dark": "#1C1C1C",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#E5D4B5",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #E5D4B5 0%, #1C1C1C 100%)",
            "--radial-glow": "rgba(229, 212, 181, 0.08)",
            "--text-glow": "rgba(229, 212, 181, 0.2)",
            "--shadow-color": "rgba(229, 212, 181, 0.3)",
            "--shadow-hover": "rgba(229, 212, 181, 0.4)"
        },
        "16": {
            "--primary-color": "#0047AB",
            "--primary-dark": "#C0C0C0",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0047AB",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0047AB 0%, #C0C0C0 100%)",
            "--radial-glow": "rgba(0, 71, 171, 0.08)",
            "--text-glow": "rgba(0, 71, 171, 0.2)",
            "--shadow-color": "rgba(0, 71, 171, 0.3)",
            "--shadow-hover": "rgba(0, 71, 171, 0.4)"
        },
        "17": {
            "--primary-color": "#8B4513",
            "--primary-dark": "#D2B48C",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#8B4513",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #8B4513 0%, #D2B48C 100%)",
            "--radial-glow": "rgba(139, 69, 19, 0.08)",
            "--text-glow": "rgba(139, 69, 19, 0.2)",
            "--shadow-color": "rgba(139, 69, 19, 0.3)",
            "--shadow-hover": "rgba(139, 69, 19, 0.4)"
        },
        "18": {
            "--primary-color": "#98D8C8",
            "--primary-dark": "#2F6F5E",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#98D8C8",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #98D8C8 0%, #2F6F5E 100%)",
            "--radial-glow": "rgba(152, 216, 200, 0.08)",
            "--text-glow": "rgba(152, 216, 200, 0.2)",
            "--shadow-color": "rgba(152, 216, 200, 0.3)",
            "--shadow-hover": "rgba(152, 216, 200, 0.4)"
        },
        "19": {
            "--primary-color": "#9B111E",
            "--primary-dark": "#2C1810",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#9B111E",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #9B111E 0%, #2C1810 100%)",
            "--radial-glow": "rgba(155, 17, 30, 0.08)",
            "--text-glow": "rgba(155, 17, 30, 0.2)",
            "--shadow-color": "rgba(155, 17, 30, 0.3)",
            "--shadow-hover": "rgba(155, 17, 30, 0.4)"
        },
        "20": {
            "--primary-color": "#C65D3B",
            "--primary-dark": "#2C5530",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#C65D3B",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #C65D3B 0%, #2C5530 100%)",
            "--radial-glow": "rgba(198, 93, 59, 0.08)",
            "--text-glow": "rgba(198, 93, 59, 0.2)",
            "--shadow-color": "rgba(198, 93, 59, 0.3)",
            "--shadow-hover": "rgba(198, 93, 59, 0.4)"
        },
        "21": {
            "--primary-color": "#800020",
            "--primary-dark": "#DAA520",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#800020",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #800020 0%, #DAA520 100%)",
            "--radial-glow": "rgba(128, 0, 32, 0.08)",
            "--text-glow": "rgba(128, 0, 32, 0.2)",
            "--shadow-color": "rgba(128, 0, 32, 0.3)",
            "--shadow-hover": "rgba(128, 0, 32, 0.4)"
        },
        "22": {
            "--primary-color": "#7FFFD4",
            "--primary-dark": "#20B2AA",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#7FFFD4",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #7FFFD4 0%, #20B2AA 100%)",
            "--radial-glow": "rgba(127, 255, 212, 0.08)",
            "--text-glow": "rgba(127, 255, 212, 0.2)",
            "--shadow-color": "rgba(127, 255, 212, 0.3)",
            "--shadow-hover": "rgba(127, 255, 212, 0.4)"
        },
        "23": {
            "--primary-color": "#D4A017",
            "--primary-dark": "#8B4000",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#D4A017",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #D4A017 0%, #8B4000 100%)",
            "--radial-glow": "rgba(212, 160, 23, 0.08)",
            "--text-glow": "rgba(212, 160, 23, 0.2)",
            "--shadow-color": "rgba(212, 160, 23, 0.3)",
            "--shadow-hover": "rgba(212, 160, 23, 0.4)"
        },
        "24": {
            "--primary-color": "#191970",
            "--primary-dark": "#FFD700",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#191970",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #191970 0%, #FFD700 100%)",
            "--radial-glow": "rgba(25, 25, 112, 0.08)",
            "--text-glow": "rgba(25, 25, 112, 0.2)",
            "--shadow-color": "rgba(25, 25, 112, 0.3)",
            "--shadow-hover": "rgba(25, 25, 112, 0.4)"
        },
        "25": {
            "--primary-color": "#0F0F1E",
            "--primary-dark": "#00F2FE",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0F0F1E",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0F0F1E 0%, #00F2FE 100%)",
            "--radial-glow": "rgba(15, 15, 30, 0.08)",
            "--text-glow": "rgba(15, 15, 30, 0.2)",
            "--shadow-color": "rgba(15, 15, 30, 0.3)",
            "--shadow-hover": "rgba(15, 15, 30, 0.4)"
        },
        "26": {
            "--primary-color": "#10002B",
            "--primary-dark": "#8338EC",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#10002B",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #10002B 0%, #8338EC 100%)",
            "--radial-glow": "rgba(16, 0, 43, 0.08)",
            "--text-glow": "rgba(16, 0, 43, 0.2)",
            "--shadow-color": "rgba(16, 0, 43, 0.3)",
            "--shadow-hover": "rgba(16, 0, 43, 0.4)"
        },
        "27": {
            "--primary-color": "#1A0F00",
            "--primary-dark": "#FF8C00",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#1A0F00",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #1A0F00 0%, #FF8C00 100%)",
            "--radial-glow": "rgba(26, 15, 0, 0.08)",
            "--text-glow": "rgba(26, 15, 0, 0.2)",
            "--shadow-color": "rgba(26, 15, 0, 0.3)",
            "--shadow-hover": "rgba(26, 15, 0, 0.4)"
        },
        "28": {
            "--primary-color": "#001219",
            "--primary-dark": "#005F73",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#001219",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #001219 0%, #005F73 100%)",
            "--radial-glow": "rgba(0, 18, 25, 0.08)",
            "--text-glow": "rgba(0, 18, 25, 0.2)",
            "--shadow-color": "rgba(0, 18, 25, 0.3)",
            "--shadow-hover": "rgba(0, 18, 25, 0.4)"
        },
        "29": {
            "--primary-color": "#081C15",
            "--primary-dark": "#2D6A4F",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#081C15",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #081C15 0%, #2D6A4F 100%)",
            "--radial-glow": "rgba(8, 28, 21, 0.08)",
            "--text-glow": "rgba(8, 28, 21, 0.2)",
            "--shadow-color": "rgba(8, 28, 21, 0.3)",
            "--shadow-hover": "rgba(8, 28, 21, 0.4)"
        },
        "30": {
            "--primary-color": "#0A1410",
            "--primary-dark": "#059669",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0A1410",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0A1410 0%, #059669 100%)",
            "--radial-glow": "rgba(10, 20, 16, 0.08)",
            "--text-glow": "rgba(10, 20, 16, 0.2)",
            "--shadow-color": "rgba(10, 20, 16, 0.3)",
            "--shadow-hover": "rgba(10, 20, 16, 0.4)"
        },
        "31": {
            "--primary-color": "#000814",
            "--primary-dark": "#4169E1",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#000814",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #000814 0%, #4169E1 100%)",
            "--radial-glow": "rgba(0, 8, 20, 0.08)",
            "--text-glow": "rgba(0, 8, 20, 0.2)",
            "--shadow-color": "rgba(0, 8, 20, 0.3)",
            "--shadow-hover": "rgba(0, 8, 20, 0.4)"
        },
        "32": {
            "--primary-color": "#1A0014",
            "--primary-dark": "#FF1493",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#1A0014",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #1A0014 0%, #FF1493 100%)",
            "--radial-glow": "rgba(26, 0, 20, 0.08)",
            "--text-glow": "rgba(26, 0, 20, 0.2)",
            "--shadow-color": "rgba(26, 0, 20, 0.3)",
            "--shadow-hover": "rgba(26, 0, 20, 0.4)"
        },
        "33": {
            "--primary-color": "#0A1A14",
            "--primary-dark": "#50C878",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0A1A14",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0A1A14 0%, #50C878 100%)",
            "--radial-glow": "rgba(10, 26, 20, 0.08)",
            "--text-glow": "rgba(10, 26, 20, 0.2)",
            "--shadow-color": "rgba(10, 26, 20, 0.3)",
            "--shadow-hover": "rgba(10, 26, 20, 0.4)"
        },
        "34": {
            "--primary-color": "#140A00",
            "--primary-dark": "#FFA500",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#140A00",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #140A00 0%, #FFA500 100%)",
            "--radial-glow": "rgba(20, 10, 0, 0.08)",
            "--text-glow": "rgba(20, 10, 0, 0.2)",
            "--shadow-color": "rgba(20, 10, 0, 0.3)",
            "--shadow-hover": "rgba(20, 10, 0, 0.4)"
        },
        "35": {
            "--primary-color": "#14000A",
            "--primary-dark": "#DC143C",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#14000A",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #14000A 0%, #DC143C 100%)",
            "--radial-glow": "rgba(20, 0, 10, 0.08)",
            "--text-glow": "rgba(20, 0, 10, 0.2)",
            "--shadow-color": "rgba(20, 0, 10, 0.3)",
            "--shadow-hover": "rgba(20, 0, 10, 0.4)"
        },
        "36": {
            "--primary-color": "#00140F",
            "--primary-dark": "#20B2AA",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#00140F",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #00140F 0%, #20B2AA 100%)",
            "--radial-glow": "rgba(0, 20, 15, 0.08)",
            "--text-glow": "rgba(0, 20, 15, 0.2)",
            "--shadow-color": "rgba(0, 20, 15, 0.3)",
            "--shadow-hover": "rgba(0, 20, 15, 0.4)"
        },
        "37": {
            "--primary-color": "#0A0A14",
            "--primary-dark": "#6A5ACD",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0A0A14",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0A0A14 0%, #6A5ACD 100%)",
            "--radial-glow": "rgba(10, 10, 20, 0.08)",
            "--text-glow": "rgba(10, 10, 20, 0.2)",
            "--shadow-color": "rgba(10, 10, 20, 0.3)",
            "--shadow-hover": "rgba(10, 10, 20, 0.4)"
        },
        "38": {
            "--primary-color": "#140F0A",
            "--primary-dark": "#D2691E",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#140F0A",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #140F0A 0%, #D2691E 100%)",
            "--radial-glow": "rgba(20, 15, 10, 0.08)",
            "--text-glow": "rgba(20, 15, 10, 0.2)",
            "--shadow-color": "rgba(20, 15, 10, 0.3)",
            "--shadow-hover": "rgba(20, 15, 10, 0.4)"
        },
        "39": {
            "--primary-color": "#0F140A",
            "--primary-dark": "#9ACD32",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0F140A",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0F140A 0%, #9ACD32 100%)",
            "--radial-glow": "rgba(15, 20, 10, 0.08)",
            "--text-glow": "rgba(15, 20, 10, 0.2)",
            "--shadow-color": "rgba(15, 20, 10, 0.3)",
            "--shadow-hover": "rgba(15, 20, 10, 0.4)"
        },
        "40": {
            "--primary-color": "#140A14",
            "--primary-dark": "#BA55D3",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#140A14",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #140A14 0%, #BA55D3 100%)",
            "--radial-glow": "rgba(20, 10, 20, 0.08)",
            "--text-glow": "rgba(20, 10, 20, 0.2)",
            "--shadow-color": "rgba(20, 10, 20, 0.3)",
            "--shadow-hover": "rgba(20, 10, 20, 0.4)"
        },
        "41": {
            "--primary-color": "#1A1008",
            "--primary-dark": "#F4A460",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#1A1008",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #1A1008 0%, #F4A460 100%)",
            "--radial-glow": "rgba(26, 16, 8, 0.08)",
            "--text-glow": "rgba(26, 16, 8, 0.2)",
            "--shadow-color": "rgba(26, 16, 8, 0.3)",
            "--shadow-hover": "rgba(26, 16, 8, 0.4)"
        },
        "42": {
            "--primary-color": "#1A0A0F",
            "--primary-dark": "#800020",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#1A0A0F",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #1A0A0F 0%, #800020 100%)",
            "--radial-glow": "rgba(26, 10, 15, 0.08)",
            "--text-glow": "rgba(26, 10, 15, 0.2)",
            "--shadow-color": "rgba(26, 10, 15, 0.3)",
            "--shadow-hover": "rgba(26, 10, 15, 0.4)"
        },
        "43": {
            "--primary-color": "#0A0A0A",
            "--primary-dark": "#FF1493",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0A0A0A",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0A0A0A 0%, #FF1493 100%)",
            "--radial-glow": "rgba(10, 10, 10, 0.08)",
            "--text-glow": "rgba(10, 10, 10, 0.2)",
            "--shadow-color": "rgba(10, 10, 10, 0.3)",
            "--shadow-hover": "rgba(10, 10, 10, 0.4)"
        },
        "44": {
            "--primary-color": "#000000",
            "--primary-dark": "#FF0000",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#000000",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #000000 0%, #FF0000 100%)",
            "--radial-glow": "rgba(0, 0, 0, 0.08)",
            "--text-glow": "rgba(0, 0, 0, 0.2)",
            "--shadow-color": "rgba(0, 0, 0, 0.3)",
            "--shadow-hover": "rgba(0, 0, 0, 0.4)"
        },
        "45": {
            "--primary-color": "#0F0F1A",
            "--primary-dark": "#483D8B",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0F0F1A",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0F0F1A 0%, #483D8B 100%)",
            "--radial-glow": "rgba(15, 15, 26, 0.08)",
            "--text-glow": "rgba(15, 15, 26, 0.2)",
            "--shadow-color": "rgba(15, 15, 26, 0.3)",
            "--shadow-hover": "rgba(15, 15, 26, 0.4)"
        },
        "46": {
            "--primary-color": "#000000",
            "--primary-dark": "#2B2B2B",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#000000",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #000000 0%, #2B2B2B 100%)",
            "--radial-glow": "rgba(0, 0, 0, 0.08)",
            "--text-glow": "rgba(0, 0, 0, 0.2)",
            "--shadow-color": "rgba(0, 0, 0, 0.3)",
            "--shadow-hover": "rgba(0, 0, 0, 0.4)"
        },
        "47": {
            "--primary-color": "#0A140A",
            "--primary-dark": "#32CD32",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0A140A",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0A140A 0%, #32CD32 100%)",
            "--radial-glow": "rgba(10, 20, 10, 0.08)",
            "--text-glow": "rgba(10, 20, 10, 0.2)",
            "--shadow-color": "rgba(10, 20, 10, 0.3)",
            "--shadow-hover": "rgba(10, 20, 10, 0.4)"
        },
        "48": {
            "--primary-color": "#000814",
            "--primary-dark": "#0047AB",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#000814",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #000814 0%, #0047AB 100%)",
            "--radial-glow": "rgba(0, 8, 20, 0.08)",
            "--text-glow": "rgba(0, 8, 20, 0.2)",
            "--shadow-color": "rgba(0, 8, 20, 0.3)",
            "--shadow-hover": "rgba(0, 8, 20, 0.4)"
        },
        "49": {
            "--primary-color": "#1A1008",
            "--primary-dark": "#CD853F",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#1A1008",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #1A1008 0%, #CD853F 100%)",
            "--radial-glow": "rgba(26, 16, 8, 0.08)",
            "--text-glow": "rgba(26, 16, 8, 0.2)",
            "--shadow-color": "rgba(26, 16, 8, 0.3)",
            "--shadow-hover": "rgba(26, 16, 8, 0.4)"
        },
        "50": {
            "--primary-color": "#1A1410",
            "--primary-dark": "#FFDAB9",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#1A1410",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #1A1410 0%, #FFDAB9 100%)",
            "--radial-glow": "rgba(26, 20, 16, 0.08)",
            "--text-glow": "rgba(26, 20, 16, 0.2)",
            "--shadow-color": "rgba(26, 20, 16, 0.3)",
            "--shadow-hover": "rgba(26, 20, 16, 0.4)"
        },
        "51": {
            "--primary-color": "#0A1416",
            "--primary-dark": "#00BFFF",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#0A1416",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #0A1416 0%, #00BFFF 100%)",
            "--radial-glow": "rgba(10, 20, 22, 0.08)",
            "--text-glow": "rgba(10, 20, 22, 0.2)",
            "--shadow-color": "rgba(10, 20, 22, 0.3)",
            "--shadow-hover": "rgba(10, 20, 22, 0.4)"
        },
        "52": {
            "--primary-color": "#1A1A2E",
            "--primary-dark": "#E6E6FA",
            "--light-color": "#ecf0f1",
            "--dark-color": "#1a1a1a",
            "--text-on-white": "#1A1A2E",
            "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
            "--logo-gradient": "linear-gradient(135deg, #1A1A2E 0%, #E6E6FA 100%)",
            "--radial-glow": "rgba(26, 26, 46, 0.08)",
            "--text-glow": "rgba(26, 26, 46, 0.2)",
            "--shadow-color": "rgba(26, 26, 46, 0.3)",
            "--shadow-hover": "rgba(26, 26, 46, 0.4)"
        }
    };



    let currentChartIndex = 15;
    const totalCharts = 52;

    // Ordre des chartes : commence par Amber Radiance (15), puis continue cycliquement
    const chartOrder = [15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
        39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
    ];
    let currentOrderIndex = 0; // Position dans chartOrder (0 = Amber Radiance = "Charte 1")

    // Fonction pour obtenir le numéro d'affichage (1-29) à partir de l'index d'ordre
    function getDisplayNumber(orderIndex) {
        return orderIndex + 1;
    }

    // Fonction pour appliquer un thème
    function applyTheme(chartNumber) {
        console.log('🎨 applyTheme appelé avec chartNumber:', chartNumber);

        const theme = chartThemes[chartNumber.toString()];
        if (!theme) {
            console.error('❌ Theme not found for chart:', chartNumber);
            return;
        }

        console.log('✓ Theme trouvé:', Object.keys(theme).length, 'propriétés');

        // Appliquer le thème au vcard-container dans la section Modèle Essentiel
        let vcardContainer = document.querySelector('#charteMockupSection .vcard-container');

        // Si pas trouvé, essayer avec la section modele-essentiel
        if (!vcardContainer) {
            vcardContainer = document.querySelector('.modele-essentiel-section .vcard-container');
        }

        // Si toujours pas trouvé, prendre le deuxième vcard-container (le premier est dans le hero)
        if (!vcardContainer) {
            const allVcards = document.querySelectorAll('.vcard-container');
            if (allVcards.length > 1) {
                vcardContainer = allVcards[1];
            } else if (allVcards.length === 1) {
                vcardContainer = allVcards[0];
            }
        }

        if (vcardContainer) {
            console.log('✓ vcard-container trouvé');
            // Appliquer chaque variable CSS
            for (const [property, value] of Object.entries(theme)) {
                vcardContainer.style.setProperty(property, value);
            }
            console.log(`✓ ${Object.keys(theme).length} propriétés appliquées`);

            // ====================================================================
            // CORRECTIF : FORCER LES COULEURS INLINE SUR LE MOCKUP
            // ====================================================================

            console.log('🎨 Application forcée des couleurs inline sur mockup...');

            // 1. Header
            const header = vcardContainer.querySelector('.header');
            if (header) {
                header.style.background = theme['--gradient-bg'] || theme['--primary-color'];
                header.style.color = 'white';
            }

            // 2. Boutons de contact
            const contactButtons = vcardContainer.querySelectorAll('.contact-buttons a');
            contactButtons.forEach(btn => {
                btn.style.backgroundColor = theme['--primary-color'];
                btn.style.borderColor = theme['--primary-color'];

                // Supprimer anciens listeners pour éviter conflits
                const newBtn = btn.cloneNode(true);
                btn.parentNode.replaceChild(newBtn, btn);

                // Ajouter nouveaux event listeners avec les bonnes couleurs
                newBtn.addEventListener('mouseenter', function () {
                    this.style.backgroundColor = theme['--primary-dark'];
                });
                newBtn.addEventListener('mouseleave', function () {
                    this.style.backgroundColor = theme['--primary-color'];
                });
            });

            // 3. Liens sociaux
            const socialLinks = vcardContainer.querySelectorAll('.social-links a');
            socialLinks.forEach(link => {
                link.style.backgroundColor = theme['--primary-color'];
                link.style.borderColor = theme['--primary-color'];

                const newLink = link.cloneNode(true);
                link.parentNode.replaceChild(newLink, link);

                newLink.addEventListener('mouseenter', function () {
                    this.style.backgroundColor = theme['--primary-dark'];
                });
                newLink.addEventListener('mouseleave', function () {
                    this.style.backgroundColor = theme['--primary-color'];
                });
            });

            // 4. Éléments avec fond primaire
            const bgPrimaryElements = vcardContainer.querySelectorAll(
                '.section-with-bg, [class*="bg-primary"]'
            );
            bgPrimaryElements.forEach(el => {
                el.style.background = theme['--gradient-bg'] || theme['--primary-color'];
            });

            // 5. Textes colorés
            const textPrimaryElements = vcardContainer.querySelectorAll('.text-primary, [class*="text-primary"]');
            textPrimaryElements.forEach(el => {
                el.style.color = theme['--primary-color'];
            });

            // 6. Bordures et accents
            const accentElements = vcardContainer.querySelectorAll('.accent-border, .divider');
            accentElements.forEach(el => {
                el.style.borderColor = theme['--primary-color'];
            });

            // 7. Forcer le reflow pour appliquer immédiatement
            vcardContainer.offsetHeight;

            console.log('✅ Couleurs inline forcées appliquées sur mockup');

        } else {
            console.error('❌ Aucun vcard-container trouvé');
        }

        // Appliquer aussi les variables sur le smartphone-mockup pour la scrollbar
        const smartphoneMockup = document.querySelector('#charteMockupSection .smartphone-mockup');
        if (smartphoneMockup) {
            for (const [property, value] of Object.entries(theme)) {
                smartphoneMockup.style.setProperty(property, value);
            }
            console.log('✓ Variables CSS appliquées sur smartphone-mockup (scrollbar)');
        }

        // Injecter un style dynamique pour la scrollbar avec les couleurs de la charte
        let scrollbarStyle = document.getElementById('dynamic-scrollbar-style');
        if (!scrollbarStyle) {
            scrollbarStyle = document.createElement('style');
            scrollbarStyle.id = 'dynamic-scrollbar-style';
            document.head.appendChild(scrollbarStyle);
        }
        scrollbarStyle.textContent = `
                #charteMockupSection .smartphone-screen::-webkit-scrollbar-thumb {
                    background: ${theme['--primary-color']} !important;
                }
                #charteMockupSection .smartphone-screen::-webkit-scrollbar-thumb:hover {
                    background: ${theme['--primary-dark']} !important;
                }
                #charteMockupSection .smartphone-screen {
                    scrollbar-color: ${theme['--primary-color']} rgba(0, 0, 0, 0.05) !important;
                }
            `;
        console.log('✓ Scrollbar colorée avec:', theme['--primary-color']);

        // Mettre à jour l'info de la charte
        const chart = chartsData.find(c => c.number === chartNumber);
        const chartName = chart ? chart.name : '';
        const chartSubtitle = chart && chart.subtitle ? ` - ${chart.subtitle}` : '';
        const displayNumber = getDisplayNumber(currentOrderIndex);

        const charteInfo = document.getElementById('charteInfo');
        if (charteInfo) {
            charteInfo.innerHTML = `
                <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #86868b; text-transform: uppercase; letter-spacing: 0.5px;">🎨 Charte graphique sélectionnée</div>
                <div style="font-size: 24px; font-weight: 700; margin-bottom: 6px; color: #1d1d1f;">${chartName}${chartSubtitle}</div>
                <div style="font-size: 14px; color: #86868b;">Charte ${displayNumber} / ${totalCharts}</div>
            `;
            console.log('✓ charteInfo mis à jour:', chartName);
        } else {
            console.error('❌ charteInfo element not found');
        }

        console.log('✅ Thème appliqué:', chartName);
    }

    // Fonction pour générer la grille des chartes
    function renderChartesGrid() {
        const grid = document.getElementById('chartesGrid');
        if (!grid) {
            console.error('Grid not found');
            return;
        }

        grid.innerHTML = chartsData.map(chart => {
            const colors = chart.colors.slice(0, 2);
            return `
                    <div class="charte-card" 
                         onclick="selectCharte(${chart.number})" 
                         style="
                            background: white;
                            border-radius: 12px;
                            padding: 15px;
                            cursor: pointer;
                            transition: all 0.3s ease;
                            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                            border: 3px solid ${chart.number === 1 ? '#0071e3' : 'transparent'};
                         "
                         id="charte-card-${chart.number}"
                         onmouseenter="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 4px 16px rgba(0,0,0,0.15)';"
                         onmouseleave="this.style.transform=''; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.1)';">
                        <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 10px; color: #1d1d1f; text-align: center;">
                            ${chart.name}
                        </h3>
                        <div style="display: flex; gap: 5px; justify-content: center;">
                            ${colors.map(c => `
                                <div style="
                                    width: 40px;
                                    height: 40px;
                                    background: ${c.bg};
                                    border-radius: 6px;
                                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                "></div>
                            `).join('')}
                        </div>
                    </div>
                `;
        }).join('');

        console.log('✓ Grille générée: 29 chartes');
    }

    // Fonction pour sélectionner une charte depuis la grille
    function selectCharte(chartNumber) {
        currentChartIndex = chartNumber;
        applyTheme(chartNumber);

        // Mettre à jour les bordures des cartes
        chartsData.forEach(chart => {
            const card = document.getElementById(`charte-card-${chart.number}`);
            if (card) {
                card.style.border = chart.number === chartNumber ? '3px solid #0071e3' :
                    '3px solid transparent';
            }
        });

        // Scroller vers le mockup
        const mockupSection = document.querySelector('#charteMockupSection');
        if (mockupSection) {
            mockupSection.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });
        }
    }


    // Navigation
    function previousChart() {
        currentOrderIndex = currentOrderIndex > 0 ? currentOrderIndex - 1 : totalCharts - 1;
        currentChartIndex = chartOrder[currentOrderIndex];
        applyTheme(currentChartIndex);
        const screen = document.querySelector('#charteMockupSection .smartphone-screen');
        if (screen) screen.scrollTop = 0;
    }

    function nextChart() {
        currentOrderIndex = currentOrderIndex < totalCharts - 1 ? currentOrderIndex + 1 : 0;
        currentChartIndex = chartOrder[currentOrderIndex];
        applyTheme(currentChartIndex);
        const screen = document.querySelector('#charteMockupSection .smartphone-screen');
        if (screen) screen.scrollTop = 0;
    }

    // Initialisation
    window.addEventListener('DOMContentLoaded', function () {
        // Masquer les éléments non utilisés
        const grid = document.querySelector('.grid-container');
        const mainHeader = document.querySelector('.main-header');
        if (grid) grid.style.display = 'none';
        if (mainHeader) mainHeader.style.display = 'none';

        // Générer la grille des chartes
        renderChartesGrid();

        // Charger Amber Radiance par défaut (charte 15)
        applyTheme(15);

        console.log('🎨 Modèle Essentiel chargé: 29 chartes disponibles (Amber Radiance par défaut)');
    });



    // ========================================
    // SCRIPT DE DEBUG - TEST CHANGEMENT AUTOMATIQUE
    // ========================================

    setTimeout(function () {
        console.log('🧪 TEST AUTOMATIQUE: Changement vers thème 2 dans 3 secondes...');

        setTimeout(function () {
            console.log('🧪 Exécution du test...');

            // Tester le sélecteur
            const vcard1 = document.querySelector('#charteMockupSection .vcard-container');
            const vcard2 = document.querySelector('.vcard-container');
            const vcard3 = document.querySelectorAll('.vcard-container');

            console.log('Test sélecteurs:');
            console.log('  #charteMockupSection .vcard-container:', vcard1 ? 'TROUVÉ ✓' :
                'NON TROUVÉ ✗');
            console.log('  .vcard-container (premier):', vcard2 ? 'TROUVÉ ✓' : 'NON TROUVÉ ✗');
            console.log('  .vcard-container (tous):', vcard3.length, 'trouvé(s)');

            if (vcard1) {
                console.log('✓ Élément trouvé, application du thème 2...');
                applyTheme(2);

                // Vérifier si les variables ont été appliquées
                setTimeout(function () {
                    const computedStyle = window.getComputedStyle(vcard1);
                    const primaryColor = vcard1.style.getPropertyValue('--primary-color');
                    console.log('Valeur de --primary-color après application:', primaryColor);

                    // Vérifier un élément enfant
                    const header = document.querySelector('.header');
                    if (header) {
                        const headerBg = window.getComputedStyle(header).backgroundColor;
                        console.log('Background du .header:', headerBg);
                    }
                }, 100);
            } else {
                console.error('✗ Impossible de trouver vcard-container avec le sélecteur');

                // Essayer avec un sélecteur plus simple
                if (vcard2) {
                    console.log('Tentative avec sélecteur simple .vcard-container...');
                    const theme2 = chartThemes["2"];
                    for (const [property, value] of Object.entries(theme2)) {
                        vcard2.style.setProperty(property, value);
                    }
                    console.log('✓ Thème 2 appliqué avec sélecteur simple');
                }
            }
        }, 3000);
    }, 100);

</script>

<script>
    // ============================================================================
    // MISE À JOUR EN TEMPS RÉEL DU MOCKUP - VERSION CORRIGÉE V2
    // Recherche dynamique des éléments à chaque mise à jour (contourne le cloneNode)
    // ============================================================================

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

        setTimeout(function () {

            // ========================================================================
            // FONCTIONS DE RECHERCHE DYNAMIQUE DES ÉLÉMENTS MOCKUP
            // Ces fonctions recherchent l'élément À CHAQUE APPEL car le thème
            // utilise cloneNode() qui invalide les références stockées
            // ========================================================================

            function getMockupSection() {
                return document.getElementById('charteMockupSection');
            }

            function getMockupName() {
                const section = getMockupSection();
                return section ? section.querySelector('.name') : null;
            }

            function getMockupPosition() {
                const section = getMockupSection();
                return section ? section.querySelector('.position') : null;
            }

            function getMockupCompany() {
                const section = getMockupSection();
                return section ? section.querySelector('.company-name') : null;
            }

            function getMockupTagline() {
                const section = getMockupSection();
                return section ? section.querySelector('.tagline') : null;
            }

            function getMockupLogo() {
                const section = getMockupSection();
                return section ? section.querySelector('.logo') : null;
            }

            // Liens de contact - recherche par index dans .contact-buttons
            // Index: 0=Fixe, 1=Mobile, 2=Visio, 3=Email, 4=Adresse, 5=vCard
            function getMockupContactLink(index) {
                const section = getMockupSection();
                if (!section) return null;
                const links = section.querySelectorAll('.contact-buttons a');
                return links[index] || null;
            }

            function getMockupFixe() {
                return getMockupContactLink(0);
            }

            function getMockupMobile() {
                return getMockupContactLink(1);
            }

            function getMockupEmail() {
                return getMockupContactLink(3);
            }

            function getMockupAdresse() {
                return getMockupContactLink(4);
            }

            // Vérification initiale
            const mockupSection = getMockupSection();
            if (!mockupSection) {
                console.error('❌ #charteMockupSection non trouvé!');
                return;
            }
            console.log('✅ mockupSection trouvé');

            // Vérification des éléments
            console.log('📋 Éléments mockup (recherche dynamique):');
            console.log('  - getMockupFixe():', getMockupFixe() ? '✓' : '✗');
            console.log('  - getMockupMobile():', getMockupMobile() ? '✓' : '✗');
            console.log('  - getMockupEmail():', getMockupEmail() ? '✓' : '✗');
            console.log('  - getMockupAdresse():', getMockupAdresse() ? '✓' : '✗');

            // ========================================================================
            // DEBUG: LISTER TOUS LES INPUTS DISPONIBLES
            // ========================================================================
            console.log('');
            console.log('🔍 LISTE DE TOUS LES INPUTS DU FORMULAIRE:');
            console.log('========================================');
            const allInputs = document.querySelectorAll(
                'input[type="text"], input[type="tel"], input[type="email"], textarea');
            allInputs.forEach((input, index) => {
                if (input.id) {
                    console.log(
                        `  [${index}] ID: "${input.id}" | Name: "${input.name || 'N/A'}" | Value: "${input.value || '(vide)'}"`
                        );
                }
            });
            console.log('========================================');
            console.log('');

            // ========================================================================
            // INPUTS DU FORMULAIRE - Recherche intelligente
            // ========================================================================

            // Fonction de recherche flexible
            function findInputSmart(keywords) {
                console.log(`🔍 Recherche input avec mots-clés:`, keywords);

                // Essayer d'abord les IDs exacts
                for (const keyword of keywords) {
                    const el = document.getElementById(keyword);
                    if (el) {
                        console.log(`  ✓ Trouvé par ID exact: #${keyword}`);
                        return el;
                    }
                }

                // Essayer les IDs qui se terminent par le mot-clé
                for (const keyword of keywords) {
                    const el = document.querySelector(`input[id$="${keyword}"]`);
                    if (el) {
                        console.log(`  ✓ Trouvé par fin d'ID: [id$="${keyword}"] → #${el.id}`);
                        return el;
                    }
                }

                // Essayer les IDs qui contiennent le mot-clé
                for (const keyword of keywords) {
                    const el = document.querySelector(`input[id*="${keyword}"]`);
                    if (el) {
                        console.log(`  ✓ Trouvé par contenu d'ID: [id*="${keyword}"] → #${el.id}`);
                        return el;
                    }
                }

                // Essayer avec l'attribut name
                for (const keyword of keywords) {
                    const el = document.querySelector(`input[name*="${keyword}"]`);
                    if (el) {
                        console.log(`  ✓ Trouvé par name: [name*="${keyword}"] → name="${el.name}"`);
                        return el;
                    }
                }

                console.warn(`  ✗ Aucun input trouvé pour:`, keywords);
                return null;
            }

            console.log('🔎 RECHERCHE DES INPUTS DU FORMULAIRE:');
            console.log('');

            const inputNom = findInputSmart(['essentiel_nom', 'nom', 'lastname']);
            const inputPrenom = findInputSmart(['essentiel_prenom', 'prenom', 'firstname']);
            const inputEntreprise = findInputSmart(['essentiel_entreprise', 'entreprise', 'company']);
            const inputSlogan = findInputSmart(['essentiel_slogan', 'slogan']);
            const inputFonction = findInputSmart(['essentiel_fonction', 'fonction', 'position']);
            const inputFixe = findInputSmart(['essentiel_fixe', 'fixe', 'tel_fixe', 'telephone_fixe']);
            const inputMobile = findInputSmart(['essentiel_mobile', 'mobile', 'tel_mobile',
            'portable']);
            const inputEmail = findInputSmart(['essentiel_email', 'email', 'mail']);
            const inputAdresse = findInputSmart(['essentiel_adresse', 'adresse', 'address']);
            const inputLogo = findInputSmart(['essentiel_logo', 'logo']);

            console.log('');
            console.log('📋 Inputs du formulaire:');
            console.log('  - inputNom:', inputNom ? `✓ (#${inputNom.id})` : '✗ NON TROUVÉ');
            console.log('  - inputPrenom:', inputPrenom ? `✓ (#${inputPrenom.id})` : '✗ NON TROUVÉ');
            console.log('  - inputFixe:', inputFixe ? `✓ (#${inputFixe.id})` : '✗ NON TROUVÉ');
            console.log('  - inputMobile:', inputMobile ? `✓ (#${inputMobile.id})` : '✗ NON TROUVÉ');
            console.log('  - inputEmail:', inputEmail ? `✓ (#${inputEmail.id})` : '✗ NON TROUVÉ');

            // ========================================================================
            // FONCTION: Mettre à jour un lien de contact
            // IMPORTANT: Utilise une fonction getter pour récupérer l'élément
            // à chaque appel (car cloneNode les remplace)
            // ========================================================================
            function updateContactLink(getElement, prefix, value, defaultValue, hrefPrefix) {
                // Rechercher l'élément MAINTENANT (pas une référence stockée)
                const linkElement = typeof getElement === 'function' ? getElement() : getElement;

                if (!linkElement) {
                    console.warn('⚠️ Element lien non trouvé pour:', prefix);
                    return;
                }

                console.log(`🔄 updateContactLink - ${prefix}:`, {
                    value: value,
                    hasValue: !!value && value.trim() !== ''
                });

                // IMPORTANT: Préserver le SVG en le récupérant avant toute modification
                const svg = linkElement.querySelector('svg');
                const svgHTML = svg ? svg.outerHTML : '';

                if (!svgHTML) {
                    console.warn(`⚠️ SVG non trouvé dans ${prefix}`);
                }

                // Déterminer la valeur à afficher
                const hasValue = value && value.trim() !== '';
                const displayValue = hasValue ? value.trim() : defaultValue;
                const displayText = prefix ? `${prefix} : ${displayValue}` : displayValue;

                // Reconstruire le HTML du lien : SVG + espace + texte
                linkElement.innerHTML = svgHTML + '\n                                            ' +
                    displayText;

                // Mettre à jour le href
                if (hasValue && hrefPrefix) {
                    const cleanValue = value.replace(/[\s\-\.]/g, '');
                    linkElement.href = hrefPrefix + cleanValue;
                    console.log(
                        `  ✅ ${prefix} mis à jour: "${displayText}" | href="${hrefPrefix}${cleanValue}"`
                        );
                } else {
                    linkElement.href = '#';
                    console.log(`  ✅ ${prefix} réinitialisé: "${displayText}" | href="#"`);
                }
            }

            // ========================================================================
            // LISTENERS - FIXE (utilise getMockupFixe() à chaque appel)
            // ========================================================================
            if (inputFixe) {
                inputFixe.addEventListener('input', function () {
                    console.log('⌨️ Input FIXE changé:', this.value);
                    updateContactLink(getMockupFixe, 'Fixe', this.value, '05 XX XX XX XX',
                        'tel:');
                });

                // Initialisation si le champ a déjà une valeur
                if (inputFixe.value && inputFixe.value.trim() !== '') {
                    console.log('🔄 Initialisation FIXE avec valeur existante:', inputFixe.value);
                    updateContactLink(getMockupFixe, 'Fixe', inputFixe.value, '05 XX XX XX XX', 'tel:');
                }

                console.log('✅ Listener FIXE activé (#' + inputFixe.id + ')');
            } else {
                console.error('❌ Input FIXE non trouvé');
            }

            // ========================================================================
            // LISTENERS - MOBILE (utilise getMockupMobile() à chaque appel)
            // ========================================================================
            if (inputMobile) {
                inputMobile.addEventListener('input', function () {
                    console.log('⌨️ Input MOBILE changé:', this.value);
                    updateContactLink(getMockupMobile, 'Mobile', this.value, '06 XX XX XX XX',
                        'tel:');
                });

                // Initialisation si le champ a déjà une valeur
                if (inputMobile.value && inputMobile.value.trim() !== '') {
                    console.log('🔄 Initialisation MOBILE avec valeur existante:', inputMobile.value);
                    updateContactLink(getMockupMobile, 'Mobile', inputMobile.value, '06 XX XX XX XX',
                        'tel:');
                }

                console.log('✅ Listener MOBILE activé (#' + inputMobile.id + ')');
            } else {
                console.error('❌ Input MOBILE non trouvé');
            }

            // ========================================================================
            // LISTENERS - EMAIL (utilise getMockupEmail() à chaque appel)
            // ========================================================================
            if (inputEmail) {
                inputEmail.addEventListener('input', function () {
                    const mockupEmail = getMockupEmail();
                    if (!mockupEmail) return;

                    const svg = mockupEmail.querySelector('svg');
                    const svgHTML = svg ? svg.outerHTML : '';
                    const emailValue = this.value || 'contact@exemple.fr';

                    mockupEmail.innerHTML = svgHTML +
                        '\n                                            <span>' + emailValue +
                        '</span>';
                    mockupEmail.href = this.value ? 'mailto:' + this.value : '#';

                    console.log('✓ Email mis à jour:', emailValue);
                });
                console.log('✅ Listener EMAIL activé (#' + inputEmail.id + ')');
            } else {
                console.error('❌ Input EMAIL non trouvé');
            }

            // ========================================================================
            // LISTENERS - NOM / PRÉNOM (utilise getMockupName() à chaque appel)
            // ========================================================================
            function updateFullName() {
                const mockupName = getMockupName();
                if (mockupName) {
                    const nom = inputNom ? .value || 'NOM';
                    const prenom = inputPrenom ? .value || 'Prénom';
                    mockupName.textContent = prenom + ' ' + nom;
                }
            }
            if (inputNom) inputNom.addEventListener('input', updateFullName);
            if (inputPrenom) inputPrenom.addEventListener('input', updateFullName);

            // ========================================================================
            // LISTENERS - ENTREPRISE
            // ========================================================================
            if (inputEntreprise) {
                inputEntreprise.addEventListener('input', function () {
                    const mockupCompany = getMockupCompany();
                    if (mockupCompany) {
                        mockupCompany.textContent = this.value || 'VOTRE ENTREPRISE';
                    }
                });
            }

            // ========================================================================
            // LISTENERS - SLOGAN
            // ========================================================================
            if (inputSlogan) {
                inputSlogan.addEventListener('input', function () {
                    const mockupTagline = getMockupTagline();
                    if (mockupTagline) {
                        mockupTagline.textContent = this.value || 'Votre slogan inspirant';
                    }
                });
            }

            // ========================================================================
            // LISTENERS - FONCTION
            // ========================================================================
            if (inputFonction) {
                inputFonction.addEventListener('input', function () {
                    const mockupPosition = getMockupPosition();
                    if (mockupPosition) {
                        mockupPosition.textContent = this.value || 'Votre Fonction';
                    }
                });
            }

            // ========================================================================
            // LISTENERS - ADRESSE
            // ========================================================================
            if (inputAdresse) {
                inputAdresse.addEventListener('input', function () {
                    updateContactLink(getMockupAdresse, '', this.value, 'XXXX 31000 Toulouse',
                        null);
                    const mockupAdresse = getMockupAdresse();
                    if (this.value && mockupAdresse) {
                        mockupAdresse.href = 'https://maps.google.com/?q=' + encodeURIComponent(
                            this.value);
                    }
                });
            }

            // ========================================================================
            // LISTENERS - LOGO
            // ========================================================================
            if (inputLogo) {
                inputLogo.addEventListener('change', function () {
                    const mockupLogo = getMockupLogo();
                    if (this.files && this.files[0] && mockupLogo) {
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            let img = mockupLogo.querySelector('img');
                            if (!img) {
                                img = document.createElement('img');
                                img.style.maxWidth = '100%';
                                img.style.maxHeight = '60px';
                                img.style.objectFit = 'contain';
                                mockupLogo.innerHTML = '';
                                mockupLogo.appendChild(img);
                            }
                            img.src = e.target.result;
                        };
                        reader.readAsDataURL(this.files[0]);
                    }
                });
            }

            console.log('');
            console.log('========================================');
            console.log('✅ INITIALISATION V2 TERMINÉE');
            console.log('   (Recherche dynamique des éléments)');
            console.log('========================================');

        }, 1000);
    });

</script>

{% endblock %}