/* ========================================================================= ATLANTIS STRENGTH, LA COUCHE DE THEME : LE JOUR ET LA NUIT ========================================================================= A QUOI CETTE FEUILLE SERT ------------------------- Le site a deux apparences, et le visiteur choisit. Le choix vit dans UN attribut, pose sur par le script d'amorce que tools/poser-theme.php ecrit dans la tete de chaque page : absent, ou data-mode="jour" LE JOUR, l'apparence par defaut. data-mode="sombre" LA NUIT, le site noir d'avant. L'attribut absent vaut jour : c'est ce qui permet au site d'etre clair sans qu'aucune page n'ait besoin de JavaScript, et sans le moindre clignotement a l'ouverture. Le script d'amorce ne sert qu'a RESTITUER un choix de nuit deja fait, avant le premier pixel. CE FICHIER A CHANGE DE ROLE LE 2026-09-12, ET LE DIRE EVITE UNE MEPRISE. Il s'appelait assets/css/theme-clair.css et il etait la variante d'un essai A/B qu'aucune page ne chargeait jamais : assets/api/ab-theme.php la recopiait a la suite de tokens.css pour le seul bras « clair » d'un essai, et cet essai n'a jamais ete demarre. L'essai posait la question « le site doit-il etre clair ? » ; la direction a tranche en reunion, la reponse est oui, et la feuille est donc devenue l'apparence par defaut du site. Le regime « theme » du systeme d'essais n'a plus d'objet : voir AB-TESTS.md. LES DEUX MOITIES, ET POURQUOI ELLES NE SONT PAS ECRITES PAREIL -------------------------------------------------------------- PARTIE A, LE JOUR (blocs 1 a 14). Elle eclaircit les 388 pages qui portent . Les 495 fiches produit et la page catalogue sont DEJA claires : elle ne les touche pas, et c'est voulu. PARTIE B, LA NUIT (bloc 20). Le miroir exact, pour ces memes pages deja claires : c'est elle qui les fait basculer en sombre quand le visiteur demande la nuit. Sans elle, un site en mode nuit garderait 632 pages blanches en plein milieu. La garde de la partie A est enveloppee dans :where(), celle de la partie B ne l'est pas. Ce n'est pas une coquetterie, c'est la seule facon de ne pas perdre une mesure : - :where(...) ne compte pour RIEN dans la specificite. Chaque selecteur de la partie A pese donc exactement ce qu'il pesait avant le 2026-09-12, (0,2,1), et la cascade entiere reste celle qui a ete mesuree page par page. C'est indispensable : la page catalogue porte data-theme="dark" alors qu'elle est claire, et elle n'y echappe QUE parce que « body.page-catalog{background:#fff} », dans equipements.css chargee plus tard, pese pareil et passe apres. Ecrire la garde en clair aurait fait (0,2,2), la regle du jour aurait gagne, et les 137 pages de categorie seraient repassees en gris sans que personne ne l'ait demande. Mesure faite : c'est le premier effet visible d'une garde ecrite sans :where(). - La partie B, elle, est neuve : rien n'a jamais ete mesure contre elle, et elle DOIT battre « body.page-catalog{background:#fff} ». Sa garde compte donc, volontairement. Le prix de :where() est un plancher de navigateur : Safari 14, Chrome 88, Firefox 78, tous de 2020 et 2021. Un navigateur plus vieux jette les regles de la partie A et voit le site noir d'avant, ce qui est un repli propre. Le site demande deja plus recent que cela ailleurs (unites svh dans styles.css). CE QUI RESTE SOMBRE EN PLEIN JOUR, ET POURQUOI (le detail est au bloc 3) ------------------------------------------------------------------------ - LE CHROME : .mast-top, .nav2 et tout ce qu'il contient, .drawer, .banner, .footer, .pfoot. Demande explicite, « on garde le header noir ». Le pied noir vient avec, et c'est deja ce que fait la page catalogue. - LES HEROS SUR PHOTO : .hero, .ihero, .inspire, .jobhero, .cfg-hero, .eqhero. Leur titre est clair SUR UNE PHOTO assombrie par un voile. - LES BANDEAUX ROUGES : .cta, .promo, .news, plus .eqcta qui est sombre alors qu'il vit deja sur la page catalogue, laquelle est deja claire. - LES PASTILLES ET BOUTONS ROUGES : .btn--red, .feat__tag, .pcard__tag, .util__badge, les __badge, .jobchip. Blanc sur rouge, ou clair sur ardoise, est juste dans les deux themes. - LES ILOTS DEJA CLAIRS : .sellers, .blog, .pcard, .crumb, et surtout les 495 fiches produit et la page catalogue. - CINQ PAGES ART-DIRIGEES, hors theme clair en entier (bloc 3 bis) : /made-in-canada, /proudlycanadian, /quote-request (le tunnel), /configurator, /task. Arbitrage confirme le 2026-09-12 : elles gardent leur mise en scene sombre dans les deux modes, comme un chapitre sombre dans un livre clair. COMMENT LE TRAVAIL EST REPARTI, ET LE PIEGE A NE PAS REFAIRE ------------------------------------------------------------ Deux tiers du travail sont faits par la couche de JETONS (blocs 2 et 3), un tiers par une enumeration a la main (blocs 4 a 13). Le partage n'est pas arbitraire, il vient d'un releve fait sur toutes les feuilles : - les jetons SEMANTIQUES (--fg, --surface, --rule) sont faits pour etre retournes : c'est exactement leur role ; - --atl-ink-100, -200, -300, -400 ne servent QUE de couleur de texte (64 declarations, zero fond), et --atl-ink-900 et -800 QUE de fond ou de bordure (126 et 140). Ces six-la se retournent donc sans risque, et c'est ce qui fait basculer d'un coup les cartes, les filets et les textes secondaires de TOUT le site, y compris des feuilles dont cette feuille ne parle nulle part ; - --atl-ink-1000, --atl-ink-700, -150 et -50 servent DANS LES DEUX SENS. --atl-ink-1000 est le fond des sections sombres mais aussi la couleur de TEXTE des ilots clairs (« .sellers{ color:var(--atl-ink-1000) } ») ; --atl-ink-700 est une bordure sombre partout, mais le gris de lecture sur blanc des fiches produit. Les retourner ferait disparaitre le texte des pages que la marque juge deja justes. C'est LE piege de ce travail, et c'est pourquoi les fonds de section et les titres ecrits « #fff » en dur sont enumeres un par un, ce qui est plus long a lire et ne casse rien. CE QUI A ETE MESURE, ET COMMENT ------------------------------- Chaque affirmation de ce fichier a ete verifiee dans Chromium sans interface, en comparant le rendu au rendu d'avant : pour chaque noeud de texte visible, la couleur calculee contre le fond opaque le plus proche. Pour la partie A, sur 30 pages couvrant toutes les familles, le compte des defauts de contraste introduits est passe de 90 a 0. Les cas qui restent au rapport sont des textes poses sur un conteneur TRANSPARENT, c'est-a-dire sur la photo d'un hero, ou la mesure ne veut rien dire ; le bloc 14 dit ce qui a ete fait pour que ces cas tiennent meme sans photo. La partie B a ete mesuree de la meme facon, et le bloc 20 dit sur quoi. ========================================================================= */ /* ------------------------------------------------------------------------- 1. LA PALETTE CLAIRE, en un seul endroit ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]{ --clair-fond: #f5f5f5; /* le fond des pages, le gris de la PLP */ --clair-panneau: #ffffff; /* les cartes, un cran plus clair que le fond, comme la carte ink-900 est un cran plus claire que la section noire */ --clair-bord: #e4e4e6; /* le filet courant (= --atl-ink-150) */ --clair-bord-fort: #d2d2d5; /* separateur de section (= --atl-ink-200) */ --clair-media: #e8e8ea; /* le gris d'attente derriere une photo */ --clair-titre: #000000; /* les titres, comme .sellers .section-title */ } /* ------------------------------------------------------------------------- 2. LA COUCHE SEMANTIQUE REPASSE EN CLAIR Ce sont les valeurs de :root de tokens.css, reposees ici pour annuler le bloc [data-theme="dark"] de tokens.css sans le modifier. Ce seul bloc retourne tout ce qui passe par un jeton : le texte courant, les textes secondaires, les filets, les surfaces. C'est la moitie du travail, et c'est celle qui couvre aussi les pages dont cette feuille ne parle pas. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]{ --bg: var(--atl-ink-0); --bg-alt: var(--atl-ink-50); --bg-inverse: var(--atl-ink-1000); --surface: var(--atl-ink-0); --surface-2: var(--atl-ink-50); --fg: var(--atl-ink-1000); --fg-2: var(--atl-ink-700); --fg-3: var(--atl-ink-500); --fg-4: var(--atl-ink-400); --rule: var(--atl-ink-1000); --rule-2: var(--atl-ink-200); --rule-3: var(--atl-ink-150); --accent-fg: var(--atl-ink-0); /* La bordure de .btn--ghost dans une SECTION CLAIRE : un filet sombre. Les ilots sombres des blocs 3 et 3 bis lui rendent sa valeur d'origine. */ --ghost-bord: var(--rule-2); /* LES QUATRE ENCRES QUI NE SONT QUE DU TEXTE, RETOURNEES AUSSI. Releve fait sur les feuilles des pages sombres : --atl-ink-100, -200, -300 et -400 n'y servent QUE de « color: », jamais de fond ni de bordure (64 declarations, toutes des couleurs de texte). Ce sont les gris clairs pour lire sur du noir : sur du gris clair ils deviennent illisibles, et c'etait la moitie des 90 defauts de contraste mesures au premier rendu (sous-titres, ledes, etiquettes de formulaire, extraits d'articles). Elles se retournent donc en miroir, et c'est SANS DANGER precisement parce qu'elles n'ont pas le double usage qui interdit de toucher a --atl-ink-1000 (fond des sections sombres, mais texte des ilots clairs) et a --atl-ink-50 et -150 (fonds et filets clairs, deja justes). Les ilots sombres du bloc 3 leur rendent leur valeur d'origine. */ --atl-ink-100: #161618; /* etait #EFEFF1, le texte le plus clair */ --atl-ink-200: #232327; /* etait #D2D2D5 */ --atl-ink-300: #36363B; /* etait #A8A8AD */ --atl-ink-400: #55555B; /* etait #7A7A80, legendes discretes */ /* LES DEUX ENCRES QUI NE SONT QUE DES SURFACES, RETOURNEES AUSSI. Meme releve, meme conclusion, dans l'autre sens : --atl-ink-900 sert 91 fois de fond et 3 fois de filet, JAMAIS de texte ; --atl-ink-800, 35 fois de fond et 105 fois de bordure, JAMAIS de texte. Ce sont la carte sombre et le filet sombre du site, et rien d'autre. Les retourner ici fait basculer d'un coup TOUTES les cartes et TOUS les filets de separation du site, y compris ceux des feuilles dont cette feuille ne parle nulle part (compte, service, usages, nouveautes...). C'est ce qui evite d'enumerer a la main deux cents declarations, et surtout ce qui evite d'en oublier. --atl-ink-700 N'EST PAS DANS CETTE LISTE : il sert 18 fois de couleur de texte, dans pdp.css et equipements.css, c'est-a-dire sur les fiches produit et la page catalogue, ou il est le gris de lecture sur blanc. Le retourner blanchirait le texte de la PLP, qui porte data-theme="dark" alors qu'elle est deja claire. --atl-ink-1000 non plus, pour la raison dite en tete de fichier. */ --atl-ink-900: #ffffff; /* etait #0B0B0C, la carte : elle devient blanche */ --atl-ink-800: #e4e4e6; /* etait #161618, le filet et le gris d'attente */ /* Le fond de page. « body » pese (0,0,1), ce selecteur (0,1,1). */ background: var(--clair-fond); color: var(--fg); } /* ------------------------------------------------------------------------- 3. LES ILOTS SOMBRES : CE QUI RESTE NOIR AU MILIEU D'UN SITE CLAIR Trois familles, un seul traitement. On ne redecrit AUCUNE de leurs regles : on leur rend leurs jetons sombres, et tout ce qu'elles contiennent redevient ce qu'il etait. C'est ce qui fait tenir la feuille a une page : le travail est fait par la couche de jetons, pas par une liste de retouches. a. LE CHROME (.mast-top, .nav2 et tout ce qu'il contient, .drawer, .banner, .footer, plus .pfoot, le pied propre aux pages catalogue). « On garde le header noir », et le pied avec, comme la PLP. .mega, .dropd et .drawer__panel se peignent avec var(--surface) : sans ce bloc, ils s'ouvriraient en blanc sous un en-tete noir. La visionneuse de realisations (.reslb__panel, .reslb__stage) est ici pour la meme raison qu'un pied : une lightbox qui montre des photos se regarde sur du sombre, dans les deux themes. b. LES HEROS SUR PHOTO (.hero, .ihero, .inspire, .jobhero, .cfg-hero, .eqhero). Leur titre et leur lede sont clairs SUR UNE PHOTO assombrie. Sans ce bloc, le bloc 2 retournerait leur lede (--atl-ink-200) en sombre-sur-sombre : mesure au premier rendu, c'etait le cas de .hero__lede et .ihero__lede. c. LES BANDEAUX ROUGES (.cta, .promo, .news) et la lucarne flottante (.projet-toast). Blanc sur rouge Atlantis, et blanc sur ardoise, sont justes dans les deux themes. d. LE BANDEAU D'APPEL DU CATALOGUE (.eqcta). Celui-la ne s'eclaircit pas, et la raison vaut d'etre notee : il vit DEJA sur la page catalogue, qui est DEJA claire (body.page-catalog la repeint en blanc). C'est donc un bandeau sombre volontaire au milieu d'une page claire, la preuve dans le depot que le dessin le veut ainsi. L'eclaircir aurait change la page que la marque juge deja juste, et fait diverger la PLP entre les deux bras. Le laisser garde la PLP identique au pixel dans les deux bras. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .mast-top, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .nav2, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .drawer, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .banner, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .footer, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pfoot, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .reslb__panel, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .reslb__stage, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .cta--photo, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .hero, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ihero, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .inspire, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobhero, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .cfg-hero, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .eqhero, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .cta, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .promo, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .news, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .eqcta, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .projet-toast, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ca-hero, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ca-marquee, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ca-quote, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ca-stats{ --bg: var(--atl-ink-1000); --bg-alt: var(--atl-ink-900); --surface: var(--atl-ink-900); --surface-2: var(--atl-ink-800); --fg: var(--atl-ink-0); --fg-2: #D2D2D5; --fg-3: #A8A8AD; --fg-4: #7A7A80; --rule: var(--atl-ink-0); --rule-2: var(--atl-ink-700); --rule-3: var(--atl-ink-800); /* Les six encres retournees par le bloc 2 reprennent leur valeur d'origine, en clair ecrit et non par un var(), parce que le bloc 2 les a justement redefinies : y renvoyer ne ferait que relire la valeur retournee. */ --atl-ink-100: #EFEFF1; --atl-ink-200: #D2D2D5; --atl-ink-300: #A8A8AD; --atl-ink-400: #7A7A80; --atl-ink-900: #0B0B0C; --atl-ink-800: #161618; /* Exactement ce que styles.css ecrit pour .btn--ghost. Sur une photo de hero, c'est un gris clair ; tout autre valeur efface le bouton. */ --ghost-bord: rgba(255,255,255,.55); color: var(--fg); } /* ------------------------------------------------------------------------- 3 bis. LES PAGES QUI GARDENT LEUR PROPRE DIRECTION ARTISTIQUE Quatre pages sur les 388 ne sont pas des pages de contenu : ce sont des surfaces dessinees une par une, avec leur en-tete, leur pied et leurs couleurs a elles. Les repeindre demanderait de redessiner chacune, pas de retourner des jetons, et une conversion approximative y serait plus visible qu'ailleurs. Elles restent donc EXACTEMENT ce qu'elles sont aujourd'hui, dans les deux bras de l'essai. C'est un choix, pas un oubli, et il se defait en retirant une ligne le jour ou la marque veut les convertir. .ca-body.cv2 LES BROUILLONS de la campagne canadienne seulement, /made-in-canada_betaV2, V3 et V4. CE QUI A CHANGE LE 2026-09-12 : la campagne elle-meme (/made-in-canada et /proudlycanadian) N'EST PLUS ICI, elle a sa version claire au bloc 22, sur demande de Clement (« par defaut il faut tout le temps avoir jour/nuit »). Les trois brouillons restent dehors : ils ne sont lies par aucune page, absents du plan de site, et leurs feuilles canada-v2, v3 et v4 sont des compositions a part (vortex, plongee WebGL) qui demanderaient chacune leur propre conversion. Le jour ou l'un d'eux remplace la campagne, il passe par le bloc 22. (/quote-request N'EST PLUS ICI depuis le 2026-09-12 : le tunnel a son jour au bloc 24. L'argument qui l'en tenait dehors etait un avantage de MESURE pour l'essai A/B du theme, lequel est retire : il n'a plus d'objet.) (/configurator N'EST PLUS ICI depuis le 2026-09-12 : ses sept sections de contenu passent en clair au bloc 13, ses deux bandeaux rouges et son hero restent.) :has(#donnees) /task, la page de controle interne (noindex, absente de la navigation, corps construit en JavaScript depuis un bloc JSON). Elle n'a pas de classe sur son : ce bloc de donnees, pose par build-task.php, est son seul repere stable. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"].ca-body.cv2, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(#donnees){ --bg: var(--atl-ink-1000); --bg-alt: var(--atl-ink-900); --surface: var(--atl-ink-900); --surface-2: var(--atl-ink-800); --fg: var(--atl-ink-0); --fg-2: #D2D2D5; --fg-3: #A8A8AD; --fg-4: #7A7A80; --rule: var(--atl-ink-0); --rule-2: var(--atl-ink-700); --rule-3: var(--atl-ink-800); --atl-ink-100: #EFEFF1; --atl-ink-200: #D2D2D5; --atl-ink-300: #A8A8AD; --atl-ink-400: #7A7A80; --atl-ink-900: #0B0B0C; --atl-ink-800: #161618; --ghost-bord: rgba(255,255,255,.55); background: var(--atl-ink-1000); color: var(--fg); } /* 3 ter. ET SUR CES PAGES-LA, LA BASCULE NE S'AFFICHE PAS. Elles sont hors des DEUX themes : ni le jour ni la nuit n'y change un pixel, chrome compris. Y laisser deux boutons Jour/Nuit, c'est offrir une commande qui ne fait visiblement rien, et un visiteur qui clique sans rien voir bouger en conclut que la fonction est cassee, pas que la page est art-dirigee. Le choix, lui, n'est pas perdu : ces pages portent quand meme le bloc de tete et respectent le mode choisi ailleurs ; c'est seulement qu'il ne s'y voit pas. Le visiteur retrouve les deux boutons a la page suivante. PAS DE GARDE SUR CETTE REGLE, ET C'EST VOULU : elle vaut dans les deux modes, puisque ces pages sont les memes dans les deux modes. CETTE LISTE DOIT RESTER LA MEME QU'AU BLOC 3 BIS. Le jour ou l'une de ces pages est convertie, elle sort des deux listes ensemble, ou elle se retrouve convertie sans bouton pour en sortir. */ body.ca-body.cv2 .themeswitch, body:has(#donnees) .themeswitch{ display: none; } /* LA BARRE UTILITAIRE HAUTE, PEINTE EXPLICITEMENT. CE QUI ETAIT ECRIT ICI ET QUI EST FAUX DEPUIS LE 2026-09-04 : ce commentaire disait que styles.css ne peignait PAS .mast-top, que la cause etait un commentaire qui se fermait trop tot, et que la reparer ferait apparaitre une bande noire par-dessus la photo du hero de l'accueil, donc qu'elle appartenait a Clement. Les deux premiers points etaient exacts ; LE TROISIEME ETAIT FAUX. LA CORRECTION. Le commentaire de styles.css a ete repare le 2026-09-04 (son en-tete « SITE HEADER » enumerait des classes mortes dont un nom finissant par une etoile, suivie d'une barre oblique, paire qui ferme un commentaire CSS ou qu'elle apparaisse). La regle « .mast-top{ background:#000 } » arrive donc au navigateur depuis ce jour, et le releve Chromium le confirme : une regle de fond de plus matche .mast-top, et une seule. POURQUOI LA BANDE NOIRE N'EXISTAIT PAS. La photo du hero ne passe pas sous .mast-top, elle COMMENCE dessous : sur l'accueil comme sur les pages secteur, le hero est remonte de --atl-over, qui vaut .nav2 plus le bandeau et n'inclut PAS .mast-top. Mesure a 1440x900 : haut de la photo a 37,5 px, bas de la barre a 38 px. Rendre son fond noir a une barre transparente posee sur un corps noir ne change donc aucun pixel, et le diff des captures avant/apres le montre : rien ne bouge au-dessus de y=38. Le seul effet visible est le « border-bottom » de la meme regle, un filet de 1 px en --rule-3, qui decale d'un pixel tout ce qui suit. CE BLOC RESTE, ET CE N'EST PLUS UN CONTOURNEMENT. Il ne rattrape plus une regle absente : il dit que dans le bras clair, le chrome reste sombre PAR SON JETON, et non par le #000 en dur de styles.css. Si la marque eclaircit un jour la barre du site noir, ce bras ne suivra pas par accident. Sans lui, une barre transparente sur un corps clair redeviendrait une barre claire ou le « ENGLISH » blanc disparait, et c'est le defaut qui l'a fait naitre. ON N'ECRIT PAS ICI UNE ETOILE SUIVIE D'UNE BARRE OBLIQUE, MEME EN LA CITANT : la premiere version de ce commentaire le faisait, refermait donc CE commentaire a cet endroit, et avalait la regle juste en dessous, exactement comme le defaut qu'il decrivait. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .mast-top{ background: var(--atl-ink-1000); } /* DEUX MODIFICATEURS QUI SERVENT DANS LES DEUX MONDES. .btn--ghost et .link-arrow--light sont ecrits en blanc en dur, et se posent AUSSI BIEN sur un hero photo (ou le blanc est juste) que dans une section de contenu (le bouton « Get directions » de /contact-us, mesure invisible au premier rendu). On les passe donc au jeton : dans un ilot sombre --fg vaut blanc, dans une section claire il vaut noir, et les deux cas tombent juste sans avoir a les distinguer. LA BORDURE, ELLE, NE PASSE PAS PAR --rule-2, ET C'EST UN CORRECTIF DU 2026-09-12. Elle y passait, et cela a EFFACE le bouton « Contact us » du hero de l'accueil : sur la photo, sa bordure rgba(255,255,255,.55) rendait un gris clair a #8f8c8c, et --rule-2 la faisait tomber a #232327, presque invisible. C'etait le SEUL pixel que le theme clair changeait dans le premier ecran de l'accueil, et l'audit de contraste ne pouvait pas le voir : il mesure du TEXTE, pas des bordures. Trouve en comparant le rendu au rendu d'aujourd'hui, pixel par pixel, ce que fait desormais le banc des ilots sombres de tools/verif-theme.js. --ghost-bord vaut donc la valeur d'origine dans les ilots sombres, et un filet sombre dans les sections claires. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .btn--ghost{ color: var(--fg); border-color: var(--ghost-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .link-arrow--light{ color: var(--fg); } /* ------------------------------------------------------------------------- 4. styles.css : LES SECTIONS DU CORPS Toutes les sections pleines passent au gris de la PLP. Leur filet de separation, en --atl-ink-800 (presque noir), deviendrait une barre sombre sur fond clair : il passe au filet clair. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .stats, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .features, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .equip, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .trust, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .testi, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .gallery-home, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .newnew, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .markets{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } /* Les titres et chiffres codes en dur en blanc dans ces sections. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .stat__val, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .feature__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .trust .section-title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .testi .section-title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .trust__logos li:hover{ color: var(--clair-titre); } /* Les cartes de temoignage : blanches sur le gris, filet clair. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .tcard{ background: var(--clair-panneau); border-color: var(--clair-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .tcard__name{ color: var(--clair-titre); } /* L'avatar reste un disque sombre a initiales blanches : il se lit sur les deux fonds, et c'est un aplat, pas une surface de page. */ /* Les gris d'attente derriere une photo. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .feat__media, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .gtile, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .market__media{ background: var(--clair-media); } /* ------------------------------------------------------------------------- 5. industries.css (234 pages) .crumbs, le fil d'Ariane, passe en clair : c'est du contenu de page, pas de l'en-tete, et styles.css porte deja un .crumb clair (background:#fff) qui montre la forme attendue. .ihero n'est pas ici : c'est un hero sur photo. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .crumbs, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .landsplit, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .bigquote, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .crit, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .indhub, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .collnav{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .critcard, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .collnav .collcard{ background: var(--clair-panneau); border-color: var(--clair-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .bigquote__text, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .bigquote__name, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .critcard__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .indcard__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .indcard__cta, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .crumbs a:hover{ color: var(--clair-titre); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .bigquote__media{ background: var(--clair-media); } /* LE FIL D'ARIANE AU REPOS SUR UNE PAGE SECTEUR EST POSE SUR LA PHOTO, PAS SUR UNE BANDE. CORRECTIF DU 2026-09-12. styles.css efface le fond du fil sur ces pages tant qu'on n'a pas defile (« .page-industries .nav2:not(.is-scrolled) ~ .crumbs{background:transparent} ») : il flotte alors sur le hero. La regle ci-dessus lui donne bien un fond clair, mais elle PERD contre celle-la, qui est plus specifique ; le fond restait donc transparent pendant que le TEXTE, lui, passait au sombre avec les encres du bloc 2. Resultat mesure sur /about et /industries : le « Home » du fil tombait de #a4a4a8 a #343439 sur une photo sombre, et le fil courant du rouge clair au rouge de marque. 564 et 697 pixels, invisibles a la relecture et invisibles a l'audit de contraste, qui ne sait rien dire d'un texte pose sur un conteneur transparent. C'est le banc des ilots sombres de tools/verif-theme.js qui les a trouves, en comparant le rendu au rendu d'aujourd'hui. On rend donc au fil ses encres sombres DANS CET ETAT SEULEMENT. Des qu'on defile, la regle de styles.css ne s'applique plus, le fond clair du bloc ci-dessus reprend, et le texte sombre redevient le bon. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"].page-industries .nav2:not(.is-scrolled) ~ .crumbs, :where(html:not([data-mode="sombre"])) body[data-theme="dark"].home .nav2:not(.is-scrolled) ~ .crumbs{ --atl-ink-100: #EFEFF1; --atl-ink-200: #D2D2D5; --atl-ink-300: #A8A8AD; --atl-ink-400: #7A7A80; --fg: #ffffff; --fg-2: #D2D2D5; --fg-3: #A8A8AD; --fg-4: #7A7A80; } :where(html:not([data-mode="sombre"])) body[data-theme="dark"].page-industries .nav2:not(.is-scrolled) ~ .crumbs .crumbs__here, :where(html:not([data-mode="sombre"])) body[data-theme="dark"].home .nav2:not(.is-scrolled) ~ .crumbs .crumbs__here{ color: var(--atl-red-soft); } /* ------------------------------------------------------------------------- 6. adn.css (196 pages, dont les fiches de poste) .jobhero est absent VOLONTAIREMENT : noir uni au repos, il recoit une photo assombrie par hero-bank.js. Clair, son titre disparaitrait des que la photo arrive. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .story, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .rescards, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .team, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .steps, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .split, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobs, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .apply{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .rescard, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .teamcard, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .stepcard, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobside{ background: var(--clair-panneau); border-color: var(--clair-bord); } /* .jobchip N'EST PAS dans cette liste : les pastilles de poste (« Laval », « Temps plein ») vivent DANS .jobhero, qui reste sombre. En carte blanche, leur texte --atl-ink-200, rendu clair par l'ilot sombre, devenait du gris pale sur du blanc : contraste 1,51, mesure au deuxieme rendu. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .rescard__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .rescard__cta, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .teamcard__name, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .stepcard__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobrow__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobrow__cta, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobsec__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobside__head, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobside__val{ color: var(--clair-titre); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .story__media, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .split__media{ background: var(--clair-media); } /* Survols et focus qui viraient au presque-noir. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .jobrow:hover{ background: var(--clair-panneau); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .apply__input:focus, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .apply__select:focus, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .apply__textarea:focus{ background: var(--clair-panneau); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .apply__file:hover{ color: var(--clair-titre); } /* .jobchip--type n'est pas ici non plus, pour la meme raison que .jobchip ci-dessus : la pastille reste sombre, donc son texte reste clair. */ /* ------------------------------------------------------------------------- 7. ressources.css (149 pages) ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .reshub, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .faqpage{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .guidecard, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .resultcard, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pullquote{ background: var(--clair-panneau); border-color: var(--clair-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .guidecard__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .guidecard__cta, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pullquote__text, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pullquote__name, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .faqtheme__title{ color: var(--clair-titre); } /* ------------------------------------------------------------------------- 8. blog.css (139 pages) .blogprose est du corps d'article : ses titres, ses liens et ses gras sont en #fff en dur, donc invisibles sur fond clair. C'est le bloc le plus dense de cette feuille, et le plus visible pour un lecteur. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogfeat, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .bloghub, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogarticle, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogrelated{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogcard{ background: var(--clair-panneau); border-color: var(--clair-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogcard__media{ background: var(--clair-media); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogfeat__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogcard__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogcard__cta, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogprose h2, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogprose h3, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogprose h4, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogprose a, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogprose strong, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogprose b{ color: var(--clair-titre); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogprose blockquote, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .blogprose th{ background: var(--clair-panneau); color: var(--clair-titre); } /* ------------------------------------------------------------------------- 9. news.css (91 pages) ------------------------------------------------------------------------- */ /* LA PASTILLE ACTIVE : fond ET texte. Le rouge de --accent qu'on lit dans news.css:21 appartient a une AUTRE regle (le survol) ; « .is-on », elle, pose bien « color:#fff », soit du blanc qui se retrouvait blanc sur blanc, contraste 1,00 mesure au premier rendu. Elle prend donc le rouge de la marque, qui est la couleur que la pastille active porte deja au survol. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .newsfilter__chip.is-on{ background: var(--clair-panneau); color: var(--accent); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .newsbyline__img{ background: var(--clair-media); border-color: var(--clair-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .newsbyline__name{ color: var(--clair-titre); } /* ------------------------------------------------------------------------- 10. contact.css (82 pages) ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .contact, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .locate, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .faq{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .method, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .contact__formwrap{ background: var(--clair-panneau); border-color: var(--clair-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .locate__map{ background: var(--clair-media); border-color: var(--clair-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .contact__lede a, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .method__value, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .contact__formhead, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .locate__rowval a, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .faq__q, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .register-ok strong{ color: var(--clair-titre); } /* L'etiquette posee sur la carte garde son fond sombre translucide : son texte reste clair. Avec --clair-titre dessus, mesure du 2026-09-06 : 1,4:1 ; et ink-300, retourne en sombre par ce theme, faisait 1,2:1 pour l'adresse. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .locate__tagname{ color: #fff; } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .locate__tagaddr{ color: rgba(255,255,255,.75); } /* La page courante du fil d'Ariane : en sombre elle est en --atl-red-soft (5,4:1 sur noir), qui ne fait que 3,5:1 sur la barre claire. Sur clair, le rouge Atlantis fait 5,4:1. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .crumbs__here{ color: var(--accent); } /* Le bloc infolettre garde son fond rouge : .news__title et .news__ok sont du blanc sur rouge. Seul le champ de saisie, en rgba(0,0,0,.2), doit s'eclaircir pour que le texte tape reste lisible. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .news__input{ background: rgba(255, 255, 255, .18); } /* ------------------------------------------------------------------------- 11. cases.css (78 pages) ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .casedoor{ background: var(--clair-fond); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .casegallery__item{ background: var(--clair-media); } /* ------------------------------------------------------------------------- 12. LA LONGUE TRAINE Les familles a une poignee de pages. Grace au retournement de --atl-ink-900 et -800 (bloc 2), leurs CARTES et leurs FILETS sont deja justes : il ne reste ici que les fonds de SECTION, qui sont en --atl-ink-1000 ou en #000 (deux valeurs qu'on ne peut pas retourner globalement), et les TITRES ecrits en #fff en dur. ------------------------------------------------------------------------- */ /* --- equipements.css, sur les 137 pages de categorie ------------------- */ /* Le titre du bloc FAQ. La section .faq est eclaircie par le bloc 10, mais equipements.css repeint son titre en blanc pour les pages catalogue. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .faq .cattext__h2{ color: var(--clair-titre); } /* --- register.css, 19 pages (demandes de devis et d'enregistrement) ---- */ /* .quotehead portait un titre .section-title, donc en var(--fg), donc deja sombre : sur son fond noir, il devenait NOIR SUR NOIR, contraste 1,00 mesure sur /get-a-quote. C'est le cas ou le retournement des jetons, seul, fait pire que rien : il faut le fond avec. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .quotehead{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } /* --- service.css, 13 pages (garantie, pieces, documentation) ----------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .warr__num, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .warr__note a, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .brandcard h2, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .doccard h2, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .doccard p a{ color: var(--clair-titre); } /* --- usages.css, 5 pages ----------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .protocol, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .usehub{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .protocard__value{ color: var(--clair-titre); } /* --- compte.css, 5 pages (compte, panier, commande rapide) ------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .auth, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .acct, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .activity, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .qorder, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pjsteps{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .authcard__head, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .auth__link:hover, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .scard__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .scard__cta, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .datatable__num, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .datatable__amount, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .citem__name, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .citem__price, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .citem__qty button:hover, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .summary__head, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .summary__row span:last-child, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .summary__total, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pjempty__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pjempty__alt a, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pjsteps__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pjstep__title{ color: var(--clair-titre); } /* --- legal.css, 4 pages, et ambassadors.css, 2 pages ------------------- */ /* Ces deux-la peignent le BODY par une classe (.page-legal, spécificite (0,1,0)), que le bloc 2 bat deja ; mais elles posent aussi leur propre couleur de texte, et leurs titres sont en blanc. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"].page-legal, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .page-legal, :where(html:not([data-mode="sombre"])) body[data-theme="dark"].page-ambassadors, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .page-ambassadors{ background: var(--clair-fond); color: var(--fg-2); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .legal h1, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .legal__prose h2, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .legal__prose h3, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .legal__prose a, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .legal__prose strong, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .amb h1{ color: var(--clair-titre); } /* --- nouveautes.css, /new-arrivals ------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .launch, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .eng, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .detail, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pwdesc, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .docs, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .gen, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pwspecs, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .family{ background: var(--clair-fond); border-color: var(--clair-bord-fort); } /* Ces trois posent un fond --atl-ink-1000 en tant que CARTE (la tuile de chiffre, la fiche de famille, la pastille de taxonomie), pas en tant que section : elles deviennent donc blanches, pas grises. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .genfig, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ncard, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pwtaxo__chip, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .spectable{ background: var(--clair-panneau); } /* .launchid__name et .launchid__line sont absents : ils vivent dans le .ihero de /new-arrivals, donc sur le hero photo, donc en clair. Les assombrir donnait du noir sur noir, contraste 1,00. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .launch__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .launch__spec-val, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .engitem__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .dtile__name, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .genfig__val, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .spectable tbody th, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .doccard__name, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ncard__name, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .pwtaxo__chip:hover{ color: var(--clair-titre); } /* --- realisations.css --------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .resbank__intro .resbank__num{ color: var(--clair-titre); } /* ------------------------------------------------------------------------- 13. LES DEUX COLLISIONS DE NOMS DE CLASSE, RENDUES A LEUR PAGE Le bloc 3 bis met quatre pages hors de l'essai en leur rendant leurs jetons. Cela ne suffit pas, et la raison vaut d'etre notee parce qu'elle se reproduira : un jeton se transmet par HERITAGE, une regle de DESCENDANT ne s'annule pas. Les regles de contenu de cette feuille sont ecrites « body[data-theme="dark"] .steps », donc elles s'appliquent AUSSI a l'interieur d'une page mise hors essai, des que le nom de classe est le meme ailleurs dans le site. Et il l'est : trois noms sont partages entre adn.css, contact.css et configurator.css (.steps, .split, .contact). Mesure au troisieme rendu : le bandeau .contact du configurateur, qui est ROUGE, passait en gris clair avec son texte blanc dessus. On rend donc a ces deux pages ce que la feuille leur avait pris, a (0,3,1) contre (0,2,1). ------------------------------------------------------------------------- */ /* --- /configurator : ses sections passent en CLAIR, son bandeau reste rouge. CE QUI ETAIT ECRIT ICI JUSQU'AU 2026-09-12, ET QUI A CHANGE : ces cinq sections recevaient « background:var(--atl-ink-1000) », c'est-a-dire le noir, parce que la page entiere etait hors du theme. Clement a demande que toutes les pages aient leur jour et leur nuit ; elles prennent donc le lavis clair. La regle reste NECESSAIRE, et pour la raison dite plus haut : sans elle, ces sections tomberaient sur les regles generiques ecrites pour adn.css, qui ne connaissent pas cette page. --- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .stitch, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .feature-row, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .finalize, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cform{ background: var(--clair-fond); border-color: var(--clair-bord); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .contact{ background: var(--atl-red); } /* Chez configurator, .split n'est qu'une grille : elle n'a jamais porte de fond, et la lui retirer vaut mieux que lui en inventer un. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .split{ background: none; } /* --- /made-in-canada et /proudlycanadian : la barre haute EST blanche --- canada.css la veut ainsi (« Row 1, the white band »), avec du texte sombre dessus, et c'est la seule page du site dans ce cas. Notre regle de barre noire du bloc 3, plus specifique que la sienne, la repeignait en noir : le « FRANCAIS / ENGLISH » sombre y devenait noir sur noir, contraste 1,00. On lui rend son blanc et ses jetons sombres. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"].ca-body .mast-top{ --fg: var(--atl-ink-1000); --fg-2: var(--atl-ink-700); --fg-3: var(--atl-ink-500); --fg-4: var(--atl-ink-700); background: #fff; color: var(--fg); } /* ------------------------------------------------------------------------- 14. LE REPLI DES HEROS SUR PHOTO, QUAND LA PHOTO N'EST PAS LA Le defaut le plus serieux trouve dans cette feuille, et il ne se voit sur aucune mesure de contraste : il s'est vu sur une capture. Sur l'accueil et sur les pages secteur, la barre haute, la nav et le bandeau sont TRANSPARENTS au repos, volontairement, pour que la photo du hero passe dessous (styles.css le dit a sa ligne 630). Leur texte est donc clair, et il est lisible parce que la photo est sombre. Sur le site NOIR, une photo lente, absente ou bloquee ne changeait rien : le corps etait noir de toute facon. Sur fond clair, la meme panne rend la nav gris pale sur gris pale. .hero, .ihero et .inspire portent tous « isolation:isolate », donc un fond pose sur eux se peint DERRIERE leur photo (qui est un enfant en z-index:-1), sans la masquer. On leur rend donc le noir en dessous : avec photo le rendu est identique, sans photo il redevient celui du site noir. Le pire cas est couvert, et le cas normal ne bouge pas. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .hero, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ihero, :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .inspire{ background: var(--atl-ink-1000); } /* ========================================================================= PARTIE B, LA NUIT : LES PAGES QUI SONT NATIVEMENT CLAIRES ========================================================================= Tout ce qui precede eclaircit les 388 pages sombres. Ce qui suit fait l'inverse, pour les 632 pages qui n'ont jamais eu besoin d'etre eclaircies : les 495 fiches produit (body.pdp-body) et les 137 pages de catalogue avec la PLP (body.page-catalog). Sans ce bloc, un visiteur qui demande la nuit garderait deux gros blocs blancs en plein milieu. POURQUOI CES SELECTEURS-LA NE SONT PAS ENVELOPPES DANS :where() --------------------------------------------------------------- La partie A doit garder sa specificite au milligramme, parce qu'elle a ete mesuree ainsi et qu'un cran de plus lui ferait gagner des batailles qu'elle PERD volontairement, celle de body.page-catalog en premier. Ici c'est le contraire : ces regles sont neuves, elles n'ont aucune mesure a preserver, et elles DOIVENT battre equipements.css et pdp.css, qui sont chargees plus tard et qui peignent en clair. « html[data-mode="sombre"] body.pdp-body .foo » pese (0,3,2) : la question ne se pose plus. LA METHODE, LA MEME QU'AU BLOC 2, ET LE MEME PIEGE -------------------------------------------------- Un releve a ete fait sur pdp.css et equipements.css, declaration par declaration, en separant les trois roles (texte, fond, bordure). Il donne exactement ce qui peut passer par un jeton et ce qui doit etre enumere : - dans pdp.css, --atl-ink-150 n'est QUE de la bordure (14 fois), --atl-ink-50 QUE du fond (11 fois), --atl-ink-500, -600 et -700 QUE du texte : ces cinq-la se retournent en un bloc ; - --atl-ink-1000 y sert aux TROIS roles (25 textes, 14 bordures, 6 fonds). Le retourner en blanc est juste pour 39 declarations sur 45 et faux pour les six autres, qui sont des fonds noirs volontaires. Ces six-la sont donc reprises une par une, plus bas ; - --atl-ink-200 est de la bordure sur la fiche mais du TEXTE dans .pnav, la barre produit collante, qui est noire dans les deux modes. C'est le meme double usage qui a failli coûter la page catalogue au bloc 2, et il se traite pareil : la barre recupere ses valeurs d'origine ; - equipements.css, elle, n'a presque pas de jetons : 93 couleurs y sont ecrites en dur (#fff 37 fois, #111 22 fois). Il n'y a rien a retourner, tout est enumere, et c'est pour cela que le bloc 21 est long. CE QUI RESTE IDENTIQUE, DE JOUR COMME DE NUIT --------------------------------------------- - LE CHROME. La barre haute, la nav, le tiroir, le pied et la barre produit .pnav sont deja noirs sur ces pages. Ils reprennent leurs jetons au bloc 20 bis, pour que la bascule ne deplace pas un seul pixel de l'en-tete. - LES SURFACES ROUGES. Un texte blanc sur le rouge Atlantis est juste dans les deux modes : .prod__code, .prod__add:hover, .results__chip:hover et les boutons rouges ne sont donc nulle part ici. - LES ELEMENTS INVERSES. Une pastille noire a texte blanc devient une pastille blanche a texte noir, ce que le retournement de --atl-ink-1000 fait tout seul pour le fond ; seul le texte, ecrit « #fff » en dur, est repris a la main. ========================================================================= */ /* ------------------------------------------------------------------------- 20. LES FICHES PRODUIT (body.pdp-body) ------------------------------------------------------------------------- */ html[data-mode="sombre"] body.pdp-body{ /* La palette de nuit, miroir du bloc 1. */ --nuit-fond: #000000; /* le fond de page, etait #ffffff */ --nuit-panneau: #0b0b0c; /* la carte, un cran au-dessus du fond */ --nuit-creux: #161618; /* le gris creux, etait --atl-ink-50 */ --nuit-bord: #232327; /* le filet courant */ --nuit-bord-fort: #36363b; /* la bordure d'un controle */ /* La couche semantique passe en sombre. Ce sont les valeurs du bloc [data-theme="dark"] de tokens.css, ECRITES EN CLAIR et non en var() : les encres auxquelles il renvoie sont justement retournees juste apres, et y renvoyer relirait la valeur retournee. */ --bg: #000000; --bg-alt: #0b0b0c; --bg-inverse: #ffffff; --surface: #0b0b0c; --surface-2: #161618; --fg: #ffffff; --fg-2: #d2d2d5; --fg-3: #a8a8ad; --fg-4: #7a7a80; --rule: #ffffff; --rule-2: #232327; --rule-3: #161618; --accent-fg: #ffffff; /* LES CINQ ENCRES A USAGE UNIQUE, RETOURNEES SANS RISQUE. Releve sur pdp.css : -150 n'est que bordure, -50 que fond, -500, -600 et -700 que texte. Le retournement fait donc basculer d'un coup les filets, les gris creux et tous les textes secondaires de la fiche. */ --atl-ink-700: #d2d2d5; /* etait #232327, le gris de lecture */ --atl-ink-600: #d2d2d5; /* etait #36363B */ --atl-ink-500: #a8a8ad; /* etait #55555B, les etiquettes */ --atl-ink-150: #232327; /* etait #E4E4E6, le filet fin */ --atl-ink-50: #161618; /* etait #F6F6F7, le gris creux */ /* LES DEUX A DOUBLE USAGE, RETOURNEES QUAND MEME, ET REPRISES ENSUITE. -1000 est du texte 25 fois, une bordure 14 fois et un FOND 6 fois : les six fonds sont repris au bloc 20 ter. -200 est une bordure sur la fiche et du TEXTE dans .pnav : la barre reprend sa valeur au bloc 20 bis. */ --atl-ink-1000: #ffffff; --atl-ink-200: #36363b; /* -400 monte d'un cran : #7A7A80 sur un panneau #0b0b0c ne tient pas la lecture d'une note de bas de bloc (.info), et c'est son seul emploi hors de la barre produit. */ --atl-ink-400: #9a9aa0; background: var(--nuit-fond); color: var(--fg); } /* ------------------------------------------------------------------------- 20 bis. LE CHROME NE BOUGE PAS D'UN PIXEL La barre haute, la nav, le tiroir, le pied et la barre produit collante sont noirs de jour comme de nuit. Ils reprennent donc ici, mot pour mot, les jetons que ces pages leur donnent de jour, semantiques compris : sans cela, le retournement du bloc 20 les suivrait a l'interieur, et l'en-tete changerait d'aspect selon la page ou l'on se trouve. ------------------------------------------------------------------------- */ html[data-mode="sombre"] body.pdp-body .mast-top, html[data-mode="sombre"] body.pdp-body .nav2, html[data-mode="sombre"] body.pdp-body .drawer, html[data-mode="sombre"] body.pdp-body .banner, html[data-mode="sombre"] body.pdp-body .footer, html[data-mode="sombre"] body.pdp-body .pfoot, html[data-mode="sombre"] body.pdp-body .pnav, html[data-mode="sombre"] body.pdp-body .projet-toast{ --bg: #ffffff; --bg-alt: #f6f6f7; --bg-inverse: #000000; --surface: #ffffff; --surface-2: #f6f6f7; --fg: #000000; --fg-2: #232327; --fg-3: #55555b; --fg-4: #7a7a80; --rule: #000000; --rule-2: #d2d2d5; --rule-3: #e4e4e6; --accent-fg: #ffffff; --atl-ink-1000: #000000; --atl-ink-700: #232327; --atl-ink-600: #36363b; --atl-ink-500: #55555b; --atl-ink-400: #7a7a80; --atl-ink-200: #d2d2d5; --atl-ink-150: #e4e4e6; --atl-ink-50: #f6f6f7; } /* ------------------------------------------------------------------------- 20 quater. LES ILOTS QUI RESTENT CLAIRS, ET QUI ONT FAILLI DISPARAITRE Une carte produit (.pcard) est BLANCHE sur le site sombre : c'est ainsi que l'accueil montre ses vedettes depuis toujours, et la section « produits associes » d'une fiche de nuit doit lui ressembler. Elle reste donc claire. Le piege, mesure a l'ecran sur /gym-equipment/a264 en nuit : le bloc 20 retourne les encres pour TOUTE la fiche, y compris a l'interieur de ces cartes restees blanches. Titre en blanc sur blanc (1:1), modele a 2,37:1, specifications a 1,51:1, bouton « View product » invisible. Douze textes en tout, sur les trois cartes de la page. Elles reprennent donc leurs encres claires, exactement comme le chrome au bloc 20 bis. C'est le miroir du bloc 3 : la ou le jour rend leurs jetons sombres aux ilots sombres, la nuit rend leurs jetons clairs aux ilots clairs. ------------------------------------------------------------------------- */ html[data-mode="sombre"] body.pdp-body .pcard, html[data-mode="sombre"] body.pdp-body .sellers, html[data-mode="sombre"] body.pdp-body .blog, html[data-mode="sombre"] body.page-catalog .pcard{ --bg: #ffffff; --bg-alt: #f6f6f7; --surface: #ffffff; --surface-2: #f6f6f7; --fg: #000000; --fg-2: #232327; --fg-3: #55555b; --fg-4: #7a7a80; --rule: #000000; --rule-2: #d2d2d5; --rule-3: #e4e4e6; --atl-ink-1000: #000000; --atl-ink-700: #232327; --atl-ink-600: #36363b; --atl-ink-500: #55555b; --atl-ink-400: #7a7a80; --atl-ink-200: #d2d2d5; --atl-ink-150: #e4e4e6; --atl-ink-50: #f6f6f7; color: var(--fg); } /* ------------------------------------------------------------------------- 20 ter. LES SURFACES ECRITES « #fff » EN DUR Le blanc litteral ne se retourne pas par un jeton. Ces onze fonds sont les panneaux de la fiche : ils prennent le noir de carte du site. ------------------------------------------------------------------------- */ html[data-mode="sombre"] body.pdp-body .pdp, html[data-mode="sombre"] body.pdp-body .desc, html[data-mode="sombre"] body.pdp-body .about, html[data-mode="sombre"] body.pdp-body .resources, html[data-mode="sombre"] body.pdp-body .rescard, html[data-mode="sombre"] body.pdp-body .specs__table, html[data-mode="sombre"] body.pdp-body .gallery__nav, html[data-mode="sombre"] body.pdp-body .gallery__zoom, html[data-mode="sombre"] body.pdp-body .crumb{ background: var(--nuit-panneau); } /* LE FIL D'ARIANE, ET LE PIEGE QU'IL A TENDU. « .crumb{background:#fff} » vit dans styles.css, pas dans pdp.css : le releve fait sur les deux feuilles de la fiche ne pouvait pas le voir. Sans cette ligne, la bande restait blanche, et son fil courant, qui est --atl-ink-1000, venait de passer au blanc avec le reste de l'encre : le nom du produit disparaissait purement et simplement. Mesure faite a l'ecran, en nuit, sur /gym-equipment/a264. La lecon vaut pour la suite : sur ces pages, le clair ne vient pas que de pdp.css et d'equipements.css, il vient aussi des ILOTS CLAIRS de styles.css (.crumb, .sellers, .blog, .pcard). Les trois autres ne paraissent pas sur une fiche ni sur le catalogue, et .pcard est volontairement laissee claire : une carte blanche sur du noir est deja ce que fait l'accueil sombre. */ html[data-mode="sombre"] body.page-catalog .crumb{ background: var(--nuit-panneau); /* Le fil courant est « color:var(--atl-ink-1000) », et cette encre n'est PAS retournee sur le catalogue : elle y sert aussi de texte sur des fonds blancs qui le restent (.btn--outline-light au survol). Elle est donc rendue blanche ICI seulement, dans la bande, ce qui rattrape du meme coup le survol des liens du fil. Mesure sur /fr/equipements/bancs : le nom de la categorie sortait a 1,07:1. */ --atl-ink-1000: #ffffff; } /* Le survol d'une pastille de taxonomie : la pastille est creuse, son survol la vide completement, comme il la remplissait de blanc de jour. */ html[data-mode="sombre"] body.pdp-body a.taxo__chip:hover{ background: var(--nuit-fond); } /* LES SIX FONDS QUI ETAIENT --atl-ink-1000, C'EST-A-DIRE NOIRS PAR CHOIX. Le bloc 20 vient de les passer en blanc avec le reste de l'encre. Quatre d'entre eux sont des elements INVERSES et le blanc est leur bonne couleur de nuit (.pill.is-active, les deux boutons de galerie au survol, les deux barres du bouton d'accordeon) : seul leur texte, ecrit #fff en dur, est repris juste apres. Les deux autres sont des SECTIONS noires, et une section blanche en pleine page de nuit serait un phare : elles reprennent le noir. */ html[data-mode="sombre"] body.pdp-body .pfeat{ background: var(--nuit-panneau); } html[data-mode="sombre"] body.pdp-body .video{ background: var(--nuit-fond); } /* Le texte des elements inverses : blanc sur noir de jour, noir sur blanc de nuit. Le fond, lui, a deja bascule avec --atl-ink-1000. .btn--dark est le dernier de la serie et il vient de styles.css, pas de pdp.css : « background:var(--atl-ink-1000); color:#fff », le bouton noir du site. Trouve par l'audit sur le bandeau final de /gym-equipment/a264, « Schedule a consultation » a 1:1. Encore un ilot de styles.css que le releve fait sur les deux feuilles de la fiche ne pouvait pas voir. */ html[data-mode="sombre"] body.pdp-body .pill.is-active, html[data-mode="sombre"] body.pdp-body .gallery__nav:hover, html[data-mode="sombre"] body.pdp-body .gallery__zoom:hover, html[data-mode="sombre"] body.pdp-body .btn--outline.btn--on-dark:hover, html[data-mode="sombre"] body.pdp-body .btn--dark, html[data-mode="sombre"] body.page-catalog .btn--dark{ /* var(--bg) ET NON #000, ET LA DIFFERENCE EST TOUT LE PIEGE. Ecrit en dur, le noir eteignait le meme bouton A L'INTERIEUR d'une carte .pcard, qui est restee claire au bloc 20 quater : le bouton y est noir et son texte doit y rester blanc. --bg vaut le fond de l'endroit ou l'on se trouve, #000 sur la page et #ffffff dans l'ilot clair : la regle donne donc la bonne valeur aux deux, sans avoir a exclure quoi que ce soit. Mesure : quatre boutons « View product » perdus a 1:1 avant ce correctif. */ color: var(--bg); } /* .info est une note encadree. Sa bordure --atl-ink-300 n'est pas retournee (l'encre sert aussi au lede de .pfeat, clair sur fond sombre dans les deux modes) : sur du noir elle serait un cadre gris vif. */ html[data-mode="sombre"] body.pdp-body .info{ border-color: var(--nuit-bord-fort); } /* ------------------------------------------------------------------------- 21. LE CATALOGUE ET LES PAGES DE CATEGORIE (body.page-catalog) Ces pages portent DEJA data-theme="dark" sur leur : leur couche semantique est donc sombre depuis tokens.css, et le chrome n'a rien a reprendre. Tout ce qui est clair chez elles vient d'equipements.css, qui repeint en dur, et c'est pourquoi ce bloc enumere au lieu de retourner. ------------------------------------------------------------------------- */ html[data-mode="sombre"] body.page-catalog{ --nuit-fond: #000000; --nuit-panneau: #0b0b0c; --nuit-creux: #161618; --nuit-bord: #232327; --nuit-bord-fort: #36363b; /* LA SEULE ENCRE A RETOURNER ICI, ET ELLE A ETE TROUVEE PAR L'AUDIT. equipements.css ecrit ses couleurs en dur, sauf --atl-ink-500, qu'elle emploie huit fois pour les etiquettes de filtre et les compteurs de pastille. #55555B se lit tres bien sur le blanc de la colonne ; sur le panneau sombre qui la remplace, il tombe a 2,66:1. Mesure sur /gym-equipment, dix-sept textes touches. Les autres encres de cette feuille vivent deja sur du sombre (.annbar, .megamenu, .eqcta, .pfoot) et ne bougent pas. */ --atl-ink-500: #a8a8ad; background: var(--nuit-fond); } /* LE CHROME REPREND SON ENCRE. Le pied .pfoot emploie --atl-ink-500 quatre fois, sur du noir, et il est deja juste : le retournement ci-dessus l'aurait eclairci sans qu'on le demande. L'en-tete doit etre le meme partout, de jour comme de nuit, sur une page claire comme sur une page sombre. */ html[data-mode="sombre"] body.page-catalog .mast-top, html[data-mode="sombre"] body.page-catalog .nav2, html[data-mode="sombre"] body.page-catalog .drawer, html[data-mode="sombre"] body.page-catalog .banner, html[data-mode="sombre"] body.page-catalog .footer, html[data-mode="sombre"] body.page-catalog .pfoot, html[data-mode="sombre"] body.page-catalog .annbar, html[data-mode="sombre"] body.page-catalog .megamenu{ --atl-ink-500: #55555b; } /* Le lavis de la grille et son en-tete, qui etaient #f5f5f5. */ html[data-mode="sombre"] body.page-catalog .products, html[data-mode="sombre"] body.page-catalog .products__head{ background: var(--nuit-fond); color: #ffffff; } html[data-mode="sombre"] body.page-catalog .products__count{ color: #ffffff; } /* La colonne des filtres. */ html[data-mode="sombre"] body.page-catalog .eqfilters{ border-right-color: var(--nuit-bord); scrollbar-color: #36363b transparent; } html[data-mode="sombre"] body.page-catalog .eqfilters::-webkit-scrollbar-thumb{ background: #36363b; } html[data-mode="sombre"] body.page-catalog .eqfilters__head, html[data-mode="sombre"] body.page-catalog .eqfilters__groups{ background: var(--nuit-panneau); border-color: var(--nuit-bord); } html[data-mode="sombre"] body.page-catalog .eqfilters.is-open .eqfilters__head{ border-bottom-color: var(--nuit-panneau); } html[data-mode="sombre"] body.page-catalog .eqfilters__row{ border-bottom-color: var(--nuit-bord); } html[data-mode="sombre"] body.page-catalog .eqfilters__kicker{ color: #a8a8ad; } html[data-mode="sombre"] body.page-catalog .eqfilters__empty{ color: #ffffff; } /* Les pastilles de filtre, et la pastille du compte : inversees. */ html[data-mode="sombre"] body.page-catalog .eqchip{ color: #d2d2d5; } html[data-mode="sombre"] body.page-catalog .eqchip:hover{ background: var(--nuit-creux); } html[data-mode="sombre"] body.page-catalog .eqchip.is-on, html[data-mode="sombre"] body.page-catalog .eqfilters__picked{ background: #ffffff; color: #000000; } /* La carte produit. */ html[data-mode="sombre"] body.page-catalog .prod{ background: var(--nuit-panneau); } html[data-mode="sombre"] body.page-catalog .prod__media, html[data-mode="sombre"] body.page-catalog .prod__specs{ background: var(--nuit-creux); } html[data-mode="sombre"] body.page-catalog .prod__media--photo{ background: radial-gradient(130% 130% at 50% 26%, #1c1c20 0%, #101013 100%); } html[data-mode="sombre"] body.page-catalog .prod__name{ color: #ffffff; } html[data-mode="sombre"] body.page-catalog .prod__desc{ color: #a8a8ad; } html[data-mode="sombre"] body.page-catalog .prod__specs .spec-label{ color: #a8a8ad; } html[data-mode="sombre"] body.page-catalog .prod__specs .spec-value{ color: #d2d2d5; } html[data-mode="sombre"] body.page-catalog .prod__tag{ background: var(--nuit-bord); color: #d2d2d5; } html[data-mode="sombre"] body.page-catalog .prod__cat{ background: #ffffff; color: #000000; } /* Les deux boutons de la carte : creux, puis remplis au survol. Le remplissage passe du noir au blanc, et son texte fait le chemin inverse. .prod__add:hover n'est pas ici : il se remplit de rouge Atlantis, et le blanc sur rouge est juste dans les deux modes. */ html[data-mode="sombre"] body.page-catalog .prod__btn, html[data-mode="sombre"] body.page-catalog .prod__add{ background: transparent; border-color: #ffffff; color: #ffffff; } html[data-mode="sombre"] body.page-catalog .prod__btn:hover, html[data-mode="sombre"] body.page-catalog .prod:has(.prod__btn):hover .prod__btn{ background: #ffffff; border-color: #ffffff; color: #000000; } /* Le texte editorial de categorie. Le bloc .faq vit deja sur du sombre : ses deux regles ne sont pas touchees. */ html[data-mode="sombre"] body.page-catalog .cattext{ background: var(--nuit-panneau); color: #d2d2d5; } html[data-mode="sombre"] body.page-catalog .cattext__h2, html[data-mode="sombre"] body.page-catalog .cattext__h3{ color: #ffffff; } html[data-mode="sombre"] body.page-catalog .faq .cattext__h2{ color: #ffffff; } /* Le hero de categorie SANS photo : un aplat gris clair de jour. Avec photo (.hero-bank--on) il est deja noir a texte blanc, et il n'est pas repris. */ html[data-mode="sombre"] body.page-catalog .eqhero{ background: var(--nuit-panneau); } html[data-mode="sombre"] body.page-catalog .eqhero__title{ color: #ffffff; } html[data-mode="sombre"] body.page-catalog .eqhero__eyebrow, html[data-mode="sombre"] body.page-catalog .eqhero__lede{ color: #a8a8ad; } /* Le gris d'attente derriere une photo qui n'est pas encore la. */ html[data-mode="sombre"] body.page-catalog .ph{ background: var(--nuit-bord); } /* La bande de resultats de recherche. */ html[data-mode="sombre"] body.page-catalog .results{ border-color: var(--nuit-bord); } html[data-mode="sombre"] body.page-catalog .results__for, html[data-mode="sombre"] body.page-catalog .results__meta{ color: #a8a8ad; } html[data-mode="sombre"] body.page-catalog .results__term, html[data-mode="sombre"] body.page-catalog .results__link, html[data-mode="sombre"] body.page-catalog .results__nonetitle{ color: #ffffff; } html[data-mode="sombre"] body.page-catalog .results__chip, html[data-mode="sombre"] body.page-catalog .results__back{ background: var(--nuit-panneau); border-color: var(--nuit-bord-fort); color: #ffffff; } html[data-mode="sombre"] body.page-catalog .results__back:hover{ background: #ffffff; border-color: #ffffff; color: #000000; } /* ------------------------------------------------------------------------- 22. LA CAMPAGNE CANADIENNE, /made-in-canada et /proudlycanadian AJOUTE LE 2026-09-12, A LA DEMANDE DE CLEMENT : « par defaut il faut tout le temps avoir jour/nuit ». Ces deux pages etaient hors des deux themes (bloc 3 bis) et n'affichaient meme pas les deux boutons ; elles les affichent desormais, et voici leur jour. CE QUI RENDAIT LA CONVERSION PLUS SIMPLE QU'ELLE N'EN AVAIT L'AIR. La page ressemble a une composition d'un seul tenant, mais son releve donne onze sections de premier niveau, et seules CINQ sont du contenu : .ca-why, .ca-plant, .ca-staples, .ca-trust et .ca-close, toutes noires a texte blanc. Les six autres sont deja des ilots que le theme respecte partout ailleurs : .mast-top canada.css la repeint en BLANC sur cette page, et c'est deja sa couleur aujourd'hui. Rien a faire, sauf donner leur encre aux deux boutons de la bascule : ils sont ecrits pour une barre noire, et blanc sur blanc ne se lit pas. C'est fait dans canada.css, a cote des memes regles pour la langue, parce que cela vaut de jour COMME de nuit. .nav2 ROUGE Atlantis, la signature de la campagne. Reste. .ca-hero une photo sombre, un halftone et un degrade. C'est un hero sur photo : comme tous les autres, il reste sombre (bloc 3). .ca-marquee et .ca-quote deux bandeaux rouges. Restent (bloc 3). .footer le pied du site, noir dans les deux modes (bloc 3). Le chrome de cette page est entierement REECRIT EN DUR par canada.css (nav rouge, barre blanche, boutons noirs) : il ne passe par aucun jeton, donc le retournement du bloc 2 ne peut pas l'atteindre. C'est ce qui rend cette conversion sure. LES BROUILLONS RESTENT DEHORS. .ca-body.cv2, c'est-a-dire les trois betas V2, V3 et V4, gardent leur mise en scene sombre : aucune page ne les lie, ils sont absents du plan de site, et leurs feuilles sont des compositions a part (vortex de souvenirs, plongee WebGL) dont chacune demanderait sa propre conversion. Le jour ou l'un d'eux remplace la campagne, il passe par ici. ------------------------------------------------------------------------- */ /* LE BOUTON FANTOME DE CETTE PAGE A SA PROPRE DENSITE, et il faut la lui rendre. canada.css lui donne « border:1px solid rgba(255,255,255,.35) » ; la regle generale du theme la remplace par --ghost-bord, qui vaut .55 dans un ilot sombre. Sur la photo du hero, la bordure passait donc de #8f8c8c a un gris plus clair : 532 pixels, trouves par le banc des ilots, invisibles a la relecture. On pose la valeur de la page, et la regle generale la lit. Les deux sections claires (.ca-plant, .ca-close) la remplacent ensuite par un filet sombre, plus bas. */ :where(html:not([data-mode="sombre"])) body.ca-body{ --ghost-bord: rgba(255,255,255,.35); } /* Le corps. « .ca-body{background:#000;color:#fff} » pese (0,1,0), ceci (0,1,1) : il suffit d'un element pour passer devant. « :not(.cv2) » SUR CHAQUE SELECTEUR DE CE BLOC, ET CE N'EST PAS DECORATIF. Les trois brouillons portent eux aussi la classe .ca-body, et le bloc 3 bis les garde volontairement sombres. Sans cette exclusion, cette regle-ci leur donnait quand meme un corps CLAIR pendant que leur texte restait blanc, et leurs deux boutons sont caches : le visiteur s'y serait retrouve enferme dans un theme illisible sans moyen d'en sortir. Leurs sections, elles, ne partagent aucun nom de classe avec la campagne (verifie), c'est donc bien le corps, et lui seul, qui les aurait emportes. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2){ background: var(--clair-fond); color: var(--fg); } /* LES CINQ SECTIONS DE CONTENU. Le meme partage que partout ailleurs sur le site en clair : un lavis de page, et des cartes blanches posees dessus. La nuance entre le #000 des unes et le #0B0B0C des autres disparait, et elle ne se voyait pas : onze valeurs sur 255. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-why, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-plant, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-staples, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-trust, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-close, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-floor{ background: var(--clair-fond); } /* .ca-floor ET .ca-stats N'EXISTENT QUE SUR /proudlycanadian, ET C'EST LA LECON DE CE BLOC : les deux pages partagent une feuille mais pas leurs sections. Le releve avait ete fait sur /made-in-canada seule, et .ca-floor est donc reste sombre pendant que ses titres, eux, suivaient l'encre du bloc 2 : cinq titres NOIRS sur un fond #0B0B0C, a 1,07:1. Trouve par l'audit de contraste, pas a l'oeil. .ca-stats, un bandeau rouge, rejoint les ilots sombres du bloc 3. */ /* Les cartes, qui etaient #111. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-staple, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-trustcard{ background: var(--clair-panneau); border-color: var(--clair-bord); } /* Les filets, tous ecrits en blanc translucide (.08 a .14). Sur du clair, un blanc translucide ne dessine rien du tout : ils passent au noir translucide, a la meme densite apparente. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-close, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-staples, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-trust, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-why__grid, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-reason, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-floor, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-floor__steps, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-step{ border-color: var(--clair-bord); } /* Le survol d'une etape passait au rouge eclairci, fait pour le fond noir. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-step:hover{ border-bottom-color: rgba(194,32,50,.55); } /* Les surtitres et les numeros. --atl-red-soft est le rouge ECLAIRCI, fait pour tenir sur du noir ; sur du clair c'est le rouge de marque qui tient. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-why__kicker, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-plant__kicker, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-staples__kicker, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-trust__kicker, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-close__kicker, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-reason__num, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-floor__kicker, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-step__idx{ color: var(--accent); } /* Les textes secondaires, ecrits en blanc translucide : meme densite, autre encre. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-plant__text, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-close__lede, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-reason__text, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-floor__lede, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-step__text{ color: rgba(0,0,0,.72); } :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-plant__addr{ color: rgba(0,0,0,.88); } /* Le bouton fantome, qui parait dans DEUX sections devenues claires (.ca-plant et .ca-close) et dans le hero, qui lui reste sombre. On ne vise donc que les deux premieres : dans le hero, il garde son blanc. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-plant .btn--ghost, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-close .btn--ghost{ color: var(--fg); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-plant .btn--ghost:hover, :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-close .btn--ghost:hover{ border-color: var(--fg); } /* Le voile de la photo de l'usine. Il fond la photo dans la section : tant que la section etait noire il fondait vers le noir, il fond maintenant vers le lavis clair. LA DIRECTION DU DEGRADE CHANGE SOUS 1080 px, et il faut donc deux regles, exactement comme canada.css en a deux : une seule, plus specifique, gagnerait AUSSI dans la requete de media et remettrait le degrade a l'horizontale sur telephone. */ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-plant__media::after{ background: linear-gradient(90deg, transparent 40%, rgba(245,245,245,.55) 100%); } @media (max-width:1080px){ :where(html:not([data-mode="sombre"])) body.ca-body:not(.cv2) .ca-plant__media::after{ background: linear-gradient(180deg, transparent 40%, rgba(245,245,245,.7) 100%); } } /* ------------------------------------------------------------------------- 23. LE CONFIGURATEUR, /configurator AJOUTE LE 2026-09-12, meme demande que le bloc 22. Le bloc 13 fait deja passer ses sept sections de contenu au lavis clair ; ce bloc-ci s'occupe de ce qu'il y a DEDANS, et il est plus long que celui de la campagne pour une raison simple : configurator.css ecrit vingt-neuf fois « color:#fff » en dur. Un blanc litteral ne se retourne pas par un jeton. CE QUI RESTE COMME AVANT, et qui n'est donc pas ici : le hero .cfg-hero (photo sombre), les deux bandeaux ROUGES .fabric et .contact avec tout leur contenu (.optlist, .eyebrow--on-red, .cfg-sub--on-red, .cfg-text--on-red, .btn--on-red), le mega-menu rouge, et le pied .pfoot. Blanc sur rouge et blanc sur photo sont justes dans les deux modes. ------------------------------------------------------------------------- */ /* Les titres et les liens des cartes d'etape, les onglets, les mini-features, les titres de section : tous ecrits en blanc en dur, tous poses sur une surface devenue claire. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .step__title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .step__link, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps__arrow, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps__arrow:disabled, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .tab:hover, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .minifeat__t, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cfg-h3, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .feature-row .section-title, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .register-ok strong, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cfield input, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cfield select, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cfield textarea{ color: var(--fg); } /* Les bordures ecrites avec --atl-ink-700 et -600, les deux encres que le bloc 2 ne retourne PAS (double usage) : sur une carte blanche elles dessinent un trait presque noir la ou il faut un filet. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .step, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .tab, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps__arrow, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps__arrow:disabled, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .split--card .split__panel, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cfield input, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cfield select, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cfield textarea{ border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps{ border-top-color: var(--clair-bord); } /* La fleche du carrousel au survol : elle s'inversait en blanc sur noir, elle s'inverse maintenant en noir sur blanc. Le fond vient de --atl-ink-1000, que le bloc 2 ne retourne pas ; on le pose donc a la main, avec son texte. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps__arrow:hover{ background: var(--fg); border-color: var(--fg); color: var(--clair-panneau); } /* Le message d'erreur du formulaire : un rose pale, fait pour du noir. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cform .register-error{ color: var(--atl-red-deep); } /* Le cadre du formulaire portait une bordure noire translucide, invisible sur du noir et trop dure sur du clair. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .cform{ border-color: var(--clair-bord); } /* Le bouton « contour sur fond sombre » : il parait dans quatre sections devenues claires, et son nom ne veut plus rien dire la. On ne vise que ces quatre-la : dans les bandeaux rouges, il garde son blanc. Trouve par l'audit : quatre boutons « Discover » et « See more » a 1:1 et 1,09:1. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps .btn--outline.btn--on-dark, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .stitch .btn--outline.btn--on-dark, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .feature-row .btn--outline.btn--on-dark, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .finalize .btn--outline.btn--on-dark{ color: var(--fg); border-color: var(--clair-bord-fort); } :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .steps .btn--outline.btn--on-dark:hover, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .stitch .btn--outline.btn--on-dark:hover, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .feature-row .btn--outline.btn--on-dark:hover, :where(html:not([data-mode="sombre"])) body[data-theme="dark"]:has(.cfg-hero) .finalize .btn--outline.btn--on-dark:hover{ background: var(--fg); border-color: var(--fg); color: var(--clair-panneau); } /* ------------------------------------------------------------------------- 24. LE TUNNEL DE SOUMISSION, /quote-request AJOUTE LE 2026-09-12, meme demande que les blocs 22 et 23. C'est la page ou la conversion se produit, et c'est aussi la mieux ecrite des trois : soumission.css passe presque tout par des jetons, et le bloc 2 fait donc l'essentiel du travail tout seul (les panneaux --atl-ink-900 deviennent blancs, les textes -300 et -400 deviennent sombres). IL RESTE TROIS FAMILLES, ET CE SONT TOUJOURS LES MEMES : - les FONDS en --atl-ink-1000, que le bloc 2 ne retourne pas (double usage) : le corps, la scene, la barre du haut et celle du bas ; - les FILETS en --atl-ink-700, meme raison ; - les seize « color:#fff » ecrits en dur. LE TUNNEL N'A PAS DE CHROME : ni barre haute du site, ni nav, ni pied. Ses deux boutons jour/nuit sont donc poses a la main dans son propre en-tete (.fnl__topright), a cote de sa bascule de langue, dans quote-request/ index.html et index.b.html. Ces deux pages ne passent par aucun generateur. ------------------------------------------------------------------------- */ /* Les fonds. LA BARRE DU HAUT ET CELLE DU BAS N'Y SONT PAS : ce sont le chrome du tunnel, et le chrome du site reste sombre dans les deux modes, ici comme ailleurs. Elles encadrent donc une scene claire, ce qui est aussi ce que fait le reste du site avec sa barre haute et son pied. La mesure a tranche : en les eclaircissant, la langue active et le bouton de theme actif, tous deux ecrits « color:#fff » en dur par soumission.css, passaient a 1,09:1. Les rendre a leur noir coute une ligne et remet les deux a leur contraste d'origine. */ :where(html:not([data-mode="sombre"])) body.fnl-body.fnl-body, :where(html:not([data-mode="sombre"])) body.fnl-body .fnl{ background: var(--clair-fond); } /* « body.fnl-body.fnl-body », LA CLASSE ECRITE DEUX FOIS, ET CE N'EST PAS UNE COQUILLE. soumission.css ecrit « body.fnl-body{background:var(--atl-ink-1000)} », qui pese exactement autant que la meme regle ici (0,1,1) ; a specificite egale c'est la derniere feuille chargee qui gagne, et soumission.css est chargee APRES theme.css. Le corps restait donc noir sous une scene claire. Invisible au banc local, parce que .fnl couvre la fenetre : cela ne se voit qu'au rebond du defilement, et cela s'est vu sur la PRODUCTION, en mesurant le fond du corps apres publication. Repeter la classe porte la regle a (0,2,1) et lui rend la main, sans toucher a soumission.css. */ /* Les deux barres reprennent les jetons sombres, comme les ilots du bloc 3. */ :where(html:not([data-mode="sombre"])) body.fnl-body .fnl__top, :where(html:not([data-mode="sombre"])) body.fnl-body .fnl__bottom{ --fg: var(--atl-ink-0); --fg-2: #D2D2D5; --fg-3: #A8A8AD; --fg-4: #7A7A80; --atl-ink-100: #EFEFF1; --atl-ink-200: #D2D2D5; --atl-ink-300: #A8A8AD; --atl-ink-400: #7A7A80; --atl-ink-900: #0B0B0C; --atl-ink-800: #161618; color: var(--fg); } :where(html:not([data-mode="sombre"])) body.fnl-body{ color: var(--fg); } /* Les filets en --atl-ink-700, et la piste de la barre de progression, qui emploie la meme encre comme FOND : sur du clair elle serait un rail noir. */ :where(html:not([data-mode="sombre"])) body.fnl-body .fslide__recap, :where(html:not([data-mode="sombre"])) body.fnl-body .frecapchip, :where(html:not([data-mode="sombre"])) body.fnl-body .fcard, :where(html:not([data-mode="sombre"])) body.fnl-body .ffield__input, :where(html:not([data-mode="sombre"])) body.fnl-body .fcheck--consent, :where(html:not([data-mode="sombre"])) body.fnl-body .fstat, :where(html:not([data-mode="sombre"])) body.fnl-body .frecap, :where(html:not([data-mode="sombre"])) body.fnl-body .fdone__ref{ border-color: var(--clair-bord-fort); } /* La piste de progression vit dans la barre haute, qui reste sombre : elle garde donc son gris d'origine, et rien n'est a faire. */ /* Les seize blancs en dur. Aucun d'eux n'est pose sur du rouge : le seul qui le soit, .btn--red, n'est pas dans cette liste et garde son blanc. */ :where(html:not([data-mode="sombre"])) body.fnl-body .fnl__count span:first-child, :where(html:not([data-mode="sombre"])) body.fnl-body .fnl__quit:hover, :where(html:not([data-mode="sombre"])) body.fnl-body .fnlfact__line, :where(html:not([data-mode="sombre"])) body.fnl-body .fslide__title, :where(html:not([data-mode="sombre"])) body.fnl-body .frecapline__n, :where(html:not([data-mode="sombre"])) body.fnl-body .frecapedit:hover, :where(html:not([data-mode="sombre"])) body.fnl-body .fcard__title, :where(html:not([data-mode="sombre"])) body.fnl-body .ffield__input, :where(html:not([data-mode="sombre"])) body.fnl-body .ffield__select option, :where(html:not([data-mode="sombre"])) body.fnl-body .frecaprow__v, :where(html:not([data-mode="sombre"])) body.fnl-body .frecaprow__edit:hover, :where(html:not([data-mode="sombre"])) body.fnl-body .frecapitem, :where(html:not([data-mode="sombre"])) body.fnl-body .fsend-error, :where(html:not([data-mode="sombre"])) body.fnl-body .fdone__refval, :where(html:not([data-mode="sombre"])) body.fnl-body .fdone__urgent a, :where(html:not([data-mode="sombre"])) body.fnl-body .fnl__back:hover{ color: var(--fg); } /* Le rouge eclairci du message d'erreur est fait pour du noir. */ :where(html:not([data-mode="sombre"])) body.fnl-body .ferror{ color: var(--atl-red-deep); } /* La colonne de droite garde sa photo et son voile : c'est un media, comme un hero. Son fond de secours passe au blanc de panneau avec --atl-ink-900, et son texte suit ; seul le voile, qui fondait vers le noir, est repris. */ :where(html:not([data-mode="sombre"])) body.fnl-body .fnl__asidescrim, :where(html:not([data-mode="sombre"])) body.fnl-body .fnl__scene::after{ background: linear-gradient(180deg, rgba(245,245,245,0) 0%, rgba(245,245,245,.86) 100%); } /* ------------------------------------------------------------------------- 26. LE GRIS D'ATTENTE DERRIERE UNE PHOTO « .ph » est le rectangle qui tient la place d'une photo qui n'est pas encore la, ou qui ne viendra pas. Il est peint avec --atl-ink-200, l'une des encres que le bloc 2 retourne : de #D2D2D5, un gris pale, il passait a #232327, un rectangle presque noir au milieu d'une carte blanche. Mesure du 2026-09-12 sur /configurator ; le catalogue a le meme defaut des qu'une photo manque. L'audit de contraste ne pouvait pas le voir : c'est un FOND, pas un texte, et le petit pictogramme qu'il contient garde son gris moyen dans les deux cas. Il s'est vu a l'oeil, sur une capture ou les photos ne chargeaient pas. ------------------------------------------------------------------------- */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .ph{ background: var(--clair-media); } /* Sauf dans le mega-menu, qui est un ilot sombre (rouge chez le configurateur, noir ailleurs) : la sienne est un blanc translucide, et elle le reste. */ :where(html:not([data-mode="sombre"])) body[data-theme="dark"] .megamenu .ph{ background: rgba(255,255,255,.16); } /* SANS-GARDE-DEBUT : tout ce qui suit ce repere vaut dans LES DEUX modes, et tools/verif-theme.js le sert aussi a son bras de reference. Sans cela, son bras « sans theme » rendrait les deux boutons en boutons natifs et il accuserait la barre haute de bouger a chaque page. */ /* ------------------------------------------------------------------------- 25. LES DEUX BOUTONS EUX-MEMES Venus de styles.css le 2026-09-12. Ils vivent ici parce que theme.css est la SEULE feuille que toutes les pages a bascule chargent : le tunnel de soumission, qui porte les boutons, ne charge pas styles.css, et ses deux boutons y tombaient en boutons natifs gris. AUCUNE GARDE SUR CES REGLES, ET C'EST VOULU : les boutons ont la meme apparence de jour comme de nuit. C'est le seul groupe de regles de cette feuille dans ce cas, et tools/verif-theme.php le sait (VT_SANS_GARDE_ADMIS). Le meme vocabulaire que la bascule de langue, juste a cote d'elle : deux choix visibles, celui en cours en blanc, l'autre en gris. Un seul bouton qui change d'etiquette obligerait a deviner si « Nuit » decrit l'etat ou l'action ; deux boutons ne posent pas la question. Ces couleurs valent pour une barre SOMBRE, qui est le cas partout sauf sur la campagne canadienne : canada.css leur redonne une encre sombre pour sa barre blanche, comme elle le fait deja pour la langue. ------------------------------------------------------------------------- */ .themeswitch{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-weight:600; font-size:12px; letter-spacing:var(--track-wide); text-transform:uppercase; } .themeswitch__sep{ color:var(--atl-ink-600); } .themeswitch__btn{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--atl-ink-400); cursor:pointer; transition:color var(--dur-quick) var(--ease-out); } .themeswitch__btn:hover{ color:#fff; } .themeswitch__btn.is-active{ color:#fff; } .themeswitch__btn svg{ flex:0 0 auto; } /* Le soleil tourne d'un huitieme de tour quand il prend la main, la lune ne bouge pas : un mouvement suffit a dire lequel des deux vient de changer. */ .themeswitch__btn[data-mode-choix="jour"] svg{ transition:transform var(--dur-base) var(--ease-out); } .themeswitch__btn[data-mode-choix="jour"].is-active svg{ transform:rotate(45deg); } @media (prefers-reduced-motion:reduce){ .themeswitch__btn[data-mode-choix="jour"] svg{ transition:none; } } /* Sous 900 px, quatre mots plus deux icones ne tiennent pas a cote de la bascule de langue. Les icones restent, et elles gardent leur nom accessible : chaque bouton porte un aria-label, ce n'est donc pas le texte visible qui le nomme. */ @media (max-width:900px){ .themeswitch__t{ display:none; } .themeswitch{ gap:6px; } }