/* The Rise of the Werebeast — d'après la planche AIDesigner « gaming » (affinage Ultradesign de la planche n°1,
   7 novembre 2026). */

@font-face {
  font-family: "Lexend";
  src: url("fonts/lexend.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fond: #0A0A0C;
  --surface: #141419;
  --surface-2: #1A1A22;
  --rouge: #B91C1C;
  --rouge-vif: #DC2626;
  --rouge-lueur: #EF4444;
  --rouge-sombre: #7F1D1D;
  --braise: #EA580C;
  --argent: #94A3B8;
  --texte: #E0E0E6;
  --doux: #9CA3AF;
  --lueur-rouge: 0 0 20px -5px rgba(185, 28, 28, .5);
  --lueur-argent: 0 0 20px -5px rgba(148, 163, 184, .3);
  --biais: 4vw;
  --espace: 128px;       /* entre deux blocs */
  --espace-titre: 72px;  /* sous le titre d'une section */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Lexend", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--rouge); color: #fff; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--texte); }
h1, h2, h3, h4, p, ul, ol { margin: 0; }

.ico { width: 1em; height: 1em; flex: none; fill: currentColor; }
.pixel { image-rendering: pixelated; }

/* ---------- Navigation ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 16px 0;
  border-bottom: 1px solid transparent;
  transition: background .3s, padding .3s, border-color .3s;
}
.nav.pleine, .nav.toujours {
  background: rgba(10, 10, 12, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, .05);
  padding: 12px 0;
}
.nav-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.marque img { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(185, 28, 28, .8)); }
.liens {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.liens a { color: var(--doux); text-decoration: none; transition: color .2s; }
.liens a:hover { color: #fff; }
.liens a.langue {
  color: var(--texte);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  padding: 4px 10px;
  letter-spacing: .1em;
}
.liens a.langue:hover { border-color: var(--rouge-lueur); color: #fff; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 4px;
  background: var(--rouge);
  border-bottom: 4px solid var(--rouge-sombre);
  color: #fff;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .1s, transform .1s, border-color .1s, box-shadow .2s;
}
.btn .ico { font-size: 20px; }
.btn:hover { background: var(--rouge-vif); border-bottom-color: #991B1B; transform: translateY(-1px); box-shadow: var(--lueur-rouge); }
.btn:active { transform: translateY(3px); border-bottom-width: 0; margin-bottom: 4px; }
.btn-creux {
  background: transparent;
  border: 2px solid #4B5563;
  border-bottom: 4px solid #374151;
  color: var(--texte);
}
.btn-creux:hover { background: rgba(75, 85, 99, .1); border-color: #6B7280; border-bottom-color: #4B5563; box-shadow: none; }

/* ---------- Ouverture ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(600px, 80vh, 800px);
  display: flex;
  align-items: flex-end;  /* l'espace en trop passe au-dessus : l'écart avec le bloc suivant reste fixe */
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.hero::after {
  /* la Porte du Gouffre, à peine visible derrière la fumée */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(to bottom, rgba(10, 10, 12, .55), rgba(10, 10, 12, .92)), url("img/fond.jpg") center / cover no-repeat;
  opacity: .5;
}
.hero-in {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 24px calc((var(--espace) + var(--biais)) / 2);  /* le biais au milieu de l'espace */
  display: flex;
  align-items: center;
  gap: 48px;
}
.hero-txt { flex: 1; min-width: 0; }
.badge {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid rgba(185, 28, 28, .3);
  background: rgba(185, 28, 28, .1);
  color: var(--rouge-lueur);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: 72px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 24px;
  text-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.hero h1 span {
  background: linear-gradient(to right, var(--rouge), var(--braise));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.hero .accroche { font-size: 22px; font-weight: 300; color: var(--doux); max-width: 576px; margin-bottom: 40px; }
.chiffres { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; }
.chiffres div { display: flex; flex-direction: column; }
.chiffres strong { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; }
.chiffres span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); margin-top: 6px; }
.hero-bete {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-bete::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: 90%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185, 28, 28, .35) 0%, rgba(185, 28, 28, .08) 45%, transparent 70%);
  z-index: -1;
}
.hero-bete img {
  width: min(100%, 600px);
  filter: drop-shadow(0 0 24px rgba(239, 68, 68, .35)) drop-shadow(0 30px 30px rgba(0, 0, 0, .6));
  animation: souffle 5s ease-in-out infinite;
}
@keyframes souffle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Contenu ---------- */

