/* ════════════════════════════════════════════════════════════════
   CITÉ D'ASCENSION — Cathédrale de lumière (refonte massive v3)
   Direction : Atlantis × Origin × Tarot ascendant
   ════════════════════════════════════════════════════════════════ */
/* Cinzel + Cinzel Decorative imported globally via sgc-variables.css */

#sf_city { overflow-y: auto; }

/* Variables locales scope Cité (override accent global) */
.city-page {
  --cit-parme:   #d8c0ff;
  --cit-parme2:  #c890ff;
  --cit-deep:    #1a0e3a;
  --cit-deeper:  var(--surface-card);
  --cit-gold:    var(--gold-bright);
  --cit-gold2:   #ffb84d;
  --cit-ink:     #6f42c1;
  --cit-frame:   rgba(216,192,255,0.45);
  --cit-frame-strong: rgba(216,192,255,0.85);
  --cit-glow:    0 0 24px rgba(216,192,255,0.55);
  --cit-glow-gold: 0 0 24px rgba(var(--gold-bright-rgb), 0.55);
  --cit-rune-color: rgba(216,192,255,0.06);

  padding: 28px 32px 60px;
  max-width: 1750px;
  margin: 0 auto;
  font-family: system-ui, sans-serif;
  color: #e8dcff;
  position: relative;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(140,90,200,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(255,184,77,0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface-card) 0%, var(--bg) 100%);
  overflow-x: hidden;
}

/* Voile de runes flottantes — pseudo-élément avec SVG inline */
.city-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(216,192,255,0.06) 0%, transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(var(--gold-bright-rgb), 0.05) 0%, transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><g fill='none' stroke='%23d8c0ff' stroke-opacity='0.04' stroke-width='1'><circle cx='100' cy='100' r='40'/><circle cx='100' cy='100' r='80'/><path d='M100,60 L100,140 M60,100 L140,100' /><circle cx='480' cy='150' r='55'/><path d='M460,130 L500,170 M460,170 L500,130'/><circle cx='200' cy='450' r='35'/><path d='M180,450 L220,450 M200,430 L200,470'/><polygon points='400,400 440,440 400,480 360,440'/><circle cx='550' cy='500' r='25'/></g></svg>");
  background-size: cover, cover, 600px 600px;
  background-repeat: no-repeat, no-repeat, repeat;
  pointer-events: none;
  z-index: 0;
  animation: city-runes-drift 80s linear infinite;
}
@keyframes city-runes-drift {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 600px 600px; }
}

/* Particules de cendres dorées qui montent (additif overlay) */
.city-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 80%, rgba(var(--gold-bright-rgb), 0.7), transparent 50%),
    radial-gradient(1.5px 1.5px at 35% 60%, rgba(216,192,255,0.6), transparent 50%),
    radial-gradient(2px 2px at 55% 90%, rgba(var(--gold-bright-rgb), 0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 75% 50%, rgba(216,192,255,0.7), transparent 50%),
    radial-gradient(2px 2px at 90% 75%, rgba(var(--gold-bright-rgb), 0.6), transparent 50%),
    radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1.5px 1.5px at 65% 25%, rgba(216,192,255,0.4), transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: city-embers-rise 18s linear infinite;
  opacity: 0.7;
}
@keyframes city-embers-rise {
  0%   { transform: translateY(0); opacity: 0.7; }
  50%  { opacity: 0.9; }
  100% { transform: translateY(-100vh); opacity: 0; }
}

.city-page > * { position: relative; z-index: 1; }

.city-loading, .city-error {
  padding: 50px;
  text-align: center;
  color: var(--textsoft);
  font-family:var(--font-display);
  font-size:var(--fs-base);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.city-error { color: var(--danger); }

/* ── États non-fondés (locked / intro / arc / form) ── */
.city-locked, .city-intro, .city-arc, .city-found-form {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.10), rgba(0,0,0,0.45));
  border: 1px solid rgba(var(--accent-rgb),0.30);
  border-radius: 20px;
  padding: 50px 40px;
  text-align: center;
  margin: 30px auto;
  max-width: 700px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35), inset 0 1px 0 var(--tint-4);
  position: relative;
  overflow: hidden;
}
.city-locked::before, .city-intro::before, .city-arc::before, .city-found-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.city-locked-icon, .city-intro-icon, .city-found-icon {
  font-size: 64px;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 20px rgba(var(--accent-rgb),0.6));
  display: inline-block;
  animation: city-icon-float 3s ease-in-out infinite;
}
@keyframes city-icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.city-locked h2, .city-intro h2, .city-arc h2, .city-found-form h2 {
  font-family:var(--font-display);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 24px;
  margin: 0 0 16px;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(var(--accent-rgb),0.5);
}
.city-locked p, .city-intro p, .city-arc p, .city-found-form p {
  margin: 10px 0;
  font-size:var(--fs-md);
  line-height: 1.7;
  color: var(--textsoft);
}
.city-current { font-size: 19px !important; color: var(--text) !important; font-family:var(--font-display); letter-spacing: 1.5px; }

.city-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 14px 28px;
  background: rgba(var(--accent-rgb),0.18);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.50);
  border-radius:var(--radius-md);
  font-family:var(--font-display);
  font-weight: 700;
  font-size:var(--fs-base);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition:var(--btn-tr);
  position: relative;
  overflow: hidden;
}
.city-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.6s ease;
}
.city-btn:hover::after { left: 100%; }
.city-btn:hover { background: rgba(var(--accent-rgb),0.32); transform: translateY(var(--btn-lift)); box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.40); }
.city-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.city-btn small { font-family: system-ui, sans-serif; font-weight: 700; opacity: 0.85; letter-spacing: 1px; }
.city-btn-primary {
  background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb),0.7));
  color:var(--textbright);
  border: none;
  position: relative;
}
/* Audit fluidité 31/08 : pulse box-shadow → halo max pré-peint sur ::after animé
   en opacity (composité GPU) — plus aucun repaint par frame. */
.city-btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 32px rgba(var(--accent-rgb),0.95);
  opacity: 0; animation: city-pulse 2s ease-in-out infinite;
}
@keyframes city-pulse { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

.city-input {
  width: 100%;
  max-width: 360px;
  padding: 14px 18px;
  margin: 18px 0;
  background: rgba(0,0,0,0.40);
  border: 1px solid rgba(var(--accent-rgb),0.50);
  border-radius:var(--radius-md);
  color:var(--textbright);
  font-size: 16px;
  font-family:var(--font-display);
  letter-spacing: 1.5px;
  text-align: center;
  outline: none;
  transition: all 0.2s ease;
}
.city-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.25), inset 0 0 12px rgba(var(--accent-rgb),0.10); }

/* ── Progress bar arc ── */
.city-arc-bar {
  position: relative; width: 100%; max-width: 520px; height: 36px;
  margin: 24px auto;
  background: rgba(0,0,0,0.40); border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb),0.40);
}
.city-arc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),0.85)); transition: width 0.4s ease; box-shadow: 0 0 16px rgba(var(--accent-rgb),0.6); }
.city-arc-step { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'Orbitron'; font-size:var(--fs-base); letter-spacing: 2px; color:var(--textbright); text-shadow: 0 1px 4px var(--shade-7); }
.city-arc-hint { font-size: 12px !important; color: var(--warn) !important; font-style: italic; margin-top: 12px !important; }

/* ─────────────────────────────────────────────────────────────────
   HERO "Sceau de la Cité" — bannière monumentale
   Layout : sceau circulaire SVG | nom + bandeau bonus | 4 jauges circulaires
   ───────────────────────────────────────────────────────────────── */
.city-hero-card {
  /* CT1 audit UI/UX 27/05 — compress hero pour pousser le contenu actionnable
     (sous-tabs + bâtiments) au-dessus du fold. Padding réduit, h1 36px, gauges
     compactes, meta 11px. Pour les details, voir .city-hero-name h1 + .city-gauge
     + .city-hero-meta-item plus bas. */
  position: relative;
  background:
    linear-gradient(90deg, rgba(10,5,32,0.40) 0%, rgba(10,5,32,0.10) 35%, rgba(10,5,32,0.00) 60%, rgba(10,5,32,0.20) 100%),
    url('../img/city-hero.png.webp') center / cover no-repeat,
    radial-gradient(ellipse at top, rgba(216,192,255,0.10) 0%, transparent 70%);
  background-color: var(--surface-card);
  border: 1px solid var(--cit-frame);
  border-radius: 18px;
  padding: 16px 22px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.45),
    inset 0 1px 0 var(--tint-4),
    0 0 60px rgba(140,90,200,0.12);
}
/* Bordure runique animée en haut */
.city-hero-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--cit-parme) 20%, var(--cit-gold) 50%, var(--cit-parme) 80%, transparent 100%);
  background-size: 200% 100%;
  animation: city-hero-shimmer 6s linear infinite;
  opacity: 0.85;
}
@keyframes city-hero-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
/* Glyph runic en filigrane derrière le hero */
.city-hero-card::after {
  content: '✧';
  position: absolute;
  right: -40px; top: -40px;
  font-size: 220px;
  color: rgba(216,192,255,0.04);
  font-family:var(--font-mystic-deco);
  pointer-events: none;
  line-height: 1;
}

/* Layout 3 colonnes : sceau | bloc nom+bonus | jauges */
.city-hero-grid {
  /* CT1 audit 27/05 — gap reduit + seal 140px (vs 180) */
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 20px;
  align-items: center;
}

/* ── 1. Sceau de la Cité (SVG) ── */
.city-seal {
  position: relative;
  width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center;
}
.city-seal svg { width: 100%; height: 100%; }
.city-seal .seal-outer {
  animation: city-seal-rotate 120s linear infinite;
  transform-origin: 50% 50%;
}
.city-seal .seal-glyph {
  animation: city-seal-glyph-pulse 4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes city-seal-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes city-seal-glyph-pulse {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 8px rgba(216,192,255,0.5)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 18px rgba(var(--gold-bright-rgb), 0.7)); }
}
.city-seal-roman {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family:var(--font-mystic-deco);
  font-size: 40px;
  font-weight: 900;
  color: var(--cit-gold);
  text-shadow: 0 0 12px rgba(var(--gold-bright-rgb), 0.7), 0 2px 4px rgba(0,0,0,0.8);
  letter-spacing: 2px;
  pointer-events: none;
}

/* ── 2. Bloc nom + titre rolepay + bandeau bonus ── */
.city-hero-name-block { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.city-hero-name { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.city-hero-name h1 {
  /* CT1 audit 27/05 — 52px → 36px pour reduire footprint vertical */
  font-family:var(--font-mystic-deco);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0;
  background: linear-gradient(135deg, #fff 0%, #fff5d8 30%, var(--cit-gold) 50%, #fff5d8 70%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 4px var(--shade-8),
    0 0 18px var(--shade-7),
    0 0 32px rgba(var(--gold-bright-rgb), 0.35);
  animation: city-hero-name-shimmer 8s linear infinite;
  line-height: 0.95;
}
@keyframes city-hero-name-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.city-hero-faction {
  font-family:var(--font-mystic);
  font-size:var(--fs-xs);
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--cit-parme);
  padding: 6px 14px;
  border: 1px solid var(--cit-frame);
  border-radius:var(--radius-sm);
  background: rgba(216,192,255,0.10);
  text-shadow: 0 0 8px rgba(216,192,255,0.6);
  text-transform: uppercase;
}
.city-hero-rolepay {
  font-family:var(--font-mystic);
  font-style: italic;
  font-size:var(--fs-md);
  color: #f0e6ff;
  letter-spacing: 1.5px;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 10px var(--shade-6);
}

/* Bandeau coordonnées + naq + pts (sous le titre) */
.city-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 4px; }
.city-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  letter-spacing: 1.2px;
  color: #f0e6ff;
  text-shadow: 0 1px 4px var(--shade-7), 0 0 10px var(--shade-5);
  padding: 4px 10px;
  background: rgba(10,5,32,0.55);
  border-radius: 6px;
  border: 1px solid rgba(216,192,255,0.15);
}
.city-hero-meta-item img, .city-hero-meta-item .city-pts-ico {
  width: 18px; height: 18px;
  filter: drop-shadow(0 0 5px rgba(216,192,255,0.6));
}
.city-hero-meta-item b { color:var(--textbright); font-weight: 700; font-size:var(--fs-base); }

