/* =========================================================================
   LE DIXIÈME v2 — éditorial, accessible, rassurant
   Babylone en accent (or, sceau) — pas en décor.
   ========================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; line-height: 1.75; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; }
[hidden] { display: none !important; }

/* =========================================================================
   TOKENS
   ========================================================================= */
:root {
  /* Police */
  --f-title: "Lora", Georgia, serif;
  --f-body:  "DM Sans", system-ui, sans-serif;
  --f-ui:    "Inter", system-ui, sans-serif;

  /* Layout */
  --measure: 38rem;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 10vw, 7.5rem);
  --radius: 8px;

  /* Or de confiance — constant entre les modes (coin always lapis) */
  --lapis: #0E1A33;
}

/* ---- Mode clair : défaut ---- */
:root, [data-theme="light"] {
  --bg:        #F9F6F0;
  --bg-2:      #F2EDE3;
  --surface:   #FFFFFF;
  --surface-2: #F4EFE5;
  --ink:       #1C2B45;
  --ink-soft:  rgba(28, 43, 69, 0.70);
  --ink-faint: rgba(28, 43, 69, 0.45);
  --accent:    #9A7518;      /* or profond, contraste AA sur fond clair */
  --accent-bg: #B8902A;      /* pour le bouton, titres bigs */
  --terra:     #A04A14;
  --line:      rgba(28, 43, 69, 0.10);
  --line-gold: rgba(155, 117, 24, 0.30);
  --shadow:    0 1px 3px rgba(28,43,69,.05), 0 8px 24px -10px rgba(28,43,69,.12);
  --shadow-card: 0 1px 2px rgba(28,43,69,.04), 0 4px 16px -6px rgba(28,43,69,.10);
}

/* ---- Mode sombre ---- */
[data-theme="dark"] {
  --bg:        #111A2C;
  --bg-2:      #152030;
  --surface:   #1A2640;
  --surface-2: #1E2C48;
  --ink:       #EDE8DE;
  --ink-soft:  rgba(237, 232, 222, 0.72);
  --ink-faint: rgba(237, 232, 222, 0.45);
  --accent:    #C9A330;
  --accent-bg: #C9A330;
  --terra:     #C26040;
  --line:      rgba(201, 163, 48, 0.18);
  --line-gold: rgba(201, 163, 48, 0.30);
  --shadow:    0 1px 3px rgba(0,0,0,.25), 0 8px 24px -10px rgba(0,0,0,.40);
  --shadow-card: 0 1px 2px rgba(0,0,0,.2), 0 4px 16px -6px rgba(0,0,0,.35);
}

/* =========================================================================
   BASE
   ========================================================================= */
body {
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
  background: var(--bg);
  color: var(--ink);
  transition: background-color .4s ease, color .4s ease;
}
::selection { background: var(--accent-bg); color: #fff; }

/* =========================================================================
   TYPOGRAPHIE
   ========================================================================= */
.eyebrow {
  font-family: var(--f-ui);
  font-size: .73rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  display: block;
  margin-bottom: .5rem;
}
h1, h2, h3 {
  font-family: var(--f-title);
  line-height: 1.15;
  font-weight: 700;
}
h2 { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.8rem); }
h3 { font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem); font-weight: 600; }
p  { text-wrap: pretty; }
em { font-style: italic; }
strong { color: var(--ink); font-weight: 600; }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.wrap       { width: min(72rem, 100% - var(--gutter) * 2); margin-inline: auto; }
.measure    { max-width: var(--measure); }
.section-pad { padding-block: var(--section-y); }
section     { position: relative; }

