/* ==========================================================================
   CAPTAIN FUTURE — components.css
   Composants réutilisables : page-hero, fiches personnage (tabs, stats,
   moments, galerie), panel holographique, radar chart, graphe de relations,
   timeline, modal. Dépend de variables.css · animations.css
   ========================================================================== */

/* ── PAGE HERO (en-tête des sous-pages) ─────────────────────────────────── */
.page-hero {
  position: relative;
  min-height: 62dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.page-hero .hero-media { position: absolute; inset: -8%; z-index: -2; will-change: transform; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transform: scale(1.05); }
.page-hero .page-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--cf-primary-bg) 2%, transparent 45%),
    linear-gradient(90deg, rgba(3,5,15,0.75) 0%, transparent 60%),
    var(--cf-gradient-hero);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  padding: var(--cf-space-8) clamp(1.5rem, 6vw, 5rem) var(--cf-space-7);
  display: grid;
  gap: var(--cf-space-3);
  max-width: 1100px;
}
.page-hero-content h1 { font-size: clamp(2rem, 5.5vw, 4.5rem); }
.page-hero-content .lead { max-width: 62ch; }

/* ── PANEL HOLOGRAPHIQUE GÉNÉRIQUE ──────────────────────────────────────── */
.panel-holo {
  position: relative;
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--cf-space-6);
}
.panel-holo--glow { animation: cf-border-pulse 4s ease-in-out infinite; }

/* ── ONGLETS PERSONNAGES ────────────────────────────────────────────────── */
.char-tabs-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, var(--cf-primary-bg) 75%, transparent);
  padding: var(--cf-space-4) clamp(1.25rem, 4vw, 4rem) var(--cf-space-5);
}
.char-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--cf-border-glow) transparent;
}
.char-tab {
  flex: 1 0 132px;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px 12px;
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  color: var(--cf-text-secondary);
  font-family: var(--cf-font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color var(--cf-duration-fast), background var(--cf-duration-fast), color var(--cf-duration-fast), transform var(--cf-duration-fast) var(--cf-ease-spring);
}
.char-tab:hover { transform: translateY(-3px); border-color: var(--cf-border-glow); color: var(--cf-text-primary); }
.char-tab[aria-selected="true"] {
  border-color: var(--cf-border-glow-strong);
  background: linear-gradient(180deg, rgba(255,184,48,0.14), rgba(255,184,48,0.03));
  color: var(--cf-gold);
  box-shadow: var(--cf-glow-gold-sm);
}
.char-tab img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid var(--tab-color, var(--cf-gold));
  box-shadow: 0 0 10px color-mix(in srgb, var(--tab-color, var(--cf-gold)) 45%, transparent);
}

/* ── PANNEAUX PERSONNAGE ────────────────────────────────────────────────── */
.char-panels { position: relative; }
.char-panel { display: none; }
.char-panel.is-active { display: block; animation: cf-fade-up 500ms var(--cf-ease-out-expo) both; }

.char-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--cf-space-6);
  align-items: start;
}

/* Portrait officiel du personnage */
.char-id {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  background: var(--cf-card-bg);
}
.char-id img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; display: block; }
.char-id::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--cf-card-bg-solid) 0%, transparent 30%);
  pointer-events: none;
}
.char-id-caption {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: var(--cf-space-4);
  display: grid;
  gap: 2px;
}
.char-id-caption .role { font-family: var(--cf-font-mono); font-size: 0.64rem; letter-spacing: 0.26em; color: var(--char-color, var(--cf-gold)); text-transform: uppercase; }
.char-id-caption strong { font-family: var(--cf-font-heading); font-size: 1.3rem; letter-spacing: 0.04em; }
.char-id--floating img { animation: cf-float 7s ease-in-out infinite; }

.char-main { display: grid; gap: var(--cf-space-6); }

.char-block h3 {
  display: flex;
  align-items: center;
  gap: var(--cf-space-3);
  color: var(--cf-gold);
  margin-bottom: var(--cf-space-4);
}
.char-block h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cf-border-glow), transparent); }
.char-block p { color: var(--cf-text-secondary); max-width: 72ch; }
.char-block p strong { color: var(--cf-text-primary); }

/* Faits rapides */
.fact-list { display: grid; gap: 8px; margin-top: var(--cf-space-4); }
.fact-list li {
  display: flex;
  gap: var(--cf-space-3);
  align-items: baseline;
  font-size: 0.92rem;
  color: var(--cf-text-secondary);
}
.fact-list li::before { content: "▸"; color: var(--char-color, var(--cf-gold)); flex: none; }

/* ── JAUGES DE STATISTIQUES ─────────────────────────────────────────────── */
.stats-list { display: grid; gap: var(--cf-space-4); }
.stat { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: var(--cf-space-3); }
.stat-label { font-family: var(--cf-font-heading); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-text-secondary); }
.stat-track {
  position: relative;
  height: 8px;
  background: rgba(122, 139, 160, 0.14);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  overflow: hidden;
}
.stat-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--char-color, var(--cf-gold)), color-mix(in srgb, var(--char-color, var(--cf-gold)) 55%, white));
  box-shadow: 0 0 10px color-mix(in srgb, var(--char-color, var(--cf-gold)) 60%, transparent);
  transform-origin: left center;
  transform: scaleX(0);
}
.stat.is-on .stat-fill { animation: cf-bar-fill 1.1s var(--cf-ease-out-expo) forwards; }
.stat-num { font-family: var(--cf-font-mono); color: var(--char-color, var(--cf-gold)); text-align: right; }

