{# ═══════════════════════════════════════════════════════════════════════
   PARTIAL: _charte_mockup.html.twig
   Sélecteur de charte graphique avec mockup smartphone interactif
   
   Variables requises :
   - mockupId        : identifiant unique (ex: loop.index pour wizard, 'modify' pour modification)
   - packType        : 'essentiel', 'premium', 'forcevente', ou 'multi-X'
   - currentCharte   : numéro de charte actuelle (1-54)
   - mockupNom       : nom affiché dans le mockup (default: 'Prénom NOM')
   - mockupInitiales : initiales affichées (default: 'JD')
   - mockupFonction  : fonction affichée (default: 'VOTRE FONCTION')
   - mockupEntreprise: entreprise affichée (default: 'VOTRE ENTREPRISE')
   - mockupSlogan    : slogan affiché (default: 'Votre slogan inspirant')
   - formFieldName   : nom du champ hidden pour le formulaire (optionnel)
   ═══════════════════════════════════════════════════════════════════════ #}

{% set _packType = packType|default('premium') %}
{% set _mockupId = mockupId|default(1) %}
{% set _currentCharte = currentCharte|default(_packType == 'forcevente' ? 55 : 53) %}
{% set _nom = mockupNom|default('Prénom NOM') %}
{% set _initiales = mockupInitiales|default('JD') %}
{% set _fonction = mockupFonction|default('VOTRE FONCTION') %}
{% set _entreprise = mockupEntreprise|default('VOTRE ENTREPRISE') %}
{% set _slogan = mockupSlogan|default('Votre slogan inspirant') %}

{# Chartes par défaut selon le pack #}
{% if _packType == 'forcevente' %}
    {% set _defaultPrimary = '#2c3e50' %}
    {% set _defaultSecondary = '#C9A569' %}
    {% set _defaultName = 'Prestige Marine' %}
{% elseif _packType == 'essentiel' %}
    {% set _defaultPrimary = '#0F5132' %}
    {% set _defaultSecondary = '#B8860B' %}
    {% set _defaultName = 'Luxe Émeraude' %}
{% else %}
    {% set _defaultPrimary = '#2d1b34' %}
    {% set _defaultSecondary = '#9b59b6' %}
    {% set _defaultName = 'Lavender Elegance' %}
{% endif %}

<div class="charte-selector-container" style="background: linear-gradient(135deg, #1d1d1f 0%, #3a3a3c 100%); border-radius: 20px; padding: 30px; margin: 20px 0;">
    
    {# Titre #}
    <div style="text-align: center; margin-bottom: 20px;">
        <h3 style="color: white; font-size: 20px; font-weight: 600; margin: 0;">CHOISISSEZ UNE CHARTE</h3>
    </div>

    {# Infos charte sélectionnée #}
    <div class="charte-info" id="charteInfo-{{ _mockupId }}" style="text-align: center; color: white; margin-bottom: 20px;">
        <div style="font-size: 12px; font-weight: 600; color: #86868b; text-transform: uppercase; letter-spacing: 1px;">🎨 Charte sélectionnée</div>
        <div class="charte-name" style="font-size: 24px; font-weight: 700; color: white; margin: 8px 0;">{{ _defaultName }}</div>
        <div class="charte-number" style="font-size: 14px; color: #86868b;">Charte {{ _currentCharte }} / 55</div>
        <div style="display: flex; justify-content: center; gap: 15px; margin-top: 12px;">
            <div style="display: flex; align-items: center; gap: 6px; font-size: 12px; color: #aaa;">
                <div class="color-swatch-1" style="width: 20px; height: 20px; border-radius: 4px; border: 2px solid rgba(255,255,255,0.3); background: {{ _defaultPrimary }};"></div>
                <span class="color-label-1"></span>
            </div>
            <div style="display: flex; align-items: center; gap: 6px; font-size: 12px; color: #aaa;">
                <div class="color-swatch-2" style="width: 20px; height: 20px; border-radius: 4px; border: 2px solid rgba(255,255,255,0.3); background: {{ _defaultSecondary }};"></div>
                <span class="color-label-2"></span>
            </div>
        </div>
    </div>

    {# Navigation + Mockup #}
    <div style="display: flex; align-items: center; justify-content: center; gap: 20px;">
        
        <button type="button" class="charte-nav-btn" onclick="prevCharte('{{ _mockupId }}')" style="width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: white; font-size: 24px; cursor: pointer; transition: all 0.3s;">‹</button>

        <div class="charte-mockup-container" style="position: relative;">
            <div class="smartphone-mockup" style="width: 280px; height: 540px; background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%); border-radius: 40px; padding: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255,255,255,0.1);">
                <div class="smartphone-screen" style="width: 100%; height: 100%; background: #f5f5f7; border-radius: 30px; overflow: hidden;">
                    <div class="mockup-content" id="mockupContent-{{ _mockupId }}" style="height: 100%; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
                        
                        {% if _packType starts with 'multi-' %}
                        {# ═══ MOCKUP MULTI / PREMIUM ═══ #}
                        <div class="mockup-header" style="background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); padding: 20px 15px; text-align: center;">
                            <div style="font-size: 28px; margin-bottom: 5px;">📸</div>
                            <div style="font-size: 14px; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 1.5px;">{{ _entreprise }}</div>
                            <div style="font-size: 10px; color: rgba(255,255,255,0.85); margin-top: 4px; font-style: italic;">{{ _slogan }}</div>
                        </div>
                        <div style="background: white; text-align: center; padding: 18px 15px 15px; border-bottom: 1px solid #eee;">
                            <div class="mockup-avatar" style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;">
                                <span style="color: white; font-size: 22px; font-weight: 700;">{{ _initiales }}</span>
                            </div>
                            <div style="font-size: 18px; font-weight: 800; color: #1d1d1f; margin-bottom: 4px;">{{ _nom }}</div>
                            <div class="mockup-fonction" style="font-size: 11px; font-weight: 600; color: {{ _defaultSecondary }}; margin-bottom: 6px;">{{ _fonction }}</div>
                        </div>
                        <div style="flex: 1; padding: 10px; background: #f5f5f7; overflow-y: auto;">
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultSecondary }} 0%, {{ _defaultSecondary }}cc 100%); color: white; border-radius: 8px; font-size: 11px; font-weight: 600;">📞 05 XX XX XX XX</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultSecondary }} 0%, {{ _defaultSecondary }}cc 100%); color: white; border-radius: 8px; font-size: 11px; font-weight: 600;">📱 06 XX XX XX XX</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultSecondary }} 0%, {{ _defaultSecondary }}cc 100%); color: white; border-radius: 8px; font-size: 11px; font-weight: 600;">✉️ contact@email.fr</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultSecondary }} 0%, {{ _defaultSecondary }}cc 100%); color: white; border-radius: 8px; font-size: 11px; font-weight: 600;">➕ Ajouter à mes contacts</div>
                        </div>
                        <div class="mockup-footer" style="background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); padding: 10px; text-align: center;">
                            <div style="display: flex; justify-content: center; gap: 15px; margin-bottom: 6px;">
                                <div style="text-align: center;"><div style="font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.9);">12 ans</div><div style="font-size: 8px; color: rgba(255,255,255,0.7);">Expertise</div></div>
                                <div style="text-align: center;"><div style="font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.9);">500+</div><div style="font-size: 8px; color: rgba(255,255,255,0.7);">Séances</div></div>
                            </div>
                            <div style="font-size: 8px; color: rgba(255,255,255,0.7);">💜 NUM-ECARD</div>
                        </div>

                        {% elseif _packType == 'essentiel' %}
                        {# ═══ MOCKUP ESSENTIEL ═══ #}
                        <div class="mockup-header" style="background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); padding: 30px 15px 25px; text-align: center;">
                            <div style="font-size: 18px; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 2px;">{{ _entreprise }}</div>
                        </div>
                        <div style="background: white; text-align: center; padding: 25px 15px 20px; border-bottom: 1px solid #eee;">
                            <div class="mockup-avatar" style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;">
                                <span style="color: white; font-size: 22px; font-weight: 700;">{{ _initiales }}</span>
                            </div>
                            <div style="font-size: 20px; font-weight: 700; color: #1d1d1f; margin-bottom: 4px;">{{ _nom }}</div>
                            <div class="mockup-fonction" style="font-size: 12px; font-weight: 600; color: {{ _defaultPrimary }}; text-transform: uppercase; letter-spacing: 1px;">{{ _fonction }}</div>
                        </div>
                        <div style="flex: 1; padding: 10px; background: #f5f5f7; overflow-y: auto;">
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); color: white; border-radius: 20px; font-size: 11px; font-weight: 600;">📞 05 XX XX XX XX</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); color: white; border-radius: 20px; font-size: 11px; font-weight: 600;">📱 06 XX XX XX XX</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); color: white; border-radius: 20px; font-size: 11px; font-weight: 600;">✉️ contact@email.fr</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); color: white; border-radius: 20px; font-size: 11px; font-weight: 600;">📍 31000 Toulouse</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); color: white; border-radius: 20px; font-size: 11px; font-weight: 600;">➕ Ajouter à mes contacts</div>
                        </div>
                        {# Footer Essentiel - minimaliste #}
                        <div style="background: white; padding: 8px; border-top: 1px solid #eee;">
                            <div style="display: flex; justify-content: center; gap: 8px;">
                                <div style="flex: 1; padding: 6px; background: #34C759; color: white; border-radius: 6px; text-align: center; font-size: 9px; font-weight: 600;">📞 Appeler</div>
                                <div style="flex: 1; padding: 6px; background: #25D366; color: white; border-radius: 6px; text-align: center; font-size: 9px; font-weight: 600;">💬 WhatsApp</div>
                            </div>
                        </div>

                        {% elseif _packType == 'forcevente' %}
                        {# ═══ MOCKUP FORCE DE VENTE ═══ #}
                        <div class="mockup-header" style="background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, #1a252f 100%); padding: 20px 15px; text-align: center; position: relative;">
                            <div class="mockup-logo-text" style="font-size: 28px; font-weight: 900; color: {{ _defaultSecondary }}; letter-spacing: 3px; text-shadow: 0 2px 10px rgba(201,165,105,0.3);">LOGO</div>
                            <div style="font-size: 14px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 2px; margin-top: 5px;">{{ _entreprise }}</div>
                            <div style="font-size: 10px; color: rgba(255,255,255,0.8); margin-top: 4px; font-style: italic;">{{ _slogan }}</div>
                        </div>
                        <div style="background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%); text-align: center; padding: 20px 15px; border-bottom: 1px solid #e0e0e0;">
                            <div class="mockup-avatar-border" style="width: 80px; height: 80px; border-radius: 50%; border: 4px solid {{ _defaultSecondary }}; margin: 0 auto 12px; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, #1a252f 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.3);">
                                <span style="font-size: 28px; font-weight: bold; color: {{ _defaultSecondary }};">{{ _initiales }}</span>
                            </div>
                            <div style="font-size: 18px; font-weight: 700; color: {{ _defaultPrimary }}; margin-bottom: 4px;">{{ _nom }}</div>
                            <div class="mockup-fonction" style="font-size: 12px; font-weight: 600; color: {{ _defaultSecondary }}; margin-bottom: 8px;">{{ _fonction }}</div>
                            <div style="font-size: 10px; color: #666; font-style: italic; line-height: 1.4;">Spécialiste du marché de prestige</div>
                        </div>
                        <div style="flex: 1; padding: 10px; background: #f5f5f7; overflow-y: auto;">
                            <div class="mockup-btn" style="display: flex; align-items: center; padding: 10px 12px; margin-bottom: 6px; background: #f8f9fa; border-radius: 10px; font-size: 11px; border: 2px solid transparent;">
                                <svg class="mockup-icon" width="18" height="18" style="margin-right: 10px; color: {{ _defaultSecondary }};" fill="currentColor" viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328z"/></svg>
                                <div><div style="font-size: 9px; color: #999; text-transform: uppercase;">Téléphone</div><div style="font-weight: 600; color: #1d1d1f;">+33 6 12 34 56 78</div></div>
                            </div>
                            <div class="mockup-btn" style="display: flex; align-items: center; padding: 10px 12px; margin-bottom: 6px; background: #f8f9fa; border-radius: 10px; font-size: 11px;">
                                <svg class="mockup-icon" width="18" height="18" style="margin-right: 10px; color: {{ _defaultSecondary }};" fill="currentColor" viewBox="0 0 16 16"><path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4z"/></svg>
                                <div><div style="font-size: 9px; color: #999; text-transform: uppercase;">Email</div><div style="font-weight: 600; color: #1d1d1f;">contact@email.fr</div></div>
                            </div>
                            <div class="mockup-btn" style="display: flex; align-items: center; padding: 10px 12px; margin-bottom: 6px; background: #f8f9fa; border-radius: 10px; font-size: 11px;">
                                <svg class="mockup-icon" width="18" height="18" style="margin-right: 10px; color: {{ _defaultSecondary }};" fill="currentColor" viewBox="0 0 16 16"><path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/></svg>
                                <div><div style="font-size: 9px; color: #999; text-transform: uppercase;">Adresse</div><div style="font-weight: 600; color: #1d1d1f;">Paris</div></div>
                            </div>
                            <div class="mockup-cta-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; margin-top: 8px; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); color: white; border-radius: 10px; font-size: 11px; font-weight: 700;">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/><path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2z"/></svg>
                                Ajouter aux contacts
                            </div>
                            <div style="background: white; border: 2px solid {{ _defaultSecondary }}; border-radius: 10px; padding: 10px; margin-top: 6px;">
                                <div style="font-size: 10px; font-weight: 700; color: {{ _defaultSecondary }}; text-align: center; margin-bottom: 4px;">🤝 Recommandez-moi</div>
                                <div style="font-size: 8px; color: #666; text-align: center;">Partagez mon contact</div>
                            </div>
                        </div>
                        <div class="mockup-footer" style="background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); padding: 10px; text-align: center;">
                            <div style="display: flex; justify-content: center; gap: 15px; margin-bottom: 6px;">
                                <div style="text-align: center;"><div class="mockup-stat" style="font-size: 12px; font-weight: 800; color: {{ _defaultSecondary }};">15 ans</div><div style="font-size: 8px; color: rgba(255,255,255,0.7);">Expertise</div></div>
                                <div style="text-align: center;"><div class="mockup-stat" style="font-size: 12px; font-weight: 800; color: {{ _defaultSecondary }};">500+</div><div style="font-size: 8px; color: rgba(255,255,255,0.7);">Clients</div></div>
                                <div style="text-align: center;"><div class="mockup-stat" style="font-size: 12px; font-weight: 800; color: {{ _defaultSecondary }};">100%</div><div style="font-size: 8px; color: rgba(255,255,255,0.7);">Satisfaits</div></div>
                            </div>
                            <div style="font-size: 8px; color: rgba(255,255,255,0.7);">✨ NUM-ECARD</div>
                        </div>

                        {% else %}
                        {# ═══ MOCKUP PREMIUM ═══ #}
                        <div class="mockup-header" style="background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); padding: 20px 15px; text-align: center;">
                            <div style="font-size: 28px; margin-bottom: 5px;">📸</div>
                            <div style="font-size: 14px; font-weight: 800; color: white; text-transform: uppercase; letter-spacing: 1.5px;">{{ _entreprise }}</div>
                            <div style="font-size: 10px; color: rgba(255,255,255,0.85); margin-top: 4px; font-style: italic;">{{ _slogan }}</div>
                        </div>
                        <div style="background: white; text-align: center; padding: 18px 15px 15px; border-bottom: 1px solid #eee;">
                            <div class="mockup-avatar" style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center;">
                                <span style="color: white; font-size: 22px; font-weight: 700;">{{ _initiales }}</span>
                            </div>
                            <div style="font-size: 18px; font-weight: 800; color: #1d1d1f; margin-bottom: 4px;">{{ _nom }}</div>
                            <div class="mockup-fonction" style="font-size: 11px; font-weight: 600; color: {{ _defaultSecondary }}; margin-bottom: 6px;">{{ _fonction }}</div>
                            <div style="font-size: 9px; color: #666; font-style: italic;">« Capturer l'instant, révéler l'émotion »</div>
                        </div>
                        <div style="flex: 1; padding: 10px; background: #f5f5f7; overflow-y: auto;">
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultSecondary }} 0%, {{ _defaultSecondary }}cc 100%); color: white; border-radius: 8px; font-size: 11px; font-weight: 600;">📞 05 62 34 56 78</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultSecondary }} 0%, {{ _defaultSecondary }}cc 100%); color: white; border-radius: 8px; font-size: 11px; font-weight: 600;">📱 06 89 01 23 45</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultSecondary }} 0%, {{ _defaultSecondary }}cc 100%); color: white; border-radius: 8px; font-size: 11px; font-weight: 600;">✉️ contact@photo.fr</div>
                            <div class="mockup-btn" style="display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; margin-bottom: 6px; background: linear-gradient(135deg, {{ _defaultSecondary }} 0%, {{ _defaultSecondary }}cc 100%); color: white; border-radius: 8px; font-size: 11px; font-weight: 600;">➕ Ajouter à mes contacts</div>
                            <div style="background: white; border-radius: 8px; padding: 10px; margin-top: 8px;">
                                <div style="font-size: 10px; font-weight: 700; color: {{ _defaultSecondary }}; text-align: center; margin-bottom: 8px;">✨ Spécialités</div>
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px;">
                                    <div style="background: white; border: 1px solid rgba(155, 89, 182, 0.3); border-radius: 15px; padding: 6px 8px; font-size: 9px; text-align: center; color: {{ _defaultSecondary }};">💍 Mariages</div>
                                    <div style="background: white; border: 1px solid rgba(155, 89, 182, 0.3); border-radius: 15px; padding: 6px 8px; font-size: 9px; text-align: center; color: {{ _defaultSecondary }};">👨‍👩‍👧‍👦 Portraits</div>
                                </div>
                            </div>
                        </div>
                        <div class="mockup-footer" style="background: linear-gradient(135deg, {{ _defaultPrimary }} 0%, {{ _defaultSecondary }} 100%); padding: 10px; text-align: center;">
                            <div style="display: flex; justify-content: center; gap: 15px; margin-bottom: 6px;">
                                <div style="text-align: center;"><div style="font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.9);">12 ans</div><div style="font-size: 8px; color: rgba(255,255,255,0.7);">Expertise</div></div>
                                <div style="text-align: center;"><div style="font-size: 12px; font-weight: 800; color: rgba(255,255,255,0.9);">500+</div><div style="font-size: 8px; color: rgba(255,255,255,0.7);">Séances</div></div>
                            </div>
                            <div style="font-size: 8px; color: rgba(255,255,255,0.7);">💜 NUM-ECARD</div>
                        </div>
                        {% endif %}

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

        <button type="button" class="charte-nav-btn" onclick="nextCharte('{{ _mockupId }}')" style="width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: white; font-size: 24px; cursor: pointer; transition: all 0.3s;">›</button>
    </div>

    {# Dropdown rapide #}
    <div style="text-align: center; margin-top: 25px;">
        <select id="charteSelect-{{ _mockupId }}" onchange="selectCharte('{{ _mockupId }}', parseInt(this.value))" style="padding: 12px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; font-size: 15px; min-width: 280px; cursor: pointer;">
            {# Rempli par JS au chargement #}
        </select>
    </div>
</div>