diff --git a/avisstage/sass/_recherche.scss b/avisstage/sass/_recherche.scss
index 09cf2cb..6bdb4f9 100644
--- a/avisstage/sass/_recherche.scss
+++ b/avisstage/sass/_recherche.scss
@@ -1,41 +1,145 @@
-form.recherche {
-    .generale {
-        display: block;
-        text-align: center;
-        
-        input[type="text"] {
-            max-width: 400px;
+section.content.recherche {
+    form.recherche {
+        .generale {
+            display: inline-block;
+            text-align: right;
+            position: relative;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 500px;
+            max-width: 100%;
+            white-space: nowrap;
+
+            span {
+                display:flex;
+            }
+            
+            input[type="text"] {
+                max-width: 500px;
+                padding: 10px;
+                border: 1px solid $fond;
+                margin:0 5px;
+            }
+            input {
+                display: inline;
+            }
+        }
+
+        .avancee {
+            background: #fff;
+            display: none;
+            padding: 15px;
+            margin-bottom: 15px;
+            
+            &.expanded {
+                display:block;
+            }
+
+            .help_text {
+                font-style: italic;
+                font-size: 0.9em;
+            }
+            
+            ul {
+                margin: 0 -5px;
+                display: flexbox;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                width: 100%;
+                
+                li {
+                    flex-grow: 1;
+                    width: 22%;
+                    min-width: 150px;
+                    margin: 5px 0;
+                    padding: 0 10px;
+
+                    label {
+                        font-weight: bold;
+                        font-size: 0.9em;
+                    }
+                    
+                    input[type="text"], input[type='number'], select {
+                        display: block;
+                        min-width: 150px;
+                        display: inline-block;
+                        width: 100%;
+                        font-size: 0.9em;
+                        background-color: #f8f8f8;
+                    }
+                    &.btnsubmit {
+                        text-align:right;
+                    }
+                    &.field__sujet, &.field__contexte {
+                        width:45%;
+                        min-width: 300px;
+                    }
+                    
+                }
+            }
         }
     }
 
-    .avancee {
-        ul {
-            display: flexbox;
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
+    &.vue-hybride, &.vue-carte {
+        width: 100%;
+        min-width: unset;
+        max-width: unset;
+        min-height: unset;
+        max-height: unset;
+        height: 90vh;
+        height: calc(100vh - 30px);
+        padding: 0;
+        margin: 0;
+
+        .recherche-carte, .recherche-liste {
+            height: 100%;
+        }
+        .recherche-liste {
+            overflow-y: auto;
+            padding: 15px;
+        }
+    }
+
+    &.vue-liste .recherche-carte,
+    &.vue-carte .recherche-liste {
+        display: none;
+    }
+    
+    &.vue-carte .recherche-carte,
+    &.vue-liste .recherche-liste {
+        display: block;
+        width: 100%;
+    }
+
+    &.vue-hybride {
+        display: flex;
+
+        .recherche-liste {
+            width: 40vw;
+            min-width: 500px;
+            max-width: 800px;
+        }
+        .recherche-carte {
+            flex-shrink: 1;
             width: 100%;
+        }
+    }
+
+    .vue-options {
+        text-align: center;
+        ul {
+            display: inline-block;
+            border-radius: 5px;
+            overflow: hidden;
             
             li {
-                flex-grow: 1;
-                width: 40%;
-                margin: 5px 0;
-                padding: 0 10px;
-
-                label {
-                    font-weight: bold;
-                    font-size: 0.9em;
+                display: inline-block;
+                background: #fff;
+                padding: 10px;
+                a {
+                    
                 }
-                input {
-                    display: block;
-                    min-width: 150px;
-                    display: inline-block;
-                    width: 100%;
-                }
-                &.field__sujet, &.field__contexte {
-                    width:100%;
-                }
-                
             }
         }
     }
diff --git a/avisstage/sass/screen.scss b/avisstage/sass/screen.scss
index bf6f6d0..09b204c 100644
--- a/avisstage/sass/screen.scss
+++ b/avisstage/sass/screen.scss
@@ -62,14 +62,14 @@ a {
 
 #feedback-button {
     position:fixed;
-    left:0;
+    right:0;
     top:30%;
     color:#fff;
     z-index:4;
     background: #000;
     padding: 14px;
-    transform: rotateZ(90deg);
-    transform-origin: bottom left;
+    transform: rotateZ(-90deg);
+    transform-origin: bottom right;
 }
 
 // Cartes
@@ -307,6 +307,12 @@ select {
     width: auto;
     margin-right: 5px;
     cursor: pointer;
+    padding: 0;
+    padding-right: 30px;
+    background: url($staticurl + "images/choix.svg") no-repeat;
+    background-position: right center;
+    background-color: #fff;
+    background-size: contain;
     
     option {
         padding: 3px;
diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css
index eea29ae..45fd80b 100644
--- a/avisstage/static/css/screen.css
+++ b/avisstage/static/css/screen.css
@@ -131,14 +131,14 @@ a {
 /* line 63, ../../sass/screen.scss */
 #feedback-button {
   position: fixed;
-  left: 0;
+  right: 0;
   top: 30%;
   color: #fff;
   z-index: 4;
   background: #000;
   padding: 14px;
-  transform: rotateZ(90deg);
-  transform-origin: bottom left;
+  transform: rotateZ(-90deg);
+  transform-origin: bottom right;
 }
 
 /* line 77, ../../sass/screen.scss */
@@ -649,22 +649,28 @@ select {
   width: auto;
   margin-right: 5px;
   cursor: pointer;
+  padding: 0;
+  padding-right: 30px;
+  background: url("/experiens/static/images/choix.svg") no-repeat;
+  background-position: right center;
+  background-color: #fff;
+  background-size: contain;
 }
-/* line 311, ../../sass/screen.scss */
+/* line 317, ../../sass/screen.scss */
 select option {
   padding: 3px;
   white-space: pre-wrap;
 }
-/* line 317, ../../sass/screen.scss */
+/* line 323, ../../sass/screen.scss */
 select optgroup option {
   padding-left: 10px;
 }
-/* line 320, ../../sass/screen.scss */
+/* line 326, ../../sass/screen.scss */
 select optgroup:before {
   font-weight: bold;
 }
 
-/* line 326, ../../sass/screen.scss */
+/* line 332, ../../sass/screen.scss */
 input[type="submit"], .btn {
   font: 19px "Dosis", sans-serif;
   background-color: #8fcc33;
@@ -675,17 +681,17 @@ input[type="submit"], .btn {
   display: inline-block;
 }
 
-/* line 336, ../../sass/screen.scss */
+/* line 342, ../../sass/screen.scss */
 p.submits {
   text-align: right;
 }
 
-/* line 340, ../../sass/screen.scss */
+/* line 346, ../../sass/screen.scss */
 form .commentaire {
   font-style: italic;
 }
 
-/* line 344, ../../sass/screen.scss */
+/* line 350, ../../sass/screen.scss */
 .edit-btn {
   border-color: #706c00;
   color: #000;
@@ -694,14 +700,14 @@ form .commentaire {
   background-origin: content-box;
   background-size: contain;
 }
-/* line 352, ../../sass/screen.scss */
+/* line 358, ../../sass/screen.scss */
 .edit-btn:after {
   content: "";
   width: 30px;
   display: inline-block;
 }
 
-/* line 359, ../../sass/screen.scss */
+/* line 365, ../../sass/screen.scss */
 textarea, div.tinymce {
   font-family: "Lato", sans-serif;
   border: none;
@@ -711,20 +717,20 @@ textarea, div.tinymce {
   transition: border 1s ease-out, background 1s ease-out;
 }
 
-/* line 368, ../../sass/screen.scss */
+/* line 374, ../../sass/screen.scss */
 textarea {
   height: 200px;
   resize: vertical;
 }
 
-/* line 376, ../../sass/screen.scss */
+/* line 382, ../../sass/screen.scss */
 form .field {
   margin: 5px 0;
   display: flex;
   background: #fff;
   padding: 10px;
 }
-/* line 382, ../../sass/screen.scss */
+/* line 388, ../../sass/screen.scss */
 form .field label, form .field .label {
   display: inline-block;
   width: 250px;
@@ -733,39 +739,39 @@ form .field label, form .field .label {
   padding-top: 5px;
   flex-shrink: 0;
 }
-/* line 390, ../../sass/screen.scss */
+/* line 396, ../../sass/screen.scss */
 form .field label.required:before, form .field .label.required:before {
   margin-right: 5px;
   content: "*";
   color: #f70978;
 }
-/* line 396, ../../sass/screen.scss */
+/* line 402, ../../sass/screen.scss */
 form .field label {
   font-family: Alegreya, serif;
   font-weight: bold;
 }
-/* line 400, ../../sass/screen.scss */
+/* line 406, ../../sass/screen.scss */
 form .field .help_text {
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 404, ../../sass/screen.scss */
+/* line 410, ../../sass/screen.scss */
 form .field .input {
   display: inline-block;
   flex-grow: 1;
   margin-right: 10px;
 }
 
-/* line 414, ../../sass/screen.scss */
+/* line 420, ../../sass/screen.scss */
 ul.as-selections {
   display: flex;
   flex-wrap: wrap;
 }
-/* line 418, ../../sass/screen.scss */
+/* line 424, ../../sass/screen.scss */
 ul.as-selections li {
   display: inline-block;
 }
-/* line 422, ../../sass/screen.scss */
+/* line 428, ../../sass/screen.scss */
 ul.as-selections .as-selection-item {
   padding: 0 5px;
   background: #f99b20;
@@ -774,52 +780,52 @@ ul.as-selections .as-selection-item {
   border-radius: 2px;
   font-weight: 500;
 }
-/* line 430, ../../sass/screen.scss */
+/* line 436, ../../sass/screen.scss */
 ul.as-selections .as-selection-item a.as-close {
   color: #fff;
   -webkit-cursor: pointer;
   cursor: pointer;
   margin-right: 5px;
 }
-/* line 437, ../../sass/screen.scss */
+/* line 443, ../../sass/screen.scss */
 ul.as-selections .as-selection-item.selected {
   background: #8fcc33;
 }
-/* line 442, ../../sass/screen.scss */
+/* line 448, ../../sass/screen.scss */
 ul.as-selections .as-original {
   flex-grow: 1;
   min-width: 200px;
 }
-/* line 446, ../../sass/screen.scss */
+/* line 452, ../../sass/screen.scss */
 ul.as-selections .as-original input {
   width: 100%;
 }
 
-/* line 452, ../../sass/screen.scss */
+/* line 458, ../../sass/screen.scss */
 div.as-results {
   position: relative;
 }
-/* line 454, ../../sass/screen.scss */
+/* line 460, ../../sass/screen.scss */
 div.as-results ul {
   position: absolute;
   width: 100%;
   background: #fff;
   border: 1px solid #d2ebad;
 }
-/* line 461, ../../sass/screen.scss */
+/* line 467, ../../sass/screen.scss */
 div.as-results ul li {
   padding: 3px 5px;
 }
-/* line 467, ../../sass/screen.scss */
+/* line 473, ../../sass/screen.scss */
 div.as-results ul li.as-result-item.active {
   background: #fddeb5;
 }
-/* line 472, ../../sass/screen.scss */
+/* line 478, ../../sass/screen.scss */
 div.as-results ul li.as-message {
   font-style: italic;
 }
 
-/* line 482, ../../sass/screen.scss */
+/* line 488, ../../sass/screen.scss */
 .window {
   display: none;
   position: fixed;
@@ -830,11 +836,11 @@ div.as-results ul li.as-message {
   left: 0;
   z-index: 50;
 }
-/* line 492, ../../sass/screen.scss */
+/* line 498, ../../sass/screen.scss */
 .window.visible {
   display: block;
 }
-/* line 496, ../../sass/screen.scss */
+/* line 502, ../../sass/screen.scss */
 .window .window-bg {
   background: #000;
   opacity: 0.7;
@@ -845,7 +851,7 @@ div.as-results ul li.as-message {
   top: 0;
   z-index: -1;
 }
-/* line 507, ../../sass/screen.scss */
+/* line 513, ../../sass/screen.scss */
 .window .window-content {
   position: relative;
   margin: 0 auto;
@@ -859,11 +865,11 @@ div.as-results ul li.as-message {
   max-height: 100%;
   overflow: auto;
 }
-/* line 521, ../../sass/screen.scss */
+/* line 527, ../../sass/screen.scss */
 .window .window-content form label, .window .window-content form .label {
   width: 150px;
 }
-/* line 527, ../../sass/screen.scss */
+/* line 533, ../../sass/screen.scss */
 .window .window-closer {
   position: absolute;
   top: 0;
@@ -871,65 +877,65 @@ div.as-results ul li.as-message {
   padding: 12px;
   z-index: 3;
 }
-/* line 533, ../../sass/screen.scss */
+/* line 539, ../../sass/screen.scss */
 .window .window-closer:after {
   content: "×";
 }
 
-/* line 544, ../../sass/screen.scss */
+/* line 550, ../../sass/screen.scss */
 #lieu_widget .lieu-ui {
   position: relative;
 }
-/* line 546, ../../sass/screen.scss */
+/* line 552, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .map {
   height: 400px;
   width: 100%;
 }
-/* line 550, ../../sass/screen.scss */
+/* line 556, ../../sass/screen.scss */
 #lieu_widget .lieu-ui.hidden {
   display: none;
 }
-/* line 553, ../../sass/screen.scss */
+/* line 559, ../../sass/screen.scss */
 #lieu_widget .lieu-ui .masked {
   visibility: hidden;
 }
-/* line 558, ../../sass/screen.scss */
+/* line 564, ../../sass/screen.scss */
 #lieu_widget .lieu-choixmodif {
   display: none;
 }
-/* line 563, ../../sass/screen.scss */
+/* line 569, ../../sass/screen.scss */
 #lieu_widget.modif .lieu-choixmodif {
   display: unset;
 }
-/* line 568, ../../sass/screen.scss */
+/* line 574, ../../sass/screen.scss */
 #lieu_widget.modif .lieu-ui, #lieu_widget.attente .lieu-ui {
   display: none;
 }
-/* line 575, ../../sass/screen.scss */
+/* line 581, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .lieu-acinput {
   display: none;
 }
-/* line 578, ../../sass/screen.scss */
+/* line 584, ../../sass/screen.scss */
 #lieu_widget.edit .lieu-ui .map {
   height: 200px;
 }
-/* line 584, ../../sass/screen.scss */
+/* line 590, ../../sass/screen.scss */
 #lieu_widget #avis_lieu_vide {
   display: none;
 }
-/* line 588, ../../sass/screen.scss */
+/* line 594, ../../sass/screen.scss */
 #lieu_widget .message {
   background: #fddeb5;
   padding: 5px;
   font-style: italic;
   font-size: 0.9em;
 }
-/* line 594, ../../sass/screen.scss */
+/* line 600, ../../sass/screen.scss */
 #lieu_widget .message.hidden {
   display: none;
 }
 
-/* line 600, ../../sass/screen.scss */
+/* line 606, ../../sass/screen.scss */
 a.lieu-change {
   color: #fff;
   background: #f99b20;
@@ -942,25 +948,25 @@ a.lieu-change {
   border-radius: 5px;
   margin-right: 7px;
 }
-/* line 612, ../../sass/screen.scss */
+/* line 618, ../../sass/screen.scss */
 a.lieu-change.ajout:before {
   content: "+";
   margin-right: 5px;
 }
 
-/* line 618, ../../sass/screen.scss */
+/* line 624, ../../sass/screen.scss */
 #stages-map {
   width: 100%;
   height: 600px;
   max-height: 90vh;
 }
 
-/* line 625, ../../sass/screen.scss */
+/* line 631, ../../sass/screen.scss */
 #id_stage-thematiques {
   display: none;
 }
 
-/* line 631, ../../sass/screen.scss */
+/* line 637, ../../sass/screen.scss */
 .homeh1 {
   display: flex;
   justify-content: space-between;
@@ -970,22 +976,22 @@ a.lieu-change.ajout:before {
   border-bottom: 3px solid #000;
   margin-bottom: 15px;
 }
-/* line 640, ../../sass/screen.scss */
+/* line 646, ../../sass/screen.scss */
 .homeh1 > * {
   display: inline-block;
 }
-/* line 643, ../../sass/screen.scss */
+/* line 649, ../../sass/screen.scss */
 .homeh1 p {
   text-align: right;
 }
 
-/* line 648, ../../sass/screen.scss */
+/* line 654, ../../sass/screen.scss */
 .betacadre {
   background: #fa6cae;
   padding: 10px;
 }
 
-/* line 653, ../../sass/screen.scss */
+/* line 659, ../../sass/screen.scss */
 .entrer {
   background: #fff;
   max-width: 500px;
@@ -994,84 +1000,84 @@ a.lieu-change.ajout:before {
   margin: 15px auto;
 }
 
-/* line 661, ../../sass/screen.scss */
+/* line 667, ../../sass/screen.scss */
 article.promo {
   display: block;
   font-size: 1.1em;
 }
-/* line 665, ../../sass/screen.scss */
+/* line 671, ../../sass/screen.scss */
 article.promo .explications {
   display: table;
 }
-/* line 668, ../../sass/screen.scss */
+/* line 674, ../../sass/screen.scss */
 article.promo .explications:first-child {
   direction: rtl;
 }
-/* line 670, ../../sass/screen.scss */
+/* line 676, ../../sass/screen.scss */
 article.promo .explications:first-child > * {
   direction: ltr;
 }
-/* line 675, ../../sass/screen.scss */
+/* line 681, ../../sass/screen.scss */
 article.promo .explications > div {
   display: table-cell;
   vertical-align: middle;
   text-align: center;
 }
-/* line 680, ../../sass/screen.scss */
+/* line 686, ../../sass/screen.scss */
 article.promo .explications > div p {
   margin: 15px 15px;
 }
 
-/* line 688, ../../sass/screen.scss */
+/* line 694, ../../sass/screen.scss */
 .faq-toc {
   font-family: "Lato", sans-serif;
   display: block;
   max-width: 700px;
   margin: 0 auto;
 }
-/* line 693, ../../sass/screen.scss */
+/* line 699, ../../sass/screen.scss */
 .faq-toc ul {
   margin: 20px;
 }
-/* line 697, ../../sass/screen.scss */
+/* line 703, ../../sass/screen.scss */
 .faq-toc ul li a {
   color: #000;
   display: block;
   padding: 5px;
 }
-/* line 703, ../../sass/screen.scss */
+/* line 709, ../../sass/screen.scss */
 .faq-toc ul li.toc-h1 {
   display: none;
 }
-/* line 707, ../../sass/screen.scss */
+/* line 713, ../../sass/screen.scss */
 .faq-toc ul li.toc-h2 a {
   background: #fcc883;
 }
-/* line 711, ../../sass/screen.scss */
+/* line 717, ../../sass/screen.scss */
 .faq-toc ul li.toc-h3 a {
   padding-left: 10px;
   background: #fff;
   font-weight: normal;
 }
-/* line 717, ../../sass/screen.scss */
+/* line 723, ../../sass/screen.scss */
 .faq-toc ul li a:hover {
   color: #395214;
   background: #bce085 !important;
 }
 
-/* line 726, ../../sass/screen.scss */
+/* line 732, ../../sass/screen.scss */
 .faq article {
   background: #fff;
   padding: 15px;
 }
-/* line 729, ../../sass/screen.scss */
+/* line 735, ../../sass/screen.scss */
 .faq article h2 {
   background-color: #fcc883;
   color: #ae6505;
   margin: -15px;
   padding: 15px;
 }
-/* line 736, ../../sass/screen.scss */
+/* line 742, ../../sass/screen.scss */
 .faq article h3 {
   color: #0f4c82;
   background-color: #9dcbf3;
@@ -1079,19 +1085,19 @@ article.promo .explications > div p {
   margin-top: 30px;
   padding: 10px 15px;
 }
-/* line 743, ../../sass/screen.scss */
+/* line 749, ../../sass/screen.scss */
 .faq article h3:nth-child(2) {
   margin-top: 0;
 }
-/* line 748, ../../sass/screen.scss */
+/* line 754, ../../sass/screen.scss */
 .faq article ul {
   padding-left: 20px;
 }
-/* line 750, ../../sass/screen.scss */
+/* line 756, ../../sass/screen.scss */
 .faq article ul li {
   list-style: initial;
 }
-/* line 755, ../../sass/screen.scss */
+/* line 761, ../../sass/screen.scss */
 .faq article p, .faq article ul {
   font-family: "Lato", sans-serif;
   font-size: 18px;
@@ -1100,45 +1106,148 @@ article.promo .explications > div p {
   margin-right: 5%;
 }
 
-/* line 2, ../../sass/_recherche.scss */
-form.recherche .generale {
+/* line 3, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .generale {
+  display: inline-block;
+  text-align: right;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 500px;
+  max-width: 100%;
+  white-space: nowrap;
+}
+/* line 13, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .generale span {
+  display: flex;
+}
+/* line 17, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .generale input[type="text"] {
+  max-width: 500px;
+  padding: 10px;
+  border: 1px solid #8fcc33;
+  margin: 0 5px;
+}
+/* line 23, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .generale input {
+  display: inline;
+}
+/* line 28, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee {
+  background: #fff;
+  display: none;
+  padding: 15px;
+  margin-bottom: 15px;
+}
+/* line 34, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee.expanded {
   display: block;
-  text-align: center;
 }
-/* line 6, ../../sass/_recherche.scss */
-form.recherche .generale input[type="text"] {
-  max-width: 400px;
+/* line 38, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee .help_text {
+  font-style: italic;
+  font-size: 0.9em;
 }
-/* line 12, ../../sass/_recherche.scss */
-form.recherche .avancee ul {
+/* line 43, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee ul {
+  margin: 0 -5px;
   display: flexbox;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   width: 100%;
 }
-/* line 19, ../../sass/_recherche.scss */
-form.recherche .avancee ul li {
+/* line 51, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee ul li {
   flex-grow: 1;
-  width: 40%;
+  width: 22%;
+  min-width: 150px;
   margin: 5px 0;
   padding: 0 10px;
 }
-/* line 25, ../../sass/_recherche.scss */
-form.recherche .avancee ul li label {
+/* line 58, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee ul li label {
   font-weight: bold;
   font-size: 0.9em;
 }
-/* line 29, ../../sass/_recherche.scss */
-form.recherche .avancee ul li input {
+/* line 63, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee ul li input[type="text"], section.content.recherche form.recherche .avancee ul li input[type='number'], section.content.recherche form.recherche .avancee ul li select {
   display: block;
   min-width: 150px;
   display: inline-block;
   width: 100%;
+  font-size: 0.9em;
+  background-color: #f8f8f8;
 }
-/* line 35, ../../sass/_recherche.scss */
-form.recherche .avancee ul li.field__sujet, form.recherche .avancee ul li.field__contexte {
+/* line 71, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee ul li.btnsubmit {
+  text-align: right;
+}
+/* line 74, ../../sass/_recherche.scss */
+section.content.recherche form.recherche .avancee ul li.field__sujet, section.content.recherche form.recherche .avancee ul li.field__contexte {
+  width: 45%;
+  min-width: 300px;
+}
+/* line 84, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride, section.content.recherche.vue-carte {
   width: 100%;
+  min-width: unset;
+  max-width: unset;
+  min-height: unset;
+  max-height: unset;
+  height: 90vh;
+  height: calc(100vh - 30px);
+  padding: 0;
+  margin: 0;
+}
+/* line 95, ../../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 */
+section.content.recherche.vue-hybride .recherche-liste, section.content.recherche.vue-carte .recherche-liste {
+  overflow-y: auto;
+  padding: 15px;
+}
+/* line 104, ../../sass/_recherche.scss */
+section.content.recherche.vue-liste .recherche-carte, section.content.recherche.vue-carte .recherche-liste {
+  display: none;
+}
+/* line 109, ../../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 */
+section.content.recherche.vue-hybride {
+  display: flex;
+}
+/* line 118, ../../sass/_recherche.scss */
+section.content.recherche.vue-hybride .recherche-liste {
+  width: 40vw;
+  min-width: 500px;
+  max-width: 800px;
+}
+/* line 123, ../../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 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;
 }
 
 @media screen and (max-width: 850px) {
diff --git a/avisstage/static/images/choix.svg b/avisstage/static/images/choix.svg
new file mode 100644
index 0000000..ed9897a
--- /dev/null
+++ b/avisstage/static/images/choix.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="40"
+   height="40"
+   viewBox="0 0 40.000001 40.000001"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="choix.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="-158.22667"
+     inkscape:cy="-53.805144"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1366"
+     inkscape:window-height="720"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1012.3622)">
+    <path
+       sodipodi:type="star"
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:1"
+       id="path3338"
+       sodipodi:sides="3"
+       sodipodi:cx="154.28571"
+       sodipodi:cy="312.36221"
+       sodipodi:r1="49.897854"
+       sodipodi:r2="24.948927"
+       sodipodi:arg1="-0.52359878"
+       sodipodi:arg2="0.52359878"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 197.49851,287.41329 -43.2128,74.84678 -43.21281,-74.84678 z"
+       inkscape:transform-center-y="1.3333278"
+       transform="matrix(0.18513029,0,0,0.10688502,-8.5629579,997.64203)" />
+  </g>
+</svg>
diff --git a/avisstage/templates/avisstage/base.html b/avisstage/templates/avisstage/base.html
index 955d573..0fa7550 100644
--- a/avisstage/templates/avisstage/base.html
+++ b/avisstage/templates/avisstage/base.html
@@ -46,7 +46,7 @@
             {% feedback_widget %}
         {% endif %}
         
-        <section class="content">
+        <section class="content {% block extra_content_class %}{% endblock %}">
             {% if messages %}
                 <ul class="messages">
                     {% for message in messages %}
diff --git a/avisstage/templates/avisstage/liste/recherche_resultats.html b/avisstage/templates/avisstage/liste/recherche_resultats.html
index 6c1535f..85ab75d 100644
--- a/avisstage/templates/avisstage/liste/recherche_resultats.html
+++ b/avisstage/templates/avisstage/liste/recherche_resultats.html
@@ -1,52 +1,81 @@
 {% extends "avisstage/base.html" %}
 {% load staticfiles %}
 
-{% block title %}Dernières mises à jour - ExperiENS{% endblock %}
-    
+{% block title %}Chercher un stage - ExperiENS{% endblock %}
+
+{% block extra_content_class %}recherche {{ vue }}{% endblock %}
+
 {% block content %}
-    
-    <h1>Résultats de la recherche</h1>
-    <form class="recherche" method="GET" action="">
-        <p class="generale">{{ form.generique }} <input type="submit" action="submit" value="Rechercher"/></p>
-        <a class="toggle_avancee" href="#">Recherche avancée</a>
-        <div class="avancee">
-            <ul>
-                {% for field in form %}
-                    {% if field != form.generique %}
-                        <li class="field__{{ field.name }}">
-                            {% if field.label %}{{ field.label_tag }}{% endif %}
-                            {{ field }}
-                        </li>
+    <section class="recherche-liste">
+        <h1>Recherche</h1>
+        <form class="recherche" method="GET" action="">
+            <div>
+                <p class="generale">
+                    <span>
+                        {{ form.generique }}
+                        <input type="submit" action="submit" value="Chercher un stage"/>
+                    </span>
+                    <a class="toggle_avancee" href="#" onclick="$('#recherche_avancee').toggleClass('expanded'); return false;">Recherche avancée</a>
+                </p>
+            </div>
+            <div class="avancee" id="recherche_avancee">
+                <p class="help_text">Le champ principal (ci-dessus) est aussi utilisé dans la recherche, ces champs ne servent qu'à filtrer plus précisément</p>
+                <ul>
+                    {% for field in form %}
+                        {% if field != form.generique %}
+                            <li class="field__{{ field.name }}">
+                                {% if field.label %}{{ field.label_tag }}{% endif %}
+                                {{ field }}
+                            </li>
+                        {% endif %}
+                    {% endfor %}
+                    <li class="btnsubmit">
+                        <input type="submit" action="submit" value="Chercher un stage"/>
+                    </li>
+                </ul>
+            </div>
+        </form>
+        <article class="resultslist">
+            <h2>Résultats de la recherche</h2>
+            <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>
+                </ul>
+            </div>
+            <ul class="stage-liste">
+                {% for stage in stages %}
+                    {% if tri == '-date_maj' %}
+                        {% ifchanged stage.date_maj.date %}<li class="date-maj">Mis à jour le {{ stage.date_maj.date }}</li>{% endifchanged %}
                     {% endif %}
+                    <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="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 %}
+                                {% for matiere in stage.matieres.all %}
+                                    <li class="matiere">{{ matiere.nom }}</li>
+                                {% endfor %}
+                                {% for thematique in stage.thematiques.all %}
+                                    <li class="thematique">{{ thematique.name }}</li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    </li>
+                {% empty %}
+                    <li class="stage">Aucun stage ne correspond à votre recherche et vos critères</li>
                 {% endfor %}
             </ul>
-            <input type="submit" action="submit" value="Rechercher"/>
-        </div>
-    </form>
-    <article>
-        <ul class="stage-liste">
-            {% for stage in stages %}
-                {% ifchanged stage.date_maj.date %}<li class="date-maj">Mis à jour le {{ stage.date_maj.date }}</li>{% endifchanged %}
-                <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="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 %}
-                            {% for matiere in stage.matieres.all %}
-                                <li class="matiere">{{ matiere.nom }}</li>
-                            {% endfor %}
-                            {% for thematique in stage.thematiques.all %}
-                                <li class="thematique">{{ thematique.name }}</li>
-                            {% endfor %}
-                        </ul>
-                    </div>
-                </li>
-            {% endfor %}
-        </ul>
-    </article>
+        </article>
+    </section>
+    <section class="recherche-carte">
+
+    </section>
 {% endblock %}
diff --git a/avisstage/views_search.py b/avisstage/views_search.py
index b263559..5b07e4b 100644
--- a/avisstage/views_search.py
+++ b/avisstage/views_search.py
@@ -16,26 +16,26 @@ from datetime import date
 class SearchForm(forms.Form):
     generique = forms.CharField(required=False)
     sujet = forms.CharField(label=u'À propos de', required=False)
-    sujet.full_line = True
+    contexte = forms.CharField(label=u'Contexte (lieu, encadrant⋅e⋅s, structure)',
+                               required=False)
     
     apres_annee = forms.IntegerField(label=u'Après cette année', required=False)
     avant_annee = forms.IntegerField(label=u'Avant cette année', required=False)
 
-    type_stage = forms.ChoiceField(label="", choices=([('', u'Type de stage')]
+    type_stage = forms.ChoiceField(label="Type de stage", choices=([('', u'')]
                                             + list(TYPE_STAGE_OPTIONS)),
                                    required=False)
-    niveau_scol = forms.ChoiceField(label="", choices=([('', u'Année d\'études')]
+    niveau_scol = forms.ChoiceField(label="Année d'étude", choices=([('', u'')]
                                              + list(NIVEAU_SCOL_OPTIONS)),
                                     required=False)
     
-    contexte = forms.CharField(label=u'Contexte (lieu, encadrant⋅e⋅s, structure)',
-                               required=False)
-    type_lieu = forms.ChoiceField(choices=([('', u'Type de lieu d\'accueil')]
+    type_lieu = forms.ChoiceField(label=u"Type de lieu d'accueil",
+                                  choices=([('', u'')]
                                            + list(TYPE_LIEU_OPTIONS)),
                                   required=False)
-    tri = forms.ChoiceField(label=u'Trier par',
-                            choices=[('pertinence', u'Par pertinence'),
-                                     ('-date_maj',u'Par dernière mise à jour')],
+    tri = forms.ChoiceField(label=u'Tri par',
+                            choices=[('pertinence', u'Pertinence'),
+                                     ('-date_maj',u'Dernière mise à jour')],
                             required=False, initial='pertinence')
 
 
@@ -111,19 +111,30 @@ def cherche(**kwargs):
 
     print filtres
     resultat = Stage.objects.filter(filtres)
-    
+    tri = 'pertinence'
+
+    if not use_dsl:
+        kwargs['tri'] = '-date_maj'
+        
     if field_relevant('tri') and kwargs['tri'] != 'pertinence':
+        tri = kwargs['tri']
         resultat = resultat.order_by(kwargs['tri'])
-    return resultat
+
+    return resultat, tri
     
 @login_required
 def recherche(request):
     stages = []
+    tri = ''
+    vue = 'vue-liste'
     if request.method == "GET":
         form = SearchForm(request.GET)
         if form.is_valid():
-            stages = cherche(**form.cleaned_data)
+            stages, tri = cherche(**form.cleaned_data)
     else:
         form = SearchForm()
+    if stages:
+        vue = 'vue-hybride'
     return render(request, 'avisstage/liste/recherche_resultats.html',
-                  {"form": form, "stages":stages})
+                  {"form": form, "stages":stages,
+                   "tri": tri, "vue": vue})