/* =============================================
   TRANSITIONS DE VUES — Dark Minimal Tech
   Chirurgicales : 150ms ease-out partout.
   Chargement page : fadeUp 0.4s.
   Max 3 éléments animés au stagger.
   ============================================= */

/* ── SORTIE DE VUE ────────────────────────── */
#app.view-exit {
  opacity:    0;
  transform:  translateY(4px);
  transition: opacity var(--transition), transform var(--transition);
}

/* ── ENTRÉE DE VUE ────────────────────────── */
#app.view-enter {
  animation: viewEnter 0.4s ease-out forwards; /* spec : fadeUp 0.4s */
}

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

/* ── FADE UP — éléments page ─────────────────
   Utilisé pour animer H1, description et btn-group
   séparément — max 3 éléments en stagger.      */
.fade-up {
  opacity:   0;
  transform: translateY(12px);
  animation: fadeUp 0.4s ease-out forwards;
}

/* Délais de stagger — 3 éléments maximum */
.fade-up:nth-child(1) { animation-delay: 0ms; }
.fade-up:nth-child(2) { animation-delay: 80ms; }
.fade-up:nth-child(3) { animation-delay: 160ms; }

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