.is-active type media

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5435,6 +5435,13 @@ svg.ext {
     padding-bottom: 1rem;
   }
 }
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active {
+  background-color: rgb(9, 57, 139);
+  color: white;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active a {
+  color: white;
+}
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button {
   background-color: transparent;
   border: 1px solid black;
@@ -5466,7 +5473,7 @@ svg.ext {
   content: url("../images/pictos/videos.svg");
   padding-right: 0.5rem;
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-videos a:hover::before {
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-videos a:hover::before, .is-active .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-videos a::before {
   content: url("../images/pictos/videos-blanc.svg");
 }
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-podcasts a::before {
@@ -5504,6 +5511,27 @@ svg.ext {
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.button-publications---rapports a:hover::before {
   content: url("../images/pictos/ecrits-blanc.svg");
 }
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active.button-videos {
+  margin-top: 1rem;
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active.button-videos a::before, .is-active .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active.button-videos a::before {
+  content: url("../images/pictos/videos-blanc.svg");
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active.button-podcasts a::before {
+  content: url("../images/pictos/podcasts-blanc.svg");
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active.button-reportage-photos a::before {
+  content: url("../images/pictos/en-images-blanc.svg");
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active.button-livres a::before {
+  content: url("../images/pictos/ecrits-blanc.svg");
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active.button-articles a::before {
+  content: url("../images/pictos/ecrits-blanc.svg");
+}
+.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters .buttons-filtres-ressources button.is-active.button-publications---rapports a::before {
+  content: url("../images/pictos/ecrits-blanc.svg");
+}
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters form::before {
   content: "Filtrer par : ";
   padding-right: 1rem;

web/themes/custom/eql/eql.theme

@@ -277,6 +277,7 @@ function eql_preprocess_views_view_unformatted(array &$variables) {
 }
 
 
+
 function eql_preprocess_form(&$variables) {
   $terms = \Drupal::entityTypeManager()
     ->getStorage('taxonomy_term')
@@ -285,14 +286,19 @@ function eql_preprocess_form(&$variables) {
   $transliterator = \Drupal::service('transliteration');
   $media_links = [];
 
+  // Récupère la valeur actuelle du filtre dans l’URL
+  $request = \Drupal::request();
+  $active_tid = $request->query->get('field_type_de_media_target_id');
+
   foreach ($terms as $term) {
-    $slug = strtolower($transliterator->transliterate($term->name));
+    $slug = Html::cleanCssIdentifier(strtolower($transliterator->transliterate($term->name)));
     $slug = Html::cleanCssIdentifier($slug); // Nettoie pour CSS
 
     $media_links[] = [
       'tid' => $term->tid,
       'label' => $term->name,
       'slug' => $slug,
+      'active' => (string)$term->tid === $active_tid, // <-- True si c'est celui sélectionné
     ];
   }
 
@@ -305,6 +311,3 @@ function eql_preprocess_form(&$variables) {
 
 
 
-
-
-

web/themes/custom/eql/scss/pages/ressources.scss

@@ -158,6 +158,14 @@
                                                     padding-bottom: 1rem;
                                                 }
                                             }
+                                            button.is-active {
+                                                background-color: $blue-dark;
+                                                color: white;
+                                              
+                                                a {
+                                                  color: white;
+                                                }
+                                              }
                                             button{
                                                 background-color: transparent;
                                                 // border-radius: 30px;
@@ -170,6 +178,7 @@
                                                     background-color: $blue-dark;
                                                     color: white;
                                                 }
+                                           
                                                 a {
                                                     color: $blue-dark;
                                                     display: inline-flex;
@@ -190,9 +199,11 @@
                                                         content:url("../images/pictos/videos.svg");
                                                         padding-right: 0.5rem;
                                                         }
-                                                        &:hover::before{
+                                                        &:hover::before,
+                                                        .is-active &::before{
                                                             content:url("../images/pictos/videos-blanc.svg");
                                                         }
+                                                       
                                                     }
                                                 }
                                                 &.button-podcasts{
@@ -250,6 +261,55 @@
                                                         }
                                                     }
                                                 }
+
+
+                                            }
+                                            button.is-active{
+                                                &.button-videos{
+                                                    margin-top: 1rem;
+                                                    a {
+                                                         &::before,
+                                                        .is-active &::before{
+                                                            content:url("../images/pictos/videos-blanc.svg");
+                                                        }
+                                                       
+                                                    }
+                                                }
+                                                &.button-podcasts{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/podcasts-blanc.svg");
+                                                        }
+                                                    }
+                                                }
+                                                &.button-reportage-photos{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/en-images-blanc.svg");
+                                                        }
+                                                    }
+                                                }
+                                                &.button-livres{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/ecrits-blanc.svg");
+                                                        }
+                                                    }
+                                                }
+                                                &.button-articles{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/ecrits-blanc.svg");
+                                                        }
+                                                    }
+                                                }
+                                                &.button-publications---rapports{
+                                                    a {
+                                                        &::before{
+                                                            content:url("../images/pictos/ecrits-blanc.svg");
+                                                        }
+                                                    }
+                                                }
                                             }
                                         }
                                         form{

web/themes/custom/eql/templates/partials/form.html.twig

@@ -24,10 +24,10 @@
    <button class="button-publications-rapports" type="button" style=""><a href="https://stage.eql.figli.io/ressources?field_type_de_media_target_id=696&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine="> Publications/rapports</a></button>
 </div> #}
 
-<div class="buttons-filtres-ressources">
 
+<div class="buttons-filtres-ressources">
   {% for item in media_links %}
-    <button class="button-{{ item.slug }}" type="button">
+    <button class="button-{{ item.slug }}{% if item.active %} is-active{% endif %}" type="button">
       <a href="{{ path('<front>') ~ 'ressources?field_type_de_media_target_id=' ~ item.tid ~ '&field_type_de_ressource_target_id=All&field_mots_clefs_target_id=All&field_date_de_parution_value=&combine=' }}">
         {{ item.label }}
       </a>