refactored the layout:

removed fixed head, replaced with flex
moved pagetitle and searchform to headerbottom region
added Common store to vuejs with pagetitle data
added pagetitle vuejs component

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

@@ -14,6 +14,9 @@ body{
 
 div.dialog-off-canvas-main-canvas{
   width: 100vw;
+  height:100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
@@ -45,17 +48,24 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
 // |_||_\___\__,_\__,_\___|_|
 
 header[role="banner"]{
-   
+  flex:0 0 auto;
   background-color: #fff;
-  overflow: visible;
-  position: fixed;
-  z-index: 20;
+  // overflow: visible;
+  // position: fixed;
+  // z-index: 20;
   width:100vw;
-  height: $header_height;
+  // height: $header_height;
   .wrapper{
     @extend %grided-width;
     // box-sizing:border-box;
-    
+    background-color: #fff;
+
+    &:after{
+      content:"";
+      clear:both;
+      display: block;
+    }
+
     .header-block{
       min-height: 15px;
       font-size: 0;
@@ -73,14 +83,20 @@ header[role="banner"]{
 }
 
 
+
 //  __  __      _
 // |  \/  |__ _(_)_ _
 // | |\/| / _` | | ' \
 // |_|  |_\__,_|_|_||_|
 
 main[role="main"]{
-  @extend %grided-width;
-
-  padding-top: $header_height+8px;
-  
+  flex:1 1 auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  &>.wrapper{
+    width:100vw;
+    &>*{
+      @extend %grided-width;
+    }
+  }
 }

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

@@ -1,6 +1,4 @@
 $base_font_size:16px;
 
-$header_height: 60px;
-
 $column_width: 210px;
-$column_goutiere: 15px;
+$column_goutiere: 15px;

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

@@ -171,59 +171,72 @@ header[role="banner"]{
 
   }
 
+
+  // header bottom
+  #block-pagetitle{
+    float: left;
+    padding:1em 0;
+    h2{
+      margin:0;
+      font-size: 1.512em;
+      text-transform: capitalize;
+      font-weight: 300;
+    }
+  }
+
+
+  #block-materiosapisearchblock{
+    float:right;
+    display:inline-block;
+    // box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    padding:0;
+
+    #materio-sapi-search-form{
+      .form-item, input.button{
+        display: inline-block;
+      }
+
+      #edit-search{
+        border:1px #BBB solid;
+        border-radius: 14px;
+        padding:0.3em;
+        color:#666;
+      }
+
+      #edit-submit{
+        border:0;
+        text-indent: 50px;
+        overflow: hidden;
+        width:20px; height:20px;
+        margin:0;
+        // border-radius: 7px;
+        background-image: url('../img/search.png');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+      }
+
+    }
+
+  }
 }
 
+
+
+// main
 aside.messages{
   padding: 0;
 }
 
 // content top
-#content-top{
-  &:after{
-    content:"";
-    clear:both;
-    display: block;
-  }
-}
+// #content-top{
+//   &:after{
+//     content:"";
+//     clear:both;
+//     display: block;
+//   }
+// }
 
-#block-materiosapisearchblock{
-  float:right;
-  display:inline-block;
-  // box-shadow: 0 0 5px rgba(0,0,0,0.2);
-  padding:0;
-
-  #materio-sapi-search-form{
-    .form-item, input.button{
-      display: inline-block;
-    }
-
-    #edit-search{
-      border:1px #BBB solid;
-      border-radius: 14px;
-      padding:0.3em;
-      color:#666;
-    }
-
-    #edit-submit{
-      border:0;
-      text-indent: 50px;
-      overflow: hidden;
-      width:20px; height:20px;
-      margin:0;
-      // border-radius: 7px;
-      background-image: url('../img/search.png');
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: contain;
-    }
-
-  }
-
-}
-
-h1.page-title{
-  margin:0;
-}
 
 // front
 article.node--type-frontpage{
@@ -276,11 +289,13 @@ article.node--type-frontpage{
   }
 }
 
-
 .cards-list{
   position: relative;
   .search-info{
-    margin:0 0 1em 0;
+    font-size: 0.756em;
+    font-weight: 500;
+    margin: 0;
+    padding: 0 0 0.5em 0;
   }
 
   &>ul{