/* ========== ANIMATIONS — Ma Prépa Civique ========== */

/* Respect de la préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== KEYFRAMES ========== */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

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

/* ========== ÉTAT INITIAL — éléments à animer ========== */

/* Classe de base : invisible jusqu'à déclenchement */
.anim-ready {
  opacity: 0;
}

/* Classe ajoutée par JS quand l'élément entre en vue */
.anim-ready.anim-visible {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Variantes */
.anim-ready.anim-fade.anim-visible {
  animation: fadeIn 0.5s ease forwards;
}
.anim-ready.anim-scale.anim-visible {
  animation: scaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.anim-ready.anim-left.anim-visible {
  animation: slideLeft 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Délais échelonnés (stagger) pour les grilles */
.anim-ready.d-1  { animation-delay: 0.05s; }
.anim-ready.d-2  { animation-delay: 0.12s; }
.anim-ready.d-3  { animation-delay: 0.19s; }
.anim-ready.d-4  { animation-delay: 0.26s; }
.anim-ready.d-5  { animation-delay: 0.33s; }
.anim-ready.d-6  { animation-delay: 0.40s; }

/* ========== PAGE LOAD — Hero (toujours visible, délai fixe) ========== */

.hero-v2-eyebrow {
  animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.05s;
}
.hero-v2-title {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.15s;
}
.hero-v2-subtitle {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.25s;
}
.hero-v2-actions {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.35s;
}
.hero-v2-disclaimer {
  animation: fadeIn 0.5s ease both;
  animation-delay: 0.45s;
}
.hero-v2-social {
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.52s;
}

/* Page headers (quiz, situations, contact…) */
.page-header .breadcrumb {
  animation: fadeIn 0.4s ease both;
  animation-delay: 0.05s;
}
.page-header h1 {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}
.page-header p {
  animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.2s;
}
.page-header .page-header-side {
  animation: scaleIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.25s;
}

/* ========== HOVER ENRICHIS ========== */

/* Cartes thèmes */
.theme-card {
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.theme-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(38,70,83,0.12) !important;
}

/* Cartes articles */
.article-card {
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.article-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(38,70,83,0.12) !important;
}

/* Cartes sources */
.source-card {
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.source-card:hover {
  border-color: var(--c-blue);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(38,70,83,0.1);
}

/* Cartes how-step */
.how-step {
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.how-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(38,70,83,0.1);
}

/* Stat items */
.stat {
  transition: opacity 0.2s ease;
}
.stat:hover { opacity: 0.85; }

/* Nav links — underline glissant */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 2px;
  background: var(--c-red);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* Boutons — légère pulsation au focus */
.btn:focus-visible {
  outline: 3px solid var(--c-mint);
  outline-offset: 3px;
}