/* Chargement commun au site et au tableau de bord. Le fonctionnement est dans loader.js. */
@keyframes pf-load-spin { to { transform: rotate(360deg); } }
@keyframes pf-load-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-load-hide { to { opacity: 0; visibility: hidden; } }
@keyframes pf-load-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes pf-load-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Écran d'ouverture. L'animation de secours le retire même si le script s'arrête en route. */
html.pf-loading::before,
html.pf-loading::after {
  content: "";
  position: fixed;
  z-index: 2147483000;
  transition: opacity 0.28s ease, visibility 0.28s;
  pointer-events: none;
}
html.pf-loading::before {
  inset: 0;
  background: #F7F8FE url("/icon.svg") center / 52px 52px no-repeat;
  animation: pf-load-hide 0.3s ease 4s forwards;
}
html.pf-loading::after {
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  box-sizing: border-box;
  border: 3px solid rgba(68, 83, 224, 0.16);
  border-top-color: #4453E0;
  border-radius: 50%;
  animation: pf-load-spin 0.85s linear infinite, pf-load-hide 0.3s ease 4s forwards;
}
html[data-theme="dark"].pf-loading::before { background-color: #0D0F1C; }
html.pf-loading.pf-leaving::before {
  animation: pf-load-show 0.18s ease both, pf-load-hide 0.3s ease 8s forwards;
}
html.pf-loading.pf-leaving::after {
  animation: pf-load-spin 0.85s linear infinite, pf-load-show 0.18s ease both, pf-load-hide 0.3s ease 8s forwards;
}
html.pf-ready::before,
html.pf-ready::after { opacity: 0; visibility: hidden; }

/* Fine barre en haut de l'écran pendant un appel qui dure */
html.pf-busy:not(.pf-loading)::after {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 2147483000;
  height: 3px;
  background: linear-gradient(90deg, transparent, #4453E0, transparent) no-repeat;
  background-size: 40% 100%;
  opacity: 0;
  pointer-events: none;
  animation: pf-load-show 0.2s ease 0.15s forwards, pf-load-bar 1s ease-in-out 0.15s infinite;
}

/* Bouton occupé : son texte laisse place à un cercle, sans changer sa taille */
.btn[aria-busy="true"],
button[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  opacity: 1 !important;
  pointer-events: none;
}
.btn[aria-busy="true"] svg,
button[aria-busy="true"] svg { visibility: hidden; }
.btn[aria-busy="true"]::after,
button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  box-sizing: border-box;
  border: 2.5px solid var(--pf-spin-track, rgba(68, 83, 224, 0.22));
  border-top-color: var(--pf-spin, #4453E0);
  border-radius: 50%;
  animation: pf-load-spin 0.7s linear infinite;
}
.btn-indigo[aria-busy="true"],
.btn-brand[aria-busy="true"],
.btn-dark[aria-busy="true"] {
  --pf-spin: #FFFFFF;
  --pf-spin-track: rgba(255, 255, 255, 0.32);
}

/* Données du tableau de bord : un emplacement qui respire le temps qu'elles arrivent, puis s'arrête s'il ne vient rien */
.kpis:empty,
.table-box:empty,
#detail:empty {
  min-height: 112px;
  border-radius: 12px;
  background: linear-gradient(100deg, #EEF0FA, #F6F7FD 45%, #EEF0FA);
  animation: pf-load-shimmer 1.3s ease-in-out 12;
}
.table-box:empty { min-height: 180px; margin: 16px; }