vue mobile correction

components/Home/Caroussel.vue

@@ -205,8 +205,9 @@ const carouselItems = ref([
 }
 
 .carousel{
+  margin-top: 1rem;
   height: 900% !important;
-  margin-bottom: -3.5rem;
+  margin-bottom: -2rem;
 }
 .logo-school {
   max-width: 35vw;

components/Home/Promotion.vue

@@ -58,67 +58,76 @@
         <v-row>
           <div class="horizontal-line"></div>
           <div class="picto-group">
-            
             <v-img src="/images/pictoHome/picto1.svg" class="picto-sm"></v-img>
-            <p class="text-outil-sm"> Logiciel de Gestion et communication en ligne</p>
+            <p class="text-outil-sm">
+              Logiciel de Gestion et communication en ligne
+            </p>
           </div>
         </v-row>
         <v-row>
           <div class="horizontal-line"></div>
           <div class="picto-group">
             <v-img src="/images/pictoHome/picto2.svg" class="picto-sm"></v-img>
-            <p class="text-outil-sm"> Site Web intégré et simple d’usage</p>
+            <p class="text-outil-sm">Site Web intégré et simple d’usage</p>
           </div>
         </v-row>
         <v-row>
           <div class="horizontal-line"></div>
           <div class="picto-group">
             <v-img src="/images/pictoHome/picto3.svg" class="picto-sm"></v-img>
-            <p class="text-outil-sm"> Boostez votre visibilité et votre communication avec l’agenda
-              culturel</p>
+            <p class="text-outil-sm">
+              Boostez votre visibilité et votre communication avec l’agenda
+              culturel
+            </p>
           </div>
         </v-row>
         <v-row>
           <div class="horizontal-line"></div>
           <div class="picto-group mb-12">
             <v-img src="/images/pictoHome/picto4.svg" class="picto-sm"></v-img>
-            <p class="text-outil-sm"> Communiquez en réseau</p>
+            <p class="text-outil-sm">Communiquez en réseau</p>
           </div>
-         
         </v-row>
       </div>
 
       <div v-if="!smAndDown">
         <v-row>
-        <v-col cols="6">
-          <v-row class="row-outil">
-            <p class="text-outil-details with-border-top mt-3">
-              Logiciel de Gestion et communication en ligne
-            </p>
-          </v-row>
+          <v-col cols="6">
+            <div class="horizontal-line"></div>
+            <v-row class="picto-container">
+              <img src="/images/pictoHome/picto1.svg" class="picto" />
+              <p class="text-outil-details">
+                Logiciel de Gestion et communication en ligne
+              </p>
+            </v-row>
+            <div class="horizontal-line"></div>
+            <v-row class="picto-container">
+              <img src="/images/pictoHome/picto2.svg" class="picto" />
+              <p class="text-outil-details">
+                Site Web intégré et simple d’usage
+              </p>
+            </v-row>
+            <div class="horizontal-line"></div>
+          </v-col>
 
-          <v-row class="row-outil">
-            <p class="text-outil-details with-border">
-              Site Web intégré et simple d’usage
-            </p>
-          </v-row>
-        </v-col>
-
-        <v-col cols="6">
-          <v-row class="row-outil">
-            <p class="text-outil-details with-border-top">
-              Boostez votre visibilité et votre communication avec l’agenda
-              culturel
-            </p>
-          </v-row>
-
-          <v-row class="row-outil">
-            <p class="text-outil-details with-border">Communiquez en réseau</p>
-          </v-row>
-        </v-col>
-      </v-row>
+          <v-col cols="6">
+            <div class="horizontal-line"></div>
+            <v-row class="picto-container">
+              <img src="/images/pictoHome/picto3.svg" class="picto" />
+              <p class="text-outil-details">
+                Boostez votre visibilité et votre communication avec l’agenda
+                culturel
+              </p>
+            </v-row>
+            <div class="horizontal-line"></div>
+            <v-row class="picto-container">
+              <img src="/images/pictoHome/picto4.svg" class="picto" />
+              <p class="text-outil-details">Communiquez en réseau</p>
+            </v-row>
+            <div class="horizontal-line"></div>
+          </v-col>
+        </v-row>
       </div>
-
     </div>
   </LayoutContainer>
 </template>
@@ -138,6 +147,14 @@ const zoomOut = () => {
 </script>
 
 <style scoped>
+.picto-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /** rapproché du centre */
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .horizontal-line {
   width: 80%;
   margin-left: auto;
@@ -146,7 +163,7 @@ const zoomOut = () => {
   background-color: #d1cdc7;
   margin-bottom: 1rem;
 }
-.text-outil-sm{
+.text-outil-sm {
   font-family: "Barlow";
   font-style: normal;
   font-weight: 400;
@@ -168,6 +185,11 @@ const zoomOut = () => {
   height: 50px;
   margin-right: 2rem;
 }
+.picto {
+  width: 50px;
+  height: 50px;
+  margin-right: 2rem;
+}
 .screen-sm {
   width: 70%;
   object-fit: cover;
@@ -228,9 +250,8 @@ const zoomOut = () => {
   font-weight: 400;
   font-size: 22px;
   line-height: 26px;
-  width: 19rem;
+  width: 25rem;
   color: #0e2d32;
-  margin-left: 10rem;
   margin-bottom: 1rem;
 }