/* ==========================================================================
   PRINCIPES SOUS TENSION — DIRECTION GRAPHIQUE
   Modifiez principalement les variables :root pour changer l'identité visuelle.
   ========================================================================== */

:root {
  --bg: #f4efe6;
  --paper: #fbf8f2;
  --paper-strong: #ffffff;
  --ink: #1c2528;
  --muted: #677071;
  --line: #d8d1c6;
  --line-strong: #bdb5a8;
  --accent: #315f5d;
  --accent-deep: #244b49;
  --accent-soft: #dce9e6;
  --accent-faint: #edf4f2;
  --warm-soft: #eee4d7;
  --shadow: 0 14px 40px rgba(36, 43, 43, 0.06);
  --radius: 22px;
  --radius-small: 14px;
  --content: 760px;
  --content-wide: 1040px;
  --header-h: 64px;
  --ease: 220ms cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }

html {
  /* Pas de scroll-behavior: smooth ici. Posee sur html, la propriete anime
     AUSSI les corrections de defilement declenchees par le navigateur
     (ancrage, mise au point d'un champ, retour arriere) : ces mouvements
     involontaires deviennent alors visibles et donnent une impression
     d'instabilite. Le defilement fluide voulu est demande explicitement
     par app.js, cas par cas. */
  background: var(--bg);
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(49,95,93,.035), transparent 32rem),
    radial-gradient(circle at 88% 34%, rgba(98,79,61,.025), transparent 30rem),
    var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }
button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

a { color: inherit; }

.skip-link {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  transition: top var(--ease);
}
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr minmax(180px, 340px) 1fr;
  align-items: center;
  gap: 18px;
  padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
  background: rgba(244,239,230,.90);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(120,110,95,.10);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--ease), transform var(--ease);
}
.site-header.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.brand {
  text-decoration: none;
  font-weight: 750;
  font-size: 13px;
  letter-spacing: -.01em;
}
.phase-wrap { width: 100%; text-align: center; }
.phase-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 7px;
  letter-spacing: .02em;
}
.phase-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(49,95,93,.12);
  overflow: hidden;
}
.phase-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 320ms ease;
}
.restart-button {
  justify-self: end;
  font-size: 12px;
}

