* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Conteneur principal de la barre de progression */
.progressbar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
}

/* Liste des cercles et des barres */
.steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%; /* Ajuster selon la largeur souhaitée */
    position: relative;
}

/* Liste des étiquettes (labels) */
.labels {
  display: flex; /* Active le mode Flexbox */
  justify-content: space-between; /* Espace égal entre les éléments */
  list-style-type: none; /* Retire les puces des <li> */
  padding: 0;
  margin: 0;
  width: 90%; /* Ajuster selon la largeur désirée */
}

.labels li {
  flex: 1; /* Assure que chaque <li> occupe un espace égal */
  display: flex;
  justify-content: center; /* Centre le contenu de chaque <li> */
  align-items: center;
}

/* Les cercles (étapes) */
.steps li {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.steps .step {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #d7d7c3;
    display: grid;
    place-items: center;
    color: ghostwhite;
    z-index: 2; /* Les cercles au-dessus des lignes */
    position: relative;
}

.steps .step p {
    font-size: 18px;
    margin: 0;
}

.steps .step i.awesome {
    display: none;
}

/* Barre de progression entre les étapes */
.line {
    flex-grow: 1;
    height: 3px;
    background-color: #d7d7c3;
    z-index: 1; /* Derrière les cercles */
}

.steps li:last-child .line {
    display: none; /* Pas de barre après le dernier cercle */
}

.labels li {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.labels .label {
    font-family: sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: bold;
    color: #1b761b;
}

/* Étape active (cercle vert) */
.steps li .step.active {
    background-color: #1b761b;
}

/* Barre active (verte) */
.steps .line.active {
    background-color: #1b761b;
}

/* Afficher l'icône de check sur les étapes atteintes */
.steps li .step.active p {
    display: none;
}

.steps li .step.active i.awesome {
    display: block;
}

/* Cercle gris pour les étapes actives d'une commande annulée */
.canceled .steps li .step.active {
    background-color: grey;
}

/* Ligne grise pour les étapes actives d'une commande annulée */
.canceled .steps .line.active {
    background-color: grey;
}

/* Fond gris bleu pour une commande annulée */
.canceled {
    background-color: lightslategray;
}