factorize center-90 css rule

assets/style/main.scss

@@ -14,8 +14,12 @@ body {
 .table-data-left {
   text-align: left;
 }
-.row-custom{
+
+.center-90 {
   width: 90%;
   margin-right: auto;
   margin-left: auto;
 }
+.v-row.center-90 {
+  margin: -12px auto;
+}

components/About/Equipe.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="team">
     <LayoutContainer class="mb-12">
-      <v-row class="mt-12">
+      <v-row class="mt-12 center-90">
         <LayoutUISubTitle>
           Notre équipe
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <LayoutUITitle>
           Une équipe spécialisée et passionnée
         </LayoutUITitle>
@@ -18,7 +18,7 @@
         </span>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <v-col
           cols="12" sm="6" md="4" lg="3"
           v-for="associate in associates"
@@ -41,7 +41,7 @@
         </v-col>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <v-col
           cols="12" sm="6" md="4" lg="3"
           v-for="employee in employees"
@@ -129,12 +129,6 @@ const employees: Array<SocietyMember> = [
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .v-card {
   max-width: 284px;
   border: none !important;

components/About/Logiciels.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="softwares">
     <LayoutContainer>
-      <v-row class="mb-6 custom-row">
+      <v-row class="mb-6 center-90">
         <LayoutUISubTitle>
           Nos logiciels
         </LayoutUISubTitle>
@@ -11,7 +11,7 @@
         </LayoutUITitle>
       </v-row>
 
-      <v-row class="mb-12 custom-row">
+      <v-row class="mb-12 center-90">
         <v-col cols="3">
           <p class="text-justify mr-4 ml-6 mb-6">
             Découvrez notre gamme de logiciels de gestion & de communication
@@ -103,12 +103,6 @@ const items: Array<{imageUrl: string, logoUrl: string, class: string, link: stri
   background: #f8f8f8;
 }
 
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 ul {
   list-style: none;
   padding-left: 0;

components/About/MenuScroll.vue

@@ -1,123 +0,0 @@
-<template>
-  <LayoutContainer>
-    <v-row>
-      <v-col
-        cols="12"
-        class="menu-container"
-        :class="{ 'sticky-menu': isSticky }"
-      >
-        <div v-for="menu in menus" :key="menu.label" @click="navigate(menu)">
-          <v-chip v-if="activeMenu === menu.label" class="active-menu">
-            {{ menu.label }}
-          </v-chip>
-          <span v-else>{{ menu.label }}</span>
-        </div>
-      </v-col>
-    </v-row>
-  </LayoutContainer>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, reactive } from "vue";
-
-const refs = reactive({
-  about: null,
-  valeurs: null,
-  logiciels: null,
-  agenda: null,
-  histoire: null,
-  equipe: null,
-});
-
-const menus = [
-  { label: "Qui sommes-nous" },
-  { label: "Nos valeurs" },
-  { label: "Nos logiciels" },
-  { label: "L'agenda opentalent" },
-  { label: "Notre Histoire" },
-  { label: "Notre équipe" },
-];
-
-const isSticky = ref(false);
-
-const handleScroll = () => {
-  const scrollPosition = window.scrollY;
-
-  if (scrollPosition > 800) {
-    isSticky.value = true;
-  } else {
-    isSticky.value = false;
-  }
-
-  for (const key of Object.keys(refs)) {
-    const element = refs[key];
-    if (element) {
-      const top = element.offsetTop;
-      const bottom = top + element.offsetHeight;
-      if (scrollPosition >= top && scrollPosition < bottom) {
-        activeMenu.value = key;
-        break;
-      }
-    }
-  }
-};
-
-onMounted(() => {
-  Object.keys(refs).forEach(key => {
-    refs[key] = document.getElementById(key);
-  });
-
-  window.addEventListener('scroll', handleScroll);
-});
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll);
-});
-
-
-const activeMenu = ref(menus[0].label);
-
-const navigate = (menu) => {
-  activeMenu.value = menu.label;
-  const element = document.getElementById(menu.label);
-  if (element) {
-    element.scrollIntoView({ behavior: "smooth" });
-  }
-};
-</script>
-
-<style scoped>
-
-.sticky-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-.menu-container {
-  z-index: 3;
-  display: flex;
-  justify-content: space-around;
-  background: white;
-  color: #071b1f;
-  font-size: 1rem;
-  line-height: 19px;
-  align-items: center;
-  text-align: center;
-  letter-spacing: 0.18em;
-  text-transform: uppercase;
-  border-bottom: 0.1rem solid #eaeaea;
-}
-.v-chip.active-menu {
-  background: var(--Vert-100, #091D20);;
-  color: white;
-}
-
-.menu-container div:hover {
-  cursor: pointer;
-  text-decoration: underline;
-  z-index: 15;
-}
-</style>

components/About/Presentation.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="about">
     <LayoutContainer>
-      <v-row class="mt-12 custom-row">
+      <v-row class="mt-12 center-90">
         <v-col cols="4">
           <LayoutUISubTitle>
             Qui sommes-nous ?
@@ -71,12 +71,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .italic-title {
   text-align: justify;
   font-style: italic;

components/About/Valeurs.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="values">
     <LayoutContainer class="mt-12">
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle>
           Les valeurs qui nous portent
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row class="mt-6 custom-row align-center mb-12">
+      <v-row class="mt-6 center-90 align-center mb-12">
         <v-col cols="6">
           <v-img
             src="/images/about/valeurs/valeur.png"
@@ -89,12 +89,6 @@ const values: Array<Array<SocietyValue>> = [
   width: 450px;
 }
 
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .values {
   .v-row {
     border-top: 1px solid #e5e5e5;

components/Common/Agenda.vue

@@ -4,7 +4,7 @@ Section "Agenda des évènements"
 <template>
   <AnchoredSection id="agenda">
     <LayoutContainer class="mb-12" >
-      <v-row class="custom-row align-center my-6">
+      <v-row class="center-90 align-center my-6">
         <v-col cols="4" class="align-center">
           <LayoutUITitle>
             L'agenda Opentalent
@@ -32,13 +32,13 @@ Section "Agenda des évènements"
         </v-col>
       </v-row>
 
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <p class="agenda-details">
           Retrouvez tous les évènements culturels autour de chez vous.
         </p>
       </v-row>
 
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <v-col cols="12">
           <Carousel
             ref="carousel"
@@ -172,12 +172,6 @@ const goNext = () => carousel.value!.next();
   background: #F8F8F8
 }
 
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .carousel-controls {
   display: flex;
   flex-direction: row;

components/Common/Avantages.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-row>
+    <v-row class="center-90">
       <LayoutUISubTitle>
         Découvrez les avantages de la solution
       </LayoutUISubTitle>
@@ -10,7 +10,7 @@
       </LayoutUITitle>
     </v-row>
 
-    <v-row>
+    <v-row class="center-90">
       <v-col
         cols="12"
         md="4"
@@ -48,8 +48,5 @@ const props = defineProps({
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
 }
 </style>

components/Common/Card/Benefit.vue

@@ -42,12 +42,6 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 hr {
   opacity: 70%;
 }

components/Common/Presentation.vue

@@ -4,7 +4,7 @@ Section "Présentation" d'une page Logiciel
 <template>
   <div id="Presentation">
     <LayoutContainer>
-      <v-row>
+      <v-row class="center-90">
 
         <!-- Colonne 1 (sous-titre, illustration logiciels, prix) -->
         <v-col cols="5">
@@ -145,12 +145,6 @@ const props = defineProps({
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .pricing-rectangle {
   display: flex;
   flex-direction: row;

components/Common/ReviewSection.vue

@@ -1,6 +1,6 @@
 <template>
     <LayoutContainer>
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <v-col cols="3">
           <div class="controls-section">
             <h3>
@@ -86,12 +86,6 @@ const goNext = () => {
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .v-container {
   padding: 0 !important;
 }

components/Common/Table/Comparatif.vue

@@ -1,6 +1,6 @@
 <template>
   <LayoutContainer>
-    <v-row>
+    <v-row class="center-90">
       <table>
         <thead>
           <tr>
@@ -105,9 +105,6 @@ const props = defineProps({
   display: flex;
   flex-direction: row;
   justify-content: center;
-  margin-left: auto;
-  margin-right: auto;
-  width: 90%;
 }
 
 table {

components/Formation/Catalogue.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="catalog">
     <LayoutContainer>
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle>
           Découvrez notre catalogue de formation
         </LayoutUISubTitle>
@@ -11,7 +11,7 @@
         </LayoutUITitle>
       </v-row>
 
-      <v-row class="custom-row catalog">
+      <v-row class="center-90 catalog">
         <v-col
           v-for="(course, index) in courses"
           :key="index"
@@ -207,17 +207,8 @@ const courses: Array<Training> = [
   text-align: justify;
 }
 
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .catalog {
   padding: 2rem;
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
 
   .v-card {
     border: none !important;

components/Formation/Certification.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="certification">
     <LayoutContainer>
-      <v-row>
+      <v-row class="center-90">
         <v-col cols="5">
           <LayoutUISubTitle>
             DES FORMATIONS CERTIFIÉES
@@ -47,12 +47,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .bloc-certif {
   text-align: justify;
 }

components/Formation/OPCA.vue

@@ -1,14 +1,14 @@
 <template>
   <AnchoredSection id="financing">
     <LayoutContainer class="alt-theme py-6 my-6">
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle>
           Financement des formations
         </LayoutUISubTitle>
       </v-row>
 
       <v-container>
-        <v-row class="align-center custom-row">
+        <v-row class="align-center center-90">
           <v-col cols="6">
             <v-img
               src="/images/formation/programme.jpg"
@@ -56,18 +56,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-@media (min-width: 1200px) {
-  .custom-row {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .opca-img {
   height: 400px;
   width: 450px;

components/Formation/Participation.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="inscription">
     <LayoutContainer class="alt-theme">
-      <v-row>
+      <v-row class="center-90">
         <v-col cols="12">
           <LayoutUISubTitle>
             Accessibilité
@@ -13,7 +13,7 @@
         Vous souhaitez participer à une formation ?
       </h3>
 
-      <v-row class="mb-12">
+      <v-row class="mb-12 center-90">
         <v-col cols="12">
           <v-img
             src="/images/formation/participation.jpg"
@@ -22,7 +22,7 @@
         </v-col>
       </v-row>
 
-      <v-row class="mb-12">
+      <v-row class="mb-12 center-90">
         <v-col cols="12">
           <div class="details-participations">
             <p class="mb-6">
@@ -56,12 +56,6 @@
 </template>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 @media (min-width: 1200px) {
   .v-row {
     min-width: 100%;

components/Formation/Presentation.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="presentation">
     <LayoutContainer>
-      <v-row class="mt-6">
+      <v-row class="mt-6 center-90">
         <LayoutUISubTitle>
           Présentation de nos formations
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row class="mb-12">
+      <v-row class="mb-12 center-90">
         <v-col cols="6">
           <v-img
             src="/images/formation/programme2.jpg"
@@ -38,7 +38,7 @@
         </v-col>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <v-col cols="6">
           <h3 class="title-programme mb-6 mt-4">
             Des formations à la demande et sur-mesure
@@ -68,12 +68,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .v-img {
   width: 80%;
   height: 100%;

components/Home/Besoin.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer :overflow="false">
+  <LayoutContainer>
     <v-row
       v-if="!mdAndDown"
       class="mt-6"

components/Home/EventAgenda.vue

@@ -2,7 +2,7 @@
 Section "Agenda" de la page d'accueil
 -->
 <template>
-  <LayoutContainer :overflow="false">
+  <LayoutContainer>
     <div class="container">
       <div class="d-flex align-center justify-center">
         <h2>

components/Home/Solution.vue

@@ -3,7 +3,7 @@ Section "Solutions" de la page d'accueil
 -->
 
 <template>
-  <LayoutContainer :overflow="false">
+  <LayoutContainer>
 
     <div class="d-flex justify-center align-center flex-column">
       <v-icon
@@ -19,7 +19,7 @@ Section "Solutions" de la page d'accueil
       Trouvez la solution faites pour vous
     </h3>
 
-    <v-row class="solutions">
+    <v-row class="solutions center-90">
       <v-col
         v-for="(solution, index) in solutions"
         :key="index"
@@ -189,9 +189,6 @@ h3 {
 }
 
 .v-row.solutions {
-  width: 90%;
-  margin-right: auto;
-  margin-left: auto;
 
   small {
     font-weight: 600;

components/JoinUs/MissionDetail.vue

@@ -72,7 +72,7 @@
           </v-row>
 
           <v-row>
-            <p class="custom-row description mb-12">
+            <p class="center-90 description mb-12">
               <!-- TODO: à revoir, en sachant qu'injecter du html ici serait une faille de sécurité sévère :( -->
               {{ job.content }}
             </p>
@@ -87,7 +87,7 @@
             </v-btn>
           </v-row>
 
-          <v-row class="d-flex justify-space-between custom-row">
+          <v-row class="d-flex justify-space-between center-90">
             <p>
               MOTS CLÉS
             </p>
@@ -96,7 +96,7 @@
             </div>
           </v-row>
 
-          <v-row class="d-flex justify-space-between mb-8 custom-row">
+          <v-row class="d-flex justify-space-between mb-8 center-90">
             <p class="key-word mt-3">
               <!-- TODO: remplacer par la bonne prop -->
               ROCK CONCERT FESTIVAL
@@ -134,12 +134,6 @@ const formatDate = (date: string) => {
 </script>
 
 <style scoped lang="scss">
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .progress {
   margin: 32px auto 128px auto;
 }

components/Layout/Container.vue

@@ -1,33 +1,18 @@
 <template>
   <v-container class="container">
     <v-row justify="center" align="center">
-      <v-col cols="12" sm="12" md="12">
+      <v-col cols="12">
         <slot />
       </v-col>
     </v-row>
   </v-container>
 </template>
 
-<script setup>
-import { ref } from "vue";
-
-const props = defineProps({
-  overflow: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const overflow = ref(props.overflow);
-</script>
-
-<style scoped>
+<style scoped lang="scss">
 .container {
   position: relative;
   max-width: 100%;
-  min-width: 100; 
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
-
 </style>

components/Logiciels/Artist/Abonnement.vue

@@ -1,7 +1,7 @@
 <template>
   <AnchoredSection id="subscription">
     <LayoutContainer>
-      <v-row class="mt-12">
+      <v-row class="mt-12 center-90">
         <v-col cols="4">
           <LayoutUISubTitle>
             S'abonner dès maintenant
@@ -93,12 +93,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.v-container {
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .subscription-steps ol {
   list-style-type: decimal;
   padding-left: 2rem;

components/Logiciels/Artist/Formations.vue

@@ -3,7 +3,7 @@
     <LayoutContainer>
       <div class="alt-theme">
         <v-container>
-          <v-row class="custom-row">
+          <v-row class="center-90">
             <LayoutUISubTitle class="mt-12" >
               Pour aller plus loin
             </LayoutUISubTitle>
@@ -45,7 +45,7 @@
       TODO: Déplacer le "Quelques chiffres" dans un composant à part,
       voir comment gérer ça avec les anchored sections
       -->
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle class="mb-12">
           Quelques chiffres
         </LayoutUISubTitle>
@@ -113,12 +113,6 @@ const items: Ref<Array<{ src: string }>> = ref([
   color: var(--on-primary-color-alt);
 }
 
-.custom-row {
-  width: 90%;
-  margin-right: auto;
-  margin-left: auto;
-}
-
 .formation {
   .v-img {
     width: 600px;

components/Logiciels/Manager/Banner.vue

@@ -25,9 +25,7 @@
 </template>
 
 <style scoped>
-
-
-:deep().cover-image {
+:deep(.cover-image) {
   object-position: center 40% !important;
 }
 </style>

components/Logiciels/Manager/Network.vue

@@ -1,13 +1,13 @@
 <template>
   <AnchoredSection id="network">
     <LayoutContainer>
-      <v-row class="mt-12">
+      <v-row class="mt-12  center-90">
         <LayoutUISubTitle>
           Un réseau pyramidal
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row>
+      <v-row class="center-90">
         <v-col cols="12" lg="6" md="6">
           <LayoutUITitle>
             Opentalent Manager, un logiciel adapté à chacun
@@ -34,12 +34,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 @media (min-width: 2000px) {
   .v-row {
     width: 70%;

components/Logiciels/School/Contact.vue

@@ -38,7 +38,7 @@
       </v-row>
 
       <!-- Section "Adhérent CMF" -->
-      <v-row class="custom-row" >
+      <v-row class="center-90" >
         <v-col cols="6" >
           <LayoutUISubTitle>
             Adhérents CMF
@@ -88,11 +88,6 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 </script>
 
 <style scoped>
-.custom-row {
-  width: 90%;
-  margin: auto;
-}
-
 .help-img {
   width: 100%;
   height: 90%;

components/News/Details.vue

@@ -10,7 +10,7 @@
     </v-row>
 
     <div class="news-section">
-      <v-row class="mb-6 custom-row">
+      <v-row class="mb-6 center-90">
         <v-col class="d-flex align-items-center">
           <v-btn
             to="/actualites"
@@ -34,7 +34,7 @@
         </div>
 
         <div v-else-if="newsItem !== null" class="news">
-          <v-row class="custom-row">
+          <v-row class="center-90">
             <v-col cols="6">
               <v-img :src="getImageUrl(newsItem.attachment)"/>
             </v-col>
@@ -46,7 +46,7 @@
             </v-col>
           </v-row>
 
-          <v-row class="custom-row">
+          <v-row class="center-90">
             <p class="description">
               <!-- TODO: idem que pour les annonces -->
               {{ newsItem.bodyText }}
@@ -59,7 +59,7 @@
             </v-btn>
           </v-row>
 
-          <v-row class="d-flex justify-space-between custom-row">
+          <v-row class="d-flex justify-space-between center-90">
             <p>
               MOTS CLÉS
             </p>
@@ -68,7 +68,7 @@
             </div>
           </v-row>
 
-          <v-row class="d-flex justify-space-between mb-8 custom-row">
+          <v-row class="d-flex justify-space-between mb-8 center-90">
             <p class="key-word mt-3">
               <!-- TODO: remplacer par la bonne prop -->
               ROCK CONCERT FESTIVAL
@@ -108,12 +108,6 @@ const getImageUrl = (attachment: string): string | null => {
 </script>
 
 <style scoped>
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .news {
   .v-img {
     width: 80%;

components/Webinaire/Catalogue.vue

@@ -1,13 +1,13 @@
 <template>
   <LayoutContainer>
     <div class="grey-container">
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUISubTitle>
           Des webinaires pour tous
         </LayoutUISubTitle>
       </v-row>
 
-      <v-row class="custom-row">
+      <v-row class="center-90">
         <LayoutUITitlePage>
           SIMPLIFIEZ LA GESTION ET LA COMMUNICATION DE VOTRE STRUCTURE CULTURELLE
           <template #subtitle>
@@ -16,7 +16,7 @@
         </LayoutUITitlePage>
       </v-row>
 
-      <v-row class="custom-row catalog">
+      <v-row class="center-90 catalog">
         <v-col
           v-for="(course, index) in courses"
           :key="index"
@@ -273,12 +273,6 @@ const closeModal = () => {
 </script>
 
 <style scoped lang="scss">
-.custom-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .v-card {
   border: none !important;
   box-shadow: none !important;
@@ -287,9 +281,6 @@ const closeModal = () => {
 
 .catalog {
   padding: 2rem;
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
 
   .title-card-container {
     display: flex;

components/Webinaire/FAQ.vue

@@ -3,7 +3,7 @@ Foire aux questions
 -->
 <template>
   <LayoutContainer>
-    <v-row>
+    <v-row class="center-90">
       <LayoutUISubTitle>
         Des questions ?
       </LayoutUISubTitle>
@@ -85,13 +85,6 @@ function isOpen(index: number) {
 
 
 <style scoped lang="scss">
-.v-row {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
 .faq {
   padding: 1rem;
   width: 90%;