/* Bandeau bonus actifs en grands pictogrammes — passe sous le bloc nom */
.city-hero-bonuses {
  /* CT1 audit 27/05 (revisé) — items width 170+ pour eviter textes coupes,
     auto-rows 42px pour layout uniforme, max-height ~98px = 2 rangees + scroll. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  grid-auto-rows: 42px;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 12px;
  max-height: 102px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(216,192,255,0.3) transparent;
  background: linear-gradient(90deg, rgba(10,5,32,0.78), rgba(10,5,32,0.65));
  border-radius:var(--radius-md);
  border: 1px solid rgba(216,192,255,0.22);
  backdrop-filter: blur(4px);
}
.city-hero-bonuses::-webkit-scrollbar { width:6px; }
.city-hero-bonuses::-webkit-scrollbar-thumb { background:rgba(216,192,255,0.3); border-radius:3px; }
/* Items : icon centre + bloc 2 lignes (val + lbl). Lbl ellipse si trop long. */
.city-hero-bonuses .city-hero-bonus { padding:4px 8px; min-width:0; }
.city-hero-bonuses .city-hero-bonus > div { min-width:0; flex:1; }
.city-hero-bonuses .city-hero-bonus .b-val { font-size:var(--fs-sm); line-height:1.1; font-weight:700; white-space:nowrap; }
.city-hero-bonuses .city-hero-bonus .b-lbl { font-size:10px; line-height:1.15; opacity:0.8; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.city-hero-bonus {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  font-size:var(--fs-sm);
  border-radius:var(--radius);
  background: rgba(0,0,0,0.55);
  
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: city-hero-bonus-fadein 0.5s ease-out backwards;
 box-shadow:inset 3px 0 0 0 var(--cit-parme); }
.city-hero-bonus:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 18px rgba(216,192,255,0.30);
}
.city-hero-bonus::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(216,192,255,0.18), transparent);
  pointer-events: none;
  /* Audit fluidité 31/08 : animer left = layout+paint chaque frame → transform (composité) */
  transform: translateX(-100%);
  animation: city-hero-bonus-shimmer 6s linear infinite;
  animation-delay: var(--shimmer-delay, 0s);
}
@keyframes city-hero-bonus-shimmer {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@keyframes city-hero-bonus-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Stagger fadein selon position dans le grid */
.city-hero-bonus:nth-child(1) { animation-delay: 0.05s; --shimmer-delay: 0s; }
.city-hero-bonus:nth-child(2) { animation-delay: 0.10s; --shimmer-delay: 0.5s; }
.city-hero-bonus:nth-child(3) { animation-delay: 0.15s; --shimmer-delay: 1s; }
.city-hero-bonus:nth-child(4) { animation-delay: 0.20s; --shimmer-delay: 1.5s; }
.city-hero-bonus:nth-child(5) { animation-delay: 0.25s; --shimmer-delay: 2s; }
.city-hero-bonus:nth-child(6) { animation-delay: 0.30s; --shimmer-delay: 2.5s; }
.city-hero-bonus:nth-child(7) { animation-delay: 0.35s; --shimmer-delay: 3s; }
.city-hero-bonus:nth-child(8) { animation-delay: 0.40s; --shimmer-delay: 3.5s; }
.city-hero-bonus:nth-child(n+9) { animation-delay: 0.45s; --shimmer-delay: 4s; }
.city-hero-bonus .b-ico {
  font-size:var(--fs-2xl);
  filter: drop-shadow(0 0 6px rgba(216,192,255,0.6));
  flex-shrink: 0;
}
.city-hero-bonus > div {
  flex: 1; min-width: 0; /* permet à b-lbl de wrap au lieu d'être tronqué */
}
.city-hero-bonus .b-val {
  font-family:var(--font-display);
  font-weight: 700;
  font-size:var(--fs-md);
  color: var(--cit-gold);
  white-space: normal;
}
.city-hero-bonus .b-lbl {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(216,192,255,0.7);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── 3. 4 jauges circulaires (Sanctuaire / Forge / Astre / Bibliothèque) ── */
.city-gauges {
  display: grid;
  grid-template-columns: repeat(2, auto);
  /* 25/08 — L'etiquette de chaque jauge est en `position:absolute; bottom:-16px`,
     donc elle vit SOUS la boite de 64 px sans en occuper la place. Avec 14 px
     d'ecart entre les rangees, les etiquettes de la premiere tombaient DANS les
     jauges de la seconde : mesure, quatre collisions (« SANCTUAIRE » 308-320 px
     contre la jauge « ASTRE » 318-382 px), et « BIBLIOTHEQUE » sortait meme de
     la banniere. On degage la hauteur que l'etiquette occupe reellement. */
  column-gap: 18px;
  row-gap: 34px;
  padding: 0 10px 20px;
}
.city-gauge {
  /* CT1 audit 27/05 — gauges 84→64 pour reduire grid 2x2 footprint */
  position: relative;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}
/* 25/08 — L'ICONE ETAIT PEINTE PAR-DESSUS LE CHIFFRE. Ce selecteur visait
   « tout svg dans une jauge » : il attrapait l'anneau (enfant direct) ET l'icone
   Lucide, nichee dans `.city-gauge-inner > .city-gauge-ico`. L'icone heritait de
   `position:absolute`, donc son span retombait a 0 px de haut (mesure : icoSpan
   0x0, svg 18x37 en position absolue a y 234) et son glyphe se peignait sur les
   chiffres, a y 245-261.
   🔑 Un selecteur qui vise un CONTENEUR emporte tout ce qu'il contient. Ici
   l'anneau est le seul ENFANT DIRECT : on le nomme comme tel. */
.city-gauge > svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.city-gauge .gauge-bg { stroke: rgba(216,192,255,0.12); fill: none; stroke-width: 5; }
.city-gauge .gauge-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dasharray 0.8s ease-out;
  filter: drop-shadow(0 0 6px currentColor);
}
.city-gauge.g-sanct .gauge-fill { stroke: var(--cit-gold); color: var(--cit-gold); }
.city-gauge.g-forge .gauge-fill { stroke: #ff8b3a; color: #ff8b3a; }
.city-gauge.g-astre .gauge-fill { stroke: var(--cit-parme); color: var(--cit-parme); }
.city-gauge.g-bibli .gauge-fill { stroke: #7ed3ff; color: #7ed3ff; }
.city-gauge-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.city-gauge-ico { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.city-gauge-val {
  font-family:var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color:var(--textbright);
  line-height: 1;
}
.city-gauge-max {
  font-size: 9px;
  color: rgba(216,192,255,0.6);
  letter-spacing: 0.5px;
}
.city-gauge-lbl {
  position: absolute;
  /* Centre explicitement : sans `left`, une boite absolue se pose a sa position
     statique et « BIBLIOTHEQUE » (84 px sur une jauge de 64) debordait a droite. */
  left: 50%;
  transform: translateX(-50%);
  max-width: 96px;
  text-align: center;
  bottom: -16px;
  font-family:var(--font-mystic);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(216,192,255,0.7);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .city-hero-grid { grid-template-columns: 140px 1fr; }
  .city-gauges { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); justify-content: center; }
}
@media (max-width: 768px) {
  .city-hero-card { padding: 22px 18px; }
  .city-hero-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .city-hero-name { justify-content: center; }
  .city-hero-name h1 { font-size: 36px; letter-spacing: 3px; }
  .city-seal { margin: 0 auto; width: 140px; height: 140px; }
  .city-gauges { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .city-gauge { width: 64px; height: 64px; }
  .city-gauge-val { font-size:var(--fs-base); }
}

/* ── Tabs ── */
/* Sept onglets en `flex-wrap` : mesure, 2 rangees a 1600 px et 3 a 1440 et
   1280 px. Une navigation sur trois lignes n'est plus une barre — et l'onglet
   isole en derniere ligne se lit comme une erreur d'affichage.
   Une seule ligne qui glisse : la barre garde sa forme a toutes les largeurs. */
/* 25/08 — ESSAI ANNULE, garde en note. J'avais mis la barre sur UNE ligne qui
   glisse pour eviter ses trois rangees. Resultat signale par le proprietaire :
   le dernier onglet (« Saison ») sortait du cadre et devenait INATTEIGNABLE —
   la barre glisse au doigt, mais a la souris rien ne l'y invite et rien ne le
   montre.
   🔑 Un onglet qu'on ne voit pas est un onglet qui n'existe pas. Trois rangees
   est laid ; un onglet perdu est casse. On revient au retour a la ligne, qui ne
   peut RIEN cacher, et on resserre les onglets pour qu'ils tiennent plus souvent
   sur une seule. */
.city-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(var(--accent-rgb),0.20);
  margin-bottom: 22px;
  flex-wrap: wrap;
  padding-bottom: 0;
}
.city-tab { flex: 0 0 auto; white-space: nowrap; }
.city-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--textsoft);
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight: 600;
  letter-spacing: 1.2px;
  padding: 14px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-transform: uppercase;
}
.city-tab::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%; right: 50%;
  height: 2px;
  background: var(--accent);
  transition: left 0.25s ease, right 0.25s ease;
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.6);
}
.city-tab:hover { color: var(--text); background: rgba(var(--accent-rgb),0.05); }
.city-tab:hover::after { left: 20%; right: 20%; }
.city-tab.active { color: var(--accent); background: rgba(var(--accent-rgb),0.08); text-shadow: 0 0 8px rgba(var(--accent-rgb),0.5); }
.city-tab.active::after { left: 0; right: 0; }

/* ── Layout 2 colonnes (tabs+content + panel 3D) ── */
.city-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
/* 25/08 — Le panneau d'illustration prenait 400 px FIXES des 1100 px de fenetre :
   a 1280 px le contenu des onglets tombait a 584 px, soit 37 % de la page mangee
   par du decor. Deux corrections : le seuil monte a 1400 px (sous ce seuil le
   panneau s'empile, ce qu'il savait deja faire), et sa largeur devient une PART
   de la fenetre au lieu d'un nombre fixe.
   Ses deux minuteries ne sont pas perdues : la banniere « Files actives » les
   porte deja juste au-dessus. */
@media (min-width: 1400px) {
  .city-main-grid {
    grid-template-columns: minmax(0,1fr) clamp(300px, 22vw, 400px);
    align-items: start;
  }
}
.city-main-left { min-width: 0; }
.city-tab-content { display: block; }

/* ─────────────────────────────────────────────────────────────────
   Cards bâtiments — TAROT MYSTIQUE (Phase 3)
   Format vertical 280×420, cadre ornementé, niveau en chiffres romains
   ───────────────────────────────────────────────────────────────── */
.city-bld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.cityb-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(60,40,120,0.25) 0%, rgba(20,10,50,0.85) 60%, rgba(10,5,32,0.95) 100%);
  border: 1px solid var(--cit-frame);
  border-radius:var(--radius-xl);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45), inset 0 1px 0 var(--tint-3);
}
/* Cadre runique gold qui s'illumine au hover */
.cityb-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(216,192,255,0.20);
  border-radius:var(--radius-md);
  pointer-events: none;
  z-index: 1;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Sceau filigrane décoratif derrière */
.cityb-card::after {
  content: '✦';
  position: absolute;
  top: -25px; right: -25px;
  font-size: 130px;
  color: rgba(216,192,255,0.04);
  font-family:var(--font-mystic-deco);
  pointer-events: none;
  z-index: 0;
  transition: transform 0.4s ease, color 0.3s ease;
}
.cityb-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 48px rgba(140,90,200,0.40), 0 6px 18px rgba(0,0,0,0.55);
  border-color: var(--cit-frame-strong);
}
.cityb-card:hover::before { border-color: rgba(216,192,255,0.55); box-shadow: 0 0 24px rgba(216,192,255,0.25) inset; }
.cityb-card:hover::after  { transform: rotate(15deg) scale(1.15); color: rgba(var(--gold-bright-rgb), 0.10); }
.cityb-card.cityb-locked { opacity: 0.55; filter: grayscale(0.5); }
.cityb-card.cityb-locked:hover { transform: none; box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
.cityb-card.cityb-not-built .cityb-img { opacity: 0.78; }

/* Image principale — illustration plus haute */
.cityb-img {
  position: relative;
  height: 240px;
  background:
    linear-gradient(135deg, rgba(60,40,120,0.25), rgba(20,10,50,0.50));
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(216,192,255,0.20);
  z-index: 1;
  transition: transform 0.5s ease;
}
.cityb-img-minor { height: 200px; }
/* Léger parallax au hover */
.cityb-card:hover .cityb-img { transform: scale(1.04); }
/* Voile sombre + gradient bas pour lisibilité texte */
.cityb-img::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 30%, rgba(10,5,32,0.95) 100%);
  pointer-events: none;
}
.cityb-img-overlay {
  position: relative;
  z-index: 2;
  padding: 18px 20px;
}

/* ── Médaillon NIVEAU en chiffres romains (top-left) ── */
.cityb-lvl-badge {
  position: absolute;
  top: 14px; left: 14px;
  width: 56px; height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--gold-bright-rgb), 0.95), rgba(180,120,40,0.85) 70%, rgba(80,40,0,0.9) 100%);
  border: 2px solid rgba(var(--gold-bright-rgb), 0.85);
  border-radius: 50%;
  z-index: 3;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.55),
    inset 0 1px 2px rgba(255,255,255,0.45),
    0 0 18px rgba(var(--gold-bright-rgb), 0.4);
  font-family:var(--font-mystic-deco);
  text-transform: uppercase;
  position: relative;
}
/* Audit fluidité 31/08 : pulse box-shadow → halo max pré-peint sur ::after animé
   en opacity (composité GPU) — plus aucun repaint par frame. */
