:root {
  --ink: #0f172a;
  --muted: #64748b;
  --muted-strong: #475569;
  --line: #e2e8f0;
  --card: #ffffff;
  --bg: #e5e7eb;
  --panel: #f8fafc;
  --night: #0f2437;
  --night-2: #172554;
  --primary: #6d28d9;
  --primary-2: #7c3aed;
  --primary-soft: #ede9fe;
  --accent: #fbbf24;
  --orange: #f97316;
  --blue: #38bdf8;
  --green: #22c55e;
  --radius: 26px;
  --shadow: 0 18px 46px rgba(15, 23, 42, .10);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
button, select, input { font: inherit; }
button { cursor: pointer; }

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--panel);
  box-shadow: 0 0 0 1px rgba(15,23,42,.06), 0 20px 80px rgba(15,23,42,.12);
  overflow: hidden;
}

.hero {
  position: relative;
  padding: 18px 18px 76px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 6%, rgba(56, 189, 248, .22), transparent 34%),
    linear-gradient(150deg, #0c2235 0%, #112b45 56%, #1e1b4b 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  left: -15%;
  right: -15%;
  bottom: -42px;
  height: 92px;
  background: var(--panel);
  border-radius: 50% 50% 0 0 / 58% 58% 0 0;
  z-index: 1;
}
.hero-nav,
.hero-content { position: relative; z-index: 3; }
.hero-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.back {
  color: rgba(255,255,255,.94);
  text-decoration: none;
  font-size: 14px;
  font-weight: 850;
  font-style: italic;
}
.territory {
  display: grid;
  gap: 6px;
  min-width: 148px;
}
.territory span {
  color: rgba(255,255,255,.74);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.territory select {
  width: 100%;
  max-width: 170px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 11px 13px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 900;
  outline: none;
  backdrop-filter: blur(10px);
}
.territory option { color: #111827; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 24px 0 12px;
  padding: 8px 13px;
  border: 1px solid rgba(251,191,36,.58);
  border-radius: 999px;
  color: #fde68a;
  background: rgba(251,191,36,.08);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
}
h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(40px, 11vw, 56px);
  line-height: .9;
  letter-spacing: -.06em;
}
.lead {
  margin: 18px 0 0;
  max-width: 24ch;
  color: rgba(255,255,255,.96);
  font-size: clamp(20px, 5.1vw, 26px);
  line-height: 1.32;
  text-wrap: balance;
}
.hero-content::before,
.hero-content::after,
.lead::before,
.lead::after {
  content: none !important;
  display: none !important;
}
.chapter-row {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding: 2px 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chapter-row::-webkit-scrollbar { display: none; }
.chapter {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 10px 15px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.chapter.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #111827;
}

.scope-strip {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -36px 18px 10px;
  padding: 8px;
  border: 1px solid rgba(226,232,240,.85);
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
  overflow-x: auto;
}
.scope-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  background: transparent;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 950;
}
.scope-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(109,40,217,.24);
}
.scope-strip p {
  min-width: 210px;
  margin: 0 6px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
}
.source-strip { margin-top: 10px; }

