/* ============================================================
   style-mega.css — Thème "Guilde des Megas"
   Reprend la structure/les classes de style.css (Stormbringer)
   avec la palette spatiale lumineuse validée en maquette.
   ============================================================ */

:root {
  /* ── Palette nommée ─────────────────────────────────────── */
  --espace-profond:   #191341;
  --nebuleuse:        #2d1b5e;
  --nebuleuse-claire: #4a2d8a;
  --cyan-transit:     #4ecdc4;
  --magenta-nova:     #ff6b9d;
  --or-stellaire:     #ffd166;
  --blanc-astral:     #f2f0ff;
  --encre-nuit:       #100c2c;

  /* Alias vers les anciens noms de variables du site (pour compat) */
  --or: var(--or-stellaire);
  --cuivre: var(--cyan-transit);
  --rouge-sang: var(--magenta-nova);
  --rouge-sombre: var(--magenta-nova);
  --parchemin-clair: rgba(255,255,255,0.05);
  --encre: var(--blanc-astral);
  --ombre: rgba(0,0,0,0.55);
  --rayon-bord: 16px;

  --font-display: 'Orbitron', sans-serif;
  --font-sub:     'Exo 2', sans-serif;
  --font-body:    'Sora', sans-serif;
  --font-data:    'Space Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6em;
  color: var(--blanc-astral);
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(255,107,157,0.22), transparent 60%),
    radial-gradient(ellipse 700px 600px at 100% 15%, rgba(78,205,196,0.16), transparent 55%),
    radial-gradient(ellipse 1100px 800px at 50% 110%, rgba(74,45,138,0.35), transparent 60%),
    linear-gradient(160deg, var(--espace-profond) 0%, var(--encre-nuit) 100%);
  background-attachment: fixed;
}

