/* Température du Léman
 *
 * Identité reprise d'une maquette d'app de réservation : violet et lilas, fonds
 * clairs, cartes blanches très arrondies, icônes en filet, et un histogramme
 * d'affluence — devenu ici « quand y aller », qui répond à la vraie question
 * d'un baigneur. La température ne colore plus le fond : elle colore les barres
 * et les points de la carte, là où elle se compare.
 */

:root {
  --ink: #1b1b2f;
  --ink-soft: rgba(27, 27, 47, .56);
  --rule: rgba(27, 27, 47, .1);
  --paper: #f5f5fb;
  --card: #ffffff;
  --accent: #7b5cf5;
  --accent-ink: #ffffff;
  --accent-soft: #ece7fe;
  /* Violet assombri : l'accent lui-même manque de contraste sur le lilas pâle. */
  --accent-ink-on-soft: #4a2fd0;
  --accent-dim: rgba(123, 92, 245, .16);

  --gutter: 20px;
  --radius: 22px;
  --radius-sm: 16px;
  /* Hauteur du bandeau d'action fixe, encoche comprise : sert à réserver la
     place en bas de page, plutôt que de deviner à chaque endroit qui en a
     besoin. Valeur de repli seulement — `app.js` la mesure et la corrige, car
     elle change avec l'encoche, l'invite d'installation et un libellé qui
     passerait à la ligne. */
  --dock-h: 90px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f1fa;
    --ink-soft: rgba(242, 241, 250, .58);
    --rule: rgba(242, 241, 250, .13);
    --paper: #13131d;
    --card: #1e1e2c;
    --accent: #a48cff;
    --accent-ink: #17122b;
    --accent-soft: #272041;
    --accent-ink-on-soft: #cfc2ff;
    --accent-dim: rgba(164, 140, 255, .22);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Bandeau lilas en tête, comme l'illustration de la maquette : il habille le
   haut de l'écran sans que la couleur ne porte d'information. */
.wash {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 340px;
  z-index: 0;
  pointer-events: none;
  /* Indispensable : la vague ci-dessous dépasse volontairement de 30 % de chaque
     côté pour pouvoir se déplacer. Sans ce clip, elle élargit le document de
     près de deux cents pixels — `overflow-x: hidden` sur body masque le
     débordement à la peinture, mais iOS laisse quand même déplacer la page au
     doigt, et l'écran se décale entier. */
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% -30%, var(--accent-dim) 0%, transparent 68%),
    linear-gradient(var(--accent-soft), transparent 92%);
}

/* Une vague qui traverse le bandeau une fois, à l'ouverture. Elle ne boucle pas :
   un mouvement perpétuel derrière une valeur qu'on vient lire finirait par gêner. */
.wash::after {
  content: '';
  position: absolute;
  left: -30%;
  right: -30%;
  top: 96px;
  height: 200px;
  opacity: 0;
  /* Les dégradés s'éteignent avant les bords de la boîte. À 100 % d'extension
     ils y arrivaient encore visibles, et la vague se terminait sur un trait net. */
  background:
    radial-gradient(52% 52% at 22% 50%, rgba(255, 255, 255, .5) 0%, transparent 72%),
    radial-gradient(44% 48% at 70% 46%, var(--accent-dim) 0%, transparent 74%);
  animation: swell 2.6s cubic-bezier(.25, .6, .3, 1) 120ms 1 both;
}

@keyframes swell {
  0%   { opacity: 0;   transform: translateX(-14%) skewY(-1.6deg); }
  40%  { opacity: .85; }
  100% { opacity: 0;   transform: translateX(12%) skewY(1.2deg); }
}

@media (prefers-color-scheme: dark) {
  .wash::after { mix-blend-mode: screen; }
}

@media (prefers-reduced-motion: reduce) {
  .wash::after { animation: none; display: none; }
}

.app {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  /* Le bandeau d'action est fixe et flotte par-dessus : sans cette réserve,
     il couvrirait le pied de page plutôt que de simplement le surplomber.
     `--dock-h` inclut déjà l'encoche du bas, mesurée avec le bandeau. */
  padding: 0 calc(env(safe-area-inset-right) + var(--gutter))
           calc(var(--dock-h) + 20px)
           calc(env(safe-area-inset-left) + var(--gutter));
}

