diff --git a/static/rouen/_custom.scss b/static/rouen/_custom.scss
index 91c6d57..0e5fd4f 100644
--- a/static/rouen/_custom.scss
+++ b/static/rouen/_custom.scss
@@ -83,7 +83,7 @@ div#rub_service h2, #toplinks {
 }
 
 div#header {
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		padding: 0;
 
 		h1 {
@@ -102,7 +102,7 @@ h1#logo a {
 	height: 2em;
 	text-indent: -9999px;
 
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		background-size: auto 0.7em;
 		background-position: 0.4em 0.42em;
 	}
@@ -242,7 +242,7 @@ button { font-weight: bold; }
 form.quixote div.widget { margin-bottom: 2em; }
 form.quixote div.widget div.widget { margin-bottom: inherit; }
 
-@media screen and (min-width: $mobile-limit) {
+@media screen and ($min-desktop-viewport) {
 	div#rub_service form.quixote, div#rub_service h2,
 	body.authentic #content, #messages {
 		max-width: 50rem;
@@ -325,7 +325,7 @@ div#content div.buttons.submit {
 	@include flexbox();
 	& div.submit-button { order: 1;	}
 
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		flex-direction: column;
 	}
 }
@@ -427,7 +427,7 @@ body.page-index #sidebar {
 	flex: inherit;
 	max-width: inherit;
 
-	@media screen and (min-width: $mobile-limit) {
+	@media screen and ($min-desktop-viewport) {
 		display: grid;
 		grid-gap: 1rem;
 		column-gap: 1rem;
@@ -526,7 +526,7 @@ body.page-index #sidebar {
 	.suivi, .en-cours, .creer-compte, .brouillons, .coffre-fort, .historique {
 		padding: 1rem;
 		background-color: #d8f0ea;
-		@media screen and (max-width: $mobile-limit) { margin-bottom: 1em; }
+		@media screen and ($max-mobile-viewport) { margin-bottom: 1em; }
 	}
 
 	.summary-count {
@@ -540,7 +540,7 @@ body.page-index #sidebar {
 }
 
 body.page-index #columns {
-	@media screen and (min-width: $mobile-limit) {
+	@media screen and ($min-desktop-viewport) {
 		display: grid;
 		grid-gap: 1rem 1rem;
 		column-gap: 1rem;
@@ -676,7 +676,7 @@ body.page-porte-doc {
 		tr.odd { background: #d8f0ea; }
 		tr.even { background: transparent; }
 
-		@media screen and (min-width: $mobile-limit) {
+		@media screen and ($min-desktop-viewport) {
 			a.icon-remove::before {	color: #c64a59; }
 			a.icon-remove { border-bottom: none; }
 
@@ -685,7 +685,7 @@ body.page-porte-doc {
 			th.title { padding: 0.5ex 1em; }
 		}
 
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			table, thead, tbody, th, td, tr { display: block; }
 
 			thead tr {
diff --git a/static/rouen/_side_block.scss b/static/rouen/_side_block.scss
index 3c8c3d1..c7794f3 100644
--- a/static/rouen/_side_block.scss
+++ b/static/rouen/_side_block.scss
@@ -14,7 +14,7 @@ div#tracking-code {
     text-align: center;
 
 	margin-bottom: 2rem;
-	@media screen and (max-width: $mobile-limit) {
+	@media screen and ($max-mobile-viewport) {
 		order: 0;
 		margin-bottom: 0;
 	}
@@ -43,7 +43,7 @@ div.tracking-code-part {
 		left: -3.3em;
 		top: 0;
 		background-size: contain;
-		@media screen and (max-width: $mobile-limit) {
+		@media screen and ($max-mobile-viewport) {
 			width: 4.3em;
 			left: -3.6em;
 		}