/* France Équilibre 2032 — design system
   Registre data-journalisme. Sombre par défaut, clair disponible. */

:root {
  --bg:        #071120;
  --bg-alt:    #0b1a2d;
  --surface:   #0f2138;
  --surface-2: #16304d;
  --border:    #1d3a5c;
  --border-soft:#152c47;
  --text:      #e9eff8;
  --text-dim:  #9db1cb;
  --text-faint:#8ba0ba;
  --accent:    #55a8ff;
  --accent-dim:#1e4c7d;
  --red:       #ef5350;
  --gold:      #e0b055;
  --green:     #4ec9a5;
  --btn-bg:    #1f6fc4;
  --shadow:    0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --radius:    12px;
  --radius-sm: 7px;
  --maxw:      1180px;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-prose: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html[data-theme="light"] {
  --bg:        #f6f8fb;
  --bg-alt:    #eef2f7;
  --surface:   #ffffff;
  --surface-2: #f0f4f9;
  --border:    #d5dfeb;
  --border-soft:#e5ebf3;
  --text:      #0d1c30;
  --text-dim:  #4d6683;
  --text-faint:#5c7085;
  --accent:    #1668c4;
  --accent-dim:#c7ddf5;
  --red:       #c62f2b;
  --gold:      #8a6110;
  --green:     #12795d;
  --btn-bg:    #1257a8;
  --shadow:    0 1px 2px rgba(16,40,70,.07), 0 6px 20px rgba(16,40,70,.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--btn-bg); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* ---------- Progress ---------- */
#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  z-index: 120; transition: width .1s linear;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.hdr {
  display: flex; align-items: center; gap: 20px;
  max-width: var(--maxw); margin: 0 auto; padding: 12px 24px;
}
.brand { display: flex; flex-direction: column; line-height: 1.15; flex-shrink: 0; }
.brand a { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: -.02em; font-size: 15px; }
.brand small { color: var(--text-faint); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600; }

.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a {
  color: var(--text-dim); font-size: 13.5px; font-weight: 500;
  padding: 7px 11px; border-radius: 7px; text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); font-weight: 600; }

.hdr-tools { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 58px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 10px 16px 18px; display: none; max-height: calc(100vh - 58px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; font-size: 15px; border-radius: 8px; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero-banner { border-bottom: 1px solid var(--border-soft); background: #05101d; }
.hero-banner img { width: 100%; }

.hero {
  padding: 64px 0 44px;
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(900px 340px at 12% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(700px 300px at 92% 0%, color-mix(in srgb, var(--red) 9%, transparent), transparent 70%);
}
.eyebrow {
  font-size: 11px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 14px;
}
h1 {
  font-size: clamp(30px, 5.2vw, 52px); line-height: 1.08; margin: 0 0 18px;
  letter-spacing: -.028em; font-weight: 800;
}
.lede {
  font-family: var(--font-prose); font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.62; color: var(--text-dim); margin: 0 0 8px;
}

/* ---------- Typography ---------- */
h2 { font-size: clamp(21px, 2.8vw, 27px); line-height: 1.22; letter-spacing: -.02em; margin: 0 0 16px; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 10px; font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 14px; margin: 0 0 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); }

.prose { font-family: var(--font-prose); font-size: 17.5px; line-height: 1.72; color: var(--text); }
.prose p { margin: 0 0 18px; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 18px; }
.prose li { margin-bottom: 10px; }

section { padding: 52px 0; border-top: 1px solid var(--border-soft); }
section:first-of-type { border-top: 0; }
.section-label {
  font-size: 11px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; margin-bottom: 10px;
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.card-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.card-link:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }

/* ---------- IA cards ---------- */
.ia-card { position: relative; overflow: hidden; padding-top: 24px; }
.ia-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ia-accent, var(--accent));
}
.ia-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.ia-version { font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); margin-top: 2px; }
.ia-meta { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.ia-synth { font-family: var(--font-prose); font-size: 15px; line-height: 1.6; color: var(--text-dim); margin: 14px 0 0; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; border: 1px solid var(--border);
  color: var(--text-dim); background: var(--surface-2); white-space: nowrap;
}
.badge.ok      { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); background: color-mix(in srgb, var(--green) 11%, transparent); }
.badge.warn    { color: var(--gold);  border-color: color-mix(in srgb, var(--gold) 40%, transparent);  background: color-mix(in srgb, var(--gold) 11%, transparent); }
.badge.bad     { color: var(--red);   border-color: color-mix(in srgb, var(--red) 40%, transparent);   background: color-mix(in srgb, var(--red) 11%, transparent); }
.badge.pending { color: var(--text-faint); border-style: dashed; }

