/* ============================================================
   Enquête Santé & Innovation — Styles du quiz public
   ============================================================ */

.quiz-hero-bg {
  background: linear-gradient(135deg, #16169B 0%, #0E0E6E 50%, #0a0a3f 100%);
}
.quiz-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpolygon points='30,4 56,30 30,56 4,30' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}
.quiz-hero-glow {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,18,18,0.12) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  animation: quizGlowPulse 8s ease-in-out infinite;
}
@keyframes quizGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

.quiz-screen {
  animation: quizFadeIn 0.45s ease both;
}
@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-card {
  animation: quizCardIn 0.35s ease both;
}
@keyframes quizCardIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.quiz-card.slide-back {
  animation: quizCardInBack 0.35s ease both;
}
@keyframes quizCardInBack {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Option cards */
.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1.5px solid #e6e8ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #202124;
  background: #fff;
  user-select: none;
}
.quiz-option:hover {
  border-color: #a9bbeb;
  background: #f7f9ff;
}
.quiz-option .quiz-option-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  flex-shrink: 0;
  position: relative;
  transition: all 0.18s ease;
}
.quiz-option.selected {
  border-color: #16169B;
  background: #EDF3FF;
  box-shadow: 0 0 0 3px rgba(22,22,155,0.08);
}
.quiz-option.selected .quiz-option-dot {
  border-color: #16169B;
  background: #16169B;
}
.quiz-option.selected .quiz-option-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

#other-input {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#toast-error {
  animation: quizToastIn 0.3s ease both;
}
@keyframes quizToastIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}