diff --git a/static/avray/_custom.scss b/static/avray/_custom.scss
index 8371ee4..909158f 100644
--- a/static/avray/_custom.scss
+++ b/static/avray/_custom.scss
@@ -21,7 +21,7 @@ header {
 				left: -1rem;
 				padding-left: 730px;
 
-				@media screen and (max-width: $mobile-limit) {
+				@media screen and ($max-mobile-viewport){
 					height: 75px;
 					padding-left: 0;
 					max-width: 90%;
@@ -188,7 +188,7 @@ nav {
 				background-color: $color-rubrique-social-aines;
 			}
 
-			@media screen and (max-width: $mobile-limit) {
+			@media screen and ($max-mobile-viewport){
 				ul > li > ul > li > a {
 					color: black !important;
 				}
@@ -552,7 +552,7 @@ div.wcscurrentformscell ul {
 }
 
 
-@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/concarneau/_custom.scss b/static/concarneau/_custom.scss
index 3056d3a..3f3e83c 100644
--- a/static/concarneau/_custom.scss
+++ b/static/concarneau/_custom.scss
@@ -449,7 +449,7 @@ body {
 }
 
 /* ajustements petits écrans (mobiles) */
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport){
 
 body #page {
     background: white;
diff --git a/static/coprec/_custom.scss b/static/coprec/_custom.scss
index e9a29f6..87febd0 100644
--- a/static/coprec/_custom.scss
+++ b/static/coprec/_custom.scss
@@ -136,7 +136,7 @@ div#services > ul > li > strong > a,
 }
 
 /* ajustements petits écrans (mobiles) */
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport){
 
 	#header-wrapper {
 
diff --git a/static/malakoff/_custom.scss b/static/malakoff/_custom.scss
index 7772438..27fed97 100644
--- a/static/malakoff/_custom.scss
+++ b/static/malakoff/_custom.scss
@@ -389,7 +389,7 @@ div#services > ul > li > strong > a,
 
 
 /* ajustements petits écrans (mobiles) */
-@media screen and (max-width: $mobile-limit) {
+@media screen and ($max-mobile-viewport){
 
 	#header-wrapper {