From aa9c0d9bfa2b4303f467dc9de431e5ec68c12d02 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Wed, 19 Oct 2022 18:06:20 +0200
Subject: [PATCH] CSS: manage sidebar-columns-gutter since #sidebar margin
 (#70656)

Instead #sidebar > .cell margin
---
 static/alpes-maritimes-2018/_vars.scss        |  2 +-
 static/arles-2020/_custom.scss                |  1 +
 static/armentieres/_vars.scss                 |  2 +-
 static/caen/_vars.scss                        |  2 +-
 static/cantal/_vars.scss                      |  2 +-
 static/clermont-ici/_vars.scss                |  2 +-
 static/clermont-metropole/_vars.scss          |  2 +-
 static/dordogne-cd24/_custom.scss             |  1 -
 static/dordogne-cd24/_vars.scss               |  2 ++
 static/fontenay-sous-bois-2018/_custom.scss   |  7 -------
 static/fontenay-sous-bois-2018/_vars.scss     |  2 ++
 static/gers-cd32/_custom.scss                 |  1 -
 static/gers-cd32/_vars.scss                   |  1 +
 static/grandlyon-sau/_vars.scss               |  2 +-
 static/haguenau/_custom.scss                  |  1 +
 static/haguenau/_vars.scss                    |  4 ++--
 static/includes/_layout.scss                  | 16 +++++++---------
 static/isere-cd38/_custom.scss                | 15 +--------------
 static/isere-cd38/_vars.scss                  |  2 +-
 static/jura/_vars.scss                        |  2 +-
 static/la-hague-2022/_vars.scss               |  2 +-
 static/metz-metropole-2019/_vars.scss         |  2 +-
 static/meudon-2021/_vars.scss                 |  2 +-
 static/meuse-cd55/_custom.scss                |  2 --
 static/miribel/_vars.scss                     |  2 +-
 static/montlouis-sur-loire/_custom.scss       |  2 +-
 static/montlouis-sur-loire/_vars.scss         |  1 +
 static/nantes/_vars.scss                      |  2 +-
 static/orleans/_custom.scss                   |  5 -----
 static/orleans/_vars.scss                     |  1 +
 static/quimper/_vars.scss                     |  2 +-
 static/roannais-agglomeration/_vars.scss      |  2 +-
 static/rouen/_vars.scss                       |  2 +-
 static/saint-chamond/_custom.scss             |  2 --
 static/saint-chamond/_vars.scss               |  3 ++-
 static/saone-et-loire-cd71-2019/_custom.scss  |  6 ------
 static/saone-et-loire-cd71-2019/_vars.scss    |  3 +++
 static/signal-publik/_vars.scss               |  4 ++--
 static/thonon-agglomeration-online/_vars.scss |  2 +-
 static/toodego/_specialpages.scss             |  4 ++--
 static/tournai/_custom.scss                   |  2 +-
 static/tournai/_vars.scss                     |  1 +
 42 files changed, 49 insertions(+), 74 deletions(-)

diff --git a/static/alpes-maritimes-2018/_vars.scss b/static/alpes-maritimes-2018/_vars.scss
index a3573b64..a77ffbb9 100644
--- a/static/alpes-maritimes-2018/_vars.scss
+++ b/static/alpes-maritimes-2018/_vars.scss
@@ -4,7 +4,7 @@ $font-family: Roboto, sans-serif;
 $font-size: 1em;
 $mobile-limit: 1100px;
 
-$sidebar-width: 400px;
+$sidebar-width: 380px;
 
 $primary-color: #001c76;
 $secondary-color: #e6007e;
diff --git a/static/arles-2020/_custom.scss b/static/arles-2020/_custom.scss
index 5037a700..6241a992 100644
--- a/static/arles-2020/_custom.scss
+++ b/static/arles-2020/_custom.scss
@@ -160,6 +160,7 @@ div#header {
 	#sidebar {
 		max-width: 100%;
 		flex: 0 0 auto;
+		margin-right: 0;
 	}
 	#columns {
 		display: flex;
