feat(rgpd): Système consentement analytics salariés + politique exhaustive
- Popup consentement salariés: bandeau style identique employeurs, card Odentas, détails visibles, bouton Accepter visible (sky-600) - Hook useAnalyticsConsent: détection pages salariés (/auto-declaration, /signature-salarie) - ConsentManager: orchestrateur affichage popups selon contexte B2B/B2C - PostHogProvider: init conditionnelle au consentement salarié - Politique Section 9 bis: liste exhaustive organismes (Audiens, AGIRC-ARRCO, CNAV, FNAS, FCAP, etc.), adresse postale pour exercice droits - PopupInfoSuivi: card Odentas Media SAS engagement transparence - Conformité RGPD: B2B (intérêt légitime) + B2C (consentement opt-in Article 6.1.a)
This commit is contained in:
parent
7079ab0aa3
commit
9cb4ed09a4
7 changed files with 829 additions and 56 deletions
|
|
@ -5,7 +5,8 @@ import Providers from "@/components/Providers";
|
|||
import ProgressBar from "@/components/ProgressBar";
|
||||
import { PostHogPageView } from "@/components/PostHogPageView";
|
||||
import PostHogIdentifier from "@/components/PostHogIdentifier";
|
||||
import PopupInfoSuivi from "@/components/PopupInfoSuivi";
|
||||
import ConsentManager from "@/components/ConsentManager";
|
||||
import { useAnalyticsConsent } from "@/hooks/useAnalyticsConsent";
|
||||
import { useEffect, Suspense } from "react";
|
||||
|
||||
/**
|
||||
|
|
@ -91,8 +92,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||
<PostHogIdentifier />
|
||||
</Suspense>
|
||||
{children}
|
||||
{/* Popup d'information sur la confidentialité et le suivi */}
|
||||
<PopupInfoSuivi policyUrl="/politique-confidentialite" />
|
||||
{/* Gestion du consentement selon le contexte (B2B ou salarié) */}
|
||||
<ConsentManager policyUrl="/politique-confidentialite" />
|
||||
</Providers>
|
||||
{/* BugReporter temporairement masqué */}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
Protection des données personnelles
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-2">
|
||||
Dernière mise à jour : 14 octobre 2025
|
||||
Dernière mise à jour : 25 octobre 2025
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,49 +68,171 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
</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 et de contrats, nous collectons les catégories
|
||||
de données suivantes :
|
||||
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">Données d'identification des entreprises clientes :</h3>
|
||||
<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, forme juridique</li>
|
||||
<li>Adresse du siège social</li>
|
||||
<li>Coordonnées de contact (email, téléphone)</li>
|
||||
<li>Informations de facturation et comptables</li>
|
||||
<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">Données des utilisateurs (gestionnaires et administrateurs) :</h3>
|
||||
<ul className="list-disc list-inside space-y-1 text-sm">
|
||||
<li>Nom, prénom, email professionnel</li>
|
||||
<li>Rôle et permissions dans l'application</li>
|
||||
<li>Logs de connexion et d'activité</li>
|
||||
<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">Données des salariés (intermittents du spectacle) :</h3>
|
||||
<ul className="list-disc list-inside space-y-1 text-sm">
|
||||
<li>État civil : nom, prénom, date et lieu de naissance</li>
|
||||
<li>Numéro de sécurité sociale, coordonnées</li>
|
||||
<li>RIB pour les virements de salaire</li>
|
||||
<li>Contrats de travail (CDDU), bulletins de paie</li>
|
||||
<li>Documents administratifs (attestations médicales, pièces d'identité, etc.)</li>
|
||||
<li>Informations relatives aux cotisations sociales</li>
|
||||
<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">Données de production :</h3>
|
||||
<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>Informations sur les spectacles et productions</li>
|
||||
<li>Dates et lieux de représentation</li>
|
||||
<li>Numéros d'appel et planning</li>
|
||||
<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>
|
||||
|
||||
|
|
@ -123,9 +245,9 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
<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 CDDU</li>
|
||||
<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, Pôle Emploi, Afdas, etc.)</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>
|
||||
|
|
@ -159,40 +281,266 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
<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-3">
|
||||
<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>
|
||||
<ul className="list-disc list-inside space-y-2">
|
||||
<li><strong>Organismes sociaux :</strong> URSSAF, Pôle Emploi, Afdas, Audiens, caisses de retraite (pour les déclarations obligatoires)</li>
|
||||
<li><strong>Prestataires techniques :</strong> hébergement (Supabase/AWS France), signature électronique (DocuSeal), génération de PDF, envoi d'emails (AWS SES)</li>
|
||||
<li><strong>Prestataires de paiement :</strong> GoCardless pour les prélèvements SEPA</li>
|
||||
<li><strong>Administration fiscale :</strong> dans le cadre de nos obligations déclaratives</li>
|
||||
</ul>
|
||||
|
||||
<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>🇫🇷 Hébergement en France :</strong> Toutes vos données sont hébergées sur des serveurs
|
||||
situés en France (région AWS eu-west-3 à Paris) et ne font l'objet d'aucun transfert en dehors
|
||||
de l'Union Européenne.
|
||||
<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">
|
||||
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.
|
||||
<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>
|
||||
|
|
@ -247,11 +595,17 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
<a href="mailto:paie@odentas.fr" className="text-blue-600 underline hover:text-blue-800">
|
||||
paie@odentas.fr
|
||||
</a>
|
||||
{" "}ou par courrier postal à notre siège social. Nous nous engageons à répondre à votre
|
||||
{" "}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
|
||||
|
|
@ -273,18 +627,77 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
<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 technologies similaires
|
||||
8. Cookies et analyse d'utilisation
|
||||
</h2>
|
||||
<div className="prose prose-sm max-w-none text-gray-700 space-y-3">
|
||||
<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 via PostHog (anonymisé) pour améliorer nos services</li>
|
||||
<li><strong>Cookies analytiques :</strong> mesure d'audience et analyse d'utilisation via PostHog pour améliorer nos services</li>
|
||||
</ul>
|
||||
<p>
|
||||
|
||||
<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>
|
||||
|
|
@ -310,6 +723,110 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
</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">
|
||||
|
|
@ -330,7 +847,7 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
paie@odentas.fr
|
||||
</a><br />
|
||||
<strong>RCS Paris :</strong> 907 880 348<br />
|
||||
<strong>Responsable du traitement :</strong> Renaud BREVIERE-ABRAHAM
|
||||
<strong>Responsable du traitement :</strong> Monsieur Nicolas ROL, président de Odentas Media SAS
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -355,8 +872,7 @@ export default function PolitiqueConfidentialiteContent() {
|
|||
<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 role="img" aria-label="Drapeau français">🇫🇷</span>
|
||||
<span>Données hébergées en France</span>
|
||||
<span>Données hébergées dans l'Union Européenne</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
28
components/ConsentManager.tsx
Normal file
28
components/ConsentManager.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
"use client";
|
||||
|
||||
import { useAnalyticsConsent } from "@/hooks/useAnalyticsConsent";
|
||||
import PopupInfoSuivi from "./PopupInfoSuivi";
|
||||
import PopupAnalyticsConsent from "./PopupAnalyticsConsent";
|
||||
|
||||
export default function ConsentManager({ policyUrl = "/politique-confidentialite" }: { policyUrl?: string }) {
|
||||
const { isEmployeePage, needsConsent, acceptConsent, rejectConsent } = useAnalyticsConsent();
|
||||
|
||||
// Si on est sur une page salarié et qu'on a besoin du consentement
|
||||
if (isEmployeePage && needsConsent) {
|
||||
return (
|
||||
<PopupAnalyticsConsent
|
||||
onAccept={acceptConsent}
|
||||
onReject={rejectConsent}
|
||||
policyUrl={`${policyUrl}#salaries`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// Sinon, afficher le popup classique B2B (seulement si pas sur page salarié)
|
||||
if (!isEmployeePage) {
|
||||
return <PopupInfoSuivi policyUrl={policyUrl} />;
|
||||
}
|
||||
|
||||
// Si on est sur page salarié mais consentement déjà donné ou refusé, ne rien afficher
|
||||
return null;
|
||||
}
|
||||
135
components/PopupAnalyticsConsent.tsx
Normal file
135
components/PopupAnalyticsConsent.tsx
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { BarChart3, Check } from "lucide-react";
|
||||
|
||||
export default function PopupAnalyticsConsent({
|
||||
onAccept,
|
||||
onReject,
|
||||
policyUrl = "/politique-confidentialite#salaries",
|
||||
}: {
|
||||
onAccept: () => void;
|
||||
onReject: () => void;
|
||||
policyUrl?: string;
|
||||
}) {
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Afficher le bandeau après un court délai
|
||||
const t = setTimeout(() => setVisible(true), 600);
|
||||
return () => clearTimeout(t);
|
||||
}, []);
|
||||
|
||||
const handleAccept = () => {
|
||||
onAccept();
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
const handleReject = () => {
|
||||
onReject();
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{visible && (
|
||||
<motion.aside
|
||||
role="dialog"
|
||||
aria-live="polite"
|
||||
aria-label="Consentement pour l'analyse de navigation"
|
||||
initial={{ opacity: 0, y: 24, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 24, scale: 0.98 }}
|
||||
transition={{ type: "spring", stiffness: 380, damping: 28 }}
|
||||
className="fixed left-4 bottom-4 z-[60] max-w-sm w-[92vw] sm:w-96"
|
||||
>
|
||||
<div className="relative overflow-hidden rounded-2xl border border-slate-200 bg-gradient-to-br from-white to-slate-50 backdrop-blur shadow-lg">
|
||||
<div className="flex items-start gap-3 p-4">
|
||||
{/* Icône */}
|
||||
<div className="mt-0.5 shrink-0 rounded-xl bg-gradient-to-br from-sky-100 to-blue-100 p-2">
|
||||
<BarChart3 className="h-5 w-5 text-sky-700" />
|
||||
</div>
|
||||
|
||||
{/* Contenu principal */}
|
||||
<div className="text-sm leading-snug text-slate-700">
|
||||
<p className="font-semibold text-slate-900 mb-1.5">Améliorer votre expérience</p>
|
||||
|
||||
<div className="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-lg mb-3">
|
||||
<p className="text-sm text-blue-900">
|
||||
<strong>Odentas Media SAS</strong> s'engage pour une transparence totale.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Pour améliorer le processus de transmission de votre état-civil et de vos justificatifs et le processus de signature électronique de votre contrat de travail, nous enregistrons votre navigation.
|
||||
</p>
|
||||
|
||||
{/* Détails */}
|
||||
<div className="mt-3 pt-3 border-t border-slate-200 space-y-2 text-xs">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
|
||||
<span>Hébergement Union Européenne</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
|
||||
<span>Données ne quittant jamais l'UE</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
|
||||
<span>Uniquement pour améliorer notre service</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
|
||||
<span>Jamais partagées ni revendues</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
|
||||
<span>Accès limité équipe Odentas</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<Check className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
|
||||
<span>Suppression après 90 jours</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-sky-50 border border-sky-100 p-3 rounded-lg">
|
||||
<p className="text-slate-600">
|
||||
Refuser n'affecte pas le processus de signature de votre contrat de travail.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Boutons d'action */}
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleReject}
|
||||
className="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium border border-slate-300 bg-white hover:bg-slate-50 text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 transition-colors"
|
||||
>
|
||||
Refuser
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAccept}
|
||||
className="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold shadow-md border border-sky-600 bg-sky-600 hover:bg-sky-700 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-colors"
|
||||
>
|
||||
<Check className="h-4 w-4 mr-1.5" />
|
||||
Accepter
|
||||
</button>
|
||||
<a
|
||||
href={policyUrl}
|
||||
className="ml-auto text-xs underline underline-offset-2 decoration-sky-400 hover:decoration-sky-600 text-sky-700 font-medium transition-colors"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
Politique de Confidentialité
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.aside>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
|
|
@ -56,10 +56,17 @@ export default function PopupInfoSuivi({
|
|||
</div>
|
||||
<div className="text-sm leading-snug text-slate-700">
|
||||
<p className="font-semibold text-slate-900 mb-1.5">Transparence & confidentialité</p>
|
||||
|
||||
<div className="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-lg mb-4">
|
||||
<p className="text-sm text-blue-900">
|
||||
<strong>Odentas Media SAS</strong> s'engage pour une transparence totale.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
L'Espace Paie utilise des cookies essentiels pour votre authentification et votre sécurité,
|
||||
ainsi qu'un outil d'analyse pour améliorer nos services.
|
||||
Vos données et celles de vos salariés sont hébergées dans l'Union Européenne 🇪🇺 et ne sortent jamais de l'UE.
|
||||
ainsi qu'un outil d'analyse pour améliorer nos services (incluant l'enregistrement de sessions de navigation).
|
||||
Vos données et celles de vos salariés sont hébergées dans l'Union Européenne 🇪🇺 et ne sortent jamais de l'UE.
|
||||
Elles ne sont jamais revendues ni partagées avec des tiers (hors transmission obligatoire aux organismes sociaux et caisses de retraite dans le cadre de la gestion de paie).
|
||||
En utilisant l'Espace Paie, vous acceptez notre{" "}
|
||||
<a
|
||||
|
|
@ -71,9 +78,7 @@ export default function PopupInfoSuivi({
|
|||
Politique de Confidentialité
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
</p> <div className="mt-3 flex items-center gap-2">
|
||||
<button
|
||||
onClick={acknowledge}
|
||||
className="inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium shadow-sm border border-sky-200 bg-sky-50 hover:bg-sky-100 text-sky-900 focus:outline-none focus:ring-2 focus:ring-sky-400 transition-colors"
|
||||
|
|
|
|||
|
|
@ -3,9 +3,29 @@
|
|||
import posthog from 'posthog-js';
|
||||
import { PostHogProvider as PHProvider } from 'posthog-js/react';
|
||||
import { useEffect } from 'react';
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
const EMPLOYEE_PAGES = ['/auto-declaration', '/signature-salarie'];
|
||||
const CONSENT_KEY = 'odentas_analytics_consent_employee';
|
||||
|
||||
export function PostHogProvider({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
useEffect(() => {
|
||||
// Vérifier si on est sur une page salarié
|
||||
const isEmployeePage = EMPLOYEE_PAGES.some(page => pathname?.includes(page));
|
||||
|
||||
// Si page salarié, vérifier le consentement
|
||||
if (isEmployeePage) {
|
||||
const consent = localStorage.getItem(CONSENT_KEY);
|
||||
|
||||
// Si pas de consentement ou refusé, ne pas initialiser PostHog
|
||||
if (consent !== 'accepted') {
|
||||
console.log('PostHog: Désactivé (page salarié sans consentement)');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialiser PostHog uniquement côté client et une seule fois
|
||||
if (typeof window !== 'undefined' && !posthog.__loaded) {
|
||||
const key = process.env.NEXT_PUBLIC_POSTHOG_KEY;
|
||||
|
|
@ -27,8 +47,10 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
|
|||
}
|
||||
},
|
||||
});
|
||||
|
||||
console.log('PostHog: Initialisé', isEmployeePage ? '(salarié avec consentement)' : '(client B2B)');
|
||||
}
|
||||
}, []);
|
||||
}, [pathname]);
|
||||
|
||||
return <PHProvider client={posthog}>{children}</PHProvider>;
|
||||
}
|
||||
|
|
|
|||
66
hooks/useAnalyticsConsent.ts
Normal file
66
hooks/useAnalyticsConsent.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
const EMPLOYEE_PAGES = ["/auto-declaration", "/signature-salarie"];
|
||||
const CONSENT_KEY = "odentas_analytics_consent_employee";
|
||||
|
||||
export type ConsentStatus = "pending" | "accepted" | "rejected";
|
||||
|
||||
export function useAnalyticsConsent() {
|
||||
const pathname = usePathname();
|
||||
const [consentStatus, setConsentStatus] = useState<ConsentStatus>("pending");
|
||||
|
||||
// Détecte si on est sur une page salarié
|
||||
const isEmployeePage = EMPLOYEE_PAGES.some(page => pathname?.includes(page));
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEmployeePage) {
|
||||
// Pas sur une page salarié, pas besoin de consentement
|
||||
setConsentStatus("accepted");
|
||||
return;
|
||||
}
|
||||
|
||||
// Vérifier si un consentement existe déjà
|
||||
try {
|
||||
const savedConsent = localStorage.getItem(CONSENT_KEY);
|
||||
if (savedConsent === "accepted") {
|
||||
setConsentStatus("accepted");
|
||||
} else if (savedConsent === "rejected") {
|
||||
setConsentStatus("rejected");
|
||||
} else {
|
||||
setConsentStatus("pending");
|
||||
}
|
||||
} catch {
|
||||
setConsentStatus("pending");
|
||||
}
|
||||
}, [isEmployeePage, pathname]);
|
||||
|
||||
const acceptConsent = () => {
|
||||
try {
|
||||
localStorage.setItem(CONSENT_KEY, "accepted");
|
||||
setConsentStatus("accepted");
|
||||
} catch {
|
||||
console.error("Impossible de sauvegarder le consentement");
|
||||
}
|
||||
};
|
||||
|
||||
const rejectConsent = () => {
|
||||
try {
|
||||
localStorage.setItem(CONSENT_KEY, "rejected");
|
||||
setConsentStatus("rejected");
|
||||
} catch {
|
||||
console.error("Impossible de sauvegarder le refus");
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
isEmployeePage,
|
||||
consentStatus,
|
||||
hasConsent: consentStatus === "accepted",
|
||||
needsConsent: isEmployeePage && consentStatus === "pending",
|
||||
acceptConsent,
|
||||
rejectConsent,
|
||||
};
|
||||
}
|
||||
Loading…
Reference in a new issue