/* ── Bondly — Bilan initial ─────────────────────────────────────────────
   Page autonome : questionnaire + rapport.

   Les jetons ci-dessous sont une COPIE de index.html:21-58, qui reste la
   source de vérité. Copiés plutôt qu'extraits dans un fichier partagé : la
   landing fait dépendre ~1600 lignes de ces variables depuis un <style> en
   ligne, et un fichier externe manquant ou chargé trop tard la laisserait
   entièrement sans style. Dupliquer quarante lignes est le moindre risque.
   À revisiter si une étape de build apparaît un jour.
   ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Paper */
  --bg:           #F5EFE3;
  --bg-2:         #ECE3D0;
  --surface:      #FFFFFF;
  --surface-soft: #FBF7EF;

  /* Ink */
  --ink:          #1A1410;
  --ink-2:        #3F352D;
  --ink-3:        #6E6258;
  --ink-4:        #A0958A;

  /* Dark surfaces */
  --surface-dark:   #3D3127;
  --surface-dark-2: #322820;

  /* Brand */
  --sage:      #4F6B53;
  --sage-2:    #3F5743;
  --sage-tint: rgba(79, 107, 83, 0.08);
  --oxblood:   #8C2E20;
  --peach:     #F0CBA8;

  /* Lines */
  --line:      rgba(26, 20, 16, 0.10);
  --line-soft: rgba(26, 20, 16, 0.06);

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:    'Albert Sans', system-ui, -apple-system, sans-serif;

  /* Geometry */
  --wrap:  1180px;
  --r:     14px;
  --r-sm:  8px;

  /* ── Jetons de graphique ─────────────────────────────────────────────
     Les couleurs de marque ne peuvent pas servir de série : sur le papier
     (#F5EFE3), --peach tombe à 1,33:1 et --ink-4 à 2,56:1, et --sage a une
     chroma de 0,05, qui « lit gris ».

     Ce couple a été validé par scripts/validate_palette.js de la skill
     dataviz (light, surface #F5EFE3) : bande de clarté, plancher de chroma,
     séparation daltonisme ΔE 10,1 (deutan), séparation vision normale ΔE 24,8
     et contraste ≥ 3:1 — les cinq contrôles au vert, sans avertissement.
     Ne pas retoucher ces valeurs à l'œil : relancer le validateur. */
  --chart-self:    #2E7D4F;  /* « vous »            — 4,68:1 */
  --chart-partner: #8A3A7C;  /* « votre partenaire » — 6,33:1 */

  /* Couleur d'état, RÉSERVÉE aux dépassements de seuil. Jamais une série :
     si elle servait aussi d'identité, le rouge cesserait de vouloir dire
     « celui-ci pose problème ». */
  --chart-alert:   #8C2E20;  /* 7,26:1 */

  --chart-track:   rgba(26, 20, 16, 0.10);
  --chart-label:   #6E6258;  /* 5,16:1 */
}