/* ── CITATION PASTACHE / EXTRAIT D'AMBIANCE ─────────────────────────────── */
.pulp-extract {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,184,48,0.05), transparent 55%),
    var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  border-left: 3px solid var(--char-color, var(--cf-gold));
  clip-path: var(--cf-clip-card);
  padding: var(--cf-space-6);
}
.pulp-extract .pulp-quote { padding: 0; border: none; }
.pulp-extract .pulp-quote::before { display: none; }
.pulp-note {
  margin-top: var(--cf-space-4);
  font-family: var(--cf-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cf-text-muted);
}

/* ── MOMENTS CLÉS ───────────────────────────────────────────────────────── */
.moment-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-space-4); }
.moment-card {
  padding: var(--cf-space-4);
  background: var(--cf-surface-raised);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  display: grid;
  gap: 6px;
  transition: transform var(--cf-duration-fast) var(--cf-ease-spring), border-color var(--cf-duration-fast);
}
.moment-card:hover { transform: translateY(-4px); border-color: var(--cf-border-glow); }
.moment-novel { font-family: var(--cf-font-heading); font-weight: 700; color: var(--cf-text-primary); font-size: 0.98rem; }
.moment-year { font-family: var(--cf-font-mono); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--char-color, var(--cf-gold)); }
.moment-card p { font-size: 0.86rem; color: var(--cf-text-secondary); line-height: 1.55; }

/* ── GALERIE DU PERSONNAGE ──────────────────────────────────────────────── */
.char-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-space-4); }
.char-gallery figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  aspect-ratio: 4/3;
}
.char-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cf-duration-slow) var(--cf-ease-out-expo), filter var(--cf-duration-base); filter: brightness(0.85); }
.char-gallery figure:hover img { transform: scale(1.06); filter: brightness(1); }
.char-gallery figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  font-family: var(--cf-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cf-text-secondary);
  background: linear-gradient(0deg, rgba(3,5,15,0.9), transparent);
}

/* ── SECTION RELATIONS + RADAR ──────────────────────────────────────────── */
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cf-space-6); align-items: stretch; }
.graph-wrap, .radar-wrap { min-height: 420px; display: grid; }
.graph-wrap svg, .radar-wrap svg { width: 100%; height: 100%; min-height: 400px; }

.graph-edge { stroke: rgba(122,139,160,0.35); stroke-width: 1.4; }
.graph-edge-label {
  font-family: var(--cf-font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  fill: var(--cf-text-muted);
  text-transform: uppercase;
}
.graph-node { cursor: pointer; }
.graph-node circle {
  fill: var(--cf-card-bg-solid);
  stroke: var(--node-color, var(--cf-gold));
  stroke-width: 2;
  transition: filter var(--cf-duration-fast), stroke-width var(--cf-duration-fast);
}
.graph-node:hover circle, .graph-node.is-active circle {
  filter: drop-shadow(0 0 8px var(--node-color, var(--cf-gold)));
  stroke-width: 3.2;
}
.graph-node text {
  font-family: var(--cf-font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  fill: var(--cf-text-primary);
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}

.radar-grid { stroke: rgba(122,139,160,0.18); fill: none; }
.radar-axis { stroke: rgba(122,139,160,0.25); }
.radar-label { font-family: var(--cf-font-mono); font-size: 9px; letter-spacing: 0.12em; fill: var(--cf-text-secondary); text-transform: uppercase; }
.radar-shape { fill-opacity: 0.1; stroke-width: 2; transform-origin: center; transform: scale(0.2); opacity: 0; transition: transform 900ms var(--cf-ease-spring), opacity 600ms ease; }
.radar-svg.is-on .radar-shape { transform: scale(1); opacity: 1; }
.radar-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; padding-top: var(--cf-space-3); }
.radar-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cf-font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-text-secondary); }
.radar-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ── TIMELINE ───────────────────────────────────────────────────────────── */
.timeline { position: relative; display: grid; gap: var(--cf-space-5); padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--cf-gold), var(--cf-cyan), transparent); opacity: 0.5; }
.timeline-item { position: relative; display: grid; gap: 4px; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cf-primary-bg);
  border: 2px solid var(--cf-gold);
  box-shadow: var(--cf-glow-gold-sm);
}
.timeline-date { font-family: var(--cf-font-mono); font-size: 0.7rem; letter-spacing: 0.26em; color: var(--cf-gold); }
.timeline-item h4 { color: var(--cf-text-primary); }
.timeline-item p { color: var(--cf-text-secondary); font-size: 0.94rem; max-width: 66ch; }

/* ── EASTER EGG — MODAL SIMON ───────────────────────────────────────────── */
.simon-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cf-z-lightbox));
  display: none;
  place-items: center;
  background: var(--cf-overlay-darker);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--cf-space-5);
}
.simon-modal.is-open { display: grid; animation: cf-fade-up 300ms ease both; }
.simon-modal-box { max-width: 560px; width: 100%; }
.simon-terminal {
  font-family: var(--cf-font-mono);
  color: var(--cf-simon-red);
  font-size: 0.95rem;
  line-height: 1.8;
  min-height: 6.5em;
  white-space: pre-wrap;
}
.simon-terminal::after { content: "█"; animation: cf-flicker 1s steps(1) infinite; }
.simon-close { margin-top: var(--cf-space-4); }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .char-layout { grid-template-columns: 1fr; }
  .char-id { max-width: 340px; }
  .duo-grid { grid-template-columns: 1fr; }
  .moment-list { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .char-gallery { grid-template-columns: 1fr; }
  .char-tab { flex-basis: 104px; }
  .stat { grid-template-columns: 96px 1fr 34px; }
}

