` — des glyphes
d'alerte du Paldeck, qui ne sont pas des couleurs de donnees. Ils se
retrouvaient avec une puce sombre sous une encre deja tres foncee : 1,73:1,
un echec que la regle avait CREE. Une couleur de jeu est litterale ; un
jeton ne l'est pas, et c'est exactement ce qui les separe.
⚠ Et il faut viser les `span` AUSSI, pas seulement `.pilule` :
le meme module rend la meme rarete tantot en pastille, tantot en mot nu.
Le mot nu sortait a 1,01:1 dans l'onglet Equipement, la ou la pastille
etait deja corrigee — un correctif qui ne couvre qu'une des deux formes
donne un onglet propre et un onglet casse. */
/* ⚠ ET CETTE PUCE VAUT POUR LES DEUX THEMES, pas seulement le clair. Je
n'avais traite que le clair, et le sombre souffrait du meme mal pour la
meme raison : le fond `#RRGGBB22` n'a rien sous lui la non plus, c'est le
calque. `el-dragon` y sortait a 2,97:1. La puce etant sombre, elle
convient aux deux — c'est en clair qu'elle DETONNE le moins, pas
l'inverse. */
body[data-vue^="jeu-"] .pilule[style*="color: rgb"],
body[data-vue^="jeu-"] span[style*="color: rgb"],
body[data-vue^="jeu-"] .pilule[class*="el-"]{
background:#141C21; border-radius:100px; padding:1px 7px;
}
/* ⚠ ET LES NEUF PASTILLES D'ELEMENT DU PALDECK SONT LE MEME CAS, par une
autre porte. Elles ne posent pas leur couleur en ligne mais par classe
(`.pilule.el-leaf` etc., plus haut dans ce fichier), avec un fond
`#RRGGBB22` — 13 % d'alpha. Sur une page de jeu il n'y a rien sous ces
13 % : l'element est peint a meme le calque, et les neuf couleurs
tombaient entre 1,62 et 1,69:1 en thema clair. Vingt-cinq nœuds sous 3 sur
le seul onglet Paldeck.
C'est le defaut que j'avais releve le 25 aout en le classant « defaut de
charte, pas du calque » et laisse tel quel. Il etait deja la avant le
calque ; le calque l'a rendu deux fois pire.
⚠ ET LA PUCE SOMBRE NE SUFFIT PAS SEULE. Cinq des neuf elements ont une
encre CLAIRE deja foncee (`el-dark` #7B4FB0, `el-earth` #8A5F28...) : sur
un fond sombre elles retombent a 2,95:1. Or le thema sombre possede deja,
pour ces cinq-la exactement, une variante eclaircie. On la reprend ici :
puce sombre + encre de sombre, c'est cohérent et ca ne cree aucune
couleur nouvelle. Les quatre autres (#8A93A6, #2A8FE0, #3FA340, #B98B05)
passent deja au-dessus de 5:1 sur cette puce et ne bougent pas. */
body[data-vue^="jeu-"] .pilule.el-normal { color:#AAB4C6; }
body[data-vue^="jeu-"] .pilule.el-electricity { color:#F2C93B; }
body[data-vue^="jeu-"] .pilule.el-ice { color:#5FD8E8; }
body[data-vue^="jeu-"] .pilule.el-earth { color:#C79A5E; }
body[data-vue^="jeu-"] .pilule.el-dark { color:#A98BE0; }
/* el-dragon n'a pas de variante en sombre — il n'en avait pas besoin la-bas.
Sur la puce sombre du clair il sortait a 3,64 : on l'eclaircit ici seulement. */
body[data-vue^="jeu-"] .pilule.el-dragon { color:#E87BB8; }
html[data-theme="sombre"] body[data-vue^="jeu-"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue^="jeu-"] .app{
--voile-h:6%; --voile-b:28%;
--verre-op:0%; --verre-creux:0%; --verre-rail:0%; --verre-entete:0%;
--verre-onglets:58%;
--verre-lumi:.32; --verre-sat:1.5;
--texte-3:#B4C2CC;
/* --accent et --ok ne sont pas recales ici : ils sont deja vifs en sombre,
et c'est le fond qu'on assombrit. Voir la regle du clair ci-dessus.
⚠ MAIS LES QUATRE FONDS SEMANTIQUES, SI. Je les avais reconstruits pour
le clair seulement, et le sombre a exactement le meme mal : `--*-fond`
vaut `#RRGGBB14` a la racine, soit 8 % d'alpha. Huit pour cent ne sont
pas un fond quand il y a une PHOTO dessous — et en sombre les cartes
sont a `--verre-op:0%`, donc il n'y a rien d'autre entre l'encre et
l'image. Terraria le montrait a 2,66:1 sur `.pilule.info`, parce que son
image sombre porte des hautes lumieres a 0,83 : assombrir a .32 ne les
descend qu'a 0,27. Une pastille doit porter son propre sol. */
--ok-fond: color-mix(in srgb, var(--ok) 22%, var(--carte));
--warn-fond: color-mix(in srgb, var(--warn) 22%, var(--carte));
--crit-fond: color-mix(in srgb, var(--crit) 22%, var(--carte));
--accent-fond: color-mix(in srgb, var(--accent) 22%, var(--carte));
}
/* Les quatre surfaces. A 92 % d'opaque — la valeur de la maison — l'image ne
passait pas : sur l'onglet Apercu les cartes couvrent tout, et un calque
qu'aucune carte ne laisse voir n'existe que dans les marges. */
body[data-vue^="jeu-"] .carte,
body[data-vue^="jeu-"] .onglets,
body[data-vue^="jeu-"] .rail,
body[data-vue^="jeu-"] header{
-webkit-backdrop-filter:saturate(var(--verre-sat)) brightness(var(--verre-lumi));
backdrop-filter:saturate(var(--verre-sat)) brightness(var(--verre-lumi));
}
body[data-vue^="jeu-"] .carte{
background:
linear-gradient(180deg, color-mix(in srgb,var(--accent) 5%,transparent), transparent 46%),
color-mix(in srgb, var(--carte) var(--verre-op), transparent);
}
body[data-vue^="jeu-"] .onglets{
background:color-mix(in srgb, var(--fond) 52%, transparent);
border-radius:var(--r-bouton) var(--r-bouton) 0 0;
}
/* ── LA BARRE D'ONGLETS SUIT LE DEFILEMENT ────────────────────────────────
*
* Sans ca il faut remonter toute la page pour changer d'onglet, et certaines
* listes font plusieurs milliers de lignes.
*
* ⚠ `#vues > .onglets` et surtout PAS `.onglets` : la meme classe habille les
* sous-onglets qui vivent DANS une carte (`.jx-sous-onglets`, voir
* barreChoix() dans jeux.js). Figer ceux-la collerait une barre au milieu de
* la page a chaque carte qui en porte une.
*
* Le conteneur qui defile est `main`, pas la fenetre : `top:0` colle donc au
* haut de SA zone visible. La marge negative LATERALE fait deborder la barre
* sur les 22 px de marge de `main`, sans quoi le contenu defile dans ces deux
* bandes, a cote de la barre, et on le voit passer.
*
* ⚠ Il n'en faut AUCUNE en vertical : tout ce qui precede la barre (la marge
* haute de `main`, le bandeau du superviseur) a deja defile quand elle se fige.
* J'en avais mis une, et elle figeait la barre 20 px trop BAS — la contrainte
* de `sticky` porte sur la boite de MARGE.
*
* ⚠ ET `top` N'EST PAS 0, IL EST L'OPPOSE DE LA MARGE HAUTE DE `main`.
* Chrome mesure l'offset depuis la boite de CONTENU du conteneur qui defile,
* pas depuis sa boite de remplissage : avec `main{padding:20px 22px 40px}`,
* `top:0` fige la barre a y=20 et le contenu passe dans la bande au-dessus.
* Mesure : top:0 -> 20 px · top:-20px -> 0 px · top:-26px -> -6 px. D'ou le
* -20px ici et le -14px sous 940 px, ou `main` passe a 14 px de marge. Les
* deux valeurs SUIVENT `main` : la changer sans changer celle-ci laisse
* reapparaitre la bande, et rien ne le signale.
*
* ⚠ ET ICI, IL FAUT UN FLOU — a l'inverse de tout le reste de ce bloc. Ce
* n'est pas une contradiction : ailleurs le flou coute la constellation du
* calque et ne rend presque rien, parce que ce qui passe dessous est une image
* FIXE. Sous cette barre-ci, ce qui passe est le TEXTE DE LA PAGE, en
* mouvement ; a 52 % il se lit a travers les onglets et la barre parait
* cassee. Le flou le rend en lavis. Il ne coute que la bande de la barre, pas
* la page. */
/* ⚠ UN TEXTE HORS CARTE N'A PAS DE SOL. Un seul noeud du site est dans ce
cas — la note de tri de l'onglet Optimums de Palworld — et il rendait
1,36:1 en clair : son encre `--texte-3` tombait droit sur une zone bleu
sombre de la photo, sans la moindre couche entre les deux. Le voile ne le
rattrape pas (8 % en haut, 26 % en bas), et le RELEVER degrade les cartes,
ce qui est mesure plus haut.
Le verre de la barre d'onglets est deja calibre pour porter du texte sur la
photo dans les deux themes : la note le reprend, plutot que d'inventer une
quatrieme opacite. `:not(.carte *)` laisse tranquilles les notes deja dans
une carte, qui ont leur sol.
⚠ Ce noeud n'a ete VU qu'une fois le harnais capable de defiler : il est
au troisieme ecran de son onglet. */
body[data-vue^="jeu-"] .note:not(.carte *){
background:color-mix(in srgb, var(--fond) var(--verre-onglets), transparent);
-webkit-backdrop-filter:saturate(var(--verre-sat)) brightness(var(--verre-lumi));
backdrop-filter:saturate(var(--verre-sat)) brightness(var(--verre-lumi));
padding:6px 10px; border-radius:var(--r-s);
}
/* ⚠ DEUX FORMES, PARCE QU'IL Y A DEUX HOTES. Le site pose la barre en
`#vues > .onglets` ; le superviseur, qui sert les MEMES pages, l'enveloppe
d'une `.vue.actif` et la met donc un cran plus bas. Un seul des deux
sélecteurs, et la barre ne colle que sur l'un des deux — c'est ce qui s'est
passé jusqu'au 27 août, sans que rien ne le signale : elle a simplement
l'air normale, en haut, quand on ne défile pas.
⚠ ET SURTOUT PAS UN DESCENDANT (`#vues .onglets`) : l'onglet Optimums de
Palworld porte une SECONDE barre d'onglets dans une carte, qu'un descendant
collerait aussi. Deux sélecteurs d'enfant, à profondeur exacte. */
body[data-vue^="jeu-"] #vues > .onglets,
body[data-vue^="jeu-"] #vues > .vue > .onglets{
position:sticky; top:-20px; z-index:12;
margin:0 -22px 16px; padding:6px 22px 0;
border-radius:0;
background:color-mix(in srgb, var(--fond) var(--verre-onglets), transparent);
-webkit-backdrop-filter:blur(12px) saturate(var(--verre-sat)) brightness(var(--verre-lumi));
backdrop-filter:blur(12px) saturate(var(--verre-sat)) brightness(var(--verre-lumi));
}
@media(max-width:940px){
/* `main` passe a padding:14px : le debord lateral doit suivre, sinon la
barre laisse une bande de 8 px de chaque cote ou le contenu defile. */
/* Et ils passent a la ligne. Sans ca, `display:flex` sans repli poussait les
derniers onglets HORS de l'ecran, sans defilement ni indice : sur une
fenetre de 800 px, « Effets », « Mods » et « Serveur » etaient simplement
inatteignables. Meme parti que `.jx-sous-onglets`, qui replie deja. */
body[data-vue^="jeu-"] #vues > .onglets,
body[data-vue^="jeu-"] #vues > .vue > .onglets{
top:-14px; margin:0 -14px 16px; padding:6px 14px 0; flex-wrap:wrap;
}
}
body[data-vue^="jeu-"] .rail{
background:
linear-gradient(180deg, var(--halo), transparent 34%),
color-mix(in srgb, var(--fond-2) var(--verre-rail), transparent);
}
body[data-vue^="jeu-"] header{
background:color-mix(in srgb, var(--carte) var(--verre-entete), transparent);
}
/* Les jeux qui ont leurs images, au 25 aout 2026 : Palworld, ARK et
Valheim. Chacun
pose trois choses et pas une de plus —
· ses deux --calque, un par theme ;
· --motif-opacite, parce que la trame de points n'a plus a texturer un
fond qui porte deja son grain (ca n'a de sens que s'il Y A une image) ;
· son --accent de verre en CLAIR, l'accent du jeu assombri de facon a
tenir sur sa propre photo. Mesure sous chaque noeud de texte : sans lui
le titre a l'accent tombe a 1,75:1 chez Palworld, parce que l'accent du
jeu EST une couleur de son image.
En sombre l'accent ne bouge pas : il y est deja vif et c'est le fond qu'on
assombrit. */
body[data-vue="jeu-palworld"] .app{
--calque:url("/donnees/fond-palworld-clair.jpg");
--motif-opacite:.08;
}
html[data-theme="sombre"] body[data-vue="jeu-palworld"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue="jeu-palworld"] .app{
--calque:url("/donnees/fond-palworld-sombre.jpg");
}
html[data-theme="clair"] body[data-vue="jeu-palworld"] .app,
html:not([data-theme="sombre"]) body:not(.auto-sombre)[data-vue="jeu-palworld"] .app{
--accent:#063A40; /* turquoise assombri */
--verre-op:66%;
/* ⚠ 66 % ET PAS 82 %, ET C'EST MESURE. A 58 % l'accent tombait a 3,24:1
sur les cartes : ce n'est pas la teinte qui echouait, c'est la PHOTO qui
passait au travers (fond compose a [139,150,144]). Trois leviers ont ete
balayes, deux vont dans le mauvais sens :
· voiler plus 26/42 % -> 103 echecs, 40/55 % -> 175. Le voile mele
`--fond`, qui est plus sombre que les hautes lumieres de la photo :
il ASSOMBRIT le fond au lieu de l'eclaircir.
· teindre plus accent a 32 % dans --carte -> 342 echecs, a 44 % ->
588. Une tuile plus coloree est plus sombre, donc plus proche d'une
encre sombre. C'est la tension de fond du theme clair : il veut de la
couleur, l'encre veut du clair.
· assombrir l'encre plafonne a 3,69:1 des #063A40 — au-dela une AUTRE
encre borne, et on assombrit pour rien.
82 % d'opacite seule donnait aussi 0, mais en effacant l'image — ce qui
est precisement la seconde plainte. 66 % + encre a peine assombrie :
0 sous 4,5, et la photo reste lisible entre et sous les cartes. */
}
body[data-vue="jeu-ark"] .app{
--calque:url("/donnees/fond-ark-clair.jpg");
--motif-opacite:.08;
}
html[data-theme="sombre"] body[data-vue="jeu-ark"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue="jeu-ark"] .app{
--calque:url("/donnees/fond-ark-sombre.jpg");
/* L'image d'ARK est quasi noire : luminance moyenne 0,016 contre 0,10 chez
Palworld. Le brightness(.32) partage l'ecrase en un aplat noir — les deux
obelisques et les silhouettes de dinosaures disparaissent. Releve a .42,
ou le pire noeud (.nc-note, un paragraphe pleine largeur qui traverse le
halo ambre) descend a 4,01:1 ; l'encre tertiaire eclaircie le ramene a
4,55 et la page repasse entierement au-dessus de 4,5. Balayage :
.32 -> 5,54 · .36 -> 4,87 · .42 -> 4,55 · .48 -> 3,31 · .60 -> 2,31. */
--verre-lumi:.42;
--texte-3:#C2CED6;
}
html[data-theme="clair"] body[data-vue="jeu-ark"] .app,
html:not([data-theme="sombre"]) body:not(.auto-sombre)[data-vue="jeu-ark"] .app{
--accent:#7A3806; /* ambre assombri */
}
body[data-vue="jeu-valheim"] .app{
--calque:url("/donnees/fond-valheim-clair.jpg");
--motif-opacite:.08;
}
html[data-theme="sombre"] body[data-vue="jeu-valheim"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue="jeu-valheim"] .app{
--calque:url("/donnees/fond-valheim-sombre.jpg");
/* Il l'a demande explicitement : ON DOIT VOIR L'AURORE BOREALE. Elle occupe
la bande haute de l'image, qui ne pese que 0,052 de luminance — sous le
brightness(.32) partage elle tombe a ~0,003, soit rien. Le releve dit
qu'ici on peut monter tres haut : l'image est sombre PARTOUT (0,020 de
moyenne) et sans point chaud, contrairement a ARK dont le halo ambre
limitait a .42. Mesure sur les DIX onglets a brightness(.90) : 32 a 253
noeuds chacun, pire 4,51:1, aucun sous 4,5 — et pareil a 1073 px de large,
ou le recadrage `cover` ramene la lune vers l'en-tete.
⚠ CE BALAYAGE ETAIT FAUX, et .85 est parti en production avec. Le harnais
s'arretait sur `body`, opaque, et n'echantillonnait donc JAMAIS le calque
peint sur `.app` : il mesurait la page SANS image. Corrige le 26 aout, le
meme balayage donne .85 -> 4,32 (1 noeud sous 4,5) · .72 -> 4,99 (aucun) ·
.62 -> 5,56. On prend .72, et l'aurore reste franche.
⚠ ET IL ETAIT ENCORE FAUX, une seconde fois : le harnais ne DEFILAIT pas
(`scroll-behavior:smooth` ne demarre jamais dans un onglet pilote), donc
il notait le premier ecran de chaque onglet et rien d'autre. Une fois
capable de descendre, il a trouve l'onglet Mods a 2,35:1. La cause tient
au fait que le calque est FIXE alors que la liste defile : une ligne
lisible au milieu de l'ecran repasse, trois tours de molette plus haut,
sur la bande claire de l'aurore. Un contraste qui depend de la position
de defilement ne se voit qu'en defilant.
On corrige par le voile des cartes, PAS par la luminosite : baisser a .42
rendait zero aussi, en eteignant justement l'aurore qu'il a demande a
voir. `--verre-op` ne pose de matiere que SOUS le texte — entre les
cartes, l'aurore garde ses .72 intacts. */
--verre-lumi:.72;
--verre-op:72%; /* 62 % rendait 0 sur une passe et 3 sur la suivante : la
liste des mods ne se recompose pas a l'identique, donc
le pire pixel change d'un releve a l'autre. Une valeur
qui passe JUSTE ne passe pas. */
}
html[data-theme="clair"] body[data-vue="jeu-valheim"] .app,
html:not([data-theme="sombre"]) body:not(.auto-sombre)[data-vue="jeu-valheim"] .app{
--accent:#184C73; /* bleu assombri */
/* Son image CLAIRE ne pese que 0,139 de luminance moyenne — c'est une foret
sombre, plus sombre que le fond clair de la charte. A 58/62 elle sortait a
2,33:1 au pire, 16 noeuds sous 4,5. Le verre est donc plus dense ICI, chez
les deux jeux dont l'image claire est sombre, et pas chez tout le monde :
Palworld et ARK tiennent a 58/62 et garderaient leur image moins visible
pour rien. Resultat : 4,62:1, aucun noeud sous 4,5. */
--verre-op:70%; --verre-rail:86%; --verre-entete:86%;
}
body[data-vue="jeu-terraria"] .app{
--calque:url("/donnees/fond-terraria-clair.jpg");
--motif-opacite:.08;
}
html[data-theme="sombre"] body[data-vue="jeu-terraria"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue="jeu-terraria"] .app{
--calque:url("/donnees/fond-terraria-sombre.jpg");
/* Image tres sombre (0,023 de moyenne) MAIS avec des points chauds a 0,83 —
lanternes et oeil de Cthulhu. C'est le cas d'ARK, pas celui de Valheim :
le plafond vient du point chaud, pas de la moyenne. Balayage :
.42 -> 4,92 · .46 -> 4,68 · .50 -> 4,44 (1 sous 4,5) · .62 -> 3,72 (5). */
--verre-lumi:.46;
}
html[data-theme="sombre"] body[data-vue="jeu-terraria"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue="jeu-terraria"] .app{
/* ⚠ Terraria est le SEUL jeu dont l'image sombre a besoin d'un voile de
carte. Sa luminance moyenne est basse (0,023) mais elle porte des hautes
lumieres a 0,83 : la moyenne ne dit rien du pire pixel, et c'est le pire
pixel que lit un oeil. Assombrir a .32 n'y descend qu'a 0,27, et le texte
des mods y tombait a 2,66:1.
Deux reglages rendent 0 sous 4,5 ; celui-ci n'est pas le plus simple mais
c'est le bon : `--verre-lumi:.28` seul marche aussi, en eteignant l'image
PARTOUT. A .34 avec 14 % de voile sur les cartes, l'image garde sa
luminosite dans les espaces libres — la ou on la regarde — et ne
s'assombrit que sous le texte. */
--verre-lumi:.34;
--verre-op:40%; /* 14 % au premier jet — voir la note de Valheim sombre :
le harnais ne defilait pas encore, et un calque FIXE
sous une liste qui defile ne se juge pas sur un ecran.
En descendant, 5 mesures restaient a 4,00. */
}
html[data-theme="clair"] body[data-vue="jeu-terraria"] .app,
html:not([data-theme="sombre"]) body:not(.auto-sombre)[data-vue="jeu-terraria"] .app{
/* Meme traitement que Valheim, et pour la meme raison : son image claire est
la plus sombre recue (0,102). A 58/62 : 2,02:1 au pire, 17 noeuds sous 4,5
dont 7 sous 3. Essayé AVANT d'en arriver la, et ecarté : relever la courbe
tonale de l'image (gamma 0,34 la porte de 0,102 a 0,335) ne rendait que
3,21:1 — le defaut n'etait pas dans l'image mais dans DEUX encres, qui
portaient 7 des 8 echecs. Recalees plus haut, elles font le gros du
chemin ; le verre plus dense fait le reste. */
--accent:#6B1B8D; /* violet assombri */
--verre-op:70%; --verre-rail:86%; --verre-entete:86%;
}
/* Core Keeper et Minecraft n'ont PAS d'image, et ont quand meme besoin du
recalage. La cause n'est pas la photo mais le verre lui-meme : une carte a
58 % au lieu de 92 %, sur un fond eclairci a 1.35, ne porte plus les accents
moyens de la charte. Mesure page entiere en clair, avant / apres :
· Core Keeper 33 noeuds sous 4,5 -> 0 (pire 3,17 -> 4,81)
· Minecraft 7 noeuds sous 4,5 -> 1 (le reste est .warn, pas l'accent)
Les 33 de Core Keeper portaient TOUTES la meme encre, #A16207 : un seul
jeton les a corrigees d'un coup. C'est ce qui distingue un defaut d'encre
d'un defaut de fond — un defaut de fond frappe des couleurs melangees.
Terraria (#7B1FA2) et Necesse (#3730A3) passent deja et ne sont PAS
recales : leur pire noeud est la pastille semantique, qui ne depend pas de
l'accent. On ne recale que ce que la mesure condamne. */
/* Core Keeper recoit son calque le 26 aout. Les valeurs ci-dessous sont
posees d'apres les deux images (sombre 0,035 de moyenne mais un point chaud
a 0,839 — la lueur du foyer au centre ; claire 0,104, soit aussi sombre que
celle de Terraria) et VERIFIEES par le harnais juste apres. */
body[data-vue="jeu-core-keeper"] .app{
--calque:url("/donnees/fond-core-keeper-clair.jpg");
--motif-opacite:.08;
}
html[data-theme="sombre"] body[data-vue="jeu-core-keeper"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue="jeu-core-keeper"] .app{
--calque:url("/donnees/fond-core-keeper-sombre.jpg");
/* Le foyer au centre de la grotte monte a 0,839 malgre une moyenne de
0,035 : meme cas que Terraria, et meme remede — un voile de carte, pas
une baisse de luminosite qui eteindrait les champignons luminescents.
30 % rend deja 0 sous 4,5 (4,79) ; on prend cette valeur, la plus basse
qui passe, pour garder l'image franche entre les cartes. */
--verre-op:30%;
}
html[data-theme="clair"] body[data-vue="jeu-core-keeper"] .app,
html:not([data-theme="sombre"]) body:not(.auto-sombre)[data-vue="jeu-core-keeper"] .app{
/* ⚠ #7A4A05 etait cale AVANT que ce jeu ait une image, sur le verre nu.
Avec le calque il rendait 76 noeuds sous 4,5 — TOUS sur cette encre, et
le verre n'y pouvait rien : de 70 a 78 % d'opacite et de 1,15 a 1,55 de
luminosite, le compte restait bloque a 76. Un palier que le fond ne fait
pas bouger est un defaut d'encre, pas un defaut de fond. */
--accent:#4E2F03; /* ambre assombri */
--verre-op:74%; --verre-rail:86%; --verre-entete:86%;
}
/* Minecraft, le dernier des sept, le 26 aout. Son image claire est de LOIN
la plus claire recue (0,241 de moyenne, p95 a 0,669) et la sombre porte un
point chaud a 0,874 — le clair de lune sur la fleche du chateau. Les deux
extremes de la serie dans une seule paire. */
body[data-vue="jeu-minecraft"] .app{
--calque:url("/donnees/fond-minecraft-clair.jpg");
--motif-opacite:.08;
}
html[data-theme="sombre"] body[data-vue="jeu-minecraft"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue="jeu-minecraft"] .app{
--calque:url("/donnees/fond-minecraft-sombre.jpg");
/* Le clair de lune sur la fleche du chateau monte a 0,874 : meme cas que
Core Keeper et Terraria, meme remede — un voile de carte a 30 %, la plus
basse valeur qui rende 0 sous 4,5 (3,72 -> 4,66). */
--verre-op:30%;
}
html[data-theme="clair"] body[data-vue="jeu-minecraft"] .app,
html:not([data-theme="sombre"]) body:not(.auto-sombre)[data-vue="jeu-minecraft"] .app{
/* ⚠ #2C5C1F etait cale sur le verre nu, comme ceux de Core Keeper et
Necesse — et comme eux il ne tient plus des que le jeu a une image. Ici
les 19 fautes se concentraient sur l'onglet ACTIF de la barre collante,
et le verre n'y pouvait rien : 70 comme 78 % d'opacite, et meme une barre
entierement opaque, laissaient le compte a 19. Encore un palier que le
fond ne fait pas bouger, donc encore un defaut d'encre. */
--accent:#1F4415; /* vert assombri */
--verre-op:74%;
}
/* Necesse recoit son calque le 26 aout. Ses deux images sont la MEME vue en
pixel-art de jour et de nuit — donc, contrairement aux autres jeux, elles
partagent leur composition : ce qui marche sur l'une se transpose sur
l'autre, et seuls les niveaux changent (0,037 en sombre, 0,174 en clair,
la plus CLAIRE des sept images de theme clair). */
body[data-vue="jeu-necesse"] .app{
--calque:url("/donnees/fond-necesse-clair.jpg");
--motif-opacite:.08;
}
html[data-theme="sombre"] body[data-vue="jeu-necesse"] .app,
html:not([data-theme="clair"]) body.auto-sombre[data-vue="jeu-necesse"] .app{
--calque:url("/donnees/fond-necesse-sombre.jpg");
/* Rien d'autre : la nuit en pixel-art n'a aucun point chaud (0,424 au
maximum, contre 0,839 chez Core Keeper et Terraria), donc le voile
partage suffit. Mesure : 0 sous 4,5 des le premier essai. */
}
html[data-theme="clair"] body[data-vue="jeu-necesse"] .app,
html:not([data-theme="sombre"]) body:not(.auto-sombre)[data-vue="jeu-necesse"] .app{
/* ⚠ #3730A3 etait explicitement declare « passe deja, PAS recale » dans la
note du bloc partage — c'etait vrai sur le verre nu, et faux des que le
jeu a eu une image : 134 noeuds sous 4,5, dont le pire a 2,65.
⚠ Et assombrir l'encre SEULE aggrave le compte : #2B2582 le fait passer
de 134 a 164, #221D68 a 186. Le pire remonte (2,65 -> 3,23) mais il y a
PLUS de fautifs, parce qu'une encre plus foncee entraine avec elle les
surfaces derivees de l'accent. Il faut les deux leviers ensemble, et
c'est l'opacite qui fait le gros du travail. */
--accent:#2B2582; /* indigo assombri */
--verre-op:74%;
}
/* ═══ jumeaux [data-jeu] — DÉRIVÉS, ne pas éditer à la main ═══
*
* Écrits par site-jeux/design-system/derives-data-jeu.py depuis les blocs
* `body[data-vue="jeu-x"]` ci-dessus. Un ne peut pas être un :
* ces jumeaux permettent de teinter un fragment — une tuile de la console
* d'administration, un aperçu du design system — avec l'identité de son jeu.
* ═══════════════════════════════════════════════════════════════════════ */
[data-jeu="ark"] { --accent:#B45309; --accent-2:#15803D; --motif:repeating-linear-gradient(174deg,
color-mix(in srgb,var(--accent) 15%,transparent) 0 2px,
transparent 2px 9px,
color-mix(in srgb,var(--accent-2) 10%,transparent) 9px 10px,
transparent 10px 26px); --motif-opacite:.4; --motif-taille:auto; }
[data-jeu="core-keeper"] { --accent:#A16207; --accent-2:#5B21B6; --motif:radial-gradient(circle at 20% 30%, color-mix(in srgb,var(--accent) 42%,transparent) 0 1.8px, transparent 2.4px),
radial-gradient(circle at 70% 80%, color-mix(in srgb,var(--accent-2) 36%,transparent) 0 1.4px, transparent 2px),
radial-gradient(circle at 46% 8%, color-mix(in srgb,var(--accent) 24%,transparent) 0 1.1px, transparent 1.6px); --motif-opacite:.5; --motif-taille:58px 58px, 74px 74px, 39px 39px; }
[data-jeu="minecraft"] { --accent:#3B7A2A; --accent-2:#7A5230; --motif:repeating-linear-gradient(0deg, color-mix(in srgb,var(--accent-2) 11%,transparent) 0 1px, transparent 1px 16px),
repeating-linear-gradient(90deg, color-mix(in srgb,var(--accent-2) 11%,transparent) 0 1px, transparent 1px 16px),
conic-gradient(from 90deg at 50% 50%,
color-mix(in srgb,var(--accent) 13%,transparent) 0 25%, transparent 0 50%,
color-mix(in srgb,var(--accent) 13%,transparent) 0 75%, transparent 0); --motif-opacite:.46; --motif-taille:auto, auto, 64px 64px; }
[data-jeu="necesse"] { --accent:#3730A3; --accent-2:#A16207; --motif:repeating-linear-gradient(0deg, color-mix(in srgb,var(--accent) 13%,transparent) 0 1px, transparent 1px 27px),
repeating-linear-gradient(90deg, color-mix(in srgb,var(--accent-2) 9%,transparent) 0 1px, transparent 1px 27px); --motif-opacite:.3; --motif-taille:auto; }
[data-jeu="palworld"] { --accent:#0E7C86; --accent-2:#D97706; --motif:radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--accent-2) 34%,transparent) 0 1.6px, transparent 2px),
radial-gradient(circle at 50% 50%, transparent 7px, color-mix(in srgb,var(--accent) 26%,transparent) 7px 8.2px, transparent 9px); --motif-opacite:.34; --motif-taille:44px 44px, 44px 44px; }
[data-jeu="terraria"] { --accent:#7B1FA2; --accent-2:#2E7D32; --motif:repeating-linear-gradient(0deg, color-mix(in srgb,var(--accent) 11%,transparent) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, color-mix(in srgb,var(--accent) 11%,transparent) 0 1px, transparent 1px 4px),
radial-gradient(circle at 30% 70%, color-mix(in srgb,var(--accent-2) 28%,transparent) 0 1.4px, transparent 2px); --motif-opacite:.36; --motif-taille:auto, auto, 24px 24px; }
[data-jeu="valheim"] { --accent:#1E5F8C; --accent-2:#8A5A2B; --motif:repeating-linear-gradient(45deg, color-mix(in srgb,var(--accent) 14%,transparent) 0 1.2px, transparent 1.2px 18px),
repeating-linear-gradient(-45deg, color-mix(in srgb,var(--accent-2) 12%,transparent) 0 1.2px, transparent 1.2px 18px); --motif-opacite:.44; --motif-taille:auto; }
html[data-theme="sombre"] [data-jeu="ark"],
html:not([data-theme="clair"]) body.auto-sombre [data-jeu="ark"]
{ --accent:#FFA94D; --accent-2:#6EE7A8; }
html[data-theme="sombre"] [data-jeu="core-keeper"],
html:not([data-theme="clair"]) body.auto-sombre [data-jeu="core-keeper"]
{ --accent:#FBBF24; --accent-2:#A78BFA; }
html[data-theme="sombre"] [data-jeu="minecraft"],
html:not([data-theme="clair"]) body.auto-sombre [data-jeu="minecraft"]
{ --accent:#7BC96F; --accent-2:#C9915C; }
html[data-theme="sombre"] [data-jeu="necesse"],
html:not([data-theme="clair"]) body.auto-sombre [data-jeu="necesse"]
{ --accent:#8B93FF; --accent-2:#F4C15D; }
html[data-theme="sombre"] [data-jeu="palworld"],
html:not([data-theme="clair"]) body.auto-sombre [data-jeu="palworld"]
{ --accent:#3AD8E6; --accent-2:#FFB347; }
html[data-theme="sombre"] [data-jeu="terraria"],
html:not([data-theme="clair"]) body.auto-sombre [data-jeu="terraria"]
{ --accent:#C77DFF; --accent-2:#6FD86F; }
html[data-theme="sombre"] [data-jeu="valheim"],
html:not([data-theme="clair"]) body.auto-sombre [data-jeu="valheim"]
{ --accent:#5FB2E8; --accent-2:#D9A15B; }