.timeline {
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;       /* ajuste selon ton design */
  width: 3px;    /* largeur de la timeline */
  height: 100%;
  background: linear-gradient(
    to bottom,
    #F2604F 0%,
    #F2604F var(--progress, 0%),
    #E1E1E1 var(--progress, 0%),
    #E1E1E1 100%
  );
  z-index: 1; /* s'assurer qu'il est visible */
}
/* Etat par défaut */
.timeline .elementor-icon {
  background-color: #FFFFFF;
  border-color : #F2604F;
  fill: #F2604F;
  transition: background-color 0.3s ease, fill 0.3s ease;
  border-radius: 50%; /* si tu veux un cercle */
}

/* Etat atteint */
.timeline .elementor-icon.active {
  background-color: #F2604F;
  fill: #FFFFFF;
}

/* changement de la couleur de fond des containers entre les icônes*/
	.timeline-box {
	  --box-progress: 0; /* valeur par défaut */
	  background-color: rgba(248, 248, 248, var(--box-progress));
	  transform: scale(calc(0.7 + (0.3 * var(--box-progress))));
	  transition: transform 0.3s linear; /* fluide, mais réversible */
	  padding: 1rem;
	  border-radius: 10px; 
	}