Uniformise légende IPS avec le PDF et ajoute légende sous la carte

src/lib/components/DataCircoAugmented/AugmentedEducation.svelte

@@ -59,9 +59,28 @@
 
     let hovertemplate =
       "%{customdata.appellation_officielle}<br>Statut : %{customdata.secteur_public_prive_libe}<br>%{customdata.nature_uai_libe}<br>Indices de position sociale : %{customdata.ips}<extra></extra>"
-    let color = dataEducation.etablissements_premier_et_second_degre.map((d) =>
-      d.ips < 20 ? "grey" : colorScaleIPS(d.ips),
+    let color = dataEducation.etablissements_premier_et_second_degre.map(
+      (d) => {
+        if (d.ips < 90) {
+          return "grey"
+        } else if (d.ips >= 90 && d.ips < 100) {
+          return "#FFAB01" // Correspond à la couleur pour 90 à 99
+        } else if (d.ips >= 100 && d.ips < 110) {
+          return "#FF553E" // Correspond à la couleur pour 100 à 109
+        } else if (d.ips >= 110 && d.ips < 120) {
+          return "#C50140" // Correspond à la couleur pour 110 à 119
+        } else if (d.ips >= 120 && d.ips < 130) {
+          return "#D40EC3" // Correspond à la couleur pour 120 à 129
+        } else if (d.ips >= 130 && d.ips < 140) {
+          return "#7800F1" // Correspond à la couleur pour 130 à 139
+        } else if (d.ips >= 140) {
+          return "#1132FC" // Correspond à la couleur pour > 140
+        } else {
+          return "#686868" // Correspond à la couleur pour n.c.
+        }
+      },
     )
+
     plot_map(
       "plot_ips",
       dataEducation.etablissements_premier_et_second_degre,
@@ -260,6 +279,41 @@
         <div class="">
           <div id="plot_ips" class="flex justify-center" />
         </div>
+        <div
+          class="mb-4 mt-2 flex items-center justify-center pl-6 font-sans text-sm"
+        >
+          <span class="mr-2">IPS&nbsp;:</span>
+          <div class=" mr-1 inline-block h-2 w-2 border-8 border-[#FFAB01]" />
+          &lt;&nbsp;90
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#FF553E]"
+          />
+          90 à 99
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#C50140]"
+          />
+          100 à 109
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#D40EC3]"
+          />
+          110 à 119
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#7800F1]"
+          />
+          120 à 129
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#1132FC]"
+          />
+          130 à 139
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#00E0D7]"
+          />
+          >&nbsp;140
+          <div
+            class="ml-2 mr-1 inline-block h-2 w-2 border-8 border-[#686868]"
+          />
+          n.c.
+        </div>
       </div>
     </section>