diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index c0aea84527aff9468fec81d2d92bab5ada19d96f..578c644b675b2a9d1b69ff35f62f23c31771296e 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -5,9 +5,12 @@ $main-background-color: white !default // Background color
$body-color: $main-color !default
$body-background-color: $main-background-color !default
+$link-color: $main-color !default
+
// TYPOGRAPHY
// Fonts family
+// TODO: choisir typo system par défaut
$body-font-family: "Georgia", serif !default
$heading-font-family: "Helvetica", "Arial", sans-serif !default
@@ -32,6 +35,9 @@ $h4-weight: $heading-font-weight !default
$h5-weight: $heading-font-weight !default
$h6-weight: $heading-font-weight !default
+// Breadcrumb
+$breadcrumb-color: white !default
+
// Spacing
$spacing1: 24px !default
$spacing2: 48px !default
@@ -44,12 +50,19 @@ $zindex-nav-accessibility: 1010 !default
// Header
$header-color: $main-color !default
+$header-hover-color: rgba($main-color, 0.7) !default // TODO : Réflechir à plus élégant / générique
$header-background-color: $main-background-color !default
$header-sticky-enabled: true
// Footer
$footer-color: $main-color !default
-$footer-background-color: $main-background-color !default
+$footer-background-color: darken($main-background-color, 2.5) !default
+
+// Hero
+$hero-height: 375px !default
+$hero-height-md: 450px !default
+$hero-color: white !default
+$hero-background-color: black !default
// Icons
$icons: ()
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index c1f0be4e93fa4bc06636c3d21f3cea659612145a..d982104552e89577621f56a08bad0095fa25ca67 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -21,6 +21,7 @@
@content
@mixin link
+ color: $link-color
text-decoration-color: rgba($link-color, 0.3)
text-decoration-line: underline
text-decoration-thickness: 1px
diff --git a/assets/sass/_theme/blocks/blocks.sass b/assets/sass/_theme/blocks/blocks.sass
index f67e851ce19cae80c05da97edfa5f9ce91354b09..0c6945fe41dd9a5fe40e95dbeee3e1649ce569b6 100644
--- a/assets/sass/_theme/blocks/blocks.sass
+++ b/assets/sass/_theme/blocks/blocks.sass
@@ -1,3 +1,3 @@
-// .blocks
-// > *
-// margin-top: map-get($spacers, 5)
+.blocks
+ > *
+ margin-top: $spacing1
diff --git a/assets/sass/_theme/design-system/breadcrumb.sass b/assets/sass/_theme/design-system/breadcrumb.sass
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..34b3116f0e71af5642150d0a811f246ca329a9f9 100644
--- a/assets/sass/_theme/design-system/breadcrumb.sass
+++ b/assets/sass/_theme/design-system/breadcrumb.sass
@@ -0,0 +1,20 @@
+.breadcrumb
+ -webkit-touch-scrolling: touch
+ flex-wrap: nowrap
+ overflow: auto
+ list-style: none
+ display: flex
+ padding-left: 0
+ a
+ color: $breadcrumb-color
+ text-decoration-color: rgba($breadcrumb-color, 0.3)
+ &:hover
+ text-decoration-color: rgba($breadcrumb-color, 1)
+ li
+ flex-shrink: 0
+ white-space: nowrap
+ &-item + &-item
+ &:before
+ color: lighten($breadcrumb-color, 0.5)
+ content: "/"
+ padding-right: 0.5rem
diff --git a/assets/sass/_theme/design-system/header.sass b/assets/sass/_theme/design-system/header.sass
index a931b66f88972a5e387f9b0f61b836b3fe75fcfc..969c58b4db86b453b9b9c01abd4352bac1b44182 100644
--- a/assets/sass/_theme/design-system/header.sass
+++ b/assets/sass/_theme/design-system/header.sass
@@ -13,7 +13,12 @@ header[role="banner"]
position: sticky
nav[role="navigation"]
+ .container
+ display: flex
+ padding: $spacing1
+ justify-content: space-between
button[type="button"]
+ display: none
border: 0
color: $body-color
position: relative
diff --git a/assets/sass/_theme/design-system/hero.sass b/assets/sass/_theme/design-system/hero.sass
new file mode 100644
index 0000000000000000000000000000000000000000..a27216ec1112c41075b7ee2dc3e31b81fe8c6152
--- /dev/null
+++ b/assets/sass/_theme/design-system/hero.sass
@@ -0,0 +1,60 @@
+.hero
+ align-items: flex-end
+ background-color: $hero-background-color
+ color: $hero-color
+ display: flex
+ margin-bottom: 3rem
+ min-height: $hero-height
+ overflow: hidden
+ padding-bottom: 2rem
+ padding-top: 2rem
+ position: relative
+ @include media-breakpoint-up(md)
+ min-height: $hero-height-md
+
+ .page-with-blocks &
+ margin-bottom: 0
+
+ *:focus-visible
+ outline-color: white
+
+ p
+ margin-bottom: 0
+
+ > div:first-of-type
+ > div
+ margin-top: $spacing1
+ @include media-breakpoint-up(xl)
+ margin-top: px2rem(70)
+
+ > div + div
+ margin-top: auto
+ .container
+ padding-bottom: $spacing1
+ padding-top: $spacing1
+ @include media-breakpoint-up(md)
+ &::before
+ background-color: rgba(white, .2)
+ content: ''
+ display: block
+ height: 1px
+ width: 100%
+ & + aside
+ margin-top: 0
+ > div
+ position: relative
+ z-index: 1
+ > picture
+ img
+ height: 100%
+ inset: 0
+ object-fit: cover
+ opacity: 0.3
+ position: absolute
+ width: 100%
+ // polyfill for inset
+ @supports not (inset: 0)
+ bottom: 0
+ left: 0
+ right: 0
+ top: 0
diff --git a/assets/sass/_theme/design-system/layout.sass b/assets/sass/_theme/design-system/layout.sass
index c487f8d01cf2e42ac081a069e69e190eb18131bb..dfb92b74fc884553ffef53ba2f8b210c19249bc5 100644
--- a/assets/sass/_theme/design-system/layout.sass
+++ b/assets/sass/_theme/design-system/layout.sass
@@ -1,3 +1,7 @@
body
color: $body-color
background: $body-background-color
+
+img
+ max-width: 100%
+ height: auto
\ No newline at end of file
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e7f66dc2e73724f56e8cf934f2f46c4718dbca32 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -0,0 +1,53 @@
+.menu
+ a,
+ a:hover,
+ a:focus,
+ a:active
+ color: $header-color
+ ul
+ display: flex
+ list-style: none
+ margin: 0
+ padding: 0
+ a,
+ span
+ font-size: px2rem(18)
+ line-height: px2rem(26)
+ color: $header-color
+ a:hover,
+ a:focus
+ color: $header-hover-color
+
+ .dropdown-menu
+ display: none
+ background: $header-background-color
+
+ .nav-level-1
+ display: flex
+ > li > a
+ padding: $spacing1
+ li.has-children:hover
+ .dropdown-menu
+ padding: $spacing1
+ inset: 100% 0 auto 0
+ display: block
+ position: absolute
+
+ .nav-level-2
+ @include media-breakpoint-up(lg)
+ display: grid
+ grid-gap: $spacing1 $spacing1
+ grid-template-columns: repeat(4, 1fr)
+ > li
+ &,
+ & > a,
+ & > span
+ font-size: px2rem(16)
+ line-height: px2rem(26)
+ @include media-breakpoint-up(lg)
+ font-size: px2rem(18)
+
+ .nav-level-3
+ a,
+ span
+ font-size: px2rem(14)
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 125dda3126c0822a43955e1ba38a5aeff83bda2f..ad7bd10fa7d2f0f66e37ea17276152e6a2dc9709 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -39,3 +39,6 @@ p
small
font-size: $small-font-size
+
+a, .link
+ @include link
diff --git a/assets/sass/_theme/hugo-osuny.sass b/assets/sass/_theme/hugo-osuny.sass
index 7d1f922c466bd58ac60e1c6818920c089d8a6208..4128b742d0333c603a9496c1c9b3008f22ca5e51 100644
--- a/assets/sass/_theme/hugo-osuny.sass
+++ b/assets/sass/_theme/hugo-osuny.sass
@@ -15,6 +15,7 @@
@import "design-system/footer"
@import "design-system/grid"
@import "design-system/header"
+@import "design-system/hero"
@import "design-system/nav"
@import "design-system/typography"