@font-face { font-family: 'Anton'; font-display: swap; src: url(/fonts/anton/files/anton-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Anton'; font-display: swap; src: url(/fonts/anton/files/anton-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Rubik'; font-weight: 400; font-display: swap; src: url(/fonts/rubik/files/rubik-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Rubik'; font-weight: 600; font-display: swap; src: url(/fonts/rubik/files/rubik-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Rubik'; font-weight: 800; font-display: swap; src: url(/fonts/rubik/files/rubik-latin-800-normal.woff2) format('woff2'); }

:root {
  --yellow: #FFE500;
  --pink: #FF2E88;
  --black: #0B0B0D;
  --ink: #16161A;
  --panel: #1E1E24;
  --line: #34343D;
  --white: #FFFFFF;
  --muted: #A7A7B3;
  --cream: #FFF6E0;
  --ok: #3BE07A;
  --ko: #FF4D4D;
  --ch0: #FF3D6E; --ch1: #FFB21E; --ch2: #2FD06B; --ch3: #2E8BFF; --ch4: #B26BFF; --ch5: #00D1C1;
  --display: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;
  --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--black); color: var(--white); font-family: var(--body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.display { font-family: var(--display); text-transform: uppercase; letter-spacing: .01em; line-height: 1; }
.hidden { display: none !important; }

/* Bandeau "pinceau" façon affiche */
.brush { display: inline-block; background: var(--yellow); color: var(--black); padding: .15em .5em; transform: rotate(-1.5deg); font-family: var(--display); text-transform: uppercase; clip-path: polygon(1% 8%, 99% 0, 100% 88%, 2% 100%); }
.brush.pink { background: var(--pink); color: var(--white); }
.underline-pink { background: linear-gradient(transparent 78%, var(--pink) 78%, var(--pink) 92%, transparent 92%); }

.logo { display: inline-flex; flex-direction: column; background: var(--yellow); color: var(--black); font-family: 'Rubik', sans-serif; font-weight: 800; line-height: .82; padding: .18em .28em .22em; border-radius: .35em; letter-spacing: -.03em; text-transform: lowercase; }

.choice-letter { display: inline-grid; place-items: center; font-family: var(--display); color: var(--white); border-radius: .2em; }
.c0 { --k: var(--ch0); } .c1 { --k: var(--ch1); } .c2 { --k: var(--ch2); } .c3 { --k: var(--ch3); } .c4 { --k: var(--ch4); } .c5 { --k: var(--ch5); }
.vf0 { --k: var(--ch2); } .vf1 { --k: var(--ch0); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--white); color: var(--black); padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: 0 10px 30px #0008; z-index: 1000; max-width: calc(100vw - 32px); text-align: center; animation: toast-in .2s ease-out; }
.toast.error { background: var(--ko); color: var(--white); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

.conn { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); background: var(--ko); color: #fff; padding: 6px 14px; border-radius: 99px; font-size: 14px; font-weight: 600; z-index: 999; }