handle grid in px and spacing in rem

assets/sass/_theme/_configuration.sass

@@ -64,19 +64,19 @@ $btn-padding-y: px2rem(6) !default
 $breadcrumb-color: invert($main-color) !default
 
 // Spacing
-$spacing0: 12px !default
-$spacing1: 24px !default
-$spacing2: 48px !default
-$spacing3: 64px !default
-$spacing4: 128px !default
-$spacing5: 256px !default
+$spacing0: px2rem(12) !default
+$spacing1: px2rem(24) !default
+$spacing2: px2rem(48) !default
+$spacing3: px2rem(64) !default
+$spacing4: px2rem(128) !default
+$spacing5: px2rem(256) !default
 
 // TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom
 
 // Grid
-$grid-gutter: $spacing3 !default
+$grid-gutter: 64px !default
 $grid-max-width: 1980px !default
-$grid-gutter-sm: $spacing1 !default
+$grid-gutter-sm: 40px !default
 
 // Z-index
 $zindex-nav-accessibility: 1010 !default

assets/sass/_theme/blocks/timeline.sass

@@ -58,7 +58,7 @@
             color: $block-timeline-horizontal-color
             cursor: pointer
             font-size: 1rem
-            padding: calc(#{$grid-gutter} / 2)
+            padding: $grid-gutter / 2
             &:first-child
                 @include icon("arrow-left", before)
             &:last-child

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

@@ -65,7 +65,7 @@
         > li
             > a, span
                 display: block
-                padding: $spacing0
+                padding: calc(#{$spacing0} * 0.5) $spacing0
             &:last-child 
                 a, span
                     padding-right: 0
@@ -100,14 +100,14 @@
                 @include grid(4, md)
         @else 
             .dropdown-menu
-                padding-bottom: $spacing0/2
+                padding-bottom: calc(#{$spacing0}/2)
                 padding-left: $spacing0
-                padding-top: $spacing0/2
+                padding-top: calc(#{$spacing0}/2)
                 padding-right: $spacing0
             .nav-level-2
                 > li > a
-                    padding-bottom: $spacing0/2
-                    padding-top: $spacing0/2
+                    padding-bottom: calc(#{$spacing0}/2)
+                    padding-top: calc(#{$spacing0}/2)
                     display: block
 
     @include media-breakpoint-down(md)

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

@@ -47,7 +47,7 @@
             border-top: 1px solid #adb5bd
             @include media-breakpoint-up(md)
                 border: 0
-                padding: $spacing0/2 $spacing0
+                padding: calc(#{$spacing0}/2) $spacing0
         a
             background-color: transparent
             border: 0
@@ -131,7 +131,7 @@
             li
                 a
                     line-height: 140%
-                    padding: $spacing0/2 $spacing0
+                    padding: calc(#{$spacing0}/2) $spacing0
                     text-decoration: none
                     transition: background-color .15s ease-in-out
                 &.disabled

assets/sass/_theme/sections/programs.sass

@@ -132,7 +132,7 @@ ol.programs
             margin: 0 #{-$spacing1}
             padding: px2rem(20) 0
             li
-                padding: $spacing1/3 $spacing1/2
+                padding: calc(#{$spacing1}/3) calc(#{$spacing1}/2)
                 margin-bottom: 0
     // .blocks
     //     .container