diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 88ed0372fbf27224f0a6d2c3f2118ff08546739e..321c3cd3367bf1639514f0933f1fd665860acb7f 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -74,9 +74,9 @@ $spacing5: px2rem(256) !default
 // TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom
 
 // Grid
-$grid-gutter: 64px !default
-$grid-max-width: 1980px !default
-$grid-gutter-sm: 40px !default
+$grid-gutter: px2rem(64) !default
+$grid-max-width: px2rem(1980) !default
+$grid-gutter-sm: px2rem(40) !default
 
 // Z-index
 $zindex-nav-accessibility: 1010 !default
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index da6ba5f287822d0dc7c070f4f7c3d70fba5ff422..fe172a63a4780c0385c31362611736f8b682b326 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -68,8 +68,8 @@
     margin-left: auto
     margin-right: auto
     max-width: $grid-max-width
-    padding-left: $grid-gutter-sm / 2
-    padding-right: $grid-gutter-sm / 2
+    padding-left: calc(#{$grid-gutter-sm} / 2)
+    padding-right: calc(#{$grid-gutter-sm} / 2)
     width: 100%
     @include media-breakpoint-up(md)
         padding-left: $grid-gutter
diff --git a/assets/sass/_theme/blocks/timeline.sass b/assets/sass/_theme/blocks/timeline.sass
index a2d523ee75cc10927dba67b515c45e32cc7ca270..5c4dbc5b863335d35ea5c0633e77fa8549ad5ae1 100644
--- a/assets/sass/_theme/blocks/timeline.sass
+++ b/assets/sass/_theme/blocks/timeline.sass
@@ -1,6 +1,6 @@
 .block-timeline--vertical
     .events
-        padding-left: $grid-gutter/2
+        padding-left: calc(#{$grid-gutter} / 2)
         position: relative
         &::before
             background: $main-color
@@ -58,7 +58,7 @@
             color: $block-timeline-horizontal-color
             cursor: pointer
             font-size: 1rem
-            padding: $grid-gutter / 2
+            padding: calc(#{$grid-gutter} / 2)
             &:first-child
                 @include icon("arrow-left", before)
             &:last-child
@@ -67,8 +67,8 @@
                 cursor: default
                 opacity: 0.3
     .events
-        margin-left: $grid-gutter / -2
-        margin-right: $grid-gutter / -2
+        margin-left: calc(#{$grid-gutter} / -2)
+        margin-right: calc(#{$grid-gutter} / -2)
         // TODO : fixer le px gap en desktop entre chaque event
         ol
             display: flex
@@ -79,7 +79,7 @@
             width: 100%
     .event
         flex: none
-        padding: 0 $grid-gutter / 2
+        padding: 0 calc(#{$grid-gutter} / 2)
         scroll-snap-align: start
         transition: 0.3s opacity
         width: 50%
diff --git a/assets/sass/_theme/design-system/pagination.sass b/assets/sass/_theme/design-system/pagination.sass
index c05edc30b9646d23d814efd203471ad1be000e1a..fc92bcff686f924ca8c0dbc42edf13c29c9140b2 100644
--- a/assets/sass/_theme/design-system/pagination.sass
+++ b/assets/sass/_theme/design-system/pagination.sass
@@ -2,7 +2,7 @@
     // font-family: $font-family-sans-serif
     font-size: px2rem(14)
     justify-content: center
-    margin: calc($grid-gutter * 2.5) 0 0
+    margin: calc(#{$grid-gutter} * 2.5) 0 0
     li
         @include list-reset
         // @extend .page-item