diff --git a/static/armentieres/_vars.scss b/static/armentieres/_vars.scss
index 5db7f753..405d3d66 100644
--- a/static/armentieres/_vars.scss
+++ b/static/armentieres/_vars.scss
@@ -44,7 +44,7 @@ $back-top-icon-character: "\f062";
 // Header
 $header-logo-size: 250px 60px;
 $toplinks-style: none;
-$sidebar-width: 30%;
+$sidebar-width: 26%;
 $nav-after-image: false;
 
 $nav-color: $gray;
diff --git a/static/caen/_vars.scss b/static/caen/_vars.scss
index 22ffdfff..e9cdda69 100644
--- a/static/caen/_vars.scss
+++ b/static/caen/_vars.scss
@@ -27,7 +27,7 @@ $very-small-limit: 35em;
 $columns-gutter: 60rem / $base-font;
 // $sidebar-columns-gutter: 120em / $base-font;
 $sidebar-columns-gutter: $columns-gutter;
-$sidebar-width: (320rem / $base-font) + $sidebar-columns-gutter;
+$sidebar-width: 320rem / $base-font;
 
 $font-size: 100% / ( 16 / $base-font );
 $font-family: Lato, sans-serif;
diff --git a/static/cantal/_vars.scss b/static/cantal/_vars.scss
index c7d2eaa1..effbe651 100644
--- a/static/cantal/_vars.scss
+++ b/static/cantal/_vars.scss
@@ -29,7 +29,7 @@ $notification_info_color: #e4e4de;
 $notification_error_color: #cc3333;
 
 $sidebar-position: left;
-$sidebar-width: 275px;
+$sidebar-width: 255px;
 
 $title-weight: bold;
 $title-transform: uppercase;
diff --git a/static/clermont-ici/_vars.scss b/static/clermont-ici/_vars.scss
index d3436f6f..13b1ccc0 100644
--- a/static/clermont-ici/_vars.scss
+++ b/static/clermont-ici/_vars.scss
@@ -41,7 +41,7 @@ $font-size: 93.75%;
 $width: 95rem;
 $mobile-limit: 1024px;
 $mobile-width: none;
-$sidebar-width: 25%;
+$sidebar-width: 22%;
 $sidebar-min-width: 18rem;
 $sidebar-columns-gutter: 40px;
 
diff --git a/static/clermont-metropole/_vars.scss b/static/clermont-metropole/_vars.scss
index d89fdae1..509448cd 100644
--- a/static/clermont-metropole/_vars.scss
+++ b/static/clermont-metropole/_vars.scss
@@ -14,7 +14,7 @@ $title-weight: bold;
 $title-color: #ffffff;
 $title-background: $primary-color;
 
-$sidebar-width: 410px;
+$sidebar-width: 390px;
 $sidebar-position: right;
 
 $nav-after-image: false;
diff --git a/static/dordogne-cd24/_custom.scss b/static/dordogne-cd24/_custom.scss
index e1dfa1d4..bdc35092 100644
--- a/static/dordogne-cd24/_custom.scss
+++ b/static/dordogne-cd24/_custom.scss
@@ -573,7 +573,6 @@ div#registration-blocks {
 }
 
 div#sidebar {
-	margin-right: 2.5em;
 	h1, h2, h3 {
 		@include after-line($purple);
 	}
diff --git a/static/dordogne-cd24/_vars.scss b/static/dordogne-cd24/_vars.scss
index 5733afc3..e088812d 100644
--- a/static/dordogne-cd24/_vars.scss
+++ b/static/dordogne-cd24/_vars.scss
@@ -2,6 +2,8 @@ $primary-color: #f4f7fa;
 $purple: #88446b;
 $green: #cbd05d;
 $width: 1316px;
+$sidebar-width: 300px;
+$sidebar-columns-gutter: 2.5em;
 
 $font-family: Montserrat, sans-serif;
 $font-color: #000;
diff --git a/static/fontenay-sous-bois-2018/_custom.scss b/static/fontenay-sous-bois-2018/_custom.scss
index cd9a37c5..512e98b4 100644
--- a/static/fontenay-sous-bois-2018/_custom.scss
+++ b/static/fontenay-sous-bois-2018/_custom.scss
@@ -230,13 +230,6 @@ div#sidebar {
 	}
 }
 