/* ==========================================================================
   BLOC — BIBLIOTHÈQUE DES ROMANS (pages/romans.html)
   ========================================================================== */

/* Bandeau compteurs */
.counter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-5) var(--cf-space-7);
  padding: var(--cf-space-5) clamp(1.25rem, 4vw, 4rem);
  border-block: 1px solid var(--cf-border-subtle);
  background: rgba(8, 12, 26, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.counter-item { display: grid; gap: 2px; }
.series-progress { display: grid; gap: 6px; min-width: min(280px, 80vw); }
.series-progress-track {
  height: 8px;
  background: rgba(122, 139, 160, 0.16);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
#series-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--cf-gradient-gold);
  box-shadow: var(--cf-glow-gold-sm);
  transition: width 600ms var(--cf-ease-out-expo);
}

/* Recommandés */
.reco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-space-5); }

/* Barre d'outils */
.lib-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  gap: var(--cf-space-4);
  padding: var(--cf-space-4) clamp(1.25rem, 4vw, 4rem);
  background: linear-gradient(180deg, var(--cf-primary-bg) 88%, transparent);
}
.lib-search-row { display: flex; flex-wrap: wrap; gap: var(--cf-space-3); align-items: center; }
.lib-search {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: var(--cf-space-2);
  padding: 12px 16px;
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  transition: border-color var(--cf-duration-fast), box-shadow var(--cf-duration-fast);
}
.lib-search:focus-within { border-color: var(--cf-border-glow-strong); box-shadow: var(--cf-glow-gold-sm); }
.lib-search svg { flex: none; stroke: var(--cf-text-secondary); }
.lib-search input { flex: 1; color: var(--cf-text-primary); font-size: 0.95rem; }
.lib-search input::placeholder { color: var(--cf-text-muted); }
.lib-search kbd {
  font-family: var(--cf-font-mono);
  font-size: 0.62rem;
  color: var(--cf-text-muted);
  border: 1px solid var(--cf-border-subtle);
  border-radius: 4px;
  padding: 2px 6px;
}

.lib-filter-groups { display: flex; flex-wrap: wrap; gap: var(--cf-space-4); }
.filter-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.filter-group-label { font-family: var(--cf-font-mono); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cf-text-muted); margin-right: 4px; }
.chip {
  padding: 7px 14px;
  font-family: var(--cf-font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cf-text-secondary);
  background: rgba(12, 18, 35, 0.6);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  transition: all var(--cf-duration-fast) ease;
}
.chip:hover { color: var(--cf-text-primary); border-color: var(--cf-border-glow); }
.chip[aria-pressed="true"] {
  color: var(--cf-text-on-gold);
  background: var(--cf-gradient-gold);
  border-color: transparent;
  box-shadow: var(--cf-glow-gold-sm);
}

.lib-controls { display: flex; flex-wrap: wrap; gap: var(--cf-space-3); align-items: center; }
.lib-select {
  padding: 10px 14px;
  background: var(--cf-card-bg);
  color: var(--cf-text-primary);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  font-family: var(--cf-font-heading);
  font-weight: 600;
  font-size: 0.85rem;
}
.lib-count { font-family: var(--cf-font-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--cf-text-secondary); text-transform: uppercase; margin-left: auto; }

/* Grille masonry (colonnes CSS) */
.lib-grid { column-count: 3; column-gap: var(--cf-space-5); }
.lib-card {
  break-inside: avoid;
  margin-bottom: var(--cf-space-5);
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  overflow: hidden;
  transition: border-color var(--cf-duration-base), box-shadow var(--cf-duration-base), transform var(--cf-duration-base) var(--cf-ease-out-expo);
}
.lib-card:hover {
  border-color: var(--cf-border-glow);
  box-shadow: var(--cf-shadow-card), var(--cf-glow-gold-sm);
  transform: translateY(-4px);
}

