Je suis nul en javascript

Je pense savoir quelle est la cause de ton souci en général c'est toujours la même pour les débutants...

Tu as placé l'appel à ton script javascript dans le head de ton HTML.

Le problème, c'est que ton script s'exécute avant que ta page HTML ne soit formée...

Je t'invite à déplacer l'appel de ton script juste avant la fin de ton body.

C'est d'ailleurs une bonne pratique à conserver pour tes futurs développements.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="color-scheme" content="light dark">
    <title>Index</title>
    <link rel="stylesheet" href="main.css">
    <link rel="icon" href=".\img\favicon.svg">
</head>
<body>
    <span class="page-title" id="index">Index</span>
    <div>
        <div class="product">
            <span class="title"># - 9</span>
            <span class="detail"><a href="#">Plus de détail</a></span>
            <input type="checkbox" hidden id="0">
            <label class="show" for="0" tabindex="0"></label>
            <div class="code">
                <p>
                    5cps
                </p>
                <button class="btn-copie">
                    <img src="./img/5cps.jpg"/>
                </button>
            </div>
        </div>
    </div>
<script src="clipboard.js"></script>
</body>
</html>

J'ai fait comme tu as dit, donc comme ça ⬆️

Mais ça fonctionne toujours pas ????

console.log("fichier js chargé!");

const btnCopie = document.querySelector('.btn-copie');
const img = document.querySelector('.btn-copie > img');

btnCopie.addEventListener('click', (z) => {
   copyClip(z.target);
});

img.addEventListener('click', (z) => {
   copyClip(z.target.parentNode);
});

function copyClip(z){
  console.log(z);
  let p = z.previousElementSibling ;
  console.log(p);
  let text = p.textContent;
  console.log(text);
  navigator.clipboard.writeText(text);
  alert("Code copié !");
}

Ça marche, merci beaucoup !!