/*
 * Écran de chargement « V » entre deux pages — administration et espace client (2026-10-08).
 * Même visuel que les chargements de tableaux (datatable-spinner.css : carte, logo 72 px, branches tracées depuis la pointe,
 * traînée), classes préfixées vt-pl pour ne pas dépendre de ce fichier côté client.
 * Balisage : application/views/vt_page_loader_body.php ; logique : assets/js/vt-page-loader.js.
 * html.vt-pl-arrive (posé dès le <head> après un clic sur un lien) : visible dès le premier affichage de la nouvelle page.
 */
.vt-pl {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  background: rgba(238, 242, 248, 0.88);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.vt-pl.is-on, html.vt-pl-arrive .vt-pl { opacity: 1; visibility: visible; pointer-events: auto; cursor: progress; transition: opacity .18s ease; }
html.vt-pl-arrive .vt-pl { transition: none; }
.vt-pl-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 36px 22px;
  border: 1px solid #e4e9f2; border-radius: 12px; background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(10, 19, 48, 0.06), 0 12px 32px rgba(10, 19, 48, 0.08);
}
.vt-pl-logo { display: block; width: 72px; height: 72px; margin-bottom: 6px; overflow: visible; }
.vt-pl-logo .vt-pl-left, .vt-pl-logo .vt-pl-right {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: vt-pl-arm 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.vt-pl-logo .vt-pl-left { fill: #0E1A33; }
.vt-pl-logo .vt-pl-right { fill: #16C7DE; animation-delay: 0.18s; }
.vt-pl-logo .vt-pl-streak { fill: #16C7DE; opacity: 0; animation: vt-pl-streak 1.4s ease-in-out 0.3s infinite; }
.vt-pl-text { font: 14px/1.3 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; color: #4a5774; }
@keyframes vt-pl-arm {
  0%   { transform: scaleY(0.15); opacity: 0.25; }
  35%  { transform: scaleY(1); opacity: 1; }
  75%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.15); opacity: 0.25; }
}
@keyframes vt-pl-streak {
  0%, 30% { opacity: 0; transform: translate(-10px, 6px); }
  55%     { opacity: 0.45; transform: translate(0, 0); }
  100%    { opacity: 0; transform: translate(8px, -4px); }
}
@keyframes vt-pl-pulse { 50% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
  .vt-pl-logo .vt-pl-left, .vt-pl-logo .vt-pl-right { animation: vt-pl-pulse 1.6s ease-in-out infinite; transform: none; }
  .vt-pl-logo .vt-pl-streak { animation: none; opacity: 0.3; }
}
@media (max-width: 768px) {
  .vt-pl-logo { width: 56px; height: 56px; }
  .vt-pl-box { padding: 22px 28px 18px; }
}
@media print { .vt-pl { display: none !important; } }