/* Focus : fond « encre » indigo ou papier lilas, une couleur franche par exercice,
   police Lexend (dessinée pour faciliter la lecture). */

@font-face {
  font-family: "Lexend";
  src: url("../fonts/lexend.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

/* ---------- Couleurs (clair / sombre) ---------- */
:root {
  color-scheme: light;
  --paper: #f3f2fa;
  --surface: #ffffff;
  --surface-2: #e9e7f5;
  --surface-3: #d9d6ec;
  --cell: #e2dff2;
  --ink: #1c1a44;
  --ink-2: #57557d;
  --muted: #8785a8;
  --line: rgba(28, 26, 68, 0.09);
  --on-ink: #ffffff;
  --brand: #5b4be0;
  --brand-soft: rgba(91, 75, 224, 0.13);
  --good: #10a06a;
  --good-soft: rgba(16, 160, 106, 0.14);
  --bad: #e5484d;
  --bad-soft: rgba(229, 72, 77, 0.13);
  --grid: #e6e4f2;
  --axis: #c9c6de;
  --lift: 0 18px 40px -22px rgba(28, 26, 68, 0.45);

  /* Une identité par exercice : fond plein, texte posé dessus, version lisible sur le papier, teinte douce. */
  --nback: #5b4be0; --nback-on: #ffffff; --nback-ink: #4b3bd6; --nback-soft: rgba(91, 75, 224, 0.13);
  --seq: #ff5fa2; --seq-on: #1c1a44; --seq-ink: #cf1f6c; --seq-soft: rgba(255, 95, 162, 0.16);
  --calc: #ffb224; --calc-on: #1c1a44; --calc-ink: #a35f00; --calc-soft: rgba(255, 178, 36, 0.2);
  --lect: #19c6a7; --lect-on: #1c1a44; --lect-ink: #077c68; --lect-soft: rgba(25, 198, 167, 0.17);
  --gng: #ff6a3d; --gng-on: #1c1a44; --gng-ink: #c2410c; --gng-soft: rgba(255, 106, 61, 0.16);
  --stroop: #2e9bff; --stroop-on: #1c1a44; --stroop-ink: #0b66c9; --stroop-soft: rgba(46, 155, 255, 0.15);
  --schulte: #a6da2e; --schulte-on: #1c1a44; --schulte-ink: #4d7c0f; --schulte-soft: rgba(166, 218, 46, 0.22);
  --breath: #b79cff; --breath-on: #1c1a44; --breath-ink: #6a4fd6; --breath-soft: rgba(183, 156, 255, 0.24);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #15133a;
    --surface: #211e4e;
    --surface-2: #2b285c;
    --surface-3: #39356c;
    --cell: #2b285c;
    --ink: #f3f2fa;
    --ink-2: #b7b4d8;
    --muted: #8c89b5;
    --line: rgba(243, 242, 250, 0.09);
    --on-ink: #15133a;
    --brand: #9d90ff;
    --brand-soft: rgba(157, 144, 255, 0.2);
    --good: #3dd68c;
    --good-soft: rgba(61, 214, 140, 0.18);
    --bad: #ff6b6b;
    --bad-soft: rgba(255, 107, 107, 0.18);
    --grid: #2b285c;
    --axis: #423e78;
    --lift: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
    --nback: #6e5ef5; --nback-ink: #aa9eff; --nback-soft: rgba(110, 94, 245, 0.24);
    --seq-ink: #ff86ba; --seq-soft: rgba(255, 95, 162, 0.2);
    --calc-ink: #ffc757; --calc-soft: rgba(255, 178, 36, 0.18);
    --lect-ink: #45e3c4; --lect-soft: rgba(25, 198, 167, 0.18);
    --gng-ink: #ff9470; --gng-soft: rgba(255, 106, 61, 0.2);
    --stroop-ink: #74bcff; --stroop-soft: rgba(46, 155, 255, 0.2);
    --schulte-ink: #c5ee62; --schulte-soft: rgba(166, 218, 46, 0.18);
    --breath-ink: #cbb8ff; --breath-soft: rgba(183, 156, 255, 0.2);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15133a;
  --surface: #211e4e;
  --surface-2: #2b285c;
  --surface-3: #39356c;
  --cell: #2b285c;
  --ink: #f3f2fa;
  --ink-2: #b7b4d8;
  --muted: #8c89b5;
  --line: rgba(243, 242, 250, 0.09);
  --on-ink: #15133a;
  --brand: #9d90ff;
  --brand-soft: rgba(157, 144, 255, 0.2);
  --good: #3dd68c;
  --good-soft: rgba(61, 214, 140, 0.18);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, 0.18);
  --grid: #2b285c;
  --axis: #423e78;
  --lift: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  --nback: #6e5ef5; --nback-ink: #aa9eff; --nback-soft: rgba(110, 94, 245, 0.24);
  --seq-ink: #ff86ba; --seq-soft: rgba(255, 95, 162, 0.2);
  --calc-ink: #ffc757; --calc-soft: rgba(255, 178, 36, 0.18);
  --lect-ink: #45e3c4; --lect-soft: rgba(25, 198, 167, 0.18);
  --gng-ink: #ff9470; --gng-soft: rgba(255, 106, 61, 0.2);
  --stroop-ink: #74bcff; --stroop-soft: rgba(46, 155, 255, 0.2);
  --schulte-ink: #c5ee62; --schulte-soft: rgba(166, 218, 46, 0.18);
  --breath-ink: #cbb8ff; --breath-soft: rgba(183, 156, 255, 0.2);
}

/* Couchant de l'atterrissage du soir, le même en clair et en sombre : un palier, une couleur. */
:root { --sun: #ffb25e; --ember: #ff7a45; --rose: #e85d8f; --violet: #9b7cff; }

/* Couleur courante (--ex…) : celle de l'exercice, sinon la couleur de l'app. */
:root { --ex: var(--brand); --ex-on: #ffffff; --ex-ink: var(--brand); --ex-soft: var(--brand-soft); }
.t-nback { --ex: var(--nback); --ex-on: var(--nback-on); --ex-ink: var(--nback-ink); --ex-soft: var(--nback-soft); }
.t-sequence { --ex: var(--seq); --ex-on: var(--seq-on); --ex-ink: var(--seq-ink); --ex-soft: var(--seq-soft); }
.t-calcul { --ex: var(--calc); --ex-on: var(--calc-on); --ex-ink: var(--calc-ink); --ex-soft: var(--calc-soft); }
.t-lecture { --ex: var(--lect); --ex-on: var(--lect-on); --ex-ink: var(--lect-ink); --ex-soft: var(--lect-soft); }
.t-gonogo { --ex: var(--gng); --ex-on: var(--gng-on); --ex-ink: var(--gng-ink); --ex-soft: var(--gng-soft); }
.t-stroop { --ex: var(--stroop); --ex-on: var(--stroop-on); --ex-ink: var(--stroop-ink); --ex-soft: var(--stroop-soft); }
.t-schulte { --ex: var(--schulte); --ex-on: var(--schulte-on); --ex-ink: var(--schulte-ink); --ex-soft: var(--schulte-soft); }
.t-respiration { --ex: var(--breath); --ex-on: var(--breath-on); --ex-ink: var(--breath-ink); --ex-soft: var(--breath-soft); }

:root {
  --font: "Lexend", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tabbar-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
h1 { font-size: 32px; line-height: 1.08; font-weight: 750; letter-spacing: -0.03em; margin: 0 0 6px; }
h2 { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 8px; }
a { color: var(--brand); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.right { text-align: right; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.cap::first-letter { text-transform: uppercase; }

.screen {
  max-width: 600px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 16px) calc(var(--tabbar-h) + var(--safe-bottom) + 40px) calc(var(--safe-left) + 16px);
}
.screen.narrow { max-width: 560px; }
body.no-tabs .screen { padding-bottom: calc(var(--safe-bottom) + 28px); }
body.no-tabs #tabbar, body.immersive #tabbar { display: none; }

.section-title { margin: 36px 0 14px; }
.back {
  display: inline-flex; align-items: center; gap: 2px; margin: 0 0 14px -6px; padding: 6px;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15px;
}

/* ---------- Barre d'onglets flottante ---------- */
#tabbar {
  position: fixed; z-index: 10; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-bottom) + 10px); width: min(calc(100% - 24px), 420px);
  display: flex; gap: 4px; padding: 6px; border-radius: 26px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); box-shadow: var(--lift);
}
#tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 0 6px; border-radius: 20px; color: var(--muted); text-decoration: none;
  font-size: 12px; font-weight: 600; transition: background 0.2s, color 0.2s;
}
#tabbar a.active { background: var(--ink); color: var(--on-ink); }

