✨ Added visuals for charts (massive commit)

ProjetProgWeb/stylesheet.css

@@ -371,8 +371,8 @@ header {
 }
 
 #error {
+    display: none;
     opacity: 0;
-    display: flex;
     align-items: center;
     background-color: #FF6F6F;
     border: solid 3px #DE6161;
@@ -407,6 +407,8 @@ header {
     left: 25px;
     cursor: pointer;
     transition: background-color 200ms, transform 200ms;
+    opacity: 80%;
+    backdrop-filter: blur(2px);
 }
 
 #scrollToTop:hover {
@@ -420,19 +422,40 @@ header {
 }
 
 .loader {
+    position: fixed;
     display: none;
     width: 150px;
     height: 150px;
     align-self: center;
     justify-self: center;
-    position: absolute;
+    z-index: 30;
     top: 50%;
     transform: translateY(-50%);
 }
 
+.background-loading {
+    display: none;
+    position: absolute;
+    background: #fff5;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 20;
+    backdrop-filter: blur(0.75em);
+}
+
+@-moz-document url-prefix() {
+    .background-loading {
+        background: #fffA;
+    }
+}
+
 .loader svg {
+    position: fixed;
     width: 90%;
     fill: none;
+    z-index: 30;
 }
 
 .load {
@@ -516,6 +539,32 @@ header {
     cursor: pointer;
 }
 
+/*TODO Faire le visuel du site sur plus grand écrans que smmartphone*/
+
+#charts {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    padding: 15px;
+    gap: 10px;
+}
+
+.chart {
+    width: 100%;
+    border-radius: 25px;
+    padding: 15px;
+    box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 15px;
+}
+
+.highcharts-root {
+    width: 100%;
+}
+
+.highcharts-container {
+    margin: 0;
+    padding: 0;
+}
+
 /* Small  */
 @media (min-width: 576px) {