diff --git a/src/agenda_culturel/static/style.scss b/src/agenda_culturel/static/style.scss
index f5ab949..ed6e17b 100644
--- a/src/agenda_culturel/static/style.scss
+++ b/src/agenda_culturel/static/style.scss
@@ -8,6 +8,7 @@ $primary-700: #008080;*/
 $primary-500: #008989;
 $primary-600: #008080;
 $primary-700: #006c6c;
+$enable-responsive-typography: true;
 
 // Import Pico
 @import "./pico/pico";
@@ -228,4 +229,13 @@ article.day>ul {
 .day.past:hover,
 .day.other_month:hover {
     opacity: 1;
+}
+
+@media only screen and (prefers-color-scheme: light) {
+    [data-theme="light"],
+    :root:not([data-theme="dark"]) {
+        .filter summary:after {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{to-rgb($black)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+        }   
+    }
 }
\ No newline at end of file
diff --git a/src/agenda_culturel/templates/agenda_culturel/filter-inc.html b/src/agenda_culturel/templates/agenda_culturel/filter-inc.html
index 1f0b824..f5c22dc 100644
--- a/src/agenda_culturel/templates/agenda_culturel/filter-inc.html
+++ b/src/agenda_culturel/templates/agenda_culturel/filter-inc.html
@@ -1,7 +1,7 @@
 {% load cat_extra %}
 {% load tag_extra %}
 
-<article>
+<article class="filter">
     <details>
 <summary role="button" class="contrast outline">
     {% if filter.is_active %}