added engagement de 12 mois to product variations descriptions

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -1282,28 +1282,60 @@ article.node--type-frontpage{
               }
             }
 						.field--name-variations{
-							.field__item{
+							>.field__item{
+                // text-align: center;
+                // display: table;
+                // width: 100%;
+                // &:last-child{
+                //   margin: 0.1em 0 0;
+                // }  
+                margin-top: 0.5em;
 								>div{
-									display: flex;
-									flex-direction: row;
-									justify-content: center;
-									align-items: baseline;
-									.form-actions,p{
-										margin:0;
-									}
+									// display: flex;
+									// flex-direction: row;
+									// justify-content: center;
+									// align-items: center;
+                  // display: table-row;
+                  // height: 1em; 
+                  display: grid;
+                  grid-template-columns: 50% 50%;
+
+                  >*{
+                    // height:2em;
+                    // display: table-cell;
+                    // vertical-align: middle;
+                    align-self: center;
+                  }
 									.field--name-field-description{
-										margin-right: 0.5em;
-										p{
+                    text-align: right;
+                    // width: 55%;
+										// margin-right: 0.5em;
+                    // min-width: 10em;
+										h4{
 											font-size: 1.512em;
 											font-weight: 800;
 											color: #fff;
 											white-space: nowrap;
-											text-align: right;
+                      line-height: 1;
 										}
+                    p{
+                      font-size: 0.882em;
+                      line-height: 0.8;
+                      margin: 0;
+                    }
 									}
-									input.button--add-to-cart{
-										@include btn;
-									}
+                  form{
+                    text-align: left;
+                    padding-left: 1em;
+                    // position: relative;
+                    .form-actions{
+                      margin:0;
+                    }
+                    input.button--add-to-cart{
+                      @include btn;
+                      margin: 0;
+                    }
+                  }
 								}
 							}
 						}
@@ -2264,27 +2296,40 @@ article.card{
       }
     }
     aside{
-      padding:1em 0;
+      // padding:1em 0;
       .variation{
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: center;
-        align-items:stretch;
+        // display: flex;
+        // flex-flow: row nowrap;
+        // justify-content: center;
+        // align-items:stretch;
+        display: grid;
+        grid-template-columns: 50% 50%;
+        margin-top: 0.5em;
+        >*{
+          align-self: center;
+        }
         div.variation-description{
-          flex: 0 0 6.7em;
-          font-size: 1.5em;
-          font-weight: 800;
+          // flex: 0 0 auto;
           color: #fff;
+          text-align: right;
+          h4{
+            font-size: 1.5em;
+            font-weight: 800;
+            margin:0;
+            line-height: 1;
+          }
           p{
             margin:0;
-            text-align: right;
-						padding-right: 0.5em;
-						padding-top: 0.1em;
+            line-height: 0.8;
           }
         }
-        button{
-          @include btn;
-          background-color: #fff;
+        div.actions{
+          text-align: left;
+          padding-left: 1em;
+          button{
+            @include btn;
+            background-color: #fff;
+          }
         }
       }
 			a.btn{
@@ -2294,19 +2339,19 @@ article.card{
     }
     &:nth-child(1){
       background-color: $color-base;
-      aside .variation button{
+      aside .variation .actions button{
         color: $color-base;
       }
     }
     &:nth-child(2){
       background-color: $color-webshowroom;
-      aside .variation button{
+      aside .variation .actions button{
         color: $color-webshowroom;
       }
     }
 		&:nth-child(3){
       background-color: $color-showrooms;
-      aside .variation button,
+      aside .variation .actions button,
 			a.btn{
         color: $color-showrooms;
       }

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -13,13 +13,15 @@
         :key="variation.id"
       >
         <div class="variation-description" v-html="variation.description"/>
-        <button
-          type="button"
-          name="addtocart"
-          @click.stop="checkaddtocart($event, variation.id)"
-        >
-          {{ $t('default.'+variation_btn_txt[variation.id]) }}
-        </button>
+        <div class="actions">
+          <button
+            type="button"
+            name="addtocart"
+            @click.stop="checkaddtocart($event, variation.id)"
+          >
+            {{ $t('default.'+variation_btn_txt[variation.id]) }}
+          </button>
+        </div>
       </div>
       <div v-if="product.id == 4">
         <a href="/pricing/multijoueur" class="btn">