[#328] Corrections (#3)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [x] Pas de régression
- [ ] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #3
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

frontend/pages/calendar.vue

@@ -53,14 +53,24 @@
                     </button>
                 </div>
             </div>
-            <div class="mt-3 flex items-center gap-4">
-                <input
-                    v-model="employeeFilter"
-                    type="text"
-                    placeholder="Chercher un employé (nom ou prénom)"
-                    class="h-10 w-full max-w-md rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
-                />
+            <div class="flex justify-between mt-3">
+                <div class="flex items-center gap-4 w-80">
+                    <input
+                        v-model="employeeFilter"
+                        type="text"
+                        placeholder="Chercher un employé (nom ou prénom)"
+                        class="h-10 w-full max-w-md rounded-md border border-neutral-300 bg-white px-3 text-md text-neutral-900"
+                    />
+                </div>
+                <div class="flex flex-wrap items-center gap-4 rounded-md border border-neutral-300 px-3 py-2">
+                    <p class="font-bold">Légende :</p>
+                    <div v-for="type in absenceTypes" :key="type.id" class="flex items-center gap-2">
+                        <div :style="{ backgroundColor: type.color }" class="h-4 w-4 rounded"></div>
+                        <p>{{ type.label }}</p>
+                    </div>
+                </div>
             </div>
+
         </div>
 
         <div class="flex-1 min-h-0">
@@ -123,7 +133,12 @@ const sites = computed(() => {
             siteMap.set(employee.site.id, employee.site)
         }
     }
-    return Array.from(siteMap.values()).sort((siteA, siteB) => siteA.name.localeCompare(siteB.name, 'fr'))
+    return Array.from(siteMap.values()).sort((siteA, siteB) => {
+        const orderA = siteA.displayOrder ?? 0
+        const orderB = siteB.displayOrder ?? 0
+        if (orderA !== orderB) return orderA - orderB
+        return siteA.name.localeCompare(siteB.name, 'fr')
+    })
 })
 
 // Filtres de sites (par défaut: tous sélectionnés à l'init).
@@ -139,6 +154,9 @@ watch(sites, (next) => {
 // Tri stable: site -> nom -> prénom.
 const sortedEmployees = computed(() => {
   return [...employees.value].sort((employeeA, employeeB) => {
+    const siteOrderA = employeeA.site?.displayOrder ?? 0
+    const siteOrderB = employeeB.site?.displayOrder ?? 0
+    if (siteOrderA !== siteOrderB) return siteOrderA - siteOrderB
     const siteNameA = employeeA.site?.name ?? ''
     const siteNameB = employeeB.site?.name ?? ''
     if (siteNameA !== siteNameB) return siteNameA.localeCompare(siteNameB, 'fr')