From 09f62bc2b050ee2f3f2bcd88c83493cabbc5c39a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Lain=C3=A9?= <vincent.laine.utc@gmail.com>
Date: Wed, 16 Oct 2024 09:53:03 +0200
Subject: [PATCH] =?UTF-8?q?Retours=20css=20mobile=20=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/carte/Map.vue               | 33 ++-----------
 client/components/carte/Table.vue             | 14 +++++-
 client/components/carte/commune/Filter.vue    |  6 +--
 client/components/carte/commune/Map.vue       | 49 ++++++++++++++-----
 client/components/donnees/AreaChart.vue       | 15 ++++--
 client/components/donnees/AreaTable.vue       | 17 ++++++-
 .../donnees/ArretesRestrictionsTable.vue      |  9 +++-
 client/components/donnees/CommuneChart.vue    | 40 +++------------
 client/components/donnees/CommuneTable.vue    | 17 ++++++-
 .../components/donnees/DepartementChart.vue   | 15 ++++--
 .../components/donnees/DepartementTable.vue   | 17 ++++++-
 client/components/donnees/Filter.vue          |  4 +-
 client/components/mixins/Donnees.vue          |  2 +-
 .../mixins/NiveauGraviteLegende.vue           | 34 +++++++++++++
 client/components/mixins/Search.vue           |  2 +-
 client/plugins/vue-dsfr.ts                    |  1 -
 client/utils/index.ts                         |  6 ++-
 17 files changed, 178 insertions(+), 103 deletions(-)
 create mode 100644 client/components/mixins/NiveauGraviteLegende.vue

diff --git a/client/components/carte/Map.vue b/client/components/carte/Map.vue
index 5abca7c..fb493f8 100644
--- a/client/components/carte/Map.vue
+++ b/client/components/carte/Map.vue
@@ -3,7 +3,6 @@ import * as maplibregl from 'maplibre-gl';
 import { Ref } from 'vue';
 import { PMTiles, Protocol } from 'pmtiles';
 import api from '../../api';
