front: affichage du bloc "durée de la prestation" sur la fiche servic…

…e, si et seulement si les champts "volume horaire hebdomadaire" et "nombre de semaine(s)" sont renseignés

front/src/lib/components/specialized/services/display/service-duration.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Service } from "$lib/types";
+
+  export let service: Service;
+
+  $: isValid =
+    isFinite(service.durationWeeklyHours) &&
+    service.durationWeeklyHours > 0 &&
+    isFinite(service.durationWeeks) &&
+    service.durationWeeks > 0;
+
+  $: totalHours = isValid
+    ? service.durationWeeklyHours * service.durationWeeks
+    : 0;
+</script>
+
+<div>
+  {#if !isValid}
+    <p>Données non renseignées</p>
+  {:else}
+    <p>
+      Volume horaire total de {service.durationWeeklyHours} heure(s) sur {service.durationWeeks}
+      semaine(s), soit {totalHours} heure(s) au total.
+    </p>
+  {/if}
+</div>

front/src/lib/components/specialized/services/display/service-key-informations.svelte

@@ -9,13 +9,15 @@
     priceTagIcon,
     timeLineIcon,
     listCheckIcon,
+    timerFlashIcon,
   } from "$lib/icons";
   import type { Service, ServicesOptions } from "$lib/types";
   import { getLabelFromValue } from "$lib/utils/choice";
   import { shortenString } from "$lib/utils/misc";
   import { isValidformatOsmHours } from "$lib/utils/opening-hours";
   import { isNotFreeService } from "$lib/utils/service";
   import OsmHours from "../../osm-hours.svelte";
+  import ServiceDuration from "./service-duration.svelte";
   import SubcategoryList from "./subcategory-list.svelte";
 
   export let service: Service;
@@ -87,6 +89,19 @@
 
   <hr class="mb-s10 mt-s20" />
 
+  {#if service.durationWeeklyHours && service.durationWeeks}
+    <div>
+      <h3 class="!mb-s10 text-f17">
+        <span class="mr-s8 h-s24 w-s24 fill-current">
+          {@html timerFlashIcon}
+        </span>
+        Durée de la prestation
+      </h3>
+      <ServiceDuration {service} />
+    </div>
+    <hr class="mb-s10 mt-s20" />
+  {/if}
+
   <div class="flex">
     <div class="flex-1">
       <h3>