/* ─── Fonts ──────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Charter — système sur macOS/iOS, fallbacks élégants pour les autres */
:root {
  --font-serif: 'Charter', 'Bitstream Charter', 'Sitka Text', Cambria, Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  --accent:        #C6A44E;
  --accent-light:  #D4B96A;
  --accent-dark:   #A8893A;
  --accent-pale:   #F5EDD8;
  --accent-pale2:  #EDE0BE;

  --bg:            #FAFAF7;
  --bg-alt:        #F3F1EC;
  --bg-warm:       #F7F5F0;

  --text:          #1A1A18;
  --text-secondary:#6B6860;
  --text-muted:    #9B9688;

  --border:        #E8E5DD;
  --border-light:  #EDEAE2;

  --card-bg:       #ffffff;

  --shadow-sm:  0 1px 3px rgba(26,26,24,.05);
  --shadow-md:  0 4px 20px rgba(26,26,24,.07);
  --shadow-lg:  0 12px 40px rgba(26,26,24,.11);

  --radius:     8px;
  --container:  1120px;
  --ease:       cubic-bezier(.4,0,.2,1);
  --header-h:   64px;
}

/* ─── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 17.5px;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ─── Layout ─────────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* ─── Header ─────────────────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 12px;
  z-index: 100;
  margin: 0 16px;
  overflow: hidden;
  background: rgba(250, 250, 247, 0.28);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), opacity 0.4s ease;
}
.header.scrolled {
  background: rgba(250, 250, 247, 0.52);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
.header::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,164,78,0.45), transparent);
  pointer-events: none;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.logo-mark {
  width: 36px; height: 36px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(198,164,78,.3);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.logo:hover .logo-mark { background: var(--accent-light); box-shadow: 0 4px 12px rgba(198,164,78,.4); }
.logo-text-block { display: flex; flex-direction: column; gap: 2px; }
.logo-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--text);
  line-height: 1;
}
.logo-sub {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.45;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative;
  padding: 6px 13px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 6px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 13px; right: 13px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-link:hover { color: var(--text); background: rgba(128,128,128,0.12); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--text); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.lang-switcher {
  display: flex; align-items: center; gap: 1px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: 7px;
  padding: 3px;
}
.lang-btn {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-muted);
  transition: all .2s var(--ease);
}
.lang-btn.active { background: var(--card-bg); color: var(--accent-dark); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.search-btn {
  width: 36px; height: 36px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all .2s var(--ease);
}
.search-btn:hover { background: var(--accent-pale); color: var(--accent-dark); }

.hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border-radius: 7px;
  transition: background .2s var(--ease);
}
.hamburger:hover { background: var(--bg-alt); }
.hamburger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--text-secondary); border-radius: 1px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav {
    position: fixed;
    top: 88px; left: 16px; right: 16px;
    background: rgba(250, 250, 247, 0.92);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    flex-direction: column; align-items: stretch;
    padding: 10px 12px 14px; gap: 2px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    z-index: 999;
  }
  .nav.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-link { padding: 9px 12px; }
}

/* ─── Hero ───────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity .2s var(--ease);
  animation: hero-bounce 2.4s ease-in-out infinite;
  /* button reset */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hero-scroll-hint:hover { opacity: 0.9; }
.hero-scroll-hint svg { display: block; }

@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(52px);
  will-change: transform;
  pointer-events: none;
}
/* Wave effect: alternate + ease-in-out makes each orb drift slowly back
   and forth across the hero, like a fog bank rolling in and out. */
.hero-orb-1 {
  width: 75%; height: 70%;
  top: -22%; right: -8%;
  background: radial-gradient(ellipse, rgba(198,164,78,.50) 0%, transparent 62%);
  animation: wave-1 36s ease-in-out infinite alternate;
}
.hero-orb-2 {
  width: 60%; height: 62%;
  bottom: -24%; left: -10%;
  background: radial-gradient(ellipse, rgba(198,164,78,.38) 0%, transparent 62%);
  animation: wave-2 44s ease-in-out infinite alternate;
}
.hero-orb-3 {
  width: 44%; height: 48%;
  top: 28%; left: 32%;
  background: radial-gradient(ellipse, rgba(198,164,78,.26) 0%, transparent 60%);
  animation: wave-3 28s ease-in-out infinite alternate;
}

@keyframes wave-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-28vw, 16vh) scale(1.06); }
}
@keyframes wave-2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(24vw, -14vh) scale(1.08); }
}
@keyframes wave-3 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-14vw, -10vh) scale(0.94); }
  100% { transform: translate(18vw, 14vh) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}

.hero-content { max-width: 680px; position: relative; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.hero-eyebrow::before {
  content: '';
  width: 22px; height: 1.5px;
  background: var(--accent);
  border-radius: 1px;
}
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--text);
  margin-bottom: 18px;
}
.hero-title.fade-up {
  filter: blur(6px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
}
.hero-title.fade-up.visible { filter: blur(0); }
.hero-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 540px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ─── Section link ───────────────────────────────────────────────────────────── */
.section-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  transition: gap .2s var(--ease);
}
.section-link:hover { gap: 10px; }

/* ─── Home sections (idées, auteurs, politiques) ─────────────────────────────── */
.home-section {
  padding: 72px 0;
}
.home-section-alt {
  background: var(--bg-warm);
  margin: 28px 0;
  padding: 64px 0;
}

@media (max-width: 1024px) {
  .home-section { padding: 60px 0; }
  .home-section-alt { padding: 52px 0; margin: 20px 0; }
}
@media (max-width: 768px) {
  .home-section { padding: 48px 0; }
  .home-section-alt { padding: 40px 0; margin: 14px 0; }
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-header > div:first-child { max-width: 640px; }

.section-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 12px;
}
.section-desc {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ─── Idea cards ─────────────────────────────────────────────────────────────── */
.idea-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .idea-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .idea-grid { grid-template-columns: 1fr; } }

.idea-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: all .25s var(--ease);
  overflow: hidden;
}
.idea-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--accent);
  transition: height .3s var(--ease);
}
.idea-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(198,164,78,.14);
}
.idea-card:hover::before { height: 100%; }

.idea-card-num {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.idea-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 2px;
}
.idea-card-author {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent-dark);
  margin-bottom: 10px;
}
.idea-card-desc {
  font-family: var(--font-serif);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ─── Author cards ───────────────────────────────────────────────────────────── */
.author-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 1024px) { .author-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .author-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .author-grid { grid-template-columns: 1fr; } }

.author-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: all .25s var(--ease);
}
.author-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(198,164,78,.12);
}
.author-card-portrait {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-pale), var(--accent-pale2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-dark);
  margin-bottom: 6px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.author-card-portrait img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .35s var(--ease);
}
.author-card:hover .author-card-portrait img { transform: scale(1.06); }
.author-card-portrait img.no-img { display: none; }
.author-card-name {
  font-family: var(--font-serif);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.author-card-dates {
  font-size: .74rem;
  color: var(--text-muted);
  font-feature-settings: 'tnum';
}
.author-card-tagline {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text-secondary);
  flex: 1;
  margin-top: 4px;
}
.author-card-school {
  display: inline-block;
  align-self: flex-start;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-pale);
  padding: 3px 9px;
  border-radius: 10px;
  margin-top: auto;
}

/* ─── Politician cards ───────────────────────────────────────────────────────── */
.politician-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .politician-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .politician-grid { grid-template-columns: 1fr; } }

.politician-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: all .25s var(--ease);
}
.politician-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(198,164,78,.14);
}
.politician-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.politician-card-portrait {
  width: 56px; height: 60px;
  border-radius: 8px;
  background: var(--text);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.politician-card-portrait img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .35s var(--ease);
}
.politician-card:hover .politician-card-portrait img { transform: scale(1.06); }
.politician-card-portrait img.no-img { display: none; }
.politician-card-flag {
  font-size: 1.4rem;
  line-height: 1;
}
.politician-card-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}
.politician-card-years {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent-dark);
  font-feature-settings: 'tnum';
  margin-bottom: 8px;
}
.politician-card-tagline {
  font-family: var(--font-serif);
  font-size: .96rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Make .author-card and .politician-card behave as buttons (since they open a modal) */
button.author-card, button.politician-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  border: 1px solid var(--border);
}
button.author-card:focus-visible,
button.politician-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Bio modal ──────────────────────────────────────────────────────────────── */
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.bio-modal.open {
  pointer-events: auto;
  opacity: 1;
}
.bio-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, .55);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter .3s var(--ease), -webkit-backdrop-filter .3s var(--ease);
}
.bio-modal.open .bio-modal-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.bio-modal-content {
  position: relative;
  background: var(--bg);
  border-radius: 16px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .25);
  transform: translateY(16px) scale(.97);
  transition: transform .3s var(--ease);
}
.bio-modal.open .bio-modal-content {
  transform: translateY(0) scale(1);
}

.bio-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  z-index: 10;
  transition: background .2s var(--ease), transform .2s var(--ease);
  border: 1px solid var(--border);
}
.bio-modal-close:hover {
  background: var(--accent-pale);
  transform: rotate(90deg);
}
.bio-modal-close svg { width: 16px; height: 16px; }

.bio-modal-photo {
  width: 100%;
  height: 280px;
  background: linear-gradient(135deg, var(--accent-pale), var(--accent-pale2));
  position: relative;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.bio-modal-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.bio-modal-photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.bio-modal-body {
  padding: 28px 32px 32px;
}
.bio-modal-school,
.bio-modal-flag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-pale);
  padding: 4px 10px;
  border-radius: 14px;
  margin-bottom: 12px;
}
.bio-modal-flag { font-size: 1rem; padding: 2px 8px; }

.bio-modal-name {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 4px;
}
.bio-modal-dates {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 18px;
  font-feature-settings: 'tnum';
}
.bio-modal-bio {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}
.bio-modal-bio p + p { margin-top: 0.8em; }

.bio-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bio-modal-actions .btn {
  flex: 1;
  justify-content: center;
  min-width: 180px;
}
.bio-modal-actions .btn svg { margin-left: 6px; }

@media (max-width: 540px) {
  .bio-modal-photo { height: 220px; }
  .bio-modal-body { padding: 22px 22px 24px; }
  .bio-modal-name { font-size: 1.4rem; }
  .bio-modal-actions { flex-direction: column; }
  .bio-modal-actions .btn { width: 100%; }
}

body.modal-open { overflow: hidden; }

/* ─── Factsheet CTA ──────────────────────────────────────────────────────────── */
.factsheet-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: linear-gradient(135deg, var(--card-bg), var(--accent-pale));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 44px;
  flex-wrap: wrap;
}
.factsheet-cta-content { max-width: 640px; }
.factsheet-cta .btn { flex-shrink: 0; }

@media (max-width: 768px) {
  .factsheet-cta { padding: 32px 28px; }
}

/* ─── Factsheets grid ────────────────────────────────────────────────────────── */
.factsheets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .factsheets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .factsheets-grid { grid-template-columns: 1fr; } }

.factsheet-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: all .25s var(--ease);
}
.factsheet-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(198,164,78,.14);
}

.topic-badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--text);
  color: #fff;
}

.factsheet-stat {
  margin: 8px 0;
  padding: 14px 16px;
  background: var(--accent-pale);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.factsheet-stat-value {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1.1;
}
.factsheet-stat-label {
  display: block;
  font-size: .74rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.factsheet-marker {
  display: inline-flex;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-pale);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ─── Category badges ────────────────────────────────────────────────────────── */
.category-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--accent-pale);
  color: var(--accent-dark);
}
.category-badge-sm {
  font-size: .62rem;
  padding: 2px 7px;
}
.lang-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* ─── Page header (articles, about, search) ──────────────────────────────────── */
.page-hero {
  padding: 32px 0 24px;
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 4px;
}
.page-subtitle { font-size: .85rem; color: var(--text-muted); }

/* ─── Filter bar ─────────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 36px;
}
.filter-label { font-size: .75rem; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.filter-btn {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  background: var(--card-bg);
  transition: all .2s var(--ease);
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-pale); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.articles-count { font-size: .75rem; color: var(--text-muted); margin-left: auto; }

/* ─── Article grid (listing + search) ───────────────────────────────────────── */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}
/* Sur la homepage, la section a déjà son padding — pas besoin du margin-bottom */
.home-section .articles-grid { margin-bottom: 0; }
@media (max-width: 1024px) { .articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .articles-grid { grid-template-columns: 1fr; } }

.article-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-pale2); }
.card-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.card-date { font-size: .72rem; color: var(--text-muted); margin-left: auto; }
.card-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  transition: color .2s var(--ease);
}
.article-card:hover .card-title { color: var(--accent-dark); }
.card-excerpt {
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 4px;
  transition: gap .2s var(--ease);
}
.article-card:hover .card-link { gap: 9px; }

/* ─── Article standalone (no nav) ───────────────────────────────────────────── */
.article-page { background: var(--bg); }

.article-minimal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 56px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(250,250,247,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.article-minimal-header.scrolled { border-bottom-color: var(--border); }
@media (max-width: 768px) { .article-minimal-header { padding: 0 20px; } }

.article-standalone {
  max-width: 780px;
  margin: 0 auto;
  padding: 80px 32px 96px;
}
@media (max-width: 768px) { .article-standalone { padding: 64px 20px 72px; } }

.article-standalone-header { margin-bottom: 40px; }

.article-standalone-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.article-date { font-size: .75rem; color: var(--text-muted); }
.translation-link {
  font-size: .72rem; font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.translation-link:hover { color: var(--accent-dark); }

.article-standalone-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  line-height: 1.2;
  margin-bottom: 14px;
}
.article-excerpt-hero {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  font-style: italic;
}

.article-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.article-tag {
  font-size: .72rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
}

.article-standalone-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}
.article-home-link {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color .2s var(--ease);
}
.article-home-link:hover { color: var(--accent); }

/* ─── Floating Table of Contents ─────────────────────────────────────────────── */
.toc {
  position: fixed;
  top: 72px;
  left: max(16px, calc(50% - 390px - 260px));
  width: 220px;
  max-height: calc(100vh - 96px);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.toc-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 0 8px;
  transition: color .2s var(--ease);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.toc-toggle:hover { color: var(--accent); }

.toc-toggle-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .25s var(--ease);
  color: var(--text-muted);
}
.toc.collapsed .toc-toggle-icon { transform: rotate(-90deg); }

.toc-body {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 140px);
  transition: max-height .3s var(--ease), opacity .25s var(--ease);
  opacity: 1;
  /* Subtle scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.toc-body::-webkit-scrollbar { width: 3px; }
.toc-body::-webkit-scrollbar-track { background: transparent; }
.toc-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}
.toc-body::-webkit-scrollbar-thumb:hover { background: var(--accent-pale2); }

.toc.collapsed .toc-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border);
}

.toc-item { display: block; }

.toc-link {
  display: block;
  font-family: var(--font-sans);
  font-size: .72rem;
  line-height: 1.45;
  color: var(--text-muted);
  padding: 4px 10px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color .15s var(--ease), border-color .15s var(--ease);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc-link:hover { color: var(--text); }
.toc-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}

/* Indentation by heading level */
.toc-link[data-level="2"] { padding-left: 10px; }
.toc-link[data-level="3"] { padding-left: 22px; font-size: .68rem; }
.toc-link[data-level="4"] { padding-left: 34px; font-size: .65rem; color: var(--text-muted); }

/* Hide TOC when viewport isn't wide enough */
@media (max-width: 1200px) { .toc { display: none; } }

/* ─── Article content ────────────────────────────────────────────────────────── */
.article-body { padding: 36px 0 72px; }
.article-content { max-width: 700px; }
.article-content p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.82;
  color: var(--text);
  margin-bottom: 1.4em;
}
.article-content h2 {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  margin: 2.2em 0 .6em;
  padding-top: .4em;
  border-top: 1px solid var(--border-light);
}
.article-content h3 { font-family: var(--font-serif); font-size: 1.2rem; margin: 1.8em 0 .5em; }
.article-content h4 { font-family: var(--font-serif); font-size: 1.02rem; margin: 1.5em 0 .4em; }
.article-content ul, .article-content ol {
  margin: 0 0 1.4em 1.4em;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.8;
}
.article-content li { margin-bottom: .4em; }
.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }
.article-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--accent-dark); }
.article-content strong { font-weight: 700; }
.article-content em { font-style: italic; }
.article-content blockquote {
  border-left: 2.5px solid var(--accent);
  margin: 1.8em 0;
  padding: 14px 22px;
  background: var(--accent-pale);
  border-radius: 0 6px 6px 0;
}
.article-content blockquote p {
  font-size: 1.05rem;
  font-style: italic;
  color: var(--accent-dark);
  margin: 0;
}
.article-content code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .875em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  color: var(--accent-dark);
}
.article-content pre {
  background: #1a1a18;
  border-radius: 8px;
  padding: 18px 22px;
  margin: 1.8em 0;
  overflow-x: auto;
}
.article-content pre code {
  background: none; border: none; padding: 0;
  color: #e4e4dc; font-size: .85rem; line-height: 1.6;
}
.article-content table {
  width: 100%; border-collapse: collapse;
  margin: 1.8em 0; font-size: .9rem;
}
.article-content th {
  background: var(--bg-alt);
  font-weight: 600;
  padding: 9px 14px;
  border: 1px solid var(--border);
  text-align: left;
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .02em;
}
.article-content td { padding: 9px 14px; border: 1px solid var(--border-light); font-family: var(--font-serif); }
.article-content tr:nth-child(even) td { background: var(--bg-alt); }
.article-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }
.article-content img { border-radius: 8px; margin: 1.8em 0; box-shadow: var(--shadow-md); }

/* ─── Data visualization components (viz-*) ──────────────────────────────────── */
/* Toutes les classes viz-* ne reçoivent PAS les styles de .article-content p, ul, ol */
/* car elles utilisent des éléments div/span. */

.article-content .viz-block {
  margin: 2.4em 0;
  font-family: var(--font-sans);
}
.article-content .viz-caption {
  font-size: .82rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  letter-spacing: .01em;
}
.article-content .viz-caption-sub {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 3px;
  font-style: italic;
  font-family: var(--font-serif);
}
.article-content .viz-source {
  font-size: .68rem;
  color: var(--text-muted);
  margin-top: 12px;
  font-family: var(--font-sans);
  letter-spacing: .01em;
  font-style: italic;
}

/* — Big stat card — */
.article-content .viz-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 1.8em 0;
}
.article-content .viz-stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
}
.article-content .viz-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.article-content .viz-stat-value {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.01em;
}
.article-content .viz-stat-value small {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 3px;
}
.article-content .viz-stat-label {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 8px;
}
.article-content .viz-stat-context {
  font-size: .76rem;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.4;
  font-family: var(--font-serif);
  font-style: italic;
}
.article-content .viz-stat.highlight { background: var(--accent-pale); border-color: var(--accent-pale2); }
.article-content .viz-stat.highlight::before { background: var(--accent-dark); }
.article-content .viz-stat.highlight .viz-stat-value { color: var(--accent-dark); }

/* — Horizontal bar chart — */
.article-content .viz-bars {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
}
.article-content .viz-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 90px;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-family: var(--font-sans);
}
.article-content .viz-bar-row + .viz-bar-row { border-top: 1px solid var(--border-light); }
.article-content .viz-bar-label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text);
}
.article-content .viz-bar-label small {
  display: block;
  font-size: .65rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 1px;
}
.article-content .viz-bar-track {
  height: 22px;
  background: var(--bg-alt);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.article-content .viz-bar-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  border-radius: 4px;
  transition: width 1s var(--ease);
}
.article-content .viz-bar-fill.subtle {
  background: var(--bg-warm);
  border: 1px solid var(--border);
}
.article-content .viz-bar-fill.danger {
  background: linear-gradient(90deg, #C8703A, #A8552A);
}
.article-content .viz-bar-value {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-serif);
}
.article-content .viz-bar-value small {
  font-size: .65rem;
  font-weight: 400;
  color: var(--text-muted);
}
@media (max-width: 600px) {
  .article-content .viz-bar-row { grid-template-columns: 90px 1fr 70px; gap: 8px; }
  .article-content .viz-bar-label { font-size: .72rem; }
  .article-content .viz-bar-value { font-size: .75rem; }
}

/* — Stacked bar (composition) — */
.article-content .viz-stack {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px;
}
.article-content .viz-stack-bar {
  display: flex;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.article-content .viz-stack-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  min-width: 0;
  font-family: var(--font-sans);
  letter-spacing: .02em;
}
.article-content .viz-stack-segment span { white-space: nowrap; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
.article-content .viz-stack-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.article-content .viz-stack-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .8rem;
  font-family: var(--font-sans);
}
.article-content .viz-stack-legend-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 4px;
}
.article-content .viz-stack-legend-text { line-height: 1.4; }
.article-content .viz-stack-legend-text strong { display: block; font-weight: 700; color: var(--text); }
.article-content .viz-stack-legend-text small { color: var(--text-muted); font-size: .72rem; font-family: var(--font-serif); }

/* Couleurs disponibles pour les segments */
.article-content .seg-1 { background: #1A1A18; }
.article-content .seg-2 { background: #4A4A42; }
.article-content .seg-3 { background: var(--accent-dark); }
.article-content .seg-4 { background: var(--accent); }
.article-content .seg-5 { background: var(--accent-light); }
.article-content .seg-6 { background: #C0AB7A; }
.article-content .seg-7 { background: #D5C8A6; }
.article-content .seg-8 { background: #B5B0A2; }

/* — Donut SVG (responsive) — */
.article-content .viz-donut-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
}
@media (max-width: 600px) {
  .article-content .viz-donut-wrap { grid-template-columns: 1fr; gap: 20px; justify-items: center; }
}
.article-content .viz-donut {
  width: 220px;
  height: 220px;
  position: relative;
}
.article-content .viz-donut svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.article-content .viz-donut circle { fill: transparent; stroke-width: 28; }
.article-content .viz-donut-bg { stroke: var(--bg-alt); }
.article-content .viz-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.article-content .viz-donut-center-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.article-content .viz-donut-center-label {
  font-size: .68rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* — Compare cards (France vs other) — */
.article-content .viz-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 1.6em 0;
}
.article-content .viz-compare-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  font-family: var(--font-sans);
}
.article-content .viz-compare-flag {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 6px;
}
.article-content .viz-compare-name {
  font-size: .72rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.article-content .viz-compare-value {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.article-content .viz-compare-context {
  font-size: .72rem;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-style: italic;
  line-height: 1.4;
}
.article-content .viz-compare-card.highlight { background: var(--accent-pale); border-color: var(--accent); }
.article-content .viz-compare-card.highlight .viz-compare-value { color: var(--accent-dark); }

/* — Callout — */
.article-content .viz-callout {
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 1.8em 0;
  font-family: var(--font-sans);
}
.article-content .viz-callout-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 8px;
}
.article-content .viz-callout-text {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

/* — Saving scenario card — */
.article-content .viz-saving {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.8em 0;
  font-family: var(--font-sans);
}
@media (max-width: 600px) { .article-content .viz-saving { grid-template-columns: 1fr; } }
.article-content .viz-saving-side {
  padding: 20px 22px;
}
.article-content .viz-saving-side + .viz-saving-side {
  border-left: 1px solid var(--border);
}
@media (max-width: 600px) {
  .article-content .viz-saving-side + .viz-saving-side { border-left: none; border-top: 1px solid var(--border); }
}
.article-content .viz-saving-label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.article-content .viz-saving-value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.article-content .viz-saving-value.economy { color: var(--accent-dark); }
.article-content .viz-saving-value.impact { color: #A8552A; }
.article-content .viz-saving-desc {
  font-size: .85rem;
  color: var(--text-secondary);
  font-family: var(--font-serif);
  line-height: 1.55;
}

/* — Top list (numérotée stylée) — */
.article-content .viz-toplist {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.article-content .viz-toplist-row {
  display: grid;
  grid-template-columns: 36px 1fr 110px;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-sans);
}
.article-content .viz-toplist-row:last-child { border-bottom: none; }
.article-content .viz-toplist-rank {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-dark);
  text-align: center;
}
.article-content .viz-toplist-name {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}
.article-content .viz-toplist-name small {
  display: block;
  font-size: .7rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-style: italic;
}
.article-content .viz-toplist-amount {
  text-align: right;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.article-content .viz-toplist-amount small {
  display: block;
  font-size: .65rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
}
@media (max-width: 600px) {
  .article-content .viz-toplist-row { grid-template-columns: 28px 1fr 80px; padding: 10px 14px; gap: 10px; }
  .article-content .viz-toplist-rank { font-size: .95rem; }
  .article-content .viz-toplist-amount { font-size: .85rem; }
}

/* — Final synthesis bar — */
/* ─── Line / Area chart ──────────────────────────────────────────────────────── */
.article-content .viz-chart {
  width: 100%;
  margin-top: 8px;
}
.article-content .viz-chart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.article-content .viz-chart-grid line {
  stroke: var(--border-light);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.article-content .viz-chart-axis line {
  stroke: var(--border);
  stroke-width: 1;
}
.article-content .viz-chart-axis text {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  fill: var(--text-muted);
  letter-spacing: .02em;
}
.article-content .viz-chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.article-content .viz-chart-area {
  fill: var(--accent);
  opacity: .12;
}
.article-content .viz-chart-line.line-2 { stroke: var(--text-secondary); stroke-dasharray: 4 4; }
.article-content .viz-chart-dot {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2;
}
.article-content .viz-chart-dot.peak {
  fill: var(--accent-dark);
  stroke: var(--accent-dark);
  r: 5;
}
.article-content .viz-chart-dot.trough {
  fill: var(--bg);
  stroke: var(--accent-dark);
  stroke-width: 2.5;
  r: 5;
}
.article-content .viz-chart-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--text-secondary);
}
.article-content .viz-chart-label.peak { fill: var(--accent-dark); }
.article-content .viz-chart-label.muted { fill: var(--text-muted); font-weight: 500; }
.article-content .viz-chart-marker {
  stroke: var(--text-muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .6;
}
.article-content .viz-chart-zone {
  fill: var(--accent-pale);
  opacity: .35;
}
.article-content .viz-chart-baseline {
  stroke: var(--text-secondary);
  stroke-width: 1;
}
@media (max-width: 600px) {
  .article-content .viz-chart-axis text { font-size: 9px; }
  .article-content .viz-chart-label { font-size: 9.5px; }
}

.article-content .viz-synthesis {
  background: linear-gradient(135deg, #1A1A18 0%, #2A2A22 100%);
  color: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  margin: 2em 0;
  font-family: var(--font-sans);
}
.article-content .viz-synthesis-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.article-content .viz-synthesis-value {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.article-content .viz-synthesis-value small {
  font-size: .4em;
  font-weight: 600;
  color: var(--accent-light);
  margin-left: 8px;
}
.article-content .viz-synthesis-desc {
  font-size: .95rem;
  color: rgba(255,255,255,.75);
  font-family: var(--font-serif);
  line-height: 1.6;
  max-width: 620px;
}

/* ─── Comparison columns (side-by-side firms / countries) ───────────────────── */
.article-content .viz-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 18px 0 8px;
}
.article-content .viz-comparison-col {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  position: relative;
}
.article-content .viz-comparison-col:first-child { border-top: 3px solid var(--text-secondary); }
.article-content .viz-comparison-col:last-child { border-top: 3px solid var(--accent); background: var(--accent-pale); }
.article-content .viz-comparison-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.article-content .viz-comparison-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: .9rem;
  border-bottom: 1px dashed var(--border-light);
}
.article-content .viz-comparison-stat:last-child { border-bottom: none; }
.article-content .viz-comparison-stat span {
  color: var(--text-muted);
  font-size: .82rem;
}
.article-content .viz-comparison-stat strong {
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  font-feature-settings: 'tnum';
}
@media (max-width: 640px) {
  .article-content .viz-comparison { grid-template-columns: 1fr; }
}

/* ─── Tables (multi-column data) ────────────────────────────────────────────── */
.article-content .viz-table {
  margin: 14px 0 6px;
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.article-content .viz-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.article-content .viz-table thead {
  background: var(--accent-pale);
}
.article-content .viz-table th {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  border-bottom: 2px solid var(--accent-pale2);
}
.article-content .viz-table th:not(:first-child) { text-align: right; }
.article-content .viz-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-serif);
  font-feature-settings: 'tnum';
}
.article-content .viz-table td:first-child {
  color: var(--text);
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: .85rem;
}
.article-content .viz-table td:not(:first-child) {
  text-align: right;
  color: var(--text-secondary);
}
.article-content .viz-table tbody tr:last-child td { border-bottom: none; }
.article-content .viz-table tbody tr:hover { background: rgba(198,164,78,.04); }
@media (max-width: 640px) {
  .article-content .viz-table { font-size: .8rem; }
  .article-content .viz-table th, .article-content .viz-table td { padding: 9px 10px; }
}

/* Add small spacing helper for stroke-dasharray on lines */
.article-content .viz-chart-line.subtle {
  stroke: var(--text-secondary);
  stroke-width: 1.6;
  opacity: .65;
}
.article-content .viz-chart-dot.subtle {
  fill: var(--text-secondary);
  opacity: .7;
}
.article-content .viz-chart-area.subtle {
  fill: var(--text-secondary);
  opacity: .08;
}

/* ─── Footnotes (marked-footnote + interactive tooltips) ─────────────────────── */
.article-content .footnotes {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--border);
  font-size: .875rem;
  color: var(--text-secondary);
}
.article-content .footnotes ol { margin-left: 1.2em; }
.article-content .footnotes li {
  font-family: var(--font-serif);
  font-size: .875rem;
  line-height: 1.6;
  margin-bottom: .6em;
}
.article-content .footnotes p { font-size: .875rem; margin-bottom: .3em; }

/* Inline footnote reference */
.article-content a[href^="#fn-"],
.article-content sup a {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  vertical-align: super;
  line-height: 0;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--accent-pale);
  margin-left: 2px;
  border: 1px solid var(--accent-pale2);
  cursor: pointer;
  position: relative;
  transition: background .15s var(--ease);
}
.article-content a[href^="#fn-"]:hover,
.article-content sup a:hover { background: var(--accent-pale2); }

/* Tooltip popup */
.fn-tooltip {
  position: absolute;
  z-index: 200;
  max-width: 320px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-serif);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.fn-tooltip.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ─── Article nav ────────────────────────────────────────────────────────────── */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  margin-top: 36px;
}
.article-nav-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  transition: all .2s var(--ease);
}
.article-nav-item:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.article-nav-item.next { text-align: right; }
.nav-direction { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.nav-title { font-family: var(--font-serif); font-weight: 700; font-size: .9rem; color: var(--text); line-height: 1.35; }

/* ─── Back link ──────────────────────────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 20px;
  transition: color .2s var(--ease);
}
.back-link:hover { color: var(--accent); }

/* ─── About ──────────────────────────────────────────────────────────────────── */
.section { padding: 32px 0 72px; }

/* ─── About page ─────────────────────────────────────────────────────────────── */
.about-content--single {
  max-width: 680px;
  margin: 0 auto;
}
.about-content p,
.about-content--single p {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 1.3em;
}
.about-section-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 2.4em 0 1em;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--border-light);
}
.about-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 1.4em;
}
.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.about-feature:hover { border-color: var(--accent-pale2); }
.about-feature-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 3px;
}
.about-feature div { font-family: var(--font-serif); font-size: .95rem; line-height: 1.7; color: var(--text-secondary); }
.about-feature strong { color: var(--text); }
.about-lang-note {
  font-size: .825rem !important;
  color: var(--text-muted) !important;
  margin-top: 2em !important;
  padding-top: 1.2em;
  border-top: 1px solid var(--border-light);
}
.about-callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--accent-pale);
  border: 1px solid var(--accent-pale2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 2em;
  font-family: var(--font-serif);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.about-callout strong { color: var(--text); display: block; margin-bottom: .2em; }
.about-callout-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
[data-theme="dark"] .about-callout {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  border-left-color: var(--accent);
}
.about-signature {
  margin-top: 2em !important;
  padding-top: 1.2em;
  border-top: 1px solid var(--border-light);
  font-style: italic;
  color: var(--text-muted) !important;
}

/* ─── Search page ────────────────────────────────────────────────────────────── */
.search-header { padding: 32px 0 24px; }
.search-header h1 { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin-bottom: 16px; }
.search-form { display: flex; gap: 8px; max-width: 560px; }
.search-input {
  flex: 1; height: 48px;
  padding: 0 18px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: .95rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s var(--ease);
}
.search-input:focus { border-color: var(--accent); }
.search-submit {
  height: 48px; padding: 0 22px;
  background: var(--accent); color: #fff;
  border-radius: 8px;
  font-weight: 600; font-size: .85rem;
  transition: background .2s var(--ease);
}
.search-submit:hover { background: var(--accent-light); }
.search-results-count { font-size: .85rem; color: var(--text-muted); margin-top: 14px; }
.search-results { padding: 28px 0 72px; }
.no-results { text-align: center; padding: 56px 0; color: var(--text-secondary); }
.no-results-icon { font-size: 2.5rem; margin-bottom: 14px; }
mark { background: var(--accent-pale); color: var(--accent-dark); border-radius: 2px; padding: 0 2px; }
.empty-state { text-align: center; padding: 56px 24px; color: var(--text-secondary); }
.empty-state-icon { font-size: 2rem; margin-bottom: 14px; }

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 20px;
  border-radius: 8px;
  font-size: .85rem; font-weight: 600;
  transition: all .2s var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-light); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-pale); }

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding: 40px 0 28px; background: var(--bg); }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 32px;
}
@media (max-width: 640px) { .footer-inner { flex-direction: column; } }
.footer-desc { font-size: .82rem; color: var(--text-muted); max-width: 240px; line-height: 1.6; margin-top: 10px; font-family: var(--font-serif); font-style: italic; }
.footer-nav { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-nav a { font-size: .82rem; color: var(--text-muted); transition: color .2s var(--ease); }
.footer-nav a:hover { color: var(--accent); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  gap: 14px; flex-wrap: wrap;
}
.footer-copy { font-size: .73rem; color: var(--text-muted); }
.footer-domains { display: flex; gap: 10px; }
.footer-domains a { font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); opacity: .5; transition: opacity .2s var(--ease); }
.footer-domains a:hover { opacity: 1; color: var(--accent); }

/* ─── 404 ────────────────────────────────────────────────────────────────────── */
.error-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 120px 0; }
.error-code { font-family: var(--font-serif); font-size: 8rem; font-weight: 700; color: var(--bg-alt); line-height: 1; margin-bottom: 16px; }
.error-page h2 { font-family: var(--font-serif); margin-bottom: 10px; }
.error-page p { color: var(--text-secondary); margin-bottom: 28px; }

/* ─── Animations ─────────────────────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s cubic-bezier(0,.0,.2,1), transform .4s cubic-bezier(0,.0,.2,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }

@media (max-width: 480px) {
  .article-nav { grid-template-columns: 1fr; }
  .featured-article { padding: 20px; }
  .masthead { padding-top: 80px; }
}

/* ─── Grandes idées — Pantheon ───────────────────────────────────────────────── */
.pantheon-section {
  padding: 0 0 100px;
}

/* Pediment */
.pantheon-pediment {
  width: 100%;
}
.pediment-gable {
  height: 72px;
  background: var(--accent-pale);
  border-left: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
  border-top: 1.5px solid var(--accent);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  position: relative;
}
.pediment-inscription {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
  opacity: 0.7;
  /* sits near the base of the triangle */
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.pediment-frieze {
  height: 26px;
  background: var(--accent-pale);
  border: 1.5px solid var(--accent);
  margin-top: -1px;
}

/* Colonnade */
.pantheon-colonnade {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  margin-top: -1px;
}

/* Individual pillar */
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform .2s var(--ease);
  /* stagger via CSS variable set inline */
  animation: fade-up-in .5s var(--ease) both;
  animation-delay: var(--col-delay, 0s);
}
@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pillar:hover { transform: translateY(-4px); }
.pillar.active { transform: translateY(-4px); }

/* Capital */
.pillar-capital {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pillar-capital-top {
  width: 100%;
  height: 10px;
  background: var(--accent-pale);
  border: 1.5px solid var(--accent);
  border-radius: 1px;
  transition: background .2s, border-color .2s;
}
.pillar-capital-neck {
  width: 80%;
  height: 14px;
  background: var(--accent-pale);
  /* trapezoid: wider at top, narrows toward shaft */
  clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
  transition: background .2s;
}
.pillar.active .pillar-capital-top,
.pillar:hover  .pillar-capital-top { background: rgba(198,164,78,.22); border-color: var(--accent); }
.pillar.active .pillar-capital-neck,
.pillar:hover  .pillar-capital-neck { background: rgba(198,164,78,.14); }

/* Shaft */
.pillar-shaft {
  width: 72%;
  flex: 1;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* subtle fluting via repeating gradient */
  background: repeating-linear-gradient(
    90deg,
    rgba(198,164,78,.06) 0px, rgba(198,164,78,.06) 1.5px,
    var(--accent-pale) 1.5px, var(--accent-pale) 10px
  );
  border-left: 1.5px solid rgba(198,164,78,.25);
  border-right: 1.5px solid rgba(198,164,78,.25);
  transition: background .25s, border-color .25s;
  position: relative;
}
.pillar.active .pillar-shaft,
.pillar:hover  .pillar-shaft {
  background: repeating-linear-gradient(
    90deg,
    rgba(198,164,78,.14) 0px, rgba(198,164,78,.14) 1.5px,
    rgba(198,164,78,.08) 1.5px, rgba(198,164,78,.08) 10px
  );
  border-color: var(--accent);
}
.pillar-num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent);
  opacity: .35;
  transition: opacity .2s;
  user-select: none;
}
.pillar.active .pillar-num,
.pillar:hover  .pillar-num { opacity: .75; }

/* Base */
.pillar-base {
  width: 100%;
  height: 14px;
  background: var(--accent-pale);
  border: 1.5px solid var(--accent);
  border-radius: 0 0 1px 1px;
  transition: background .2s;
}
.pillar.active .pillar-base,
.pillar:hover  .pillar-base { background: rgba(198,164,78,.22); }

/* Stylobate */
.pantheon-stylobate {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: -1px;
}
.stylobate-step {
  background: var(--accent-pale);
  border: 1.5px solid var(--accent);
  margin-top: -1px;
}
.stylobate-step.s1 { height: 10px; }
.stylobate-step.s2 { width: calc(100% + 12px); margin-left: -6px; height: 10px; }
.stylobate-step.s3 { width: calc(100% + 24px); margin-left: -12px; height: 12px; border-radius: 0 0 2px 2px; }

/* Detail panel */
.pillar-detail-panel {
  margin-top: 52px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 32px rgba(26,26,24,.07);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
  overflow: hidden;
}
.pillar-detail-panel.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.detail-panel-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 40px 22px;
  border-bottom: 1px solid var(--border);
}
.detail-panel-num {
  font-family: var(--font-serif);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--accent);
  opacity: .20;
  line-height: 1;
  flex-shrink: 0;
  min-width: 58px;
  text-align: right;
}
.detail-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.25;
}
.detail-author {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.detail-panel-body {
  padding: 36px 40px 48px;
  max-width: 760px;
  margin: 0 auto;
  font-size: .97rem;
}

/* ─── Widgets — shared building blocks ────────────────────────────────────── */
.widget-prompt {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 24px;
  font-weight: 500;
}
.widget-insight {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--accent-pale);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text);
}
.widget-insight > strong:first-of-type { display: block; margin-bottom: 4px; color: var(--accent); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.widget-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.widget-btn:hover  { filter: brightness(1.08); }
.widget-btn:active { transform: translateY(1px); }
.widget-btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.widget-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.widget-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--accent-pale);
  outline: none;
  cursor: pointer;
}
.widget-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--card-bg);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.widget-range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 2px solid var(--card-bg);
}
.widget-more {
  display: inline-block;
  margin-top: 24px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .03em;
  text-decoration: none;
  border-bottom: 1px dashed var(--accent);
  transition: opacity .15s;
}
.widget-more:hover { opacity: .75; }