/* ---------- Boutons et contrôles ---------- */
.btn {
  appearance: none; border: 0; border-radius: 18px; padding: 14px 22px; min-height: 54px;
  font-size: 17px; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform 0.1s, filter 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-ex { background: var(--ex); color: var(--ex-on); box-shadow: 0 14px 30px -16px var(--ex); }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: var(--bad-soft); color: var(--bad); }
.btn-block { width: 100%; }
.btn-lg { min-height: 60px; font-size: 18px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 16px; }
.card h3 { margin-bottom: 10px; }
.stack-gap { display: grid; gap: 10px; }
.stack-gap p { margin: 0; }

.field { margin: 0 0 16px; }
.field-label { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 16px; }
.seg button {
  flex: 1; appearance: none; border: 0; background: transparent; cursor: pointer;
  min-height: 44px; padding: 8px 6px; border-radius: 12px;
  font-size: 15px; font-weight: 600; color: var(--ink-2); transition: background 0.15s, color 0.15s;
}
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px -2px rgba(28, 26, 68, 0.2); }

.icon-btn {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 14px; cursor: pointer;
  display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2);
}
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.pill { padding: 6px 13px; border-radius: 99px; background: var(--surface-2); font-size: 15px; font-weight: 600; transition: background 0.2s, color 0.2s; }
.pill.up { background: var(--ex-soft); color: var(--ex-ink); }

/* ---------- Accueil ---------- */
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-head .date { margin: 0 0 2px; color: var(--ink-2); font-size: 15px; }
.home-head h1 { font-size: 38px; }
.streak {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 7px 13px 7px 10px;
  border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; color: var(--ink-2); white-space: nowrap;
}
.streak svg { color: #ff7a2f; }
.streak strong { color: var(--ink); font-size: 16px; }

/* Cible du jour : un anneau gradué par exercice de la séance, rempli au fil des blocs faits. */
.daily { display: grid; justify-items: center; gap: 18px; margin: 14px 0 0; color: inherit; text-decoration: none; text-align: center; }
.target { position: relative; width: min(70vw, 270px); aspect-ratio: 1; }
.target svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ring-track { fill: none; stroke: var(--ex-ink); stroke-width: 13; opacity: 0.5; }
.ring-fill { fill: none; stroke: var(--ex); stroke-width: 13; stroke-linecap: round; animation: ring-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes ring-in { from { stroke-dasharray: 0 100; } }
.target-core {
  position: absolute; inset: 0; margin: auto; width: 33%; height: 33%; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--on-ink);
  box-shadow: 0 16px 34px -14px rgba(28, 26, 68, 0.7);
}
.target-core.breathe { animation: breathe 4.5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.07); } }
.daily:active .target-core { transform: scale(0.94); }
.daily-text h2 { font-size: 24px; }
.daily-text p { margin: 4px 0 12px; color: var(--ink-2); }
.daily-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.daily-steps li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 550; color: var(--ink-2); white-space: nowrap;
}
.daily-steps i { width: 10px; height: 10px; border-radius: 50%; background: var(--ex); }
.daily-steps li.full { color: var(--ink); }
.daily-steps li svg { color: var(--ex-ink); margin-left: -2px; }

/* Tuiles d'exercices : aplat de couleur, motif géant en filigrane. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  position: relative; isolation: isolate; overflow: hidden; min-height: 172px; padding: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 28px; background: var(--ex); color: var(--ex-on); text-decoration: none;
  transition: transform 0.12s;
}
.tile:active { transform: scale(0.97); }
.tile-motif { position: absolute; z-index: -1; top: -30px; right: -34px; opacity: 0.2; }
.tile-motif svg { stroke-width: 1.5; }
.tile-level {
  position: absolute; top: 14px; left: 14px; padding: 4px 10px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.24); font-size: 13px; font-weight: 600;
}
.tile:not(.t-nback) .tile-level { background: rgba(28, 26, 68, 0.12); }
.tile-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.tile-sub { font-size: 14px; line-height: 1.3; opacity: 0.82; margin-top: 2px; }
.install-hint { display: block; margin-top: 26px; font-size: 14px; color: var(--ink-2); }

/* ---------- Présentation d'un exercice ---------- */
.ex-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 176px; margin-bottom: 20px; padding: 22px 20px 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 30px; background: var(--ex); color: var(--ex-on);
}
.ex-hero-motif { position: absolute; z-index: -1; top: -40px; right: -40px; opacity: 0.2; }
.ex-hero-motif svg { stroke-width: 1.3; }
.ex-hero h1 { font-size: 34px; margin: 0; }
.ex-hero p { margin: 4px 0 0; opacity: 0.85; }
.ex-hero .step-count { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.level-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 16px 18px;
  border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
}
.level-label { font-size: 14px; color: var(--ink-2); }
.level-value { font-size: 26px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.2; color: var(--ex-ink); }
.level-record { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.level-adjust { display: flex; gap: 8px; }
.level-adjust .icon-btn { width: 52px; height: 52px; border-radius: 16px; background: var(--ex-soft); color: var(--ex-ink); }
.howto { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; color: var(--ink-2); }
.howto li { position: relative; padding-left: 22px; }
.howto li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 9px; height: 9px; border-radius: 3px; background: var(--ex); transform: rotate(45deg); }