/* ── Fond étoilé à deux couches, avec scintillement ──────── */
/* Couche 1 : étoiles fines et denses, scintillement lent */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%,  #fff, transparent),
    radial-gradient(1px   1px at 18% 68%,  #fff, transparent),
    radial-gradient(1.5px 1.5px at 27% 12%, #fff, transparent),
    radial-gradient(1px   1px at 38% 45%,  #fff, transparent),
    radial-gradient(1.5px 1.5px at 47% 82%, #fff, transparent),
    radial-gradient(1px   1px at 58% 25%,  #fff, transparent),
    radial-gradient(1.5px 1.5px at 66% 60%, #fff, transparent),
    radial-gradient(1px   1px at 74% 15%,  #fff, transparent),
    radial-gradient(1.5px 1.5px at 83% 72%, #fff, transparent),
    radial-gradient(1px   1px at 91% 38%,  #fff, transparent),
    radial-gradient(1.5px 1.5px at 12% 90%, #fff, transparent),
    radial-gradient(1px   1px at 96% 88%,  #fff, transparent);
  background-repeat: repeat;
  background-size: 420px 420px;
  opacity: 0.55;
  animation: etoiles-scintillent 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Couche 2 : étoiles plus grosses, teintées cyan/magenta, scintillement plus marqué */
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image:
    radial-gradient(2px   2px at 15% 30%, rgba(255,255,255,0.95), transparent),
    radial-gradient(2.5px 2.5px at 72% 68%, rgba(78,205,196,0.9), transparent),
    radial-gradient(2px   2px at 88% 18%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2.5px 2.5px at 42% 85%, rgba(255,107,157,0.85), transparent),
    radial-gradient(2px   2px at 6%  62%,  rgba(255,255,255,0.9), transparent),
    radial-gradient(2.5px 2.5px at 60% 8%,  rgba(255,209,102,0.85), transparent),
    radial-gradient(2px   2px at 95% 55%, rgba(255,255,255,0.85), transparent);
  background-repeat: repeat;
  background-size: 640px 640px;
  opacity: 0.75;
  animation: etoiles-scintillent 4.5s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}

@keyframes etoiles-scintillent {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; opacity: 0.6; }
}

p { font-size: 15px; }

/* ── Motif signature : tétraèdre de transit ──────────────── */
.tetra, .codex-icon {
  display: inline-block;
}
.tetra {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--cyan-transit), var(--magenta-nova));
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  filter: drop-shadow(0 0 6px rgba(78,205,196,0.8));
}

/* ── Layout journal / carte ───────────────────────────────── */
.journal-layout {
  display: flex;
  max-width: 1533px;
  margin: 0 auto;
  padding: 20px;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.map-section {
  flex: 2;
  border: 1px solid rgba(78,205,196,0.35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(78,205,196,0.15), inset 0 0 40px rgba(0,0,0,0.4);
  height: 688px;
  background: radial-gradient(ellipse at center, rgba(45,27,94,0.6), var(--encre-nuit));
}
#map { width: 100%; height: 688px; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  margin: -20px -20px 50px;
  background: linear-gradient(180deg, rgba(25,19,65,0.95), rgba(16,12,44,0.98));
  border-bottom: 1px solid rgba(78,205,196,0.3);
  color: var(--blanc-astral);
  display: flex;
  justify-content: center;
  padding: 14px 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  z-index: 1000;
}
.navbar .logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800; letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(78,205,196,0.5);
}
.navbar .nav-links { display: flex; gap: 20px; }
.navbar .nav-links a {
  text-decoration: none;
  color: var(--blanc-astral);
  font-family: var(--font-sub);
  font-weight: 600; font-size: 14px;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.25s;
}
.navbar .nav-links a:hover {
  background: rgba(78,205,196,0.12);
  color: var(--cyan-transit);
}

/* ── Back to top ──────────────────────────────────────────── */
html { scroll-behavior: smooth; }
.back-to-top {
  position: fixed; right: 22px; bottom: 22px;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(78,205,196,0.5);
  background: linear-gradient(160deg, rgba(45,27,94,0.95), rgba(16,12,44,0.98));
  color: var(--cyan-transit);
  display: grid; place-items: center;
  font-size: 22px; cursor: pointer;
  box-shadow: 0 0 22px rgba(78,205,196,0.35);
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity 240ms ease, transform 240ms ease, box-shadow 0.25s;
  z-index: 2000;
}
.back-to-top:hover { box-shadow: 0 0 30px rgba(255,107,157,0.5); color: var(--magenta-nova); }
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .back-to-top { transition: none; }
}

/* ── Journal ──────────────────────────────────────────────── */
.journal-section {
  flex: 1; min-width: 0;
  background: linear-gradient(165deg, rgba(45,27,94,0.55), rgba(16,12,44,0.75));
  border: 1px solid rgba(78,205,196,0.25);
  border-radius: 16px;
  padding: 20px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
}
.journal-section h1 {
  font-family: var(--font-display);
  font-size: 26px; text-align: center; margin-bottom: 1em;
  color: var(--blanc-astral); letter-spacing: 1px;
}
.players-section h2, .players-section-chapitre h2, .player-card .info h3, .journal-section h2 {
  font-family: var(--font-sub);
}
#itineraireInfos, #descriptionInfos, #stormInfos {
  margin-bottom: 20px; padding: 14px;
  border-left: 3px solid var(--cyan-transit);
  background: rgba(255,255,255,0.04);
  border-radius: 0 10px 10px 0;
}

select {
  width: 100%; padding: 8px; font-size: 15px; margin-bottom: 20px;
  border-radius: 10px; border: 1px solid rgba(78,205,196,0.4);
  background: rgba(16,12,44,0.6); color: var(--blanc-astral);
  font-family: var(--font-body);
}

/* ── Sections joueurs / grille ────────────────────────────── */
.players-section, .players-section-chapitre {
  max-width: 1533px; margin: 30px auto; padding: 20px;
  position: relative; z-index: 1;
  background: linear-gradient(165deg, rgba(45,27,94,0.4), rgba(16,12,44,0.55));
  border: 1px solid rgba(78,205,196,0.2);
  border-radius: 18px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
}
.players-section h2, .players-section-chapitre h2, .journal-section h2 {
  font-family: var(--font-sub); font-weight: 700;
  font-size: 21px; margin-bottom: 20px; text-align: center;
  color: var(--blanc-astral); letter-spacing: 0.5px;
}
.players-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ── Carte personnage / lieu / créature ─────────────────────
   .mega-card est un ALIAS de .player-card : les deux noms
   produisent exactement le même rendu. Garde .player-card
   dans le HTML existant (bestiaire.php, humains.php, lieux.php,
   index.php...) ; utilise .mega-card si tu construis une page
   neuve et préfères ce nom.                                  */
.player-card, .mega-card {
  position: relative;
  border-radius: 18px;
  padding: 2px;
  margin: 10px;
  background: linear-gradient(150deg, rgba(78,205,196,0.45), rgba(255,107,157,0.3) 60%, rgba(255,255,255,0.05));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
}
.player-card:hover, .mega-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(78,205,196,0.2); }

/* Contenu interne translucide (simule l'ancien fond de carte) */
.player-card > *:not(.mort):not(.ribbon):not(.groupe-badge),
.mega-card > *:not(.mort):not(.ribbon):not(.groupe-badge) {
  position: relative;
}
.player-card, .mega-card {
  background-color: transparent;
}
.player-card::before, .mega-card::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(45,27,94,0.92), rgba(16,12,44,0.95));
  z-index: 0;
}
.player-card > *, .mega-card > * { position: relative; z-index: 1; }

.player-card img, .mega-card img {
  display: block;
  width: 130px; height: 130px;
  margin: 25px auto 15px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 22px rgba(78,205,196,0.5);
  cursor: pointer;
}

.player-card .info, .mega-card .info { padding: 16px 20px; text-align: center; font-family: var(--font-body); }
.player-card .info h3, .mega-card .info h3 {
  margin: 8px 0;
  font-family: var(--font-sub); font-weight: 700;
  font-size: 20px; color: var(--blanc-astral);
}
.player-card .info h3 a, .mega-card .info h3 a { color: var(--cyan-transit) !important; text-decoration: none; }
.player-card .info h3 a:hover, .mega-card .info h3 a:hover { color: var(--magenta-nova) !important; }
.player-card .info p, .mega-card .info p {
  line-height: 1.55; font-size: 13.5px; color: rgba(242,240,255,0.75);
}
.player-card .info h5, .mega-card .info h5 {
  font-style: normal; font-family: var(--font-data);
  font-size: 11.5px; letter-spacing: 0.5px;
  color: var(--cyan-transit); margin-top: 10px;
}

.mega-card__inner {
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(45, 27, 94, 0.92), rgba(16, 12, 44, 0.95));
  padding: 22px 18px 18px;
  text-align: center; 
  position: relative;
  overflow: hidden;
}

.badge-role {
  display: inline-block;
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(255, 209, 102, 0.15);
  color: var(--or-stellaire);
  border: 1px solid rgba(255, 209, 102, 0.35);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.mega-card__inner::after {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 157, 0.25), transparent 70%);
  pointer-events: none;
}

