/** * Les deux modes du site : le papier, et l'encre. * * ── LE PARTI PRIS, EN UNE PHRASE ─────────────────────────────────────────── * Le mode clair est du papier crème imprimé en navy. Le mode sombre n'est PAS * son négatif : c'est la même page vue à la lumière d'un atelier le soir — un * gris de plomb, pas un noir d'écran. Lina l'a demandé dans ces termes : * « peut-être pas full noir, peut-être un petit peu plus dans le gris ». * Le fond vaut #2d323a et pas #000 pour cette raison, et pour une seconde, * mesurée : sur un noir plein, le crème du texte vibre (halation) et les * titres d'Instrument Serif, qui sont fins, se mettent à baver. * * ── CE QUE CE FICHIER NE FAIT PAS ────────────────────────────────────────── * Il ne touche PAS au mode clair. Chaque correction structurelle ci-dessous * est écrite `var(--jeton-sombre, )` : sans mode * sombre, le jeton n'existe pas, la substitution retombe sur la valeur * littérale de `design.css`, et la page rendue est identique au signe près. * C'est la seule façon d'ajouter un thème à une feuille de 3400 lignes sans * avoir à prouver qu'on n'a rien cassé : la preuve est dans la syntaxe. * * ── LE PIÈGE QUI A COÛTÉ LE PLUS, ET QUI NE SE VOIT PAS ──────────────────── * 🔴 `--navy` FAIT DEUX MÉTIERS. Mesuré sur `design.css` : 29 fois une * COULEUR DE TEXTE (titres, menu, chiffres, lettrines) et 20 fois un FOND * (la bande, l'ouverture, les blocs, les encadrés). Aucune valeur unique ne * peut servir les deux en mode sombre : l'encre doit s'éclaircir pendant que * la plaque doit rester sombre. Inverser le jeton casse les plaques ; le * garder sombre rend les titres illisibles. * * La résolution retenue : `--navy` RESTE la plaque (il s'assombrit un peu, à * #10141d, pour se détacher du fond), et un jeton neuf — `--encre` — prend * les 49 emplois d'encre, site par site, dans la section 4. C'est verbeux, et * c'est le prix d'un jeton qui n'avait jamais été séparé. La dette est nommée * dans le rapport : le jour où `design.css` scinde `--navy` en `--navy` (la * plaque) et `--encre` (le texte), toute la section 4 disparaît. * * 🔴 ET `theme.json` PASSE DEVANT `design.css`. Deuxième surprise, et elle * invalidait la moitié du travail. WordPress rend les styles de `theme.json` * en `:root :where(body)`, `:root :where(h1)`, `:root :where(a…)` — soit une * spécificité de (0,1,0), là où `design.css` écrit `body` et `h1` à (0,0,1). * Le fond de page et la couleur des titres du site ne viennent donc PAS de * `--creme` ni de `--navy` : ils viennent de `--wp--preset--color--creme` et * `--wp--preset--color--navy`. Les deux valaient la même couleur, donc rien * ne le signalait. Un mode sombre qui ne redéfinit que les jetons du thème * laisse la page en crème avec du texte clair dessus — illisible, et sans * aucune erreur pour le dire. * * Les dix préréglages sont donc redéfinis eux aussi, en section 3. C'est une * chance pour `--wp--preset--color--navy` : ses SEULS consommateurs sont les * titres et les liens — jamais un fond. Vérifié en cherchant * `has-navy-background-color` dans tout le contenu et tous les gabarits : * zéro occurrence. Il peut donc devenir l'encre claire sans réserve. * * ── CONTRASTES, MESURÉS ──────────────────────────────────────────────────── * Calculés au ratio WCAG 2.1 sur les couples réellement composés par la * feuille, pas sur des couples théoriques. Le plus faible du mode sombre est * à 5,08:1 — texte doux sur le haut du sol de la salle, qui est la zone la * plus claire du mode. Le texte courant est à 9,69:1, les titres à 11,22:1. * Détail complet dans le rapport de chantier. * * @package linahadid */ /* ═══ 1. LA PALETTE SOMBRE, DÉCLARÉE ET JAMAIS APPLIQUÉE ══════════════════ * * Les valeurs vivent ici, à UN endroit. Les deux blocs de la section 3 ne * font que les aliaser : il faut bien dupliquer un sélecteur (une règle ne * peut pas être à la fois dans une media query et dehors), mais pas les * couleurs. Une couleur se change ici, et les deux chemins suivent. */ :root { --s-fond: #2d323a; /* le gris de plomb : la page */ --s-fond-2: #252a31; /* le fond alterné, un cran plus bas */ --s-carte: #363c45; /* une carte MONTE en mode sombre */ --s-blanc: #41474f; /* la surface la plus haute */ /* LA PLAQUE DESCEND AU LIEU DE MONTER. En clair, la bande navy tranche à 11:1 sur le crème ; aucune paire de gris sombres ne peut refaire ça. #10141d donne 1,43:1 sur le fond — c'est peu en chiffre, et c'est net à l'œil parce qu'une plaque de ce site va toujours d'un bord à l'autre : on lit une arête horizontale franche, pas une nuance. Les plaques ENCASTRÉES (`.bloc`, `.encadre`, la fenêtre) reçoivent en plus un filet, section 4 — sans lui, elles flottaient. */ --s-plaque: #10141d; --s-plaque-presse: #090d14; /* L'ENCRE CLAIRE. Trois degrés, les mêmes rôles qu'en clair : `--s-encre` ce qui titre · `--s-texte` ce qui se lit · `--s-texte-doux` ce qui commente. Le crème n'est pas repris tel quel (#f4f1ea) : à pleine surface il éclaire, en lettres il éblouit. Désaturé et descendu de deux crans, il garde la chaleur du papier sans le halo. */ --s-encre: #f2efe7; --s-texte: #e3dfd5; --s-texte-doux: #afb5c1; /* LE FILET. En clair, `--trait` est un crème plus foncé à 1,13:1 — un repli de papier, presque rien. La transposition garde ce presque rien : 1,49:1. Un filet de thème sombre à fort contraste quadrille la page. */ --s-trait: #464c56; --s-filet-fort: #5d6470; /* là où le clair mettait du navy plein */ /* LE LAITON MONTE DE DEUX CRANS. #b0915f tient 4,2:1 sur le crème ; sur #2d323a il n'en tient plus que 3,9 — sous la barre pour du mono de 14 px. #c9a86d et #d4b277 remettent les deux rôles au-dessus de 4,5. */ --s-accent: #c9a86d; --s-accent-texte: #d4b277; --s-alerte: #eb8d84; /* LE SOL DE LA SALLE, LA NUIT. Les cinq arrêts du plancher, retournés : la lumière tombe toujours d'en haut à gauche, mais c'est désormais une lampe d'atelier et non la verrière. Le halo lui-même (section 4) tombe de .98 d'opacité à .10 : à .98 sur un sol sombre, il repeignait un quart de la pièce en blanc. */ --s-sol-haut: #3a4049; --s-sol-milieu: #30353d; --s-sol-bord: #262a31; --s-sol-ombre: #1a1d23; --s-sol-bas: #0f1116; --s-halo-1: rgba(214, 205, 189, .10); --s-halo-2: rgba(214, 205, 189, .05); --s-halo-3: rgba(214, 205, 189, 0); } /* ═══ 2. CE QUI NE BOUGE PAS, ET POURQUOI ═════════════════════════════════ * * * `--sur-navy` (#ece6da) et `--sur-navy-doux` (#aab2c4) — l'encre claire des * plaques. Elles sont déjà l'encre d'un fond sombre : les retourner serait * les retourner deux fois. Elles tiennent 14,82:1 et 8,66:1 sur la plaque * assombrie, mieux qu'en mode clair. * * `--nuit` (#0b1120) — le fond des images de la salle, de la mosaïque et des * couvertures. C'est déjà la valeur la plus basse du site, et SURTOUT : sept * voiles de `design.css` sont écrits en `rgba(11,17,32,…)` en dur, donc * accordés à cette valeur. La changer les désaccorderait sans qu'aucun jeton * ne le dise. * * `--laiton-vif` (#c08f3e) — il ne sert que SUR `--nuit` et sur la plaque, * où il tient 6,49:1 et 6,35:1. Il n'apparaît jamais sur le fond de page. * * `--blanc` (#fff) — deux emplois, et les deux restent justes dans le noir : * le fond des vignettes de presse (une page de journal scannée est du papier * blanc, de jour comme de nuit) et l'état le plus haut d'un bouton clair. * Le retourner aurait fait des cartons gris derrière des coupures blanches. */ /* ═══ 3. LE SEUL CHEMIN VERS LE MODE SOMBRE ═══════════════════════════════ * * * `[data-theme="sombre"]`, posé par le clic, et rien d'autre. Il y avait * deux chemins jusqu'au 02.11 ; le second — la media query du système — * est parti avec le choix de Yan de servir le papier à tout le monde. Ce * qu'on y gagne au passage : les deux blocs devaient rester identiques mot * pour mot, et une divergence entre eux ne se serait vue que sur la moitié * des visiteurs. * * ⚠️ `@media screen`, ET C'EST CE QUI SAUVE L'IMPRESSION. Les navigateurs * n'impriment pas les fonds (`print-color-adjust: economy`) mais impriment le * texte : un mode sombre qui franchit la media query sort une feuille blanche * avec du crème dessus — invisible, et aucun contrôle ne l'attrape, parce * qu'on ne regarde pas un aperçu d'impression en mode sombre. * Enfermés dans `@media screen`, les alias n'existent pas à l'impression : * `--encre` est indéfini, la section 4 retombe sur `var(--navy)`, les jetons * gardent les valeurs de `design.css`, et la page s'imprime en papier crème * et encre navy quel que soit le mode affiché. Aucune couleur n'a eu besoin * d'être répétée une troisième fois pour ça. */ @media screen { :root[data-theme="sombre"] { color-scheme: dark; --creme: var(--s-fond); --creme-2: var(--s-fond-2); --carte: var(--s-carte); --navy: var(--s-plaque); --navy-presse: var(--s-plaque-presse); --texte: var(--s-texte); --texte-doux: var(--s-texte-doux); --trait: var(--s-trait); --accent: var(--s-accent); --accent-texte: var(--s-accent-texte); --alerte: var(--s-alerte); --sol-haut: var(--s-sol-haut); --sol-milieu: var(--s-sol-milieu); --sol-bord: var(--s-sol-bord); --sol-ombre: var(--s-sol-ombre); --sol-bas: var(--s-sol-bas); /* LES JETONS QUI N'EXISTENT QU'ICI. Leur absence en mode clair est ce qui désarme toute la section 4 : `var(--encre, var(--navy))` y retombe sur `var(--navy)`, soit exactement ce que `design.css` écrit déjà. */ --encre: var(--s-encre); --filet-entete: var(--s-filet-fort); --filet-plaque: var(--s-trait); --filet-commande: var(--s-accent); --halo-1: var(--s-halo-1); --halo-2: var(--s-halo-2); --halo-3: var(--s-halo-3); /* LES PRÉRÉGLAGES DE `theme.json`, qui passent devant `design.css`. Voir l'en-tête : sans ces dix lignes, le fond de page, les titres et les liens restent en clair. `--wp--preset--color--navy` devient l'ENCRE et non la plaque, parce que ses seuls consommateurs sont `elements.link` et `h1`→`h4`. */ --wp--preset--color--creme: var(--s-fond); --wp--preset--color--creme-2: var(--s-fond-2); --wp--preset--color--carte: var(--s-carte); --wp--preset--color--navy: var(--s-encre); --wp--preset--color--texte: var(--s-texte); --wp--preset--color--texte-doux: var(--s-texte-doux); --wp--preset--color--trait: var(--s-trait); --wp--preset--color--accent: var(--s-accent); --wp--preset--color--accent-texte: var(--s-accent-texte); } /* 🔴 LE PAPIER EST LE DÉFAUT, ET POUR TOUT LE MONDE. Il y avait ici un second bloc, identique, sous `@media (prefers-color-scheme: dark)` : un visiteur dont le système est en sombre arrivait sur le site en gris sans l'avoir demandé. Tranché par Yan le 02.11.2026 — « met le clair papier par défaut ». C'est une décision de marque, pas un réglage d'accessibilité. Le site EST du papier crème : c'est le premier mot de Lina sur ce thème (« là on est sur du papier crème, encre tout ça »), c'est ce que montrent les couvertures, et c'est ce qu'on sert à qui n'a rien demandé. Le gris reste entier, à un clic, et le choix est mémorisé — mais il se CHOISIT. ⚠️ `prefers-color-scheme` ne disparaît pas du fichier pour autant : la règle du logo clair, tout en bas, portait la même paire de sélecteurs et perd la même moitié. Les deux se suppriment ensemble ou le logo blanc réapparaît sur fond crème. */ :root { color-scheme: light; } } /* fin de @media screen — le bloc d'alias, et lui seul */ /* ═══ 4. LES QUARANTE-NEUF EMPLOIS D'ENCRE DE `--navy` ════════════════════ * * * Chacune de ces règles répète un sélecteur de `design.css` pour n'y changer * QUE la couleur, et avec un repli égal à la valeur d'origine. En mode clair, * la cascade rend donc exactement la même chose qu'avant ce fichier. * * ⚠️ LA SPÉCIFICITÉ EST CHOISIE, PAS SUBIE. Les sélecteurs sont recopiés tels * quels, jamais renforcés : c'est ce qui laisse `design.css` garder la main là * où il a déjà prévu l'encre claire. `.bloc h2` (0,1,1) continue de battre * `.wp-block-heading` (0,1,0) et de rendre ses titres en `--sur-navy` à * l'intérieur de la plaque. Monter d'un cran « pour être sûr » éteindrait * cette précaution et peindrait les titres des blocs en clair sur clair. * * Trois règles de `design.css` perdent ce départage parce qu'elles tombent à * ÉGALITÉ de spécificité avec les miennes et que ce fichier est chargé après. * Elles sont donc réaffirmées à la fin de la section. Sans elles, les * variantes `--clair` — qui sont précisément l'encre claire posée à la main * sur les plaques — repasseraient en clair sur clair. */ /* ── l'encre ─────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, .wp-block-heading, .lien, .hd .wp-block-navigation a, .hd .wp-block-navigation a[aria-current="page"], .donnees dd, .specs dd, .livre-legende b, .filtres a:hover, .filtres a[aria-current], .exergue, .colonne blockquote, .colonne .wp-block-quote, .coord dd, .fluentform .ff-el-form-control, .fluentform .ff-message-success, .une-item .t, .coupure .m, .geant, .chiffre, .ouvrage-nom, /* 🔴 LES TROIS QUI SONT ARRIVÉES APRÈS L'INVENTAIRE. Cette section a été écrite le 01.11 contre les `color: var(--navy)` de `design.css` tels qu'ils étaient ce jour-là. Les trois suivantes ont été écrites APRÈS, et aucune porte ne les a vues : le contrôle des rendus ne visite que le mode clair, et une porte de contraste ne peut rien mesurer sur un panneau que seul un clic ouvre. Mesuré sur le site sombre : le titre d'un livre tombait à #10141d sur #363c45, soit 1,66:1 ; le nom d'une maison, à #10141d sur #2d323a, soit 1,43:1. Ce ne sont pas des contrastes faibles, c'est du texte absent. Ils rendent 9,67:1 et 11,22:1. Toute règle d'encre neuve dans `design.css` a sa ligne ici, le jour où elle est écrite. */ .apercu-titre, .apercu-fermer:hover, .enseigne-nom, .mo-maison .nom, .citation, .salle-etat--paru, .chapitre-corps h2, a.mo-tuile:hover .ou, .note .t, .lha-logo-lien { color: var(--encre, var(--navy)); } /* `::first-letter` n'accepte qu'une poignée de propriétés et ne se groupe pas avec des sélecteurs ordinaires sans risque : certains moteurs invalident la règle entière. Elle reste seule. */ .lettrine::first-letter { color: var(--encre, var(--navy)); } /* ── les filets qui étaient du navy plein ────────────────────────────────── */ .lien:hover, .lien:focus-visible { border-bottom-color: var(--encre, var(--navy)); } .hd .wp-block-navigation a[aria-current="page"] { border-bottom-color: var(--encre, var(--navy)); } .coupure--nue { border-top-color: var(--encre, var(--navy)); } .filet-titre { border-bottom-color: var(--encre, var(--navy)); } .regle-pleine { border-top-color: var(--encre, var(--navy)); } .biblio-rayon { border-bottom-color: var(--encre, var(--navy)); } .note--nue { border-top-color: var(--encre, var(--navy)); } .filtres.filtres--rangees .compte { border-top-color: var(--encre, var(--navy)); } /* L'anneau de focus. `.bande a:focus-visible` (0,2,1) garde la main sur les plaques, où `design.css` le met déjà en `--sur-navy`. */ a:focus-visible, button:focus-visible { outline-color: var(--encre, var(--navy)); } .fluentform .ff-el-form-check-input { accent-color: var(--encre, var(--navy)); } /* ── les trois traits qui sont des objets, pas des bordures ─────────────── */ /* Les barres du burger, la réglette d'une partie, l'onde d'une plaque à logo : du navy posé en `background` sur un fond CLAIR. Ce sont des traits d'encre, pas des plaques — d'où `background-color` et non `background`, pour ne pas emporter le reste du raccourci de `design.css`. */ .hd-trois, .hd-trois::before, .hd-trois::after { background-color: var(--encre, var(--navy)); } .part-barre i { background-color: var(--encre, var(--navy)); } .vign--logo .onde i { background-color: var(--encre, var(--navy)); } /* ── le logo ─────────────────────────────────────────────────────────────── */ /* 🔴 LE LOGO N'A JAMAIS PRIS `currentColor`, contrairement à ce qu'annonce `inc/entete.php`. Mesuré : les onze tracés du SVG ne portent que `fill-rule`, aucun `fill` — et la valeur initiale de `fill` en SVG est le NOIR, pas `currentColor`. `design.css` n'écrit `fill` nulle part (vérifié : zéro occurrence dans 3400 lignes). Le logo est donc rendu en #000 depuis le début, et `.lha-logo-lien { color: var(--navy) }` ne le colore pas. Personne ne pouvait le voir : #000 et #1f2b45 côte à côte dans une barre de 84 px ne se distinguent pas. Le repli vaut donc #000 et non `var(--navy)` : il reproduit ce qui est RENDU aujourd'hui, pas ce que la feuille croit rendre. Le mode clair ne bouge pas d'un pixel, et le mode sombre donne le logo blanc demandé. La correction du mode clair est une décision de marque, pas de thème : elle est posée dans le rapport, à appliquer dans `design.css`. */ .lha-logo { fill: var(--encre, #000); } /* ── les plaques encastrées reçoivent une arête ──────────────────────────── */ /* Une plaque pleine largeur se lit à son arête horizontale ; une plaque ENCASTRÉE dans la page n'en a pas, et à 1,43:1 elle flottait. Le filet est posé en `box-shadow` et non en `border` : une bordure de 1 px aurait décalé la mise en page du mode clair de 2 px par plaque. Transparent par défaut, donc rigoureusement sans effet en clair. */ .bloc, .encadre { box-shadow: 0 0 0 1px var(--filet-plaque, transparent); } .fenetre { border-color: var(--filet-plaque, var(--navy)); } .mo-maison--navy { border-color: var(--filet-plaque, var(--navy)); } .maconnerie .wp-block-post-template > li:nth-child(4n+2) { border-color: var(--filet-plaque, var(--navy)); } /* LE BOUTON EST UNE COMMANDE, et une commande doit se voir comme telle. Sa plaque ne tient que 1,43:1 sur la page : son étiquette est lisible, son contour ne l'est pas. Un filet de laiton — 5,71:1 sur la page — le rend identifiable, et c'est la couleur que le site donne déjà à tout ce qui réagit au survol. */ .btn, .wp-block-button__link, .fluentform .ff-btn-submit { box-shadow: 0 0 0 1px var(--filet-commande, transparent); } /* Le filet de l'en-tête : en clair c'est du navy plein sur crème, soit le trait le plus fort de la page. Transposé à l'identique il aurait donné une règle presque blanche en travers de l'écran. `--s-filet-fort` tient 2:1 — une règle qu'on voit, et qui ne découpe pas la page en deux. */ .hd { border-bottom-color: var(--filet-entete, var(--navy)); } /* ── le sol de la salle ──────────────────────────────────────────────────── */ /* Le dégradé est recopié tel quel pour une seule raison : son premier arrêt, `rgba(255,252,246,.98)`, est écrit EN DUR dans `design.css` et ne passe par aucun jeton. Assombrir seulement les cinq `--sol-*` aurait laissé ce halo à 98 % d'opacité repeindre le quart haut gauche de la pièce en blanc — exactement là où se lisent le titre et le cartel. Les trois arrêts du halo deviennent des jetons avec repli, donc le mode clair est inchangé. */ .salle-haut::before, .salle-charpente::before { background: radial-gradient(112% 82% at 18% 0%, var(--halo-1, rgba(255, 252, 246, .98)) 0%, var(--halo-2, rgba(246, 243, 236, .7)) 34%, var(--halo-3, rgba(219, 211, 195, 0)) 76%), linear-gradient(180deg, var(--sol-haut) 0%, var(--sol-milieu) 58%, var(--sol-bord) var(--sol-salle), var(--sol-ombre) calc(var(--sol-salle) + .2%), var(--sol-bas) 100%); } /* ── les trois réaffirmations ────────────────────────────────────────────── */ /* Égalité de spécificité avec mes règles ci-dessus, et `design.css` est chargé avant : sans ces trois lignes, l'encre claire POSÉE À LA MAIN sur les plaques repasserait en clair sur clair. Elles ne changent rien au clair — elles redisent mot pour mot ce que `design.css` dit déjà. */ .chiffre--clair { color: var(--sur-navy); } .coord--clair dt { color: var(--sur-navy-doux); } .coord--clair dd { color: var(--sur-navy); } .mo-maison--navy .nom { color: var(--sur-navy); } /* ═══ 5. LE SÉLECTEUR ═════════════════════════════════════════════════════ * * * ── CE QU'IL EST ─────────────────────────────────────────────────────────── * Un bouton, et le vocabulaire du site sans un signe de plus : mono, petites * capitales, interlettrage à .1em, filet de laiton de 2 px dessous. C'est * trait pour trait la grammaire de `.lien`, qui est déjà ce que le site donne * à tout ce sur quoi on clique. Il ne fallait rien inventer. * * LA PASTILLE EST UNE MARQUE D'IMPRIMEUR, pas une icône. Un cercle dont la * moitié gauche est encrée : c'est le repère de densité qu'on trouve en marge * d'une forme d'impression. Elle est dessinée en deux déclarations CSS — un * dégradé net et un rayon — donc zéro requête, zéro fichier, zéro domaine * tiers. Aucune bibliothèque d'icônes n'entre sur ce site, jamais. * * LE MOT DIT L'ÉTAT, PAS L'ACTION : « Papier » quand on est sur le crème, * « Encre » quand on est dans le gris. Ce sont les deux mots de Lina — * « on est sur du papier crème, encre tout ça » — et ils nomment une matière, * ce qui est la seule chose qu'un lecteur de magazine a envie de lire là. * L'action, elle, est portée par `aria-pressed` et par un `aria-label` fixe * (« Mode sombre ») : la synthèse vocale annonce « Mode sombre, bouton à deux * états, non activé », qui est exact et complet. Un libellé qui change ET un * état qui change disent la même chose deux fois, souvent en se contredisant. * * ── POURQUOI IL EST EN POSITION ABSOLUE ──────────────────────────────────── * 🔴 `.hd` EST UNE GRILLE À TROIS COLONNES, et ses trois enfants dans le flux * la remplissent exactement : menu gauche · logo · menu droit. Un quatrième * enfant ouvre une quatrième colonne implicite, et le logo quitte l'axe — ce * que `design.css` défend explicitement (« LE LOGO TIENT L'AXE »). Mettre le * sélecteur DANS le menu droit ne marche pas non plus : sous 900 px ce menu * devient un panneau en `overflow: hidden` et `max-height: 0`, donc le * sélecteur disparaîtrait derrière le burger. * * Posé en absolu dans `.hd` — qui est `sticky`, donc bloc conteneur — il ne * touche pas à la grille, et il reste atteignable à toutes les largeurs. Le * menu droit lui rend la place par un `padding-right`, parce qu'un sélecteur * posé par-dessus « CONTACT » serait pire qu'absent. * * ── POURQUOI IL EST CACHÉ PAR DÉFAUT ────────────────────────────────────── * Sans JavaScript, il ne peut rien faire. Un bouton visible et inerte est un * défaut, pas une dégradation : c'est `assets/bascule.js` lui-même qui pose * `data-bascule="prete"` sur la racine, en dernière ligne, après avoir * accroché son écouteur. Le script bloqué, lent ou en erreur, le bouton * n'apparaît jamais et le site reste entier — c'est la même garde que la * classe `js` du reveal, pour la même raison. * * Son apparition ne décale rien, justement parce qu'il est en absolu. */ /* 🔴 UNE ICÔNE, ET RIEN D'AUTRE — 01.11.2026. Le mot est parti (voir `inc/theme-bascule.php`), et avec lui tout ce qui l'habillait : le corps, l'interlettrage, les capitales, et le filet d'accent qui le soulignait. Un filet de deux pixels sous un disque de douze n'est plus un soulignement, c'est un trait qui pend. LA CIBLE FAIT 44 px et la pastille 16 : seule, elle doit se voir, et douze pixels étaient dimensionnés pour accompagner un mot. La cible reste celle d'un doigt sur toutes les largeurs — c'est elle qu'on vise, pas le disque. CE QUI REMPLACE LE FILET : un anneau au survol et au clavier. Sans mot et sans trait, il ne restait plus rien pour dire que l'objet réagit. */ .lha-mode { display: none; /* 🔴 CINQ ÉCRITURES, ET C'EST LA CINQUIÈME QUI TIENT. L'icône tombait sous les entrées du menu — « aligner l'icône de jour/nuit ». Mesuré à chaque essai, cible 66 (le centre du menu) : top: 50% + translateY(-50%) 78 top: 0 ; bottom: 0 ; marge auto 110 top/bottom = la garde 86 élément de grille 66 ✅ mais la barre casse top: 0 ; height: 100% 66 ✅ ⚠️ L'AVANT-DERNIÈRE A CASSÉ LA BARRE, et le fichier m'avait prévenu. Le commentaire du filtre, dans `inc/theme-bascule.php`, dit que `.hd` est « une grille à trois colonnes dont les trois enfants tiennent l'axe du logo » et que ce quatrième enfant est en absolu POUR CETTE RAISON. En lui donnant une place dans la grille, il a pris les pistes des autres : relevé `grid-template-columns`, la barre est passée à SIX pistes — `347px 0px 347px 177px 84px 355px` — la piste du logo écrasée à zéro et les trois enfants repoussés dans des pistes implicites. L'icône était alignée et la barre ne tenait plus. CE QUI MARCHE, et la mesure a fini par dire pourquoi : le bloc conteneur commence au HAUT DE LA RANGÉE et descend jusqu'au BAS DE LA BOÎTE — relevé, 24 → 132, donc 108 de haut pour une rangée qui en fait 84. Un `height: 100%` centrait donc à 78, pas à 66. Le bouton prend la hauteur de la rangée, et la rangée vaut `--hd-logo` : c'est la variable à partir de laquelle `.hd` la construit, et elle tombe à 34 quand la barre maigrit au défilement. Le centrage suit, sans second réglage. */ position: absolute; right: var(--marge); top: 0; height: var(--hd-logo); align-items: center; justify-content: center; width: 44px; margin: 0; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--encre, var(--navy)); cursor: pointer; transition: box-shadow .18s ease, color .18s ease; } /* L'anneau est sur la PASTILLE, pas sur la cible : la cible fait toute la hauteur de la barre, et un anneau de 44 × 133 autour d'un disque de 16 ne dit pas « ceci réagit », il dit « quelque chose ne va pas ». */ .lha-mode:hover .lha-mode-pastille, .lha-mode:focus-visible .lha-mode-pastille { box-shadow: 0 0 0 3px var(--accent); } .lha-mode { outline-offset: 4px; } html[data-bascule="prete"] .lha-mode { display: inline-flex; } /* LA PASTILLE. `currentColor` des deux côtés : elle suit l'encre du mode sans qu'aucune valeur ne soit écrite ici. Le dégradé est à arrêts francs — 50 % puis 50 % — donc c'est un demi-disque net, pas un fondu. */ .lha-mode-pastille { flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); } /* La moitié encrée passe à droite une fois le mode sombre actif : le repère tourne, comme la forme qu'on retourne sur le marbre. */ .lha-mode[aria-pressed="true"] .lha-mode-pastille { background: linear-gradient(90deg, transparent 0 50%, currentColor 50% 100%); } @media (prefers-reduced-motion: reduce) { .lha-mode { transition-duration: 1ms; } } /* ── LES LOGOS DE MAISON EN MODE NUIT ───────────────────────────────────── * * Une marque tierce ne prend jamais la couleur du thème — c'est un usage * nominatif, et c'est pour ça que ces logos sont en `` et non en ligne. * Mais elle a parfois DEUX fichiers officiels, un par fond, et alors c'est le * bon fichier qu'il faut servir, pas une teinte qu'on invente. * * PHP ne connaît pas le mode : il est choisi par le visiteur et posé sur * `` par `bascule.js`. `inc/marques.php` passe donc l'adresse de la * variante en `--logo-nuit`, et l'échange se fait ici. * * ⚠️ `content:` SUR UNE IMAGE remplace la ressource sans toucher à `alt` ni * à la boîte : les emprises de `design.css` continuent de s'appliquer. Là où * il n'est pas supporté, le logo du fond clair reste — l'état d'avant. */ /* ⚠️ `sombre`, PAS `dark`. Ce thème nomme ses modes en français, et une règle * écrite avec le mot anglais ne matche rien — elle ne lève aucune erreur et * se tait. * * UN SEUL CAS DEPUIS LE 02.11 : le mode choisi à la main. Le second * sélecteur, celui du système, est parti avec son jumeau de la section 3 — * le papier est le défaut, donc il n'y a plus de page sombre que personne * n'a demandée, donc plus de logo blanc à y poser. */ :root[data-theme="sombre"] .marque-logo--bascule { content: var(--logo-nuit); } /* ── la place qu'on lui rend, largeur par largeur ───────────────────────── */ /* 🔴 `>` , ET LA RÉSERVE ÉTAIT COMPTÉE DEUX FOIS. Écrite `.hd .hd-droite`, elle attrapait le `