feat: Avancement sur le design

assets/styles/header.sass

@@ -1,9 +1,12 @@
 // HEADER
 
 .header
-  height: 80vh
+  height: 40vh
   position: relative
 
+  &.home
+    height: 80vh
+
   .hero
     position: absolute
     top: 0
@@ -116,12 +119,9 @@
       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
+        color: $orange
 
     img
       padding: 0 10px

assets/styles/main.sass

@@ -1,7 +1,9 @@
 // VARIABLE
 $font-size: 18px
 
-$vert: #03874b
+$vert: #04874b
+$orange: #f0833c
+$grey: #e5e5e5
 $color-primary: black
 $color-secondary: white
 
@@ -18,9 +20,234 @@ $size-xl: 1280px
 img
   display: block
 
+  &.round
+    border-radius: 100%
+
+.maire
+  padding-bottom: 3rem
+  img
+    margin: 0 auto
+
 // CONTAINER
 
+.icons
+  width: 50px
+
 .container
   max-width: $size-xl
   margin: 0 auto
-  padding: 0 20px
+  padding: 0 1rem
+
+// content
+
+#content
+  margin-top: -10vh
+
+  .container
+    background-color: white
+    margin: 0 1rem
+    padding: 1rem
+    @media screen and (max-width: $size-sm)
+      margin: 0
+      padding: 1rem 0
+
+  h1
+    text-align: center
+    text-transform: uppercase
+    color: $vert
+    margin: 1rem 2rem 2rem
+    font-size: 2.5rem
+    word-wrap: anywhere
+    @media screen and (max-width: $size-sm)
+      font-size: 1.2rem
+
+    strong
+      font-size: 3.5rem
+      @media screen and (max-width: $size-sm)
+        font-size: 1.8rem
+
+  .container.news
+    padding: 1rem 5rem
+    @media screen and (max-width: $size-sm)
+      padding: 0 1rem
+.infos
+  display: flex
+  @media screen and (max-width: $size-md)
+    flex-direction: column
+  .news, .opening
+    min-height: 500px
+    margin: 1rem
+
+  .news
+    width: 70%
+    display: flex
+    flex-direction: column
+    @media screen and (max-width: $size-xl)
+      width: 65%
+    @media screen and (max-width: $size-md)
+      width: 100%
+      margin: 0
+
+
+    $size-la-une: 220px
+    $size-news: 100px
+    .post
+      display: flex
+      flex-wrap: nowrap
+      margin-bottom: 2rem
+
+      @media screen and (max-width: $size-sm)
+        flex-direction: column
+        justify-content: center
+        align-items: center
+      .picture
+        width: $size-news
+        height: $size-news
+        background: $orange
+        flex-shrink: 0
+        @media screen and (max-width: $size-sm)
+          margin-bottom: 1rem
+
+      &.last
+
+        .picture
+          width: $size-la-une
+          height: $size-la-une
+          @media screen and (max-width: $size-sm)
+            width: 100%
+            overflow: hidden
+            margin: 0
+            img
+              width: 100%
+        .details
+          padding: 20px
+          background: $grey
+          height: $size-la-une
+          overflow: hidden
+          text-overflow: ellipsis
+          @media screen and (max-width: $size-sm)
+            height: inherit
+      .details
+        padding: 0 1rem
+        height: $size-news
+        overflow: hidden
+        @media screen and (max-width: $size-sm)
+          height: inherit
+          text-align: center
+
+        a
+          color: black
+        span
+          font-size: .8rem
+          display: block
+        h2
+          font-size: 1.4rem
+          font-weight: bold
+          margin: .6rem 0
+          white-space: nowrap
+          overflow: hidden
+          text-overflow: ellipsis
+        h3
+          font-size: 1.1rem
+          font-weight: bold
+          margin: 0
+          white-space: nowrap
+          overflow: hidden
+          text-overflow: ellipsis
+
+        .text
+          font-size: .8rem
+          overflow: hidden
+          text-overflow: ellipsis
+          width: 100%
+          padding-top: 6px
+
+          p
+            margin: 0
+
+
+
+  .opening
+    background: $orange
+    width: 30%
+    padding: 20px
+    color: white
+    background-image: url(/icons/horloge.svg)
+    background-repeat: no-repeat
+    background-position: center -50px
+    background-size: 70%
+    @media screen and (max-width: $size-xl)
+      width: 40%
+    @media screen and (max-width: $size-md)
+      width: 100%
+      margin: 0
+      background-position-x: 120%
+      background-size: 50%
+
+    h2
+      font-size: 1.4rem
+      margin: 1rem 0
+      font-weight: bold
+
+    h3
+      margin: 1rem 0 .4rem
+      font-size: 1.2rem
+      font-weight: bold
+
+    p
+      font-size: .8rem
+
+      &:last-child
+        margin-bottom: 0
+
+    a
+      color: white
+
+// FOOTER
+
+.explain
+  text-align: center
+  font-size: .6rem
+
+.footer
+  background: $vert
+  color: white
+  padding: 2rem 0
+  @media screen and (max-width: $size-sm)
+    padding: 1rem 0
+
+  .container
+    display: flex
+    @media screen and (max-width: $size-md)
+      flex-wrap: wrap
+      justify-content: center
+    @media screen and (max-width: $size-sm)
+      flex-direction: column
+
+  .address
+    text-align: right
+  .logo
+    width: 20%
+    @media screen and (max-width: $size-md)
+      order: -1
+      width: 100%
+    img
+      margin: 0 auto
+  .horaire,
+  .address
+    width: 40%
+    padding: 1rem
+
+    @media screen and (max-width: $size-sm)
+      width: 100%
+      text-align: center
+      padding: 1rem 0 0
+
+  h3
+    font-size: 1.5rem
+    margin-top: 0
+    font-weight: bold
+
+  p
+    margin: 0
+    line-height: 1.3rem