Merge branch 'feature/V8-5662-responsive-du-site-logiciel' into develop

app.vue

@@ -10,6 +10,10 @@
 
 <script setup lang="ts">
 
+import { useDisplay } from "vuetify";
+
+const { mdAndDown } = useDisplay()
+
 const layoutStore = useLayoutStore()
 
 layoutStore.resetAnchoredSections()

assets/style/main.scss

@@ -21,6 +21,10 @@ body {
   width: 90%;
   margin-right: auto;
   margin-left: auto;
+
+  @media (max-width: 600px) {
+    width: 96%;
+  }
 }
 .v-row.center-90 {
   margin: -12px auto;

components/About/FAQ.vue

@@ -2,23 +2,23 @@
   <AnchoredSection id="help">
     <LayoutContainer>
       <v-row no-gutters class="alt-theme">
-        <v-col cols="6">
+        <v-col cols="12" md="6">
            <v-img
              src="/images/help/Help.png"
              cover
            />
         </v-col>
 
-        <v-col cols="6">
-          <div class="ml-6">
-            <h4 class="ml-12">
+        <v-col cols="12" md="6">
+          <div>
+            <h4>
               Chez Opentalent, nous avons à coeur de répondre à vos interrogations
               et de vous apporter la solution faite pour vous.
             </h4>
 
             <v-btn
               to="/nous-contacter"
-              class="ml-12 mt-12"
+              class="mt-12"
             >
               Nous contacter
             </v-btn>
@@ -46,14 +46,18 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 }
 
 h4 {
-  margin-bottom: 2rem;
-  margin-top: 3rem;
   font-weight: 400;
   font-size: 2rem;
   line-height: 34px;
   width: 40rem;
-  margin-right: auto;
+  margin: 3rem auto 2rem 62px;
   color: var(--on-primary-color);
+
+  @media (max-width: 600px) {
+    width: 80%;
+    margin-left: 10%;
+    text-align: justify;
+  }
 }
 
 .v-btn {
@@ -64,6 +68,12 @@ h4 {
   color: var(--on-secondary-color);
   padding: 19px 28px;
   gap: 9px;
-  margin-left: 2rem;
+  margin-left: 84px;
+
+  @media (max-width: 600px) {
+    width: 80%;
+    margin-left: 10%;
+    margin-bottom: 48px;
+  }
 }
 </style>

components/About/Logiciels.vue

@@ -12,7 +12,7 @@
       </v-row>
 
       <v-row class="mb-12 center-90">
-        <v-col cols="3">
+        <v-col md="3">
           <p class="text-justify mr-4 ml-6 mb-6">
             Découvrez notre gamme de logiciels de gestion & de communication
             adapté au secteur culturel. <br />
@@ -34,7 +34,8 @@
         </v-col>
 
         <v-col
-          cols="3"
+          cols="12"
+          md="3"
           v-for="(item, index) in items"
           :key="index"
           :class="item.class"

components/About/Presentation.vue

@@ -2,13 +2,13 @@
   <AnchoredSection id="about">
     <LayoutContainer>
       <v-row class="mt-12 center-90">
-        <v-col cols="4">
+        <v-col md="4">
           <LayoutUISubTitle>
             Qui sommes-nous ?
           </LayoutUISubTitle>
         </v-col>
 
-        <v-col cols="8">
+        <v-col md="8">
           <div class="italic-title mr-8">
             “Imaginé par des musiciens pour des musiciens, Opentalent se veut être
             la référence pour la gestion et la promotion du spectacle vivant sur
@@ -18,11 +18,11 @@
       </v-row>
 
       <v-row class="history mb-12">
-        <v-col cols="6">
+        <v-col md="6">
           <v-img src="/images/about/passion.jpg" cover />
         </v-col>
 
-        <v-col cols="6">
+        <v-col md="6">
           <h3>
             Une histoire de passionnés
           </h3>
@@ -94,6 +94,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     width: 400px;
     height: 100%;
     border-radius: 20px;
+
+    @media (max-width: 600px) {
+      width: 90%;
+    }
   }
 
   h3 {
@@ -112,6 +116,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     margin-bottom: 3rem;
     width: 25rem;
     text-align: justify;
+
+    @media (max-width: 600px) {
+      width: 100%;
+    }
   }
 
   p {
@@ -121,6 +129,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     line-height: 20px;
     width: 30rem;
     margin-bottom: 2rem;
+
+    @media (max-width: 600px) {
+      width: 100%;
+    }
   }
 }
 

components/About/Valeurs.vue

@@ -8,7 +8,7 @@
       </v-row>
 
       <v-row class="mt-6 center-90 align-center mb-12">
-        <v-col cols="6">
+        <v-col md="6">
           <v-img
             src="/images/about/valeurs/valeur.png"
             cover
@@ -16,14 +16,15 @@
           />
         </v-col>
 
-        <v-col cols="6">
+        <v-col md="6">
           <div class="values">
             <v-row
               v-for="(row, rowIndex) in values"
               :key="rowIndex"
             >
               <v-col
-                cols="6"
+                cols="12"
+                md="6"
                 v-for="(value, valueIndex) in row"
                 :key="valueIndex"
               >
