fix CarouselClients wrap around and responsiveness

components/Common/Carousel/Clients.vue

@@ -15,7 +15,7 @@
       <v-row>
         <!-- Fléche de gauche -->
         <v-btn
-          v-if="mdAndUp"
+          v-if="lgAndUp"
           icon="fas fa-chevron-left"
           @click="goToPrevious"
         />
@@ -24,10 +24,11 @@
         <Carousel
           ref="carousel"
           class="elevation-4 mb-12"
-          :items-to-show="lgAndUp ? 4 : 1"
-          :items-to-scroll="lgAndUp ? 2 : 1"
+          :items-to-show="smAndUp ? 4 : 1"
+          :items-to-scroll="smAndUp ? 2 : 1"
+          :wrap-around="true"
         >
-          <Slide v-for="(item, index) in items" :key="index">
+          <Slide v-for="(item, index) in items" :key="item.src">
             <div>
               <v-img :src="item.src" :alt="item.alt" />
             </div>
@@ -36,7 +37,7 @@
 
         <!-- Fléche de droite -->
         <v-btn
-          v-if="mdAndUp"
+          v-if="lgAndUp"
           icon="fas fa-chevron-right"
           @click="goToNext"
         />
@@ -61,7 +62,7 @@ import { Carousel, Slide } from "vue3-carousel";
 import type { PropType } from "@vue/runtime-core";
 import { useDisplay } from "vuetify";
 
-const { mdAndUp, lgAndUp, mdAndDown } = useDisplay()
+const { smAndUp, mdAndUp, lgAndUp, mdAndDown } = useDisplay()
 
 const carousel: Ref<typeof Carousel | null> = ref(null);
 
@@ -126,6 +127,8 @@ h3 {
 }
 
 .carousel {
+  width: 960px;
+  height: 240px;
   background-color: var(--neutral-color);
   margin-top: 2rem;
   border-radius: 20px;