style: update Navbar and Select component styles for improved consistency and usability

src/components/Navbar/_navbar.scss

@@ -29,22 +29,25 @@
   &__links {
     display: flex;
     align-items: center;
-    gap: var(--nds-spacing-2xs);
+    gap: var(--nds-spacing-xs);
     flex: 1;
-  }
+
-  &__link {
+    :global(.navbar__link) {
-    padding: var(--nds-spacing-2xs) var(--nds-spacing-sm);
+      padding: var(--nds-spacing-2xs) var(--nds-spacing-sm);
-    border-radius: var(--nds-radius-md);
+      border-radius: var(--nds-radius-md);
-    @include text-label;
+      @include text-label;
-    color: var(--nds-neutral);
-    text-decoration: none;
-    transition: all 120ms ease;
-    &:hover {
       color: var(--nds-text);
+      text-decoration: none !important;
+      transition: all 120ms ease;
+  
+    }
+    :global(.navbar__link:hover) {
       background-color: var(--nds-surface-hover);
     }
-    &--active {
+
-      color: var(--nds-text);
+    // On cible la variante active globale séparément
+    :global(.navbar__link--active) {
+      color: var(--nds-primary);
     }
   }
   &__right {

src/components/Select/_select.scss

@@ -1,71 +1,90 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
 .select {
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  width: 100%;
+  min-width: 200px;
 
   &__trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nds-spacing-xs) var(--nds-spacing-md);
-    background-color: var(--nds-neutral);
-    color: var(--nds-text);
-    border: none;
-    border-radius: var(--nds-radius-sm);
-    cursor: pointer;
-    width: 100%;
     gap: var(--nds-spacing-xs);
-
+    height: 38px;
+    padding: 0 var(--nds-spacing-sm);
+    background-color: var(--nds-surface);
+    border: var(--nds-border-width-thin) solid var(--nds-border-strong);
+    border-radius: var(--nds-radius-md);
+    cursor: pointer;
+    @include text-base;
+    color: var(--nds-text);
+    transition:
+      border-color 130ms ease,
+      box-shadow 130ms ease;
     &:hover {
-      background-color: color-mix(in srgb, var(--nds-neutral) 85%, var(--nds-text));
+      border-color: var(--nds-neutral);
+    }
+    &:focus-visible {
+      outline: none;
+      border-color: var(--nds-primary);
+      box-shadow: 0 0 0 3px var(--nds-ring);
+    }
+
+    svg {
+      color: var(--nds-neutral);
+      transition: transform 160ms ease;
+      flex-shrink: 0;
     }
   }
-
+  &__placeholder {
-  &__label {
+    color: var(--nds-neutral);
-    flex: 1;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
+  &[data-open="true"] &__trigger {
+    border-color: var(--nds-primary);
+  }
+  &[data-open="true"] &__trigger svg {
+    transform: rotate(180deg);
+  }
+
+  &__menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    right: 0;
+    z-index: 40;
+    background-color: var(--nds-surface);
+    border: var(--nds-border-width-thin) solid var(--nds-border);
+    border-radius: var(--nds-radius-md);
+    box-shadow: var(--nds-shadow-md);
+    padding: var(--nds-spacing-3xs);
+    max-height: 240px;
+    overflow-y: auto;
+    display: none;
+  }
   &__arrow {
-    flex-shrink: 0;
     display: flex;
     align-items: center;
-
+    justify-content: center;
     &--hidden {
       display: none;
     }
   }
-
+  &--disabled {
-  &__dropdown {
+    cursor: not-allowed;
-    position: absolute;
+    background-color: var(--nds-surface);
-    top: calc(100% + var(--nds-spacing-2xs));
+    color: var(--nds-neutral);
-    left: 0;
+    border-color: var(--nds-border-strong);
-    right: 0;
+    opacity: 0.55;
-    background-color: var(--nds-neutral);
+    & .select__trigger {
-    border-radius: var(--nds-radius-sm);
+      cursor: not-allowed;
-    list-style: none;
+      &:hover {
-    margin: 0;
+        border-color: var(--nds-border-strong);
-    padding: 0;
+      }
-    z-index: 100;
-    overflow: hidden;
-
-    &[hidden] {
-      display: none;
     }
   }
-
+  &[data-open="true"] &__menu {
-  &--disabled {
+    display: block;
-  opacity: 0.5;
-
-  .select__trigger {
-    background-color: var(--nds-disabled);
-    cursor: not-allowed;
   }
 }
-}

src/components/Select/_selectOption.scss

@@ -1,32 +1,28 @@
-@use '../../styles/tokens/typography' as *;
+@use "../../styles/tokens/typography" as *;
 
 .select-option {
-  padding: var(--nds-spacing-xs) var(--nds-spacing-md);
+  display: flex;
+  align-items: center;
+  gap: var(--nds-spacing-xs);
+  padding: var(--nds-spacing-xs) var(--nds-spacing-sm);
   cursor: pointer;
+  border-radius: var(--nds-radius-sm);
+  @include text-base;
   color: var(--nds-text);
-  background-color: var(--nds-neutral);
+  transition: background-color 110ms ease;
-  transition: background-color 0.15s ease;
 
-  &:hover:not(.select-option__disabled) {
+  &:hover {
-    background-color: var(--nds-secondary);
+    background-color: var(--nds-surface-hover);
   }
-
+  &[aria-selected="true"] {
-  &:active {
+    color: var(--nds-primary);
-    background-color: var(--nds-accent);
+    font-weight: 600;
   }
-
+  &__disabled {
-  &__selected {
+    color: var(--nds-disabled);
-    background-color: var(--nds-primary);
+    cursor: not-allowed;
-    color: var(--nds-text);
-
     &:hover {
-      background-color: color-mix(in srgb, var(--nds-primary) 85%, var(--nds-background));
+      background: transparent;
     }
   }
-
+}
-  &__disabled {
-    background-color: var(--nds-disabled);
-    color: color-mix(in srgb, var(--nds-text) 40%, transparent);
-    cursor: not-allowed;
-  }
-}