html { background: var(--bg); font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (max-width: 768px) { html { font-size: 16px; } }

body {
  font-family: var(--sans);
  color: var(--ink-2);
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "ss01";
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--sage); color: #fff; }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sage); color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* ── Typographie ─────────────────────────────────────────────────────── */

.display {
  font-family: var(--display); font-weight: 500; line-height: 1.08;
  color: var(--ink); letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
.display em {
  font-style: italic; font-weight: 500; color: var(--sage);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
h1.display { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2.display { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3.display { font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 600; }

.lede { font-size: clamp(1.05rem, 1.3vw, 1.18rem); line-height: 1.55; color: var(--ink-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sage);
}
.eyebrow::before { content: ""; width: 1.25rem; height: 1px; background: var(--sage); }

/* ── Boutons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 1.7rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  cursor: pointer; text-decoration: none;
  transition: background 0.25s, color 0.2s, transform 0.2s, box-shadow 0.25s, border-color 0.2s;
}
.btn--primary {
  background: var(--sage); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(79, 107, 83, 0.5);
}
.btn--primary:hover:not(:disabled) {
  background: var(--sage-2); transform: translateY(-1px);
  box-shadow: 0 14px 24px -10px rgba(79, 107, 83, 0.6);
}
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Vues ────────────────────────────────────────────────────────────── */

.view { display: none; }
.view.active { display: block; }

.shell {
  max-width: 660px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem;
}
@media (max-width: 600px) { .shell { padding: 1.75rem 1.15rem 3rem; } }

/* ── Accueil et consentement ─────────────────────────────────────────── */

.intro { text-align: center; padding-top: 2rem; }
.intro h1 { margin: 1rem 0 1.1rem; }
.intro .lede { color: var(--ink-3); max-width: 46ch; margin: 0 auto 2rem; }

.intro-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem;
  margin-bottom: 2.25rem; font-size: 0.9rem; color: var(--ink-3);
}
.intro-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.intro-meta svg { flex-shrink: 0; color: var(--sage); }

.intro-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.6rem 1.5rem; margin-bottom: 1.75rem; text-align: left;
}
.intro-card h2 { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.9rem; }
.intro-card ul { list-style: none; display: grid; gap: 0.7rem; }
.intro-card li {
  display: grid; grid-template-columns: 20px 1fr; gap: 0.75rem;
  align-items: start; font-size: 0.95rem; color: var(--ink-2);
}
.intro-card li svg { margin-top: 0.28rem; color: var(--sage); }

/* Bandeau d'invitation, quand on arrive par le lien d'un partenaire. */
.invite-banner {
  background: var(--sage-tint); border: 1px solid rgba(79, 107, 83, 0.22);
  border-radius: var(--r); padding: 1.1rem 1.25rem; margin-bottom: 1.75rem;
  font-size: 0.98rem; color: var(--ink-2); text-align: left;
}
.invite-banner strong { color: var(--ink); }

/* Reprise d'un brouillon local. */
.resume-banner {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--sage);
  border-radius: var(--r); padding: 1.1rem 1.25rem; margin-bottom: 1.75rem; text-align: left;
}
.resume-banner p { font-size: 0.95rem; margin-bottom: 0.85rem; }
.resume-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.resume-actions .btn { padding: 0.6rem 1.15rem; font-size: 0.9rem; }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem;
  align-items: start; text-align: left; margin-bottom: 1.75rem;
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.15rem 1.25rem;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 0.15rem;
  accent-color: var(--sage); cursor: pointer; flex-shrink: 0;
}
.consent span { font-size: 0.9rem; line-height: 1.5; color: var(--ink-3); }
.consent a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }

/* ── Questionnaire ───────────────────────────────────────────────────── */

.q-top {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); padding: 1rem 0 0.9rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.q-bar { display: flex; align-items: center; gap: 0.9rem; }

.q-back {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.q-back:hover { border-color: var(--ink-3); color: var(--ink); }
.q-back[hidden] { visibility: hidden; display: inline-flex; }

.q-track { flex: 1; height: 4px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.q-fill {
  height: 100%; width: 0%; background: var(--sage); border-radius: 999px;
  transition: width 0.5s cubic-bezier(.2, .7, .1, 1);
}
.q-count {
  font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
  font-weight: 500; min-width: 3.2rem; text-align: right;
}
.q-section-label {
  margin-top: 0.6rem; font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sage); font-weight: 600;
}

.q-stage { position: relative; min-height: 60vh; display: flex; flex-direction: column; }

.q-screen { display: flex; flex-direction: column; flex: 1; justify-content: center; padding: 1rem 0 2rem; }
.q-screen[hidden] { display: none; }

.q-question {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.35rem, 3.2vw, 1.75rem); line-height: 1.25;
  letter-spacing: -0.015em; color: var(--ink);
  margin-bottom: 1.6rem; text-wrap: balance;
}
.q-hint { font-size: 0.88rem; color: var(--ink-3); margin: -1rem 0 1.5rem; }

.q-options { display: grid; gap: 0.55rem; }

