header is good git add .

user/themes/labonneadresse/scss/styles.scss

@@ -62,8 +62,10 @@ ul,li{padding:0; margin:0; list-style: none;}
  |_|  |_|\___|\__,_|\__,_|\___|_|
 */
 $headerborderH: 0.3em;
-$headerpaddingtopH:1.3em;
-$titleareaH: 10em;
+$headerpaddingtopH:0.9em;
+$titlearea_mt:0.3em;
+$titlearea_mb:0.5em;
+$titleareaH: 9.3em;
 $titleareaHReduced: 5em;
 $centerpaddingtop: $headerborderH+$headerpaddingtopH+$titleareaH+1em;
 $footerheight: 5em;
@@ -85,35 +87,38 @@ header#top-bar{
 
   >.bg{
     background-color: rgba(255, 255, 255, 0.95);
-  }
-  >.row{
-    position:relative; display:block;
+    >.row{
+      position:relative; display:block;
+    }
   }
 
   #title-area{
     // overflow: hidden;
     position:relative;
-    height:$titleareaH;
-    padding:0.2em 0 0.7em;
+    height:$titleareaH + $titlearea_mt + $titlearea_mb;
     transition: height 0.4s ease-in-out;
     h1{
       font-size: 1em; margin: 0;
-      height:100%; min-height:$titleareaH - 2.4em;
+      height:100%;
+      min-height:($titleareaH + $titlearea_mt + $titlearea_mb)*0.8;
       overflow: hidden;
+      position: relative;
       a{display: block;
         // height:100%;
-        height:$titleareaH - 0.9em;
+        height:$titleareaH;
+        margin:$titlearea_mt 0 $titlearea_mb;
+        // height:$titleareaH;
         background: transparent url("../images/logo.png") no-repeat center center;
         background-size: contain;}
     }
     h1 span, h2{
-      position:absolute; margin-left:-3000px;
+      position:absolute; margin-top:-3000px; height:0;
     }
   }
 
   &.reduced{
     #title-area{
-      height:$titleareaH*0.74;
+      height:($titleareaH + $titlearea_mt + $titlearea_mb)*0.7555;
     }
   }
 
@@ -152,7 +157,7 @@ header#top-bar{
     li{
       line-height: 1;
       // &:not(.active){
-        overflow: hidden; height:1px; transition: height 0.3s ease-in;
+        overflow: hidden; height:0.01px; transition: height 0.3s ease-in;
       // }
       a{
         display:block;
@@ -179,7 +184,6 @@ header#top-bar{
       }
     }
   }
-
 }
 
 /*
@@ -198,7 +202,8 @@ div#center{
   }
 
   p{
-    line-height:0.6; display:inline-block; position:relative;
+    // line-height:0.6;
+    display:inline-block; position:relative;
     @include fontnormal;
     span.stab{
       display:inline-block; position:relative;
@@ -379,7 +384,7 @@ div#center{
                | |                                           __/ |
                |_|                                          |___/
 */
-@media #{$small}{
+@media #{$small-only}{
   header#top-bar{
     &:before{
       padding-bottom: $headerpaddingtopH*0.5;
@@ -387,10 +392,11 @@ div#center{
 
     #title-area{
       height:$titleareaH -2.1em + $headerpaddingtopH;
-      padding-top: $headerpaddingtopH;
+      // padding-top: $headerpaddingtopH;
       h1{
         a{display: block;
           height:$titleareaH - 3em;
+          // height:100%;
         }
       }
     }