/* Couverture */
.lib-cover { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--cf-secondary-bg); }
.lib-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cf-duration-slow) var(--cf-ease-out-expo); }
.lib-card:hover .lib-cover img { transform: scale(1.05); }
.lib-cover-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: var(--cf-space-5);
  background:
    radial-gradient(130% 90% at 80% 12%, hsl(var(--hue) 70% 42% / 0.38), transparent 60%),
    radial-gradient(90% 110% at 15% 85%, hsl(var(--hue) 80% 30% / 0.25), transparent 55%),
    var(--cf-gradient-space-band);
}
.lib-cover-fallback::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(232,235,242,0.14) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.3;
  mix-blend-mode: overlay;
}
.lib-cover-num {
  position: absolute;
  top: -10px; right: 4px;
  font-family: var(--cf-font-display);
  font-weight: 900;
  font-size: 7rem;
  line-height: 1;
  color: hsl(var(--hue) 85% 62% / 0.14);
  user-select: none;
}
.lib-cover-title {
  font-family: var(--cf-font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-shadow: 0 3px 20px rgba(0,0,0,0.65);
}
.lib-cover-fr { font-family: var(--cf-font-pulp); font-size: 0.9rem; color: hsl(var(--hue) 85% 75%); }

.lib-num {
  position: absolute;
  top: 10px; left: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--cf-gold);
  text-shadow: 0 0 8px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.8);
}
.lib-badges { position: absolute; top: 10px; right: 10px; display: grid; gap: 6px; justify-items: end; }
.badge {
  padding: 4px 10px;
  font-family: var(--cf-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  clip-path: var(--cf-clip-btn);
  backdrop-filter: blur(6px);
}
.badge--type { background: rgba(3,5,15,0.72); color: var(--cf-cyan); border: 1px solid var(--cf-border-cyan); }
.badge--dp { background: rgba(10, 42, 24, 0.82); color: #7CE3A8; border: 1px solid rgba(53, 200, 110, 0.4); }
.fav-btn {
  position: absolute;
  bottom: 10px; right: 10px;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--cf-text-secondary);
  background: rgba(3,5,15,0.72);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  backdrop-filter: blur(6px);
  transition: all var(--cf-duration-fast) ease;
}
.fav-btn:hover { color: var(--cf-gold); transform: scale(1.08); }
.fav-btn.is-fav { color: var(--cf-gold); border-color: var(--cf-border-glow-strong); box-shadow: var(--cf-glow-gold-sm); }

/* Corps de carte */
.lib-body { display: grid; gap: var(--cf-space-3); padding: var(--cf-space-5); }
.lib-title { font-family: var(--cf-font-display); font-size: 1.06rem; font-weight: 800; letter-spacing: 0.03em; line-height: 1.2; }
.lib-fr { font-family: var(--cf-font-pulp); font-size: 0.92rem; color: var(--cf-gold-light); }
.lib-pub { font-size: 0.64rem; letter-spacing: 0.2em; color: var(--cf-cyan); text-transform: uppercase; }
.lib-author { color: var(--cf-text-muted); font-style: italic; }
.lib-syn { color: var(--cf-text-secondary); line-height: 1.6; }
.lib-meta { color: var(--cf-text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-sep { color: var(--cf-text-muted); }
.stars { letter-spacing: 1px; font-size: 0.85rem; }
.st { color: rgba(122, 139, 160, 0.35); }
.st--on { color: var(--cf-gold); text-shadow: var(--cf-glow-gold-sm); }
.st--half { color: var(--cf-gold); opacity: 0.45; }

.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 3px 10px;
  font-family: var(--cf-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid var(--cf-border-subtle);
  color: var(--cf-text-secondary);
}
.tag--alien { color: #A8D8A8; border-color: rgba(168,216,168,0.35); }
.tag--combat { color: #FF9E7A; border-color: rgba(232,98,26,0.4); }
.tag--temps { color: #B98FE8; border-color: rgba(123,47,190,0.45); }
.tag--espace { color: #7ACBFF; border-color: rgba(0,150,255,0.35); }
.tag--infiltration { color: #FFD77A; border-color: rgba(255,184,48,0.4); }
.tag--mystere { color: #9FB6C9; border-color: rgba(122,139,160,0.45); }
.tag--humour { color: #7CE3A8; border-color: rgba(53,200,110,0.4); }
.tag--politique { color: #FF8FA3; border-color: rgba(139,0,0,0.55); }

.lib-villain { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding-top: 4px; border-top: 1px dashed var(--cf-border-subtle); }
.lib-villain-name { color: var(--cf-danger); font-weight: 600; font-family: var(--cf-font-heading); letter-spacing: 0.04em; }
.lib-planets { display: inline-flex; gap: 4px; }
.planet-dot { display: inline-grid; place-items: center; }

.gn-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.gn-track { height: 6px; background: rgba(122,139,160,0.16); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%); }
.gn-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cf-gold), var(--cf-orange), var(--cf-danger)); box-shadow: var(--cf-glow-gold-sm); }
.gn-val { font-size: 0.7rem; color: var(--cf-gold); }

.lib-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-3); padding-top: 6px; border-top: 1px dashed var(--cf-border-subtle); }
.progress-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--cf-text-secondary);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  transition: all var(--cf-duration-fast) ease;
}
.progress-btn:hover { color: var(--cf-gold); border-color: var(--cf-border-glow); }
.progress-track { display: inline-block; width: 54px; height: 4px; background: rgba(122,139,160,0.2); border-radius: 2px; overflow: hidden; }
.progress-fill { display: block; height: 100%; background: var(--cf-gradient-gold); transition: width var(--cf-duration-base) var(--cf-ease-out-expo); }

/* Vue timeline */
.lib-grid.is-timeline { column-count: unset; display: grid; gap: var(--cf-space-4); }
.lib-grid.is-timeline .lib-card { display: grid; grid-template-columns: 160px 1fr; margin-bottom: 0; }
.lib-grid.is-timeline .lib-cover { aspect-ratio: auto; min-height: 100%; }
.lib-grid.is-timeline .lib-cover-fallback { padding: var(--cf-space-4); }
.lib-grid.is-timeline .lib-cover-num { font-size: 3.4rem; }

/* État vide + à propos */
.empty-state { text-align: center; padding: var(--cf-space-8) var(--cf-space-5); display: grid; gap: var(--cf-space-3); justify-items: center; }
.pulp-about { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--cf-space-6); align-items: center; }
.pulp-about figure { overflow: hidden; clip-path: var(--cf-clip-card); border: 1px solid var(--cf-border-subtle); }
.pulp-about img { width: 100%; height: 100%; object-fit: cover; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1023px) {
  .lib-grid { column-count: 2; }
  .reco-grid { grid-template-columns: 1fr; }
  .pulp-about { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .lib-grid { column-count: 1; }
  .lib-grid.is-timeline .lib-card { grid-template-columns: 1fr; }
  .lib-grid.is-timeline .lib-cover { aspect-ratio: 2/3; }
  .counter-strip { gap: var(--cf-space-4); }
}

/* ==========================================================================
   BLOC — LORE & ANTAGONISTES (pages lore.html / antagonistes.html)
   ========================================================================== */

/* Grille des institutions / société */
.lore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-space-5); }
.lore-grid--six { grid-template-columns: repeat(3, 1fr); }
.insti-card {
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  padding: var(--cf-space-6);
  display: grid;
  gap: var(--cf-space-3);
  align-content: start;
  transition: border-color var(--cf-duration-base), transform var(--cf-duration-base) var(--cf-ease-out-expo), box-shadow var(--cf-duration-base);
}
.insti-card:hover { border-color: var(--cf-border-glow); transform: translateY(-5px); box-shadow: var(--cf-shadow-card); }
.insti-card h3 { color: var(--cf-gold); }
.insti-card p, .insti-card li { color: var(--cf-text-secondary); font-size: 0.94rem; }
.insti-card strong { color: var(--cf-text-primary); }
.insti-icon { font-size: 1.6rem; color: var(--cf-gold); line-height: 1; text-shadow: var(--cf-glow-gold-sm); }

/* Badges de niveau de menace */
.threat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-family: var(--cf-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  clip-path: var(--cf-clip-btn);
  border: 1px solid;
}
.threat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.threat--omega { color: #FF3B3B; border-color: rgba(255,59,59,0.5); background: rgba(255,59,59,0.08); animation: cf-border-pulse 2.6s ease-in-out infinite; }
.threat--alpha { color: #FF9E5A; border-color: rgba(232,98,26,0.5); background: rgba(232,98,26,0.08); }
.threat--beta  { color: #FFD77A; border-color: rgba(255,184,48,0.45); background: rgba(255,184,48,0.07); }
.threat--gamma { color: #7ACBFF; border-color: rgba(0,180,255,0.4); background: rgba(0,150,255,0.06); }
.threat--delta { color: #9FB6C9; border-color: rgba(122,139,160,0.4); background: rgba(122,139,160,0.06); }

/* VS SCREEN — duel d'affiche */
.vs-screen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  clip-path: var(--cf-clip-card);
  border: 1px solid var(--cf-border-subtle);
  min-height: 380px;
  isolation: isolate;
}
.vs-side { position: relative; overflow: hidden; }
.vs-side img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(0.92); transition: transform var(--cf-duration-slow) var(--cf-ease-out-expo), filter var(--cf-duration-base); }
.vs-side--hero { clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%); }
.vs-side--villain { clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%); margin-left: -48px; }
.vs-side--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,184,48,0.14), transparent 55%, rgba(3,5,15,0.65)); }
.vs-side--villain::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(139,0,0,0.24), transparent 55%, rgba(3,5,15,0.65)); }
.vs-screen:hover .vs-side--hero img { transform: scale(1.05); filter: saturate(1.05); }
.vs-name {
  position: absolute;
  bottom: 18px;
  z-index: 2;
  font-family: var(--cf-font-display);
  font-weight: 900;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vs-side--hero .vs-name { left: 20px; color: var(--cf-gold); text-shadow: var(--cf-glow-gold-md), 0 2px 10px rgba(0,0,0,0.8); }
.vs-side--villain .vs-name { right: 20px; color: #FF6B6B; text-shadow: 0 0 18px rgba(255,59,59,0.5), 0 2px 10px rgba(0,0,0,0.8); }
.vs-badge {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--cf-primary-bg);
  border: 2px solid var(--cf-border-glow-strong);
  font-family: var(--cf-font-display);
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--cf-text-primary);
  text-shadow: 0 0 14px rgba(255,184,48,0.8);
  box-shadow: var(--cf-glow-gold-md), inset 0 0 18px rgba(255,184,48,0.25);
  animation: cf-border-pulse 3s ease-in-out infinite;
}

