function open_pack

user/themes/lecampus/scss/theme/_blog.scss

@@ -254,12 +254,10 @@
           overflow: hidden;
           display: inline-flex;
           justify-content: center;
-          max-height: 250px;
           img{
             display: inline-block;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
+            height: 250px;
+            width: auto;
           }
         }
         .wrapper-content{
@@ -270,16 +268,11 @@
           padding: 20px 20px;
           width: 100%;
           height: 100%;
-          .wrapper-info{
-            display: inline-flex;
-            width: 100%;
-            & > div{
-            }
-            .cat{
-              margin:0 0 0 3px;
-              height: inherit!important;
-              width: auto!important;
-            }
+          .date{
+            float: left;
+          }
+          .cat{
+            margin-left: 3px;
           }
           .readmore{
             float: right;
@@ -289,7 +282,6 @@
       .card-content{
         overflow: hidden;
         height: 7.7rem;
-
         h2{
           font-size: 0.9rem;
         }
@@ -362,6 +354,117 @@
   }
 }
 
+.start#form{
+  .entete{
+    border-top: 1px solid $light-blue
+  }
+  h2{
+    margin-top: 0;
+  }
+  .body-wrapper{
+    width: 100%;
+    min-width: 250px;
+    margin: auto auto 140px auto;
+    form{
+      width: calc( (100% / 2));
+      margin-top: 20px;
+      margin: auto;
+      & > div{
+        width: 100%;
+        margin: 20px 0;
+        border-bottom: 1px solid $red;
+        .form-data{
+          @include inlineflex();
+          margin: 20px 0px;
+          &> div{
+            overflow: hidden;
+            margin: 10px 10px;
+            min-width: 100px;
+            border: 2px solid $red;
+            border-radius: 30px;
+            padding: 10px 20px;
+            &.check{
+              background: $red;
+              color: white;
+            }
+            input{
+              border: none;
+            }
+            input[type='radio'] {
+              visibility: hidden;
+              position: absolute;
+            }
+            label{
+              cursor: pointer;
+            }
+          }
+        }
+        &:nth-of-type(n+5):not(:nth-of-type(n+12)){
+          width: 50%;
+          float: left;
+          border-bottom: 0px;
+          .form-data{
+            width: 100%;
+            & > div{
+              width: 100%;
+            }
+          }
+        }
+        &:nth-of-type(11){
+          border-bottom: 1px solid $red !important;
+          width: 100%!important;
+          .form-data {
+            width: 50%!important;
+          }
+        }
+        &.button-wrapper{
+          background: $red;
+          height: 100px;
+          position: absolute;
+          left: 0;
+          width: 100%;
+          button{
+            margin-right: 25%;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            -webkit-transform: translateY(-50%);
+                    transform: translateY(-50%);
+            background: white;
+            border-radius: 30px;
+            padding: 10px 35px;
+            box-shadow:none;
+            border:0;
+          }
+        }
+      }
+    }
+    #send-valide{
+      -webkit-transform: translate(-50%, -50%);
+              transform: translate(-50%, -50%);
+      background: $red;
+      border-radius: 20px;
+      position: fixed;
+      width: 30%;
+      min-height: 30%;
+      left: 50%;
+      top: 50%;
+      padding: 50px;
+      .toast{
+        position: relative;
+        text-align: center;
+        color: white;
+      }
+      .ok{
+        color: white;
+        position: absolute;
+        right: 20px;
+        bottom: 20px;
+      }
+    }
+  }
+}
+
 .header-wrapper{
 .title{
   h2{
@@ -399,21 +502,19 @@
   // background-size: cover;
   height: auto;
   border-top: 10px solid $green;
-  width: 100%;
   .entete_c{
     @include inlineflex;
-    flex-direction: column;
     text-align: center;
     width: 70%;
     margin: 50px auto;
     position: relative;
 
     h1{
-      width: max-content;
-      max-width: 100%;
+      width: auto;
       margin-bottom: 20px;
       background: $red;
       border-radius: 30px;
+      width: auto;
       padding: 10px 20px;
     }
   }
@@ -978,9 +1079,6 @@
           margin: 0 0 1.2rem 0;
           line-height: 1.5rem;
         }
-        a{
-          border-bottom: 1px solid $red;
-        }
         h2{
           font-size: 1.2rem;
           font-family: $Bold;
@@ -1054,6 +1152,7 @@
   width: 100%;
   // height: 300px;
   .title{
+    visibility: hidden;
     width: 200px;
     height: 200px;
     background: $red;
@@ -1075,7 +1174,7 @@
     margin-right: 20px;
     height: auto;
     p{
-      padding: 20px 20px 20px 100px;
+      padding: 20px 20px 20px 20px;
       color: black;
       text-align: left;
       strong{
@@ -1105,7 +1204,7 @@
 }
 
 #devis{
-  &.item, &.sublog, &.item-article, &.nos-offres ,&.nos-packs{
+  &.item, &.sublog, &.item-article{
     background: $red;
     height: auto;
     padding: 20px 0;