style: responsive

cartographie/css/style.css

@@ -310,7 +310,7 @@
     transition: 500ms;
 }
 
-#full-screen > img {
+#full-screen img {
     padding: 10px;
 }
 
@@ -355,6 +355,7 @@
     align-self: center;
     justify-self: start;
     margin-left: 4px;
+    margin-top: 2px;
 }
 
 #toggle-associe.filter-active {
@@ -435,12 +436,6 @@
 /* EOF TOGGLE */
 /* EOF TOGGLE */
 
-@media screen and (max-width: 991px) {
-    #container-filter {
-        display: none;
-    }
-}
-
 #container-filter-label-1 {
     grid-row: b / c;
     grid-column: b / c;
@@ -556,3 +551,76 @@ h5 {
 /* EOF FILTER */
 /* EOF FILTER */
 /* EOF FILTER */
+
+/* RESPONSIVE */
+/* RESPONSIVE */
+/* RESPONSIVE */
+
+@media screen and (max-width: 991px) {
+    #container-filter {
+        grid-template-columns: [a] 1fr [b] 1fr [c];
+        height: 580px;
+        grid-template-rows: [a] 1fr [b] 1fr [c] 1fr [d] 1fr [e];
+    }
+    .separator {
+        display: none;
+    }
+    #container-filter-domaine {
+        grid-column: a / c;
+        grid-row: a / b;
+    }
+    #container-filter-avancement {
+        grid-column: a / c;
+        grid-row: b / c;
+    }
+    #container-filter-label {
+        grid-column: a / c;
+        grid-row: c / d;
+    }
+    #container-filter-associe {
+        grid-column: a / c;
+        grid-row: d / e;
+    }
+}
+
+@media screen and (max-width: 767px) {
+    #container-filter {
+        padding: 20px 20px 20px 20px;
+        height: 780px;
+    }
+    #container-filter-domaine {
+        display: grid;
+        grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d];
+        grid-template-rows: [a] 80px [b] 1fr [c] 1fr [d];
+        align-items: center;
+        justify-items: center;
+    }
+    #domaine-button {
+        grid-row: a / b;
+        grid-column: a / d;
+    }
+    #lieux-de-plantation {
+        grid-row: b / c;
+        grid-column: a / b;
+    }
+    #exploitations-productrices-de-bois-pour-BBE {
+        grid-row: b / c;
+        grid-column: b / c;
+    }
+    #chaufferies-bois-clients {
+        grid-row: b / c;
+        grid-column: c / d;
+    }
+    #chaufferies-vente-de-chaleur {
+        grid-row: c / d;
+        grid-column: a / b;
+    }
+    #plateformes-logistiques {
+        grid-row: c / d;
+        grid-column: b / c;
+    }
+}
+
+/* EOF RESPONSIVE */
+/* EOF RESPONSIVE */
+/* EOF RESPONSIVE */