.cityb-lvl-badge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 28px rgba(var(--gold-bright-rgb), 0.7);
  opacity: 0; animation: cityb-medal-pulse 3s ease-in-out infinite;
}
.cityb-lvl-badge::before {
  content: 'LV';
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(50,30,0,0.85);
  line-height: 1;
  margin-bottom: 1px;
}
.cityb-lvl-badge b {
  font-size:var(--fs-2xl);
  font-weight: 900;
  color:var(--textbright);
  text-shadow: 0 1px 2px rgba(0,0,0,0.65);
  line-height: 1;
  margin: 0;
}
.cityb-lvl-badge .cityb-lvl-max {
  font-size: 8px;
  font-family:var(--font-mystic);
  color: #caa85a;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
@keyframes cityb-medal-pulse { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
/* État NIVEAU vide (non construit ou locked) */
.cityb-lvl-empty {
  background: radial-gradient(circle at 30% 30%, rgba(120,120,140,0.6), rgba(40,40,60,0.7));
  border-color: rgba(180,180,200,0.55);
  animation: none;
  font-family:var(--font-mystic);
}
.cityb-lvl-empty::before { content: ''; }
/* Quand vide, on remplit avec un texte */
.cityb-lvl-empty b { font-size: 9px; letter-spacing: 1px; line-height: 1.1; padding: 4px; text-align: center; }

/* Icône grand format en filigrane bottom-right */
.cityb-ico {
  position: absolute;
  bottom: 16px; right: 16px;
  font-size: 44px;
  filter: drop-shadow(0 4px 10px var(--shade-8)) drop-shadow(0 0 12px rgba(216,192,255,0.4));
  opacity: 0.95;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s;
  z-index: 3;
}
.cityb-card:hover .cityb-ico { transform: scale(1.18) rotate(-8deg); filter: drop-shadow(0 4px 10px var(--shade-8)) drop-shadow(0 0 22px rgba(var(--gold-bright-rgb), 0.7)); }

/* Nom — Cinzel mystique */
.cityb-name {
  position: relative;
  font-family:var(--font-mystic-deco);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  color:var(--textbright);
  text-transform: uppercase;
  text-shadow: 0 2px 6px var(--shade-8), 0 0 18px rgba(216,192,255,0.4);
  line-height: 1.15;
  display: block;
  padding-right: 64px;
}

/* ── Liste de perks (style grimoire) ── */
.cityb-perks {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
  color: rgba(216,192,255,0.85);
  font-size:var(--fs-sm);
  line-height: 1.55;
}
.cityb-perks li {
  position: relative;
  padding: 4px 0 4px 18px;
  border-bottom: 1px dashed rgba(216,192,255,0.10);
}
.cityb-perks li:last-child { border-bottom: none; }
.cityb-perks li::before {
  content: '◈';
  position: absolute;
  left: 0;
  color: var(--cit-gold);
  text-shadow: 0 0 6px rgba(var(--gold-bright-rgb), 0.6);
  font-size: 10px;
  top: 4px;
}

/* Ribbons (lock / MAX) */
.cityb-lock-ribbon, .cityb-max-ribbon {
  position: absolute;
  top: 14px; right: 14px;
  background: linear-gradient(135deg, rgba(220,60,60,0.95), rgba(160,40,40,0.95));
  color:var(--textbright);
  font-family:var(--font-mystic);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 11px;
  border-radius:var(--radius-sm);
  z-index: 4;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.18);
}
.cityb-max-ribbon {
  background: linear-gradient(135deg, var(--cit-gold), var(--cit-gold2));
  color: #1a0e00;
  box-shadow: 0 2px 12px rgba(var(--gold-bright-rgb), 0.55);
  position: relative;
}
/* Audit fluidité 31/08 : pulse box-shadow → halo max pré-peint sur ::after animé
   en opacity (composité GPU) — plus aucun repaint par frame. */
.cityb-max-ribbon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 2px 22px rgba(var(--gold-bright-rgb), 0.95);
  opacity: 0; animation: city-max-shine 3s ease-in-out infinite;
}
@keyframes city-max-shine { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

.cityb-body {
  padding: 16px 20px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.cityb-desc {
  /* Texte de regle : police de lecture, pas la capitale romaine (cf. entete). */
  font-family:var(--font-body);
  font-style: normal;
  font-size:var(--fs-base);
  color: rgba(216,192,255,0.85);
  line-height: 1.55;
  letter-spacing: 0.3px;
}
.cityb-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(216,192,255,0.18);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.40));
  position: relative;
  z-index: 1;
}
.cityb-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size:var(--fs-base);
  font-family:var(--font-display);
  color:var(--textbright);
  letter-spacing: 0.5px;
  font-weight: 700;
}
.cityb-cost-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cityb-cost-item img, .cityb-cost-item .city-pts-ico {
  width: 22px; height: 22px;
  filter: drop-shadow(0 0 5px rgba(216,192,255,0.5));
}
.cityb-up-btn {
  background:
    linear-gradient(135deg, var(--cit-parme2) 0%, #8a4dff 50%, var(--cit-parme2) 100%);
  background-size: 200% 100%;
  border: 1px solid rgba(var(--gold-bright-rgb), 0.45);
  color:var(--textbright);
  padding: 13px 18px;
  font-family:var(--font-mystic);
  font-size:var(--fs-base);
  letter-spacing: 1px;
  font-weight: 700;
  border-radius:var(--radius);
  cursor: pointer;
  transition:var(--btn-tr);
  text-shadow: 0 1px 3px var(--shade-5);
  box-shadow: 0 4px 14px rgba(140,90,200,0.45), inset 0 1px 0 var(--tint-10);
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.cityb-up-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent);
  transition: left 0.7s ease;
}
.cityb-up-btn:hover {
  transform: translateY(var(--btn-lift)) scale(1.03);
  background-position: 100% 0;
  box-shadow: 0 8px 22px rgba(216,192,255,0.55), inset 0 1px 0 rgba(255,255,255,0.4), 0 0 24px rgba(var(--gold-bright-rgb), 0.35);
  border-color: rgba(var(--gold-bright-rgb), 0.85);
}
.cityb-up-btn:hover::before { left: 100%; }
.cityb-up-btn:active { transform: translateY(-1px); }
.cityb-up-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* Icône points dormants (SVG inline simulé) */
.city-pts-ico {
  display: inline-block;
  width: 16px; height: 16px;
  background: radial-gradient(circle at 30% 30%, #d8c0ff 0%, #8060c8 50%, #4030a0 100%);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 6px rgba(180,140,255,0.6);
}
.city-pts-ico::after {
  content: '';
  position: absolute;
  inset: 25%;
  border: 1.5px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}

/* ─────────────────────────────────────────────────────────────────
   Panel 3D Cité (Phase 8) — enrichi avec stats orbitales + glyphes
   ───────────────────────────────────────────────────────────────── */
.city-3d-panel {
  position: sticky;
  top: 22px;
  height: 560px;
  background:
    radial-gradient(ellipse at center, rgba(60,40,120,0.45) 0%, rgba(20,10,60,0.85) 60%, rgba(0,0,8,0.98) 100%);
  border: 1px solid var(--cit-frame);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 12px 48px rgba(0,0,0,0.55),
    inset 0 1px 0 var(--tint-4),
    0 0 80px rgba(140,90,200,0.18);
}
/* Bordure runique en haut + bottom */
.city-3d-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cit-parme), var(--cit-gold), var(--cit-parme), transparent);
  z-index: 4;
  animation: city-hero-shimmer 5s linear infinite;
  background-size: 200% 100%;
}
/* Glyphe faction discret en haut-gauche du panel */
.city-3d-glyph {
  position: absolute;
  top: 12px; left: 16px;
  z-index: 4;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.40);
  border: 1px solid var(--cit-frame);
  border-radius: 50%;
  font-size:var(--fs-md);
  color: var(--cit-parme);
  text-shadow: 0 0 8px rgba(216,192,255,0.6);
  pointer-events: none;
}
/* Indicateurs flottants (pilgrim/forge) */
.city-3d-indicators {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
  pointer-events: none;
}
.city-3d-indicator {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(216,192,255,0.30);
  border-radius:var(--radius-lg);
  font-family:var(--font-mystic);
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--cit-parme);
  text-transform: uppercase;
}
.city-3d-indicator .ind-ico {
  filter: drop-shadow(0 0 4px currentColor);
  font-size:var(--fs-sm);
}
.city-3d-indicator b {
  font-family:var(--font-display);
  color: var(--cit-gold);
  font-size:var(--fs-xs);
  letter-spacing: 0.5px;
  text-transform: none;
}
.city-3d-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.city-3d-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.city-3d-overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  pointer-events: none;
  z-index: 2;
  padding: 14px 18px 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 30%, var(--shade-7) 100%);
  border-radius:var(--radius-lg);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-top: 2px solid rgba(var(--accent-rgb),0.55);
  box-shadow: 0 -4px 16px rgba(var(--accent-rgb),0.15);
}
.city-3d-name {
  font-family:var(--font-display);
  font-size:var(--fs-3xl);
  font-weight: 900;
  letter-spacing: 6px;
  color:var(--textbright);
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.95) 30%, var(--accent) 50%, rgba(255,255,255,0.95) 70%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 16px rgba(0,0,0,0.98),
    0 0 32px rgba(var(--accent-rgb),0.6),
    0 0 64px rgba(var(--accent-rgb),0.3);
  filter: drop-shadow(0 2px 8px var(--shade-8));
  animation: city-3d-name-shimmer 4s linear infinite;
  margin: 0;
  line-height: 1.05;
}
@keyframes city-3d-name-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.city-3d-sub {
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  font-weight: 700;
  letter-spacing: 3.5px;
  color: var(--accent);
  margin-top: 8px;
  text-transform: uppercase;
  text-shadow:
    0 1px 4px var(--shade-8),
    0 0 12px rgba(var(--accent-rgb),0.7);
  display: flex;
  align-items: center;
  gap: 8px;
}
.city-3d-sub::before {
  content: '✦';
  font-size:var(--fs-md);
  color: var(--accent);
  text-shadow: 0 0 8px rgba(var(--accent-rgb),0.8);
}
.city-3d-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--textsoft);
  font-family: 'Orbitron';
  font-size:var(--fs-xs);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.city-3d-credit {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 9px;
  font-family: system-ui, sans-serif;
  color: rgba(255,255,255,0.45);
  text-shadow: 0 1px 3px var(--shade-7);
  letter-spacing: 0.5px;
  z-index: 3;
  pointer-events: auto;
}
.city-3d-credit a {
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,0.35);
}
.city-3d-credit a:hover { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────
   RELIQUES — Tarot d'Ascension (Phase 4)
   Cards verticales avec cadre doré pour mythiques, hexagonal pour communes
   ───────────────────────────────────────────────────────────────── */
.city-relique-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(140,90,200,0.18), rgba(20,10,50,0.50));
  border: 1px solid var(--cit-frame);
  border-radius: 18px;
  padding: 24px 30px;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.city-relique-header::before {
  content: '⚒';
  position: absolute;
  right: -30px; top: -30px;
  font-size: 180px;
  color: rgba(var(--gold-bright-rgb), 0.05);
  font-family: serif;
  pointer-events: none;
}
.city-relique-header h3 {
  font-family:var(--font-mystic-deco);
  font-size:var(--fs-2xl);
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--cit-gold);
  margin: 0 0 8px;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(var(--gold-bright-rgb), 0.4);
}
.city-relique-header p { font-size:var(--fs-base); color: rgba(216,192,255,0.85); margin: 4px 0; line-height: 1.55; font-family:var(--font-mystic); font-style: italic; }
.city-relique-header p b { color:var(--textbright); font-weight: 700; font-style: normal; font-family: system-ui, sans-serif; }

/* Grille hexagonale-like via gap larger + cards verticales */
.city-relique-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
/* Card type "tarot" — verticale */
.city-relique-card {
  position: relative;
  background:
    radial-gradient(ellipse at top, rgba(140,90,200,0.20), transparent 60%),
    linear-gradient(180deg, rgba(20,10,50,0.85), rgba(10,5,32,0.95));
  border: 1.5px solid rgba(216,192,255,0.30);
  border-radius: 14px;
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  overflow: hidden;
  min-height: 240px;
}
/* Cadre runique intérieur */
.city-relique-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(216,192,255,0.18);
  border-radius:var(--radius-md);
  pointer-events: none;
}
.city-relique-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, transparent 60%, rgba(216,192,255,0.08));
  pointer-events: none;
}
.city-relique-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 36px rgba(216,192,255,0.30);
  border-color: var(--cit-frame-strong);
}

/* Carte ÉQUIPÉE — halo doré permanent */
.city-relique-card.is-equipped {
  border-color: var(--cit-gold);
  box-shadow: 0 0 28px rgba(var(--gold-bright-rgb), 0.40), 0 0 12px rgba(var(--gold-bright-rgb), 0.30) inset;
  background:
    radial-gradient(ellipse at top, rgba(var(--gold-bright-rgb), 0.20), transparent 60%),
    linear-gradient(180deg, rgba(60,40,10,0.85), rgba(10,5,32,0.95));
}
.city-relique-card.is-equipped::after {
  background: linear-gradient(135deg, transparent 60%, rgba(var(--gold-bright-rgb), 0.15));
}

/* Carte MYTHIQUE — cadre or */
.city-relique-card.city-relique-mythique {
  border-color: var(--cit-gold);
  box-shadow: 0 0 22px rgba(var(--gold-bright-rgb), 0.18);
}
.city-relique-card.city-relique-mythique::before { border-color: rgba(var(--gold-bright-rgb), 0.35); }
.city-relique-card.city-relique-mythique:hover { box-shadow: 0 14px 42px rgba(var(--gold-bright-rgb), 0.45); border-color: rgba(var(--gold-bright-rgb), 0.95); }
.city-relique-card.city-relique-mythique.is-equipped {
  position: relative;
  box-shadow: 0 0 28px rgba(var(--gold-bright-rgb), 0.40), 0 0 12px rgba(var(--gold-bright-rgb), 0.30) inset;
}
/* Audit fluidité 31/08 : pulse box-shadow → halo max pré-peint sur ::after animé
   en opacity (composité GPU) — plus aucun repaint par frame. */
.city-relique-card.city-relique-mythique.is-equipped::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 48px rgba(var(--gold-bright-rgb), 0.75);
  opacity: 0; animation: city-relique-mythic-pulse 4s ease-in-out infinite;
}
@keyframes city-relique-mythic-pulse { 0%,100% { opacity: 0; } 50% { opacity: 1; } }

/* Pictogramme géant centré */
.city-relique-ico {
  font-size: 64px;
  text-align: center;
  filter: drop-shadow(0 0 14px rgba(216,192,255,0.6));
  margin: 6px 0 4px;
  position: relative;
  z-index: 1;
  line-height: 1;
}
.city-relique-mythique .city-relique-ico {
  filter: drop-shadow(0 0 18px rgba(var(--gold-bright-rgb), 0.8));
}