/* Dossier vedette antagoniste */
.villain-dossier {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--cf-space-6);
  align-items: start;
}
.villain-dossier .char-id { border-color: rgba(255, 59, 59, 0.25); }

/* Galerie des menaces */
.villain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-space-5); }
.villain-card {
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  overflow: hidden;
  display: grid;
  align-content: start;
  transition: border-color var(--cf-duration-base), transform var(--cf-duration-base) var(--cf-ease-out-expo), box-shadow var(--cf-duration-base);
}
.villain-card:hover { border-color: rgba(255, 59, 59, 0.4); transform: translateY(-5px); box-shadow: var(--cf-shadow-card), var(--cf-glow-red-md); }
.villain-card figure { position: relative; aspect-ratio: 16/10; overflow: hidden; margin: 0; }
.villain-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cf-duration-slow) var(--cf-ease-out-expo); filter: brightness(0.85); }
.villain-card:hover figure img { transform: scale(1.06); filter: brightness(1); }
.villain-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 100% at 80% 10%, rgba(139,0,0,0.35), transparent 60%),
    var(--cf-gradient-space-band);
}
.villain-fallback span { font-family: var(--cf-font-display); font-size: 3rem; font-weight: 900; color: rgba(255, 107, 107, 0.16); }
.villain-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-3); padding: var(--cf-space-4) var(--cf-space-5) 0; }
.villain-head h3 { color: var(--cf-text-primary); font-size: 1.05rem; }
.villain-epithet { font-family: var(--cf-font-pulp); color: #FF9E9E; font-size: 0.9rem; padding: 0 var(--cf-space-5); }
.villain-body { padding: var(--cf-space-4) var(--cf-space-5) var(--cf-space-5); display: grid; gap: var(--cf-space-3); }
.villain-body p { color: var(--cf-text-secondary); font-size: 0.92rem; }
.villain-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.villain-meta .meta-chip {
  font-family: var(--cf-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cf-cyan);
  border: 1px solid var(--cf-border-cyan);
  border-radius: 100px;
  padding: 3px 10px;
}
.villain-meta .meta-chip--gold { color: var(--cf-gold); border-color: var(--cf-border-glow); }

@media (max-width: 1023px) {
  .lore-grid, .lore-grid--six, .villain-grid { grid-template-columns: 1fr 1fr; }
  .villain-dossier { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .lore-grid, .lore-grid--six, .villain-grid { grid-template-columns: 1fr; }
  .vs-screen { grid-template-columns: 1fr; }
  .vs-side--hero, .vs-side--villain { clip-path: none; margin: 0; min-height: 260px; }
  .vs-badge { width: 64px; height: 64px; font-size: 1.2rem; }
}

/* ==========================================================================
   BLOC — TECHNOLOGIE (pages/technologie.html) & ATLAS (pages/planetes.html)
   ========================================================================== */

/* Blueprint technique */
.blueprint {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 110, 180, 0.06), rgba(0, 110, 180, 0.1)),
    #081226;
  border: 1px solid rgba(0, 212, 255, 0.35);
  clip-path: var(--cf-clip-card);
  box-shadow: inset 0 0 40px rgba(0, 80, 160, 0.15), var(--cf-glow-cyan-md);
}
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}
.blueprint img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.blueprint-tag {
  position: absolute;
  z-index: 2;
  top: 12px; left: 12px;
  font-family: var(--cf-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--cf-cyan);
  background: rgba(3, 10, 25, 0.75);
  border: 1px solid rgba(0, 212, 255, 0.4);
  padding: 4px 10px;
  clip-path: var(--cf-clip-btn);
}
.blueprint--fallback { min-height: 320px; display: grid; place-items: center; }
.blueprint--fallback .glyph {
  font-family: var(--cf-font-display);
  font-size: 4rem;
  font-weight: 900;
  color: rgba(0, 212, 255, 0.2);
  text-shadow: var(--cf-glow-cyan-md);
  animation: cf-holo-breathe 4s ease-in-out infinite;
}

