/* Écran d'ouverture : fond blanc, logo qui apparaît puis barre de chargement, jusqu'au premier rendu de l'application.
   Feuille externe (la CSP interdit les styles en ligne) ; retirée par main.tsx. */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom);
  background: #fff;
  transition: opacity 0.28s ease;
}
#app-splash.is-done { opacity: 0; pointer-events: none; }

#app-splash .splash-logo {
  width: min(62vw, 280px);
  height: auto;
  opacity: 0;
  transform: scale(0.94);
  animation: splash-logo-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s forwards;
}

#app-splash .splash-bar {
  position: relative;
  width: min(40vw, 160px);
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: #e8ecf1;
  opacity: 0;
  animation: splash-fade-in 0.4s ease 0.45s forwards;
}
#app-splash .splash-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 3px;
  background: #a8281a;
  animation: splash-slide 1.1s ease-in-out infinite;
}

@keyframes splash-logo-in { to { opacity: 1; transform: none; } }
@keyframes splash-fade-in { to { opacity: 1; } }
@keyframes splash-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  #app-splash .splash-logo, #app-splash .splash-bar { animation: none; opacity: 1; transform: none; }
  #app-splash .splash-bar span { animation: none; width: 100%; opacity: 0.35; }
}