:root {
  --ink:#edf3f4;
  --muted:#aebdc3;
  --page:#18262d;
  --surface:#243640;
  --surface-soft:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.13);
  --teal:#2a9d8f;
  --teal-dark:#218477;
  --gold:#e9c46a;
  --orange:#f4a261;
  --terracotta:#c85f45;
  --danger:#a63b35;
  --success:#7ee081;
}

* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; }
body { overflow:hidden; color:var(--ink); background:var(--page); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:16px; }
a { color:#42b8aa; text-decoration:none; }
a:hover { color:#65cbbf; }

.header {
  position:fixed; z-index:10; top:0; right:0; left:0; height:42px;
  padding:0 78px 0 12px; overflow:hidden; color:#fff;
  background:linear-gradient(90deg,var(--terracotta),#d66b4f);
  box-shadow:0 2px 12px rgba(0,0,0,.22); font-size:18px; font-weight:bold;
  line-height:42px; white-space:nowrap; text-overflow:ellipsis;
}
.grappe {
  position:fixed; z-index:11; top:2px; right:4px; width:69px; height:69px;
  background:url("img/grappe.png") top right/auto 100% no-repeat;
  filter:drop-shadow(3px 5px 8px rgba(0,0,0,.4)); pointer-events:none;
}
.content {
  position:fixed; inset:42px 0 23px; overflow:auto; padding:12px;
  color:var(--ink); background:radial-gradient(circle at 90% 0,rgba(200,95,69,.15),transparent 27%),linear-gradient(155deg,var(--surface),var(--page));
  -webkit-overflow-scrolling:touch;
}
.footer {
  position:fixed; z-index:10; right:0; bottom:0; left:0; height:23px;
  padding:0 7px; overflow:hidden; color:rgba(255,255,255,.9); background:var(--terracotta);
  font-size:11px; line-height:23px; text-align:right; white-space:nowrap;
}

h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:14px; font-size:27px; }
h2 { margin:12px 0 4px; color:#fff; font-size:19px; line-height:1.2; }
h3 { margin:10px 0 4px; color:var(--gold); font-size:16px; }
p { margin-bottom:9px; line-height:1.4; }
hr { height:1px; margin:9px 0; border:0; background:var(--line); }

nav {
  position:sticky; z-index:4; top:-12px; margin:-12px -12px 12px; padding:11px 82px 10px 12px;
  overflow-x:auto; color:#708187; background:rgba(24,38,45,.94); border-bottom:1px solid var(--line);
  box-shadow:0 5px 14px rgba(0,0,0,.12); font-size:14px; white-space:nowrap;
  backdrop-filter:blur(9px); scrollbar-width:none;
}
nav::-webkit-scrollbar { display:none; }
nav b { color:#fff; }

form { width:100%; max-width:600px; margin:0; }
input,select,button { font:inherit; }
input,select {
  display:block; width:100%; min-height:40px; margin:0 0 6px; padding:8px 11px;
  border:1px solid rgba(255,255,255,.14); border-radius:7px; outline:0;
  color:#253239; background:#fff;
}
input::placeholder { color:#89979c; }
input:focus,select:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(244,162,97,.18); }
button,.button-link {
  display:inline-flex; min-height:40px; width:auto; min-width:130px; margin:1px 0; padding:8px 13px;
  align-items:center; justify-content:center; border:0; border-radius:7px; cursor:pointer;
  color:#fff; background:var(--teal); font-weight:bold; text-align:center;
}
button:hover,.button-link:hover { color:#fff; background:var(--teal-dark); }
.button-link:link,.button-link:visited,.button-link:active { color:#fff; }
.danger { color:#fff; background:var(--danger)!important; }
.error { margin:3px 0 7px; color:#ffb4a2; font-weight:bold; }

article.wine {
  margin:6px 0; padding:10px 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-soft); line-height:1.35;
}
.state-1 { border-left:4px solid var(--orange)!important; }
.state-2 { color:#8fa0a6; opacity:.78; }
.actions,.answer { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.actions { margin-top:7px; }
.actions form,.answer form { display:inline-block; width:auto; }
.actions button { min-height:34px; min-width:0; padding:5px 9px; font-size:13px; }
.answer { min-height:37px; justify-content:space-between; padding:2px 0; border-bottom:1px solid rgba(255,255,255,.055); }
.answer select { width:68px; min-height:34px; margin:0; padding:4px 6px; }
.revealed { margin:2px 0 7px; color:var(--success); font-size:13px; font-weight:bold; }
.revealed-answer { min-height:24px; margin:0; padding:1px 0; justify-content:flex-start; gap:7px; border:0; font-size:14px; line-height:1.15; }
.points-text { min-width:14px; color:var(--success); font-weight:bold; white-space:nowrap; }
.participant-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }.participant-head small { color:var(--muted); font-size:11px; font-weight:normal; }.participant-head strong { color:#fff; font-size:13px; white-space:nowrap; }
.podium { margin:4px 0 14px; padding:12px; border:1px solid rgba(233,196,106,.35); border-radius:13px; background:rgba(233,196,106,.08); }.podium h2 { margin:0 0 9px; color:var(--gold); }.rank { display:grid; grid-template-columns:28px 1fr auto; gap:8px; align-items:center; padding:7px 4px; border-bottom:1px solid var(--line); }.rank:last-child { border:0; }.rank>span { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; background:#52636a; font-size:12px; font-weight:bold; }.rank-1>span { color:#463b09; background:#ffd60a; }.rank-2>span { color:#273137; background:#c8d1d5; }.rank-3>span { color:#3d2518; background:#d79a6b; }.rank strong { color:var(--success); }
.reveal-card { margin:8px 0 12px; padding:18px 14px; overflow:hidden; position:relative; border:1px solid rgba(233,196,106,.45); border-radius:15px; background:linear-gradient(135deg,rgba(200,95,69,.28),rgba(233,196,106,.09)); box-shadow:0 14px 30px rgba(0,0,0,.2); animation:reveal-in .45s ease-out; }.reveal-card small { color:var(--gold); letter-spacing:1.3px; text-transform:uppercase; }.reveal-card h2 { margin:5px 0 3px; font-size:24px; }.reveal-card p { margin:0; color:#dce5e7; }.reveal-card strong { display:inline-block; margin-top:10px; padding:5px 9px; border-radius:20px; color:#17352f; background:var(--success); font-size:13px; }@keyframes reveal-in { from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none} }

.notice,.notice:link,.notice:visited,.notice:hover,.notice:active {
  display:block; margin:4px 0 9px; padding:10px; border-radius:7px; color:#392f06;
  background:#ffd60a; box-shadow:0 0 0 0 rgba(255,214,10,.8); font-size:14px;
  font-weight:bold; text-align:center; animation:notice-pulse 1.2s infinite;
}
@keyframes notice-pulse { 0%{box-shadow:0 0 0 0 rgba(255,214,10,.8)} 70%{box-shadow:0 0 0 9px rgba(255,214,10,0)} 100%{box-shadow:0 0 0 0 rgba(255,214,10,0)} }

/* Accueil */
.content:has(.home-modern) { padding:0; }
.home-modern { width:min(100% - 28px,560px); margin:0 auto; padding:38px 0 24px; text-align:left; }
.home-kicker { margin-bottom:9px; color:var(--gold); font-size:11px; font-weight:bold; letter-spacing:1.6px; text-transform:uppercase; }
.home-modern h1 { margin:0; color:#fff; font-size:clamp(38px,9vw,56px); line-height:.98; letter-spacing:-1.8px; }
.home-modern h1 span { color:var(--orange); }
.home-intro { max-width:490px; margin:15px 0 21px; color:#d4dee2; font-size:14px; line-height:1.45; }
.resume-card { display:flex; align-items:center; gap:10px; margin:-8px 0 14px; padding:9px 11px; border:1px solid rgba(126,224,129,.3); border-radius:10px; background:rgba(126,224,129,.08); font-size:12px; }
.resume-card span { flex:1; }.resume-card a { font-weight:bold; }.resume-card .resume-quit { color:#aebdc3; font-size:20px; }
.share-box { margin:0 0 10px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.share-box summary { cursor:pointer; color:var(--gold); font-weight:bold; }.share-box>div { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:10px; }.share-box img { width:112px; height:112px; border-radius:7px; }.share-code { font-size:28px; letter-spacing:5px; }.finished-badge { padding:10px; border-radius:8px; color:#18262d; background:var(--gold); font-weight:bold; }
.home-card { padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); box-shadow:0 16px 40px rgba(0,0,0,.2); backdrop-filter:blur(8px); }
.home-card-heading,.home-join { display:flex; align-items:center; gap:11px; }
.home-card-heading { margin-bottom:12px; }
.home-card-heading b,.home-join b { display:block; color:#fff; font-size:15px; }
.home-card-heading small,.home-join small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.home-step { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; border-radius:50%; color:#18353a; background:var(--gold); font-size:13px; font-weight:bold; }
.home-card label { display:block; margin:0 0 5px 2px; color:#d4dee2; font-size:11px; font-weight:bold; }
.home-card input { margin-bottom:7px; padding:10px 12px; }
.home-card .home-primary { display:flex; width:100%; margin:0; justify-content:space-between; }
.home-divider { display:flex; margin:10px 0; align-items:center; gap:10px; color:#819198; font-size:11px; text-transform:uppercase; }
.home-divider::before,.home-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.home-join,.home-join:link,.home-join:visited { padding:12px 15px; border:1px solid var(--line); border-radius:12px; color:#fff; background:rgba(255,255,255,.05); transition:.18s ease; }
.home-join:hover { color:#fff; background:rgba(255,255,255,.1); border-color:rgba(233,196,106,.5); transform:translateY(-1px); }
.home-join .home-step { color:#fff; background:var(--terracotta); }
.home-arrow { margin-left:auto; color:var(--orange); font-size:23px; }

@media (max-width:480px) {
  .content { padding:9px; }
  nav { top:-9px; margin:-9px -9px 9px; padding-left:9px; }
  .home-modern { width:min(100% - 22px,560px); padding-top:28px; }
}
@media (max-height:720px) {
  .home-modern { padding-top:18px; padding-bottom:12px; }
  .home-kicker { margin-bottom:5px; }
  .home-modern h1 { font-size:clamp(34px,8vw,45px); }
  .home-intro { margin:9px 0 13px; line-height:1.35; }
  .home-card { padding:12px 14px; }
  .home-card-heading { margin-bottom:8px; }
  .home-card-heading small { display:none; }
  .home-divider { margin:7px 0; }
  .home-join { padding:9px 13px; }
}
@media (max-height:570px) {
  .home-modern { padding-top:10px; }
  .home-kicker,.home-intro { display:none; }
  .home-modern h1 { margin-bottom:10px; }
}