add: message de bienvenue !!!

style/common.css

@@ -45,12 +45,14 @@
   height: 16.1px;
   width: auto;
   fill: currentColor;
+  pointer-events: none;
 }
 
 .iconBtnStyle:hover{
   color: var(--back-color);
   background-color: var(--main-color);
   border-color: var(--back-color);
+  animation: none;
 }
 
 .solidBox{
@@ -111,7 +113,7 @@
 }
 
 .floatingWindow{
-  position: fixed;
+  position: relative;
   z-index: 3333;
 
   width: auto;
@@ -131,7 +133,7 @@
   justify-content: flex-start;
   align-items: center;
 
-  .posterTitle{
+  .title{
     position: relative;
     top: 0;
     width: 100%;
@@ -150,8 +152,8 @@
     align-items: center;
     justify-content: space-between;
 
-    padding-left: 33px;
-    padding-right: 16.1px;
+    padding-left: 16.1px;
+    padding-right: 7.77px;
 
     box-sizing: border-box;
     cursor: move;
@@ -161,8 +163,13 @@
     }
 
     .iconBtnStyle{
-      width: 33px;
-      height: 33px;
+      width: 27px;
+      height: 27px;
+
+      .icon{
+        height: 13.12px;
+        width: auto;
+      }
     }
 
   }

style/default.css

@@ -26,7 +26,6 @@ p,h1,h2,h3,h4{
   pointer-events: none !important;
   padding: 0;
   margin: 0;
-  user-select: none;
 }
 
 ul,ol {
@@ -34,3 +33,7 @@ ul,ol {
   margin: 0;
   list-style-type: none;
 }
+
+dialog{
+  padding: 0;
+}

style/main.css

@@ -126,6 +126,77 @@ main{
         grid-template-columns: 2.5fr 2fr 1fr;
         grid-template-rows: 1fr 1.5fr;
 
+              aside{
+                grid-row: 2;
+                grid-column: 2;
+                align-self: end;
+                justify-self: end;
+                color: var(--main-color);
+
+                position: relative;
+
+                z-index: 33;
+
+                margin-bottom: 13.12px;
+                margin-right: 13.12px;
+
+                      #openMsg{
+                        width: 33px;
+                        height: 33px;
+                        animation: float 1.61s infinite;
+                        box-sizing: border-box;
+
+                        border-radius: 13.12px;
+                      }
+
+                      #openMsg:hover{
+                        animation: none;
+                      }
+
+                      #msgWindow{
+                        border-style: none;
+                        background-color: transparent;
+                        position: fixed;
+                        top: 117px;
+                        left: 33px;
+                        animation: none;
+                        z-index: 1312;
+                        margin: 0;
+
+                              .floatingWindow{
+                                width: 277px;
+                                height: auto;
+                                margin-top: 33px;
+
+                                text-transform: none;
+                                font-size: 15px;
+                                font-family: 'velvelyne';
+                                font-weight: bold;
+                                padding-bottom: 13.12px;
+                                border-width: 3.33px;
+                                border-style: double solid solid;
+
+                                      p{
+                                        padding: 7.77px;
+                                        padding-right: 16.1px;
+
+                                              strong{
+                                                font-family: 'karrik';
+                                                font-weight: normal;
+                                                text-transform: uppercase;
+                                                font-size: 16.1px;
+                                              }
+                                      }
+                              }
+                      }
+
+                      #msgWindow::backdrop{
+                        background-color: var(--back-color);
+                        opacity: .333;
+                      }
+
+              }
+
               #titleSection{
                 grid-column: 1;
                 grid-row: 1;
@@ -211,7 +282,7 @@ main{
                 grid-row: 2;
                 color: var(--back-color);
                 justify-self: end;
-                
+
                 display: flex;
                 flex-direction: row;
                 justify-content: center;
@@ -368,7 +439,7 @@ main{
                           justify-content: space-between;
                           align-items: center;
                           padding: 16.1px;
-                          
+
                         }
 
                         .solidBox:has(details[open]){
@@ -388,6 +459,10 @@ main{
                         .iconBtnStyle{
                           width: 33px;
                           height: 33px;
+
+                          .icon{
+                            transform: rotate(45deg);
+                          }
                         }
 
                         details{

style/responsive.css

@@ -40,6 +40,18 @@
       grid-template-columns: 2fr 2fr 1fr;
       grid-template-rows: 0.7fr 2fr;
 
+          aside{
+            grid-column: 3;
+            margin-bottom: 33px;
+            margin-right: 33px;
+
+            #msgWindow{
+              left: unset;
+              right: 16.1px;;
+              top: 161px;
+            }
+          }
+
           #titleSection{
             height: 110%;
                   h2{
@@ -135,7 +147,16 @@
 
   main{
     #homeContent{
+          aside{
+            margin-bottom: 77px;
+            margin-right: 77px;
 
+            #msgWindow{
+              left: unset;
+              right: 33px;
+              top: 33vh;
+            }
+          }
 
           #titleSection{
             width: 90%;