/* PINUS CORP — feuille de style unique du site.

   DEUX THÈMES, SOMBRE PAR DÉFAUT. Le sombre est écrit sur :root et vaut donc
   aussi sans JavaScript ; le clair ne s'applique que sur choix du visiteur
   (html[data-theme="clair"], posé par theme.js). Chaque couleur du site passe
   par une des variables ci-dessous : un thème ne redéfinit que ces variables.

   La couleur d'accent est provisoire : elle attend le logo. Quand il sera prêt,
   ce sont les variables --accent* des deux thèmes qui changent. */
:root {
  color-scheme: dark;
  --accent: #5cc093;
  --accent-survol: #86d6b1;
  --accent-bouton: #2f7d5b;
  --accent-bouton-survol: #3a9470;
  --fond: #0e1311;
  --surface: #161d1a;
  --texte: #e3ebe6;
  --pale: #97a79f;
  --bord: #2a3631;
  --remplir-fond: #4d4214;
  --remplir-texte: #ffe28a;
}

html[data-theme="clair"] {
  color-scheme: light;
  --accent: #2f7d5b;
  --accent-survol: #1f5a40;
  --accent-bouton: #2f7d5b;
  --accent-bouton-survol: #1f5a40;
  --fond: #f6f7f5;
  --surface: #ffffff;
  --texte: #1d2521;
  --pale: #5f6b65;
  --bord: #dde2de;
  --remplir-fond: #fff3c4;
  --remplir-texte: inherit;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
a:hover { color: var(--accent-survol); }

.largeur {
  max-width: 960px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* Un texte pour les lecteurs d'écran seulement : l'étiquette d'un bouton qui
   n'affiche qu'une icône. */
.lecteur {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- en-tête */
/* FIXE EN HAUT, sur toutes les pages : la langue et le thème restent à portée
   où qu'on soit dans la page. `sticky` et non `fixed` : il garde sa place dans
   le flux, rien ne passe dessous au chargement. */
header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
}
/* Une ancre (#jeux, #contact…) s'arrête SOUS l'en-tête, pas derrière lui. Sa
   hauteur, qui double quand il passe sur deux lignes, est mesurée par
   theme.js ; la valeur de repli est celle d'une seule ligne. */
html { scroll-padding-top: calc(var(--haut-entete, 73px) + 12px); }
header.site .largeur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 14px;
}
.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texte);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.25rem;
}
.marque img { width: 44px; height: 44px; }
.outils {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.reglages { display: flex; gap: 8px; align-items: center; }

/* ---------------------------------------------------------------- langue
   Le texte de la langue non choisie est caché. Voir langue.js. */
html[data-langue="fr"] [lang="en"],
html[data-langue="en"] [lang="fr"] { display: none !important; }

/* Les deux réglages n'existent que si le script tourne : sans lui, ils ne
   feraient rien. */
.selecteur-langue,
.bascule-theme { display: none; }
html.js .selecteur-langue,
html.js .bascule-theme { display: inline-flex; }

.selecteur-langue {
  border: 1px solid var(--bord);
  border-radius: 6px;
  overflow: hidden;
}
.selecteur-langue button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  border: 0;
  background: var(--surface);
  color: var(--pale);
  padding: 5px 12px;
  cursor: pointer;
}
.selecteur-langue button + button { border-left: 1px solid var(--bord); }
.selecteur-langue button:hover { color: var(--accent); }
.selecteur-langue button[aria-pressed="true"] { background: var(--accent-bouton); color: #fff; }

/* ---------------------------------------------------------------- thème
   Le soleil en sombre (il mène au clair), la lune en clair. Voir theme.js. */
.bascule-theme {
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--surface);
  color: var(--pale);
  cursor: pointer;
}
.bascule-theme:hover { color: var(--accent); }
.bascule-theme .icone-lune { display: none; }
html[data-theme="clair"] .bascule-theme .icone-lune { display: block; }
html[data-theme="clair"] .bascule-theme .icone-soleil { display: none; }