.mega-card .origine {
  font-family: var(--font-data);
  font-size: 11.5px;
  color: var(--cyan-transit);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Ruban → devient un badge de rôle en haut de carte */
.player-card .ribbon, .mega-card .ribbon, .mega-card .badge-role {
  display: inline-block;
  margin-top: 14px;
  background: rgba(255,209,102,0.15);
  color: var(--or-stellaire);
  border: 1px solid rgba(255,209,102,0.35);
  text-align: center;
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 10px;
}

.player-card .mort, .mega-card .mort {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(135deg, var(--magenta-nova), #b5306a);
  color: #fff; font-family: var(--font-data);
  font-size: 12px; padding: 6px 14px;
  border-radius: 10px; font-weight: bold;
  letter-spacing: 1px; z-index: 10;
  box-shadow: 0 0 14px rgba(255,107,157,0.5);
}

.sexe, .nb_part {
  display: inline-block;
  margin: 10px 6px 0;
  padding: 7px 12px;
  border-radius: 10px;
  font-weight: 600;
  background: rgba(255,255,255,1);
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  font-family: var(--font-data);
  font-size: larger;
  color: var(--nebuleuse);
}
.sexe { display: inline-flex; align-items: center; gap: 6px; font-size: larger; }

/* ── Classes propres à la maquette (avatar rond, tags) ────────
   Pas utilisées par le HTML actuel (qui a de vraies images via
   .player-card img), mais utiles si tu réutilises le markup de
   la maquette tel quel, ou pour des fiches sans portrait.     */
.avatar {
  width: 88px; height: 88px; margin: 0 auto 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--encre-nuit);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 22px rgba(78,205,196,0.55);
}
.avatar--1 { background: linear-gradient(140deg, var(--cyan-transit), var(--nebuleuse-claire)); }
.avatar--2 { background: linear-gradient(140deg, var(--magenta-nova), var(--or-stellaire)); }
.avatar--3 { background: linear-gradient(140deg, var(--or-stellaire), var(--cyan-transit)); }

.tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tag {
  font-family: var(--font-data); font-size: 10.5px;
  padding: 3px 9px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(242,240,255,0.85);
}
.tag--transit { border-color: rgba(78,205,196,0.4); color: var(--cyan-transit); }
.tag--transfert { border-color: rgba(255,107,157,0.4); color: var(--magenta-nova); }

/* Tooltip */
.tooltip {
  position: absolute; bottom: 10%; left: 0%;
  transform: translateX(-50%) translateY(-37%);
  background: linear-gradient(165deg, rgba(45,27,94,0.98), rgba(16,12,44,0.98));
  color: var(--blanc-astral);
  font-family: var(--font-body); font-size: 13px;
  padding: 14px 18px; border-radius: 10px;
  white-space: normal; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(78,205,196,0.3);
  z-index: 20; width: max-content; max-width: 240px; text-align: left;
}
.player-card .nb_part:hover .tooltip, .mega-card .nb_part:hover .tooltip { opacity: 1; }

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox {
  display: none; position: fixed; z-index: 1000; padding-top: 5%;
  left: 0; top: 0; width: 100%; height: 100%; overflow: auto;
  background: rgba(8,6,24,0.92); text-align: center;
}
.lightbox img { max-width: 90%; max-height: 80vh; border-radius: 14px; box-shadow: 0 0 40px rgba(78,205,196,0.35); }
.lightbox .close { position: absolute; top: 20px; right: 40px; color: var(--blanc-astral); font-size: 36px; font-weight: bold; cursor: pointer; }
.lightbox .close:hover { color: var(--magenta-nova); }

/* ── Cartes "lexique" (arcs, pantheon, etc.) ─────────────── */
.lexique-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 380px));
  justify-content: center; gap: 25px;
}
.lexique-card {
  background: linear-gradient(165deg, rgba(45,27,94,0.85), rgba(16,12,44,0.92));
  border: 1px solid rgba(78,205,196,0.3);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transition: all 0.25s ease;
}
.lexique-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(78,205,196,0.2); }
.lexique-header {
  background: linear-gradient(90deg, var(--nebuleuse-claire), var(--encre-nuit));
  color: var(--blanc-astral); font-family: var(--font-sub); font-weight: 700;
  font-size: 20px; padding: 14px; text-align: center;
}
.lexique-content { padding: 18px; font-family: var(--font-body); color: var(--blanc-astral); }
.lexique-category {
  display: inline-block; background: rgba(78,205,196,0.12);
  color: var(--cyan-transit);
  padding: 6px 10px; border-radius: 10px; margin-bottom: 12px;
  font-family: var(--font-data); font-size: 12px;
}
.lexique-meta { margin-top: 8px; font-size: 13px; font-style: italic; color: rgba(242,240,255,0.6); }
.lexique-image img { width: 100%; height: 220px; object-fit: cover; border-bottom: 1px solid rgba(78,205,196,0.3); }
.lexique-infos { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.lexique-genre { padding: 5px 10px; border-radius: 10px; font-size: 12px; font-weight: bold; font-family: var(--font-data); }
.lexique-genre.m { background: rgba(78,205,196,0.15); color: var(--cyan-transit); }
.lexique-genre.f { background: rgba(255,107,157,0.15); color: var(--magenta-nova); }
.lexique-genre.n { background: rgba(255,255,255,0.08); color: var(--blanc-astral); }

.codex-title h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 38px);
  letter-spacing: 3px;
  margin: 0;
  background: linear-gradient(90deg, var(--cyan-transit), var(--blanc-astral) 45%, var(--magenta-nova));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}

