/* =====================================================================
   IDEOMATCH — design system
   Signature motif: the "proximity scale" — a graduated -2..+2 axis with
   two markers (your answer / the candidate's documented position). It is
   the actual internal scale the scoring engine uses, not a decoration —
   it appears in the monogram, the methodology page, and the revelation.
   ===================================================================== */

/* ---------- Design tokens ----------
   Palette and type follow the "Editorial Civic Modernism" system: an
   institutional navy/cobalt/teal/amber language built for a non-partisan
   civic tool (see docs/stitch_ideomatch_political_compass for the source
   reference). Token names are semantic, not hue-based, so a future
   palette revision never touches component rules below. */
:root {
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-subtle: #f1f5f9;
  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-primary: #0f172a;
  --color-primary-hover: #1e293b;
  --color-primary-contrast: #ffffff;
  --color-accent: #2563eb;
  --color-accent-text: #1d4ed8;
  --color-success: #0d9488;
  --color-success-text: #0f766e;
  --color-warning: #f59e0b;
  --color-warning-text: #92400e;
  --color-focus: #2563eb;

  --font-editorial: "Iowan Old Style", Georgia, "Palatino Linotype", "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", Consolas, "Roboto Mono", "Liberation Mono", monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --border-width: 1px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  --max-width: 720px;
  --max-width-wide: 1040px;
  --max-width-narrow: 620px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0b1220;
    --color-surface: #131b2e;
    --color-surface-subtle: #1b2540;
    --color-text-primary: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-border: #263049;
    --color-border-strong: #35405c;
    --color-primary: #e2e8f0;
    --color-primary-hover: #cbd5e1;
    --color-primary-contrast: #0f172a;
    --color-accent: #60a5fa;
    --color-accent-text: #93c5fd;
    --color-success: #2dd4bf;
    --color-success-text: #5eead4;
    --color-warning: #fbbf24;
    --color-warning-text: #fcd34d;
    --color-focus: #60a5fa;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px -2px rgba(0, 0, 0, 0.4);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; }
ul, ol { padding: 0; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Base ---------- */
html { background: var(--color-background); }
body {
  font-family: var(--font-ui);
  color: var(--color-text-primary);
  background: var(--color-background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-editorial); line-height: 1.15; margin: 0 0 var(--space-4); font-weight: 700; }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-accent-text); }
a:not(.button) { text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* Numerals and measured values get the mono face throughout the product —
   it is IDEOMATCH's "instrument" register, distinct from prose. */
.figure, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* A programmatic focus target (question heading on screen transition)
   gets a quieter treatment than a form control — a thin underline rather
   than a boxed outline, so it reads as "you have arrived here" rather
   than "this is a clickable control". */
h2:focus-visible, h1:focus-visible {
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: var(--color-focus);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-text-primary);
  color: var(--color-background);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-ui);
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.container-wide {
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.rule {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-7) 0;
}

/* ---------- Logo ---------- */
/* "Prisme & Matrice d'idées" mark: a 2x2 grid of ideas on a rounded civic
   badge. Used in the header, the footer and the favicon (the favicon
   bakes the same geometry with fixed colors, since it can't see this
   page's tokens). The badge reads off --color-primary so it self-inverts
   in dark mode; the dot reads off --color-primary-contrast for the same
   reason. The four cells are the fixed brand palette, not semantic
   tokens — they are the logo's own colors, not UI state.
   The icon is sized to carry real visual weight next to the wordmark
   (not a small favicon-sized bullet) — see .logo-mark per placement. */
