/* ============================================================================ CONTRASTE EN THEME CLAIR ---------------------------------------------------------------------------- La maquette a ete dessinee en theme SOMBRE. Plusieurs elements y sont forces en blanc, sur un fond qui, lui, suit le theme : en clair, ils disparaissent. Signale par la recette, puis MESURE au navigateur avant correction : theme clair, fond du bandeau rgb(242, 242, 242) six logos sur dix forces en blanc contraste 1.12 (3 exige pour un visuel) titre des CGU, blanc sur ce fond contraste 1.12 (4.5 exige pour du texte) les memes en theme sombre contraste 19.81 — corrects Cette feuille ne corrige QUE le theme clair, et ne touche a rien d'autre : le rendu sombre, valide par le client, ne bouge pas d'un pixel. Elle est CHARGEE APRES css/style.css et n'y touche jamais. La feuille de la maquette est comparee octet par octet par le harnais ; l'editer creerait un ecart permanent. Meme procede que R9 (polices) et R13 (article de blog). « :root:not([data-theme="dark"]) » plutot que « [data-theme="light"] » : quand aucun theme n'est choisi, l'attribut est absent et le site s'affiche en clair. Viser explicitement « light » laisserait donc le cas par defaut — le plus frequent — sans correction. ============================================================================ */ /* --- Bandeau « Ecosysteme et soutiens » ------------------------------------- La maquette blanchit les logos (brightness(0) invert(1)) pour les poser sur un fond sombre. En clair, on les noircit au lieu de les blanchir : meme traitement monochrome, meme sobriete, contraste retabli. L'opacite passe de 0.6 a 0.75 : un noir a 60 % sur fond clair est plus pale qu'un blanc a 60 % sur fond sombre, l'oeil ne percoit pas les deux de la meme facon. Mesure sur les deux themes pour obtenir une presence equivalente. Les logos porteurs de trust-logo-color et trust-logo-natural gardent leurs couleurs d'origine : ils ne sont pas concernes, et le sont d'autant moins qu'ils passent deja le contraste en clair. */ :root:not([data-theme="dark"]) .trust-logos-static img:not(.trust-logo-color):not(.trust-logo-natural) { filter: brightness(0); opacity: 0.75; } :root:not([data-theme="dark"]) .trust-logos-static img:not(.trust-logo-color):not(.trust-logo-natural):hover { opacity: 1; } /* --- Les quatre logos qui gardent leurs couleurs --------------------------- PREMIERE CORRECTION INSUFFISANTE, signalee par la recette et mesuree sur les PIXELS RENDUS du site en ligne, pas sur les styles calcules : theme clair, part de l'encre au contraste suffisant CNRS 0.0 % Campus Cyber 0.0 % Hexatrust 0.0 % La Place Strategique 1.1 % les six autres 9 a 23 % — corriges au premier passage Je les avais EXCLUS, au motif qu'ils gardent leurs couleurs d'origine. Or c'est precisement pour cela qu'ils disparaissent : ces couleurs sont CLAIRES, dessinees pour un fond sombre. L'auteur de la remarque l'avait ecrit — « les logos avec des fonds transparents et des ecritures claires ». Ma premiere mesure lisait le filtre CSS et concluait « corrige » ; elle ne regardait pas ce qui s'affiche. Un logo peut porter le bon filtre et rester invisible. On les ASSOMBRIT sans les decolorer : brightness() reduit la clarte en conservant la teinte, la ou brightness(0) les reduirait a des taches noires — ce qui reproduirait, en miroir, le defaut qu'on corrige. La saturation est relevee pour compenser la perte de vivacite qu'entraine l'assombrissement. Valeur retenue par mesure, pas par estimation : voir le tableau du registre. */ :root:not([data-theme="dark"]) .trust-logos-static img.trust-logo-color { filter: brightness(0.45) saturate(1.6); opacity: 0.9; } :root:not([data-theme="dark"]) .trust-logos-static img.trust-logo-color:hover { opacity: 1; } /* --- Le CNRS, qui n'est pas un logo colore --------------------------------- Sa classe s'appelle « trust-logo-natural » et signifie « ne pas y toucher ». Mesure du fichier source : encre a rgb(255,255,255), saturation 0.0, 100 % de pixels clairs. Ce logo est ENTIEREMENT BLANC — il n'a aucune couleur naturelle a preserver. Pour lui, l'assombrissement partiel ne suffit pas : brightness(0.45) sur du blanc pur donne un gris a 2.1 % d'encre lisible seulement. Il appartient au groupe des logos monochromes, et recoit le meme traitement : noirci en clair, blanc en sombre. A titre de comparaison, les trois logos vraiment colores : saturation 26, 43 et 85, et de 50 a 85 % de pixels clairs seulement. */ :root:not([data-theme="dark"]) .trust-logos-static img.trust-logo-natural { filter: brightness(0); opacity: 0.75; } :root:not([data-theme="dark"]) .trust-logos-static img.trust-logo-natural:hover { opacity: 1; } /* --- Titre des pages sans bandeau haut -------------------------------------- Neuf pages sur onze ouvrent sur un bandeau sombre : leur titre blanc s'y lit parfaitement. Deux ne l'ont pas — CGU et mentions legales — et posent le meme titre blanc sur le fond de page. Le selecteur vise donc le titre place dans une section ORDINAIRE, jamais dans un bandeau : « section.section » ne designe aucune des neuf autres, qui ouvrent sur .hero, .product-hero ou .contact-hero. La correction ne peut pas deborder sur une page qu'elle n'a pas a toucher. */ :root:not([data-theme="dark"]) section.section h1 { /* « !important » est ici NECESSAIRE, et c'est le seul de cette feuille. Le titre porte un style EN LIGNE dans la maquette :

Un style en ligne l'emporte sur toute feuille externe, quelle que soit sa specificite. Sans ce mot, la regle est dans la cascade, le selecteur correspond, et la couleur reste blanche — constate au navigateur avant de comprendre pourquoi. L'alternative aurait ete de retirer l'attribut du gabarit : c'est modifier le DOM de deux pages de la maquette pour obtenir ce que ce mot-cle obtient sans y toucher. */ color: var(--heading-color) !important; } /* --- Menu de navigation, en haut des pages sans bandeau --------------------- SECOND DEFAUT SIGNALE PAR LA RECETTE, sur la meme page : « le probleme persiste, quand on est en haut dans le scroll ». La description etait exacte, et le defaut n'etait pas celui que j'avais corrige. Mesure au navigateur, page CGU, theme clair : en haut de page nav transparente, liens rgba(255,255,255,.78), fond de page rgb(242,242,242) → invisible apres defilement .nav.scrolled, fond rgba(10,8,20,.72) → lisible Le menu prend un fond sombre au defilement, mais pas avant. Sur les neuf pages a bandeau, ce bandeau sombre sert de fond : le menu s'y lit. Sur les deux qui n'en ont pas, il flotte au-dessus du fond de page. POURQUOI UN FOND PLUTOT QUE DE RECOLORER. Le menu porte des liens, des icones, un bouton et un LOGO EN IMAGE — blanc lui aussi. Les recolorer un a un demanderait autant de regles que d'elements, et le logo exigerait un filtre. Lui donner le fond qu'il prend de toute facon au premier defilement traite tout d'un coup, avec une apparence deja validee par le client. Le selecteur reconnait la page a sa structure, sans rien ajouter au DOM : sur ces deux pages, et sur elles seules, le