diff --git a/style-2018-06-11.css b/style-2018-06-11.css
new file mode 100644
index 0000000..6c7922d
--- /dev/null
+++ b/style-2018-06-11.css
@@ -0,0 +1,317 @@
+/*
+#d3d4d9 gris clair
+#4b88a2 bleu vert
+#bb0a21 rouge
+#252627 gris foncé
+#fff9fb blanc
+*/
+
+@font-face {
+  font-family: 'komika';
+  src: url('font/komika.eot');
+  src: url('font/komika.eot?#iefix') format('embedded-opentype'),
+       url('font/komika.woff') format('woff'),
+       url('font/komika.ttf') format('truetype'),
+       url('font/komika.svg#komika') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+    font-family: 'lato';
+    src: url('font/lato-regular.eot');
+    src: url('font/lato-regular.eot?#iefix') format('embedded-opentype'),
+         url('font/lato-regular.woff2') format('woff2'),
+         url('font/lato-regular.woff') format('woff'),
+         url('font/lato-regular.ttf') format('truetype'),
+         url('font/lato-regular.svg#latoregular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'lato';
+    src: url('font/lato-italic.eot');
+    src: url('font/lato-italic.eot?#iefix') format('embedded-opentype'),
+         url('font/lato-italic.woff2') format('woff2'),
+         url('font/lato-italic.woff') format('woff'),
+         url('font/lato-italic.ttf') format('truetype'),
+         url('font/lato-italic.svg#latoitalic') format('svg');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'lato';
+    src: url('font/lato-bolditalic.eot');
+    src: url('font/lato-bolditalic.eot?#iefix') format('embedded-opentype'),
+         url('font/lato-bolditalic.woff2') format('woff2'),
+         url('font/lato-bolditalic.woff') format('woff'),
+         url('font/lato-bolditalic.ttf') format('truetype'),
+         url('font/lato-bolditalic.svg#latobold_italic') format('svg');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'lato';
+    src: url('font/lato-bold.eot');
+    src: url('font/lato-bold.eot?#iefix') format('embedded-opentype'),
+         url('font/lato-bold.woff2') format('woff2'),
+         url('font/lato-bold.woff') format('woff'),
+         url('font/lato-bold.ttf') format('truetype'),
+         url('font/lato-bold.svg#latobold') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+
+body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  line-height: 130%;
+  font-size: 110%;
+}
+
+input { font-family: sans-serif; }
+
+@media (min-width: 40em) {
+  body {
+    font-family: lato, sans-serif;
+    background-color: #d3d4d9;
+  }
+
+  input { font-family: lato, sans-serif; }
+}
+
+a { color: #252627; }
+
+audio { box-shadow: -0.1em 0.1em 1em 0.1em rgba(0, 0, 0, 0.3); }
+
+li {
+  list-style-type: none;
+  position: relative;
+  margin-bottom: 0.5em;
+}
+
+li::before {
+  display: block;
+  position: absolute;
+  content: ' ';
+  width: 1em;
+  height: 1em;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYmIwYTIxIiBzdHJva2Utd2lkdGg9IjEuOSI+PHBhdGggZD0iTTE2IDlhNyA3IDAgMSAxLTctNyIgY29sb3I9IiMwMDAiIG92ZXJmbG93PSJ2aXNpYmxlIi8+PHBhdGggZD0iTTUuNyAxMi4zbDQuNi00LjZtLTQuNiAwbDQuNiA0LjYiLz48L2c+PC9zdmc+);
+  background-repeat: no-repeat;
+  left: -1.5em;
+  top: 0.1em;
+}
+
+img, audio {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+#page {
+  background-color: #fff9fb;
+  overflow-x: hidden;
+}
+#top p {
+  padding: 1.5em 1.5em 0 1.5em;
+  color: rgba(0,0,0,.4);
+  font-size: 1em;
+}
+@media (min-width: 40em) {
+  #page {
+    max-width: 40em;
+    margin: 1em auto;
+    background-color: #fff9fb;
+    border-radius: 3em;
+    box-shadow: -0.1em 0.1em 1em 0.1em rgba(0, 0, 0, 0.3); 
+  }
+}
+
+#main { padding: 1.5em 1.5em 0 1.5em; }
+#sidebar { padding: 1.5em; }
+
+#footer { padding: 1em 2em; }
+
+/* Prelude */
+#prelude li::before { display: none; }
+#prelude { margin: 0; padding-left: 1.5em; }
+
+@media (min-width: 40em) {
+  #prelude { text-align: center; }
+  #prelude li { display: inline-block; }
+  #prelude li::after { content: ' | '; }
+  #prelude li:last-child::after { display: none; }
+}
+
+/* Titles */
+h1, h2, h3, h4, h5, h6 { font-family: komika; }
+
+h1 { background-color: #bb0a21; margin-top: 0; }
+h2 { background-color: #252627; }
+
+h1, h2 {
+  color: #fff9fb;
+  padding: 0.7em 0.7em 0.7em 3.2em;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDIuOSIgaGVpZ2h0PSIzMDIuOSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIwIj48cGF0aCBkPSJNMjkzIDE1MS40YzAgNzgtNjMuNSAxNDEuNS0xNDEuNiAxNDEuNUM3My40IDI5MyAxMCAyMjkgMTAgMTUxIDEwIDczLjIgNzMuMyAxMCAxNTEuNCAxMGM3OCAwIDE0MS41IDYzLjMgMTQxLjUgMTQxLjR6IiBjb2xvcj0iIzAwMCIgb3ZlcmZsb3c9InZpc2libGUiLz48ZyBzdHJva2Utd2lkdGg9IjEyIj48cGF0aCBkPSJNMTcwLjMgMTc3YzAgMjQuNC0yMCA0NC4zLTQ0LjQgNDQuMy0yNSAwLTQ1LTIwLTQ1LTQ0LjQgMC0yNSAyMC00NSA0NC40LTQ1IiBjb2xvcj0iIzAwMCIgb3ZlcmZsb3c9InZpc2libGUiLz48cGF0aCBkPSJNMTA1LjQgMTk3LjVsMjktMjltLTI5IDBsMjkgMjkiLz48L2c+PC9nPjwvc3ZnPg==);
+  background-repeat: no-repeat;
+  background-size: 2.6em;
+  background-position: 0.2em center;
+  line-height: 150%;
+}
+
+@media (max-width: 40em) {
+  h1 { font-size: 140%; }
+
+  h2 {
+    font-size: 100%;
+    position: relative;
+    left: -1.5em;
+    width: 100%;
+  }
+}
+
+@media (min-width: 40em) {
+  h1, h2 {
+    padding: 0.7em 0.7em 0.7em 3.2em;
+    border-radius: 4em;
+  }
+}
+
+h1 a, h2 a { color: #fff9fb; text-decoration: none; }
+
+/* Post info */
+p.post-info, p.post-info-co {
+  text-align: center;
+  color: #4b88a2;
+  font-size: 90%;
+}
+
+p.day-date { display: none; }
+
+/* Tags */
+ul.post-tags, #blognav .tags ul, #blognav .tags p {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+@media (max-width: 40em) {
+  ul.post-tags, #blognav .tags ul { font-size: 80%; }
+}
+
+ul.post-tags li, #blognav .tags li {
+  list-style-type: none;
+  display: inline-block;
+}
+
+ul.post-tags li::before, #blognav .tags li::before { display: none; }
+
+ul.post-tags li a, #blognav .tags li a {
+  display: block;
+  margin: 0 0.5em 0 0;
+  padding: 0;
+  background-color: #4b88a2;
+  border-radius: 2em;
+  padding: 0.5em 1em;
+  color: #fff9fb;
+  text-decoration: none;
+}
+
+/* Sidebar */
+#sidebar { background-color: #d3d4d9; }
+
+/* Footer */
+#footer {
+  background-color: #bb0a21;
+  color: #d3d4d9;
+}
+
+@media (min-width: 40em) {
+  #footer { border-radius: 0 0 3em 3em; }
+}
+
+#footer a { color: #fff9fb; }
+
+/* Forms */
+fieldset {
+  border: none;
+  background-color: #4b88a2;
+  color: #fff;
+}
+
+input[type="submit"] {
+  padding: 0.5em 1em;
+  font-size: 110%;
+}
+
+input[type="text"], textarea {
+  padding: 0.5em 1em;
+  font-size: 110%;
+}
+
+.field { width: 100%; }
+.field input, .field textarea{
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*Search form */
+#search input[type="text"] { width: 10em; }
+
+/* Pager */
+
+div.pagination-wrapper {
+  background-color: #4b88a2;
+  color: #fff9fb;
+  width: 100%;
+}
+
+@media (max-width: 40em) {
+  div.pagination-wrapper {
+    position: relative;
+    left: -1.5em;
+    padding: 0.1em 1.5em;
+    line-height: 170%;
+  }
+}
+
+p.pagination>a, p.pagination>span  {
+  display: block;
+  text-align: center;
+  background-color: #4b88a2;
+  color: #fff9fb;
+}
+
+p.pagination>a, p.pagination>span  {
+  background-color: #4b88a2;
+  color: #fff9fb;
+}
+
+@media (min-width: 40em) {
+  div.pagination-wrapper { display: table; }
+  p.pagination { display: table-row; }
+  p.pagination>a, p.pagination>span  { display: table-cell; }
+
+  p.pagination>a {
+    position: relative;
+    width: 35%;
+    padding: 1.5em;
+  }
+
+  p.pagination>a.prev {
+    text-align: left;
+    left: -1.5em;
+  }
+
+  p.pagination>span { text-align: center; }
+
+  p.pagination>a.next {
+    text-align: right;
+    right: -1.5em;
+  }
+}
\ No newline at end of file
diff --git a/tpl/_head.html b/tpl/_head.html
index c4c78fb..1005fbf 100644
--- a/tpl/_head.html
+++ b/tpl/_head.html
@@ -1,4 +1,4 @@
-<link rel="stylesheet" type="text/css" href="{{tpl:BlogThemeURL}}/style.css" media="screen" />
+<link rel="stylesheet" type="text/css" href="{{tpl:BlogThemeURL}}/style-2018-06-11.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="{{tpl:BlogQmarkURL}}pf=print.css" media="print" />
 
 {{tpl:include src="user_head.html"}}
diff --git a/tpl/_top.html b/tpl/_top.html
index 4953f3f..8d09b51 100644
--- a/tpl/_top.html
+++ b/tpl/_top.html
@@ -4,8 +4,3 @@
   <!-- # --BEHAVIOR-- publicTopAfterContent -->
   {{tpl:SysBehavior behavior="publicTopAfterContent"}}
 </div>
-<ul id="prelude" role="navigation">
-<tpl:Entries type="page">
-<li><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle}}</a></li>
-</tpl:Entries>
-</ul>
diff --git a/tpl/home.html b/tpl/home.html
index 05a6ed0..903a90e 100644
--- a/tpl/home.html
+++ b/tpl/home.html
@@ -1,16 +1,14 @@
 {{tpl:extends parent="__layout.html"}}
-
-				<tpl:Block name="page-top">
-
-<div id="top" role="banner">
-  <h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
-<p>{{tpl:BlogDescription}}</p>
-  <!-- # --BEHAVIOR-- publicTopAfterContent -->
-  {{tpl:SysBehavior behavior="publicTopAfterContent"}}
-</div>
-<ul id="prelude" role="navigation">
-<tpl:Entries type="page">
-<li><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle}}</a></li>
-</tpl:Entries>
-</ul>
+<tpl:Block name="page-top">
+  <div id="top" role="banner">
+    <h1><span><a href="{{tpl:BlogURL}}">{{tpl:BlogName encode_html="1"}}</a></span></h1>
+    <p>{{tpl:BlogDescription}}</p>
+    <!-- # --BEHAVIOR-- publicTopAfterContent -->
+    {{tpl:SysBehavior behavior="publicTopAfterContent"}}
+  </div>
+  <ul id="prelude" role="navigation">
+  <tpl:Entries type="page">
+  <li><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle}}</a></li>
+    </tpl:Entries>
+  </ul>
 				</tpl:Block>	<!-- page-top -->
\ No newline at end of file