/* ────────────────────────────────────────────────────────────────────────────
   styles.css — Bridge SEF, édition pro
   Style éditorial presse écrite : papier crème, encre charbon, rouge sang
   pour ♥♦, or terni en accent. Dark mode = papier journal nuit.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Polices variables embarquées (latin) ─────────────────────────────────── */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-wght-italic.woff2") format("woff2-variations"),
       url("fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/lora-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/lora-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/lora-latin-wght-italic.woff2") format("woff2-variations"),
       url("fonts/lora-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-wght-italic.woff2") format("woff2-variations"),
       url("fonts/jetbrains-mono-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── Variables : palette presse, light + dark ─────────────────────────────── */
:root {
  --paper:        #f4ede0;
  --paper-2:      #ede4d2;
  --paper-3:      #e3d6bc;
  --ink:          #1a1815;
  --ink-soft:     #423b32;
  --ink-mute:     #7a6e5e;
  --red:          #b32228;
  --red-deep:     #8a151a;
  --gold:         #b58c3a;
  --gold-soft:    #d4ad59;
  --green:        #426b3a;
  --line:         rgba(26, 24, 21, 0.18);
  --line-strong:  rgba(26, 24, 21, 0.42);

  --shadow-soft:  0 1px 0 rgba(26, 24, 21, 0.05), 0 2px 12px rgba(26, 24, 21, 0.06);
  --shadow-press: inset 0 0 0 1px var(--line);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --font-display: "Fraunces", "Lora", Georgia, serif;
  --font-body:    "Lora", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --paper:        #161310;
  --paper-2:      #1f1b16;
  --paper-3:      #2a241d;
  --ink:          #ece2cf;
  --ink-soft:     #c0b59f;
  --ink-mute:     #847764;
  --red:          #d94850;
  --red-deep:     #b1313a;
  --gold:         #d4ad59;
  --gold-soft:    #e9c577;
  --green:        #6fa15f;
  --line:         rgba(236, 226, 207, 0.16);
  --line-strong:  rgba(236, 226, 207, 0.38);

  --shadow-soft:  0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* Respecte la préférence système quand l'utilisateur n'a pas fixé de thème. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --paper:        #161310;
    --paper-2:      #1f1b16;
    --paper-3:      #2a241d;
    --ink:          #ece2cf;
    --ink-soft:     #c0b59f;
    --ink-mute:     #847764;
    --red:          #d94850;
    --red-deep:     #b1313a;
    --gold:         #d4ad59;
    --gold-soft:    #e9c577;
    --green:        #6fa15f;
    --line:         rgba(236, 226, 207, 0.16);
    --line-strong:  rgba(236, 226, 207, 0.38);
    --shadow-soft:  0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 18px rgba(0, 0, 0, 0.35);
  }
}

/* ── Reset minimal ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ── Body + texture papier ───────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,0.025) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.02) 0%, transparent 40%);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.025) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.02) 0%, transparent 40%);
}

/* Focus accessible. */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Masthead (en-tête presse) ───────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 10;
  backdrop-filter: blur(6px);
}
.masthead-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-dot {
  color: var(--red);
  font-weight: 900;
  margin: 0 1px;
}
.brand-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.masthead-actions {
  display: flex;
  gap: 8px;
}
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ink-soft);
  transition: background 0.18s, color 0.18s, transform 0.12s;
}
.icon-btn:hover { background: var(--paper-2); color: var(--ink); }
.icon-btn:active { transform: scale(0.94); }

/* ── Main / screens ──────────────────────────────────────────────────────── */
main {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 80px;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: screenIn 0.32s ease both;
}
/* Override : .screen { display: flex } gagnait en spécificité contre [hidden]
   par défaut → tous les écrans étaient empilés. Cette règle restaure le bon
   masquage initial. */
.screen[hidden] {
  display: none;
}

@keyframes screenIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

