/* Feature icons - tailles */
.feature-icon-lg {
  width: 5rem;
  height: 5rem;
}

.feature-icon-success-lg {
  width: 5rem;
  height: 5rem;
  background: var(--success);
  color: white;
  border-radius: var(--border-radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-info-lg {
  width: 5rem;
  height: 5rem;
}

.feature-icon {
  width: 5rem; 
  height: 5rem; 
  color:white; 
  border-radius: 0.75rem;
}

/* ============================================================================
   QUIZ - STYLES COMMUNS À TOUTES LES PAGES
   ============================================================================ */

/* Container */
.quiz-container { 
  max-width: 900px; 
  margin: 0 auto; 
}

/* Cartes de thèmes */
.theme-card { 
  cursor: pointer; 
  transition: all 0.2s; 
  border: 2px solid var(--bs-border-color); 
  background: var(--bs-body-bg); 
}

.theme-card:hover { 
  border-color: var(--quiz-primary); 
  box-shadow: 0 4px 12px var(--quiz-shadow); 
  transform: translateY(-2px); 
}

.theme-number { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 32px; 
  height: 32px; 
  background: var(--quiz-light); 
  color: var(--quiz-primary); 
  font-weight: 600; 
  border-radius: 50%; 
}

.theme-icon {
  color: var(--quiz-primary);
}

/* Énoncé */
.enonce-box { 
  background: var(--bs-secondary-bg); 
  border-left: 4px solid var(--quiz-primary); 
  padding: 1rem 1.25rem; 
  border-radius: 0.375rem; 
  font-size: 1.1rem; 
  color: var(--bs-body-color);
}

/* Options QCM */
.option-card { 
  border: 2px solid var(--bs-border-color); 
  border-radius: 0.5rem; 
  padding: 0.875rem 1rem; 
  margin-bottom: 0.75rem; 
  cursor: pointer; 
  transition: all 0.2s; 
  display: flex; 
  align-items: flex-start; 
  gap: 0.75rem; 
  background: var(--bs-body-bg);
}

.option-card:hover:not(.disabled) { 
  border-color: var(--quiz-primary); 
  background: var(--quiz-light); 
}

.option-card.selected { 
  border-color: var(--quiz-primary); 
  background: var(--quiz-light); 
}

.option-card.correct { 
  border-color: #22c55e; 
}
[data-bs-theme="light"] .option-card.correct {
  background: #dcfce7; 
}
[data-bs-theme="dark"] .option-card.correct {
  background: #14532d; 
}

.option-card.incorrect { 
  border-color: #ef4444; 
}
[data-bs-theme="light"] .option-card.incorrect {
  background: #fee2e2; 
}
[data-bs-theme="dark"] .option-card.incorrect {
  background: #7f1d1d; 
}

.option-card.disabled { 
  cursor: not-allowed; 
  opacity: 0.8; 
}

.option-letter { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 28px; 
  height: 28px; 
  background: var(--bs-secondary-bg); 
  color: var(--bs-secondary-color); 
  font-weight: 600; 
  border-radius: 50%; 
  flex-shrink: 0; 
}

.option-card.selected .option-letter { 
  background: var(--quiz-primary); 
  color: white; 
}

.option-card.correct .option-letter { 
  background: #22c55e; 
  color: white; 
}

.option-card.incorrect .option-letter { 
  background: #ef4444; 
  color: white; 
}

.option-text { 
  flex: 1; 
  line-height: 1.5; 
  color: var(--bs-body-color);
}

/* Score */
.score-circle { 
  display: inline-flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  width: 140px; 
  height: 140px; 
  border-radius: 50%; 
  background: var(--quiz-light); 
  border: 5px solid var(--quiz-primary); 
}

.score-num { 
  font-size: 3rem; 
  font-weight: 700; 
  color: var(--quiz-dark); 
  line-height: 1; 
}

.score-total { 
  font-size: 1.25rem; 
  color: var(--quiz-primary); 
}

/* Aide */
.aide-card { 
  background: var(--bs-secondary-bg); 
  border-radius: 0.5rem; 
  padding: 1rem; 
  height: 100%; 
}

.aide-card h6 { 
  color: var(--quiz-primary); 
  border-bottom: 2px solid var(--quiz-border); 
  padding-bottom: 0.5rem; 
  margin-bottom: 0.75rem; 
}

.aide-card ul { 
  padding-left: 1.25rem; 
  margin-bottom: 0; 
}

.aide-card li { 
  margin-bottom: 0.25rem; 
  font-size: 0.9rem; 
  color: var(--bs-body-color);
}

/* Boutons thématiques */
.btn-quiz-primary {
  background: var(--quiz-primary);
  color: white;
  border: none;
}

.btn-quiz-primary:hover {
  back