/* pour les barres de progression rayées */
.bar-striped {
  position: relative;
  overflow: hidden;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.192) 0,
      rgba(255, 255, 255, 0.19) 8px,
      transparent 8px,
      transparent 16px
    );
    background-size: 25px 25px;
    animation: stripesMove 1.5s linear infinite;
    pointer-events: none;
    z-index: 1;
  }
}
@keyframes stripesMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 25px 0;
  }
}

/* Animation typewriter pour ton h2 */
.typewriter h2 {
  opacity: 1;
  
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid #9E3C9D; /* Curseur */
  white-space: normal;


  max-width: fit-content;
  width: fit-content;
    margin: 0 auto;
  animation: 
    typing 1.5s steps(30, end) forwards,
    blink-caret 0.75s step-end infinite;
}
/* Animation: effet d’écriture */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* Animation: clignotement du curseur */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #9E3C9D }
}