<!-- Texte animé -->
<div id="decrypt-1" class="decrypt-text" data-text="Le premier SMS de l’histoire disait 'Merry Christmas' "></div>

<!-- Font import -->
<link href="https://fonts.googleapis.com/css2?family=Unbounded&display=swap" rel="stylesheet">

<style>
.decrypt-text {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  color: white;
}
</style>

<script>
function decryptText(el, speed = 50, chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!?$") {
  const finalText = el.dataset.text;
  let iterations = 0;
  let displayed = "";

  clearInterval(el._decryptInterval);
  el._decryptInterval = setInterval(() => {
    displayed = "";
    for (let i = 0; i < finalText.length; i++) {
      if (i < iterations) {
        displayed += finalText[i];
      } else {
        displayed += chars[Math.floor(Math.random() * chars.length)];
      }
    }
    el.textContent = displayed;
    iterations++;
    if (iterations > finalText.length) clearInterval(el._decryptInterval);
  }, speed);
}

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".decrypt-text").forEach(el => decryptText(el));
});
</script>