/**
 * JSP Pro — État de chargement ACF unifié (module jsp-loading.js).
 * Stylise la bande créée par window.JspLoading.show() : classes
 * .jsp-check-loading-* posées sur l'overlay d'ACF (.acf-loading-overlay).
 * Seules ces classes sont ciblées : les overlays plein écran du site
 * (#overlay_message, #overlay_creation…) gardent leur rendu actuel.
 *
 * En clair le voile reste celui d'ACF ; en sombre il passe en voile foncé.
 * Couleurs : tokens --jsp-loading-* (définis sur [data-jsp-check-shell], voir
 * assets/tokens/light.css et dark.css) avec replis pour les pages sans shell.
 */

/* Bande centrale : remplace le contenu du i.acf-loading posé par le module. */
.jsp-check-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background-image: none; /* masque le GIF de chargement d'ACF : le spinner CSS le remplace */
  line-height: 1.4;
}

.jsp-check-loading-spinner {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  border: 3px solid var(--jsp-loading-spinner-track, rgba(148, 163, 184, 0.35));
  border-top-color: var(--jsp-loading-spinner-accent, #065f46);
  animation: jsp-loading-spin 0.8s linear infinite;
}

@keyframes jsp-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.jsp-check-loading-label {
  color: var(--jsp-loading-text, #0f172a);
}

.jsp-check-loading-sublabel {
  font-size: 0.875rem;
  opacity: 0.85;
}

/* Filet défensif : positionnement de l'overlay quand le CSS d'ACF n'est pas
   chargé sur la page (le module fonctionne alors grâce aux styles inline du
   i.acf-loading posés par le JS). */
.jsp-check-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}

.jsp-check-loading-overlay .jsp-check-loading-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Sombre : voile foncé + texte clair.
   Double sélecteur conventionnel du repo (cf. check_festival.css) quand la
   page porte le shell [data-jsp-check-shell], plus règle générale sur
   html[data-jsp-global-theme="dark"] pour les pages sans shell. */
html[data-jsp-global-theme="dark"] [data-jsp-check-shell] .jsp-check-loading-overlay,
[data-jsp-check-shell][data-theme="dark"] .jsp-check-loading-overlay {
  background: var(--jsp-loading-bg, rgba(15, 23, 42, 0.92));
}

html[data-jsp-global-theme="dark"] .jsp-check-loading-overlay {
  background: rgba(15, 23, 42, 0.6);
}

html[data-jsp-global-theme="dark"] .jsp-check-loading-label,
html[data-jsp-global-theme="dark"] .jsp-check-loading-sublabel,
[data-jsp-check-shell][data-theme="dark"] .jsp-check-loading-label,
[data-jsp-check-shell][data-theme="dark"] .jsp-check-loading-sublabel {
  color: #f8fafc;
}