update frontend

src/styles/filters.css

@@ -16,17 +16,35 @@
 .sw-icon-active .sw-icon-label { color:#bfdbfe; font-weight:600; }
 
 .sw-bottom-row {
-  display:flex; gap:.35rem; padding:.2rem .6rem;
+  display:flex;
-  background: rgba(15, 23, 42, 0.94);
+  gap:.35rem;
+  padding:.2rem .6rem;
+  background: transparent;          /* ✅ dock transparent, comme demandé */
   border-radius: 999px;
-  box-shadow: 0 4px 16px rgba(0,0,0,.85);
+  box-shadow: none;
 }
-.sw-bottom-item { border:none; background:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.12rem; min-width:54px; }
+
+.sw-bottom-item {
+  border:none;
+  background:none;
+  padding:0;
+  cursor:pointer;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:.12rem;
+  min-width:54px;
+}
+
 .sw-bottom-circle {
-  width:40px; height:40px; border-radius:50%;
+  width:40px;
+  height:40px;
+  border-radius:50%;
   background: rgba(15, 23, 42, 0.86);
   border: 1.5px solid rgba(148, 163, 184, 0.6);
-  display:flex; align-items:center; justify-content:center;
+  display:flex;
+  align-items:center;
+  justify-content:center;
   font-size:.78rem;
   box-shadow:0 3px 10px rgba(0,0,0,.75);
 }
@@ -37,9 +55,22 @@
   line-height: 1;
 }
 /* SW_SUBCAT_ICON_CSS:END */
-.sw-bottom-label { font-size:.65rem; color:#e5e7eb; text-shadow:0 1px 2px rgba(0,0,0,.9); }
+
-.sw-bottom-active .sw-bottom-circle { background: rgba(37, 99, 235, 0.82); border-color:#60a5fa; }
+.sw-bottom-label {
-.sw-bottom-active .sw-bottom-label { color:#bfdbfe; font-weight:600; }
+  font-size:.65rem;
+  color:#e5e7eb;
+  text-shadow:0 1px 2px rgba(0,0,0,.9);
+}
+
+.sw-bottom-active .sw-bottom-circle {
+  background: rgba(37, 99, 235, 0.82);
+  border-color:#60a5fa;
+}
+
+.sw-bottom-active .sw-bottom-label {
+  color:#bfdbfe;
+  font-weight:600;
+}
 
 /* Floating subcategory dock (always above Sociowall, not coverable) */
 .sw-subcats-float{
@@ -62,12 +93,12 @@
 
 /* SW_FILTER_ICON_VISIBILITY:BEGIN */
 
-/* Make subcategory icons inherit color (so they show) */
+/* Make subcategory icons inherit color (so they show, same logique que catégories) */
 .sw-bottom-item{ color:#e5e7eb; }
 .sw-bottom-circle{ color:#e5e7eb; }
 .sw-bottom-circle i{
   color: currentColor;
-  font-size: 20px;           /* closer to right-side icons feel */
+  font-size: 20px;
   line-height: 1;
   opacity: .96;
   filter: drop-shadow(0 1px 2px rgba(0,0,0,.65));
@@ -84,20 +115,22 @@
   font-weight:700;
 }
 
-/* ---------- LIGHT THEME FIXES (readable) ---------- */
+/* ---------- LIGHT THEME FIXES (readable + aligné avec catégories) ---------- */
 body[data-theme="light"] .sw-bottom-row{
-  background: rgba(255,255,255,0.95);
+  background: transparent;                    /* ✅ dock transparent aussi en clair */
-  border: 1px solid rgba(148,163,184,0.85);
+  border: none;
-  box-shadow: 0 6px 18px rgba(0,0,0,.12);
+  box-shadow: none;
 }
 
 body[data-theme="light"] .sw-bottom-item{ color:#0B1220; }
+
 body[data-theme="light"] .sw-bottom-circle{
   background: rgba(255,255,255,0.92);
   border-color: rgba(148,163,184,0.85);
   box-shadow: 0 3px 10px rgba(0,0,0,.10);
   color:#0B1220;
 }
+
 body[data-theme="light"] .sw-bottom-label{
   color:#0B1220;
   text-shadow:none;
@@ -109,12 +142,13 @@ body[data-theme="light"] .sw-bottom-active .sw-bottom-circle{
   color:#ffffff;
   box-shadow:0 0 14px rgba(30,107,255,.35);
 }
+
 body[data-theme="light"] .sw-bottom-active .sw-bottom-label{
   color:#0B1220;
   font-weight:800;
 }
 
-/* Also fix right-side category buttons in light theme */
+/* Also fix right-side category buttons in light theme (même couleurs) */
 body[data-theme="light"] .sw-icon-btn{ color:#0B1220; }
 body[data-theme="light"] .sw-icon-circle{
   background: rgba(255,255,255,0.92);
@@ -136,4 +170,3 @@ body[data-theme="light"] .sw-icon-active .sw-icon-label{
 }
 
 /* SW_FILTER_ICON_VISIBILITY:END */
-