/* ============================================================ POPOTE WAR — JETONS ------------------------------------------------------------ DIRECTION : le tableau d'affichage de la caserne. Pas de fantasy dorée, pas d'interface de jeu générique : la matière vient du sujet — toile de tente, pochoir, écusson brodé, plaque d'identité. Le fond n'est jamais noir : c'est un vert de treillis très sombre, qui a une température. Ce que l'on emprunte aux jeux de téléphone, c'est la STRUCTURE — aucun pixel sans intention, un objet désirable au centre, le bouton principal impossible à rater — jamais leur habillage. ============================================================ */ /* ------------------------------------------------------------ FONTE D'AFFICHE Anton, servie EN LOCAL. Deux raisons de ne pas la prendre chez Google : la CSP interdit les domaines tiers, et une requête distante sur le chemin critique coûte plus cher que les vingt kilo-octets du fichier. `swap` : le texte s'affiche tout de suite avec la fonte système, puis se met en place. Licence SIL Open Font — redistribution autorisée. ------------------------------------------------------------ */ @font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/anton-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/anton-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; } /* ------------------------------------------------------------ LES TROIS AUTRES FONTES (lot L) ------------------------------------------------------------ Anton seule ne suffisait pas : elle est excellente en affiche et illisible en corps de texte. Le jeu retombait donc sur `system-ui` — c'est-à-dire sur une fonte DIFFÉRENTE selon le téléphone. Il n'avait pas le même visage sur iPhone et sur Android, et c'est le genre de défaut qu'on ne peut pas voir depuis une seule machine. Trois fontes, trois rôles, aucune redondance : Saira Stencil One le POCHOIR. Le geste graphique de l'armée : partout où quelque chose est MARQUÉ — un tampon, une caisse, un matricule — et nulle part ailleurs. Barlow le texte courant. Oswald les CHIFFRES du tableau de bord. Condensée, et à chasse fixe sur les chiffres : un solde qui passe de 999 à 1000 ne fait plus sauter la ligne. Toutes en licence SIL Open Font — voir /fonts/LICENCES.txt. Servies EN LOCAL : la CSP interdit les domaines tiers, et une requête distante sur le chemin critique coûte plus cher que le fichier lui-même. `tools/fontes.mjs` les télécharge. `font-display: swap` sur toutes : le texte s'affiche tout de suite avec la fonte système puis se met en place. Aucune de ces quatre-vingt-dix kilo-octets ne retarde le premier affichage. ------------------------------------------------------------ */ @font-face { font-family: "Saira Stencil One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/stencil-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Saira Stencil One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/stencil-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/oswald-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/oswald-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- PALETTE --- Six valeurs, toutes prises dans le vestiaire militaire. */ --nuit: #14150F; /* treillis dans l'ombre — le fond, jamais du noir */ --toile: #1E2016; /* toile de tente — les surfaces */ --toile-2: #272A1C; /* le pli, la surface soulevée */ --kaki: #3D4327; /* les panneaux, les bordures */ --sable: #D9CFA8; /* le texte — toile claire, pas du blanc */ /* ⚠️ REMONTÉ DE #8C876F. Mesuré sur les TROIS fonds et pas seulement sur le fond de page : il passait à 5,08 sur la nuit, 4,56 sur la toile, et tombait à 4,05 sur la surface SOULEVÉE — c est-à-dire exactement là où vivent les légendes des cartes. Ce défaut est aussi vieux que la palette ; il a fallu écrire le thème clair, et calculer les contrastes des deux, pour le voir. */ --sable-b: #9C9880; /* le texte secondaire */ --laiton: #C8A24C; /* les galons : tout ce qui a de la valeur */ --laiton-c:#F0D48A; /* l'éclat du galon sous la lumière */ --alerte: #C1440E; /* fusée éclairante : l'action, et elle seule */ --alerte-c:#E8722F; --vert-ok: #7A8A35; /* accompli — c'est aussi le theme_color du manifeste */ --sang: #7A1F13; /* la défaite, les dégâts */ /* --- TEXTE --- */ --display: "Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif; /* Barlow d'abord, `system-ui` en secours. Le secours n'est PAS décoratif : tant que la fonte n'est pas arrivée — ou si elle n'arrive jamais — le texte doit rester lisible, pas disparaître. */ --texte: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Oswald a des chiffres à chasse fixe : un solde qui passe de 999 à 1000 ne fait plus sauter la ligne. C'est ce que la monospace assurait, en moins laid — une monospace au milieu d'une interface militaire fait terminal. */ --chiffre: "Oswald", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; /* LE POCHOIR. À réserver à ce qui est MARQUÉ — un tampon, une caisse, un matricule. Partout ailleurs il ferait décor, et un pochoir décoratif n'est plus un pochoir. */ --pochoir: "Saira Stencil One", "Anton", Impact, sans-serif; --fs-xs: 0.8125rem; /* 13 px — étiquettes et légendes uniquement */ --fs-sm: 0.9375rem; /* 15 px — plancher du texte courant */ --fs-md: 1.0625rem; --fs-lg: 1.375rem; --fs-xl: 1.875rem; --fs-2xl: 2.75rem; --fs-3xl: 3.75rem; /* --- MESURES --- */ --tap: 48px; /* zone tactile minimale, jamais moins */ --tabbar: 64px; --r-sm: 6px; --r: 12px; --r-lg: 18px; --gap: 0.6rem; --pad: 0.9rem; /* --- ZONES SÛRES --- */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); /* --- MOUVEMENT --- */ --ease: cubic-bezier(.2,.7,.3,1); --fast: .12s; --mid: .28s; /* ------------------------------------------------------------ LE CHÂSSIS ------------------------------------------------------------ Chaque écran avait son propre dessin de panneau : une bordure ici, une ombre là, un dégradé ailleurs. Rien de faux, mais rien de commun non plus — et un jeu se reconnaît à ce qui se répète. Trois valeurs, et un seul relief pour tout le jeu : --relief la tôle emboutie : arête claire en haut, arête sombre en bas, et une lèvre qui la POSE sur le fond au lieu de l'y coller. C'est cette lèvre qui fait la différence entre un panneau et un rectangle de couleur. --relief-in le même en creux, pour ce qui est ENFONCÉ : une piste de jauge, un champ de saisie. La lumière y vient d'en bas, exactement à l'inverse. --rivets quatre têtes de laiton dans les angles. Elles ne vont QUE sur les deux objets qui sont vraiment des plaques boulonnées — la plaque d'identité et le tableau d'affichage. Partout ailleurs, ce serait du bruit : quand tout est riveté, plus rien ne l'est. ------------------------------------------------------------ */ --relief: inset 0 1px 0 rgba(217, 207, 168, .09), inset 0 -2px 0 rgba(0, 0, 0, .42), 0 2px 0 rgba(0, 0, 0, .34), 0 4px 10px rgba(0, 0, 0, .28); --relief-in: inset 0 2px 4px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(217, 207, 168, .06); --rivets: radial-gradient(circle at 9px 9px, #F0D48A 0 1.4px, #8A6B28 1.4px 2.6px, transparent 3px), radial-gradient(circle at calc(100% - 9px) 9px, #F0D48A 0 1.4px, #8A6B28 1.4px 2.6px, transparent 3px), radial-gradient(circle at 9px calc(100% - 9px), #F0D48A 0 1.4px, #8A6B28 1.4px 2.6px, transparent 3px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #F0D48A 0 1.4px, #8A6B28 1.4px 2.6px, transparent 3px); /* --- LA TOILE --- Le fond n'est pas une couleur unie. Trois trames superposées imitent le tissage d'une toile de tente : deux hachures fines à 45°, et une lueur haute qui donne un haut et un bas à l'écran. Sans image : c'est du dégradé, donc gratuit. */ --tissage: repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 4px); } /* ============================================================ LA MÊME TOILE, VUE DE JOUR ------------------------------------------------------------ Le jeu se joue dans la nuit — treillis dans l'ombre, toile de tente, laiton. C'est son identité, et le thème clair ne la remplace pas : il la sort au soleil. CE N'EST PAS UNE INVERSION. Retourner une palette sombre donne toujours la même chose : du gris sale et des accents criards. Ici, chaque valeur a été REPRISE dans le même vestiaire — papier de manuel de campagne, encre noire, tampon de laiton foncé, toile de tente sous le soleil. Les deux thèmes se reconnaissent comme le même jeu. LES QUATRE CHOSES QUI CHANGENT DE SENS · le TEXTE devient sombre — `--sable` n'est plus du sable, c'est de l'encre. Le nom reste : le renommer voudrait dire toucher aux quatre mille endroits qui l'emploient. · le LAITON s'assombrit. À #C8A24C sur fond clair, il ne se lit plus : un galon doré ne brille que dans l'ombre. · le RELIEF s'inverse. La tôle emboutie prend sa lumière d'en haut dans les deux thèmes, mais l'arête claire d'un objet sombre est une arête SOMBRE sur un objet clair. · le TISSAGE se renforce. Une trame à 1,4 % de blanc disparaît complètement sur du papier. L'attribut vit sur `` et il est posé par un script en ligne AVANT cette feuille : sinon la page s'affiche en sombre pendant deux à trois cents millisecondes, puis bascule sous les yeux du joueur. ============================================================ */ :root[data-theme="clair"] { --nuit: #E9E4D3; /* le papier du manuel — le fond */ --toile: #DED8C4; /* la toile au soleil — les surfaces */ --toile-2: #D3CBB3; /* le pli, la surface soulevée */ --kaki: #A9A987; /* les panneaux, les bordures */ --sable: #22241A; /* l'encre — le texte, et non du noir */ /* Mesuré sur les TROIS surfaces claires, pas seulement sur le fond : #5F6150 passait à 4,98 sur le papier mais tombait à 3,91 sur la surface soulevée — et c est là que vivent les légendes des cartes. */ --sable-b: #4F5142; /* le texte secondaire */ /* #8A6A22 mesurait 4,0:1 sur le papier — sous le seuil pour du texte de treize pixels, et le laiton porte justement les petites étiquettes : le grade, l objectif, le solde. Deux crans plus bas : 4,8:1. */ --laiton: #6B4E12; /* le galon, assombri pour se lire de jour */ --laiton-c:#6B5118; /* et son creux : sur clair, l'éclat FONCE */ --alerte: #A93A0B; --alerte-c:#8A2F09; --vert-ok: #55631F; --sang: #7A1F13; /* LE RELIEF, RETOURNÉ. La lumière vient toujours d'en haut : c'est donc l'arête du HAUT qui doit être sombre sur un objet clair, et celle du bas claire. Garder le relief sombre tel quel donnerait des panneaux qui paraissent creusés. */ --relief: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(34, 36, 26, .16), 0 2px 0 rgba(34, 36, 26, .12), 0 4px 10px rgba(34, 36, 26, .14); --relief-in: inset 0 2px 4px rgba(34, 36, 26, .22), inset 0 -1px 0 rgba(255, 255, 255, .5); --rivets: radial-gradient(circle at 9px 9px, #8A6A22 0 1.4px, #4A3810 1.4px 2.6px, transparent 3px), radial-gradient(circle at calc(100% - 9px) 9px, #8A6A22 0 1.4px, #4A3810 1.4px 2.6px, transparent 3px), radial-gradient(circle at 9px calc(100% - 9px), #8A6A22 0 1.4px, #4A3810 1.4px 2.6px, transparent 3px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #8A6A22 0 1.4px, #4A3810 1.4px 2.6px, transparent 3px); /* Le tissage doit être VU. À 1,4 % de blanc sur du papier, il n'existe pas — et le fond devient un aplat, ce que le thème sombre n'est jamais. */ --tissage: repeating-linear-gradient(45deg, rgba(34,36,26,.030) 0 2px, transparent 2px 4px), repeating-linear-gradient(-45deg, rgba(255,255,255,.42) 0 2px, transparent 2px 4px); } /* ============================================================ LE CHÂSSIS RESTE DE NUIT ------------------------------------------------------------ La plaque d'identité en haut et la barre d'onglets en bas ne sont pas du contenu : c'est le boîtier. Une plaque de matricule est une plaque de métal, et une plaque de métal ne devient pas du papier parce qu'il fait jour. Elles gardent donc leur fond sombre dans les DEUX thèmes — la plaque parce que la bannière du joueur la teint (`--ban-de`, posé en JavaScript, et toutes les bannières sont sombres), la barre d'onglets parce qu'elle doit se détacher du contenu qu'elle surplombe. ⚠️ ON REDÉCLARE LA PALETTE DE NUIT À L'INTÉRIEUR, plutôt que de corriger chaque texte. Ces deux blocs contiennent des dizaines de descendants qui lisent `--sable`, `--laiton`, `--kaki` — les reprendre un par un garantirait d'en oublier, et le prochain élément ajouté naîtrait déjà cassé. Une variable CSS se redéfinit sur n'importe quel élément et descend toute seule : c'est exactement ce qu'il faut ici. Sans ces sept lignes, la barre d'onglets affiche « Combat » en encre noire sur du treillis noir. Mesuré : les cinq étiquettes étaient à 1,1 de contraste. ------------------------------------------------------------ ET L'ARÈNE AVEC EUX Le duel se joue sur une PHOTOGRAPHIE de terrain, sombre, que nulle variable ne peut éclaircir. Le passer en clair donnerait de l'encre noire sur un champ de bataille au crépuscule : mesuré à 2,1 de contraste sur le numéro de manche, sur l'étiquette de thème et sur les deux pseudos. On ne l'éclaircit donc pas — on l'assume. Les MENUS passent au papier ; le DUEL reste au bivouac. C'est une règle qu'un joueur comprend sans qu'on la lui explique, et c'est plus honnête que de repeindre une photo par-dessus. ============================================================ */ :root[data-theme="clair"] .plaque, :root[data-theme="clair"] #screen-combat, :root[data-theme="clair"] .tabs { --sable: #D9CFA8; --sable-b: #9C9880; --laiton: #C8A24C; --laiton-c:#F0D48A; --toile: #1E2016; --toile-2: #272A1C; --kaki: #3D4327; color: #D9CFA8; } @media (prefers-reduced-motion: reduce) { :root { --fast: 0s; --mid: 0s; } } /* ============================================================ LE FOND DE LA PAGE, DE JOUR ------------------------------------------------------------ `#app` ne se peint pas avec la palette : il empile trois couches, dont deux portent une couleur ÉCRITE EN DUR — `#23261A` pour la lueur haute, `#101109` pour le pied du dégradé. Seule la troisième passe par `--nuit`. En thème clair, le fond partait donc du papier et finissait dans le noir, avec une lueur sombre par-dessus. Le texte secondaire, pourtant mesuré à 5:1 sur le papier, se retrouvait à poser de l'encre sur du treillis : « CAMP D'INCORPORATION » et « PROCHAIN : PREMIÈRE CLASSE » disparaissaient purement et simplement. ⚠️ CE DÉFAUT A RÉSISTÉ À DEUX RECHERCHES. Un relevé des couleurs sombres écrites en dur ne l'a pas vu, parce que la déclaration `background:` tient sur quatre lignes et que les couleurs sont sur les lignes suivantes. Un relevé des éléments sombres dans la page réelle ne l'a pas vu non plus, parce que `#app` n'a pas de `background-color` : tout est dans `background-image`. Il a fallu remonter la chaîne des parents depuis le texte illisible, puis lire la règle. La lueur haute est conservée et retournée : de jour, la lumière vient du haut et ÉCLAIRCIT — c'est le même geste. ============================================================ */ :root[data-theme="clair"] #app { background: var(--tissage), radial-gradient(120% 55% at 50% -8%, #FFFDF4 0%, transparent 62%), linear-gradient(180deg, var(--nuit) 0%, #DAD3BD 100%); }