.statut {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-faint);
  text-transform: uppercase; white-space: nowrap;
}
.statut[data-s="FAIT"]        { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.statut[data-s="ESTIMATION"]  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.statut[data-s="HYPOTHESE"]   { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 38%, transparent); }
.statut[data-s="PROPOSITION"] { color: var(--red); border-color: color-mix(in srgb, var(--red) 38%, transparent); }

/* ---------- Stat tiles ---------- */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
.stat-val { font-size: 27px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-unit { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.stat-lab { font-size: 12.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.4; }

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
caption { caption-side: top; text-align: left; padding: 14px 16px 0; font-size: 13px; color: var(--text-dim); }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--text);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  white-space: nowrap; border-bottom: 1px solid var(--border);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
td:first-child { font-weight: 600; }
td + td, th + th { font-variant-numeric: tabular-nums; }
.num { text-align: right; font-family: var(--font-mono); }
.scroll-hint { font-size: 12px; color: var(--text-faint); margin-top: 8px; }
@media (min-width: 820px) { .scroll-hint { display: none; } }

.cell-na { color: var(--text-faint); font-style: italic; opacity: .7; }

/* ---------- TOC ---------- */
.layout-toc { display: grid; grid-template-columns: 240px 1fr; gap: 44px; align-items: start; }
.toc { position: sticky; top: 88px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 8px; }
.toc h4 { margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block; padding: 5px 0 5px 12px; font-size: 13px; line-height: 1.4;
  color: var(--text-faint); border-left: 2px solid var(--border-soft); text-decoration: none;
}
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
@media (max-width: 1000px) { .layout-toc { grid-template-columns: 1fr; gap: 0; } .toc { display: none; } }

/* ---------- Blocks ---------- */
.callout {
  border-left: 3px solid var(--accent); background: var(--surface);
  padding: 18px 22px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 22px 0;
  font-family: var(--font-prose); font-size: 16px; line-height: 1.65;
}
.callout.warn { border-left-color: var(--gold); }
.callout.info { border-left-color: var(--accent); }

.verdict { padding: 16px 20px; border-radius: var(--radius-sm); margin: 18px 0; border: 1px solid var(--border); background: var(--surface); }
.verdict.positif { border-left: 3px solid var(--green); }
.verdict.negatif { border-left: 3px solid var(--red); }
.verdict.nuance  { border-left: 3px solid var(--gold); }
.verdict h4 { margin-bottom: 6px; }
.verdict p { margin: 0; font-family: var(--font-prose); font-size: 16px; line-height: 1.6; }

.pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; }

.gp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.gp-col h4 { margin-bottom: 10px; }
.gp-col ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: var(--text-dim); }
.gp-col li { margin-bottom: 6px; }
.gp-col.g h4 { color: var(--green); }
.gp-col.p h4 { color: var(--red); }
.gp-col.r h4 { color: var(--gold); }