/* Fiches techniques */
.tech-entry {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--cf-space-6);
  align-items: start;
  margin-bottom: var(--cf-space-8);
}
.spec-list { display: grid; gap: 0; border-top: 1px solid var(--cf-border-subtle); }
.spec-list > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--cf-space-3);
  padding: 12px 4px;
  border-bottom: 1px solid var(--cf-border-subtle);
}
.spec-list dt { font-family: var(--cf-font-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-text-muted); align-self: center; }
.spec-list dd { font-family: var(--cf-font-heading); font-weight: 600; font-size: 0.98rem; color: var(--cf-cyan); letter-spacing: 0.03em; }

/* Atlas 3D */
.atlas-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--cf-space-5);
  align-items: stretch;
}
.atlas-stage {
  position: relative;
  min-height: min(72vh, 760px);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  overflow: hidden;
  background: radial-gradient(ellipse at center, #0A1030 0%, var(--cf-primary-bg) 75%);
}
.atlas-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.atlas-stage canvas:active { cursor: grabbing; }
.atlas-labels { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.holo-label {
  position: absolute;
  transform: translate(-50%, -140%);
  pointer-events: all;
  font-family: var(--cf-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cf-cyan);
  background: rgba(3, 10, 25, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.35);
  padding: 3px 9px;
  clip-path: var(--cf-clip-btn);
  backdrop-filter: blur(4px);
  transition: color var(--cf-duration-fast), border-color var(--cf-duration-fast);
  white-space: nowrap;
}
.holo-label:hover, .holo-label.is-active { color: var(--cf-gold); border-color: var(--cf-border-glow-strong); }

.atlas-hud {
  position: absolute;
  z-index: 4;
  left: 14px; right: 14px; bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(3, 5, 15, 0.7);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  backdrop-filter: blur(8px);
}
.atlas-hud select { max-width: 320px; }
.atlas-caption {
  flex-basis: 100%;
  font-family: var(--cf-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--cf-gold);
  text-transform: uppercase;
}

.atlas-panel {
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  padding: var(--cf-space-5);
  display: grid;
  gap: var(--cf-space-3);
  align-content: start;
  overflow-y: auto;
  max-height: min(72vh, 760px);
}
.atlas-panel h3 { color: var(--cf-gold); font-family: var(--cf-font-display); letter-spacing: 0.05em; }
.atlas-panel .planet-hero { clip-path: var(--cf-clip-btn); overflow: hidden; border: 1px solid var(--cf-border-subtle); }
.atlas-panel .planet-hero img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.atlas-poi { display: grid; gap: 6px; }
.atlas-poi li { display: flex; gap: 8px; font-size: 0.88rem; color: var(--cf-text-secondary); }
.atlas-poi li::before { content: "▸"; color: var(--cf-cyan); }
.atlas-novels { display: flex; flex-wrap: wrap; gap: 6px; }

.atlas-fallback-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cf-space-4); }
.atlas-fallback-grid figure {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--cf-border-subtle);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 30%, var(--pc1, #334), var(--pc2, #112));
}
.atlas-fallback-grid figcaption { font-family: var(--cf-font-mono); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cf-text-primary); text-shadow: 0 0 8px #000; }