.city-relique-info { display: flex; flex-direction: column; gap: 4px; flex: 1; align-items: center; position: relative; z-index: 1; }
.city-relique-name {
  font-family:var(--font-mystic-deco);
  font-size:var(--fs-lg);
  color:var(--textbright);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px var(--shade-7), 0 0 14px rgba(216,192,255,0.4);
  line-height: 1.2;
  margin: 4px 0 2px;
}
.city-relique-rarity {
  font-family:var(--font-mystic);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--cit-parme);
  margin: 0 0 6px;
  font-weight: 700;
  padding: 3px 12px;
  background: rgba(216,192,255,0.10);
  border: 1px solid rgba(216,192,255,0.30);
  border-radius:var(--radius-lg);
  text-transform: uppercase;
}
.city-relique-mythique .city-relique-rarity { color: var(--cit-gold); border-color: rgba(var(--gold-bright-rgb), 0.50); background: rgba(var(--gold-bright-rgb), 0.12); text-shadow: 0 0 8px rgba(var(--gold-bright-rgb), 0.5); }
.city-relique-desc {
  font-size:var(--fs-md);
  color: rgba(232,220,255,0.95);
  line-height: 1.55;
  /* Texte de regle : police de lecture. */
  font-family:var(--font-body);
  font-style: normal;
}

/* Bouton équiper / désequiper */
.city-relique-btn {
  background: rgba(216,192,255,0.18);
  border: 1px solid rgba(216,192,255,0.50);
  color: var(--cit-parme);
  font-family:var(--font-mystic);
  font-size:var(--fs-sm);
  letter-spacing: 1px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius:var(--radius);
  cursor: pointer;
  transition:var(--btn-tr);
  margin-top: 8px;
  width: 100%;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.city-relique-btn:hover { background: rgba(216,192,255,0.32); transform: translateY(var(--btn-lift)); }
.city-relique-btn.is-equipped {
  background: rgba(var(--gold-bright-rgb), 0.18);
  border-color: var(--cit-gold);
  color: var(--cit-gold);
  text-shadow: 0 0 8px rgba(var(--gold-bright-rgb), 0.5);
}

/* ── Particles burst à l'équipement (animation déclenchée via classe ajoutée par JS) ── */
.city-relique-card.equip-burst {
  animation: relique-equip-pulse 0.6s ease-out;
}
.city-relique-card.equip-burst::before {
  content: '✦ ✧ ✦ ✧ ✦';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: space-around;
  font-size: 24px;
  color: var(--cit-gold);
  text-shadow: 0 0 14px rgba(var(--gold-bright-rgb), 0.95), 0 0 28px rgba(var(--gold-bright-rgb), 0.6);
  pointer-events: none;
  z-index: 4;
  animation: relique-equip-burst 0.9s ease-out forwards;
  letter-spacing: 0.5em;
}
@keyframes relique-equip-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05); box-shadow: 0 0 38px rgba(var(--gold-bright-rgb), 0.85); }
  100% { transform: scale(1); }
}
@keyframes relique-equip-burst {
  0%   { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40%  { opacity: 1; transform: scale(1.3) rotate(15deg); }
  100% { opacity: 0; transform: scale(2.0) rotate(45deg); }
}

.city-empty, .city-empty-block {
  font-size:var(--fs-base);
  color: var(--textsoft);
  font-style: italic;
  padding: 28px;
  text-align: center;
  line-height: 1.6;
}
.city-empty-block {
  background: rgba(255,255,255,0.025);
  border-radius:var(--radius-lg);
  border: 1px dashed rgba(var(--accent-rgb),0.20);
}

/* ── Heros : mini canvas 3D + carte ── */
.city-hero-card-3d {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.10), rgba(0,0,0,0.50));
  border: 1px solid rgba(var(--accent-rgb),0.30);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
  position: relative;
}
.city-hero-card-3d:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(var(--accent-rgb),0.30); border-color: rgba(var(--accent-rgb),0.55); }
.city-hero-3d-canvas {
  height: 200px;
  position: relative;
  background: radial-gradient(ellipse at center, rgba(40,30,80,0.6), rgba(0,0,8,0.95));
  overflow: hidden;
}
.city-hero-3d-canvas canvas { display: block; width: 100% !important; height: 100% !important; }
.city-hero-3d-overlay {
  position: absolute;
  /* Ancré au bas du rendu 3D (canvas = 200px, cf .city-hero-3d-canvas l.1308),
     PAS au bas de la carte — sinon recouvre le footer/bouton FORGER. */
  top: 200px; bottom: auto;
  transform: translateY(calc(-100% - 8px));
  left: 10px; right: 10px;
  pointer-events: none;
  z-index: 2;
  padding: 8px 12px 6px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 30%, var(--shade-7) 100%);
  border-radius:var(--radius);
  border-top: 1px solid rgba(var(--accent-rgb),0.40);
}
.city-hero-3d-name {
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight: 900;
  color:var(--textbright);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px var(--shade-8), 0 0 14px rgba(var(--accent-rgb),0.55);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.city-hero-3d-power {
  font-family:var(--font-display);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1.8px;
  margin-top: 4px;
  text-transform: uppercase;
  text-shadow: 0 1px 4px var(--shade-8), 0 0 8px rgba(var(--accent-rgb),0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.city-hero-3d-status-ribbon {
  position: absolute;
  top: 8px; right: 8px;
  padding: 4px 9px;
  font-family: 'Orbitron'; font-size: 9px;
  letter-spacing: 1.2px;
  font-weight: 700;
  border-radius:var(--radius-sm);
  z-index: 3;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 2px 6px var(--shade-2);
}
.city-hero-3d-status-ribbon.locked { background: linear-gradient(135deg, rgba(220,60,60,0.85), rgba(160,40,40,0.85)); color:var(--textbright); }
.city-hero-3d-status-ribbon.ready { background: linear-gradient(135deg, gold, #ff8800); color: #1a0e00; }
.city-hero-3d-status-ribbon.cooldown { background: rgba(120,140,180,0.85); color:var(--textbright); }
.city-hero-3d-status-ribbon.position { background: rgba(var(--accent-rgb),0.85); color: #000; }
.city-hero-card-3d-body { padding: 14px 16px; flex: 1; }
.city-hero-card-3d-desc { font-size:var(--fs-md); color: var(--textsoft); line-height: 1.55; }
.city-hero-card-3d-desc b { color: var(--accent); font-family: 'Orbitron'; font-size:var(--fs-base); letter-spacing: 1px; }
.city-hero-card-3d-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(var(--accent-rgb),0.15);
  display: flex;
  gap: 8px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.30));
}
.city-hero-card-3d-footer button {
  flex: 1;
  background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb),0.75));
  border: none;
  color:var(--textbright);
  padding: 10px 12px;
  font-family: 'Orbitron';
  font-size:var(--fs-xs);
  letter-spacing: 1.5px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition:var(--btn-tr);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.35);
}
.city-hero-card-3d-footer button:hover { transform: translateY(var(--btn-lift)); box-shadow: 0 6px 16px rgba(var(--accent-rgb),0.55); }
.city-hero-card-3d-footer button.secondary { background: rgba(120,140,180,0.30); border: 1px solid rgba(120,140,180,0.50); }
.city-hero-card-3d-footer button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Vue mystérieuse (bêta privée) ── */
.city-mystery {
  position: relative;
  max-width: 740px;
  margin: 70px auto;
  padding: 70px 50px;
  text-align: center;
  background: linear-gradient(135deg, rgba(140,90,200,0.10), rgba(40,30,80,0.55));
  border: 1px solid rgba(160,120,220,0.35);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 60px rgba(80,40,160,0.30), inset 0 0 80px rgba(160,120,220,0.08);
}
.city-mystery-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 520px; height: 520px;
  background: radial-gradient(circle at center, rgba(180,140,255,0.20) 0%, transparent 65%);
  pointer-events: none; animation: city-mystery-pulse 6s ease-in-out infinite;
}
@keyframes city-mystery-pulse { 0%,100% { opacity: 0.55; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.18); } }
.city-mystery-icon { position: relative; font-size: 80px; margin-bottom: 28px; filter: drop-shadow(0 0 28px rgba(180,140,255,0.95)); animation: city-mystery-float 4s ease-in-out infinite; }
@keyframes city-mystery-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.city-mystery-title { position: relative; font-family: 'Orbitron'; font-size:var(--fs-3xl); letter-spacing: 6px; color: #d8c0ff; margin: 0 0 32px; text-shadow: 0 2px 14px rgba(180,140,255,0.75); font-weight: 800; }
.city-mystery-text { position: relative; font-family: var(--font-mystic); font-size: 16px; line-height: 2.0; color: #c8b8e0; margin: 18px 0; font-style: italic; }
.city-mystery-soft { font-size: 14px !important; color: #9888b8 !important; margin-top: 28px !important; }
.city-mystery-runes { position: relative; font-size: 24px; letter-spacing: 16px; color: rgba(180,140,255,0.75); margin: 36px 0 20px; text-shadow: 0 0 10px rgba(180,140,255,0.55); animation: city-mystery-shimmer 3s ease-in-out infinite; }
@keyframes city-mystery-shimmer { 0%,100% { opacity: 0.55; } 50% { opacity: 1; letter-spacing: 20px; } }
.city-mystery-status { position: relative; font-family: 'Orbitron'; font-size: 11px !important; letter-spacing: 3px; color: #7868a0 !important; }

/* ─────────────────────────────────────────────────────────────────
   SAISON — Hall des Ascendants (Phase 7)
   Podium 3D top 3 + leaderboard 4-50 + médailles bannières
   ───────────────────────────────────────────────────────────────── */
.city-season-banner {
  position: relative;
  text-align: center;
  padding: 28px 20px 20px;
  margin-bottom: 24px;
  background:
    radial-gradient(ellipse at center, rgba(var(--gold-bright-rgb), 0.16), transparent 65%),
    linear-gradient(180deg, rgba(60,40,10,0.50), rgba(20,10,50,0.85));
  border: 1px solid rgba(var(--gold-bright-rgb), 0.45);
  border-radius: 18px;
  overflow: hidden;
}
.city-season-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cit-gold), transparent);
}
.city-season-title {
  font-family:var(--font-mystic-deco);
  font-size:var(--fs-4xl);
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--cit-gold);
  text-shadow: 0 0 22px rgba(var(--gold-bright-rgb), 0.6), 0 2px 6px var(--shade-3);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.city-season-sub {
  font-family:var(--font-mystic);
  font-style: italic;
  font-size:var(--fs-md);
  color: rgba(216,192,255,0.85);
  letter-spacing: 1.5px;
  margin: 0;
}
.city-season-myrank {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  background: rgba(var(--gold-bright-rgb), 0.12);
  border: 1px solid var(--cit-gold);
  border-radius: 24px;
  font-family:var(--font-mystic);
  font-size:var(--fs-base);
  letter-spacing: 1.5px;
  color: var(--cit-gold);
  text-shadow: 0 0 10px rgba(var(--gold-bright-rgb), 0.5);
}

/* Podium top 3 */
.city-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 14px;
  max-width: 720px;
  margin: 30px auto 36px;
  padding: 0 12px;
}
.city-podium-step {
  position: relative;
  background: linear-gradient(180deg, rgba(40,20,80,0.55), rgba(10,5,32,0.95));
  border: 1.5px solid var(--cit-frame);
  border-radius: 14px 14px 6px 6px;
  padding: 22px 12px 18px;
  text-align: center;
  transition: transform 0.3s ease;
}
.city-podium-step:hover { transform: translateY(-4px); }
.city-podium-1 { order: 2; min-height: 240px; border-color: var(--cit-gold); box-shadow: 0 0 32px rgba(var(--gold-bright-rgb), 0.40); }
.city-podium-2 { order: 1; min-height: 200px; border-color: var(--textsoft); box-shadow: 0 0 22px rgba(192,192,208,0.30); }
.city-podium-3 { order: 3; min-height: 175px; border-color: #cd7f32; box-shadow: 0 0 22px rgba(205,127,50,0.30); }

.city-podium-rank {
  position: absolute;
  top: -22px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, currentColor, var(--shade-5));
  border: 2px solid currentColor;
  border-radius: 50%;
  font-family:var(--font-mystic-deco);
  font-size:var(--fs-2xl);
  font-weight: 900;
  color:var(--textbright);
  text-shadow: 0 1px 4px var(--shade-7);
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
}
.city-podium-1 .city-podium-rank { color: var(--cit-gold); }
.city-podium-2 .city-podium-rank { color: var(--textsoft); }
.city-podium-3 .city-podium-rank { color: #cd7f32; }
.city-podium-crown {
  font-size: 28px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 10px currentColor);
}
.city-podium-1 .city-podium-crown { color: var(--cit-gold); }
.city-podium-2 .city-podium-crown { color: var(--textsoft); }
.city-podium-3 .city-podium-crown { color: #cd7f32; }
.city-podium-name {
  font-family:var(--font-mystic-deco);
  font-size: 16px;
  font-weight: 800;
  color:var(--textbright);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 4px 0 4px;
  line-height: 1.2;
}
.city-podium-1 .city-podium-name { font-size: 19px; color: var(--cit-gold); text-shadow: 0 0 14px rgba(var(--gold-bright-rgb), 0.6); }
.city-podium-player {
  font-family:var(--font-mystic);
  font-size:var(--fs-sm);
  color: rgba(216,192,255,0.85);
  letter-spacing: 1px;
  margin: 0 0 10px;
  font-style: italic;
}
.city-podium-score {
  font-family:var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--cit-gold);
  text-shadow: 0 0 12px rgba(var(--gold-bright-rgb), 0.55);
  margin-top: 6px;
}
.city-podium-1 .city-podium-score { font-size: 24px; }