.codex-title-index h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 4vw, 26px);
  letter-spacing: 3px;
  margin: 0;
  background: linear-gradient(90deg, var(--cyan-transit), var(--blanc-astral) 45%, var(--magenta-nova));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}

.tetra {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, var(--cyan-transit), var(--magenta-nova));
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  filter: drop-shadow(0 0 6px rgba(78, 205, 196, 0.8));
}

.codex-title .tetra {
  width: 26px;
  height: 26px;
  margin-bottom: 14px;
  animation: pulse 3.2s ease-in-out infinite;
}

.codex-title .devise {
  display: block;
  margin-top: 10px;
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--or-stellaire);
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: normal;
}

.codex-title-index .tetra {
  width: 26px;
  height: 26px;
  margin-bottom: 14px;
  animation: pulse 3.2s ease-in-out infinite;
}

.codex-title-index .devise {
  display: block;
  margin-top: 10px;
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--or-stellaire);
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: normal;
}

/* ── Toolbar / recherche / filtres / titre codex ─────────── */
.codex-toolbar { margin: 50px auto; text-align: center; }
.codex-search {
  width: 100%; max-width: 500px; padding: 13px 20px;
  border: 1px solid rgba(78,205,196,0.4); border-radius: 14px;
  background: rgba(16,12,44,0.5);
  color: var(--blanc-astral);
  font-family: var(--font-body); font-size: 15px; margin-bottom: 20px;
}
.codex-search::placeholder { color: rgba(242,240,255,0.4); }
.codex-search:focus { outline: none; border-color: var(--cyan-transit); box-shadow: 0 0 16px rgba(78,205,196,0.3); }

