create dropdown

assets/css/components/_buttons.scss

@@ -32,31 +32,61 @@ button:disabled{
 
 
 .btn--small{
-    display: block;
     height: calc(var(--h-block)*0.75);
-    border: var(--border);
+    border: var(--border-light);
     border-radius: var(--radius-btn);
     font-size: var(--fs-small);
     line-height: 1;
     overflow: hidden;
     white-space: nowrap;
+ 
+
     a{
         display: flex;
         align-items: center;
         justify-content: center;
+        gap: 1ch;
         width: 100%;
         height: 100%;
         padding: 0 1ch;
         padding-top: 2px;
     }
+
+    .icon{
+        --size:  10px;
+        height: var(--size);
+        width: var(--size);
+        position: relative;
+        top: -8px;
+        svg{
+            width: 100%;
+            fill: var(--color-txt);
+        }
+    }
+
     &.no-link{
         display: flex;
         align-items: center;
         justify-content: center;
+        gap: 1ch;
         padding: 0 1ch;
         padding-top: 2px;
 
     }
+    &:hover{
+        color: currentColor;
+        border-color: currentColor;
+        background-color: var(--grey-800);
+
+    }
+}
+
+.btn--small.is-selected{
+    background-color: var(--color-txt);
+    border-color: var(--color-txt);
+    color: var(--color-bg);
+    a{ color: var(--color-bg); }
+    svg{ fill: var(--color-bg); }
 }
  
 .btn--bold, 

assets/css/components/_dropdown.scss

@@ -0,0 +1,84 @@
+.dropdown {
+    position: relative;
+    display: inline-block;
+
+    &__trigger {
+        cursor: pointer;
+    }
+
+    &__content {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        min-width: 180px;
+        margin-top: 4px;
+        background-color: var(--color-bg);
+        border: var(--border);
+        border-radius: var(--radius-btn);
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-4px);
+        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+        z-index: 100;
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: var(--padding-inner);
+        }
+
+        li {
+            // border-bottom: var(--border-light);
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+
+        a, button {
+            display: block;
+            width: 100%;
+            padding: 0.75em 1ch;
+            font-size: var(--fs-small);
+            text-align: left;
+            text-decoration: none;
+            color: var(--color-txt);
+            background: none;
+            border: none;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--grey-800);
+            }
+        }
+    }
+
+    // Positionnement par défaut : sous le bouton, aligné à gauche
+    // Variante : aligné à droite
+    &--align-right .dropdown__content {
+        left: auto;
+        right: 0;
+    }
+
+    // Variante : dropdown à droite du bouton
+    &--position-right .dropdown__content {
+        top: 0;
+        left: 100%;
+        margin-top: 0;
+        margin-left: 4px;
+    }
+
+    &.is-open {
+        .dropdown__content {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+        }
+    }
+
+    &--position-right.is-open {
+        .dropdown__content {
+            transform: translateX(0);
+        }
+    }
+}

assets/css/components/_sort.scss

@@ -1,8 +1,5 @@
-.sort{
+button.sort{
 
-    display: flex;
-    align-items: center;
-    gap: 1ch;
 
     .arrow{
         line-height: 0;
@@ -23,17 +20,6 @@
         
     }
 
-    .icon{
-        --size:  10px;
-        height: var(--size);
-        width: var(--size);
-        position: relative;
-        top: -8px;
-        svg{
-            width: 100%;
-            fill: var(--color-txt);
-        }
-    }
 
 
     &[data-sort-type="up"]{
@@ -42,20 +28,4 @@
         }
     }
 
-
-
-
-
-        &:hover{
-                color: var(--grey-100);
-                svg{
-                    fill: var(--grey-100);
-                }
-            }
-        
-    
-    
-
-
-
 }

assets/css/style.css

