/* ─────────────────────────────────────────────────────────────────────────────
   C'est l'heure — les sept habillages.

   Toutes les couleurs du projet sont ici, et nulle part ailleurs. C'est ce qui
   permet d'en poser sept en réécrivant ce seul fichier au lieu de repasser sur
   chaque écran — le registre l'avait noté comme contrainte dès D7, et c'est la
   raison pour laquelle le premier habillage a été bâti sur des variables.

   Trois viennent du premier jour — chaud, vif, clair. Les quatre autres —
   braise, velours, néon, aplat — viennent du prototype
   « essais/proto-couleur.html », qui colorait l'écran PAR CATÉGORIE. Ce que le
   système de thèmes sait porter d'un tel habillage, c'est son ambiance et son
   accent ; la lumière par catégorie ne l'est pas, et chaque bloc dit lequel de
   ses tons a été retenu pour l'accent.

   Un thème change les COULEURS, jamais la forme : ni les polices, ni les
   tailles, ni les écarts. Une mise en page qui bougerait d'un thème à l'autre
   demanderait de vérifier trois fois chaque écran.

   Le thème s'applique par « data-theme » sur la racine du document. Sans
   attribut, c'est le thème chaud — celui qui existait avant qu'il y en ait
   trois, et qui reste le défaut.

   Aucune police distante : les textes sont intimes, et rien de ces pages ne
   doit signaler à un tiers qu'on les a ouvertes.
   ───────────────────────────────────────────────────────────────────────────── */

:root,
:root[data-theme="chaud"] {
  color-scheme: dark;

  /* Les fonds, du plus profond au plus relevé. */
  --fond: #14100e;
  --fond-releve: #1d1815;
  --fond-creux: #0f0c0a;

  /* Les traits et les encres. */
  --trait: #332b26;
  --encre: #efe7df;
  --encre-douce: #a89a8d;
  --encre-faible: #6b6058;

  /* L'accent, unique. Un jeu qui annonce n'a pas besoin d'une palette. */
  --accent: #c98a3c;
  --accent-encre: #1a1310;

  /* Deux tons de l'accent, pour les dégradés. Un aplat unique fait maquette ;
     un dégradé large fait clinquant. L'écart entre les deux est volontairement
     ténu — on doit le sentir sans le voir. */
  --accent-haut: #d69a4e;
  --accent-bas: #b87a2e;
  --accent-voile: rgba(201, 138, 60, .14);

  /* Les deux seules autres couleurs : ce qui va bien, ce qui ne va pas. */
  --alerte: #c9614f;
  --alerte-encre: #f0c3ba;
  --alerte-voile: rgba(201, 97, 79, .08);
  --bien: #7ba374;
  --bien-encre: #cfe3cb;

  /* Ce qui se pose PAR-DESSUS l'accent : le liseré du haut d'un bouton et son
     ombre portée. Sur fond clair, l'un et l'autre doivent s'inverser. */
  --lustre: rgba(255, 255, 255, .12);
  --ombre-portee: 0 6px 18px -8px rgba(0, 0, 0, .8);
  --ombre-pastille: 0 1px 3px rgba(0, 0, 0, .35);
  --voile-trait: rgba(239, 231, 223, .05);

  /* Les quatre teintes : trois intensites et le registre. Les encres
     sont calculees par outils/teintes.py, pas ecrites a la main. La
     composante RVB existe parce que color-mix() est absent d'iOS 16,
     socle de compatibilite du projet. */
  --cat-nuages: #7FA88E;
  --cat-nuages-encre: #080B09;       /* 7.43:1 */
  --cat-nuages-douce: #29372E;       /* 4.70:1 */
  --cat-nuages-rvb: 127, 168, 142;
  --cat-baiser: #C97B6B;
  --cat-baiser-encre: #100807;       /* 6.16:1 */
  --cat-baiser-douce: #39211D;       /* 4.63:1 */
  --cat-baiser-rvb: 201, 123, 107;
  --cat-feu: #D9A441;
  --cat-feu-encre: #191307;       /* 8.21:1 */
  --cat-feu-douce: #4F3C17;       /* 4.69:1 */
  --cat-feu-rvb: 217, 164, 65;
  --cat-collier: #9C86C4;
  --cat-collier-encre: #0B0810;       /* 6.27:1 */
  --cat-collier-douce: #2C2539;       /* 4.63:1 */
  --cat-collier-rvb: 156, 134, 196;

}

/* ── Sombre et vif ────────────────────────────────────────────────────────────
   Noir franc et accent saturé. Moins feutré, plus jeu : c'est le thème des
   soirées qui ne cherchent pas la nuance. */

