ajout de la grid mémoire, avec side bar et hover

style.css

@@ -1,6 +1,6 @@
   @font-face {
     font-family: police1;
-    src: url("fonts/Combinedd.otf");
+    src: url("./fonts/Combinedd.otf");
   }
 
   body {
@@ -89,7 +89,8 @@
     font-family: police1;
     font-size: 1rem;
   }
-  form input{
+
+  form input {
     position: relative;
     border-color: #c104fc;
     border-radius: 5px;
@@ -97,10 +98,10 @@
     margin: 1rem;
     padding: 0.5rem;
     width: auto;
-    overflow:visible;
+    overflow: visible;
   }
 
-  form select{
+  form select {
     position: relative;
     border-color: #c104fc;
     border-radius: 5px;
@@ -110,7 +111,11 @@
     background-color: white;
   }
 
-  #enter input{
+  select {
+    background: orange;
+  }
+
+  #enter input {
     font-family: police1;
     font-size: 1rem;
     font-weight: bold;
@@ -118,26 +123,31 @@
     border-radius: 16px;
   }
 
+  form .boutton {
+    position: inherit;
+    margin: 0;
+  }
+
   /* CONTENUS DE LA PAGE */
   #page_content {
     position: relative;
     top: 15vh;
-    max-width: 80ch;
+    max-width: 100ch;
     padding: 3em 1em;
     margin: auto;
     line-height: 1.75;
     font-size: 1.25em;
   }
 
+  input:active {
+    border-color: rgba(77, 168, 112, 1);
+
+  }
+
+
   /* GRILLE */
   .grid-section {
     position: relative;
-    /* display: block; */
-    /* position: fixed; */
-    /* margin: 30%; */
-  }
-
-  .grid-main {
     display: grid;
     /* margin-top:20vh; */
     margin-right: 1vw;
@@ -146,19 +156,96 @@
     grid-auto-rows: minmax(100px, auto);
   }
 
+  .grid-section {
+    top: 15vh;
+    padding: 1rem;
+    /* display: block; */
+  }
+
   .grid1 {
     grid-column: 1 / 5;
     grid-row: 1 / 12;
-    background-color: #c104fc;
   }
 
   .grid2 {
     grid-column: 5 / 5;
     grid-row: 1 / 12;
-    background-color: #4da870;
+    position: fixed;
+    right: 0;
+    margin: 1rem;
   }
 
-  form .boutton {
-    position: inherit;
+
+
+  ul,
+  li {
+    list-style-type: none;
     margin: 0;
+    padding: 0;
+  }
+
+  #mosaic ul {
+    -webkit-flex-direction: row;
+    flex-direction: row;
+  }
+
+  #mosaic li {
+    float: left;
+    overflow: hidden;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 33.333333333%;
+    position: relative;
+    overflow: hidden;
+    padding: 1rem;
+  }
+
+  #mosaic img {
+    max-width: 100%;
+  }
+
+  #mosaic span,
+  a {
+    text-decoration: none;
+    outline: none;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    color: inherit;
+    width: auto;
+  }
+
+  #mosaic li:hover {
+    color: #c104fc;
+    border-color: #c104fc;
+    border-style: solid;
+    border-radius: 16px;
+  }
+
+  #list ul {
+    flex-direction: column;
+    padding: 0 5rem 0 5rem;
+    width: 10vw;
+  }
+
+
+  #list a {
+    /* -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box; */
+    /* float: left; */
+    display: block;
+    width: fit-content;
+    padding: 0.3rem;
+    background-color: #c104fc;
+    color: white;
+    border-radius: 12px;
+    margin: 1rem;
+    outline: none;
+    text-decoration: none;
+    font-weight: bold;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  }
+
+  #list a:hover {
+    color: rgba(77, 168, 112, 1);
   }