@charset "UTF-8";
:root {
  /* Couleurs */
  --color-completed: #007bff; /* Bleu pour les étapes terminées */
  --color-active: rgba(255, 0, 0, 0.3); /* Rouge clair pour la barre active */
  --color-active-progress: rgba(255, 0, 0, 1); /* Rouge vif pour la progression active */
  --color-active-stripes: rgba(255, 0, 0, 0.2); /* Rouge clair pour les rayures */
  --color-upcoming: #ebebeb;
  /* Taille des cercles */
  --circle-size: 7px; /* Diamètre des cercles */
  /* Taille des barres */
  --bar-height: 9px; /* Hauteur des barres */
  --bar-radius: 6px; /* Rayon d'arrondi des barres */
  /* Animation */
  --stripes-size: 30px; /* Taille des rayures */
  --stripes-speed: 6s; /* Vitesse de l'animation */
}

.rh-progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.rh-progress-bar .hidden {
  display: none;
}
.rh-progress-bar .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
  transition: flex 0.4s ease-in-out;
}
.rh-progress-bar .step.completed {
  flex: 1;
}
.rh-progress-bar .step.active {
  flex: 2;
}
.rh-progress-bar .step.upcoming {
  flex: 0.5;
}
.rh-progress-bar .step .label {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}
.rh-progress-bar .step .progress-circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin-bottom: 8px;
  background-color: var(--color-upcoming); /* Gris par défaut */
  transition: background-color 0.4s ease-in-out;
}
.rh-progress-bar .step .progress-bar {
  width: 100%;
  height: var(--bar-height);
  border-radius: var(--bar-radius);
  background-color: var(--color-upcoming); /* Gris par défaut */
  overflow: hidden;
  position: relative;
}
.rh-progress-bar .step .progress-bar.completed {
  background-color: var(--color-completed); /* Bleu pour les étapes terminées */
}
.rh-progress-bar .step .progress-bar.active {
  background-color: var(--color-active); /* Rouge clair */
}
.rh-progress-bar .step .progress-bar.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%; /* Barre partiellement remplie */
  background: linear-gradient(135deg, var(--color-active-progress) 25%, var(--color-active-stripes) 25%, var(--color-active-stripes) 50%, var(--color-active-progress) 50%);
  background-size: var(--stripes-size) var(--stripes-size);
  border-radius: var(--bar-radius);
  animation: diagonal-stripes var(--stripes-speed) linear infinite;
}
.rh-progress-bar .step .progress-bar.upcoming {
  background-color: var(--color-upcoming); /* Gris */
}
.rh-progress-bar .step .progress-bar.completed::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; /* Barre complètement remplie */
  background-color: var(--color-completed);
  border-radius: var(--bar-radius);
}

/* Animation pour les rayures en mouvement horizontal */
@keyframes diagonal-stripes {
  0% {
    background-position: 0 0; /* Commence à gauche */
  }
  100% {
    background-position: calc(var(--stripes-size) * 2) 0; /* Déplace vers la droite */
  }
}

/*# sourceMappingURL=2-21gigawatt.css.map */