/* ── Editorial header (kicker + display + lead) ──────────────────────────── */
.editorial {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--red);
  margin: 0 0 10px;
}
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
}
.display em {
  font-style: italic;
  font-weight: 500;
  color: var(--red);
}
.lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.lead em { font-style: italic; color: var(--ink); }

/* ── Sections + titres ───────────────────────────────────────────────────── */
.card-section { display: flex; flex-direction: column; gap: 10px; }
.section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin: 0;
}

/* ── Segmented selector (mode/niveau) ────────────────────────────────────── */
.seg {
  display: grid;
  gap: 8px;
}
.seg-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  color: var(--ink-soft);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.12s;
  text-align: left;
  width: 100%;
}
.seg-btn:hover { background: var(--paper-3); }
.seg-btn:active { transform: scale(0.985); }
.seg-btn.is-active {
  background: var(--paper-3);
  border-left-color: var(--gold);
  color: var(--ink);
}
.seg-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
}
.seg-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}

/* ── Boutons primary / secondary / tertiary ──────────────────────────────── */
.home-actions, .end-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.btn-primary, .btn-secondary, .btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  text-align: center;
  transition: transform 0.12s, background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
  min-height: 48px;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.btn-secondary {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { background: var(--paper-3); }
.btn-tertiary {
  background: transparent;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
}
.btn-tertiary:hover { background: var(--paper-2); color: var(--ink); }
.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active { transform: scale(0.96); }

/* ── HUD (en-tête de partie) ─────────────────────────────────────────────── */
.hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-right { justify-content: flex-end; }
.hud-center { display: flex; justify-content: center; }

.hud-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.hud-score {
  font-weight: 600;
  color: var(--gold);
  background: var(--paper);
  border-color: var(--gold-soft);
}

.hud-lives {
  display: flex;
  gap: 4px;
  font-size: 20px;
  line-height: 1;
}
.heart {
  color: var(--red);
  transform-origin: center;
  display: inline-block;
}
.heart[data-alive="false"] {
  color: var(--ink-mute);
  opacity: 0.32;
}
.heart.is-dying {
  animation: heartPop 0.55s ease both;
}
@keyframes heartPop {
  0%   { transform: scale(1); color: var(--red); }
  30%  { transform: scale(1.4); color: var(--red); }
  60%  { transform: scale(0.6); color: var(--red-deep); }
  100% { transform: scale(1); color: var(--ink-mute); opacity: 0.32; }
}

.hud-quit {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  color: var(--ink-mute);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s, transform 0.12s;
}
.hud-quit:hover { background: var(--paper-3); color: var(--ink); }
.hud-quit:active { transform: scale(0.92); }

/* ── Timer (arcade) ──────────────────────────────────────────────────────── */
.timer-shell {
  height: 6px;
  width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.timer-shell[hidden] { display: none; }
.timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--green) 0%, var(--gold) 60%, var(--red) 100%);
  transform: scaleX(1);
  transform-origin: left center;
}

/* ── Hand card (la main du joueur) ───────────────────────────────────────── */
.hand-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-soft);
}
.hand-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.hand-label-mark {
  color: var(--red);
  font-weight: 600;
}
.hand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.suit {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: 0.05em;
  line-height: 1.25;
}
.suit-icon {
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 30px);
  width: 1.2em;
  display: inline-block;
  text-align: center;
}
.suit-cards {
  color: var(--ink);
  font-weight: 500;
}
.suit[data-suit="H"] .suit-icon,
.suit[data-suit="D"] .suit-icon {
  color: var(--red);
}
.suit[data-suit="S"] .suit-icon,
.suit[data-suit="C"] .suit-icon {
  color: var(--ink);
}
.suit-cards:empty::before,
.suit-cards:where([data-empty="true"])::before {
  content: "—";
  color: var(--ink-mute);
}

