up bandeau latéral

styles/style.css

@@ -15,11 +15,11 @@ html, p {
 }
 
 p {
-    font-size: 1.25rem;
+    font-size: 1rem;
 }
 
 #map {
-    height: 80vh;
+    height: 95vh;
     width: 100%;
     margin: 0;
     border: solid 2px;
@@ -300,14 +300,11 @@ button {
 }
 
 .bar {
-    display: inline-block;
     height: 1em;
     text-align: right;
     padding: 0.55rem;
     padding-right: 0.25rem;
     float: left;
-    /*background: grey;*/
-    /*border-right: 1px solid white;*/
 }
 
 .key-values {
@@ -366,19 +363,78 @@ button {
     color: orange;
 }
 .filter-group button.filter-state-hide{
-    /*color: #670a0a;*/
     background: #fff;
 }
 .filter-group button.filter-state-show{
     color: green;
-    /*background: #96b1ea;*/
-
 }
 .filter-group button.filter-state-showOnly{
     color: orange;
-    /*background: #96b1ea;*/
 }
 
 .leaflet-control-layers-toggle{
     background-size:contain;
+}
+
+.side-panel {
+    font-size: 1rem;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 20vw;
+    height: 100vh;
+    background: white;
+    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
+    overflow-y: auto;
+    padding: 20px;
+    z-index: 1000;
+}
+#zoomMessage{
+    position: fixed;
+    bottom: 5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255,255,255,0.9);
+    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;
+    animation: rainbow-border 4s linear infinite;
+}
+
+@keyframes rainbow-border {
+    0% { border-left-color: #ff0000; }
+    17% { border-left-color: #ff8000; }
+    33% { border-left-color: #ffff00; }
+    50% { border-left-color: #00ff00; }
+    67% { border-left-color: #0000ff; }
+    83% { border-left-color: #8000ff; }
+    100% { border-left-color: #ff0000; }
+}
+
+#map {
+    z-index: 1;
+    margin-right: 300px; /* Pour laisser de la place au panneau */
+}
+
+/* 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;
+    }
 }