nav a {
  color: var(--pale);
  text-decoration: none;
  margin-left: 20px;
  font-size: 0.95rem;
}
nav a:first-child { margin-left: 0; }
nav a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- accueil */
.bandeau {
  background: var(--surface);
  border-bottom: 1px solid var(--bord);
  text-align: center;
  padding-block: 64px 56px;
}
.bandeau img { width: 120px; height: 120px; }
.bandeau h1 { font-size: clamp(2rem, 7vw, 3rem); margin: 16px 0 8px; }
.bandeau p { color: var(--pale); font-size: 1.1rem; margin: 0; }

main { padding-block: 40px 64px; }

h1 { line-height: 1.2; }
h2 {
  font-size: 1.4rem;
  margin: 48px 0 16px;
}
main > .largeur > h2:first-child { margin-top: 0; }
h3 { margin: 0 0 6px; font-size: 1.15rem; }
/* Dans un texte suivi (politiques, mentions), un sous-titre se détache du
   paragraphe qui le précède. La carte de jeu de l'accueil n'est pas concernée. */
article h3 { margin-top: 22px; }

/* ---------------------------------------------------------------- jeux */
.jeux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.jeu {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* La vignette d'un jeu porte les couleurs DU JEU, pas celles de l'entreprise ni
   du thème : chaque titre a son identité, le site n'en est que la vitrine. */
.vignette {
  background: #0a0d14;
  color: #40d9f2;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 40px 16px;
  font-size: 1.2rem;
  border-bottom: 1px solid var(--bord);
}
.jeu .corps { padding: 18px 20px 20px; flex: 1; }
.jeu .corps p { margin: 0 0 12px; color: var(--pale); }
.plateformes { font-size: 0.85rem; color: var(--pale); }

/* ---------------------------------------------------------------- page d'un jeu
   LE CIEL DU JEU, et non un ciel trouvé ailleurs : images/epopee/fond-etoiles.webp
   est le champ d'étoiles de l'écran-titre, rendu par le jeu lui-même, sur sa
   couleur de fond (#070b12, UIKit.BG). La bannière a été dessinée sur ce même
   fond : posée dessus, elle s'y fond sans bord.

   Le bandeau porte le ciel dans les deux thèmes. En SOMBRE, toute la page le
   porte, fixe derrière le texte : le texte clair s'y lit. En CLAIR, non — un texte
   sombre sur l'espace ne se lirait pas. */
.heros-jeu {
  background: #070b12 url("images/epopee/fond-etoiles.webp") center / cover;
  border-bottom: 1px solid var(--bord);
  padding-block: 12px;
}
.heros-jeu img {
  display: block;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0 auto;
}
/* Fixé par un calque plutôt que par `background-attachment: fixed`, que les
   navigateurs mobiles ignorent ou étirent. */
html:not([data-theme="clair"]) body.page-jeu::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #070b12 url("images/epopee/fond-etoiles.webp") center / cover;
}
.page-jeu main { padding-top: 24px; }
.accroche { margin-top: 0; }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin: 16px 0;
}
.galerie figure { margin: 0; }
.galerie a {
  display: block;
  line-height: 0;
  border: 1px solid var(--bord);
  border-radius: 8px;
  overflow: hidden;
}
.galerie a:hover { border-color: var(--accent); }
.galerie img { display: block; width: 100%; height: auto; }
.galerie figcaption { color: var(--pale); font-size: 0.9rem; margin-top: 6px; }
.galerie img { transition: transform 0.2s ease; }
.galerie a:hover img { transform: scale(1.02); }

/* LA VISIONNEUSE (galerie.js). Fondu et léger zoom à l'ouverture comme à la
   fermeture : la classe `ouvert` porte l'état final, et la durée ci-dessous doit
   valoir DUREE dans le script. Toujours sombre, quel que soit le thème : une
   capture du jeu se regarde sur le noir. */
