.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  animation: stroke 6s linear infinite;
}

.text:nth-child(5n + 1) { stroke: #00387b; animation-delay: -1.2s; } /* bleu */
.text:nth-child(5n + 2) { stroke: #fecd08; animation-delay: -2.4s; } /* jaune */
.text:nth-child(5n + 3) { stroke: #d52929; animation-delay: -3.6s; } /* rouge */
.text:nth-child(5n + 4) { stroke: #ffffff; animation-delay: -4.8s; } /* blanc */
.text:nth-child(5n + 5) { stroke: #007a3d; animation-delay: -6s; }   /* vert */

@keyframes stroke {
  to {
    stroke-dashoffset: -400;
  }
}

/* Basic layout */
body {
  margin: 0;
  height: 100%;
  background: #111;
  color: #fff;
}

.content {
  font: 800 14.5em/1 'Open Sans', Impact, sans-serif;
  text-transform: uppercase;
}

svg {
  width: 50%;
  margin: 0 auto 50px;
  display: block;
}

.scrolling-text {
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 20px 0;
    background: transparent;
    position: relative;
}

.wave-text {
    display: inline-block;
    animation: scroll-left 20s linear infinite;
    white-space: nowrap;
}

.wave-text span {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    animation: wave 1.5s ease-in-out infinite;
}

/* Défilement de droite à gauche */
@keyframes scroll-left {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Animation d’ondulation */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-6px);
    }
    75% {
        transform: translateY(6px);
    }
}