/* ── Question + choix ────────────────────────────────────────────────────── */
.question {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.q-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin: 0;
}
.q-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 5.8vw, 28px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.choices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.2;
  text-align: left;
  color: var(--ink);
  transition: background 0.18s, border-color 0.18s, transform 0.12s, color 0.18s;
  min-height: 60px;
  width: 100%;
}
.choice:hover { background: var(--paper-3); }
.choice:active { transform: scale(0.985); }
.choice:disabled { cursor: default; opacity: 0.85; }
.choice-key {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.06em;
  min-width: 24px;
  text-align: center;
}
.choice-label {
  flex: 1;
  font-weight: 500;
  font-size: 19px;
}
.choice.is-correct {
  background: rgba(66, 107, 58, 0.16);
  border-color: var(--green);
  border-left-color: var(--green);
  color: var(--green);
}
[data-theme="dark"] .choice.is-correct {
  background: rgba(111, 161, 95, 0.22);
}
.choice.is-correct .choice-key { color: var(--green); border-color: var(--green); }
.choice.is-wrong {
  background: rgba(179, 34, 40, 0.16);
  border-color: var(--red);
  border-left-color: var(--red);
  color: var(--red);
}
[data-theme="dark"] .choice.is-wrong {
  background: rgba(217, 72, 80, 0.22);
}
.choice.is-wrong .choice-key { color: var(--red); border-color: var(--red); }
.choice.is-muted { opacity: 0.55; }

/* ── Feedback ────────────────────────────────────────────────────────────── */
.feedback {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feedback[hidden] { display: none; }
.feedback-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.feedback-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-weight: 700;
  color: var(--paper);
}
.feedback.is-correct .feedback-mark { background: var(--green); }
.feedback.is-wrong   .feedback-mark { background: var(--red); }
.feedback.is-timeout .feedback-mark { background: var(--ink-soft); }
.feedback-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
}
.feedback.is-correct .feedback-text { color: var(--green); }
.feedback.is-wrong   .feedback-text { color: var(--red); }
.feedback.is-timeout .feedback-text { color: var(--ink-soft); }
.feedback-explanation {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.kbd {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  letter-spacing: 0;
}

/* ── End screen (fin de partie) ──────────────────────────────────────────── */
.end-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.end-stat {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.end-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.end-stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.end-comment {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Replay list ─────────────────────────────────────────────────────────── */
.replay-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.replay-item {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.replay-item.is-correct { border-left-color: var(--green); }
.replay-item.is-wrong   { border-left-color: var(--red); }
.replay-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.replay-num {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.replay-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.replay-item.is-correct .replay-status { color: var(--green); }
.replay-item.is-wrong   .replay-status { color: var(--red); }
.replay-hand {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--ink);
}
.replay-hand .red { color: var(--red); }
.replay-verdict {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.replay-verdict b {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
}
.replay-answer {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}

/* ── Stats par catégorie ─────────────────────────────────────────────────── */
.cats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cat-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease,
              transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cat-row:hover { background: var(--paper-3); border-color: var(--line-strong); }
.cat-row:active { transform: scale(0.985); transition: transform 0.09s ease-out; }
.cat-arrow {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 13px;
  margin-left: 6px;
}
.cat-row-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
}
.cat-label {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}
.cat-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.cat-meta b {
  font-weight: 600;
  color: var(--gold);
}
.cat-bar {
  height: 4px;
  background: var(--paper);
  border-radius: 2px;
  overflow: hidden;
}
.cat-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-soft) 0%, var(--gold) 60%, var(--green) 100%);
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ── Footnotes ──────────────────────────────────────────────────────────── */
.footnote {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
}
.footnote em { font-style: italic; color: var(--ink-soft); }
.home-footnote {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* ── Responsive : un peu plus généreux à partir de tablette ─────────────── */
@media (min-width: 560px) {
  main { padding: 32px 28px 100px; }
  .seg { grid-template-columns: 1fr 1fr; }
  .end-actions, .home-actions { flex-direction: row; flex-wrap: wrap; }
  .end-actions > *, .home-actions > * { flex: 1; min-width: 0; }
  .end-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 760px) {
  body { font-size: 18px; }
  main { padding: 48px 32px 120px; }
}

/* ── Bandeau install iOS (manuel, hors beforeinstallprompt) ──────────────── */
.install-banner {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--paper-3);
  border-bottom: 1px solid var(--line-strong);
  animation: bannerSlideDown 0.34s ease both;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.install-banner[hidden] { display: none; }
.install-banner.is-leaving { animation: bannerSlideUp 0.28s ease both; }
.install-banner-icon {
  font-size: 22px;
  color: var(--red);
  line-height: 1;
  flex-shrink: 0;
}
.install-banner-text {
  margin: 0;
  flex: 1;
}
.install-banner-text b {
  color: var(--ink);
  font-weight: 600;
}
.install-banner-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--ink-mute);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s, transform 0.12s;
}
.install-banner-close:hover { background: var(--paper-2); color: var(--ink); }
.install-banner-close:active { transform: scale(0.92); }

@keyframes bannerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes bannerSlideUp {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

/* ── Toast "nouvelle version disponible" ─────────────────────────────────── */
.update-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  animation: toastSlideUp 0.32s ease both;
  font-family: var(--font-body);
  font-size: 14.5px;
  max-width: 640px;
  margin: 0 auto;
}
.update-toast[hidden] { display: none; }
.update-toast.is-leaving { animation: toastSlideDown 0.28s ease both; }
.update-toast-text {
  flex: 1;
  color: var(--paper);
}
.update-toast-btn {
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.18s, transform 0.12s;
}
.update-toast-btn:hover { background: var(--gold-soft); }
.update-toast-btn:active { transform: scale(0.96); }
.update-toast-dismiss {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--paper);
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: background 0.18s, opacity 0.18s;
}
.update-toast-dismiss:hover { background: rgba(255,255,255,0.1); opacity: 1; }

