css ajust

user/themes/le_style_de_lours_modif/scss/theme/_media-quieries.scss

@@ -1,6 +1,18 @@
-@media screen and (max-width: 980px) {
+@media screen and (max-width: 960px) {
+  header{
+    .logo{
+      & > div{
+        width: 100%;
+      }
+    }
+  }
   #start{
     .section{
+      .section-content{
+        .content{
+          width: 90%;
+        }
+      }
       &:not(:nth-last-child(1)){
         margin-bottom: 100px;
       }
@@ -27,9 +39,14 @@
       }
     }
   }
+  footer{
+    section{
+      width: 90%;
+    }
+  }
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 700px) {
   Header{
     .title{
       height: 110px;
@@ -45,6 +62,9 @@
     }
     .logo{
       flex-direction: column-reverse;
+      & > div{
+        width: 100%;
+      }
       .why_lsdo {
         display: none;
       }
@@ -62,6 +82,15 @@
   }
   #start{
     .section{
+      .sous-section{
+        flex-direction: column;
+        justify-content: center;
+        .blocks{
+          width: 90%;
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
       &:not(#home){
         & > .sous-section{
           .no-gal{
@@ -77,6 +106,25 @@
         }
       }
     }
+    #contact{
+      .blocks{
+        &:nth-of-type(1){
+          align-items: center;
+          p{
+            text-align: center!important;
+          }
+
+        }
+        &:nth-of-type(2){
+          align-items: center;
+          .content{
+            p{
+              text-align: center!important;
+            }
+          }
+        }
+      }
+    }
   }
   footer{
     section{
@@ -102,6 +150,22 @@
 
 
   #start{
+    margin: 0;
+    .section{
+      .sous-section{
+        & > section{
+          margin: 0 !important;
+          padding: 0;
+          .title{
+            margin-bottom: 20px;
+          }
+          h3{
+            white-space: nowrap!important;
+            margin-bottom: 20px;
+          }
+        }
+      }
+    }
     .section:not(#home) {
       & > .sous-section{
         .no-gal:not(#clients):nth-of-type(n+3) {
@@ -165,6 +229,7 @@
       }
       #clients{
         .images{
+          justify-content: center;
           img{
             margin:10px 10px;
             min-width: 70%;
@@ -179,10 +244,6 @@
         }
         .content{
           width: 250px!important;
-          img{
-            bottom: 20px!important;
-            top: auto!important;
-          }
         }
       }
     }
@@ -199,6 +260,7 @@
     }
   }
   footer{
+    margin: 0;
     & > section{
       &:last-child{
         p:last-child {

user/themes/le_style_de_lours_modif/scss/theme/_start.scss

@@ -76,23 +76,43 @@ body {
         .txt {
             display: inline-flex;
             justify-content: center;
-            align-items: left;
+            align-items: center;
             flex-direction: column;
             position: absolute;
             width: 100%;
             height: 100%;
-            top: -100%;
+            top: 0%;
             left: 0;
             background: transparent;
-            transition: top 1s ease;
+            transform: scale(0.95);
+            transition: transform 0.5s ease, background 0.5s ease;
+            .content{
+              padding: 20px;
+            }
+            p, ul, li, a{
+              color: transparent;
+            }
+            ul{
+              margin-left: 20px;
+              margin-bottom: 20px;
+            }
+            li{
+              list-style: initial!important;
+            }
         }
     }
 
     &:hover {
         .txt {
-            transition: top 1s ease;
-            top: 0;
+            transition: transform 0.5s ease, background 0.5s ease;
+            transform: scale(1);
             background: $blue;
+            p, ul, li, a{
+              color: white;
+            }
+            .content{
+              overflow: auto;
+            }
         }
     }
 }
@@ -121,7 +141,7 @@ body {
       position: relative;
       margin-bottom: 150px;
       &:not(:first-child){
-        margin-bottom:150px;
+        margin-bottom: 150px;
       }
       &:last-child{
         margin-bottom: 0px!important;
@@ -144,6 +164,7 @@ body {
                 width: 15%;
                 min-width: 150px;
                 height: 100%;
+                margin-bottom: 10px;
             }
         }
       }

user/themes/le_style_de_lours_modif/scss/theme/_typography.scss

@@ -91,9 +91,9 @@ header {
     .logo {
         #user {
             p {
-                font-size: $font32;
+                font-size: 1.8rem;
                 font-family: $Regular-L;
-                line-height: $lineH32;
+                line-height: 2.5rem;
                 letter-spacing: $letterI1;
             }
         }
@@ -112,7 +112,7 @@ header {
 }
 
 #home {
-    & > p {
+   p {
         font-family: $Roboto-L;
         text-align: center;
         font-size: $fontPi;

user/themes/le_style_de_lours_modif/templates/item-etapes.html.twig

@@ -9,8 +9,10 @@
 
     {% if child.content %}
     <div class="txt">
+      <div class="content">
       {{ child.content }}
     </div>
+    </div>
     {% endif %}
   </div>