Dans quel ordre ?

Avec la page et le script suivants, qu'affiche la console après un clic sur le bouton ? Et après un clic sur la carte, hors du bouton ?

<section id="rayon">
  <article id="carte">
    <button type="button" id="ajouter">Ajouter</button>
  </article>
</section>

const rayon = document.querySelector("#rayon");
const carte = document.querySelector("#carte");
const ajouter = document.querySelector("#ajouter");

rayon.addEventListener("click", () => console.log("A rayon"));
carte.addEventListener("click", (e) => console.log("B carte", e.target.id));
ajouter.addEventListener("click", () => console.log("C bouton"));
rayon.addEventListener("click", () => console.log("D rayon (capture)"), { capture: true });
carte.addEventListener("click", (e) => {
  console.log("E carte, arrêt");
  e.stopPropagation();
});
document.addEventListener("click", () => console.log("F document"));