/* Cassation, le jeu de révision TrajectoireDroit. Charte alignée sur le site. */
:root {
  --navy:#1A2851; --navy-deep:#0F1A35; --blue-500:#34467F;
  --accent:#8A6A1C; --accent-soft:#AD8325; --gold-line:#C9A961; --gold-bg:#FBF8EE;
  --emerald:#10B981; --emerald-bg:#ECFDF5;
  --danger:#EF4444; --rose-bg:#FFF1F2;
  --white:#FFFFFF; --slate-50:#F8FAFC; --slate-100:#F1F5F9;
  --ink:#0F172A; --body:#475569; --muted:#5B6B84;
  --border:#E2E8F0; --border-strong:#CBD5E1;
  --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-2:0 4px 12px rgba(15,23,42,.08);
}

* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  background:var(--slate-50); color:var(--ink);
  min-height:100dvh; display:flex; flex-direction:column;
}

/* ===== Barre du haut ===== */
.topbar {
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; position:sticky; top:0; z-index:20;
  padding-top:max(10px, env(safe-area-inset-top));
}
.topbar .retour { color:#C2CCE6; text-decoration:none; font-size:.78rem; font-weight:600; }
.topbar .marque { font-family:'Spectral',serif; font-weight:800; font-size:1.05rem; letter-spacing:.02em; }
.topbar .jauges { font-size:.9rem; }
.topbar .jauges b { font-weight:800; }

/* ===== Écrans ===== */
#app { flex:1; width:100%; max-width:520px; margin:0 auto; padding:16px 14px 40px; }
.ecran { display:none; }
.ecran.actif { display:block; animation:apparait .18s ease-out; }
@keyframes apparait { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }

.hero h1 { font-family:'Spectral',serif; font-size:1.45rem; line-height:1.25; color:var(--navy); margin-bottom:8px; }
.hero .sous-titre { color:var(--body); font-size:.95rem; line-height:1.55; margin-bottom:18px; }

/* ===== Cartes ===== */
.carte {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
  padding:18px 16px; margin-bottom:16px;
}
.carte-titre { font-weight:800; color:var(--navy); margin-bottom:10px; font-size:1rem; }
.carte-texte { color:var(--body); font-size:.92rem; line-height:1.55; margin-bottom:12px; }
.carte-note { color:var(--muted); font-size:.8rem; margin-top:10px; line-height:1.5; }
.carte-arret { border-color:var(--gold-line); background:var(--gold-bg); }
.badge-num { color:var(--accent); font-weight:700; font-size:.85rem; }

/* ===== Boutons ===== */
.btn {
  display:block; width:100%; border:0; cursor:pointer;
  border-radius:var(--r-md); padding:13px 16px;
  font-family:inherit; font-size:.95rem; font-weight:700;
  margin-top:10px; text-align:center; text-decoration:none;
  transition:transform .06s ease, opacity .15s;
}
.btn:active { transform:scale(.985); }
.btn-navy { background:var(--navy); color:#fff; }
.btn-or { background:var(--accent); color:#fff; }
.btn-contour { background:#fff; color:var(--navy); border:1.5px solid var(--border-strong); }

/* ===== Sélecteurs matière / niveau ===== */
.choix-niveau { display:flex; gap:8px; margin-bottom:10px; }
.choix-niveau button {
  flex:1; padding:8px 0; border-radius:var(--r-pill); border:1.5px solid var(--border-strong);
  background:#fff; font-weight:700; font-family:inherit; font-size:.88rem; color:var(--body); cursor:pointer;
}
.choix-niveau button.actif { background:var(--navy); border-color:var(--navy); color:#fff; }
.choix-matiere select {
  width:100%; padding:11px 12px; border-radius:var(--r-md);
  border:1.5px solid var(--border-strong); background:#fff;
  font-family:inherit; font-size:.95rem; color:var(--ink); font-weight:600;
}
.ligne-cote { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.palier { font-weight:800; color:var(--accent); font-size:.9rem; }
.cote { color:var(--muted); font-weight:700; font-size:.9rem; }
.ligne-appel {
  margin-top:10px; background:var(--rose-bg); color:#9F1239;
  border-radius:var(--r-md); padding:9px 12px; font-size:.85rem; font-weight:600;
}

/* ===== Statistiques ===== */
.bloc-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat { background:var(--slate-100); border-radius:var(--r-md); padding:10px; text-align:center; }
.stat b { display:block; font-size:1.25rem; color:var(--navy); }
.stat span { font-size:.72rem; color:var(--muted); font-weight:600; }

/* ===== Email ===== */
.form-email { display:flex; flex-direction:column; gap:8px; }
.form-email input {
  padding:12px; border-radius:var(--r-md); border:1.5px solid var(--border-strong);
  font-family:inherit; font-size:.95rem;
}
.form-email .btn { margin-top:0; }

/* ===== Partie ===== */
.entete-partie { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.entete-titre { font-family:'Spectral',serif; font-weight:800; font-size:1.2rem; color:var(--navy); }
.btn-fermer {
  border:0; background:var(--slate-100); color:var(--muted);
  width:34px; height:34px; border-radius:50%; font-size:1rem; cursor:pointer; flex:none;
}
.progression { flex:1; height:8px; background:var(--border); border-radius:var(--r-pill); overflow:hidden; }
.barre { height:100%; width:0%; background:var(--accent); transition:width .25s ease; }
.compteur { font-weight:800; color:var(--muted); font-size:.85rem; }

.zone-chrono { height:6px; background:var(--border); border-radius:var(--r-pill); overflow:hidden; margin-bottom:12px; }
.chrono-barre { height:100%; width:100%; background:var(--emerald); }
.chrono-barre.urgent { background:var(--danger); }

.badge-format {
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.04em;
  color:var(--accent); background:var(--gold-bg); border:1px solid var(--gold-line);
  border-radius:var(--r-pill); padding:3px 10px; margin-bottom:10px; text-transform:uppercase;
}
.badge-format.piege { color:#9F1239; background:var(--rose-bg); border-color:#FDA4AF; }
.question-texte { font-size:1.02rem; line-height:1.5; font-weight:600; color:var(--ink); margin-bottom:14px; }
.question-texte .trou {
  display:inline-block; min-width:70px; border-bottom:2px solid var(--accent);
  color:var(--accent); font-weight:800; text-align:center;
}

.options { display:flex; flex-direction:column; gap:8px; }
.options button {
  text-align:left; padding:12px 14px; border-radius:var(--r-md);
  border:1.5px solid var(--border-strong); background:#fff;
  font-family:inherit; font-size:.92rem; line-height:1.4; color:var(--ink); cursor:pointer;
}
.options button:disabled { cursor:default; opacity:.94; }
.options button.bonne { border-color:var(--emerald); background:var(--emerald-bg); font-weight:700; }
.options button.mauvaise { border-color:var(--danger); background:var(--rose-bg); }

.justif { margin-top:14px; background:var(--slate-100); border-radius:var(--r-md); padding:12px 14px; }
.justif p { font-size:.88rem; line-height:1.55; color:var(--body); }
.mention-appel { margin-top:8px; color:#9F1239; font-weight:700; font-size:.82rem !important; }

.barre-partie {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:4px;
}
.score-partie { font-weight:800; color:var(--navy); }
.multi-partie { font-weight:700; color:var(--accent); font-size:.85rem; }
.btn-objection {
  border:1.5px dashed var(--accent); background:var(--gold-bg); color:var(--accent);
  border-radius:var(--r-md); padding:8px 12px; font-family:inherit; font-weight:800;
  font-size:.8rem; cursor:pointer; text-align:center;
}
.btn-objection small { display:block; font-weight:600; font-size:.62rem; }
.btn-objection.armee { background:var(--accent); color:#fff; border-style:solid; }
.btn-objection:disabled { opacity:.35; cursor:default; }

/* ===== Arrêt du jour ===== */
.etiquette-histoire, .etiquette-revelation {
  font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.histoire { font-family:'Spectral',serif; font-size:1.02rem; line-height:1.6; color:var(--ink); margin-bottom:14px; }
.carte-revelation { border-color:var(--gold-line); }
.resultat-bandeau { font-weight:800; font-size:1.05rem; margin-bottom:10px; }
.resultat-bandeau.gagne { color:var(--emerald); }
.resultat-bandeau.perdu { color:var(--danger); }
.revelation-texte { color:var(--body); font-size:.93rem; line-height:1.6; margin-bottom:12px; }
.lien-arret { display:block; color:var(--navy); font-weight:700; font-size:.9rem; margin-bottom:6px; }

/* ===== Verdict ===== */
.carte-verdict { text-align:center; }
.verdict-score { font-family:'Spectral',serif; font-size:2rem; font-weight:800; color:var(--navy); }
.verdict-grille { font-size:1.15rem; letter-spacing:2px; margin:8px 0 12px; }
.attendu {
  font-style:italic; color:var(--body); font-size:.92rem; line-height:1.6;
  background:var(--gold-bg); border:1px solid var(--gold-line);
  border-radius:var(--r-md); padding:12px 14px; text-align:left;
}
.verdict-cote { margin-top:12px; font-weight:700; color:var(--muted); font-size:.9rem; }
.verdict-duel { margin-top:12px; font-weight:700; color:var(--navy); font-size:.95rem; }
.carte-lacune { border-color:var(--gold-line); }
.actions-verdict .btn { margin-top:8px; }

/* ===== Défi ===== */
.carte-defi { margin-top:24px; }

.pied { text-align:center; padding:8px 10px 20px; }
.pied p { color:var(--muted); font-size:.78rem; line-height:1.5; }
.pied a { color:var(--navy); font-weight:700; }

@media (min-width:560px) {
  .hero h1 { font-size:1.7rem; }
}