From d6fe96e72a01c271a43b791f084e267459d6f50a Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Fri, 9 Oct 2020 17:05:53 +0200
Subject: [PATCH] scss: introduce $max-nav-mobile-viewport &
 $min-nav-desktop-viewport (#47531)

---
 static/arles-2020/_custom.scss               |  2 +-
 static/bouches-du-rhone/_custom.scss         |  2 +-
 static/cinor/_custom.scss                    |  6 +--
 static/clermont-metropole/_custom.scss       |  2 +-
 static/entrouvert/_carrousel-references.scss |  2 +-
 static/entrouvert/_custom.scss               | 10 ++---
 static/essonne-cd91/_custom.scss             |  4 +-
 static/hautes-alpes-cd05-2020/_custom.scss   | 20 ++++-----
 static/includes/_carrousel.scss              |  4 +-
 static/includes/_nav.scss                    | 18 +++++---
 static/montreuil/_custom.scss                | 12 ++---
 static/pre-saint-gervais/_custom.scss        | 46 ++++++++++----------
 static/quimper/_custom.scss                  | 36 +++++++--------
 static/roannais-agglomeration/_custom.scss   | 16 +++----
 static/saint-chamond/_custom.scss            | 18 ++++----
 static/saint-denis/_custom.scss              |  2 +-
 static/signal-publik/_custom.scss            | 22 +++++-----
 static/thonon-agglomeration/_custom.scss     |  2 +-
 static/vendargues/_custom.scss               |  2 +-
 19 files changed, 116 insertions(+), 110 deletions(-)

diff --git a/static/arles-2020/_custom.scss b/static/arles-2020/_custom.scss
index 6d5d98f4..e91f436b 100644
--- a/static/arles-2020/_custom.scss
+++ b/static/arles-2020/_custom.scss
@@ -38,7 +38,7 @@ $mobile-header-height: 80px;
 }
 
 .gru-nav-wrapper {
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: -$nav-menu-side - 10px - 12px;
 	}
 }
diff --git a/static/bouches-du-rhone/_custom.scss b/static/bouches-du-rhone/_custom.scss
index aafc9065..a3ac0716 100644
--- a/static/bouches-du-rhone/_custom.scss
+++ b/static/bouches-du-rhone/_custom.scss
@@ -4,7 +4,7 @@
 	left: 15%;
 	top: 2rem;
 	z-index: 100;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		left: 5%;
 	}
 	#header {
