/* Modern Design Improvements */

/* Amélioration générale */
body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* Cards avec effet glassmorphism */
.test-container,
.result-container,
.email-section,
.question-container > div,
[id*="result-container"] {
  background: rgba(30, 41, 59, 0.8) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Boutons modernes */
.cta-button,
.nav-button,
button[type="submit"] {
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  transition: all 0.3s ease !important;
}

.cta-button:hover,
.nav-button:hover,
button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
}

/* Progress bar moderne */
.progress-bar {
  background: rgba(30, 41, 59, 0.5) !important;
  height: 10px !important;
}

.progress-fill {
  background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%) !important;
  height: 10px !important;
  border-radius: 5px;
}

/* Questions avec hover effect */
.question-container > div {
  margin-bottom: 2rem;
  transition: transform 0.2s ease;
}

.question-container > div:hover {
  transform: translateX(5px);
}

/* Radio buttons modernes */
input[type="radio"] {
  accent-color: #818cf8 !important;
}

.option-label {
  transition: all 0.2s ease !important;
}

.option-label:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  border-color: #818cf8 !important;
}

/* Header moderne */
header {
  background: transparent !important;
}

/* Logo avec animation */
.logo {
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

/* Textes avec meilleur contraste */
h1, h2, h3 {
  color: #f1f5f9 !important;
}

p, span, div {
  color: #e2e8f0;
}

/* Navigation moderne */
.nav-container {
  background: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

/* Inputs modernes */
input[type="email"],
input[type="text"],
input[type="password"] {
  background: rgba(30, 41, 59, 0.5) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  color: #e2e8f0 !important;
}

input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #818cf8 !important;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1) !important;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.question-container > div {
  animation: slideIn 0.3s ease-out;
}