font system wip

assets/sass/_theme/_configuration.sass

@@ -48,6 +48,7 @@ $h1-font-family: $heading-font-family !default
 $h1-size-desktop: pxToRem(60) !default
 $h1-size: pxToRem(30) !default
 $h1-line-height: 120% !default
+$h1-line-height-desktop: 120% !default
 $h1-weight: bold !default
 $h1-text-transform: none !default
 
@@ -56,6 +57,7 @@ $h2-font-family: $heading-font-family !default
 $h2-size-desktop: pxToRem(40) !default
 $h2-size: pxToRem(24) !default
 $h2-line-height: 120% !default
+$h2-line-height-desktop: 120% !default
 $h2-weight: $heading-font-weight !default
 $h2-text-transform: none !default
 
@@ -64,6 +66,7 @@ $h3-font-family: $heading-font-family !default
 $h3-size-desktop: pxToRem(28) !default
 $h3-size: pxToRem(20) !default
 $h3-line-height: 130% !default
+$h3-line-height-desktop: 130% !default
 $h3-weight: bold !default
 $h3-text-transform: none !default
 
@@ -72,6 +75,7 @@ $h4-font-family: $heading-font-family !default
 $h4-size-desktop: pxToRem(22) !default
 $h4-size: pxToRem(16) !default
 $h4-line-height: 130% !default
+$h4-line-height-desktop: 130% !default
 $h4-weight: bold !default
 $h4-text-transform: none !default
 
@@ -80,6 +84,7 @@ $h5-font-family: $heading-font-family !default
 $h5-size-desktop: pxToRem(24) !default
 $h5-size: pxToRem(20) !default
 $h5-line-height: 130% !default
+$h5-line-height-desktop: 130% !default
 $h5-weight: $heading-font-weight !default
 $h5-text-transform: uppercase !default
 
@@ -88,6 +93,7 @@ $h6-font-family: $heading-font-family !default
 $h6-size-desktop: pxToRem(20) !default
 $h6-size: pxToRem(14) !default
 $h6-line-height: 130% !default
+$h6-line-height-desktop: 130% !default
 $h6-weight: $heading-font-weight !default
 $h6-text-transform: uppercase !default
 

assets/sass/_theme/_variables.sass

 \:root
+  // -------------- //
+  //      GRID      //
+  // ---------------//
+
   // Largeur maximum de la grille définie dans _configuration.sass
   --grid-max-width: #{$grid-max-width}
 
@@ -22,3 +26,43 @@
   @include media-breakpoint-up(xxl)
     --grid-gutter: #{$grid-gutter-xxl}
     --grid-gutter-negative: #{-$grid-gutter-xxl}
+
+  // -------------- //
+  //   TYPOGRAPHY   //
+  // ---------------//
+  --h1-size: #{$h1-size}
+  --h1-line-height: #{$h1-line-height}
+
+  --h2-size: #{$h2-size}
+  --h2-line-height: #{$h2-line-height}
+
+  --h3-size: #{$h3-size}
+  --h3-line-height: #{$h3-line-height}
+
+  --h4-size: #{$h4-size}
+  --h4-line-height: #{$h4-line-height}
+
+  --h5-size: #{$h5-size}
+  --h5-line-height: #{$h5-line-height}
+
+  --h6-size: #{$h6-size}
+  --h6-line-height: #{$h6-line-height}
+
+  @include media-breakpoint-up(desktop)
+    --h1-size: #{$h1-size-desktop}
+    --h1-line-height: #{$h1-line-height-desktop}
+
+    --h2-size: #{$h2-size-desktop}
+    --h2-line-height: #{$h2-line-height-desktop}
+
+    --h3-size: #{$h3-size-desktop}
+    --h3-line-height: #{$h3-line-height-desktop}
+
+    --h4-size: #{$h4-size-desktop}
+    --h4-line-height: #{$h4-line-height-desktop}
+
+    --h5-size: #{$h5-size-desktop}
+    --h5-line-height: #{$h5-line-height-desktop}
+
+    --h6-size: #{$h6-size-desktop}
+    --h6-line-height: #{$h6-line-height-desktop}

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

@@ -25,60 +25,51 @@ h1, h2, h3, h4, h5, h6
 
 @mixin h1
     font-family: $h1-font-family
-    font-size: $h1-size
+    font-size: var(--h1-size)
     font-weight: $h1-weight
-    line-height: $h1-line-height
+    line-height: var(--h1-line-height)
     text-transform: $h1-text-transform
-    @include media-breakpoint-up(desktop)
-        font-size: $h1-size-desktop
 
 h1, .h1
     @include h1
 
 @mixin h2
     font-family: $h2-font-family
-    font-size: $h2-size
+    font-size: var(--h2-size)
     font-weight: $h2-weight
-    line-height: $h2-line-height
+    line-height: var(--h2-line-height)
     text-transform: $h2-text-transform
-    @include media-breakpoint-up(desktop)
-        font-size: $h2-size-desktop
 
 h2, .h2
     @include h2
 
 @mixin h3
     font-family: $h3-font-family
-    font-size: $h3-size
+    font-size: var(--h3-size)
     font-weight: $h3-weight
-    line-height: $h3-line-height
+    line-height: var(--h3-line-height)
     text-transform: $h3-text-transform
-    @include media-breakpoint-up(desktop)
-        font-size: $h3-size-desktop
 
 h3, .h3
     @include h3
 
 @mixin h4
     font-family: $h4-font-family
-    font-size: $h4-size
+    font-size: var(--h4-size)
     font-weight: $h4-weight
-    line-height: $h4-line-height
+    line-height: var(--h4-line-height)
     text-transform: $h4-text-transform
-    @include media-breakpoint-up(desktop)
-        font-size: $h4-size-desktop
 
 h4, .h4
     @include h4
 
 @mixin h5
     font-family: $h5-font-family
-    font-size: $h5-size
+    font-size: var(--h5-size)
     font-weight: $h5-weight
-    line-height: $h5-line-height
+    line-height: var(--h5-line-height)
     text-transform: $h5-text-transform
-    @include media-breakpoint-up(desktop)
-        font-size: $h5-size-desktop
+    // Todo : check that
     a
         text-decoration: none
 
@@ -87,12 +78,10 @@ h5, .h5
 
 @mixin h6
     font-family: $h6-font-family
-    font-size: $h6-size
+    font-size: var(--h6-size)
     font-weight: $h6-weight
-    line-height: $h6-line-height
+    line-height: var(--h6-line-height)
     text-transform: $h6-text-transform
-    @include media-breakpoint-up(desktop)
-        font-size: $h6-size-desktop
 
 h6, .h6
     @include h6