-.gru-content #sidebar div.cell {
-	margin-right: 40px;
-	@media screen and ($max-mobile-viewport) {
-		margin-right: 0rem;
-	}
-}
-
 #content div.trackingcodeinputcell {
 	background: url(img/trackingcode.png) 2rem 1rem no-repeat;
 	border: 1px solid #c6c6c6;
diff --git a/static/fontenay-sous-bois-2018/_vars.scss b/static/fontenay-sous-bois-2018/_vars.scss
index 47a2b0a2..9f4fe11c 100644
--- a/static/fontenay-sous-bois-2018/_vars.scss
+++ b/static/fontenay-sous-bois-2018/_vars.scss
@@ -3,6 +3,8 @@ $primary-color: #da3838;
 $font-size: 1.25em;
 $font-family: "Barlow Condensed", sans-serif;
 $link-color: $primary-color;
+$sidebar-width: 260px;
+$sidebar-columns-gutter: 40px;
 
 $width: 1200px;
 $nav-mobile-limit: 50000px;
diff --git a/static/gers-cd32/_custom.scss b/static/gers-cd32/_custom.scss
index ed71d46b..13aedea9 100644
--- a/static/gers-cd32/_custom.scss
+++ b/static/gers-cd32/_custom.scss
@@ -93,7 +93,6 @@ div#nav {
 
 #sidebar {
 	box-shadow: 3px 3px 20px 0px #dedede;
