Chapitre 7.3 — La CMP & le bandeau conforme

⏱️ TL;DR — Une CMP (Consent Management Platform) est le composant qui affiche le bandeau, recueille les choix par finalité, conserve la preuve et débloque les traceurs seulement après un « oui ». Un bandeau conforme suit quatre règles non négociables : refuser aussi simple qu’accepter (bouton « Tout refuser » au même niveau que « Tout accepter »), choix par finalité, pas de dark pattern, et aucun dépôt avant le choix. Le cookie wall absolu (« accepte ou tu n’entres pas ») est à proscrire. Ce chapitre montre un mauvais bandeau, puis le bon, en code.

🎯 Objectifs

• Comprendre ce que fait — et ne fait pas — une CMP.
• Coder un bandeau où refuser est aussi simple qu’accepter.
• Repérer et bannir les dark patterns (couleurs, étapes, formulations).
• Garantir qu’aucun traceur non exempté n’est déposé avant le choix.
• Conserver la preuve du consentement de façon exploitable.

Ce qu’est (et n’est pas) une CMP

Une CMP n’est pas « le bandeau » : c’est la brique logicielle qui orchestre tout le cycle du consentement.

La CMP a donc quatre responsabilités : présenter l’information et les choix, bloquer les scripts non exemptés tant que le choix n’est pas fait, appliquer le choix (déposer / ne pas déposer), et journaliser la preuve. Une CMP mal intégrée qui charge les tags quand même avant le clic est pire que pas de CMP : elle donne l’illusion de la conformité.

Le mauvais bandeau (à ne pas reproduire)

Voici le bandeau qu’on croise partout et qui cumule les manquements :

<!-- MAUVAIS : desequilibre, dark pattern, depot avant choix -->
<div class="cookie-banner">
  <p>
    Nous utilisons des cookies pour ameliorer votre experience.
    En poursuivant votre navigation, vous acceptez leur utilisation.
  </p>
 
  <!-- Un gros bouton colore qui saute aux yeux -->
  <button class="btn-accept" style="background:#16a34a;font-size:18px;padding:14px 28px;">
    Tout accepter
  </button>
 
  <!-- Le refus cache dans un petit lien gris, en dessous -->
  <a href="#" class="tiny-grey-link" style="color:#bbb;font-size:11px;">
    continuer sans accepter
  </a>
</div>
 
<!-- ...et pendant ce temps, les tags sont deja charges -->
<script src="https://exemple-analytics.tld/tag.js"></script>
<script src="https://exemple-ads.tld/pixel.js"></script>

Les fautes, une à une : la mention « en poursuivant, vous acceptez » (interdite) ; un bouton « Tout accepter » visuellement dominant face à un refus réduit à un lien gris minuscule (dark pattern par le contraste) ; « continuer sans accepter » est ambigu et pas au même niveau que « Tout accepter » ; et surtout les scripts sont déjà chargés avant tout choix. Chacune de ces fautes a été sanctionnée dans le plan cookies de la CNIL.

⚠️ Piège — Le dark pattern n’est pas qu’une question de bouton caché : il se niche dans le nombre d’étapes (accepter en 1 clic, refuser en 3 écrans), la couleur (accepter en vert vif, refuser en gris délavé), la formulation culpabilisante (« Non merci, je préfère une expérience dégradée »), ou un pré-cochage des finalités. Toute asymétrie entre accepter et refuser est suspecte.

Le bon bandeau

Le même bandeau, corrigé : deux boutons de même poids au premier niveau, un accès à la personnalisation, et aucun script non exempté avant le clic.

<!-- BON : refuser aussi simple qu'accepter, choix par finalite, rien de depose avant -->
<div class="cookie-banner" role="dialog" aria-label="Gestion des cookies">
  <p>
    Nous deposons des traceurs pour mesurer l'audience et proposer des videos.
    Vous pouvez les accepter, les refuser, ou choisir par finalite.
    <a href="/cookies">En savoir plus</a>
  </p>
 
  <div class="cookie-actions">
    <!-- Meme taille, meme style, meme niveau : symetrie parfaite -->
    <button class="btn" data-action="accept-all">Tout accepter</button>
    <button class="btn" data-action="reject-all">Tout refuser</button>
    <button class="btn btn-secondary" data-action="customize">Personnaliser</button>
  </div>
</div>

Le panneau « Personnaliser » propose un choix par finalité, interrupteurs éteints par défaut :

