From 29fa79d3e486f30fd8ff062f38c2e21cea94ff0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Sun, 14 Jun 2020 20:24:42 +0200
Subject: [PATCH] a11y: adjust text font size relative to browser default
 (#44058)

---
 static/alpes-maritimes-2018/_custom.scss      |  4 +-
 static/alpes-maritimes-2018/_vars.scss        |  2 +-
 static/amiens-metropole/_custom.scss          |  4 +-
 static/amiens-metropole/_footer.scss          |  2 +-
 static/amiens-metropole/_header.scss          |  2 +-
 static/amiens-metropole/_vars.scss            |  2 +-
 static/arles-2020/_vars.scss                  |  4 +-
 static/arles/_custom.scss                     | 20 ++---
 static/arles/_vars.scss                       |  2 +-
 static/arpajon/_custom.scss                   |  6 +-
 static/arpajon/_vars.scss                     |  2 +-
 static/beaulieu/_vars.scss                    |  2 +-
 static/blois-2018/_custom.scss                | 10 +--
 static/blois-2018/_vars.scss                  |  2 +-
 static/bouches-du-rhone/_custom.scss          |  2 +-
 static/bouches-du-rhone/_vars.scss            |  4 +-
 static/calvados-cd14/_custom.scss             |  2 +-
 static/calvados-cd14/_vars.scss               |  2 +-
 static/castelnau-le-lez/_custom.scss          |  4 +-
 static/castelnau-le-lez/_vars.scss            |  4 +-
 static/castries-2020/_vars.scss               |  2 +-
 static/castries/_vars.scss                    |  2 +-
 static/chateauroux/_vars.scss                 |  2 +-
 static/clapiers/_vars.scss                    |  2 +-
 static/clapotis-les-canards/_vars.scss        |  2 +-
 static/clermont-metropole/_custom.scss        |  2 +-
 static/clermont-metropole/_vars.scss          |  2 +-
 .../clisson-sevre-et-maine-agglo/_custom.scss |  4 +-
 .../clisson-sevre-et-maine-agglo/_vars.scss   |  2 +-
 static/clisson/_vars.scss                     |  2 +-
 static/cnil/_custom.scss                      | 10 +--
 static/cnil/_vars.scss                        |  4 +-
 static/cotes-d-armor/_vars.scss               |  2 +-
 static/cournonterral/_vars.scss               |  2 +-
 static/dauphine/_vars.scss                    |  2 +-
 static/dordogne-cd24/_custom.scss             | 10 +--
 static/dordogne-cd24/_vars.scss               |  4 +-
 static/dreux/_custom.scss                     |  2 +-
 static/dreux/_vars.scss                       |  2 +-
 static/entrouvert/_carrousel-references.scss  |  2 +-
 static/entrouvert/_custom.scss                |  6 +-
 static/entrouvert/_vars.scss                  |  4 +-
 static/essonne-cd91/_custom.scss              |  4 +-
 static/essonne-cd91/_vars.scss                |  4 +-
 static/fabregues/_vars.scss                   |  2 +-
 static/fondettes/_vars.scss                   |  2 +-
 static/fontenay-sous-bois-2018/_custom.scss   |  4 +-
 static/fontenay-sous-bois-2018/_vars.scss     |  4 +-
 static/gers-cd32/_custom.scss                 | 22 +++---
 static/gers-cd32/_vars.scss                   |  4 +-
 static/gorges/_vars.scss                      |  2 +-
 static/grandlyon-sau/_custom.scss             |  4 +-
 static/grandlyon-sau/_vars.scss               |  2 +-
 static/grandlyon/_custom.scss                 |  2 +-
 static/grandlyon/_vars.scss                   |  4 +-
 static/grenoble-metropole-2019/_vars.scss     |  4 +-
 static/greville-hague/_vars.scss              |  2 +-
 static/groupe-up/_custom.scss                 |  4 +-
 static/groupe-up/_vars.scss                   |  2 +-
 static/haute-garonne-cd31/_custom.scss        | 24 +++---
 static/haute-garonne-cd31/_vars.scss          |  4 +-
 static/haute-goulaine/_vars.scss              |  2 +-
 static/jobourg/_vars.scss                     |  2 +-
 static/juvignac/_vars.scss                    |  2 +-
 static/la-hague/_vars.scss                    |  2 +-
 static/la-reunion/_vars.scss                  |  2 +-
 static/la-seyne-sur-mer/_vars.scss            |  2 +-
 static/lattes/_vars.scss                      |  2 +-
 static/laverune/_vars.scss                    |  2 +-
 static/le-cres/_custom.scss                   |  2 +-
 static/le-cres/_vars.scss                     |  2 +-
 static/lenord/_custom.scss                    |  2 +-
 static/lenord/_vars.scss                      |  2 +-
 static/lille-metropole/_custom.scss           |  2 +-
 static/lille-metropole/_vars.scss             |  4 +-
 static/lille/_custom.scss                     | 42 +++++-----
 static/lille/_vars.scss                       |  2 +-
 static/lot-cd46/_vars.scss                    |  4 +-
 static/lozere/_vars.scss                      |  2 +-
 static/marcoussis/_vars.scss                  |  2 +-
 static/massoins/_vars.scss                    |  2 +-
 static/mauguio/_custom.scss                   |  2 +-
 static/mauguio/_vars.scss                     |  2 +-
 static/meaux/_vars.scss                       |  2 +-
 static/metz-metropole-2019/_custom.scss       | 40 +++++-----
 static/metz-metropole-2019/_vars.scss         |  2 +-
 static/metz/_vars.scss                        |  2 +-
 static/meudon/_custom.scss                    | 10 +--
 static/meudon/_vars.scss                      |  2 +-
 static/meyzieu-2018/_vars.scss                |  2 +-
 static/mincult/_custom.scss                   |  2 +-
 static/mincult/_vars.scss                     |  2 +-
 static/montlouis-sur-loire/_custom.scss       | 14 ++--
 static/montlouis-sur-loire/_vars.scss         |  4 +-
 static/montpellier/_custom.scss               |  6 +-
 static/montpellier/_vars.scss                 |  2 +-
 static/murviel-les-montpellier/_vars.scss     |  2 +-
 static/nanterre/_vars.scss                    |  2 +-
 static/omonville-la-rogue/_vars.scss          |  2 +-
 static/orleans/_custom.scss                   |  8 +-
 static/orleans/_vars.scss                     |  2 +-
 static/pays-de-grasse/_vars.scss              |  2 +-
 static/perols/_vars.scss                      |  2 +-
 static/perpette-les-andouillettes/_vars.scss  |  2 +-
 static/pfwb/_custom.scss                      |  2 +-
 static/pfwb/_vars.scss                        |  2 +-
 static/pratic/_vars.scss                      |  2 +-
 static/pre-saint-gervais/_custom.scss         | 38 +++++-----
 static/pre-saint-gervais/_vars.scss           |  2 +-
 static/publik/_custom.scss                    |  2 +-
 static/publik/_vars.scss                      |  2 +-
 static/quimper/_custom.scss                   | 28 +++----
 static/region-reunion/_custom.scss            |  4 +-
 static/roannais-agglomeration/_custom.scss    |  8 +-
 static/roannais-agglomeration/_vars.scss      |  2 +-
 static/rochefort/_custom.scss                 |  6 +-
 static/rochefort/_vars.scss                   |  2 +-
 static/saint-bres/_vars.scss                  |  2 +-
 static/saint-chamond/_custom.scss             |  8 +-
 static/saint-chamond/_vars.scss               |  2 +-
 static/saint-denis/_custom.scss               | 20 ++---
 static/saint-denis/_vars.scss                 |  6 +-
 static/saint-drezery/_vars.scss               |  2 +-
 static/saint-genies-des-mourgues/_vars.scss   |  2 +-
 static/saint-georges-d-orques/_vars.scss      |  2 +-
 static/saint-jean-de-vedas/_vars.scss         |  2 +-
 static/saint-laurent-du-var/_custom.scss      |  2 +-
 static/saint-lo-agglo/_custom.scss            |  2 +-
 static/saint-lo-agglo/_vars.scss              |  2 +-
 static/saint-vallier-de-thiey/_custom.scss    |  2 +-
 static/saint-vallier-de-thiey/_vars.scss      |  2 +-
 static/saone-et-loire-cd71-2019/_custom.scss  |  4 +-
 static/saone-et-loire-cd71-2019/_vars.scss    |  4 +-
 static/saone-et-loire-cd71/_vars.scss         |  2 +-
 static/seine-et-marne-apa/_custom.scss        |  6 +-
 static/seine-et-marne-apa/_vars.scss          |  2 +-
 static/seine-et-marne/_vars.scss              |  2 +-
 static/sens/_custom.scss                      |  6 +-
 static/sens/_vars.scss                        |  4 +-
 static/sicoval/_vars.scss                     |  2 +-
 static/signal-publik/_custom.scss             | 20 ++---
 static/somme-cd80/_vars.scss                  |  2 +-
 static/sospel/_vars.scss                      |  2 +-
 static/strasbourg-2018/_custom.scss           | 10 +--
 static/strasbourg-2018/_vars.scss             |  2 +-
 static/sussargues/_vars.scss                  |  2 +-
 static/tonneville/_vars.scss                  |  2 +-
 static/toodego/_atmo.scss                     | 10 +--
 static/toodego/_carrousel.scss                |  2 +-
 static/toodego/_custom.scss                   | 12 +--
 static/toodego/_gallery.scss                  |  4 +-
 static/toodego/_pollen.scss                   |  2 +-
 static/toodego/_specialpages.scss             |  4 +-
 static/toodego/_tiles.scss                    |  4 +-
 static/toodego/_vars.scss                     |  2 +-
 static/toulouse-metropole/_custom.scss        | 70 ++++++++---------
 static/toulouse-metropole/_vars.scss          |  2 +-
 static/toulouse/_custom.scss                  | 76 +++++++++----------
 static/toulouse/_vars.scss                    |  2 +-
 static/tournai/_custom.scss                   | 20 ++---
 static/tournai/_vars.scss                     |  4 +-
 static/tours-metropole/_vars.scss             |  2 +-
 static/tours/_vars.scss                       |  2 +-
 static/universite-paris-nanterre/_custom.scss |  4 +-
 static/universite-paris-nanterre/_vars.scss   |  4 +-
 static/urville-nacqueville/_vars.scss         |  2 +-
 static/vandoeuvre-les-nancy/_custom.scss      |  2 +-
 static/vandoeuvre-les-nancy/_vars.scss        |  2 +-
 static/vendargues/_vars.scss                  |  2 +-
 static/venissieux/_custom.scss                | 12 +--
 static/venissieux/_vars.scss                  |  4 +-
 static/villejuif/_custom.scss                 |  2 +-
 static/villejuif/_vars.scss                   |  2 +-
 static/villeneuve-les-maguelone/_vars.scss    |  2 +-
 static/villeurbanne-2018/_vars.scss           |  2 +-
 static/vincennes-2018/_vars.scss              |  2 +-
 176 files changed, 471 insertions(+), 471 deletions(-)

diff --git a/static/alpes-maritimes-2018/_custom.scss b/static/alpes-maritimes-2018/_custom.scss
index 0d8b0aa9..e8c5623b 100644
--- a/static/alpes-maritimes-2018/_custom.scss
+++ b/static/alpes-maritimes-2018/_custom.scss
@@ -80,7 +80,7 @@ div#main-content-wrapper {
 	display: block;
 	text-indent: -10000px;
 	color: #4D4D4D;
-	font-size: 30px;
+	font-size: 1.875rem;
 	font-weight: normal;
 	background-image: url(img/logo.png);
 	background-position: center left;
@@ -656,7 +656,7 @@ div#footer-wrapper {
 			content: '\f054';
 			font-family: FontAwesome;
 			margin-right: 0.5em;
-			font-size: 7px;
+			font-size: 0.438rem;
 			display: inline-block;
 			vertical-align: middle;
 		}
diff --git a/static/alpes-maritimes-2018/_vars.scss b/static/alpes-maritimes-2018/_vars.scss
index 3d3ce851..94b10de9 100644
--- a/static/alpes-maritimes-2018/_vars.scss
+++ b/static/alpes-maritimes-2018/_vars.scss
@@ -1,7 +1,7 @@
 $border-radius: 3px;
 $width: 1280px;
 $font-family: Roboto, sans-serif;
-$font-size: 16px;
+$font-size: 1em;
 $mobile-limit: 1100px;
 
 $sidebar-width: 400px;