/* Révélation au scroll (opacity discrète, transform seule animée) */
.reveal { opacity: 0; transform: translateY(18px); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Séparateur cunéiforme — discret, or */
.divider {
  display: flex; align-items: center; gap: 1rem;
  color: var(--accent); margin-block: .4rem;
}
.divider::before, .divider::after {
  content: ""; height: 1px; flex: 1;
  background: var(--line-gold);
}
.divider svg { width: 40px; height: 20px; opacity: .75; flex: none; }

/* =========================================================================
   EN-TÊTE
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem var(--gutter);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color .4s ease, border-color .4s ease;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none;
}
.brand .seal { width: 36px; height: 36px; flex: none; }
.brand-name {
  font-family: var(--f-title); font-weight: 700;
  font-size: 1.05rem; letter-spacing: .01em; color: var(--ink);
}
.brand-name .x { color: var(--accent-bg); }
.nav-links {
  display: flex; gap: 1.8rem;
  font-family: var(--f-body); font-size: .9rem;
}
.nav-links a {
  text-decoration: none; color: var(--ink-soft);
  transition: color .2s;
}
.nav-links a:hover { color: var(--ink); }

/* Sélecteur clair/sombre */
.theme-toggle {
  width: 52px; height: 28px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  position: relative; flex: none;
  transition: background .3s, border-color .3s;
}
.theme-toggle .knob {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-bg);
  display: grid; place-items: center;
  transition: transform .32s cubic-bezier(.4,1.4,.5,1);
  color: #fff;
}
[data-theme="dark"] .theme-toggle .knob { transform: translateX(24px); }
.theme-toggle svg { width: 13px; height: 13px; }
.theme-toggle .ico-sun  { display: block; }
.theme-toggle .ico-moon { display: none;  }
[data-theme="dark"] .theme-toggle .ico-sun  { display: none;  }
[data-theme="dark"] .theme-toggle .ico-moon { display: block; }

/* =========================================================================
   HERO — propre, aéré, rassurant
   ========================================================================= */
.hero {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  min-height: calc(100vh - 3.5rem); /* 3.5rem = hauteur du header sticky */
  display: flex;
  align-items: center;
}
.hero-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.4rem;
  padding-block: clamp(4.5rem, 10vw, 8rem);
  max-width: 52rem;
}
.hero-emblem {
  width: 72px; height: 72px;
  opacity: .92;
}
.hero-rule {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-bg), transparent);
  margin-inline: auto;
}
.hero h1 {
  font-size: clamp(2.8rem, 1.8rem + 5vw, 5rem);
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.04;
}
.hero-promise {
  font-family: var(--f-title);
  font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem);
  font-style: italic;
  color: var(--accent-bg);
  max-width: 30ch;
  line-height: 1.45;
}
[data-theme="dark"] .hero-promise { color: var(--accent); }
.hero-sub {
  color: var(--ink-soft);
  max-width: 44ch;
  font-size: 1.02rem;
}

