:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1a2233;
  --muted: #5b6472;
  --accent: #2563eb;
  --ok: #15803d;
  --ok-bg: #ecfdf3;
  --ko: #b91c1c;
  --ko-bg: #fef2f2;
  --border: #e3e6eb;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1rem 4rem; }

h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
.desc { color: var(--muted); margin-top: 0; }

/* Accueil */
.quiz-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.quiz-list a {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1rem 1.25rem; text-decoration: none; color: inherit;
  transition: border-color .15s;
}
.quiz-list a:hover { border-color: var(--accent); }
.quiz-list .meta { color: var(--muted); font-size: .85rem; margin-left: .5rem; }
.quiz-list p { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }

/* Questions */
.question {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.25rem; margin: 1rem 0;
}
.question legend { font-weight: 600; padding: 0 .25rem; }
.q-img { max-width: 100%; border-radius: 6px; margin: .5rem 0; }

.choice {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .45rem .6rem; border-radius: 6px; cursor: pointer;
}
.choice:hover { background: var(--bg); }
.choice.correct { background: var(--ok-bg); outline: 1px solid var(--ok); }
.choice.wrong { background: var(--ko-bg); outline: 1px solid var(--ko); }

.question.ok { border-left: 4px solid var(--ok); }
.question.ko { border-left: 4px solid var(--ko); }
.explain { color: var(--muted); font-size: .9rem; border-top: 1px dashed var(--border); padding-top: .5rem; }

/* Lead */
.lead { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.lead legend { font-weight: 600; }
.lead label { display: block; margin-top: .6rem; font-size: .9rem; color: var(--muted); }
.lead input[type="text"], .lead input[type="email"] {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 6px; font: inherit;
}
.consent { display: flex !important; gap: .5rem; align-items: baseline; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Boutons & messages */
.btn {
  background: var(--accent); color: #fff; border: 0; border-radius: 8px;
  padding: .75rem 1.5rem; font: inherit; font-weight: 600; cursor: pointer;
}
.btn:disabled { opacity: .6; cursor: wait; }
.msg { color: var(--ko); font-weight: 600; min-height: 1.2em; }
.loading { color: var(--muted); }

/* Score */
.score { border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.score.pass { background: var(--ok-bg); border: 1px solid var(--ok); }
.score.fail { background: var(--ko-bg); border: 1px solid var(--ko); }
.score h2 { margin: 0 0 .25rem; }
.score p { margin: 0; }