/* Leaderboard table style */
.city-season-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-family: system-ui, sans-serif;
  margin-top: 14px;
}
.city-season-table th {
  font-family:var(--font-mystic);
  font-size:var(--fs-xs);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cit-parme);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(216,192,255,0.20);
}
.city-season-table th.r { text-align: right; }
.city-season-table tbody tr {
  background: rgba(20,10,50,0.55);
  transition: all 0.2s;
}
.city-season-table tbody tr:hover {
  background: rgba(140,90,200,0.18);
  transform: translateX(2px);
}
.city-season-table td {
  padding: 12px 14px;
  border-top: 1px solid rgba(216,192,255,0.10);
  border-bottom: 1px solid rgba(216,192,255,0.10);
}
.city-season-table td:first-child { border-left: 1px solid rgba(216,192,255,0.10); border-radius: 8px 0 0 8px; }
.city-season-table td:last-child { border-right: 1px solid rgba(216,192,255,0.10); border-radius: 0 8px 8px 0; }
.city-season-rank { font-family:var(--font-mystic-deco); font-size: 16px; font-weight: 800; color: rgba(216,192,255,0.85); }
.city-season-rank.top { color: var(--cit-gold); text-shadow: 0 0 8px rgba(var(--gold-bright-rgb), 0.5); }
.city-season-cname {
  font-family:var(--font-mystic);
  font-size:var(--fs-md);
  color:var(--textbright);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.city-season-pname { font-family: system-ui, sans-serif; font-size:var(--fs-base); color: rgba(216,192,255,0.85); }
.city-season-faction {
  display: inline-block;
  font-family:var(--font-mystic);
  font-size: 9px;
  letter-spacing: 2.5px;
  padding: 3px 9px;
  background: rgba(216,192,255,0.12);
  border: 1px solid rgba(216,192,255,0.30);
  border-radius:var(--radius-lg);
  color: var(--cit-parme);
  text-transform: uppercase;
}
.city-season-score {
  text-align: right;
  font-family:var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--cit-gold);
}

/* Médailles permanentes en bannières */
.city-medals-section {
  margin: 30px 0 20px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(60,40,10,0.50), rgba(20,10,50,0.85));
  border: 1px solid rgba(var(--gold-bright-rgb), 0.45);
  border-radius:var(--radius-xl);
  text-align: center;
}
.city-medals-title {
  font-family:var(--font-mystic-deco);
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--cit-gold);
  text-transform: uppercase;
  margin: 0 0 18px;
  text-shadow: 0 0 14px rgba(var(--gold-bright-rgb), 0.5);
}
.city-medals-list {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.city-medal-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  background:
    linear-gradient(135deg, currentColor 0%, rgba(0,0,0,0.55) 100%);
  border: 1px solid currentColor;
  border-radius:var(--radius);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55));
  position: relative;
  overflow: hidden;
}
.city-medal-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  /* Audit fluidité 31/08 : left animé → transform (composité) */
  transform: translateX(-100%);
  animation: medal-shine 4s linear infinite;
}
/* Sceau de Légende (perk 'legende' équipée) — halo doré permanent + ★ très visible */
.city-medal-banner.medal-legende {
  box-shadow: 0 0 32px rgba(var(--gold-bright-rgb), 0.70), 0 4px 14px rgba(0,0,0,0.55);
  border: 2px solid var(--cit-gold);
  padding-right: 38px; /* place pour le ★ */
}
.city-medal-banner.medal-legende::after {
  content: '★';
  position: absolute;
  top: -12px; right: -12px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #fff, var(--cit-gold) 35%, rgba(180,120,40,0.95) 100%);
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 18px;
  color: #1a0e00;
  font-weight: 900;
  text-shadow: 0 0 4px rgba(255,255,255,0.7), 0 1px 2px var(--shade-2);
  box-shadow:
    0 0 24px rgba(var(--gold-bright-rgb), 1),
    0 0 12px rgba(255,255,255,0.6),
    0 2px 8px rgba(0,0,0,0.55);
  z-index: 5;
  animation: medal-legende-spin 6s ease-in-out infinite;
}
@keyframes medal-legende-spin {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.18) rotate(15deg); }
}

/* Hommage Éternel (recherche 'hommage_eternel') — sparkles parmes animés très visibles */
.city-medal-banner.medal-hommage {
  border-color: var(--cit-parme);
  box-shadow: 0 0 28px rgba(216,192,255,0.65), 0 4px 14px rgba(0,0,0,0.55);
  padding-left: 14px;
}
.city-medal-banner.medal-hommage .city-medal-ico {
  position: relative;
  filter: drop-shadow(0 0 12px rgba(216,192,255,0.8));
}
.city-medal-banner.medal-hommage .city-medal-ico::before,
.city-medal-banner.medal-hommage .city-medal-ico::after {
  content: '✶';
  position: absolute;
  font-size: 18px;
  color: var(--cit-parme);
  text-shadow: 0 0 10px #fff, 0 0 18px var(--cit-parme);
  pointer-events: none;
  animation: medal-hommage-sparkle 2.2s ease-in-out infinite;
  z-index: 3;
}
.city-medal-banner.medal-hommage .city-medal-ico::before {
  top: -10px; left: -14px;
  animation-delay: 0s;
}
.city-medal-banner.medal-hommage .city-medal-ico::after {
  bottom: -10px; right: -14px;
  animation-delay: 1.1s;
}
@keyframes medal-hommage-sparkle {
  0%,100% { opacity: 0.5; transform: scale(0.7) rotate(0deg); }
  50%     { opacity: 1; transform: scale(1.4) rotate(180deg); }
}
/* Combo Légende + Hommage : effet maximal */
.city-medal-banner.medal-legende.medal-hommage {
  box-shadow:
    0 0 36px rgba(var(--gold-bright-rgb), 0.80),
    0 0 28px rgba(216,192,255,0.60),
    0 4px 14px rgba(0,0,0,0.55);
}

/* ─────────────────────────────────────────────────────────────────
   Préfixe ASCENDANT — gradient prismatique multicolore animé
   Réutilisable via classe .city-prefix-ascendant
   Distinct du Pass Commandant (or uni) : spectre lumière des Ascendés.
   ───────────────────────────────────────────────────────────────── */
