/* ==========================================================================
   150 — View Crossfade
   Bascule entre deux mini-vues (liste ↔ détail) en cross-fade doux et
   DIRECTIONNEL : la vue sortante recule (fade + léger scale + translate)
   pendant que l'entrante arrive du sens opposé.
   Moteur : View Transitions API quand disponible — anim.js pose un
   view-transition-name namespacé (view-crossfade-fwd / view-crossfade-back)
   sur la scène juste avant document.startViewTransition(), puis le retire.
   Sinon : fallback classes .is-leave-* / .is-enter-* qui rejouent les MÊMES
   keyframes — rendu identique dans les deux cas.
   Racine : .view-crossfade — états pilotés par anim.js.
   Démo CONTENUE dans la zone (scène en position relative, jamais de fixed).
   ========================================================================== */

.view-crossfade {
  --vxf-accent: var(--ml-accent, #7c8cff);

  position: relative;
  display: flex;
  flex-direction: column;
  width: min(320px, 100%);
  height: 236px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ml-surface, #151a24);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--ml-fg, #e8eaf2);
}

/* --- Onglets de navigation ------------------------------------------------ */

.view-crossfade__nav {
  display: flex;
  gap: 4px;
  padding: 10px 12px 8px;
}

.view-crossfade__tab {
  flex: 1;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ml-muted, #8b91a3);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.view-crossfade__tab:hover {
  color: var(--ml-fg, #e8eaf2);
}

.view-crossfade__tab.is-active {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ml-fg, #e8eaf2);
}

.view-crossfade__tab:focus-visible {
  outline: 2px solid var(--vxf-accent);
  outline-offset: 2px;
}

/* --- Scène : les vues empilées --------------------------------------------- */

.view-crossfade__stage {
  position: relative;
  flex: 1;
  min-height: 0;
}

.view-crossfade__view {
  position: absolute;
  inset: 0;
  padding: 6px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.view-crossfade__view[hidden] { display: none; }

/* --- Vue liste -------------------------------------------------------------- */

.view-crossfade__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
}

.view-crossfade__row.is-current {
  border-color: color-mix(in srgb, var(--vxf-accent) 45%, transparent);
  background: color-mix(in srgb, var(--vxf-accent) 10%, transparent);
}

.view-crossfade__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--ml-muted, #8b91a3);
}

.view-crossfade__row.is-current .view-crossfade__dot {
  background: var(--vxf-accent);
}

.view-crossfade__row-label { flex: 1; }

.view-crossfade__row-meta {
  font-size: 0.68rem;
  color: var(--ml-muted, #8b91a3);
}

/* --- Vue détail -------------------------------------------------------------- */

.view-crossfade__kicker {
  margin: 2px 0 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ml-accent-2, #2dd4bf);
}

.view-crossfade__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: 0.005em;
}

.view-crossfade__text {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ml-muted, #8b91a3);
}

.view-crossfade__chips {
  display: flex;
  gap: 6px;
  margin-top: auto;
}

.view-crossfade__chip {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--vxf-accent);
  background: color-mix(in srgb, var(--vxf-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--vxf-accent) 30%, transparent);
}

/* --- Keyframes partagées (View Transitions ET fallback) ---------------------
   Avant (liste → détail) : sortante recule vers le haut, entrante monte.
   Retour : miroir vertical. --------------------------------------------------- */

@keyframes view-crossfade-out-fwd {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-12px) scale(0.985); }
}

@keyframes view-crossfade-in-fwd {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes view-crossfade-out-back {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px) scale(0.985); }
}

@keyframes view-crossfade-in-back {
  from { opacity: 0; transform: translateY(-16px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Moteur View Transitions --------------------------------------------------
   EXCEPTION DOCUMENTÉE aux « pas de sélecteurs globaux » : les pseudo-éléments
   ::view-transition-* vivent forcément sur :root, c'est la seule syntaxe
   possible pour cette technique. Ils sont scopés par des view-transition-name
   NAMESPACÉS par le slug (view-crossfade-fwd / view-crossfade-back), posés
   par anim.js uniquement pendant la transition — aucune collision possible
   avec le reste de la page. La neutralisation du cross-fade root est requise :
   sans elle, TOUTE la page fondrait à chaque bascule. ------------------------- */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-old(view-crossfade-fwd) {
  animation: view-crossfade-out-fwd 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-new(view-crossfade-fwd) {
  animation: view-crossfade-in-fwd 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-old(view-crossfade-back) {
  animation: view-crossfade-out-back 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

::view-transition-new(view-crossfade-back) {
  animation: view-crossfade-in-back 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Fallback classes (Firefox / API absente) : mêmes keyframes --------------- */

.view-crossfade__view.is-leave-fwd,
.view-crossfade__view.is-leave-back { z-index: 1; }

.view-crossfade__view.is-enter-fwd,
.view-crossfade__view.is-enter-back { z-index: 2; }

.view-crossfade__view.is-leave-fwd {
  animation: view-crossfade-out-fwd 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.view-crossfade__view.is-enter-fwd {
  animation: view-crossfade-in-fwd 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.view-crossfade__view.is-leave-back {
  animation: view-crossfade-out-back 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.view-crossfade__view.is-enter-back {
  animation: view-crossfade-in-back 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --- Reduced motion ------------------------------------------------------------
   anim.js bascule déjà en swap instantané ; ceci couvre le cas où seul le CSS
   est chargé ou si la préférence change en cours de route. ---------------------- */

@media (prefers-reduced-motion: reduce) {
  .view-crossfade__tab {
    transition: none;
  }

  ::view-transition-old(view-crossfade-fwd),
  ::view-transition-new(view-crossfade-fwd),
  ::view-transition-old(view-crossfade-back),
  ::view-transition-new(view-crossfade-back),
  .view-crossfade__view.is-leave-fwd,
  .view-crossfade__view.is-enter-fwd,
  .view-crossfade__view.is-leave-back,
  .view-crossfade__view.is-enter-back {
    animation-duration: 0.01s;
  }
}