diff --git a/mainsite/static/css/screen.css b/mainsite/static/css/screen.css
index 265f494..1bdd318 100644
--- a/mainsite/static/css/screen.css
+++ b/mainsite/static/css/screen.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* Welcome to Compass.
  * In this file you should write your main styles. (or centralize your imports)
  * Import this file using the following HTML or equivalent:
@@ -75,7 +76,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 
 /* line 15, ../sass/screen.scss */
 body, html {
-  background: #660022;
+  background: #fff9a4;
   padding: 0;
   margin: 0;
   height: 100%;
@@ -92,119 +93,188 @@ body.plain #main {
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
-  background: #fff7cc;
+  background: #fff9a4;
   padding: 25px;
 }
+/* line 36, ../sass/screen.scss */
+body.plain #main button {
+  background: #8c0e00;
+  color: #fff9a4;
+  display: inline-block;
+  padding: 30px;
+  font: 25px "Source Sans Pro", sans-serif;
+  font-weight: bold;
+  border: 1px solid #fff;
+}
 
-/* line 38, ../sass/screen.scss */
+/* line 48, ../sass/screen.scss */
 h1, h2, h3, h4 {
   font-family: "Bitter", serif;
 }
 
-/* line 42, ../sass/screen.scss */
+/* line 52, ../sass/screen.scss */
 h2 {
   font-size: 1.8em;
   text-align: center;
+  border-bottom: 2px solid #000;
+  padding: 10px;
+  margin-bottom: 0.7em;
 }
 
-/* line 47, ../sass/screen.scss */
+/* line 60, ../sass/screen.scss */
 strong, b {
   font-weight: bold;
 }
 
-/* line 51, ../sass/screen.scss */
+/* line 64, ../sass/screen.scss */
 i, em {
   font-style: italic;
 }
 
-/* line 55, ../sass/screen.scss */
+/* line 68, ../sass/screen.scss */
 a {
-  color: #990033;
+  color: #8c0e00;
   text-decoration: none;
   font-weight: bold;
 }
 
-/* line 61, ../sass/screen.scss */
-.container, header {
-  background: #fff;
-  margin: 0 auto;
-  max-width: 800px;
-}
-
-/* line 67, ../sass/screen.scss */
+/* line 74, ../sass/screen.scss */
 header {
+  max-width: 700px;
+  margin: 0 auto;
   text-align: center;
-  border-bottom: 2px solid #000;
+  border-bottom: 3px solid #000;
   position: relative;
-  padding-bottom: 40px;
+  padding-bottom: 30px;
+  margin: 30px auto;
 }
-/* line 73, ../sass/screen.scss */
+/* line 83, ../sass/screen.scss */
 header:after {
   content: " ";
   position: absolute;
-  width: 100%;
+  width: 110%;
   z-index: 1;
-  left: 0;
+  left: -5%;
   bottom: 25px;
-  border-bottom: 2px solid #000;
+  border-bottom: 3px solid #000;
 }
 
-/* line 84, ../sass/screen.scss */
+/* line 94, ../sass/screen.scss */
 .container {
+  margin: 0 auto;
+  max-width: 1200px;
   display: table;
   display: flex;
   padding: 15px;
   width: 100%;
 }
 
-/* line 91, ../sass/screen.scss */
+/* line 103, ../sass/screen.scss */
 .sidebar {
-  width: 210px;
+  width: 400px;
+  padding-right: 40px;
 }
-/* line 94, ../sass/screen.scss */
+/* line 107, ../sass/screen.scss */
+.sidebar ul.nav {
+  margin-bottom: 30px;
+}
+/* line 110, ../sass/screen.scss */
 .sidebar ul.nav li {
   display: block;
   font-weight: normal;
-  margin: 5px 0;
+  margin: 7px 0;
 }