.monogram {
  flex-shrink: 0;
}
.monogram .badge { fill: var(--color-primary); }
.monogram .cell-a { fill: #2563eb; }
.monogram .cell-b { fill: #475569; }
.monogram .cell-c { fill: #3b82f6; }
.monogram .cell-d { fill: #38bdf8; }
.monogram .cell-dot { fill: var(--color-primary-contrast); }

/* Wordmark: "ideo" in dark ink, "match" in the interactive accent — the
   same two-tone split as the Stitch reference, on the site's existing
   editorial serif (no new font download). */
.logo-word {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-editorial);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.logo-word-ideo { color: var(--color-primary); }
.logo-word-match { color: var(--color-accent); }
.logo-tld {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.34em;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--color-accent-text);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  margin-left: 0.35em;
  vertical-align: 0.35em;
}
/* Full lockup (footer): wordmark stacked over the baseline signature. */
.logo-word-block {
  display: grid;
  gap: 0.25em;
}
.logo-signature {
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
}

/* ---------- Header ---------- */
.site-header {
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  background: var(--color-background);
}
.site-header .container-wide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.site-nav {
  min-width: 0;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-primary);
  text-decoration: none;
}
.site-brand:hover, .site-brand:focus-visible { color: var(--color-primary); }
.site-brand .logo-word { font-size: 1.65rem; }
@media (max-width: 480px) {
  .site-brand .logo-word { font-size: 1.35rem; }
}
.site-nav {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-block: var(--space-1);
  border-bottom: var(--border-width) solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}
/* The one link in the header meant as a persistent call to action, not a
   navigation item — styled as a small solid pill so it stays the visual
   anchor of the header on every page except the test itself. */
.site-nav .nav-cta {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  border-bottom: none;
}
.site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible {
  background: var(--color-primary-hover);
  color: var(--color-primary-contrast);
}
/* Small non-interactive context chip next to the logo — states which
   election the whole site currently covers. Real data, one election. */
.header-context {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
}
@media (min-width: 980px) {
  .header-context { display: inline-flex; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: var(--border-width) solid var(--color-border);
  margin-top: var(--space-9);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
}
.site-footer .container-wide {
  padding-block: var(--space-7);
  display: grid;
  gap: var(--space-6);
}
/* Below the desktop breakpoint the four blocks (brand, nav, share, meta)
   stack in one column instead of two, so the space-6 gap repeats three
   times in a row — tightened slightly here so the mobile footer doesn't
   read taller than the content needs. Desktop keeps the validated gap. */
@media (max-width: 719px) {
  .site-footer .container-wide {
    padding-block: var(--space-6);
    gap: var(--space-5);
  }
}
/* On pages with the back-to-top button, leave room under the last footer
   line so the fixed button never sits on top of it at the very bottom. */
@media (max-width: 719px) {
  .site-footer:has(~ .back-to-top) .container-wide {
    padding-bottom: calc(var(--space-6) + 44px + var(--space-3));
  }
}
@media (min-width: 720px) {
  .site-footer .container-wide {
    grid-template-columns: 1.2fr auto;
    align-items: center;
  }
}
.footer-main { display: grid; gap: var(--space-3); max-width: 40ch; }
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
  width: fit-content;
}
.footer-brand .logo-word { font-size: 1.25rem; }
.footer-disclaimer {
  max-width: 46ch;
  font-size: 0.9rem;
  margin: 0;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.9rem;
}
@media (min-width: 720px) {
  .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2) var(--space-5);
  }
}
.footer-nav a { color: var(--color-text-secondary); text-decoration: none; }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--color-text-primary); text-decoration: underline; }
.footer-meta {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.footer-share {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}
.footer-share-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.footer-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.footer-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.footer-share-button svg { width: 17px; height: 17px; }
.footer-share-button:hover, .footer-share-button:focus-visible {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.footer-share-button.is-copied {
  color: var(--color-success-text);
  border-color: var(--color-success);
}

/* ---------- Components ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  min-height: 48px;
  transition: transform 0.12s ease, background-color 0.12s ease, opacity 0.12s ease;
}
.button-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}
.button-primary:hover { background: var(--color-primary-hover); }
.button-primary:active { transform: scale(0.98); }
.button-secondary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}
.button-secondary:hover { border-color: var(--color-text-secondary); background: var(--color-surface-subtle); }
.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* ---------- Prose (content pages) ---------- */
.prose {
  max-width: var(--max-width-narrow);
  padding-block: var(--space-8) var(--space-7);
}
.prose h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: var(--space-2); }
.prose .page-dek {
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  max-width: 52ch;
  margin-bottom: var(--space-7);
}
.prose h2 {
  font-size: 1.3rem;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}
.prose h2:first-of-type { margin-top: var(--space-6); }
.prose p { max-width: 66ch; }
.prose ul { max-width: 66ch; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); padding-left: var(--space-4); position: relative; }
.prose li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-accent-text);
}
/* Plain bulleted list for "Limites de l'outil" — a bare disclaimer list
   reads better as an ordinary list than with the dash-marker treatment
   above, which is meant for prose-like list items, not short flat facts. */
.limits-list {
  list-style: disc;
  padding-left: var(--space-5);
}
.limits-list li {
  padding-left: 0;
  position: static;
}
.limits-list li::before {
  content: none;
}

/* ---------- Reading progress rail (Méthodologie) ----------
   A read-only echo of the -2..+2 proximity axis already used in the
   monogram: a thin line, a few ticks, a moving fill. It is never a
   navigation — no role, no click targets — so it stays aria-hidden.
   Vertical, only where there's genuine free margin next to the reading
   column (see the breakpoint below); a plain 2px top line everywhere
   narrower than that, never a squeezed-in sidebar. */
.reading-rail {
  display: none;
  position: fixed;
  top: 140px;
  bottom: 96px;
  width: 150px;
  pointer-events: none;
  z-index: 5;
}
@media (min-width: 1160px) {
  .reading-rail {
    display: block;
    left: calc((100vw - var(--max-width)) / 2 + var(--space-5) - 166px);
  }
}
.reading-rail-line {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.reading-rail-fill {
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
}
.reading-rail-tick {
  position: absolute;
  right: -4px;
  width: 9px;
  height: 1px;
  background: var(--color-border-strong);
  transition: background-color 120ms ease, width 120ms ease, right 120ms ease;
}
.reading-rail-tick.is-active {
  background: var(--color-accent-text);
  width: 13px;
  right: -6px;
}
.reading-rail-label {
  position: absolute;
  right: 20px;
  top: -6px;
  width: 118px;
  white-space: normal;
  line-height: 1.3;
  text-align: right;
  text-wrap: balance;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  opacity: 0;
  transition: opacity 150ms ease;
}
.reading-rail-tick.is-active .reading-rail-label { opacity: 1; }
/* prefers-reduced-motion is already handled globally (see the top of this
   file): it forces every transition-duration near-zero, so no local
   override is needed here. */

.reading-rail-h {
  display: block;
  position: sticky;
  top: 0;
  height: 2px;
  background: var(--color-border);
  margin-bottom: var(--space-6);
  z-index: 5;
}
@media (min-width: 1160px) {
  .reading-rail-h { display: none; }
}
.reading-rail-h-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Landing page ---------- */
.hero {
  padding: var(--space-9) 0 var(--space-8);
}
.hero-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); }
}
.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.4rem);
  letter-spacing: -0.01em;
}
/* Foregrounds the blind-test principle before the reader even reaches the
   tagline — a small pill, not a headline, so the official baseline above
   stays the one thing every visitor reads first. */
.hero .blind-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}
.hero .blind-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}
/* Groups the blind-test tag with the election-date chip so the countdown
   reads as hero context, not as a separate page section. */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.hero-badges .blind-badge { margin-bottom: 0; }
.hero-badges .calendar-link { font-size: 0.78rem; }
.hero .tagline {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  max-width: 46ch;
}
.hero .tagline-spirit {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.hero .cta-row {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.hero .cta-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* The scale illustration: an SVG panel showing the proximity axis at
   work, echoing the monogram at a size where the mechanism reads clearly. */
.scale-panel {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.scale-panel .scale-caption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin-top: var(--space-4);
  margin-bottom: 0;
  text-align: center;
}
.scale-illustration .axis-line { stroke: var(--color-border-strong); stroke-width: 2; }
.scale-illustration .tick { stroke: var(--color-border-strong); stroke-width: 2; }
.scale-illustration .tick-label {
  fill: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.scale-illustration .gap-line { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 3 4; opacity: 0.7; }
.scale-illustration .marker-you { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 2.5; }
.scale-illustration .marker-candidate { fill: var(--color-accent); }
.scale-illustration .marker-tag {
  fill: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
}

/* Real corpus figures, not marketing stats — every number here comes
   straight from the active dataset (candidates/questions/themes counts,
   election label), never an illustrative placeholder. */
.fact-strip {
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .fact-strip { grid-template-columns: repeat(4, 1fr); }
}
.fact-item { display: grid; gap: var(--space-1); }
.fact-number {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.fact-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* The election-date chip now lives in .hero-badges; this link is reused
   there as the discreet doorway to the exact official dates. */
.calendar-link {
  font-size: 0.82rem;
  color: var(--color-accent-text);
  text-decoration: none;
  white-space: nowrap;
}
.calendar-link:hover, .calendar-link:focus-visible { text-decoration: underline; }

/* ---------- Video ---------- */
.video-band { padding: var(--space-8) 0; }
.video-band-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 860px) {
  .video-band-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); }
}
.video-band h2 { font-size: 1.5rem; margin: 0 0 var(--space-3); }
.video-band p { color: var(--color-text-secondary); max-width: 46ch; margin: 0; }
.video-band-media {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-primary);
}
.video-band-media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--color-primary);
}
.video-band-media noscript { display: block; }

/* The homepage sections above pair `.container-wide` with a `padding: Y 0`
   shorthand that wipes its horizontal padding: below the container's max
   width the content then touches the screen edge. Restore the gutter only
   there, so the validated desktop layout (container centred at 1040px) is
   untouched. */
@media (max-width: 1087px) {
  .hero, .fact-strip, .video-band, .trust-strip { padding-inline: var(--space-5); }
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: max(var(--space-4), env(safe-area-inset-right));
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  /* visibility keeps the hidden button out of the tab order */
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s, color 0.15s ease;
}
.back-to-top.is-visible {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
.back-to-top:hover { color: var(--color-text-primary); }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- Trust strip ---------- */
.trust-strip {
  padding: var(--space-7) 0;
  border-top: var(--border-width) solid var(--color-border);
}
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  .trust-list { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
}
.trust-list li {
  padding-left: var(--space-4);
  border-left: var(--border-width) solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.review-note { display: block; margin-top: var(--space-2, 0.25rem); font-size: 0.875em; opacity: 0.85; }
.review-note[hidden] { display: none; }
.trust-list li strong {
  display: block;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  margin-bottom: var(--space-1);
}
@media (max-width: 719px) {
  .trust-list li {
    border-left: none;
    padding-left: 0;
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
  }
  .trust-list li:first-child { border-top: none; padding-top: 0; }
}

.steps-band {
  padding: var(--space-8) 0;
  background: var(--color-surface-subtle);
}
.steps {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
}
.step { display: flex; flex-direction: column; gap: var(--space-2); }
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.step h2 { font-size: 1.2rem; margin: 0 0 var(--space-2); }
.step p { color: var(--color-text-secondary); font-size: 0.95rem; margin-bottom: 0; }

/* ---------- Process diagram (methodology "quick read") ---------- */
.process-band {
  background: var(--color-surface-subtle);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-8);
}
.process-band .eyebrow { margin-bottom: var(--space-4); }
.process-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}
@media (min-width: 640px) {
  .process-flow { flex-direction: row; align-items: stretch; }
}
.process-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
@media (min-width: 640px) {
  .process-step { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-3); }
  .process-step:first-child { padding-left: 0; }
  .process-step:last-child { padding-right: 0; }
}
.process-step .step-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.process-connector {
  flex-shrink: 0;
  color: var(--color-accent);
  opacity: 0.7;
  align-self: flex-start;
  margin-left: 2px;
}
.process-connector svg { display: block; transform: rotate(90deg); }
@media (min-width: 640px) {
  .process-connector { width: 22px; height: 22px; margin-top: 2px; align-self: center; margin-left: 0; }
  .process-connector svg { transform: none; }
}
.process-band .lede {
  margin-top: var(--space-5);
  margin-bottom: 0;
  color: var(--color-text-secondary);
  max-width: 60ch;
}

