/* Page « Règles » — pas à pas, sans JavaScript.
   Reprend la DA du jeu : marine profond, crème, or, typos officielles auto-hébergées.
   ⚠ Aucune image de carte : la page explique les règles, elle n'expose pas l'œuvre. */

@font-face { font-family: 'Trajan';  src: url('/fonts/trajan.woff2')  format('woff2'); font-display: swap; }
@font-face { font-family: 'Faculty'; src: url('/fonts/faculty.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Bebas';   src: url('/fonts/bebas.woff2')   format('woff2'); font-display: swap; }

:root {
  --navy-950: #061b29; --navy-900: #08243a; --navy-850: #0b2c44;
  --cream: #F4E7DD; --cream-70: rgba(244,231,221,.72); --cream-45: rgba(244,231,221,.45);
  --gold: #CBB9A3; --gold-bright: #E4CFA8; --line: #1c465f;
  --power: #E23B3B; --support: #22C0DD; --target: #46E05A;
  --display: 'Trajan', Optima, Georgia, serif;
  --sans: 'Faculty', 'Segoe UI', system-ui, sans-serif;
  --num: 'Bebas', 'Faculty', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--navy-950); color: var(--cream);
  font: 16px/1.65 var(--sans); padding: 0 1rem 4rem;
}
main { max-width: 52rem; margin: 0 auto; }
a { color: var(--gold); }
a:hover { color: var(--gold-bright); }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.tete { text-align: center; padding: clamp(2rem, 7vw, 4.5rem) 0 1.5rem; }
.tete h1 {
  font-family: var(--display); font-size: clamp(1.7rem, 5.5vw, 3rem); line-height: 1.1;
  letter-spacing: .06em; margin: 0 0 .6rem; text-transform: uppercase;
}
.tete p { color: var(--cream-70); max-width: 34rem; margin: 0 auto; }
.fil { text-align: center; font-size: .9rem; margin-bottom: 1rem; }
.fil a { margin: 0 .6rem; }

/* ── Sommaire : on doit pouvoir sauter à l'étape qu'on cherche ────────────── */
.sommaire { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; margin: 2rem 0; }
.sommaire h2 { font-family: var(--display); font-size: .95rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .6rem; }
.sommaire ol { margin: 0; padding-left: 1.3rem; columns: 2; column-gap: 2rem; }
.sommaire li { margin: .18rem 0; break-inside: avoid; }
@media (max-width: 34rem) { .sommaire ol { columns: 1; } }

/* ── Une étape ───────────────────────────────────────────────────────────── */
.etape { margin: 3rem 0; scroll-margin-top: 1rem; }
.etape > h2 {
  font-family: var(--display); font-size: clamp(1.15rem, 3.4vw, 1.5rem); letter-spacing: .05em;
  text-transform: uppercase; margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .7rem;
}
.etape > h2 .n {
  font-family: var(--num); font-size: 1.5em; color: var(--gold); line-height: 1;
  min-width: 1.4em; text-align: right;
}
.etape > h2 + .chapeau { color: var(--cream-70); margin: 0 0 1rem 3rem; font-size: 1.02rem; }
@media (max-width: 34rem) { .etape > h2 + .chapeau { margin-left: 0; } }
.etape h3 { font-size: 1rem; color: var(--gold); margin: 1.6rem 0 .3rem; }
.etape ul, .etape ol { padding-left: 1.25rem; }
.etape li { margin: .35rem 0; }

/* ── Encadré « texte officiel » : ce qui est cité mot pour mot ────────────── */
.officiel {
  border-left: 3px solid var(--gold); background: rgba(203,185,163,.07);
  border-radius: 0 8px 8px 0; padding: .8rem 1rem; margin: 1rem 0;
}
.officiel p { margin: 0; }
.officiel + .officiel { margin-top: .5rem; }