.city-prefix-ascendant {
  display: inline-block;
  font-family:var(--font-mystic-deco);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-right: 5px;
  background: linear-gradient(90deg,
    #ff6bcb 0%, var(--gold-bright) 20%, #7ed3ff 40%,
    #c890ff 60%, #fff5d8 80%, #ff6bcb 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 6px rgba(216,192,255,0.8)) drop-shadow(0 0 12px rgba(var(--gold-bright-rgb), 0.4));
  animation: city-prefix-ascendant-shimmer 4s linear infinite;
  position: relative;
}
@keyframes city-prefix-ascendant-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Médaille épinglée — badge pin top-left + glow renforcé */
.city-medal-banner {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.city-medal-banner:hover { transform: translateY(-2px) scale(1.03); }
/* 25/08 — « 📌 ÉPINGLÉE » etait COUPE. Le badge est pose en `bottom:-8px`, donc
   hors de la boite, alors que `.city-medal-banner` est en `overflow:hidden` pour
   contenir son reflet anime : la banniere coupait son propre badge (mesure : 7 px
   de largeur et 8 px de hauteur perdus).
   On garde le decoupage pour le reflet et on rentre le badge, en degageant la
   hauteur qu'il occupe — sur la seule variante qui le porte. */
/* La tuile doit etre au moins aussi large que le badge qu'elle porte : sinon
   elle le coupe aux deux bouts (mesure : 7 px manquants). */
/* Le badge existe sur TOUTES les tuiles, pas seulement l'epinglee : en ne
   degageant la place que sur `.medal-pinned`, mon premier correctif a pose le
   badge des AUTRES par-dessus leur icone (mesure : « city-medal-ico ×
   city-medal-pin-badge » se chevauchent).
   🔑 Corriger une variante quand le defaut est sur la classe de base deplace
   le probleme au lieu de le fermer. On vise la tuile PAR CE QU'ELLE CONTIENT. */
.city-medal-banner:has(.city-medal-pin-badge) { padding-bottom: 26px; min-width: 104px; }
.city-medal-pin-badge {
  position: absolute;
  bottom: 5px; left: 50%;
  transform: translateX(-50%);
  font-family:var(--font-mystic);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  background: var(--shade-5);
  border: 1px solid rgba(216,192,255,0.4);
  border-radius:var(--radius-lg);
  color: rgba(216,192,255,0.7);
  white-space: nowrap;
  z-index: 4;
  text-transform: uppercase;
  transition: all 0.2s;
}
.city-medal-banner:hover .city-medal-pin-badge {
  background: rgba(216,192,255,0.2);
  color:var(--textbright);
  border-color: var(--cit-parme);
}
.city-medal-banner.medal-pinned .city-medal-pin-badge {
  background: var(--cit-gold);
  color: #1a0e00;
  border-color: var(--cit-gold);
  font-weight: 800;
  box-shadow: 0 0 14px rgba(var(--gold-bright-rgb), 0.85);
}
.city-medal-banner.medal-pinned {
  outline: 2px solid var(--cit-gold);
  outline-offset: 4px;
}

/* Badge "médaille principale" dans le hero AVALON */
.city-hero-pinned-medal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  background:
    linear-gradient(135deg, rgba(var(--gold-bright-rgb), 0.28), rgba(180,120,40,0.18));
  border: 1.5px solid var(--cit-gold);
  border-radius: 24px;
  font-family:var(--font-mystic);
  font-size:var(--fs-sm);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color:var(--textbright);
  text-shadow: 0 1px 4px var(--shade-7);
  box-shadow:
    0 0 18px rgba(var(--gold-bright-rgb), 0.50),
    inset 0 1px 0 rgba(255,255,255,0.20);
  animation: city-hero-pinned-pulse 4s ease-in-out infinite;
}
.city-hero-pinned-medal .hpm-ico { font-size: 18px; line-height: 1; filter: drop-shadow(0 0 6px currentColor); }
.city-hero-pinned-medal .hpm-name { font-weight: 800; }
.city-hero-pinned-medal .hpm-season {
  font-size: 9px; letter-spacing: 2px;
  padding: 2px 8px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(var(--gold-bright-rgb), 0.5);
  border-radius:var(--radius);
  color: var(--cit-gold);
}
@keyframes city-hero-pinned-pulse {
  0%,100% { box-shadow: 0 0 18px rgba(var(--gold-bright-rgb), 0.50), inset 0 1px 0 rgba(255,255,255,0.20); }
  50%     { box-shadow: 0 0 32px rgba(var(--gold-bright-rgb), 0.95), inset 0 1px 0 rgba(255,255,255,0.20); }
}
@keyframes medal-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.city-medal-ico { font-size: 24px; filter: drop-shadow(0 0 10px currentColor); }
.city-medal-info {
  display: flex; flex-direction: column;
  text-align: left;
  z-index: 1;
}
.city-medal-name {
  font-family:var(--font-mystic-deco);
  font-weight: 800;
  font-size:var(--fs-base);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:var(--textbright);
  text-shadow: 0 1px 3px var(--shade-8);
}
.city-medal-season {
  font-family:var(--font-mystic);
  font-size: 10px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1.2px;
}

@media (max-width: 768px) {
  .city-podium { grid-template-columns: 1fr; }
  .city-podium-step { order: unset !important; min-height: auto !important; }
}

/* ── Cité sur map Galaxy G3 (overlay) ── */
.gal-tr-city {
  background: linear-gradient(90deg, rgba(180,140,255,0.12), rgba(180,140,255,0.05)) !important;
  
 box-shadow:inset 3px 0 0 0 #c890ff !important; }
.gal-tr-city:hover { background: linear-gradient(90deg, rgba(180,140,255,0.20), rgba(180,140,255,0.10)) !important; }
.gal-city-name {
  font-family:var(--font-display);
  font-weight: 700;
  letter-spacing: 1px;
  color: #d8c0ff !important;
  text-shadow: 0 0 10px rgba(180,140,255,0.6);
}
.gal-city-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  font-family:var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  background: linear-gradient(135deg, rgba(180,140,255,0.30), rgba(120,100,200,0.20));
  border: 1px solid rgba(180,140,255,0.50);
  color: #d8c0ff;
  border-radius:var(--radius-sm);
  vertical-align: middle;
}
.gal-city-meta {
  display: inline-block;
  margin-left: 6px;
  font-size:var(--fs-xs);
  color: #b0a0d0;
  letter-spacing: 0.5px;
}
/* ── Astre Cité dans la cellule icône (remplace le disque planète générique) ── */
.gal-city-astre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  font-size: 16px;
  color:var(--textbright);
  position: relative;
  vertical-align: middle;
}
.gal-city-astre::before {
  content: '';
  position: absolute; inset: 50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,192,255,1) 0%, rgba(180,140,255,0.6) 30%, transparent 70%);
  pointer-events: none;
  transition: inset 0.3s ease, opacity 0.3s ease;
}
/* Astre Lv.1-5 : point lumineux discret */
.gal-city-astre-sm::before { inset: 35%; opacity: 0.8; }
.gal-city-astre-sm { text-shadow: 0 0 6px rgba(180,140,255,0.7); }
/* Astre Lv.6-15 : halo systémique */
.gal-city-astre-md::before { inset: 15%; opacity: 0.9; }
.gal-city-astre-md { text-shadow: 0 0 12px rgba(180,140,255,0.9), 0 0 20px rgba(216,192,255,0.5); animation: gal-city-astre-pulse 3s ease-in-out infinite; }
/* Astre Lv.16-20 : aurore galactique animée — effet impactant */
.gal-city-astre-xl {
  width: 38px; height: 38px; font-size:var(--fs-2xl);
  text-shadow:
    0 0 18px #fff,
    0 0 32px rgba(255, 245, 220, 1),
    0 0 52px rgba(216,192,255,1),
    0 0 80px rgba(180,140,255,0.95);
  animation: gal-city-astre-aurora 2.2s ease-in-out infinite;
  position: relative;
}
.gal-city-astre-xl::before {
  inset: -25%;
  opacity: 1;
  background:
    radial-gradient(circle, #fff 0%, rgba(255,245,220,0.95) 18%, rgba(216,192,255,0.75) 38%, rgba(180,140,255,0.45) 60%, transparent 82%);
  filter: blur(1px);
}
.gal-city-astre-xl::after {
  content: '';
  position: absolute; inset: -50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,200,255,0.55), rgba(180,200,255,0.55), rgba(255,240,180,0.55), rgba(255,200,255,0.55));
  filter: blur(8px);
  opacity: 0.75;
  animation: gal-city-astre-conic 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes gal-city-astre-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes gal-city-astre-aurora {
  0%,100% { transform: scale(1); filter: hue-rotate(0deg) brightness(1); }
  50%     { transform: scale(1.18); filter: hue-rotate(40deg) brightness(1.25); }
}
@keyframes gal-city-astre-conic {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Boost intermédiaire (≥0.20 mais <0.50) : amplifie le halo de 30% sans changer de palier */
.gal-city-astre-boosted-light::before {
  inset: -8% !important;
  opacity: 1 !important;
}
.gal-city-astre-boosted-light {
  filter: brightness(1.20) saturate(1.15);
}
/* Boost full (≥0.50) : ajout d'un anneau doré rotatif perpétuel */
.gal-city-astre-boosted {
  filter: brightness(1.30) saturate(1.25);
}
.gal-city-astre-boosted::before {
  background: radial-gradient(circle, #fff 0%, var(--cit-gold) 30%, var(--cit-parme) 60%, transparent 85%) !important;
}

/* Constellation custom (recherche 'constellation') — motif ✶ avec rotation perpétuelle */
.gal-city-astre-motif {
  animation: gal-city-astre-motif-rotate 12s linear infinite;
}
.gal-city-astre-motif::before {
  background: radial-gradient(circle, rgba(var(--gold-bright-rgb), 0.95) 0%, rgba(216,192,255,0.7) 35%, rgba(180,140,255,0.4) 65%, transparent 85%) !important;
}
@keyframes gal-city-astre-motif-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.gal-city-astre-xl.gal-city-astre-motif::after {
  background: conic-gradient(from 0deg,
    rgba(var(--gold-bright-rgb), 0.65),
    rgba(180,200,255,0.55),
    rgba(255,200,255,0.65),
    rgba(255,240,180,0.65),
    rgba(var(--gold-bright-rgb), 0.65)) !important;
}

/* Ligne galaxy avec une cité Lv.16+ : glow néon le long du bord gauche pour la signaler.
   Détection : le tr.gal-tr-city a un .gal-city-astre-xl à l'intérieur. */
.gal-tr-city:has(.gal-city-astre-xl) {
  background: linear-gradient(90deg, rgba(180,140,255,0.20), rgba(255,245,220,0.08), rgba(180,140,255,0.05)) !important;
  box-shadow: inset 0 0 22px rgba(180,140,255,0.30), inset 4px 0 16px rgba(255,255,255,0.18);
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(180deg, #fff, #d8c0ff, #fff) 1;
  animation: gal-tr-city-aurora-border 3s ease-in-out infinite;
}
@keyframes gal-tr-city-aurora-border {
  0%,100% { box-shadow: inset 0 0 22px rgba(180,140,255,0.30), inset 4px 0 16px rgba(255,255,255,0.18); }
  50%     { box-shadow: inset 0 0 38px rgba(216,192,255,0.55), inset 6px 0 22px rgba(255,255,255,0.32); }
}
.gal-tr-city:has(.gal-city-astre-md) {
  background: linear-gradient(90deg, rgba(180,140,255,0.16), rgba(180,140,255,0.05)) !important;
  box-shadow: inset 0 0 14px rgba(180,140,255,0.20);
}

/* ─────────────────────────────────────────────────────────────────
   MOBILE / TABLETTE — refonte complète (Phase 10)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .city-page { padding: 20px 16px 50px; }
  .city-hero-card { padding: 24px 22px; }
  .city-3d-panel { height: 380px; }
  .city-bld-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .cityb-img { height: 200px; }
}
@media (max-width: 768px) {
  .city-page { padding: 14px 10px 40px; }
  .city-hero-name h1 { font-size:var(--fs-4xl); letter-spacing: 3px; }
  .city-hero-rolepay { font-size:var(--fs-sm); }
  .city-tab {
    padding: 10px 14px;
    font-size: 10px;
    letter-spacing: 1.5px;
    flex: 1 1 auto;
  }
  .city-3d-panel { display: none; }
  .city-bld-grid { grid-template-columns: 1fr; gap: 14px; }
  .cityb-card { max-width: 100%; }
  .cityb-img { height: 200px; }
  .cityb-name { font-size: 18px; padding-right: 56px; }
  .cityb-ico { font-size: 38px; }
  .cityb-lvl-badge { width: 50px; height: 50px; }
  .cityb-lvl-badge b { font-size: 18px; }
  /* Tabs en bottom-bar mobile */
  .city-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    margin: 0 -10px 16px;
    padding-left: 10px; padding-right: 10px;
    scrollbar-width: none;
    /* M6 P0-Cite-1 — scroll-snap + fade gradient pour signaler scrollabilité */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent 100%);
  }
  .city-tabs::-webkit-scrollbar { display: none; }
  .city-tab {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  /* Reliques cards plus compactes */
  .city-relique-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .city-relique-card { padding: 18px 12px 14px; min-height: 220px; }
  .city-relique-ico { font-size: 50px; }
  .city-relique-name { font-size:var(--fs-base); }
  /* Saison podium en colonnes */
  .city-season-title { font-size:var(--fs-2xl); letter-spacing: 3px; }
  .city-season-table th { font-size: 10px; padding: 8px 10px; }
  .city-season-table td { padding: 10px; font-size:var(--fs-sm); }
  /* Recherche en 1 colonne (déjà via @media existant) */
  .city-research-tree { gap: 16px; padding: 16px 0; }
  .city-tech-node { grid-template-columns: 60px 1fr; padding: 10px; }
  .city-tech-glyph { width: 60px; height: 60px; }
  .city-tech-glyph .tech-ico { font-size:var(--fs-3xl); }
  .city-tech-action { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 8px; }
  /* Particules + runes background : réduire opacité sur mobile (perf + lisibilité) */
  .city-page::after { opacity: 0.4; }
  .city-page::before { animation: none; }
}
@media (max-width: 480px) {
  .city-hero-name h1 { font-size:var(--fs-3xl); letter-spacing: 2px; }
  .city-seal { width: 110px; height: 110px; }
  .city-seal-roman { font-size: 28px; }
  .cityb-perks { font-size:var(--fs-xs); }
}

/* ─── Modal détail hero (clic sur card → vue agrandie) ─── */
.hero-detail-modal {
  position: fixed; inset: 0;
  background: var(--shade-7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index:var(--z-confirm-modal);
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
}
.hero-detail-box {
  position: relative;
  background: linear-gradient(160deg, var(--bg2) 0%, #1a1330 100%);
  border: 1px solid var(--accent, #c890ff);
  border-radius: 14px;
  width: min(90vw, 1100px);
  max-height: 90vh;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  box-shadow: 0 20px 80px var(--shade-5), 0 0 60px rgba(200,144,255,0.18);
  overflow: hidden;
}
.hero-detail-3d {
  width: 100%;
  min-height: 520px;
  background: var(--bg);
  position: relative;
}
.hero-detail-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.hero-detail-info {
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 16px;
  color: #e8dcff;
  overflow-y: auto;
}
.hd-header { display: flex; flex-direction: column; gap: 6px; }
.hd-faction {
  font-family:var(--font-display);
  font-size:var(--fs-xs); letter-spacing: 2.5px;
  color: var(--accent, #c890ff);
  text-transform: uppercase;
  opacity: 0.85;
}
.hero-detail-name {
  font-family:var(--font-display);
  font-size: 36px; letter-spacing: 3px;
  margin: 0;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, var(--accent, #c890ff) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
}
.hd-status {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius:var(--radius-md);
  background: rgba(200,144,255,0.07);
  border: 1px solid rgba(200,144,255,0.18);
}
.hd-status-active { background: rgba(120,255,160,0.06); border-color: rgba(120,255,160,0.22); }
.hd-status-locked { background: rgba(255,170,80,0.06); border-color: rgba(255,170,80,0.22); }
.hd-status-ico { font-size:var(--fs-2xl); }
.hd-status-val { font-size:var(--fs-md); font-weight: 600; color:var(--textbright); margin-top: 2px; }

.hd-section {
  padding: 14px 16px;
  border-radius:var(--radius-md);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(200,144,255,0.15);
}
.hd-section-label {
  font-family:var(--font-display);
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent, #c890ff);
  margin-bottom: 8px;
  opacity: 0.85;
}
.hd-power-name {
  font-size: 18px; font-weight: 600;
  color: #ffd5a0;
  margin-bottom: 6px;
}
.hd-power-desc {
  font-size: 13px; line-height: 1.55;
  color: #d8c8f0;
  margin-bottom: 10px;
}
.hd-power-cd {
  font-size:var(--fs-xs);
  color: #998;
  padding-top: 8px;
  border-top: 1px dashed rgba(200,144,255,0.15);
}
.hd-passive-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 8px;
}
.hd-passive-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 8px;
  background: rgba(120,255,180,0.06);
  border: 1px solid rgba(120,255,180,0.18);
  border-radius:var(--radius);
}
.hd-passive-val {
  font-family:var(--font-display);
  font-size:var(--fs-2xl); font-weight: 700;
  color: #7eff9c;
  letter-spacing: 1px;
}
.hd-passive-name {
  font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #aab; margin-top: 3px;
}
.hd-passive-note {
  font-size:var(--fs-xs);
  color: #889;
  font-style: italic;
  text-align: center;
  line-height: 1.4;
}
.hero-detail-close {
  position: absolute; top: 12px; right: 16px;
  background: var(--tint-4);
  border: 1px solid rgba(200,144,255,0.4);
  color:var(--textbright); font-size:var(--fs-2xl); line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
}
.hero-detail-close:hover { background: rgba(255,80,80,0.3); }
@media (max-width: 768px) {
  .hero-detail-box { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; }
  .hero-detail-3d { min-height: 360px; }
  .hero-detail-name { font-size: 28px; }
  .hero-detail-info { padding: 20px; }
}

/* ─────────────────────────────────────────────────────────────────
   BIBLIOTHÈQUE — Constellation pentagonale (Phase 5)
   5 emplacements disposés en pentagone autour d'un cœur central.
   Liaisons SVG entre les voies, pulsation quand 5/5 équipés.
   ───────────────────────────────────────────────────────────────── */
.lib-constellation {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1.15 / 1;
  margin: 30px auto 40px;
}
.lib-constellation-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.lib-constellation-svg .lib-link {
  stroke: rgba(216,192,255,0.18);
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  fill: none;
  transition: stroke 0.4s, stroke-width 0.4s;
}
.lib-constellation-svg .lib-link.lib-link-active {
  stroke: var(--cit-gold);
  stroke-width: 1.8;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px rgba(var(--gold-bright-rgb), 0.7));
  animation: lib-link-shimmer 2.5s ease-in-out infinite;
}
@keyframes lib-link-shimmer {
  0%,100% { stroke-opacity: 0.7; }
  50%     { stroke-opacity: 1; }
}

/* Cœur central */
.lib-core {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 140px; height: 140px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--gold-bright-rgb), 0.30), rgba(140,90,200,0.25) 50%, rgba(20,10,50,0.85) 100%);
  border: 2px solid var(--cit-gold);
  box-shadow:
    0 0 32px rgba(var(--gold-bright-rgb), 0.45),
    inset 0 0 24px rgba(216,192,255,0.20);
  text-align: center;
  padding: 16px;
  animation: lib-core-pulse 4s ease-in-out infinite;
}
.lib-core.lib-core-full { animation: lib-core-pulse 2s ease-in-out infinite; }
@keyframes lib-core-pulse {
  0%,100% { box-shadow: 0 0 32px rgba(var(--gold-bright-rgb), 0.45), inset 0 0 24px rgba(216,192,255,0.20); }
  50%     { box-shadow: 0 0 56px rgba(var(--gold-bright-rgb), 0.85), inset 0 0 36px rgba(216,192,255,0.40); }
}
.lib-core-glyph {
  font-size: 36px;
  color: var(--cit-gold);
  text-shadow: 0 0 14px rgba(var(--gold-bright-rgb), 0.8);
  line-height: 1;
  margin-bottom: 4px;
  font-family:var(--font-mystic-deco);
}
.lib-core-count {
  font-family:var(--font-mystic-deco);
  font-size: 24px;
  font-weight: 800;
  color:var(--textbright);
  text-shadow: 0 0 10px rgba(216,192,255,0.7);
  letter-spacing: 2px;
}
.lib-core-lbl {
  font-family:var(--font-mystic);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(216,192,255,0.85);
  margin-top: 2px;
  line-height: 1.3;
}

/* 5 nœuds en pentagone — positionnés via classes lib-node-1..5 */
.lib-node {
  position: absolute;
  width: 200px;
  z-index: 3;
}
.lib-node-1 { left: 50%;  top: 0;   transform: translate(-50%, 0); }              /* haut */
.lib-node-2 { right: 0;   top: 32%; transform: translate(0, 0); }                 /* haut-droite */
.lib-node-3 { right: 8%;  bottom: 0; transform: translate(0, 0); }                /* bas-droite */
.lib-node-4 { left: 8%;   bottom: 0; transform: translate(0, 0); }                /* bas-gauche */
.lib-node-5 { left: 0;    top: 32%; transform: translate(0, 0); }                 /* haut-gauche */