.source-strip {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 8px;
  margin: 10px 18px 14px;
  padding: 13px 15px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 32px rgba(15,23,42,.08);
}
.source-strip span {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.source-strip strong {
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.35;
}

.panel { padding: 12px 18px 18px; }
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.section-heading.compact { margin-top: 4px; }
.section-heading span {
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.section-heading h2 {
  margin: 4px 0 0;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -.03em;
}
.section-heading > strong {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 28px;
  line-height: 1;
}

.map-card {
  position: relative;
  min-height: 52vh;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  background: #dbeafe;
  box-shadow: var(--shadow);
}
#map { position: absolute; inset: 0; }

.map-fullscreen-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 650;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  color: #fff;
  background: rgba(15,23,42,.88);
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
  font-size: 12px;
  font-weight: 950;
  backdrop-filter: blur(10px);
}
.map-fullscreen-btn:hover { background: rgba(15,23,42,.96); }
body.map-fullscreen-open { overflow: hidden; }
.map-card.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.map-card.is-fullscreen .year-badge {
  top: 16px;
  font-size: clamp(24px, 7vw, 40px);
}
.map-card.is-fullscreen .map-fullscreen-btn {
  right: 16px;
  top: 16px;
}
.map-card.is-fullscreen .map-legend {
  left: 16px;
  right: 86px;
  bottom: 16px;
  max-width: 680px;
  max-height: min(30vh, 160px);
  font-size: 12px;
}
.map-card.is-fullscreen .decade-legend-grid {
  grid-template-columns: repeat(7, minmax(0, auto));
}

.year-badge {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 500;
  padding: 8px 18px 9px;
  border-radius: 999px;
  color: white;
  background: rgba(15,23,42,.90);
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 14px 38px rgba(15,23,42,.24);
}
.map-legend {
  position: absolute;
  left: 12px;
  right: 62px;
  bottom: 12px;
  z-index: 500;
  display: grid;
  gap: 6px;
  max-height: 92px;
  overflow: auto;
  padding: 9px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 26px rgba(15,23,42,.12);
  color: var(--muted-strong);
  font-size: 10px;
  font-weight: 850;
  backdrop-filter: blur(10px);
}
.map-legend strong {
  display: block;
  color: var(--ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.map-legend span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.map-legend i { width: 11px; height: 11px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.decade-legend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  gap: 6px 8px;
  align-items: center;
}
.decade-legend-grid span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legend-note { display: none; }
.leaflet-control-attribution { font-size: 9px; }

.timeline-card {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
}
.timeline-topline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted-strong);
  font-size: 13px;
}
.timeline-topline strong { color: var(--ink); }
#yearSlider { width: 100%; accent-color: var(--primary); }
.control-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; }
.primary-btn,
.ghost-btn {
  border: 0;
  border-radius: 999px;
  padding: 13px 16px;
  font-weight: 950;
}
.primary-btn { color: white; background: linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow: 0 14px 30px rgba(109,40,217,.26); }
.ghost-btn { color: var(--primary); background: var(--primary-soft); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi-card {
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.055);
}
.kpi-card span {
  display: block;
  min-height: 34px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}
.kpi-card strong {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  font-size: clamp(26px, 8vw, 36px);
  line-height: .92;
  letter-spacing: -.05em;
}
.kpi-card.accent { border-color: rgba(109,40,217,.22); background: linear-gradient(160deg, #fff 0%, #f3e8ff 100%); }
.kpi-card.accent strong { color: var(--primary); }
.kpi-card.accent-orange { border-color: rgba(249,115,22,.22); background: linear-gradient(160deg, #fff 0%, #ffedd5 100%); }
.kpi-card.accent-orange strong { color: #ea580c; }
.kpi-grid.soft .kpi-card { min-height: 108px; }

.chart-card {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.055);
}
.chart-card h3 { margin: 0; font-size: 17px; letter-spacing: -.02em; }
.chart-card p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.chart-wrap { position: relative; height: 230px; margin-top: 14px; }
.chart-wrap.small { height: 205px; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 0; }
.usage-list { display: grid; gap: 10px; margin-top: 14px; }
.usage-row { display: grid; gap: 7px; }
.usage-label { display: flex; justify-content: space-between; gap: 10px; color: var(--muted-strong); font-size: 13px; font-weight: 850; }
.usage-bar { height: 10px; border-radius: 999px; background: #eef2ff; overflow: hidden; }
.usage-bar > i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--blue)); }

.insights-list { display: grid; gap: 10px; }
.insight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--muted-strong);
  line-height: 1.38;
  font-size: 14px;
  box-shadow: 0 10px 24px rgba(15,23,42,.045);
}
.insight::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(251,191,36,.18);
}
.api-status { display: grid; gap: 9px; }
.api-status article {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: #fff;
}
.api-status strong { font-size: 13px; }
.api-status span { color: var(--muted); font-size: 12px; line-height: 1.35; }