.q-option {
  width: 100%; text-align: left;
  padding: 0.95rem 1.25rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--sans); font-size: 1rem; font-weight: 500; color: var(--ink-2);
  cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.18s;
  display: flex; align-items: center; gap: 0.9rem;
}
.q-option:hover { border-color: var(--sage); background: var(--sage-tint); }
.q-option[aria-pressed="true"] {
  border-color: var(--sage); background: var(--sage); color: #fff;
}
.q-option[aria-pressed="true"] .q-dot { border-color: #fff; background: #fff; }
.q-option[aria-pressed="true"] .q-dot::after { transform: scale(1); }

.q-dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--ink-4); position: relative;
  transition: border-color 0.18s, background 0.18s;
}
.q-dot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--sage); transform: scale(0); transition: transform 0.18s;
}

/* Option « je préfère ne pas répondre » : détachée du groupe de fréquence,
   pour qu'elle ne se lise pas comme un cran de plus sur l'échelle. */
.q-option--decline {
  margin-top: 0.5rem; border-style: dashed; color: var(--ink-3); font-size: 0.94rem;
}

.q-input, .q-textarea, .unlock-input {
  width: 100%; padding: 0.95rem 1.15rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.q-input::placeholder { color: var(--ink-4); }
.q-input:focus {
  outline: none; border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(79, 107, 83, 0.12);
}
.q-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.q-optional { font-size: 0.85rem; color: var(--ink-4); }

/* Sortie rapide, visible pendant la section sécurité. */
.q-exit {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 20;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem; border-radius: 999px;
  background: var(--ink); color: #fff; border: 0;
  font-family: var(--sans); font-size: 0.88rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 10px 24px -12px rgba(26, 20, 16, 0.7);
}
.q-exit[hidden] { display: none; }

.q-secu-note {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem 1.15rem; margin-bottom: 1.5rem;
  font-size: 0.9rem; color: var(--ink-3); line-height: 1.5;
}

/* ── Rapport ─────────────────────────────────────────────────────────── */

.report-head { text-align: center; padding: 1rem 0 2.5rem; }
.report-head h1 { margin: 0.9rem 0 0.75rem; }
.report-head p { color: var(--ink-3); max-width: 44ch; margin: 0 auto; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.75rem 1.6rem; margin-bottom: 1.1rem;
}
@media (max-width: 600px) { .card { padding: 1.4rem 1.15rem; } }

.card-head { margin-bottom: 1.35rem; }
.card-head h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.25rem;
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 0.3rem;
}
.card-head p { font-size: 0.92rem; color: var(--ink-3); line-height: 1.5; }

.verdict {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem); color: var(--ink);
  letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 0.6rem;
}
.verdict-note { font-size: 0.95rem; color: var(--ink-3); line-height: 1.55; }

/* Résumé textuel attaché à chaque graphique : l'information ne doit jamais
   dépendre de la seule lecture visuelle. */
.chart-summary {
  font-size: 0.92rem; color: var(--ink-3); line-height: 1.55;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
}

/* Légende — toujours présente dès deux séries. */
.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.1rem; }
.legend-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.86rem; color: var(--ink-3); font-weight: 500;
}
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }

/* ── Anneau de score ─────────────────────────────────────────────────── */

.ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.ring { position: relative; width: 190px; height: 190px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-value {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.1rem;
}
.ring-num {
  font-family: var(--display); font-weight: 600; font-size: 3.1rem;
  line-height: 1; color: var(--ink); letter-spacing: -0.03em;
}
.ring-den { font-size: 0.82rem; color: var(--ink-4); font-weight: 500; }
/* L'arc porte DÉJÀ sa valeur finale en attribut : si l'animation ne se joue
   pas — onglet en arrière-plan, requestAnimationFrame jamais appelé, moteur
   sans animations — le score reste correctement dessiné. L'animation n'est
   qu'un ornement, jamais ce qui produit l'affichage. */
@keyframes ringDraw {
  from { stroke-dashoffset: var(--ring-circumference); }
  to   { stroke-dashoffset: var(--ring-offset); }
}
.ring-arc { animation: ringDraw 1.1s cubic-bezier(.2, .7, .1, 1) both; }

/* ── Barres ──────────────────────────────────────────────────────────── */

.bars { display: grid; gap: 0.95rem; }
.bar-row { display: grid; grid-template-columns: 1fr; gap: 0.35rem; }
.bar-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.9rem; color: var(--ink-2); font-weight: 500;
}
.bar-value { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 0.85rem; }
.bar-value.is-alert { color: var(--chart-alert); font-weight: 600; }

