add header and hero variables

assets/sass/_theme/_configuration.sass

@@ -88,11 +88,13 @@ $zindex-toc: 50 !default
 // Header
 $header-color: $main-color !default
 $header-hover-color: rgba($header-color, 0.7) !default // TODO : Réflechir à plus élégant / générique
-$header-background-color: $main-background-color !default
+$header-background: $main-background-color !default
 $header-sticky-enabled: true !default
+$header-sticky-background: $header-background !default
+$header-sticky-color: $header-color !default
 $header-transition: 0.3s !default
 $header-sticky-transition: $header-transition !default
-$header-dropdown-background: $header-background-color !default
+$header-dropdown-background: $header-background !default
 $header-dropdown-color: $header-color !default
 $header-dropdown-transition: $header-transition !default
 $header-nav-padding-y: $spacing0 !default
@@ -108,7 +110,7 @@ $footer-background-color: color-contrast($main-background-color, 3%) !default
 
 // Hero
 $hero-height: 375px !default
-$hero-height-md: 450px !default
+$hero-height-md: 550px !default
 $hero-color: invert($main-color) !default
 $hero-background-color: invert($main-background-color) !default
 

assets/sass/_theme/design-system/header.sass

 header[role="banner"]
+    background: $header-background
+    position: fixed
+    left: 0
+    transition: transform $header-sticky-transition, background $header-sticky-transition
+    top: 0
+    width: 100%
     z-index: $zindex-header
     @include media-breakpoint-down(md)
-        position: fixed
         padding: 1rem 0
         width: 100%
-
-    @if $header-sticky-enabled
-        background-color: $header-background-color
-        top: 0
-        transition: transform $header-sticky-transition
+    &.is-sticky
+        background: $header-sticky-background
+        color: $header-sticky-color
+        .menu
+            a,
+            a:hover,
+            a:focus,
+            a:active
+                @include link($header-sticky-color)
+            span
+                color: $header-sticky-color
+    html.is-scrolling-down:not(.has-menu-opened) &
+        @include media-breakpoint-down(md)
+            transform: translateY(-100%)
         @include media-breakpoint-up(md)
-            position: sticky
-        html.is-scrolling-down:not(.has-menu-opened) &
-            @include media-breakpoint-down(md)
+            &:not(:hover)
                 transform: translateY(-100%)
-            @include media-breakpoint-up(md)
-                &:not(:hover)
-                    transform: translateY(-100%)
-
     nav[role="navigation"]
         padding-bottom: $header-nav-padding-y
         padding-top: $header-nav-padding-y

assets/sass/_theme/design-system/hero.sass

 .hero
     align-items: flex-end
+    // Support gradients
+    background: $hero-background-color
+    // Fallback color
     background-color: $hero-background-color
     color: $hero-color
     display: flex
     min-height: $hero-height
     overflow: hidden
     padding-bottom: 2rem
-    padding-top: 2rem
+    padding-top: calc(2rem + var(--header-height))
     position: relative
     @include media-breakpoint-up(md)
         min-height: $hero-height-md

assets/sass/_theme/design-system/nav.sass

@@ -14,12 +14,13 @@
         margin-top: 1.875rem
         max-height: 70vh
         overflow: auto
-
     a,
     a:hover,
     a:focus,
     a:active
         @include link($header-color)
+    span
+        color: $header-color
     ul
         display: flex
         list-style: none
@@ -181,7 +182,7 @@ body
         @include media-breakpoint-up(md)
             font-size: $program-share-font-size-md
     .dropdown-menu
-        background: invert($hero-background-color)
+        background: $hero-color
         padding: 0
         position: absolute
         width: 100%