Facets style

app/assets/stylesheets/extranet/_default/components/_facets.sass

@@ -20,4 +20,29 @@
             border-radius: 0
             height: 0.65em
             margin-top: 0.5em
-            width: 0.65em
\ No newline at end of file
+            width: 0.65em
+
+.faceted__facets
+    > li
+        margin-bottom: px2rem(40)
+        b
+            display: block
+            margin-bottom: px2rem(10)
+.faceted__facet
+    &__text
+        display: flex
+    &__list
+        display: flex
+        flex-wrap: wrap
+        &__value
+            @extend .btn-sm
+            background: $btn-facet-background
+            border: 0
+            color: $btn-facet-color
+            display: inline-block
+            margin-bottom: 10px
+            margin-right: 10px
+            min-width: px2rem(52)
+            padding: 2px 7px
+            &--selected
+                background: $btn-facet-background-active

app/assets/stylesheets/extranet/_default/layouts/_header.sass

@@ -5,8 +5,11 @@
             max-width: 100px
 
 header
+    align-items: baseline
     border-bottom: 1px solid
     border-top: 1px solid
+    display: flex
+    justify-content: space-between
     min-height: 160px
     h1, p
         padding-top: 3rem
\ No newline at end of file

app/views/extranet/application/facets/_search.html.erb

+<label for="search" class="form-label h2">Recherche</label>
+<div class="facet facet--search">
+  <div class="input-group">
+    <input class="form-control" list="search-datalist-options" id="search" placeholder="Entrez votre recherche...">
+    <datalist id="search-datalist-options">
+      <% dataList.each do |value| %>
+        <option value="<%= value %>">
+      <% end %>
+    </datalist>
+  </div>
+</div>

app/views/extranet/persons/index.html.erb

 <% content_for :title, University::Person::Alumnus.model_name.human(count: 2) %>
-
 <header class="mb-5">
-  <div class="row">
-    <div class="col-md-9">
-      <h1><%= University::Person::Alumnus.model_name.human(count: 2) %></h1>
-    </div>
-    <div class="col-md-3 text-end">
-      <p>
-        <%= @count %>
-        <%= University::Person::Alumnus.model_name.human(count: @count).downcase %>
-      </p>
-    </div>
-  </div>
+  <h1><%= University::Person::Alumnus.model_name.human(count: 2) %></h1>
+  <p>
+    <%= @count %>
+    <%= University::Person::Alumnus.model_name.human(count: @count).downcase %>
+  </p>
 </header>
 
 <div class="row">
-  <div class="col-lg-3">
+  <div class="col-md-3">
     <%= render 'faceted_search/facets', facets: @facets %>
+    <div class="facets">
+      <div class="mb-4">
+        <%= render 'extranet/application/facets/search', dataList: @people %>
+      </div>
+      <div class="mb-4">
+        <%= render 'extranet/application/facets/years' %>
+      </div>
+      <div class="mb-4">
+        <%= render 'extranet/application/facets/programs' %>
+      </div>
+    </div>
   </div>
   <div class="offset-lg-1 col-lg-8">
     <div class="row">