{# 
    Template de génération de carte de visite digitale PWA
    Génère un fichier HTML autonome (standalone) avec CSS + JS inline
    Variables : b (Beneficiaire), theme (array CSS vars), cardType (essentiel|premium|forcevente), slug
#}
{% set fullName = (b.prenom ?? '') ~ ' ' ~ (b.nom ?? '') %}
{% set fullName = fullName|trim %}
{% set entreprise = b.entreprise ?? '' %}
{% set fonction = b.fonction ?? '' %}
{% set mobile = b.mobile ?? '' %}
{% set fixe = b.fixe ?? '' %}
{% set email = b.email ?? '' %}
{% set siteWeb = b.siteWeb ?? '' %}
{% set adresse = b.adresse ?? '' %}
{% set slogan = b.slogan ?? '' %}
{% set linkedin = b.linkedin ?? '' %}
{% set facebook = b.facebook ?? '' %}
{% set youtube = b.youtube ?? '' %}
{% set tiktok = b.tiktok ?? '' %}
{% set insta = b.insta ?? '' %}
{% set xTwitter = b.x ?? '' %}
{% set service1 = b.service1 ?? '' %}
{% set service2 = b.service2 ?? '' %}
{% set service3 = b.service3 ?? '' %}
{% set service4 = b.service4 ?? '' %}
{% set hasServices = service1 or service2 or service3 or service4 %}
{% set hasSocials = linkedin or facebook or youtube or tiktok or insta or xTwitter %}
{% set isPremium = cardType in ['premium', 'forcevente'] %}
{% set isForceVente = cardType == 'forcevente' %}
{# vCard data URL #}
{% set vcardData = 'BEGIN:VCARD\nVERSION:3.0\nN:' ~ (b.nom ?? '') ~ ';' ~ (b.prenom ?? '') ~ ';;;\nFN:' ~ fullName ~ '\n' %}
{% if entreprise %}{% set vcardData = vcardData ~ 'ORG:' ~ entreprise ~ '\n' %}{% endif %}
{% if fonction %}{% set vcardData = vcardData ~ 'TITLE:' ~ fonction ~ '\n' %}{% endif %}
{% if mobile %}{% set vcardData = vcardData ~ 'TEL;TYPE=CELL,VOICE:' ~ mobile ~ '\n' %}{% endif %}
{% if fixe %}{% set vcardData = vcardData ~ 'TEL;TYPE=WORK,VOICE:' ~ fixe ~ '\n' %}{% endif %}
{% if email %}{% set vcardData = vcardData ~ 'EMAIL;TYPE=WORK:' ~ email ~ '\n' %}{% endif %}
{% if siteWeb %}{% set vcardData = vcardData ~ 'URL:' ~ siteWeb ~ '\n' %}{% endif %}
{% if adresse %}{% set vcardData = vcardData ~ 'ADR;TYPE=WORK:;;' ~ adresse ~ '\n' %}{% endif %}
{% set vcardData = vcardData ~ 'END:VCARD' %}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="./manifest.json">
    <meta name="theme-color" content="{{ theme['--primary-color'] }}">
    {# ═══ Apple iOS PWA ═══ #}
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="{{ fullName }}">
    <link rel="apple-touch-icon" href="./icons/icon-192x192.png">
    <link rel="apple-touch-icon" sizes="512x512" href="./icons/icon-512x512.png">
    <title>{{ fullName }} - {{ entreprise ?: 'Num-Ecard' }}</title>
    <meta name="description" content="{{ fullName }} - {{ fonction }}. Carte de visite digitale professionnelle.">
    <meta property="og:title" content="{{ fullName }} - {{ entreprise ?: 'Num-Ecard' }}">
    <meta property="og:description" content="{{ fonction }} - Carte de visite digitale">
    <meta property="og:type" content="profile">
    <meta property="og:image" content="./icons/icon-512x512.png">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{ fullName }}">
    <meta name="twitter:description" content="{{ fonction }}">
    <meta name="twitter:image" content="./icons/icon-512x512.png">
    <style>
        :root {
            --primary-color: {{ theme['--primary-color'] }};
            --primary-dark: {{ theme['--primary-dark'] }};
            --light-color: {{ theme['--light-color'] }};
            --dark-color: {{ theme['--dark-color'] }};
            --text-on-white: {{ theme['--text-on-white'] }};
            --accent-color: {{ theme['--accent-color']|default(theme['--primary-color']) }};
            --gradient-bg: {{ theme['--gradient-bg'] }};
            --logo-gradient: {{ theme['--logo-gradient'] }};
            --shadow-color: {{ theme['--shadow-color'] }};
            --shadow-hover: {{ theme['--shadow-hover'] }};
            --fv-header-gradient: {{ theme['--fv-header-gradient']|default('linear-gradient(135deg, #2c5364 0%, #203a43 50%, #0f2027 100%)') }};
            --fv-header-dark: {{ theme['--fv-header-dark']|default('#0f2027') }};
        }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            margin: 0; padding: 0;
            background: var(--gradient-bg);
            color: #333;
        }
        .vcard-container {
            max-width: 400px; margin: 20px auto;
            background: white; border-radius: 16px;
            box-shadow: 0 20px 60px var(--shadow-color), 0 0 80px var(--shadow-hover);
            overflow: hidden;
        }
        /* HEADER */
        .header {
            background: var(--logo-gradient);
            color: white; padding: 15px 20px 15px;
            text-align: center; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
        }
        .logo { font-size: 40px; font-weight: bold; margin: 0 auto 5px; letter-spacing: 2px; }
        .logo span { background: var(--logo-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .logo img { max-width: 120px; max-height: 80px; object-fit: contain; border-radius: 8px; }
        .company-name { font-size: 24px; font-weight: bold; letter-spacing: 2px; color: white; }
        .tagline { font-size: 13px; margin-top: 3px; opacity: 0.9; color: var(--light-color); }
        /* PROFILE */
        .profile { padding: 18px 20px 8px; text-align: center; }
        .name { font-size: 26px; font-weight: 700; color: var(--text-on-white); margin-bottom: 2px; }
        .position { font-size: 15px; color: #666; font-weight: 500; margin-bottom: 4px; }
        .slogan { font-size: 13px; color: #999; font-style: italic; margin-bottom: 12px; }
        /* CONTACT BUTTONS */
        .contact-buttons { padding: 0 20px 20px; }
        .contact-buttons a, .contact-buttons button {
            display: flex; align-items: center; justify-content: center;
            background: var(--logo-gradient);
            color: white; padding: 10px 15px; margin: 8px 0;
            border-radius: 8px; text-decoration: none; font-size: 15px;
            font-weight: 600; transition: all 0.3s ease; border: none;
            width: 100%; cursor: pointer;
        }
        .contact-buttons a:hover, .contact-buttons button:hover {
            transform: translateX(5px);
            box-shadow: 0 5px 15px var(--shadow-color);
        }
        .contact-buttons svg { width: 18px; height: 18px; margin-right: 10px; fill: white; }
        .btn-vcard { background: var(--dark-color) !important; }

        /* ===== FORCE DE VENTE - Header bleu fixe + contacts label/valeur ===== */
        .fv-header {
            background: var(--fv-header-gradient) !important;
            color: white; padding: 26px 20px 22px;
            text-align: center; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
        }
        .fv-header .logo span {
            -webkit-text-fill-color: var(--accent-color) !important;
            color: var(--accent-color) !important;
        }
        .fv-header .company-name { color: white; }
        .fv-header .tagline { color: rgba(255,255,255,0.7); margin-bottom: 20px; }

        /* Profil FV avec avatar qui chevauche le header */
        .fv-profile {
            background: linear-gradient(to bottom, #f0f2f5, #fff);
            text-align: center; padding: 22px 15px 18px;
            border-bottom: 1px solid #e8e8e8;
        }
        .fv-avatar {
            width: 72px; height: 72px; border-radius: 50%;
            border: 3px solid var(--accent-color);
            margin: -50px auto 12px;
            background: var(--fv-header-gradient);
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; font-weight: 700; color: white;
            box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        }
        .fv-profile .name { font-size: 20px; font-weight: 700; color: #1d1d1f; margin-bottom: 4px; }
        .fv-profile .position { font-size: 12px; font-weight: 600; color: var(--accent-color); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
        .fv-profile .slogan { font-size: 11px; color: #888; font-style: italic; margin-top: 6px; padding: 0 10px; }

        /* Contacts en format label/valeur */
        .fv-contacts { padding: 16px 18px 8px; }
        .fv-contact-item {
            display: flex; align-items: center; padding: 13px 14px;
            margin-bottom: 10px; background: #f8f9fa; border-radius: 12px;
            text-decoration: none; color: inherit;
            transition: all 0.3s ease; border: 2px solid transparent;
        }
        .fv-contact-item:hover { background: #e8f4ff; transform: translateX(5px); }
        .fv-contact-icon {
            width: 40px; height: 40px; border-radius: 10px; margin-right: 14px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .fv-contact-icon svg { width: 20px; height: 20px; }
        .fv-contact-label {
            font-size: 10px; color: #999; text-transform: uppercase;
            letter-spacing: 0.5px; margin-bottom: 2px; font-weight: 600;
        }
        .fv-contact-value { font-size: 14px; font-weight: 600; color: #1d1d1f; }

        /* Bouton Ajouter aux contacts FV */
        .fv-vcard-btn {
            display: flex; align-items: center; justify-content: center; gap: 8px;
            background: var(--fv-header-gradient);
            color: white; padding: 14px; margin: 4px 18px 16px;
            border-radius: 12px; text-decoration: none; font-size: 14px;
            font-weight: 700; transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(44,83,100,0.3);
        }
        .fv-vcard-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(44,83,100,0.4); }
        .fv-vcard-btn svg { width: 18px; height: 18px; fill: none; stroke: white; stroke-width: 2; }
        /* SERVICES */
        .services { padding: 12px 20px 15px; background-color: #f5f5f5; text-align: center; }
        .services h3 { color: var(--text-on-white); font-size: 17px; margin-bottom: 8px; }
        .pills-container { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 300px; margin: 0 auto; }
        .pill {
            background-color: white; color: var(--text-on-white);
            padding: 7px 12px; border-radius: 20px; font-size: 13px;
            font-weight: 500; border: 1px solid var(--primary-color);
        }
        /* STATS (Premium) */
        .stats-section { display: flex; justify-content: center; gap: 15px; padding: 15px 20px; background: var(--light-color); }
        .stat-box { text-align: center; padding: 10px 15px; background: white; border-radius: 12px; min-width: 80px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .stat-number { font-size: 22px; font-weight: 700; color: var(--text-on-white); }
        .stat-label { font-size: 11px; color: #666; margin-top: 2px; }
        /* SOCIAL LINKS */
        .social-section { padding: 15px 20px; text-align: center; }
        .social-section h3 { color: var(--text-on-white); font-size: 16px; margin-bottom: 10px; }
        .social-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
        .social-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 44px; height: 44px; border-radius: 12px;
            transition: all 0.3s ease; text-decoration: none;
        }
        .social-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
        .social-btn svg { width: 22px; height: 22px; fill: white; }
        .social-linkedin { background: #0077B5; } .social-facebook { background: #3b5998; }
        .social-youtube { background: #FF0000; } .social-tiktok { background: #000; }
        .social-insta { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
        .social-x { background: #000; }
        /* CTA NUM-ECARD */
        .cta-numecard {
            margin: 16px 20px; padding: 22px 20px;
            background: #fffdf5; border: 1.5px dashed #e5c87a;
            border-radius: 14px; text-align: center;
        }
        .cta-numecard .cta-rocket { font-size: 22px; margin-bottom: 6px; }
        .cta-numecard h3 { color: #1a1a1a; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
        .cta-numecard p { color: #666; font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
        .cta-numecard .cta-link {
            display: inline-flex; align-items: center; gap: 6px;
            background: linear-gradient(135deg, #c8902e, #9a6a1e);
            color: #fff; font-size: 14px; font-weight: 700;
            padding: 11px 24px; border-radius: 10px;
            text-decoration: none;
            box-shadow: 0 3px 12px rgba(200,144,46,0.3);
            transition: all 0.3s ease;
        }
        .cta-numecard .cta-link:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(200,144,46,0.4); }

        /* Recommandation */
        .referral-section { background: white; border-radius: 16px; margin: 20px 20px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.06); border: 2px solid var(--accent-color); }
        .referral-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; }
        .referral-header h3 { font-size: 16px; color: var(--text-on-white); margin: 0; }
        .referral-toggle { font-size: 14px; color: #86868b; transition: transform 0.3s; }
        .referral-toggle.open { transform: rotate(180deg); }
        .referral-form { padding: 0 20px 20px; }
        .referral-subtitle { font-size: 13px; color: #86868b; margin-bottom: 16px; }
        .ref-field { margin-bottom: 14px; }
        .ref-field label { display: block; font-size: 11px; font-weight: 700; color: #1d1d1f; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
        .ref-field input, .ref-field textarea { width: 100%; padding: 12px 14px; border: 1px solid #d1d1d6; border-radius: 10px; font-size: 14px; color: #1d1d1f; background: #f9f9fb; box-sizing: border-box; font-family: inherit; transition: border-color 0.2s; }
        .ref-field input:focus, .ref-field textarea:focus { outline: none; border-color: var(--accent-color); }
        .ref-field textarea { resize: vertical; min-height: 70px; }
        .ref-submit-btn { width: 100%; padding: 14px; background: var(--accent-color); color: white; border: none; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.2s; }
        .ref-submit-btn:hover { opacity: 0.9; }
        .ref-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        /* SHARE */
        .share-section {
            padding: 18px 20px; background: var(--logo-gradient);
            text-align: center; margin: 12px 20px; border-radius: 12px;
        }
        .share-section h3 { color: white; font-size: 17px; margin-bottom: 5px; }
        .share-subtitle { color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 15px; font-style: italic; }
        .share-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 15px; }
        .share-btn {
            display: flex; align-items: center; justify-content: center;
            padding: 12px 15px; border-radius: 8px; text-decoration: none;
            font-size: 14px; font-weight: 600; transition: all 0.3s ease;
            cursor: pointer; border: none; color: white;
        }
        .share-btn svg { width: 20px; height: 20px; margin-right: 8px; fill: currentColor; }
        .share-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
        .share-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); }
        .share-email { background: linear-gradient(135deg, #EA4335, #C5221F); }
        .share-sms { background: linear-gradient(135deg, #0088cc, #006699); }
        .share-facebook { background: linear-gradient(135deg, #3b5998, #2d4373); }
        .share-copy { background: var(--logo-gradient); grid-column: span 2; font-weight: 700; }
        .share-native { background: linear-gradient(135deg, #667eea, #764ba2); grid-column: span 2; display: none; }
        /* WEBSITE */
        .website-links {
            padding: 18px 20px 20px; text-align: center;
            background: linear-gradient(135deg, #f8f9fa, #fff);
            border-top: 3px solid var(--primary-color);
        }
        .website-links h3 { color: var(--text-on-white); font-size: 17px; margin-bottom: 5px; }
        .website-subtitle { color: #666; font-size: 12px; margin-bottom: 12px; font-style: italic; }
        .website-links a {
            display: flex; align-items: center; justify-content: center;
            background: var(--logo-gradient); color: white; text-decoration: none;
            font-size: 14px; margin: 10px 0; font-weight: 600;
            padding: 12px 20px; border-radius: 10px;
            box-shadow: 0 3px 10px var(--shadow-color);
            transition: all 0.3s ease; position: relative;
        }
        .website-links a:hover { transform: translateY(-2px); box-shadow: 0 5px 15px var(--shadow-hover); }
        .website-links a::after { content: '→'; position: absolute; right: 20px; font-size: 20px; }
        .website-links svg { width: 16px; height: 16px; margin-right: 8px; fill: currentColor; }
        /* NOTIFICATION */
        .copy-notification {
            position: fixed; bottom: 20px; left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--dark-color); color: var(--primary-dark);
            padding: 12px 24px; border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            opacity: 0; transition: all 0.3s ease; z-index: 1000; font-weight: 600;
        }
        .copy-notification.show { opacity: 1; transform: translateX(-50%) translateY(0); }
        /* PWA INSTALL */
        .install-section {
            position: fixed; top: 0; left: 0; right: 0;
            background: var(--gradient-bg); color: white;
            padding: 15px 20px; z-index: 1000;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .install-banner { display: flex; align-items: center; justify-content: space-between; max-width: 400px; margin: 0 auto; position: relative; }
        .install-banner h3 { margin: 0 0 5px; font-size: 16px; color: var(--primary-dark); }
        .install-banner p { margin: 0; font-size: 12px; opacity: 0.9; }
        .install-banner > div { flex: 1; }
        .install-button {
            background: var(--logo-gradient); color: white; border: none;
            padding: 10px 15px; border-radius: 8px; font-weight: 600;
            cursor: pointer; display: flex; align-items: center; gap: 8px;
        }
        .install-button svg { width: 18px; height: 18px; }
        .close-button { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 0; margin-left: 10px; opacity: 0.7; }
        .close-button:hover { opacity: 1; }
        .ios-install-hint {
            background: rgba(255,255,255,0.1); border: 1px solid var(--primary-dark);
            border-radius: 8px; padding: 12px 15px; margin: 10px 20px;
            text-align: center; font-size: 13px; color: var(--primary-dark);
        }
        .ios-install-hint strong { color: white; }
        .highlight-ios { color: var(--text-on-white) !important; font-weight: 700; padding: 2px 4px; border-radius: 4px; }
        /* UPDATE BANNER */
        .update-banner {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: #2c3e50; color: white; padding: 15px 20px;
            text-align: center; z-index: 2000;
            border-top: 3px solid var(--primary-color);
            display: flex; justify-content: space-between; align-items: center;
        }
        .update-banner button {
            margin-left: 10px; padding: 8px 16px; border: none; border-radius: 6px;
            background: var(--primary-color); color: white; font-weight: 700; cursor: pointer;
        }
        /* ADDRESS */
        .address-section { padding: 10px 20px 15px; text-align: center; }
        .address-section p { color: #666; font-size: 13px; }
        .address-section a { color: var(--text-on-white); text-decoration: none; font-weight: 500; }
        /* RESPONSIVE */
        @media (max-width: 1024px) {
            /* Fond blanc, plus de gradient visible */
            body { background: white; }
            /* Carte pleine largeur */
            .vcard-container {
                max-width: 100%;
                margin: 0;
                border-radius: 0;
                box-shadow: none;
            }
            /* Contenus centrés et limités en largeur (tablette) */
            .profile,
            .contact-buttons,
            .services,
            .stats-section,
            .social-section,
            .address-section,
            .cta-numecard,
            .share-section,
            .website-links {
                max-width: 500px;
                margin-left: auto;
                margin-right: auto;
            }
            /* CTA et Share gardent un espacement vertical */
            .cta-numecard { margin-top: 16px; margin-bottom: 16px; }
            .share-section { margin-top: 12px; margin-bottom: 12px; }
        }
        @media (max-width: 480px) {
            .share-native { display: flex !important; }
            /* Mobile : contenus pleine largeur */
            .profile,
            .contact-buttons,
            .services,
            .stats-section,
            .social-section,
            .address-section,
            .cta-numecard,
            .share-section,
            .website-links {
                max-width: 100%;
            }
            /* Bord à bord */
            .cta-numecard { margin: 16px 12px; }
            .share-section { margin: 0; border-radius: 0; }
            #mon-actu-btn-wrap { margin: 0; }
        }
    </style>
</head>
<body>
    <div class="vcard-container">

        {# ===== HEADER ===== #}
        <div class="{{ isForceVente ? 'header fv-header' : 'header' }}">
            {% if logoFile is defined and logoFile %}
            <div class="logo"><img src="./{{ logoFile }}" alt="{{ entreprise ?: fullName }}"></div>
            {% else %}
            {# Pas de logo → initiales nom/prénom dans un cercle aux couleurs du thème #}
            {% set initialesNP = (b.prenom ?? '')|slice(0,1)|upper ~ (b.nom ?? '')|slice(0,1)|upper %}
            <div class="logo">
                <span style="display: inline-flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); color: white; font-size: 26px; font-weight: 800; letter-spacing: 1px; border: 3px solid rgba(255,255,255,0.25); box-shadow: 0 4px 15px rgba(0,0,0,0.2); -webkit-text-fill-color: white; background-clip: unset; -webkit-background-clip: unset;">{{ initialesNP }}</span>
            </div>
            {% endif %}
            <div class="company-name">{{ entreprise ?: 'NUM-ECARD' }}</div>
            {% if slogan %}
            <div class="tagline">{{ slogan }}</div>
            {% elseif entreprise %}
            {# Pas de slogan mais entreprise → initiales entreprise #}
            {% set mots = entreprise|split(' ') %}
            {% set initialesE = '' %}
            {% for mot in mots %}
                {% if mot|length > 0 %}
                    {% set initialesE = initialesE ~ mot|slice(0,1)|upper %}
                {% endif %}
            {% endfor %}
            <div class="tagline">{{ initialesE }}</div>
            {% else %}
            <div class="tagline">Votre carte de visite qui travaille 24h/24</div>
            {% endif %}
        </div>

        {% if isForceVente %}
        {# ===== PROFIL FORCE DE VENTE (label/valeur) ===== #}
        <div class="fv-profile">
            {% set initialesNP = (b.prenom ?? '')|slice(0,1)|upper ~ (b.nom ?? '')|slice(0,1)|upper %}
            <div class="fv-avatar">{{ initialesNP }}</div>
            <div class="name">{{ fullName }}</div>
            {% if fonction %}<div class="position">{{ fonction }}</div>{% endif %}
            {% if slogan %}<div class="slogan">{{ slogan }}</div>{% endif %}
        </div>

        {# Contacts en format label/valeur #}
        <div class="fv-contacts">
            {% if mobile %}
            <a href="tel:{{ mobile|replace({' ': '', '.': '', '-': ''}) }}" class="fv-contact-item">
                <div class="fv-contact-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="var(--fv-header-dark)" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                </div>
                <div>
                    <div class="fv-contact-label">Téléphone</div>
                    <div class="fv-contact-value">{{ mobile }}</div>
                </div>
            </a>
            {% endif %}

            {% if fixe %}
            <a href="tel:{{ fixe|replace({' ': '', '.': '', '-': ''}) }}" class="fv-contact-item">
                <div class="fv-contact-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="var(--fv-header-dark)" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                </div>
                <div>
                    <div class="fv-contact-label">Fixe</div>
                    <div class="fv-contact-value">{{ fixe }}</div>
                </div>
            </a>
            {% endif %}

            {% if email %}
            <a href="mailto:{{ email }}" class="fv-contact-item">
                <div class="fv-contact-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="var(--accent-color)" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                </div>
                <div>
                    <div class="fv-contact-label">Email</div>
                    <div class="fv-contact-value">{{ email }}</div>
                </div>
            </a>
            {% endif %}

            {% if adresse %}
            <a href="https://maps.google.com/?q={{ adresse|url_encode }}" target="_blank" class="fv-contact-item">
                <div class="fv-contact-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                </div>
                <div>
                    <div class="fv-contact-label">Adresse</div>
                    <div class="fv-contact-value">{{ adresse }}</div>
                </div>
            </a>
            {% endif %}
        </div>

        {# Bouton Ajouter aux contacts FV #}
        <a href="data:text/vcard;charset=utf-8,{{ vcardData|url_encode }}" download="{{ fullName|replace({' ': '_'}) }}.vcf" class="fv-vcard-btn">
            <svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Ajouter aux contacts
        </a>

        {% else %}
        {# ===== PROFIL ESSENTIEL / PREMIUM (boutons pleine largeur — inchangé) ===== #}
        <div class="profile">
            <div class="name">{{ fullName }}</div>
            {% if fonction %}<div class="position">{{ fonction }}</div>{% endif %}
            {% if slogan %}<div class="slogan">{{ slogan }}</div>{% endif %}

            <div class="contact-buttons">
                {% if mobile %}
                <a href="tel:{{ mobile|replace({' ': '', '.': '', '-': ''}) }}">
                    <svg viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    Mobile ({{ mobile }})
                </a>
                {% endif %}

                {% if fixe %}
                <a href="tel:{{ fixe|replace({' ': '', '.': '', '-': ''}) }}">
                    <svg viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                    Fixe ({{ fixe }})
                </a>
                {% endif %}

                {% if email %}
                <a href="mailto:{{ email }}">
                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                    {{ email }}
                </a>
                {% endif %}

                {# vCard download #}
                <a href="data:text/vcard;charset=utf-8,{{ vcardData|url_encode }}" download="{{ fullName|replace({' ': '_'}) }}.vcf" class="btn-vcard">
                    <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                    Ajouter aux contacts
                </a>
            </div>
        </div>
        {% endif %}

        {# ===== STATS (Premium / Force de Vente) ===== #}
        {% if isPremium and (b.expertise is defined and b.expertise or b.seances is defined and b.seances or b.satisfaction is defined and b.satisfaction) %}
        <div class="stats-section">
            {% if b.expertise is defined and b.expertise %}
            <div class="stat-box">
                <div class="stat-number">{{ b.expertise }}</div>
                <div class="stat-label">ans d'exp.</div>
            </div>
            {% endif %}
            {% if b.seances is defined and b.seances %}
            <div class="stat-box">
                <div class="stat-number">{{ b.seances }}</div>
                <div class="stat-label">réalisations</div>
            </div>
            {% endif %}
            {% if b.satisfaction is defined and b.satisfaction %}
            <div class="stat-box">
                <div class="stat-number">{{ b.satisfaction }}%</div>
                <div class="stat-label">satisfaction</div>
            </div>
            {% endif %}
        </div>
        {% endif %}

        {# ===== SERVICES ===== #}
        {% if hasServices %}
        <div class="services">
            <h3>{{ isPremium ? 'Nos services' : 'Votre carte digitale professionnelle' }}</h3>
            <div class="pills-container">
                {% if service1 %}<span class="pill">{{ service1 }}</span>{% endif %}
                {% if service2 %}<span class="pill">{{ service2 }}</span>{% endif %}
                {% if service3 %}<span class="pill">{{ service3 }}</span>{% endif %}
                {% if service4 %}<span class="pill">{{ service4 }}</span>{% endif %}
            </div>
        </div>
        {% elseif not isPremium %}
        <div class="services">
            <h3>Votre carte digitale professionnelle</h3>
            <div class="pills-container">
                <span class="pill">Innovante</span>
                <span class="pill">Permanente</span>
                <span class="pill">Écologique</span>
                <span class="pill">Illimitée</span>
            </div>
        </div>
        {% endif %}

        {# ===== ADRESSE ===== #}
        {% if adresse and not isForceVente %}
        <div class="address-section">
            <p>📍 <a href="https://maps.google.com/?q={{ adresse|url_encode }}" target="_blank">{{ adresse }}</a></p>
        </div>
        {% endif %}

        {# ===== RÉSEAUX SOCIAUX ===== #}
        {% if hasSocials %}
        <div class="social-section">
            <h3>🔗 Retrouvez-moi</h3>
            <div class="social-grid">
                {% if linkedin %}
                <a href="{{ linkedin }}" target="_blank" class="social-btn social-linkedin" title="LinkedIn">
                    <svg viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                </a>
                {% endif %}
                {% if facebook %}
                <a href="{{ facebook }}" target="_blank" class="social-btn social-facebook" title="Facebook">
                    <svg viewBox="0 0 24 24"><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>
                </a>
                {% endif %}
                {% if insta %}
                <a href="{{ insta }}" target="_blank" class="social-btn social-insta" title="Instagram">
                    <svg viewBox="0 0 24 24"><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-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.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.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                </a>
                {% endif %}
                {% if youtube %}
                <a href="{{ youtube }}" target="_blank" class="social-btn social-youtube" title="YouTube">
                    <svg viewBox="0 0 24 24"><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>
                </a>
                {% endif %}
                {% if tiktok %}
                <a href="{{ tiktok }}" target="_blank" class="social-btn social-tiktok" title="TikTok">
                    <svg viewBox="0 0 24 24"><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>
                </a>
                {% endif %}
                {% if xTwitter %}
                <a href="{{ xTwitter }}" target="_blank" class="social-btn social-x" title="X (Twitter)">
                    <svg viewBox="0 0 24 24"><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>
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}

        {# ===== LIEN PERSONNALISÉ (Premium) ===== #}
        {% if isPremium and b.lienPersonnalise is defined and b.lienPersonnalise %}
        <div class="website-links">
            <h3>🔗 Mon lien</h3>
            <a href="{{ b.lienPersonnalise }}" target="_blank">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                Découvrir
            </a>
        </div>
        {% endif %}

        {# ===== FORMULAIRE RECOMMANDATION (Force de Vente uniquement) ===== #}
        {% if cardType == 'forcevente' %}
        <div class="referral-section" id="referralSection">
            <div class="referral-header" onclick="toggleReferral()">
                <h3>🤝 Recommandez un contact</h3>
                <span class="referral-toggle" id="referralToggle">▼</span>
            </div>
            <div class="referral-form" id="referralForm" style="display: none;">
                <p class="referral-subtitle">Partagez un contact et aidez votre réseau à se développer !</p>

                <input type="hidden" id="refBeneficiaireId" value="{{ b.id }}">
                <input type="hidden" id="refRecommenderName" value="{{ fullName }}">

                <div class="ref-field">
                    <label>NOM DU CONTACT RECOMMANDÉ *</label>
                    <input type="text" id="refContactName" placeholder="Ex: Pierre Dubois" required>
                </div>
                <div class="ref-field">
                    <label>EMAIL DU CONTACT *</label>
                    <input type="email" id="refContactEmail" placeholder="Ex: pierre.dubois@email.com" required>
                </div>
                <div class="ref-field">
                    <label>TÉLÉPHONE DU CONTACT</label>
                    <input type="tel" id="refContactPhone" placeholder="Ex: +33 6 12 34 56 78">
                </div>
                <div class="ref-field">
                    <label>MESSAGE / PROJET (OPTIONNEL)</label>
                    <textarea id="refMessage" rows="3" placeholder="Ex: Recherche d'un appartement 3 pièces à Paris..."></textarea>
                </div>

                <button type="button" class="ref-submit-btn" onclick="submitReferral()">
                    📤 Envoyer la recommandation
                </button>

                <div id="refSuccess" style="display: none; margin-top: 12px; padding: 12px; background: #d3f9d8; color: #2b8a3e; border-radius: 10px; text-align: center; font-size: 14px; font-weight: 600;">
                    ✅ Recommandation envoyée avec succès !
                </div>
                <div id="refError" style="display: none; margin-top: 12px; padding: 12px; background: #ffe0e0; color: #c92a2a; border-radius: 10px; text-align: center; font-size: 14px;">
                </div>
            </div>
        </div>
        {% endif %}

        {# ===== CTA NUM-ECARD (toutes les cartes) ===== #}
        <div class="cta-numecard">
            <div class="cta-rocket">🚀</div>
            <h3>Vous aussi, passez au digital !</h3>
            <p>
                Fini le gaspillage de cartes papier !<br>
                Une carte permanente, toujours à jour, partageable à l'infini.<br>
                À partir de 199€ • ROI immédiat
            </p>
            <a href="https://www.num-ecard.com/#contact" class="cta-link">⚡ Commander votre carte</a>
        </div>

        {# ===== PARTAGE ===== #}
        <div class="share-section">
            <h3>📤 Partager cette carte de visite</h3>
            <div class="share-subtitle">Transmettez mes coordonnées facilement</div>
            <div class="share-buttons">
                <a href="#" class="share-btn share-whatsapp" onclick="shareWhatsApp(); return false;">
                    <svg viewBox="0 0 24 24"><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="#" class="share-btn share-email" onclick="shareEmail(); return false;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                    Email
                </a>
                <a href="#" class="share-btn share-sms" onclick="shareSMS(); return false;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    SMS
                </a>
                <a href="#" class="share-btn share-facebook" onclick="shareFacebook(); return false;">
                    <svg viewBox="0 0 24 24"><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>
                <button class="share-btn share-native" onclick="shareNative()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
                    Partager
                </button>
                <button class="share-btn share-copy" onclick="copyLink()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                    Copier le lien
                </button>
            </div>
        </div>

        {# ===== SITE WEB ===== #}
        {% if siteWeb %}
        <div class="website-links">
            <h3>🌐 Découvrez {{ entreprise ?: fullName }}</h3>
            <div class="website-subtitle">{{ entreprise ? 'Visitez notre site' : 'En savoir plus' }}</div>
            <a href="{{ siteWeb }}" target="_blank">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                Visitez notre site web
            </a>
        </div>
        {% else %}
        <div class="website-links">
            <h3>🌐 Découvrez Num-Ecard</h3>
            <div class="website-subtitle">La carte de visite qui ne s'use jamais</div>
            <a href="https://www.num-ecard.com/" target="_blank">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                Visitez notre site web
            </a>
        </div>
        {% endif %}
    </div>

    <div class="copy-notification" id="copyNotification">✅ Lien copié !</div>

    {# ===== PWA INSTALL BANNER ===== #}
    <div class="install-section" id="installSection" style="display: none;">
        <div class="install-banner">
            <div>
                <h3>📲 Installer l'application</h3>
                <p>Ajoutez cette carte à votre écran d'accueil</p>
            </div>
            <button id="installBtn" class="install-button">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Installer
            </button>
            <button id="closeInstall" class="close-button">×</button>
        </div>
    </div>

    {# ===== SCHEMA.ORG ===== #}
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "{{ fullName|e('js') }}",
        {% if fonction %}"jobTitle": "{{ fonction|e('js') }}",{% endif %}
        {% if mobile %}"telephone": "{{ mobile|e('js') }}",{% endif %}
        {% if email %}"email": "{{ email|e('js') }}",{% endif %}
        {% if siteWeb %}"url": "{{ siteWeb|e('js') }}",{% endif %}
        {% if entreprise %}"worksFor": {"@type": "Organization", "name": "{{ entreprise|e('js') }}"}{% endif %}
    }
    </script>

    <script>
    /* ===== FONCTIONS DE PARTAGE ===== */
    const CARD_NAME = "{{ fullName|e('js') }}";
    const CARD_TITLE = "{{ fonction|e('js') }}";

    function showNotification(msg, type) {
        const n = document.getElementById('copyNotification');
        n.textContent = msg;
        n.style.background = type === 'error' ? '#e74c3c' : '{{ theme['--dark-color'] }}';
        n.classList.add('show');
        setTimeout(() => n.classList.remove('show'), 3000);
    }

    function shareWhatsApp() {
        const t = "Découvrez la carte de visite digitale de " + CARD_NAME + " - " + CARD_TITLE;
        window.open("https://wa.me/?text=" + encodeURIComponent(t + " " + location.href), '_blank');
    }

    async function copyLink() {
        try {
            if (navigator.clipboard) { await navigator.clipboard.writeText(location.href); }
            else {
                const ta = document.createElement('textarea'); ta.value = location.href;
                ta.style.cssText = 'position:fixed;opacity:0';
                document.body.appendChild(ta); ta.select(); document.execCommand('copy');
                document.body.removeChild(ta);
            }
            showNotification('✅ Lien copié dans le presse-papier !');
        } catch(e) { showNotification('❌ Erreur lors de la copie', 'error'); }
    }

    function shareEmail() {
        const s = "Carte de visite digitale - " + CARD_NAME;
        const b = "Bonjour,\n\nJe vous partage la carte de visite digitale de " + CARD_NAME + " :\n\n" + location.href + "\n\nCordialement";
        location.href = "mailto:?subject=" + encodeURIComponent(s) + "&body=" + encodeURIComponent(b);
    }

    function shareSMS() {
        location.href = "sms:?body=" + encodeURIComponent("Carte de visite " + CARD_NAME + ": " + location.href);
    }

    function shareFacebook() {
        window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(location.href), '_blank');
    }

    function shareNative() {
        if (navigator.share) {
            navigator.share({ title: CARD_NAME, text: 'Découvrez ma carte de visite digitale', url: location.href });
        }
    }

    /* ===== PWA INSTALLATION ===== */
    let deferredPrompt;
    const installSection = document.getElementById('installSection');
    const installBtn = document.getElementById('installBtn');
    const closeInstall = document.getElementById('closeInstall');

    function isAppInstalled() {
        return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone;
    }

    if (!isAppInstalled()) {
        window.addEventListener('beforeinstallprompt', e => {
            e.preventDefault(); deferredPrompt = e;
            setTimeout(() => { if (deferredPrompt && installSection) installSection.style.display = 'block'; }, 3000);
        });

        if (installBtn) installBtn.addEventListener('click', async () => {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                const { outcome } = await deferredPrompt.userChoice;
                if (outcome === 'accepted' && installSection) installSection.style.display = 'none';
                deferredPrompt = null;
            }
        });

        if (closeInstall) closeInstall.addEventListener('click', () => { if (installSection) installSection.style.display = 'none'; });

        if (/iPhone|iPad|iPod/i.test(navigator.userAgent) && !window.navigator.standalone) {
            const hint = document.createElement('div');
            hint.className = 'ios-install-hint';
            hint.innerHTML = '📲 Sur iOS : appuyez sur <span class="highlight-ios">Partager</span> <span style="font-size:18px;">⎋</span> puis <span class="highlight-ios">Sur l\'écran d\'accueil</span>';
            const closeHint = document.createElement('span');
            closeHint.textContent = ' ✕';
            closeHint.style.cssText = 'cursor:pointer;margin-left:10px;font-size:16px;opacity:0.7;';
            closeHint.onclick = () => hint.remove();
            hint.appendChild(closeHint);
            const h = document.querySelector('.header');
            if (h) h.parentNode.insertBefore(hint, h.nextSibling);
            setTimeout(() => { if (hint.parentNode) hint.remove(); }, 15000);
        }
    }

    window.addEventListener('appinstalled', () => { if (installSection) installSection.style.display = 'none'; });

    /* ===== SERVICE WORKER ===== */
    function showUpdateBanner(worker) {
        const b = document.createElement('div'); b.className = 'update-banner';
        b.innerHTML = '🚀 Mise à jour disponible ! <button id="updateButton">Actualiser</button>';
        b.querySelector('#updateButton').onclick = () => worker.postMessage({ action: 'skipWaiting' });
        document.body.appendChild(b);
    }

    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./service-worker.js').then(reg => {
            reg.addEventListener('updatefound', () => {
                const nw = reg.installing;
                nw.addEventListener('statechange', () => {
                    if (nw.state === 'installed' && navigator.serviceWorker.controller) showUpdateBanner(nw);
                });
            });
            if (reg.waiting) showUpdateBanner(reg.waiting);
        }).catch(e => console.error('SW error:', e));

        navigator.serviceWorker.addEventListener('controllerchange', () => location.reload());
    }

    /* ===== RECOMMANDATION ===== */
    function toggleReferral() {
        const form = document.getElementById('referralForm');
        const toggle = document.getElementById('referralToggle');
        if (form.style.display === 'none') {
            form.style.display = 'block';
            toggle.classList.add('open');
        } else {
            form.style.display = 'none';
            toggle.classList.remove('open');
        }
    }

    async function submitReferral() {
        const btn = document.querySelector('.ref-submit-btn');
        const successEl = document.getElementById('refSuccess');
        const errorEl = document.getElementById('refError');

        const contactName = document.getElementById('refContactName')?.value.trim();
        const contactEmail = document.getElementById('refContactEmail')?.value.trim();
        const contactPhone = document.getElementById('refContactPhone')?.value.trim();
        const message = document.getElementById('refMessage')?.value.trim();
        const beneficiaireId = document.getElementById('refBeneficiaireId')?.value;

        successEl.style.display = 'none';
        errorEl.style.display = 'none';

        if (!contactName || !contactEmail) {
            errorEl.textContent = '⚠️ Le nom et l\'email du contact sont obligatoires.';
            errorEl.style.display = 'block';
            return;
        }

        btn.disabled = true;
        btn.textContent = '⏳ Envoi en cours...';

        try {
            const apiBase = window.NUMECARD_API_BASE || 'https://www.num-ecard.com';
            const response = await fetch(apiBase + '/api/recommendation', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    beneficiaireId: parseInt(beneficiaireId),
                    contactName: contactName,
                    contactEmail: contactEmail,
                    contactPhone: contactPhone,
                    message: message
                })
            });

            const data = await response.json();

            if (response.ok && data.success) {
                successEl.style.display = 'block';
                document.getElementById('refContactName').value = '';
                document.getElementById('refContactEmail').value = '';
                document.getElementById('refContactPhone').value = '';
                document.getElementById('refMessage').value = '';
            } else {
                errorEl.textContent = '⚠️ ' + (data.error || 'Erreur lors de l\'envoi.');
                errorEl.style.display = 'block';
            }
        } catch (e) {
            errorEl.textContent = '⚠️ Erreur réseau. Veuillez réessayer.';
            errorEl.style.display = 'block';
        }

        btn.disabled = false;
        btn.textContent = '📤 Envoyer la recommandation';
    }
    </script>
</body>
</html>
