:root {
  --ardoise: #2b3137;
  --ardoise-sombre: #1d2125;
  --craie: #ece9e1;
  --craie-pale: #a9b0b4;
  --alerte-craie: #ff9478;
  --papier: #2b2826;
  --papier-clair: #34302d;
  --encre: #efe6d2;
  --crayon: #b4ad9d;
  --crayon-clair: #6f7882;
  --rouge: #d9482f;
  --or: #d9b66c;
  --blanc-gel: #fff8e8;
  --jaune: #e8b730;
  --vert: #4f9a62;
  --bleu: #86a8f0;
  --rose: #f0a8b8;
  --menthe: #a9d8c4;
  --kraft: #7a5c3c;
  --alerte: #ff9478;
  --manuscrit: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --titre: 'Caveat Brush', 'Caveat', cursive;
  --texte: 'Lora', Georgia, 'Times New Roman', serif;
  --bruit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .86 0 0 0 0 .8 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --bruit-ardoise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.012 .04' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .92 0 0 0 0 .92 0 0 0 0 .9 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8 0 0 0 0 .84 0 0 0 0 .88 0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --ombre-feuille: 0 1px 1px rgba(0, 0, 0, .6), 0 8px 16px -6px rgba(0, 0, 0, .7), 0 22px 36px -16px rgba(0, 0, 0, .8);
  --trait-main: 255px 14px 225px 14px / 14px 225px 14px 255px;
  --largeur-contenu: 62rem;
  --espace-1: .5rem;
  --espace-2: 1rem;
  --espace-3: 1.6rem;
  --espace-4: 2.6rem;
  color-scheme: dark;
}

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

html { background: var(--ardoise); }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: var(--texte);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--craie);
  background: var(--bruit-ardoise), radial-gradient(ellipse at 50% 35%, var(--ardoise) 40%, var(--ardoise-sombre) 100%) fixed;
  background-color: var(--ardoise);
}

#decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

body.decor-actif { background: transparent; }

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-family: var(--titre); font-weight: 400; line-height: 1.1; color: inherit; }
h1 { font-size: 2.6rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.35rem; }
p { margin: 0 0 var(--espace-1); }
a { color: #9cbcff; }

::selection { background: var(--jaune); color: #1d2125; }

.visuellement-cache { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

main {
  position: relative;
  z-index: 2;
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: var(--espace-3) var(--espace-2) var(--espace-4);
}

.pile { display: flex; flex-direction: column; gap: var(--espace-1); }
.rangee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-1); }
.grille { display: grid; gap: var(--espace-3); grid-template-columns: repeat(auto-fill, minmax(var(--grille-min, 12rem), 1fr)); }

.hint { margin: 0 0 var(--espace-1); font-family: var(--manuscrit); font-size: 1.3rem; line-height: 1.2; color: var(--craie-pale); }
.hint a { color: var(--alerte-craie); text-decoration: underline wavy; text-underline-offset: 3px; }
.error { margin: 0 0 var(--espace-2); font-family: var(--manuscrit); font-size: 1.35rem; color: var(--alerte-craie); }
.error:empty { display: none; }
.vide { padding: var(--espace-4) var(--espace-2); text-align: center; font-family: var(--manuscrit); font-size: 1.5rem; color: var(--craie-pale); }

.decor-absent { background: var(--bruit-ardoise), var(--ardoise); }