/* ------------------------------------------------------------ en-tête */

.screen {
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: calc(env(safe-area-inset-top) + 16px);
  /* Même réserve qu'en pied de page : la carte de durée, centrée par marge
     automatique, ne doit pas se retrouver sous le bandeau fixe. */
  padding-bottom: calc(var(--dock-h) + 12px);
  display: flex;
  flex-direction: column;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mark {
  width: 40px;
  height: 28px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.tools { display: flex; gap: 6px; }

.ghost {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(27, 27, 47, .06);
}

.ghost svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ghost.busy svg { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ghost.busy svg { animation: none; } }

/* ------------------------------------------------------------ où je me baigne */

.whereat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.whereat label { flex: none; }

.whereat-far {
  flex: none;
  font-size: 12.5px;
  color: var(--ink-soft);
  opacity: .8;
}

/* Pastille violette autour du <select> : le menu reste natif — la roue d'iOS —
   et seule son enveloppe est dessinée. */
.pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
}

.pick select {
  /* 16 px au moins : en dessous, iOS zoome sur le champ à l'ouverture. */
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 30px 8px 15px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--accent-ink-on-soft);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.pick select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pick svg {
  position: absolute;
  right: 12px;
  width: 12px;
  height: 13px;
  fill: none;
  stroke: var(--accent-ink-on-soft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Ce que l'app dit du jour : entre le chiffre et les repères, en retrait. */
.greeting {
  max-width: 30ch;
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- température */

.readout {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}

.readout-value {
  margin: 0;
  display: flex;
  align-items: flex-start;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(3.2rem, 16vw, 4.4rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.readout-value .degree { font-size: .42em; line-height: 1.1; }

.readout-source {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stale .readout-value { opacity: .45; }

/* Trois repères en filet, sur le modèle des équipements de la maquette. */
.facts {
  display: flex;
  gap: 26px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.facts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-align: center;
}

.facts svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.facts b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 600; }

/* ---------------------------------------------------------------- cartes */

.card {
  display: block;
  margin-bottom: 12px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 1px 3px rgba(27, 27, 47, .05);
}

.card-title {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Précision sous le réglage : la règle appliquée, ou son plafond. */
.card-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
}

/* L'écran ne porte plus qu'une carte : elle flotte entre la lecture chiffrée et
   le bouton, plutôt que de laisser tout le vide s'accumuler d'un seul côté. */
.screen .card { margin: auto 0; }

/* Réglage de la durée : moins, valeur, plus, centrés sur une même ligne. */
.bath-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.round {
  width: 42px;
  height: 42px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font: 400 21px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
}

.bath-duration {
  margin: 0;
  min-width: 112px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.bath-unit {
  font-size: .3em;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- action */

/* Toujours à l'écran, quel que soit le défilement : le geste de lancement ne
   doit dépendre ni de remonter pour le retrouver, ni d'un excès de prudence
   pour l'éviter par mégarde en parcourant la carte ou la courbe. Un dégradé
   plutôt qu'un fond plat, pour que le contenu qui défile dessous s'estompe au
   lieu de s'interrompre net sous le bouton. */
.cta-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 16px var(--gutter) calc(env(safe-area-inset-bottom) + 16px);
  background: linear-gradient(to top, var(--paper) 60%, transparent);
  pointer-events: none;
}

.cta-dock .cta { pointer-events: auto; }

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 17px 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(123, 92, 245, .28);
}

.cta-icon { width: 14px; height: 14px; fill: currentColor; }

/* ---------------------------------------------------------------- blocs */

.block { margin-top: 30px; }

.micro {
  margin: 0 0 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.micro-note {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--ink-soft);
}

.micro-note a { color: inherit; }

/* ------------------------------------------------------------ courbe 7 jours */

.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .base { stroke: var(--rule); stroke-width: 1; }
.chart .axis { fill: var(--ink-soft); font-size: 9px; letter-spacing: .06em; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart .line-future { stroke-dasharray: 2 5; opacity: .55; }
.chart .now { fill: var(--accent); }
.chart .empty { fill: var(--ink-soft); font-size: 11px; }

.legend { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; }
.legend .key { width: 15px; border-top: 2.2px solid var(--accent); }
.legend .key-future { border-top-style: dotted; opacity: .55; margin-left: 8px; }

/* ---------------------------------------------------------- carte du lac */

.map {
  min-height: 180px;
  margin: 0 -4px;
}

.map svg { display: block; width: 100%; height: auto; overflow: visible; }

.map .shore {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: .35;
}

/* Zone sensible unique, au-dessus du dessin ; le choix se fait à la distance. */
.map .hitarea { fill: transparent; cursor: pointer; }
.map .lab, .map .nom, .map .dot, .map .ring { pointer-events: none; }
.map .ring { fill: none; stroke: var(--accent); stroke-width: 1.8; }

.map .lab {
  fill: var(--ink);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.map .nom {
  fill: var(--ink-soft);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.map .spot.on .nom { fill: var(--ink); }
.map .spot:focus { outline: none; }
.map .spot:focus-visible .dot { stroke: var(--accent); stroke-width: 2; }

.map .me-dot { fill: var(--ink); }
.map .me-halo { fill: var(--accent-dim); stroke: var(--ink); stroke-width: 1; }

/* ------------------------------------------------------------------ soutien */

.support { text-align: center; }

/* Pastille en filet, sur le lilas pâle : présente sans réclamer. Le violet
   plein reste réservé au bouton de lancement. */
.coffee {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink-on-soft);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.coffee svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.support .micro-note {
  max-width: 34ch;
  margin: 12px auto 0;
  line-height: 1.6;
}

/* Troisième niveau d'insistance : contour seul. Le violet plein est au bouton de
   lancement, le lilas au café, et ce contour à ce qui ne concerne qu'une partie
   des visiteurs. */
.commission {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 13px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
}

.commission svg {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.commission span { color: var(--ink-soft); }
.commission b { display: block; color: var(--accent-ink-on-soft); font-weight: 600; }

/* -------------------------------------------------------------- pied de page */

.foot { margin-top: 34px; }
.foot .micro-note { max-width: 46ch; line-height: 1.6; }

.diag { margin-top: 18px; }
.diag summary { cursor: pointer; }

.diag pre {
  margin: 12px 0 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--card);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ------------------------------------------------- consignes et minuteur */

.timer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: calc(env(safe-area-inset-top) + 24px) 22px calc(env(safe-area-inset-bottom) + 24px);
  background: var(--paper);
  background-image: radial-gradient(120% 60% at 80% -20%, var(--accent-dim) 0%, transparent 70%);
  text-align: center;
  overflow-y: auto;
}

.timer[hidden] { display: none; }

/* Un seul des trois panneaux à la fois : consignes, immersion, bilan. */
.timer .brief, .timer .timer-inner, .timer .after { display: none; }
.timer[data-state="briefing"] .brief,
.timer[data-state="running"] .timer-inner,
.timer[data-state="after"] .after { display: block; }

/* Pendant l'immersion, l'écran change de nature : fond profond, texte clair.
   On ne lit plus une donnée, on traverse un moment — et un fond sombre se
   regarde mieux les yeux pleins d'eau, à l'aube comme au crépuscule. */
.timer[data-state="running"],
.timer[data-state="after"] {
  --ink: #f4f2ff;
  --ink-soft: rgba(244, 242, 255, .62);
  --rule: rgba(244, 242, 255, .16);
  --card: rgba(255, 255, 255, .07);
  --accent: #b9a5ff;
  --accent-ink: #1b1436;
  --accent-dim: rgba(185, 165, 255, .22);
  color: var(--ink);
  background: #171233;
  background-image:
    radial-gradient(120% 80% at 50% -10%, #3a2a72 0%, transparent 72%),
    radial-gradient(90% 70% at 10% 110%, #14324d 0%, transparent 70%);
}

.timer[data-state="running"] .timer-warn,
.timer[data-state="after"] .after-facts { background: var(--card); }

.brief, .timer-inner, .after { width: 100%; max-width: 420px; }

.timer-phase {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.brief-duration {
  margin: 10px 0 22px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
}

.brief-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--card);
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
}

.brief-list li {
  padding: 10px 0 10px 20px;
  position: relative;
}

.brief-list li + li { border-top: 1px solid var(--rule); }

.brief-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.hold { display: grid; place-items: center; gap: 12px; }

.hold-btn {
  position: relative;
  width: 116px;
  height: 116px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(123, 92, 245, .18);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.hold-btn svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.hold-track { fill: none; stroke: var(--accent-dim); stroke-width: 6; }
.hold-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }

.hold-label {
  position: relative;
  font-size: 14px;
  font-weight: 600;
}

.hold-btn.held { transform: scale(.97); }
.hold-btn.held .hold-label { opacity: .6; }

@media (prefers-reduced-motion: no-preference) {
  .hold-btn { transition: transform 160ms ease; }
}

.brief .link-btn { margin-top: 20px; }

.brief-sources {
  margin: 18px 0 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.brief-sources a { color: inherit; }

/* ---------------------------------------------------------- immersion */

.timer-clock {
  margin: 10px 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: clamp(4.2rem, 24vw, 6.6rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.timer-hint {
  margin: 12px auto 0;
  max-width: 26ch;
  font-size: 15px;
  line-height: 1.45;
}

.breath { position: relative; display: grid; place-items: center; height: 128px; margin: 16px 0 4px; }
.breath[hidden] { display: none; }

.breath-ring {
  position: absolute;
  width: 112px;
  height: 112px;
  border: 2.5px solid var(--accent);
  border-radius: 50%;
  opacity: .35;
  transform: scale(.62);
  transition: transform 200ms linear, opacity 200ms linear;
}

.breath-word {
  position: relative;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.timer-bar {
  margin: 24px 0 10px;
  height: 6px;
  border-radius: 6px;
  background: var(--accent-dim);
  overflow: hidden;
}

.timer-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--accent);
  transition: width 250ms linear;
}

.timer-meta, .timer-note {
  margin: 0;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.timer-warn {
  margin: 22px auto 0;
  max-width: 32ch;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 13px;
  line-height: 1.45;
}

.timer[data-phase="done"] .timer-warn { background: var(--accent); color: var(--accent-ink); }
.timer[data-phase="done"] .timer-clock { animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .timer[data-phase="done"] .timer-clock { animation: none; }
  .timer-bar span, .breath-ring { transition: none; }
}

.timer-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
}

.timer-actions .cta { max-width: 260px; margin: 0; }

/* ------------------------------------------------------------ après le bain */

.after-word {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: clamp(2.8rem, 15vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}

.after-line {
  margin: 12px auto 30px;
  max-width: 26ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.after-facts {
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
  padding: 18px 10px;
  border-radius: var(--radius);
}

.after-facts p {
  flex: 1;
  margin: 0;
}

.after-facts b {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.after-facts span {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Le bilan de régularité : une phrase, jamais un tableau de bord. */
.after-stats {
  margin: 0 0 26px;
  font-size: 13.5px;
  color: var(--accent);
}

/* Une fois l'immersion inscrite, le bouton reste lisible mais ne se represse pas. */
.after .cta:disabled {
  background: var(--accent-dim);
  color: var(--ink-soft);
  box-shadow: none;
  cursor: default;
}

.cta-tick {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.timing { overflow: hidden; }

/* ------------------------------------------------------- invite & message */

.link-btn {
  border: 0;
  padding: 6px;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* Une ligne au pied de page, dans la taille des mentions de sources : elle se
   remarque quand on cherche à installer, et ne coûte rien au reste du temps. */
.install {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

.install[hidden] { display: none; }

.install svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.install b { color: var(--ink); font-weight: 600; }

.install .link-btn {
  flex: none;
  padding: 0;
  font-size: 11.5px;
  text-decoration: underline;
}

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* Au-dessus du bandeau, invite d'installation comprise puisque `--dock-h` la
     mesure : sinon le message passait derrière. */
  bottom: calc(var(--dock-h) + 16px);
  z-index: 6;
  max-width: calc(100% - 44px);
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13.5px;
  text-align: center;
}

/* ------------------------------------------------------------- balayage */

@keyframes enter-from-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes enter-from-left {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: none; }
}

.enter-next { animation: enter-from-right 260ms cubic-bezier(.22, .61, .36, 1); }
.enter-prev { animation: enter-from-left 260ms cubic-bezier(.22, .61, .36, 1); }

@media (prefers-reduced-motion: reduce) {
  .enter-next, .enter-prev { animation: none; }
}

.readout-value { -webkit-user-select: none; user-select: none; }