Add the email and phone numbers at the very top

Requested by the customer

web/static/public.css

@@ -192,11 +192,41 @@ body > header {
     top: 0;
     z-index: 999;
     padding: 1rem 2.5rem;
-    display: flex;
+    display: grid;
+    grid-template-columns: auto 1fr;
     align-items: center;
     justify-content: space-between;
 }
 
+body > header > address {
+    grid-column: 1 / span 2;
+    margin: 0 0 1em;
+    font-size: 1.3rem;
+    display: flex;
+    gap: 2em;
+}
+
+body > header > address a {
+    display: flex;
+    gap: .5em;
+}
+
+body > header > address a::before {
+    display: inline-block;
+    width: 1.2rem;
+    aspect-ratio: 1;
+    content: '';
+    background: left center / 100% no-repeat;
+}
+
+body > header > address a[href^='tel:']::before {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpath d="M164.39,145.34a8,8,0,0,1,7.59-.69l47.16,21.13a8,8,0,0,1,4.8,8.3A48.33,48.33,0,0,1,176,216,136,136,0,0,1,40,80,48.33,48.33,0,0,1,81.92,32.06a8,8,0,0,1,8.3,4.8l21.13,47.2a8,8,0,0,1-.66,7.53L89.32,117a7.93,7.93,0,0,0-.54,7.81c8.27,16.93,25.77,34.22,42.75,42.41a7.92,7.92,0,0,0,7.83-.59Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
+}
+
+body > header > address a[href^='mailto:']::before {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"%3E%3Crect width="256" height="256" fill="none"/%3E%3Cpolyline points="224 56 128 144 32 56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cpath d="M32,56H224a0,0,0,0,1,0,0V192a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V56A0,0,0,0,1,32,56Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="110.55" y1="128" x2="34.47" y2="197.74" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3Cline x1="221.53" y1="197.74" x2="145.45" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/%3E%3C/svg%3E');
+}
+
 body > header, nav .has-submenu ul {
     background-color: rgba(var(--clar-rgb), 0.7);
     backdrop-filter: blur(10px);
@@ -290,7 +320,6 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
 
 @media (max-width: 80rem) {
     body > header {
-        display: grid;
         grid-template-columns: 1fr 1fr;
     }
 
@@ -549,7 +578,7 @@ dl div {
 }
 
 dl div:hover {
-background-color: var(--accent-2);
+    background-color: var(--accent-2);
 }
 
 dt {
@@ -576,21 +605,23 @@ dt {
 /* autside-activities tablet & mobile */
 @media (max-width: 64rem) {
 
-dl, .nature div + div, .outside_activities > div {
+    dl, .nature div + div, .outside_activities > div {
         flex-direction: column;
-}
+    }
 
-.outside_activities > div:first-of-type p {
+    .outside_activities > div:first-of-type p {
         width: 100% !important;
         margin-top: 0 !important;
-}
+    }
 
-.outside_activities > div:first-of-type img:last-child {
+    .outside_activities > div:first-of-type img:last-child {
         width: 100% !important;
         margin-top: 0 !important;
+    }
+
 }
 
-} /* end autside-activities tablet & mobile */
+/* end autside-activities tablet & mobile */
 
 .outside_activities {
     margin-top: 2rem;
@@ -944,6 +975,7 @@ select {
     background: white;
     padding: 20px;
 }
+
 /*
 label {
   display: flex;
@@ -967,7 +999,6 @@ button {
 }
 
 
-
 /* radio buttins + checkbox */
 
 /* Context for relative positioning */
@@ -1031,8 +1062,6 @@ input[type="checkbox"]:focus {
 }
 
 
-
-
 #booking fieldset {
     border: none;
 }
@@ -1102,12 +1131,15 @@ input[type="checkbox"]:focus {
         display: flex;
         flex-direction: column;
     }
+
     body > footer section {
         width: 100% !important;
         margin: 40px 0 0 0;
     }
 
-}/* end footer responsive */
+}
+
+/* end footer responsive */
 
 footer {
     margin: 120px 0 0 0;
@@ -1258,12 +1290,12 @@ address {
 
 .ad-button .ad-icon svg {
     width: 40px;
-  transform: rotate(320deg) translate3d(-5px,-10px,0);
+    transform: rotate(320deg) translate3d(-5px, -10px, 0);
     transition: all 0.5s ease;
 }
 
 .ad-button:hover .gb-icon svg {
-  transform: rotate(320deg) translate3d(10px,0,0);
+    transform: rotate(320deg) translate3d(10px, 0, 0);
 }
 
 .arrow_link {

web/templates/public/layout.gohtml

@@ -22,7 +22,14 @@
 <body>
 <a href="#content">{{( gettext "Skip to main content" )}}</a>
 <header>
-    <h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
+    {{ with .CompanyAddress -}}
+        <address>
+            <a href="tel:{{ replaceAll .Phone " " "" }}">{{ .Phone }}</a>
+            <a href="mailto:{{ .Email }}">{{ .Email }}</a>
+        </address>
+    {{- end }}
+    <h1><a href="/{{ currentLocale }}/"><span class="logo">◭</span><span
+                    class="name">{{( gettext "Campsite Montagut" )}}</span></a></h1>
     <input type="checkbox" id="menuShowHide">
     <label for="menuShowHide"></label>
     <nav>