.codex-filters, .codex-filters-2, .codex-filters-3 {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.codex-filters-2, .codex-filters-3 {
  display: none; margin-top: 12px; padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px; border: 1px dashed rgba(78,205,196,0.3);
}
.codex-filters-2.visible, .codex-filters-3.visible { display: flex; }

.codex-filter, .codex-filter-2, .codex-filter-3 {
  font-family: var(--font-sub); font-weight: 600; font-size: 13px;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(78,205,196,0.35);
  color: var(--blanc-astral);
  padding: 9px 16px; border-radius: 20px; cursor: pointer;
  transition: all 0.2s ease;
}
.codex-filter:hover, .codex-filter-2:hover, .codex-filter-3:hover {
  border-color: var(--cyan-transit); background: rgba(78,205,196,0.12);
}
.codex-filter.active, .codex-filter-2.active, .codex-filter-3.active {
  background: linear-gradient(90deg, var(--cyan-transit), var(--nebuleuse-claire));
  border-color: transparent; color: var(--encre-nuit); font-weight: 700;
  box-shadow: 0 0 18px rgba(78,205,196,0.4);
  transform: none;
}
.filtre-count {
  display: inline-block; background: rgba(0,0,0,0.25);
  border-radius: 8px; padding: 0 5px; font-size: 11px; margin-left: 4px;
}
.codex-filter.active .filtre-count,
.codex-filter-2.active .filtre-count,
.codex-filter-3.active .filtre-count { background: rgba(16,12,44,0.25); }

.codex-title, .codex-title-index {
  position: relative; text-align: center; margin: 20px 0 44px;
  font-family: var(--font-display); font-size: 34px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(90deg, var(--cyan-transit), var(--blanc-astral) 45%, var(--magenta-nova));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.codex-icon { display: block; font-size: 30px; margin-bottom: 12px; filter: drop-shadow(0 0 8px rgba(78,205,196,0.6)); }
.codex-divider {
  display: block; margin-top: 12px; font-size: 13px;
  color: var(--or-stellaire); letter-spacing: 6px; opacity: 0.85;
}
.codex-title::before, .codex-title::after,
.codex-title-index::before, .codex-title-index::after {
  content: ""; position: absolute; top: 50%; width: 14%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(78,205,196,0.6), transparent);
}
.codex-title::before, .codex-title-index::before { left: 3%; }
.codex-title::after, .codex-title-index::after { right: 3%; }

/* ── Stats de campagne ────────────────────────────────────── */
.campaign-stats { max-width: 1200px; margin: 0 auto; }
.stats-title { text-align: center; font-family: var(--font-sub); font-size: 18px; color: rgba(242,240,255,0.75); margin-bottom: 26px; }
.stats-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.stat-card {
  width: 96px; text-align: center; padding: 18px 10px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  transition: all 0.25s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(78,205,196,0.2); }
.stat-icon { font-size: 26px; margin-bottom: 10px; }
.stat-number { font-family: var(--font-data); font-weight: 700; font-size: 30px; color: var(--cyan-transit); }
.stat-label { font-family: var(--font-sub); font-size: 12px; margin-top: 6px; color: rgba(242,240,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Panneau chapitre / mission ──────────────────────────── */
#itineraireInfos { padding: 0; border-left: none; background: none; }
.chap-card {
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(165deg, rgba(45,27,94,0.75), rgba(16,12,44,0.9));
  border: 1px solid rgba(78,205,196,0.3);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.chap-hero {
  width: 100%; height: 170px; background-size: cover; background-position: center 20%;
  position: relative; cursor: pointer; overflow: hidden; border-radius: 14px 14px 0 0;
  transition: filter 0.3s ease;
}
.chap-hero:hover { filter: brightness(1.1); }
.chap-hero--no-img {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,107,157,0.25), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(78,205,196,0.2), transparent 55%),
    linear-gradient(160deg, var(--nebuleuse) 0%, var(--encre-nuit) 100%);
  cursor: default;
}
.chap-hero--no-img:hover { filter: none; }
.chap-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(16,12,44,0.2) 0%, rgba(16,12,44,0.45) 40%, rgba(16,12,44,0.92) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px 14px 10px; gap: 2px; align-items: center; text-align: center;
}
.chap-hero__date {
  font-family: var(--font-data); font-size: 11px; color: var(--or-stellaire);
  letter-spacing: 1.5px; text-transform: uppercase;
}
.chap-hero__titre {
  font-family: var(--font-sub); font-weight: 700; color: var(--blanc-astral) !important;
  margin: 0; line-height: 1.25; text-shadow: 0 0 12px rgba(0,0,0,0.8);
}
.chap-hero__scenario {
  font-family: var(--font-body); font-size: 13px; font-style: italic;
  color: var(--cyan-transit); margin-top: 2px;
}

.chap-card__body { padding: 14px 16px; }
.chap-detail { font-size: 14px; line-height: 1.65; color: rgba(242,240,255,0.85); text-align: justify; }

.chap-ornement { text-align: center; margin: 8px 0; opacity: 0.35; filter: hue-rotate(160deg); }

/* Boutons dépliants (événements / résumés / étapes) */
.chap-events-toggle-btn, .chap-resumes-toggle-btn, .chap-etapes-toggle-btn {
  width: 100%; padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(78,205,196,0.35);
  border-radius: 10px; color: var(--blanc-astral);
  font-family: var(--font-sub); font-weight: 600; font-size: 13px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s ease;
}
.chap-events-toggle-btn:hover, .chap-resumes-toggle-btn:hover, .chap-etapes-toggle-btn:hover {
  border-color: var(--cyan-transit); background: rgba(78,205,196,0.1); color: var(--cyan-transit);
}
.chap-events-toggle-btn::after, .chap-resumes-toggle-btn::after, .chap-etapes-toggle-btn::after {
  content: "▼"; font-size: 10px; margin-left: auto; color: var(--cyan-transit);
  transition: transform 0.25s ease;
}
.chap-events-toggle-btn.open::after, .chap-resumes-toggle-btn.open::after, .chap-etapes-toggle-btn.open::after {
  transform: rotate(-180deg); color: var(--magenta-nova);
}
.chap-events-dropdown, .chap-resumes-dropdown, .chap-etapes-dropdown {
  margin-top: 10px; background: rgba(255,255,255,0.03);
  border: 1px solid rgba(78,205,196,0.2); border-radius: 10px; padding: 12px;
}

.mini-ev-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(78,205,196,0.2);
  border-radius: 10px; padding: 12px 14px;
}
.mini-ev-title { font-family: var(--font-sub); font-size: 16px; color: var(--blanc-astral); margin: 0; }
.ev-tab-btn, .resume-tab-btn {
  font-family: var(--font-data); font-size: 11px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(78,205,196,0.25);
  color: rgba(242,240,255,0.75); padding: 4px 12px; border-radius: 8px; cursor: pointer;
}
.ev-tab-btn.active, .resume-tab-btn.active { background: var(--cyan-transit); color: var(--encre-nuit); border-color: transparent; }
.ev-desc-text.type-narration, .ev-desc-text.type-poesie, .ev-desc-text.type-humour {
  font-style: italic; color: rgba(242,240,255,0.75);
  padding-left: 8px; border-left: 2px solid rgba(78,205,196,0.35);
}
.resume-pdf-link { color: var(--cyan-transit); }
.resume-pdf-link:hover { color: var(--magenta-nova); background: rgba(255,107,157,0.1); }