.bar-track {
  position: relative; height: 10px; border-radius: 5px;
  background: var(--chart-track); overflow: hidden;
}
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 5px; background: var(--chart-self);
  transition: width 0.9s cubic-bezier(.2, .7, .1, 1);
}
.bar-fill.is-partner { background: var(--chart-partner); }
.bar-fill.is-alert { background: var(--chart-alert); }

/* Repère de seuil : un trait, pas une couleur — lisible sans distinguer
   les teintes. */
.bar-threshold {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: var(--ink); opacity: 0.38; border-radius: 1px;
}

/* Paire de barres « vous / votre partenaire ». Un espace de 2px de surface
   sépare toujours deux remplissages adjacents. */
.bar-pair { display: grid; gap: 3px; }

/* ── Plan d'attachement 2×2 ──────────────────────────────────────────── */

.quadrant { width: 100%; max-width: 420px; margin: 0 auto; display: block; }
.quadrant text { font-family: var(--sans); fill: var(--chart-label); }
.quadrant .q-axis { stroke: var(--line); stroke-width: 1; }
.quadrant .q-mid { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 4 4; }
.quadrant .q-zone { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.quadrant .q-axis-label { font-size: 11px; font-weight: 500; }
/* Anneau de surface de 2px sur les marques superposées. */
.quadrant .q-dot-mark { stroke: var(--surface); stroke-width: 2; }
.quadrant .q-dot-label { font-size: 11px; font-weight: 600; }

/* ── Carte verrouillée ───────────────────────────────────────────────── */

.locked {
  position: relative; overflow: hidden;
  background: var(--surface-dark); border: 1px solid rgba(245, 239, 227, 0.12);
  border-radius: 18px; padding: 2rem 1.7rem; margin: 1.75rem 0 1.1rem;
  text-align: center; color: var(--bg);
}
.locked::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(240, 203, 168, 0.14), transparent 62%);
}
.locked > * { position: relative; }
.locked h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 1.7rem); color: #fff;
  letter-spacing: -0.015em; margin-bottom: 0.7rem; text-wrap: balance;
}
.locked p { color: rgba(245, 239, 227, 0.78); font-size: 0.98rem; max-width: 40ch; margin: 0 auto 1.6rem; }

.locked-preview {
  display: flex; justify-content: center; gap: 2.25rem;
  margin-bottom: 1.75rem; flex-wrap: wrap;
}
.locked-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.locked-num {
  font-family: var(--display); font-weight: 600; font-size: 2.4rem; line-height: 1;
  color: rgba(245, 239, 227, 0.32); letter-spacing: -0.02em;
}
.locked-cap {
  font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(245, 239, 227, 0.5); font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.35rem;
}

.share-row { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; }
.btn--share {
  background: var(--peach); color: var(--surface-dark);
  box-shadow: 0 10px 22px -10px rgba(240, 203, 168, 0.55);
}
.btn--share:hover { background: #f6d9bd; transform: translateY(-1px); }
.btn--onDark {
  background: transparent; border-color: rgba(245, 239, 227, 0.28); color: var(--bg);
}
.btn--onDark:hover { border-color: rgba(245, 239, 227, 0.6); background: rgba(245, 239, 227, 0.07); }

.share-code {
  margin-top: 1.25rem; font-size: 0.85rem; color: rgba(245, 239, 227, 0.55);
}
.share-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; letter-spacing: 0.14em; color: var(--peach);
  background: rgba(245, 239, 227, 0.08); padding: 0.25rem 0.6rem;
  border-radius: var(--r-sm); margin-left: 0.4rem;
}

/* ── Barrière ────────────────────────────────────────────────────────── */

