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

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

{% block body %}
<style>
    /* On crée un conteneur qui ignore les règles de Bootstrap pour ses enfants */
    .force-flex-row {
        display: flex !important;
        flex-direction: row !important;
        /* Force la ligne */
        flex-wrap: nowrap !important;
        /* Empêche le retour à la ligne */
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 1400px;
        margin: 0 auto;
        gap: 20px;
    }

    /* On s'assure que les 3 blocs enfants ne font pas 100% de large (ce que Bootstrap fait souvent) */
    .bloc-gauche,
    .bloc-droite {
        flex: 1 !important;
        min-width: 0;
        /* Important pour éviter que le contenu ne pousse les murs */
    }

    .bloc-centre {
        flex: 0 0 320px !important;
        /* Taille fixe iPhone */
        width: 320px !important;
    }

    /* Style cosmétique pour voir les blocs */
    .glass-panel {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        padding: 20px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
    }

</style>


<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>
            <div class="modele-essentiel-layout">


            <!-- BLOC 3 : Mockup avec boutons de navigation -->
            <div id="charteMockupSection" style="
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            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; ">
                    <!-- Bouton Précédent -->
                    <button class="chart-nav-btn"
                        style="position: absolute; left: -70px; top: 20%; 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: -85px; top: 20%; 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 -->

                <!-- 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>Essentil 
                        </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>

                    {{ include('card/_form.html.twig') }}
                    <!-- 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>



            </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 %}