<!-- STYLE -->
<style>
  .code-block {
    position: relative;
    background: transparent;
    color: #1f1f1f;
    border-radius: 8px;
    padding: 1vw;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    overflow-x: auto;
    margin: 0;
    line-height: 1.6;
    white-space: pre;
    border: 0;
  }

  /* Coloration syntaxique */
  .code-block .keyword   { color: #b07dfb; font-weight: 500; }
  .code-block .function  { color: #dcdcaa; }
  .code-block .string    { color: #ce9178; }
  .code-block .comment   { color: #6a9955; font-style: italic; }
  .code-block .number    { color: #b5cea8; }
  .code-block .property  { color: #61afef; }
</style>

<!-- CODE HTML -->
<div class="code-block" data-copy-id="animScroll1">
  <pre><code>
  ...code ici...
  </code></pre>
</div>

<!-- SCRIPT JS -->
<script>
  document.querySelectorAll('[data-copy-code]').forEach(btn => {
    const id = btn.getAttribute('data-copy-code');
    const original1 = btn.querySelector('.btn-magnetic__text-p').textContent;
    const original2 = btn.querySelector('.btn-magnetic__text-p.is--duplicate').textContent;

    btn.addEventListener('click', () => {
      const codeElem = document.querySelector(`[data-copy-id="${id}"] code`);
      if (!codeElem) return;

      const text = codeElem.innerText;

      const promise = navigator.clipboard
        ? navigator.clipboard.writeText(text)
        : new Promise((res, rej) => {
            const ta = document.createElement('textarea');
            ta.value = text;
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy') ? res() : rej();
            document.body.removeChild(ta);
          });

      promise.then(() => {
        btn.querySelector('.btn-magnetic__text-p').textContent = 'Copied!';
        btn.querySelector('.btn-magnetic__text-p.is--duplicate').textContent = 'Copied!';
        setTimeout(() => {
          btn.querySelector('.btn-magnetic__text-p').textContent = original1;
          btn.querySelector('.btn-magnetic__text-p.is--duplicate').textContent = original2;
        }, 2000);
      }).catch(() => {
        alert("Impossible de copier le texte.");
      });
    });
  });
</script>