.screen {
  /* 100dvh suit la hauteur reelle du viewport, qui CHANGE pendant le
     defilement sur telephone quand la barre d'adresse se retracte. Toutes les
     sections se redimensionnaient alors simultanement et le contenu se
     decalait sous le doigt. 100svh est la valeur stable (barre affichee).
     100vh sert de repli pour les navigateurs sans svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 44px) 22px 56px;
  scroll-margin-top: var(--header-h);
}
.screen.compact {
  min-height: auto;
  padding-top: 88px;
  padding-bottom: 88px;
}
.screen-inner {
  width: min(100%, var(--content));
  margin: 0 auto;
}
.screen-inner.wide {
  width: min(100%, var(--content-wide));
}

.quote-screen {
  padding-top: 46px;
  background:
    linear-gradient(180deg, rgba(251,248,242,.45), rgba(244,239,230,.30));
}
.quote-wrap {
  width: min(100%, 880px);
  margin: 0 auto;
  text-align: center;
}
.quote {
  margin: 0;
  font-family: Georgia, "Times New Roman", ui-serif, serif;
  font-size: clamp(2.2rem, 6.1vw, 5.6rem);
  line-height: .99;
  font-weight: 500;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.quote-attribution {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.quote-action { margin-top: 50px; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--accent);
  font-weight: 800;
}
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 {
  margin: 0;
  letter-spacing: -.03em;
}
h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.06; }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.15; }

.lead {
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  line-height: 1.56;
  color: #344043;
  margin: 22px 0 0;
}
.copy {
  font-size: 1rem;
  line-height: 1.62;
  color: #344043;
}
.copy p { margin: 0 0 14px; }

.promise-card,
.summary-card,
.result-card,
.friction-card,
.inferred-card,
.audit-card {
  margin-top: 28px;
  border: 1px solid var(--line);
  background: rgba(251,248,242,.84);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 34px);
  box-shadow: var(--shadow);
}
.promise-sequence {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}
.no-hidden-answer {
  margin: 22px 0 0;
  font-family: Georgia, "Times New Roman", ui-serif, serif;
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  font-style: italic;
}
.privacy-note, .microcopy {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.primary-button,
.secondary-button,
.choice-button,
.icon-button {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 12px 20px;
  cursor: pointer;
  transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.primary-button {
  background: var(--accent);
  color: #fff;
  font-weight: 750;
  box-shadow: 0 8px 24px rgba(49,95,93,.16);
}
.primary-button:hover { background: var(--accent-deep); transform: translateY(-1px); }
.primary-button:active { transform: translateY(0); }
.secondary-button {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 700;
}
.secondary-button:hover { background: rgba(255,255,255,.45); }
.text-button {
  border: 0;
  background: none;
  padding: 8px 2px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(103,112,113,.35);
  text-underline-offset: 3px;
}
.button-row {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.button-row.center { justify-content: center; }

.progress-kicker {
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.slider-shell {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251,248,242,.75);
}
.slider-question {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 22px;
}
.range-grid {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr minmax(120px, 180px);
  align-items: center;
  gap: 18px;
}
.range-edge {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.range-edge.right { text-align: right; }

input[type="range"] {
  appearance: none;
  width: 100%;
  height: 30px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--paper-strong);
  border: 3px solid var(--accent);
  box-shadow: 0 3px 14px rgba(31,60,58,.18);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--accent-soft);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper-strong);
  border: 3px solid var(--accent);
  box-shadow: 0 3px 14px rgba(31,60,58,.18);
}
input[type="range"]:focus-visible {
  outline: 3px solid rgba(49,95,93,.22);
  outline-offset: 4px;
  border-radius: 999px;
}
.slider-readout {
  min-height: 24px;
  margin-top: 16px;
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 700;
}

.compass-lines,
.rule-lines {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.profile-line {
  padding: 14px 16px;
  border-radius: var(--radius-small);
  background: rgba(255,255,255,.55);
  line-height: 1.45;
}
.tension-note {
  margin-top: 14px;
  padding: 15px 16px;
  border-left: 3px solid var(--accent);
  background: var(--accent-faint);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  line-height: 1.48;
}

.scenario-card {
  margin-top: 18px;
  border-radius: var(--radius);
  background: rgba(251,248,242,.82);
  border: 1px solid var(--line);
  padding: clamp(20px, 4vw, 34px);
  box-shadow: var(--shadow);
}
.scenario-type {
  margin-bottom: 10px;
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .10em;
}
.story {
  margin-top: 18px;
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.64;
}
.measure-box {
  margin-top: 24px;
  padding: 17px 18px;
  background: var(--warm-soft);
  border-radius: var(--radius-small);
  line-height: 1.45;
}
.measure-label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 800;
}

details {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 15px;
}
details + details { margin-top: 12px; }
summary {
  cursor: pointer;
  color: var(--accent-deep);
  font-weight: 750;
  font-size: 14px;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "＋";
  float: right;
  color: var(--muted);
  font-weight: 500;
}
details[open] summary::after { content: "−"; }
.details-copy {
  margin-top: 12px;
  font-size: 14px;
  color: #435052;
  line-height: 1.58;
}

.decision-question {
  margin: 28px 0 13px;
  font-weight: 800;
}
.choice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.choice-button {
  min-height: 52px;
  background: rgba(255,255,255,.58);
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 750;
}
.choice-button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(49,95,93,.14);
}
.choice-button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible {
  outline: 3px solid rgba(49,95,93,.22);
  outline-offset: 3px;
}

.reveal-grid {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.reveal-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(110px,.7fr) minmax(110px,.7fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(251,248,242,.74);
  border-radius: var(--radius-small);
}
.reveal-name { min-width: 0; }
.reveal-name strong { display: block; }
.reveal-name small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.35;
}
.result-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--paper-strong);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.reveal-row.match { border-left: 3px solid var(--accent); }
.reveal-row.near { border-left: 3px dashed var(--accent); }
.reveal-row.diverge { border-left: 3px solid #8a7258; }
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin-top: 15px;
  font-size: 12px;
  color: var(--muted);
}
.legend span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  vertical-align: middle;
  margin-right: 6px;
  background: var(--accent);
}
.legend .lg-near::before { border-top: 2px dashed var(--accent); background: transparent; }
.legend .lg-diverge::before { background: #8a7258; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}
.metric {
  padding: 15px;
  border-radius: var(--radius-small);
  background: rgba(255,255,255,.55);
}
.metric strong {
  display: block;
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-variant-numeric: tabular-nums;
}
.metric span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.friction-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}
.friction-titleline {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.counter {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.blocker-list, .price-list {
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.blocker-list li, .price-list li {
  padding: 13px 15px;
  border-radius: var(--radius-small);
  background: rgba(255,255,255,.58);
  line-height: 1.45;
}
.ripple {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius-small);
  background: var(--accent-faint);
  line-height: 1.48;
}
.ripple strong { color: var(--accent-deep); }

.inferred-status {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.inferred-rule-grid {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}
.inferred-rule-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.inferred-rule-line:last-child { border-bottom: 0; }
.inferred-rule-line span:last-child {
  font-weight: 800;
  color: var(--accent-deep);
}
.shift-note {
  margin-top: 16px;
  padding: 15px;
  background: var(--warm-soft);
  border-radius: var(--radius-small);
  line-height: 1.48;
}

.final-question {
  margin: 36px 0 0;
  font-family: Georgia, "Times New Roman", ui-serif, serif;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.audit-toggle {
  margin-top: 24px;
}
.audit-content[hidden] { display: none; }
.formula {
  padding: 14px 16px;
  border-radius: var(--radius-small);
  background: #232b2d;
  color: #f7f5ef;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 840px;
  background: rgba(255,255,255,.45);
}
th, td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
}
th {
  background: rgba(49,95,93,.06);
  font-weight: 800;
}
tr:last-child td { border-bottom: 0; }

.debug-panel {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 100;
  max-width: min(420px, calc(100vw - 20px));
  max-height: 50vh;
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: rgba(28,37,40,.94);
  color: #fff;
  font: 11px/1.4 ui-monospace, monospace;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.fade-up {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.noscript {
  padding: 30px;
  background: #fff;
  color: #111;
}

@media (max-width: 760px) {
  :root { --header-h: 58px; }

  .site-header {
    grid-template-columns: 1fr 1fr;
    padding-inline: 14px;
  }
  .phase-wrap { order: 3; grid-column: 1 / -1; margin-top: -12px; }
  .phase-label { display: none; }
  .brand { font-size: 12px; }
  .restart-button { font-size: 11px; }

  .screen {
    align-items: flex-start;
    padding: calc(var(--header-h) + 50px) 16px 44px;
  }
  .quote-screen {
    align-items: center;
    padding-top: 20px;
  }
  .quote { font-size: clamp(2.35rem, 12vw, 4.4rem); }

  .range-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .range-edge.right {
    text-align: left;
    order: 3;
  }
  .range-grid input { order: 2; }
  .range-edge:first-child { order: 1; }
  .slider-shell { padding: 20px 17px; }

  .choice-row { grid-template-columns: 1fr; }
  .choice-button { min-height: 48px; }

  .reveal-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .reveal-name { grid-column: 1 / -1; }
  .metric-grid { grid-template-columns: 1fr; }

  .primary-button, .secondary-button { width: 100%; }
  .button-row { display: grid; grid-template-columns: 1fr; }

  .friction-nav { display: grid; grid-template-columns: 1fr 1fr; }
  .friction-nav button { width: 100%; }
}

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

@media print {
  .site-header, .button-row, .friction-nav, .restart-button { display: none !important; }
  .screen { min-height: auto; padding: 20px 0; }
  body { background: #fff; }
}

/* ==========================================================================
   CORRECTIFS D'AUDIT — v1.2
   Ce bloc est volontairement placé en fin de fichier : il redéfinit quelques
   règles écrites plus haut et doit donc les suivre.
   ========================================================================== */

/* --- Progression verrouillée -------------------------------------------- */
/* .screen est en display:flex, ce qui l'emporterait sur l'attribut hidden. */
[hidden] { display: none !important; }

/* Le focus est déplacé par programme à chaque étape ; on ne veut pas d'anneau
   sur un titre, la navigation ayant déjà déplacé la vue. */
[tabindex="-1"]:focus { outline: none; }

/* --- Remplissage des curseurs ------------------------------------------- */
/* WebKit ne connaît pas ::-moz-range-progress : sans ceci, la piste affichait
   un dégradé décoratif figé sur Chrome et Safari. --fill est posé par app.js. */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    var(--accent) var(--fill, 50%),
    var(--accent-soft) var(--fill, 50%),
    var(--accent-soft) 100%);
}

