diff --git a/assets/css/page/map.css b/assets/css/page/map.css
index 2edec84..9ce9c50 100644
--- a/assets/css/page/map.css
+++ b/assets/css/page/map.css
@@ -1,93 +1,19 @@
-#map_section {
-	margin: auto;
-	margin-top: 30px;
-	border: 2px solid white;
-	width: 80%;
+* {
+    text-align: center;
 }
 
-
-
-
-/* Map loading */
-#loading-screen {
-	position: absolute;
-	z-index: 2;
-	/*top: 0; */
-	left: 0;
-	width: 100%;
-	height: 50%;
-	background-color: #000000;
-	opacity: 1;
- 	transition: 1s opacity;
-}
-
-#loading-screen.fade-out {
-    opacity: 0;
-}
-
-.loader {
+iframe {
+    margin-top: 50px;
+    margin-left: auto;
+    margin-right: auto;
     display: block;
-    position: relative;
-    left: 50%;
-    top: 50%;
-    width: 150px;
-    height: 150px;
-    margin: -75px 0 0 -75px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #9370DB;
-    -webkit-animation: spin 2s linear infinite;
-    animation: spin 2s linear infinite;
-}
-.loader:before {
-    content: "";
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    right: 5px;
-    bottom: 5px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #BA55D3;
-    -webkit-animation: spin 3s linear infinite;
-    animation: spin 3s linear infinite;
-}
-.loader:after {
-    content: "";
-    position: absolute;
-    top: 15px;
-    left: 15px;
-    right: 15px;
-    bottom: 15px;
-    border-radius: 50%;
-    border: 3px solid transparent;
-    border-top-color: #FF00FF;
-    -webkit-animation: spin 1.5s linear infinite;
-    animation: spin 1.5s linear infinite;
+    width: 70vw;
+    aspect-ratio: 1220/710;
+    border: 0;
 }
 
-@-webkit-keyframes spin {
-    0%   {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes spin {
-    0%   {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
+@media (max-width: 700px) {
+    iframe {
+        width: 100vw;
     }
 }
\ No newline at end of file
diff --git a/assets/map/iframe_map.php b/assets/map/iframe_map.php
new file mode 100644
index 0000000..298c499
--- /dev/null
+++ b/assets/map/iframe_map.php
@@ -0,0 +1,149 @@
+<?php
+//ce fichier doit être inclut dans une page html avec un iframe de telle sorte à ce que tout les liens dans les js soient OK.
+require_once 'ajax.php';
+?>
+
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"
+        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
+
+<style>
+.hidden {
+    display: none;
+}
+
+/* Map loading */
+#loading-screen {
+    position: absolute;
+    z-index: 2;
+    /*top: 0; */
+    left: 0;
+    width: 100vw;
+    height: 50vh;
+    background-color: #000000;
+    opacity: 1;
+    transition: 1s opacity;
+}
+
+#loading-screen.fade-out {
+    opacity: 0;
+}
+
+.loader {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 40vh;
+    height: 40vh;
+    margin: -20vh 0 0 -20vh;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #9370DB;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+}
+.loader:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #BA55D3;
+    -webkit-animation: spin 3s linear infinite;
+    animation: spin 3s linear infinite;
+}
+.loader:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: #FF00FF;
+    -webkit-animation: spin 1.5s linear infinite;
+    animation: spin 1.5s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    0%  {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0%   {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+#map_section {
+    position: absolute;
+    margin: auto;
+    margin-top: 0;
+    left: 0;
+    top: 0;
+    width: 100vw;
+}
+</style>
+
+<script>
+function enable3DMap() {
+    var map3d = document.querySelector('#maps #map3d');
+    var map = document.querySelector('#maps #map');
+
+    map3d.classList.add("hidden");
+    map.classList.add("hidden");
+    map3d.classList.remove("hidden");
+}
+
+function enable2DMap() {
+    var map3d = document.querySelector('#maps #map3d');
+    var map = document.querySelector('#maps #map');
+    map.classList.add("hidden");
+    map3d.classList.add("hidden");
+    map.classList.remove("hidden");
+}
+</script>
+
+    <section id="map_section">
+        <div id="maps_button">
+            <button onclick="enable3DMap()" class="main-button">Map 3D</button>
+            <button onclick="enable2DMap()" class="main-button">Map 2D</button>
+        </div>
+
+        <section id="loading-screen">
+            <div class="loader"></div>
+        </section>
+        
+        <div id="maps" class="">
+            <script src="script_map3d.js" type="module"></script>
+
+            <div id="map" class="hidden">
+                <?php echo file_get_contents("map2d.svg"); ?>
+                <canvas id="canvasID"></canvas>
+            </div>
+        </div>
+
+        <script type="text/javascript" src="script_map2d.js"></script>
+    </section>
diff --git a/assets/map/script_map2d.js b/assets/map/script_map2d.js
index 331803e..4544ba5 100644
--- a/assets/map/script_map2d.js
+++ b/assets/map/script_map2d.js
@@ -2,7 +2,7 @@
 let hoverColor = "#e9b82f";
 let normalColor = "#efbd95";
 
-var rep2 = "assets/map/";
+var rep2 = "";
 
 function get_name(id){
     return id.replace("map-", "");
diff --git a/assets/map/script_map3d.js b/assets/map/script_map3d.js
index be4da6f..e8ba83a 100644
--- a/assets/map/script_map3d.js
+++ b/assets/map/script_map3d.js
@@ -3,7 +3,7 @@
 *   Code : Ronan Bonnet
 *
 */
-var rep = "assets/map/";
+var rep = "";
 
 import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js';
 
diff --git a/map.php b/map.php
index 647391f..eb04383 100755
--- a/map.php
+++ b/map.php
@@ -1,70 +1,19 @@
 <?php
 ob_start(); // Start reading html
-require_once 'assets/map/ajax.php';
-header('Location: construction.php');
+//header('Location: construction.php');
 ?>
-
-<script src="https://code.jquery.com/jquery-3.3.1.min.js"
-        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
-        crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
-
-<style>
-.hidden {
-    display: none;
-}
-</style>
-
-<script>
-function enable3DMap() {
-    var map3d = document.querySelector('#maps #map3d');
-    var map = document.querySelector('#maps #map');
-
-    map3d.classList.add("hidden");
-    map.classList.add("hidden");
-    map3d.classList.remove("hidden");
-}
-
-function enable2DMap() {
-    var map3d = document.querySelector('#maps #map3d');
-    var map = document.querySelector('#maps #map');
-    map.classList.add("hidden");
-    map3d.classList.add("hidden");
-    map.classList.remove("hidden");
-}
-</script>
-
-
 <main>
-    <div id="boxjaune">
-        <div id="circle_l" class="circle"></div>
-        <div id="circle_r" class="circle"></div>
-        <div id="title_in_box">Carte de l'insa</div>
-        <div id="circle_l" class="circle"></div>
-        <div id="circle_r" class="circle"></div>
+    <div class="box-jaune">
+        <span class="corners corners-top"></span>
+        <span class="corners corners-bottom"></span>
+
+        <div class="title">Carte de l'INSA</div>
+
+        <span class="circles circles-top"></span>
+        <span class="circles circles-bottom"></span>
     </div>
 
-    <section id="map_section">
-        <div id="maps_button">
-            <button onclick="enable3DMap()" class="main-button">Map 3D</button>
-            <button onclick="enable2DMap()" class="main-button">Map 2D</button>
-        </div>
-
-        <section id="loading-screen">
-            <div class="loader"></div>
-        </section>
-        
-        <div id="maps" class="">
-            <script src="assets/map/script_map3d.js" type="module"></script>
-
-            <div id="map" class="hidden">
-                <?php echo file_get_contents("assets/map/map2d.svg"); ?>
-                <canvas id="canvasID"></canvas>
-            </div>
-        </div>
-
-        <script type="text/javascript" src="assets/map/script_map2d.js"></script>
-    </section>
+    <iframe src="assets/map/iframe_map.php"></iframe>
     
     <p>
         Une petite note sur le numéro des salles : sur ton emploi du temps, le bâtiment est marqué en premier, et
@@ -77,7 +26,7 @@ function enable2DMap() {
     </p>
 
     <p id="hint">
-        Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591">Open Street
+        Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591" class="link">Open Street
     Map</a>.
     </p>
 </main>