La réservation du panier

const DUREE = 120; // secondes
const message = document.querySelector("#message");
const bouton = document.querySelector("#prolonger");
let reste;
let minuteur;

// 75 → "1:15" ; 5 → "0:05"
export function formater(secondes) {
  const min = Math.floor(secondes / 60);
  const sec = String(secondes % 60).padStart(2, "0");
  return `${min}:${sec}`;
}

function afficher() {
  if (reste > 0) {
    message.textContent = `Votre panier est réservé pendant ${formater(reste)}.`;
  } else {
    message.textContent = "La réservation a expiré : les livres sont remis en rayon.";
  }
}

function demarrer() {
  clearInterval(minuteur); // un seul minuteur à la fois, même après plusieurs clics
  reste = DUREE;
  afficher();
  minuteur = setInterval(() => {
    reste--;
    afficher();
    if (reste === 0) {
      clearInterval(minuteur);
    }
  }, 1000);
}

bouton.addEventListener("click", demarrer);
demarrer();

Le paragraphe porte role="status", pour que le lecteur d'écran annonce l'expiration. Nous avons vérifié la page dans Chromium avec une horloge simulée : « 1:15 » au bout de 45 s, « 1:59 » une seconde après un double clic sur « Prolonger », le message d'expiration 120 s plus tard. Sans le clearInterval de demarrer, chaque clic ajouterait un minuteur sans arrêter les précédents : après deux clics, trois minuteurs décrémentent reste, le temps défile trois fois trop vite, et les anciens minuteurs, dont on a perdu l'identifiant, ne s'arrêtent plus jamais.