From df1355adb9678ef99b5959498e0ce2cfbc972db9 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Wed, 29 Jan 2020 16:55:53 +0100
Subject: [PATCH] scss: all themes: use custom mobile and desktop medias sass
 vars to manage medias queries (#37223)

---
 static/alfortville/_custom.scss               |   2 +-
 static/alpes-maritimes-2018/_custom.scss      |  50 +++---
 static/amiens-metropole/_custom.scss          |   2 +-
 static/amiens-metropole/_forms.scss           |   6 +-
 static/amiens-metropole/_header.scss          |   4 +-
 static/amiens-metropole/_layout.scss          |   2 +-
 static/arles/_custom.scss                     |  12 +-
 static/arpajon/_custom.scss                   |   4 +-
 static/auch/_custom.scss                      |   4 +-
 static/beaulieu/_custom.scss                  |  10 +-
 static/blois-2018/_custom.scss                |  38 ++---
 static/bouches-du-rhone/_custom.scss          |   4 +-
 static/calvados-cd14/_custom.scss             |   8 +-
 static/castelnau-le-lez/_custom.scss          |   6 +-
 static/castries-2020/_custom.scss             |   4 +-
 static/castries/_custom.scss                  |   8 +-
 static/chateauroux/_custom.scss               |   6 +-
 static/clapiers/_custom.scss                  |   4 +-
 static/clapotis-les-canards/_custom.scss      |   2 +-
 static/clermont-metropole/_custom.scss        |  14 +-
 .../clisson-sevre-et-maine-agglo/_custom.scss |   4 +-
 static/clisson/_custom.scss                   |   4 +-
 static/cnil/_custom.scss                      |  20 +--
 static/cotes-d-armor/_custom.scss             |   2 +-
 static/cournonterral/_custom.scss             |   4 +-
 static/dauphine/_custom.scss                  |   2 +-
 static/dreux/_custom.scss                     |   2 +-
 static/fabregues/_custom.scss                 |   6 +-
 static/fondettes/_custom.scss                 |   2 +-
 static/fontenay-sous-bois-2018/_custom.scss   |  30 ++--
 static/gorges/_custom.scss                    |   4 +-
 static/gpseo/_custom.scss                     |   4 +-
 static/grand-chambery/_custom.scss            |  26 ++--
 static/grandlyon-sau/_categorie-demande.scss  |   6 +-
 static/grandlyon-sau/_custom.scss             |  22 +--
 static/grandlyon/_custom.scss                 |   2 +-
 static/grenoble-metropole-2019/_custom.scss   |  60 ++++----
 static/grosboule-les-bains/_custom.scss       |   2 +-
 static/haute-garonne-cd31/_custom.scss        |  30 ++--
 static/haute-goulaine/_custom.scss            |   6 +-
 static/hautes-alpes-2018/_circle-steps.scss   |   2 +-
 static/hautes-alpes-2018/_custom.scss         |  12 +-
 .../hautes-alpes-2018/_neutral-variant.scss   |   6 +-
 static/juvignac/_custom.scss                  |   8 +-
 static/la-hague/_custom.scss                  |   2 +-
 static/la-reunion/_custom.scss                |   2 +-
 static/la-seyne-sur-mer/_custom.scss          |   2 +-
 static/lattes/_custom.scss                    |  10 +-
 static/laverune/_custom.scss                  |   6 +-
 static/le-cres/_custom.scss                   |  10 +-
 static/lenord/_custom.scss                    |   2 +-
 static/lille-metropole/_custom.scss           |   2 +-
 static/lille/_custom.scss                     |  46 +++---
 static/lot-cd46/_custom.scss                  |   4 +-
 static/lozere/_custom.scss                    |   4 +-
 static/massoins/_custom.scss                  |   6 +-
 static/mauguio/_custom.scss                   |  12 +-
 static/meaux/_custom.scss                     |   4 +-
 static/metz-metropole-2019/_custom.scss       |  82 +++++-----
 static/metz/_custom.scss                      |   4 +-
 static/meudon/_custom.scss                    |   4 +-
 static/meuse-cd55/_custom.scss                |   8 +-
 static/meyzieu-2018/_custom.scss              |  34 ++---
 static/montlouis-sur-loire/_custom.scss       |   2 +-
 static/montpellier/_custom.scss               |  18 +--
 static/montreuil/_custom.scss                 |  10 +-
 static/moselle/_custom.scss                   |   2 +-
 static/murviel-les-montpellier/_custom.scss   |   6 +-
 static/nancy-en-direct/_custom.scss           |  26 ++--
 static/nanterre/_custom.scss                  |   2 +-
 static/orleans/_custom.scss                   |  10 +-
 static/perols/_custom.scss                    |   6 +-
 static/pfwb/_custom.scss                      |  16 +-
 static/pratic/_custom.scss                    |   2 +-
 static/publik/_custom.scss                    |  10 +-
 static/quimper/_custom.scss                   |  10 +-
 static/rochefort/_custom.scss                 |  12 +-
 static/saint-bres/_custom.scss                |   8 +-
 static/saint-denis/_custom.scss               |   6 +-
 static/saint-drezery/_custom.scss             |   4 +-
 static/saint-genies-des-mourgues/_custom.scss |   8 +-
 static/saint-georges-d-orques/_custom.scss    |   4 +-
 static/saint-jean-de-vedas/_custom.scss       |   6 +-
 static/saint-lo-agglo/_custom.scss            |   8 +-
 static/saint-vallier-de-thiey/_custom.scss    |   4 +-
 static/saone-et-loire-cd71-2019/_custom.scss  |  24 +--
 static/saone-et-loire-cd71/_custom.scss       |   6 +-
 static/seine-et-marne/_custom.scss            |   6 +-
 static/sens/_custom.scss                      |   4 +-
 static/sicoval/_custom.scss                   |   2 +-
 static/sictiam/_custom.scss                   |   2 +-
 static/sictiam/_sictiam.scss                  |   4 +-
 static/signal-publik/_custom.scss             |  22 +--
 static/sospel/_custom.scss                    |   6 +-
 static/strasbourg-2018/_custom.scss           |   2 +-
 static/sussargues/_custom.scss                |   6 +-
 static/toulouse-metropole/_custom.scss        | 142 +++++++++---------
 static/toulouse/_custom.scss                  | 126 ++++++++--------
 static/tournai/_custom.scss                   |   6 +-
 static/tours-metropole/_custom.scss           |  18 +--
 static/universite-paris-nanterre/_custom.scss |   6 +-
 static/urville-nacqueville/_custom.scss       |   4 +-
 static/venissieux/_custom.scss                |  22 +--
 static/villejuif/_custom.scss                 |   4 +-
 static/villeneuve-les-maguelone/_custom.scss  |   4 +-
 static/villeurbanne-2018/_custom.scss         |  12 +-
 static/vincennes-2018/_custom.scss            |   4 +-
 107 files changed, 656 insertions(+), 656 deletions(-)

diff --git a/static/alfortville/_custom.scss b/static/alfortville/_custom.scss
index 5836dc2b..e8dd9d21 100644
--- a/static/alfortville/_custom.scss
+++ b/static/alfortville/_custom.scss
@@ -164,7 +164,7 @@ div.familyinfoscell div#children {
 
 /* general responsiveness */
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	body {
 		width: 100% !important;
 		min-width: auto !important;
diff --git a/static/alpes-maritimes-2018/_custom.scss b/static/alpes-maritimes-2018/_custom.scss
index 40dfa59b..40713d57 100644
--- a/static/alpes-maritimes-2018/_custom.scss
+++ b/static/alpes-maritimes-2018/_custom.scss
@@ -11,7 +11,7 @@ body {
 	border-right: 0;
 	border-top: 0;
 	border-bottom: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 15px;
 		border-left: 0;
 	}
@@ -26,7 +26,7 @@ body {
 		bottom: 0;
 		transform: skew(-25deg);
 		border-left: $width solid $border-color;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -49,12 +49,12 @@ div#main-content-wrapper {
 	border: 0;
 	box-shadow: none;
 	padding: 1ex 0 0.3ex 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding:0.3ex 0;
 	}
 	span {
 		a {
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				text-indent: -9999px;
 			}
 			&:first-child {
@@ -84,7 +84,7 @@ div#main-content-wrapper {
 	background-position: center left;
 	background-repeat: no-repeat;
 	height: 66px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-size: auto 75%;
 		height: 80px;
 	}
@@ -100,7 +100,7 @@ div.departement {
 		width: 275px;
 		display: block;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 }
@@ -131,7 +131,7 @@ div.homepage-container {
 		display: block;
 		width: 50%;
 		margin: 0 auto;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 		}
 	}
@@ -148,7 +148,7 @@ div.homepage-container {
 	div.homepage-header {
 		width: 55%;
 		margin: 0 auto;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 100%;
 		}
 	}
@@ -184,7 +184,7 @@ div.homepage-container {
 			display: inline;
 			margin: 1ex 1em;
 			@include trapesoid($border-color: $ternary-color, $background-color: $primary-color);
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				display: inline-block;
 			}
 		}
@@ -257,7 +257,7 @@ div.homepage-container {
 				width: 50%;
 				margin: 0 auto;
 				@include trapesoid($ternary-color);
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					width: auto;
 				}
 			}
@@ -280,7 +280,7 @@ div.homepage-container {
 		div.cell:first-child {
 			width: 50%;
 			margin: 0 auto;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: auto;
 			}
 		}
@@ -294,7 +294,7 @@ div.homepage-container {
 			padding: 3ex 3em;
 			div.cell {
 				width: 40%;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					width: auto;
 				}
 			}
@@ -480,7 +480,7 @@ ul#evolutions li span.item {
 	}
 }
 
-@media (min-width: $mobile-limit + 1) {
+@media ($min-desktop-viewport) {
 	@if ($form-sidebar-position == left or $form-sidebar-position == right) {
 			.wcs-step {
 				font-size: 1.25em;
@@ -521,7 +521,7 @@ div#social-steps ol {
 			span.marker {
 				background: $primary-color;
 				color: #fff;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					border-radius: 50%;
 				}
 			}
@@ -549,7 +549,7 @@ div#social-steps ol {
 				display: -ms-flex;
 				@include vendor-prefix(justify-content, center);
 				@include vendor-prefix(align-items, center);
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					font-size: 100%;
 					background: #fff;
 					color: $primary-color;
@@ -558,7 +558,7 @@ div#social-steps ol {
 			&.label {
 				text-align: center;
 				font-size: 90%;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					display: none;
 				}
 			}
@@ -612,14 +612,14 @@ div#nav-wrapper {
 	ul {
 		margin-top: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
 
 div.gru-nav {
 	> ul > li {
-		@media screen and (min-width: $mobile-limit) {
+		@media screen and ($min-desktop-viewport) {
 			&:not(:last-child)::after {
 				content: '/';
 			}
@@ -644,7 +644,7 @@ div#footer-wrapper {
 	background: $footer-background url('img/footer.png') 64% 50%;
 	background-repeat: no-repeat;
 	background-size: contain;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: $footer-background url('img/footer-mobile.png') right bottom;
 		background-repeat: no-repeat;
 	}
@@ -704,7 +704,7 @@ div#footer {
 
 #left, #right {
 	width: 48%;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: auto;
 	}
 }
@@ -731,7 +731,7 @@ h2 + h2 {
 .section-demarches div#page {
 	background: url('img/page-header.png') no-repeat;
 	background-position: center 170px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-position: center 110px;
 	}
 	div.cell.textcell:first-child {
@@ -759,7 +759,7 @@ h2 + h2 {
 	div#left, div#right {
 		width: 40%;
 		margin-left: 4em;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 100%;
 			margin: 0;
 		}
@@ -808,7 +808,7 @@ div#login-page {
 			float: none;
 			width: 80%;
 			color: #fff;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: 100%;
 				margin: 0;
 			}
@@ -882,7 +882,7 @@ div.cell {
 				margin: 3ex 1em;
 				vertical-align: middle;
 				box-sizing: border-box;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					padding: 0 1em;
 					margin: 3ex 0;
 					width: 100%;
@@ -968,7 +968,7 @@ div.cell {
 				width: 380px;
 				display: inline-block;
 				text-align: center;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					width: auto;
 				}
 			}
diff --git a/static/amiens-metropole/_custom.scss b/static/amiens-metropole/_custom.scss
index 132fda34..ef834fd1 100644
--- a/static/amiens-metropole/_custom.scss
+++ b/static/amiens-metropole/_custom.scss
@@ -173,7 +173,7 @@ nav {
 		}
 	}
 }
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#main-content-wrapper #main-content #content .wide-container {
 		&.topbanner-wrapper {
 			height: 350px;
diff --git a/static/amiens-metropole/_forms.scss b/static/amiens-metropole/_forms.scss
index 9f865011..03396367 100644
--- a/static/amiens-metropole/_forms.scss
+++ b/static/amiens-metropole/_forms.scss
@@ -36,7 +36,7 @@
 		input, textarea {
 			@extend %input-style;
 
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				max-width: 100%;
 			}
 
@@ -216,13 +216,13 @@
 }
 
 
-@media screen and (min-width: $mobile-limit+1px) {
+@media screen and ($min-desktop-viewport) {
 	#page #main-content-wrapper #main-content #content #columns {
 		@include flex-direction(row);
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#page #main-content-wrapper #main-content #content #columns {
 		@include flex-direction(column);
 
diff --git a/static/amiens-metropole/_header.scss b/static/amiens-metropole/_header.scss
index 70870870..543800f7 100644
--- a/static/amiens-metropole/_header.scss
+++ b/static/amiens-metropole/_header.scss
@@ -172,7 +172,7 @@ $header-content-margin: 5px;
 		}
 	}
 }
-@media screen and (min-width: $mobile-limit+1px) {
+@media screen and ($min-desktop-viewport) {
 	.site-header {
 		height: $header-height;
 
@@ -186,7 +186,7 @@ $header-content-margin: 5px;
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	.site-header {
 		height: $header-height * 2;
 
diff --git a/static/amiens-metropole/_layout.scss b/static/amiens-metropole/_layout.scss
index 09d838ad..b520ed85 100644
--- a/static/amiens-metropole/_layout.scss
+++ b/static/amiens-metropole/_layout.scss
@@ -67,7 +67,7 @@ body.has-picture, .page-index #content {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	.pull-right {
 		width: 100%;
 	}
diff --git a/static/arles/_custom.scss b/static/arles/_custom.scss
index 4d01568b..3900b77f 100644
--- a/static/arles/_custom.scss
+++ b/static/arles/_custom.scss
@@ -62,7 +62,7 @@ div#header-wrapper {
 			@media only screen and (max-width: $small-screen) {
 				display: none;
 			}
-			@media only screen and (max-width: $mobile-limit) {
+			@media only screen and ($max-mobile-viewport) {
 				margin: 0;
 			}
 			a {
@@ -155,7 +155,7 @@ div#login-page {
 	min-width: 400px;
 	margin: 10px auto;
 	border: 1px solid #ccc;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: 80%;
 	}
 	@media screen and (max-width: 479px) {
@@ -319,7 +319,7 @@ div.gru-content {
 				text-align:center;
 				img { width: 50px; height: 50px; }
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin-bottom: 1em;
 				&:nth-child(2n) { clear: left; }
 			}
@@ -331,7 +331,7 @@ div.gru-content {
 				width:30%;
 				min-width: 170px;
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				span { display: block; }
 			}
 		}
@@ -541,7 +541,7 @@ div.file-upload-widget div.title {
 		}
 
 		&--label {
-			@media ($mq-min--wcs-steps-horizontal-layout) and (max-width: $mobile-limit) {
+			@media ($mq-min--wcs-steps-horizontal-layout) and ($max-mobile-viewport) {
 				color: $primary-color;
 			}
 		}
@@ -580,7 +580,7 @@ div#user-files {
 			font-size: 200%;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		td {
 			padding: 3px;
 		}
diff --git a/static/arpajon/_custom.scss b/static/arpajon/_custom.scss
index b07877dd..3c5c3504 100644
--- a/static/arpajon/_custom.scss
+++ b/static/arpajon/_custom.scss
@@ -13,7 +13,7 @@
 	position: relative;
 	left: -1rem;
 	padding-left: 370px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 0;
 		max-width: 90%;
 		background-size: contain;
@@ -60,7 +60,7 @@ div#main-content-wrapper {
 	box-sizing: border-box;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#header #top #logo a {
 		display: block;
 		height: 75px;
diff --git a/static/auch/_custom.scss b/static/auch/_custom.scss
index 407e791b..31c86454 100644
--- a/static/auch/_custom.scss
+++ b/static/auch/_custom.scss
@@ -8,7 +8,7 @@
 
 h1#logo a {
 	background: url(img/logo.png) no-repeat left bottom;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-size: contain;
 	}
 	display: block;
@@ -32,7 +32,7 @@ div.gru-nav > ul > li a {
 }
 
 div#top-social {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 	position: absolute;
diff --git a/static/beaulieu/_custom.scss b/static/beaulieu/_custom.scss
index 994f94ba..ab97aab0 100644
--- a/static/beaulieu/_custom.scss
+++ b/static/beaulieu/_custom.scss
@@ -17,7 +17,7 @@ body {
 			line-height: 120px;
 			padding-left: 260px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			padding-top: 50px;
 			a {
@@ -34,7 +34,7 @@ body {
 	background: url(img/fond_fixe.jpg) top center no-repeat;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav-wrapper {
 		background: inherit;
 	}
@@ -61,11 +61,11 @@ div#nav {
 		display: inline-block;
 		color: $font-color;
 		padding: 10px 10px 15px 10px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 80%;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		left: 0;
 		right: 0;
 		max-width: none;
@@ -75,7 +75,7 @@ div#nav {
 div#main-content {
 	background: white;
 	padding: 20px 10px 0 10px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 20px 0 0 0;
 	}
 }
diff --git a/static/blois-2018/_custom.scss b/static/blois-2018/_custom.scss
index 5b1e40df..d2a575e4 100644
--- a/static/blois-2018/_custom.scss
+++ b/static/blois-2018/_custom.scss
@@ -7,7 +7,7 @@ html, body {
 div#header {
 	display: flex;
 	padding: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: block;
 		height: auto;
 		min-height: 150px;
@@ -19,7 +19,7 @@ div#header {
 		box-sizing: border-box;
 		padding: 20px 30px 20px 20px;
 		text-transform: uppercase;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 25px;
 		}
 		width: 100%;
@@ -35,7 +35,7 @@ div#header {
 			border: none;
 			background: none;
 			top: 20px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				top: 0;
 				left: 0;
 				right: 0;
@@ -61,7 +61,7 @@ div#header {
 .page-template-homepage_1col div#header,
 .page-template-homepage div#header {
 	height: $header-height;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: block;
 		height: auto;
 	}
@@ -79,7 +79,7 @@ div#header {
 			padding: 0.5ex 1ex;
 			display: inline-block;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -92,7 +92,7 @@ div#header {
 		flex-grow: 1;
 		height: $header-height;
 		text-align: center;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			height: auto;
 			background-size: cover;
 			padding-top: 3rem;
@@ -105,7 +105,7 @@ div#header {
 		display: block;
 		width: 37rem;
 		margin: $header-height / 3 auto 0 auto;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 80%;
 			margin-top: 0;
 		}
@@ -118,7 +118,7 @@ div#header {
 		}
 		h1 {
 			font-size: 40px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				padding-left: 0;
 				font-size: 30px;
 			}
@@ -126,7 +126,7 @@ div#header {
 		h2 {
 			font-size: 20px;
 			font-weight: normal;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				font-size: 18px;
 				margin: 0;
 			}
@@ -146,7 +146,7 @@ div#sidebar {
 div#content {
 	padding-top: 1em;
 	min-height: calc(100vh - 200px);
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-top: 0;
 	}
 }
@@ -200,7 +200,7 @@ div#content {
 		}
 	}
 
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 0;
 	}
 
