.bloc-liste-numerote .liste-numerote { display: flex;flex-direction: column;}
.bloc-liste-numerote .ligne { display: flex;}
.bloc-liste-numerote .ligne:nth-child(even) .texte{justify-content: flex-end;text-align: right;}
.bloc-liste-numerote .ligne:nth-child(even) .numero{justify-content: flex-start;}
.bloc-liste-numerote .liste-numerote .ligne .colonne:first-child{border-right: 1px solid #00A99A;}
.bloc-liste-numerote .texte { display: flex; justify-content: flex-start; align-items: center;}
.bloc-liste-numerote .colonne {flex: 1;padding: 2rem 0;}
.bloc-liste-numerote .numero { display: flex;justify-content: flex-end;  align-items: center;}
.bloc-liste-numerote .ligne:nth-child(even) .texte .texte-content{margin-right: 2rem;}
.bloc-liste-numerote .ligne:nth-child(odd) .texte .texte-content{margin-left: 2rem;}
.bloc-liste-numerote .case-nombre {width: 10rem; height: 10rem;display: flex;justify-content: center; align-items: center;font-size: 4rem;}
.bloc-liste-numerote .case-nombre .nombre {position: relative;  z-index: 1; color: white;  font-size: 4rem;  font-weight: bold; text-align: center;}


.animate-background-left .number {
  color: white;
  font-size: 30px;
  opacity: 0;
  animation: show-number 0.4s forwards;
    animation-delay: 0s;
  animation-delay: 1s;
}
.animate-background-left .case-nombre {
  background: linear-gradient(90deg, transparent 50%, #00A99A 50%);
    background-size: auto;
  background-size: 200% 100%;
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  float: right;
}
.animate-background-left .case-nombre.active {
  opacity: 1;
  animation: fill-background-left 1s forwards;
}
.animate-background-right .case-nombre {
  background: linear-gradient(90deg, #00A99A 50%, transparent 50%);
    background-size: auto;
  background-size: 200% 100%;
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  float: left;
}
.animate-background-right .case-nombre.active {
  opacity: 1;
  animation: fill-background-right 1s forwards;
}

@keyframes fill-background-left {
    0% {
        background-position: 0 0; /* Départ à gauche */
    }
    100% {
        background-position: 100% 0; /* Fin à droite */
    }
}

@keyframes fill-background-right {
    0% {
        background-position: 100% 0; /* Départ à droite */
    }
    100% {
        background-position: 0 0; /* Fin à gauche */
    }
}

@keyframes show-number {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}