style up

styles/main.scss

@@ -29,7 +29,8 @@ html {
 }
 
 body {
-  height: 100%;
+  height: 100vh;
+  overflow: auto;
   width: 100%;
   background: var(--background-color);
   padding: 0;
@@ -103,6 +104,7 @@ table {
 
 h2 {
   font-weight: normal;
+  font-size: 1.25rem;
 }
 
 #overpass-api-controls {
@@ -252,7 +254,7 @@ a {
 }
 
 .popup-key {
-  width: 50%;
+  width: 57%;
   display: inline-block;
 }
 
@@ -370,8 +372,8 @@ button {
 }
 
 .icon-img {
-  width: 3rem;
-  height: 3rem;
+  width: 2rem;
+  height: 2rem;
   fill: #000;
 }
 
@@ -445,6 +447,7 @@ button+button {
 
 #round_power_legend {
   font-size: 0.8rem;
+  margin-top: 4rem;
 }
 
 .side-panel {
@@ -461,7 +464,7 @@ button+button {
   padding-bottom: 15rem;
   z-index: 1000;
   visibility: hidden;
-  top: 5.7rem;
+  top: 4.5rem;
   width: 26vw;
 }
 
@@ -491,8 +494,10 @@ header {
 
   #map {
     margin-left: 28.8vw;
-    top: 5.55rem;
+    top: 4.5rem;
     width: 71.2vw;
+    border: 0;
+    height: 92.9vh;
   }
 }
 
@@ -521,8 +526,9 @@ header {
   width: 20vw;
 
   h1 {
-    width: 100vw;
-    line-height: 3rem;
+    color: white;
+    line-height: 2rem;
+    font-size: 0.8rem;
   }
 
   img {
@@ -577,7 +583,7 @@ header {
 }
 
 .filters-box {
-  position: absolute;
+  position: fixed;
   bottom: 0.7rem;
   right: 25vw;
   z-index: 100;
@@ -617,7 +623,7 @@ header {
 }
 
 .leaflet-popup-content {
-  max-height: 400px;
+  max-height: 30vh;
   overflow: auto;
 }
 
@@ -732,6 +738,7 @@ header {
 
 #searchResults {
   width: 100%;
+  border-color: var(--button-border);
 }
 
 .search-source-control {
@@ -769,16 +776,35 @@ overrides leaflet
   margin-left: 2rem;
 }
 
-/* Style pour mobile */
+.close-results-button {
+  border: 0;
+  border-radius: 3px;
+}
+
+/* Style pour mobile ---------------------------------- */
 @media (max-width: 1200px) {
   header h1 {
     width: 100vw;
     font-size: 1.5rem;
   }
 
+  #bars_power {
+    position: fixed;
+    bottom: -16px;
+    width: 123vw;
+  }
+
   #toggleSidePanel {
-    right: 1rem;
-    top: 1.3rem;
+    position: fixed;
+    top: 0.6rem;
+    right: 0.6rem;
+    z-index: 10;
+    background: #a9a9a9;
+    padding: 0.2rem 1rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
+    border: 0;
+    font-size: 2rem;
   }
 
   body {
@@ -811,6 +837,21 @@ overrides leaflet
   header {
     position: static;
   }
+
+  .filters-box {
+    position: static;
+  }
+
+  .close-results-button {
+    border: 0;
+    border-radius: 3px;
+    background: var(--button-border);
+    margin: 0;
+    position: relative;
+    top: -4.9rem;
+    right: 1.4rem;
+    height: 2.6rem;
+  }
 }
 
 @keyframes rainbow-border {