<!-- Choix granulaire : chaque finalite separee, tout est OFF au depart -->
<form class="cookie-preferences">
  <fieldset>
    <legend>Cookies strictement necessaires</legend>
    <!-- Non desactivables : ils sont exemptes, on l'explique -->
    <label><input type="checkbox" checked disabled /> Toujours actifs</label>
  </fieldset>
 
  <fieldset>
    <legend>Mesure d'audience</legend>
    <label><input type="checkbox" name="analytics" /> Autoriser</label>
  </fieldset>
 
  <fieldset>
    <legend>Videos et reseaux sociaux</legend>
    <label><input type="checkbox" name="social" /> Autoriser</label>
  </fieldset>
 
  <button type="submit">Enregistrer mes choix</button>
</form>

Côté logique, la règle d’or « pas de dépôt avant le choix » se code en n’injectant les scripts qu’après un consentement explicite pour leur finalité :

// Les traceurs non exemptes ne se chargent qu'APRES le consentement de leur finalite
type Consentement = {
  analytics: boolean
  social: boolean
  horodatage: string     // date ISO du choix - pour la preuve
  version: string        // version du bandeau affiche
}
 
function appliquerConsentement(choix: Consentement) {
  // Rien d'exempte n'a besoin d'attendre ; tout le reste, oui.
  if (choix.analytics) chargerScript("https://exemple-analytics.tld/tag.js")
  if (choix.social) chargerLecteursVideo()
  // Aucun script pub/analytics/social n'est present dans le HTML initial.
 
  journaliserPreuve(choix)   // quoi, quand, quelle version - accountability
}

💡 Réflexe — Fais du refus l’état par défaut du code : à l’état initial, zéro traceur non exempté. Le consentement ne fait qu’ajouter des scripts, jamais l’inverse. Ainsi, si ta CMP tombe en panne ou tarde à charger, le site reste conforme (rien n’est déposé) au lieu de fuir des données. La conformité doit être l’état de repos, pas un correctif.

Le cookie wall : pas d’absolu

Un cookie wall consiste à conditionner l’accès au site à l’acceptation des traceurs (« accepte ou tu n’entres pas »). Un cookie wall absolu heurte le caractère libre du consentement (chapitre 7.1) : si refuser prive de tout accès, le choix n’est pas vraiment libre. La CNIL apprécie sa licéité au cas par cas (existence d’une alternative réelle d’accès, notamment). Le réflexe sûr : ne pas bloquer l’accès au contenu principal derrière le consentement aux traceurs non essentiels.

🔒 Côté personne concernée — Un bandeau conforme se reconnaît instantanément : deux boutons équivalents, un refus immédiat, pas de culpabilisation, et le contenu accessible qu’on accepte ou non. La personne qui refuse ne doit pas être punie (contenu dégradé, murs, relances). Le respect se mesure à ce que vit celui qui dit non.

🧭 Sur FormaCampus — La CMP du site vitrine affiche « Tout accepter » et « Tout refuser » côte à côte, identiques, plus « Personnaliser » (mesure d’audience / vidéos séparées). Rien n’est chargé à l’arrivée : la vidéo YouTube de la page « Nos formations » n’apparaît qu’après consentement (sinon, une vignette cliquable qui ne charge le lecteur qu’au clic). Chaque choix part dans le journal de preuve avec horodatage et version. Un lien « Gérer mes cookies » en pied de page rouvre le panneau. L’atelier du chapitre 7.5 assemble tout ça.

📚 Le texte — La règle « refuser aussi simple qu’accepter », l’interdiction des dark patterns et l’exigence de preuve viennent des lignes directrices et de la recommandation CNIL 2020 sur les cookies (application de l’art. 82 loi I&L). Le plan cookies de la CNIL du 3 septembre 2025 a sanctionné ces manquements — Google 325 M€, Shein 150 M€ — signe que le sujet n’est pas cosmétique.

✏️ Exercices

Exercice 1 — Répare le bandeau. On te livre un bandeau avec un seul bouton « Tout accepter » vert et un lien gris « paramétrer » menant à un écran où il faut décocher 12 partenaires un par un. Liste les manquements et décris le bandeau corrigé.

Exercice 2 — Où est le dépôt ? Un dev affirme : « Ma CMP est nickel, elle bloque les cookies. » Tu ouvres l’onglet réseau : tag.js et pixel.js sont chargés au premier rendu, avant tout clic. Que réponds-tu ?

Exercice 3 — Cookie wall. Un site d’actualité veut : « soit tu acceptes tous les cookies pub, soit tu n’accèdes à rien ». Est-ce autorisé ? Que proposer ?

🧠 Quiz de révision

Chapitre suivant : Les exemptions — ce qui échappe au consentement : traceurs strictement nécessaires (panier, authentification, équilibrage de charge) et mesure d’audience « exemptée » quand elle respecte les critères CNIL, avec des outils orientés vie privée.