@keyframes toastSlideUp {
  from { transform: translateY(calc(100% + 20px)); opacity: 0; }
  to   { transform: translateY(0);                 opacity: 1; }
}
@keyframes toastSlideDown {
  from { transform: translateY(0);                 opacity: 1; }
  to   { transform: translateY(calc(100% + 20px)); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase A — Polish UX "App Store" : sheet + notice + ombres + spring + cascade
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Bottom sheet (remplace les window.confirm) ──────────────────────────── */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 40;
  animation: fadeIn 0.24s ease both;
}
.sheet-backdrop[hidden] { display: none; }
.sheet-backdrop.is-leaving { animation: fadeOut 0.22s ease both; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  padding: 12px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18),
              0 -1px 0 rgba(0, 0, 0, 0.04);
  animation: sheetUp 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
  max-width: 640px;
  margin: 0 auto;
}
.sheet[hidden] { display: none; }
.sheet.is-leaving { animation: sheetDown 0.26s ease both; }
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-strong);
  margin: 0 auto 18px;
  opacity: 0.55;
}
.sheet-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--ink);
}
.sheet-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 20px;
}
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Variante destructive : bouton primaire rouge (reset, quitter en partie). */
.sheet-confirm.is-destructive {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
}
.sheet-confirm.is-destructive:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
}

@keyframes sheetUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes sheetDown { from { transform: translateY(0); }    to { transform: translateY(100%); } }
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut   { from { opacity: 1; } to { opacity: 0; } }

/* ── Notice toast (remplace les window.alert) ────────────────────────────── */
.notice {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.26);
  animation: noticeIn 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  max-width: 640px;
  margin: 0 auto;
}
.notice[hidden] { display: none; }
.notice.is-leaving { animation: noticeOut 0.24s ease both; }
.notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--gold);
  color: var(--ink);
}
.notice.is-success .notice-icon { background: var(--green); color: var(--paper); }
.notice.is-error   .notice-icon { background: var(--red);   color: var(--paper); }
.notice.is-info    .notice-icon { background: var(--gold);  color: var(--ink); }
.notice-text { flex: 1; color: var(--paper); }

@keyframes noticeIn  { from { transform: translateY(-110%); opacity: 0; }
                       to   { transform: translateY(0);     opacity: 1; } }
