7.8 KiB

Raw Permalink Blame History

name	description
eu-legal-compliance	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 :

Vous implémentez un bandeau ou un gestionnaire de consentement aux cookies (Cookie Banner / CMP).
Vous créez des formulaires de contact, d'inscription, de paiement ou de collecte de données personnelles.
Vous rédigez ou intégrez les pages légales obligatoires (Mentions Légales, Politique de Confidentialité, CGU/CGV).
Vous auditez la conformité au European Accessibility Act (EAA) en vigueur depuis le 28 juin 2025 pour les services marchands et B2C.
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).

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

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).
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é.
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 :

É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).
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.
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é.

7.8 KiB Raw Permalink Blame History