/* KICKOFF · « Mais c'est qui ? » : le blason flou qui se défloute. DA bleue premium.
   S'appuie sur tokens.css (.btn .card .pill .crest .kicker .h-disp) et games.css
   (.gm-back .gm-hero-ico .btn-sheen .gm-loading). Ici : seulement le spécifique mcq-. */

.mcq-wrap { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }

/* ---------- intro ---------- */
.mcq-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; }
.mcq-hero-title { font-size: 30px; line-height: 1; color: var(--txt); }
.mcq-slash { color: var(--red); text-shadow: 0 0 14px rgba(37, 99, 235, .75); padding: 0 .03em; }

.mcq-demo { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 0 2px; }
.mcq-demo-crest { filter: blur(7px); opacity: .85; }
.mcq-demo-crest.mcq-demo-sharp { filter: none; opacity: 1; }
.mcq-demo-arrow { font-size: 26px; color: var(--muted); font-family: var(--disp); }

.mcq-rules { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.mcq-rules li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--txt); line-height: 1.35; }
.mcq-rules b { font-weight: 700; }
.mcq-dot { flex: none; font-family: var(--disp); font-style: italic; font-weight: 700; color: var(--red);
  font-size: 17px; line-height: 1.1; text-shadow: 0 0 10px rgba(37, 99, 235, .5); }

.mcq-capnote { border-color: rgba(244, 195, 59, .28); background: linear-gradient(135deg, rgba(244, 195, 59, .07), var(--ink-3)); }

/* ---------- manche : le blason ---------- */
.mcq-top { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }

.mcq-stage {
  --blur: 22px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: 22px 0 26px;
  border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(37, 99, 235, .16), transparent 62%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--line);
}
.mcq-crest-halo {
  position: absolute; top: 44%; left: 50%; width: 250px; height: 250px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(59, 130, 246, .28), transparent 66%);
  filter: blur(8px); pointer-events: none;
  animation: mcqHalo 3.6s ease-in-out infinite;
}
@keyframes mcqHalo { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }

.mcq-crest {
  position: relative; z-index: 1;
  filter: blur(var(--blur));
  will-change: filter;
}
.mcq-crest .crest { box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.mcq-revealed .mcq-crest { transition: filter .32s ease; }
.mcq-revealed .mcq-crest .crest { animation: mcqPop .34s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mcqPop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }

.mcq-cote {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: baseline; gap: 5px;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(13, 13, 13, .6); border: 1px solid var(--line);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.mcq-cote b { font-family: var(--disp); font-style: italic; font-weight: 700; font-size: 22px;
  color: var(--gold); line-height: 1; transition: color .2s ease; }
.mcq-cote span { font-family: var(--disp); text-transform: uppercase; letter-spacing: .1em;
  font-size: 8.5px; color: var(--muted); font-weight: 700; }
.mcq-pts-hot { color: var(--red-glow) !important; }

/* barre de temps : se vide en {dur}s, dégradé or -> bleu */
.mcq-bar { height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.mcq-bar span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--red-deep), var(--red-glow) 55%, var(--gold));
  box-shadow: 0 0 12px rgba(37, 99, 235, .5);
}

.mcq-ask { text-align: center; padding: 2px 0; }

/* ---------- propositions ---------- */
.mcq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mcq-choice {
  display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer;
  padding: 12px 12px; border-radius: 13px; border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .005));
  color: var(--txt); transition: border-color .15s ease, transform .1s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mcq-choice:hover { border-color: var(--line-2); }
.mcq-choice:active { transform: scale(.98); }
.mcq-choice:disabled { cursor: default; }
.mcq-choice-k {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-style: italic; font-weight: 700; font-size: 12px;
  color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.mcq-choice-t { font-size: 13.5px; font-weight: 600; line-height: 1.15; min-width: 0; }
.mcq-choice.good { border-color: rgba(34, 197, 94, .6); background: rgba(34, 197, 94, .12); }
.mcq-choice.good .mcq-choice-k { color: var(--green); border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .14); }
.mcq-choice.bad { border-color: rgba(37, 99, 235, .55); background: rgba(37, 99, 235, .1); }
.mcq-choice.bad .mcq-choice-k { color: var(--red-glow); }

.mcq-fb { min-height: 22px; text-align: center; font-size: 14px; }
.mcq-fb b { font-weight: 700; }

/* ---------- fin / verrou ---------- */
.mcq-end { text-align: center; }
.mcq-total { font-size: 42px; line-height: 1; margin: 6px 0 8px; }
.mcq-locked { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mcq-upsell .kicker { color: var(--red-glow); }
.mcq-upsell p { font-size: 13px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .mcq-crest-halo, .mcq-revealed .mcq-crest .crest { animation: none; }
  .mcq-revealed .mcq-crest { transition: none; }
}