/* ---------- Source hierarchy ---------- */
.source-tiers {
  list-style: none;
  margin: var(--space-5) 0 var(--space-6);
  max-width: 66ch;
  border-top: var(--border-width) solid var(--color-border);
}
.source-tier {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  align-items: baseline;
}
.source-tier .tier-rank {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-text-muted);
}
.source-tier:first-child .tier-rank { color: var(--color-accent-text); font-weight: 700; }
.source-tier .tier-body { display: flex; flex-direction: column; gap: var(--space-1); }
.source-tier .tier-label { font-weight: 600; }
.source-tier .tier-desc { color: var(--color-text-secondary); font-size: 0.92rem; }
.tier-primary-flag {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* A rare, deliberate device for IDEOMATCH's few load-bearing methodological
   commitments — not a pull-quote. Reads as a note in the margin: small mono
   label, upright text, a left accent bar. Kept scarce on purpose. */
.principle-callout {
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-subtle);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3) var(--space-5);
  max-width: 66ch;
  margin: var(--space-5) 0;
}
.principle-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-1);
}
.principle-text {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;
}

/* ---------- Scoring explainer (methodology) ----------
   Same line-and-marker language as the monogram and the reading rail: a
   sequence is a position, not a stack of boxes. The line and every dot
   share one coordinate origin per breakpoint, so they align by
   construction instead of by hand-matched offsets. */
.scoring-axis {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: var(--space-5) 0 var(--space-7);
  max-width: 66ch;
}
@media (min-width: 720px) {
  .scoring-axis { flex-direction: row; gap: var(--space-3); }
}
.scoring-axis-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: var(--color-border-strong);
}
@media (min-width: 720px) {
  .scoring-axis-line { top: 4px; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
}
.scoring-axis-node {
  flex: 1;
  position: relative;
  padding-left: var(--space-6);
}
@media (min-width: 720px) {
  .scoring-axis-node { padding-left: 0; padding-top: var(--space-6); }
}
.scoring-axis-dot {
  position: absolute;
  top: 2px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
}
@media (min-width: 720px) {
  .scoring-axis-dot { top: 0; }
}
.scoring-axis-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-1);
}
.scoring-axis-value { font-weight: 600; margin: 0; }

