diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss
index 821036a..2558c89 100644
--- a/avisstage/sass/screen.scss
+++ b/avisstage/sass/screen.scss
@@ -4,6 +4,10 @@
 
 $fond: #E80051;
 $barre: $fond * 0.7;
+$compl: #28BF8A;
+$jaune: #FCEB26;
+$vert: #27E35F;
+$rouge: #C21B26;
 
 body {
     background: $fond;
@@ -18,7 +22,19 @@ h1, h2, h3, h4 {
 }
 
 h1 {
-    font-size: 2em;
+    font-size: 2.3em;
+}
+
+h2 {
+    font-size: 1.8em;
+}
+
+h3 {
+    font-size: 1.4em;
+}
+
+b {
+    font-weight: bold;
 }
 
 .beta {
@@ -30,6 +46,8 @@ h1 {
 
 a {
     font-weight: bold;
+    color: $compl * 0.9;
+    text-decoration: none;
 }
 
 header {
@@ -50,6 +68,7 @@ header {
                 padding: 0 20px;
                 height: 90px;
                 vertical-align: middle;
+                color: #fff;
                 
                 &:hover {
                     background: $barre * 0.6;
@@ -65,6 +84,7 @@ header {
 
     h1 {
         padding: 15px;
+        word-wrap: none;
     }
 }
 
@@ -100,3 +120,174 @@ p {
     }
     
 }
+
+// Liste des stages
+
+.stagelist {
+
+    li {
+        display: table;
+        width: 100%;
+        //border: 1px solid $fond * 1.3;
+        background: #fff;
+        margin: 12px;
+
+        & > *, &:before {
+            display: table-cell;
+            vertical-align: middle;
+            padding: 15px;
+        }
+        a {
+            width: auto;
+            &:hover {
+                background: #ccc;
+            }
+        }
+        &:before {
+            content: "&nbsp";
+            text-align: right;
+            width: 150px;
+            opacity: 0.8;
+            color: #fff;
+        }
+        &.stage-brouillon:before {
+            content: "Brouillon";
+            background: $rouge;
+        }
+        &.stage-publie:before {
+            content: "Publié";
+            background: $vert;
+        }
+        &.stage-ajout:before {
+            content:"+";
+            color: #000;
+        }
+    }
+}
+
+// Les stages
+
+article.stage {
+    font-weight: normal;
+    
+    h2 {
+        background: desaturate($jaune * 1.6, 40%);
+        padding: 10px 20px;
+        margin: -20px;
+        margin-bottom: 25px;
+        text-shadow: -3px 3px 0 rgba(#000, 0.3);
+    }
+    h3 {
+        background: desaturate($compl, 40%);
+        margin-left: -25px;
+        margin-top: 30px;
+        padding: 5px;
+        padding-left: 20px;
+        color: #fff;
+        text-shadow: -3px 3px 0 rgba(#000, 0.3);
+        //margin-right: 25px;
+    }
+    section {
+        background: #eee;
+        padding: 14px;
+        max-width: 600px;
+        margin: 30px auto;
+
+        &.misc {
+            ul.infos {
+                margin: 0 -3px;
+                
+                li {
+                    display: inline-block;
+                    padding: 5px;
+                    margin: 3px;
+                    font-weight: normal;
+                    color: #fff;
+                    font-size: 0.9em;
+                    border-radius: 4px;
+                    
+                    &.thematique {
+                        background-color: $compl;
+                    }
+                    &.matiere {
+                        background-color: $fond;
+                    }
+                }
+            }
+        }
+        
+        .chapo, .avis-texte {
+            margin-bottom: 15px;
+            background: #fff;
+            padding: 20px;
+        }
+        .chapo {
+            font-size: 1.1em;
+            font-weight: 500;
+            font-variant: small-caps;
+        }
+        .avis-texte {
+            border-left: 1px solid #ccc;
+            padding-left: 15px;
+        }
+
+        .plusmoins {
+            max-width: 600px;
+            margin: 15px auto;
+            
+            & > div {
+                display: table;
+                width: 100%;
+                
+                &:before {
+                    content: "&nbsp";
+                    width: 100px;
+                    font-size: 1.8em;
+                    font-weight: bold;
+                    text-align: right;
+                    padding-right: 12px;
+                }
+
+                & > *, &:before {
+                    display:table-cell;
+                }
+
+                & > div {
+                    padding: 15px;
+                    color: #fff;
+                    h4 {
+                        font-weight: normal;
+                        margin-left: -5px;
+                        font-size: 0.9em;
+                        opacity: 0.9;
+                    }
+                    p {
+                        font-weight: bold;
+                        margin: 2px;
+                    }
+                }
+            }
+            
+            .plus {
+                & > div {
+                    background: $vert * 0.9;
+                }
+                &:before {
+                    content: "Les +";
+                    vertical-align: bottom;
+                    color: $vert * 0.7;
+                }
+            }
+            .moins {
+                & > div {
+                    background: $rouge * 0.9;
+                }
+                &:before {
+                    content: "Les -";
+                    vertical-align: top;
+                    color: $rouge * 0.7;
+                }
+            }
+        }
+    }
+}
diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css
index 8833d54..f075a7e 100644
--- a/avisstage/static/css/screen.css
+++ b/avisstage/static/css/screen.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700");
 /* line 5, ../../../../../../../var/lib/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
@@ -64,7 +65,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
   display: block;
 }
 
-/* line 8, ../../sass/screen.scss */
+/* line 12, ../../sass/screen.scss */
 body {
   background: #E80051;
   font-family: 'Dosis', sans-serif;
@@ -73,17 +74,32 @@ body {
   font-weight: 300;
 }
 
-/* line 16, ../../sass/screen.scss */
+/* line 20, ../../sass/screen.scss */
 h1, h2, h3, h4 {
   font-family: Podkova;
 }
 
-/* line 20, ../../sass/screen.scss */
+/* line 24, ../../sass/screen.scss */
 h1 {
-  font-size: 2em;
+  font-size: 2.3em;
 }
 
-/* line 24, ../../sass/screen.scss */
+/* line 28, ../../sass/screen.scss */
+h2 {
+  font-size: 1.8em;
+}
+
+/* line 32, ../../sass/screen.scss */
+h3 {
+  font-size: 1.4em;
+}
+
+/* line 36, ../../sass/screen.scss */
+b {
+  font-weight: bold;
+}
+
+/* line 40, ../../sass/screen.scss */
 .beta {
   opacity: 0.5;
   font-size: 0.7em;
@@ -91,61 +107,65 @@ h1 {
   transform: translate(-1em, 0.6em) rotate(-15deg);
 }
 
-/* line 31, ../../sass/screen.scss */
+/* line 47, ../../sass/screen.scss */
 a {
   font-weight: bold;
+  color: #24ac7c;
+  text-decoration: none;
 }
 
-/* line 35, ../../sass/screen.scss */
+/* line 53, ../../sass/screen.scss */
 header {
   background: #a20039;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-/* line 41, ../../sass/screen.scss */
+/* line 59, ../../sass/screen.scss */
 header nav ul {
   display: inline-flex;
 }
-/* line 44, ../../sass/screen.scss */
+/* line 62, ../../sass/screen.scss */
 header nav ul li {
   display: inline-table;
 }
-/* line 47, ../../sass/screen.scss */
+/* line 65, ../../sass/screen.scss */
 header nav ul li a {
   text-align: center;
   display: table-cell;
   padding: 0 20px;
   height: 90px;
   vertical-align: middle;
+  color: #fff;
 }
-/* line 54, ../../sass/screen.scss */
+/* line 73, ../../sass/screen.scss */
 header nav ul li a:hover {
   background: #610022;
 }
-/* line 61, ../../sass/screen.scss */
+/* line 80, ../../sass/screen.scss */
 header a {
   color: #fff;
   text-decoration: none;
 }
-/* line 66, ../../sass/screen.scss */
+/* line 85, ../../sass/screen.scss */
 header h1 {
   padding: 15px;
+  word-wrap: none;
 }
 
-/* line 75, ../../sass/screen.scss */
+/* line 95, ../../sass/screen.scss */
 .content {
   background: #efefef;
   max-width: 900px;
   padding: 30px;
   margin: 15px auto;
 }
-/* line 81, ../../sass/screen.scss */
+/* line 101, ../../sass/screen.scss */
 .content p {
   margin: 0.5em 0;
 }
 
-/* line 89, ../../sass/screen.scss */
+/* line 109, ../../sass/screen.scss */
 .homeh1 {
   display: flex;
   justify-content: space-between;
@@ -155,7 +175,181 @@ header h1 {
   border-bottom: 3px solid #000;
   margin-bottom: 15px;
 }
-/* line 98, ../../sass/screen.scss */
+/* line 118, ../../sass/screen.scss */
 .homeh1 > * {
   display: inline-block;
 }
+
+/* line 128, ../../sass/screen.scss */
+.stagelist li {
+  display: table;
+  width: 100%;
+  background: #fff;
+  margin: 12px;
+}
+/* line 135, ../../sass/screen.scss */
+.stagelist li > *, .stagelist li:before {
+  display: table-cell;
+  vertical-align: middle;
+  padding: 15px;
+}
+/* line 140, ../../sass/screen.scss */
+.stagelist li a {
+  width: auto;
+}
+/* line 142, ../../sass/screen.scss */
+.stagelist li a:hover {
+  background: #ccc;
+}
+/* line 146, ../../sass/screen.scss */
+.stagelist li:before {
+  content: "&nbsp";
+  text-align: right;
+  width: 150px;
+  opacity: 0.8;
+  color: #fff;
+}
+/* line 153, ../../sass/screen.scss */
+.stagelist li.stage-brouillon:before {
+  content: "Brouillon";
+  background: #C21B26;
+}
+/* line 157, ../../sass/screen.scss */
+.stagelist li.stage-publie:before {
+  content: "Publié";
+  background: #27E35F;
+}
+/* line 161, ../../sass/screen.scss */
+.stagelist li.stage-ajout:before {
+  content: "+";
+  color: #000;
+}
+
+/* line 170, ../../sass/screen.scss */
+article.stage {
+  font-weight: normal;
+}
+/* line 173, ../../sass/screen.scss */
+article.stage h2 {
+  background: #d8d864;
+  padding: 10px 20px;
+  margin: -20px;
+  margin-bottom: 25px;
+  text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3);
+}
+/* line 180, ../../sass/screen.scss */
+article.stage h3 {
+  background: #56917c;
+  margin-left: -25px;
+  margin-top: 30px;
+  padding: 5px;
+  padding-left: 20px;
+  color: #fff;
+  text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.3);
+}
+/* line 190, ../../sass/screen.scss */
+article.stage section {
+  background: #eee;
+  padding: 14px;
+  max-width: 600px;
+  margin: 30px auto;
+}
+/* line 197, ../../sass/screen.scss */
+article.stage section.misc ul.infos {
+  margin: 0 -3px;
+}
+/* line 200, ../../sass/screen.scss */
+article.stage section.misc ul.infos li {
+  display: inline-block;
+  padding: 5px;
+  margin: 3px;
+  font-weight: normal;
+  color: #fff;
+  font-size: 0.9em;
+  border-radius: 4px;
+}
+/* line 209, ../../sass/screen.scss */
+article.stage section.misc ul.infos li.thematique {
+  background-color: #28BF8A;
+}
+/* line 212, ../../sass/screen.scss */
+article.stage section.misc ul.infos li.matiere {
+  background-color: #E80051;
+}
+/* line 219, ../../sass/screen.scss */
+article.stage section .chapo, article.stage section .avis-texte {
+  margin-bottom: 15px;
+  background: #fff;
+  padding: 20px;
+}
+/* line 224, ../../sass/screen.scss */
+article.stage section .chapo {
+  font-size: 1.1em;
+  font-weight: 500;
+  font-variant: small-caps;
+}
+/* line 229, ../../sass/screen.scss */
+article.stage section .avis-texte {
+  border-left: 1px solid #ccc;
+  padding-left: 15px;
+}
+/* line 234, ../../sass/screen.scss */
+article.stage section .plusmoins {
+  max-width: 600px;
+  margin: 15px auto;
+}
+/* line 238, ../../sass/screen.scss */
+article.stage section .plusmoins > div {
+  display: table;
+  width: 100%;
+}
+/* line 242, ../../sass/screen.scss */
+article.stage section .plusmoins > div:before {
+  content: "&nbsp";
+  width: 100px;
+  font-size: 1.8em;
+  font-weight: bold;
+  text-align: right;
+  padding-right: 12px;
+}
+/* line 251, ../../sass/screen.scss */
+article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before {
+  display: table-cell;
+}
+/* line 255, ../../sass/screen.scss */
+article.stage section .plusmoins > div > div {
+  padding: 15px;
+  color: #fff;
+}
+/* line 258, ../../sass/screen.scss */
+article.stage section .plusmoins > div > div h4 {
+  font-weight: normal;
+  margin-left: -5px;
+  font-size: 0.9em;
+  opacity: 0.9;
+}
+/* line 264, ../../sass/screen.scss */
+article.stage section .plusmoins > div > div p {
+  font-weight: bold;
+  margin: 2px;
+}
+/* line 272, ../../sass/screen.scss */
+article.stage section .plusmoins .plus > div {
+  background: #23cc56;
+}
+/* line 275, ../../sass/screen.scss */
+article.stage section .plusmoins .plus:before {
+  content: "Les +";
+  vertical-align: bottom;
+  color: #1b9f43;
+}
+/* line 282, ../../sass/screen.scss */
+article.stage section .plusmoins .moins > div {
+  background: #af1822;
+}
+/* line 285, ../../sass/screen.scss */
+article.stage section .plusmoins .moins:before {
+  content: "Les -";
+  vertical-align: top;
+  color: #88131b;
+}
diff --git a/avisstage/templates/avisstage/detail/avis.html b/avisstage/templates/avisstage/detail/avis.html
index d3deeba..f07d719 100644
--- a/avisstage/templates/avisstage/detail/avis.html
+++ b/avisstage/templates/avisstage/detail/avis.html
@@ -1,6 +1,6 @@
 
 <section class="avis">
-    <h1>{{ titre }}</h1> 
+    <h2>{{ titre }}</h2> 
     {% if avis.chapo %}
         <p class="chapo">
             {{ avis.chapo }}
@@ -8,9 +8,9 @@
     {% endif %}
     {% for av in avis.avis_all %}
         {% if av.1 %} 
-            <div class="avis_item">
-                <h2>{{ av.0 }}</h2>
-                <div class="avis_texte">
+            <div class="avis-item">
+                <h3>{{ av.0 }}</h3>
+                <div class="avis-texte">
                     {{ av.1|safe }}
                 </div>
             </div>
@@ -19,14 +19,18 @@
     <div class="plusmoins">
         {% if avis.les_plus %}
             <div class="plus">
-                <h3>Super si vous aimez...</h3>
-                <p>{{ avis.les_plus }}</p>
+                <div>
+                    <h4>Super si vous aimez...</h4>
+                    <p>{{ avis.les_plus }}</p>
+                </div>
             </div>
         {% endif %}
         {% if avis.les_moins %}
             <div class="moins">
-                <h3>Pas génial pour...</h3>
-                <p>{{ avis.les_moins }}</p>
+                <div>
+                    <h4>Pas génial pour...</h4>
+                    <p>{{ avis.les_moins }}</p>
+                </div>
             </div>
         {% endif %}
     </div>
diff --git a/avisstage/templates/avisstage/detail/stage.html b/avisstage/templates/avisstage/detail/stage.html
index 44e0260..cbdc14b 100644
--- a/avisstage/templates/avisstage/detail/stage.html
+++ b/avisstage/templates/avisstage/detail/stage.html
@@ -8,7 +8,7 @@
     {% endif %}
     <article class="stage">
         <section class="misc">
-            <h2>À propos du stage</h2>
+            <h3>À propos du stage</h3>
             <p>{{ object.auteur.nom }} a fait ce stage du {{ object.date_debut }} au {{ object.date_fin }}, supervisé par {{ object.encadrants }}</p>
             <ul class="infos">
                 {% for matiere in object.matieres.all %}