/* ---------- Séance ---------- */
.seance-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.seance-top .back { margin-bottom: 0; }
.stepper { display: flex; gap: 6px; }
.stepper span { width: 22px; height: 8px; border-radius: 99px; background: var(--surface-3); transition: width 0.3s; }
.stepper span.done { background: var(--ex); }
.stepper span.cur { width: 40px; background: var(--ex); }
.stepper span.skipped { background: transparent; box-shadow: inset 0 0 0 2px var(--surface-3); }
.interrupted { padding-top: 8px; }
.interrupted p { max-width: 38ch; }
.step-card .howto { margin-top: 4px; }
.step-card > .small { margin-bottom: 18px; }
.checkin { display: grid; gap: 24px; margin: 18px 0; padding: 20px 16px; }
.checkin-q { font-weight: 600; margin-bottom: 10px; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.scale button {
  appearance: none; border: 0; background: var(--surface-2); cursor: pointer;
  height: 52px; border-radius: 16px; font-size: 18px; font-weight: 700; color: var(--ink-2); transition: background 0.15s, transform 0.1s;
}
.scale button:active { transform: scale(0.94); }
.scale button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.scale-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--muted); }
.finish { text-align: center; padding-top: 12px; }
.finish .target { width: min(56vw, 210px); margin: 0 auto 18px; }
.finish .result-msg { margin-left: auto; margin-right: auto; }
.finish .result-lines dt { display: flex; align-items: center; gap: 8px; }
.finish .result-lines dt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ex); }
.finish .result-lines .skipped dt::before { background: var(--surface-3); }
.finish .result-lines .skipped dd { color: var(--muted); font-weight: 500; }
.target.celebrate .ring-fill { animation-duration: 0.9s; }
.target.celebrate .target-core { animation: core-pop 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes core-pop { from { transform: scale(0); } }
.resume { text-align: center; padding-top: 8px; }
.resume .target { width: min(56vw, 210px); margin: 0 auto 18px; }
.resume p { max-width: 36ch; margin: 0 auto; }

/* ---------- Résultat ---------- */
.result { padding-top: 6px; }
.result-ex { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.result-badge { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--ex); color: var(--ex-on); }
.result-opts { color: var(--ink-2); font-weight: 450; }
.result-hero {
  margin-top: 22px; font-size: clamp(76px, 24vw, 120px); font-weight: 800; line-height: 0.92; letter-spacing: -0.05em;
  color: var(--ex-ink); font-variant-numeric: tabular-nums; animation: rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
.result-sub { margin-top: 8px; font-size: 18px; color: var(--ink-2); }
.result-msg { max-width: 36ch; margin: 18px 0; font-size: 18px; line-height: 1.45; }
.level-change {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2); font-weight: 600; font-size: 15px;
}
.level-change.up { background: var(--ex-soft); color: var(--ex-ink); }
.result-lines { margin: 22px 0 0; padding: 4px 18px; }
.result-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; }
.result-lines > div + div { border-top: 1px solid var(--line); }
.result-lines dt { color: var(--ink-2); }
.result-lines dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.result-actions { display: grid; gap: 10px; margin-top: 22px; }
.result .btn-primary { background: var(--ex); color: var(--ex-on); }
.finish .btn-primary { background: var(--ink); color: var(--on-ink); }