diff --git a/static/amiens-metropole/_custom.scss b/static/amiens-metropole/_custom.scss
index 81e6c841..e09f8e6f 100644
--- a/static/amiens-metropole/_custom.scss
+++ b/static/amiens-metropole/_custom.scss
@@ -118,7 +118,7 @@ nav {
 				&::after {
 					content: $arrow-down-icon;
 					font-family: FontAwesome;
-					font-size: 10px;
+					font-size: 0.667rem;
 					position: absolute;
 					right: 20px;
 					vertical-align: middle;
@@ -161,7 +161,7 @@ nav {
 						color: $title-color;
 						content: $arrow-right-icon;
 						font-family: FontAwesome;
-						font-size: 6px;
+						font-size: 0.4rem;
 						font-weight: bold;
 						left: 2em;
 						position: absolute;
diff --git a/static/amiens-metropole/_footer.scss b/static/amiens-metropole/_footer.scss
index 73f4c6ea..3c0d1594 100644
--- a/static/amiens-metropole/_footer.scss
+++ b/static/amiens-metropole/_footer.scss
@@ -35,7 +35,7 @@ footer {
 							border: 2px solid white;
 							border-radius: 50px;
 							color: $footer-color;
-							font-size: 16px;
+							font-size: 1.067rem;
 							font-weight: bold;
 							padding: 15px 35px;
 							text-transform: uppercase;
diff --git a/static/amiens-metropole/_header.scss b/static/amiens-metropole/_header.scss
index b2435aef..5ecc3bd1 100644
--- a/static/amiens-metropole/_header.scss
+++ b/static/amiens-metropole/_header.scss
@@ -50,7 +50,7 @@ $header-content-margin: 5px;
 		text-align: left;
 		color: white;
 		padding-left: 25px;
-		font-size: 12px;
+		font-size: 0.8rem;
 		font-weight: bold;
 		text-transform: uppercase;
 		span {
diff --git a/static/amiens-metropole/_vars.scss b/static/amiens-metropole/_vars.scss
index b2f362ed..b737dc49 100644
--- a/static/amiens-metropole/_vars.scss
+++ b/static/amiens-metropole/_vars.scss
@@ -6,7 +6,7 @@ $top-logo-width: 200px;
 $top-banner-height: 400px;
 $font-color: #666;
 $font-family: 'Open Sans', Arial, Helvetica, sans-serif;
-$font-size: 15px;
+$font-size: 0.938em;
 $nav-background: white;
 $nav-submenu-background: #EEE;
 $nav-submenu-color: #333;
diff --git a/static/arles-2020/_vars.scss b/static/arles-2020/_vars.scss
index e10b5007..0bba5969 100644
--- a/static/arles-2020/_vars.scss
+++ b/static/arles-2020/_vars.scss
@@ -1,6 +1,6 @@
 $primary-color: #0055a4;
 $font-color: #1a1a1a;
-$font-size: 17px;
+$font-size: 1.062em;
 $font-family: Lato, sans-serif;
 $link-color: $primary-color;
 $lighter-primary-color: lighten($primary-color, 65%);
@@ -32,7 +32,7 @@ $buttons-order: cancel (grow), previous, submit;
 
 $title-background: transparent;
 $title-color: $font-color;
-$title-font-size: 21px;
+$title-font-size: 1.235rem;
 
 $cell-image-position: top;
 $cell-entry-hover-background: $lighter-primary-color;
diff --git a/static/arles/_custom.scss b/static/arles/_custom.scss
index feb4d212..bc18573c 100644
--- a/static/arles/_custom.scss
+++ b/static/arles/_custom.scss
@@ -7,7 +7,7 @@
 @mixin form-icon($content) {
 	content: $content;
 	font-family: FontAwesome;
-	font-size: 24px;
+	font-size: 1.846rem;
 	color: $primary-color;
 	position: absolute;
 	right: 1ex;
@@ -43,7 +43,7 @@ div#header-wrapper {
 		height: 35px;
 		border-bottom: 10px solid #ffffff;
 		background: linear-gradient(#bfbfbf, #ededed);
-		font-size: 11px;
+		font-size: 0.846rem;
 		div.login {
 			a {
 				&::before {
@@ -76,7 +76,7 @@ div#header-wrapper {
 				&::before {
 					content: ". | ";
 					font-family: arlesfont;
-					font-size: 25px;
+					font-size: 1.923rem;
 					vertical-align: middle;
 				}
 				&:hover {
@@ -121,7 +121,7 @@ div#footer-wrapper {
 	a {
 		color: #000;
 		font-weight: bold;
-		font-size: 11px;
+		font-size: 0.846rem;
 		padding: 3px 0px;
 	}
 	span.logged-in a:first-child::before {
@@ -198,7 +198,7 @@ div#login-page {
 	}
 	h3 {
 		color: $primary-color;
-		font-size: 20px;
+		font-size: 1.538rem;
 	}
 	div.login-actions p {
 		text-align: center;
@@ -231,7 +231,7 @@ div.cell.searchcell {
 		margin-right: 0;
 	}
 	input, button {
-		font-size: 13px;
+		font-size: 1rem;
 		height: 32px;
 		line-height: 24px;
 		margin: 0.2em 0px;
@@ -246,7 +246,7 @@ form.combo-search-form {
 		border: 1px solid #ccc;
 		border-radius: 4px 0 0 4px;
 		color: #676767;
-		font-size: 13px;
+		font-size: 1rem;
 		transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
 		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
 		&:focus {
@@ -306,7 +306,7 @@ div.gru-content {
 			padding-left: 10px;
 			text-decoration: none;
 			vertical-align: 5px;
-			font-size: 15px;
+			font-size: 1.154rem;
 			font-weight: normal;
 			line-height: 22px;
 			text-align: left;
@@ -384,7 +384,7 @@ div.gru-content {
 
 .largewheel {
 	@extend .wheel;
-	font-size: 35px;
+	font-size: 2.692rem;
 	display: block;
 	text-align: center;
 	margin: 10px;
@@ -553,7 +553,7 @@ div.file-upload-widget div.title {
 
 li.is-redirection a::after {
 	content: "\f14c";
-	font-size: 24px;
+	font-size: 1.846rem;
 	color: $primary-color;
 	font-family: FontAwesome;
 	position: absolute;
diff --git a/static/arles/_vars.scss b/static/arles/_vars.scss
index b722eddd..05acdcf4 100644
--- a/static/arles/_vars.scss
+++ b/static/arles/_vars.scss
@@ -3,7 +3,7 @@ $width: 980px;
 $mobile-limit: 768px;
 $small-screen: 480px;
 
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 
 $border-radius: 0;
diff --git a/static/arpajon/_custom.scss b/static/arpajon/_custom.scss
index b4f64a67..eef1a3bb 100644
--- a/static/arpajon/_custom.scss
+++ b/static/arpajon/_custom.scss
@@ -34,14 +34,14 @@
 #nav-wrapper {
 	background: white;
 	margin-bottom: 0px;
-	font-size: 24px;
+	font-size: 1.5rem;
 	border-bottom: 1px solid #e0e0e0;
 	div.gru-nav > ul {
 		padding-top: 2rem;
 		margin-top: 0;
 		margin-bottom: 0px;
 		ul {
-			font-size: 18px;
+			font-size: 1.125rem;
 		}
 	}
 	div.gru-nav > ul > li a {
@@ -134,7 +134,7 @@ div#rub_service form.quixote {
 
 div#rub_service > h2:first-child,
 .gru-content div.textcell h1 {
-	font-size: 60px;
+	font-size: 3.75rem;
 	text-align: center;
 	&::after {
 		content: none;
diff --git a/static/arpajon/_vars.scss b/static/arpajon/_vars.scss
index 7c1f226e..4ac01428 100644
--- a/static/arpajon/_vars.scss
+++ b/static/arpajon/_vars.scss
@@ -3,7 +3,7 @@ $primary-color: #00d3cc;
 $width: 1140px;
 $font-color: #484848;
 $font-family: Din, sans-serif;
-$font-size: 16px;
+$font-size: 1em;
 $nav-background: transparent;
 $nav-submenu-background: #eee;
 $nav-submenu-color: #333;
diff --git a/static/beaulieu/_vars.scss b/static/beaulieu/_vars.scss
index c600c5a4..f319de82 100644
--- a/static/beaulieu/_vars.scss
+++ b/static/beaulieu/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #476592;
 
 $font-color: #6e6e6e;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Arial, sans-serif;
 $width: 1220px;
 $border-radius: 0;
diff --git a/static/blois-2018/_custom.scss b/static/blois-2018/_custom.scss
index 7fee8f0c..4f18bc6a 100644
--- a/static/blois-2018/_custom.scss
+++ b/static/blois-2018/_custom.scss
@@ -113,17 +113,17 @@ div#header {
 			color: white;
 		}
 		h1 {
-			font-size: 40px;
+			font-size: 2.857rem;
 			@media screen and ($max-mobile-viewport) {
 				padding-left: 0;
-				font-size: 30px;
+				font-size: 2.143rem;
 			}
 		}
 		h2 {
-			font-size: 20px;
+			font-size: 1.429rem;
 			font-weight: normal;
 			@media screen and ($max-mobile-viewport) {
-				font-size: 18px;
+				font-size: 1.286rem;
 				margin: 0;
 			}
 		}
@@ -568,7 +568,7 @@ ul#evolutions p.wf-attachment a {
 		line-height: 38px;
 		top: -5px;
 		left: -50px;
-		font-size: 20px;
+		font-size: 1.429rem;
 		background: white;
 	}
 	margin-left: 60px;
diff --git a/static/blois-2018/_vars.scss b/static/blois-2018/_vars.scss
index 0b206ac8..7e15e4e0 100644
--- a/static/blois-2018/_vars.scss
+++ b/static/blois-2018/_vars.scss
@@ -3,7 +3,7 @@ $secondary-color: #5b6a77;
 
 $width: 1280px;
 $sidebar-width: 450px;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: sans-serif;
 
 $body-background: white;
diff --git a/static/bouches-du-rhone/_custom.scss b/static/bouches-du-rhone/_custom.scss
index 2a83d889..aafc9065 100644
--- a/static/bouches-du-rhone/_custom.scss
+++ b/static/bouches-du-rhone/_custom.scss
@@ -27,7 +27,7 @@ div#main-content-wrapper {
 }
 
 .pwa-navigation div > ul li a span, .pwa-navigation div#nav ul li a span {
-	font-size: 12px;
+	font-size: 0.75rem;
 	font-weight: bold;
 	text-transform: uppercase;
 }
diff --git a/static/bouches-du-rhone/_vars.scss b/static/bouches-du-rhone/_vars.scss
index 8223b367..e1ce7dac 100644
--- a/static/bouches-du-rhone/_vars.scss
+++ b/static/bouches-du-rhone/_vars.scss
@@ -1,6 +1,6 @@
 $primary-color: #5b7197;
 $secondary-color: #63c8b8;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: sans-serif;
 $font-color: black;
 
@@ -27,7 +27,7 @@ $nav-after-image: false;
 
 $title-transform: uppercase;
 $title-color: $primary-color;
-$title-font-size: 24px;
+$title-font-size: 1.5rem;
 $title-weight: 300;
 $cell-title-cover-border: false;
 
diff --git a/static/calvados-cd14/_custom.scss b/static/calvados-cd14/_custom.scss
index 24f36249..b189ead2 100644
--- a/static/calvados-cd14/_custom.scss
+++ b/static/calvados-cd14/_custom.scss
@@ -102,7 +102,7 @@ div#tracking-code h3 {
 
 div#rub_service > h2 {
 	text-align: left;
-	font-size: 40px;
+	font-size: 2.5rem;
 	padding-left: 0.5rem;
 	border-bottom: none;
 	line-height: 110%;
diff --git a/static/calvados-cd14/_vars.scss b/static/calvados-cd14/_vars.scss
index 97592015..d14d9768 100644
--- a/static/calvados-cd14/_vars.scss
+++ b/static/calvados-cd14/_vars.scss
@@ -1,7 +1,7 @@
 $width: 1140px;
 $font-family: Raleway, sans-serif;
 $font-color: black;
-$font-size: 16px;
+$font-size: 1em;
 $blue: #003d7e;
 $green: #48b95f;
 $primary-color: $blue;
diff --git a/static/castelnau-le-lez/_custom.scss b/static/castelnau-le-lez/_custom.scss
index 7233c7b3..0bc9ba75 100644
--- a/static/castelnau-le-lez/_custom.scss
+++ b/static/castelnau-le-lez/_custom.scss
@@ -11,7 +11,7 @@ div.textcell {
 	}
 	h2 {
 		@extend %title;
-		font-size: 20px;
+		font-size: 1.25rem;
 	}
 }
 
@@ -88,7 +88,7 @@ div#main-content-wrapper {
 		left: 0;
 		right: 0;
 		max-width: none;
-		font-size: 14px;
+		font-size: 0.875rem;
 	}
 }
 
diff --git a/static/castelnau-le-lez/_vars.scss b/static/castelnau-le-lez/_vars.scss
index 6b82d7e8..89d4561e 100644
--- a/static/castelnau-le-lez/_vars.scss
+++ b/static/castelnau-le-lez/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #004170;
 
 $font-color: black;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Montserrat, sans-serif;
 $width: 1200px;
 
@@ -14,7 +14,7 @@ $border-radius: 0px;
 $button-background: $primary-color;
 $title-background: transparent;
 $title-color: $primary-color;
-$title-font-size: 25px;
+$title-font-size: 1.562rem;
 $title-transform: uppercase;
 $title-weight: 500;
 $footer-background: $primary-color;
diff --git a/static/castries-2020/_vars.scss b/static/castries-2020/_vars.scss
index 950f2b39..da9dabee 100644
--- a/static/castries-2020/_vars.scss
+++ b/static/castries-2020/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #005eaa;
 
 $font-color: #0f0f0f;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Verdana, sans-serif;
 $width: 1100px;
 $border-radius: 1px;
diff --git a/static/castries/_vars.scss b/static/castries/_vars.scss
index f04b7e73..f8656fa7 100644
--- a/static/castries/_vars.scss
+++ b/static/castries/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #3129b3;
 
 $font-color: #3F3F3F;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: "Times New Roman", serif;
 $width: 1000px;
 $border-radius: 5px;
diff --git a/static/chateauroux/_vars.scss b/static/chateauroux/_vars.scss
index a811f86b..e16d7a79 100644
--- a/static/chateauroux/_vars.scss
+++ b/static/chateauroux/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #0779B7;
 $width: 950px;
 $mobile-limit: 800px;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: "Exo 2", arial, helvetica, sans-serif;
 $border-radius: 0;
 $nav-background: transparent;
diff --git a/static/clapiers/_vars.scss b/static/clapiers/_vars.scss
index dd459d4c..8d322afb 100644
--- a/static/clapiers/_vars.scss
+++ b/static/clapiers/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #21c3d4;
 
 $font-color: #3F3F3F;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: 'Montserrat', sans-serif;
 $width: 1140px;
 $border-radius: 0px;
diff --git a/static/clapotis-les-canards/_vars.scss b/static/clapotis-les-canards/_vars.scss
index f4ed2ef8..f53f089c 100644
--- a/static/clapotis-les-canards/_vars.scss
+++ b/static/clapotis-les-canards/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #018B9D !default;
 
 $width: 1160px !default;
 $font-color: #666 !default;
-$font-size: 15px !default;
+$font-size: 0.938em !default;
 $nav-background: #fafafa !default;
 $nav-submenu-background: #eee !default;
 $nav-submenu-color: #333 !default;
diff --git a/static/clermont-metropole/_custom.scss b/static/clermont-metropole/_custom.scss
index 97ce6896..c8ec42c9 100644
--- a/static/clermont-metropole/_custom.scss
+++ b/static/clermont-metropole/_custom.scss
@@ -181,7 +181,7 @@ div#header-top, div#footer {
 				background-size: 30px;
 				padding-top: 70px;
 				span {
-					font-size: 12px;
+					font-size: 0.75rem;
 				}
 				span.badge {
 					top: 30px;
diff --git a/static/clermont-metropole/_vars.scss b/static/clermont-metropole/_vars.scss
index 2a9d16fd..a864761a 100644
--- a/static/clermont-metropole/_vars.scss
+++ b/static/clermont-metropole/_vars.scss
@@ -3,7 +3,7 @@
 $border-radius: 3px;
 $body-background: transparent;
 $font-family: Cabin, sans-serif;
-$font-size: 16px;
+$font-size: 1em;
 $primary-color: #333333;
 $width: 1240px;
 $mobile-limit: 1024px;
diff --git a/static/clisson-sevre-et-maine-agglo/_custom.scss b/static/clisson-sevre-et-maine-agglo/_custom.scss
index bc532764..33da89d3 100644
--- a/static/clisson-sevre-et-maine-agglo/_custom.scss
+++ b/static/clisson-sevre-et-maine-agglo/_custom.scss
@@ -113,7 +113,7 @@ div#footer {
 				border: 1px solid #fff;
 				border-radius: 2px;
 				color: #fff;
-				font-size: 12px;
+				font-size: 0.8rem;
 				padding: 5px 10px;
 				display: block;
 			}
@@ -132,7 +132,7 @@ div#footer {
 				width: 50px;
 				display: block;
 				text-align: center;
-				font-size: 20px;
+				font-size: 1.333rem;
 				&:before {
 					color: #fff;
 					line-height: 44px;
diff --git a/static/clisson-sevre-et-maine-agglo/_vars.scss b/static/clisson-sevre-et-maine-agglo/_vars.scss
index 58cb6a26..fc72ba29 100644
--- a/static/clisson-sevre-et-maine-agglo/_vars.scss
+++ b/static/clisson-sevre-et-maine-agglo/_vars.scss
@@ -5,7 +5,7 @@ $primary-color: #C25D1B;
 $width: 1140px;
 $font-color: #5b4e46;
 $font-family: "PT Sans", sans-serif;
-$font-size: 15px;
+$font-size: 0.938em;
 $link-color: $primary-color;
 $nav-background: transparent;
 $nav-submenu-background: #eee;
diff --git a/static/clisson/_vars.scss b/static/clisson/_vars.scss
index 001a64f5..367b1b43 100644
--- a/static/clisson/_vars.scss
+++ b/static/clisson/_vars.scss
@@ -5,7 +5,7 @@ $primary-color: #C52F1E;
 $width: 1160px;
 $font-color: #666;
 $font-family: Lato, sans-serif;
-$font-size: 15px;
+$font-size: 0.938em;
 $nav-background: transparent;
 $nav-submenu-background: #eee;
 $nav-submenu-color: #333;
diff --git a/static/cnil/_custom.scss b/static/cnil/_custom.scss
index ab816b98..4e197a93 100644
--- a/static/cnil/_custom.scss
+++ b/static/cnil/_custom.scss
@@ -115,7 +115,7 @@ div#title-section {
 	text-align: center;
 	h1 {
 		font-family: "Open Sans Condensed", $title-font-family;
-		font-size: 38px;
+		font-size: 2.375rem;
 		color: #333;
 		text-align: center;
 		font-weight: bold;
@@ -213,13 +213,13 @@ div.large #rub_service form.quixote {
 		clear: both;
 		margin: 25px 0;
 		text-align: left;
-		font-size: 26px;
+		font-size: 1.625rem;
 		line-height: 40px;
 		color: $darkgray;
 		border-bottom: none;
 	}
 	h4 {
-		font-size: 22px;
+		font-size: 1.375rem;
 	}
 	div.buttons {
 	}
@@ -293,7 +293,7 @@ div.list-of-forms {
 .block + .block-fc::after {
 	margin-top: 60px;
 	font-weight: bold;
-	font-size: 24px;
+	font-size: 1.5rem;
 	font-family: $title-font-family;
 	color: $logoblue;
 }
@@ -360,7 +360,7 @@ div.widget label {
 
 .text-check-before-submit {
 	text-align: center;
-	font-size: 20px;
+	font-size: 1.25rem;
 	font-style: italic;
 }
 
diff --git a/static/cnil/_vars.scss b/static/cnil/_vars.scss
index ccb62e2c..7d7fa860 100644
--- a/static/cnil/_vars.scss
+++ b/static/cnil/_vars.scss
@@ -15,7 +15,7 @@ $font-family: Georgia, "Times New Roman", Times, serif;
 
 $title-font-family: "Open Sans", arial, sans-serif;
 $title-transform: uppercase;
-$title-font-size: 20px;
+$title-font-size: 1.25rem;
 $title-weight: bold;
 $title-background: white;
 $title-color: $darkgray;
@@ -23,7 +23,7 @@ $title-padding: 0.7rem 0.5rem;
 
 $width: 1000px;
 $font-color: $typogray;
-$font-size: 16px;
+$font-size: 1em;
 
 $footer-background: #222222;
 $footer-color: #999999;
diff --git a/static/cotes-d-armor/_vars.scss b/static/cotes-d-armor/_vars.scss
index 5b4e0352..13fef4ea 100644
--- a/static/cotes-d-armor/_vars.scss
+++ b/static/cotes-d-armor/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #44DB6F;
 $width: 1200px;
 $font-color: #333;
-$font-size: 15px;
+$font-size: 0.938em;
 $nav-background: transparent;
 $nav-submenu-background: #EEE;
 $nav-submenu-color: #333;
diff --git a/static/cournonterral/_vars.scss b/static/cournonterral/_vars.scss
index 26f6a486..11013511 100644
--- a/static/cournonterral/_vars.scss
+++ b/static/cournonterral/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #008f59;
 
 $font-color: #3F3F3F;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: Verdana, Arial, Helvetica, sans-serif;
 $width: 1040px;
 $border-radius: 0;
diff --git a/static/dauphine/_vars.scss b/static/dauphine/_vars.scss
index 6398dd3a..21475986 100644
--- a/static/dauphine/_vars.scss
+++ b/static/dauphine/_vars.scss
@@ -1,6 +1,6 @@
 $width: 950px;
 $mobile-limit: 800px;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: Arial, sans-serif;
 $nav-background: #DFE2E6;
 $nav-color: #333;
diff --git a/static/dordogne-cd24/_custom.scss b/static/dordogne-cd24/_custom.scss
index 085f88a1..dc0232f6 100644
--- a/static/dordogne-cd24/_custom.scss
+++ b/static/dordogne-cd24/_custom.scss
@@ -30,7 +30,7 @@ $mobile-header-height: 280px;
 	@extend %button;
 	text-transform: uppercase;
 	font-weight: bold;
-	font-size: 16px;
+	font-size: 0.889rem;
 }
 
 %cancel-button {
@@ -458,7 +458,7 @@ h1, h2, h3, h4 {
 }
 
 h1, div#rub_service h2 {
-	font-size: 30px;
+	font-size: 1.667rem;
 }
 
 div#rub_service h2 {
@@ -466,16 +466,16 @@ div#rub_service h2 {
 }
 
 h2, div#rub_service h3 {
-	font-size: 26px;
+	font-size: 1.444rem;
 	color: #88446b;
 }
 
 h3, div#rub_service h4 {
-	font-size: 22px;
+	font-size: 1.222rem;
 }
 
 h4 {
-	font-size: 19px;
+	font-size: 1.056rem;
 }
 
 input, select {
diff --git a/static/dordogne-cd24/_vars.scss b/static/dordogne-cd24/_vars.scss
index bb4167a7..0c9cf345 100644
--- a/static/dordogne-cd24/_vars.scss
+++ b/static/dordogne-cd24/_vars.scss
@@ -3,7 +3,7 @@ $width: 1316px;
 
 $font-family: Montserrat, sans-serif;
 $font-color: #000;
-$font-size: 18px;
+$font-size: 1.125em;
 
 $link-color: #000;
 
@@ -28,7 +28,7 @@ $widget-unique-checkbox-position: left;
 
 $title-background: $primary-color;
 $title-weight: bold;
-$title-font-size: 22px;
+$title-font-size: 1.222rem;
 
 $cell-border: none;
 $cell-entry-hover-background: $primary-color;
diff --git a/static/dreux/_custom.scss b/static/dreux/_custom.scss
index 225eb58f..6f530943 100644
--- a/static/dreux/_custom.scss
+++ b/static/dreux/_custom.scss
@@ -67,7 +67,7 @@ div.buttons.submit {
 	}
 	p {
 		margin: auto;
-		font-size: 16px;
+		font-size: 1.067rem;
 	}
 	a {
 		color: #ffffff;
diff --git a/static/dreux/_vars.scss b/static/dreux/_vars.scss
index 88518b19..a80ce3c8 100644
--- a/static/dreux/_vars.scss
+++ b/static/dreux/_vars.scss
@@ -4,7 +4,7 @@ $secondary-color: #0a0a0a;
 $width: 1100px;;
 $font-color: $secondary-color;
 $font-family: "Roboto", Helvetica, Arial, sans-serif;
-$font-size: 15px;
+$font-size: 0.938em;
 $nav-background: $primary-color;
 $nav-submenu-background: transparentize($primary-color, 0.1);
 $nav-color: white;
diff --git a/static/entrouvert/_carrousel-references.scss b/static/entrouvert/_carrousel-references.scss
index 2b7c56f9..c8eedd8e 100644
--- a/static/entrouvert/_carrousel-references.scss
+++ b/static/entrouvert/_carrousel-references.scss
@@ -109,7 +109,7 @@ div.carrousel-references-content {
 		z-index: 1000;
 		&::after {
 			font-family: FontAwesome;
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		&.carrousel-references-previous {
 			left: 1ex;
diff --git a/static/entrouvert/_custom.scss b/static/entrouvert/_custom.scss
index 4f02ddd5..e3b560d0 100644
--- a/static/entrouvert/_custom.scss
+++ b/static/entrouvert/_custom.scss
@@ -49,7 +49,7 @@ a.pk-button:hover {
 }
 
 #sidebar h1 {
-	font-size: 22px;
+	font-size: 1.375rem;
 	font-weight: 400;
 	margin-top: 30px;
 }
@@ -57,7 +57,7 @@ a.pk-button:hover {
 #toplinks {
 	border: none;
 	box-shadow: none;
-	font-size: 13px;
+	font-size: 0.812rem;
 }
 
 .page-index {
@@ -98,7 +98,7 @@ a.pk-button:hover {
 }
 
 .deuxcolonnes p {
-	font-size: 17px;
+	font-size: 1.062rem;
 	line-height: 1.4;
 }
 
diff --git a/static/entrouvert/_vars.scss b/static/entrouvert/_vars.scss
index 74ba07db..72971128 100644
--- a/static/entrouvert/_vars.scss
+++ b/static/entrouvert/_vars.scss
@@ -5,7 +5,7 @@ $width: 1160px;
 $very-small-limit: 1060px;
 $mobile-header-height: 40px;
 $font-color: #555;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Lato, sans-serif;
 $link-color: #0a71a1;
 $nav-background: white;
@@ -20,7 +20,7 @@ $nav-item-hover-background: white;
 $border-radius: 4px;
 $button-color: white;
 $button-background: $primary-color;
-$title-font-size: 22px;
+$title-font-size: 1.375rem;
 $title-background: white;
 $title-font-family: Lato, sans-serif;
 $footer-background: #919396;
diff --git a/static/essonne-cd91/_custom.scss b/static/essonne-cd91/_custom.scss
index 0affa295..23163be4 100644
--- a/static/essonne-cd91/_custom.scss
+++ b/static/essonne-cd91/_custom.scss
@@ -33,7 +33,7 @@ div#header-wrapper {
 }
 
 div#nav {
-    font-size: 13px;
+    font-size: 0.867rem;
     font-weight: 700;
 	text-align: center;
 	padding-top: 1px;
@@ -88,7 +88,7 @@ div#nav {
 
 div#footer-wrapper {
     margin-top: 0;
-    font-size: 13px;
+    font-size: 0.867rem;
     a {
         text-decoration: underline;
         color: white;
diff --git a/static/essonne-cd91/_vars.scss b/static/essonne-cd91/_vars.scss
index 5be0ef3c..9313da8c 100644
--- a/static/essonne-cd91/_vars.scss
+++ b/static/essonne-cd91/_vars.scss
@@ -9,7 +9,7 @@ $border-radius: 0;
 $width: 1130px;
 $link-color: $primary-color-darker;
 
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: Roboto, sans-serif;
 
 $nav-background: white;
@@ -24,7 +24,7 @@ $responsive-menu: left-to-right;
 
 $title-color: $primary-color-xdarker;
 $title-border-bottom: 3px solid $primary-color;
-$title-font-size: 36px;
+$title-font-size: 2.4rem;
 $title-weight: 400;
 $title-padding: 3rem 1rem 0.7rem 1rem;
 
diff --git a/static/fabregues/_vars.scss b/static/fabregues/_vars.scss
index 4e1cb8c5..2ece7285 100644
--- a/static/fabregues/_vars.scss
+++ b/static/fabregues/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #f3af51;
 
 $font-color: #111;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: Myriad, Arial, Verdana, sans-serif;
 $width: 1003px;
 $border-radius: 0;
diff --git a/static/fondettes/_vars.scss b/static/fondettes/_vars.scss
index 8f2fa80a..3761955e 100644
--- a/static/fondettes/_vars.scss
+++ b/static/fondettes/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #2A697C;
 $width: 950px;
 $mobile-limit: 800px;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: sans-serif;
 $nav-background: transparent;
 $nav-submenu-background: white;
diff --git a/static/fontenay-sous-bois-2018/_custom.scss b/static/fontenay-sous-bois-2018/_custom.scss
index e5afd1d0..23882e22 100644
--- a/static/fontenay-sous-bois-2018/_custom.scss
+++ b/static/fontenay-sous-bois-2018/_custom.scss
@@ -25,7 +25,7 @@ div#header-wrapper {
 	}
 	#home-link {
 		display: block;
-		font-size: 20px;
+		font-size: 1rem;
 		color: white;
 		position: absolute;
 		top: 0;
@@ -50,7 +50,7 @@ div#header-wrapper {
 		background: transparent;
 		top: 1rem;
 		text-transform: uppercase;
-		font-size: 18px;
+		font-size: 0.9rem;
 		a {
 			color: white;
 			.connected-user {
diff --git a/static/fontenay-sous-bois-2018/_vars.scss b/static/fontenay-sous-bois-2018/_vars.scss
index aa3e3f86..a62fdada 100644
--- a/static/fontenay-sous-bois-2018/_vars.scss
+++ b/static/fontenay-sous-bois-2018/_vars.scss
@@ -1,6 +1,6 @@
 $border-radius: 3px;
 $primary-color: #da3838;
-$font-size: 20px;
+$font-size: 1.25em;
 $font-family: "Barlow Condensed", sans-serif;
 $link-color: $primary-color;
 
@@ -18,7 +18,7 @@ $cell-title-cover-border: false;
 
 $title-background: transparent;
 $title-transform: uppercase;
-$title-font-size: 28px;
+$title-font-size: 1.4rem;
 $title-color: #2f2f2f;
 $title-weight: bold;
 $title-padding: 0.7rem 0rem;
diff --git a/static/gers-cd32/_custom.scss b/static/gers-cd32/_custom.scss
index 813b3589..fb4d79a8 100644
--- a/static/gers-cd32/_custom.scss
+++ b/static/gers-cd32/_custom.scss
@@ -80,7 +80,7 @@ div#contenu {
 			background-color: $primary-color;
 			span.gru-icon::after {
 				@include form-icon("\f046");
-				font-size: 20px;
+				font-size: 1rem;
 				font-weight: 400;
 			}
 			@media screen and (max-width: $my-tablet-limit) {
@@ -115,7 +115,7 @@ div#contenu {
 		display: flex;
 		flex-direction: row;
 		justify-content: flex-end;
-		font-size: 16px;
+		font-size: 0.8rem;
 		font-weight: 300;
 		padding-top: 2em;
 		padding-bottom: 74px;
@@ -134,7 +134,7 @@ span.connected-user {
 }
 a.account::after {
 	@include form-icon("\f013");
-	font-size: 19px;
+	font-size: 0.95rem;
 	color: black;
 	border-style: solid;
 	border-width: 0 0 0 1px;
@@ -143,7 +143,7 @@ a.account::after {
 }
 a.logout::after {
 	@include form-icon("\f011");
-	font-size: 19px;
+	font-size: 0.95rem;
 	border-style: solid;
 	border-width: 0 0 0 1px;
 	padding: 0 7px 0 7px;
@@ -163,7 +163,7 @@ div#nav-wrapper {
 	button {
 		position: absolute;
 		right: 4rem;
-		font-size: 14px;
+		font-size: 0.7rem;
 		font-weight: 400;
 		padding-left: 50px;
 		color: $tertiary-color;
@@ -198,7 +198,7 @@ div#nav-wrapper {
 
 div#header-post {
 	font-weight: 900;
-	font-size: 45px;
+	font-size: 2.25rem;
 	line-height: 1;
 	text-align: center;
 	background-color: $secondary-color;
@@ -226,11 +226,11 @@ div#footer {
 		border-color: transparent !important;
 	}
 	address.site-infos__listitems {
-		font-size: 15px;
+		font-size: 0.75rem;
 		font-weight: 400;
 		font-style: normal;
 		p:first-child {
-			font-size: 21px;
+			font-size: 1.05rem;
 			font-weight: 700;
 		}
 		@media screen and (max-width: $my-mobile-limit) {
@@ -239,7 +239,7 @@ div#footer {
 	}
 	a.contact-social__link {
 		display: block;
-		font-size: 20px;
+		font-size: 1rem;
 		font-weight: 700;
 		border: solid 1px;
 		border-radius: 5px;
@@ -285,7 +285,7 @@ div#footer {
 			padding: 0;
 			li {
 				a {
-					font-size: 14px;
+					font-size: 0.7rem;
 					text-transform: uppercase;
 				}
 			}
@@ -294,7 +294,7 @@ div#footer {
 	.menu-cross__item::before {
 		@include form-icon("\f105");
 		padding-right: 5px;
-		font-size: 16px;
+		font-size: 0.8rem;
 		font-weight: 800;
 	}
 }
diff --git a/static/gers-cd32/_vars.scss b/static/gers-cd32/_vars.scss
index 65514e4e..ad8395d0 100644
--- a/static/gers-cd32/_vars.scss
+++ b/static/gers-cd32/_vars.scss
@@ -3,7 +3,7 @@ $secondary-color: #f4f4f4;
 $tertiary-color: #0f183b;
 
 $border-radius: 3px;
-$font-size: 20px;
+$font-size: 1.25em;
 $font-family: Montserrat, sans-serif;
 $link-color: $primary-color;
 
@@ -23,7 +23,7 @@ $cell-border: none;
 $cell-entry-hover-background: transparent;
 
 $title-transform: uppercase;
-$title-font-size: 28px;
+$title-font-size: 1.4rem;
 $title-weight: bold;
 $title-padding: 0.7rem 0rem;
 
diff --git a/static/gorges/_vars.scss b/static/gorges/_vars.scss
index b08f2db8..96bdfd5c 100644
--- a/static/gorges/_vars.scss
+++ b/static/gorges/_vars.scss
@@ -4,7 +4,7 @@ $primary-color: #268682;
 $width: 1160px;
 $font-color: #666;
 $font-family: Catamaran, sans-serif;
-$font-size: 15px;
+$font-size: 0.938em;
 $nav-background: transparent;
 $nav-submenu-background: #eee;
 $nav-submenu-color: #333;
diff --git a/static/grandlyon-sau/_custom.scss b/static/grandlyon-sau/_custom.scss
index 736abc4c..6558d067 100644
--- a/static/grandlyon-sau/_custom.scss
+++ b/static/grandlyon-sau/_custom.scss
@@ -62,7 +62,7 @@ div#header-wrapper {
 		padding-bottom: 40px;
 		text-indent: -10000px;
 		color: #4D4D4D;
-		font-size: 30px;
+		font-size: 1.875rem;
 		font-weight: normal;
 		background: url(img/logo-sau.png) center center no-repeat;
 		width: 277px;
@@ -140,7 +140,7 @@ div.cell > div {
 				h2 {
 					letter-spacing: 2px;
 					font-weight: normal;
-					font-size: 30px;
+					font-size: 1.875rem;
 				}
 			}
 			> div:first-child {
diff --git a/static/grandlyon-sau/_vars.scss b/static/grandlyon-sau/_vars.scss
index 6522f099..8e715914 100644
--- a/static/grandlyon-sau/_vars.scss
+++ b/static/grandlyon-sau/_vars.scss
@@ -1,6 +1,6 @@
 $width: 1200px;
 $mobile-limit: 800px;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: "Source Sans Pro", sans-serif;
 $border-radius: 0;
 $body-background: #F2F2F2;
diff --git a/static/grandlyon/_custom.scss b/static/grandlyon/_custom.scss
index a1720e59..978361c8 100644
--- a/static/grandlyon/_custom.scss
+++ b/static/grandlyon/_custom.scss
@@ -37,7 +37,7 @@ div#nav-wrapper {
 div#nav {
 	margin-bottom: -1px;
 	font-family: $title-font-family;
-	font-size: 14px;
+	font-size: 0.933rem;
 }
 
 div#nav > ul {
diff --git a/static/grandlyon/_vars.scss b/static/grandlyon/_vars.scss
index 664c1841..66917422 100644
--- a/static/grandlyon/_vars.scss
+++ b/static/grandlyon/_vars.scss
@@ -1,6 +1,6 @@
 $width: 1180px;
 $mobile-limit: 800px;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 $border-radius: 0;
 $primary-color: #DA0000;
@@ -15,7 +15,7 @@ $nav-item-selected-color: $primary-color;
 $nav-menu-color: $primary-color;
 $button-background: #363636;
 $title-font-family: "Segoe UI", $font-family;
-$title-font-size: 28px;
+$title-font-size: 1.867rem;
 $title-weight: bold;
 $title-background: white;
 $title-color: #000;
diff --git a/static/grenoble-metropole-2019/_vars.scss b/static/grenoble-metropole-2019/_vars.scss
index fae549d5..99216e19 100644
--- a/static/grenoble-metropole-2019/_vars.scss
+++ b/static/grenoble-metropole-2019/_vars.scss
@@ -1,7 +1,7 @@
 $width: 1100px;
 $mobile-limit: 1024px;
 $nav-full-width-background: true;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Roboto;
 $primary-color: #FFEC44;
 $link-color: #000000;
@@ -11,7 +11,7 @@ $very-small-screen: 330px;
 
 $title-border-bottom: none;
 $title-color: #000;
-$title-font-size: 32px;
+$title-font-size: 2rem;
 $title-font-family: 'Josefin Sans';
 $title-weight: bold;
 $title-background: transparent;
diff --git a/static/greville-hague/_vars.scss b/static/greville-hague/_vars.scss
index c9731c10..eb332316 100644
--- a/static/greville-hague/_vars.scss
+++ b/static/greville-hague/_vars.scss
@@ -3,7 +3,7 @@ $secondary-color: #AD987B; /* light brown */
 
 $width: 950px;
 $font-color: #333;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: Verdana, Arial, Helvetica, sans-serif;
 $nav-background: $secondary-color;
 $nav-color: white;
diff --git a/static/groupe-up/_custom.scss b/static/groupe-up/_custom.scss
index 24d1b236..938038d2 100644
--- a/static/groupe-up/_custom.scss
+++ b/static/groupe-up/_custom.scss
@@ -534,7 +534,7 @@ div#profile {
 	h2 {
 		padding-top: 30px;
 		height: 80px;
-		font-size: 30px;
+		font-size: 1.875rem;
 		color: $darkblue;
 		text-transform: uppercase;
 	}
@@ -630,7 +630,7 @@ div#rub_service > h2:first-child,
 	color: $base-color;
 	text-transform: uppercase;
 	font-weight: normal;
-	font-size: 30px;
+	font-size: 1.875rem;
 	margin-top: 1rem;
 }
 
diff --git a/static/groupe-up/_vars.scss b/static/groupe-up/_vars.scss
index 316175c9..93fa42ac 100644
--- a/static/groupe-up/_vars.scss
+++ b/static/groupe-up/_vars.scss
@@ -28,7 +28,7 @@ $nav-item-spacing: 3rem;
 $title-background: transparent;
 $title-color: $lightblue;
 $title-weight: bold;
-$title-font-size: 20px;
+$title-font-size: 1.25rem;
 $title-padding: 0.5rem;
 
 $table-headers-background: #1e7590;
diff --git a/static/haute-garonne-cd31/_custom.scss b/static/haute-garonne-cd31/_custom.scss
index feeb8559..7745aa7b 100644
--- a/static/haute-garonne-cd31/_custom.scss
+++ b/static/haute-garonne-cd31/_custom.scss
@@ -73,7 +73,7 @@ nav {
 		}
 		a {
 			text-transform: uppercase;
-			font-size: 16px;
+			font-size: 1.143rem;
 			font-weight: 600;
 		}
 	}
@@ -178,7 +178,7 @@ div#vos-demarches {
 		position: relative;
 		top: 25px;
 		@extend %title;
-		font-size: 27px;
+		font-size: 1.929rem;
 		border-bottom: 0;
 		padding-left: 0;
 		&::before {
@@ -333,7 +333,7 @@ $cell_colors: ( ("bleu", $bleu),
 		background: url(img/picto-code-suivi.svg) left top no-repeat;
 		background-size: 120px 80px;
 		padding-left: 120px;
-		font-size: 22px;
+		font-size: 1.571rem;
 	}
 	form {
 		display: flex;
@@ -356,7 +356,7 @@ body.has-picture {
 		color: white;
 		border: 0;
 		text-align: left;
-		font-size: 37px;
+		font-size: 2.643rem;
 		text-transform: uppercase;
 		font-weight: 600;
 	}
@@ -371,13 +371,13 @@ body.has-picture {
 		&.long-title {
 			margin-top: -180px;
 			min-height: 180px;
-			font-size: 30px;
+			font-size: 2.143rem;
 		}
 	}
 }
 
 div#rub_service {
-	font-size: 16px;
+	font-size: 1.143rem;
 	form {
 		h3 {
 			@extend %title;
@@ -429,7 +429,7 @@ div#tracking-code {
 		color: $violet;
 		border-bottom: 0;
 		padding-left: 110px;
-		font-size: 22px;
+		font-size: 1.571rem;
 	}
 	a {
 		margin-top: 1rem;
@@ -438,7 +438,7 @@ div#tracking-code {
 		background: $violet;
 		color: white;
 		padding-bottom: 4px;
-		font-size: 27px;
+		font-size: 1.929rem;
 		text-decoration: underline;
 	}
 	@media screen and ($max-mobile-viewport) {
@@ -446,7 +446,7 @@ div#tracking-code {
 			display: flex;
 			h3, a {
 				display: inline-block;
-				font-size: 18px;
+				font-size: 1.286rem;
 			}
 			a {
 				padding: 2px;
@@ -508,12 +508,12 @@ div.comment-field,
 div.textcell {
 	line-height: 130%;
 	h1 {
-		font-size: 37px;
+		font-size: 2.643rem;
 		font-weight: 600;
 		text-transform: uppercase;
 	}
 	h2 {
-		font-size: 27px;
+		font-size: 1.929rem;
 		font-weight: 600;
 	}
 	a {
@@ -548,7 +548,7 @@ footer {
 		background-position: 50% 10px;
 		padding-top: 38px;
 		span {
-			font-size: 11px;
+			font-size: 0.786rem;
 		}
 	}
 }
diff --git a/static/haute-garonne-cd31/_vars.scss b/static/haute-garonne-cd31/_vars.scss
index 665f6042..efe195b0 100644
--- a/static/haute-garonne-cd31/_vars.scss
+++ b/static/haute-garonne-cd31/_vars.scss
@@ -9,7 +9,7 @@ $orange: #E67300;
 
 $font-color: black;
 $font-family: Poppins, sans-serif;
-$font-size: 14px;
+$font-size: 0.875em;
 $link-color: inherit;
 
 $primary-color: $bleu;
@@ -27,7 +27,7 @@ $nav-mobile-bottom-bar-item-hover-background: $bleufonce;
 
 $title-background: transparent;
 $title-color: $primary-color;
-$title-font-size: 20px;
+$title-font-size: 1.429rem;
 $title-weight: 600;
 $title-border-bottom: 2px solid $primary-color;
 
diff --git a/static/haute-goulaine/_vars.scss b/static/haute-goulaine/_vars.scss
index 1a2da581..af07676f 100644
--- a/static/haute-goulaine/_vars.scss
+++ b/static/haute-goulaine/_vars.scss
@@ -4,7 +4,7 @@ $secondary-color: #F37C00; /* orange */
 $width: 964px;
 $font-color: #2C2C2C;
 $font-family: Verdana, Tahoma, Arial, sans-serif;
-$font-size: 13px;
+$font-size: 0.812em;
 $nav-background: $primary-color;
 $nav-submenu-background: $primary-color;
 $nav-submenu-color: white;
diff --git a/static/jobourg/_vars.scss b/static/jobourg/_vars.scss
index 7d0aa26b..f56955b5 100644
--- a/static/jobourg/_vars.scss
+++ b/static/jobourg/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #436C92; /* blue */
 
 $width: 950px;
 $font-color: #333;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: "Trebuchet MS", sans-serif;
 $nav-background: $primary-color;
 $nav-color: white;
diff --git a/static/juvignac/_vars.scss b/static/juvignac/_vars.scss
index 840649f7..20bb1295 100644
--- a/static/juvignac/_vars.scss
+++ b/static/juvignac/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #00a8c0;
 
 $font-color: #3F3F3F;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: "Open Sans", sans-serif;
 $width: 1180px;
 
diff --git a/static/la-hague/_vars.scss b/static/la-hague/_vars.scss
index 2ed9aee7..81e366c9 100644
--- a/static/la-hague/_vars.scss
+++ b/static/la-hague/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #5ABEB9;
 
 $width: 1200px;
 $font-color: #515151;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: Verdana, Arial, sans-serif;
 $nav-background: $primary-color;
 $nav-active-color: darken($nav-background, 10%);
diff --git a/static/la-reunion/_vars.scss b/static/la-reunion/_vars.scss
index a4a74697..f7c9caba 100644
--- a/static/la-reunion/_vars.scss
+++ b/static/la-reunion/_vars.scss
@@ -3,7 +3,7 @@ $primary-color: #024395;
 $width: 1300px;
 $footer-background: $primary-color;
 $font-color: #666;
-$font-size: 15px;
+$font-size: 0.938em;
 $nav-background: transparent;
 $nav-submenu-background: rgba(240, 240, 255, 0.95);
 $nav-submenu-color: #333;
diff --git a/static/la-seyne-sur-mer/_vars.scss b/static/la-seyne-sur-mer/_vars.scss
index 8c1f0d96..10941b8b 100644
--- a/static/la-seyne-sur-mer/_vars.scss
+++ b/static/la-seyne-sur-mer/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #1DA1AE;
 
 $font-color: #565656;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: sans-serif;
 $nav-background: $primary-color;
 $nav-color: white;
diff --git a/static/lattes/_vars.scss b/static/lattes/_vars.scss
index e95df169..6471dc58 100644
--- a/static/lattes/_vars.scss
+++ b/static/lattes/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #1e73be;
 
 $font-color: #3F3F3F;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: Montserrat, sans-serif;
 $width: 1100px;
 $border-radius: 0;
diff --git a/static/laverune/_vars.scss b/static/laverune/_vars.scss
index ac8709b2..ce8682b4 100644
--- a/static/laverune/_vars.scss
+++ b/static/laverune/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #0071e0;
 
 $font-color: #333;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: Lato, sans-serif;
 $width: 980px;
 $border-radius: 0;
diff --git a/static/le-cres/_custom.scss b/static/le-cres/_custom.scss
index 1fb4e93a..469a44a4 100644
--- a/static/le-cres/_custom.scss
+++ b/static/le-cres/_custom.scss
@@ -54,7 +54,7 @@ div#nav {
 	border: none;
 	box-shadow: none;
 	border-radius: 0;
-	font-size: 14px;
+	font-size: 0.875rem;
 	a {
 		display: inline-block;
 		color: white;
diff --git a/static/le-cres/_vars.scss b/static/le-cres/_vars.scss
index ef54931c..a4e201e6 100644
--- a/static/le-cres/_vars.scss
+++ b/static/le-cres/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #00aecd;
 
 $font-color: #3F3F3F;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: sans-serif;
 $width: 1140px;
 
diff --git a/static/lenord/_custom.scss b/static/lenord/_custom.scss
index a19345ec..81a4b3ef 100644
--- a/static/lenord/_custom.scss
+++ b/static/lenord/_custom.scss
@@ -13,7 +13,7 @@ div#header {
 		background: url('img/logo.png') center right no-repeat;
 		height: 2em;
 		padding: 1em 0 0 0;
-		font-size: 60px;
+		font-size: 4.615rem;
 		line-height: 60px;
 		font-weight: bold;
 		margin: 0 20px;
diff --git a/static/lenord/_vars.scss b/static/lenord/_vars.scss
index b8bfe313..a5183bec 100644
--- a/static/lenord/_vars.scss
+++ b/static/lenord/_vars.scss
@@ -1,7 +1,7 @@
 $width: 992px;
 $mobile-limit: 800px;
 $primary-color: #6B7A99;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: "Open Sans", sans-serif;
 $nav-background: transparent;
 $nav-color: #000;
diff --git a/static/lille-metropole/_custom.scss b/static/lille-metropole/_custom.scss
index 1bb7279c..d9b1248c 100644
--- a/static/lille-metropole/_custom.scss
+++ b/static/lille-metropole/_custom.scss
@@ -7,7 +7,7 @@ a#publik-portal-agent {
 }
 
 span#environment-label {
-	font-size: 10px;
+	font-size: 0.714rem;
 }
 
 %title {
diff --git a/static/lille-metropole/_vars.scss b/static/lille-metropole/_vars.scss
index 84a7d7cc..c2d6e9c7 100644
--- a/static/lille-metropole/_vars.scss
+++ b/static/lille-metropole/_vars.scss
@@ -1,6 +1,6 @@
 $font-color: #494949;
 $font-family: Lato, sans-serif;
-$font-size: 14px;
+$font-size: 0.875em;
 $primary-color: #e20714;
 $border-radius: 0px;
 $width: 1000px;
@@ -18,7 +18,7 @@ $footer-background: #dcdcdc;
 $footer-color: $font-color;
 
 $title-font-family: Montserrat, sans-serif;
-$title-font-size: 20px;
+$title-font-size: 1.429rem;
 $title-weight: bold;
 $title-color: #4c4c4c;
 $title-padding: 0.7rem 0.5rem;
diff --git a/static/lille/_custom.scss b/static/lille/_custom.scss
index 31b3f9c9..c41109ce 100644
--- a/static/lille/_custom.scss
+++ b/static/lille/_custom.scss
@@ -65,7 +65,7 @@ nav {
 			padding-top: 0.5rem;
 			background-size: 80px;
 			background-position: bottom 0.5rem left 50%;
-			font-size: 16px;
+			font-size: 0.8rem;
 			height: $mobile-header-height;
 			width: 50vw;
 			&::after {
@@ -80,7 +80,7 @@ nav {
 #lille-user-info {
 	background: url($data_uri_comptepersonnel) 0 5px no-repeat;
 	background-size: 27px 33px;
-	font-size: 18px;
+	font-size: 0.9rem;
 	position: absolute;
 	top: 45px;
 	left: 120px;
@@ -95,7 +95,7 @@ nav {
 		padding-top: 5px;
 		top: 20px;
 		left: 80px;
-		font-size: 14px;
+		font-size: 0.7rem;
 	}
 	@media screen and (max-width: 360px) {
 		left: 60px;
@@ -173,7 +173,7 @@ div.gru-nav .gru-nav-button {
 					line-height: 120%;
 					text-align: left;
 					padding-left: 35px;
-					font-size: 15px;
+					font-size: 0.75rem;
 					height: 40px;
 				}
 				span.badge {
@@ -229,7 +229,7 @@ div.gru-nav .gru-nav-button {
 		max-width: 50%;
 		line-height: 120%;
 		strong {
-			font-size: 40px;
+			font-size: 2rem;
 			line-height: 130%;
 			text-transform: uppercase;
 		}
@@ -238,7 +238,7 @@ div.gru-nav .gru-nav-button {
 			left: 22px;
 			max-width: 80%;
 			strong {
-				font-size: 24px;
+				font-size: 1.2rem;
 			}
 		}
 	}
@@ -268,7 +268,7 @@ div.gru-nav .gru-nav-button {
 				font-weight: bold;
 				text-transform: uppercase;
 				margin: 0;
-				font-size: 24px;
+				font-size: 1.2rem;
 				@media screen and ($max-mobile-viewport) {
 					padding-top: 5px;
 				}
@@ -296,7 +296,7 @@ div.gru-nav .gru-nav-button {
 				margin: 0;
 				background: #1a1a1a;
 				color: white;
-				font-size: 35px;
+				font-size: 1.75rem;
 				&::after {
 					content: "\f054";  // chevron-right
 					font-family: FontAwesome;
@@ -305,7 +305,7 @@ div.gru-nav .gru-nav-button {
 				}
 				@media screen and ($max-mobile-viewport) {
 					top: 15px;
-					font-size: 25px;
+					font-size: 1.25rem;
 					height: 50px;
 					width: 50px;
 					&::after {
@@ -318,7 +318,7 @@ div.gru-nav .gru-nav-button {
 			width: 50%;
 			float: right;
 			margin-right: 50px;
-			font-size: 18px;
+			font-size: 0.9rem;
 			padding-top: 10px;
 			@media screen and ($max-mobile-viewport) {
 				width: auto;
@@ -337,14 +337,14 @@ div.gru-nav .gru-nav-button {
 			text-transform: uppercase;
 			margin-bottom: 0;
 			letter-spacing: 4px;
-			font-size: 26px;
+			font-size: 1.3rem;
 			font-weight: 900;
 		}
 		h3 {
 			text-transform: uppercase;
 			margin-bottom: 0;
 			margin-top: 0;
-			font-size: 16px;
+			font-size: 0.8rem;
 			letter-spacing: 4px;
 		}
 		padding-bottom: 30px;
@@ -388,7 +388,7 @@ div.gru-nav .gru-nav-button {
 			color: white;
 			padding: 1rem;
 			text-transform: uppercase;
-			font-size: 14px;
+			font-size: 0.7rem;
 			&:hover {
 				text-decoration: underline;
 			}
@@ -433,7 +433,7 @@ div#content div.wcsformsofcategorycell {
 			// underline dash.
 			font-family: FontAwesome;
 			content: "\f106";  // angle-up
-			font-size: 30px;
+			font-size: 1.5rem;
 			position: absolute;
 			right: 1em;
 			cursor: pointer;
@@ -473,7 +473,7 @@ div#content div.wcsformsofcategorycell {
 		padding-left: 70px;
 		text-transform: uppercase;
 		color: #454545;
-		font-size: 14px;
+		font-size: 0.7rem;
 		font-weight: bold;
 	}
 	ul > .add-more-items a {
@@ -538,7 +538,7 @@ div#title-section {
 		margin-bottom: 1rem;
 		text-transform: uppercase;
 		@media screen and ($max-mobile-viewport) {
-			font-size: 28px;
+			font-size: 1.4rem;
 		}
 		&::after {
 			content: "";
@@ -610,7 +610,7 @@ div#rub_service div#tracking-code {
 				z-index: 100;
 				position: relative;
 				font-weight: bold;
-				font-size: 24px;
+				font-size: 1.2rem;
 				border-right: 2px solid white;
 				border-radius: none;
 				&::after {
@@ -695,10 +695,10 @@ div#rub_service div#tracking-code {
 					padding-left: 16px;
 					display: inline-block;
 					color: black;
-					font-size: 24px;
+					font-size: 1.2rem;
 				}
 				.label {
-					font-size: 24px;
+					font-size: 1.2rem;
 				}
 			}
 		}
@@ -769,7 +769,7 @@ div#rub_service h3 {
 }
 
 div.datetimepicker {
-	font-size: 16px;
+	font-size: 0.8rem;
 }
 
 form.quixote {
@@ -787,7 +787,7 @@ form.quixote {
 
 div.textcell h1 {
 	@extend %title;
-	font-size: 40px;
+	font-size: 2rem;
 	padding-left: 0;
 }
 
diff --git a/static/lille/_vars.scss b/static/lille/_vars.scss
index 8ec0da4f..30921613 100644
--- a/static/lille/_vars.scss
+++ b/static/lille/_vars.scss
@@ -3,7 +3,7 @@
 $border-radius: 3px;
 $primary-color: #e1001a;
 $font-color: #1a1a1a;
-$font-size: 20px;
+$font-size: 1.25em;
 $font-family: Lato, sans-serif;
 $link-color: $primary-color;
 
diff --git a/static/lot-cd46/_vars.scss b/static/lot-cd46/_vars.scss
index 906ae40a..a1331233 100644
--- a/static/lot-cd46/_vars.scss
+++ b/static/lot-cd46/_vars.scss
@@ -1,5 +1,5 @@
 $font-family: Ubuntu, sans-serif;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-color: #333;
 $darkpink: #ef2c6a;
 $lightpink: #fe4680;
@@ -17,7 +17,7 @@ $button-background: $primary-color;
 $cell-border: 1px solid transparent;
 $title-color: $darkpink;
 $title-weight: 500;
-$title-font-size: 30px;
+$title-font-size: 2.143rem;
 $title-border-bottom: 2px solid $primary-color;
 $title-border-radius: 0;
 $title-padding: 0.7rem 0.5rem;
diff --git a/static/lozere/_vars.scss b/static/lozere/_vars.scss
index dea1f874..aa2b40cd 100644
--- a/static/lozere/_vars.scss
+++ b/static/lozere/_vars.scss
@@ -6,7 +6,7 @@ $darkgray: #707173;
 $width: 980px;
 $font-color: black;
 $font-family: 'Droid Sans', Arial, serif;
-$font-size: 13px;
+$font-size: 0.812em;
 $nav-background: $darkgray;
 $nav-submenu-background: #eee;
 $nav-submenu-color: #333;
diff --git a/static/marcoussis/_vars.scss b/static/marcoussis/_vars.scss
index 4c44455d..15fabb75 100644
--- a/static/marcoussis/_vars.scss
+++ b/static/marcoussis/_vars.scss
@@ -3,7 +3,7 @@ $primary-color: #2B37A4;
 $width: 1260px;
 $font-color: #545454;
 $font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
-$font-size: 14px;
+$font-size: 0.875em;
 $nav-background: $primary-color;
 $nav-submenu-background: $primary-color;
 $nav-submenu-color: white;
diff --git a/static/massoins/_vars.scss b/static/massoins/_vars.scss
index 274ca4d9..cd76d21a 100644
--- a/static/massoins/_vars.scss
+++ b/static/massoins/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #4DB2EC;
 $width: 1164px;
 $mobile-limit: 800px;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: sans-serif;
 $nav-background: transparent;
 $nav-submenu-background: white;
diff --git a/static/mauguio/_custom.scss b/static/mauguio/_custom.scss
index b24943f3..9a6dc0e5 100644
--- a/static/mauguio/_custom.scss
+++ b/static/mauguio/_custom.scss
@@ -38,7 +38,7 @@
 		}
 	}
 	#logo {
-		font-size: 70px;
+		font-size: 4.667rem;
 		text-align: center;
 		a {
 			height: 210px;
diff --git a/static/mauguio/_vars.scss b/static/mauguio/_vars.scss
index 0818cfcb..cf3224c0 100644
--- a/static/mauguio/_vars.scss
+++ b/static/mauguio/_vars.scss
@@ -4,7 +4,7 @@ $font-family: Titillium, sans-serif;
 $width: 1260px;
 $font-color: #161616;
 $link-color: #161616;
-$font-size: 15px;
+$font-size: 0.938em;
 $nav-background: black;
 $nav-submenu-background: #eee;
 $nav-submenu-color: #333;
diff --git a/static/meaux/_vars.scss b/static/meaux/_vars.scss
index faf59751..d02ec2f1 100644
--- a/static/meaux/_vars.scss
+++ b/static/meaux/_vars.scss
@@ -1,6 +1,6 @@
 $width: 1205px;
 $mobile-limit: 700px;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: sans-serif;
 $nav-background: #404040;
 $nav-color: white;
diff --git a/static/metz-metropole-2019/_custom.scss b/static/metz-metropole-2019/_custom.scss
index 3e3c287b..62de03cb 100644
--- a/static/metz-metropole-2019/_custom.scss
+++ b/static/metz-metropole-2019/_custom.scss
@@ -34,7 +34,7 @@ button::-moz-focus-inner {
 			color: $darkblue;
 			display: inline-block;
 			float: left;
-			font-size: 13px;
+			font-size: 0.812rem;
 			font-weight: 500;
 		}
 		span {
@@ -189,7 +189,7 @@ div.gru-nav .gru-nav-button {
 				text-transform: uppercase;
 				font-weight: bold;
 				line-height: 110%;
-				font-size: 13px;
+				font-size: 0.812rem;
 				font-weight: 500;
 			}
 		}
@@ -220,7 +220,7 @@ div.gru-nav .gru-nav-button {
 				background-position: 15px 50%;
 				padding-top: 10px;
 				span {
-					font-size: 15px;
+					font-size: 0.938rem;
 				}
 				span.badge {
 					padding: 0;
@@ -319,7 +319,7 @@ div.gru-nav .gru-nav-button {
 				position: relative;
 				z-index: 10;
 				text-transform: uppercase;
-				font-size: 20px;
+				font-size: 1.25rem;
 			}
 			h2 {
 				padding-top: 100px;
@@ -346,7 +346,7 @@ div.gru-nav .gru-nav-button {
 				background: $darkblue;
 				width: 300px;
 				h3, p {
-					font-size: 14px;
+					font-size: 0.875rem;
 					margin: 0;
 					color: white;
 					text-transform: uppercase;
@@ -355,7 +355,7 @@ div.gru-nav .gru-nav-button {
 					}
 				}
 				h3 {
-					font-size: 18px;
+					font-size: 1.125rem;
 				}
 			}
 		}
@@ -401,7 +401,7 @@ div.carrousel-content {
 		margin-bottom: 0;
 		@media screen and ($max-mobile-viewport) {
 			vertical-align: top;
-			font-size: 16px;
+			font-size: 1rem;
 		}
 	}
 	input + div div.carrousel-item div.carrousel-item-content > a {
@@ -465,12 +465,12 @@ footer #idea {
 		text-align: center;
 		text-transform: uppercase;
 		font-weight: bold;
-		font-size: 13px;
+		font-size: 0.812rem;
 		margin: 0;
 		a {
 			display: block;
 			padding-top: 40px;
-			font-size: 22px;
+			font-size: 1.375rem;
 			letter-spacing: 1.5px;
 			color: white;
 		}
@@ -486,7 +486,7 @@ footer #idea {
 			a {
 				font-weight: bold;
 				padding-top: 10px;
-				font-size: 18px;
+				font-size: 1.125rem;
 			}
 		}
 	}
@@ -569,14 +569,14 @@ footer {
 				position: static;
 				text-align: left;
 				width: 200px;
-				font-size: 26px;
+				font-size: 1.625rem;
 				line-height: 110%;
 				font-weight: 500;
 				top: 0px;
 				height: 100%;
 				@media screen and ($max-mobile-viewport) {
 					width: auto;
-					font-size: 18px;
+					font-size: 1.125rem;
 				}
 			}
 		}
@@ -676,7 +676,7 @@ div#title-section {
 	h1 {
 		margin: 0;
 		text-transform: uppercase;
-		font-size: 50px;
+		font-size: 3.125rem;
 		line-height: 100%;
 		letter-spacing: 1.5px;
 		padding-top: 60px;
@@ -686,7 +686,7 @@ div#title-section {
 		@media screen and ($max-mobile-viewport) {
 			padding-top: 10px;
 			padding-bottom: 10px;
-			font-size: 20px;
+			font-size: 1.25rem;
 		}
 	}
 
@@ -699,7 +699,7 @@ div#title-section {
 			display: block;
 			text-align: right;
 			color: $darkblue;
-			font-size: 13px;
+			font-size: 0.812rem;
 		}
 		span.commune {
 			font-weight: bold;
@@ -915,7 +915,7 @@ div#rub_service h3 {
 }
 
 div.datetimepicker {
-	font-size: 16px;
+	font-size: 1rem;
 }
 
 form.quixote {
@@ -935,7 +935,7 @@ form.quixote {
 
 div.textcell h1 {
 	@extend %title;
-	font-size: 40px;
+	font-size: 2.5rem;
 	padding-left: 0;
 }
 
@@ -1019,13 +1019,13 @@ a.big-image-link {
 		@media screen and ($max-mobile-viewport) {
 			strong {
 				top: 80px;
-				font-size: 14px;
+				font-size: 0.875rem;
 			}
 		}
 		@media screen and (max-width: 600px) {
 			strong {
 				top: 80px;
-				font-size: 12px;
+				font-size: 0.75rem;
 			}
 		}
 
@@ -1048,7 +1048,7 @@ div.cell.large a.big-image-link {
 		border-width: 10px;
 		div strong {
 			top: 110px;
-			font-size: 14px;
+			font-size: 0.875rem;
 		}
 	}
 }
diff --git a/static/metz-metropole-2019/_vars.scss b/static/metz-metropole-2019/_vars.scss
index 46a1df98..6df0d917 100644
--- a/static/metz-metropole-2019/_vars.scss
+++ b/static/metz-metropole-2019/_vars.scss
@@ -43,7 +43,7 @@ $footer-color: #a7abac;
 $cell-border: 0;
 $cell-title-cover-border: false;
 $title-weight: 500;
-$title-font-size: 22px;
+$title-font-size: 1.375rem;
 $title-color: $darkblue;
 $title-background: transparent;
 $title-transform: uppercase;
diff --git a/static/metz/_vars.scss b/static/metz/_vars.scss
index 3388c459..267c1d10 100644
--- a/static/metz/_vars.scss
+++ b/static/metz/_vars.scss
@@ -6,7 +6,7 @@ $primary-color: $gray;
 $width: 1000px;
 $font-family: Arial, sans-serif;
 $font-color: #666;
-$font-size: 15px;
+$font-size: 0.938em;
 $footer-background: $gray;
 $nav-background: transparent;
 $nav-submenu-background: #eee;
diff --git a/static/meudon/_custom.scss b/static/meudon/_custom.scss
index 34942b58..1e2c6ed8 100644
--- a/static/meudon/_custom.scss
+++ b/static/meudon/_custom.scss
@@ -2,7 +2,7 @@
 
 %bold-title {
 	font-weight: bold;
-	font-size: 15px;
+	font-size: 1.071rem;
 	color: #FFFFFF;
 }
 
@@ -15,17 +15,17 @@
 
 h3 {
 	font-weight: medium;
-	font-size: 18px;
+	font-size: 1.286rem;
 }
 
 p, span {
 	font-weight: medium;
-	font-size: 14px;
+	font-size: 1rem;
 }
 
 button {
 	font-weight: semibold;
-	font-size: 14px;
+	font-size: 1rem;
 	color: $primary-color;
 	text-transform: uppercase;
 }
@@ -66,7 +66,7 @@ div#toplinks {
 	color: #260c4e;
 	font-weight: bold;
 	text-indent: 219px;
-	font-size: 20px;
+	font-size: 1.429rem;
 }
 
 div#nav,
diff --git a/static/meudon/_vars.scss b/static/meudon/_vars.scss
index 1d308133..586ca443 100644
--- a/static/meudon/_vars.scss
+++ b/static/meudon/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #260c4e;
 $secondary-color: #baff34;
 
 $width: 1100px;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-color: #333;
 $font-family: 'Raleway';
 $nav-background: $primary-color;
diff --git a/static/meyzieu-2018/_vars.scss b/static/meyzieu-2018/_vars.scss
index c3160a79..ab6fc13e 100644
--- a/static/meyzieu-2018/_vars.scss
+++ b/static/meyzieu-2018/_vars.scss
@@ -3,7 +3,7 @@ $mobile-limit: 800px;
 $width: 1200px;
 $font-family: Din, Roboto, sans-serif;
 $font-weight: 500;
-$font-size: 16px;
+$font-size: 1em;
 $border-radius: 0;
 $nav-background: #e0e0de;
 $nav-item-selected-color: #000;
diff --git a/static/mincult/_custom.scss b/static/mincult/_custom.scss
index 091bd9fe..93e31fea 100644
--- a/static/mincult/_custom.scss
+++ b/static/mincult/_custom.scss
@@ -9,7 +9,7 @@
 	font-family: Titillium;
 	h1#logo a {
 		line-height: 170px;
-		font-size: 40px;
+		font-size: 2.667rem;
 		color: white;
 		font-weight: normal;
 		background-size: auto 150px;
diff --git a/static/mincult/_vars.scss b/static/mincult/_vars.scss
index 4355e48b..fc645516 100644
--- a/static/mincult/_vars.scss
+++ b/static/mincult/_vars.scss
@@ -3,7 +3,7 @@ $primary-color: #41264a;
 $font-family: Arial, sans-serif;
 $width: 1160px;
 $font-color: #000;
-$font-size: 15px;
+$font-size: 0.938em;
 $link-color: #365268;
 $nav-full-width-background: true;
 $nav-background: black;
diff --git a/static/montlouis-sur-loire/_custom.scss b/static/montlouis-sur-loire/_custom.scss
index 6f13f4a2..2ff6dbf4 100644
--- a/static/montlouis-sur-loire/_custom.scss
+++ b/static/montlouis-sur-loire/_custom.scss
@@ -254,7 +254,7 @@ div#page {
 						padding: 0 10px 0 0;
 						text-transform: uppercase;
 						font-family: "Montserrat",sans-serif;
-						font-size: 28px;
+						font-size: 1.75rem;
 						font-weight: 600;
 						border: 0;
 						color: #08b89d;
@@ -313,7 +313,7 @@ div#page {
 									text-align: center;
 									bottom: 19px;
 									font-family: "Khand",sans-serif;
-									font-size: 18px;
+									font-size: 1.125rem;
 									color: #231f20;
 									transition: all 0.45s;
 								}
@@ -418,7 +418,7 @@ footer {
 					p.titre-footer {
 						display: block;
 						font-family: "Khand",sans-serif;
-						font-size: 24px;
+						font-size: 1.5rem;
 						color: #09b89d;
 						font-weight: 500;
 						line-height: 26px;
@@ -435,7 +435,7 @@ footer {
 						height: 30px;
 						line-height: 30px;
 						text-decoration: none;
-						font-size: 14px;
+						font-size: 0.875rem;
 						text-transform: uppercase;
 						padding-left: 20px;
 						transition: all 0.35s;
@@ -488,7 +488,7 @@ footer {
 					p.titre-footer {
 						display: block;
 						font-family: "Khand",sans-serif;
-						font-size: 24px;
+						font-size: 1.5rem;
 						color: #09b89d;
 						font-weight: 500;
 						line-height: 26px;
@@ -638,7 +638,7 @@ div#rub_service div.submit-button {
 div#rub_service h2 {
 	text-align: left;
 	color: $primary-color;
-	font-size: 26px;
+	font-size: 1.625rem;
 	font-weight: 500;
 	padding-left: 0;
 	text-transform: none;
@@ -666,7 +666,7 @@ div#evolution-log h2:first-child,
 div#summary h2:first-child {
 	color: #000;
 	font-weight: normal;
-	font-size: 20px;
+	font-size: 1.25rem;
 }
 
 ul#evolutions span.status {
diff --git a/static/montlouis-sur-loire/_vars.scss b/static/montlouis-sur-loire/_vars.scss
index 901f7376..f3e0f62d 100644
--- a/static/montlouis-sur-loire/_vars.scss
+++ b/static/montlouis-sur-loire/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #08b89d;
 $width: 1140px;
 $mobile-limit: 800px;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: "Archivo Narrow", sans-serif;
 $link-color: $primary-color;
 $nav-full-width-background: true;
@@ -20,7 +20,7 @@ $button-color: $primary-color;
 $button-hover-background: $primary-color;
 $button-hover-color: white;
 $title-background: transparent;
-$title-font-size: 15px;
+$title-font-size: 0.938rem;
 $title-family: "Khand", sans-serif;
 $title-transform: uppercase;
 $title-color: #333;
diff --git a/static/montpellier/_custom.scss b/static/montpellier/_custom.scss
index 37b1661e..6e756a06 100644
--- a/static/montpellier/_custom.scss
+++ b/static/montpellier/_custom.scss
@@ -418,7 +418,7 @@ table.announces tbody th {
         text-transform: uppercase;
         text-align: center;
         padding: 5px 5px;
-        font-size: 16px;
+        font-size: 1.231rem;
 }
 
 #agglolinks a.agglo-mon-agglo, #agglolinks a.agglo-mes-e-services {
@@ -492,7 +492,7 @@ div#nav ul > li > a {
   text-transform: uppercase;
   color: white;
   text-decoration: none;
-  font-size: 14px;
+  font-size: 1.077rem;
 }
 
 ul.show-user-feeds li {
@@ -813,7 +813,7 @@ div.textbreak {
 	text-align: center;
 
 	span {
-		font-size: 16px;
+		font-size: 1.231rem;
 		background-color: white;
 		padding: 0 10px;
 	}
diff --git a/static/montpellier/_vars.scss b/static/montpellier/_vars.scss
index 0d966695..4afaeac4 100644
--- a/static/montpellier/_vars.scss
+++ b/static/montpellier/_vars.scss
@@ -5,7 +5,7 @@ $primary-color: #EA5B0C;
 $width: 1000px;
 $mobile-limit: 800px;
 $font-color: rgb(58, 58, 58);
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: 'Lato', sans-serif;
 $link-color: $primary-color;
 
diff --git a/static/murviel-les-montpellier/_vars.scss b/static/murviel-les-montpellier/_vars.scss
index fa873ae2..1f082c8f 100644
--- a/static/murviel-les-montpellier/_vars.scss
+++ b/static/murviel-les-montpellier/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #f9a234;
 
 $font-color: #3F3F3F;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: "Open Sans", sans-serif;
 $width: 960px;
 $border-radius: 0;
diff --git a/static/nanterre/_vars.scss b/static/nanterre/_vars.scss
index daa036fc..80a46271 100644
--- a/static/nanterre/_vars.scss
+++ b/static/nanterre/_vars.scss
@@ -3,7 +3,7 @@ $primary-color: #D81E41;
 $width: 960px;
 $font-color: #282828;
 $font-family: Asap, sans-serif;
-$font-size: 12px;
+$font-size: 0.75em;
 $nav-background: white;
 $nav-submenu-background: #222;
 $nav-submenu-color: white;
diff --git a/static/omonville-la-rogue/_vars.scss b/static/omonville-la-rogue/_vars.scss
index 077c29c5..b0b8f8da 100644
--- a/static/omonville-la-rogue/_vars.scss
+++ b/static/omonville-la-rogue/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #506266;
 $width: 960px;
 $font-color: #333;
-$font-size: 12px;
+$font-size: 0.75em;
 $font-family: Arial, Thahoma, sans-serif;
 $nav-background: #506266;
 $nav-color: white;
diff --git a/static/orleans/_custom.scss b/static/orleans/_custom.scss
index 127f6651..8f314eca 100644
--- a/static/orleans/_custom.scss
+++ b/static/orleans/_custom.scss
@@ -69,7 +69,7 @@ h1#logo {
 	padding-top: 10px;
 	font-family: the_sans_regular, Arial, Helvetica, sans-serif;
 	font-weight: 900;
-	font-size: 32px;
+	font-size: 2.286rem;
 }
 
 h1#logo > a {
@@ -83,7 +83,7 @@ div#nav > ul {
 	border: 2px solid #DBDBDB;
 	border-width: 2px 0;
 	> li a {
-		font-size: 18px;
+		font-size: 1.286rem;
 		font-weight: normal;
 		line-height: 2.2em;
 	}
@@ -215,7 +215,7 @@ div#footer {
 		font-family: 'the_sans_bold';
 		border-top: 2px solid #818a8f;
 		border-bottom: 2px solid #818a8f;
-		font-size: 20px;
+		font-size: 1.429rem;
 		font-weight: 500;
 		line-height: 1.1;
 		padding: 10px 0;
@@ -224,7 +224,7 @@ div#footer {
 	}
 	h4 {
 		font-family: 'the_sans_light', Arial, Helvetica, sans-serif;
-		font-size: 18px;
+		font-size: 1.286rem;
 		font-weight: bold;
 		margin: 25px 0 10.5px 0;
 		line-height: 1.1;
diff --git a/static/orleans/_vars.scss b/static/orleans/_vars.scss
index 123636e7..819a1897 100644
--- a/static/orleans/_vars.scss
+++ b/static/orleans/_vars.scss
@@ -4,7 +4,7 @@ $ternary-color: #F7EFE2;
 
 $width: 1150px;
 $mobile-limit: 800px;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: "Roboto", arial, helvetica, sans-serif;
 $border-radius: 0;
 $nav-background: transparent;
diff --git a/static/pays-de-grasse/_vars.scss b/static/pays-de-grasse/_vars.scss
index 50913ce6..954f725d 100644
--- a/static/pays-de-grasse/_vars.scss
+++ b/static/pays-de-grasse/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #DB378E;
 
 $width: 1170px;
 $font-color: #777;
-$font-size: 14px;
+$font-size: 0.875em;
 $border-radius: 5px;
 $font-family: "Open Sans", Arial, sans-serif;
 $nav-background: white;
diff --git a/static/perols/_vars.scss b/static/perols/_vars.scss
index 65e5400e..a68559d3 100644
--- a/static/perols/_vars.scss
+++ b/static/perols/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #00adc6;
 
 $font-color: #5a5a5a;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Arial, Helvetica, sans-serif;
 $width: 1002px;
 $border-radius: 0;
diff --git a/static/perpette-les-andouillettes/_vars.scss b/static/perpette-les-andouillettes/_vars.scss
index dc874cc2..ae74e026 100644
--- a/static/perpette-les-andouillettes/_vars.scss
+++ b/static/perpette-les-andouillettes/_vars.scss
@@ -1,6 +1,6 @@
 $primary-color: #005712;
 $width: 1000px;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: Verdana, Arial, sans-serif;
 $border-radius: 0;
 $primary-color: $primary-color;
diff --git a/static/pfwb/_custom.scss b/static/pfwb/_custom.scss
index 576fde82..b6a50fee 100644
--- a/static/pfwb/_custom.scss
+++ b/static/pfwb/_custom.scss
@@ -9,7 +9,7 @@ a#publik-portal-agent {
 }
 
 span#environment-label {
-	font-size: 10px;
+	font-size: 0.625rem;
 }
 
 .site-header {
diff --git a/static/pfwb/_vars.scss b/static/pfwb/_vars.scss
index 2fcdcd3b..95897355 100644
--- a/static/pfwb/_vars.scss
+++ b/static/pfwb/_vars.scss
@@ -2,7 +2,7 @@
 
 $font-color: #2f2f2f;
 $font-family: Ubuntu, sans-serif;
-$font-size: 16px;
+$font-size: 1em;
 $primary-color: #5a5c5c;
 $border-radius: 5px;
 $width: 1280px;
diff --git a/static/pratic/_vars.scss b/static/pratic/_vars.scss
index 00328fb8..5bae260c 100644
--- a/static/pratic/_vars.scss
+++ b/static/pratic/_vars.scss
@@ -1,6 +1,6 @@
 $width: 1000px;
 $mobile-limit: 800px;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: sans-serif;
 $nav-background: white;
 $nav-color: #005EA9;
diff --git a/static/pre-saint-gervais/_custom.scss b/static/pre-saint-gervais/_custom.scss
index 505404c0..af73aaee 100644
--- a/static/pre-saint-gervais/_custom.scss
+++ b/static/pre-saint-gervais/_custom.scss
@@ -56,9 +56,9 @@
 		background: $primary-color;
 		margin-right: 10px;
 	}
-	font-size: 50px;
+	font-size: 2.778rem;
 	@media screen and (max-width: $nav-mobile-limit) {
-		font-size: 40px;
+		font-size: 2.222rem;
 		&::before {
 			content: none;
 		}
@@ -69,7 +69,7 @@
 %button {
 	@extend %button;
 	text-transform: uppercase;
-	font-size: 15px;
+	font-size: 0.833rem;
 	font-weight: bold;
 }
 
@@ -275,7 +275,7 @@ div#page div#main-content-wrapper {
 		a {
 			display: inline-block;
 			font-weight: bold;
-			font-size: 14px;
+			font-size: 0.778rem;
 			height: 48px;
 			line-height: 44px;
 			color: white;
@@ -285,7 +285,7 @@ div#page div#main-content-wrapper {
 				margin-left: 0px;
 				padding: 0 10px;
 				font-weight: normal;
-				font-size: 18px;
+				font-size: 1rem;
 				position: relative;
 				top: 2px;
 			}
@@ -334,7 +334,7 @@ div#page div#main-content-wrapper {
 				&::before {
 					color: inherit;
 					font-family: "Font Awesome 5 Brands";
-					font-size: 14px;
+					font-size: 0.778rem;
 					position: relative;
 					top: -2px;
 					left: -5px;
@@ -378,14 +378,14 @@ div.gru-nav > ul {
 	padding-left: 10px;
 	font-family: "GTWalsheimPro", sans-serif;
 	font-weight: bold;
-	font-size: 19px;
+	font-size: 1.056rem;
 	> li a {
 		padding-top: 7px;
 		padding-bottom: 7px;
 	}
 	ul {
 		li a {
-			font-size: 15px;
+			font-size: 0.833rem;
 			padding-top: 0;
 			padding-bottom: 0;
 		}
@@ -440,7 +440,7 @@ body.scrolled div.gru-nav > ul {
 			position: absolute;
 			top: 0;
 			right: 0;
-			font-size: 24px;
+			font-size: 1.333rem;
 			color: $turquoise;
 		}
 	}
@@ -466,7 +466,7 @@ div#footer {
 	top: 130px;
 
 	padding-top: 30px;
-	font-size: 18px;
+	font-size: 1rem;
 
 	a.pk-button.inverted {
 		border: 2px solid white;
@@ -477,7 +477,7 @@ div#footer {
 	h3 {
 		margin-bottom: 1rem;
 		font-family: $title-font-family;
-		font-size: 22px;
+		font-size: 1.222rem;
 	}
 
 	ul {
@@ -559,7 +559,7 @@ div#tracking-code {
 		}
 	}
 	h3, a {
-		font-size: 20px;
+		font-size: 1.111rem;
 		display: inline-block;
 		padding: 0.6rem;
 	}
@@ -615,7 +615,7 @@ div.select2-container, span.select2-container {
 	max-width: 60ex;
 	margin: 0 auto;
 	h2 {
-		font-size: 40px;
+		font-size: 2.222rem;
 		color: black;
 	}
 	+ div#login-page div.block {
@@ -645,7 +645,7 @@ div.select2-container, span.select2-container {
 		}
 		.fc-explanation-text,
 		.login-actions {
-			font-size: 14px;
+			font-size: 0.778rem;
 			color: #4b5259;
 		}
 	}
@@ -662,7 +662,7 @@ div.a2-block {
 	h1, h2 {
 		margin-top: 20px;
 		text-align: center;
-		font-size: 40px;
+		font-size: 2.222rem;
 		color: black;
 	}
 	+ form,
@@ -687,7 +687,7 @@ div.a2-block {
 	h1, h2 {
 		margin-top: 20px;
 		text-align: center;
-		font-size: 40px;
+		font-size: 2.222rem;
 		color: black;
 	}
 	@media screen and (max-width: $nav-mobile-limit) {
@@ -703,7 +703,7 @@ div.a2-block {
 		background-size: 20px;
 		padding-top: 32px;
 		span {
-			font-size: 11px;
+			font-size: 0.611rem;
 		}
 		span.badge {
 			position: absolute;
@@ -734,7 +734,7 @@ div.a2-block {
 }
 
 span#environment-label {
-	font-size: 10px;
+	font-size: 0.556rem;
 }
 
 form.quixote div.buttons {
@@ -792,7 +792,7 @@ div.cell {
 		color: white;
 		border-radius: 100%;
 		font-weight: normal;
-		font-size: 16px;
+		font-size: 0.889rem;
 		height: 20px;
 		width: 20px;
 		text-align: center;
diff --git a/static/pre-saint-gervais/_vars.scss b/static/pre-saint-gervais/_vars.scss
index 4d494b99..1ca2f4fe 100644
--- a/static/pre-saint-gervais/_vars.scss
+++ b/static/pre-saint-gervais/_vars.scss
@@ -5,7 +5,7 @@ $primary-color: $pink;
 
 $width: 1164px;
 
-$font-size: 18px;
+$font-size: 1.125em;
 $font-color: #6f7a83;
 $font-family: MaisonNeue, sans-serif;
 $border-radius: 0;
diff --git a/static/publik/_custom.scss b/static/publik/_custom.scss
index dda9a7f7..cf54cc81 100644
--- a/static/publik/_custom.scss
+++ b/static/publik/_custom.scss
@@ -26,7 +26,7 @@ div#header {
 
 h1#logo {
 	padding-top: 35px;
-	font-size: 25px;
+	font-size: 1.667rem;
 	font-weight: normal;
 	& a {
 		color: transparent;
diff --git a/static/publik/_vars.scss b/static/publik/_vars.scss
index 9cb9c614..428537c1 100644
--- a/static/publik/_vars.scss
+++ b/static/publik/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #DF017A;
 $secondary-color: #6D2080;
 
 $width: 1240px;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: Roboto, sans-serif;
 $nav-background: $secondary-color;
 $nav-color: white;
diff --git a/static/quimper/_custom.scss b/static/quimper/_custom.scss
index dd824727..9b77ee22 100644
--- a/static/quimper/_custom.scss
+++ b/static/quimper/_custom.scss
@@ -62,7 +62,7 @@ div#header {
 		background-size: 20px;
 		padding-top: 32px;
 		span {
-			font-size: 11px;
+			font-size: 0.688rem;
 		}
 	}
 	@media screen and ($min-desktop-viewport) {
@@ -84,7 +84,7 @@ div#header {
 				background-size: 30px;
 				padding-top: 70px;
 				span {
-					font-size: 12px;
+					font-size: 0.75rem;
 				}
 				span.badge {
 					top: 30px;
@@ -334,12 +334,12 @@ div.gru-content div.cell.trackingcodeinputcell {
 		}
 		h2 {
 			font-family: $font-family;
-			font-size: 24px;
+			font-size: 1.5rem;
 			color: white;
 			max-width: 11ex;
 			text-align: right;
 			@media screen and (max-width: $nav-mobile-limit) {
-				font-size: 16px;
+				font-size: 1rem;
 				max-width: none;
 				text-align: left;
 				padding-bottom: 0;
@@ -403,12 +403,12 @@ br.clear {
 
 #login-title {
 	font-family: $title-font-family;
-	font-size: 18px;
+	font-size: 1.125rem;
 	color: $title-color;
 	text-transform: uppercase;
 	span {
 		text-transform: none;
-		font-size: 14px;
+		font-size: 0.875rem;
 		font-family: $font-family;
 	}
 }
@@ -424,7 +424,7 @@ form p label {
 	align-items: center;
 	a {
 		display: inline-block;
-		font-size: 12px;
+		font-size: 0.75rem;
 	}
 }
 
@@ -495,7 +495,7 @@ div#rub_service form[action="."] {  // target form pages
 			text-transform: uppercase;
 			font-weight: normal;
 			color: #333 !important;
-			font-size: 14px;
+			font-size: 0.875rem;
 			padding-right: 2em;
 			align-self: flex-end;
 		}
@@ -552,9 +552,9 @@ div#rub_service form[action="."] {  // target form pages
 			display: block;
 			padding: 1rem;
 			color: white;
-			font-size: 14px;
+			font-size: 0.875rem;
 			strong {
-				font-size: 18px;
+				font-size: 1.125rem;
 				text-transform: uppercase;
 			}
 		}
@@ -583,7 +583,7 @@ div#rub_service form[action="."] {  // target form pages
 			padding: 0.5rem;
 		}
 		a {
-			font-size: 14px;
+			font-size: 0.875rem;
 		}
 	}
 	div.form-validation form,  // target form validation
@@ -605,7 +605,7 @@ div#rub_service form[action="."] {  // target form pages
 					padding-bottom: 10px;
 					padding-top: 40px;
 					text-transform: uppercase;
-					font-size: 14px;
+					font-size: 0.875rem;
 					border: none;
 					box-shadow: none;
 					border-radius: 0;
@@ -643,7 +643,7 @@ div#rub_service form[action="."] {  // target form pages
 	}
 	#disclose-dataview,
 	div#receipt-intro {
-		font-size: 14px;
+		font-size: 0.875rem;
 		color: $mauve;
 	}
 }
@@ -749,7 +749,7 @@ div.carrousel-item-content {
 	}
 	strong {
 		font-family: $title-font-family;
-		font-size: 60px;
+		font-size: 3.75rem;
 	}
 }
 
diff --git a/static/region-reunion/_custom.scss b/static/region-reunion/_custom.scss
index f506e6e6..141c430f 100644
--- a/static/region-reunion/_custom.scss
+++ b/static/region-reunion/_custom.scss
@@ -26,7 +26,7 @@
 		$logo-width: $logo-height * 1.2;
 		display: block;
 		font-weight: bold;
-		font-size: 18px;
+		font-size: 1.125rem;
 		padding-top: $logo-height + 5;
 		background: url(img/region-reunion.png) no-repeat;
 		background-size: auto $logo-height;
@@ -34,7 +34,7 @@
 		@media ($min-desktop-viewport) {
 			padding-left: $logo-width + 20;
 			padding-top: $logo-height - 20px;
-			font-size: 24px;
+			font-size: 1.5rem;
 			line-height: 20px;
 			background-size: contain;
 		}
diff --git a/static/roannais-agglomeration/_custom.scss b/static/roannais-agglomeration/_custom.scss
index a2c0f546..f38bf1fa 100644
--- a/static/roannais-agglomeration/_custom.scss
+++ b/static/roannais-agglomeration/_custom.scss
@@ -63,7 +63,7 @@ footer {
 		color: white;
 	}
 	#fleche-haut {
-		font-size: 20px;
+		font-size: 1.111rem;
 		position: absolute;
 		right: 0;
 		top: 10px;
@@ -125,10 +125,10 @@ div.comment-field {
 		width: auto;
 	}
 	h2 {
-		font-size: 36px;
+		font-size: 2rem;
 		color: white;
 		@media screen and (max-width: $nav-mobile-limit) {
-			font-size: 24px;
+			font-size: 1.333rem;
 		}
 	}
 }
@@ -155,7 +155,7 @@ div.comment-field {
 div#rub_service h2 {
 	text-align: left;
 	color: #1c1c1c;
-	font-size: 28px;
+	font-size: 1.556rem;
 }
 
 div#tracking-code h3 {
diff --git a/static/roannais-agglomeration/_vars.scss b/static/roannais-agglomeration/_vars.scss
index 54da886f..ec4b1fab 100644
--- a/static/roannais-agglomeration/_vars.scss
+++ b/static/roannais-agglomeration/_vars.scss
@@ -9,7 +9,7 @@ $sidebar-width: 240px;
 
 $font-color: #3c3c3b;
 $font-family: "Oswald", sans-serif;
-$font-size: 18px;
+$font-size: 1.125em;
 
 $link-color: #1c1c1c;
 
diff --git a/static/rochefort/_custom.scss b/static/rochefort/_custom.scss
index e16f9a93..49942811 100644
--- a/static/rochefort/_custom.scss
+++ b/static/rochefort/_custom.scss
@@ -33,7 +33,7 @@ div#header-nav li {
 	text-align: center;
 	a {
 		display: block;
-		font-size: 28px;
+		font-size: 2rem;
 		font-style: italic;
 		line-height: 215%;
 		color: black;
@@ -108,7 +108,7 @@ div#top {
 	font-style: italic;
 	font-weight: normal;
 	#logo a {
-		font-size: 28px;
+		font-size: 2rem;
 		color: $primary-color;
 		@media screen and ($max-mobile-viewport) {
 			visibility: hidden;
@@ -118,7 +118,7 @@ div#top {
 		display: block;
 		padding-top: 1ex;
 		padding-bottom: 2ex;
-		font-size: 24px;
+		font-size: 1.714rem;
 		@media screen and ($max-mobile-viewport) {
 			display: none;
 		}
diff --git a/static/rochefort/_vars.scss b/static/rochefort/_vars.scss
index 9ef89fde..275097e3 100644
--- a/static/rochefort/_vars.scss
+++ b/static/rochefort/_vars.scss
@@ -3,7 +3,7 @@ $primary-color: #D24E38;
 $width: 1150px;
 $font-color: #333;
 $font-family: "Open Sans", sans-serif;
-$font-size: 14px;
+$font-size: 0.875em;
 $nav-background: white;
 $nav-submenu-background: #222;
 $nav-submenu-color: white;
diff --git a/static/saint-bres/_vars.scss b/static/saint-bres/_vars.scss
index 2faff84b..89a2c016 100644
--- a/static/saint-bres/_vars.scss
+++ b/static/saint-bres/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #ff6c1e;
 
 $font-color: #3c4349;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: Verdana, Tahoma, Sans-Serif;
 $width: 900px;
 
diff --git a/static/saint-chamond/_custom.scss b/static/saint-chamond/_custom.scss
index 75b689f2..bb5bd704 100644
--- a/static/saint-chamond/_custom.scss
+++ b/static/saint-chamond/_custom.scss
@@ -48,7 +48,7 @@ footer {
 		margin-bottom: 0;
 	}
 	#fleche-haut {
-		font-size: 20px;
+		font-size: 1.111rem;
 		position: absolute;
 		right: 0;
 		top: 10px;
@@ -132,10 +132,10 @@ div.infonotice {
 		width: auto;
 	}
 	h2 {
-		font-size: 36px;
+		font-size: 2rem;
 		color: white;
 		@media screen and (max-width: $nav-mobile-limit) {
-			font-size: 24px;
+			font-size: 1.333rem;
 		}
 	}
 }
@@ -169,7 +169,7 @@ div.infonotice {
 div#rub_service h2 {
 	text-align: left;
 	color: #545454;
-	font-size: 28px;
+	font-size: 1.556rem;
 }
 
 div#tracking-code h3 {
diff --git a/static/saint-chamond/_vars.scss b/static/saint-chamond/_vars.scss
index 23cafd17..d0a88139 100644
--- a/static/saint-chamond/_vars.scss
+++ b/static/saint-chamond/_vars.scss
@@ -9,7 +9,7 @@ $sidebar-width: 240px;
 
 $font-color: #020202;
 $font-family: Din, sans-serif;
-$font-size: 18px;
+$font-size: 1.125em;
 
 $footer-background: #373737;
 $footer-color: white;
diff --git a/static/saint-denis/_custom.scss b/static/saint-denis/_custom.scss
index cb828aab..a3a2efc5 100644
--- a/static/saint-denis/_custom.scss
+++ b/static/saint-denis/_custom.scss
@@ -28,7 +28,7 @@ nav {
 }
 
 div.gru-nav {
-	font-size: 20px;
+	font-size: 1.333rem;
 	letter-spacing: -0.03em;
 	> ul {
 		margin: 0;
@@ -78,7 +78,7 @@ div#footer-wrapper {
 		line-height: 1.2;
 		a {
 			color: $footer-color;
-			font-size: 14px;
+			font-size: 0.933rem;
 		}
 		a:hover {
 			text-decoration: underline;
@@ -86,12 +86,12 @@ div#footer-wrapper {
 		div.horaires {
 			box-sizing: content-box;
 			line-height: 1;
-			font-size: 18px;
+			font-size: 1.2rem;
 			a {
-				font-size: 18px;
+				font-size: 1.2rem;
 			}
 			h2 {
-				font-size: 22px;
+				font-size: 1.467rem;
 				font-weight: 800;
 				text-transform: none;
 				margin: 20px, 0, 0, 0;
@@ -110,12 +110,12 @@ div#footer-wrapper {
 			text-transform: uppercase;
 		}
 		h2 {
-			font-size: 15px;
+			font-size: 1rem;
 			font-weight: 300;
 			margin-bottom: 22px;
 		}
 		h3 {
-			font-size: 20px;
+			font-size: 1.333rem;
 			font-weight: 400;
 			margin: 0 0 0 0;
 		}
@@ -132,7 +132,7 @@ div#footer-wrapper {
 		p a {
 			display: inline-block;
 			text-align: center;
-			font-size: 12px;
+			font-size: 0.8rem;
 		}
 		p.liens {
 			border-top: 1px solid #888;
@@ -143,7 +143,7 @@ div#footer-wrapper {
 			margin: 20px 0 20px 0;
 			a {
 				text-align: left;
-				font-size: 16px;
+				font-size: 1.067rem;
 				display: block;
 				margin: 15px 0px 15px 0;
 			}
@@ -153,7 +153,7 @@ div#footer-wrapper {
 			margin: 15px 0 20px 54px;
 			a.overgris {
 				font-family: "Noto Sans Condensed", sans-serif;
-				font-size: 20px;
+				font-size: 1.333rem;
 				font-weight: 100;
 				text-align: left;
 				white-space: nowrap;
diff --git a/static/saint-denis/_vars.scss b/static/saint-denis/_vars.scss
index 27ebf050..77e4a8a2 100644
--- a/static/saint-denis/_vars.scss
+++ b/static/saint-denis/_vars.scss
@@ -7,7 +7,7 @@ $blue: #2e247a;
 
 $font-family: "Noto Sans Semi Condensed", sans-serif;
 $font-color: #49494b;
-$font-size: 15px;
+$font-size: 0.938em;
 
 $width: 1200px;
 
@@ -15,7 +15,7 @@ $nav-background: $secondary-color;
 $nav-full-width-background: true;
 $nav-color: $font-color;
 $nav-active-color: $primary-color;
-$nav-font-size: 25px;
+$nav-font-size: 1.667rem;
 $nav-after-image: true;
 $nav-after-image-height: 329px;
 $nav-submenu-color: $font-color;
@@ -24,7 +24,7 @@ $footer-background: #494949;
 $footer-color: white;
 
 $title-color: $font-color;
-$title-font-size: 30px;
+$title-font-size: 2rem;
 $title-weight: 400;
 
 $cell-border: none;
diff --git a/static/saint-drezery/_vars.scss b/static/saint-drezery/_vars.scss
index ffb1a5f5..53a346bf 100644
--- a/static/saint-drezery/_vars.scss
+++ b/static/saint-drezery/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #848100;
 
 $font-color: #3F3F3F;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: Arial, Helvetica, sans-serif;
 $width: 1000px;
 
diff --git a/static/saint-genies-des-mourgues/_vars.scss b/static/saint-genies-des-mourgues/_vars.scss
index a7bbe9b4..37aeeac7 100644
--- a/static/saint-genies-des-mourgues/_vars.scss
+++ b/static/saint-genies-des-mourgues/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #3e70ad;
 
 $font-color: #333;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: "Trebuchet MS", Helvetica, sans-serif;
 $width: 1100px;
 $border-radius: 0;
diff --git a/static/saint-georges-d-orques/_vars.scss b/static/saint-georges-d-orques/_vars.scss
index 3ed7cee9..08dc991a 100644
--- a/static/saint-georges-d-orques/_vars.scss
+++ b/static/saint-georges-d-orques/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #cd0000;
 
 $font-color: #333;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: Helvetica, Arial, sans-serif;
 $width: 1000px;
 $border-radius: 0;
diff --git a/static/saint-jean-de-vedas/_vars.scss b/static/saint-jean-de-vedas/_vars.scss
index 71be32ea..c24c2c9c 100644
--- a/static/saint-jean-de-vedas/_vars.scss
+++ b/static/saint-jean-de-vedas/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #ff9900;
 
 $font-color: #3F3F3F;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: "Open Sans", sans-serif;
 $width: 1170px;
 
diff --git a/static/saint-laurent-du-var/_custom.scss b/static/saint-laurent-du-var/_custom.scss
index b02dbb2c..70494c9c 100644
--- a/static/saint-laurent-du-var/_custom.scss
+++ b/static/saint-laurent-du-var/_custom.scss
@@ -163,7 +163,7 @@ body.has-picture nav::after {
 		border-width: 0 1px;
 
 		span {
-			font-size: 12px;
+			font-size: 0.75rem;
 		}
 	}
 }
diff --git a/static/saint-lo-agglo/_custom.scss b/static/saint-lo-agglo/_custom.scss
index 48230236..f279a3ac 100644
--- a/static/saint-lo-agglo/_custom.scss
+++ b/static/saint-lo-agglo/_custom.scss
@@ -84,7 +84,7 @@ div#rub_service > h2,
 div.cell h1 {
 	padding-left: 0;
 	text-align: left;
-	font-size: 40px;
+	font-size: 2.5rem;
 	font-weight: 300;
 	text-transform: uppercase;
 }
diff --git a/static/saint-lo-agglo/_vars.scss b/static/saint-lo-agglo/_vars.scss
index 780eafcd..83ad4d9c 100644
--- a/static/saint-lo-agglo/_vars.scss
+++ b/static/saint-lo-agglo/_vars.scss
@@ -12,7 +12,7 @@ $primary-color: $red;
 
 $text-color: #1d1d1d;
 $width: 1340px;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Ubuntu, Helvetica, Arial, sans-serif;
 $border-radius: 0;
 $nav-color: #a1a2a6;
diff --git a/static/saint-vallier-de-thiey/_custom.scss b/static/saint-vallier-de-thiey/_custom.scss
index 10dbd1c0..84c4d58a 100644
--- a/static/saint-vallier-de-thiey/_custom.scss
+++ b/static/saint-vallier-de-thiey/_custom.scss
@@ -46,7 +46,7 @@ div#header h1 {
 	font-family: "Quattrocento Sans";
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	font-size: 30px;
+	font-size: 2.308rem;
 	overflow: hidden;
 	padding-left: 100px;
 	a {
diff --git a/static/saint-vallier-de-thiey/_vars.scss b/static/saint-vallier-de-thiey/_vars.scss
index f8560655..b9f875f1 100644
--- a/static/saint-vallier-de-thiey/_vars.scss
+++ b/static/saint-vallier-de-thiey/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #2DBBE5;
 
 $font-color: #666;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: sans-serif;
 $nav-background: white;
 $nav-color: #888;
diff --git a/static/saone-et-loire-cd71-2019/_custom.scss b/static/saone-et-loire-cd71-2019/_custom.scss
index 4d980d2a..4409b21c 100644
--- a/static/saone-et-loire-cd71-2019/_custom.scss
+++ b/static/saone-et-loire-cd71-2019/_custom.scss
@@ -63,7 +63,7 @@ div#header-wrapper {
 		background: $green;
 		top: 5px;
 		text-transform: uppercase;
-		font-size: 18px;
+		font-size: 0.9rem;
 		margin-left: -200px;
 		left: 50%;
 		right: auto;
@@ -158,7 +158,7 @@ div#nav-wrapper {
 		&::after {
 			content: "Menu";
 			padding-left: 60px;
-			font-size: 12px;
+			font-size: 0.6rem;
 			font-weight: normal;
 		}
 		@media screen and ($max-mobile-viewport) {
diff --git a/static/saone-et-loire-cd71-2019/_vars.scss b/static/saone-et-loire-cd71-2019/_vars.scss
index 31032b22..6327d523 100644
--- a/static/saone-et-loire-cd71-2019/_vars.scss
+++ b/static/saone-et-loire-cd71-2019/_vars.scss
@@ -6,7 +6,7 @@ $green: #90c641;
 
 $primary-color: #179ad6;
 $border-radius: 3px;
-$font-size: 20px;
+$font-size: 1.25em;
 $font-family: "Roboto", sans-serif;
 $link-color: $primary-color;
 
@@ -25,7 +25,7 @@ $cell-entry-hover-effect: left-to-right;
 $cell-title-cover-border: false;
 
 $title-background: transparent;
-$title-font-size: 28px;
+$title-font-size: 1.4rem;
 $title-color: $darkblue;
 $title-weight: bold;
 $title-padding: 0.7rem 0rem;
diff --git a/static/saone-et-loire-cd71/_vars.scss b/static/saone-et-loire-cd71/_vars.scss
index cd2425f4..7583e884 100644
--- a/static/saone-et-loire-cd71/_vars.scss
+++ b/static/saone-et-loire-cd71/_vars.scss
@@ -1,6 +1,6 @@
 $primary-color: #009DDF;
 $width: 1230px;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: Arial, Helvetica, sans-serif;
 $border-radius: 0;
 $primary-color: $primary-color;
diff --git a/static/seine-et-marne-apa/_custom.scss b/static/seine-et-marne-apa/_custom.scss
index 69e024d0..0e652a67 100644
--- a/static/seine-et-marne-apa/_custom.scss
+++ b/static/seine-et-marne-apa/_custom.scss
@@ -59,7 +59,7 @@ div#header h1 a {
 		position: absolute;
 		left: 260px;
 		top: 60px;
-		font-size: 12px;
+		font-size: 0.75rem;
 		font-weight: normal;
 		color: white;
 	}
@@ -596,7 +596,7 @@ div#profile {
 		padding-top: 30px;
 		height: 80px;
 		padding-left: 100px;
-		font-size: 30px;
+		font-size: 1.875rem;
 		color: $darkblue;
 		text-transform: uppercase;
 	}
@@ -698,7 +698,7 @@ div#rub_service > h2:first-child,
 	color: $red;
 	text-transform: uppercase;
 	font-weight: normal;
-	font-size: 30px;
+	font-size: 1.875rem;
 	margin-top: 1rem;
 }
 
diff --git a/static/seine-et-marne-apa/_vars.scss b/static/seine-et-marne-apa/_vars.scss
index 3dcb5d64..90e46005 100644
--- a/static/seine-et-marne-apa/_vars.scss
+++ b/static/seine-et-marne-apa/_vars.scss
@@ -26,7 +26,7 @@ $nav-item-spacing: 3rem;
 $title-background: transparent;
 $title-color: $lightblue;
 $title-weight: bold;
-$title-font-size: 20px;
+$title-font-size: 1.25rem;
 $title-padding: 0.5rem;
 
 $table-headers-background: #1e7590;
diff --git a/static/seine-et-marne/_vars.scss b/static/seine-et-marne/_vars.scss
index 5acc56f0..47339921 100644
--- a/static/seine-et-marne/_vars.scss
+++ b/static/seine-et-marne/_vars.scss
@@ -1,6 +1,6 @@
 $primary-color: #007084;
 $width: 1000px;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: Arial, Helvetica, sans-serif;
 $border-radius: 0;
 $primary-color: $primary-color;
diff --git a/static/sens/_custom.scss b/static/sens/_custom.scss
index be737d14..53d7990a 100644
--- a/static/sens/_custom.scss
+++ b/static/sens/_custom.scss
@@ -22,7 +22,7 @@ div#header-wrapper {
 div.gru-nav {
 	ul > li a {
 		font-family: "Work Sans", sans-serif;
-		font-size: 19px;
+		font-size: 1.188rem;
 		font-weight: 600;
 		padding: 0.75em 15px 0.75em 15px;
 	}
@@ -102,7 +102,7 @@ div#footer-wrapper {
 	}
 	div a.yellow-btn {
 		font-family: $title-font-family;
-		font-size: 17px;
+		font-size: 1.062rem;
 		font-weight: 500;
 		color: black;
 		text-transform: uppercase;
@@ -117,7 +117,7 @@ div#footer-wrapper {
 		border: black 1px solid;
 	}
 	p.widget-title {
-		font-size: 19px;
+		font-size: 1.188rem;
 		font-weight: bold;
 	}
 	li a {
diff --git a/static/sens/_vars.scss b/static/sens/_vars.scss
index d1d66278..2dab6e9c 100644
--- a/static/sens/_vars.scss
+++ b/static/sens/_vars.scss
@@ -20,11 +20,11 @@ $nav-mobile-bottom-bar-item-selected-background: $tertiary-color;
 $nav-mobile-bottom-bar-item-hover-background: $tertiary-color;
 
 $title-color: $primary-color;
-$title-font-size: 24px;
+$title-font-size: 1.5rem;
 $title-font-family: "Work Sans", sans-serif;
 
 $font-color: black;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Bitter, sans-serif;
 
 $cell-entry-color: $tertiary-color;
diff --git a/static/sicoval/_vars.scss b/static/sicoval/_vars.scss
index 6565184b..17629139 100644
--- a/static/sicoval/_vars.scss
+++ b/static/sicoval/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #F8AD4A;
 $secondary-color: #b71b4f;
 
 $width: 1100px;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-color: #333;
 $font-family: 'Open Sans', sans-serif;
 $nav-background: $primary-color;
diff --git a/static/signal-publik/_custom.scss b/static/signal-publik/_custom.scss
index fc283884..21374403 100644
--- a/static/signal-publik/_custom.scss
+++ b/static/signal-publik/_custom.scss
@@ -4,13 +4,13 @@
 }
 
 %bigtitle {
-	font-size: 30px;
+	font-size: 1.875rem;
 	color: $green;
 	text-transform: uppercase;
 	font-weight: 500;
 	letter-spacing: -1px;
 	@media screen and ($max-mobile-viewport) {
-		font-size: 25px;
+		font-size: 1.562rem;
 	}
 }
 
@@ -68,7 +68,7 @@
 				padding: 0 1rem;
 				height: 40px;
 				line-height: 40px;
-				font-size: 18px;
+				font-size: 1.125rem;
 				&.has-logo::before {
 					width: calc(100% - 180px);
 					right: 0;
@@ -91,7 +91,7 @@ nav {
 		background-size: 100% 20px;
 		padding-top: 32px;
 		span {
-			font-size: 11px;
+			font-size: 0.688rem;
 			letter-spacing: -1px;
 		}
 	}
@@ -113,7 +113,7 @@ nav {
 				background-position: 50% 5px;
 				padding-top: 30px;
 				span {
-					font-size: 12px;
+					font-size: 0.75rem;
 					letter-spacing: 0px;
 				}
 			}
@@ -430,12 +430,12 @@ br.clear {
 
 #login-title {
 	font-family: $title-font-family;
-	font-size: 18px;
+	font-size: 1.125rem;
 	color: $title-color;
 	text-transform: uppercase;
 	span {
 		text-transform: none;
-		font-size: 14px;
+		font-size: 0.875rem;
 		font-family: $font-family;
 	}
 }
@@ -451,7 +451,7 @@ form p label {
 	align-items: center;
 	a {
 		display: inline-block;
-		font-size: 12px;
+		font-size: 0.75rem;
 	}
 }
 
@@ -563,9 +563,9 @@ div#rub_service form[action="."] {  // target form pages
 			display: block;
 			padding: 1rem;
 			color: white;
-			font-size: 14px;
+			font-size: 0.875rem;
 			strong {
-				font-size: 18px;
+				font-size: 1.125rem;
 				text-transform: uppercase;
 			}
 		}
diff --git a/static/somme-cd80/_vars.scss b/static/somme-cd80/_vars.scss
index 775f2de9..3caf54a4 100644
--- a/static/somme-cd80/_vars.scss
+++ b/static/somme-cd80/_vars.scss
@@ -4,7 +4,7 @@ $orange: #cf4e32;
 $width: 1300px;
 $footer-background: $primary-color;
 $font-color: #666;
-$font-size: 12px;
+$font-size: 0.75em;
 $nav-active-color: darken($primary-color, 10%);
 $nav-color: white;
 $nav-background: $primary-color;
diff --git a/static/sospel/_vars.scss b/static/sospel/_vars.scss
index 5e76e325..059fe34c 100644
--- a/static/sospel/_vars.scss
+++ b/static/sospel/_vars.scss
@@ -4,7 +4,7 @@ $primary-color: #333333;
 
 $link-color: #00b7f3;
 $font-color: black;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: "Droid Sans", sans-serif;
 $nav-background: white;
 $nav-color: #393939;
diff --git a/static/strasbourg-2018/_custom.scss b/static/strasbourg-2018/_custom.scss
index b7be1f5d..8e1af995 100644
--- a/static/strasbourg-2018/_custom.scss
+++ b/static/strasbourg-2018/_custom.scss
@@ -990,7 +990,7 @@ div.fileinfo a.remove:before {
 .completion-info {
 	text-align: center;
 	color: $core-color;
-	font-size: 20px;
+	font-size: 1.429rem;
 	font-weight: bold;
 }
 
@@ -1198,7 +1198,7 @@ footer {
 	background: $footer-background;
 	color: $footer-color;
 	#footer {
-		font-size: 14px;
+		font-size: 1rem;
 		max-width: 1140px;
 		div.menucell {
 			text-align: left;
@@ -1369,7 +1369,7 @@ div#rub_service div.file-upload-widget {
 				pointer-events: none;
 				content: "\f016";  // file-o
 				font-family: FontAwesome;
-				font-size: 40px;
+				font-size: 2.857rem;
 				display: block;
 				padding-top: 20px;
 				padding-bottom: 10px;
@@ -1378,7 +1378,7 @@ div#rub_service div.file-upload-widget {
 				pointer-events: none;
 				content: "\f055";  // plus-circle
 				font-family: FontAwesome;
-				font-size: 20px;
+				font-size: 1.429rem;
 				display: block;
 				position: absolute;
 				left: calc(50% + 10px);
@@ -1434,7 +1434,7 @@ div#rub_service div.file-upload-widget {
 					pointer-events: none;
 					content: "\f016";  // file-o
 					font-family: FontAwesome;
-					font-size: 40px;
+					font-size: 2.857rem;
 					display: block;
 					padding-top: 40px;
 					padding-bottom: 10px;
diff --git a/static/strasbourg-2018/_vars.scss b/static/strasbourg-2018/_vars.scss
index 99385069..5b8a246b 100644
--- a/static/strasbourg-2018/_vars.scss
+++ b/static/strasbourg-2018/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #31455D;
 $mobile-limit: 800px;
 $border-radius: 0;
 $font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-$font-size: 14px;
+$font-size: 0.875em;
 $link-color: $primary-color;
 $title-background: transparent;
 $title-color: $primary-color;
diff --git a/static/sussargues/_vars.scss b/static/sussargues/_vars.scss
index 3d736887..8bc1915b 100644
--- a/static/sussargues/_vars.scss
+++ b/static/sussargues/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #ec9200;
 
 $font-color: #3F3F3F;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: Lato, sans-serif;
 $width: 1180px;
 $border-radius: 0;
diff --git a/static/tonneville/_vars.scss b/static/tonneville/_vars.scss
index 5762e065..35b73ea7 100644
--- a/static/tonneville/_vars.scss
+++ b/static/tonneville/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #ED3237; /* red */
 
 $width: 1000px;
 $font-color: #333;
-$font-size: 12px;
+$font-size: 0.75em;
 $font-family: Arial, Helvetica, sans-serif;
 $nav-background: $primary-color;
 $nav-color: white;
diff --git a/static/toodego/_atmo.scss b/static/toodego/_atmo.scss
index 710d2496..3f0e4d85 100644
--- a/static/toodego/_atmo.scss
+++ b/static/toodego/_atmo.scss
@@ -115,19 +115,19 @@ div.tile.airquality {
 		text-align: center;
 		span.valeur {
 			display: block;
-			font-size: 40px;
+			font-size: 2.5rem;
 			font-weight: bold;
 			padding-top: 20px;
 			@media screen and (max-width: $desktop-limit) {
-				font-size: 26px;
+				font-size: 1.625rem;
 				padding-top: 13px;
 			}
 		}
 		span.qualif {
 			display: block;
-			font-size: 24px;
+			font-size: 1.5rem;
 			@media screen and (max-width: $desktop-limit) {
-				font-size: 18px;
+				font-size: 1.125rem;
 			}
 		}
 		&.tres-mauvais {
@@ -145,7 +145,7 @@ div.tile.airquality {
 	span.air2go.valeur {
 		box-sizing: content-box;
 		font-weight: bold;
-		font-size: 24px;
+		font-size: 1.5rem;
 		padding-top: 0px;
 		border: 5px solid white;
 		height: 40px;
diff --git a/static/toodego/_carrousel.scss b/static/toodego/_carrousel.scss
index d4dc2db8..38d60323 100644
--- a/static/toodego/_carrousel.scss
+++ b/static/toodego/_carrousel.scss
@@ -122,7 +122,7 @@ div.carrousel-content {
 		text-align: center;
 		&::after {
 			font-family: FontAwesome;
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		&.carrousel-left {
 			left: 1ex;
diff --git a/static/toodego/_custom.scss b/static/toodego/_custom.scss
index 3c8afe85..5d9161dd 100644
--- a/static/toodego/_custom.scss
+++ b/static/toodego/_custom.scss
@@ -12,7 +12,7 @@ html, body {
 
 body {
 	@media screen and (max-width: $desktop-limit) {
-		font-size: 14px;
+		font-size: 0.875rem;
 	}
 }
 
@@ -578,7 +578,7 @@ div#nav span.badge::after {
 		max-width: $width;
 		margin: 0 auto;
 		padding: 2rem 0;
-		font-size: 13px;
+		font-size: 0.812rem;
 		font-weight: 500;
 		@media screen and (max-width: $desktop-limit) {
 			text-align: center;
@@ -763,7 +763,7 @@ div.wcs-tracking-code-input {
 	position: relative;
 	font: Raleway;
 	font-weight: bold;
-	font-size: 12px;
+	font-size: 0.75rem;
 	a {
 		color: white;
 	}
@@ -936,7 +936,7 @@ div.wcs-tracking-code-input {
 					span {
 						display: block;
 						height: $mobile-navigation-height / 2;
-						font-size: 10px;
+						font-size: 0.625rem;
 						color: white;
 					}
 				}
@@ -1032,7 +1032,7 @@ div.crosshair {
 		line-height: 40px;
 		display: inline-block;
 		text-align: center;
-		font-size: 40px;
+		font-size: 2.5rem;
 		position: relative;
 		top: -20px;
 		left: -20px;
@@ -1057,7 +1057,7 @@ ul#evolutions span.user {
 		position: static;
 		text-align: left;
 		font-family: $font-family;
-		font-size: 24px;
+		font-size: 1.5rem;
 		background: transparent;
 		color: #333;
 		font-weight: bold;
diff --git a/static/toodego/_gallery.scss b/static/toodego/_gallery.scss
index d44bc44f..a6176b5d 100644
--- a/static/toodego/_gallery.scss
+++ b/static/toodego/_gallery.scss
@@ -30,7 +30,7 @@ div.gallerycell {
 		text-decoration: underline;
 		color: black;
 		font-weight: bold;
-		font-size: 18px;
+		font-size: 1.125rem;
 		padding-top: 150px;
 	}
 }
@@ -58,7 +58,7 @@ div#gallery-carrousel {
 		text-align: center;
 		&::after {
 			font-family: FontAwesome;
-			font-size: 24px;
+			font-size: 1.5rem;
 		}
 		&.exit {
 			top: 2%;
diff --git a/static/toodego/_pollen.scss b/static/toodego/_pollen.scss
index 5522b619..b20e3459 100644
--- a/static/toodego/_pollen.scss
+++ b/static/toodego/_pollen.scss
@@ -16,7 +16,7 @@ div.tile.pollen {
 		}
 		box-sizing: content-box;
 		font-weight: bold;
-		font-size: 24px;
+		font-size: 1.5rem;
 		padding-top: 0px;
 		border: 5px solid transparent;
 		height: 40px;
diff --git a/static/toodego/_specialpages.scss b/static/toodego/_specialpages.scss
index 9277dcbb..055ef0ed 100644
--- a/static/toodego/_specialpages.scss
+++ b/static/toodego/_specialpages.scss
@@ -100,7 +100,7 @@ body.page-connect {
 					&::before {
 						color: $red;
 						z-index: 1000;
-						font-size: 20px;
+						font-size: 1.25rem;
 						font-family: FontAwesome;
 						content: "\f053";  // chevron-left;
 						position: absolute;
@@ -511,7 +511,7 @@ body.focus-in #page.search-page {
 			background: transparent;
 		}
 		h1 {
-			font-size: 120px;
+			font-size: 7.5rem;
 			color: $red;
 			margin: 0;
 		}
diff --git a/static/toodego/_tiles.scss b/static/toodego/_tiles.scss
index ee98fb1e..cc4e5aea 100644
--- a/static/toodego/_tiles.scss
+++ b/static/toodego/_tiles.scss
@@ -246,9 +246,9 @@ div.dashboard-content {
 			font-family: FontAwesome;
 			position: relative;
 			top: 7px;
-			font-size: 60px;
+			font-size: 3.75rem;
 			@media screen and (max-width: $desktop-limit) {
-				font-size: 40px;
+				font-size: 2.5rem;
 			}
 		}
 	}
diff --git a/static/toodego/_vars.scss b/static/toodego/_vars.scss
index 8816f22d..19da53e1 100644
--- a/static/toodego/_vars.scss
+++ b/static/toodego/_vars.scss
@@ -7,7 +7,7 @@ $orange: #dc8618;  // for "soon to be closed" badges
 
 $body-background: white;
 $font-family: Raleway, sans-serif;
-$font-size: 16px;
+$font-size: 1em;
 $width: 1200px;
 $border-radius: 0;
 $link-color: $red;
diff --git a/static/toulouse-metropole/_custom.scss b/static/toulouse-metropole/_custom.scss
index d2591084..f556a46e 100644
--- a/static/toulouse-metropole/_custom.scss
+++ b/static/toulouse-metropole/_custom.scss
@@ -81,7 +81,7 @@ nav {
 	left: 0;
 	background: #6a5f5b;
 	color: white;
-	font-size: 11px;
+	font-size: 0.846rem;
 	width: $nav-width;
 	text-transform: uppercase;
 	z-index: 150;
@@ -131,7 +131,7 @@ nav {
 					padding-top: 45px;
 					span {
 						display: inline;
-						font-size: 11px;
+						font-size: 0.846rem;
 					}
 				}
 			}
@@ -315,11 +315,11 @@ section#section-professionnels {
 	color: #27252f;
 	position: relative;
 	h1:first-child {
-		font-size: 32px;
+		font-size: 2.462rem;
 		font-weight: 600;
 		margin-bottom: 3rem;
 		@media screen and (max-width: 380px) {
-			font-size: 24px;
+			font-size: 1.846rem;
 		}
 		&::before {
 			content: "";
@@ -394,7 +394,7 @@ section#section-particuliers {
 			background: #6A5F5B;
 			border-radius: 5px;
 			color: #fff;
-			font-size: 13px;
+			font-size: 1rem;
 			text-transform: uppercase;
 			cursor: pointer;
 			padding-top: 2px;
@@ -517,7 +517,7 @@ section#section-particuliers {
 		}
 		h3 {
 			text-transform: uppercase;
-			font-size: 16px;
+			font-size: 1.231rem;
 			line-height: 135%;
 		}
 		p {
@@ -603,7 +603,7 @@ section#section-professionnels {
 			color: $dark-link-color;
 			border-radius: 40px;
 			box-shadow: 0 0 4px #45434c;
-			font-size: 13px;
+			font-size: 1rem;
 			&::before {
 				content: '';
 				position: absolute;
@@ -645,12 +645,12 @@ section#section-professionnels {
 	border: none;
 	background: transparent;
 	color: white;
-	font-size: 17px;
+	font-size: 1.308rem;
 	font-weight: bold;
 	h1 {
 		padding-top: 50px;
 		color: white;
-		font-size: 65px;
+		font-size: 5rem;
 		letter-spacing: 4px;
 		margin: 0;
 		margin-bottom: 50px;
@@ -677,10 +677,10 @@ section#section-professionnels {
 		text-align: center;
 		width: auto;
 		h1 {
-			font-size: 40px;
+			font-size: 3.077rem;
 		}
 		h2 {
-			font-size: 20px;
+			font-size: 1.538rem;
 		}
 	}
 	a.pk-button {
@@ -731,11 +731,11 @@ section#section-professionnels {
 		h3 {
 			text-transform: uppercase;
 			font-weight: bold;
-			font-size: 18px;
+			font-size: 1.385rem;
 			letter-spacing: 3px;
 		}
 		p {
-			font-size: 13px;
+			font-size: 1rem;
 			padding: 0 1rem;
 		}
 		a {
@@ -770,7 +770,7 @@ section#section-professionnels {
 			display: inline-block;
 			a {
 				border: none;
-				font-size: 10px;
+				font-size: 0.769rem;
 				text-transform: uppercase;
 				color: #333;
 				background: inherit;
@@ -796,7 +796,7 @@ div#title-section {
 	background: $violet url(img/header/img_ville_background_header_pageinter.jpg) top center no-repeat;
 	background-size: cover;
 	padding: 170px 50px 100px 100px;
-	font-size: 16px;
+	font-size: 1.231rem;
 	font-weight: bold;
 	@media screen and ($max-mobile-viewport) {
 		padding: 150px 1rem 1rem 1rem;
@@ -805,13 +805,13 @@ div#title-section {
 	p.category-name {
 		height: 35px;
 		line-height: 35px;
-		font-size: 15px;
+		font-size: 1.154rem;
 		text-transform: uppercase;
 		font-weight: bold;
 	}
 	h1 {
 		margin-top: 0;
-		font-size: 55px;
+		font-size: 4.231rem;
 		letter-spacing: 4px;
 		line-height: 100%;
 		margin-right: 160px;
@@ -841,7 +841,7 @@ div#title-section {
 		span {
 			display: block;
 			color: #6b5f5a;
-			font-size: 13px;
+			font-size: 1rem;
 			padding-top: 45px;
 			background: url(img/formulaire/picto-reveil.png) top center no-repeat;
 		}
@@ -993,7 +993,7 @@ div#rub_service {
 				width: 52px;
 				height: 52px;
 				line-height: 52px;
-				font-size: 20px;
+				font-size: 1.538rem;
 				border-radius: 100%;
 				color: #333;
 				border: 2px solid $primary-color;
@@ -1084,7 +1084,7 @@ div#rub_service {
 
 div#rub_service {
 	box-shadow: 0 10px 5px #ccc;
-	font-size: 17px;
+	font-size: 1.308rem;
 	div.text-check-before-submit {
 		padding: 0 0;
 		margin: 0 100px;
@@ -1104,7 +1104,7 @@ div#rub_service {
 			}
 		}
 		h3 {
-			font-size: 23px;
+			font-size: 1.769rem;
 			text-transform: uppercase;
 			margin-bottom: 3rem;
 			&::after {
@@ -1120,7 +1120,7 @@ div#rub_service {
 			border: none;
 		}
 		div.widget div.title {
-			font-size: 16px;
+			font-size: 1.231rem;
 		}
 		> div.buttons {
 			margin: 0 -100px;
@@ -1206,7 +1206,7 @@ div#rub_service {
 div#evolution-log,
 div#summary {
 	h2 {
-		font-size: 23px;
+		font-size: 1.769rem;
 		text-transform: uppercase;
 		text-align: left;
 		&::after {
@@ -1295,7 +1295,7 @@ ul#evolutions {
 	h2 {
 		display: inline-block;
 		padding: 0;
-		font-size: 23px;
+		font-size: 1.769rem;
 		font-weight: 600;
 		text-transform: uppercase;
 		&::after {
@@ -1327,7 +1327,7 @@ ul#evolutions {
 		h2 {
 			display: inline-block;
 			padding: 0;
-			font-size: 23px;
+			font-size: 1.769rem;
 			font-weight: 600;
 			text-transform: uppercase;
 			margin-bottom: 1rem;
@@ -1419,9 +1419,9 @@ div#actu {
 		}
 		border-bottom-left-radius: 10px;
 		h3 {
-			font-size: 40px;
+			font-size: 3.077rem;
 			@media screen and ($max-mobile-viewport) {
-				font-size: 20px;
+				font-size: 1.538rem;
 			}
 			margin-bottom: 2rem;
 			a.rss {
@@ -1507,10 +1507,10 @@ div#actu {
 	}
 	margin: 0 auto;
 	h2 {
-		font-size: 46px;
+		font-size: 3.538rem;
 		font-weight: bold;
 		@media screen and ($max-mobile-viewport) {
-			font-size: 32px;
+			font-size: 2.462rem;
 		}
 	}
 	p {
@@ -1591,7 +1591,7 @@ ul {
 			border-radius: 100%;
 			color: white;
 			span {
-				font-size: 18px;
+				font-size: 1.385rem;
 				line-height: 34px;
 				font-weight: bold;
 				display: block;
@@ -1606,7 +1606,7 @@ ul {
 		.current-label {
 			display: inline-block;
 			font-weight: bold;
-			font-size: 13px;
+			font-size: 1rem;
 			padding: 1ex;
 		}
 	}
@@ -1624,7 +1624,7 @@ ul {
 #content #registration-title {
 	background: $violet url(img/header/img_ville_background_header_pageinter.jpg) top center no-repeat;
 	background-size: cover;
-	font-size: 16px;
+	font-size: 1.231rem;
 	text-align: center;
 	width: auto;
 	padding-top: 160px;
@@ -1660,10 +1660,10 @@ ul {
 		}
 		position: relative;
 		h2 {
-			font-size: 36px;
+			font-size: 2.769rem;
 			padding-left: 0;
 			@media screen and ($max-mobile-viewport) {
-				font-size: 26px;
+				font-size: 2rem;
 			}
 		}
 		&#frontend-login-password::after,
@@ -1752,7 +1752,7 @@ div#rub_service div#info {
 	h2 {
 		font-weight: bold;
 		text-align: left;
-		font-size: 40px;
+		font-size: 3.077rem;
 		padding: 0;
 	}
 	@media screen and ($max-mobile-viewport) {
diff --git a/static/toulouse-metropole/_vars.scss b/static/toulouse-metropole/_vars.scss
index 670a4972..bd1f654c 100644
--- a/static/toulouse-metropole/_vars.scss
+++ b/static/toulouse-metropole/_vars.scss
@@ -6,7 +6,7 @@ $border-radius: 3px;
 $font-family: AauxPro, Arial, Helvetica, sans-serif;
 $width: auto;
 $font-color: #666;
-$font-size: 13px;
+$font-size: 0.812em;
 
 $nav-background: transparent;
 $nav-color: white;
diff --git a/static/toulouse/_custom.scss b/static/toulouse/_custom.scss
index eb803ff6..a53987d5 100644
--- a/static/toulouse/_custom.scss
+++ b/static/toulouse/_custom.scss
@@ -16,7 +16,7 @@ a:hover {
 %toulouse-button {
 	background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
 	border-radius: 5px;
-	font-size: 15px;
+	font-size: 1.154rem;
 	font-weight: bold;
 	color: white;
 	position: relative;
@@ -93,7 +93,7 @@ a:hover {
 		box-shadow: none;
 		a {
 			color: #322f38;
-			font-size: 9px;
+			font-size: 0.692rem;
 		}
 		@media screen and ($max-mobile-viewport) {
 			cursor: pointer;
@@ -115,7 +115,7 @@ nav {
 		background: linear-gradient(to left, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
 	}
 	color: white;
-	font-size: 11px;
+	font-size: 0.846rem;
 	width: $nav-width;
 	text-transform: uppercase;
 	z-index: 150;
@@ -162,7 +162,7 @@ nav {
 					padding-top: 45px;
 					span {
 						display: inline;
-						font-size: 11px;
+						font-size: 0.846rem;
 					}
 				}
 			}
@@ -297,11 +297,11 @@ section#section-associations,
 section#section-professionnels {
 	position: relative;
 	h1:first-child {
-		font-size: 32px;
+		font-size: 2.462rem;
 		font-weight: 600;
 		margin-bottom: 3rem;
 		@media screen and (max-width: 380px) {
-			font-size: 24px;
+			font-size: 1.846rem;
 		}
 		&::before {
 			content: "";
@@ -371,7 +371,7 @@ section#section-particuliers {
 			background: #4f4c56;
 			border-radius: 5px;
 			color: #fff;
-			font-size: 13px;
+			font-size: 1rem;
 			text-transform: uppercase;
 			cursor: pointer;
 			padding-top: 2px;
@@ -500,7 +500,7 @@ section#section-particuliers {
 		}
 		h3 {
 			text-transform: uppercase;
-			font-size: 16px;
+			font-size: 1.231rem;
 			line-height: 135%;
 		}
 		p {
@@ -590,7 +590,7 @@ section#section-professionnels {
 			color: $dark-link-color;
 			border-radius: 5px;
 			box-shadow: 0 0 4px #45434c;
-			font-size: 13px;
+			font-size: 1rem;
 			&::before {
 				content: '';
 				position: absolute;
@@ -644,10 +644,10 @@ section#section-professionnels {
 	width: calc(100vw - 700px);
 	background: rgba(255, 255, 255, 0.4);
 	max-width: 50rem;
-	font-size: 14px;
+	font-size: 1.077rem;
 	h1 {
 		color: #2e2d35;
-		font-size: 59px;
+		font-size: 4.538rem;
 		margin: 0;
 	}
 	h2 {
@@ -656,7 +656,7 @@ section#section-professionnels {
 		color: $primary-color;
 		margin: 0;
 		margin-bottom: 2rem;
-		font-size: 23px;
+		font-size: 1.769rem;
 		letter-spacing: 3px;
 		&::after {
 			content: none;
@@ -671,11 +671,11 @@ section#section-professionnels {
 		text-align: center;
 		width: auto;
 		h1 {
-			font-size: 40px;
+			font-size: 3.077rem;
 			margin: 0 50px;  // space for "actus" button
 		}
 		h2 {
-			font-size: 20px;
+			font-size: 1.538rem;
 		}
 	}
 }
@@ -717,11 +717,11 @@ section#section-professionnels {
 		h3 {
 			text-transform: uppercase;
 			font-weight: bold;
-			font-size: 18px;
+			font-size: 1.385rem;
 			letter-spacing: 3px;
 		}
 		p {
-			font-size: 13px;
+			font-size: 1rem;
 			padding: 0 1rem;
 		}
 		a {
@@ -756,7 +756,7 @@ section#section-professionnels {
 			display: inline-block;
 			a {
 				border: none;
-				font-size: 10px;
+				font-size: 0.769rem;
 				text-transform: uppercase;
 				color: #333;
 				background: inherit;
@@ -790,12 +790,12 @@ div#title-section {
 		height: 35px;
 		line-height: 35px;
 		padding-left: 45px;
-		font-size: 15px;
+		font-size: 1.154rem;
 		font-weight: bold;
 	}
 	h1 {
 		margin-top: 0;
-		font-size: 40px;
+		font-size: 3.077rem;
 		margin-right: 160px;
 		@media screen and ($max-mobile-viewport) {
 			margin-right: 0;
@@ -814,7 +814,7 @@ div#title-section {
 		span {
 			display: block;
 			color: #fff;
-			font-size: 13px;
+			font-size: 1rem;
 			padding-top: 45px;
 			background: url(img/formulaire/picto-reveil.png) top center no-repeat;
 		}
@@ -856,7 +856,7 @@ div#buttons-section {
 		background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
 		border-radius: 5px;
 		box-shadow: 0 0 4px #45434c;
-		font-size: 13px;
+		font-size: 1rem;
 		&::before {
 			content: '';
 			position: absolute;
@@ -967,7 +967,7 @@ div#gauche {
 				z-index: 100;
 				position: relative;
 				font-weight: bold;
-				font-size: 33px;
+				font-size: 2.538rem;
 			}
 			&.current {
 				background: transparent;
@@ -1029,7 +1029,7 @@ div#gauche {
 					width: 48px;
 					height: 48px;
 					line-height: 48px;
-					font-size: 20px;
+					font-size: 1.538rem;
 				}
 				.label {
 					display: none;
@@ -1060,7 +1060,7 @@ div#gauche {
 }
 
 div#rub_service {
-	font-size: 17px;
+	font-size: 1.308rem;
 	div.text-check-before-submit {
 		padding: 0 0;
 		margin: 0 100px;
@@ -1083,7 +1083,7 @@ div#rub_service {
 			}
 		}
 		h3 {
-			font-size: 23px;
+			font-size: 1.769rem;
 			text-transform: uppercase;
 			margin-bottom: 3rem;
 			&::after {
@@ -1099,7 +1099,7 @@ div#rub_service {
 			border: none;
 		}
 		div.widget div.title {
-			font-size: 16px;
+			font-size: 1.231rem;
 		}
 		> div.buttons {
 			margin: 0 -100px;
@@ -1193,7 +1193,7 @@ div#rub_service {
 div#evolution-log,
 div#summary {
 	h2 {
-		font-size: 23px;
+		font-size: 1.769rem;
 		text-transform: uppercase;
 		text-align: left;
 		&::after {
@@ -1276,7 +1276,7 @@ ul#evolutions {
 	h2 {
 		display: inline-block;
 		padding: 0;
-		font-size: 23px;
+		font-size: 1.769rem;
 		font-weight: 600;
 		text-transform: uppercase;
 		&::after {
@@ -1308,7 +1308,7 @@ ul#evolutions {
 		h2 {
 			display: inline-block;
 			padding: 0;
-			font-size: 23px;
+			font-size: 1.769rem;
 			font-weight: 600;
 			text-transform: uppercase;
 			margin-bottom: 1rem;
@@ -1400,9 +1400,9 @@ div#actu {
 		}
 		border-bottom-left-radius: 10px;
 		h3 {
-			font-size: 40px;
+			font-size: 3.077rem;
 			@media screen and ($max-mobile-viewport) {
-				font-size: 20px;
+				font-size: 1.538rem;
 			}
 			margin-bottom: 2rem;
 			a.rss {
@@ -1489,10 +1489,10 @@ div#actu {
 	}
 	margin: 0 auto;
 	h2 {
-		font-size: 46px;
+		font-size: 3.538rem;
 		font-weight: bold;
 		@media screen and ($max-mobile-viewport) {
-			font-size: 32px;
+			font-size: 2.462rem;
 		}
 	}
 	p {
@@ -1564,7 +1564,7 @@ ul {
 			border-radius: 100%;
 			color: white;
 			span {
-				font-size: 18px;
+				font-size: 1.385rem;
 				line-height: 34px;
 				font-weight: bold;
 				display: block;
@@ -1579,7 +1579,7 @@ ul {
 		.current-label {
 			display: inline-block;
 			font-weight: bold;
-			font-size: 13px;
+			font-size: 1rem;
 			padding: 1ex;
 		}
 	}
@@ -1648,10 +1648,10 @@ $list-illus:
 		}
 		position: relative;
 		h2 {
-			font-size: 36px;
+			font-size: 2.769rem;
 			padding-left: 0;
 			@media screen and ($max-mobile-viewport) {
-				font-size: 26px;
+				font-size: 2rem;
 			}
 		}
 		&#frontend-login-password::after,
@@ -1755,7 +1755,7 @@ div#rub_service div#info {
 	h2 {
 		font-weight: bold;
 		text-align: left;
-		font-size: 40px;
+		font-size: 3.077rem;
 		padding: 0;
 	}
 	@media screen and ($max-mobile-viewport) {
diff --git a/static/toulouse/_vars.scss b/static/toulouse/_vars.scss
index 64a8e136..81e4414a 100644
--- a/static/toulouse/_vars.scss
+++ b/static/toulouse/_vars.scss
@@ -4,7 +4,7 @@ $border-radius: 3px;
 $font-family: Montserrat, Arial, sans-serif;
 $width: auto;
 $font-color: #666;
-$font-size: 13px;
+$font-size: 0.812em;
 
 $nav-background: transparent;
 $nav-color: white;
diff --git a/static/tournai/_custom.scss b/static/tournai/_custom.scss
index c1e358f2..bb86b2d2 100644
--- a/static/tournai/_custom.scss
+++ b/static/tournai/_custom.scss
@@ -155,7 +155,7 @@ div.dashboard-title h1 {
 $dashboard_items: profil, demandes, paiements, porte-documents;
 
 #content div.dashboard-menu ul li {
-	font-size: 15px;
+	font-size: 1.071rem;
 	a:hover {
 		background: transparent;
 		color: $primary-color;
@@ -221,7 +221,7 @@ div#rub_service div.submit-button {
 div#rub_service h2 {
 	text-align: left;
 	color: $primary-color;
-	font-size: 26px;
+	font-size: 1.857rem;
 	font-weight: 500;
 	padding-left: 0;
 	text-transform: none;
@@ -249,7 +249,7 @@ div#evolution-log h2:first-child,
 div#summary h2:first-child {
 	color: #000;
 	font-weight: normal;
-	font-size: 20px;
+	font-size: 1.429rem;
 }
 
 ul#evolutions span.status {
@@ -290,7 +290,7 @@ div#welcome {
 	}
 	h1 {
 		margin: 0;
-		font-size: 25px;
+		font-size: 1.786rem;
 		font-weight: 500;
 		color: #414042;
 		line-height: 110%;
@@ -302,7 +302,7 @@ div#welcome {
 	p.intro {
 		margin: 0;
 		margin-top: 1ex;
-		font-size: 18px;
+		font-size: 1.286rem;
 		font-weight: 100;
 		color: #9c9999;
 	}
@@ -325,7 +325,7 @@ div#login-form {
 	padding-left: 10px;
 	h3 {
 		margin-top: 0;
-		font-size: 22px;
+		font-size: 1.571rem;
 		font-weight: 500;
 	}
 	p input {
@@ -350,7 +350,7 @@ form#csam-login img {
 }
 
 form#csam-login p {
-	font-size: 15px;
+	font-size: 1.071rem;
 }
 
 form#csam-login input {
@@ -369,7 +369,7 @@ $category-slugs: urbanisme, agenda, associations, commerces, demande-d-actes-et-
 #content div.wcsformsofcategorycell {
 	position: relative;
 	h2:first-child {
-		font-size: 20px;
+		font-size: 1.429rem;
 		text-transform: none;
 	}
 	@each $category in $category-slugs {
@@ -409,7 +409,7 @@ $category-slugs: urbanisme, agenda, associations, commerces, demande-d-actes-et-
 #content div.wcscurrentformscell {
 	h2:first-child {
 		margin-top: 10px;
-		font-size: 20px;
+		font-size: 1.429rem;
 		text-transform: none;
 		background: url(assets/img/picto-demandes-en-cours.png) bottom left no-repeat;
 		padding-left: 60px;
@@ -491,7 +491,7 @@ body.page-bienvenue {
 		text-transform: uppercase;
 		h2 {
 			text-transform: uppercase;
-			font-size: 26px;
+			font-size: 1.857rem;
 			color: #414042;
 		}
 		p {
diff --git a/static/tournai/_vars.scss b/static/tournai/_vars.scss
index c2e7987e..2d430e23 100644
--- a/static/tournai/_vars.scss
+++ b/static/tournai/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #D8308A;
 $width: 1140px;
 $mobile-limit: 800px;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: DINPro, helvetica, arial, sans-serif;
 $link-color: $primary-color;
 $nav-background: #DCDADA;
@@ -19,7 +19,7 @@ $button-color: $primary-color;
 $button-hover-background: $primary-color;
 $button-hover-color: white;
 $title-background: transparent;
-$title-font-size: 15px;
+$title-font-size: 1.071rem;
 $title-transform: uppercase;
 $title-color: #333;
 $footer-background: #7A7979;
diff --git a/static/tours-metropole/_vars.scss b/static/tours-metropole/_vars.scss
index eb236308..b2acf28b 100644
--- a/static/tours-metropole/_vars.scss
+++ b/static/tours-metropole/_vars.scss
@@ -4,7 +4,7 @@ $width: 1170px;
 
 $font-color: black;
 $font-family: 'Roboto Condensed', sans-serif;
-$font-size: 16px;
+$font-size: 1em;
 
 $title-background: $primary-color;
 
diff --git a/static/tours/_vars.scss b/static/tours/_vars.scss
index d92f4140..7924770e 100644
--- a/static/tours/_vars.scss
+++ b/static/tours/_vars.scss
@@ -5,7 +5,7 @@ $background-color: #ffffff;
 
 $font-color: black;
 $font-family: 'Source Sans Pro', sans-serif;
-$font-size: 16px;
+$font-size: 1em;
 
 $nav-color: #000000;
 $nav-submenu-color: #000000;
diff --git a/static/universite-paris-nanterre/_custom.scss b/static/universite-paris-nanterre/_custom.scss
index 2e875d28..cccea361 100644
--- a/static/universite-paris-nanterre/_custom.scss
+++ b/static/universite-paris-nanterre/_custom.scss
@@ -81,11 +81,11 @@ div.textcell {
 	h2 {
 		color: $font-color;
 		font-weight: bold;
-		font-size: 15px;
+		font-size: 1rem;
 	}
 	h3 {
 		color: $primary-color;
-		font-size: 10px;
+		font-size: 0.667rem;
 	}
 }
 
diff --git a/static/universite-paris-nanterre/_vars.scss b/static/universite-paris-nanterre/_vars.scss
index 58db1157..4335d966 100644
--- a/static/universite-paris-nanterre/_vars.scss
+++ b/static/universite-paris-nanterre/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #E30613;
 
 $font-color: #5E5D5D;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: Arial, sans-serif;
 $width: 1240px;
 
@@ -13,7 +13,7 @@ $border-radius: 0px;
 $button-background: $primary-color;
 $title-color: $primary-color;
 $title-weight: bold;
-$title-font-size: 22px;
+$title-font-size: 1.467rem;
 $title-background: transparent;
 $title-transform: uppercase;
 $footer-background: #534e48;
diff --git a/static/urville-nacqueville/_vars.scss b/static/urville-nacqueville/_vars.scss
index 2b928ed0..33dab662 100644
--- a/static/urville-nacqueville/_vars.scss
+++ b/static/urville-nacqueville/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #4585AB; /* blue */
 
 $width: 960px;
 $font-color: #333;
-$font-size: 13px;
+$font-size: 0.812em;
 $font-family: Arial, Tahoma, sans-serif;
 $nav-background: transparent;
 $nav-submenu-background: $primary-color;
diff --git a/static/vandoeuvre-les-nancy/_custom.scss b/static/vandoeuvre-les-nancy/_custom.scss
index f3f929af..ca07b6dd 100644
--- a/static/vandoeuvre-les-nancy/_custom.scss
+++ b/static/vandoeuvre-les-nancy/_custom.scss
@@ -5,7 +5,7 @@
 		display: block;
 		text-indent: -10000px;
 		line-height: 180px;
-		font-size: 40px;
+		font-size: 2.857rem;
 		color: white;
 		font-weight: normal;
 	}
diff --git a/static/vandoeuvre-les-nancy/_vars.scss b/static/vandoeuvre-les-nancy/_vars.scss
index 44b5b4b3..ab403a9f 100644
--- a/static/vandoeuvre-les-nancy/_vars.scss
+++ b/static/vandoeuvre-les-nancy/_vars.scss
@@ -3,7 +3,7 @@ $primary-color: #337298;
 $font-family: Helvetica, Arial, sans-serif;
 $width: 980px;
 $font-color: #060606;
-$font-size: 14px;
+$font-size: 0.875em;
 $nav-background: #4b4b4b linear-gradient(to bottom, #4b4b4b 0%, #717171 100%);
 $nav-submenu-background: #eee;
 $nav-submenu-color: #333;
diff --git a/static/vendargues/_vars.scss b/static/vendargues/_vars.scss
index f6d8c0ee..2d4d6ae9 100644
--- a/static/vendargues/_vars.scss
+++ b/static/vendargues/_vars.scss
@@ -2,7 +2,7 @@ $yellow: #ffba00;
 $primary-color: $yellow;
 $border-radius: 3px;
 $font-family: Arial, sans-serif;
-$font-size: 15px;
+$font-size: 0.938em;
 $width: 1200px;
 
 $title-background: $yellow;
diff --git a/static/venissieux/_custom.scss b/static/venissieux/_custom.scss
index 2ed86d3e..b947ae65 100644
--- a/static/venissieux/_custom.scss
+++ b/static/venissieux/_custom.scss
@@ -19,10 +19,10 @@ nav {
 
 #toplinks {
 	top: -6rem;
-	font-size: 20px;
+	font-size: 1.25rem;
 	@media screen and ($max-mobile-viewport) {
 		top: -9.5rem;
-		font-size: 16px;
+		font-size: 1rem;
 	}
 	background: transparent;
 	span.login {
@@ -62,7 +62,7 @@ div#header h1 {
 	font-family: Oswald;
 	font-weight: 300;
 	text-transform: uppercase;
-	font-size: 48px;
+	font-size: 3rem;
 }
 
 div#section-une {
@@ -134,7 +134,7 @@ div#section-une {
 			background: url(img/mon-compte.png) 5px 5px no-repeat;
 			background-size: 40px;
 			color: white;
-			font-size: 32px;
+			font-size: 2rem;
 			padding-left: 50px;
 			&::after {
 				content: "";
@@ -186,7 +186,7 @@ div#section-une {
 	h2 {
 		text-align: center;
 		color: $secondary-color;
-		font-size: 24px;
+		font-size: 1.5rem;
 		margin-top: 0;
 	}
 	picture {
@@ -247,7 +247,7 @@ div#rub_service {
 			text-transform: uppercase;
 		}
 		h3 {
-			font-size: 22px;
+			font-size: 1.375rem;
 			color: $secondary-color;
 			margin-top: 2rem;
 		}
diff --git a/static/venissieux/_vars.scss b/static/venissieux/_vars.scss
index 32ab5b3d..5514db15 100644
--- a/static/venissieux/_vars.scss
+++ b/static/venissieux/_vars.scss
@@ -1,7 +1,7 @@
 $border-radius: 3px;
 $primary-color: #3795b2;
 $secondary-color: #ed0f53;
-$font-size: 16px;
+$font-size: 1em;
 $font-family: Cantarell, sans-serif;
 
 $width: 1400px;
@@ -19,7 +19,7 @@ $title-background: transparent;
 $title-transform: uppercase;
 $title-font-family: Oswald, sans-serif;
 $title-weight: 300;
-$title-font-size: 24px;
+$title-font-size: 1.5rem;
 $title-padding: 0.7rem 0.5rem;
 
 $button-background: $primary-color;
diff --git a/static/villejuif/_custom.scss b/static/villejuif/_custom.scss
index baf529f8..de07d47a 100644
--- a/static/villejuif/_custom.scss
+++ b/static/villejuif/_custom.scss
@@ -64,7 +64,7 @@ div#nav #nav-button + ul li a{
 	line-height: 1;
 	text-transform: uppercase;
 	transition: background-color 0.2s ease, color 0.2s ease;
-	font-size: 14px;
+	font-size: 1rem;
 	padding: 15px 15px 15px;
 	color: #fff;
 	background-color: $primary-color;
diff --git a/static/villejuif/_vars.scss b/static/villejuif/_vars.scss
index 9fc2d607..31060c53 100644
--- a/static/villejuif/_vars.scss
+++ b/static/villejuif/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #1ba39c;
 
 $width: 980px;
 $font-color: #222;
-$font-size: 14px;
+$font-size: 0.875em;
 $font-family: Helvetica, sans-serif;
 $button-background: $primary-color;
 $title-background: $primary-color;
diff --git a/static/villeneuve-les-maguelone/_vars.scss b/static/villeneuve-les-maguelone/_vars.scss
index abb0b690..0bffcc11 100644
--- a/static/villeneuve-les-maguelone/_vars.scss
+++ b/static/villeneuve-les-maguelone/_vars.scss
@@ -1,7 +1,7 @@
 $primary-color: #00bdce;
 
 $font-color: #3F3F3F;
-$font-size: 15px;
+$font-size: 0.938em;
 $font-family: "Open Sans", sans-serif;
 $width: 1140px;
 
diff --git a/static/villeurbanne-2018/_vars.scss b/static/villeurbanne-2018/_vars.scss
index 137574fc..bc356eec 100644
--- a/static/villeurbanne-2018/_vars.scss
+++ b/static/villeurbanne-2018/_vars.scss
@@ -2,7 +2,7 @@ $primary-color: #0094aa;
 
 $font-family: Roboto, sans-serif;
 $font-color: #222;
-$font-size: 16px;
+$font-size: 1em;
 
 $width: 1230px;
 
diff --git a/static/vincennes-2018/_vars.scss b/static/vincennes-2018/_vars.scss
index 3311a43b..b89a2ba0 100644
--- a/static/vincennes-2018/_vars.scss
+++ b/static/vincennes-2018/_vars.scss
@@ -3,7 +3,7 @@ $primary-color: #F50082;
 $width: 1160px;
 $font-color: #282828;
 $font-family: "Open Sans", sans-serif;
-$font-size: 15px;
+$font-size: 0.938em;
 $nav-background: transparent;
 $nav-submenu-background: #eee;
 $nav-submenu-color: #333;
-- 
2.27.0

