diff --git a/index.html b/index.html
index 0e6bd02..d9e90b7 100644
--- a/index.html
+++ b/index.html
@@ -1,159 +1,144 @@
+<!DOCTYPE HTML>
 <html>
-  <head>
-    
-<meta charset="UTF-8">
+<head>
+  <meta charset="UTF-8">
 
-    <title>perdu.html</title>
-    <style>
-    
-      #searchResultInfos {
-        background-color: #BBBBBB;
+  <title>GP(EN)S</title>
+  <link rel="stylesheet" href="resources/styles.css">
+</head>
+<body>
+
+  <script type="text/javascript" src="./svg-pan-zoom.min.js"></script>
+  <script type="text/javascript" src="./tinycolor-min.js"></script>
+
+  <script type="text/javascript">
+
+  function httpGetAsync(theUrl, callback)
+  {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function() {
+      if (xmlHttp.readyState == 4)
+      callback(xmlHttp.responseText, xmlHttp.status);
+    }
+    xmlHttp.open("GET", theUrl, true);
+    xmlHttp.send(null);
+  }
+
+  function putWaitNetworkScreen()
+  {
+    outputDiv.innerHTML = "Récupération des informations auprès du serveur...";
+  }
+
+  function salleInfosToHtml(salle) {
+    titres = "<h2>"+salle.nom+"</h2>"+((salle.aliaz.length!=0)?(" ou <h2>"+salle.aliaz.join("</h2> ou <h2>")+"</h2>"):"");
+    locataires = salle.locataires.join(", ");
+    return titres + ((salle.description!=null)?("\n<br/>\n" + salle.description):"") + ((salle.locataires.length!=0)?("\n<br/>\n<b>Locataires</b>: " + locataires):"");
+  }
+
+  function initSvgSupport() {
+
+    var plan = document.getElementById('plan');
+
+    svgPanZoom(plan, {zoomEnabled: true, controlIconsEnabled: true});
+
+    var salles = plan.contentDocument.getElementsByClassName('svg-salle');
+    var outputDiv = document.getElementById('selectedSalleInfos');
+
+    console.log(salles.length);
+
+    function selectSalle(e) {
+      if(document.lastSelectedSalle != null) {
+        document.lastSelectedSalle.style.fill = document.lastSelectedSalleFColor;
+        document.lastSelectedSalle.style.fill_opacity = document.lastSelectedSalleFOpacity;
       }
-	  
-	  #selectedSalleInfos {
-        background-color: #BBBBBB;
-        line-height: 150%;
+
+      document.lastSelectedSalle = e.target;
+      window.clearTimeout(document.wnsTimeout);
+      document.wnsTimeout = window.setTimeout(putWaitNetworkScreen, 400);
+
+      httpGetAsync("https://perso.ens-lyon.fr/samy.avrillon/gpens/api/salles.php?salle="+e.target.id.substring("path-salle-".length),function (s,errcode){
+        window.clearTimeout(document.wnsTimeout);
+        try{
+          if(s=="404"){
+            outputDiv.innerHTML = "Aucune information disponible pour cette salle. Si vous en avez, indiquez-les à l'adresse <a href=mailto:samy.avrillon@ens-lyon.fr>samy.avrillon@ens-lyon.fr</a> en indiquant l'identifiant de la salle : "+document.lastSelectedSalle.id.substring("path-salle-".length);
+            return;
+          }
+          ss = JSON.parse(s)
+          if(document.lastSelectedSalle.id==("path-salle-"+ss["id"])){
+            if(errcode==200){
+              outputDiv.innerHTML = salleInfosToHtml(ss);
+            }else
+            outputDiv.innerHTML = "Erreur lors de l'appel à l'interface php: ERREUR "+errcode;
+          }
+        } catch(err){console.error("Les données récupéréés de cette salle ne sont pas valides.");console.error(err)}
       }
-	  
-	  #selectedSalleInfos h2 {
-		display: inline;
-	  }
-	  
-    </style>
-  </head>
-  <body>
-  
-	<script type="text/javascript" src="./svg-pan-zoom.min.js"></script>
-	<script type="text/javascript" src="./tinycolor-min.js"></script>
-	
-	<script type="text/javascript">
-		
-		function httpGetAsync(theUrl, callback)
-		{
-			var xmlHttp = new XMLHttpRequest();
-			xmlHttp.onreadystatechange = function() { 
-				if (xmlHttp.readyState == 4)
-					callback(xmlHttp.responseText, xmlHttp.status);
-			}
-			xmlHttp.open("GET", theUrl, true);
-			xmlHttp.send(null);
-		}
-		
-		function putWaitNetworkScreen()
-		{
-			outputDiv.innerHTML = "Récupération des informations auprès du serveur...";
-		}
-		
-		function salleInfosToHtml(salle) {
-			titres = "<h2>"+salle.nom+"</h2>"+((salle.aliaz.length!=0)?(" ou <h2>"+salle.aliaz.join("</h2> ou <h2>")+"</h2>"):"");
-			locataires = salle.locataires.join(", ");
-			return titres + ((salle.description!=null)?("\n<br/>\n" + salle.description):"") + ((salle.locataires.length!=0)?("\n<br/>\n<b>Locataires</b>: " + locataires):"");
-		}
-		
-		function initSvgSupport() {
-			
-			var plan = document.getElementById('plan');
-			
-			svgPanZoom(plan, {zoomEnabled: true, controlIconsEnabled: true});
-			
-			var salles = plan.contentDocument.getElementsByClassName('svg-salle');
-			var outputDiv = document.getElementById('selectedSalleInfos');
-			
-			console.log(salles.length);
-			
-			function selectSalle(e) {
-				if(document.lastSelectedSalle != null) {
-					document.lastSelectedSalle.style.fill = document.lastSelectedSalleFColor;
-					document.lastSelectedSalle.style.fill_opacity = document.lastSelectedSalleFOpacity;
-				}
-				
-				document.lastSelectedSalle = e.target;
-				window.clearTimeout(document.wnsTimeout);
-				document.wnsTimeout = window.setTimeout(putWaitNetworkScreen, 400);
-				
-				httpGetAsync("https://perso.ens-lyon.fr/samy.avrillon/gpens/api/salles.php?salle="+e.target.id.substring("path-salle-".length),function (s,errcode){
-				window.clearTimeout(document.wnsTimeout);
-				try{
-				if(s=="404"){
-					outputDiv.innerHTML = "Aucune information disponible pour cette salle. Si vous en avez, indiquez-les à l'adresse <a href=mailto:samy.avrillon@ens-lyon.fr>samy.avrillon@ens-lyon.fr</a> en indiquant l'identifiant de la salle : "+document.lastSelectedSalle.id.substring("path-salle-".length);
-					return;
-				}
-				ss = JSON.parse(s)
-				if(document.lastSelectedSalle.id==("path-salle-"+ss["id"])){
-					if(errcode==200){
-						outputDiv.innerHTML = salleInfosToHtml(ss);
-					}else
-						outputDiv.innerHTML = "Erreur lors de l'appel à l'interface php: ERREUR "+errcode;
-				}
-				} catch(err){console.error("Les données récupéréés de cette salle ne sont pas valides.");console.error(err)}
-				}
-				);
-				
-				document.lastSelectedSalleFColor = e.target.style.fill
-				document.lastSelectedSalleFOpacity = e.target.style.fill_opacity
-				
-				
-				e.target.style.fill = tinycolor(e.target.style.fill).saturate(100).brighten(50).toHexString();
-			}
-			
-			for (var i = 0; i < salles.length; i++) {
-				salles[i].addEventListener('click', selectSalle);
-			}
-			
-		}
-	</script>
-  
-  <form>
-    <label for="selector_site_M"> Site </label>
-    <input type="radio" name="site" value="M" id=selector_site_M" checked="true">Monod</input>
-    <input type="radio" name="site" value="D" id=selector_site_D">Descartes</input>
-    |
-    <label for="selector_batiment">Bâtiment : </label>
-    <select name="batiment" id="selector_batiment">
-      <option value="GN4">MGN1</option>
-    </select>
-    |
-    <label for="selector_etage">Étage : </label>
-    <select name="etage" id="selector_etage">
-      <option value="-1">Sous-sol</option>
-      <option value="0">Rez-de chaussée</option>
-      <option value="1">Premier étage</option>
-      <option value="1+">Premier étage plus</option>
-      <option value="2">Deuxième étage</option>
-      <option value="3">Troisième étage</option>
-      <option value="4">Quatrième étage</option>
-    </select>
-    |
-    <input type="button" value="Vue d'ensemble" id="overviewButton" onclick="overviewButton"/>
-    
-    </form>
-    
-    <br/>
-    
-    <object type="image/svg+xml"
-      data="https://perso.ens-lyon.fr/samy.avrillon/gpens/maps/M-MGN1-3.svg"
-      id="plan"
-      onload="initSvgSupport()">
-      
-      Votre navigateur ne sait pas charger les objets HTML.... Je vais voir ce que je peux faire.
-      
-    </object>
-   
-    <div id="selectedSalleInfos">
-      Il faut que vous sélectionnez une salle.
-    </div>
-   
-	<hr/>
-   
-    <form>
-      <label for="salleNameSearch">Rechercher par nom de salle : </label> <input name="salleNameSearch" type="text" id="salleNameSearch"/> <input name=salleNameButton" type=button value="Rechercher" onclick="salleNameSearch" />
-      <br/>
-	  <label for="salleLocSearch">Rechercher par locataire : </label> <input name="salleLocSearch" type="text" id="salleLocSearch"/> <input name=salleLocButton" type=button value="Rechercher" onclick="salleLocSearch" />
-    </form>
-   
-   <div id="searchResultInfos">
-		Il faut que vous fassiez une recherche.
-   </div>
-    
-  </body>
+    );
+
+    document.lastSelectedSalleFColor = e.target.style.fill
+    document.lastSelectedSalleFOpacity = e.target.style.fill_opacity
+
+
+    e.target.style.fill = tinycolor(e.target.style.fill).saturate(100).brighten(50).toHexString();
+  }
+
+  for (var i = 0; i < salles.length; i++) {
+    salles[i].addEventListener('click', selectSalle);
+  }
+
+}
+</script>
+
+<form>
+  <label for="selector_site_M"> Site </label>
+  <input type="radio" name="site" value="M" id="selector_site_M" checked="true">Monod</input>
+  <input type="radio" name="site" value="D" id="selector_site_D">Descartes</input>
+  |
+  <label for="selector_batiment">Bâtiment : </label>
+  <select name="batiment" id="selector_batiment">
+    <option value="GN4">MGN1</option>
+  </select>
+  |
+  <label for="selector_etage">Étage : </label>
+  <select name="etage" id="selector_etage">
+    <option value="-1">Sous-sol</option>
+    <option value="0">Rez-de chaussée</option>
+    <option value="1">Premier étage</option>
+    <option value="1+">Premier étage plus</option>
+    <option value="2">Deuxième étage</option>
+    <option value="3">Troisième étage</option>
+    <option value="4">Quatrième étage</option>
+  </select>
+  |
+  <input type="button" value="Vue d'ensemble" id="overviewButton" onclick="overviewButton"/>
+
+</form>
+
+<br/>
+
+<object
+type="image/svg+xml"
+data="https://perso.ens-lyon.fr/samy.avrillon/gpens/maps/M-MGN1-3.svg"
+id="plan"
+onload="initSvgSupport()"
+>
+Votre navigateur ne sait pas charger les objets HTML.... Je vais voir ce que je peux faire.
+</object>
+
+<div id="selectedSalleInfos">
+  Il faut que vous sélectionnez une salle.
+</div>
+
+<hr/>
+
+<form>
+  <label for="salleNameSearch">Rechercher par nom de salle : </label> <input name="salleNameSearch" type="text" id="salleNameSearch"/> <input name="salleNameButton" type=button value="Rechercher" onclick="salleNameSearch" />
+  <br/>
+  <label for="salleLocSearch">Rechercher par locataire : </label> <input name="salleLocSearch" type="text" id="salleLocSearch"/> <input name="salleLocButton" type=button value="Rechercher" onclick="salleLocSearch" />
+</form>
+
+<div id="searchResultInfos">
+  Il faut que vous fassiez une recherche.
+</div>
+
+</body>
 </html>
diff --git a/resources/styles.css b/resources/styles.css
new file mode 100644
index 0000000..6bf2321
--- /dev/null
+++ b/resources/styles.css
@@ -0,0 +1,12 @@
+#searchResultInfos {
+  background-color: #BBBBBB;
+}
+
+#selectedSalleInfos {
+  background-color: #BBBBBB;
+  line-height: 150%;
+}
+
+#selectedSalleInfos h2 {
+  display: inline;
+}
