diff --git a/fonts/Digi Grotesk Bold Condensed Regular/Digi Grotesk Bold Condensed Regular.ttf b/fonts/Digi Grotesk Bold Condensed Regular/Digi Grotesk Bold Condensed Regular.ttf
new file mode 100644
index 0000000..a9b4d8e
Binary files /dev/null and b/fonts/Digi Grotesk Bold Condensed Regular/Digi Grotesk Bold Condensed Regular.ttf differ
diff --git a/fonts/Digi Grotesk Bold Condensed Regular/readme.html b/fonts/Digi Grotesk Bold Condensed Regular/readme.html
new file mode 100644
index 0000000..fbacb63
--- /dev/null
+++ b/fonts/Digi Grotesk Bold Condensed Regular/readme.html	
@@ -0,0 +1,188 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta name="viewport" content="width=device-width" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta http-equiv="refresh" content="5;url=http://fontsgeek.com?ref=readme">
+<title>Fontsgeek</title>
+<style>
+/* ------------------------------------- 
+        GLOBAL 
+------------------------------------- */
+* { 
+    margin:0;
+    padding:0;
+    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
+    font-size: 100%;
+    line-height: 1.6;
+}
+
+img { 
+    max-width: 100%; 
+}
+
+body {
+    -webkit-font-smoothing:antialiased; 
+    -webkit-text-size-adjust:none; 
+    width: 100%!important; 
+    height: 100%;
+    background:#DDD;
+}
+
+
+/* ------------------------------------- 
+        ELEMENTS 
+------------------------------------- */
+a { 
+    color: #348eda;
+}
+
+.btn-primary, .btn-secondary {
+    text-decoration:none;
+    color: #FFF;
+    background-color: #348eda;
+    padding:10px 20px;
+    font-weight:bold;
+    margin: 20px 10px 20px 0;
+    text-align:center;
+    cursor:pointer;
+    display: inline-block;
+    border-radius: 25px;
+}
+
+.btn-secondary{
+    background: #aaa;
+}
+
+.last { 
+    margin-bottom: 0;
+}
+
+.first{
+    margin-top: 0;
+}
+
+
+/* ------------------------------------- 
+        BODY 
+------------------------------------- */
+table.body-wrap { 
+    width: 100%;
+    padding: 20px;
+}
+
+table.body-wrap .container{
+    border: 1px solid #f0f0f0;
+}
+
+
+/* ------------------------------------- 
+        FOOTER 
+------------------------------------- */
+table.footer-wrap { 
+    width: 100%;    
+    clear:both!important;
+}
+
+.footer-wrap .container p {
+    font-size:12px;
+    color:#666;
+    
+}
+
+table.footer-wrap a{
+    color: #999;
+}
+
+
+/* ------------------------------------- 
+        TYPOGRAPHY 
+------------------------------------- */
+h1,h2,h3{
+    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
+    margin: 40px 0 10px;
+    line-height: 1.2;
+    font-weight:200; 
+}
+
+h1 {
+    font-size: 36px;
+}
+h2 {
+    font-size: 28px;
+}
+h3 {
+    font-size: 22px;
+}
+
+p, ul { 
+    margin-bottom: 10px; 
+    font-weight: normal; 
+    font-size:14px;
+}
+
+ul li {
+    margin-left:5px;
+    list-style-position: inside;
+}
+
+/* --------------------------------------------------- 
+        RESPONSIVENESS
+        Nuke it from orbit. It's the only way to be sure. 
+------------------------------------------------------ */
+
+/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+.container {
+    display:block!important;
+    max-width:600px!important;
+    margin:0 auto!important; /* makes it centered */
+    clear:both!important;
+}
+
+/* This should also be a block element, so that it will fill 100% of the .container */
+.content {
+    padding:20px;
+    max-width:600px;
+    margin:0 auto;
+    display:block; 
+}
+
+/* Let's make sure tables in the content area are 100% wide */
+.content table { 
+    width: 100%; 
+}
+
+</style>
+</head>
+ 
+<body bgcolor="#f6f6f6">
+
+<!-- body -->
+<table class="body-wrap">
+    <tr>
+        <td></td>
+        <td class="container" bgcolor="#FFFFFF">
+
+            <!-- content -->
+            <div class="content">
+            <table>
+                <tr>
+                    <td>
+                        <h1>Downloaded from Fontsgeek.com</h1>
+                        <p>This font was downloaded from <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> . You can visit <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> for thousands of free fonts.</p>
+                        <p><a href="http://fontsgeek.com?ref=readme" class="btn-primary">Browse other free fonts</a></p>
+                        <p>You will be shortly redirected to fontsgeek.</p>
+                    </td>
+                </tr>
+            </table>
+            </div>
+            <!-- /content -->
+                                    
+        </td>
+        <td></td>
+    </tr>
+</table>
+<!-- /body -->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/Futura LT Light/Futura LT Light.ttf b/fonts/Futura LT Light/Futura LT Light.ttf
new file mode 100644
index 0000000..38b89ab
Binary files /dev/null and b/fonts/Futura LT Light/Futura LT Light.ttf differ
diff --git a/fonts/Futura LT Light/readme.html b/fonts/Futura LT Light/readme.html
new file mode 100644
index 0000000..fbacb63
--- /dev/null
+++ b/fonts/Futura LT Light/readme.html	
@@ -0,0 +1,188 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta name="viewport" content="width=device-width" />
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta http-equiv="refresh" content="5;url=http://fontsgeek.com?ref=readme">
+<title>Fontsgeek</title>
+<style>
+/* ------------------------------------- 
+        GLOBAL 
+------------------------------------- */
+* { 
+    margin:0;
+    padding:0;
+    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; 
+    font-size: 100%;
+    line-height: 1.6;
+}
+
+img { 
+    max-width: 100%; 
+}
+
+body {
+    -webkit-font-smoothing:antialiased; 
+    -webkit-text-size-adjust:none; 
+    width: 100%!important; 
+    height: 100%;
+    background:#DDD;
+}
+
+
+/* ------------------------------------- 
+        ELEMENTS 
+------------------------------------- */
+a { 
+    color: #348eda;
+}
+
+.btn-primary, .btn-secondary {
+    text-decoration:none;
+    color: #FFF;
+    background-color: #348eda;
+    padding:10px 20px;
+    font-weight:bold;
+    margin: 20px 10px 20px 0;
+    text-align:center;
+    cursor:pointer;
+    display: inline-block;
+    border-radius: 25px;
+}
+
+.btn-secondary{
+    background: #aaa;
+}
+
+.last { 
+    margin-bottom: 0;
+}
+
+.first{
+    margin-top: 0;
+}
+
+
+/* ------------------------------------- 
+        BODY 
+------------------------------------- */
+table.body-wrap { 
+    width: 100%;
+    padding: 20px;
+}
+
+table.body-wrap .container{
+    border: 1px solid #f0f0f0;
+}
+
+
+/* ------------------------------------- 
+        FOOTER 
+------------------------------------- */
+table.footer-wrap { 
+    width: 100%;    
+    clear:both!important;
+}
+
+.footer-wrap .container p {
+    font-size:12px;
+    color:#666;
+    
+}
+
+table.footer-wrap a{
+    color: #999;
+}
+
+
+/* ------------------------------------- 
+        TYPOGRAPHY 
+------------------------------------- */
+h1,h2,h3{
+    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
+    margin: 40px 0 10px;
+    line-height: 1.2;
+    font-weight:200; 
+}
+
+h1 {
+    font-size: 36px;
+}
+h2 {
+    font-size: 28px;
+}
+h3 {
+    font-size: 22px;
+}
+
+p, ul { 
+    margin-bottom: 10px; 
+    font-weight: normal; 
+    font-size:14px;
+}
+
+ul li {
+    margin-left:5px;
+    list-style-position: inside;
+}
+
+/* --------------------------------------------------- 
+        RESPONSIVENESS
+        Nuke it from orbit. It's the only way to be sure. 
+------------------------------------------------------ */
+
+/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
+.container {
+    display:block!important;
+    max-width:600px!important;
+    margin:0 auto!important; /* makes it centered */
+    clear:both!important;
+}
+
+/* This should also be a block element, so that it will fill 100% of the .container */
+.content {
+    padding:20px;
+    max-width:600px;
+    margin:0 auto;
+    display:block; 
+}
+
+/* Let's make sure tables in the content area are 100% wide */
+.content table { 
+    width: 100%; 
+}
+
+</style>
+</head>
+ 
+<body bgcolor="#f6f6f6">
+
+<!-- body -->
+<table class="body-wrap">
+    <tr>
+        <td></td>
+        <td class="container" bgcolor="#FFFFFF">
+
+            <!-- content -->
+            <div class="content">
+            <table>
+                <tr>
+                    <td>
+                        <h1>Downloaded from Fontsgeek.com</h1>
+                        <p>This font was downloaded from <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> . You can visit <a href="http://fontsgeek.com?ref=readme">fontsgeek.com</a> for thousands of free fonts.</p>
+                        <p><a href="http://fontsgeek.com?ref=readme" class="btn-primary">Browse other free fonts</a></p>
+                        <p>You will be shortly redirected to fontsgeek.</p>
+                    </td>
+                </tr>
+            </table>
+            </div>
+            <!-- /content -->
+                                    
+        </td>
+        <td></td>
+    </tr>
+</table>
+<!-- /body -->
+
+</body>
+</html>
\ No newline at end of file
diff --git a/fonts/Gliscor Gothic-FontZillion/Fonts/gligoth.ttf b/fonts/Gliscor Gothic-FontZillion/Fonts/gligoth.ttf
new file mode 100644
index 0000000..c79e11c
Binary files /dev/null and b/fonts/Gliscor Gothic-FontZillion/Fonts/gligoth.ttf differ
diff --git a/index.html b/index.html
index ef76c77..60da631 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,26 @@
 	<nav>
 		<div>
 			<ul>