@@ -243,7 +243,7 @@ div#content {
 		left: $sidebar-width;
 		padding: 1rem;
 		box-sizing: border-box;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 			width: auto;
 		}
@@ -271,7 +271,7 @@ div#content {
 				color: #3b4758;
 				display: block;
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				display: block;
 				width: auto;
 			}
@@ -305,7 +305,7 @@ div#content {
 
 #nav {
 	padding-left: $sidebar-width;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 0;
 	}
 	box-sizing: border-box;
@@ -314,7 +314,7 @@ div#content {
 	ul {
 		margin: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
@@ -337,7 +337,7 @@ div#footer-wrapper::before {
 
 	background-position: right 40px top 20px, right 130px top 20px, right 270px top 20px, right 0px top 0px;
 	position: absolute;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-image: url(img/cias.png), url(img/agglo-blois.png), url(img/blois.png);
 		background-position: right 40px top 20px, right 130px top 20px, right 270px top 20px;
 		position: static;
@@ -351,7 +351,7 @@ div#footer-wrapper::before {
 	padding: 1rem 0 1rem 0;
 	div.textcell {
 		padding-left: $sidebar-width;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 		}
 		a {
@@ -370,7 +370,7 @@ div#gauche {
 	padding-top: 0;
 	background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);
 	min-height: 100%;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		min-height: 0;
 		background: none;
 		width: auto;
@@ -487,7 +487,7 @@ div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service for
 div#rub_service {
 	margin-top: 0;
 	padding: 0 3rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0 0.5rem;
 		box-sizing: border-box;
 	}
diff --git a/static/bouches-du-rhone/_custom.scss b/static/bouches-du-rhone/_custom.scss
index 3a28af22..f27c6f10 100644
--- a/static/bouches-du-rhone/_custom.scss
+++ b/static/bouches-du-rhone/_custom.scss
@@ -46,7 +46,7 @@ div#section-une {
 	height: 300px;
 	padding: 2rem;
 	background-size: cover;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: auto;
 	}
 	div.cell#une {
@@ -59,7 +59,7 @@ div#section-une {
 		border: none;
 		opacity: 0.9;
 		padding: 2rem 4rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			float: none;
 			width: auto;
 			padding: 1rem 1rem;
diff --git a/static/calvados-cd14/_custom.scss b/static/calvados-cd14/_custom.scss
index e1c35008..9a97ca5b 100644
--- a/static/calvados-cd14/_custom.scss
+++ b/static/calvados-cd14/_custom.scss
@@ -125,7 +125,7 @@ body.has-picture {
 	nav::after {
 		transition: all ease 0.2s;
 		top: calc(#{$toplinks-height} + #{$nav-padding} + #{$font-size * 3});
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: -16px;
 			height: 100px;
 		}
@@ -146,7 +146,7 @@ body.scrolled {
 			padding-top: 0;
 			padding-bottom: 0;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-bottom: 1rem;
 		}
 	}
@@ -156,7 +156,7 @@ body.scrolled {
 
 	&.has-picture nav::after {
 		top: calc(#{$nav-padding} + #{$font-size * 3});
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: -16px;
 		}
 	}
@@ -170,7 +170,7 @@ span.helptext, div.hint {
 	font-size: 90%;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav, .site-header {
 		text-align: left;
 		position: static;
diff --git a/static/castelnau-le-lez/_custom.scss b/static/castelnau-le-lez/_custom.scss
index 8c3f14b5..251a95d1 100644
--- a/static/castelnau-le-lez/_custom.scss
+++ b/static/castelnau-le-lez/_custom.scss
@@ -27,7 +27,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 		}
@@ -84,7 +84,7 @@ div#main-content-wrapper {
 		color: black;
 		padding: 5px 10px 10px 10px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		left: 0;
 		right: 0;
 		max-width: none;
@@ -103,7 +103,7 @@ footer {
 
 .wcs-steps {
 	position: relative;
-	@media ($mq-min--wcs-steps-horizontal-layout) and (max-width: $mobile-limit) {
+	@media ($mq-min--wcs-steps-horizontal-layout) and ($max-mobile-viewport) {
 		padding: 0.5em;
 	}
 }
\ No newline at end of file
diff --git a/static/castries-2020/_custom.scss b/static/castries-2020/_custom.scss
index 992737cf..43fef833 100644
--- a/static/castries-2020/_custom.scss
+++ b/static/castries-2020/_custom.scss
@@ -17,7 +17,7 @@ div#header {
 			overflow: hidden;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: none;
 		padding-left: 0;
 		a {
@@ -38,7 +38,7 @@ div#header {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	.gru-nav-wrapper {
 		margin-top: -40px;
 	}
diff --git a/static/castries/_custom.scss b/static/castries/_custom.scss
index 56f5d58e..8ce2aa41 100644
--- a/static/castries/_custom.scss
+++ b/static/castries/_custom.scss
@@ -3,7 +3,7 @@ body {
 	background-attachment: fixed;
 	background-size: cover;
 	padding: 50px 0 20px 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0;
 	}
 }
@@ -17,7 +17,7 @@ div#page {
 	.site-header, nav, #main-content-wrapper {
 		box-sizing: border-box;
 		padding: 0 20px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0;
 		}
 	}
@@ -33,7 +33,7 @@ div#page {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			a {
 				width: 100%;
@@ -52,7 +52,7 @@ footer {
 	border-radius: 0 0 2 * $border-radius 2 * $border-radius;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	.gru-nav-wrapper {
 		margin-top: -40px;
 	}
diff --git a/static/chateauroux/_custom.scss b/static/chateauroux/_custom.scss
index 86f9b404..9e9ca294 100644
--- a/static/chateauroux/_custom.scss
+++ b/static/chateauroux/_custom.scss
@@ -23,7 +23,7 @@ footer::before {
 	border-top: 40px solid #3F3F3F;
 	background: url(header-bg.png) no-repeat 50% 0;
 	height: 120px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 130px;
 	}
 }
@@ -42,7 +42,7 @@ h1#logo {
 	a {
 		padding-left: 120px;
 		color: #0779b7;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 100px;
 		}
 	}
@@ -71,7 +71,7 @@ div#nav > ul > li a {
 	font-weight: bold;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#toplinks {
 		max-width: none;
 	}
diff --git a/static/clapiers/_custom.scss b/static/clapiers/_custom.scss
index 68574ed2..2bc77364 100644
--- a/static/clapiers/_custom.scss
+++ b/static/clapiers/_custom.scss
@@ -16,7 +16,7 @@ body {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 80px;
 			padding-left: 0;
 			a {
@@ -51,7 +51,7 @@ footer {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	.gru-nav-wrapper {
 		margin-top: -80px;
 	}
diff --git a/static/clapotis-les-canards/_custom.scss b/static/clapotis-les-canards/_custom.scss
index 6b25726a..f991ea29 100644
--- a/static/clapotis-les-canards/_custom.scss
+++ b/static/clapotis-les-canards/_custom.scss
@@ -16,7 +16,7 @@
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#header #top #logo a {
 		display: block;
 		height: 75px;
diff --git a/static/clermont-metropole/_custom.scss b/static/clermont-metropole/_custom.scss
index 59ee1e19..5e00ccef 100644
--- a/static/clermont-metropole/_custom.scss
+++ b/static/clermont-metropole/_custom.scss
@@ -9,7 +9,7 @@ h1#logo {
 		display: block;
 		text-indent: -9999px;
 		height: 50px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			background-position: center center;
 			background-size: contain;
 			padding-top: 15px;
@@ -23,14 +23,14 @@ div#toplinks {
 	top: -40px;
 	background: transparent;
 	border: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-top: 0;
 	}
 	a {
 		color: #ffffff;
 	}
 	span.connected-user {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -41,7 +41,7 @@ div#nav {
 		margin: 0 0.6%;
 		width: 193px;
 		text-align: center;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 			text-align: left;
 			margin: 0;
@@ -111,7 +111,7 @@ div.carrousel-item-content {
 	text-transform: uppercase;
 	margin-bottom: 20px;
 	width: 50%;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: 100%;
 	}
 }
@@ -126,7 +126,7 @@ div#header-wrapper {
 }
 
 div#footer-wrapper {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 }
@@ -139,7 +139,7 @@ div#header-top {
 		display: none;
 	}
 	ul {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-top: 0;
 		}
 	}
diff --git a/static/clisson-sevre-et-maine-agglo/_custom.scss b/static/clisson-sevre-et-maine-agglo/_custom.scss
index 49a950f7..bebd4e2d 100644
--- a/static/clisson-sevre-et-maine-agglo/_custom.scss
+++ b/static/clisson-sevre-et-maine-agglo/_custom.scss
@@ -1,7 +1,7 @@
 div#page {
 	margin: 0 60px;
 	background: #F1F1F1;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: auto;
 	}
 }
@@ -20,7 +20,7 @@ h1#logo a {
 	padding-bottom: 20px;
 	color: $title-color;
 	font-weight: normal;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: 100%;
 		padding-left: 0;
 		overflow: hidden;
diff --git a/static/clisson/_custom.scss b/static/clisson/_custom.scss
index 31636aa5..b270e3e8 100644
--- a/static/clisson/_custom.scss
+++ b/static/clisson/_custom.scss
@@ -1,5 +1,5 @@
 h1#logo {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		overflow: hidden;
 	}
 }
@@ -12,7 +12,7 @@ h1#logo a {
 	line-height: 80px;
 	padding-left: 250px;
 	color: $title-color;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		overflow: hidden;
 		text-indent: -2000px;
 	}
diff --git a/static/cnil/_custom.scss b/static/cnil/_custom.scss
index 938d1c62..0ff20f9e 100644
--- a/static/cnil/_custom.scss
+++ b/static/cnil/_custom.scss
@@ -19,7 +19,7 @@ a.pk-button:link, a.pk-button:visited {
 
 body {
 	background: $lightgray;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: white;
 	}
 	h1, h2, h3 {
@@ -30,12 +30,12 @@ body {
 .site-header {
 	background: white;
 	border-top: 40px solid #444444;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border-top: 0;
 	}
 	h1#logo {
 		padding: 40px 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 50px 0;
 		}
 		a {
@@ -61,14 +61,14 @@ body {
 nav {
 	text-align: center;
 	font-family: $title-font-family;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 	div.gru-nav > ul > li a {
 		font-weight: normal;
 		text-transform: uppercase;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		div.gru-nav-wrapper {
 			background: transparent;
 		}
@@ -79,7 +79,7 @@ nav {
 	background: white;
 	box-sizing: border-box;
 	padding: 0.5rem 1rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 	padding: 0.5rem 0.5rem;
 	}
 }
@@ -92,7 +92,7 @@ div.textcell {
 
 footer {
 	margin-top: 30px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 0;
 	}
 	h1, h2, h3 {
@@ -271,7 +271,7 @@ div.list-of-forms {
 		margin-top: 2rem;
 		margin-bottom: 0;
 		padding-bottom: 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-top: 0;
 		}
 	}
@@ -283,7 +283,7 @@ div.list-of-forms {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#login-page.methods2 > .block {
 		margin-left: 0;
 		margin-right: 0;
@@ -350,7 +350,7 @@ div.form-validation div.page {
 
 div#rub_service #steps ~ form {
 	margin-right: #{0 - $grid-gutter};
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-right: 0;
 	}
 }
diff --git a/static/cotes-d-armor/_custom.scss b/static/cotes-d-armor/_custom.scss
index 2ca86a5e..4d961b0e 100644
--- a/static/cotes-d-armor/_custom.scss
+++ b/static/cotes-d-armor/_custom.scss
@@ -55,7 +55,7 @@ footer {
 	padding-bottom: 60px;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#header-wrapper {
 		height: 220px;
 	}
diff --git a/static/cournonterral/_custom.scss b/static/cournonterral/_custom.scss
index 7719f7c5..1dca4271 100644
--- a/static/cournonterral/_custom.scss
+++ b/static/cournonterral/_custom.scss
@@ -11,7 +11,7 @@ div#header {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 			a {
@@ -28,7 +28,7 @@ div#nav {
 	& > ul {
 		margin-top: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
diff --git a/static/dauphine/_custom.scss b/static/dauphine/_custom.scss
index 48380a8d..c752601d 100644
--- a/static/dauphine/_custom.scss
+++ b/static/dauphine/_custom.scss
@@ -44,7 +44,7 @@ div#nav > ul > li > a:hover {
 	border-bottom: 3px solid $footer-background;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav {
 		height: auto;
 	}
diff --git a/static/dreux/_custom.scss b/static/dreux/_custom.scss
index 331de580..cd640248 100644
--- a/static/dreux/_custom.scss
+++ b/static/dreux/_custom.scss
@@ -74,7 +74,7 @@ div.buttons.submit {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#header #top #logo a {
 		height: 75px;
 		width: 100%;
diff --git a/static/fabregues/_custom.scss b/static/fabregues/_custom.scss
index 1d50d3da..5dd681a6 100644
--- a/static/fabregues/_custom.scss
+++ b/static/fabregues/_custom.scss
@@ -1,7 +1,7 @@
 div#header-wrapper {
 	background: transparent url(img/bandeau_plateforme.png) top center no-repeat;
 	height: 208px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-position: 0px -30px;
 		height: 185px;
 	}
@@ -13,7 +13,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 		}
@@ -40,7 +40,7 @@ div.gru-nav .gru-nav-button {
 	a {
 		display: inline-block;
 		color: $font-color;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 80%;
 		}
 	}
diff --git a/static/fondettes/_custom.scss b/static/fondettes/_custom.scss
index 095ef1a6..d95a0760 100644
--- a/static/fondettes/_custom.scss
+++ b/static/fondettes/_custom.scss
@@ -122,7 +122,7 @@ div.footer-content div {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	body {
 		padding-top: 5px;
 		background-position: 0 5px;
diff --git a/static/fontenay-sous-bois-2018/_custom.scss b/static/fontenay-sous-bois-2018/_custom.scss
index f568a130..b7079811 100644
--- a/static/fontenay-sous-bois-2018/_custom.scss
+++ b/static/fontenay-sous-bois-2018/_custom.scss
@@ -17,7 +17,7 @@ div#header-wrapper {
 		left: 4rem;
 		top: 0px;
 		z-index: 10;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			left: 0;
 			max-width: 100%;
 			overflow: hidden;
@@ -41,7 +41,7 @@ div#header-wrapper {
 		&:hover {
 			background: url(img/fsb-top-hexa-hover.png);
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -69,7 +69,7 @@ div#nav-wrapper {
 	top: 5.5rem;
 	right: 0rem;
 	width: 500px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: auto;
 		max-width: 100%;
 	}
@@ -77,7 +77,7 @@ div#nav-wrapper {
 	button {
 		position: absolute;
 		right: 4rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: 1rem;
 			right: 2.5rem;
 		}
@@ -159,7 +159,7 @@ div#a-la-une {
 div#a-la-une-texte {
 	position: relative;
 	height: 403px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: auto;
 	}
 	> div {
@@ -167,7 +167,7 @@ div#a-la-une-texte {
 		padding-right: 150px;
 		padding-top: 140px;
 		text-align: center;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0 0 1rem 0;
 			background: $primary-color;
 			border-radius: 10px;
@@ -179,7 +179,7 @@ div#a-la-une-texte {
 		left: 0;
 		border-radius: 10px;
 		max-width: 100%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -204,7 +204,7 @@ div#a-la-une-texte {
 		position: absolute;
 		right: 90px;
 		bottom: 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -215,7 +215,7 @@ div#a-la-une-texte {
 		color: $primary-color;
 		font-size: 2rem;
 		margin: 0 0.5rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			text-align: center;
 		}
 	}
@@ -232,7 +232,7 @@ div#sidebar {
 
 .gru-content #sidebar div.cell {
 	margin-right: 40px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-right: 0rem;
 	}
 }
@@ -242,7 +242,7 @@ div#sidebar {
 	border: 1px solid #c6c6c6;
 	border-radius: 10px;
 	padding: 1rem 3rem 1rem 160px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-position: top center;
 		padding: 80px 0 0 0;
 		h2 {
@@ -262,11 +262,11 @@ div#sidebar {
 			-ms-flex: 1;
 			flex: 1;
 			margin-right: 2rem;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin-right: 0;
 			}
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 0 1rem 1rem 1rem;
 			button {
 				margin-right: 0;
@@ -338,7 +338,7 @@ div#content {
 			padding-left: 80px;
 			text-align: left;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			text-align: center;
 		}
 	}
@@ -358,7 +358,7 @@ div#gauche {
 			min-width: 0;
 			background: transparent url(img/trackingcode.png) 2rem 1rem no-repeat;
 			padding: 1rem 3rem 1rem 130px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				background-position: top left;
 				padding: 0 1rem 1rem 80px;
 			}
diff --git a/static/gorges/_custom.scss b/static/gorges/_custom.scss
index 8d87f6b0..c7dcd4a6 100644
--- a/static/gorges/_custom.scss
+++ b/static/gorges/_custom.scss
@@ -11,7 +11,7 @@ h1#logo a {
 	padding-left: 250px;
 	color: $title-color;
         text-indent: -9999px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		overflow: hidden;
 		text-indent: -2000px;
 	}
@@ -52,7 +52,7 @@ div#nav > ul {
 
 // Steps
 .wcs-steps {
-    @media (max-width: $mobile-limit){
+    @media ($max-mobile-viewport){
        font-size: 1.1em;
     }
 }
diff --git a/static/gpseo/_custom.scss b/static/gpseo/_custom.scss
index 4391962a..33b8524c 100644
--- a/static/gpseo/_custom.scss
+++ b/static/gpseo/_custom.scss
@@ -21,7 +21,7 @@ header {
 			padding: 1rem 0 1rem 255px;
 			color: $black;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-top: 0;
 			a {
 				margin-top: 50px;
@@ -69,7 +69,7 @@ header {
 	a.logout {
 		display: inline-block;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		font-size: 90%;
 		padding-top: 0;
 		max-width: none;
diff --git a/static/grand-chambery/_custom.scss b/static/grand-chambery/_custom.scss
index 30705d37..ee38dda0 100644
--- a/static/grand-chambery/_custom.scss
+++ b/static/grand-chambery/_custom.scss
@@ -85,11 +85,11 @@ div#header {
 		.sep {
 			color: $red;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 80px;
 		h1#logo.has-logo::after {
 			content: none;
@@ -110,7 +110,7 @@ div#header {
 	background: $gray;
 	padding-top: 2rem;
 	padding-bottom: 2rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0.5rem 0.5rem 1rem 0.5rem;
 		box-sizing: border-box;
 	}
@@ -120,19 +120,19 @@ div#header {
 		max-width: 100vw;
 		margin: 0 auto;
 		box-sizing: border-box;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 		}
 		h1 {
 			font-size: 300%;
 			color: $red;
 			margin-bottom: 6rem;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin-bottom: 3rem;
 				font-size: 200%;
 			}
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			div.cell {
 				margin-left: 0;
 			}
@@ -169,7 +169,7 @@ div#anomalies {
 	background-size: 100% auto;
 	padding-top: 250px;
 	padding-right: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: $bgblue;
 		padding-top: 0;
 	}
@@ -210,7 +210,7 @@ div#anomalies {
 			width: 50%;
 			float: left;
 			padding-bottom: 0;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: auto;
 				float: none;
 			}
@@ -251,7 +251,7 @@ div#anomalies {
 
 nav {
 	display: none;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: block;
 		#nav button {
 			transform: skewX(-21deg);
@@ -303,7 +303,7 @@ div#main-content-wrapper {
 		padding-top: 5px;
 		min-height: 3.5rem;
 		padding-bottom: 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			min-height: 2.5rem;
 		}
 	}
@@ -405,7 +405,7 @@ div#gauche {
 		}
 	}
 
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: 100%;
 		+ div#rub_service {
 			width: 100%;