/* --- Indication sous un bouton d'étape ---------------------------------- */
.case-hint {
  margin: 10px 0 0;
  min-height: 1.4em;
  color: #8a5f42;
  font-size: 13px;
}

/* --- Écran miroir : statut en toutes lettres ---------------------------- */
.reveal-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(96px, .58fr) minmax(96px, .58fr) minmax(112px, .69fr);
}
.reveal-status {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.reveal-row.undecided { border-left: 3px dotted var(--line-strong); }
.legend .lg-undecided::before { border-top: 2px dotted var(--line-strong); background: transparent; }

/* --- Bloc de soutien ---------------------------------------------------- */
/* Volontairement discret : pas d'aplat coloré, pas de bouton d'appel à
   l'action, même échelle typographique qu'une note de bas de page. */
.support {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.support-note {
  margin: 0;
  max-width: 54ch;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}
.support-link {
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 3px;
  transition: color var(--ease), border-color var(--ease);
}
.support-link:hover,
.support-link:focus-visible {
  color: var(--accent-deep);
  border-color: var(--accent);
}
.support-link:focus-visible {
  outline: 3px solid rgba(49,95,93,.22);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .reveal-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .reveal-status { grid-column: 1 / -1; }
}

@media print {
  .support { display: none !important; }
}


/* ==========================================================================
   STABILITE DU DEFILEMENT — v2.2
   ========================================================================== */

/* L'ancrage de defilement est le comportement par defaut des navigateurs, mais
   on l'affirme explicitement : c'est lui qui maintient le contenu en place
   lorsqu'un bloc change de taille au-dessus du point de lecture. */
body { overflow-anchor: auto; }

/* Le libelle sous un curseur passe de une a deux lignes selon la valeur
   (jusqu'a 57 caracteres). Sur telephone, le bloc changeait donc de hauteur
   pendant le glissement, juste sous le doigt. On reserve la place des deux
   lignes une fois pour toutes. */
@media (max-width: 760px) {
  .slider-readout {
    min-height: 40px;
  }
}

/* ==========================================================================
   v3 — CLASSEMENT PAR PALIERS, PAIRES, RÉSULTAT
   ========================================================================== */

.duration { margin-top: 18px; font-size: 13px; color: var(--muted); }
.fiction { color: var(--muted); font-style: italic; }

.outcomes { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.outcomes-title { font-size: 13px; font-weight: 600; color: var(--accent-deep); margin-bottom: 10px; }
.outcomes ol { margin: 0; padding-left: 20px; }
.outcomes li { margin-bottom: 10px; line-height: 1.6; font-size: 15px; }

/* --- classement --- */
.pool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; min-height: 44px; }
.pool-done { font-size: 13px; color: var(--muted); align-self: center; }
.chip {
  font: inherit; font-size: 14px; line-height: 1.3;
  padding: 11px 14px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.chip:hover { border-color: var(--accent); }
.chip-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip.placed { font-size: 13px; padding: 8px 12px; min-height: 38px; }
.rank-hint { min-height: 1.4em; margin: 4px 0 14px; }

.tiers { display: flex; flex-direction: column; gap: 10px; }
.tier {
  border: 1px dashed var(--line-strong); border-radius: 14px;
  padding: 12px 14px; background: rgba(255,255,255,.35);
  transition: border-color var(--ease), background var(--ease);
}
.tier-active { cursor: pointer; border-color: var(--accent); background: var(--accent-soft); }
.tier-label { font-size: 12px; font-weight: 600; color: var(--accent-deep); margin-bottom: 8px; }
.tier-slot { display: flex; flex-wrap: wrap; gap: 8px; min-height: 38px; align-items: center; }
.tier-empty { color: var(--muted); font-size: 13px; }

/* --- curseurs de règle sur un seul écran --- */
.rule-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.rule-block:first-of-type { border-top: none; padding-top: 0; }
.rule-block h3 { margin: 0 0 6px; font-size: 17px; }
.rule-question { margin: 0 0 14px; font-size: 14px; color: var(--muted); line-height: 1.55; }

/* --- paires à emporter --- */
.pair-card {
  margin-top: 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.pair-instrument { font-size: 12px; font-weight: 600; color: var(--accent-deep); margin-bottom: 10px; }
.pair-sides { display: grid; gap: 8px; margin-bottom: 12px; }
.pair-sides span {
  font-size: 14px; line-height: 1.5; padding-left: 12px;
  border-left: 2px solid var(--line-strong);
}
.pair-question { font-size: 14px; font-style: italic; color: var(--accent-deep); }

/* --- audit en cartes plutôt qu'en tableau large --- */
.audit-cases { display: grid; gap: 12px; margin-top: 12px; }
.audit-case { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.audit-case-title { font-weight: 600; font-size: 14px; margin-bottom: 10px; }
.audit-case dl { margin: 0; display: grid; gap: 6px; }
.audit-case dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.audit-case dt { color: var(--muted); }
.audit-case dd { margin: 0; font-variant-numeric: tabular-nums; }

@media (min-width: 761px) {
  .pair-sides { grid-template-columns: 1fr 1fr; }
  .audit-cases { grid-template-columns: 1fr 1fr; }
}

/* --- v3.1 : aveu de simplification, sources des paires --- */
.honesty {
  margin-top: 16px; padding: 12px 14px;
  border-left: 2px solid var(--line-strong); border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.6; color: var(--muted); background: rgba(255,255,255,.4);
}
.pair-source { margin-top: 10px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.pair-source span { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.pairs-disclaimer { margin-top: 16px; font-style: italic; }
.pair-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pair-source a:hover { color: var(--accent-deep); }

/* --- v3.5 : partage et comparaison --- */
.compare { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.compare h3 { margin: 0 0 14px; font-size: 17px; }
.compare-head, .compare-line {
  display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap: 10px; padding: 9px 0; align-items: baseline;
}
.compare-head { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); }
.compare-line { border-bottom: 1px solid var(--line); font-size: 13px; }
.compare-crit { font-weight: 600; }
.compare-them, .compare-you { color: var(--muted); }
.compare-line.diff .compare-you { color: var(--accent-deep); font-weight: 600; }
.compare-line.diff { border-left: 3px solid var(--accent); padding-left: 10px; }
.js-share { margin-left: 10px; }
@media (max-width: 760px) {
  .compare-head, .compare-line { grid-template-columns: 1fr; gap: 3px; }
  .compare-head span:first-child { display: none; }
  .compare-head { display: none; }
  .compare-them::before { content: "Reçue : "; }
  .compare-you::before { content: "La vôtre : "; }
  .js-share { margin-left: 0; margin-top: 10px; }
}
.peek { margin-top: 18px; }
.peek > summary { font-size: 13px; color: var(--muted); }
.rank-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
.rank-actions .text-button { font-size: 13px; }

/* ==========================================================================
   INTÉGRATION CONTREPREUVE (v3.10)
   Lien vers l'accueil dans l'en-tête, lien vers les autres expériences en
   conclusion, et classes remplaçant les attributs style bloqués par la CSP.
   ========================================================================== */
.brand-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.home-link {
  display: inline-flex;
  flex: none;
  color: var(--accent-deep);
  border-radius: 50%;
}
.home-link svg { width: 24px; height: 24px; }
.home-link:focus-visible { outline: 3px solid rgba(49,95,93,.22); outline-offset: 3px; }
.other-experiences {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.other-experiences a { color: var(--accent-deep); }
.copy.spaced { margin-top: 24px; }
h3.spaced { margin-top: 38px; }
h3.spaced-small { margin-top: 26px; }