@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
:root {
  --primary: #58f2dc; --secondary: #8b37df; --tertiary-deep: #2a2360;
  --surface: #fcf8ff; --card: #ffffff; --surface-low: #f6f1ff; --surface-high: #f0ebf5;
  --muted: rgba(42, 35, 96, 0.62); --soft: rgba(42, 35, 96, 0.42);
  --good: #10b981; --good-text: #047857; --good-bg: rgba(16, 185, 129, 0.12);
  --bad-text: #b91c1c; --bad-bg: rgba(239, 68, 68, 0.10);
  --shadow-md: 0 4px 12px rgba(42, 35, 96, 0.08); --shadow-lg: 0 12px 32px rgba(42, 35, 96, 0.10);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; background: var(--surface); color: var(--tertiary-deep); }
main { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 4px; }
.muted { color: var(--muted); font-size: 0.875rem; }
.label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; color: var(--muted); margin: 24px 0 8px; }
.card { background: var(--card); border-radius: 1rem; box-shadow: var(--shadow-md); padding: 16px; }
.noms { display: grid; gap: 8px; }
.nom { width: 100%; text-align: left; font: inherit; font-size: 1rem; color: var(--tertiary-deep); background: var(--card);
  border: 0; border-radius: 0.75rem; padding: 14px 16px; box-shadow: var(--shadow-md); cursor: pointer; }
.nom.choisi { background: rgba(88, 242, 220, 0.18); }
.nom:disabled { color: var(--soft); box-shadow: none; background: var(--surface-high); cursor: default; }
canvas.sig { width: 100%; height: 200px; background: var(--card); border-radius: 0.75rem; box-shadow: var(--shadow-md); touch-action: none; display: block; }
.btn { font: inherit; font-weight: 500; border: 0; border-radius: 9999px; padding: 14px 22px; cursor: pointer;
  background: var(--tertiary-deep); color: #fff; width: 100%; margin-top: 12px; }
.btn.second { background: var(--surface-high); color: var(--tertiary-deep); }
.btn:disabled { opacity: 0.4; cursor: default; }
.msg { border-radius: 0.75rem; padding: 14px 16px; margin-top: 16px; }
.msg.ok { background: var(--good-bg); color: var(--good-text); }
.msg.err { background: var(--bad-bg); color: var(--bad-text); }
a { color: var(--secondary); }