/* 1. Invisible Hand ─────────────────────────────────────────────────────── */
.ih-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.ih-shop {
  background: var(--accent-pale);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.ih-emoji { font-size: 2rem; }
.ih-name  { font-weight: 600; font-size: .85rem; }
.ih-mood  { font-size: 1.5rem; }
.ih-greed { width: 100%; margin-top: 4px; }
.ih-output { font-size: .72rem; color: var(--text-muted); }
.ih-result {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.ih-villagers { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 10px; }
.ih-villager { font-size: 1.3rem; transition: transform .2s; }
.ih-villager.fed { transform: scale(1.1); }
.ih-meter { text-align: center; font-size: .92rem; }

/* 2. Comparative Advantage ─────────────────────────────────────────────── */
.comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.comp-person {
  background: var(--accent-pale);
  border-radius: 12px;
  padding: 14px;
}
.comp-person h4 { margin: 0 0 8px; font-size: 1rem; }
.comp-rate { font-size: .85rem; margin: 2px 0; color: var(--text-secondary); }
.comp-rate strong { color: var(--text); }
.comp-modes { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.comp-mode-btn {
  flex: 1;
  padding: 9px 12px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .2s;
}
.comp-mode-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.comp-results { display: flex; flex-direction: column; gap: 8px; }
.comp-result-row {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
}
.comp-result-row.total { font-weight: 700; padding-top: 8px; border-top: 1px solid var(--border); }
.comp-result-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.comp-bar {
  height: 14px;
  background: var(--accent-pale);
  border-radius: 7px;
  overflow: hidden;
}
.comp-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 7px;
  width: 0;
  transition: width .5s var(--ease);
}
.comp-bar-fill.total { background: linear-gradient(90deg, var(--accent), #e8a948); }

/* 3. Prices as Information ─────────────────────────────────────────────── */
.pi-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent-pale);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
}
.pi-mine {
  font-size: 2.5rem;
  text-align: center;
  transition: opacity .3s, transform .3s;
}
.pi-mine.collapsed { transform: rotate(-15deg) scale(.7); opacity: .35; }
.pi-label { font-size: .7rem; color: var(--text-muted); margin-top: 4px; }
.pi-price-display { text-align: center; font-size: 1rem; }
.pi-price-display strong { font-size: 1.6rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.pi-cities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.pi-city {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .9rem;
  position: relative;
  transition: background .3s, border-color .3s;
}
.pi-city.reacted {
  background: var(--accent-pale);
  border-color: var(--accent);
}
.pi-bubble {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: .8rem;
  font-style: italic;
  animation: pop-in .3s var(--ease);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 4. Dispersed Knowledge ───────────────────────────────────────────────── */
.disp-grid {
  overflow: hidden;
  padding-top: 8px;  /* headroom so top-row hover-lift stays inside */
  height: 116px;     /* ~2 visible rows */
  margin-bottom: 18px;
  position: relative;
}
.disp-grid-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  animation: disp-scroll 20s linear infinite;
}
@keyframes disp-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); } /* 50% because content is duplicated */
}
.disp-person {
  font-size: 1.6rem;
  background: var(--accent-pale);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 8px 0;
  cursor: pointer;
  transition: all .2s;
}
.disp-person:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 4px 12px rgba(198,164,78,.25); }
.disp-person.revealed { opacity: .35; border-color: var(--accent); }
.disp-revealed {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  min-height: 100px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
.disp-fact { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.disp-fact:last-child { border-bottom: 0; }
.disp-icon { display: inline-block; font-size: 1.2rem; margin-right: 6px; }
/* .disp-progress removed */

/* 5. Spontaneous Order ─────────────────────────────────────────────────── */
.so-canvas {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  margin: 0 auto;
}

/* 6. Economic Calculation ──────────────────────────────────────────────── */
.calc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.calc-option {
  display: grid;
  grid-template-columns: 44px 1fr 70px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--accent-pale);
  border: 2px solid transparent;
  border-radius: 10px;
  transition: all .25s;
}
.calc-option.cheapest {
  border-color: var(--accent);
  background: rgba(198,164,78,.18);
}
.calc-letter {
  width: 36px; height: 36px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-serif);
}
.calc-recipe { font-size: .88rem; }
.calc-cost { font-size: 1.05rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); }
.calc-prices {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* 7. Creative Destruction ──────────────────────────────────────────────── */
.cd-year {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .04em;
  margin-bottom: 8px;
}
#cd-slider { margin-bottom: 18px; }
.cd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cd-col {
  background: var(--accent-pale);
  border-radius: 12px;
  padding: 14px;
}
.cd-col h4 { margin: 0 0 8px; font-size: .9rem; }
.cd-col ul { list-style: none; padding: 0; margin: 0; font-size: .82rem; line-height: 1.7; }

/* 8. Coase ─────────────────────────────────────────────────────────────── */
.coase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.coase-actor {
  background: var(--accent-pale);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.coase-emoji { font-size: 2rem; }
.coase-name  { font-weight: 700; margin: 4px 0; }
.coase-label { font-size: .75rem; color: var(--text-muted); margin-bottom: 8px; }
.coase-value { font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-top: 6px; }
.coase-rights { display: flex; gap: 8px; margin-bottom: 14px; }
.coase-right {
  flex: 1;
  padding: 9px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  transition: all .2s;
}
.coase-right.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.coase-outcome {
  padding: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .9rem;
  line-height: 1.6;
}
.coase-tag {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: .82rem;
  color: var(--text-muted);
}

/* 9. Public Choice ─────────────────────────────────────────────────────── */
.pc-scale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.pc-side {
  background: var(--accent-pale);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.pc-icons { font-size: 1.3rem; line-height: 1.4; min-height: 50px; }
.pc-count { font-size: .82rem; color: var(--text-muted); margin: 6px 0; }
.pc-impact { font-size: 1.05rem; font-weight: 700; }
.pc-gain   { color: #2c8a52; }
.pc-loss   { color: #c0392b; }
.pc-mot { font-size: 1.5rem; margin-top: 8px; transition: transform .3s; }
.pc-mot.boom { animation: shake .5s ease; transform: scale(1.2); }
@keyframes shake {
  0%,100% { transform: scale(1.2); }
  25%     { transform: scale(1.4) rotate(-10deg); }
  75%     { transform: scale(1.4) rotate(10deg); }
}
.pc-outcome { margin-top: 14px; padding: 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; font-size: .9rem; line-height: 1.6; min-height: 20px; }
.pc-outcome:empty { display: none; }
.pc-tag { font-size: .82rem; color: var(--text-muted); }

/* 10. Monetarism ───────────────────────────────────────────────────────── */
.mon-printer {
  background: var(--accent-pale);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.mon-rate-display strong { color: var(--accent); font-size: 1.2rem; }
#mon-slider { margin-bottom: 18px; }
.mon-shop {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.mon-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-size: .88rem;
  text-align: center;
}
.mon-item strong { display: block; margin-top: 4px; font-size: 1.1rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.mon-wallet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  background: var(--accent-pale);
  border-radius: 10px;
  text-align: center;
  font-size: .9rem;
}
.mon-wallet strong { display: block; margin-top: 4px; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

/* 1. Invisible Hand — redesigned ───────────────────────────────────────── */
.ih-causal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--accent-pale);
  border-radius: 12px;
}
.ih-causal-step { text-align: center; flex: 1; min-width: 0; }
.ih-causal-icon  { font-size: 1.6rem; }
.ih-causal-label { font-size: .68rem; color: var(--text-secondary); line-height: 1.3; margin-top: 3px; }
.ih-causal-label small { font-size: .6rem; color: var(--text-muted); }
.ih-causal-arrow { font-size: 1.3rem; color: var(--accent); flex-shrink: 0; line-height: 1; }
.ih-motive-lbl { font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.ih-shop-stats {
  display: flex;
  gap: 10px;
  font-size: .75rem;
  color: var(--text-secondary);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* Comparative advantage — context + breakdown ────────────────────────────── */
.comp-context {
  font-size: .82rem;
  color: var(--text-secondary);
  background: var(--accent-pale);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.55;
}
.comp-breakdown {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .82rem;
  line-height: 1.6;
}
.comp-breakdown:empty { display: none; }
.comp-bd-row { padding: 4px 0; }
.comp-bd-row + .comp-bd-row { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px; }
.comp-bd-row em { color: var(--accent); font-style: normal; font-weight: 600; }

/* Spontaneous order — econ desc ─────────────────────────────────────────── */
.so-econ-desc {
  font-size: .85rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.55;
}

/* 2. Prices — button centering + positive event ─────────────────────────── */
.pi-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0;
}
.pi-city.reacted-good { background: #eafaf1; border-color: #2c8a52; }
.pi-bubble.good { background: #eafaf1; border-color: #2c8a52; color: #2c8a52; }
[data-theme="dark"] .pi-city.reacted-good { background: #0d2117; border-color: #2c8a52; }
[data-theme="dark"] .pi-bubble.good { background: #0d2117; border-color: #2c8a52; color: #4ade80; }
.pi-mine.booming { animation: bounce-mine .4s ease; }
@keyframes bounce-mine { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* 3. Dispersed Knowledge — fade overlay + popup ─────────────────────────── */
.disp-grid-wrap {
  position: relative;
  margin-bottom: 12px;
  overflow: hidden; /* clip hover-lifted buttons at top edge */
}
.disp-grid { margin-bottom: 0; }
.disp-fade-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Only left/right fade — top/bottom handled by overflow:hidden on .disp-grid */
  background: linear-gradient(to right, var(--card-bg, #fff) 0%, transparent 18%, transparent 82%, var(--card-bg, #fff) 100%);
}
[data-theme="dark"] .disp-fade-overlay {
  background: linear-gradient(to right, #1E1C18 0%, transparent 18%, transparent 82%, #1E1C18 100%);
}
/* Popup — fixed overlay centered on viewport */
.disp-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.disp-popup.visible { opacity: 1; pointer-events: auto; }
.disp-popup[hidden] { display: none; }
.disp-popup-content {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px 22px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(0);
}
.disp-popup-icon { font-size: 2.4rem; margin-bottom: 10px; }
.disp-popup-content h3 { font-size: 1.08rem; margin-bottom: 12px; }
.disp-popup-content p { font-size: .86rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
.disp-popup-conclusion { font-size: .83rem !important; font-style: italic; border-top: 1px dashed var(--border); padding-top: 12px !important; }

/* 4. Spontaneous Order — economic sub-widget ────────────────────────────── */
.so-econ-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  color: var(--text-muted);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.so-econ-divider::before,
.so-econ-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.so-econ-prompt { font-size: .88rem; color: var(--text-secondary); margin-bottom: 14px; }
.so-market-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: start;
  margin-bottom: 14px;
}
.so-market-side h4 { font-size: .82rem; margin-bottom: 8px; color: var(--text-secondary); }
.so-agents { display: flex; flex-direction: column; gap: 6px; }
.so-agent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: .8rem;
  transition: all .3s var(--ease);
}
.so-agent.matched {
  border-color: var(--accent);
  background: var(--accent-pale);
  transform: scale(1.03);
}
.so-agent-name  { font-weight: 500; }
.so-agent-price { color: var(--text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.so-market-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  gap: 4px;
}
.so-price-tag  { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; transition: color .4s; }
.so-price-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.so-econ-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.so-econ-result {
  padding: 12px 14px;
  background: var(--accent-pale);
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.55;
  min-height: 0;
  transition: all .3s;
}
.so-econ-result:empty { display: none; }
.so-result-note { color: var(--text-secondary); font-size: .82rem; }

/* Range track fix — centered track + visible on all browsers ─────────────── */
.widget-range {
  height: 22px;          /* make element tall enough to centre thumb */
  background: transparent;
}
.widget-range::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
}
.widget-range::-webkit-slider-thumb {
  margin-top: -8px;      /* (6px - 22px) / 2 — centres thumb on track */
}
.widget-range::-moz-range-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
}

/* Generic reusable popup (gi-popup) ──────────────────────────────────────── */
.gi-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.gi-popup.visible { opacity: 1; pointer-events: auto; }
.gi-popup[hidden] { display: none !important; }
.gi-popup-content {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px 22px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.gi-popup-icon { font-size: 2.4rem; margin-bottom: 10px; }
.gi-popup-content h3 { font-size: 1.08rem; margin-bottom: 12px; }
.gi-popup-content p { font-size: .86rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
.gi-popup-quote {
  margin: 0 0 14px;
  padding: 9px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-pale);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.gi-popup-quote cite {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .02em;
}
[data-theme="dark"] .gi-popup-quote {
  background: rgba(198,164,78,.08);
}
.gi-popup-note {
  font-size: .79rem !important;
  background: var(--accent-pale);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-muted) !important;
  font-style: normal !important;
  text-align: left;
  line-height: 1.5;
}

/* Invisible hand — simulation animation ─────────────────────────────────── */
.ih-result {
  transition: background .3s var(--ease);
}
.ih-result.ih-complete { animation: ih-celebrate .7s ease; }
@keyframes ih-celebrate {
  0%,100% { transform: scale(1); }
  30%      { transform: scale(1.04); }
  65%      { transform: scale(.97); }
}
.ih-greed:disabled { opacity: .7; cursor: default; }

/* 6. Economic Calculation — impossible box + blur reveal ─────────────────── */
.calc-impossible {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--accent-pale);
  border-radius: 12px;
  margin: 14px 0 10px;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.calc-impossible-icon { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; }
.calc-impossible p { margin: 0; }
.calc-impossible strong { color: var(--text); }

.calc-reveal-btn { display: block; margin: 0 auto 10px; }
.calc-reveal-text {
  filter: blur(5px);
  transition: filter .35s var(--ease);
  display: inline-block;
  pointer-events: none; /* blur is on text, click still lands on button */
}
.calc-reveal-btn:hover .calc-reveal-text,
.calc-reveal-btn:focus .calc-reveal-text { filter: blur(0); }

/* 7. Creative Destruction — employment graph ─────────────────────────────── */
.cd-graph-wrap {
  margin-top: 16px;
  background: var(--accent-pale);
  border-radius: 12px;
  padding: 12px 14px 10px;
}
.cd-graph-title { font-size: .76rem; color: var(--text-muted); margin-bottom: 8px; text-align: center; }
.cd-graph {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}
.cd-graph-source { font-size: .62rem; color: var(--text-muted); text-align: right; margin-top: 4px; }

/* 8. Coase — optimal solution box + new actor names ─────────────────────── */
.coase-optimal {
  padding: 12px 14px;
  background: #eafaf1;
  border: 1px solid #2c8a52;
  border-radius: 10px;
  font-size: .87rem;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--text);
}
[data-theme="dark"] .coase-optimal {
  background: #0e2618;
  border-color: #2c8a52;
}

/* 10. Monetarism — "why prices rise" intuition ──────────────────────────── */
.mon-intuition {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: 14px;
}
.mon-intuition-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}
.mon-int-col { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.mon-int-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mon-int-goods { font-size: .95rem; letter-spacing: .05em; }
.mon-int-money { font-size: .9rem; }
.mon-int-price { font-size: .88rem; color: var(--accent); }
.mon-int-price strong { font-size: 1.05rem; }
.mon-int-arrow { font-size: 1.2rem; color: var(--accent); line-height: 1.2; text-align: center; }
.mon-int-arrow small { display: block; font-size: .6rem; color: var(--text-muted); }
.mon-intuition-note {
  font-size: .78rem;
  color: var(--text-secondary);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  text-align: center;
}

/* 8. Coase — judge intro (plain text, no callout) ────────────────────────── */
.coase-judge-intro {
  font-size: .88rem;
  color: var(--text-secondary);
  margin: 14px 0 8px;
  line-height: 1.5;
}

/* 9. Public choice — popup deficit block ──────────────────────────────────── */
.pc-popup-deficit {
  background: var(--accent-pale);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: .84rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pc-deficit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pc-deficit-row span { color: var(--text-secondary); }
.pc-deficit-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-deficit-net {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  margin-top: 2px;
}
.pc-deficit-net span { font-weight: 600; color: var(--text); }
.pc-deficit-net strong { color: #c0392b; font-size: 1rem; }

/* 10. Monetarism redesign ────────────────────────────────────────────────── */
.mon-ctrl {
  margin-bottom: 14px;
}
.mon-ctrl-label {
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.mon-rate-big {
  color: var(--accent);
  font-size: 1.1rem;
}
.mon-mass-box {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: 14px;
}
.mon-mass-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.mon-mass-eq {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  text-align: center;
}
.mon-mass-eq-col { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.mon-mass-eq-money,
.mon-mass-eq-goods { font-size: .85rem; letter-spacing: .03em; word-break: break-all; line-height: 1.4; }
.mon-mass-eq-price { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.mon-mass-eq-lbl { font-size: .68rem; color: var(--text-muted); line-height: 1.3; }
.mon-mass-inf-lbl { font-weight: 600; transition: color .2s; }
.mon-mass-eq-sep {
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.mon-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.mon-dash-col {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .25s, background .25s;
}
.mon-dash-col.mon-power-bad {
  border-color: #c0392b;
  background: #fdf0ef;
}
[data-theme="dark"] .mon-dash-col.mon-power-bad {
  background: #2a0d0d;
  border-color: #c0392b;
}
.mon-dash-icon { font-size: 1.3rem; line-height: 1; }
.mon-dash-title {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}
.mon-dash-pct {
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.mon-dash-items {
  font-size: .74rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.mon-dash-lag {
  font-size: .7rem;
  color: var(--accent);
  margin-top: 2px;
  line-height: 1.4;
}
.mon-why-box {
  background: var(--accent-pale);
  border: 1px solid var(--accent-pale2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .85rem;
  line-height: 1.6;
  margin-bottom: 14px;
}
.mon-why-box strong { display: block; margin-bottom: 4px; font-size: .88rem; }
.mon-why-box p { margin: 0; color: var(--text-secondary); }

/* Mobile tweaks ────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ih-grid, .comp-grid, .coase-grid, .pc-scale, .cd-cols { grid-template-columns: 1fr; }
  .pi-cities, .mon-shop, .mon-wallet { grid-template-columns: 1fr; }
  .disp-grid-inner { grid-template-columns: repeat(4, 1fr); }
  .disp-grid { height: 108px; }
  .calc-option { grid-template-columns: 36px 1fr 60px; gap: 8px; padding: 10px; }
  .pi-stage { flex-direction: column; gap: 12px; }
  .so-market-wrap { grid-template-columns: 1fr; }
  .so-market-mid { flex-direction: row; padding: 4px 0; }
  .ih-causal { gap: 4px; padding: 8px; }
  .ih-causal-icon { font-size: 1.3rem; }
  .mon-intuition-row { grid-template-columns: 1fr; gap: 8px; }
  .calc-impossible { flex-direction: column; }
  .mon-dashboard { grid-template-columns: 1fr; }
  .mon-mass-eq { grid-template-columns: 1fr; }
  .mon-mass-eq-sep { display: none; }
}

/* Responsive */
@media (max-width: 900px) {
  /* Force 4 columns on tablet so pillars aren't too thin */
  .pantheon-colonnade { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
  .pillar-shaft { min-height: 180px; }
}
@media (max-width: 600px) {
  .pantheon-colonnade { grid-template-columns: repeat(4, 1fr) !important; gap: 4px; }
  .pillar-shaft { min-height: 120px; width: 80%; }
  .pillar-num { font-size: .9rem; }
  .pediment-gable { height: 44px; }
  .pediment-inscription { font-size: .48rem; bottom: 8px; }
  .detail-panel-header { padding: 18px 20px 14px; gap: 14px; }
  .detail-panel-body { padding: 20px; }
  .detail-panel-num { font-size: 2rem; min-width: 44px; }
  .detail-title { font-size: 1.1rem; }
}

/* ─── Responsive tightening (mobile-first cleanup) ──────────────────────────── */

/* Standard-table inside article content needs horizontal scroll on small screens.
   Excluded: tables already inside .viz-table (which provides its own scroll wrapper). */
.article-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-content .viz-table table { display: table; overflow-x: visible; }
@media (min-width: 700px) {
  .article-content table { display: table; overflow-x: visible; }
}

/* Header: hide logo subtitle on narrow screens to keep the header on a single line */
@media (max-width: 480px) {
  .logo-sub { display: none; }
  .logo-text { font-size: .9rem; }
  .logo { gap: 9px; }
  .logo-mark { width: 32px; height: 32px; }
  .header-actions { gap: 6px; }
  .lang-btn { padding: 4px 8px; font-size: .65rem; }
  .search-btn { width: 32px; height: 32px; }
}

/* Hero: tighten vertical padding on mobile */
@media (max-width: 768px) {
  .hero { padding: 80px 0 48px; min-height: 60vh; }
  .hero-sub { font-size: .98rem; margin-bottom: 28px; }
  .hero-actions { gap: 10px; width: 100%; }
  .hero-actions .btn { flex: 1; justify-content: center; min-width: 140px; }
}
@media (max-width: 380px) {
  .hero { padding: 72px 0 40px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
}

/* Article standalone: tighter on small screens */
@media (max-width: 480px) {
  .article-standalone { padding: 56px 16px 56px; }
  .article-standalone-header h1 { font-size: 1.5rem; line-height: 1.25; }
  .article-excerpt-hero { font-size: .96rem; }
  .article-content { font-size: .96rem; }
  .article-content h2 { font-size: 1.3rem; }
  .article-content h3 { font-size: 1.08rem; }
  .article-minimal-header { height: 52px; padding: 0 14px; }
  .article-minimal-header .logo-text { font-size: .82rem; }
}

/* viz-stat-row: smaller stats on tiny screens */
@media (max-width: 420px) {
  .article-content .viz-stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .article-content .viz-stat { padding: 14px 12px; }
  .article-content .viz-stat-value { font-size: 1.4rem; }
  .article-content .viz-stat-label { font-size: .78rem; }
  .article-content .viz-stat-context { font-size: .68rem; }
}

/* viz-bars: tighter on tiny screens */
@media (max-width: 380px) {
  .article-content .viz-bar-row {
    grid-template-columns: 80px 1fr 64px;
    gap: 6px;
  }
  .article-content .viz-bar-label { font-size: .68rem; }
  .article-content .viz-bar-value { font-size: .7rem; }
}

/* Factsheet CTA: stack on narrow screens */
@media (max-width: 540px) {
  .factsheet-cta {
    padding: 28px 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .factsheet-cta .btn { width: 100%; justify-content: center; }
}

/* Section header: stack title and link on narrow screens */
@media (max-width: 540px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
  }
  .section-header > div:first-child { max-width: 100%; }
}

/* Idea cards, author cards, politician cards: tighter padding on mobile */
@media (max-width: 480px) {
  .idea-card { padding: 22px 18px; }
  .author-card { padding: 18px 16px; }
  .politician-card { padding: 20px 18px; }
  .factsheet-card { padding: 20px 18px; }
}

/* Bio modal: ensure it never overflows on tiny screens */
@media (max-width: 380px) {
  .bio-modal { padding: 12px; }
  .bio-modal-content { max-height: calc(100vh - 24px); }
  .bio-modal-photo { height: 180px; }
  .bio-modal-body { padding: 18px 18px 22px; }
  .bio-modal-name { font-size: 1.25rem; }
  .bio-modal-bio { font-size: .9rem; }
}

/* Container padding refinement on very narrow screens */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
}

/* Footer: tighter on tiny screens */
@media (max-width: 480px) {
  .footer { padding: 32px 0 22px; }
  .footer-nav { gap: 12px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Prevent any wide content (long URLs, long words) from causing horizontal scroll */
.article-content p,
.article-content li,
.article-content blockquote {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Charts: ensure SVG doesn't break out of container on tiny screens */
@media (max-width: 480px) {
  .article-content .viz-chart svg { font-size: 9px; }
  .article-content .viz-chart-axis text { font-size: 8.5px; }
  .article-content .viz-chart-label { font-size: 9px; }
}

/* Footnotes are long URLs — make them break properly */
.footnotes li { overflow-wrap: anywhere; }

/* ─── Dark mode ──────────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --accent-pale:   #28200C;
  --accent-pale2:  #211A09;
  --card-bg:       #1E1C18;
  --bg:            #131210;
  --bg-alt:        #1A1916;
  --bg-warm:       #171512;
  --text:          #ECEBE6;
  --text-secondary:#9E9990;
  --text-muted:    #66625A;
  --border:        #2A2720;
  --border-light:  #232018;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.4);
  --shadow-md:     0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.6);
}

/* Hard-coded backgrounds that need dark overrides */
body.page-home .header,
body.page-heritage .header {
  position: fixed;
  top: 12px;
  left: 16px;
  right: 16px;
  width: auto;
  z-index: 200;
}
[data-theme="dark"] .header {
  background: rgba(15, 14, 12, 0.28);
  border-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .header.scrolled {
  background: rgba(15, 14, 12, 0.52);
  border-color: rgba(255, 255, 255, 0.09);
}
[data-theme="dark"] .article-minimal-header {
  background: rgba(19,18,16,.88);
}
@media (max-width: 768px) {
  [data-theme="dark"] .nav {  /* mobile flyout */
    background: rgba(15, 14, 12, 0.92);
    border-color: rgba(255, 255, 255, 0.09);
  }
}
[data-theme="dark"] .bio-modal-close {
  background: rgba(30,28,24,.92);
}

/* ─── Theme toggle button ─────────────────────────────────────────────────────── */
.theme-btn {
  width: 36px; height: 36px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all .2s var(--ease);
  flex-shrink: 0;
}
.theme-btn:hover { background: var(--accent-pale); color: var(--accent-dark); }
.theme-icon-sun  { display: block; }
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun  { display: none; }
[data-theme="dark"] .theme-icon-moon { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE RETRAITE — styles spécifiques
═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ret-hero { padding: 40px 0 36px; }
.ret-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}
.ret-hero-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 60ch;
  line-height: 1.65;
  margin-bottom: 32px;
}
.ret-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.ret-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ret-hero-stat-num {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.ret-hero-stat-lbl {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ── Page layout ── */
.ret-page { padding: 48px 0 64px; }
.ret-container { max-width: 780px; }

/* ── Section ── */
.ret-section {
  margin-bottom: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border-light);
}
.ret-section:last-of-type { border-bottom: none; }
.ret-section-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.ret-section-num {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  opacity: .35;
  line-height: 1;
  flex-shrink: 0;
}
.ret-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.65rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

/* ── Narrative text ── */
.ret-narrative {
  font-size: .97rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 16px;
  max-width: 68ch;
}
.ret-narrative strong { color: var(--text); font-weight: 700; }

/* ── Pull quote ── */
.ret-pull {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-left: 3px solid var(--accent);
  padding: 12px 20px;
  margin: 28px 0;
  background: var(--accent-pale);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ret-pull-quote {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1.1;
}
.ret-pull-sub {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ── Widget container ── */
.ret-widget {
  margin-top: 28px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
  padding: 24px;
}
.ret-widget-prompt {
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.55;
}

/* ═══ Widget 1 — Flow ═══ */
.flow-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.flow-btn {
  padding: 9px 18px;
  border-radius: 24px;
  font-size: .85rem;
  font-weight: 600;
  border: 2px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
}
.flow-btn:hover { border-color: var(--accent); color: var(--accent); }
.flow-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="dark"] .flow-btn.active { color: #1A1A18; }

.flow-scene {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 18px;
  min-height: 120px;
}
.flow-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}
.flow-left  { border-radius: var(--radius) 0 0 var(--radius); }
.flow-right { border-radius: 0 var(--radius) var(--radius) 0; }
.flow-persons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  transition: opacity .18s, transform .18s;
}
.flow-person-icon { font-size: 1.5rem; }
.flow-side-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.flow-side-amount { font-size: .9rem; font-weight: 700; }
.flow-side-amount.green { color: #2d7a30; }
.flow-side-amount.red   { color: #c0392b; }
.flow-freq { font-size: .7rem; font-weight: 400; color: var(--text-muted); margin-left: 1px; }

.flow-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 8px;
  min-width: 110px;
}
.flow-pipe-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.flow-pipe-label { font-size: .65rem; font-weight: 700; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }
.flow-pipe {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--border-light);
  padding: 6px 12px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-width: 90px;
  justify-content: center;
}
.flow-coin {
  font-size: 1rem;
  animation: flow-move 1.8s linear infinite;
  display: inline-block;
}
@keyframes flow-move {
  0%   { transform: translateX(-18px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(18px); opacity: 0; }
}
.flow-reserve-badge {
  text-align: center;
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 6px 12px;
}
.flow-reserve-label { font-size: .65rem; color: var(--text-muted); display: block; }
.flow-reserve-val { font-size: 1.1rem; font-weight: 700; color: #c0392b; }

.flow-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #eafaeb;
  border-radius: var(--radius);
  font-size: .88rem;
  font-weight: 500;
  transition: background .3s, color .3s;
}
.flow-balance-icon { font-size: 1rem; }
.flow-balance-deficit { background: #fdecea; }
[data-theme="dark"] .flow-balance         { background: rgba(45,122,48,.15); }
[data-theme="dark"] .flow-balance-deficit { background: rgba(192,57,43,.15); }

/* ═══ Widget 2 — Demo ═══ */
.demo-year-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
#demo-year-val {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text);
}
.demo-year-tag {
  font-size: .75rem;
  color: var(--text-muted);
  font-style: italic;
}
.demo-ratio-display {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}
.demo-ratio-big {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  transition: color .3s;
}
.demo-ratio-ok       { color: #2d7a30; }
.demo-ratio-warn     { color: #d4860a; }
.demo-ratio-critical { color: #c0392b; }
.demo-ratio-label    { font-size: .9rem; color: var(--text-secondary); font-weight: 500; }

.demo-visual {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.demo-stack-group { display: flex; flex-direction: column; gap: 6px; }
.demo-stack-persons { font-size: 1.5rem; line-height: 1.6; word-break: break-all; max-width: 200px; }
.demo-stack-lbl { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.demo-vs { font-size: 1.2rem; color: var(--text-muted); align-self: center; }

.demo-range { width: 100%; margin-bottom: 4px; }
.demo-timeline {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.demo-consequence {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: .87rem;
  line-height: 1.5;
  font-weight: 500;
  transition: background .3s;
}
.demo-ok       { background: #eafaeb; color: #1d5c20; }
.demo-warn     { background: #fff8e6; color: #7a4f00; }
.demo-critical { background: #fdecea; color: #7a1a1a; }
[data-theme="dark"] .demo-ok       { background: rgba(45,122,48,.15); color: #7ecb82; }
[data-theme="dark"] .demo-warn     { background: rgba(212,134,10,.15); color: #f0be68; }
[data-theme="dark"] .demo-critical { background: rgba(192,57,43,.15); color: #f08070; }

/* ═══ Widget 3 — Snowball ═══ */
.snow-ctrl { margin-bottom: 16px; }
.snow-ctrl-label { font-size: .9rem; color: var(--text-secondary); margin-bottom: 8px; display: block; }
.snow-ctrl-label strong { color: var(--accent); font-size: 1rem; }
.snow-ctrl-minmax { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-top: 2px; }

.snow-chart-wrap {
  width: 100%;
  margin-bottom: 12px;
  border-radius: var(--radius);
  overflow: hidden;
}
#snow-canvas { display: block; width: 100%; }

.snow-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.snow-legend-item { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--text-secondary); }
.snow-legend-dot {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.snow-legend-dot.grey   { background: #b0a98a; border-top: 1px dashed #b0a98a; }
.snow-legend-dot.accent { background: var(--accent); }

.snow-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.snow-stat {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.snow-stat-accent { background: var(--accent-pale); }
.snow-stat-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.snow-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--text); font-family: var(--font-serif); }
.snow-stat-accent .snow-stat-val { color: var(--accent-dark); }
.snow-gain { color: #2d7a30 !important; }
[data-theme="dark"] .snow-gain { color: #7ecb82 !important; }

@media (max-width: 480px) {
  .snow-stats { grid-template-columns: 1fr 1fr; }
  .snow-stats .snow-stat:last-child { grid-column: span 2; }
}

/* ═══ Widget 4 — Simulateur ═══ */
.sim-controls { margin-bottom: 24px; }
.sim-ctrl-group { display: flex; flex-direction: column; gap: 20px; margin-bottom: 16px; }
.sim-ctrl { display: flex; flex-direction: column; gap: 6px; }
.sim-ctrl-label { font-size: .9rem; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: baseline; }
.sim-ctrl-output { font-weight: 700; color: var(--accent); font-size: 1rem; }
.sim-ctrl-minmax { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); }

.sim-years-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--accent-pale);
  padding: 8px 16px;
  border-radius: 24px;
  font-size: .87rem;
  color: var(--text-secondary);
}
.sim-years-badge span:first-child {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.sim-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.sim-result {
  border: 1.5px solid var(--border);
  border-radius: calc(var(--radius) * 1.5);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .3s, box-shadow .3s;
}
.sim-winner { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-pale); }
.sim-result-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.sim-result-tag {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--bg-alt);
  color: var(--text-muted);
}
.accent-tag { background: var(--accent-pale); color: var(--accent-dark); }
.sim-result-subtitle { font-size: .73rem; color: var(--text-muted); }
.sim-pension-big { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; }
.sim-pension-big.accent { color: var(--accent-dark); }
.sim-pension-unit { font-size: .78rem; color: var(--text-muted); margin-bottom: 12px; }
.sim-detail { list-style: none; padding: 0; margin: 0; font-size: .8rem; color: var(--text-secondary); display: flex; flex-direction: column; gap: 5px; }
.sim-detail li strong { color: var(--text); }

.sim-disclaimer {
  font-size: .74rem;
  color: var(--text-muted);
  line-height: 1.5;
  border-top: 1px solid var(--border-light);
  padding-top: 12px;
  margin-top: 4px;
}

@media (max-width: 520px) {
  .sim-results { grid-template-columns: 1fr; }
}

/* ═══ Widget 5 — Flip cards ═══ */
.flip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.flip-card {
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}
.flip-card-inner {
  display: grid;
  grid-template-areas: "card";
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front,
.flip-card-back {
  grid-area: card;
  border-radius: calc(var(--radius) * 1.5);
  padding: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flip-card-front {
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  justify-content: space-between;
}
.flip-card-back {
  background: var(--accent-pale);
  border: 1.5px solid var(--accent);
  transform: rotateY(180deg);
  justify-content: flex-start;
}
.flip-card-num { font-size: .65rem; font-weight: 700; color: var(--text-muted); letter-spacing: .08em; }
.flip-card-icon { font-size: 1.6rem; }
.flip-card-objection { font-size: .85rem; font-weight: 600; color: var(--text); line-height: 1.4; margin: 0; flex: 1; }
.flip-card-hint { font-size: .7rem; color: var(--text-muted); align-self: flex-end; }
.flip-card-response { font-size: .8rem; color: var(--text); line-height: 1.55; margin: 0; }
.flip-card:focus-visible .flip-card-inner { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: calc(var(--radius) * 1.5); }

@media (max-width: 540px) {
  .flip-grid { grid-template-columns: 1fr; }
}

/* ═══ Conclusion ═══ */
.ret-conclusion { border-bottom: none !important; padding-top: 16px; }
.ret-conclusion-inner {
  background: var(--accent-pale);
  border-radius: calc(var(--radius) * 2);
  padding: 36px 40px;
  border: 1px solid var(--accent-pale2);
}
.ret-conclusion-title {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 14px;
}
.ret-conclusion-text { font-size: .95rem; line-height: 1.75; color: var(--text-secondary); max-width: 62ch; }

@media (max-width: 480px) {
  .ret-conclusion-inner { padding: 24px 20px; }
  .flow-scene { flex-direction: column; }
  .flow-left, .flow-right { border-radius: var(--radius) !important; }
  .flow-middle { flex-direction: row; min-width: unset; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE DETTE — styles spécifiques
═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.dette-hero .ret-hero-stat-num.dette-red { color: #c0392b; }
.dette-red { color: #c0392b; }
.dette-red-text { color: #c0392b !important; }
[data-theme="dark"] .dette-hero .ret-hero-stat-num.dette-red { color: #f08070; }
[data-theme="dark"] .dette-red-text { color: #f08070 !important; }

/* ── Widget 1 : Horloge ── */
.clock-display {
  text-align: center;
  padding: 28px 20px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.clock-counter {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  color: #c0392b;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
[data-theme="dark"] .clock-counter { color: #f08070; }
.clock-sub { font-size: .78rem; color: var(--text-muted); }

.clock-comparisons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.clock-cmp {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.clock-cmp-icon { font-size: 1.4rem; }
.clock-cmp-val { font-size: 1rem; font-weight: 700; color: var(--text); font-family: var(--font-serif); }
.clock-cmp-lbl { font-size: .72rem; color: var(--text-muted); }

@media (max-width: 480px) {
  .clock-comparisons { grid-template-columns: 1fr; }
}

/* ── Widget 2 : Timeline ── */
.tl-chart-wrap { width: 100%; margin-bottom: 12px; cursor: pointer; }
#tl-canvas { display: block; width: 100%; }

.tl-event-box {
  background: var(--accent-pale);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tl-event-year { font-size: .78rem; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tl-event-text { font-size: .87rem; color: var(--text); line-height: 1.55; }

.tl-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tl-legend-item { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-secondary); }
.tl-legend-line { display: inline-block; width: 22px; height: 2.5px; border-radius: 2px; background: var(--accent); }
.tl-legend-line.dashed { background: none; border-top: 2px dashed #c0392b; }
.tl-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--accent); flex-shrink: 0; }

/* ── Widget 3 : Trajectoire ── */
.traj-ctrl { margin-bottom: 16px; }
.traj-ctrl-label { font-size: .9rem; color: var(--text-secondary); display: block; margin-bottom: 8px; line-height: 1.5; }
.traj-ctrl-label strong { color: var(--accent); font-size: 1rem; }
.traj-effort-equiv { font-size: .8rem; color: var(--text-muted); font-weight: 400; }
.traj-ctrl-minmax { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-muted); margin-top: 2px; }

.traj-chart-wrap { width: 100%; margin-bottom: 16px; }
#traj-canvas { display: block; width: 100%; }

.traj-verdict {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: .87rem;
  line-height: 1.55;
  font-weight: 500;
}
.traj-verdict-warn { background: #fdecea; color: #7a1a1a; }
.traj-verdict-ok   { background: #fff8e6; color: #7a4f00; }
.traj-verdict-good { background: #eafaeb; color: #1d5c20; }
[data-theme="dark"] .traj-verdict-warn { background: rgba(192,57,43,.15); color: #f08070; }
[data-theme="dark"] .traj-verdict-ok   { background: rgba(212,134,10,.15); color: #f0be68; }
[data-theme="dark"] .traj-verdict-good { background: rgba(45,122,48,.15);  color: #7ecb82; }

/* ── Widget 4 : Ta part ── */
.share-ctrl { margin-bottom: 24px; }
.share-ctrl-label { font-size: .9rem; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }

.share-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.share-card {
  background: var(--bg-alt);
  border-radius: calc(var(--radius) * 1.5);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1.5px solid var(--border);
}
.share-card-accent { background: var(--accent-pale); border-color: var(--accent); }
.share-card-icon  { font-size: 1.4rem; }
.share-card-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; }
.share-card-val   { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--text); line-height: 1; }
.share-card-accent .share-card-val { color: var(--accent-dark); }
.share-card-sub   { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }
.share-gain { color: #c0392b !important; }
[data-theme="dark"] .share-gain { color: #f08070 !important; }

.share-interest-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: #fdecea;
  border-radius: var(--radius);
  font-size: .87rem;
}
[data-theme="dark"] .share-interest-box { background: rgba(192,57,43,.12); }
.share-interest-label { color: var(--text-secondary); }
.share-interest-val   { font-weight: 700; color: #c0392b; font-family: var(--font-serif); font-size: 1rem; }
[data-theme="dark"] .share-interest-val { color: #f08070; }
.share-interest-sub { font-size: .78rem; color: var(--text-muted); }

@media (max-width: 520px) {
  .share-cards { grid-template-columns: 1fr; }
}

/* ── Conclusion dette ── */
.dette-conclusion { background: linear-gradient(135deg, var(--accent-pale) 0%, var(--accent-pale2) 100%); }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE LAFFER — styles spécifiques
═══════════════════════════════════════════════════════════════════════════ */

/* ── Widget 1 : Courbe ── */
.laffer-chart-wrap { width: 100%; margin-bottom: 20px; }
#laffer-canvas { display: block; width: 100%; }

.laffer-ctrl { margin-bottom: 20px; }
.laffer-ctrl-label { font-size: .9rem; color: var(--text-secondary); display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.laffer-ctrl-label strong { color: var(--accent); font-size: 1rem; }

.laffer-readout {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 16px 18px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.laffer-readout-col { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.laffer-readout-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.laffer-readout-val { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: var(--accent); line-height: 1; }
.laffer-readout-sub { font-size: .78rem; color: var(--text-muted); }
.laffer-readout-sep { font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0; }
.laffer-zone-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: .82rem; font-weight: 600; }
.laffer-zone-ok   { background: #eafaeb; color: #1d5c20; }
.laffer-zone-peak { background: var(--accent-pale); color: var(--accent-dark); }
.laffer-zone-bad  { background: #fdecea; color: #7a1a1a; }
[data-theme="dark"] .laffer-zone-ok   { background: rgba(45,122,48,.15); color: #7ecb82; }
[data-theme="dark"] .laffer-zone-peak { background: rgba(198,164,78,.15); color: var(--accent); }
[data-theme="dark"] .laffer-zone-bad  { background: rgba(192,57,43,.15); color: #f08070; }
.laffer-behaviour { font-size: .83rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Widget 2 : Mécanismes ── */
.react-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.react-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: calc(var(--radius) * 1.5);
  border: 1.5px solid var(--border);
  background: var(--bg-alt);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.react-card:hover { border-color: var(--accent); }
.react-card.active { background: var(--accent-pale); border-color: var(--accent); }
.react-icon  { font-size: 1.4rem; }
.react-label { font-size: .75rem; font-weight: 600; color: var(--text-secondary); text-align: center; line-height: 1.3; }

.react-detail {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 18px;
  animation: fade-in .2s ease;
}
.react-detail-title { font-weight: 700; color: var(--text); margin-bottom: 8px; font-size: .95rem; }
.react-detail-text  { font-size: .87rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 10px; }
.react-detail-example { font-size: .8rem; color: var(--text-muted); background: var(--card-bg); border-radius: var(--radius); padding: 8px 12px; border-left: 2px solid var(--accent); }

@media (max-width: 520px) {
  .react-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Widget 3 : Cas historiques ── */
.cases-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cases-tab {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.cases-tab:hover  { border-color: var(--accent); color: var(--accent); }
.cases-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="dark"] .cases-tab.active { color: #1A1A18; }

.cases-detail { background: var(--bg-alt); border-radius: var(--radius); padding: 20px; animation: fade-in .2s ease; margin-bottom: 24px; }
.case-header  { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.case-title   { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; }
.case-arrow   { font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.case-arrow.down { background: #eafaeb; color: #1d5c20; }
.case-arrow.up   { background: #fdecea; color: #7a1a1a; }
[data-theme="dark"] .case-arrow.down { background: rgba(45,122,48,.2); color: #7ecb82; }
[data-theme="dark"] .case-arrow.up   { background: rgba(192,57,43,.2); color: #f08070; }
.case-text    { font-size: .87rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 10px; }
.case-verdict { font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: var(--radius); margin-bottom: 8px; }
.case-verdict-pos { background: #eafaeb; color: #1d5c20; }
.case-verdict-neg { background: #fdecea; color: #7a1a1a; }
[data-theme="dark"] .case-verdict-pos { background: rgba(45,122,48,.15); color: #7ecb82; }
[data-theme="dark"] .case-verdict-neg { background: rgba(192,57,43,.15); color: #f08070; }
.case-nuance  { font-size: .78rem; color: var(--text-muted); }

/* ── Widget 4 : Calculateur ── */
.calc-ctrl-row { margin-bottom: 20px; }

.calc-result-wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.calc-donut-wrap { position: relative; flex-shrink: 0; }
#calc-donut { display: block; }
.calc-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.calc-donut-pct { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: #2d7a30; line-height: 1; }
[data-theme="dark"] .calc-donut-pct { color: #7ecb82; }
.calc-donut-lbl { font-size: .72rem; color: var(--text-muted); }

.calc-breakdown { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.calc-row { display: flex; justify-content: space-between; align-items: center; font-size: .83rem; color: var(--text-secondary); padding: 5px 0; border-bottom: 1px solid var(--border-light); gap: 8px; }
.calc-row strong { font-weight: 700; color: var(--text); flex-shrink: 0; }
.calc-row-taken strong { color: #c0392b; }
[data-theme="dark"] .calc-row-taken strong { color: #f08070; }
.calc-total { font-weight: 600; color: var(--text); }
.calc-highlight { background: var(--accent-pale); border-radius: var(--radius); padding: 6px 10px; font-weight: 700; border-bottom: none; }
.calc-highlight strong { color: var(--accent-dark); font-size: 1.05rem; }

.calc-laffer-pos { margin-top: 4px; }
.calc-laffer-pos-label { font-size: .87rem; color: var(--text); line-height: 1.5; margin-bottom: 10px; font-weight: 500; }
.calc-laffer-bar-wrap { position: relative; }
.calc-laffer-bar { height: 12px; background: var(--border); border-radius: 6px; overflow: visible; position: relative; }
.calc-laffer-fill { height: 100%; border-radius: 6px; transition: width .4s ease; }
.calc-laffer-peak {
  position: absolute;
  left: 65%;
  top: -22px;
  transform: translateX(-50%);
  font-size: .7rem;
  color: var(--accent-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
.calc-laffer-peak-lbl { font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   TRAPPE PAGE — inactivity traps widgets
   ═══════════════════════════════════════════════════════════════ */

/* ── Widget 1 : La courbe ─────────────────────────────────────── */
.trap-chart-wrap {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
  margin-bottom: 1rem;
}
.trap-chart-wrap canvas { display: block; width: 100%; }

.trap-cursor-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}
.trap-ctrl-label {
  font-size: .9rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.trap-ctrl-label strong { color: var(--accent); font-size: 1rem; }

.trap-readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: .75rem;
}
.trap-ro-col {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) - 2px);
  padding: .75rem 1rem;
  text-align: center;
}
.trap-ro-label {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .3rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.trap-ro-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono, monospace);
}
.trap-marg-high .trap-ro-val,
.trap-ro-val.trap-marg-high { color: #e07c2b; }
.trap-marg-neg  .trap-ro-val,
.trap-ro-val.trap-marg-neg  { color: var(--danger, #c0392b); }

@media (max-width: 600px) {
  .trap-readout { grid-template-columns: 1fr; }
}

/* ── Widget 2 : Camille ───────────────────────────────────────── */
.cam-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.cam-step-btn {
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-secondary);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.cam-step-btn:hover { border-color: var(--accent); color: var(--accent); }
.cam-step-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.cam-step-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.cam-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 640px) { .cam-display { grid-template-columns: 1fr; } }

.cam-breakdown {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.cam-bd-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.cam-bd-rows { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }
.cam-bd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  padding: .3rem .5rem;
  border-radius: 4px;
}
.cam-bd-row.cam-bd-changed { background: var(--accent-pale, #fdf5e0); }
.cam-bd-row.cam-bd-zero    { opacity: .4; }
.cam-bd-lbl  { color: var(--text-secondary); }
.cam-bd-salary  { color: var(--accent-dark); font-weight: 700; }
.cam-bd-benefit { color: #4E90C6; font-weight: 600; }
.cam-bd-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: .6rem;
  border-top: 2px solid var(--border);
  font-size: .92rem;
  color: var(--text);
}
.cam-bd-total strong { font-size: 1.1rem; color: var(--accent); }
.cam-bd-hours {
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--text-muted);
  text-align: right;
}

.cam-gain-box {
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
  min-height: 130px;
  border: 2px solid transparent;
}
.cam-gain-neutral  { background: var(--bg-alt); border-color: var(--border); }
.cam-gain-positive { background: #f0faf3; border-color: #4EC67A; }
.cam-gain-negative { background: #fdf0f0; border-color: #C64E4E; }
[data-theme="dark"] .cam-gain-positive { background: rgba(78,198,122,.12); }
[data-theme="dark"] .cam-gain-negative { background: rgba(198,78,78,.12);  }

.cam-gain-base { font-size: .9rem; color: var(--text-secondary); }
.cam-gain-delta {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.cam-gain-arrow { font-size: 1.3rem; }
.cam-gain-num   { font-size: 1.8rem; font-weight: 800; color: var(--accent-dark); font-family: var(--font-mono, monospace); }
.cam-gain-positive .cam-gain-num   { color: #27863e; }
.cam-gain-positive .cam-gain-arrow { color: #27863e; }
.cam-gain-detail  { font-size: .85rem; color: var(--text-secondary); }
.cam-gain-hourly  { font-size: .82rem; color: var(--text-muted); background: rgba(0,0,0,.04); padding: .4rem .6rem; border-radius: 4px; }
.cam-gain-hourly strong { color: var(--accent); }
.cam-gain-ref { opacity: .75; }

.cam-delta-rows { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.cam-delta-row  { display: flex; justify-content: space-between; font-size: .82rem; color: var(--text-secondary); }
.cam-delta-lbl  { flex: 1; }
.cam-delta-amt  { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 60px; text-align: right; }
.cam-delta-pos  { color: #27863e; }
.cam-delta-neg  { color: #c0392b; }
[data-theme="dark"] .cam-delta-pos { color: #7ecb82; }
[data-theme="dark"] .cam-delta-neg { color: #e07070; }
.cam-delta-total {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  font-weight: 700;
  border-top: 1px solid var(--border);
  padding-top: .4rem;
  margin-bottom: .4rem;
  color: var(--text);
}

/* Comparison bar */
.cam-compare { margin-bottom: .75rem; }
.cam-compare-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .8rem;
  margin-bottom: .2rem;
}
.cam-compare-lbl { color: var(--text-secondary); }
.cam-compare-val { font-weight: 700; font-size: .9rem; }
.cam-compare-bar-wrap {
  height: 14px;
  background: var(--bg-alt);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: .5rem;
  border: 1px solid var(--border-light);
}
.cam-compare-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}
.cam-compare-ref  { width: 100%; background: rgba(39,134,62,.25); }
.cam-compare-real { background: #27863e; }
[data-theme="dark"] .cam-compare-ref  { background: rgba(39,134,62,.18); }
[data-theme="dark"] .cam-compare-real { background: #4ec67a; }
.cam-compare-caption {
  font-size: .74rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: .5rem;
}

/* Hourly rate comparison chart */
.cam-hourly { margin: .75rem 0 .5rem; }
.cam-hourly-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .6rem;
}
.cam-hourly-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .4rem;
}
.cam-hourly-lbl {
  font-size: .76rem;
  color: var(--text-secondary);
  width: 130px;
  flex-shrink: 0;
}
.cam-hourly-bar-wrap {
  flex: 1;
  height: 28px;
  background: var(--bg-alt);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.cam-hourly-bar {
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: width .35s ease;
  min-width: 48px;
}
.cam-hourly-smic { background: #7f8c8d; }
.cam-hourly-real  { background: #c0392b; }
[data-theme="dark"] .cam-hourly-smic { background: #95a5a6; }
[data-theme="dark"] .cam-hourly-real  { background: #e07070; }

/* Details toggle */
.cam-delta-details { margin-bottom: .5rem; }
.cam-delta-details summary {
  font-size: .78rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: .25rem 0;
  list-style: none;
  user-select: none;
}
.cam-delta-details summary::-webkit-details-marker { display: none; }
.cam-delta-details summary::before { content: '▶ '; font-size: .65rem; }
.cam-delta-details[open] summary::before { content: '▼ '; }

.cam-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .5rem;
}
.cam-nav-btn {
  padding: .4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--text-secondary);
  font-size: .85rem;
  cursor: pointer;
  transition: all .2s ease;
}
.cam-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cam-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.cam-nav-step { font-size: .85rem; color: var(--text-muted); min-width: 3rem; text-align: center; }

/* ── Widget 3 : Falaises ─────────────────────────────────────── */
.cliff-chart-wrap {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
  margin-bottom: 1rem;
}
.cliff-chart-wrap canvas { display: block; width: 100%; }

.cliff-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}

.cliff-detail {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.cliff-alert {
  background: rgba(198,78,78,.1);
  border: 1px solid rgba(198,78,78,.35);
  border-radius: 6px;
  padding: .6rem .85rem;
  font-size: .85rem;
  color: #c0392b;
  margin-bottom: .75rem;
}
[data-theme="dark"] .cliff-alert { color: #e07c7c; }
.cliff-rows { display: flex; flex-direction: column; gap: .35rem; }
.cliff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  padding: .25rem 0;
  border-bottom: 1px solid var(--border-light);
}
.cliff-row:last-child { border-bottom: none; }
.cliff-row span { color: var(--text-secondary); }
.cliff-row strong { font-weight: 700; color: var(--accent-dark); }
.cliff-zero  { color: var(--text-muted) !important; font-weight: 400 !important; }
.cliff-health { color: #C64E4E !important; }
.cliff-total {
  margin-top: .25rem;
  padding-top: .5rem;
  border-top: 2px solid var(--border) !important;
  border-bottom: none !important;
}
.cliff-total span  { font-weight: 600; color: var(--text); }
.cliff-total strong { font-size: 1.05rem; color: var(--accent); }

/* ── Widget 4 : Paradoxe ─────────────────────────────────────── */
.paradox-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  .paradox-grid {
    grid-template-columns: 1fr;
  }
  .paradox-vs { display: none; }
}

.paradox-profile {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.paradox-profile-header {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.paradox-avatar { font-size: 2rem; flex-shrink: 0; }
.paradox-name {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .15rem;
}
.paradox-income-val {
  font-size: .8rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.paradox-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 4rem;
}
.paradox-vs-inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .85rem;
  color: var(--text-muted);
}

.paradox-rate-wrap { display: flex; flex-direction: column; gap: .35rem; }
.paradox-rate-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.paradox-rate-big {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--text);
  font-family: var(--font-mono, monospace);
  line-height: 1.1;
}
.paradox-rate-big.rate-warn   { color: #e07c2b; }
.paradox-rate-big.rate-danger { color: #c0392b; }
[data-theme="dark"] .paradox-rate-big.rate-danger { color: #e07c7c; }

.paradox-rate-bar-wrap { margin: .15rem 0; }
.paradox-rate-bar {
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: hidden;
}
.paradox-rate-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .4s ease;
}
.fill-red    { background: #c0392b; }
.fill-orange { background: #e07c2b; }
[data-theme="dark"] .fill-red    { background: #e07c7c; }
[data-theme="dark"] .fill-orange { background: #e09c5c; }

.paradox-rate-sub { font-size: .78rem; color: var(--text-secondary); line-height: 1.45; }
.paradox-rate-sub strong { color: var(--text); }
.paradox-neg { color: #c0392b; }

.paradox-slider { margin: 0; }

.paradox-verdict {
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.55;
  display: none;
}
.paradox-verdict:not(:empty) { display: block; }
.verdict-alert   { background: rgba(192,57,43,.08);  border: 1px solid rgba(192,57,43,.3); color: var(--text); }
.verdict-ok      { background: rgba(78,198,122,.08); border: 1px solid rgba(78,198,122,.35); color: var(--text); }
.verdict-neutral { background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-secondary); }
[data-theme="dark"] .verdict-alert { background: rgba(192,57,43,.16); }

/* ═══════════════════════════════════════════════════════════════
   ILLUSION FISCALE — fiscal illusion widgets
   ═══════════════════════════════════════════════════════════════ */

/* ── Widget 1 : Coin fiscal ──────────────────────────────────── */
.coin-chart-wrap {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}
.coin-chart-wrap canvas { display: block; width: 100%; }

.coin-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}

.coin-readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: .75rem;
}
@media (max-width: 640px) { .coin-readout { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .coin-readout { grid-template-columns: 1fr; } }

.coin-ro-col {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) - 2px);
  padding: .65rem .9rem;
  text-align: center;
}
.coin-ro-col.coin-ro-invisible {
  border-color: #C0392B;
  background: rgba(192,57,43,.05);
}
[data-theme="dark"] .coin-ro-col.coin-ro-invisible { background: rgba(192,57,43,.1); }

.coin-ro-col.rate-high { border-color: var(--accent); }

.coin-ro-label {
  font-size: .75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .3rem;
  line-height: 1.3;
}
.coin-ro-val {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text);
}
.coin-ro-net  { color: #27863e; }
.coin-ro-ir   { color: #7B4FC2; }
.coin-ro-ecs  { color: #C6A44E; }
.coin-ro-pcs  { color: #C0392B; }
.coin-ro-rate { color: var(--accent-dark); font-size: 1.3rem; }
.coin-ro-rate-col.rate-high .coin-ro-rate { color: #C0392B; }

/* ── Widget 2 : TVA invisible ────────────────────────────────── */
.tva-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1rem;
}
@media (max-width: 640px) { .tva-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .tva-grid { grid-template-columns: 1fr; } }

.tva-item {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: all .2s ease;
  min-height: 110px;
  display: flex;
  align-items: stretch;
}
.tva-item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.tva-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tva-item.tva-revealed {
  border-color: var(--border);
  cursor: default;
  transform: none;
  background: var(--bg-alt);
}
.tva-item.tva-revealed:hover { transform: none; box-shadow: none; border-color: var(--border); }

.tva-item-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  text-align: center;
  width: 100%;
}
.tva-emoji      { font-size: 1.8rem; }
.tva-name       { font-size: .85rem; font-weight: 600; color: var(--text); }
.tva-price-ttc  { font-size: 1.1rem; font-weight: 800; color: var(--accent); font-family: var(--font-mono, monospace); }
.tva-hint       { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }

.tva-item-back  { width: 100%; display: flex; flex-direction: column; gap: .35rem; }
.tva-emoji-sm   { font-size: 1rem; display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; }
.tva-name-sm    { font-size: .82rem; font-weight: 600; color: var(--text); }

.tva-breakdown  { display: flex; flex-direction: column; gap: .25rem; }
.tva-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  padding: .2rem 0;
  border-bottom: 1px solid var(--border-light);
}
.tva-row:last-child { border-bottom: none; }
.tva-row span { color: var(--text-secondary); }
.tva-row strong { font-weight: 600; }
.tva-tax-amt { color: #C0392B !important; }
.tva-tax-pct { color: #C0392B !important; font-weight: 800 !important; }
[data-theme="dark"] .tva-tax-amt, [data-theme="dark"] .tva-tax-pct { color: #e07c7c !important; }
.tva-row-total { border-top: 1.5px solid var(--border) !important; border-bottom: none !important; margin-top: .1rem; }

.tva-summary {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-top: .25rem;
}
.tva-summ-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem;
  padding: .25rem 0;
  border-bottom: 1px solid var(--border-light);
}
.tva-summ-row strong { font-weight: 700; }
.tva-summ-tax strong { color: #C0392B; }
[data-theme="dark"] .tva-summ-tax strong { color: #e07c7c; }

.tva-summ-pct {
  font-size: .9rem;
  color: var(--text-secondary);
  padding-top: .6rem;
  line-height: 1.5;
}
.tva-big-pct {
  font-size: 1.5rem;
  font-weight: 800;
  color: #C0392B;
  font-family: var(--font-mono, monospace);
  margin: 0 .2rem;
}
[data-theme="dark"] .tva-big-pct { color: #e07c7c; }
.tva-nudge {
  display: block;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .25rem;
}

/* ── Widget 3 : Reçu fiscal ──────────────────────────────────── */
.rcpt-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}
.rcpt-total-box { margin-bottom: 1rem; }
.rcpt-total-inner {
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  text-align: center;
}
.rcpt-total-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.rcpt-total-val {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-dark);
  font-family: var(--font-mono, monospace);
}
.rcpt-total-sub { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }

.rcpt-bars { display: flex; flex-direction: column; gap: .7rem; }
.rcpt-bar-row { display: flex; flex-direction: column; gap: .25rem; }
.rcpt-bar-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
}
.rcpt-bar-emoji  { font-size: 1rem; flex-shrink: 0; }
.rcpt-bar-name   { color: var(--text); font-weight: 500; flex: 1; }
.rcpt-bar-pct    { font-size: .78rem; color: var(--text-muted); margin-left: auto; }

.rcpt-bar-track {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--border);
  border-radius: 4px;
  height: 18px;
  position: relative;
  overflow: visible;
}
.rcpt-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s ease;
  min-width: 4px;
  flex-shrink: 0;
}
.rcpt-bar-amount {
  font-size: .78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-left: .25rem;
}

/* ── Widget 4 : Test perception ──────────────────────────────── */
.test-inputs {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}
.test-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.test-reveal-btn {
  align-self: flex-start;
  padding: .65rem 1.5rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.test-reveal-btn:hover { background: var(--accent-dark); transform: translateY(-1px); }

.test-result { display: none; margin-top: 1rem; }

.test-bars {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1rem;
}
.test-bar-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.test-bar-lbl {
  width: 180px;
  flex-shrink: 0;
  font-size: .83rem;
  color: var(--text-secondary);
}
@media (max-width: 500px) { .test-bar-lbl { width: 110px; font-size: .75rem; } }
.test-bar-track {
  flex: 1;
  background: var(--border);
  border-radius: 5px;
  height: 28px;
  overflow: hidden;
}
.test-bar-fill {
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: .5rem;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  transition: width .6s cubic-bezier(.25,.8,.25,1);
  min-width: 36px;
}
.test-bar-estimate { background: #7B9FC2; }
.test-bar-real     { background: #C0392B; }
[data-theme="dark"] .test-bar-real { background: #e07c7c; }

.test-verdict {
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  line-height: 1.55;
  margin-bottom: .85rem;
}
.verdict-under  { background: rgba(192,57,43,.08);  border: 1px solid rgba(192,57,43,.3); }
.verdict-over   { background: rgba(198,164,78,.08); border: 1px solid rgba(198,164,78,.3); }
.verdict-ok     { background: rgba(78,198,122,.08); border: 1px solid rgba(78,198,122,.35); }
[data-theme="dark"] .verdict-under { background: rgba(192,57,43,.15); }

.test-breakdown {
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
}
.test-bd-title {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .6rem;
}
.test-bd-rows { display: flex; flex-direction: column; gap: .3rem; }
.test-bd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  padding: .2rem 0;
  border-bottom: 1px solid var(--border-light);
}
.test-bd-row:last-child { border-bottom: none; }
.test-bd-row span { color: var(--text-secondary); }
.test-bd-row strong { font-weight: 700; color: var(--accent-dark); font-family: var(--font-mono, monospace); }
.test-bd-total {
  border-top: 2px solid var(--border) !important;
  border-bottom: none !important;
  margin-top: .15rem;
}
.test-bd-total span  { font-weight: 600; color: var(--text); }
.test-bd-total strong { font-size: 1rem; color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   SMIC PAGE — minimum wage widgets
   ═══════════════════════════════════════════════════════════════ */

/* Shared canvas wrapper (reused across all smic widgets) */
.smic-canvas-wrap {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}
.smic-canvas-wrap canvas { display: block; width: 100%; }

/* ── Widget 1 : Marché du travail ────────────────────────────── */
.smic-market-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .85rem;
}

.smic-readout-ok {
  background: rgba(78,198,122,.08);
  border: 1px solid rgba(78,198,122,.3);
  border-radius: var(--radius);
  padding: .7rem 1rem;
  font-size: .88rem;
  color: var(--text);
}
.smic-readout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: .25rem;
}
@media (max-width: 580px) { .smic-readout-grid { grid-template-columns: 1fr; } }

.smic-ro-box {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) - 2px);
  padding: .65rem .9rem;
  text-align: center;
}
.smic-ro-box.smic-ro-danger {
  border-color: rgba(192,57,43,.3);
  background: rgba(192,57,43,.04);
}
[data-theme="dark"] .smic-ro-box.smic-ro-danger { background: rgba(192,57,43,.1); }
.smic-ro-label  { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.smic-ro-val    { font-size: 1.2rem; font-weight: 700; font-family: var(--font-mono, monospace); color: var(--text); }
.smic-ro-green  { color: #27863e; }
.smic-ro-red    { color: #C0392B; }
[data-theme="dark"] .smic-ro-red { color: #e07c7c; }
.smic-ro-val small { font-size: .72rem; font-weight: 400; color: var(--text-muted); }

/* ── Widget 2 : Distribution ─────────────────────────────────── */
.smic-dist-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .85rem;
}
.smic-dist-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin-top: .25rem;
}
@media (max-width: 580px) { .smic-dist-stat-grid { grid-template-columns: 1fr; } }
.smic-dist-stat {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) - 2px);
  padding: .65rem .9rem;
  text-align: center;
}
.smic-dist-stat.stat-warn { border-color: rgba(192,57,43,.35); }
.smic-dist-stat-val { font-size: 1.4rem; font-weight: 800; font-family: var(--font-mono, monospace); color: var(--accent); }
.smic-dist-stat.stat-warn .smic-dist-stat-val { color: #C0392B; }
[data-theme="dark"] .smic-dist-stat.stat-warn .smic-dist-stat-val { color: #e07c7c; }
.smic-dist-stat-lbl { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }

/* ── Widget 3 : International ────────────────────────────────── */
.smic-intl-info {
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.smic-intl-detail {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: center;
}
.smic-intl-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.smic-intl-name.smic-intl-highlight { color: var(--accent); }
.smic-intl-ratio { font-size: .88rem; color: var(--text-secondary); }
.smic-intl-ratio strong { color: var(--accent-dark); font-size: 1rem; }
.smic-intl-wage { font-size: .88rem; color: var(--text-secondary); }
.smic-intl-wage strong { color: var(--text); }
.smic-intl-note {
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
  flex-basis: 100%;
}
.smic-intl-nosmic {
  font-size: .82rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) - 2px);
  padding: .6rem .9rem;
  line-height: 1.6;
}

/* ── Widget 4 : Élasticité ───────────────────────────────────── */
.smic-elast-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}
.smic-elast-newval {
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  padding: .6rem .9rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) - 2px);
}
.smic-elast-newval strong { color: var(--accent-dark); }

.smic-elast-scenarios { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.smic-elast-scen {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: calc(var(--radius) - 2px);
  padding: .75rem 1rem;
}
.smic-elast-scen-title {
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text);
}
.smic-scen-opt   { color: #27863e; }
.smic-scen-consv { color: #C6A44E; }
.smic-scen-pess  { color: #C0392B; }
[data-theme="dark"] .smic-scen-pess  { color: #e07c7c; }

.smic-elast-bar-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.smic-elast-bar-track {
  flex: 1;
  height: 14px;
  background: var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.smic-elast-bar-loss {
  height: 100%;
  background: #27863e;
  border-radius: 7px;
  transition: width .4s ease;
  min-width: 2px;
}
.smic-bar-consv { background: #C6A44E; }
.smic-bar-pess  { background: #C0392B; }
[data-theme="dark"] .smic-bar-pess { background: #e07c7c; }

.smic-elast-jobs {
  font-size: .8rem;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 130px;
}

.smic-elast-summary {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.smic-summ-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  padding: .25rem 0;
  border-bottom: 1px solid var(--border-light);
}
.smic-summ-row:last-child { border-bottom: none; }
.smic-summ-row span { color: var(--text-secondary); }
.smic-summ-row strong { font-weight: 700; color: var(--accent-dark); font-family: var(--font-mono, monospace); }
.smic-summ-danger strong { color: #C0392B; }
[data-theme="dark"] .smic-summ-danger strong { color: #e07c7c; }

/* ─── Protectionnisme page ──────────────────────────────────────────────────── */

.prot-canvas-wrap {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}
.prot-canvas-wrap canvas { display: block; width: 100%; }

/* Country setup cards */
.prot-ricart-setup {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.prot-country-card {
  flex: 1;
  min-width: 155px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}
.prot-flag { font-size: 1.35rem; display: block; margin-bottom: .3rem; }
.prot-country-name { font-weight: 700; font-size: .93rem; margin-bottom: .3rem; color: var(--text); }
.prot-country-spec { font-size: .81rem; color: var(--text-secondary); line-height: 1.55; }
.prot-country-adv {
  display: inline-block;
  margin-top: .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-pale);
  border-radius: 4px;
  padding: .2rem .45rem;
}
.prot-trade-arrow { font-size: 1.8rem; color: var(--accent); flex-shrink: 0; align-self: center; }
.prot-ricart-ctrl { margin-bottom: .75rem; }
.prot-spec-label { font-size: .8rem; color: var(--text-muted); font-style: italic; margin-left: .3rem; }

/* Gain display */
.prot-ricart-gain {
  text-align: center;
  font-size: .88rem;
  padding: .5rem .75rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: .75rem;
}
.prot-gain-pos  { color: #27863e; font-weight: 600; }
.prot-gain-neutral { color: var(--text-secondary); }
[data-theme="dark"] .prot-gain-pos { color: #4caf6e; }

/* Tariff controls */
.prot-tarif-ctrl { margin: .5rem 0 .75rem; }
.prot-prohibitive {
  display: inline-block;
  margin-left: .5rem;
  font-size: .78rem;
  color: #C0392B;
  font-weight: 600;
  background: rgba(192,57,43,.1);
  border-radius: 4px;
  padding: .1rem .4rem;
}
.prot-tarif-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
  margin-bottom: .6rem;
  font-size: .79rem;
}
.prot-leg-item { display: flex; align-items: center; gap: .4rem; color: var(--text-secondary); }
.prot-leg-swatch { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
.prot-tarif-readout {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.65;
  padding: .5rem .75rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.prot-tarif-readout strong { color: var(--text); }

/* Trade war prisoner's dilemma */
.guerre-matrix-wrap { overflow-x: auto; margin-bottom: 1rem; }
.guerre-matrix {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 3px;
  min-width: 380px;
  background: var(--border-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 3px;
}
.guerre-corner { background: transparent; }
.guerre-col-header, .guerre-row-header {
  background: var(--bg-alt);
  padding: .55rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guerre-row-header { text-align: left; justify-content: flex-start; }
.guerre-cell {
  background: var(--card-bg);
  padding: .75rem .8rem;
  cursor: pointer;
  transition: background .15s;
  text-align: center;
}
.guerre-cell:hover { background: var(--bg-alt); }
.guerre-cell.guerre-cell-selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: rgba(198,164,78,.12);
  border-radius: 3px;
}
.guerre-nash { background: rgba(192,57,43,.06); }
[data-theme="dark"] .guerre-nash { background: rgba(192,57,43,.12); }
.guerre-payoff {
  font-family: var(--font-mono, monospace);
  font-size: .93rem;
  font-weight: 700;
  margin-bottom: .22rem;
}
.guerre-you  { color: #4E90C6; }
.guerre-them { color: #C0392B; }
.guerre-cell-label { font-size: .73rem; color: var(--text-muted); }
.guerre-btns {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.guerre-btn {
  flex: 1;
  min-width: 150px;
  padding: .6rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-family: var(--font-sans, sans-serif);
}
.guerre-btn:hover { background: var(--bg-alt); border-color: var(--accent); }
.guerre-btn-prot { border-color: #C0392B; color: #C0392B; }
.guerre-btn-prot:hover { background: rgba(192,57,43,.08); }
.guerre-result {
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  font-size: .87rem;
  line-height: 1.58;
  display: none;
}
.guerre-result.guerre-result-bad {
  display: block;
  background: rgba(192,57,43,.07);
  border: 1px solid rgba(192,57,43,.28);
}
.guerre-result.guerre-result-nash {
  display: block;
  background: rgba(198,164,78,.09);
  border: 1px solid rgba(198,164,78,.38);
}
.guerre-result strong { font-weight: 700; }

/* Cost-per-job flip cards */
.prot-cout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .85rem;
  margin-bottom: .75rem;
}
.prot-cout-card {
  position: relative;
  cursor: pointer;
  height: 205px;
  border-radius: var(--radius);
}
.prot-cout-front, .prot-cout-back {
  position: absolute;
  inset: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .95rem 1rem;
  display: flex;
  flex-direction: column;
  transition: opacity .3s ease, transform .35s ease;
  backface-visibility: hidden;
}
.prot-cout-back {
  opacity: 0;
  transform: rotateY(180deg);
  pointer-events: none;
}
.prot-cout-card.flipped .prot-cout-front {
  opacity: 0;
  transform: rotateY(-180deg);
  pointer-events: none;
}
.prot-cout-card.flipped .prot-cout-back {
  opacity: 1;
  transform: rotateY(0deg);
  pointer-events: auto;
}
.prot-cout-icon { font-size: 1.75rem; margin-bottom: .35rem; }
.prot-cout-name { font-weight: 700; font-size: .87rem; margin-bottom: .45rem; color: var(--text); }
.prot-cout-cost {
  font-size: 1.5rem;
  font-weight: 800;
  color: #C0392B;
  font-family: var(--font-mono, monospace);
  line-height: 1.1;
}
[data-theme="dark"] .prot-cout-cost { color: #e07c7c; }
.prot-cout-sub  { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; margin-bottom: auto; }
.prot-cout-hint { font-size: .74rem; color: var(--accent-dark); margin-top: .5rem; }
.prot-cout-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .79rem;
  padding: .18rem 0;
  border-bottom: 1px solid var(--border-light);
}
.prot-cout-row:last-of-type { border-bottom: none; }
.prot-cout-row span { color: var(--text-secondary); }
.prot-cout-row strong { font-weight: 700; color: var(--text); font-family: var(--font-mono, monospace); }
.prot-cout-equiv {
  font-size: .79rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--accent-pale);
  border-radius: 4px;
  padding: .2rem .4rem;
  margin-top: .4rem;
}
.prot-cout-note {
  font-size: .71rem;
  color: var(--text-muted);
  margin-top: .35rem;
  line-height: 1.4;
}
.prot-cout-source {
  font-size: .67rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: auto;
  padding-top: .3rem;
}

/* ══════════════════════════════════════════════════════════════════
   IMPÔT SUR LES SOCIÉTÉS — isoc-* classes
══════════════════════════════════════════════════════════════════ */

.isoc-canvas-wrap {
  width: 100%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

.isoc-canvas-wrap canvas {
  display: block;
  width: 100%;
}

/* Scenario toggle buttons */
.isoc-incid-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.isoc-incid-btn {
  padding: 9px 18px;
  border-radius: 24px;
  font-size: .85rem;
  font-weight: 600;
  border: 2px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
}

.isoc-incid-btn:hover { border-color: var(--accent); color: var(--accent); }
.isoc-incid-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
[data-theme="dark"] .isoc-incid-btn.active { color: #1A1A18; }

/* Source note below incidence buttons */
.isoc-incid-source {
  font-size: .72rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* OCDE country info panel */
.isoc-ocde-info {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  display: none;
  line-height: 1.5;
}

.isoc-ocde-info strong {
  color: var(--accent);
}

/* Nominal vs effective legend */
.isoc-effectif-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: .82rem;
  color: var(--text-secondary);
}

.isoc-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.isoc-legend-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   REGULATION PAGE
   ══════════════════════════════════════════════════════ */

/* Canvas wrapper */
.regl-canvas-wrap {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-alt);
  overflow: hidden;
  margin-bottom: 1rem;
}
.regl-canvas-wrap canvas { display: block; width: 100%; }

/* Compliance section note */
.regl-compliance-note {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
  margin: -.5rem 0 1rem;
}

/* Barrier slider control */
.regl-barriere-ctrl {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .75rem;
}

/* Barrier readout panel */
.regl-barriere-readout {
  font-size: .85rem;
  color: var(--text-secondary);
  padding: .5rem 0;
  border-top: 1px solid var(--border-light);
  margin-bottom: .75rem;
}

/* PMR info panel */
.pmr-info {
  font-size: .88rem;
  color: var(--text-secondary);
  padding: .6rem .9rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--bg-alt);
  margin: .5rem 0 1rem;
  min-height: 2.5rem;
  cursor: default;
}

/* Licence grid */
.regl-licence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Individual licence flip card */
.regl-lic-card {
  position: relative;
  height: 180px;
  cursor: pointer;
  border-radius: calc(var(--radius) * 1.5);
  outline: none;
}
.regl-lic-card:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}
.regl-lic-front,
.regl-lic-back {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--radius) * 1.5);
  border: 1px solid var(--border);
  background: var(--card-bg);
  padding: .85rem;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: opacity .25s, transform .25s;
}
.regl-lic-back {
  opacity: 0;
  transform: scaleX(-1);
  background: var(--bg-alt);
  overflow-y: auto;
}
.regl-lic-card.flipped .regl-lic-front {
  opacity: 0;
  transform: scaleX(-1);
}
.regl-lic-card.flipped .regl-lic-back {
  opacity: 1;
  transform: scaleX(1);
}

.regl-lic-icon { font-size: 1.5rem; line-height: 1; }
.regl-lic-name { font-size: .9rem; font-weight: 700; color: var(--text); }
.regl-lic-req  { font-size: .78rem; color: var(--text-muted); flex: 1; }
.regl-lic-hint { font-size: .7rem; color: var(--accent); align-self: flex-end; }
.regl-lic-detail { font-size: .78rem; color: var(--text); line-height: 1.5; margin: .35rem 0 0; }

/* Justification badges */
.regl-lic-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  width: fit-content;
}
.regl-lic-badge-green  { background: rgba(39,134,62,.15);  color: #1a7a38; }
.regl-lic-badge-orange { background: rgba(198,120,60,.15); color: #a05c15; }
.regl-lic-badge-red    { background: rgba(192,57,43,.15);  color: #c0392b; }

[data-theme="dark"] .regl-lic-badge-green  { background: rgba(39,134,62,.25);  color: #5fd987; }
[data-theme="dark"] .regl-lic-badge-orange { background: rgba(198,120,60,.25); color: #e09050; }
[data-theme="dark"] .regl-lic-badge-red    { background: rgba(192,57,43,.25);  color: #f07060; }

/* Responsive */
@media (max-width: 500px) {
  .regl-licence-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .regl-licence-grid { grid-template-columns: 1fr; }
}

/* ─── Comprendre grid ────────────────────────────────────────────────────────── */

.comprendre-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.comprendre-grid--home {
  margin-top: 1.5rem;
}

.comprendre-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.comprendre-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(198,164,78,.12);
  transform: translateY(-2px);
}
/* Fix: override transition priority so opacity+transform animate correctly
   during the initial fade-in (not just the hover).
   .comprendre-card alone would win over .fade-up (same specificity, later in file). */
.comprendre-card.fade-up:not(.visible) {
  transition: opacity .4s cubic-bezier(0,.0,.2,1), transform .4s cubic-bezier(0,.0,.2,1);
}

.comprendre-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.comprendre-card-icon { font-size: 1.5rem; line-height: 1; }
.comprendre-card-topic {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(198,164,78,.1);
  border-radius: 999px;
  padding: .2rem .65rem;
  white-space: nowrap;
}

.comprendre-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}

.comprendre-card-desc {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.comprendre-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border-light);
}
.comprendre-card-stat {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.comprendre-card-link {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="dark"] .comprendre-card-topic {
  background: rgba(198,164,78,.18);
}

@media (max-width: 900px) {
  .comprendre-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .comprendre-grid { grid-template-columns: 1fr; }
}

/* ─── Carte scolaire widgets ─────────────────────────────────────────────────── */

.ecole-canvas-wrap {
  width: 100%;
  max-width: 480px;
  overflow-x: auto;
  margin: 0 auto .75rem;
}
.ecole-canvas-wrap canvas { display: block; }

.ecole-zone-ctrl {
  max-width: 480px;
  margin: 0 auto .5rem;
}

/* Taxe readout / alert */
.ecole-taxe-readout { max-width: 480px; margin: .25rem auto 0; }

.ecole-taxe-alert {
  padding: .65rem 1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  line-height: 1.5;
  margin-top: .5rem;
}
.ecole-taxe-alert--red     { background: rgba(192,57,43,.10); border: 1px solid rgba(192,57,43,.30); color: var(--text); }
.ecole-taxe-alert--orange  { background: rgba(198,120,60,.10); border: 1px solid rgba(198,120,60,.30); color: var(--text); }
.ecole-taxe-alert--neutral { background: var(--bg-alt); border: 1px solid var(--border-light); color: var(--text-secondary); }

[data-theme="dark"] .ecole-taxe-alert--red    { background: rgba(192,57,43,.18); border-color: rgba(192,57,43,.45); }
[data-theme="dark"] .ecole-taxe-alert--orange { background: rgba(198,120,60,.18); border-color: rgba(198,120,60,.45); }

/* Profils grid */
.profils-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: .5rem;
}

.ecole-profil-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.ecole-profil-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ecole-profil-emoji { font-size: 1.6rem; line-height: 1; }

.ecole-profil-tag {
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-bad  { background: rgba(192,57,43,.12);  color: #c0392b; }
.tag-mid  { background: rgba(198,164,78,.18); color: #8a6a10; }
.tag-good { background: rgba(39,134,62,.12);  color: #1a7a38; }

[data-theme="dark"] .tag-bad  { background: rgba(192,57,43,.25);  color: #f07060; }
[data-theme="dark"] .tag-mid  { background: rgba(198,164,78,.25); color: #d4aa50; }
[data-theme="dark"] .tag-good { background: rgba(39,134,62,.25);  color: #5fd987; }

.ecole-profil-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}

.ecole-profil-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.ecole-profil-list li {
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Suede info panel */
.suede-info { max-width: 480px; margin: .5rem auto 0; min-height: 2.5rem; }

.suede-info-card {
  padding: .65rem 1rem;
  border-radius: var(--radius);
  font-size: .82rem;
  line-height: 1.5;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.suede-info-card strong { color: var(--text); }
.suede-info-card--hl {
  background: rgba(198,164,78,.09);
  border-color: rgba(198,164,78,.30);
}
[data-theme="dark"] .suede-info-card--hl {
  background: rgba(198,164,78,.15);
  border-color: rgba(198,164,78,.40);
}

/* Responsive */
@media (max-width: 680px) {
  .profils-grid { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .ecole-canvas-wrap { overflow-x: auto; }
}

/* ── Trappe : widget prélèvement ─────────────────────────────────────────── */
.prel-scene {
  text-align: center;
  padding: 1.5rem 1rem 1rem;
}
.prel-label-gross {
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: .75rem;
}
.prel-label-gross strong {
  color: var(--accent);
  font-size: 1.05rem;
}
.prel-label-raise {
  display: block;
  margin-top: .3rem;
  font-weight: 600;
  color: var(--text);
}
.prel-question {
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.prel-garde-big {
  font-size: 4rem;
  font-weight: 800;
  font-family: var(--font-serif);
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--text);
  transition: color .2s;
}
.prel-bar-wrap {
  max-width: 480px;
  margin: 0 auto 1rem;
}
.prel-bar-track {
  height: 28px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: .35rem;
}
.prel-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .25s ease, background-color .25s;
}
.prel-bar-fill.prel-ok     { background: #27ae60; }
.prel-bar-fill.prel-warn   { background: #e07c2b; }
.prel-bar-fill.prel-danger { background: #c0392b; }
.prel-bar-fill.prel-cliff  { background: #8e1010; }
.prel-bar-ends {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  color: var(--text-muted);
}
.prel-tag {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: .25rem;
  min-height: 1.2em;
}
.prel-detail-wrap {
  margin-top: 1.25rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.prel-detail-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.prel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem 0;
  font-size: .82rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.prel-row:last-child { border-bottom: none; }
.prel-row-neg { color: var(--text-muted); }
.prel-total {
  font-weight: 700;
  color: var(--text) !important;
  padding-top: .5rem;
  margin-top: .25rem;
  border-top: 2px solid var(--border) !important;
  border-bottom: none !important;
}
.prel-pos { color: #27ae60; font-weight: 700; }
.prel-neg { color: #c0392b; font-weight: 700; }
[data-theme="dark"] .prel-pos { color: #7ecb82; }
[data-theme="dark"] .prel-neg { color: #e07070; }

/* ══════════════════════════════════════════════════════════════════════════════
   ILLUSION FISCALE — widgets
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared canvas wrappers ── */
.illusion-charge-wrap,
.illusion-tva-wrap,
.illusion-jour-wrap,
.illusion-scatter-wrap {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 1rem;
  overflow: hidden;
}
.illusion-charge-wrap canvas,
.illusion-tva-wrap canvas,
.illusion-jour-wrap canvas,
.illusion-scatter-wrap canvas {
  display: block;
  max-width: 100%;
}

/* ── Shared control row ── */
.illusion-ctrl {
  max-width: 480px;
  margin: 0 auto .75rem;
}

/* ── Widget 1 : Charge readout grid ── */
.illusion-ro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  max-width: 480px;
  margin: .75rem auto 0;
}
.illusion-ro-item {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
}
.illusion-ro-label {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: .2rem;
  line-height: 1.3;
}
.illusion-ro-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.illusion-ro-net .illusion-ro-val  { color: #27863e; }
.illusion-ro-red                   { color: #C0392B !important; }
.illusion-ro-invisible {
  border-color: rgba(192,57,43,.35);
  background: rgba(192,57,43,.06);
}
.illusion-ro-total {
  grid-column: span 1;
}
.illusion-ro-accent .illusion-ro-val { color: var(--accent); }

[data-theme="dark"] .illusion-ro-net .illusion-ro-val { color: #7ecb82; }
[data-theme="dark"] .illusion-ro-red                  { color: #e07070 !important; }
[data-theme="dark"] .illusion-ro-invisible {
  background: rgba(192,57,43,.12);
  border-color: rgba(192,57,43,.4);
}

@media (max-width: 500px) {
  .illusion-ro-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Widget 2 : TVA stats ── */
.illusion-tva-stats {
  display: flex;
  gap: .75rem;
  max-width: 480px;
  margin: .75rem auto 0;
}
.illusion-tva-stat {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  text-align: center;
}
.illusion-tva-stat-lbl {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
}
.illusion-tva-stat-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.illusion-tva-stat-accent {
  border-color: rgba(198,164,78,.4);
  background: var(--accent-pale);
}
.illusion-tva-stat-accent .illusion-tva-stat-val { color: var(--accent-dark); }

[data-theme="dark"] .illusion-tva-stat-accent {
  background: rgba(198,164,78,.12);
  border-color: rgba(198,164,78,.35);
}
[data-theme="dark"] .illusion-tva-stat-accent .illusion-tva-stat-val { color: var(--accent-light); }

@media (max-width: 400px) {
  .illusion-tva-stats { flex-direction: column; }
}

/* ── Widget 3 : Jour de libération stats ── */
.illusion-jour-stats {
  display: flex;
  gap: .75rem;
  max-width: 480px;
  margin: .75rem auto 0;
}
.illusion-jour-stat {
  flex: 1;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  text-align: center;
}
.illusion-jour-lbl {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
  line-height: 1.3;
}
.illusion-jour-val {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}
.illusion-jour-state .illusion-jour-val { color: var(--text-secondary); }
.illusion-jour-free  .illusion-jour-val { color: #27863e; }
.illusion-jour-date  .illusion-jour-val { color: var(--accent-dark); }

[data-theme="dark"] .illusion-jour-free .illusion-jour-val { color: #7ecb82; }
[data-theme="dark"] .illusion-jour-date .illusion-jour-val { color: var(--accent-light); }

@media (max-width: 400px) {
  .illusion-jour-stats { flex-direction: column; }
}

/* ── Widget 4 : Visibilité scatter info card ── */
.illusion-vis-info {
  max-width: 480px;
  margin: .5rem auto 0;
  min-height: 60px;
}
.illusion-vis-hint {
  font-size: .85rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: .75rem 0;
}
.illusion-vis-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.illusion-vis-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .4rem;
}
.illusion-vis-card-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--text-secondary);
  margin-bottom: .5rem;
}
.illusion-vis-card-stats strong { color: var(--text); }
.illusion-vis-card-desc {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

[data-theme="dark"] .illusion-vis-card {
  background: var(--bg-alt);
  border-color: var(--border);
  border-left-color: var(--accent);
}

/* ── Widget 3 : Boutons pays ── */
.illusion-jour-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: .25rem 0;
}
.illusion-jour-btn {
  padding: 7px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  white-space: nowrap;
}
.illusion-jour-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}
.illusion-jour-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
[data-theme="dark"] .illusion-jour-btn {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .illusion-jour-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
@media (max-width: 480px) {
  .illusion-jour-btn { padding: 6px 10px; font-size: .8rem; }
}

/* ══════════════════════════════════════════════════════════════
   SMIC — new widgets (smic- prefix)
   ══════════════════════════════════════════════════════════════ */

/* Widget 1 — Effet emploi canvas */
.smic-effet-canvas-wrap {
  overflow-x: auto;
  margin-bottom: .75rem;
}
.smic-effet-canvas-wrap canvas {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}
.smic-effet-ctrl {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .75rem;
}
.smic-effet-readout {
  min-height: 2.2rem;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.smic-effet-readout-inner {
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: .6rem .9rem;
}
.smic-readout-accent {
  color: var(--accent-dark);
  font-weight: 700;
}
.smic-effet-neutral {
  color: var(--text-muted);
  font-size: .82rem;
  font-style: italic;
}
[data-theme="dark"] .smic-effet-readout-inner {
  background: var(--bg-alt);
  border-color: var(--border);
}

/* Widget 3 — Comparaison internationale canvas */
.smic-comparaison-wrap {
  overflow-x: auto;
  margin-bottom: .75rem;
}
.smic-comparaison-wrap canvas {
  display: block;
  max-width: 100%;
}
.smic-comparaison-info {
  min-height: 2.5rem;
  margin-top: .25rem;
}
.smic-comparaison-hint {
  font-size: .8rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}
.smic-comp-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.2rem;
  padding: .65rem 1rem;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  font-size: .83rem;
  color: var(--text-secondary);
}
.smic-comp-detail--hl {
  background: rgba(198,164,78,.08);
  border-color: rgba(198,164,78,.30);
}
[data-theme="dark"] .smic-comp-detail--hl {
  background: rgba(198,164,78,.14);
  border-color: rgba(198,164,78,.38);
}
.smic-comp-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  width: 100%;
  margin-bottom: .15rem;
}
.smic-comp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
}
.smic-comp-stats strong { color: var(--accent-dark); }
.smic-comp-detail--hl .smic-comp-name { color: var(--accent); }

/* Widget 4 — Alternatives */
.smic-alt-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.smic-alt-btn {
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.smic-alt-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}
.smic-alt-btn-active {
  border-color: var(--accent);
  background: rgba(198,164,78,.12);
  color: var(--accent-dark);
}
[data-theme="dark"] .smic-alt-btn-active {
  background: rgba(198,164,78,.18);
  color: var(--accent);
}
.smic-alt-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.smic-alt-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.smic-alt-metrics {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.smic-alt-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .83rem;
}
.smic-alt-metric-lbl  { color: var(--text-secondary); }
.smic-alt-metric-score {
  font-size: .95rem;
  letter-spacing: .05em;
  font-family: var(--font-mono, monospace);
}
.smic-score-bad  { color: #c0392b; }
.smic-score-mid  { color: var(--accent-dark); }
.smic-score-good { color: #27863e; }
[data-theme="dark"] .smic-score-bad  { color: #e07c7c; }
[data-theme="dark"] .smic-score-good { color: #5fd987; }
.smic-alt-note {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  padding-top: .5rem;
  border-top: 1px solid var(--border-light);
}
[data-theme="dark"] .smic-alt-card {
  background: var(--bg-alt);
}

/* Widget 4 — Comparaison côte à côte (smic-compare-*) */
.smic-compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.smic-compare-col {
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.smic-compare-col--bad  { border-color: rgba(192,57,43,.35); background: rgba(192,57,43,.04); }
.smic-compare-col--good { border-color: rgba(39,134,62,.35); background: rgba(39,134,62,.04); }
[data-theme="dark"] .smic-compare-col--bad  { background: rgba(192,57,43,.08); }
[data-theme="dark"] .smic-compare-col--good { background: rgba(39,134,62,.08); }
.smic-compare-col-head {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
}
.smic-compare-col-sub {
  font-weight: 400;
  color: var(--text-muted);
  font-size: .78rem;
}
.smic-compare-col-stats { display: flex; flex-direction: column; gap: .7rem; }
.smic-compare-stat { display: flex; flex-direction: column; gap: .1rem; }
.smic-compare-stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  line-height: 1;
}
.smic-stat-bad  { color: #C0392B; }
.smic-stat-good { color: #27863e; }
[data-theme="dark"] .smic-stat-bad  { color: #e07c7c; }
[data-theme="dark"] .smic-stat-good { color: #5fd987; }
.smic-compare-stat-lbl {
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.smic-compare-stat-src {
  font-size: .7rem;
  color: var(--text-muted);
  font-style: italic;
}
@media (max-width: 560px) {
  .smic-compare-cols { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 520px) {
  .smic-alt-btns { flex-direction: column; }
  .smic-alt-btn  { text-align: center; }
  .smic-comp-stats { flex-direction: column; gap: .2rem; }
}

/* ── Protectionnisme (new) ─────────────────────────────────────────────────── */
.prot-ouverture-info {
  margin-top: .75rem;
  min-height: 60px;
}
.prot-cout-row-bad strong { color: #c0392b; }
[data-theme="dark"] .prot-cout-row-bad strong { color: #e07c7c; }

/* ── Bureaucratie ──────────────────────────────────────────────────────────── */

.bur-canvas-wrap {
  width: 100%;
  overflow-x: auto;
}
.bur-canvas-wrap canvas { display: block; width: 100%; }

.bur-canvas-note {
  margin-top: .5rem;
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Parcours tabs */
.bur-parcours-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.bur-parcours-tab {
  padding: .4rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s;
}
.bur-parcours-tab:hover { border-color: var(--accent); color: var(--text); }
.bur-parcours-tab.active { border-color: var(--accent); color: var(--accent); font-weight: 600; background: var(--accent-pale); }

/* Step list */
.bur-parcours-steps {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.bur-step {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .55rem .75rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}
.bur-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}
.bur-step-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.5; }
.bur-step-label { font-size: .88rem; color: var(--text); line-height: 1.45; }

[data-theme="dark"] .bur-step { border-color: var(--border); }

@media (max-width: 680px) {
  .bur-parcours-tabs { gap: .35rem; }
  .bur-parcours-tab  { font-size: .78rem; padding: .35rem .7rem; }
}

/* ── Laffer — scenario tabs ────────────────────────────────────────────────── */

.laffer-scenario-tabs {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.laffer-sc-tab {
  padding: .4rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.laffer-sc-tab:hover { border-color: var(--accent); color: var(--text); }
.laffer-sc-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-pale);
}

.laffer-sc-note {
  margin: .5rem 0 1rem;
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  font-style: italic;
  padding: .6rem .85rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

[data-theme="dark"] .laffer-sc-tab { background: var(--bg-alt); }
[data-theme="dark"] .laffer-sc-note { background: var(--bg-alt); }

@media (max-width: 520px) {
  .laffer-scenario-tabs { gap: .3rem; }
  .laffer-sc-tab { font-size: .78rem; padding: .35rem .65rem; }
}

/* ── Laffer — bilan canvas ────────────────────────────────────────────────── */

.laf-bilan-canvas-wrap {
  width: 100%;
  margin-bottom: .75rem;
}
.laf-bilan-canvas-wrap canvas { display: block; width: 100%; }

.laf-bilan-note {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: .65rem .9rem;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 1.25rem;
}
[data-theme="dark"] .laf-bilan-note { background: var(--bg-alt); }

/* ── Laffer — simulateur personnel ───────────────────────────────────────── */

.laf-perso-result {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

.laf-perso-donut-wrap {
  position: relative;
  flex-shrink: 0;
}
.laf-perso-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.laf-perso-kept {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d7a30;
  line-height: 1;
}
[data-theme="dark"] .laf-perso-kept { color: #7ecb82; }
.laf-perso-donut-lbl { font-size: .7rem; color: var(--text-muted); }

.laf-perso-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: .6rem; }

.laf-perso-tme {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.laf-perso-bar-wrap { padding: 0 2px; }
.laf-perso-bar {
  height: 11px;
  background: var(--border);
  border-radius: 6px;
  overflow: visible;
  position: relative;
}
.laf-perso-fill {
  height: 100%;
  border-radius: 6px;
  transition: width .35s ease, background .35s ease;
}
.laf-perso-peak-mark {
  position: absolute;
  left: 65%;
  top: -18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: .68rem;
  color: var(--text-muted);
  line-height: 1.2;
  pointer-events: none;
}
.laf-perso-peak-lbl { font-weight: 600; white-space: nowrap; }

.laf-perso-verdict {
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 520px) {
  .laf-perso-result { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   35 HEURES (tth-)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Comparaison internationale canvas wrap ──────────────────────────────── */
.tth-comp-canvas-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: .75rem;
}
.tth-comp-canvas-wrap canvas {
  display: block;
  width: 100%;
  max-width: 540px;
}

/* ── Comp info box (detail panel below canvas) ──────────────────────────── */
.tth-comp-info {
  min-height: 52px;
  margin-top: .5rem;
}
.tth-comp-hint {
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}
.tth-comp-detail {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .85rem;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.tth-comp-detail p { margin: 0; }
.tth-comp-detail--hl {
  border-color: var(--accent);
  background: var(--accent-pale);
  color: var(--text);
}
[data-theme="dark"] .tth-comp-detail {
  background: var(--bg-alt);
  border-color: var(--border);
}
[data-theme="dark"] .tth-comp-detail--hl {
  background: rgba(198,164,78,.15);
  border-color: var(--accent);
  color: var(--text);
}

/* ── Trajectoire canvas wrap ─────────────────────────────────────────────── */
.tth-traj-canvas-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: .75rem;
}
.tth-traj-canvas-wrap canvas {
  display: block;
  width: 100%;
  max-width: 560px;
}

/* ── Simulateur heures supp (perso) ─────────────────────────────────────── */
.tth-perso-ctrl {
  margin-bottom: 1.1rem;
}
.tth-perso-label {
  display: block;
  font-size: .88rem;
  color: var(--text-secondary);
  margin-bottom: .4rem;
}
.tth-perso-label strong {
  color: var(--accent-dark);
  font-size: 1rem;
}
[data-theme="dark"] .tth-perso-label strong {
  color: var(--accent);
}
.tth-perso-minmax {
  display: flex;
  justify-content: space-between;
  font-size: .77rem;
  color: var(--text-muted);
  margin-top: .2rem;
}

.tth-perso-result {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1rem;
}
[data-theme="dark"] .tth-perso-result {
  background: var(--bg-alt);
  border-color: var(--border);
}

.tth-perso-result-line {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.tth-perso-big {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-dark);
  display: inline-block;
  margin: 0 .15em;
  line-height: 1;
}
[data-theme="dark"] .tth-perso-big {
  color: var(--accent);
}

.tth-perso-equiv {
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .tth-comp-detail { font-size: .8rem; }
  .tth-perso-big   { font-size: 1.1rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ENVIRONNEMENT
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Signal prix carbone (widget 1) ─────────────────────────────────────── */
.env-signal-canvas-wrap {
  overflow-x: auto;
  margin-bottom: .75rem;
}
.env-signal-canvas-wrap canvas {
  display: block;
  width: 100%;
  max-width: 480px;
}
.env-signal-ctrl {
  margin-bottom: .75rem;
}
.env-signal-label {
  display: block;
  font-size: .88rem;
  color: var(--text-secondary);
  margin-bottom: .4rem;
}
.env-signal-label strong {
  color: var(--accent-dark);
  font-size: 1rem;
}
[data-theme="dark"] .env-signal-label strong {
  color: var(--accent);
}
.env-signal-readout {
  margin-top: .5rem;
  min-height: 1.6em;
}
.env-readout-text {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.env-readout-text strong {
  color: var(--accent-dark);
}
[data-theme="dark"] .env-readout-text strong {
  color: var(--accent);
}

/* ── Comparaison internationale (widget 3) ──────────────────────────────── */
.env-comp-canvas-wrap {
  overflow-x: auto;
  margin-bottom: .75rem;
}
.env-comp-canvas-wrap canvas {
  display: block;
  width: 100%;
  max-width: 540px;
}
.env-comp-info {
  margin-top: .5rem;
  min-height: 56px;
}
.env-comp-detail {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.env-comp-detail--hl {
  border-color: var(--accent);
  background: var(--accent-pale);
}
[data-theme="dark"] .env-comp-detail {
  background: var(--bg-alt);
  border-color: var(--border);
}
[data-theme="dark"] .env-comp-detail--hl {
  background: rgba(198,164,78,.10);
  border-color: var(--accent);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .env-comp-detail { font-size: .8rem; }
  .env-readout-text { font-size: .82rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HÉRITAGE
   ══════════════════════════════════════════════════════════════════════════ */

.heritage-card-period {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-dark);
  background: var(--accent-pale);
  border: 1px solid var(--accent-pale2);
  padding: 2px 8px;
  border-radius: 20px;
}
[data-theme="dark"] .heritage-card-period {
  color: var(--accent-light);
  background: rgba(198,164,78,.12);
  border-color: rgba(198,164,78,.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THATCHER
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Canvas wrappers ─────────────────────────────────────────────────────── */
.tha-ctx-canvas-wrap,
.tha-inf-canvas-wrap,
.tha-priv-canvas-wrap,
.tha-fisc-canvas-wrap {
  overflow-x: auto;
  margin-bottom: .75rem;
}
.tha-ctx-canvas-wrap canvas,
.tha-inf-canvas-wrap canvas,
.tha-priv-canvas-wrap canvas,
.tha-fisc-canvas-wrap canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* ── Privatisations info panel ──────────────────────────────────────────── */
.tha-priv-info {
  min-height: 40px;
  margin-top: .5rem;
}
.tha-priv-detail {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .65rem 1rem;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.tha-priv-detail strong {
  color: var(--accent-dark);
}
[data-theme="dark"] .tha-priv-detail {
  background: var(--bg-alt);
  border-color: var(--border);
}
[data-theme="dark"] .tha-priv-detail strong {
  color: var(--accent);
}

/* ── Fiscal slider ───────────────────────────────────────────────────────── */
.tha-fisc-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.tha-fisc-label {
  font-size: .9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
.tha-fisc-label strong {
  color: var(--accent-dark);
  font-weight: 600;
}
[data-theme="dark"] .tha-fisc-label strong {
  color: var(--accent);
}
#tha-fisc-slider {
  flex: 1;
  min-width: 160px;
  accent-color: var(--accent);
}
.tha-fisc-readout {
  margin-top: .5rem;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  min-height: 28px;
}
.tha-fisc-readout strong {
  color: var(--accent-dark);
}
[data-theme="dark"] .tha-fisc-readout strong {
  color: var(--accent);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .tha-fisc-ctrl { flex-direction: column; align-items: flex-start; }
}

/* ── Union comparison grid ───────────────────────────────────────────────── */
.tha-union-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 1rem;
}
.tha-union-col {
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.tha-union-col-before {
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
}
.tha-union-col-after {
  background: var(--accent-pale);
  border: 1.5px solid var(--accent-pale2);
}
.tha-union-col-header {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border-light);
}
.tha-union-row {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text-secondary);
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}
.tha-union-bad  { color: #C0392B; font-weight: 700; flex-shrink: 0; }
.tha-union-good { color: #27AE60; font-weight: 700; flex-shrink: 0; }
[data-theme="dark"] .tha-union-col-before { background: var(--bg-alt); border-color: var(--border); }
[data-theme="dark"] .tha-union-col-after  { background: rgba(198,164,78,.10); border-color: rgba(198,164,78,.25); }
@media (max-width: 600px) { .tha-union-grid { grid-template-columns: 1fr; } }

/* ── Big Bang buttons + canvas ───────────────────────────────────────────── */
.tha-bang-ctrl { display: flex; gap: 8px; margin-bottom: 12px; }
.tha-bang-btn {
  padding: .35rem .9rem;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.tha-bang-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tha-bang-canvas-wrap { width: 100%; overflow-x: auto; }
.tha-bang-canvas-wrap canvas { max-width: 100%; display: block; }

/* ── Housing canvas ───────────────────────────────────────────────────────── */
.tha-hous-canvas-wrap { width: 100%; overflow-x: auto; }
.tha-hous-canvas-wrap canvas { max-width: 100%; display: block; }

/* ── Hover readout (S01, S02) + Housing readout (S07) ────────────────────── */
.tha-readout {
  min-height: 22px;
  margin-top: .4rem;
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  transition: opacity .15s;
}
.tha-readout strong { color: var(--accent-dark); font-weight: 600; }
[data-theme="dark"] .tha-readout strong { color: var(--accent); }

/* ── Housing slider control ──────────────────────────────────────────────── */
.tha-hous-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .tha-hous-ctrl { flex-direction: column; align-items: flex-start; }
}

/* ── S01 Period buttons ──────────────────────────────────────────────────── */
.tha-period-btns {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: .75rem;
}
.tha-period-btn {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .45rem .85rem;
  font-family: inherit; font-size: .85rem; color: var(--text-secondary);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.tha-period-btn:hover { border-color: var(--accent); }
.tha-period-btn.active { border-color: var(--accent); background: var(--accent-pale); color: var(--text); font-weight: 600; }
[data-theme="dark"] .tha-period-btn.active { color: var(--accent); }

/* ── S01 Big stat ────────────────────────────────────────────────────────── */
.tha-big-stat {
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .75rem; flex-wrap: wrap; min-height: 36px;
}
.tha-big-num {
  font-size: 2rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tha-big-num.red   { color: #c0392b; }
.tha-big-num.green { color: #27ae60; }
[data-theme="dark"] .tha-big-num.red   { color: #e74c3c; }
[data-theme="dark"] .tha-big-num.green { color: #2ecc71; }
.tha-big-label {
  font-size: .875rem; color: var(--text-secondary);
}

/* ── S02 Event pills ─────────────────────────────────────────────────────── */
.tha-evt-pills {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: .75rem;
}
.tha-evt-pill {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .45rem .75rem;
  cursor: pointer; font-family: inherit; gap: 1px;
  transition: border-color .15s, background .15s;
}
.tha-evt-pill:hover { border-color: var(--accent); }
.tha-evt-pill.active { border-color: var(--accent); background: var(--accent-pale); }
.tha-pill-year { font-size: .7rem; color: var(--text-muted); }
.tha-evt-pill.active .tha-pill-year { color: var(--accent-dark); }
.tha-pill-label { font-size: .83rem; font-weight: 600; color: var(--text); }
.tha-evt-pill.active .tha-pill-label { color: var(--accent-dark); }
[data-theme="dark"] .tha-evt-pill.active .tha-pill-year,
[data-theme="dark"] .tha-evt-pill.active .tha-pill-label { color: var(--accent); }

/* ── S02 Callout ─────────────────────────────────────────────────────────── */
.tha-inf-callout { min-height: 44px; margin-top: .5rem; }
.tha-inf-callout-inner {
  background: var(--accent-pale); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: .65rem 1rem;
  font-size: .88rem; color: var(--text-secondary); line-height: 1.65;
}
.tha-inf-callout-inner strong { color: var(--accent-dark); font-weight: 600; }
.tha-inf-callout-inner em { font-style: italic; }
[data-theme="dark"] .tha-inf-callout-inner { background: rgba(198,164,78,0.08); }
[data-theme="dark"] .tha-inf-callout-inner strong { color: var(--accent); }

/* ── S05 Union toggle ────────────────────────────────────────────────────── */
.tha-union-toggle {
  display: flex; gap: 8px; margin-bottom: 1rem; flex-wrap: wrap;
}
.tha-union-btn {
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem 1.1rem;
  font-family: inherit; font-size: .9rem; color: var(--text-secondary);
  cursor: pointer; font-weight: 600; transition: all .15s;
}
.tha-union-btn.active { border-color: var(--accent); background: var(--accent-pale); color: var(--text); }
[data-theme="dark"] .tha-union-btn.active { color: var(--accent); }

.tha-union-panel { border-radius: var(--radius); overflow: hidden; }
.tha-union-panel.hidden { display: none; }
.tha-union-panel-header {
  font-weight: 700; font-size: .9rem; padding: .6rem 1rem; margin-bottom: .5rem;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tha-union-panel-bad  { background: rgba(192,57,43,0.12);  color: #c0392b; border: 1px solid rgba(192,57,43,0.25); }
.tha-union-panel-good { background: rgba(39,174,96,0.12);  color: #27ae60; border: 1px solid rgba(39,174,96,0.25); }
[data-theme="dark"] .tha-union-panel-bad  { color: #e74c3c; }
[data-theme="dark"] .tha-union-panel-good { color: #2ecc71; }

.tha-union-stat {
  font-size: 2.5rem; font-weight: 700; text-align: center;
  padding: 1rem 0 .75rem; font-variant-numeric: tabular-nums;
}
.tha-union-stat-bad  { color: #c0392b; }
.tha-union-stat-good { color: #27ae60; }
[data-theme="dark"] .tha-union-stat-bad  { color: #e74c3c; }
[data-theme="dark"] .tha-union-stat-good { color: #2ecc71; }
.tha-union-unit {
  font-size: .875rem; font-weight: 400; color: var(--text-secondary);
  margin-left: .35rem;
}

/* ── S04 Fiscal presets ──────────────────────────────────────────────────── */
.tha-fisc-presets {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem;
}
.tha-fisc-preset {
  padding: .35rem .85rem; border-radius: 2rem; font-size: .85rem; font-weight: 500;
  cursor: pointer; border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-secondary); font-family: inherit; transition: all .15s;
  line-height: 1.4;
}
.tha-fisc-preset:hover {
  border-color: var(--accent); background: var(--accent-pale);
  color: var(--accent-dark);
}
.tha-fisc-preset.active {
  background: var(--accent-pale); border-color: var(--accent);
  color: var(--accent-dark); font-weight: 600;
}
[data-theme="dark"] .tha-fisc-preset.active { color: var(--accent); }

/* Gain readout highlight */
.tha-fisc-gain { color: #4a7c59; font-weight: 700; }
[data-theme="dark"] .tha-fisc-gain { color: #6fba8a; }
}

/* ── Reagan page ─────────────────────────────────────────────────────────── */
.rga-period-btns { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.rga-period-btn {
  padding:.35rem .85rem; border-radius:2rem; font-size:.85rem; font-weight:500;
  cursor:pointer; border:1.5px solid var(--border); background:var(--bg);
  color:var(--text-secondary); font-family:inherit; transition:all .15s;
}
.rga-period-btn:hover { border-color:var(--accent); background:var(--accent-pale); color:var(--accent-dark); }
.rga-period-btn.active { background:var(--accent-pale); border-color:var(--accent); color:var(--accent-dark); font-weight:600; }
[data-theme="dark"] .rga-period-btn.active { color:var(--accent); }

.rga-big-stat { min-height:3rem; display:flex; align-items:center; gap:.5rem; margin:.6rem 0; flex-wrap:wrap; }
.rga-big-num { font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; }
.rga-big-num.red   { color:#c0392b; }
.rga-big-num.green { color:#27ae60; }
[data-theme="dark"] .rga-big-num.red   { color:#e74c3c; }
[data-theme="dark"] .rga-big-num.green { color:#2ecc71; }
.rga-big-label { font-size:.85rem; color:var(--text-secondary); max-width:24ch; line-height:1.35; }

.rga-fisc-presets { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; }
.rga-fisc-preset {
  padding:.35rem .85rem; border-radius:2rem; font-size:.85rem; font-weight:500;
  cursor:pointer; border:1.5px solid var(--border); background:var(--bg);
  color:var(--text-secondary); font-family:inherit; transition:all .15s; line-height:1.4;
}
.rga-fisc-preset:hover { border-color:var(--accent); background:var(--accent-pale); color:var(--accent-dark); }
.rga-fisc-preset.active { background:var(--accent-pale); border-color:var(--accent); color:var(--accent-dark); font-weight:600; }
[data-theme="dark"] .rga-fisc-preset.active { color:var(--accent); }

.rga-cro-ctrl, .rga-def-ctrl {
  display:flex; gap:8px; margin-bottom:1rem; flex-wrap:wrap;
}
.rga-ctrl-btn {
  background:var(--bg-alt); border:1px solid var(--border);
  border-radius:var(--radius); padding:.5rem 1.1rem;
  font-family:inherit; font-size:.9rem; color:var(--text-secondary);
  cursor:pointer; font-weight:600; transition:all .15s;
}
.rga-ctrl-btn.active { border-color:var(--accent); background:var(--accent-pale); color:var(--text); }
[data-theme="dark"] .rga-ctrl-btn.active { color:var(--accent); }

.rga-info {
  min-height:36px; margin-top:.5rem;
  font-size:.88rem; color:var(--text-secondary); line-height:1.6;
}
.rga-info-inner {
  background:var(--accent-pale); border:1px solid var(--accent);
  border-radius:var(--radius); padding:.6rem 1rem;
  color:var(--text-secondary);
}
[data-theme="dark"] .rga-info-inner { background:rgba(198,164,78,0.08); }
.rga-fisc-ctrl { margin-bottom:.75rem; }
.rga-fisc-label { font-size:.9rem; color:var(--text-secondary); display:block; margin-bottom:.4rem; }

.rga-mis-canvas-wrap,
.rga-fisc-canvas-wrap,
.rga-cro-canvas-wrap,
.rga-def-canvas-wrap { width:100%; }
.rga-mis-canvas-wrap canvas,
.rga-fisc-canvas-wrap canvas,
.rga-cro-canvas-wrap canvas,
.rga-def-canvas-wrap canvas { width:100%; display:block; }

/* ── Heritage — bannière sticky + effet scroll ──────────────────────────── */

/* Stage : 200vh — le banner occupe les 100 premiers, le reste = "scroll travel" */
.heritage-scroll-stage {
  height: 200vh;
  position: relative;
}

/* Banner sticky : reste immobile tant qu'on scrolle dans le stage */
.heritage-banner {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.heritage-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  will-change: filter, transform;
  transform-origin: center center;
}
/* vignette subtile en haut + fondu bas vers --bg */
.heritage-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    transparent 25%,
    transparent 60%,
    var(--bg) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* overlay texte — opacité pilotée par JS */
.heritage-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: none;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
}
.heritage-banner-name {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 700;
  font-style: italic;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.heritage-banner-name-text {
  display: inline-block;
  background-image: linear-gradient(to right, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 4px;
  background-position: left bottom;
  padding-bottom: 0.12em;
  text-shadow: 0 2px 32px rgba(0,0,0,0.7);
  clip-path: inset(0 100% 0 0);
}
.heritage-banner-sub-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 1rem;
  opacity: 1;
}
.heritage-banner-sub {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.8vw, 1.7rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 20px rgba(0,0,0,0.6);
  letter-spacing: 0.04em;
}
.heritage-banner-period {
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  text-shadow: 0 1px 20px rgba(0,0,0,0.6);
  letter-spacing: 0.04em;
}
.heritage-banner-period::before {
  content: ' · ';
  color: rgba(255,255,255,0.35);
  margin: 0 0.3em;
}

/* ── Heritage pages — leader portrait in hero ──────────────────────────── */
.heritage-hero-wrap {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}
.heritage-hero-text { flex: 1; min-width: 0; }
.heritage-hero-portrait {
  flex: 0 0 240px;
  padding-top: 6px;
}
.heritage-hero-portrait img {
  width: 100%;
  display: block;
  border-radius: 5px;
  filter: grayscale(0%) sepia(0%);
  box-shadow: 0 4px 20px rgba(0,0,0,.16), 0 0 0 1px var(--border);
}
[data-theme="dark"] .heritage-hero-portrait img {
  filter: grayscale(0%) brightness(.9);
  box-shadow: 0 4px 20px rgba(0,0,0,.45), 0 0 0 1px var(--border);
}
@media (max-width: 680px) {
  .heritage-hero-portrait { flex: 0 0 150px; }
}

/* ── Back-to-top button ──────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.10);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, background .2s, color .2s, border-color .2s;
  pointer-events: none;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
[data-theme="dark"] .back-to-top {
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
@media (max-width: 680px) {
  .back-to-top { bottom: 16px; right: 16px; width: 40px; height: 40px; }
}

/* ── Milei heritage page ─────────────────────────────────────────────────── */
.mli-wip-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .75rem;
  background: rgba(198,164,78,.15);
  border: 1px solid var(--accent);
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent-dark, #9a7c2a);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
[data-theme="dark"] .mli-wip-badge {
  background: rgba(198,164,78,.12);
  color: var(--accent);
}

/* Canvas wrappers */
.mli-canvas-wrap { width: 100%; }
.mli-canvas-wrap canvas { width: 100%; display: block; }

/* Reform grid (S03) */
.mli-reform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
/* Status pill tags for reform cards */
.mli-status-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Reform flip cards */
.mli-reform-item {
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}
.mli-reform-item:focus-visible .mli-reform-inner {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.mli-reform-item.flipped .mli-reform-inner {
  transform: rotateY(180deg);
}
.mli-reform-inner {
  display: grid;
  grid-template-areas: "card";
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.mli-reform-front, .mli-reform-back {
  grid-area: card;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-height: 180px;
}
.mli-reform-front {
  background: var(--card-bg);
  border: 1px solid var(--border);
  transition: border-color .2s, box-shadow .2s;
}
.mli-reform-item:hover .mli-reform-front {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
[data-theme="dark"] .mli-reform-item:hover .mli-reform-front {
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.mli-reform-back {
  background: var(--accent-pale);
  border: 1.5px solid var(--accent);
  transform: rotateY(180deg);
}
[data-theme="dark"] .mli-reform-back { background: rgba(198,164,78,.09); }
.mli-reform-front-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.mli-reform-icon { font-size: 1.4rem; line-height: 1.2; flex-shrink: 0; }
.mli-reform-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.mli-reform-meta {
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-dark, #9a7c2a);
  letter-spacing: .02em;
}
[data-theme="dark"] .mli-reform-meta { color: var(--accent); }
.mli-reform-desc {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.mli-reform-flip-hint {
  font-size: .68rem;
  color: var(--text-muted);
  align-self: flex-end;
  margin-top: auto;
  padding-top: .2rem;
}
/* Back content */
.mli-reform-back-title {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(198,164,78,.3);
  margin-bottom: .1rem;
}
.mli-bilan-stats {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}
.mli-bilan-stat {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.mli-bilan-num {
  font-size: 1rem;
  font-weight: 800;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 56px;
}
.mli-bilan-lbl {
  font-size: .77rem;
  color: var(--text-secondary);
  line-height: 1.35;
}
.mli-bilan-note {
  font-size: .74rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
  padding-top: .3rem;
  border-top: 1px solid rgba(198,164,78,.2);
}

/* Recovery chart info box */
.mli-rec-info {
  min-height: 36px;
  margin-top: .5rem;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.mli-rec-info-inner {
  background: var(--accent-pale);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  color: var(--text-secondary);
}
[data-theme="dark"] .mli-rec-info-inner { background: rgba(198,164,78,.08); }

@media (max-width: 680px) {
  .mli-reform-grid { grid-template-columns: 1fr; }
}

/* ── Égalité des chances / résultats ────────────────────────────────────── */

/* Toggle buttons S01 */
.egl-toggle-group {
  display: flex;
  gap: .5rem;
  margin-bottom: .9rem;
  flex-wrap: wrap;
}
.egl-toggle-btn {
  padding: .45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 600;
  font-size: .88rem;
  transition: border-color .15s, background .15s, color .15s;
}
.egl-toggle-btn.active {
  border-color: var(--accent);
  background: var(--accent-pale);
  color: var(--text);
}
[data-theme="dark"] .egl-toggle-btn.active { color: var(--accent); }

/* Comparison items S01 */
.egl-compare-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: .45rem;
}
.egl-compare-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .85rem;
  border-radius: var(--radius);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--text);
}
.egl-compare-icon { font-size: .95rem; flex-shrink: 0; margin-top: .05rem; }
.egl-good { background: rgba(39,134,62,.08); }
.egl-warn { background: rgba(198,164,78,.12); }
.egl-bad  { background: rgba(192,57,43,.08); }
[data-theme="dark"] .egl-good { background: rgba(39,134,62,.14); }
[data-theme="dark"] .egl-warn { background: rgba(198,164,78,.14); }
[data-theme="dark"] .egl-bad  { background: rgba(192,57,43,.14); }

/* Clickable info box S02 + S03 */
.egl-info { min-height: 20px; margin-top: .6rem; font-size: .87rem; line-height: 1.55; }
.egl-info-inner {
  background: var(--accent-pale);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  color: var(--text-secondary);
}
[data-theme="dark"] .egl-info-inner { background: rgba(198,164,78,.08); }

/* Heckman slider + readout S03 */
.egl-heck-ctrl { margin: .6rem 0 .3rem; }
.egl-heck-label {
  font-size: .9rem;
  color: var(--text-secondary);
  display: block;
  margin-bottom: .35rem;
}
.egl-heck-readout {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: .5rem .75rem;
  background: var(--bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ── Retraite S05 — Transition widget (ret-trans-*) ── */
.ret-trans-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ret-trans-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-size: .84rem;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  font-family: var(--font-sans);
}
.ret-trans-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.ret-trans-btn:hover:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}
.ret-trans-chart-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.ret-trans-canvas {
  display: block;
  width: 100%;
}
.ret-trans-info {
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.58;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  margin-bottom: 18px;
  min-height: 1.5em;
}
.ret-trans-countries {
  margin-top: 14px;
}
[data-theme="dark"] .ret-trans-btn {
  background: var(--card-bg);
  border-color: var(--border);
  color: var(--text-secondary);
}
[data-theme="dark"] .ret-trans-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
[data-theme="dark"] .ret-trans-info {
  background: rgba(255,255,255,.04);
}

/* ── Laffer S03 — Quiz interactif (laf-quiz-*) ── */
.laf-quiz-rate-banner {
  background: var(--accent-pale);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: 14px;
  text-align: center;
}
[data-theme="dark"] .laf-quiz-rate-banner {
  background: rgba(198,164,78,.1);
}
.laf-quiz-chart-wrap {
  margin-bottom: 14px;
  transition: filter .5s ease;
  overflow: hidden;
  border-radius: var(--radius);
  text-align: center;
}
.laf-quiz-blurred {
  filter: blur(8px) brightness(.95);
  pointer-events: none;
  user-select: none;
}
.laf-quiz-question {
  text-align: center;
  padding: 8px 0 4px;
}
.laf-quiz-q-text {
  font-size: .95rem;
  color: var(--text);
  font-weight: 600;
  margin: 0 0 12px;
}
.laf-quiz-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.laf-quiz-btn {
  padding: 10px 20px;
  border-radius: 24px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  font-family: var(--font-sans);
}
.laf-quiz-btn:hover {
  border-color: var(--accent);
  background: var(--accent-pale);
  transform: translateY(-1px);
}
.laf-quiz-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* Overlay + popup */
.laf-quiz-overlay {
  position: relative;
  margin-top: 12px;
}
.laf-quiz-popup {
  background: var(--card-bg);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-md);
}
.laf-quiz-popup-text {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 12px;
}
.laf-quiz-close {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: .85rem;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
}
.laf-quiz-close:hover { opacity: .88; }
[data-theme="dark"] .laf-quiz-popup {
  background: var(--card-bg);
  border-color: var(--accent);
}

/* ══════════════════════════════════════════════════════════
   DETTE STORY — scroll-driven scrollytelling
   Scènes: sc-  |  Hero/regular/conclusion: story-
══════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────── */
.story-hero {
  min-height: 100vh;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem 4rem;
  position: relative;
  overflow: hidden;
}
.story-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(198,164,78,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.story-hero-inner {
  text-align: center;
  max-width: 860px;
  position: relative;
  z-index: 1;
}
.story-hero-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent);
  opacity: .65;
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
  transition: color .2s, opacity .2s;
}
.story-hero-back:hover { opacity: 1; }
.story-hero-eyebrow {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}
.story-hero-eyebrow-since {
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.story-hero-counter-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .2em;
  flex-wrap: wrap;
}
.story-hero-counter {
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.story-hero-unit {
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
  font-weight: 700;
  color: var(--accent);
}
.story-hero-label {
  margin-top: .75rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.story-hero-sub {
  margin-top: 2rem;
  font-size: clamp(.95rem, 2vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.65;
}
.story-hero-sub strong { color: var(--text); }
.story-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 3rem;
  padding: .8rem 1.75rem;
  border: 1.5px solid rgba(198,164,78,0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
  animation: sc-cue-bounce 2.4s ease-in-out infinite;
}
.story-scroll-cue:hover {
  border-color: var(--accent);
  background: rgba(198,164,78,0.08);
  color: #fff;
  animation-play-state: paused;
}
@keyframes sc-cue-bounce {
  0%, 100% { transform: translateY(0); }
  55% { transform: translateY(7px); }
}

/* ── Scene container (tall div = espace de scroll) ─────── */
.sc-scene {
  position: relative;
  /* height définie inline (500vh, 400vh…) */
}

/* ── Interlude / transition entre scènes ───────────────── */
.sc-interlude {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 1.5rem;
  background: var(--bg);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.sc-interlude-inner {
  text-align: center;
  max-width: min(680px, 88vw);
}
.sc-interlude-q {
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 1rem;
}
.sc-interlude-q em,
.sc-interlude-accent {
  color: var(--accent);
  font-style: normal;
}
.sc-interlude-hint {
  font-size: clamp(.9rem, 1.8vw, 1.05rem);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ── Stage (sticky = l'écran "figé" qui vit dans la scène) */
.sc-stage {
  position: sticky;
  top: var(--header-h, 64px);
  height: calc(100vh - var(--header-h, 64px));
  overflow: hidden;
  background: var(--bg);
  /* Tous les enfants sont en position absolute */
}

/* ── Watermark background number ───────────────────────── */
.sc-bg-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 52vw;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198,164,78,0.05);
  letter-spacing: -0.08em;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* ── Chapter label (top-left) ───────────────────────────── */
.sc-label {
  position: absolute;
  top: 1.75rem;
  left: 2rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  z-index: 4;
  pointer-events: none;
  will-change: opacity;
}
.sc-label-num {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.sc-label-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* ── Viz layer (canvas centered, transform driven by JS) ── */
.sc-viz {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform-origin: 50% 50%;
  z-index: 1;
}
.sc-viz canvas {
  display: block;
  border-radius: var(--radius);
  max-width: 100%;
}

/* ── Year / pct counter (bottom-center) ─────────────────── */
.sc-year-display {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  pointer-events: none;
  will-change: opacity;
}
.sc-year-num {
  font-size: clamp(4rem, 9vw, 7.5rem);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sc-year-pct {
  font-size: .85rem;
  color: var(--text-muted);
  letter-spacing: .08em;
  margin-top: .2rem;
}

/* ── Event caption (bottom-left) ────────────────────────── */
.sc-event-box {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  max-width: min(320px, 36vw);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  z-index: 4;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}
.sc-event-headline {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: .3rem;
}
.sc-event-body {
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* ── Big stat (slides in from left) ─────────────────────── */
/* Overlay centré au-dessus du graphique flouté (fin de scène) */
.sc-big-stat {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  pointer-events: none;
  will-change: opacity, transform;
  width: min(92%, 1080px);
  text-align: center;
  /* centrage : translate(-50%, -50%) appliqué via le transform JS */
}
.sc-big-stat-detail {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.sc-big-stat-sub { max-width: 720px; margin-left: auto; margin-right: auto; }
.sc-big-stat-num {
  font-size: clamp(5.5rem, 16vw, 13rem);
  font-weight: 900;
  color: #c0392b;
  letter-spacing: -.04em;
  line-height: .95;
}
.sc-big-stat-pct { font-size: .55em; }
.sc-big-stat-sub {
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: .8rem;
}
.sc-big-stat-detail {
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 1.1rem;
}

/* ── Rate badge (scene 2, top-right) ────────────────────── */
.sc-rate-badge {
  position: absolute;
  top: 1.75rem;
  right: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  z-index: 4;
  pointer-events: none;
  will-change: opacity;
}
.sc-rate-r  { color: #c0392b; }
.sc-rate-sep { color: var(--text-muted); }
.sc-rate-g  { color: #2d7a30; }

/* ── Snowball legend ─────────────────────────────────────── */
.sc-sn-legend {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  color: var(--text-muted);
  text-align: center;
  z-index: 4;
  pointer-events: none;
  white-space: nowrap;
  will-change: opacity;
}

/* ── Verdict text (scene 2, bottom) ─────────────────────── */
.sc-verdict {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: 520px;
  width: 90%;
  text-align: center;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1.25rem;
  z-index: 4;
  pointer-events: none;
  will-change: opacity;
}

/* ── Regular sections (personal + flip cards) ───────────── */
.sc-regular {
  padding: 5rem 0 6rem;
  border-top: 2px solid var(--border-light);
}
.sc-regular-alt {
  background: var(--bg-alt);
}
.sc-regular-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.sc-section-head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}
.sc-section-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.25;
}
.sc-section-lead {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}

/* ── Personal widget cards (reused from v1) ─────────────── */
.story-personal-ctrl { margin-bottom: 2rem; }
.story-personal-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--text);
  font-size: .95rem;
  margin-bottom: .75rem;
}
.story-personal-output {
  font-size: 1.15rem;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.story-personal-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.story-pcard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  text-align: center;
}
.story-pcard-accent {
  border-color: var(--accent);
  background: var(--accent-pale);
}
.story-pcard-icon { font-size: 1.5rem; margin-bottom: .5rem; }
.story-pcard-lbl {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.story-pcard-val {
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.story-pcard-sub {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .3rem;
  line-height: 1.4;
}
.story-gain { color: #c0392b; }
.story-personal-interest {
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .9rem;
  border: 1px solid var(--border-light);
}
.story-pi-label { color: var(--text-muted); }
.story-pi-val { font-size: 1.1rem; font-weight: 700; color: #c0392b; }
.story-pi-sub { color: var(--text-muted); }

/* ── Conclusion ──────────────────────────────────────────── */
.story-conclusion {
  background: var(--bg-alt);
  padding: 7rem 1.5rem;
}
.story-conclusion-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.story-concl-title {
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: 1.75rem;
}
.story-concl-text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}
.story-concl-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent);
  text-decoration: none;
  font-size: .88rem;
  border-bottom: 1px solid rgba(198,164,78,0.3);
  padding-bottom: .1em;
  transition: color .2s, border-color .2s;
}
.story-concl-link:hover { color: var(--text); border-color: var(--border); }

/* ── NYT-style scrolling text cards ──────────────────────── */
.sc-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, 88vw);
  z-index: 10;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: calc(var(--radius) + 2px);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 4px 28px rgba(0,0,0,0.13), 0 1px 6px rgba(0,0,0,0.07);
  pointer-events: none; /* don't block scroll events */
}
.sc-card-num {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
}
.sc-card-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}
.sc-card-body strong { color: var(--text); font-weight: 700; }

/* Variante gauche — pour les scènes où le visuel occupe la droite (ex: donut budget) */
.sc-card-left {
  left: 2rem;
  transform: none;
  width: min(360px, 38vw);
}
@media (max-width: 860px) {
  .sc-card-left {
    left: 50%;
    transform: translateX(-50%);
    width: min(400px, 88vw);
  }
}

/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] .sc-card {
  background: rgba(26,26,24,0.92);
  border-color: var(--border);
  border-left-color: var(--accent);
  box-shadow: 0 4px 28px rgba(0,0,0,0.40);
}
/* Dark mode: hero & conclusion keep their deep black look */
[data-theme="dark"] .story-hero  { background: #050504; }
[data-theme="dark"] .story-hero-back { color: rgba(198,164,78,0.55); opacity: 1; }
[data-theme="dark"] .story-hero-eyebrow { color: rgba(198,164,78,0.45); }
[data-theme="dark"] .story-hero-eyebrow-since { color: rgba(245,244,240,0.38); }
[data-theme="dark"] .story-hero-counter { color: #f5f4f0; }
[data-theme="dark"] .story-hero-label  { color: rgba(245,244,240,0.3); }
[data-theme="dark"] .story-hero-sub    { color: rgba(245,244,240,0.58); }
[data-theme="dark"] .story-hero-sub strong { color: rgba(245,244,240,0.88); }
[data-theme="dark"] .story-conclusion  { background: #050504; }
[data-theme="dark"] .story-concl-text  { color: rgba(245,244,240,0.6); }
[data-theme="dark"] .story-concl-link:hover { color: #f5f4f0; border-color: #f5f4f0; }
[data-theme="dark"] .sc-stage    { background: var(--bg); }
[data-theme="dark"] .sc-event-box { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .sc-rate-badge { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .sc-verdict  { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .story-pcard { background: var(--card-bg); border-color: var(--border); }
[data-theme="dark"] .story-pcard-accent { border-color: var(--accent); background: var(--accent-pale); }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 680px) {
  .sc-big-stat { width: calc(100% - 2.5rem); }
  .sc-big-stat-num { font-size: clamp(4rem, 20vw, 6.5rem); }
  .sc-event-box { max-width: calc(100vw - 4rem); }
  .sc-year-num { font-size: 3.8rem; }
  .story-personal-cards { grid-template-columns: 1fr; gap: .75rem; }
  .sc-sn-legend { white-space: normal; width: 90%; }
  .sc-label-title { display: none; }
}