/* Étapes */
.chap-etapes-list .etape-num {
  background: linear-gradient(135deg, var(--cyan-transit), var(--nebuleuse-claire));
  color: var(--encre-nuit);
}
.chap-etapes-list .etape-item {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(78,205,196,0.15);
}
.chap-etapes-list .etape-item.etape-has-img:hover { background: rgba(78,205,196,0.08); }
.chap-etapes-list .etape-lieu { color: var(--blanc-astral); }
.chap-etapes-list .etape-region { color: rgba(242,240,255,0.55); }

/* ── Select2 (thème galactique) ───────────────────────────── */
.select2-container--default .select2-selection--single {
  background: rgba(16,12,44,0.6);
  border: 1px solid rgba(78,205,196,0.4);
  border-radius: 10px; height: 42px; display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--blanc-astral); font-family: var(--font-body); font-size: 15px;
}
.select2-dropdown {
  background: var(--encre-nuit); border: 1px solid rgba(78,205,196,0.4);
  border-radius: 10px; font-family: var(--font-body);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid rgba(78,205,196,0.3); background: rgba(255,255,255,0.04);
  border-radius: 6px; color: var(--blanc-astral);
}
.select2-container--default .select2-results__group {
  background: rgba(78,205,196,0.1); color: var(--cyan-transit);
  font-weight: bold; padding: 6px 10px; border-bottom: 1px dashed rgba(78,205,196,0.2);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: linear-gradient(90deg, var(--cyan-transit), var(--nebuleuse-claire)) !important;
  color: var(--encre-nuit) !important;
}
.select2-results__option { padding: 8px 12px; color: var(--blanc-astral); }

/* ── Badges de groupe ─────────────────────────────────────── */
.groupe-badge {
  position: absolute; top: 8px; left: 8px; width: 26px; height: 26px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: bold; font-family: var(--font-data);
  z-index: 2; box-shadow: 0 0 10px rgba(78,205,196,0.4);
}
.groupe-badge--1 { background: var(--cyan-transit); color: var(--encre-nuit); }
.groupe-badge--2 { background: var(--or-stellaire); color: var(--encre-nuit); }
.groupe-separator { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; }
.groupe-separator::before, .groupe-separator::after { content: ''; flex: 1; height: 1px; background: var(--cyan-transit); opacity: 0.3; }
.groupe-separator span { font-family: var(--font-data); color: var(--or-stellaire); font-size: 0.85rem; letter-spacing: 0.1em; }

/* ── Métadonnées croisées (bestiaire/lieux) ───────────────── */
.bestiaire-label {
  font-size: 11px; font-family: var(--font-data); color: var(--cyan-transit);
  text-transform: uppercase; letter-spacing: 0.5px; margin: 6px 0 2px; display: block;
}
.bestiaire-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-family: var(--font-body);
  padding: 3px 9px; border-radius: 10px; white-space: nowrap;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.bestiaire-badge--chap { background: rgba(78,205,196,0.1); color: var(--cyan-transit); border: 1px solid rgba(78,205,196,0.3); }