-	margin-right: 2.5em;
 }
 
 div.linkcell.has-asset-picture {
diff --git a/static/gers-cd32/_vars.scss b/static/gers-cd32/_vars.scss
index f64e53c8..3fd8b5ac 100644
--- a/static/gers-cd32/_vars.scss
+++ b/static/gers-cd32/_vars.scss
@@ -2,6 +2,7 @@ $primary-color: #ae2217;
 $secondary-color: #f4f4f4;
 $tertiary-color: #0f183b;
 $width: 1200px;
+$sidebar-columns-gutter: 2.5em;
 
 $border-radius: 3px;
 $font-size: 1.25em;
diff --git a/static/grandlyon-sau/_vars.scss b/static/grandlyon-sau/_vars.scss
index 8805336c..a18f3282 100644
--- a/static/grandlyon-sau/_vars.scss
+++ b/static/grandlyon-sau/_vars.scss
@@ -30,7 +30,7 @@ $cell-entry-hover-color: #FFFFFF;
 $cell-entry-hover-effect: top-to-bottom;
 $cell-entry-hover-background: #999999;
 $cell-entry-border: 1px solid transparent;
-$sidebar-width: 250px;
+$sidebar-width: 230px;
 $menucell-hover-border: 5px solid #999;
 
 $button-background: #CCC;
diff --git a/static/haguenau/_custom.scss b/static/haguenau/_custom.scss
index 99f25577..d913b16a 100644
--- a/static/haguenau/_custom.scss
+++ b/static/haguenau/_custom.scss
@@ -320,6 +320,7 @@ main {
 
 .gru-content #sidebar {
 	background-color: $gray-light;
+	padding: $columns-gutter;
 	padding-top: 2rem;
 
 	& + #columns-wrapper {
diff --git a/static/haguenau/_vars.scss b/static/haguenau/_vars.scss
index d1d78530..800713e4 100644
--- a/static/haguenau/_vars.scss
+++ b/static/haguenau/_vars.scss
@@ -23,8 +23,8 @@ $width: 1120px;
 $mobile-limit: 64em;
 $very-small-limit: 560px;
 $columns-gutter: 1.5rem;
-$sidebar-columns-gutter: $columns-gutter;
-$sidebar-width: calc(240em / 17 + #{$sidebar-columns-gutter});
+$sidebar-columns-gutter: 0;
+$sidebar-width: calc(265em / 17);
 $grid-gutter: $columns-gutter;
 
 $nav-color: $blue;
diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss
index 789c1cf3..5d642d0f 100644
--- a/static/includes/_layout.scss
+++ b/static/includes/_layout.scss
@@ -7,7 +7,7 @@ $footer-background: #666666 !default;
 $footer-full-width-background: true !default;
 $footer-color: white !default;
 $footer-link-color: $link-color !default;
-$sidebar-width: 300px !default;
+$sidebar-width: 280px !default;
 $sidebar-max-width: $sidebar-width !default;
 $sidebar-min-width: 0 !default;
 $sidebar-position: left !default;
@@ -109,14 +109,12 @@ div#main-content {
 		@if $sidebar-position == right {
 			order: 1;
 		}
-		div.cell {
-			@if $sidebar-position == left {
-				margin-left: 0;
-				margin-right: $sidebar-columns-gutter;
-			} @else {
-				margin-left: $sidebar-columns-gutter;
-				margin-right: 0px;
-			}
+		@if $sidebar-position == left {
+			margin-left: 0;
+			margin-right: $sidebar-columns-gutter;
+		} @else {
+			margin-left: $sidebar-columns-gutter;
+			margin-right: 0px;
 		}
 	}
 }
diff --git a/static/isere-cd38/_custom.scss b/static/isere-cd38/_custom.scss
index 315bb978..ab31faa1 100644
--- a/static/isere-cd38/_custom.scss
+++ b/static/isere-cd38/_custom.scss
@@ -132,20 +132,7 @@ a:hover {
 //
 // LAYOUT
 //
-// sidebar <-> columns gutter
-@media ($min-desktop-viewport) {
-	.gru-content {
-		#sidebar {
-			div.cell {
-				@if $sidebar-position == left {
-					margin-right: $sidebar-columns-gutter;
-				} @else {
-					margin-left: $sidebar-columns-gutter;
-				}
-			}
-		}
-	}
-}
+
 // 3cols layout
 .theme-3cols-layout {
 	@media ($min-desktop-viewport) {
diff --git a/static/isere-cd38/_vars.scss b/static/isere-cd38/_vars.scss
index 195a4d5e..5261bcce 100644
--- a/static/isere-cd38/_vars.scss
+++ b/static/isere-cd38/_vars.scss
@@ -37,7 +37,7 @@ $font-family: $source-sans;
 $link-decoration: underline;
 $sidebar-position: right;
 $sidebar-max-width: 400px;
-$sidebar-width: 26%;
+$sidebar-width: 21%;
 $sidebar-min-width: 290px;
 
 $nav-background: $cyan-dark;
diff --git a/static/jura/_vars.scss b/static/jura/_vars.scss
index 68d46fdc..e889d905 100644
--- a/static/jura/_vars.scss
+++ b/static/jura/_vars.scss
@@ -35,7 +35,7 @@ $footer-link-color: black;
 $footer-menucell-separator: none;
 
 $sidebar-position: left;
-$sidebar-width: 265px;
+$sidebar-width: 245px;
 
 $title-background: transparent;
 $title-weight: bold;
diff --git a/static/la-hague-2022/_vars.scss b/static/la-hague-2022/_vars.scss
index 8e344ccb..8ffb88eb 100644
--- a/static/la-hague-2022/_vars.scss
+++ b/static/la-hague-2022/_vars.scss
@@ -25,7 +25,7 @@ $width: 1200em / $base-font;
 $mobile-limit: 64em;
 $very-small-limit: 35em;
 $columns-gutter: 30px;
-$sidebar-width: 310px + $columns-gutter;
+$sidebar-width: 310px;
 
 $primary-color: $cyan;
 $body-background: white;
diff --git a/static/metz-metropole-2019/_vars.scss b/static/metz-metropole-2019/_vars.scss
index 09975285..4554561c 100644
--- a/static/metz-metropole-2019/_vars.scss
+++ b/static/metz-metropole-2019/_vars.scss
@@ -12,7 +12,7 @@ $primary-color: $darkblue;
 $link-color: $blue;
 $width: 1120px;
 $pwa-desktop-nav-width: 635px;
-$sidebar-width: 270px;
+$sidebar-width: 250px;
 $sidebar-position: right;
 $body-background: white;
 
diff --git a/static/meudon-2021/_vars.scss b/static/meudon-2021/_vars.scss
index e30049eb..97306da1 100644
--- a/static/meudon-2021/_vars.scss
+++ b/static/meudon-2021/_vars.scss
@@ -28,7 +28,7 @@ $width: 1220rem / 15;
 $mobile-limit: 64em;
 $very-small-limit: 35em;
 $columns-gutter: 2rem;
-$sidebar-width: 20rem;
+$sidebar-width: 18rem;
 $sidebar-position: right;
 
 $nav-background: transparent;
diff --git a/static/meuse-cd55/_custom.scss b/static/meuse-cd55/_custom.scss
index 522beb6d..a586081a 100644
--- a/static/meuse-cd55/_custom.scss
+++ b/static/meuse-cd55/_custom.scss
@@ -115,8 +115,6 @@ div.gru-nav > ul {
 #sidebar {
 	background-color: $white-blue;
 	padding-top: 2em;
-	// change Sidebar gutter with columns
-	margin-right: 20px;
 	.gru-content & div.cell {
 		margin-right: 10px;
 		margin-left: 10px;
diff --git a/static/miribel/_vars.scss b/static/miribel/_vars.scss
index dbfb5f1e..217f548e 100644
--- a/static/miribel/_vars.scss
+++ b/static/miribel/_vars.scss
@@ -35,7 +35,7 @@ $mobile-limit: 64em;
 $very-small-limit: 35em;
 $mobile-width: 50em;
 $columns-gutter: 2rem;
-$sidebar-width: calc(33% + 1rem);
+$sidebar-width: calc(33% - 1rem);
 
 $primary-color: $blue;
 $link-color: $red;
diff --git a/static/montlouis-sur-loire/_custom.scss b/static/montlouis-sur-loire/_custom.scss
index 79e71dab..bd4432fa 100644
--- a/static/montlouis-sur-loire/_custom.scss
+++ b/static/montlouis-sur-loire/_custom.scss
@@ -177,7 +177,7 @@ div#page {
 
 				div#sidebar {
 					border-right: 2px solid #d6d6d6;
-					margin-right: 30px;
+					padding-right: 20px;
 				}
 
 				.cell.wcsformsofcategorycell {
diff --git a/static/montlouis-sur-loire/_vars.scss b/static/montlouis-sur-loire/_vars.scss
index f3e0f62d..ab7be364 100644
--- a/static/montlouis-sur-loire/_vars.scss
+++ b/static/montlouis-sur-loire/_vars.scss
@@ -29,6 +29,7 @@ $footer-color: #646464;
 $category-toggled-background: $primary-color;
 $cell-border: none;
 $sidebar-width: 240px;
+$sidebar-columns-gutter: 30px;
 $grid-gutter: 0px;
 $widget-border: 2px solid #b4b4b4;
 $wcs-steps-spacing: 0.5rem;
diff --git a/static/nantes/_vars.scss b/static/nantes/_vars.scss
index 493c147a..9d619806 100644
--- a/static/nantes/_vars.scss
+++ b/static/nantes/_vars.scss
@@ -61,7 +61,7 @@ $link-color: $primary-color;
 $width: 1280px;
 $columns-gutter: 2rem;
 $grid-gutter: 2rem;
-$sidebar-width: 33%;
+$sidebar-width: calc(33% - #{$columns-gutter });
 $sidebar-min-width: 300px;
 
 $header-logo-size: 137px 30px;
diff --git a/static/orleans/_custom.scss b/static/orleans/_custom.scss
index 1aca30da..150c7f85 100644
--- a/static/orleans/_custom.scss
+++ b/static/orleans/_custom.scss
@@ -31,11 +31,6 @@
 }
 
 #content div#sidebar {
-	order: 2;
-	div.cell {
-		margin-left: 20px;
-		margin-right: 0;
-	}
 	div.cell.dashboard-title {
 		margin-top: 0;
 		h3 {
diff --git a/static/orleans/_vars.scss b/static/orleans/_vars.scss
index 819a1897..d6bf863d 100644
--- a/static/orleans/_vars.scss
+++ b/static/orleans/_vars.scss
@@ -3,6 +3,7 @@ $secondary-color: #f05923;
 $ternary-color: #F7EFE2;
 
 $width: 1150px;
+$sidebar-position: right;
 $mobile-limit: 800px;
 $font-size: 0.875em;
 $font-family: "Roboto", arial, helvetica, sans-serif;
diff --git a/static/quimper/_vars.scss b/static/quimper/_vars.scss
index d14882b5..acb950a8 100644
--- a/static/quimper/_vars.scss
+++ b/static/quimper/_vars.scss
@@ -15,7 +15,7 @@ $primary-color: $green;
 $mobile-limit: 800px;
 $very-small-limit: 360px;
 $width: 1280px;
-$sidebar-width: 400px;
+$sidebar-width: 380px;
 $sidebar-position: right;
 $body-background: #eee;
 $title-font-family: "Geometric 231", $font-family;
diff --git a/static/roannais-agglomeration/_vars.scss b/static/roannais-agglomeration/_vars.scss
index ec4b1fab..183a27ef 100644
--- a/static/roannais-agglomeration/_vars.scss
+++ b/static/roannais-agglomeration/_vars.scss
@@ -5,7 +5,7 @@ $red2: darken($red, 20%);
 $blue: #00a0bd;
 
 $width: 1240px;
-$sidebar-width: 240px;
+$sidebar-width: 220px;
 
 $font-color: #3c3c3b;
 $font-family: "Oswald", sans-serif;
diff --git a/static/rouen/_vars.scss b/static/rouen/_vars.scss
index e7cfca05..381d2e12 100644
--- a/static/rouen/_vars.scss
+++ b/static/rouen/_vars.scss
@@ -37,7 +37,7 @@ $nav-border-color: $white;
 $nav-button-background: $black;
 $nav-item-selected-background: #2D2D2D;
 $nav-mobile-menu-background: $pale-primary-color;
-$sidebar-width: 240px;
+$sidebar-width: 220px;
 $steps-color: #9B9B9B;
 $title-weight: bold;
 $width: 1243.97px;
diff --git a/static/saint-chamond/_custom.scss b/static/saint-chamond/_custom.scss
index 5169ac4b..6bd3a335 100644
--- a/static/saint-chamond/_custom.scss
+++ b/static/saint-chamond/_custom.scss
@@ -70,8 +70,6 @@ footer {
 }
 
 #sidebar {
-	box-sizing: content-box;
-	padding-right: 40px;
 	@media screen and (max-width: $nav-mobile-limit) {
 		padding-right: 0;
 	}
diff --git a/static/saint-chamond/_vars.scss b/static/saint-chamond/_vars.scss
index d0a88139..07844f74 100644
--- a/static/saint-chamond/_vars.scss
+++ b/static/saint-chamond/_vars.scss
@@ -5,7 +5,8 @@ $blue2: #2f8dda;  // lighter
 $turquoise: #3eb2af;
 
 $width: 1240px;
-$sidebar-width: 240px;
+$sidebar-width: 220px;
+$sidebar-columns-gutter: 60px;
 
 $font-color: #020202;
 $font-family: Din, sans-serif;
diff --git a/static/saone-et-loire-cd71-2019/_custom.scss b/static/saone-et-loire-cd71-2019/_custom.scss
index 66404f72..fe2c7333 100644
--- a/static/saone-et-loire-cd71-2019/_custom.scss
+++ b/static/saone-et-loire-cd71-2019/_custom.scss
@@ -208,12 +208,6 @@ div#sidebar {
 	}
 }
 
-.gru-content #sidebar div.cell {
-	margin-right: 40px;
-	@media screen and ($max-mobile-viewport) {
-		margin-right: 0rem;
-	}
-}
 
 #content div.cell.with-borders {
 	border: 1px solid #c6c6c6;
diff --git a/static/saone-et-loire-cd71-2019/_vars.scss b/static/saone-et-loire-cd71-2019/_vars.scss
index 3f401631..4933d2b8 100644
--- a/static/saone-et-loire-cd71-2019/_vars.scss
+++ b/static/saone-et-loire-cd71-2019/_vars.scss
@@ -11,6 +11,9 @@ $font-family: "Roboto", sans-serif;
 $link-color: $primary-color;
 
 $width: 1200px;
+$sidebar-width: 300px;
+$sidebar-columns-gutter: 40px;
+
 $nav-mobile-limit: 50000px;
 $nav-button-background: transparent;
 $nav-button-color: $green;
diff --git a/static/signal-publik/_vars.scss b/static/signal-publik/_vars.scss
index 0607f692..2503c8fa 100644
--- a/static/signal-publik/_vars.scss
+++ b/static/signal-publik/_vars.scss
@@ -9,7 +9,7 @@ $font-family: Roboto, sans-serif;
 $primary-color: $green;
 $very-small-limit: 360px;
 $width: 1180px;
-$sidebar-width: 493px;
+$sidebar-width: 473px;
 $sidebar-position: left;
 $border-radius: 0;
 
@@ -67,4 +67,4 @@ $wcs-step-current-color: #fff;
 $wcs-step-current-background: $steps-background;
 $wcs-step-marker-background: hsla(0,0%,100%,0.6);
 $wcs-step-current-marker-color: #000;
-$wcs-step-current-marker-background: hsla(0,0%,100%,0.9);
\ No newline at end of file
+$wcs-step-current-marker-background: hsla(0,0%,100%,0.9);
diff --git a/static/thonon-agglomeration-online/_vars.scss b/static/thonon-agglomeration-online/_vars.scss
index 9022155c..ec383280 100644
--- a/static/thonon-agglomeration-online/_vars.scss
+++ b/static/thonon-agglomeration-online/_vars.scss
@@ -27,7 +27,7 @@ $mobile-limit: 64em;
 $very-small-limit: 35em;
 $columns-gutter: 40em / 15;
 $sidebar-position: right;
-$sidebar-width: 480em / 15;
+$sidebar-width: 400em / 15;
 $sidebar-columns-gutter: 80em / 15;
 $grid-gutter: 2rem;
 $columns-gutter: 2rem;
diff --git a/static/toodego/_specialpages.scss b/static/toodego/_specialpages.scss
index eac9fe77..62a542d0 100644
--- a/static/toodego/_specialpages.scss
+++ b/static/toodego/_specialpages.scss
@@ -318,8 +318,8 @@ body.page-connect {
 		}
 	}
 	.gru-content #sidebar {
-		flex: 0 0 $sidebar-width + 150px;
-		max-width: $sidebar-width + 150px;
+		flex: 0 0 $sidebar-width + 170px;
+		max-width: $sidebar-width + 170px;
 		margin-top: calc(0.4em + 60px);
 		overflow: auto;
 		height: 60vh;
diff --git a/static/tournai/_custom.scss b/static/tournai/_custom.scss
index 1e8bc5e3..9a92ea15 100644
--- a/static/tournai/_custom.scss
+++ b/static/tournai/_custom.scss
@@ -181,7 +181,7 @@ $dashboard_items: profil, demandes, paiements, porte-documents;
 
 #sidebar {
 	border-right: 2px solid #d6d6d6;
-	margin-right: 10px;
+	padding-right: 20px;
 }
 
 div#gauche + div#rub_service {
diff --git a/static/tournai/_vars.scss b/static/tournai/_vars.scss
index 2d430e23..ea247a75 100644
--- a/static/tournai/_vars.scss
+++ b/static/tournai/_vars.scss
@@ -26,6 +26,7 @@ $footer-background: #7A7979;
 $category-toggled-background: $primary-color;
 $cell-border: 0px;  // != none, to avoid "OR" between login blocks
 $sidebar-width: 240px;
+$sidebar-columns-gutter: 10px;
 $grid-gutter: 0px;
 $widget-border: 2px solid #b4b4b4;
 
-- 
2.30.2

