/* 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); max-width: 66ch; 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; max-width: 72ch; }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { max-width: 72ch; 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; max-width: 72ch; }

/* ---------- 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); }

/* --- citations et notes de lecture (IA Candidats 2027) -------------------- */
.quote {
  margin: 18px 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius-sm);
}
.quote p {
  font-family: var(--font-prose);
  font-size: 17.5px;
  line-height: 1.6;
  margin: 0;
}
.quote cite {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-style: normal;
  color: var(--text-faint);
}
.note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
  margin-top: 10px;
  max-width: 78ch;
}

/* --- 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;
  max-width: 62ch;
}
.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; }
}

/* ---------- Page Historique : frise, cartes présidents, régularités ---------- */

.statut[data-s="vérifié"]              { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.statut[data-s="vérifié, non chiffré"] { color: var(--green); border-color: color-mix(in srgb, var(--green) 30%, transparent); opacity: .85; }
.statut[data-s="qualitatif"]           { color: var(--text-faint); border-style: dashed; }
.statut[data-s="sans objet"]           { color: var(--text-faint); border-style: dashed; }
.statut[data-s="INFÉRENCE"]            { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); }
.statut[data-s="HYPOTHÈSE"]            { color: var(--gold);   border-color: color-mix(in srgb, var(--gold) 38%, transparent); }

