/* ═══════════════════════════════════════════════════════════════════════
   Animations globales — toutes les pages (chargé après master.css).
   Fichier CSS seul : pas besoin de recompiler le JS.

   Règles :
   - Mode « backwards » : rien ne reste posé après l'animation. Un transform qui
     reste posé casserait les menus en position fixe et les fenêtres modales.
   - Les menus déroulants n'animent que l'opacité (Popper les place déjà
     avec transform).
   - Désactivé si Windows / le navigateur demande moins d'animations.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes gsmUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gsmRow {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gsmFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gsmPop {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes gsmSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gsmShine {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Arrivée de page : chaque bloc monte en cascade ─────────────── */
  .main-content > * {
    animation: gsmUp .5s cubic-bezier(.2, .7, .2, 1) backwards;
  }
  .main-content > *:nth-child(1) { animation-delay: .00s; }
  .main-content > *:nth-child(2) { animation-delay: .06s; }
  .main-content > *:nth-child(3) { animation-delay: .12s; }
  .main-content > *:nth-child(4) { animation-delay: .18s; }
  .main-content > *:nth-child(5) { animation-delay: .24s; }
  .main-content > *:nth-child(6) { animation-delay: .30s; }
  .main-content > *:nth-child(n+7) { animation-delay: .34s; }

  /* Cartes / colonnes dans une ligne Bootstrap : petite vague de gauche à droite */
  .main-content .row > [class*="col"] {
    animation: gsmUp .5s cubic-bezier(.2, .7, .2, 1) backwards;
  }
  .main-content .row > [class*="col"]:nth-child(2) { animation-delay: .05s; }
  .main-content .row > [class*="col"]:nth-child(3) { animation-delay: .10s; }
  .main-content .row > [class*="col"]:nth-child(4) { animation-delay: .15s; }
  .main-content .row > [class*="col"]:nth-child(5) { animation-delay: .20s; }
  .main-content .row > [class*="col"]:nth-child(n+6) { animation-delay: .24s; }

  /* ── 2. Lignes de tableau : apparition en vague ────────────────────── */
  .vgt-table tbody tr,
  .main-content table.table tbody tr {
    animation: gsmRow .38s ease-out backwards;
  }
  .vgt-table tbody tr:nth-child(2),  .main-content table.table tbody tr:nth-child(2)  { animation-delay: .03s; }
  .vgt-table tbody tr:nth-child(3),  .main-content table.table tbody tr:nth-child(3)  { animation-delay: .06s; }
  .vgt-table tbody tr:nth-child(4),  .main-content table.table tbody tr:nth-child(4)  { animation-delay: .09s; }
  .vgt-table tbody tr:nth-child(5),  .main-content table.table tbody tr:nth-child(5)  { animation-delay: .12s; }
  .vgt-table tbody tr:nth-child(6),  .main-content table.table tbody tr:nth-child(6)  { animation-delay: .15s; }
  .vgt-table tbody tr:nth-child(7),  .main-content table.table tbody tr:nth-child(7)  { animation-delay: .18s; }
  .vgt-table tbody tr:nth-child(8),  .main-content table.table tbody tr:nth-child(8)  { animation-delay: .21s; }
  .vgt-table tbody tr:nth-child(9),  .main-content table.table tbody tr:nth-child(9)  { animation-delay: .24s; }
  .vgt-table tbody tr:nth-child(n+10), .main-content table.table tbody tr:nth-child(n+10) { animation-delay: .27s; }

  .vgt-table tbody tr,
  .main-content table.table tbody tr {
    transition: background-color .18s ease;
  }

  /* ── 3. Fenêtres (modales) : effet « pop » ──────────────────────────── */
  .modal.show .modal-dialog {
    animation: gsmPop .32s cubic-bezier(.2, .8, .25, 1.15) backwards;
  }
  .modal-backdrop.show { animation: gsmFade .25s ease backwards; }

  /* ── 4. Menus déroulants : fondu seulement (Popper gère la position) ─ */
  .dropdown-menu.show { animation: gsmFade .18s ease-out backwards; }
  .dropdown-item { transition: background-color .15s ease, color .15s ease; }

  /* ── 5. Notifications (toasts) : glissent depuis la droite ──────────── */
  .b-toaster .toast,
  .b-toaster .b-toast { animation: gsmSlideIn .35s cubic-bezier(.2, .8, .2, 1) backwards; }

  /* ── 6. Boutons : soulèvement au survol, enfoncement au clic ───────── */
  .btn {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease,
                border-color .16s ease, color .16s ease;
  }
  .btn:not(:disabled):not(.disabled):not(.btn-link):hover { transform: translateY(-1px); }
  .btn:not(:disabled):not(.disabled):active { transform: translateY(0) scale(.97); }

  /* ── 7. Champs : focus en douceur ──────────────────────────────────── */
  .form-control, .custom-select, .vs__dropdown-toggle {
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  }

  /* ── 8. Cartes : ombre au survol (pas de transform : les menus en
         position fixe à l'intérieur seraient décalés) ──────────────────── */
  .main-content .card { transition: box-shadow .2s ease; }
  .main-content .card:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, .08); }

  /* ── 9. Menu latéral : glissement des liens au survol ──────────────── */
  .sidebar-left .navigation-left .nav-item .nav-item-hold,
  .sidebar-left-secondary .childNav li a {
    transition: transform .18s ease, background-color .18s ease, color .18s ease;
  }
  .sidebar-left-secondary .childNav li a:hover { transform: translateX(4px); }

  /* ── 10. Onglets / pastilles : transition des états actifs ─────────── */
  .nav-tabs .nav-link, .nav-pills .nav-link, .badge {
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  }

  /* ── 11. Chargement : barre de progression brillante ───────────────── */
  #nprogress .bar {
    background: linear-gradient(90deg, #f97316, #fdba74, #f97316) !important;
    background-size: 200% 100% !important;
    animation: gsmShine 1.2s linear infinite;
  }
}

/* Moins d'animations demandé : tout est instantané. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}