:root{
  --step-red: #E2001A; /* remplacez par votre rouge de marque exact */
}

.frame-col{
  position: relative;
  overflow: hidden;
}
.frame-col::after{
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: var(--step-red);
}

.column-btn{
  transition: background-color .5s ease, border-color .5s ease, color .5s ease;
}

.column-btn.step-1{ animation: fillStep1 4.3s infinite; }
.column-btn.step-2{ animation: fillStep2 4.3s infinite; }
.column-btn.step-3{ animation: fillStep3 4.3s infinite; }
.frame-col.line-1::after{ animation: fillLine1 4.3s infinite; }
.frame-col.line-2::after{ animation: fillLine2 4.3s infinite; }

@keyframes fillStep1{
  /*0%    { background-color:#fff; border-color:var(--step-red); color:var(--step-red); }*/
  0%    { background-color:#fff; border-color:#706f6f; color:#706f6f; }
  11.6% { background-color:var(--step-red); border-color:var(--step-red); color:#fff; }
  100%  { background-color:var(--step-red); border-color:var(--step-red); color:#fff; }
}
@keyframes fillStep2{
  /*0%, 32.6% { background-color:#fff; border-color:var(--step-red); color:var(--step-red); }*/
  0%, 32.6% { background-color:#fff; border-color:#706f6f; color:#706f6f; }
  44.2%     { background-color:var(--step-red); border-color:var(--step-red); color:#fff; }
  100%      { background-color:var(--step-red); border-color:var(--step-red); color:#fff; }
}
@keyframes fillStep3{
  /*0%, 65.1% { background-color:#fff; border-color:var(--step-red); color:var(--step-red); }*/
  0%, 65.1% { background-color:#fff; border-color:#706f6f; color:#706f6f; }
  76.7%     { background-color:var(--step-red); border-color:var(--step-red); color:#fff; }
  100%      { background-color:var(--step-red); border-color:var(--step-red); color:#fff; }
}
@keyframes fillLine1{
  0%, 11.6% { width:0%; }
  32.6%     { width:100%; }
  100%      { width:100%; }
}
@keyframes fillLine2{
  0%, 44.2% { width:0%; }
  65.1%     { width:100%; }
  100%      { width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .column-btn.step-1, .column-btn.step-2, .column-btn.step-3,
  .frame-col.line-1::after, .frame-col.line-2::after{
    animation: none;
  }
}