.bestiaire-badge--pj { background: rgba(255,209,102,0.1); color: var(--or-stellaire); border: 1px solid rgba(255,209,102,0.3); }
.bestiaire-badge--scenario { background: rgba(255,107,157,0.1); color: var(--magenta-nova); border: 1px solid rgba(255,107,157,0.3); font-style: italic; }
.bestiaire-toggle { background: none; border: none; font-family: var(--font-body); font-size: 11px; color: var(--cyan-transit); cursor: pointer; text-decoration: underline dotted; }
.bestiaire-toggle:hover { color: var(--magenta-nova); }

.mini-portrait img {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover; object-position: top;
  border: 2px solid rgba(255,255,255,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.mini-portrait img:hover { transform: scale(1.12); box-shadow: 0 0 16px rgba(78,205,196,0.5); }
.mini-portrait__nom { font-size: 11.5px; font-family: var(--font-body); color: rgba(242,240,255,0.75); }
.mini-portrait--pj  img { border-color: var(--cyan-transit); }
.mini-portrait--rel img,
.mini-portrait--dev img { border-color: var(--or-stellaire); }
.mini-portrait--inv img,
.mini-portrait--nav img,
.mini-portrait--aub img,
.mini-portrait--hote img { border-color: var(--magenta-nova); }
.mini-portrait__more {
  width: 44px; height: 44px; border-radius: 8px;
  border: 2px dashed rgba(78,205,196,0.4);
  background: rgba(78,205,196,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--font-data); color: var(--cyan-transit); cursor: pointer;
}
.mini-portrait__more:hover { background: rgba(78,205,196,0.15); }

/* ── Pagination ───────────────────────────────────────────── */
.bestiaire-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 28px 0 10px; }
.pag-btn {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px;
  border: 1px solid rgba(78,205,196,0.35); background: rgba(255,255,255,0.03);
  color: var(--blanc-astral); font-family: var(--font-data); font-size: 14px; cursor: pointer;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center;
}
.pag-btn:hover { border-color: var(--cyan-transit); background: rgba(78,205,196,0.1); }
.pag-btn.active { background: linear-gradient(90deg, var(--cyan-transit), var(--nebuleuse-claire)); color: var(--encre-nuit); border-color: transparent; font-weight: bold; }
.pag-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.pag-btn.ellipsis { border-color: transparent; background: none; cursor: default; }
.pag-info { font-family: var(--font-body); font-size: 13px; font-style: italic; color: rgba(242,240,255,0.55); text-align: center; margin-top: 6px; }

/* ── Filtres rapides chapitres / boutons cuir → boutons HUD ─ */
.chapitres-quick-filters .filters-label, .filters-label {
  font-size: 13px; color: var(--cyan-transit); font-weight: 600;
  display: block; margin-bottom: 5px; font-family: var(--font-sub);
}
.btn-filter-chap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(78,205,196,0.35);
  color: var(--blanc-astral);
  padding: 5px 12px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-family: var(--font-data);
  transition: all 0.2s ease; white-space: nowrap;
}
.btn-filter-chap:hover, .btn-filter-chap.active { background: var(--cyan-transit); color: var(--encre-nuit); border-color: transparent; }

/* ── Slider d'évolution des portraits (pjs.php) ──────────── */
.evolution-container { position: relative; margin: 0px 0; }
.evolution-container .portrait {
  display: flex; justify-content: center;
}
.portrait-evolution {
  transition: opacity 0.15s ease;
}
.portrait-evolution.fading { opacity: 0; }

.timeline-controls { max-width: 170px; margin: 10px auto 4px; }
.timeline-slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan-transit), var(--magenta-nova));
  outline: none; cursor: pointer;
}
.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blanc-astral);
  border: 2px solid var(--cyan-transit);
  box-shadow: 0 0 8px rgba(78,205,196,0.7);
  cursor: pointer;
}
.timeline-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blanc-astral);
  border: 2px solid var(--cyan-transit);
  box-shadow: 0 0 8px rgba(78,205,196,0.7);
  cursor: pointer;
}
.timeline-labels {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-data); font-size: 9.5px;
  color: rgba(242,240,255,0.45);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.timeline-labels span.active { color: var(--cyan-transit); font-weight: bold; }

/* ── Responsive (allègement — reprend les points clés) ────── */
@media (max-width: 1024px) {
  .players-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .codex-title, .codex-title-index { font-size: 26px; }
  .codex-title::before, .codex-title::after,
  .codex-title-index::before, .codex-title-index::after { display: none; }
  .stat-card { width: 90px; }
  .mega-card .info h3 { font-size: 26px; }
  .mega-card .info p { font-size: 18px; }
}

