From 540a7c359da90cc0afb4468ec1923f780533b2bf Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Wed, 29 Apr 2020 16:17:26 +0200
Subject: [PATCH] CSS: remove vendor prefixed flexbox properties (#42287)

---
 static/alpes-maritimes-2018/_custom.scss      | 32 +++++-------
 static/amiens-metropole/_footer.scss          |  2 +-
 static/amiens-metropole/_forms.scss           | 32 ++++++------
 static/amiens-metropole/_header.scss          | 40 +++++++-------
 static/amiens-metropole/_layout.scss          | 18 +++----
 static/blois-2018/_custom.scss                |  2 -
 static/dreux/_custom.scss                     |  4 +-
 static/fontenay-sous-bois-2018/_custom.scss   |  9 ----
 static/grandlyon-sau/_categorie-demande.scss  | 42 +++++++--------
 static/grandlyon-sau/_custom.scss             | 32 ++++++------
 static/grenoble-metropole-2019/_custom.scss   | 24 ++++-----
 static/hautes-alpes-2018/_circle-steps.scss   | 20 +++----
 static/hautes-alpes-2018/_custom.scss         | 52 +++++++++----------
 .../hautes-alpes-2018/_neutral-variant.scss   | 12 ++---
 static/includes/_cells.scss                   | 12 -----
 static/includes/_forms.scss                   |  5 --
 static/includes/_layout.scss                  | 18 -------
 static/includes/wcs/_nearby-form.scss         |  7 ---
 static/includes/wcs/_steps.scss               | 16 ------
 static/metz-metropole-2019/_custom.scss       | 23 --------
 static/meyzieu-2018/_custom.scss              | 28 +++++-----
 static/montlouis-sur-loire/_custom.scss       |  2 -
 static/portal-agent/css/agent-portal.scss     |  2 -
 static/publik/_custom.scss                    |  2 -
 static/saone-et-loire-cd71-2019/_custom.scss  |  3 --
 static/toodego/_forms.scss                    |  4 --
 static/toodego/_specialpages.scss             |  4 --
 static/toodego/_tiles.scss                    |  3 --
 static/tours-metropole/_custom.scss           |  5 +-
 static/venissieux/_custom.scss                |  1 -
 static/villeurbanne-2018/_custom.scss         |  2 +-
 31 files changed, 167 insertions(+), 291 deletions(-)

diff --git a/static/alpes-maritimes-2018/_custom.scss b/static/alpes-maritimes-2018/_custom.scss
index 27891751..fa20e4b9 100644
--- a/static/alpes-maritimes-2018/_custom.scss
+++ b/static/alpes-maritimes-2018/_custom.scss
@@ -109,7 +109,6 @@ div.departement {
 
 div#header-wrapper {
 	display: flex;
-	display: -ms-flexbox;
 	padding: 0 2ex;
 	background: #fff;
 }
@@ -161,13 +160,12 @@ div.homepage-container {
 	}
 	div.homepage-suggestions, div.events, div.homepage-prefooter-body, div.homepage-quote, div.homepage-search {
 		display: flex;
-		display: -ms-flexbox;
-		@include vendor-prefix(justify-content, center);
-		@include vendor-prefix(align-items, center);
-		@include vendor-prefix(flex-wrap, wrap);
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
 	}
 	div.homepage-search {
-		@include vendor-prefix(align-items, flex-start);
+		align-items: flex-start;
 		div.searchcell {
 			padding: 0;
 		}
@@ -533,24 +531,21 @@ div#social-steps ol {
 
 div#social-steps ol {
 	display: flex;
-	display: -ms-flex;
 	padding: 0 1em;
-	@include vendor-prefix(justify-content, center);
+	justify-content: center;
 	li {
 		min-width: 15%;
 		list-style-type: none;
 		margin: 0 1.5em;
 		display: flex;
-		display: -ms-flex;
-		@include vendor-prefix(justify-content, flex-start);
-		@include vendor-prefix(align-items, center);
-		@include vendor-prefix(flex-direction, column);
+		justify-content: flex-start;
+		align-items: center;
+		flex-direction: column;
 		span {
 			&.marker {
 				display: flex;
-				display: -ms-flex;
-				@include vendor-prefix(justify-content, center);
-				@include vendor-prefix(align-items, center);
+				justify-content: center;
+				align-items: center;
 				@media screen and ($max-mobile-viewport) {
 					font-size: 100%;
 					background: #fff;
@@ -926,10 +921,9 @@ div.cell {
 		div.dossiers, div.mes-dossiers {
 			padding: 2ex 0;
 			display: flex;
-			display: -ms-flexbox;
-			@include vendor-prefix(justify-content, space-around);
-			@include vendor-prefix(align-items, center);
-			@include vendor-prefix(flex-wrap, wrap);
+			justify-content: space-around;
+			align-items: center;
+			flex-wrap: wrap;
 		}
 		div.mes-dossiers {
 			a.dossier-autonomie, a.dossier-handicap {
diff --git a/static/amiens-metropole/_footer.scss b/static/amiens-metropole/_footer.scss
index 1bcfb9f6..73f4c6ea 100644
--- a/static/amiens-metropole/_footer.scss
+++ b/static/amiens-metropole/_footer.scss
@@ -1,5 +1,5 @@
 footer {
-	@include flex(0 1 1);
+	flex: 0 1 1;
 	height: 210px;
 	width: 100%;
 
diff --git a/static/amiens-metropole/_forms.scss b/static/amiens-metropole/_forms.scss
index bf82fe7d..6be8abed 100644
--- a/static/amiens-metropole/_forms.scss
+++ b/static/amiens-metropole/_forms.scss
@@ -103,10 +103,10 @@
 	.cell.trackingcodeinputcell .wcs-tracking-code-input {
 		@extend %wcs-form;
 		@extend %default-block;
-		@include flexbox();
-		@include justify-content(center);
-		@include flex-direction(column);
-		@include vendor-prefix(align-items, center);
+		display: flex;
+		justify-content: center;
+		flex-direction: column;
+		align-items: center;
 		margin: 0 auto;
 		overflow: auto;
 		padding: 10px 20px;
@@ -144,8 +144,8 @@
 	max-width: $width;
 
 	#columns {
-		@include flexbox();
-		@include justify-content(space-between);
+		display: flex;
+		justify-content: space-between;
 
 		margin: 0 auto;
 		width: 100%;
@@ -154,12 +154,12 @@
 		// inside the div resides the form and its title
 		#gauche, #rub_service {
 			@extend %wcs-form;
-			@include flex(1 1 0);
+			flex: 1 1 0;
 			padding: 1em;
 
 			&.has-sidebox {
-				@include flex(2 1 0);
-				@include order(0);
+				flex: 2 1 0;
+				order: 0;
 				float: none;
 			}
 		}
@@ -188,8 +188,8 @@
 
 		#gauche {
 			@extend %one-third;
-			@include flex(1 1 0);
-			@include order(1);
+			flex: 1 1 0;
+			order: 1;
 			margin: 0;
 			float: none;
 			background: white;
@@ -215,21 +215,21 @@
 
 @media screen and ($min-desktop-viewport) {
 	#page #main-content-wrapper #main-content #content #columns {
-		@include flex-direction(row);
+		flex-direction: row;
 	}
 }
 
 @media screen and ($max-mobile-viewport) {
 	#page #main-content-wrapper #main-content #content #columns {
-		@include flex-direction(column);
+		flex-direction: column;
 
 		#gauche {
-			@include order(0);
+			order: 0;
 			width: 100%;
 			padding: 0;
 
 			#tracking-code {
-				@include order(0);
+				order: 0;
 				padding: 1em;
 
 				a {
@@ -239,7 +239,7 @@
 		}
 
 		.has-sidebox {
-			@include order(1);
+			order: 1;
 			width: 100%;
 			padding: 0;
 		}
diff --git a/static/amiens-metropole/_header.scss b/static/amiens-metropole/_header.scss
index 08f1bd9f..b2435aef 100644
--- a/static/amiens-metropole/_header.scss
+++ b/static/amiens-metropole/_header.scss
@@ -2,7 +2,7 @@
 $header-content-margin: 5px;
 
 .site-header {
-	@include flex(0 1 0);
+	flex: 0 1 0;
 
 	background: $primary-color;
 
@@ -10,9 +10,9 @@ $header-content-margin: 5px;
 		padding: 0;
 
 		#top {
-			@include flexbox();
-			@include vendor-prefix(flex-wrap, nowrap);
-			@include justify-content(space-between);
+			display: flex;
+			flex-wrap: nowrap;
+			justify-content: space-between;
 
 			margin: auto; // allow #top to be horizontally center within the header bar
 			max-width: $column-width;
@@ -31,17 +31,17 @@ $header-content-margin: 5px;
 }
 
 .top-left {
-	@include vendor-prefix(align-self, flex-start);
-	@include order(0);
-	@include flexbox();
-	@include vendor-prefix(flex-wrap, nowrap);
+	align-self: flex-start;
+	order: 0;
+	display: flex;
+	flex-wrap: nowrap;
 
 	height: $header-height;
 }
 
 #site-title {
-	@include flex(1 1 0);
-	@include vendor-prefix(align-self, center);
+	flex: 1 1 0;
+	align-self: center;
 
 	margin: $header-content-margin;
 
@@ -76,8 +76,8 @@ $header-content-margin: 5px;
 }
 
 #toplinks {
-	@include vendor-prefix(align-self, flex-end);
-	@include order(1);
+	align-self: flex-end;
+	order: 1;
 	position: relative;
 	right: unset;
 	left: unset;
@@ -90,9 +90,9 @@ $header-content-margin: 5px;
 
 	.logged-in,
 	.login {
-		@include flexbox();
-		@include justify-content(center);
-		@include vendor-prefix(align-items, center);
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		text-align: center;
 		// flexbug 2 on IE11 (https://github.com/philipwalton/flexbugs#flexbug-2)
 		max-width: 100%;
@@ -107,7 +107,7 @@ $header-content-margin: 5px;
 		}
 
 		a {
-			@include flex(1 1 50%);
+			flex: 1 1 50%;
 			color: white;
 			font-weight: bold;
 			height: $header-height;
@@ -175,7 +175,7 @@ $header-content-margin: 5px;
 		height: $header-height;
 
 		#header #top {
-			@include flex-direction(row);
+			flex-direction: row;
 
 			#toplinks {
 				width: (100 / 3 + 0%);
@@ -189,12 +189,12 @@ $header-content-margin: 5px;
 		height: $header-height * 2;
 
 		#header #top {
-			@include flex-direction(column);
-			@include justify-content(space-around);
+			flex-direction: column;
+			justify-content: space-around;
 
 			#toplinks,
 			.top-left {
-				@include vendor-prefix(align-self, stretch);
+				align-self: stretch;
 				max-width: 100%;
 			}
 
diff --git a/static/amiens-metropole/_layout.scss b/static/amiens-metropole/_layout.scss
index 2c610b48..faeda5ba 100644
--- a/static/amiens-metropole/_layout.scss
+++ b/static/amiens-metropole/_layout.scss
@@ -19,7 +19,7 @@
 }
 
 .pull-right {
-	@include flex(1 1 0);
+	flex: 1 1 0;
 	margin-left: auto;
 }
 
@@ -27,18 +27,18 @@
 	max-width: $width;
 
 	.inside-content {
-		@include flexbox();
-		@include justify-content(space-between);
+		display: flex;
+		justify-content: space-between;
 		margin: 0 auto;
 		max-width: $column-width;
 
 		&.three-columns {
-			@include flex-direction(row);
+			flex-direction: row;
 			margin-top: 2em;
 
 			.column {
 				// IE11 workaround for https://github.com/philipwalton/flexbugs#flexbug-4
-				@include flex(1 1 100px);
+				flex: 1 1 100px;
 				width: (100/3 + 0%);
 				padding: 5px 15px;
 			}
@@ -47,15 +47,15 @@
 }
 
 #content {
-	@include flex-direction(row);
+	flex-direction: row;
 }
 
 body.has-picture, .page-index #content {
-	@include flex-direction(column);
+	flex-direction: column;
 }
 
 #main-content-wrapper {
-	@include flex(1 1 0);
+	flex: 1 1 0;
 
 	#main-content {
 		width: 100%;
@@ -74,7 +74,7 @@ body.has-picture, .page-index #content {
 	#content .wide-container .three-columns.inside-content {
 		// IE11 workaround https://github.com/philipwalton/flexbugs#flexbug-14
 		// avoid flex-direction: column to ignore container height to fit fit its contents
-		@include vendor-prefix(flex-flow, wrap);
+		flex-flow: wrap;
 		.column {
 			max-width: 100%;
 			min-width: 100%;
diff --git a/static/blois-2018/_custom.scss b/static/blois-2018/_custom.scss
index a6aeb26b..7fee8f0c 100644
--- a/static/blois-2018/_custom.scss
+++ b/static/blois-2018/_custom.scss
@@ -85,8 +85,6 @@ div#header {
 
 	div#top {
 		background: url(img/bandeau.jpeg) top right no-repeat;
-		-ms-flex: 1 auto;
-		-webkit-flex-grow: 1;
 		flex-grow: 1;
 		height: $header-height;
 		text-align: center;
diff --git a/static/dreux/_custom.scss b/static/dreux/_custom.scss
index cd640248..db028d92 100644
--- a/static/dreux/_custom.scss
+++ b/static/dreux/_custom.scss
@@ -31,8 +31,8 @@ div#toplinks {
 }
 
 div.buttons.submit {
-	@include flexbox();
-	@include justify-content(space-between);
+	display: flex;
+	justify-content: space-between;
 	div.submit-button {
 		order: 3;
 		flex-grow: 1;
diff --git a/static/fontenay-sous-bois-2018/_custom.scss b/static/fontenay-sous-bois-2018/_custom.scss
index 3b3d4e63..4d175df8 100644
--- a/static/fontenay-sous-bois-2018/_custom.scss
+++ b/static/fontenay-sous-bois-2018/_custom.scss
@@ -251,15 +251,12 @@ div#sidebar {
 	}
 	form {
 		margin-left: 0;
-		display: -ms-flexbox;
 		display: flex;
-		-ms-flex-wrap: wrap;
 		flex-wrap: wrap;
 		p {
 			width: 100%;
 		}
 		input {
-			-ms-flex: 1;
 			flex: 1;
 			margin-right: 2rem;
 			@media screen and ($max-mobile-viewport) {
@@ -331,11 +328,8 @@ div#content {
 			background: transparent center left no-repeat;
 			height: 80px;
 			margin: 0;
-			display: -ms-flexbox;
 			display: flex;
-			-ms-flex-direction: column;
 			flex-direction: column;
-			-ms-justify-content: center;
 			justify-content: center;
 			padding-left: 80px;
 			text-align: left;
@@ -466,15 +460,12 @@ div#rub_service {
 		text-transform: none;
 	}
 	form div.buttons {
-		display: -ms-flexbox;
 		display: flex;
-		-ms-justify-content: space-between;
 		justify-content: space-between;
 		button {
 			margin-right: 0;
 		}
 		.submit-button {
-			-ms-order: 2;
 			order: 2;
 		}
 		.cancel-button button {
diff --git a/static/grandlyon-sau/_categorie-demande.scss b/static/grandlyon-sau/_categorie-demande.scss
index c843e1be..1d1c67e0 100644
--- a/static/grandlyon-sau/_categorie-demande.scss
+++ b/static/grandlyon-sau/_categorie-demande.scss
@@ -7,10 +7,10 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
 					div > ul > li {
 					display: none;
 					&.selected {
-						@include flexbox();
-						@include flex-direction(row);
+						display: flex;
+						flex-direction: row;
 						@media screen and ($max-mobile-viewport) {
-							@include flex-direction(column);
+							flex-direction: column;
 						}
 					}
 				}
@@ -19,8 +19,8 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
 		div {
 			// list of top level categories
 			> ul {
-				@include flexbox();
-				@include flex-direction(column);
+				display: flex;
+				flex-direction: column;
 				> li {
 					@extend %homepage-block-color;
 					margin-bottom: 4px;
@@ -40,8 +40,8 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
 					}
 					// list of sub-categories
 					ul {
-						@include flexbox();
-						@include flex-direction(column);
+						display: flex;
+						flex-direction: column;
 						@extend %homepage-block-color;
 						&:hover {
 							@extend %homepage-block-hover;
@@ -109,29 +109,29 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
 			@media screen and ($min-desktop-viewport) {
 				> ul {
 					> li {
-						@include flexbox();
-						@include flex-direction(row);
+						display: flex;
+						flex-direction: row;
 						border-left: 5px solid $body-background;
 
 						&:hover {
 							border-left: $menucell-hover-border;
 						}
 						a {
-							@include vendor-prefix(flex-grow, 1);
+							flex-grow: 1;
 							margin-top: auto;
 							margin-bottom: auto;
 						}
 						ul {
-							@include vendor-prefix(flex-grow, 1);
-							@include vendor-prefix(flex-basis, 70%);
-							@include flex-direction(row);
-							@include justify-content(flex-end);
-							@include vendor-prefix(flex-wrap, nowrap);
+							flex-grow: 1;
+							flex-basis: 70%;
+							flex-direction: row;
+							justify-content: flex-end;
+							flex-wrap: nowrap;
 							margin-left: auto;
 							li {
-								@include flexbox();
-								@include flex-direction(row);
-								@include vendor-prefix(flex-basis, 10em);
+								display: flex;
+								flex-direction: row;
+								flex-basis: 10em;
 								border-left: 4px solid $cell-background;
 								border-right: 0;
 								border-bottom: 0;
@@ -167,10 +167,10 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
 		&.categorie-demandes div > ul > li {
 			display: none;
 			&.selected {
-				@include flexbox();
-				@include flex-direction(column);
+				display: flex;
+				flex-direction: column;
 				@media screen and ($min-desktop-viewport) {
-					@include flex-direction(row);
+					flex-direction: row;
 				}
 			}
 		}
diff --git a/static/grandlyon-sau/_custom.scss b/static/grandlyon-sau/_custom.scss
index 304020db..a9ca09bd 100644
--- a/static/grandlyon-sau/_custom.scss
+++ b/static/grandlyon-sau/_custom.scss
@@ -74,7 +74,7 @@ div#header-wrapper {
 div#main-content-wrapper {
 	margin: 2ex auto;
 	div#content {
-		@include vendor-prefix(align-items, flex-start);
+		align-items: flex-start;
 	}
 	div#columns {
 		padding: 1em;
@@ -190,11 +190,11 @@ div.cell > div {
 				float: none;
 			}
 			.buttons {
-				@include flexbox();
-				@include vendor-prefix(justify-content, center);
+				display: flex;
+				justify-content: center;
 				.widget {
 					padding: 1em;
-					@include flex(1 1 1);
+					flex: 1 1 1;
 				}
 			}
 		}
@@ -220,7 +220,7 @@ div.cell > div {
 				}
 			}
 			div.submit {
-				@include flexbox();
+				display: flex;
 			}
 			div.SubmitWidget {
 				&.submit-button {
@@ -276,17 +276,17 @@ div.cell > div {
 	}
 	.menucell.urgence {
 		ul {
-			@include flexbox();
-			@include flex-direction(row);
-			@include vendor-prefix(flex-wrap, wrap);
-			@include justify-content(space-around);
-			@include vendor-prefix(align-items, stretch);
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			justify-content: space-around;
+			align-items: stretch;
 			@media screen and ($max-mobile-viewport) {
-				@include flex-direction(column);
+				flex-direction: column;
 			}
 			li {
 				@extend %homepage-block-color;
-				@include vendor-prefix(flex-grow, 1);
+				flex-grow: 1;
 				margin: 10px;
 				padding: 1em 0 0 0;
 				position: relative;
@@ -341,14 +341,14 @@ div.cell > div {
 		}
 	}
 	div.homepage-container {
-		@include vendor-prefix(flex-grow, 1);
+		flex-grow: 1;
 		* {
 			background-color: transparent;
 		}
 		div.services {
-			@include flexbox();
-			@include vendor-prefix(justify-content, center);
-			@include vendor-prefix(flex-wrap, wrap);
+			display: flex;
+			justify-content: center;
+			flex-wrap: wrap;
 			> div {
 				width: 350px;
 				@media screen and ($max-mobile-viewport) {
diff --git a/static/grenoble-metropole-2019/_custom.scss b/static/grenoble-metropole-2019/_custom.scss
index ee627f56..9f7b725b 100644
--- a/static/grenoble-metropole-2019/_custom.scss
+++ b/static/grenoble-metropole-2019/_custom.scss
@@ -172,7 +172,7 @@ img#hautDePage {
 		margin-bottom: 20px;
 		margin-right: 0;
 	}
-	@include vendor-prefix(flex-direction, column);
+	flex-direction: column;
 	div.bandeau {
 		background-repeat: no-repeat;
 		padding: 80px 0;
@@ -199,11 +199,10 @@ img#hautDePage {
 		}
 	}
 	div.content-wrapper div.columns {
-		display: -ms-flexbox;
 		display: flex;
 		justify-content: space-between;
 		@media screen and ($max-mobile-viewport) {
-			@include vendor-prefix(flex-direction, column);
+			flex-direction: column;
 		}
 		div.right {
 			width: 30%;
@@ -677,9 +676,8 @@ div.configjsoncell.user {
 	box-shadow: 0px 0px 5px #888888;
 	min-width: 250px;
 	> div {
-		display: -ms-flexbox;
 		display: flex;
-		@include vendor-prefix(justify-content, space-between);
+		justify-content: space-between;
 	}
 	div.user-profile {
 		font-weight: bold;
@@ -704,7 +702,7 @@ div.configjsoncell.user {
 		margin: 10px;
 	}
 	div.user-infos {
-		@include vendor-prefix(flex-grow, 2);
+		flex-grow: 2;
 	}
 	a.user-dashboard-item {
 		background: $primary-color;
@@ -744,15 +742,14 @@ div.configjsoncell.user {
 		margin: 2ex 1ex 0 150px;
 		@media screen and ($max-mobile-viewport) {
 			margin: 3ex 1ex 0 1ex;
-			@include vendor-prefix(justify-content, center);
+			justify-content: center;
 		}
 		@media screen and (max-width: $very-small-screen) {
 			margin: 3ex 0 0 0;
 		}
-		display: -ms-flexbox;
 		display: flex;
-		@include vendor-prefix(justify-content, flex-start);
-		@include vendor-prefix(flex-wrap, wrap);
+		justify-content: flex-start;
+		flex-wrap: wrap;
 	}
 }
 
@@ -1288,11 +1285,10 @@ div#login-page {
 			}
 		}
 		div.buttons {
-			display: -ms-flexbox;
 			display: flex;
-			@include vendor-prefix(flex-direction, row-reverse);
-			@include vendor-prefix(justify-content, space-between);
-			@include vendor-prefix(flex-wrap, wrap);
+			flex-direction: row-reverse;
+			justify-content: space-between;
+			flex-wrap: wrap;
 		}
 	}
 }
diff --git a/static/hautes-alpes-2018/_circle-steps.scss b/static/hautes-alpes-2018/_circle-steps.scss
index 02401d4e..38e9a33c 100644
--- a/static/hautes-alpes-2018/_circle-steps.scss
+++ b/static/hautes-alpes-2018/_circle-steps.scss
@@ -3,8 +3,8 @@ div#steps {
 	padding: 0 1em;
 
 	ol li {
-		@include flexbox();
-		@include flex-direction(column);
+		display: flex;
+		flex-direction: column;
 
 		margin: 25px 0;
 		padding: 0.5ex;
@@ -12,8 +12,8 @@ div#steps {
 		border: 0;
 
 		span.marker {
-			@include justify-content(center);
-			@include vendor-prefix(align-items, center);
+			justify-content: center;
+			align-items: center;
 			display: inline-flex;
 			margin: 0 auto 0.3em auto;
 			width: 4vw;
@@ -66,15 +66,15 @@ div#steps {
 @media screen and ($max-mobile-viewport) {
 	div#gauche div#steps {
 
-		@include order(2);
+		order: 2;
 		padding: 0;
 
 		ol {
-			@include flexbox();
-			@include flex-direction(row);
-			@include vendor-prefix(flex-flow, nowrap);
-			@include justify-content(center);
-			@include vendor-prefix(align-items, center);
+			display: flex;
+			flex-direction: row;
+			flex-flow: nowrap;
+			justify-content: center;
+			align-items: center;
 
 			li {
 				padding: 0 0.6em 1ex 0;
diff --git a/static/hautes-alpes-2018/_custom.scss b/static/hautes-alpes-2018/_custom.scss
index 88872d0a..d3d05bb2 100644
--- a/static/hautes-alpes-2018/_custom.scss
+++ b/static/hautes-alpes-2018/_custom.scss
@@ -71,15 +71,15 @@ div#main-content-wrapper {
 	}
 
 	> nav {
-		@include flexbox();
-		@include vendor-prefix(align-items, center);
-		@include justify-content(center);
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		// flexbug https://github.com/philipwalton/flexbugs#flexbug-2
 		max-width: 100%;
 		background-color: $cell-background;
 		font-size: 1.5rem;
 		@media screen and ($max-mobile-viewport) {
-			@include flex-direction(column);
+			flex-direction: column;
 		}
 
 		> div {
@@ -89,19 +89,19 @@ div#main-content-wrapper {
 		}
 
 		div#nav {
-			@include order(0);
-			@include vendor-prefix(flex-basis, 50%);
+			order: 0;
+			flex-basis: 50%;
 			background-color: transparent;
 			height: unset;
 
 			@media screen and ($max-mobile-viewport) {
-				@include vendor-prefix(flex-basis, auto);
+				flex-basis: auto;
 				width: 100%;
 
 				> ul {
-					@include flexbox();
-					@include justify-content(space-around);
-					@include vendor-prefix(align-items, center);
+					display: flex;
+					justify-content: space-around;
+					align-items: center;
 					// flexbug https://github.com/philipwalton/flexbugs#flexbug-2
 					max-width: 100%;
 
@@ -119,12 +119,12 @@ div#main-content-wrapper {
 			}
 			// first-level menu
 			ul:first-child {
-				@include flexbox();
-				@include justify-content(center);
-				@include vendor-prefix(flex-wrap, wrap);
+				display: flex;
+				justify-content: center;
+				flex-wrap: wrap;
 				height: unset;
 				li {
-					@include vendor-prefix(flex-grow, 0);
+					flex-grow: 0;
 				}
 			}
 
@@ -148,11 +148,11 @@ div#main-content-wrapper {
 		}
 		// User authentication block
 		.user-nav {
-			@include vendor-prefix(flex-basis, 50%);
-			@include order(1);
+			flex-basis: 50%;
+			order: 1;
 
 			@media screen and ($max-mobile-viewport) {
-				@include vendor-prefix(flex-basis, $nav-height);
+				flex-basis: $nav-height;
 				margin: 0;
 				width: 100%;
 
@@ -166,10 +166,10 @@ div#main-content-wrapper {
 			}
 
 			span.login, span.logged-in {
-				@include flexbox();
-				@include flex-direction(row);
-				@include vendor-prefix(align-items, center);
-				@include justify-content(center);
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: center;
 				// flexbug https://github.com/philipwalton/flexbugs#flexbug-2
 				max-width: 100%;
 				padding: 0.5em;
@@ -311,10 +311,10 @@ div#content {
 	}
 
 	div.buttons.submit {
-		@include flexbox();
-		@include justify-content(flex-start);
-		@include flex-direction(row-reverse);
-		@include vendor-prefix(flex-wrap, wrap);
+		display: flex;
+		justify-content: flex-start;
+		flex-direction: row-reverse;
+		flex-wrap: wrap;
 
 		.cancel,
 		[name="previous"] {
@@ -461,7 +461,7 @@ div.ui-dialog {
 		padding: $mobile-block-padding;
 
 		div#columns {
-			@include flex-direction(column);
+			flex-direction: column;
 			padding: $mobile-block-padding;
 
 			> div {
diff --git a/static/hautes-alpes-2018/_neutral-variant.scss b/static/hautes-alpes-2018/_neutral-variant.scss
index e5dc28fd..4ca5c8fb 100644
--- a/static/hautes-alpes-2018/_neutral-variant.scss
+++ b/static/hautes-alpes-2018/_neutral-variant.scss
@@ -32,19 +32,19 @@ $margin-center: 0 auto;
 
 			#header {
 				#top {
-					@include flexbox();
-					@include vendor-prefix(align-items, center);
-					@include justify-content(center);
+					display: flex;
+					align-items: center;
+					justify-content: center;
 					margin: $margin-center;
 					width: 100%;
 					min-height: $custom-header-height;
 					max-width: $width;
 
 					> .cell {
-						@include flex(1 1 100%);
+						flex: 1 1 100%;
 
 						&.top-logo {
-							@include vendor-prefix(flex-basis, auto);
+							flex-basis: auto;
 						}
 					}
 				}
@@ -55,7 +55,7 @@ $margin-center: 0 auto;
 		}
 
 		nav {
-			@include flexbox();
+			display: flex;
 
 			.user-nav {
 				margin: $margin-center;
diff --git a/static/includes/_cells.scss b/static/includes/_cells.scss
index fadd0197..af9bb605 100644
--- a/static/includes/_cells.scss
+++ b/static/includes/_cells.scss
@@ -161,12 +161,9 @@ div.wcscurrentformscell ul {
 		border-bottom: 1px solid $cell-entry-border-color;
 	}
 	& > li > a {
-		display: -ms-flexbox;
 		display: flex;
-		-ms-align-items: baseline;
 		align-items: baseline;
 
-		-ms-flex-wrap: wrap;
 		flex-wrap: wrap;
 		padding: 1rem;
 		color: $cell-entry-color;
@@ -262,20 +259,15 @@ div.wcscurrentformscell ul {
 	}
 	@if $cell-image-position == top {
 		> div {
-			display: -ms-flexbox;
 			display: flex;
 			flex-direction: column;
-			-ms-flex-direction: column;
 			div {
-				-ms-flex-order: 4;
 				order: 4;
 			}
 			div.intro {
-				-ms-flex-order: 2;
 				order: 2;
 			}
 			picture {
-				-ms-flex-order: 0;
 				order: 0;
 				img {
 					border-radius: $cell-border-radius $cell-border-radius 0 0;
@@ -285,7 +277,6 @@ div.wcscurrentformscell ul {
 				}
 			}
 			> h2:first-child {
-				-ms-flex-order: 1;
 				order: 1;
 				border-radius: 0;
 			}
@@ -300,7 +291,6 @@ div.wcscurrentformscell ul {
 
 div.list-of-forms {
 	span.form-number {
-		-ms-flex-grow: 1;
 		flex-grow: 1;
 
 		margin-right: 1rem;
@@ -388,11 +378,9 @@ div.menucell li li {
 div.searchcell {
 	form {
 		position: relative;
-		display: -ms-flexbox;
 		display: flex;
 		padding: 1em;
 		input {
-			-ms-flex: 1;
 			flex: 1;
 			margin-right: 1rem;
 		}
diff --git a/static/includes/_forms.scss b/static/includes/_forms.scss
index fca3a7cc..d8971a5a 100644
--- a/static/includes/_forms.scss
+++ b/static/includes/_forms.scss
@@ -566,11 +566,8 @@ div.select2-search {
 // Buttons order & alignment configuration
 @if $buttons-order or $buttons-alignment {
 	div.buttons {
-		display: -ms-flexbox;
 		display: flex;
-		-ms-flex-wrap: wrap;
 		flex-wrap: wrap;
-		-ms-flex-pack: $buttons-alignment;
 		justify-content: $buttons-alignment;
 
 		@each $btn, $grow in $buttons-order {
@@ -580,10 +577,8 @@ div.select2-search {
 			}
 
 			.#{$btn}-button {
-				-ms-flex-order: $i;
 				order: $i;
 				@if ($grow == 'grow') {
-					-ms-flex-positive: 1;
 					flex-grow: 1;
 				}
 	 		}
diff --git a/static/includes/_layout.scss b/static/includes/_layout.scss
index ba2570fc..6b0a9f9e 100644
--- a/static/includes/_layout.scss
+++ b/static/includes/_layout.scss
@@ -29,19 +29,13 @@ html, body {
 }
 
 div#page {
-	display: -ms-flexbox;
-	display: -webkit-flex;
 	display: flex;
 	min-height: 100vh;
-	-ms-flex-direction: column;
-	-webkit-direction: column;
 	flex-direction: column;
 }
 
 div#page div#main-content-wrapper,
 div#page main {
-	-ms-flex: 1 0 auto;
-	-webkit-flex: 1 0 auto;
 	flex: 1 0 auto;
 	width: 100%;
 }
@@ -98,27 +92,19 @@ div#main-content {
 }
 
 #columns {
-	-ms-flex: 1 auto;
-	-webkit-flex-grow: 1;
 	flex-grow: 1;
 	max-width: 100%;
 }
 
 .gru-content {
-	display: -ms-flexbox;
-	display: -webkit-flex;
 	display: flex;
 	#sidebar {
-		-ms-flex: 0 0 $sidebar-width;
-		-webkit-flex: 0 0 $sidebar-width;
 		flex: 0 0 $sidebar-width;
 		max-width: $sidebar-max-width;
 		@if $sidebar-min-width != 0 {
 			min-width: $sidebar-min-width;
 		}
 		@if $sidebar-position == right {
-			-ms-flex-order: 1;
-			-webkit-order: 1;
 			order: 1;
 		}
 		div.cell {
@@ -144,12 +130,8 @@ div#main-content {
 	}
 
 	.gru-content {
-		-ms-flex-direction: column;
-		-webkit-flex-direction: column;
 		flex-direction: column;
 		#sidebar {
-			-ms-flex: 0 0 auto;
-			-webkit-flex: 0 0 auto;
 			flex: 0 0 auto;
 			max-width: 100%;
 			// don't apply min-width on mobile
diff --git a/static/includes/wcs/_nearby-form.scss b/static/includes/wcs/_nearby-form.scss
index a7d210d3..2585a8c7 100644
--- a/static/includes/wcs/_nearby-form.scss
+++ b/static/includes/wcs/_nearby-form.scss
@@ -17,15 +17,9 @@
 
 .nearby-form {
 	margin: 5px auto;
-	display: -ms-flexbox;
 	display: flex;
-	-ms-align-items: center;
-	-ms-flex-align: center;
 	align-items: center;
-	-ms-flex-line-pack: center;
 	align-content: center;
-	-ms-flex-pack: space-between;
-	-ms-justify-content: space-between;
 	justify-content: space-between;
 	border: $widget-border;
 	padding: 5px;
@@ -59,7 +53,6 @@
 	padding: 3px;
 	margin: auto;
 	border-radius: 3px;
-	display: -ms-flexbox;
 	display: flex;
 	a {
 		line-height: 1;
diff --git a/static/includes/wcs/_steps.scss b/static/includes/wcs/_steps.scss
index fca2f4e4..0d84ebc3 100644
--- a/static/includes/wcs/_steps.scss
+++ b/static/includes/wcs/_steps.scss
@@ -100,7 +100,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 .wcs-step {
 	border-radius: $border-radius;
 	background-color: $wcs-step-background;
-	display: -ms-flexbox;
 	display: flex;
 
 	&--marker {
@@ -110,7 +109,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 		font-size: 1em;
 		text-align: center;
 
-		display: -ms-flexbox;
 		display: flex;
 
 		color: $wcs-step-marker-color;
@@ -119,7 +117,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 
 		width: $wcs-step-marker-size;
 		height: $wcs-step-marker-size;
-		-ms-flex: 0 0 $wcs-step-marker-size;
 		flex: 0 0 $wcs-step-marker-size;
 
 		&-nb {
@@ -133,7 +130,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 
 	&--label {
 		display: block;
-		-ms-grid-row-align: center;
 		align-self: center;
 		letter-spacing: 1px;
 		line-height: 1.25;
@@ -181,17 +177,13 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 
 			width: $size;
 			height: $size;
-			-ms-flex: 0 0 auto;
 			flex: 0 0 auto;
-			-ms-flex-align: center;
 			align-items: center;
-			-ms-flex-pack: center;
 			justify-content: center;
 
 			&-nb {
 				margin: 0;
 				transform: translateY(-0.5em);
-				-ms-flex-order: 1;
 				order: 1;
 			}
 
@@ -200,7 +192,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 				transform: translateY(0.5em);
 				font-size: 0.75em;
 				font-weight: normal;
-				-ms-flex-order: 3;
 				order: 3;
 			}
 
@@ -208,13 +199,11 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 			&::before {
 				content: "";
 				display: block;
-				-ms-flex: 0 0 0.1em;
 				flex: 0 0 0.1em;
 				height: 2em;
 				margin: 0 0.1em;
 				background: currentColor;
 				transform: rotate(30deg);
-				-ms-flex-order: 2;
 				order: 2;
 			}
 		}
@@ -238,9 +227,7 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 	.wcs-steps {
 		&--list {
 			position: relative;
-			display: -ms-flexbox;
 			display: flex;
-			-ms-flex-wrap: wrap;
 			flex-wrap: wrap;
 
 			// keep space for label
@@ -303,9 +290,7 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 		}
 
 		&--list {
-			-ms-flex-wrap: nowrap;
 			flex-wrap: nowrap;
-			-ms-flex-direction: column;
 			flex-direction: column;
 			// remove keep space for label
 			padding-bottom: 0;
@@ -417,7 +402,6 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
 					content: "";
 					display: block;
 					height: $wcs-step-marker-tie-width;
-					-ms-flex: 0 0 calc(100% + #{$wcs-steps-spacing});
 					flex: 0 0 calc(100% + #{$wcs-steps-spacing});
 					background-color: $wcs-step-marker-tie-color;
 					margin: auto;
diff --git a/static/metz-metropole-2019/_custom.scss b/static/metz-metropole-2019/_custom.scss
index 33590cec..3e3c287b 100644
--- a/static/metz-metropole-2019/_custom.scss
+++ b/static/metz-metropole-2019/_custom.scss
@@ -255,10 +255,8 @@ div.gru-nav .gru-nav-button {
 		margin: 0 auto;
 		height: 100%;
 		max-width: $width;
-		display: -webkit-flex;
 		display: flex;
 		.title {
-			-webkit-flex: 1;
 			flex: 1;
 			text-align: center;
 			h1 {
@@ -289,7 +287,6 @@ div.gru-nav .gru-nav-button {
 			@media screen and ($max-mobile-viewport) {
 				display: none;
 			}
-			-webkit-flex: 1;
 			flex: 1;
 			max-width: 400px;
 			background: $blue;
@@ -743,7 +740,6 @@ div#gauche div#tracking-code {
 	position: relative;
 	@media screen and ($max-mobile-viewport) {
 		margin: 0;
-		-webkit-order: 0;
 		order: 0;
 		margin-left: 10px;
 		width: 200px;
@@ -837,10 +833,8 @@ div#gauche div#tracking-code {
 }
 
 form.quixote div.buttons {
-	display: -webkit-flex;
 	display: flex;
 	@media screen and (max-width: $width) {
-		-webkit-flex-wrap: wrap;
 		flex-wrap: wrap;
 	}
 	div.savedraft-button {
@@ -866,48 +860,37 @@ form.quixote div.buttons {
 		}
 	}
 	div.previous-button {
-		-webkit-flex: 1;
 		flex: 1;
-		-webkit-order: 0;
 		order: 0;
 		@media screen and (max-width: 500px) {
-			-webkit-flex-basis: 50%;
 			flex-basis: 50%;
 		}
 		@media screen and (max-width: 320px) {
-			-webkit-flex-basis: 100%;
 			flex-basis: 100%;
 		}
 	}
 	div.cancel-button {
-		-webkit-flex: 1;
 		flex: 1;
-		-webkit-order: 1;
 		order: 1;
 		button {
 			background: #ececec;
 			color: #adadad;
 		}
 		@media screen and (max-width: 500px) {
-			-webkit-flex-basis: 50%;
 			flex-basis: 50%;
 		}
 		@media screen and (max-width: 320px) {
-			-webkit-flex-basis: 100%;
 			flex-basis: 100%;
 		}
 	}
 	div.submit-button {
-		-webkit-flex: 1;
 		flex: 1;
-		-webkit-order: 2;
 		order: 2;
 		button {
 			background: $green url(img/right.png) right 10px top 50% no-repeat;
 			background-size: auto 60%;
 		}
 		@media screen and (max-width: 500px) {
-			-webkit-flex-basis: 100%;
 			flex-basis: 100%;
 		}
 	}
@@ -1120,8 +1103,6 @@ body.authentic-page {
 		}
 	}
 	#sidebar {
-		-ms-flex: 0 0 350px;
-		-webkit-flex: 0 0 350px;
 		flex: 0 0 350px;
 		max-width: 350px;
 		width: 350px;
@@ -1231,14 +1212,11 @@ div#up {
 	}
 	@media screen and ($max-mobile-viewport) {
 		#content-top-wrapper .content-top {
-			display: -webkit-flex;
 			display: flex;
 			flex-direction: column;
 			.cell {
-				-webkit-order: 1;
 				order: 1;
 				&.trackingcodeinputcell {
-					-webkit-order: 0;
 					order: 0;
 				}
 				height: 150px;
@@ -1260,7 +1238,6 @@ div#up {
 					margin: 0 -1rem; // cancel padding
 					width: calc(100% + 2rem);
 					input {
-						-webkit-flex: 1;
 						flex: 1;
 					}
 				}
diff --git a/static/meyzieu-2018/_custom.scss b/static/meyzieu-2018/_custom.scss
index e0571956..4ec8e324 100644
--- a/static/meyzieu-2018/_custom.scss
+++ b/static/meyzieu-2018/_custom.scss
@@ -31,8 +31,8 @@ div#nav {
 	margin: 0 auto;
 	> ul {
 		margin: 0;
-		@include flexbox();
-		@include justify-content(space-between);
+		display: flex;
+		justify-content: space-between;
 		> li {
 			> a {
 				font-size: 1.1em;
@@ -125,18 +125,18 @@ div#nav {
 		}
 	}
 	div.top {
-		@include flexbox();
-		@include flex-direction(row);
+		display: flex;
+		flex-direction: row;
 		margin-bottom: 2ex;
 		.carrousel-wrapper {
-			@include flexbox();
+			display: flex;
 			@include flex(0 0 calc(#{$width} - #{$sidebar-width}));
 			@media screen and ($max-mobile-viewport) {
-				@include flex-direction(column);
-				@include flex(0);
+				flex-direction: column;
+				flex: 0;
 			}
 			div.menu {
-				@include flexbox();
+				display: flex;
 				align-items: center;
 				width: 25%;
 				@media screen and ($max-mobile-viewport) {
@@ -169,7 +169,7 @@ div#nav {
 			}
 		}
 		@media screen and ($max-mobile-viewport) {
-			@include flex-direction(column);
+			flex-direction: column;
 		}
 	}
 	#sidebar {
@@ -350,12 +350,12 @@ div#nav {
 			border: 0;
 		}
 		ul {
-			@include flexbox();
-			@include flex-direction(row);
-			@include vendor-prefix(flex-wrap, wrap);
-			@include justify-content(flex-start);
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			justify-content: flex-start;
 			@media screen and ($max-mobile-viewport) {
-				@include justify-content(space-around);
+				justify-content: space-around;
 			}
 			li {
 				margin: 1ex 0.5ex;
diff --git a/static/montlouis-sur-loire/_custom.scss b/static/montlouis-sur-loire/_custom.scss
index edf2c615..6f13f4a2 100644
--- a/static/montlouis-sur-loire/_custom.scss
+++ b/static/montlouis-sur-loire/_custom.scss
@@ -165,8 +165,6 @@ div#nav-wrapper {
 
 div#page {
 	div#main-content-wrapper {
-		-ms-flex: unset;
-		-webkit-flex: unset;
 		flex: unset;
 		max-width: unset;
 
diff --git a/static/portal-agent/css/agent-portal.scss b/static/portal-agent/css/agent-portal.scss
index 55ca34e1..54f9523e 100644
--- a/static/portal-agent/css/agent-portal.scss
+++ b/static/portal-agent/css/agent-portal.scss
@@ -8,7 +8,6 @@ $cell-entry-hover-background: #eee;
 $mobile-limit: 760px;
 
 div#page-content.columns {
-	display: -ms-flexbox;
 	display: flex;
 	> div {
 		box-sizing: border-box;
@@ -20,7 +19,6 @@ div#page-content.columns {
 		}
 	}
 	@media screen and (max-width: $mobile-limit) {
-		-ms-flex-direction: column;
 		flex-direction: column;
 	}
 }
diff --git a/static/publik/_custom.scss b/static/publik/_custom.scss
index f2223a07..ce3eea8f 100644
--- a/static/publik/_custom.scss
+++ b/static/publik/_custom.scss
@@ -109,7 +109,6 @@ div#content {
 }
 
 #content #sidebar {
-	-ms-flex: 0 0 400px;
 	flex: 0 0 400px;
 	max-width: none;
 	order: -1;
@@ -117,7 +116,6 @@ div#content {
 	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-mobile-viewport) {
-		-ms-flex: auto;
 		flex: auto;
 	}
 }
diff --git a/static/saone-et-loire-cd71-2019/_custom.scss b/static/saone-et-loire-cd71-2019/_custom.scss
index 9c50412a..212dfa0e 100644
--- a/static/saone-et-loire-cd71-2019/_custom.scss
+++ b/static/saone-et-loire-cd71-2019/_custom.scss
@@ -233,15 +233,12 @@ div#sidebar {
 
 div#rub_service {
 	form div.buttons {
-		display: -ms-flexbox;
 		display: flex;
-		-ms-justify-content: space-between;
 		justify-content: space-between;
 		button {
 			margin-right: 0;
 		}
 		.submit-button {
-			-ms-order: 2;
 			order: 2;
 		}
 		.savedraft-button {
diff --git a/static/toodego/_forms.scss b/static/toodego/_forms.scss
index c4321258..d9d77ea4 100644
--- a/static/toodego/_forms.scss
+++ b/static/toodego/_forms.scss
@@ -146,18 +146,14 @@ input[readonly], select[readonly], textarea[readonly] {
 }
 
 div.buttons {
-	display: -ms-flexbox;
 	display: flex;
-	-ms-flex-pack: center;
 	justify-content: center;
 	.cancel-button {
 	}
 	.previous-button {
-		-ms-flex-order: 0;
 		order: 0;
 	}
 	.submit-button {
-		-ms-flex-order: 1;
 		order: 1;
 		button {
 			margin-right: 0;
diff --git a/static/toodego/_specialpages.scss b/static/toodego/_specialpages.scss
index a6a06c98..b6461e02 100644
--- a/static/toodego/_specialpages.scss
+++ b/static/toodego/_specialpages.scss
@@ -318,8 +318,6 @@ body.page-connect {
 		}
 	}
 	.gru-content #sidebar {
-		-ms-flex: 0 0 $sidebar-width + 150px;
-		-webkit-flex: 0 0 $sidebar-width + 150px;
 		flex: 0 0 $sidebar-width + 150px;
 		max-width: $sidebar-width + 150px;
 		margin-top: calc(0.4em + 60px);
@@ -503,7 +501,6 @@ body.focus-in #page.search-page {
 				margin-right: 8rem;
 			}
 			.tile {
-				-ms-justify-content: space-around;
 				justify-content: space-around;
 			}
 			.tile-actions {
@@ -865,7 +862,6 @@ body.focus-in #page.search-page {
 			flex-direction: column;
 		}
 		#form-status-sidebar {
-			-ms-flex: 0 0 $sidebar-width;
 			flex: 0 0 $sidebar-width;
 			.cell {
 				margin-left: 1rem;
diff --git a/static/toodego/_tiles.scss b/static/toodego/_tiles.scss
index 4a6509ca..d83965fe 100644
--- a/static/toodego/_tiles.scss
+++ b/static/toodego/_tiles.scss
@@ -10,11 +10,8 @@ $actions: (goto, more-info, call, login);
 	padding-left: $tile-picture-width + $tile-producer-circle-radius + 15px;
 	min-height: $tile-min-height;
 	overflow: hidden;
-	display: -ms-flexbox;
 	display: flex;
-	-ms-flex-direction: column;
 	flex-direction: column;
-	-ms-justify-content: space-between;
 	justify-content: space-between;
         transition: opacity 0.3s linear;
 	@media screen and (max-width: $desktop-limit) {
diff --git a/static/tours-metropole/_custom.scss b/static/tours-metropole/_custom.scss
index b5a8fae6..8d71e161 100644
--- a/static/tours-metropole/_custom.scss
+++ b/static/tours-metropole/_custom.scss
@@ -44,8 +44,7 @@ body.authentic-page, body.registration-page {
 		}
 		div#top {
 			display: flex;
-			display: -ms-flexbox;
-			@include vendor-prefix(justify-content, space-between);
+			justify-content: space-between;
 		}
 		h1#logo-ville {
 			@media screen and ($min-desktop-viewport) {
@@ -186,7 +185,7 @@ div#footer-wrapper {
 
 .gru-content {
 	@media screen and ($max-mobile-viewport) {
-		@include vendor-prefix(flex-direction, column-reverse);
+		flex-direction: column-reverse;
 	}
 	div.cell.wcsformsofcategorycell {
 		> div {
diff --git a/static/venissieux/_custom.scss b/static/venissieux/_custom.scss
index 4bb88945..a0fbd11e 100644
--- a/static/venissieux/_custom.scss
+++ b/static/venissieux/_custom.scss
@@ -51,7 +51,6 @@ nav {
 }
 
 .page-template-homepage .gru-content {
-	-ms-flex-wrap: wrap;
 	flex-wrap: wrap;
 }
 
diff --git a/static/villeurbanne-2018/_custom.scss b/static/villeurbanne-2018/_custom.scss
index 5dd32dc0..60421849 100644
--- a/static/villeurbanne-2018/_custom.scss
+++ b/static/villeurbanne-2018/_custom.scss
@@ -253,7 +253,7 @@ div#login-page {
 	display: flex;
 	justify-content: center;
 	padding: 3.75rem 0;
-	@include vendor-prefix(flex-wrap, wrap);
+	flex-wrap: wrap;
 	> div.block {
 		max-width: 26.25rem;
 		width: 100%;
-- 
2.20.1

