corrections

app/assets/scss/component/_header_nav.scss

@@ -206,9 +206,9 @@
 
             list-style: none;
 
-            @media (min-width: 742px) and (max-width: 795px) {
+            @media (min-width: 728px) and (max-width: 795px) {
                 .decalage_gauche {
-                    margin-left: -23px;
+                    margin-left: -73px;
                 }
             }
 
@@ -451,6 +451,7 @@
 
 
             &.is-open {
+                border-bottom: none !important;
                 .header_drawer_sub_menu {
                     display: block;
                     visibility: visible;

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%;

app/components/concert/ConcertCardList.vue

@@ -135,6 +135,7 @@
     //règle spécifique après la règle générale
     .concert-card-list.concert-card-list--highlight-first > .concert-card:first-child {
       flex: 2 1 480px;
+      min-width: 500px;
     }
   }
 

app/components/header/HeaderDefault.vue

@@ -40,9 +40,9 @@
     margin-left: -11px;
   }
   .img_ticket_mob {
-    max-height: 37px;
-    margin-top: 9px;
-    margin-left: -11px;
+    max-height: 31px;
+    margin-top: 10px;
+    // margin-left: -11px;
   }
 
 

app/components/header/HeaderNav.vue

@@ -68,9 +68,9 @@
             </ul>
           </li>
 
-          <li class="header_nav_item decalage_gauche" :class="{ 'is-active': isMecenat }">
+          <li class="header_nav_item" :class="{ 'is-active': isMecenat }">
             Mécénat
-            <ul class="header_nav_sub_menu">
+            <ul class="header_nav_sub_menu decalage_gauche">
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/projets">Les projets</NuxtLink></li>