@keyframes noticeOut { from { transform: translateY(0);     opacity: 1; }
                       to   { transform: translateY(-110%); opacity: 0; } }

/* ── Cascade reveal des couleurs de la main (70 ms entre ♠ ♥ ♦ ♣) ────────── */
.hand .suit {
  animation: suitReveal 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.hand .suit[data-suit="S"] { animation-delay: 0ms;   }
.hand .suit[data-suit="H"] { animation-delay: 70ms;  }
.hand .suit[data-suit="D"] { animation-delay: 140ms; }
.hand .suit[data-suit="C"] { animation-delay: 210ms; }

@keyframes suitReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Élévation subtile des cards (profondeur "App Store") ────────────────── */
.end-stat,
.replay-item,
.cat-row,
.feedback,
.update-toast {
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04),
              0 2px 10px rgba(26, 24, 21, 0.05);
}
[data-theme="dark"] .end-stat,
[data-theme="dark"] .replay-item,
[data-theme="dark"] .cat-row,
[data-theme="dark"] .feedback,
[data-theme="dark"] .update-toast {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              0 2px 14px rgba(0, 0, 0, 0.35);
}
.hand-card {
  /* Accentue légèrement la dominance de la card centrale. */
  box-shadow: 0 1px 0 rgba(26, 24, 21, 0.05),
              0 4px 18px rgba(26, 24, 21, 0.08);
}
[data-theme="dark"] .hand-card {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5),
              0 4px 28px rgba(0, 0, 0, 0.45);
}

/* ── Spring physics sur les feedbacks tactiles ───────────────────────────── */
/* Le RELÂCHEMENT utilise un easing spring (bouncy) pour donner ce toucher
   "natif" iOS. L'appui (:active) reste rapide et linéaire — l'œil ne doit
   voir le bounce qu'au retour à scale(1). */
.choice, .btn-primary, .btn-secondary, .btn-tertiary,
.seg-btn, .icon-btn, .hud-quit,
.install-banner-close, .update-toast-btn, .update-toast-dismiss,
.sheet-confirm, .sheet .btn-tertiary {
  transition: background 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease,
              opacity 0.18s ease,
              transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.choice:active, .btn-primary:active, .btn-secondary:active, .btn-tertiary:active,
.seg-btn:active, .icon-btn:active, .hud-quit:active,
.install-banner-close:active, .update-toast-btn:active, .update-toast-dismiss:active,
.sheet-confirm:active, .sheet .btn-tertiary:active {
  transition: transform 0.09s ease-out;
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase B — Empty states (replay vide, stats avant première partie)
   ──────────────────────────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 56px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.empty-state[hidden] { display: none; }
.empty-state-mark {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  font-style: italic;
  margin-bottom: 4px;
  letter-spacing: -0.05em;
}
.empty-state-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin: 0;
}
.empty-state-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34ch;
}
.empty-state .btn-secondary {
  margin-top: 8px;
  min-width: 200px;
  align-self: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase C — Stats riches : streak live HUD + best streak + sparkline + barres
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Chip streak dans le HUD (visible à partir de 3 bonnes réponses) ─────── */
.hud-streak {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  color: var(--gold);
  background: var(--paper);
  border-color: var(--gold-soft);
  letter-spacing: 0;
  animation: streakPulse 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hud-streak[hidden] { display: none; }

@keyframes streakPulse {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Sparkline (10 dernières parties, écran Stats) ───────────────────────── */
.sparkline-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04),
              0 2px 10px rgba(26, 24, 21, 0.05);
}
[data-theme="dark"] .sparkline-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              0 2px 14px rgba(0, 0, 0, 0.35);
}
.sparkline-card[hidden] { display: none; }
.sparkline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.sparkline-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.sparkline-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.sparkline-meta b {
  color: var(--gold);
  font-weight: 600;
}
.sparkline-meta .trend-up   { color: var(--green); }
.sparkline-meta .trend-down { color: var(--red); }
.sparkline-meta .trend-flat { color: var(--ink-mute); }
#sparkline {
  width: 100%;
  height: 48px;
  display: block;
}

