From 02551583520635866094ae2ef67aaa1bf45663e0 Mon Sep 17 00:00:00 2001
From: Evarin <champrobin@hotmail.com>
Date: Tue, 16 May 2017 23:37:10 +0200
Subject: [PATCH] Plus lisible

---
 avisstage/models.py                           |  11 +-
 avisstage/sass/_definitions.scss              |   3 +-
 avisstage/sass/screen.scss                    | 274 ++++++---
 avisstage/static/css/screen.css               | 521 +++++++++++-------
 avisstage/statics.py                          |  12 +
 .../templates/avisstage/detail/profil.html    |   7 +-
 .../templates/avisstage/detail/stage.html     | 106 ++--
 .../templates/avisstage/liste/stage.html      |   7 +-
 8 files changed, 604 insertions(+), 337 deletions(-)

diff --git a/avisstage/models.py b/avisstage/models.py
index 96f5129..c17a893 100644
--- a/avisstage/models.py
+++ b/avisstage/models.py
@@ -15,7 +15,7 @@ from taggit_autosuggest.managers import TaggableManager
 from tinymce.models import HTMLField as RichTextField
 
 from .utils import choices_length
-from .statics import DEPARTEMENTS_DEFAUT, PAYS_OPTIONS, TYPE_LIEU_OPTIONS, TYPE_STAGE_OPTIONS, TYPE_LIEU_DICT, TYPE_STAGE_DICT, NIVEAU_SCOL_OPTIONS
+from .statics import DEPARTEMENTS_DEFAUT, PAYS_OPTIONS, TYPE_LIEU_OPTIONS, TYPE_STAGE_OPTIONS, TYPE_LIEU_DICT, TYPE_STAGE_DICT, NIVEAU_SCOL_OPTIONS, NIVEAU_SCOL_DICT
 
 import ldap
 
@@ -125,10 +125,11 @@ class Lieu(models.Model):
     @property
     def type_lieu_fancy(self):
         return TYPE_LIEU_DICT.get(self.type_lieu, ("lieu", False))[0]
+
     @property
     def type_lieu_fem(self):
         return TYPE_LIEU_DICT.get(self.type_lieu, ("lieu", False))[1]
-    
+
     def __unicode__(self):
         return u"%s (%s)" % (self.nom, self.ville)
     
@@ -207,7 +208,13 @@ class Stage(models.Model):
     @property
     def type_stage_fem(self):
         return TYPE_STAGE_DICT.get(self.type_stage, ("stage", False))[1]
+
+    # Niveau scolaire en plus joli
+    @property
+    def niveau_scol_fancy(self):
+        return NIVEAU_SCOL_DICT.get(self.niveau_scol, "")
     
+
     def get_absolute_url(self):
         return reverse('avisstage:stage', self)
     
diff --git a/avisstage/sass/_definitions.scss b/avisstage/sass/_definitions.scss
index b7154da..7eb379c 100644
--- a/avisstage/sass/_definitions.scss
+++ b/avisstage/sass/_definitions.scss
@@ -10,4 +10,5 @@ $rouge: #f70978;
 
 $textfont: 'Dosis', sans-serif;
 $textfontsize: 19px;
-$headfont: Podkova, serif;
+$paragraphfont: 'Lato', sans-serif;
+$headfont: Alegreya, serif;
diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss
index 028efba..a116b2e 100644
--- a/avisstage/sass/screen.scss
+++ b/avisstage/sass/screen.scss
@@ -1,6 +1,6 @@
 @import "compass/reset";
 @import "_definitions.scss";
-@import url('https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700');
+@import url('https://fonts.googleapis.com/css?family=Dosis:300,500,700|Alegreya:700|Lato:300,300i,700');
 
 // Général
 