diff --git a/static/cinor/_custom.scss b/static/cinor/_custom.scss
index 5101bf39..da408be9 100644
--- a/static/cinor/_custom.scss
+++ b/static/cinor/_custom.scss
@@ -108,7 +108,7 @@
 div.gru-nav > ul {
 	margin: 0;
 
-	@media (min-width: $nav-mobile-limit + 1) {
+	@media ($min-nav-desktop-viewport) {
 		text-align: center;
 	}
 
@@ -116,13 +116,13 @@ div.gru-nav > ul {
 		a {
 			text-transform: uppercase;
 			font-weight: 600;
-			@media (min-width: $nav-mobile-limit + 1) {
+			@media ($min-nav-desktop-viewport) {
 				padding-top: 0;
 			}
 		}
 	}
 
-	@media (min-width: $nav-mobile-limit + 1) {
+	@media ($min-nav-desktop-viewport) {
 		// separator
 		& > li:not(:first-child)::before {
 			content: "";
diff --git a/static/clermont-metropole/_custom.scss b/static/clermont-metropole/_custom.scss
index c8ec42c9..046b57db 100644
--- a/static/clermont-metropole/_custom.scss
+++ b/static/clermont-metropole/_custom.scss
@@ -165,7 +165,7 @@ div#header-top, div#footer {
 }
 
 #pwa-navigation {
-	@media screen and (min-width: $nav-mobile-limit - 1px) {
+	@media screen and ($min-nav-desktop-viewport) {
 		display: block;
 		position: fixed;
 		right: 0;
diff --git a/static/entrouvert/_carrousel-references.scss b/static/entrouvert/_carrousel-references.scss
index c8eedd8e..e1248eaa 100644
--- a/static/entrouvert/_carrousel-references.scss
+++ b/static/entrouvert/_carrousel-references.scss
@@ -125,7 +125,7 @@ div.carrousel-references-content {
 				content: "\f054";  // chevron-right;
 			}
 		}
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			display: none;
 		}
 	}
diff --git a/static/entrouvert/_custom.scss b/static/entrouvert/_custom.scss
index 43df3eb3..ba9235e9 100644
--- a/static/entrouvert/_custom.scss
+++ b/static/entrouvert/_custom.scss
@@ -37,7 +37,7 @@ a.pk-button:hover {
 		display: block;
 		margin-top: 7px;
 		text-indent: -10000px;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			height: 60px;
 			background-size: contain;
 		}
@@ -62,7 +62,7 @@ a.pk-button:hover {
 
 .page-index {
 	background: url('img/eo-background.png') left top repeat-x;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		background-image: none;
 	}
 }
@@ -116,7 +116,7 @@ div.gru-nav > ul > li a {
 div.gru-nav > ul {
 	border-top: 1px solid #ced0d5;
 	border-bottom: 1px solid #ced0d5;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		border-bottom: 0px solid white;
 	}
 }
@@ -182,7 +182,7 @@ div.references div.references-item div.references-item-image {
 	box-sizing: content-box;
 	padding: 20px 20px 0 0;
 	text-align: center;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		padding: 0;
 	}
 }
@@ -192,7 +192,7 @@ div.references div.references-item div.references-item-content {
 	padding-right: 20px;
 	box-sizing: content-box;
 	overflow: hidden;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		float: left;
 	}
 }
diff --git a/static/essonne-cd91/_custom.scss b/static/essonne-cd91/_custom.scss
index 23163be4..050bf466 100644
--- a/static/essonne-cd91/_custom.scss
+++ b/static/essonne-cd91/_custom.scss
@@ -41,7 +41,7 @@ div#nav {
 	text-transform: uppercase;
 
     // nav desktop only
-    @media (min-width: $nav-mobile-limit + 1) {
+    @media ($min-nav-desktop-viewport) {
         > ul {
             margin-bottom: 5px;
             // Item separator
@@ -60,7 +60,7 @@ div#nav {
         }
     }
     // nav mobile only
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		text-align: left;
 	}
 }
diff --git a/static/hautes-alpes-cd05-2020/_custom.scss b/static/hautes-alpes-cd05-2020/_custom.scss
index e3d1c3da..484db932 100644
--- a/static/hautes-alpes-cd05-2020/_custom.scss
+++ b/static/hautes-alpes-cd05-2020/_custom.scss
@@ -66,7 +66,7 @@ input, select, textarea {
 	#top {
 		display: flex;
 		flex-wrap: wrap;
-		@media (min-width: $nav-mobile-limit + 1) {
+		@media ($min-nav-desktop-viewport) {
 			flex-direction: column;
 			height: $header-height-desktop;
 		}
@@ -76,7 +76,7 @@ input, select, textarea {
 		background-color: $red;
 		flex: 0 0 100px;
 		padding: 10px;
-		@media (min-width: $nav-mobile-limit + 1) {
+		@media ($min-nav-desktop-viewport) {
 			flex: 1 0 100%;
 			width: 33.333%;
 			padding: 21px;
@@ -97,7 +97,7 @@ input, select, textarea {
 		text-transform: uppercase;
 		width: 66.666%;
 		flex: 0 0 100%;
-		@media (min-width: $nav-mobile-limit + 1) {
+		@media ($min-nav-desktop-viewport) {
 			flex: 1 0 auto;
 			display: flex;
 			align-items: center;
@@ -121,11 +121,11 @@ input, select, textarea {
 		line-height: 1.5;
 
 
-		@media (max-width: $nav-mobile-limit) {
+		@media ($max-nav-mobile-viewport) {
 			flex: 1 1 0;
 			margin-right: $header-height-mobile;
 		}
-		@media (min-width: $nav-mobile-limit + 1) {
+		@media ($min-nav-desktop-viewport) {
 			flex: 0 0 auto;
 		}
 
@@ -133,7 +133,7 @@ input, select, textarea {
 			display: block;
 			padding: 1em;
 
-			@media (max-width: $nav-mobile-limit) {
+			@media ($max-nav-mobile-viewport) {
 				padding: .33em 1em;
 			}
 
@@ -143,14 +143,14 @@ input, select, textarea {
 			display: inline-block;
 			color: #6e6e6e;
 			white-space: nowrap;
-			@media (max-width: $nav-mobile-limit + 1 ) {
+			@media ($max-nav-mobile-viewport) {
 				display: block;
 			}
 			// orange dash
 			@include dash($orange);
 
 			// sep
-			@media (min-width: $nav-mobile-limit + 1) {
+			@media ($min-nav-desktop-viewport) {
 				&:not(:last-child) {
 					&::after {
 						content: "";
@@ -168,7 +168,7 @@ input, select, textarea {
 			display: none;
 		}
 		.logged-in {
-			@media (max-width: $nav-mobile-limit) {
+			@media ($max-nav-mobile-viewport) {
 				max-width: calc(100vw - 100px - 60px);
 				a {
 					overflow: hidden;
@@ -202,7 +202,7 @@ div.gru-nav {
 }
 // Adapt to create a right-to-left nav
 @if $responsive-menu == left-to-right {
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	body {
 		border: none;
 	}
diff --git a/static/includes/_carrousel.scss b/static/includes/_carrousel.scss
index 4738062f..454bd824 100644
--- a/static/includes/_carrousel.scss
+++ b/static/includes/_carrousel.scss
@@ -71,7 +71,7 @@ div.carrousel-content {
 						padding: 1rem;
 						margin-left: 6rem;
 						margin-right: 6rem;
-						@media screen and (max-width: $nav-mobile-limit) {
+						@media screen and ($max-nav-mobile-viewport) {
 							margin-left: 2rem;
 							margin-right: 2rem;
 						}
@@ -153,7 +153,7 @@ div.carrousel-content {
 				content: "\f054";  // chevron-right;
 			}
 		}
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			display: none;
 		}
 	}
diff --git a/static/includes/_nav.scss b/static/includes/_nav.scss
index 681814a4..17a070f1 100644
--- a/static/includes/_nav.scss
+++ b/static/includes/_nav.scss
@@ -47,6 +47,12 @@ $nav-mobile-bottom-bar-item-selected-color: $nav-item-selected-color !default;
 $nav-mobile-bottom-bar-badge-color: white !default;
 $nav-mobile-bottom-bar-badge-background: #e22 !default;
 
+// custom media queries
+// 	@media ($max-nav-mobile-viewport) {}
+//	@media ($min-nav-desktop-viewport) {}
+$max-nav-mobile-viewport: "max-width: #{$nav-mobile-limit}";
+$min-nav-desktop-viewport: "min-width: #{min-desktop-viewport($nav-mobile-limit)}";
+
 
 @if $nav-full-width-background == true {
 	div.gru-nav-wrapper {
@@ -181,7 +187,7 @@ div.menucell {
 	span.badge::before { content: '('; }
 	span.badge::after { content: ')'; }
 	@if $nav-mobile-mode == bottom-bar {
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			span.badge::before { content: none; }
 			span.badge::after { content: none; }
 		}
@@ -189,7 +195,7 @@ div.menucell {
 }
 
 @if $nav-mobile-mode == hamburger {
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	@if $responsive-menu == left-to-right {
 		body {
 			border-left: 4px solid $nav-border-color;
@@ -349,7 +355,7 @@ div.menucell {
 	display: none;
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	.pwa-navigation {
 		display: block;
 	}
@@ -430,7 +436,7 @@ div.menucell {
 	@include pwa-bottom-bar;
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	.pwa-navigation ~ footer {
 		margin-bottom: $nav-mobile-bottom-bar-height;
 	}
@@ -438,7 +444,7 @@ div.menucell {
 
 
 @if $nav-mobile-mode == bottom-bar {
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	nav {
 		@include pwa-bottom-bar;
 	}
@@ -456,7 +462,7 @@ div.menucell {
 }
 
 @if $nav-mobile-mode == hidden {
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		nav {
 			display: none;
 		}
diff --git a/static/montreuil/_custom.scss b/static/montreuil/_custom.scss
index b2e661eb..11a520a7 100644
--- a/static/montreuil/_custom.scss
+++ b/static/montreuil/_custom.scss
@@ -3,7 +3,7 @@
 	background: $background-color;
 	border: 1px solid $border-color;
 	padding: 5px 10px;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		display: inline-block;
 		margin: 3px 1px;
 	}
@@ -50,7 +50,7 @@ div#header-wrapper {
 		font-family: FontAwesome;
 		margin-right: 5px;
 	}
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		right: 1.5em;
 		background: transparent;
 		> span:first-child::before {
@@ -59,7 +59,7 @@ div#header-wrapper {
 	}
 	span {
 		a {
-			@media screen and (max-width: $nav-mobile-limit) {
+			@media screen and ($max-nav-mobile-viewport) {
 				background: $secondary-color;
 				padding: 5px 10px;
 			}
@@ -68,7 +68,7 @@ div#header-wrapper {
 }
 
 div.gru-nav {
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		position: absolute;
 		top: 0;
 		z-index: 1;
@@ -79,7 +79,7 @@ div.gru-nav {
 	}
 	.gru-nav-button {
 		border-radius: 0;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			margin-left: 0;
 		}
 		& + ul {
@@ -91,7 +91,7 @@ div.gru-nav {
 	}
 	> ul {
 		> li a {
-			@media screen and (max-width: $nav-mobile-limit) {
+			@media screen and ($max-nav-mobile-viewport) {
 				font-size: 0.8em;
 				font-weight: normal;
 			}
diff --git a/static/pre-saint-gervais/_custom.scss b/static/pre-saint-gervais/_custom.scss
index af73aaee..d5062fa8 100644
--- a/static/pre-saint-gervais/_custom.scss
+++ b/static/pre-saint-gervais/_custom.scss
@@ -38,7 +38,7 @@
 %title {
 	@extend %title;
 	text-align: left;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 	}
 	font-weight: bold;
 }
@@ -57,7 +57,7 @@
 		margin-right: 10px;
 	}
 	font-size: 2.778rem;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		font-size: 2.222rem;
 		&::before {
 			content: none;
@@ -83,7 +83,7 @@ body {
 	position: fixed;
 	z-index: 1000;
 	width: 100%;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		left: 0px;  // no burger menu
 		width: 100%;
 		background: white;
@@ -103,12 +103,12 @@ div#site-title {
 		margin: 0 auto;
 		text-align: left;
 		padding-left: 150px;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding-left: 0;
 			text-align: center;
 		}
 	}
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		position: static;
 		padding-bottom: 10px;
 	}
@@ -116,7 +116,7 @@ div#site-title {
 
 div#search-top-wrapper {
 	margin-top: 130px;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: 0;
 	}
 }
@@ -129,7 +129,7 @@ div#shortcuts-top-wrapper {
 	div.shortcuts-top {
 		max-width: $width;
 		margin: 0 auto;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding: 1rem;
 		}
 	}
@@ -165,7 +165,7 @@ div#page div#shortcuts-top-wrapper {
 	margin-top: 40px;
 	padding-top: 2rem;
 	padding-bottom: 2rem;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		text-align: center;
 	}
 	h2 {
@@ -199,7 +199,7 @@ div#page div#shortcuts-top-wrapper {
 		text-align: center;
 		font-weight: bold;
 		color: white;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			margin: 0 auto 1rem auto;
 		}
 		div {
@@ -230,7 +230,7 @@ div#page div#shortcuts-top-wrapper {
 
 div#page div#main-content-wrapper {
 	margin-top: 130px;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: 80px;
 	}
 }
@@ -241,7 +241,7 @@ div#page div#main-content-wrapper {
 	color: white;
 	height: 48px;
 	text-transform: uppercase;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		background: transparent;
 	}
 	#header {
@@ -258,7 +258,7 @@ div#page div#main-content-wrapper {
 			background: url(img/logo.png) top left no-repeat;
 			text-indent: -10000px;
 		}
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			h1 {
 				padding-left: calc(50vw - 30px);
 			}
@@ -345,7 +345,7 @@ div#page div#main-content-wrapper {
 				}
 			}
 		}
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			a {
 				display: none;
 				&.login,
@@ -371,7 +371,7 @@ div.gru-nav > ul {
 	margin-top: 0;
 	margin-bottom: 1rem;
 	margin-left: 120px;  // logo overflowing
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-left: 0;
 		box-shadow: none;
 	}
@@ -397,7 +397,7 @@ body.scrolled div.gru-nav > ul {
 	box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	div#nav {
 		margin-top: 5px;
 	}
@@ -451,7 +451,7 @@ body.has-picture nav::after {
 	position: static;
 	margin-top: 160px;
 	margin-bottom: 20px;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: 60px;
 	}
 }
@@ -507,7 +507,7 @@ div#footer {
 div#form-page {
 	position: relative;
 	margin-top: 1rem;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: 0;
 	}
 	div#gauche {
@@ -517,7 +517,7 @@ div#form-page {
 		position: absolute;
 		top: 0;
 		left: 0;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			width: auto;
 			position: static;
 			margin-bottom: 1rem;
@@ -525,7 +525,7 @@ div#form-page {
 	}
 	&.with-sidebar {
 		padding-left: 460px;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding-left: 0;
 		}
 	}
@@ -541,7 +541,7 @@ div#form-page {
 
 	#title-section {
 		padding-top: 1rem;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding-top: 0;
 		}
 		h1 {
@@ -690,7 +690,7 @@ div.a2-block {
 		font-size: 2.222rem;
 		color: black;
 	}
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: 1rem;
 	}
 }
@@ -711,7 +711,7 @@ div.a2-block {
 			background: $pink;
 		}
 	}
-	@media screen and (min-width: $nav-mobile-limit - 1px) {
+	@media screen and ($min-nav-desktop-viewport) {
 		box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
 		display: block;
 		top: 200px;
@@ -827,7 +827,7 @@ div.textcell {
 			content: none;
 		}
 		padding-left: 3rem;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding-left: 2rem;
 		}
 	}
diff --git a/static/quimper/_custom.scss b/static/quimper/_custom.scss
index 23debbf8..97ec592c 100644
--- a/static/quimper/_custom.scss
+++ b/static/quimper/_custom.scss
@@ -22,7 +22,7 @@ button::-moz-focus-inner {
 #header-wrapper {
 	background: $primary-color;
 	height: 100px;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		position: fixed;
 		top: 0;
 		left: 0;
@@ -33,7 +33,7 @@ button::-moz-focus-inner {
 }
 
 div#header {
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		h1 {
 			padding-left: 90px;
 		}
@@ -44,7 +44,7 @@ div#header {
 		height: 100px;
 		display: block;
 		text-indent: -10000px;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			float: right;
 			height: $mobile-header-height - 10px;
 			margin-top: 5px;
@@ -95,7 +95,7 @@ div#header {
 }
 
 div.gru-nav-wrapper {
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		position: fixed;
 		width: 100%;
 		pointer-events: none;
@@ -148,7 +148,7 @@ div.gru-nav-wrapper {
 
 div#main-content-wrapper {
 	margin-top: 1rem;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: $mobile-header-height;
 		#columns {
 			padding: 1rem;
@@ -174,7 +174,7 @@ a.big-image-link {
 	div {
 		background: white url(img/plus.svg) right 0.5rem bottom 0.5rem no-repeat;
 		background-size: 25px 25px;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			background-size: 20px;
 		}
 		padding: 1rem;
@@ -189,7 +189,7 @@ a.big-image-link {
 		}
 	}
 	margin-bottom: 2rem;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-bottom: 1rem;
 		height: 160px;
 		padding-top: 0;
@@ -250,7 +250,7 @@ a.image-link {
 		position: relative;
 		background: white url(img/plus.svg) right 0.5rem bottom 0.5rem no-repeat;
 		background-size: 25px 25px;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			background-size: 20px;
 		}
 		padding: 1rem;
@@ -268,7 +268,7 @@ a.image-link {
 
 
 footer {
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		#footer-wrapper {
 			margin-top: 0;
 			padding-top: 0;
@@ -290,7 +290,7 @@ footer {
 	}
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	div.gru-nav .gru-nav-button {
 		& .icon-bar {
 			left: 30px;
@@ -329,7 +329,7 @@ div.gru-content div.cell.trackingcodeinputcell {
 	color: white;
 	div.wcs-tracking-code-input {
 		display: flex;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			display: block;
 		}
 		h2 {
@@ -338,7 +338,7 @@ div.gru-content div.cell.trackingcodeinputcell {
 			color: white;
 			max-width: 11ex;
 			text-align: right;
-			@media screen and (max-width: $nav-mobile-limit) {
+			@media screen and ($max-nav-mobile-viewport) {
 				font-size: 1rem;
 				max-width: none;
 				text-align: left;
@@ -350,7 +350,7 @@ div.gru-content div.cell.trackingcodeinputcell {
 			border-left: 1px solid white;
 			padding-left: 1rem;
 			max-width: 30ex;
-			@media screen and (max-width: $nav-mobile-limit) {
+			@media screen and ($max-nav-mobile-viewport) {
 				display: none;
 			}
 		}
@@ -359,7 +359,7 @@ div.gru-content div.cell.trackingcodeinputcell {
 			text-align: right;
 			margin: 0;
 			padding: 1rem;
-			@media screen and (max-width: $nav-mobile-limit) {
+			@media screen and ($max-nav-mobile-viewport) {
 				display: flex;
 			}
 			input {
@@ -388,7 +388,7 @@ div.title label {
 	> div {
 		padding: 0;
 	}
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin: 0 -1rem;
 	}
 	h2 {
@@ -643,7 +643,7 @@ div#rub_service form[action="."] {  // target form pages
 div#gauche, div#rub_service {
 	margin-top: 0;
 	background: transparent;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: -1rem;
 		margin-left: -1rem;
 		margin-right: -1rem;
@@ -653,7 +653,7 @@ div#gauche, div#rub_service {
 
 div#rub_service.has-sidebox > h2 {
 	padding-left: 0.5rem;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		display: none;
 	}
 }
@@ -766,7 +766,7 @@ div.parkings {
 	}
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	div.tracking-code-part {
 		background: #d5d5d5;
 	}
diff --git a/static/roannais-agglomeration/_custom.scss b/static/roannais-agglomeration/_custom.scss
index f38bf1fa..c70dd3c7 100644
--- a/static/roannais-agglomeration/_custom.scss
+++ b/static/roannais-agglomeration/_custom.scss
@@ -8,7 +8,7 @@ body {
 	padding-top: 0;
 	padding-bottom: 0;
 	height: 0;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		height: auto;
 		padding-top: 0px;
 	}
@@ -23,11 +23,11 @@ body {
 			width: 180px;
 			height: 40px;
 			text-indent: -10000px;
-			@media screen and (max-width: $nav-mobile-limit) {
+			@media screen and ($max-nav-mobile-viewport) {
 				height: 55px;
 			}
 		}
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding-top: 40px;
 			padding-left: 0;
 			a {
@@ -48,7 +48,7 @@ body {
 		border: none;
 		background: none;
 		box-shadow: none;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding-top: 2px;
 		}
 	}
@@ -119,7 +119,7 @@ div.comment-field {
 	background: rgba(231, 39, 32, 0.8);
 	padding: 0.5rem 2rem;
 	color: white;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		padding: 0.5rem 0.5rem;
 		position: static;
 		width: auto;
@@ -127,7 +127,7 @@ div.comment-field {
 	h2 {
 		font-size: 2rem;
 		color: white;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			font-size: 1.333rem;
 		}
 	}
@@ -172,7 +172,7 @@ div.buttons button {
 div#gauche {
 	width: 15%;
 	text-align: center;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		width: auto;
 		margin-top: 0;
 	}
@@ -221,7 +221,7 @@ div.cancel-button {
 	}
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	body.has-picture nav::after {
 		height: 200px;
 	}
diff --git a/static/saint-chamond/_custom.scss b/static/saint-chamond/_custom.scss
index bb5bd704..79600546 100644
--- a/static/saint-chamond/_custom.scss
+++ b/static/saint-chamond/_custom.scss
@@ -4,11 +4,11 @@ $dashboard-slugs: accueil, mon-compte, mes-demandes, mon-association, mon-commer
 	background: $blue;
 	padding-top: 25px;
 	padding-bottom: 40px;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		padding-top: 0;
 	}
 	h1#logo {
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding-top: 50px;
 			padding-left: 0;
 			text-align: center;
@@ -72,21 +72,21 @@ nav ul {
 #sidebar {
 	box-sizing: content-box;
 	padding-right: 40px;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		padding-right: 0;
 	}
 }
 
 #left {
 	width: calc(100% - 250px);
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		width: auto;
 	}
 }
 
 #right {
 	width: 250px;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		clear: both;
 		width: auto;
 	}
@@ -126,7 +126,7 @@ div.infonotice {
 	background: rgba(42, 139, 231, 0.8);
 	padding: 0.5rem 2rem;
 	color: white;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		padding: 0.5rem 0.5rem;
 		position: static;
 		width: auto;
@@ -134,7 +134,7 @@ div.infonotice {
 	h2 {
 		font-size: 2rem;
 		color: white;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			font-size: 1.333rem;
 		}
 	}
@@ -186,7 +186,7 @@ div.buttons button {
 div#gauche {
 	width: 15%;
 	text-align: center;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		width: auto;
 		margin-top: 0;
 	}
@@ -246,7 +246,7 @@ div.cancel-button {
 	}
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	body.has-picture nav::after {
 		height: 200px;
 	}
diff --git a/static/saint-denis/_custom.scss b/static/saint-denis/_custom.scss
index 680830f2..d6aafd17 100644
--- a/static/saint-denis/_custom.scss
+++ b/static/saint-denis/_custom.scss
@@ -70,7 +70,7 @@ body.has-picture nav::after {
 div#footer-wrapper {
 	background: url(img/footer-fond.png) no-repeat center 0 $footer-background;
 	div.no-mobile {
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			display: none;
 		}
 	}
diff --git a/static/signal-publik/_custom.scss b/static/signal-publik/_custom.scss
index 648aea01..3081b9db 100644
--- a/static/signal-publik/_custom.scss
+++ b/static/signal-publik/_custom.scss
@@ -95,7 +95,7 @@ nav {
 			letter-spacing: -1px;
 		}
 	}
-	@media screen and (min-width: $nav-mobile-limit + 1px) {
+	@media screen and ($min-nav-desktop-viewport) {
 		display: block;
 		max-width: $width;
 		margin: auto;
@@ -122,7 +122,7 @@ nav {
 }
 
 div.gru-nav-wrapper {
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		position: fixed;
 		width: 100%;
 		pointer-events: none;
@@ -200,7 +200,7 @@ div#main-content-wrapper {
 			}
 		}
 	}
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		#columns {
 			padding: 1rem;
 			padding-bottom: 0;
@@ -313,7 +313,7 @@ footer {
 	.liens {
 		float: right;
 	}
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		#footer-wrapper {
 			padding-bottom: 0;
 		}
@@ -411,7 +411,7 @@ div.hint {
 }
 
 #columns div#login-page > div.block {
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		background: transparent;
 		> div {
 			padding: 0;
@@ -585,7 +585,7 @@ div#rub_service form[action="."] {  // target form pages
 div#gauche, div#rub_service {
 	margin-top: 0;
 	background: white;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		margin-top: -1rem;
 		margin-left: -1rem;
 		margin-right: -1rem;
@@ -596,7 +596,7 @@ div#gauche, div#rub_service {
 
 div#rub_service.has-sidebox > h2 {
 	padding-left: 0.5rem;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		display: none;
 	}
 }
@@ -628,13 +628,13 @@ div#rub_service {
 		position: absolute;
 		right: 0;
 		top: 0px;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			position: static;
 		}
 	}
 	div#receipt-intro {
 		padding-top: 1px;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding-top: 0;
 			margin-left: 0;
 			margin-right: 0;
@@ -643,7 +643,7 @@ div#rub_service {
 	div#summary,
 	div#evolution-log {
 		padding: 0 1rem;
-		@media screen and (max-width: $nav-mobile-limit) {
+		@media screen and ($max-nav-mobile-viewport) {
 			padding: 0;
 		}
 		h2:first-child {
@@ -749,7 +749,7 @@ div.back-home-button {
 	display: none;
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	div.cell.map {
 		div.combo-cell-map.leaflet-container {
 			height: calc(100vh - #{$mobile-header-height} - #{$nav-mobile-bottom-bar-height} - 2rem);
diff --git a/static/thonon-agglomeration/_custom.scss b/static/thonon-agglomeration/_custom.scss
index e62b8a96..44b69b2d 100644
--- a/static/thonon-agglomeration/_custom.scss
+++ b/static/thonon-agglomeration/_custom.scss
@@ -22,7 +22,7 @@ h1#logo a {
 	text-indent: -9999px;
 }
 
-@media screen and (max-width: $nav-mobile-limit) {
+@media screen and ($max-nav-mobile-viewport) {
 	h1#logo {
 		padding-top: 40px;
 	}
diff --git a/static/vendargues/_custom.scss b/static/vendargues/_custom.scss
index 941ee2b1..dde6a37a 100644
--- a/static/vendargues/_custom.scss
+++ b/static/vendargues/_custom.scss
@@ -21,7 +21,7 @@ nav {
 
 #footer-wrapper {
 	background: $footer-background url(img/tache_jaune.png) 5% 30% no-repeat;
-	@media screen and (max-width: $nav-mobile-limit) {
+	@media screen and ($max-nav-mobile-viewport) {
 		background: $footer-background;
 	}
 	a {
-- 
2.20.1