@media (min-width: 760px) {
  .app-shell { width: min(100%, 1120px); }
  .hero { padding: 24px 28px 84px; }
  .source-strip { margin-inline: 28px; }
  .panel { padding-inline: 28px; }
  .map-panel { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
  .map-panel .section-heading { grid-column: 1 / -1; }
  .map-card { min-height: 600px; }
  .timeline-card { margin-top: 0; }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .two-col { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.method-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
}
.method-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: -.02em;
}
.method-card p {
  margin: 7px 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.45;
}
.method-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.method-badge.good { background: #dcfce7; color: #166534; }
.method-badge.warn { background: #ffedd5; color: #9a3412; }
.method-warning {
  padding-top: 7px;
  border-top: 1px solid rgba(226,232,240,.9);
  color: #7c2d12 !important;
  font-weight: 700;
}


.sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.sector-list span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.08);
  color: #2f2354;
  font-size: 0.86rem;
  font-weight: 650;
}

.sector-list strong {
  color: #6d28d9;
}


.method-list {
  margin: 8px 0 10px 18px;
  padding: 0;
  color: var(--muted);
  font-weight: 700;
}

.method-list li {
  margin: 4px 0;
}

.method-list strong {
  color: var(--ink);
}

/* --- Narrative V1 additions: OCS2D, Omphale, friches, priorisation --- */
.lead {
  max-width: 30ch;
  font-size: clamp(19px, 4.8vw, 25px);
}

.narrative-intro article {
  position: relative;
  overflow: hidden;
  padding: 16px 17px;
  border-radius: 26px;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9 0%, #0f2437 100%);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .14);
}

.narrative-intro article::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
}

.narrative-intro span {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 999px;
  color: #111827;
  background: var(--accent);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.narrative-intro p {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 720;
}

.kpi-card.accent-blue strong { color: #0284c7; }
.kpi-card.accent-green strong { color: #16a34a; }

.comparison-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.mini-map {
  position: relative;
  min-height: 165px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(226,232,240,.9);
  background: #e0f2fe;
  box-shadow: 0 12px 32px rgba(15,23,42,.07);
}

.mini-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(18deg, rgba(34,197,94,.55) 0 28%, transparent 28% 100%),
    linear-gradient(130deg, transparent 0 48%, rgba(251,191,36,.60) 48% 64%, transparent 64% 100%),
    radial-gradient(circle at 78% 28%, rgba(124,58,237,.58) 0 18%, transparent 18% 100%),
    radial-gradient(circle at 35% 72%, rgba(14,165,233,.50) 0 20%, transparent 20% 100%);
}

.mini-map.after::before {
  background:
    linear-gradient(18deg, rgba(34,197,94,.40) 0 20%, transparent 20% 100%),
    linear-gradient(130deg, transparent 0 43%, rgba(251,191,36,.48) 43% 57%, transparent 57% 100%),
    radial-gradient(circle at 68% 36%, rgba(124,58,237,.78) 0 26%, transparent 26% 100%),
    radial-gradient(circle at 35% 72%, rgba(14,165,233,.44) 0 18%, transparent 18% 100%);
}

.mini-map span {
  position: absolute;
  left: 13px;
  top: 13px;
  z-index: 2;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.78);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.mini-map i {
  position: absolute;
  z-index: 2;
  display: block;
  width: 26px;
  height: 20px;
  border-radius: 6px;
  background: rgba(249,115,22,.82);
  box-shadow: 0 0 0 2px rgba(255,255,255,.28);
}

.mini-map i:nth-of-type(1) { left: 22%; top: 42%; }
.mini-map i:nth-of-type(2) { left: 55%; top: 54%; }
.mini-map i:nth-of-type(3) { left: 72%; top: 66%; }
.mini-map i:nth-of-type(4) { left: 38%; top: 28%; }

.swap-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: #111827;
  background: var(--accent);
  font-weight: 950;
  box-shadow: 0 14px 32px rgba(15,23,42,.20);
}

.mutation-list,
.lever-list,
.brownfield-list,
.profile-list {
  display: grid;
  gap: 10px;
}

.mutation-list article,
.lever-list article,
.brownfield-list article,
.profile-list article {
  padding: 12px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(226,232,240,.9);
}

.mutation-list strong,
.lever-list strong,
.brownfield-list strong,
.profile-list strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: -.01em;
}

