diff --git a/site/blog.html b/site/blog.html
new file mode 100644
index 0000000..000c2a6
--- /dev/null
+++ b/site/blog.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<!-- un jour, on pourrait ajouter un relai snowflake -->
+<!-- un jour, on pourrait ajouter miroir en .oignon -->
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <title>La Distorsion</title>
+    <link href="css/simple.css" rel="stylesheet" title="Simple" />
+    <link href="css/darkmagenta.css" rel="alternate stylesheet" title="Darkmagenta" />
+    <script src="js/styleswitcher.js"></script>
+  </head>
+  <body>
+    <header>
+      <h1>La Distorsion</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">maison</a></li>
+          <li><a href="">présentation</a></li>
+          <li><a href="blog.html">blog</a></li>
+          <li>
+            <label for="style">change de style :</label>
+            <select class="style" name="style">
+              <option>Simple</option>
+              <option>Darkmagenta</option>
+            </select>
+            <script>
+              const selectSelect = document.querySelector(".style");
+              selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
+            </script>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <p>Peut être qu'un jour on écrira des trucs par ici ;)</p>
+    </main>
+    <footer>
+      <p>mél: <a class="mel">distorsion (A) groupes.renater.fr</a></p>
+    </footer>
+  </body>
+</html>
diff --git a/site/css/simple.css b/site/css/simple.css
index e0e4aa3..91e8bee 100644
--- a/site/css/simple.css
+++ b/site/css/simple.css
@@ -25,3 +25,9 @@ nav li:not(:last-of-type) {
 a.mel {
 	font-family: monospace;
 }
+header {
+	border-bottom: solid 0.1rem;
+}
+footer {
+	border-top: solid 0.1rem;
+}
diff --git a/site/index.html b/site/index.html
index 5ac1f49..4fa60b3 100644
--- a/site/index.html
+++ b/site/index.html
@@ -14,19 +14,22 @@
       <h1>La Distorsion</h1>
       <nav>
         <ul>
-          <li><a href="">maison</a></li>
+          <li><a href="index.html">maison</a></li>
           <li><a href="">présentation</a></li>
-          <li><a href="">blog</a></li>
-          <ul>
+          <li><a href="blog.html">blog</a></li>
+          <li>
+            <label for="style">change de style :</label>
+            <select class="style" name="style">
+              <option>Simple</option>
+              <option>Darkmagenta</option>
+            </select>
+            <script>
+              const selectSelect = document.querySelector(".style");
+              selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
+            </script>
+          </li>
+        </ul>
       </nav>
-      <select class="style" name="style">
-        <option>Simple</option>
-        <option>Darkmagenta</option>
-      </select>
-      <script>
-        const selectSelect = document.querySelector(".style");
-        selectSelect.addEventListener("change", (event) => { setActiveStyleSheet(event.target.value); });
-      </script>
     </header>
     <main>
       <p>La Distorsion est un espace-temps de rencontre entre personnes ayant des pratiques critiques des sciences et des techniques. Elle fait partie du <a href="https://interhacker.space">réseau interhack</a> qui tisse des liens entre hackerspaces.</p>
@@ -36,11 +39,12 @@
       <p>C'est possible de nous parler par courrier électronique à <a class="mel">distorsion (A) groupes.renater.fr</a></p>
       <h2>Les trucs à venir</h2>
       <p>Il se passe à peu près tout le temps des choses, selon les envies et intérêts de personnes présentes, sur un mode très informel. Parfois on formalise un peu plus certaines activités, qu'on essaye d'annoncer ci-dessous.</p>
+      <p>(pour l'instant, c'est vide)</p>
       <h2>Site en (dé)construction</h2>
       <img src="img/construction-opti.webp" alt="un super gif de déconstruction">
     </main>
     <footer>
-      <p>Mél: <a class="mel">distorsion (A) groupes.renater.fr</a></p>
+      <p>mél : <a class="mel">distorsion (A) groupes.renater.fr</a></p>
     </footer>
   </body>
 </html>