/* ── Grid 5 colonnes sur écran Stats (5e stat = best série) ──────────────── */
@media (min-width: 560px) {
  #screen-stats .end-stats {
    grid-template-columns: repeat(5, 1fr);
  }
}
/* ── Mobile (< 560px) : la 5e stat (Best arcade) prend la pleine largeur
       pour éviter le 2+2+1 orphelin. ──────────────────────────────────── */
@media (max-width: 559px) {
  #screen-stats .end-stats > .end-stat:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase D — Écran Réglages (Settings) : groupes + rows + toggle-seg + actions
   ──────────────────────────────────────────────────────────────────────────── */

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-group-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin: 8px 0 0;
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04),
              0 2px 10px rgba(26, 24, 21, 0.05);
}
[data-theme="dark"] .settings-row {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              0 2px 14px rgba(0, 0, 0, 0.35);
}
.settings-label {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}
.settings-value {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}

.settings-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04),
              0 2px 10px rgba(26, 24, 21, 0.05);
}
[data-theme="dark"] .settings-action {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              0 2px 14px rgba(0, 0, 0, 0.35);
}
.settings-action:hover { background: var(--paper-3); }
.settings-action.is-destructive {
  color: var(--red);
  border-left-color: var(--red);
}
.settings-action.is-destructive:hover {
  background: rgba(179, 34, 40, 0.08);
}
[data-theme="dark"] .settings-action.is-destructive:hover {
  background: rgba(217, 72, 80, 0.12);
}
.settings-action-chevron {
  font-family: var(--font-display);
  color: var(--ink-mute);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.settings-action.is-destructive .settings-action-chevron { color: var(--red); }

/* ── Toggle segmented (Clair/Sombre, On/Off) ─────────────────────────────── */
.toggle-seg {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
}
.toggle-seg-btn {
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  transition: background 0.22s ease, color 0.22s ease;
  min-width: 56px;
}
.toggle-seg-btn:hover { color: var(--ink); }
.toggle-seg-btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

.settings-about {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  padding: 14px 18px;
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase E — Refonte home "tap and play" (App Store grade)
   ──────────────────────────────────────────────────────────────────────────── */

/* Centre verticalement la home sur grands écrans */
#screen-home {
  min-height: calc(100dvh - 140px);
  justify-content: center;
  gap: 24px;
}

/* ── Hero : illustration SVG + titre + tagline ──────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 0;
}
.hero-art {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}
.hero-art .card-bg {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 6px rgba(26, 24, 21, 0.12));
}
[data-theme="dark"] .hero-art .card-bg {
  fill: var(--paper-2);
  stroke: var(--ink);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
}
.hero-art .card-suit {
  font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
  font-weight: 600;
}
.hero-art .suit-spade,
.hero-art .suit-club    { fill: var(--ink); }
.hero-art .suit-heart,
.hero-art .suit-diamond { fill: var(--red); }

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 10vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 0;
}
.hero-dot {
  color: var(--red);
  font-weight: 900;
  margin: 0 2px;
}
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(17px, 4.5vw, 21px);
  line-height: 1.3;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.hero-tagline em {
  font-style: italic;
  font-weight: 500;
}

/* ── CTA primaire + config row + lien stats ──────────────────────────────── */
.home-cta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.btn-hero {
  font-size: 18px;
  font-weight: 600;
  padding: 18px 24px;
  min-height: 56px;
  border-radius: 14px;
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}
.config-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  align-self: center;
  transition: color 0.18s ease, transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.config-row:hover { color: var(--ink); }
.config-row:active { transform: scale(0.97); transition: transform 0.09s ease-out; }
.config-row-chevron {
  font-size: 13px;
  color: var(--gold);
  font-family: var(--font-display);
}
.btn-tertiary-quiet {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-mute);
  padding: 10px 16px;
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
.btn-tertiary-quiet:hover {
  color: var(--ink);
  text-decoration-color: var(--gold);
}

/* ── Pre-game sheet : Mode + Niveau en chips horizontales ────────────────── */
.sheet-pregame {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.sheet-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin: 18px 0 8px;
}
.chip-row {
  display: flex;
  gap: 6px;
  margin: 0;
  flex-wrap: wrap;
}
.chip {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 10px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
              transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip:active { transform: scale(0.96); transition: transform 0.09s ease-out; }
.chip-narrow {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 10px 6px;
  min-width: 48px;
}
.chip:hover { color: var(--ink); background: var(--paper-3); }
.chip.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.sheet-pregame-help {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  margin: 16px 0 6px;
  text-align: center;
  min-height: 1.4em;
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase F — Onboarding (premier lancement uniquement)
   ──────────────────────────────────────────────────────────────────────────── */

#screen-onboarding {
  min-height: calc(100dvh - 80px);
  justify-content: center;
  gap: 28px;
  position: relative;
  padding-top: 16px;
}
.onboarding-skip {
  position: absolute;
  top: 0;
  right: 4px;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 12px 16px;
  cursor: pointer;
  transition: color 0.18s ease;
}
.onboarding-skip:hover { color: var(--ink); }
.onboarding-slide {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 8px;
  animation: screenIn 0.32s ease both;
}
.onboarding-slide[hidden] { display: none; }
.onboarding-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  letter-spacing: 0.04em;
}
.onboarding-mark em {
  font-style: italic;
  font-weight: 700;
}
.onboarding-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 7vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.onboarding-text {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 36ch;
}
.onboarding-text em { font-style: italic; color: var(--ink); }
.onboarding-text b { font-weight: 600; color: var(--ink); font-family: var(--font-display); }
.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 0.24s ease, transform 0.24s ease;
}
.onboarding-dot.is-active {
  background: var(--gold);
  transform: scale(1.35);
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase F — Graph radar (9 axes par catégorie SEF)
   ──────────────────────────────────────────────────────────────────────────── */

.radar-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04),
              0 2px 10px rgba(26, 24, 21, 0.05);
}
[data-theme="dark"] .radar-card {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              0 2px 14px rgba(0, 0, 0, 0.35);
}
.radar-card[hidden] { display: none; }
.radar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.radar-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.radar-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
.radar-meta b {
  color: var(--gold);
  font-weight: 600;
}
#radar {
  width: 100%;
  height: 320px;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════════════
   Phase F — Palier + Achievements
   ──────────────────────────────────────────────────────────────────────────── */