@@ -294,9 +294,8 @@ button:disabled {
 }
 
 .btn--small {
-  display: block;
   height: calc(var(--h-block) * 0.75);
-  border: var(--border);
+  border: var(--border-light);
   border-radius: var(--radius-btn);
   font-size: var(--fs-small);
   line-height: 1;
@@ -307,18 +306,48 @@ button:disabled {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1ch;
   width: 100%;
   height: 100%;
   padding: 0 1ch;
   padding-top: 2px;
 }
+.btn--small .icon {
+  --size: 10px;
+  height: var(--size);
+  width: var(--size);
+  position: relative;
+  top: -8px;
+}
+.btn--small .icon svg {
+  width: 100%;
+  fill: var(--color-txt);
+}
 .btn--small.no-link {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1ch;
   padding: 0 1ch;
   padding-top: 2px;
 }
+.btn--small:hover {
+  color: currentColor;
+  border-color: currentColor;
+  background-color: var(--grey-800);
+}
+
+.btn--small.is-selected {
+  background-color: var(--color-txt);
+  border-color: var(--color-txt);
+  color: var(--color-bg);
+}
+.btn--small.is-selected a {
+  color: var(--color-bg);
+}
+.btn--small.is-selected svg {
+  fill: var(--color-bg);
+}
 
 .btn--bold,
 .btn--bold-inline {
@@ -504,12 +533,7 @@ button:disabled {
   padding-right: 0.25ch;
 }
 
-.sort {
+button.sort .arrow {
-  display: flex;
-  align-items: center;
-  gap: 1ch;
-}
-.sort .arrow {
   line-height: 0;
   --size: 12px;
   height: var(--size);
@@ -522,30 +546,13 @@ button:disabled {
   transform: rotate(90deg);
   transition: transform 0.2s ease-in;
 }
-.sort .arrow svg {
+button.sort .arrow svg {
   width: 100%;
   fill: var(--color-txt);
 }
-.sort .icon {
+button.sort[data-sort-type=up] .arrow {
-  --size: 10px;
-  height: var(--size);
-  width: var(--size);
-  position: relative;
-  top: -8px;
-}
-.sort .icon svg {
-  width: 100%;
-  fill: var(--color-txt);
-}
-.sort[data-sort-type=up] .arrow {
   transform: rotate(-90deg);
 }
-.sort:hover {
-  color: var(--grey-100);
-}
-.sort:hover svg {
-  fill: var(--grey-100);
-}
 
 #hero {
   width: calc(100vw - var(--padding-body) * 2);
@@ -998,6 +1005,70 @@ button:disabled {
   pointer-events: auto;
 }
 
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+.dropdown__trigger {
+  cursor: pointer;
+}
+.dropdown__content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 180px;
+  margin-top: 4px;
+  background-color: var(--color-bg);
+  border: var(--border);
+  border-radius: var(--radius-btn);
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
+  z-index: 100;
+}
+.dropdown__content ul {
+  list-style: none;
+  margin: 0;
+  padding: var(--padding-inner);
+}
+.dropdown__content li:last-child {
+  border-bottom: none;
+}
+.dropdown__content a, .dropdown__content button {
+  display: block;
+  width: 100%;
+  padding: 0.75em 1ch;
+  font-size: var(--fs-small);
+  text-align: left;
+  text-decoration: none;
+  color: var(--color-txt);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.dropdown__content a:hover, .dropdown__content button:hover {
+  background-color: var(--grey-800);
+}
+.dropdown--align-right .dropdown__content {
+  left: auto;
+  right: 0;
+}
+.dropdown--position-right .dropdown__content {
+  top: 0;
+  left: 100%;
+  margin-top: 0;
+  margin-left: 4px;
+}
+.dropdown.is-open .dropdown__content {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.dropdown--position-right.is-open .dropdown__content {
+  transform: translateX(0);
+}
+
 .page__title {
   font-size: var(--fs-big);
   font-weight: normal;

assets/css/style.scss

@@ -19,6 +19,7 @@
 @import "components/search-form";
 @import "components/list-socials";
 @import "components/modal-share";
+@import "components/dropdown";
 @import "components/text";
 @import "components/card-article";
 @import "components/card-article-small";

assets/js/dropdown.js

@@ -0,0 +1,43 @@
+export function initDropdowns() {
+  const dropdowns = document.querySelectorAll('.dropdown');
+
+  dropdowns.forEach(dropdown => {
+    const trigger = dropdown.querySelector('.dropdown__trigger');
+
+    if (!trigger) return;
+
+    trigger.addEventListener('click', (e) => {
+      e.stopPropagation();
+
+      // Ferme les autres dropdowns ouverts
+      dropdowns.forEach(other => {
+        if (other !== dropdown) {
+          other.classList.remove('is-open');
+          other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+        }
+      });
+
+      // Toggle le dropdown actuel
+      dropdown.classList.toggle('is-open');
+      trigger.classList.toggle('is-selected');
+    });
+  });
+
+  // Ferme tous les dropdowns au clic extérieur
+  document.addEventListener('click', () => {
+    dropdowns.forEach(dropdown => {
+      dropdown.classList.remove('is-open');
+      dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+    });
+  });
+
+  // Ferme au press Escape
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      dropdowns.forEach(dropdown => {
+        dropdown.classList.remove('is-open');
+        dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+      });
+    }
+  });
+}

assets/js/script.js

@@ -5,6 +5,7 @@ import { bannerStickyDesktop } from './banner-sticky-desktop.js';
 import { themeToggle } from './themeToggle.js';
 import { initHeroSlider } from './hero-slider.js';
 import { playVideo } from './hero-video.js';
+import { initDropdowns } from './dropdown.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -19,4 +20,5 @@ window.onload = async function () {
   bannerStickyDesktop(responsiveSmall);
   initHeroSlider();
   playVideo();
+  initDropdowns();
 }

site/templates/investigations.php

@@ -8,12 +8,20 @@
 </p>
 </div>
 
-<?php snippet('search-form') ?>
-
 <div class="page__sort">
-    <button class="sort btn--small btn--light no-link"  data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
+    <button class="sort btn--small no-link"  data-sort-type="down"><p>Trier par date</p> <span class="arrow"><?= svg('assets/icons/arrow-left.svg') ?></span></button>
-    <button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieu</p></button>
+    <div class="dropdown" id="sort-by-place">
-    <button class="sort btn--small btn--light no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Mots-clés</p></button>
+        <button class="dropdown__trigger sort btn--small no-link"><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Lieux</p></button>
+        <div class="dropdown__content">
+            <ul>
+                <li><button type="button" data-filter="france">France</button></li>
+                <li><button type="button" data-filter="cisjordanie">Cisjordanie</button></li>
+                <li><button type="button" data-filter="etats-unis">États-Unis</button></li>
+                <li><button type="button" data-filter="gaza">Gaza</button></li>
+            </ul>
+        </div>
+    </div>
+    <button class="sort btn--small no-link" ><span class="icon"><?= svg('assets/icons/filter.svg') ?></span><p>Mots-clés</p></button>
 </div>
 
 <section id="container-cards">