.mutation-list span,
.brownfield-list span,
.profile-list span,
.lever-list span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mutation-list article span {
  display: block;
  width: auto;
  margin: 5px 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.lever-list p,
.brownfield-list p,
.profile-list p {
  margin: 5px 0 0;
  color: var(--muted-strong);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 680;
}

.brownfield-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
}

.brownfield-list article p {
  grid-column: 1 / -1;
}

.brownfield-list b {
  color: var(--primary);
  font-size: 16px;
}

.priority-score {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 18px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, #172554 0%, #6d28d9 100%);
  box-shadow: 0 18px 46px rgba(15,23,42,.14);
}

.priority-score span {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.priority-score strong {
  display: block;
  margin-top: 4px;
  font-size: 48px;
  line-height: .95;
  letter-spacing: -.06em;
}

.priority-score p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}

@media (min-width: 560px) {
  .comparison-card { grid-template-columns: 1fr 1fr; }
  .swap-badge { top: 50%; }
}

.link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 430px) {
  .map-legend {
    left: 10px;
    right: 58px;
    bottom: 10px;
    max-height: 86px;
    border-radius: 16px;
    padding: 8px 9px;
  }
  .map-legend strong { font-size: 9px; }
  .map-legend i { width: 10px; height: 10px; border-radius: 3px; }
  .decade-legend-grid { grid-template-columns: repeat(3, minmax(0, auto)); gap: 5px 7px; }
  .map-fullscreen-btn { padding: 8px 11px; font-size: 11px; }
  .map-card.is-fullscreen .map-legend {
    left: 10px;
    right: 70px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    max-height: 122px;
    font-size: 10px;
  }
  .map-card.is-fullscreen .decade-legend-grid { grid-template-columns: repeat(3, minmax(0, auto)); }
}


/* hard remove stray hero dot */
.hero .lead::before,
.hero .lead::after,
.hero-content::before,
.hero-content::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.hero .red-dot,
.hero .dot,
.hero [class*="pulse"],
.hero [class*="decorative"] {
  display: none !important;
}

.chart-wrap { position: relative; }
.chart-empty-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-weight: 800;
  color: #334155;
  pointer-events: none;
}
.socio-kpi-grid .kpi-card strong {
  font-size: clamp(1.15rem, 3vw, 1.8rem);
}


