/* landing/consent.css — LA BANNIÈRE DE CONSENTEMENT, ET RIEN D'AUTRE. * * ⚠️ SORTIE DE `style.css` LE 13/09, ET LA RAISON EST UN GARDE QUI A MORDU. * Les onze pages du site refondu portent leur propre feuille en ligne et ne * chargent pas `style.css`. Elles chargeaient donc `consent.js` — la bannière * existait dans le DOM — sans jamais poser `.ck{position:fixed}` : **elle * n'était visible sur aucune d'elles.** Un consentement qu'on ne peut pas * donner n'est pas un consentement. * * Une feuille séparée plutôt qu'une recopie dans chaque page : *un fait a un * seul endroit* (règle 1 duovicies). Toute page qui charge `consent.js` * charge celle-ci — les deux vont ensemble. * * ⚠️ DEUXIÈME DÉFAUT SUR LA MÊME RÈGLE, TROUVÉ LE 14/09 : `.ck-card` ET LES * TROIS BOUTONS ÉTAIENT PEINTS AVEC `var(--blanc)`, `var(--ligne)`, * `var(--marine)`, `var(--gris)`, `var(--cuivre-sombre)` — des jetons * définis par `style.css` (les onze pages ANCIENNES) mais absents des onze * pages REFONDUES, qui posent leurs propres jetons (`--ink`, `--paper`, * etc.) dans un `:root` en ligne. Un `var()` sans valeur de repli, sur un * jeton non défini, se résout à sa valeur INITIALE — `transparent` pour une * couleur — sans erreur ni avertissement. Le bandeau devenait alors du texte * peint à même la page, par-dessus le contenu. **Le même défaut que * ci-dessus, sous une autre forme : « chargé » n'est pas « défini ».** * * LE CORRECTIF : `consent.css` ne consomme plus AUCUN jeton d'une autre * feuille. Il pose les siens, préfixés `--ck-`, avec les valeurs DÉJÀ EN * PLACE dans `style.css` (la marque verrouillée, CLAUDE.md §5 — * `--marine:#16324e`) : aucune couleur inventée, juste rendue indépendante * de qui d'autre est chargé. Un fichier qui se déclare autonome (le * commentaire ci-dessus) doit l'être pour de vrai, jetons compris. */ :root{ --ck-marine:#16324e; --ck-marine-fonce:#0f2740; --ck-blanc:#fff; --ck-creme:#f4f1ea; --ck-cuivre-sombre:#9c5a1e; --ck-gris:#5d646d; --ck-ligne:rgba(22,50,78,.12); } /* ⚠️ DEUX DÉFAUTS EMPILÉS, TROUVÉS LE 14/09 SUR CETTE MÊME RÈGLE. — 1. `style.css:665` désarme le collant sous 900px : `@media(max-width:900px){.faq-deux .entete-section{position:static}}` — cohérent avec la doctrine du 14/08, « le header est l'UNIQUE calque collant assumé du site ». Cette règle-ci, posée SANS media query et chargée APRÈS `style.css`, gagnait la cascade à spécificité égale et appliquait `position:sticky` À TOUTE LARGEUR — y compris sous 900px, où `.faq-deux` passe en UNE colonne (`grid-template-columns:1fr`) : l'entête et le `.faq` qui suit se retrouvent alors dans le MÊME flux vertical, et l'entête, collée, glisse par-dessus lui en défilant. 2. Et parce qu'elle n'avait ni fond ni contexte d'empilement, ce recouvrement était en plus TRANSPARENT : le `.faq` (fond `--blanc`) restait visible À TRAVERS elle — titre et questions superposés, les deux illisibles (360 px, section 2). Le second titre (« 02 — Le prix et l'engagement ») portait `.chevauchement-voulu` pour un AUTRE constat (voir plus bas) — et personne n'avait vu que ce marqueur masquait AUSSI ces deux défauts-ci, sans les corriger. Le premier titre, sans le marqueur, les a montrés. — LE CORRECTIF RESTAURE LA DOCTRINE PLUTÔT QUE DE LA CONTOURNER : le collant ne s'applique plus qu'À PARTIR de 901px, là où `.faq-deux` est à DEUX colonnes et où l'entête (col. 1, ≤300px) ne recouvre jamais le `.faq` (col. 2) — le fond et le z-index ci-dessous ne servent donc plus qu'à fermer le second défaut (la transparence), au cas où une neuf largeur ou un contenu plus long les ferait un jour se toucher. */ @media(min-width:901px){.faq-deux .entete-section{margin-bottom:0;position:sticky;top:110px;background:var(--ck-creme);z-index:2}} /* ⚠️ LA COÏNCIDENCE CI-DESSOUS RESTE VRAIE APRÈS LE FOND OPAQUE. Trouvé par `app` le 23/08 en renforçant mesure-defilement.js (nouveau checkpoint « bloc atteignable ») : la DEUXIÈME entête collante (« 02 — Le prix et l'engagement »), encore en flux normal à ce point de défilement (pas encore stickée), traverse brièvement la bande d'écran qu'occupe `.ck-card` (fixed, bas de viewport) à 1440×900 — coin bas-droit contre coin haut-gauche, ~30 px de large. Défaut PRÉEXISTANT (ni `.faq-deux` ni `.ck-card` n'ont changé ce jour-là), jamais mesuré avant ce checkpoint. ⚠️ VÉRIFIÉ, PAS SUPPOSÉ, avant de le classer inoffensif : `.ck` porte `z-index:1000` (ligne ~1071), l'entête n'en porte que 2 — le bandeau peint TOUJOURS par-dessus, la coïncidence géométrique reste invisible à l'écran. Le marqueur `.chevauchement-voulu` qui documentait ça (et masquait, sans le vouloir, le défaut de fond corrigé ci-dessus) est RETIRÉ de `faq.html` — l'instrument mesure désormais l'ORDRE DE PEINTURE réel (`mesure-defilement.js`, 14/09) et ne dénonce plus cette coïncidence de lui-même : plus besoin de la masquer pour l'ignorer. */ .ck{position:fixed;inset:auto 0 0 0;z-index:1000;padding:.7rem;pointer-events:none} .ck-card{background:var(--ck-blanc);border:1px solid var(--ck-ligne);border-radius:16px;box-shadow:0 20px 50px rgba(22,50,78,.25);max-width:640px;margin:0 auto;padding:14px 22px;pointer-events:auto} .ck-title{font-size:17px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;color:var(--ck-marine)} .ck-text{font-size:14.5px;line-height:1.45;color:var(--ck-gris);margin:0} .ck-text a{text-decoration:underline;color:var(--ck-marine);position:relative} /* ⚠️ UN SEUL RANG, DEUX BOUTONS À ÉGALITÉ — 20/08. `flex-wrap:wrap` laissait les trois boutons se replier sur DEUX rangs à 360 px : 102 px de gestes au lieu de 46, et un « Tout refuser » relégué sous « Tout accepter », ce qui n'est pas « aussi facile » au sens de la CNIL. `flex:1 1 0` leur donne la MÊME largeur, `flex-shrink` reste donc actif — d'où `min-width:0` INTERDIT et `white-space:nowrap` sur .ck-btn : voir le commentaire là-bas, c'est le piège n°40. */ .ck-actions{display:flex;gap:10px;margin-top:12px} .ck-actions .ck-btn{flex:1 1 0} /* ⚠️ `white-space:nowrap` EST OBLIGATOIRE ICI, ET IL NE SUFFIT PAS SEUL. Depuis le 20/08 les deux boutons partagent un rang en `flex:1 1 0` : ils PEUVENT donc être comprimés sous la largeur de leur texte. Sans `nowrap`, « Tout accepter » se replie sur deux lignes dans une pilule prévue pour une — et `getBoundingClientRect()` rend la boîte COMPRIMÉE, donc la sonde de cibles ne voit rien (piège n°40). La sonde de compression de `mesure-site.js` couvre ce motif depuis le 16/08 : ne pas retirer nowrap. */ .ck-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 12px;border-radius:999px;border:2px solid transparent;font:inherit;font-weight:700;font-size:14.5px;cursor:pointer;white-space:nowrap} .ck-btn--accept{background:var(--ck-cuivre-sombre);color:var(--ck-blanc)} /* ⚠️ SURVOL SANS `filter` — décision du 14/09, mission « consentement en ligne ». `landing/consent.js` pose désormais `filter:none !important` EN STYLE INLINE sur `.ck` et `.ck-card` (blindage anti-écrasement, suite 863) : `filter` n'étant PAS une propriété héritée, un `.ck-btn` enfant n'était de toute façon pas concerné — mais pour ne laisser aucun doute à une relecture future sur ce point précis, le survol ne passe plus par `filter` du tout. `background-color` porte le même effet, comme `.ck-btn--refuse` juste en dessous : un mélange des DEUX jetons déjà posés en :root (`--ck-cuivre-sombre`, `--ck-blanc`) — aucune couleur inventée. ⚠️ LE MÉLANGE À 85 % ÉTAIT SOUS LE PLANCHER — REFUSÉ EN RELECTURE ADVERSE LE 14/09. `color-mix(in srgb, --ck-cuivre-sombre 85%, --ck-blanc)` rend rgb(171,115,64), qui ne tient que 3,99:1 avec le texte blanc (14,5 px gras — pas « texte large » au sens WCAG, donc le plancher est 4,5:1, pas 3:1). MESURÉ, formule WCAG sur la valeur CALCULÉE (pas la déclaration source), au repos ET au survol, dans Chromium ET WebKit — suite 863. À 93 % (rgb(163,102,46)), le contraste calculé est 4,69:1 : plus de couleur d'origine (`--ck-cuivre-sombre`), moins de blanc mélangé — donc PLUS SOMBRE que le mélange à 85 %, ce qui est l'inverse de l'intuition « survol = plus clair », mais c'est la seule direction qui RESTE un mélange des jetons existants tout en tenant le plancher : aller vers PLUS de blanc éclaircit, et éclaircit justement CE QUI FAIT le contraste. Le survol reste perceptible : rgb(163,102,46) contre rgb(156,90,30) au repos, une différence mesurée, pas décorative. Mutation témoin (suite 863) : remettre 85 % fait tomber le test de contraste au survol. */ .ck-btn--accept:hover{background:color-mix(in srgb, var(--ck-cuivre-sombre) 93%, var(--ck-blanc))} .ck-btn--refuse{background:var(--ck-marine);color:var(--ck-blanc)} .ck-btn--refuse:hover{background:var(--ck-marine-fonce)} /* ⚠️ « PERSONNALISER » EST UN LIEN DANS LA PHRASE, PLUS UN TROISIÈME BOUTON. Il ouvre le détail — finalités, sous-traitants, durées — et n'a jamais eu à occuper un rang. Sa cible tactile atteint 44 px par `padding-block`, la même technique que « En savoir plus » juste au-dessus : la hauteur de la zone cliquable déborde la ligne sans agrandir le bandeau. Il reste un