-import niveauxGravite from '../../dto/niveauGravite';
 import { useRefDataStore } from '../../store/refData';
 
 const props = defineProps<{
@@ -206,7 +205,7 @@ const typeEauTags: Ref<any[]> = ref([{
 }, {
   label: 'Eau superficielle',
   value: 'SUP',
-  text: `d'un cours d'eau, d'une rivière`,
+  text: `des cours d'eau, rivières`,
 }, {
   label: 'Eau souterraine',
   value: 'SOU',
@@ -455,18 +454,7 @@ watch(() => props.area, () => {
                  tag-name="button" />
       </div>
     </div>
-    <div class="fr-grid-row map-legend fr-mb-1w show-sm">
-      <template v-for="legend in niveauxGravite">
-        <DsfrTooltip on-hover
-                     :content="legend.description">
-          <DsfrBadge small
-                     class="fr-mr-1w"
-                     :class="legend.class"
-                     type=""
-                     :label="legend.text" />
-        </DsfrTooltip>
-      </template>
-    </div>
+    <MixinsNiveauGraviteLegende class="map-legend fr-mb-1w show-sm" />
     <div class="map-wrap" :class="{'map-wrap--loading': loading, 'map-wrap--full-actions': !hideTypeEau}">
       <div class="map" ref="mapContainer"></div>
     </div>
@@ -481,18 +469,7 @@ watch(() => props.area, () => {
                  tag-name="button" />
       </div>
     </div>
-    <div class="fr-grid-row map-legend fr-mt-1w hide-sm">
-      <template v-for="legend in niveauxGravite">
-        <DsfrTooltip on-hover
-                     :content="legend.description">
-          <DsfrBadge small
-                     class="fr-mr-1w"
-                     :class="legend.class"
-                     type=""
-                     :label="legend.text" />
-        </DsfrTooltip>
-      </template>
-    </div>
+    <MixinsNiveauGraviteLegende class="map-legend fr-mt-1w hide-sm" />
 
     <div v-if="!hideDownloadBtn"
          data-html2canvas-ignore="true"
@@ -598,10 +575,6 @@ h6 {
   }
 }
 
-.map-legend :deep(.fr-link) {
-  background: none;
-}
-
 @media screen and (max-width: 767px) {
   .map-wrap {
     height: calc(100% - 230px);
diff --git a/client/components/carte/Table.vue b/client/components/carte/Table.vue
index a46b73a..47183e2 100644
--- a/client/components/carte/Table.vue
+++ b/client/components/carte/Table.vue
@@ -155,7 +155,7 @@ watch(() => props, () => {
                    :rows="rowsFiltered"
                    :pagination="true"
                    :key="componentKey"
-                   class="fr-table--layout-fixed fr-table--no-title" />
+                   class="fr-table--sm fr-table--no-title" />
       </div>
 
       <div class="text-align-right fr-mt-1w">
@@ -191,7 +191,6 @@ watch(() => props, () => {
   }
 
   &-body {
-    background: var(--grey-1000-50);
     padding-bottom: 1rem;
   }
 
@@ -214,4 +213,15 @@ watch(() => props, () => {
     margin: 0 -0.5rem;
   }
 }
+
+.fr-table {
+  overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+  .fr-table > :deep(table) {
+    display: table;
+    table-layout: fixed;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/client/components/carte/commune/Filter.vue b/client/components/carte/commune/Filter.vue
index d3a83f7..96b5310 100644
--- a/client/components/carte/commune/Filter.vue
+++ b/client/components/carte/commune/Filter.vue
@@ -151,7 +151,7 @@ watch(() => refDataStore.departements, () => {
 
 <template>
   <div class="fr-grid-row fr-grid-row--gutters">
-    <div class="fr-col-lg-3 fr-col-12">
+    <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
       <DsfrInputGroup :error-message="utils.showInputError(v$, 'area')">
         <DsfrSelect label="Territoire"
                     v-model="formData.area"
@@ -160,7 +160,7 @@ watch(() => refDataStore.departements, () => {
                     required />
       </DsfrInputGroup>
     </div>
-    <div class="fr-col-lg-3 fr-col-6">
+    <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
       <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateDebut')">
         <DsfrInput
           id="dateDebut"
@@ -176,7 +176,7 @@ watch(() => refDataStore.departements, () => {
         />
       </DsfrInputGroup>
     </div>
-    <div class="fr-col-lg-3 fr-col-6">
+    <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
       <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateFin')">
         <DsfrInput
           id="dateFin"
diff --git a/client/components/carte/commune/Map.vue b/client/components/carte/commune/Map.vue
index 470f161..656203f 100644
--- a/client/components/carte/commune/Map.vue
+++ b/client/components/carte/commune/Map.vue
@@ -475,7 +475,7 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
                      :closeable="false"
           />
         </div>
-        <div class="map-pre-actions-card fr-p-1w fr-m-1w">
+        <div class="map-pre-actions-card fr-p-1w fr-m-1w hide-sm">
           <h6 class="fr-mb-1w fr-mr-2w">Raccourcis :</h6>
           <DsfrTag v-for="tag in mapTags"
                    :label="tag.label"
@@ -485,6 +485,14 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
                    tag-name="button" />
         </div>
       </div>
+      <div class="map-legend fr-grid-row fr-grid-row--middle fr-grid-row--gutters show-sm">
+        <div class="fr-col-3">Zones non concernées par la sécheresse</div>
+        <div class="fr-col-1" v-for="legend of legende">
+          <div :style="{'background-color': legend.color}"
+               class="map-legend-carre"></div>
+        </div>
+        <div class="fr-col-3">Situation extrème</div>
+      </div>
       <div class="fr-grid-row fr-grid-row--gutters">
         <div class="fr-col-12" style="position:relative;"
              :style="embedded ? 'height: calc(100vh - 125px)' : 'height: 75vh'">
@@ -495,12 +503,24 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
           </div>
         </div>
       </div>
-      <div class="map-legend fr-grid-row fr-grid-row--middle">
-        <div>Zones non concernées par la sécheresse</div>
-        <div v-for="legend of legende"
-             :style="{'background-color': legend.color}"
-             class="map-legend-carre fr-mx-1w"></div>
-        <div>Situation extrème</div>
+      <div class="map-post-actions">
+        <div class="map-post-actions-card fr-p-1w fr-m-1w fr-mt-4w show-sm">
+          <h6 class="fr-mb-1w fr-mr-2w">Raccourcis :</h6>
+          <DsfrTag v-for="tag in mapTags"
+                   :label="tag.label"
+                   class="fr-m-1w"
+                   small
+                   @click="flyToLocation(tag.bounds)"
+                   tag-name="button" />
+        </div>
+      </div>
+      <div class="map-legend fr-grid-row fr-grid-row--middle fr-grid-row--gutters hide-sm">
+        <div class="fr-col-3">Zones non concernées par la sécheresse</div>
+        <div class="fr-col-1" v-for="legend of legende">
+          <div :style="{'background-color': legend.color}"
+               class="map-legend-carre"></div>
+        </div>
+        <div class="fr-col-3">Situation extrème</div>
       </div>
 
       <div data-html2canvas-ignore="true" class="text-align-right">
@@ -613,10 +633,11 @@ watch(() => [props.dateBegin, props.dateEnd, props.area], () => {
   .map {
     width: 100%;
     height: 100%;
+    border-radius: 15px;
   }
 }
 
-.map-pre-actions {
+.map-pre-actions, .map-post-actions {
   position: absolute;
   top: 10px;
   left: 10px;
@@ -657,6 +678,8 @@ h6 {
 
 .map-legend {
   font-weight: bold;
+  text-align: center;
+  max-width: 750px;
 
   &-carre {
     height: 20px;
@@ -664,6 +687,7 @@ h6 {
     border: 1px solid var(--grey-425-625);;
     border-radius: .25rem;
     display: inline-block;
+    pading: auto;
   }
 }
 
@@ -687,11 +711,14 @@ h6 {
       display: initial;
     }
   }
-}
 
-@media screen and (max-width: 991px) {
   .map-legend {
-    margin-top: 2rem;
+    font-size: 0.6rem;
+
+    &-carre {
+      height: 15px;
+      width: 25px;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/client/components/donnees/AreaChart.vue b/client/components/donnees/AreaChart.vue
index b43e0ff..89c0d67 100644
--- a/client/components/donnees/AreaChart.vue
+++ b/client/components/donnees/AreaChart.vue
@@ -187,7 +187,7 @@ const tooltipTitle = (tooltipItems: any[]): string => {
 
 const chartLineOptions: ChartOptions = {
   responsive: true,
-  maintainAspectRatio: true,
+  maintainAspectRatio: false,
   scales: {
     x: {
       type: 'time',
@@ -275,7 +275,7 @@ watch(() => refDataStore.departements, () => {
 <template>
   <div ref="screenshotZone">
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-lg-2 fr-col-6">
+      <div class="fr-col-lg-2 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'typeEau')">
           <DsfrSelect label="Type d'eau"
                       v-model="formData.typeEau"
@@ -284,7 +284,7 @@ watch(() => refDataStore.departements, () => {
                       required />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-2 fr-col-6">
+      <div class="fr-col-lg-2 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'area')">
           <DsfrSelect label="Territoire"
                       v-model="formData.area"
@@ -293,7 +293,7 @@ watch(() => refDataStore.departements, () => {
                       required />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-3 fr-col-6">
+      <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateDebut')">
           <DsfrInput
             id="dateDebut"
@@ -309,7 +309,7 @@ watch(() => refDataStore.departements, () => {
           />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-3 fr-col-6">
+      <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateFin')">
           <DsfrInput
             id="dateFin"
@@ -375,4 +375,9 @@ watch(() => refDataStore.departements, () => {
     margin-bottom: 0;
   }
 }
+
+#area-chart-line {
+  height: 600px;
+  max-height: 600px;
+}
 </style>
\ No newline at end of file
diff --git a/client/components/donnees/AreaTable.vue b/client/components/donnees/AreaTable.vue
index 132e798..fdfd2d3 100644
--- a/client/components/donnees/AreaTable.vue
+++ b/client/components/donnees/AreaTable.vue
@@ -61,11 +61,24 @@ watch(() => [props.typeEau, props.dataArea], () => {
              :rows="rows"
              :pagination="true"
              :key="componentKey"
-             class="fr-table--layout-fixed fr-table--no-title" />
+             class="fr-table--sm fr-table--no-title" />
 
   <div class="text-align-right fr-mt-1w">
     <DsfrButton @click="downloadCsv()">
       Télécharger les données (CSV)
     </DsfrButton>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="scss" scoped>
+.fr-table {
+  overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+  .fr-table > :deep(table) {
+    display: table;
+    table-layout: fixed;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/components/donnees/ArretesRestrictionsTable.vue b/client/components/donnees/ArretesRestrictionsTable.vue
index e0a8981..6e2449d 100644
--- a/client/components/donnees/ArretesRestrictionsTable.vue
+++ b/client/components/donnees/ArretesRestrictionsTable.vue
@@ -92,6 +92,7 @@ watch(() => props, () => {
                  :headers="headers"
                  :rows="rows"
                  :pagination="true"
+                 class="fr-table--sm"
                  :key="componentKey" />
 
       <div class="text-align-right fr-mt-1w">
@@ -106,4 +107,10 @@ watch(() => props, () => {
       </div>
     </template>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="scss" scoped>
+.fr-table {
+  overflow: auto;
+}
+</style>
\ No newline at end of file
diff --git a/client/components/donnees/CommuneChart.vue b/client/components/donnees/CommuneChart.vue
index 9adce95..6d2f522 100644
--- a/client/components/donnees/CommuneChart.vue
+++ b/client/components/donnees/CommuneChart.vue
@@ -143,7 +143,7 @@ async function downloadGraph() {
     <template v-if="!showError && communeStats">
       <div ref="screenshotZone">
         <div class="fr-grid-row fr-grid-row--gutters fr-mb-2w">
-          <div class="fr-col-lg-3 fr-col-6">
+          <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
             <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateDebut')">
               <DsfrInput
                 id="dateDebut"
@@ -159,7 +159,7 @@ async function downloadGraph() {
               />
             </DsfrInputGroup>
           </div>
-          <div class="fr-col-lg-3 fr-col-6">
+          <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
             <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateFin')">
               <DsfrInput
                 id="dateFin"
@@ -182,8 +182,10 @@ async function downloadGraph() {
             </DsfrButton>
           </div>
         </div>
+        <MixinsNiveauGraviteLegende class="show-sm fr-mb-1w" />
         <h6 class="fr-mb-1w">Tout type d'eau</h6>
-        <p class="fr-text--sm"> Niveau de gravité maximal observé parmi les niveaux de gravité relatifs aux eaux superficielles, souterraines et l'eau potable</p>
+        <p class="fr-text--sm"> Niveau de gravité maximal observé parmi les niveaux de gravité relatifs aux eaux
+          superficielles, souterraines et l'eau potable</p>
         <DonneesCommuneBarChart :restrictions="restrictionsFiltered"
                                 :communeNom="communeStats.commune.nom" />
         <div v-for="typeEau of typesEauOptions">
@@ -199,28 +201,7 @@ async function downloadGraph() {
                                   :restrictions="restrictionsFiltered"
                                   :communeNom="communeStats.commune.nom" />
         </div>
-        <div class="fr-grid-row">
-          <DsfrBadge small
-                     no-icon
-                     class="situation-level-bg-0 fr-mr-1w fr-mt-1w"
-                     label="pas de restrictions" />
-          <DsfrBadge small
-                     no-icon
-                     class="situation-level-bg-1 fr-mr-1w fr-mt-1w"
-                     label="vigilance" />
-          <DsfrBadge small
-                     no-icon
-                     class="situation-level-bg-2 fr-mr-1w fr-mt-1w"
-                     label="alerte" />
-          <DsfrBadge small
-                     no-icon
-                     class="situation-level-bg-3 fr-mr-1w fr-mt-1w"
-                     label="alerte renforcée" />
-          <DsfrBadge small
-                     no-icon
-                     class="situation-level-bg-4 fr-mt-1w"
-                     label="crise" />
-        </div>
+        <MixinsNiveauGraviteLegende class="fr-mt-1w hide-sm" />
       </div>
 
       <div class="text-align-right fr-mt-1w">
@@ -260,13 +241,4 @@ async function downloadGraph() {
 .fr-grid-row {
   align-items: end;
 }
-
-.situation-level-bg-0 {
-  color: var(--grey-0-1000);
-}
-
-.situation-level-bg-1 {
-  background-color: #FFEDA0;
-  color: var(--grey-0-1000);
-}
 </style>
\ No newline at end of file
diff --git a/client/components/donnees/CommuneTable.vue b/client/components/donnees/CommuneTable.vue
index 86749d4..5fdbc95 100644
--- a/client/components/donnees/CommuneTable.vue
+++ b/client/components/donnees/CommuneTable.vue
@@ -59,11 +59,24 @@ watch(() => [props.dataCommune], () => {
              :rows="rows"
              :pagination="true"
              :key="componentKey"
-             class="fr-table--layout-fixed fr-table--no-title" />
+             class="fr-table--sm fr-table--no-title" />
 
   <div class="text-align-right fr-mt-1w">
     <DsfrButton @click="downloadCsv()">
       Télécharger les données (CSV)
     </DsfrButton>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="scss" scoped>
+.fr-table {
+  overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+  .fr-table > :deep(table) {
+    display: table;
+    table-layout: fixed;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/components/donnees/DepartementChart.vue b/client/components/donnees/DepartementChart.vue
index 9d8c385..9ab26a8 100644
--- a/client/components/donnees/DepartementChart.vue
+++ b/client/components/donnees/DepartementChart.vue
@@ -207,7 +207,7 @@ const tooltipTitle = (tooltipItems: any[]): string => {
 
 const chartLineOptions: ChartOptions = {
   responsive: true,
-  maintainAspectRatio: true,
+  maintainAspectRatio: false,
   scales: {
     x: {
       type: 'time',
@@ -293,7 +293,7 @@ watch(() => refDataStore.departements, () => {
 <template>
   <div ref="screenshotZone">
     <div class="fr-grid-row fr-grid-row--gutters">
-      <div class="fr-col-lg-2 fr-col-6">
+      <div class="fr-col-lg-2 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'typeEau')">
           <DsfrSelect label="Type d'eau"
                       v-model="formData.typeEau"
@@ -302,7 +302,7 @@ watch(() => refDataStore.departements, () => {
                       required />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-2 fr-col-12">
+      <div class="fr-col-lg-2 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'area')">
           <DsfrSelect label="Territoire"
                       v-model="formData.area"
@@ -311,7 +311,7 @@ watch(() => refDataStore.departements, () => {
                       required />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-3 fr-col-6">
+      <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateDebut')">
           <DsfrInput
             id="dateDebut"
@@ -327,7 +327,7 @@ watch(() => refDataStore.departements, () => {
           />
         </DsfrInputGroup>
       </div>
-      <div class="fr-col-lg-3 fr-col-6">
+      <div class="fr-col-lg-3 fr-col-md-6 fr-col-12">
         <DsfrInputGroup :error-message="utils.showInputError(v$, 'dateFin')">
           <DsfrInput
             id="dateFin"
@@ -393,4 +393,9 @@ watch(() => refDataStore.departements, () => {
     margin-bottom: 0;
   }
 }
+
+#departement-chart-line {
+  height: 600px;
+  max-height: 600px;
+}
 </style>
\ No newline at end of file
diff --git a/client/components/donnees/DepartementTable.vue b/client/components/donnees/DepartementTable.vue
index 3cb417d..72a781e 100644
--- a/client/components/donnees/DepartementTable.vue
+++ b/client/components/donnees/DepartementTable.vue
@@ -74,11 +74,24 @@ watch(() => [props.typeEau, props.dataDepartement], () => {
              :rows="rows"
              :pagination="true"
              :key="componentKey"
-             class="fr-table--layout-fixed fr-table--no-title" />
+             class="fr-table--sm fr-table--no-title" />
 
   <div class="text-align-right fr-mt-1w">
     <DsfrButton @click="downloadCsv()">
       Télécharger les données (CSV)
     </DsfrButton>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="scss" scoped>
+.fr-table {
+  overflow: auto;
+}
+
+@media screen and (min-width: 768px) {
+  .fr-table > :deep(table) {
+    display: table;
+    table-layout: fixed;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/components/donnees/Filter.vue b/client/components/donnees/Filter.vue
index d81e735..7be35ce 100644
--- a/client/components/donnees/Filter.vue
+++ b/client/components/donnees/Filter.vue
@@ -72,14 +72,14 @@ watch(() => refDataStore.departements, () => {
 
 <template>
   <div class="fr-grid-row fr-grid-row--gutters">
-    <div class="fr-col-lg-4 fr-col-6">
+    <div class="fr-col-lg-4 fr-col-md-6 fr-col-12">
       <DsfrSelect label="Territoire"
                   v-model="area"
                   @update:modelValue="computeDisabled = false"
                   :options="areaOptions"
                   required />
     </div>
-    <div class="fr-col-lg-4 fr-col-6">
+    <div class="fr-col-lg-4 fr-col-md-6 fr-col-12">
       <DsfrInput
         id="dateCarte"
         v-model="date"
diff --git a/client/components/mixins/Donnees.vue b/client/components/mixins/Donnees.vue
index c827ef2..34ad155 100644
--- a/client/components/mixins/Donnees.vue
+++ b/client/components/mixins/Donnees.vue
@@ -15,7 +15,7 @@
               />
             </div>
             <div>
-              <h2>Consulter les données sécheresse ?</h2>
+              <h2>En savoir plus sur l'évolution des sécheresses</h2>
               <p class="fr-text--sm">
                 Retrouvez des cartes et historiques des données sécheresse, ainsi que l’évolution des restrictions dans
                 le temps et sur des territoires sélectionnés.
diff --git a/client/components/mixins/NiveauGraviteLegende.vue b/client/components/mixins/NiveauGraviteLegende.vue
new file mode 100644
index 0000000..f8cf31c
--- /dev/null
+++ b/client/components/mixins/NiveauGraviteLegende.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import niveauxGravite from '../../dto/niveauGravite';
+</script>
+
+<template>
+  <div class="fr-grid-row">
+    <template v-for="legend in niveauxGravite">
+      <DsfrTooltip on-hover
+                   :content="legend.description">
+        <DsfrBadge small
+                   @click="$event.preventDefault();"
+                   class="fr-mr-1w"
+                   :class="legend.class"
+                   type=""
+                   :label="legend.text" />
+      </DsfrTooltip>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.situation-level-bg-0 {
+  color: var(--grey-0-1000);
+}
+
+.situation-level-bg-1 {
+  background-color: #FFEDA0;
+  color: var(--grey-0-1000);
+}
+
+:deep(.fr-link) {
+  background: none;
+}
+</style>
\ No newline at end of file
diff --git a/client/components/mixins/Search.vue b/client/components/mixins/Search.vue
index c4b6a23..e000aca 100644
--- a/client/components/mixins/Search.vue
+++ b/client/components/mixins/Search.vue
@@ -40,7 +40,7 @@ const typeEauOptions = [
     value: 'AEP',
   },
   {
-    text: `D'un cours d'eau, d'une rivière`,
+    text: `Des cours d'eau, rivières`,
     value: 'SUP',
   }, {
     text: `Des nappes (puits ou forage)`,
diff --git a/client/plugins/vue-dsfr.ts b/client/plugins/vue-dsfr.ts
index 3067d1a..3ac7bdf 100644
--- a/client/plugins/vue-dsfr.ts
+++ b/client/plugins/vue-dsfr.ts
@@ -59,5 +59,4 @@ export default defineNuxtPlugin((nuxtApp) => {
       height: i.height,
     });
   });
-  console.log(listIcons());
 });
diff --git a/client/utils/index.ts b/client/utils/index.ts
index d5f7d96..07d3e2e 100644
--- a/client/utils/index.ts
+++ b/client/utils/index.ts
@@ -238,11 +238,15 @@ const index = {
 <p class="fr-badge situation-level-bg-${this.getRestrictionRank(pmtilesData.niveauGravite)}">${niveauGravite.text}</p>
 </div>
 <div class="map-popup-zone">Zone&nbsp;: ${pmtilesData.nom}</div>`
+    } else {
+      popupHtml += `<div class="fr-mb-1w">
+<p class="fr-badge situation-level-bg-0">Pas de restrictions</p>
+</div>`
     }
 
     popupHtml += `<div class="fr-my-1w">${addressName}</div>`;
 
-    if (showRestrictionsBtn) {
+    if (showRestrictionsBtn && pmtilesData) {
       popupHtml += `
 <div>
 <button class="fr-btn btn-map-popup">