* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg1: #1a103c;
  --bg2: #3b1e6e;
  --accent: #7c5cff;
  --accent2: #ff5c8a;
  --ok: #26890c;
  --ko: #e21b3c;
  --card: rgba(255, 255, 255, 0.08);
  --card-solid: #241552;
  --text: #f4f1ff;
  --muted: #b8aee0;
  --c0: #e21b3c;
  --c1: #1368ce;
  --c2: #d89e00;
  --c3: #26890c;
  --c4: #8e24aa;
  --c5: #e8590c;
  --c6: #0c8599;
  --c7: #c2255c;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

html, body { height: 100%; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: linear-gradient(150deg, var(--bg1), var(--bg2) 60%, #26134f);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 700; }

button {
  font: inherit;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: #fff;
  background: var(--accent);
  padding: 12px 22px;
  font-weight: 600;
  transition: transform 0.1s, filter 0.15s;
}
button:hover { filter: brightness(1.12); }
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: default; transform: none; }
button.secondary { background: rgba(255, 255, 255, 0.14); }
button.danger { background: var(--ko); }
button.ghost { background: transparent; color: var(--muted); }
button.ghost:hover { color: var(--text); }

input, textarea, select {
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 12px 16px;
  outline: none;
  width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { background: var(--card-solid); color: var(--text); }

.card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.muted { color: var(--muted); }
.hidden { display: none !important; }

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #a78bfa, #ff5c8a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ko);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 1000;
  animation: toast-in 0.25s ease;
  max-width: 90vw;
  text-align: center;
}
.toast.info { background: var(--accent); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.pop { animation: pop 0.35s ease; }

/* Couleurs des choix de réponse */
.choice-0 { background: var(--c0); }
.choice-1 { background: var(--c1); }
.choice-2 { background: var(--c2); }
.choice-3 { background: var(--c3); }
.choice-4 { background: var(--c4); }
.choice-5 { background: var(--c5); }
.choice-6 { background: var(--c6); }
.choice-7 { background: var(--c7); }