.header-right { display: flex; align-items: center; gap: .9rem; }
.lead { font-size: clamp(1rem, .9rem + .4vw, 1.18rem); line-height: 1.7; color: var(--ink-soft); }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-body); font-weight: 600; font-size: .98rem;
  padding: .85rem 1.8rem; border-radius: var(--radius);
  text-decoration: none;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 4px 12px -4px rgba(28,43,69,.35);
}
.btn-primary:hover {
  background: #253552;
  box-shadow: 0 6px 18px -4px rgba(28,43,69,.45);
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-primary { background: var(--accent-bg); color: #1a1200; }

/* =========================================================================
   RICHESSE — accroche éditoriale
   ========================================================================= */
.definition { text-align: center; }
.definition .wrap { display: grid; justify-items: center; gap: 1.25rem; }
.definition h2 { max-width: 20ch; }
.definition h2 em { color: var(--accent-bg); font-style: italic; }
[data-theme="dark"] .definition h2 em { color: var(--accent); }
.definition .lead {
  max-width: 52ch; color: var(--ink-soft);
  font-size: clamp(.98rem, .9rem + .3vw, 1.12rem);
}

/* =========================================================================
   LES DEUX LOIS — préceptes clairs
   ========================================================================= */
.laws .head {
  display: grid; justify-items: center; text-align: center;
  gap: .9rem; margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.laws-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: 1fr 1fr;
}
.precept {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-bg);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-card);
}
.precept .numeral {
  display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .9rem;
}
.precept .numeral-n {
  font-family: var(--f-title); font-size: 2rem; font-weight: 700;
  color: var(--accent-bg); line-height: 1;
}
.precept .numeral-tag {
  font-family: var(--f-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}
.precept h3 { color: var(--ink); margin-bottom: .7rem; }
.precept p  { color: var(--ink-soft); }
.precept .glyph {
  float: right; width: 32px; margin: 0 0 .6rem .8rem;
  color: var(--line-gold);
}

/* =========================================================================
   ZIGGURAT
   ========================================================================= */
.zig-section .head {
  display: grid; justify-items: center; text-align: center;
  gap: .9rem; margin-bottom: clamp(2rem,5vw,3rem); max-width: 58ch; margin-inline: auto;
}
.zig-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
}
.ziggurat {
  display: grid; justify-items: center; gap: 5px; padding: .75rem 0;
}
.tier {
  --w: 100%;
  width: var(--w); min-height: 54px; padding-inline: clamp(.6rem, 1.5vw, 1.2rem);
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--line);
  color: var(--ink);
  font-family: var(--f-body); font-weight: 500;
  transition: transform .25s, box-shadow .25s, background .25s, border-color .25s;
}
.tier.summit { --w: 24%; min-height: 22px; background: var(--accent-bg); border: none; border-radius: 4px; }
.tier.s0 { --w: 100%; } .tier.s1 { --w: 88%; } .tier.s2 { --w: 70%; } .tier.s3 { --w: 52%; }
.tier.base { --w: 100%; font-family: var(--f-ui); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); background: transparent; border-color: transparent; min-height: 34px; }
.tier.step { cursor: pointer; }
.tier.step .num { font-family: var(--f-ui); font-weight: 700; color: var(--accent); font-size: .95rem; }
.tier.step:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tier.step.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
  box-shadow: 0 6px 20px -8px rgba(28,43,69,.4);
}
.tier.step.active .num { color: var(--accent-bg); }
[data-theme="dark"] .tier.step.active { background: var(--accent-bg); border-color: var(--accent-bg); color: #1a1200; }
[data-theme="dark"] .tier.step.active .num { color: var(--lapis); }

.zig-detail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.2rem);
  box-shadow: var(--shadow-card); min-height: 260px;
}
.zig-detail .step-eyebrow { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.zig-detail .step-eyebrow .num { font-family: var(--f-ui); font-weight: 700; font-size: 1.3rem; color: var(--accent-bg); }
.zig-detail h3 { color: var(--ink); margin-bottom: .75rem; }
.zig-detail p  { color: var(--ink-soft); }
.zig-detail .panel { animation: fade-up .35s ease; }
@keyframes fade-up { from { transform: translateY(8px); } to { transform: none; } }
.zig-detail ul { list-style: none; margin-top: .9rem; display: grid; gap: .5rem; }
.zig-detail li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); }
.zig-detail li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 11px; height: 8px;
  background: var(--accent-bg);
  clip-path: polygon(0 50%, 100% 12%, 100% 88%);
}

/* =========================================================================
   SIMULATEUR
   ========================================================================= */