-				<li><a href=""><img alt="Facebook - White Circle" data-type="image" itemprop="image" style="width: 40px; height: 40px; object-fit: cover;" src="https://static.wixstatic.com/media/e0678ef25486466ba65ef6ad47b559e1.png/v1/fill/w_40,h_40,al_c,q_80,usm_0.66_1.00_0.01/e0678ef25486466ba65ef6ad47b559e1.webp"></a></li>
-				<li><a href=""><img alt="Instagram - White Circle" data-type="image" itemprop="image" style="width: 40px; height: 40px; object-fit: cover;" src="https://static.wixstatic.com/media/17f992598001435083075924d7b6ae80.png/v1/fill/w_40,h_40,al_c,q_80,usm_0.66_1.00_0.01/17f992598001435083075924d7b6ae80.webp"></a></li>
+				<li><a href="">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="15 15 144 144" style="width: 40px; height: 40px;">
+						<g>
+							<path d="M86,14.33333c-39.58041,0 -71.66667,32.08626 -71.66667,71.66667c0,39.58041 32.08626,71.66667 71.66667,71.66667c39.58041,0 71.66667,-32.08626 71.66667,-71.66667c0,-39.58041 -32.08626,-71.66667 -71.66667,-71.66667z"></path>							
+						</g>
+						<g style="fill: #2f2e2e;">
+							<path d="M96.75,40.84994c-11.87445,0 -21.5,9.62555 -21.5,21.5v10.75h-12.9v17.2h12.9v40.85h17.2v-40.85h15.05l2.15,-17.2h-17.2v-8.6c0,-4.74935 3.85065,-8.6 8.6,-8.6h8.6v-14.3577c-4.10435,-0.42355 -8.76985,-0.7009 -12.9,-0.6923z"></path>
+						</g>
+					</svg>
+				</a></li>
+				<li><a href="">
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="15 15 144 144" style="width: 40px; height: 40px;">
+							<g>
+								<path d="M86,14.33333c-39.58041,0 -71.66667,32.08626 -71.66667,71.66667c0,39.58041 32.08626,71.66667 71.66667,71.66667c39.58041,0 71.66667,-32.08626 71.66667,-71.66667c0,-39.58041 -32.08626,-71.66667 -71.66667,-71.66667z"></path>
+							</g>
+							<g style="fill: #2f2e2e;">
+								<path d="M55.9,44.6125c-6.18755,0 -11.2875,5.09995 -11.2875,11.2875v60.2c0,6.18755 5.09995,11.2875 11.2875,11.2875h60.2c6.18755,0 11.2875,-5.09995 11.2875,-11.2875v-60.2c0,-6.18755 -5.09995,-11.2875 -11.2875,-11.2875zM104.8125,55.9h11.2875v11.2875h-11.2875zM86,70.95c8.36274,0 15.05,6.68726 15.05,15.05c0,8.36274 -6.68726,15.05 -15.05,15.05c-8.36274,0 -15.05,-6.68726 -15.05,-15.05c0,-8.36274 6.68726,-15.05 15.05,-15.05zM52.1375,78.475h12.58086c-0.83774,2.35156 -1.29336,4.89419 -1.29336,7.525c0,12.41919 10.15581,22.575 22.575,22.575c12.41919,0 22.575,-10.15581 22.575,-22.575c0,-2.63081 -0.45562,-5.17344 -1.29336,-7.525h12.58086v37.625c0,2.1311 -1.6314,3.7625 -3.7625,3.7625h-60.2c-2.1311,0 -3.7625,-1.6314 -3.7625,-3.7625z"></path>
+							</g>
+					</svg>
+				</a></li>
 			</ul>
 			<ol>
 				<li><a href="#accueil">Accueil</a></li>