main {
  position: relative;
  z-index: 20;
  background: var(--fond);
  clip-path: polygon(0 0, 100% var(--biais), 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--biais));
  padding-top: calc((var(--espace) + var(--biais)) / 2);
}
.bloc { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.bloc + .bloc { margin-top: var(--espace); }

/* Le launcher */
.carte-launcher {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);
}
.carte-launcher::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(148, 163, 184, .05);
  filter: blur(100px);
  transform: translate(33%, -33%);
  pointer-events: none;
}
.carte-launcher > div { flex: 1; min-width: 0; position: relative; z-index: 1; }
.titre { font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; color: #fff; }
.carte-launcher .titre { margin-bottom: 16px; }
.carte-launcher .intro { color: var(--doux); font-size: 18px; line-height: 1.65; margin-bottom: 32px; }
.etapes { list-style: none; padding: 0; display: grid; gap: 24px; margin-bottom: 40px; }
.etapes li { display: flex; align-items: flex-start; gap: 16px; }
.etapes .num {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--fond);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--argent);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etapes h4 { color: #fff; font-weight: 700; margin-bottom: 4px; }
.etapes p { color: var(--doux); font-size: 14px; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.boutons .btn { min-width: 168px; }
.carte-launcher .note { color: var(--doux); font-size: 12px; margin-top: 16px; opacity: .8; }
.carte-launcher .note strong { color: var(--texte); }
.ecran {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--lueur-argent), 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.ecran img { width: 100%; }

/* Les camps */
.tete { text-align: center; margin-bottom: var(--espace-titre); }
.tete .titre { margin-bottom: 16px; }
.tete p { color: var(--doux); font-size: 18px; max-width: 672px; margin: 0 auto; }
.camp { display: flex; align-items: center; gap: 64px; }
.camp + .camp { margin-top: var(--espace); }
.camp > * { flex: 1 1 0; min-width: 0; }
.surtitre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.surtitre .ico { font-size: 24px; }
.bete .surtitre { color: var(--rouge-lueur); }
.ordre .surtitre { color: var(--argent); }
.camp h3 { font-size: 30px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 24px; }
.camp .intro { color: var(--doux); font-size: 18px; line-height: 1.65; margin-bottom: 32px; }
.camp .intro strong { color: #fff; font-weight: 600; }
.points { list-style: none; padding: 0 0 0 24px; border-left: 2px solid var(--surface-2); display: grid; gap: 24px; }
.points strong { display: block; color: #fff; margin-bottom: 4px; }
.points span { color: var(--doux); font-size: 14px; }
.scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 420px;
  padding: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .05);
  background: radial-gradient(circle at 50% 60%, rgba(185, 28, 28, .14), transparent 65%), linear-gradient(135deg, var(--surface) 0%, var(--fond) 100%);
  box-shadow: var(--lueur-rouge);
}
.scene img { width: 100%; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .08)) drop-shadow(0 24px 24px rgba(0, 0, 0, .7)); }
.photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: var(--lueur-argent), 0 30px 60px -20px rgba(0, 0, 0, .8);
}
figure { margin: 0; }
figcaption { font-size: 12px; color: var(--doux); opacity: .7; margin-top: 12px; text-align: center; }