.palier-banner {
  background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04),
              0 2px 12px rgba(181, 140, 58, 0.10);
}
[data-theme="dark"] .palier-banner {
  background: linear-gradient(135deg, var(--paper-2) 0%, var(--paper-3) 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              0 2px 14px rgba(212, 173, 89, 0.10);
}
.palier-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 26px;
  color: var(--gold);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.palier-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.achievements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.achievement {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
}
.achievement-icon {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--line-strong);
  flex-shrink: 0;
  line-height: 1;
}
.achievement-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.achievement-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-mute);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.achievement-desc {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.achievement.is-unlocked {
  border-color: var(--gold-soft);
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04),
              0 2px 10px rgba(181, 140, 58, 0.10);
}
.achievement.is-unlocked .achievement-icon { color: var(--gold); }
.achievement.is-unlocked .achievement-label { color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════════
   Phase F — Pédagogie : Conventions SEF cheat sheet
   ──────────────────────────────────────────────────────────────────────────── */

.conventions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.convention-item {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(26, 24, 21, 0.04),
              0 2px 10px rgba(26, 24, 21, 0.05);
}
[data-theme="dark"] .convention-item {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              0 2px 14px rgba(0, 0, 0, 0.35);
}
.convention-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.convention-rule {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.convention-rule em { font-style: italic; color: var(--ink); }
.convention-example {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin: 0;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
}

/* ── Reduced motion : neutralise les animations ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .timer-bar {
    transition: none !important;
  }
}