.paywall-list { display: grid; gap: 0.85rem; text-align: left; margin-bottom: 1.75rem; }
.paywall-item {
  display: grid; grid-template-columns: 16px 1fr; gap: 0.85rem; align-items: start;
  color: rgba(245, 239, 227, 0.9);
}
.paywall-item > span:first-child { margin-top: 0.25rem; color: var(--peach); }
.paywall-item-title { display: block; font-weight: 600; font-size: 0.98rem; color: #fff; }
.paywall-item-sub { display: block; font-size: 0.88rem; color: rgba(245, 239, 227, 0.6); }

/* Piste dont la largeur encode le maximum atteignable du levier. Sans elle,
   une barre courte se lirait comme un point faible alors qu'elle peut être
   pleine sur un levier qui pèse peu. */
.bar-scaled { min-width: 12%; }

.lever {
  font-size: 0.95rem; line-height: 1.6; color: var(--ink-2);
  background: var(--sage-tint); border-left: 3px solid var(--sage);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 0.9rem 1.1rem; margin-top: 1.1rem;
}
.lever strong { color: var(--sage-2); }

.gap { margin-bottom: 1.6rem; }
.gap:last-of-type { margin-bottom: 0; }
.gap-text { font-size: 0.94rem; line-height: 1.6; color: var(--ink-3); margin-top: 0.7rem; }

/* ── Programme ───────────────────────────────────────────────────────── */

.week-title {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  color: var(--sage-2); letter-spacing: -0.005em;
  margin: 2rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}
.programme > .week-title:first-of-type { margin-top: 0.5rem; }

.exercise {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.25rem 1.2rem; margin-bottom: 0.85rem;
}
.exercise-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: 0.6rem;
}
.exercise-head h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -0.01em;
}
.exercise-time {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 600; color: var(--sage);
  background: var(--sage-tint); padding: 0.2rem 0.6rem; border-radius: 999px;
}
.exercise-intro { font-size: 0.94rem; color: var(--ink-3); line-height: 1.6; margin-bottom: 0.9rem; }
.exercise-steps { margin: 0 0 0.9rem 1.1rem; display: grid; gap: 0.5rem; }
.exercise-steps li { font-size: 0.94rem; line-height: 1.55; color: var(--ink-2); padding-left: 0.2rem; }
.exercise-steps li::marker { color: var(--sage); font-weight: 600; }
.exercise-stop {
  font-size: 0.88rem; line-height: 1.55; color: var(--ink-3);
  border-top: 1px solid var(--line-soft); padding-top: 0.75rem;
}
.exercise-stop strong { color: var(--oxblood); }
.exercise-source { font-size: 0.8rem; color: var(--ink-4); margin-top: 0.6rem; font-style: italic; }

/* ── Feuille de déblocage ────────────────────────────────────────────── */

.unlock-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(26, 20, 16, 0.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.unlock-overlay.active { opacity: 1; pointer-events: auto; }

.unlock-sheet {
  position: relative; width: 100%; max-width: 440px;
  background: var(--surface); border-radius: 18px; padding: 2rem 1.75rem;
  box-shadow: 0 30px 60px -20px rgba(26, 20, 16, 0.45);
  max-height: 92vh; overflow-y: auto; text-align: center;
}
@media (max-width: 600px) { .unlock-sheet { padding: 1.6rem 1.25rem; } }

.unlock-close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.unlock-close:hover { color: var(--ink); border-color: var(--ink-3); }

.unlock-sheet h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 1.55rem); color: var(--ink);
  letter-spacing: -0.015em; margin-bottom: 0.4rem; text-wrap: balance;
}
.unlock-price { font-size: 0.95rem; color: var(--sage); font-weight: 600; margin-bottom: 1.5rem; }

.unlock-feat { list-style: none; display: grid; gap: 0.6rem; text-align: left; margin-bottom: 1.75rem; }
.unlock-feat li {
  position: relative; padding-left: 1.6rem; font-size: 0.94rem;
  color: var(--ink-2); line-height: 1.5;
}
.unlock-feat li::before {
  content: ""; position: absolute; left: 0; top: 0.42em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--sage);
}

