diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..8ed0f319929f403a0f77d564a9a3ca98c6cb411c
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,426 @@
+
+/* A faire : adapter pour Safari et smartphone
+
+
+bleu-vert: #003948
+
+
+/*Général*/
+	body, div, h1, h2, h3, a, bouton, p {
+		font-family:Verdana, Arial, "Arial Black", "Times New Roman", serif;
+		font-size:1em;
+		line-height:1.24em;
+		color:#003948;
+		margin:0;
+		padding:0;
+	}
+
+	body {background-color:white;}
+
+	em {font-style:normal;}
+	bouton {cursor:pointer;}
+	a {text-decoration:none;}
+	.color0 p a, .color1 p a, #tutoriel a, .color2 b  {text-decoration:underline;}
+
+
+
+	@media only screen and (max-device-width:980px) {
+	body {font-size:120%; width:100%;}
+	}
+
+/* ----------------------------------------------------- */
+
+/* Bande haut --------------------*/
+	#stripeTop {
+	width:100%;
+	height:2em;
+	background-color: #497ED5;
+	}
+
+
+/* Chapeau ------------------------*/
+	header {
+	background:url(Illu1.jpg);
+	background-size:93%;
+	background-repeat:no-repeat;
+	background-position: bottom center;
+	margin:1em auto 0em;
+	height: 550px;
+/* 	margin-bottom:-20px; */
+	width:80%;
+	} @media only screen and (min-width:1000px) {header {width: 800px;}}
+
+	header h1 {
+	text-align:left;
+	float:left;
+	font-size:2em;
+	color:#003948;
+	line-height:1.1em;
+	margin-bottom:.1em;
+	}
+
+	header bouton {
+	float:right;
+	margin:.2em 0 0 0;
+	background:url(Illu0.png);
+	background-size:100%;
+	background-repeat:no-repeat;
+	padding:1em 1em 1.3em 3em;
+	}
+
+	header bouton:hover {
+	opacity:.9;
+	}
+
+	header bouton p {
+	font-size:1.4em;
+	line-height:.8em;
+	float:right;
+	text-align:center;
+	margin-right:.2em;
+	font-weight:bold;
+	color:#fff;
+	}
+
+	header bouton p span {
+	font-size:.8em;
+	}
+
+	header h2{
+	clear:both;
+	font-size:1em;
+	color:#497ED5;
+	font-weight:normal;
+	}
+
+	@media only screen and (max-device-width:980px) {
+		header {
+		width:95%;
+		margin-left: auto;
+		margin-right: auto;
+		height:400px;
+		}
+
+		header h1 {
+		float:none;
+		font-size: 1.8em;
+		}
+
+		header bouton {
+		display:none;
+		}
+
+		header h2 {
+		margin-top:.6em;
+		}
+
+		#header-img {
+		width:80%
+		}
+	}
+
+	#textIntro, #Act {
+	background-color:#497ED5;
+	padding: 2em;
+	}
+
+	#textIntro p, #textIntro b {
+	margin:0 auto;
+	line-height : 1.4em;
+	width:80%;
+	font-size:1em;
+	color:white;
+	white-space:normal;
+	} @media only screen and (min-width:1000px) {#textIntro p {width: 800px;}}
+
+	#textIntro h1, #Act h1 {
+	color:white;
+	line-height : 1em;
+	text-align:center;
+	font-size:1.4em;
+	}
+
+
+
+/* -------------------------------------------------------------		 */
+
+/*Main ---------------------------------------------------------       */
+	#main, #main2 {
+	margin: 2em auto 3em;
+	width:100%;
+	clear:both;
+	}@media only screen and (min-width:1000px) {#main {width: 1000px;}#main2 {width: 1000px;}}
+
+	 @media only screen and (max-device-width:980px) {
+		#main, #main2 {width:95%; margin:.2em auto;}}
+
+	#main p, #main2 p {
+	text-align:justify;
+	font-size: .9em;
+	}
+
+	#main ul {
+	font-size: .9em;
+	}
+
+	/* Intro ---------------------*/
+		table {
+		border-collapse:collapse;
+		margin:0 auto;
+		}
+
+		td {
+		width : 20em;
+		padding : 0 2em;
+		vertical-align:top;
+		text-align:center;
+		}
+
+		tr td:first-of-type + td {
+		border-left: 1px solid #e0a63a;
+		border-right: 1px solid #e0a63a;
+		}
+
+		#intros bouton, #main2 bouton {
+		font-size:.9em;
+		padding:.5em 1.5em;
+		color: #fff;
+		}
+
+
+		/*Titres*/
+			#main .titres td {
+			vertical-align:bottom;
+			padding-bottom:1em;
+			transition: border-bottom 0.6s, top 0.3s;
+			}
+
+			#main .titres td:hover {
+			position:relative;
+			top:-5px;
+			cursor:pointer;
+			transition: border-bottom 0.6s, top 0.3s, opacity 0.3s;
+			}
+
+			.titres h1 {font-size: 1.3em;text-align:center;}
+			.titres img {width:95%;}
+
+		@media only screen and (max-device-width:980px) {
+			#intros {display:none;}
+			#main .titres td { width:33%;  padding:0; vertical-align:top;}
+			#main .titres h1 {font-size:.9em; font-weight:normal; padding:.2em; vertical-align:top;}
+		}
+
+			.titreOn {opacity : 1;border-bottom: 1px solid #fff;}
+			.titreOff {opacity: 0.7;border-bottom: 1px solid #e0a63a;}
+			.titreOff:hover {opacity:1;}
+
+	/* Visibles */
+		.visible, .hidden {overflow: hidden;}
+		.visible {visibility: visible; opacity: 1; transition: visibility 0s 0.2s, opacity 0.2s 0.2s linear;}
+		.pageContent .visible {transition: visibility 0s, opacity 0.2s linear;}
+		.visible td p, .visible .pageContent {transition: margin-top 0s 0.2s;}
+		.pageContent .visible p, .visble .pageSection {transition: margin-top 0s;}
+
+		.hidden {visibility: hidden;opacity: 0;transition: visibility 0s 0.2s, opacity 0.2s linear;}
+		.hidden td p, .hidden .pageContent, .pageContent .hidden p, .hidden .pageSection {margin-top: -10000em;transition: margin-top 0s 0.2s;}
+
+	/*Couleurs*/
+		h1.color0, .color0 h1, .color0 h2, .color0 bouton, .color0 b, .color0 em {color: #497ED5;}
+		#intros .color0 bouton, .color0.pageContent h1, #main2 table .color0 bouton {background-color:#497ED5;}
+		#intros .color0 bouton:hover, #main2 table .color0 bouton:hover {background-color:#4170bd;}
+
+		h1.color1, .color1 h1, .color1 h2, .color1 bouton, .color b, .color1 em{color: #d99923;}
+		#intros .color1 bouton, .color1.pageContent h1, #main2 table .color1 bouton {background-color:#d99923;}
+		#intros .color1 bouton:hover, #main2 table .color1 bouton:hover {background-color:#bf871f;}
+
+		h1.color2, .color2 h1, .color2 h2, .color2 bouton, .color2 b, .color2 em{color: #D45B35;}
+		#intros .color2 bouton, .color2.pageContent h1, #main2 table .color2 bouton {background-color:#D45B35;}
+		#intros .color2 bouton:hover, #main2 table .color2 bouton:hover {background-color:#ba502f;}
+
+	/*Pages*/
+
+		.pageContent {
+		width:60%;
+		margin:2em auto 0;
+		} @media only screen and (min-width:1000px) {.pageContent {width:600px;}}
+
+		.pageContent h1 {
+		padding:.5em;
+		color:#fff;
+		font-size:1.3em;
+		font-weight:bold;
+		text-align:center;
+		}
+
+		.pageContent p {
+		padding:0 3em;
+		white-space:pre-line;
+		}
+
+		.pageContent bouton {
+		display:block;
+		font-size:.9em;
+		text-align:center;
+		}
+
+		.pageSection {
+		margin: 2em 0;
+		padding:1em 2em;
+		background-color:#eee;
+		}
+
+		.pageSection h2 {
+		font-size: 1.1em;
+		text-align:justify;
+		}
+
+		.pageSection p {
+		padding:0 1em;
+		}
+
+		.pageSection ul {
+		padding-right:1em;
+		}
+
+		.pageSection bouton{
+		text-align:left;
+		margin:0;
+		}
+
+		.pageSection p bouton {
+		font-size:1em;
+		display:inline;
+		}
+
+		@media only screen and (max-device-width:980px) {
+		.pageContent {width:100%;}
+		.pageSection {margin:1em 0; padding: 1em .4em;}
+		.pageSection p {padding: 0 .4em;}
+		#main h2 {text-align:left; font-size:1em;}
+		#imgBan img {display:none;}
+		}
+
+			/*Table loi*/
+				#tLoi td, div.tL{border:solid 1px #bbb;padding:1em 1em;margin:0; white-space:pre-line;}
+				#tLoi td {line-height : 1.2em;cursor:pointer; text-align:left;font-size:.8em;}
+				div.tL {text-align:justify; font-size:.85em; padding: 2em;}
+				.tL a {text-decoration:underline;}
+				#main div.tL ul {font-size:1em; padding:0 2em;}
+				#tLoi td:hover, div.tL {background:#fff;}
+
+				@media only screen and (max-device-width:980px) {
+				#tLoi td {display:block; white-space:pre-line; font-size:.7em; line-height : 1em;}
+				div.tL {font-size:.8em; padding: .4em;}
+				}
+
+
+		/* Tuto */
+
+		/*#fondTuto {
+		background-color:#ccc;
+		z-index:10;
+		height:100%;
+		opacity : .5;
+		width:100%;
+		position:fixed;
+		}
+
+		.tuto {
+		position:relative;
+		z-index:20;
+		background-color:white;
+		padding: 2em 4em;
+		margin:2em auto 2em;
+		border-radius : 2em;
+		-moz-box-shadow: 0px 0px 20px 10px #bbb;
+		-webkit-box-shadow: 0px 0px 20px 10px #bbb;
+		-o-box-shadow: 0px 0px 20px 10px #bbb;
+		box-shadow: 0px 0px 20px 10px #bbb;
+		filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbb, Direction=NaN, Strength=20);
+		}*/
+
+/*Main2*/
+
+	@media only screen and (max-device-width:980px) {
+		#main2 .titres td {display:block; width:90%; padding:0; margin:0 auto; border:none;}
+		#main2 td img {width:70%; display:block; margin:0 auto;}
+		#main2 bouton {display:block; margin:0 2em;}
+		}
+
+/* Footer */
+
+	footer {
+	margin-top:1em;
+	background-color: #497ED5;
+	padding:1.5em 0 3em;
+	}
+
+	footer  p {
+	color:#fff;
+	margin: 0 auto;
+	} @media only screen and (min-width:1000px) {footer p {width: 1000px;}}
+
+	footer img {width:8em; border:.7em solid #fff; margin:0em 2em; float:left;}
+
+	@media only screen and (max-device-width:980px) {footer img{float:none; display:block; margin:0 auto 1em;} footer p {padding: 0 1em;}}
+
+
+		/*  Tutoriel ------------------------------------------------------------------	 */
+
+
+		#tutoriel {
+		margin: 0 auto;
+		padding: 2em 0;
+		width:60%;
+		}@media only screen and (min-width:1000px) {#tutoriel {width: 600px;}}
+
+	 @media only screen and (max-device-width:980px) {
+		#tutoriel {width:95%; margin:.2em auto;}}
+
+		#tutoriel h1 {
+		padding:.5em;
+		color:#fff;
+		font-size:1.3em;
+		font-weight:bold;
+		text-align:center;
+		background-color:#D45B35;
+		}
+
+		#tutoriel h2, #tutoriel h3 {
+		font-size:1.2em; display:inline;
+		}
+
+		#tutoriel h3 {
+		font-weight:normal;
+		}
+
+		#tutoriel div {
+		margin: 2em auto;
+		padding:1em 3em;
+		background-color:#eee;
+		font-size:.9em;
+		text-align:justify;
+		white-space:pre-line;
+		}
+
+		#tutoriel ul, ol {
+		white-space: normal;
+		line-height : 1.4em;
+		}
+
+		#tutoriel b {line-height : 2em;}
+
+		#tutoriel div img {margin:0 auto; border:1px solid black; display:block; max-width:100%;}
+
+		#tutoriel em, .retourTuto, #tutoriel h2, #tutoriel h3 {color:#D45B35;}
+
+		#tutoriel .retourTuto, #tutoriel h2 {margin-left:-1em; text-decoration:none;}
+
+		#tutoriel #retourSite {margin-left:-4em;font-size:1.2em; color:#fff; text-decoration:none; font-weight:bold; background-color:#d99923; padding: .4em .8em;}
+
+			@media only screen and (max-device-width:980px) {
+				#tutoriel div {padding : .4em;}
+				#tutoriel #retourSite {margin-left:0em;}
+				#tutoriel .retourTuto, #tutoriel h2 {margin-left:0;}
+			}
\ No newline at end of file
diff --git a/index.html b/index.html
index 708a0638681bd188855856cdf373a09f8799edff..e08f0f5c03e5fc341ccc395a5e148bd0fe3fb863 100644
--- a/index.html
+++ b/index.html
@@ -6,78 +6,9 @@
 		<title>Reprenez le contrôle de vos données !</title>
 		<link rel="shortcut icon" href="img/log.png">
 		<link rel="stylesheet" href="img/main.css" type="text/css" media="screen">
+		<script src="js/main.js"></script>
 		<meta name="viewport" content="width=device-width" />
 
-		<script>
-
-					xmlhttp=new XMLHttpRequest();
-
-					xmlhttp.open("GET","compteur.php?timer=1",true); xmlhttp.send(null);
-
-						function cinq() {xmlhttp.open("GET","compteur.php?timer=2",true); xmlhttp.send(null);}
-					window.setTimeout(cinq,1000*60*3);
-
-						function quinze() {xmlhttp.open("GET","compteur.php?timer=3",true); xmlhttp.send(null);}
-					window.setTimeout(quinze,1000*60*12);
-
-
-
-			function home() //fonction pour revenir à l'accueil
-				{
-					window.scrollTo(0, document.getElementById("main").offsetTop);
-					document.getElementById("intros").className="visible"; //affiche les intros
-					for (var pi=0; pi<3; pi++) {
-					document.getElementById("page"+pi).className="hidden"; //cache toutes les pages
-					document.getElementById("t"+pi).className="titreOn";} //rend tous les titres actifs
-					//à rajouter&nbsp;: ferme tous les textes
-				}
-
-			function navig(numero) 	//fonction ouvrant ou fermant la page dont le numéro est reçu en parametre
-							//est appelée en cliquant sur les titres ou les boutons inclus dans les intros
-				{
-					if (document.getElementById("page"+numero).className=="hidden" ) //si la page demandée n'est pas encore ouverte
-						{
-								document.getElementById("intros").className="hidden"; //cache les intros de main
-								for (var pi=0; pi<3; pi++) {
-									document.getElementById("page"+pi).className="hidden"; //cache toutes les pages de main
-									document.getElementById("t"+pi).className="titreOff"; //rend tous les titres de main inactifs
-								}
-							document.getElementById("page"+numero).className="visible"; //affiche la page demandée
-							document.getElementById("t"+numero).className="titreOn"; //rend le titre de la page demandée actif
-						}
-					else //si la page demandée est déjà ouverte
-						{
-								document.getElementById("intros").className="visible"; //affiche les intros de main
-								for (var pi=0; pi<3; pi++) {
-									document.getElementById("page"+pi).className="hidden"; //cache toutes les pages de main
-									document.getElementById("t"+pi).className="titreOn";//rend tous les titres de main actifs
-								}
-						}
-				}
-
-			var idScroll; //id pour clear le timeOut du scroll
-			var distOnClosure; //point où le scroll doit remonter, à déterminer avant chaque scroll
-			function moveOnClosure () {window.scrollBy(0, -distOnClosure);} //fonction de déplaceent pour le scroll de fermeture des textes
-
-			function openOn(btn) 	//fonction affichant ou masquant du texte dans les pages
-							//appelée en cliquant sur un bouton dérouleur, reçu en parametre
-				{
-					if (btn.previousSibling.className=='hidden') //si le frère précédent le bouton est caché
-						{
-							btn.previousSibling.className='visible'; //le rend visible
-							btn.innerHTML="<br/>Fermer &#9650"; //change le texte du bouton
-						}
-					else //si le frère précédent le bouton est visible
-						{
-							distOnClosure=btn.previousSibling.offsetHeight //fixe la distance devant être scrollée
-							clearTimeout (idScroll); //clear le timeOut du précédent scroll
-							idScroll = setTimeout(moveOnClosure, 200); //scroll, avec un délai de 0.2s
-							btn.previousSibling.className='hidden'; //masque le frère
-							btn.innerHTML="<br/>Continuer &#9660;"; //change le texte du bouton
-						}
-				}
-
-		</script>
 		<!-- Base des textes déroulant
 				<div class="pageSection"><h2>
 						Titre
@@ -684,4 +615,4 @@
 			</p>
 		</footer>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..4affd8a1da1ea95fe30f642cdcd4ca86576d2a51
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,64 @@
+	xmlhttp=new XMLHttpRequest();
+					xmlhttp.open("GET","compteur.php?timer=1",true); xmlhttp.send(null);
+
+						function cinq() {xmlhttp.open("GET","compteur.php?timer=2",true); xmlhttp.send(null);}
+					window.setTimeout(cinq,1000*60*3);
+
+						function quinze() {xmlhttp.open("GET","compteur.php?timer=3",true); xmlhttp.send(null);}
+					window.setTimeout(quinze,1000*60*12);
+
+			function home() //fonction pour revenir à l'accueil
+				{
+					window.scrollTo(0, document.getElementById("main").offsetTop);
+					document.getElementById("intros").className="visible"; //affiche les intros
+					for (var pi=0; pi<3; pi++) {
+					document.getElementById("page"+pi).className="hidden"; //cache toutes les pages
+					document.getElementById("t"+pi).className="titreOn";} //rend tous les titres actifs
+					//à rajouter&nbsp;: ferme tous les textes
+				}
+
+			function navig(numero) 	//fonction ouvrant ou fermant la page dont le numéro est reçu en parametre
+							//est appelée en cliquant sur les titres ou les boutons inclus dans les intros
+				{
+					if (document.getElementById("page"+numero).className=="hidden" ) //si la page demandée n'est pas encore ouverte
+						{
+								document.getElementById("intros").className="hidden"; //cache les intros de main
+								for (var pi=0; pi<3; pi++) {
+									document.getElementById("page"+pi).className="hidden"; //cache toutes les pages de main
+									document.getElementById("t"+pi).className="titreOff"; //rend tous les titres de main inactifs
+								}
+							document.getElementById("page"+numero).className="visible"; //affiche la page demandée
+							document.getElementById("t"+numero).className="titreOn"; //rend le titre de la page demandée actif
+						}
+					else //si la page demandée est déjà ouverte
+						{
+								document.getElementById("intros").className="visible"; //affiche les intros de main
+								for (var pi=0; pi<3; pi++) {
+									document.getElementById("page"+pi).className="hidden"; //cache toutes les pages de main
+									document.getElementById("t"+pi).className="titreOn";//rend tous les titres de main actifs
+								}
+						}
+				}
+
+			var idScroll; //id pour clear le timeOut du scroll
+			var distOnClosure; //point où le scroll doit remonter, à déterminer avant chaque scroll
+			function moveOnClosure () {window.scrollBy(0, -distOnClosure);} //fonction de déplaceent pour le scroll de fermeture des textes
+
+			function openOn(btn) 	//fonction affichant ou masquant du texte dans les pages
+							//appelée en cliquant sur un bouton dérouleur, reçu en parametre
+				{
+					if (btn.previousSibling.className=='hidden') //si le frère précédent le bouton est caché
+						{
+							btn.previousSibling.className='visible'; //le rend visible
+							btn.innerHTML="<br/>Fermer &#9650"; //change le texte du bouton
+						}
+					else //si le frère précédent le bouton est visible
+						{
+							distOnClosure=btn.previousSibling.offsetHeight //fixe la distance devant être scrollée
+							clearTimeout (idScroll); //clear le timeOut du précédent scroll
+							idScroll = setTimeout(moveOnClosure, 200); //scroll, avec un délai de 0.2s
+							btn.previousSibling.className='hidden'; //masque le frère
+							btn.innerHTML="<br/>Continuer &#9660;"; //change le texte du bouton
+						}
+				}
+