Merge branch 'release/0.3.1'

app.vue

@@ -9,4 +9,9 @@
 </template>
 
 <script setup lang="ts">
+
+const layoutStore = useLayoutStore()
+
+layoutStore.resetAnchoredSections()
+
 </script>

components/About/Chronologie.vue

@@ -47,9 +47,9 @@
 
                 <v-col cols="4">
                   <div class="description-container">
-                    <h3>
+                    <span class="year">
                       {{ slide.year }}
-                    </h3>
+                    </span>
 
                     <h4>
                       {{ slide.title }}
@@ -260,8 +260,9 @@ const slides: Array<ChronologyItem> = [
     border-top-right-radius: 20%;
     border-bottom-right-radius: 20%;
 
-    h3 {
+    .year {
       font-size: 1.8rem;
+      font-weight: 500;
     }
 
     h4 {

components/About/Presentation.vue

@@ -9,11 +9,11 @@
         </v-col>
 
         <v-col cols="8">
-          <h3 class="italic-title mr-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
             les territoires.”
-          </h3>
+          </div>
         </v-col>
       </v-row>
 
@@ -41,9 +41,9 @@
             pour en faire la promotion.
           </p>
 
-          <h4>
+          <h3>
             La Culture au service du développement territorial
-          </h4>
+          </h3>
 
           <p>
             Qui n'a jamais entendu que la culture coûtait trop cher ? On l'entend

components/Common/Banner.vue

@@ -113,7 +113,7 @@ const props = defineProps({
 
 .details-square {
   position: absolute;
-  bottom: 0.4rem;
+  bottom: 0;
   right: 0;
   width: 13rem;
   height: 10rem;
@@ -122,7 +122,7 @@ const props = defineProps({
 
 .logo-square {
   position: absolute;
-  bottom: 0.4rem;
+  bottom: 0;
   right: 13rem;
   width: 13rem;
   height: 10rem;

components/Common/Card/Benefit.vue

@@ -63,7 +63,7 @@ hr {
     font-weight: 300;
     font-size: 1.5rem;
     line-height: 1rem;
-    color: var(--primary-color);
+    color: var(--on-primary-color);
   }
 
   .number {
@@ -82,7 +82,7 @@ hr {
   p {
     font-weight: normal;
     font-size: 1rem;
-    color: var(--primary-color);
+    color: var(--on-primary-color);
     margin-top: 1rem;
     height: 5rem;
   }
@@ -90,7 +90,7 @@ hr {
   ul {
     font-weight: normal;
     font-size: 0.8rem;
-    color: var(--primary-color);
+    color: var(--on-primary-color);
     margin-top: 1rem;
     margin-bottom: 1rem;
   }

components/Common/Carousel/Clients.vue

@@ -4,11 +4,11 @@
   <LayoutContainer>
     <!-- Titre -->
     <v-row justify="center">
-      <h2 class="text-center">
+      <h3 class="text-center">
         <slot name="title">
           Plus de <span class="alt-color">5000 structures</span> nous font confiance
         </slot>
-      </h2>
+      </h3>
     </v-row>
 
     <v-container>
@@ -75,7 +75,7 @@ const goToNext = () => {
   margin-left: auto;
 }
 
-h2 {
+h3 {
   margin-bottom: 2rem;
   text-align: center;
   font-weight: 600;

components/Common/Carousel/Fonctionnalite.vue

@@ -3,7 +3,7 @@
     <v-row>
       <v-col cols="6">
         <LayoutUISubTitle>
-          Découvrez TOUTES LES FONCTIONNALITÉS DE NOTRE solution
+          Découvrez toutes les fonctionnalités de notre solution
         </LayoutUISubTitle>
 
         <LayoutUITitle>

components/Common/MenuScroll.vue

@@ -90,7 +90,7 @@ const handleScroll = () => {
 
   a {
     text-decoration: none;
-    color: var(--on-primary-color);
+    color: var(--on-neutral-color);
   }
 
   a:hover {

components/Common/Meta.vue

@@ -0,0 +1,36 @@
+<!--
+Définit les balises meta de la page
+-->
+<template></template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true
+    },
+    description: {
+      type: String,
+      required: true
+    },
+    image: {
+      type: String,
+      required: false,
+      default: 'images/Opentalent'
+    }
+  })
+
+  useSeoMeta({
+    title : props.title,
+    ogTitle : props.title,
+    twitterTitle : props.title,
+    description : props.description,
+    ogDescription : props.description,
+    twitterDescription : props.description,
+    ogImage : props.image,
+    twitterImage: props.image,
+    twitterCard : 'summary_large_image',
+    ogType: 'website',
+    ogLocale: 'fr_FR'
+  })
+</script>

components/Common/ReviewSection.vue

@@ -38,20 +38,20 @@
                     <v-card-text>
                       {{ card.review }}
                     </v-card-text>
-
-                    <footer>
-                      <v-card-actions>
-                        {{ card.name }}
-                      </v-card-actions>
-
-                      <p class="reviewer-status">
-                        {{ card.status }}
-                      </p>
-                      <p class="reviewer-structure">
-                        {{ card.structure }}
-                      </p>
-                    </footer>
                   </v-card-item>
+
+                  <v-card-actions>
+                    <p class="reviewer-name">
+                      {{ card.name }}
+                    </p>
+
+                    <p class="reviewer-status">
+                      {{ card.status }}
+                    </p>
+                    <p class="reviewer-structure">
+                      {{ card.structure }}
+                    </p>
+                  </v-card-actions>
                 </v-card>
               </v-container>
             </Slide>
@@ -129,11 +129,19 @@ const goNext = () => {
 }
 
 .carousel {
-  .v-card-item {
+  .v-card {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
+    padding: 0 0.5rem;
+    border-radius: 1rem;
+    min-height: 300px;
+    max-height: 300px;
+    margin-top: 2rem;
+    margin-bottom: 0.6rem;
+  }
+
+  .v-card-item {
+    flex: 1
   }
 
   .v-card-text {
@@ -141,17 +149,17 @@ const goNext = () => {
     min-height: 120px;
     overflow: auto;
     font-size: 0.9rem;
+    flex: 1;
   }
 
-  footer {
-    min-height: 100px;
+  .v-card-actions {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 
-  .v-card-actions {
+  .reviewer-name {
     font-weight: 500;
     font-size: 20px;
     line-height: 24px;
@@ -192,15 +200,6 @@ const goNext = () => {
   border-radius: 1rem;
 }
 
-.v-card {
-  padding: 0 0.5rem;
-  border-radius: 1rem;
-  min-height: 220px;
-  max-height: 250px;
-  margin-top: 2rem;
-  margin-bottom: 0.6rem;
-}
-
 @media (min-width:2100px) {
   .v-card {
     min-height: 360px !important;

components/Home/Caroussel.vue

@@ -24,9 +24,7 @@ Carrousel de la page d'accueil
             class="logo"
           />
 
-          <p class="description">
-            {{ item.description }}
-          </p>
+          <p class="description" v-html="item.description" />
 
           <v-row class="align-start pl-4">
             <v-btn

components/Home/EventAgenda.vue

@@ -5,24 +5,34 @@ Section "Agenda" de la page d'accueil
   <LayoutContainer>
     <div class="container">
       <div class="d-flex align-center justify-center">
-        <h2>
+        <h3>
           Retrouvez tous vos évènements dans l'agenda et référencez vous dans
           l'annuaire
-        </h2>
+        </h3>
       </div>
 
       <v-row justify="center">
         <div class="btn-container">
           <v-col cols="12" md="6">
-            <v-btn append-icon="fas fa-arrow-right" class="btn-event">
-              Découvrir l'agenda
-            </v-btn>
+            <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">
-            <v-btn append-icon="fas fa-arrow-right" class="btn-event">
-              Découvrir l’ANNUAIRE
-            </v-btn>
+            <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-row>
@@ -32,6 +42,7 @@ Section "Agenda" de la page d'accueil
 
 <script setup>
 import { useDisplay } from "vuetify";
+import AgendaLink from "~/components/Common/AgendaLink.vue";
 const { mdAndDown } = useDisplay();
 </script>
 
@@ -52,7 +63,7 @@ const { mdAndDown } = useDisplay();
   }
 }
 
-h2 {
+h3 {
   height: 9rem;
   font-weight: 400;
   font-size: 3rem;

components/Home/Help.vue

@@ -10,10 +10,10 @@ Section "Besoin d'aide" de la page d'accueil
       </v-col>
 
       <v-col cols="12" lg="6" class="col">
-        <h4>
+        <h3>
           Notre équipe est à vos côtés
           pour vous guider
-        </h4>
+        </h3>
 
         <p>
           Besoin d’aide ? <br />
@@ -91,7 +91,7 @@ li {
   border-radius: 3rem;
 }
 
-h4 {
+h3 {
   margin-bottom: 0.7rem;
   font-weight: 400;
   font-size: 2rem;

components/Home/Promotion.vue

@@ -2,15 +2,9 @@
   <LayoutContainer>
     <v-row class="gestion">
       <v-col>
-        <div class="d-flex justify-center align-center flex-column">
-          <v-icon
-            size="6"
-            icon="fas fa-circle"
-          />
-          <h5>
-            GESTION ET PROMOTION
-          </h5>
-        </div>
+        <LayoutUISectionTitle class="alt-theme">
+          GESTION ET PROMOTION
+        </LayoutUISectionTitle>
 
         <v-row>
           <p class="text-block">
@@ -102,9 +96,6 @@
 </template>
 
 <script setup lang="ts">
-import { useDisplay } from "vuetify";
-
-const { mdAndDown } = useDisplay();
 </script>
 
 <style scoped lang="scss">
@@ -119,22 +110,6 @@ const { mdAndDown } = useDisplay();
     background: var(--primary-color);
   }
 
-  h5 {
-    font-size: 1rem;
-    line-height: 1rem;
-    margin-top: 1rem;
-    color: var(--secondary-color);
-    text-align: center;
-    letter-spacing: 2.16px;
-    text-transform: uppercase;
-  }
-
-  .fa-circle{
-    margin-top: 1rem;
-    color: var(--on-primary-color);
-    margin-right: 1rem;
-  }
-
   .text-block {
     font-weight: 600;
     font-size: 3rem;

components/Home/Reviews.vue

@@ -1,19 +1,13 @@
 <template>
   <LayoutContainer>
     <div class="container-1">
-      <div class="d-flex justify-center align-center flex-column">
-        <v-icon
-          icon="fa-solid fa-circle"
-          size="6"
-        />
-        <h6>
-          Avis Clients
-        </h6>
-      </div>
+      <LayoutUISectionTitle>
+        Avis Clients
+      </LayoutUISectionTitle>
 
-      <h3>
+      <h4>
         C'est vous qui le dites
-      </h3>
+      </h4>
     </div>
 
     <!-- Ecrans larges -->
@@ -274,22 +268,7 @@ const items: Ref<Array<{ src: string }>> = ref([
   background-color: var(--neutral-color);
   height: 22rem;
 
-  .v-icon {
-    margin-top: 1rem;
-    color: var(--secondary-color);
-  }
-
-  h6 {
-    font-size: 1rem;
-    line-height: 1rem;
-    margin-top: 1rem;
-    text-align: center;
-    letter-spacing: 2.16px;
-    text-transform: uppercase;
-    margin-bottom: 0.5rem;
-  }
-
-  h3 {
+  h4 {
     font-size: 2rem;
     line-height: 42px;
     text-align: center;
@@ -299,7 +278,6 @@ const items: Ref<Array<{ src: string }>> = ref([
   @media (max-width: 600px) {
     margin-bottom: 24px;
   }
-
 }
 
 .container-2 {

components/Home/Solution.vue

@@ -4,20 +4,13 @@ Section "Solutions" de la page d'accueil
 
 <template>
   <LayoutContainer>
+    <LayoutUISectionTitle class="alt-theme">
+      3 solutions
+    </LayoutUISectionTitle>
 
-    <div class="d-flex justify-center align-center flex-column">
-      <v-icon
-        size="6"
-        icon="fas fa-circle"
-      />
-      <h5>
-        3 solutions
-      </h5>
-    </div>
-
-    <h3 class="text-center" >
+    <h4 class="text-center" >
       Trouvez la solution faites pour vous
-    </h3>
+    </h4>
 
     <v-row class="solutions center-90">
       <v-col
@@ -157,23 +150,7 @@ const solutions: Array<SolutionItem> = [
   position: relative;
 }
 
-h5 {
-  font-size: 1rem;
-  line-height: 1rem;
-  margin-top: 1rem;
-  color: var(--secondary-color);
-  text-align: center;
-  letter-spacing: 2.16px;
-  text-transform: uppercase;
-}
-
-.fa-circle {
-  margin-top: 1rem;
-  color: var(--on-primary-color);
-  margin-right: 1rem;
-}
-
-h3 {
+h4 {
   margin-top: 0.5rem;
   font-size: 2.8rem;
   line-height: 42px;

components/JoinUs/Form.vue

@@ -51,17 +51,20 @@
           <v-file-input
             id="jobApplicationResume"
             v-model="resumeUpload"
-            :rules="[validateResume]"
+            :rules="[validateResume, validateFileSize]"
             label="Dépôt de CV*"
             accept=".pdf, .jpeg, .png"
+            show-size
             required
           />
 
           <v-file-input
             id="jobApplicationMotivationLetter"
             v-model="motivationLetterUpload"
+            :rules="[validateFileSize]"
             label="Dépôt de lettre de motivation"
             accept=".pdf, .jpeg, .png"
+            show-size
           />
 
           <v-textarea
@@ -86,7 +89,7 @@
 
       <v-card-actions class="justify-center">
         <v-btn
-          class="btn-more mb-4"
+          class="btn-more mb-4 submit"
           @click="submit"
         >
           Envoyer
@@ -124,6 +127,9 @@ const leftCars: ComputedRef<number> = computed(() =>
   maxMessageLength - (jobApplication.message ? jobApplication.message.length : 0)
 )
 
+// Taille maximum en Mo
+const maxFileSize = 5
+
 const validateName = (name: string | null) => !!name || "Le nom est obligatoire";
 
 const validateSurname = (surname: string | null) => !!surname || "Le prénom est obligatoire";
@@ -134,9 +140,16 @@ const validateEmail = (email: string | null) =>
 const validatePhone = (email: string | null) =>
   (!!email && /^((\+|00)33\s?|0)[1-7]([\s.]?\d{2}){4}$/.test(email)) || "Le numéro de téléphone doit être valide";
 
-const validateResume = (surname: string | null) =>
+const validateResume = () =>
   resumeUpload.value !== null && resumeUpload.value[0] !== null || "Vous devez joindre un CV à l'un des formats indiqués";
 
+const validateFileSize = () =>
+  resumeUpload.value !== null
+  && resumeUpload.value[0] !== null
+  //@ts-ignore
+  && resumeUpload.value[0].size < (maxFileSize * 1024 * 1024)
+  || "La taille du fichier ne doit pas dépasser " + maxFileSize + " Mo";
+
 const validateNonEmptyMessage = (message: string | null) =>
   (!!message && message.length > 0) ||
   "Le message ne peut pas être vide";
@@ -179,5 +192,13 @@ const submit = async () => {
 </script>
 
 <style scoped lang="scss">
-
+.submit {
+  width: 100%;
+  margin-bottom: 0 !important;
+  height: 55px;
+}
+
+.submit:hover {
+  background-color: var(--on-neutral-color-extra-light);
+}
 </style>

components/JoinUs/MissionDetail.vue

@@ -25,6 +25,11 @@
         </div>
 
         <div v-else-if="job !== null">
+          <CommonMeta
+            :title="job.title"
+            description="Offre d'emploi"
+          />
+
           <LayoutUITitlePage>
             {{ job.title }}
           </LayoutUITitlePage>

components/Layout/AnchoredSection.vue

@@ -31,20 +31,17 @@
   const top: Ref<number | null> = ref(null)
   const bottom: Ref<number | null> = ref(null)
 
-  onMounted(() => {
+  const onScroll = (scroll: any) => {
     top.value = section.value!.offsetTop
     bottom.value = section.value!.offsetTop + section.value!.offsetHeight
-  })
 
-  const onScroll = (e: any) => {
     if (top.value === null || bottom.value === null) {
       return
     }
 
-    const screenVerticalCenter = document.documentElement.scrollTop + window.innerHeight / 2
+    const screenVerticalCenter = scroll.target.documentElement.scrollTop + window.innerHeight / 2
 
     const active = screenVerticalCenter > top.value && screenVerticalCenter < bottom.value
-
     if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
         layoutStore.setIsAnchoredSectionOnScreen(
           props.id,

components/Layout/Footer/Footer.vue

@@ -12,79 +12,108 @@
           </v-col>
 
           <!-- Deuxième section : liens agenda culturel (écrans larges seulement) -->
-          <v-col v-if="mdAndUp" cols="2" >
+          <v-col v-if="mdAndUp" cols="7" >
             <v-row>
-              <h5>
-                Agenda culturel
-              </h5>
-            </v-row>
-            <v-row>
-              <AgendaLink href="/annuaire">
-                Annuaire
-              </AgendaLink>
-            </v-row>
-            <v-row>
-              <AgendaLink href="/actualites">
-                Actualités
-              </AgendaLink>
-            </v-row>
-            <v-row>
-              <AgendaLink href="/annonces">
-                Annonces
-              </AgendaLink>
-            </v-row>
-          </v-col>
+              <v-col cols="3">
+                <v-row>
+                  <h5>
+                    Agenda culturel
+                  </h5>
+                </v-row>
+                <v-row>
+                  <AgendaLink href="/annuaire">
+                    Annuaire
+                  </AgendaLink>
+                </v-row>
+                <v-row>
+                  <AgendaLink href="/actualites">
+                    Actualités
+                  </AgendaLink>
+                </v-row>
+                <v-row>
+                  <AgendaLink href="/annonces">
+                    Annonces
+                  </AgendaLink>
+                </v-row>
+              </v-col>
 
-          <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
-          <v-col v-if="mdAndUp" cols="2">
-            <v-row>
-              <h5>
-                Logiciels culturels
-              </h5>
-            </v-row>
-            <v-row>
-              <nuxt-link to="/opentalent_artist">
-                Opentalent Artist
-              </nuxt-link>
-            </v-row>
-            <v-row>
-              <nuxt-link to="/opentalent_school">
-                Opentalent School
-              </nuxt-link
-              >
-            </v-row>
-            <v-row>
-              <nuxt-link to="/opentalent_manager">
-                Opentalent Manager
-              </nuxt-link>
-            </v-row>
-          </v-col>
+              <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
+              <v-col cols="3">
+                <v-row>
+                  <h5>
+                    Logiciels culturels
+                  </h5>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/opentalent_artist">
+                    Opentalent Artist
+                  </nuxt-link>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/opentalent_school">
+                    Opentalent School
+                  </nuxt-link
+                  >
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/opentalent_manager">
+                    Opentalent Manager
+                  </nuxt-link>
+                </v-row>
+              </v-col>
 
-          <!-- Quatrième section : liens espace client (écrans larges seulement) -->
-          <v-col v-if="mdAndUp" cols="2">
-            <v-row>
-              <h5>
-                Espace client
-              </h5>
-            </v-row>
-            <v-row>
-              <nuxt-link href="https://ressources.opentalent.fr/display/FAQ/Accueil">
-                Foire Aux Questions
-              </nuxt-link>
-            </v-row>
-            <v-row>
-              <nuxt-link href="https://ressources.opentalent.fr/" target="_blank">
-                Support en ligne
-              </nuxt-link>
-            </v-row>
-            <v-row>
-              <nuxt-link to="/nous-contacter" target="_blank" >
-                Nous contacter
-              </nuxt-link>
+              <!-- Quatrième section : A propos (écrans larges seulement) -->
+              <v-col cols="3">
+                <v-row>
+                  <h5>
+                    A PROPOS
+                  </h5>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/qui-sommes-nous">
+                    Qui sommes-nous
+                  </nuxt-link>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/nous-rejoindre">
+                    Nous rejoindre
+                  </nuxt-link
+                  >
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/nous-contacter">
+                    Nous contacter
+                  </nuxt-link>
+                </v-row>
+              </v-col>
+
+              <!-- Cinquième section : liens espace client (écrans larges seulement) -->
+              <v-col cols="3">
+                <v-row>
+                  <h5>
+                    Espace client
+                  </h5>
+                </v-row>
+                <v-row>
+                  <nuxt-link href="https://ressources.opentalent.fr/display/FAQ/Accueil" target="_blank">
+                    Foire Aux Questions
+                  </nuxt-link>
+                </v-row>
+                <v-row>
+                  <nuxt-link href="https://ressources.opentalent.fr/" target="_blank">
+                    Support en ligne
+                  </nuxt-link>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/nous-contacter" target="_blank" >
+                    Nous contacter
+                  </nuxt-link>
+                </v-row>
+              </v-col>
             </v-row>
           </v-col>
 
-          <!-- Cinquième section : liens réseaux sociaux (écrans larges seulement) -->
+          <!-- Sixième section : liens réseaux sociaux (écrans larges seulement) -->
           <v-col v-if="mdAndUp" cols="2">
             <v-row class="justify-center">
               <h5>
@@ -104,7 +133,7 @@
                 <nuxt-link
                   href="https://twitter.com/Opentalent_FRA"
                   target="_blank"
-                  class="fa-brands fa-square-twitter"
+                  class="fa-brands fa-square-x-twitter"
                 />
               </v-col>
               <v-col cols="2">
@@ -191,17 +220,17 @@
       <div class="footnotes">
         <v-row justify="center">
           <p class="mt-6">
-            <a href="/mentions-legales" target="_blank">
+            <nuxt-link to="/mentions-legales">
               Mentions légales
-            </a>
+            </nuxt-link>
             -
-            <a href="/politique-de-confidentialite-et-protection-des-donnees-personnelles" target="_blank">
+            <nuxt-link to="/politique-de-confidentialite-et-protection-des-donnees-personnelles">
               Politiques de cookies
-            </a>
+            </nuxt-link>
             -
-            <a href="/CGV" target="_blank">
+            <nuxt-link to="/CGV">
               Conditions Générales de Ventes
-            </a>
+            </nuxt-link>
           </p>
         </v-row>
 

components/Layout/Footer/Solutions.vue

@@ -25,7 +25,7 @@
 
         <v-col cols="10">
           <!-- list v-chip-->
-          <v-chip-group active-class="primary--text" column>
+          <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Orchestres</span>
             </v-chip>
@@ -57,7 +57,7 @@
 
         <v-col cols="10">
           <!-- list v-chip-->
-          <v-chip-group active-class="primary--text" column>
+          <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" color="primary" label>
               <span class="chip-detail">Fédérations</span>
             </v-chip>
@@ -86,7 +86,7 @@
 
         <v-col cols="10">
           <!-- list v-chip-->
-          <v-chip-group active-class="primary--text" column>
+          <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Conservatoire</span>
             </v-chip>
@@ -141,6 +141,7 @@ const props = defineProps({
 }
 
 .chip-custom {
+  opacity: 1;
   color: var(--on-primary-color);
   border: 1px solid var(--primary-color);
   border-radius: 3rem;

components/Layout/Navigation.vue

@@ -19,7 +19,7 @@ Menu Navigation
         <v-menu
           v-for="item in menu"
           :key="item.label"
-          open-on-hover
+          :open-on-hover="true"
         >
           <template v-slot:activator="{ props }">
             <nuxt-link

components/Layout/UI/SectionTitle.vue

@@ -0,0 +1,41 @@
+<!-- Titre H2 -->
+<template>
+  <div class="d-flex justify-center align-center flex-column">
+    <v-icon
+      size="6"
+      icon="fas fa-circle"
+    />
+    <h3>
+      <slot />
+    </h3>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="scss">
+h3 {
+  font-size: 1rem;
+  line-height: 1rem;
+  margin-top: 1rem;
+  text-align: center;
+  letter-spacing: 2.16px;
+  text-transform: uppercase;
+  color: var(--primary-color) !important;
+}
+
+.alt-theme h3 {
+  color: var(--on-primary-color-alt) !important;
+}
+
+.fa-circle {
+  margin-top: 1rem;
+  margin-right: 1rem;
+  color: var(--on-neutral-color-light) !important;
+}
+
+.alt-theme .fa-circle {
+  color: var(--on-primary-color) !important;
+}
+</style>

components/Layout/UI/Title.vue

@@ -1,13 +1,9 @@
 <!-- Titre H2 -->
 <template>
   <LayoutContainer>
-    <!--
-    TODO: dans les faits c'est plutôt le sous-titre (même s'il apparait en plus gros)
-    voir à passer en H3, ou même en autre chose qu'un titre
-    -->
-    <h2>
+    <h3>
       <slot />
-    </h2>
+    </h3>
   </LayoutContainer>
 </template>
 
@@ -15,7 +11,7 @@
 </script>
 
 <style scoped lang="scss">
-  h2 {
+  h3 {
     color: var(--on-neutral-color);
     font-weight: 600;
     font-size: 3rem;

components/Logiciels/Artist/Abonnement.vue

@@ -52,9 +52,9 @@
         </v-col>
 
         <v-col cols="8">
-          <h5>
+          <h3>
             Opentalent Artist, <br> la solution que vous attendiez...
-          </h5>
+          </h3>
 
           <p class="solution">
             Conçu pour les structures artistiques telles que chorales,
@@ -69,7 +69,12 @@
           </p>
 
           <div class="border-row">
-            <v-img src="/images/logiciels/school/cmf_logo_orange.png" class="logo-cmf" />
+            <nuxt-link href="https://www.cmf-musique.org/" target="_blank">
+              <v-img
+                src="/images/logiciels/school/cmf_logo_orange.png"
+                class="logo-cmf"
+              />
+            </nuxt-link>
 
             <div class="cmf-container">
               <p>
@@ -147,7 +152,7 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   text-align: justify
 }
 
-h5 {
+h3 {
   color: var(--primary-color);
   margin-bottom: 4rem;
   font-size: 42px;
@@ -160,7 +165,7 @@ h5 {
   margin-bottom: 4rem;
 
   p {
-    color: var(--primary-color);
+    color: var(--on-primary-color);
     width: 25rem;
     font-weight: 300;
     font-size: 16px;

components/Logiciels/Manager/Formation.vue

@@ -22,13 +22,13 @@
             </div>
 
             <div>
-              <h4>
+              <h3>
                 {{ formation.sessions }}
-              </h4>
+              </h3>
 
-              <h3>
+              <h4>
                 {{ formation.title }}
-              </h3>
+              </h4>
 
               <p class="details mb-5">
                 {{ formation.description }}

components/Logiciels/Manager/SomeNumbers.vue

@@ -38,10 +38,12 @@
           La plus grande Confédération Musicale de France nous fait confiance
         </span>
 
-        <v-img
-          src="/images/logiciels/manager/cmf.jpg"
-          class="cmf-img mb-6"
-        />
+        <nuxt-link href="https://www.cmf-musique.org/" target="_blank">
+          <v-img
+            src="/images/logiciels/manager/cmf.jpg"
+            class="cmf-img mb-6"
+          />
+        </nuxt-link>
       </v-col>
     </v-row>
   </LayoutContainer>

components/Logiciels/School/Formations.vue

@@ -22,13 +22,13 @@
             </div>
 
             <div>
-              <h4>
+              <h3>
                 {{ formation.sessions }}
-              </h4>
+              </h3>
 
-              <h3>
+              <h4>
                 {{ formation.title }}
-              </h3>
+              </h4>
 
               <p class="details mb-5">
                 {{ formation.description }}

components/News/Details.vue

@@ -34,15 +34,20 @@
         </div>
 
         <div v-else-if="newsItem !== null" class="news">
+          <CommonMeta
+            :title="newsItem.title"
+            :description="newsItem.leadText"
+          />
+
           <v-row class="center-90">
             <v-col cols="6">
               <v-img :src="getImageUrl(newsItem.attachment)"/>
             </v-col>
 
             <v-col cols="6">
-              <h4>
+              <h1>
                 {{ newsItem.title }}
-              </h4>
+              </h1>
             </v-col>
           </v-row>
 
@@ -116,7 +121,7 @@ const getImageUrl = (attachment: string): string | null => {
     margin-right: auto;
   }
 
-  h4 {
+  h1 {
     margin-top: 11rem;
     text-decoration: none;
     text-transform: uppercase;

components/Webinaire/Catalogue.vue

@@ -8,12 +8,16 @@
       </v-row>
 
       <v-row class="center-90">
-        <LayoutUITitlePage>
-          SIMPLIFIEZ LA GESTION ET LA COMMUNICATION DE VOTRE STRUCTURE CULTURELLE
-          <template #subtitle>
-            Votre orchestre, école de danse ou votre fédération mérite les outils les plus performants du marché pour briller en toute simplicité. Découvrez comment nos outils peuvent transformer votre quotidien :
-          </template>
-        </LayoutUITitlePage>
+        <v-col cols="12" class="section-title">
+          <h3>
+            SIMPLIFIEZ LA GESTION ET LA COMMUNICATION DE VOTRE STRUCTURE CULTURELLE
+          </h3>
+
+          <div class="strong-label">
+            Votre orchestre, école de danse ou votre fédération mérite les outils les plus performants du marché pour briller en toute simplicité.
+            Découvrez comment nos outils peuvent transformer votre quotidien :
+          </div>
+        </v-col>
       </v-row>
 
       <v-row class="center-90 catalog">
@@ -101,11 +105,12 @@
     </div>
 
     <!-- Modale d'inscription -->
-    <div
-      v-if="selectedWebinar"
+    <v-dialog
+      v-model="modalShowing"
+      max-width="800"
       class="calendar-modal"
     >
-      <div class="alt-theme">
+      <div class="alt-theme d-flex flex-column align-center">
         <LayoutUISubTitle>
           Inscrivez vous
         </LayoutUISubTitle>
@@ -131,7 +136,7 @@
           </v-col>
         </v-row>
       </div>
-    </div>
+    </v-dialog>
   </LayoutContainer>
 </template>
 
@@ -265,6 +270,8 @@ const showModal = (webinaireTitle: string) => {
   selectedWebinar.value = webinaireTitle.trim();
 };
 
+const modalShowing = computed(() => selectedWebinar.value)
+
 const closeModal = () => {
   selectedWebinar.value = null;
 };
@@ -277,6 +284,31 @@ const closeModal = () => {
   background-color: transparent !important;
 }
 
+.section-title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h3 {
+    font-size: 2rem;
+    letter-spacing: .1rem;
+    line-height: 3.5rem;
+    margin-bottom: .5rem;
+    margin-top: 2rem;
+    text-transform: uppercase;
+  }
+
+  .strong-label {
+    font-size: 1.5rem;
+    font-weight: 400 !important;
+    letter-spacing: .1rem;
+    line-height: 2rem;
+    margin-bottom: 1rem;
+    text-align: center;
+    text-transform: uppercase;
+  }
+}
+
 .catalog {
   padding: 2rem;
 
@@ -361,20 +393,6 @@ const closeModal = () => {
 }
 
 .calendar-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(14, 45, 50, 0.8);
-  z-index: 9999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  > div {
-    padding: 4rem;
-  }
 
   h4 {
     font-weight: 600;

components/Webinaire/FAQ.vue

@@ -9,10 +9,17 @@ Foire aux questions
       </LayoutUISubTitle>
     </v-row>
 
-    <LayoutUITitlePage>
-      Tout savoir sur nos webinaire en ligne
-      <template #subtitle>Les questions les plus fréquentes</template>
-    </LayoutUITitlePage>
+    <v-row class="center-90">
+      <v-col cols="12" class="section-title">
+        <h3>
+          Tout savoir sur nos webinaire en ligne
+        </h3>
+
+        <div class="strong-label">
+          Les questions les plus fréquentes
+        </div>
+      </v-col>
+    </v-row>
 
     <div class="faq">
       <div
@@ -85,6 +92,31 @@ function isOpen(index: number) {
 
 
 <style scoped lang="scss">
+.section-title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h3 {
+    font-size: 2rem;
+    letter-spacing: .1rem;
+    line-height: 3.5rem;
+    margin-bottom: .5rem;
+    margin-top: 2rem;
+    text-transform: uppercase;
+  }
+
+  .strong-label {
+    font-size: 1.5rem;
+    font-weight: 400 !important;
+    letter-spacing: .1rem;
+    line-height: 2rem;
+    margin-bottom: 1rem;
+    text-align: center;
+    text-transform: uppercase;
+  }
+}
+
 .faq {
   padding: 1rem;
   width: 90%;

pages/CGV.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Conditions générales de vente - Opentalent"
+    description="Conditions générales de vente"
+  />
+
   <LayoutUITitlePage>
     Conditions générales de vente
   </LayoutUITitlePage>

pages/actualites/[id].vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- Balises meta: définies dans le component Details -->
   <NewsDetails />
 
   <LayoutFooterPrefooter />

pages/actualites/index.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Actualités - Opentalent"
+    description="Les dernières actualités"
+  />
+
   <NewsList />
 
   <LayoutFooterPrefooter />

pages/formations.vue

@@ -1,8 +1,13 @@
 <template>
+  <CommonMeta
+    title="Formation - Opentalent"
+    description="Prise en main ou piqûre de rappel, on est toujours à vos côtés."
+  />
+
   <LayoutUITitlePage>
     Formation
     <template #subtitle>
-      Prise en main ou piqûre de rappel,on est toujours à vos côtés.
+      Prise en main ou piqûre de rappel, on est toujours à vos côtés.
     </template>
   </LayoutUITitlePage>
 

pages/index.vue

@@ -1,4 +1,8 @@
 <template>
+  <CommonMeta
+    title="Opentalent - Logiciels culturels"
+    description="Une gamme de logiciels adaptée à chaque structure culturelle"
+  />
 
   <CommonActionMenu />
 

pages/mentions-legales.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Mentions légales - Opentalent"
+    description="Mentions légales"
+  />
+
   <LayoutUITitlePage>
     Mentions légales
   </LayoutUITitlePage>

pages/nous-contacter.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Nous contacter - Opentalent"
+    description="Notre équipe est là pour vous. Contactez-nous!"
+  />
+
   <ContactBanner />
 
   <ContactForm />

pages/nous-rejoindre/[id].vue

@@ -1,4 +1,6 @@
 <template>
+  <!-- Balises meta: définies dans le component Details -->
+
   <CommonBanner
     imageSrc="/images/actu/pub.png"
     imageAlt="banner"

pages/nous-rejoindre/index.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Nous rejoindre - Opentalent"
+    description="Offres d'emploi et candidatures"
+  />
+
   <LayoutUITitlePage>
     Nous rejoindre
   </LayoutUITitlePage>
@@ -40,3 +45,5 @@ h3 {
   width: 100%;
 }
 </style>
+<script setup lang="ts">
+</script>

pages/opentalent_artist.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Opentalent Artist"
+    description="Description du produit Opentalent Artist"
+  />
+
   <div class="theme-artist" >
     <CommonActionMenu :actions="stickyMenuActions" />
 
@@ -13,7 +18,6 @@
       image-alt="banner artist"
       square-text="Orchestres, chorales, compagnies de danse, de cirque et de théâtre"
       logo-src="/images/logo/logiciels/Artist-noir.png"
-      :logo-alt-theme="true"
     />
 
     <CommonMenuScroll :menus="menus" class="mb-6" />

pages/opentalent_manager.vue

@@ -1,11 +1,10 @@
 <template>
-  <div class="theme-manager">
-    <CommonBannerTitle
-      leftText="School"
-      title="Opentalent Manager"
-      rightText="Artist"
-    />
+  <CommonMeta
+    title="Opentalent Manager"
+    description="Description du produit Opentalent Manager"
+  />
 
+  <div class="theme-manager">
     <LogicielsTitle>
       <template #left-text>School</template>
       Opentalent Manager
@@ -17,7 +16,6 @@
       imageAlt="line"
       squareText="Fédérations, confédérations et collectivités"
       logoSrc="/images/logo/logiciels/Manager-noir.png"
-      :logo-alt-theme="true"
     />
 
     <CommonMenuScroll :menus="menus" class="mb-6" />

pages/opentalent_school.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Opentalent School"
+    description="Description du produit Opentalent School"
+  />
+
   <div class="theme-school">
     <LogicielsTitle>
       <template #left-text>Artist</template>

pages/politique-de-confidentialite-et-protection-des-donnees-personnelles.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Politique de confidentialité - Opentalent"
+    description="Politique de confidentialité"
+  />
+
   <LayoutUITitlePage>
     POLITIQUE DE CONFIDENTIALITÉ
   </LayoutUITitlePage>

pages/qui-sommes-nous.vue

@@ -3,6 +3,11 @@
 -->
 
 <template>
+  <CommonMeta
+    title="Qui sommes-nous ? - Opentalent"
+    description="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 les territoires."
+  />
+
   <LayoutUITitlePage class="mb-12">
     Qui sommes-nous ?
   </LayoutUITitlePage>
@@ -22,7 +27,9 @@
 
   <AboutLogiciels />
 
-  <HomeEventAgenda class="mb-6"/>
+  <AnchoredSection id="agenda" class="mb-6">
+    <HomeEventAgenda/>
+  </AnchoredSection>
 
   <AboutChronologie v-if="lgAndUp"/>
 
@@ -36,6 +43,7 @@
 <script setup lang="ts">
 import type { MenuScroll } from "~/types/interface";
 import { useDisplay } from "vuetify";
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 const { lgAndUp } = useDisplay()
 
@@ -50,5 +58,9 @@ const menus: Array<MenuScroll> = [
 ];
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+:deep(.active) {
+  background-color: var(--primary-color);
+  color: var(--on-primary-color);
+}
 </style>

pages/webinaires.vue

@@ -1,4 +1,9 @@
 <template>
+  <CommonMeta
+    title="Webinaires - Opentalent"
+    description="Partez à la découverte de vos logiciels Opentalent."
+  />
+
   <CommonActionMenu />
 
   <LayoutUITitlePage>

stores/layoutStore.ts

@@ -14,6 +14,10 @@ export const useLayoutStore = defineStore('layout', () => {
     isFooterVisible.value = value
   }
 
+  const resetAnchoredSections = () =>{
+    isAnchoredSectionOnScreen.value = {}
+  }
+
   const isAnchoredSectionOnScreen: Ref<Record<string, boolean>> = ref({})
 
   const setIsAnchoredSectionOnScreen = (sectionId: string, value: boolean) => {
@@ -26,6 +30,7 @@ export const useLayoutStore = defineStore('layout', () => {
     isFooterVisible,
     setIsFooterVisible,
     isAnchoredSectionOnScreen,
+    resetAnchoredSections,
     setIsAnchoredSectionOnScreen
   }
 })