various fixes

assets/style/theme.scss

@@ -12,6 +12,7 @@ body {
   --secondary-color-light: #c6eaeb;
   --on-secondary-color: #262626;
   --neutral-color-alt: #dbdbdb;
+  --neutral-color-alt-light: #f2f2f2;
   --neutral-color-alt-strong: #999999;
   --on-neutral-color-alt: #000000;
 

components/About/Chronologie.vue

@@ -3,13 +3,13 @@
     <LayoutContainer class="alt-theme">
       <v-container>
         <v-row class="mb-6 mt-6 center-90">
-          <v-col cols="6">
+          <v-col cols="12" md="6">
             <LayoutUISubTitle>
               Découvrez toute notre histoire
             </LayoutUISubTitle>
           </v-col>
 
-          <v-col cols="6">
+          <v-col cols="12" md="6">
             <div class="carousel-controls">
               <v-btn icon="fas fa-chevron-left" @click="goPrevious" />
               <v-btn icon="fas fa-chevron-right" @click="goNext" />
@@ -174,7 +174,7 @@ const slides: Array<ChronologyItem> = [
     year: '',
     title: 'LE FUTUR AVEC VOUS... ',
     description:
-      "Opentalent, plus qu'une gamme de logiciels ou un agenda culturel, c'est une aventure collective. Ensemble, poursuivons cette quête d'innovation et de partage culturel. <br> Rejoignez-nous dans cette aventure passionnante et façonnons l'avenir de la culture. <br> <strong> Opentalent, c'est vous ! </strong>",
+      "Opentalent, plus qu'une gamme de logiciels ou un agenda culturel, c'est une aventure collective. Ensemble, poursuivons cette quête d'innovation et de partage culturel. <br> Rejoignez-nous dans cette aventure passionnante et façonnons l'avenir de la culture. <br><br> <strong> OPENTALENT, C'EST VOUS ! </strong>",
     imageUrl:
       '/images/pages/qui-sommes-nous/chronologie/10-Opentalent_ensemble_construisons_notre_futur.jpg',
   },
@@ -307,6 +307,16 @@ const slides: Array<ChronologyItem> = [
 
     @media (max-width: 700px) {
       padding: 1rem 0;
+
+      h4 {
+        font-size: 1.6rem;
+        text-align: left;
+        padding: 1rem;
+      }
+
+      p {
+        text-align: justify;
+      }
     }
 
     @media (max-width: 600px) {

components/About/Logiciels.vue

@@ -23,8 +23,8 @@
             </li>
           </ul>
 
-          <p class="text-justify mr-4 ml-6 mt-6">
-            À chaque logiciel sa spécificité !
+          <p class="text-justify mr-4 mt-6">
+            <b>À chaque logiciel sa spécificité !</b>
           </p>
         </v-col>
 
@@ -150,7 +150,7 @@ li:before {
   width: 100%;
   height: 370px;
   z-index: 0;
-  border-radius: 12px;
+  border-radius: 12px 12px 0 12px;
 
   footer {
     position: absolute;
@@ -171,13 +171,15 @@ li:before {
   }
 
   .plus-button {
-    width: 80px;
-    height: 80px;
+    width: 100px;
+    height: 100px;
     border-radius: 50% 0 0 0;
     background: var(--primary-color);
     color: var(--on-primary-color);
     box-shadow: none !important;
     border-top-left-radius: 10% !important;
+    margin-right: -10px;
+    margin-bottom: -10px;
 
     .v-icon {
       color: var(--on-primary-color);
@@ -186,6 +188,16 @@ li:before {
   }
 }
 
+.container-image::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
 .artist .plus-button {
   background: var(--artist-color);
 }

components/About/Presentation.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="about">
     <LayoutContainer>
-      <v-row class="my-12 center-90">
+      <v-row class="my-4 center-90">
         <v-col cols="12">
           <LayoutUISubTitle> Qui sommes-nous ? </LayoutUISubTitle>
         </v-col>
       </v-row>
 
-      <v-row class="my-12 center-90">
+      <v-row class="my-6 center-90">
         <v-col cols="12">
           <div class="italic-title">
             “Imaginé par des musiciens pour des musiciens, Opentalent se veut
@@ -94,7 +94,7 @@ import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
   margin-right: auto;
 
   .v-col-12 {
-    padding: 0 5%;
+    padding: 16px 5%;
   }
 
   .v-img {

components/About/Valeurs.vue

@@ -112,7 +112,7 @@ const values: Array<Array<SocietyValue>> = [
     margin-bottom: 1rem;
 
     @media (max-width: 600px) {
-      margin-left: auto;
+      margin-left: 0;
       margin-right: auto;
     }
   }

components/Common/Banner.vue

@@ -90,6 +90,7 @@ const onIntersect = (isIntersecting: boolean) => {
   overflow: hidden;
   min-height: 400px;
   max-height: 400px;
+
   .image-text {
     position: absolute;
     top: 40px;
@@ -101,6 +102,10 @@ const onIntersect = (isIntersecting: boolean) => {
     font-weight: 300;
     line-height: 40px;
   }
+
+  @media (max-width: 600px) {
+    min-height: 0;
+  }
 }
 
 .cover-image {

components/Common/Carousel/Fonctionnalite.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutContainer>
     <v-row class="center-90">
-      <v-col cols="6">
+      <v-col cols="12" md="6">
         <LayoutUISubTitle>
           Découvrez toutes les fonctionnalités de notre solution
         </LayoutUISubTitle>
@@ -11,14 +11,14 @@
         </LayoutUITitle>
       </v-col>
 
-      <v-col cols="12" md="6" class="d-flex align-center justify-start">
+      <v-col cols="12" md="6" class="arrows">
         <v-btn icon="fas fa-chevron-left" @click="previousAction" />
         <v-btn icon="fas fa-chevron-right" @click="nextAction" />
       </v-col>
     </v-row>
 
     <v-row>
-      <v-col cols="12" md="12">
+      <v-col cols="12">
         <Carousel
           ref="carousel"
           :items-to-show="itemsToShow"
@@ -92,6 +92,10 @@ const previousAction = () => {
 </script>
 
 <style scoped lang="scss">
+h5 {
+  text-align: center;
+}
+
 .v-row {
   width: 95%;
   margin-left: auto;
@@ -160,6 +164,7 @@ const previousAction = () => {
   .footer {
     position: absolute;
     left: 0;
+    bottom: 1rem;
     margin-left: 1.3rem;
     font-size: 0.9rem;
 
@@ -169,30 +174,14 @@ const previousAction = () => {
   }
 }
 
-//@media (min-width: 1300px) and (max-width: 1800px){
-//  .v-card{
-//    min-height: 480px !important;
-//    max-height: 480px !important;
-//    min-width: 230px !important;
-//    max-width: 230px !important;
-//  }
-//}
-//
-//@media (min-width: 1500px) and (max-width: 1800px){
-//  .v-card{
-//    min-height: 420px !important;
-//    max-height: 420px !important;
-//    min-width: 260px !important;
-//    max-width: 260px !important;
-//  }
-//}
-//
-//@media (min-width: 1800px){
-//  .v-card{
-//    min-height: 400px !important;
-//    max-height: 400px !important;
-//    min-width: 300px !important;
-//    max-width: 300px !important;
-//  }
-//}
+.arrows {
+  display: flex;
+  align-content: center;
+  justify-content: end;
+
+  @media (max-width: 600px) {
+    justify-content: center;
+  }
+}
+
 </style>

components/Common/Contact.vue

@@ -20,7 +20,6 @@
           <LayoutUITitle> Vous avez un projet ? </LayoutUITitle>
 
           <div class="px-6">
-            <h6 class="subtitle">N'attendez plus, appelez-nous !</h6>
             <p class="contact-details">
               Vous avez une identité, des besoins, des projets... On est là pour
               vous écouter et vous offrir une offre personnalisée ! Que vous
@@ -45,7 +44,11 @@
           <LayoutUITitle> Bénéficiez de conditions privilégiées </LayoutUITitle>
 
           <div class="pl-4">
-            <h6 class="subtitle">N'attendez plus, appelez-nous</h6>
+            <v-img v-if="mdAndDown"
+              src="/images/logos/cmf/Logo_Confederation_Musicale_de_France-CMF_vivre_la_musique_ensemble.jpg"
+              alt="Logo Confédération Musicale de France - CMF avec son slogan : vivre la musique ensemble"
+              class="logo-cmf my-6"
+            />
 
             <p class="contact-details">
               Si votre établissement d’enseignement artistique est adhérent à la
@@ -70,7 +73,7 @@
           </div>
         </v-col>
 
-        <v-col cols="12" md="6">
+        <v-col v-if="mdAndUp" cols="12" md="6">
           <v-img
             src="/images/logos/cmf/Logo_Confederation_Musicale_de_France-CMF_vivre_la_musique_ensemble.jpg"
             alt="Logo Confédération Musicale de France - CMF avec son slogan : vivre la musique ensemble"
@@ -134,6 +137,7 @@ const { smAndDown, mdAndDown, mdAndUp } = useDisplay()
   line-height: 20px;
   color: var(--on-neutral-color);
   max-width: 80%;
+
 }
 
 @media (max-width: 1240px) {
@@ -158,7 +162,9 @@ const { smAndDown, mdAndDown, mdAndUp } = useDisplay()
 
 @media (max-width: 600px) {
   .contact-details {
-    width: 90%;
+    max-width: 100%;
+    width: 100%;
+    text-align: justify;
   }
 }
 </style>

components/Common/Presentation.vue

@@ -148,7 +148,7 @@ defineProps({
   .logo-circle {
     background-color: #0e2d32;
     border-radius: 3rem;
-    width: 7rem;
+    width: 6rem;
     height: 6rem;
   }
 
@@ -156,8 +156,8 @@ defineProps({
     display: flex;
     align-items: center;
     justify-content: center;
-    top: 1rem;
-    right: 0.5rem;
+    top: 1.3rem;
+    right: 0.7rem;
   }
 
   .details {

components/Common/ReviewSection.vue

@@ -148,10 +148,18 @@ const goNext = () => {
       max-width: 70%;
       margin: 0 auto 48px auto;
     }
+
+    @media (max-width: 600px) {
+      height: auto;
+    }
   }
 
   .v-card-item {
     flex: 1;
+
+    @media (max-width: 600px) {
+      flex: 0;
+    }
   }
 
   .v-card-text {

components/Contact/Form.vue

@@ -268,8 +268,8 @@ const validateCity = (city: string | null) =>
 const validateEmail = (email: string | null) =>
   (!!email && /.+@.+\..+/.test(email)) || "L'adresse e-mail doit être valide"
 
-const validatePhone = (email: string | null) =>
-  (!!email && /^((\+|00)33\s?|0)[1-7]([\s.]?\d{2}){4}$/.test(email)) ||
+const validatePhone = (phone: string | null) =>
+  (!!phone && /^((\+|00)33\s?|0)[1-9]([\s.]?\d{2}){4}$/.test(phone)) ||
   'Le numéro de téléphone doit être valide'
 
 const validateStructureName = (structureName: string | null) =>

components/Contact/Map.vue

@@ -54,12 +54,12 @@
 
         <div class="d-flex flex-row mb-4">
           <v-icon icon="fa fa-phone" />
-          09.72.12.60.17
+          <a href="tel:+33972126017">09.72.12.60.17</a>
         </div>
 
         <div class="d-flex flex-row mb-4">
           <v-icon icon="far fa-envelope" />
-          contact@opentalent.fr
+          <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
         </div>
       </v-col>
     </v-row>
@@ -88,10 +88,9 @@ h4 {
   flex-direction: row;
   font-size: 40px;
   line-height: 95px;
+  margin-bottom: 1rem;
   align-items: center;
   font-weight: 100;
-  margin: 0 auto 1rem auto;
-  max-width: 1400px;
 
   @media (max-width: 600px) {
     font-size: 24px;
@@ -130,5 +129,9 @@ h4 {
     margin-right: 16px;
     opacity: 0.6;
   }
+
+  @media (max-width: 600px) {
+    order: -1
+  }
 }
 </style>

components/Formation/Catalogue.vue

@@ -92,7 +92,7 @@ const downloadPdf = (pdfUrl: string) => {
 const courses: Array<Training> = [
   {
     number: '01',
-    title: 'Formation initiale ',
+    title: 'Formation initiale',
     description:
       "Cette formation est destinée aux nouveaux utilisateurs. Elle est obligatoire lors de l'acquisition du logiciel. Elle est également utile lors d'un changement de personnel dans la structure. ",
     objectives: [
@@ -124,7 +124,7 @@ const courses: Array<Training> = [
         ],
       },
     ],
-    price: '1 674 € TTC',
+    price: '2 008,80€ TTC',
     downloadLink:
       'https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_2-jours.pdf',
   },
@@ -149,7 +149,7 @@ const courses: Array<Training> = [
         objectives: ['Répertoire'],
       },
     ],
-    price: '837€ TTC',
+    price: '1004,40€ TTC',
     downloadLink:
       'https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-School-2023-02_1-jour.pdf',
   },
@@ -175,7 +175,7 @@ const courses: Array<Training> = [
         objectives: ['Configuration côté logiciel'],
       },
     ],
-    price: '837€ TTC',
+    price: '1004,40€ TTC',
     downloadLink:
       ' https://www.opentalent.fr/fileadmin/stockage/stockage/support/programme/PF-Typo3-2023-02_1-jour.pdf',
   },
@@ -185,6 +185,11 @@ const courses: Array<Training> = [
 <style scoped lang="scss">
 .catalog {
   padding: 2rem;
+  background: var(--neutral-color-alt-light);
+
+  @media (max-width: 600px) {
+    padding: 0.5rem;
+  }
 
   .v-card {
     border: none !important;
@@ -245,14 +250,23 @@ const courses: Array<Training> = [
       font-size: 14px;
       line-height: 18px;
     }
+
+    @media (max-width: 600px) {
+      height: auto;
+    }
   }
 
   .badge-time {
     color: var(--primary-color);
+    background: var(--neutral-color);
     width: 100%;
+    height: 36px;
     text-align: center;
     font-size: 18px;
     font-weight: 500;
+    border-radius: 12px;
+    vertical-align: center;
+    padding-top: 6px;
   }
 
   .chip-register {

components/Formation/Certification.vue

@@ -59,7 +59,7 @@ ul {
   line-height: 20px;
   color: var(--primary-color);
   margin-top: 1rem;
-  margin-left: 14px;
+  margin-left: 22px;
 }
 
 .details-certifications {

components/Formation/Participation.vue

@@ -13,6 +13,7 @@
             src="/images/pages/formations/accessibilite/Formations_accessibles_a_tous.jpg"
             alt="Ordinateur avec un écran en visioconférence avec plusieurs personnes posé sur une table avec un pichet posé à côté"
             class="participation-img"
+            cover
           />
         </v-col>
 
@@ -101,15 +102,20 @@ h3 {
 
 .participation-img {
   position: relative;
-  width: 700px;
-  height: 550px;
   background-position: center;
   background-size: cover;
   border-radius: 10%;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: auto;
-  margin-right: auto;
+  width: 80%;
+  margin: 16px 20% 16px 0;
+}
+
+@media (max-width: 1240px) {
+  .v-img {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 </style>

components/Home/Caroussel.vue

@@ -206,6 +206,10 @@ const onIntersect = (isIntersecting: boolean) => {
 .col.presentation {
   padding-left: 7rem;
 
+  @media (max-width: 600px) {
+    padding-left: 0;
+  }
+
   .logo {
     width: 20rem;
     margin-top: 10px;

components/Home/EventAgenda.vue

@@ -4,9 +4,11 @@ Section "Agenda" de la page d'accueil
 <template>
   <LayoutContainer>
     <div class="container">
-      <LayoutUISectionTitle class="alt-theme bg-transparent">
-        L’agenda Opentalent
-      </LayoutUISectionTitle>
+      <div class="d-flex flex-row justify-center">
+        <h2 class="alt-theme bg-transparent">
+          L’agenda Opentalent
+        </h2>
+      </div>
 
       <div class="d-flex align-center justify-center">
         <h3>
@@ -60,6 +62,10 @@ const { lgAndUp } = useDisplay()
     url('/images/components/agenda/Opentalent_Agenda_événement_culturel.jpg')
       no-repeat center 60%;
   background-size: cover;
+
+  @media (max-width: 600px) {
+    height: auto;
+  }
 }
 
 h3 {

components/Home/Promotion.vue

@@ -253,10 +253,6 @@
       display: flex;
       align-items: center;
       justify-content: center;
-
-      @media (max-width: 600px) {
-        width: 90%;
-      }
     }
 
     > .v-col-12 {
@@ -274,6 +270,10 @@
       width: 50px;
       height: 50px;
       margin-right: 2rem;
+
+      @media (max-width: 600px) {
+        margin-right: 0;
+      }
     }
 
     p {

components/Home/Reviews.vue

@@ -262,7 +262,7 @@ const items: Ref<Array<{ src: string; alt: string }>> = ref([
 
 <style scoped>
 .container-1 {
-  background-color: var(--neutral-color);
+  background-color: var(--neutral-color-alt-light);
 
   @media (min-width: 1240px) {
     height: 22rem;

components/Home/Solution.vue

@@ -6,7 +6,7 @@ Section "Solutions" de la page d'accueil
   <LayoutContainer>
     <LayoutUISectionTitle class="alt-theme"> 3 solutions </LayoutUISectionTitle>
 
-    <h4 class="text-center">Trouvez la solution faite pour vous</h4>
+    <h4 class="text-center mb-4">Trouvez la solution faite pour vous</h4>
 
     <v-row class="solutions center-90">
       <v-col
@@ -349,6 +349,7 @@ h4 {
   p {
     text-align: right;
     font-size: 14px;
+    color: var(--on-primary-color);
 
     @media (max-width: 1240px) {
       font-size: 1.1rem;

components/JoinUs/Missions.vue

@@ -254,7 +254,7 @@ const onFormSubmit = () => {
   text-align: center;
   font-style: italic;
   font-weight: 300;
-  font-size: 34px;
+  font-size: 1.5rem;
   line-height: 40px;
   color: var(--primary-color);
   margin-bottom: 2rem;

components/Layout/Footer/Footer.vue

@@ -19,7 +19,7 @@
             <v-row>
               <v-col cols="3">
                 <v-row>
-                  <h5>Agenda culturel</h5>
+                  <h5>Agenda</h5>
                 </v-row>
                 <v-row>
                   <AgendaLink href="/annuaire"> Annuaire </AgendaLink>
@@ -35,7 +35,7 @@
               <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
               <v-col cols="3">
                 <v-row>
-                  <h5>Logiciels culturels</h5>
+                  <h5>Logiciels</h5>
                 </v-row>
                 <v-row>
                   <nuxt-link to="/opentalent_artist">

components/Layout/Navigation/Md.vue

@@ -11,11 +11,7 @@
           <nuxt-link to="/">
             <v-img
               class="logo-md"
-              :src="
-                smAndUp
-                  ? '/images/logos/opentalent/Logo_Opentalent-gris.png'
-                  : '/images/logos/opentalent/Logo_Opentalent_Griffe.png'
-              "
+              src="/images/logos/opentalent/Logo_Opentalent-gris.png"
             />
           </nuxt-link>
         </v-app-bar-title>
@@ -159,10 +155,6 @@ const withAnimation = (callback: () => void) => {
 .logo-md {
   width: 150px;
   height: 50px;
-
-  @media (max-width: 600px) {
-    width: 50px;
-  }
 }
 
 .back-item {

components/Layout/UI/SubTitle.vue

@@ -30,7 +30,7 @@ defineProps({
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-left: 10px;
+  margin-left: 4px;
   color: var(--primary-color);
   font-size: 10px;
   font-weight: 600;

components/Layout/UI/Title.vue

@@ -14,12 +14,10 @@ h3 {
   color: var(--on-neutral-color);
   font-weight: 600;
   font-size: 3rem;
-  line-height: 3rem;
   margin-left: 1rem;
 
   @media (max-width: 600px) {
     font-size: 2rem;
-    line-height: 2rem;
     margin-left: 1.5%;
     width: 97%;
   }

components/Layout/UI/TitlePage.vue

@@ -3,7 +3,7 @@
     <h1>
       <slot />
     </h1>
-    <h2>
+    <h2 v-if="mdAndUp">
       <slot name="subtitle" />
     </h2>
   </div>
@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { useDisplay } from 'vuetify'
 
-const { mdAndDown } = useDisplay()
+const { mdAndDown, mdAndUp } = useDisplay()
 </script>
 
 <style scoped lang="scss">

components/Logiciels/Artist/Abonnement.vue

@@ -4,7 +4,7 @@
       <v-row class="mt-12 center-90">
         <LayoutUISubTitle> S'abonner dès maintenant </LayoutUISubTitle>
 
-        <v-col v-if="lgAndUp" cols="4" class="col-1">
+        <v-col v-if="mdAndUp" cols="4" class="col-1">
           <LogicielsArtistAbonnementToSubscribe />
         </v-col>
 
@@ -29,16 +29,13 @@
             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">
+          <div class="adherent-warning">
+            <nuxt-link
+              href="https://www.cmf-musique.org/"
+              target="_blank"
+              class="logo-cmf-link"
+            >
               <v-img
-                v-if="lgAndUp"
-                src="/images/logos/cmf/logo-cmf-petit.png"
-                alt="Logo Confédération Musicale de France - CMF"
-                class="logo-cmf"
-              />
-              <v-img
-                v-else
                 src="/images/logos/cmf/Logo_Confederation_Musicale_de_France-CMF_vivre_la_musique_ensemble.jpg"
                 alt="Logo Confédération Musicale de France - CMF"
                 class="logo-cmf"
@@ -54,6 +51,16 @@
                 Contactez nous ou contactez votre fédération pour obtenir vos
                 codes d'accès.
               </p>
+
+              <div class="d-flex flex-row justify-center my-4">
+                <v-btn
+                  href="https://www.cmf-musique.org/contact/"
+                  target="_blank"
+                  class="btn-contact"
+                >
+                  Obtenir mon code d'accès
+                </v-btn>
+              </div>
             </div>
           </div>
         </v-col>
@@ -66,7 +73,7 @@
 import { useDisplay } from 'vuetify'
 import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
 
-const { mdAndDown, lgAndUp } = useDisplay()
+const { mdAndDown, mdAndUp, lgAndUp } = useDisplay()
 </script>
 
 <style scoped lang="scss">
@@ -151,4 +158,30 @@ h3 {
     width: 100%;
   }
 }
+
+.adherent-warning {
+  display: flex;
+  flex-direction: row;
+
+  .logo-cmf-link {
+    margin-top: auto;
+    margin-bottom: auto;
+    padding: 0 16px;
+    border-right: solid 2px var(--on-neutral-color-extra-light);
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+}
+
+.btn-contact {
+  height: 53px;
+  background: var(--secondary-color);
+  border-radius: 6px;
+  color: var(--on-secondary-color);
+  padding: 19px 28px;
+  gap: 9px;
+  max-width: 90%;
+}
 </style>

components/Logiciels/Artist/Abonnement/ToSubscribe.vue

@@ -24,8 +24,7 @@
     <ol>
       <li class="mt-6">Téléchargez et complétez le formulaire</li>
       <li>
-        Joignez le règlement par chèque ou par virement avec le formulaire à
-        l'ordre de "2iOpenService"<br />
+        Réglez votre abonnement par virement ou par chèque
       </li>
       <li>
         Après réception de votre formulaire d'adhésion et de votre règlement,

components/Logiciels/Manager/Fonctionnalites.vue

@@ -107,5 +107,15 @@ const cards: Array<Functionality> = [
       'Communication en réseau',
     ],
   },
+  {
+    logo: '/images/components/fonctionnalites/Icone_fonctionnement_pyramidal.svg',
+    logoAlt: 'Icône graphique pyramidale',
+    title: "PROMOTION DU RÉSEAU SUR L'AGENDA CULTUREL",
+    list: [
+      'Publication des événements des structures de votre réseau',
+      "Référencement des structures de votre réseau sur l'annuaire",
+      'Diffusion des annonces du réseau et des structures de votre réseau',
+    ],
+  },
 ]
 </script>

components/Logiciels/Manager/Formation.vue

@@ -90,6 +90,10 @@ const formations: Array<Formation> = [
   height: 400px;
   background-size: cover;
   background-position: center;
+
+  @media (max-width: 600px) {
+    height: auto;
+  }
 }
 
 .formation {

components/Logiciels/Manager/Reviews.vue

@@ -22,13 +22,13 @@ const cards: Array<Review> = [
     status: 'Président ',
     structure: 'Confédération Musicale de France (92)',
   },
-  {
-    review:
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.',
-    name: 'Eric TAUVRON ',
-    status: 'Vice-président',
-    structure: 'CMF Rhône - Grand Lyon (69)',
-  },
+  // {
+  //   review:
+  //     'Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.',
+  //   name: 'Eric TAUVRON ',
+  //   status: 'Vice-président',
+  //   structure: 'CMF Rhône - Grand Lyon (69)',
+  // },
   {
     review:
       "C'est un outil de travail très intéressant, complet et intuitif quand on comprend certaines subtilités. Il a très bien évolué aussi bien pour les chorales que les harmonie. Mes remarques ont toujours été prises en compte.",
@@ -36,20 +36,13 @@ const cards: Array<Review> = [
     status: 'Président',
     structure: "CMF Côte d'or (21)",
   },
-  {
-    review:
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.',
-    name: 'Laurent Lebon',
-    status: "Chef d'orchestre",
-    structure: 'Conservatoire de Lyon',
-  },
-  {
-    review:
-      'Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.',
-    name: 'Laurent Lebon',
-    status: "Chef d'orchestre",
-    structure: 'Conservatoire de Lyon',
-  },
+  // {
+  //   review:
+  //     'Lorem ipsum dolor sit amet consectetur adipisicing elit.Provident porro fuga incidunt quae, doloremque tenetur aliquam  exercitationem deleniti aspernatur illo rem deserunt sapiente empore dolorem ipsa aliquid vel nihil eius.',
+  //   name: 'Laurent Lebon',
+  //   status: "Chef d'orchestre",
+  //   structure: 'Conservatoire de Lyon',
+  // },
 ]
 </script>
 

components/Logiciels/Manager/SomeNumbers.vue

@@ -10,7 +10,7 @@
           <CommonCardStat number="140" text="Structures en réseau" />
         </v-col>
         <v-col md="3" class="d-flex justify-center align-center">
-          <CommonCardStat number="216498" text="Utilisateurs" />
+          <CommonCardStat number="216 498" text="Utilisateurs" />
         </v-col>
         <v-col md="3" class="d-flex justify-center align-center">
           <CommonCardStat number="17" text="Années de collaboration" />

components/Logiciels/School/Formations.vue

@@ -86,6 +86,10 @@ const formations: Array<Formation> = [
   height: 400px;
   background-size: cover;
   background-position: center;
+
+  @media (max-width: 600px) {
+    height: auto;
+  }
 }
 
 .alt-color {

components/Logiciels/School/SomeNumbers.vue

@@ -29,13 +29,13 @@
         <CommonCardStat number="153 602" text="Utilisateurs" />
       </v-col>
       <v-col lg="3" md="6" cols="12" class="d-flex justify-center align-center">
-        <CommonCardStat number="15" text="Années d'expérience" />
+        <CommonCardStat number="17" text="Années d'expérience" />
       </v-col>
     </v-row>
 
     <CommonCarouselClients :items="items">
       <template #title>
-        Plus de <span class="alt-color">5000 structures</span> nous font
+        <span class="alt-color">139 structures</span> nous font
         confiance
       </template>
     </CommonCarouselClients>

components/Logiciels/Title.vue

@@ -34,7 +34,6 @@ const { mdAndUp } = useDisplay()
   align-items: center;
   text-align: center;
   letter-spacing: 0.18em;
-  border-bottom: 0.1rem solid var(--on-neutral-color-extra-light);
 }
 
 h1 {

components/Webinaire/Catalogue.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <div class="grey-container">
+    <div>
       <v-row class="center-90">
         <LayoutUISubTitle> Des webinaires pour tous </LayoutUISubTitle>
       </v-row>
@@ -275,6 +275,7 @@ const closeModal = () => {
 
 .catalog {
   padding: 2rem;
+  background: var(--neutral-color-alt-light);
 
   .title-card-container {
     display: flex;
@@ -355,10 +356,15 @@ const closeModal = () => {
 
   .badge-time {
     color: var(--primary-color);
+    background: var(--neutral-color);
     width: 100%;
+    height: 36px;
     text-align: center;
     font-size: 18px;
     font-weight: 500;
+    border-radius: 12px;
+    vertical-align: center;
+    padding-top: 6px;
   }
 }
 

components/Webinaire/FAQ.vue

@@ -91,12 +91,11 @@ function isOpen(index: number) {
   align-items: center;
 
   h3 {
-    font-size: 2rem;
+    font-size: 42px;
     letter-spacing: 0.1rem;
     line-height: 3.5rem;
     margin-bottom: 0.5rem;
     margin-top: 2rem;
-    text-transform: uppercase;
   }
 
   .strong-label {