/* Cartes planètes (atlas) */
.atlas-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cf-space-5); }
.atlas-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  overflow: hidden;
  transition: border-color var(--cf-duration-base), transform var(--cf-duration-base) var(--cf-ease-out-expo);
}
.atlas-card:hover { border-color: var(--cf-border-glow); transform: translateY(-4px); }
.atlas-card figure { min-height: 100%; overflow: hidden; margin: 0; }
.atlas-card figure img { width: 100%; height: 100%; object-fit: cover; }
.atlas-card .planet-sphere {
  width: 100%; height: 100%; min-height: 170px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, var(--pc1, #334), var(--pc2, #0a0f1e));
}
.planet-sphere i {
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--pc1), var(--pc2));
  box-shadow: inset -14px -10px 26px rgba(0,0,0,0.55), 0 0 18px color-mix(in srgb, var(--pc1) 50%, transparent);
}
.atlas-card-body { padding: var(--cf-space-5); display: grid; gap: 8px; align-content: start; }
.atlas-card-body h3 { color: var(--cf-gold); letter-spacing: 0.06em; }
.atlas-card-body p { font-size: 0.9rem; color: var(--cf-text-secondary); }
.atlas-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

@media (max-width: 1023px) {
  .tech-entry { grid-template-columns: 1fr; }
  .atlas-wrap { grid-template-columns: 1fr; }
  .atlas-panel { max-height: none; }
  .atlas-cards { grid-template-columns: 1fr; }
  .atlas-fallback-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .atlas-card { grid-template-columns: 1fr; }
  .atlas-card figure { aspect-ratio: 16/9; }
  .spec-list > div { grid-template-columns: 1fr; }
}

/* ==========================================================================
   BLOC — BESTIAIRE (pages/bestiary.html) & GALERIE (pages/galerie.html)
   ========================================================================== */

/* Fiche spécimen naturaliste */
.specimen {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--cf-space-6);
  margin-bottom: var(--cf-space-8);
  align-items: start;
}
.specimen-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
}
.specimen-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.98); }
.specimen-media .specimen-stamp {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--cf-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: var(--cf-text-secondary);
  background: rgba(3,5,15,0.72);
  border: 1px solid var(--cf-border-subtle);
  padding: 4px 10px;
  clip-path: var(--cf-clip-btn);
  backdrop-filter: blur(6px);
}
.specimen-fallback {
  min-height: 340px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(140% 100% at 20% 10%, rgba(0,212,255,0.10), transparent 55%),
    var(--cf-gradient-space-band);
}
.specimen-fallback .glyph { font-family: var(--cf-font-display); font-size: 4.4rem; color: rgba(0,212,255,0.22); animation: cf-holo-breathe 4s ease-in-out infinite; }

.specimen-body { display: grid; gap: var(--cf-space-4); align-content: start; }
.specimen-body h3 { font-size: 1.35rem; }
.specimen-latin { font-family: var(--cf-font-pulp); color: var(--cf-gold-light); font-size: 0.95rem; }
.specimen-body p { color: var(--cf-text-secondary); font-size: 0.95rem; }
.specimen-body strong { color: var(--cf-text-primary); }

.danger-row { display: flex; align-items: center; gap: var(--cf-space-3); }
.danger-meter { display: inline-flex; gap: 4px; }
.danger-meter i {
  width: 26px; height: 8px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
  background: rgba(122,139,160,0.18);
}
.danger-meter i.on { background: linear-gradient(90deg, var(--cf-orange), var(--cf-danger)); box-shadow: var(--cf-glow-red-md); }
.danger-lbl { font-family: var(--cf-font-mono); font-size: 0.62rem; letter-spacing: 0.22em; color: var(--cf-danger); text-transform: uppercase; }

.spec-row { display: grid; grid-template-columns: 150px 1fr; gap: var(--cf-space-3); padding: 9px 0; border-bottom: 1px dashed var(--cf-border-subtle); }
.spec-row dt { font-family: var(--cf-font-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cf-text-muted); align-self: center; }
.spec-row dd { color: var(--cf-text-secondary); font-size: 0.92rem; }