@@ -53,7 +71,9 @@
 					<div id="parcours">
 						<a href="parcour.html" id="DECOUVERTES" class="parcour">
 							<div class="icone">
-								<img data-type="image" itemprop="image" src="https://img.icons8.com/metro/384/binoculars.png">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172 172">
+									<g fill="#ffffff"><path d="M125.27885,19.22596c-1.36959,0.02584 -2.73918,0.28426 -4.13462,0.62019c-10.59495,1.98978 -17.28786,11.93871 -15.29808,22.53365c5.29747,-4.6256 12.61058,-9.30288 22.53365,-9.30288c7.93329,0 13.17909,1.9381 17.15865,3.92788c0,-0.67187 0.05169,-1.1887 -0.62019,-1.86058c-1.73137,-9.2512 -10.05228,-16.15084 -19.63942,-15.91827zM46.30769,20.05288c-9.14783,-0.23257 -17.49459,6.40865 -19.22596,15.09135c-0.67187,0.67188 -0.62019,1.18871 -0.62019,1.86058c3.97957,-1.98978 9.8714,-3.92788 17.15865,-3.92788c9.92308,0 17.28786,4.6256 21.91346,9.92308c1.98978,-10.59495 -4.70312,-20.54387 -15.29808,-22.53365c-1.31791,-0.33594 -2.60997,-0.38762 -3.92788,-0.41346zM43.62019,39.69231c-16.53846,0 -20.51803,9.17368 -23.15385,17.77885c-4.6256,14.54868 -17.15865,48.99519 -17.15865,48.99519c0,0 0.67188,-0.64603 0.82692,-0.82692c-2.60997,5.01322 -4.13462,10.72416 -4.13462,16.74519c0,20.02704 16.35757,36.38462 36.38462,36.38462c20.02704,0 36.38462,-16.35757 36.38462,-36.38462c0,-18.76081 -14.36779,-34.31731 -32.66346,-36.17788c21.39663,1.13702 28.29628,11.4994 32.66346,19.63942c0,7.28726 5.94351,13.23077 13.23077,13.23077c7.28726,0 13.23077,-5.94351 13.23077,-13.23077c4.36719,-8.14003 11.26683,-18.5024 32.66346,-19.63942c-18.29567,1.86058 -32.66346,17.41707 -32.66346,36.17788c0,20.02704 16.35757,36.38462 36.38462,36.38462c20.02704,0 36.38462,-16.35757 36.38462,-36.38462c0,-6.02103 -1.52464,-11.73197 -4.13462,-16.74519c0.15505,0.18089 0.82692,0.82692 0.82692,0.82692c0,0 -12.53305,-34.44651 -17.15865,-48.99519c-2.63581,-7.93329 -6.61538,-17.77885 -23.15385,-17.77885c-17.85637,0 -24.47176,21.75842 -29.76923,17.77885c-3.30769,-3.30769 -7.98497,-4.54808 -12.61058,-4.54808c-4.6256,0 -9.30288,1.24038 -12.61058,4.54808c-5.29747,3.97957 -11.91286,-17.77885 -29.76923,-17.77885zM36.38462,99.23077c12.86899,0 23.15385,10.28486 23.15385,23.15385c0,12.86899 -10.28485,23.15385 -23.15385,23.15385c-12.86899,0 -23.15385,-10.28485 -23.15385,-23.15385c0,-12.86899 10.28486,-23.15385 23.15385,-23.15385zM135.61538,99.23077c12.86899,0 23.15385,10.28486 23.15385,23.15385c0,12.86899 -10.28485,23.15385 -23.15385,23.15385c-12.86899,0 -23.15385,-10.28485 -23.15385,-23.15385c0,-12.86899 10.28486,-23.15385 23.15385,-23.15385z"></path></g>
+								</svg>
 							</div>
 							<h3>DÉCOUVERTES</h3>
 							<span>Découvrez ou redécouvrez les quartiers de la ville</span>