@@ -531,7 +531,7 @@ div#gauche {
 			div.content {
 				padding-right: 1rem;
 				box-sizing: border-box;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					padding: 0 1rem;
 				}
 			}
@@ -593,7 +593,7 @@ div#gauche {
 				flex-basis: 100%;
 			}
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			div.previous-button {
 				order: 1;
 			}
diff --git a/static/grandlyon-sau/_categorie-demande.scss b/static/grandlyon-sau/_categorie-demande.scss
index 51bb3607..2a8dd715 100644
--- a/static/grandlyon-sau/_categorie-demande.scss
+++ b/static/grandlyon-sau/_categorie-demande.scss
@@ -12,7 +12,7 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
 					&.selected {
 						@include flexbox();
 						@include flex-direction(row);
-						@media screen and (max-width: $mobile-limit) {
+						@media screen and ($max-mobile-viewport) {
 							@include flex-direction(column);
 						}
 					}
@@ -109,7 +109,7 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
 					}
 				}
 			}
-			@media screen and (min-width: $mobile-limit) {
+			@media screen and ($min-desktop-viewport) {
 				> ul {
 					> li {
 						@include flexbox();
@@ -172,7 +172,7 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
 			&.selected {
 				@include flexbox();
 				@include flex-direction(column);
-				@media screen and (min-width: $mobile-limit) {
+				@media screen and ($min-desktop-viewport) {
 					@include flex-direction(row);
 				}
 			}
diff --git a/static/grandlyon-sau/_custom.scss b/static/grandlyon-sau/_custom.scss
index ac4b94ad..795684da 100644
--- a/static/grandlyon-sau/_custom.scss
+++ b/static/grandlyon-sau/_custom.scss
@@ -47,11 +47,11 @@ div#header-wrapper {
 	background: white;
 	border-bottom: 5px solid $primary-color;
 	box-shadow: 0px 0px 10px #888888;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border-bottom: 3px solid $primary-color;
 	}
 	#top #logo {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 		}
 	}
@@ -78,7 +78,7 @@ div#main-content-wrapper {
 	}
 	div#columns {
 		padding: 1em;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 100%;
 		}
 	}
@@ -86,7 +86,7 @@ div#main-content-wrapper {
 		position: sticky;
 		top: 2em;
 		padding: 1em 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: relative;
 			padding: 0 1em;
 			margin: 0;
@@ -117,7 +117,7 @@ div.cell > div {
 	#columns {
 		div.cell {
 			&.bandeau div {
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: $cell-background;
 					height: auto;
 				}
@@ -242,7 +242,7 @@ div.cell > div {
 	div.linkcell {
 		&.retour {
 			background: transparent;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin-bottom: 0;
 				font-size: 0.2em;
 			}
@@ -250,7 +250,7 @@ div.cell > div {
 				background: transparent url('img/retour.png') no-repeat;
 				background-size: contain;
 				padding-left: 6em;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					text-indent: -9999px;
 				}
 				&:hover {
@@ -267,7 +267,7 @@ div.cell > div {
 		width: 25em;
 		margin: 1ex auto;
 		padding: 1em 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 100%;
 		}
 		select {
@@ -281,7 +281,7 @@ div.cell > div {
 			@include vendor-prefix(flex-wrap, wrap);
 			@include justify-content(space-around);
 			@include vendor-prefix(align-items, stretch);
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				@include flex-direction(column);
 			}
 			li {
@@ -300,7 +300,7 @@ div.cell > div {
 					margin: 0 auto;
 					text-align: center;
 					display: block;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						background-size: auto 3em;
 						padding-top: 4em;
 					}
@@ -352,7 +352,7 @@ div.cell > div {
 			@include vendor-prefix(flex-wrap, wrap);
 			> div {
 				width: 350px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					width: 100%;
 				}
 				a {
diff --git a/static/grandlyon/_custom.scss b/static/grandlyon/_custom.scss
index f605e5e5..a1720e59 100644
--- a/static/grandlyon/_custom.scss
+++ b/static/grandlyon/_custom.scss
@@ -17,7 +17,7 @@ h1#logo {
 		line-height: 84px;
 		width: 100%;
 		text-indent: 144px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			text-indent: -1000px;
 			width: auto;
 		}
diff --git a/static/grenoble-metropole-2019/_custom.scss b/static/grenoble-metropole-2019/_custom.scss
index e656ab6d..cd1152d0 100644
--- a/static/grenoble-metropole-2019/_custom.scss
+++ b/static/grenoble-metropole-2019/_custom.scss
@@ -104,7 +104,7 @@ form#champRecherche input {
 /* hide site's "go to top" button */
 
 img#hautDePage {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none !important;
 	}
 }
@@ -117,7 +117,7 @@ img#hautDePage {
 	padding-left: 1em;
 	box-shadow: none;
 	border-radius: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: block;
 	}
 	a {
@@ -140,7 +140,7 @@ img#hautDePage {
 	text-decoration: none;
 	font-weight: bold;
 	display: inline-block;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: block;
 	}
 	&:hover {
@@ -176,7 +176,7 @@ img#hautDePage {
 			font-weight: normal;
 			margin-bottom: 0;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 10px 0;
 			h2 {
 				font-size: 180%;
@@ -196,7 +196,7 @@ img#hautDePage {
 		display: -ms-flexbox;
 		display: flex;
 		justify-content: space-between;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			@include vendor-prefix(flex-direction, column);
 		}
 		div.right {
@@ -214,7 +214,7 @@ img#hautDePage {
 				-moz-column-count: 2;
 				-webkit-column-count: 2;
 				column-gap: 1.35em;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					column-count: 1;
 					-moz-column-count: 1;
 					-webkit-column-count: 1;
@@ -222,7 +222,7 @@ img#hautDePage {
 			}
 		}
 		div.right, div.left {
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: 100%;
 			}
 		}
@@ -294,7 +294,7 @@ img#hautDePage {
 			}
 			ul {
 				position: absolute;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					position: relative;
 				}
 				z-index: 10;
@@ -322,7 +322,7 @@ img#hautDePage {
 		}
 	}
 	div.wcsformcell.proxi {
-		@media screen and (min-width: $mobile-limit) {
+		@media screen and ($min-desktop-viewport) {
 			width: calc(50% - 1.35em);
 			float: left;
 		}
@@ -344,7 +344,7 @@ img#hautDePage {
 	div.trackingcodeinputcell {
 		box-shadow: 0px 0px 10px #888888;
 		padding: 0.5ex;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			background-color: #f5f5f5;
 		}
 		h2 {
@@ -360,7 +360,7 @@ img#hautDePage {
 				display: block;
 				top: -40px;
 				background-size: contain;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					display: none;
 				}
 			}
@@ -370,7 +370,7 @@ img#hautDePage {
 		padding: 1.5em 1em 10px 1em;
 		border: 4px solid $primary-color;
 		position: relative;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-top: 30px;
 		}
 		p {
@@ -399,7 +399,7 @@ img#hautDePage {
 
 div.user-menu {
 	width: 30%;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 	div.menucell {
@@ -470,7 +470,7 @@ label {
 		-moz-column-count: 2;
 		-webkit-column-count: 2;
 		column-gap: 1.35em;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			column-count: 1;
 			-moz-column-count: 1;
 			-webkit-column-count: 1;
@@ -620,7 +620,7 @@ div#nav {
 		}
 	}
 	&.toggled {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 50%;
 			> ul {
 				display: block;
@@ -630,7 +630,7 @@ div#nav {
 }
 
 a#publik-mobile-menu {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-color: #2a2a2a;
 		background-image: url('img/mobile-menu.svg');
 		background-repeat: no-repeat;
@@ -721,7 +721,7 @@ div.configjsoncell.user {
 		div.dashboard-item-label, div.dashboard-item-value {
 			text-align: center;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 30px 10px 10px 10px;
 			margin: 10px 0;
 		}
@@ -735,7 +735,7 @@ div.configjsoncell.user {
 				background-image: url('img/user-#{$item}.svg');
 				background-repeat: no-repeat;
 				background-size: contain;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					left: calc(50% - 23px);
 					top: -23px;
 				}
@@ -744,7 +744,7 @@ div.configjsoncell.user {
 	}
 	div.user-dashboard {
 		margin: 2ex 1ex 0 150px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 3ex 1ex 0 1ex;
 			@include vendor-prefix(justify-content, center);
 		}
@@ -764,7 +764,7 @@ div#tracking-code {
 	margin-bottom: 3em;
 	color: $primary-color;
 	font-family: 'Josefin Sans', sans-serif;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-bottom: 1em;
 	}
 	h3, a {
@@ -796,7 +796,7 @@ div#rub_service {
 	h2 {
 		text-transform: uppercase;
 		text-align: left;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 120%;
 		}
 		&::before {
@@ -970,7 +970,7 @@ select {
 	div.cell, div.block {
 		h2:first-child {
 			margin-bottom: 2ex;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				font-size: 120%;
 			}
 		}
@@ -1005,7 +1005,7 @@ select {
 			-webkit-column-count: 3;
 			column-gap: 1.35em;
 			padding: 1ex 0;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				column-count: 1;
 				-moz-column-count: 1;
 				-webkit-column-count: 1;
@@ -1128,7 +1128,7 @@ div.buttons {
 /* wcs progress bar styles */
 .wcs-steps.steps-1 { display: none; }
 .wcs-steps--list {
-	@media (max-width: $mobile-limit) {
+	@media ($max-mobile-viewport) {
 		justify-content: center;
 	}
 }
@@ -1138,7 +1138,7 @@ div.buttons {
 		@include desktop-vertical-steps() {
 			font-size: 0.65em;
 		}
-		@media (max-width: $mobile-limit) {
+		@media ($max-mobile-viewport) {
 			padding-left: 0;
 			text-align: center;
 			top: calc(100% - #{$wcs-steps-spacing});
@@ -1168,7 +1168,7 @@ div.comment-field {
 		p {
 			margin: 0;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 3ex 1em 1ex 1em;
 			margin: 2ex auto;
 			&::before {
@@ -1194,7 +1194,7 @@ body.page-register {
 	div#frontend-registration-email, div#frontend-registration-fc {
 		display: inline-block;
 		width: 48%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: block;
 			width: 100%;
 		}
@@ -1203,7 +1203,7 @@ body.page-register {
 		padding: 1ex 2ex 0 0;
 		text-transform: uppercase;
 		vertical-align: top;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 1ex 0;
 		}
 		p, form {
@@ -1248,7 +1248,7 @@ div#login-page {
 
 div#login-page, div.a2-block {
 	div#fc-button-wrapper {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 0;
 		}
 	}
@@ -1331,7 +1331,7 @@ div#profile {
 		text-transform: uppercase;
 	}
 	@include vendor-prefix(column-count, 2);
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		@include vendor-prefix(column-count, 1);
 	}
 	div.field {
diff --git a/static/grosboule-les-bains/_custom.scss b/static/grosboule-les-bains/_custom.scss
index de80fdec..83a3676d 100644
--- a/static/grosboule-les-bains/_custom.scss
+++ b/static/grosboule-les-bains/_custom.scss
@@ -89,7 +89,7 @@ body.scrolled {
 	font-weight: normal;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav, header {
 		text-align: left;
 		position: static;
diff --git a/static/haute-garonne-cd31/_custom.scss b/static/haute-garonne-cd31/_custom.scss
index ec4b8d87..28c621fe 100644
--- a/static/haute-garonne-cd31/_custom.scss
+++ b/static/haute-garonne-cd31/_custom.scss
@@ -40,7 +40,7 @@ div#header-wrapper {
 }
 
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#header {
 		background: $primary-color;
 	}
@@ -48,7 +48,7 @@ div#header-wrapper {
 
 div#header h1#logo {
 	position: absolute;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		position: static;
 	}
 	a {
@@ -67,7 +67,7 @@ nav {
 		margin-left: 180px;
 		padding-top: 30px;
 		padding-bottom: 25px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0;
 			margin-left: 0;
 		}
@@ -77,7 +77,7 @@ nav {
 			font-weight: 600;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: transparent;
 	}
 }
@@ -99,12 +99,12 @@ nav {
 		&.registration {
 			padding-left: 10px;
 			background: transparent;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				display: none;
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		min-width: 130px;
 		right: 10px;
 	}
@@ -116,20 +116,20 @@ body.has-picture nav::after {
 
 div#main-content-wrapper {
 	margin-top: 2rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 0;
 	}
 }
 
 div#welcome {
 	display: flex;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		flex-direction: column;
 	}
 	div#carrousel {
 		width: 700px;
 		flex: 1;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 		}
 	}
@@ -140,7 +140,7 @@ div#welcome {
 		width: 350px;
 		box-shadow: 0 5px 5px 5px #eee;
 		border-bottom: 5px solid $primary-color;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 			margin-left: 0;
 		}
@@ -443,7 +443,7 @@ div#tracking-code {
 		font-size: 27px;
 		text-decoration: underline;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		div.tracking-code-part {
 			display: flex;
 			h3, a {
@@ -460,12 +460,12 @@ div#tracking-code {
 
 div#gauche {
 	width: 23%;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: auto;
 	}
 	& + div#rub_service {
 		width: 75%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 		}
 	}
@@ -498,7 +498,7 @@ div#gauche {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	body.has-picture nav::after {
 		height: 200px;
 		margin-top: -6px;
@@ -583,7 +583,7 @@ div#account-management ul.account-management > li > a,
 div#registration-blocks,
 div#login-page {
 	margin-top: 5rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 0;
 	}
 }
diff --git a/static/haute-goulaine/_custom.scss b/static/haute-goulaine/_custom.scss
index 52ebf659..a28d3885 100644
--- a/static/haute-goulaine/_custom.scss
+++ b/static/haute-goulaine/_custom.scss
@@ -11,7 +11,7 @@ div#header {
 div#header h1 {
 	line-height: 190px;
 	height: 190px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 155px;
 	}
 	a {
@@ -23,7 +23,7 @@ div#header h1 a {
 	color: white;
 	padding-left: 180px;
 	display: inline-block;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-indent: -2000px;
 		overflow: hidden;
 	}
@@ -33,7 +33,7 @@ div#header h1 a {
 .wcs-steps {
 	font-size: 1.25em;
 
-	@media (min-width: $mobile-limit + 1) {
+	@media ($min-desktop-viewport) {
 		font-size: 1.5em;
 	}
 }
diff --git a/static/hautes-alpes-2018/_circle-steps.scss b/static/hautes-alpes-2018/_circle-steps.scss
index 25892d17..02401d4e 100644
--- a/static/hautes-alpes-2018/_circle-steps.scss
+++ b/static/hautes-alpes-2018/_circle-steps.scss
@@ -63,7 +63,7 @@ div#steps {
 		}
 	}
 }
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#gauche div#steps {
 
 		@include order(2);
diff --git a/static/hautes-alpes-2018/_custom.scss b/static/hautes-alpes-2018/_custom.scss
index 9a631258..b5ee35a8 100644
--- a/static/hautes-alpes-2018/_custom.scss
+++ b/static/hautes-alpes-2018/_custom.scss
@@ -80,12 +80,12 @@ div#main-content-wrapper {
 		box-sizing: border-box;
 		background-color: $cell-background;
 		font-size: 1.5rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			@include flex-direction(column);
 		}
 
 		> div {
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin: $inner-nav-margin;
 			}
 		}
@@ -96,7 +96,7 @@ div#main-content-wrapper {
 			background-color: transparent;
 			height: unset;
 
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				@include vendor-prefix(flex-basis, auto);
 				width: 100%;
 
@@ -154,7 +154,7 @@ div#main-content-wrapper {
 			@include vendor-prefix(flex-basis, 50%);
 			@include order(1);
 
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				@include vendor-prefix(flex-basis, $nav-height);
 				margin: 0;
 				width: 100%;
@@ -347,7 +347,7 @@ div#content {
 
 	input,
 	textarea {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			max-width: 100%;
 		}
 	}
@@ -463,7 +463,7 @@ div.ui-dialog {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#content {
 		padding: $mobile-block-padding;
 
diff --git a/static/hautes-alpes-2018/_neutral-variant.scss b/static/hautes-alpes-2018/_neutral-variant.scss
index 06986610..e5dc28fd 100644
--- a/static/hautes-alpes-2018/_neutral-variant.scss
+++ b/static/hautes-alpes-2018/_neutral-variant.scss
@@ -11,7 +11,7 @@ $margin-center: 0 auto;
 		line-height: 1.4;
 		margin-top: $custom-header-height;
 
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-top: $custom-mobile-header-height;
 		}
 
@@ -26,7 +26,7 @@ $margin-center: 0 auto;
 
 		#header-wrapper {
 
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				min-height: $custom-mobile-header-height;
 			}
 