.compare-cards {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}
@media (min-width: 640px) {
  .compare-cards { grid-template-columns: 1fr 1fr; }
}
.compare-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.compare-card h3 {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.compare-card p { color: var(--color-text-secondary); margin: 0; font-size: 0.95rem; }
.compare-card.is-coverage h3 { color: var(--color-success-text); }

/* ---------- Quiz ---------- */
/* Short plain-language intro, in the initial HTML (readable without JS).
   app.js hides it once the visitor has started answering. */
.test-intro {
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  max-width: var(--max-width-narrow);
}
.test-intro[hidden] { display: none; }
.test-intro p {
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  color: var(--color-text-secondary);
}
.test-intro-link { font-size: 0.88rem; font-weight: 600; }
.progress-rail {
  padding-top: var(--space-4);
}
.progress-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.progress-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.progress-bar {
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

/* Two-column question layout: the question stays the visual lead, the
   aside is a fixed, neutral panel (theme, progress, a reminder that
   candidates stay masked, a link to the methodology) — never content that
   could steer an answer. Single column below 900px. */
.quiz-layout {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 900px) {
  .quiz-layout {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
    gap: var(--space-8);
  }
}
.quiz-layout .question-screen { padding: 0; max-width: none; margin-inline: 0; }
.quiz-aside {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-8);
}
.quiz-aside-card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.quiz-aside-card h2 {
  font-size: 0.95rem;
  margin: 0 0 var(--space-3);
}
.quiz-aside-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-top: var(--border-width) solid var(--color-border);
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.quiz-aside-item:first-child { border-top: none; padding-top: 0; }
.quiz-aside-item strong { color: var(--color-text-primary); }
.quiz-aside-card .quiz-aside-link {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: 0.85rem;
}

.question-screen {
  padding: var(--space-8) 0 var(--space-7);
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}
.question-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.question-prompt {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: var(--space-6);
  max-width: 26ch;
}

.choice-list {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.choice-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 3px solid transparent;
  background: var(--color-surface);
  cursor: pointer;
  min-height: 48px;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.choice-option:hover { background: var(--color-surface-subtle); }
.choice-option:has(input:checked) {
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}
.choice-option:has(input:checked) span { font-weight: 600; }
.choice-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}
.choice-option-neutral { color: var(--color-text-secondary); }
.choice-option-neutral span { font-style: italic; }

.choice-divider {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: var(--space-4) 0 var(--space-3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.importance-hint {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
  max-width: 50ch;
}

.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-7);
  gap: var(--space-4);
}
.quiz-nav-next {
  margin-left: auto;
}

/* ---------- Results ---------- */
.revelation {
  padding: var(--space-9) 0 var(--space-8);
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .revelation > * { animation: reveal-rise 0.5s ease both; }
  .revelation > *:nth-child(2) { animation-delay: 0.08s; }
  .revelation > *:nth-child(3) { animation-delay: 0.16s; }
  .revelation > *:nth-child(4) { animation-delay: 0.24s; }
  .revelation > *:nth-child(5) { animation-delay: 0.32s; }
  .revelation > *:nth-child(6) { animation-delay: 0.4s; }
  @keyframes reveal-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
.revelation-lead {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
}
.revelation-name {
  font-size: clamp(2rem, 6vw, 3rem);
  margin: var(--space-3) 0 var(--space-5);
}
.revelation-scale {
  max-width: 340px;
  margin: 0 auto var(--space-5);
}
.revelation-score {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}
.revelation-score .figure { color: var(--color-text-primary); font-size: 1.4rem; font-weight: 700; }
.revelation .metric-bar-row { max-width: 320px; margin: 0 auto var(--space-4); text-align: left; }
.revelation-note {
  max-width: 46ch;
  margin: 0 auto var(--space-7);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.revelation-caveat, .revelation-empty {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning-text);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.92rem;
}

/* Generic small metric bar — reused for both proximité and couverture so
   the two never share a color, per the product's core distinction: a
   proximity value and a coverage value must never be visually confusable. */
.metric-bar-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.metric-bar-label { font-family: var(--font-mono); white-space: nowrap; }
.metric-bar-value { font-family: var(--font-mono); font-weight: 700; color: var(--color-text-primary); white-space: nowrap; }
.metric-bar-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  overflow: hidden;
}
.metric-bar-fill { height: 100%; border-radius: var(--radius-pill); }
.metric-bar-fill.is-proximity { background: var(--color-accent); }
.metric-bar-fill.is-coverage { background: var(--color-success); }

.ranking-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}
.ranking-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-1) var(--space-4);
  align-items: start;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.ranking-rank {
  grid-row: 1 / 3;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  padding-top: 0.2em;
}
.ranking-name { font-family: var(--font-editorial); font-weight: 700; font-size: 1.05rem; }
.ranking-score { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; text-align: right; }
.ranking-metrics {
  grid-column: 2 / -1;
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.ranking-insufficient {
  grid-column: 2;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9rem;
}
.ranking-badge {
  grid-column: 2 / -1;
  justify-self: start;
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  width: fit-content;
  margin-top: var(--space-3);
}
.ranking-badge-sufficient { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success-text); }
.ranking-badge-partial { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning-text); }
.ranking-badge-insufficient { background: var(--color-surface-subtle); color: var(--color-text-muted); }
.ranking-compare {
  grid-column: 2 / -1;
  justify-self: start;
  margin-top: var(--space-3);
}

.comparison-list {
  display: grid;
  gap: var(--space-4);
  max-width: 65ch;
  margin-inline: auto;
}
/* Groups comparison rows by macro-theme — the same 8 real themes used
   throughout the site, not a new taxonomy. */
.comparison-theme-heading {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.comparison-theme-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.comparison-row {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
}
.comparison-prompt { font-size: 1rem; margin-bottom: var(--space-2); }
.comparison-agreement { font-weight: 600; font-family: var(--font-mono); }
.comparison-sources { font-size: 0.85rem; color: var(--color-text-secondary); }
/* Real source-hierarchy tier (see méthodologie) surfaced inline, instead
   of a bare link — same five tiers, same wording, no new taxonomy. */
.source-tier-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  padding: 1px var(--space-2);
  margin-right: var(--space-2);
}

.share-control {
  margin-top: var(--space-7);
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}
.share-control h2 { font-size: 1.15rem; }