@@ -94,46 +114,50 @@
 		<section id="qui">
 			<div class="background-image">
 			</div>
-			<h2>Qui sommes-nous?</h2>
-			<p>
-				Ce site est à l'initiative de Bastien Grégis, charpentier, technicien cordiste et étudiant en architecture. Mais surtout passionné par la ville de Lyon. Il a créé son entreprise d'animation culturelle en août 2017 pour faire profiter de sa passion, aux visiteurs occasionnels comme aux résidents de longue date souhaitant porter un nouveau regard sur la ville.
-			</p>
-			<p>
-				Inurbe.fr se propose d'être une plateforme de rassemblement pour que des passionnés de la ville et du territoire puissent partager leurs connaissances avec vous au travers de visites guidées originales.
-			</p>
+			<div class="section">
+				<h2>Qui sommes-nous?</h2>
+				<p>
+					Ce site est à l'initiative de Bastien Grégis, charpentier, technicien cordiste et étudiant en architecture. Mais surtout passionné par la ville de Lyon. Il a créé son entreprise d'animation culturelle en août 2017 pour faire profiter de sa passion, aux visiteurs occasionnels comme aux résidents de longue date souhaitant porter un nouveau regard sur la ville.
+				</p>
+				<p>
+					Inurbe.fr se propose d'être une plateforme de rassemblement pour que des passionnés de la ville et du territoire puissent partager leurs connaissances avec vous au travers de visites guidées originales.
+				</p>
+			</div>
 		</section>
 		<section id="contact">
 			<div class="background-image">
 			</div>
