/* ═══════════════════════════════════════════════════════════════════════════
   Feuille commune aux pages de contenu du site 421
   ---------------------------------------------------------------------------
   Partagée par /regles-du-421/, /combinaisons-421/, /variantes-421/,
   /lexique-421/ et /histoire-du-421/.

   ⚠️ Fichier SÉPARÉ, et pas du CSS en ligne recopié dans chaque page. Cinq
   copies d'une même feuille finissent toujours par diverger, et c'est le genre
   d'écart qu'on ne voit qu'en comparant deux pages côte à côte — donc jamais.
   Une seule requête, mise en cache dès la deuxième page.

   Le CSP autorise `style-src 'self'` : ce fichier passe, un CDN ne passerait pas.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0d1821;
  --or: #f4d03f;
  --bronze: #d4a574;
  --texte: #f2eee4;
  --sourdine: #a6adb6;
  --trait: rgba(212, 165, 116, 0.22);
  --vert: #5fb389;
  --rouge: #e0736c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(to bottom, #0d1821 0%, #1a2332 100%);
  color: var(--texte);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.page { max-width: 760px; margin: 0 auto; padding: 1rem 1.15rem 4rem; }

/* ---------- Navigation entre les pages ---------- */
/* ⚠️ Elle est sur TOUTES les pages, et ce n'est pas décoratif : une page
   isolée qui ne renvoie qu'à l'accueil se lit comme une page orpheline. Un
   site, ce sont des pages qui se répondent. */
.nav {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
  padding: .8rem 0 1.2rem;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 1.6rem;
  font-size: .87rem;
}
.nav a { color: var(--sourdine); text-decoration: none; padding: .2rem 0; }
.nav a:hover { color: var(--or); }
.nav a[aria-current="page"] { color: var(--or); font-weight: 600; }
.nav .nav__jeu { margin-right: auto; color: var(--bronze); font-weight: 600; }

/* ---------- Texte ---------- */

h1 {
  font-size: clamp(1.75rem, 6vw, 2.6rem);
  line-height: 1.15; margin: .2rem 0 .6rem;
  letter-spacing: -.02em; text-wrap: balance;
}
.chapeau { font-size: 1.08rem; color: var(--sourdine); margin: 0 0 2rem; max-width: 60ch; }
h2 {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  margin: 2.6rem 0 .7rem; line-height: 1.25;
  color: var(--or); text-wrap: balance;
}
h3 { font-size: 1.03rem; margin: 1.7rem 0 .4rem; color: var(--bronze); }
p { margin: 0 0 1.05rem; }
a { color: var(--bronze); }
ul, ol { margin: 0 0 1.05rem; padding-left: 1.25rem; }
li { margin-bottom: .45rem; }
strong { color: #fff; }
dl { margin: 0 0 1.05rem; }
dt { color: var(--bronze); font-weight: 600; margin-top: 1.1rem; }
dd { margin: .2rem 0 0; }

/* ---------- Encadrés ---------- */

.encadre {
  border-left: 3px solid var(--or);
  background: rgba(244, 208, 63, .06);
  padding: .9rem 1.1rem; margin: 1.6rem 0;
  border-radius: 0 10px 10px 0;
}
.encadre p:last-child { margin-bottom: 0; }
.encadre--attention { border-left-color: var(--rouge); background: rgba(224, 115, 108, .08); }
.encadre--mesure { border-left-color: var(--vert); background: rgba(95, 179, 137, .07); }

/* ---------- Tableaux ---------- */
/* Le conteneur défile, jamais la page : sur téléphone un tableau large
   ferait glisser tout le document de côté. */
.tableau { overflow-x: auto; margin: 1.4rem 0; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .95rem; }
caption { text-align: left; color: var(--sourdine); font-size: .85rem; padding-bottom: .6rem; }
th, td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
thead th { color: var(--bronze); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
td.des, td.nb { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
td.nb { text-align: right; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }

/* ---------- Appel à jouer ---------- */

.jouer {
  display: block; margin: 2.5rem 0 1rem; padding: 1.1rem 1.3rem;
  background: linear-gradient(135deg, rgba(244,208,63,.14), rgba(212,165,116,.08));
  border: 1px solid var(--trait); border-radius: 14px;
  color: var(--texte); text-decoration: none;
}
.jouer strong { display: block; color: var(--or); font-size: 1.1rem; margin-bottom: .2rem; }
.jouer span { color: var(--sourdine); font-size: .92rem; }
.jouer:hover { border-color: var(--or); }

/* ---------- Suite de lecture ---------- */

.suite { margin: 2.2rem 0 0; padding: 1.1rem 1.2rem; border: 1px solid var(--trait); border-radius: 14px; }
.suite h2 { margin: 0 0 .6rem; font-size: 1rem; }
.suite ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Pied ---------- */

footer {
  margin-top: 3rem; padding-top: 1.4rem;
  border-top: 1px solid var(--trait);
  color: var(--sourdine); font-size: .85rem;
}
footer a { margin-right: 1rem; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }