diff --git a/index.html b/index.html
index e65ab4c..4a9b2c9 100644
--- a/index.html
+++ b/index.html
@@ -6,16 +6,20 @@
     <link rel="stylesheet" href="jeux/assets/style.css">
 </head>
 <body>
-<h1>Potain de chantier #3</h1>
-<h2>Jeux interactifs</h2>
-<p>
-    Découvrez les magnifiques moquettes du Cecolyon avec notre série de jeux interactifs !
-</p>
-<ul>
-    <li><a href="jeux/signal.html">Signal</a></li>
-    <li><a href="jeux/camel.html">Camel</a></li>
-    <li><a href="jeux/nature.html">Urbain Nature</a></li>
-</ul>
+<header>
+    <h1>Potain de chantier #3</h1>
+</header>
+<main>
+    <h2>Jeux interactifs</h2>
+    <p>
+        Découvrez les magnifiques moquettes du Cecolyon avec notre série de jeux interactifs !
+    </p>
+    <ul>
+        <li><a href="jeux/signal.html">Signal</a></li>
+        <li><a href="jeux/camel.html">Camel</a></li>
+        <li><a href="jeux/nature.html">Urbain Nature</a></li>
+    </ul>
+</main>
 <footer>
     <p>
         Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.
diff --git a/jeux/assets/style.css b/jeux/assets/style.css
index 5f9922e..a238116 100644
--- a/jeux/assets/style.css
+++ b/jeux/assets/style.css
@@ -1,3 +1,22 @@
+html {
+    height:100%;
+    box-sizing: border-box;
+}
+
+* {
+    box-sizing: inherit;
+}
+
+body {
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 0 20px;
+    height:100%;
+    font-family: Arial, sans-serif;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+}
+
 .hidden {
     display: none;
 }
@@ -9,3 +28,21 @@
 .success {
     color: green;
 }
+
+h2 {
+    margin-top: 0;
+}
+
+header h1 {
+    text-align: center;
+}
+
+a {
+    color: rgb(40,53,131);
+}
+
+header {
+    background-color: rgb(40,53,131);
+    color: white;
+    margin-bottom: 20px;
+}
diff --git a/jeux/camel.html b/jeux/camel.html
index 7a27323..6fc51cc 100644
--- a/jeux/camel.html
+++ b/jeux/camel.html
@@ -6,43 +6,47 @@
     <link rel="stylesheet" href="assets/style.css">
 </head>
 <body>
-<h1>Camel</h1>
-<nav><a href="..">&laquo; Retour</a></nav>
-<p>
-    Jouons donc au jeu des 7 différences avec GSE France !
-</p>
-<p class="side-by-side">
-    <img src="images/camel-2.jpg" width="548" height="619" alt="Moquette" usemap="#map">
-    <img src="images/camel.jpg" width="548" height="619" alt="Moquette" usemap="#map">
-</p>
-<map id="map" name="map">
-    <area shape="rect" coords="180,65,226,97" onclick="zone('Chocolat')">
-    <area shape="circle" coords="101,439,25" onclick="zone('Logo Citroën')">
-    <area shape="poly" coords="323,473,318,478,340,503,346,497" onclick="zone('Tuile rose')">
-    <area shape="poly" coords="192,473,23,566,63,566" onclick="zone('Triangle rose')">
-    <area shape="poly" coords="274,352,252,375,259,381,280,358" onclick="zone('Tuile bleue/grise')">
-    <area shape="poly" coords="378,226,378,264,441,264,441,316,467,316,468,226" onclick="zone('Zone grise/beige')">
-    <area shape="rect" coords="353,324,443,340" onclick="zone('Ligne bleue')">
-</map>
-<p>
-    Couleurs non contractuelles.
-</p>
-<p>
-    Score: <span id="counter">0</span>/7<br>
-    Vous avez déjà trouvé :
-</p>
-<ol id="found"></ol>
-<p class="failure hidden"></p>
-<p class="success hidden">
-    Félicitations ! Vous avez trouvé toutes les différences ! 🎉
-    (ou bien vous avez frénétiquement cliqué de partout)
-</p>
-<script src="assets/jeu.js" type="application/javascript"></script>
-<script src="assets/camel.js" type="application/javascript"></script>
+<header>
+    <h1>Camel</h1>
+</header>
+<main>
+    <nav><a href="..">&laquo; Retour</a></nav>
+    <p>
+        Jouons donc au jeu des 7 différences avec GSE France !
+    </p>
+    <p class="side-by-side">
+        <img src="images/camel-2.jpg" width="548" height="619" alt="Moquette" usemap="#map">
+        <img src="images/camel.jpg" width="548" height="619" alt="Moquette" usemap="#map">
+    </p>
+    <map id="map" name="map">
+        <area shape="rect" coords="180,65,226,97" onclick="zone('Chocolat')">
+        <area shape="circle" coords="101,439,25" onclick="zone('Logo Citroën')">
+        <area shape="poly" coords="323,473,318,478,340,503,346,497" onclick="zone('Tuile rose')">
+        <area shape="poly" coords="192,473,23,566,63,566" onclick="zone('Triangle rose')">
+        <area shape="poly" coords="274,352,252,375,259,381,280,358" onclick="zone('Tuile bleue/grise')">
+        <area shape="poly" coords="378,226,378,264,441,264,441,316,467,316,468,226" onclick="zone('Zone grise/beige')">
+        <area shape="rect" coords="353,324,443,340" onclick="zone('Ligne bleue')">
+    </map>
+    <p>
+        Couleurs non contractuelles.
+    </p>
+    <p>
+        Score: <span id="counter">0</span>/7<br>
+        Vous avez déjà trouvé :
+    </p>
+    <ol id="found"></ol>
+    <p class="failure hidden"></p>
+    <p class="success hidden">
+        Félicitations ! Vous avez trouvé toutes les différences ! 🎉
+        (ou bien vous avez frénétiquement cliqué de partout)
+    </p>
+</main>
 <footer>
     <p>
         Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.
     </p>
 </footer>
+<script src="assets/jeu.js" type="application/javascript"></script>
+<script src="assets/camel.js" type="application/javascript"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/jeux/nature.html b/jeux/nature.html
index 05842e2..128f8e1 100644
--- a/jeux/nature.html
+++ b/jeux/nature.html
@@ -7,27 +7,31 @@
     <link rel="stylesheet" href="assets/nature.css">
 </head>
 <body>
-<h1>Urbain Nature</h1>
-<nav><a href="..">&laquo; Retour</a></nav>
-<p>
-    Oh non ! Quelqu'un a laissé les fenêtres ouvertes sur le plateau de la certif et
-    tout est recouvert de feuilles mortes... Vite ! Prenez votre souris et balayez tout
-    ça !
-</p>
-<p class="img-holder">
-    <img src="images/nature.jpg" id="moquette" width="620" height="652" alt="Moquette">
-</p>
-<p class="failure hidden"></p>
-<p class="success hidden">
-    Félicitations ! Le plateau de la certif est maintenant comme neuf ! 🎉
-    Vous pouvez être fier de vous !
-</p>
-<script src="assets/jeu.js" type="application/javascript"></script>
-<script src="assets/nature.js" type="application/javascript"></script>
+<header>
+    <h1>Urbain Nature</h1>
+</header>
+<main>
+    <nav><a href="..">&laquo; Retour</a></nav>
+    <p>
+        Oh non ! Quelqu'un a laissé les fenêtres ouvertes sur le plateau de la certif et
+        tout est recouvert de feuilles mortes... Vite ! Prenez votre souris et balayez tout
+        ça !
+    </p>
+    <p class="img-holder">
+        <img src="images/nature.jpg" id="moquette" width="620" height="652" alt="Moquette">
+    </p>
+    <p class="failure hidden"></p>
+    <p class="success hidden">
+        Félicitations ! Le plateau de la certif est maintenant comme neuf ! 🎉
+        Vous pouvez être fier de vous !
+    </p>
+</main>
 <footer>
     <p>
         Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.
     </p>
 </footer>
+<script src="assets/jeu.js" type="application/javascript"></script>
+<script src="assets/nature.js" type="application/javascript"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/jeux/signal.html b/jeux/signal.html
index 93ed036..aba6dd2 100644
--- a/jeux/signal.html
+++ b/jeux/signal.html
@@ -6,38 +6,42 @@
     <link rel="stylesheet" href="assets/style.css">
 </head>
 <body>
-<h1>Signal</h1>
-<nav><a href="..">&laquo; Retour</a></nav>
-<p>
-    Peter le livreur arrive sur le plateau de la log au niveau du joli point rose
-    et il doit déposer son colis au bon endroit.<br>
-    Les instructions qui lui sont fournies sont très claires :
-</p>
-<ol>
-    <li></li>
-    <li></li>
-    <li></li>
-    <li></li>
-</ol>
-<p>
-    <img src="images/signal.jpg" width="630" height="646" alt="Moquette" usemap="#map">
-    <map id="map" name="map">
-        <area shape="rect" coords="527,48,585,229" onclick="win()">
-        <area shape="rect" coords="0,0,1260,1292" onclick="lose()">
-    </map>
-</p>
-<p class="failure hidden">
-    Raté ! Les instructions de Peter sont pourtant claires 😉
-</p>
-<p class="success hidden">
-    Félicitations ! Vous avez correctement suivi les instructions ! 🎉
-    (ou bien vous avez frénétiquement cliqué de partout)
-</p>
-<script src="assets/jeu.js" type="application/javascript"></script>
+<header>
+    <h1>Signal</h1>
+</header>
+<main>
+    <nav><a href="..">&laquo; Retour</a></nav>
+    <p>
+        Peter le livreur arrive sur le plateau de la log au niveau du joli point rose
+        et il doit déposer son colis au bon endroit.<br>
+        Les instructions qui lui sont fournies sont très claires :
+    </p>
+    <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+    </ol>
+    <p>
+        <img src="images/signal.jpg" width="630" height="646" alt="Moquette" usemap="#map">
+        <map id="map" name="map">
+            <area shape="rect" coords="527,48,585,229" onclick="win()">
+            <area shape="rect" coords="0,0,1260,1292" onclick="lose()">
+        </map>
+    </p>
+    <p class="failure hidden">
+        Raté ! Les instructions de Peter sont pourtant claires 😉
+    </p>
+    <p class="success hidden">
+        Félicitations ! Vous avez correctement suivi les instructions ! 🎉
+        (ou bien vous avez frénétiquement cliqué de partout)
+    </p>
+</main>
 <footer>
     <p>
         Made with &hearts; by <a href="https://gabnotes.org/about-me/">Gabriel Augendre</a>.
     </p>
 </footer>
+<script src="assets/jeu.js" type="application/javascript"></script>
 </body>
 </html>
\ No newline at end of file
