Corrige sur cas type la valeur de chaque dotation pour la diviser par nombre...

Corrige sur cas type la valeur de chaque dotation pour la diviser par nombre d'habitant et aligne la flèche de tendance au centre

src/lib/components/impact/CommuneSummary.svelte

@@ -53,6 +53,9 @@
   }
 
   function calculateAmendementTrendValueCommune(): number | null {
+    // TODO vérifier les valeurs d'amendement en cas de suppression de la dernière carte
+    // et d'ajout immédiat d'une nouvelle commune
+    // qui, de fait, récupère le casTypeIndex
     const baseCommune = getBaseCasTypes()[casTypeIndex]
 
     const baseDotationsCommune: DotationSummaryCommune[] =
@@ -95,6 +98,13 @@
 
     return amendementTrendValue
   }
+
+  function formatNumber(number: number) {
+    return new Intl.NumberFormat("fr-FR", {
+      minimumFractionDigits: 0, // Ne pas afficher de décimales si le nombre est entier
+      maximumFractionDigits: 2, // Maximum deux décimales
+    }).format(number)
+  }
 </script>
 
 <div class="flex min-w-[15rem] flex-row divide-y">
@@ -120,16 +130,16 @@
     <!-- exception au style : la ligne horizontale prend toute la largeur de la Card englobante -->
     <hr class="-mx-4 my-4 h-px" />
 
-    <div class="group relative flex w-full">
+    <div class="flex w-full items-center">
       {#if amendementExists() && getAmendementCasTypes().length > 0}
         <!-- la tendance des communes, contrairement à celle des strates, n'est pas calculée par le back -->
         {@const amendementTrendValue: number | null = calculateAmendementTrendValueCommune()}
         {@const amendementTrend: Trend = fromEvolutionToTrend(amendementTrendValue)}
 
         <img
-          class="max-h-12 w-1/4 p-2 {amendementTrend === Trend.Unknown
-            ? 'w-full'
-            : 'w-1/4'}"
+          class="p-2 {amendementTrend === Trend.Unknown
+            ? 'max-h-16 w-full'
+            : 'max-h-12 w-1/4'}"
           src={getTrendIconPath(amendementTrend)}
           alt={`Tendance ${amendementTrend}`}
         />
@@ -147,21 +157,23 @@
           </div>
 
           <!-- tooltip sur image de tendance -->
+          {#if amendementTrendValue}
             <div
               class="pointer-events-none absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 rounded border-2 border-white bg-gray-100 px-2 py-1 text-xs opacity-0 transition-opacity group-hover:opacity-100"
             >
-            {amendementTrendValue?.toFixed(2)} € d'évolution de la somme
+              {formatNumber(amendementTrendValue)} € d'évolution de la somme
               <br />
               des dotations moyennes par habitant de la commune
               <br />
-            (sur le périmètre de ce simulateur : {Object.values(Dotation).join(
-              ", ",
-            )}).
+              (sur le périmètre de ce simulateur : {Object.values(
+                Dotation,
+              ).join(", ")}).
             </div>
           {/if}
+        {/if}
       {:else}
         <img
-          class="max-h-12 w-full p-2"
+          class="max-h-16 w-full p-2"
           src={getTrendIconPath(tendanceReforme)}
           alt={`Tendance ${tendanceReforme}`}
         />
@@ -189,7 +201,7 @@
         <div>
           <hr class="my-4 h-px" />
           <!-- TODO transformer en tableau invisible pour gérer les espacements ? -->
-          <div class="flex items-center">
+          <div class="flex items-center gap-0.5">
             <iconify-icon
               class="text-2xl"
               icon={getDotationIconName(summaryDotation.dotation as Dotation)}
@@ -220,16 +232,19 @@
                 ? "line-through-amendment"
                 : ""}
             >
-              {summaryDotation.montantDotation.toLocaleString(
-                "fr-FR",
+              {formatNumber(
+                summaryDotation.montantDotation / nombreHabitants,
               )}&nbsp;&nbsp;€&nbsp;/hab.
             </span>
             {#if changeInDotationCommuneMontant}
               &nbsp;&nbsp;
               <span class="bg-le-jaune">
-                {amendementDotationCommune?.montantDotation?.toLocaleString(
-                  "fr-FR",
-                )}&nbsp;&nbsp;€&nbsp;/hab.
+                {amendementDotationCommune?.montantDotation
+                  ? formatNumber(
+                      amendementDotationCommune?.montantDotation /
+                        nombreHabitants,
+                    )
+                  : undefined}&nbsp;&nbsp;€&nbsp;/hab.
               </span>
             {/if}
           </div>