/* La card individuelle dans un nœud */
.lib-card {
  display: flex; flex-direction: column;
  background:
    linear-gradient(165deg, rgba(20,15,38,0.92) 0%, rgba(12,8,24,0.95) 100%);
  border: 1.5px solid var(--cit-frame);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.lib-card:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 32px rgba(216,192,255,0.40);
  border-color: var(--cit-frame-strong);
}
.lib-card-axis {
  font-family:var(--font-mystic);
  font-size: 10px; letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 10px;
  color:var(--textbright);
  font-weight: 700;
  background: linear-gradient(90deg, var(--tint-4) 0%, var(--tint-5) 50%, var(--tint-4) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.lib-card-body {
  padding: 16px 14px 12px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  flex: 1;
  gap: 6px;
}
.lib-card-ico {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 8px rgba(216,192,255,0.55));
}
.lib-card-name {
  font-family:var(--font-mystic);
  font-size:var(--fs-base); letter-spacing: 1.2px;
  text-transform: uppercase;
  color:var(--textbright);
  font-weight: 700;
}
.lib-card-desc {
  /* Texte de regle : police de lecture. */
  font-family:var(--font-body);
  font-size: 11px; line-height: 1.45;
  color: rgba(216,192,255,0.80);
  font-style: normal;
  margin-top: 2px;
}
.lib-card-footer {
  padding: 8px 14px 12px;
  border-top: 1px dashed rgba(216,192,255,0.18);
  text-align: center;
}
.lib-card-btn {
  width: 100%;
  padding: 8px 12px;
  font-family:var(--font-mystic);
  font-size:var(--fs-xs); letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--cit-parme2) 0%, #8a4dff 100%);
  border: 1px solid rgba(var(--gold-bright-rgb), 0.30);
  border-radius: var(--radius-s);
  color:var(--textbright); font-weight: 700;
  cursor: pointer;
  transition:var(--btn-tr);
}
.lib-card-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(216,192,255,0.50), 0 0 14px rgba(var(--gold-bright-rgb), 0.30); }
.lib-card-active {
  font-family:var(--font-mystic);
  font-size:var(--fs-xs); letter-spacing: 1.5px;
  color: var(--cit-gold);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(var(--gold-bright-rgb), 0.5);
}
.lib-card-empty .lib-card-ico { opacity: 0.45; }
.lib-card-empty .lib-card-name { color: #aab; }
.lib-card-empty { border-style: dashed; }
.lib-card-equipped { border-color: var(--cit-gold); box-shadow: 0 0 22px rgba(var(--gold-bright-rgb), 0.30); }
.lib-card-equipped:hover { border-color: var(--cit-gold); box-shadow: 0 0 32px rgba(var(--gold-bright-rgb), 0.55); }

@media (max-width: 1100px) {
  .lib-constellation { max-width: 600px; }
  .lib-node { width: 170px; }
}
@media (max-width: 768px) {
  .lib-constellation { max-width: 100%; aspect-ratio: auto; height: auto; padding: 0; margin: 0 auto; }
  .lib-constellation-svg { display: none; }
  .lib-core { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 18px; }
  .lib-node { position: relative; width: 100%; left: auto; right: auto; top: auto; bottom: auto; transform: none; margin-bottom: 12px; }
}

/* Picker (modal de choix de perk) — grille classique conservée */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.lib-card {
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(20,15,38,0.85) 0%, rgba(12,8,24,0.95) 100%);
  border: 1px solid rgba(200,144,255,0.22);
  border-radius:var(--radius-lg);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.lib-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shade-3);
  border-color: rgba(200,144,255,0.4);
}
.lib-card-axis {
  font-family:var(--font-display);
  font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 10px;
  color:var(--textbright);
  font-weight: 600;
  background: linear-gradient(90deg, var(--tint-4) 0%, var(--tint-5) 50%, var(--tint-4) 100%);
  border-bottom: 1px solid var(--tint-4);
}
.lib-card-body {
  padding: 18px 16px 14px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  flex: 1;
  gap: 8px;
}
.lib-card-ico {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 6px var(--shade-3));
}
.lib-card-name {
  font-family:var(--font-display);
  font-size:var(--fs-md); letter-spacing: 1.5px;
  text-transform: uppercase;
  color:var(--textbright);
  font-weight: 600;
}
.lib-card-desc {
  font-size: 12px; line-height: 1.5;
  color: #c8b8e8;
  margin-top: 4px;
}
.lib-card-footer {
  padding: 10px 14px 12px;
  border-top: 1px dashed rgba(200,144,255,0.18);
  text-align: center;
}
.lib-card-btn {
  width: 100%;
  padding: 8px 12px;
  font-family:var(--font-display);
  font-size:var(--fs-xs); letter-spacing: 1px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--accent, #c890ff) 0%, #8a4dff 100%);
  border: none; border-radius: var(--radius-s);
  color:var(--textbright); font-weight: 700;
  cursor: pointer;
  transition: transform var(--btn-dur) var(--btn-ease), box-shadow var(--btn-dur) var(--btn-ease);
}
.lib-card-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(200,144,255,0.4); }
.lib-card-active {
  font-family:var(--font-display);
  font-size:var(--fs-xs); letter-spacing: 1.5px;
  color: #7eff9c;
  font-weight: 600;
}