/* ---------- Q/R ---------- */
.qr { border-top: 1px solid var(--border-soft); padding: 18px 0; }
.qr:first-child { border-top: 0; }
.qr .q { font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.qr .r { font-family: var(--font-prose); font-size: 16.5px; line-height: 1.68; color: var(--text-dim); margin: 0; }

/* ---------- Glossaire inline ---------- */
.gl {
  border-bottom: 1px dotted var(--accent); cursor: help; position: relative;
}
.gl:hover::after, .gl:focus::after {
  content: attr(data-def);
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  width: min(340px, 78vw); padding: 12px 14px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.5; font-weight: 400;
}

/* ---------- Comparatif ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 16px;
}
.filters label { font-size: 12px; color: var(--text-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.chip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim);
  font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px; cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
input[type="search"], select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 7px 11px; font-size: 13.5px; font-family: inherit; min-width: 180px;
}
.group-row td { background: var(--surface-2); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); }

/* ---------- Search modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: none; }
.modal.open { display: block; }
.modal-bg { position: absolute; inset: 0; background: rgba(3,10,20,.7); backdrop-filter: blur(3px); }
.modal-box {
  position: relative; max-width: 620px; margin: 10vh auto 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.modal-box input { width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 16px 18px; font-size: 16px; background: transparent; }
.modal-results { max-height: 52vh; overflow-y: auto; }
.modal-results a { display: block; padding: 11px 18px; border-bottom: 1px solid var(--border-soft); color: var(--text); text-decoration: none; }
.modal-results a:hover, .modal-results a.sel { background: var(--surface-2); text-decoration: none; }
.mr-t { font-weight: 600; font-size: 14.5px; }
.mr-p { font-size: 12px; color: var(--text-faint); }
.modal-empty { padding: 22px 18px; color: var(--text-faint); font-size: 14px; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--border); margin-top: 48px; padding: 36px 0 48px;
  background: var(--bg-alt); font-size: 13.5px; color: var(--text-dim);
}
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
footer h4 { margin-bottom: 10px; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin-bottom: 6px; }
footer a { color: var(--text-dim); }
footer a:hover { color: var(--accent); }
.footer-note { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border-soft); font-size: 12.5px; color: var(--text-faint); }

/* ---------- Charts ---------- */
.chart { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-ui); fill: var(--text-faint); font-size: 10.5px; }
.chart .axis { stroke: var(--border); stroke-width: 1; }
.chart .grid-line { stroke: var(--border-soft); stroke-width: 1; }
.chart .zero { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12.5px; color: var(--text-dim); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---------- Divers ---------- */
.attente {
  border: 1px dashed var(--border); background: transparent;
  padding: 40px 28px; border-radius: var(--radius); text-align: center; color: var(--text-dim);
}
.attente .big { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 10px; letter-spacing: -.01em; }

.dl-item {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: inherit; text-decoration: none;
}
.dl-item:hover { border-color: var(--accent); text-decoration: none; }
.dl-type {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 7px; border-radius: 4px; background: var(--surface-2); color: var(--text-faint);
  border: 1px solid var(--border); flex-shrink: 0; margin-top: 2px;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--btn-bg); color: #fff; border: 0; border-radius: 8px;
  padding: 11px 18px; font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.meta-line { font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); }
.divider { height: 1px; background: var(--border-soft); margin: 34px 0; border: 0; }

