🎨 responsive style

styles/style.css

@@ -16,13 +16,18 @@
     --food-marker-color: #fff;
 }
 
+* {
+    box-sizing: border-box;
+}
+
 html, body {
     height: 100%;
     width: 100%;
     background: var(--background-color);
-    box-sizing: border-box;
-}
 
+    padding: 0;
+    margin: 0;
+}
 body {
     padding: 0;
     margin: 0;
@@ -527,11 +532,57 @@ header img {
     background-color: #0d377b;
 }
 
+
+.search-input {
+    width: calc(100% - 2rem);
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid var(--button-border);
+    border-radius: 5px;
+}
+
+#count_features_fond {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 10;
+    background: white;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+#removeMarkers{
+    margin-right: 1rem;
+}
+.filters-box{
+    margin-top: 4rem;
+    height: 10rem;
+    width: auto;
+}
+.filters-box .rounded-button{
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+}
+#searchButton{
+    margin-right: 1rem;
+}
+/**
+overrides leaflet
+ */
+
+.leaflet-left .leaflet-control{
+    margin-left: 2rem;
+}
+
+
+
+
 /* Style pour mobile */
 @media (max-width: 1200px) {
 
     header h1{
         width: 100vw;
+        font-size: 1.5rem;
     }
     #toggleSidePanel{
         right: 1rem;
@@ -544,7 +595,7 @@ header img {
     .side-panel {
         margin: 0;
         position: static;
-        width: 95%;
+        width: 100vw;
         height: auto;
         transform: none;
         box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
@@ -593,48 +644,4 @@ header img {
     100% {
         border-left-color: #ff0000;
     }
-}
-
-.search-input {
-    width: calc(100% - 2rem);
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid var(--button-border);
-    border-radius: 5px;
-}
-
-#count_features_fond {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-    z-index: 10;
-    background: white;
-    padding: 1rem;
-    border-radius: 8px;
-}
-
-#removeMarkers{
-    margin-right: 1rem;
-}
-.filters-box{
-    margin-top: 4rem;
-    height: 10rem;
-    width: auto;
-}
-.filters-box .rounded-button{
-    margin-right: 1rem;
-    margin-bottom: 1rem;
-}
-#searchButton{
-    margin-right: 1rem;
-}
-/**
-overrides leaflet
- */
-
-/*.leaflet-control-layers .leaflet-control:nth-of-type(1) .leaflet-control-layers-toggle{*/
-/*    background-image: url('/styles/images/marker-icon.png');*/
-/*}*/
-.leaflet-left .leaflet-control{
-    margin-left: 2rem;
 }