fixed small layout

user/themes/labonneadresse/scss/styles.scss

@@ -113,13 +113,7 @@ header#top-bar{
 
   &.reduced{
     #title-area{
-      // height:$titleareaH*0.4;
-
-      // @media screen and (min-width:$medium-breakpoint) {
-        height:$titleareaH*0.74;
-      // }
-      // TODO: a terminer diminuer plus le logo sur mobile
-
+      height:$titleareaH*0.74;
     }
   }
 
@@ -173,13 +167,14 @@ header#top-bar{
       //     border-top:0.5em solid $green;}
       // }
     }
-
-    &:hover{
-      li{
-        height:1.1em; transition: height 0.5s ease-out;
-        &:hover span{
-          // border-bottom: 1px solid #000;
-          text-decoration: underline;
+    @media #{$medium-up}{
+      &:hover{
+        li{
+          height:1.1em; transition: height 0.5s ease-out;
+          &:hover span{
+            // border-bottom: 1px solid #000;
+            text-decoration: underline;
+          }
         }
       }
     }
@@ -203,6 +198,7 @@ div#center{
   }
 
   p{
+    line-height:0.6; display:inline-block; position:relative;
     @include fontnormal;
     span.stab{
       display:inline-block; position:relative;
@@ -274,7 +270,6 @@ div#center{
     .row{margin:0;}
     h1{
       @include fontbold;
-      line-height:0.6; display:inline-block; position:relative;
       margin:0; padding:0 0.7em;
       // $green overline
       &:after{
@@ -374,6 +369,54 @@ div#center{
   }
 }
 
+/*
+                                      _             _                         _
+                                     (_)           | |                       | |
+  _ __ ___  ___ _ __   ___  _ __  ___ ___   _____  | | __ _ _   _  ___  _   _| |_
+ | '__/ _ \/ __| '_ \ / _ \| '_ \/ __| \ \ / / _ \ | |/ _` | | | |/ _ \| | | | __|
+ | | |  __/\__ \ |_) | (_) | | | \__ \ |\ V /  __/ | | (_| | |_| | (_) | |_| | |_
+ |_|  \___||___/ .__/ \___/|_| |_|___/_| \_/ \___| |_|\__,_|\__, |\___/ \__,_|\__|
+               | |                                           __/ |
+               |_|                                          |___/
+*/
+@media #{$small}{
+  header#top-bar{
+    &:before{
+      padding-bottom: $headerpaddingtopH*0.5;
+    }
+
+    #title-area{
+      height:$titleareaH -2.1em + $headerpaddingtopH;
+      padding-top: $headerpaddingtopH;
+      h1{
+        a{display: block;
+          height:$titleareaH - 3em;
+        }
+      }
+    }
+
+    &.reduced{
+      #title-area{
+        height:($titleareaH - 2.1em  + $headerpaddingtopH)*0.75;
+        overflow: hidden;
+      }
+    }
+
+    .nav{
+      position:absolute;
+      top:$headerborderH+$headerpaddingtopH*0.5;
+      height:auto;
+    }
+    #left-nav{left:0;}
+    #right-nav{right:0;}
+  }
+
+  div#center{
+    padding-top:$centerpaddingtop - 1.1em;
+    padding-bottom: $centerpaddingbottom;
+  }
+}
+
 /*
    __            _
   / _|          | |