/* Écran de chargement partagé par la PWA et l'administration ; chargé dans <head>,
   il s'affiche avant le CSS de l'application (injecté par JS en développement).
   Couleurs réglables par page (variables --splash-*), sombres par défaut comme la carte. */
#splash {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: var(--splash-bg, #020617);
  color: var(--splash-ink, #94a3b8);
  font: 500 0.875rem/1.4 system-ui, sans-serif;
  transition: opacity 0.4s ease, visibility 0.4s;
}
#splash.splash-hidden {
  opacity: 0;
  visibility: hidden;
}
#splash img {
  width: var(--splash-logo-width, min(16rem, 70vw));
  height: auto;
  animation: splash-in 0.6s ease-out both;
}
/* Barre de progression indéterminée ; jaune de l'outil « Place PMR » par défaut */
#splash .splash-bar {
  position: relative;
  width: 8rem;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--splash-track, rgb(255 255 255 / 0.1));
}
#splash .splash-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: var(--splash-accent, #f5b700);
  animation: splash-slide 1.1s ease-in-out infinite;
}
@keyframes splash-in {
  from { opacity: 0; transform: scale(0.96); }
}
@keyframes splash-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  #splash img, #splash .splash-bar::after { animation: none; }
  #splash .splash-bar::after { width: 100%; opacity: 0.6; }
}