/* EXDEV AutoGestion — Motion System v1.3.0
   Animations natives, sans dépendance, pensées pour PC, mobile, 4K/5K et ultrawide. */

@view-transition { navigation: auto; }

:root {
  --motion-fast: 160ms;
  --motion-normal: 360ms;
  --motion-slow: 620ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-soft: cubic-bezier(.16, 1, .3, 1);
}

::view-transition-old(root) {
  animation: exdev-page-out 180ms ease both;
}
::view-transition-new(root) {
  animation: exdev-page-in 420ms var(--motion-ease) both;
}

@keyframes exdev-page-out {
  to { opacity: 0; transform: scale(.995); }
}
@keyframes exdev-page-in {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: none; }
}

/* ---------- Loader de démarrage ---------- */
.exdev-motion-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 190, 255, .14), transparent 34%),
    linear-gradient(145deg, #06101e, #030711 72%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 440ms ease, visibility 440ms ease;
  animation: exdev-loader-safety 3s forwards;
}
.exdev-motion-loader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.exdev-motion-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.exdev-motion-loader-card {
  width: min(300px, calc(100vw - 48px));
  display: grid;
  justify-items: center;
  gap: 16px;
  color: #eef8ff;
  text-align: center;
}
.exdev-motion-loader-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 12px 32px rgba(0, 170, 255, .32));
  animation: exdev-logo-breathe 1.45s var(--motion-ease-soft) infinite alternate;
}
.exdev-motion-loader-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .01em;
}
.exdev-motion-loader-subtitle {
  margin: -8px 0 0;
  color: rgba(210, 228, 248, .68);
  font-size: 13px;
}
.exdev-motion-loader-track {
  width: 190px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
}
.exdev-motion-loader-track::after {
  content: "";
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #19d4ff, #75ffe8, transparent);
  animation: exdev-loader-scan 1.05s ease-in-out infinite;
}
@keyframes exdev-logo-breathe {
  from { transform: translateY(2px) scale(.96); opacity: .82; }
  to { transform: translateY(-3px) scale(1.025); opacity: 1; }
}
@keyframes exdev-loader-scan {
  from { transform: translateX(-150%); }
  to { transform: translateX(270%); }
}
@keyframes exdev-loader-safety {
  0%, 86% { pointer-events: auto; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- Barre de chargement API ---------- */
.exdev-network-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 0;
  height: 3px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, #0aa7ff, #28e7d0, #8af5ff);
  box-shadow: 0 0 15px rgba(36, 220, 255, .5);
  transition: width 280ms ease, opacity 180ms ease;
}
.exdev-network-progress.is-loading { opacity: 1; }
.exdev-network-progress.is-complete {
  width: 100% !important;
  opacity: 0;
  transition: width 180ms ease, opacity 380ms ease 120ms;
}

/* ---------- Révélations et changement de vue ---------- */
[data-motion-observed="1"] {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.motion-swap-in {
  animation: exdev-swap-in 460ms var(--motion-ease) both;
}
@keyframes exdev-swap-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.994); }
  to { opacity: 1; transform: none; }
}

/* ---------- Micro-interactions ---------- */
.btn,
button,
.icon-btn,
.account-button,
.side-item,
input,
select,
textarea {
  transition:
    transform var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.btn:active,
button:active,
.icon-btn:active,
.account-button:active {
  transform: translateY(1px) scale(.985);
}

input:focus,
select:focus,
textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(36, 211, 238, .1), 0 10px 28px rgba(0, 0, 0, .12);
}

.workspace-topbar,
.pro-home-nav {
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.side-item {
  position: relative;
  overflow: hidden;
}
.side-item::after {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, transparent, rgba(62, 215, 255, .52), transparent);
  transition: transform 280ms var(--motion-ease);
  pointer-events: none;
}
.side-item:hover::after,
.side-item.active::after {
  transform: scaleX(1);
}
.side-item [data-exdev-icon],
.side-item .exdev-svg {
  transition: transform 260ms var(--motion-ease), opacity 200ms ease;
}

