From f663ff38f56d6b2eeaf58efc29ece5439204d625 Mon Sep 17 00:00:00 2001
From: Valentin Le Moign <valentin_le_moign@figureslibres.io>
Date: Thu, 10 Sep 2026 00:59:44 +0200
Subject: [PATCH] =?UTF-8?q?Dropdown=20axe=20th=C3=A9matique=20:=20surbrill?=
 =?UTF-8?q?ance=20de=20l'axe=20r=C3=A9ellement=20actif=20+=20hover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le premier item du popover était grisé en dur (`:first-of-type`), donc
affiché comme actif quel que soit l'axe courant. La classe `is-active`
est désormais posée en Twig sur l'axe actif (ou sur « Tous les axes »
hors mode taxonomie), et le style suit cette classe.

Ajout d'un hover en `background-image` (calque translucide) plutôt qu'en
`background-color`, pour un assombrissement identique sur les lignes
blanches et grises du zébrage.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WQLwtNFa1LNaN7QTAbYkZx
---
 css/style.css                            | 4 +++-
 scss/_filters.scss                       | 5 ++++-
 templates/partials/category-filters.twig | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index c8b63f2..cfa11d5 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1883,8 +1883,10 @@ footer {
             white-space: normal; }
             .category-filters .filter-dd .dd-content#filter-axe-popover ul li:nth-of-type(odd) {
               background-color: white; }
-            .category-filters .filter-dd .dd-content#filter-axe-popover ul li:first-of-type {
+            .category-filters .filter-dd .dd-content#filter-axe-popover ul li.is-active {
               background-color: #cccccc; }
+            .category-filters .filter-dd .dd-content#filter-axe-popover ul li:hover {
+              background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); }
             .category-filters .filter-dd .dd-content#filter-axe-popover ul li.dd-axe-group-label {
               font-size: 0.72rem;
               font-weight: 600;
diff --git a/scss/_filters.scss b/scss/_filters.scss
index e4b7b00..76c7eea 100644
--- a/scss/_filters.scss
+++ b/scss/_filters.scss
@@ -248,9 +248,12 @@
                         &:nth-of-type(odd) {
                             background-color: white;
                         }
-                        &:first-of-type {
+                        &.is-active {
                             background-color: $less-light-gray;
                         }
+                        &:hover {
+                            background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
+                        }
                         &.dd-axe-group-label {
                             font-size: 0.72rem;
                             font-weight: 600;
diff --git a/templates/partials/category-filters.twig b/templates/partials/category-filters.twig
index 701248b..6467a57 100644
--- a/templates/partials/category-filters.twig
+++ b/templates/partials/category-filters.twig
@@ -158,10 +158,10 @@
             <div class="dd-content" id="filter-axe-popover" style="display: none;">
                 <ul>
                     {% if not axe_taxonomy_mode %}
-                        <li data-axe-id="">{{ current_language == 'en' ? 'All axes' : 'Tous les axes' }}</li>
+                        <li data-axe-id=""{% if not active_axe %} class="is-active"{% endif %}>{{ current_language == 'en' ? 'All axes' : 'Tous les axes' }}</li>
                     {% endif %}
                     {% for axe in filter_axes %}
-                        <li data-axe-id="{{ axe.id }}"{% if not axe_stay_on_page %} data-axe-href="{{ axe.href }}"{% endif %}>{{ axe.name }}</li>
+                        <li data-axe-id="{{ axe.id }}"{% if not axe_stay_on_page %} data-axe-href="{{ axe.href }}"{% endif %}{% if active_axe and axe.id == active_axe %} class="is-active"{% endif %}>{{ axe.name }}</li>
                     {% endfor %}
                 </ul>
             </div>