147 lines
7.8 KiB
Markdown
147 lines
7.8 KiB
Markdown
---
|
|
name: eu-legal-compliance
|
|
description: >-
|
|
Enforce European web regulations: GDPR/RGPD (data minimization, user rights, consent),
|
|
ePrivacy & CNIL/EDPB guidelines (cookie consent without dark patterns, equal accept/reject),
|
|
European Accessibility Act (EAA 2025 / EN 301 549), and mandatory legal notices (LCEN, hosting, consumer mediation).
|
|
---
|
|
|
|
# Conformité Web & Réglementation Européenne (RGPD, ePrivacy, EAA, LCEN)
|
|
|
|
Ce skill régit la conformité juridique et technique stricte aux directives et règlements de l'Union Européenne (RGPD, Directive ePrivacy, European Accessibility Act EAA 2025, recommandations CNIL et CEPD/EDPB).
|
|
|
|
---
|
|
|
|
## 🎯 Déclencheurs d'Activation
|
|
|
|
Activez ce skill dès que :
|
|
1. Vous implémentez un bandeau ou un gestionnaire de consentement aux cookies (*Cookie Banner / CMP*).
|
|
2. Vous créez des formulaires de contact, d'inscription, de paiement ou de collecte de données personnelles.
|
|
3. Vous rédigez ou intégrez les pages légales obligatoires (Mentions Légales, Politique de Confidentialité, CGU/CGV).
|
|
4. Vous auditez la conformité au **European Accessibility Act (EAA)** en vigueur depuis le 28 juin 2025 pour les services marchands et B2C.
|
|
5. Vous mettez en place des flux de suppression ou d'export de données personnelles (Droit à l'oubli - RGPD Art. 17).
|
|
|
|
---
|
|
|
|
## 🍪 1. Directive ePrivacy & Règles CNIL / EDPB (Gestion des Cookies)
|
|
|
|
### La Règle Fondamentale : Zéro Dark Pattern & Égalité Parfaite
|
|
Selon les lignes directrices de la CNIL et du Comité Européen de la Protection des Données (EDPB) :
|
|
- **Refuser doit être aussi simple qu'accepter** : Le bouton « Tout refuser » doit être situé au **même niveau**, avoir la **même taille**, la **même forme** et un **contraste visuel équivalent** au bouton « Tout accepter ».
|
|
- **Interdiction formelle** de reléguer le refus derrière un lien discret « Continuer sans accepter » ou dans un sous-menu « Paramétrer mes choix » pendant que « Tout accepter » est mis en valeur en pleine couleur.
|
|
- **Blocage préalable (*Opt-in*)** : Aucun script tiers non essentiel (Google Analytics, Pixel Meta, Hotjar, TikTok) ne doit être chargé ou exécuté **AVANT** le recueil actif du consentement.
|
|
- **Durée de conservation** : Le choix (acceptation ou refus) doit être conservé pendant une durée raisonnable (6 mois selon la CNIL).
|
|
|
|
### Exemple de Composant Cookie Banner 100% Conforme (React / Tailwind)
|
|
|
|
```tsx
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
export const CompliantCookieBanner = () => {
|
|
const [consentGiven, setConsentGiven] = useState<boolean | null>(null);
|
|
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem('eu_cookie_consent');
|
|
if (saved) setConsentGiven(true);
|
|
}, []);
|
|
|
|
if (consentGiven !== null) return null;
|
|
|
|
const handleConsent = (accepted: boolean) => {
|
|
localStorage.setItem('eu_cookie_consent', accepted ? 'accepted' : 'rejected');
|
|
localStorage.setItem('eu_cookie_date', new Date().toISOString());
|
|
setConsentGiven(true);
|
|
if (accepted) {
|
|
// Activer les traceurs analytics ici
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
role="region"
|
|
aria-label="Gestion des cookies et confidentialité"
|
|
className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:max-w-md p-5 rounded-xl z-50
|
|
bg-[oklch(0.18_0.01_260)] border border-[oklch(1_0_0/0.1)] shadow-2xl text-sm"
|
|
>
|
|
<p className="font-semibold text-white mb-2">Respect de votre vie privée</p>
|
|
<p className="text-white/70 text-xs leading-relaxed mb-4">
|
|
Nous utilisons des cookies strictement nécessaires au fonctionnement du site. Avec votre accord, nous utilisons également des cookies de mesure d'audience anonymes.
|
|
</p>
|
|
|
|
{/* Égalité stricte : Deux boutons identiques côte à côte */}
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => handleConsent(false)}
|
|
className="flex-1 px-3 py-2 rounded-lg text-xs font-medium text-white/90 bg-white/10 hover:bg-white/15
|
|
border border-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-indigo-400"
|
|
>
|
|
Tout refuser
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleConsent(true)}
|
|
className="flex-1 px-3 py-2 rounded-lg text-xs font-medium text-white bg-indigo-600 hover:bg-indigo-500
|
|
transition-colors focus-visible:ring-2 focus-visible:ring-indigo-400"
|
|
>
|
|
Tout accepter
|
|
</button>
|
|
</div>
|
|
<div className="mt-3 text-center">
|
|
<a href="/politique-confidentialite" className="text-[11px] text-white/50 underline hover:text-white/80">
|
|
En savoir plus et paramétrer
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## 🔒 2. RGPD (Règlement UE 2016/679) : Formulaires & Données Personnelles
|
|
|
|
1. **Minimisation des données (Art. 5.1.c)** : Ne collectez que les données strictement indispensables (ex: ne pas demander le numéro de téléphone ou la date de naissance pour une simple newsletter).
|
|
2. **Case à cocher d'information explicite** :
|
|
- Case non pré-cochée obligatoire sous tout formulaire collectant des données.
|
|
- Mention claire de la finalité et lien vers la politique de confidentialité.
|
|
3. **Droit à l'effacement et portabilité (Art. 17 & 20)** :
|
|
- Toute application SaaS doit fournir un mécanisme clair permettant à l'utilisateur de supprimer définitivement son compte et ses données (*Hard delete* ou anonymisation irréversible sous 30 jours).
|
|
|
|
---
|
|
|
|
## ♿ 3. European Accessibility Act (EAA - Directive UE 2019/882)
|
|
|
|
Depuis le **28 juin 2025**, l'accessibilité numérique est une **obligation légale** pour le secteur privé en Europe (e-commerce, banques, billetteries, SaaS B2C) :
|
|
- **Référentiel Technique** : Norme européenne **EN 301 549** (alignée sur **WCAG 2.1 / 2.2 Niveau AA**).
|
|
- **Déclaration d'Accessibilité Obligatoire** : Chaque site doit publier une page accessible déclarant son niveau de conformité, listant les non-conformités éventuelles et fournissant un moyen de contact direct pour signaler une difficulté.
|
|
- **Accessibilité du bandeau cookie** : Le bandeau de consentement doit impérativement être navigable au clavier et vocalisable par les lecteurs d'écran.
|
|
|
|
---
|
|
|
|
## 📜 4. Mentions Légales Obligatoires (Droit Français / LCEN & Directive E-commerce)
|
|
|
|
Tout site accessible au public en France / UE doit comporter une page `/mentions-legales` facilement accessible contenant :
|
|
1. **Éditeur du site** :
|
|
- Nom / Raison sociale, forme juridique, capital social.
|
|
- Adresse du siège social, numéro d'inscription au RCS (SIREN/SIRET).
|
|
- Numéro de TVA intracommunautaire.
|
|
- Contact : adresse email et numéro de téléphone non surtaxé.
|
|
- Directeur de la publication (nom et prénom).
|
|
2. **Hébergeur** :
|
|
- Nom de l'hébergeur (ex: Vercel Inc, OVHcloud, AWS).
|
|
- Raison sociale, adresse postale complète et numéro de téléphone de l'hébergeur.
|
|
3. **Médiation de la consommation (Sites marchands B2C)** :
|
|
- Coordonnées du médiateur de la consommation agréé auquel le consommateur peut faire appel gratuitement.
|
|
|
|
---
|
|
|
|
## 📋 Checklist de Conformité Réglementaire Européenne
|
|
|
|
- [ ] Le bandeau cookies présente un bouton « Tout refuser » aussi accessible et visible que « Tout accepter ».
|
|
- [ ] Aucun cookie tiers ou traceur n'est déposé avant un clic positif de l'utilisateur.
|
|
- [ ] La page `/mentions-legales` renseigne l'éditeur complet, le n° RCS/TVA et l'hébergeur avec son adresse et téléphone.
|
|
- [ ] La page `/politique-confidentialite` précise les finalités, la base légale, la durée de conservation et les droits d'accès/suppression.
|
|
- [ ] Les formulaires disposent d'une mention d'information sans case pré-cochée.
|
|
- [ ] Le site respecte les exigences de l'EAA (WCAG 2.1/2.2 AA) et publie sa déclaration d'accessibilité.
|