.unlock-label {
  display: block; text-align: left; font-size: 0.85rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: 0.45rem;
}
.unlock-help { font-size: 0.82rem; color: var(--ink-4); margin-top: 0.5rem; text-align: left; }
.unlock-pay { width: 100%; margin-top: 1.25rem; }
.unlock-legal { font-size: 0.78rem; color: var(--ink-4); margin-top: 0.85rem; }

.unlock-check {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 1.1rem;
  background: var(--sage-tint); color: var(--sage);
  display: flex; align-items: center; justify-content: center;
}
#unlock-success p { font-size: 0.95rem; color: var(--ink-3); line-height: 1.6; margin-bottom: 1rem; }
#unlock-success p strong { color: var(--ink); }
#unlock-success .unlock-help { text-align: center; margin-bottom: 1.5rem; }

/* ── Sécurité et ressources ──────────────────────────────────────────── */

/* Bandeau affiché sur TOUS les rapports, sans condition. C'est ce qui
   empêche sa présence de constituer elle-même un signal : s'il n'apparaissait
   qu'en cas de dépistage positif, il trahirait la personne. */
.resources {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.5rem 1.5rem; margin-top: 2rem;
}
.resources h2 { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 0.6rem; }
.resources p { font-size: 0.92rem; color: var(--ink-3); line-height: 1.6; margin-bottom: 0.9rem; }
.resources ul { list-style: none; display: grid; gap: 0.55rem; }
.resources li { font-size: 0.92rem; color: var(--ink-2); }
.resources strong { color: var(--ink); }
.resources a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }

/* Écran de réorientation : remplace le parcours pour la personne concernée. */
.safety-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--oxblood);
  border-radius: 18px; padding: 1.75rem 1.6rem; margin-bottom: 1.1rem;
}
.safety-panel h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); margin-bottom: 0.7rem;
}
.safety-panel p { font-size: 0.98rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 0.8rem; }

/* ── Pied de rapport ─────────────────────────────────────────────────── */

.report-footer {
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
  font-size: 0.86rem; color: var(--ink-4); text-align: center;
}
.report-footer p { margin-bottom: 0.9rem; line-height: 1.6; }
.report-footer a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.danger-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.86rem; color: var(--ink-4);
  text-decoration: underline; text-underline-offset: 2px;
}
.danger-link:hover { color: var(--oxblood); }

/* ── États ───────────────────────────────────────────────────────────── */

.state { text-align: center; padding: 5rem 1.5rem; }
.state h1 { margin-bottom: 0.8rem; }
.state p { color: var(--ink-3); max-width: 40ch; margin: 0 auto 1.75rem; }

.spinner {
  width: 34px; height: 34px; margin: 0 auto 1.5rem;
  border: 2px solid var(--line); border-top-color: var(--sage);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-msg {
  color: var(--oxblood); font-size: 0.92rem; margin-top: 0.85rem;
  min-height: 1.2rem;
}
.error-msg[hidden] { display: none; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(1rem);
  background: var(--ink); color: #fff; padding: 0.8rem 1.35rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s; z-index: 50;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Animations ──────────────────────────────────────────────────────── */

@keyframes slideInRight { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInLeft  { from { transform: translateX(-28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInUp    { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.anim-in-right { animation: slideInRight 0.34s cubic-bezier(.2, .7, .1, 1) both; }
.anim-in-left  { animation: slideInLeft  0.34s cubic-bezier(.2, .7, .1, 1) both; }
.anim-in-up    { animation: slideInUp    0.4s  cubic-bezier(.2, .7, .1, 1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ring-arc, .bar-fill, .q-fill { transition: none !important; }
}

/* Contrastes forcés : l'identité ne doit jamais tenir à la seule couleur. */
@media (forced-colors: active) {
  .bar-fill, .legend-swatch { forced-color-adjust: none; }
  .q-option[aria-pressed="true"] { outline: 2px solid; }
}

@media print {
  .q-exit, .share-row, .danger-link { display: none; }
  .card, .locked { break-inside: avoid; }
}