/* Cards sélectionnées : mouvement léger seulement, sans effet néon excessif. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  button:hover,
  .icon-btn:hover,
  .account-button:hover {
    transform: translateY(-2px);
  }
  .side-item:hover [data-exdev-icon],
  .side-item:hover .exdev-svg {
    transform: translateX(2px) scale(1.035);
  }
  .pro-info-card,
  .pro-steps > *,
  .pro-grid-3 > *,
  .pro-grid-4 > *,
  .ops-metrics-grid > *,
  .exdev-quick-actions > *,
  .v12-admin-stats > *,
  .v12-checklist-grid > *,
  .exdev-detail-tile,
  .server-manage-card,
  .v12-admin-account-card {
    transition:
      transform 320ms var(--motion-ease),
      border-color 240ms ease,
      box-shadow 320ms ease,
      background-color 240ms ease;
  }
  .pro-info-card:hover,
  .pro-steps > *:hover,
  .pro-grid-3 > *:hover,
  .pro-grid-4 > *:hover,
  .ops-metrics-grid > *:hover,
  .exdev-quick-actions > *:hover,
  .v12-admin-stats > *:hover,
  .v12-checklist-grid > *:hover,
  .exdev-detail-tile:hover,
  .server-manage-card:hover,
  .v12-admin-account-card:hover {
    transform: translateY(-4px);
    border-color: rgba(83, 207, 255, .28);
    box-shadow: 0 18px 44px rgba(1, 9, 22, .22);
  }
}

/* ---------- Modales, menus et notifications ---------- */
.exdev-modal-backdrop {
  animation: exdev-backdrop-in 220ms ease both;
}
.exdev-modal {
  animation: exdev-modal-in 430ms var(--motion-ease) both;
  transform-origin: 50% 34%;
}
.account-dropdown,
select:focus-visible,
[role="menu"] {
  animation: exdev-menu-in 220ms var(--motion-ease) both;
  transform-origin: top right;
}
.notice,
.v12-error-card,
.admin-reply,
.status-pill,
.badge {
  animation: exdev-soft-pop 340ms var(--motion-ease) both;
}
@keyframes exdev-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes exdev-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes exdev-menu-in {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes exdev-soft-pop {
  from { opacity: 0; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

/* ---------- États de chargement existants ---------- */
.loading-card,
.v12-loading-card,
.skeleton,
[data-loading="true"] {
  position: relative;
  overflow: hidden;
}
.loading-card::after,
.v12-loading-card::after,
.skeleton::after,
[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-110%);
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.06) 46%, rgba(72,211,255,.08) 52%, transparent 72%);
  animation: exdev-shimmer 1.35s ease-in-out infinite;
}
@keyframes exdev-shimmer { to { transform: translateX(110%); } }

/* ---------- Progressions ---------- */
.shield-bar em,
progress::-webkit-progress-value {
  transition: width 900ms var(--motion-ease);
}
.exdev-progress-ring {
  transition: --p 1s var(--motion-ease), transform 260ms var(--motion-ease);
}
.exdev-progress-ring:hover { transform: scale(1.035); }

/* ---------- Responsive et performance ---------- */
@media (max-width: 820px) {
  :root {
    --motion-normal: 300ms;
    --motion-slow: 480ms;
  }
  .exdev-motion-loader-logo { width: 76px; height: 76px; }
  .btn:hover,
  button:hover,
  .icon-btn:hover,
  .account-button:hover { transform: none; }
  .workspace-sidebar {
    transition: transform 330ms var(--motion-ease), visibility 330ms ease !important;
    will-change: transform;
  }
}

@media (min-width: 3000px) {
  .exdev-motion-loader-logo { width: 112px; height: 112px; }
  .exdev-motion-loader-title { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .exdev-motion-loader { display: none !important; }
  .exdev-network-progress { display: none !important; }
}
.workspace-topbar.is-scrolled,
.pro-home-nav.is-scrolled {
  background-color: rgba(10, 17, 30, .92);
  border-color: rgba(82, 198, 235, .16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
}