Improve disabled button UX with custom message and no hover effect

- Disable hover animation on disabled add-to-cart button
- Display "Choisissez une option" message when button is disabled
- Add cursor: not-allowed and opacity styling for disabled state
- Format SCSS for better code consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/css/components/_btn--default.scss

@@ -1,79 +1,76 @@
-.btn__default{
+.btn__default {
+  --size: calc(var(--h-block) - 8px);
+  font-size: var(--fs-normal);
+  font-weight: var(--fw-normal);
+  height: var(--size);
+  padding-right: 1.5ch;
 
-    
-    --size: calc(var(--h-block) - 8px);
-    font-size: var(--fs-normal);
-    font-weight: var(--fw-normal);
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  gap: 0ch;
+  // padding-right: 0.5ch;
+  color: var(--color-accent);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+
+  cursor: pointer;
+
+  .icon,
+  .txt {
+    z-index: 10;
+  }
+
+  .icon {
+    width: var(--size);
     height: var(--size);
-    padding-right: 1.5ch;
-
-    position: relative;
-
-
     display: flex;
     align-items: center;
-    gap: 0ch;
-    // padding-right: 0.5ch;
+    justify-content: center;
+    color: var(--color-bg);
+    text-align: center;
+
+    svg {
+      fill: var(--color-bg);
+      width: 80%;
+    }
+  }
+
+  .txt {
+    font-family: var(--font-title);
     color: var(--color-accent);
-    font-weight: var(--fw-medium);
-    text-decoration: none;
+    font-size: var(--fs-normal);
+    font-weight: var(--fw-bold);
+    padding-left: 1ch;
+  }
 
-    cursor: pointer;
+  &::after {
+    content: "";
+    display: block;
+    background-color: var(--color-accent);
+    border-radius: calc(var(--size) / 2);
+    width: var(--size);
+    height: var(--size);
+    position: absolute;
+    left: 0;
+    z-index: 0;
+    transition: width 0.2s;
+  }
 
-
-    .icon, .txt{ z-index: 10; }
-
-    .icon{
-        width: var(--size);
-        height: var(--size);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--color-bg);
-        text-align: center;
-
-        svg{
-            fill: var(--color-bg);
-            width: 80%;
-        }
+  &:hover:not(:disabled) {
+    //
+    .txt {
+      color: var(--color-bg);
+      display: block;
     }
-
-    .txt{
-        font-family: var(--font-title);
-        color: var(--color-accent);
-        font-size: var(--fs-normal);
-        font-weight: var(--fw-bold);
-        padding-left: 1ch;
+    &::after {
+      width: 100%;
     }
+  }
 
-    &::after{
-        content: '';
-        display: block;
-        background-color: var(--color-accent);
-        border-radius: calc(var(--size)/2);
-        width: var(--size);
-        height: var(--size);
-        position: absolute; 
-        left: 0;
-        z-index: 0;
-        transition: width .2s
-    }
-
-    &:hover{
-        // 
-        .txt{
-            color: var(--color-bg);
-                        display: block;
-                    }
-        &::after{
-            width: 100%;
-        }
-    }
-
-    
-
-
-
-   
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 }
-

assets/css/style.css

@@ -125,7 +125,8 @@ main {
   text-decoration: none;
   cursor: pointer;
 }
-.btn__default .icon, .btn__default .txt {
+.btn__default .icon,
+.btn__default .txt {
   z-index: 10;
 }
 .btn__default .icon {
@@ -160,13 +161,17 @@ main {
   z-index: 0;
   transition: width 0.2s;
 }
-.btn__default:hover .txt {
+.btn__default:hover:not(:disabled) .txt {
   color: var(--color-bg);
   display: block;
 }
-.btn__default:hover::after {
+.btn__default:hover:not(:disabled)::after {
   width: 100%;
 }
+.btn__default:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
 
 #btn--don__mobile {
   width: 100%;