/* ── Encadré « attention, ce n'est pas officiel » ─────────────────────────── */
.deduit {
  border: 1px dashed var(--cream-45); border-radius: 8px; padding: .8rem 1rem; margin: 1rem 0;
  background: rgba(244,231,221,.04); font-size: .95rem; color: var(--cream-70);
}
.deduit b { color: var(--cream); }

/* ── Chiffres saillants ──────────────────────────────────────────────────── */
.chiffres { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.chiffres li {
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .9rem; min-width: 7.5rem;
  background: var(--navy-900);
}
.chiffres b { display: block; font-family: var(--num); font-size: 1.7rem; color: var(--gold); line-height: 1; }
.chiffres span { font-size: .84rem; color: var(--cream-70); }

/* ── L'arène, dessinée en CSS (aucune image) ──────────────────────────────── */
.arene { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin: 1.4rem 0;
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); }
.camp { margin: .5rem 0; }
.camp-nom { font-family: var(--display); font-size: .74rem; letter-spacing: .14em; color: var(--cream-45);
  text-transform: uppercase; margin: 0 0 .35rem; }
.rangee { display: grid; grid-template-columns: 5.2rem repeat(3, 1fr); gap: .4rem; align-items: stretch; }
.rangee + .rangee { margin-top: .4rem; }
.rangee .lbl { font-size: .74rem; color: var(--cream-45); align-self: center; text-align: right;
  padding-right: .3rem; letter-spacing: .04em; }
.case {
  border: 1px solid var(--line); border-radius: 6px; min-height: 2.9rem;
  background: rgba(244,231,221,.045); display: grid; place-items: center;
  font-size: .74rem; color: var(--cream-45);
}
.case.env { background: rgba(203,185,163,.12); border-color: var(--gold); color: var(--gold); }
.case.piege { min-height: 1.5rem; background: rgba(34,192,221,.10); border-color: #2b6d84; color: #9fdcec; }
.trait-central { height: 1px; background: var(--line); margin: 1rem 0; }

/* ── La séquence d'attaque ───────────────────────────────────────────────── */
.frise { list-style: none; padding: 0; margin: 1.2rem 0; counter-reset: pas; }
.frise > li {
  position: relative; padding: .9rem 1rem .9rem 3.4rem; margin: .5rem 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--navy-900);
}
.frise > li::before {
  counter-increment: pas; content: counter(pas);
  position: absolute; left: .85rem; top: .8rem;
  font-family: var(--num); font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.frise b { display: block; color: var(--cream); margin-bottom: .15rem; }
.frise .fenetre { display: inline-block; margin-top: .4rem; font-size: .86rem; color: var(--support); }

/* ── Mots-clés ───────────────────────────────────────────────────────────── */
.kw { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: .55rem; }
.kw li { border: 1px solid var(--line); border-radius: 9px; padding: .7rem .9rem; background: var(--navy-900); }
.kw b { color: var(--gold); font-family: var(--display); letter-spacing: .03em; }
.kw span { display: block; font-size: .93rem; color: var(--cream-70); margin-top: .15rem; }

/* ── L'exemple filé ──────────────────────────────────────────────────────── */
.duel { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.2rem; background: var(--navy-900); }
.duel p { margin: .55rem 0; }
.compte { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 .2rem; }
.compte div { flex: 1 1 12rem; border: 1px solid var(--line); border-radius: 9px; padding: .7rem .9rem; }
.compte .tot { font-family: var(--num); font-size: 2rem; line-height: 1; }
.compte .gagne { border-color: var(--target); }
.compte .gagne .tot { color: var(--target); }
.compte .perd .tot { color: var(--power); }
.compte small { display: block; color: var(--cream-45); font-size: .8rem; }

/* ── Pied ────────────────────────────────────────────────────────────────── */
.pied { max-width: 52rem; margin: 3.5rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--line);
  color: var(--cream-45); font-size: .88rem; }
.pied a { margin-right: 1rem; display: inline-block; }
.retour-haut { display: inline-block; margin-top: 1.5rem; font-size: .88rem; }

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