.bestiary-lower {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cf-space-5);
}
.anatomy, .scale-box {
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  padding: var(--cf-space-5);
}
.anatomy h4, .scale-box h4 { color: var(--cf-gold); margin-bottom: var(--cf-space-3); font-size: 1rem; letter-spacing: 0.08em; }
.anatomy svg { width: 100%; height: auto; }
.anat-line { stroke: rgba(0,212,255,0.6); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.anat-dot { fill: var(--cf-cyan); }
.anat-label { font-family: var(--cf-font-mono); font-size: 7.5px; letter-spacing: 0.1em; fill: var(--cf-text-secondary); text-transform: uppercase; }
.anat-shape { stroke: rgba(232,235,242,0.75); stroke-width: 1.6; fill: rgba(0,212,255,0.06); }

.scale-bar-row { display: grid; grid-template-columns: 92px 1fr 76px; align-items: center; gap: 10px; margin-bottom: 12px; }
.scale-bar-row .lbl { font-family: var(--cf-font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-text-secondary); }
.scale-bar-row .val { font-family: var(--cf-font-mono); font-size: 0.66rem; color: var(--cf-gold); text-align: right; }
.scale-track { height: 12px; background: rgba(122,139,160,0.12); position: relative; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); }
.scale-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--cf-cyan), var(--cf-gold)); box-shadow: var(--cf-glow-cyan-md); }
.scale-fill--human { background: var(--cf-text-secondary); box-shadow: none; }

/* ── GALERIE ────────────────────────────────────────────────────────── */
.gal-toolbar { position: sticky; top: 0; z-index: 40; padding: var(--cf-space-4) clamp(1.25rem, 4vw, 4rem); background: linear-gradient(180deg, var(--cf-primary-bg) 88%, transparent); display: flex; flex-wrap: wrap; gap: var(--cf-space-4); align-items: center; }
.gal-grid { columns: 3 330px; column-gap: var(--cf-space-4); padding: 0 clamp(1.25rem, 4vw, 4rem); }
.gal-item { display: block; break-inside: avoid; margin-bottom: var(--cf-space-4); position: relative; overflow: hidden; clip-path: var(--cf-clip-btn); border: 1px solid var(--cf-border-subtle); }
.gal-item img { width: 100%; display: block; transition: transform var(--cf-duration-slow) var(--cf-ease-out-expo), filter var(--cf-duration-base); filter: brightness(0.88); }
.gal-item:hover img { transform: scale(1.045); filter: brightness(1.04); }
.gal-item::after {
  content: attr(data-title);
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 12px 10px;
  font-family: var(--cf-font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cf-text-primary);
  background: linear-gradient(0deg, rgba(3,5,15,0.92), transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--cf-duration-base), transform var(--cf-duration-base) var(--cf-ease-out-expo);
}
.gal-item:hover::after { opacity: 1; transform: none; }

/* Visionneuse */
.lightbox { position: fixed; inset: 0; z-index: var(--cf-z-lightbox); display: grid; grid-template-rows: 1fr auto; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(2,3,9,0.94); backdrop-filter: blur(8px); }
.lightbox-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--cf-space-6) var(--cf-space-6) var(--cf-space-3);
}
.lightbox-img {
  max-width: 100%;
  max-height: calc(100dvh - 200px);
  object-fit: contain;
  border: 1px solid var(--cf-border-subtle);
  cursor: zoom-in;
  transition: transform var(--cf-duration-base) var(--cf-ease-out-expo);
}
.lightbox-img.is-zoomed { transform: scale(2.1); cursor: zoom-out; }
.lightbox-caption {
  position: absolute;
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: var(--cf-space-4);
  align-items: baseline;
  padding: 8px 18px;
  background: rgba(3,5,15,0.75);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
}
.lightbox-title { font-family: var(--cf-font-heading); font-weight: 700; letter-spacing: 0.08em; }
.lightbox-meta { color: var(--cf-cyan); font-size: 0.62rem; letter-spacing: 0.2em; }
.lightbox-ui {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: var(--cf-space-4);
}
.lb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-family: var(--cf-font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: var(--cf-text-primary);
  background: var(--cf-card-bg);
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-btn);
  transition: all var(--cf-duration-fast) ease;
}
.lb-btn:hover { color: var(--cf-gold); border-color: var(--cf-border-glow-strong); }
.lb-btn--gold { color: var(--cf-text-on-gold); background: var(--cf-gradient-gold); }
.lb-btn--gold:hover { color: var(--cf-text-on-gold); box-shadow: var(--cf-glow-gold-md); }
.lb-btn.is-on { color: var(--cf-gold); border-color: var(--cf-border-glow-strong); box-shadow: var(--cf-glow-gold-sm); }
.lb-counter { align-self: center; color: var(--cf-text-secondary); font-size: 0.72rem; letter-spacing: 0.2em; }
.lb-key { font-size: 0.55rem; color: var(--cf-text-muted); }

/* Section Roman Graphique */
.comic-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cf-space-5); }
.comic-page {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cf-border-subtle);
  clip-path: var(--cf-clip-card);
  background: var(--cf-card-bg);
  transition: transform var(--cf-duration-base) var(--cf-ease-spring), border-color var(--cf-duration-base);
}
.comic-page:hover { transform: translateY(-6px) rotate(-0.5deg); border-color: var(--cf-border-glow); }
.comic-page img { width: 100%; display: block; }
.comic-page figcaption {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--cf-border-subtle);
}
.comic-page figcaption strong { font-family: var(--cf-font-heading); letter-spacing: 0.08em; font-size: 0.9rem; }

@media (max-width: 1023px) {
  .specimen, .bestiary-lower { grid-template-columns: 1fr; }
  .comic-shelf { grid-template-columns: 1fr; }
  .lightbox-caption { position: static; transform: none; margin-top: 10px; }
}
@media (max-width: 639px) {
  .gal-grid { columns: 2 180px; }
}