:root[data-theme="vif"] {
  color-scheme: dark;

  --fond: #0a0a0c;
  --fond-releve: #17171b;
  --fond-creux: #050506;

  --trait: #2c2c34;
  --encre: #f4f4f6;
  --encre-douce: #a5a5b0;
  --encre-faible: #6a6a76;

  --accent: #e0245e;
  --accent-encre: #ffffff;
  --accent-haut: #f0356e;
  --accent-bas: #c4134c;
  --accent-voile: rgba(224, 36, 94, .16);

  --alerte: #ff6b5a;
  --alerte-encre: #ffc4bc;
  --alerte-voile: rgba(255, 107, 90, .1);
  --bien: #4ecb8d;
  --bien-encre: #c3ecd7;

  --lustre: rgba(255, 255, 255, .18);
  --ombre-portee: 0 6px 20px -8px rgba(224, 36, 94, .55);
  --ombre-pastille: 0 1px 3px rgba(0, 0, 0, .5);
  --voile-trait: rgba(244, 244, 246, .06);

  /* Les quatre teintes : trois intensites et le registre. Les encres
     sont calculees par outils/teintes.py, pas ecrites a la main. La
     composante RVB existe parce que color-mix() est absent d'iOS 16,
     socle de compatibilite du projet. */
  --cat-nuages: #35E0F0;
  --cat-nuages-encre: #09373B;       /* 8.06:1 */
  --cat-nuages-douce: #135E65;       /* 4.64:1 */
  --cat-nuages-rvb: 53, 224, 240;
  --cat-baiser: #FF4F96;
  --cat-baiser-encre: #1A020C;       /* 6.44:1 */
  --cat-baiser-douce: #4F142C;       /* 4.64:1 */
  --cat-baiser-rvb: 255, 79, 150;
  --cat-feu: #FF7A1A;
  --cat-feu-encre: #0F0701;       /* 7.66:1 */
  --cat-feu-douce: #572A08;       /* 4.63:1 */
  --cat-feu-rvb: 255, 122, 26;
  --cat-collier: #C08CFF;
  --cat-collier-encre: #110323;       /* 7.95:1 */
  --cat-collier-douce: #462C65;       /* 4.66:1 */
  --cat-collier-rvb: 192, 140, 255;

}

/* ── Clair et minimal ─────────────────────────────────────────────────────────
   Fond crème, encre sombre, beaucoup d'air.

   Réserve assumée, écrite au cahier : ce jeu est pensé pour une pièce mal
   éclairée, et un écran clair tenu à bout de bras y éblouit celui qui le tient
   comme ceux d'en face. Il sert ailleurs qu'en soirée — pas en soirée. */

:root[data-theme="clair"] {
  color-scheme: light;

  --fond: #f6f1e9;
  --fond-releve: #ffffff;
  --fond-creux: #ece5da;

  --trait: #d9cec0;
  --encre: #241d17;
  --encre-douce: #6a5c4d;
  /* Le compteur sous le bouton. Le premier essai tombait à 2,94 pour 1 : lisible
     sur mon écran, illisible sur un téléphone en plein jour. */
  --encre-faible: #8e7f6d;

  /* L'accent descend en valeur : le cuivre clair du thème sombre passerait
     inaperçu sur une crème, et le texte posé dessus deviendrait illisible.
     La valeur est MESURÉE, pas choisie à l'œil — le premier essai donnait 4,46
     pour 1 sous le texte du bouton, soit quatre centièmes sous le seuil. Un
     écart qu'aucun regard ne rattrape. */
  --accent: #9c5f1b;
  --accent-encre: #fffaf3;
  --accent-haut: #b8772c;
  --accent-bas: #8d5614;
  --accent-voile: rgba(164, 103, 31, .12);

  --alerte: #a83a2a;
  --alerte-encre: #6e2418;
  --alerte-voile: rgba(168, 58, 42, .08);
  --bien: #4a7a45;
  --bien-encre: #2e5029;

  /* Sur fond clair, le liseré du haut s'inverse — un blanc translucide sur un
     bouton clair ne se voit pas — et l'ombre portée s'allège. */
  --lustre: rgba(0, 0, 0, .06);
  --ombre-portee: 0 6px 16px -10px rgba(36, 29, 23, .45);
  --ombre-pastille: 0 1px 3px rgba(36, 29, 23, .18);
  --voile-trait: rgba(36, 29, 23, .08);

  /* Les quatre teintes : trois intensites et le registre. Les encres
     sont calculees par outils/teintes.py, pas ecrites a la main. La
     composante RVB existe parce que color-mix() est absent d'iOS 16,
     socle de compatibilite du projet. */
  --cat-nuages: #1C6E7A;
  --cat-nuages-encre: #F7F9FA;       /* 5.58:1 */
  --cat-nuages-douce: #D8E6E8;       /* 4.61:1 */
  --cat-nuages-rvb: 28, 110, 122;
  --cat-baiser: #A81E52;
  --cat-baiser-encre: #FBF8F9;       /* 6.69:1 */
  --cat-baiser-douce: #E9C8D4;       /* 4.60:1 */
  --cat-baiser-rvb: 168, 30, 82;
  --cat-feu: #A34412;
  --cat-feu-encre: #FAF8F7;       /* 5.85:1 */
  --cat-feu-douce: #ECDBD2;       /* 4.61:1 */
  --cat-feu-rvb: 163, 68, 18;
  --cat-collier: #5C3399;
  --cat-collier-encre: #F7F6F8;       /* 8.16:1 */
  --cat-collier-douce: #C4B6D9;       /* 4.62:1 */
  --cat-collier-rvb: 92, 51, 153;

}