/* Frise de navigation : douze mandats en vignettes */
.frise {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.frise-i {
  display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 8px 10px; transition: border-color .15s, transform .15s;
}
.frise-i:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.frise-i img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 5px;
  margin-bottom: 6px; filter: grayscale(1) contrast(1.04); transition: filter .2s;
  background: var(--surface-2);
}
.frise-i:hover img { filter: grayscale(0); }
.frise-n { font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.frise-p { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.frise-t {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent);
  margin-top: 3px; font-variant-numeric: tabular-nums;
}

/* Cartes présidents */
.pdt-list { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.pdt {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; scroll-margin-top: 88px;
}
.pdt-head { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start; }
.pdt-photo {
  width: 92px; height: 115px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
}
.pdt-id h3 { margin: 2px 0 6px; font-size: 22px; letter-spacing: -.02em; }
.pdt-periode {
  margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint);
}
.pdt-taux { margin: 0 0 6px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pdt-val {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pdt-config { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.pdt-accroche {
  font-family: var(--font-prose); font-size: 16.5px; line-height: 1.66;
  color: var(--text); margin: 16px 0 14px; max-width: 78ch;
}
.pdt details.acc { margin-bottom: 0; background: var(--bg-alt); }

/* Corps des accordéons */
.hb { margin-top: 16px; }
.hb:first-child { margin-top: 4px; }
.hb h5 {
  margin: 0 0 8px; font-size: 12px; font-family: var(--font-mono); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint);
}
.hb ul { margin: 0; padding-left: 18px; }
.hb li { font-size: 14.8px; line-height: 1.66; color: var(--text-dim); margin-bottom: 5px; }
.hb-p {
  font-family: var(--font-prose); font-size: 15.8px; line-height: 1.68;
  color: var(--text-dim); margin: 16px 0 0; max-width: 76ch;
}
.hb-verdict {
  margin: 18px 0 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 15px; line-height: 1.62; color: var(--text);
  max-width: 78ch;
}
.hb-verdict .statut { margin-right: 8px; vertical-align: 1px; }

/* Régularités transversales */
.reg { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.reg h4 { margin: 0 0 8px; font-size: 17.5px; letter-spacing: -.015em; }
.reg-r {
  font-family: var(--font-prose); font-size: 16px; line-height: 1.62;
  color: var(--text-dim); margin: 0 0 14px;
}
.reg details.acc { margin-bottom: 0; background: var(--bg-alt); }

.credits { margin: 10px 0 0; padding-left: 18px; }
.credits li { font-size: 13.5px; line-height: 1.7; color: var(--text-dim); }

@media (max-width: 620px) {
  .pdt { padding: 16px 16px; }
  .pdt-head { grid-template-columns: 74px 1fr; gap: 14px; }
  .pdt-photo { width: 74px; height: 92px; }
  .pdt-id h3 { font-size: 19px; }
  .frise { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
@media print {
  details.acc > .acc-body { display: block !important; }
  .pdt { break-inside: avoid; }
}

/* Ajustements Historique */
.reg h4 { text-transform: none; letter-spacing: -.015em; color: var(--text); font-weight: 700; }
#regularites .grid-2 { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
@media (max-width: 900px) { #regularites .grid-2 { grid-template-columns: 1fr; } }
.pdt-taux:has(.statut[data-s="qualitatif"]) .pdt-val,
.pdt-taux:has(.statut[data-s="sans objet"]) .pdt-val { color: var(--text-faint); font-weight: 700; font-size: 17px; }

/* Statut : inférence signalée */
.statut[data-s="inféré, non publié"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); border-style: dashed; }

/* ---------- Justification du texte courant (fr, césure activée) ---------- */
.prose p, .prose li,
.lede,
.pdt-accroche, .hb-p, .hb li, .hb-verdict,
.reg-r, .qr .r,
.callout, .note, .scroll-hint,
.card .ia-synth, .card p, .card li,
.cta-dm-t, .footer-note, footer p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
}
/* Pas de justification là où elle crée des trous : colonnes étroites et cellules */
table td, table th, .stat-lab, .stat-unit, .frise-i, .pdt-periode, .pdt-config, .credits li { text-align: left; hyphens: manual; }
@media (max-width: 620px) {
  .prose p, .prose li, .lede, .pdt-accroche, .hb-p, .hb li, .hb-verdict, .reg-r, .qr .r, .callout, .note { text-align: left; }
}

/* ---------- Largeur homogène : une seule colonne de contenu sur tout le site ---------- */
/* Les sections "étroites" adoptent la largeur commune, et le texte courant
   remplit son conteneur au lieu d'être bridé à 62-78 caractères. */
.wrap-narrow { max-width: var(--maxw); }

.prose { font-size: 18px; line-height: 1.76; }
.prose p, .prose ul, .prose ol,
.lede,
.qr .r,
.note,
.pdt-accroche, .hb-p, .hb-verdict,
.reg-r,
.cta-dm-t,
.footer-note,
.callout,
blockquote { max-width: none; }

/* Le formulaire, la fenêtre de recherche et les légendes gardent leur largeur propre */
.form { max-width: 640px; }
.modal-box { max-width: 620px; }

/* Pas de justification dans les colonnes étroites : au-dessous d'environ 60 caractères
   par ligne, elle creuse des blancs entre les mots au lieu d'aligner proprement. */
.card p, .card li, .card .ia-synth, .gp-col li, .verdict p, .toc a, .field, .credits li {
  text-align: left; hyphens: manual;
}

/* ---------- Page Faisabilité ---------- */

.crit-grid { margin-top: 26px; }
.crit { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.crit h3 { margin: 0 0 10px; font-size: 19px; letter-spacing: -.015em; }
.crit-q { font-family: var(--font-prose); font-size: 16px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.crit-f { font-size: 13.8px; line-height: 1.62; color: var(--text-dim); margin: 0 0 14px; }
.crit details.acc { margin-bottom: 0; background: var(--bg-alt); }
.bareme { margin: 0; padding-left: 20px; }
.bareme li { font-size: 14.5px; line-height: 1.62; color: var(--text-dim); margin-bottom: 7px; }

/* Pastilles de note */
.dots { display: inline-flex; gap: 3px; align-items: center; }
.dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.dots i.on  { background: var(--ia, var(--accent)); }
.dots i.off { background: transparent; border: 1px solid var(--border); }

/* Fiches de notation */
.fs-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.fs {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; scroll-margin-top: 88px; position: relative; overflow: hidden;
}
.fs::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ia, var(--accent)); }
.fs-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.fs-rang { margin: 0 0 3px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); }
.fs-head h3 { margin: 0; font-size: 22px; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fs-ed { font-size: 13px; font-weight: 400; color: var(--text-faint); letter-spacing: 0; }
.fs-tot { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.fs-tot-v { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ia, var(--accent)); font-variant-numeric: tabular-nums; }
.fs-tot-u { font-size: 13px; color: var(--text-faint); }
.fs-body { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fs-crit { background: var(--bg-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px 16px; }
.fs-crit-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fs-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin-right: auto; }
.fs-n { font-size: 12.5px; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fs-t { margin: 0 0 12px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.fs-crit details.acc { margin-bottom: 0; background: var(--surface); }
.cit {
  font-family: var(--font-mono); font-size: 12.8px; line-height: 1.6; color: var(--text-dim);
  border-left: 2px solid var(--ia, var(--accent)); padding: 2px 0 2px 12px; margin: 4px 0 0;
  text-align: left; hyphens: manual;
}

/* Légende des configurations */
.cfg-leg { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 20px 0 18px; }
.cfg-leg > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.cfg-leg strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.cfg-leg span { font-size: 12.8px; color: var(--text-dim); line-height: 1.5; }

/* Simulateur */
.sim { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-top: 22px; }
.sim-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sim-q { margin: 0; font-size: 15px; font-weight: 600; }
.sim-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sim-btn {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-dim); transition: all .15s;
}
.sim-btn:hover { border-color: var(--accent); color: var(--text); }
.sim-btn.on { background: var(--btn-bg); border-color: var(--btn-bg); color: #fff; }
.sim-taux { font-size: 13.5px; color: var(--text-dim); margin: 0 0 18px; text-align: left; }
.sim-rows { display: flex; flex-direction: column; gap: 9px; }
.sim-row { display: grid; grid-template-columns: 96px 1fr 108px; align-items: center; gap: 14px; }
.sim-nom { font-size: 14.5px; font-weight: 600; }
.sim-bar { display: block; height: 22px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.sim-bar i {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--red));
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.sim-val { font-family: var(--font-mono); font-size: 13.5px; font-weight: 700; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.sim-foot { font-size: 12.8px; color: var(--text-faint); margin: 14px 0 0; text-align: left; }
.sim .note { margin-top: 12px; }

@media (max-width: 620px) {
  .fs-head { flex-direction: column; gap: 8px; }
  .sim-row { grid-template-columns: 78px 1fr 88px; gap: 10px; }
  .sim-nom, .sim-val { font-size: 13px; }
  .sim { padding: 16px; }
}

/* ---------- Test à l'aveugle ---------- */
.av { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; margin-top: 22px; }
.dl-theme { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.dl-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  padding: 3px 8px; border-radius: 5px; white-space: nowrap; text-transform: uppercase;
}
.dl-opts { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.dl-opt {
  position: relative; font: inherit; font-family: var(--font-prose); font-size: 16px; line-height: 1.6;
  text-align: left; cursor: pointer; color: var(--text); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 20px 18px 46px;
  transition: border-color .15s, transform .15s, background .15s;
}
.dl-opt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.dl-opt:disabled { cursor: default; opacity: .82; }
.dl-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg-alt)); opacity: 1; }
.dl-mark {
  position: absolute; left: 16px; top: 17px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px;
}
.dl-opt.on .dl-mark { color: var(--accent); border-color: var(--accent); }
.dl-rev {
  display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ia, var(--accent));
}
.dl-cle {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 14.8px; line-height: 1.6; color: var(--text-dim);
}
.av-sub { margin: 22px 0 10px; font-size: 13px; font-family: var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.av-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.av-bar { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 12px; }
.av-bn { font-size: 14px; font-weight: 600; }
.av-bt { display: block; height: 20px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.av-bt i { display: block; height: 100%; background: var(--ia, var(--accent)); border-radius: 4px; transition: width .5s cubic-bezier(.22,.61,.36,1); }
.av-bv { font-family: var(--font-mono); font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.av-recap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.av-rc {
  display: flex; flex-direction: column; gap: 2px; background: var(--bg-alt);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px 12px;
}
.av-rc-t { font-size: 11.5px; color: var(--text-faint); }
.av-rc-m { font-size: 13.5px; font-weight: 700; color: var(--ia, var(--accent)); }
@media (max-width: 620px) {
  .av { padding: 16px; }
  .dl-opt { font-size: 15px; padding: 15px 15px 15px 42px; }
  .av-bar { grid-template-columns: 74px 1fr 44px; gap: 9px; }
}

/* ---------- Journal des modifications ---------- */
.maj-list { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.maj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; scroll-margin-top: 88px; }
.maj-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.maj-date { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--text); }
.maj-ver { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.maj h3 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.015em; }
.maj-l { margin: 0; padding-left: 20px; }
.maj-l li { font-size: 15px; line-height: 1.66; color: var(--text-dim); margin-bottom: 8px; text-align: justify; hyphens: auto; }
@media (max-width: 620px) { .maj-l li { text-align: left; } }

/* ---------- Permaliens ---------- */
.lnk {
  font: inherit; font-family: var(--font-mono); font-size: .72em; font-weight: 700;
  cursor: pointer; background: none; border: 0; color: var(--text-faint);
  padding: 0 4px; margin-left: 8px; border-radius: 4px; vertical-align: middle;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
h2 .lnk, h3 .lnk { font-size: .58em; }
th .lnk { margin-left: 6px; }
.lnk:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
h2:hover .lnk, h3:hover .lnk, tr:hover .lnk, section:hover > .wrap > h2 .lnk { opacity: 1; }
.lnk:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lnk.ok { opacity: 1; color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.lnk.ok::after { content: " copié"; font-size: .82em; letter-spacing: .04em; }
@media (hover: none) { .lnk { opacity: .55; } }
@media print { .lnk { display: none; } }

/* Neuf entrées de navigation : on resserre entre 900 et 1240 px pour éviter
   que la barre ne passe à la ligne juste avant le passage au menu déroulant. */
@media (min-width: 901px) and (max-width: 1240px) {
  .nav a { padding: 7px 8px; font-size: 13.5px; }
  .brand a { font-size: 15px; }
}

/* ---------- Page Débat LCI ---------- */
.statut[data-s="PHILOSOPHIE"]     { color: var(--text-faint); border-style: dashed; }
.statut[data-s="POINT DE TENSION"]{ color: var(--red); border-color: color-mix(in srgb, var(--red) 38%, transparent); }

.qz-grid { margin-top: 24px; }
.qz { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.qz-h { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.qz-a { margin: 0 0 12px; font-size: 12.8px; color: var(--text-faint); }
.qz-q {
  margin: 0; padding: 12px 14px; border-left: 2px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-alt); font-family: var(--font-prose); font-size: 15.5px; line-height: 1.62;
  color: var(--text); font-style: italic;
}
.qz-q::before { content: "« "; } .qz-q::after { content: " »"; }

.cd-list { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.cd { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; scroll-margin-top: 88px; }
.cd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 14px; }
.cd-head h3 { margin: 0 0 4px; font-size: 23px; letter-spacing: -.02em; }
.cd-ligne { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.45; }
.cd-tot { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; justify-content: flex-end; white-space: nowrap; }
.cd-tot-v { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.cd-tot-u { font-size: 13px; color: var(--text-faint); }
.cd-tot-l { width: 100%; text-align: right; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.cd-philo { margin: 0 0 18px; font-family: var(--font-prose); font-size: 16.5px; line-height: 1.66; }
.cd-philo .statut { margin-right: 8px; vertical-align: 2px; }
.ax-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 16px; }
.ax { background: var(--bg-alt); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px 16px; }
.ax h4 { margin: 0 0 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-family: var(--font-mono); }
.ax p { margin: 0; font-size: 14.8px; line-height: 1.62; color: var(--text-dim); text-align: left; hyphens: manual; }
.cd details.acc { margin-bottom: 0; background: var(--bg-alt); }
.cd .fs-crit { background: var(--surface); }
.cd .fs-crit + .fs-crit { margin-top: 12px; }

@media (max-width: 620px) {
  .cd { padding: 16px; }
  .cd-head { flex-direction: column; gap: 10px; }
  .cd-tot { justify-content: flex-start; }
  .cd-tot-l { text-align: left; }
}

/* Dix entrées de navigation : l'en-tête peut être plus large que le contenu. */
.hdr { max-width: 1400px; }
@media (min-width: 901px) and (max-width: 1460px) {
  .nav a { padding: 7px 8px; font-size: 13.5px; }
  .brand a { font-size: 15px; }
}

/* ---------- Bannière d'accueil ---------- */
.hero-banner { position: relative; }
.hero-banner img { display: block; width: 100%; height: auto; }

/* Sous-notes détaillées des deux notes sur vingt */
.ss { margin: 0 0 14px; display: grid; gap: 7px; }
.ss-l { display: grid; grid-template-columns: minmax(0, 148px) 1fr auto; align-items: center; gap: 10px; }
.ss-t { font: 400 11.5px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.ss-b { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ss-b i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.dn.op .ss-b i { background: var(--gold); }
.ss-n { font: 700 12px var(--font-mono); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.statut[data-s="FIL DIRECTEUR"] { color: var(--text-faint); border-style: dashed; }
.dbt-pos .dbt-pt { font-size: 12px; letter-spacing: .07em; }
.qz .qz-q {
  margin: 0; padding: 12px 14px; border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-alt);
  font-family: var(--font-prose); font-size: 15.5px; line-height: 1.62; color: var(--text);
  font-style: normal; text-align: justify;
}
.qz .qz-q::before, .qz .qz-q::after { content: none; }
@media (max-width: 620px) {
  .ss-l { grid-template-columns: 1fr auto; }
  .ss-t { grid-column: 1 / -1; }
}

/* ---------- Débat LCI : avertissement d'auteur, en tête de page ---------- */
.avis-w { padding-top: 0; }
.avis {
  position: relative; margin: 0; padding: 24px 28px 26px 30px;
  border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--border));
  border-left: 4px solid var(--gold); border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
}
.avis-h {
  margin: 0 0 14px; font: 700 12px var(--font-mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold);
}
.avis p { margin: 0 0 12px; font-family: var(--font-prose); font-size: 16.5px; line-height: 1.7; text-align: justify; }
.avis p:last-child { margin-bottom: 0; }
.avis-q {
  margin-top: 20px !important; font-weight: 700; font-size: 18px !important;
  line-height: 1.5 !important; letter-spacing: -.015em; text-align: left !important;
}
.avis-q::before { content: "« "; } .avis-q::after { content: " »"; }
.avis-a { font-size: 17px !important; }
.avis-a span { color: var(--text-faint); }
@media (max-width: 620px) {
  .avis { padding: 20px 18px 22px 20px; }
  .avis p { font-size: 15.5px; }
  .avis-q { font-size: 16.5px !important; }
}

/* Noms de candidats cliquables dans les tableaux du débat */
.lnk-cand {
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-dim);
  transition: color .15s, border-color .15s;
}
.lnk-cand::after { content: " ↓"; font-size: .78em; color: var(--text-faint); }
.lnk-cand:hover, .lnk-cand:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.lnk-cand:hover::after, .lnk-cand:focus-visible::after { color: var(--accent); }

/* ============================================================
   Débat LCI : grille publiée, blocs thématiques, notes sur vingt
   Bloc restauré : il avait été effacé par erreur avec l'ancien
   bloc des zones cliquables de la bannière, qui le précédait.
   ============================================================ */

.dbt-h {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent); background: var(--accent-dim); border-radius: 4px;
  padding: 2px 6px; white-space: nowrap; flex: none;
}
.qz-s { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); text-align: justify; }

/* --- la grille --- */
.gr-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; margin: 24px 0 20px; }
.gr-col, .gr-d {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
}
.gr-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: 17px; font-weight: 700; letter-spacing: -.015em;
}
.gr-lettre {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  background: var(--accent); color: #fff; font: 800 14px var(--font-mono);
}
.gr-sur { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 400; }
.gr-m { margin: 0 0 16px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.gr-c {
  display: grid; grid-template-columns: 34px 1fr; gap: 3px 10px;
  padding: 11px 0; border-top: 1px solid var(--border-soft);
}
.gr-code {
  grid-row: span 2; font: 700 11.5px var(--font-mono); color: var(--text-faint);
  padding-top: 2px; letter-spacing: .04em;
}
.gr-t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.gr-q { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.gr-q2 { margin: 0 0 14px; font-family: var(--font-prose); font-size: 16.5px; line-height: 1.6; }
.gr-st { margin: 34px 0 0; font-size: 19px; letter-spacing: -.02em; }
.gr-d .callout { margin: 0 0 14px; font-size: 14px; }
.gr-d .prose ul { margin: 0; }
.gr-d .prose li { font-size: 14.5px; line-height: 1.6; }

/* --- l'opinion, visuellement à part --- */
.op { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)) !important; }
.gr-d.op { background: color-mix(in srgb, var(--gold) 5%, var(--surface)); }
.gr-d.op .gr-lettre { background: var(--gold); }
.statut[data-s="OPINION"]   { color: var(--gold);  border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.statut[data-s="AUDITABLE"] { color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, transparent); }

/* --- fiche candidat : quatre notes en tête --- */
.cd-scores { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cd-sc {
  display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 4px;
  background: var(--bg-alt); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 8px 12px 7px; min-width: 96px;
}
.cd-v { font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.cd-u { font-size: 12px; color: var(--text-faint); }
.cd-l { grid-column: 1 / -1; font: 400 10px var(--font-mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 2px; }
.cd-sc.op { background: color-mix(in srgb, var(--gold) 8%, var(--bg-alt)); }
.cd-sc.op .cd-v { color: var(--gold); }

/* --- blocs thématiques --- */
.dbt-pos { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.dbt-pos:first-child { border-top: 0; padding-top: 2px; }
.dbt-pt {
  display: flex; align-items: center; gap: 10px; margin: 0 0 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); font-family: var(--font-mono);
}

/* --- les deux notes sur vingt --- */
.dn {
  margin: 16px 0 0; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-alt);
}
.dn-q { margin: 0 0 10px; font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.4; }
.dn-n { display: flex; align-items: baseline; gap: 6px; margin: 0 0 12px; }
.dn-v { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.dn-u { font-size: 13px; color: var(--text-faint); }
.dn-n .statut { margin-left: 8px; }
.dn.op { background: color-mix(in srgb, var(--gold) 6%, var(--bg-alt)); }
.dn.op .dn-v { color: var(--gold); }
.dn-sig { margin: 10px 0 0; font-size: 12.5px; color: var(--text-faint); }
.dn-sig a { color: var(--text-dim); }

@media (max-width: 720px) {
  .cd-scores { justify-content: flex-start; }
  .cd-sc { min-width: 0; flex: 1 1 46%; }
  .gr-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Grille thématique : filtres, cartes de proposition, accordéons
   ================================================================ */

h3.sub {
  margin: 40px 0 6px; font-size: 18px; letter-spacing: -.02em;
  padding-top: 18px; border-top: 1px solid var(--border-soft);
}
h3.sub:first-of-type { border-top: 0; padding-top: 0; }

/* --- barre de filtres --- */
.thfilters {
  position: sticky; top: 76px; z-index: 30;
  flex-direction: column; align-items: stretch; gap: 12px;
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.fl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fl-row > label { flex: 0 0 92px; }
.fl-q input[type="search"] { flex: 1 1 220px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-th[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }
.chip-ia { border-left: 3px solid var(--ia, var(--border)); }
.chip-ia[aria-pressed="true"] { background: var(--ia); border-color: var(--ia); color: #fff; }
.chip-ia[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.th-live { font-size: 12.5px; color: var(--text-faint); margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .thfilters { position: static; }
  .fl-row > label { flex-basis: 100%; }
}

/* --- étiquette de thème --- */
.th-pill {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--text-faint); background: var(--surface-2);
  vertical-align: middle; white-space: nowrap;
}
.th-pill:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }

/* --- accordéons de sujet --- */
.th-acc-list { margin-top: 4px; }
details.th-acc { margin-bottom: 8px; }
details.th-acc > summary { padding: 16px 18px; gap: 16px; }
.th-sum-t { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.th-sum-m { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.th-cnt { font-size: 11.5px; color: var(--text-faint); font-weight: 500; white-space: nowrap; }
.th-cnt b { color: var(--green); font-size: 13px; }
.th-cnt-off b { color: var(--text-faint); }
.th-def { margin: 0 0 14px; font-size: 13.5px; color: var(--text-dim); }
.tp-lect { margin-bottom: 16px; }
@media (max-width: 720px) {
  details.th-acc > summary { flex-wrap: wrap; }
  .th-sum-m { margin-left: 0; width: 100%; }
}

/* --- carte de proposition --- */
.tp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.tp {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-alt); padding: 15px 16px 13px;
  border-top: 3px solid var(--ia, var(--border));
}
.tp-ia {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 6px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ia, var(--text-dim));
}
.tp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ia, var(--border)); flex: 0 0 auto; }
.tp-m { margin: 0 0 12px; font-size: 15px; line-height: 1.4; letter-spacing: -.01em; }
.tp-sc { margin: 0; }
.tp-l { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-soft); }
.tp-l dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding-top: 2px; }
.tp-l dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.tp-l.sc-p dt { color: var(--green); }
.tp-l.sc-a dt { color: var(--accent); }
.tp-l.sc-d dt { color: var(--red); }
.tp-src { margin: 12px 0 0; font-size: 12px; }
.tp-src a { color: var(--text-faint); }
.tp-off { background: transparent; border-style: dashed; opacity: .82; }
.tp-off.tp-absent { border-top-color: var(--border); }
.tp-abs { margin: 0; font-size: 13.5px; color: var(--text-faint); font-style: italic; }
.tp-prio { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); }
.tp-prio li { margin-bottom: 6px; }
.tp-prio strong { color: var(--text); }
.tp-etat {
  margin-left: auto; font-size: 10px; letter-spacing: .05em; padding: 2px 7px;
  border-radius: 20px; border: 1px solid var(--border); color: var(--text-faint);
  background: var(--surface); font-weight: 700;
}
.tp-etat[data-e="priorite"] { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* --- matrice de couverture --- */
.chart-mx { min-width: 640px; }
.chart-mx .mx-band { fill: var(--surface); opacity: .55; }
.chart-mx .mx-vide { stroke: var(--text-faint); stroke-width: 2; opacity: .45; }
.chart-mx .mx-n { fill: #fff; }
html[data-theme="light"] .chart-mx .mx-n { fill: #fff; }
.chart-legend-mx i { width: 20px; height: 13px; border-radius: 4px; }
.chart-legend-mx .lg-plein { background: var(--text-dim); }
.chart-legend-mx .lg-creux { background: transparent; border: 1.4px dashed var(--text-dim); }
.chart-legend-mx .lg-vide { background: var(--text-faint); height: 2px; width: 14px; border-radius: 0; }
.chart-scroll { overflow-x: auto; }

/* --- tableau des mesures groupé par sujet --- */
.tbl-th .group-row td { padding-top: 13px; padding-bottom: 11px; }
.gr-n { float: right; font-weight: 600; letter-spacing: .04em; opacity: .8; text-transform: none; }
.tbl-th tbody tr[data-th]:not(.group-row):hover th,
.tbl-th tbody tr[data-th]:not(.group-row):hover td { background: var(--surface-2); }

/* --- mesures disruptives (page Scénarios) --- */
.dz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.dz {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 18px 20px 16px;
  border-top: 3px solid var(--ia, var(--red));
}
.dz-h h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; color: var(--ia, var(--text)); }
.dz-s { margin: 3px 0 14px; font-size: 12.5px; color: var(--text-faint); }
.dz-note { margin: 0 0 14px; font-size: 12.5px; color: var(--text-dim); border-left: 2px solid var(--gold); padding-left: 12px; }
.dz-l { list-style: none; margin: 0; padding: 0; }
.dz-l li { padding: 11px 0; border-top: 1px solid var(--border-soft); }
.dz-l li:first-child { border-top: 0; padding-top: 0; }
.dz-t { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.dz-v { display: block; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }

/* --- état filtré --- */
[data-th-hidden] { display: none !important; }
.th-empty { padding: 26px 18px; text-align: center; color: var(--text-faint); font-size: 14px; }

/* --- retour en haut --- */
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  font-size: 17px; line-height: 1; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.totop.on { opacity: 1; pointer-events: auto; }
.totop:hover { color: var(--text); border-color: var(--accent); }
@media print { .totop, .thfilters { display: none !important; } }
@media print { details.th-acc > .acc-body { display: block !important; } }

/* --- couleur par sujet : une teinte stable d'une page à l'autre --- */
.th-finances    { --th: #e0b055; }
.th-travail     { --th: #55a8ff; }
.th-energie     { --th: #4ec9a5; }
.th-defense     { --th: #ef5350; }
.th-regalien    { --th: #e08a5c; }
.th-education   { --th: #8b90ff; }
.th-sante       { --th: #4dd0c1; }
.th-industrie   { --th: #b48ef5; }
.th-etat        { --th: #9aa7b8; }
.th-famille     { --th: #f28fb4; }
.th-logement    { --th: #8fbf6b; }
.th-institutions{ --th: #6fc6e8; }
html[data-theme="light"] .th-finances    { --th: #8a6110; }
html[data-theme="light"] .th-travail     { --th: #1668c4; }
html[data-theme="light"] .th-energie     { --th: #12795d; }
html[data-theme="light"] .th-defense     { --th: #c62f2b; }
html[data-theme="light"] .th-regalien    { --th: #a1521f; }
html[data-theme="light"] .th-education   { --th: #4a4fc0; }
html[data-theme="light"] .th-sante       { --th: #0f7a72; }
html[data-theme="light"] .th-industrie   { --th: #6b3fb8; }
html[data-theme="light"] .th-etat        { --th: #4f6076; }
html[data-theme="light"] .th-famille     { --th: #b03a67; }
html[data-theme="light"] .th-logement    { --th: #4a7a2c; }
html[data-theme="light"] .th-institutions{ --th: #14688a; }

.th-pill {
  color: var(--th, var(--text-faint));
  border-color: color-mix(in srgb, var(--th, var(--border)) 42%, transparent);
  background: color-mix(in srgb, var(--th, var(--surface-2)) 12%, transparent);
}
.th-pill:hover { border-color: var(--th, var(--accent)); color: var(--th, var(--accent)); }
.chip-th { border-left: 3px solid var(--th, var(--border)); }
.chip-th[aria-pressed="true"] {
  background: color-mix(in srgb, var(--th, var(--accent)) 22%, transparent);
  border-color: var(--th, var(--accent)); color: var(--text);
}
details.th-acc { border-left: 3px solid var(--th, var(--border)); }
details.th-acc .th-sum-t { color: var(--text); }
details.th-acc[open] .th-sum-t { color: var(--th, var(--text)); }
.tbl-th .group-row td { border-left: 3px solid var(--th, var(--border)); }
.tp-priorite { border-top-color: var(--gold); }

/* --- corrections d'échelle sur les cartes de proposition --- */
.tp-m { text-transform: none; letter-spacing: -.015em; color: var(--text); font-weight: 700; }
.tp-l { grid-template-columns: 118px 1fr; }
.dz-h h3 { text-transform: none; }
@media (max-width: 560px) {
  .tp-l { grid-template-columns: 1fr; gap: 2px; }
  .tp-l dt { padding-top: 0; }
}
.dz-grid { align-items: start; }
.tp-grid { align-items: start; }

/* --- schémas : défilement horizontal plutôt qu'écrasement sur petit écran --- */
.chart-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 0 4px; padding-bottom: 4px; }
.chart-poids { min-width: 560px; }
.chart-amp   { min-width: 560px; }
.chart-carte { min-width: 600px; }
.chart-scroll + .chart-legend { margin-top: 8px; }

/* --- accordéon de sujet : le marqueur reste en haut à droite sur mobile --- */
details.th-acc > summary { position: relative; padding-right: 40px; }
details.th-acc > summary::after { position: absolute; right: 18px; top: 14px; }

/* ================================================================
   Sommaire de page collant
   ================================================================ */
.chapnav {
  position: sticky; top: 58px; z-index: 90;
  background: color-mix(in srgb, var(--bg-alt) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
.chapnav .wrap { display: flex; align-items: center; gap: 16px; padding-top: 0; padding-bottom: 0; }
.chapnav-l {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-faint);
}
.chapnav-i {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin;
  padding: 7px 0; -webkit-overflow-scrolling: touch;
}
.chapnav-i a {
  white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--text-dim);
  padding: 6px 10px; border-radius: 7px; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.chapnav-i a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.chapnav-i a.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
html { scroll-padding-top: 118px; }
.thfilters { top: 112px; }
@media (max-width: 900px) {
  .chapnav-l { display: none; }
  .chapnav .wrap { padding-left: 14px; padding-right: 14px; }
}
@media print { .chapnav { display: none !important; } }

/* --- tableau des mesures : cartes empilées sur petit écran ---
   Un tableau à quatre colonnes ne se lit pas sur un téléphone. En dessous de
   760 px, chaque mesure devient une carte et l'en-tête de colonne passe en
   étiquette de la valeur. */
@media (max-width: 760px) {
  .tbl-th { overflow: visible; border: 0; background: transparent; }
  .tbl-th thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .tbl-th table, .tbl-th tbody, .tbl-th tr, .tbl-th th, .tbl-th td { display: block; width: auto; }
  .tbl-th tr[data-th]:not(.group-row) {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    margin: 0 0 10px; padding: 13px 15px; background: var(--bg-alt);
  }
  .tbl-th tr[data-th]:not(.group-row) > th {
    font-size: 15px; line-height: 1.35; letter-spacing: -.01em;
    padding: 0 0 6px; border: 0; background: none; text-align: left;
  }
  .tbl-th tr[data-th]:not(.group-row) > td {
    padding: 8px 0 0; border: 0; border-top: 1px solid var(--border-soft);
    margin-top: 8px; font-size: 13.5px; color: var(--text-dim);
  }
  .tbl-th td[data-l]::before {
    content: attr(data-l); display: block; margin-bottom: 2px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--text-faint);
  }
  .tbl-th .group-row { margin: 22px 0 10px; }
  .tbl-th .group-row td {
    border-left: 3px solid var(--th, var(--border)); border-top: 0;
    padding: 8px 12px; margin: 0; background: var(--surface-2);
  }
  .tbl-th .group-row td::before { content: none; }
  .tbl-th .group-row td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .tbl-th .gr-n { float: none; flex: 0 0 auto; }
  .tbl-th + .scroll-hint { display: none; }
}

/* Pont sortant : entrées directes vers l'autre site. */
.bridge-plus {
  margin: 14px 0 0; font-size: 14px; line-height: 1.65; color: var(--text-dim);
}
.bridge-plus a { color: var(--accent); }


/* Rendu différé des cartes de la grille thématique : elles sont nombreuses et
   de hauteur régulière, c'est le seul endroit où la mise en page peut être
   différée sans effet de bord. Volontairement pas appliqué aux accordéons ni
   aux tableaux, dont la hauteur réelle est trop variable. */
.tp-card { content-visibility: auto; contain-intrinsic-size: auto 240px; }
.dz { content-visibility: auto; contain-intrinsic-size: auto 320px; }
@media print { .tp-card, .dz { content-visibility: visible; } }


/* ============================================================
   Candidats 2027 — fiches, portraits, sources et commentaires
   ============================================================ */

/* Portraits. Toujours dimensionnés : une image sans ratio déclaré
   fait sauter la mise en page au chargement. */
.cd-ph {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 22%; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.cd-mono {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 30px; font-weight: 700;
  letter-spacing: .04em; color: var(--text-faint);
  background: var(--surface-2); border-style: dashed;
}

/* Accès aux fiches */
.cd-vs {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
.cd-v {
  display: block; color: inherit; text-decoration: none;
  transition: transform .15s, opacity .15s;
}
.cd-v:hover { text-decoration: none; transform: translateY(-2px); }
.cd-v:hover .cd-ph { border-color: var(--accent); }
.cd-v-n { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.cd-v-p { display: block; font-size: 12px; color: var(--text-faint); line-height: 1.35; }

/* Fiche */
.cd {
  margin: 0 0 26px; padding: 20px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Pas de content-visibility ici : les fiches sont hautes et de hauteur très
   inégale, et le rendu différé décale la cible des ancres quand on clique une
   vignette. La justesse du lien prime sur le coût de peinture. */
.cd-h { display: flex; gap: 18px; align-items: flex-start; }
.cd-h-ph { flex: 0 0 104px; }
.cd-h-id { flex: 1 1 auto; min-width: 0; }
.cd-n { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.25; }
.cd-num {
  display: inline-block; margin-right: 10px; padding: 1px 7px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text-faint); background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: 5px; vertical-align: 3px;
}
.cd-p { margin: 6px 0 0; font-size: 14.5px; color: var(--text-dim); }
.cd-p .statut { margin-left: 10px; }
.cd-e { margin: 8px 0 0; font-size: 14px; color: var(--text-faint); font-style: italic; }
.cd-b { margin-top: 18px; }

.cd-lab {
  margin: 20px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint);
}
.cd-lab-com { color: var(--accent); }
.cd-lab-com .statut { margin-left: 10px; }
.cd-b > .cd-lab:first-child { margin-top: 0; }

.cd-ms { display: grid; gap: 2px; }
.cd-m { padding: 9px 0; border-top: 1px solid var(--border-soft); }
.cd-m:first-child { border-top: 0; padding-top: 0; }
.cd-m-t {
  margin: 0 0 3px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--text);
}
.cd-m-x { margin: 0; font-size: 15px; line-height: 1.62; color: var(--text-dim); }
.cd-m-vide .cd-m-x { font-style: italic; }
.cd-portee {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-dim);
}

/* Renvoi vers le répertoire des sources */
.cd-srcs { display: inline; white-space: normal; }
.cd-s {
  display: inline-flex; align-items: baseline; gap: 5px; margin: 0 3px;
  padding: 1px 7px; font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid var(--accent-dim); border-radius: 5px; text-decoration: none;
  vertical-align: 1px;
}
.cd-s:hover { text-decoration: none; border-color: var(--accent); }
.cd-s-e { font-family: var(--font-ui); font-size: 10.5px; color: var(--text-faint); }

/* Commentaires sur les quatre axes */
/* Quatre axes : deux colonnes sur écran large, une seule en dessous.
   En auto-fit, la quatrième carte reste seule sur sa ligne. */
.cd-cs { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cd-cs { grid-template-columns: repeat(2, 1fr); } }
.cd-c {
  padding: 13px 15px; background: var(--bg-alt);
  border: 1px solid var(--border-soft); border-left: 3px solid var(--accent-dim);
  border-radius: var(--radius-sm);
}
.cd-c-t {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--accent);
}
.cd-c-x { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

/* Règles de lecture et axes, en tête de page */
.cd-ls, .cd-axs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 16px; }
.cd-l, .cd-ax {
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cd-l-t, .cd-ax-t { margin: 0 0 5px; font-size: 14px; font-weight: 700; }
.cd-ax-t { color: var(--accent); }
.cd-l-x, .cd-ax-x { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.cd-sl2 { margin-top: 30px; }

/* Répertoire des sources */
.cd-srcl { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 16px; }
.cd-src {
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  scroll-margin-top: 100px;
}
.cd-src:target { border-color: var(--accent); background: var(--surface-2); }
.cd-src-h { margin: 0; font-size: 13px; font-weight: 700; }
.cd-src-id {
  display: inline-block; margin-right: 8px; font-family: var(--font-mono);
  font-size: 11.5px; color: var(--accent);
}
.cd-src-t {
  margin-left: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint);
}
.cd-src-l { margin: 5px 0 3px; font-size: 14.5px; line-height: 1.5; }
.cd-src-d { margin: 0; font-size: 12.5px; color: var(--text-faint); }
.cd-ext { font-size: 11px; color: var(--text-faint); white-space: nowrap; }

/* Prompt de la méthodologie */
.cd-prompt {
  display: grid; gap: 0; margin-top: 12px; padding: 4px 18px;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
}
.cd-pr { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.cd-pr:first-child { border-top: 0; }
.cd-pr-t {
  margin: 0 0 3px; font-family: var(--font-mono); font-size: 12px;
  font-weight: 600; color: var(--accent);
}
.cd-pr-x { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }

@media (max-width: 600px) {
  .cd { padding: 15px; }
  .cd-h { gap: 13px; }
  .cd-h-ph { flex: 0 0 78px; }
  .cd-n { font-size: 18px; }
  .cd-vs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 11px; }
}

/* Mention réservée aux lecteurs d'écran : la page annonce une fois, en clair,
   que tous les liens de sources s'ouvrent dans un nouvel onglet ; la répéter
   cinquante-huit fois à l'écran n'aiderait personne. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Un champ d'auteur de Wikimedia Commons peut contenir une chaîne insécable. */
.credits li, .cd-src-l, .cd-src-d { overflow-wrap: anywhere; }

/* ============================================================
   Candidats 2027 — quatre plans à deux axes
   ============================================================ */

.lede-2 { margin: 0 0 16px; font-size: 16.5px; line-height: 1.65; color: var(--text-dim); }

/* Bascule par boutons radio : elle tient sans JavaScript et le clavier
   la parcourt nativement avec les flèches. */
.pl { margin-top: 20px; }
.pl-r { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.pl-bar {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.pl-tab {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 15px; font-size: 14.5px; font-weight: 600; line-height: 1.35;
  color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s, color .15s, background .15s;
}
.pl-tab:hover { border-color: var(--accent); color: var(--text); }
.pl-tab-n {
  flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  color: var(--text-faint); background: var(--surface-2);
  border: 1px solid var(--border-soft); border-radius: 5px;
}
.pl-p { display: none; }

#pl-r-eco:checked    ~ .pl-p[data-p="eco"],
#pl-r-social:checked ~ .pl-p[data-p="social"],
#pl-r-secu:checked   ~ .pl-p[data-p="secu"],
#pl-r-ecolo:checked  ~ .pl-p[data-p="ecolo"] { display: block; }

#pl-r-eco:checked    ~ .pl-bar label[for="pl-r-eco"],
#pl-r-social:checked ~ .pl-bar label[for="pl-r-social"],
#pl-r-secu:checked   ~ .pl-bar label[for="pl-r-secu"],
#pl-r-ecolo:checked  ~ .pl-bar label[for="pl-r-ecolo"] {
  color: var(--text); background: var(--surface-2); border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
#pl-r-eco:checked    ~ .pl-bar label[for="pl-r-eco"] .pl-tab-n,
#pl-r-social:checked ~ .pl-bar label[for="pl-r-social"] .pl-tab-n,
#pl-r-secu:checked   ~ .pl-bar label[for="pl-r-secu"] .pl-tab-n,
#pl-r-ecolo:checked  ~ .pl-bar label[for="pl-r-ecolo"] .pl-tab-n {
  color: var(--accent); border-color: var(--accent-dim);
}
#pl-r-eco:focus-visible    ~ .pl-bar label[for="pl-r-eco"],
#pl-r-social:focus-visible ~ .pl-bar label[for="pl-r-social"],
#pl-r-secu:focus-visible   ~ .pl-bar label[for="pl-r-secu"],
#pl-r-ecolo:focus-visible  ~ .pl-bar label[for="pl-r-ecolo"] {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.pl-lect { margin: 0 0 14px; font-size: 14.5px; line-height: 1.62; color: var(--text-dim); }
.plan-svg { display: block; margin: 0 auto; max-width: 100%; }
.plan-zone { fill: var(--bg-alt); stroke: var(--border); stroke-width: 1; }
.plan-axe { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 4 4; opacity: .8; }
.chart .plan-ax { fill: var(--text-dim); font-size: 11.5px; font-weight: 600; }
.chart .plan-lab {
  fill: var(--text-faint); font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}

.plan-pt { cursor: pointer; }
.plan-pt circle {
  fill: var(--surface); stroke: var(--accent); stroke-width: 1.6;
  transition: fill .12s, stroke-width .12s;
}
.chart .plan-pt text {
  fill: var(--text); font-size: 11px; font-weight: 700; letter-spacing: .02em;
  pointer-events: none;
}
.plan-pt:hover circle, .plan-pt:focus-visible circle {
  fill: var(--accent-dim); stroke-width: 2.6;
}
.plan-pt:focus-visible { outline: none; }
.plan-pt:focus-visible circle { stroke: var(--gold); }

.pl-cnt { margin: 14px 0 0; font-size: 14px; color: var(--text-dim); }
.pl-cnt strong { color: var(--text); }
.pl-abs { margin-top: 14px; }
.pl-abs-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pl-abs-c {
  padding: 5px 10px; font-size: 13px; color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: 999px; text-decoration: none;
}
.pl-abs-c:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }

@media (max-width: 640px) {
  .pl-bar { grid-template-columns: 1fr; gap: 8px; }
  .pl-tab { padding: 11px 13px; font-size: 14px; }
  /* Le plan reste lisible : on le laisse défiler plutôt que de le comprimer. */
  .pl-p .plan-svg { min-width: 560px; }
  .pl-p > .plan-svg { display: block; }
  .plan-wrap { overflow-x: auto; }
}
@media print { .pl-p { display: block !important; } }
.plan-hint { display: none; }
@media (max-width: 640px) { .plan-hint { display: block; } }