/* ── Indicateur de chargement global (décision Florian 15-07, option A ; habillage
   ALIGNÉ sur le modèle FACT — décision g Florian 24-07 « l'image du chargement de
   FACT me plaît plus ») : barre fine en DÉGRADÉ vert collée en haut (même dessin que
   .job-bar de cc_espera/fact.css) + pastille « étape · NN% » en haut à droite avec
   MINI-SPINNER (::before pur CSS — aucun changement de markup ni de JS).
   Lisible en mode nuit (--panel/--ink/--line). Aucune dépendance externe (CSP self). ── */

#flerp-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;                 /* au-dessus de la topbar */
  pointer-events: none;
  opacity: 1;
  transition: opacity .35s ease;
}
#flerp-loader[hidden] { display: none; }
#flerp-loader.done { opacity: 0; }

#flerp-loader-bar {
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--reco-d, #2E7D32), var(--reco, #4CAF50) 60%, #A5D6A7);
  border-radius: 0 2px 2px 0;
  transition: width .3s ease;
  will-change: width;
}

/* Retour Florian 24-07 (« je n'ai pas le loader comme sur FACT ») : la pilule
   discrète haut-droite ne ressemblait PAS à l'image FACT qu'il préfère — la
   pastille devient la CARTE CENTRALE de fact.css (.job-pastilla : 440px, panel,
   radius 14, gros spinner AU-DESSUS du texte). Elle n'apparaît que quand le JS
   pose un texte d'étape (pages lentes) — la barre fine seule couvre les
   navigations rapides, rien ne flashe. */
#flerp-loader-pill {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
  padding: 26px 22px 20px;
  border-radius: 14px;
  border: 1px solid var(--line, #E6E9F0);
  background: var(--panel, #FFFFFF);
  color: var(--ink, #16202E);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
#flerp-loader-pill[hidden] { display: none; }

/* spinner façon .job-spin de FACT (cercle --line + arc accent qui tourne),
   injecté en ::before : zéro markup, zéro JS — pure présentation. Bloc centré
   AU-DESSUS du texte, 34px comme fact.css. */
#flerp-loader-pill::before {
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 3px solid var(--line, #E6E9F0);
  border-top-color: var(--reco, #4CAF50);
  animation: flerp-loader-rota .9s linear infinite;
}
@keyframes flerp-loader-rota { to { transform: rotate(360deg); } }

html[data-theme="dark"] #flerp-loader-pill {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .55);
}

/* prefers-reduced-motion : pas d'animation continue — la barre avance par sauts nets,
   la pastille reste (spinner figé), mais sans transitions ni fondu prolongé. */
@media (prefers-reduced-motion: reduce) {
  #flerp-loader,
  #flerp-loader-bar { transition: none; }
  #flerp-loader-pill::before { animation: none; }
}