@@ -75,7 +75,7 @@ $margin-center: 0 auto;
 					> li:hover > ul {
 						background: $cell-background;
 					}
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						height: 60px;
 
 						> li a {
diff --git a/static/juvignac/_custom.scss b/static/juvignac/_custom.scss
index 5a1d3049..74526aad 100644
--- a/static/juvignac/_custom.scss
+++ b/static/juvignac/_custom.scss
@@ -3,7 +3,7 @@
 div#header-wrapper {
 	background: $primary-color;
 	div#header h1 {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 50px;
 		}
 		a {
@@ -13,7 +13,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 			a {
@@ -40,7 +40,7 @@ div#nav {
 	border: none;
 	box-shadow: none;
 	border-radius: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		left: 0;
 		right: 0;
 		max-width: none;
@@ -50,7 +50,7 @@ div#nav {
 		color: white;
 		font-weight: bold;
 		padding: 10px 10px 15px 10px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 80%;
 		}
 	}
diff --git a/static/la-hague/_custom.scss b/static/la-hague/_custom.scss
index cb13ff0b..8abf569f 100644
--- a/static/la-hague/_custom.scss
+++ b/static/la-hague/_custom.scss
@@ -80,7 +80,7 @@ h1#logo a {
 	padding-left: 50px;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav {
 		background: transparent;
 	}
diff --git a/static/la-reunion/_custom.scss b/static/la-reunion/_custom.scss
index bd5b2395..bf7a836a 100644
--- a/static/la-reunion/_custom.scss
+++ b/static/la-reunion/_custom.scss
@@ -11,7 +11,7 @@ div#header {
 	color: $primary-color;
 	text-transform: uppercase;
 	font-weight: normal;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		overflow: hidden;
 		text-indent: -2000px;
 	}
diff --git a/static/la-seyne-sur-mer/_custom.scss b/static/la-seyne-sur-mer/_custom.scss
index e7f93f16..a56c0b80 100644
--- a/static/la-seyne-sur-mer/_custom.scss
+++ b/static/la-seyne-sur-mer/_custom.scss
@@ -26,7 +26,7 @@ div#nav > ul {
 
 div#nav-wrapper {
 	background: $nav-background;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: transparent;
 	}
 }
diff --git a/static/lattes/_custom.scss b/static/lattes/_custom.scss
index c3130291..321c655e 100644
--- a/static/lattes/_custom.scss
+++ b/static/lattes/_custom.scss
@@ -19,7 +19,7 @@ body {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			padding-top: 70px;
 			a {
@@ -30,7 +30,7 @@ body {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav-wrapper {
 		background: inherit;
 	}
@@ -56,11 +56,11 @@ div#nav {
 		display: inline-block;
 		color: $font-color;
 		padding: 10px 10px 15px 10px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 80%;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		left: 0;
 		right: 0;
 		max-width: none;
@@ -70,7 +70,7 @@ div#nav {
 div#main-content {
 	background: white;
 	padding: 20px 10px 0 10px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 20px 0 0 0;
 	}
 }
diff --git a/static/laverune/_custom.scss b/static/laverune/_custom.scss
index af42eb87..0b40aa16 100644
--- a/static/laverune/_custom.scss
+++ b/static/laverune/_custom.scss
@@ -7,7 +7,7 @@ body {
 #header-wrapper {
 	#header {
 		background: url(img/bandeau_rond_point.jpg) 50% -40px no-repeat;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			background: $primary-color;
 		}
 	}
@@ -21,7 +21,7 @@ body {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			padding-top: 30px;
 			a {
@@ -46,7 +46,7 @@ body {
 }
 
 .gru-nav-wrapper {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: -85px;
 	}
 }
diff --git a/static/le-cres/_custom.scss b/static/le-cres/_custom.scss
index 69506c20..bf4b1b60 100644
--- a/static/le-cres/_custom.scss
+++ b/static/le-cres/_custom.scss
@@ -9,7 +9,7 @@ div#header-wrapper {
 	div#header h1 {
 		padding-top: 40px;
 		padding-bottom: 40px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 80px;
 		}
 		a {
@@ -19,7 +19,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 			a {
@@ -43,7 +43,7 @@ div#nav {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div.gru-nav-wrapper {
 		background: transparent;
 	}
@@ -60,7 +60,7 @@ div#nav {
 		color: white;
 		padding: 10px 10px 15px 10px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		left: 0;
 		right: 0;
 		max-width: none;
@@ -70,7 +70,7 @@ div#nav {
 div#main-content {
 	background: white;
 	padding: 20px 10px 0 10px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 20px 0 0 0;
 	}
 }
diff --git a/static/lenord/_custom.scss b/static/lenord/_custom.scss
index 52dd60cd..50f7de66 100644
--- a/static/lenord/_custom.scss
+++ b/static/lenord/_custom.scss
@@ -53,7 +53,7 @@ div#nav {
 					margin: -0.7em calc(50% - 0.4em);
 					border-radius: 0 1em 0 0;
 					display: block;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						display: none;
 					}
 				}
diff --git a/static/lille-metropole/_custom.scss b/static/lille-metropole/_custom.scss
index 31c988ff..37d6f85b 100644
--- a/static/lille-metropole/_custom.scss
+++ b/static/lille-metropole/_custom.scss
@@ -113,7 +113,7 @@ body.has-picture nav::after {
 	font-weight: normal;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav, .site-header {
 		text-align: left;
 		position: static;
diff --git a/static/lille/_custom.scss b/static/lille/_custom.scss
index 00a339ce..a665db4e 100644
--- a/static/lille/_custom.scss
+++ b/static/lille/_custom.scss
@@ -34,7 +34,7 @@ nav {
 
 #header {
 	height: $header-height;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: $mobile-header-height;
 	}
 	#top a {
@@ -62,7 +62,7 @@ nav {
 			border: 30px solid $primary-color;
 			border-color: $primary-color $primary-color transparent transparent;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 0.5rem;
 			background-size: 80px;
 			background-position: bottom 0.5rem left 50%;
@@ -92,7 +92,7 @@ nav {
 	a {
 		color: $user-info-color;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-top: 5px;
 		top: 20px;
 		left: 80px;
@@ -120,7 +120,7 @@ div.gru-nav {
 
 div.gru-nav .gru-nav-button {
 	top: -90px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		top: -15px;
 	}
 	@media screen and (max-width: 360px) {
@@ -148,7 +148,7 @@ div.gru-nav .gru-nav-button {
 	}
 }
 
-@media screen and (min-width: $mobile-limit - 1px) {
+@media screen and ($min-desktop-viewport) {
 	#pwa-navigation {
 		display: block;
 		max-width: $width;
@@ -199,7 +199,7 @@ div.gru-nav .gru-nav-button {
 	}
 	width: 100%;
 	margin-top: -1px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		div.carrousel-content {
 			height: 260px;
 		}
@@ -208,7 +208,7 @@ div.gru-nav .gru-nav-button {
 		top: 120px;
 		left: 55px;
 		text-align: left;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: 60px;
 			left: 20px;
 			label {
@@ -230,7 +230,7 @@ div.gru-nav .gru-nav-button {
 			line-height: 130%;
 			text-transform: uppercase;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: 90px;
 			left: 22px;
 			max-width: 80%;
@@ -246,7 +246,7 @@ div.gru-nav .gru-nav-button {
 		margin: -40px 50px 0 50px;
 		background: white url($data_uri_codebarre) 50px 25px no-repeat;
 		background-size: 60px 60px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: -40px 10px 0 10px;
 			background-position: 10px 10px;
 		}
@@ -254,7 +254,7 @@ div.gru-nav .gru-nav-button {
 			width: 30%;
 			margin-left: 140px;
 			float: left;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: auto;
 				float: none;
 				margin-left: 90px;
@@ -266,7 +266,7 @@ div.gru-nav .gru-nav-button {
 				text-transform: uppercase;
 				margin: 0;
 				font-size: 24px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					padding-top: 5px;
 				}
 			}
@@ -277,7 +277,7 @@ div.gru-nav .gru-nav-button {
 				padding: 0 0 0.7ex 0.7em;
 				margin-right: 9px;
 				background: white;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					width: 9rem;
 				}
 			}
@@ -300,7 +300,7 @@ div.gru-nav .gru-nav-button {
 					position: relative;
 					top: 5px;
 				}
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					top: 15px;
 					font-size: 25px;
 					height: 50px;
@@ -317,7 +317,7 @@ div.gru-nav .gru-nav-button {
 			margin-right: 50px;
 			font-size: 18px;
 			padding-top: 10px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: auto;
 				float: none;
 				margin: 0 1rem;
@@ -358,7 +358,7 @@ div.gru-nav .gru-nav-button {
 	#columns {
 		margin-top: 0rem;
 		min-height: 80vh;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0;
 			min-height: auto;
 		}
@@ -366,7 +366,7 @@ div.gru-nav .gru-nav-button {
 	#left, #middle, #right {
 		float: left;
 		width: 33%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			float: none;
 			width: 100%;
 			.cell {
@@ -396,7 +396,7 @@ div.gru-nav .gru-nav-button {
 div#content div.wcsformsofcategorycell {
 	position: relative;
 	margin-bottom: 25px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 0px;
 		border-bottom: 3px solid white;
 	}
@@ -420,7 +420,7 @@ div#content div.wcsformsofcategorycell {
 		}
 	}
 	&.foldable {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			h2 {
 				padding-right: 50px;  // for folding arrow
 			}
@@ -505,7 +505,7 @@ footer {
 .page-template-homepage div.cell#filtre-profil {
 	border: none;
 	background: transparent;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 1rem;
 	}
 	label {
@@ -534,7 +534,7 @@ div#title-section {
 	h1 {
 		margin-bottom: 1rem;
 		text-transform: uppercase;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 28px;
 		}
 		&::after {
@@ -673,7 +673,7 @@ div#rub_service div#tracking-code {
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 0 -1ex;
 		width: auto;
 		ol {
@@ -817,7 +817,7 @@ body.authentic-page {
 			margin-top: 55px;
 			height: 5px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -859,7 +859,7 @@ footer {
 		img {
 			max-width: 90%;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 50%;
 		}
 		@media screen and (max-width: $very-small-limit) {
diff --git a/static/lot-cd46/_custom.scss b/static/lot-cd46/_custom.scss
index 36c5bc22..24fcd85e 100644
--- a/static/lot-cd46/_custom.scss
+++ b/static/lot-cd46/_custom.scss
@@ -69,7 +69,7 @@ body.has-picture {
 	nav::after {
 		transition: all ease 0.2s;
 		top: -2rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: -16px;
 			height: 100px;
 		}
@@ -100,7 +100,7 @@ body.scrolled {
 	font-weight: normal;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav, .site-header {
 		background: $darkpink;
 		text-align: left;
diff --git a/static/lozere/_custom.scss b/static/lozere/_custom.scss
index 7c3b1093..599ad2bc 100644
--- a/static/lozere/_custom.scss
+++ b/static/lozere/_custom.scss
@@ -56,14 +56,14 @@ h1#logo a {
 	&:hover {
 		background-position: -0px -129px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 100px;
 	}
 }
 
 #nav-wrapper {
 	background: $nav-background;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: transparent;
 	}
 	div#nav,
diff --git a/static/massoins/_custom.scss b/static/massoins/_custom.scss
index 41b37bb1..d71d1e17 100644
--- a/static/massoins/_custom.scss
+++ b/static/massoins/_custom.scss
@@ -14,7 +14,7 @@ div#header {
 	background: white url(slide_1.jpg) top right no-repeat;
 	background-size: contain;
 	min-height: 150px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-position: top left;
 		background-size: initial;
 	}
@@ -34,7 +34,7 @@ div#nav > ul > li > a {
 div#nav > ul > li:hover,
 div#nav > ul > li.selected {
 	border-bottom: 5px solid $primary-color;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border-bottom: none;
 		a {
 			color: $primary-color;
@@ -95,7 +95,7 @@ div#top h1#logo {
 	a {
 		padding-left: 10px;
 		color: #647174;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			color: white;
 			text-shadow: 1px 1px 0px #333;
 		}
diff --git a/static/mauguio/_custom.scss b/static/mauguio/_custom.scss
index 3c5520d2..62dc1dba 100644
--- a/static/mauguio/_custom.scss
+++ b/static/mauguio/_custom.scss
@@ -16,14 +16,14 @@
 		text-align: center;
 		background: transparent url(img/logo.png) top center no-repeat;
 		text-indent: -10000px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			background-size: auto 100%;
 			margin-top: 40px;
 			height: 93px;
 		}
 	}
 	background: url(img/bandeau-e-demarches.jpg) bottom center no-repeat;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-size: auto 180px;
 	}
 	#top {
@@ -32,7 +32,7 @@
 			top: -175px;
 			box-shadow: none;
 			border: none;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				top: -125px;
 			}
 		}
@@ -46,7 +46,7 @@
 			display: block;
 			text-indent: -10000px;
 			color: white;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				height: 120px;
 			}
 		}
@@ -88,7 +88,7 @@ div#home-text-cell {
 		h3 {
 			font-weight: normal;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			a.pk-button {
 				display: inline-block;
 				margin-bottom: 1ex;
@@ -99,7 +99,7 @@ div#home-text-cell {
 
 .gru-content div.cell.top-title-margin {
 	margin-top: 76px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 0;
 	}
 }
diff --git a/static/meaux/_custom.scss b/static/meaux/_custom.scss
index 637d7c78..2bdcab36 100644
--- a/static/meaux/_custom.scss
+++ b/static/meaux/_custom.scss
@@ -27,7 +27,7 @@ h1#logo a {
 		content: "/";
 		color: white;
 		font-size: 120%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			content: none;
 		}
 	}
@@ -36,7 +36,7 @@ h1#logo a {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#nav-wrapper {
 		background: transparent;
 		#nav li:after {
diff --git a/static/metz-metropole-2019/_custom.scss b/static/metz-metropole-2019/_custom.scss
index ccf03444..34ea01df 100644
--- a/static/metz-metropole-2019/_custom.scss
+++ b/static/metz-metropole-2019/_custom.scss
@@ -72,7 +72,7 @@ button::-moz-focus-inner {
 				background-color: $yellow;
 			}
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 			height: $mobile-hamburger-menu-height;
 			overflow: hidden;
@@ -115,7 +115,7 @@ button::-moz-focus-inner {
 				height: $mobile-hamburger-menu-height;
 			}
 		}
-		@media screen and (min-width: $mobile-limit) and (max-width: $width) {
+		@media screen and ($min-desktop-viewport) and (max-width: $width) {
 			width: calc(100vw - #{$nav-menu-side + $pwa-desktop-nav-width});
 			a.logout {
 				text-indent: -10000px;
@@ -148,7 +148,7 @@ div.gru-nav {
 div.gru-nav .gru-nav-button {
 	top: 0;
 	margin-left: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: $mobile-hamburger-menu-width;
 		height: $mobile-hamburger-menu-height;
 		.icon-bar {
@@ -243,12 +243,12 @@ div.gru-nav .gru-nav-button {
 	background: url(/assets/header:background) top center no-repeat;
 	background-position: top center;
 	background-size: cover;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 140px;
 	}
 	border-bottom: 5px solid $yellow;
 	margin-bottom: 25px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border-bottom: 0;
 		margin-bottom: 10px;
 	}
@@ -273,7 +273,7 @@ div.gru-nav .gru-nav-button {
 					background: url(img/LOGO.svg) top center no-repeat;
 					background-size: auto 110px;
 				}
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					margin-top: 10px;
 					a {
 						max-width: 100vw;
@@ -287,7 +287,7 @@ div.gru-nav .gru-nav-button {
 			}
 		}
 		.topside {
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				display: none;
 			}
 			-webkit-flex: 1;
@@ -380,7 +380,7 @@ div.carrousel-content {
 			margin-bottom: 10px;
 			background: white;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: auto;
 			bottom: 10px;
 			height: auto;
@@ -394,7 +394,7 @@ div.carrousel-content {
 	input + div div.carrousel-item {
 		padding-left: 0;
 		background: $yellow url(img/right.png) right 100px top 50% no-repeat !important;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			background-position: right 60px bottom 20px !important;
 		}
 		@media screen and (max-width: 360px) {
@@ -402,7 +402,7 @@ div.carrousel-content {
 		}
 	}
 	input + div div.carrousel-item div.carrousel-item-content {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			vertical-align: top;
 			font-size: 16px;
 		}
@@ -411,7 +411,7 @@ div.carrousel-content {
 		text-align: left;
 		margin-left: 0;
 		margin-right: 10rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-right: 2rem;
 			height: 150px;
 		}
@@ -482,7 +482,7 @@ footer #idea {
 	&::before {
 		background: $darkblue;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 100px;
 		p {
 			font-weight: normal;
@@ -500,7 +500,7 @@ footer #idea {
 
 footer {
 	#financeurs {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			text-align: center;
 			img {
 				float: none !important;
@@ -524,7 +524,7 @@ footer {
 			background: $yellow;
 		}
 		margin-bottom: 20px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-bottom: 0;
 		}
 	}
@@ -537,7 +537,7 @@ footer {
 			margin-left: 10px;
 			width: ($width / 2) - 10px;
 		}
-		@media screen and (min-width: $mobile-limit) and (max-width: $width) {
+		@media screen and ($min-desktop-viewport) and (max-width: $width) {
 			width: calc(100vw / 2 - 10px);
 			+ div.cell {
 				width: calc(100vw / 2 - 10px);
@@ -549,7 +549,7 @@ footer {
 		border: 0;
 		background-color: white;
 		background-position: left 20px top 50%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			background-position: left 5px top 50%;
 			background-size: 160px auto;
 		}
@@ -559,10 +559,10 @@ footer {
 		margin-bottom: 0;
 		div {
 			padding-left: 300px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				padding-left: 170px;
 			}
-			@media screen and (min-width: $mobile-limit) and (max-width: $width) {
+			@media screen and ($min-desktop-viewport) and (max-width: $width) {
 				padding-left: 250px;
 			}
 			display: table;
@@ -577,7 +577,7 @@ footer {
 				font-weight: 500;
 				top: 0px;
 				height: 100%;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					width: auto;
 					font-size: 18px;
 				}
@@ -654,7 +654,7 @@ div.cell.trackingcodeinputcell {
 
 div#page div#main-content-wrapper {
 	padding-bottom: 50px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-bottom: 10px;
 	}
 }
@@ -672,7 +672,7 @@ div#title-section {
 	&::before {
 		background: #ececec;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0 10px;
 	}
 
@@ -686,7 +686,7 @@ div#title-section {
 		padding-bottom: 60px;
 		color: $darkblue;
 		max-width: 700px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 10px;
 			padding-bottom: 10px;
 			font-size: 20px;
@@ -707,7 +707,7 @@ div#title-section {
 		span.commune {
 			font-weight: bold;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 			span {
 				text-align: left;
@@ -726,10 +726,10 @@ div#gauche {
 
 div#gauche + div#rub_service {
 	width: $width - 350px - 20px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: 100%;
 	}
-	@media screen and (min-width: $mobile-limit) and (max-width: $width) {
+	@media screen and ($min-desktop-viewport) and (max-width: $width) {
 		width: calc(100vw - 350px - 20px);
 	}
 }
@@ -741,7 +741,7 @@ div#gauche div#tracking-code {
 	margin-top: -32px;
 	margin-bottom: 0;
 	position: relative;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 0;
 		-webkit-order: 0;
 		order: 0;
@@ -779,7 +779,7 @@ div#gauche div#tracking-code {
 			height: 32px;
 			width: 250px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 			button {
 				width: 200px;
@@ -966,7 +966,7 @@ footer {
 		img {
 			max-width: 90%;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 50%;
 		}
 		@media screen and (max-width: $very-small-limit) {
@@ -1008,7 +1008,7 @@ a.big-image-link {
 	margin-bottom: 2rem;
 	margin-bottom: 1rem;
 	height: 250px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 150px;
 		background-position: top center;
 		background-size: auto 80px;
@@ -1036,7 +1036,7 @@ a.big-image-link {
 			text-align: center;
 			color: $darkblue;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			strong {
 				top: 80px;
 				font-size: 14px;
@@ -1063,7 +1063,7 @@ a.big-image-link {
 
 div.cell.large a.big-image-link {
 	// signalement links on mobile, restore some desktop sizes
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-size: 230px auto;
 		border-width: 10px;
 		div strong {
@@ -1077,18 +1077,18 @@ body.wcs-page {
 	#banner-wrapper {
 		margin-bottom: 0;
 		overflow: hidden;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			height: 55px;
 		}
 		#banner .title h1 {
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin-top: 5px;
 			}
 			a {
 				padding-top: 0;
 				height: 130px;
 				background-size: auto 110px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					height: 55px;
 					background-image: url(img/LOGO-no-baseline.svg);
 					background-size: auto 45px;
@@ -1096,7 +1096,7 @@ body.wcs-page {
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		#columns {
 			padding: 0;
 		}
@@ -1113,7 +1113,7 @@ body.authentic-page {
 	}
 	#columns {
 		margin-top: 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			div#login-page > div.block {
 				margin: 0 0 1rem 0;
 			}
@@ -1132,7 +1132,7 @@ body.authentic-page {
 		div.cell {
 			margin-left: 0;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 0 0.7em;
 			width: auto;
 			max-width: auto;
@@ -1169,7 +1169,7 @@ body.authentic-page {
 	div.a2-block {
 		padding-bottom: 1px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		div.a2-block {
 			margin: 1rem auto;
 		}
@@ -1218,7 +1218,7 @@ div#up {
 		border: 0;
 		margin-bottom: 0;
 	}
-	@media screen and (min-width: $mobile-limit + 1px) {
+	@media screen and ($min-desktop-viewport) {
 		#banner-wrapper {
 			height: 350px;
 			background-position: -250px 0px;
@@ -1232,7 +1232,7 @@ div#up {
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		#content-top-wrapper .content-top {
 			display: -webkit-flex;
 			display: flex;
@@ -1296,7 +1296,7 @@ form ul.errorlist {
 	padding: 1em;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	body.anonymous-user, body.focus-in {
 		#pwa-navigation {
 			display: none;
diff --git a/static/metz/_custom.scss b/static/metz/_custom.scss
index 32dae126..2df9cdad 100644
--- a/static/metz/_custom.scss
+++ b/static/metz/_custom.scss
@@ -12,7 +12,7 @@
 	color: white;
 	text-transform: uppercase;
 	font-weight: normal;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 45px;
 	}
 }
@@ -25,7 +25,7 @@
 		border-radius: $border-radius;
 		text-transform: uppercase;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: $primary-color;
 	}
 }
diff --git a/static/meudon/_custom.scss b/static/meudon/_custom.scss
index a6dde5d8..38987e58 100644
--- a/static/meudon/_custom.scss
+++ b/static/meudon/_custom.scss
@@ -133,7 +133,7 @@ div.buttons.submit {
 #footer {
 	display: flex;
 	justify-content: flex-start;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		flex-direction: column;
 	}
 	div.cell {
@@ -151,7 +151,7 @@ div.buttons.submit {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#header #top #logo {
 		padding-left: 40px;
 		padding-bottom: 20px;
diff --git a/static/meuse-cd55/_custom.scss b/static/meuse-cd55/_custom.scss
index f755aacb..6dfa1f5e 100644
--- a/static/meuse-cd55/_custom.scss
+++ b/static/meuse-cd55/_custom.scss
@@ -32,10 +32,10 @@
 	#logo {
 		font-size: $fz-h4;
 		padding-bottom: .5em;
-		@media (max-width: $mobile-limit) {
+		@media ($max-mobile-viewport) {
 			padding-left: $nav-menu-side + 10;
 		}
-		@media (min-width: $mobile-limit + 1) {
+		@media ($min-desktop-viewport) {
 			padding-bottom: 2em;
 		}
 		a {
@@ -47,7 +47,7 @@
 			background-size: auto $meuse-logo-height-mobile;
 			background-position: left top 10px;
 
-			@media (min-width: $mobile-limit + 1) {
+			@media ($min-desktop-viewport) {
 				padding-top: $meuse-logo-width-desktop / 5;
 				padding-bottom: $meuse-logo-width-desktop / 21;
 				padding-left: $meuse-logo-width-desktop + 20;
@@ -173,7 +173,7 @@ div#rub_service {
 	position: relative;
 
 	// Start visually rub-services just after nav
-	@media (min-width: $mobile-limit + 1) {
+	@media ($min-desktop-viewport) {
 		&::before {
 			content: "";
 			display: block;
diff --git a/static/meyzieu-2018/_custom.scss b/static/meyzieu-2018/_custom.scss
index f8bac283..e0571956 100644
--- a/static/meyzieu-2018/_custom.scss
+++ b/static/meyzieu-2018/_custom.scss
@@ -7,7 +7,7 @@
 	background-repeat: no-repeat;
 	background-position: 0 center, 6em center;
 	background-size: 5% auto, 55% auto;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-image: url('img/logo.png');
 		background-position: 3em center;
 		background-size: 75% auto;
@@ -42,7 +42,7 @@ div#nav {
 				> a {
 					background: $nav-item-hover-background;
 					border-bottom: 5px solid $primary-color;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						border: 0;
 					}
 				}
@@ -56,7 +56,7 @@ div#nav {
 				border-top: 1px solid $nav-background;
 				background: #fff;
 				width: calc(#{$sidebar-width} - 20px);
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: transparent;
 					width: auto;
 				}
@@ -68,17 +68,17 @@ div#nav {
 					width: 100%;
 					color: $primary-color;
 					border-bottom: 5px solid #fff;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						border: 0
 					}
 					&:hover {
 						border-bottom: 5px solid $primary-color;
-						@media screen and (max-width: $mobile-limit) {
+						@media screen and ($max-mobile-viewport) {
 							border: 0;
 						}
 					}
 					span::after {
-						@media screen and (max-width: $mobile-limit) {
+						@media screen and ($max-mobile-viewport) {
 							display: none;
 						}
 						content: ' ';
@@ -131,7 +131,7 @@ div#nav {
 		.carrousel-wrapper {
 			@include flexbox();
 			@include flex(0 0 calc(#{$width} - #{$sidebar-width}));
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				@include flex-direction(column);
 				@include flex(0);
 			}
@@ -139,20 +139,20 @@ div#nav {
 				@include flexbox();
 				align-items: center;
 				width: 25%;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					width: 100%;
 					margin: 0 auto;
 					display: block;
 				}
 				a {
 					text-align: center;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						text-align: justify;
 					}
 				}
 				ul {
 					border-right: 1px solid #000;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						border: 0;
 					}
 					li {
@@ -168,7 +168,7 @@ div#nav {
 				}
 			}
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			@include flex-direction(column);
 		}
 	}
@@ -288,12 +288,12 @@ div#nav {
 	}
 	div#gauche {
 		width: 27.5%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 100%;
 		}
 		+  div#rub_service {
 			width: 70.5%;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: 100%;
 			}
 		}
@@ -354,7 +354,7 @@ div#nav {
 			@include flex-direction(row);
 			@include vendor-prefix(flex-wrap, wrap);
 			@include justify-content(flex-start);
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				@include justify-content(space-around);
 			}
 			li {
@@ -362,7 +362,7 @@ div#nav {
 				width: 10em;
 				@each $category in (associations, base-nautique, demenagement, etat-civil, famille, mediatheque) {
 					&.menu-#{$category} {
-						@media screen and (max-width: $mobile-limit) {
+						@media screen and ($max-mobile-viewport) {
 							background-color: $primary-color;
 							box-shadow: 0px 0px 10px #888888;
 							div.description {
@@ -370,7 +370,7 @@ div#nav {
 							}
 						}
 						a {
-							@media screen and (max-width: $mobile-limit) {
+							@media screen and ($max-mobile-viewport) {
 								background-color: $primary-color;
 								color: #FFFFFF;
 							}
@@ -382,7 +382,7 @@ div#nav {
 							padding: 6em 0 0 0;
 							&:hover {
 								background-image: url('img/#{$category}-hover.png');
-								@media screen and (max-width: $mobile-limit) {
+								@media screen and ($max-mobile-viewport) {
 									background-color: $nav-item-hover-background;
 									+ div.description {
 										background-color: $nav-item-hover-background;
diff --git a/static/montlouis-sur-loire/_custom.scss b/static/montlouis-sur-loire/_custom.scss
index d2cf0db8..a0c30506 100644
--- a/static/montlouis-sur-loire/_custom.scss
+++ b/static/montlouis-sur-loire/_custom.scss
@@ -502,7 +502,7 @@ footer {
 }
 
 /* customization mobiles/petits écrans */
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#header-wrapper div#header div#toplinks {
 		right: 20px;
 	}
diff --git a/static/montpellier/_custom.scss b/static/montpellier/_custom.scss
index 44eac06c..6587eba1 100644
--- a/static/montpellier/_custom.scss
+++ b/static/montpellier/_custom.scss
@@ -6,7 +6,7 @@ a {
 
 // Steps
 .wcs-steps {
-	@media (max-width: $mobile-limit + 1) {
+	@media ($max-mobile-viewport) {
 		background: #fbfbfb;
 		padding-left: $wcs-steps-spacing;
 	}
@@ -522,7 +522,7 @@ ul.show-user-feeds li.planet { background-image: url(planet.png); }
 	position: absolute;
 	left: 200px;
 	top: -80px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		position: static;
 	}
 	& ul {
@@ -642,7 +642,7 @@ div#login-actions .actions form {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div.gru-nav .gru-nav-button + ul {
 		top: -17px;
 		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.26), 0px 2px 10px 0px rgba(0, 0, 0, 0.22);
@@ -673,7 +673,7 @@ div#login-actions .actions form {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	/* limit display to those with the mobile keyword */
 	div.categoriescell li,
 	#services > ul > li,
@@ -711,7 +711,7 @@ div.categories-list {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#content div.categories-list {
 		& > ul > li {
 			background: white;
@@ -840,7 +840,7 @@ div#login-blocks > div {
 		margin-left: 3%;
 		margin-right: 6%;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: 100%;
 		margin: 1em 0 !important;
 	}
@@ -876,7 +876,7 @@ body.authentic-page {
 	}
 	div#main-content-wrapper {
 		margin-top: 10px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-top: 0;
 			div#nav {
 				margin-bottom: 0;
@@ -897,7 +897,7 @@ body.authentic-page {
 		#toplinks span.connected-user {
 			display: none;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: 0;
 		}
 	}
@@ -949,7 +949,7 @@ div.a2-block > form {
 div.realisation {
 	float: left;
 	padding-top: 20px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 }
diff --git a/static/montreuil/_custom.scss b/static/montreuil/_custom.scss
index 6c6d09b5..0123e114 100644
--- a/static/montreuil/_custom.scss
+++ b/static/montreuil/_custom.scss
@@ -21,7 +21,7 @@ div#header-wrapper {
 		position: absolute;
 		top: -60px;
 		width: calc(100% - 50px);
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			left: 50px;
 		}
 	}
@@ -95,7 +95,7 @@ div.gru-nav {
 }
 
 .gru-content {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 10px;
 	}
 	div.wcsformsofcategorycell {
@@ -136,7 +136,7 @@ div.gru-nav {
 
 // Steps
 .wcs-step {
-	@media (max-width: $mobile-limit) {
+	@media ($max-mobile-viewport) {
 		border: none !important;
 		&--marker {
 			border: 1px solid;
@@ -171,7 +171,7 @@ div.textcell {
 
 div#sidebar {
 	div.trackingcodeinputcell {
-		@media screen and (min-width: $mobile-limit) {
+		@media screen and ($min-desktop-viewport) {
 			input {
 				width: 9.5em;
 			}
@@ -189,7 +189,7 @@ div.cell {
 	&.sticky {
 		position: sticky;
 		top: 1em;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: relative;
 			margin-bottom: 2em;
 		}
diff --git a/static/moselle/_custom.scss b/static/moselle/_custom.scss
index c5bced2f..8138dba8 100644
--- a/static/moselle/_custom.scss
+++ b/static/moselle/_custom.scss
@@ -97,7 +97,7 @@ footer {
 	border-top: 10px solid $primary-color;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#page {
 		background: transparent;
 	}
diff --git a/static/murviel-les-montpellier/_custom.scss b/static/murviel-les-montpellier/_custom.scss
index a9136e04..8b64c713 100644
--- a/static/murviel-les-montpellier/_custom.scss
+++ b/static/murviel-les-montpellier/_custom.scss
@@ -4,7 +4,7 @@ body {
 	background: white url(img/pages_fnd.jpg) center top no-repeat;
 	background-attachment: fixed;
 	padding: 50px 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0;
 	}
 }
@@ -17,7 +17,7 @@ div#page {
 	.site-header, nav, #main-content-wrapper {
 		box-sizing: border-box;
 		padding: 0 20px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0;
 		}
 	}
@@ -33,7 +33,7 @@ div#page {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			height: 100px;
 			a {
diff --git a/static/nancy-en-direct/_custom.scss b/static/nancy-en-direct/_custom.scss
index d57ca566..a07079ea 100644
--- a/static/nancy-en-direct/_custom.scss
+++ b/static/nancy-en-direct/_custom.scss
@@ -11,7 +11,7 @@ div#header h1#logo {
 		background-position: center left;
 		background-repeat: no-repeat;
 		background-size: auto 75%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			background-position: center center;
 		}
 	}
@@ -27,7 +27,7 @@ div#toplinks {
 	display: flex;
 	align-items: center;
 	color: #ffffff;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 	a {
@@ -48,7 +48,7 @@ div.carrousel-item-content {
 		left: 50%;
 		transform: translateY(-50%);
 		z-index: -1;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 100%;
 			left: 0;
 			border-radius: 0;
@@ -62,11 +62,11 @@ div.carrousel-item-content {
 }
 
 div.carrousel-content input + div div.carrousel-item {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0;
 	}
 	div.carrousel-item-content > a {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 0;
 			width: 100%;
 		}
@@ -130,16 +130,16 @@ div.cell.wcsformsofcategorycell {
 }
 
 div#nav-wrapper {
-	@media screen and (min-width: $mobile-limit) {
+	@media screen and ($min-desktop-viewport) {
 		background: #efefef;
 	}
 	div.gru-nav {
-		@media screen and (min-width: $mobile-limit) {
+		@media screen and ($min-desktop-viewport) {
 			background: transparent;
 		}
 	}
 	ul {
-		@media screen and (min-width: $mobile-limit) {
+		@media screen and ($min-desktop-viewport) {
 			margin-top: 0;
 		}
 	}
@@ -224,7 +224,7 @@ div#tracking-code h3,
 }
 
 .wcs-steps {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-bottom: 10px;
 	}
 }
@@ -240,7 +240,7 @@ div#tracking-code {
 	}
 }
 div#gauche div#tracking-code a {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 30px;
 	}
 }
@@ -298,11 +298,11 @@ body.page-demarches #columns {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		flex-direction: column;
 	}
 	#gauche {
-		@media screen and (min-width: $mobile-limit) {
+		@media screen and ($min-desktop-viewport) {
 			order: 1;
 			width: 180px;
 			margin-left: 20px;
@@ -333,7 +333,7 @@ span.required {
 }
 
 div#side {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		flex-direction: column-reverse;
 	}
 }
diff --git a/static/nanterre/_custom.scss b/static/nanterre/_custom.scss
index 31745c72..8571c37a 100644
--- a/static/nanterre/_custom.scss
+++ b/static/nanterre/_custom.scss
@@ -314,7 +314,7 @@ div#user-files {
 	padding: 10px;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#toplinks {
 		max-width: 100%;
 		border-width: 0 0 2px 2px;
diff --git a/static/orleans/_custom.scss b/static/orleans/_custom.scss
index b478ad06..7712be5a 100644
--- a/static/orleans/_custom.scss
+++ b/static/orleans/_custom.scss
@@ -25,7 +25,7 @@
 		background: #D1D1D1;
 		color: #555;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-right: 0.5em;
 	}
 }
@@ -51,7 +51,7 @@ div#header-wrapper {
 		position: absolute;
 		top: -30px;
 		padding: 1ex 1em 0.3ex 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -207,7 +207,7 @@ div#footer {
 	color: #dbdbdb;
 	display: flex;
 	justify-content: space-between;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		flex-direction: column;
 	}
 	h3 {
@@ -232,7 +232,7 @@ div#footer {
 	div.mairie-orleans, div.orleans-metropole {
 		width: 49%;
 		padding: 0 5px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 		    width: auto;
 		}
 	}
@@ -282,7 +282,7 @@ div.buttons {
 		float: left;
 	}
 	button {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-right: 0.5em;
 		}
 	}
diff --git a/static/perols/_custom.scss b/static/perols/_custom.scss
index aeeecbdc..71523dc3 100644
--- a/static/perols/_custom.scss
+++ b/static/perols/_custom.scss
@@ -5,7 +5,7 @@ body {
 div#header-wrapper {
 	background: transparent url(img/top.png) top center no-repeat;
 	height: 246px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-color: #3d3d3d;
 		background-position: -30px -30px;
 	}
@@ -18,7 +18,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 			a {
@@ -34,7 +34,7 @@ div#nav {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
diff --git a/static/pfwb/_custom.scss b/static/pfwb/_custom.scss
index 11086323..431a591a 100644
--- a/static/pfwb/_custom.scss
+++ b/static/pfwb/_custom.scss
@@ -38,7 +38,7 @@ div#nav {
 	margin-top: -100px;
 	max-width: 800px;
 	position: relative;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 0;
 	}
 	& > ul {
@@ -54,7 +54,7 @@ div#nav {
 				width: 8rem;
 				line-height: 120%;
 				padding-bottom: 5px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					height: auto;
 					padding: 1rem;
 					width: auto;
@@ -64,14 +64,14 @@ div#nav {
 			&.menu-accueil {
 				background: url(img/home.svg) 50% 5px no-repeat;
 				background-size: 25px auto;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: none;
 				}
 			}
 			&.menu-videos {
 				background: url(img/videos.svg) 50% 5px no-repeat;
 				background-size: 30px auto;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: none;
 				}
 			}
@@ -81,21 +81,21 @@ div#nav {
 				span {
 					font-weight: bold;
 				}
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: none;
 				}
 			}
 			&.menu-pes {
 				background: url(img/pes.svg) 50% 10px no-repeat;
 				background-size: 30px auto;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: none;
 				}
 			}
 			&.menu-calendrier {
 				background: url(img/calendrier.svg) 50% 5px no-repeat;
 				background-size: 22px auto;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: none;
 				}
 			}
@@ -121,7 +121,7 @@ body.has-picture {
 	font-weight: normal;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav, .site-header {
 		text-align: left;
 		position: static;
diff --git a/static/pratic/_custom.scss b/static/pratic/_custom.scss
index 126ae633..b0a177a0 100644
--- a/static/pratic/_custom.scss
+++ b/static/pratic/_custom.scss
@@ -66,7 +66,7 @@ div#nav a {
 	padding: 10px;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#top {
 		background: transparent;
 	}
diff --git a/static/publik/_custom.scss b/static/publik/_custom.scss
index ab78e9aa..b29bbd01 100644
--- a/static/publik/_custom.scss
+++ b/static/publik/_custom.scss
@@ -18,7 +18,7 @@ div#header {
 		left: - $header-width / 12;
 	}
 
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 100px;
 		background-position: 60px -70px;
 	}
@@ -54,7 +54,7 @@ h1#logo {
 			line-height: 2.5em;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: transparent;
 		text-align: left;
 	}
@@ -116,7 +116,7 @@ div#content {
 	margin: 0;
 	margin-top: -1em; /* cancel #content padding-top */
 	background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		-ms-flex: auto;
 		flex: auto;
 	}
@@ -189,7 +189,7 @@ div#content {
 
 #content #columns {
 	margin-left: 10px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-left: 0;
 	}
 }
@@ -311,7 +311,7 @@ ul#evolutions div.evolution-metadata {
 }
 
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#gauche {
 		width: auto;
 		min-height: auto;
diff --git a/static/quimper/_custom.scss b/static/quimper/_custom.scss
index bddc0668..6c5f9212 100644
--- a/static/quimper/_custom.scss
+++ b/static/quimper/_custom.scss
@@ -57,7 +57,7 @@ div#header {
 			font-size: 11px;
 		}
 	}
-	@media screen and (min-width: $nav-mobile-limit - 1px) {
+	@media screen and ($min-desktop-viewport) {
 		display: block;
 		max-width: $width;
 		margin: auto;
@@ -274,7 +274,7 @@ footer {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	.gru-content {
 		#sidebar {
 			order: 0;
@@ -497,7 +497,7 @@ div#rub_service form[action="."] {  // target form pages
 }
 
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	br.clear {
 		display: none;
 	}
@@ -731,7 +731,7 @@ ul#evolutions {
 
 div.qommon-map {
 	height: 500px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 280px;
 		max-height: 40vh;
 	}
@@ -871,7 +871,7 @@ div.notificationscell h2 + p {
 	padding-top: 0;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	body.focus-in {
 		#pwa-navigation {
 			display: none;
diff --git a/static/rochefort/_custom.scss b/static/rochefort/_custom.scss
index db437cdd..86be18ad 100644
--- a/static/rochefort/_custom.scss
+++ b/static/rochefort/_custom.scss
@@ -61,7 +61,7 @@ div#header-nav li {
 			background: #54AAA1;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 15px 0;
 		clear: both;
 		float: none;
@@ -109,7 +109,7 @@ div#top {
 	#logo a {
 		font-size: 28px;
 		color: $primary-color;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			visibility: hidden;
 		}
 	}
@@ -118,7 +118,7 @@ div#top {
 		padding-top: 1ex;
 		padding-bottom: 2ex;
 		font-size: 24px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
 	}
@@ -128,7 +128,7 @@ div#nav > ul > li {
 	margin-right: 10px;
 	border: 2px solid $primary-color;
 	border-width: 2px 0px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border: none;
 	}
 }
@@ -146,7 +146,7 @@ div.widget-prefilled div.content div.message {
 	font-size: 80%;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#footer-wrapper {
 		background-image: none;
 	}
@@ -179,7 +179,7 @@ div#footer-bottom-wrapper {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#header {
 		padding: 0;
 		h1 {
diff --git a/static/saint-bres/_custom.scss b/static/saint-bres/_custom.scss
index c73cf25a..8b7fcebe 100644
--- a/static/saint-bres/_custom.scss
+++ b/static/saint-bres/_custom.scss
@@ -7,7 +7,7 @@ body {
 div#header-wrapper {
 	background: transparent url(img/header.jpg) top center no-repeat;
 	height: 275px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-position: 40px 0;
 	}
 	div#header h1 {
@@ -18,7 +18,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 			a {
@@ -33,7 +33,7 @@ div#nav {
 	& > ul {
 		margin-top: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
@@ -50,7 +50,7 @@ div#nav {
 		font-weight: bold;
 		padding: 5px 10px 5px 10px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		right: 0;
 		a {
 			font-size: 80%;
diff --git a/static/saint-denis/_custom.scss b/static/saint-denis/_custom.scss
index ce7d7992..88accd91 100644
--- a/static/saint-denis/_custom.scss
+++ b/static/saint-denis/_custom.scss
@@ -5,7 +5,7 @@ div#header {
 }
 
 #header #top #logo a {
-	@media screen and (min-width: $mobile-limit+1px) {
+	@media screen and ($min-desktop-viewport) {
 		background-size: unset;
 		height: 103px;
 		margin: 24px 0 6px;
@@ -16,7 +16,7 @@ div#header {
 		font-weight: 700;
 		color: $font-color;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-size: contain;
 		text-indent: -10000px;
 	}
@@ -50,7 +50,7 @@ body.has-picture nav::after {
 	margin-bottom: 50px;
 	margin-left: auto;
 	margin-right: auto;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 113px;
 		width: unset;
 	}
diff --git a/static/saint-drezery/_custom.scss b/static/saint-drezery/_custom.scss
index f42e64eb..155cf3ff 100644
--- a/static/saint-drezery/_custom.scss
+++ b/static/saint-drezery/_custom.scss
@@ -5,7 +5,7 @@ body {
 div#header-wrapper {
 	background: white url(img/bandeau-h.jpeg) top center no-repeat;
 	height: 235px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-position: top left;
 		height: 295px;
 	}
@@ -17,7 +17,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 			a {
diff --git a/static/saint-genies-des-mourgues/_custom.scss b/static/saint-genies-des-mourgues/_custom.scss
index 9a57b84f..b963cd03 100644
--- a/static/saint-genies-des-mourgues/_custom.scss
+++ b/static/saint-genies-des-mourgues/_custom.scss
@@ -5,7 +5,7 @@ body {
 div#header-wrapper {
 	background: transparent url(img/bandeau-haut.jpg) top center no-repeat;
 	height: 208px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-position: -160px -50px;
 		height: 220px;
 	}
@@ -17,7 +17,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 		}
@@ -31,7 +31,7 @@ div#nav {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
@@ -45,7 +45,7 @@ div#nav {
 		display: inline-block;
 		color: $font-color;
 		padding: 10px 10px 15px 10px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 80%;
 		}
 	}
diff --git a/static/saint-georges-d-orques/_custom.scss b/static/saint-georges-d-orques/_custom.scss
index 0ac54c7b..dd5e1aba 100644
--- a/static/saint-georges-d-orques/_custom.scss
+++ b/static/saint-georges-d-orques/_custom.scss
@@ -10,7 +10,7 @@ div#page {
 	#main-content-wrapper {
 		box-sizing: border-box;
 		padding: 0 10px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0;
 		}
 	}
@@ -26,7 +26,7 @@ div#header {
 			color: $primary-color;
 			padding-left: 10px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 40px;
 			padding-left: 0px;
 		}
diff --git a/static/saint-jean-de-vedas/_custom.scss b/static/saint-jean-de-vedas/_custom.scss
index 978c41f8..c0adf163 100644
--- a/static/saint-jean-de-vedas/_custom.scss
+++ b/static/saint-jean-de-vedas/_custom.scss
@@ -9,7 +9,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 10px;
 			padding-bottom: 30px;
 			padding-left: 0;
@@ -23,7 +23,7 @@ div#header-wrapper {
 
 div#nav {
 	background: transparent url(img/logo.png) 9px -120px no-repeat;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: transparent;
 	}
 	margin-top: 0;
@@ -32,7 +32,7 @@ div#nav {
 	& > ul {
 		margin-top: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
diff --git a/static/saint-lo-agglo/_custom.scss b/static/saint-lo-agglo/_custom.scss
index b4c68acc..ef779280 100644
--- a/static/saint-lo-agglo/_custom.scss
+++ b/static/saint-lo-agglo/_custom.scss
@@ -44,7 +44,7 @@ div#header h1#logo {
 
 nav {
 	border-bottom: 5px solid #ccc;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border: 0;
 	}
 	margin-bottom: 2rem;
@@ -54,18 +54,18 @@ div#nav {
 	margin-top: 40px;
 	margin-bottom: 30px;
 	text-transform: uppercase;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 120px;
 	}
 	> ul {
 		margin-left: 300px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-left: 0;
 		}
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#toplinks span.sep {
 		display: inline-block;
 	}
diff --git a/static/saint-vallier-de-thiey/_custom.scss b/static/saint-vallier-de-thiey/_custom.scss
index 1ddbd09b..0de0f763 100644
--- a/static/saint-vallier-de-thiey/_custom.scss
+++ b/static/saint-vallier-de-thiey/_custom.scss
@@ -23,7 +23,7 @@ div#nav > ul {
 
 div#nav-wrapper {
 	border-top: 1px solid #E8E8E8;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border-top: 0;
 	}
 }
@@ -52,7 +52,7 @@ div#header h1 {
 	a {
 		color: #045e56;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: transparent;
 		line-height: 1;
 		padding-top: 40px;
diff --git a/static/saone-et-loire-cd71-2019/_custom.scss b/static/saone-et-loire-cd71-2019/_custom.scss
index 7d912e6b..fb9dc2d7 100644
--- a/static/saone-et-loire-cd71-2019/_custom.scss
+++ b/static/saone-et-loire-cd71-2019/_custom.scss
@@ -32,7 +32,7 @@ div#header-wrapper {
 		position: static;
 		height: 101px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		border-top: 0;
 	}
 	#logo {
@@ -47,7 +47,7 @@ div#header-wrapper {
 			text-indent: -10000px;
 			width: 450px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0px;
 			padding-top: 15px;
 			a {
@@ -90,7 +90,7 @@ div#header-wrapper {
 			left: 0;
 			height: 100%;
 			width: 20px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				content: none;
 			}
 		}
@@ -100,7 +100,7 @@ div#header-wrapper {
 			transform: skewX(-10deg) scale(1.1);
 			background: white;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			span.login a {
 				display: block;
 				padding-bottom: 5px;
@@ -110,12 +110,12 @@ div#header-wrapper {
 			color: white;
 			.connected-user {
 				font-weight: bold;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					display: block;
 				}
 			}
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			box-sizing: border-box;
 			top: 0px;
 			left: 0;
@@ -129,7 +129,7 @@ div#header-wrapper {
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 60px;
 	}
 }
@@ -139,7 +139,7 @@ div#nav-wrapper {
 	top: 5.5rem;
 	right: 0rem;
 	width: 500px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: auto;
 		max-width: 100%;
 		top: 50px;
@@ -161,7 +161,7 @@ div#nav-wrapper {
 			font-size: 12px;
 			font-weight: normal;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: 1rem;
 			right: auto;
 			left: 0;
@@ -178,7 +178,7 @@ div#nav-wrapper {
 		a {
 			color: white;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			top: 70px;
 		}
 	}
@@ -193,7 +193,7 @@ div#nav-wrapper {
 		color: $primary-color;
 		font-size: 2rem;
 		margin: 0 0.5rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			text-align: center;
 		}
 	}
@@ -210,7 +210,7 @@ div#sidebar {
 
 .gru-content #sidebar div.cell {
 	margin-right: 40px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-right: 0rem;
 	}
 }
diff --git a/static/saone-et-loire-cd71/_custom.scss b/static/saone-et-loire-cd71/_custom.scss
index 5606cc2c..f8215115 100644
--- a/static/saone-et-loire-cd71/_custom.scss
+++ b/static/saone-et-loire-cd71/_custom.scss
@@ -17,7 +17,7 @@ div#header {
 	width: auto;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#header {
 		padding-top: 70px;
 	}
@@ -38,7 +38,7 @@ div#header {
 	margin-right: 10px;
 }
 
-@media screen and (min-width: $mobile-limit) {
+@media screen and ($min-desktop-viewport) {
 	div#nav > ul {
 		margin-top: 0;
 		margin-bottom: 0;
@@ -103,7 +103,7 @@ div#gauche {
 	margin-top: 0;
 }
 
-@media screen and (min-width: $mobile-limit) {
+@media screen and ($min-desktop-viewport) {
 	div#gauche {
 		width: $sidebar-width + 10px;
 	}
diff --git a/static/seine-et-marne/_custom.scss b/static/seine-et-marne/_custom.scss
index 1180c678..36a830e1 100644
--- a/static/seine-et-marne/_custom.scss
+++ b/static/seine-et-marne/_custom.scss
@@ -5,7 +5,7 @@ body {
 div#header {
 	background: white url(logo-cg77-pic.svg) bottom left no-repeat;
 	padding-left: 100px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 0;
 		background-position: top left;
 	}
@@ -16,7 +16,7 @@ h1#logo a {
 	line-height: 140px;
 	height: 140px;
 	text-transform: uppercase;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		line-height: 120px;
 		height: 85px;
 	}
@@ -65,7 +65,7 @@ div#toplinks {
 	border-radius: 1em;
 	border: none;
 	padding: 1ex 2em;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		top: 5px;
 	}
 }
diff --git a/static/sens/_custom.scss b/static/sens/_custom.scss
index b06145a7..0a372063 100644
--- a/static/sens/_custom.scss
+++ b/static/sens/_custom.scss
@@ -54,7 +54,7 @@ div#nav {
 		margin: 10px 0px 5px 10px;
 		padding-left: 50px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 		& > ul {
 			background: $tertiary-color;
@@ -133,7 +133,7 @@ div#footer-wrapper {
 		margin-top: -66px;
 		margin-left: -8px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 10px;
 		img {
 			width: 72px;
diff --git a/static/sicoval/_custom.scss b/static/sicoval/_custom.scss
index 13c2b5a7..35ed45cf 100644
--- a/static/sicoval/_custom.scss
+++ b/static/sicoval/_custom.scss
@@ -20,7 +20,7 @@ div#nav ul {
 	margin-top: 0;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#header #top #logo {
 		padding-left: 40px;
 	}
diff --git a/static/sictiam/_custom.scss b/static/sictiam/_custom.scss
index 3551b498..66c0454b 100644
--- a/static/sictiam/_custom.scss
+++ b/static/sictiam/_custom.scss
@@ -18,7 +18,7 @@ div#nav {
 
 div#nav-wrapper {
 	background: $nav-background;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: transparent;
 	}
 }
diff --git a/static/sictiam/_sictiam.scss b/static/sictiam/_sictiam.scss
index 25e7bb86..7591fc96 100644
--- a/static/sictiam/_sictiam.scss
+++ b/static/sictiam/_sictiam.scss
@@ -1,6 +1,6 @@
 #login-page > div.block {
   min-height: 300px;
-  @media screen and (max-width: $mobile-limit) {
+  @media screen and ($max-mobile-viewport) {
     min-height: auto;
   }
 }
@@ -8,7 +8,7 @@
 .oidc-button {
   padding-top: 80px;
   text-align: center;
-  @media screen and (max-width: $mobile-limit) {
+  @media screen and ($max-mobile-viewport) {
     padding-top: 10px;
   }
 }
diff --git a/static/signal-publik/_custom.scss b/static/signal-publik/_custom.scss
index 54af32dd..75b93ac0 100644
--- a/static/signal-publik/_custom.scss
+++ b/static/signal-publik/_custom.scss
@@ -9,7 +9,7 @@
 	text-transform: uppercase;
 	font-weight: 500;
 	letter-spacing: -1px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		font-size: 25px;
 	}
 }
@@ -19,7 +19,7 @@
 	#header {
 		padding: 0;
 		background: white;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			height: auto;
 		}
 		#signal-publik {
@@ -63,7 +63,7 @@
 					left: calc(0px - (100vw - 600px - 200px + 20px));
 				}
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				position: static;
 				width: 100%;
 				padding: 0 1rem;
@@ -181,7 +181,7 @@ div#page {
 
 div#main-content-wrapper {
 	margin-top: 1rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 0;
 	}
 	#columns div.textcell {
@@ -255,7 +255,7 @@ div.gru-content div.wcsformcell {
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		&:nth-child(4n) {
 			a.form-link {
 				div span {
@@ -338,7 +338,7 @@ footer {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	.gru-content {
 		#sidebar {
 			order: 0;
@@ -516,7 +516,7 @@ div#rub_service form[action="."] {  // target form pages
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	br.clear {
 		display: none;
 	}
@@ -616,7 +616,7 @@ div#rub_service {
 	div.text-check-before-submit,
 	form {
 		padding: 0 1rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0.5rem 0;
 		}
 	}
@@ -743,7 +743,7 @@ ul#evolutions {
 
 div.qommon-map {
 	height: 500px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		height: 280px;
 		max-height: 40vh;
 	}
@@ -788,7 +788,7 @@ div.notificationscell h2 + p {
 	border-radius: 0;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	body.focus-in {
 		#pwa-navigation {
 			display: none;
@@ -893,7 +893,7 @@ div#fc-linking {
 div#login-page.methods2 > div.block.block-fc {
 	margin-right: 0;
 	width: 50%;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: auto;
 	}
 }
diff --git a/static/sospel/_custom.scss b/static/sospel/_custom.scss
index a37f9377..8f1bb1e8 100644
--- a/static/sospel/_custom.scss
+++ b/static/sospel/_custom.scss
@@ -28,7 +28,7 @@ div#header {
 	border-radius: 10px 10px 0px 0px;
 	background: white url(background-header.png) top right no-repeat;
 	min-height: 200px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 0;
 		border-radius: 0;
 		background: white url(background-header-mobile.png) 2px 2px repeat-x;
@@ -40,7 +40,7 @@ div#nav {
 	box-sizing: border-box;
 	padding-left: 10px;
 	border-radius: 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 25px;
 	}
 }
@@ -55,7 +55,7 @@ div#top h1 a {
 	padding-top: 100px;
 	padding-left: 20px;
 	white-space: nowrap;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-top: 60px;
 	}
 }
diff --git a/static/strasbourg-2018/_custom.scss b/static/strasbourg-2018/_custom.scss
index 07b7e9cf..a00f354e 100644
--- a/static/strasbourg-2018/_custom.scss
+++ b/static/strasbourg-2018/_custom.scss
@@ -1250,7 +1250,7 @@ div.section.foldable {
 	&.folded {
 		span.disclose-message {
 			display: inline-block;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				// never displayed on mobile as the small width
 				// makes clear the relation between title and
 				// open/close bracket.
diff --git a/static/sussargues/_custom.scss b/static/sussargues/_custom.scss
index 8a0b8803..f1ed872f 100644
--- a/static/sussargues/_custom.scss
+++ b/static/sussargues/_custom.scss
@@ -3,7 +3,7 @@
 body {
 	background: #e6e6e6;
 	padding: 50px 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0;
 	}
 }
@@ -16,7 +16,7 @@ div#page {
 	header, nav, #main-content-wrapper {
 		box-sizing: border-box;
 		padding: 0 20px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0;
 		}
 	}
@@ -32,7 +32,7 @@ div#page {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			a {
 				width: 100%;
diff --git a/static/toulouse-metropole/_custom.scss b/static/toulouse-metropole/_custom.scss
index f25bafb4..c4d20659 100644
--- a/static/toulouse-metropole/_custom.scss
+++ b/static/toulouse-metropole/_custom.scss
@@ -58,7 +58,7 @@ header {
 			height: $header-height;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		left: 0;
 		h1#logo {
 			padding: 0;
@@ -99,7 +99,7 @@ nav {
 		width: $nav-width;
 		top: 0;
 		height: 100vh;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			content: none;
 		}
 	}
@@ -112,7 +112,7 @@ nav {
 			a {
 				padding-top: 60px;
 				background: transparent 50% 25px no-repeat;
-				@media screen and (min-width: #{$mobile-limit - 1px}) {
+				@media screen and ($min-desktop-viewport) {
 					span {
 						transition: transform linear 0.1s;
 						display: block;
@@ -121,7 +121,7 @@ nav {
 						transform: scale(1.2);
 					}
 				}
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: transparent 50% 10px no-repeat;
 					padding-top: 45px;
 					span {
@@ -150,13 +150,13 @@ nav {
 			}
 			&.selected a,
 			&:hover a {
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: transparent 50% 10px no-repeat;
 				}
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		position: fixed;
 		height: $nav-mobile-bottom-bar-height;
 		top: auto;
@@ -202,7 +202,7 @@ footer {
 	z-index: 200;
 	box-shadow: 0 0 10px #666;
 	margin-left: $nav-width;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-left: 0;
 	}
 	#footer-wrapper {
@@ -213,7 +213,7 @@ footer {
 	div.feedcell {
 		display: none;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		box-shadow: none;
 		#footer-wrapper {
 			padding-top: 0;
@@ -262,7 +262,7 @@ footer {
 #page {
 	// simulate left black band (may be replaced by a data uri PNG)
 	background: linear-gradient(to right, #2e2d35 0%, #2e2d35 $nav-width, white $nav-width);
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: none;
 	}
 }
@@ -271,7 +271,7 @@ div#main-content-wrapper {
 	padding-left: $nav-width;
 	box-sizing: border-box;
 	flex: unset;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 0;
 	}
 }
@@ -287,7 +287,7 @@ div#main-content br:last-child {
 section {
 	padding: 2rem;
 	box-sizing: border-box;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 2rem 1rem;
 	}
 }
@@ -297,7 +297,7 @@ section#intro {
 	background: url(img/header/img_ville_background_header.jpg) top center no-repeat;
 	background-size: cover;
 	box-shadow: 0 4px 8px #ccc;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		min-height: 0;
 		padding-top: 120px;
 	}
@@ -339,7 +339,7 @@ section#section-professionnels {
 		+ a {
 			position: absolute;
 			top: -4rem;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				top: -2rem;
 			}
 		}
@@ -353,7 +353,7 @@ section#section-particuliers {
 			background-image: url(img/home/home-particuliers/picto-particuliers.png);
 		}
 		position: absolute;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 		}
 	}
@@ -362,7 +362,7 @@ section#section-particuliers {
 	}
 	div.forms {
 		margin-left: 400px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-left: 0;
 		}
 	}
@@ -373,7 +373,7 @@ section#section-particuliers {
 		margin-bottom: 0;
 		width: 400px;
 		border: none;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 0;
 			width: auto;
 		}
@@ -400,7 +400,7 @@ section#section-particuliers {
 				background-position: 0px center;
 				background-repeat: no-repeat;
 				font-weight: bold;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background-position: 10px center;
 				}
 				> span {
@@ -421,7 +421,7 @@ section#section-particuliers {
 				left: -8px;
 				top: 20px;
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin-top: 2ex;
 				i.opener {
 					background-image: url(img/FlecheBas.png);
@@ -465,7 +465,7 @@ section#section-particuliers {
 				left: -10px;
 				top: 42px;
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				border-radius: 0 0 10px 10px;
 				position: static;
 				left: auto;
@@ -476,7 +476,7 @@ section#section-particuliers {
 				}
 			}
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			.opened {
 				h2 {
 					background: $orange;
@@ -505,7 +505,7 @@ section#section-particuliers {
 		position: absolute;
 		top: 170px;
 		max-width: 320px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 		}
 		h3 {
@@ -579,14 +579,14 @@ section#section-professionnels {
 		border: none;
 		margin-right: 3rem;
 		margin-bottom: 3rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-right: 10px;
 		}
 		a {
 			text-transform: uppercase;
 			font-weight: bold;
 			width: 20vw;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: 85vw;
 			}
 			display: inline-block;
@@ -657,7 +657,7 @@ section#section-professionnels {
 			margin-top: 20px;
 			left: calc(50% - 28px + #{$nav-width / 2});
 			background: white;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				left: calc(50% - 28px);
 			}
 		}
@@ -666,7 +666,7 @@ section#section-professionnels {
 		margin-left: 0;
 		line-height: 1.8;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 10px;
 		text-align: center;
 		width: auto;
@@ -681,7 +681,7 @@ section#section-professionnels {
 		display: inline-block;
 		width: 210px;
 		margin: 0 1rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 1rem 0;
 			width: 90%;
 			box-sizing: border-box;
@@ -715,7 +715,7 @@ section#section-professionnels {
 		@media screen and (max-width: 1500px) {
 			right: 80px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 2rem 0;
 			position: relative;
 			right: auto;
@@ -768,7 +768,7 @@ section#section-professionnels {
 				text-transform: uppercase;
 				color: #333;
 				background: inherit;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					padding-top: 0;
 					padding-bottom: 0;
 					margin-bottom: 1ex;
@@ -776,7 +776,7 @@ section#section-professionnels {
 				}
 			}
 			&:last-child a {
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					border-right: 0;
 				}
 			}
@@ -792,7 +792,7 @@ div#title-section {
 	padding: 170px 50px 100px 100px;
 	font-size: 16px;
 	font-weight: bold;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 150px 1rem 1rem 1rem;
 	}
 	color: white;
@@ -819,7 +819,7 @@ div#title-section {
 			left: 0;
 			background-color: #fff;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-right: 0;
 		}
 	}
@@ -839,7 +839,7 @@ div#title-section {
 			padding-top: 45px;
 			background: url(img/formulaire/picto-reveil.png) top center no-repeat;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: relative;
 			right: auto;
 			top: -10px;
@@ -905,13 +905,13 @@ div#gauche {
 	box-shadow: 0 0 5px #ccc;
 	position: relative;
 	margin: 0 100px 0 100px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 0;
 	}
 	div#tracking-code {
 		position: absolute;
 		top: -100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			text-align: center;
 			position: static;
 			width: 80%;
@@ -938,14 +938,14 @@ div#title-section + div#rub_service {
 	position: relative;
 	z-index: 10;
 	padding-top: 30px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 0;
 	}
 }
 
 div#rub_service {
 	margin: 0 100px 50px 100px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 0 0 50px 0;
 	}
 }
