fix sections width all over the pages

assets/style/main.scss

@@ -20,6 +20,7 @@ body {
 
 .center-90 {
   width: 90%;
+  max-width: 1600px;
   margin-right: auto;
   margin-left: auto;
 
@@ -30,3 +31,7 @@ body {
 .v-row.center-90 {
   margin: -12px auto;
 }
+
+* {
+  text-align: justify;
+}

components/About/Chronologie.vue

@@ -2,7 +2,7 @@
   <AnchoredSection id="history">
     <LayoutContainer class="alt-theme">
       <v-container >
-        <v-row class="mb-6 mt-6">
+        <v-row class="mb-6 mt-6 center-90">
           <v-col cols="6">
             <LayoutUISubTitle>
               Découvrez toute notre histoire
@@ -24,7 +24,7 @@
         </v-row>
       </v-container>
 
-      <v-row class="mb-12">
+      <v-row class="mb-12 center-90">
         <v-col cols="12">
           <Carousel
             v-model="activeSlide"
@@ -264,9 +264,8 @@ const slides: Array<ChronologyItem> = [
     }
 
     h4 {
-      justify-content: flex-end;
-      align-items: center;
       font-size: 1rem;
+      text-align: center;
     }
 
     p {

components/About/FAQ.vue

@@ -54,7 +54,6 @@ h4 {
   @media (max-width: 600px) {
     width: 80%;
     margin-left: 10%;
-    text-align: justify;
   }
 }
 

components/About/Presentation.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="about">
     <LayoutContainer>
-      <v-row class="mt-12 center-90">
+      <v-row class="my-12 center-90">
         <v-col cols="12" lg="4">
           <LayoutUISubTitle>
             Qui sommes-nous ?
@@ -18,7 +18,7 @@
       </v-row>
 
       <v-row class="history mb-12">
-        <v-col md="6">
+        <v-col cols="12" md="6">
           <v-img
             src="/images/about/passion.jpg"
             alt="Entretien dans un bureau entre un homme et une femme de dos"
@@ -26,7 +26,7 @@
           />
         </v-col>
 
-        <v-col md="6">
+        <v-col cols="12" md="6">
           <h3>
             Une histoire de passionnés
           </h3>
@@ -76,7 +76,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 <style scoped lang="scss">
 .italic-title {
-  text-align: justify;
   font-style: italic;
   font-weight: 300;
   font-size: 34px;
@@ -99,12 +98,17 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   margin-left: auto;
   margin-right: auto;
 
+  .v-col-12 {
+    padding: 0 5%;
+  }
+
   .v-img {
     background-repeat: no-repeat;
     background-position: center;
-    width: 400px;
+    width: 100%;
     height: 100%;
     border-radius: 20px;
+    margin: 0 auto;
 
     @media (max-width: 600px) {
       width: 90%;
@@ -134,11 +138,9 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   }
 
   p {
-    text-align: justify;
     font-weight: 300;
     font-size: 16px;
     line-height: 20px;
-    width: 30rem;
     margin-bottom: 2rem;
 
     @media (max-width: 600px) {

components/Common/Carousel/Fonctionnalite.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-row>
+    <v-row class="center-90">
       <v-col cols="6">
         <LayoutUISubTitle>
           Découvrez toutes les fonctionnalités de notre solution

components/Common/Contact.vue

@@ -2,7 +2,7 @@
   <AnchoredSection id="contact">
     <LayoutContainer>
       <!-- Section "Appelez nous" -->
-      <v-row>
+      <v-row class="center-90">
         <LayoutUISubTitle v-if="smAndDown">
           Contactez-nous
         </LayoutUISubTitle>
@@ -143,7 +143,6 @@ const { smAndDown, mdAndUp } = useDisplay()
   font-size: 16px;
   line-height: 20px;
   color: var(--on-neutral-color);
-  text-align: justify;
   max-width: 80%;
 }
 

components/Common/ReviewSection.vue

@@ -164,7 +164,6 @@ const goNext = () => {
   }
 
   .v-card-text {
-    text-align: justify;
     min-height: 120px;
     overflow: auto;
     font-size: 1rem;

components/Contact/Form.vue

@@ -379,7 +379,6 @@ const submit = async (): Promise<void> => {
     opacity: 0.7;
     font-size: 14px;
     font-style: italic;
-    text-align: justify;
     margin-left: auto;
     margin-right: auto;
     max-width: 80%;

components/Formation/Catalogue.vue

@@ -199,10 +199,6 @@ const courses: Array<Training> = [
 
 <style scoped>
 
-* {
-  text-align: justify;
-}
-
 .catalog {
   padding: 2rem;
 

components/Formation/OPCA.vue

@@ -77,7 +77,6 @@ h3 {
   color: var(--on-primary-color);
   width: 100%;
   margin: auto;
-  text-align: justify;
 }
 
 @media (max-width: 1240px) {

components/Formation/Participation.vue

@@ -70,12 +70,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   margin-right: auto;
 }
 
-@media (min-width: 1200px) {
-  .v-row {
-    min-width: 100%;
-  }
-}
-
 .icon-title {
   font-size: 1rem;
   margin-right: 1rem;
@@ -98,7 +92,6 @@ h3 {
 .details-participations {
   display: flex;
   flex-direction: column;
-  text-align: justify;
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;

components/Formation/Presentation.vue

@@ -100,7 +100,6 @@ p {
   font-weight: 300;
   font-size: 1.2rem;
   line-height: 20px;
-  text-align: justify;
 }
 
 .school {

components/Home/Besoin.vue

@@ -56,7 +56,6 @@ p {
   margin-left: 2rem;
   color: var(--primary-color);
   width: 20rem;
-  text-align: justify;
 }
 
 .screen-img {

components/Home/Caroussel.vue

@@ -213,7 +213,6 @@ const carouselItems: Ref<Array<CarouselItem>> = ref([
   }
 
   .description {
-    text-align: justify;
     margin-top: 8px;
     margin-left: 7rem;
     width: 25vw;

components/JoinUs/MissionDetail.vue

@@ -182,7 +182,6 @@ const formatDate = (date: string) => {
 
   .description {
     color: var(--on-neutral-color);
-    text-align: justify;
     font-size: 21px;
     font-weight: 500;
     line-height: 2.125rem;

components/Layout/Footer/Solutions.vue

@@ -15,7 +15,7 @@
 
       <v-row
         v-if="showArtist"
-        class="row-artist"
+        class="row-artist center-90"
       >
         <v-col cols="6" md="2">
           <NuxtLink to="/opentalent_artist">
@@ -47,7 +47,7 @@
 
       <v-row
         v-if="showManager"
-        class="row-manager"
+        class="row-manager center-90"
       >
         <v-col cols="6" md="2">
           <NuxtLink to="/opentalent_manager">
@@ -76,7 +76,7 @@
 
       <v-row
         v-if="showSchool"
-        class="row-school"
+        class="row-school center-90"
       >
         <v-col cols="6" md="2">
           <NuxtLink to="/opentalent_school">

components/Logiciels/Artist/Abonnement.vue

@@ -1,11 +1,11 @@
 <template>
   <AnchoredSection id="subscription">
     <LayoutContainer>
-      <LayoutUISubTitle>
-        S'abonner dès maintenant
-      </LayoutUISubTitle>
-
       <v-row class="mt-12 center-90">
+        <LayoutUISubTitle>
+          S'abonner dès maintenant
+        </LayoutUISubTitle>
+
         <v-col v-if="lgAndUp" cols="4" class="col-1">
           <LogicielsArtistAbonnementToSubscribe />
         </v-col>
@@ -84,7 +84,6 @@ const { mdAndDown, lgAndUp } = useDisplay()
 
 .solution {
   width: 45rem;
-  text-align: justify;
 
   @media (max-width: 600px) {
     width: 100%;

components/Logiciels/Artist/Fonctionnalites.vue

@@ -2,13 +2,9 @@
   <AnchoredSection id="functionalities">
     <div>
       <LayoutContainer>
-        <v-row>
-          <v-col cols="12">
-            <CommonCarouselFonctionnalite
-              :cards="cards"
-            />
-          </v-col>
-        </v-row>
+        <CommonCarouselFonctionnalite
+          :cards="cards"
+        />
       </LayoutContainer>
     </div>
   </AnchoredSection>

components/Logiciels/Artist/Formations.vue

@@ -91,7 +91,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
     font-size: 1rem;
     line-height: 1.5rem;
     color: var(--on-primary-color);
-    text-align: justify;
 
     @media (max-width: 1240px) {
       margin-right: 24px !important;

components/Logiciels/School/Fonctionnalites.vue

@@ -1,16 +1,10 @@
 <template>
   <AnchoredSection id="functionalities">
-    <div>
-      <LayoutContainer>
-        <v-row>
-          <v-col cols="12">
-            <CommonCarouselFonctionnalite
-              :cards="cards"
-            />
-          </v-col>
-        </v-row>
-      </LayoutContainer>
-    </div>
+    <LayoutContainer>
+      <CommonCarouselFonctionnalite
+        :cards="cards"
+      />
+    </LayoutContainer>
   </AnchoredSection>
 </template>
 

components/Logiciels/School/Formations.vue

@@ -2,13 +2,13 @@
   <AnchoredSection id="webinars">
     <LayoutContainer>
       <div class="alt-theme pt-6 mt-12">
-        <v-row>
+        <v-row class="center-90">
           <LayoutUISubTitle>
             Nos accompagnements sur-mesure
           </LayoutUISubTitle>
         </v-row>
 
-        <v-row class="formation pb-6 align-center">
+        <v-row class="formation pb-6 align-center center-90">
           <v-col
             cols="12"
             md="6"
@@ -78,11 +78,6 @@ const formations: Array<Formation> = [
 </script>
 
 <style scoped>
-.v-row {
-  max-width: 1600px;
-  margin: 0 auto;
-}
-
 :deep(h2) {
   width: 60rem;
 }
@@ -133,7 +128,6 @@ const formations: Array<Formation> = [
     font-weight: 300;
     font-size: 1.2rem;
     max-width: 650px;
-    text-align: justify;
     line-height: 1.5rem;
     color: var(--on-primary-color);
   }

components/News/Details.vue

@@ -143,7 +143,6 @@ const getImageUrl = (attachment: string): string | null => {
   .description {
     color: var(--primary-color);
     max-width: 80%;
-    text-align: justify;
     font-size: 21px;
     font-weight: 500;
     line-height: 34px;

components/Webinaire/FAQ.vue

@@ -21,7 +21,7 @@ Foire aux questions
       </v-col>
     </v-row>
 
-    <div class="faq">
+    <div class="faq center-90">
       <div
         v-for="(item, index) in faqItems"
         :key="index"

pages/CGV.vue

@@ -784,10 +784,6 @@ h3 {
   font-size: 1rem !important;
 }
 
-.v-container {
-  text-align: justify;
-}
-
 ul {
   list-style-type: none;
   padding-left: 0;

pages/mentions-legales.vue

@@ -150,9 +150,6 @@
 </template>
 
 <style scoped lang="scss">
-.v-container {
-  text-align: justify;
-}
 
 h3 {
   font-size: 1.5rem !important;

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

@@ -617,10 +617,6 @@ h3 {
   line-height: 2rem;
 }
 
-.v-container {
-  text-align: justify;
-}
-
 ul {
   list-style-type: none;
   padding-left: 0;