added optional orientation attribute to mediaquery mixins, fixed modalecard in landscape mode

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -49,26 +49,45 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
 //   }
 // }
 
-@mixin col-mediaquery-min-max($min, $max) {
+@mixin col-mediaquery-min-max($min, $max, $orientation: false) {
   $bp: ($column_width + $column_goutiere) * $min + 1px;
   $upbp: ($column_width + $column_goutiere) * ($max);
-  @media (min-width: $bp) and (max-width: $upbp) {
-    @content;
+  @if $orientation {
+    @media (orientation: $orientation) and (min-width: $bp) and (max-width: $upbp) {
+      @content;
+    }
+  } @else {
+    @media (min-width: $bp) and (max-width: $upbp) {
+      @content;
+    }
   }
 }
-@mixin col-mediaquery-min($i) {
+@mixin col-mediaquery-min($i, $orientation: false) {
   $bp: ($column_width + $column_goutiere) * $i + 1px;
-  @media (min-width: $bp) {
-    @content;
+  @if $orientation {
+    @media (orientation: $orientation) and (min-width: $bp) {
+      @content;
+    }
+  } @else {
+    @media (min-width: $bp) {
+      @content;
+    }
   }
 }
-@mixin col-mediaquery-max($i) {
+@mixin col-mediaquery-max($i, $orientation: false) {
   $bp: ($column_width + $column_goutiere) * $i;
-  @media (max-width: $bp) {
-    @content;
+  @if $orientation {
+    @media (orientation: $orientation) and (max-width: $bp) {
+      @content;
+    }
+  } @else {
+    @media (max-width: $bp) {
+      @content;
+    }
   }
 }
 
+
 // build break points for each multiple of cards row
 // cards will always be centered, using all available space
 %grided-width{

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

@@ -82,6 +82,11 @@ header[role="banner"]{
 				display: inline-block;
 			}
 		}
+		@include col-mediaquery-max(4, landscape){
+			.slogan{
+				display: none;
+			}
+		}
   }
 
 	@include col-mediaquery-max(3){
@@ -524,11 +529,47 @@ header[role="banner"]{
       }
     }
 
+		@include col-mediaquery-max(4, landscape){
+			#block-materiosapisearchblock{
+	      align-self: flex-start;
+	    }
+		}
   }
   #block-pagetitle{
     // float: left;
     padding:1em 0;
 
+		h2{
+			margin:0;
+			font-size: 1.512em;
+			text-transform: capitalize;
+			font-weight: 300;
+
+			body.path-home & {
+				display: none;
+			}
+			body:not(.path-home) & {
+				padding:0.5em 1em;
+			}
+			body.path-blabla &,
+			body.path-checkout & {
+				color: #fff;
+				background-color: $color-blabla;
+			}
+			body.path-showrooms & {
+				color: #fff;
+				background-color: $color-showrooms;
+			}
+			body.path-base &,
+			body.path-thematique & {
+				color: #fff;
+				background-color: $color-base;
+			}
+			body.path-pricing & {
+				color: #fff;
+				background-color: $color-webshowroom;
+			}
+		}
     @include col-mediaquery-max(3){
 	    body.path-frontpage &, body.path-home & {
 			  display: none;
@@ -539,39 +580,15 @@ header[role="banner"]{
 					padding: 0.5em 1em 0!important;
 				}
 			}
-
 		}
-    h2{
-      margin:0;
-      font-size: 1.512em;
-      text-transform: capitalize;
-      font-weight: 300;
-
-	    body.path-home & {
-	      display: none;
-	    }
-      body:not(.path-home) & {
-        padding:0.5em 1em;
-      }
-      body.path-blabla &,
-      body.path-checkout & {
-        color: #fff;
-        background-color: $color-blabla;
-      }
-      body.path-showrooms & {
-        color: #fff;
-        background-color: $color-showrooms;
-      }
-      body.path-base &,
-      body.path-thematique & {
-        color: #fff;
-        background-color: $color-base;
-      }
-      body.path-pricing & {
-        color: #fff;
-        background-color: $color-webshowroom;
-      }
-    }
+		@include col-mediaquery-max(4, landscape){
+			padding:0 0 1em;
+			h2{
+				body:not(.path-home) & {
+					padding:0 0.6em 0.1em;
+				}
+			}
+		}
   }
 
   #block-materiosapisearchblock{
@@ -1306,6 +1323,9 @@ article.node--type-frontpage{
     font-weight: 500;
     margin: 0;
     padding: 0 0 0.5em 0;
+		@include col-mediaquery-max(4, landscape){
+			display:none;
+		}
   }
 
   &>ul{
@@ -1641,7 +1661,7 @@ article.card{
     >.col{
       flex-basis: 50%;
     }
-		@include col-mediaquery-max(3){
+		@include col-mediaquery-max(3, portrait){
 			flex-flow: column;
 			width: 100%;
 			height: 100%;
@@ -1653,6 +1673,19 @@ article.card{
 				flex:0 0 100%;
 			}
 		}
+		@include col-mediaquery-max(4, landscape){
+			// flex-flow: row-reverse ;
+			width: 100%;
+			height: 100%;
+			>.col-right{
+				height: 100%;
+				overflow-y: auto;
+			}
+			// >.col-left{
+			// 	flex:0 0 50%;
+			// }
+		}
+
     section.col-right{
       >*:not(nav.tools){
         position: relative;
@@ -1839,6 +1872,9 @@ article.card{
   }
 }
 
+.vm--modale-card{
+	position: relative;
+}
 // vuejs-modale hack as maxWidth and maxHeight does not work :(
 @include col-mediaquery-min(3){
 	.vm--modale-card{