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

style/common.css

@@ -107,3 +107,59 @@
 
   box-sizing: border-box;
 }
+
+.floatingWindow{
+  position: fixed;
+  z-index: 3333;
+
+  width: 90vw;
+  height: auto;
+
+  top: 5vh;
+  left: 5vw;
+
+  background-color: var(--back-color);
+  border-color: var(--main-color);
+  border-radius: 16.1px;
+  border-style: solid;
+  border-width: thin;
+
+  overflow: hidden;
+  box-sizing: content-box;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  .posterTitle{
+    position: relative;
+    top: 0;
+    width: 100%;
+    height: 44px;
+
+    background-color: var(--main-color);
+    color: var(--back-color);
+
+    text-transform: none;
+    font-size: 15px;
+    font-family: 'velvelyne';
+    font-weight: bold;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-left: 33px;
+    padding-right: 16.1px;
+
+    box-sizing: border-box;
+
+    .iconBtnStyle{
+      width: 33px;
+      height: 33px;
+    }
+
+  }
+}

style/default.css

@@ -21,7 +21,7 @@ a button{
   cursor: inherit;
 }
 
-p,h1,h2,h3{
+p,h1,h2,h3,h4{
   cursor: inherit;
   pointer-events: none !important;
   padding: 0;

style/main.css

@@ -362,8 +362,16 @@ main{
                           position: relative;
                           z-index: 33;
 
+                          a{
+                            width: 100%;
+                            height: 100%;
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            justify-content: space-around;
+                          }
+
                           .iconBtnStyle{
-                            visibility: visible;
                             position: absolute;
                             z-index: 34;
                             width: 33px;
@@ -374,6 +382,7 @@ main{
 
                           .icon{
                             transform: rotate(45deg);
+                            pointer-events: none;
                           }
                         }
 
@@ -503,5 +512,17 @@ main{
                 }
               }
       }
-
+}
+
+#posterWindow{
+  visibility: collapse;
+}
+
+#posterContainer{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
 }

style/typo.css

@@ -1,33 +1,33 @@
 @font-face {
   font-family: 'karrik';
-  src: url('./assets/typo/Karrik-Italic.woff2') format('woff2');
+  src: url('typo/Karrik-Italic.woff2') format('woff2');
   font-style: italic;
 }
 
 @font-face {
   font-family: 'karrik';
-  src: url('./assets/typo/Karrik-Regular.woff2') format('woff2');
+  src: url('typo/Karrik-Regular.woff2') format('woff2');
   font-style: normal;
 }
 
 @font-face {
   font-family: 'velvelyne';
-  src: url('./assets/typo/Velvelyne-Book.ttf') format('truetype');
+  src: url('typo/Velvelyne-Book.ttf') format('truetype');
   font-weight: normal;
 }
 
 @font-face {
   font-family: 'avara';
-  src: url('./assets/typo/Avara-Black.woff2') format('woff2');
+  src: url('typo/Avara-Black.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'pressStart';
-  src: url('./assets/typo/PressStart2P-Regular.ttf');
+  src: url('typo/PressStart2P-Regular.ttf');
 }
 
 @font-face {
   font-family: 'velvelyne';
-  src:url('./assets/typo/Velvelyne-Bold.ttf') format('truetype');
+  src:url('typo/Velvelyne-Bold.ttf') format('truetype');
   font-weight: bold;
 }