.simulator { background: var(--bg-2); }
.sim-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.6rem); box-shadow: var(--shadow-card);
}
.sim-controls h3 { color: var(--ink); margin-bottom: 1.2rem; }
.sim-field label {
  display: block; font-family: var(--f-body); font-size: .9rem;
  color: var(--ink-soft); margin-bottom: .9rem;
}
.sim-income { font-family: var(--f-ui); font-weight: 700; color: var(--accent-bg); font-size: 1rem; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  border-radius: 999px; outline: none;
  background: linear-gradient(90deg, var(--accent-bg) var(--p,40%), var(--line) var(--p,40%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-bg); border: 3px solid var(--surface);
  box-shadow: 0 1px 6px rgba(28,43,69,.2); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent-bg); border: 3px solid var(--surface); cursor: pointer;
}
.sim-scale { display: flex; justify-content: space-between; font-family: var(--f-ui); font-size: .74rem; color: var(--ink-faint); margin-top: .5rem; }
.sim-results { display: grid; gap: .85rem; }
.sim-stat {
  display: grid; gap: .2rem; padding: 1rem 1.2rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.sim-stat.feature { background: var(--ink); border-color: var(--ink); color: var(--bg); }
[data-theme="dark"] .sim-stat.feature { background: var(--accent-bg); border-color: var(--accent-bg); color: #1a1200; }
.sim-stat .k { font-family: var(--f-ui); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.sim-stat.feature .k { color: rgba(255,255,255,.65); }
[data-theme="dark"] .sim-stat.feature .k { color: rgba(26,18,0,.6); }
.sim-stat .v { font-family: var(--f-ui); font-weight: 700; font-size: clamp(1.5rem,1.2rem+1.5vw,2.1rem); color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-stat.feature .v { color: #fff; }
[data-theme="dark"] .sim-stat.feature .v { color: #1a1200; }
.sim-note { font-size: .82rem; color: var(--ink-faint); font-style: italic; margin-top: .6rem; }

/* =========================================================================
   MON AVIS — note personnelle, chaleur
   ========================================================================= */
.tablet-section .wrap { display: grid; justify-items: center; }
.tablet {
  width: min(46rem, 100%);
  background: #B5651D;
  background: linear-gradient(145deg, #C4723A, #9A4F12);
  color: #FBF0E4;
  border-radius: 10px 10px 14px 14px / 8px 8px 18px 18px;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  box-shadow: 0 2px 0 rgba(255,255,255,.10) inset, 0 24px 48px -16px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
}
.tablet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .10; mix-blend-mode: multiply;
}
.tablet > * { position: relative; }
.tablet-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.tablet-label { display: flex; align-items: center; gap: .55rem; font-family: var(--f-body); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #FBF0E4; white-space: nowrap; }
.tablet-label svg { width: 20px; height: 20px; }
.tablet-date { font-family: var(--f-ui); font-size: .78rem; color: rgba(251,240,228,.72); }
.tablet blockquote { font-family: var(--f-title); font-size: clamp(1.05rem,.95rem+.55vw,1.3rem); font-style: italic; line-height: 1.58; color: #FBF0E4; }
.tablet .signed { margin-top: 1rem; font-family: var(--f-body); font-size: .88rem; color: rgba(251,240,228,.85); }
.tablet .disclaimer {
  margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-ui); font-size: .73rem; letter-spacing: .03em;
  padding: .38rem .75rem; border-radius: 999px;
  background: rgba(0,0,0,.15); border: 1px solid rgba(251,240,228,.2); color: rgba(251,240,228,.88);
}
.tablet .disclaimer svg { width: 13px; height: 13px; }

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.site-footer { background: var(--lapis); color: rgba(237,232,222,.80); }
.footer-inner { padding: clamp(2.5rem, 5.5vw, 4rem) var(--gutter); display: grid; gap: 1.8rem; }
.footer-top { display: flex; align-items: center; gap: .8rem; }
.footer-top .seal { width: 38px; height: 38px; }
.footer-top .brand-name { color: #D4AF37; }
.footer-top .brand-name .x { color: #D4AF37; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; }
.footer-disclaimer { max-width: 58ch; font-size: .9rem; line-height: 1.65; color: rgba(237,232,222,.68); }
.footer-disclaimer strong { color: #D4AF37; }
.footer-meta { display: grid; gap: .85rem; font-family: var(--f-body); font-size: .88rem; align-content: start; }
.footer-meta a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: rgba(237,232,222,.82); transition: color .2s; }
.footer-meta a:hover { color: #D4AF37; }
.opensource { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border: 1px solid rgba(212,175,55,.4); border-radius: 999px; width: fit-content; }
.opensource svg { width: 16px; height: 16px; }
.footer-base { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-family: var(--f-ui); font-size: .8rem; color: rgba(237,232,222,.45); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .laws-grid { grid-template-columns: 1fr; }
  .zig-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .sim-card { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .zig-detail { min-height: 0; }
}
@media (max-width: 480px) {
  .brand-name { font-size: .95rem; }
  .hero-promise { max-width: 100%; }
  .precept .glyph { display: none; }
}

/* =========================================================================
   LIEN DÉFINITION → PAGE BABYLONE
   ========================================================================= */
.definition-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-body); font-size: .9rem; font-weight: 500;
  color: var(--accent-bg); text-decoration: none;
  transition: gap .2s;
}
.definition-link:hover { gap: .75rem; }
.definition-link svg { width: 14px; height: 14px; flex: none; }

/* =========================================================================
   ACCORDÉON — 6 lois
   ========================================================================= */
.laws-more {
  display: grid; justify-items: center; gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  width: 100%;
}
.laws-toggle {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-body); font-size: .9rem; font-weight: 500;
  color: var(--ink-soft); padding: .6rem 1.4rem;
  border: 1px solid var(--line); border-radius: 999px;
  transition: color .2s, border-color .2s;
}
.laws-toggle:hover { color: var(--ink); border-color: var(--accent-bg); }
.laws-toggle svg { width: 14px; height: 14px; flex: none; transition: transform .3s; }
.laws-toggle.open svg { transform: rotate(180deg); }

.laws-extra { width: 100%; display: grid; gap: 1.5rem; }
.laws-extra-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.8rem, 2vw, 1.4rem);
  animation: fade-up .4s ease;
}
.precept-minor {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.precept-minor .numeral { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .7rem; }
.precept-minor .numeral-n { font-family: var(--f-title); font-size: 1.6rem; font-weight: 700; color: var(--accent-bg); line-height: 1; }
.precept-minor .numeral-tag { font-family: var(--f-ui); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.precept-minor h3 { color: var(--ink); margin-bottom: .5rem; font-size: 1rem; }
.precept-minor p { color: var(--ink-soft); font-size: .95rem; }

.laws-extra-footer { text-align: center; }
.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-body); font-size: .9rem; font-weight: 500;
  color: var(--accent-bg); text-decoration: none;
  transition: gap .2s;
}
.link-arrow:hover { gap: .75rem; }
.link-arrow svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 860px) {
  .laws-extra-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   PAGE ARTICLE (babylone.html)
   ========================================================================= */
.article-hero {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--line);
  display: grid; gap: 1.2rem;
}
.article-hero h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.2rem); line-height: 1.1; max-width: 22ch; }
.attribution {
  font-size: .88rem; color: var(--ink-faint); font-style: italic;
  padding: .75rem 1.1rem;
  border-left: 3px solid var(--line-gold);
  background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 56ch;
}
.article-back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-body); font-size: .88rem;
  color: var(--accent-bg); text-decoration: none;
  transition: gap .2s;
}
.article-back:hover { gap: .7rem; }
.article-back svg { width: 14px; height: 14px; flex: none; }

.article-body {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  display: grid; gap: clamp(2rem, 4vw, 3.5rem); max-width: 68ch;
}
.article-section { display: grid; gap: .9rem; }
.article-section h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.article-section h3 { font-size: 1.05rem; color: var(--ink); }
.article-section p { color: var(--ink-soft); line-height: 1.75; }
.article-section strong { color: var(--ink); font-weight: 600; }

.six-laws {
  list-style: none; display: grid; gap: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.six-laws li {
  display: grid; grid-template-columns: 2.8rem 1fr;
  gap: .75rem; align-items: start;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.six-laws li:last-child { border-bottom: none; }
.law-num { font-family: var(--f-title); font-weight: 700; font-size: 1.3rem; color: var(--accent-bg); line-height: 1.3; }
.law-body strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .2rem; }
.law-body { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
.six-laws li:nth-child(-n+2) .law-num { color: var(--accent-bg); }

.article-conclusion {
  background: var(--surface-2); border: 1px solid var(--line-gold);
  border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 1.8rem);
  font-family: var(--f-title); font-style: italic;
  font-size: clamp(1rem, .9rem + .35vw, 1.12rem);
  color: var(--ink); line-height: 1.6;
}
.article-cta {
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

/* =========================================================================
   PANEL AVIS — encart "Mon avis" dans les détails de la ziggurat
   ========================================================================= */
.panel-avis {
  margin-top: 1.2rem;
  background: linear-gradient(145deg, #C4723A, #9A4F12);
  color: #FBF0E4;
  border-radius: 6px 6px 8px 8px / 5px 5px 10px 10px;
  padding: 1rem 1.2rem 1rem;
  font-size: .88rem;
  position: relative; overflow: hidden;
}
.panel-avis::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .08; mix-blend-mode: multiply;
}
.panel-avis > * { position: relative; }
.panel-avis-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; }
.panel-avis-label { font-family: var(--f-ui); font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(251,240,228,.85); }
.panel-avis-date  { font-family: var(--f-ui); font-size: .7rem; color: rgba(251,240,228,.6); }
.panel-avis blockquote { font-family: var(--f-title); font-style: italic; line-height: 1.55; color: #FBF0E4; }
.panel-avis blockquote strong { color: #FBF0E4; font-weight: 700; }
.panel-avis-disclaimer { display: block; margin-top: .6rem; font-family: var(--f-ui); font-size: .68rem; color: rgba(251,240,228,.55); }

/* =========================================================================
   PASSER À L'ACTION — mini-simulateur de répartition
   ========================================================================= */
.action-section { background: var(--bg-2); }
.action-sim {
  display: grid; gap: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.6rem);
  box-shadow: var(--shadow-card); max-width: 52rem; margin-inline: auto;
}
.action-question { display: grid; gap: .75rem; }
.action-q-label { font-family: var(--f-title); font-weight: 600; font-size: clamp(1.1rem,.95rem+.6vw,1.3rem); color: var(--ink); }
.action-q-sub { color: var(--ink-faint); font-size: .88rem; }
.action-toggle-group { display: flex; gap: .6rem; flex-wrap: wrap; }
.action-toggle {
  padding: .55rem 1.3rem; border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--f-body); font-size: .9rem; font-weight: 500; color: var(--ink-soft);
  cursor: pointer; background: var(--surface-2);
  transition: background .2s, border-color .2s, color .2s;
}
.action-toggle.active, .action-toggle[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
[data-theme="dark"] .action-toggle.active { background: var(--accent-bg); border-color: var(--accent-bg); color: #1a1200; }
.action-amount { display: grid; gap: .5rem; }
.action-amount label { font-family: var(--f-body); font-size: .9rem; color: var(--ink-soft); }

.action-case { display: grid; gap: 1rem; }
.case-header { display: grid; gap: .25rem; }
.case-tag { font-family: var(--f-ui); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.case-desc { color: var(--ink-soft); font-size: .9rem; }
.case-bars { display: grid; gap: .75rem; }
.case-bar { display: grid; gap: .4rem; }
.bar-info { display: flex; align-items: baseline; gap: .5rem; font-family: var(--f-ui); font-size: .82rem; }
.bar-label { flex: 1; color: var(--ink); font-weight: 500; }
.bar-pct { color: var(--ink-faint); }
.bar-amount { font-weight: 700; color: var(--accent-bg); min-width: 3.5rem; text-align: right; }
.bar-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; transition: width .4s cubic-bezier(.2,.7,.2,1); }
.case-note { font-size: .85rem; color: var(--ink-faint); font-style: italic; border-left: 2px solid var(--line-gold); padding-left: .75rem; }

/* =========================================================================
   GLOSSAIRE
   ========================================================================= */
.glossaire {
  display: grid; gap: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 56rem; margin-inline: auto;
}
.glossaire-item {
  display: grid; grid-template-columns: 8rem 1fr;
  gap: .75rem; align-items: start;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.glossaire-item:last-child { border-bottom: none; }
dt {
  font-family: var(--f-ui); font-weight: 700; font-size: .9rem;
  color: var(--accent-bg); padding-top: .05em;
}
dd {
  color: var(--ink-soft); font-size: .92rem; line-height: 1.65;
}
dd em { color: var(--ink-faint); font-style: italic; }

@media (max-width: 600px) {
  .glossaire-item { grid-template-columns: 1fr; gap: .3rem; }
}

/* =========================================================================
   SIMULATEUR — sélecteur de durée
   ========================================================================= */
.sim-duration { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.sim-duration-label { font-family: var(--f-body); font-size: .88rem; color: var(--ink-soft); }
.sim-duration-btns { display: flex; gap: .4rem; }
.sim-dur-btn {
  padding: .35rem .85rem; border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--f-ui); font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.sim-dur-btn.active, .sim-dur-btn[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
[data-theme="dark"] .sim-dur-btn.active { background: var(--accent-bg); border-color: var(--accent-bg); color: #1a1200; }