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

   Toutes les couleurs du projet sont ici, et nulle part ailleurs. C'est ce qui
   permet d'en poser trois 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.

   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);
}

/* ── 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);
}

/* ── 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);
}

/* ── 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;
}