.visionneuse {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e3ebe6;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.visionneuse::backdrop {
  background: rgba(4, 7, 12, 0);
  transition: background 0.22s ease;
}
.visionneuse.ouvert { opacity: 1; }
.visionneuse.ouvert::backdrop { background: rgba(4, 7, 12, 0.9); }
.visionneuse figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 64px 24px;
}
.visionneuse img {
  max-width: 100%;
  max-height: calc(100% - 48px);
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  transform: scale(0.94);
  transition: transform 0.22s ease, opacity 0.11s ease;
}
.visionneuse.ouvert img { transform: none; }
.visionneuse img.v-change { opacity: 0; }
.visionneuse figcaption { text-align: center; font-size: 0.95rem; }
.visionneuse button {
  position: absolute;
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font: 400 30px/44px system-ui, sans-serif;
  color: #e3ebe6;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  padding: 0;
}
.visionneuse button:hover { background: rgba(255, 255, 255, 0.22); }
.visionneuse .v-fermer { top: 10px; right: 12px; }
.visionneuse .v-prec { left: 10px; top: 50%; transform: translateY(-50%); }
.visionneuse .v-suiv { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
  .visionneuse figure { padding: 56px 8px 72px; }
  .visionneuse .v-prec, .visionneuse .v-suiv { top: auto; bottom: 12px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .visionneuse, .visionneuse::backdrop, .visionneuse img, .galerie img { transition: none; }
}

/* ---------------------------------------------------------------- boutiques
   Les badges officiels de Google Play et de Steam, cliquables. Leur hauteur est
   fixée ici et nulle part ailleurs : les deux boutiques demandent que leurs
   badges soient affichés à la même taille l'un à côté de l'autre. Ils sont
   noirs sur les deux thèmes, comme les boutiques les fournissent. */
.boutiques {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 16px 0;
}
.boutiques a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.boutiques img { display: block; height: 54px; width: auto; }
.jeu .boutiques { margin: 4px 0 8px; gap: 8px; }
.jeu .boutiques img { height: 40px; }
/* Sous chaque badge, en petit : les systèmes que la boutique sert. Steam a
   Windows et Linux, l'Epic Games Store Windows seulement — sans cette ligne, rien
   ne dit au joueur Linux quel badge est le sien. */
.boutiques .support {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--pale);
}

/* UNE BOUTIQUE QUI N'EST PAS ENCORE OUVERTE : badge grisé, rien à cliquer. Le
   lien attend dans `data-lien` (voir la page du jeu). Grisé plutôt que retiré :
   on voit où le jeu sortira. */
.boutiques a.a-venir {
  opacity: 0.45;
  filter: grayscale(1);
  cursor: not-allowed;
}
.annonce {
  text-align: center;
  color: var(--pale);
  font-size: 0.9rem;
  margin: 0 0 16px;
}

/* ---------------------------------------------------------------- classement
   Le classement du mode Survie (classement.js). Les trois niveaux portent les
   couleurs du jeu — celles du sélecteur « Nouvelle partie » et des icônes de
   classement : vert, cyan, rouge. */