/* ── Braise ───────────────────────────────────────────────────────────────────
   Venu du prototype « essais/proto-couleur.html ». Le noir reste, mais il cesse
   d'être plat : il est chauffé. L'orange de la braise sert ici d'accent unique —
   dans le prototype, c'était déjà l'accent de l'écran de tirage, et la seule
   couleur de cet habillage qui ne dépendait d'aucune catégorie.

   Ce qui n'est PAS porté : la lumière par catégorie — halo, dégradé, grain. Le
   système de thèmes n'a qu'un accent ; lui en donner quatre obligerait à en
   donner quatre aux trois habillages existants, qui n'en ont pas, et le
   contrôle qui exige le même jeu de variables partout le refuserait. */

:root[data-theme="braise"] {
  color-scheme: dark;

  --fond: #100b09;
  --fond-releve: #241a16;
  --fond-creux: #0a0706;

  /* Le prototype écrit le trait en rgba(246,236,228,.10). Il est posé ici en
     opaque, composité sur le fond relevé — c'est là qu'on le voit le plus. */
  --trait: #392f2b;
  --encre: #f6ece4;
  --encre-douce: #b3a094;
  /* Aucune équivalence dans le prototype, qui n'a pas de texte d'appoint. La
     valeur descend de l'encre douce vers le fond jusqu'à 3,49 pour 1 — le seuil
     du grand texte, et pas un centième de moins. */
  --encre-faible: #73655d;

  --accent: #ec7d37;
  --accent-encre: #190a03;
  --accent-haut: #ff9143;
  --accent-bas: #d9682a;
  --accent-voile: rgba(236, 125, 55, .14);

  /* Le prototype n'a ni alerte ni acquittement : il ne montre que le jeu, pas
     l'administration. Les deux sont accordés à la braise, et l'alerte est tirée
     vers le rouge pour ne pas se confondre avec l'accent orange. */
  --alerte: #e8624c;
  --alerte-encre: #f6c6bd;
  --alerte-voile: rgba(232, 98, 76, .08);
  --bien: #86b87e;
  --bien-encre: #d4e8cf;

  --lustre: rgba(255, 255, 255, .14);
  --ombre-portee: 0 6px 20px -8px rgba(255, 145, 67, .35);
  --ombre-pastille: 0 1px 3px rgba(0, 0, 0, .45);
  --voile-trait: rgba(246, 236, 228, .05);

  /* Les quatre teintes : trois intensites et le registre. Les encres
     sont calculees par outils/teintes.py, pas ecrites a la main. La
     composante RVB existe parce que color-mix() est absent d'iOS 16,
     socle de compatibilite du projet. */
  --cat-nuages: #5C93B8;
  --cat-nuages-encre: #070B0E;       /* 5.94:1 */
  --cat-nuages-douce: #182630;       /* 4.65:1 */
  --cat-nuages-rvb: 92, 147, 184;
  --cat-baiser: #D6455C;
  --cat-baiser-encre: #120507;       /* 4.63:1 */
  --cat-baiser-douce: #120507;       /* 4.63:1 */
  --cat-baiser-rvb: 214, 69, 92;
  --cat-feu: #EC7D37;
  --cat-feu-encre: #0D0702;       /* 7.21:1 */
  --cat-feu-douce: #4B2811;       /* 4.69:1 */
  --cat-feu-rvb: 236, 125, 55;
  --cat-collier: #9B6FD4;
  --cat-collier-encre: #0D0714;       /* 5.31:1 */
  --cat-collier-douce: #21162F;       /* 4.60:1 */
  --cat-collier-rvb: 155, 111, 212;

}