@@ -19,6 +19,7 @@ body {
 h1, h2, h3, h4 {
     font-family: $headfont;
     line-height: 1.2;
+    font-weight: bold;
 }
 
 h1 {
@@ -190,7 +191,7 @@ header {
     li {
         display: block;
         &.date-maj {
-            font-weight: bold;
+            font-weight: 300;
             font-size: 0.9em;
             padding: 3px 0;
         }
@@ -201,42 +202,64 @@ header {
 
             h3 {
                 font-size: 1.4em;
+                padding-left: 5px;
+
+                & > a {
+                    color: darken($vert, 20);
+                }
 
                 .auteur {
-                    font-family: $textfont;
-                    font-weight: bold;
                     font-size: 0.8em;
+
+                    &, a {
+                        font-family: $textfont;
+                        font-weight: normal;
+                    }
                 }
             }
             ul.infos {
                 display:inline;
             }
         }
+        .misc-hdr {
+            margin-bottom: 10px;
+            
+            .dates {
+                & > span {
+                    display: table-cell;
+                    vertical-align: middle;
+                }
+                .year {
+                    padding-left: 8px;
+                }
+            }
+        }
     }
 }
 
 ul.infos {
     margin: 0 -3px;
+    padding: 0;
     
     li {
         display: inline-block;
         padding: 5px;
         margin: 3px;
-        font-weight: normal;
+        font-weight: bold;
         font-size: 0.9em;
         border-radius: 4px;
         
         &.thematique {
-            background-color: $vert;
-            color: #fff;
+            color: darken($vert, 20);
+            background-color: lighten($vert, 20);
         }
         &.matiere {
-            color: #fff;
-            background-color: $fond;
+            color: darken($fond, 20);
+            background-color: lighten($fond, 20);
         }
         &.lieu {
-            color: #fff;
-            background-color: $compl;
+            color: darken($rouge, 20);
+            background-color: lighten($rouge, 20);
         }
     }
 }
@@ -245,39 +268,44 @@ ul.infos {
 //
 // Détail d'un stage
 
+article.stage .avis, div.tinymce {
+    ul, ol {
+        list-style: unset;
+        padding-left: 20px;
+    }
+}
+
 article.stage {
     font-weight: normal;
+    font-family: $paragraphfont;
     
     h2 {
         background: desaturate(lighten($jaune, 15%), 40%);
         color: #000;
         padding: 10px 20px;
         margin: -20px;
-        margin-bottom: 25px;
+        margin-bottom: 5px;
         text-shadow: -3px 3px 0 rgba(#fff, 0.3);
     }
     h3 {
-        border-bottom: 2px solid desaturate($compl, 40%);
-        margin-left: -25px;
+        //border-bottom: 2px solid desaturate($compl, 40%);
         margin-top: 30px;
         padding: 5px;
-        padding-left: 20px;
-        color: #000;
-        text-shadow: -3px 3px 0 rgba(#000, 0.1);
+        padding-left: 0px;
+        color: darken($vert, 20);
+        text-shadow: -3px 3px 0 rgba($vert, 0.1);
         //margin-right: 25px;
     }
-
-     #stage-map {
-        height: 300px;
-        width: 100%;
-    }
     
     section {
-        background: #eee;
-        padding: 14px;
-        max-width: 600px;
-        margin: 30px auto;
 
+        &.avis section {
+            max-width: 700px;
+            background: #fff;
+            padding: 14px;
+            margin: 30px auto;
+        }
+        
         &:first-child {
             margin-top: 0;
             h3 {
@@ -285,28 +313,61 @@ article.stage {
             }
         }
         
+        #stage-map {
+            height: 300px;
+            width: 100%;
+        }
+        
         &.misc {
             padding-top: 0;
+            margin-bottom: 30px;
+
+            .misc-content {
+                &.withmap {
+                    display:table;
+                    width: 100%;
+                    
+                    & > div {
+                        display:table-cell;
+                        vertical-align: top;
+                    }
+                    .map {
+                        min-width: 250px;
+                        width: 30%;
+                        min-height: 300px;
+                    }
+                    .desc {
+                        padding: 5px;
+                        padding-left: 15px;
+                    }
+                }
+            }
         }
         
         .chapo, .avis-texte {
             margin-bottom: 15px;
             background: #fff;
-            padding: 20px;
-        }
-        .chapo {
-            font-size: 1.1em;
-            font-weight: 500;
-            font-variant: small-caps;
+            padding: 0 20px;
         }
         .avis-texte {
-            border-left: 1px solid #ccc;
+            font-size: $textfontsize - 1px;
+        }
+        
+        .chapo {
+            font-size: 1.1em;
+            font-family: $textfont;
+            font-weight: 500;
+            padding-left: 0px;
+        }
+        .avis-texte {
+            //border-left: 1px solid #ccc;
             padding-left: 15px;
         }
 
         .plusmoins {
             max-width: 600px;
             margin: 15px auto;
+            margin-top: 40px;
             
             & > div {
                 display: table;
@@ -314,7 +375,7 @@ article.stage {
                 
                 &:before {
                     content: "&nbsp";
-                    width: 100px;
+                    width: 90px;
                     font-size: 1.8em;
                     font-weight: bold;
                     text-align: right;
@@ -356,59 +417,103 @@ article.stage {
                     background: darken($rouge, 5%);
                 }
                 &:before {
-                    content: "Les -";
+                    content: "Les –";
                     vertical-align: top;
                     color: darken($rouge, 10%);
                 }
             }
         }
     }
-}
 
-// Sommaire sur le côté
+    // Sommaire sur le côté
 
-.article-wrapper {
-    display: table;
-    margin-left: -15px;
-    
-    .toc-wrapper, article {
-        display: table-cell;
-        vertical-align: top;
-    }
-    .toc-wrapper {
-        max-width: 250px;
-        width: 25%;
-        background: #f6f6f6;
-        padding: 5px;
-    }
-    .toc {
-        position: -webkit-sticky;
-        position: sticky;
-        top: 12px;
+    .section-wrapper {
+        display: table;
+        margin-left: -15px;
+        width: 100%;
         
-        a {
-            display: block;
-            color: inherit;
-            font-weight: normal;
-            border-radius: 7px;
-            padding: 7px;
-            line-height: 1;
+        .toc-wrapper, & > section {
+            display: table-cell;
+            vertical-align: top;
+        }
+        .toc-wrapper {
+            max-width: 230px;
+            width: 25%;
+            padding: 5px;
+            padding-right: 25px;
+        }
+        .toc {
+            font-family: $textfont;
+            position: -webkit-sticky;
+            position: sticky;
+            top: 12px;
+            margin-left: -40px;
+            background: #fff;
+            padding: 5px;
+            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
+
+            ul {
+                list-style: none;
+                padding: 0;
+            }
             
-            &:hover {
-                background-color: $fond;
+            a {
+                display: block;
+                color: inherit;
+                font-weight: normal;
+                border-radius: 7px;
+                padding: 5px;
+                line-height: 1;
+                
+                &:hover {
+                    color: $fond;
+                }
+            }
+            .toc-h1 a {
+                font-weight: 900;
+            }
+            .toc-h2 {
+                margin-top: 10px;
+                font-weight: 400;
+            }
+            .toc-h3 a {
+                font-weight: 300;
+            }
+            .toc-active a {
+                color: darken($vert, 20);
             }
         }
-        .toc-h1 a {
-            font-weight: 900;
+    }
+}
+
+.misc-hdr {
+    display:table;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+
+    & > * {
+        display: table-cell;
+        vertical-align: bottom;
+    }
+
+    h1 {
+        width: 100%;
+    }
+    .dates {
+        width: 50px;
+        background-color: darken($rouge, 20);
+        color: #fff;
+        padding: 3px 10px;
+        border-radius: 5px 5px 0 0; 
+        font-family: $textfont;
+        font-size: 0.8em;
+        text-align: center;
+
+        span {
+            display:block;
         }
-        .toc-h2 {
-            margin-top: 15px;
-        }
-        .toc-h3 a {
-            font-weight: 300;
-        }
-        .toc-active a {
-            background-color: lighten($fond, 30%);
+        .year {
+            font-size: 1.8em;
         }
     }
 }
@@ -520,6 +625,7 @@ h1 .btn {
 }
 
 textarea, div.tinymce {
+    font-family: $paragraphfont;
     border:none;
     border-left: 1px solid $fond;
     height: auto;
@@ -848,6 +954,7 @@ article.promo {
 
 // FAQ
 .faq-toc {
+    font-family: $paragraphfont;
     display: block;
     max-width: 700px;
     margin: 0 auto;
@@ -876,8 +983,8 @@ article.promo {
             }
 
             a:hover {
-                color: #fff;
-                background: $compl !important;
+                color: darken($fond, 30);
+                background: lighten($fond, 20) !important;
             }
         }
     }
@@ -888,14 +995,15 @@ article.promo {
         background: #fff;
         padding: 15px;
         h2 {
-            background: lighten($compl, 20%);
+            background-color: lighten($compl, 20%);
+            color: darken($compl, 20%);
             margin: -15px;
             padding: 15px;
         }
         
         h3 {
-            background: $vert;
-            color: #fff;
+            color: darken($vert, 20%);
+            background-color: lighten($vert, 30%);
             margin: 0 -15px;
             margin-top: 30px;
             padding: 10px 15px;
@@ -912,8 +1020,12 @@ article.promo {
             }
         }
 
-        p {
-
+        p, ul {
+            font-family: $paragraphfont;
+            font-size: $textfontsize - 1px;
+            max-width: 700px;
+            margin-left: auto;
+            margin-right: 5%;
         }
     }
 }
diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css
index 7170676..2a3932e 100644
--- a/avisstage/static/css/screen.css
+++ b/avisstage/static/css/screen.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css?family=Dosis:300,500,700|Podkova:700|Alegreya:700|Lato:300,300i,700");
+@import url("https://fonts.googleapis.com/css?family=Dosis:300,500,700|Alegreya:700|Lato:300,300i,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,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
@@ -83,42 +83,43 @@ body {
 h1, h2, h3, h4 {
   font-family: Alegreya, serif;
   line-height: 1.2;
+  font-weight: bold;
 }
 
-/* line 24, ../../sass/screen.scss */
+/* line 25, ../../sass/screen.scss */
 h1 {
   font-size: 2.3em;
   position: relative;
 }
 
-/* line 29, ../../sass/screen.scss */
+/* line 30, ../../sass/screen.scss */
 h2 {
   font-size: 1.8em;
 }
 
-/* line 33, ../../sass/screen.scss */
+/* line 34, ../../sass/screen.scss */
 h3 {
   font-size: 1.4em;
 }
 
-/* line 37, ../../sass/screen.scss */
+/* line 38, ../../sass/screen.scss */
 b, strong {
   font-weight: bold;
 }
 
-/* line 41, ../../sass/screen.scss */
+/* line 42, ../../sass/screen.scss */
 em, i {
   font-style: italic;
 }
 
-/* line 45, ../../sass/screen.scss */
+/* line 46, ../../sass/screen.scss */
 a {
   font-weight: bold;
   color: #e08c1d;
   text-decoration: none;
 }
 
-/* line 52, ../../sass/screen.scss */
+/* line 53, ../../sass/screen.scss */
 .beta {
   position: absolute;
   opacity: 0.5;
@@ -127,7 +128,7 @@ a {
   transform: translate(-1em, 1em) rotate(-15deg);
 }
 
-/* line 62, ../../sass/screen.scss */
+/* line 63, ../../sass/screen.scss */
 #feedback-button {
   position: fixed;
   left: 0;
@@ -140,35 +141,35 @@ a {
   transform-origin: bottom left;
 }
 
-/* line 76, ../../sass/screen.scss */
+/* line 77, ../../sass/screen.scss */
 .leaflet-container {
   z-index: 1;
 }
 
-/* line 81, ../../sass/screen.scss */
+/* line 82, ../../sass/screen.scss */
 header {
   background: #72a329;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-/* line 87, ../../sass/screen.scss */
+/* line 88, ../../sass/screen.scss */
 header #showmenu {
   display: none;
 }
-/* line 91, ../../sass/screen.scss */
+/* line 92, ../../sass/screen.scss */
 header nav {
   display: inline;
 }
-/* line 93, ../../sass/screen.scss */
+/* line 94, ../../sass/screen.scss */
 header nav ul {
   display: inline-flex;
 }
-/* line 96, ../../sass/screen.scss */
+/* line 97, ../../sass/screen.scss */
 header nav ul li {
   display: inline-table;
 }
-/* line 99, ../../sass/screen.scss */
+/* line 100, ../../sass/screen.scss */
 header nav ul li a {
   text-align: center;
   display: table-cell;
@@ -177,23 +178,23 @@ header nav ul li a {
   vertical-align: middle;
   color: #e9f5d6;
 }
-/* line 107, ../../sass/screen.scss */
+/* line 108, ../../sass/screen.scss */
 header nav ul li a:hover {
   background: #446219;
 }
-/* line 115, ../../sass/screen.scss */
+/* line 116, ../../sass/screen.scss */
 header a {
   color: #fff;
   text-decoration: none;
 }
-/* line 120, ../../sass/screen.scss */
+/* line 121, ../../sass/screen.scss */
 header h1 {
   padding: 15px;
   word-wrap: none;
   display: inline-block;
 }
 
-/* line 129, ../../sass/screen.scss */
+/* line 130, ../../sass/screen.scss */
 .content {
   background: #efefef;
   width: 900px;
@@ -201,38 +202,38 @@ header h1 {
   padding: 30px;
   margin: 15px auto;
 }
-/* line 136, ../../sass/screen.scss */
+/* line 137, ../../sass/screen.scss */
 .content p {
   margin: 0.5em 0;
 }
-/* line 140, ../../sass/screen.scss */
+/* line 141, ../../sass/screen.scss */
 .content h1 {
   margin-bottom: 0.6em;
 }
 
-/* line 148, ../../sass/screen.scss */
+/* line 149, ../../sass/screen.scss */
 .condensed-stages li {
   display: table;
   width: 100%;
   background: #fff;
   margin: 12px;
 }
-/* line 155, ../../sass/screen.scss */
+/* line 156, ../../sass/screen.scss */
 .condensed-stages li > *, .condensed-stages li:before {
   display: table-cell;
   vertical-align: middle;
   padding: 15px;
 }
-/* line 160, ../../sass/screen.scss */
+/* line 161, ../../sass/screen.scss */
 .condensed-stages li a {
   width: auto;
 }
-/* line 162, ../../sass/screen.scss */
+/* line 163, ../../sass/screen.scss */
 .condensed-stages li a:hover {
   background: #e08206;
   color: #fff;
 }
-/* line 167, ../../sass/screen.scss */
+/* line 168, ../../sass/screen.scss */
 .condensed-stages li:before {
   content: "";
   text-align: right;
@@ -240,280 +241,379 @@ header h1 {
   opacity: 0.8;
   color: #000;
 }
-/* line 174, ../../sass/screen.scss */
+/* line 175, ../../sass/screen.scss */
 .condensed-stages li.stage-brouillon:before {
   content: "Brouillon";
   background: #f93a93;
 }
-/* line 178, ../../sass/screen.scss */
+/* line 179, ../../sass/screen.scss */
 .condensed-stages li.stage-publie:before {
   content: "Publié";
   background: #419be9;
 }
-/* line 182, ../../sass/screen.scss */
+/* line 183, ../../sass/screen.scss */
 .condensed-stages li.stage-ajout:before {
   content: "+";
   color: #000;
 }
 
-/* line 190, ../../sass/screen.scss */
+/* line 191, ../../sass/screen.scss */
 .stage-liste li {
   display: block;
 }
-/* line 192, ../../sass/screen.scss */
+/* line 193, ../../sass/screen.scss */
 .stage-liste li.date-maj {
-  font-weight: bold;
+  font-weight: 300;
   font-size: 0.9em;
   padding: 3px 0;
 }
-/* line 197, ../../sass/screen.scss */
+/* line 198, ../../sass/screen.scss */
 .stage-liste li.stage {
   padding: 10px;
   background: #fff;
   margin: 10px;
 }
-/* line 202, ../../sass/screen.scss */
+/* line 203, ../../sass/screen.scss */
 .stage-liste li.stage h3 {
   font-size: 1.4em;
+  padding-left: 5px;
 }
-/* line 205, ../../sass/screen.scss */
-.stage-liste li.stage h3 .auteur {
-  font-family: "Dosis", sans-serif;
-  font-weight: bold;
-  font-size: 0.8em;
+/* line 207, ../../sass/screen.scss */
+.stage-liste li.stage h3 > a {
+  color: #0f4c82;
 }
 /* line 211, ../../sass/screen.scss */
+.stage-liste li.stage h3 .auteur {
+  font-size: 0.8em;
+}
+/* line 214, ../../sass/screen.scss */
+.stage-liste li.stage h3 .auteur, .stage-liste li.stage h3 .auteur a {
+  font-family: "Dosis", sans-serif;
+  font-weight: normal;
+}
+/* line 220, ../../sass/screen.scss */
 .stage-liste li.stage ul.infos {
   display: inline;
 }
+/* line 224, ../../sass/screen.scss */
+.stage-liste li .misc-hdr {
+  margin-bottom: 10px;
+}
+/* line 228, ../../sass/screen.scss */
+.stage-liste li .misc-hdr .dates > span {
+  display: table-cell;
+  vertical-align: middle;
+}
+/* line 232, ../../sass/screen.scss */
+.stage-liste li .misc-hdr .dates .year {
+  padding-left: 8px;
+}
 
-/* line 218, ../../sass/screen.scss */
+/* line 240, ../../sass/screen.scss */
 ul.infos {
   margin: 0 -3px;
+  padding: 0;
 }
-/* line 221, ../../sass/screen.scss */
+/* line 244, ../../sass/screen.scss */
 ul.infos li {
   display: inline-block;
   padding: 5px;
   margin: 3px;
-  font-weight: normal;
+  font-weight: bold;
   font-size: 0.9em;
   border-radius: 4px;
 }
-/* line 229, ../../sass/screen.scss */
+/* line 252, ../../sass/screen.scss */
 ul.infos li.thematique {
-  background-color: #1a82dd;
-  color: #fff;
+  color: #0f4c82;
+  background-color: #6fb3ee;
 }
-/* line 233, ../../sass/screen.scss */
+/* line 256, ../../sass/screen.scss */
 ul.infos li.matiere {
-  color: #fff;
-  background-color: #8fcc33;
+  color: #567a1f;
+  background-color: #bce085;
 }
-/* line 237, ../../sass/screen.scss */
+/* line 260, ../../sass/screen.scss */
 ul.infos li.lieu {
-  color: #fff;
-  background-color: #f99b20;
+  color: #950548;
+  background-color: #fa6cae;
 }
 
-/* line 248, ../../sass/screen.scss */
+/* line 272, ../../sass/screen.scss */
+article.stage .avis ul, article.stage .avis ol, div.tinymce ul, div.tinymce ol {
+  list-style: unset;
+  padding-left: 20px;
+}
+
+/* line 278, ../../sass/screen.scss */
 article.stage {
   font-weight: normal;
   font-family: "Lato", sans-serif;
 }
-/* line 252, ../../sass/screen.scss */
+/* line 282, ../../sass/screen.scss */
 article.stage h2 {
   background: #ddda78;
   color: #000;
   padding: 10px 20px;
   margin: -20px;
-  margin-bottom: 25px;
+  margin-bottom: 5px;
   text-shadow: -3px 3px 0 rgba(255, 255, 255, 0.3);
 }
-/* line 260, ../../sass/screen.scss */
+/* line 290, ../../sass/screen.scss */
 article.stage h3 {
-  border-bottom: 2px solid #cb954e;
-  margin-left: -25px;
   margin-top: 30px;
   padding: 5px;
-  padding-left: 20px;
-  color: #000;
-  text-shadow: -3px 3px 0 rgba(0, 0, 0, 0.1);
+  padding-left: 0px;
+  color: #0f4c82;
+  text-shadow: -3px 3px 0 rgba(26, 130, 221, 0.1);
 }
-/* line 271, ../../sass/screen.scss */
-article.stage #stage-map {
-  height: 300px;
-  width: 100%;
-}
-/* line 276, ../../sass/screen.scss */
-article.stage section {
-  background: #eee;
+/* line 302, ../../sass/screen.scss */
+article.stage section.avis section {
+  max-width: 700px;
+  background: #fff;
   padding: 14px;
-  max-width: 600px;
   margin: 30px auto;
 }
-/* line 282, ../../sass/screen.scss */
+/* line 309, ../../sass/screen.scss */
 article.stage section:first-child {
   margin-top: 0;
 }
-/* line 284, ../../sass/screen.scss */
+/* line 311, ../../sass/screen.scss */
 article.stage section:first-child h3 {
   margin-top: 0;
 }
-/* line 289, ../../sass/screen.scss */
+/* line 316, ../../sass/screen.scss */
+article.stage section #stage-map {
+  height: 300px;
+  width: 100%;
+}
+/* line 321, ../../sass/screen.scss */
 article.stage section.misc {
   padding-top: 0;
+  margin-bottom: 30px;
 }
-/* line 293, ../../sass/screen.scss */
+/* line 326, ../../sass/screen.scss */
+article.stage section.misc .misc-content.withmap {
+  display: table;
+  width: 100%;
+}
+/* line 330, ../../sass/screen.scss */
+article.stage section.misc .misc-content.withmap > div {
+  display: table-cell;
+  vertical-align: top;
+}
+/* line 334, ../../sass/screen.scss */
+article.stage section.misc .misc-content.withmap .map {
+  min-width: 250px;
+  width: 30%;
+  min-height: 300px;
+}
+/* line 339, ../../sass/screen.scss */
+article.stage section.misc .misc-content.withmap .desc {
+  padding: 5px;
+  padding-left: 15px;
+}
+/* line 347, ../../sass/screen.scss */
 article.stage section .chapo, article.stage section .avis-texte {
   margin-bottom: 15px;
   background: #fff;
-  padding: 20px;
+  padding: 0 20px;
 }
-/* line 298, ../../sass/screen.scss */
+/* line 352, ../../sass/screen.scss */
+article.stage section .avis-texte {
+  font-size: 18px;
+}
+/* line 356, ../../sass/screen.scss */
 article.stage section .chapo {
   font-size: 1.1em;
+  font-family: "Dosis", sans-serif;
   font-weight: 500;
-  font-variant: small-caps;
+  padding-left: 0px;
 }
-/* line 303, ../../sass/screen.scss */
+/* line 362, ../../sass/screen.scss */
 article.stage section .avis-texte {
-  border-left: 1px solid #ccc;
   padding-left: 15px;
 }
-/* line 308, ../../sass/screen.scss */
+/* line 367, ../../sass/screen.scss */
 article.stage section .plusmoins {
   max-width: 600px;
   margin: 15px auto;
+  margin-top: 40px;
 }
-/* line 312, ../../sass/screen.scss */
+/* line 372, ../../sass/screen.scss */
 article.stage section .plusmoins > div {
   display: table;
   width: 100%;
 }
-/* line 316, ../../sass/screen.scss */
+/* line 376, ../../sass/screen.scss */
 article.stage section .plusmoins > div:before {
   content: "&nbsp";
-  width: 100px;
+  width: 90px;
   font-size: 1.8em;
   font-weight: bold;
   text-align: right;
   padding-right: 12px;
 }
-/* line 325, ../../sass/screen.scss */
+/* line 385, ../../sass/screen.scss */
 article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before {
   display: table-cell;
 }
-/* line 329, ../../sass/screen.scss */
+/* line 389, ../../sass/screen.scss */
 article.stage section .plusmoins > div > div {
   padding: 15px;
   color: #fff;
 }
-/* line 332, ../../sass/screen.scss */
+/* line 392, ../../sass/screen.scss */
 article.stage section .plusmoins > div > div h4 {
   font-weight: normal;
   margin-left: -5px;
   font-size: 0.9em;
   opacity: 0.9;
 }
-/* line 338, ../../sass/screen.scss */
+/* line 398, ../../sass/screen.scss */
 article.stage section .plusmoins > div > div p {
   font-weight: bold;
   margin: 2px;
 }
-/* line 346, ../../sass/screen.scss */
+/* line 406, ../../sass/screen.scss */
 article.stage section .plusmoins .plus > div {
   background: #1775c6;
 }
-/* line 349, ../../sass/screen.scss */
+/* line 409, ../../sass/screen.scss */
 article.stage section .plusmoins .plus:before {
   content: "Les +";
   vertical-align: bottom;
   color: #1567af;
 }
-/* line 356, ../../sass/screen.scss */
+/* line 416, ../../sass/screen.scss */
 article.stage section .plusmoins .moins > div {
   background: #df076c;
 }
-/* line 359, ../../sass/screen.scss */
+/* line 419, ../../sass/screen.scss */
 article.stage section .plusmoins .moins:before {
-  content: "Les -";
+  content: "Les –";
   vertical-align: top;
   color: #c70660;
 }
-
-/* line 371, ../../sass/screen.scss */
-.article-wrapper {
+/* line 430, ../../sass/screen.scss */
+article.stage .section-wrapper {
   display: table;
   margin-left: -15px;
+  width: 100%;
 }
-/* line 375, ../../sass/screen.scss */
-.article-wrapper .toc-wrapper, .article-wrapper article {
+/* line 435, ../../sass/screen.scss */
+article.stage .section-wrapper .toc-wrapper, article.stage .section-wrapper > section {
   display: table-cell;
   vertical-align: top;
 }
-/* line 379, ../../sass/screen.scss */
-.article-wrapper .toc-wrapper {
-  max-width: 250px;
+/* line 439, ../../sass/screen.scss */
+article.stage .section-wrapper .toc-wrapper {
+  max-width: 230px;
   width: 25%;
-  background: #f6f6f6;
   padding: 5px;
+  padding-right: 25px;
 }
-/* line 385, ../../sass/screen.scss */
-.article-wrapper .toc {
+/* line 445, ../../sass/screen.scss */
+article.stage .section-wrapper .toc {
+  font-family: "Dosis", sans-serif;
   position: -webkit-sticky;
   position: sticky;
   top: 12px;
+  margin-left: -40px;
+  background: #fff;
+  padding: 5px;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
 }
-/* line 390, ../../sass/screen.scss */
-.article-wrapper .toc a {
+/* line 455, ../../sass/screen.scss */
+article.stage .section-wrapper .toc ul {
+  list-style: none;
+  padding: 0;
+}
+/* line 460, ../../sass/screen.scss */
+article.stage .section-wrapper .toc a {
   display: block;
   color: inherit;
   font-weight: normal;
   border-radius: 7px;
-  padding: 7px;
+  padding: 5px;
   line-height: 1;
 }
-/* line 398, ../../sass/screen.scss */
-.article-wrapper .toc a:hover {
-  background-color: #8fcc33;
+/* line 468, ../../sass/screen.scss */
+article.stage .section-wrapper .toc a:hover {
+  color: #8fcc33;
 }
-/* line 402, ../../sass/screen.scss */
-.article-wrapper .toc .toc-h1 a {
+/* line 472, ../../sass/screen.scss */
+article.stage .section-wrapper .toc .toc-h1 a {
   font-weight: 900;
 }
-/* line 405, ../../sass/screen.scss */
-.article-wrapper .toc .toc-h2 {
-  margin-top: 15px;
+/* line 475, ../../sass/screen.scss */
+article.stage .section-wrapper .toc .toc-h2 {
+  margin-top: 10px;
+  font-weight: 400;
 }
-/* line 408, ../../sass/screen.scss */
-.article-wrapper .toc .toc-h3 a {
+/* line 479, ../../sass/screen.scss */
+article.stage .section-wrapper .toc .toc-h3 a {
   font-weight: 300;
 }
-/* line 411, ../../sass/screen.scss */
-.article-wrapper .toc .toc-active a {
-  background-color: #d2ebad;
+/* line 482, ../../sass/screen.scss */
+article.stage .section-wrapper .toc .toc-active a {
+  color: #0f4c82;
 }
 
-/* line 419, ../../sass/screen.scss */
+/* line 489, ../../sass/screen.scss */
+.misc-hdr {
+  display: table;
+  width: 100%;
+  border-bottom: 1px solid #ccc;
+}
+/* line 494, ../../sass/screen.scss */
+.misc-hdr > * {
+  display: table-cell;
+  vertical-align: bottom;
+}
+/* line 499, ../../sass/screen.scss */
+.misc-hdr h1 {
+  width: 100%;
+}
+/* line 502, ../../sass/screen.scss */
+.misc-hdr .dates {
+  width: 50px;
+  background-color: #950548;
+  color: #fff;
+  padding: 3px 10px;
+  border-radius: 5px 5px 0 0;
+  font-family: "Dosis", sans-serif;
+  font-size: 0.8em;
+  text-align: center;
+}
+/* line 512, ../../sass/screen.scss */
+.misc-hdr .dates span {
+  display: block;
+}
+/* line 515, ../../sass/screen.scss */
+.misc-hdr .dates .year {
+  font-size: 1.8em;
+}
+
+/* line 523, ../../sass/screen.scss */
 .edit-box {
   background: #eee;
   margin: 10px;
   padding: 10px 20px;
   text-align: center;
 }
-/* line 425, ../../sass/screen.scss */
+/* line 529, ../../sass/screen.scss */
 .edit-box.public {
   background: #cae3f9;
   border: 1px solid #125b9b;
 }
-/* line 430, ../../sass/screen.scss */
+/* line 534, ../../sass/screen.scss */
 .edit-box.prive {
   background: #fdcfe4;
   border: 1px solid #ad0654;
 }
 
-/* line 443, ../../sass/screen.scss */
+/* line 547, ../../sass/screen.scss */
 input, textarea, select, div.tinymce, option, optgroup:before {
   background: #fff;
   font-size: 1em;
@@ -523,13 +623,13 @@ input, textarea, select, div.tinymce, option, optgroup:before {
   padding: 5px;
   text-align: left;
 }
-/* line 452, ../../sass/screen.scss */
+/* line 556, ../../sass/screen.scss */
 input:focus, input.mce-edit-focus, textarea:focus, textarea.mce-edit-focus, select:focus, select.mce-edit-focus, div.tinymce:focus, div.tinymce.mce-edit-focus, option:focus, option.mce-edit-focus, optgroup:before:focus, optgroup:before.mce-edit-focus {
   background-color: #e9f5d6;
   outline: none;
 }
 
-/* line 459, ../../sass/screen.scss */
+/* line 563, ../../sass/screen.scss */
 input[type='text'], input[type='password'],
 input[type='email'], textarea, select {
   border: none;
@@ -539,7 +639,7 @@ input[type='email'], textarea, select {
   transition: border 1s ease-out, background 1s ease-out;
 }
 
-/* line 468, ../../sass/screen.scss */
+/* line 572, ../../sass/screen.scss */
 select {
   -moz-appearance: none;
   appearance: none;
@@ -547,21 +647,21 @@ select {
   margin-right: 5px;
   cursor: pointer;
 }
-/* line 475, ../../sass/screen.scss */
+/* line 579, ../../sass/screen.scss */
 select option {
   padding: 3px;
   white-space: pre-wrap;
 }
-/* line 481, ../../sass/screen.scss */
+/* line 585, ../../sass/screen.scss */
 select optgroup option {
   padding-left: 10px;
 }
-/* line 484, ../../sass/screen.scss */
+/* line 588, ../../sass/screen.scss */
 select optgroup:before {
   font-weight: bold;
 }
 
-/* line 490, ../../sass/screen.scss */
+/* line 594, ../../sass/screen.scss */
 input[type="submit"], .btn {
   font: 19px "Dosis", sans-serif;
   background-color: #8fcc33;
@@ -574,14 +674,14 @@ input[type="submit"], .btn {
   margin-right: 0;
 }
 
-/* line 502, ../../sass/screen.scss */
+/* line 606, ../../sass/screen.scss */
 p input[type="submit"],
 p .btn,
 h1 .btn {
   display: inline-block;
 }
 
-/* line 508, ../../sass/screen.scss */
+/* line 612, ../../sass/screen.scss */
 .edit-btn {
   border-color: #706c00;
   color: #000;
@@ -590,15 +690,16 @@ h1 .btn {
   background-origin: content-box;
   background-size: contain;
 }
-/* line 516, ../../sass/screen.scss */
+/* line 620, ../../sass/screen.scss */
 .edit-btn:after {
   content: "";
   width: 30px;
   display: inline-block;
 }
 
-/* line 523, ../../sass/screen.scss */
+/* line 627, ../../sass/screen.scss */
 textarea, div.tinymce {
+  font-family: "Lato", sans-serif;
   border: none;
   border-left: 1px solid #8fcc33;
   height: auto;
@@ -606,20 +707,20 @@ textarea, div.tinymce {
   transition: border 1s ease-out, background 1s ease-out;
 }
 
-/* line 531, ../../sass/screen.scss */
+/* line 636, ../../sass/screen.scss */
 textarea {
   height: 200px;
   resize: vertical;
 }
 
-/* line 539, ../../sass/screen.scss */
+/* line 644, ../../sass/screen.scss */
 form .field {
   margin: 5px 0;
   display: flex;
   background: #fff;
   padding: 10px;
 }
-/* line 545, ../../sass/screen.scss */
+/* line 650, ../../sass/screen.scss */
 form .field label, form .field .label {
   display: inline-block;
   width: 250px;
@@ -628,39 +729,39 @@ form .field label, form .field .label {
   padding-top: 5px;
   flex-shrink: 0;
 }
-/* line 553, ../../sass/screen.scss */
+/* line 658, ../../sass/screen.scss */
 form .field label.required:before, form .field .label.required:before {
   margin-right: 5px;
   content: "*";
   color: #f70978;
 }
-/* line 559, ../../sass/screen.scss */
+/* line 664, ../../sass/screen.scss */
 form .field label {
   font-family: Alegreya, serif;
   font-weight: bold;
 }
-/* line 563, ../../sass/screen.scss */
+/* line 668, ../../sass/screen.scss */
 form .field .help_text {
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 567, ../../sass/screen.scss */
+/* line 672, ../../sass/screen.scss */
 form .field .input {
   display: inline-block;
   flex-grow: 1;
   margin-right: 10px;
 }
 
-/* line 577, ../../sass/screen.scss */
+/* line 682, ../../sass/screen.scss */
 ul.as-selections {
   display: flex;
   flex-wrap: wrap;
 }
-/* line 581, ../../sass/screen.scss */
+/* line 686, ../../sass/screen.scss */
 ul.as-selections li {
   display: inline-block;
 }
-/* line 585, ../../sass/screen.scss */
+/* line 690, ../../sass/screen.scss */
 ul.as-selections .as-selection-item {
   padding: 0 5px;
   background: #f99b20;
@@ -669,52 +770,52 @@ ul.as-selections .as-selection-item {
   border-radius: 2px;
   font-weight: 500;
 }
-/* line 593, ../../sass/screen.scss */
+/* line 698, ../../sass/screen.scss */
 ul.as-selections .as-selection-item a.as-close {
   color: #fff;
   -webkit-cursor: pointer;
   cursor: pointer;
   margin-right: 5px;
 }
-/* line 600, ../../sass/screen.scss */
+/* line 705, ../../sass/screen.scss */
 ul.as-selections .as-selection-item.selected {
   background: #8fcc33;
 }
-/* line 605, ../../sass/screen.scss */
+/* line 710, ../../sass/screen.scss */
 ul.as-selections .as-original {
   flex-grow: 1;
   min-width: 200px;
 }
-/* line 609, ../../sass/screen.scss */
+/* line 714, ../../sass/screen.scss */
 ul.as-selections .as-original input {
   width: 100%;
 }
 
-/* line 615, ../../sass/screen.scss */
+/* line 720, ../../sass/screen.scss */
 div.as-results {
   position: relative;
 }
-/* line 617, ../../sass/screen.scss */
+/* line 722, ../../sass/screen.scss */
 div.as-results ul {
   position: absolute;
   width: 100%;
   background: #fff;
   border: 1px solid #d2ebad;
 }
-/* line 624, ../../sass/screen.scss */
+/* line 729, ../../sass/screen.scss */
 div.as-results ul li {
   padding: 3px 5px;
 }
-/* line 630, ../../sass/screen.scss */
+/* line 735, ../../sass/screen.scss */
 div.as-results ul li.as-result-item.active {
   background: #fddeb5;
 }
-/* line 635, ../../sass/screen.scss */
+/* line 740, ../../sass/screen.scss */
 div.as-results ul li.as-message {
   font-style: italic;
 }
 
-/* line 645, ../../sass/screen.scss */
+/* line 750, ../../sass/screen.scss */
 .window {
   display: none;
   position: fixed;
@@ -725,11 +826,11 @@ div.as-results ul li.as-message {
   left: 0;
   z-index: 50;
 }
-/* line 655, ../../sass/screen.scss */
+/* line 760, ../../sass/screen.scss */
 .window.visible {
   display: block;
 }
-/* line 659, ../../sass/screen.scss */
+/* line 764, ../../sass/screen.scss */
 .window .window-bg {
   background: #000;
   opacity: 0.7;
@@ -740,7 +841,7 @@ div.as-results ul li.as-message {
   top: 0;
   z-index: -1;
 }
-/* line 670, ../../sass/screen.scss */
+/* line 775, ../../sass/screen.scss */
 .window .window-content {
   position: relative;
   margin: 0 auto;
@@ -754,11 +855,11 @@ div.as-results ul li.as-message {
   max-height: 100%;
   overflow: auto;
 }
-/* line 684, ../../sass/screen.scss */
+/* line 789, ../../sass/screen.scss */
 .window .window-content form label, .window .window-content form .label {
   width: 150px;
 }
-/* line 690, ../../sass/screen.scss */
+/* line 795, ../../sass/screen.scss */
 .window .window-closer {
   position: absolute;
   top: 0;
@@ -766,65 +867,65 @@ div.as-results ul li.as-message {
   padding: 12px;
   z-index: 3;
 }
-/* line 696, ../../sass/screen.scss */
+/* line 801, ../../sass/screen.scss */
 .window .window-closer:after {
   content: "×";
 }
 
-/* line 707, ../../sass/screen.scss */
+/* line 812, ../../sass/screen.scss */
 #lieu_widget .lieu-ui {
   position: relative;
 }
-/* line 709, ../../sass/screen.scss */
+/* line 814, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .map {
   height: 400px;
   width: 100%;
 }
-/* line 713, ../../sass/screen.scss */
+/* line 818, ../../sass/screen.scss */
 #lieu_widget .lieu-ui.hidden {
   display: none;
 }
-/* line 716, ../../sass/screen.scss */
+/* line 821, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .masked {
   visibility: hidden;
 }
-/* line 721, ../../sass/screen.scss */
+/* line 826, ../../sass/screen.scss */
 #lieu_widget .lieu-choixmodif {
   display: none;
 }
-/* line 726, ../../sass/screen.scss */
+/* line 831, ../../sass/screen.scss */
 #lieu_widget.modif .lieu-choixmodif {
   display: unset;
 }
-/* line 731, ../../sass/screen.scss */
+/* line 836, ../../sass/screen.scss */
 #lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui {
   display: none;
 }
-/* line 738, ../../sass/screen.scss */
+/* line 843, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .lieu-acinput {
   display: none;
 }
-/* line 741, ../../sass/screen.scss */
+/* line 846, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .map {
   height: 200px;
 }
-/* line 747, ../../sass/screen.scss */
+/* line 852, ../../sass/screen.scss */
 #lieu_widget #avis_lieu_vide {
   display: none;
 }
-/* line 751, ../../sass/screen.scss */
+/* line 856, ../../sass/screen.scss */
 #lieu_widget .message {
   background: #fddeb5;
   padding: 5px;
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 757, ../../sass/screen.scss */
+/* line 862, ../../sass/screen.scss */
 #lieu_widget .message.hidden {
   display: none;
 }
 
-/* line 763, ../../sass/screen.scss */
+/* line 868, ../../sass/screen.scss */
 a.lieu-change {
   color: #fff;
   background: #f99b20;
@@ -837,25 +938,25 @@ a.lieu-change {
   border-radius: 5px;
   margin-right: 7px;
 }
-/* line 775, ../../sass/screen.scss */
+/* line 880, ../../sass/screen.scss */
 a.lieu-change.ajout:before {
   content: "+";
   margin-right: 5px;
 }
 
-/* line 781, ../../sass/screen.scss */
+/* line 886, ../../sass/screen.scss */
 #stages-map {
   width: 100%;
   height: 600px;
   max-height: 90vh;
 }
 
-/* line 788, ../../sass/screen.scss */
+/* line 893, ../../sass/screen.scss */
 #id_stage-thematiques {
   display: none;
 }
 
-/* line 794, ../../sass/screen.scss */
+/* line 899, ../../sass/screen.scss */
 .homeh1 {
   display: flex;
   justify-content: space-between;
@@ -865,22 +966,22 @@ a.lieu-change.ajout:before {
   border-bottom: 3px solid #000;
   margin-bottom: 15px;
 }
-/* line 803, ../../sass/screen.scss */
+/* line 908, ../../sass/screen.scss */
 .homeh1 > * {
   display: inline-block;
 }
-/* line 806, ../../sass/screen.scss */
+/* line 911, ../../sass/screen.scss */
 .homeh1 p {
   text-align: right;
 }
 
-/* line 811, ../../sass/screen.scss */
+/* line 916, ../../sass/screen.scss */
 .betacadre {
   background: #fa6cae;
   padding: 10px;
 }
 
-/* line 816, ../../sass/screen.scss */
+/* line 921, ../../sass/screen.scss */
 .entrer {
   background: #fff;
   max-width: 500px;
@@ -889,101 +990,111 @@ a.lieu-change.ajout:before {
   margin: 15px auto;
 }
 
-/* line 824, ../../sass/screen.scss */
+/* line 929, ../../sass/screen.scss */
 article.promo {
   display: block;
   font-size: 1.1em;
 }
-/* line 828, ../../sass/screen.scss */
+/* line 933, ../../sass/screen.scss */
 article.promo .explications {
   display: table;
 }
-/* line 831, ../../sass/screen.scss */
+/* line 936, ../../sass/screen.scss */
 article.promo .explications:first-child {
   direction: rtl;
 }
-/* line 833, ../../sass/screen.scss */
+/* line 938, ../../sass/screen.scss */
 article.promo .explications:first-child > * {
   direction: ltr;
 }
-/* line 838, ../../sass/screen.scss */
+/* line 943, ../../sass/screen.scss */
 article.promo .explications > div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }
-/* line 843, ../../sass/screen.scss */
+/* line 948, ../../sass/screen.scss */
 article.promo .explications > div p {
   margin: 15px 15px;
 }
 
-/* line 851, ../../sass/screen.scss */
+/* line 956, ../../sass/screen.scss */
 .faq-toc {
+  font-family: "Lato", sans-serif;
   display: block;
   max-width: 700px;
   margin: 0 auto;
 }
-/* line 855, ../../sass/screen.scss */
+/* line 961, ../../sass/screen.scss */
 .faq-toc ul {
   margin: 20px;
 }
-/* line 859, ../../sass/screen.scss */
+/* line 965, ../../sass/screen.scss */
 .faq-toc ul li a {
   color: #000;
   display: block;
   padding: 5px;
 }
-/* line 865, ../../sass/screen.scss */
+/* line 971, ../../sass/screen.scss */
 .faq-toc ul li.toc-h1 {
   display: none;
 }
-/* line 869, ../../sass/screen.scss */
+/* line 975, ../../sass/screen.scss */
 .faq-toc ul li.toc-h2 a {
   background: #fcc883;
 }
-/* line 873, ../../sass/screen.scss */
+/* line 979, ../../sass/screen.scss */
 .faq-toc ul li.toc-h3 a {
   padding-left: 10px;
   background: #fff;
   font-weight: normal;
 }
-/* line 879, ../../sass/screen.scss */
+/* line 985, ../../sass/screen.scss */
 .faq-toc ul li a:hover {
-  color: #fff;
-  background: #f99b20 !important;
+  color: #395214;
+  background: #bce085 !important;
 }
 
-/* line 888, ../../sass/screen.scss */
+/* line 994, ../../sass/screen.scss */
 .faq article {
   background: #fff;
   padding: 15px;
 }
-/* line 891, ../../sass/screen.scss */
+/* line 997, ../../sass/screen.scss */
 .faq article h2 {
-  background: #fcc883;
+  background-color: #fcc883;
+  color: #ae6505;
   margin: -15px;
   padding: 15px;
 }
-/* line 897, ../../sass/screen.scss */
+/* line 1004, ../../sass/screen.scss */
 .faq article h3 {
-  background: #1a82dd;
-  color: #fff;
+  color: #0f4c82;
+  background-color: #9dcbf3;
   margin: 0 -15px;
   margin-top: 30px;
   padding: 10px 15px;
 }
-/* line 904, ../../sass/screen.scss */
+/* line 1011, ../../sass/screen.scss */
 .faq article h3:nth-child(2) {
   margin-top: 0;
 }
-/* line 909, ../../sass/screen.scss */
+/* line 1016, ../../sass/screen.scss */
 .faq article ul {
   padding-left: 20px;
 }
-/* line 911, ../../sass/screen.scss */
+/* line 1018, ../../sass/screen.scss */
 .faq article ul li {
   list-style: initial;
 }
+/* line 1023, ../../sass/screen.scss */
+.faq article p, .faq article ul {
+  font-family: "Lato", sans-serif;
+  font-size: 18px;
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: 5%;
+}
 
 @media screen and (max-width: 850px) {
   /* line 2, ../../sass/_responsive.scss */
diff --git a/avisstage/statics.py b/avisstage/statics.py
index b0e053c..2e2b569 100644
--- a/avisstage/statics.py
+++ b/avisstage/statics.py
@@ -64,6 +64,18 @@ NIVEAU_SCOL_OPTIONS = (
     ('', u"Autre"),
 )
 
+NIVEAU_SCOL_DICT = {
+    "L3": u"pendant sa troisième année de Licence",
+    "M1": u"pendant sa première année de Master",
+    "M2": u"pendant sa deuxième année de Master",
+    "DOC": u"pendant son année de pré-doctorat",
+    "CST": u"pendant une année de césure",
+    "BLA": u"pendant une année blanche",
+    "VAC": u"pendant des vacances scolaires",
+    "MIT": u"à mi-temps en parallèle des études",
+}
+    
+
 # Dictionnaire des noms de lieux (et de leur genre, True=féminin)
 TYPE_LIEU_DICT = {
     'universite': (u"université", True),
diff --git a/avisstage/templates/avisstage/detail/profil.html b/avisstage/templates/avisstage/detail/profil.html
index e319b61..07412ec 100644
--- a/avisstage/templates/avisstage/detail/profil.html
+++ b/avisstage/templates/avisstage/detail/profil.html
@@ -23,10 +23,13 @@
             <ul class="stage-liste">
                 {% for stage in object.stages_publics %}
                     {% ifchanged stage.date_maj.date %}<li class="date-maj">Mis à jour le {{ stage.date_maj.date }}</li>{% endifchanged %}
-                    <li class="stage"><h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a></h3>
+                    <li class="stage">
+                        <div class="misc-hdr">
+                            <h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a><span class="auteur"></a></span></h3>
+                            <p class="dates"><span class="detail"><span class="debut">{{ stage.date_debut|date:"d/m" }}</span><span class="fin">{{ stage.date_fin|date:"d/m" }}</span></span><span class="year">{{ stage.date_debut|date:"Y" }}</span></p>
+                        </div>
                         <div>
                             <ul class="infos">
-                                <li class="dates">Du {{ stage.date_debut }} au {{ stage.date_fin }}</li>
                                 <li class="type">{{ stage.get_type_stage_display }}</li>
                                 <li class="structure">{{ stage.structure }}</li>
                                 {% for lieu in stage.lieux.all %}<li class="lieu">{{ lieu.nom }}</li>{% endfor %}
diff --git a/avisstage/templates/avisstage/detail/stage.html b/avisstage/templates/avisstage/detail/stage.html
index 1d39d17..cbbb88e 100644
--- a/avisstage/templates/avisstage/detail/stage.html
+++ b/avisstage/templates/avisstage/detail/stage.html
@@ -39,65 +39,83 @@
 {% endblock %}
     
 {% block content %}
-    <h1>{{ object.sujet }}</h1>
     {% if object.auteur == user.profil %}
         <div class="edit-box {{ object.public|yesno:"public,prive" }}">
             <p><a href="{% url "avisstage:stage_edit" object.id %}" class="edit-btn btn">Modifier cette expérience</a></p>
             <form action="{% url "avisstage:stage_publication" object.id %}" method="POST">
                 {% csrf_token %}
                 {% if object.public %}
-                    <p>Cette page est visible publiquement. <input type="submit" value="Masquer ce stage" name="depublier" /></p>
+                    <p>Cette page est visible par les autres utilisateurs. <input type="submit" value="Masquer ce stage" name="depublier" /></p>
                 {% else %}
                     <p>Cette page n'est qu'un brouillon, vous seul pouvez le voir. <input type="submit" value="Publier ce stage" name="publier" /></p>
                 {% endif %}
             </form>
         </div>
     {% endif %}
-    <div class="article-wrapper">
-        <div class="toc-wrapper">
-            <div class="toc">
-            </div>
-        </div>
-        <article class="stage">
-            <section class="misc">
-                <h3>À propos de cette expérience</h3>
+    <article class="stage">
+        <section class="misc">
+            <div class="misc-content {% if object.lieux.all %}withmap{% endif %}">
                 {% if object.lieux.all %}
-                    <div id="stage-map"></div>
-                    <script type="text/javascript">
-                     var lieux = [
-                     {% for lieu in object.lieux.all %}
-                         {
-                             coord: {lat: "{{ lieu.coord.y|escapejs }}", lon: "{{ lieu.coord.x|escapejs }}" },
-                             popup: "<h3>{{ lieu.nom|escapejs }}</h3>" +
-                                    "<p>{{ lieu.get_type_lieu_display|escapejs }}</p>" +
-                                    "<p>{{ lieu.ville|escapejs }}, {{ lieu.get_pays_display|escapejs }}</p>"
-                         }{% if not forloop.last %},{% endif %}
-                     {% endfor %}
-                     ];
-                     $(function(){
-                         initStageMap(lieux);
-                     });
-                    </script>
+                    <div class="map">
+                        <div id="stage-map"></div>
+                        <script type="text/javascript">
+                         var lieux = [
+                             {% for lieu in object.lieux.all %}
+                             {
+                                 coord: {lat: "{{ lieu.coord.y|escapejs }}", lon: "{{ lieu.coord.x|escapejs }}" },
+                                 popup: "<h3>{{ lieu.nom|escapejs }}</h3>" +
+                                        "<p>{{ lieu.get_type_lieu_display|escapejs }}</p>" +
+                                        "<p>{{ lieu.ville|escapejs }}, {{ lieu.get_pays_display|escapejs }}</p>"
+                             }{% if not forloop.last %},{% endif %}
+                             {% endfor %}
+                         ];
+                         $(function(){
+                             initStageMap(lieux);
+                         });
+                        </script>
+                    </div>
                 {% endif %}
-                <p><a href="{% url "avisstage:profil" object.auteur.user.username %}">{{ object.auteur.nom }}</a>
+                <div class="desc">
+                    <div class="misc-hdr">
+                        <h1>{{ object.sujet }}</h1>
+                        <p class="dates"><span class="year">{{ object.date_debut|date:"Y" }}</span><span class="debut">{{ object.date_debut|date:"d/m" }}</span><span class="fin">{{ object.date_fin|date:"d/m" }}</span></p>
+                    </div>
+                    <p><a href="{% url "avisstage:profil" object.auteur.user.username %}">{{ object.auteur.nom }}</a>
                     a fait {{ object.type_stage_fem|yesno:"cette,ce" }} <b>{{ object.type_stage_fancy }}</b>
-                    {% if object.niveau_scol %} pendant son année de {{ object.get_niveau_scol_display }}, {% endif %}
-                    du {{ object.date_debut }} au {{ object.date_fin }}{% if object.structure %}, au sein de {{ object.structure }}{% endif %}{% if object.encadrants %}, supervisé par {{ object.encadrants }}{% endif %}.</p>
-                <ul class="infos">
-                    {% for matiere in object.matieres.all %}
-                        <li class="matiere">{{ matiere.nom }}</li>
-                    {% endfor %}
-                    {% for thematique in object.thematiques.all %}
-                        <li class="thematique">{{ thematique.name }}</li>
-                    {% endfor %}
-                </ul>
+                        {% if object.niveau_scol %}{{ object.niveau_scol_fancy }},{% endif %}
+                        {% if object.structure %}au sein de {{ object.structure }}{% endif %}{% if object.encadrants %}, supervisé par {{ object.encadrants }}{% endif %}.</p>
+                        {% if object.lieux.all %}<p>Cela s'est passé à : 
+                            {% for lieu in object.lieux.all %}{{ lieu.nom }} ({{ lieu.ville }}){% if not forloop.last %}, {% endif %}{% endfor %}.</p>
+                        {% endif %}
+                    
+                    <ul class="infos">
+                        {% for matiere in object.matieres.all %}
+                            <li class="matiere">{{ matiere.nom }}</li>
+                        {% endfor %}
+                        {% for thematique in object.thematiques.all %}
+                            <li class="thematique">{{ thematique.name }}</li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </div>
+        </section>
+
+        
+        <div class="section-wrapper">
+            <div class="toc-wrapper">
+                <div class="toc">
+                </div>
+            </div>
+
+            <section class="avis">
+                {% include "avisstage/detail/avis.html" with avis=object.avis_stage titre="Avis sur le travail" %}
+
+                {% for avis in object.avislieu_set.all %}
+                    {% include "avisstage/detail/avis.html" with avis=avis titre=avis.lieu %}
+                {% endfor %}
             </section>
-
-            {% include "avisstage/detail/avis.html" with avis=object.avis_stage titre="Avis sur le travail" %}
-
-            {% for avis in object.avislieu_set.all %}
-                {% include "avisstage/detail/avis.html" with avis=avis titre=avis.lieu %}
-            {% endfor %}
-        </article>
+        </div>
+    </article>
+    
     </div>
 {% endblock %}
diff --git a/avisstage/templates/avisstage/liste/stage.html b/avisstage/templates/avisstage/liste/stage.html
index 608b66e..6d09ddb 100644
--- a/avisstage/templates/avisstage/liste/stage.html
+++ b/avisstage/templates/avisstage/liste/stage.html
@@ -9,10 +9,13 @@
         <ul class="stage-liste">
             {% for stage in object_list %}
                 {% ifchanged stage.date_maj.date %}<li class="date-maj">Mis à jour le {{ stage.date_maj.date }}</li>{% endifchanged %}
-                <li class="stage"><h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a><span class="auteur"> par <a href="{% url "avisstage:profil" stage.auteur.user.username %}">{{ stage.auteur.nom }}</a></h3>
+                <li class="stage">
+                    <div class="misc-hdr">
+                        <h3><a href="{% url "avisstage:stage" stage.id %}">{{ stage.sujet }}</a><span class="auteur"> par <a href="{% url "avisstage:profil" stage.auteur.user.username %}">{{ stage.auteur.nom }}</a></span></h3>
+                        <p class="dates"><span class="detail"><span class="debut">{{ stage.date_debut|date:"d/m" }}</span><span class="fin">{{ stage.date_fin|date:"d/m" }}</span></span><span class="year">{{ stage.date_debut|date:"Y" }}</span></p>
+                    </div>
                     <div>
                         <ul class="infos">
-                            <li class="dates">Du {{ stage.date_debut }} au {{ stage.date_fin }}</li>
                             <li class="type">{{ stage.get_type_stage_display }}</li>
                             <li class="structure">{{ stage.structure }}</li>
                             {% for lieu in stage.lieux.all %}<li class="lieu">{{ lieu.nom }}</li>{% endfor %}