/* ========================================
   ANIMATIONS SUPPLÉMENTAIRES POUR RENDRE L'UI PLUS FUN
   ======================================== */

/* Animation des sections au chargement */
.group {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.group:nth-child(1) { animation-delay: 0.1s; }
.group:nth-child(2) { animation-delay: 0.2s; }
.group:nth-child(3) { animation-delay: 0.3s; }
.group:nth-child(4) { animation-delay: 0.4s; }
.group:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Amélioration des cartes avec effet bounce */
.card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3);
}

.card:active {
  transform: translateY(-4px) scale(0.98);
  transition: all 0.1s ease;
}

/* Animation des icônes de cartes */
.card-icon {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover .card-icon {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 8px 16px rgba(102, 126, 234, 0.4));
}

/* Bouton de thème avec rotation fun */
.theme-toggle:hover {
  transform: scale(1.1);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Boutons stats avec effet bounce */
.stats-toggle:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.stats-toggle:active {
  transform: scale(0.95);
}

/* Bouton de recherche avec rotation */
.search-toggle-icon:hover {
  transform: scale(1.15) rotate(90deg);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.6);
}

.search-toggle-icon:active {
  transform: scale(1.05) rotate(90deg);
}

/* Compteurs de statut avec effet bounce */
.status-item:hover {
  transform: translateY(-3px) scale(1.05);
}

.status-item:active {
  transform: translateY(-1px) scale(1.02);
}

.status-count {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.status-item:hover .status-count {
  transform: scale(1.2);
  color: var(--accent-primary);
}

/* Liens "Voir plus" avec animation de flèche */
.toggle-link:hover {
  transform: translateX(8px) scale(1.05);
}

.toggle-link:active {
  transform: translateX(4px) scale(0.98);
}

.toggle-link:hover svg {
  animation: bounce 0.6s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(4px) scale(1.2); }
  50% { transform: translateY(8px) scale(1.2); }
}

/* Bouton de fermeture avec rotation */
.close-btn:hover {
  transform: rotate(180deg) scale(1.1);
}

.close-btn:active {
  transform: rotate(180deg) scale(0.9);
}

/* Boutons de niveau avec effet slide */
.level-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.level-btn:active {
  transform: translateY(-2px) scale(0.98);
}

.level-btn:hover .level-btn-arrow {
  animation: arrowBounce 0.6s ease infinite;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateX(8px) scale(1.2); }
  50% { transform: translateX(12px) scale(1.2); }
}

/* Animation des résultats de recherche */
#searchResults li {
  animation: slideInLeft 0.3s ease;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Modal avec effet de pop */
.level-selection-overlay.visible .level-selection-modal,
.qcm-modal:not(.hidden) .qcm-modal-content,
.qcm-results-modal:not(.hidden) .qcm-results-content,
.stats-modal:not(.hidden) .stats-modal-content {
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animation des cartes au chargement */
.cards-grid.ready .card {
  animation: cardAppear 0.5s ease-out;
  animation-fill-mode: both;
}

.cards-grid.ready .card:nth-child(1) { animation-delay: 0.05s; }
.cards-grid.ready .card:nth-child(2) { animation-delay: 0.1s; }
.cards-grid.ready .card:nth-child(3) { animation-delay: 0.15s; }
.cards-grid.ready .card:nth-child(4) { animation-delay: 0.2s; }
.cards-grid.ready .card:nth-child(5) { animation-delay: 0.25s; }
.cards-grid.ready .card:nth-child(6) { animation-delay: 0.3s; }
.cards-grid.ready .card:nth-child(7) { animation-delay: 0.35s; }
.cards-grid.ready .card:nth-child(8) { animation-delay: 0.4s; }

@keyframes cardAppear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Effet de glow sur les boutons au hover */
.qcm-btn-primary:hover:not(:disabled) {
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

/* Effet de rotation sur les emojis de recherche */
.search-emoji {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#searchResults li:hover .search-emoji {
  transform: scale(1.3) rotate(15deg);
}

/* Effet de rainbow sur les cartes complétées */
.card.completed:hover {
  animation: rainbowGlow 2s ease-in-out infinite;
}

@keyframes rainbowGlow {
  0% { box-shadow: 0 12px 24px rgba(0, 255, 183, 0.3); }
  25% { box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3); }
  50% { box-shadow: 0 12px 24px rgba(118, 75, 162, 0.3); }
  75% { box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3); }
  100% { box-shadow: 0 12px 24px rgba(0, 255, 183, 0.3); }
}

/* Effet de typing sur le titre principal */
.header-text h1 {
  animation: fadeInScale 0.6s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Effet de slide sur les stat cards */
.stat-card {
  animation: slideInStat 0.5s ease-out;
  animation-fill-mode: both;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInStat {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Effet de bounce sur les icônes de stat */
.stat-icon {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-card:hover .stat-icon {
  animation: iconBounce 0.6s ease;
}

@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-10px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-5px); }
}

/* Effet de pulse sur les valeurs de stat */
.stat-value {
  transition: all 0.3s ease;
}

.stat-card:hover .stat-value {
  transform: scale(1.1);
}

/* Réponses QCM avec effet de slide */
.qcm-answer {
  animation: slideInAnswer 0.3s ease;
  animation-fill-mode: both;
}

.qcm-answer:nth-child(1) { animation-delay: 0.1s; }
.qcm-answer:nth-child(2) { animation-delay: 0.2s; }
.qcm-answer:nth-child(3) { animation-delay: 0.3s; }
.qcm-answer:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInAnswer {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Score circle avec animation de rotation */
.qcm-score-circle {
  animation: scaleInRotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleInRotate {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Thèmes sélectionnés avec animation d'entrée */
.qcm-theme-item {
  animation: slideInTheme 0.3s ease;
}

@keyframes slideInTheme {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Effet de hover sur les thèmes QCM sélectionnés */
.qcm-theme-item:hover .qcm-theme-icon {
  transform: scale(1.2) rotate(10deg);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Effet de slide sur les résultats QCM */
.qcm-result-item {
  animation: slideInResult 0.4s ease-out;
  animation-fill-mode: both;
}

.qcm-result-item:nth-child(1) { animation-delay: 0.05s; }
.qcm-result-item:nth-child(2) { animation-delay: 0.1s; }
.qcm-result-item:nth-child(3) { animation-delay: 0.15s; }
.qcm-result-item:nth-child(4) { animation-delay: 0.2s; }
.qcm-result-item:nth-child(5) { animation-delay: 0.25s; }

@keyframes slideInResult {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Effet de hover sur les boutons de navigation QCM */
.qcm-nav-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.05);
}

.qcm-nav-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

/* Animation du bouton expand sidebar */
.expand-btn:hover {
  animation: rotate360 0.6s ease;
}

@keyframes rotate360 {
  from { transform: rotate(0deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1.05); }
}

/* Animation de l'icône de section au hover */
.section-icon {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-title-wrapper:hover .section-icon {
  transform: scale(1.2) rotate(10deg);
  filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.5));
}

/* Assurer que le header est positionné correctement */
header {
  position: fixed;
  z-index: 100;
}

/* Effet de particules sur le header */
header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  animation: particleMove 10s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes particleMove {
  0%, 100% {
    background-position: 0% 0%, 100% 100%;
  }
  50% {
    background-position: 100% 100%, 0% 0%;
  }
}

/* Assurer que les boutons du header sont au-dessus */
.header-left-actions {
  position: fixed;
  height: 80px;
  right: 1rem;
  z-index: 9999;
}

/* Effet de typing sur le titre principal */
.header-text h1 {
  animation: fadeInScale 0.6s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}