/* Conteneur des miniatures */
.photo-thumbnails {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

/* Bouton de miniature individuel */
.thumb-btn {
  background: none;
  border: 2px solid rgba(78, 205, 196, 0.3);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Effet au survol */
.thumb-btn:hover {
  border-color: var(--cyan-transit);
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(78, 205, 196, 0.6);
}

/* Miniature active / sélectionnée */
.thumb-btn.active {
  border-color: var(--magenta-nova);
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(255, 107, 157, 0.8);
}

.badge-age {
  font-size: 0.85rem;
  font-family: 'Courier New', monospace; /* Pour un aspect technique/RPG */
  background: rgba(0, 0, 0, 0.4);
  color: var(--cyan-transit);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--cyan-transit);
  white-space: nowrap;
}

/* ── Graphe de l'univers (remplace #map/Leaflet) ─────────────── */
#graph {
  width: 100%; height: 688px; display: block; cursor: grab;
}
#graph:active { cursor: grabbing; }
.node-label {
  font-family: var(--font-sub); font-size: 10.5px; fill: var(--blanc-astral);
  paint-order: stroke; stroke: rgba(16,12,44,0.85); stroke-width: 3px;
  pointer-events: none;
}
.node-circle { cursor: pointer; transition: stroke-width 0.15s; }
.node-circle:hover { stroke: var(--blanc-astral) !important; stroke-width: 2px !important; }

.documents-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
  justify-content: center;
}

.document-item {
  background: rgba(20, 25, 45, 0.7);
  border: 1px solid rgba(0, 150, 255, 0.3);
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

.document-item:hover {
  border-color: #00d2ff;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
  transform: translateY(-2px);
}

.doc-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: #fff;
  text-decoration: none;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
}

.doc-icon {
  font-size: 1.4em;
}

.doc-name {
  text-transform: capitalize;  
}

/* Badge de vocation / statut Mega */
.badge-vocation {
  display: inline;
  background: linear-gradient(to bottom, #d2b48c, #b8860b);
  color: #2b1b10;
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 6px;
  margin: 4px 0 8px 0;
  border: 1px solid #7a5a2c;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.5px;
  text-transform: capitalize;
}


@media (max-width: 1024px) {
    .players-section h2, .players-section-chapitre h2, .journal-section h2 {
        font-size: 40px;
        margin-bottom: 40px;
    }
    .codex-icon {
        margin-bottom: 40px;
    }
    .codex-divider {
        margin-top: 30px;
    }
    .chapitres-quick-filters .filters-label {
        font-size: 25px;
    }
    .btn-filter-chap {
        padding: 10px 16px;
        font-size: 30px;
        border-radius: 6px;
    }
    .filters-label {
        font-size: 22px;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-dropdown {
        font-size: 26px;
    }
    #itineraireSelect {
        font-size: 30px;
    }
    .stats-title {
        font-size: 30px;
        margin-top: 20px;
    }
    .stat-card {
        width: 90px;
    }
    .stats-grid {
      gap: 50px;
    }
    .stat-icon {
        font-size: 35px;
        margin-bottom: 15px;
    }
    .stat-number {
        font-size: 36px;
    }
    .stat-label {
        font-size: 21px;
        margin-top: 10px;
    }    
    .codex-filter, .codex-filter-2 {
        font-size: 28px !important;
        padding: 6px 12px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }    
    .players-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
    .mega-card {
        max-width: 100%;
    }
    .badge-role {
      font-size: 25px !important;
    }
    .badge-age {
      font-size: 2rem;
      position: relative;
      top: 25px;
    }
    .mega-card .info h3 {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 45px;
    }  
    .mega-card .info p {
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 30px;
    }   
    .mega-card .info h5 {
        font-size: 25px;
        margin-bottom: 20px !important;
    }       
    .sexe, .nb_part {
        padding: 10px 10px;
        font-size: 40px;
    }    
    .chap-hero {
        height: 200px;
    }
    .chap-hero__date {
        font-size: 20px;
    }
    .chap-hero__scenario {
        font-size: 25px;
    }   
    .chap-resumes-toggle-btn {
        font-size: 20px;
        padding: 14px;
    }
    .resume-tab-btn {
        font-size: 18px;
        padding: 8px 16px;
    }
    .resume-contents {
        font-size: 22px;
    }         
    .chap-etapes-toggle-btn {
        font-size: 20px;
        padding: 14px;
    }
    .thumb-btn {        
      width: 80px;
      height: 80px;
    }
    .doc-name {
      font-size: 30px;
    }
    .badge-vocation {
      display: inline-flex;
      font-size: 30px;
      font-weight: bold;
      padding: 10px 10px;
      border-radius: 6px;
      margin: 4px 0 8px 0;
      border: 1px solid #7a5a2c;
      box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.15);
      letter-spacing: 0.5px;
      text-transform: capitalize;
      position: relative;
      top: 25px;
    }
    .tag {
      font-size: 25px;
    }
    .codex-search {
      font-size: 40px;
      margin-bottom: 40px;
    }
}