/*
 * La feuille commune des pages ecrites a la main : l'accueil et le support.
 *
 * Elle est **du meme domaine**, donc elle ne trahit personne — la regle
 * « aucune ressource externe » vise les serveurs des autres, pas les nos.
 * Ce qu'elle evite, c'est que deux pages peintes a la main divergent : elles
 * partagent le papier, l'encre et la trame, et une retouche les touche
 * ensemble.
 *
 * Les pages legales, elles, gardent leur style en clair dans le fichier :
 * une politique de confidentialite doit s'afficher meme quand plus rien
 * d'autre n'est joignable.
 *
 * Les teintes viennent de `src/art/teintes.ts` : le meme papier washi, la
 * meme encre prune, le meme or. Le site et le jeu doivent avoir ete peints
 * par la meme main.
 */

:root {
  --papier: #f7e6c4;
  --papier-clair: #fdf5e4;
  --encre: #2e2536;
  --doux: #6d5f75;
  --trait: #d9c49b;
  --indigo: #46688f;
  --or: #b8862a;
  --vermillon: #b75248;
  --mousse: #5d8a4c;
  --ombre: rgba(46, 37, 54, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #241b2f;
    --papier-clair: #2f2540;
    --encre: #ece3d6;
    --doux: #a295ab;
    --trait: #453a52;
    --indigo: #93b4dc;
    --or: #e0b45e;
    --vermillon: #e08573;
    --mousse: #8fbd7e;
    --ombre: rgba(0, 0, 0, 0.45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* La trame du terrain, tres pale : c'est la grille sur laquelle on pose les
     tuiles dans le jeu. Elle donne le grain sans rien telecharger. */
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--encre) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--encre) 4%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
}

.dedans { max-width: 60rem; margin: 0 auto; padding: 0 1.5rem; }
.etroit { max-width: 40rem; }

h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.1rem, 6vw, 3.2rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: .8rem; }

.surtitre {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--doux);
  margin: 0 0 1rem;
}

.chapo { color: var(--doux); max-width: 38rem; margin: 0 0 2rem; }

section { margin-top: 5rem; }

/* Le panneau du jeu : aplat clair, contour d'encre, ombre franche. */
.panneau {
  border: 3px solid var(--encre);
  background: var(--papier-clair);
  box-shadow: 5px 5px 0 var(--ombre);
  padding: 1.3rem 1.4rem 1.5rem;
}

a { color: var(--indigo); }
a:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

code {
  background: color-mix(in srgb, var(--encre) 8%, transparent);
  padding: .1em .35em;
  border-radius: .25em;
  font-size: .9em;
}

footer {
  margin-top: 6rem;
  border-top: 3px solid var(--encre);
  padding: 2rem 0 4rem;
  font-size: .93rem;
  color: var(--doux);
}
.liens { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.2rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ------------------------------------------------------------- les langues */

/*
 * Le passage d'une langue a l'autre, en haut de chaque page.
 *
 * Deux liens, pas un menu : il n'y a que deux langues sur ce site, et un
 * menu deroulant pour deux choix demande deux gestes la ou un seul suffit.
 * La langue courante reste affichee, en gras et sans lien — on doit voir ou
 * l'on est autant que ce vers quoi l'on peut aller.
 */
.langues {
  display: flex;
  gap: .6rem;
  align-items: baseline;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding-top: 1.6rem;
  color: var(--doux);
}
.langues b { color: var(--encre); font-weight: 600; }
.langues span { color: var(--trait); }