:root {
  --nuit: #0e1a2e;
  --nuit2: #142640;
  --carte: #1b2e4a;
  --papier: #ede6d6;
  --papier2: #f7f2e6;
  --encre: #2a2016;
  --encre2: #6e5e48;
  --texte: #e8edf4;
  --texte2: #a9b6c8;
  --or: #e9b64c;
  --or2: #f7d98e;
  --rouge: #c2373a;
  --sapin: #2c805a;
  --glace: #9fd3ec;
  --prune: #7a4e9c;
  --rayon: 14px;
  --ombre: 0 6px 0 rgba(0, 0, 0, 0.25), 0 14px 30px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font: 400 16px/1.55 Nunito, "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3 { font-family: Fraunces, Georgia, serif; font-weight: 800; line-height: 1.12; margin: 0; }
a { color: var(--or2); }
a:hover { color: #fff; }
code { background: rgba(255, 255, 255, 0.1); padding: 1px 6px; border-radius: 6px; font-size: 0.92em; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 6px; }

/* ---------- En-tête ---------- */
.hero { position: relative; min-height: 300px; overflow: hidden; background: linear-gradient(var(--nuit), var(--nuit2)); }
.hero-art { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; }
.topbar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 18px 16px; }
.brand { font: 800 20px Fraunces, serif; color: var(--texte); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.brand .star { color: var(--or); }
.user { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--texte2); font-size: 15px; }
.user .chip { background: rgba(255, 255, 255, 0.1); padding: 6px 12px; border-radius: 999px; color: var(--texte); }
.hero-text { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 18px 16px 110px; }
.kicker { margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; font-size: 13px; color: var(--or); }
.hero h1 { font-size: clamp(34px, 6vw, 56px); }
.sub { margin: 10px 0 0; color: var(--texte2); font-size: 18px; max-width: 560px; }

/* ---------- Contenu ---------- */
.wrap { flex: 1; width: 100%; max-width: 1100px; margin: -60px auto 0; padding: 0 16px 48px; position: relative; z-index: 3; }
.section-title { font-size: 26px; margin: 34px 0 14px; }
.muted { color: var(--texte2); }

.card { background: var(--carte); border-radius: var(--rayon); padding: 22px; box-shadow: var(--ombre); }
.paper { background: var(--papier); color: var(--encre); }
.paper .muted { color: var(--encre2); }

.grid-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.event { display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform 0.15s; position: relative; }
a.event, a.event:hover { color: var(--encre); }
.event:hover { transform: translateY(-3px) rotate(-0.4deg); }
.event .icon { font-size: 34px; line-height: 1; }
.event h3 { font-size: 22px; }
.event p { margin: 0; }
.event .go { margin-top: auto; font-weight: 800; color: var(--rouge); }
.event.soon { background: transparent; border: 2px dashed rgba(255, 255, 255, 0.18); box-shadow: none; color: var(--texte2); }

.pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; }
.pill.on { background: #1f5c45; color: #d9f2e6; }
.pill.wait { background: #3d3420; color: var(--or2); }
.pill.off { background: #3a3c42; color: #c9ccd2; }
.pill.no { background: #4a2326; color: #f5b5b7; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 12px 18px; font: 800 16px Nunito, sans-serif; cursor: pointer; text-decoration: none; min-height: 44px; }
.btn.primary { background: var(--rouge); color: #fff; box-shadow: 0 4px 0 #8e2427; }
.btn.primary:hover { background: #d4474a; color: #fff; }
.btn.primary:disabled { background: #6b5b5b; box-shadow: none; cursor: not-allowed; }
.btn.ghost { background: rgba(255, 255, 255, 0.08); color: var(--texte); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.16); }
.btn.back { background: var(--carte); color: var(--texte); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); }
.btn.back:hover { background: #24395a; color: #fff; }

/* ---------- Concours ---------- */
.contest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .contest { grid-template-columns: 1fr; } }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 2px; }
.fact { background: var(--papier2); border-radius: 10px; padding: 10px 14px; }
.fact b { display: block; font: 800 22px Fraunces, serif; color: var(--encre); }
.fact span { font-size: 13px; font-weight: 800; color: var(--encre2); text-transform: uppercase; letter-spacing: 0.06em; }

.drop { display: grid; place-items: center; gap: 8px; text-align: center; border: 3px dashed #c9bfa8; border-radius: 12px; padding: 26px 14px; background: var(--papier2); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.drop:hover, .drop.over { border-color: var(--rouge); background: #fff8ec; }
.drop .big { font-size: 40px; }
.drop img { max-width: 100%; max-height: 320px; border-radius: 8px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15); }
.field { display: grid; gap: 6px; margin: 14px 0; }
.field label { font-weight: 800; }
.field input { font: 600 16px Nunito, sans-serif; padding: 12px 14px; border-radius: 10px; border: 2px solid #d8ceb8; background: #fff; color: var(--encre); }
.field input:focus { border-color: var(--rouge); outline: none; }
.status { display: flex; gap: 12px; align-items: center; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-weight: 700; }
.status.wait { background: #f6ead0; }
.status.ok { background: #d9efe2; }
.status.no { background: #f6dada; }
.status img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.msg { margin-top: 10px; font-weight: 700; }
.msg.err { color: var(--rouge); }

.gallery { columns: 3 220px; column-gap: 16px; }
.gallery figure { break-inside: avoid; margin: 0 0 16px; background: var(--papier); border-radius: 10px; padding: 10px 10px 12px; box-shadow: var(--ombre); transform: rotate(var(--r, 0deg)); }
.gallery img { width: 100%; display: block; border-radius: 6px; background: #ddd; }
.gallery figcaption { color: var(--encre); margin-top: 8px; font-weight: 800; line-height: 1.3; }
.gallery figcaption small { display: block; color: var(--encre2); font-weight: 700; }
.gallery figcaption small.by { font-weight: 600; font-size: 12px; opacity: 0.8; }
.field small { font-size: 13px; }
.empty { text-align: center; padding: 34px 16px; color: var(--texte2); border: 2px dashed rgba(255, 255, 255, 0.15); border-radius: var(--rayon); }

.winner { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; background: linear-gradient(135deg, #3d3420, #2a2416); border: 2px solid var(--or); }
.winner img { width: 160px; height: 160px; object-fit: cover; border-radius: 10px; }
@media (max-width: 560px) { .winner { grid-template-columns: 1fr; } .winner img { width: 100%; height: auto; } }

.login { text-align: center; padding: 36px 22px; }
.login h2 { font-size: 30px; margin-bottom: 8px; }
.steps { display: grid; gap: 10px; max-width: 420px; margin: 18px auto 0; text-align: left; }
.steps li { background: var(--papier2); border-radius: 10px; padding: 10px 14px; font-weight: 700; list-style: none; }
.steps { padding: 0; }

/* ---------- Grand quiz ---------- */
.quiz-intro h2 { font-size: 28px; margin-bottom: 8px; }
.rules { margin: 14px 0 18px; padding-left: 20px; display: grid; gap: 6px; }
.btn.big { font-size: 18px; padding: 14px 26px; }
.quiz-card { max-width: 760px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.quiz-top { display: flex; justify-content: space-between; font-weight: 800; color: var(--encre2); }
.timebar { height: 10px; background: #d9cfb9; border-radius: 999px; overflow: hidden; margin: 10px 0 18px; }
.timebar i { display: block; height: 100%; width: 100%; background: var(--sapin); border-radius: 999px; transition: width 0.2s linear; }
.timebar.low i { background: var(--rouge); }
.quiz-q { font-size: clamp(22px, 3.4vw, 30px); margin-bottom: 18px; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .answers { grid-template-columns: 1fr; } }
.answer { text-align: left; font: 700 17px Nunito, sans-serif; color: var(--encre); background: #fff; border: 3px solid #d8ceb8; border-radius: 12px; padding: 14px 16px; min-height: 58px; cursor: pointer; transition: transform 0.1s, border-color 0.1s; }
.answer b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--nuit); color: #fff; margin-right: 8px; font-size: 14px; }
.answer:hover:not(:disabled) { border-color: var(--rouge); transform: translateY(-2px); }
.answer:disabled { cursor: default; }
.answer.picked { border-color: var(--nuit); }
.answer.good { border-color: var(--sapin); background: #d9efe2; }
.answer.bad { border-color: var(--rouge); background: #f6dada; }
.quiz-warn { background: #f6dada; color: #8e2427; font-weight: 800; border-radius: 10px; padding: 10px 14px; margin: 14px 0 0; }
.quiz-status { min-height: 26px; margin: 14px 0 0; font-weight: 800; }
.quiz-status.ok { color: var(--sapin); }
.quiz-status.no { color: var(--rouge); }
.podium-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.podium-list li { display: flex; align-items: center; gap: 10px; background: var(--papier2); border-radius: 10px; padding: 10px 14px; font-weight: 700; }
.podium-list .pos { width: 32px; font-size: 20px; }
.podium-list .who { flex: 1; }
.podium-list .pts { font: 800 18px Fraunces, serif; }

@media (max-width: 520px) {
  .brand { white-space: nowrap; font-size: 18px; }
  .user { gap: 6px; font-size: 14px; }
  .user .chip { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 10px; }
  .user .btn { padding: 8px 10px; min-height: 38px; font-size: 14px; }
  .hero-text { padding-bottom: 96px; }
  .sub { font-size: 16px; }
}

.foot { text-align: center; color: var(--texte2); font-size: 14px; padding: 22px 16px 30px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }