/* =========================================================================
   AXstudio — Styles du module "Écran de chargement" (loader)
   Préfixe "ax-" partout pour éviter tout conflit avec les autres classes.
   ========================================================================= */

/* Conteneur plein écran qui recouvre toute la page */
.ax-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;                 /* doit passer au-dessus de la navbar */
  background-color: #030819;     /* fond AXagency (même couleur que le hero) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Zone qui accueille l'animation Lottie (le coureur) */
.ax-runner {
  position: relative;
  width: 380px;                  /* taille du coureur */
  aspect-ratio: 1;
}
.ax-runner svg {
  display: block;
}

/* Barre de progression sous le coureur */
.ax-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 200px;                  /* longueur de la barre */
  margin-top: -80px;             /* remonte la barre sous les pieds du coureur */
}

/* Rail (fond) de la barre */
.ax-progress__track {
  flex: 1;
  height: 3px;                   /* épaisseur de la barre */
  background-color: rgba(255, 225, 0, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

/* Remplissage jaune (couleur d'appel AXagency) */
.ax-progress__bar {
  width: 0%;                     /* piloté en JS */
  height: 100%;
  background-color: #FFE100;
  border-radius: 999px;
}

/* Pourcentage affiché à droite de la barre */
.ax-progress__value {
  color: #FFE100;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  min-width: 3.5ch;
  text-align: right;
}