details.acc { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 10px; }
details.acc > summary { cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
details.acc > summary::after { content: "+"; color: var(--text-faint); font-size: 18px; font-weight: 400; }
details.acc[open] > summary::after { content: "−"; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc .acc-body { padding: 0 18px 18px; }

/* ---------- Print ---------- */
@media print {
  .site-header, footer, .toc, #progress, .btn-row, .filters, .modal { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .layout-toc { grid-template-columns: 1fr; }
  .card, .table-wrap { break-inside: avoid; border-color: #ccc; }
  section { padding: 18px 0; }
  a { color: #000; text-decoration: none; }
}


/* ---------- Couleurs par modèle, adaptées aux deux thèmes ----------
   Le ton de marque est conservé en sombre. En clair, une variante plus
   dense prend le relais pour rester au-dessus du seuil WCAG AA. */
.ia-chatgpt { --ia: #10a37f; }
.ia-claude  { --ia: #d97757; }
.ia-grok    { --ia: #8e9199; }
.ia-gemini  { --ia: #4285f4; }
.ia-mistral { --ia: #fa520f; }
.ia-deepseek{ --ia: #8b90ff; }
html[data-theme="light"] .ia-chatgpt { --ia: #0a6f56; }
html[data-theme="light"] .ia-claude  { --ia: #9c4321; }
html[data-theme="light"] .ia-grok    { --ia: #575b63; }
html[data-theme="light"] .ia-gemini  { --ia: #1554c0; }
html[data-theme="light"] .ia-mistral { --ia: #ab3706; }
html[data-theme="light"] .ia-deepseek{ --ia: #3f3fb5; }
.ia-accent { color: var(--ia); }
.ia-card { --ia-accent: var(--ia); }

/* Couleurs de scénario : reprennent les jetons de thème, jamais des hex figés. */
.sc1 { --sc: var(--accent); }
.sc2 { --sc: var(--red); }
.sc3 { --sc: var(--green); }
.sc-color { color: var(--sc); }
.sc-border { border-left: 3px solid var(--sc); }

/* ---------- Formulaire de contact ---------- */
.form { margin-top: 20px; max-width: 640px; }
.field { margin-bottom: 18px; }
.field label {
  display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
}
.field .opt { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--text-faint); opacity: .85; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: 15px; font-family: inherit; line-height: 1.5;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); opacity: .95; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-rgpd {
  margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: var(--text-faint);
  border-left: 2px solid var(--border); padding-left: 12px; max-width: 62ch;
}
.footer-legal { margin-top: 24px; font-size: 13px; }
.footer-legal a { color: var(--text-dim); }

/* --- pont vers l'autre site du benchmark --------------------------------- */
.bridge {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.bridge:hover { border-color: var(--accent); transform: translateY(-2px); }
.bridge-shot { display: block; background: #05101d; border-bottom: 1px solid var(--border-soft); }
.bridge-shot img { display: block; width: 100%; height: auto; }
.bridge-body { display: block; padding: 20px 26px 24px; }
.bridge-lab {
  display: block;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.bridge-t {
  display: block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--text);
}
.bridge-d {
  display: block;
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-top: 10px;
}
.bridge-go {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}
.bridge:hover .bridge-go { text-decoration: underline; }

/* --- appel vers l'accompagnement Digital Mate ----------------------------- */
/* Couleurs de la charte web Digital Mate : cyan #10B6DC sur bleu nuit #15293D.
   Le bloc reste sombre dans les deux thèmes : c'est une signature de marque,
   pas un élément de la page. */
.cta-dm { display: block; padding: 46px 0 52px; text-decoration: none; }
.cta-dm-box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 26px 30px;
  border-radius: var(--radius);
  border: 1px solid rgba(16, 182, 220, .38);
  background: linear-gradient(135deg, #15293D 0%, #0d1f31 62%, #123243 100%);
  box-shadow: 0 10px 30px rgba(4, 16, 28, .32);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cta-dm:hover .cta-dm-box {
  border-color: #10B6DC;
  box-shadow: 0 12px 34px rgba(16, 182, 220, .22);
  transform: translateY(-2px);
}
.cta-dm-logo { display: block; width: 150px; height: auto; }
.cta-dm-body { min-width: 0; }
.cta-dm-q {
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}
.cta-dm-t {
  font-family: var(--font-prose);
  font-size: 16px;
  line-height: 1.6;
  color: #c4dbe8;
  margin: 0;
}
.cta-dm-btn {
  display: inline-block;
  white-space: nowrap;
  padding: 12px 20px;
  border-radius: 8px;
  background: #10B6DC;
  color: #062230;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.cta-dm:hover .cta-dm-btn { background: #3ecdf0; }
@media (max-width: 820px) {
  .cta-dm-box { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .cta-dm-btn { justify-self: start; }
}


/* ---------------------------------------------------------------- figures et grille thématique */
.fig { margin: 22px 0 0; }
.fig img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff;
}
.fig-dark img { background: transparent; }
.fig figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--text-faint);
}
.th-acc > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
.th-sum-t { font-weight: 700; }
.th-sum-m { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.th-cnt {
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}
.th-cnt b { color: var(--text); }
.th-cnt-off { color: var(--text-faint); }
.th-def { margin: 0 0 14px; font-size: 14.5px; color: var(--text-faint); }
.tp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px 18px;
}
.tp-card h4 { margin: 0 0 4px; color: var(--text); font-size: 13.5px; }
.tp-sous { margin: 0 0 10px; font-size: 12.5px; color: var(--text-faint); }
.tp-card ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.tp-card li + li { margin-top: 6px; }
.tp-p { color: var(--text-faint); font-style: italic; }
.tp-abs { color: var(--text-faint); list-style: none; margin-left: -18px; }
.tp-card-p { border-style: dashed; }
.tp-card-off { opacity: .72; }
.tp-lien { margin: 12px 0 0; font-size: 13px; }
.tp-lect { margin: 0 0 16px; }
@media print { .fig img { border: none; } }


/* ---------------------------------------------------------------- graphiques SVG de la page Dette */
.chart-tall { min-height: 260px; }
.chart .band { fill: var(--bg-alt); opacity: .85; }
.chart .band-lab { fill: var(--text-faint); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.chart .choc { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .85; }
.chart .choc-lab { fill: var(--accent); font-size: 10px; font-weight: 700; }
.chart .lab-strong { fill: var(--text); font-size: 11.5px; font-weight: 700; }
.chart .val { font-size: 11.5px; font-weight: 700; }
.chart .note-in { fill: var(--text-faint); font-size: 10px; font-style: italic; }
.chart .ax-lab { fill: var(--text-faint); font-size: 10.5px; }
.chart .connect { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .brace { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.chart .hl { fill: var(--accent); opacity: .09; }
.fig-svg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px 16px; }
.fig-svg figcaption { margin-top: 12px; }
.fig-dl { white-space: nowrap; }
.fig-sub { margin: 10px 0 0; font-size: 12.5px; color: var(--text-faint); }
.chart-legend .i-dash { height: 0; border-top: 2px dashed var(--accent); background: none !important; }

/* ---------------------------------------------------------------- journal des modifications */
.maj-list { display: grid; gap: 16px; margin-top: 20px; }
.maj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 22px; }
.maj-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.maj-date { font-size: 13px; font-weight: 700; color: var(--text); }
.maj-ver { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.maj-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; border: 1px solid var(--border); color: var(--text-dim);
}
.maj-badge.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.maj-badge.warn { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 38%, transparent); }
.maj-badge.info { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.maj h3 { margin: 0 0 10px; font-size: 18px; }
.maj-l { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.68; color: var(--text-dim); }
.maj-l li + li { margin-top: 8px; }

/* ---------------------------------------------------------------- rendu différé des cartes
   Les cartes de la grille thématique sont nombreuses et de hauteur régulière :
   c'est le seul endroit où différer la mise en page est sans effet de bord.
   Volontairement PAS appliqué aux corps d'accordéon ni aux tableaux, dont la
   hauteur réelle est trop variable pour une taille de réserve fiable. */
.tp-card { content-visibility: auto; contain-intrinsic-size: auto 240px; }
@media print { .tp-card { content-visibility: visible; } }

.chart .sub { fill: var(--text-faint); font-size: 9.5px; }

/* ---------------------------------------------------------------------------
   Page Dette — candidats 2027 : fiches, matrice faisabilité/ambition,
   bloc méthodologie. Aucune couleur en dur : tout passe par les variables,
   la section reste lisible dans les deux thèmes.
   --------------------------------------------------------------------------- */

.sub-h { font-size: 20px; letter-spacing: -.02em; margin: 34px 0 14px; }

.cand-grid { margin-top: 18px; align-items: start; }
.card.cand { display: flex; flex-direction: column; gap: 12px; }
.cand-tete { display: flex; align-items: center; gap: 14px; }
.cand-id { min-width: 0; }
.cand-tete h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.cand-parti { margin: 3px 0 0; font-size: 13px; color: var(--text-dim); }
.cand-statut { color: var(--text-faint); }
.cand-sep { color: var(--border); }

.cand-mono,
.cand-photo {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2);
}
.cand-mono {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; letter-spacing: -.04em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cand-photo { object-fit: cover; }

.cand-etat { margin: 0; font-size: 13.5px; color: var(--text-faint); font-style: italic; }
.cand-mesures { margin: 0; padding-left: 0; list-style: none; }
.cand-mesures li {
  font-family: var(--font-prose); font-size: 16px; line-height: 1.62;
  color: var(--text); padding: 9px 0; border-top: 1px solid var(--border-soft);
}
.cand-champ {
  display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 3px;
}
.cand-limite {
  margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--text-dim);
  border-left: 2px solid var(--border); padding-left: 12px;
}
.cand-src { margin-top: auto; padding-top: 4px; }
.cand-src-t {
  margin: 0 0 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-faint);
}
.cand-src ul { margin: 0; padding: 0; list-style: none; }
.cand-src li { font-size: 12.5px; line-height: 1.62; margin: 0 0 2px; }
.cand-src a { color: var(--text-dim); }
.cand-src a:hover { color: var(--accent); }
.nt { font-size: .82em; color: var(--text-faint); white-space: nowrap; }

.callout.commentaire { border-left-color: var(--accent); }
.callout.commentaire p {
  font-family: var(--font-prose); font-size: 17px; line-height: 1.7;
  margin: 0 0 12px;
}
.callout.commentaire p:last-child { margin-bottom: 0; }
.callout.commentaire .sig {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px;
}

.matrice-wrap { margin: 22px 0 0; }
.matrice { width: 100%; height: auto; display: block; max-width: 100%; }

.prompt-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 20px 14px; margin-top: 8px;
}
.pr-bloc { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.pr-bloc:first-child { border-top: 0; }
.pr-cle {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent);
}
.pr-val {
  margin: 0; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75;
  color: var(--text); white-space: normal;
}
.attribution { margin-top: 16px; font-size: 13px; color: var(--text-dim); }

@media (max-width: 560px) {
  .cand-mono, .cand-photo { width: 48px; height: 48px; }
  .cand-tete h3 { font-size: 16.5px; }
}

.matrice-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.matrice-wrap .scroll-hint { display: none; }
@media (max-width: 720px) {
  .matrice { min-width: 640px; }
  .matrice-wrap .scroll-hint { display: block; }
}

/* Page Dette : deux portes d'entrée en tête de page, matrice cliquable. */

/* Les deux portes ouvrent la page, avant le titre : elles doivent respirer
   sans repousser le h1 hors du premier écran. */
.parcours { padding: 26px 0 22px; border-bottom: 1px solid var(--border-soft); }
.parcours + .hero { padding-top: 34px; }
.parcours-grid { margin-top: 16px; }
.porte { display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 22px; }
.porte-eyebrow {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.porte-titre { margin: 0; font-size: 24px; letter-spacing: -.025em; line-height: 1.2; }
.porte-texte {
  margin: 0; font-family: var(--font-prose); font-size: 16.5px; line-height: 1.66;
  color: var(--text-dim);
}
.porte-action {
  margin: 6px 0 0; font-size: 13.5px; font-weight: 600; color: var(--accent);
}
.porte:hover .porte-action { text-decoration: underline; }

.matrice a { cursor: pointer; }
.matrice a circle { transition: fill .15s ease, stroke-width .15s ease; }
.matrice a:hover circle,
.matrice a:focus-visible circle { fill: var(--accent-dim); stroke-width: 3; }
.matrice a:focus { outline: none; }
.matrice a:focus-visible circle { stroke: var(--gold); }
@media (prefers-reduced-motion: reduce) { .matrice a circle { transition: none; } }

/* Fiche atteinte depuis la matrice : sans repère, on arrive au bon endroit
   sans savoir lequel des six cartes visibles est la bonne. */
.card.cand:target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* Sur mobile, deux cartes pleines avant le titre repoussent le h1 hors du
   premier écran. Les portes deviennent deux lignes compactes : le résumé
   disparaît, la section qu'il décrit est juste en dessous sur la même page. */
@media (max-width: 600px) {
  .parcours { padding: 16px 0 14px; }
  .parcours-grid { gap: 10px; }
  .porte { padding: 15px 18px; gap: 3px; }
  .porte-titre { font-size: 19px; }
  .porte-texte { display: none; }
  .porte-action { margin-top: 4px; font-size: 12.5px; }
  .parcours + .hero { padding-top: 26px; }
}

/* Une rangée de DEUX cartes dans une grille auto-fit crée trois colonnes et
   laisse la troisième vide : le vide saute aux yeux depuis que le texte va
   jusqu'au bord. Quand la grille ne contient que deux enfants, deux colonnes
   égales. Les grilles plus fournies (les dix-huit fiches) gardent leur flux. */
@media (min-width: 760px) {
  .grid-2:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
}


/* ---------------------------------------------------------------- page Dette : trajectoires 2032 */
.statut[data-s="INFERENCE"] { color: var(--text-dim); border-color: color-mix(in srgb, var(--text-dim) 38%, transparent); }
.statut[data-s="OPINION"]   { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 38%, transparent); }
.statut[data-s="RECOUPER"]  { color: var(--red); border-color: color-mix(in srgb, var(--red) 38%, transparent); }
.statuts p { display: block; margin: 0 0 14px; }
.statuts .statut { margin-right: 8px; vertical-align: 1px; }
.source-video p { margin: 0 0 10px; }
.source-video p:last-child { margin-bottom: 0; }
.source-video a { font-weight: 600; }
.scen-verif { font-size: 13.5px; color: var(--text-faint); }
.scen-grid { display: grid; gap: 16px; margin-top: 18px; }
.scen-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--sc, var(--accent));
  border-radius: var(--radius-sm); padding: 20px 22px;
}
.scen-card header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.scen-card h3 { margin: 0; font-size: 17px; color: var(--sc, var(--text)); }
.scen-prob { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.scen-chiffres { margin: 6px 0 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); }
.scen-card p.scen-recit, .scen-card p.scen-cond, .scen-card p.scen-sig {
  font-family: var(--font-prose); font-size: 16.5px; line-height: 1.68;
  color: var(--text-dim); margin: 0 0 10px;
}
.scen-card p.scen-sig { margin-bottom: 0; }
@media (min-width: 900px) { .scen-grid { grid-template-columns: repeat(2, 1fr); } }