-			<h2>NOUS CONTACTER</h2>
-			<form>
-				<div>
+			<div class="section">
+				<h2>Nous contacter</h2>
+				<form>
 					<div>
-						<p>
-							Bastien GREGIS<br/>
-							<br/>
-							20 rue Léon Blum<br/>
-							<br/>
-							69100 Villeurbanne, France<br/>
-							<br/>
-							<br/>
-							<br/>
-							inurbelyon@gmail.com<br/>
-							<br/>
-							<br/>
-							<br/>
-							​Tél : 06.29.90.63.31
-						</p>
+						<div>
+							<p>
+								Bastien GREGIS<br/>
+								<br/>
+								20 rue Léon Blum<br/>
+								<br/>
+								69100 Villeurbanne, France<br/>
+								<br/>
+								<br/>
+								<br/>
+								inurbelyon@gmail.com<br/>
+								<br/>
+								<br/>
+								<br/>
+								​Tél : 06.29.90.63.31
+							</p>
+						</div>
+						<div id="input">
+							<input type="text" required="" aria-invalid="false" name="Name" value="" class="cf2_required" placeholder="Nom *" data-aid="nameField">
+							<input type="text" required="" aria-invalid="false" name="Email" value="" class="cf2_required" placeholder="Email *" data-aid="emailField">
+							<input type="text" aria-invalid="false" name="Subject" value="" class="" placeholder="Objet" data-aid="subjectField">
+							<textarea name="Message" placeholder="Message" data-aid="messageField" id="comp-ifqyiqxmfieldMessage"></textarea>
+						</div>
 					</div>
-					<div id="input">
-						<input type="text" required="" aria-invalid="false" name="Name" value="" class="cf2_required" placeholder="Nom *" data-aid="nameField">
-						<input type="text" required="" aria-invalid="false" name="Email" value="" class="cf2_required" placeholder="Email *" data-aid="emailField">
-						<input type="text" aria-invalid="false" name="Subject" value="" class="" placeholder="Objet" data-aid="subjectField">
-						<textarea name="Message" placeholder="Message" data-aid="messageField" id="comp-ifqyiqxmfieldMessage"></textarea>
-					</div>
-				</div>
-				<button type="submit">Envoyer</button>
-			</form>
+					<input type="submit" value ="Envoyer"/>
+				</form>
+			</div>
 		</section>
 	</main>
 
diff --git a/style/main.css b/style/main.css
index 5de42ad..6dabab7 100644
--- a/style/main.css
+++ b/style/main.css
@@ -2,13 +2,19 @@ html {
 	font-family: roboto, sans-serif;
 	color: white;
 }
+body {
+	margin: 0;
+}
 
 #entete {
 	display: flex;
 	justify-content: center;
 }
-
-#entete, #accueil > div:last-child > div {
+#entete svg {
+	stroke: #000000;
+	fill: #000000;
+}
+#accueil > div:last-child > div {
 	margin-left: auto;
 	margin-right: auto;
 	background-color: rgba(0,0,0,0.5);
