add filters for sockets

styles/filters.scss

@@ -0,0 +1,123 @@
+// Variables
+$primary-color: #28a745;
+$border-color: #6c757d;
+$hover-bg: #e9ecef;
+$text-color: #495057;
+$disabled-color: #adb5bd;
+
+// Mixins
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+}
+
+@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
+  transition: $property $duration $timing;
+}
+
+// Styles pour le groupe de filtres
+.filter-group {
+  margin: 15px 0;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  h3 {
+    margin-bottom: 10px;
+    color: $text-color;
+    font-size: 16px;
+  }
+
+  label {
+    @include flex-center;
+    padding: 8px 0;
+    cursor: pointer;
+    @include transition;
+    border-radius: 4px;
+    margin: 4px 0;
+
+    &:hover {
+      background: $hover-bg;
+    }
+  }
+
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  .checkbox-custom {
+    position: relative;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border: 2px solid $border-color;
+    border-radius: 4px;
+    margin-right: 10px;
+    @include transition;
+
+    label:hover & {
+      border-color: darken($border-color, 10%);
+    }
+  }
+
+  input[type="checkbox"]:checked + .checkbox-custom {
+    background: $primary-color;
+    border-color: $primary-color;
+    animation: checkboxPop 0.3s ease;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 6px;
+      top: 2px;
+      width: 5px;
+      height: 10px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+
+  hr {
+    margin: 15px 0;
+    border: 0;
+    height: 1px;
+    background: #dee2e6;
+  }
+
+  span {
+    font-size: 14px;
+    color: $text-color;
+    @include transition(color);
+  }
+
+  label:hover span {
+    color: darken($text-color, 10%);
+  }
+
+  input[type="checkbox"]:disabled {
+    + .checkbox-custom {
+      background: $hover-bg;
+      border-color: $disabled-color;
+      cursor: not-allowed;
+    }
+
+    + .checkbox-custom + span {
+      color: $disabled-color;
+      cursor: not-allowed;
+    }
+  }
+}
+
+// Animation
+@keyframes checkboxPop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+} 

styles/main.scss

@@ -400,46 +400,6 @@ button+button {
   margin-left: 1rem;
 }
 
-.filter-group button {
-  padding: 1rem 2rem;
-  border-radius: 0.25rem;
-
-  &:after {
-    position: relative;
-    float: right;
-    left: 1rem;
-    top: 1rem;
-    font-size: 0.9em;
-  }
-
-  &.filter-state-hide:after {
-    content: "cacher";
-    color: grey;
-  }
-
-  &.filter-state-show:after {
-    content: "montrer";
-    color: green;
-  }
-
-  &.filter-state-showOnly:after {
-    content: "montrer uniquement";
-    color: orange;
-  }
-
-  &.filter-state-hide {
-    background: #fff;
-  }
-
-  &.filter-state-show {
-    color: green;
-  }
-
-  &.filter-state-showOnly {
-    color: orange;
-  }
-}
-
 .leaflet-control-layers-toggle {
   background-size: contain;
 }