/* Les themes.
*
* Trois relectures du meme ecran, plus celui d'origine. Aucune ne DEPLACE quoi
* que ce soit : la disposition, les tailles et les enchainements viennent de
* style.css et n'apparaissent pas ici. Ce fichier ne contient que de la
* matiere — couleurs, polices, trames, cadres, ornements, icones.
*
* C'est possible parce que style.css ne nomme jamais une couleur en dur : tout
* passe par les variables de `:root`. Et ce qu'un theme ajoute par-dessus est
* pose sur des PSEUDO-ELEMENTS en position absolue, qui ne prennent aucune
* place dans le flux : cadres pixel, trames, equerres.
*
* Le theme d'origine reste le defaut, sans attribut : ce qui suit ne s'applique
* qu'a `[data-theme=...]`. Un ecran sans ce fichier — ou avant que le script du
* ne tourne — reste donc exactement celui d'aujourd'hui.
*
* Deux techniques portent presque tout le pixel art :
*
* `border-image` avec un SVG en data-URI, decoupe en neuf. Les quatre coins
* sont dessines une fois, les quatre bords se REPETENT : un cadre orne de
* n'importe quelle taille, pour une seule ligne de CSS et aucun fichier.
*
* `mask-image` pour les icones, colorees par `currentColor` : chaque theme —
* et chaque survol — les recupere a SA couleur sans qu'on redessine rien.
*
* Aucune requete reseau, aucun binaire dans le depot. Les polices viennent des
* piles systeme : en embarquer une serait un fichier de plus a servir et a
* tenir a jour, pour un ecran qui n'en a pas besoin. */
/* ---------------------------------------------------------------- */
/* 1. JRPG classique */
/* ---------------------------------------------------------------- */
/* Portraits pixel, coins ornementes facon Chrono Trigger : indigo profond,
* bordures d'or a double filet, et le bouton d'action en or plein. */
:root[data-theme="jrpg"] {
--fond: #0d1026;
--fond-carte: #171d3d;
--fond-creux: #111533;
--trait: #3b4478;
--texte: #e9e7f7;
--texte-faible:#9098cc;
--titre: #f5d442;
--intertitre: #86d9f2;
--bon: #82e28d;
--attention: #f5b942;
--danger: #ff7b7b;
--focus: #f5d442;
--coin: #f5d442;
--encre: #0d1026;
--police: "DejaVu Sans Mono", ui-monospace, "Liberation Mono", monospace;
/* La trame des panneaux : un tissage a 45 degres, tres peu contraste. Une
* trame qu'on remarque est une trame qui gene la lecture. */
--trame:
repeating-linear-gradient(45deg,
rgba(245, 212, 66, .028) 0 1px, transparent 1px 4px),
repeating-linear-gradient(-45deg,
rgba(134, 217, 242, .022) 0 1px, transparent 1px 4px);
/* Le cadre a double filet, avec un joyau a chaque angle. */
--cadre: url('data:image/svg+xml;utf8,');
}
/* ---------------------------------------------------------------- */
/* 2. HUD detective texture */
/* ---------------------------------------------------------------- */
/* Trame en damier, coins rouges, badge facon insigne pixel. Le fond est
* presque noir et chaud ; le rouge n'y est pas une alarme, c'est la couleur du
* dossier. La police est celle d'une machine a ecrire. */
:root[data-theme="hud"] {
--fond: #120e0b;
--fond-carte: #1d1611;
--fond-creux: #16100d;
--trait: #5c3427;
--texte: #ecdfca;
--texte-faible:#a58c73;
--titre: #e9a13d;
--intertitre: #d98c6a;
--bon: #9fbf6a;
--attention: #e9a13d;
--danger: #e2543f;
--focus: #e9a13d;
--coin: #d94f3d;
--encre: #ffe9e2;
--accent: #c4442f;
--police: "Courier 10 Pitch", "Courier New", "Nimbus Mono PS", monospace;
/* Damier de 6 px (le dithering de l'exemple) ET lignes de balayage : deux
* trames superposees, chacune presque invisible seule. */
--trame:
linear-gradient(45deg, rgba(217, 79, 61, .05) 25%, transparent 25%,
transparent 75%, rgba(217, 79, 61, .05) 75%),
linear-gradient(45deg, rgba(217, 79, 61, .05) 25%, transparent 25%,
transparent 75%, rgba(217, 79, 61, .05) 75%),
repeating-linear-gradient(rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
--trame-taille: 6px 6px, 6px 6px, auto;
--trame-pos: 0 0, 3px 3px, 0 0;
/* Cadre a rivets, et tirets sur les bords. */
--cadre: url('data:image/svg+xml;utf8,');
}
/* ---------------------------------------------------------------- */
/* 3. Dossier d'archives */
/* ---------------------------------------------------------------- */
/* Hachures diagonales, sepia, or pale. C'est le seul des trois a ne pas etre
* en chasse fixe : un dossier se lit en serif, et c'est ce qui le distingue le
* plus surement des deux autres. */
:root[data-theme="dossier"] {
--fond: #1f1710;
--fond-carte: #2b2116;
--fond-creux: #241b12;
--trait: #6b5334;
--texte: #ecd9ac;
--texte-faible:#ab9268;
--titre: #f0c469;
--intertitre: #e3b264;
--bon: #b3c46a;
--attention: #f0c469;
--danger: #dd7a5e;
--focus: #f0c469;
--coin: #f0c469;
--encre: #1f1710;
--police: "IBM Plex Serif", "DejaVu Serif", Georgia, "Times New Roman", serif;
/* Le grain du papier : des hachures larges, des fibres fines dans l'autre
* sens, et une tache de lampe. */
--trame:
repeating-linear-gradient(45deg,
rgba(240, 196, 105, .05) 0 2px, transparent 2px 9px),
repeating-linear-gradient(-70deg,
rgba(240, 196, 105, .022) 0 1px, transparent 1px 6px);
/* Cadre a double filet et coins pleins, comme un tampon d'archive. */
--cadre: url('data:image/svg+xml;utf8,');
}
/* ================================================================ */
/* Ce que les trois partagent */
/* ================================================================ */
:root[data-theme] body { font-family: var(--police); }
/* Les etiquettes en capitales espacees, comme dans les trois exemples. */
:root[data-theme] h1,
:root[data-theme] .fil-tete strong,
:root[data-theme] .hud-haut,
:root[data-theme] button.principal {
text-transform: uppercase;
letter-spacing: .1em;
}
/* La trame, sur le fond ET sur les panneaux. Sur le seul fond, elle
* disparaissait derriere les cartes — c'est-a-dire partout ou l'on regarde. */
:root[data-theme] body,
:root[data-theme] .carte,
:root[data-theme] .item,
:root[data-theme] .ticket,
:root[data-theme] .compte,
:root[data-theme] .cote-fil,
:root[data-theme] .hud,
:root[data-theme] .hud-haut,
:root[data-theme] .bandeau,
:root[data-theme] .barre-bas,
:root[data-theme] .carnet-page {
background-image: var(--trame);
background-size: var(--trame-taille, auto);
background-position: var(--trame-pos, 0 0);
}
/* La lueur du haut de page se pose PAR-DESSUS la trame du fond. */
:root[data-theme="jrpg"] body {
background-image:
radial-gradient(ellipse 90% 55% at 50% 0%, rgba(60, 76, 160, .3) 0%, transparent 65%),
var(--trame);
}
:root[data-theme="hud"] body {
background-image:
radial-gradient(ellipse 90% 55% at 50% 0%, rgba(120, 60, 40, .28) 0%, transparent 65%),
var(--trame);
background-size: auto, var(--trame-taille);
background-position: 0 0, var(--trame-pos);
}
:root[data-theme="dossier"] body {
background-image:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(150, 110, 40, .22) 0%, transparent 60%),
var(--trame);
}
/* ---------------------------------------------------------------- */
/* Les cadres pixel */
/* ---------------------------------------------------------------- */
/* Le cadre est pose sur un pseudo-element en position absolue : `border-image`
* y remplace la bordure, sans toucher a celle du panneau — donc sans deplacer
* son contenu d'un pixel. `inset` le tient a l'interieur, `pointer-events` le
* rend transparent au clic. */
:root[data-theme] .carte,
:root[data-theme] .cote-fil,
:root[data-theme] .carnet-page {
position: relative;
}
/* La barre du bas n'en recoit PAS : ce n'est pas une fenetre mais un rebord,
* et un cadre ouvrage autour d'un seul bouton « Retour » pesait plus lourd que
* le bouton. */
:root[data-theme] .carte::after,
:root[data-theme] .cote-fil::after,
:root[data-theme] .carnet-page::after {
content: '';
position: absolute;
inset: 3px;
pointer-events: none;
border: 8px solid transparent;
border-image: var(--cadre) 8 repeat;
}
/* ---------------------------------------------------------------- */
/* Boutons et champs : des angles COUPES, pas des angles droits */
/* ---------------------------------------------------------------- */
/* Le chanfrein pixel des fenetres de JRPG : quatre coins retires en escalier.
* `clip-path` ne change ni la taille ni la position — il ne fait que retirer
* de la matiere. */
/* Les boutons sans bordure de la barre du haut gardent leur forme : un
* chanfrein ne se voit que sur un contour, et il rognait leur texte. */
:root[data-theme] button:not(.discret-bouton),
:root[data-theme] input[type=text],
:root[data-theme] input[type=password],
:root[data-theme] input[type=number],
:root[data-theme] select,
:root[data-theme] textarea {
border-radius: 0;
clip-path: polygon(
0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px,
100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px));
}
/* Un contour de focus serait COUPE par le chanfrein — il est dessine dehors.
* On le repose a l'interieur, ou rien ne le rogne : sans cela, se deplacer au
* clavier dans un formulaire ne montrerait plus ou l'on est. */
:root[data-theme] button:focus-visible,
:root[data-theme] input:focus,
:root[data-theme] select:focus,
:root[data-theme] textarea:focus {
outline: none;
box-shadow: inset 0 0 0 2px var(--focus);
}
/* Les autres angles droits du site. */
:root[data-theme] .carte,
:root[data-theme] .item,
:root[data-theme] .ticket,
:root[data-theme] .compte,
:root[data-theme] .barre-bas,
:root[data-theme] .etiquette,
:root[data-theme] .badge,
:root[data-theme] .jauge,
:root[data-theme] .jauge .remplissage {
border-radius: 0;
}
/* Le bouton d'action, plein et sans degrade. `--accent` n'est defini que par le
* theme qui veut autre chose que sa couleur de titre. */
:root[data-theme] button.principal {
background: var(--accent, var(--titre));
border-color: var(--accent, var(--titre));
color: var(--encre);
font-weight: 700;
}
/* Le relief des fenetres de JRPG : clair en haut a gauche, sombre en bas a
* droite. Deux ombres INTERNES, donc aucune place prise. */
:root[data-theme="jrpg"] button:not(.discret-bouton) {
box-shadow:
inset 2px 2px 0 rgba(255, 255, 255, .14),
inset -2px -2px 0 rgba(0, 0, 0, .45);
}
:root[data-theme="jrpg"] button:not(.discret-bouton):active:not(:disabled) {
box-shadow:
inset 2px 2px 0 rgba(0, 0, 0, .45),
inset -2px -2px 0 rgba(255, 255, 255, .1);
}
/* Les champs de saisie sont creuses : le relief inverse de celui des boutons. */
:root[data-theme="jrpg"] input[type=text],
:root[data-theme="jrpg"] input[type=password],
:root[data-theme="jrpg"] textarea {
box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .5);
}
/* ---------------------------------------------------------------- */
/* La jauge, en blocs */
/* ---------------------------------------------------------------- */
/* Une barre continue n'a rien de pixel. Celle-ci est decoupee en segments par
* une trame posee PAR-DESSUS le remplissage — la mesure ne change pas, seule
* sa lecture. */
:root[data-theme] .jauge {
position: relative;
height: 10px;
border: 1px solid var(--trait);
}
:root[data-theme] .jauge::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(90deg,
transparent 0 5px, var(--fond-creux) 5px 7px);
}
/* ---------------------------------------------------------------- */
/* Portraits et curseur */
/* ---------------------------------------------------------------- */
/* Chaque personne a deja SA couleur, posee en ligne sur son nom par la page ;
* le carre la reprend par `currentColor`. Un seul bloc de CSS donne donc autant
* de portraits que de personnages, toujours a la bonne couleur — et le jour ou
* la palette change, ils suivent. */
:root[data-theme] .dit .qui::before {
content: '';
display: inline-block;
width: .85em;
height: .85em;
margin-right: .45em;
vertical-align: -.08em;
background: currentColor;
/* Le liseré sombre puis clair : un cadre de portrait, en deux pixels. */
box-shadow:
0 0 0 1px var(--fond),
0 0 0 2px color-mix(in srgb, currentColor 45%, transparent);
}
/* Le curseur en escalier de l'exemple 1 : ce que le joueur vient de dire porte
* une fleche, comme une boite de dialogue qui attend. */
:root[data-theme] .dit.player .qui::after {
content: ' \25B8';
color: var(--titre);
}
/* ---------------------------------------------------------------- */
/* Le cartouche de la piece, et son insigne */
/* ---------------------------------------------------------------- */
/* L'exemple 1 pose un petit carre evide devant le nom de la piece, l'exemple 2
* un insigne. L'exemple 3 n'en a pas : on le lui donne, comme demande — c'est
* le meme reperage, et son absence se remarquait des qu'on changeait de theme. */
:root[data-theme] .hud-haut #j-piece::before {
content: '';
display: inline-block;
width: .7em;
height: .7em;
margin-right: .5em;
vertical-align: .02em;
border: 2px solid var(--coin);
}
:root[data-theme="hud"] .hud-haut #j-piece::before {
background: var(--coin);
border-color: var(--coin);
}
:root[data-theme="dossier"] .hud-haut #j-piece::before {
width: .35em;
height: 1em;
border-width: 0;
background: var(--coin);
}
/* ---------------------------------------------------------------- */
/* Les icones des actions de jeu */
/* ---------------------------------------------------------------- */
/* CARNET, PISTE, QUITTER portent une icone dans les exemples 1 et 2, aucune
* dans le 3 : on la donne aux trois, et au theme d'origine — une icone absente
* d'un seul theme se remarque comme un oubli.
*
* `mask-image` plutot que `background-image` : le dessin est un pochoir, et
* c'est `currentColor` qui le colore. */
#j-carnet::before,
#j-piste::before,
#j-quitter::before,
#aller-theme::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-right: .45em;
vertical-align: -.15em;
background: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: var(--d);
mask-image: var(--d);
}
/* Un carnet : couverture et trois lignes ecrites.
*
* `fill-rule="evenodd"` fait tout le travail, et il n'est pas facultatif : un
* pochoir ne connait que « opaque » et « transparent », donc dessiner les
* lignes en blanc sur un fond noir donne un bloc PLEIN — blanc et noir sont
* tous deux opaques. Ce sont les zones a laisser vides qu'il faut compter :
* dans le cadre 1 croisement (plein), dans le creux 2 (vide), dans une ligne
* 3 (plein). */
#j-carnet::before {
--d: url('data:image/svg+xml;utf8,');
}
/* La piste : les quatre carres de l'exemple, une grille de releves. */
#j-piste::before {
--d: url('data:image/svg+xml;utf8,');
}
/* Quitter : une porte, et la fleche qui en sort. */
#j-quitter::before {
--d: url('data:image/svg+xml;utf8,');
}
/* Le choix du theme : une palette a quatre pastilles. */
#aller-theme::before {
--d: url('data:image/svg+xml;utf8,');
}
/* ---------------------------------------------------------------- */
/* Le choix du theme */
/* ---------------------------------------------------------------- */
.bandeau { position: relative; }
/* La liste, sous le bouton. Elle sort du flux : ouverte ou fermee, elle ne
* decale rien. */
.themes {
position: absolute;
top: 100%;
right: .8rem;
z-index: 40;
width: min(22rem, calc(100vw - 2rem));
max-height: 70vh;
overflow-y: auto;
padding: .5rem;
background: var(--fond-carte);
border: 1px solid var(--trait);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
display: grid;
gap: .35rem;
}
:root[data-theme] .themes {
border-radius: 0;
background-image: var(--trame);
background-size: var(--trame-taille, auto);
}
.themes button {
display: grid;
grid-template-columns: auto 1fr;
gap: .6rem;
align-items: center;
width: 100%;
text-align: left;
padding: .45rem;
background: none;
border: 1px solid transparent;
}
.themes button:hover { border-color: var(--titre); background: var(--fond-creux); }
/* Celui qu'on porte deja : on le marque, sinon on le cherche en cliquant. */
.themes button[aria-current="true"] { border-color: var(--titre); }
.themes .nom { font-weight: 600; font-size: .9rem; }
.themes .quoi { color: var(--texte-faible); font-size: .78rem; line-height: 1.35; }
/* L'apercu : une maquette de l'ecran en petit — le fond avec SA trame, le
* cartouche, une ligne de texte et le bouton d'action. Il porte aussi la
* police du theme, parce que c'est ce qui les distingue le plus vite. */
.themes .apercu {
width: 4.6rem;
height: 3.2rem;
border: 2px solid var(--apercu-trait);
background-color: var(--apercu-fond);
background-image: var(--apercu-trame);
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2px;
padding: 4px;
flex: none;
}
.themes .apercu i {
display: block;
height: 6px;
background: var(--apercu-titre);
width: 60%;
}
.themes .apercu s {
align-self: center;
display: block;
height: 3px;
background: var(--apercu-texte);
width: 85%;
text-decoration: none;
box-shadow: 0 6px 0 -1.5px var(--apercu-texte);
}
.themes .apercu b {
display: block;
height: 8px;
width: 48%;
justify-self: end;
background: var(--apercu-accent);
}
/* Le nom de chaque theme est ecrit DANS sa police : on voit la difference
* avant de choisir, ce qu'aucune description ne remplace. */
.themes .nom { font-family: var(--apercu-police, inherit); }
/* ================================================================ */
/* 4. Neon — la nuit, en enseigne */
/* ================================================================ */
/* Presque noir, magenta et cyan, et de la LUMIERE : c'est le seul theme ou
* quelque chose brille. Le halo est fait de `text-shadow` et de `box-shadow`,
* jamais d'image — un flou de 12 px coute moins cher qu'une texture, et il
* suit la couleur du theme. */
:root[data-theme="neon"] {
--fond: #07060e;
--fond-carte: #120f22;
--fond-creux: #0c0a1a;
--trait: #3a2470;
--texte: #ece4ff;
--texte-faible:#9a86c8;
--titre: #ff4fd8;
--intertitre: #37e6f0;
--bon: #4dffa6;
--attention: #ffd93d;
--danger: #ff3b6b;
--focus: #37e6f0;
--coin: #ff4fd8;
--encre: #0a0714;
--police: "DM Mono", "Hack", ui-monospace, monospace;
/* Une grille qui fuit vers l'horizon, tres sombre : deux series de lignes,
* l'une plus serree que l'autre. */
--trame:
repeating-linear-gradient(90deg,
rgba(55, 230, 240, .055) 0 1px, transparent 1px 40px),
repeating-linear-gradient(
rgba(255, 79, 216, .045) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg,
rgba(55, 230, 240, .022) 0 1px, transparent 1px 8px);
/* Un double filet fin, avec une pastille lumineuse a chaque angle. */
--cadre: url('data:image/svg+xml;utf8,');
}
/* Ce qui brille. Les titres et les accents portent leur propre halo — c'est
* tout ce qui separe une enseigne d'un texte rose. */
:root[data-theme="neon"] h1,
:root[data-theme="neon"] .bandeau .qui,
:root[data-theme="neon"] .hud-haut {
text-shadow: 0 0 8px color-mix(in srgb, var(--titre) 65%, transparent);
}
:root[data-theme="neon"] h2 {
text-shadow: 0 0 8px color-mix(in srgb, var(--intertitre) 55%, transparent);
}
:root[data-theme="neon"] button.principal {
box-shadow:
0 0 10px color-mix(in srgb, var(--titre) 55%, transparent),
inset 0 0 12px rgba(255, 255, 255, .18);
}
:root[data-theme="neon"] button:not(.discret-bouton):hover:not(:disabled) {
box-shadow: 0 0 10px color-mix(in srgb, var(--intertitre) 45%, transparent);
border-color: var(--intertitre);
}
/* Le cadre lui-meme rayonne, comme un tube derriere une vitre. */
:root[data-theme="neon"] .carte::after,
:root[data-theme="neon"] .cote-fil::after,
:root[data-theme="neon"] .carnet-page::after {
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--titre) 55%, transparent));
}
/* Le portrait de chacun rayonne de SA couleur : `currentColor` la porte deja. */
:root[data-theme="neon"] .dit .qui::before {
box-shadow: 0 0 0 1px var(--fond), 0 0 7px currentColor;
}
/* ================================================================ */
/* 5. Neo retro — le plastique des annees 70 */
/* ================================================================ */
/* Le seul theme CLAIR, et c'est ce qui le distingue avant toute couleur :
* creme, brun profond, orange. Les ombres y sont dures et sans flou, comme une
* impression mal calee — pas de dégradé, pas de halo. */
:root[data-theme="retro"] {
--fond: #e9dfcb;
--fond-carte: #f6f0e2;
--fond-creux: #ded2b8;
--trait: #b9a17c;
--texte: #2e2822;
--texte-faible:#7b6a52;
--titre: #c9541b;
--intertitre: #1f6f6b;
--bon: #4a7c2f;
--attention: #b8860b;
--danger: #a8321f;
--focus: #c9541b;
--coin: #c9541b;
--encre: #fdf6e8;
/* Le joueur se distingue par le NOIR ici, pas par le blanc : sur du creme,
* un nom blanc ne se lit pas et son portrait disparait. */
--joueur: #1a1611;
--police: "IBM Plex Sans Condensed", "DejaVu Sans Condensed", "Liberation Sans Narrow", sans-serif;
/* Le grain d'un papier epais, et de larges bandes horizontales tres pales :
* l'impression d'une feuille imprimee, pas d'un ecran. */
--trame:
repeating-linear-gradient(
rgba(120, 90, 50, .045) 0 1px, transparent 1px 5px),
repeating-linear-gradient(90deg,
rgba(120, 90, 50, .03) 0 1px, transparent 1px 3px);
/* Un trait plein et epais, avec de gros blocs d'angle : la simplicite des
* boitiers de l'epoque. */
--cadre: url('data:image/svg+xml;utf8,');
}
/* Les ombres dures. Aucune n'est floue : c'est ce qui fait « objet imprime »
* plutot que « fenetre en verre ». */
:root[data-theme="retro"] .carte,
:root[data-theme="retro"] .item,
:root[data-theme="retro"] .ticket,
:root[data-theme="retro"] .compte {
box-shadow: 4px 4px 0 rgba(46, 40, 34, .16);
}
:root[data-theme="retro"] button:not(.discret-bouton) {
box-shadow: 3px 3px 0 rgba(46, 40, 34, .28);
}
/* Le bouton s'ENFONCE : l'ombre disparait et le bouton la remplace. */
:root[data-theme="retro"] button:not(.discret-bouton):active:not(:disabled) {
box-shadow: 0 0 0 rgba(46, 40, 34, .28);
transform: translate(3px, 3px);
}
/* Le fond du jeu reste sombre — c'est la scene, pas le site. Le bandeau, lui,
* doit se detacher du creme. */
:root[data-theme="retro"] .bandeau { border-bottom-width: 3px; }
/* ================================================================ */
/* 6. Pastel — d'apres Catppuccin Mocha */
/* ================================================================ */
/* Doux de bout en bout. C'est le seul theme qui REMET des angles arrondis :
* les trois premiers les avaient perdus pour faire pixel, celui-ci les
* reprend, et c'est ce qu'on remarque en premier. */
:root[data-theme="pastel"] {
--fond: #1e1e2e; /* base */
--fond-carte: #26263a; /* mantle */
--fond-creux: #181825; /* crust */
--trait: #45475a; /* surface1 */
--texte: #cdd6f4; /* text */
--texte-faible:#a6adc8; /* subtext0 */
--titre: #cba6f7; /* mauve */
--intertitre: #89b4fa; /* blue */
--bon: #a6e3a1; /* green */
--attention: #f9e2af; /* yellow */
--danger: #f38ba8; /* red */
--focus: #cba6f7;
--coin: #cba6f7;
--encre: #1e1e2e;
--police: "IBM Plex Sans", "DejaVu Sans", ui-sans-serif, system-ui, sans-serif;
/* Un voile, et rien de plus : une trame marquee irait contre l'idee. */
--trame:
radial-gradient(circle at 1px 1px,
rgba(203, 166, 247, .05) 1px, transparent 0);
--trame-taille: 22px 22px;
/* Un contour arrondi ne se dessine pas en neuf morceaux : ce theme n'a donc
* pas de cadre pixel, il a des BORDURES douces (voir plus bas). */
--cadre: none;
}
/* Les angles reviennent, et les ombres sont floues. */
:root[data-theme="pastel"] .carte,
:root[data-theme="pastel"] .item,
:root[data-theme="pastel"] .ticket,
:root[data-theme="pastel"] .compte,
:root[data-theme="pastel"] .barre-bas,
:root[data-theme="pastel"] .themes { border-radius: 14px; }
:root[data-theme="pastel"] button,
:root[data-theme="pastel"] input[type=text],
:root[data-theme="pastel"] input[type=password],
:root[data-theme="pastel"] input[type=number],
:root[data-theme="pastel"] select,
:root[data-theme="pastel"] textarea {
border-radius: 10px;
/* Pas de chanfrein : il ferait mentir tout le reste. */
clip-path: none;
}
:root[data-theme="pastel"] .etiquette,
:root[data-theme="pastel"] .badge { border-radius: 999px; }
:root[data-theme="pastel"] .jauge,
:root[data-theme="pastel"] .jauge .remplissage { border-radius: 999px; }
/* Et la jauge redevient continue : les blocs sont une idee de pixel art. */
:root[data-theme="pastel"] .jauge::after { content: none; }
:root[data-theme="pastel"] .carte { box-shadow: 0 6px 20px rgba(0, 0, 0, .28); }
/* Le cadre pixel n'a pas de sens ici : on l'efface. */
:root[data-theme="pastel"] .carte::after,
:root[data-theme="pastel"] .cote-fil::after,
:root[data-theme="pastel"] .carnet-page::after { content: none; }
/* Les capitales espacees sont dures ; ce theme ne crie pas. */
:root[data-theme="pastel"] h1,
:root[data-theme="pastel"] .fil-tete strong,
:root[data-theme="pastel"] .hud-haut,
:root[data-theme="pastel"] button.principal {
text-transform: none;
letter-spacing: .01em;
}
/* Le portrait devient une pastille : ronde, comme tout le reste. */
:root[data-theme="pastel"] .dit .qui::before { border-radius: 50%; }
:root[data-theme="pastel"] .hud-haut #j-piece::before { border-radius: 50%; }
/* ================================================================ */
/* 7. Bleu — le plan de l'architecte */
/* ================================================================ */
/* Un plan technique : bleu profond, traits blancs, papier millimetre. Il est
* ici a sa place plus qu'ailleurs — le jeu se passe dans un BATIMENT, et l'on
* y regarde une carte toute la partie. */
:root[data-theme="bleu"] {
--fond: #072438;
--fond-carte: #0a3049;
--fond-creux: #061e2f;
--trait: #2e6b93;
--texte: #e2f1ff;
--texte-faible:#8fb8d4;
--titre: #ffffff;
--intertitre: #7fd4ff;
--bon: #8ce0b0;
--attention: #ffd27f;
--danger: #ff9a8f;
--focus: #7fd4ff;
--coin: #cfe8ff;
--encre: #072438;
--police: "Hack", "Liberation Mono", ui-monospace, monospace;
/* Le papier millimetre : un carreau fin de 8 px, un fort de 40. */
--trame:
repeating-linear-gradient(90deg,
rgba(207, 232, 255, .05) 0 1px, transparent 1px 40px),
repeating-linear-gradient(
rgba(207, 232, 255, .05) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg,
rgba(207, 232, 255, .025) 0 1px, transparent 1px 8px),
repeating-linear-gradient(
rgba(207, 232, 255, .025) 0 1px, transparent 1px 8px);
/* Le cadre d'un plan : un filet, et des reperes de coupe aux angles. */
--cadre: url('data:image/svg+xml;utf8,');
}
/* Un plan se lit en capitales, et les intitules y sont soulignes comme des
* cartouches. */
:root[data-theme="bleu"] h2 {
border-bottom: 1px solid color-mix(in srgb, var(--intertitre) 45%, transparent);
padding-bottom: .2rem;
text-transform: uppercase;
letter-spacing: .08em;
font-size: 1rem;
}
/* Les champs de saisie sont des cases a remplir : fond plus clair, trait net. */
:root[data-theme="bleu"] input[type=text],
:root[data-theme="bleu"] input[type=password],
:root[data-theme="bleu"] input[type=number],
:root[data-theme="bleu"] textarea {
border-color: color-mix(in srgb, var(--coin) 55%, transparent);
}
/* Le portrait devient un repere de plan : un carre a liseré blanc. */
:root[data-theme="bleu"] .dit .qui::before {
box-shadow: 0 0 0 1px var(--fond), 0 0 0 2px var(--coin);
}