/* ---------- Scène d'exercice (plein écran) ---------- */
.stage {
  height: 100vh; height: 100dvh; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: calc(var(--safe-top) + 10px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.stage-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.stage-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.stage-bar-fill { height: 100%; border-radius: 99px; background: var(--ex); transform: scaleX(0); transform-origin: left; transition: transform 0.25s linear; }
/* « Passer » : proposé pendant les exercices de la séance du jour */
.skip-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 11px 0 14px;
  border: 0; border-radius: 14px; cursor: pointer; background: var(--ex-soft); color: var(--ex-ink); font-weight: 650; font-size: 15px;
}
.stage-info { min-width: 56px; text-align: right; font-weight: 650; font-size: 15px; color: var(--ex-ink); font-variant-numeric: tabular-nums; }
.stage-main { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.stage-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.stage-info:empty { display: none; }

/* Jauge de niveau : un cran par réussite, pleine = niveau supérieur, vide = on redescend. */
.stage-level { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--muted); }
.stage-level[hidden] { display: none; }
.lv-label { min-width: 4.8em; font-size: 15px; font-weight: 700; color: var(--ex-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lv-meter { flex: 1; display: flex; gap: 3px; height: 12px; }
.lv-meter i { flex: 1; border-radius: 3px; background: var(--surface-2); transition: background 0.2s; }
.lv-meter i:first-child { border-radius: 99px 3px 3px 99px; }
.lv-meter i:last-child { border-radius: 3px 99px 99px 3px; }
.lv-meter i.on { background: var(--ex); }
.stage-level.up .lv-meter i { animation: lv-full 0.9s ease-out; }
.stage-level.up .lv-label { animation: pop 0.6s ease-out; }
.stage-level.down .lv-meter { animation: shake 0.3s; }
@keyframes lv-full { 0%, 40% { background: var(--ex); box-shadow: 0 0 12px var(--ex); } }
.stage-toast {
  position: absolute; z-index: 6; top: 10px; left: 50%; transform: translate(-50%, -8px);
  padding: 9px 18px; border-radius: 99px; background: var(--ink); color: var(--on-ink);
  font-weight: 650; font-size: 15px; white-space: nowrap; box-shadow: var(--lift);
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.stage-toast.show { opacity: 1; transform: translate(-50%, 0); }
.stage-status { margin: 16px 0 0; min-height: 1.5em; text-align: center; font-size: 18px; font-weight: 600; color: var(--ink-2); }

.countdown {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: var(--paper); background: color-mix(in srgb, var(--paper) 86%, transparent);
  font-size: 140px; font-weight: 800; letter-spacing: -0.05em; color: var(--ex-ink);
}
.countdown .pop { animation: pop 0.6s ease-out; }
@keyframes pop { from { transform: scale(1.6); opacity: 0; } 35% { opacity: 1; } to { transform: scale(1); } }

/* N-back */
.nb-wrap, .sq-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px 0; }
.nb-grid, .sq-grid {
  --size: min(88vw, 54vh, 460px);
  width: var(--size); height: var(--size);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px;
}
@supports (height: 1dvh) { .nb-grid, .sq-grid { --size: min(88vw, 54dvh, 460px); } }
.nb-cell { border-radius: 20px; background: var(--cell); display: grid; place-items: center; font-size: 26px; font-weight: 700; color: var(--muted); transition: background 0.08s; }
.nb-cell.center { background: transparent; }
.nb-cell.on { background: var(--ex); box-shadow: 0 0 0 5px var(--ex-soft), 0 14px 40px -6px var(--ex); }
.nb-cell.letter { color: var(--ink); font-size: 64px; }
.resp-row { display: flex; gap: 12px; }
.resp-btn {
  flex: 1; min-height: 88px; border-radius: 24px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 19px; font-weight: 700; transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.resp-btn:active { transform: scale(0.97); }
.resp-btn kbd { font: inherit; font-size: 12px; font-weight: 500; color: var(--muted); }
.resp-btn.good { background: var(--good-soft); border-color: var(--good); }
.resp-btn.bad { background: var(--bad-soft); border-color: var(--bad); }
@media (hover: none) { kbd { display: none; } }

/* Séquences : cases */
.sq-grid { gap: 12px; }
.sq-tile { border-radius: 20px; background: var(--cell); transition: background 0.12s, transform 0.12s; }
.sq-grid.input .sq-tile { background: var(--surface-3); cursor: pointer; }
.sq-tile.on, .sq-tile.tap { background: var(--ex); transform: scale(1.04); box-shadow: 0 14px 34px -10px var(--ex); }
.sq-tile.bad { background: var(--bad); }
.sq-tile.hint { box-shadow: inset 0 0 0 5px var(--good); }
.sq-grid.win .sq-tile { background: var(--good-soft); }

/* Séquences : chiffres */
.dg-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 12px 0; }
.dg-display { height: 1.1em; font-size: 120px; font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; color: var(--ex-ink); font-variant-numeric: tabular-nums; }
.dg-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 54px; }
.dg-slot { width: 40px; height: 54px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.dg-slot.filled { background: var(--ex-soft); color: var(--ex-ink); }
.dg-slots.good .dg-slot { background: var(--good-soft); color: var(--good); }
.dg-slots.bad .dg-slot { background: var(--bad-soft); color: var(--bad); }
.dg-answer { min-height: 1.5em; margin: 0; color: var(--ink-2); font-weight: 600; }

/* Pavé numérique */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transition: opacity 0.2s; }
.keypad button {
  min-height: 62px; border-radius: 20px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 26px; font-weight: 600; display: grid; place-items: center; transition: background 0.1s;
}
.keypad button.fn { background: var(--surface-2); border-color: transparent; font-size: 16px; color: var(--ink-2); }
.keypad button.pressed { background: var(--ex-soft); }
.keypad.inactive { opacity: 0.35; pointer-events: none; }

/* Calcul */
.calc-top { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.calc-main { flex: 1; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.calc-q { font-size: clamp(38px, 12vw, 64px); font-weight: 750; letter-spacing: -0.03em; text-align: center; font-variant-numeric: tabular-nums; }
.calc-a {
  min-width: 150px; height: 72px; padding: 0 24px; border-radius: 22px; background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--ex);
  display: grid; place-items: center; font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.calc-a.good { background: var(--good-soft); box-shadow: inset 0 0 0 2px var(--good); color: var(--good); }
.calc-a.bad { background: var(--bad-soft); box-shadow: inset 0 0 0 2px var(--bad); color: var(--bad); }

/* Lecture flash : la lettre de fixation (en couleur) tombe toujours pile sur le repère central. */
.rd-main { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 12px 0; }
.rd-frame {
  position: relative; display: flex; align-items: center; height: 2.4em;
  font-size: min(48px, (100vw - 32px) / 11.5);
}
.rd-frame::before, .rd-frame::after {
  content: ""; position: absolute; left: 6%; right: 6%; height: 2px; border-radius: 2px; background: var(--surface-3);
}
.rd-frame::before { top: 0; }
.rd-frame::after { bottom: 0; }
.rd-tick { position: absolute; left: 50%; width: 3px; height: 0.36em; margin-left: -1.5px; border-radius: 2px; background: var(--ex-ink); }
.rd-tick.top { top: 0; }
.rd-tick.bottom { bottom: 0; }
.rd-word { flex: 1; display: flex; line-height: 1.2; font-weight: 600; white-space: pre; }
.rd-pre, .rd-post { flex: 1 1 0; min-width: 0; display: flex; }
.rd-pre { justify-content: flex-end; }
.rd-pivot { color: var(--ex-ink); }
.rd-quiz { width: 100%; max-width: 520px; margin: 0 auto; }
.rd-q { margin: 0 0 18px; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.rd-choices { display: grid; gap: 10px; }
.rd-choices.locked { pointer-events: none; }
.rd-choice {
  min-height: 60px; padding: 12px 16px; border-radius: 20px; cursor: pointer; text-align: left;
  border: 2px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 17px; font-weight: 600; transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
.rd-choice:active { transform: scale(0.98); }
.rd-choice kbd { font: inherit; font-size: 12px; font-weight: 500; color: var(--muted); }
.rd-choice.good, .rd-choice.right { background: var(--good-soft); border-color: var(--good); }
.rd-choice.bad { background: var(--bad-soft); border-color: var(--bad); }
.rd-foot { width: 100%; max-width: 520px; margin: 0 auto; }

/* Lecture flash : texte collé */
.paste-card { margin: 0 0 16px; }
.paste-area {
  display: block; width: 100%; min-height: 150px; resize: vertical; padding: 14px 16px; border-radius: 18px;
  border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.5;
}
.paste-area:focus { outline: none; border-color: var(--ex); }
.paste-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin-top: 8px; }
.paste-info { flex: 1 1 100%; margin: 0; font-size: 14px; color: var(--ink-2); }
.link-btn { appearance: none; border: 0; background: none; padding: 6px 0; cursor: pointer; color: var(--ex-ink); font-weight: 600; font-size: 14px; }
.start-status { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--bad); text-align: center; }
.stage-body.paused .rd-word { opacity: 0.35; }

@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Go / No-Go */
.gng-wrap { position: relative; flex: 1; min-height: 0; margin-top: 12px; display: grid; place-items: center; border-radius: 30px; cursor: pointer; transition: background 0.15s; }
.gng-wrap.oops { background: var(--bad-soft); }
.gng-fix { position: absolute; font-size: 34px; font-weight: 300; color: var(--muted); }
.gng-shape { position: relative; width: min(46vw, 30vh, 200px); aspect-ratio: 1; background: var(--ex); transition: transform 0.1s; }
.gng-shape.go { border-radius: 50%; box-shadow: 0 18px 50px -16px var(--ex); }
.gng-shape.nogo { border-radius: 8%; background: var(--ink); }
.gng-wrap.rounded .gng-shape.nogo { border-radius: 28%; background: var(--ex); }
.gng-shape.hit { transform: scale(0.88); }

/* Stroop */
.st-main { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px 0; }
.st-screen {
  width: 100%; max-width: 460px; aspect-ratio: 16 / 10; display: grid; place-items: center;
  border-radius: 30px; background: #1c1a44; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: box-shadow 0.2s;
}
.st-screen.late { box-shadow: inset 0 0 0 3px var(--bad); }
.st-word { font-size: clamp(44px, 13vw, 76px); font-weight: 800; letter-spacing: 0.02em; }
.st-pad { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; margin: 0 auto; }
.st-btn {
  position: relative; min-height: 78px; border: 0; border-radius: 24px; cursor: pointer;
  background: var(--c); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14); transition: transform 0.08s;
}
.st-btn:active { transform: scale(0.96); }
.st-btn kbd { position: absolute; top: 8px; left: 12px; font: inherit; font-size: 12px; font-weight: 600; color: rgba(28, 26, 68, 0.6); }
.st-btn.good { box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--good); }
.st-btn.bad { animation: shake 0.3s; box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--bad); }

/* Table de Schulte */
.sc-status { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.sc-target { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--ex-ink); font-variant-numeric: tabular-nums; }
.sc-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px 0; }
.sc-board { --board: min(92vw, 58vh, 480px); position: relative; width: var(--board); height: var(--board); }
@supports (height: 1dvh) { .sc-board { --board: min(92vw, 58dvh, 480px); } }
.sc-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: 100%; height: 100%; }
.sc-cell {
  border: 0; border-radius: 14px; background: var(--cell); color: var(--ink); cursor: pointer;
  font: inherit; font-weight: 650; font-size: calc(var(--board) / var(--n) * 0.36); font-variant-numeric: tabular-nums;
  transition: background 0.15s, color 0.15s;
}
.sc-cell.mid { box-shadow: inset 0 0 0 3px var(--ex); }
.sc-cell.found { background: var(--ex-soft); color: var(--muted); }
.sc-cell.bad { animation: shake 0.3s; background: var(--bad-soft); }
.sc-grid.done .sc-cell { background: var(--ex-soft); color: var(--ex-ink); }
.sc-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ex-ink); box-shadow: 0 0 0 4px var(--paper); pointer-events: none; }

