la-baule: improve page-header styles (#63656)

To display tracking-code-input-cell & search-cell side by side

static/la-baule/_custom.scss

@@ -175,11 +175,15 @@ div#nav {
 
 // Page header
 .page-header {
+	@media ($max-mobile-viewport) {
+		padding-left: 0.7em;
+		padding-right: 0.7em;
+	}
 	h1, h2, h3 {
 		color: $blue;
 	}
-	div.searchcell form::before {
-		margin-top: 0.5em;
+	button {
+		@extend %button;
 	}
 	div.text-cell {
 		font-size: $fz-h4;
@@ -199,11 +203,11 @@ div#nav {
 	}
 
 	div.searchcell form {
+		padding: 0;
 		input {
 			margin-right: 0;
 		}
 		button {
-			@extend input;
 			flex: 0 0 auto;
 			color: white;
 			background-color: $orange;
@@ -213,13 +217,11 @@ div#nav {
 				color: white !important;
 			}
 		}
-		@media ($min-desktop-viewport) {
-			&::before {
-				content: "Rechercher";
-				font-size: $fz-h4;
-				color: $blue;
-				font-weight: bold;
-				padding-right: .33em;
+	}
+	.tracking-code-input-cell {
+		form {
+			input, button {
+				vertical-align: middle;
 			}
 		}
 	}
@@ -230,6 +232,8 @@ div#nav {
 //
 
 .en-1-clic {
+	padding-top: 40px;
+	clear: both;
 	& > div {
 		background-color: $blue-light;
 		color: white;

static/la-baule/_vars.scss

@@ -7,9 +7,9 @@ $orange-dark: #6a605e;
 $gray: #e1e1e6;
 
 // fonts size
-$fz-h1: 50pt;
-$fz-h2: 30pt;
-$fz-h3: 20pt;
+$fz-h1: 50px;
+$fz-h2: 30px;
+$fz-h3: 20px;
 $fz-h4: 1.15em;
 $fz-small: 0.65em;
 
@@ -24,6 +24,7 @@ $link-color: $orange;
 
 $width: 1340px;
 $mobile-limit: 1280px;
+$very-small-limit: 560px;
 $columns-gutter: 40px;
 
 $nav-background: $blue !important;