@@ -969,7 +969,7 @@ div#rub_service {
 			padding: 0 1rem;
 			&.first {
 				padding-left: 60px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					padding-left: 0;
 				}
 			}
@@ -1053,7 +1053,7 @@ div#rub_service {
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		ol {
 			li {
 				min-width: none;
@@ -1078,7 +1078,7 @@ div#rub_service {
 	div.drafts-recall,
 	form {
 		margin: 0 100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 0 10px;
 		}
 		padding: 0;
@@ -1086,7 +1086,7 @@ div#rub_service {
 	form {
 		> h3, > h4, > div, > p.comment-field {
 			box-sizing: border-box;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				padding: 0 1rem;
 			}
 		}
@@ -1117,7 +1117,7 @@ div#rub_service {
 			padding: 4rem 1rem;
 			display: flex;
 			justify-content: space-between;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin: 0 -10px;
 				padding: 4rem 1rem;
 			}
@@ -1127,7 +1127,7 @@ div#rub_service {
 			div.widget {
 				margin: 0 5rem;
 				text-transform: uppercase;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					margin: 0;
 					&.previous-button {
 						margin-left: 1ex;
@@ -1142,7 +1142,7 @@ div#rub_service {
 			}
 			button {
 				min-width: 200px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					min-width: 150px;
 				}
 			}
@@ -1185,7 +1185,7 @@ div#rub_service {
 	div#receipt-intro,
 	div.section {
 		padding: 0 100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0;
 		}
 	}
@@ -1234,7 +1234,7 @@ ul#evolutions {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#columns {
 		padding: 0;
 	}
@@ -1244,7 +1244,7 @@ ul#evolutions {
 	float: right;
 	z-index: 1000;
 	position: relative;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		float: none;
 	}
 	> div {
@@ -1265,7 +1265,7 @@ ul#evolutions {
 			top: -40px;
 			left: -40px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 1ex 3ex;
 			max-width: none;
 		}
@@ -1278,7 +1278,7 @@ ul#evolutions {
 
 .gru-content .cell.textcell > div {
 	margin: 3rem 100px 0 100px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 3rem 1rem 0 1rem;
 	}
 	h2 {
@@ -1310,7 +1310,7 @@ ul#evolutions {
 	div#title-section ~ div.account-management,
 	div#title-section ~ div.cell > div {
 		margin: 3rem 100px 0 100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 3rem 1rem 0 1rem;
 		}
 		h2 {
@@ -1335,13 +1335,13 @@ ul#evolutions {
 		margin: 3rem 0px 0 0px;
 		box-sizing: border-box;
 		padding: 0 100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0 20px;
 		}
 	}
 	div#title-section ~ div.cell.encart > div {
 		margin: 3rem 100px 0 10px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 3rem 1rem 0 1rem;
 		}
 	}
@@ -1379,7 +1379,7 @@ div#actu {
 	position: absolute;
 	z-index: 100;
 	right: -400px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		right: calc(-100vw + 85px);
 	}
 	transition: right ease-out 0.5s;
@@ -1401,17 +1401,17 @@ div#actu {
 		display: inline-block;
 		box-sizing: border-box;
 		width: 400px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: calc(100vw - 85px);
 		}
 		padding: 20px 20px 20px 40px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			box-shadow: none;
 		}
 		border-bottom-left-radius: 10px;
 		h3 {
 			font-size: 40px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				font-size: 20px;
 			}
 			margin-bottom: 2rem;
@@ -1443,13 +1443,13 @@ div#actu {
 					padding-right: 30px;
 					padding-top: 3px;
 					background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						display: none;
 					}
 				}
 				h4 a {
 					color: $font-color;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						display: block;
 						padding-right: 30px;
 						background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
@@ -1492,7 +1492,7 @@ div#actu {
 #login-page div.block,
 #content div.a2-block {
 	width: 40rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: auto;
 		padding-top: 1rem;
 	}
@@ -1500,7 +1500,7 @@ div#actu {
 	h2 {
 		font-size: 46px;
 		font-weight: bold;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 32px;
 		}
 	}
@@ -1527,7 +1527,7 @@ ul {
 }
 
 #nav-tracking-code {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 	background: #554b49;
@@ -1562,7 +1562,7 @@ ul {
 	display: none;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#steps {
 		display: none;
 	}
@@ -1626,7 +1626,7 @@ ul {
 	p {
 		font-weight: 600;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-top: 70px;
 	}
 }
@@ -1635,13 +1635,13 @@ ul {
 #registration-blocks {
 	display: flex;
 	justify-content: center;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: block;
 	}
 	div.a2-block {
 		max-width: 35rem;
 		margin: 0 3rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			max-width: none;
 			margin: 0 1rem;
 		}
@@ -1649,7 +1649,7 @@ ul {
 		h2 {
 			font-size: 36px;
 			padding-left: 0;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				font-size: 26px;
 			}
 		}
@@ -1663,7 +1663,7 @@ ul {
 			top: 80px;
 			bottom: 80px;
 			right: -3rem;  // -margin
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				height: 1px;
 				width: auto;
 				top: auto;
@@ -1690,7 +1690,7 @@ ul {
 		// get lost password/create account lines out of flow, so the
 		// FranceConnect button can be aligned with the login button.
 		position: absolute;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 		}
 	}
@@ -1711,7 +1711,7 @@ div#frontend-registration-fc {
 		}
 		position: absolute;
 		bottom: 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 		}
 	}
@@ -1742,7 +1742,7 @@ div#rub_service div#info {
 		font-size: 40px;
 		padding: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 60px 20px;
 	}
 }
@@ -1770,14 +1770,14 @@ div.communes-toulouse {
 			border: 1px solid #6A5F5B;
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: center;
 	}
 }
 
 div#messages {
 	margin: 0 0 0 4px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-left: 0;
 	}
 	li {
diff --git a/static/toulouse/_custom.scss b/static/toulouse/_custom.scss
index 285f8f2a..c6c53bdc 100644
--- a/static/toulouse/_custom.scss
+++ b/static/toulouse/_custom.scss
@@ -67,7 +67,7 @@ a:hover {
 			width: 207px;
 			height: $header-height;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 			margin: 0 0 0 auto;
 		}
@@ -91,7 +91,7 @@ a:hover {
 			color: #322f38;
 			font-size: 9px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			cursor: pointer;
 			margin-left: 1ex;
 			width: calc(100% - 210px);
@@ -107,7 +107,7 @@ nav {
 	left: 0;
 	background: rgba(204,88,49,1);
 	background: linear-gradient(to bottom, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: linear-gradient(to left, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
 	}
 	color: white;
@@ -131,7 +131,7 @@ nav {
 		width: $nav-width;
 		top: 0;
 		height: 100vh;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			content: none;
 		}
 	}
@@ -153,7 +153,7 @@ nav {
 						transform: scale(1.2);
 					}
 				}
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: transparent 50% 10px no-repeat;
 					padding-top: 45px;
 					span {
@@ -182,13 +182,13 @@ nav {
 			}
 			&.selected a,
 			&:hover a {
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background: transparent 50% 10px no-repeat;
 				}
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		position: fixed;
 		height: $nav-mobile-bottom-bar-height;
 		top: auto;
@@ -199,7 +199,7 @@ nav {
 footer {
 	z-index: 0;
 	margin-left: $nav-width;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-left: 0;
 	}
 	#footer-wrapper {
@@ -209,7 +209,7 @@ footer {
 	div.feedcell {
 		display: none;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		div.trackingcodeinputcell {
 			display: block;
 			text-align: center;
@@ -248,7 +248,7 @@ footer {
 #page {
 	// simulate left black band (may be replaced by a data uri PNG)
 	background: linear-gradient(to right, #2e2d35 0%, #2e2d35 $nav-width, white $nav-width);
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: none;
 	}
 }
@@ -258,7 +258,7 @@ div#main-content-wrapper {
 	padding-top: $header-height;
 	box-sizing: border-box;
 	flex: unset;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-left: 0;
 	}
 }
@@ -279,7 +279,7 @@ section {
 section#intro {
 	min-height: $intro-height;
 	background: url(img/home/bg-portable-home.jpg) top right no-repeat;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		min-height: none;
 		background: url(img/mobile-laptop.png) bottom center no-repeat;;
 		background-size: contain;
@@ -312,7 +312,7 @@ section#section-professionnels {
 		+ a {
 			position: absolute;
 			top: -4rem;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				top: -2rem;
 			}
 		}
@@ -329,7 +329,7 @@ section#section-particuliers {
 			box-shadow: 0 0 5px 5px #222;
 		}
 		position: absolute;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 		}
 	}
@@ -338,7 +338,7 @@ section#section-particuliers {
 	}
 	div.forms {
 		margin-left: 400px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-left: 0;
 		}
 	}
