/* style.css — Spinzy. Thème clair, accent violet, Geist. */
@font-face { font-family:'Geist'; font-weight:400; font-display:swap; src:url('fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:500; font-display:swap; src:url('fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:600; font-display:swap; src:url('fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family:'Geist'; font-weight:700; font-display:swap; src:url('fonts/geist-700.woff2') format('woff2'); }

:root {
  --bg:#faf7ff; --surface:#fff; --surface-2:#f7f4fd; --hover:#f3eefe;
  --line:#ece6f6; --line-2:#dcd2ee; --ink:#1c1530; --muted:#6b6480; --faint:#9890aa;
  --accent:#7c3aed; --accent-2:#9056f0; --accent-tint:rgba(124,58,237,.1); --accent-line:rgba(124,58,237,.4);
  --good:#16a34a; --gold:#d97706;
  --shadow-sm:0 1px 2px rgba(28,21,48,.05); --shadow:0 6px 20px -8px rgba(28,21,48,.14); --shadow-lg:0 12px 32px -10px rgba(124,58,237,.35);
  --sans:'Geist',system-ui,-apple-system,sans-serif; --mono:'Geist Mono',ui-monospace,monospace;
  --r:14px; --r-sm:10px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; color:var(--ink); font-family:var(--sans); background:var(--bg); min-height:100dvh; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
body { background-image:radial-gradient(70% 40% at 50% -10%, rgba(124,58,237,.08), transparent 70%); background-attachment:fixed; }
a { color:inherit; text-decoration:none; } svg { flex:none; }
.font-display { font-weight:700; letter-spacing:-.02em; }
.muted { color:var(--muted); } .small { font-size:.82rem; } .center { text-align:center; }
.block { display:block; width:100%; } .mb12 { margin-bottom:12px; } .mt8 { margin-top:8px; } .mt16 { margin-top:16px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* topbar */
.topbar { max-width:62rem; margin:0 auto; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:9px; }
.brand-ic { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.brand-ic svg { width:18px; height:18px; }
.brand-name { font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }
.lang-switch { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-weight:500; font-size:.82rem; border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:var(--surface); }
.lang-switch svg { width:15px; height:15px; } .lang-switch:hover { color:var(--accent); border-color:var(--accent-line); }

.wrap { max-width:62rem; margin:0 auto; padding:0 20px 48px; }
.hero { text-align:center; padding:30px 0 26px; }
.hero-title { font-size:clamp(2.6rem,9vw,3.6rem); font-weight:700; letter-spacing:-.035em; margin:0; line-height:1;
  background:linear-gradient(110deg,#7c3aed,#c026d3,#7c3aed); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub { color:var(--muted); margin:12px 0 0; font-size:1.06rem; }

.cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:18px; align-items:start; }
@media (max-width:760px){ .cols{ grid-template-columns:1fr; } }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:20px; }
.panel-title { font-size:1.1rem; font-weight:600; margin:0; letter-spacing:-.01em; } .panel-title.sm { font-size:.95rem; }
.row-between { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }

textarea.ta { width:100%; min-height:200px; resize:vertical; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.6; padding:13px 15px; outline:none; transition:border-color .15s, box-shadow .15s; }
textarea.ta:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }

.chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:500; border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--ink); background:var(--surface); }
.chip i { width:8px; height:8px; border-radius:99px; display:inline-block; }
.chip b { color:var(--gold); }

.btn-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; cursor:pointer; font-weight:600; font-family:inherit; font-size:.88rem; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, color .15s, transform .1s; }
.btn svg { width:16px; height:16px; }
.btn:hover:not(:disabled) { border-color:var(--accent-line); color:var(--accent); box-shadow:var(--shadow); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-accent { background:linear-gradient(180deg,var(--accent-2),var(--accent)); color:#fff; border:none; box-shadow:var(--shadow-lg); font-size:1.05rem; padding:14px; }
.btn-accent:hover:not(:disabled) { filter:brightness(1.05); color:#fff; transform:translateY(-1px); }

.settings { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; gap:12px; background:none; border:none; cursor:pointer; font-family:inherit; font-size:.92rem; color:var(--ink); padding:8px 0; }
.toggle { flex:none; width:42px; height:24px; border-radius:99px; background:var(--line-2); position:relative; transition:background .18s; }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .18s; }
.toggle[data-on="true"] { background:var(--accent); } .toggle[data-on="true"]::after { transform:translateX(18px); }

/* roue */
.wheelcol { display:flex; flex-direction:column; align-items:center; }
.wheel-wrap { position:relative; width:100%; display:flex; flex-direction:column; align-items:center; }
.pointer { width:0; height:0; border-left:14px solid transparent; border-right:14px solid transparent; border-top:24px solid var(--accent); margin-bottom:-10px; z-index:2; filter:drop-shadow(0 2px 3px rgba(28,21,48,.25)); }
.wheel-btn { background:none; border:none; padding:0; cursor:pointer; border-radius:50%; line-height:0; }
.wheel-btn canvas { width:400px; height:400px; max-width:100%; display:block; touch-action:manipulation; }
.wheel-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; }
.wheel-empty[hidden] { display:none; }
.wheel-empty .font-display { font-size:1.4rem; }

/* modale */
.overlay { position:fixed; inset:0; background:rgba(28,21,48,.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:18px; z-index:50; }
.overlay[hidden] { display:none; }
.modal { max-width:420px; width:100%; text-align:center; padding:30px; animation:pop .4s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes pop { from { opacity:0; transform:scale(.88) translateY(8px); } to { opacity:1; transform:none; } }
.trophy { color:var(--gold); margin-bottom:6px; } .trophy svg { width:46px; height:46px; }
.winner-name { font-size:2.2rem; font-weight:700; letter-spacing:-.02em; color:var(--accent); margin:8px 0 4px; word-break:break-word; }
.btn-col { display:flex; flex-direction:column; gap:8px; margin-top:20px; }

#sp-confetti { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:60; }
#sp-confetti[hidden] { display:none; }

.footer { max-width:62rem; margin:36px auto 0; padding:20px; text-align:center; color:var(--faint); font-size:.76rem; border-top:1px solid var(--line); }
.footer a { color:var(--muted); border-bottom:1px solid var(--line-2); } .footer a:hover { color:var(--accent); }
.footer .joke { font-style:italic; } .footer .sep { opacity:.5; margin:0 5px; }

@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }