/* ===================================================================
   Le style des PAGES PUBLIQUES — règles, guide, FAQ.
   ===================================================================
   Volontairement séparé du bundle de l'application : ces pages sont du
   HTML servi tel quel, sans une ligne de JavaScript. Un robot les lit
   immédiatement, un visiteur les voit avant même que React n'existe, et
   elles restent lisibles si le jeu tombe.

   Une seule feuille pour les trois, plutôt que du style en ligne
   recopié : le navigateur la met en cache une fois pour toutes, et une
   correction de contraste se fait à un seul endroit.

   Les couleurs sont celles de l'application, recopiées ici en dur. C'est une
   duplication assumée : ces pages ne doivent dépendre de rien. Elles étaient
   en revanche DÉSALIGNÉES — quatre valeurs de gris différaient de celles du
   jeu, et l'accent y était un rose plat quand l'application affichait un
   dégradé. Elles suivent maintenant la même palette, à la virgule près.

   DEUX ROUGES, ET C'EST NÉCESSAIRE : le rouge de la marque ne fait que 3,98
   de contraste sur le fond noir, sous les 4,5 exigés pour du texte courant.
   Il reste donc réservé aux aplats — le bouton, la puce des listes — et le
   texte, liens compris, prend sa version éclaircie. */

:root {
  --bg: #0D0D0F;
  --txt: #F3F5F9;
  --txt-2: #98A1B2;
  --txt-3: #727B86;
  --rouge:     #E30613;   /* aplats : 4,88 avec du blanc dessus */
  --rouge-txt: #FF2A38;   /* texte : 5,21 sur le fond */
  --elev: #131317;
  --line: #26262B;
}

html { background: var(--bg); color-scheme: dark; }

body {
  margin: 0;
  padding: 0 24px 72px;
  color: var(--txt);
  background: var(--bg);
  font: 400 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* 34em : la largeur au-delà de laquelle l'œil perd la ligne suivante. */
.page { max-width: 34em; margin: 0 auto; }

header.chapeau { padding: 40px 0 8px; }

/* Le logotype est une image : le lettering est un dessin, aucune police ne
   le reproduit. Le nom reste annoncé par le `.sr-only` qu'elle contient.
   Ces pages sont toujours en sombre, donc une seule variante suffit. */
.marque {
  display: block; width: 132px; aspect-ratio: 780 / 124;
  margin-bottom: 28px;
  background: url(/logo-sombre.png) left center / contain no-repeat;
}

/* Lu par les lecteurs d'écran, invisible à l'oeil. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

h1 {
  margin: 0 0 10px; font-size: clamp(28px, 6vw, 38px);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
}

.intro { margin: 0 0 8px; color: var(--txt-2); font-size: 17px; }

h2 {
  margin: 40px 0 12px; font-size: 21px; font-weight: 750;
  letter-spacing: -.015em; scroll-margin-top: 20px;
}

h3 { margin: 26px 0 6px; font-size: 16.5px; font-weight: 700; }

p { margin: 0 0 14px; color: var(--txt-2); }
strong { color: var(--txt); font-weight: 650; }

ul, ol { margin: 0 0 16px; padding-left: 0; color: var(--txt-2); }
ul { list-style: none; }
ul li { position: relative; padding-left: 18px; margin-bottom: 7px; }
ul li::before {
  content: "—"; position: absolute; left: 0; color: var(--rouge);
}
ol { padding-left: 22px; }
ol li { margin-bottom: 7px; }

a { color: var(--rouge-txt); text-decoration: none; }
a:hover { text-decoration: underline; }

/* L'encadré : un fait chiffré ou un rendez-vous, ce qu'on revient chercher. */
.repere {
  margin: 18px 0; padding: 14px 16px;
  background: var(--elev); border: 1px solid var(--line); border-radius: 14px;
  color: var(--txt-2); font-size: 14.5px; line-height: 1.55;
}
.repere strong { color: var(--txt); }

table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--txt-3); font-weight: 650; font-size: 12px;
     text-transform: uppercase; letter-spacing: .07em; }
td { color: var(--txt-2); }
td:first-child { color: var(--txt); font-weight: 600; }
/* Un tableau ne doit jamais faire défiler la PAGE de travers. */
.tableau { overflow-x: auto; }

.cta {
  display: inline-block; margin: 12px 0 8px; padding: 12px 22px;
  background: var(--rouge); color: #fff; border-radius: 999px;
  font-weight: 700; font-size: 15px;
}
.cta:hover { text-decoration: none; opacity: .92; }

footer {
  max-width: 34em; margin: 56px auto 0; padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--txt-3); font-size: 13.5px;
}
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
footer a { color: var(--txt-2); }