/* ══════════════════════════════
   THÈME PRINCIPAL — anciennement la refonte bêta, promue thème par défaut.
   Chargé après style.css : ces règles priment sur les déclarations de base
   (boutons en pilule, ombres portées, hover cartes, animations).
══════════════════════════════ */

:root {
  --card-radius: 14px;
}

/* ── Boutons en pilule ── */
.btn {
  border-radius: 999px;
}

/* ── Ombres portées : plus sombres/marquées pour rester visibles même sur fond quasi noir ── */
.media-card,
.stat-card,
.season-card,
.modal,
.auth-box,
.search-box,
.toast {
  box-shadow: 0 4px 10px rgba(0,0,0,0.55), 0 14px 32px rgba(0,0,0,0.5);
}
.navbar {
  box-shadow: 0 4px 18px rgba(0,0,0,0.55);
}
.btn-primary {
  box-shadow: 0 2px 8px rgba(124,111,255,0.3);
}

/* ── Cartes média : le titre/la note glissent par-dessus le poster au survol ──
   Uniquement sur les appareils avec un vrai pointeur (souris) : sur tactile,
   :hover ne se déclenche jamais avant le tap, ce qui rendrait les infos illisibles.
   Sur mobile/tactile, la carte garde son affichage classique (infos toujours visibles). */
@media (hover: hover) and (pointer: fine) {
  .media-card {
    overflow: hidden;
  }
  .media-card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.92) 100%);
    padding: 24px 12px 12px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
    pointer-events: none;
  }
  .media-card:hover .media-card-body {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .media-card {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .media-card:hover {
    transform: scale(1.06) translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 26px 6px rgba(124,111,255,0.55), 0 16px 36px rgba(0,0,0,0.5);
    z-index: 2;
  }
}

/* ── Animation d'ouverture des popups/modales ── */
.modal-overlay.open {
  animation: redesignOverlayFade 0.15s ease both;
}
.modal-overlay.open .modal {
  animation: redesignModalPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes redesignOverlayFade {
  from { background: rgba(0,0,0,0); }
  to { background: rgba(0,0,0,0.6); }
}
@keyframes redesignModalPop {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Transition d'entrée de page : fondu + léger glissement, non bloquant ── */
.main {
  animation: redesignPageEnter 0.2s ease both;
}
@keyframes redesignPageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Cartes en cascade : chacune glisse et apparaît avec un léger décalage ── */
.media-card {
  animation: redesignCardIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.media-card:nth-child(1) { animation-delay: 0.02s; }
.media-card:nth-child(2) { animation-delay: 0.04s; }
.media-card:nth-child(3) { animation-delay: 0.06s; }
.media-card:nth-child(4) { animation-delay: 0.08s; }
.media-card:nth-child(5) { animation-delay: 0.1s; }
.media-card:nth-child(6) { animation-delay: 0.12s; }
.media-card:nth-child(7) { animation-delay: 0.14s; }
.media-card:nth-child(8) { animation-delay: 0.16s; }
.media-card:nth-child(9) { animation-delay: 0.18s; }
.media-card:nth-child(10) { animation-delay: 0.2s; }
.media-card:nth-child(11) { animation-delay: 0.22s; }
.media-card:nth-child(12) { animation-delay: 0.24s; }
.media-card:nth-child(13) { animation-delay: 0.26s; }
.media-card:nth-child(14) { animation-delay: 0.28s; }
.media-card:nth-child(15) { animation-delay: 0.3s; }
.media-card:nth-child(16) { animation-delay: 0.32s; }
.media-card:nth-child(17) { animation-delay: 0.34s; }
.media-card:nth-child(18) { animation-delay: 0.36s; }
@keyframes redesignCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Indicateur de l'onglet actif : glisse d'un onglet à l'autre au lieu de sauter ── */
.nav-links {
  position: relative;
}
.nav-indicator {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: var(--bg3);
  border-radius: 8px;
  width: 0;
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s ease;
  pointer-events: none;
  z-index: 0;
}
.nav-links .nav-link {
  position: relative;
  z-index: 1;
}
.nav-links .nav-link.active {
  background: transparent;
}