/* ============================================================
   Thème sombre commun
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --bg:    #0b0f14;
  --panel: #151d27;
  --text:  #eaf1f8;
  --muted: #8595a6;
  --a: #ef4444;  /* rouge  */
  --b: #f59e0b;  /* orange */
  --c: #22c55e;  /* vert   */
  --d: #3b82f6;  /* bleu   */
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.muted { color: var(--muted); }
.spacer { flex: 1; }

.dot { width: .7rem; height: .7rem; border-radius: 50%; background: #f43f5e; color: #f43f5e; box-shadow: 0 0 8px currentColor; transition: .2s; }
.dot.on { background: #22c55e; color: #22c55e; }

/* ============================================================
   ÉCRAN PC — ultra simple, changement instantané (aucune animation)
   ============================================================ */
body.display { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; gap: 2vh; }
.dot.corner { position: fixed; top: 12px; left: 14px; }
.q-num { font-size: 16vh; font-weight: 800; color: var(--muted); letter-spacing: .02em; line-height: 1; }
.answer { font-size: 46vh; font-weight: 900; line-height: 1; }   /* pas de transition => instantané */
.answer.empty { color: #2a3543; }
.answer.a { color: var(--a); }
.answer.b { color: var(--b); }
.answer.c { color: var(--c); }
.answer.d { color: var(--d); }

/* ============================================================
   TÉLÉPHONE — boutons A/B/C/D + navigation
   ============================================================ */
body.phone { display: flex; flex-direction: column; height: 100vh; }
.bar { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; background: var(--panel); font-size: 1rem; }

.pad { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: .6rem; padding: .6rem; }
.key {
  border: none; border-radius: 1.2rem; color: #fff; cursor: pointer; user-select: none;
  font-size: 20vw; font-weight: 800; display: flex; align-items: center; justify-content: center;
  filter: brightness(.82); transition: filter .1s, transform .06s, box-shadow .1s;
}
.key:active { transform: scale(.96); }
/* Réponse actuellement enregistrée pour cette question : bien mise en évidence. */
.key.selected { filter: brightness(1.15); box-shadow: inset 0 0 0 .35rem #fff, 0 0 0 .2rem rgba(255,255,255,.35); }
.key-a { background: var(--a); }
.key-b { background: var(--b); }
.key-c { background: var(--c); }
.key-d { background: var(--d); }

.nav { display: flex; gap: .6rem; padding: .6rem; }
.navbtn { flex: 1; border: none; border-radius: 1rem; background: #1e2a38; color: var(--text); font-size: 1.3rem; font-weight: 700; padding: 1rem 0; cursor: pointer; }
.navbtn:active { background: #26364a; }

.jump { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 .6rem .8rem; }
.jump input { width: 5rem; text-align: center; font-size: 1.1rem; padding: .5rem; border-radius: .6rem; border: 1px solid #26364a; background: #0e141b; color: var(--text); }
.jump button { border: none; border-radius: .6rem; background: #1e2a38; color: var(--text); padding: .55rem 1rem; font-size: 1.1rem; cursor: pointer; }