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

{% block title %}Création de la Carte {{ cardType|default('Essentiel')|capitalize }}{% endblock %}

{% block body %}
    <main class="page-content-wrapper">
        {# CLASSE DU MOCKUP: 'modele-essentiel-section' (Fond dégradé) #}
         <section class="modele-essentiel-section" id="modele-essentiel" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); padding: 80px 20px; min-height: 100vh;">
        <div style="max-width: 1400px; margin: 0 auto;">

            <!-- 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: center; justify-content: center; gap: 80px;">

                <!-- BLOC 1 : Titre et Composition -->
                <div style="flex: 0 0 320px;">
                    <h2 class="section-title" style="color: white; font-size: 56px; font-weight: 600; margin-bottom: 30px; line-height: 1.1; text-align: left;">
                        <a href="#accueil" style="color: white; text-decoration: none; cursor: pointer; transition: opacity 0.3s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
                            Modèle<br>Essentiel
                        </a>
                    </h2>

                    <!-- Composition de la carte -->
                    <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 24px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.15);">
                        <h3 style="color: white; font-size: 16px; font-weight: 600; margin-bottom: 18px;">Composition : </h3>

                        <div style="color: white; font-size: 13px; line-height: 1.8;">
                            <ul style="list-style: none; padding: 0; margin: 0;">
                                <li style="margin-bottom: 15px; padding-left: 0;">
                                    <span style="font-weight: 400;">- Logo • Nom entreprise • Slogan</span>
                                </li>
                                <li style="margin-bottom: 15px; padding-left: 0;">
                                    <span style="font-weight: 400;">- Nom complet • Fonction</span>
                                </li>
                                <li style="margin-bottom: 4px; padding-left: 0;">
                                    <span style="font-weight: 400;">- Tél. fixe • Mobile • Visio • Email • Adresse</span>
                                </li>
                                <li style="margin-bottom: 15px; padding-left: 0; font-size: 12px; opacity: 0.9;">
                                    <span style="font-weight: 400;">- Ajouter à mes contacts</span>
                                </li>
                                <li style="margin-bottom: 15px; padding-left: 0;">
                                    <span style="font-weight: 400;">- Partager ma carte • WhatsApp • Email • SMS • QR code</span>
                                </li>
                                <li style="margin-bottom: 4px; padding-left: 0;">
                                    <span style="font-weight: 400;">- Accès direct * • LinkedIn • Facebook • YouTube • TikTok • Instagram • Threads</span>
                                </li>
                                <li style="margin-bottom: 15px; padding-left: 0;">
                                    <span style="font-weight: 400;">- Accès à mon site web</span>
                                </li>
                                <li style="margin-bottom: 15px; padding-left: 0;">
                                    <span style="font-weight: 400;">- Expertises</span>
                                </li>
                                <li style="margin-bottom: 15px; padding-left: 0;">
                                    <span style="font-weight: 400;">- Design au choix parmi 29 propositions ou votre propre charte graphique (voir fonctionnalités)</span>
                                </li>
                                <li style="margin-bottom: 0; padding-left: 0;">
                                    <span style="font-weight: 400;">- Sécurité • Responsive • Cross-platform</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Note pour les particuliers -->
                    <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 24px; border-radius: 16px; margin-top: 20px; border: 1px solid rgba(255, 255, 255, 0.15);">
                        <p style="color: white; font-size: 14px; font-weight: 500; margin: 0; line-height: 1.6;">
                            * Sélectionnez les éléments de votre Carte
                        </p>
                    </div>
                </div>

                <!-- BLOC 2 : Prix et Indicateur -->
                <div style="flex: 0 0 auto; text-align: center;">
                    <!-- Indicateur (nom + numéro de charte) -->
                    <div id="charteInfo" style="color: white; margin-bottom: 30px;">
                        <div style="font-size: 18px; font-weight: 600; margin-bottom: 16px; opacity: 1; text-transform: uppercase; letter-spacing: 0.5px;">Choisissez une charte</div>
                        <div style="font-size: 28px; font-weight: 700; margin-bottom: 8px;">Burgundy Elegance</div>
                        <div style="font-size: 18px; opacity: 0.9;">Charte 1 / 29</div>
                    </div>

                    <!-- Prix -->
                    <div style="background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: 30px 40px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2); margin-bottom: 20px;">
                        <div style="font-size: 56px; font-weight: 700; color: white; margin-bottom: 8px;">199 € <span style="font-size: 24px; font-weight: 400;">H.T</span></div>
                        <div style="font-size: 18px; color: rgba(255, 255, 255, 0.9); text-align: center;">(Tva Applicable 20%)</div>
                    </div>

                    <!-- Case à cocher CGV -->
                    <div style="margin-bottom: 20px; text-align: left; display: flex; align-items: center; justify-content: center; gap: 10px;">
                        <input type="checkbox" id="cgv-checkbox" required style="width: 18px; height: 18px; cursor: pointer; accent-color: #0071e3;">
                        <label for="cgv-checkbox" style="color: white; font-size: 14px; cursor: pointer;">Conditions générales de vente</label>
                    </div>

                    <!-- Bouton Commandez -->
                    <a href="#contact" style="display: block; background: #0071e3; color: white; padding: 14px 40px; border-radius: 980px; font-size: 17px; font-weight: 500; border: none; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3); width: 100%; text-align: center; text-decoration: none;">
                        Commandez
                    </a>

                    <!-- Note sur l'interface -->
                    <div style="background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 12px 16px; border-radius: 16px; margin-top: 20px; border: 1px solid rgba(255, 255, 255, 0.15); max-width: 100%;">
                        <p style="color: white; font-size: 10px; font-weight: 400; margin: 0; line-height: 1.3; font-style: italic; opacity: 0.9; text-align: center;">
                            L'interface présentée peut varier en fonction des contenus que vous avez choisis
                        </p>
                    </div>
                </div>

              

            <!-- BLOC 3 : Mockup avec boutons de navigation -->
            <div id="charteMockupSection" style="position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 20px; gap: 20px;">

                <!-- 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; align-items: center;">
                    <!-- Bouton Précédent -->
                    <button class="chart-nav-btn" style="position: absolute; left: -70px; top: 50%; 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: -70px; top: 50%; 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 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 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: 16px;
                        font-weight: 700;
                        margin-bottom: 15px;
                        color: #2c3e50;
                        text-align: center;
                    ">📤 Partagez ma carte</h3>

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

                    <div class="share-subtitle" style="
                        font-size: 13px;
                        color: #666;
                        margin-bottom: 15px;
                        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: 12px;
                    ">
                        <a href="#" onclick="alert('LinkedIn'); return false;" style="
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 8px;
                            background: linear-gradient(135deg, #0077B5 0%, #005582 100%);
                            color: white;
                            padding: 14px 16px;
                            border-radius: 12px;
                            text-decoration: none;
                            font-size: 14px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 4px 12px rgba(139, 21, 56, 0.2);
                            border: 1px solid rgba(139, 21, 56, 0.3);
                        ">
                            <svg viewBox="0 0 24 24" style="width: 20px; height: 20px; 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: 8px;
                            background: linear-gradient(135deg, #1877F2 0%, #0C63D4 100%);
                            color: white;
                            padding: 14px 16px;
                            border-radius: 12px;
                            text-decoration: none;
                            font-size: 14px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 4px 12px rgba(139, 21, 56, 0.2);
                            border: 1px solid rgba(139, 21, 56, 0.3);
                        ">
                            <svg viewBox="0 0 24 24" style="width: 20px; height: 20px; 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: 8px;
                            background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
                            color: white;
                            padding: 14px 16px;
                            border-radius: 12px;
                            text-decoration: none;
                            font-size: 14px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 4px 12px rgba(139, 21, 56, 0.2);
                            border: 1px solid rgba(139, 21, 56, 0.3);
                        ">
                            <svg viewBox="0 0 24 24" style="width: 20px; height: 20px; 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: 8px;
                            background: linear-gradient(135deg, #000000 0%, #00F2EA 100%);
                            color: white;
                            padding: 14px 16px;
                            border-radius: 12px;
                            text-decoration: none;
                            font-size: 14px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 4px 12px rgba(139, 21, 56, 0.2);
                            border: 1px solid rgba(139, 21, 56, 0.3);
                        ">
                            <svg viewBox="0 0 24 24" style="width: 20px; height: 20px; 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: 8px;
                            background: linear-gradient(135deg, #E4405F 0%, #833AB4 100%);
                            color: white;
                            padding: 14px 16px;
                            border-radius: 12px;
                            text-decoration: none;
                            font-size: 14px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 4px 12px rgba(139, 21, 56, 0.2);
                            border: 1px solid rgba(139, 21, 56, 0.3);
                        ">
                            <svg viewBox="0 0 24 24" style="width: 20px; height: 20px; 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: 8px;
                            background: linear-gradient(135deg, #000000 0%, #14171A 100%);
                            color: white;
                            padding: 14px 16px;
                            border-radius: 12px;
                            text-decoration: none;
                            font-size: 14px;
                            font-weight: 600;
                            transition: all 0.3s;
                            box-shadow: 0 4px 12px rgba(139, 21, 56, 0.2);
                            border: 1px solid rgba(139, 21, 56, 0.3);
                        ">
                            <svg viewBox="0 0 24 24" style="width: 20px; height: 20px; 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 -->
                </div>
            </div>
    </section>
    </main>
{% endblock %}

{% block javascripts %}
 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
        // ========================================
        // MODÈLE ESSENTIEL - JAVASCRIPT
        // ========================================

        const chartsData = [
            {
                number: 1,
                name: "Nordic",
                colors: [
                    {
                        code: "#2C3E50",
                        label: "Nuit Nordique",
                        bg: "#2c3e50",
                        text: "white"
                    },
                    {
                        code: "#ECF0F1",
                        label: "Neige Pure",
                        bg: "#ecf0f1",
                        text: "#2c3e50"
                    },
                    {
                        code: "#95A5A6",
                        label: "Gris Pierre",
                        bg: "#95a5a6",
                        text: "white"
                    },
                    {
                        code: "#E8D5B7",
                        label: "Bois Naturel",
                        bg: "#e8d5b7",
                        text: "#2c3e50"
                    }
                ]
            },
            {
                number: 2,
                name: "Burgundy",
                colors: [
                    {
                        code: "#8B1538",
                        label: "Bordeaux Intense",
                        bg: "#8B1538",
                        text: "white"
                    },
                    {
                        code: "#F8F0E3",
                        label: "Crème Douce",
                        bg: "#f8f0e3",
                        text: "#8B1538"
                    },
                    {
                        code: "#D4AF37",
                        label: "Or Vintage",
                        bg: "#d4af37",
                        text: "white"
                    },
                    {
                        code: "#3D1E1E",
                        label: "Brun Chêne",
                        bg: "#3d1e1e",
                        text: "white"
                    }
                ]
            },
            {
                number: 3,
                name: "Emerald",
                colors: [
                    {
                        code: "#0F5132",
                        label: "Émeraude Profond",
                        bg: "#0f5132",
                        text: "white"
                    },
                    {
                        code: "#F5F5DC",
                        label: "Beige Ivoire",
                        bg: "#f5f5dc",
                        text: "#0f5132"
                    },
                    {
                        code: "#B8860B",
                        label: "Or Sombre",
                        bg: "#b8860b",
                        text: "white"
                    },
                    {
                        code: "#8FBC8F",
                        label: "Vert Sauge",
                        bg: "#8fbc8f",
                        text: "white"
                    }
                ]
            },
            {
                number: 4,
                name: "Purple",
                colors: [
                    {
                        code: "#4A148C",
                        label: "Violet Impérial",
                        bg: "#4A148C",
                        text: "white"
                    },
                    {
                        code: "#F3E5F5",
                        label: "Lavande Pâle",
                        bg: "#f3e5f5",
                        text: "#4A148C"
                    },
                    {
                        code: "#FFD700",
                        label: "Or Royal",
                        bg: "#ffd700",
                        text: "#4A148C"
                    },
                    {
                        code: "#1A1A1A",
                        label: "Noir Profond",
                        bg: "#1a1a1a",
                        text: "white"
                    }
                ]
            },
            {
                number: 5,
                name: "Copper",
                colors: [
                    {
                        code: "#B87333",
                        label: "Cuivre Brillant",
                        bg: "#B87333",
                        text: "white"
                    },
                    {
                        code: "#FAFAFA",
                        label: "Blanc Pur",
                        bg: "#fafafa",
                        text: "#B87333"
                    },
                    {
                        code: "#2F4F4F",
                        label: "Anthracite",
                        bg: "#2f4f4f",
                        text: "white"
                    },
                    {
                        code: "#FFE4C4",
                        label: "Bisque Doux",
                        bg: "#ffe4c4",
                        text: "#B87333"
                    }
                ]
            },
            {
                number: 6,
                name: "Ocean",
                colors: [
                    {
                        code: "#003F5C",
                        label: "Bleu Abyssal",
                        bg: "#003f5c",
                        text: "white"
                    },
                    {
                        code: "#E6F2FF",
                        label: "Écume Claire",
                        bg: "#e6f2ff",
                        text: "#003f5c"
                    },
                    {
                        code: "#20B2AA",
                        label: "Turquoise Mer",
                        bg: "#20b2aa",
                        text: "white"
                    },
                    {
                        code: "#4682B4",
                        label: "Acier Océan",
                        bg: "#4682b4",
                        text: "white"
                    }
                ]
            },
            {
                number: 7,
                name: "Coral",
                colors: [
                    {
                        code: "#FF6B6B",
                        label: "Corail Vivant",
                        bg: "#FF6B6B",
                        text: "white"
                    },
                    {
                        code: "#FFF5F5",
                        label: "Rose Poudré",
                        bg: "#fff5f5",
                        text: "#FF6B6B"
                    },
                    {
                        code: "#FECA57",
                        label: "Soleil Chaud",
                        bg: "#feca57",
                        text: "#2c3e50"
                    },
                    {
                        code: "#2D3436",
                        label: "Charbon Mat",
                        bg: "#2d3436",
                        text: "white"
                    }
                ]
            },
            {
                number: 8,
                name: "Midnight",
                colors: [
                    {
                        code: "#191970",
                        label: "Bleu Minuit",
                        bg: "#191970",
                        text: "white"
                    },
                    {
                        code: "#F0F4F8",
                        label: "Argent Clair",
                        bg: "#f0f4f8",
                        text: "#191970"
                    },
                    {
                        code: "#C0C0C0",
                        label: "Argent Pur",
                        bg: "#c0c0c0",
                        text: "#191970"
                    },
                    {
                        code: "#6495ED",
                        label: "Bleu Royal",
                        bg: "#6495ed",
                        text: "white"
                    }
                ]
            },
            {
                number: 9,
                name: "Teal",
                colors: [
                    {
                        code: "#008B8B",
                        label: "Sarcelle Foncé",
                        bg: "#008B8B",
                        text: "white"
                    },
                    {
                        code: "#E0F2F1",
                        label: "Menthe Eau",
                        bg: "#e0f2f1",
                        text: "#008B8B"
                    },
                    {
                        code: "#5F9EA0",
                        label: "Cadet Bleu",
                        bg: "#5f9ea0",
                        text: "white"
                    },
                    {
                        code: "#FFD700",
                        label: "Or Accent",
                        bg: "#ffd700",
                        text: "#008B8B"
                    }
                ]
            },
            {
                number: 10,
                name: "Amber",
                colors: [
                    {
                        code: "#D4AF37",
                        label: "Or Ambre",
                        bg: "#D4AF37",
                        text: "#2c3e50"
                    },
                    {
                        code: "#FFFEF2",
                        label: "Ivoire Satin",
                        bg: "#fffef2",
                        text: "#D4AF37"
                    },
                    {
                        code: "#1A1A1A",
                        label: "Noir Elite",
                        bg: "#1a1a1a",
                        text: "white"
                    },
                    {
                        code: "#8B7355",
                        label: "Bronze Antique",
                        bg: "#8b7355",
                        text: "white"
                    }
                ]
            },
            {
                number: 11,
                name: "Crimson",
                colors: [
                    {
                        code: "#8B0000",
                        label: "Rouge Profond",
                        bg: "#8B0000",
                        text: "white"
                    },
                    {
                        code: "#FAFAFA",
                        label: "Blanc Pur",
                        bg: "#fafafa",
                        text: "#8B0000"
                    },
                    {
                        code: "#000000",
                        label: "Noir Absolu",
                        bg: "#000000",
                        text: "white"
                    },
                    {
                        code: "#C0C0C0",
                        label: "Argent Neutre",
                        bg: "#c0c0c0",
                        text: "#8B0000"
                    }
                ]
            },
            {
                number: 12,
                name: "Sage",
                colors: [
                    {
                        code: "#87AE73",
                        label: "Sauge Tendre",
                        bg: "#87AE73",
                        text: "white"
                    },
                    {
                        code: "#F9FAF8",
                        label: "Lin Naturel",
                        bg: "#f9faf8",
                        text: "#87AE73"
                    },
                    {
                        code: "#C8B89B",
                        label: "Beige Sable",
                        bg: "#c8b89b",
                        text: "white"
                    },
                    {
                        code: "#556B2F",
                        label: "Olive Sombre",
                        bg: "#556b2f",
                        text: "white"
                    }
                ]
            },
            {
                number: 13,
                name: "Gold",
                colors: [
                    {
                        code: "#B76E79",
                        label: "Rose Gold",
                        bg: "#B76E79",
                        text: "white"
                    },
                    {
                        code: "#FFF5F7",
                        label: "Rose Blanc",
                        bg: "#fff5f7",
                        text: "#B76E79"
                    },
                    {
                        code: "#2C2C2C",
                        label: "Charbon Chic",
                        bg: "#2c2c2c",
                        text: "white"
                    },
                    {
                        code: "#E8C4C4",
                        label: "Pêche Rosé",
                        bg: "#e8c4c4",
                        text: "#2c2c2c"
                    }
                ]
            },
            {
                number: 14,
                name: "Pewter",
                colors: [
                    {
                        code: "#5C6E7E",
                        label: "Étain Bleuté",
                        bg: "#5C6E7E",
                        text: "white"
                    },
                    {
                        code: "#F8F9FA",
                        label: "Gris Perle",
                        bg: "#f8f9fa",
                        text: "#5C6E7E"
                    },
                    {
                        code: "#36454F",
                        label: "Charcoal Bleu",
                        bg: "#36454f",
                        text: "white"
                    },
                    {
                        code: "#B0C4DE",
                        label: "Acier Clair",
                        bg: "#b0c4de",
                        text: "#36454f"
                    }
                ]
            },
            {
                number: 15,
                name: "Radiance",
                colors: [
                    {
                        code: "#D4A574",
                        label: "Ambre Doré",
                        bg: "#D4A574",
                        text: "white"
                    },
                    {
                        code: "#FFF8F0",
                        label: "Ivoire Chaud",
                        bg: "#FFF8F0",
                        text: "#D4A574"
                    },
                    {
                        code: "#8B6914",
                        label: "Or Ancien",
                        bg: "#8B6914",
                        text: "white"
                    },
                    {
                        code: "#E8C9A6",
                        label: "Sable Chaud",
                        bg: "#E8C9A6",
                        text: "#5c4a2f"
                    }
                ]
            },
            {
                number: 16,
                name: "Lavender",
                colors: [
                    {
                        code: "#B19CD9",
                        label: "Lavande Royal",
                        bg: "#B19CD9",
                        text: "white"
                    },
                    {
                        code: "#FAF8FF",
                        label: "Blanc Lilas",
                        bg: "#FAF8FF",
                        text: "#B19CD9"
                    },
                    {
                        code: "#6A5ACD",
                        label: "Ardoise Bleu",
                        bg: "#6A5ACD",
                        text: "white"
                    },
                    {
                        code: "#D4C5F9",
                        label: "Lilas Doux",
                        bg: "#D4C5F9",
                        text: "#4a3a7a"
                    }
                ]
            },
            {
                number: 17,
                name: "Forest",
                colors: [
                    {
                        code: "#2D5016",
                        label: "Vert Forêt",
                        bg: "#2D5016",
                        text: "white"
                    },
                    {
                        code: "#F5F8F2",
                        label: "Blanc Mousse",
                        bg: "#F5F8F2",
                        text: "#2D5016"
                    },
                    {
                        code: "#4A7C2C",
                        label: "Feuillage Vif",
                        bg: "#4A7C2C",
                        text: "white"
                    },
                    {
                        code: "#8B7355",
                        label: "Écorce Terre",
                        bg: "#8B7355",
                        text: "white"
                    }
                ]
            },
            {
                number: 18,
                name: "Champagne",
                colors: [
                    {
                        code: "#E5D4B5",
                        label: "Champagne Or",
                        bg: "#E5D4B5",
                        text: "#5c4a2f"
                    },
                    {
                        code: "#FFFEF9",
                        label: "Crème Éclat",
                        bg: "#FFFEF9",
                        text: "#5c4a2f"
                    },
                    {
                        code: "#C9A961",
                        label: "Or Mousseux",
                        bg: "#C9A961",
                        text: "white"
                    },
                    {
                        code: "#1C1C1C",
                        label: "Noir Satiné",
                        bg: "#1C1C1C",
                        text: "white"
                    }
                ]
            },
            {
                number: 19,
                name: "Cobalt",
                colors: [
                    {
                        code: "#0047AB",
                        label: "Cobalt Royal",
                        bg: "#0047AB",
                        text: "white"
                    },
                    {
                        code: "#F0F6FF",
                        label: "Blanc Glacier",
                        bg: "#F0F6FF",
                        text: "#0047AB"
                    },
                    {
                        code: "#4682B4",
                        label: "Acier Bleu",
                        bg: "#4682B4",
                        text: "white"
                    },
                    {
                        code: "#C0C0C0",
                        label: "Argent Chrome",
                        bg: "#C0C0C0",
                        text: "#0047AB"
                    }
                ]
            },
            {
                number: 20,
                name: "Bronze",
                colors: [
                    {
                        code: "#8B4513",
                        label: "Bronze Selle",
                        bg: "#8B4513",
                        text: "white"
                    },
                    {
                        code: "#FFF9F0",
                        label: "Lin Clair",
                        bg: "#FFF9F0",
                        text: "#8B4513"
                    },
                    {
                        code: "#A0522D",
                        label: "Sienna Brûlé",
                        bg: "#A0522D",
                        text: "white"
                    },
                    {
                        code: "#D2B48C",
                        label: "Tan Doux",
                        bg: "#D2B48C",
                        text: "#5c3d1f"
                    }
                ]
            },
            {
                number: 21,
                name: "Mint",
                colors: [
                    {
                        code: "#98D8C8",
                        label: "Menthe Douce",
                        bg: "#98D8C8",
                        text: "white"
                    },
                    {
                        code: "#F6FFFC",
                        label: "Blanc Glace",
                        bg: "#F6FFFC",
                        text: "#1a5c4a"
                    },
                    {
                        code: "#2F6F5E",
                        label: "Émeraude Foncé",
                        bg: "#2F6F5E",
                        text: "white"
                    },
                    {
                        code: "#C1F0E5",
                        label: "Aqua Pâle",
                        bg: "#C1F0E5",
                        text: "#1a5c4a"
                    }
                ]
            },
            {
                number: 22,
                name: "Ruby",
                colors: [
                    {
                        code: "#9B111E",
                        label: "Rubis Profond",
                        bg: "#9B111E",
                        text: "white"
                    },
                    {
                        code: "#FFF5F5",
                        label: "Rose Pâle",
                        bg: "#FFF5F5",
                        text: "#9B111E"
                    },
                    {
                        code: "#C41E3A",
                        label: "Cardinal Vif",
                        bg: "#C41E3A",
                        text: "white"
                    },
                    {
                        code: "#2C1810",
                        label: "Chocolat Noir",
                        bg: "#2C1810",
                        text: "white"
                    }
                ]
            },
            {
                number: 23,
                name: "Prestige",
                colors: [
                    {
                        code: "#800020",
                        label: "Bordeaux Impérial",
                        bg: "#800020",
                        text: "white"
                    },
                    {
                        code: "#FFF9F5",
                        label: "Blanc Cassé",
                        bg: "#FFF9F5",
                        text: "#800020"
                    },
                    {
                        code: "#A0263F",
                        label: "Grenat Riche",
                        bg: "#A0263F",
                        text: "white"
                    },
                    {
                        code: "#DAA520",
                        label: "Or Véritable",
                        bg: "#DAA520",
                        text: "white"
                    }
                ]
            },
            {
                number: 24,
                name: "Honey",
                colors: [
                    {
                        code: "#D4A017",
                        label: "Miel Doré",
                        bg: "#D4A017",
                        text: "white"
                    },
                    {
                        code: "#FFFAF0",
                        label: "Crème Vanille",
                        bg: "#FFFAF0",
                        text: "#D4A017"
                    },
                    {
                        code: "#E9C46A",
                        label: "Safran Clair",
                        bg: "#E9C46A",
                        text: "white"
                    },
                    {
                        code: "#8B4000",
                        label: "Caramel Foncé",
                        bg: "#8B4000",
                        text: "white"
                    }
                ]
            },
            {
                number: 25,
                name: "Slate",
                colors: [
                    {
                        code: "#708090",
                        label: "Ardoise Grise",
                        bg: "#708090",
                        text: "white"
                    },
                    {
                        code: "#F5F5F5",
                        label: "Gris Clair",
                        bg: "#F5F5F5",
                        text: "#708090"
                    },
                    {
                        code: "#2F4F4F",
                        label: "Ardoise Foncée",
                        bg: "#2F4F4F",
                        text: "white"
                    },
                    {
                        code: "#A9B4C2",
                        label: "Brume Bleue",
                        bg: "#A9B4C2",
                        text: "#2F4F4F"
                    }
                ]
            },
            {
                number: 26,
                name: "Bloom",
                colors: [
                    {
                        code: "#FF7F50",
                        label: "Corail Vif",
                        bg: "#FF7F50",
                        text: "white"
                    },
                    {
                        code: "#FFF5EE",
                        label: "Blanc Coquillage",
                        bg: "#FFF5EE",
                        text: "#FF7F50"
                    },
                    {
                        code: "#FFA07A",
                        label: "Saumon Clair",
                        bg: "#FFA07A",
                        text: "white"
                    },
                    {
                        code: "#4A7C7E",
                        label: "Vert Océan",
                        bg: "#4A7C7E",
                        text: "white"
                    }
                ]
            },
            {
                number: 27,
                name: "Cyber",
                colors: [
                    {
                        code: "#0F0F1E",
                        label: "Principale",
                        bg: "#0f0f1e",
                        text: "white"
                    },
                    {
                        code: "#1A1A2E",
                        label: "Sombre",
                        bg: "#1a1a2e",
                        text: "white"
                    },
                    {
                        code: "#00F2FE",
                        label: "Accent",
                        bg: "#00f2fe",
                        text: "white"
                    },
                    {
                        code: "#4FACFE",
                        label: "Clair",
                        bg: "#4facfe",
                        text: "white"
                    },
                    {
                        code: "#E0F7FA",
                        label: "Fond",
                        bg: "#e0f7fa",
                        text: "#333"
                    }
                ]
            },
            {
                number: 28,
                name: "Fire",
                colors: [
                    {
                        code: "#1A0F00",
                        label: "Principale",
                        bg: "#1a0f00",
                        text: "white"
                    },
                    {
                        code: "#2D1E00",
                        label: "Sombre",
                        bg: "#2d1e00",
                        text: "white"
                    },
                    {
                        code: "#FF9500",
                        label: "Accent",
                        bg: "#ff9500",
                        text: "white"
                    },
                    {
                        code: "#FFB700",
                        label: "Clair",
                        bg: "#ffb700",
                        text: "white"
                    },
                    {
                        code: "#FFE5B4",
                        label: "Fond",
                        bg: "#ffe5b4",
                        text: "#333"
                    }
                ]
            },
            {
                number: 29,
                name: "Obsidian",
                colors: [
                    {
                        code: "#000000",
                        label: "Principale",
                        bg: "#000000",
                        text: "white"
                    },
                    {
                        code: "#0A0A0A",
                        label: "Sombre",
                        bg: "#0a0a0a",
                        text: "white"
                    },
                    {
                        code: "#1A1A1A",
                        label: "Accent",
                        bg: "#1a1a1a",
                        text: "white"
                    },
                    {
                        code: "#BF00FF",
                        label: "Clair",
                        bg: "#bf00ff",
                        text: "white"
                    },
                    {
                        code: "#FF00FF",
                        label: "Fond",
                        bg: "#ff00ff",
                        text: "white"
                    }
                ]
            }
        ];

        // Thèmes CSS ultra-lisibles (avec --text-on-white)
        const chartThemes = {
            "1": {
                        "--primary-color": "#2c3e50",
                        "--primary-dark": "#95a5a6",
                        "--light-color": "#ecf0f1",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#2c3e50",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #2c3e50 0%, #95a5a6 100%)",
                        "--radial-glow": "rgba(44, 62, 80, 0.08)",
                        "--text-glow": "rgba(44, 62, 80, 0.2)",
                        "--shadow-color": "rgba(44, 62, 80, 0.3)",
                        "--shadow-hover": "rgba(44, 62, 80, 0.4)"
            },
            "2": {
                        "--primary-color": "#8b1538",
                        "--primary-dark": "#d4af37",
                        "--light-color": "#f8f0e3",
                        "--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)"
            },
            "3": {
                        "--primary-color": "#0f5132",
                        "--primary-dark": "#b8860b",
                        "--light-color": "#f5f5dc",
                        "--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)"
            },
            "4": {
                        "--primary-color": "#4a148c",
                        "--primary-dark": "#ffd700",
                        "--light-color": "#f3e5f5",
                        "--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)"
            },
            "5": {
                        "--primary-color": "#b87333",
                        "--primary-dark": "#2f4f4f",
                        "--light-color": "#fafafa",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#37220f",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #b87333 0%, #2f4f4f 100%)",
                        "--radial-glow": "rgba(184, 115, 51, 0.08)",
                        "--text-glow": "rgba(184, 115, 51, 0.2)",
                        "--shadow-color": "rgba(184, 115, 51, 0.3)",
                        "--shadow-hover": "rgba(184, 115, 51, 0.4)"
            },
            "6": {
                        "--primary-color": "#003f5c",
                        "--primary-dark": "#20b2aa",
                        "--light-color": "#e6f2ff",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#003f5c",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #003f5c 0%, #20b2aa 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)"
            },
            "7": {
                        "--primary-color": "#ff6b6b",
                        "--primary-dark": "#feca57",
                        "--light-color": "#fff5f5",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#4c2020",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #ff6b6b 0%, #feca57 100%)",
                        "--radial-glow": "rgba(255, 107, 107, 0.08)",
                        "--text-glow": "rgba(255, 107, 107, 0.2)",
                        "--shadow-color": "rgba(255, 107, 107, 0.3)",
                        "--shadow-hover": "rgba(255, 107, 107, 0.4)"
            },
            "8": {
                        "--primary-color": "#191970",
                        "--primary-dark": "#c0c0c0",
                        "--light-color": "#f0f4f8",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#191970",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #191970 0%, #c0c0c0 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)"
            },
            "9": {
                        "--primary-color": "#008b8b",
                        "--primary-dark": "#5f9ea0",
                        "--light-color": "#e0f2f1",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#008b8b",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #008b8b 0%, #5f9ea0 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)"
            },
            "10": {
                        "--primary-color": "#d4af37",
                        "--primary-dark": "#1a1a1a",
                        "--light-color": "#fffef2",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#3f3410",
                        "--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)"
            },
            "11": {
                        "--primary-color": "#8b0000",
                        "--primary-dark": "#000000",
                        "--light-color": "#fafafa",
                        "--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)"
            },
            "12": {
                        "--primary-color": "#87ae73",
                        "--primary-dark": "#c8b89b",
                        "--light-color": "#f9faf8",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#283422",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #87ae73 0%, #c8b89b 100%)",
                        "--radial-glow": "rgba(135, 174, 115, 0.08)",
                        "--text-glow": "rgba(135, 174, 115, 0.2)",
                        "--shadow-color": "rgba(135, 174, 115, 0.3)",
                        "--shadow-hover": "rgba(135, 174, 115, 0.4)"
            },
            "13": {
                        "--primary-color": "#b76e79",
                        "--primary-dark": "#2c2c2c",
                        "--light-color": "#fff5f7",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#362124",
                        "--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)"
            },
            "14": {
                        "--primary-color": "#5c6e7e",
                        "--primary-dark": "#36454f",
                        "--light-color": "#f8f9fa",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#1b2125",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #5c6e7e 0%, #36454f 100%)",
                        "--radial-glow": "rgba(92, 110, 126, 0.08)",
                        "--text-glow": "rgba(92, 110, 126, 0.2)",
                        "--shadow-color": "rgba(92, 110, 126, 0.3)",
                        "--shadow-hover": "rgba(92, 110, 126, 0.4)"
            },
            "15": {
                        "--primary-color": "#d4a574",
                        "--primary-dark": "#8b6914",
                        "--light-color": "#fff8f0",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#3f3122",
                        "--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)"
            },
            "16": {
                        "--primary-color": "#b19cd9",
                        "--primary-dark": "#6a5acd",
                        "--light-color": "#faf8ff",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#352e41",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #b19cd9 0%, #6a5acd 100%)",
                        "--radial-glow": "rgba(177, 156, 217, 0.08)",
                        "--text-glow": "rgba(177, 156, 217, 0.2)",
                        "--shadow-color": "rgba(177, 156, 217, 0.3)",
                        "--shadow-hover": "rgba(177, 156, 217, 0.4)"
            },
            "17": {
                        "--primary-color": "#2d5016",
                        "--primary-dark": "#4a7c2c",
                        "--light-color": "#f5f8f2",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#2d5016",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #2d5016 0%, #4a7c2c 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)"
            },
            "18": {
                        "--primary-color": "#726a5a",
                        "--primary-dark": "#c9a961",
                        "--light-color": "#fffef9",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#443f36",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #726a5a 0%, #c9a961 100%)",
                        "--radial-glow": "rgba(114, 106, 90, 0.08)",
                        "--text-glow": "rgba(114, 106, 90, 0.2)",
                        "--shadow-color": "rgba(114, 106, 90, 0.3)",
                        "--shadow-hover": "rgba(114, 106, 90, 0.4)"
            },
            "19": {
                        "--primary-color": "#0047ab",
                        "--primary-dark": "#4682b4",
                        "--light-color": "#f0f6ff",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#0047ab",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #0047ab 0%, #4682b4 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)"
            },
            "20": {
                        "--primary-color": "#8b4513",
                        "--primary-dark": "#a0522d",
                        "--light-color": "#fff9f0",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#8b4513",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #8b4513 0%, #a0522d 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)"
            },
            "21": {
                        "--primary-color": "#4c6c64",
                        "--primary-dark": "#2f6f5e",
                        "--light-color": "#f6fffc",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#2d403c",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #4c6c64 0%, #2f6f5e 100%)",
                        "--radial-glow": "rgba(76, 108, 100, 0.08)",
                        "--text-glow": "rgba(76, 108, 100, 0.2)",
                        "--shadow-color": "rgba(76, 108, 100, 0.3)",
                        "--shadow-hover": "rgba(76, 108, 100, 0.4)"
            },
            "22": {
                        "--primary-color": "#9b111e",
                        "--primary-dark": "#c41e3a",
                        "--light-color": "#fff5f5",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#9b111e",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #9b111e 0%, #c41e3a 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)"
            },
            "23": {
                        "--primary-color": "#800020",
                        "--primary-dark": "#a0263f",
                        "--light-color": "#fff9f5",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#800020",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #800020 0%, #a0263f 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)"
            },
            "24": {
                        "--primary-color": "#d4a017",
                        "--primary-dark": "#e9c46a",
                        "--light-color": "#fffaf0",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#3f3006",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #d4a017 0%, #e9c46a 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)"
            },
            "25": {
                        "--primary-color": "#708090",
                        "--primary-dark": "#2f4f4f",
                        "--light-color": "#f5f5f5",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#21262b",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #708090 0%, #2f4f4f 100%)",
                        "--radial-glow": "rgba(112, 128, 144, 0.08)",
                        "--text-glow": "rgba(112, 128, 144, 0.2)",
                        "--shadow-color": "rgba(112, 128, 144, 0.3)",
                        "--shadow-hover": "rgba(112, 128, 144, 0.4)"
            },
            "26": {
                        "--primary-color": "#ff7f50",
                        "--primary-dark": "#ffa07a",
                        "--light-color": "#fff5ee",
                        "--dark-color": "#1a1a1a",
                        "--text-on-white": "#4c2618",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a1a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #ff7f50 0%, #ffa07a 100%)",
                        "--radial-glow": "rgba(255, 127, 80, 0.08)",
                        "--text-glow": "rgba(255, 127, 80, 0.2)",
                        "--shadow-color": "rgba(255, 127, 80, 0.3)",
                        "--shadow-hover": "rgba(255, 127, 80, 0.4)"
            },
            "27": {
                        "--primary-color": "#0f0f1e",
                        "--primary-dark": "#00f2fe",
                        "--light-color": "#e0f7fa",
                        "--dark-color": "#1a1a2e",
                        "--text-on-white": "#0f0f1e",
                        "--gradient-bg": "linear-gradient(135deg, #1a1a2e 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)"
            },
            "28": {
                        "--primary-color": "#1a0f00",
                        "--primary-dark": "#ff9500",
                        "--light-color": "#ffe5b4",
                        "--dark-color": "#2d1e00",
                        "--text-on-white": "#1a0f00",
                        "--gradient-bg": "linear-gradient(135deg, #2d1e00 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #1a0f00 0%, #ff9500 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)"
            },
            "29": {
                        "--primary-color": "#000000",
                        "--primary-dark": "#1a1a1a",
                        "--light-color": "#f5f5f5",
                        "--dark-color": "#0a0a0a",
                        "--text-on-white": "#000000",
                        "--gradient-bg": "linear-gradient(135deg, #0a0a0a 0%, #161b22 100%)",
                        "--logo-gradient": "linear-gradient(135deg, #000000 0%, #1a1a1a 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)"
            }
        };



        let currentChartIndex = 15;
        const totalCharts = 29;

        // 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, 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: 18px; font-weight: 600; margin-bottom: 16px; opacity: 1; color: white; text-transform: uppercase; letter-spacing: 0.5px;">Choisissez une charte</div>
                <div style="font-size: 28px; font-weight: 700; margin-bottom: 8px; color: white;">${chartName}${chartSubtitle}</div>
                <div style="font-size: 18px; opacity: 0.9; color: white;">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);

{% endblock %}