corrections

app/components/HorizontalCards.vue

@@ -16,12 +16,24 @@
       </div>
 
       <!-- Hint icon (micro affordance) -->
-      <div v-if="showHint" class="hc__hint" aria-hidden="true">
+      <button
+        v-if="showHint"
+        type="button"
+        class="hc__hint"
+        aria-label="Défiler vers la droite"
+        @click="scrollByHint(1)"
+      >
         <span class="hc__hint-icon">{{ hintIcon }}</span>
-      </div>
-      <div v-if="showHint" class="hc__hint--left" aria-hidden="true">
+      </button>
+      <button
+        v-if="showHint"
+        type="button"
+        class="hc__hint--left"
+        aria-label="Défiler vers la gauche"
+        @click="scrollByHint(-1)"
+      >
         <span class="hc__hint-icon">{{ hintIcon }}</span>
-      </div>
+      </button>
 
       <!-- Scroller -->
       <div
@@ -103,6 +115,14 @@
       t = setTimeout(() => {}, 80)
     }
 
+    const scrollByHint = (direction) => {
+      const el = scroller.value
+      if (!el) return
+
+      const distance = Math.max(140, Math.round(el.clientWidth * 0.8))
+      el.scrollBy({ left: distance * direction, behavior: 'smooth' })
+    }
+
     onMounted(() => {
       const el = scroller.value
       if (!el) return
@@ -187,7 +207,11 @@
 
     /* Hint icon */
     .hc__hint {
-      pointer-events: none;
+      pointer-events: auto;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+      appearance: none;
       position: absolute;
       right: 10px;
       top: 50%;
@@ -204,7 +228,11 @@
       z-index: 2;
     }
     .hc__hint--left {
-      pointer-events: none;
+      pointer-events: auto;
+      border: 0;
+      padding: 0;
+      cursor: pointer;
+      appearance: none;
       position: absolute;
       left: 10px;
       top: 50%;
@@ -300,4 +328,4 @@
         opacity: 0.55;
       }
     }
-</style>
+</style>