-/* line 98, ../sass/screen.scss */
+/* line 115, ../sass/screen.scss */
 .sidebar ul.nav li a {
-  background: #fff7cc;
+  border: 1px solid #8c0e00;
+  background: #fff;
+  color: #8c0e00;
+  box-shadow: -2px 2px 0 #f08f00;
   padding: 10px 0;
   display: block;
   text-align: center;
-  background: linear-gradient(to bottom, rgba(255, 247, 204, 0) 60%, #fff7cc 60%) no-repeat;
+  transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
+}
+/* line 126, ../sass/screen.scss */
+.sidebar ul.nav li a:hover {
+  box-shadow: -6px 6px 0 #f08f00;
+  transform: translateX(2px) translateY(-2px);
 }
 
-/* line 109, ../sass/screen.scss */
+/* line 136, ../sass/screen.scss */
 .main {
+  background: #fff;
   flex-grow: 1;
   padding: 20px;
   width: 100%;
 }
-/* line 114, ../sass/screen.scss */
-.main .last-publication {
+/* line 142, ../sass/screen.scss */
+.main .last-publication a {
   display: block;
-  max-width: 300px;
+  max-width: 350px;
   margin: 15px auto;
+  margin-bottom: 30px;
+  padding: 30px;
+  border: 1px solid #fff;
   text-align: center;
   font-size: 1.5em;
-  background: #ffe766;
-  padding: 30px;
+  background: #8c0e00;
+  color: #fff9a4;
+  font-family: "Bitter", serif;
+  box-shadow: 0 0 0 rgba(140, 14, 0, 0);
+  transition: box-shadow 1s ease-out;
+}
+/* line 157, ../sass/screen.scss */
+.main .last-publication a:hover {
+  box-shadow: 0 0 5px #8c0e00;
 }
 
-/* line 125, ../sass/screen.scss */
+/* line 163, ../sass/screen.scss */
 .publication-list {
   margin: 10px 5px;
   margin-left: 30px;
+  padding: 0 30px;
+  max-width: 700px;
 }
-/* line 128, ../sass/screen.scss */
-.publication-list td {
-  padding: 3px 5px;
+/* line 169, ../sass/screen.scss */
+.publication-list .publication-entry {
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-bottom: 1px solid #86abcb;
 }
-/* line 131, ../sass/screen.scss */
-.publication-list .publication-date {
+/* line 175, ../sass/screen.scss */
+.publication-list .publication-entry:first-child {
+  border-top: 1px solid #86abcb;
+}
+/* line 179, ../sass/screen.scss */
+.publication-list .publication-entry > span {
+  padding: 7px 5px;
+  display: inline-block;
+}
+/* line 183, ../sass/screen.scss */
+.publication-list .publication-entry .publication-date {
   text-align: right;
   font-weight: light;
   font-size: 0.8em;
+  font-style: italic;
+  width: 100px;
+}
+/* line 190, ../sass/screen.scss */
+.publication-list .publication-entry .publication-descr {
+  font-size: 0.9em;
+  opacity: 0.9;
+}
+/* line 193, ../sass/screen.scss */
+.publication-list .publication-entry .publication-descr:before {
+  content: "– ";
+}
+/* line 197, ../sass/screen.scss */
+.publication-list .publication-entry a.overlay {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
 }
diff --git a/mainsite/static/sass/_colors.scss b/mainsite/static/sass/_colors.scss
index 4b71d60..ba45182 100644
--- a/mainsite/static/sass/_colors.scss
+++ b/mainsite/static/sass/_colors.scss
@@ -1,4 +1,10 @@
-$fond: #990033;
-$cadreclair: #fff7cc;
+$jaune: #f2ea5a;
+$rouge: #8c0e00;
+$bleu: #4679a5;
+$vert: #5e8c73;
+$cadreclair: #fff9a4;
 $eau: #38669a;
 $orange: #f08f00;
+$blanc: #fff;
+$pfont: "Source Sans Pro", sans-serif;
+$hfont: "Bitter", serif;
diff --git a/mainsite/static/sass/screen.scss b/mainsite/static/sass/screen.scss
index 5e7c3e4..b0e7d83 100644
--- a/mainsite/static/sass/screen.scss
+++ b/mainsite/static/sass/screen.scss
@@ -13,11 +13,11 @@
 }
 
 body, html {
-    background: darken($fond, 10%);
+    background: $cadreclair;
     padding: 0;
     margin: 0;
     height: 100%;
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: $pfont;
     font-size: 18px;
     line-height: 1.45;
 }
@@ -32,16 +32,29 @@ body.plain {
         transform:translateY(-50%) translateX(-50%);
         background: $cadreclair;
         padding: 25px;
+
+        button {
+            background: $rouge;
+            color: $cadreclair;
+            display: inline-block;
+            padding: 30px;
+            font: 25px $pfont;
+            font-weight: bold;
+            border: 1px solid #fff;
+        }
     }
 }
 
 h1, h2, h3, h4 {
-    font-family: "Bitter", serif;
+    font-family: $hfont;
 }
 
 h2 {
     font-size: 1.8em;
     text-align: center;
+    border-bottom: 2px solid #000;
+    padding: 10px;
+    margin-bottom: 0.7em;
 }
 
 strong, b {
@@ -53,35 +66,34 @@ i, em {
 }
 
 a {
-    color: $fond;
+    color: $rouge;
     text-decoration: none;
     font-weight: bold;
 }
 
-.container, header {
-    background: #fff;
-    margin: 0 auto;
-    max-width: 800px;
-}
-
 header {
+    max-width: 700px;
+    margin: 0 auto;
     text-align: center;
-    border-bottom: 2px solid #000;
+    border-bottom: 3px solid #000;
     position: relative;
-    padding-bottom: 40px;
+    padding-bottom: 30px;
+    margin: 30px auto;
     
     &:after {
         content: " ";
         position: absolute;
-        width: 100%;
+        width: 110%;
         z-index: 1;
-        left: 0;
+        left: -5%;
         bottom: 25px;
-        border-bottom: 2px solid #000;
+        border-bottom: 3px solid #000;
     }
 }
 
 .container {
+    margin: 0 auto;
+    max-width: 1200px;
     display: table;
     display: flex;
     padding: 15px;
@@ -89,48 +101,106 @@ header {
 }
 
 .sidebar {
-    width: 210px;
+    width: 400px;
+    padding-right: 40px;
 
-    ul.nav li {
-        display: block;
-        font-weight: normal;
-        margin: 5px 0;
-        a {
-            background: $cadreclair;
-            padding: 10px 0;
+    ul.nav {
+        margin-bottom: 30px;
+        
+        li {
             display: block;
-            text-align: center;
-            background: linear-gradient(to bottom, rgba($cadreclair, 0) 60%, $cadreclair 60%) no-repeat
+            font-weight: normal;
+            margin: 7px 0;
+            
+            a {
+                border: 1px solid $rouge;
+                background: $blanc;
+                color: $rouge;
+                box-shadow: -2px 2px 0 $orange;
+                padding: 10px 0;
+                display: block;
+                text-align: center;
+                //            background: linear-gradient(to bottom, rgba($cadreclair, 0) 60%, $cadreclair 60%) no-repeat
+                transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
+                
+                &:hover {
+                    box-shadow: -6px 6px 0 $orange;
+                    transform: translateX(2px) translateY(-2px);
+                }
+            }
         }
     }
 }
 
 
 .main {
+    background: #fff;
     flex-grow: 1;
     padding: 20px;
     width: 100%;
 
-    .last-publication {
+    .last-publication a {
         display: block;
-        max-width: 300px;
+        max-width: 350px;
         margin: 15px auto;
+        margin-bottom: 30px;
+        padding: 30px;
+        border: 1px solid #fff;
         text-align: center;
         font-size: 1.5em;
-        background: darken($cadreclair, 20%);
-        padding: 30px;
+        background: $rouge;
+        color: $cadreclair;
+        font-family: $hfont;
+        box-shadow: 0 0 0 rgba($rouge, 0);
+        transition: box-shadow 1s ease-out;
+        
+        &:hover {
+            box-shadow: 0 0 5px $rouge;
+        }
     }
 }
 
 .publication-list {
     margin: 10px 5px;
     margin-left: 30px;
-    td {
-        padding: 3px 5px;
-    }
-    .publication-date {
-        text-align: right;
-        font-weight: light;
-        font-size: 0.8em;
+    padding: 0 30px;
+    max-width: 700px;
+    
+    .publication-entry {
+        display: flex;
+        align-items: center;
+        position: relative;
+        border-bottom: 1px solid lighten($bleu, 20%);
+        
+        &:first-child {
+            border-top: 1px solid lighten($bleu, 20%);
+        }
+        
+        & > span {
+            padding: 7px 5px;
+            display: inline-block;
+        }
+        .publication-date {
+            text-align: right;
+            font-weight: light;
+            font-size: 0.8em;
+            font-style: italic;
+            width: 100px;
+        }
+        .publication-descr {
+            font-size: 0.9em;
+            opacity: 0.9;
+            &:before {
+                content: "– ";
+            }
+        }
+        a.overlay {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+        }
     }
 }
diff --git a/mainsite/templates/mainsite/homepage.html b/mainsite/templates/mainsite/homepage.html
index 0776ee3..d14d72c 100644
--- a/mainsite/templates/mainsite/homepage.html
+++ b/mainsite/templates/mainsite/homepage.html
@@ -6,10 +6,8 @@
 {% get_solo 'mainsite.SiteConfiguration' as site_config %}
 
 <div class="last-publication">
-  <p>
-    Demandez la
-    <a href={% url "latestPublication" %}>dernière édition</a> !
-  </p>
+    <a href="{% url "latestPublication" %}">
+        Demandez la <br />dernière édition !</a>
 </div>
 
 {{ site_config.homepageText | markdownify }}
diff --git a/mainsite/templates/mainsite/publications_list_view.html b/mainsite/templates/mainsite/publications_list_view.html
index 3f7f574..07f4ebd 100644
--- a/mainsite/templates/mainsite/publications_list_view.html
+++ b/mainsite/templates/mainsite/publications_list_view.html
@@ -13,22 +13,22 @@ Millésime {{ year_range }}
 
 <div class="intro-text">{{ intro_text | markdownify }}</div>
 
-<table class="publication-list">
+<ul class="publication-list">
 {% for bocal in publications %}
-  <tr class="publication-entry">
+  <li class="publication-entry">
     {% if bocal.unknown_date %}
-    <td class="publication-date">Date inconnue</td>
+        <span class="publication-date">Date inconnue</span>
     {% else %}
-    <td class="publication-date">{{ bocal.date | date:"d/m/Y" }}</td>
+        <span class="publication-date">{{ bocal.date | date:"d/m/Y" }}</span>
     {% endif %}
-    <td class="publication-body">
+    <span class="publication-body">
       <a href="{{ bocal.url }}" title="Lire le BOcal !">{{ bocal }}</a>
-
       {% if bocal.descr %}
-       : <span class="publication-descr">{{ bocal.descr }}</span>
+       <span class="publication-descr">{{ bocal.descr }}</span>
       {% endif %}
-    </td>
-  </tr>
+    </span>
+    <a class="overlay" href="{{ bocal.url }}" title="Lire {{ bocal|escapejs }} !"></a>
+  </li>
 {% endfor %}
-</table>
+</ul>
 {% endblock content %}