/* ── Velours ──────────────────────────────────────────────────────────────────
   Le noir est abandonné : le fond est une étoffe prune, profonde et saturée.

   Le cramoisi du prototype — #ac1f4d sur #7d1338, encre blanche — a dû être
   RELEVÉ. Il tenait là-bas parce qu'il n'y servait que de fond de bouton ; ici,
   « --accent » sert aussi de grand texte sur le fond, et le cramoisi d'origine
   n'y donnait que 2,24 pour 1. Ce n'est pas rattrapable en assombrissant le
   décor : même sur un noir absolu, ce cramoisi plafonne à 2,50 pour 1. Il a donc
   fallu monter la couleur elle-même, jusqu'à 3,36 pour 1. */

:root[data-theme="velours"] {
  color-scheme: dark;

  --fond: #1a0e14;
  --fond-releve: #3a1f2c;
  --fond-creux: #120910;

  --trait: #533a45;
  --encre: #f8ebef;
  --encre-douce: #c4a6b0;
  --encre-faible: #7a646c;

  --accent: #c2285d;
  --accent-encre: #fff2f6;
  --accent-haut: #d93068;
  --accent-bas: #aa2052;
  --accent-voile: rgba(194, 40, 93, .16);

  --alerte: #e8785f;
  --alerte-encre: #f7cec3;
  --alerte-voile: rgba(232, 120, 95, .08);
  --bien: #8fbd93;
  --bien-encre: #d7ead8;

  --lustre: rgba(255, 255, 255, .16);
  --ombre-portee: 0 8px 24px -10px rgba(0, 0, 0, .85);
  --ombre-pastille: 0 1px 3px rgba(0, 0, 0, .45);
  --voile-trait: rgba(248, 235, 239, .06);

  /* Les quatre teintes : trois intensites et le registre. Les encres
     sont calculees par outils/teintes.py, pas ecrites a la main. La
     composante RVB existe parce que color-mix() est absent d'iOS 16,
     socle de compatibilite du projet. */
  --cat-nuages: #4A7FA8;
  --cat-nuages-encre: #06090C;       /* 4.65:1 */
  --cat-nuages-douce: #070A0E;       /* 4.62:1 */
  --cat-nuages-rvb: 74, 127, 168;
  --cat-baiser: #D94E7C;
  --cat-baiser-encre: #13060A;       /* 5.04:1 */
  --cat-baiser-douce: #270D15;       /* 4.62:1 */
  --cat-baiser-rvb: 217, 78, 124;
  --cat-feu: #D4763F;
  --cat-feu-encre: #0F0905;       /* 6.09:1 */
  --cat-feu-douce: #382011;       /* 4.67:1 */
  --cat-feu-rvb: 212, 118, 63;
  --cat-collier: #A468C9;
  --cat-collier-encre: #0D0711;       /* 5.12:1 */
  --cat-collier-douce: #1E1225;       /* 4.62:1 */
  --cat-collier-rvb: 164, 104, 201;

}

/* ── Néon ─────────────────────────────────────────────────────────────────────
   Noir absolu et couleur en tube. Le rose du prototype passe tel quel : il est
   assez clair pour porter du texte noir ET pour se lire sur le noir, ce qui est
   rare, et ce qui n'a donc rien demandé. */

