responsive style

styles/style.css

@@ -1,7 +1,26 @@
+:root {
+    --background-color: #222;
+    --text-color: #ddd;
+    --icon-background: white;
+    --icon-border: cornflowerblue;
+    --button-background: #497cd3;
+    --button-hover-background: #0d377b;
+    --button-border: #497cd3ff;
+    --link-color: #38f;
+    --popup-background: white;
+    --zoom-message-background: rgba(255, 255, 255, 0.9);
+    --zoom-message-border: #ff0000;
+    --color-indication-background: #c0b1b1;
+    --no-data-border: dodgerblue;
+    --no-data-link-color: dodgerblue;
+    --food-marker-color: #fff;
+}
+
 html, body {
     height: 100%;
     width: 100%;
-    background: #222;
+    background: var(--background-color);
+    box-sizing: border-box;
 }
 
 body {
@@ -31,7 +50,7 @@ p {
 
 #heading {
     background: #000;
-    color: #ddd;
+    color: var(--text-color);
     min-height: 5%;
     height: 4rem;
     width: 100%;
@@ -43,11 +62,12 @@ p {
     height: 0.25rem !important;
     display: inline-block;
     margin-right: 1rem;
-    background: white;
+    background: var(--icon-background);
     border-radius: 100%;
     padding: 0.25rem;
     margin-top: -0.5rem;
     float: left;
+    border-color: var(--icon-border);
 }
 
 .title {
@@ -86,16 +106,17 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
 .rounded-button,
 .navigation-link,
 .edit-button {
-    background: #497cd3;
+    background: var(--button-background);
     padding: 0.5em 1em;
     border-radius: 2em;
     color: white !important;
-    border: solid 1px #497cd3ff;
+    border: solid 1px var(--button-border);
     float: right;
 }
 
 .side-panel button {
-    min-width: 10em;
+    min-width: 15em;
+    margin-bottom: 0.5em;
 }
 
 .navigation-link {
@@ -114,7 +135,7 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
 
 button:hover,
 .edit-button:hover {
-    background: #0d377b;
+    background: var(--button-hover-background);
     border: solid 1px #08285c;
     cursor: pointer;
 }
@@ -139,12 +160,12 @@ button:hover,
 }
 
 a {
-    color: #38f;
+    color: var(--link-color);
 }
 
 .leaflet-control-custom {
     padding: 1rem;
-    background: white;
+    background: var(--popup-background);
 }
 
 #spinning_icon {
@@ -226,21 +247,21 @@ a {
 }
 
 .no-data {
-    border-left: 3px solid dodgerblue;
+    border-left: 3px solid var(--no-data-border);
     padding: 1em 2rem;
     min-height: 4rem;
 
 }
 
 .no-data a {
-    color: dodgerblue;
+    color: var(--no-data-link-color);
 }
 
 /**
 marqueurs
  */
 .marker-demo {
-    margin-right: 3rem;
+    margin-right: 1rem;
 }
 
 .map-marker-circle-demo {
@@ -252,7 +273,7 @@ marqueurs
 }
 
 .color-unknown {
-    background: #c0b1b1;
+    background: var(--color-indication-background);
 }
 
 
@@ -343,7 +364,6 @@ button {
 
 button + button{
     margin-left: 1rem;
-    
 }
 .filter-group button{
     padding: 1rem 2rem;
@@ -391,7 +411,7 @@ button + button{
     left: 0;
     top: 0;
     width: 20vw;
-    height: 100vh;
+    height: 74vh;
     background: white;
     box-shadow: -2px 0 5px rgba(0,0,0,0.2);
     overflow-y: auto;
@@ -431,13 +451,13 @@ header{
     bottom: 5rem;
     left: 50%;
     transform: translateX(-50%);
-    background: rgba(255,255,255,0.9);
+    background: var(--zoom-message-background);
     padding: 1rem 2rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
     text-align: center;
     z-index: 10;
-    border-left: 4px solid #ff0000;
+    border-left: 4px solid var(--zoom-message-border);
     animation: rainbow-border 4s linear infinite;
 }
 
@@ -452,6 +472,65 @@ header img{
     float: left;
     margin-right: 1rem;
 }
+
+
+#map {
+    z-index: 1;
+    top: 5.55rem;
+}
+.side-panel #map{
+    margin-left: 20vw;
+}
+
+
+.rounded-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.rounded-button:hover {
+    background-color: #0d377b;
+}
+/* Style pour mobile */
+@media (max-width: 1200px) {
+    body{
+        /* border: solid 3px blue; */
+    }
+    .side-panel {
+        margin: 0;
+        position: static;
+        width: 95%;
+        height: auto;
+        transform: none;
+        box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
+        margin-top: 20px;
+    }
+    
+    .side-panel.active {
+        transform: none;
+    }
+    .side-panel-open #map,
+    #map {
+        margin: 0;
+        left: 0;
+        top: 0;
+        width: 100vw;
+        height: 90vh;
+        height: 55vh;
+    }
+    header{
+        position: static;
+    }
+    #toggleSidePanel{
+        
+        right: 4.6rem;
+        top: 1.3rem;
+    }
+}
 @keyframes rainbow-border {
     0% { border-left-color: #ff0000; }
     17% { border-left-color: #ff8000; }
@@ -462,30 +541,10 @@ header img{
     100% { border-left-color: #ff0000; }
 }
 
-#map {
-    z-index: 1;
-    top: 5.55rem;
-}
-.side-panel #map{
-    margin-left: 20vw;
-}
-
-/* Style pour mobile */
-@media (max-width: 768px) {
-    .side-panel {
-        position: static;
-        width: 100%;
-        height: auto;
-        transform: none;
-        box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
-        margin-top: 20px;
-    }
-    
-    .side-panel.active {
-        transform: none;
-    }
-    
-    #map {
-        margin-right: 0;
-    }
+.search-input {
+    width: calc(100% - 40px);
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid var(--button-border);
+    border-radius: 5px;
 }