Redisposition des menus et du pied de page (fix #3).

assets/production/css/style.css

@@ -10,6 +10,7 @@ body {
 }
 
 .Container {
+  clear: both;
   max-width: 960px;
   margin: 0 auto;
   padding: 0 32px;
@@ -19,6 +20,13 @@ a {
   color: #373d3f;
 }
 
+a.external::after {
+  content: url(/images/external-link.svg);
+  display: inline-flex;
+  height: 1em;
+  padding-left: 0.4em;
+}
+
 h1,
 h2,
 h3,
@@ -126,58 +134,44 @@ abbr {
 
 .logo-front {
   display: block;
-  margin: 10em auto 0;
-  height: 25vh;
+  margin: 3em auto 2em;
 }
 
 .logo-small {
-  width: 3em;
-  display: inline-block;
-  margin: 0.4em;
-}
-
-menu {
-  margin: 0;
-  padding: 0;
-  font-size: 0;
-}
-
-.container-logo,
-.menu-item {
-  height: 30%;
-  display: inline-block;
-  font-size: 16px;
+  display: inline;
+  margin: 0 2em 0 0;
+  height: 3em;
   vertical-align: middle;
 }
 
-.menu-item {
-  float: right;
-  margin-left: 2em;
+nav {
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
 }
 
-.menu-button {
-  padding: 8px 24px;
-  background: #05b;
-  color: #fff;
-  text-transform: uppercase;
-  text-decoration: none;
-  font-size: 12.8px;
-  font-weight: bold;
-  border-radius: 0 0 24px 24px;
-  line-height: 24px;
-  display: inline-block;
+nav section {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
 }
 
-.menu-button-login {
-  background: #2eae2e;
+nav section h2 {
+  font-size: 1em;
+  margin: 0;
 }
 
-.Hero {
-  height: calc(75vh - 6em);
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
+nav section ul {
+  border-left: black 1px solid;
+  margin: 0;
+  padding-left: 0.8em;
+}
+
+nav section ul li {
+  list-style: none;
+}
+
+.Hero h1 {
+  font-size: 1.5em;
 }
 
 .services-title {
@@ -251,6 +245,13 @@ menu {
   padding: 1em;
 }
 
+.three-cols {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1em 0;
+}
+
 .Two-cols-One-row,
 .Two-cols-Two-rows {
   display: grid;
@@ -259,23 +260,18 @@ menu {
   gap: 64px 0;
 }
 
-.Article-Title {
-  margin-top: 64px;
-  margin-bottom: 32px;
+.footer h2 {
+  font-size: 1.2em;
+  margin-bottom: 0;
 }
 
-.footer {
+.footer hr + p {
+  font-size: 0.8em;
+  margin-bottom: 2em;
 }
 
-.footer ul,
-.footer li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.footer .Two-cols-One-row {
-  grid-row-gap: 0;
+.footer p + p {
+  margin-top: 0;
 }
 
 @media only screen and (min-width: 768px) {
@@ -283,10 +279,49 @@ menu {
     font-size: 48.33px;
   }
 
+  nav section {
+    border-left: black 1px solid;
+    display: block;
+    padding-left: 2em;
+  }
+
+  nav section h2 {
+    font-size: 1.5em;
+  }
+
+  nav section ul {
+    border: none;
+    padding: 0;
+  }
+
+  .Hero {
+    height: calc(75vh - 16em);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .Hero h1 {
+    font-size: 48.33px;
+  }
+
   .logo-chatons {
     height: 12vw;
   }
 
+  .logo-front {
+    margin: 10em auto 0;
+    height: 25vh;
+  }
+
+  .three-cols {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: 64px;
+    grid-row-gap: 0;
+  }
+
   .Two-cols-One-row {
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: 1fr;