/* =========================================================================
   Microinteractions (Priorite 5, audit GED 2026-05-06)
   Effets visuels premium 100% additifs : view transitions, toast Sonner-like,
   page slide, skeletons match-shape etendus, ripple sur boutons.

   Active par defaut, desactivable via :
     localStorage.gestdoc_microinteractions = "off"  -> body sans la classe
     OU prefers-reduced-motion: reduce              -> animations neutralisees

   Aucune dependance vers main.css ou design-tokens.css.
   ========================================================================= */

/* ---------- View Transitions API (Chrome 111+, Edge 111+, Safari 18+) ---------- */
/* Page transitions : ::view-transition-* est natif, pas besoin de polyfill.
   Sur les autres navigateurs, le wrapper JS bascule sur les classes .gdmi-page-*. */

::view-transition-old(root) {
  animation: gdmi-fade-out .18s ease-out forwards;
}
::view-transition-new(root) {
  animation: gdmi-slide-in .22s cubic-bezier(.2,.8,.4,1) forwards;
}

@keyframes gdmi-fade-out { to { opacity: 0; } }
@keyframes gdmi-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fallback CSS pour les navigateurs sans View Transitions API (Firefox, Safari < 18).
   Le JS active la classe .gdmi-transitioning sur la page entrante, qui tombe a la fin. */
.gdmi-transitioning {
  animation: gdmi-slide-in .22s cubic-bezier(.2,.8,.4,1) both;
}

/* ---------- Reduced motion : neutralise toutes nos animations ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .gdmi-transitioning { animation: none; }
  .gdmi-toast { animation: none !important; transition: none !important; }
  .gdmi-skeleton { animation: none !important; }
  .gdmi-ripple { display: none; }
}

/* ---------- Toast Sonner-like (premium) ---------- */
/* Repose sur le #toast-container existant. On wrap les .toast existants via JS. */

body.gdmi-on .toast {
  /* Override le style legacy avec un design plus moderne et anime */
  position: relative;
  background: #0f172a;
  color: #f8fafc;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .25), 0 2px 6px rgba(15, 23, 42, .12);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 380px;
  animation: gdmi-toast-in .28s cubic-bezier(.2,.8,.4,1) both;
  transform-origin: top right;
}
body.gdmi-on .toast.toast-success { background: linear-gradient(135deg, #064e3b, #047857); border-color: rgba(110, 231, 183, .25); }
body.gdmi-on .toast.toast-error   { background: linear-gradient(135deg, #7f1d1d, #b91c1c); border-color: rgba(252, 165, 165, .3); }
body.gdmi-on .toast.toast-warning { background: linear-gradient(135deg, #78350f, #b45309); border-color: rgba(252, 211, 77, .25); }
body.gdmi-on .toast.toast-info    { background: linear-gradient(135deg, #1e3a8a, #2563eb); border-color: rgba(147, 197, 253, .25); }

@keyframes gdmi-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Stack de toasts : effet "deck" ou les toasts plus anciens se compressent */
body.gdmi-on #toast-container {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  pointer-events: none;
}
body.gdmi-on #toast-container > * { pointer-events: auto; }

/* ---------- Skeletons match-shape etendus ---------- */
/* Etends le systeme qw-skeleton existant avec de nouveaux types. */

.gdmi-skeleton {
  background: linear-gradient(90deg, #eef2f7 0%, #e2e8f0 50%, #eef2f7 100%);
  background-size: 200% 100%;
  animation: gdmi-shimmer 1.4s linear infinite;
  border-radius: 6px;
  display: block;
}
.gdmi-skel-card {
  height: 110px; border-radius: 12px;
}
.gdmi-skel-avatar {
  width: 36px; height: 36px; border-radius: 50%;
}
.gdmi-skel-bar { height: 12px; }
.gdmi-skel-bar.gdmi-w-25 { width: 25%; }
.gdmi-skel-bar.gdmi-w-50 { width: 50%; }
.gdmi-skel-bar.gdmi-w-75 { width: 75%; }
.gdmi-skel-bar.gdmi-w-100 { width: 100%; }

@keyframes gdmi-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Ripple sur boutons (Material-like, tres subtil) ---------- */
/* Active uniquement sur body.gdmi-on .btn pour rester opt-in.
   N'utilise pas pseudo-element pour eviter de casser des btn ayant deja
   ::before / ::after. Le JS injecte un span temporaire. */

.gdmi-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  pointer-events: none;
  transform: scale(0);
  animation: gdmi-ripple .55s ease-out forwards;
  z-index: 1;
}
@keyframes gdmi-ripple {
  to { transform: scale(2.4); opacity: 0; }
}

/* ---------- Smooth focus-ring (animation au focus tab) ---------- */
body.gdmi-on .btn:focus-visible,
body.gdmi-on .form-control:focus-visible,
body.gdmi-on input:focus-visible,
body.gdmi-on select:focus-visible,
body.gdmi-on textarea:focus-visible {
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* ---------- Microinteractions toggle button (settings) ---------- */
.gdmi-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.gdmi-toggle-pill:hover { background: #e2e8f0; }
.gdmi-toggle-pill[data-active="true"] { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }

/* ---------- Cmdk-ask overlay : transition lissee ---------- */
body.gdmi-on .cmdk-ask-overlay { animation: gdmi-fade-in .15s ease-out; }
body.gdmi-on .cmdk-ask-modal { animation: gdmi-modal-in .22s cubic-bezier(.2,.8,.4,1); }
@keyframes gdmi-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gdmi-modal-in {
  from { transform: translateY(14px) scale(.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}