@@ -98,6 +99,11 @@ const values: Array<Array<SocietyValue>> = [
     width: 50px;
     height: 50px;
     margin-bottom: 1rem;
+
+    @media (max-width: 600px) {
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 
   h6 {

components/Common/ActionMenu.vue

@@ -159,7 +159,8 @@ const onActionClick = (action: ActionMenuItem) => {
   background-color: var(--neutral-color);
 
   .v-btn {
-    margin: 4px 6px;
+    margin: 6px 2%;
+    width: 46%;
   }
 }
 

components/Common/Avantages.vue

@@ -10,7 +10,7 @@
       </LayoutUITitle>
     </v-row>
 
-    <v-row class="center-90">
+    <v-row  class="center-90">
       <v-col
         cols="12"
         md="4"
@@ -28,6 +28,7 @@
 
 <script setup lang="ts">
 import type { Benefit } from "~/types/interface";
+import { useDisplay } from "vuetify";
 
 const props = defineProps({
   benefits: {

components/Common/Banner.vue

@@ -99,6 +99,10 @@ const props = defineProps({
   object-position: center var(--banner-center-image);
   transition: transform 0.2s;
   margin: 0 auto;
+
+  @media (max-width: 600px) {
+    min-height: 0;
+  }
 }
 
 .reverse {
@@ -118,12 +122,16 @@ const props = defineProps({
   width: 13rem;
   height: 10rem;
   background: var(--secondary-color);
+
+  @media (max-width: 600px) {
+    width: 50%;
+  }
 }
 
 .logo-square {
   position: absolute;
   bottom: 0;
-  right: 13rem;
+  right: 10rem;
   width: 13rem;
   height: 10rem;
 
@@ -132,6 +140,11 @@ const props = defineProps({
     height: 50%;
     margin-top: 2.5rem;
   }
+
+  @media (max-width: 600px) {
+    right: 50%;
+    width: 50%;
+  }
 }
 .logo-square:not(.alt-theme) {
   background: var(--primary-color);

components/Common/Card/Stat.vue

@@ -40,6 +40,10 @@ const props = defineProps({
     text-align: center;
     margin-bottom: 0.5rem;
   }
+
+  @media (max-width: 1240px) {
+    height: 12rem;
+  }
 }
 
 

components/Common/Carousel/Clients.vue

@@ -15,6 +15,7 @@
       <v-row>
         <!-- Fléche de gauche -->
         <v-btn
+          v-if="mdAndUp"
           icon="fas fa-chevron-left"
           @click="goToPrevious"
         />
@@ -23,8 +24,8 @@
         <Carousel
           ref="carousel"
           class="elevation-4 mb-12"
-          :items-to-show="4"
-          :items-to-scroll="2"
+          :items-to-show="lgAndUp ? 4 : 1"
+          :items-to-scroll="lgAndUp ? 2 : 1"
         >
           <Slide v-for="(item, index) in items" :key="index">
             <div>
@@ -34,6 +35,18 @@
         </Carousel>
 
         <!-- Fléche de droite -->
+        <v-btn
+          v-if="mdAndUp"
+          icon="fas fa-chevron-right"
+          @click="goToNext"
+        />
+      </v-row>
+
+      <v-row v-if="mdAndDown">
+        <v-btn
+          icon="fas fa-chevron-left"
+          @click="goToPrevious"
+        />
         <v-btn
           icon="fas fa-chevron-right"
           @click="goToNext"
@@ -46,6 +59,9 @@
 <script setup lang="ts">
 import { Carousel, Slide } from "vue3-carousel";
 import type { PropType } from "@vue/runtime-core";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp, lgAndUp, mdAndDown } = useDisplay()
 
 const carousel: Ref<typeof Carousel | null> = ref(null);
 
@@ -83,10 +99,14 @@ h3 {
   line-height: 42px;
   color: var(--on-primary-color);
   width: 50%;
+
+  @media (max-width: 1240px) {
+    width: 70%;
+  }
 }
 
 .alt-color {
-  color: var(--on-primary-color-alt);
+  color: var(--on-primary-color-alt) !important;
 }
 
 .v-btn {
@@ -112,6 +132,16 @@ h3 {
   margin-left: auto;
   margin-right: auto;
   box-shadow: var(--primary-color);
+
+  @media (max-width: 1240px) {
+    width: 50%;
+    min-width: 600px;
+  }
+
+  @media (max-width: 1240px) {
+    width: 90%;
+    min-width: 90%;
+  }
 }
 
 .v-img {

components/Common/ContainerVideo.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <div class="container-green">
+    <div v-if="mdAndUp" class="container-green">
       <v-row class="mt-12">
         <v-row>
           <v-col cols="6">
@@ -8,7 +8,7 @@
               {{ title }}
             </LayoutUISubTitle>
 
-            <p class="quote">
+            <p v-if="lgAndUp" class="quote">
               {{ quote }}
             </p>
           </v-col>
@@ -23,10 +23,19 @@
         </v-row>
       </v-row>
     </div>
+
+    <div v-else>
+
+    </div>
   </LayoutContainer>
 </template>
 
 <script setup lang="ts">
+
+import { useDisplay } from "vuetify";
+
+const { mdAndUp, lgAndUp } = useDisplay()
+
 const props = defineProps({
   title: {
     type: String,
@@ -66,6 +75,11 @@ const props = defineProps({
   background-position: center;
   width: 650px;
   height: 650px;
+
+  @media (max-width: 1240px) {
+    width: 400px;
+    height: 400px;
+  }
 }
 
 .quote {
@@ -87,5 +101,9 @@ const props = defineProps({
   background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
     rgba(7, 27, 31, 0.3);
   height: 40rem;
+
+  @media (max-width: 1240px) {
+    height: 400px;
+  }
 }
 </style>

components/Common/Presentation.vue

@@ -7,7 +7,7 @@ Section "Présentation" d'une page Logiciel
       <v-row class="center-90">
 
         <!-- Colonne 1 (sous-titre, illustration logiciels, prix) -->
-        <v-col cols="5">
+        <v-col cols="12" lg="5">
           <LayoutUISubTitle class="ml-8" >
             {{ title }}
           </LayoutUISubTitle>
@@ -48,7 +48,7 @@ Section "Présentation" d'une page Logiciel
         </v-col>
 
         <!-- Colonne 2 (présentation, pictogrammes des fonctionnalités) -->
-        <v-col cols="6">
+        <v-col cols="12" lg="6">
           <h3>
             {{ section1title }}
           </h3>
@@ -66,7 +66,7 @@ Section "Présentation" d'une page Logiciel
             {{ section2title }}
           </h3>
 
-          <div class="d-flex flex-row">
+          <div class="picto-container">
             <div
               v-for="picto in pictos"
               :key="picto.text"
@@ -201,6 +201,23 @@ const props = defineProps({
     font-size: 1.5rem;
     font-weight: 400;
   }
+
+  @media (max-width: 600px) {
+    width: 280px;
+
+    .details {
+      margin-left: 0;
+    }
+  }
+}
+
+.picto-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  @media (max-width: 600px) {
+  }
 }
 
 .picto {
@@ -226,6 +243,20 @@ const props = defineProps({
     background-repeat: no-repeat;
     background-position: center;
   }
+
+  @media (max-width: 600px) {
+    width: 50%;
+    margin: 0 auto;
+
+    .text {
+      width: 90%;
+    }
+
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
 
 h3 {
@@ -233,6 +264,7 @@ h3 {
   font-size: 34px;
   font-weight: 400;
   line-height: 38px;
+  max-width: 90%;
 }
 
 h3:first-child {

components/Common/ReviewSection.vue

@@ -1,13 +1,13 @@
 <template>
     <LayoutContainer>
       <v-row class="center-90">
-        <v-col cols="3">
+        <v-col cols="12" lg="3">
           <div class="controls-section">
             <h3>
               Ce sont eux qui en parlent le mieux
             </h3>
 
-            <div class="carousel-controls">
+            <div v-if="lgAndUp" class="carousel-controls">
               <v-btn
                 icon="fas fa-chevron-left"
                 @click="goPrevious"
@@ -20,14 +20,16 @@
           </div>
         </v-col>
 
-        <v-col cols="9">
-          <Carousel
+        <v-col cols="12" lg="9">
+          <v-carousel
             ref="carousel"
-            :items-to-show="3"
-            :items-to-scroll="1"
-            :wrap-around="true"
+            :items-to-show="lgAndUp ? 3 : 1"
+            :wrapAround="true"
+            :show-arrows="false"
+            height="350"
+            class="carousel"
           >
-            <Slide
+            <v-carousel-item
               v-for="(card, index) in cards"
               :key="index"
               class="card"
@@ -54,8 +56,8 @@
                   </v-card-actions>
                 </v-card>
               </v-container>
-            </Slide>
-          </Carousel>
+            </v-carousel-item>
+          </v-carousel>
         </v-col>
       </v-row>
   </LayoutContainer>
@@ -66,6 +68,7 @@ import { Carousel, Slide } from "vue3-carousel";
 import "vue3-carousel/dist/carousel.css";
 import type { PropType } from "@vue/runtime-core";
 import type { Review } from "~/types/interface";
+import { useDisplay } from "vuetify";
 
 const props = defineProps({
   cards: {
@@ -74,6 +77,8 @@ const props = defineProps({
   },
 });
 
+const { lgAndUp } = useDisplay()
+
 const carousel: Ref<typeof Carousel | null> = ref(null);
 
 const goPrevious = () => {
@@ -138,6 +143,12 @@ const goNext = () => {
     max-height: 300px;
     margin-top: 2rem;
     margin-bottom: 0.6rem;
+
+    @media (max-width: 1240px) {
+      min-height: 120px;
+      max-width: 70%;
+      margin: 0 auto;
+    }
   }
 
   .v-card-item {
@@ -175,7 +186,15 @@ const goNext = () => {
     align-items: center;
     letter-spacing: 0.18em;
     text-transform: uppercase;
-    text-align: justify !important;
+
+    @media (min-width: 600px) {
+      text-align: justify !important;
+    }
+
+    @media (max-width: 600px) {
+      margin: 12px auto;
+      text-align: center !important;
+    }
   }
 
   .reviewer-structure {
@@ -193,11 +212,19 @@ const goNext = () => {
       max-height: 150px !important;
     }
   }
+
+  @media (max-width: 1240px) {
+  }
 }
 
 .card {
   margin-left: 0.5rem;
   border-radius: 1rem;
+
+  @media (max-width:1240px) {
+    margin-left: 15%;
+    max-width: 70%;
+  }
 }
 
 @media (min-width:2100px) {
@@ -206,4 +233,11 @@ const goNext = () => {
     max-height: 360px !important;
   }
 }
+
+@media (max-width:600px) {
+  :deep(.v-carousel__controls) {
+    color: var(--on-neutral-color);
+    background-color: var(--neutral-color);
+  }
+}
 </style>

components/Common/Table/Comparatif.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer>
     <v-row class="center-90">
-      <table>
+      <table v-if="mdAndUp">
         <thead>
           <tr>
             <th/>
@@ -75,13 +75,125 @@
           </tr>
         </tbody>
       </table>
+
+      <div v-else>
+        <div class="d-flex flex-row flex-grow-1 justify-center mt-2">
+          <v-btn
+            :disabled="carouselPos === 0"
+            icon="fas fa-chevron-left"
+            class="mr-6"
+            @click="goToPrevious"
+          />
+          <v-btn
+            :disabled="carouselPos === 1"
+            icon="fas fa-chevron-right"
+            @click="goToNext"
+          />
+        </div>
+
+        <v-carousel
+          v-model="carouselPos"
+          :hide-delimiters="true"
+          :show-arrows="false"
+          :height="height"
+        >
+          <v-carousel-item>
+            <h4>Standard</h4>
+            <div>
+              <p class="from">À partir de</p>
+              <p class="price">
+                {{ standardPrice }} <span class="ttc">ttc</span>
+                <span class="month">/mois</span>
+              </p>
+            </div>
+
+            <table>
+              <tbody>
+                <tr
+                  v-for="(item, index) in items"
+                  :key="item.label"
+                >
+                  <td class="label-column">
+                    {{ item.label }}
+                  </td>
+
+                  <td>
+                    <v-icon
+                      v-if="item.includedInStandard === true"
+                      icon="far fa-check-circle"
+                      size="18"
+                    />
+
+                    <v-icon
+                      v-else-if="item.includedInStandard === false"
+                      icon="far fa-times-circle"
+                      size="18"
+                      color="red"
+                    />
+
+                    <span v-else>
+                      {{ item.includedInStandard }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </v-carousel-item>
+
+          <v-carousel-item>
+            <h4>Premium</h4>
+
+            <div>
+              <p class="from">À partir de</p>
+              <p class="price">
+                {{ premiumPrice }} <span class="ttc">ttc</span>
+                <span class="month">/mois</span>
+              </p>
+            </div>
+
+            <table>
+              <tbody>
+              <tr
+                v-for="(item, index) in items"
+                :key="item.label"
+              >
+                <td class="label-column">
+                  {{ item.label }}
+                </td>
+
+                <td>
+                  <v-icon
+                    v-if="item.includedInPremium === true"
+                    icon="far fa-check-circle"
+                    size="18"
+                  />
+
+                  <v-icon
+                    v-else-if="item.includedInPremium === false"
+                    icon="far fa-times-circle"
+                    size="18"
+                    color="red"
+                  />
+
+                  <span v-else>
+                  {{ item.includedInPremium }}
+                </span>
+                </td>
+              </tr>
+              </tbody>
+            </table>
+          </v-carousel-item>
+        </v-carousel>
+      </div>
     </v-row>
   </LayoutContainer>
 </template>
 
 <script setup lang="ts">
-
 import type { ComparisonItem } from "~/types/interface";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp } = useDisplay()
 
 const props = defineProps({
   standardPrice: {
@@ -97,6 +209,18 @@ const props = defineProps({
     required: true
   }
 });
+
+const height = computed(() => 150 + props.items.length * 48)
+
+const carouselPos = ref(0)
+
+const goToPrevious = () => {
+  carouselPos.value = 0
+};
+
+const goToNext = () => {
+  carouselPos.value = 1
+};
 </script>
 
 <style scoped lang="scss">
@@ -114,6 +238,10 @@ table {
   margin-left: auto;
   border: none;
   border-collapse: collapse;
+
+  @media (max-width: 940px) {
+    width: 100%;
+  }
 }
 
 th {
@@ -121,6 +249,10 @@ th {
   font-weight: 400;
   font-size: 30px;
   line-height: 34px;
+
+  @media (max-width: 600px) {
+    font-size: 18px;
+  }
 }
 
 tr {
@@ -134,6 +266,10 @@ tbody tr:nth-child(even) {
 
 td {
   padding-right: 5rem;
+
+  @media (max-width: 600px) {
+    padding-right: 0;
+  }
 }
 
 td:first-child {
@@ -145,6 +281,10 @@ td:first-child {
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--on-neutral-color-alt);
+
+  @media (max-width: 600px) {
+    padding-left: 5px;
+  }
 }
 
 .standard {
@@ -183,5 +323,32 @@ td:first-child {
 
 .month {
   padding-right: 5rem;
+
+  @media (max-width: 600px) {
+    padding-right: 0;
+  }
 }
+
+.v-carousel {
+  h4 {
+    text-align: center;
+    margin: 24px auto 12px auto;
+    text-transform: uppercase;
+    letter-spacing: 0.25em;
+  }
+
+  p {
+    padding-right: 0;
+  }
+
+  .price {
+    margin-top: 12px;
+  }
+
+  .ttc {
+    padding-right: 10px;
+  }
+}
+
+
 </style>

components/Contact/Form.vue

@@ -312,6 +312,11 @@ const submit = async (): Promise<void> => {
     align-items: center;
     font-weight: 100;
 
+    @media (max-width: 600px) {
+      font-size: 24px;
+      line-height: 48px;
+    }
+
     .line {
       display: block;
       height: 1px;
@@ -350,6 +355,12 @@ const submit = async (): Promise<void> => {
 
   .legal {
     opacity: 0.7;
+
+    @media (max-width: 600px) {
+      max-width: 80%;
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 }
 

components/Contact/Map.vue

@@ -5,7 +5,7 @@
     </h4>
 
     <v-row>
-      <v-col cols="6">
+      <v-col cols="12" md="6">
         <div class="map-container">
           <l-map
             ref="map"
@@ -46,7 +46,7 @@
         </div>
       </v-col>
 
-      <v-col class="infos">
+      <v-col cols="12" md="6" class="infos">
         <div class="name mb-8">
           Opentalent
         </div>
@@ -101,6 +101,11 @@ h4 {
   margin: 0 auto 1rem auto;
   max-width: 1400px;
 
+  @media (max-width: 600px) {
+    font-size: 24px;
+    line-height: 48px;
+  }
+
   .line {
     display: block;
     height: 1px;

components/Formation/Certification.vue

@@ -2,7 +2,7 @@
   <AnchoredSection id="certification">
     <LayoutContainer>
       <v-row class="center-90">
-        <v-col cols="5">
+        <v-col cols="12" md="5">
           <LayoutUISubTitle>
             DES FORMATIONS CERTIFIÉES
           </LayoutUISubTitle>
@@ -34,7 +34,7 @@
           </div>
         </v-col>
 
-        <v-col cols="7">
+        <v-col cols="12" md="7">
           <v-img src="/images/formation/qualiopi.jpg" />
         </v-col>
       </v-row>

components/Formation/OPCA.vue

@@ -9,7 +9,7 @@
 
       <v-container>
         <v-row class="align-center center-90">
-          <v-col cols="6">
+          <v-col cols="12" md="6">
             <v-img
               src="/images/formation/programme.jpg"
               class="opca-img"
@@ -17,7 +17,7 @@
             />
           </v-col>
 
-          <v-col cols="12" md="6" lg="6">
+          <v-col cols="12" md="6">
             <v-row>
               <h3 class="mt-6 mb-6 mr-6">
                 Des formations éligibles par votre OPCA

components/Formation/Participation.vue

@@ -105,6 +105,7 @@ h3 {
   line-height: 20px;
   margin: 1rem auto auto auto;
   width: 800px;
+  max-width: 100%;
   color: var(--on-primary-color);
 }
 

components/Formation/Presentation.vue

@@ -8,13 +8,13 @@
       </v-row>
 
       <v-row class="mb-12 center-90">
-        <v-col cols="6">
+        <v-col md="6">
           <v-img
             src="/images/formation/programme2.jpg"
             class="programme-img1"/>
         </v-col>
 
-        <v-col cols="6">
+        <v-col md="6">
           <h3 class="title-programme mb-6">
             Un programme de formation complet sur nos logiciels
           </h3>
@@ -39,7 +39,7 @@
       </v-row>
 
       <v-row class="center-90">
-        <v-col cols="6">
+        <v-col md="6">
           <h3 class="title-programme mb-6 mt-4">
             Des formations à la demande et sur-mesure
           </h3>
@@ -52,7 +52,7 @@
           </p>
         </v-col>
 
-        <v-col cols="6">
+        <v-col md="6">
           <v-img
             src="/images/formation/programme.jpg"
             class="programme-img2"
@@ -72,10 +72,16 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   width: 80%;
   height: 100%;
   border-radius: 10%;
+
+  @media (max-width: 600px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 h3, p {
-    width: 35rem;
+  width: 35rem;
+  max-width: 100%;
 }
 
 h3 {

components/Home/Besoin.vue

@@ -1,15 +1,14 @@
 <template>
   <LayoutContainer>
     <v-row
-      v-if="!mdAndDown"
       class="mt-6"
       justify="center"
     >
-      <v-col cols="6">
+      <v-col cols="12" lg="6">
         <div class="screen-img ml-4" />
       </v-col>
 
-      <v-col cols="6" >
+      <v-col cols="12" lg="6" class="detail-col" >
         <h3 class="mt-12">
           Une solution évolutive pour vous donner entière satisfaction
         </h3>
@@ -66,5 +65,30 @@ p {
   background-size: cover;
   width: 700px;
   height: 500px;
+
+  @media (max-width: 1240px) {
+    width: 90%;
+    height: 400px;
+  }
+
+  @media (max-width: 600px) {
+    height: 240px;
+  }
+}
+
+.detail-col {
+  @media (max-width: 1240px) {
+    * {
+      width: 80%;
+      margin: auto;
+      text-align: justify;
+    }
+
+    h3 {
+      margin-bottom: 16px;
+      text-align: center;
+      font-weight: 600;
+    }
+  }
 }
 </style>

components/Home/Caroussel.vue

@@ -9,7 +9,7 @@ Carrousel de la page d'accueil
     :hide-delimiter-background="true"
     :show-delimiters="false"
     :touch="true"
-    :wrap-around="true"
+    :height="lgAndUp ? 500 : 800"
     :interval="5000"
   >
     <v-carousel-item
@@ -24,7 +24,7 @@ Carrousel de la page d'accueil
             class="logo"
           />
 
-          <p class="description" v-html="item.description" />
+          <p class="description" v-html="mdAndUp ? item.description : item.descriptionSm" />
 
           <v-row class="align-start pl-4">
             <v-btn
@@ -70,7 +70,7 @@ Carrousel de la page d'accueil
 
             <v-img
               :src="item.image"
-              :class="smAndDown ? 'image-sm' : 'image'"
+              class="image"
             />
           </v-row>
         </v-col>
@@ -93,7 +93,7 @@ Carrousel de la page d'accueil
 
 import { useDisplay } from "vuetify";
 import type { CarouselItem } from "~/types/interface";
-const { smAndDown, mdAndDown } = useDisplay();
+const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 
 // Index de la slide active
 let activeIndex: Ref<number> = ref(0);
@@ -107,6 +107,8 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     logo: "/images/logo/logiciels/School-noir.png",
     description:
       "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.<br> Il permet la gestion au quotidien et en temps réel de votre établissement, de gérer vos élèves et vos professeurs, vos emplois du temps, le suivi pédagogique, vos salles, la facturation et les encaissements…",
+    descriptionSm:
+      "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.",
     buttonClass: "btn-school",
     image:
       "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
@@ -121,6 +123,8 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     logo: "/images/logo/logiciels/Artist-noir.png",
     description:
       "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque. <br> Gérez votre activité avec un logiciel de gestion et de communication au service de votre passion.",
+    descriptionSm:
+      "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque.",
     buttonClass: "btn-artist",
     image:
       "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
@@ -135,6 +139,8 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     logo: "/images/logo/logiciels/Manager-noir.png",
     description:
       "La solution de mise en réseau des organisations culturelles.<br> Fédérations, confédérations et collectivités, utilisez une solution collaborative innovante et unique spécialement développée pour les réseaux culturels.",
+    descriptionSm:
+      "La solution de mise en réseau des organisations culturelles, telles que les fédérations, confédérations et collectivités.",
     buttonClass: "btn-manager",
     image:
       "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
@@ -185,6 +191,11 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     width: 20rem;
     margin-top: 10px;
     margin-left: 6rem;
+
+    @media (max-width: 600px) {
+      width: 15rem;
+      margin-left: 1rem;
+    }
   }
 
   .description {
@@ -208,6 +219,11 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     width: 10rem;
     height: 2.5rem;
     margin-left: 7rem;
+
+    @media (max-width: 600px) {
+      width: 80%;
+      margin: 15px auto;
+    }
   }
 
   .learn-more-btn :deep(.v-btn__append) {
@@ -226,6 +242,17 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
   .btn-manager {
     background: var(--manager-color-light);
   }
+
+  @media (max-width: 1280px) {
+    padding-bottom: 48px;
+    min-height: 50%;
+
+    .description {
+      width: 80%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
 }
 
 /* ============= Colonne droite - Illustration ===============  */
@@ -287,5 +314,17 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
     height: 35rem;
     right: 5rem;
   }
+
+  @media (max-width: 1280px) {
+    .background-rectangle {
+      top: 60%;
+      height: 14rem;
+    }
+
+    .image {
+      height: 20rem;
+      right: 0;
+    }
+  }
 }
 </style>

components/Home/EventAgenda.vue

@@ -11,30 +11,29 @@ Section "Agenda" de la page d'accueil
         </h3>
       </div>
 
-      <v-row justify="center">
-        <div class="btn-container">
-          <v-col cols="12" md="6">
-            <AgendaLink href="/">
-              <v-btn
-                append-icon="fas fa-arrow-right"
-                class="btn-event"
-              >
-                Découvrir l'agenda
-              </v-btn>
-            </AgendaLink>
-          </v-col>
+      <v-row justify="center" class="btn-container">
+        <v-col cols="12" lg="6">
+          <AgendaLink href="/">
+            <v-btn
+              append-icon="fas fa-arrow-right"
+              class="btn-event"
+            >
+              Découvrir l'agenda
+            </v-btn>
+          </AgendaLink>
+        </v-col>
 
-          <v-col cols="12" md="6">
-            <AgendaLink href="/annuaire">
-              <v-btn
-                append-icon="fas fa-arrow-right"
-                class="btn-event"
-              >
-                Découvrir l’annuaire
-              </v-btn>
-            </AgendaLink>
-          </v-col>
-        </div>
+        <v-col cols="12" lg="6">
+          <AgendaLink href="/annuaire">
+            <v-btn
+              append-icon="fas fa-arrow-right"
+              :variant="lgAndUp ? 'default' : 'outlined'"
+              class="btn-event btn-annuaire"
+            >
+              Découvrir l’annuaire
+            </v-btn>
+          </AgendaLink>
+        </v-col>
       </v-row>
     </div>
   </LayoutContainer>
@@ -43,24 +42,22 @@ Section "Agenda" de la page d'accueil
 <script setup>
 import { useDisplay } from "vuetify";
 import AgendaLink from "~/components/Common/AgendaLink.vue";
-const { mdAndDown } = useDisplay();
+const { lgAndUp } = useDisplay();
 </script>
 
 <style scoped>
 
-@media (min-width: 600px) {
-  .container {
-    height: 35rem;
-    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-    linear-gradient(
-      180deg,
-      rgba(14, 45, 50, 0.04) 0%,
-      rgba(14, 45, 50, 0.2) 100%
-    ),
-    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
-    url("/images/eventAgenda/eventAgenda.jpg") no-repeat center 60%;
-    background-size: cover;
-  }
+.container {
+  height: 35rem;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+  linear-gradient(
+    180deg,
+    rgba(14, 45, 50, 0.04) 0%,
+    rgba(14, 45, 50, 0.2) 100%
+  ),
+  linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+  url("/images/eventAgenda/eventAgenda.jpg") no-repeat center 60%;
+  background-size: cover;
 }
 
 h3 {
@@ -73,6 +70,13 @@ h3 {
   margin-top: 4rem;
   color: var(--on-primary-color);
   width: 45rem;
+
+  @media (max-width: 600px) {
+    font-size: 2rem;
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 80%;
+  }
 }
 
 .btn-container {
@@ -80,11 +84,20 @@ h3 {
   align-items: center;
   justify-content: center;
   padding: 0 20rem;
-}
 
-@media (max-width: 960px) {
-  .btn-container {
+  @media (max-width: 1240px) {
     padding: 0 5rem;
+    margin-top: 48px;
+
+    a {
+      display: block;
+      width: 80%;
+      margin: 5px auto;
+    }
+  }
+
+  @media (max-width: 1600px) {
+    padding: 0 5%;
   }
 }
 
@@ -99,5 +112,20 @@ h3 {
   min-width: 20rem;
   max-width: 20rem;
   height: 3.5rem;
+
+  @media (max-width: 1240px) {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    min-width: 0;
+  }
+}
+
+.btn-annuaire {
+  @media (max-width: 1240px) {
+    color: var(--on-primary-color);
+    font-weight: 600;
+    border: solid 2px var(--on-primary-color);
+  }
 }
 </style>

components/Home/Help.vue

@@ -76,6 +76,14 @@ Section "Besoin d'aide" de la page d'accueil
     padding: 60px;
     justify-content: center;
     align-items: self-start;
+
+    @media (max-width: 600px) {
+      padding: 12px;
+
+      * {
+        max-width: 100%;
+      }
+    }
   }
 }
 
@@ -128,7 +136,12 @@ ul {
   margin-right: auto;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1240px) {
+  .v-row {
+    width: 100%;
+    margin: 0;
+  }
+
   .v-img {
     width: 40rem;
     margin-left: auto;
@@ -163,6 +176,7 @@ ul {
   .button-faq {
     margin-left: 3rem;
     margin-top: 2rem;
+    width: 80%;
   }
 }
 </style>

components/Home/Promotion.vue

@@ -48,7 +48,7 @@
       </v-col>
     </v-row>
 
-    <section class="outil">
+    <v-row class="outil">
       <v-row>
         <v-col>
           <h3>
@@ -61,41 +61,61 @@
       <v-row class="pictos">
         <v-col cols="12" lg="6">
           <v-row>
-            <img src="/images/pictoHome/network.svg" alt="network" />
-            <p>
-              Logiciel de gestion et communication en ligne
-            </p>
+            <v-col cols="3">
+              <img src="/images/pictoHome/network.svg" alt="network" />
+            </v-col>
+            <v-col cols="9">
+              <p>
+                Logiciel de gestion et communication en ligne
+              </p>
+            </v-col>
           </v-row>
 
           <v-row>
-            <img src="/images/pictoHome/website.svg" alt="website" />
-            <p>
-              Site web intégré et simple d’usage
-            </p>
+            <v-col cols="3">
+              <img src="/images/pictoHome/website.svg" alt="website" />
+            </v-col>
+            <v-col cols="9">
+              <p>
+                Site web intégré et simple d’usage
+              </p>
+            </v-col>
           </v-row>
         </v-col>
 
         <v-col cols="12" lg="6">
           <v-row>
-            <img src="/images/pictoHome/visibility.svg" alt="visibility" />
-            <p>
-              Augmentez votre visibilité avec l'agenda culturel
-            </p>
+            <v-col cols="3">
+              <img src="/images/pictoHome/visibility.svg" alt="visibility" />
+            </v-col>
+            <v-col cols="9">
+              <p>
+                Augmentez votre visibilité avec l'agenda culturel
+              </p>
+            </v-col>
           </v-row>
 
           <v-row>
-            <img src="/images/pictoHome/communication.svg" alt="communication" />
-            <p>
-              Communiquez en réseau
-            </p>
+            <v-col cols="3">
+              <img src="/images/pictoHome/communication.svg" alt="communication" />
+            </v-col>
+            <v-col cols="9">
+              <p>
+                Communiquez en réseau
+              </p>
+            </v-col>
           </v-row>
         </v-col>
       </v-row>
-    </section>
+    </v-row>
   </LayoutContainer>
 </template>
 
 <script setup lang="ts">
+
+import { useDisplay } from "vuetify";
+
+const { mdAndUp } = useDisplay()
 </script>
 
 <style scoped lang="scss">
@@ -134,6 +154,10 @@
   }
 
   @media (max-width: 960px) {
+    >.v-col {
+      margin-bottom: 0;
+    }
+
     .text-block {
       font-weight: 500;
       font-size: 2rem;
@@ -151,8 +175,6 @@
 }
 
 .v-row.demo {
-  margin-bottom: -28rem;
-
   .screen {
     width: 900px;
     object-fit: cover;
@@ -163,9 +185,12 @@
     bottom: 30rem;
   }
 
-  @media (max-width: 960px) {
+  @media (max-width: 1280px) {
     .screen {
+      margin-top: -12px;
+      bottom: 0;
       width: 100%;
+      border-radius: 0;
     }
   }
 
@@ -187,9 +212,15 @@
   }
 }
 
-section.outil {
+.outil {
   margin-bottom: 36px;
 
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   h3 {
     color: var(--primary-color);
     font-size: 2rem;
@@ -200,16 +231,25 @@ section.outil {
 
   .pictos {
     .v-row {
-      border-bottom: solid 1px var(--on-primary-color-alt);
+      border-bottom: solid 2px var(--on-neutral-color-extra-light);
       margin: 0;
       height: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
+
+      @media (max-width: 600px) {
+        width: 90%;
+      }
     }
 
-    .v-row:first-child {
-      border-top: solid 1px var(--on-primary-color-alt);
+    .v-col:first-child .v-row:first-child, .v-col-12:first-child .v-row:first-child {
+      border-top: solid 2px var(--on-neutral-color-extra-light);
+    }
+
+    >.v-col-12 {
+      padding-top : 0;
+      padding-bottom : 0;
     }
 
     img {
@@ -223,8 +263,14 @@ section.outil {
       font-size: 22px;
       line-height: 26px;
       width: 25rem;
+      max-width: 100%;
       color: var(--primary-color);
       margin-bottom: 1rem;
+
+      @media (max-width: 600px) {
+        width: 90%;
+        margin-bottom: 0;
+      }
     }
   }
 }

components/Home/Reviews.vue

@@ -11,7 +11,7 @@
     </div>
 
     <!-- Ecrans larges -->
-    <div v-if="mdAndUp" class="container-2">
+    <div v-if="lgAndUp" class="container-2">
 
       <!-- Partie 1 : Avis clients -->
       <v-row justify="center">
@@ -134,7 +134,7 @@
         </div>
       </v-row>
 
-      <!-- Partie 1 : Carrousel logos clients -->
+      <!-- Partie 2 : Carrousel logos clients -->
       <div class="carousel-clients-container">
         <CommonCarouselClients :items="items" />
       </div>
@@ -190,6 +190,8 @@
           />
         </v-col>
       </v-row>
+
+      <CommonCarouselClients :items="items" class="alt-theme"/>
     </div>
   </LayoutContainer>
 </template>
@@ -200,7 +202,7 @@ import "vue3-carousel/dist/carousel.css";
 import { useDisplay } from "vuetify";
 import type { Review } from "~/types/interface";
 
-const { mdAndUp } = useDisplay();
+const { lgAndUp } = useDisplay();
 
 const reviewCarousel: Ref<typeof Carousel | null> = ref(null);
 
@@ -266,7 +268,10 @@ const items: Ref<Array<{ src: string }>> = ref([
 
 .container-1 {
   background-color: var(--neutral-color);
-  height: 22rem;
+
+  @media (min-width: 1240px) {
+    height: 22rem;
+  }
 
   h4 {
     font-size: 2rem;
@@ -362,11 +367,12 @@ const items: Ref<Array<{ src: string }>> = ref([
 
 .container-sm {
   .v-card {
-    width: 300px;
+    width: 70%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: 16px;
   }
 
   .carousel-controls {

components/Home/Solution.vue

@@ -16,7 +16,8 @@ Section "Solutions" de la page d'accueil
       <v-col
         v-for="(solution, index) in solutions"
         :key="index"
-        cols="4"
+        cols="12"
+        lg="4"
       >
         <v-container>
           <div class="d-flex justify-center align-left flex-column">
@@ -38,35 +39,37 @@ Section "Solutions" de la page d'accueil
               <v-row>
                 <div :class="['image-container', solution.class]" >
                   <v-img :src="solution.image" />
-                  <v-btn>Découvrir</v-btn>
+                  <v-btn v-if="xlAndUp">Découvrir</v-btn>
                 </div>
               </v-row>
             </nuxt-link>
 
-            <v-row>
-              <div class="details">
-                <v-col cols="6">
-                  <ul>
-                    <li
-                      v-for="(sol, i) in solution.solutions.slice(0, 4)"
-                      :key="i"
-                    >
-                      {{ sol }}
-                    </li>
-                  </ul>
-                </v-col>
-
-                <v-col cols="6">
-                  <ul>
-                    <li
-                      v-for="(sol, i) in solution.solutions.slice(4)"
-                      :key="i"
-                    >
-                      {{ sol }}
-                    </li>
-                  </ul>
-                </v-col>
-              </div>
+            <v-row class="details">
+              <v-col cols="12" md="6">
+                <ul>
+                  <li
+                    v-for="(sol, i) in solution.solutions.slice(0, 4)"
+                    :key="i"
+                  >
+                    {{ sol }}
+                  </li>
+                </ul>
+              </v-col>
+
+              <v-col cols="12" md="6">
+                <ul>
+                  <li
+                    v-for="(sol, i) in solution.solutions.slice(4)"
+                    :key="i"
+                  >
+                    {{ sol }}
+                  </li>
+                </ul>
+              </v-col>
+            </v-row>
+
+            <v-row v-if="lgAndDown">
+              <v-btn :to="solution.link">Découvrir</v-btn>
             </v-row>
           </div>
         </v-container>
@@ -86,6 +89,9 @@ Section "Solutions" de la page d'accueil
 <script setup lang="ts">
 
 import type { SolutionItem } from "~/types/interface";
+import { useDisplay } from "vuetify";
+
+const { xlAndUp, lgAndDown } = useDisplay()
 
 const solutions: Array<SolutionItem> = [
   {
@@ -148,6 +154,11 @@ const solutions: Array<SolutionItem> = [
   margin-bottom: 15rem;
   height: 36rem;
   position: relative;
+
+  @media (max-width: 1240px) {
+    height: 100%;
+    margin-bottom: 0;
+  }
 }
 
 h4 {
@@ -157,6 +168,16 @@ h4 {
   text-align: center;
   color: var(--on-primary-color);
   width: 100%;
+
+  @media (max-width: 1240px) {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (max-width: 600px) {
+    font-size: 1.6rem;
+  }
 }
 
 @media (min-width: 600px) {
@@ -166,7 +187,6 @@ h4 {
 }
 
 .v-row.solutions {
-
   small {
     font-weight: 600;
     font-size: 10px;
@@ -216,6 +236,12 @@ h4 {
       right: 0;
       width: 200px;
     }
+
+    @media (max-width: 1240px) {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
   }
 
   .image-container::before {
@@ -232,16 +258,23 @@ h4 {
   }
 
   .v-btn {
-    position: absolute;
-    z-index: 100;
-    bottom: 40%;
-    left: 50%;
-    transform: translateX(-50%);
-    display: none;
     font-size: 0.8rem;
     border-radius: 6px;
     background: var(--secondary-color);
     color: var(--on-primary-color);
+
+    @media (min-width: 1240px) {
+      position: absolute;
+      z-index: 100;
+      bottom: 40%;
+      transform: translateX(-50%);
+      display: none;
+    }
+
+    @media (max-width: 1240px) {
+      width: 90%;
+      margin: 24px auto;
+    }
   }
 
   .image-container:hover .v-btn {
@@ -291,7 +324,27 @@ h4 {
       margin-left: 1rem;
       line-height: 18px;
       color: var(--primary-color);
+
+      @media (max-width: 1240px) {
+        font-size: 1.1rem;
+        color: var(--on-primary-color);
+      }
     }
+
+
+    @media (max-width: 600px) {
+      padding: 18px;
+
+      ul {
+        margin-top: 0;
+      }
+
+      .v-col-12 {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
   }
 }
 
@@ -299,6 +352,11 @@ h4 {
   p {
     text-align: right;
     font-size: 12px;
+
+    @media (max-width: 1240px) {
+      font-size: 1.1rem;
+      color: var(--on-primary-color);
+    }
   }
 }
 </style>

components/JoinUs/MissionDetail.vue

@@ -35,7 +35,7 @@
           </LayoutUITitlePage>
 
           <v-row class="details blue-content my-6">
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <v-row>
                 <div>
                   Type de contrat :
@@ -51,7 +51,7 @@
               </v-row>
             </v-col>
 
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <v-row>
                 <div>
                   Secteur d'activité : <b>{{ job.sector.join(', ') }}</b>
@@ -87,7 +87,7 @@
             <p>
               MOTS CLÉS
             </p>
-            <div>
+            <div v-if="mdAndUp">
               <p>PARTAGER</p>
             </div>
           </v-row>
@@ -98,9 +98,13 @@
                 {{ tag.name }}
               </span>
             </p>
+            <CommonShare v-if="mdAndUp" />
+          </v-row>
 
+          <div v-if="smAndDown">
+            <p>PARTAGER</p>
             <CommonShare />
-          </v-row>
+          </div>
         </div>
       </div>
     </div>
@@ -113,6 +117,9 @@ import "vue3-carousel/dist/carousel.css";
 import { useEntityFetch } from "~/composables/data/useEntityFetch";
 import JobPosting from "~/models/Maestro/JobPosting";
 import DateUtils from "~/services/utils/dateUtils";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp, smAndDown } = useDisplay()
 
 const route = useRoute();
 const { fetch } = useEntityFetch()
@@ -146,6 +153,10 @@ const formatDate = (date: string) => {
     color: var(--on-secondary-color);
     height: 10rem;
 
+    @media (max-width: 600px) {
+      height: auto;
+    }
+
     .v-row {
       width: 90%;
       margin-left: auto;
@@ -157,6 +168,10 @@ const formatDate = (date: string) => {
       font-weight: 500;
       font-size: 25px;
       line-height: 18px;
+
+      @media (max-width: 600px) {
+        font-size: 16px;
+      }
     }
   }
 

components/JoinUs/Missions.vue

@@ -15,7 +15,7 @@
       :key="index"
       class="mission-container"
     >
-      <v-row class="title-container">
+      <div class="title-container">
         <NuxtLink
           :to="`/nous-rejoindre/${job.id}`"
           class="title"
@@ -34,7 +34,7 @@
         >
           En savoir plus
         </v-btn>
-      </v-row>
+      </div>
 
       <v-row class="location-container">
         <v-icon icon="fas fa-map-marker" />
@@ -56,7 +56,7 @@
       </v-col>
     </v-row>
 
-    <v-row class="ml-6 mb-6">
+    <v-row class="mb-6">
       <v-col cols="12">
         <p class="apply-now">
           Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas
@@ -182,6 +182,11 @@ const onFormSubmit = () => {
     height: 80px;
     padding: 10px 10px 10px 1px;
 
+    @media (max-width: 600px) {
+      flex-direction: column;
+      height: auto;
+    }
+
     .title {
       font-weight: 600;
       font-size: 1.5rem;
@@ -189,6 +194,13 @@ const onFormSubmit = () => {
       color: var(--on-primary-color);
       text-decoration: none;
       margin-left: 36px;
+
+      @media (max-width: 600px) {
+        font-size: 1.2rem;
+        margin-left: auto;
+        margin-right: auto;
+        width: 90%;
+      }
     }
 
     .star {
@@ -202,6 +214,10 @@ const onFormSubmit = () => {
       margin-right: 8px;
       display: flex;
       align-items: center;
+
+      @media (max-width: 600px) {
+        margin: 12px auto;
+      }
     }
   }
 
@@ -221,6 +237,10 @@ const onFormSubmit = () => {
       margin-left: 10px;
       font-size: 1.3rem;
     }
+
+    @media (max-width: 600px) {
+      margin: 0 auto 12px auto;
+    }
   }
 }
 
@@ -238,6 +258,11 @@ const onFormSubmit = () => {
   margin-left: auto;
   margin-right: auto;
   font-weight: 700;
+
+  @media (max-width: 600px) {
+    width: 80%;
+    margin: 12px auto;
+  }
 }
 
 .apply-now {
@@ -248,6 +273,12 @@ const onFormSubmit = () => {
   line-height: 40px;
   color: var(--primary-color);
   margin-bottom: 2rem;
+  margin-left: 24px;
+
+  @media (max-width: 600px) {
+    max-width: 90%;
+    margin: 12px auto;
+  }
 }
 
 .v-dialog {

components/Layout/FAQ.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="alt-theme main my-2">
-    <div class="d-flex flex-row">
-      <div class="d-flex flex-column">
+    <v-row>
+      <v-col cols="12" lg="6">
         <LayoutUISubTitle class="mt-12 ml-3">
           Vous voulez tirer le meilleur de notre logiciel ?
         </LayoutUISubTitle>
@@ -18,9 +18,9 @@
         >
           Consulter notre FAQ
         </v-btn>
-      </div>
+      </v-col>
 
-      <div class="d-flex flex-column justify-center links">
+      <v-col cols="12" lg="6" class="links">
         <v-btn
           href="https://ressources.opentalent.fr/pages/viewpage.action?pageId=75170564"
           target="_blank"
@@ -51,15 +51,16 @@
             </p>
           </div>
         </v-btn>
-      </div>
-    </div>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <style scoped lang="scss">
-.flex-row {
+.v-row {
   position: relative;
   z-index: 2;
+  max-width: 100%;
 }
 
 .main {
@@ -94,6 +95,12 @@ h3 {
   margin-bottom: 3rem;
   font-size: 30px;
   font-weight: 400;
+
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-right: auto;
+    margin-left: auto;
+  }
 }
 
 .btn-faq {
@@ -103,14 +110,33 @@ h3 {
   border-radius: 6px;
   font-weight: 500;
   font-size: 0.8rem;
-  z-index: 1;
+  z-index: 2;
   text-transform: none !important;
   line-height: 1rem;
+
+
+  @media (max-width: 600px) {
+    width: 90%;
+    margin-left: 5%;
+  }
 }
 
 .links {
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media (max-width: 1240px) {
+    flex-direction: row;
+  }
+
+  @media (max-width: 1240px) {
+    flex-direction: column;
+  }
+
   .v-btn {
-    z-index: 1;
+    z-index: 2;
     width: 23rem;
     height: 5.5rem;
     margin-left: 3rem;
@@ -145,6 +171,34 @@ h3 {
       white-space: normal !important;
       text-align: left;
     }
+
+    @media (max-width: 1240px) {
+      max-width: 40%;
+      margin: 12px 5%;
+      height: 8rem;
+
+      .v-btn__content>div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .v-img {
+        margin-bottom: 6px;
+      }
+
+      p {
+        text-align: center;
+      }
+    }
+
+    @media (max-width: 600px) {
+      max-width: 90%;
+    }
   }
+
+
 }
 </style>
+<script setup lang="ts">
+</script>

components/Layout/Footer/Footer.vue

@@ -187,35 +187,35 @@
       </div>
 
       <!-- Troisième section alt : version petits écrans -->
-<!--      <v-row v-if="mdAndDown">-->
-<!--        <v-col cols="12" >-->
-<!--          <div v-for="(item, index) in footerLinks" :key="index">-->
-<!--            <v-container>-->
-<!--              <div class="section" @click="toggleSection(index)">-->
-<!--                <div class="d-flex flex-row justify-space-between">-->
-<!--                  {{ item.label }}-->
-
-<!--                  <v-icon-->
-<!--                    :icon="isActive(index) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"-->
-<!--                  />-->
-<!--                </div>-->
-
-<!--                <div-->
-<!--                  v-show="isActive(index)"-->
-<!--                  v-for="(sublink, sublinkIndex) in item.sublink"-->
-<!--                  :key="sublinkIndex"-->
-<!--                  class="mt-3"-->
-<!--                >-->
-<!--                  <nuxt-link :href="sublink.link">-->
-<!--                    {{ sublink.label }}-->
-<!--                  </nuxt-link>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </v-container>-->
-
-<!--          </div>-->
-<!--        </v-col>-->
-<!--      </v-row>-->
+      <v-row v-if="mdAndDown">
+        <v-col cols="12" >
+          <div v-for="(item, index) in footerLinks" :key="index">
+            <v-container>
+              <div class="section" @click="toggleSection(index)">
+                <div class="d-flex flex-row justify-space-between">
+                  {{ item.label }}
+
+                  <v-icon
+                    :icon="isActive(index) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"
+                  />
+                </div>
+
+                <div
+                  v-show="isActive(index)"
+                  v-for="(sublink, sublinkIndex) in item.sublink"
+                  :key="sublinkIndex"
+                  class="mt-3"
+                >
+                  <nuxt-link :href="sublink.link">
+                    {{ sublink.label }}
+                  </nuxt-link>
+                </div>
+              </div>
+            </v-container>
+
+          </div>
+        </v-col>
+      </v-row>
 
       <div class="footnotes">
         <v-row justify="center">
@@ -395,6 +395,12 @@ a {
     text-decoration: none;
     color: var(--on-primary-color);
     font-size: 0.8rem;
+
+    @media (max-width: 600px) {
+      max-width: 90%;
+      text-align: center;
+
+    }
   }
 }
 
@@ -427,7 +433,7 @@ a {
     cursor: pointer;
 
     >div:first-child {
-      border-bottom: 1px solid var(--on-secondary-color);
+      border-bottom: 1px solid var(--on-primary-color);
       padding-bottom: 6px;
       text-transform: uppercase;
     }

components/Layout/Footer/Prefooter.vue

@@ -4,9 +4,9 @@ Première section du footer (galerie des logiciels)
 
 <template>
   <footer>
-    <LayoutContainer>
+    <!-- Ecrans larges -->
+    <LayoutContainer v-if="lgAndUp">
       <v-row>
-
         <v-col cols="4" class="text-center">
           <nuxt-link to="/opentalent_artist">
             <v-img src="/images/logo/logiciels/Artist-noir.png"/>
@@ -42,10 +42,44 @@ Première section du footer (galerie des logiciels)
         </v-col>
       </v-row>
     </LayoutContainer>
+
+    <!-- Petits écrans -->
+    <LayoutContainer v-else>
+      <v-row class="justify-center">
+        <v-col cols="3" class="border-right">
+          <nuxt-link to="/opentalent_artist">
+            <v-img src="/images/logo/logiciels/&_Jaune.png"/>
+          </nuxt-link>
+        </v-col>
+
+        <v-col cols="1">
+          <v-divider :vertical="true" />
+        </v-col>
+
+        <v-col cols="3">
+          <nuxt-link to="/opentalent_school">
+            <v-img src="/images/logo/logiciels/&_Bleu.png"/>
+          </nuxt-link>
+        </v-col>
+
+        <v-col cols="1">
+          <v-divider :vertical="true" />
+        </v-col>
+
+        <v-col cols="3">
+          <nuxt-link to="/opentalent_manager">
+            <v-img src="/images/logo/logiciels/&_Rouge.png"/>
+          </nuxt-link>
+        </v-col>
+      </v-row>
+    </LayoutContainer>
   </footer>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { useDisplay } from "vuetify";
+
+const { lgAndUp } = useDisplay()
 </script>
 
 <style scoped lang="scss">

components/Layout/Footer/Solutions.vue

@@ -17,13 +17,13 @@
         v-if="showArtist"
         class="row-artist"
       >
-        <v-col cols="2">
+        <v-col cols="6" md="2">
           <NuxtLink to="/opentalent_artist">
             <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
           </NuxtLink>
         </v-col>
 
-        <v-col cols="10">
+        <v-col cols="6" md="10">
           <!-- list v-chip-->
           <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" label>
@@ -49,13 +49,13 @@
         v-if="showManager"
         class="row-manager"
       >
-        <v-col cols="2">
+        <v-col cols="6" md="2">
           <NuxtLink to="/opentalent_manager">
           <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
         </NuxtLink>
         </v-col>
 
-        <v-col cols="10">
+        <v-col cols="6" md="10">
           <!-- list v-chip-->
           <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" color="primary" label>
@@ -78,13 +78,13 @@
         v-if="showSchool"
         class="row-school"
       >
-        <v-col cols="2">
+        <v-col cols="6" md="2">
           <NuxtLink to="/opentalent_school">
             <v-img src="/images/logo/logiciels/School-noir.png" class="logo" />
           </NuxtLink>
         </v-col>
 
-        <v-col cols="10">
+        <v-col cols="6" md="10">
           <!-- list v-chip-->
           <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" label>
@@ -138,6 +138,11 @@ const props = defineProps({
 <style scoped lang="scss">
 .chip-detail {
   color: var(--on-neutral-color);
+
+  @media (max-width: 600px) {
+    width: 100%;
+    text-align: center;
+  }
 }
 
 .chip-custom {
@@ -147,12 +152,23 @@ const props = defineProps({
   border-radius: 3rem;
   text-transform: uppercase;
   font-weight: 500;
-  font-size: 10px;
   line-height: 16px;
   display: flex;
   align-items: center;
   text-align: center;
   letter-spacing: 0.2em;
+
+  @media (max-width: 600px) {
+    font-size: 10px !important;
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+
+    :deep(.v-chip__content) {
+      width: 100%;
+    }
+  }
 }
 
 .row-artist,

components/Layout/Navigation.vue

@@ -2,128 +2,25 @@
 Menu Navigation
 -->
 <template>
-  <!-- Navigation (écran large) -->
-  <div v-if="mdAndUp" v-intersect="onIntersect">
-    <LayoutNavigationTopbar />
-
-    <v-row class="navigation-lg" style="margin-top: 0 !important;">
-      <!-- Logo Opentalent -->
-      <v-col cols="2">
-        <nuxt-link to="/">
-          <v-img class="logo" src="/images/logo/navigation-logo.png" />
-        </nuxt-link>
-      </v-col>
-
-      <!-- Menu principal -->
-      <v-col cols="10" class="pl-6">
-        <v-menu
-          v-for="item in menu"
-          :key="item.label"
-          :open-on-hover="true"
-        >
-          <template v-slot:activator="{ props }">
-            <nuxt-link
-              v-bind="props"
-              class="menuItem first-level"
-              :to="item.to"
-            >
-              {{ item.label }}
-            </nuxt-link>
-          </template>
-
-          <v-list
-            v-if="item.children?.length > 0"
-            class="menu-list"
-          >
-            <v-list-item
-              v-for="child in item.children"
-              :key="child.label"
-              :to="child.to"
-              class="menuItem"
-            >
-              <v-list-item-title>{{ child.label }}</v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-menu>
-      </v-col>
-    </v-row>
+  <div v-intersect="onIntersect">
+    <!-- Navigation (écran large) -->
+    <div v-if="lgAndUp">
+      <LayoutNavigationLg :menu="menu" />
+    </div>
+
+    <!-- Navigation (petit écran) -->
+    <div v-else>
+      <LayoutNavigationMd :menu="menu" />
+    </div>
   </div>
-
-  <!-- Navigation (petit écran) -->
-  <v-app
-    v-else
-    class="navigation-sm"
-  >
-    <!-- Top bar -->
-    <v-app-bar app>
-      <v-app-bar-nav-icon
-        @click="toggleMenu"
-      />
-
-      <nuxt-link to="/">
-        <v-img class="logo-md" src="/images/logo/navigation-logo.png" />
-      </nuxt-link>
-
-      <nuxt-link
-        to="https://admin.opentalent.fr/#/login/"
-        style="text-decoration: none"
-      >
-        <v-btn text>
-          <v-icon left class="fas fa-user icon"></v-icon>
-        </v-btn>
-      </nuxt-link>
-
-      <v-btn text>
-        <v-icon left class="fas fa-phone icon"></v-icon>
-      </v-btn>
-
-      <AgendaLink href="/agenda-culturel" style="text-decoration: none">
-        <v-btn text>
-          <v-icon left class="fas fa-calendar icon"></v-icon>
-        </v-btn>
-      </AgendaLink>
-    </v-app-bar>
-
-    <!-- Tiroir de navigation principal -->
-    <v-navigation-drawer
-      v-model="isMenuOpen"
-      app
-      temporary
-    >
-      <v-list nav dense>
-        <v-list-item
-          v-if="isSubMenu"
-          class="menuItem back-item"
-          @click="onBackItemClick"
-        >
-          <v-list-item-title>
-            <v-icon icon="fas fa-caret-left" class="mr-1"/> Retour
-          </v-list-item-title>
-        </v-list-item>
-
-        <v-list-item
-          v-for="(item, index) in activeMenu"
-          :key="item.label"
-          :to="item.to"
-          class="menuItem"
-          @click="onMenuItemClick(index, item)"
-        >
-          <v-list-item-title>
-            {{ item.label }}
-          </v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-  </v-app>
 </template>
 
 <script setup lang="ts">
 import { useDisplay } from "vuetify";
 import type { MainMenuItem } from "~/types/interface";
-import AgendaLink from "~/components/Common/AgendaLink.vue";
-import Footer from "~/components/Layout/Footer/Footer.vue";
 import { useLayoutStore } from "~/stores/layoutStore";
-const { mdAndUp } = useDisplay();
+
+const { lgAndUp } = useDisplay();
 
 const menu: Array<MainMenuItem> = [
   {
@@ -152,57 +49,6 @@ const menu: Array<MainMenuItem> = [
   { label: "Contact", to: "/nous-contacter" },
 ]
 
-// Menu dépliant (petit écran)
-const isMenuOpen: Ref<boolean> = ref(false);
-const toggleMenu = () => {
-  isMenuOpen.value = !isMenuOpen.value;
-};
-
-const activeMenuIndex: Ref<number | null> = ref(null)
-
-const activeMenu = computed(() =>
-  activeMenuIndex.value !== null ? menu[activeMenuIndex.value].children : menu
-)
-
-/**
- * Determines if the is active menu is a sub-menu .
- *
- * @function isSubMenu
- * @returns {boolean} - True if a sub-menu is active, otherwise false.
- */
-const isSubMenu = computed(() => activeMenuIndex.value !== null)
-
-/**
- * Handles the click event on a menu item.
- *
- * @param {number} index - The index of the clicked menu item.
- * @param {MainMenuItem} item - The clicked menu item.
- * @returns {void}
- */
-const onMenuItemClick = (index: number, item: MainMenuItem): void => {
-  if (!item.children) {
-    return
-  }
-  withAnimation(() => activeMenuIndex.value = index)
-}
-
-/**
- * Function to handle back button click event.
- */
-const onBackItemClick = (): void => {
-  withAnimation(() => activeMenuIndex.value = null)
-}
-
-/**
- * Déclenche une animation de changement de menu en fermant et rouvrant le drawer
- * @param callback
- */
-const withAnimation = (callback: () => void) => {
-  isMenuOpen.value = false
-  callback()
-  setTimeout(() => {isMenuOpen.value = true}, 85)
-}
-
 const layoutStore = useLayoutStore()
 const onIntersect = (isIntersecting: boolean) => {
   layoutStore.setIsHeaderVisible(isIntersecting)
@@ -212,66 +58,4 @@ const onIntersect = (isIntersecting: boolean) => {
 
 <style scoped>
 
-.logo {
-  height: 100px;
-  width: 300px;
-}
-
-.logo-md {
-  width: 150px;
-  height: 300px;
-}
-
-.icon {
-  color: var(--on-neutral-color);
-}
-
-.menuItem, .menuItem .v-list-item-title {
-  font-weight: 500;
-  font-size: 0.9rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--primary-color);
-  cursor: pointer;
-  text-decoration: none !important;
-}
-
-/**
-  Navigation grands écrans
- */
-.navigation-lg {
-  display: flex;
-  align-items: center;
-  background-color: var(--neutral-color);
-
-  .menuItem  {
-    padding: 18px;
-  }
-
-  .menuItem.first-level {
-    font-size: 1.3rem;
-    margin-right: 1rem;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-  }
-}
-
-/**
-  Navigation petits écrans
- */
-.navigation-sm {
-  background-color: var(--neutral-color);
-  position: fixed;
-  top: 0;
-}
-
-.back-item {
-  border-bottom: solid 1px var(--on-neutral-color-light);
-  border-radius: 0;
-
-  .v-list-item-title {
-    display: flex;
-    align-items: center;
-  }
-}
 </style>

components/Layout/Navigation/Lg.vue

@@ -0,0 +1,97 @@
+<!-- Barre de navigation (écran large) -->
+<template>
+  <div>
+    <LayoutNavigationTopbar />
+
+    <v-row class="navigation-lg" style="margin-top: 0 !important;">
+      <!-- Logo Opentalent -->
+      <v-col cols="2">
+        <nuxt-link to="/">
+          <v-img class="logo" src="/images/logo/navigation-logo.png" />
+        </nuxt-link>
+      </v-col>
+
+      <!-- Menu principal -->
+      <v-col cols="10" class="pl-6">
+        <v-menu
+          v-for="item in menu"
+          :key="item.label"
+          :open-on-hover="true"
+        >
+          <template v-slot:activator="{ props }">
+            <nuxt-link
+              v-bind="props"
+              class="menuItem first-level"
+              :to="item.to"
+            >
+              {{ item.label }}
+            </nuxt-link>
+          </template>
+
+          <v-list
+            v-if="item.children?.length! > 0"
+            class="menu-list"
+          >
+            <v-list-item
+              v-for="child in item.children"
+              :key="child.label"
+              :to="child.to"
+              class="menuItem"
+            >
+              <v-list-item-title>{{ child.label }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "@vue/runtime-core";
+import type { MainMenuItem } from "~/types/interface";
+
+const props = defineProps({
+  menu: {
+    type: Array as PropType<Array<MainMenuItem>>
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.logo {
+  height: 100px;
+  width: 300px;
+}
+
+.icon {
+  color: var(--on-neutral-color);
+}
+
+.menuItem, .menuItem .v-list-item-title {
+  font-weight: 500;
+  font-size: 0.9rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--primary-color);
+  cursor: pointer;
+  text-decoration: none !important;
+}
+
+.navigation-lg {
+  display: flex;
+  align-items: center;
+  background-color: var(--neutral-color);
+
+  .menuItem  {
+    padding: 18px;
+  }
+
+  .menuItem.first-level {
+    font-size: 1.3rem;
+    margin-right: 1rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+  }
+}
+</style>

components/Layout/Navigation/Md.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="app-container">
+    <v-app class="navigation-sm">
+      <!-- Top bar -->
+      <v-app-bar app>
+        <v-app-bar-nav-icon
+          @click="toggleMenu"
+        />
+
+        <nuxt-link to="/">
+          <v-img
+            class="logo-md"
+            :src="smAndUp ? '/images/logo/navigation-logo.png' : '/images/Opentalent_Griffe.png'"
+          />
+        </nuxt-link>
+
+        <v-spacer />
+
+        <div class="mx-4">
+          <v-btn
+            href="https://admin.opentalent.fr/#/login/"
+            icon="fas fa-user"
+            class="icon"
+          />
+
+          <v-btn
+            to="/nous-contacter"
+            icon="fas fa-phone"
+            class="icon"
+          />
+
+          <AgendaLink href="/agenda-culturel">
+            <v-btn
+              icon="fas fa-calendar"
+              class="icon"
+            />
+          </AgendaLink>
+        </div>
+      </v-app-bar>
+
+      <!-- Tiroir de navigation principal -->
+      <v-navigation-drawer
+        v-model="isMenuOpen"
+        app
+        temporary
+      >
+        <v-list nav dense>
+          <v-list-item
+            v-if="isSubMenu"
+            class="menuItem back-item"
+            @click="onBackItemClick"
+          >
+            <v-list-item-title>
+              <v-icon icon="fas fa-caret-left" class="mr-1"/> Retour
+            </v-list-item-title>
+          </v-list-item>
+
+          <v-list-item
+            v-for="(item, index) in activeMenu"
+            :key="item.label"
+            :to="item.to"
+            class="menuItem"
+            @click="onMenuItemClick(index, item)"
+          >
+            <v-list-item-title class="d-flex flex-row w-100">
+              <span class="flex-grow-1">
+                {{ item.label }}
+              </span>
+              <span v-if="item.children?.length! > 0">
+                <v-icon icon="fa fa-angle-right" />
+              </span>
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-navigation-drawer>
+    </v-app>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AgendaLink from "~/components/Common/AgendaLink.vue";
+import type { PropType } from "@vue/runtime-core";
+import type { MainMenuItem } from "~/types/interface";
+import { useDisplay } from "vuetify";
+
+const { smAndUp } = useDisplay()
+
+const props = defineProps({
+  menu: {
+    type: Array as PropType<Array<MainMenuItem>>
+  }
+})
+
+const isMenuOpen: Ref<boolean> = ref(false);
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value;
+};
+
+const activeMenuIndex: Ref<number | null> = ref(null)
+
+const activeMenu = computed(() =>
+  activeMenuIndex.value !== null ? props.menu![activeMenuIndex.value].children : props.menu
+)
+
+/**
+ * Determines if the is active menu is a sub-menu .
+ *
+ * @function isSubMenu
+ * @returns {boolean} - True if a sub-menu is active, otherwise false.
+ */
+const isSubMenu = computed(() => activeMenuIndex.value !== null)
+
+/**
+ * Handles the click event on a menu item.
+ *
+ * @param {number} index - The index of the clicked menu item.
+ * @param {MainMenuItem} item - The clicked menu item.
+ * @returns {void}
+ */
+const onMenuItemClick = (index: number, item: MainMenuItem): void => {
+  if (!item.children) {
+    return
+  }
+  withAnimation(() => activeMenuIndex.value = index)
+}
+
+/**
+ * Function to handle back button click event.
+ */
+const onBackItemClick = (): void => {
+  withAnimation(() => activeMenuIndex.value = null)
+}
+
+/**
+ * Déclenche une animation de changement de menu en fermant et rouvrant le drawer
+ * @param callback
+ */
+const withAnimation = (callback: () => void) => {
+  isMenuOpen.value = false
+  callback()
+  setTimeout(() => {isMenuOpen.value = true}, 85)
+}
+</script>
+
+<style scoped lang="scss">
+.app-container {
+  height: 54px;
+}
+
+.navigation-sm {
+  background-color: var(--neutral-color);
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+}
+
+.logo-md {
+  width: 150px;
+  height: 50px;
+
+  @media (max-width: 600px) {
+    width: 50px;
+  }
+}
+
+.back-item {
+  border-bottom: solid 1px var(--on-neutral-color-light);
+  border-radius: 0;
+
+  .v-list-item-title {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.icon {
+  color: var(--on-neutral-color-light);
+}
+</style>

components/Layout/UI/Title.vue

@@ -17,5 +17,12 @@
     font-size: 3rem;
     line-height: 3rem;
     margin-left: 1rem;
+
+    @media (max-width: 600px) {
+      font-size: 2rem;
+      line-height: 2rem;
+      margin-left: 12px;
+      width: 100%;
+    }
   }
 </style>

components/Layout/UI/TitlePage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-4">
+  <div :class="'mb-4' + mdAndDown ? ' mt-12' : ''">
     <h1>
       <slot />
     </h1>
@@ -9,6 +9,12 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import { useDisplay } from "vuetify";
+
+const { mdAndDown } = useDisplay()
+</script>
+
 <style scoped lang="scss">
 h1, h2 {
   text-align: center;
@@ -31,7 +37,7 @@ h2 {
   margin-right: 1rem;
 }
 
-@media (max-width: 960px) {
+@media (max-width: 1240px) {
   h1 {
     font-size: 2rem;
     line-height: 2.5rem;
@@ -43,4 +49,23 @@ h2 {
   }
 }
 
+@media (max-width: 600px) {
+
+  h1, h2 {
+    width: 80%;
+    margin: auto
+  }
+
+  h1 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+    margin-bottom: 18px;
+  }
+
+  h2 {
+    letter-spacing: 0.1rem;
+    font-size: 1.2rem;
+  }
+}
+
 </style>

components/Logiciels/Artist/Abonnement.vue

@@ -1,57 +1,16 @@
 <template>
   <AnchoredSection id="subscription">
     <LayoutContainer>
-      <v-row class="mt-12 center-90">
-        <v-col cols="4">
-          <LayoutUISubTitle>
-            S'abonner dès maintenant
-          </LayoutUISubTitle>
-
-          <div class="profile-circle">
-            <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png" />
-          </div>
-
-          <div class="subscription-info">
-            <p class="mt-3 mb-6">
-              Pour vous abonner au logiciel, téléchargez et remplissez le
-              formulaire avant de nous le transmettre
-            </p>
-            <a
-              href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf"
-              target="_blank"
-              class="download-button"
-              >
-              Télécharger le formulaire d'abonnement
-            </a>
-          </div>
+      <LayoutUISubTitle>
+        S'abonner dès maintenant
+      </LayoutUISubTitle>
 
-          <div class="subscription-steps">
-            <ol>
-              <li class="mt-6">
-                Téléchargez le formulaire
-              </li>
-              <li>
-                Complétez le formulaire
-              </li>
-              <li>
-                Joignez le règlement par chèque avec le formulaire à <br />
-                <p class="pa-3">
-                  2iOPENService <br />
-                  217 rue Raoul Follereau <br />
-                  74300 CLUSES
-                </p>
-              </li>
-              <li>
-                Après réception de votre formulaire d'adhésion et de votre
-                règlement, nous vous ouvrons le service choisi. Vous recevrez
-                alors un mail avec votre identifiant de connexion, votre mot de
-                passe, ainsi que l'URL de votre site internet.
-              </li>
-            </ol>
-          </div>
+      <v-row class="mt-12 center-90">
+        <v-col v-if="lgAndUp" cols="4" class="col-1">
+          <LogicielsArtistAbonnementToSubscribe />
         </v-col>
 
-        <v-col cols="8">
+        <v-col cols="12" lg="8" class="col-2">
           <h3>
             Opentalent Artist, <br> la solution que vous attendiez...
           </h3>
@@ -64,16 +23,26 @@
             vos besoins d'évolution !
           </p>
 
+          <LogicielsArtistAbonnementToSubscribe v-if="mdAndDown" />
+
           <p class="cmf">
-            Adhérents CMF ? <br> Et si on vous disait que vous l’aviez déjà ...
+            Adhérents CMF ? <br> Et si on vous disait que vous l’aviez déjà&nbsp;...
           </p>
 
           <div class="border-row">
             <nuxt-link href="https://www.cmf-musique.org/" target="_blank">
               <v-img
-                src="/images/logiciels/school/cmf_logo_orange.png"
+                v-if="lgAndUp"
+                src="/images/logo/logo-cmf-petit.png"
+                class="logo-cmf"
+              />
+              <v-img
+                v-else
+                src="/images/logo/logo-cmf.png"
                 class="logo-cmf"
               />
+
+
             </nuxt-link>
 
             <div class="cmf-container">
@@ -95,69 +64,41 @@
 
 <script setup>
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { useDisplay } from "vuetify";
+
+const { mdAndDown, lgAndUp } = useDisplay()
 </script>
 
 <style scoped lang="scss">
-.subscription-steps ol {
-  list-style-type: decimal;
-  padding-left: 2rem;
-  color: var(--on-neutral-color);
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 20px;
-  margin-left: 3rem;
-  width: 20rem;
-}
-
-.profile-circle {
-  top: 0.5rem;
-  width: 100px;
-  height: 100px;
-  position: relative;
-  background-color: var(--on-neutral-color);
-  border-radius: 50%;
-  margin-left: 11rem;
-}
 
-.subscription-info {
-  margin-left: 4rem;
-  background: var(--secondary-color);
-  border-radius: 10px;
-  height: 15rem;
-  width: 20rem;
-  padding: 1rem;
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: var(--on-secondary-color);
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 300;
-  line-height: 18px;
-}
-
-.download-button {
-  font-weight: 700;
-  background-color: var(--on-neutral-color);
-  color: var(--neutral-color);
-  padding: 10px 20px;
-  border-radius: 5px;
-  text-decoration: none;
-  display: inline-block;
+@media (max-width: 1240px) {
+  .col-1 {
+    order: 2
+  }
+  .col-2 {
+    order: 1
+  }
 }
 
 .solution {
   width: 45rem;
-  text-align: justify
+  text-align: justify;
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 }
 
 h3 {
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   margin-bottom: 4rem;
   font-size: 42px;
   font-weight: 600;
   line-height: 42px;
+
+  @media (max-width: 600px) {
+    font-size: 32px;
+  }
 }
 
 .cmf-container {
@@ -165,12 +106,22 @@ h3 {
   margin-bottom: 4rem;
 
   p {
-    color: var(--on-primary-color);
+    color: var(--on-neutral-color);
     width: 25rem;
     font-weight: 300;
     font-size: 16px;
     line-height: 20px;
     margin-left: 2rem;
+
+    @media (max-width: 1240px) {
+      margin-left: auto;
+      margin-right: auto;
+      width: 90%;
+    }
+  }
+
+  @media (max-width: 1240px) {
+    margin-top: 1rem;
   }
 }
 
@@ -181,15 +132,25 @@ h3 {
   background-size: contain;
   width: 15rem;
   height: 10rem;
+
+  @media (max-width: 1240px) {
+    margin-left: auto;
+    margin-right: auto;
+    width: 90%;
+  }
 }
 
 .cmf {
   margin-top: 3rem;
   margin-bottom: 2rem;
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   width: 40rem;
   font-size: 34px;
   font-weight: 400;
   line-height: 38px;
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
 }
 </style>

components/Logiciels/Artist/Abonnement/ToSubscribe.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="profile-circle">
+    <v-img src="/images/logo/logiciels/OT_Artist-BLANC.png" />
+  </div>
+
+  <div class="subscription-info">
+    <p class="mt-3 mb-6">
+      Pour vous abonner au logiciel, téléchargez et remplissez le
+      formulaire avant de nous le transmettre
+    </p>
+    <a
+      href="https://www.opentalent.fr/fileadmin/stockage/commercial/contrats/BDC_Artist_Public-23.pdf"
+      target="_blank"
+      class="download-button"
+    >
+      Télécharger le formulaire d'abonnement
+    </a>
+  </div>
+
+  <div class="subscription-steps">
+    <ol>
+      <li class="mt-6">
+        Téléchargez le formulaire
+      </li>
+      <li>
+        Complétez le formulaire
+      </li>
+      <li>
+        Joignez le règlement par chèque avec le formulaire à <br />
+        <p class="pa-3">
+          2iOPENService <br />
+          217 rue Raoul Follereau <br />
+          74300 CLUSES
+        </p>
+      </li>
+      <li>
+        Après réception de votre formulaire d'adhésion et de votre
+        règlement, nous vous ouvrons le service choisi. Vous recevrez
+        alors un mail avec votre identifiant de connexion, votre mot de
+        passe, ainsi que l'URL de votre site internet.
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+.profile-circle {
+  top: 3rem;
+  width: 100px;
+  height: 100px;
+  position: relative;
+  background-color: var(--on-neutral-color);
+  border-radius: 50%;
+  margin-left: 11rem;
+
+  @media (max-width: 1240px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.subscription-info {
+  margin-left: 4rem;
+  background: var(--secondary-color);
+  border-radius: 10px;
+  height: 15rem;
+  width: 20rem;
+  padding: 1rem;
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  color: var(--on-secondary-color);
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 18px;
+
+  @media (max-width: 1240px) {
+    width: 80%;
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.download-button {
+  font-weight: 700;
+  background-color: var(--on-neutral-color);
+  color: var(--neutral-color);
+  padding: 10px 20px;
+  border-radius: 5px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.subscription-steps ol {
+  list-style-type: decimal;
+  padding-left: 2rem;
+  color: var(--on-neutral-color);
+  font-size: 16px;
+  font-weight: 300;
+  line-height: 20px;
+  margin-left: 3rem;
+  width: 20rem;
+
+  @media (max-width: 1240px) {
+    width: 80%;
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>

components/Logiciels/Artist/Comparatif.vue

@@ -93,8 +93,9 @@ const comparisonItems: Array<ComparisonItem> = [
 
 <style scoped>
 
-.v-container{
+.v-container {
   width: 95%;
   margin-right: auto;
   margin-left: auto;
-}</style>
+}
+</style>

components/Logiciels/Artist/Formations.vue

@@ -10,16 +10,16 @@
           </v-row>
 
           <v-row class="formation py-12 align-center mb-12" no-gutters>
-            <v-col cols="12" lg="6">
+            <v-col cols="12" lg="4">
               <v-img src="/images/logiciels/artist/webinaire.jpg" class="meeting-img" />
             </v-col>
 
-            <v-col cols="12" lg="6" md="6" sm="6">
-              <h3 class="ml-6 mr-12">
+            <v-col cols="12" lg="6">
+              <h3>
                 Webinaire - Partez à la découverte du logiciel Opentalent Artist
               </h3>
 
-              <p class="details ml-6 mr-12" >
+              <p class="details" >
                 Rejoignez notre webinaire, spécialement conçu pour les
                 professionnels du secteur culturel, orchestres, chorales,
                 compagnies de danse, ainsi que les troupes de théâtre et de
@@ -32,7 +32,7 @@
               </p>
 
               <nuxt-link to="/webinaires">
-                <v-btn class="mt-12 ml-6">
+                <v-btn>
                   S'inscrire à nos webinaires
                 </v-btn>
               </nuxt-link>
@@ -64,6 +64,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     background-position: center;
     background-size: cover;
     border-radius: 10%;
+
+    @media (max-width: 1240px) {
+      margin: 0 auto;
+    }
   }
 
   :deep(.v-img img) {
@@ -83,7 +87,15 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     font-size: 1rem;
     line-height: 1.5rem;
     color: var(--on-primary-color);
-    text-align: justify
+    text-align: justify;
+
+    @media (max-width: 1240px) {
+      margin-right: 24px !important;
+    }
+
+    @media (max-width: 600px) {
+      margin-right: auto !important;
+    }
   }
 
   .v-btn {
@@ -96,6 +108,23 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     border-color: var(--on-primary-color);
     border-radius: 0.5rem;
     width: 90%;
+    margin: 24px auto;
+  }
+
+  .v-col-12:nth-child(2) {
+    @media (min-width: 1240px) {
+      padding: 24px 64px;
+    }
+    @media (max-width: 1240px) {
+      margin: 24px 5%;
+      max-width: 90%;
+    }
+
+    a {
+      display: flex;
+      width: 100%;
+      text-decoration: none;
+    }
   }
 }
 </style>

components/Logiciels/Artist/SomeNumbers.vue

@@ -9,7 +9,7 @@
     <v-container>
       <v-row class="card-container mb-12">
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center small-padding"
         >
           <CommonCardStat
@@ -18,14 +18,14 @@
           />
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col lg="3" class="d-flex justify-center align-center">
           <CommonCardStat
             number="3 424"
             text="Structures"
           />
         </v-col>
 
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col lg="3" class="d-flex justify-center align-center">
           <CommonCardStat
             number="13"
             text="Années d'expérience"

components/Logiciels/Manager/Formation.vue

@@ -10,7 +10,7 @@
 
         <v-row class="formation pb-6 align-center">
           <v-col
-            cols="6"
+            md="6"
             v-for="(formation, index) in formations"
             :key="index"
           >

components/Logiciels/Manager/Network.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="network">
     <LayoutContainer>
-      <v-row class="mt-12  center-90">
+      <v-row class="mt-12 center-90">
         <LayoutUISubTitle>
           Un réseau pyramidal
         </LayoutUISubTitle>
@@ -45,5 +45,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   font-weight: 400;
   line-height: 2.375rem;
   width: 40rem;
+  max-width: 90%;
 }
 </style>

components/Logiciels/Manager/SomeNumbers.vue

@@ -9,7 +9,7 @@
     <v-container>
       <v-row class="card-container justify-center mb-12">
         <v-col
-          cols="3"
+          md="3"
           class="d-flex justify-center align-center small-padding"
         >
           <CommonCardStat
@@ -17,13 +17,13 @@
             text="Structures en réseau"
           />
         </v-col>
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col md="3" class="d-flex justify-center align-center">
           <CommonCardStat
             number="300 000"
             text="Utilisateurs"
           />
         </v-col>
-        <v-col cols="3" class="d-flex justify-center align-center">
+        <v-col md="3" class="d-flex justify-center align-center">
           <CommonCardStat
             number="12"
             text="Années de collaboration"

components/Logiciels/School/Contact.vue

@@ -3,15 +3,19 @@
     <LayoutContainer>
       <!-- Section "Appelez nous" -->
       <v-row>
-        <v-col cols="6">
+        <LayoutUISubTitle v-if="smAndDown">
+          Contactez-nous
+        </LayoutUISubTitle>
+
+        <v-col cols="12" md="6">
           <v-img
             src="/images/contact/contact.jpg"
             class="help-img"
           />
         </v-col>
 
-        <v-col cols="5">
-          <LayoutUISubTitle>
+        <v-col cols="12" lg="5">
+          <LayoutUISubTitle v-if="mdAndUp">
             Contactez-nous
           </LayoutUISubTitle>
 
@@ -39,7 +43,7 @@
 
       <!-- Section "Adhérent CMF" -->
       <v-row class="center-90" >
-        <v-col cols="6" >
+        <v-col cols="12" lg="6" >
           <LayoutUISubTitle>
             Adhérents CMF
           </LayoutUISubTitle>
@@ -71,12 +75,12 @@
               target="_blank"
               class="btn-contact"
             >
-              Je souhaite obtenir mon code d'accès
+              Obtenir mon code d'accès
             </v-btn>
           </div>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="12" md="6">
            <v-img
              src="/images/logiciels/school/CMF-vivre_la_musique_ensemble.jpg"
              class="logo-cmf mt-12"
@@ -88,6 +92,10 @@
 </template>
 <script setup>
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { useDisplay } from "vuetify";
+
+const { smAndDown, mdAndUp } = useDisplay()
+
 </script>
 
 <style scoped>
@@ -103,6 +111,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   background-size: contain;
   width: 80%;
   height: 100%;
+
+  @media (max-width: 600px) {
+    margin: 0 auto !important;
+  }
 }
 
 .btn-contact {
@@ -113,13 +125,14 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   color: var(--on-secondary-color);
   padding: 19px 28px;
   gap: 9px;
+  max-width: 90%;
 }
 
 .subtitle {
   font-weight: 400;
   font-size: 34px;
   line-height: 38px;
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   margin-bottom: 2rem;
 }
 
@@ -127,13 +140,19 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   text-align: justify;
 }
 
-@media (max-width: 1600px) {
+@media (max-width: 1600px) and (min-width: 600px) {
   .contact-details {
     width: 30rem !important;
   }
 }
+
+@media (max-width: 600px) {
+  .contact-details {
+    width: 90%;
+  }
+}
 </style>

components/Logiciels/School/Formations.vue

@@ -10,7 +10,8 @@
 
         <v-row class="formation pb-6 align-center">
           <v-col
-            cols="6"
+            cols="12"
+            md="6"
             v-for="(formation, index) in formations"
             :key="index"
           >
@@ -131,5 +132,19 @@ const formations: Array<Formation> = [
     line-height: 1.5rem;
     color: var(--on-primary-color);
   }
+
+  @media (max-width: 600px) {
+    .v-btn {
+      height: 96px;
+    }
+
+    :deep(.v-btn__content) {
+      white-space: pre-wrap;
+      line-height: 1.2em;
+      padding: auto;
+      text-align: center;
+    }
+  }
+
 }
 </style>

components/Logiciels/School/SomeNumbers.vue

@@ -17,7 +17,7 @@
     <v-container>
       <v-row class="mb-12 card-container custom-row">
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center small-padding"
         >
           <CommonCardStat
@@ -26,7 +26,7 @@
           />
         </v-col>
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center"
         >
           <CommonCardStat
@@ -35,7 +35,7 @@
           />
         </v-col>
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center"
         >
           <CommonCardStat
@@ -44,7 +44,7 @@
           />
         </v-col>
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center"
         >
           <CommonCardStat

components/Logiciels/Title.vue

@@ -2,17 +2,17 @@
 <template>
   <LayoutContainer>
     <div class="container-title">
-      <v-col cols="3" class="lateral-text">
+      <v-col v-if="mdAndUp" cols="3" class="lateral-text">
         <span>
           <slot name="left-text"/>
         </span>
       </v-col>
-      <v-col cols="6">
+      <v-col cols="12" md="6">
         <h1>
           <slot />
         </h1>
       </v-col>
-      <v-col cols="3" class="lateral-text">
+      <v-col v-if="mdAndUp" cols="3" class="lateral-text">
         <span>
           <slot name="right-text" />
         </span>
@@ -21,6 +21,12 @@
   </LayoutContainer>
 </template>
 
+<script setup lang="ts">
+import { useDisplay } from "vuetify";
+
+const { mdAndUp } = useDisplay()
+</script>
+
 <style scoped lang="scss">
 .container-title {
   display: flex;
@@ -37,6 +43,11 @@ h1 {
   line-height: 77px;
   color: var(--on-neutral-color);
   text-align: center;
+
+  @media (max-width: 600px) {
+    font-size: 42px;
+    line-height: 46px;
+  }
 }
 
 .lateral-text {

components/News/Details.vue

@@ -40,11 +40,11 @@
           />
 
           <v-row class="center-90">
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <v-img :src="getImageUrl(newsItem.attachment)"/>
             </v-col>
 
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <h1>
                 {{ newsItem.title }}
               </h1>
@@ -68,7 +68,7 @@
             <p>
               MOTS CLÉS
             </p>
-            <div>
+            <div v-if="mdAndUp">
               <p>PARTAGER</p>
             </div>
           </v-row>
@@ -80,8 +80,13 @@
               </span>
             </p>
 
-            <CommonShare />
+            <CommonShare v-if="mdAndUp" />
           </v-row>
+
+          <div v-if="smAndDown" class="center-90">
+            <p>PARTAGER</p>
+            <CommonShare />
+          </div>
         </div>
       </div>
     </div>
@@ -93,6 +98,9 @@
 <script setup lang="ts">
 import { useEntityFetch } from "~/composables/data/useEntityFetch";
 import News from "~/models/Maestro/News";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp, smAndDown } = useDisplay()
 
 const route = useRoute();
 const { fetch } = useEntityFetch()
@@ -127,6 +135,10 @@ const getImageUrl = (attachment: string): string | null => {
     text-transform: uppercase;
     font-size: 36px;
     font-weight: 600;
+
+    @media (max-width: 600px) {
+      margin-top: 3rem;
+    }
   }
 
   .description {

components/News/List.vue

@@ -24,7 +24,7 @@
         <v-card-item>
           <v-container fluid>
             <v-row align="center">
-              <v-col cols="3">
+              <v-col cols="12" md="3">
                 <v-img
                   v-if="newsItem.attachment"
                   :src="getImageUrl(newsItem.attachment)"
@@ -34,7 +34,7 @@
                 />
               </v-col>
 
-              <v-col cols="9">
+              <v-col cols="12" md="9">
                 <div class="details">
                   <NuxtLink
                     :to="`/actualites/${newsItem.id}`"
@@ -146,6 +146,10 @@ h1 {
   font-size: 4rem;
   font-weight: 600;
   line-height: 42px;
+
+  @media (max-width: 600px) {
+    font-size: 2.5rem;
+  }
 }
 
 .news {
@@ -181,6 +185,11 @@ h1 {
     border-radius: 20px;
     width: 99%;
 
+    @media (max-width: 600px) {
+      width: 94%;
+      margin: 12px 3%;
+    }
+
     .v-card-title {
       color: var(--neutral-color);
       font-size: 36px;

components/Webinaire/Catalogue.vue

@@ -24,7 +24,8 @@
         <v-col
           v-for="(course, index) in courses"
           :key="index"
-          cols="4"
+          cols="12"
+          md="4"
         >
           <v-card class="mb-4">
             <v-card-text>
@@ -343,7 +344,10 @@ const closeModal = () => {
     color: var(--primary-color);
     margin-top: 1rem;
     margin-bottom: 0.5rem;
-    height: 5rem;
+
+    @media (min-width: 600px) {
+      height: 5rem;
+    }
   }
 
   .objectives, .program {
@@ -354,7 +358,10 @@ const closeModal = () => {
     margin-bottom: 1rem;
     border-radius: 1rem;
     padding: 1rem 1rem 1rem 1.5rem;
-    height: 11rem;
+
+    @media (min-width: 600px) {
+      height: 11rem;
+    }
 
     h6 {
       font-weight: 500;

pages/CGV.vue

@@ -766,7 +766,6 @@
       </v-col>
     </v-row>
   </v-container>
-  <LayoutFooter />
 </template>
 
 <style scoped lang="scss">

pages/formations.vue

@@ -20,7 +20,7 @@
     </template>
   </CommonBanner>
 
-  <CommonMenuScroll :menus="menus" class="mb-6" />
+  <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
   <CommonActionMenu />
 

pages/index.vue

@@ -6,12 +6,12 @@
 
   <CommonActionMenu />
 
-  <LayoutUITitlePage :class="mdAndDown ? 'mt-12' : ''">
+  <LayoutUITitlePage>
     LOGICIELS CULTURELS
     <template #subtitle>UNE GAMME DE LOGICIELS ADAPTÉE À CHAQUE STRUCTURE CULTURELLE</template>
   </LayoutUITitlePage>
 
-  <HomeCaroussel v-if="mdAndUp"/>
+  <HomeCaroussel />
 
   <HomePromotion />
 
@@ -27,7 +27,7 @@
 
   <HomeHelp />
 
-  <LayoutFooterPrefooter v-if="lgAndUp" />
+  <LayoutFooterPrefooter />
 </template>
 
 <script setup>

pages/opentalent_artist.vue

@@ -20,7 +20,7 @@
       logo-src="/images/logo/logiciels/Artist-noir.png"
     />
 
-    <CommonMenuScroll :menus="menus" class="mb-6" />
+    <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
     <LogicielsArtistPresentation />
 
@@ -49,7 +49,7 @@ import { ActionMenuItemType } from "~/types/enum/layout";
 import type { MenuScroll, ActionMenuItem } from "~/types/interface";
 import { useDisplay } from "vuetify";
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = [
   { anchor: "presentation", label: "Présentation" },

pages/opentalent_manager.vue

@@ -18,7 +18,7 @@
       logoSrc="/images/logo/logiciels/Manager-noir.png"
     />
 
-    <CommonMenuScroll :menus="menus" class="mb-6" />
+    <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
     <CommonActionMenu :actions="stickyMenuActions" />
 
@@ -47,7 +47,7 @@ import type { MenuScroll, ActionMenuItem } from "~/types/interface";
 import { ActionMenuItemType } from "~/types/enum/layout";
 import { useDisplay } from "vuetify";
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = ref([
   { anchor: "presentation", label: "Présentation" },

pages/opentalent_school.vue

@@ -19,7 +19,7 @@
       :logo-alt-theme="true"
     />
 
-    <CommonMenuScroll :menus="menus" class="mb-6" />
+    <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
     <CommonActionMenu :actions="stickyMenuActions" />
 
@@ -50,7 +50,7 @@ import type { MenuScroll, ActionMenuItem } from "~/types/interface";
 import { ActionMenuItemType } from "~/types/enum/layout";
 import { useDisplay } from "vuetify";
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = [
   { anchor: "presentation", label: "Présentation" },

pages/qui-sommes-nous.vue

@@ -17,7 +17,7 @@
     imageAlt="banner"
   />
 
-  <CommonMenuScroll :menus="menus" class="mb-6" />
+  <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
   <CommonActionMenu />
 

types/interface.d.ts

@@ -17,6 +17,7 @@ interface MainMenuItem {
 interface CarouselItem {
   logo: string,
   description: string,
+  descriptionSm: string,
   buttonClass: string,
   image: string,
   color: string,