/* Memory Lab — styles communs (participant, admin, écran) */
:root {
  --ivory: #F6F3EC;
  --ivory-2: #ECE7DC;
  --paper: #FFFFFF;
  --paper-2: #FBFAF7;
  --ink: #1C1B22;
  --ink-2: #4A463F;
  --muted: #5E5A52;
  --line: #E2DCCF;
  --line-2: #CFC8B8;
  --border: #8C8575;
  --blue: #2B4ACB;
  --blue-bg: #E4E9FB;
  --blue-ink: #1B2F8A;
  --green: #1F7A4D;
  --green-bg: #DDF1E4;
  --green-ink: #145235;
  --red: #B4441F;
  --red-bg: #FBE3DA;
  --red-ink: #8A2F12;
  --gold-bg: #F3E6C8;
  --gold-ink: #6B4A0E;
  --dark-2: #2A2931;
  --dark-3: #3B3A43;
  --display: 'Fraunces', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--sans); background: var(--ivory); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; }
.display { font-family: var(--display); font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); }
a:hover { color: var(--blue-ink); }
:focus-visible { outline: 3px solid #AFC0FF; outline-offset: 2px; }
[hidden] { display: none !important; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.btn:hover { color: var(--ink); background: var(--paper-2); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-ink); color: #fff; }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-ink); color: #fff; }
.btn-danger { color: var(--red-ink); border-color: var(--red); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-dashed { border-style: dashed; background: transparent; }
.btn-block { width: 100%; min-height: 56px; font-size: 17px; border-radius: 14px; }
.btn-sm { min-height: 38px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* Champs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: 14px; font-weight: 600; }
.input, select.input, textarea.input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--paper); font-size: 16px; }
textarea.input { resize: vertical; line-height: 1.45; }
.hint { font-size: 13px; color: var(--muted); line-height: 1.4; }
.error-msg { padding: 12px 14px; border-radius: 12px; background: var(--red-bg); color: var(--red-ink); font-weight: 600; font-size: 15px; }

.tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tag-match { background: var(--blue-bg); color: var(--blue-ink); }
.tag-quiz, .tag-fill, .tag-numbers { background: var(--green-bg); color: var(--green-ink); }
.tag-sequence { background: var(--gold-bg); color: var(--gold-ink); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }