:root {
  --violet: #6c2bd9;
  --fuchsia: #ff2e93;
  --orange: #ff6b35;
  --yellow: #ffd23f;
  --turquoise: #00d9c0;
  --lime: #b8ff3c;
  --ink: #160b2e;
  --cream: #fff8ec;
  --white: #ffffff;
  --muted: #6b5b85;
  --border: #160b2e;
  --grad-main: linear-gradient(135deg, #6c2bd9 0%, #ff2e93 48%, #ff6b35 100%);
  --grad-hot: linear-gradient(135deg, #ff2e93, #ff6b35);
  --grad-cool: linear-gradient(135deg, #00d9c0, #b8ff3c);
  --grad-sun: linear-gradient(135deg, #ffd23f, #ff6b35);
  --shadow: 8px 8px 0 rgba(22, 11, 46, 0.12);
  --shadow-hard: 5px 5px 0 #160b2e;
  --radius: 26px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 46, 147, 0.14), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(0, 217, 192, 0.16), transparent 24%),
    radial-gradient(circle at 80% 82%, rgba(255, 210, 63, 0.20), transparent 28%),
    radial-gradient(circle at 18% 86%, rgba(108, 43, 217, 0.12), transparent 26%),
    radial-gradient(rgba(22, 11, 46, 0.10) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 22px 22px;
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: "Baloo 2", "DM Sans", system-ui, sans-serif;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 800; }

p { margin: 0 0 1em; }
a { color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--fuchsia); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(1120px, calc(100% - 36px)); margin: 0 auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.spacer { flex: 1; }

/* ---------- Header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 248, 236, 0.90);
  backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--ink);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}
.logo img { width: 38px; height: 38px; display: block; }
.logo:hover { color: var(--violet); }
.logo-word {
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.top nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.top nav a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 4px 2px;
}
.top nav a:hover { color: var(--fuchsia); text-decoration: underline wavy var(--yellow) 2px; }
.top nav a.ghost {
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}
.top nav a.ghost:hover { background: var(--yellow); text-decoration: none; transform: translate(-1px, -1px); }

main.wrap { padding: 30px 0 20px; }

/* ---------- Hero ---------- */
.hero { padding: 42px 0 18px; position: relative; }
.hero h1 {
  font-size: clamp(2.8rem, 6.6vw, 5rem);
  max-width: 980px;
  margin: 0 auto 0.28em;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.hero h1 .hl {
  display: inline-block;
  padding: 0 0.14em 0.04em;
  border-radius: 0.22em;
  background: var(--grad-main);
  color: var(--white);
  transform: rotate(-2deg);
  box-shadow: 5px 5px 0 var(--ink);
  border: 2px solid var(--ink);
}
.hero h1 .hl-cool {
  background: var(--grad-cool);
  color: var(--ink);
  transform: rotate(1.5deg);
}
.lede {
  max-width: 680px;
  margin: 18px auto 0;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: #3d2b5c;
  font-weight: 500;
}
.hero .btn { margin-top: 22px; }

/* ---------- Join box ---------- */
.joinbox {
  max-width: 440px;
  margin: 34px auto 0;
  transform: rotate(-1.2deg);
  border-width: 3px;
  box-shadow: 10px 10px 0 var(--violet);
  background: var(--white);
}
.joinbox label { font-weight: 800; }
.joinbox input#code {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.38em;
  text-align: center;
  text-indent: 0.38em;
  padding: 12px 14px;
  border: 2px dashed var(--ink);
  border-radius: 16px;
  background: #fff3c4;
  color: var(--ink);
  width: 100%;
  margin-top: 8px;
}
.joinbox input#code::placeholder { color: #b7a77e; letter-spacing: 0.3em; }

/* ---------- Cards & grids ---------- */
.card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
  position: relative;
}
.card.tight { padding: 20px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.grid .card:nth-child(3n+1) { background: #ffe8f1; }
.grid .card:nth-child(3n+2) { background: #dffcf6; }
.grid .card:nth-child(3n+3) { background: #f1ffd6; }
.grid .card h3 { display: flex; align-items: center; gap: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--grad-main);
  color: var(--white);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); filter: saturate(1.08); color: var(--white); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.btn.ghost { background: var(--white); color: var(--ink); }
.btn.ghost:hover { background: var(--yellow); color: var(--ink); }
.btn.coral { background: var(--grad-hot); }
.btn.cool { background: var(--grad-cool); color: var(--ink); }
.btn.small { padding: 7px 13px; font-size: 0.84rem; box-shadow: 3px 3px 0 var(--ink); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Forms ---------- */
label { display: block; font-weight: 700; margin: 14px 0 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}
input:focus, textarea:focus, select:focus { outline: 3px solid var(--turquoise); outline-offset: 1px; }
textarea { min-height: 120px; resize: vertical; }
.field-help { font-size: 0.82rem; color: var(--muted); margin-top: 4px; }

/* ---------- Badges & code ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--yellow);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.badge.open { background: var(--turquoise); }
.badge.running { background: var(--fuchsia); color: var(--white); }
.badge.closed { background: #e5e0ef; }
.badge.violet { background: var(--violet); color: var(--white); }
.badge.lime { background: var(--lime); }
.badge.coral { background: var(--orange); color: var(--white); }

.code, .join-code {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--ink);
  color: var(--yellow);
  padding: 3px 10px;
  border-radius: 10px;
  border: 2px solid var(--ink);
  display: inline-block;
}
.join-code {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  padding: 8px 20px;
  letter-spacing: 0.2em;
  background: #fff3c4;
  color: var(--ink);
  border: 3px dashed var(--ink);
  box-shadow: 5px 5px 0 var(--violet);
  transform: rotate(-1deg);
}

/* ---------- Questions / options ---------- */
.question {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(1.55rem, 3.8vw, 2.35rem);
  font-weight: 800;
  line-height: 1.12;
  margin: 8px 0 20px;
  color: var(--ink);
}
.options { display: grid; gap: 12px; }
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--white);
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.option:nth-child(6n+1) { background: #ffe8f1; }
.option:nth-child(6n+2) { background: #dffcf6; }
.option:nth-child(6n+3) { background: #fff3c4; }
.option:nth-child(6n+4) { background: #f1ffd6; }
.option:nth-child(6n+5) { background: #ede4ff; }
.option:nth-child(6n+6) { background: #ffe0d1; }
.option:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option .letter {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}
.option:has(input:checked) {
  border-width: 3px;
  box-shadow: 0 0 0 4px var(--violet), 5px 5px 0 var(--ink);
  background: var(--white);
}
.option:has(input:checked) .letter { background: var(--grad-main); }

/* ---------- Quiz editor ---------- */
.qitem {
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--white);
  box-shadow: 4px 4px 0 rgba(22, 11, 46, 0.10);
}
.qitem .prompt { font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; }
.qitem .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.qitem .opts span {
  background: #f3eeff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}
.qitem .type {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--turquoise);
  border: 1.5px solid var(--ink);
  margin-bottom: 8px;
}

/* ---------- Results ---------- */
.results-card {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  box-shadow: 10px 10px 0 var(--fuchsia);
}
.results-card .muted, .results-card .small { color: #cbbdea; }
.results-card .question { color: var(--cream); }
.results-card .badge { color: var(--ink); }
.bar-row { margin: 16px 0; }
.bar-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; margin-bottom: 6px; }
.results-card .bar-head { color: var(--cream); }
.bar {
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: #f0e9ff;
  overflow: hidden;
}
.results-card .bar { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 248, 236, 0.45); }
.bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grad-main);
  transition: width 0.45s cubic-bezier(.2, .8, .2, 1);
  min-width: 2px;
}
.results-card .bar > span { background: var(--grad-cool); }

.wordcloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 22px;
  min-height: 170px;
}
.wordcloud span {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
}
.wordcloud span:nth-child(5n+1) { background: #ffd23f; transform: rotate(-2deg); }
.wordcloud span:nth-child(5n+2) { background: #00d9c0; transform: rotate(1.5deg); }
.wordcloud span:nth-child(5n+3) { background: #ff2e93; color: #fff; transform: rotate(-1deg); }
.wordcloud span:nth-child(5n+4) { background: #b8ff3c; transform: rotate(2deg); }
.wordcloud span:nth-child(5n+5) { background: #ff6b35; color: #fff; transform: rotate(-1.5deg); }
.results-card .wordcloud span { border-color: var(--cream); }

.answers { display: grid; gap: 10px; }
.answer {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 600;
}
.results-card .answer { background: #2a1b4d; color: var(--cream); border-color: rgba(255, 248, 236, 0.4); }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0 9px; }
.table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 12px; }
.table td { background: var(--white); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 12px; vertical-align: middle; }
.table tr td:first-child { border-left: 2px solid var(--ink); border-radius: 14px 0 0 14px; }
.table tr td:last-child { border-right: 2px solid var(--ink); border-radius: 0 14px 14px 0; }

/* ---------- Flash ---------- */
.flash {
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 13px 18px;
  font-weight: 700;
  margin: 16px 0;
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--white);
}
.flash.ok { background: #dffcf6; }
.flash.err { background: #ffe0d1; }
.flash.info { background: #ede4ff; }

/* ---------- Misc ---------- */
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.qr { display: inline-block; padding: 12px; border: 3px dashed var(--ink); border-radius: 20px; background: var(--white); }
.stat { font-family: "Baloo 2", system-ui, sans-serif; font-size: 2.2rem; font-weight: 800; line-height: 1; }
.hr { border: 0; border-top: 2px dashed rgba(22, 11, 46, 0.25); margin: 26px 0; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--yellow); border: 2px solid var(--ink); font-weight: 800; font-size: 0.8rem; }

/* ---------- Footer ---------- */
.foot {
  margin-top: 60px;
  border-top: 2px solid var(--ink);
  background: rgba(255, 255, 255, 0.55);
  padding: 22px 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}
.foot .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); margin: 0 2px; vertical-align: middle; }
.foot .d1 { background: var(--fuchsia); } .foot .d2 { background: var(--yellow); } .foot .d3 { background: var(--turquoise); } .foot .d4 { background: var(--lime); }

/* ---------- Confetti ---------- */
.confetti-piece {
  position: fixed;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  z-index: 9999;
  pointer-events: none;
  animation: serpentin-fall 1.7s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes serpentin-fall {
  0% { transform: translateY(-10px) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
.floaty { animation: floaty 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .wrap { width: calc(100% - 26px); }
  .nav { padding: 10px 0; }
  .logo { font-size: 1.2rem; }
  .logo img { width: 32px; height: 32px; }
  .top nav { gap: 10px; }
  .top nav a { font-size: 0.86rem; }
  .top nav a.ghost { padding: 6px 11px; }
  .hero { padding: 28px 0 10px; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .card { padding: 20px; border-radius: 22px; }
  .joinbox { transform: none; box-shadow: 6px 6px 0 var(--violet); }
  .btn { padding: 12px 18px; }
  .row { gap: 10px; }
  .table { font-size: 0.9rem; }
  .table th, .table td { padding: 9px 8px; }
}

/* ---------- Graphiques de résultats ---------- */
.chart-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 26px;
  align-items: center;
  margin: 10px 0 22px;
}
.donut-wrap { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut circle { fill: none; stroke-width: 5.6; }
.donut .seg { transition: stroke-dasharray .45s ease, stroke-dashoffset .45s ease; }
.donut-center {
  position: absolute; inset: 0; display: grid; place-content: center;
  text-align: center; color: var(--cream); pointer-events: none;
}
.donut-center strong { font-family: "Baloo 2", system-ui, sans-serif; font-size: 2.4rem; line-height: 1; }
.donut-center span { font-size: .78rem; color: #cbbdea; }
.legend { display: grid; gap: 10px; }
.legend-item { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.results-card .legend-item { color: var(--cream); }
.legend-dot { flex: 0 0 13px; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--cream); }
.lg-count { margin-left: auto; font-weight: 800; white-space: nowrap; }
.results-card .bars { margin-top: 4px; }
.results-card .bar-head { font-size: .92rem; }
@media (max-width: 700px) {
  .chart-grid { grid-template-columns: 1fr; justify-items: center; }
  .legend { width: 100%; }
}

/* ---------- Tutoriel / modale ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; }
.modal[hidden] { display: none !important; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(22, 11, 46, .58); backdrop-filter: blur(5px); }
.modal-card {
  position: relative; z-index: 1; width: min(680px, 100%); max-height: 86vh; overflow: auto;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 28px;
  box-shadow: 10px 10px 0 var(--fuchsia); padding: 30px;
}
.modal-card h2 { margin-top: 0; }
.modal-card h3 { margin-top: 22px; color: var(--violet); }
.modal-card ol, .modal-card ul { padding-left: 22px; }
.modal-card li { margin-bottom: 8px; }
.modal-x {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--white);
  font-size: 1.35rem; font-weight: 800; line-height: 1; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.modal-x:hover { background: var(--yellow); }
.help-steps { display: grid; gap: 12px; margin: 18px 0; }
.help-step { display: flex; gap: 12px; align-items: flex-start; }
.help-step .num {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad-main); color: var(--white); font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800; border: 2px solid var(--ink);
}
.help-step strong { display: block; }
.help-step p { margin: 0; color: var(--muted); font-size: .93rem; }
.modal-card .pill { margin-bottom: 4px; }