/* Couleurs par axe (bandeau haut) */
.lib-axis-guerre      .lib-card-axis { background: linear-gradient(90deg, #5a1a1a, #c93b1e, #5a1a1a); }
.lib-axis-economie    .lib-card-axis { background: linear-gradient(90deg, #3a2a0a, var(--gold-deep), #3a2a0a); color: #ffe; }
.lib-axis-exploration .lib-card-axis { background: linear-gradient(90deg, #0a2a3a, #20a0d4, #0a2a3a); }
.lib-axis-prestige    .lib-card-axis { background: linear-gradient(90deg, #2a0a3a, #c890ff, #2a0a3a); }
.lib-axis-empty       { color: #888; }
.lib-axis-empty       .lib-card-axis { background: var(--tint-3); color: #889; }

.lib-card-empty .lib-card-ico { opacity: 0.45; }
.lib-card-empty .lib-card-name { color: #aab; }
.lib-card-empty { border-style: dashed; }

.lib-card-equipped { border-color: rgba(126,255,156,0.35); }
.lib-card-equipped:hover { border-color: rgba(126,255,156,0.55); }

.lib-card-used { opacity: 0.5; filter: grayscale(60%); }
.lib-card-used .lib-card-btn { display: none; }

@media (max-width: 768px) {
  .lib-grid { grid-template-columns: 1fr; }
  .lib-card-ico { font-size:var(--fs-4xl); }
  .lib-card-name { font-size:var(--fs-base); }
}

/* ─────────────────────────────────────────────────────────────────
   FILES ACTIVES — timeline horizontale (Phase 9)
   Au lieu de 3 cards séparées : 1 ligne avec icône + barre + ETA
   ───────────────────────────────────────────────────────────────── */
.city-active-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 22px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(140,90,200,0.10), rgba(var(--gold-bright-rgb), 0.04));
  border: 1px solid rgba(216,192,255,0.18);
  border-radius: 14px;
  position: relative;
}
.city-active-banner::before {
  content: '⌛ FILES ACTIVES';
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 0 10px;
  background: var(--cit-deeper);
  font-family:var(--font-mystic);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--cit-parme);
  text-transform: uppercase;
}
.city-active-item {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--tint-4);
  border-radius:var(--radius-md);
  transition: all .2s ease;
  position: relative;
  overflow: hidden;
}
.city-active-cancel {
  padding: 6px 10px;
  font-size:var(--fs-md);
  line-height: 1;
  min-width: 32px;
  min-height: 32px;
}
.city-active-item:hover { border-color: rgba(216,192,255,0.35); transform: translateX(2px); }
.city-active-build   {   box-shadow:inset 3px 0 0 0 #7ed3ff; }
.city-active-power   {   box-shadow:inset 3px 0 0 0 #ff8b3a; }
.city-active-pilgrim {   box-shadow:inset 3px 0 0 0 var(--cit-parme); }

.city-active-ico {
  font-size: 24px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 0 8px rgba(216,192,255,0.7));
}
.city-active-build .city-active-ico { color: #7ed3ff; }
.city-active-power .city-active-ico { color: #ff8b3a; }
.city-active-pilgrim .city-active-ico { color: var(--cit-parme); }

/* Clarté files actives (survey) : légende + lignes cliquables par catégorie */
.city-active-legend {
  font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--textsoft); opacity: .8; padding: 0 2px 2px;
}
.city-active-row { cursor: default; }
.city-active-row[role="button"] { cursor: pointer; }
.city-active-row[role="button"]:hover .city-active-item {
  border-color: rgba(216,192,255,0.5); transform: translateX(2px);
}
.city-cat-struct   .city-active-item { border-left-color: #ffcf6a; }
.city-cat-struct   .city-active-ico  { color: #ffcf6a; }
.city-cat-bld      .city-active-item { border-left-color: #7ed3ff; }
.city-cat-bld      .city-active-ico  { color: #7ed3ff; }
.city-cat-research .city-active-item { border-left-color: #b98bff; }
.city-cat-research .city-active-ico  { color: #b98bff; }
.city-cat-forge    .city-active-item { border-left-color: #ff8b3a; }
.city-cat-forge    .city-active-ico  { color: #ff8b3a; }
.city-active-cancel:hover {
  background: rgba(255,90,90,0.18); border-color: rgba(255,90,90,0.6); color: var(--color-atk);
}

.city-active-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.city-active-label {
  font-family:var(--font-mystic);
  font-size:var(--fs-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(216,192,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.city-active-label b {
  color:var(--textbright);
  letter-spacing: 0.5px;
  text-transform: none;
  font-family: system-ui, sans-serif;
  font-weight: 700;
}
/* Barre de progression dynamique */
.city-active-bar {
  height: 4px;
  background: var(--shade-3);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.city-active-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, currentColor, rgba(255,255,255,0.5));
  width:100%; transform-origin:left center; transform:scaleX(var(--pct,0));
  transition: transform 1s linear;
  box-shadow: 0 0 8px currentColor;
}
.city-active-build .city-active-bar-fill { color: #7ed3ff; }
.city-active-power .city-active-bar-fill { color: #ff8b3a; }
.city-active-pilgrim .city-active-bar-fill { color: var(--cit-parme); }

.city-active-timer {
  font-family:var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--cit-gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(var(--gold-bright-rgb), 0.5);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────
   RECHERCHE — Arbre Cité ramifié (Phase 6)
   4 branches en formation orbitale autour d'un noyau Sanctuaire
   ───────────────────────────────────────────────────────────────── */
.city-research-tree {
  position: relative;
  padding: 30px 12px 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: start;
}
.city-branch {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20,10,50,0.30), rgba(10,5,32,0.55));
  border: 1px solid var(--cit-frame);
  border-radius:var(--radius-xl);
  padding: 20px 18px 22px;
  overflow: hidden;
}
.city-branch::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.65;
}
.city-branch-header {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(216,192,255,0.20);
}
.city-branch-glyph {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size:var(--fs-2xl);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: rgba(0,0,0,0.40);
  filter: drop-shadow(0 0 10px currentColor);
}
.city-branch-title {
  font-family:var(--font-mystic-deco);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 12px currentColor;
  margin: 0;
}
.city-branch-techs {
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
/* Tech node — design type "rune" carrée avec rune intérieure */
.city-tech-node {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(20,10,50,0.55), rgba(10,5,32,0.85));
  border: 1px solid rgba(216,192,255,0.20);
  border-radius:var(--radius-lg);
  transition: all 0.25s ease;
}
.city-tech-node:hover { transform: translateX(4px); border-color: var(--cit-frame-strong); box-shadow: 0 6px 18px rgba(216,192,255,0.22); }
.city-tech-node.is-max {
  border-color: currentColor;
  box-shadow: 0 0 22px currentColor;
  background: linear-gradient(135deg, rgba(var(--gold-bright-rgb), 0.18), rgba(10,5,32,0.85));
}
.city-tech-node.is-max .city-tech-glyph {
  background: radial-gradient(circle at 30% 30%, var(--cit-gold), rgba(180,120,40,0.85) 70%, rgba(80,40,0,0.9) 100%);
  border-color: var(--cit-gold);
  box-shadow: 0 0 16px rgba(var(--gold-bright-rgb), 0.7);
}
.city-tech-glyph {
  width: 78px; height: 78px;
  background:
    radial-gradient(circle at 30% 30%, rgba(216,192,255,0.20), rgba(140,90,200,0.30) 60%, rgba(20,10,50,0.85)),
    var(--tech-bg, transparent);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay, normal;
  border: 1.5px solid currentColor;
  border-radius:var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.city-tech-glyph::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, var(--shade-2));
}
.city-tech-glyph .tech-ico {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size:var(--fs-4xl);
  filter: drop-shadow(0 0 8px currentColor);
  z-index: 1;
}
.city-tech-glyph .tech-lvl {
  position: absolute;
  bottom: 2px; right: 4px;
  font-family:var(--font-mystic-deco);
  font-size:var(--fs-xs);
  font-weight: 800;
  color:var(--textbright);
  text-shadow: 0 1px 4px var(--shade-8);
  z-index: 2;
}
.city-tech-info { min-width: 0; }
.city-tech-name {
  font-family:var(--font-mystic);
  font-size:var(--fs-md);
  font-weight: 700;
  color:var(--textbright);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 4px;
  text-shadow: 0 0 8px currentColor;
}
.city-tech-desc {
  /* Texte de regle : police de lecture, pas la capitale romaine (cf. entete). */
  font-family:var(--font-body);
  font-size:var(--fs-md);
  font-style: normal;
  color: rgba(232,220,255,0.92);
  line-height: 1.5;
}
.city-tech-action {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
}
.city-tech-cost {
  display: inline-flex; align-items: center; gap: 6px;
  font-family:var(--font-display);
  font-size:var(--fs-base);
  font-weight: 700;
  color: var(--cit-gold);
  white-space: nowrap;
}
.city-tech-cost .city-pts-ico { width: 18px; height: 18px; }
/* 25/08 — Le bouton « AMÉLIORER » etait quasi invisible, et c'est la SEULE action
   de l'onglet Recherche.
   Cause : son fond est tire de `currentColor` — la couleur de la branche, posee
   par le JS sur `.city-tech-node` — mais la regle redefinissait `color` JUSTE
   EN DESSOUS. Une valeur `currentColor` se resout avec la couleur FINALE de
   l'element : le degrade devenait donc blanc, et `brightness(0.8)` eteignait
   ensuite le fond ET le texte.
   🔑 Poser `color` dans la meme regle qu'un `currentColor` retourne la teinte
   qu'on croyait garder. On laisse `color` porter la branche, et on peint le
   texte separement. */
.city-tech-btn {
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 55%, transparent), transparent);
  border: 1px solid currentColor;
  -webkit-text-fill-color: var(--textbright);
  padding: 8px 14px;
  font-family:var(--font-mystic);
  font-size:var(--fs-xs);
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition:var(--btn-tr);
  white-space: nowrap;
}
.city-tech-btn:hover { filter: brightness(1.2); transform: translateY(-1px); }
.city-tech-max {
  font-family:var(--font-mystic);
  font-size:var(--fs-xs);
  letter-spacing: 2px;
  color: var(--cit-gold);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(var(--gold-bright-rgb), 0.6);
}

@media (max-width: 1100px) {
  .city-research-tree { grid-template-columns: 1fr; }
}

/* Bug iPad Pro paysage + petits desktops (1101-1799px) : le tree est en 2 colonnes
   mais chaque card devient trop étroite (~150-300px) pour caser glyph + info + action
   sur la même ligne. Le bouton RECHERCHER (nowrap, ~138px) absorbe l'auto-col et la
   description tombe à ~0px de large → 1 mot par ligne. Fix : on stacke l'action
   sous l'info, comme à ≤768px mais en gardant le glyph à sa taille desktop. */
@media (min-width: 1101px) and (max-width: 1799px) {
  .city-tech-node { grid-template-columns: 78px 1fr; }
  .city-tech-action {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
  }
}

/* ─── Catalogue Reliques (9 possibles, lecture seule) ─── */
.rel-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.rel-cat-card {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),0.06), rgba(0,0,0,0.40));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius:var(--radius-md);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .2s, border-color .2s;
}
.rel-cat-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb),0.5); }
.rel-cat-card.rarity-rare {   box-shadow:inset 3px 0 0 0 #7ed3ff; }
.rel-cat-card.rarity-mythic {  background: linear-gradient(180deg, rgba(255,184,77,0.06), rgba(0,0,0,0.40));  box-shadow:inset 3px 0 0 0 #ffb84d; }
.rel-cat-card.rel-cat-owned { box-shadow: inset 0 0 0 1px rgba(64,200,90,0.25); }
.rel-cat-head, .u-row-10 { display: flex; align-items: center; gap: 10px; }
.rel-cat-icon { font-size: 28px; flex-shrink: 0; filter: drop-shadow(0 2px 4px var(--shade-2)); }
.rel-cat-title { flex: 1; min-width: 0; }
.rel-cat-name {
  font-family:var(--font-display);
  font-size:var(--fs-base); font-weight: 700; color:var(--textbright);
  letter-spacing: 1px; text-transform: uppercase;
}
.rel-cat-rarity { font-size: 9px; letter-spacing: 1.5px; color: var(--textsoft); margin-top: 2px; }
.rarity-mythic .rel-cat-rarity { color: #ffb84d; }
.rel-cat-desc { font-size:var(--fs-sm); color: var(--textsoft); line-height: 1.5; }
.rel-cat-status {
  display: inline-block;
  padding: 3px 10px; border-radius:var(--radius-lg);
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  align-self: flex-start;
}
.rel-equipped { background: rgba(64,200,90,0.18); color: #7eea99; border: 1px solid rgba(64,200,90,0.4); }
.rel-owned    { background: rgba(126,211,255,0.14); color: #aae3ff; border: 1px solid rgba(126,211,255,0.35); }
.rel-available{ background: var(--tint-4); color: var(--textsoft); border: 1px solid var(--tint-5); }
.city-btn-small {
  font-size:var(--fs-xs); padding: 6px 10px; align-self: flex-start;
  margin-top: 4px;
}

/* ─── ÉPREUVE ACCOMPLIE — refonte 07/05/2026 ─── */
.city-found-tagline {
  font-size: 14px !important;
  color: var(--textsoft) !important;
  margin-bottom: 24px !important;
  line-height: 1.6 !important;
}
.city-found-costs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0 24px;
  text-align: left;
}
@media (max-width: 600px) {
  .city-found-costs { grid-template-columns: 1fr; }
}
.city-found-cost {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius:var(--radius-lg);
  background: linear-gradient(135deg, var(--tint-2), rgba(255,255,255,0.01));
  border: 1px solid var(--tint-4);
  transition: all 0.25s ease;
}
.city-found-cost.is-ok {
  border-color: rgba(120,255,160,0.35);
  background: linear-gradient(135deg, rgba(120,255,160,0.08), rgba(120,255,160,0.02));
}
.city-found-cost.is-missing {
  border-color: rgba(255,80,80,0.30);
  background: linear-gradient(135deg, rgba(255,80,80,0.06), rgba(255,80,80,0.01));
}
.city-found-cost-ico {
  font-size:var(--fs-4xl);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),0.45));
  flex-shrink: 0;
}
.city-found-cost-meta { flex: 1; min-width: 0; }
.city-found-cost-label {
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--textsoft);
  margin-bottom: 4px;
  opacity: 0.85;
}
.city-found-cost-val {
  font-family:var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
}
.city-found-cost-sep { color: var(--textsoft); opacity: 0.5; margin: 0 4px; font-weight: 400; }
.city-found-cost-hint {
  font-family:var(--font-mono);
  font-size: 10px;
  color: var(--textsoft);
  opacity: 0.7;
  margin-top: 4px;
  line-height: 1.4;
}
.city-found-cost-status {
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight: 700;
  flex-shrink: 0;
}
.city-found-cost.is-ok .city-found-cost-status { color: #7eff9c; text-shadow: 0 0 12px rgba(120,255,160,0.6); }
.city-found-cost.is-missing .city-found-cost-status { color: var(--danger); text-shadow: 0 0 12px rgba(255,80,80,0.5); }
.city-found-warning {
  margin-top: 14px;
  padding: 8px 14px;
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  color: #ffa97a;
  background: rgba(255,150,80,0.08);
  border: 1px dashed rgba(255,150,80,0.3);
  border-radius:var(--radius);
  letter-spacing: 0.5px;
}
.city-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  filter: saturate(0.4);
}

/* ─── Niveau X / Y max sur cards structures/bâtiments cité ─── */
.cityb-lvl-line {
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 8px;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),0.12), rgba(var(--accent-rgb),0.04));
  
  border-radius: 0 4px 4px 0;
  color: var(--textbright);
 box-shadow:inset 3px 0 0 0 rgba(var(--accent-rgb),0.55); }
.cityb-lvl-line b {
  color: var(--accent);
  font-size:var(--fs-sm);
}
.cityb-lvl-line span {
  color: var(--textsoft);
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.85;
}
.cityb-lvl-line.is-max {
  background: linear-gradient(135deg, rgba(var(--gold-bright-rgb), 0.18), rgba(var(--gold-bright-rgb), 0.05));
  border-left-color: rgba(var(--gold-bright-rgb), 0.7);
}
.cityb-lvl-line.is-max b { color: var(--gold-bright); }

/* ─── Indicateurs ressources empire (coûts upgrade Cité) ─── */
.cityb-cost-item.is-ok-empire {
  color: rgba(180,255,200,0.95);
  text-shadow: 0 0 6px rgba(120,255,160,0.3);
}
.cityb-cost-item.is-missing-empire {
  color: rgba(255,140,140,0.95);
  text-shadow: 0 0 6px rgba(255,80,80,0.4);
  position: relative;
}
.cityb-cost-item.is-missing-empire::after {
  content: '✗';
  margin-left: 4px;
  font-weight: 700;
}
.cityb-cost-item.is-ok-empire::after {
  content: '✓';
  margin-left: 4px;
  font-weight: 700;
  opacity: 0.7;
}

/* ─── Barre Pool Empire (compteur global PM + colonies) ─── */
.city-resbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 16px;
  margin: 10px 0 14px;
  background: linear-gradient(90deg, rgba(216,192,255,0.05) 0%, rgba(216,192,255,0.10) 50%, rgba(216,192,255,0.05) 100%);
  border: 1px solid rgba(216,192,255,0.18);
  border-radius:var(--radius-md);
  box-shadow: 0 0 18px rgba(216,192,255,0.06) inset;
}
.city-resbar-label {
  font-family: var(--font-mystic, 'Cinzel', serif);
  font-size:var(--fs-xs);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(var(--gold-bright-rgb), 0.95);
  text-shadow: 0 0 10px rgba(var(--gold-bright-rgb), 0.35);
  padding-right: 6px;
  border-right: 1px solid rgba(216,192,255,0.18);
}
.city-resbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size:var(--fs-md);
  color: rgba(235,230,255,0.92);
}
.city-resbar-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(216,192,255,0.4));
}
.city-resbar-item b {
  font-family: var(--font-mono, 'Rajdhani', sans-serif);
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.5px;
}
.city-resbar-hint {
  margin-left: auto;
  font-size: 11px;
  font-style: italic;
  color: rgba(216,192,255,0.55);
}
@media (max-width: 768px) {
  .city-resbar { gap: 10px; padding: 8px 12px; }
  .city-resbar-hint { width: 100%; margin-left: 0; text-align: center; }
}
@media (max-width: 420px) {
  .city-resbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .city-resbar-label { border-right: none; padding-right: 0; }
}

/* ─── Confirm Build/Upgrade Cité (modal) ─── */
.cfm-build {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.cfm-build-name {
  font-family: var(--font-mystic, 'Cinzel', serif);
  font-size:var(--fs-2xl);
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 1.5px;
  text-shadow: 0 0 10px rgba(var(--gold-bright-rgb), 0.4);
}
.cfm-build-lvl {
  font-size:var(--fs-lg);
  color: rgba(216,192,255,0.9);
  letter-spacing: 0.5px;
}
.cfm-build-costs { display: flex; flex-direction: column; gap: 8px; }
.cfm-build-cost {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size:var(--fs-lg);
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(216,192,255,0.10);
}
.cfm-build-cost img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.cfm-build-cost-lbl { color: rgba(216,192,255,0.85); font-size:var(--fs-md); }
.cfm-build-cost b { font-family: var(--font-mono, 'Rajdhani', sans-serif); font-weight: 700; font-size:var(--fs-lg); }
.cfm-build-cost-pool {
  margin-left: auto;
  font-size:var(--fs-base);
  font-style: italic;
  color: rgba(216,192,255,0.6);
}
.cfm-build-cost-mark { font-weight: 700; font-size: 16px; }
.cfm-build-cost.is-ok { border-color: rgba(120,255,160,0.30); }
.cfm-build-cost.is-ok b { color: rgba(180,255,200,0.95); }
.cfm-build-cost.is-ok .cfm-build-cost-mark { color: #7eff9c; text-shadow: 0 0 8px rgba(120,255,160,0.5); }
.cfm-build-cost.is-no { border-color: rgba(255,120,120,0.35); background: rgba(255,80,80,0.06); }
.cfm-build-cost.is-no b { color: rgba(255,140,140,0.95); }
.cfm-build-cost.is-no .cfm-build-cost-mark { color: var(--danger); text-shadow: 0 0 8px rgba(255,80,80,0.5); }
.cfm-build-time {
  font-size: 14px;
  color: rgba(216,192,255,0.9);
  padding-top: 6px;
  border-top: 1px dashed rgba(216,192,255,0.12);
}
.cfm-build-time b { font-family: var(--font-mono, 'Rajdhani', sans-serif); color: var(--gold-bright); font-size:var(--fs-lg); }
.cfm-build-hint {
  font-size:var(--fs-base);
  font-style: italic;
  color: rgba(216,192,255,0.6);
  padding-top: 2px;
}

/* ─── BACKGROUND Hero Cards 3D ─── */
/* Bg statique centré, ratio préservé. L'ancienne refonte 07/05 ajoutait drift+
   stars+scan diagonal mais ça écrasait le centrage et provoquait un flash visuel
   désagréable toutes les 8s — retiré 08/05/2026. */
.city-hero-3d-canvas {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}
/* Le canvas Three.js doit rester au-dessus du bg */
.city-hero-3d-canvas canvas { position: relative; z-index: 2; }

/* ─── A11Y : clavier + reduced-motion (08/05/2026) ─── */
.city-btn:focus-visible,
.city-tab:focus-visible,
.city-relique-btn:focus-visible,
.cityb-up-btn:focus-visible,
.hero-detail-close:focus-visible {
  outline: 2px solid var(--accent, #c890ff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .city-mystery-icon,
  .city-mystery-shimmer,
  .city-embers-rise,
  .gal-city-astre-pulse,
  .city-mystery-float {
    animation: none !important;
  }
  .city-hero-3d-canvas { background-attachment: scroll !important; }
}

/* M6 P0-Cite-1 — tabs ultra-compact <380px */
@media (max-width: 380px) {
  .city-tab {
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
}

/* Nom des ressources dans la barre POOL EMPIRE (audit UI 20/08, M2) */
.city-resbar-name {
  font-family: 'Orbitron', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--textsoft);
  margin: 0 3px 0 1px;
}
@media (max-width: 900px) { .city-resbar-name { display: none; } }