From 2ef728a1ed2e828d7e4966fac38021f5d3703cee Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 21 Dec 2025 00:42:58 -0500
Subject: [PATCH] update frontend

---
 src/styles/filters.css | 50 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/styles/filters.css b/src/styles/filters.css
index d1d8728..e0407a9 100644
--- a/src/styles/filters.css
+++ b/src/styles/filters.css
@@ -19,7 +19,7 @@
   display:flex;
   gap:.35rem;
   padding:.2rem .6rem;
-  background: transparent;          /* ✅ dock transparent, comme demandé */
+  background: transparent;          /* dock transparent */
   border-radius: 999px;
   box-shadow: none;
 }
@@ -117,7 +117,7 @@
 
 /* ---------- LIGHT THEME FIXES (readable + aligné avec catégories) ---------- */
 body[data-theme="light"] .sw-bottom-row{
-  background: transparent;                    /* ✅ dock transparent aussi en clair */
+  background: transparent;
   border: none;
   box-shadow: none;
 }
@@ -170,3 +170,49 @@ body[data-theme="light"] .sw-icon-active .sw-icon-label{
 }
 
 /* SW_FILTER_ICON_VISIBILITY:END */
+
+/* ===== THEME PILLS D / B / L : blanc sur fond noir comme les catégories ===== */
+.sw-theme-toggle{
+  display:flex;
+  gap:.35rem;
+  align-items:center;
+}
+
+.sw-theme-pill{
+  width:28px;
+  height:28px;
+  border-radius:999px;
+  border:1.5px solid rgba(148,163,184,0.8);
+  background:rgba(15,23,42,0.96);   /* fond noir-ish */
+  color:#e5e7eb;                    /* lettre blanche */
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  font-size:.72rem;
+  font-weight:600;
+  box-shadow:0 3px 10px rgba(0,0,0,.8);
+  cursor:pointer;
+  transition: transform .22s ease, box-shadow .22s ease,
+              border-color .22s ease, background .22s ease, color .22s ease;
+}
+
+.sw-theme-pill-active{
+  background: rgba(37,99,235,0.94);
+  border-color:#60a5fa;
+  color:#f9fafb;
+  box-shadow:0 0 14px rgba(56,189,248,.9);
+}
+
+/* Version clair */
+body[data-theme="light"] .sw-theme-pill{
+  background:rgba(255,255,255,0.95);
+  color:#0B1220;
+  border-color:rgba(148,163,184,0.9);
+  box-shadow:0 3px 10px rgba(15,23,42,.18);
+}
+body[data-theme="light"] .sw-theme-pill-active{
+  background:rgba(30,107,255,0.95);
+  border-color:rgba(30,107,255,1);
+  color:#F9FAFB;
+  box-shadow:0 0 14px rgba(30,107,255,.55);
+}