/* Respiration */
.br-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.br-main .target { width: min(78vw, 44vh, 340px); }
.br-main .target-core { background: var(--ex); opacity: 0.92; transition-property: transform; transition-timing-function: ease-in-out; box-shadow: 0 0 70px -10px var(--ex); }
.br-label { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.br-secs { min-height: 1.5em; margin: -16px 0 0; font-size: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- Progrès ---------- */
.screen.wide h1 { margin-bottom: 18px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; padding: 18px 0; }
.stat { padding: 0 14px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-value { font-size: 26px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
.stat-label { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.empty { padding: 28px 18px; text-align: center; }
.empty p { margin-bottom: 16px; }
.grid-2 { display: grid; gap: 12px; }
.chart-card h3 { display: flex; align-items: center; gap: 8px; }
.chart-card h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ex); transform: rotate(45deg); }
.chart-card p { margin: -6px 0 10px; font-size: 13px; color: var(--ink-2); }

.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart .grid { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--axis); stroke-width: 1; }
.chart .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; font-family: var(--font); }
.chart .line { fill: none; stroke: var(--ex-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: var(--ex); opacity: 0.16; }
.chart .dot { fill: var(--ex-ink); stroke: var(--surface); stroke-width: 2; }
.chart .end-label { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font); }
.chart .cross { stroke: var(--axis); stroke-width: 1; }
.chart .tip {
  position: absolute; z-index: 2; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px)); padding: 6px 10px; border-radius: 10px;
  background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 600;
  opacity: 0; transition: opacity 0.1s;
}
.chart .tip.show { opacity: 1; }

.cal-wrap { display: flex; gap: 6px; }
.cal-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; font-size: 10px; color: var(--muted); line-height: 1; }
.cal-days span { display: flex; align-items: center; }
.cal { flex: 1; min-width: 0; display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.cal-cell { display: block; width: 100%; min-width: 0; aspect-ratio: 1; padding: 0; border: 0; border-radius: 5px; background: var(--surface-2); cursor: pointer; }
.cal-cell.l1 { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.cal-cell.l2 { background: var(--brand); }
.cal-cell.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-cell.future { background: transparent; box-shadow: none; cursor: default; }
.cal-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.cal-legend span { display: flex; align-items: center; gap: 6px; }
.cal-legend .cal-cell { width: 12px; height: 12px; cursor: default; }
.cal-detail { margin: 10px 0 0; min-height: 1.4em; }
.cal-detail::first-letter { text-transform: uppercase; }

/* Ressenti et résultats : deux points sur une échelle 0-100 (jours bas en anneau, jours hauts pleins). */
.bilan { display: grid; gap: 14px; padding: 18px; }
.bilan > p { margin: 0; }
.db-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.db-legend span { display: inline-flex; align-items: center; gap: 7px; }
.db-key { width: 12px; height: 12px; border-radius: 50%; }
.db-key.low, .db-dot.low { background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand); }
.db-key.high, .db-dot.high { background: var(--brand); }
.db-row { padding-top: 12px; border-top: 1px solid var(--line); }
.db-name { font-weight: 650; }
.db { position: relative; height: 56px; margin: 0 10px; }
.db-track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--grid); }
.db-mid { position: absolute; left: 50%; top: 50%; width: 2px; height: 12px; margin: -6px 0 0 -1px; background: var(--axis); }
.db-span { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--brand); }
.db-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; }
.db-dot.high { box-shadow: 0 0 0 2px var(--surface); }
.db-dot span { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.db-dot.low span { top: 17px; }
.db-dot.high span { bottom: 17px; }
.db-text { margin: 0; font-size: 15px; }

.history { padding: 4px 16px; }
.history-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
.history-row + .history-row { border-top: 1px solid var(--line); }
.history-row .title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.history-row .title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ex); }
.history-row .opts { color: var(--ink-2); font-weight: 450; }
.history-row .when { padding-left: 16px; }
.history-val { font-weight: 650; font-size: 15px; white-space: nowrap; color: var(--ex-ink); font-variant-numeric: tabular-nums; }