/* Socio-démo V2 : 6 indicateurs homogènes et unités lisibles */
.socio-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.socio-kpi-grid .kpi-card {
  min-height: 126px;
  overflow: hidden;
}
.socio-kpi-grid .kpi-card strong {
  font-size: clamp(1.35rem, 6.5vw, 2.15rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  word-break: normal;
  overflow-wrap: normal;
}
.kpi-main-value,
.kpi-unit {
  display: block;
}
.kpi-unit {
  margin-top: 2px;
  font-size: .72em;
  line-height: 1.02;
  letter-spacing: -.03em;
}
@media (min-width: 760px) {
  .socio-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Socio-démo V4 : meilleure lisibilité des unités et suppression des débordements */
.socio-kpi-grid .kpi-card {
  min-height: 132px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.socio-kpi-grid .kpi-card > span {
  min-height: auto;
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.15;
}
.socio-kpi-grid .kpi-card strong {
  margin-top: 0;
  font-size: clamp(1.55rem, 7vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.socio-kpi-grid .kpi-card strong.has-unit {
  font-size: initial;
  letter-spacing: normal;
}
.socio-kpi-grid .kpi-main-value {
  display: block;
  color: var(--ink);
  font-size: clamp(1.55rem, 7vw, 2.25rem);
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.045em;
}
.socio-kpi-grid .kpi-unit {
  display: block;
  margin-top: 6px;
  color: var(--muted-strong);
  font-size: clamp(.78rem, 3.3vw, .98rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
}
#avgHouseholdSize .kpi-main-value,
#density .kpi-main-value {
  font-size: clamp(1.35rem, 6vw, 2rem);
}
#avgHouseholdSize .kpi-unit,
#density .kpi-unit {
  font-size: clamp(.76rem, 3vw, .92rem);
}
.method-card .method-warning {
  display: none !important;
}
@media (max-width: 430px) {
  .socio-kpi-grid { gap: 8px; }
  .socio-kpi-grid .kpi-card { min-height: 124px; border-radius: 18px; padding: 14px; }
  .socio-kpi-grid .kpi-card strong { font-size: clamp(1.35rem, 6.2vw, 1.85rem); }
  .socio-kpi-grid .kpi-main-value { font-size: clamp(1.35rem, 6.2vw, 1.85rem); }
}


 .banatic-strip {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  margin: 0 18px 14px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.banatic-strip[hidden] { display: none !important; }
.banatic-strip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(100%, 430px);
  min-height: 50px;
  padding: 14px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 52%, #0f172a 100%);
  box-shadow: 0 16px 34px rgba(91, 33, 182, .24);
  font-size: clamp(.9rem, 3.6vw, 1rem);
  font-weight: 950;
  letter-spacing: -.01em;
  text-decoration: none;
  text-align: center;
}
.banatic-strip a::after {
  content: "↗";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  font-size: .9em;
  flex: 0 0 auto;
}
.banatic-strip a:focus-visible {
  outline: 3px solid rgba(250, 204, 21, .85);
  outline-offset: 3px;
}

@media (max-width: 440px) {
  .banatic-strip { margin-inline: 14px; }
  .banatic-strip a { min-height: 48px; padding-inline: 14px; }
}

/* BANATIC CTA - version finale */
.socio-panel .banatic-strip {
  display: flex;
  justify-content: stretch;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.socio-panel .banatic-strip[hidden] {
  display: none !important;
}
.socio-panel .banatic-strip a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 16px 18px;
  border: 1px solid rgba(124, 58, 237, .18);
  border-radius: 22px;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(135deg, #7c3aed 0%, #5b21b6 48%, #172554 100%);
  box-shadow: 0 18px 38px rgba(91, 33, 182, .22), inset 0 1px 0 rgba(255,255,255,.22);
  font-size: clamp(.92rem, 3.4vw, 1.05rem);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-align: center;
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.socio-panel .banatic-strip a::after {
  content: none !important;
}
.socio-panel .banatic-strip a:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 22px 46px rgba(91, 33, 182, .28), inset 0 1px 0 rgba(255,255,255,.24);
}
.socio-panel .banatic-strip a:active {
  transform: translateY(0);
}
.socio-panel .banatic-strip a:focus-visible {
  outline: 3px solid rgba(250, 204, 21, .88);
  outline-offset: 3px;
}
@media (max-width: 440px) {
  .socio-panel .banatic-strip { margin-top: 14px; }
  .socio-panel .banatic-strip a { min-height: 52px; border-radius: 20px; padding: 14px 14px; }
}

/* Version verrouillée : volets en attente */
.pending-card {
  border: 1px dashed rgba(99, 102, 241, 0.30);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(14, 165, 233, 0.06));
  border-radius: 24px;
  padding: 22px;
  color: #334155;
}

.pending-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  color: #3730a3;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.pending-card p {
  margin: 0;
  line-height: 1.6;
  font-size: 0.98rem;
}