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);
-                }
-            }
-        
-    
-    
-
-
-
 }