/* ---------- Réglages ---------- */
.group { margin-top: 26px; }
.group-title { margin: 0 0 8px 4px; font-size: 15px; font-weight: 650; color: var(--ink-2); }
.rows { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; min-height: 58px; }
.row + .row { border-top: 1px solid var(--line); }
.row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.row .hint { font-size: 13px; color: var(--ink-2); }
.switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; cursor: pointer; margin: 0;
  width: 52px; height: 32px; border-radius: 99px; background: var(--surface-3); transition: background 0.2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s;
}
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }
/* Choix des exercices de la séance */
.row.pick { justify-content: flex-start; cursor: pointer; }
.pick-icon { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--ex); color: var(--ex-on); }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-total { font-weight: 600; background: var(--surface-2); }
.pick-total .hint { font-weight: 400; }
.about { margin-top: 28px; }

/* ---------- Atterrissage du soir ---------- */
/* Palette de nuit (ciel aubergine, texte crème) pour tout le rituel et ses cartes,
   quel que soit le thème. Le soleil se couche d'un palier à l'autre. */
body.nuit, .nuit {
  color-scheme: dark;
  --paper: #130b21;
  --surface: #1e1231;
  --surface-2: #2a1a40;
  --surface-3: #3b2755;
  --cell: #2a1a40;
  --ink: #fbeadb;
  --ink-2: #cfb3c0;
  --muted: #9c819a;
  --line: rgba(251, 234, 219, 0.1);
  --on-ink: #130b21;
  --brand: #ffab6e;
  --brand-soft: rgba(255, 171, 110, 0.16);
  --grid: #2e1d44;
  --axis: #4a3366;
  --lift: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  --ex: var(--ember); --ex-on: #24101a; --ex-ink: #ffab6e; --ex-soft: rgba(255, 122, 69, 0.16);
  color: var(--ink);
}
.descent .s1, .soir-steps .s1 { --c: var(--sun); }
.descent .s2, .soir-steps .s2 { --c: var(--ember); }
.descent .s3, .soir-steps .s3 { --c: var(--rose); }
.btn-sunset {
  background: linear-gradient(100deg, var(--sun), var(--ember) 55%, var(--rose)); color: #24101a;
  box-shadow: 0 16px 34px -18px var(--ember);
}

