/* ───────────────────────────────────────────────────────────────────────────
   pages.css — feuille de style des pages de contenu (/simulateur-pea, …)

   Volontairement AUTONOME et légère : ces pages sont des points d'entrée depuis
   les moteurs de recherche, leur vitesse de rendu compte. Elles ne chargent donc
   ni style.css (5 500 lignes, pensé pour l'application) ni aucun JavaScript.
   Mêmes jetons de couleur que le jeu, pour que le passage page → simulateur
   ne donne pas l'impression de changer de site.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #080a0f;
  --bg2: #0e1117;
  --bg3: #161b26;
  --border: rgba(255, 255, 255, 0.08);
  --border-hi: rgba(255, 255, 255, 0.14);
  --text: #f0f2fa;
  --text-mid: #8b93b8;
  --text-dim: #5a6280;
  --gold: #f5a623;
  --cyan: #38bdf8;
  --green: #22c55e;
  --red: #ef4444;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* ── Barre de navigation ── */
.nav {
  border-bottom: 1px solid var(--border);
  background: rgba(8, 10, 15, 0.9);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 10;
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.nav a.logo { color: var(--text); text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.nav a.logo span { color: var(--gold); }
.nav .nav-cta {
  background: var(--gold); color: #06070b; text-decoration: none;
  font-weight: 700; font-size: 14px; padding: 9px 18px; border-radius: 999px;
}

/* ── Titres et texte ── */
h1 {
  font-size: clamp(30px, 5.2vw, 44px); line-height: 1.14; letter-spacing: -0.03em;
  font-weight: 800; margin: 44px 0 16px;
}
h2 {
  font-size: clamp(23px, 3.4vw, 29px); line-height: 1.25; letter-spacing: -0.02em;
  font-weight: 700; margin: 52px 0 14px; scroll-margin-top: 80px;
}
h3 { font-size: 19px; font-weight: 700; margin: 30px 0 8px; letter-spacing: -0.01em; }
p { margin: 0 0 16px; color: rgba(240, 242, 250, 0.86); }
.chapo { font-size: 19px; color: var(--text-mid); margin-bottom: 30px; }
a { color: var(--cyan); }
strong { color: var(--text); font-weight: 700; }
ul, ol { padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 9px; color: rgba(240, 242, 250, 0.86); }

/* ── Encadrés ── */
.card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 24px; margin: 26px 0;
}
.card-titre { font-weight: 700; margin-bottom: 10px; font-size: 17px; }
.note { border-left: 3px solid var(--cyan); }
.attention { border-left: 3px solid var(--gold); }

/* ── Tableaux ── */
.table-wrap { overflow-x: auto; margin: 26px 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-mid); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
td { color: rgba(240, 242, 250, 0.86); }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Appel à l'action ── */
.cta {
  background: linear-gradient(180deg, var(--bg3), var(--bg2));
  border: 1px solid var(--border-hi); border-radius: 20px;
  padding: 32px 28px; margin: 44px 0; text-align: center;
}
.cta h2 { margin: 0 0 10px; font-size: 25px; }
.cta p { color: var(--text-mid); margin-bottom: 22px; }
.btn {
  display: inline-block; background: var(--gold); color: #06070b;
  text-decoration: none; font-weight: 800; font-size: 17px;
  padding: 15px 32px; border-radius: 999px;
}
.btn-sec {
  display: inline-block; margin-left: 10px; color: var(--text);
  text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 15px 22px; border-radius: 999px; border: 1px solid var(--border-hi);
}
@media (max-width: 560px) {
  .btn, .btn-sec { display: block; margin: 10px 0 0; }
}

/* ── Pied de page ── */
.foot {
  border-top: 1px solid var(--border); margin-top: 60px; padding: 30px 0 46px;
  color: var(--text-dim); font-size: 14px;
}
.foot a { color: var(--text-mid); text-decoration: none; margin-right: 18px; }
.foot .avert { margin-top: 14px; font-size: 13px; line-height: 1.5; }

/* ── Fil d'Ariane ── */
.fil { font-size: 13px; color: var(--text-dim); margin-top: 26px; }
.fil a { color: var(--text-dim); text-decoration: none; }