@@ -349,7 +349,7 @@ section#section-particuliers {
 		margin-bottom: 0;
 		width: 400px;
 		border: none;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 0;
 			width: auto;
 		}
@@ -375,7 +375,7 @@ section#section-particuliers {
 				background-position: 0px center;
 				background-repeat: no-repeat;
 				font-weight: bold;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background-position: 10px center;
 				}
 				> span {
@@ -403,7 +403,7 @@ section#section-particuliers {
 				left: -8px;
 				top: 20px;
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin-top: 2ex;
 				i.opener {
 					background-image: url(img/FlecheBas.png);
@@ -448,7 +448,7 @@ section#section-particuliers {
 				left: -10px;
 				top: 42px;
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				border-radius: 0 0 10px 10px;
 				position: static;
 				left: auto;
@@ -459,7 +459,7 @@ section#section-particuliers {
 				}
 			}
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			.opened {
 				h2 {
 					background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
@@ -470,7 +470,7 @@ section#section-particuliers {
 				}
 			}
 		}
-		@media screen and (min-width: #{$mobile-limit - 1px}) {
+		@media screen and ($min-desktop-viewport) {
 			&:hover {
 				h2 {
 					background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
@@ -486,7 +486,7 @@ section#section-particuliers {
 		position: absolute;
 		top: 170px;
 		max-width: 320px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 		}
 		h3 {
@@ -571,7 +571,7 @@ section#section-professionnels {
 			text-transform: uppercase;
 			font-weight: bold;
 			width: 20vw;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: 60vw;
 			}
 			display: inline-block;
@@ -656,7 +656,7 @@ section#section-professionnels {
 		margin-left: 0;
 		line-height: 1.8;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 10px;
 		text-align: center;
 		width: auto;
@@ -696,7 +696,7 @@ section#section-professionnels {
 		@media screen and (max-width: 1500px) {
 			right: 80px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 2rem 0;
 			position: relative;
 			right: auto;
@@ -749,7 +749,7 @@ section#section-professionnels {
 				text-transform: uppercase;
 				color: #333;
 				background: inherit;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					padding-top: 0;
 					padding-bottom: 0;
 					margin-bottom: 1ex;
@@ -757,7 +757,7 @@ section#section-professionnels {
 				}
 			}
 			&:last-child a {
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					border-right: 0;
 				}
 			}
@@ -770,7 +770,7 @@ div#title-section {
 	overflow: hidden;
 	background: #322f38 url(img/formulaire/bg-titre-formulaire.png) bottom right no-repeat;
 	padding: 100px 50px 100px 100px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 50px 1rem 1rem 1rem;
 	}
 	color: white;
@@ -786,7 +786,7 @@ div#title-section {
 		margin-top: 0;
 		font-size: 40px;
 		margin-right: 160px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin-right: 0;
 		}
 	}
@@ -806,7 +806,7 @@ div#title-section {
 			padding-top: 45px;
 			background: url(img/formulaire/picto-reveil.png) top center no-repeat;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: relative;
 			right: auto;
 			top: -20px;
@@ -897,7 +897,7 @@ div#gauche {
 	div#tracking-code {
 		position: absolute;
 		top: -100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			text-align: center;
 			position: static;
 			width: 80%;
@@ -930,7 +930,7 @@ div#gauche {
 			padding: 0 1rem;
 			&.first {
 				padding-left: 60px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					padding-left: 0;
 				}
 			}
@@ -1024,7 +1024,7 @@ div#gauche {
 			}
 		}
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		ol {
 			li {
 				min-width: none;
@@ -1048,7 +1048,7 @@ div#rub_service {
 	div.drafts-recall,
 	form {
 		margin: 0 100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 0 10px;
 		}
 		padding: 0;
@@ -1059,7 +1059,7 @@ div#rub_service {
 			&[class*=grid-] {
 				box-sizing: content-box;
 			}
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				padding: 0 1rem;
 			}
 		}
@@ -1084,7 +1084,7 @@ div#rub_service {
 		}
 		> div.buttons {
 			margin: 0 -100px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				margin: 0 -10px;
 			}
 			box-sizing: border-box;
@@ -1098,7 +1098,7 @@ div#rub_service {
 			div.widget {
 				margin: 0 5rem;
 				text-transform: uppercase;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					margin: 0;
 					&.previous-button {
 						margin-left: 1ex;
@@ -1166,7 +1166,7 @@ div#rub_service {
 	div#receipt-intro,
 	div.section {
 		padding: 0 100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0;
 		}
 	}
@@ -1212,7 +1212,7 @@ ul#evolutions {
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#columns {
 		padding: 0;
 	}
@@ -1220,7 +1220,7 @@ ul#evolutions {
 
 .gru-content .cell.textcell.encart {
 	float: right;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		float: none;
 	}
 	> div {
@@ -1239,7 +1239,7 @@ ul#evolutions {
 			top: -40px;
 			left: calc(50% - 43px);
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 1ex 3ex;
 			max-width: none;
 		}
@@ -1253,7 +1253,7 @@ ul#evolutions {
 
 .gru-content .cell.textcell > div {
 	margin: 3rem 100px 0 100px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin: 3rem 1rem 0 1rem;
 	}
 	h2 {
@@ -1285,7 +1285,7 @@ ul#evolutions {
 	div#title-section ~ div.account-management,
 	div#title-section ~ div.cell > div {
 		margin: 3rem 100px 0 100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			margin: 3rem 1rem 0 1rem;
 		}
 		h2 {
@@ -1310,7 +1310,7 @@ ul#evolutions {
 		margin: 3rem 0px 0 0px;
 		box-sizing: border-box;
 		padding: 0 100px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 0 20px;
 		}
 	}
@@ -1354,7 +1354,7 @@ div#actu {
 	position: absolute;
 	z-index: 100;
 	right: -400px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		right: calc(-100vw + 85px);
 	}
 	transition: right ease-out 0.5s;
@@ -1376,17 +1376,17 @@ div#actu {
 		display: inline-block;
 		box-sizing: border-box;
 		width: 400px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: calc(100vw - 85px);
 		}
 		padding: 20px 20px 20px 40px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			box-shadow: none;
 		}
 		border-bottom-left-radius: 10px;
 		h3 {
 			font-size: 40px;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				font-size: 20px;
 			}
 			margin-bottom: 2rem;
@@ -1418,13 +1418,13 @@ div#actu {
 					padding-right: 30px;
 					padding-top: 3px;
 					background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						display: none;
 					}
 				}
 				h4 a {
 					color: $font-color;
-					@media screen and (max-width: $mobile-limit) {
+					@media screen and ($max-mobile-viewport) {
 						display: block;
 						padding-right: 30px;
 						background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
@@ -1468,7 +1468,7 @@ div#actu {
 #content div.a2-block {
 	padding-top: 4rem;
 	width: 40rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: auto;
 		padding-top: 1rem;
 	}
@@ -1476,7 +1476,7 @@ div#actu {
 	h2 {
 		font-size: 46px;
 		font-weight: bold;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 32px;
 		}
 	}
@@ -1502,7 +1502,7 @@ ul {
 }
 
 #nav-tracking-code {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: none;
 	}
 	margin-top: -45px;
@@ -1533,7 +1533,7 @@ ul {
 	display: none;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#steps {
 		display: none;
 	}
@@ -1612,7 +1612,7 @@ $list-illus:
 	p {
 		font-weight: 600;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding-top: 70px;
 	}
 }
@@ -1621,13 +1621,13 @@ $list-illus:
 #registration-blocks {
 	display: flex;
 	justify-content: center;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		display: block;
 	}
 	div.a2-block {
 		max-width: 35rem;
 		margin: 0 3rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			max-width: none;
 			margin: 0 1rem;
 		}
@@ -1635,7 +1635,7 @@ $list-illus:
 		h2 {
 			font-size: 36px;
 			padding-left: 0;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				font-size: 26px;
 			}
 		}
@@ -1649,7 +1649,7 @@ $list-illus:
 			top: 80px;
 			bottom: 80px;
 			right: -3rem;  // -margin
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				height: 1px;
 				width: auto;
 				top: auto;
@@ -1676,7 +1676,7 @@ $list-illus:
 		// get lost password/create account lines out of flow, so the
 		// FranceConnect button can be aligned with the login button.
 		position: absolute;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 		}
 	}
@@ -1706,7 +1706,7 @@ div#frontend-registration-fc {
 		}
 		position: absolute;
 		bottom: 0;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			position: static;
 		}
 	}
@@ -1743,7 +1743,7 @@ div#rub_service div#info {
 		font-size: 40px;
 		padding: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 60px 20px;
 	}
 }
@@ -1761,7 +1761,7 @@ div#rub_service div#info {
 	footer {
 		margin-left: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		div#main-content-wrapper,
 		#content #registration-title {
 			padding-top: 1rem;
diff --git a/static/tournai/_custom.scss b/static/tournai/_custom.scss
index 9975293a..6d793dc5 100644
--- a/static/tournai/_custom.scss
+++ b/static/tournai/_custom.scss
@@ -426,7 +426,7 @@ $category-slugs: urbanisme, agenda, associations, commerces, demande-d-actes-et-
 	}
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#nav {
 		margin-top: 10px;
 	}
@@ -469,7 +469,7 @@ body.page-bienvenue {
 	div#main-content {
 		width: 80%;
 		margin: 0 auto;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: auto;
 		}
 	}
@@ -508,7 +508,7 @@ body.page-bienvenue {
 			padding: 1ex;
 		}
 
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 100%;
 			height: auto;
 			a {
diff --git a/static/tours-metropole/_custom.scss b/static/tours-metropole/_custom.scss
index 2796b402..f836f016 100644
--- a/static/tours-metropole/_custom.scss
+++ b/static/tours-metropole/_custom.scss
@@ -24,7 +24,7 @@ body.authentic-page, body.registration-page {
 			padding-left: 0;
 			margin: 20px 0 10px 0;
 			width: 30%;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				width: 100%;
 			}
 			a {
@@ -34,7 +34,7 @@ body.authentic-page, body.registration-page {
 				background-repeat: no-repeat;
 				background-size: contain, contain;
 				text-indent: -9999px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					background-image: url('img/logo-neutre.png');
 					background-repeat: no-repeat;;
 					background-position: center left;
@@ -48,7 +48,7 @@ body.authentic-page, body.registration-page {
 			@include vendor-prefix(justify-content, space-between);
 		}
 		h1#logo-ville {
-			@media screen and (min-width: $mobile-limit) {
+			@media screen and ($min-desktop-viewport) {
 				display: block;
 			}
 			a {
@@ -103,7 +103,7 @@ div#header {
 			margin: 15px 0;
 			line-height: 2em;
 			font-family: 'Roboto Condensed', sans-serif;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				text-indent: -9999px;
 				background-size: contain;
 			}
@@ -123,7 +123,7 @@ div#header {
 }
 
 div#nav-wrapper {
-	@media screen and (min-width: $mobile-limit) {
+	@media screen and ($min-desktop-viewport) {
 		margin-top: -30px;
 	}
 }
@@ -135,15 +135,15 @@ div#nav {
 }
 
 div.gru-nav {
-	@media screen and (min-width: $mobile-limit) {
+	@media screen and ($min-desktop-viewport) {
 		@include vendor-prefix(transform, skewY(-1deg));
 	}
 	padding: 5px 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0;
 	}
 	> ul {
-		@media screen and (min-width: $mobile-limit) {
+		@media screen and ($min-desktop-viewport) {
 			@include vendor-prefix(transform, skewY(1deg));
 		}
 		> li a {
@@ -185,7 +185,7 @@ div#footer-wrapper {
 }
 
 .gru-content {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		@include vendor-prefix(flex-direction, column-reverse);
 	}
 	div.cell.wcsformsofcategorycell {
diff --git a/static/universite-paris-nanterre/_custom.scss b/static/universite-paris-nanterre/_custom.scss
index 120caa59..fc7ebd46 100644
--- a/static/universite-paris-nanterre/_custom.scss
+++ b/static/universite-paris-nanterre/_custom.scss
@@ -8,7 +8,7 @@
 div#header-wrapper {
 	div#header h1 {
 		padding-top: 40px;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-top: 80px;
 		}
 		a {
@@ -21,7 +21,7 @@ div#header-wrapper {
 			overflow: hidden;
 			text-indent: 400px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 			a {
@@ -43,7 +43,7 @@ div#nav {
 	& > ul {
 		margin-top: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
diff --git a/static/urville-nacqueville/_custom.scss b/static/urville-nacqueville/_custom.scss
index 3238502c..2ad38ac8 100644
--- a/static/urville-nacqueville/_custom.scss
+++ b/static/urville-nacqueville/_custom.scss
@@ -24,7 +24,7 @@ div#header, div#nav, div#main-content-wrapper {
 		top: 0;
 		width: 15px;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background: transparent;
 		&::before, &::after {
 			content: none;
@@ -76,7 +76,7 @@ h1#logo a {
 	color: white;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	div#header h1 {
 		padding-left: 20px;
 	}
diff --git a/static/venissieux/_custom.scss b/static/venissieux/_custom.scss
index dab19fdb..07ccdd72 100644
--- a/static/venissieux/_custom.scss
+++ b/static/venissieux/_custom.scss
@@ -12,7 +12,7 @@ nav {
 		max-width: $width;
 		margin: 0 auto;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: center;
 	}
 }
@@ -20,7 +20,7 @@ nav {
 #toplinks {
 	top: -6rem;
 	font-size: 20px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		top: -9.5rem;
 		font-size: 16px;
 	}
@@ -35,7 +35,7 @@ nav {
 			position: relative;
 			top: 5px;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			background: none;
 			height: auto;
@@ -56,7 +56,7 @@ nav {
 }
 
 div#header h1 {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: center;
 	}
 	padding: 2rem 0;
@@ -69,7 +69,7 @@ div#header h1 {
 div#section-une {
 	background-size: cover;
 	padding: 2rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 1rem;
 	}
 	&::after {
@@ -84,7 +84,7 @@ div#section-une {
 		width: 50%;
 		height: 100%;
 		padding: 2rem 4rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding: 1rem 0rem;
 			float: none;
 			width: auto;
@@ -97,7 +97,7 @@ div#section-une {
 		h2 {
 			position: absolute;
 			bottom: 1rem;
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport) {
 				position: static;
 			}
 			&::before {
@@ -108,13 +108,13 @@ div#section-une {
 				height: 3px;
 				position: relative;
 				top: -10px;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					content: none;
 				}
 			}
 			&::after {
 				content: none;
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport) {
 					content: "";
 				}
 			}
@@ -123,7 +123,7 @@ div#section-une {
 	div.cell {
 		float: right;
 		width: 25%;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			float: none;
 			width: auto;
 			margin: 1rem 0;
@@ -167,7 +167,7 @@ div#section-une {
 	}
 	form {
 		display: flex;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			display: block;
 			padding-bottom: 1rem;
 		}
diff --git a/static/villejuif/_custom.scss b/static/villejuif/_custom.scss
index 1eb6e655..f7e7bcb7 100644
--- a/static/villejuif/_custom.scss
+++ b/static/villejuif/_custom.scss
@@ -25,7 +25,7 @@ div#header {
                 left: 0;
         }
 
-        @media screen and (max-width: $mobile-limit) {
+        @media screen and ($max-mobile-viewport) {
                 height: $header-height +10px;
                 left: -78px;
         }
@@ -78,7 +78,7 @@ div#nav #nav-button + ul li.selected > a, div#nav #nav-button + ul li:hover > a
 #main-content {
 	background: white;
 	padding: 10px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 10px 0;
 	}
 }
diff --git a/static/villeneuve-les-maguelone/_custom.scss b/static/villeneuve-les-maguelone/_custom.scss
index 172c00fd..31354a46 100644
--- a/static/villeneuve-les-maguelone/_custom.scss
+++ b/static/villeneuve-les-maguelone/_custom.scss
@@ -13,7 +13,7 @@ div#header-wrapper {
 			text-indent: -1000px;
 			overflow: hidden;
 		}
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			padding-left: 0;
 			width: 100%;
 			a {
@@ -30,7 +30,7 @@ div#nav {
 	& > ul {
 		margin-top: 0;
 	}
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		text-align: left;
 	}
 }
diff --git a/static/villeurbanne-2018/_custom.scss b/static/villeurbanne-2018/_custom.scss
index 1088853d..8ef1ae75 100644
--- a/static/villeurbanne-2018/_custom.scss
+++ b/static/villeurbanne-2018/_custom.scss
@@ -41,7 +41,7 @@ div#nav {
 
 div.publik-container {
 	margin-top: 150px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		margin-top: 80px;
 	}
 }
@@ -49,7 +49,7 @@ div.publik-container {
 #main-content {
 	background: white;
 	padding: 10px;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0 0 10px 0;
 	}
 }
@@ -235,7 +235,7 @@ ul.account-management li {
 
 div.block {
 	flex-wrap: wrap;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0;
 	}
 }
@@ -278,7 +278,7 @@ div#login-page {
 
 div#fc-button {
 	box-shadow: 0 0 0;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		width: 220px;
 	}
 	a.button {
@@ -366,7 +366,7 @@ div#tracking-code {
 
 div.buttons {
 	> div {
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			float: none;
 		}
 	}
@@ -388,7 +388,7 @@ div.buttons {
 	}
 	div.cancel-button {
 		float: left;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			float: none;
 		}
 	}
diff --git a/static/vincennes-2018/_custom.scss b/static/vincennes-2018/_custom.scss
index e311e1b2..dabc88bb 100644
--- a/static/vincennes-2018/_custom.scss
+++ b/static/vincennes-2018/_custom.scss
@@ -10,7 +10,7 @@
 		text-transform: uppercase;
 		font-weight: normal;
 		font-size: 3rem;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			font-size: 2.3rem;
 			max-width: 100%;
 			white-space: pre;
@@ -30,7 +30,7 @@
 	bottom: 5px;
 }
 
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport) {
 	#header #top #logo {
 		padding-left: 0;
 		a {
-- 
2.20.1