/* Le ciel : fond dégradé dans le dessin, soleil à anneaux gradués, reflets sur l'eau. */
.sky { --sky-top: var(--paper); --sky-low: #2b1543; --sea-top: #24102f; --sky-floor: var(--paper); position: relative; width: 100%; aspect-ratio: 320 / 200; }
.sky.crop { aspect-ratio: 320 / 150; }
.sky-svg { display: block; width: 100%; height: 100%; }
.sky-top { stop-color: var(--sky-top); }
.sky-low { stop-color: var(--sky-low); }
.sea-top { stop-color: var(--sea-top); }
.sky-floor { stop-color: var(--sky-floor); }
.sky-sun { transform: translate(160px, 64px); transition: transform 1.6s cubic-bezier(0.45, 0, 0.2, 1); }
.sky[data-stage="1"] .sky-sun { transform: translate(160px, 84px); }
.sky[data-stage="2"] .sky-sun { transform: translate(160px, 110px); }
.sky[data-stage="3"] .sky-sun { transform: translate(160px, 166px); }
.sky[data-stage="4"] .sky-sun { transform: translate(160px, 250px); }
.sky-ring { fill: none; stroke: var(--sun); stroke-width: 4; opacity: 0.5; }
.sky-ring + .sky-ring { stroke-width: 5; opacity: 0.8; }
.sky-horizon { stroke: rgba(255, 196, 150, 0.32); stroke-width: 1.5; }
.sky-water line { stroke: var(--sun); stroke-width: 2.5; stroke-linecap: round; opacity: 0.3; transition: opacity 1.6s; }
.sky[data-stage="2"] .sky-water line { opacity: 0.6; }
.sky[data-stage="3"] .sky-water line { opacity: 0.16; }
.sky[data-stage="4"] .sky-water line { opacity: 0; }
.sky-dusk { opacity: 0.55; transition: opacity 1.6s; }
.sky[data-stage="2"] .sky-dusk { opacity: 1; }
.sky[data-stage="3"] .sky-dusk { opacity: 0.6; }
.sky[data-stage="4"] .sky-dusk { opacity: 0; }
.sky-stars circle { fill: #fbeadb; }
.sky-moon { fill: #ffe3c4; }
.sky-stars, .sky-moon { opacity: 0; transition: opacity 2.4s; }
.sky[data-stage="3"] .sky-stars { opacity: 0.4; }
.sky[data-stage="4"] .sky-stars { opacity: 0.9; }
.sky[data-stage="4"] .sky-moon { opacity: 1; }
/* Les pensées rangées : des étoiles chaudes, visibles à toute heure, qui scintillent doucement. */
.sky-thought { opacity: 0; transition: opacity 1.8s; }
.sky-thought.on { opacity: 1; animation: twinkle 5s ease-in-out 1.8s infinite; }
.sky-thought circle { fill: #ffe3c4; }
.sky-thought .halo { fill: var(--sun); opacity: 0.25; }
@keyframes twinkle { 50% { opacity: 0.55; } }
/* Sur la page, le ciel se fond dans la nuit par les côtés. */
.soir-step .sky { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }

/* Présentation */
.soir-hero { overflow: hidden; margin-bottom: 14px; border-radius: 30px; background: var(--surface); }
.soir-hero .sky, .soir-card .sky { --sky-top: #170d29; --sky-floor: var(--surface); }
.soir-hero-text { padding: 0 20px 20px; }
.soir-hero h1 { font-size: 40px; margin: -6px 0 6px; }
.soir-hero p { margin: 0; max-width: 40ch; color: var(--ink-2); font-size: 16px; line-height: 1.45; }
/* Les paliers descendent, comme le soleil : chacun un cran plus bas que le précédent. */
.descent { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.descent li { display: flex; gap: 12px; padding: 13px 15px 13px 13px; border-radius: 20px; background: var(--surface); }
.descent li:nth-child(2) { margin-left: 12px; }
.descent li:nth-child(3) { margin-left: 24px; }
.descent-n {
  flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #24101a; font-size: 14px; font-weight: 750;
}
.descent-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.descent-head strong { font-weight: 650; }
.descent-head span { flex: none; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.descent p { margin: 2px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.soir-note { margin: 16px auto 0; max-width: 42ch; text-align: center; }
.soir-link { display: block; width: fit-content; margin: 10px auto 0; padding: 6px; color: var(--ex-ink); font-size: 14px; font-weight: 600; text-decoration: none; }

/* Paliers : plein écran, centré, une seule chose à faire à la fois. */
.soir-step {
  min-height: 100vh; min-height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column;
  padding: calc(var(--safe-top) + 10px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 16px);
}
.soir-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.soir-top-gap { flex: none; width: 44px; }
.soir-steps { flex: 1; display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.soir-steps li { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-3); }
.soir-steps li.done { background: var(--c); }
.soir-steps li.cur { flex: 2.4; background: linear-gradient(90deg, var(--c) calc(var(--f, 0.1) * 100%), var(--surface-3) 0); }
.soir-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 0; text-align: center; }
.soir-main h1 { font-size: 34px; font-weight: 650; }
.soir-count { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.soir-lead { max-width: 32ch; margin: 6px auto 0; font-size: 18px; line-height: 1.45; color: var(--ink-2); }
.soir-actions { display: grid; gap: 10px; }

/* Vider la tête : chaque pensée écrite monte dans le ciel et y devient une étoile. */
.soir-step-1 .soir-main .sky { max-width: 380px; margin-bottom: 4px; }
.soir-step-1 .soir-main h1 { font-size: 28px; font-weight: 550; }
.thought-zone { position: relative; width: 100%; max-width: 420px; margin-top: 22px; }
.thought-form { display: flex; gap: 8px; }
.thought-form[hidden] { display: none; }
.thought-form .btn { flex: none; min-height: 46px; padding: 10px 18px; font-size: 15px; }
.thought-count { min-height: 1.4em; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.thought-rise {
  position: absolute; top: 12px; left: 0; right: 0; overflow: hidden; pointer-events: none;
  color: var(--ink); font-size: 17px; white-space: nowrap; text-overflow: ellipsis; animation: rise 1.4s ease-in forwards;
}
@keyframes rise { to { transform: translateY(-200px) scale(0.5); opacity: 0; } }

/* Ralentir : le soleil respire et descend, l'écran s'assombrit peu à peu. */
.soir-breath { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.soir-breath .sky { max-width: 520px; }
.soir-breath .sky-sun { transition-timing-function: ease-in-out; }
.soir-breath-label { margin: 14px 0 0; font-size: 32px; font-weight: 400; letter-spacing: -0.01em; }
.soir-breath-hint { margin: 6px 0 0; max-width: 30ch; color: var(--ink-2); transition: opacity 1.2s; }
.soir-breath-hint.fade { opacity: 0; }
.soir-dim { position: fixed; inset: 0; z-index: 20; pointer-events: none; background: #000; opacity: 0; transition: opacity 180s linear; }
.soir-dim.on { opacity: 0.6; }

/* Poser : le geste à faire, montré en boucle. */
.soir-step-3 .soir-main .sky { max-width: 380px; margin-bottom: 4px; }
.soir-step-3 .soir-main h1 { font-weight: 550; }
.flip { width: 56px; height: 96px; margin: 26px auto 4px; perspective: 360px; }
.flip i { display: block; width: 100%; height: 100%; border-radius: 14px; border: 3px solid var(--ink-2); animation: flip 3.6s ease-in-out infinite; }
@keyframes flip {
  0% { transform: rotateY(0); background: linear-gradient(160deg, var(--sun), var(--rose)); opacity: 0; }
  12% { opacity: 1; }
  30% { transform: rotateY(0); }
  47% { background: linear-gradient(160deg, var(--sun), var(--rose)); }
  48% { background: var(--surface-2); }
  66%, 86% { transform: rotateY(180deg); opacity: 1; }
  100% { transform: rotateY(180deg); background: var(--surface-2); opacity: 0; }
}
.soir-flip-hint { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* Écran noir, téléphone posé : à peine une phrase, qui s'efface. */
.blackout {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 18px;
  padding: 0 24px calc(var(--safe-bottom) + 48px); background: #000; opacity: 0; pointer-events: none; transition: opacity 2.5s;
}
.blackout.on { opacity: 1; pointer-events: auto; }
.blackout-text { max-width: 30ch; margin: 0; text-align: center; font-size: 17px; font-weight: 300; line-height: 1.5; color: #4d3531; transition: opacity 2s; }
.blackout-text.fade { opacity: 0; }
.blackout.lifted .blackout-text { color: var(--ink-2); font-size: 20px; font-weight: 400; }
.blackout-stop { min-height: 46px; padding: 10px 26px; background: #1c1220; color: var(--muted); }
.blackout-stop[hidden] { display: none; }

/* Fin : la nuit est tombée. */
.soir-end .sky { max-width: 440px; }
.soir-end h1 { margin-top: 4px; font-size: 48px; font-weight: 300; letter-spacing: -0.02em; }
.soir-streak {
  display: inline-flex; align-items: center; gap: 7px; margin: 20px 0 0; padding: 8px 15px; border-radius: 99px;
  background: var(--surface); color: var(--ink-2); font-size: 15px; font-weight: 550;
}
.soir-streak svg { color: var(--violet); }
.soir-home { justify-self: center; padding: 12px; color: var(--muted); }

/* Accueil : grande carte le soir, simple ligne dans la journée. */
.soir-card {
  display: block; overflow: hidden; margin: 18px 0 8px; border-radius: 30px; background: var(--surface);
  color: var(--ink); text-decoration: none; box-shadow: var(--lift); transition: transform 0.12s;
}
.soir-card:active { transform: scale(0.98); }
.soir-card-body { display: flex; align-items: center; gap: 14px; padding: 0 18px 18px; }
.soir-card-body h2 { font-size: 22px; }
.soir-card-body p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.soir-card-go {
  flex: none; width: 52px; height: 52px; margin-left: auto; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--sun), var(--ember) 60%, var(--rose)); color: #24101a; box-shadow: 0 12px 26px -12px var(--ember);
}
.soir-line {
  display: flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 14px 16px; border-radius: 20px;
  background: var(--paper); color: var(--ink-2); font-size: 15px; text-decoration: none;
}
.soir-line svg { flex: none; color: var(--violet); }
.soir-line strong { color: var(--ink); font-weight: 650; }
.soir-tag { margin-left: auto; padding: 3px 10px; border-radius: 99px; background: rgba(155, 124, 255, 0.2); color: #cdbcff; font-size: 13px; font-weight: 600; }

/* Accueil, le lendemain matin : ce qui tournait dans la tête au coucher. */
.pensees { margin: 18px 0 0; padding: 16px 18px; border-radius: 24px; background: var(--paper); color: var(--ink); }
.pensees-head { display: flex; align-items: center; gap: 8px; color: var(--violet); }
.pensees-head h2 { margin: 0; color: var(--ink); font-size: 18px; }
.pensees ul { margin: 10px 0 6px; padding-left: 20px; color: var(--ink-2); font-size: 16px; line-height: 1.45; }

/* Fin de séance : l'engagement pour ce soir. */
.soir-engage { display: grid; gap: 12px; margin-top: 22px; padding: 18px; border-radius: 24px; background: var(--paper); color: var(--ink); text-align: left; }
.soir-engage[hidden] { display: none; }
.soir-engage .field { margin: 0; }
.soir-engage-head { display: flex; align-items: center; gap: 8px; color: var(--violet); }
.soir-engage-head h3 { margin: 0; color: var(--ink); }
.soir-engage-text { margin: 0; font-size: 18px; line-height: 1.4; }
.soir-engage-actions { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; }
.soir-engage-done { display: flex; align-items: flex-start; gap: 12px; }
.soir-engage-done p { flex: 1; display: flex; gap: 8px; margin: 0; font-size: 15px; color: var(--ink-2); }
.soir-engage-done p svg { flex: none; margin-top: 2px; color: var(--sun); }
.soir-engage-done .link-btn { padding: 0; }

/* Réglages : heure, activité. */
.time-input {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.text-input {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 0; border-radius: 14px;
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 16px;
}
.text-input::placeholder { color: var(--muted); }
.apres { display: grid; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  appearance: none; border: 0; cursor: pointer; padding: 8px 13px; border-radius: 99px;
  background: var(--surface-2); color: var(--ink-2); font-size: 14px; font-weight: 600; transition: background 0.15s, color 0.15s;
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.group-note { margin: 10px 4px 0; }

/* Progrès : heure du téléphone posé, soir après soir. */
.soir-progress { padding: 4px 16px 16px; background: var(--paper); }
.soir-stats { margin: 0 -16px 2px; }
.night-chart .planned { stroke: var(--violet); stroke-width: 1.5; stroke-dasharray: 4 4; }
.night-chart .night-dot { fill: var(--sun); stroke: var(--paper); stroke-width: 2; pointer-events: none; }
.night-chart .tick.now { fill: var(--ink); font-weight: 700; }
.night-chart .night-hit { cursor: pointer; }
.night-chart .night-hit.sel { fill: rgba(251, 234, 219, 0.07); }
.key-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--sun); }
.key-line { width: 16px; border-top: 2px dashed var(--violet); }

/* ---------- Tablette et grand écran ---------- */
@media (min-width: 720px) {
  .screen { max-width: 760px; padding-left: calc(var(--safe-left) + 32px); padding-right: calc(var(--safe-right) + 32px); padding-top: calc(var(--safe-top) + 36px); }
  .screen.wide { max-width: 980px; }
  .screen.narrow { max-width: 600px; }
  h1 { font-size: 40px; }
  .home-head h1 { font-size: 46px; }
  .daily { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 36px; text-align: left; }
  .target { width: 250px; }
  .daily-text h2 { font-size: 30px; }
  .daily-steps { justify-content: flex-start; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile { min-height: 200px; }
  .ex-hero { min-height: 210px; padding: 28px; }
  .ex-hero h1 { font-size: 44px; }
  .ex-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 32px; }
  #tabbar a { flex-direction: row; justify-content: center; gap: 8px; font-size: 14px; padding: 10px 0; }
  .stage { max-width: 760px; padding-left: calc(var(--safe-left) + 28px); padding-right: calc(var(--safe-right) + 28px); }
  .soir-step { max-width: 640px; }
  .soir-card { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
  .soir-card-body { padding: 18px 24px 18px 0; }
  .nb-grid, .sq-grid { --size: min(80vw, 58vh, 560px); gap: 14px; }
  @supports (height: 1dvh) { .nb-grid, .sq-grid { --size: min(80vw, 58dvh, 560px); } }
  .resp-btn { min-height: 100px; font-size: 21px; }
  .keypad { max-width: 520px; width: 100%; margin: 0 auto; }
  .keypad button { min-height: 68px; }
  .calc-top { max-width: 520px; width: 100%; margin-left: auto; margin-right: auto; }
}

/* Paysage (téléphone couché ou tablette en largeur) : zone de jeu à gauche, commandes à droite. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 900px) {
  .stage { max-width: 1100px; }
  .stage-nback .stage-body, .stage-calcul .stage-body { flex-direction: row; align-items: center; gap: 28px; }
  .stage-nback .nb-wrap { flex: 1.3; height: 100%; }
  .nb-grid, .sq-grid { --size: min(46vw, 74vh, 560px); }
  @supports (height: 1dvh) { .nb-grid, .sq-grid { --size: min(46vw, 74dvh, 560px); } }
  .stage-nback .resp-row { flex: 1; flex-direction: column; align-self: stretch; justify-content: center; }
  .stage-nback .resp-btn { flex: 0 1 140px; }
  .stage-calcul .calc-top { position: absolute; top: 0; left: 0; right: 0; max-width: none; margin: 8px 0 0; }
  .stage-calcul .calc-main { flex: 1; height: 100%; }
  .stage-calcul .keypad { flex: 1; max-width: 420px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .keypad button { min-height: 48px; font-size: 22px; }
  .keypad { gap: 8px; }
  .resp-btn { min-height: 70px; }
  .stage-status { margin-top: 6px; }
}

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