{% extends 'legal/legal_layout.html.twig' %}

{% block title %}Documentation & Référence RGPD{% endblock %}
{% block description %}Documentation complète NUM-ECARD : guide des modèles de cartes (Essentiel, Premium, Force de Vente, Multi-Cartes) et référence RGPD complète pour Porteurs et Visiteurs.{% endblock %}

{% block page_title %}Documentation & RGPD NUM-ECARD{% endblock %}
{% block page_subtitle %}<p class="subtitle">Référence complète — Guide des modèles + Conformité RGPD 2025/2026</p>{% endblock %}
{% block page_meta %}<p class="meta">Version 4.1 — Avril 2026</p>{% endblock %}
{% block page_version %}<strong>Référence :</strong> DOC-RGPD-V4.1 — Avril 2026{% endblock %}

{% block stylesheets %}
<style>
    .doc-tabs {
        display: flex;
        gap: 8px;
        background: #f5f5f7;
        border-radius: 12px;
        padding: 6px;
        margin-bottom: 24px;
    }
    .doc-tab {
        flex: 1;
        padding: 10px 16px;
        background: transparent;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: #424245;
        transition: all 0.2s;
    }
    .doc-tab.active {
        background: white;
        color: #1d1d1f;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .doc-section { display: none; }
    .doc-section.active { display: block; }
    .doc-card {
        background: #fafafa;
        border-radius: 12px;
        padding: 20px 22px;
        margin-bottom: 16px;
        border-left: 4px solid #0071e3;
    }
    .doc-card h3 { margin-top: 0; }
    .doc-card.starter { border-left-color: #34c759; }
    .doc-card.premium { border-left-color: #af52de; }
    .doc-card.fdv { border-left-color: #ff9500; }
    .doc-card.multi { border-left-color: #007aff; }
    .doc-features-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 14px;
    }
    .doc-feature {
        background: white;
        padding: 12px 14px;
        border-radius: 8px;
        font-size: 14px;
    }
    .doc-feature-icon { font-size: 20px; display: block; margin-bottom: 4px; }
    @media (max-width: 600px) {
        .doc-features-grid { grid-template-columns: 1fr; }
        .doc-tabs { flex-direction: column; }
    }
</style>
{% endblock %}

{% block content %}

<div class="doc-tabs">
    <button class="doc-tab active" data-target="modeles">📱 Guide des modèles</button>
    <button class="doc-tab" data-target="rgpd">🔒 Référence RGPD</button>
</div>

{# ──────────── ONGLET 1 : MODÈLES ──────────── #}
<div id="doc-section-modeles" class="doc-section active">

    <h2>📱 Documentation NUM-ECARD</h2>
    <p>Guide complet de vos modèles de cartes de visite digitales professionnelles.</p>

    <h3>🚀 Comment ça marche ?</h3>
    <p>Découvrez notre processus simple et efficace pour créer votre carte de visite digitale :</p>
    <ol>
        <li><strong>Choisissez votre modèle</strong> — Sélectionnez parmi nos 4 modèles celui qui correspond à vos besoins et votre budget</li>
        <li><strong>Remplissez le formulaire</strong> — Vos informations professionnelles, choix parmi 52 chartes graphiques ou votre identité visuelle</li>
        <li><strong>Validation et création</strong> — Notre équipe crée votre carte et vous soumet un aperçu avant mise en ligne</li>
        <li><strong>Mise en ligne &amp; QR Code</strong> — URL personnalisée + QR Code pour tous vos supports papier et digitaux</li>
    </ol>

    <table>
        <tbody>
            <tr><td>⏱️ <strong>Livraison</strong></td><td>7 à 21 jours — Mise en ligne rapide</td></tr>
            <tr><td>✅ <strong>Validation</strong></td><td>Aperçu et modifications avant publication</td></tr>
            <tr><td>🎓 <strong>Accompagnement</strong></td><td>Support technique inclus</td></tr>
            <tr><td>🔒 <strong>Hébergement sécurisé</strong></td><td>Gratuit la 1<sup>ère</sup> année, serveurs France</td></tr>
        </tbody>
    </table>

    {# ──── Modèle Essentiel ──── #}
    <div class="doc-card starter">
        <h3>⚡ Modèle Essentiel — 179 € HT</h3>
        <p><strong>La solution simple et efficace 🎯 — Idéal pour débuter votre présence digitale</strong></p>
        <p>Le modèle Essentiel est la solution parfaite pour les professionnels qui souhaitent moderniser leur image et abandonner les cartes papier. Simple mais élégante.</p>
        <p><strong>Pour qui ?</strong> Indépendants, professions libérales, commerciaux, agents immobiliers, artisans, consultants qui veulent une présence digitale claire.</p>

        <h4>✨ Fonctionnalités incluses</h4>
        <div class="doc-features-grid">
            <div class="doc-feature"><span class="doc-feature-icon">👤</span><strong>Profil pro</strong> — Photo, nom, fonction, slogan</div>
            <div class="doc-feature"><span class="doc-feature-icon">📞</span><strong>Coordonnées</strong> — Tél, email, adresse + Maps</div>
            <div class="doc-feature"><span class="doc-feature-icon">🔗</span><strong>Réseaux sociaux</strong> — LinkedIn, Facebook, Instagram, YouTube, site</div>
            <div class="doc-feature"><span class="doc-feature-icon">🎨</span><strong>Charte</strong> — 52 designs ou votre identité</div>
            <div class="doc-feature"><span class="doc-feature-icon">📱</span><strong>QR Code</strong> — À imprimer sur tous supports</div>
            <div class="doc-feature"><span class="doc-feature-icon">🌐</span><strong>URL personnalisée</strong> — Mémorisable et partageable</div>
        </div>

        <h4>✅ Tout ce qui est inclus</h4>
        <ul>
            <li>Carte digitale complète</li>
            <li>52 designs ou votre charte</li>
            <li>QR Code haute qualité</li>
            <li>Liens réseaux sociaux</li>
            <li>Bouton « Ajouter aux contacts »</li>
            <li>Design 100 % responsive</li>
            <li>Hébergement sécurisé France (1<sup>ère</sup> année offerte)</li>
            <li>Support technique email</li>
            <li>Mise en ligne 7 jours ouvrés</li>
            <li>URL personnalisée</li>
        </ul>
    </div>

    {# ──── Modèle Premium ──── #}
    <div class="doc-card premium">
        <h3>💎 Modèle Premium — 299 € HT ⭐ Le plus populaire</h3>
        <p><strong>La solution complète et évolutive</strong></p>
        <p>Toutes les fonctionnalités Essentiel + modules avancés pour enrichir votre présence digitale. <strong>3 modifications gratuites</strong> la première année, puis 10 € HT/modification.</p>
        <p><strong>Pour qui ?</strong> Entrepreneurs, consultants, freelances créatifs, coaches, photographes qui veulent une carte évolutive.</p>

        <h4>✨ Fonctionnalités Premium (en plus de l'Essentiel)</h4>
        <div class="doc-features-grid">
            <div class="doc-feature"><span class="doc-feature-icon">🔄</span><strong>Modifications incluses</strong> — 3 / an</div>
            <div class="doc-feature"><span class="doc-feature-icon">🖼️</span><strong>Galerie photos</strong> — Jusqu'à 12 photos</div>
            <div class="doc-feature"><span class="doc-feature-icon">📅</span><strong>Module agenda</strong> — Calendly, Doctolib…</div>
            <div class="doc-feature"><span class="doc-feature-icon">⭐</span><strong>Avis clients</strong> — Boost de crédibilité</div>
            <div class="doc-feature"><span class="doc-feature-icon">📝</span><strong>Formulaire contact avancé</strong> — Notif temps réel</div>
            <div class="doc-feature"><span class="doc-feature-icon">📊</span><strong>Statistiques</strong> — Tableau de bord clair</div>
        </div>

        <div class="legal-callout">
            🔒 <strong>Analytics propriétaire conforme RGPD :</strong> IP anonymisées (2 octets supprimés), données agrégées, zéro cookie publicitaire. Base légale : intérêt légitime Art. 6.1.f. Conservation : 12 mois glissants.
        </div>

        <h4>✅ Tout l'Essentiel + Premium</h4>
        <ul>
            <li>Toutes les fonctions Essentiel</li>
            <li>Galerie photos (12 photos)</li>
            <li>Module agenda / prise de RDV</li>
            <li>Section avis clients</li>
            <li>Portfolio ou galerie photo</li>
            <li>Catalogue produits/services</li>
            <li>Page satisfaction clients</li>
            <li>Vidéo de présentation</li>
            <li>Tableau de bord analytics RGPD</li>
            <li>Actualités &amp; contenu éditorial</li>
        </ul>
    </div>

    {# ──── Modèle Force de Vente ──── #}
    <div class="doc-card fdv">
        <h3>🚀 Modèle Force de Vente — 399 € HT</h3>
        <p><strong>La solution commerciale ultra-complète 💼 — Pour les professionnels exigeants et commerciaux</strong></p>
        <p>Le modèle Force de Vente inclut tout le Premium et va encore plus loin : formulaire prospect intelligent, système de recommandation CRM Light, notifications push Mon Actu et export prospects.</p>
        <p><strong>Pour qui ?</strong> Commerciaux, consultants en développement commercial, agents immobiliers, directeurs de vente qui veulent transformer chaque rencontre en opportunité.</p>

        <h4>✨ Fonctionnalités exclusives Force de Vente</h4>
        <div class="doc-features-grid">
            <div class="doc-feature"><span class="doc-feature-icon">🎯</span><strong>Formulaire prospect intelligent</strong> — Le visiteur soumet sa mise en relation directement depuis votre carte.</div>
            <div class="doc-feature"><span class="doc-feature-icon">🔔</span><strong>Notifications push (Mon Actu)</strong> — Diffusez vos actualités aux visiteurs abonnés.</div>
            <div class="doc-feature"><span class="doc-feature-icon">👥</span><strong>CRM Light — Recommandations</strong> — Système client-à-client intégré</div>
            <div class="doc-feature"><span class="doc-feature-icon">📈</span><strong>Analytics avancées</strong> — Géolocalisation pays, type d'appareil</div>
            <div class="doc-feature"><span class="doc-feature-icon">📥</span><strong>Export prospects (Excel)</strong> — En un clic</div>
            <div class="doc-feature"><span class="doc-feature-icon">✏️</span><strong>Modifications illimitées</strong> — Sans limite</div>
        </div>

        <div class="legal-callout">
            🔒 <strong>RGPD :</strong> Données prospect (nom, email, message) transmises au Porteur = RT. SANAGENCY = sous-traitant Art. 28. Conservation max. 24 mois. Consentement VAPID explicite requis avant activation des push, archivé dans ConsentRecord, révocable à tout moment. IP anonymisées (2 octets), aucun tracking individuel.
        </div>

        <div class="legal-callout legal-callout--warn">
            ⚠️ <strong>Export prospects :</strong> Le Porteur est responsable de traitement de ces données (RGPD). Utilisation soumise au respect de la réglementation applicable.
        </div>

        <h4>✅ Tout l'Essentiel + Premium + Force de Vente</h4>
        <ul>
            <li>Toutes les fonctions Premium</li>
            <li>Formulaire prospect intelligent</li>
            <li>CRM Light recommandations</li>
            <li>Notifications push VAPID (Mon Actu)</li>
            <li>Export prospects Excel</li>
            <li>Analytics géolocalisation pays</li>
            <li>Modifications illimitées</li>
            <li>Signature email dynamique</li>
        </ul>
    </div>

    {# ──── Modèle Multi-Cartes ──── #}
    <div class="doc-card multi">
        <h3>🎯 Modèle Multi-Cartes — dès 529 € HT (2 cartes)</h3>
        <p><strong>La solution équipe 🏢 — Pour les équipes et entreprises</strong></p>
        <p>Parfait pour maintenir une image de marque homogène tout en permettant à chaque collaborateur d'avoir sa propre carte personnalisée.</p>
        <p><strong>Pour qui ?</strong> PME, équipes commerciales, cabinets, agences, réseaux de franchise. Chaque collaborateur dispose de sa carte individuelle dans la charte de l'entreprise.</p>

        <h4>💰 Tarification par volume</h4>
        <table>
            <thead><tr><th>Pack</th><th>Cartes</th><th>Prix HT</th><th>Prix/carte</th></tr></thead>
            <tbody>
                <tr><td>Pack Starter</td><td>2</td><td>529 €</td><td>264,50 €</td></tr>
                <tr><td>Pack Trio</td><td>3</td><td>769 €</td><td>256,33 €</td></tr>
                <tr><td>Pack Team</td><td>4</td><td>999 €</td><td>249,75 €</td></tr>
                <tr><td>Pack Enterprise</td><td>12+</td><td>Sur devis</td><td>Contact</td></tr>
            </tbody>
        </table>

        <div class="legal-callout">
            🔒 <strong>RGPD &amp; départ collaborateur :</strong> En cas de départ d'un collaborateur, envoyez une demande de désactivation à <a href="mailto:contact@num-ecard.com">contact@num-ecard.com</a>. Le slot libéré peut être réutilisé pour un nouveau collaborateur (89,50 € HT). Conformément au RGPD (Art. 17), les données personnelles du collaborateur (photo, coordonnées, contenu) sont supprimées de nos serveurs dans les 30 jours suivant la désactivation. En tant qu'employeur-responsable de traitement, vous êtes tenu de veiller à l'absence de toute copie non autorisée.
        </div>

        <h4>✅ Tout le Premium × N collaborateurs</h4>
        <ul>
            <li>Charte graphique entreprise unifiée</li>
            <li>Cartes individuelles personnalisées</li>
            <li>Galerie &amp; agenda par collaborateur</li>
            <li>Dashboard analytics équipe</li>
            <li>Gestion départs/remplacements</li>
            <li>Support prioritaire</li>
        </ul>
    </div>

    <div class="legal-callout legal-callout--success">
        🚀 <strong>Prêt à créer votre carte de visite digitale ?</strong> Commandez dès maintenant — délai 7 à 21 jours selon le modèle.<br>
        ✅ Paiement sécurisé Stripe · 🔒 Données hébergées en France · 🎓 Support inclus.
    </div>

</div>

{# ──────────── ONGLET 2 : RÉFÉRENCE RGPD ──────────── #}
<div id="doc-section-rgpd" class="doc-section">

    <h2>🔒 Référence RGPD — NUM-ECARD</h2>
    <p>Document de référence en matière de protection des données personnelles pour les visiteurs, porteurs de cartes et tiers. Mis à jour pour la réglementation 2025/2026.</p>

    <div class="legal-callout legal-callout--success">
        ✓ RGPD (UE) 2016/679 · ✓ Loi n° 78-17 modifiée · ✓ CNIL Délibération 2022-098 · ✓ Data Privacy Framework UE-USA · ✓ Hébergement 100 % France · ✓ IP anonymisées
    </div>

    <h3>🏢 1. Identité du responsable de traitement</h3>
    <table>
        <tbody>
            <tr><td><strong>Dénomination sociale</strong></td><td>SAS SANAGENCY</td></tr>
            <tr><td><strong>SIREN</strong></td><td>932 944 242</td></tr>
            <tr><td><strong>Siège social</strong></td><td>Occitanie, France</td></tr>
            <tr><td><strong>Activité principale</strong></td><td>Édition de logiciels SaaS — plateforme NUM-ECARD (Carte Vivante™, INPI n° 5201468)</td></tr>
            <tr><td><strong>Email DPD / RGPD</strong></td><td><a href="mailto:rgpd@num-ecard.com">rgpd@num-ecard.com</a></td></tr>
            <tr><td><strong>Email support</strong></td><td><a href="mailto:contact@num-ecard.com">contact@num-ecard.com</a></td></tr>
            <tr><td><strong>Hébergement</strong></td><td>SAS o2switch — Clermont-Ferrand, France (100 % serveurs français)</td></tr>
            <tr><td><strong>CDN / Sécurité</strong></td><td>Cloudflare, Inc. — DPA signé, Clauses Contractuelles Types + Data Privacy Framework UE-USA</td></tr>
        </tbody>
    </table>

    <div class="legal-callout">
        ℹ️ <strong>Distinction Porteur / SANAGENCY :</strong> SANAGENCY est responsable de traitement pour toutes les données liées à l'exploitation de la plateforme. Le Porteur de carte (le professionnel client) est responsable de traitement pour les données collectées via sa propre carte (formulaire prospect, export contacts). SANAGENCY agit alors comme sous-traitant au sens de l'Art. 28 RGPD.
    </div>

    <h3>📊 2. Données collectées &amp; finalités</h3>

    <h4>2.1 Données des Porteurs (clients achetant une carte)</h4>
    <table>
        <thead><tr><th>Finalité</th><th>Données traitées</th><th>Base légale</th></tr></thead>
        <tbody>
            <tr><td>Exécution du contrat de service (création de la carte)</td><td>Nom, prénom, email, téléphone, entreprise, poste, photo profil, coordonnées pro, réseaux sociaux, contenus carte</td><td>Art. 6.1.b — Contrat</td></tr>
            <tr><td>Facturation et comptabilité</td><td>Nom/raison sociale, adresse, email, montants, références de commande</td><td>Art. 6.1.c — Obligation légale</td></tr>
            <tr><td>Paiement sécurisé (Stripe)</td><td>Données de paiement traitées exclusivement par Stripe — SANAGENCY ne stocke aucune donnée bancaire</td><td>Art. 6.1.b — Contrat</td></tr>
            <tr><td>Support technique et SAV</td><td>Email, contenu des échanges, informations techniques</td><td>Art. 6.1.b — Contrat</td></tr>
            <tr><td>Newsletter / communications commerciales</td><td>Email, prénom — opt-in explicite requis, archivé dans ConsentRecord</td><td>Art. 6.1.a — Consentement</td></tr>
            <tr><td>Accès espace administration (2FA)</td><td>Email, identifiant, logs de connexion, token TOTP — journalisé dans AdminAccessLog</td><td>Art. 6.1.f — Intérêt légitime (sécurité)</td></tr>
        </tbody>
    </table>

    <h4>2.2 Données des Visiteurs (personnes consultant une carte NUM-ECARD)</h4>
    <table>
        <thead><tr><th>Finalité</th><th>Données traitées</th><th>Base légale</th></tr></thead>
        <tbody>
            <tr><td>Analytics de visite (tableau de bord Porteur)</td><td>IP anonymisée (2 derniers octets supprimés), pays d'origine, type d'appareil, durée de visite, pages consultées — données agrégées uniquement</td><td>Art. 6.1.f — Intérêt légitime</td></tr>
            <tr><td>Formulaire contact (tous modèles)</td><td>Nom, email, message — transmis au Porteur (RT). SANAGENCY = sous-traitant Art. 28</td><td>Art. 6.1.a — Consentement (mention Art. 13 affichée)</td></tr>
            <tr><td>Formulaire prospect Force de Vente</td><td>Nom, email, téléphone, message — transmis au Porteur (RT). SANAGENCY = sous-traitant Art. 28</td><td>Art. 6.1.a — Consentement (mention Art. 13 affichée)</td></tr>
            <tr><td>Notifications push — Mon Actu (FDV)</td><td>Token VAPID (identifiant navigateur) — consentement explicite requis, archivé dans ConsentRecord</td><td>Art. 6.1.a — Consentement</td></tr>
            <tr><td>Bouton « Ajouter aux contacts » (vCard)</td><td>Aucune donnée collectée côté serveur — action purement locale sur l'appareil du visiteur</td><td>Hors champ RGPD</td></tr>
        </tbody>
    </table>

    <div class="legal-callout legal-callout--success">
        🛡️ <strong>Principe de minimisation (Art. 5.1.c RGPD) :</strong> SANAGENCY ne collecte que les données strictement nécessaires à chaque finalité décrite. Aucune donnée biométrique, de santé ou sensible au sens de l'Art. 9 n'est traitée.
    </div>

    <h3>👉 Pour aller plus loin</h3>
    <p>Pour le détail complet de vos droits, durées de conservation et procédures, consultez la <a href="{{ path('app_legal_confidentialite') }}">Politique de Confidentialité v4.1</a>. Pour les questions courantes : <a href="{{ path('app_legal_faq_rgpd') }}">FAQ RGPD</a>.</p>

</div>

{% endblock %}

{% block javascripts %}
<script>
    // Gestion des onglets
    document.querySelectorAll('.doc-tab').forEach(tab => {
        tab.addEventListener('click', function() {
            const target = this.dataset.target;
            document.querySelectorAll('.doc-tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.doc-section').forEach(s => s.classList.remove('active'));
            this.classList.add('active');
            document.getElementById('doc-section-' + target).classList.add('active');
        });
    });
</script>
{% endblock %}