@@ -18,6 +24,7 @@ html {
 	-moz-box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
 	box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
 	margin-bottom: 25px;
+	width: 90%;
 }
 h1,h2,h3,h4,nav {
 	font-family: roboto, sans-serif;
@@ -25,6 +32,27 @@ h1,h2,h3,h4,nav {
 h1 {
 	margin:0;
 }
+h2 {
+	font-size: 2em;
+	font-weight: 300;
+	margin: 0 0 1em;
+	letter-spacing: -0.025em;
+	text-align: center;
+	display: inline-block;
+	width: 100%;
+}
+h2::after {
+	display: block;
+	content: '';
+	width: 65%;
+	height: 2px;
+	margin: 0.6em auto;
+	border-radius: 2px;
+    background-image: -moz-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent);
+    background-image: -webkit-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent);
+    background-image: -ms-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent);
+    background-image: linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent);
+}
 #logo {
 	width: 235px;
 }
@@ -35,6 +63,15 @@ h1 {
 	text-align: center;
 	padding: 0 10px;
 }
+#titre h1{
+	font-size: 68px;
+	line-height: 81px;
+}
+#titre span{
+	font-size: 19px;
+	letter-spacing: 0.19em;
+	line-height: 25px;
+}
 
 .icone {
 	width: 34%;
@@ -54,12 +91,12 @@ svg {
 	stroke-width: 0;
 }
 
-main img {
-	filter: invert(100%);
+main {
+	overflow: hidden;
 }
 
-h2 {
-	text-align: center;
+main img {
+	filter: invert(100%);
 }
 
 ul, ol {
@@ -102,42 +139,46 @@ ol li a {
 }
 
 nav {
-	margin: -8px -8px 0;
+	margin: -8px 0 0;
 	position: sticky;
 	top: 0;
 	background-color: #2f2e2e;
 	z-index: 1;
 }
 
-section > *:not(.background-image), nav div {
-	max-width: 1100px;
+section, nav div {
+	max-width: 1190px;
+	margin: auto;
+}
+section#accueil {
+	min-height: 100vh;
 }
 section {
 	align-items: center;
-	padding-top: 60px;
-	margin-top: -20px;
-	min-height: 100vh;
 	justify-content: center;
 	display: flex;
 	flex-direction: column;
 	position: relative;
+	font-size: 1.1rem;
 }
 
 nav div {
-	margin: auto;
 	display: flex;
 	justify-content: space-between;
 	padding: 8px;
-	max-width: 1100px;
 }
 
 #qui, #contact {
-	padding-left: 30px;
-	padding-right: 30px;
+	padding: 70px 30px;
+}
+
+#qui p {
+	max-width: 720px;
+	margin: 1em auto;
 }
 
 #accueil {
-	padding-top: 75px;
+	padding-top: 50px;
 	display: flex;
 	flex-direction: column;
 }
@@ -149,16 +190,27 @@ nav div {
     justify-content: center;
 }
 
- #contact > form > div {
+ #contact > div > form > div {
  	display: flex;
 	justify-content: space-around;
-	padding: 0 20%;
  }
 
- form {
+ #contact .section, #qui .section {
  	width: 100%;
  }
 
+ #contact .section, #qui .section {
+ 	background-color: rgba(0,0,0,0.5);
+ 	padding: 30px 0;
+	margin: -30px 0;
+	width: 80%;
+ }
+
+ #contact .section form {
+ 	padding: 0 5%;
+	width: 90%;
+ }
+
  #input {
  	display: flex;
 	flex-direction: column;
@@ -169,12 +221,13 @@ nav div {
     width: 40%;
 }
 
-form button {
-	margin-left: calc(80% - 97px);
+form button, form input[type="submit"] {
+	margin-left: calc(98% - 97px);
 	background-color: #2f2e2e;
 	color: white;
 	border: 0;
 	padding: 4px 10px;
+	cursor:pointer;
 }
 
 #accueil .background-image {
@@ -191,8 +244,8 @@ form button {
 
 .background-image {
     position: absolute;
-    top: 40px;
-    width: calc(100% + 16px);
+    top: 0px;
+    width: 100vw;
     object-position: 50% 100%;
     background-size: cover;
     background-position: center bottom;
@@ -201,5 +254,4 @@ form button {
     transform: matrix(1, 0, 0, 1, 0, 0);
     margin: 0px;
     z-index: -1;
-    left: -8px;
 }
\ No newline at end of file