:root[data-theme="neon"] {
  color-scheme: dark;

  --fond: #050507;
  --fond-releve: #191920;
  --fond-creux: #000000;

  --trait: #39393f;
  --encre: #ffffff;
  --encre-douce: #9a9aa8;
  --encre-faible: #64646d;

  --accent: #ff4ca3;
  --accent-encre: #12000a;
  --accent-haut: #ff6ab4;
  --accent-bas: #ff2d92;
  --accent-voile: rgba(255, 76, 163, .16);

  --alerte: #ff6a4d;
  --alerte-encre: #ffc7b8;
  --alerte-voile: rgba(255, 106, 77, .1);
  --bien: #3ef2a6;
  --bien-encre: #b6f7dc;

  --lustre: rgba(255, 255, 255, .2);
  --ombre-portee: 0 6px 22px -8px rgba(255, 45, 146, .6);
  --ombre-pastille: 0 1px 3px rgba(0, 0, 0, .6);
  --voile-trait: rgba(255, 255, 255, .06);

  /* Les quatre teintes : trois intensites et le registre. Les encres
     sont calculees par outils/teintes.py, pas ecrites a la main. La
     composante RVB existe parce que color-mix() est absent d'iOS 16,
     socle de compatibilite du projet. */
  --cat-nuages: #2BF0FF;
  --cat-nuages-encre: #064044;       /* 8.23:1 */
  --cat-nuages-douce: #0F686F;       /* 4.65:1 */
  --cat-nuages-rvb: 43, 240, 255;
  --cat-baiser: #FF4CA3;
  --cat-baiser-encre: #17020C;       /* 6.49:1 */
  --cat-baiser-douce: #4F1430;       /* 4.62:1 */
  --cat-baiser-rvb: 255, 76, 163;
  --cat-feu: #D9FF2B;
  --cat-feu-encre: #3D4906;       /* 8.49:1 */
  --cat-feu-douce: #61730F;       /* 4.61:1 */
  --cat-feu-rvb: 217, 255, 43;
  --cat-collier: #C77DFF;
  --cat-collier-encre: #13021F;       /* 7.39:1 */
  --cat-collier-douce: #45245E;       /* 4.68:1 */
  --cat-collier-rvb: 199, 125, 255;

}

/* ── Aplat ────────────────────────────────────────────────────────────────────
   La couleur n'éclaire pas, elle occupe : encre presque noire sur aplat plein.
   Le jaune du prototype passe tel quel — c'est la couleur la plus lisible des
   sept, et de loin.

   Ce qui n'est PAS porté : les angles droits et les capitales grasses. Un thème
   ne change ici que les COULEURS, jamais la forme ; c'est la règle écrite en
   tête de ce fichier, et elle pèse plus lourd qu'un habillage complet. */

:root[data-theme="aplat"] {
  color-scheme: dark;

  --fond: #111318;
  --fond-releve: #282c34;
  --fond-creux: #0a0c0f;

  --trait: #4a4e54;
  --encre: #ffffff;
  --encre-douce: #a9aeb8;
  --encre-faible: #676b72;

  --accent: #ffd900;
  --accent-encre: #101216;
  --accent-haut: #ffe600;
  --accent-bas: #ffcc00;
  --accent-voile: rgba(255, 217, 0, .14);

  --alerte: #ff6f5c;
  --alerte-encre: #ffc8c0;
  --alerte-voile: rgba(255, 111, 92, .1);
  --bien: #5fd79a;
  --bien-encre: #c2eeda;

  --lustre: rgba(255, 255, 255, .18);
  --ombre-portee: 0 4px 0 0 rgba(0, 0, 0, .55);
  --ombre-pastille: 0 1px 2px rgba(0, 0, 0, .5);
  --voile-trait: rgba(255, 255, 255, .07);

  /* Les quatre teintes : trois intensites et le registre. Les encres
     sont calculees par outils/teintes.py, pas ecrites a la main. La
     composante RVB existe parce que color-mix() est absent d'iOS 16,
     socle de compatibilite du projet. */
  --cat-nuages: #2E8FE0;
  --cat-nuages-encre: #040B10;       /* 5.77:1 */
  --cat-nuages-douce: #0C2438;       /* 4.62:1 */
  --cat-nuages-rvb: 46, 143, 224;
  --cat-baiser: #FF5C6E;
  --cat-baiser-encre: #1C0205;       /* 6.61:1 */
  --cat-baiser-douce: #52181E;       /* 4.65:1 */
  --cat-baiser-rvb: 255, 92, 110;
  --cat-feu: #FFD900;
  --cat-feu-encre: #423905;       /* 8.34:1 */
  --cat-feu-douce: #6D5E04;       /* 4.67:1 */
  --cat-feu-rvb: 255, 217, 0;
  --cat-collier: #9B5CFF;
  --cat-collier-encre: #0E0321;       /* 5.10:1 */
  --cat-collier-douce: #1C0C37;       /* 4.64:1 */
  --cat-collier-rvb: 155, 92, 255;

}

/* ── Remise à zéro, au strict nécessaire ─────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 16px/1.55 var(--sans);
}

/* Ce qui reçoit le focus au clavier le montre, partout et de la même façon. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Ce qui ne change pas d'un thème à l'autre ────────────────────────────── */

:root {
  --rayon: 0.6rem;

  /* Le gage se lit en romain : c'est le texte qu'on annonce à voix haute.
     Le reste de l'interface est en linéale, pour ne pas lui voler la vedette. */
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}