feat: Ajout du menu mobile

assets/styles/header.sass

@@ -0,0 +1,151 @@
+// HEADER
+
+.header
+  height: 80vh
+  position: relative
+
+  .hero
+    position: absolute
+    top: 0
+    bottom: 0
+    left: 0
+    right: 0
+    z-index: -1
+    object-fit: cover
+    width: 100%
+    height: 100%
+
+  .nav
+    position: absolute
+    top: 50px
+    bottom: 0
+    left: 0
+    right: 0
+    background-color: $vert
+    height: 70px
+
+    @media screen and (max-width: $size-md)
+      top: 30px
+      height: 50px
+
+  .container
+    display: flex
+    align-items: center
+    justify-content: center
+
+    @media screen and (max-width: $size-md)
+      justify-content: space-between
+
+  .logo
+    $size-border-logo: 20px
+    position: relative
+    padding-left: $size-border-logo
+    z-index: 20
+    margin-right: 40px
+
+    &::after
+      position: absolute
+      content: ""
+      top: -$size-border-logo
+      bottom: -$size-border-logo
+      left: 0
+      right: -$size-border-logo
+      background-color: white
+      z-index: 10
+
+    a
+      display: block
+
+    img
+      position: relative
+      height: 70px
+      z-index: 30
+
+      @media screen and (max-width: $size-md)
+        height: 50px
+
+  #menu
+    list-style-type: none
+    display: flex
+    align-items: center
+    padding: 0
+    margin: 0
+
+    @media screen and (max-width: $size-xl)
+      font-size: .95rem
+
+    @media screen and (max-width: $size-md)
+      display: none
+      position: fixed
+      top: 0
+      bottom: 0
+      left: 0
+      right: 0
+      z-index: 100
+      background: $vert
+      flex-direction: column
+      justify-content: center
+
+      &:hover
+        display: inherit
+
+      &:hover + .close-button
+        display: inherit
+
+      img
+        display: inherit
+
+    li
+      display: flex
+      align-items: center
+
+      &:last-child::after
+        content: none
+
+      &::after
+        content: ""
+        border-right: 2px white solid
+        height: 20px
+
+        @media screen and (max-width: $size-md)
+          content: none
+
+    a
+      color: white
+      display: flex
+      align-items: center
+      padding: 10px
+      text-decoration: none
+      border-top: 1px dashed transparent
+      border-bottom: 1px dashed transparent
+
+      &:hover
+        border-top-color: white
+        border-bottom-color: white
+
+    img
+      padding: 0 10px
+
+      @media screen and (max-width: $size-lg) and (min-width: $size-md)
+        display: none
+
+    span
+      white-space: nowrap
+
+  .open-button
+    display: none
+    white-space: nowrap
+
+    &:focus + #menu
+      display: inherit
+
+    &:focus + #menu + .close-button
+      display: inherit
+
+    @media screen and (max-width: $size-md)
+      display: inherit
+
+  .close-button
+    white-space: nowrap
+    display: none
+    z-index: 200

assets/styles/main.sass

@@ -13,88 +13,14 @@ $size-xl: 1280px
 
 @import "./reset"
 @import "./html"
+@import "./header"
 
 img
   display: block
 
-// HEADER
+// CONTAINER
 
-.header
-  height: 80vh
-  position: relative
-
-  .hero
-    position: absolute
-    top: 0
-    bottom: 0
-    left: 0
-    right: 0
-    z-index: -1
-    object-fit: cover
-    min-width: 100%
-    min-height: 100%
-
-  .nav
-    position: absolute
-    top: 50px
-    bottom: 0
-    left: 0
-    right: 0
-
-    background-color: $vert
-    height: 70px
-
-    ol
-      list-style-type: none
-      margin: 0 auto
-      padding: 0
-      width: $size-xl
-      display: flex
-      align-items: center
-
-      li
-        display: inline-block
-
-      .logo
-        $size-border-logo: 20px
-        position: relative
-        padding-left: $size-border-logo
-        z-index: 20
-        margin-right: 40px
-
-        &::after
-          position: absolute
-          content: ""
-          top: -70px
-          bottom: -$size-border-logo
-          left: 0
-          right: -$size-border-logo
-          background-color: white
-          z-index: 10
-        img
-          position: relative
-          height: 70px
-          z-index: 30
-
-
-      .link
-        display: flex
-        align-items: center
-
-        &:last-child::after
-          content: none
-
-        &::after
-          content: ""
-          border-right: 2px white solid
-          height: 20px
-
-        a
-          color: white
-          display: flex
-          align-items: center
-          padding: 10px
-          text-decoration: none
-
-          img
-            padding: 0 10px
+.container
+  max-width: $size-xl
+  margin: 0 auto
+  padding: 0 20px