From 091e23dd32f9540e1da21d7a2c4880782b2ebba0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Fri, 23 Jun 2023 16:08:52 +0200
Subject: [PATCH 01/36] #THE-799 premiere modelisation de la simplification du
 design

---
 src/App.vue                                   |  7 ++--
 src/components/common/results/FacetDrawer.vue | 32 +++++++++++++++----
 src/components/common/results/FacetsChips.vue |  1 +
 .../common/results/FacetsHeader.vue           | 13 +++++---
 src/components/common/results/FacetsList.vue  |  9 ++----
 .../common/results/ResultComponents.vue       | 12 ++-----
 src/components/common/results/ResultList.vue  |  8 ++++-
 .../common/results/ResultPagination.vue       |  3 --
 .../personnes/results/PersonnesCard.vue       |  4 +--
 src/components/theses/results/ResultCard.vue  | 16 ++--------
 src/views/ResultView.vue                      | 11 ++++---
 11 files changed, 60 insertions(+), 56 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 592022f2..269602e1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,15 +56,12 @@ main {
   color: rgb(var(--v-theme-text-dark-blue)) !important;
 
   nav {
-    background-color: rgb(var(--v-theme-gris-clair));
     width: 100vw;
   }
 
   .nav-bar {
-    height: 100%;
-    width: 100%;
-    max-width: 20vw;
-    border-right: 3px solid rgb(var(--v-theme-text-dark-blue));
+    grid-column-start: 2;
+    background-color: rgb(var(--v-theme-surface));
   }
 
   .mobile-nav-bar {
diff --git a/src/components/common/results/FacetDrawer.vue b/src/components/common/results/FacetDrawer.vue
index 723f6426..ee7c9a48 100644
--- a/src/components/common/results/FacetDrawer.vue
+++ b/src/components/common/results/FacetDrawer.vue
@@ -10,7 +10,7 @@
           {{ facet.name }}
         </h3>
         <v-btn @click.stop="" @click="reinitializeCheckboxes" class="reinitialize-button" size="small" depressed
-          elevation="0" color="primary">
+          elevation="0" color="surface">
           <v-icon>mdi-reload</v-icon>
         </v-btn>
       </v-expansion-panel-title>
@@ -21,6 +21,7 @@
             class="facet-search-bar"></v-text-field>
         </div>
         <div class="panel-text" ref="`facet-${facet.name}`">
+<!--          Facette date-->
           <div v-if="date" class="date-container">
             <span class="date-item">
               <p>{{ $t("results.drawer.from") }}</p>
@@ -37,12 +38,15 @@
               </vue-date-picker>
             </span>
           </div>
+<!--          Fin Facette date-->
+<!--          Facettes texte-->
           <div v-else v-for="(facetItem, index) in facetItems" :key="`facet-${facetItem.name}`">
             <facet-checkbox v-if="facetItem.selected" :key="`${facet.name}-value-${index}`" :facets-array="facetsArray"
               :facet-name="facet.name" :facet-item="facetItem" @updateFilterData="updateFilterData"
               :margin-offset="marginOffset" />
           </div>
         </div>
+<!--          Fin Facettes texte-->
       </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
@@ -224,11 +228,26 @@ watch(() => props.parametersLoaded,
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
+.v-expansion-panel {
+  border-radius: 0;
+}
+
 .v-expansion-panel-title {
   gap: 10px;
   flex-wrap: nowrap;
   padding: 0 10px;
   overflow: hidden;
+  border-radius: unset;
+}
+
+.v-expansion-panel--active > .v-expansion-panel-title {
+  min-height: 48px;
+}
+
+// #TODO hover : pas de changement de couleur -> trouver le bon selecteur
+.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
+  opacity: 1 !important;
+  background-color: rgb(var(--v-theme-surface));
 }
 
 .v-expansion-panel :deep(.v-expansion-panel__shadow) {
@@ -237,7 +256,7 @@ watch(() => props.parametersLoaded,
 
 .v-expansion-panel-title :deep(.v-expansion-panel-title__icon) {
   order: 1;
-  color: rgb(var(--v-theme-orange-abes));
+  color: rgb(var(--v-theme-primary));
 }
 
 .reinitialize-button {
@@ -248,13 +267,16 @@ watch(() => props.parametersLoaded,
 
 .facet-title {
   text-align: start;
-  text-transform: uppercase;
   overflow: hidden;
   flex-grow: 2;
   order: 2;
   background-color: transparent;
   padding-top: 5px;
   padding-bottom: 5px;
+  font-family: Roboto-Medium, sans-serif;
+  font-weight: 600;
+  color: rgba(var(--v-theme-primary));
+  opacity: 0.8;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
     font-size: 15px;
@@ -283,10 +305,6 @@ watch(() => props.parametersLoaded,
   padding: 0;
 }
 
-.facet-title-panel {
-  background-color: rgb(var(--v-theme-gris-clair));
-}
-
 .date-container {
   display: flex;
 
diff --git a/src/components/common/results/FacetsChips.vue b/src/components/common/results/FacetsChips.vue
index 3a615e31..bf61eb54 100644
--- a/src/components/common/results/FacetsChips.vue
+++ b/src/components/common/results/FacetsChips.vue
@@ -42,6 +42,7 @@ function deleteFilter(facet) {
 
 <style scoped lang="scss">
   .chips-list {
+    margin: 0 1rem;
     display: flex;
     flex-wrap: wrap;
     padding: 6px 0 18px;
diff --git a/src/components/common/results/FacetsHeader.vue b/src/components/common/results/FacetsHeader.vue
index 97cf9d80..83e655b2 100644
--- a/src/components/common/results/FacetsHeader.vue
+++ b/src/components/common/results/FacetsHeader.vue
@@ -5,7 +5,7 @@
       <span class="facet-title-header">{{ $t('results.facetsHeader') }}</span>
     </div>
     <v-btn v-if="!mobile" @click.stop="" @click="searchAndReinitializeAllFacets" size="small" depressed elevation="0"
-      color="primary" class="desktop-reinitialize-button">
+      color="surface" class="desktop-reinitialize-button">
       Réinitialiser
     </v-btn>
     <button v-else @click="closeOverlay" class="close-overlay-button" elevation="0" color="transparent">
@@ -47,14 +47,15 @@ function closeOverlay() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 10%;
+  padding-left: 10%;
+  padding-right: 2%;
   width: 100%;
   min-height: 4rem;
-  background-color: rgb(var(--v-theme-gris-clair));
   font-size: 22px;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
-    padding: 0 7%;
+    padding-left: 7%;
+    padding-right: 2%;
     font-size: 16px;
   }
 }
@@ -125,7 +126,9 @@ function closeOverlay() {
 }
 
 .desktop-reinitialize-button {
-  padding: 0 12px;
+  height: unset;
+  align-self: flex-start;
+  margin-top: 12px;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
     font-size: 10px;
diff --git a/src/components/common/results/FacetsList.vue b/src/components/common/results/FacetsList.vue
index be395151..fb803bd9 100644
--- a/src/components/common/results/FacetsList.vue
+++ b/src/components/common/results/FacetsList.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="facets">
     <facet-drawer v-if="domaine === 'theses' && Object.keys(facets).length > 0" date key="facet-date"
-                  :facet="{ 'name': 'Date' }" class="my-2" :facets-array="facetsArray" :parameters-loaded="parametersLoaded"
+                  :facet="{ 'name': 'Date' }" :facets-array="facetsArray" :parameters-loaded="parametersLoaded"
                   :reinitialize-date-fields-trigger="reinitializeDateFieldsTrigger"
                   :reinitialize-date-from-trigger="reinitializeDateFromTrigger"
                   :reinitialize-date-to-trigger="reinitializeDateToTrigger" @updateFilterDateOnly="updateFilterDateOnly($event)"
                   @reinitializeCheckboxes="reinitializeDates">
     </facet-drawer>
-    <facet-drawer v-for="facet in facets" class="my-2" :key="`facet-${facet.name}`" :facet="facet"
+    <facet-drawer v-for="facet in facets" :key="`facet-${facet.name}`" :facet="facet"
                   :facets-array="facetsArray" @updateFilterData="updateFilterData" @reinitializeCheckboxes="reinitializeCheckboxes">
     </facet-drawer>
     <v-btn v-if="mobile" class="filters-btn" @click="update">Appliquer les filtres</v-btn>
@@ -353,11 +353,6 @@ watch(() => props.parametersLoaded, () => {
 .facets {
   display: flex;
   flex-direction: column;
-  padding: 1em 0;
-
-  .v-expansion-panels {
-    width: 85%;
-  }
 
   .skeleton {
     height: 48px !important;
diff --git a/src/components/common/results/ResultComponents.vue b/src/components/common/results/ResultComponents.vue
index d4cfb511..154201cd 100644
--- a/src/components/common/results/ResultComponents.vue
+++ b/src/components/common/results/ResultComponents.vue
@@ -24,7 +24,7 @@
     <div v-if="mobile || dataReady" class="colonnes-resultats">
       <result-list :result="result" :domain-name-change="domainNameChange">
       </result-list>
-      <ScrollToTopButton v-if="!mobile && moreThanXResults(5)" class="scroll-to-top-wrapper" :nb-result=nbResult />
+<!--      <ScrollToTopButton v-if="!mobile && moreThanXResults(5)" class="scroll-to-top-wrapper" :nb-result=nbResult />-->
     </div>
     <div v-else>
       <div v-for="i in currentShowingNumber" :key="i" class="skeleton">
@@ -161,13 +161,8 @@ watch(() => props.resetShowingNumber, () => {
 @use 'vuetify/settings';
 
 .colonnes-resultats {
-  padding: 0;
-  display: grid;
-  grid-template-columns: 95% auto;
-
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     grid-template-columns: none;
-    margin-right: 1rem;
   }
 }
 
@@ -177,7 +172,7 @@ watch(() => props.resetShowingNumber, () => {
 }
 
 .result-components-wrapper {
-  padding: 1rem 0 2rem 1rem;
+  padding: 1rem 0 2rem 0;
   flex: 1;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
@@ -193,9 +188,7 @@ watch(() => props.resetShowingNumber, () => {
 
 .v-card {
   margin-bottom: 1rem;
-  border: solid 1px rgb(var(--v-theme-gris-fonce));
   min-height: 190px;
-
 }
 
 .skeleton {
@@ -216,6 +209,7 @@ watch(() => props.resetShowingNumber, () => {
 }
 
 .returned-results-statement {
+  margin: 0 1rem;
   display: inline-block;
   font-family: Roboto-Medium, sans-serif;
   font-weight: 500;
diff --git a/src/components/common/results/ResultList.vue b/src/components/common/results/ResultList.vue
index 2f77924d..d962378c 100644
--- a/src/components/common/results/ResultList.vue
+++ b/src/components/common/results/ResultList.vue
@@ -7,12 +7,13 @@
   </div>
   <!--  Thèses-->
   <div v-else-if="domainNameChange === 'theses'">
-    <div v-for="item in result" :key="item" class="card-wrapper">
+    <div v-for="(item, index) in result" :key="item" class="card-wrapper">
       <result-card :titre="item.titrePrincipal"
         :date="item.status === 'enCours' ? item.datePremiereInscriptionDoctorat : item.dateSoutenance"
         :auteur="item.auteurs" :directeurs="item.directeurs" :discipline="item.discipline" :etab="item.etabSoutenanceN"
         :id="item.id" :status="item.status">
       </result-card>
+      <hr class="result-dividers" v-if="index < result.length - 1" />
     </div>
   </div>
 </template>
@@ -36,4 +37,9 @@ const props = defineProps({
 .card-wrapper {
   margin-bottom: 1rem;
 }
+
+.result-dividers {
+  border: 1px solid rgb(var(--v-theme-gris-clair));
+  margin:0 1rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/common/results/ResultPagination.vue b/src/components/common/results/ResultPagination.vue
index 71cf4683..4e0ff74c 100644
--- a/src/components/common/results/ResultPagination.vue
+++ b/src/components/common/results/ResultPagination.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="result-pagination">
       <div v-if="type === 'top'" class="first-bar-element">
-          <span class="show-span no-wrap-text">{{ $t('results.show') }}</span>
           <v-select :items="['10', '25', '50']" v-model="currentShowingNumber" density="compact" variant="solo"
                      class="left-select" menu-icon="mdi-chevron-down">
             <template v-slot:menu-icon>
@@ -129,7 +128,6 @@ watch(() => props.currentShowingNumber, () => {
 @use '../../../../node_modules/vuetify/settings';
 
 .result-pagination {
-  background-color: rgb(var(--v-theme-gris-clair));
   max-height: 4rem;
   display: flex;
   flex-wrap: nowrap;
@@ -151,7 +149,6 @@ watch(() => props.currentShowingNumber, () => {
   padding-top: 22px;
 }
 
-
 .left-select {
   max-width: 50px;
   margin: 10px 8px 0;
diff --git a/src/components/personnes/results/PersonnesCard.vue b/src/components/personnes/results/PersonnesCard.vue
index 04d2c727..bba90b87 100644
--- a/src/components/personnes/results/PersonnesCard.vue
+++ b/src/components/personnes/results/PersonnesCard.vue
@@ -44,7 +44,7 @@
       </div>
     </div>
     <div class="vertical-spacer"></div>
-    <div class="secondHalf">
+    <div class="second-half">
       <div class="disciplines">
         <template v-for="name in item.disciplines" :key="name">
           {{ name }}<span class="separator">; </span>
@@ -223,7 +223,7 @@ function goToPersonne(hash) {
   flex: 1;
 }
 
-.secondHalf {
+.second-half {
 
   justify-content: space-between;
   align-items: center;
diff --git a/src/components/theses/results/ResultCard.vue b/src/components/theses/results/ResultCard.vue
index 9b7f3ab0..ce8d8850 100644
--- a/src/components/theses/results/ResultCard.vue
+++ b/src/components/theses/results/ResultCard.vue
@@ -27,7 +27,7 @@
       </v-card-title>
     </div>
     <div class="vertical-spacer"></div>
-    <div class="secondHalf">
+    <div class="second-half">
       <v-card-text class="py-2 card-text-wrapper">
         <span class="card-text">
           {{ $t('resultCard.par') }}{{ '\xa0' }}
@@ -143,7 +143,8 @@ const props = defineProps({
   padding: 0 10px 0;
   font-size: 18px;
   font-family: Roboto-Regular, sans-serif;
-  font-weight: 600;
+  font-weight: 500;
+  line-height: 1.4rem !important;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     grid-column-start: 1;
@@ -182,11 +183,6 @@ const props = defineProps({
   }
 }
 
-.v-card {
-  border: solid 1px rgb(var(--v-theme-gris-fonce)) !important;
-  min-height: 150px !important;
-}
-
 :deep(.v-card-title) {
   white-space: pre-line !important;
   cursor: pointer;
@@ -196,12 +192,6 @@ const props = defineProps({
   flex: 1;
 }
 
-.secondHalf {
-  background-color: rgb(var(--v-theme-gris-clair)) !important;
-  padding-top: 6px;
-  width: 100%;
-}
-
 .subtitle {
   font-size: 0.9rem;
   font-weight: 400;
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index 02178a15..54c48eae 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -315,7 +315,7 @@ watch(() => currentRoute.query.domaine, () => {
   width: 100%;
 
   .sub_header__logo {
-    background-color: rgb(var(--v-theme-surface));
+    background-color: rgb(var(--v-theme-background));
     z-index: 2;
 
     h1 {
@@ -360,19 +360,22 @@ watch(() => currentRoute.query.domaine, () => {
 }
 
 .result-main-wrapper {
+  padding: 30px 0;
+
   display: grid;
-  grid-template-columns: 20vw auto;
+  grid-template-columns: 10fr 20fr 3fr 60fr 10fr;
   align-items: start;
   margin-top: 0;
   width: 100%;
-  height: 100%;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     grid-template-columns: 100%;
   }
 
   .result-components {
-    height: 100%;
+    grid-column-start: 4;
+    background-color: rgb(var(--v-theme-surface));
+
     width: 100%;
     display: flex;
     flex-direction: column;

From 4635e88c8bd1a5186021c9bc8e9f75c4e88e267a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Mon, 26 Jun 2023 13:29:41 +0200
Subject: [PATCH 02/36] #THE-799 ajout bordures sur les cadres

---
 src/App.vue                                   |  1 +
 .../common/results/FacetsHeader.vue           |  1 +
 .../common/results/ResultPagination.vue       | 40 ++++++++++++++-----
 src/views/ResultView.vue                      |  2 +
 4 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 269602e1..d0f4cdd8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -62,6 +62,7 @@ main {
   .nav-bar {
     grid-column-start: 2;
     background-color: rgb(var(--v-theme-surface));
+    border: solid 1px rgb(var(--v-theme-gris-clair));
   }
 
   .mobile-nav-bar {
diff --git a/src/components/common/results/FacetsHeader.vue b/src/components/common/results/FacetsHeader.vue
index 83e655b2..3f254e07 100644
--- a/src/components/common/results/FacetsHeader.vue
+++ b/src/components/common/results/FacetsHeader.vue
@@ -129,6 +129,7 @@ function closeOverlay() {
   height: unset;
   align-self: flex-start;
   margin-top: 12px;
+  font-weight: 400;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
     font-size: 10px;
diff --git a/src/components/common/results/ResultPagination.vue b/src/components/common/results/ResultPagination.vue
index 4e0ff74c..fc2a4735 100644
--- a/src/components/common/results/ResultPagination.vue
+++ b/src/components/common/results/ResultPagination.vue
@@ -2,7 +2,7 @@
   <div class="result-pagination">
       <div v-if="type === 'top'" class="first-bar-element">
           <v-select :items="['10', '25', '50']" v-model="currentShowingNumber" density="compact" variant="solo"
-                     class="left-select" menu-icon="mdi-chevron-down">
+                     class="left-select v-selects" menu-icon="mdi-chevron-down">
             <template v-slot:menu-icon>
               <v-icon>
                 mdi-chevron-down
@@ -20,7 +20,7 @@
       </v-pagination>
     <div v-if="type === 'top'" class="last-bar-element">
       <span class="sort-by-span no-wrap-text">{{ $t('results.sortBy') }}</span>
-      <sorting-select class="right-select" @updatePageNumberFromSortingSelect="updatePageNumberFromSortingSelect" @search="search">
+      <sorting-select class="right-select v-selects" @updatePageNumberFromSortingSelect="updatePageNumberFromSortingSelect" @search="search">
       </sorting-select>
     </div>
   </div>
@@ -154,6 +154,10 @@ watch(() => props.currentShowingNumber, () => {
   margin: 10px 8px 0;
   padding-top: 6px;
 
+  :deep(.v-field) {
+    max-width: 50px;
+  }
+
   :deep(.v-field--appended) {
     padding-inline-end: 0 !important;
   }
@@ -161,14 +165,7 @@ watch(() => props.currentShowingNumber, () => {
   :deep(.v-field--variant-solo) {
     box-shadow: unset;
     outline: solid 1px rgb(var(--v-theme-gris-fonce));
-    height: 30px;
-  }
-
-  :deep(.v-field__input) {
-    padding-top: 5px;
-    padding-inline-start: 7px;
   }
-
   :deep(.v-field__append-inner) {
     padding-top: 5px;
 
@@ -180,6 +177,22 @@ watch(() => props.currentShowingNumber, () => {
   }
 }
 
+.v-selects {
+  :deep(.v-field) {
+    height: 22px;
+    margin-top: 8px;
+  }
+
+  :deep(.v-field__input) {
+    padding: 0 8px;
+  }
+
+  :deep(.v-field__append-inner) {
+    padding: unset;
+  }
+}
+
+
 .no-wrap-text {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -194,6 +207,15 @@ watch(() => props.currentShowingNumber, () => {
 .middle-bar-element {
   flex: 1;
   margin-top: 5px;
+
+  :deep(.v-btn) {
+    height: 23px;
+    width: 23px;
+  }
+
+  :deep(.v-btn-content) {
+    height: 10px;
+  }
 }
 
 .last-bar-element {
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index 54c48eae..5541c86b 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -375,6 +375,8 @@ watch(() => currentRoute.query.domaine, () => {
   .result-components {
     grid-column-start: 4;
     background-color: rgb(var(--v-theme-surface));
+    border: solid 1px rgb(var(--v-theme-gris-clair));
+
 
     width: 100%;
     display: flex;

From 8a634bdfe6d766995e6030439210dfeec5853d9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Tue, 27 Jun 2023 15:18:54 +0200
Subject: [PATCH 03/36] =?UTF-8?q?#THE-799=20cadre=20haut=20avec=20barre=20?=
 =?UTF-8?q?de=20recherche=20et=20logo=20;=20simplification=20des=20=C3=A9l?=
 =?UTF-8?q?=C3=A9ments=20de=20recherche?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/DomainSelector.vue      |   4 +-
 .../common/results/ResultComponents.vue       |  27 +--
 .../common/results/ResultPagination.vue       |   9 +-
 .../common/results/SortingSelect.vue          |   1 -
 src/components/theses/search/SearchBar.vue    | 157 ++++++++++--------
 src/views/ResultView.vue                      | 116 +++++++------
 6 files changed, 178 insertions(+), 136 deletions(-)

diff --git a/src/components/common/DomainSelector.vue b/src/components/common/DomainSelector.vue
index 855df1e3..3879714b 100644
--- a/src/components/common/DomainSelector.vue
+++ b/src/components/common/DomainSelector.vue
@@ -66,7 +66,9 @@ async function select(selection) {
   align-items: center;
   width: 100%;
   background-color: transparent;
-  margin-top: 1rem;
+  margin: 1.5rem 0 1rem 0;
+
+  max-height: 30px;
 
   .v-btn {
     flex: 0 1 48%;
diff --git a/src/components/common/results/ResultComponents.vue b/src/components/common/results/ResultComponents.vue
index 154201cd..b07771f7 100644
--- a/src/components/common/results/ResultComponents.vue
+++ b/src/components/common/results/ResultComponents.vue
@@ -12,11 +12,11 @@
     </div>
     <Transition mode="out-in">
       <h2 class="returned-results-statement" v-if="dataReady">
-        <span>{{ $t("results.searched") }}{{ '\xa0' }}</span>
-        <span class="orange-text">"{{ query }}"{{ '\xa0' }}</span>
-        <span>{{ $t("results.returned") }}{{ '\xa0' }}</span>
-        <span class="orange-text">{{ nbResult }}{{ '\xa0' }}</span>
-        <span>{{ $t("results.results") }}</span>
+        <span class="lighter-text">{{ $t("results.searched") }}{{ '\xa0' }}</span>
+        <span class="darker-text">"{{ query }}"{{ '\xa0' }}</span>
+        <span class="lighter-text">{{ $t("results.returned") }}{{ '\xa0' }}</span>
+        <span class="darker-text">{{ nbResult }}{{ '\xa0' }}</span>
+        <span class="lighter-text">{{ $t("results.results") }}</span>
       </h2>
       <h2 class="returned-results-statement" v-else>{{ $t("results.searching") }}</h2>
     </Transition>
@@ -172,7 +172,7 @@ watch(() => props.resetShowingNumber, () => {
 }
 
 .result-components-wrapper {
-  padding: 1rem 0 2rem 0;
+  padding: 1rem 0 1rem 0;
   flex: 1;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
@@ -212,18 +212,21 @@ watch(() => props.resetShowingNumber, () => {
   margin: 0 1rem;
   display: inline-block;
   font-family: Roboto-Medium, sans-serif;
-  font-weight: 500;
-  font-size: 26.5px;
+  font-weight: 400;
+  font-size: 24.5px;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
-    font-size: 24.5px;
+    font-size: 22.5px;
   }
 }
 
-.orange-text {
-  color: rgb(var(--v-theme-orange-abes));
+.darker-text {
   font-family: Roboto-Bold, sans-serif;
-  font-weight: 700;
+  font-weight: 500;
+}
+
+.lighter-text {
+  opacity: 0.6;
 }
 
 .sort-select-wrapper {
diff --git a/src/components/common/results/ResultPagination.vue b/src/components/common/results/ResultPagination.vue
index fc2a4735..210ffa70 100644
--- a/src/components/common/results/ResultPagination.vue
+++ b/src/components/common/results/ResultPagination.vue
@@ -169,8 +169,6 @@ watch(() => props.currentShowingNumber, () => {
   :deep(.v-field__append-inner) {
     padding-top: 5px;
 
-    color: rgb(var(--v-theme-orange-abes));
-
     i {
       opacity: 1 !important;
     }
@@ -200,13 +198,13 @@ watch(() => props.currentShowingNumber, () => {
 }
 
 .results-number-span {
-  padding-top: 22px;
+  padding-top: 24px;
   height: 50px;
 }
 
 .middle-bar-element {
   flex: 1;
-  margin-top: 5px;
+  margin-top: 15px;
 
   :deep(.v-btn) {
     height: 23px;
@@ -222,6 +220,7 @@ watch(() => props.currentShowingNumber, () => {
   margin-top: 17px;
   margin-right: 20px;
   width: 220px;
+  font-size: 15px;
 
   display: inline-flex;
   flex-wrap: nowrap;
@@ -229,7 +228,7 @@ watch(() => props.currentShowingNumber, () => {
 }
 
 .sort-by-span {
-  padding-top: 4px;
+  padding-top: 8px;
 }
 
 .right-select {
diff --git a/src/components/common/results/SortingSelect.vue b/src/components/common/results/SortingSelect.vue
index 028a7634..23d858ca 100644
--- a/src/components/common/results/SortingSelect.vue
+++ b/src/components/common/results/SortingSelect.vue
@@ -87,7 +87,6 @@ watch(() => currentRoute.query.domaine, () => {
 
   :deep(.v-field__append-inner) {
     padding-top: 5px;
-    color: rgb(var(--v-theme-orange-abes));
 
     i {
       opacity: 1 !important;
diff --git a/src/components/theses/search/SearchBar.vue b/src/components/theses/search/SearchBar.vue
index 087975d1..af553e8d 100644
--- a/src/components/theses/search/SearchBar.vue
+++ b/src/components/theses/search/SearchBar.vue
@@ -1,23 +1,36 @@
 <template>
   <div class="searchbar">
-    <v-combobox class="searchbar__input" :label='$t("rechercher")' v-model="request" v-model:search="requestSearch"
-      :items="items" variant="outlined" cache-items hide-details hide-no-data hide-selected no-filter append-inner-icon
-      @keydown.enter="search" :active="true" return-object type="text" :menu="suggestionActive" :menu-props="menuProps">
-      <template v-slot:append-inner>
-        <v-btn plain flat rounded="0" icon="mdi-backspace-outline" @click="clearSearch" :title='$t("clear")'
-          :ripple="false">
+    <v-combobox class="searchbar__input" v-model="request" v-model:search="requestSearch"
+                :items="items" variant="outlined" cache-items hide-details hide-no-data hide-selected no-filter
+                density="compact"
+                @keydown.enter="search" :active="true" return-object type="text" :menu="suggestionActive" :menu-props="menuProps">
+<!--      Bouton rechercher-->
+      <template v-slot:prepend-inner>
+        <v-btn @click="search" :title='$t("searchButton")' :loading="loading"
+          class="elevation-0 appended-buttons">
+          <template v-slot:append>
+            <v-icon class="search-bar-icons" id="magnifying-glass">
+              mdi-magnify
+            </v-icon>
+          </template>
         </v-btn>
       </template>
-      <template v-slot:append>
-        <v-btn color="primary" icon="mdi-magnify" text @click="search" :title='$t("searchButton")' :loading="loading"
-          class="pa-0 ma-0">
+<!--      Bouton effacer texte-->
+      <template v-slot:append-inner>
+        <v-btn class="appended-buttons" plain flat rounded="0" @click="clearSearch" :title='$t("clear")'
+          :ripple="false">
+          <template v-slot:append>
+            <v-icon class="search-bar-icons" id="clean-button">
+              mdi-close
+            </v-icon>
+          </template>
         </v-btn>
       </template>
     </v-combobox>
     <div class="searchbar__action">
       <v-checkbox label="Désactiver l'autocomplétion" v-model="disableCompletion"
         :title='$t("disableSuggestion")'></v-checkbox>
-      <v-btn color="primary" append-icon="mdi-magnify" :title='$t("avancee")' @click="search">{{ $t("avancee") }}
+      <v-btn color="primary" density="compact" variant="outlined" :title='$t("avancee")' @click="search">{{ $t("avancee") }}
       </v-btn>
     </div>
   </div>
@@ -131,67 +144,18 @@ defineExpose({
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.searchbar {
-  flex: 0 0 auto;
-  margin-top: 1rem;
-
-  :deep(.searchbar__input) {
-
-    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-      padding-bottom: 10px;
-    }
-
-    .v-field__field {
-      background-color: rgb(var(--v-theme-surface));
-    }
-
-    .v-field--variant-outlined {
-      background-color: rgb(var(--v-theme-surface));
-
-      .v-field__outline__start {
-        border-top-left-radius: 2rem;
-        border-bottom-left-radius: 2rem;
-      }
-
-      .v-field__outline__end {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-right: 0;
-      }
-    }
-
-    .v-input__append {
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 100% !important;
-
-      .v-btn {
-        height: 100%;
-        width: 70px;
-        border-radius: 0 0.7rem 0.7rem 0;
+  .searchbar {
+    flex: 0 0 auto;
+    margin-top: 1rem;
 
-        .v-icon {
-          font-size: 50px;
-        }
+    :deep(.searchbar__input) {
+      @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+        padding-bottom: 10px;
       }
-
     }
 
-    .v-field__append-inner {
-      padding-top: 0;
-      justify-content: center;
-      align-items: center;
-      background-color: rgb(var(--v-theme-surface));
-
-      .v-btn {
-        background-color: transparent;
-        height: 100%;
-
-        .v-icon {
-          font-size: 40px;
-          color: rgb(var(--v-theme-text-dark-blue));
-        }
-      }
+    :deep(.v-field__append-inner) {
+      margin-right: 10px;
     }
   }
 
@@ -220,10 +184,45 @@ defineExpose({
       opacity: 1;
       font-size: 0.95rem;
     }
+
+    :deep(.v-btn) {
+      margin-right: 15px;
+    }
+  }
+
+  :deep(.v-field__prepend-inner) {
+    padding: 0;
+    align-self: center;
   }
-}
 
-/* Permet de rendre l'autocompletion + dense */
+  :deep(.v-field__append-inner) {
+    padding: 0;
+    align-self: center;
+  }
+
+  :deep(.appended-buttons) {
+    padding: 0;
+    min-width: unset;
+    width: 36px;
+    margin-left: 10px;
+    justify-content: center;
+
+    .v-btn--density-default {
+      height: unset;
+    }
+
+    .v-btn__append {
+      margin-inline-start: unset;
+    }
+
+    :deep(.v-btn__append) {
+      justify-content: center;
+    }
+  }
+
+
+
+/* Permet de rendre l'auto-complétion + dense */
 :deep(.v-overlay-container) .v-list-item--density-default.v-list-item--one-line {
   min-height: 20px !important;
 }
@@ -231,4 +230,24 @@ defineExpose({
 .no-background-hover::before {
   background-color: transparent !important;
 }
+
+.search-bar-icons {
+  color: rgb(var(--v-theme-primary)) !important;
+  font-size: 25px;
+  font-weight: 200;
+}
+
+.v-input {
+  :deep(.v-btn--variant-outlined) {
+    color: rgb(var(--v-theme-gris-fonce)) !important;
+  }
+}
+
+:deep(.v-field--prepended) {
+  padding-inline-start: 0 !important;
+}
+
+:deep(.v-field--appended) {
+  padding-inline-end: 0 !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index 5541c86b..f481586f 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -28,6 +28,7 @@
         :reinitialize-date-to-trigger="reinitializeDateToTrigger" :domaine="domainNameChange"
         :parameters-loaded="parametersLoaded" :filter-to-be-deleted="filterToBeDeleted" class="left-side"></facets-list>
     </v-dialog>
+
     <v-expand-transition>
       <div v-show="showSearchBar" class="expanded-search-bar-container">
         <div class="expanded-search-bar">
@@ -38,17 +39,20 @@
       </div>
     </v-expand-transition>
   </div>
+<!--  Desktop-->
   <div v-else class="sub-header">
-    <div class="left-side sub_header__logo">
-      <RouterLink :to="{ name: 'home' }" title="Accueil du site">
-        <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
-      </RouterLink>
-      <h1>{{ $t("slogan") }}</h1>
-    </div>
-    <div class="sub_header__action">
-      <domain-selector @changeDomain="changeDomain" compact></domain-selector>
-      <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
-        @onError="displayError" />
+    <div id="search-bar-container" class="white-containers">
+      <div class="sub_header__logo">
+        <RouterLink :to="{ name: 'home' }" title="Accueil du site">
+          <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
+        </RouterLink>
+        <h1>{{ $t("slogan") }}</h1>
+      </div>
+      <div class="sub_header__action">
+        <domain-selector @changeDomain="changeDomain" compact></domain-selector>
+        <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
+          @onError="displayError" />
+      </div>
     </div>
   </div>
 
@@ -61,7 +65,7 @@
         :parameters-loaded="parametersLoaded" :filter-to-be-deleted="filterToBeDeleted" :loading="!dataFacetsReady"
         class="left-side"></facets-list>
     </div>
-    <div class="result-components">
+    <div class="result-components white-containers">
       <result-components :data-ready="dataReady" :result="result" :loading="loading" :nb-result="nbResult"
         :reset-page="resetPage" :reset-showing-number="resetShowingNumber" :domain-name-change="domainNameChange"
         :facets="selectedFacets" @search="search" @deleteFilter="deleteFilter">
@@ -300,7 +304,6 @@ watch(() => currentRoute.query.domaine, () => {
   align-items: center;
   flex-direction: column;
   flex: 1 0 100%;
-  max-width: 20vw;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     max-width: 100%;
@@ -310,46 +313,60 @@ watch(() => currentRoute.query.domaine, () => {
 }
 
 .sub-header {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
+  display: grid;
+  grid-template-columns: 10fr 103fr 10fr;
+}
 
-  .sub_header__logo {
-    background-color: rgb(var(--v-theme-background));
-    z-index: 2;
+#search-bar-container {
+  grid-column-start: 2;
+  margin-top: 50px;
 
-    h1 {
-      text-align: center;
-      width: 80%;
-      font-weight: 300;
-      font-size: 16px;
-    }
+  display: grid;
+  grid-template-columns: 20fr 3fr 80fr;
+}
 
-    .logo {
-      margin-top: 0;
-    }
+.sub_header__logo {
+  grid-column-start: 1;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  h1 {
+    text-align: center;
+    width: 80%;
+    font-weight: 300;
+    font-size: 14px;
   }
 
-  .sub_header__action {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1 0 auto;
+  .logo {
+    margin-top: 0;
+    height: 115px;
+  }
+}
 
-    .domain-selector,
-    .searchbar {
-      width: 70%;
-    }
+.sub_header__action {
+  grid-column-start: 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 auto;
+
+  .domain-selector,
+  .searchbar {
+    width: 90%;
+  }
 
-    .domain-selector {
-      :deep(.v-btn__content) {
-        flex-direction: row;
-      }
+  .domain-selector {
+    :deep(.v-btn__content) {
+      flex-direction: row;
+      opacity: 0.6;
+    }
 
-      :deep(.v-icon) {
-        margin-right: 1rem;
-      }
+    :deep(.v-icon) {
+      margin-right: 1rem;
     }
   }
 }
@@ -363,7 +380,7 @@ watch(() => currentRoute.query.domaine, () => {
   padding: 30px 0;
 
   display: grid;
-  grid-template-columns: 10fr 20fr 3fr 60fr 10fr;
+  grid-template-columns: 10fr 20fr 3fr 80fr 10fr;
   align-items: start;
   margin-top: 0;
   width: 100%;
@@ -374,13 +391,16 @@ watch(() => currentRoute.query.domaine, () => {
 
   .result-components {
     grid-column-start: 4;
-    background-color: rgb(var(--v-theme-surface));
-    border: solid 1px rgb(var(--v-theme-gris-clair));
-
 
     width: 100%;
     display: flex;
     flex-direction: column;
+    padding-bottom: 5px;
   }
 }
+
+.white-containers {
+  background-color: rgb(var(--v-theme-surface));
+  border: solid 1px rgb(var(--v-theme-gris-clair));
+}
 </style>
\ No newline at end of file

From f7ec3a7fd768cac27feabc1b4bf9ff8786706382 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 29 Jun 2023 18:25:59 +0200
Subject: [PATCH 04/36] #THE-799 footer blanc grid

---
 src/components/common/FooterCustom.vue | 86 +++++++++++++++++---------
 1 file changed, 56 insertions(+), 30 deletions(-)

diff --git a/src/components/common/FooterCustom.vue b/src/components/common/FooterCustom.vue
index a8fd1613..842f0aed 100644
--- a/src/components/common/FooterCustom.vue
+++ b/src/components/common/FooterCustom.vue
@@ -1,17 +1,12 @@
 <template>
   <v-footer class="pa-0">
     <div class="footerTop">
-      <div>
-        <h4>Theses.fr</h4>
-        <span>{{ $t("footer.texte") }}</span>&nbsp;<a href="/apropos">{{ $t("footer.plus")
-        }}</a>
-      </div>
-      <div>
+      <div class="links-container">
         <h3>
           <v-icon>mdi-arrow-top-right</v-icon>
           {{ $t("accesDirect") }}
         </h3>
-        <ul>
+        <ul class="list-1">
           <li><span class="orange-link"> > </span><a
               href="https://www.data.gouv.fr/fr/datasets/theses-soutenues-en-france-depuis-1985/" target="_blank">{{
                 $t("footer.opendata") }}</a>
@@ -23,6 +18,8 @@
               href="https://documentation.abes.fr/aidetheses/thesesfr/index.html#TEF" target="_blank">{{ $t("footer.tef")
               }}</a>
           </li>
+        </ul>
+        <ul class="list-2">
           <li><span class="orange-link"> > </span><a href="https://www.idref.fr/" target="_blank">{{ $t("footer.idRref")
           }}</a>
           </li>
@@ -34,7 +31,12 @@
           </li>
         </ul>
       </div>
-      <div>
+      <div class="theses-description">
+        <h4>Theses.fr</h4>
+        <span>{{ $t("footer.texte") }}</span>&nbsp;<a href="/apropos">{{ $t("footer.plus")
+        }}</a>
+      </div>
+      <div class="logos-container">
         <a href="https://www.enseignementsup-recherche.gouv.fr/fr" target="_blank" :title='$t("footer.logoMesriAlt")'>
           <img src="../../assets/logo-mesr.svg" :alt='$t("footer.logoMesriAlt")' style="height: 60px;" class="pr-4 "></a>
         <a href="https://abes.fr/" target="_blank" :title='$t("footer.logoAbesAlt")'>
@@ -43,7 +45,7 @@
     </div>
     <v-divider></v-divider>
     <v-card-text class="footerBottom">
-      <v-row class="px-6">
+      <v-row>
         <v-col cols="12" md="3" class="text-center text-md-left pa-0">
           {{ new Date().getFullYear() }} —
           <strong>Theses.fr</strong>
@@ -83,7 +85,7 @@
 .v-footer {
   flex-direction: column;
   width: 100vw;
-  background-color: rgb(var(--v-theme-gris-clair));
+  background-color: rgb(var(--v-theme-surface));
   color: rgb(var(--v-theme-fond-noir));
   flex-basis: 1%;
 
@@ -92,10 +94,9 @@
   }
 
   .footerTop {
-    flex: 1 0 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: 30fr 2fr 40fr 2fr 15fr;
+
     width: 90%;
     padding-top: 1em;
     padding-bottom: 1em;
@@ -108,20 +109,14 @@
 
     @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
       div:nth-of-type(1) {
-        flex: 1 0 25%;
-        max-width: 30%;
+
       }
     }
 
-    div:nth-of-type(2) {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: flex-start;
+    div {
 
       @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-        flex: 1 0 30%;
-        max-width: 30%;
+
       }
 
       ul {
@@ -144,14 +139,45 @@
         }
       }
     }
+  }
+
+  .links-container {
+    width: 100%;
+    grid-column-start: 3;
+    grid-row-start: 1;
 
-    div:nth-of-type(3) {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
+    display: grid;
+    grid-template-columns: 20fr 2fr 20fr;
+    grid-template-rows: 2fr 8fr;
 
+    h3 {
+      align-self: center;
     }
 
+    .list-1 {
+      grid-column-start: 1;
+      grid-row-start: 2;
+    }
+
+    .list-2 {
+      grid-column-start: 3;
+      grid-row-start: 2;
+    }
+  }
+
+  .theses-description {
+    grid-column-start: 1;
+
+    span {
+      opacity: 0.6;
+    }
+  }
+
+  .logos-container {
+    grid-column-start: 5;
+    display: flex;
+    align-self: end;
+    justify-content: end;
   }
 
   .footerBottom {
@@ -171,7 +197,7 @@
   }
 
   .v-divider {
-    background-color: rgb(var(--v-theme-background));
+    background-color: rgb(var(--v-theme-gris-clair));
   }
 
 }
@@ -191,7 +217,7 @@ h3 {
 
 footer {
   padding-top: 0;
-  background-color: rgb(var(--v-theme-gris-clair));
-  border-top: 2px solid rgb(var(--v-theme-gris-fonce));
+  background-color: rgb(var(--v-theme-surface));
+  border-top: 1px solid rgb(var(--v-theme-gris-clair));
 }
 </style>
\ No newline at end of file

From a657509cdb918060b6720a651bb8733666dcc3de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Mon, 31 Jul 2023 14:49:22 +0200
Subject: [PATCH 05/36] THE-799 modifications barre de recherche overlay +
 espacement page d'accueil

---
 src/App.vue                                        | 1 -
 src/components/common/DomainSelector.vue           | 2 +-
 src/components/common/results/FacetsHeader.vue     | 3 ++-
 src/components/common/results/ResultComponents.vue | 5 +----
 src/components/theses/search/SearchBar.vue         | 9 ++++-----
 src/views/HomeView.vue                             | 2 +-
 src/views/ResultView.vue                           | 9 ++++++++-
 7 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 13d2be7b..3eb99219 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -254,7 +254,6 @@ h4 {
 .scroll-to-top-wrapper {
   position: sticky;
   top: 90vh;
-  margin-bottom: 3rem;
   margin-left: 10%;
   width: 30px;
   height: 30px;
diff --git a/src/components/common/DomainSelector.vue b/src/components/common/DomainSelector.vue
index 3879714b..e4bcb43a 100644
--- a/src/components/common/DomainSelector.vue
+++ b/src/components/common/DomainSelector.vue
@@ -68,7 +68,7 @@ async function select(selection) {
   background-color: transparent;
   margin: 1.5rem 0 1rem 0;
 
-  max-height: 30px;
+  max-height: 50px;
 
   .v-btn {
     flex: 0 1 48%;
diff --git a/src/components/common/results/FacetsHeader.vue b/src/components/common/results/FacetsHeader.vue
index 3f254e07..8b9379c0 100644
--- a/src/components/common/results/FacetsHeader.vue
+++ b/src/components/common/results/FacetsHeader.vue
@@ -89,6 +89,7 @@ function closeOverlay() {
 .v-btn--elevated :deep(.v-btn__content) {
   text-transform: capitalize;
   letter-spacing: 0.5px;
+  color: rgb(var(--v-theme-secondary-darken-2));
 }
 
 .close-overlay-button {
@@ -126,7 +127,7 @@ function closeOverlay() {
 }
 
 .desktop-reinitialize-button {
-  height: unset;
+  height: 2em;
   align-self: flex-start;
   margin-top: 12px;
   font-weight: 400;
diff --git a/src/components/common/results/ResultComponents.vue b/src/components/common/results/ResultComponents.vue
index 207b7975..cee8e15e 100644
--- a/src/components/common/results/ResultComponents.vue
+++ b/src/components/common/results/ResultComponents.vue
@@ -24,7 +24,6 @@
     <div v-if="mobile || dataReady" class="colonnes-resultats">
       <result-list :result="result" :domain-name-change="domainNameChange">
       </result-list>
-      <ScrollToTopButton v-if="!mobile && moreThanXResults(5)" class="scroll-to-top-wrapper" :nb-result=nbResult />
     </div>
     <div v-else>
       <div v-for="i in currentShowingNumber" :key="i" class="skeleton">
@@ -36,7 +35,6 @@
     </div>
     <MoreResultsButton v-if="mobile && !allResultsWereLoaded()" :loading=loading :nb-result=nbResult
       @addTenResultsToList="addTenResultsToList" @search="search" />
-    <ScrollToTopButton v-if="mobile && moreThanXResults(5)" class="scroll-to-top-wrapper" :nb-result=nbResult />
   </div>
 
   <result-pagination v-if="!mobile" :nb-results=nbResult :type="'bottom'" :current-showing-number="currentShowingNumber"
@@ -48,7 +46,6 @@
 
 <script setup>
 import ResultPagination from "@/components/common/results/ResultPagination.vue";
-import ScrollToTopButton from "@/components/common/ScrollToTopButton.vue";
 import MoreResultsButton from "@/components/common/results/MoreResultsButton.vue";
 import {useDisplay} from "vuetify";
 import {ref, watch} from "vue";
@@ -60,7 +57,7 @@ import SortingSelect from "@/components/common/results/SortingSelect.vue";
 
 const currentRoute = useRoute();
 const { mobile } = useDisplay();
-const { setShowingNumber, setShowingNumberMobile } = APIService();
+const { setShowingNumber } = APIService();
 
 const props = defineProps({
   result: {
diff --git a/src/components/theses/search/SearchBar.vue b/src/components/theses/search/SearchBar.vue
index d1d7d2a9..cb5e2941 100644
--- a/src/components/theses/search/SearchBar.vue
+++ b/src/components/theses/search/SearchBar.vue
@@ -155,10 +155,6 @@ defineExpose({
         padding-bottom: 10px;
       }
     }
-
-    :deep(.v-field__append-inner) {
-      margin-right: 10px;
-    }
   }
 
   .searchbar__action {
@@ -206,7 +202,6 @@ defineExpose({
     padding: 0;
     min-width: unset;
     width: 36px;
-    margin-left: 10px;
     justify-content: center;
 
     .v-btn--density-default {
@@ -239,6 +234,10 @@ defineExpose({
   font-weight: 200;
 }
 
+#clean-button {
+  left: -3px;
+}
+
 .v-input {
   :deep(.v-btn--variant-outlined) {
     color: rgb(var(--v-theme-gris-fonce)) !important;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 02b557b8..74224ae2 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -135,7 +135,7 @@ function displayError(message) {
     align-items: center;
     flex-direction: column;
     width: 100%;
-    padding-top: 40px;
+    padding: 40px 0;
 
     @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
       max-height: 500px;
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index 446dab5c..d2a87d2c 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -71,6 +71,7 @@
         :domain-name-change="domainNameChange" :facets="selectedFacets" @search="search" @deleteFilter="deleteFilter">
       </result-components>
     </div>
+    <scroll-to-top-button  v-if="moreThanXResults(5)"  class="scroll-to-top-wrapper" :nb-result=nbResult />
   </div>
 </template>
 
@@ -84,6 +85,7 @@ import SearchBar from '@/components/generic/GenericSearchBar.vue';
 import DomainSelector from '@/components/common/DomainSelector.vue';
 import ResultComponents from "@/components/common/results/ResultComponents.vue";
 import FacetsHeader from "@/components/common/results/FacetsHeader.vue";
+import ScrollToTopButton from "@/components/common/ScrollToTopButton.vue";
 
 const { mobile } = useDisplay();
 const {
@@ -204,6 +206,10 @@ function updateFacets(firstLoad) {
   });
 }
 
+function moreThanXResults(x) {
+  return (result.value.length >= x);
+}
+
 // Si on passe de desktop à mobile ou inversement, réinitialisation des variables de pagination
 watch(mobile, () => {
   reinitializeCurrentRequest();
@@ -313,6 +319,8 @@ watch(() => currentRoute.query.domaine, () => {
 }
 
 .sub-header {
+  width: 100%;
+
   display: grid;
   grid-template-columns: 10fr 103fr 10fr;
 }
@@ -362,7 +370,6 @@ watch(() => currentRoute.query.domaine, () => {
   .domain-selector {
     :deep(.v-btn__content) {
       flex-direction: row;
-      opacity: 0.6;
     }
 
     :deep(.v-icon) {

From 8bf88c4f96dddbd691b3ba944ce89f333f39edb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Mon, 31 Jul 2023 14:58:15 +0200
Subject: [PATCH 06/36] THE-799 Suppression max-height pour l'overlay des
 boutons du domain-selector + couleur background appended buttons barre de
 recherche

---
 src/components/common/DomainSelector.vue   | 2 --
 src/components/theses/search/SearchBar.vue | 1 +
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/common/DomainSelector.vue b/src/components/common/DomainSelector.vue
index e4bcb43a..772043e9 100644
--- a/src/components/common/DomainSelector.vue
+++ b/src/components/common/DomainSelector.vue
@@ -68,8 +68,6 @@ async function select(selection) {
   background-color: transparent;
   margin: 1.5rem 0 1rem 0;
 
-  max-height: 50px;
-
   .v-btn {
     flex: 0 1 48%;
     display: flex;
diff --git a/src/components/theses/search/SearchBar.vue b/src/components/theses/search/SearchBar.vue
index cb5e2941..cdf54ce6 100644
--- a/src/components/theses/search/SearchBar.vue
+++ b/src/components/theses/search/SearchBar.vue
@@ -203,6 +203,7 @@ defineExpose({
     min-width: unset;
     width: 36px;
     justify-content: center;
+    background-color: transparent;
 
     .v-btn--density-default {
       height: unset;

From 467bbc4530b8c9473111e5e493e10f8d7fa33306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Mon, 31 Jul 2023 15:11:17 +0200
Subject: [PATCH 07/36] =?UTF-8?q?THE-799=20barre=20de=20recherche=20:=20ne?=
 =?UTF-8?q?=20plus=20afficher=20l'icone=20fl=C3=A8che=20de=20d=C3=A9roulem?=
 =?UTF-8?q?ent=20de=20l'autocompl=C3=A9tion=20+=20r=C3=A9duction=20du=20pa?=
 =?UTF-8?q?dding=20de=20la=20liste=20de=20chips=20des=20filtres?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/results/FacetsChips.vue |  2 +-
 src/components/theses/search/SearchBar.vue    | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/common/results/FacetsChips.vue b/src/components/common/results/FacetsChips.vue
index bf61eb54..07fc1683 100644
--- a/src/components/common/results/FacetsChips.vue
+++ b/src/components/common/results/FacetsChips.vue
@@ -42,7 +42,7 @@ function deleteFilter(facet) {
 
 <style scoped lang="scss">
   .chips-list {
-    margin: 0 1rem;
+    margin: 0 0.5em;
     display: flex;
     flex-wrap: wrap;
     padding: 6px 0 18px;
diff --git a/src/components/theses/search/SearchBar.vue b/src/components/theses/search/SearchBar.vue
index cdf54ce6..c0a7143d 100644
--- a/src/components/theses/search/SearchBar.vue
+++ b/src/components/theses/search/SearchBar.vue
@@ -1,9 +1,25 @@
 <template>
   <div class="searchbar">
-    <v-combobox class="searchbar__input" v-model="request" v-model:search="requestSearch"
-                :items="items" variant="outlined" cache-items hide-details hide-no-data hide-selected no-filter
-                density="compact"
-                @keydown.enter="search" :active="true" return-object type="text" :menu="suggestionActive" :menu-props="menuProps">
+    <v-combobox
+      class="searchbar__input"
+      :items="items"
+      :menu="suggestionActive"
+      :menu-props="menuProps"
+      :active="true"
+      v-model="request"
+      v-model:search="requestSearch"
+      variant="outlined"
+      cache-items
+      hide-details
+      hide-no-data
+      hide-selected
+      no-filter
+      density="compact"
+      return-object
+      type="text"
+      menu-icon=""
+      @keydown.enter="search"
+    >
 <!--      Bouton rechercher-->
       <template v-slot:prepend-inner>
         <v-btn @click="search" :title='$t("searchButton")' :loading="loading"

From 1f486e8c855e8e8ce18f54cdca4e0ef34615d32e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Mon, 31 Jul 2023 15:34:51 +0200
Subject: [PATCH 08/36] =?UTF-8?q?THE-799=20mise=20=C3=A0=20jour=20du=20com?=
 =?UTF-8?q?posant=20personnes.SearchBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/personnes/search/SearchBar.vue | 218 +++++++++++-------
 src/components/theses/search/SearchBar.vue    |   8 +-
 2 files changed, 144 insertions(+), 82 deletions(-)

diff --git a/src/components/personnes/search/SearchBar.vue b/src/components/personnes/search/SearchBar.vue
index 0566a868..3f5851ef 100644
--- a/src/components/personnes/search/SearchBar.vue
+++ b/src/components/personnes/search/SearchBar.vue
@@ -1,21 +1,49 @@
 <template>
   <div class="searchbar">
-    <v-combobox class="searchbar__input" :label='$t("rechercher")' v-model="request" v-model:search="requestSearch"
-                :items="suggestions" variant="outlined" append-inner-icon
-                :hide-no-data="!isSuggestionActive || suggestions.length == 0" no-filter hide-details
-                hide-selected
-                :no-data-text="isSuggestionLoading ? $t('personnes.searchBar.loading') : $t('personnes.searchBar.noData')"
-                @keydown.enter="search" :loading="isSuggestionLoading"
-                :menu="isSuggestionActive && suggestions.length != 0" :menu-props="menuProps">
-      <template v-slot:append-inner>
-        <v-btn flat rounded="0" icon="mdi-backspace-outline" @click="clearSearch" :title='$t("clear")' :ripple="false">
+    <v-combobox
+      class="searchbar__input"
+      :items="suggestions"
+      :menu="isSuggestionActive && suggestions.length != 0"
+      :menu-props="menuProps"
+      :active="true"
+      :hide-no-data="!isSuggestionActive || suggestions.length == 0"
+      :no-data-text="isSuggestionLoading ? $t('personnes.searchBar.loading') : $t('personnes.searchBar.noData')"
+      v-model="request"
+      v-model:search="requestSearch"
+      variant="outlined"
+      cache-items
+      hide-details
+      hide-selected
+      no-filter
+      density="compact"
+      return-object
+      type="text"
+      menu-icon=""
+      @keydown.enter="search" :loading="isSuggestionLoading"
+    >
+<!--      Bouton rechercher-->
+      <template v-slot:prepend-inner>
+        <v-btn @click="search" :title='$t("searchButton")' :loading="loading"
+          class="elevation-0 appended-buttons">
+          <template v-slot:append>
+            <v-icon class="search-bar-icons" id="magnifying-glass">
+              mdi-magnify
+            </v-icon>
+          </template>
         </v-btn>
       </template>
-      <template v-slot:append>
-        <v-btn color="primary" icon="mdi-magnify" text @click="search" :title='$t("searchButton")' :loading="loading"
-               class="pa-0 ma-0">
+<!--      Bouton effacer texte-->
+      <template v-slot:append-inner>
+        <v-btn class="appended-buttons" plain flat rounded="0" @click="clearSearch" :title='$t("clear")'
+               :ripple="false">
+          <template v-slot:append>
+            <v-icon class="search-bar-icons" id="clean-button">
+              mdi-close
+            </v-icon>
+          </template>
         </v-btn>
       </template>
+<!-- Liste auto-complétion -->
       <template v-slot:prepend-item v-if="suggestions.length > 0">
         <h3>{{ $t('personnes.searchBar.title-personnes') }}</h3>
         <h3>{{ $t('personnes.searchBar.title-thematiques') }}</h3>
@@ -37,10 +65,16 @@
         </v-list-item>
       </template>
     </v-combobox>
+
     <div class="searchbar__action">
-      <v-checkbox label="Désactiver l'autocomplétion" v-model="isSuggestionDisabledCheckbox"
-                  :title='$t("disableSuggestion")'></v-checkbox>
-      <v-btn color="primary" append-icon="mdi-magnify" @click="search" :title='$t("avancee")'>{{ $t("avancee") }}
+      <v-checkbox
+        label="Désactiver l'autocomplétion"
+        v-model="isSuggestionDisabledCheckbox"
+        :title='$t("disableSuggestion")'></v-checkbox>
+      <v-btn color="primary"
+             density="compact"
+             variant="outlined"
+             :title='$t("avancee")' @click="search">{{ $t("avancee") }}
       </v-btn>
     </div>
   </div>
@@ -192,106 +226,123 @@ defineExpose({
 });
 
 </script>
+
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.searchbar {
 
+.searchbar {
   flex: 0 0 auto;
   margin-top: 1rem;
 
   :deep(.searchbar__input) {
-
     @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
       padding-bottom: 10px;
     }
+  }
+}
 
-    .v-field__field {
-      background-color: rgb(var(--v-theme-surface));
-    }
+.searchbar__action {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex: 1 0 100%;
+  margin-bottom: 1rem;
 
-    .v-field--variant-outlined {
-      background-color: rgb(var(--v-theme-surface));
+  @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+    justify-content: space-between;
+  }
 
-      .v-field__outline__start {
-        border-top-left-radius: 2rem;
-        border-bottom-left-radius: 2rem;
-      }
+  .v-input {
+    display: none;
 
-      .v-field__outline__end {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        border-right: 0;
-      }
+    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+      display: flex;
+      flex: 0 0 auto;
     }
+  }
 
-    .v-input__append {
-      padding: 0 !important;
-      margin: 0 !important;
-      height: 100% !important;
+  :deep(.v-label) {
+    color: rgb(var(--v-theme-primary));
+    opacity: 1;
+    font-size: 0.95rem;
+  }
 
-      .v-btn {
-        height: 100%;
-        width: 70px;
-        border-radius: 0 0.7rem 0.7rem 0;
+  :deep(.v-btn) {
+    margin-right: 15px;
+  }
+}
 
-        .v-icon {
-          font-size: 50px;
-        }
-      }
+:deep(.v-field__prepend-inner) {
+  padding: 0;
+  align-self: center;
+}
 
-    }
+:deep(.v-field__append-inner) {
+  padding: 0;
+  align-self: center;
+}
 
-    .v-field__append-inner {
-      padding-top: 0;
-      justify-content: center;
-      align-items: center;
-      background-color: rgb(var(--v-theme-surface));
+:deep(.appended-buttons) {
+  padding: 0;
+  min-width: unset;
+  width: 36px;
+  justify-content: center;
+  background-color: transparent;
 
-      .v-btn {
-        background-color: transparent;
-        height: 100%;
+  .v-btn--density-default {
+    height: unset;
+  }
 
-        .v-icon {
-          font-size: 40px;
-          color: rgb(var(--v-theme-text-dark-blue));
-        }
-      }
-    }
+  .v-btn__append {
+    margin-inline-start: unset;
   }
 
-  .searchbar__action {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    flex: 1 0 100%;
-    margin-bottom: 1rem;
+  :deep(.v-btn__append) {
+    justify-content: center;
+  }
+}
 
-    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-      justify-content: space-between;
-    }
 
-    :deep(.v-label) {
-      color: rgb(var(--v-theme-primary));
-      opacity: 1;
-      font-size: 0.95rem;
-    }
 
-    .v-input {
-      display: none;
+/* Permet de rendre l'auto-complétion + dense */
+:deep(.v-overlay-container) .v-list-item--density-default.v-list-item--one-line {
+  min-height: 20px !important;
+}
 
-      @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-        display: flex;
-        flex: 0 0 auto;
-      }
-    }
+.no-background-hover::before {
+  background-color: transparent !important;
+}
+
+.search-bar-icons {
+  color: rgb(var(--v-theme-primary)) !important;
+  font-size: 25px;
+  font-weight: 200;
+}
+
+#clean-button {
+  left: -3px;
+}
+
+.v-input {
+  :deep(.v-btn--variant-outlined) {
+    color: rgb(var(--v-theme-gris-fonce)) !important;
   }
 }
 
+:deep(.v-field--prepended) {
+  padding-inline-start: 0 !important;
+}
+
+:deep(.v-field--appended) {
+  padding-inline-end: 0 !important;
+}
+
 .no-background-hover::before {
   background-color: transparent !important;
 }
 </style>
+
 <style lang="scss">
 @use 'vuetify/settings';
 
@@ -306,6 +357,15 @@ defineExpose({
     grid-template-columns: 1fr 1fr;
     grid-auto-rows: min-content;
     width: 100%;
+
+    /* Permet de rendre l'autocompletion + dense */
+    .v-list-item {
+      min-height: 40px !important;
+
+      @media only screen and (min-width: 900px) {
+        min-height: 20px !important;
+      }
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/theses/search/SearchBar.vue b/src/components/theses/search/SearchBar.vue
index c0a7143d..d1adf89f 100644
--- a/src/components/theses/search/SearchBar.vue
+++ b/src/components/theses/search/SearchBar.vue
@@ -43,10 +43,14 @@
         </v-btn>
       </template>
     </v-combobox>
+
     <div class="searchbar__action">
       <v-checkbox label="Désactiver l'autocomplétion" v-model="disableCompletion"
         :title='$t("disableSuggestion")'></v-checkbox>
-      <v-btn color="primary" density="compact" variant="outlined" :title='$t("avancee")' @click="search">{{ $t("avancee") }}
+      <v-btn color="primary"
+             density="compact"
+             variant="outlined"
+             :title='$t("avancee")' @click="search">{{ $t("avancee") }}
       </v-btn>
     </div>
   </div>
@@ -158,7 +162,6 @@ defineExpose({
 });
 </script>
 
-
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
@@ -280,7 +283,6 @@ defineExpose({
   }
 
   .v-list {
-
     /* Permet de rendre l'autocompletion + dense */
     .v-list-item {
       min-height: 40px !important;

From 05e05ab657620387bb9b7c35e1c62f4b977c1984 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Tue, 1 Aug 2023 12:54:52 +0200
Subject: [PATCH 09/36] =?UTF-8?q?THE-799=20page=20r=C3=A9sultats=20personn?=
 =?UTF-8?q?es=20destructuration=20des=20cartes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/results/ResultList.vue  |   3 +-
 .../personnes/results/PersonnesCard.vue       | 118 +++++++++++-------
 src/components/theses/results/ResultCard.vue  |   2 +-
 3 files changed, 79 insertions(+), 44 deletions(-)

diff --git a/src/components/common/results/ResultList.vue b/src/components/common/results/ResultList.vue
index d962378c..24d647d3 100644
--- a/src/components/common/results/ResultList.vue
+++ b/src/components/common/results/ResultList.vue
@@ -1,8 +1,9 @@
 <template>
   <!--  Personnes-->
   <div v-if="domainNameChange === 'personnes'">
-    <div v-for="item in result" :key="item.id" class="card-wrapper">
+    <div v-for="(item, index) in result" :key="item.id" class="card-wrapper">
       <personnes-card :item="item" />
+      <hr class="result-dividers" v-if="index < result.length - 1" />
     </div>
   </div>
   <!--  Thèses-->
diff --git a/src/components/personnes/results/PersonnesCard.vue b/src/components/personnes/results/PersonnesCard.vue
index 1d846e93..9f138139 100644
--- a/src/components/personnes/results/PersonnesCard.vue
+++ b/src/components/personnes/results/PersonnesCard.vue
@@ -1,42 +1,36 @@
 <template>
-  <v-card flat>
-    <div class="firstHalf">
+  <v-card flat class="card-container">
+    <div class="first-half">
       <div class="info">
         <v-icon size="40px">$personne</v-icon>
-        <div class="sep">
-          <v-divider vertical v-if="item.has_idref"></v-divider>
-        </div>
-        <a v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank">
-          <img alt="logo" id="logoIMG" src="@/assets/idref-icone.png" />
-        </a>
         <div class="nom-card">
           <RouterLink class="nomprenom"
             :to="{ name: 'detail', params: { id: item.id }, query: { 'domaine': currentRoute.query.domaine } }"
             v-if="item.has_idref">
-            <span class="prenom">{{ item.prenom }}</span>
-            <span class="nom">{{ item.nom }}</span>
+            <span class="prenom">{{ item.prenom + "\xa0" }}</span><span class="nom">{{ item.nom }}</span>
           </RouterLink>
           <RouterLink v-else-if="item.these" class="nomprenom" :to="{ name: 'detail', params: { id: item.these } }">
-            <span class="prenom">{{ item.prenom }}</span>
-            <span class="nom">{{ item.nom }}</span>
+            <span class="prenom">{{ item.prenom + "\xa0" }}</span><span class="nom">{{ item.nom }}</span>
           </RouterLink>
           <div v-else class="nomprenom">
-            <span class="prenom">{{ item.prenom }}</span>
-            <span class="nom">{{ item.nom }}</span>
+            <span class="prenom">{{ item.prenom + "\xa0" }}</span><span class="nom">{{ item.nom }}</span>
           </div>
+          <a class="nomprenom" v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank">
+            <img alt="logo" id="logoIdref" src="@/assets/idref-icone.png" />
+          </a>
         </div>
       </div>
       <div class="action">
-        <v-btn :disabled="!item.roles['auteur'] || !item.these" color="primary" append-icon="mdi-arrow-right-circle"
+        <v-btn :disabled="!item.roles['auteur'] || !item.these" color="secondary-darken-2" append-icon="mdi-arrow-right-circle"
           @click="goToPersonne('#Auteurs')">{{ $t('personnes.resultView.personnesCard.auteur') }}
           ({{ item.roles["auteur"] ? item.roles["auteur"] : 0 }})
         </v-btn>
-        <v-btn :disabled="!item.roles['directeur de thèse'] || !item.these" color="primary"
+        <v-btn :disabled="!item.roles['directeur de thèse'] || !item.these" color="secondary-darken-2"
           append-icon="mdi-arrow-right-circle" @click="goToPersonne('#Directeurs')">{{
             $t('personnes.resultView.personnesCard.directeur') }}
           ({{ item.roles["directeur de thèse"] ? item.roles["directeur de thèse"] : 0 }})
         </v-btn>
-        <v-btn :disabled="!item.roles['rapporteur'] || !item.these" color="primary"
+        <v-btn :disabled="!item.roles['rapporteur'] || !item.these" color="secondary-darken-2"
           append-icon="mdi-arrow-right-circle" @click="goToPersonne('#Rapporteurs')">{{
             $t('personnes.resultView.personnesCard.rapporteur') }}
           ({{ item.roles["rapporteur"] ? item.roles["rapporteur"] : 0 }})
@@ -47,13 +41,13 @@
     <div class="second-half">
       <div class="disciplines">
         <template v-for="name in item.disciplines" :key="name">
-          {{ name }}<span class="separator">; </span>
+          {{ name }}<span class="separator"> ; </span>
         </template>
       </div>
-      <v-divider vertical></v-divider>
+      <span>-</span>
       <div class="etablissements">
         <template v-for="name in item.etablissements " :key="name">
-          {{ name }}<span class="separator">; </span>
+          {{ name }}<span class="separator"> ; </span>
         </template>
       </div>
     </div>
@@ -97,6 +91,16 @@ function goToPersonne(hash) {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
+.card-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-title-wrapper {
+  display: grid !important;
+  grid-template-columns: 1fr 20fr 3fr;
+}
+
 .line-clamp {
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -104,17 +108,9 @@ function goToPersonne(hash) {
   overflow: hidden;
 }
 
-.v-card {
-  border: solid 1px rgb(var(--v-theme-gris-fonce));
-  max-width: 100vw;
-  display: flex;
-  flex-direction: column;
-}
-
-
-.firstHalf {
+.first-half {
   display: flex;
-  padding: 1rem;
+  padding: 0 2rem 0 1rem;
   justify-content: space-between;
   align-items: center;
   height: calc(100% + 180px);
@@ -168,12 +164,12 @@ function goToPersonne(hash) {
 
       @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
         flex: 1 0 60%;
-        margin-left: 1rem;
+        margin-left: 0.5em;
       }
 
       .nomprenom {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
         text-decoration: none;
         color: rgb(var(--v-theme-primary));
         font-size: 23.5px;
@@ -222,45 +218,83 @@ function goToPersonne(hash) {
   }
 }
 
+#logoIdref {
+  margin-left: 1em;
+  height: 1em;
+}
+
 .vertical-spacer {
   flex: 1;
 }
 
 .second-half {
-
-  justify-content: space-between;
-  align-items: center;
-  background-color: rgb(var(--v-theme-gris-clair)) !important;
+  display: flex;
   height: 100%;
   padding: 0.5rem;
   font-weight: bold;
   color: rgb(var(--v-theme-primary));
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-    display: flex;
-    padding: 0.5rem 5rem 0.5rem 5rem;
+    padding: 0rem 1rem 0.5rem;
 
     hr {
-      height: 40px;
+      height: 20px;
       border-color: rgb(var(--v-theme-primary)) !important;
       opacity: 1;
       border-width: 0 1.5px 0 0;
     }
   }
 
-  .disciplines,
+  .disciplines {
+    margin-right: 0.5em;
+  }
+
+
   .etablissements {
-    flex: 0 0 45%;
+    margin: 0 0.5em;
+  }
 
+  .disciplines,
+  .etablissements {
     .separator:last-of-type {
       display: none;
     }
   }
-
 }
 
 .subtitle {
   font-size: 0.9rem;
   font-weight: 400;
 }
+
+.card-title {
+  color: rgb(var(--v-theme-primary));
+}
+
+.card-text .card-text-bold {
+  white-space: unset !important;
+  font-size: 15px;
+}
+
+.card-text {
+  font-family: Roboto-Regular, sans-serif;
+}
+
+.card-text-bold {
+  font-family: Roboto-Bold, sans-serif;
+  font-weight: 700
+}
+
+.card-text-wrapper {
+  display: inline-block;
+}
+
+.clickable {
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.lightblue {
+  color: rgb(var(--v-theme-secondary-darken-2)) !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/theses/results/ResultCard.vue b/src/components/theses/results/ResultCard.vue
index 4925eec5..26143478 100644
--- a/src/components/theses/results/ResultCard.vue
+++ b/src/components/theses/results/ResultCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card flat class="card-container">
-    <div class="firstHalf" @click="$router.push({ name: 'detail', params: { id: id } })">
+    <div class="first-half" @click="$router.push({ name: 'detail', params: { id: id } })">
       <v-card-title>
         <div class="card-title-wrapper line-clamp">
           <div v-if="!mobile" class="thesis-icon">

From 23dbc41efcc0083610b13b7b0d22bfd58bb7312c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Tue, 1 Aug 2023 14:16:18 +0200
Subject: [PATCH 10/36] =?UTF-8?q?THE-799=20r=C3=A9sultats=20personnes=20ca?=
 =?UTF-8?q?rds=20disciplines=20et=20etablissements=20layout=20+=20opacite?=
 =?UTF-8?q?=20hover=20facettes=20tiroir=20ouvert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/results/FacetsList.vue  |  4 +++
 .../personnes/results/PersonnesCard.vue       | 30 +++++--------------
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/components/common/results/FacetsList.vue b/src/components/common/results/FacetsList.vue
index fb803bd9..bee24150 100644
--- a/src/components/common/results/FacetsList.vue
+++ b/src/components/common/results/FacetsList.vue
@@ -365,4 +365,8 @@ watch(() => props.parametersLoaded, () => {
     margin-top: 15px;
   }
 }
+
+:deep(.v-expansion-panel-title--active:hover > .v-expansion-panel-title__overlay) {
+  opacity: 0.04;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/personnes/results/PersonnesCard.vue b/src/components/personnes/results/PersonnesCard.vue
index 9f138139..ec5a6ff7 100644
--- a/src/components/personnes/results/PersonnesCard.vue
+++ b/src/components/personnes/results/PersonnesCard.vue
@@ -39,17 +39,13 @@
     </div>
     <div class="vertical-spacer"></div>
     <div class="second-half">
-      <div class="disciplines">
-        <template v-for="name in item.disciplines" :key="name">
-          {{ name }}<span class="separator"> ; </span>
+        <template v-for="(name, index) in item.disciplines" :key="name">
+          {{ name }}<span v-if="index !== item.disciplines.length - 1">{{ "\xa0" }};{{ "\xa0" }}</span>
         </template>
-      </div>
-      <span>-</span>
-      <div class="etablissements">
-        <template v-for="name in item.etablissements " :key="name">
-          {{ name }}<span class="separator"> ; </span>
+        <span>{{ "\xa0"+ "|" + "\xa0" }}</span>
+        <template v-for="(name, index) in item.etablissements " :key="name">
+          {{ name }}<span v-if="index !== item.etablissements.length - 1">{{ "\xa0" }};{{ "\xa0" }}</span>
         </template>
-      </div>
     </div>
   </v-card>
 </template>
@@ -170,6 +166,7 @@ function goToPersonne(hash) {
       .nomprenom {
         display: flex;
         flex-direction: row;
+        flex-wrap: wrap;
         text-decoration: none;
         color: rgb(var(--v-theme-primary));
         font-size: 23.5px;
@@ -192,10 +189,10 @@ function goToPersonne(hash) {
   .action {
     display: flex;
     justify-content: flex-start;
+    flex-wrap: nowrap;
     align-items: center;
     width: 100%;
     height: 100px;
-    flex-wrap: wrap;
 
     @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
       justify-content: flex-end;
@@ -229,6 +226,7 @@ function goToPersonne(hash) {
 
 .second-half {
   display: flex;
+  flex-wrap: wrap;
   height: 100%;
   padding: 0.5rem;
   font-weight: bold;
@@ -248,18 +246,6 @@ function goToPersonne(hash) {
   .disciplines {
     margin-right: 0.5em;
   }
-
-
-  .etablissements {
-    margin: 0 0.5em;
-  }
-
-  .disciplines,
-  .etablissements {
-    .separator:last-of-type {
-      display: none;
-    }
-  }
 }
 
 .subtitle {

From bf2bc8135a66c16224ea24246cc8742c2f96e580 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Tue, 1 Aug 2023 15:20:42 +0200
Subject: [PATCH 11/36] THE-799 refacto css + layout general personneView +
 titre

---
 src/App.vue                                   |  96 ++++++++++++
 .../personnes/results/PersonnesCard.vue       |  37 -----
 src/views/PersonneView.vue                    | 148 +++++-------------
 src/views/ResultView.vue                      |  81 ++--------
 4 files changed, 146 insertions(+), 216 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3eb99219..9b039056 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -267,6 +267,102 @@ h4 {
   }
 }
 
+.search-bar-container {
+  grid-column-start: 2;
+  margin-top: 50px;
+
+  display: grid;
+  grid-template-columns: 20fr 3fr 80fr;
+}
+
+.sub-header {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 10fr 103fr 10fr;
+
+  .sub_header__logo {
+    grid-column-start: 1;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    h1 {
+      text-align: center;
+      width: 80%;
+      font-weight: 300;
+      font-size: 14px;
+    }
+
+    .logo {
+      margin-top: 0;
+      height: 115px;
+    }
+  }
+
+  .sub_header__action {
+    grid-column-start: 3;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1 0 auto;
+
+    .domain-selector,
+    .searchbar {
+      width: 90%;
+    }
+  }
+}
+
+.v-overlay :deep(.v-overlay__content) {
+  padding: 0 0;
+  background-color: rgb(var(--v-theme-background));
+}
+
+.white-containers {
+  background-color: rgb(var(--v-theme-surface));
+  border: solid 1px rgb(var(--v-theme-gris-clair));
+}
+
+.nom-card {
+  flex: 1 0 100%;
+  display: flex;
+  align-items: center;
+
+  @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+    flex: 1 0 60%;
+    margin-left: 0.5em;
+  }
+
+  .nomprenom {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    text-decoration: none;
+    color: rgb(var(--v-theme-primary));
+    font-size: 23.5px;
+
+    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
+      font-size: 29.5px;
+    }
+
+    .prenom {
+      font-weight: 400;
+    }
+
+    .nom {
+      font-weight: 700;
+    }
+  }
+
+  #logoIdref {
+    margin-left: 1em;
+    height: 1em;
+  }
+}
+
 .grecaptcha-badge { visibility: hidden; }
 </style>
 <style scoped lang="scss">
diff --git a/src/components/personnes/results/PersonnesCard.vue b/src/components/personnes/results/PersonnesCard.vue
index ec5a6ff7..cc230180 100644
--- a/src/components/personnes/results/PersonnesCard.vue
+++ b/src/components/personnes/results/PersonnesCard.vue
@@ -152,38 +152,6 @@ function goToPersonne(hash) {
         max-height: 45px;
       }
     }
-
-    .nom-card {
-      flex: 1 0 100%;
-      display: flex;
-      align-items: center;
-
-      @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-        flex: 1 0 60%;
-        margin-left: 0.5em;
-      }
-
-      .nomprenom {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        text-decoration: none;
-        color: rgb(var(--v-theme-primary));
-        font-size: 23.5px;
-
-        @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-          font-size: 29.5px;
-        }
-
-        .prenom {
-          font-weight: 400;
-        }
-
-        .nom {
-          font-weight: 700;
-        }
-      }
-    }
   }
 
   .action {
@@ -215,11 +183,6 @@ function goToPersonne(hash) {
   }
 }
 
-#logoIdref {
-  margin-left: 1em;
-  height: 1em;
-}
-
 .vertical-spacer {
   flex: 1;
 }
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 3d0ab7bd..5db1d851 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -9,6 +9,7 @@
             :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
     </v-icon>
   </nav>
+<!--  Mobile-->
   <div v-if="mobile" class="logo-menu-wrapper">
     <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo">
       <img alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg"/>
@@ -35,31 +36,25 @@
       </div>
     </v-expand-transition>
   </div>
+<!--  Desktop-->
   <div v-else class="sub-header">
-    <div class="left-side sub_header__logo">
-      <RouterLink :to="{ name: 'home' }" title="Accueil du site">
-        <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg"/>
-      </RouterLink>
-      <h1>{{ $t("slogan") }}</h1>
-    </div>
-    <div class="sub_header__action">
-      <domain-selector @changeDomain="changeDomain" compact></domain-selector>
-      <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
-                  @onError="displayError"/>
-    </div>
-  </div>
-  <div v-if="!mobile" class="search-filter">
-    <div class="left-side statistique__title">
-      <v-icon size="40px">mdi-account</v-icon>
+    <div class="search-bar-container white-containers">
+      <div class="sub_header__logo">
+        <RouterLink :to="{ name: 'home' }" title="Accueil du site">
+          <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg"/>
+        </RouterLink>
+        <h1>{{ $t("slogan") }}</h1>
+      </div>
+      <div class="sub_header__action">
+        <domain-selector @changeDomain="changeDomain" compact></domain-selector>
+        <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
+                    @onError="displayError"/>
+      </div>
     </div>
-    <action-bar-personnes></action-bar-personnes>
   </div>
 
   <div class="main-wrapper">
-    <div class="left-side nav-bar statistique__content" v-if="!mobile">
-      <statistique-card-personne :stats="item.roles"></statistique-card-personne>
-    </div>
-    <div class="result-components">
+    <div class="result-components white-containers">
       <v-card-text v-if="!dataReady">
         <v-container fluid fill-height>
           <v-layout justify-center align-center>
@@ -71,17 +66,13 @@
       <div v-if="dataReady">
         <div class="info">
           <v-icon size="45px">$personne</v-icon>
-          <div class="sep">
-            <v-divider vertical v-if="item.has_idref"></v-divider>
-          </div>
-          <a v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank">
-            <img alt="logo" id="logoIMG" src="@/assets/idref-icone.png"/>
-          </a>
           <div class="nom-card">
-
             <div class="nomprenom">
-              <span class="prenom">{{ item.prenom }}</span>
+              <span class="prenom">{{ item.prenom + "\xa0"}}</span>
               <span class="nom">{{ item.nom }}</span>
+              <a v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank">
+                <img alt="logo" id="logoIdref" src="@/assets/idref-icone.png"/>
+              </a>
             </div>
           </div>
 
@@ -299,51 +290,6 @@ function displayError(message, opt) {
   }
 }
 
-.sub-header {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-
-  .sub_header__logo {
-    background-color: rgb(var(--v-theme-surface));
-    z-index: 2;
-
-    h1 {
-      text-align: center;
-      width: 80%;
-      font-weight: 300;
-      font-size: 16px;
-    }
-
-    .logo {
-      margin-top: 0;
-    }
-  }
-
-  .sub_header__action {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1 0 auto;
-
-    .domain-selector,
-    .searchbar {
-      width: 70%;
-    }
-
-    .domain-selector {
-      :deep(.v-btn__content) {
-        flex-direction: row;
-      }
-
-      :deep(.v-icon) {
-        margin-right: 1rem;
-      }
-    }
-  }
-}
-
 .statistique__title {
   align-items: flex-start;
   background-color: rgb(var(--v-theme-gris-clair));
@@ -379,22 +325,22 @@ function displayError(message, opt) {
   }
 }
 
-
 .main-wrapper {
-  flex-direction: row;
-  align-items: flex-start;
+  padding: 30px 0;
+  display: grid;
+  grid-template-columns: 10fr 103fr 10fr;
+  align-items: start;
   margin-top: 0;
   width: 100%;
 
-  .result-components {
-    width: calc(95% - 2rem);
-    margin-right: 1rem;
-    margin-left: 1rem;
-    margin-bottom: 2rem;
 
-    @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-      width: calc(80% - 2rem);
-    }
+  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+    grid-template-columns: 100%;
+  }
+
+  .result-components {
+    grid-column-start: 2;
+    padding: 0 2em;
 
     .info {
       display: flex;
@@ -428,32 +374,8 @@ function displayError(message, opt) {
       }
 
       .nom-card {
-        display: flex;
-        align-items: center;
-        margin-left: 1rem;
-
-        @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-          margin-left: 2rem;
-        }
-
         .nomprenom {
-          display: flex;
-          flex-direction: column;
-          text-decoration: none;
           color: rgb(var(--v-theme-orange-abes));
-          font-size: 23.5px;
-
-          @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-            font-size: 29.5px;
-          }
-
-          .prenom {
-            font-weight: 400;
-          }
-
-          .nom {
-            font-weight: 700;
-          }
         }
       }
 
@@ -518,4 +440,14 @@ function displayError(message, opt) {
     top: 90vh !important;
   }
 }
+
+.domain-selector {
+  :deep(.v-btn__content) {
+    flex-direction: row !important;
+  }
+
+  :deep(.v-icon) {
+    margin-right: 1rem !important;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index d2a87d2c..6bda352e 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -41,7 +41,7 @@
   </div>
 <!--  Desktop-->
   <div v-else class="sub-header">
-    <div id="search-bar-container" class="white-containers">
+    <div class="search-bar-container white-containers">
       <div class="sub_header__logo">
         <RouterLink :to="{ name: 'home' }" title="Accueil du site">
           <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
@@ -318,74 +318,8 @@ watch(() => currentRoute.query.domaine, () => {
   }
 }
 
-.sub-header {
-  width: 100%;
-
-  display: grid;
-  grid-template-columns: 10fr 103fr 10fr;
-}
-
-#search-bar-container {
-  grid-column-start: 2;
-  margin-top: 50px;
-
-  display: grid;
-  grid-template-columns: 20fr 3fr 80fr;
-}
-
-.sub_header__logo {
-  grid-column-start: 1;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  h1 {
-    text-align: center;
-    width: 80%;
-    font-weight: 300;
-    font-size: 14px;
-  }
-
-  .logo {
-    margin-top: 0;
-    height: 115px;
-  }
-}
-
-.sub_header__action {
-  grid-column-start: 3;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex: 1 0 auto;
-
-  .domain-selector,
-  .searchbar {
-    width: 90%;
-  }
-
-  .domain-selector {
-    :deep(.v-btn__content) {
-      flex-direction: row;
-    }
-
-    :deep(.v-icon) {
-      margin-right: 1rem;
-    }
-  }
-}
-
-.v-overlay :deep(.v-overlay__content) {
-  padding: 0 0;
-  background-color: rgb(var(--v-theme-background));
-}
-
 .result-main-wrapper {
   padding: 30px 0;
-
   display: grid;
   grid-template-columns: 10fr 20fr 3fr 80fr 10fr;
   align-items: start;
@@ -406,8 +340,13 @@ watch(() => currentRoute.query.domaine, () => {
   }
 }
 
-.white-containers {
-  background-color: rgb(var(--v-theme-surface));
-  border: solid 1px rgb(var(--v-theme-gris-clair));
-}
+  .domain-selector {
+    :deep(.v-btn__content) {
+      flex-direction: row !important;
+    }
+
+    :deep(.v-icon) {
+      margin-right: 1rem !important;
+    }
+  }
 </style>
\ No newline at end of file

From 457537abee5d278e82ef76bab95698f02ee8ac80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Tue, 1 Aug 2023 16:01:47 +0200
Subject: [PATCH 12/36] =?UTF-8?q?THE-799=20adaptation=20mots=20cl=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Keywords.vue | 27 +++++++++++++---------
 src/views/PersonneView.vue         | 36 ++++++++++++++++++++++--------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
index b69c6086..7468a898 100644
--- a/src/components/common/Keywords.vue
+++ b/src/components/common/Keywords.vue
@@ -7,7 +7,8 @@
     </div>
     <v-chip-group id="first-chip-line">
       <v-chip label v-for="keyWord in selectKeyWords(keyWordPerLine, 0)" :key="keyWord.keyword + forceRenderKey"
-        :title="keyWord.keyword" :disabled="keyWord.type === 'sujetsRameau' ? false : true"
+        :title="keyWord.keyword" :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
+        :disabled="keyWord.type === 'sujetsRameau' ? false : true"
         @click="if (keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
         <span class="key-word-label">{{ keyWord.keyword }}</span>
       </v-chip>
@@ -16,13 +17,14 @@
       <!--      readmore button effect-->
       <v-chip v-show="readMore" label v-for="keyWord in selectKeyWords(Infinity, keyWordPerLine)"
         :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword"
+        :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
         :disabled="keyWord.type === 'sujetsRameau' ? false : true"
-        @click="if (keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
+        @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
         <span class="key-word-label">{{ keyWord.keyword }}</span>
       </v-chip>
     </v-chip-group>
     <div id="key-words-button-wrapper" v-if="selectKeyWords(Infinity, keyWordPerLine).length > 0">
-      <v-btn id="read-more-button" @click="readMore = !readMore" flat>
+      <v-btn id="read-more-button" variant="outlined" @click="readMore = !readMore" flat>
         <span></span>
         <span>{{ readMore ? $t('theseView.showLessKeywords') : $t('theseView.showMoreKeywords') }}</span>
         <v-icon class="toggle-up-down" :class='{ "rotate": readMore }'>mdi-arrow-down-circle-outline</v-icon>
@@ -32,7 +34,7 @@
 </template>
 
 <script setup>
-import {onBeforeUpdate, ref, watch, computed, onBeforeUnmount, onBeforeMount} from "vue";
+import {onBeforeUpdate, ref, watch, computed, onBeforeMount} from "vue";
 import { useDisplay } from "vuetify";
 import LanguageSelector from "./LanguageSelector.vue";
 
@@ -128,7 +130,7 @@ watch(mobile, (newValue) => {
 .key-words-title-wrapper {
   display: inline-flex;
   align-items: center;
-  margin-left: 5px;
+  margin: 0.4em 0 0.8em 0;
 }
 
 h1 {
@@ -147,7 +149,7 @@ h1 {
 }
 
 .v-chip-group {
-  margin: 0 10px;
+  margin-top: 0.5em;
   padding: 0;
   justify-content: start;
   flex-wrap: nowrap;
@@ -156,6 +158,14 @@ h1 {
     flex-wrap: wrap;
     justify-content: space-between;
   }
+
+  .free-chip {
+    background-color: rgb(var(--v-theme-secondary-darken-2));
+  }
+
+  .rameau-chip {
+    background-color: rgb(var(--v-theme-orange-abes));
+  }
 }
 
 #second-chip-line {
@@ -163,7 +173,6 @@ h1 {
 }
 
 .v-chip {
-  background-color: rgb(var(--v-theme-fond-chip-blue));
   justify-content: center;
   width: 19%;
 
@@ -176,7 +185,7 @@ h1 {
   font-family: Roboto Black, sans-serif;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-surface));
 }
 
 .v-chip--disabled {
@@ -201,9 +210,7 @@ h1 {
 
 #read-more-button {
   margin-top: 7px;
-  background-color: rgb(var(--v-theme-primary));
   text-transform: none;
-  color: white;
   width: 220px;
   display: inline-flex;
   padding: 0 7px;
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 5db1d851..8d542fc2 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -36,6 +36,7 @@
       </div>
     </v-expand-transition>
   </div>
+
 <!--  Desktop-->
   <div v-else class="sub-header">
     <div class="search-bar-container white-containers">
@@ -55,6 +56,7 @@
 
   <div class="main-wrapper">
     <div class="result-components white-containers">
+<!--   #TODO   Skeletton-->
       <v-card-text v-if="!dataReady">
         <v-container fluid fill-height>
           <v-layout justify-center align-center>
@@ -63,7 +65,8 @@
           </v-layout>
         </v-container>
       </v-card-text>
-      <div v-if="dataReady">
+<!--      End skeletton-->
+      <div class="info-wrapper" v-if="dataReady">
         <div class="info">
           <v-icon size="45px">$personne</v-icon>
           <div class="nom-card">
@@ -75,9 +78,15 @@
               </a>
             </div>
           </div>
-
         </div>
-        <thesis-keywords class="thesis-component" :data-ready="true" :keywordsAreSet="true" :these="conversionMotClesFormatTheses(item.mots_cles)" />
+
+        <thesis-keywords
+          class="thesis-component"
+          :data-ready="true"
+          :keywordsAreSet="true"
+          :these="conversionMotClesFormatTheses(item.mots_cles)"
+        />
+
         <div class="theses">
           <template v-for="key in ['auteur','directeur de thèse','rapporteur','président du jury','membre du jury']"
                     :key="key">
@@ -367,15 +376,19 @@ function displayError(message, opt) {
         }
       }
 
-      a {
-        img {
-          max-height: 30px;
-        }
-      }
 
       .nom-card {
         .nomprenom {
           color: rgb(var(--v-theme-orange-abes));
+
+          a {
+            display: flex;
+            align-items: center;
+
+            img {
+              margin-left: 0.5em !important;
+            }
+          }
         }
       }
 
@@ -388,6 +401,7 @@ function displayError(message, opt) {
 
       hr {
         margin: 1rem 0 2rem 0;
+        color: rgb(var(--v-theme-gris-fonce));
       }
 
       .card-wrapper {
@@ -396,12 +410,16 @@ function displayError(message, opt) {
     }
 
     .thesis-component {
-      margin: 0 auto 20px;
+      margin: 2em auto 20px;
     }
 
   }
 }
 
+.info-wrapper {
+  padding-top: 1em;
+}
+
 .colonnes-resultats {
   padding: 0;
 }

From 5b9e4715b98247a3d6395811a4eee259aae5793a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Tue, 1 Aug 2023 17:47:21 +0200
Subject: [PATCH 13/36] =?UTF-8?q?THE-799=20impl=C3=A9mentation=20des=20tir?=
 =?UTF-8?q?oirs=20par=20roles=20PersonneView.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/results/FacetDrawer.vue |   2 +-
 src/views/PersonneView.vue                    | 110 +++++++++---------
 2 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/src/components/common/results/FacetDrawer.vue b/src/components/common/results/FacetDrawer.vue
index ee7c9a48..45b93aae 100644
--- a/src/components/common/results/FacetDrawer.vue
+++ b/src/components/common/results/FacetDrawer.vue
@@ -1,6 +1,6 @@
 <template>
   <v-expansion-panels v-if="date || Object.keys(facet.checkboxes).length > 0">
-    <v-expansion-panel class="elevation-0">
+    <v-expansion-panel>
       <v-expansion-panel-title class="facet-title-panel">
         <template v-slot:actions="{ expanded }">
           <v-icon :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="x-large">
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 8d542fc2..4262c4d0 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -87,28 +87,39 @@
           :these="conversionMotClesFormatTheses(item.mots_cles)"
         />
 
+<!--        Tiroirs thèses par rôles-->
         <div class="theses">
-          <template v-for="key in ['auteur','directeur de thèse','rapporteur','président du jury','membre du jury']"
-                    :key="key">
-            <div v-if="item.theses[key] && item.theses[key].length > 0">
-              <hr/>
-              <h2 :id="anchorValueFromKey(key)">
-                {{ $t("personnes.personneView.roles." + i18nValueFromKey(key), [item.theses[key].length]) }}</h2>
-              <div v-for="these in item.theses[key]" :key="`${these.id}`" class="card-wrapper">
-                <result-card :titre="these.titre"
-                             :date="these.status === 'enCours' ? new Date(these.date_inscription).toLocaleDateString('en-GB') : new Date(these.date_soutenance).toLocaleDateString('en-GB')"
-                             :auteur="these.auteurs" :directeurs="these.directeurs" :discipline="these.discipline"
-                             :etab="these.etablissement_soutenance.nom" :id="these.id" :status="these.status">
-                </result-card>
+          <v-expansion-panels multiple v-model="panel" class="role-expansion-panel-wrapper">
+            <template v-for="key in ['auteur','directeur de thèse','rapporteur','président du jury','membre du jury']"
+                      :key="key">
+              <div v-if="item.theses[key] && item.theses[key].length > 0" class="role-expansion-panel">
+                <v-expansion-panel>
+                  <v-expansion-panel-title>
+                    <template v-slot:actions="{ expanded }">
+                      <v-icon :icon="expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'" size="x-large">
+                      </v-icon>
+                    </template>
+                    <h2 :id="anchorValueFromKey(key)">
+                      {{ $t("personnes.personneView.roles." + i18nValueFromKey(key), [item.theses[key].length]) }}
+                    </h2>
+                  </v-expansion-panel-title>
+                  <v-expansion-panel-text>
+                    <div v-for="these in item.theses[key]" :key="`${these.id}`" class="card-wrapper">
+                      <result-card :titre="these.titre"
+                                   :date="these.status === 'enCours' ? new Date(these.date_inscription).toLocaleDateString('en-GB') : new Date(these.date_soutenance).toLocaleDateString('en-GB')"
+                                   :auteur="these.auteurs" :directeurs="these.directeurs" :discipline="these.discipline"
+                                   :etab="these.etablissement_soutenance.nom" :id="these.id" :status="these.status">
+                      </result-card>
+                    </div>
+                  </v-expansion-panel-text>
+                </v-expansion-panel>
               </div>
-            </div>
-          </template>
+            </template>
+          </v-expansion-panels>
         </div>
       </div>
     </div>
-    <div class="scroll-to-top-container">
-      <scroll-to-top-button class="scroll-to-top-wrapper" :nb-result=1></scroll-to-top-button>
-    </div>
+    <scroll-to-top-button class="scroll-to-top-wrapper" :nb-result=1></scroll-to-top-button>
   </div>
 </template>
 
@@ -122,7 +133,6 @@ import DomainSelector from '@/components/common/DomainSelector.vue';
 
 import {personnesAPIService} from "@/services/PersonnesAPI";
 import {useDisplay} from "vuetify";
-import ActionBarPersonnes from "@/components/personnes/ActionBar.vue";
 import StatistiqueCardPersonne from "@/components/personnes/StatistiqueCard.vue";
 import ResultCard from "@/components/theses/results/ResultCard.vue";
 import ScrollToTopButton from "@/components/common/ScrollToTopButton.vue";
@@ -139,6 +149,7 @@ const loading = ref(false);
 const dataReady = ref(false);
 const openMenu = ref(false);
 const item = ref({});
+const panel = ref([]);
 
 const {t} = useI18n();
 const {meta} = useMeta({});
@@ -156,7 +167,10 @@ const props = defineProps({
   }
 });
 
+
 onBeforeMount(() => {
+  panel.value = [0];
+
   dataReady.value = false;
   getPersonne(props.id).then(result => {
     item.value = result;
@@ -395,13 +409,28 @@ function displayError(message, opt) {
     }
 
     .theses {
-      h2 {
-        margin-bottom: 1rem;
+      padding-top: 1em;
+
+      .role-expansion-panel-wrapper {
+        display: flex;
+        flex-direction: column;
       }
 
-      hr {
-        margin: 1rem 0 2rem 0;
-        color: rgb(var(--v-theme-gris-fonce));
+      .role-expansion-panel {
+        border-top: 2px solid rgb(var(--v-theme-gris-fonce));
+
+        h2 {
+          padding: 0.5em 0 0.5em;
+          font-size: 26px;
+        }
+      }
+
+      .v-expansion-panel :deep(.v-expansion-panel__shadow) {
+        box-shadow: none;
+      }
+
+      .v-expansion-panel-title--active :deep(.v-expansion-panel-title__overlay) {
+        opacity: 0;
       }
 
       .card-wrapper {
@@ -424,41 +453,6 @@ function displayError(message, opt) {
   padding: 0;
 }
 
-.result-components-wrapper {
-  display: grid;
-}
-
-.scroll-to-top-container {
-  position: fixed;
-  left: 90vw;
-  bottom:1vh;
-  width: 5%;
-
-  @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
-    left: 95.5vw;
-  }
-
-  @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
-    left: 94vw;
-  }
-
-  @media #{ map-get(settings.$display-breakpoints, 'xl-and-up')} {
-    left: 97vw;
-    bottom:8vh;
-  }
-}
-
-.scroll-to-top-wrapper {
-  margin-left: 25px;
-  margin-bottom: 0;
-
-  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-    margin: 0 0;
-    height: 60px;
-    top: 90vh !important;
-  }
-}
-
 .domain-selector {
   :deep(.v-btn__content) {
     flex-direction: row !important;

From 679ec43cfcb5bd276cb7bb64b7c16ddb243b40d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Wed, 2 Aug 2023 11:24:05 +0200
Subject: [PATCH 14/36] THE-799 Listes de theses par role sticky

---
 src/components/theses/results/ResultCard.vue | 2 +-
 src/views/PersonneView.vue                   | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/theses/results/ResultCard.vue b/src/components/theses/results/ResultCard.vue
index 26143478..dd04293b 100644
--- a/src/components/theses/results/ResultCard.vue
+++ b/src/components/theses/results/ResultCard.vue
@@ -150,7 +150,7 @@ function linkTo(id) {
 
 .card-title {
   grid-column-start: 2;
-  padding: 0 10px 0;
+  padding: 10px 10px 0;
   font-size: 18px;
   font-family: Roboto-Regular, sans-serif;
   font-weight: 500;
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 4262c4d0..0888b53d 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -416,6 +416,14 @@ function displayError(message, opt) {
         flex-direction: column;
       }
 
+      :deep(.v-expansion-panel-title--active) {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        background-color: rgb(var(--v-theme-surface));
+        border-bottom: 1px solid rgb(var(--v-theme-orange-abes));
+      }
+
       .role-expansion-panel {
         border-top: 2px solid rgb(var(--v-theme-gris-fonce));
 

From 03cc77ed254e6dccfe3eafd747cdcc1da578d588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Wed, 2 Aug 2023 12:17:12 +0200
Subject: [PATCH 15/36] THE-799 dividers liste theses refactoring css + layout
 page PersonneView.vue

---
 src/App.vue                                  | 5 +++++
 src/components/common/results/ResultList.vue | 5 -----
 src/views/PersonneView.vue                   | 5 +++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9b039056..862c4ab1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -363,6 +363,11 @@ h4 {
   }
 }
 
+.result-dividers {
+  border: 1px solid rgb(var(--v-theme-gris-clair));
+  margin:0 1rem;
+}
+
 .grecaptcha-badge { visibility: hidden; }
 </style>
 <style scoped lang="scss">
diff --git a/src/components/common/results/ResultList.vue b/src/components/common/results/ResultList.vue
index 24d647d3..830d9d3a 100644
--- a/src/components/common/results/ResultList.vue
+++ b/src/components/common/results/ResultList.vue
@@ -38,9 +38,4 @@ const props = defineProps({
 .card-wrapper {
   margin-bottom: 1rem;
 }
-
-.result-dividers {
-  border: 1px solid rgb(var(--v-theme-gris-clair));
-  margin:0 1rem;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 0888b53d..8daa0849 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -104,12 +104,13 @@
                     </h2>
                   </v-expansion-panel-title>
                   <v-expansion-panel-text>
-                    <div v-for="these in item.theses[key]" :key="`${these.id}`" class="card-wrapper">
+                    <div v-for="(these, index) in item.theses[key]" :key="`${these.id}`" class="card-wrapper">
                       <result-card :titre="these.titre"
                                    :date="these.status === 'enCours' ? new Date(these.date_inscription).toLocaleDateString('en-GB') : new Date(these.date_soutenance).toLocaleDateString('en-GB')"
                                    :auteur="these.auteurs" :directeurs="these.directeurs" :discipline="these.discipline"
                                    :etab="these.etablissement_soutenance.nom" :id="these.id" :status="these.status">
                       </result-card>
+                      <hr class="result-dividers" v-if="index < item.theses[key].length - 1" />
                     </div>
                   </v-expansion-panel-text>
                 </v-expansion-panel>
@@ -409,7 +410,7 @@ function displayError(message, opt) {
     }
 
     .theses {
-      padding-top: 1em;
+      padding: 1em 0;
 
       .role-expansion-panel-wrapper {
         display: flex;

From ce1832baddf4aabf96606ad074b128fb2c5cffcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Wed, 2 Aug 2023 14:36:23 +0200
Subject: [PATCH 16/36] THE-799 skeleton PersonneView.vue + carte theses lazy

---
 src/views/PersonneView.vue | 52 +++++++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 8daa0849..1ec6c54e 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -56,17 +56,17 @@
 
   <div class="main-wrapper">
     <div class="result-components white-containers">
-<!--   #TODO   Skeletton-->
-      <v-card-text v-if="!dataReady">
-        <v-container fluid fill-height>
-          <v-layout justify-center align-center>
-            <v-progress-circular indeterminate color="rgb(var(--v-theme-primary))">
-            </v-progress-circular>
-          </v-layout>
-        </v-container>
-      </v-card-text>
+<!--   Skeletton-->
+      <div v-if="!dataReady"  class="skeleton-wrapper">
+        <v-skeleton-loader type="list-item-avatar-two-line" class="skeleton"></v-skeleton-loader>
+        <v-skeleton-loader type="divider" class="skeleton"></v-skeleton-loader>
+        <v-skeleton-loader type="table-row"></v-skeleton-loader>
+        <v-skeleton-loader type="button" class="skeleton"></v-skeleton-loader>
+        <v-skeleton-loader type="divider" class="skeleton"></v-skeleton-loader>
+        <v-skeleton-loader v-for="i in 4" :key="i" type="paragraph" class="skeleton-cards"></v-skeleton-loader>
+      </div>
 <!--      End skeletton-->
-      <div class="info-wrapper" v-if="dataReady">
+      <div class="info-wrapper" v-else>
         <div class="info">
           <v-icon size="45px">$personne</v-icon>
           <div class="nom-card">
@@ -104,14 +104,16 @@
                     </h2>
                   </v-expansion-panel-title>
                   <v-expansion-panel-text>
-                    <div v-for="(these, index) in item.theses[key]" :key="`${these.id}`" class="card-wrapper">
-                      <result-card :titre="these.titre"
-                                   :date="these.status === 'enCours' ? new Date(these.date_inscription).toLocaleDateString('en-GB') : new Date(these.date_soutenance).toLocaleDateString('en-GB')"
-                                   :auteur="these.auteurs" :directeurs="these.directeurs" :discipline="these.discipline"
-                                   :etab="these.etablissement_soutenance.nom" :id="these.id" :status="these.status">
-                      </result-card>
-                      <hr class="result-dividers" v-if="index < item.theses[key].length - 1" />
-                    </div>
+                      <div v-for="(these, index) in item.theses[key]" :key="`${these.id}`" class="card-wrapper">
+                        <v-lazy :options="{ threshold: 1.0 }">
+                          <result-card :titre="these.titre"
+                                       :date="these.status === 'enCours' ? new Date(these.date_inscription).toLocaleDateString('en-GB') : new Date(these.date_soutenance).toLocaleDateString('en-GB')"
+                                       :auteur="these.auteurs" :directeurs="these.directeurs" :discipline="these.discipline"
+                                       :etab="these.etablissement_soutenance.nom" :id="these.id" :status="these.status">
+                          </result-card>
+                        </v-lazy>
+                        <hr class="result-dividers" v-if="index < item.theses[key].length - 1" />
+                      </div>
                   </v-expansion-panel-text>
                 </v-expansion-panel>
               </div>
@@ -471,4 +473,18 @@ function displayError(message, opt) {
     margin-right: 1rem !important;
   }
 }
+
+.skeleton-cards {
+  height: 150px !important;
+  background-color: rgb(var(--v-theme-gris-clair));
+  margin: 1em 0;
+}
+
+.skeleton {
+  margin-bottom: 3em;
+}
+
+.skeleton-wrapper {
+  padding: 2em 0;
+}
 </style>
\ No newline at end of file

From c86926212278b5886a55ffa5e1ab0c86c5ae0cb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Wed, 2 Aug 2023 17:21:24 +0200
Subject: [PATCH 17/36] THE-799 layout TheseView.vue

---
 src/App.vue                               |   1 +
 src/components/theses/ButtonsList.vue     |  32 ++++---
 src/components/theses/ThesisComponent.vue |  57 ++++++++---
 src/components/theses/ThesisTitle.vue     |  14 ++-
 src/locales/en.json                       |   3 +-
 src/locales/fr.json                       |   3 +-
 src/views/TheseView.vue                   | 109 +++++-----------------
 7 files changed, 101 insertions(+), 118 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 862c4ab1..d4858e60 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -115,6 +115,7 @@ main {
     grid-column-start: 2;
     background-color: rgb(var(--v-theme-surface));
     border: solid 1px rgb(var(--v-theme-gris-clair));
+    padding-bottom: 1em;
   }
 
   .mobile-nav-bar {
diff --git a/src/components/theses/ButtonsList.vue b/src/components/theses/ButtonsList.vue
index c987980f..56907f0e 100644
--- a/src/components/theses/ButtonsList.vue
+++ b/src/components/theses/ButtonsList.vue
@@ -2,6 +2,9 @@
   <MessageBox ref="messageBox"></MessageBox>
   <div class="buttons">
     <div class="buttons-header">
+      <span>{{ $t("theseView.access") }}</span>
+    </div>
+    <div class="buttons-sub-header">
       <div class="header-container no-wrap-text">
         <v-icon color="primary" class="menu-icon">mdi-certificate</v-icon>
         <span class="buttons-title-header"><span v-if="soutenue">{{ $t("theseView.valide") }}</span></span>
@@ -13,8 +16,8 @@
         </button>
       </div>
     </div>
-    <div class="listButtons no-wrap-text" v-if="soutenue">
-      <v-btn color="primary" append-icon="mdi-arrow-right-circle" flat v-for="b in listButtons" :key="b"
+    <div class="list-buttons no-wrap-text" v-if="soutenue">
+      <v-btn color="secondary-darken-2" append-icon="mdi-arrow-right-circle" flat v-for="b in listButtons" :key="b"
         :href="baseURL + b.url" target="_blank" :title="b.libelle" :aria-label="b.libelle">{{
           b.libelle }}</v-btn>
       <v-skeleton-loader v-if="loading" :key="i" type="list-item" class="skeleton"></v-skeleton-loader>
@@ -84,10 +87,18 @@ function closeOverlay() {
 
 .buttons-header {
   overflow: hidden;
-  padding: 4px 20px;
-  width: 100%;
-  background-color: rgb(var(--v-theme-gris-clair));
+  padding: 0.4em 0.8em 0;
+
   font-size: 22px;
+  font-weight: 600;
+  font-family: Roboto-Bold, sans-serif;
+}
+
+.buttons-sub-header {
+  overflow: hidden;
+  padding: 0 1.4em;
+  width: 100%;
+  font-size: 18px;
   height: 42px;
 
   display: inline-flex;
@@ -97,14 +108,13 @@ function closeOverlay() {
     padding: unset;
     font-size: 16px;
   }
-
-  margin-bottom: 1em;
+  margin-bottom: 0.6em;
 }
 
 .header-container {
   height: 2rem;
-  display: inline-grid;
-  grid-template-columns: 2fr 1fr 10fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr 100fr;
   grid-template-rows: 20% 60% 20%;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
@@ -147,7 +157,7 @@ function closeOverlay() {
   }
 }
 
-.listButtons {
+.list-buttons {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -159,13 +169,13 @@ function closeOverlay() {
     justify-content: space-between;
     text-transform: none;
     margin-bottom: 1em;
-
   }
 }
 
 .buttons {
   display: flex;
   flex-direction: column;
+  border-right: 2px solid rgb(var(--v-theme-gris-clair));
 
   .buttons-list {
     width: 85%;
diff --git a/src/components/theses/ThesisComponent.vue b/src/components/theses/ThesisComponent.vue
index ebd27de7..42f19654 100644
--- a/src/components/theses/ThesisComponent.vue
+++ b/src/components/theses/ThesisComponent.vue
@@ -1,15 +1,22 @@
 <template>
   <thesis-toolbar :source="these.source" :nnt="props.nnt"
     :etab-ppn="these.etabSoutenance ? these.etabSoutenance.ppn : ''" />
-  <div>
-    <thesis-title :data-ready="dataReady" :status="these.status" :titles="these.titres" id="top-of-thesis-component" />
-    <thesis-table class="thesis-component" :these="these" />
-    <v-divider v-if="keywordsAreSet" :thickness="1" class="divider border-opacity-50" length="90%" />
-    <thesis-keywords class="thesis-component" :keywords-are-set="keywordsAreSet" :data-ready="dataReady" :these="these"
-      :selected-language="selectedLanguage" @changeLanguage="changeLanguage" />
-    <v-divider v-if="resumeIsSet" :thickness="1" class="divider border-opacity-50" length="90%" />
-    <thesis-resume class="thesis-component" :resume-is-set="resumeIsSet" :data-ready="dataReady" :these="these"
-      :selected-language="selectedLanguage" />
+  <div class="thesis-info-access-wrapper">
+    <thesis-title class="thesis-title" :data-ready="dataReady" :status="these.status" :titles="these.titres" />
+    <!-- Bare latérale Desktop -->
+    <div v-if="!mobile" class="access-buttons">
+      <!-- Menu boutons-liens desktop-->
+      <buttons-list :nnt="nnt" :soutenue="soutenue"></buttons-list>
+    </div>
+    <div class="thesis-info-wrapper">
+      <thesis-table class="thesis-component" :these="these" />
+      <v-divider v-if="keywordsAreSet" :thickness="1" class="divider border-opacity-50" length="90%" />
+      <thesis-keywords class="thesis-component" :keywords-are-set="keywordsAreSet" :data-ready="dataReady" :these="these"
+        :selected-language="selectedLanguage" @changeLanguage="changeLanguage" />
+      <v-divider v-if="resumeIsSet" :thickness="1" class="divider border-opacity-50" length="90%" />
+      <thesis-resume class="thesis-component" :resume-is-set="resumeIsSet" :data-ready="dataReady" :these="these"
+        :selected-language="selectedLanguage" />
+    </div>
     <div class="scroll-to-top-container">
       <scroll-to-top-button class="scroll-to-top-wrapper" :nb-result=1 />
     </div>
@@ -39,6 +46,7 @@ import { useI18n } from "vue-i18n";
 import { useMeta } from "vue-meta";
 import ThesisTitle from "@/components/theses/ThesisTitle.vue";
 import ThesisResume from "@/components/theses/ThesisResume.vue";
+import ButtonsList from "@/components/theses/ButtonsList.vue";
 
 const { t } = useI18n();
 const { meta } = useMeta({});
@@ -55,6 +63,9 @@ const props = defineProps({
   },
   nnt: {
     type: String
+  },
+  soutenue: {
+    type: Boolean
   }
 });
 
@@ -84,6 +95,30 @@ watchEffect(() => {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
+.thesis-info-access-wrapper {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 25fr 2fr 75fr;
+}
+
+.thesis-title {
+  hyphens: auto;
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+}
+
+.access-buttons {
+  grid-column-start: 1;
+  grid-row-start: 2;
+
+}
+
+.thesis-info-wrapper{
+  grid-column-start: 3;
+  grid-row-start: 2;
+}
+
 .thesis-component {
   width: 92%;
   margin: 0 auto 20px;
@@ -135,8 +170,4 @@ watchEffect(() => {
     top: 90vh !important;
   }
 }
-
-#top-of-thesis-component {
-  hyphens: auto;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/theses/ThesisTitle.vue b/src/components/theses/ThesisTitle.vue
index b8f9973c..70c2606e 100644
--- a/src/components/theses/ThesisTitle.vue
+++ b/src/components/theses/ThesisTitle.vue
@@ -6,7 +6,8 @@
     <div class="title-flexbox"> <!-- #TODO v-if anglais/francais -->
       <span>
         {{ currentTitle }}
-      </span><language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+      </span>
+      <language-selector class="language-selector" :languages="langList" @update-langue="onUpdateLangue"></language-selector>
     </div>
   </div>
 </template>
@@ -62,9 +63,7 @@ function onUpdateLangue(langue) {
 @use 'vuetify/settings';
 
 .title-wrapper {
-  padding: 20px 20px 10px 10px;
-  display: grid !important;
-  grid-template-columns: 2fr 20fr;
+  padding: 1.2em 1.2em 1em 1em;
 }
 
 .thesis-icon {
@@ -75,13 +74,20 @@ function onUpdateLangue(langue) {
 .title-flexbox {
   display: flex;
   flex-flow: row wrap;
+  grid-column-start: 2;
 
   span {
+    padding-top: 16px;
     font-family: Roboto-Medium, sans-serif;
     font-size: 25.5px;
     font-weight: 600;
+    color: rgb(var(--v-theme-text-dark-blue));
     letter-spacing: -0.5px;
     line-height: 1.2;
   }
 }
+
+.language-selector {
+    padding-top: 16px;
+}
 </style>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 68726310..38c313d7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -65,7 +65,8 @@
         "showMoreKeywords": "Show more keywords",
         "showLessKeywords": "Show less keywords",
         "showMoreAbstract": "Afficher la suite du résumé",
-        "showLessAbstract": "Afficher un extrait du résumé"
+        "showLessAbstract": "Afficher un extrait du résumé",
+        "access": "Thesis access"
     },
     "results": {
         "facetsHeader": "Filters",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index d61352ab..b5a127b5 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -75,7 +75,8 @@
     "showMoreAbstract": "Afficher la suite du résumé",
     "showLessAbstract": "Afficher un extrait du résumé",
     "projet": "Projet de thèse",
-    "doctorat": "Thèse de doctorat"
+    "doctorat": "Thèse de doctorat",
+    "access": "Accès à la thèse"
   },
   "results": {
     "facetsHeader": "Filtres",
diff --git a/src/views/TheseView.vue b/src/views/TheseView.vue
index ec69e50b..df506317 100644
--- a/src/views/TheseView.vue
+++ b/src/views/TheseView.vue
@@ -32,28 +32,27 @@
     </v-expand-transition>
   </div>
 
-  <!-- Bare latérale Desktop -->
+<!--Desktop-->
   <div v-else class="sub-header">
-    <div class="left-side sub_header__logo">
-      <RouterLink :to="{ name: 'home' }" title="Accueil du site">
-        <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
-      </RouterLink>
-      <h1>{{ $t("slogan") }}</h1>
-    </div>
-    <div class="sub_header__action">
-      <domain-selector @changeDomain="changeDomain" compact></domain-selector>
-      <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
-        @onError="displayError" />
+    <div class="search-bar-container white-containers">
+      <div class="sub_header__logo">
+        <RouterLink :to="{ name: 'home' }" title="Accueil du site">
+          <img class="logo" alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
+        </RouterLink>
+        <h1>{{ $t("slogan") }}</h1>
+      </div>
+      <div class="sub_header__action">
+        <domain-selector @changeDomain="changeDomain" compact></domain-selector>
+        <search-bar @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
+          @onError="displayError" />
+      </div>
     </div>
   </div>
 
   <div class="thesis-main-wrapper">
-    <div v-if="!mobile" class="nav-bar">
-      <!-- Futur composant boutons (barre de gauche)-->
-      <buttons-list :nnt="route.params.id" :soutenue="these.status === 'soutenue'"></buttons-list>
-    </div>
-    <div class="thesis-components">
-      <thesis-component :nnt="route.params.id" :these="these" :data-ready="true"></thesis-component>
+    <!-- Infos these -->
+    <div class="thesis-components white-containers">
+      <thesis-component :nnt="route.params.id" :these="these" :data-ready="true" :soutenue="these.status === 'soutenue'"></thesis-component>
     </div>
   </div>
 </template>
@@ -127,52 +126,6 @@ function closeOverlay() {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.sub-header {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-
-  .sub_header__logo {
-    background-color: rgb(var(--v-theme-surface));
-    z-index: 2;
-
-    h1 {
-      text-align: center;
-      width: 80%;
-      font-weight: 300;
-      font-size: 16px;
-    }
-
-    .logo {
-      margin-top: 0;
-    }
-  }
-
-  .sub_header__action {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1 0 auto;
-
-    .domain-selector,
-    .searchbar {
-      width: 70%;
-    }
-
-    .domain-selector {
-      :deep(.v-btn__content) {
-        flex-direction: row;
-      }
-
-      :deep(.v-icon) {
-        margin-right: 1rem;
-      }
-    }
-  }
-}
-
-
 .mobile-nav-bar {
   display: flex;
   justify-content: space-between;
@@ -230,48 +183,28 @@ function closeOverlay() {
   width: 80%;
 }
 
-.left-side {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  flex: 1 0 100%;
-  max-width: 20vw;
-
-  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-    max-width: 100%;
-    flex: 0 1 auto;
-    padding: 0;
-  }
-}
-
 .thesis-main-wrapper {
+  padding: 30px 0;
   display: grid;
-  grid-template-columns: 20vw auto;
+  grid-template-columns: 10fr 103fr 10fr;
   align-items: start;
   margin-top: 0;
   width: 100%;
-  height: 100%;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     grid-template-columns: 100%;
   }
 
   .thesis-components {
-    height: 100%;
+    grid-column-start: 2;
+
     width: 100%;
     display: flex;
     flex-direction: column;
+    padding-bottom: 5px;
   }
 }
 
-.nav-bar {
-  height: 100%;
-  width: 100%;
-  max-width: 20vw;
-  border-right: 3px solid rgb(var(--v-theme-text-dark-blue));
-}
-
 .clickable {
   cursor: pointer;
 }

From c415c74a2c1eda2b4bd68dc51d4880a0f7329ff6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 3 Aug 2023 11:51:06 +0200
Subject: [PATCH 18/36] =?UTF-8?q?THE-799=20mise=20en=20forme=20tableau=20d?=
 =?UTF-8?q?e=20donn=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/theses/ThesisComponent.vue |  2 +-
 src/components/theses/ThesisTable.vue     | 10 +++-------
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/theses/ThesisComponent.vue b/src/components/theses/ThesisComponent.vue
index 42f19654..f25208c4 100644
--- a/src/components/theses/ThesisComponent.vue
+++ b/src/components/theses/ThesisComponent.vue
@@ -121,7 +121,7 @@ watchEffect(() => {
 
 .thesis-component {
   width: 92%;
-  margin: 0 auto 20px;
+  margin: 2em auto;
 }
 
 .v-skeleton-loader {
diff --git a/src/components/theses/ThesisTable.vue b/src/components/theses/ThesisTable.vue
index 0d8f6e02..38a31f47 100644
--- a/src/components/theses/ThesisTable.vue
+++ b/src/components/theses/ThesisTable.vue
@@ -153,8 +153,6 @@ function linkTo(id) {
 .table {
   width: 92%;
   margin: auto;
-
-  border-left: 3px solid rgb(var(--v-theme-text-dark-blue));
 }
 
 .table-body {
@@ -166,6 +164,8 @@ function linkTo(id) {
   padding: 0 10px 0;
   display: inline-grid;
   grid-template-columns: 2fr 7fr;
+  border-bottom: 1px solid rgb(var(--v-theme-gris-fonce));
+  color: rgb(var(--v-theme-text-dark-blue));
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     display: block;
@@ -173,10 +173,6 @@ function linkTo(id) {
   }
 }
 
-.table tbody tr:nth-of-type(odd) {
-  background-color: rgb(var(--v-theme-gris-clair));
-}
-
 #president {
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     display: block;
@@ -186,6 +182,6 @@ function linkTo(id) {
 .clickable {
   cursor: pointer;
   font-weight: bold;
-  text-decoration: underline;
+  color: rgb(var(--v-theme-secondary-darken-1));
 }
 </style>
\ No newline at end of file

From b61634669b2b10eff30c355b602459a69bfdc9e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 3 Aug 2023 14:04:06 +0200
Subject: [PATCH 19/36] =?UTF-8?q?THE-799=20ajout=20d'une=20transition=20?=
 =?UTF-8?q?=C3=A0=20l=C2=B4affichage=20sur=20les=20mots=20cl=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Keywords.vue      | 22 ++++++------
 src/components/theses/ThesisTable.vue   |  2 +-
 src/components/theses/ThesisToolbar.vue | 45 +++++++++++++++----------
 3 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
index 7468a898..b740a4bf 100644
--- a/src/components/common/Keywords.vue
+++ b/src/components/common/Keywords.vue
@@ -13,16 +13,18 @@
         <span class="key-word-label">{{ keyWord.keyword }}</span>
       </v-chip>
     </v-chip-group>
-    <v-chip-group id="second-chip-line">
-      <!--      readmore button effect-->
-      <v-chip v-show="readMore" label v-for="keyWord in selectKeyWords(Infinity, keyWordPerLine)"
-        :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword"
-        :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
-        :disabled="keyWord.type === 'sujetsRameau' ? false : true"
-        @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
-        <span class="key-word-label">{{ keyWord.keyword }}</span>
-      </v-chip>
-    </v-chip-group>
+    <v-fade-transition>
+      <v-chip-group v-show="readMore" id="second-chip-line">
+        <!--      readmore button effect-->
+        <v-chip v-show="readMore" label v-for="keyWord in selectKeyWords(Infinity, keyWordPerLine)"
+          :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword"
+          :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
+          :disabled="keyWord.type === 'sujetsRameau' ? false : true"
+          @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
+          <span class="key-word-label">{{ keyWord.keyword }}</span>
+        </v-chip>
+      </v-chip-group>
+    </v-fade-transition>
     <div id="key-words-button-wrapper" v-if="selectKeyWords(Infinity, keyWordPerLine).length > 0">
       <v-btn id="read-more-button" variant="outlined" @click="readMore = !readMore" flat>
         <span></span>
diff --git a/src/components/theses/ThesisTable.vue b/src/components/theses/ThesisTable.vue
index 38a31f47..48ae738b 100644
--- a/src/components/theses/ThesisTable.vue
+++ b/src/components/theses/ThesisTable.vue
@@ -182,6 +182,6 @@ function linkTo(id) {
 .clickable {
   cursor: pointer;
   font-weight: bold;
-  color: rgb(var(--v-theme-secondary-darken-1));
+  color: rgb(var(--v-theme-secondary-darken-2));
 }
 </style>
\ No newline at end of file
diff --git a/src/components/theses/ThesisToolbar.vue b/src/components/theses/ThesisToolbar.vue
index 07114c6d..17a7e9bd 100644
--- a/src/components/theses/ThesisToolbar.vue
+++ b/src/components/theses/ThesisToolbar.vue
@@ -11,40 +11,40 @@
     </v-btn>
     <span></span>
     <div class="no-wrap-text">
-      <v-btn flat prepend-icon="mdi-arrow-left-circle">
-        <template v-slot:prepend-icon>
-          <v-icon>
+      <v-btn class="arrow-buttons" flat icon="mdi-chevron-left">
+        <template v-slot:icon>
+          <v-icon size="x-large">
             mdi-arrow-left-circle
           </v-icon>
         </template>
-        <p>{{ $t("theseView.thesePrecedente") }}</p>
+<!--        <p>{{ $t("theseView.thesePrecedente") }}</p>-->
       </v-btn>
-      <v-btn flat append-icon="mdi-arrow-right-circle">
-        <template v-slot:append-icon>
-          <v-icon>
+      <v-btn class="arrow-buttons" flat icon="mdi-chevron-right">
+        <template v-slot:icon>
+          <v-icon size="x-large">
             mdi-arrow-right-circle
           </v-icon>
         </template>
-        <p>{{ $t("theseView.theseSuivante") }}</p>
+<!--        <p>{{ $t("theseView.theseSuivante") }}</p>-->
       </v-btn>
     </div>
     <span></span>
     <div class="no-wrap-text">
-      <v-btn flat append-icon="mdi-alert" @click="dialog = true">
+      <v-btn flat append-icon="mdi-file-export-outline">
         <template v-slot:append-icon>
           <v-icon>
-            mdi-alert
+            mdi-file-export-outline
           </v-icon>
         </template>
-        <p>{{ $t("theseView.alert") }}</p>
+        <p>{{ $t("theseView.exporter") }}</p>
       </v-btn>
-      <v-btn flat append-icon="mdi-file-export-outline">
+      <v-btn flat append-icon="mdi-alert" @click="dialog = true">
         <template v-slot:append-icon>
           <v-icon>
-            mdi-file-export-outline
+            mdi-alert
           </v-icon>
         </template>
-        <p>{{ $t("theseView.exporter") }}</p>
+        <p>{{ $t("theseView.alert") }}</p>
       </v-btn>
     </div>
   </div>
@@ -119,7 +119,7 @@ function mailSent() {
   height: 42px;
   width: 100%;
   padding: 0 10px;
-  background-color: rgb(var(--v-theme-gris-clair));
+  margin: 0.6em 0;
 
   display: inline-flex;
   justify-content: space-between;
@@ -133,8 +133,6 @@ function mailSent() {
   }
 
   :deep(.v-icon--size-default) {
-    color: rgb(var(--v-theme-orange-abes));
-
     i {
       opacity: 1 !important;
     }
@@ -148,8 +146,19 @@ function mailSent() {
     text-indent: unset;
 
     margin: 0 8px;
-    border: solid 1px rgb(var(--v-theme-gris-fonce));
+    border: solid 1px rgb(var(--v-theme-primary));
   }
 
+  .arrow-buttons {
+    border: unset;
+    height: 2.4em;
+    width: 2.4em;
+
+      :deep(.v-btn__content ) {
+        i {
+          --v-icon-size-multiplier: 1.4;
+        }
+      }
+  }
 }
 </style>
\ No newline at end of file

From 580326221bc1203ba8748cec690da5ab61e130e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 3 Aug 2023 15:15:45 +0200
Subject: [PATCH 20/36] THE-799 mise a jour skeletons

---
 src/components/common/Keywords.vue        | 67 +++++++++++++----------
 src/components/theses/ButtonsList.vue     | 18 +++++-
 src/components/theses/ThesisComponent.vue | 27 +++------
 src/components/theses/ThesisResume.vue    | 33 ++++++-----
 src/components/theses/ThesisTable.vue     | 13 ++++-
 src/components/theses/ThesisTitle.vue     |  7 ++-
 src/views/PersonneView.vue                |  5 ++
 7 files changed, 103 insertions(+), 67 deletions(-)

diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
index b740a4bf..0a7e8e9c 100644
--- a/src/components/common/Keywords.vue
+++ b/src/components/common/Keywords.vue
@@ -1,36 +1,42 @@
 <template>
-  <div v-if="keywordsAreSet">
-    <div class="key-words-title-wrapper">
-      <v-icon color="primary">mdi-list-box</v-icon>
-      <h1>{{ $t('theseView.motcle') }}</h1>
-      <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
-    </div>
-    <v-chip-group id="first-chip-line">
-      <v-chip label v-for="keyWord in selectKeyWords(keyWordPerLine, 0)" :key="keyWord.keyword + forceRenderKey"
-        :title="keyWord.keyword" :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
-        :disabled="keyWord.type === 'sujetsRameau' ? false : true"
-        @click="if (keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
-        <span class="key-word-label">{{ keyWord.keyword }}</span>
-      </v-chip>
-    </v-chip-group>
-    <v-fade-transition>
-      <v-chip-group v-show="readMore" id="second-chip-line">
-        <!--      readmore button effect-->
-        <v-chip v-show="readMore" label v-for="keyWord in selectKeyWords(Infinity, keyWordPerLine)"
-          :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword"
-          :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
+  <div>
+    <div v-if="keywordsAreSet && dataReady">
+      <div class="key-words-title-wrapper">
+        <v-icon color="primary">mdi-list-box</v-icon>
+        <h1>{{ $t('theseView.motcle') }}</h1>
+        <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+      </div>
+      <v-chip-group id="first-chip-line">
+        <v-chip label v-for="keyWord in selectKeyWords(keyWordPerLine, 0)" :key="keyWord.keyword + forceRenderKey"
+          :title="keyWord.keyword" :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
           :disabled="keyWord.type === 'sujetsRameau' ? false : true"
-          @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
+          @click="if (keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
           <span class="key-word-label">{{ keyWord.keyword }}</span>
         </v-chip>
       </v-chip-group>
-    </v-fade-transition>
-    <div id="key-words-button-wrapper" v-if="selectKeyWords(Infinity, keyWordPerLine).length > 0">
-      <v-btn id="read-more-button" variant="outlined" @click="readMore = !readMore" flat>
-        <span></span>
-        <span>{{ readMore ? $t('theseView.showLessKeywords') : $t('theseView.showMoreKeywords') }}</span>
-        <v-icon class="toggle-up-down" :class='{ "rotate": readMore }'>mdi-arrow-down-circle-outline</v-icon>
-      </v-btn>
+      <v-fade-transition>
+        <v-chip-group v-show="readMore" id="second-chip-line">
+          <!--      readmore button effect-->
+          <v-chip v-show="readMore" label v-for="keyWord in selectKeyWords(Infinity, keyWordPerLine)"
+            :key="keyWord.keyword + forceRenderKey" :title="keyWord.keyword"
+            :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
+            :disabled="keyWord.type === 'sujetsRameau' ? false : true"
+            @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
+            <span class="key-word-label">{{ keyWord.keyword }}</span>
+          </v-chip>
+        </v-chip-group>
+      </v-fade-transition>
+      <div id="key-words-button-wrapper" v-if="selectKeyWords(Infinity, keyWordPerLine).length > 0">
+        <v-btn id="read-more-button" variant="outlined" @click="readMore = !readMore" flat>
+          <span></span>
+          <span>{{ readMore ? $t('theseView.showLessKeywords') : $t('theseView.showMoreKeywords') }}</span>
+          <v-icon class="toggle-up-down" :class='{ "rotate": readMore }'>mdi-arrow-down-circle-outline</v-icon>
+        </v-btn>
+      </div>
+    </div>
+    <div v-if="!dataReady">
+      <v-skeleton-loader type="table-row" class="px-4"></v-skeleton-loader>
+      <v-skeleton-loader type="button" class="d-flex flex-row-reverse pe-7 w-25"></v-skeleton-loader>
     </div>
   </div>
 </template>
@@ -231,4 +237,9 @@ h1 {
 .toggle-up-down.rotate {
   transform: rotate(180deg);
 }
+
+:deep(.v-skeleton-loader__button) {
+  max-width: unset !important;
+  justify-self: end;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/theses/ButtonsList.vue b/src/components/theses/ButtonsList.vue
index 56907f0e..7c0d4262 100644
--- a/src/components/theses/ButtonsList.vue
+++ b/src/components/theses/ButtonsList.vue
@@ -1,6 +1,6 @@
 <template>
   <MessageBox ref="messageBox"></MessageBox>
-  <div class="buttons">
+  <div class="buttons" v-if="dataReady">
     <div class="buttons-header">
       <span>{{ $t("theseView.access") }}</span>
     </div>
@@ -23,6 +23,11 @@
       <v-skeleton-loader v-if="loading" :key="i" type="list-item" class="skeleton"></v-skeleton-loader>
     </div>
   </div>
+  <div class="skeleton-loader-wrapper" v-else>
+    <v-skeleton-loader type="list-item-two-line"></v-skeleton-loader>
+    <v-skeleton-loader type="button" class="d-flex justify-center w-75 mx-15"></v-skeleton-loader>
+    <v-skeleton-loader type="button" class="d-flex justify-center w-75 mx-15"></v-skeleton-loader>
+  </div>
 </template>
 
 <script setup>
@@ -46,7 +51,10 @@ const props = defineProps({
   },
   soutenue: {
     type: Boolean,
-  }
+  },
+  dataReady: {
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits('closeOverlay');
@@ -172,7 +180,7 @@ function closeOverlay() {
   }
 }
 
-.buttons {
+.buttons, .skeleton-loader-wrapper {
   display: flex;
   flex-direction: column;
   border-right: 2px solid rgb(var(--v-theme-gris-clair));
@@ -198,4 +206,8 @@ function closeOverlay() {
   grid-column-end: 4;
   justify-self: end;
 }
+
+:deep(.v-skeleton-loader__button) {
+  max-width: unset !important;
+}
 </style>
diff --git a/src/components/theses/ThesisComponent.vue b/src/components/theses/ThesisComponent.vue
index f25208c4..820a646b 100644
--- a/src/components/theses/ThesisComponent.vue
+++ b/src/components/theses/ThesisComponent.vue
@@ -6,10 +6,10 @@
     <!-- Bare latérale Desktop -->
     <div v-if="!mobile" class="access-buttons">
       <!-- Menu boutons-liens desktop-->
-      <buttons-list :nnt="nnt" :soutenue="soutenue"></buttons-list>
+      <buttons-list :nnt="nnt" :soutenue="soutenue" :data-ready="dataReady"></buttons-list>
     </div>
     <div class="thesis-info-wrapper">
-      <thesis-table class="thesis-component" :these="these" />
+      <thesis-table class="thesis-component" :these="these" :data-ready="dataReady" />
       <v-divider v-if="keywordsAreSet" :thickness="1" class="divider border-opacity-50" length="90%" />
       <thesis-keywords class="thesis-component" :keywords-are-set="keywordsAreSet" :data-ready="dataReady" :these="these"
         :selected-language="selectedLanguage" @changeLanguage="changeLanguage" />
@@ -21,19 +21,6 @@
       <scroll-to-top-button class="scroll-to-top-wrapper" :nb-result=1 />
     </div>
   </div>
-  <div v-if="!titleIsSet">
-    <v-skeleton-loader type="heading"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    <v-divider :thickness="1" class="divider border-opacity-50" length="90%" />
-    <v-skeleton-loader type="subtitle"></v-skeleton-loader>
-    <v-skeleton-loader type="chip, chip, chip, chip, chip, chip"></v-skeleton-loader>
-    <v-divider :thickness="1" class="divider border-opacity-50" length="90%" />
-    <v-skeleton-loader type="heading"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-    <v-skeleton-loader type="paragraph"></v-skeleton-loader>
-  </div>
 </template>
 
 <script setup>
@@ -54,10 +41,6 @@ const selectedLanguage = ref('fr');
 
 
 const props = defineProps({
-  dataReady: {
-    type: Boolean,
-    default: false
-  },
   these: {
     type: Object
   },
@@ -66,7 +49,11 @@ const props = defineProps({
   },
   soutenue: {
     type: Boolean
-  }
+  },
+  dataReady: {
+    type: Boolean,
+    default: false
+  },
 });
 
 const resumeIsSet = ref(false);
diff --git a/src/components/theses/ThesisResume.vue b/src/components/theses/ThesisResume.vue
index 66fc8d66..36caaa1c 100644
--- a/src/components/theses/ThesisResume.vue
+++ b/src/components/theses/ThesisResume.vue
@@ -1,14 +1,19 @@
 <template>
-  <div v-if="resumeIsSet">
-    <div class="resume-title-wrapper">
-      <v-icon color="primary">mdi-file-document-arrow-right</v-icon>
-      <h1>{{ $t('theseView.resume') }}</h1>
-      <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+  <div>
+    <div v-if="resumeIsSet && dataReady">
+      <div class="resume-title-wrapper">
+        <v-icon color="primary">mdi-file-document-arrow-right</v-icon>
+        <h1>{{ $t('theseView.resume') }}</h1>
+        <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+      </div>
+      <div id="resume-text">
+        <p>
+          {{ resume }}
+        </p>
+      </div>
     </div>
-    <div id="resume-text">
-      <p>
-        {{ resume }}
-      </p>
+    <div v-if="!dataReady">
+      <v-skeleton-loader type="article"></v-skeleton-loader>
     </div>
   </div>
 </template>
@@ -23,7 +28,11 @@ const props = defineProps({
   },
   resumeIsSet: {
     type: Boolean
-  }
+  },
+  dataReady: {
+    type: Boolean,
+    default: false
+  },
 });
 
 const resume = ref("");
@@ -49,10 +58,6 @@ function onUpdateLangue(langue) {
   selectedLanguage.value = langue;
   resume.value = props.these.resumes[selectedLanguage.value];
 }
-
-
-
-
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/theses/ThesisTable.vue b/src/components/theses/ThesisTable.vue
index 48ae738b..ddd84f1d 100644
--- a/src/components/theses/ThesisTable.vue
+++ b/src/components/theses/ThesisTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <table class="table" v-if="these.auteurs">
+  <table class="table" v-if="these.auteurs && dataReady">
     <tbody class="table-body">
       <!-- Auteur -->
       <tr v-if="these.auteurs && these.auteurs.length > 0" class="table-rows">
@@ -120,6 +120,14 @@
       </tr>
     </tbody>
   </table>
+  <div v-if="!dataReady">
+    <v-skeleton-loader type="table-heading"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+    <v-skeleton-loader type="table-row"></v-skeleton-loader>
+  </div>
 </template>
 
 <script setup>
@@ -129,6 +137,9 @@ defineProps({
   these: {
     type: Object,
     required: true
+  },
+  dataReady: {
+    type: Boolean
   }
 });
 
diff --git a/src/components/theses/ThesisTitle.vue b/src/components/theses/ThesisTitle.vue
index 70c2606e..2734a3a6 100644
--- a/src/components/theses/ThesisTitle.vue
+++ b/src/components/theses/ThesisTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="currentTitle !== ''" class="title-wrapper line-clamp">
+  <div v-if="currentTitle !== '' && dataReady" class="title-wrapper line-clamp">
     <div class="thesis-icon">
       <thesis-icon :status="status"></thesis-icon>
     </div>
@@ -10,6 +10,9 @@
       <language-selector class="language-selector" :languages="langList" @update-langue="onUpdateLangue"></language-selector>
     </div>
   </div>
+  <div v-if="!dataReady" class="title-wrapper line-clamp">
+    <v-skeleton-loader type="list-item-avatar" class="w-100"></v-skeleton-loader>
+  </div>
 </template>
 
 <script setup>
@@ -64,6 +67,8 @@ function onUpdateLangue(langue) {
 
 .title-wrapper {
   padding: 1.2em 1.2em 1em 1em;
+  grid-column-start: 1;
+  grid-column-end: 4;
 }
 
 .thesis-icon {
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 1ec6c54e..445862e5 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -487,4 +487,9 @@ function displayError(message, opt) {
 .skeleton-wrapper {
   padding: 2em 0;
 }
+
+:deep(.v-skeleton-loader__button) {
+  max-width: unset !important;
+  width: 250px;
+}
 </style>
\ No newline at end of file

From b7cd115a74db331bb36170f11398f2235807bd51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 3 Aug 2023 16:29:57 +0200
Subject: [PATCH 21/36] THE-799 tooltip legende

---
 src/components/common/Keywords.vue | 40 ++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
index 0a7e8e9c..95416c3d 100644
--- a/src/components/common/Keywords.vue
+++ b/src/components/common/Keywords.vue
@@ -2,9 +2,22 @@
   <div>
     <div v-if="keywordsAreSet && dataReady">
       <div class="key-words-title-wrapper">
-        <v-icon color="primary">mdi-list-box</v-icon>
-        <h1>{{ $t('theseView.motcle') }}</h1>
-        <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+        <div class="title">
+          <v-icon color="primary">mdi-list-box</v-icon>
+          <h1>{{ $t('theseView.motcle') }}</h1>
+          <language-selector :languages="langList" @update-langue="onUpdateLangue"></language-selector>
+        </div>
+        <v-btn class="info-button" flat icon="mdi-information-outline">
+        </v-btn>
+        <v-overlay activator=".info-button" location-strategy="connected" scroll-strategy="close">
+          <v-card class="legend-tooltip">
+            <h1>Légende</h1>
+            <v-chip-group>
+              <v-chip label class="rameau-chip"><span class="key-word-label">mot-clé contrôlé</span></v-chip>
+              <v-chip label class="free-chip">mot-clé libre</v-chip>
+            </v-chip-group>
+          </v-card>
+        </v-overlay>
       </div>
       <v-chip-group id="first-chip-line">
         <v-chip label v-for="keyWord in selectKeyWords(keyWordPerLine, 0)" :key="keyWord.keyword + forceRenderKey"
@@ -136,11 +149,18 @@ watch(mobile, (newValue) => {
 }
 
 .key-words-title-wrapper {
+  width: 100%;
   display: inline-flex;
   align-items: center;
+  justify-content: space-between;
   margin: 0.4em 0 0.8em 0;
 }
 
+.title {
+  display: inline-flex;
+  align-items: center;
+}
+
 h1 {
   font-size: 24px;
   margin-left: 5px;
@@ -168,11 +188,11 @@ h1 {
   }
 
   .free-chip {
-    background-color: rgb(var(--v-theme-secondary-darken-2));
+    background-color: rgb(var(--v-theme-secondary-darken-2)) !important;
   }
 
   .rameau-chip {
-    background-color: rgb(var(--v-theme-orange-abes));
+    background-color: rgb(var(--v-theme-orange-abes)) !important;
   }
 }
 
@@ -242,4 +262,14 @@ h1 {
   max-width: unset !important;
   justify-self: end;
 }
+
+.legend-tooltip {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+
+  :deep(.v-chip) {
+    width: fit-content;
+  }
+}
 </style>
\ No newline at end of file

From e9f180cf4849775cca9e5e8c9e84d6610f8ef722 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Fri, 4 Aug 2023 15:35:22 +0200
Subject: [PATCH 22/36] THE-799 PersonnesCard.vue adaptation largeur responsive

---
 src/components/personnes/results/PersonnesCard.vue | 11 +++++------
 src/views/PersonneView.vue                         |  5 -----
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/personnes/results/PersonnesCard.vue b/src/components/personnes/results/PersonnesCard.vue
index cc230180..58bb4d02 100644
--- a/src/components/personnes/results/PersonnesCard.vue
+++ b/src/components/personnes/results/PersonnesCard.vue
@@ -105,13 +105,13 @@ function goToPersonne(hash) {
 }
 
 .first-half {
-  display: flex;
+  display: grid;
+  grid-template-columns: 4fr 6fr;
   padding: 0 2rem 0 1rem;
   justify-content: space-between;
   align-items: center;
   height: calc(100% + 180px);
   width: 100%;
-  flex-direction: column;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
     height: 100%;
@@ -124,16 +124,16 @@ function goToPersonne(hash) {
     flex: 0 0 10%;
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 
     @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
       flex: 1 0 30%;
-      max-width: 35%;
     }
 
     .v-icon {
       margin-right: 1rem;
       flex: 0 0 10%;
+      align-self: start;
     }
 
     .sep {
@@ -156,8 +156,7 @@ function goToPersonne(hash) {
 
   .action {
     display: flex;
-    justify-content: flex-start;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     align-items: center;
     width: 100%;
     height: 100px;
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 445862e5..9f29c5ae 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -369,11 +369,6 @@ function displayError(message, opt) {
     padding: 0 2em;
 
     .info {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin: 1rem;
-
       @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
         justify-content: flex-start;
       }

From dc117bd140b92c27dabc0a9f2620eb4a7804ae5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Fri, 4 Aug 2023 15:55:43 +0200
Subject: [PATCH 23/36] THE-799 PersonneView.vue adaptation responsive desktop
 petits ecrans

---
 src/components/common/Keywords.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
index 95416c3d..59151cc6 100644
--- a/src/components/common/Keywords.vue
+++ b/src/components/common/Keywords.vue
@@ -148,6 +148,10 @@ watch(mobile, (newValue) => {
   pointer-events: unset;
 }
 
+#first-chip-line {
+    flex-wrap: wrap !important;
+}
+
 .key-words-title-wrapper {
   width: 100%;
   display: inline-flex;

From 8af382c6cbcc0c7ecd60ce2e0e966b7b3f3871ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Fri, 4 Aug 2023 16:08:21 +0200
Subject: [PATCH 24/36] =?UTF-8?q?THE-799=20keywords=20meilleure=20r=C3=A9p?=
 =?UTF-8?q?artition=20des=20chips=20+=20=C3=A9galisation=20des=20chips=20p?=
 =?UTF-8?q?our=20les=20petits=20=C3=A9crans?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Keywords.vue    | 6 +++---
 src/components/theses/ThesisTitle.vue | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
index 59151cc6..d006b77b 100644
--- a/src/components/common/Keywords.vue
+++ b/src/components/common/Keywords.vue
@@ -149,7 +149,7 @@ watch(mobile, (newValue) => {
 }
 
 #first-chip-line {
-    flex-wrap: wrap !important;
+  flex-wrap: wrap !important;
 }
 
 .key-words-title-wrapper {
@@ -183,7 +183,7 @@ h1 {
 .v-chip-group {
   margin-top: 0.5em;
   padding: 0;
-  justify-content: start;
+  justify-content: space-between;
   flex-wrap: nowrap;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
@@ -206,7 +206,7 @@ h1 {
 
 .v-chip {
   justify-content: center;
-  width: 19%;
+  width: 18.5%;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
     width: 46%;
diff --git a/src/components/theses/ThesisTitle.vue b/src/components/theses/ThesisTitle.vue
index 2734a3a6..5dc0c6cd 100644
--- a/src/components/theses/ThesisTitle.vue
+++ b/src/components/theses/ThesisTitle.vue
@@ -77,8 +77,8 @@ function onUpdateLangue(langue) {
 }
 
 .title-flexbox {
-  display: flex;
-  flex-flow: row wrap;
+  display: grid;
+  grid-template-columns: 9fr 1fr;
   grid-column-start: 2;
 
   span {
@@ -94,5 +94,6 @@ function onUpdateLangue(langue) {
 
 .language-selector {
     padding-top: 16px;
+  justify-content: center;
 }
 </style>
\ No newline at end of file

From ba2f90e91a1bcb93255fabfcdf4540d84e5a1a6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Fri, 4 Aug 2023 16:39:46 +0200
Subject: [PATCH 25/36] THE-799 layout titre personne PersonneView.vue

---
 src/views/PersonneView.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 9f29c5ae..250e59eb 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -369,6 +369,9 @@ function displayError(message, opt) {
     padding: 0 2em;
 
     .info {
+      display: flex;
+      align-content: center;
+
       @media #{ map-get(settings.$display-breakpoints, 'sm-and-up')} {
         justify-content: flex-start;
       }
@@ -390,6 +393,7 @@ function displayError(message, opt) {
 
 
       .nom-card {
+        display: inline-flex;
         .nomprenom {
           color: rgb(var(--v-theme-orange-abes));
 

From 7e25ced028a0fda2a3a27e5c1124b135eb0779ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 10 Aug 2023 11:32:31 +0200
Subject: [PATCH 26/36] THE-799 mobile resultats placement barre navigation et
 logo + comportement bouton 'plus de resultats'

---
 src/App.vue                                      |  3 ++-
 .../common/results/ResultComponents.vue          | 16 +++++++++++-----
 src/views/ResultView.vue                         | 11 +++++++++--
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d4858e60..ad98e707 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -123,6 +123,7 @@ main {
     justify-content: space-between;
     align-content: center;
     padding: 0 10px;
+    margin: -10px 0 30px;
   }
 
   .filter-mobile-nav-bar {
@@ -153,7 +154,7 @@ main {
   }
 
   .logo_home {
-    margin-top: -35px;
+    margin-top: -45px;
 
     @media #{ map-get(settings.$display-breakpoints, 'md-and-up')} {
       margin-top: -75px;
diff --git a/src/components/common/results/ResultComponents.vue b/src/components/common/results/ResultComponents.vue
index cee8e15e..9189c777 100644
--- a/src/components/common/results/ResultComponents.vue
+++ b/src/components/common/results/ResultComponents.vue
@@ -33,10 +33,11 @@
         </v-card>
       </div>
     </div>
-    <MoreResultsButton v-if="mobile && !allResultsWereLoaded()" :loading=loading :nb-result=nbResult
-      @addTenResultsToList="addTenResultsToList" @search="search" />
   </div>
 
+  <more-results-button class="more-result-button" v-if="mobile && !allResultsWereLoaded()" :loading=loading :nb-result=nbResult
+      @addTenResultsToList="addTenResultsToList" @search="search" />
+
   <result-pagination v-if="!mobile" :nb-results=nbResult :type="'bottom'" :current-showing-number="currentShowingNumber"
     :current-page-number="currentPageNumber" class="pagination-bottom" @updateShowingNumber="updateShowingNumber"
     @updatePage="updatePage" @search="search">
@@ -57,7 +58,7 @@ import SortingSelect from "@/components/common/results/SortingSelect.vue";
 
 const currentRoute = useRoute();
 const { mobile } = useDisplay();
-const { setShowingNumber } = APIService();
+const { setShowingNumber, setShowingNumberMobile } = APIService();
 
 const props = defineProps({
   result: {
@@ -122,7 +123,7 @@ function updateShowingNumber(newValue) {
 
 function addTenResultsToList() {
   currentShowingNumber.value += 10;
-  setShowingNumber(currentShowingNumber.value);
+  setShowingNumberMobile(currentShowingNumber.value);
 }
 
 function updatePage(newPage) {
@@ -223,7 +224,7 @@ watch(() => props.resetShowingNumber, () => {
 }
 
 .sort-select-wrapper {
-  margin: -50px 0 20px;
+  margin: -85px 0 20px;
   display: grid;
   grid-template-columns: 5fr 4fr 10px;
   grid-template-rows: 30px 30px;
@@ -251,4 +252,9 @@ watch(() => props.resetShowingNumber, () => {
     font-weight: 500;
   }
 }
+
+.more-result-button {
+  position: relative;
+  top: 80px;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index 6bda352e..c55185c6 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -14,7 +14,7 @@
   </nav>
   <!--    Menu filtres-->
   <div v-if="mobile" class="logo-menu-wrapper">
-    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo logo_home">
+    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo logo_home logo_resultview">
       <img alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
     </RouterLink>
     <!--    Menu recherche/selecteur these/personnes-->
@@ -292,6 +292,10 @@ watch(() => currentRoute.query.domaine, () => {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
+.logo_resultview {
+  margin-top: -100px;
+}
+
 .greyBar {
   background-color: rgb(var(--v-theme-gris-clair)) !important;
 }
@@ -331,12 +335,15 @@ watch(() => currentRoute.query.domaine, () => {
   }
 
   .result-components {
-    grid-column-start: 4;
 
     width: 100%;
     display: flex;
     flex-direction: column;
     padding-bottom: 5px;
+
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      grid-column-start: 1;
+    }
   }
 }
 

From e876f6d3ad00eb6acd668988d98e423bb4b7e3c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 10 Aug 2023 12:03:45 +0200
Subject: [PATCH 27/36] THE-799 barre de recherche mobile resultats

---
 src/App.vue                                    | 1 -
 src/components/common/results/FacetsHeader.vue | 8 ++------
 src/views/ResultView.vue                       | 2 +-
 src/views/TheseView.vue                        | 2 +-
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ad98e707..991e635c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -186,7 +186,6 @@ main {
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: rgb(var(--v-theme-gris-clair));
     border-bottom: 1px solid #bbb;
     border-top: 1px solid #bbb;
   }
diff --git a/src/components/common/results/FacetsHeader.vue b/src/components/common/results/FacetsHeader.vue
index 8b9379c0..217d9626 100644
--- a/src/components/common/results/FacetsHeader.vue
+++ b/src/components/common/results/FacetsHeader.vue
@@ -18,7 +18,7 @@
   </div>
   <div v-if="mobile" class="reinitialize-button-mobile">
     <v-btn @click.stop="" @click="searchAndReinitializeAllFacets" class="reinitialize-button-mobile" size="small"
-      depressed elevation="0" color="primary">
+      depressed elevation="0">
       Réinitialiser
     </v-btn>
   </div>
@@ -117,12 +117,8 @@ function closeOverlay() {
 
 .reinitialize-button-mobile {
   margin-top: 5px;
+  margin-right: 0.3em;
   display: grid;
-  grid-template-columns: 7.5% 85% 7.5%;
-}
-
-.reinitialize-button-mobile {
-  grid-column-end: 3;
   justify-self: end;
 }
 
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index c55185c6..e29763ae 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -30,7 +30,7 @@
     </v-dialog>
 
     <v-expand-transition>
-      <div v-show="showSearchBar" class="expanded-search-bar-container">
+      <div v-show="showSearchBar" class="expanded-search-bar-container white-containers">
         <div class="expanded-search-bar">
           <domain-selector @changeDomain="changeDomain" compact></domain-selector>
           <search-bar @search="search" @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"
diff --git a/src/views/TheseView.vue b/src/views/TheseView.vue
index df506317..f7b30e0b 100644
--- a/src/views/TheseView.vue
+++ b/src/views/TheseView.vue
@@ -22,7 +22,7 @@
     </v-dialog>
     <!--    Menu recherche/selecteur these/personnes-->
     <v-expand-transition>
-      <div v-show="showSearchBar" class="expanded-search-bar-container">
+      <div v-show="showSearchBar" class="expanded-search-bar-container white-containers">
         <div class="expanded-search-bar">
           <domain-selector @changeDomain="changeDomain" compact></domain-selector>
           <search-bar @search="search" @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets" :loading="loading"

From aa0ed1ab62d56cfde473841aa83342b0ea79a62c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 10 Aug 2023 12:35:41 +0200
Subject: [PATCH 28/36] THE-799 layout mobile TheseView.vue

---
 src/App.vue                               |  4 +++
 src/components/theses/ThesisComponent.vue |  9 ++++++-
 src/views/ResultView.vue                  |  6 +----
 src/views/TheseView.vue                   | 32 ++++++-----------------
 4 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 991e635c..3c278fae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -162,6 +162,10 @@ main {
     }
   }
 
+  .logo_resultview {
+    margin-top: -100px;
+  }
+
   .logo-menu-wrapper {
     width: 100%;
     display: grid;
diff --git a/src/components/theses/ThesisComponent.vue b/src/components/theses/ThesisComponent.vue
index 820a646b..858a52f4 100644
--- a/src/components/theses/ThesisComponent.vue
+++ b/src/components/theses/ThesisComponent.vue
@@ -6,7 +6,7 @@
     <!-- Bare latérale Desktop -->
     <div v-if="!mobile" class="access-buttons">
       <!-- Menu boutons-liens desktop-->
-      <buttons-list :nnt="nnt" :soutenue="soutenue" :data-ready="dataReady"></buttons-list>
+      <buttons-list v-if="!mobile" :nnt="nnt" :soutenue="soutenue" :data-ready="dataReady"></buttons-list>
     </div>
     <div class="thesis-info-wrapper">
       <thesis-table class="thesis-component" :these="these" :data-ready="dataReady" />
@@ -34,7 +34,9 @@ import { useMeta } from "vue-meta";
 import ThesisTitle from "@/components/theses/ThesisTitle.vue";
 import ThesisResume from "@/components/theses/ThesisResume.vue";
 import ButtonsList from "@/components/theses/ButtonsList.vue";
+import { useDisplay } from "vuetify";
 
+const { mobile } = useDisplay();
 const { t } = useI18n();
 const { meta } = useMeta({});
 const selectedLanguage = ref('fr');
@@ -86,6 +88,11 @@ watchEffect(() => {
   display: grid;
   grid-template-rows: 1fr auto;
   grid-template-columns: 25fr 2fr 75fr;
+
+  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .thesis-title {
diff --git a/src/views/ResultView.vue b/src/views/ResultView.vue
index e29763ae..44566dcc 100644
--- a/src/views/ResultView.vue
+++ b/src/views/ResultView.vue
@@ -292,10 +292,6 @@ watch(() => currentRoute.query.domaine, () => {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.logo_resultview {
-  margin-top: -100px;
-}
-
 .greyBar {
   background-color: rgb(var(--v-theme-gris-clair)) !important;
 }
@@ -335,7 +331,7 @@ watch(() => currentRoute.query.domaine, () => {
   }
 
   .result-components {
-
+    grid-column-start: 4;
     width: 100%;
     display: flex;
     flex-direction: column;
diff --git a/src/views/TheseView.vue b/src/views/TheseView.vue
index f7b30e0b..89a54684 100644
--- a/src/views/TheseView.vue
+++ b/src/views/TheseView.vue
@@ -12,13 +12,13 @@
   </nav>
   <!-- Icone retour accueil -->
   <div v-if="mobile" class="logo-menu-wrapper">
-    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo">
+    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo logo_resultview">
       <img alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg" />
     </RouterLink>
     <!--    Menu boutons-liens-->
     <v-dialog v-model="dialogVisible" eager location-strategy="static" persistent no-click-animation fullscreen
       :close-on-content-click="false" transition="dialog-top-transition" content-class="full-screen">
-      <buttons-list :nnt="route.params.id" @closeOverlay="closeOverlay"></buttons-list>
+      <buttons-list :nnt="route.params.id" :soutenue="these.status === 'soutenue'" :these="these" :data-ready="true" @closeOverlay="closeOverlay"></buttons-list>
     </v-dialog>
     <!--    Menu recherche/selecteur these/personnes-->
     <v-expand-transition>
@@ -126,13 +126,6 @@ function closeOverlay() {
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-.mobile-nav-bar {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-  padding: 0 10px;
-}
-
 .filter-mobile-nav-bar {
   display: flex;
   align-content: center;
@@ -164,21 +157,6 @@ function closeOverlay() {
   color: rgb(var(--v-theme-orange-abes));
 }
 
-.expanded-search-bar-container {
-  width: 100%;
-  grid-column: 1 / 5;
-  justify-self: center;
-  grid-row-start: 1;
-  align-self: start;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: rgb(var(--v-theme-gris-clair));
-  border-bottom: 1px solid #bbb;
-  border-top: 1px solid #bbb;
-}
-
-
 .expanded-search-bar {
   width: 80%;
 }
@@ -202,6 +180,12 @@ function closeOverlay() {
     display: flex;
     flex-direction: column;
     padding-bottom: 5px;
+
+
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      grid-column-start: 1;
+      grid-column-end: 3;
+    }
   }
 }
 

From 57dac33ea5720e18f308cde515ec5521554ca80f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 10 Aug 2023 17:19:46 +0200
Subject: [PATCH 29/36] =?UTF-8?q?THE-799=20nav-bar=20mobile=20:=20tooltips?=
 =?UTF-8?q?=20+=20pas=20de=20bouton=20acc=C3=A8s=20=C3=A0=20la=20th=C3=A8s?=
 =?UTF-8?q?e=20si=20non=20soutenue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                |  1 +
 src/locales/fr.json        |  1 +
 src/views/PersonneView.vue | 43 +++++++++++++-------------------------
 src/views/TheseView.vue    | 15 ++++++++-----
 4 files changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3c278fae..82a6183b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -257,6 +257,7 @@ h4 {
 }
 
 .scroll-to-top-wrapper {
+  z-index: 1000;
   position: sticky;
   top: 90vh;
   margin-left: 10%;
diff --git a/src/locales/fr.json b/src/locales/fr.json
index b5a127b5..174c7174 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -27,6 +27,7 @@
   "avancee":"Recherche Avancée",
   "disableSuggestion": "Désactiver l'autocomplétion",
   "top": "Haut de la page",
+  "menu": "Menu",
   "resultatsView": {
     "plusDeResultats": "Plus de résultats"
   },
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index 250e59eb..bcb6afb4 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -4,29 +4,30 @@
     <button @click="openMenu = true" class="filter-mobile-nav-bar">
       <v-icon v-bind="props" size="40px">mdi-menu
       </v-icon>
+      <v-tooltip activator="parent">{{ $t('menu') }}</v-tooltip>
     </button>
-    <v-icon @click="showSearchBar = !showSearchBar" size="40px"
-            :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
-    </v-icon>
+    <div>
+      <v-icon @click="showSearchBar = !showSearchBar" size="40px"
+              :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
+      </v-icon>
+      <v-tooltip activator="parent" location="start">{{ $t('rechercher') }}</v-tooltip>
+    </div>
   </nav>
 <!--  Mobile-->
   <div v-if="mobile" class="logo-menu-wrapper">
-    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo">
+    <RouterLink :to="{ name: 'home' }" title="Accueil du site" class="logo logo_resultview">
       <img alt="logo Theses" id="logoIMG" src="@/assets/icone-theses.svg"/>
     </RouterLink>
-    <!--    Menu recherche/selecteur these/personnes-->
+    <!--    Menu header -->
     <v-dialog v-model="openMenu" eager location-strategy="static" persistent no-click-animation fullscreen
               :close-on-content-click="false" transition="dialog-top-transition" content-class="full-screen">
       <div class="statistique__title">
-        <v-icon size="40px">mdi-account</v-icon>
+        <div></div>
         <v-btn size=40px icon="mdi-close-box" color="red" variant="text" @click="openMenu = !openMenu"></v-btn>
       </div>
-      <div class="statistique__content">
-        <statistique-card-personne :stats="item.roles"></statistique-card-personne>
-      </div>
     </v-dialog>
     <v-expand-transition>
-      <div v-show="showSearchBar" class="expanded-search-bar-container">
+      <div v-show="showSearchBar" class="expanded-search-bar-container white-containers">
         <div class="expanded-search-bar">
           <domain-selector @changeDomain="changeDomain" compact></domain-selector>
           <search-bar @search="search" @searchAndReinitializeAllFacets="searchAndReinitializeAllFacets"
@@ -290,30 +291,15 @@ function displayError(message, opt) {
   border-right: solid rgb(var(--v-theme-primary)) 3px;
 }
 
-.logo {
-  margin-top: -55px;
-}
-
 .v-menu ::v-deep(.v-overlay__content) {
   border-radius: 0;
   margin: 0;
   background-color: rgb(var(--v-theme-background));
 }
 
-.left-side {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  flex: 1 0 100%;
-  max-width: 20vw;
-  height: 100%;
 
-  @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-    max-width: 100%;
-    flex: 0 1 auto;
-    padding: 0;
-  }
+.mobile-nav-bar {
+  margin: 10px 0 30px;
 }
 
 .statistique__title {
@@ -359,9 +345,8 @@ function displayError(message, opt) {
   margin-top: 0;
   width: 100%;
 
-
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
-    grid-template-columns: 100%;
+    display: flex;
   }
 
   .result-components {
diff --git a/src/views/TheseView.vue b/src/views/TheseView.vue
index 89a54684..bd1fa3c5 100644
--- a/src/views/TheseView.vue
+++ b/src/views/TheseView.vue
@@ -1,14 +1,19 @@
 <template>
   <Message-box ref="messageBox"></Message-box>
   <nav v-if="mobile" class="mobile-nav-bar">
-    <button @click="dialogVisible = true" class="filter-mobile-nav-bar">
-      <v-icon v-bind="props" size="40px">mdi-menu
+    <button v-if="soutenue" @click="dialogVisible = true" class="filter-mobile-nav-bar">
+      <v-icon v-bind="props" size="40px">mdi-book-arrow-down-outline
       </v-icon>
+      <v-tooltip activator="parent">{{ $t('theseView.access') }}</v-tooltip>
     </button>
+    <div v-else></div>
     <!--      Bouton menu recherche/selecteur these/personnes-->
-    <v-icon @click="showSearchBar = !showSearchBar" size="40px"
-      :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
-    </v-icon>
+    <div>
+      <v-icon @click="showSearchBar = !showSearchBar" size="40px"
+        :class="{ 'magnify-logo-active': showSearchBar }">mdi-magnify
+      </v-icon>
+      <v-tooltip activator="parent" location="start">{{ $t('rechercher') }}</v-tooltip>
+    </div>
   </nav>
   <!-- Icone retour accueil -->
   <div v-if="mobile" class="logo-menu-wrapper">

From cbb50a50035ca0598c7101850cac992070b37735 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 17 Aug 2023 11:28:09 +0200
Subject: [PATCH 30/36] =?UTF-8?q?THE-799=20Gestion=20de=20l'affichage=20du?=
 =?UTF-8?q?=20composant=20de=20boutons=20pour=20les=20th=C3=A8ses=20non=20?=
 =?UTF-8?q?soutenues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/theses/ButtonsList.vue     | 5 ++---
 src/components/theses/ThesisComponent.vue | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/theses/ButtonsList.vue b/src/components/theses/ButtonsList.vue
index 7c0d4262..e1abdd7c 100644
--- a/src/components/theses/ButtonsList.vue
+++ b/src/components/theses/ButtonsList.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script setup>
-import { ref, watch, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
 import { thesesAPIService } from '@/services/ThesesAPI';
 import { useDisplay } from "vuetify";
 
@@ -64,8 +64,7 @@ const loading = ref(false);
 const listButtons = ref([]);
 const baseURL = import.meta.env.VITE_APP_API;
 
-watch(
-  () => props.soutenue,
+onMounted (
   () => {
     if (props.soutenue) {
       getButtons(props.nnt).then((res) => {
diff --git a/src/components/theses/ThesisComponent.vue b/src/components/theses/ThesisComponent.vue
index 858a52f4..ef647dbb 100644
--- a/src/components/theses/ThesisComponent.vue
+++ b/src/components/theses/ThesisComponent.vue
@@ -4,9 +4,9 @@
   <div class="thesis-info-access-wrapper">
     <thesis-title class="thesis-title" :data-ready="dataReady" :status="these.status" :titles="these.titres" />
     <!-- Bare latérale Desktop -->
-    <div v-if="!mobile" class="access-buttons">
+    <div v-if="!mobile && soutenue" class="access-buttons">
       <!-- Menu boutons-liens desktop-->
-      <buttons-list v-if="!mobile" :nnt="nnt" :soutenue="soutenue" :data-ready="dataReady"></buttons-list>
+      <buttons-list v-if="!mobile " :nnt="nnt" :soutenue="soutenue" :data-ready="dataReady"></buttons-list>
     </div>
     <div class="thesis-info-wrapper">
       <thesis-table class="thesis-component" :these="these" :data-ready="dataReady" />

From 2405941d5d00dd3bfb83aba750480dfefbca83a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 17 Aug 2023 11:59:16 +0200
Subject: [PATCH 31/36] THE-799 divers details elements layout

---
 src/components/common/Keywords.vue             | 8 ++++++--
 src/components/common/results/FacetDrawer.vue  | 1 -
 src/components/common/results/FacetsHeader.vue | 1 +
 src/components/theses/ThesisTitle.vue          | 7 +++++--
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Keywords.vue b/src/components/common/Keywords.vue
index d006b77b..e7b281f1 100644
--- a/src/components/common/Keywords.vue
+++ b/src/components/common/Keywords.vue
@@ -23,7 +23,7 @@
         <v-chip label v-for="keyWord in selectKeyWords(keyWordPerLine, 0)" :key="keyWord.keyword + forceRenderKey"
           :title="keyWord.keyword" :class="keyWord.type === 'sujetsRameau' ? 'rameau-chip' : 'free-chip'"
           :disabled="keyWord.type === 'sujetsRameau' ? false : true"
-          @click="if (keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
+          @click="if(keyWord.type === 'sujetsRameau') $router.push({ name: 'resultats', query: { q: keyWord.query ? keyWord.query : keyWord.keyword, domaine: 'theses' } });">
           <span class="key-word-label">{{ keyWord.keyword }}</span>
         </v-chip>
       </v-chip-group>
@@ -148,6 +148,10 @@ watch(mobile, (newValue) => {
   pointer-events: unset;
 }
 
+.v-chip-group {
+  margin-top: unset !important;
+}
+
 #first-chip-line {
   flex-wrap: wrap !important;
 }
@@ -183,7 +187,7 @@ h1 {
 .v-chip-group {
   margin-top: 0.5em;
   padding: 0;
-  justify-content: space-between;
+  justify-content: start;
   flex-wrap: nowrap;
 
   @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
diff --git a/src/components/common/results/FacetDrawer.vue b/src/components/common/results/FacetDrawer.vue
index 45b93aae..cb5ec4d2 100644
--- a/src/components/common/results/FacetDrawer.vue
+++ b/src/components/common/results/FacetDrawer.vue
@@ -244,7 +244,6 @@ watch(() => props.parametersLoaded,
   min-height: 48px;
 }
 
-// #TODO hover : pas de changement de couleur -> trouver le bon selecteur
 .v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
   opacity: 1 !important;
   background-color: rgb(var(--v-theme-surface));
diff --git a/src/components/common/results/FacetsHeader.vue b/src/components/common/results/FacetsHeader.vue
index 217d9626..2302195f 100644
--- a/src/components/common/results/FacetsHeader.vue
+++ b/src/components/common/results/FacetsHeader.vue
@@ -127,6 +127,7 @@ function closeOverlay() {
   align-self: flex-start;
   margin-top: 12px;
   font-weight: 400;
+  background-color: transparent !important;
 
   @media #{ map-get(settings.$display-breakpoints, 'md-and-down')} {
     font-size: 10px;
diff --git a/src/components/theses/ThesisTitle.vue b/src/components/theses/ThesisTitle.vue
index 5dc0c6cd..ab807bbf 100644
--- a/src/components/theses/ThesisTitle.vue
+++ b/src/components/theses/ThesisTitle.vue
@@ -69,6 +69,9 @@ function onUpdateLangue(langue) {
   padding: 1.2em 1.2em 1em 1em;
   grid-column-start: 1;
   grid-column-end: 4;
+
+  display: flex;
+  align-content: end;
 }
 
 .thesis-icon {
@@ -82,18 +85,18 @@ function onUpdateLangue(langue) {
   grid-column-start: 2;
 
   span {
-    padding-top: 16px;
     font-family: Roboto-Medium, sans-serif;
     font-size: 25.5px;
     font-weight: 600;
     color: rgb(var(--v-theme-text-dark-blue));
     letter-spacing: -0.5px;
     line-height: 1.2;
+    align-self: end;
   }
 }
 
 .language-selector {
-    padding-top: 16px;
   justify-content: center;
+  align-self: end;
 }
 </style>
\ No newline at end of file

From 1a90c1e312f4927bea96ec85b73f3bb0d4977c8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 17 Aug 2023 12:30:59 +0200
Subject: [PATCH 32/36] THE-799 rectification valeur dataReady

---
 src/views/TheseView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/TheseView.vue b/src/views/TheseView.vue
index 0d3db512..3b9c98e5 100644
--- a/src/views/TheseView.vue
+++ b/src/views/TheseView.vue
@@ -57,7 +57,7 @@
   <div class="thesis-main-wrapper">
     <!-- Infos these -->
     <div class="thesis-components white-containers">
-      <thesis-component :nnt="route.params.id" :these="these" :data-ready="true" :soutenue="these.status === 'soutenue'"></thesis-component>
+      <thesis-component :nnt="route.params.id" :these="these" :data-ready="dataReady" :soutenue="these.status === 'soutenue'"></thesis-component>
     </div>
   </div>
 </template>

From 768825c87c4f9e75d0dc58d550474f4e49e366c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 17 Aug 2023 13:12:08 +0200
Subject: [PATCH 33/36] THE-799 affichages boutons acces these mobile +
 skeletons mobile

---
 src/components/theses/ButtonsList.vue | 35 +++++++++++++++++----------
 src/views/PersonneView.vue            |  5 +++-
 src/views/TheseView.vue               |  4 +--
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/theses/ButtonsList.vue b/src/components/theses/ButtonsList.vue
index 90ef7e84..0134b044 100644
--- a/src/components/theses/ButtonsList.vue
+++ b/src/components/theses/ButtonsList.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup>
-import { ref, defineAsyncComponent, onMounted } from "vue";
+import { ref, defineAsyncComponent, onMounted, watch } from "vue";
 import { thesesAPIService } from '@/services/ThesesAPI';
 import { useDisplay } from "vuetify";
 
@@ -72,20 +72,30 @@ const baseURL = import.meta.env.VITE_APP_API;
 
 onMounted (
   () => {
-    if (props.soutenue) {
-      getButtons(props.nnt).then((res) => {
-        listButtons.value = res.data.buttons;
-      })
-        .catch((err) => {
-          displayError("Accès en ligne : " + err.message);
-        })
-        .finally(() => {
-          loading.value = false;
-        });
-    }
+    loadButtons();
+  }
+);
+
+watch (
+  () => props.dataReady,
+  () => {
+    loadButtons();
   }
 );
 
+function loadButtons() {
+  if (props.soutenue) {
+    getButtons(props.nnt).then((res) => {
+      listButtons.value = res.data.buttons;
+    })
+      .catch((err) => {
+        displayError("Accès en ligne : " + err.message);
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+}
 
 /**
  * Fonctions
@@ -177,7 +187,6 @@ function closeOverlay() {
 
   .v-btn {
     width: 85%;
-    margin-bottom: 10px;
     display: inline-flex;
     justify-content: space-between;
     text-transform: none;
diff --git a/src/views/PersonneView.vue b/src/views/PersonneView.vue
index bcb6afb4..98f2d5ea 100644
--- a/src/views/PersonneView.vue
+++ b/src/views/PersonneView.vue
@@ -137,7 +137,6 @@ import DomainSelector from '@/components/common/DomainSelector.vue';
 
 import {personnesAPIService} from "@/services/PersonnesAPI";
 import {useDisplay} from "vuetify";
-import StatistiqueCardPersonne from "@/components/personnes/StatistiqueCard.vue";
 import ResultCard from "@/components/theses/results/ResultCard.vue";
 import ScrollToTopButton from "@/components/common/ScrollToTopButton.vue";
 import ThesisKeywords from "@/components/common/Keywords.vue";
@@ -353,6 +352,10 @@ function displayError(message, opt) {
     grid-column-start: 2;
     padding: 0 2em;
 
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      width: 100%;
+    }
+
     .info {
       display: flex;
       align-content: center;
diff --git a/src/views/TheseView.vue b/src/views/TheseView.vue
index 3b9c98e5..a3be648a 100644
--- a/src/views/TheseView.vue
+++ b/src/views/TheseView.vue
@@ -1,7 +1,7 @@
 <template>
   <Message-box ref="messageBox"></Message-box>
   <nav v-if="mobile" class="mobile-nav-bar">
-    <button v-if="soutenue" @click="dialogVisible = true" class="filter-mobile-nav-bar">
+    <button v-if="these.status === 'soutenue'" @click="dialogVisible = true" class="filter-mobile-nav-bar">
       <v-icon v-bind="props" size="40px">mdi-book-arrow-down-outline
       </v-icon>
       <v-tooltip activator="parent">{{ $t('theseView.access') }}</v-tooltip>
@@ -23,7 +23,7 @@
     <!--    Menu boutons-liens-->
     <v-dialog v-model="dialogVisible" eager location-strategy="static" persistent no-click-animation fullscreen
       :close-on-content-click="false" transition="dialog-top-transition" content-class="full-screen">
-      <buttons-list :nnt="route.params.id" :soutenue="these.status === 'soutenue'" :these="these" :data-ready="true" @closeOverlay="closeOverlay"></buttons-list>
+      <buttons-list :nnt="route.params.id" :soutenue="these.status === 'soutenue'" :data-ready="dataReady" @closeOverlay="closeOverlay"></buttons-list>
     </v-dialog>
     <!--    Menu recherche/selecteur these/personnes-->
     <v-expand-transition>

From f430710a557dc7db6d58710a8ecba7b2dfc988fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 17 Aug 2023 15:38:41 +0200
Subject: [PATCH 34/36] THE-907 Adaptation du footer a la charte graphique (1/3
 1/3 1/3)

---
 src/components/common/FooterCustom.vue | 34 ++++++++++++--------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/common/FooterCustom.vue b/src/components/common/FooterCustom.vue
index 842f0aed..8ea7b4df 100644
--- a/src/components/common/FooterCustom.vue
+++ b/src/components/common/FooterCustom.vue
@@ -18,8 +18,6 @@
               href="https://documentation.abes.fr/aidetheses/thesesfr/index.html#TEF" target="_blank">{{ $t("footer.tef")
               }}</a>
           </li>
-        </ul>
-        <ul class="list-2">
           <li><span class="orange-link"> > </span><a href="https://www.idref.fr/" target="_blank">{{ $t("footer.idRref")
           }}</a>
           </li>
@@ -37,10 +35,10 @@
         }}</a>
       </div>
       <div class="logos-container">
-        <a href="https://www.enseignementsup-recherche.gouv.fr/fr" target="_blank" :title='$t("footer.logoMesriAlt")'>
-          <img src="../../assets/logo-mesr.svg" :alt='$t("footer.logoMesriAlt")' style="height: 60px;" class="pr-4 "></a>
         <a href="https://abes.fr/" target="_blank" :title='$t("footer.logoAbesAlt")'>
-          <img src="../../assets/abes-logo-cercle.svg" :alt='$t("footer.logoAbesAlt")' style="height: 80px;"></a>
+          <img src="../../assets/abes-logo-cercle.svg" :alt='$t("footer.logoAbesAlt")'></a>
+        <a href="https://www.enseignementsup-recherche.gouv.fr/fr" target="_blank" :title='$t("footer.logoMesriAlt")'>
+          <img src="../../assets/logo-mesr.svg" :alt='$t("footer.logoMesriAlt")' class="pr-4 "></a>
       </div>
     </div>
     <v-divider></v-divider>
@@ -95,7 +93,7 @@
 
   .footerTop {
     display: grid;
-    grid-template-columns: 30fr 2fr 40fr 2fr 15fr;
+    grid-template-columns: 30fr 0.5fr 30fr 0.5fr 30fr;
 
     width: 90%;
     padding-top: 1em;
@@ -147,21 +145,10 @@
     grid-row-start: 1;
 
     display: grid;
-    grid-template-columns: 20fr 2fr 20fr;
-    grid-template-rows: 2fr 8fr;
-
-    h3 {
-      align-self: center;
-    }
+    grid-template-rows: 1fr 8fr;
 
     .list-1 {
-      grid-column-start: 1;
-      grid-row-start: 2;
-    }
 
-    .list-2 {
-      grid-column-start: 3;
-      grid-row-start: 2;
     }
   }
 
@@ -176,8 +163,16 @@
   .logos-container {
     grid-column-start: 5;
     display: flex;
-    align-self: end;
+    flex-direction: column;
+    align-items: center;
     justify-content: end;
+
+    a {
+
+      img {
+        height: 6em;
+      }
+    }
   }
 
   .footerBottom {
@@ -204,6 +199,7 @@
 
 h3 {
   color: rgb(var(--v-theme-primary));
+  margin-left: 1rem;
 }
 
 .orange-link {

From e5b405d51a7b6e36bbf4714f1b7c15f367a7437a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 17 Aug 2023 15:50:30 +0200
Subject: [PATCH 35/36] THE-907 layout mobile

---
 src/components/common/FooterCustom.vue | 32 ++++++++++++++++----------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/common/FooterCustom.vue b/src/components/common/FooterCustom.vue
index 8ea7b4df..f03a869a 100644
--- a/src/components/common/FooterCustom.vue
+++ b/src/components/common/FooterCustom.vue
@@ -1,7 +1,7 @@
 <template>
   <v-footer class="pa-0">
-    <div class="footerTop">
-      <div class="links-container">
+    <div class="footer-top">
+      <div class="links-container footer-content">
         <h3>
           <v-icon>mdi-arrow-top-right</v-icon>
           {{ $t("accesDirect") }}
@@ -29,12 +29,12 @@
           </li>
         </ul>
       </div>
-      <div class="theses-description">
+      <div class="theses-description footer-content">
         <h4>Theses.fr</h4>
         <span>{{ $t("footer.texte") }}</span>&nbsp;<a href="/apropos">{{ $t("footer.plus")
         }}</a>
       </div>
-      <div class="logos-container">
+      <div class="logos-container footer-content">
         <a href="https://abes.fr/" target="_blank" :title='$t("footer.logoAbesAlt")'>
           <img src="../../assets/abes-logo-cercle.svg" :alt='$t("footer.logoAbesAlt")'></a>
         <a href="https://www.enseignementsup-recherche.gouv.fr/fr" target="_blank" :title='$t("footer.logoMesriAlt")'>
@@ -91,10 +91,15 @@
     max-height: 300px;
   }
 
-  .footerTop {
+  .footer-top {
     display: grid;
     grid-template-columns: 30fr 0.5fr 30fr 0.5fr 30fr;
 
+    @media #{ map-get(settings.$display-breakpoints, 'sm-and-down')} {
+      display: flex;
+      flex-direction: column;
+    }
+
     width: 90%;
     padding-top: 1em;
     padding-bottom: 1em;
@@ -118,7 +123,6 @@
       }
 
       ul {
-        margin-left: 1rem;
         list-style: none;
         text-align: left;
 
@@ -147,13 +151,12 @@
     display: grid;
     grid-template-rows: 1fr 8fr;
 
-    .list-1 {
-
-    }
+    order: 2;
   }
 
   .theses-description {
     grid-column-start: 1;
+    order: 1;
 
     span {
       opacity: 0.6;
@@ -161,11 +164,13 @@
   }
 
   .logos-container {
+    order: 3;
     grid-column-start: 5;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: end;
+    flex-direction: row;
+    justify-content: space-around;
+
 
     a {
 
@@ -199,7 +204,6 @@
 
 h3 {
   color: rgb(var(--v-theme-primary));
-  margin-left: 1rem;
 }
 
 .orange-link {
@@ -216,4 +220,8 @@ footer {
   background-color: rgb(var(--v-theme-surface));
   border-top: 1px solid rgb(var(--v-theme-gris-clair));
 }
+
+.footer-content {
+  margin-top: 1em;
+}
 </style>
\ No newline at end of file

From 790524a994b7e43ae1b0f8a8dbb977f58f4bbe2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Delafontaine?=
 <clment.delafontaine@gmail.com>
Date: Thu, 17 Aug 2023 16:18:33 +0200
Subject: [PATCH 36/36] THE-907 centrage du container de la liste de liens

---
 src/components/common/FooterCustom.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/FooterCustom.vue b/src/components/common/FooterCustom.vue
index f03a869a..1485b5b4 100644
--- a/src/components/common/FooterCustom.vue
+++ b/src/components/common/FooterCustom.vue
@@ -144,6 +144,7 @@
   }
 
   .links-container {
+    order: 2;
     width: 100%;
     grid-column-start: 3;
     grid-row-start: 1;
@@ -151,7 +152,7 @@
     display: grid;
     grid-template-rows: 1fr 8fr;
 
-    order: 2;
+    justify-content: center;
   }
 
   .theses-description {
@@ -171,7 +172,6 @@
     flex-direction: row;
     justify-content: space-around;
 
-
     a {
 
       img {