/* Le monde */
.monde {
  position: relative;
  background: rgba(20, 20, 25, .5);
  border-top: 1px solid rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
  /* comme sous l'ouverture : de contenu à contenu, un seul --espace, le biais compris dedans */
  margin-top: calc((var(--espace) - var(--biais)) / 2);
  padding: calc((var(--espace) + var(--biais)) / 2) 0 calc(var(--espace) / 2);  /* l'autre moitié est en haut du pied : le trait tombe au milieu */
}
.monde-in { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.carte {
  position: relative;
  overflow: hidden;
  height: 500px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--surface);
}
.carte .visuel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: transform .7s; }
.carte:hover .visuel { transform: scale(1.05); }
.carte .visuel img.couvre { width: 100%; height: 100%; object-fit: cover; }
.carte.boss .visuel { background: radial-gradient(circle at 50% 40%, rgba(185, 28, 28, .25), transparent 60%); padding: 24px 24px 120px; }
.carte.boss .visuel img { filter: drop-shadow(0 0 20px rgba(239, 68, 68, .35)); }
.carte.lune .visuel {
  background: radial-gradient(circle at 50% 35%, rgba(220, 38, 38, .3), transparent 55%), #0d0709;
  align-items: flex-start;
  padding-top: 64px;
}
.carte.lune .visuel img { width: 52%; filter: drop-shadow(0 0 40px rgba(239, 68, 68, .6)); }
.etoiles { position: absolute; inset: 0; background-image:
  radial-gradient(1px 1px at 12% 18%, #fff8, transparent), radial-gradient(1px 1px at 78% 12%, #fff6, transparent),
  radial-gradient(1px 1px at 30% 60%, #fff5, transparent), radial-gradient(1px 1px at 88% 48%, #fff7, transparent),
  radial-gradient(1px 1px at 60% 28%, #fff5, transparent), radial-gradient(1px 1px at 18% 82%, #fff4, transparent),
  radial-gradient(1px 1px at 70% 70%, #fff4, transparent); }
.carte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--fond) 0%, rgba(10, 10, 12, .5) 45%, transparent 75%);
  pointer-events: none;
}
.carte .texte { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px; }
.carte h3 { font-size: 20px; font-weight: 700; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.carte p { font-size: 14px; color: var(--doux); }

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

.pied { background: var(--fond); border-top: 1px solid rgba(255, 255, 255, .1); padding: calc(var(--espace) / 2) 24px var(--espace-titre); }
.pied > div { max-width: 1152px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pied .marque { font-size: 16px; margin-bottom: 32px; opacity: .6; }
.pied .marque img { width: 26px; height: 26px; filter: none; }
.mention {
  font-size: 12px;
  font-weight: 700;
  color: var(--texte);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.6;
  max-width: 576px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .05);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 12px;
}
.pied .fr { font-size: 12px; color: var(--doux); margin-bottom: 24px; max-width: 576px; }
.pied .marques { font-size: 12px; color: var(--doux); opacity: .6; max-width: 672px; margin-bottom: 32px; }
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pied nav a { color: var(--doux); text-decoration: none; }
.pied nav a:hover { color: #fff; }
.pied .copie { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); opacity: .4; margin-top: 48px; }

/* ---------- Pages de texte (confidentialité, conditions) ---------- */

.tete-page {
  position: relative;
  isolation: isolate;
  padding: 152px 24px calc(var(--biais) + var(--espace-titre));
  background: linear-gradient(to bottom, rgba(10, 10, 12, .6), rgba(10, 10, 12, .9)), url("img/fond.jpg") center / cover no-repeat;
}
.tete-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 30% 40%, rgba(185, 28, 28, .25), transparent 60%);
}
.tete-page > div { max-width: 760px; margin: 0 auto; }
.tete-page h1 { font-size: 48px; line-height: 1.1; font-weight: 800; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.tete-page p { color: var(--doux); }
.page { padding-top: var(--biais); padding-bottom: var(--espace); }  /* l'en-tête porte déjà son espace */
.page article {
  max-width: 808px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 48px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6);
}
.page h2 { color: #fff; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 40px 0 12px; }
.page h2:first-child { margin-top: 0; }
.page p, .page li { color: #C9C9D1; font-size: 16px; line-height: 1.75; }
.page strong { color: #fff; }
.page ul { padding-left: 22px; display: grid; gap: 10px; }
.page a { color: var(--rouge-lueur); }
.page code { font-size: .9em; background: rgba(255, 255, 255, .06); color: var(--texte); padding: 1px 6px; border-radius: 4px; }
.page .en { color: var(--doux); }

/* ---------- Petits écrans ---------- */

@media (max-width: 960px) {
  .liens a:not(.garde) { display: none; }
  .hero h1 { font-size: 56px; }
}

@media (max-width: 768px) {
  :root { --biais: 32px; --espace: 80px; --espace-titre: 48px; }
  .nav, .nav.pleine, .nav.toujours { padding: 10px 0; }
  .nav-in { padding: 0 16px; }
  .marque { font-size: 15px; gap: 10px; }
  .marque img { width: 28px; height: 28px; }
  .liens { font-size: 12px; }
  .hero-in { flex-direction: column; gap: 24px; padding: 96px 16px calc((var(--espace) + var(--biais)) / 2); }
  .hero h1 { font-size: 44px; }
  .hero .accroche { font-size: 18px; margin-bottom: 32px; }
  .hero-bete img { width: 82%; }
  .bloc { padding: 0 16px; }
  .carte-launcher { flex-direction: column; padding: 28px 20px; gap: 32px; }
  .carte-launcher > div { width: 100%; }
  .titre { font-size: 28px; }
  .btn { width: 100%; }
  .boutons .btn { min-width: 0; flex: 1 1 140px; }
  .camp { flex-direction: column; gap: 32px; }
  .camp .media { order: -1; width: 100%; }
  .camp h3 { font-size: 24px; }
  .scene { min-height: 0; padding: 24px 16px; }
  .monde-in { padding: 0 16px; }
  .cartes { grid-template-columns: 1fr; }
  .carte { height: 380px; }
  .pied { padding: calc(var(--espace) / 2) 16px var(--espace-titre); }
  .tete-page { padding: 112px 16px calc(var(--biais) + var(--espace-titre)); }
  .tete-page h1 { font-size: 34px; }
  .page { padding: 0 16px var(--espace); }
  .page article { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* La scène de l'Ordre : la même que celle de la bête, en argent */
.scene.argent {
  background: radial-gradient(circle at 50% 60%, rgba(148, 163, 184, .16), transparent 65%), linear-gradient(135deg, var(--surface) 0%, var(--fond) 100%);
  box-shadow: var(--lueur-argent);
}
.scene.argent img { width: 78%; }

/* ---------------------------------------------------------------- Les règles (regles.html, en/rules.html) */
.page .regles { display: grid; gap: 16px; background: none; border: 0; box-shadow: none; padding: 0; }
.regle {
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 24px 28px;
}
.regle h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 10px !important; }
.regle .num {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--surface-2); color: var(--rouge-lueur); font-weight: 800; font-size: 16px;
}
.regle.interdit { border-color: rgba(220, 38, 38, .55); box-shadow: var(--lueur-rouge); background:
  linear-gradient(135deg, rgba(127, 29, 29, .35), var(--surface) 60%); }
.regle.interdit .num { background: var(--rouge); color: #fff; }

/* ---------------------------------------------------------------- Les factions (factions.html, en/factions.html) */
.page.large > div { max-width: 1152px; margin: 0 auto; }
.faction-resume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
.faction-resume div, .faction-chiffres div { display: flex; flex-direction: column; }
.faction-resume div { background: var(--surface); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; padding: 18px 22px; }
.faction-resume strong { font-size: 30px; font-weight: 800; color: #fff; line-height: 1; }
.faction-resume span, .faction-chiffres span, .etiquette {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); margin-top: 6px;
}
.faction-outils { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; color: var(--doux); font-size: 14px; }
.tri select {
  margin-left: 6px; background: var(--surface-2); color: var(--texte); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px; padding: 6px 10px; font: inherit;
}
.faction-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.faction {
  background: var(--surface); border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.faction.pillable { border-color: rgba(220, 38, 38, .5); }
.faction-tete { display: flex; align-items: center; gap: 10px; }
.faction-tete h3 { font-size: 22px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .03em; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rang { color: var(--rouge-lueur); font-weight: 800; font-size: 14px; }
.badge-pillable {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: var(--rouge); border-radius: 4px; padding: 3px 8px;
}
.fondee { color: var(--doux); font-size: 13px; margin-top: -8px !important; }
.jauge-tete { display: flex; justify-content: space-between; font-size: 13px; color: var(--doux); margin-bottom: 6px; }
.jauge-tete strong { color: #fff; }
.barre { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); overflow: visible; }
.barre span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, var(--rouge-sombre), var(--rouge-lueur)); }
.barre i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--argent); border-radius: 1px; }
.faction-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.faction-chiffres strong { font-size: 22px; font-weight: 800; color: #fff; line-height: 1; }
.faction-gouffre { font-size: 14px; color: #C9C9D1; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.faction-gouffre .etiquette { margin: 0; }
.jetons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jetons .etiquette { margin: 0 4px 0 0; }
.jeton { font-size: 12px; border-radius: 999px; padding: 3px 10px; background: var(--surface-2); color: var(--texte); }
.jeton.allie { color: #D8B4FE; border: 1px solid rgba(216, 180, 254, .35); }
.jeton.ennemi { color: #FCA5A5; border: 1px solid rgba(252, 165, 165, .35); }
.jeton.point { color: #FDE68A; border: 1px solid rgba(253, 230, 138, .3); }
.jeton.vide { opacity: .5; }
.faction-vide { color: var(--doux); text-align: center; padding: 48px 0; }
.faction-guerre { margin-top: 40px; }
.faction-guerre h2 { color: #fff; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 12px; }
.faction-guerre ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.faction-guerre li { display: flex; justify-content: space-between; gap: 12px; background: var(--surface); border-radius: 8px; padding: 12px 16px; color: #C9C9D1; }
.faction-guerre li strong { color: #fff; }
.faction-guerre li.libre strong { color: var(--doux); font-weight: 400; }
@media (max-width: 720px) {
  .faction-resume { grid-template-columns: 1fr; }
  .faction-outils { flex-direction: column; align-items: flex-start; }
  .regle { padding: 20px; }
}

/* ---------------------------------------------------------------- Les règles sur l'accueil */
.regles-accueil { margin-top: var(--espace); margin-bottom: var(--espace); max-width: 860px; }
.regles-accueil .regle h3 { display: flex; align-items: center; gap: 14px; color: #fff; font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 10px; }
.regles-accueil .regle p { color: #C9C9D1; line-height: 1.7; }
.regles-liste { list-style: none; counter-reset: regle; padding: 0; margin-top: 16px; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 12px; }
.regles-liste li { counter-increment: regle; position: relative; background: var(--surface); border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px; padding: 16px 18px 16px 58px; color: #C9C9D1; line-height: 1.6; font-size: 15px; }
.regles-liste li::before { content: counter(regle); position: absolute; left: 16px; top: 15px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--surface-2);
  color: var(--rouge-lueur); font-weight: 800; font-size: 14px; }
.regles-liste strong { color: #fff; }
.regles-suite { text-align: center; margin-top: 28px; }
@media (max-width: 720px) { .regles-liste { grid-template-columns: 1fr; } }

/* Page des crédits : la note de modification, sous chaque élément (exigée par la CC-BY). */
.credits .modif { display: block; color: var(--doux); font-size: 14px; line-height: 1.6; }