@charset "UTF-8"; /* * chine.in — bandeau de consentement * ============================================================================ * * Aucune couleur n'est écrite ici : tout vient des jetons sémantiques de * site.css. Le mode sombre et les teintes par rubrique suivent donc sans une * règle de plus, et une refonte de la palette n'a pas à repasser par ce fichier. * * Le bandeau est servi dans le pied de page et reste invisible tant que le * script ne l'a pas révélé : un visiteur qui a déjà choisi ne doit pas voir * apparaître puis disparaître un bandeau à chaque page. * * ## LE FOND NOIR — 18 AOÛT 2026, ET IL NE VIENT PAS DE NULLE PART * * L'éditeur a demandé « la bannière de consentement plus belle / plus classe * (fond noir) et en modale centrée sur la page ». Le noir aurait pu s'écrire en * dur ; il ne l'est pas, et c'est ce qui fait que la boîte a l'air d'appartenir * à ce site plutôt qu'à un gestionnaire de consentement acheté ailleurs. * * CE SITE A DÉJÀ SON NOIR, ET IL EN A DEUX. La barre de navigation et le pied * de page sont sombres depuis toujours, dans les DEUX thèmes : `--barre` * (#0f1013 en clair, #0a0b0d en sombre), son encre `--barre-texte` et * `--barre-texte-fort`, son bord `--barre-bord`, et l'encre du pied * `--pied-texte`. Ces jetons-là ne basculent pas avec le thème — ils décrivent * une surface qui est noire par nature. C'est exactement ce qu'il faut ici : une * boîte qui doit rester noire même quand le visiteur lit en clair, sans qu'on * ait à la sortir du système de couleurs pour autant. * * NE PAS EMPLOYER `--surface` NI `--encre` DANS CETTE BOÎTE. Ils suivent le * thème : en mode sombre `--surface` vaut #16181d, presque le noir du fond, et * la boîte disparaîtrait dans son propre voile. Le contraste a été mesuré sur * les jetons retenus, il ne survivrait pas à une substitution « équivalente ». * * ## LE POINT JURIDIQUE, QUE LE SOIN VISUEL NE DOIT PAS ENTAMER * * Une boîte qui plaide est une boîte qui pousse. Ce qu'elle n'a pas le droit de * pousser, c'est le choix lui-même : `.consentement__bouton` n'a AUCUNE variante * primaire, et il ne faut pas en ajouter — voir le commentaire qui l'accompagne. * Le titre convainc, le texte explique, les deux boutons se valent au pixel. */ /* ========================================================================== Le bandeau ========================================================================== */ .consentement { position: fixed; inset: auto 0 0 0; z-index: 900; display: flex; justify-content: center; padding: var(--marge-page); /* `pointer-events: none` sur le conteneur, rétabli sur la boîte : en régime d'opposition, le bandeau ne doit pas intercepter les clics destinés à la page qu'il chevauche. */ pointer-events: none; } .consentement[hidden] { display: none; } /* * LA BOÎTE DÉFILE, MAIS SES BOUTONS RESTENT — voir `.consentement__actions`. * * Elle plafonne à 80 % de la hauteur visible. Sur un téléphone de 360 × 640, le * texte du régime d'opt-in fait à lui seul neuf lignes : si les deux boutons * partaient avec le texte, « Tout refuser » passerait sous le pli et le refus * deviendrait plus coûteux que l'acceptation — le déséquilibre exact que ce * fichier existe pour éviter. * * IL N'Y A PAS DE CONTENEUR INTERNE POUR CELA, ET C'EST UNE ÉCONOMIE MESURÉE. * Un `
` autour des textes aurait été plus * simple à écrire ; il pesait 40 octets sur CHAQUE page du site, et les pages de * carrefour du dictionnaire — 123 000 vues par jour — tiennent sous un plafond * de 32 000 octets que la refonte faisait sauter * (`PageIntrouvableTest::testLeCarrefourResteSousSonBudget`). Le collant fait le * même travail sans un octet de balisage. * * `100dvh` et non `100vh` : sur mobile, `vh` compte la barre d'adresse rétractée * et vaut donc plus que ce qu'on voit à l'arrivée. Le repli `vh` est écrit * au-dessus pour les navigateurs qui ignorent `dvh`. * * 34rem plutôt que 46 : à la ligne, une mesure de lecture confortable tourne * autour de 65 caractères, et 46rem en donnait 90 sur un écran large — un texte * qu'on parcourt au lieu de le lire, dans la boîte où il faut lire. */ .consentement__boite { pointer-events: auto; width: min(100%, 34rem); max-height: min(80vh, 40rem); max-height: min(80dvh, 40rem); overflow-y: auto; padding: var(--r-5); color: var(--pied-texte); background: var(--barre); border: 1px solid var(--barre-bord); border-radius: var(--rayon-md); box-shadow: var(--ombre-3); } /* * LE FILET DE MARQUE, EN HAUT DE LA BOÎTE. `--marque` est posé sur `body` et * porte la teinte de la rubrique : la boîte prend donc le rouge sur l'accueil, * le bleu dans le mandarin, le brun dans le guide. C'est le seul endroit où la * couleur entre, et c'est un filet de trois pixels — décoratif, donc sans * exigence de contraste, et sans rien à lire dedans. */ .consentement__boite::before { content: ""; display: block; height: 3px; margin: calc(var(--r-5) * -1) calc(var(--r-5) * -1) var(--r-4); background: var(--marque); border-radius: var(--rayon-md) var(--rayon-md) 0 0; } /* * Le titre d'approche. `--t-2xl` monte de 21 à 26 px selon la largeur : c'est la * taille des titres de section du site, pas une taille inventée pour ici. * `text-wrap: balance` répartit les deux lignes plutôt que d'en laisser une de * quatre mots et une d'un seul — la formule de l'éditeur se coupe mal. */ .consentement__titre { margin: 0 0 var(--r-3); font-family: var(--police-titre); font-size: var(--t-2xl); font-weight: 800; line-height: 1.2; text-wrap: balance; color: var(--barre-texte-fort); } .consentement__texte { margin: 0 0 var(--r-3); max-width: var(--mesure); font-size: var(--t-sm); line-height: 1.55; color: var(--pied-texte); } .consentement__detail { margin: 0; font-size: var(--t-xs); } /* Le lien de la politique de confidentialité. `--lien` est un bleu foncé dessiné pour du papier clair : sur ce fond il tomberait à 1,7:1. On reprend l'encre de la barre, soulignée pour que le lien reste un lien sans la couleur. */ .consentement__detail a { color: var(--barre-texte); text-decoration: underline; text-underline-offset: 0.2em; } .consentement__detail a:hover, .consentement__detail a:focus-visible { color: var(--barre-texte-fort); } /* * HORS OPT-IN, LA BOÎTE EST PLUS BASSE — 60 % de l'écran au lieu de 80. * * Elle n'y est plus une boîte de dialogue mais un bandeau posé en bas d'une page * qu'on lit, et la loi n'y suspend rien à une réponse. Mesuré à 360 × 640 : au * plafond commun, elle prenait 512 px sur 640, soit 80 % de l'écran pour une * information. Le texte défile d'autant plus, les deux boutons restent où ils * sont, et le visiteur garde sa page sous les yeux. */ .consentement:not([data-ci-zone="optin"]) .consentement__boite { max-height: min(60vh, 30rem); max-height: min(60dvh, 30rem); } /* * LES ACTIONS COLLENT AU BAS DE LA BOÎTE PENDANT QUE LE TEXTE DÉFILE. * * `bottom` vaut l'opposé du rembourrage de la boîte, et les marges négatives * étendent le bandeau jusqu'à ses bords : sans cela, le texte défilerait dans * les gouttières, à gauche et à droite des boutons. Le fond opaque est * indispensable — il est ce qui cache le texte qui passe DESSOUS. Le trait tient * lieu d'ombre de défilement : on voit qu'il y a un dessus et un dessous. */ .consentement__actions { position: sticky; bottom: calc(var(--r-5) * -1); display: flex; flex-wrap: wrap; gap: var(--r-2); margin: var(--r-4) calc(var(--r-5) * -1) calc(var(--r-5) * -1); padding: var(--r-4) var(--r-5) var(--r-5); background: var(--barre); border-top: 1px solid var(--barre-bord); } /* * Le bouton. * * UN SEUL STYLE, ET C'EST LE POINT JURIDIQUE DE TOUTE CETTE FEUILLE. Refuser * doit être aussi facile qu'accepter : même surface, même contraste, même * graisse, même hauteur de cible. La tentation d'un « Accepter » en aplat de * marque face à un « Refuser » en gris clair est précisément ce que la CNIL a * sanctionné chez Google et Facebook. Il n'y a donc pas de variante primaire ici, * et il ne faut pas en ajouter. */ .consentement__bouton { display: none; /* révélé par la zone, voir plus bas */ align-items: center; justify-content: center; flex: 1 1 12rem; min-height: var(--cible); padding: var(--r-2) var(--r-4); font: inherit; font-size: var(--t-sm); font-weight: 600; line-height: 1.2; text-align: center; color: var(--barre-texte-fort); background: transparent; border: 1px solid var(--barre-texte-fort); border-radius: var(--rayon-pilule); cursor: pointer; transition: background var(--transition), color var(--transition); } /* Le survol INVERSE le bouton — blanc plein, texte noir — au lieu de l'éclaircir d'un cran. Sur un fond noir, un éclaircissement se voit à peine ; et l'inversion garde les deux boutons identiques dans leurs deux états, ce qu'un simple voile n'aurait pas garanti si l'un d'eux avait eu un fond de départ. */ .consentement__bouton:hover { color: var(--barre); background: var(--barre-texte-fort); } /* L'anneau de focus du site (`--anneau`, #55524a) est un gris chaud dessiné pour du papier clair : sur ce noir il donne 2,3:1 et disparaît. Le blanc de la barre est le seul anneau visible ici. */ .consentement__bouton:focus-visible { outline: 2px solid var(--barre-texte-fort); outline-offset: 3px; } /* ========================================================================== Ce que chaque zone montre ========================================================================== */ /* * Les quatre textes et les cinq boutons sont tous dans le HTML — la page est * mise en cache, elle est la même pour tout le monde — et seule la zone, * substituée après le cache, décide de ce qui s'affiche. * * `display: none` plutôt qu'un masquage visuel : un bouton d'une autre zone ne * doit pas être atteignable à la tabulation ni annoncé par un lecteur d'écran. */ [data-pour] { display: none; } .consentement[data-ci-zone="optin"] [data-pour~="optin"], .consentement[data-ci-zone="optout"] [data-pour~="optout"], .consentement[data-ci-zone="dns"] [data-pour~="dns"], .consentement[data-ci-zone="notice"] [data-pour~="notice"] { display: block; } .consentement[data-ci-zone="optin"] button[data-pour~="optin"], .consentement[data-ci-zone="optout"] button[data-pour~="optout"], .consentement[data-ci-zone="dns"] button[data-pour~="dns"], .consentement[data-ci-zone="notice"] button[data-pour~="notice"] { display: inline-flex; } /* ========================================================================== Le voile, en régime d'opt-in seulement ========================================================================== */ /* * En EEE et au Royaume-Uni, le bandeau est une boîte de dialogue modale : le * choix est attendu avant que quoi que ce soit ne parte chez Google, et le * clavier ne doit pas pouvoir en sortir sans avoir répondu. * * LA BOÎTE EST CENTRÉE DEPUIS LE 18 AOÛT 2026 — demande de l'éditeur, « en * modale centrée sur la page ». Elle était ancrée en bas ; ce n'est pas un * détail d'esthétique qui change, c'est le poids de la demande. * * CE QUI N'A PAS CHANGÉ, ET QUI EST LA RAISON POUR LAQUELLE ON PEUT LA CENTRER : * le voile reste TRANSLUCIDE. Le contenu de la page demeure visible derrière, * ce qui évite le « mur de cookies » et, surtout, évite de masquer * irréversiblement une page à quelqu'un qui n'aurait pas compris ce qu'on lui * demande. Une surcouche opaque serait un interstitiel intrusif au sens de * Google, et mettrait en jeu le référencement — premier actif du site. NE PAS * MONTER CETTE OPACITÉ « pour que la modale ressorte mieux ». * * ET SEULEMENT EN OPT-IN. Ailleurs, la loi ne suspend rien à une réponse : voler * le centre de l'écran à quelqu'un qui lit un article pour lui annoncer un * bandeau purement informatif serait hostile, et gratuit. `consentement.js` tient * la même règle côté clavier (`MODAL = ZONE === 'optin'`). Échap vaut refus, * l'action protectrice. */ .consentement[data-ci-zone="optin"] { inset: 0; align-items: center; background: rgb(10 11 13 / 0.62); pointer-events: auto; } .consentement[data-ci-zone="optin"] .consentement__boite { animation: consentement-entree 0.24s cubic-bezier(0.2, 0, 0.2, 1); } /* Une modale centrée n'arrive pas d'en bas : elle se pose. Un souffle d'échelle plutôt qu'une translation, et l'ombre fait le reste. */ @keyframes consentement-entree { from { transform: scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .consentement[data-ci-zone="optin"] .consentement__boite { animation: none; } } /* ========================================================================== Le lien de révocation du pied de page ========================================================================== */ /* * Rendu par un