edit: un peu de rangement, ajout bouton plus évènement, ok en version dégradée, problème itération (ne garde pas en mémoire les poster des évènements, null au 2e tour) et style qui ne change pas dans js

js/main.js

@@ -0,0 +1,71 @@
+let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');
+
+console.log("source buttons : ", btnList)
+
+let displayWindow = document.querySelector('#posterWindow');
+
+let displayContainer = document.querySelector('#posterContainer');
+
+let closeBtn = document.querySelector('#posterCloseBtn');
+
+closeBtn.addEventListener('click', () => {
+  displayWindow.style.visibility  = 'collapse';
+  displayContainer.replaceChildren();
+})
+
+async function getPoster(src){
+  let res = await fetch(src);
+  if (res.ok){
+    let html_text = await res.text()
+    let html = new DOMParser().parseFromString(html_text, "text/html");
+      return html
+  } else{
+    console.log('error 333');
+      return
+  }
+}
+
+let eventList = [];
+
+if( btnList.length > 0 ){
+  for (let btn of btnList ){
+    let link = btn.children[0];
+    link.style.pointerEvents = 'none';
+
+    console.log(link.href);
+    
+    let posterPage = await getPoster(link.href);
+
+    //console.log('selected poster: ', posterPage)
+
+    let styleList = Array.from(posterPage.querySelectorAll('head > style'));
+    //console.log(styleList)
+
+    styleList.splice(0,1);
+    //console.log(styleList)
+
+    eventList.push(
+      {
+        content: posterPage,
+        stylesheet: styleList,
+        sourceBtn: btn
+      }
+    );
+  }
+}
+
+console.log(eventList);
+
+if (eventList.length > 0){
+  for (let obj of eventList){
+    let btn = obj.sourceBtn;
+    let content = obj.content;
+    for (let style of obj.stylesheet){
+      document.head.append(style);
+    }
+    obj.sourceBtn.addEventListener( 'click', () => {
+      displayWindow.style.visibility = 'visible';
+      displayContainer.replaceChildren(obj.content.querySelector('main'));
+    })
+  }
+}