/* Écran de chargement affiché AVANT le montage de React (le markup vit dans #root et
   est remplacé dès le premier rendu). Feuille externe + markup statique -> compatible
   avec la CSP stricte (script-src 'self', pas d'inline). Thème + accent posés par theme-init.js. */
#app-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #F2F2F7; font-family: Manrope, -apple-system, system-ui, sans-serif;
}
html[data-theme="dark"] #app-loader { background: #0A0A0C; }
#app-loader .al-mark { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
#app-loader .al-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(128, 128, 140, 0.22); border-top-color: var(--accent, #5856D6);
  animation: al-spin 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite;
}
#app-loader .al-dot { width: 22px; height: 22px; border-radius: 8px; background: var(--accent, #5856D6); animation: al-pulse 1.4s ease-in-out infinite; }
#app-loader .al-lbl { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #9A9AA5; text-transform: uppercase; }
@keyframes al-spin { to { transform: rotate(360deg); } }
@keyframes al-pulse { 0%, 100% { transform: scale(0.82); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #app-loader .al-ring { animation-duration: 2.4s; }
  #app-loader .al-dot { animation: none; }
}