Windows : correction de l'unité vw

assets/js/theme/index.js

@@ -1,6 +1,6 @@
 import './polyfills';
 import './utils/utils';
-import './utils/realViewportHeight';
+import './utils/realViewportDimensions';
 
 import './page';
 import './design-system/events';

assets/js/theme/utils/realViewportDimensions.js

@@ -0,0 +1,20 @@
+function setRealViewportHeight () {
+    var rvh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--rvh', rvh + 'px');
+};
+
+function setRealViewportWidth () {
+    // https://destroytoday.com/blog/100vw-and-the-horizontal-overflow-you-probably-didnt-know-about
+    // The window.innerWidth does not return the real viewport width, it's include scrollbar (that is ignored by css's unit `vw`)
+    var rvw = document.body.clientWidth * 0.01;
+    document.documentElement.style.setProperty('--rvw', rvw + 'px');
+};
+
+function setRealViewportSize () {
+    setRealViewportHeight();
+    setRealViewportWidth();
+};
+
+window.addEventListener('load', setRealViewportSize);
+window.addEventListener('resize', setRealViewportSize);
+

assets/sass/_theme/_variables.sass

@@ -160,7 +160,7 @@
   // Elle inclut les gouttières extérieures
   // Si la largeur de l'écran est inférieure à 1980px, on prend la largeur totale.
   // La grille n'est jamais plus grande que 1980px
-  --grid-width: Min(var(--grid-max-width), 100vw)
+  --grid-width: Min(var(--grid-max-width), #{rvw(100)})
 
   // Largeur d'une colonne
   // On soustrait à la largeur de la grille les 13 gouttières (les 2 extérieures et les 11 intérieures), puis on divise par 12

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

@@ -5,6 +5,7 @@
 
 \:root
     --rvh: 1vh
+    --rvw: 1vw
     --spacing-1: #{$spacing-1}
     --spacing-2: #{$spacing-2}
     --spacing-3: #{$spacing-3}

assets/sass/_theme/utils/sizes.sass

@@ -8,3 +8,6 @@ $space-unit: 4 !default
 
 @function rvh($percent)
     @return calc(#{$percent} * var(--rvh))
+
+@function rvw($percent)
+    @return calc(#{$percent} * var(--rvw))