.retour { margin: 0 0 8px; font-size: 0.9rem; }
.retour a { text-decoration: none; }
.onglets { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 12px; }
.onglets button {
  font: inherit;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid var(--bord);
  background: var(--surface);
  color: var(--pale);
  cursor: pointer;
}
.niv-facile { --niv: #56e08a; }
.niv-normal { --niv: #40d9f2; }
.niv-difficile { --niv: #ff5a5a; }
html[data-theme="clair"] .niv-facile { --niv: #1f8a4c; }
html[data-theme="clair"] .niv-normal { --niv: #137f94; }
html[data-theme="clair"] .niv-difficile { --niv: #c62f2f; }
.onglets button:hover { color: var(--niv); border-color: var(--niv); }
.onglets button.actif { color: var(--niv); border-color: var(--niv); box-shadow: inset 0 -3px 0 var(--niv); }

.tableau-classement {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow-x: auto;
}
table.classement { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.classement th,
table.classement td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--bord); }
table.classement th { color: var(--pale); font-weight: 600; font-size: 0.85rem; }
table.classement tbody tr:last-child td { border-bottom: 0; }
table.classement .rang { width: 3em; color: var(--pale); }
table.classement .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.classement .pseudo { font-weight: 600; overflow-wrap: anywhere; }
/* LES MÉDAILLES DES TROIS PREMIERS : un disque de métal, son rang gravé dessus,
   et deux rubans. Or, argent, bronze — les mêmes dans les deux thèmes. */
.medaille {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 6px;
  border-radius: 50%;
  /* Les rubans (::before) passent derrière le disque, sans passer sous le tableau. */
  isolation: isolate;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.45);
}
.medaille::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 14px;
  height: 9px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #c62f2f 0 50%, #2f6fc6 50% 100%);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  z-index: -1;
}
.medaille.or { color: #4a3300; background: radial-gradient(circle at 32% 30%, #fff6c4, #f2c230 45%, #b8860b); }
.medaille.argent { color: #2b3035; background: radial-gradient(circle at 32% 30%, #ffffff, #c9d1d9 45%, #858e98); }
.medaille.bronze { color: #2e1605; background: radial-gradient(circle at 32% 30%, #ffd9b8, #cd7f32 45%, #8a4f1d); }
table.classement tbody tr.surligne td { background: color-mix(in srgb, var(--accent) 16%, transparent); }
table.classement .voir {
  display: block;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: underline;
}

/* La recherche d'un pseudo, et les pages de 20 lignes. */
.recherche { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.recherche input {
  flex: 1 1 220px;
  min-width: 0;
  font: inherit;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--bord);
  background: var(--surface);
  color: var(--texte);
}
.recherche input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.recherche button,
.pagination button {
  font: inherit;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--bord);
  background: var(--surface);
  color: var(--texte);
  cursor: pointer;
}
.recherche button[type="submit"] { background: var(--accent-bouton); border-color: var(--accent-bouton); color: #fff; }
.recherche button[type="submit"]:hover { background: var(--accent-bouton-survol); }
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 0;
  color: var(--pale);
  font-size: 0.9rem;
}
.pagination button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination[hidden], .recherche [hidden] { display: none; }
/* SIGNALER UN JOUEUR : le drapeau de chaque ligne, discret jusqu'au survol, et
   la petite fenêtre qu'il ouvre (classement.js). */
table.classement .signaler-ligne {
  margin-left: 8px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--pale);
  opacity: 0.45;
  font-size: 0.9rem;
  cursor: pointer;
  vertical-align: baseline;
}
table.classement tr:hover .signaler-ligne,
table.classement .signaler-ligne:focus-visible { opacity: 1; }
table.classement .signaler-ligne:hover { color: #ff5a5a; }
dialog.signaler {
  width: min(440px, calc(100vw - 32px));
  padding: 20px 22px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--surface);
  color: var(--texte);
}
dialog.signaler::backdrop { background: rgba(4, 7, 12, 0.7); }
dialog.signaler h3 { margin: 0 0 12px; overflow-wrap: anywhere; }
dialog.signaler label { display: grid; gap: 4px; margin: 10px 0; font-size: 0.9rem; color: var(--pale); }
dialog.signaler select,
dialog.signaler textarea {
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 7px 10px;
}
.sig-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.sig-actions button {
  font: inherit;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  border: 1px solid var(--bord);
  background: var(--surface);
  color: var(--texte);
  cursor: pointer;
}
.sig-actions button[type="submit"] { background: #9b2c2c; border-color: #9b2c2c; color: #fff; }
table.classement .vide { text-align: center; color: var(--pale); padding: 28px 14px; }
.etat { color: var(--pale); font-size: 0.85rem; margin: 8px 0 0; }
/* LE MODE SURVIE SUR LA PAGE DU JEU (records.js) : trois cartes, une par niveau,
   chacune liserée de sa couleur et menant à son onglet du classement. L'icône est
   celle du classement Play Jeux ; elle porte le fond du jeu dans les deux thèmes. */
.podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0 8px;
}
.palier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 14px 16px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-top: 4px solid var(--niv);
  border-radius: 10px;
  color: var(--texte);
  text-decoration: none;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.palier:hover { color: var(--texte); border-color: var(--niv); transform: translateY(-2px); }
.palier img { width: 96px; height: 96px; border-radius: 18px; }
.palier-nom { font-weight: 700; font-size: 1.1rem; color: var(--niv); }
.palier-record { color: var(--pale); font-size: 0.9rem; min-height: 2.8em; }
.palier-record strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.palier-pseudo { display: block; overflow-wrap: anywhere; }
.centre { text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .palier { transition: none; }
  .palier:hover { transform: none; }
}
@media (max-width: 560px) {
  table.classement .col-plateforme,
  table.classement .col-date { display: none; }
  table.classement th, table.classement td { padding: 8px 10px; }
}

/* ---------------------------------------------------------------- blocs */
.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 16px 0;
}
.carte p:first-child { margin-top: 0; }
.carte p:last-child { margin-bottom: 0; }

dl.infos { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
dl.infos dt { color: var(--pale); }
dl.infos dd { margin: 0; }

/* Les champs encore à remplir se voient : un site publié avec un crochet
   oublié ne doit pas passer inaperçu à la relecture. */
.a-remplir {
  background: var(--remplir-fond);
  color: var(--remplir-texte);
  padding: 0 4px;
  border-radius: 3px;
}

ul { padding-left: 1.2em; }
li { margin: 4px 0; }

.date { color: var(--pale); font-size: 0.9rem; }
.langue { color: var(--pale); font-size: 0.9rem; }
.bouton {
  display: inline-block;
  background: var(--accent-bouton);
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.95rem;
}
.bouton:hover { background: var(--accent-bouton-survol); color: #fff; }

/* La scène du Prométhée (promethee.js) : SANS FOND, posée sur celui de la page
   — un cadre d'espace noir y faisait tache. Un clic change le vaisseau. */
.promethee { margin: 32px 0; }
.promethee canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  border-radius: 10px;
}
.promethee canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* La bande-annonce : une vidéo par langue — la règle [lang] cache l'autre —, à la
   largeur du texte, sur fond noir le temps que l'affiche arrive. */
.bande-annonce video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 10px;
}

hr { border: 0; border-top: 1px solid var(--bord); margin: 48px 0; }

/* ---------------------------------------------------------------- wiki
   Les pages jeux/epopee-du-promethee-wiki*.html, générées par
   tools/ExportWiki.gd dans le projet du jeu (wiki.js pour le filtre). Toute la
   largeur de la colonne : une grille de fiches, chacune avec son illustration
   sur le ciel du jeu — dans les deux thèmes, comme une capture. */
.wiki-marque {
  display: inline-block;
  font-size: 0.5em;
  vertical-align: middle;
  padding: 3px 12px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--accent-bouton);
  color: #fff;
  letter-spacing: 0.05em;
}
.wiki-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 20px; }
.wiki-nav a {
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--surface);
  color: var(--pale);
  font-size: 0.92rem;
  text-decoration: none;
}
.wiki-nav a:hover { color: var(--accent); border-color: var(--accent); }
.wiki-nav a[aria-current="page"] { background: var(--accent-bouton); border-color: var(--accent-bouton); color: #fff; }
.wiki-filtre { max-width: 420px; margin: 0 0 8px; }
.wiki-filtre[hidden] { display: none; }
.wiki-sommaire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 16px 0 8px;
}
.wiki-sommaire a {
  display: block;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  color: var(--texte);
  font-weight: 600;
  text-decoration: none;
}
.wiki-sommaire a:hover { border-color: var(--accent); color: var(--accent); }
.page-wiki .largeur > h3 { margin: 28px 0 0; }

.fiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin: 16px 0 8px;
}
.fiche {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
  overflow: hidden;
  scroll-margin-top: calc(var(--haut-entete, 73px) + 12px);
}
.fiche:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.fiche.fiche-cachee { display: none; }
.fiche-illus {
  line-height: 0;
  background: #070b12 url("images/epopee/fond-etoiles.webp") center / cover;
  border-bottom: 1px solid var(--bord);
}
.fiche-illus img { display: block; width: 100%; height: auto; }
/* Un bâtiment qui grandit : ses trois paliers se relaient en fondu dans le même
   cadre, trois secondes chacun. La première image tient la place, les deux
   autres se posent dessus. */
.fiche-paliers { position: relative; }
.fiche-paliers img { opacity: 0; animation: fiche-palier 9s -0.6s infinite; }
.fiche-paliers img + img { position: absolute; inset: 0; }
.fiche-paliers img:nth-child(2) { animation-delay: -6.6s; }
.fiche-paliers img:nth-child(3) { animation-delay: -3.6s; }
@keyframes fiche-palier {
  0% { opacity: 0; }
  6%, 33% { opacity: 1; }
  39%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fiche-paliers img { animation: none; }
  .fiche-paliers img:last-child { opacity: 1; }
}
.heros-illus { max-width: 640px; margin: 0 auto 16px; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.fiche-corps { padding: 14px 16px 16px; }
.fiche-corps h3 { margin: 0; font-size: 1.1rem; }
.fiche-role { margin: 2px 0 8px; color: var(--pale); font-size: 0.85rem; }
.fiche-corps > p { margin: 0 0 10px; font-size: 0.93rem; }
.fiche-stats { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 0.88rem; }
.fiche-stats dt { color: var(--pale); }
.fiche-stats dd { margin: 0; overflow-wrap: anywhere; }
.pale { color: var(--pale); }

/* Les révélations de fin de partie : repliées, et annoncées comme telles. */
.revelation {
  margin: 40px 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px dashed var(--bord);
  border-radius: 10px;
}
.revelation summary { cursor: pointer; font-weight: 700; color: #e0a040; }
.revelation > p { color: var(--pale); font-size: 0.9rem; }

/* Le Prométhée : un bloc par module, et la table de ses niveaux. */
.module {
  margin: 20px 0;
  padding: 4px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 10px;
}
.module h2 { margin: 16px 0 8px; }
table.niveaux { border-collapse: collapse; margin: 12px 0 0; font-size: 0.9rem; }
table.niveaux th,
table.niveaux td { padding: 5px 16px 5px 0; text-align: left; border-bottom: 1px solid var(--bord); }
table.niveaux th { color: var(--pale); font-weight: 600; }
@media (max-width: 560px) {
  .fiche-stats { grid-template-columns: 1fr; gap: 0; }
  .fiche-stats dd { margin-bottom: 6px; }
}

/* Centré dans la colonne de 960 px : collé à gauche, le texte laissait un
   grand vide à droite et semblait décalé sous l'en-tête. */
article { max-width: 720px; margin-inline: auto; }

/* ---------------------------------------------------------------- pied */
footer.site {
  border-top: 1px solid var(--bord);
  background: var(--surface);
  color: var(--pale);
  font-size: 0.9rem;
}
footer.site .largeur {
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
footer.site a { color: var(--pale); }

@media (max-width: 560px) {
  dl.infos { grid-template-columns: 1fr; gap: 2px; }
  dl.infos dd { margin-bottom: 10px; }
  nav a { margin-left: 14px; }
}