"use client";
import Link from "next/link";
import { ArrowLeft, Shield, Database, Lock, Eye, FileText, Mail } from "lucide-react";
import signinStyles from "../signin/signin.module.css";

export default function PolitiqueConfidentialiteContent() {
  return (
    <div className={signinStyles.meshRoot}>
      <div className={signinStyles.simpleBg} aria-hidden="true" />

      {/* Contenu principal */}
      <div className="relative z-10 min-h-screen p-4 py-12">
        <div className="max-w-4xl mx-auto">
          {/* En-tête avec logo */}
          <div className="bg-white/80 backdrop-blur-lg border border-white/20 rounded-3xl p-8 shadow-2xl mb-6">
            <div className="flex justify-center mb-6">
              <img
                src="/odentas-logo.png"
                alt="Logo Odentas"
                className="h-16 w-auto drop-shadow-lg"
              />
            </div>

            <div className="text-center mb-6">
              <div className="flex items-center justify-center gap-3 mb-3">
                <Shield className="w-8 h-8 text-blue-600" />
                <h1 className="text-3xl font-bold text-gray-800">
                  Politique de Confidentialité
                </h1>
              </div>
              <p className="text-gray-600 text-lg">
                Protection des données personnelles
              </p>
              <p className="text-sm text-gray-500 mt-2">
                Dernière mise à jour : 25 octobre 2025
              </p>
            </div>
          </div>

          {/* Contenu de la politique */}
          <div className="bg-white/80 backdrop-blur-lg border border-white/20 rounded-3xl p-8 shadow-2xl space-y-8">
            
            {/* Section 1 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <FileText className="w-6 h-6 text-blue-600" />
                1. Présentation
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  La société <strong>Odentas Media SAS</strong>, immatriculée au RCS de Paris sous le numéro 907 880 348, 
                  dont le siège social est situé au 6 rue d'Armaillé, 75017 Paris, éditeur de l'<strong>Espace Paie</strong>, 
                  s'engage à protéger la confidentialité et la sécurité des données personnelles de ses utilisateurs.
                </p>
                <p>
                  Cette politique de confidentialité décrit comment nous collectons, utilisons, stockons et protégeons 
                  vos données personnelles dans le cadre de l'utilisation de notre plateforme de gestion de paie et 
                  de contrats pour le secteur du spectacle.
                </p>
              </div>
            </section>

            {/* Section 2 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Database className="w-6 h-6 text-blue-600" />
                2. Données collectées
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-4">
                <p>
                  Dans le cadre de nos services de gestion de paie, nous collectons et traitons 
                  les catégories de données suivantes :
                </p>
                
                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">1. Données relatives aux entreprises clientes</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li>Raison sociale, SIRET, SIREN, forme juridique</li>
                    <li>Code employeur, code NAF, numéro de TVA intracommunautaire, numéro RNA (le cas échéant)</li>
                    <li>Convention collective applicable</li>
                    <li>Adresse du siège social et de correspondance</li>
                    <li>Représentants légaux</li>
                    <li>Licences de spectacles (numéros, types)</li>
                    <li>Signataire des contrats et délégation de signature</li>
                    <li>Numéros d'adhérent : URSSAF, AUDIENS, France Travail Spectacle, Médecine du Travail, Congés Spectacles, Prévoyance</li>
                    <li><strong>Contact principal :</strong> civilité, nom, prénom, email, email CC pour notifications, email signature pour la signature électronique des contrats de travail, téléphone</li>
                  </ul>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">2. Données relatives aux salariés</h3>
                  <p className="text-sm mb-2"><strong>Identité :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Civilité, nom, prénom, nom de naissance, pseudonyme éventuel</li>
                    <li>Date de naissance, lieu de naissance</li>
                    <li>Numéro de Sécurité Sociale (NIR)</li>
                    <li>Numéro Congés Spectacles (intermittents)</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Contact :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Adresse postale complète, complément d'adresse</li>
                    <li>Email, téléphone</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Bancaire :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>IBAN, BIC/SWIFT</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Professionnelles :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Catégorie professionnelle (artiste, technicien, cadre, non-cadre)</li>
                    <li>Profession et code profession</li>
                  </ul>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">3. Données relatives aux contrats de travail</h3>
                  <p className="text-sm mb-2"><strong>Informations générales :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Type de contrat : CDDU (mono-mois/multi-mois) ou Régime Général (CDD/CDI)</li>
                    <li>Numéro de contrat (référence)</li>
                    <li>Dates de début et fin du contrat</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>CDDU spécifiques :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Production/spectacle, numéro d'objet</li>
                    <li>Nombre de représentations, nombre de services de répétition</li>
                    <li>Dates de représentations et de répétitions (avec quantités par date)</li>
                    <li>Durée des services (heures/minutes), jours travaillés</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>RG spécifiques :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Type de contrat (CDD/CDI), motif du CDD</li>
                    <li>Nom et situation de la personne remplacée (le cas échéant)</li>
                    <li>Motif d'accroissement temporaire d'activité (le cas échéant)</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Rémunération :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Type de salaire (brut, net avant PAS, coût total employeur, minimum conventionnel)</li>
                    <li>Montant du salaire, paniers repas</li>
                    <li>Salaires détaillés par date (si saisie par date activée)</li>
                  </ul>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">4. Données relatives aux productions/spectacles</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li>Nom du spectacle/production, numéro d'objet</li>
                    <li>Dates de représentations et répétitions</li>
                    <li>Lieux de représentation</li>
                  </ul>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">5. Documents et pièces justificatives</h3>
                  <p className="text-sm mb-2"><strong>Salariés (stockés de manière sécurisée) :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Pièce d'identité (CNI, passeport, permis, carte de séjour, carte vitale, carte étudiant)</li>
                    <li>Attestation de Sécurité Sociale</li>
                    <li>RIB</li>
                    <li>Attestation de médecine du travail</li>
                    <li>Contrats de travail signés, diplômes, autres justificatifs</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Entreprises (stockés de manière sécurisée) :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Contrat Odentas, licences de spectacles</li>
                    <li>RIB entreprise, KBIS / Extrait Journal Officiel</li>
                    <li>Délégations de signature</li>
                  </ul>
                </div>

                <div className="bg-green-50 border-l-4 border-green-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">6. Données générées dans le cadre de notre prestation</h3>
                  <p className="text-sm mb-2"><strong>Bulletins de paie et cotisations sociales :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Salaires bruts, nets, prélèvement à la source</li>
                    <li>Cotisations : URSSAF (maladie, vieillesse, allocations familiales, FNAL, AT/MP)</li>
                    <li>France Travail Spectacle (chômage intermittent, AGS)</li>
                    <li>Audiens (retraite complémentaire, prévoyance)</li>
                    <li>Congés Spectacles, Prévoyance RG</li>
                    <li>CSG/CRDS, Médecine du travail, Formation professionnelle</li>
                    <li>Et tout autre caisse ou organisme auprès de qui la transmission de données est nécessaire pour votre gestion de paie</li>
                    <li>Heures travaillées, cachets</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Virements de salaires :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Période concernée, montant total net</li>
                    <li>Numéro d'appel à virement, dates d'échéance et de paiement</li>
                    <li>Mode de virement, statut</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Facturation :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Numéros de facture, période facturée</li>
                    <li>Montants HT, TVA, TTC</li>
                    <li>Statut et date de paiement</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Documents comptables :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Livre de paie (registre légal obligatoire)</li>
                    <li>Récapitulatif mensuel de paie</li>
                    <li>Écritures comptables (pour intégration logiciel comptabilité)</li>
                    <li>Fiche de contrôle DSN (Déclaration Sociale Nominative)</li>
                  </ul>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">7. Données de connexion et d'authentification</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li>Email de connexion, mot de passe (chiffré)</li>
                    <li>Statut 2FA TOTP (activé/désactivé)</li>
                    <li>Token d'accès auto-déclaration (pour les salariés)</li>
                  </ul>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">8. Données de communication</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li>Emails de notification envoyés (nouveau contrat, paie disponible, virement, etc.)</li>
                    <li>Historique des notifications de cotisations</li>
                    <li>Logs d'envoi d'emails</li>
                  </ul>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">9. Données d'analyse et d'amélioration (PostHog EU)</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li>Identité utilisateur (nom, email)</li>
                    <li>Actions effectuées dans l'application (consultation contrats, création salariés, téléchargements, etc.)</li>
                    <li>Enregistrements de sessions (replay vidéo des interactions interface)</li>
                    <li>Propriétés des organisations (nom, type, abonnement)</li>
                    <li>Métadonnées techniques (version application, navigateur, système d'exploitation)</li>
                  </ul>
                  <p className="text-xs text-gray-600 mt-2">
                    Pour plus de détails sur PostHog et vos droits d'opposition, consultez la section 8 de cette politique.
                  </p>
                </div>
              </div>
            </section>

            {/* Section 3 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Eye className="w-6 h-6 text-blue-600" />
                3. Finalités du traitement
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>Les données personnelles collectées sont utilisées pour les finalités suivantes :</p>
                <ul className="list-disc list-inside space-y-2">
                  <li><strong>Gestion des contrats de travail :</strong> création, modification, signature électronique et archivage des contrats de travail</li>
                  <li><strong>Traitement de la paie :</strong> calcul et édition des bulletins de salaire, virements bancaires</li>
                  <li><strong>Gestion des cotisations sociales :</strong> déclarations et paiements auprès des organismes (URSSAF, France Travail, Afdas, etc.)</li>
                  <li><strong>Facturation :</strong> émission et suivi des factures pour nos services</li>
                  <li><strong>Communication :</strong> envoi de notifications par email relatives aux contrats, paies et documents</li>
                  <li><strong>Support client :</strong> assistance technique et accompagnement des utilisateurs</li>
                  <li><strong>Conformité légale :</strong> respect des obligations légales en matière de droit du travail et de comptabilité</li>
                  <li><strong>Amélioration du service :</strong> analyse d'utilisation et optimisation de la plateforme</li>
                </ul>
              </div>
            </section>

            {/* Section 4 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Lock className="w-6 h-6 text-blue-600" />
                4. Base légale et durée de conservation
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Le traitement de vos données personnelles repose sur les bases légales suivantes :
                </p>
                <ul className="list-disc list-inside space-y-2">
                  <li><strong>Exécution du contrat :</strong> traitement nécessaire à la fourniture de nos services de gestion de paie</li>
                  <li><strong>Obligations légales :</strong> respect des obligations en matière de droit du travail, fiscalité et comptabilité</li>
                  <li><strong>Intérêt légitime :</strong> amélioration de nos services et prévention de la fraude</li>
                </ul>

                <div className="bg-gray-50 border border-gray-200 p-4 rounded-lg mt-4">
                  <h3 className="font-semibold text-gray-800 mb-2">Durées de conservation :</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li><strong>Contrats de travail et bulletins de paie :</strong> 50 ans (obligation légale)</li>
                    <li><strong>Données comptables et fiscales :</strong> 10 ans</li>
                    <li><strong>Documents justificatifs :</strong> 5 ans à compter de leur réception</li>
                    <li><strong>Logs de connexion :</strong> 12 mois</li>
                    <li><strong>Données de facturation :</strong> 10 ans</li>
                    <li><strong>Enregistrements de session (PostHog) :</strong> 90 jours</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Section 4 bis */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <FileText className="w-6 h-6 text-blue-600" />
                4 bis. Bases légales détaillées des traitements
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-4">
                <p>
                  Le RGPD (Article 6) définit 6 bases légales pour le traitement des données personnelles. 
                  Voici le détail des bases légales que nous utilisons pour chaque type de traitement :
                </p>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">1. Exécution du contrat (Article 6.1.b)</h3>
                  <p className="text-sm mb-2">
                    <strong>Traitements concernés :</strong>
                  </p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                    <li>Création et gestion des comptes utilisateurs</li>
                    <li>Traitement de la paie (calcul, édition des bulletins)</li>
                    <li>Gestion des contrats de travail</li>
                    <li>Virements bancaires des salaires</li>
                    <li>Génération et stockage des documents (contrats, bulletins de paie)</li>
                    <li>Signatures électroniques des contrats</li>
                  </ul>
                  <p className="text-sm mt-2">
                    <strong>Pourquoi cette base légale :</strong> Ces traitements sont strictement nécessaires 
                    à la fourniture de notre service de gestion de paie. Sans ces traitements, nous ne pourrions 
                    pas exécuter notre contrat de prestation.
                  </p>
                </div>

                <div className="bg-purple-50 border-l-4 border-purple-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">2. Obligation légale (Article 6.1.c)</h3>
                  <p className="text-sm mb-2">
                    <strong>Traitements concernés :</strong>
                  </p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                    <li>Déclarations sociales (URSSAF, France Travail, Afdas, Audiens)</li>
                    <li>Transmission aux caisses de retraite</li>
                    <li>Conservation des bulletins de paie pendant 50 ans</li>
                    <li>Conservation des données comptables pendant 10 ans</li>
                    <li>Déclarations fiscales</li>
                  </ul>
                  <p className="text-sm mt-2">
                    <strong>Pourquoi cette base légale :</strong> Ces traitements sont imposés par la loi française 
                    (Code du travail, Code de la sécurité sociale, Code général des impôts). Ils sont nécessaires pour 
                    respecter nos obligations légales.
                  </p>
                </div>

                <div className="bg-green-50 border-l-4 border-green-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">3. Intérêt légitime (Article 6.1.f)</h3>
                  <p className="text-sm mb-2">
                    <strong>Traitements concernés :</strong>
                  </p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                    <li>Analyse d'utilisation de la plateforme (PostHog)</li>
                    <li>Enregistrements de sessions de navigation</li>
                    <li>Amélioration de l'ergonomie et de l'expérience utilisateur</li>
                    <li>Identification et correction des bugs</li>
                    <li>Support client proactif</li>
                    <li>Prévention de la fraude et sécurité de la plateforme</li>
                  </ul>
                  
                  <div className="bg-white border border-green-300 p-3 mt-3 rounded">
                    <p className="text-sm font-semibold mb-2">Test de proportionnalité (requis par le RGPD) :</p>
                    <p className="text-sm mb-2"><strong>Nos intérêts légitimes :</strong></p>
                    <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                      <li>Améliorer la qualité du service de paie (enjeu critique pour nos clients)</li>
                      <li>Identifier et corriger rapidement les bugs (éviter des erreurs de paie)</li>
                      <li>Optimiser l'ergonomie (gain de temps pour nos clients professionnels)</li>
                      <li>Assurer la sécurité de la plateforme (protection des données sensibles)</li>
                    </ul>
                    
                    <p className="text-sm mb-2 mt-2"><strong>Droits et attentes des utilisateurs :</strong></p>
                    <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                      <li>Contexte B2B : utilisateurs professionnels (gestionnaires de paie, comptables)</li>
                      <li>Utilisation dans un cadre professionnel (pas de données personnelles sensibles)</li>
                      <li>Données visibles : données métier nécessaires à leur activité</li>
                      <li>Protection renforcée : masquage des saisies sensibles (mots de passe)</li>
                    </ul>
                    
                    <p className="text-sm mb-2 mt-2"><strong>Proportionnalité :</strong></p>
                    <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                      <li>✅ Durée limitée : conservation 90 jours maximum (vs 1 an par défaut)</li>
                      <li>✅ Accès restreint : équipe technique uniquement</li>
                      <li>✅ Usage limité : amélioration du service uniquement (pas de vente, pas de marketing)</li>
                      <li>✅ Droit d'opposition : opt-out disponible à tout moment</li>
                      <li>✅ Hébergement UE : toutes les données restent dans l'Union Européenne</li>
                    </ul>
                    
                    <p className="text-sm mt-2">
                      <strong>Conclusion :</strong> Après réalisation du test de proportionnalité, nous estimons que 
                      l'intérêt légitime de garantir la sécurité et la qualité du service justifie ces traitements, 
                      sous réserve des garanties et limitations décrites ci-dessus.
                    </p>
                  </div>
                </div>

                <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">❓ Pourquoi pas de consentement (Article 6.1.a) ?</h3>
                  <p className="text-sm mb-2">
                    Nous n'utilisons <strong>pas</strong> le consentement comme base légale pour nos traitements, 
                    car ils reposent sur d'autres bases plus appropriées :
                  </p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                    <li>Les cookies essentiels (authentification, sécurité) ne nécessitent pas de consentement</li>
                    <li>Les traitements nécessaires au contrat ne peuvent pas reposer sur le consentement</li>
                    <li>Les obligations légales ne peuvent pas reposer sur le consentement</li>
                    <li>L'intérêt légitime est plus approprié que le consentement pour l'analytics en B2B</li>
                  </ul>
                  <p className="text-sm mt-2">
                    Le consentement serait requis uniquement pour des traitements facultatifs comme le marketing, 
                    la publicité ciblée ou le profilage commercial - activités que nous ne pratiquons pas.
                  </p>
                </div>

                <p className="mt-4">
                  <strong>Transparence :</strong> Cette section détaillée démontre notre maîtrise du RGPD et notre 
                  engagement à traiter vos données de manière légale et transparente. Pour toute question sur les 
                  bases légales, contactez-nous à{" "}
                  <a href="mailto:paie@odentas.fr" className="text-blue-600 underline hover:text-blue-800">
                    paie@odentas.fr
                  </a>
                </p>
              </div>
            </section>

            {/* Section 5 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Database className="w-6 h-6 text-blue-600" />
                5. Partage et transfert des données
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-4">
                <p>
                  Vos données personnelles peuvent être partagées avec les destinataires suivants, dans le strict 
                  cadre de nos missions :
                </p>

                <div className="bg-orange-50 border-l-4 border-orange-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">Organismes sociaux (transmission obligatoire)</h3>
                  <p className="text-sm mb-2">
                    Dans le cadre de la gestion de paie et des obligations légales et conventionnelles, nous transmettons 
                    des données personnelles (identité, masse salariale, cotisations) aux organismes suivants :
                  </p>
                  <p className="text-sm mb-2"><strong>Organismes sociaux généraux :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>URSSAF, France Travail, Audiens, caisses de retraite, de prévoyance et mutuelle</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Organismes spécifiques au spectacle (obligations conventionnelles) :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>FNAS (Fonds National d'Actions Sociales)</li>
                    <li>FCAP (Fonds Commun d'Aide au Paritarisme)</li>
                    <li>FCAP-SVP (Fonds Commun d'Aide au Paritarisme du Spectacle Vivant Privé)</li>
                    <li>CASC-SVP (Comité d'Action Sociale et Culturelle du Spectacle Vivant Privé)</li>
                    <li>Thalie Santé (médecine du travail du spectacle)</li>
                    <li>AFDAS (formation professionnelle)</li>
                    <li>CPNEF/AV (Commission Paritaire Nationale Emploi et Formation de l'Audiovisuel)</li>
                    <li>Et tout autre organisme conventionnel applicable selon votre convention collective</li>
                  </ul>
                </div>

                <div>
                  <h3 className="font-semibold text-gray-800 mb-3 mt-4">Prestataires techniques (sous-traitants RGPD)</h3>
                  <p className="text-sm mb-3">
                    Pour assurer le fonctionnement de l'Espace Paie, nous faisons appel aux prestataires suivants, 
                    tous situés dans l'Union Européenne :
                  </p>
                  
                  <div className="overflow-x-auto">
                    <table className="min-w-full border-collapse border border-gray-300 text-sm">
                      <thead className="bg-gray-100">
                        <tr>
                          <th className="border border-gray-300 px-3 py-2 text-left font-semibold">Prestataire</th>
                          <th className="border border-gray-300 px-3 py-2 text-left font-semibold">Service</th>
                          <th className="border border-gray-300 px-3 py-2 text-left font-semibold">Localisation</th>
                          <th className="border border-gray-300 px-3 py-2 text-left font-semibold">Données traitées</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td className="border border-gray-300 px-3 py-2"><strong>Amazon Web Services (S3, SES, Lambda)</strong></td>
                          <td className="border border-gray-300 px-3 py-2">Hébergement, emails, traitements</td>
                          <td className="border border-gray-300 px-3 py-2">Paris (eu-west-3)</td>
                          <td className="border border-gray-300 px-3 py-2">Documents PDF, logs emails, traitements de données</td>
                        </tr>
                        <tr className="bg-gray-50">
                          <td className="border border-gray-300 px-3 py-2"><strong>Supabase</strong></td>
                          <td className="border border-gray-300 px-3 py-2">Base de données</td>
                          <td className="border border-gray-300 px-3 py-2">🇪🇺 Union Européenne</td>
                          <td className="border border-gray-300 px-3 py-2">Données complètes (profils, contrats, salariés, paies)</td>
                        </tr>
                        <tr>
                          <td className="border border-gray-300 px-3 py-2"><strong>Vercel</strong></td>
                          <td className="border border-gray-300 px-3 py-2">Hébergement frontend</td>
                          <td className="border border-gray-300 px-3 py-2">🇫🇷 Paris (cdg1)</td>
                          <td className="border border-gray-300 px-3 py-2">API routes, exécution code</td>
                        </tr>
                        <tr className="bg-gray-50">
                          <td className="border border-gray-300 px-3 py-2"><strong>DocuSeal</strong></td>
                          <td className="border border-gray-300 px-3 py-2">Signatures électroniques</td>
                          <td className="border border-gray-300 px-3 py-2">🇪🇺 Union Européenne (.eu)</td>
                          <td className="border border-gray-300 px-3 py-2">Contrats signés, traces de signature</td>
                        </tr>
                        <tr>
                          <td className="border border-gray-300 px-3 py-2"><strong>PostHog</strong></td>
                          <td className="border border-gray-300 px-3 py-2">Analytics</td>
                          <td className="border border-gray-300 px-3 py-2">🇪🇺 Union Européenne (eu.posthog.com)</td>
                          <td className="border border-gray-300 px-3 py-2">Comportement utilisateur, sessions</td>
                        </tr>
                        <tr className="bg-gray-50">
                          <td className="border border-gray-300 px-3 py-2"><strong>GoCardless</strong></td>
                          <td className="border border-gray-300 px-3 py-2">Prélèvements SEPA</td>
                          <td className="border border-gray-300 px-3 py-2">🇪🇺 Espace Économique Européen</td>
                          <td className="border border-gray-300 px-3 py-2">Mandats SEPA, coordonnées bancaires, paiements</td>
                        </tr>
                        <tr>
                          <td className="border border-gray-300 px-3 py-2"><strong>PDFMonkey</strong></td>
                          <td className="border border-gray-300 px-3 py-2">Génération PDF</td>
                          <td className="border border-gray-300 px-3 py-2">Union Européenne</td>
                          <td className="border border-gray-300 px-3 py-2">Contrats de travail (données salariés, montants)</td>
                        </tr>
                        <tr className="bg-gray-50">
                          <td className="border border-gray-300 px-3 py-2"><strong>Indy</strong></td>
                          <td className="border border-gray-300 px-3 py-2">Comptabilité</td>
                          <td className="border border-gray-300 px-3 py-2">🇫🇷 France</td>
                          <td className="border border-gray-300 px-3 py-2">Identité clients, SIRET, adresse siège, facturation (montants HT/TTC, détail prestations)</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg mt-4">
                  <h3 className="font-semibold text-gray-800 mb-2">Administration fiscale</h3>
                  <p className="text-sm">
                    Transmission dans le cadre de nos obligations déclaratives légales.
                  </p>
                </div>

                <div className="bg-green-50 border-l-4 border-green-400 p-4 rounded-lg mt-4">
                  <p className="text-sm">
                    <strong>🇪🇺 100% Union Européenne :</strong> Toutes vos données sont hébergées 
                    sur des serveurs situés dans l'Union Européenne et ne font l'objet d'aucun transfert en dehors 
                    de l'UE. Cette conformité totale garantit la protection maximale de vos données selon le RGPD.
                  </p>
                </div>

                <p className="mt-4">
                  <strong>Engagement de transparence :</strong> Nous ne vendons ni ne louons vos données personnelles à des tiers. 
                  Tous nos prestataires sont contractuellement tenus de respecter la confidentialité et la sécurité de vos données 
                  (Data Processing Agreement signé avec chacun).
                </p>
              </div>
            </section>

            {/* Section 6 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Shield className="w-6 h-6 text-blue-600" />
                6. Sécurité des données
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Nous mettons en œuvre des mesures techniques et organisationnelles appropriées pour protéger 
                  vos données contre tout accès non autorisé, perte, destruction ou altération :
                </p>
                <ul className="list-disc list-inside space-y-2">
                  <li><strong>Chiffrement :</strong> transmission HTTPS (TLS 1.3) et stockage chiffré des données sensibles</li>
                  <li><strong>Authentification :</strong> authentification à double facteur (OTP par email) et mots de passe sécurisés</li>
                  <li><strong>Contrôle d'accès :</strong> système de rôles et permissions granulaires (SUPER_ADMIN, ADMIN, AGENT, COMPTA)</li>
                  <li><strong>Journalisation :</strong> traçabilité des accès et actions sensibles</li>
                  <li><strong>Sauvegardes :</strong> sauvegardes automatiques quotidiennes avec rétention de 30 jours</li>
                  <li><strong>Tests de sécurité :</strong> audits réguliers et mises à jour de sécurité</li>
                  <li><strong>Sensibilisation :</strong> formation de nos équipes aux bonnes pratiques de sécurité</li>
                </ul>
              </div>
            </section>

            {/* Section 7 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <FileText className="w-6 h-6 text-blue-600" />
                7. Vos droits
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Conformément au Règlement Général sur la Protection des Données (RGPD) et à la loi Informatique et Libertés, 
                  vous disposez des droits suivants concernant vos données personnelles :
                </p>
                <ul className="list-disc list-inside space-y-2">
                  <li><strong>Droit d'accès :</strong> obtenir une copie de vos données personnelles</li>
                  <li><strong>Droit de rectification :</strong> corriger des données inexactes ou incomplètes</li>
                  <li><strong>Droit à l'effacement :</strong> demander la suppression de vos données (sous réserve de nos obligations légales de conservation)</li>
                  <li><strong>Droit à la limitation :</strong> demander la limitation du traitement de vos données</li>
                  <li><strong>Droit d'opposition :</strong> vous opposer au traitement de vos données pour des motifs légitimes</li>
                  <li><strong>Droit à la portabilité :</strong> recevoir vos données dans un format structuré et lisible par machine</li>
                  <li><strong>Droit de définir des directives :</strong> définir des directives relatives au sort de vos données après votre décès</li>
                </ul>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg mt-4">
                  <p className="text-sm">
                    <strong>Pour exercer vos droits :</strong> Vous pouvez nous contacter par email à{" "}
                    <a href="mailto:paie@odentas.fr" className="text-blue-600 underline hover:text-blue-800">
                      paie@odentas.fr
                    </a>
                    {" "}ou par courrier postal à : Odentas Media SAS, 6 rue d'Armaillé, 75017 PARIS. Nous nous engageons à répondre à votre 
                    demande dans un délai maximum d'un mois.
                  </p>
                </div>

                <p className="mt-4">
                  Ces droits s'appliquent également aux salariés des organisations clientes pour les données 
                  les concernant qui sont traitées via la plateforme ; employeurs et salariés peuvent exercer 
                  ces droits conformément à la réglementation en vigueur.
                </p>

                <p className="mt-4">
                  Vous disposez également du droit d'introduire une réclamation auprès de la Commission Nationale 
                  de l'Informatique et des Libertés (CNIL) si vous estimez que le traitement de vos données 
                  personnelles n'est pas conforme à la réglementation :
                </p>
                <p className="text-sm">
                  <strong>CNIL</strong><br />
                  3 Place de Fontenoy - TSA 80715<br />
                  75334 PARIS CEDEX 07<br />
                  Tél : 01 53 73 22 22<br />
                  <a href="https://www.cnil.fr" target="_blank" rel="noopener noreferrer" className="text-blue-600 underline hover:text-blue-800">
                    www.cnil.fr
                  </a>
                </p>
              </div>
            </section>

            {/* Section 8 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Mail className="w-6 h-6 text-blue-600" />
                8. Cookies et analyse d'utilisation
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-4">
                <p>
                  Notre plateforme utilise des cookies et technologies similaires pour améliorer votre expérience 
                  utilisateur :
                </p>
                <ul className="list-disc list-inside space-y-2">
                  <li><strong>Cookies essentiels :</strong> nécessaires au fonctionnement de l'application (authentification, sécurité, préférences de session)</li>
                  <li><strong>Cookies analytiques :</strong> mesure d'audience et analyse d'utilisation via PostHog pour améliorer nos services</li>
                </ul>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg mt-4">
                  <h3 className="font-semibold text-gray-800 mb-2">PostHog - Analyse d'utilisation et enregistrements de session</h3>
                  <p className="text-sm mb-2">
                    Nous utilisons <strong>PostHog</strong> (hébergé dans l'Union Européenne sur eu.posthog.com) pour analyser 
                    l'utilisation de la plateforme et améliorer votre expérience.
                  </p>
                  
                  <p className="text-sm font-semibold mb-2">Données collectées :</p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                    <li>Email professionnel (identification des utilisateurs)</li>
                    <li>Pages visitées et actions effectuées dans l'application</li>
                    <li>Enregistrements de sessions de navigation (captures d'écran de votre utilisation)</li>
                    <li>Données techniques (navigateur, système d'exploitation, résolution d'écran)</li>
                  </ul>

                  <div className="bg-orange-50 border-l-2 border-orange-400 p-3 mt-3 rounded">
                    <p className="text-sm">
                      <strong>⚠️ Important - Identification des utilisateurs :</strong> Du fait de notre relation 
                      commerciale B2B et de la nature des données métier affichées à l'écran (noms de salariés, 
                      productions, contrats, montants), nous pouvons identifier votre structure lors de l'analyse 
                      des sessions enregistrées. Cette identification est inhérente à notre activité de gestionnaire 
                      de paie.
                    </p>
                  </div>

                  <p className="text-sm mt-3">
                    <strong>Finalités :</strong>
                  </p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                    <li>Identifier et corriger les bugs rapidement</li>
                    <li>Améliorer l'ergonomie et l'expérience utilisateur</li>
                    <li>Vous assister de manière proactive en cas de difficulté</li>
                    <li>Optimiser les parcours utilisateurs</li>
                  </ul>

                  <p className="text-sm mt-3">
                    <strong>Base légale :</strong> Intérêt légitime (amélioration du service et support client proactif)
                  </p>

                  <p className="text-sm mt-3">
                    <strong>Protection des données :</strong>
                  </p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-2">
                    <li>Masquage automatique des saisies sensibles (mots de passe)</li>
                    <li>Durée de conservation : 90 jours maximum</li>
                    <li>Accès limité à l'équipe technique uniquement</li>
                    <li>Aucun partage avec des tiers ni utilisation commerciale</li>
                  </ul>

                  <p className="text-sm mt-3">
                    <strong>Vos droits :</strong> Vous pouvez refuser l'enregistrement des sessions ou demander 
                    leur suppression en nous contactant à{" "}
                    <a href="mailto:paie@odentas.fr" className="text-blue-600 underline hover:text-blue-800">
                      paie@odentas.fr
                    </a>
                  </p>
                </div>

                <p className="mt-4">
                  Vous pouvez à tout moment configurer votre navigateur pour refuser les cookies, mais cela pourrait 
                  affecter le bon fonctionnement de certaines fonctionnalités de la plateforme.
                </p>
              </div>
            </section>

            {/* Section 9 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <FileText className="w-6 h-6 text-blue-600" />
                9. Modifications de la politique
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Nous nous réservons le droit de modifier cette politique de confidentialité à tout moment. 
                  Toute modification sera publiée sur cette page avec une date de mise à jour actualisée. 
                  Les modifications importantes vous seront notifiées par email ou via une notification dans l'application.
                </p>
                <p>
                  Nous vous encourageons à consulter régulièrement cette page pour rester informé de la manière 
                  dont nous protégeons vos données personnelles.
                </p>
              </div>
            </section>

            {/* Section 9 bis - Salariés */}
            <section id="salaries">
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <FileText className="w-6 h-6 text-blue-600" />
                9 bis. Informations spécifiques aux salariés
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-4">
                <p>
                  Si vous êtes salarié et accédez à notre plateforme via l'<strong>auto-déclaration</strong> ou 
                  la <strong>signature électronique de votre contrat</strong>, cette section vous concerne spécifiquement.
                </p>

                <div className="bg-indigo-50 border-l-4 border-indigo-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">Données collectées vous concernant</h3>
                  <p className="text-sm mb-2"><strong>Données obligatoires (pour votre contrat de travail) :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Identité : civilité, nom, prénom, nom de naissance, date et lieu de naissance</li>
                    <li>Coordonnées : adresse postale, email, téléphone</li>
                    <li>État civil : numéro de Sécurité Sociale, numéro Congés Spectacles</li>
                    <li>Bancaire : IBAN, BIC (pour le versement de vos salaires)</li>
                    <li>Justificatifs : pièce d'identité, attestation Sécurité Sociale, RIB, attestation médecine du travail</li>
                    <li>Signature électronique et traces de signature (horodatage, adresse IP)</li>
                  </ul>
                  <p className="text-sm mt-3 mb-2"><strong>Données optionnelles (avec votre consentement) :</strong></p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Enregistrement de votre navigation (incluant l'affichage de votre contrat) pour améliorer notre service</li>
                    <li>Métadonnées techniques (navigateur, système d'exploitation, résolution d'écran)</li>
                  </ul>
                </div>

                <div className="bg-green-50 border-l-4 border-green-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">Bases légales</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li><strong>Exécution du contrat (Article 6.1.b RGPD) :</strong> Les données contractuelles sont nécessaires 
                    pour la création et l'exécution de votre contrat de travail</li>
                    <li><strong>Obligation légale (Article 6.1.c RGPD) :</strong> Déclarations sociales obligatoires 
                    (URSSAF, France Travail, Audiens, AGIRC-ARRCO, CNAV, caisses de prévoyance, mutuelles santé, 
                    organismes spécifiques du spectacle [FNAS, FCAP, FCAP-SVP, CASC-SVP, Thalie Santé], AFDAS, CPNEF/AV)</li>
                    <li><strong>Consentement (Article 6.1.a RGPD) :</strong> L'enregistrement de navigation est uniquement 
                    activé si vous donnez votre consentement explicite (opt-in)</li>
                  </ul>
                </div>

                <div className="bg-blue-50 border-l-4 border-blue-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">Distinction importante : obligatoire vs optionnel</h3>
                  <p className="text-sm mb-2">
                    ✅ <strong>Refuser l'enregistrement de navigation n'affecte en aucun cas le processus de signature 
                    de votre contrat de travail.</strong> Votre contrat sera traité normalement.
                  </p>
                  <p className="text-sm">
                    Les données contractuelles (identité, coordonnées, justificatifs) sont nécessaires pour votre embauche 
                    et la gestion de votre paie. Vous ne pouvez pas refuser leur collecte dans le cadre de votre embauche.
                  </p>
                </div>

                <div className="bg-orange-50 border-l-4 border-orange-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">Enregistrement de navigation (analytics)</h3>
                  <p className="text-sm mb-2">Si vous acceptez l'enregistrement de navigation :</p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li>Vos interactions sont enregistrées (clics, déplacements, saisies)</li>
                    <li>L'affichage de votre contrat de travail est visible dans l'enregistrement</li>
                    <li>Hébergement : Union Européenne (PostHog EU)</li>
                    <li>Accès : Limité à l'équipe technique Odentas</li>
                    <li>Finalité : Améliorer l'expérience de signature électronique</li>
                    <li>Durée de conservation : 90 jours maximum</li>
                    <li>Aucun partage ni revente à des tiers</li>
                  </ul>
                  <p className="text-sm mt-2">
                    <strong>Vous pouvez révoquer votre consentement à tout moment</strong> en nous contactant à 
                    paie@odentas.fr. Les enregistrements seront alors supprimés sous 7 jours.
                  </p>
                </div>

                <div className="bg-slate-50 border-l-4 border-slate-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">Vos droits spécifiques (RGPD)</h3>
                  <p className="text-sm mb-2">En tant que salarié, vous disposez des droits suivants :</p>
                  <ul className="list-disc list-inside space-y-1 text-sm ml-4">
                    <li><strong>Droit d'accès :</strong> Obtenir une copie de toutes vos données personnelles</li>
                    <li><strong>Droit de rectification :</strong> Corriger vos données inexactes</li>
                    <li><strong>Droit à l'effacement ("droit à l'oubli") :</strong> Demander la suppression de vos données 
                    (sauf obligations légales de conservation, ex: bulletins de paie 50 ans)</li>
                    <li><strong>Droit d'opposition :</strong> Vous opposer au traitement analytics (révocation consentement)</li>
                    <li><strong>Droit à la portabilité :</strong> Récupérer vos données dans un format structuré</li>
                    <li><strong>Droit de réclamation :</strong> Déposer une plainte auprès de la CNIL si vous estimez 
                    que vos droits ne sont pas respectés</li>
                  </ul>
                  <p className="text-sm mt-2">
                    Pour exercer vos droits : <strong>paie@odentas.fr</strong> ou par courrier postal à : 
                    <strong> Odentas Media SAS, 6 rue d'Armaillé, 75017 PARIS</strong> (réponse sous 1 mois maximum)
                  </p>
                </div>

                <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg">
                  <h3 className="font-semibold text-gray-800 mb-2">Conservation des données</h3>
                  <ul className="list-disc list-inside space-y-1 text-sm">
                    <li><strong>Bulletins de paie et contrats :</strong> 50 ans (obligation légale)</li>
                    <li><strong>Justificatifs (pièce d'identité, RIB, etc.) :</strong> 5 ans après la fin du contrat</li>
                    <li><strong>Enregistrements de navigation (si consentement) :</strong> 90 jours maximum</li>
                    <li><strong>Traces de signature électronique :</strong> 10 ans (valeur probatoire)</li>
                  </ul>
                </div>
              </div>
            </section>

            {/* Section 10 */}
            <section>
              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                <Mail className="w-6 h-6 text-blue-600" />
                10. Contact
              </h2>
              <div className="prose prose-sm max-w-none text-gray-700 space-y-3">
                <p>
                  Pour toute question relative à cette politique de confidentialité ou au traitement de vos 
                  données personnelles, vous pouvez nous contacter :
                </p>
                <div className="bg-gray-50 border border-gray-200 p-4 rounded-lg">
                  <p className="font-semibold text-gray-800 mb-2">Odentas Media SAS</p>
                  <p className="text-sm space-y-1">
                    <strong>Adresse :</strong> 6 rue d'Armaillé, 75017 Paris<br />
                    <strong>Email :</strong>{" "}
                    <a href="mailto:paie@odentas.fr" className="text-blue-600 underline hover:text-blue-800">
                      paie@odentas.fr
                    </a><br />
                    <strong>RCS Paris :</strong> 907 880 348<br />
                    <strong>Responsable du traitement :</strong> Monsieur Nicolas ROL, président de Odentas Media SAS
                  </p>
                </div>
              </div>
            </section>

            {/* Footer de la politique */}
            <div className="border-t border-gray-200 pt-6 text-center">
              <p className="text-sm text-gray-500 mb-4">
                Cette politique de confidentialité s'applique exclusivement à l'utilisation de l'Espace Paie Odentas.
              </p>
              <Link 
                href="/"
                className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 font-medium transition-colors"
              >
                <ArrowLeft className="w-4 h-4" />
                Retour à l'accueil
              </Link>
            </div>
          </div>

          {/* Footer */}
          <div className="text-center mt-6 text-xs text-gray-500">
            <p>© 2021–2025 Odentas Media SAS • RCS Paris 907 880 348</p>
            <div className="mt-2 flex items-center justify-center gap-2">
              <span>Données hébergées dans l'Union Européenne</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
