/* Alpage · matières. Poser data-subj sur <body> (jeu) ou sur une carte.
   Même rampe pour toutes : seule la teinte (--h) change.
   Texte sur fond matière : toujours --subj-ink, jamais blanc. */
[data-subj] {
  --subj: oklch(0.87 0.07 var(--h));       /* fond des cartes */
  --subj-vif: oklch(0.80 0.09 var(--h));   /* bords, barres, sélection */
  --subj-tint: oklch(0.95 0.03 var(--h));  /* fonds doux, puces */
  --subj-edge: oklch(0.76 0.08 var(--h));  /* marche sous la carte */
  --subj-ink: oklch(0.42 0.10 var(--h));   /* texte, icônes */
  --subj-deep: oklch(0.32 0.06 var(--h));  /* marche en mode sombre */
  --subj-text: var(--subj-ink);            /* texte posé directement sur la surface de la page (pas sur un fond matière) */
}
[data-subj="fr"] { --h: 355; --mascot: url("../../assets/mascottes/plume.png");  --mascot-head: url("../../assets/mascottes/plume-tete.png"); }
[data-subj="de"] { --h: 295; --mascot: url("../../assets/mascottes/bernie.png"); --mascot-head: url("../../assets/mascottes/bernie-tete.png"); }
[data-subj="ma"] { --h: 250; --mascot: url("../../assets/mascottes/max.png");    --mascot-head: url("../../assets/mascottes/max-tete.png"); }
[data-subj="en"] { --h: 200; --mascot: url("../../assets/mascottes/wooly.png");  --mascot-head: url("../../assets/mascottes/wooly-tete.png"); }
[data-subj="hg"] { --h: 60;  --mascot: url("../../assets/mascottes/ours.png");   --mascot-head: url("../../assets/mascottes/ours-tete.png"); }
[data-subj="sc"] { --h: 115; --mascot: url("../../assets/mascottes/marie.png");  --mascot-head: url("../../assets/mascottes/marie-tete.png"); }

[data-theme="dark"] [data-subj], [data-theme="dark"][data-subj] { --subj-edge: var(--subj-deep); --subj-text: oklch(0.86 0.09 var(--h)); }