:root {
  /* Le caisson lumineux et la pièce autour. Le fond n'est pas noir : un noir pur écrase la
     lueur du panneau, alors qu'un bleu de nuit la laisse exister. */
  --nuit: #0a1420;
  --panneau: #12202f;
  --panneau-haut: #1b2d40;
  --bord: #24394f;

  /* La lumière du négatoscope traverse le film : c'est un blanc froid, jamais pur. */
  --lumiere: #dff0ff;
  --lumiere-douce: #8fa9c0;
  --lumiere-faible: #5d7a94;
  /* Le bleu-gris du corps sur le film : assez clair pour se détacher, assez éteint pour que
     la zone ambrée reste la seule chose que l'œil attrape. */
  --os: #2f4a63;

  /* L'ambre est la seule couleur chaude de la page. Elle ne sert qu'à deux choses : la zone
     qui fait mal, et ce sur quoi on peut appuyer. Partout ailleurs, ce serait du bruit. */
  --ambre: #f2a541;
  --ambre-sombre: #b8761f;

  --juste: #3fbf87;
  --faux: #e2564d;

  --rayon: 14px;
  --marge: clamp(14px, 4.5vw, 24px);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  /* La lueur du caisson, derrière tout le reste. */
  background:
    radial-gradient(120% 70% at 50% 0%, #16273a 0%, var(--nuit) 62%),
    var(--nuit);
  color: var(--lumiere);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

/* Tout ce qui est relevé, mesuré, numéroté passe en chasse fixe : c'est la langue des
   appareils, et ça distingue d'un coup d'œil la donnée du récit. */
.releve {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page {
  max-width: 620px;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) var(--marge)
           calc(20px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Écrans ------------------------------------------------------------------------- */

.ecran { display: none; flex-direction: column; gap: 16px; flex: 1; }
.ecran[data-actif] { display: flex; }

/* --- Accueil ------------------------------------------------------------------------ */

.accueil { justify-content: center; text-align: center; gap: 22px; }

/* Le nom se lit en deux temps : la mention du cabinet, discrète et espacée comme une plaque
   gravée, puis le prénom en pleine lumière. C'est lui qu'on retient, c'est lui qui est gros. */
.enseigne {
  margin: 0;
  font-size: clamp(3.2rem, 17vw, 4.6rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--ambre);
}
.enseigne small {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.185em;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lumiere-douce);
  margin-bottom: 0.7em;
}

.accroche {
  margin: 0;
  color: var(--lumiere-douce);
  font-size: 1.05rem;
  text-wrap: balance;
}

.regle {
  display: grid;
  gap: 10px;
  text-align: left;
  background: var(--panneau);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px;
  margin: 0;
}
.regle div { display: flex; gap: 12px; align-items: baseline; }
.regle dt {
  color: var(--ambre);
  font-size: 0.72rem;
  flex: 0 0 1.6em;
}
.regle dd { margin: 0; color: var(--lumiere-douce); font-size: 0.95rem; }
.regle dd b { color: var(--lumiere); font-weight: 600; }

.record {
  margin: 0;
  color: var(--lumiere-douce);
  font-size: 0.75rem;
}
.record b { color: var(--lumiere); }

/* --- Boutons ------------------------------------------------------------------------ */

.bouton {
  appearance: none;
  width: 100%;
  min-height: 58px;
  border-radius: var(--rayon);
  border: 1px solid var(--ambre-sombre);
  background: linear-gradient(180deg, #f6b45c, var(--ambre));
  color: #1b1206;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.bouton:active { transform: scale(0.98); filter: brightness(0.94); }

.bouton--discret {
  background: transparent;
  border-color: var(--bord);
  color: var(--lumiere-douce);
  font-weight: 600;
  min-height: 48px;
  font-size: 0.95rem;
}

:where(button, a):focus-visible {
  outline: 3px solid var(--ambre);
  outline-offset: 3px;
}

/* --- Bandeau de consultation -------------------------------------------------------- */

.bandeau {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  color: var(--lumiere-douce);
}

/* La progression n'est pas une barre pleine mais une série de plots : à dix cas, on compte
   ce qui reste d'un coup d'œil, et chaque plot porte son verdict. */
.plots { display: flex; gap: 5px; flex: 1; }
.plot {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--bord);
  transition: background 0.3s ease;
}
.plot[data-etat="juste"] { background: var(--juste); }
.plot[data-etat="faux"] { background: var(--faux); }
.plot[data-etat="encours"] { background: var(--ambre); }

.score { color: var(--lumiere); font-weight: 700; }

/* --- Le cas ------------------------------------------------------------------------- */

/* TOUT L'ÉNONCÉ DANS UN SEUL OBJET
   Qui est le patient, où ça se passe et ce qu'il ressent forment une seule information : les
   séparer en deux blocs faisait flotter les signes hors du cadre pendant que la colonne de
   droite restait vide. Les zones de grille permettent aux signes de changer de place selon la
   largeur sans changer le HTML — sous la silhouette sur un téléphone, où une colonne de
   200 px rendrait le texte illisible ; à côté d'elle dès qu'il y a la place. */
.cas {
  background: var(--panneau);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 14px;
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas:
    "corps patient"
    "signes signes";
  gap: 12px 14px;
  align-items: start;
}
.cas__corps { grid-area: corps; }
.patient { grid-area: patient; }
.signes { grid-area: signes; }

.corps { width: 100%; height: auto; display: block; }

/* Le corps est peint deux fois : un contour large et sombre qui le décolle du panneau, puis
   la silhouette éclairée par-dessus. C'est ce qui donne l'impression du film sur le caisson. */
.corps--ombre { fill: #0e1b28; stroke: #0e1b28; }
.corps--os { fill: var(--os); stroke: var(--os); }
.corps--masque { fill: #fff; stroke: #fff; }

/* La zone qui fait mal respire, comme une douleur qui va et vient. */
.halo { animation: braise 2.6s ease-in-out infinite; }
@keyframes braise {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.72; }
}

.patient { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.patient__qui {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.patient__contexte {
  margin: 0;
  color: var(--lumiere-douce);
  font-size: 0.92rem;
}

.constantes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.constantes li {
  font-size: 0.66rem;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--panneau-haut);
  border: 1px solid var(--bord);
  color: var(--lumiere-douce);
}
.constantes b { color: var(--lumiere); font-weight: 600; }

.signes {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--bord);
  list-style: none;
  display: grid;
  gap: 7px;
}
.signes li {
  position: relative;
  /* Assez large pour le cadratin ET l'espace qui le suit : à 16 px le texte venait toucher
     le tiret, et la liste se lisait comme un seul mot. */
  padding-left: 24px;
  font-size: 0.95rem;
}
/* Le tiret cadratin plutôt qu'une puce ronde : c'est la ponctuation de l'observation
   médicale écrite à la main, et ça ne fait pas liste de courses. */
.signes li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ambre);
}

.zone-lue {
  margin: 0;
  font-size: 0.62rem;
  color: var(--lumiere-douce);
  text-align: center;
}

/* --- Les quatre diagnostics --------------------------------------------------------- */

.question {
  margin: 0;
  font-size: 0.7rem;
  color: var(--lumiere-douce);
}

.choix { display: grid; gap: 9px; }

.diag {
  appearance: none;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  text-align: left;
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  background: var(--panneau);
  color: var(--lumiere);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.diag:active { transform: scale(0.99); }
.diag__lettre {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--panneau-haut);
  border: 1px solid var(--bord);
  font-size: 0.7rem;
  color: var(--lumiere-douce);
}

.diag[data-verdict="juste"] {
  border-color: var(--juste);
  background: color-mix(in srgb, var(--juste) 16%, var(--panneau));
}
.diag[data-verdict="juste"] .diag__lettre {
  background: var(--juste);
  border-color: var(--juste);
  color: #04150d;
}
.diag[data-verdict="faux"] {
  border-color: var(--faux);
  background: color-mix(in srgb, var(--faux) 15%, var(--panneau));
}
.diag[data-verdict="faux"] .diag__lettre {
  background: var(--faux);
  border-color: var(--faux);
  color: #1d0605;
}
.diag[disabled] { cursor: default; opacity: 1; }
.diag[disabled]:not([data-verdict]) { opacity: 0.42; }

/* --- Le verdict --------------------------------------------------------------------- */

.verdict {
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  background: var(--panneau);
  padding: 15px;
  display: grid;
  gap: 10px;
  animation: monte 0.28s ease both;
}
@keyframes monte {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.verdict__titre {
  margin: 0;
  font-size: 0.72rem;
  color: var(--lumiere-douce);
}
.verdict__titre b { color: var(--lumiere); }
.verdict[data-etat="juste"] .verdict__titre b { color: var(--juste); }
.verdict[data-etat="faux"] .verdict__titre b { color: var(--faux); }

.verdict__texte { margin: 0; font-size: 0.95rem; color: var(--lumiere-douce); }
.verdict__texte b { color: var(--lumiere); font-weight: 600; }

/* Le signe qui tranche : c'est l'objet le plus utile de l'écran, il est traité comme une
   note épinglée sur le dossier plutôt que comme un paragraphe de plus. */
.cle {
  margin: 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--nuit);
  border-left: 3px solid var(--ambre);
  font-size: 0.92rem;
}
.cle b {
  display: block;
  font-size: 0.62rem;
  color: var(--ambre);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 3px;
  font-weight: 600;
}

/* --- Résultat ----------------------------------------------------------------------- */

.bilan { justify-content: center; gap: 18px; text-align: center; }

.note {
  font-size: clamp(3.4rem, 20vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.note span { color: var(--lumiere-douce); font-size: 0.42em; }

.grade {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ambre);
  letter-spacing: -0.02em;
}
.mot { margin: 0; color: var(--lumiere-douce); text-wrap: balance; }

.rates {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  text-align: left;
}
.rates li {
  background: var(--panneau);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--faux);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.88rem;
  color: var(--lumiere-douce);
}
.rates b { color: var(--lumiere); font-weight: 600; }
.rates i { font-style: normal; color: var(--faux); }

.titre-liste {
  margin: 0;
  font-size: 0.68rem;
  color: var(--lumiere-douce);
  text-align: left;
}

/* --- Pied -------------------------------------------------------------------------- */

.avertissement {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #5d7a94;
  text-align: center;
  text-wrap: balance;
}

/* --- Écrans larges ------------------------------------------------------------------ */

@media (min-width: 560px) {
  .cas {
    grid-template-columns: 140px 1fr;
    /* La silhouette tient les deux rangées, les signes remontent à côté d'elle : c'est
       l'espace qui restait vide à droite de l'identité. */
    grid-template-areas:
      "corps patient"
      "corps signes";
    padding: 18px;
    gap: 12px 20px;
  }
  .choix { grid-template-columns: 1fr 1fr; }
  .verdict { padding: 18px; }
}

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