add article + a venir

user/themes/lecampus/scss/theme/_mobile.scss

@@ -4,12 +4,17 @@
       width: 90%!important;
     }
   }
+  .start:not(#form)#archive, .start:not(#form)#articles, .start:not(#form)#calendrier{
+    width: 90%!important;
+  }
 }
 
-@media screen and (max-width: 1080px) {
+@media screen and (max-width: 1150px) {
   header{
     &> nav{
+      min-width: auto!important;
       width: 100%!important;
+      margin: auto 10px;
     }
   }
 }
@@ -17,15 +22,16 @@
 @media screen and (max-width: 1024px) {
   header nav{
     position: relative;
-    width: 90%!important;
+    width: 100%!important;
     .dropmenu{
       background: white;
       display: none;
       position: absolute;
-      left: -6%;
-      top: 100px;
+      left: -10px;
+      top: 70px;
       width: auto!important;
       height: auto;
+      z-index: 999;
       &>ul{
         -webkit-box-orient: vertical!important;
         -webkit-box-direction: normal!important;
@@ -60,9 +66,15 @@
       }
     }
     .logo{
+      position: absolute;
+      width: 150px;
       margin: auto;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      top: 50%;
     }
     .navTrigger {
+      display: block;
       cursor: pointer;
       width: 30px;
       height: 25px;
@@ -249,12 +261,12 @@
   }
   .gal{
     .title_gal{
-      top: 15vw!important;
+      // top: 15vw!important;
       max-width: 60%!important;
     }
   }
 
-  #item{
+  #item, #item-article{
     .content{
 
       .icones{
@@ -265,6 +277,7 @@
   }
 
   #item .demander-votre-devis,
+  #item-article .demander-votre-devis,
   #sublog .demander-votre-devis{
     width: 300px!important;
     height: 110px!important;
@@ -290,16 +303,16 @@
                 transform: translate(0%, -125%)!important;
       }
     }
-    #newsletter #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
-      width: 50%!important;
-    }
+    // #newsletter #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
+    //   width: 50%!important;
+    // }
 }
 
 @media screen and (max-width: 960px) {
   .gal{
     .title_gal{
       max-width: 80%!important;
-      top: 15vw!important;
+      // top: 15vw!important;
     }
     .content_gal{
       width: 2%!important;
@@ -310,7 +323,7 @@
       width: 100%!important;
     }
     .title_gal{
-      top:25vw!important;
+      // top:25vw!important;
       right: 5%!important;
       max-width: 70%!important;
     }
@@ -361,7 +374,7 @@
     }
   }
 
-  #devis.item .title, #devis.sublog .title{
+  #devis.item .title, #devis.sublog .title, #devis.item-article .title{
     border-radius: 30px!important;
   }
   #sublog{
@@ -416,7 +429,7 @@
       margin-top: 0px!important;
     }
   }
-  #item .demander-votre-devis{
+  #item .demander-votre-devis, #item-article .demander-votre-devis{
     width: 300px!important;
     height: 110px!important;
     a{
@@ -432,12 +445,31 @@
       margin-top: 0px!important;
     }
   }
-  .start:not(#form)#archive, .start:not(#form)#calendrier{
-    width: 80%!important;
+  .start:not(#form)#archive, .start:not(#form)#calendrier, .start:not(#form)#articles{
+    width: 90%!important;
   }
 
+  #articles{
+    .card{
+      width: 100%!important;
+      &> a{
+        grid-template-columns: minmax(300px,20%) minmax(400px,calc(80% - 40px))!important;
+      }
+    }
+  }
+  #item, #item-article{
+    .item-wrapper{
+      width: 90%!important;
+      .title-wrapper{
+        flex-direction: column!important;
+        .back{
+          margin: 20px 0!important;
+        }
+      }
+    }
+  }
   .start:not(#form) .body-wrapper .card{
-    width: calc((100% / 2) - 20px)!important;
+    // width: calc((100% / 2) - 20px)!important;
   }
   .start#form .body-wrapper form{
     width: 90%!important;
@@ -486,12 +518,59 @@
 }
 
 @media screen and (max-width: 750px) {
+  header{
+    & > nav{
+      .logo{
+        position: relative;
+        width: auto!important;
+        margin: auto!important;
+        left: 0!important;
+        transform: none!important;
+        top: 0!important;
+      }
+    }
+  }
+
   .start{
     .demander-votre-devis{
       display: none;
     }
   }
-  #item{
+  #item ,#item-article{
+    .title-wrapper{
+      flex-direction: column;
+      .back{
+          margin: 0 0 20px 0!important;
+      }
+    }
+    width: 100%!important;
+    // padding: 0 40px!important;
+  }
+  #articles{
+    .articles-listing{
+      .card{
+        & > a{
+          grid-template-columns: 100%!important;
+          grid-column-gap: 0!important;
+          grid-template-rows: 100%!important;
+          .card-image{
+            img{
+              width: 100%!important;
+              height: auto!important;
+            }
+          }
+          .wrapper-content{
+            grid-column-start:1!important;
+            grid-row-start: 2!important;
+            .readmore{
+              float: right;
+            }
+          }
+        }
+      }
+    }
+  }
+  #item, #item-article{
     .bandeau{
       .img{
         width: 100%;
@@ -522,7 +601,7 @@
   }
   .content{
     margin: 2rem auto!important;
-    width: 90%!important;
+    width: 100%!important;
     p{
       padding: 40px 20px!important;
     }
@@ -652,13 +731,16 @@
       width: 100%!important;
     }
 
-  }  .start:not(#form)#archive, .start:not(#form)#calendrier{
+  }  .start:not(#form)#archive, .start:not(#form)#calendrier, .start:not(#form)#articles{
     width: 90%!important;
     .cat {
       height: auto!important;
       .btn-group{
         &:nth-child(1){
-          width: 75%;
+          width: 100%;
+        }
+        &:nth-child(2){
+          float: left;
         }
         label{
           margin-bottom: 10px;