diff --git a/avisstage/sass/_recherche.scss b/avisstage/sass/_recherche.scss
index 1c2cfa8..c176c79 100644
--- a/avisstage/sass/_recherche.scss
+++ b/avisstage/sass/_recherche.scss
@@ -81,6 +81,49 @@ section.content.recherche {
         }
     }
 
+    .recherche-carte, .recherche-liste {
+        position:relative;
+    }
+
+    .numresults {
+        font-size: 0.9em;
+        font-weight: bold;
+    }
+    
+    &.vue-hybride #voir_hybride,
+    &.vue-carte #voir_carte,
+    &.vue-liste #voir_liste {
+        background: lighten($fond, 30%);
+        color: #000;
+    }
+    
+    .vue-options {
+        text-align: center;
+        ul {
+            display: inline-block;
+            border-radius: 5px;
+            overflow: hidden;
+            
+            li {
+                display: inline-block;
+                background: #fff;
+                padding: 10px;
+                a {
+                    display: block;
+                    padding: 10px;
+                    margin: -10px;
+                }
+            }
+        }
+    }
+
+    .recherche-carte .vue-options {
+        position: absolute;
+        z-index: 3;
+        top: 15px;
+        left: 60px;
+    }
+    
     &.vue-hybride, &.vue-carte {
         width: 100%;
         min-width: unset;
@@ -119,32 +162,41 @@ section.content.recherche {
             width: 40vw;
             min-width: 500px;
             max-width: 800px;
+
+            .dates {
+                display:none;
+            }
+            ul.infos li {
+                font-size: 0.8em;
+                font-weight: normal;
+                &.year {
+                    display: inline-block;
+                }
+            }
         }
         .recherche-carte {
             flex-shrink: 1;
             width: 100%;
-        }
-    }
 
-    .vue-options {
-        text-align: center;
-        ul {
-            display: inline-block;
-            border-radius: 5px;
-            overflow: hidden;
-            
-            li {
-                display: inline-block;
-                background: #fff;
-                padding: 10px;
-                a {
-                    
-                }
+            .vue-options {
+                display:none;
             }
         }
     }
+    
     #carte {
         width:100%;
         height:100%;
     }
+
+    .recherche-liste.recherche-details {
+        display: none !important;
+    }
+    &.vue-hybride.vue-details .recherche-liste {
+        display: none;
+        
+        &.recherche-details {
+            display: block !important;
+        }
+    }
 }
diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss
index 09b204c..828f020 100644
--- a/avisstage/sass/screen.scss
+++ b/avisstage/sass/screen.scss
@@ -190,15 +190,19 @@ header {
 .stage-liste {
     li {
         display: block;
+        position: relative;
+        
         &.date-maj {
             font-weight: 300;
             font-size: 0.9em;
             padding: 3px 0;
+            font-style: italic;
         }
         &.stage {
             padding: 10px;
             background: #fff;
             margin: 10px;
+            border-left: 5px solid $compl;
 
             h3 {
                 font-size: 1.4em;
@@ -217,9 +221,6 @@ header {
                     }
                 }
             }
-            ul.infos {
-                display:inline;
-            }
         }
         .misc-hdr {
             margin-bottom: 10px;
@@ -234,12 +235,26 @@ header {
                 }
             }
         }
+        
+        a.hoverlink {
+            position: absolute;
+            display: block;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+        }
     }
 }
 
 ul.infos {
     margin: 0 -3px;
     padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    width: 100;
     
     li {
         display: inline-block;
@@ -248,19 +263,32 @@ ul.infos {
         font-weight: bold;
         font-size: 0.9em;
         border-radius: 4px;
+        flex-grow: 1;
+        text-align: center;
+        background-color: #ddd;
         
         &.thematique {
-            color: darken($vert, 20);
-            background-color: lighten($vert, 20);
+            color: darken($vert, 25);
+            background-color: lighten($vert, 25);
         }
         &.matiere {
-            color: darken($fond, 20);
-            background-color: lighten($fond, 20);
+            color: darken($fond, 30);
+            background-color: lighten($fond, 25);
         }
         &.lieu {
-            color: darken($rouge, 20);
-            background-color: lighten($rouge, 20);
+            color: darken($rouge, 25);
+            background-color: lighten($rouge, 25);
         }
+        &.year {
+            background-color: darken($rouge, 20);
+            color: #fff;
+            display: none;
+        }
+    }
+    
+    &:after {
+        content: "";
+        flex: 1000;
     }
 }
 
diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css
index 1a7e26d..3c6844a 100644
--- a/avisstage/static/css/screen.css
+++ b/avisstage/static/css/screen.css
@@ -260,61 +260,74 @@ header h1 {
 /* line 191, ../../sass/screen.scss */
 .stage-liste li {
   display: block;
+  position: relative;
 }
-/* line 193, ../../sass/screen.scss */
+/* line 195, ../../sass/screen.scss */
 .stage-liste li.date-maj {
   font-weight: 300;
   font-size: 0.9em;
   padding: 3px 0;
+  font-style: italic;
 }
-/* line 198, ../../sass/screen.scss */
+/* line 201, ../../sass/screen.scss */
 .stage-liste li.stage {
   padding: 10px;
   background: #fff;
   margin: 10px;
+  border-left: 5px solid #f99b20;
 }
-/* line 203, ../../sass/screen.scss */
+/* line 207, ../../sass/screen.scss */
 .stage-liste li.stage h3 {
   font-size: 1.4em;
   padding-left: 5px;
 }
-/* line 207, ../../sass/screen.scss */
+/* line 211, ../../sass/screen.scss */
 .stage-liste li.stage h3 > a {
   color: #0f4c82;
 }
-/* line 211, ../../sass/screen.scss */
+/* line 215, ../../sass/screen.scss */
 .stage-liste li.stage h3 .auteur {
   font-size: 0.8em;
 }
-/* line 214, ../../sass/screen.scss */
+/* line 218, ../../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 */
+/* line 225, ../../sass/screen.scss */
 .stage-liste li .misc-hdr {
   margin-bottom: 10px;
 }
-/* line 228, ../../sass/screen.scss */
+/* line 229, ../../sass/screen.scss */
 .stage-liste li .misc-hdr .dates > span {
   display: table-cell;
   vertical-align: middle;
 }
-/* line 232, ../../sass/screen.scss */
+/* line 233, ../../sass/screen.scss */
 .stage-liste li .misc-hdr .dates .year {
   padding-left: 8px;
 }
+/* line 239, ../../sass/screen.scss */
+.stage-liste li a.hoverlink {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
 
-/* line 240, ../../sass/screen.scss */
+/* line 251, ../../sass/screen.scss */
 ul.infos {
   margin: 0 -3px;
   padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100;
 }
-/* line 244, ../../sass/screen.scss */
+/* line 259, ../../sass/screen.scss */
 ul.infos li {
   display: inline-block;
   padding: 5px;
@@ -322,21 +335,35 @@ ul.infos li {
   font-weight: bold;
   font-size: 0.9em;
   border-radius: 4px;
+  flex-grow: 1;
+  text-align: center;
+  background-color: #ddd;
 }
-/* line 252, ../../sass/screen.scss */
+/* line 270, ../../sass/screen.scss */
 ul.infos li.thematique {
-  color: #0f4c82;
-  background-color: #6fb3ee;
+  color: #0d3f6b;
+  background-color: #86bff1;
 }
-/* line 256, ../../sass/screen.scss */
+/* line 274, ../../sass/screen.scss */
 ul.infos li.matiere {
-  color: #567a1f;
-  background-color: #bce085;
+  color: #395214;
+  background-color: #c7e699;
 }
-/* line 260, ../../sass/screen.scss */
+/* line 278, ../../sass/screen.scss */
 ul.infos li.lieu {
-  color: #950548;
-  background-color: #fa6cae;
+  color: #7c043c;
+  background-color: #fb84bc;
+}
+/* line 282, ../../sass/screen.scss */
+ul.infos li.year {
+  background-color: #950548;
+  color: #fff;
+  display: none;
+}
+/* line 289, ../../sass/screen.scss */
+ul.infos:after {
+  content: "";
+  flex: 1000;
 }
 
 /* line 4, ../../sass/_stage_detail.scss */
@@ -616,7 +643,7 @@ article.stage .section-wrapper .toc .toc-active a {
   border: 1px solid #ad0654;
 }
 
-/* line 279, ../../sass/screen.scss */
+/* line 307, ../../sass/screen.scss */
 input, textarea, select, div.tinymce, option, optgroup:before {
   background: #fff;
   font-size: 1em;
@@ -626,13 +653,13 @@ input, textarea, select, div.tinymce, option, optgroup:before {
   padding: 5px;
   text-align: left;
 }
-/* line 288, ../../sass/screen.scss */
+/* line 316, ../../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 295, ../../sass/screen.scss */
+/* line 323, ../../sass/screen.scss */
 input[type='text'], input[type='password'],
 input[type='email'], input[type='number'], textarea, select {
   border: none;
@@ -642,7 +669,7 @@ input[type='email'], input[type='number'], textarea, select {
   transition: border 1s ease-out, background 1s ease-out;
 }
 
-/* line 304, ../../sass/screen.scss */
+/* line 332, ../../sass/screen.scss */
 select {
   -moz-appearance: none;
   appearance: none;
@@ -656,21 +683,21 @@ select {
   background-color: #fff;
   background-size: contain;
 }
-/* line 317, ../../sass/screen.scss */
+/* line 345, ../../sass/screen.scss */
 select option {
   padding: 3px;
   white-space: pre-wrap;
 }
-/* line 323, ../../sass/screen.scss */
+/* line 351, ../../sass/screen.scss */
 select optgroup option {
   padding-left: 10px;
 }
-/* line 326, ../../sass/screen.scss */
+/* line 354, ../../sass/screen.scss */
 select optgroup:before {
   font-weight: bold;
 }
 
-/* line 332, ../../sass/screen.scss */
+/* line 360, ../../sass/screen.scss */
 input[type="submit"], .btn {
   font: 19px "Dosis", sans-serif;
   background-color: #8fcc33;
@@ -681,17 +708,17 @@ input[type="submit"], .btn {
   display: inline-block;
 }
 
-/* line 342, ../../sass/screen.scss */
+/* line 370, ../../sass/screen.scss */
 p.submits {
   text-align: right;
 }
 
-/* line 346, ../../sass/screen.scss */
+/* line 374, ../../sass/screen.scss */
 form .commentaire {
   font-style: italic;
 }
 
-/* line 350, ../../sass/screen.scss */
+/* line 378, ../../sass/screen.scss */
 .edit-btn {
   border-color: #706c00;
   color: #000;
@@ -700,14 +727,14 @@ form .commentaire {
   background-origin: content-box;
   background-size: contain;
 }
-/* line 358, ../../sass/screen.scss */
+/* line 386, ../../sass/screen.scss */
 .edit-btn:after {
   content: "";
   width: 30px;
   display: inline-block;
 }
 
-/* line 365, ../../sass/screen.scss */
+/* line 393, ../../sass/screen.scss */
 textarea, div.tinymce {
   font-family: "Lato", sans-serif;
   border: none;
@@ -717,20 +744,20 @@ textarea, div.tinymce {
   transition: border 1s ease-out, background 1s ease-out;
 }
 
-/* line 374, ../../sass/screen.scss */
+/* line 402, ../../sass/screen.scss */
 textarea {
   height: 200px;
   resize: vertical;
 }
 
-/* line 382, ../../sass/screen.scss */
+/* line 410, ../../sass/screen.scss */
 form .field {
   margin: 5px 0;
   display: flex;
   background: #fff;
   padding: 10px;
 }
-/* line 388, ../../sass/screen.scss */
+/* line 416, ../../sass/screen.scss */
 form .field label, form .field .label {
   display: inline-block;
   width: 250px;
@@ -739,39 +766,39 @@ form .field label, form .field .label {
   padding-top: 5px;
   flex-shrink: 0;
 }
-/* line 396, ../../sass/screen.scss */
+/* line 424, ../../sass/screen.scss */
 form .field label.required:before, form .field .label.required:before {
   margin-right: 5px;
   content: "*";
   color: #f70978;
 }
-/* line 402, ../../sass/screen.scss */
+/* line 430, ../../sass/screen.scss */
 form .field label {
   font-family: Alegreya, serif;
   font-weight: bold;
 }
-/* line 406, ../../sass/screen.scss */
+/* line 434, ../../sass/screen.scss */
 form .field .help_text {
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 410, ../../sass/screen.scss */
+/* line 438, ../../sass/screen.scss */
 form .field .input {
   display: inline-block;
   flex-grow: 1;
   margin-right: 10px;
 }
 
-/* line 420, ../../sass/screen.scss */
+/* line 448, ../../sass/screen.scss */
 ul.as-selections {
   display: flex;
   flex-wrap: wrap;
 }
-/* line 424, ../../sass/screen.scss */
+/* line 452, ../../sass/screen.scss */
 ul.as-selections li {
   display: inline-block;
 }
-/* line 428, ../../sass/screen.scss */
+/* line 456, ../../sass/screen.scss */
 ul.as-selections .as-selection-item {
   padding: 0 5px;
   background: #f99b20;
@@ -780,52 +807,52 @@ ul.as-selections .as-selection-item {
   border-radius: 2px;
   font-weight: 500;
 }
-/* line 436, ../../sass/screen.scss */
+/* line 464, ../../sass/screen.scss */
 ul.as-selections .as-selection-item a.as-close {
   color: #fff;
   -webkit-cursor: pointer;
   cursor: pointer;
   margin-right: 5px;
 }
-/* line 443, ../../sass/screen.scss */
+/* line 471, ../../sass/screen.scss */
 ul.as-selections .as-selection-item.selected {
   background: #8fcc33;
 }
-/* line 448, ../../sass/screen.scss */
+/* line 476, ../../sass/screen.scss */
 ul.as-selections .as-original {
   flex-grow: 1;
   min-width: 200px;
 }
-/* line 452, ../../sass/screen.scss */
+/* line 480, ../../sass/screen.scss */
 ul.as-selections .as-original input {
   width: 100%;
 }
 
-/* line 458, ../../sass/screen.scss */
+/* line 486, ../../sass/screen.scss */
 div.as-results {
   position: relative;
 }
-/* line 460, ../../sass/screen.scss */
+/* line 488, ../../sass/screen.scss */
 div.as-results ul {
   position: absolute;
   width: 100%;
   background: #fff;
   border: 1px solid #d2ebad;
 }
-/* line 467, ../../sass/screen.scss */
+/* line 495, ../../sass/screen.scss */
 div.as-results ul li {
   padding: 3px 5px;
 }
-/* line 473, ../../sass/screen.scss */
+/* line 501, ../../sass/screen.scss */
 div.as-results ul li.as-result-item.active {
   background: #fddeb5;
 }
-/* line 478, ../../sass/screen.scss */
+/* line 506, ../../sass/screen.scss */
 div.as-results ul li.as-message {
   font-style: italic;
 }
 
-/* line 488, ../../sass/screen.scss */
+/* line 516, ../../sass/screen.scss */
 .window {
   display: none;
   position: fixed;
@@ -836,11 +863,11 @@ div.as-results ul li.as-message {
   left: 0;
   z-index: 50;
 }
-/* line 498, ../../sass/screen.scss */
+/* line 526, ../../sass/screen.scss */
 .window.visible {
   display: block;
 }
-/* line 502, ../../sass/screen.scss */
+/* line 530, ../../sass/screen.scss */
 .window .window-bg {
   background: #000;
   opacity: 0.7;
@@ -851,7 +878,7 @@ div.as-results ul li.as-message {
   top: 0;
   z-index: -1;
 }
-/* line 513, ../../sass/screen.scss */
+/* line 541, ../../sass/screen.scss */
 .window .window-content {
   position: relative;
   margin: 0 auto;
@@ -865,11 +892,11 @@ div.as-results ul li.as-message {
   max-height: 100%;
   overflow: auto;
 }
-/* line 527, ../../sass/screen.scss */
+/* line 555, ../../sass/screen.scss */
 .window .window-content form label, .window .window-content form .label {
   width: 150px;
 }
-/* line 533, ../../sass/screen.scss */
+/* line 561, ../../sass/screen.scss */
 .window .window-closer {
   position: absolute;
   top: 0;
@@ -877,65 +904,65 @@ div.as-results ul li.as-message {
   padding: 12px;
   z-index: 3;
 }
-/* line 539, ../../sass/screen.scss */
+/* line 567, ../../sass/screen.scss */
 .window .window-closer:after {
   content: "×";
 }
 
-/* line 550, ../../sass/screen.scss */
+/* line 578, ../../sass/screen.scss */
 #lieu_widget .lieu-ui {
   position: relative;
 }
-/* line 552, ../../sass/screen.scss */
+/* line 580, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .map {
   height: 400px;
   width: 100%;
 }
-/* line 556, ../../sass/screen.scss */
+/* line 584, ../../sass/screen.scss */
 #lieu_widget .lieu-ui.hidden {
   display: none;
 }
-/* line 559, ../../sass/screen.scss */
+/* line 587, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .masked {
   visibility: hidden;
 }
-/* line 564, ../../sass/screen.scss */
+/* line 592, ../../sass/screen.scss */
 #lieu_widget .lieu-choixmodif {
   display: none;
 }
-/* line 569, ../../sass/screen.scss */
+/* line 597, ../../sass/screen.scss */
 #lieu_widget.modif .lieu-choixmodif {
   display: unset;
 }
-/* line 574, ../../sass/screen.scss */
+/* line 602, ../../sass/screen.scss */
 #lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui {
   display: none;
 }
-/* line 581, ../../sass/screen.scss */
+/* line 609, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .lieu-acinput {
   display: none;
 }
-/* line 584, ../../sass/screen.scss */
+/* line 612, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .map {
   height: 200px;
 }
-/* line 590, ../../sass/screen.scss */
+/* line 618, ../../sass/screen.scss */
 #lieu_widget #avis_lieu_vide {
   display: none;
 }
-/* line 594, ../../sass/screen.scss */
+/* line 622, ../../sass/screen.scss */
 #lieu_widget .message {
   background: #fddeb5;
   padding: 5px;
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 600, ../../sass/screen.scss */
+/* line 628, ../../sass/screen.scss */
 #lieu_widget .message.hidden {
   display: none;
 }
 
-/* line 606, ../../sass/screen.scss */
+/* line 634, ../../sass/screen.scss */
 a.lieu-change {
   color: #fff;
   background: #f99b20;
@@ -948,25 +975,25 @@ a.lieu-change {
   border-radius: 5px;
   margin-right: 7px;
 }
-/* line 618, ../../sass/screen.scss */
+/* line 646, ../../sass/screen.scss */
 a.lieu-change.ajout:before {
   content: "+";
   margin-right: 5px;
 }
 
-/* line 624, ../../sass/screen.scss */
+/* line 652, ../../sass/screen.scss */
 #stages-map {
   width: 100%;
   height: 600px;
   max-height: 90vh;
 }
 
-/* line 631, ../../sass/screen.scss */
+/* line 659, ../../sass/screen.scss */
 #id_stage-thematiques {
   display: none;
 }
 
-/* line 637, ../../sass/screen.scss */
+/* line 665, ../../sass/screen.scss */
 .homeh1 {
   display: flex;
   justify-content: space-between;
@@ -976,22 +1003,22 @@ a.lieu-change.ajout:before {
   border-bottom: 3px solid #000;
   margin-bottom: 15px;
 }
-/* line 646, ../../sass/screen.scss */
+/* line 674, ../../sass/screen.scss */
 .homeh1 > * {
   display: inline-block;
 }
-/* line 649, ../../sass/screen.scss */
+/* line 677, ../../sass/screen.scss */
 .homeh1 p {
   text-align: right;
 }
 
-/* line 654, ../../sass/screen.scss */
+/* line 682, ../../sass/screen.scss */
 .betacadre {
   background: #fa6cae;
   padding: 10px;
 }
 
-/* line 659, ../../sass/screen.scss */
+/* line 687, ../../sass/screen.scss */
 .entrer {
   background: #fff;
   max-width: 500px;
@@ -1000,84 +1027,84 @@ a.lieu-change.ajout:before {
   margin: 15px auto;
 }
 
-/* line 667, ../../sass/screen.scss */
+/* line 695, ../../sass/screen.scss */
 article.promo {
   display: block;
   font-size: 1.1em;
 }
-/* line 671, ../../sass/screen.scss */
+/* line 699, ../../sass/screen.scss */
 article.promo .explications {
   display: table;
 }
-/* line 674, ../../sass/screen.scss */
+/* line 702, ../../sass/screen.scss */
 article.promo .explications:first-child {
   direction: rtl;
 }
-/* line 676, ../../sass/screen.scss */
+/* line 704, ../../sass/screen.scss */
 article.promo .explications:first-child > * {
   direction: ltr;
 }
-/* line 681, ../../sass/screen.scss */
+/* line 709, ../../sass/screen.scss */
 article.promo .explications > div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }
-/* line 686, ../../sass/screen.scss */
+/* line 714, ../../sass/screen.scss */
 article.promo .explications > div p {
   margin: 15px 15px;
 }
 
-/* line 694, ../../sass/screen.scss */
+/* line 722, ../../sass/screen.scss */
 .faq-toc {
   font-family: "Lato", sans-serif;
   display: block;
   max-width: 700px;
   margin: 0 auto;
 }
-/* line 699, ../../sass/screen.scss */
+/* line 727, ../../sass/screen.scss */
 .faq-toc ul {
   margin: 20px;
 }
-/* line 703, ../../sass/screen.scss */
+/* line 731, ../../sass/screen.scss */
 .faq-toc ul li a {
   color: #000;
   display: block;
   padding: 5px;
 }
-/* line 709, ../../sass/screen.scss */
+/* line 737, ../../sass/screen.scss */
 .faq-toc ul li.toc-h1 {
   display: none;
 }
-/* line 713, ../../sass/screen.scss */
+/* line 741, ../../sass/screen.scss */
 .faq-toc ul li.toc-h2 a {
   background: #fcc883;
 }
-/* line 717, ../../sass/screen.scss */
+/* line 745, ../../sass/screen.scss */
 .faq-toc ul li.toc-h3 a {
   padding-left: 10px;
   background: #fff;
   font-weight: normal;
 }
-/* line 723, ../../sass/screen.scss */
+/* line 751, ../../sass/screen.scss */
 .faq-toc ul li a:hover {
   color: #395214;
   background: #bce085 !important;
 }
 
-/* line 732, ../../sass/screen.scss */
+/* line 760, ../../sass/screen.scss */
 .faq article {
   background: #fff;
   padding: 15px;
 }
-/* line 735, ../../sass/screen.scss */
+/* line 763, ../../sass/screen.scss */
 .faq article h2 {
   background-color: #fcc883;
   color: #ae6505;
   margin: -15px;
   padding: 15px;
 }
-/* line 742, ../../sass/screen.scss */
+/* line 770, ../../sass/screen.scss */
 .faq article h3 {
   color: #0f4c82;
   background-color: #9dcbf3;
@@ -1085,19 +1112,19 @@ article.promo .explications > div p {
   margin-top: 30px;
   padding: 10px 15px;
 }
-/* line 749, ../../sass/screen.scss */
+/* line 777, ../../sass/screen.scss */
 .faq article h3:nth-child(2) {
   margin-top: 0;
 }
-/* line 754, ../../sass/screen.scss */
+/* line 782, ../../sass/screen.scss */
 .faq article ul {
   padding-left: 20px;
 }
-/* line 756, ../../sass/screen.scss */
+/* line 784, ../../sass/screen.scss */
 .faq article ul li {
   list-style: initial;
 }
-/* line 761, ../../sass/screen.scss */
+/* line 789, ../../sass/screen.scss */
 .faq article p, .faq article ul {
   font-family: "Lato", sans-serif;
   font-size: 18px;
@@ -1189,6 +1216,49 @@ section.content.recherche form.recherche .avancee ul li.field__sujet, section.co
   min-width: 300px;
 }
 /* line 84, ../../sass/_recherche.scss */
+section.content.recherche .recherche-carte, section.content.recherche .recherche-liste {
+  position: relative;
+}
+/* line 88, ../../sass/_recherche.scss */
+section.content.recherche .numresults {
+  font-size: 0.9em;
+  font-weight: bold;
+}
+/* line 93, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride #voir_hybride, section.content.recherche.vue-carte #voir_carte, section.content.recherche.vue-liste #voir_liste {
+  background: #d2ebad;
+  color: #000;
+}
+/* line 100, ../../sass/_recherche.scss */
+section.content.recherche .vue-options {
+  text-align: center;
+}
+/* line 102, ../../sass/_recherche.scss */
+section.content.recherche .vue-options ul {
+  display: inline-block;
+  border-radius: 5px;
+  overflow: hidden;
+}
+/* line 107, ../../sass/_recherche.scss */
+section.content.recherche .vue-options ul li {
+  display: inline-block;
+  background: #fff;
+  padding: 10px;
+}
+/* line 111, ../../sass/_recherche.scss */
+section.content.recherche .vue-options ul li a {
+  display: block;
+  padding: 10px;
+  margin: -10px;
+}
+/* line 120, ../../sass/_recherche.scss */
+section.content.recherche .recherche-carte .vue-options {
+  position: absolute;
+  z-index: 3;
+  top: 15px;
+  left: 60px;
+}
+/* line 127, ../../sass/_recherche.scss */
 section.content.recherche.vue-hybride, section.content.recherche.vue-carte {
   width: 100%;
   min-width: unset;
@@ -1200,60 +1270,73 @@ section.content.recherche.vue-hybride, section.content.recherche.vue-carte {
   padding: 0;
   margin: 0;
 }
-/* line 95, ../../sass/_recherche.scss */
+/* line 138, ../../sass/_recherche.scss */
 section.content.recherche.vue-hybride .recherche-carte, section.content.recherche.vue-hybride .recherche-liste, section.content.recherche.vue-carte .recherche-carte, section.content.recherche.vue-carte .recherche-liste {
   height: 100%;
 }
-/* line 98, ../../sass/_recherche.scss */
+/* line 141, ../../sass/_recherche.scss */
 section.content.recherche.vue-hybride .recherche-liste, section.content.recherche.vue-carte .recherche-liste {
   overflow-y: auto;
   padding: 15px;
 }
-/* line 104, ../../sass/_recherche.scss */
+/* line 147, ../../sass/_recherche.scss */
 section.content.recherche.vue-liste .recherche-carte, section.content.recherche.vue-carte .recherche-liste {
   display: none;
 }
-/* line 109, ../../sass/_recherche.scss */
+/* line 152, ../../sass/_recherche.scss */
 section.content.recherche.vue-carte .recherche-carte, section.content.recherche.vue-liste .recherche-liste {
   display: block;
   width: 100%;
 }
-/* line 115, ../../sass/_recherche.scss */
+/* line 158, ../../sass/_recherche.scss */
 section.content.recherche.vue-hybride {
   display: flex;
 }
-/* line 118, ../../sass/_recherche.scss */
+/* line 161, ../../sass/_recherche.scss */
 section.content.recherche.vue-hybride .recherche-liste {
   width: 40vw;
   min-width: 500px;
   max-width: 800px;
 }
-/* line 123, ../../sass/_recherche.scss */
+/* line 166, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride .recherche-liste .dates {
+  display: none;
+}
+/* line 169, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride .recherche-liste ul.infos li {
+  font-size: 0.8em;
+  font-weight: normal;
+}
+/* line 172, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride .recherche-liste ul.infos li.year {
+  display: inline-block;
+}
+/* line 177, ../../sass/_recherche.scss */
 section.content.recherche.vue-hybride .recherche-carte {
   flex-shrink: 1;
   width: 100%;
 }
-/* line 129, ../../sass/_recherche.scss */
-section.content.recherche .vue-options {
-  text-align: center;
+/* line 181, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride .recherche-carte .vue-options {
+  display: none;
 }
-/* line 131, ../../sass/_recherche.scss */
-section.content.recherche .vue-options ul {
-  display: inline-block;
-  border-radius: 5px;
-  overflow: hidden;
-}
-/* line 136, ../../sass/_recherche.scss */
-section.content.recherche .vue-options ul li {
-  display: inline-block;
-  background: #fff;
-  padding: 10px;
-}
-/* line 146, ../../sass/_recherche.scss */
+/* line 187, ../../sass/_recherche.scss */
 section.content.recherche #carte {
   width: 100%;
   height: 100%;
 }
+/* line 192, ../../sass/_recherche.scss */
+section.content.recherche .recherche-liste.recherche-details {
+  display: none !important;
+}
+/* line 195, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride.vue-details .recherche-liste {
+  display: none;
+}
+/* line 198, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-details {
+  display: block !important;
+}
 
 @media screen and (max-width: 850px) {
   /* line 2, ../../sass/_responsive.scss */
diff --git a/avisstage/static/js/recherche.js b/avisstage/static/js/recherche.js
index 0719b96..90c3b09 100644
--- a/avisstage/static/js/recherche.js
+++ b/avisstage/static/js/recherche.js
@@ -1,7 +1,15 @@
 function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) {
     var interface_mode, main_container;
-    var lieux_map = {}, lieux_list = [];
+    var lieux_map = {}, lieux_list = [], stages_map = {}, lieux_db = {};
     var stages_data = {};
+    var marqueurs = L.markerClusterGroup();
+    var marqueurs_db = {};
+    var changevue;
+    var details_lock = false;
+    var map, lieux_survol;
+
+    // Initialisation globale de l'interface et du switch liste / hybride / carte
+    // TODO se souvenir des préférences d'affichage
     
     function initInterface() {
         main_container = $(".content.recherche");
@@ -13,29 +21,47 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) {
             interface_mode = "hybride";
         }
 
+        changevue = $(".vue-options");
+        $.each(changevue.find('a'), function(i, item) {
+            $(item).on('click', btnChangeInterface);
+        });
+
         $.each(lieux, function(i, item) {
             var stage_id = item[0];
             var lieu_id = item[1];
-            if (lieux_map[lieu_id]==undefined) {
+            if (lieux_map[lieu_id] === undefined) {
                 lieux_map[lieu_id] = [];
                 lieux_list.push(lieu_id);
             }
             lieux_map[lieu_id].push(stage_id);
+            
+            if (stages_map[stage_id] === undefined) {
+                stages_map[stage_id] = [];
+            }
+            stages_map[stage_id].push(lieu_id);
         });
         
         changeInterface(interface_mode);
     }
 
+    // Changement d'affichage : mise à jour des classes et démarrage de la carte si nécessaire
+    
+    function btnChangeInterface() {
+        changeInterface(this.id.split('_')[1]);
+    }
+    
     function changeInterface(mode) {
         interface_mode = mode;
+        $(".content.recherche").removeClass("vue-carte vue-hybride vue-liste")
+                               .addClass("vue-"+mode);
         if (mode=="hybride" || mode=="carte") {
             initCarte();
+            map.invalidateSize();
         }
     }
 
     // Carte
 
-    var map;
     function initCarte() {
         if (map !== undefined) return;
         map = L.map("carte").panTo([30, 15]).setZoom(1);
@@ -45,19 +71,19 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) {
         $.getJSON(API_LIEU + "set/"+lieux_list.join(';')+"/?format=json", onLoadLieux);
     }
     
-    function makeIcon(couleur){
+    function makeIcon(couleur, scale){
+        if (scale===undefined) scale = 1;
         return L.icon({
             iconUrl: STATIC_ROOT + 'images/marker-'+couleur+'.png',
-            iconSize: [36, 46],
-            iconAnchor: [18, 45],
+            iconSize: [36 * scale, 46 * scale],
+            iconAnchor: [18 * scale, 45 * scale],
             popupAnchor: [0, -48]
         })
     }
     var greenIcon = makeIcon('red');
+    var blueIcon = makeIcon('blue', 1.2);
 
-    var marqueurs = L.markerClusterGroup();
-    var marqueurs_db = {};
-    
+    // Chargeùent des infos
     function onLoadLieux(data){
         console.log(data);
         var lieux = data.objects;
@@ -68,19 +94,35 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) {
                   "<p>"+txt+"</p>";
             marqueur.bindPopup(txt + "<p>Chargement...</p>");
             marqueurs.addLayer(marqueur);
-            marqueur.on("popupopen", showDetailLieu);
+            marqueur.on("popupopen", showDetailLieu)
+                    .on("popupclose", unlockDetailsListe)
+                    .on("mouseover", showDetailsListeListener)
+                    .on("mouseout", hideDetailsListeListener);
             marqueur._lieu_data = item;
             marqueur._popup_header = txt;
             marqueur._lieu_data_loading = false;
             marqueurs_db[item.id] = marqueur;
+            lieux_db[item.id] = item;
         });
         map.addLayer(marqueurs);
+        lieux_survol = new L.layerGroup();
+        map.addLayer(lieux_survol);
+
+        $("#liste-resultats .stage")
+            .on("mouseover", showLieuxFromStage)
+            .on("mouseout", hideLieuxSurvol);
     }
+
+
+    //
+    // Actions sur la carte -> Affichage réduit de la liste des stages
+    //
     
-    function showDetailLieu(){
+    function showDetailLieu () {
+        // Affichage du popup détaillé
         var data = this._lieu_data;
+        details_lock = data;
         var marqueur = marqueurs_db[data.id];
-        marqueur._lieu_data = data;
         var html = $("<div>").html(marqueur._popup_header);
         var stageliste = $("<ul>");
         $.each(lieux_map[data.id], function(i, item) {
@@ -97,5 +139,53 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) {
         marqueur.setPopupContent(html[0]);
     }
 
+    function showDetailsListeListener () {
+        showDetailsListe(this._lieu_data);
+    }
+
+    function showDetailsListe (data) {
+        main_container.addClass("vue-details");
+        var liste_el = $("#resultats-details");
+        $.each(liste_el.children(), function(i, item){$(item).remove();});
+        $.each(lieux_map[data.id], function(i, item) {
+            var stage_el = $("#resultat-stage-"+item);
+            var new_el = $("<li>", {class:"stage"}).html(stage_el.html());
+            liste_el.append(new_el);
+        });
+    }
+
+    function unlockDetailsListe () {
+        details_lock = false;
+        hideDetailsListeListener();
+    }
+    
+    function hideDetailsListeListener () {
+        if (details_lock === false)
+            main_container.removeClass("vue-details");
+        else
+            showDetailsListe(details_lock);
+    }
+
+    //
+    // Survol dans la liste -> Affichage des lieux
+    //
+    
+    function showLieuxFromStage () {
+        if (stages_map === undefined) return;
+        var stageid = this.id.split("-")[2];
+        var lieuxids = stages_map[stageid];
+        $.each(lieuxids, function(i, lieu_id) {
+            var data = lieux_db[lieu_id];
+            var marqueur = new L.marker(data.coord, {icon:blueIcon});
+            lieux_survol.addLayer(marqueur);
+        });
+    }
+
+    function hideLieuxSurvol () {
+        lieux_survol.clearLayers();
+    }
+
+    // __init__
+    
     initInterface();
 }
diff --git a/avisstage/templates/avisstage/recherche/resultats.html b/avisstage/templates/avisstage/recherche/resultats.html
index e4d4ab2..00e79e3 100644
--- a/avisstage/templates/avisstage/recherche/resultats.html
+++ b/avisstage/templates/avisstage/recherche/resultats.html
@@ -18,15 +18,15 @@
     <section class="recherche-liste" id="recherche-liste">
         {% include "avisstage/recherche/formulaire.html" with form=form %}
         
-        <article class="resultslist">
+        <article class="resultslist" id="liste-resultats">
             <h2>Résultats de la recherche</h2>
             {% if stages %}
                 <div id="vue-options" class="vue-options">
                     <ul>
                         <li>Affichage :</li>
-                        <li><a href="javascript:void(0);" id="display_list">Liste</a></li>
-                        <li><a href="javascript:void(0);" id="display_hybrid">Hybride</a></li>
-                        <li><a href="javascript:void(0);" id="display_map">Carte</a></li>
+                        <li><a href="javascript:void(0);" id="voir_liste">Liste</a></li>
+                        <li><a href="javascript:void(0);" id="voir_hybride">Hybride</a></li>
+                        <li><a href="javascript:void(0);" id="voir_carte">Carte</a></li>
                     </ul>
                 </div>
                 <p class="numresults">{{ stages|length }} expérience{{ stages|length|pluralize }} trouvée{{ stages|length|pluralize }}</p>
@@ -39,7 +39,7 @@
                     {% endif %}
                     <li class="stage" id="resultat-stage-{{ stage.id }}">
                         <div class="misc-hdr">
-                            <h3><a href="{% url "avisstage:stage" stage.id %}" class="stage-sujet">{{ stage.sujet }}</a><span class="auteur"> par <a href="{% url "avisstage:profil" stage.auteur.user.username %}" class="stage-auteur">{{ stage.auteur.nom }}</a></span></h3>
+                            <h3><a href="{% url "avisstage:stage" stage.id %}" class="stage-sujet">{{ stage.sujet }}</a><span class="auteur"> par <span class="stage-auteur">{{ stage.auteur.nom }}</span></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>
@@ -53,8 +53,10 @@
                                 {% for thematique in stage.thematiques.all %}
                                     <li class="thematique">{{ thematique.name }}</li>
                                 {% endfor %}
+                                <li class="year">{{ stage.date_debut|date:"Y" }}</li>
                             </ul>
                         </div>
+                        <a href="{% url "avisstage:stage" stage.id %}" class="hoverlink">&nbsp;</a>
                     </li>
 
                     
@@ -65,10 +67,21 @@
             
         </article>
     </section>
+    <section class="recherche-liste recherche-details">
+        <article class="resultstlist fakeresults">
+            <ul class="stage-liste" id="resultats-details">
+            </ul>
+        </article>
+    </section>
 
     {% if lieux %}
         <section class="recherche-carte" id="recherche-carte">
             <div id="carte"></div>
+            <div id="vue-options2" class="vue-options">
+                <ul>
+                    <li><a href="javascript:void(0);" id="voir_hybride">Afficher la liste</a></li>
+                </ul>
+            </div>
             <script type="text/javascript">
              var lieux = [{{ lieux|join:',' }}];
              var interfaceRecherche = new InterfaceRecherche("{{ STATIC_URL|escapejs }}", "{% url 'avisstage:api_dispatch_list' resource_name="lieu" api_name="v1" %}", lieux);