From 90e63a463e31f87f25790cc4aaa94122c2a0d924 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 17 Apr 2026 11:04:57 +0200
Subject: [PATCH 01/23] =?UTF-8?q?feat=20:=20autoriser=20la=20cr=C3=A9ation?=
 =?UTF-8?q?=20d'absences=20sur=20les=20jours=20f=C3=A9ri=C3=A9s=20depuis?=
 =?UTF-8?q?=20le=20calendrier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 doc/functional-rules.md                |  2 +-
 frontend/components/CalendarGrid.vue   |  6 ++----
 frontend/data/documentation-content.ts |  3 ++-
 frontend/pages/calendar.vue            | 17 ++++-------------
 4 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/doc/functional-rules.md b/doc/functional-rules.md
index 49df2bf..7d8bbc8 100644
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -166,7 +166,7 @@ Documents complementaires:
 - Onglet congés: jours fériés affichés sur le calendrier avec fond `rgb(179, 229, 252)` et nom au survol
 - Écran Heures et Heures Conducteurs (vue jour): le nom du férié est affiché dans la colonne Absence sous forme de pill (fond `#b3e5fc`, icône `mdi:calendar-star`), distinct du pill absence
 - Règle courante:
-  - absences bloquées sur jour férié (création/édition) — bouton "Modifier" masqué comme pour les formations
+  - absences autorisées sur jour férié (création/édition depuis l'écran Heures et le Calendrier). Quand une absence est posée, le crédit virtuel férié est désactivé — c'est le `countAsWorkedHours` du type d'absence qui pilote
   - saisie d'heures ou de jours de présence autorisée — les heures saisies comptent normalement dans le total hebdo et le calcul RTT
   - la référence hebdomadaire n'est pas réduite par un férié: un salarié qui ne saisit rien sur un férié est en déficit de la journée correspondante
 
diff --git a/frontend/components/CalendarGrid.vue b/frontend/components/CalendarGrid.vue
index 5402ffd..1578726 100644
--- a/frontend/components/CalendarGrid.vue
+++ b/frontend/components/CalendarGrid.vue
@@ -45,9 +45,9 @@
                             <button
                                 type="button"
                                 class="relative flex h-8 w-full items-center justify-center overflow-hidden rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800"
-                                :class="isHolidayDate(day.date) || getCellInfo(employee.id, day.date)?.hasFormation ? 'cursor-not-allowed opacity-80' : ''"
+                                :class="getCellInfo(employee.id, day.date)?.hasFormation ? 'cursor-not-allowed opacity-80' : ''"
                                 :style="getCellStyle(employee.id, day.date)"
-                                :disabled="isHolidayDate(day.date) || getCellInfo(employee.id, day.date)?.hasFormation"
+                                :disabled="getCellInfo(employee.id, day.date)?.hasFormation"
                                 @click="handleCellClick(employee, day.date)"
                             >
                                 <span v-if="!getCellInfo(employee.id, day.date)?.halfLabel">
@@ -80,9 +80,7 @@
                             <button
                                 type="button"
                                 class="relative flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 bg-white"
-                                :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
                                 :style="getCellStyle(employee.id, day.date)"
-                                :disabled="isHolidayDate(day.date)"
                                 @click="handleCellClick(employee, day.date)"
                             >
                                 <span></span>
diff --git a/frontend/data/documentation-content.ts b/frontend/data/documentation-content.ts
index 6124ed8..2e81f51 100644
--- a/frontend/data/documentation-content.ts
+++ b/frontend/data/documentation-content.ts
@@ -387,7 +387,8 @@ export const documentationSections: DocSection[] = [
         requiredLevel: 'admin',
         blocks: [
           { type: 'paragraph', content: 'Le calendrier offre une vue d\'ensemble mensuelle des absences de tous les employés.' },
-          { type: 'list', content: 'Code couleur par type d\'absence\nDemi-journée : affichage en dégradé diagonal\nJournée complète : fond plein\nJours fériés : fond bleu clair\nFiltres par site et par employé\nNavigation par mois (précédent / suivant)' },
+          { type: 'list', content: 'Code couleur par type d\'absence\nDemi-journée : affichage en dégradé diagonal\nJournée complète : fond plein\nJours fériés : fond bleu clair (cliquable pour créer une absence)\nFiltres par site et par employé\nNavigation par mois (précédent / suivant)' },
+          { type: 'note', content: 'Les absences peuvent être créées sur les jours fériés. Quand une absence est posée sur un férié, elle remplace l\'affichage « Férié » dans la cellule.' },
         ],
       },
     ],
diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index 9c9a4b6..6ca5bdd 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -490,14 +490,15 @@ const hasFormationOn = (employeeId: number, date: string): boolean => {
     return cellFormationMap.value.has(`${employeeId}-${date}`)
 }
 
-// Jours fériés (interdit pour la création).
+// Jours fériés.
 const isHolidayDate = (date: string) => {
     return Boolean(publicHolidays.value[date])
 }
 
-// Renvoie l'absence effective pour une cellule (ou un "Férié").
+// Renvoie l'absence effective pour une cellule (ou un "Férié" si pas d'absence).
 const getCellAbsence = (employeeId: number, date: string) => {
-    if (isHolidayDate(date)) {
+    const absence = cellAbsenceMap.value.get(`${employeeId}-${date}`)
+    if (!absence && isHolidayDate(date)) {
         return {
             id: 0,
             code: 'Férié',
@@ -505,7 +506,6 @@ const getCellAbsence = (employeeId: number, date: string) => {
             textColor: '#0f172a'
         }
     }
-    const absence = cellAbsenceMap.value.get(`${employeeId}-${date}`)
     if (absence) return { ...absence, hasFormation: hasFormationOn(employeeId, date) }
     if (hasFormationOn(employeeId, date)) {
         return {
@@ -549,11 +549,6 @@ const getCellInfo = (employeeId: number, date: string) => {
 
 // Ouverture du drawer depuis une cellule.
 const openCreate = (employee: Employee, date: string) => {
-    if (isHolidayDate(date)) {
-        window.alert("Impossible de creer une absence un jour ferie.")
-        return
-    }
-
     const existing = absences.value.find((absence) => {
         const start = normalizeDate(absence.startDate)
         const end = normalizeDate(absence.endDate)
@@ -590,10 +585,6 @@ const openCreateFromToday = () => {
     form.typeId = ''
     const now = new Date()
     const today = toYmd(now.getFullYear(), now.getMonth(), now.getDate())
-    if (isHolidayDate(today)) {
-        window.alert("Impossible de creer une absence un jour ferie.")
-        return
-    }
     form.startDate = today
     form.endDate = today
     form.startHalf = 'AM'

From 9e411be3c3ab8aaa143ccf35424c67b88822d94b Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Fri, 17 Apr 2026 09:05:24 +0000
Subject: [PATCH 02/23] chore: bump version to v0.1.89

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index 7121b50..27d2c4d 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.88'
+    app.version: '0.1.89'

From 1fe7f2cddeef82c0c0846fe339bc13248193ec86 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 17 Apr 2026 11:47:14 +0200
Subject: [PATCH 03/23] =?UTF-8?q?feat=20:=20agence=20d'int=C3=A9rim=20sur?=
 =?UTF-8?q?=20les=20contrats=20INTERIM=20+=20renommage=20Types=20d'absence?=
 =?UTF-8?q?=20en=20Types=20de=20statut=20+=20colonne=20Absence=20en=20Stat?=
 =?UTF-8?q?ut?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nouvelle entité InterimAgency (table interim_agencies, API lecture seule)
- Sélecteur agence conditionnel dans les formulaires création employé et ajout contrat
- Affichage "Intérim (NomAgence)" sur la liste employés et l'historique contrat
- Date de fin obligatoire côté frontend pour CDD et INTERIM (aligné backend)
- Renommage "Types d'absence" → "Types de statut" (sidebar, page, titre)
- Renommage en-tête "Absence" → "Statut" sur les vues jour heures et conducteurs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md                                     |  1 +
 doc/functional-rules.md                       |  1 +
 .../driver-hours/DriverHoursDayView.vue       |  2 +-
 frontend/components/employees/ContractTab.vue | 21 +++++++-
 frontend/components/hours/HoursDayView.vue    |  2 +-
 frontend/composables/useEmployeeContract.ts   | 23 +++++++--
 frontend/composables/useEmployeeDetailPage.ts |  2 +-
 frontend/data/documentation-content.ts        |  6 +--
 frontend/layouts/default.vue                  |  2 +-
 frontend/pages/absence-types.vue              |  4 +-
 frontend/pages/employees/[id].vue             |  2 +
 frontend/pages/employees/index.vue            | 41 +++++++++++++--
 frontend/services/dto/employee.ts             |  4 ++
 frontend/services/employees.ts                |  8 ++-
 frontend/services/interim-agencies.ts         | 16 ++++++
 frontend/utils/contract.ts                    |  2 +-
 migrations/Version20260417120000.php          | 32 ++++++++++++
 src/Dto/Employees/ContractHistoryItem.php     |  4 ++
 src/Entity/Employee.php                       | 29 +++++++++++
 src/Entity/EmployeeContractPeriod.php         | 16 ++++++
 src/Entity/InterimAgency.php                  | 51 +++++++++++++++++++
 .../EmployeeContractChangeRequest.php         |  1 +
 .../EmployeeContractChangeRequestFactory.php  |  1 +
 .../EmployeeContractPeriodBuilder.php         |  3 ++
 .../EmployeeContractPeriodManager.php         | 26 ++++++++--
 ...EmployeeContractPeriodManagerInterface.php |  2 +
 src/State/EmployeeWriteProcessor.php          |  2 +
 27 files changed, 281 insertions(+), 23 deletions(-)
 create mode 100644 frontend/services/interim-agencies.ts
 create mode 100644 migrations/Version20260417120000.php
 create mode 100644 src/Entity/InterimAgency.php

diff --git a/CLAUDE.md b/CLAUDE.md
index abe8e70..a9aa367 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -30,6 +30,7 @@
 - Contracts: `trackingMode` (TIME=hours, PRESENCE=half-days), `weeklyHours`
 - Contract types: FORFAIT, THIRTY_FIVE_HOURS, THIRTY_NINE_HOURS, INTERIM, CUSTOM
 - Contract nature (per period): CDI, CDD, INTERIM
+- **Agence d'intérim** (`InterimAgency` entity, table `interim_agencies`): optionnelle sur `EmployeeContractPeriod` quand nature = INTERIM. Pas de CRUD UI — gérée en BDD. API lecture seule `GET /interim_agencies`. Affichée "Intérim (NomAgence)" sur la liste employés et l'historique contrat.
 - Employee contract history: `employee_contract_periods`, resolved by `EmployeeContractResolver`
 - **Planning jours travaillés** (`EmployeeContractPeriod.workDaysHours` : JSON `{iso_day: minutes}`) : obligatoire pour tout contrat TIME **hors 35h/39h/INTERIM** (ex. 4h, 25h, 28h). Somme = `weeklyHours × 60`. Utilisé par `HolidayVirtualHoursResolver` (crédit férié) et `WorkedHoursCreditPolicy` (crédit absence) pour ne créditer que les jours effectivement travaillés. Validation : `EmployeeContractPeriodValidator::assertWorkDaysHours`.
 - Absences: stored per day (auto-split), AM/PM/full day, clear corresponding hour slots
diff --git a/doc/functional-rules.md b/doc/functional-rules.md
index 7d8bbc8..e732e9f 100644
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -130,6 +130,7 @@ Documents complementaires:
   - pas de bonus 25%
   - pas de bonus 50%
   - pas de total récup
+  - agence d'intérim optionnelle (table `interim_agencies`): affichée sur la fiche employé et le détail contrat sous la forme "Intérim (NomAgence)"
 
 ## 6bis) Heures Conducteurs
 
diff --git a/frontend/components/driver-hours/DriverHoursDayView.vue b/frontend/components/driver-hours/DriverHoursDayView.vue
index ffcf5c2..4aebc0a 100644
--- a/frontend/components/driver-hours/DriverHoursDayView.vue
+++ b/frontend/components/driver-hours/DriverHoursDayView.vue
@@ -6,7 +6,7 @@
                 :style="{ gridTemplateColumns: dayGridCols }"
             >
                 <span>Nom</span>
-                <span class="pl-2">Absence</span>
+                <span class="pl-2">Statut</span>
                 <span class="pl-4">Heure de jour</span>
                 <span class="pl-2">Heure de nuit</span>
                 <span class="pl-2">Heure atelier</span>
diff --git a/frontend/components/employees/ContractTab.vue b/frontend/components/employees/ContractTab.vue
index 230bf7c..dfe2fbd 100644
--- a/frontend/components/employees/ContractTab.vue
+++ b/frontend/components/employees/ContractTab.vue
@@ -16,7 +16,7 @@
           :key="`${item.startDate}-${item.endDate ?? 'open'}-${item.contractId ?? item.contractName}`"
           class="grid grid-cols-4 border-b border-primary-500 px-6 py-3 text-md font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
         >
-          <p>{{ contractNatureLabel(item.contractNature) }}</p>
+          <p>{{ item.interimAgencyName ? `${contractNatureLabel(item.contractNature)} (${item.interimAgencyName})` : contractNatureLabel(item.contractNature) }}</p>
           <p>{{ contractHistoryLabel(item) }}</p>
           <p>{{ formatDate(item.startDate) }}</p>
           <p>{{ formatDate(item.endDate) }}</p>
@@ -221,6 +221,22 @@
           </select>
         </div>
 
+        <div v-if="createContractForm.contractNature === 'INTERIM'">
+          <label class="text-md font-semibold text-neutral-700" for="create-interim-agency">
+            Agence d'intérim
+          </label>
+          <select
+            id="create-interim-agency"
+            v-model="createContractForm.interimAgencyId"
+            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+          >
+            <option value="">Aucune</option>
+            <option v-for="agency in interimAgencies" :key="agency.id" :value="agency.id">
+              {{ agency.name }}
+            </option>
+          </select>
+        </div>
+
         <div>
           <label class="text-md font-semibold text-neutral-700" for="create-contract-id">
             Temps de travail <span class="text-red-600">*</span>
@@ -282,6 +298,7 @@
 <script setup lang="ts">
 import type { Contract } from '~/services/dto/contract'
 import type { ContractHistoryItem } from '~/services/dto/employee'
+import type { InterimAgency } from '~/services/interim-agencies'
 import WorkDaysHoursInput from '~/components/employees/WorkDaysHoursInput.vue'
 
 type SuspensionForm = {
@@ -310,6 +327,7 @@ type CreateContractForm = {
   endDate: string
   isDriver: boolean
   workDaysHours: Record<number, number> | null
+  interimAgencyId: number | ''
 }
 
 const props = defineProps<{
@@ -351,6 +369,7 @@ const props = defineProps<{
   onSubmitSuspension: (index: number) => void
   onAddSuspensionForm: () => void
   currentContractPeriodId?: number | null
+  interimAgencies: InterimAgency[]
 }>()
 
 const drawerTab = ref<'close' | 'suspend'>('close')
diff --git a/frontend/components/hours/HoursDayView.vue b/frontend/components/hours/HoursDayView.vue
index d3038be..da69e4f 100644
--- a/frontend/components/hours/HoursDayView.vue
+++ b/frontend/components/hours/HoursDayView.vue
@@ -6,7 +6,7 @@
                 :style="{ gridTemplateColumns: dayGridCols }"
             >
                 <span>Nom</span>
-                <span class="pl-2">Absence</span>
+                <span class="pl-2">Statut</span>
                 <span class="pl-4">Début matin</span>
                 <span class="pr-2">Fin matin</span>
                 <span class="pl-2">Début après-midi</span>
diff --git a/frontend/composables/useEmployeeContract.ts b/frontend/composables/useEmployeeContract.ts
index 098539f..5533e8e 100644
--- a/frontend/composables/useEmployeeContract.ts
+++ b/frontend/composables/useEmployeeContract.ts
@@ -4,6 +4,7 @@ import type { ContractHistoryItem, Employee } from '~/services/dto/employee'
 import { listContracts } from '~/services/contracts'
 import { updateEmployee } from '~/services/employees'
 import { createSuspension, updateSuspension } from '~/services/contractSuspensions'
+import { listInterimAgencies, type InterimAgency } from '~/services/interim-agencies'
 import { formatNullableYmdToFr, getTodayYmd, shiftYmd } from '~/utils/date'
 import { contractNatureLabel, formatWorkDaysHoursSummary, isContractNature, requiresContractEndDate, requiresWorkDaysHours, showsContractEndDate } from '~/utils/contract'
 
@@ -17,6 +18,7 @@ type SuspensionForm = {
 export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmployee: () => Promise<void>) => {
   const toast = useToast()
   const contracts = ref<Contract[]>([])
+  const interimAgencies = ref<InterimAgency[]>([])
   const isContractDrawerOpen = ref(false)
   const isContractSubmitting = ref(false)
   const isCreateContractDrawerOpen = ref(false)
@@ -46,7 +48,8 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     startDate: '',
     endDate: '',
     isDriver: false,
-    workDaysHours: null as Record<number, number> | null
+    workDaysHours: null as Record<number, number> | null,
+    interimAgencyId: '' as number | ''
   })
 
   const createValidationTouched = reactive({
@@ -207,6 +210,7 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     createContractForm.endDate = ''
     createContractForm.isDriver = false
     createContractForm.workDaysHours = null
+    createContractForm.interimAgencyId = ''
     createContractForm.startDate = editableContractPeriod.value?.endDate
       ? (shiftYmd(editableContractPeriod.value.endDate, 1) ?? editableContractPeriod.value.endDate)
       : getTodayYmd()
@@ -283,7 +287,8 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
         contractStartDate: createContractForm.startDate,
         contractEndDate: createContractForm.endDate || null,
         isDriverInput: createContractForm.isDriver,
-        workDaysHoursInput: requiresCreateWorkDaysHours.value ? createContractForm.workDaysHours : null
+        workDaysHoursInput: requiresCreateWorkDaysHours.value ? createContractForm.workDaysHours : null,
+        interimAgencyId: createContractForm.contractNature === 'INTERIM' && createContractForm.interimAgencyId !== '' ? Number(createContractForm.interimAgencyId) : null
       })
       isCreateContractDrawerOpen.value = false
       await reloadEmployee()
@@ -335,6 +340,16 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     contracts.value = await listContracts()
   }
 
+  const loadInterimAgencies = async () => {
+    interimAgencies.value = await listInterimAgencies()
+  }
+
+  watch(() => createContractForm.contractNature, (nature) => {
+    if (nature !== 'INTERIM') {
+      createContractForm.interimAgencyId = ''
+    }
+  })
+
   watch(showsCreateContractEndDate, (shows) => {
     if (!shows) {
       createContractForm.endDate = ''
@@ -386,6 +401,8 @@ export const useEmployeeContract = (employee: Ref<Employee | null>, reloadEmploy
     submitSuspension,
     addSuspensionForm,
     currentActiveContractPeriodId,
-    loadContracts
+    interimAgencies,
+    loadContracts,
+    loadInterimAgencies
   }
 }
diff --git a/frontend/composables/useEmployeeDetailPage.ts b/frontend/composables/useEmployeeDetailPage.ts
index 3f3accb..04e4309 100644
--- a/frontend/composables/useEmployeeDetailPage.ts
+++ b/frontend/composables/useEmployeeDetailPage.ts
@@ -86,7 +86,7 @@ export const useEmployeeDetailPage = () => {
   })
 
   onMounted(async () => {
-    await contract.loadContracts()
+    await Promise.all([contract.loadContracts(), contract.loadInterimAgencies()])
     await loadEmployee()
   })
 
diff --git a/frontend/data/documentation-content.ts b/frontend/data/documentation-content.ts
index 2e81f51..2053a72 100644
--- a/frontend/data/documentation-content.ts
+++ b/frontend/data/documentation-content.ts
@@ -207,10 +207,10 @@ export const documentationSections: DocSection[] = [
       },
       {
         id: 'gestion-types-absence',
-        title: 'Gestion des types d\'absence',
+        title: 'Gestion des types de statut',
         requiredLevel: 'admin',
         blocks: [
-          { type: 'paragraph', content: 'Les types d\'absence définissent les catégories disponibles lors de la pose d\'une absence.' },
+          { type: 'paragraph', content: 'Les types de statut définissent les catégories disponibles lors de la pose d\'une absence.' },
           { type: 'list', content: 'Code : identifiant court (max 10 caractères), ex: C, M, AT\nLibellé : nom affiché, ex: Congé, Maladie, Accident du travail\nCouleur : code couleur pour le calendrier et la vue jour\nOption "Compté comme travaillé" : si activé, l\'absence crédite des heures en mode TIME' },
           { type: 'note', content: 'L\'option "Compté comme travaillé" impacte le calcul des heures supplémentaires. En mode TIME, les minutes sont créditées selon le contrat. En mode PRESENCE, aucun crédit n\'est appliqué.' },
         ],
@@ -258,7 +258,7 @@ export const documentationSections: DocSection[] = [
         requiredLevel: 'admin',
         blocks: [
           { type: 'paragraph', content: 'La création d\'un employé se fait via le drawer d\'ajout.' },
-          { type: 'list', content: 'Champs : prénom, nom, site\nNature du contrat : CDI, CDD ou INTERIM\nType de contrat / temps de travail (Forfait, 35h, 39h, etc.)\nDate de début (obligatoire)\nDate de fin (obligatoire pour CDD et INTERIM)' },
+          { type: 'list', content: 'Champs : prénom, nom, site\nNature du contrat : CDI, CDD ou INTERIM\nAgence d\'intérim (visible uniquement pour INTERIM, optionnel)\nType de contrat / temps de travail (Forfait, 35h, 39h, etc.)\nDate de début (obligatoire)\nDate de fin (obligatoire pour CDD et INTERIM)' },
         ],
       },
       {
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 8747e0f..176d651 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -82,7 +82,7 @@
                             : ''"
                         >
                             <Icon name="mdi:umbrella-beach-outline" size="24"/>
-                            <p>Types d'absence</p>
+                            <p>Types de statut</p>
                         </NuxtLink>
                         <NuxtLink
                             to="/users"
diff --git a/frontend/pages/absence-types.vue b/frontend/pages/absence-types.vue
index eb09d78..6523e24 100644
--- a/frontend/pages/absence-types.vue
+++ b/frontend/pages/absence-types.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-full flex flex-col overflow-hidden">
     <div class="flex items-center justify-between pb-6">
-      <h1 class="text-4xl font-bold text-primary-500">Types d'absence</h1>
+      <h1 class="text-4xl font-bold text-primary-500">Types de statut</h1>
       <button
         type="button"
         class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
@@ -164,7 +164,7 @@ import type { AbsenceType } from '~/services/dto/absence-type'
 import { createAbsenceType, deleteAbsenceType, listAbsenceTypes, updateAbsenceType } from '~/services/absence-types'
 
 useHead({
-    title: 'Types d\'absences'
+    title: 'Types de statut'
 })
 
 const isDrawerOpen = ref(false)
diff --git a/frontend/pages/employees/[id].vue b/frontend/pages/employees/[id].vue
index b6765cb..898f1a4 100644
--- a/frontend/pages/employees/[id].vue
+++ b/frontend/pages/employees/[id].vue
@@ -148,6 +148,7 @@
                     :on-submit-suspension="submitSuspension"
                     :on-add-suspension-form="addSuspensionForm"
                     :current-contract-period-id="currentActiveContractPeriodId"
+                    :interim-agencies="interimAgencies"
                 />
                 <div v-else-if="showLeaveTab && activeTab === 'leave'" class="h-full">
                     <div v-if="isLeaveLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
@@ -295,6 +296,7 @@ const {
     submitSuspension,
     addSuspensionForm,
     currentActiveContractPeriodId,
+    interimAgencies,
     isLeaveLoading,
     isRttLoading,
     mileageAllowances,
diff --git a/frontend/pages/employees/index.vue b/frontend/pages/employees/index.vue
index 2b883e0..5297c1a 100644
--- a/frontend/pages/employees/index.vue
+++ b/frontend/pages/employees/index.vue
@@ -72,7 +72,7 @@
                     class="absolute inset-0 flex items-center justify-center bg-primary-500 p-4 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                     <div class="w-full rounded-md bg-white/15 p-4 text-sm">
                         <p class="text-base font-semibold">{{ employee.lastName }} {{ employee.firstName }}</p>
-                        <p><strong>Type:</strong> {{ contractNatureLabel(employee.currentContractNature) }}</p>
+                        <p><strong>Type:</strong> {{ employee.currentInterimAgencyName ? `${contractNatureLabel(employee.currentContractNature)} (${employee.currentInterimAgencyName})` : contractNatureLabel(employee.currentContractNature) }}</p>
                         <p><strong>Temps de travail:</strong> {{ employee.contract?.name ?? '-' }}</p>
                         <p><strong>Site:</strong> {{ employee.site?.name ?? '-' }}</p>
                         <p><strong>Date d'entrée :</strong> {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
@@ -147,6 +147,21 @@
                             Le type de contrat est obligatoire.
                         </p>
                     </div>
+                    <div v-if="form.contractNature === 'INTERIM'">
+                        <label class="text-md font-semibold text-neutral-700" for="interim-agency">
+                            Agence d'intérim
+                        </label>
+                        <select
+                            id="interim-agency"
+                            v-model="form.interimAgencyId"
+                            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                        >
+                            <option value="">Aucune</option>
+                            <option v-for="agency in interimAgencies" :key="agency.id" :value="agency.id">
+                                {{ agency.name }}
+                            </option>
+                        </select>
+                    </div>
                     <div>
                         <label class="text-md font-semibold text-neutral-700" for="contract">
                             Temps de travail <span class="text-red-600">*</span>
@@ -191,7 +206,7 @@
                             :class="contractEndDateFieldClass"
                         />
                         <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
-                            La date de fin est obligatoire pour un CDD.
+                            La date de fin est obligatoire pour un CDD ou un Intérim.
                         </p>
                     </div>
                     <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">
@@ -246,6 +261,7 @@ import type {Site} from '~/services/dto/site'
 import {listContracts} from '~/services/contracts'
 import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
 import {listSites} from '~/services/sites'
+import {listInterimAgencies, type InterimAgency} from '~/services/interim-agencies'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 import SalaryRecapDrawer from '~/components/SalaryRecapDrawer.vue'
 import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
@@ -269,6 +285,7 @@ const drawerTitle = computed(() =>
 const employees = ref<Employee[]>([])
 const sites = ref<Site[]>([])
 const contracts = ref<Contract[]>([])
+const interimAgencies = ref<InterimAgency[]>([])
 const employeeFilter = ref('')
 const contractStatusFilter = ref<'active' | 'inactive' | 'all'>('active')
 const selectedSiteIds = ref<number[]>([])
@@ -300,7 +317,8 @@ const form = reactive({
     contractStartDate: '',
     contractEndDate: '',
     isDriver: false,
-    workDaysHours: null as Record<number, number> | null
+    workDaysHours: null as Record<number, number> | null,
+    interimAgencyId: '' as number | ''
 })
 
 const validationTouched = reactive({
@@ -451,8 +469,12 @@ const loadContracts = async () => {
     contracts.value = await listContracts()
 }
 
+const loadInterimAgencies = async () => {
+    interimAgencies.value = await listInterimAgencies()
+}
+
 onMounted(async () => {
-    await Promise.all([loadEmployees(), loadSites(), loadContracts()])
+    await Promise.all([loadEmployees(), loadSites(), loadContracts(), loadInterimAgencies()])
     if (form.contractStartDate === '') {
         form.contractStartDate = new Date().toISOString().slice(0, 10)
     }
@@ -503,7 +525,8 @@ const handleSubmit = async () => {
                 contractStartDate: form.contractStartDate,
                 contractEndDate: form.contractEndDate || null,
                 isDriverInput: form.isDriver,
-                workDaysHoursInput: requiresSchedule.value ? form.workDaysHours : null
+                workDaysHoursInput: requiresSchedule.value ? form.workDaysHours : null,
+                interimAgencyId: form.contractNature === 'INTERIM' && form.interimAgencyId !== '' ? Number(form.interimAgencyId) : null
             })
         }
 
@@ -516,6 +539,7 @@ const handleSubmit = async () => {
         form.contractEndDate = ''
         form.isDriver = false
         form.workDaysHours = null
+        form.interimAgencyId = ''
         editingEmployee.value = null
         isDrawerOpen.value = false
         await loadEmployees()
@@ -542,6 +566,12 @@ watch(showsContractEndDateComputed, (shows) => {
     }
 })
 
+watch(() => form.contractNature, (nature) => {
+    if (nature !== 'INTERIM') {
+        form.interimAgencyId = ''
+    }
+})
+
 watch(requiresSchedule, (required) => {
     if (!required) {
         form.workDaysHours = null
@@ -567,6 +597,7 @@ const openCreate = () => {
     form.contractEndDate = ''
     form.isDriver = false
     form.workDaysHours = null
+    form.interimAgencyId = ''
     isDrawerOpen.value = true
 }
 
diff --git a/frontend/services/dto/employee.ts b/frontend/services/dto/employee.ts
index 6ad156c..b7764b2 100644
--- a/frontend/services/dto/employee.ts
+++ b/frontend/services/dto/employee.ts
@@ -20,6 +20,8 @@ export type ContractHistoryItem = {
   suspensions?: ContractSuspension[]
   isDriver?: boolean
   workDaysHours?: Record<number, number> | null
+  interimAgencyId?: number | null
+  interimAgencyName?: string | null
 }
 
 export type Employee = {
@@ -37,4 +39,6 @@ export type Employee = {
   displayOrder?: number
   entryDate?: string | null
   currentSuspensions?: ContractSuspension[]
+  currentInterimAgencyId?: number | null
+  currentInterimAgencyName?: string | null
 }
diff --git a/frontend/services/employees.ts b/frontend/services/employees.ts
index ad32ca5..6587b7c 100644
--- a/frontend/services/employees.ts
+++ b/frontend/services/employees.ts
@@ -36,6 +36,7 @@ export const createEmployee = async (payload: {
   contractEndDate?: string | null
   isDriverInput?: boolean
   workDaysHoursInput?: Record<number, number> | null
+  interimAgencyId?: number | null
 }) => {
   const api = useApi()
   return api.post<Employee>('/employees', {
@@ -47,7 +48,8 @@ export const createEmployee = async (payload: {
     contractStartDate: payload.contractStartDate,
     contractEndDate: payload.contractEndDate ?? null,
     isDriverInput: payload.isDriverInput ?? false,
-    workDaysHoursInput: payload.workDaysHoursInput ?? null
+    workDaysHoursInput: payload.workDaysHoursInput ?? null,
+    interimAgencyId: payload.interimAgencyId ?? null
   }, {
     toastSuccessKey: 'success.employee.create',
     toastErrorKey: 'errors.employee.create'
@@ -69,6 +71,7 @@ export const updateEmployee = async (
     displayOrder?: number
     isDriverInput?: boolean
     workDaysHoursInput?: Record<number, number> | null
+    interimAgencyId?: number | null
   }
 ) => {
   const api = useApi()
@@ -103,6 +106,9 @@ export const updateEmployee = async (
   if (payload.workDaysHoursInput !== undefined) {
     body.workDaysHoursInput = payload.workDaysHoursInput
   }
+  if (payload.interimAgencyId !== undefined) {
+    body.interimAgencyId = payload.interimAgencyId
+  }
 
   return api.patch<Employee>(`/employees/${id}`, body, {
     toastSuccessKey: 'success.employee.update',
diff --git a/frontend/services/interim-agencies.ts b/frontend/services/interim-agencies.ts
new file mode 100644
index 0000000..f4bc102
--- /dev/null
+++ b/frontend/services/interim-agencies.ts
@@ -0,0 +1,16 @@
+import { extractItems } from '~/utils/api'
+
+export type InterimAgency = {
+    id: number
+    name: string
+}
+
+export const listInterimAgencies = async (): Promise<InterimAgency[]> => {
+    const api = useApi()
+    const data = await api.get<InterimAgency[] | { 'hydra:member'?: InterimAgency[] }>(
+        '/interim_agencies',
+        {},
+        { toast: false }
+    )
+    return extractItems<InterimAgency>(data)
+}
diff --git a/frontend/utils/contract.ts b/frontend/utils/contract.ts
index 95b5ced..f3c70b1 100644
--- a/frontend/utils/contract.ts
+++ b/frontend/utils/contract.ts
@@ -13,7 +13,7 @@ export const showsContractEndDate = (nature: ContractNature) => {
 }
 
 export const requiresContractEndDate = (nature: ContractNature) => {
-  return nature === 'CDD'
+  return nature === 'CDD' || nature === 'INTERIM'
 }
 
 export const isContractNature = (value: string): value is ContractNature => {
diff --git a/migrations/Version20260417120000.php b/migrations/Version20260417120000.php
new file mode 100644
index 0000000..52f47aa
--- /dev/null
+++ b/migrations/Version20260417120000.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260417120000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create interim_agencies table and add interim_agency_id to employee_contract_periods';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE interim_agencies (id SERIAL PRIMARY KEY, name VARCHAR(150) NOT NULL UNIQUE)');
+        $this->addSql('ALTER TABLE employee_contract_periods ADD interim_agency_id INT DEFAULT NULL');
+        $this->addSql('ALTER TABLE employee_contract_periods ADD CONSTRAINT fk_ecp_interim_agency FOREIGN KEY (interim_agency_id) REFERENCES interim_agencies (id) ON DELETE SET NULL');
+        $this->addSql('CREATE INDEX idx_ecp_interim_agency ON employee_contract_periods (interim_agency_id)');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employee_contract_periods DROP CONSTRAINT IF EXISTS fk_ecp_interim_agency');
+        $this->addSql('DROP INDEX IF EXISTS idx_ecp_interim_agency');
+        $this->addSql('ALTER TABLE employee_contract_periods DROP COLUMN interim_agency_id');
+        $this->addSql('DROP TABLE interim_agencies');
+    }
+}
diff --git a/src/Dto/Employees/ContractHistoryItem.php b/src/Dto/Employees/ContractHistoryItem.php
index 07062eb..bd66078 100644
--- a/src/Dto/Employees/ContractHistoryItem.php
+++ b/src/Dto/Employees/ContractHistoryItem.php
@@ -34,5 +34,9 @@ final class ContractHistoryItem
          */
         #[Groups(['employee:read'])]
         public ?array $workDaysHours = null,
+        #[Groups(['employee:read'])]
+        public ?int $interimAgencyId = null,
+        #[Groups(['employee:read'])]
+        public ?string $interimAgencyName = null,
     ) {}
 }
diff --git a/src/Entity/Employee.php b/src/Entity/Employee.php
index 7e08e71..7b79a67 100644
--- a/src/Entity/Employee.php
+++ b/src/Entity/Employee.php
@@ -98,6 +98,9 @@ class Employee
     #[Groups(['employee:write'])]
     private ?array $workDaysHoursInput = null;
 
+    #[Groups(['employee:write'])]
+    private ?int $interimAgencyId = null;
+
     public function __construct()
     {
         $this->createdAt       = new DateTimeImmutable();
@@ -295,6 +298,30 @@ class Employee
         return $this;
     }
 
+    public function getInterimAgencyId(): ?int
+    {
+        return $this->interimAgencyId;
+    }
+
+    public function setInterimAgencyId(?int $interimAgencyId): self
+    {
+        $this->interimAgencyId = $interimAgencyId;
+
+        return $this;
+    }
+
+    #[Groups(['employee:read'])]
+    public function getCurrentInterimAgencyId(): ?int
+    {
+        return $this->resolveCurrentContractPeriod()?->getInterimAgency()?->getId();
+    }
+
+    #[Groups(['employee:read'])]
+    public function getCurrentInterimAgencyName(): ?string
+    {
+        return $this->resolveCurrentContractPeriod()?->getInterimAgency()?->getName();
+    }
+
     #[Groups(['employee:read'])]
     public function getHasActiveContract(): bool
     {
@@ -393,6 +420,8 @@ class Employee
                     suspensions: $suspensionData,
                     isDriver: $period->getIsDriver(),
                     workDaysHours: $period->getWorkDaysHours(),
+                    interimAgencyId: $period->getInterimAgency()?->getId(),
+                    interimAgencyName: $period->getInterimAgency()?->getName(),
                 );
             },
             $periods
diff --git a/src/Entity/EmployeeContractPeriod.php b/src/Entity/EmployeeContractPeriod.php
index 941a47c..b89e2cb 100644
--- a/src/Entity/EmployeeContractPeriod.php
+++ b/src/Entity/EmployeeContractPeriod.php
@@ -55,6 +55,10 @@ class EmployeeContractPeriod
     #[ORM\Column(type: 'json', nullable: true)]
     private ?array $workDaysHours = null;
 
+    #[ORM\ManyToOne(targetEntity: InterimAgency::class)]
+    #[ORM\JoinColumn(nullable: true)]
+    private ?InterimAgency $interimAgency = null;
+
     #[ORM\Column(type: 'text', nullable: true)]
     private ?string $comment = null;
 
@@ -204,6 +208,18 @@ class EmployeeContractPeriod
         return $this;
     }
 
+    public function getInterimAgency(): ?InterimAgency
+    {
+        return $this->interimAgency;
+    }
+
+    public function setInterimAgency(?InterimAgency $interimAgency): self
+    {
+        $this->interimAgency = $interimAgency;
+
+        return $this;
+    }
+
     /**
      * @return Collection<int, ContractSuspension>
      */
diff --git a/src/Entity/InterimAgency.php b/src/Entity/InterimAgency.php
new file mode 100644
index 0000000..a73278b
--- /dev/null
+++ b/src/Entity/InterimAgency.php
@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\GetCollection;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(
+    operations: [
+        new GetCollection(),
+    ],
+    normalizationContext: ['groups' => ['interim_agency:read']],
+    paginationEnabled: false,
+    security: "is_granted('ROLE_USER')",
+    order: ['name' => 'ASC'],
+)]
+#[ORM\Entity]
+#[ORM\Table(name: 'interim_agencies')]
+class InterimAgency
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column(type: 'integer')]
+    #[Groups(['interim_agency:read', 'employee:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(type: 'string', length: 150, unique: true)]
+    #[Groups(['interim_agency:read', 'employee:read'])]
+    private string $name = '';
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function setName(string $name): self
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+}
diff --git a/src/Service/Contracts/EmployeeContractChangeRequest.php b/src/Service/Contracts/EmployeeContractChangeRequest.php
index fadf5c0..a3c4fc5 100644
--- a/src/Service/Contracts/EmployeeContractChangeRequest.php
+++ b/src/Service/Contracts/EmployeeContractChangeRequest.php
@@ -20,6 +20,7 @@ final readonly class EmployeeContractChangeRequest
         public ?string $contractComment,
         public ?bool $isDriver = null,
         public ?array $workDaysHours = null,
+        public ?int $interimAgencyId = null,
     ) {}
 
     public function hasPeriodChangeRequest(): bool
diff --git a/src/Service/Contracts/EmployeeContractChangeRequestFactory.php b/src/Service/Contracts/EmployeeContractChangeRequestFactory.php
index 7a3e733..a596a97 100644
--- a/src/Service/Contracts/EmployeeContractChangeRequestFactory.php
+++ b/src/Service/Contracts/EmployeeContractChangeRequestFactory.php
@@ -21,6 +21,7 @@ final class EmployeeContractChangeRequestFactory
             contractComment: $employee->getContractComment(),
             isDriver: $employee->getIsDriverInput(),
             workDaysHours: $employee->getWorkDaysHoursInput(),
+            interimAgencyId: $employee->getInterimAgencyId(),
         );
     }
 
diff --git a/src/Service/Contracts/EmployeeContractPeriodBuilder.php b/src/Service/Contracts/EmployeeContractPeriodBuilder.php
index 16e34b6..cc017a7 100644
--- a/src/Service/Contracts/EmployeeContractPeriodBuilder.php
+++ b/src/Service/Contracts/EmployeeContractPeriodBuilder.php
@@ -7,6 +7,7 @@ namespace App\Service\Contracts;
 use App\Entity\Contract;
 use App\Entity\Employee;
 use App\Entity\EmployeeContractPeriod;
+use App\Entity\InterimAgency;
 use App\Enum\ContractNature;
 use DateTimeImmutable;
 
@@ -23,6 +24,7 @@ final class EmployeeContractPeriodBuilder
         ContractNature $nature,
         bool $isDriver = false,
         ?array $workDaysHours = null,
+        ?InterimAgency $interimAgency = null,
     ): EmployeeContractPeriod {
         return new EmployeeContractPeriod()
             ->setEmployee($employee)
@@ -32,6 +34,7 @@ final class EmployeeContractPeriodBuilder
             ->setContractNature($nature)
             ->setIsDriver($isDriver)
             ->setWorkDaysHours($workDaysHours)
+            ->setInterimAgency($interimAgency)
         ;
     }
 }
diff --git a/src/Service/Contracts/EmployeeContractPeriodManager.php b/src/Service/Contracts/EmployeeContractPeriodManager.php
index 473f669..ece7f1f 100644
--- a/src/Service/Contracts/EmployeeContractPeriodManager.php
+++ b/src/Service/Contracts/EmployeeContractPeriodManager.php
@@ -7,6 +7,7 @@ namespace App\Service\Contracts;
 use App\Entity\Contract;
 use App\Entity\Employee;
 use App\Entity\EmployeeContractPeriod;
+use App\Entity\InterimAgency;
 use App\Enum\ContractNature;
 use App\Repository\EmployeeContractPeriodRepository;
 use DateTimeImmutable;
@@ -30,6 +31,7 @@ final readonly class EmployeeContractPeriodManager implements EmployeeContractPe
         ContractNature $nature,
         bool $isDriver = false,
         ?array $workDaysHours = null,
+        ?int $interimAgencyId = null,
     ): void {
         $this->periodValidator->assertPeriodDates($startDate, $endDate, $nature);
         $this->periodValidator->assertWorkDaysHours($contract, $nature, $workDaysHours);
@@ -39,7 +41,8 @@ final readonly class EmployeeContractPeriodManager implements EmployeeContractPe
             return;
         }
 
-        $this->persistNewPeriod($employee, $contract, $startDate, $endDate, $nature, $isDriver, $workDaysHours);
+        $interimAgency = $this->resolveInterimAgency($interimAgencyId);
+        $this->persistNewPeriod($employee, $contract, $startDate, $endDate, $nature, $isDriver, $workDaysHours, $interimAgency);
         $this->entityManager->flush();
     }
 
@@ -78,6 +81,7 @@ final readonly class EmployeeContractPeriodManager implements EmployeeContractPe
         ?EmployeeContractPeriod $todayPeriod,
         bool $isDriver = false,
         ?array $workDaysHours = null,
+        ?int $interimAgencyId = null,
     ): void {
         $this->periodValidator->assertPeriodDates($startDate, $endDate, $nature);
         $this->periodValidator->assertWorkDaysHours($contract, $nature, $workDaysHours);
@@ -90,7 +94,8 @@ final readonly class EmployeeContractPeriodManager implements EmployeeContractPe
             }
         }
 
-        $this->persistNewPeriod($employee, $contract, $startDate, $endDate, $nature, $isDriver, $workDaysHours);
+        $interimAgency = $this->resolveInterimAgency($interimAgencyId);
+        $this->persistNewPeriod($employee, $contract, $startDate, $endDate, $nature, $isDriver, $workDaysHours, $interimAgency);
         $this->entityManager->flush();
     }
 
@@ -105,8 +110,23 @@ final readonly class EmployeeContractPeriodManager implements EmployeeContractPe
         ContractNature $nature,
         bool $isDriver = false,
         ?array $workDaysHours = null,
+        ?InterimAgency $interimAgency = null,
     ): void {
-        $period = $this->periodBuilder->build($employee, $contract, $startDate, $endDate, $nature, $isDriver, $workDaysHours);
+        $period = $this->periodBuilder->build($employee, $contract, $startDate, $endDate, $nature, $isDriver, $workDaysHours, $interimAgency);
         $this->entityManager->persist($period);
     }
+
+    private function resolveInterimAgency(?int $id): ?InterimAgency
+    {
+        if (null === $id) {
+            return null;
+        }
+
+        $agency = $this->entityManager->find(InterimAgency::class, $id);
+        if (null === $agency) {
+            throw new UnprocessableEntityHttpException(sprintf('Interim agency with id %d not found.', $id));
+        }
+
+        return $agency;
+    }
 }
diff --git a/src/Service/Contracts/EmployeeContractPeriodManagerInterface.php b/src/Service/Contracts/EmployeeContractPeriodManagerInterface.php
index 8103ed5..cb24c4b 100644
--- a/src/Service/Contracts/EmployeeContractPeriodManagerInterface.php
+++ b/src/Service/Contracts/EmployeeContractPeriodManagerInterface.php
@@ -23,6 +23,7 @@ interface EmployeeContractPeriodManagerInterface
         ContractNature $nature,
         bool $isDriver = false,
         ?array $workDaysHours = null,
+        ?int $interimAgencyId = null,
     ): void;
 
     public function closeCurrentPeriod(
@@ -45,5 +46,6 @@ interface EmployeeContractPeriodManagerInterface
         ?EmployeeContractPeriod $todayPeriod,
         bool $isDriver = false,
         ?array $workDaysHours = null,
+        ?int $interimAgencyId = null,
     ): void;
 }
diff --git a/src/State/EmployeeWriteProcessor.php b/src/State/EmployeeWriteProcessor.php
index 5ec3f42..a91d61a 100644
--- a/src/State/EmployeeWriteProcessor.php
+++ b/src/State/EmployeeWriteProcessor.php
@@ -70,6 +70,7 @@ final readonly class EmployeeWriteProcessor implements ProcessorInterface
                 nature: $nature,
                 isDriver: $changeRequest->isDriver ?? false,
                 workDaysHours: $changeRequest->workDaysHours,
+                interimAgencyId: $changeRequest->interimAgencyId,
             );
 
             $data->setEntryDate($startDate);
@@ -140,6 +141,7 @@ final readonly class EmployeeWriteProcessor implements ProcessorInterface
             todayPeriod: $effectivePeriod,
             isDriver: $changeRequest->isDriver ?? false,
             workDaysHours: $changeRequest->workDaysHours,
+            interimAgencyId: $changeRequest->interimAgencyId,
         );
 
         return $result;

From 2f25a3cd528f6f906b2d4f2a060bb6c4f3e64033 Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Fri, 17 Apr 2026 09:47:42 +0000
Subject: [PATCH 04/23] chore: bump version to v0.1.90

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index 27d2c4d..cea1308 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.89'
+    app.version: '0.1.90'

From ff7566d4cdefbf0c8b1fd981e5d0f298928cdc71 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 17 Apr 2026 16:57:58 +0200
Subject: [PATCH 05/23] =?UTF-8?q?feat=20:=20export=20PDF=20heures=20group?=
 =?UTF-8?q?=C3=A9=20depuis=20la=20liste=20employ=C3=A9s=20+=20memory=5Flim?=
 =?UTF-8?q?it=20256M?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nouveau endpoint GET /yearly-hours/print-all (admin, par mois uniquement)
- Service YearlyHoursExportBuilder extrait du provider existant (logique partagée)
- EmployeeYearlyHoursPrintProvider refactorisé pour utiliser le builder
- Template print-all.html.twig avec saut de page entre chaque employé
- Drawer BulkYearlyHoursDrawer avec loader "Génération en cours..."
- Bouton "Export heures" ajouté sur la page liste employés
- PHP memory_limit passé de 128M à 256M dans php.ini (nécessaire pour Dompdf multi-employés)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docker/php/config/php.ini                     |   5 +-
 frontend/components/BulkYearlyHoursDrawer.vue | 108 +++++
 frontend/pages/employees/index.vue            |  27 ++
 .../EmployeeYearlyHoursBulkPrint.php          |  24 +
 .../WorkHours/YearlyHoursExportBuilder.php    | 449 ++++++++++++++++++
 .../EmployeeYearlyHoursBulkPrintProvider.php  |  86 ++++
 .../EmployeeYearlyHoursPrintProvider.php      | 401 +---------------
 .../employee-yearly-hours/print-all.html.twig | 271 +++++++++++
 8 files changed, 974 insertions(+), 397 deletions(-)
 create mode 100644 frontend/components/BulkYearlyHoursDrawer.vue
 create mode 100644 src/ApiResource/EmployeeYearlyHoursBulkPrint.php
 create mode 100644 src/Service/WorkHours/YearlyHoursExportBuilder.php
 create mode 100644 src/State/EmployeeYearlyHoursBulkPrintProvider.php
 create mode 100644 templates/employee-yearly-hours/print-all.html.twig

diff --git a/docker/php/config/php.ini b/docker/php/config/php.ini
index cad41f0..1b4c2bd 100644
--- a/docker/php/config/php.ini
+++ b/docker/php/config/php.ini
@@ -1,4 +1,7 @@
 [Date]
 ; Defines the default timezone used by the date functions
 ; http://php.net/date.timezone
-date.timezone = Europe/Paris
\ No newline at end of file
+date.timezone = Europe/Paris
+
+[PHP]
+memory_limit = 256M
diff --git a/frontend/components/BulkYearlyHoursDrawer.vue b/frontend/components/BulkYearlyHoursDrawer.vue
new file mode 100644
index 0000000..264e2ae
--- /dev/null
+++ b/frontend/components/BulkYearlyHoursDrawer.vue
@@ -0,0 +1,108 @@
+<template>
+    <AppDrawer v-model="drawerOpen" title="Export heures (tous les employés)">
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="bulk-yearly-hours-year">
+                    Année <span class="text-red-600">*</span>
+                </label>
+                <select
+                    id="bulk-yearly-hours-year"
+                    v-model="selectedYear"
+                    :class="selectFieldClass"
+                >
+                    <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
+                </select>
+            </div>
+
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="bulk-yearly-hours-month">
+                    Mois <span class="text-red-600">*</span>
+                </label>
+                <select
+                    id="bulk-yearly-hours-month"
+                    v-model="selectedMonth"
+                    :class="selectFieldClass"
+                >
+                    <option value="" disabled>Sélectionner un mois</option>
+                    <option v-for="m in months" :key="m.value" :value="m.value">{{ m.label }}</option>
+                </select>
+            </div>
+
+            <div class="flex justify-center pt-2">
+                <button
+                    type="submit"
+                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                    :disabled="isLoading || selectedMonth === ''"
+                >
+                    <template v-if="isLoading">
+                        Génération en cours...
+                    </template>
+                    <template v-else>
+                        Imprimer
+                    </template>
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import AppDrawer from '~/components/AppDrawer.vue'
+
+const props = defineProps<{
+    modelValue: boolean
+    isLoading?: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void
+    (event: 'submit', payload: { year: number; month: number | null }): void
+}>()
+
+const drawerOpen = computed({
+    get: () => props.modelValue,
+    set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const currentYear = new Date().getFullYear()
+const years = Array.from({ length: 6 }, (_, i) => currentYear - i)
+const months = [
+    { value: 1, label: 'Janvier' },
+    { value: 2, label: 'Février' },
+    { value: 3, label: 'Mars' },
+    { value: 4, label: 'Avril' },
+    { value: 5, label: 'Mai' },
+    { value: 6, label: 'Juin' },
+    { value: 7, label: 'Juillet' },
+    { value: 8, label: 'Août' },
+    { value: 9, label: 'Septembre' },
+    { value: 10, label: 'Octobre' },
+    { value: 11, label: 'Novembre' },
+    { value: 12, label: 'Décembre' }
+]
+const selectedYear = ref(currentYear)
+const currentMonth = new Date().getMonth() + 1
+const selectedMonth = ref<number | ''>(currentMonth)
+
+const baseInputClass = 'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
+const selectFieldClass = computed(() => `${baseInputClass} border-neutral-300`)
+
+const handleSubmit = () => {
+    if (selectedMonth.value === '') return
+    emit('submit', {
+        year: selectedYear.value,
+        month: selectedMonth.value
+    })
+}
+
+watch(
+    () => props.modelValue,
+    (isOpen) => {
+        if (!isOpen) {
+            selectedYear.value = currentYear
+            selectedMonth.value = currentMonth
+        }
+    }
+)
+</script>
diff --git a/frontend/pages/employees/index.vue b/frontend/pages/employees/index.vue
index 5297c1a..6f09464 100644
--- a/frontend/pages/employees/index.vue
+++ b/frontend/pages/employees/index.vue
@@ -18,6 +18,13 @@
                     >
                         Export récap. salaire
                     </button>
+                    <button
+                        type="button"
+                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                        @click="isYearlyHoursBulkOpen = true"
+                    >
+                        Export heures
+                    </button>
                     <button
                         type="button"
                         class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
@@ -249,6 +256,12 @@
             v-model="isSalaryRecapOpen"
             @submit="handleSalaryRecapPrint"
         />
+
+        <BulkYearlyHoursDrawer
+            v-model="isYearlyHoursBulkOpen"
+            :is-loading="isYearlyHoursBulkLoading"
+            @submit="handleBulkYearlyHoursPrint"
+        />
     </div>
 </template>
 
@@ -264,6 +277,7 @@ import {listSites} from '~/services/sites'
 import {listInterimAgencies, type InterimAgency} from '~/services/interim-agencies'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 import SalaryRecapDrawer from '~/components/SalaryRecapDrawer.vue'
+import BulkYearlyHoursDrawer from '~/components/BulkYearlyHoursDrawer.vue'
 import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
 import {usePdfPrinter} from '~/composables/usePdfPrinter'
 
@@ -275,6 +289,8 @@ const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
 const isSalaryRecapOpen = ref(false)
+const isYearlyHoursBulkOpen = ref(false)
+const isYearlyHoursBulkLoading = ref(false)
 const { printPdf } = usePdfPrinter()
 const sitesInitialized = ref(false)
 const editingEmployee = ref<Employee | null>(null)
@@ -610,6 +626,17 @@ const handleSalaryRecapPrint = async (month: string) => {
     isSalaryRecapOpen.value = false
 }
 
+const handleBulkYearlyHoursPrint = async (payload: { year: number; month: number | null }) => {
+    isYearlyHoursBulkLoading.value = true
+    try {
+        const monthParam = null !== payload.month ? `&month=${payload.month}` : ''
+        await printPdf(`/yearly-hours/print-all?year=${payload.year}${monthParam}`)
+        isYearlyHoursBulkOpen.value = false
+    } finally {
+        isYearlyHoursBulkLoading.value = false
+    }
+}
+
 const confirmDelete = async (employee: Employee) => {
     const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
     if (!ok) return
diff --git a/src/ApiResource/EmployeeYearlyHoursBulkPrint.php b/src/ApiResource/EmployeeYearlyHoursBulkPrint.php
new file mode 100644
index 0000000..12a9ac1
--- /dev/null
+++ b/src/ApiResource/EmployeeYearlyHoursBulkPrint.php
@@ -0,0 +1,24 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\ApiResource;
+
+use ApiPlatform\Metadata\ApiResource;
+use ApiPlatform\Metadata\Get;
+use ApiPlatform\Metadata\QueryParameter;
+use App\State\EmployeeYearlyHoursBulkPrintProvider;
+
+#[ApiResource(
+    operations: [
+        new Get(
+            uriTemplate: '/yearly-hours/print-all',
+            provider: EmployeeYearlyHoursBulkPrintProvider::class,
+            parameters: [
+                new QueryParameter(key: 'year', required: true),
+            ],
+            security: "is_granted('ROLE_ADMIN')"
+        ),
+    ]
+)]
+final class EmployeeYearlyHoursBulkPrint {}
diff --git a/src/Service/WorkHours/YearlyHoursExportBuilder.php b/src/Service/WorkHours/YearlyHoursExportBuilder.php
new file mode 100644
index 0000000..b3df9d5
--- /dev/null
+++ b/src/Service/WorkHours/YearlyHoursExportBuilder.php
@@ -0,0 +1,449 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Service\WorkHours;
+
+use App\Dto\WorkHours\WorkMetrics;
+use App\Entity\Absence;
+use App\Entity\Employee;
+use App\Entity\WorkHour;
+use App\Enum\ContractNature;
+use App\Enum\ContractType;
+use App\Enum\TrackingMode;
+use App\Repository\AbsenceRepository;
+use App\Repository\WorkHourRepository;
+use App\Service\Contracts\EmployeeContractResolver;
+use DateInterval;
+use DateTimeImmutable;
+
+class YearlyHoursExportBuilder
+{
+    public function __construct(
+        private WorkHourRepository $workHourRepository,
+        private AbsenceRepository $absenceRepository,
+        private EmployeeContractResolver $contractResolver,
+        private AbsenceSegmentsResolver $absenceSegmentsResolver,
+        private WorkedHoursCreditPolicy $workedHoursCreditPolicy,
+    ) {}
+
+    /**
+     * @return list<string>
+     */
+    public function buildDays(DateTimeImmutable $from, DateTimeImmutable $to): array
+    {
+        $days    = [];
+        $current = $from;
+
+        while ($current <= $to) {
+            $days[]  = $current->format('Y-m-d');
+            $current = $current->add(new DateInterval('P1D'));
+        }
+
+        return $days;
+    }
+
+    /**
+     * @param list<Employee> $employees
+     *
+     * @return list<array{employeeName: string, contractLabel: ?string, segments: list<array>}>
+     */
+    public function buildForEmployees(array $employees, DateTimeImmutable $from, DateTimeImmutable $to): array
+    {
+        $days = $this->buildDays($from, $to);
+
+        $workHours   = $this->workHourRepository->findByDateRangeAndEmployees($from, $to, $employees);
+        $absences    = $this->absenceRepository->findForPrint($from, $to, $employees);
+        $contractMap = $this->contractResolver->resolveForEmployeesAndDays($employees, $days);
+        $driverMap   = $this->contractResolver->resolveIsDriverForEmployeesAndDays($employees, $days);
+
+        $workHourMap = $this->buildWorkHourMap($workHours);
+        $absenceMap  = $this->buildAbsenceMap($absences, $days);
+
+        $results = [];
+        foreach ($employees as $employee) {
+            $employeeId  = $employee->getId();
+            $absenceData = $this->resolveAbsenceDataForEmployee($absenceMap[$employeeId] ?? [], $days, $employee);
+
+            $segments = $this->buildSegments(
+                $days,
+                $contractMap[$employeeId] ?? [],
+                $driverMap[$employeeId] ?? [],
+                $workHourMap[$employeeId] ?? [],
+                $absenceData,
+            );
+
+            if ([] === $segments) {
+                continue;
+            }
+
+            $results[] = [
+                'employeeName'  => trim(($employee->getLastName() ?? '').' '.($employee->getFirstName() ?? '')),
+                'contractLabel' => $this->buildContractLabel($employee),
+                'segments'      => $segments,
+            ];
+        }
+
+        return $results;
+    }
+
+    /**
+     * @return list<array{employeeName: string, contractLabel: ?string, segments: list<array>}>
+     */
+    public function buildForEmployee(Employee $employee, DateTimeImmutable $from, DateTimeImmutable $to): array
+    {
+        return $this->buildForEmployees([$employee], $from, $to);
+    }
+
+    public function buildContractLabel(Employee $employee): ?string
+    {
+        $contract = $employee->getContract();
+        if (null === $contract) {
+            return null;
+        }
+
+        $natureRaw   = $employee->getCurrentContractNature();
+        $nature      = ContractNature::tryFrom($natureRaw) ?? ContractNature::CDI;
+        $natureLabel = match ($nature) {
+            ContractNature::CDI     => 'CDI',
+            ContractNature::CDD     => 'CDD',
+            ContractNature::INTERIM => 'Intérim',
+        };
+
+        $contractType = $contract->getType();
+        if (ContractType::FORFAIT === $contractType) {
+            return $natureLabel.' Forfait';
+        }
+
+        $weeklyHours = $contract->getWeeklyHours();
+        if (null !== $weeklyHours && $weeklyHours > 0) {
+            return sprintf('%s %d heures', $natureLabel, $weeklyHours);
+        }
+
+        $name = $contract->getName();
+
+        return null !== $name && '' !== $name ? $natureLabel.' '.$name : $natureLabel;
+    }
+
+    /**
+     * @return array<int, array<string, WorkHour>>
+     */
+    private function buildWorkHourMap(array $workHours): array
+    {
+        $map = [];
+        foreach ($workHours as $wh) {
+            $employeeId = $wh->getEmployee()?->getId();
+            if (!$employeeId) {
+                continue;
+            }
+            $date                    = $wh->getWorkDate()->format('Y-m-d');
+            $map[$employeeId][$date] = $wh;
+        }
+
+        return $map;
+    }
+
+    /**
+     * @return array<int, list<Absence>>
+     */
+    private function buildAbsenceMap(array $absences, array $days): array
+    {
+        $map = [];
+        foreach ($absences as $absence) {
+            $employeeId = $absence->getEmployee()?->getId();
+            if (!$employeeId) {
+                continue;
+            }
+            $map[$employeeId][] = $absence;
+        }
+
+        return $map;
+    }
+
+    /**
+     * @return array{credited: array<string, int>, labels: array<string, string>, absentMorning: array<string, bool>, absentAfternoon: array<string, bool>, hasDayAbsence: array<string, bool>}
+     */
+    private function resolveAbsenceDataForEmployee(array $absences, array $days, Employee $employee): array
+    {
+        $credited        = [];
+        $labels          = [];
+        $absentMorning   = [];
+        $absentAfternoon = [];
+        $hasDayAbsence   = [];
+
+        foreach ($absences as $absence) {
+            $start = $absence->getStartDate()->format('Y-m-d');
+            $end   = $absence->getEndDate()->format('Y-m-d');
+
+            foreach ($days as $date) {
+                if ($date < $start || $date > $end) {
+                    continue;
+                }
+
+                [$isMorning, $isAfternoon] = $this->absenceSegmentsResolver->resolveForDate($absence, $date);
+                if ($isMorning || $isAfternoon) {
+                    $hasDayAbsence[$date]   = true;
+                    $absentMorning[$date]   = ($absentMorning[$date] ?? false)   || $isMorning;
+                    $absentAfternoon[$date] = ($absentAfternoon[$date] ?? false) || $isAfternoon;
+                    if (!isset($labels[$date])) {
+                        $labels[$date] = $absence->getType()?->getLabel() ?? '';
+                    }
+                }
+
+                $credited[$date] = ($credited[$date] ?? 0)
+                    + $this->workedHoursCreditPolicy->computeCreditedMinutes($absence, $date, $isMorning, $isAfternoon);
+            }
+        }
+
+        return [
+            'credited'        => $credited,
+            'labels'          => $labels,
+            'absentMorning'   => $absentMorning,
+            'absentAfternoon' => $absentAfternoon,
+            'hasDayAbsence'   => $hasDayAbsence,
+        ];
+    }
+
+    /**
+     * @return list<array{mode: string, contractName: ?string, rows: list<array>}>
+     */
+    private function buildSegments(
+        array $days,
+        array $contractsByDate,
+        array $driverByDate,
+        array $workHoursByDate,
+        array $absenceData,
+    ): array {
+        $segments    = [];
+        $currentMode = null;
+        $currentRows = [];
+        $currentName = null;
+
+        $firstDataDate = null;
+        foreach ($days as $date) {
+            $hasRow = null !== ($workHoursByDate[$date] ?? null)
+                || ($absenceData['hasDayAbsence'][$date] ?? false);
+            if ($hasRow) {
+                $firstDataDate = $date;
+
+                break;
+            }
+        }
+
+        if (null === $firstDataDate) {
+            return [];
+        }
+
+        $todayYmd = new DateTimeImmutable('today')->format('Y-m-d');
+
+        foreach ($days as $date) {
+            if ($date < $firstDataDate || $date > $todayYmd) {
+                continue;
+            }
+
+            $contract  = $contractsByDate[$date] ?? null;
+            $isDriver  = $driverByDate[$date] ?? false;
+            $wh        = $workHoursByDate[$date] ?? null;
+            $hasData   = null !== $wh || ($absenceData['hasDayAbsence'][$date] ?? false);
+            $isoDay    = (int) new DateTimeImmutable($date)->format('N');
+            $isWeekend = $isoDay >= 6;
+
+            if (!$hasData && !$isWeekend) {
+                continue;
+            }
+
+            if (!$hasData && null === $contract) {
+                continue;
+            }
+
+            $trackingMode = $contract?->getTrackingMode() ?? TrackingMode::TIME->value;
+            $mode         = $this->resolveSegmentMode($trackingMode, $isDriver);
+            $contractName = $contract?->getName();
+
+            if ($mode !== $currentMode) {
+                if (null !== $currentMode && [] !== $currentRows) {
+                    $segments[] = [
+                        'mode'         => $currentMode,
+                        'contractName' => $currentName,
+                        'rows'         => $currentRows,
+                    ];
+                }
+                $currentMode = $mode;
+                $currentRows = [];
+                $currentName = $contractName;
+            }
+
+            $creditedMinutes = $absenceData['credited'][$date] ?? 0;
+            $absenceLabel    = $absenceData['labels'][$date] ?? null;
+
+            $row = [
+                'date'         => new DateTimeImmutable($date)->format('d/m/Y'),
+                'absenceLabel' => $absenceLabel,
+                'isWeekend'    => $isWeekend,
+            ];
+
+            if ('presence' === $mode) {
+                $absentMorning   = $absenceData['absentMorning'][$date] ?? false;
+                $absentAfternoon = $absenceData['absentAfternoon'][$date] ?? false;
+                $morning         = (($wh?->getIsPresentMorning() ?? false) && !$absentMorning) ? 0.5 : 0.0;
+                $afternoon       = (($wh?->getIsPresentAfternoon() ?? false) && !$absentAfternoon) ? 0.5 : 0.0;
+                $total           = $morning + $afternoon;
+
+                $row['presentMorning']   = $morning > 0;
+                $row['presentAfternoon'] = $afternoon > 0;
+                $row['total']            = $total > 0 ? (string) $total : '';
+            } elseif ('driver' === $mode) {
+                $dayMin      = $wh?->getDayHoursMinutes() ?? 0;
+                $nightMin    = $wh?->getNightHoursMinutes() ?? 0;
+                $workshopMin = $wh?->getWorkshopHoursMinutes() ?? 0;
+                $totalMin    = $dayMin + $nightMin + $workshopMin + $creditedMinutes;
+
+                $row['dayHours']      = $this->formatMinutes($dayMin);
+                $row['nightHours']    = $this->formatMinutes($nightMin);
+                $row['workshopHours'] = $this->formatMinutes($workshopMin);
+                $row['total']         = $this->formatMinutes($totalMin);
+            } else {
+                $metrics = null !== $wh ? $this->computeMetrics($wh) : new WorkMetrics();
+                $metrics->addCreditedMinutes($creditedMinutes);
+
+                $row['morningFrom']   = $wh?->getMorningFrom() ?? '';
+                $row['morningTo']     = $wh?->getMorningTo() ?? '';
+                $row['afternoonFrom'] = $wh?->getAfternoonFrom() ?? '';
+                $row['afternoonTo']   = $wh?->getAfternoonTo() ?? '';
+                $row['eveningFrom']   = $wh?->getEveningFrom() ?? '';
+                $row['eveningTo']     = $wh?->getEveningTo() ?? '';
+                $row['total']         = $this->formatMinutes($metrics->totalMinutes);
+            }
+
+            $currentRows[] = $row;
+        }
+
+        if (null !== $currentMode && [] !== $currentRows) {
+            $segments[] = [
+                'mode'         => $currentMode,
+                'contractName' => $currentName,
+                'rows'         => $currentRows,
+            ];
+        }
+
+        return $segments;
+    }
+
+    private function resolveSegmentMode(string $trackingMode, bool $isDriver): string
+    {
+        if ($isDriver) {
+            return 'driver';
+        }
+
+        if (TrackingMode::PRESENCE->value === $trackingMode) {
+            return 'presence';
+        }
+
+        return 'time';
+    }
+
+    private function computeMetrics(WorkHour $workHour): WorkMetrics
+    {
+        $ranges = [
+            [$workHour->getMorningFrom(), $workHour->getMorningTo()],
+            [$workHour->getAfternoonFrom(), $workHour->getAfternoonTo()],
+            [$workHour->getEveningFrom(), $workHour->getEveningTo()],
+        ];
+
+        $totalMinutes = 0;
+        $nightMinutes = 0;
+
+        foreach ($ranges as [$from, $to]) {
+            $totalMinutes += $this->intervalMinutes($from, $to);
+            $nightMinutes += $this->nightIntervalMinutes($from, $to);
+        }
+
+        $dayMinutes = max(0, $totalMinutes - $nightMinutes);
+
+        return new WorkMetrics(
+            dayMinutes: $dayMinutes,
+            nightMinutes: $nightMinutes,
+            totalMinutes: $totalMinutes,
+        );
+    }
+
+    /**
+     * @return null|array{int, int}
+     */
+    private function resolveInterval(?string $from, ?string $to): ?array
+    {
+        $fromMinutes = $this->toMinutes($from);
+        $toMinutes   = $this->toMinutes($to);
+        if (null === $fromMinutes || null === $toMinutes) {
+            return null;
+        }
+
+        $end = $toMinutes <= $fromMinutes ? $toMinutes + 1440 : $toMinutes;
+
+        return [$fromMinutes, $end];
+    }
+
+    private function toMinutes(?string $time): ?int
+    {
+        if (null === $time || '' === $time) {
+            return null;
+        }
+
+        [$hours, $minutes] = array_map('intval', explode(':', $time));
+
+        return ($hours * 60) + $minutes;
+    }
+
+    private function intervalMinutes(?string $from, ?string $to): int
+    {
+        $interval = $this->resolveInterval($from, $to);
+        if (null === $interval) {
+            return 0;
+        }
+
+        [$start, $end] = $interval;
+
+        return max(0, $end - $start);
+    }
+
+    private function nightIntervalMinutes(?string $from, ?string $to): int
+    {
+        $interval = $this->resolveInterval($from, $to);
+        if (null === $interval) {
+            return 0;
+        }
+
+        [$start, $end] = $interval;
+        $windows       = [[0, 360], [1260, 1440]];
+        $total         = 0;
+
+        for ($dayOffset = 0; $dayOffset <= 1; ++$dayOffset) {
+            $shift = $dayOffset * 1440;
+            foreach ($windows as [$windowStart, $windowEnd]) {
+                $total += $this->overlap($start, $end, $windowStart + $shift, $windowEnd + $shift);
+            }
+        }
+
+        return $total;
+    }
+
+    private function overlap(int $startA, int $endA, int $startB, int $endB): int
+    {
+        $start = max($startA, $startB);
+        $end   = min($endA, $endB);
+
+        return max(0, $end - $start);
+    }
+
+    private function formatMinutes(int $minutes): string
+    {
+        if (0 === $minutes) {
+            return '';
+        }
+
+        $h = intdiv($minutes, 60);
+        $m = $minutes % 60;
+
+        return 0 === $m ? "{$h}h" : "{$h}h{$m}m";
+    }
+}
diff --git a/src/State/EmployeeYearlyHoursBulkPrintProvider.php b/src/State/EmployeeYearlyHoursBulkPrintProvider.php
new file mode 100644
index 0000000..363adf0
--- /dev/null
+++ b/src/State/EmployeeYearlyHoursBulkPrintProvider.php
@@ -0,0 +1,86 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\State;
+
+use ApiPlatform\Metadata\Operation;
+use ApiPlatform\State\ProviderInterface;
+use App\Repository\EmployeeRepository;
+use App\Service\WorkHours\YearlyHoursExportBuilder;
+use DateTimeImmutable;
+use Dompdf\Dompdf;
+use Dompdf\Options;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Exception\UnprocessableEntityHttpException;
+use Twig\Environment;
+
+class EmployeeYearlyHoursBulkPrintProvider implements ProviderInterface
+{
+    public function __construct(
+        private Environment $twig,
+        private readonly RequestStack $requestStack,
+        private EmployeeRepository $employeeRepository,
+        private YearlyHoursExportBuilder $exportBuilder,
+    ) {}
+
+    public function provide(Operation $operation, array $uriVariables = [], array $context = []): Response
+    {
+        $request = $this->requestStack->getCurrentRequest();
+        if (!$request) {
+            return new Response('Missing request.', Response::HTTP_BAD_REQUEST);
+        }
+
+        $yearRaw = (string) $request->query->get('year');
+        if (!preg_match('/^\d{4}$/', $yearRaw)) {
+            throw new UnprocessableEntityHttpException('year must use YYYY format.');
+        }
+        $year = (int) $yearRaw;
+
+        $monthRaw = (string) $request->query->get('month', '');
+        $month    = null;
+        if ('' !== $monthRaw) {
+            if (!preg_match('/^(?:0?[1-9]|1[0-2])$/', $monthRaw)) {
+                throw new UnprocessableEntityHttpException('month must be between 1 and 12.');
+            }
+            $month = (int) $monthRaw;
+        }
+
+        if (null !== $month) {
+            $from = new DateTimeImmutable(sprintf('%d-%02d-01', $year, $month));
+            $to   = $from->modify('last day of this month');
+        } else {
+            $from = new DateTimeImmutable("{$year}-01-01");
+            $to   = new DateTimeImmutable("{$year}-12-31");
+        }
+
+        $employees = $this->employeeRepository->findAll();
+        usort($employees, fn ($a, $b) => ($a->getLastName() ?? '') <=> ($b->getLastName() ?? ''));
+
+        $entries = $this->exportBuilder->buildForEmployees($employees, $from, $to);
+
+        $options = new Options();
+        $options->set('isRemoteEnabled', true);
+
+        $dompdf = new Dompdf($options);
+        $html   = $this->twig->render('employee-yearly-hours/print-all.html.twig', [
+            'entries' => $entries,
+            'year'    => $year,
+            'month'   => $month,
+        ]);
+
+        $dompdf->loadHtml($html);
+        $dompdf->setPaper('A4', 'portrait');
+        $dompdf->render();
+
+        $filename = null !== $month
+            ? sprintf('heures_tous_%d-%02d.pdf', $year, $month)
+            : sprintf('heures_tous_%d.pdf', $year);
+
+        return new Response($dompdf->output(), Response::HTTP_OK, [
+            'Content-Type'        => 'application/pdf',
+            'Content-Disposition' => 'inline; filename="'.$filename.'"',
+        ]);
+    }
+}
diff --git a/src/State/EmployeeYearlyHoursPrintProvider.php b/src/State/EmployeeYearlyHoursPrintProvider.php
index c2d90c5..75eb032 100644
--- a/src/State/EmployeeYearlyHoursPrintProvider.php
+++ b/src/State/EmployeeYearlyHoursPrintProvider.php
@@ -6,19 +6,9 @@ namespace App\State;
 
 use ApiPlatform\Metadata\Operation;
 use ApiPlatform\State\ProviderInterface;
-use App\Dto\WorkHours\WorkMetrics;
 use App\Entity\Employee;
-use App\Entity\WorkHour;
-use App\Enum\ContractNature;
-use App\Enum\ContractType;
-use App\Enum\TrackingMode;
-use App\Repository\AbsenceRepository;
 use App\Repository\EmployeeRepository;
-use App\Repository\WorkHourRepository;
-use App\Service\Contracts\EmployeeContractResolver;
-use App\Service\WorkHours\AbsenceSegmentsResolver;
-use App\Service\WorkHours\WorkedHoursCreditPolicy;
-use DateInterval;
+use App\Service\WorkHours\YearlyHoursExportBuilder;
 use DateTimeImmutable;
 use Dompdf\Dompdf;
 use Dompdf\Options;
@@ -34,11 +24,7 @@ class EmployeeYearlyHoursPrintProvider implements ProviderInterface
         private Environment $twig,
         private readonly RequestStack $requestStack,
         private EmployeeRepository $employeeRepository,
-        private WorkHourRepository $workHourRepository,
-        private AbsenceRepository $absenceRepository,
-        private EmployeeContractResolver $contractResolver,
-        private AbsenceSegmentsResolver $absenceSegmentsResolver,
-        private WorkedHoursCreditPolicy $workedHoursCreditPolicy,
+        private YearlyHoursExportBuilder $exportBuilder,
     ) {}
 
     public function provide(Operation $operation, array $uriVariables = [], array $context = []): Response
@@ -80,27 +66,11 @@ class EmployeeYearlyHoursPrintProvider implements ProviderInterface
             $from = new DateTimeImmutable("{$year}-01-01");
             $to   = new DateTimeImmutable("{$year}-12-31");
         }
-        $days = $this->buildDays($from, $to);
 
-        $workHours   = $this->workHourRepository->findByDateRangeAndEmployees($from, $to, [$employee]);
-        $absences    = $this->absenceRepository->findForPrint($from, $to, [$employee]);
-        $contractMap = $this->contractResolver->resolveForEmployeesAndDays([$employee], $days);
-        $driverMap   = $this->contractResolver->resolveIsDriverForEmployeesAndDays([$employee], $days);
-
-        $workHourMap = $this->buildWorkHourMap($workHours);
-        $absenceData = $this->buildAbsenceData($absences, $days, $employee);
-
-        $segments = $this->buildSegments(
-            $employee,
-            $days,
-            $contractMap[$employee->getId()] ?? [],
-            $driverMap[$employee->getId()] ?? [],
-            $workHourMap[$employee->getId()] ?? [],
-            $absenceData,
-        );
+        $entries = $this->exportBuilder->buildForEmployee($employee, $from, $to);
 
         $employeeName  = trim(($employee->getLastName() ?? '').' '.($employee->getFirstName() ?? ''));
-        $contractLabel = $this->buildContractLabel($employee);
+        $contractLabel = $this->exportBuilder->buildContractLabel($employee);
 
         $options = new Options();
         $options->set('isRemoteEnabled', true);
@@ -111,7 +81,7 @@ class EmployeeYearlyHoursPrintProvider implements ProviderInterface
             'contractLabel' => $contractLabel,
             'year'          => $year,
             'month'         => $month,
-            'segments'      => $segments,
+            'segments'      => $entries[0]['segments'] ?? [],
         ]);
 
         $dompdf->loadHtml($html);
@@ -139,367 +109,6 @@ class EmployeeYearlyHoursPrintProvider implements ProviderInterface
         ]);
     }
 
-    private function buildContractLabel(Employee $employee): ?string
-    {
-        $contract = $employee->getContract();
-        if (null === $contract) {
-            return null;
-        }
-
-        $natureRaw   = $employee->getCurrentContractNature();
-        $nature      = ContractNature::tryFrom($natureRaw) ?? ContractNature::CDI;
-        $natureLabel = match ($nature) {
-            ContractNature::CDI     => 'CDI',
-            ContractNature::CDD     => 'CDD',
-            ContractNature::INTERIM => 'Intérim',
-        };
-
-        $contractType = $contract->getType();
-        if (ContractType::FORFAIT === $contractType) {
-            return $natureLabel.' Forfait';
-        }
-
-        $weeklyHours = $contract->getWeeklyHours();
-        if (null !== $weeklyHours && $weeklyHours > 0) {
-            return sprintf('%s %d heures', $natureLabel, $weeklyHours);
-        }
-
-        $name = $contract->getName();
-
-        return null !== $name && '' !== $name ? $natureLabel.' '.$name : $natureLabel;
-    }
-
-    /**
-     * @return list<string>
-     */
-    private function buildDays(DateTimeImmutable $from, DateTimeImmutable $to): array
-    {
-        $days    = [];
-        $current = $from;
-
-        while ($current <= $to) {
-            $days[]  = $current->format('Y-m-d');
-            $current = $current->add(new DateInterval('P1D'));
-        }
-
-        return $days;
-    }
-
-    /**
-     * @return array<int, array<string, WorkHour>>
-     */
-    private function buildWorkHourMap(array $workHours): array
-    {
-        $map = [];
-        foreach ($workHours as $wh) {
-            $employeeId = $wh->getEmployee()?->getId();
-            if (!$employeeId) {
-                continue;
-            }
-            $date                    = $wh->getWorkDate()->format('Y-m-d');
-            $map[$employeeId][$date] = $wh;
-        }
-
-        return $map;
-    }
-
-    /**
-     * @return array{credited: array<string, int>, labels: array<string, string>, absentMorning: array<string, bool>, absentAfternoon: array<string, bool>, hasDayAbsence: array<string, bool>}
-     */
-    private function buildAbsenceData(array $absences, array $days, Employee $employee): array
-    {
-        $credited        = [];
-        $labels          = [];
-        $absentMorning   = [];
-        $absentAfternoon = [];
-        $hasDayAbsence   = [];
-
-        foreach ($absences as $absence) {
-            $absEmployeeId = $absence->getEmployee()?->getId();
-            if ($absEmployeeId !== $employee->getId()) {
-                continue;
-            }
-
-            $start = $absence->getStartDate()->format('Y-m-d');
-            $end   = $absence->getEndDate()->format('Y-m-d');
-
-            foreach ($days as $date) {
-                if ($date < $start || $date > $end) {
-                    continue;
-                }
-
-                [$isMorning, $isAfternoon] = $this->absenceSegmentsResolver->resolveForDate($absence, $date);
-                if ($isMorning || $isAfternoon) {
-                    $hasDayAbsence[$date]   = true;
-                    $absentMorning[$date]   = ($absentMorning[$date] ?? false)   || $isMorning;
-                    $absentAfternoon[$date] = ($absentAfternoon[$date] ?? false) || $isAfternoon;
-                    if (!isset($labels[$date])) {
-                        $labels[$date] = $absence->getType()?->getLabel() ?? '';
-                    }
-                }
-
-                $credited[$date] = ($credited[$date] ?? 0)
-                    + $this->workedHoursCreditPolicy->computeCreditedMinutes($absence, $date, $isMorning, $isAfternoon);
-            }
-        }
-
-        return [
-            'credited'        => $credited,
-            'labels'          => $labels,
-            'absentMorning'   => $absentMorning,
-            'absentAfternoon' => $absentAfternoon,
-            'hasDayAbsence'   => $hasDayAbsence,
-        ];
-    }
-
-    /**
-     * @return list<array{mode: string, contractName: ?string, rows: list<array>}>
-     */
-    private function buildSegments(
-        Employee $employee,
-        array $days,
-        array $contractsByDate,
-        array $driverByDate,
-        array $workHoursByDate,
-        array $absenceData,
-    ): array {
-        $segments    = [];
-        $currentMode = null;
-        $currentRows = [];
-        $currentName = null;
-
-        // Crop the output window to [first data day, today] to avoid padding the
-        // export with empty rows (notably weekends before the first saisie or after today).
-        $firstDataDate = null;
-        foreach ($days as $date) {
-            $hasRow = null !== ($workHoursByDate[$date] ?? null)
-                || ($absenceData['hasDayAbsence'][$date] ?? false);
-            if ($hasRow) {
-                $firstDataDate = $date;
-
-                break;
-            }
-        }
-
-        if (null === $firstDataDate) {
-            return [];
-        }
-
-        $todayYmd = new DateTimeImmutable('today')->format('Y-m-d');
-
-        foreach ($days as $date) {
-            if ($date < $firstDataDate || $date > $todayYmd) {
-                continue;
-            }
-
-            $contract  = $contractsByDate[$date] ?? null;
-            $isDriver  = $driverByDate[$date] ?? false;
-            $wh        = $workHoursByDate[$date] ?? null;
-            $hasData   = null !== $wh || ($absenceData['hasDayAbsence'][$date] ?? false);
-            $isoDay    = (int) new DateTimeImmutable($date)->format('N');
-            $isWeekend = $isoDay >= 6;
-
-            // Keep weekend rows even when empty so the reader can distinguish
-            // worked vs non-worked Saturdays/Sundays at a glance.
-            if (!$hasData && !$isWeekend) {
-                continue;
-            }
-
-            if (!$hasData && null === $contract) {
-                continue;
-            }
-
-            $trackingMode = $contract?->getTrackingMode() ?? TrackingMode::TIME->value;
-            $mode         = $this->resolveSegmentMode($trackingMode, $isDriver);
-            $contractName = $contract?->getName();
-
-            if ($mode !== $currentMode) {
-                if (null !== $currentMode && [] !== $currentRows) {
-                    $segments[] = [
-                        'mode'         => $currentMode,
-                        'contractName' => $currentName,
-                        'rows'         => $currentRows,
-                    ];
-                }
-                $currentMode = $mode;
-                $currentRows = [];
-                $currentName = $contractName;
-            }
-
-            $creditedMinutes = $absenceData['credited'][$date] ?? 0;
-            $absenceLabel    = $absenceData['labels'][$date] ?? null;
-
-            $row = [
-                'date'         => new DateTimeImmutable($date)->format('d/m/Y'),
-                'absenceLabel' => $absenceLabel,
-                'isWeekend'    => $isWeekend,
-            ];
-
-            if ('presence' === $mode) {
-                $absentMorning   = $absenceData['absentMorning'][$date] ?? false;
-                $absentAfternoon = $absenceData['absentAfternoon'][$date] ?? false;
-                $morning         = (($wh?->getIsPresentMorning() ?? false) && !$absentMorning) ? 0.5 : 0.0;
-                $afternoon       = (($wh?->getIsPresentAfternoon() ?? false) && !$absentAfternoon) ? 0.5 : 0.0;
-                $total           = $morning + $afternoon;
-
-                $row['presentMorning']   = $morning > 0;
-                $row['presentAfternoon'] = $afternoon > 0;
-                $row['total']            = $total > 0 ? (string) $total : '';
-            } elseif ('driver' === $mode) {
-                $dayMin      = $wh?->getDayHoursMinutes() ?? 0;
-                $nightMin    = $wh?->getNightHoursMinutes() ?? 0;
-                $workshopMin = $wh?->getWorkshopHoursMinutes() ?? 0;
-                $totalMin    = $dayMin + $nightMin + $workshopMin + $creditedMinutes;
-
-                $row['dayHours']      = $this->formatMinutes($dayMin);
-                $row['nightHours']    = $this->formatMinutes($nightMin);
-                $row['workshopHours'] = $this->formatMinutes($workshopMin);
-                $row['total']         = $this->formatMinutes($totalMin);
-            } else {
-                $metrics = null !== $wh ? $this->computeMetrics($wh) : new WorkMetrics();
-                $metrics->addCreditedMinutes($creditedMinutes);
-
-                $row['morningFrom']   = $wh?->getMorningFrom() ?? '';
-                $row['morningTo']     = $wh?->getMorningTo() ?? '';
-                $row['afternoonFrom'] = $wh?->getAfternoonFrom() ?? '';
-                $row['afternoonTo']   = $wh?->getAfternoonTo() ?? '';
-                $row['eveningFrom']   = $wh?->getEveningFrom() ?? '';
-                $row['eveningTo']     = $wh?->getEveningTo() ?? '';
-                $row['total']         = $this->formatMinutes($metrics->totalMinutes);
-            }
-
-            $currentRows[] = $row;
-        }
-
-        if (null !== $currentMode && [] !== $currentRows) {
-            $segments[] = [
-                'mode'         => $currentMode,
-                'contractName' => $currentName,
-                'rows'         => $currentRows,
-            ];
-        }
-
-        return $segments;
-    }
-
-    private function resolveSegmentMode(string $trackingMode, bool $isDriver): string
-    {
-        if ($isDriver) {
-            return 'driver';
-        }
-
-        if (TrackingMode::PRESENCE->value === $trackingMode) {
-            return 'presence';
-        }
-
-        return 'time';
-    }
-
-    private function computeMetrics(WorkHour $workHour): WorkMetrics
-    {
-        $ranges = [
-            [$workHour->getMorningFrom(), $workHour->getMorningTo()],
-            [$workHour->getAfternoonFrom(), $workHour->getAfternoonTo()],
-            [$workHour->getEveningFrom(), $workHour->getEveningTo()],
-        ];
-
-        $totalMinutes = 0;
-        $nightMinutes = 0;
-
-        foreach ($ranges as [$from, $to]) {
-            $totalMinutes += $this->intervalMinutes($from, $to);
-            $nightMinutes += $this->nightIntervalMinutes($from, $to);
-        }
-
-        $dayMinutes = max(0, $totalMinutes - $nightMinutes);
-
-        return new WorkMetrics(
-            dayMinutes: $dayMinutes,
-            nightMinutes: $nightMinutes,
-            totalMinutes: $totalMinutes,
-        );
-    }
-
-    /**
-     * @return null|array{int, int}
-     */
-    private function resolveInterval(?string $from, ?string $to): ?array
-    {
-        $fromMinutes = $this->toMinutes($from);
-        $toMinutes   = $this->toMinutes($to);
-        if (null === $fromMinutes || null === $toMinutes) {
-            return null;
-        }
-
-        $end = $toMinutes <= $fromMinutes ? $toMinutes + 1440 : $toMinutes;
-
-        return [$fromMinutes, $end];
-    }
-
-    private function toMinutes(?string $time): ?int
-    {
-        if (null === $time || '' === $time) {
-            return null;
-        }
-
-        [$hours, $minutes] = array_map('intval', explode(':', $time));
-
-        return ($hours * 60) + $minutes;
-    }
-
-    private function intervalMinutes(?string $from, ?string $to): int
-    {
-        $interval = $this->resolveInterval($from, $to);
-        if (null === $interval) {
-            return 0;
-        }
-
-        [$start, $end] = $interval;
-
-        return max(0, $end - $start);
-    }
-
-    private function nightIntervalMinutes(?string $from, ?string $to): int
-    {
-        $interval = $this->resolveInterval($from, $to);
-        if (null === $interval) {
-            return 0;
-        }
-
-        [$start, $end] = $interval;
-        $windows       = [[0, 360], [1260, 1440]];
-        $total         = 0;
-
-        for ($dayOffset = 0; $dayOffset <= 1; ++$dayOffset) {
-            $shift = $dayOffset * 1440;
-            foreach ($windows as [$windowStart, $windowEnd]) {
-                $total += $this->overlap($start, $end, $windowStart + $shift, $windowEnd + $shift);
-            }
-        }
-
-        return $total;
-    }
-
-    private function overlap(int $startA, int $endA, int $startB, int $endB): int
-    {
-        $start = max($startA, $startB);
-        $end   = min($endA, $endB);
-
-        return max(0, $end - $start);
-    }
-
-    private function formatMinutes(int $minutes): string
-    {
-        if (0 === $minutes) {
-            return '';
-        }
-
-        $h = intdiv($minutes, 60);
-        $m = $minutes % 60;
-
-        return 0 === $m ? "{$h}h" : "{$h}h{$m}m";
-    }
-
     private function sanitizeFilename(string $name): string
     {
         $name = str_replace(' ', '_', $name);
diff --git a/templates/employee-yearly-hours/print-all.html.twig b/templates/employee-yearly-hours/print-all.html.twig
new file mode 100644
index 0000000..41eae5c
--- /dev/null
+++ b/templates/employee-yearly-hours/print-all.html.twig
@@ -0,0 +1,271 @@
+<!doctype html>
+<html lang="fr">
+<head>
+    <meta charset="utf-8">
+    <title>Export heures - {% set months = {
+        1:'Janvier', 2:'Février', 3:'Mars', 4:'Avril', 5:'Mai', 6:'Juin',
+        7:'Juillet', 8:'Août', 9:'Septembre', 10:'Octobre', 11:'Novembre', 12:'Décembre'
+    } %}{% if month %}{{ months[month] }} {{ year }}{% else %}{{ year }}{% endif %}</title>
+
+    <style>
+        @page { size: A4 portrait; margin: 4mm; }
+
+        html, body {
+            margin: 0;
+            padding: 2mm;
+            font-family: Helvetica, sans-serif;
+            font-size: 9px;
+        }
+
+        .employee-section {
+            page-break-before: always;
+        }
+
+        .employee-section:first-child {
+            page-break-before: auto;
+        }
+
+        .title-bar {
+            position: relative;
+            margin: 0 0 4mm 0;
+        }
+
+        h1 {
+            text-align: center;
+            font-size: 16px;
+            margin: 0;
+        }
+
+        .export-date {
+            position: absolute;
+            top: 0;
+            right: 0;
+            font-size: 9px;
+            color: #333;
+            padding-top: 4px;
+        }
+
+        h2 {
+            font-size: 12px;
+            margin: 4mm 0 2mm 0;
+            padding: 2px 6px;
+            background: #e8e8e8;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            table-layout: auto;
+            border: 2px solid #0a0a0a;
+        }
+
+        th, td {
+            border: 1px solid #0a0a0a;
+            padding: 2px 4px;
+            vertical-align: middle;
+            white-space: nowrap;
+        }
+
+        thead th {
+            text-align: center;
+            font-weight: 700;
+            font-size: 9px;
+            background: #d9e2f3;
+        }
+
+        td { font-size: 9px; }
+        td.date { text-align: left; font-weight: bold; }
+        td.absence { text-align: left; color: #c00; }
+        td.time { text-align: center; }
+        td.presence { text-align: center; }
+        td.total { text-align: center; font-weight: bold; }
+        tr.weekend td { background: #f3f3f3; color: #555; }
+        tr.weekend td.date { color: #333; }
+
+        .signature-footer {
+            page-break-inside: avoid;
+            margin-top: 6mm;
+        }
+
+        .signature-intro {
+            text-align: center;
+            font-weight: 700;
+            margin-bottom: 6mm;
+            font-size: 11px;
+        }
+
+        .signature-blocks {
+            display: table;
+            width: 100%;
+            table-layout: fixed;
+            border-collapse: separate;
+            border-spacing: 4mm 0;
+        }
+
+        .signature-block {
+            display: table-cell;
+            border: 1px solid #0a0a0a;
+            padding: 3mm;
+            vertical-align: top;
+            width: 33.33%;
+        }
+
+        .signature-block .title {
+            text-align: center;
+            font-weight: 700;
+            font-size: 11px;
+            margin-bottom: 7mm;
+            text-decoration: underline;
+        }
+
+        .signature-block .line {
+            margin-bottom: 2mm;
+            font-size: 10px;
+        }
+
+        .signature-block .signature-line {
+            margin-top: 6mm;
+            margin-bottom: 18mm;
+            font-size: 10px;
+        }
+    </style>
+</head>
+<body>
+
+{% set months = {
+    1:'Janvier', 2:'Février', 3:'Mars', 4:'Avril', 5:'Mai', 6:'Juin',
+    7:'Juillet', 8:'Août', 9:'Septembre', 10:'Octobre', 11:'Novembre', 12:'Décembre'
+} %}
+
+{% for entry in entries %}
+<div class="employee-section">
+    <div class="title-bar">
+        <h1>
+            {{ entry.employeeName }}{% if entry.contractLabel %} - {{ entry.contractLabel }}{% endif %}<br>
+            {% if month %}{{ months[month] }} {{ year }}{% else %}{{ year }}{% endif %}
+        </h1>
+        <div class="export-date">Exporté le {{ "now"|date('d/m/Y') }} à {{ "now"|date('H:i:s') }}</div>
+    </div>
+
+    {% for segment in entry.segments %}
+        {% if entry.segments|length > 1 %}
+            <h2>{{ segment.contractName ?? 'Contrat inconnu' }}{% if segment.mode == 'driver' %} (Chauffeur){% endif %}</h2>
+        {% endif %}
+
+        {% if segment.mode == 'presence' %}
+            <table>
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Absence</th>
+                        <th>Présence matin</th>
+                        <th>Présence après-midi</th>
+                        <th>Total</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for row in segment.rows %}
+                        <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                            <td class="date">{{ row.date }}</td>
+                            <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                            <td class="presence">{{ row.presentMorning ? 'X' : '' }}</td>
+                            <td class="presence">{{ row.presentAfternoon ? 'X' : '' }}</td>
+                            <td class="total">{{ row.total }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% elseif segment.mode == 'driver' %}
+            <table>
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Absence</th>
+                        <th>Heures jour</th>
+                        <th>Heures nuit</th>
+                        <th>Heures atelier</th>
+                        <th>Total</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for row in segment.rows %}
+                        <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                            <td class="date">{{ row.date }}</td>
+                            <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                            <td class="time">{{ row.dayHours }}</td>
+                            <td class="time">{{ row.nightHours }}</td>
+                            <td class="time">{{ row.workshopHours }}</td>
+                            <td class="total">{{ row.total }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% else %}
+            <table>
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Absence</th>
+                        <th>Début matin</th>
+                        <th>Fin matin</th>
+                        <th>Début après-midi</th>
+                        <th>Fin après-midi</th>
+                        <th>Début soir</th>
+                        <th>Fin soir</th>
+                        <th>Total</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for row in segment.rows %}
+                        <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                            <td class="date">{{ row.date }}</td>
+                            <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                            <td class="time">{{ row.morningFrom }}</td>
+                            <td class="time">{{ row.morningTo }}</td>
+                            <td class="time">{{ row.afternoonFrom }}</td>
+                            <td class="time">{{ row.afternoonTo }}</td>
+                            <td class="time">{{ row.eveningFrom }}</td>
+                            <td class="time">{{ row.eveningTo }}</td>
+                            <td class="total">{{ row.total }}</td>
+                        </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        {% endif %}
+    {% endfor %}
+
+    <div class="signature-footer">
+        <div class="signature-intro">
+            Nom + Prénom<br>
+            Signature avec mention « bon pour accord »
+        </div>
+
+        <div class="signature-blocks">
+            <div class="signature-block">
+                <p class="title">Direction</p>
+                <p class="line">Nom : ...............</p>
+                <p class="line">Prénom : ...............</p>
+                <p class="line">Mention : ........................................</p>
+                <p class="signature-line">Signature :</p>
+            </div>
+            <div class="signature-block">
+                <p class="title">Responsable usine</p>
+                <p class="line">Nom : ...............</p>
+                <p class="line">Prénom : ...............</p>
+                <p class="line">Mention : ........................................</p>
+                <p class="signature-line">Signature :</p>
+            </div>
+            <div class="signature-block">
+                <p class="title">Salarié</p>
+                <p class="line">Nom : ...............</p>
+                <p class="line">Prénom : ...............</p>
+                <p class="line">Mention : ........................................</p>
+                <p class="signature-line">Signature :</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endfor %}
+
+</body>
+</html>

From fe0910a661b4785438e59d61cc64c3f5ee1e305f Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Fri, 17 Apr 2026 14:58:36 +0000
Subject: [PATCH 06/23] chore: bump version to v0.1.91

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index cea1308..d575c97 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.90'
+    app.version: '0.1.91'

From d46e7c04d513d027d0d18634b42a70792081279f Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 20 Apr 2026 08:20:26 +0200
Subject: [PATCH 07/23] fix : copier la config PHP custom (memory_limit 512M)
 dans l'image de prod

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 deploy/docker/Dockerfile.prod | 1 +
 1 file changed, 1 insertion(+)

diff --git a/deploy/docker/Dockerfile.prod b/deploy/docker/Dockerfile.prod
index b31759e..6b0a936 100644
--- a/deploy/docker/Dockerfile.prod
+++ b/deploy/docker/Dockerfile.prod
@@ -45,6 +45,7 @@ RUN apt-get update && apt-get install -y \
 
 # PHP production config
 RUN mv "$PHP_INI_DIR/php.ini-production" "$PHP_INI_DIR/php.ini"
+COPY docker/php/config/php.ini "$PHP_INI_DIR/conf.d/99-app.ini"
 
 # PHP-FPM: forward worker output to stderr for docker logs
 RUN echo "catch_workers_output = yes" >> /usr/local/etc/php-fpm.d/www.conf \

From d230a252b601376057c85d761855a0cc0c3f6d29 Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Mon, 20 Apr 2026 06:21:05 +0000
Subject: [PATCH 08/23] chore: bump version to v0.1.92

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index d575c97..7334df1 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.91'
+    app.version: '0.1.92'

From 849d19f124f1ef8b358ba9822252e69f9d8e9254 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 20 Apr 2026 08:24:39 +0200
Subject: [PATCH 09/23] fix : autoriser docker/php/config/php.ini dans
 .dockerignore pour le build prod

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .dockerignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.dockerignore b/.dockerignore
index b49f8eb..a6a6e3f 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -3,6 +3,7 @@
 .env.local
 .env.test
 docker/
+!docker/php/config/php.ini
 deploy/docker/docker-compose.prod.yml
 deploy/docker/deploy.sh
 deploy/docker/.env.example

From b2f6fdf222b2c5c072ac637eb6deaa262942a339 Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Mon, 20 Apr 2026 06:25:18 +0000
Subject: [PATCH 10/23] chore: bump version to v0.1.93

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index 7334df1..a2a7a4b 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.92'
+    app.version: '0.1.93'

From b9c3a8a84f25ed03e928bcb416efc9bf2dcd645a Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 20 Apr 2026 10:12:05 +0000
Subject: [PATCH 11/23] [#SIRH-25] Version mobile (#16)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

## Description de la PR

## Modification du .env

## Check list

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

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/SIRH/pulls/16
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
---
 frontend/components/AppDrawer.vue           |   7 +
 frontend/components/AppTopNav.vue           |  23 ++-
 frontend/components/hours/HoursDayView.vue  | 170 +++++++++++++++++++-
 frontend/components/hours/HoursToolbar.vue  |  75 +++++++--
 frontend/components/hours/HoursWeekView.vue |  66 +++++++-
 frontend/components/ui/TimeSelect.vue       |  42 ++++-
 frontend/layouts/default.vue                |  57 ++++++-
 frontend/pages/hours.vue                    |   2 +-
 frontend/pages/leave-recap.vue              |  46 +++++-
 frontend/pages/users.vue                    |  45 +++++-
 10 files changed, 499 insertions(+), 34 deletions(-)

diff --git a/frontend/components/AppDrawer.vue b/frontend/components/AppDrawer.vue
index 01d9776..553721e 100644
--- a/frontend/components/AppDrawer.vue
+++ b/frontend/components/AppDrawer.vue
@@ -9,6 +9,13 @@
           <h2 class="text-[32px] font-semibold text-primary-500">
             {{ title }}
           </h2>
+          <button
+            type="button"
+            class="rounded-md p-1 text-primary-500 hover:text-secondary-500"
+            @click="close"
+          >
+            <Icon name="mdi:close" size="24"/>
+          </button>
         </div>
         <div class="min-h-0 flex-1 overflow-y-auto px-[20px] pb-4">
           <slot />
diff --git a/frontend/components/AppTopNav.vue b/frontend/components/AppTopNav.vue
index 115d5f3..1f2b7e3 100644
--- a/frontend/components/AppTopNav.vue
+++ b/frontend/components/AppTopNav.vue
@@ -1,7 +1,14 @@
 <template>
-    <header ref="headerRef" class="border-b border-neutral-200 bg-primary-500 p-5 text-white">
-        <div class="flex h-full items-center justify-end">
-            <div class="flex gap-6 text-xl text-white">
+    <header ref="headerRef" class="border-b border-neutral-200 bg-primary-500 px-4 py-3 text-white lg:p-5">
+        <div class="flex h-full items-center justify-between lg:justify-end">
+            <button
+                type="button"
+                class="rounded-md p-1 text-white hover:text-neutral-200 lg:hidden"
+                @click="$emit('toggleSidebar')"
+            >
+                <Icon name="mdi:menu" size="28"/>
+            </button>
+            <div class="flex gap-4 text-xl text-white lg:gap-6">
                 <div v-if="isAdmin" ref="bellRoot" class="relative">
                     <button type="button" class="relative self-center cursor-pointer flex items-center" @click="toggleNotifications">
                         <Icon name="mdi:bell-plus" size="36"/>
@@ -15,8 +22,8 @@
 
                     <div
                         v-if="isNotificationsOpen"
-                        class="fixed right-[20px] z-30 w-[400px] rounded-md border border-neutral-200 bg-white text-neutral-800 shadow-lg"
-                        :style="{ top: `${navbarBottom + 20}px` }"
+                        class="fixed right-2 z-30 w-[calc(100vw-1rem)] max-w-[400px] rounded-md border border-neutral-200 bg-white text-neutral-800 shadow-lg lg:right-[20px]"
+                        :style="{ top: `${navbarBottom + 10}px` }"
                     >
                         <div class="px-3 pt-3 pb-6 text-xl font-semibold">
                             Notifications
@@ -66,7 +73,7 @@
                 <div ref="userMenuRoot" class="relative flex gap-4">
                     <button type="button" class="flex items-center gap-4 cursor-pointer" @click="toggleUserMenu">
                         <Icon name="mdi:account-circle-outline" class="self-center" size="36"/>
-                        <p class="self-center">{{ user?.username }}</p>
+                        <p class="hidden self-center sm:block">{{ user?.username }}</p>
                     </button>
                     <div
                         v-if="isUserMenuOpen"
@@ -103,6 +110,10 @@ defineProps<{
     user?: User
 }>()
 
+defineEmits<{
+    (event: 'toggleSidebar'): void
+}>()
+
 const formatTimeAgo = (dateString: string): string => {
     const date = new Date(dateString)
     const now = new Date()
diff --git a/frontend/components/hours/HoursDayView.vue b/frontend/components/hours/HoursDayView.vue
index da69e4f..4230886 100644
--- a/frontend/components/hours/HoursDayView.vue
+++ b/frontend/components/hours/HoursDayView.vue
@@ -1,6 +1,174 @@
 <template>
     <div class="bg-white overflow-hidden flex min-h-0 flex-col">
-        <div class="overflow-y-auto min-h-0">
+        <!-- Mobile card layout -->
+        <div class="overflow-y-auto min-h-0 space-y-3 lg:hidden">
+            <div
+                v-for="employee in employees"
+                :key="'m-' + employee.id"
+                class="rounded-md border border-primary-500 bg-white p-4"
+            >
+                <!-- Employee name + site -->
+                <div class="mb-3">
+                    <p class="text-md font-bold text-primary-500 truncate">
+                        {{ employee.firstName }} {{ employee.lastName }}
+                        <span class="font-normal text-neutral-600 text-sm">({{ contractLabel(employee) }})</span>
+                    </p>
+                    <p class="text-sm text-neutral-500 truncate">
+                        {{ employee.site?.name ?? 'Sans site' }}<span v-if="employee.currentContractNature"> — {{ contractNatureLabel(employee.currentContractNature) }}</span>
+                    </p>
+                </div>
+
+                <!-- Absence / Holiday / Formation pills -->
+                <div class="mb-3 flex flex-col gap-1">
+                    <p
+                        v-if="getRowAbsenceLabel(employee.id)"
+                        class="rounded-md px-2 py-1 text-xs text-white truncate"
+                        :style="getRowAbsenceStyle(employee.id)"
+                    >
+                        {{ getRowAbsenceLabel(employee.id) }}
+                    </p>
+                    <p
+                        v-else
+                        class="text-xs text-neutral-400"
+                    >
+                        Aucune absence
+                    </p>
+                    <p
+                        v-if="isHoliday"
+                        class="rounded-md px-2 py-1 text-xs text-sky-900 inline-flex items-center gap-1"
+                        style="background-color: #b3e5fc"
+                    >
+                        <Icon name="mdi:calendar-star" size="14" class="shrink-0"/>
+                        <span class="truncate">{{ holidayLabel || 'Férié' }}</span>
+                    </p>
+                    <p
+                        v-if="hasRowFormation(employee.id)"
+                        class="rounded-md px-2 py-1 text-xs text-white bg-indigo-500 inline-flex items-center gap-1"
+                    >
+                        <Icon name="mdi:school-outline" size="14" class="shrink-0"/>
+                        <span class="truncate">{{ getRowFormationLabel(employee.id) }}</span>
+                    </p>
+                    <button
+                        v-if="!hasRowFormation(employee.id)"
+                        type="button"
+                        class="self-start text-xs font-semibold underline"
+                        :class="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id) ? 'text-neutral-400 cursor-not-allowed' : 'text-primary-500 cursor-pointer'"
+                        :disabled="isRowLocked(employee.id) || !hasContractAtSelectedDate(employee.id)"
+                        @click="onAbsenceClick(employee.id)"
+                    >
+                        Modifier
+                    </button>
+                </div>
+
+                <!-- Time inputs (TIME tracking) -->
+                <div v-if="isTimeTracking(employee)" class="space-y-2">
+                    <div class="grid grid-cols-2 gap-2">
+                        <div>
+                            <label class="text-xs text-neutral-500">Début matin</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].morningFrom"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                            />
+                        </div>
+                        <div>
+                            <label class="text-xs text-neutral-500">Fin matin</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].morningTo"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                            />
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div>
+                            <label class="text-xs text-neutral-500">Début après-midi</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].afternoonFrom"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                            />
+                        </div>
+                        <div>
+                            <label class="text-xs text-neutral-500">Fin après-midi</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].afternoonTo"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                            />
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2">
+                        <div>
+                            <label class="text-xs text-neutral-500">Début soir</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].eveningFrom"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+                            />
+                        </div>
+                        <div>
+                            <label class="text-xs text-neutral-500">Fin soir</label>
+                            <TimeSelect
+                                v-model="rows[employee.id].eveningTo"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isEveningLockedByAbsence(employee.id))"
+                            />
+                        </div>
+                    </div>
+                    <div class="flex gap-4 pt-1 text-sm font-semibold text-primary-500">
+                        <span>Jour : {{ formatMinutes(getRowMetrics(employee.id).dayMinutes) }}</span>
+                        <span>Nuit : {{ formatMinutes(getRowMetrics(employee.id).nightMinutes) }}</span>
+                        <span>Total : {{ formatMinutes(getRowMetrics(employee.id).totalMinutes) }}</span>
+                    </div>
+                </div>
+
+                <!-- Presence tracking -->
+                <div v-else-if="isPresenceTracking(employee)" class="space-y-2">
+                    <div class="flex items-center gap-4">
+                        <label class="flex items-center gap-2 text-sm">
+                            <input
+                                v-model="rows[employee.id].isPresentMorning"
+                                type="checkbox"
+                                class="h-4 w-4 cursor-pointer"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'AM'))"
+                            />
+                            Matin
+                        </label>
+                        <label class="flex items-center gap-2 text-sm">
+                            <input
+                                v-model="rows[employee.id].isPresentAfternoon"
+                                type="checkbox"
+                                class="h-4 w-4 cursor-pointer"
+                                :disabled="!hasContractAtSelectedDate(employee.id) || isRowLocked(employee.id) || (!isAdmin && isHalfLockedByAbsence(employee.id, 'PM'))"
+                            />
+                            Après-midi
+                        </label>
+                    </div>
+                    <p class="text-sm font-semibold text-primary-500">Total : {{ getPresenceDayValue(employee.id) }}</p>
+                </div>
+
+                <!-- Validation status (non-admin) -->
+                <div v-if="!isAdmin" class="mt-3 flex gap-4 text-xs border-t border-neutral-200 pt-2">
+                    <span v-if="!isSiteManager" class="flex items-center gap-1">
+                        <Icon name="mdi:check-circle-outline" size="14" :class="rows[employee.id]?.isSiteValid ? 'text-green-600' : 'text-neutral-400'"/>
+                        Validation site : <span :class="rows[employee.id]?.isSiteValid ? 'font-semibold text-green-600' : 'text-neutral-500'">{{ rows[employee.id]?.isSiteValid ? 'Validé' : 'En attente' }}</span>
+                    </span>
+                    <span class="flex items-center gap-1">
+                        <Icon name="mdi:check-circle-outline" size="14" :class="rows[employee.id]?.isValid ? 'text-green-600' : 'text-neutral-400'"/>
+                        Validation RH : <span :class="rows[employee.id]?.isValid ? 'font-semibold text-green-600' : 'text-neutral-500'">{{ rows[employee.id]?.isValid ? 'Validé' : 'En attente' }}</span>
+                    </span>
+                </div>
+
+                <!-- Validation checkbox (admin) -->
+                <div v-if="isAdmin" class="mt-3 flex items-center gap-2 text-sm">
+                    <input
+                        :checked="rows[employee.id]?.isValid ?? false"
+                        type="checkbox"
+                        class="h-4 w-4 cursor-pointer"
+                        @change="onToggleValidation(employee.id, ($event.target as HTMLInputElement).checked)"
+                    />
+                    <span class="text-neutral-700 font-semibold">Valider</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Desktop table layout -->
+        <div class="overflow-y-auto min-h-0 hidden lg:block">
             <div
                 class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
                 :style="{ gridTemplateColumns: dayGridCols }"
diff --git a/frontend/components/hours/HoursToolbar.vue b/frontend/components/hours/HoursToolbar.vue
index 9b0fd29..f96e236 100644
--- a/frontend/components/hours/HoursToolbar.vue
+++ b/frontend/components/hours/HoursToolbar.vue
@@ -1,17 +1,68 @@
 <template>
-  <div class="py-6 flex flex-col gap-3">
-      <div class="flex gap-4">
+  <div class="py-4 flex flex-col gap-3 lg:py-6">
+      <!-- Desktop: filters row -->
+      <div class="hidden lg:flex lg:gap-4">
           <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
-          <div v-if="isAdmin" class="w-80 max-w-full">
+          <div v-if="isAdmin" class="w-80">
               <EmployeeNameFilterInput v-model="employeeFilter" />
           </div>
       </div>
 
-    <div class="flex justify-between items-center gap-4">
-      <div class="flex gap-4 flex-wrap">
+      <!-- Mobile: search + filter button -->
+      <div v-if="isAdmin" class="flex gap-2 lg:hidden">
+          <div class="flex-1 min-w-0">
+              <EmployeeNameFilterInput v-model="employeeFilter" />
+          </div>
+          <button
+            type="button"
+            class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-primary-500 bg-white text-primary-500"
+            @click="filtersDrawerOpen = true"
+          >
+              <Icon name="mdi:filter-variant" size="22"/>
+          </button>
+      </div>
+
+      <!-- Mobile filters drawer -->
+      <AppDrawer v-model="filtersDrawerOpen" title="Filtres">
+          <div class="space-y-6">
+              <div v-if="sites.length > 0 && isAdmin">
+                  <label class="text-md font-semibold text-neutral-700">Sites</label>
+                  <div class="mt-2">
+                      <SiteFilterSelector v-model="selectedSiteIds" :sites="sites" />
+                  </div>
+              </div>
+              <div v-if="isAdmin">
+                  <label class="text-md font-semibold text-neutral-700">Vue</label>
+                  <div class="mt-2 inline-flex h-10 w-full overflow-hidden rounded-md border border-primary-500 bg-white">
+                      <button
+                        type="button"
+                        class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-semibold"
+                        :class="viewModeButtonClass('day')"
+                        @click="viewMode = 'day'; filtersDrawerOpen = false"
+                      >
+                          <Icon name="mdi:calendar-clock" />
+                          Jour
+                      </button>
+                      <button
+                        type="button"
+                        class="flex-1 inline-flex items-center justify-center gap-2 border-l border-primary-500 px-4 py-2 text-sm font-semibold"
+                        :class="viewModeButtonClass('week')"
+                        @click="viewMode = 'week'; filtersDrawerOpen = false"
+                      >
+                          <Icon name="mdi:calendar-week" />
+                          Semaine
+                      </button>
+                  </div>
+              </div>
+          </div>
+      </AppDrawer>
+
+    <!-- Date navigation -->
+    <div class="flex flex-col gap-3 lg:flex-row lg:justify-between lg:items-center lg:gap-4">
+      <div class="flex flex-col gap-3 lg:flex-row lg:flex-wrap lg:gap-4">
       <div
         v-if="viewMode === 'day'"
-        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+        class="inline-flex h-10 w-full overflow-hidden rounded-md border border-primary-500 bg-white lg:w-[320px]"
       >
         <button
           type="button"
@@ -41,7 +92,7 @@
 
       <div
         v-else
-        class="inline-flex h-10 w-[320px] overflow-hidden rounded-md border border-primary-500 bg-white"
+        class="inline-flex h-10 w-full overflow-hidden rounded-md border border-primary-500 bg-white lg:w-[320px]"
       >
         <button
           type="button"
@@ -70,7 +121,7 @@
       </div>
 
       <PeriodStepperPicker
-        width-class="w-[320px]"
+        width-class="w-full lg:w-[320px]"
         :label="formattedSelectedDate"
         :picker-type="viewMode === 'week' ? 'week' : 'date'"
         :picker-value="pickerValue"
@@ -82,7 +133,8 @@
       />
       </div>
 
-      <div v-if="isAdmin" class="inline-flex h-10 overflow-hidden rounded-md border border-primary-500 bg-white">
+      <!-- Desktop: view mode toggle -->
+      <div v-if="isAdmin" class="hidden lg:inline-flex h-10 overflow-hidden rounded-md border border-primary-500 bg-white">
         <button
           type="button"
           class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40"
@@ -106,7 +158,7 @@
 
     <div
       v-if="isAdmin && viewMode === 'week' && absenceTypes.length > 0"
-      class="flex flex-wrap items-center gap-6"
+      class="hidden lg:flex flex-wrap items-center gap-6"
     >
       <p class="font-bold">Légende :</p>
       <div v-for="type in absenceTypes" :key="type.id" class="flex items-center gap-2">
@@ -123,6 +175,7 @@ import type { AbsenceType } from '~/services/dto/absence-type'
 import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
 import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 import PeriodStepperPicker from '~/components/PeriodStepperPicker.vue'
+import AppDrawer from '~/components/AppDrawer.vue'
 import { weekInputValueToYmd, ymdToWeekInputValue } from '~/utils/date'
 
 const selectedDate = defineModel<string>('selectedDate', { required: true })
@@ -150,6 +203,8 @@ const emit = defineEmits<{
   (e: 'shift-date', value: number): void
 }>()
 
+const filtersDrawerOpen = ref(false)
+
 const pickerValue = computed(() => {
   if (viewMode.value === 'week') return ymdToWeekInputValue(selectedDate.value)
   return selectedDate.value
diff --git a/frontend/components/hours/HoursWeekView.vue b/frontend/components/hours/HoursWeekView.vue
index 2a629a9..7e51ab5 100644
--- a/frontend/components/hours/HoursWeekView.vue
+++ b/frontend/components/hours/HoursWeekView.vue
@@ -1,7 +1,71 @@
 <template>
   <div class="bg-white overflow-hidden flex min-h-0 flex-col">
     <div v-if="isWeekLoading" class="p-6 text-md text-neutral-600">Chargement de la semaine...</div>
-    <div v-else class="overflow-y-auto min-h-0">
+
+    <!-- Mobile cards -->
+    <div v-else class="overflow-y-auto min-h-0 space-y-3 lg:hidden">
+      <div
+        v-for="row in weeklySummary?.rows ?? []"
+        :key="'m-' + row.employeeId"
+        class="rounded-md border border-primary-500 bg-white p-4"
+      >
+        <div class="mb-3">
+          <p class="text-md font-bold text-primary-500 truncate">
+            {{ row.firstName }} {{ row.lastName }}
+            <span class="font-normal text-neutral-600 text-sm">({{ row.contractName ?? '-' }})</span>
+          </p>
+          <p class="text-xs text-neutral-500 truncate">
+            {{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span>
+          </p>
+        </div>
+
+        <!-- Daily breakdown -->
+        <div class="mb-3 space-y-1">
+          <div
+            v-for="(daily, i) in row.daily"
+            :key="daily.date"
+            class="flex items-center justify-between rounded-md px-2 py-1 text-xs"
+            :class="daily.hasAbsence ? 'text-white' : 'text-primary-500'"
+            :style="getDailyCellStyle(daily)"
+          >
+            <span class="font-semibold">{{ weekDayHeaders[i]?.label ?? '' }}</span>
+            <span v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</span>
+            <span v-else>J {{ formatMinutes(daily.dayMinutes) }} / N {{ formatMinutes(daily.nightMinutes) }}</span>
+          </div>
+        </div>
+
+        <!-- Weekly totals -->
+        <div class="border-t border-neutral-200 pt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
+          <div class="flex justify-between">
+            <span class="text-neutral-500">Total sem.</span>
+            <span class="font-bold text-primary-500">{{ row.trackingMode === 'PRESENCE' ? (row.weeklyPresenceCount ?? 0) : formatMinutes(row.weeklyTotalMinutes) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">H. supp.</span>
+            <span class="font-bold text-primary-500">{{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}</span>
+          </div>
+          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
+            <span class="text-neutral-500">+25%</span>
+            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}</span>
+          </div>
+          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
+            <span class="text-neutral-500">+50%</span>
+            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}</span>
+          </div>
+          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
+            <span class="text-neutral-500">Récup.</span>
+            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}</span>
+          </div>
+          <div v-if="(row.weeklyNightBasketCount ?? 0) > 0" class="flex justify-between">
+            <span class="text-neutral-500">Panier nuit</span>
+            <span class="font-bold text-primary-500">{{ row.weeklyNightBasketCount }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop table -->
+    <div v-if="!isWeekLoading" class="overflow-y-auto min-h-0 hidden lg:block">
       <div
         class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
         :style="{ gridTemplateColumns: weekGridCols }"
diff --git a/frontend/components/ui/TimeSelect.vue b/frontend/components/ui/TimeSelect.vue
index ef1db23..f6011c7 100644
--- a/frontend/components/ui/TimeSelect.vue
+++ b/frontend/components/ui/TimeSelect.vue
@@ -23,7 +23,7 @@
       <button
         type="button"
         tabindex="-1"
-        class="inline-flex h-8 w-8 items-center justify-center rounded text-neutral-600 hover:bg-tertiary-500 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-500"
+        class="hidden lg:inline-flex h-8 w-8 items-center justify-center rounded text-neutral-600 hover:bg-tertiary-500 disabled:cursor-not-allowed disabled:bg-neutral-200 disabled:text-neutral-500"
         :disabled="props.disabled"
         @mousedown.prevent
         @click="toggleOpen"
@@ -149,8 +149,11 @@ const toggleOpen = () => {
   }
 }
 
+const isMobile = () => window.innerWidth < 1024
+
 const openMenu = () => {
   if (props.disabled) return
+  if (isMobile()) return
   if (!isOpen.value) {
     isOpen.value = true
     nextTick(updateMenuPosition)
@@ -165,8 +168,28 @@ const closeMenu = () => {
   isOpen.value = false
 }
 
+const snapToNearest15 = (time: string): string => {
+  const [h, m] = time.split(':').map(Number)
+  const snapped = Math.round(m / 15) * 15
+  if (snapped === 60) {
+    const newH = h + 1
+    if (newH > 23) return '23:45'
+    return `${String(newH).padStart(2, '0')}:00`
+  }
+  return `${String(h).padStart(2, '0')}:${String(snapped).padStart(2, '0')}`
+}
+
 const commitInput = () => {
-  const normalized = normalizeTypedTime(inputValue.value)
+  let value = inputValue.value
+  if (isMobile()) {
+    value = clampTime(value)
+    const normalized = normalizeTypedTime(value)
+    if (normalized !== null && normalized !== '') {
+      value = snapToNearest15(normalized)
+    }
+    inputValue.value = value
+  }
+  const normalized = normalizeTypedTime(value)
   if (normalized === null || (normalized !== '' && !timeSlots.value.includes(normalized))) {
     emit('update:modelValue', '')
     inputValue.value = ''
@@ -184,13 +207,26 @@ const onInput = (event: Event) => {
   if (masked !== inputValue.value) {
     inputValue.value = masked
   }
-  openMenu()
+  if (!isMobile()) {
+    openMenu()
+  }
+}
+
+const clampTime = (value: string): string => {
+  const normalized = normalizeTypedTime(value)
+  if (normalized === null || normalized === '') return value
+  const [h, m] = normalized.split(':').map(Number)
+  if (h > 23 || (h === 23 && m > 45)) return '23:45'
+  return normalized
 }
 
 const onInputBlur = () => {
   // Laisse le temps au click menu de passer avant fermeture.
   setTimeout(() => {
     if (menu.value?.contains(document.activeElement)) return
+    if (isMobile()) {
+      inputValue.value = clampTime(inputValue.value)
+    }
     commitInput()
   }, 50)
 }
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 176d651..cd05d9c 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,11 +1,40 @@
 <template>
     <div class="h-screen overflow-hidden">
         <div class="flex h-full">
-            <aside class="flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500">
-                <div class="h-[75px]">
+            <!-- Mobile overlay -->
+            <Transition
+                enter-active-class="transition-opacity duration-300"
+                enter-from-class="opacity-0"
+                enter-to-class="opacity-100"
+                leave-active-class="transition-opacity duration-300"
+                leave-from-class="opacity-100"
+                leave-to-class="opacity-0"
+            >
+                <div
+                    v-if="sidebarOpen"
+                    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
+                    @click="sidebarOpen = false"
+                />
+            </Transition>
+
+            <!-- Sidebar -->
+            <aside
+                :class="[
+                    'fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:translate-x-0 lg:flex-shrink-0',
+                    sidebarOpen ? 'translate-x-0' : '-translate-x-full'
+                ]"
+            >
+                <div class="flex h-[75px] items-center justify-between">
                     <img src="/malio.png" alt="Logo" class="w-auto"/>
+                    <button
+                        type="button"
+                        class="mr-3 rounded-md p-1 text-primary-500 hover:text-secondary-500 lg:hidden"
+                        @click="sidebarOpen = false"
+                    >
+                        <Icon name="mdi:close" size="24"/>
+                    </button>
                 </div>
-                <nav class="flex-1 px-4 pb-6">
+                <nav class="flex-1 overflow-y-auto px-4 pb-6">
                     <template v-if="isAdmin">
                         <NuxtLink
                             to="/calendar"
@@ -13,6 +42,7 @@
                             :class="route.path.startsWith('/calendar')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:calendar-blank" size="24"/>
                             <p>Calendrier</p>
@@ -26,6 +56,7 @@
                             route.path.startsWith('/hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
                             !isAdmin ? 'border-t border-secondary-500 pt-3' : ''
                         ]"
+                        @click="closeSidebarOnMobile"
                     >
                         <Icon name="mdi:clock-time-four-outline" size="24"/>
                         <p>Heures</p>
@@ -38,6 +69,7 @@
                             route.path.startsWith('/driver-hours') ? 'bg-tertiary-500 text-primary-500 font-bold' : '',
                             !isAdmin && isDriver ? 'border-t border-secondary-500 pt-3' : ''
                         ]"
+                        @click="closeSidebarOnMobile"
                     >
                         <Icon name="mdi:truck-outline" size="24"/>
                         <p>Heures Conducteurs</p>
@@ -49,6 +81,7 @@
                             :class="route.path.startsWith('/employees')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:account-group-outline" size="24"/>
                             <p>Employés</p>
@@ -60,6 +93,7 @@
                             :class="route.path.startsWith('/leave-recap')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:beach" size="24"/>
                             <p>Récap. congés</p>
@@ -70,6 +104,7 @@
                             :class="route.path.startsWith('/sites')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:business" size="24"/>
                             <p>Sites</p>
@@ -80,6 +115,7 @@
                             :class="route.path.startsWith('/absence-types')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:umbrella-beach-outline" size="24"/>
                             <p>Types de statut</p>
@@ -90,6 +126,7 @@
                             :class="route.path.startsWith('/users')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                            @click="closeSidebarOnMobile"
                         >
                             <Icon name="mdi:account-outline" size="24"/>
                             <p>Utilisateurs</p>
@@ -100,6 +137,7 @@
                         to="/leave-recap"
                         class="flex items-center gap-2 py-3 text-md text-black hover:bg-tertiary-500 hover:text-primary-500 pt-3"
                         :class="route.path.startsWith('/leave-recap') ? 'bg-tertiary-500 text-primary-500 font-bold' : ''"
+                        @click="closeSidebarOnMobile"
                     >
                         <Icon name="mdi:beach" size="24"/>
                         <p>Récap. congés</p>
@@ -111,6 +149,7 @@
                         :class="route.path.startsWith('/audit-logs')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                        @click="closeSidebarOnMobile"
                     >
                         <Icon name="mdi:clipboard-text-clock-outline" size="24"/>
                         <p>Journal</p>
@@ -121,6 +160,7 @@
                         :class="route.path.startsWith('/documentation')
                             ? 'bg-tertiary-500 text-primary-500 font-bold'
                             : ''"
+                        @click="closeSidebarOnMobile"
                     >
                         <Icon name="mdi:book-open-page-variant-outline" size="24"/>
                         <p>Documentation</p>
@@ -132,9 +172,9 @@
                 </div>
             </aside>
 
-            <div class="h-full flex-1 overflow-hidden flex flex-col">
-                <AppTopNav :user="auth.user" />
-                <main class="flex-1 overflow-y-auto px-8 py-12">
+            <div class="h-full flex-1 overflow-hidden flex flex-col min-w-0">
+                <AppTopNav :user="auth.user" @toggle-sidebar="sidebarOpen = !sidebarOpen" />
+                <main class="flex-1 overflow-y-auto px-4 py-6 lg:px-8 lg:py-12">
                     <slot/>
                 </main>
             </div>
@@ -150,4 +190,9 @@ const isSuperAdmin = computed(() => auth.user?.roles?.includes('ROLE_SUPER_ADMIN
 const isDriver = computed(() => auth.user?.isDriver ?? false)
 const hasLeaveRecapAccess = computed(() => auth.user?.hasLeaveRecapAccess ?? false)
 const route = useRoute()
+const sidebarOpen = ref(false)
+
+const closeSidebarOnMobile = () => {
+    sidebarOpen.value = false
+}
 </script>
diff --git a/frontend/pages/hours.vue b/frontend/pages/hours.vue
index c883a21..e166800 100644
--- a/frontend/pages/hours.vue
+++ b/frontend/pages/hours.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="h-full overflow-hidden flex flex-col">
         <div class="flex flex-wrap items-center justify-between gap-4">
-            <h1 class="text-4xl font-bold text-primary-500">Heures</h1>
+            <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Heures</h1>
         </div>
 
         <HoursToolbar
diff --git a/frontend/pages/leave-recap.vue b/frontend/pages/leave-recap.vue
index 83a3f3d..2ed16a4 100644
--- a/frontend/pages/leave-recap.vue
+++ b/frontend/pages/leave-recap.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="h-full flex flex-col overflow-hidden">
     <div class="flex flex-wrap items-center justify-between gap-4 pb-8">
-      <h1 class="text-4xl font-bold text-primary-500">Récap. congés</h1>
+      <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Récap. congés</h1>
       <span
         v-if="cutoffLabel"
         class="inline-flex items-center gap-2 rounded-full bg-tertiary-500 px-4 py-1 text-sm font-semibold text-primary-500"
@@ -25,7 +25,8 @@
       Aucun employé à afficher.
     </div>
 
-    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+    <!-- Desktop table -->
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white hidden lg:block">
       <div
         :class="`grid ${gridColsClass} gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10`"
       >
@@ -64,6 +65,47 @@
         </div>
       </div>
     </div>
+
+    <!-- Mobile cards -->
+    <div v-if="!isLoading && rows.length > 0" class="min-h-0 overflow-auto space-y-3 lg:hidden">
+      <div
+        v-for="row in rows"
+        :key="'m-' + row.employeeId"
+        class="rounded-md border border-primary-500 bg-white p-4"
+      >
+        <div class="mb-3 flex items-center justify-between gap-2">
+          <p class="text-md font-bold text-primary-500 truncate">
+            {{ row.lastName }} {{ row.firstName }}
+          </p>
+          <span
+            v-if="showSiteColumn && row.siteName"
+            class="inline-block shrink-0 rounded-full px-3 py-1 text-sm"
+            :style="{ backgroundColor: row.siteColor || '#ffd7d7', color: '#1a1a1a' }"
+          >
+            {{ row.siteName }}
+          </span>
+        </div>
+        <p v-if="row.contractName" class="mb-3 text-sm text-neutral-600">{{ row.contractName }}</p>
+        <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+          <div class="flex justify-between">
+            <span class="text-neutral-500">CP N-1</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ formatNumber(row.cpN1Remaining) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">Samedis</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ row.acquiredSaturdays }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">CP N</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ formatNumber(row.cpN) }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-neutral-500">RTT</span>
+            <span class="font-bold text-primary-500 tabular-nums">{{ row.rtt }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index 2757209..de052c4 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="h-full flex flex-col overflow-hidden">
     <div class="flex items-center justify-between pb-6">
-      <h1 class="text-4xl font-bold text-primary-500">Utilisateurs</h1>
+      <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Utilisateurs</h1>
       <button
         type="button"
-        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        class="rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-secondary-500 lg:px-4 lg:text-md"
         @click="openCreate"
       >
-        + Ajouter un utilisateur
+        + Ajouter
       </button>
     </div>
 
@@ -18,7 +18,8 @@
       Aucun utilisateur pour le moment.
     </div>
 
-    <div v-else class="min-h-0 overflow-auto rounded-md bg-white">
+    <!-- Desktop table -->
+    <div v-else class="min-h-0 overflow-auto rounded-md bg-white hidden lg:block">
       <div class="grid grid-cols-5 gap-4 border border-black bg-tertiary-500 px-6 py-3 text-[20px] font-semibold text-black rounded-t-md sticky top-0 z-10">
         <span class="text-left">Utilisateur</span>
         <span class="text-left">Employé</span>
@@ -56,6 +57,42 @@
       </div>
     </div>
 
+    <!-- Mobile cards -->
+    <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500 lg:hidden">
+      Chargement...
+    </div>
+    <div v-else-if="users.length > 0" class="min-h-0 overflow-auto space-y-3 lg:hidden">
+      <div
+        v-for="user in users"
+        :key="'m-' + user.id"
+        class="rounded-md border border-primary-500 bg-white p-4 cursor-pointer active:bg-tertiary-500"
+        @click="openEdit(user)"
+      >
+        <div class="flex items-center justify-between gap-2 mb-2">
+          <p class="text-md font-bold text-primary-500 truncate">{{ user.username }}</p>
+          <span
+            v-if="user.isLocked"
+            class="shrink-0 inline-block rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-700"
+          >Verrouillé</span>
+          <span
+            v-else
+            class="shrink-0 inline-block rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-700"
+          >Actif</span>
+        </div>
+        <div class="space-y-1 text-sm">
+          <p v-if="user.employee" class="text-neutral-600">
+            {{ user.employee.firstName }} {{ user.employee.lastName }}
+          </p>
+          <p class="text-neutral-500">
+            Accès : <span class="font-semibold text-primary-500">{{ getAccessLabel(user) }}</span>
+          </p>
+          <p v-if="getSiteLabels(user) !== '-'" class="text-neutral-500 truncate">
+            Sites : <span class="font-semibold text-primary-500">{{ getSiteLabels(user) }}</span>
+          </p>
+        </div>
+      </div>
+    </div>
+
     <AppDrawer
       v-model="isDrawerOpen"
       :title="editingUser ? 'Modifier un utilisateur' : 'Ajouter un utilisateur'"

From 3926946a5f3ec87e5fa96dcaf1000a85f3045ba7 Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Mon, 20 Apr 2026 10:12:10 +0000
Subject: [PATCH 12/23] chore: bump version to v0.1.94

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index a2a7a4b..e8386b7 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.93'
+    app.version: '0.1.94'

From 8a449cf81bd1d8b5f2fa5ccbce58ba4528945ff0 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 20 Apr 2026 16:17:28 +0200
Subject: [PATCH 13/23] =?UTF-8?q?feat=20:=20paiement=20RTT=20en=20centi?=
 =?UTF-8?q?=C3=A8mes=20d'heures=20+=20auto-calcul=20bonus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Input step passé de 0.5 à 0.01 pour accepter les centièmes (xx,xx)
- Labels mis à jour "(centièmes)" au lieu de "(heures)"
- Auto-remplissage du bonus 25% (base × 0.25) et 50% (base × 0.50)
- Ligne "Payé" affiche désormais les centièmes en gris comme les autres lignes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/components/employees/RttTab.vue | 46 ++++++++++++++----------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/frontend/components/employees/RttTab.vue b/frontend/components/employees/RttTab.vue
index dc6b577..12ef983 100644
--- a/frontend/components/employees/RttTab.vue
+++ b/frontend/components/employees/RttTab.vue
@@ -149,13 +149,13 @@
           <tr>
             <td class="px-5 py-[10px] font-bold text-primary-500 border border-primary-500">Payé</td>
             <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-r-2">-</td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase25Minutes) : '0 h' }}</td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus25Minutes) : '0 h' }}</td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase25Minutes + currentPayment.paidBonus25Minutes)) : '0 h' }}</td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase50Minutes) : '0 h' }}</td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus50Minutes) : '0 h' }}</td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase50Minutes + currentPayment.paidBonus50Minutes)) : '0 h' }}</td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(paidTotal) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase25Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBase25Minutes : 0) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus25Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBonus25Minutes : 0) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase25Minutes + currentPayment.paidBonus25Minutes)) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -(currentPayment.paidBase25Minutes + currentPayment.paidBonus25Minutes) : 0) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase50Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBase50Minutes : 0) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus50Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBonus50Minutes : 0) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase50Minutes + currentPayment.paidBonus50Minutes)) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -(currentPayment.paidBase50Minutes + currentPayment.paidBonus50Minutes) : 0) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(paidTotal) }} <span class="text-neutral-400">/ {{ formatCentiemes(paidTotal) }}</span></td>
           </tr>
 
           <!-- Reste row -->
@@ -187,41 +187,41 @@
           </select>
         </div>
         <div class="mb-4">
-          <label class="block text-sm font-medium text-neutral-700">Base 25% (heures)</label>
+          <label class="block text-sm font-medium text-neutral-700">Base 25% (centièmes)</label>
           <input
             v-model.number="paymentForm.base25Hours"
             type="number"
-            step="0.5"
+            step="0.01"
             min="0"
             class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
           />
         </div>
         <div class="mb-4">
-          <label class="block text-sm font-medium text-neutral-700">Heures 25% (heures)</label>
+          <label class="block text-sm font-medium text-neutral-700">Heures 25% (centièmes)</label>
           <input
             v-model.number="paymentForm.bonus25Hours"
             type="number"
-            step="0.5"
+            step="0.01"
             min="0"
             class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
           />
         </div>
         <div class="mb-4">
-          <label class="block text-sm font-medium text-neutral-700">Base 50% (heures)</label>
+          <label class="block text-sm font-medium text-neutral-700">Base 50% (centièmes)</label>
           <input
             v-model.number="paymentForm.base50Hours"
             type="number"
-            step="0.5"
+            step="0.01"
             min="0"
             class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
           />
         </div>
         <div class="mb-6">
-          <label class="block text-sm font-medium text-neutral-700">Heures 50% (heures)</label>
+          <label class="block text-sm font-medium text-neutral-700">Heures 50% (centièmes)</label>
           <input
             v-model.number="paymentForm.bonus50Hours"
             type="number"
-            step="0.5"
+            step="0.01"
             min="0"
             class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
           />
@@ -500,10 +500,10 @@ const paymentForm = reactive({
 const prefillFromExistingPayment = (month: number) => {
   const existing = props.summary?.monthPayments.find((p) => p.month === month) ?? null
   if (existing) {
-    paymentForm.base25Hours = existing.paidBase25Minutes / 60
-    paymentForm.bonus25Hours = existing.paidBonus25Minutes / 60
-    paymentForm.base50Hours = existing.paidBase50Minutes / 60
-    paymentForm.bonus50Hours = existing.paidBonus50Minutes / 60
+    paymentForm.base25Hours = Math.round(existing.paidBase25Minutes / 60 * 100) / 100
+    paymentForm.bonus25Hours = Math.round(existing.paidBonus25Minutes / 60 * 100) / 100
+    paymentForm.base50Hours = Math.round(existing.paidBase50Minutes / 60 * 100) / 100
+    paymentForm.bonus50Hours = Math.round(existing.paidBonus50Minutes / 60 * 100) / 100
   } else {
     paymentForm.base25Hours = 0
     paymentForm.bonus25Hours = 0
@@ -516,6 +516,14 @@ watch(() => paymentForm.month, (newMonth) => {
   prefillFromExistingPayment(newMonth)
 })
 
+watch(() => paymentForm.base25Hours, (value) => {
+  paymentForm.bonus25Hours = Math.round(value * 0.25 * 100) / 100
+})
+
+watch(() => paymentForm.base50Hours, (value) => {
+  paymentForm.bonus50Hours = Math.round(value * 0.50 * 100) / 100
+})
+
 const openPaymentDrawer = () => {
   paymentForm.month = currentMonth.value
   prefillFromExistingPayment(currentMonth.value)

From 90843dd9972ff5e248f6b4e8bc1b71017aac938d Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Mon, 20 Apr 2026 14:19:05 +0000
Subject: [PATCH 14/23] chore: bump version to v0.1.95

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index e8386b7..9027f77 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.94'
+    app.version: '0.1.95'

From cc868a1e82d56fe4320776dccf28900005772c43 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 27 Apr 2026 12:08:24 +0000
Subject: [PATCH 15/23] =?UTF-8?q?feat:=20ajout=20malio=20UI=20+=20d=C3=A9c?=
 =?UTF-8?q?ompte=20des=20jours=20de=20pr=C3=A9sence=20forfait=20(#17)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

## Description de la PR

## Modification du .env

## Check list

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

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/SIRH/pulls/17
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
---
 CLAUDE.md                                     |   4 +
 doc/functional-rules.md                       |   9 +-
 frontend/.npmrc                               |   1 +
 frontend/components/AbsenceFormDrawer.vue     | 130 ++++-----
 frontend/components/AppDrawer.vue             |   2 +-
 .../components/EmployeeNameFilterInput.vue    |  26 --
 frontend/components/SiteFilterSelector.vue    |  69 -----
 .../driver-hours/DriverHoursDayView.vue       |   3 +-
 frontend/components/hours/HoursDayView.vue    |   5 +-
 frontend/components/hours/HoursToolbar.vue    |  40 ++-
 frontend/composables/useDriverHoursPage.ts    |   5 +
 frontend/composables/useEmployeeDetailPage.ts |  14 +-
 frontend/composables/useHoursPage.ts          |   5 +
 frontend/data/documentation-content.ts        |   2 +
 frontend/layouts/default.vue                  |   2 +-
 frontend/nuxt.config.ts                       |   1 +
 frontend/package-lock.json                    | 260 +++++++-----------
 frontend/package.json                         |   1 +
 frontend/pages/absence-types.vue              | 143 ++++------
 frontend/pages/calendar.vue                   |  58 ++--
 frontend/pages/driver-hours.vue               |   2 +
 frontend/pages/employees/[id].vue             |   3 +-
 frontend/pages/employees/index.vue            | 219 ++++++++++-----
 frontend/pages/hours.vue                      |   2 +
 frontend/pages/login.vue                      |  35 +--
 frontend/pages/sites.vue                      |  84 ++----
 frontend/pages/users.vue                      | 164 ++++-------
 .../services/dto/employee-leave-summary.ts    |   1 +
 frontend/services/dto/work-hour.ts            |   1 +
 src/ApiResource/EmployeeLeaveSummary.php      |   3 +
 src/Dto/WorkHours/DayContextRow.php           |   5 +-
 src/Service/Leave/LeaveRecapRowBuilder.php    |   2 +-
 src/State/EmployeeLeaveSummaryProvider.php    |  56 +++-
 src/State/WorkHourDayContextProvider.php      |   8 +-
 .../State/WorkHourDayContextProviderTest.php  |   5 +
 35 files changed, 652 insertions(+), 718 deletions(-)
 create mode 100644 frontend/.npmrc
 delete mode 100644 frontend/components/EmployeeNameFilterInput.vue
 delete mode 100644 frontend/components/SiteFilterSelector.vue

diff --git a/CLAUDE.md b/CLAUDE.md
index a9aa367..cd33261 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -15,6 +15,7 @@
 ## Stack
 - Backend: Symfony + API Platform + Doctrine ORM
 - Frontend: Nuxt 4 + Vue 3 + TypeScript + Tailwind CSS
+- UI library: `@malio/layer-ui` (Nuxt layer, `extends: ['@malio/layer-ui']` dans `nuxt.config.ts`). Composants auto-importés avec préfixe `Malio*` (ex. `MalioSelectCheckbox`, `MalioInputText`…). Doc d'usage dans `node_modules/@malio/layer-ui/COMPONENTS.md`. Tokens Tailwind `m-*` (primary/muted/danger/success/…) et variables CSS `--m-*` fournies par la couche.
 
 ## Project Structure
 - `src/` — Symfony domain, API resources, state providers/processors, services
@@ -32,6 +33,8 @@
 - Contract nature (per period): CDI, CDD, INTERIM
 - **Agence d'intérim** (`InterimAgency` entity, table `interim_agencies`): optionnelle sur `EmployeeContractPeriod` quand nature = INTERIM. Pas de CRUD UI — gérée en BDD. API lecture seule `GET /interim_agencies`. Affichée "Intérim (NomAgence)" sur la liste employés et l'historique contrat.
 - Employee contract history: `employee_contract_periods`, resolved by `EmployeeContractResolver`
+- **Écrans Heures / Heures Conducteurs (vue jour)** : le libellé nature (CDI/CDD/Intérim) sous le nom de l'employé est résolu **à la date filtrée** via `WorkHourDayContext.contractNature` (alimenté par `EmployeeContractResolver::resolveNatureForEmployeeAndDate`), pas via `Employee.currentContractNature` (qui est résolu à aujourd'hui).
+- **Écran Calendrier** : un employé est affiché uniquement si au moins une de ses périodes de contrat (`employee.contractHistory`) intersecte le mois affiché (`[1er ; dernier jour]`). Filtre côté frontend dans `visibleEmployees` (`pages/calendar.vue`).
 - **Planning jours travaillés** (`EmployeeContractPeriod.workDaysHours` : JSON `{iso_day: minutes}`) : obligatoire pour tout contrat TIME **hors 35h/39h/INTERIM** (ex. 4h, 25h, 28h). Somme = `weeklyHours × 60`. Utilisé par `HolidayVirtualHoursResolver` (crédit férié) et `WorkedHoursCreditPolicy` (crédit absence) pour ne créditer que les jours effectivement travaillés. Validation : `EmployeeContractPeriodValidator::assertWorkDaysHours`.
 - Absences: stored per day (auto-split), AM/PM/full day, clear corresponding hour slots
 - Absences with `countAsWorkedHours=true`: credit minutes (TIME) or nothing (PRESENCE)
@@ -58,6 +61,7 @@
 - INTERIM: no overtime bonuses, no recovery time
 - Driver contracts: RTT uses `dayHoursMinutes + nightHoursMinutes + workshopHoursMinutes` instead of morning/afternoon/evening time ranges
 - FORFAIT weekend/holiday bonus: each weekend or public holiday day worked gives bonus leave (full day if morning+afternoon, 0.5 if only one). Added to acquired days, no cap. PRESENCE mode only.
+- **FORFAIT — jours de présence et N-1** : les congés posés et imputés sur le stock N-1 ne décrémentent **pas** les jours de présence affichés (`presenceDaysByMonth` et `presenceDaysToToday`). Implémenté dans `EmployeeLeaveSummaryProvider::computePresenceDaysByMonth` via un budget N-1 (= `previousYearTakenDays`) consommé chronologiquement avant comptage des absences. Pour les non-forfait, ce budget vaut toujours 0 → comportement inchangé.
 
 ## Récap. congés (écran)
 - Accès via sidebar `Récap. congés`, conditionné au flag `User.hasLeaveRecapAccess` (défaut `false`) — activé au create/edit user. Le flag s'applique à tous les profils, y compris admin.
diff --git a/doc/functional-rules.md b/doc/functional-rules.md
index e732e9f..3be0d1d 100644
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -58,6 +58,9 @@ Documents complementaires:
   - mise à jour uniquement quand un employé (`ROLE_SELF`) modifie ses propres heures
   - non mise à jour lors de modifications admin ou chef de site
   - affichée sous le nom de l'employé (visible admin uniquement)
+- Libellé nature de contrat (CDI/CDD/Intérim) affiché sous le nom:
+  - résolu à la date filtrée (période de contrat couvrant ce jour), pas à aujourd'hui
+  - masqué si aucun contrat à cette date (cas rarissime en vue jour puisque l'employé est alors déjà filtré)
 
 ## 4) Absences
 
@@ -71,6 +74,10 @@ Documents complementaires:
 - Calendrier congés: fond coloré selon la couleur du type d'absence (`AbsenceType.color`)
   - demi-journée: dégradé diagonal
   - journée complète: fond plein
+- Visibilité des employés dans le Calendrier:
+  - un employé est affiché si au moins une de ses périodes de contrat intersecte le mois affiché
+  - un employé dont toutes les périodes se terminent avant le 1er du mois (ou commencent après la fin du mois) est masqué
+  - même logique que l'écran Heures : « pas de contrat sur la période → masqué »
 
 ### Effet absence sur les heures
 
@@ -328,7 +335,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 | Contrat | Contract.name |
 | CP N-1 restant | CDI/CDD: acquis N-1 − pris sur N-1. Forfait: report N-1 restant |
 | Samedi restant | CDI/CDD: samedis acquis N-1 − pris. Forfait: `-` |
-| CP N | Forfait: jours acquis année civile. Non-forfait: en cours d'acquisition |
+| CP N | Forfait: restant sur quota année civile (acquis − pris depuis N, sans toucher au stock N-1). Non-forfait: en cours d'acquisition |
 | RTT | Minutes disponibles (report N-1 + acquis N - payés). Format `X h Y m`. Forfait et INTERIM: `-` |
 
 ## 10bis) Écran Récap. congés (tableau)
diff --git a/frontend/.npmrc b/frontend/.npmrc
new file mode 100644
index 0000000..303a6d3
--- /dev/null
+++ b/frontend/.npmrc
@@ -0,0 +1 @@
+@malio:registry=https://gitea.malio.fr/api/packages/MALIO-DEV/npm/
diff --git a/frontend/components/AbsenceFormDrawer.vue b/frontend/components/AbsenceFormDrawer.vue
index ec25735..d663372 100644
--- a/frontend/components/AbsenceFormDrawer.vue
+++ b/frontend/components/AbsenceFormDrawer.vue
@@ -1,44 +1,26 @@
 <template>
     <AppDrawer v-model="drawerOpen" title="Nouvelle absence">
         <form class="space-y-4" @submit.prevent="handleSubmit">
-            <div>
-                <label class="text-md font-semibold text-neutral-700" for="employee">
-                    Employé <span class="text-red-600">*</span>
-                </label>
-                <select
-                    id="employee"
-                    v-model="absenceForm.employeeId"
-                    :class="employeeFieldClass"
-                    :disabled="props.lockEmployee"
-                >
-                    <option value="" disabled>Choisir un employé</option>
-                    <option v-for="employee in employees" :key="employee.id" :value="employee.id">
-                        {{ employee.firstName }} {{ employee.lastName }}
-                    </option>
-                </select>
-                <p v-if="showEmployeeError" class="mt-1 text-sm text-red-600">
-                    L'employé est obligatoire.
-                </p>
-            </div>
+            <MalioSelect
+                :model-value="absenceForm.employeeId === '' ? null : absenceForm.employeeId"
+                :options="employeeOptions"
+                label="Employé *"
+                empty-option-label="Choisir un employé"
+                min-width=""
+                :disabled="props.lockEmployee"
+                :error="showEmployeeError ? `L'employé est obligatoire.` : ''"
+                @update:model-value="onEmployeeChange"
+            />
 
-            <div>
-                <label class="text-md font-semibold text-neutral-700" for="type">
-                    Type d'absence <span class="text-red-600">*</span>
-                </label>
-                <select
-                    id="type"
-                    v-model="absenceForm.typeId"
-                    :class="typeFieldClass"
-                >
-                    <option value="" disabled>Choisir un type</option>
-                    <option v-for="type in absenceTypes" :key="type.id" :value="type.id">
-                        {{ type.label }} ({{ type.code }})
-                    </option>
-                </select>
-                <p v-if="showTypeError" class="mt-1 text-sm text-red-600">
-                    Le type d'absence est obligatoire.
-                </p>
-            </div>
+            <MalioSelect
+                :model-value="absenceForm.typeId === '' ? null : absenceForm.typeId"
+                :options="typeOptions"
+                label="Type d'absence *"
+                empty-option-label="Choisir un type"
+                min-width=""
+                :error="showTypeError ? `Le type d'absence est obligatoire.` : ''"
+                @update:model-value="onTypeChange"
+            />
 
             <div class="space-y-4">
                 <div>
@@ -48,17 +30,15 @@
                             id="start-date"
                             v-model="absenceForm.startDate"
                             type="date"
-                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                            :class="[dateInputBaseClass, absenceForm.startDate ? 'border-black' : 'border-m-muted']"
                             :disabled="props.lockDates"
                         />
-                        <select
-                            v-model="absenceForm.startHalf"
-                            class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-                        >
-                            <option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
-                                {{ half.label }}
-                            </option>
-                        </select>
+                        <MalioSelect
+                            :model-value="absenceForm.startHalf"
+                            :options="halfDayOptions"
+                            min-width=""
+                            @update:model-value="(v) => { if (v !== null) absenceForm.startHalf = v as HalfDay }"
+                        />
                     </div>
                 </div>
                 <div>
@@ -68,17 +48,15 @@
                             id="end-date"
                             v-model="absenceForm.endDate"
                             type="date"
-                            class="w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                            :class="[dateInputBaseClass, absenceForm.endDate ? 'border-black' : 'border-m-muted']"
                             :disabled="props.lockDates"
                         />
-                        <select
-                            v-model="absenceForm.endHalf"
-                            class="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-                        >
-                            <option v-for="half in HALF_DAYS" :key="half.value" :value="half.value">
-                                {{ half.label }}
-                            </option>
-                        </select>
+                        <MalioSelect
+                            :model-value="absenceForm.endHalf"
+                            :options="halfDayOptions"
+                            min-width=""
+                            @update:model-value="(v) => { if (v !== null) absenceForm.endHalf = v as HalfDay }"
+                        />
                     </div>
                 </div>
             </div>
@@ -110,13 +88,12 @@
                 </button>
             </div>
             <div v-else class="flex justify-center pt-2">
-                <button
+                <MalioButton
                     type="submit"
-                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                    :class="submitButtonClass"
-                >
-                    + Ajouter
-                </button>
+                    label="Valider"
+                    button-class="w-[200px]"
+                    :disabled="props.isSubmitting || !isFormValid"
+                />
             </div>
         </form>
     </AppDrawer>
@@ -189,20 +166,23 @@ const submitButtonClass = computed(() => {
     return ''
 })
 
-const baseSelectClass =
-    'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-const employeeFieldClass = computed(() => {
-    if (showEmployeeError.value) {
-        return `${baseSelectClass} border-red-500`
-    }
-    return `${baseSelectClass} border-neutral-300`
-})
-const typeFieldClass = computed(() => {
-    if (showTypeError.value) {
-        return `${baseSelectClass} border-red-500`
-    }
-    return `${baseSelectClass} border-neutral-300`
-})
+const employeeOptions = computed(() =>
+    props.employees.map((e) => ({ label: `${e.firstName} ${e.lastName}`, value: e.id }))
+)
+const typeOptions = computed(() =>
+    props.absenceTypes.map((t) => ({ label: `${t.label} (${t.code})`, value: t.id }))
+)
+const halfDayOptions = HALF_DAYS.map((h) => ({ label: h.label, value: h.value }))
+
+const dateInputBaseClass =
+    'h-10 w-full rounded-md border px-3 text-md text-black outline-none focus:border-2 focus:border-m-primary'
+
+const onEmployeeChange = (value: string | number | null) => {
+    absenceForm.value.employeeId = value === null ? '' : Number(value)
+}
+const onTypeChange = (value: string | number | null) => {
+    absenceForm.value.typeId = value === null ? '' : Number(value)
+}
 
 watch(
     () => props.modelValue,
diff --git a/frontend/components/AppDrawer.vue b/frontend/components/AppDrawer.vue
index 553721e..ce60222 100644
--- a/frontend/components/AppDrawer.vue
+++ b/frontend/components/AppDrawer.vue
@@ -17,7 +17,7 @@
             <Icon name="mdi:close" size="24"/>
           </button>
         </div>
-        <div class="min-h-0 flex-1 overflow-y-auto px-[20px] pb-4">
+        <div class="min-h-0 flex-1 overflow-y-auto px-[20px] pb-4 pt-1">
           <slot />
         </div>
       </div>
diff --git a/frontend/components/EmployeeNameFilterInput.vue b/frontend/components/EmployeeNameFilterInput.vue
deleted file mode 100644
index f77a596..0000000
--- a/frontend/components/EmployeeNameFilterInput.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div class="relative w-full max-w-[340px]">
-        <input
-            id="employee-search"
-            v-model="model"
-            type="text"
-            :placeholder="placeholder"
-            class="h-10 w-full rounded-md border border-neutral-300 bg-white pl-3 pr-10 text-md text-neutral-900"
-        />
-        <Icon
-            name="mdi:magnify"
-            size="18"
-            class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-const model = defineModel<string>({required: true})
-
-withDefaults(defineProps<{
-    placeholder?: string
-}>(), {
-    placeholder: "Recherche d'un employé"
-})
-</script>
diff --git a/frontend/components/SiteFilterSelector.vue b/frontend/components/SiteFilterSelector.vue
deleted file mode 100644
index b0ea53d..0000000
--- a/frontend/components/SiteFilterSelector.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <div ref="root" class="relative inline-block w-fit max-w-full">
-    <button
-      type="button"
-      class="inline-flex w-[320px] min-h-10 items-center justify-between gap-2 rounded-md border border-primary-500 bg-white px-3 py-2 text-md font-semibold text-primary-500 hover:bg-tertiary-500"
-      @click="isOpen = !isOpen"
-    >
-      <span>Sites</span>
-      <span class="inline-flex items-center gap-2">
-        <span class="text-sm font-medium text-neutral-600">{{ selectedCount }}/{{ sites.length }}</span>
-        <Icon :name="isOpen ? 'mdi:chevron-up' : 'mdi:chevron-down'" size="18" />
-      </span>
-    </button>
-
-    <div
-      v-if="isOpen"
-      class="z-50 absolute left-0 top-full z-20 mt-2 max-h-80 w-full overflow-auto rounded-md border border-neutral-200 bg-white p-3 shadow-lg"
-    >
-      <div class="flex flex-col gap-2">
-        <label
-          v-for="site in sites"
-          :key="site.id"
-          :for="`site-${site.id}`"
-          class="flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-tertiary-500"
-        >
-          <input
-            :id="`site-${site.id}`"
-            v-model="selectedSiteIds"
-            :value="site.id"
-            type="checkbox"
-            class="h-4 w-4"
-          />
-          <span class="text-md text-neutral-800">{{ site.name }}</span>
-        </label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import type { Site } from '~/services/dto/site'
-
-const selectedSiteIds = defineModel<number[]>({ required: true })
-const isOpen = ref(false)
-const root = ref<HTMLElement | null>(null)
-
-defineProps<{
-  sites: Site[]
-}>()
-
-const selectedCount = computed(() => selectedSiteIds.value.length)
-
-const handleClickOutside = (event: MouseEvent) => {
-  const target = event.target as Node | null
-  if (!root.value || !target) return
-  if (!root.value.contains(target)) {
-    isOpen.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
-</script>
diff --git a/frontend/components/driver-hours/DriverHoursDayView.vue b/frontend/components/driver-hours/DriverHoursDayView.vue
index 4aebc0a..a6e9afc 100644
--- a/frontend/components/driver-hours/DriverHoursDayView.vue
+++ b/frontend/components/driver-hours/DriverHoursDayView.vue
@@ -43,7 +43,7 @@
                         </p>
                         <p class="text-neutral-500 truncate inline-flex items-center gap-2">
                             <span>
-                                {{ employee.site?.name ?? 'Sans site' }}<span v-if="employee.currentContractNature"> — {{ contractNatureLabel(employee.currentContractNature) }}</span>
+                                {{ employee.site?.name ?? 'Sans site' }}<span v-if="getRowContractNature(employee.id)"> — {{ contractNatureLabel(getRowContractNature(employee.id) ?? undefined) }}</span>
                             </span>
                             <span
                                 v-if="isAdmin && (rows[employee.id]?.isSiteValid ?? false)"
@@ -205,6 +205,7 @@ const props = defineProps<{
     getRowMetrics: (employeeId: number) => { dayMinutes: number; nightMinutes: number; workshopMinutes: number; totalMinutes: number; virtualHolidayMinutes: number }
     getRowAbsenceLabel: (employeeId: number) => string
     getRowAbsenceStyle: (employeeId: number) => { backgroundColor: string } | undefined
+    getRowContractNature: (employeeId: number) => 'CDI' | 'CDD' | 'INTERIM' | null
     getRowUpdatedAt: (employeeId: number) => string
     onAbsenceClick: (employeeId: number) => void
     formatMinutes: (minutes: number) => string
diff --git a/frontend/components/hours/HoursDayView.vue b/frontend/components/hours/HoursDayView.vue
index 4230886..21e9c2b 100644
--- a/frontend/components/hours/HoursDayView.vue
+++ b/frontend/components/hours/HoursDayView.vue
@@ -14,7 +14,7 @@
                         <span class="font-normal text-neutral-600 text-sm">({{ contractLabel(employee) }})</span>
                     </p>
                     <p class="text-sm text-neutral-500 truncate">
-                        {{ employee.site?.name ?? 'Sans site' }}<span v-if="employee.currentContractNature"> — {{ contractNatureLabel(employee.currentContractNature) }}</span>
+                        {{ employee.site?.name ?? 'Sans site' }}<span v-if="getRowContractNature(employee.id)"> — {{ contractNatureLabel(getRowContractNature(employee.id) ?? undefined) }}</span>
                     </p>
                 </div>
 
@@ -212,7 +212,7 @@
                     </p>
                     <p class="text-neutral-500 truncate inline-flex items-center gap-2">
                         <span>
-                            {{ employee.site?.name ?? 'Sans site' }}<span v-if="employee.currentContractNature"> — {{ contractNatureLabel(employee.currentContractNature) }}</span>
+                            {{ employee.site?.name ?? 'Sans site' }}<span v-if="getRowContractNature(employee.id)"> — {{ contractNatureLabel(getRowContractNature(employee.id) ?? undefined) }}</span>
                         </span>
                         <span
                             v-if="isAdmin && (rows[employee.id]?.isSiteValid ?? false)"
@@ -405,6 +405,7 @@ const props = defineProps<{
     getRowAbsenceStyle: (employeeId: number) => { backgroundColor: string } | undefined
     hasRowFormation: (employeeId: number) => boolean
     getRowFormationLabel: (employeeId: number) => string
+    getRowContractNature: (employeeId: number) => 'CDI' | 'CDD' | 'INTERIM' | null
     getRowUpdatedAt: (employeeId: number) => string
     getPresenceDayValue: (employeeId: number) => string
     onAbsenceClick: (employeeId: number) => void
diff --git a/frontend/components/hours/HoursToolbar.vue b/frontend/components/hours/HoursToolbar.vue
index f96e236..fc31221 100644
--- a/frontend/components/hours/HoursToolbar.vue
+++ b/frontend/components/hours/HoursToolbar.vue
@@ -1,17 +1,33 @@
 <template>
   <div class="py-4 flex flex-col gap-3 lg:py-6">
       <!-- Desktop: filters row -->
-      <div class="hidden lg:flex lg:gap-4">
-          <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
+      <div class="hidden lg:flex lg:items-center lg:gap-4">
+          <div v-if="sites.length > 0 && isAdmin" class="relative z-50 w-80">
+              <MalioSelectCheckbox
+                  v-model="selectedSiteIds"
+                  :options="siteOptions"
+                  groupClass="w-80"
+                  label="Sites"
+                  display-select-all
+              />
+          </div>
           <div v-if="isAdmin" class="w-80">
-              <EmployeeNameFilterInput v-model="employeeFilter" />
+              <MalioInputText
+                  v-model="employeeFilter"
+                  label="Recherche d'un employé"
+                  icon-name="mdi:magnify"
+              />
           </div>
       </div>
 
       <!-- Mobile: search + filter button -->
-      <div v-if="isAdmin" class="flex gap-2 lg:hidden">
+      <div v-if="isAdmin" class="flex items-center gap-2 lg:hidden">
           <div class="flex-1 min-w-0">
-              <EmployeeNameFilterInput v-model="employeeFilter" />
+              <MalioInputText
+                  v-model="employeeFilter"
+                  label="Recherche d'un employé"
+                  icon-name="mdi:magnify"
+              />
           </div>
           <button
             type="button"
@@ -28,7 +44,13 @@
               <div v-if="sites.length > 0 && isAdmin">
                   <label class="text-md font-semibold text-neutral-700">Sites</label>
                   <div class="mt-2">
-                      <SiteFilterSelector v-model="selectedSiteIds" :sites="sites" />
+                      <MalioSelectCheckbox
+                          v-model="selectedSiteIds"
+                          :options="siteOptions"
+                          groupClass="w-80"
+                          label="Sites"
+                          display-select-all
+                      />
                   </div>
               </div>
               <div v-if="isAdmin">
@@ -172,8 +194,6 @@
 <script setup lang="ts">
 import type { Site } from '~/services/dto/site'
 import type { AbsenceType } from '~/services/dto/absence-type'
-import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
-import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 import PeriodStepperPicker from '~/components/PeriodStepperPicker.vue'
 import AppDrawer from '~/components/AppDrawer.vue'
 import { weekInputValueToYmd, ymdToWeekInputValue } from '~/utils/date'
@@ -183,7 +203,7 @@ const viewMode = defineModel<'day' | 'week'>('viewMode', { required: true })
 const selectedSiteIds = defineModel<number[]>('selectedSiteIds', { required: true })
 const employeeFilter = defineModel<string>('employeeFilter', { required: true })
 
-defineProps<{
+const props = defineProps<{
   isAdmin: boolean
   sites: Site[]
   absenceTypes: AbsenceType[]
@@ -193,6 +213,8 @@ defineProps<{
   getWeekShortcutLabel: (target: 'previousWeek' | 'thisWeek' | 'nextWeek') => string
 }>()
 
+const siteOptions = computed(() => props.sites.map((site) => ({ label: site.name, value: site.id })))
+
 const emit = defineEmits<{
   (e: 'set-yesterday'): void
   (e: 'set-today'): void
diff --git a/frontend/composables/useDriverHoursPage.ts b/frontend/composables/useDriverHoursPage.ts
index c822005..74fd5fb 100644
--- a/frontend/composables/useDriverHoursPage.ts
+++ b/frontend/composables/useDriverHoursPage.ts
@@ -417,6 +417,10 @@ export const useDriverHoursPage = () => {
     return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
   }
 
+  const getRowContractNature = (employeeId: number): 'CDI' | 'CDD' | 'INTERIM' | null => {
+    return dayContextByEmployeeId.value.get(employeeId)?.contractNature ?? null
+  }
+
   const hasContractAtSelectedDate = (employeeId: number) => {
     const dayRow = dayContextByEmployeeId.value.get(employeeId)
     if (!dayRow) return true
@@ -982,6 +986,7 @@ export const useDriverHoursPage = () => {
     getRowMetrics,
     getRowAbsenceLabel,
     getRowAbsenceStyle,
+    getRowContractNature,
     getRowUpdatedAt,
     openAbsenceDrawer,
     submitAbsence,
diff --git a/frontend/composables/useEmployeeDetailPage.ts b/frontend/composables/useEmployeeDetailPage.ts
index 04e4309..bfdadce 100644
--- a/frontend/composables/useEmployeeDetailPage.ts
+++ b/frontend/composables/useEmployeeDetailPage.ts
@@ -10,10 +10,11 @@ export const useEmployeeDetailPage = () => {
 
   const showLeaveTab = computed(() => employee.value?.currentContractNature !== 'INTERIM')
   const showRttTab = computed(() => employee.value?.contract?.type !== CONTRACT_TYPES.FORFAIT)
+  const isForfait = computed(() => employee.value?.contract?.type === CONTRACT_TYPES.FORFAIT)
   const employeeContractWorkLabel = computed(() => {
     const contract = employee.value?.contract
     if (!contract) return '-'
-    if (contract.type === CONTRACT_TYPES.FORFAIT) return 'Forfait'
+    if (contract.type === CONTRACT_TYPES.FORFAIT) return 'Forfait - 218 jours'
     if (contract.weeklyHours !== null && contract.weeklyHours !== undefined) return `${contract.weeklyHours} heures`
     return contract.name || '-'
   })
@@ -55,6 +56,9 @@ export const useEmployeeDetailPage = () => {
         await bonus.loadBonusData()
       } else if (activeTab.value === 'observation') {
         await observation.loadObservationData()
+      } else if (isForfait.value && showLeaveTab.value) {
+        // Eager load: needed for the "X jours restants" header label on forfait employees.
+        await leave.loadLeaveData()
       }
     } finally {
       isLoading.value = false
@@ -63,6 +67,13 @@ export const useEmployeeDetailPage = () => {
 
   const contract = useEmployeeContract(employee, loadEmployee)
   const leave = useEmployeeLeave(employee, loadEmployee)
+  const forfaitRemainingDaysLabel = computed(() => {
+    if (!isForfait.value) return ''
+    const presence = leave.leaveSummary.value?.presenceDaysToToday
+    if (presence === undefined || presence === null) return ''
+    const remaining = 218 - presence
+    return ` (${remaining} restants)`
+  })
   const rtt = useEmployeeRtt(employee, loadEmployee)
   const mileage = useEmployeeMileage(employee, loadEmployee)
   const formation = useEmployeeFormation(employee, loadEmployee)
@@ -97,6 +108,7 @@ export const useEmployeeDetailPage = () => {
     showLeaveTab,
     showRttTab,
     employeeContractWorkLabel,
+    forfaitRemainingDaysLabel,
     ...contract,
     ...leave,
     ...rtt,
diff --git a/frontend/composables/useHoursPage.ts b/frontend/composables/useHoursPage.ts
index 610927d..76860ed 100644
--- a/frontend/composables/useHoursPage.ts
+++ b/frontend/composables/useHoursPage.ts
@@ -494,6 +494,10 @@ export const useHoursPage = () => {
     return dayContextByEmployeeId.value.get(employeeId)?.formationLabel ?? ''
   }
 
+  const getRowContractNature = (employeeId: number): 'CDI' | 'CDD' | 'INTERIM' | null => {
+    return dayContextByEmployeeId.value.get(employeeId)?.contractNature ?? null
+  }
+
   const getRowUpdatedAt = (employeeId: number): string => {
     const raw = rows.value[employeeId]?.updatedAt
     if (!raw) return ''
@@ -1174,6 +1178,7 @@ export const useHoursPage = () => {
     getRowAbsenceStyle,
     hasRowFormation,
     getRowFormationLabel,
+    getRowContractNature,
     getRowUpdatedAt,
     getPresenceDayValue,
     openAbsenceDrawer,
diff --git a/frontend/data/documentation-content.ts b/frontend/data/documentation-content.ts
index 2053a72..284b755 100644
--- a/frontend/data/documentation-content.ts
+++ b/frontend/data/documentation-content.ts
@@ -28,6 +28,7 @@ export const documentationSections: DocSection[] = [
           { type: 'paragraph', content: 'La vue jour est votre écran principal. Elle affiche les heures de travail pour une date donnée.' },
           { type: 'list', content: 'Boutons "Hier" / "Aujourd\'hui" / "Demain" pour naviguer rapidement\nSélecteur de date pour choisir une date spécifique\nFiltrage par site si vous avez accès à plusieurs sites' },
           { type: 'paragraph', content: 'Seuls les employés ayant un contrat actif à la date sélectionnée sont affichés.' },
+          { type: 'note', content: 'Sous le nom de l\'employé, la nature du contrat (CDI / CDD / Intérim) affichée correspond à la période couvrant la date filtrée, et non à aujourd\'hui.' },
         ],
       },
       {
@@ -388,6 +389,7 @@ export const documentationSections: DocSection[] = [
         blocks: [
           { type: 'paragraph', content: 'Le calendrier offre une vue d\'ensemble mensuelle des absences de tous les employés.' },
           { type: 'list', content: 'Code couleur par type d\'absence\nDemi-journée : affichage en dégradé diagonal\nJournée complète : fond plein\nJours fériés : fond bleu clair (cliquable pour créer une absence)\nFiltres par site et par employé\nNavigation par mois (précédent / suivant)' },
+          { type: 'note', content: 'Seuls les employés ayant au moins un jour de contrat sur le mois affiché apparaissent. Un employé dont le contrat s\'est terminé avant le 1er du mois (ou qui commence après la fin du mois) est masqué.' },
           { type: 'note', content: 'Les absences peuvent être créées sur les jours fériés. Quand une absence est posée sur un férié, elle remplace l\'affichage « Férié » dans la cellule.' },
         ],
       },
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index cd05d9c..6bef9e9 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -174,7 +174,7 @@
 
             <div class="h-full flex-1 overflow-hidden flex flex-col min-w-0">
                 <AppTopNav :user="auth.user" @toggle-sidebar="sidebarOpen = !sidebarOpen" />
-                <main class="flex-1 overflow-y-auto px-4 py-6 lg:px-8 lg:py-12">
+                <main class="flex-1 overflow-y-auto [scrollbar-gutter:stable] px-4 py-6 lg:px-8 lg:py-12">
                     <slot/>
                 </main>
             </div>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 374000f..9289c66 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -2,6 +2,7 @@ export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: {enabled: false},
     ssr: false,
+    extends: ['@malio/layer-ui'],
     app: {
         baseURL: process.env.NODE_ENV === 'production'
           ? (process.env.NUXT_PUBLIC_APP_BASE || '/')
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3f1e2cc..a67afbf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,6 +7,7 @@
             "name": "frontend",
             "hasInstallScript": true,
             "dependencies": {
+                "@malio/layer-ui": "^1.4.5",
                 "@nuxt/icon": "^2.2.1",
                 "@nuxtjs/i18n": "^10.2.1",
                 "@pinia/nuxt": "^0.11.3",
@@ -24,7 +25,6 @@
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
             "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=10"
@@ -74,7 +74,6 @@
             "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
             "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/code-frame": "^7.29.0",
                 "@babel/generator": "^7.29.0",
@@ -503,7 +502,6 @@
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-3.1.0.tgz",
             "integrity": "sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==",
-            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -526,7 +524,6 @@
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz",
             "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==",
-            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -1034,6 +1031,7 @@
             "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
             "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
             }
@@ -1043,6 +1041,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz",
             "integrity": "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==",
             "license": "Apache-2.0",
+            "peer": true,
             "dependencies": {
                 "@eslint/object-schema": "^2.1.7",
                 "debug": "^4.3.1",
@@ -1057,6 +1056,7 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
             "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -1067,6 +1067,7 @@
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "license": "ISC",
+            "peer": true,
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -1079,6 +1080,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
             "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
             "license": "Apache-2.0",
+            "peer": true,
             "dependencies": {
                 "@eslint/core": "^0.17.0"
             },
@@ -1091,6 +1093,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
             "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
             "license": "Apache-2.0",
+            "peer": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.15"
             },
@@ -1103,6 +1106,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.3.tgz",
             "integrity": "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "ajv": "^6.12.4",
                 "debug": "^4.3.2",
@@ -1126,6 +1130,7 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
             "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -1136,6 +1141,7 @@
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
             "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">= 4"
             }
@@ -1145,6 +1151,7 @@
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "license": "ISC",
+            "peer": true,
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -1157,6 +1164,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz",
             "integrity": "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
@@ -1169,6 +1177,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
             "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
             "license": "Apache-2.0",
+            "peer": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
@@ -1178,6 +1187,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
             "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
             "license": "Apache-2.0",
+            "peer": true,
             "dependencies": {
                 "@eslint/core": "^0.17.0",
                 "levn": "^0.4.1"
@@ -1191,6 +1201,7 @@
             "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
             "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
             "license": "Apache-2.0",
+            "peer": true,
             "engines": {
                 "node": ">=18.18.0"
             }
@@ -1200,6 +1211,7 @@
             "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
             "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
             "license": "Apache-2.0",
+            "peer": true,
             "dependencies": {
                 "@humanfs/core": "^0.19.1",
                 "@humanwhocodes/retry": "^0.4.0"
@@ -1213,6 +1225,7 @@
             "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
             "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
             "license": "Apache-2.0",
+            "peer": true,
             "engines": {
                 "node": ">=12.22"
             },
@@ -1226,6 +1239,7 @@
             "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
             "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
             "license": "Apache-2.0",
+            "peer": true,
             "engines": {
                 "node": ">=18.18"
             },
@@ -2180,7 +2194,6 @@
             "resolved": "https://registry.npmjs.org/@koa/router/-/router-12.0.2.tgz",
             "integrity": "sha512-sYcHglGKTxGF+hQ6x67xDfkE9o+NhVlRHBqq6gLywaMc6CojK/5vFZByphdonKinYlMLkEkacm+HEse9HzwgTA==",
             "deprecated": "Please upgrade to v15 or higher. All reported bugs in this version are fixed in newer releases, dependencies have been updated, and security has been improved.",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "debug": "^4.3.4",
@@ -2208,6 +2221,20 @@
             "integrity": "sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==",
             "license": "MIT"
         },
+        "node_modules/@malio/layer-ui": {
+            "version": "1.4.5",
+            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.4.5/layer-ui-1.4.5.tgz",
+            "integrity": "sha512-UfVkLJk3WWGoZE1eyei0pY45IUbZRzabJr2X6GNFabHd/8EmuXqwP+LxCl8wEAO4ODrNKsVLJdi0eL3Zekv4Dg==",
+            "dependencies": {
+                "@nuxt/icon": "^2.2.1",
+                "@nuxtjs/tailwindcss": "^6.14.0",
+                "maska": "^3.2.0",
+                "tailwind-merge": "^3.3.1"
+            },
+            "peerDependencies": {
+                "nuxt": "^4.0.0"
+            }
+        },
         "node_modules/@mapbox/node-pre-gyp": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-2.0.3.tgz",
@@ -3196,7 +3223,6 @@
             "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.95.0.tgz",
             "integrity": "sha512-Te8fE/SmiiKWIrwBwxz5Dod87uYvsbcZ9JAL5ylPg1DevyKgTkxCXnPEaewk1Su2qpfNmry5RHoN+NywWFCG+A==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@oxc-project/types": "^0.95.0"
             },
@@ -3332,7 +3358,6 @@
             "version": "6.14.0",
             "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-6.14.0.tgz",
             "integrity": "sha512-30RyDK++LrUVRgc2A85MktGWIZoRQgeQKjE4CjjD64OXNozyl+4ScHnnYgqVToMM6Ch2ZG2W4wV2J0EN6F0zkQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@nuxt/kit": "^3.16.0",
@@ -3357,7 +3382,6 @@
             "version": "3.21.0",
             "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.21.0.tgz",
             "integrity": "sha512-KMTLK/dsGaQioZzkYUvgfN9le4grNW54aNcA1jqzgVZLcFVy4jJfrJr5WZio9NT2EMfajdoZ+V28aD7BRr4Zfw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "c12": "^3.3.3",
@@ -5319,7 +5343,8 @@
             "version": "7.0.15",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
             "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/@types/parse-path": {
             "version": "7.0.3",
@@ -5691,7 +5716,6 @@
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
             "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/parser": "^7.28.5",
                 "@vue/compiler-core": "3.5.27",
@@ -5851,7 +5875,6 @@
             "version": "1.3.8",
             "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
             "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "mime-types": "~2.1.34",
@@ -5865,7 +5888,6 @@
             "version": "1.52.0",
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
             "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -5875,7 +5897,6 @@
             "version": "2.1.35",
             "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
             "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "mime-db": "1.52.0"
@@ -5889,7 +5910,6 @@
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
             "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -5929,6 +5949,7 @@
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
             "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "fast-deep-equal": "^3.1.1",
                 "fast-json-stable-stringify": "^2.0.0",
@@ -5983,7 +6004,6 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
             "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/anymatch": {
@@ -6120,7 +6140,6 @@
             "version": "5.0.2",
             "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
             "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/argparse": {
@@ -6177,7 +6196,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
             "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-            "dev": true,
             "license": "ISC",
             "engines": {
                 "node": ">= 4.0.0"
@@ -6286,7 +6304,6 @@
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
             "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8"
@@ -6359,7 +6376,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.9.0",
                 "caniuse-lite": "^1.0.30001759",
@@ -6473,7 +6489,6 @@
             "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
             "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -6482,7 +6497,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/cache-content-type/-/cache-content-type-1.0.1.tgz",
             "integrity": "sha512-IKufZ1o4Ut42YUrZSo8+qnMTrFuKkvyoLXUywKz9GJ5BrhOFGhLdkx9sG4KAnVvbY6kEcSFjLQul+DVmBm2bgA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "mime-types": "^2.1.18",
@@ -6496,7 +6510,6 @@
             "version": "1.52.0",
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
             "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -6506,7 +6519,6 @@
             "version": "2.1.35",
             "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
             "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "mime-db": "1.52.0"
@@ -6519,7 +6531,6 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
             "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
@@ -6533,7 +6544,6 @@
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
             "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.2",
@@ -6551,6 +6561,7 @@
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=6"
             }
@@ -6559,7 +6570,6 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
             "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 6"
@@ -6654,7 +6664,6 @@
             "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz",
             "integrity": "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "consola": "^3.2.3"
             }
@@ -6703,7 +6712,6 @@
             "version": "4.6.0",
             "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
             "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "iojs": ">= 1.0.0",
@@ -6799,7 +6807,6 @@
             "version": "0.5.4",
             "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
             "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "safe-buffer": "5.2.1"
@@ -6812,7 +6819,6 @@
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
             "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -6834,7 +6840,6 @@
             "version": "0.9.1",
             "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.9.1.tgz",
             "integrity": "sha512-TG2hpqe4ELx54QER/S3HQ9SRVnQnGBtKUz5bLQWtYAQ+o6GpgMs6sYUvaiJjVxb+UXwhRhAEP3m7LbsIZ77Hmw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "depd": "~2.0.0",
@@ -7186,14 +7191,14 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
             "integrity": "sha512-bHtC0iYvWhyaTzvV3CZgPeZQqCOBGyGsVV7v4eevpdkLHfiSrXUdBG+qAuSz4RI70sszvjQ1QSZ98An1yNwpSw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/deep-is": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
             "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/deepmerge": {
             "version": "4.3.1",
@@ -7251,7 +7256,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
             "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/denque": {
@@ -7282,7 +7286,6 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
             "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.8",
@@ -7308,7 +7311,6 @@
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
             "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-            "dev": true,
             "license": "Apache-2.0"
         },
         "node_modules/diff": {
@@ -7324,7 +7326,6 @@
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
             "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/dom-serializer": {
@@ -7425,7 +7426,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
             "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.1",
@@ -7506,7 +7506,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
             "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -7516,7 +7515,6 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
             "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -7532,7 +7530,6 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
             "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0"
@@ -7705,6 +7702,7 @@
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
             "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
             "license": "BSD-2-Clause",
+            "peer": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
                 "estraverse": "^5.2.0"
@@ -7733,6 +7731,7 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
             "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -7743,6 +7742,7 @@
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -7755,6 +7755,7 @@
             "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
             "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
             "license": "Apache-2.0",
+            "peer": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
@@ -7767,6 +7768,7 @@
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
             "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
             "license": "ISC",
+            "peer": true,
             "dependencies": {
                 "is-glob": "^4.0.3"
             },
@@ -7779,6 +7781,7 @@
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
             "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">= 4"
             }
@@ -7788,6 +7791,7 @@
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "license": "ISC",
+            "peer": true,
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -7800,6 +7804,7 @@
             "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
             "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
             "license": "BSD-2-Clause",
+            "peer": true,
             "dependencies": {
                 "acorn": "^8.15.0",
                 "acorn-jsx": "^5.3.2",
@@ -7817,6 +7822,7 @@
             "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
             "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
             "license": "Apache-2.0",
+            "peer": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
@@ -7842,6 +7848,7 @@
             "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
             "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
             "license": "BSD-3-Clause",
+            "peer": true,
             "dependencies": {
                 "estraverse": "^5.1.0"
             },
@@ -7854,6 +7861,7 @@
             "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
             "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
             "license": "BSD-2-Clause",
+            "peer": true,
             "dependencies": {
                 "estraverse": "^5.2.0"
             },
@@ -7954,7 +7962,8 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/fast-fifo": {
             "version": "1.3.2",
@@ -7982,13 +7991,15 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
             "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/fast-levenshtein": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
             "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/fast-npm-meta": {
             "version": "0.4.8",
@@ -8030,6 +8041,7 @@
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
             "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "flat-cache": "^4.0.0"
             },
@@ -8060,6 +8072,7 @@
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
             "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "locate-path": "^6.0.0",
                 "path-exists": "^4.0.0"
@@ -8076,6 +8089,7 @@
             "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
             "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "flatted": "^3.2.9",
                 "keyv": "^4.5.4"
@@ -8088,7 +8102,8 @@
             "version": "3.3.3",
             "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
             "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
-            "license": "ISC"
+            "license": "ISC",
+            "peer": true
         },
         "node_modules/foreground-child": {
             "version": "3.3.1",
@@ -8132,7 +8147,6 @@
             "version": "9.1.0",
             "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
             "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "at-least-node": "^1.0.0",
@@ -8148,7 +8162,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
             "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/fsevents": {
@@ -8187,7 +8200,6 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
             "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -8215,7 +8227,6 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
             "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.2",
@@ -8246,7 +8257,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
             "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "dunder-proto": "^1.0.1",
@@ -8353,6 +8363,7 @@
             "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
             "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=18"
             },
@@ -8384,7 +8395,6 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
             "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -8450,7 +8460,6 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
             "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -8463,7 +8472,6 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
             "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "has-symbols": "^1.0.3"
@@ -8497,7 +8505,6 @@
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
             "integrity": "sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "deep-equal": "~1.0.1",
@@ -8511,7 +8518,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
             "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -8521,7 +8527,6 @@
             "version": "1.8.1",
             "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
             "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "depd": "~1.1.2",
@@ -8538,7 +8543,6 @@
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
             "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -8654,6 +8658,7 @@
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
             "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "parent-module": "^1.0.0",
                 "resolve-from": "^4.0.0"
@@ -8670,6 +8675,7 @@
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=4"
             }
@@ -8692,6 +8698,7 @@
             "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
             "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=0.8.19"
             }
@@ -8701,7 +8708,6 @@
             "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
             "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
             "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "once": "^1.3.0",
@@ -8760,7 +8766,6 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
             "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "binary-extensions": "^2.0.0"
@@ -8821,7 +8826,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
             "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.4",
@@ -8923,7 +8927,6 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
             "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
@@ -9081,19 +9084,22 @@
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
             "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/json-schema-traverse": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/json-stable-stringify-without-jsonify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
             "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/json5": {
             "version": "2.2.3",
@@ -9146,7 +9152,6 @@
             "version": "6.2.0",
             "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
             "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "universalify": "^2.0.0"
@@ -9160,7 +9165,6 @@
             "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
             "integrity": "sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==",
             "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "tsscmp": "1.0.6"
@@ -9174,6 +9178,7 @@
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
             "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "json-buffer": "3.0.1"
             }
@@ -9206,7 +9211,6 @@
             "version": "2.16.3",
             "resolved": "https://registry.npmjs.org/koa/-/koa-2.16.3.tgz",
             "integrity": "sha512-zPPuIt+ku1iCpFBRwseMcPYQ1cJL8l60rSmKeOuGfOXyE6YnTBmf2aEFNL2HQGrD0cPcLO/t+v9RTgC+fwEh/g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "accepts": "^1.3.5",
@@ -9241,14 +9245,12 @@
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz",
             "integrity": "sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/koa-convert": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/koa-convert/-/koa-convert-2.0.0.tgz",
             "integrity": "sha512-asOvN6bFlSnxewce2e/DK3p4tltyfC4VM7ZwuTuepI7dEQVcvpyFuBcEARu1+Hxg8DIwytce2n7jrZtRlPrARA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "co": "^4.6.0",
@@ -9262,7 +9264,6 @@
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/koa-send/-/koa-send-5.0.1.tgz",
             "integrity": "sha512-tmcyQ/wXXuxpDxyNXv5yNNkdAMdFRqwtegBXUaowiQzUKqJehttS0x2j0eOZDQAyloAth5w6wwBImnFzkUz3pQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "debug": "^4.1.1",
@@ -9277,7 +9278,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
             "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -9287,7 +9287,6 @@
             "version": "1.8.1",
             "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
             "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "depd": "~1.1.2",
@@ -9304,7 +9303,6 @@
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
             "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -9314,7 +9312,6 @@
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/koa-static/-/koa-static-5.0.0.tgz",
             "integrity": "sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "debug": "^3.1.0",
@@ -9328,7 +9325,6 @@
             "version": "3.2.7",
             "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
             "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.1"
@@ -9338,7 +9334,6 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
             "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.8"
@@ -9348,7 +9343,6 @@
             "version": "0.5.2",
             "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
             "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -9358,7 +9352,6 @@
             "version": "1.8.1",
             "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz",
             "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "depd": "~1.1.2",
@@ -9375,7 +9368,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
             "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -9385,7 +9377,6 @@
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
             "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -9448,6 +9439,7 @@
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
             "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "prelude-ls": "^1.2.1",
                 "type-check": "~0.4.0"
@@ -9472,7 +9464,6 @@
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/listhen": {
@@ -9533,6 +9524,7 @@
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
             "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "p-locate": "^5.0.0"
             },
@@ -9571,7 +9563,8 @@
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/lodash.uniq": {
             "version": "4.5.0",
@@ -9647,11 +9640,16 @@
                 "source-map-js": "^1.2.1"
             }
         },
+        "node_modules/maska": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/maska/-/maska-3.2.0.tgz",
+            "integrity": "sha512-zSmSgs5/q9vMSmrdZT3rKOv9uLznNWR/niuuAdBZDTvB3SMKOX9vhMtDijFyExz+B4UClu2rvksylUh/ea1bLA==",
+            "license": "MIT"
+        },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
             "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
@@ -9667,7 +9665,6 @@
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
             "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -9692,7 +9689,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
             "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -9877,7 +9873,6 @@
             "version": "2.7.0",
             "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
             "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "any-promise": "^1.0.0",
@@ -9913,13 +9908,13 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
             "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/negotiator": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
             "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -10166,7 +10161,6 @@
             "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-4.3.0.tgz",
             "integrity": "sha512-99Iw3E3L5/2QtJyV4errZ0axkX/S9IAFK0AHm0pmRHkCu37OFn8mz2P4/CYTt6B/TG3mcKbXAVaeuF2FsAc1cA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@dxup/nuxt": "^0.3.2",
                 "@nuxt/cli": "^3.32.0",
@@ -10294,7 +10288,6 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
             "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -10304,7 +10297,6 @@
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
             "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 6"
@@ -10365,7 +10357,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
             "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "wrappy": "1"
@@ -10389,8 +10380,7 @@
         "node_modules/only": {
             "version": "0.0.2",
             "resolved": "https://registry.npmjs.org/only/-/only-0.0.2.tgz",
-            "integrity": "sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==",
-            "dev": true
+            "integrity": "sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ=="
         },
         "node_modules/open": {
             "version": "8.4.2",
@@ -10441,6 +10431,7 @@
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
             "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "deep-is": "^0.1.3",
                 "fast-levenshtein": "^2.0.6",
@@ -10492,7 +10483,6 @@
             "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.110.0.tgz",
             "integrity": "sha512-GijUR3K1Ln/QwMyYXRsBtOyzqGaCs9ce5pOug1UtrMg8dSiE7VuuRuIcyYD4nyJbasat3K0YljiKt/PSFPdSBA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@oxc-project/types": "^0.110.0"
             },
@@ -10576,6 +10566,7 @@
             "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
             "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "yocto-queue": "^0.1.0"
             },
@@ -10591,6 +10582,7 @@
             "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
             "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "p-limit": "^3.0.2"
             },
@@ -10618,6 +10610,7 @@
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
             "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "callsites": "^3.0.0"
             },
@@ -10667,6 +10660,7 @@
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -10675,7 +10669,6 @@
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
             "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -10725,7 +10718,6 @@
             "version": "6.3.0",
             "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
             "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
-            "dev": true,
             "license": "MIT"
         },
         "node_modules/pathe": {
@@ -10762,7 +10754,6 @@
             "version": "2.3.0",
             "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
             "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -10773,7 +10764,6 @@
             "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
             "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@vue/devtools-api": "^7.7.7"
             },
@@ -10833,7 +10823,6 @@
             "version": "4.0.7",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
             "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 6"
@@ -10854,7 +10843,6 @@
             "version": "1.0.38",
             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
             "integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "async": "^3.2.6",
@@ -10883,7 +10871,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.11",
                 "picocolors": "^1.1.1",
@@ -10998,7 +10985,6 @@
             "version": "15.1.0",
             "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
             "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "postcss-value-parser": "^4.0.0",
@@ -11016,7 +11002,6 @@
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
             "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -11042,7 +11027,6 @@
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
             "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
-            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -11184,7 +11168,6 @@
             "version": "6.2.0",
             "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
             "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -11210,7 +11193,6 @@
             "version": "6.1.2",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
             "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "cssesc": "^3.0.0",
@@ -11224,7 +11206,6 @@
             "version": "13.0.2",
             "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.2.tgz",
             "integrity": "sha512-1YCI290TX+VP0U/K/aFxzHzQWHWURL+CtHMSbex1lCdpXD1SoR2sYuxDu5aNI9lPoXpKTCggFZiDJbwylU0LEQ==",
-            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -11433,7 +11414,6 @@
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
             "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "cssesc": "^3.0.0",
                 "util-deprecate": "^1.0.2"
@@ -11502,6 +11482,7 @@
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
             "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">= 0.8.0"
             }
@@ -11557,6 +11538,7 @@
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
             "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=6"
             }
@@ -11635,7 +11617,6 @@
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
             "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "pify": "^2.3.0"
@@ -11725,7 +11706,6 @@
             "version": "6.3.5",
             "resolved": "https://registry.npmjs.org/replace-in-file/-/replace-in-file-6.3.5.tgz",
             "integrity": "sha512-arB9d3ENdKva2fxRnSjwBEXfK1npgyci7ZZuwysgAp7ORjHSyxz6oqIjTEv8R0Ydl4Ll7uOAZXL4vbkhGIizCg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "chalk": "^4.1.2",
@@ -11743,7 +11723,6 @@
             "version": "1.1.12",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
             "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
@@ -11755,7 +11734,6 @@
             "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
             "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
             "deprecated": "Glob versions prior to v9 are no longer supported",
-            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "fs.realpath": "^1.0.0",
@@ -11776,7 +11754,6 @@
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
@@ -11827,7 +11804,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/resolve-path/-/resolve-path-1.4.0.tgz",
             "integrity": "sha512-i1xevIst/Qa+nA9olDxLWnLk8YZbi8R/7JPbCMcgyWaFR6bKWaexgJgEB5oc2PKMjYdrHynyz0NY+if+H98t1w==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "http-errors": "~1.6.2",
@@ -11841,7 +11817,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
             "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -11851,7 +11826,6 @@
             "version": "1.6.3",
             "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
             "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "depd": "~1.1.2",
@@ -11867,21 +11841,18 @@
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
             "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/resolve-path/node_modules/setprototypeof": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
             "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/resolve-path/node_modules/statuses": {
             "version": "1.5.0",
             "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
             "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -11908,7 +11879,6 @@
             "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
             "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/estree": "1.0.8"
             },
@@ -12043,7 +12013,6 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
             "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
@@ -12436,6 +12405,7 @@
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
             "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=8"
             },
@@ -12487,7 +12457,6 @@
             "version": "3.35.1",
             "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
             "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/gen-mapping": "^0.3.2",
@@ -12510,7 +12479,6 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
             "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 6"
@@ -12614,7 +12582,6 @@
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/tailwind-config-viewer/-/tailwind-config-viewer-2.0.4.tgz",
             "integrity": "sha512-icvcmdMmt9dphvas8wL40qttrHwAnW3QEN4ExJ2zICjwRsPj7gowd1cOceaWG3IfTuM/cTNGQcx+bsjMtmV+cw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@koa/router": "^12.0.1",
@@ -12641,7 +12608,6 @@
             "version": "6.2.1",
             "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
             "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 6"
@@ -12651,7 +12617,6 @@
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
             "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-            "dev": true,
             "license": "MIT",
             "bin": {
                 "is-docker": "cli.js"
@@ -12667,7 +12632,6 @@
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
             "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "is-docker": "^2.0.0"
@@ -12680,7 +12644,6 @@
             "version": "7.4.2",
             "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
             "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "is-docker": "^2.0.0",
@@ -12693,13 +12656,21 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/tailwind-merge": {
+            "version": "3.5.0",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
+            "integrity": "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/dcastil"
+            }
+        },
         "node_modules/tailwindcss": {
             "version": "3.4.19",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
             "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
-            "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
                 "arg": "^5.0.2",
@@ -12736,7 +12707,6 @@
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
             "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "anymatch": "~3.1.2",
@@ -12761,7 +12731,6 @@
             "version": "5.1.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
             "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "is-glob": "^4.0.1"
@@ -12774,7 +12743,6 @@
             "version": "6.0.2",
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
             "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-            "dev": true,
             "license": "ISC",
             "dependencies": {
                 "is-glob": "^4.0.3"
@@ -12787,7 +12755,6 @@
             "version": "1.21.7",
             "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
             "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
-            "dev": true,
             "license": "MIT",
             "bin": {
                 "jiti": "bin/jiti.js"
@@ -12797,7 +12764,6 @@
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
             "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=8.6"
@@ -12810,7 +12776,6 @@
             "version": "6.1.2",
             "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
             "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "cssesc": "^3.0.0",
@@ -12824,7 +12789,6 @@
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
             "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "picomatch": "^2.2.1"
@@ -12906,7 +12870,6 @@
             "version": "3.3.1",
             "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
             "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "any-promise": "^1.0.0"
@@ -12916,7 +12879,6 @@
             "version": "1.6.0",
             "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
             "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "thenify": ">= 3.1.0 < 4"
@@ -13016,7 +12978,6 @@
             "version": "0.1.13",
             "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
             "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-            "dev": true,
             "license": "Apache-2.0"
         },
         "node_modules/tslib": {
@@ -13030,7 +12991,6 @@
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
             "integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.6.x"
@@ -13041,6 +13001,7 @@
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
             "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "prelude-ls": "^1.2.1"
             },
@@ -13067,7 +13028,6 @@
             "version": "1.6.18",
             "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
             "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "media-typer": "0.3.0",
@@ -13081,7 +13041,6 @@
             "version": "1.52.0",
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
             "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.6"
@@ -13091,7 +13050,6 @@
             "version": "2.1.35",
             "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
             "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "mime-db": "1.52.0"
@@ -13111,7 +13069,6 @@
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
             "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
             "license": "Apache-2.0",
-            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -13252,7 +13209,6 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
             "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 10.0.0"
@@ -13535,6 +13491,7 @@
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
             "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
             "license": "BSD-2-Clause",
+            "peer": true,
             "dependencies": {
                 "punycode": "^2.1.0"
             }
@@ -13549,7 +13506,6 @@
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
             "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 0.8"
@@ -13560,7 +13516,6 @@
             "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
             "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "esbuild": "^0.27.0",
                 "fdir": "^6.5.0",
@@ -13929,7 +13884,6 @@
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
             "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@vue/compiler-dom": "3.5.27",
                 "@vue/compiler-sfc": "3.5.27",
@@ -13966,7 +13920,6 @@
             "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.2.8.tgz",
             "integrity": "sha512-vJ123v/PXCZntd6Qj5Jumy7UBmIuE92VrtdX+AXr+1WzdBHojiBxnAxdfctUFL+/JIN+VQH4BhsfTtiGsvVObg==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@intlify/core-base": "11.2.8",
                 "@intlify/shared": "11.2.8",
@@ -13987,7 +13940,6 @@
             "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
             "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@vue/devtools-api": "^6.6.4"
             },
@@ -14040,6 +13992,7 @@
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
             "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -14083,7 +14036,6 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
             "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-            "dev": true,
             "license": "ISC"
         },
         "node_modules/ws": {
@@ -14199,7 +14151,6 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/ylru/-/ylru-1.4.0.tgz",
             "integrity": "sha512-2OQsPNEmBCvXuFlIni/a+Rn+R2pHW9INm0BxXJ4hVDA8TirqMj+J/Rp9ItLatT/5pZqWwefVrTQcHpixsxnVlA==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">= 4.0.0"
@@ -14210,6 +14161,7 @@
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=10"
             },
diff --git a/frontend/package.json b/frontend/package.json
index 3be0764..ce7abf3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.1",
+        "@malio/layer-ui": "^1.4.5",
         "@pinia/nuxt": "^0.11.3",
         "nuxt": "^4.3.0",
         "nuxt-toast": "^1.4.0",
diff --git a/frontend/pages/absence-types.vue b/frontend/pages/absence-types.vue
index 6523e24..c93ef41 100644
--- a/frontend/pages/absence-types.vue
+++ b/frontend/pages/absence-types.vue
@@ -2,13 +2,12 @@
   <div class="h-full flex flex-col overflow-hidden">
     <div class="flex items-center justify-between pb-6">
       <h1 class="text-4xl font-bold text-primary-500">Types de statut</h1>
-      <button
-        type="button"
-        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+      <MalioButton
+        label="Ajouter un type"
+        icon-name="mdi:plus"
+        icon-position="left"
         @click="openCreate"
-      >
-        + Ajouter un type
-      </button>
+      />
     </div>
 
     <div
@@ -56,60 +55,40 @@
       </div>
     </div>
 
-    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+    <MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
       <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="code">
-            Code <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="code"
-            v-model="form.code"
-            type="text"
-            maxlength="10"
-            :class="codeFieldClass"
-          />
-          <p v-if="showCodeError" class="mt-1 text-sm text-red-600">
-            Le code est obligatoire.
-          </p>
-        </div>
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="label">
-            Libellé <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="label"
-            v-model="form.label"
-            type="text"
-            :class="labelFieldClass"
-          />
-          <p v-if="showLabelError" class="mt-1 text-sm text-red-600">
-            Le libellé est obligatoire.
-          </p>
-        </div>
+        <MalioInputText
+          v-model="form.code"
+          label="Code *"
+          group-class="mt-2"
+          :max-length="10"
+          :error="showCodeError ? 'Le code est obligatoire.' : ''"
+        />
+        <MalioInputText
+          v-model="form.label"
+          label="Libellé *"
+          group-class="mt-2"
+          :error="showLabelError ? 'Le libellé est obligatoire.' : ''"
+        />
         <div>
           <label class="text-md font-semibold text-neutral-700">
             Compté comme travaillé
           </label>
           <div class="mt-2 flex items-center gap-6">
-            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
-              <input
-                v-model="form.countAsWorkedHours"
-                type="radio"
-                class="h-4 w-4"
-                :value="true"
-              />
-              Oui
-            </label>
-            <label class="inline-flex items-center gap-2 text-md text-neutral-800">
-              <input
-                v-model="form.countAsWorkedHours"
-                type="radio"
-                class="h-4 w-4"
-                :value="false"
-              />
-              Non
-            </label>
+            <MalioRadioButton
+              v-model="form.countAsWorkedHours"
+              name="countAsWorkedHours"
+              :value="true"
+              label="Oui"
+              group-class="w-auto mt-0"
+            />
+            <MalioRadioButton
+              v-model="form.countAsWorkedHours"
+              name="countAsWorkedHours"
+              :value="false"
+              label="Non"
+              group-class="w-auto mt-0"
+            />
           </div>
         </div>
         <div>
@@ -130,32 +109,29 @@
           </p>
         </div>
         <div v-if="editingType" class="grid grid-cols-2 gap-3 pt-2">
-          <button
-            type="button"
-            class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+          <MalioButton
+            label="Supprimer"
+            variant="danger"
+            button-class="w-full"
             @click="confirmDelete(editingType)"
-          >
-            Supprimer
-          </button>
-          <button
+          />
+          <MalioButton
             type="submit"
-            class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :class="submitButtonClass"
-          >
-            Modifier
-          </button>
+            label="Modifier"
+            button-class="w-full"
+            :disabled="isSubmitting || !isFormValid"
+          />
         </div>
         <div v-else class="flex justify-center pt-2">
-          <button
+          <MalioButton
             type="submit"
-            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :class="submitButtonClass"
-          >
-            + Ajouter
-          </button>
+            label="Valider"
+            button-class="w-[200px]"
+            :disabled="isSubmitting || !isFormValid"
+          />
         </div>
       </form>
-    </AppDrawer>
+    </MalioDrawer>
   </div>
 </template>
 
@@ -202,20 +178,6 @@ const showCodeError = computed(() => validationTouched.code && !isCodeValid.valu
 const showLabelError = computed(() => validationTouched.label && !isLabelValid.value)
 const showColorError = computed(() => validationTouched.color && !isColorValid.value)
 
-const baseInputClass =
-  'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-const codeFieldClass = computed(() => {
-  if (showCodeError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-const labelFieldClass = computed(() => {
-  if (showLabelError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
 const colorFieldClass = computed(() => {
   const baseColorClass = 'h-10 w-16 cursor-pointer rounded-md border bg-white p-1'
   if (showColorError.value) {
@@ -224,13 +186,6 @@ const colorFieldClass = computed(() => {
   return `${baseColorClass} border-neutral-300`
 })
 
-const submitButtonClass = computed(() => {
-  if (isSubmitting.value || !isFormValid.value) {
-    return 'opacity-50 cursor-not-allowed'
-  }
-  return ''
-})
-
 const loadAbsenceTypes = async () => {
   isLoading.value = true
   try {
diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index 6ca5bdd..fdf85e1 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -5,30 +5,37 @@
         </div>
         <div class="flex flex-col gap-3 py-6">
             <div class="flex items-center justify-between gap-4">
-                <div class="flex items-center gap-4">
-                    <SiteFilterSelector v-model="selectedSiteIds" :sites="sites"/>
-                </div>
+                    <MalioSelectCheckbox
+                        v-model="selectedSiteIds"
+                        :options="siteOptions"
+                        label="Sites"
+                        groupClass="relative z-50 w-80 h-10"
+                        display-select-all
+                    />
                 <div class="flex gap-4">
-                    <button
-                        type="button"
-                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                    <MalioButton
+                        label="Ajouter une absence"
+                        icon-name="mdi:plus"
+                        icon-position="left"
                         @click="openCreateFromToday"
-                    >
-                        + Ajouter une absence
-                    </button>
-                    <button
-                        type="button"
-                        class="h-10 rounded-lg bg-primary-500 px-4 text-md font-semibold text-white hover:bg-secondary-500"
+                    />
+                    <MalioButton
+                        label="Imprimer"
+                        variant="secondary"
+                        icon-name="mdi:printer"
+                        icon-position="left"
                         @click="openPrint"
-                    >
-                        Imprimer
-                    </button>
+                    />
                 </div>
             </div>
             <div class="flex justify-between">
                 <div class="flex items-center gap-4">
                     <div class="w-80">
-                        <EmployeeNameFilterInput v-model="employeeFilter"/>
+                        <MalioInputText
+                            v-model="employeeFilter"
+                            label="Recherche d'un employé"
+                            icon-name="mdi:magnify"
+                        />
                     </div>
                     <PeriodStepperPicker
                         width-class="w-[260px]"
@@ -111,9 +118,7 @@ import {compareEmployeesInSite, sortEmployeesBySiteAndOrder} from '~/utils/emplo
 import CalendarGrid from '~/components/CalendarGrid.vue'
 import AbsenceFormDrawer from '~/components/AbsenceFormDrawer.vue'
 import AbsencePrintDrawer from '~/components/AbsencePrintDrawer.vue'
-import EmployeeNameFilterInput from '~/components/EmployeeNameFilterInput.vue'
 import PeriodStepperPicker from '~/components/PeriodStepperPicker.vue'
-import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
 
 useHead({
     title: 'Calendrier'
@@ -136,6 +141,8 @@ const sites = computed(() => {
     })
 })
 
+const siteOptions = computed(() => sites.value.map((site) => ({ label: site.name, value: site.id })))
+
 // Filtres de sites (par défaut: tous sélectionnés à l'init).
 const selectedSiteIds = ref<number[]>([])
 const sitesInitialized = ref(false)
@@ -154,12 +161,27 @@ const sortedEmployees = computed(() => {
 // Employés visibles selon le filtre de sites.
 const employeeFilter = ref('')
 
+// Un employé est considéré "présent" sur le mois affiché si au moins une de ses
+// périodes de contrat intersecte [début du mois ; fin du mois]. Sinon il est masqué.
+const hasContractInSelectedMonth = (employee: Employee): boolean => {
+    const monthStart = toYmd(selectedYear.value, selectedMonth.value, 1)
+    const monthEnd = toYmd(selectedYear.value, selectedMonth.value + 1, 0)
+    const history = employee.contractHistory ?? []
+    if (history.length === 0) return false
+    return history.some((period) => {
+        const start = period.startDate
+        const end = period.endDate ?? '9999-12-31'
+        return start <= monthEnd && end >= monthStart
+    })
+}
+
 const visibleEmployees = computed(() => {
     if (selectedSiteIds.value.length === 0) return []
     const filter = employeeFilter.value.trim().toLowerCase()
     return sortedEmployees.value.filter((employee) => {
         const siteOk = employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
         if (!siteOk) return false
+        if (!hasContractInSelectedMonth(employee)) return false
         if (!filter) return true
         const first = employee.firstName?.toLowerCase() ?? ''
         const last = employee.lastName?.toLowerCase() ?? ''
diff --git a/frontend/pages/driver-hours.vue b/frontend/pages/driver-hours.vue
index ab48e16..5b74cf8 100644
--- a/frontend/pages/driver-hours.vue
+++ b/frontend/pages/driver-hours.vue
@@ -64,6 +64,7 @@
                     :get-row-metrics="getRowMetrics"
                     :get-row-absence-label="getRowAbsenceLabel"
                     :get-row-absence-style="getRowAbsenceStyle"
+                    :get-row-contract-nature="getRowContractNature"
                     :get-row-updated-at="getRowUpdatedAt"
                     :on-absence-click="openAbsenceDrawer"
                     :format-minutes="formatMinutes"
@@ -169,6 +170,7 @@ const {
   getRowMetrics,
   getRowAbsenceLabel,
   getRowAbsenceStyle,
+  getRowContractNature,
   getRowUpdatedAt,
   openAbsenceDrawer,
   submitAbsence,
diff --git a/frontend/pages/employees/[id].vue b/frontend/pages/employees/[id].vue
index 898f1a4..138cb2c 100644
--- a/frontend/pages/employees/[id].vue
+++ b/frontend/pages/employees/[id].vue
@@ -26,7 +26,7 @@
                     <p>Date d'entrée : {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
                 </div>
                 <div class="text-right">
-                    <p class="font-bold text-[22px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}</p>
+                    <p class="font-bold text-[22px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employeeContractWorkLabel }}{{ forfaitRemainingDaysLabel }}</p>
                     <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
                 </div>
             </div>
@@ -257,6 +257,7 @@ const {
     showRttTab,
     contractHistory,
     employeeContractWorkLabel,
+    forfaitRemainingDaysLabel,
     contractForm,
     createContractForm,
     isContractDrawerOpen,
diff --git a/frontend/pages/employees/index.vue b/frontend/pages/employees/index.vue
index 6f09464..9f00ddb 100644
--- a/frontend/pages/employees/index.vue
+++ b/frontend/pages/employees/index.vue
@@ -4,49 +4,45 @@
             <div class="flex items-center justify-between">
                 <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
                 <div class="flex items-center gap-3">
-                    <button
-                        type="button"
-                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                        @click="handleLeaveRecapPrint"
-                    >
-                        Export récap. congés
-                    </button>
-                    <button
-                        type="button"
-                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                        @click="isSalaryRecapOpen = true"
-                    >
-                        Export récap. salaire
-                    </button>
-                    <button
-                        type="button"
-                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                        @click="isYearlyHoursBulkOpen = true"
-                    >
-                        Export heures
-                    </button>
-                    <button
-                        type="button"
-                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    <MalioButton
+                        label="Export"
+                        variant="secondary"
+                        icon-name="mdi:download"
+                        icon-position="left"
+                        @click="openExportDrawer"
+                    />
+                    <MalioButton
+                        label="Ajouter un employé"
+                        icon-name="mdi:plus"
+                        icon-position="left"
                         @click="openCreate"
-                    >
-                        + Ajouter un employé
-                    </button>
+                    />
                 </div>
             </div>
-            <div class="flex gap-3 py-7">
+            <div class="flex items-center gap-3 py-7">
                 <div class="w-80">
-                    <EmployeeNameFilterInput v-model="employeeFilter"/>
+                    <MalioInputText
+                        v-model="employeeFilter"
+                        label="Recherche d'un employé"
+                        icon-name="mdi:magnify"
+                    />
                 </div>
-                <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites"/>
-                <select
+                <div v-if="sites.length > 0" class="relative z-50 w-80">
+                    <MalioSelectCheckbox
+                        v-model="selectedSiteIds"
+                        :options="siteOptions"
+                        groupClass="w-80"
+                        label="Sites"
+                        display-select-all
+                    />
+                </div>
+
+                <MalioSelect
                     v-model="contractStatusFilter"
-                    class="rounded-md border border-primary-500 bg-white px-3 py-2 text-md font-semibold text-primary-500 cursor-pointer"
-                >
-                    <option value="active">Avec contrat</option>
-                    <option value="inactive">Sans contrat</option>
-                    <option value="all">Tous</option>
-                </select>
+                    label="Statut contrat"
+                    :options="contractStatusOptions"
+                    group-class="w-40"
+                />
             </div>
         </div>
 
@@ -252,16 +248,58 @@
             </form>
         </AppDrawer>
 
-        <SalaryRecapDrawer
-            v-model="isSalaryRecapOpen"
-            @submit="handleSalaryRecapPrint"
-        />
+        <MalioDrawer v-model="isExportDrawerOpen" title="Export">
+            <div class="space-y-4">
+                <MalioSelect
+                    :model-value="exportChoice === '' ? null : exportChoice"
+                    :options="exportTypeOptions"
+                    label="Type d'export"
+                    empty-option-label="Choisir un export"
+                    group-class="mt-2"
+                    min-width=""
+                    @update:model-value="onExportChoiceChange"
+                />
 
-        <BulkYearlyHoursDrawer
-            v-model="isYearlyHoursBulkOpen"
-            :is-loading="isYearlyHoursBulkLoading"
-            @submit="handleBulkYearlyHoursPrint"
-        />
+                <div v-if="exportChoice === 'salary-recap'">
+                    <label class="text-md font-semibold text-neutral-700" for="export-salary-month">
+                        Mois <span class="text-red-600">*</span>
+                    </label>
+                    <input
+                        id="export-salary-month"
+                        v-model="exportSalaryMonth"
+                        type="month"
+                        class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                    />
+                </div>
+
+                <template v-else-if="exportChoice === 'yearly-hours'">
+                    <MalioSelect
+                        :model-value="exportYear"
+                        :options="exportYearOptions"
+                        label="Année *"
+                        min-width=""
+                        @update:model-value="(v) => { if (v !== null) exportYear = Number(v) }"
+                    />
+                    <MalioSelect
+                        :model-value="exportMonth === '' ? null : exportMonth"
+                        :options="exportMonthOptions"
+                        label="Mois *"
+                        empty-option-label="Choisir un mois"
+                        min-width=""
+                        @update:model-value="(v) => { exportMonth = v === null ? '' : Number(v) }"
+                    />
+                </template>
+
+                <div class="flex justify-center pt-2">
+                    <MalioButton
+                        label="Valider"
+                        button-class="w-[200px]"
+                        :disabled="!isExportValid"
+                        @click="handleExportValidate"
+                    />
+                </div>
+            </div>
+        </MalioDrawer>
     </div>
 </template>
 
@@ -275,9 +313,6 @@ import {listContracts} from '~/services/contracts'
 import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
 import {listSites} from '~/services/sites'
 import {listInterimAgencies, type InterimAgency} from '~/services/interim-agencies'
-import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
-import SalaryRecapDrawer from '~/components/SalaryRecapDrawer.vue'
-import BulkYearlyHoursDrawer from '~/components/BulkYearlyHoursDrawer.vue'
 import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
 import {usePdfPrinter} from '~/composables/usePdfPrinter'
 
@@ -288,9 +323,50 @@ useHead({
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
 const isLoading = ref(false)
-const isSalaryRecapOpen = ref(false)
-const isYearlyHoursBulkOpen = ref(false)
-const isYearlyHoursBulkLoading = ref(false)
+const isExportDrawerOpen = ref(false)
+const exportChoice = ref<'leave-recap' | 'salary-recap' | 'yearly-hours' | ''>('')
+const exportYear = ref<number>(new Date().getFullYear())
+const exportMonth = ref<number | ''>(new Date().getMonth() + 1)
+const exportSalaryMonth = ref<string>(`${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}`)
+
+const exportTypeOptions = [
+    { label: 'Récap. congés', value: 'leave-recap' },
+    { label: 'Récap. salaire', value: 'salary-recap' },
+    { label: 'Heures annuelles', value: 'yearly-hours' }
+]
+const exportYearOptions = computed(() => {
+    const current = new Date().getFullYear()
+    return Array.from({ length: 6 }, (_, i) => ({ label: String(current - i), value: current - i }))
+})
+const exportMonthOptions = [
+    { label: 'Janvier', value: 1 },
+    { label: 'Février', value: 2 },
+    { label: 'Mars', value: 3 },
+    { label: 'Avril', value: 4 },
+    { label: 'Mai', value: 5 },
+    { label: 'Juin', value: 6 },
+    { label: 'Juillet', value: 7 },
+    { label: 'Août', value: 8 },
+    { label: 'Septembre', value: 9 },
+    { label: 'Octobre', value: 10 },
+    { label: 'Novembre', value: 11 },
+    { label: 'Décembre', value: 12 }
+]
+
+const isExportValid = computed(() => {
+    if (!exportChoice.value) return false
+    if (exportChoice.value === 'salary-recap') {
+        return exportSalaryMonth.value.trim() !== ''
+    }
+    if (exportChoice.value === 'yearly-hours') {
+        return exportYear.value > 0 && exportMonth.value !== ''
+    }
+    return true
+})
+
+const onExportChoiceChange = (value: string | number | null) => {
+    exportChoice.value = (value === null ? '' : String(value)) as 'leave-recap' | 'salary-recap' | 'yearly-hours' | ''
+}
 const { printPdf } = usePdfPrinter()
 const sitesInitialized = ref(false)
 const editingEmployee = ref<Employee | null>(null)
@@ -304,7 +380,13 @@ const contracts = ref<Contract[]>([])
 const interimAgencies = ref<InterimAgency[]>([])
 const employeeFilter = ref('')
 const contractStatusFilter = ref<'active' | 'inactive' | 'all'>('active')
+const contractStatusOptions = [
+    { label: 'Avec contrat', value: 'active' },
+    { label: 'Sans contrat', value: 'inactive' },
+    { label: 'Tous', value: 'all' }
+]
 const selectedSiteIds = ref<number[]>([])
+const siteOptions = computed(() => sites.value.map((site) => ({ label: site.name, value: site.id })))
 
 const filteredEmployees = computed<Employee[]>(() => {
     if (selectedSiteIds.value.length === 0) return []
@@ -617,26 +699,29 @@ const openCreate = () => {
     isDrawerOpen.value = true
 }
 
-const handleLeaveRecapPrint = async () => {
-    await printPdf('/leave-recap/print')
+const openExportDrawer = () => {
+    exportChoice.value = ''
+    const now = new Date()
+    exportYear.value = now.getFullYear()
+    exportMonth.value = now.getMonth() + 1
+    exportSalaryMonth.value = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`
+    isExportDrawerOpen.value = true
 }
 
-const handleSalaryRecapPrint = async (month: string) => {
-    await printPdf(`/salary-recap/print?month=${month}`)
-    isSalaryRecapOpen.value = false
-}
-
-const handleBulkYearlyHoursPrint = async (payload: { year: number; month: number | null }) => {
-    isYearlyHoursBulkLoading.value = true
-    try {
-        const monthParam = null !== payload.month ? `&month=${payload.month}` : ''
-        await printPdf(`/yearly-hours/print-all?year=${payload.year}${monthParam}`)
-        isYearlyHoursBulkOpen.value = false
-    } finally {
-        isYearlyHoursBulkLoading.value = false
+const handleExportValidate = async () => {
+    if (!isExportValid.value) return
+    const choice = exportChoice.value
+    isExportDrawerOpen.value = false
+    if (choice === 'leave-recap') {
+        await printPdf('/leave-recap/print')
+    } else if (choice === 'salary-recap') {
+        await printPdf(`/salary-recap/print?month=${exportSalaryMonth.value}`)
+    } else if (choice === 'yearly-hours') {
+        await printPdf(`/yearly-hours/print-all?year=${exportYear.value}&month=${exportMonth.value}`)
     }
 }
 
+
 const confirmDelete = async (employee: Employee) => {
     const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
     if (!ok) return
diff --git a/frontend/pages/hours.vue b/frontend/pages/hours.vue
index e166800..debc600 100644
--- a/frontend/pages/hours.vue
+++ b/frontend/pages/hours.vue
@@ -70,6 +70,7 @@
                 :get-row-absence-style="getRowAbsenceStyle"
                 :has-row-formation="hasRowFormation"
                 :get-row-formation-label="getRowFormationLabel"
+                :get-row-contract-nature="getRowContractNature"
                 :get-row-updated-at="getRowUpdatedAt"
                 :get-presence-day-value="getPresenceDayValue"
                 :on-absence-click="openAbsenceDrawer"
@@ -184,6 +185,7 @@ const {
   getRowAbsenceStyle,
   hasRowFormation,
   getRowFormationLabel,
+  getRowContractNature,
   getRowUpdatedAt,
   getPresenceDayValue,
   openAbsenceDrawer,
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 95672b5..e5d1fd1 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -9,31 +9,18 @@
             class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
             @submit.prevent="handleSubmit"
         >
-            <div>
-                <label class="text-sm font-semibold text-neutral-700" for="username">
-                    Nom d'utilisateur
-                </label>
-                <input
-                    id="username"
-                    v-model="username"
-                    type="text"
-                    autocomplete="username"
-                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
-                />
-            </div>
+            <MalioInputText
+                v-model="username"
+                label="Nom d'utilisateur"
+                autocomplete="username"
+                group-class="mt-2"
+            />
 
-            <div>
-                <label class="text-sm font-semibold text-neutral-700" for="password">
-                    Mot de passe
-                </label>
-                <input
-                    id="password"
-                    v-model="password"
-                    type="password"
-                    autocomplete="current-password"
-                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
-                />
-            </div>
+            <MalioInputPassword
+                v-model="password"
+                label="Mot de passe"
+                autocomplete="current-password"
+            />
 
             <button
                 type="submit"
diff --git a/frontend/pages/sites.vue b/frontend/pages/sites.vue
index d6000af..9e4b995 100644
--- a/frontend/pages/sites.vue
+++ b/frontend/pages/sites.vue
@@ -2,13 +2,12 @@
   <div class="h-full flex flex-col overflow-hidden">
     <div class="flex items-center justify-between pb-6">
       <h1 class="text-4xl font-bold text-primary-500">Sites</h1>
-      <button
-        type="button"
-        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+      <MalioButton
+        label="Ajouter un site"
+        icon-name="mdi:plus"
+        icon-position="left"
         @click="openCreate"
-      >
-        + Ajouter un site
-      </button>
+      />
     </div>
 
     <div
@@ -52,22 +51,14 @@
       </div>
     </div>
 
-    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+    <MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
       <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="name">
-            Nom <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="name"
-            v-model="form.name"
-            type="text"
-            :class="nameFieldClass"
-          />
-          <p v-if="showNameError" class="mt-1 text-sm text-red-600">
-            Le nom du site est obligatoire.
-          </p>
-        </div>
+        <MalioInputText
+          v-model="form.name"
+          label="Nom *"
+          group-class="mt-2"
+          :error="showNameError ? 'Le nom du site est obligatoire.' : ''"
+        />
         <div>
           <label class="text-md font-semibold text-neutral-700" for="color">
             Couleur <span class="text-red-600">*</span>
@@ -83,32 +74,29 @@
           </div>
         </div>
         <div v-if="editingSite" class="grid grid-cols-2 gap-3 pt-2">
-          <button
-            type="button"
-            class="flex items-center justify-center rounded-md bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600"
+          <MalioButton
+            label="Supprimer"
+            variant="danger"
+            button-class="w-full"
             @click="confirmDelete(editingSite)"
-          >
-            Supprimer
-          </button>
-          <button
+          />
+          <MalioButton
             type="submit"
-            class="flex items-center justify-center rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :class="submitButtonClass"
-          >
-            Modifier
-          </button>
+            label="Modifier"
+            button-class="w-full"
+            :disabled="isSubmitting || !isFormValid"
+          />
         </div>
         <div v-else class="flex justify-center pt-2">
-          <button
+          <MalioButton
             type="submit"
-            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :class="submitButtonClass"
-          >
-            + Ajouter
-          </button>
+            label="Valider"
+            button-class="w-[200px]"
+            :disabled="isSubmitting || !isFormValid"
+          />
         </div>
       </form>
-    </AppDrawer>
+    </MalioDrawer>
   </div>
 </template>
 
@@ -146,22 +134,6 @@ const isFormValid = computed(() => isNameValid.value)
 
 const showNameError = computed(() => validationTouched.name && !isNameValid.value)
 
-const baseInputClass =
-  'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-const nameFieldClass = computed(() => {
-  if (showNameError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-
-const submitButtonClass = computed(() => {
-  if (isSubmitting.value || !isFormValid.value) {
-    return 'opacity-50 cursor-not-allowed'
-  }
-  return ''
-})
-
 const loadSites = async () => {
   isLoading.value = true
   try {
diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index de052c4..79b3e34 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -2,13 +2,12 @@
   <div class="h-full flex flex-col overflow-hidden">
     <div class="flex items-center justify-between pb-6">
       <h1 class="text-2xl font-bold text-primary-500 lg:text-4xl">Utilisateurs</h1>
-      <button
-        type="button"
-        class="rounded-lg bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-secondary-500 lg:px-4 lg:text-md"
+      <MalioButton
+        label="Ajouter"
+        icon-name="mdi:plus"
+        icon-position="left"
         @click="openCreate"
-      >
-        + Ajouter
-      </button>
+      />
     </div>
 
     <div
@@ -93,43 +92,25 @@
       </div>
     </div>
 
-    <AppDrawer
+    <MalioDrawer
       v-model="isDrawerOpen"
       :title="editingUser ? 'Modifier un utilisateur' : 'Ajouter un utilisateur'"
     >
       <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="username">
-            Nom d'utilisateur <span class="text-red-600">*</span>
-          </label>
-          <input
-            id="username"
-            v-model="form.username"
-            type="text"
-            :class="usernameFieldClass"
-          />
-          <p v-if="showUsernameError" class="mt-1 text-sm text-red-600">
-            Le nom d'utilisateur est obligatoire.
-          </p>
-        </div>
+        <MalioInputText
+          v-model="form.username"
+          :label="editingUser ? `Nom d'utilisateur` : `Nom d'utilisateur *`"
+          group-class="mt-2"
+          :error="showUsernameError ? `Le nom d'utilisateur est obligatoire.` : ''"
+        />
 
         <div>
-          <label class="text-md font-semibold text-neutral-700" for="password">
-            Mot de passe
-            <span v-if="!editingUser" class="text-red-600">*</span>
-          </label>
-          <input
-            id="password"
+          <MalioInputPassword
             v-model="form.password"
-            type="password"
-            :class="passwordFieldClass"
+            :label="editingUser ? 'Mot de passe' : 'Mot de passe *'"
+            :hint="editingUser ? 'Laisse vide pour ne pas changer le mot de passe.' : ''"
+            :error="!editingUser && showPasswordError ? 'Le mot de passe est obligatoire.' : ''"
           />
-          <p v-if="editingUser" class="mt-1 text-sm text-neutral-500">
-            Laisse vide pour ne pas changer le mot de passe.
-          </p>
-          <p v-else-if="showPasswordError" class="mt-1 text-sm text-red-600">
-            Le mot de passe est obligatoire.
-          </p>
         </div>
 
         <div>
@@ -172,40 +153,32 @@
         </div>
 
         <div v-if="form.accessMode === 'self'">
-          <label class="text-md font-semibold text-neutral-700" for="employee">
-            Employé lié
-          </label>
-          <select
-            id="employee"
-            v-model="form.employeeId"
-            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-          >
-            <option value="">Aucun</option>
-            <option v-for="employee in employees" :key="employee.id" :value="employee.id">
-              {{ employee.firstName }} {{ employee.lastName }}
-            </option>
-          </select>
-          <p v-if="showSelfEmployeeError" class="mt-1 text-sm text-red-600">
-            Sélectionne un employé.
-          </p>
+          <MalioSelect
+            :model-value="form.employeeId === '' ? null : form.employeeId"
+            :options="employeeOptions"
+            label="Employé lié"
+            empty-option-label="Aucun"
+            min-width=""
+            :error="showSelfEmployeeError ? 'Sélectionne un employé.' : ''"
+            @update:model-value="onEmployeeChange"
+          />
         </div>
 
         <div v-if="form.accessMode === 'sites'">
           <p class="text-md font-semibold text-neutral-700">Sites autorisés</p>
           <div class="mt-2 grid gap-2 sm:grid-cols-2">
-            <label
+            <div
               v-for="site in sites"
               :key="site.id"
-              class="flex items-center gap-2 rounded-md border border-neutral-200 px-3 py-2 text-sm text-neutral-700 cursor-pointer"
+              class="flex h-10 items-center rounded-md border border-neutral-200 px-3"
             >
-              <input
-                type="checkbox"
-                class="cursor-pointer"
-                :checked="form.siteIds.includes(site.id)"
-                @change="toggleSite(site.id)"
+              <MalioCheckbox
+                :model-value="form.siteIds.includes(site.id)"
+                :label="site.name"
+                group-class="flex items-center"
+                @update:model-value="toggleSite(site.id)"
               />
-              <span>{{ site.name }}</span>
-            </label>
+            </div>
           </div>
           <p v-if="showSitesError" class="mt-1 text-sm text-red-600">
             Sélectionne au moins un site.
@@ -213,44 +186,31 @@
         </div>
 
         <div>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-              v-model="form.isLocked"
-              type="checkbox"
-              class="cursor-pointer"
-            />
-            <span class="text-md font-semibold text-neutral-700">Verrouiller le compte</span>
-          </label>
-          <p class="mt-1 text-sm text-neutral-500">
-            Un compte verrouillé ne peut plus se connecter.
-          </p>
+          <MalioCheckbox
+            v-model="form.isLocked"
+            label="Verrouiller le compte"
+            hint="Un compte verrouillé ne peut plus se connecter."
+          />
         </div>
 
         <div>
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-              v-model="form.hasLeaveRecapAccess"
-              type="checkbox"
-              class="cursor-pointer"
-            />
-            <span class="text-md font-semibold text-neutral-700">Accès à l'écran Récap. congés</span>
-          </label>
-          <p class="mt-1 text-sm text-neutral-500">
-            Affiche l'onglet dans la sidebar et donne accès au tableau récap.
-          </p>
+          <MalioCheckbox
+            v-model="form.hasLeaveRecapAccess"
+            label="Accès à l'écran Récap. congés"
+            hint="Affiche l'onglet dans la sidebar et donne accès au tableau récap."
+          />
         </div>
 
         <div class="flex justify-center pt-2">
-          <button
+          <MalioButton
             type="submit"
-            class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :class="submitButtonClass"
-          >
-            {{ editingUser ? 'Modifier' : '+ Ajouter' }}
-          </button>
+            :label="editingUser ? 'Modifier' : 'Valider'"
+            button-class="w-[200px]"
+            :disabled="isSubmitting || !isFormValid"
+          />
         </div>
       </form>
-    </AppDrawer>
+    </MalioDrawer>
   </div>
 </template>
 
@@ -348,27 +308,13 @@ const getSiteLabels = (user: User) => {
   return names.length > 0 ? names.join(', ') : 'Sites sélectionnés'
 }
 
-const baseInputClass =
-  'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-const usernameFieldClass = computed(() => {
-  if (showUsernameError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
-const passwordFieldClass = computed(() => {
-  if (showPasswordError.value) {
-    return `${baseInputClass} border-red-500`
-  }
-  return `${baseInputClass} border-neutral-300`
-})
+const employeeOptions = computed(() =>
+  employees.value.map((e) => ({ label: `${e.firstName} ${e.lastName}`, value: e.id }))
+)
 
-const submitButtonClass = computed(() => {
-  if (isSubmitting.value || !isFormValid.value) {
-    return 'opacity-50 cursor-not-allowed'
-  }
-  return ''
-})
+const onEmployeeChange = (value: string | number | null) => {
+  form.employeeId = value === null ? '' : Number(value)
+}
 
 const loadData = async () => {
   isLoading.value = true
diff --git a/frontend/services/dto/employee-leave-summary.ts b/frontend/services/dto/employee-leave-summary.ts
index 20a85e0..7150778 100644
--- a/frontend/services/dto/employee-leave-summary.ts
+++ b/frontend/services/dto/employee-leave-summary.ts
@@ -15,5 +15,6 @@ export type EmployeeLeaveSummary = {
   previousYearRemainingDays: number
   previousYearPaidDays: number
   presenceDaysByMonth: Record<string, number>
+  presenceDaysToToday: number
 }
 
diff --git a/frontend/services/dto/work-hour.ts b/frontend/services/dto/work-hour.ts
index 99497db..bbcfb32 100644
--- a/frontend/services/dto/work-hour.ts
+++ b/frontend/services/dto/work-hour.ts
@@ -111,6 +111,7 @@ export type WorkHourDayContextRow = {
   hasFormation?: boolean
   formationLabel?: string | null
   virtualHolidayMinutes?: number
+  contractNature?: 'CDI' | 'CDD' | 'INTERIM' | null
 }
 
 export type WorkHourDayContext = {
diff --git a/src/ApiResource/EmployeeLeaveSummary.php b/src/ApiResource/EmployeeLeaveSummary.php
index 0b275bd..de27fac 100644
--- a/src/ApiResource/EmployeeLeaveSummary.php
+++ b/src/ApiResource/EmployeeLeaveSummary.php
@@ -38,4 +38,7 @@ final class EmployeeLeaveSummary
 
     /** @var array<string, float> YYYY-MM => count (0.5 for half-days) */
     public array $presenceDaysByMonth = [];
+
+    /** Cumul des jours de présence depuis le début de l'année de congé jusqu'à aujourd'hui (forfait). */
+    public float $presenceDaysToToday = 0.0;
 }
diff --git a/src/Dto/WorkHours/DayContextRow.php b/src/Dto/WorkHours/DayContextRow.php
index c72ad26..10b1bf9 100644
--- a/src/Dto/WorkHours/DayContextRow.php
+++ b/src/Dto/WorkHours/DayContextRow.php
@@ -20,6 +20,7 @@ final class DayContextRow
         public bool $hasFormation = false,
         public ?string $formationLabel = null,
         public int $virtualHolidayMinutes = 0,
+        public ?string $contractNature = null,
     ) {}
 
     public function setFormation(string $label): void
@@ -77,7 +78,8 @@ final class DayContextRow
      *     isDriverContract:bool,
      *     hasFormation:bool,
      *     formationLabel:?string,
-     *     virtualHolidayMinutes:int
+     *     virtualHolidayMinutes:int,
+     *     contractNature:?string
      * }
      */
     public function toArray(): array
@@ -96,6 +98,7 @@ final class DayContextRow
             'hasFormation'          => $this->hasFormation,
             'formationLabel'        => $this->formationLabel,
             'virtualHolidayMinutes' => $this->virtualHolidayMinutes,
+            'contractNature'        => $this->contractNature,
         ];
     }
 
diff --git a/src/Service/Leave/LeaveRecapRowBuilder.php b/src/Service/Leave/LeaveRecapRowBuilder.php
index 633a357..46a0d4e 100644
--- a/src/Service/Leave/LeaveRecapRowBuilder.php
+++ b/src/Service/Leave/LeaveRecapRowBuilder.php
@@ -73,7 +73,7 @@ final readonly class LeaveRecapRowBuilder
                         }
                     }
                     $cpN1Remaining     = round($yearSummary['previousYearRemainingDays'], 2);
-                    $cpN               = (string) round($yearSummary['acquiredDays'], 2);
+                    $cpN               = (string) round($yearSummary['remainingDays'], 2);
                     $acquiredSaturdays = '-';
                 } else {
                     $cpN1Remaining     = round($yearSummary['remainingDays'], 2);
diff --git a/src/State/EmployeeLeaveSummaryProvider.php b/src/State/EmployeeLeaveSummaryProvider.php
index e1b7c28..24ed690 100644
--- a/src/State/EmployeeLeaveSummaryProvider.php
+++ b/src/State/EmployeeLeaveSummaryProvider.php
@@ -119,8 +119,29 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
         $summary->previousYearRemainingDays = $yearSummary['previousYearRemainingDays'];
         $summary->previousYearPaidDays      = $paidLeaveDays;
 
-        [$periodFrom, $periodTo]      = $this->resolvePeriodBounds($employee, $year);
-        $summary->presenceDaysByMonth = $this->computePresenceDaysByMonth($employee, $periodFrom, $periodTo);
+        [$periodFrom, $periodTo] = $this->resolvePeriodBounds($employee, $year);
+        // Forfait-only: leaves taken from N-1 stock do NOT decrement presence days.
+        // For non-forfait, previousYearTakenDays is always 0, so the budget has no effect.
+        $n1AbsencesBudget             = $yearSummary['previousYearTakenDays'];
+        $summary->presenceDaysByMonth = $this->computePresenceDaysByMonth(
+            $employee,
+            $periodFrom,
+            $periodTo,
+            $n1AbsencesBudget
+        );
+
+        // Same logic as presenceDaysByMonth but bounded at today: number of presence days
+        // accumulated from leave year start up to today (inclusive).
+        $today                        = new DateTimeImmutable('today');
+        $cappedTo                     = $today < $periodTo ? $today : $periodTo;
+        $summary->presenceDaysToToday = $today < $periodFrom
+            ? 0.0
+            : array_sum($this->computePresenceDaysByMonth(
+                $employee,
+                $periodFrom,
+                $cappedTo,
+                $n1AbsencesBudget
+            ));
 
         return $summary;
     }
@@ -686,8 +707,12 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
      *
      * @return array<string, float> YYYY-MM => presence day count
      */
-    private function computePresenceDaysByMonth(Employee $employee, DateTimeImmutable $from, DateTimeImmutable $to): array
-    {
+    private function computePresenceDaysByMonth(
+        Employee $employee,
+        DateTimeImmutable $from,
+        DateTimeImmutable $to,
+        float $n1AbsencesBudget = 0.0
+    ): array {
         $publicHolidays    = $this->buildPublicHolidayMap($from, $to);
         $weekendWorkedDays = $this->workHourRepository->countWeekendWorkedDaysByMonth($employee, $from, $to);
         $absences          = $this->absenceRepository->findByEmployeeAndOverlappingDateRange($employee, $from, $to);
@@ -697,10 +722,20 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
             ? $this->workHourRepository->findWorkedDatesAmong($employee, array_keys($publicHolidays))
             : [];
 
+        // Sort absences chronologically so N-1 budget (forfait only) is consumed in date order:
+        // earliest absences attribute to N-1 first, later ones overflow to N and reduce presence.
+        $sortedAbsences = $absences;
+        usort(
+            $sortedAbsences,
+            static fn ($a, $b): int => $a->getStartDate() <=> $b->getStartDate()
+        );
+
+        $remainingN1Budget = $n1AbsencesBudget;
+
         // Count absence days per month, iterating day by day to handle multi-day absences
         // and properly distribute across months.
         $absenceDaysByMonth = [];
-        foreach ($absences as $absence) {
+        foreach ($sortedAbsences as $absence) {
             $start = DateTimeImmutable::createFromInterface($absence->getStartDate())->setTime(0, 0);
             $end   = DateTimeImmutable::createFromInterface($absence->getEndDate())->setTime(0, 0);
 
@@ -718,6 +753,17 @@ final readonly class EmployeeLeaveSummaryProvider implements ProviderInterface
                     continue;
                 }
 
+                // Forfait: leaves taken from N-1 stock do NOT decrement presence days.
+                // We chronologically consume the N-1 budget before counting any absence.
+                if ($remainingN1Budget > 0.0) {
+                    $consumed = min($remainingN1Budget, $dayAmount);
+                    $remainingN1Budget -= $consumed;
+                    $dayAmount -= $consumed;
+                    if ($dayAmount <= 0.0) {
+                        continue;
+                    }
+                }
+
                 $absenceDaysByMonth[$monthKey] = ($absenceDaysByMonth[$monthKey] ?? 0.0) + $dayAmount;
             }
         }
diff --git a/src/State/WorkHourDayContextProvider.php b/src/State/WorkHourDayContextProvider.php
index a5bd0d0..4fcf4fa 100644
--- a/src/State/WorkHourDayContextProvider.php
+++ b/src/State/WorkHourDayContextProvider.php
@@ -57,13 +57,17 @@ final readonly class WorkHourDayContextProvider implements ProviderInterface
             }
 
             // On initialise toutes les lignes, même sans absence ce jour-là.
-            $contract                      = $this->contractResolver->resolveForEmployeeAndDate($employee, $workDate);
-            $workDaysMinutes               = $this->contractResolver->resolveWorkDaysMinutesForEmployeeAndDate($employee, $workDate);
+            $contract        = $this->contractResolver->resolveForEmployeeAndDate($employee, $workDate);
+            $workDaysMinutes = $this->contractResolver->resolveWorkDaysMinutesForEmployeeAndDate($employee, $workDate);
+            $contractNature  = null !== $contract
+                ? $this->contractResolver->resolveNatureForEmployeeAndDate($employee, $workDate)->value
+                : null;
             $rowsByEmployeeId[$employeeId] = new DayContextRow(
                 employeeId: $employeeId,
                 hasContractAtDate: null !== $contract,
                 isDriverContract: $this->contractResolver->resolveIsDriverForEmployeeAndDate($employee, $workDate),
                 virtualHolidayMinutes: $this->holidayVirtualHoursResolver->resolveVirtualCredit($contract, $workDate, false, $workDaysMinutes),
+                contractNature: $contractNature,
             );
         }
 
diff --git a/tests/State/WorkHourDayContextProviderTest.php b/tests/State/WorkHourDayContextProviderTest.php
index 6227b7c..37525b6 100644
--- a/tests/State/WorkHourDayContextProviderTest.php
+++ b/tests/State/WorkHourDayContextProviderTest.php
@@ -10,6 +10,7 @@ use App\Entity\AbsenceType;
 use App\Entity\Contract;
 use App\Entity\Employee;
 use App\Entity\User;
+use App\Enum\ContractNature;
 use App\Enum\HalfDay;
 use App\Repository\Contract\AbsenceReadRepositoryInterface;
 use App\Repository\Contract\EmployeeScopedRepositoryInterface;
@@ -176,6 +177,10 @@ final class WorkHourDayContextProviderTest extends TestCase
             ->method('resolveForEmployeeAndDate')
             ->willReturnCallback(static fn (Employee $employee): ?Contract => $employee->getContract())
         ;
+        $resolver
+            ->method('resolveNatureForEmployeeAndDate')
+            ->willReturn(ContractNature::CDI)
+        ;
 
         return $resolver;
     }

From 06173e7225bc0dfbb9433838927e1f7bdc9ba0b2 Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Mon, 27 Apr 2026 12:08:31 +0000
Subject: [PATCH 16/23] chore: bump version to v0.1.96

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index 9027f77..3c6fa11 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.95'
+    app.version: '0.1.96'

From 74c109713c31c6a995cb48616d452e4ac7bf7345 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 27 Apr 2026 15:01:51 +0200
Subject: [PATCH 17/23] fix : malio UI

---
 frontend/package-lock.json         |   8 +-
 frontend/package.json              |   2 +-
 frontend/pages/employees/index.vue | 256 +++++++++--------------------
 3 files changed, 83 insertions(+), 183 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a67afbf..e422ca4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,7 +7,7 @@
             "name": "frontend",
             "hasInstallScript": true,
             "dependencies": {
-                "@malio/layer-ui": "^1.4.5",
+                "@malio/layer-ui": "^1.4.6",
                 "@nuxt/icon": "^2.2.1",
                 "@nuxtjs/i18n": "^10.2.1",
                 "@pinia/nuxt": "^0.11.3",
@@ -2222,9 +2222,9 @@
             "license": "MIT"
         },
         "node_modules/@malio/layer-ui": {
-            "version": "1.4.5",
-            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.4.5/layer-ui-1.4.5.tgz",
-            "integrity": "sha512-UfVkLJk3WWGoZE1eyei0pY45IUbZRzabJr2X6GNFabHd/8EmuXqwP+LxCl8wEAO4ODrNKsVLJdi0eL3Zekv4Dg==",
+            "version": "1.4.6",
+            "resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.4.6/layer-ui-1.4.6.tgz",
+            "integrity": "sha512-stHqUAJ8E6a62Ka7QXlE177GhkIsjtmYNa/tNk1TVpbJ099okfLLivrlofEl7CCAqDeMaIepnW4q0vxJT+EFEA==",
             "dependencies": {
                 "@nuxt/icon": "^2.2.1",
                 "@nuxtjs/tailwindcss": "^6.14.0",
diff --git a/frontend/package.json b/frontend/package.json
index ce7abf3..f565b5a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,7 @@
     "dependencies": {
         "@nuxt/icon": "^2.2.1",
         "@nuxtjs/i18n": "^10.2.1",
-        "@malio/layer-ui": "^1.4.5",
+        "@malio/layer-ui": "^1.4.6",
         "@pinia/nuxt": "^0.11.3",
         "nuxt": "^4.3.0",
         "nuxt-toast": "^1.4.0",
diff --git a/frontend/pages/employees/index.vue b/frontend/pages/employees/index.vue
index 9f00ddb..861f546 100644
--- a/frontend/pages/employees/index.vue
+++ b/frontend/pages/employees/index.vue
@@ -84,105 +84,53 @@
             </NuxtLink>
         </div>
 
-        <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+        <MalioDrawer v-model="isDrawerOpen" :title="drawerTitle">
             <form class="space-y-4" @submit.prevent="handleSubmit">
-                <div>
-                    <label class="text-md font-semibold text-neutral-700" for="first-name">
-                        Prénom <span class="text-red-600">*</span>
-                    </label>
-                    <input
-                        id="first-name"
-                        v-model="form.firstName"
-                        type="text"
-                        :class="firstNameFieldClass"
-                    />
-                    <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
-                        Le prénom est obligatoire.
-                    </p>
-                </div>
-                <div>
-                    <label class="text-md font-semibold text-neutral-700" for="last-name">
-                        Nom <span class="text-red-600">*</span>
-                    </label>
-                    <input
-                        id="last-name"
-                        v-model="form.lastName"
-                        type="text"
-                        :class="lastNameFieldClass"
-                    />
-                    <p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
-                        Le nom est obligatoire.
-                    </p>
-                </div>
-                <div>
-                    <label class="text-md font-semibold text-neutral-700" for="site">
-                        Site <span class="text-red-600">*</span>
-                    </label>
-                    <select
-                        id="site"
-                        v-model="form.siteId"
-                        :class="siteFieldClass"
-                    >
-                        <option value="">Aucun site</option>
-                        <option v-for="site in sites" :key="site.id" :value="site.id">
-                            {{ site.name }}
-                        </option>
-                    </select>
-                    <p v-if="showSiteError" class="mt-1 text-sm text-red-600">
-                        Le site est obligatoire.
-                    </p>
-                </div>
+                <MalioInputText
+                    v-model="form.firstName"
+                    label="Prénom *"
+                    group-class="mt-2"
+                    :error="showFirstNameError ? 'Le prénom est obligatoire.' : ''"
+                />
+                <MalioInputText
+                    v-model="form.lastName"
+                    label="Nom *"
+                    group-class="mt-2"
+                    :error="showLastNameError ? 'Le nom est obligatoire.' : ''"
+                />
+                <MalioSelect
+                    :model-value="form.siteId === '' ? null : form.siteId"
+                    :options="formSiteOptions"
+                    label="Site *"
+                    min-width=""
+                    :error="showSiteError ? 'Le site est obligatoire.' : ''"
+                    @update:model-value="(v) => { form.siteId = v === null ? '' : Number(v) }"
+                />
                 <template v-if="!editingEmployee">
-                    <div>
-                        <label class="text-md font-semibold text-neutral-700" for="contract-nature">
-                            Type de contrat <span class="text-red-600">*</span>
-                        </label>
-                        <select
-                            id="contract-nature"
-                            v-model="form.contractNature"
-                            :class="contractNatureFieldClass"
-                        >
-                            <option value="CDI">CDI</option>
-                            <option value="CDD">CDD</option>
-                            <option value="INTERIM">Intérim</option>
-                        </select>
-                        <p v-if="showContractNatureError" class="mt-1 text-sm text-red-600">
-                            Le type de contrat est obligatoire.
-                        </p>
-                    </div>
-                    <div v-if="form.contractNature === 'INTERIM'">
-                        <label class="text-md font-semibold text-neutral-700" for="interim-agency">
-                            Agence d'intérim
-                        </label>
-                        <select
-                            id="interim-agency"
-                            v-model="form.interimAgencyId"
-                            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-                        >
-                            <option value="">Aucune</option>
-                            <option v-for="agency in interimAgencies" :key="agency.id" :value="agency.id">
-                                {{ agency.name }}
-                            </option>
-                        </select>
-                    </div>
-                    <div>
-                        <label class="text-md font-semibold text-neutral-700" for="contract">
-                            Temps de travail <span class="text-red-600">*</span>
-                        </label>
-                        <select
-                            id="contract"
-                            v-model="form.contractId"
-                            :class="contractFieldClass"
-                        >
-                            <option value="">Sélectionner un contrat</option>
-                            <option v-for="contract in contracts" :key="contract.id" :value="contract.id">
-                                {{ contract.name }}
-                            </option>
-                        </select>
-                        <p v-if="showContractError" class="mt-1 text-sm text-red-600">
-                            Le temps de travail est obligatoire.
-                        </p>
-                    </div>
+                    <MalioSelect
+                        :model-value="form.contractNature"
+                        :options="contractNatureFormOptions"
+                        label="Type de contrat *"
+                        min-width=""
+                        :error="showContractNatureError ? 'Le type de contrat est obligatoire.' : ''"
+                        @update:model-value="(v) => { if (v !== null) form.contractNature = v as 'CDI' | 'CDD' | 'INTERIM' }"
+                    />
+                    <MalioSelect
+                        v-if="form.contractNature === 'INTERIM'"
+                        :model-value="form.interimAgencyId === '' ? null : form.interimAgencyId"
+                        :options="interimAgencyOptions"
+                        label="Agence d'intérim"
+                        min-width=""
+                        @update:model-value="(v) => { form.interimAgencyId = v === null ? '' : Number(v) }"
+                    />
+                    <MalioSelect
+                        :model-value="form.contractId === '' ? null : form.contractId"
+                        :options="contractFormOptions"
+                        label="Temps de travail *"
+                        min-width=""
+                        :error="showContractError ? 'Le temps de travail est obligatoire.' : ''"
+                        @update:model-value="(v) => { form.contractId = v === null ? '' : Number(v) }"
+                    />
                     <div>
                         <label class="text-md font-semibold text-neutral-700" for="contract-start-date">
                             Début contrat <span class="text-red-600">*</span>
@@ -191,7 +139,7 @@
                             id="contract-start-date"
                             v-model="form.contractStartDate"
                             type="date"
-                            :class="contractStartDateFieldClass"
+                            :class="[dateInputBaseClass, form.contractStartDate ? 'border-black' : 'border-m-muted', showContractStartDateError ? '!border-m-danger' : '']"
                         />
                         <p v-if="showContractStartDateError" class="mt-1 text-sm text-red-600">
                             La date de début est obligatoire.
@@ -206,22 +154,18 @@
                             id="contract-end-date"
                             v-model="form.contractEndDate"
                             type="date"
-                            :class="contractEndDateFieldClass"
+                            :class="[dateInputBaseClass, form.contractEndDate ? 'border-black' : 'border-m-muted', showContractEndDateError ? '!border-m-danger' : '']"
                         />
                         <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
                             La date de fin est obligatoire pour un CDD ou un Intérim.
                         </p>
                     </div>
-                    <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">
-                        <label class="inline-flex items-center gap-2 text-md font-semibold text-neutral-700" for="is-driver">
-                            <input
-                                id="is-driver"
-                                v-model="form.isDriver"
-                                type="checkbox"
-                                class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
-                            />
-                            Chauffeur
-                        </label>
+                    <div class="flex h-10 items-center rounded-md border border-neutral-200 bg-neutral-50 px-3">
+                        <MalioCheckbox
+                            v-model="form.isDriver"
+                            label="Chauffeur"
+                            group-class="flex items-center"
+                        />
                     </div>
                     <WorkDaysHoursInput
                         v-if="requiresSchedule"
@@ -230,23 +174,19 @@
                     />
                 </template>
                 <div class="flex justify-end gap-3 pt-2">
-                    <button
-                        type="button"
-                        class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+                    <MalioButton
+                        label="Annuler"
+                        variant="tertiary"
                         @click="isDrawerOpen = false"
-                    >
-                        Annuler
-                    </button>
-                    <button
+                    />
+                    <MalioButton
                         type="submit"
-                        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-                        :class="submitButtonClass"
-                    >
-                        Enregistrer
-                    </button>
+                        label="Enregistrer"
+                        :disabled="isSubmitting || !isFormValid"
+                    />
                 </div>
             </form>
-        </AppDrawer>
+        </MalioDrawer>
 
         <MalioDrawer v-model="isExportDrawerOpen" title="Export">
             <div class="space-y-4">
@@ -492,63 +432,23 @@ const showContractEndDateError = computed(
     () => !editingEmployee.value && validationTouched.contractEndDate && !isContractEndDateValid.value
 )
 
-const baseInputClass =
-    'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
-const firstNameFieldClass = computed(() => {
-    if (showFirstNameError.value) {
-        return `${baseInputClass} border-red-500`
-    }
-    return `${baseInputClass} border-neutral-300`
-})
-const lastNameFieldClass = computed(() => {
-    if (showLastNameError.value) {
-        return `${baseInputClass} border-red-500`
-    }
-    return `${baseInputClass} border-neutral-300`
-})
-const siteFieldClass = computed(() => {
-    const baseSelectClass =
-        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-    if (showSiteError.value) {
-        return `${baseSelectClass} border-red-500`
-    }
-    return `${baseSelectClass} border-neutral-300`
-})
-const contractFieldClass = computed(() => {
-    const baseClass =
-        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-    if (showContractError.value) {
-        return `${baseClass} border-red-500`
-    }
-    return `${baseClass} border-neutral-300`
-})
-const contractNatureFieldClass = computed(() => {
-    const baseClass =
-        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
-    if (showContractNatureError.value) {
-        return `${baseClass} border-red-500`
-    }
-    return `${baseClass} border-neutral-300`
-})
-const contractStartDateFieldClass = computed(() => {
-    if (showContractStartDateError.value) {
-        return `${baseInputClass} border-red-500`
-    }
-    return `${baseInputClass} border-neutral-300`
-})
-const contractEndDateFieldClass = computed(() => {
-    if (showContractEndDateError.value) {
-        return `${baseInputClass} border-red-500`
-    }
-    return `${baseInputClass} border-neutral-300`
-})
+const dateInputBaseClass =
+    'mt-2 h-10 w-full rounded-md border px-3 text-md text-black outline-none focus:border-2 focus:border-m-primary'
 
-const submitButtonClass = computed(() => {
-    if (isSubmitting.value || !isFormValid.value) {
-        return 'opacity-50 cursor-not-allowed'
-    }
-    return ''
-})
+const formSiteOptions = computed(() =>
+    sites.value.map((site) => ({ label: site.name, value: site.id }))
+)
+const interimAgencyOptions = computed(() =>
+    interimAgencies.value.map((agency) => ({ label: agency.name, value: agency.id }))
+)
+const contractFormOptions = computed(() =>
+    contracts.value.map((contract) => ({ label: contract.name, value: contract.id }))
+)
+const contractNatureFormOptions = [
+    { label: 'CDI', value: 'CDI' },
+    { label: 'CDD', value: 'CDD' },
+    { label: 'Intérim', value: 'INTERIM' }
+]
 
 const loadEmployees = async () => {
     isLoading.value = true

From 973de2d0941d4bf49e02c73982fbeb7f54be5b7d Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Mon, 27 Apr 2026 13:02:01 +0000
Subject: [PATCH 18/23] chore: bump version to v0.1.97

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index 3c6fa11..c16d343 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.96'
+    app.version: '0.1.97'

From 13eeeb9c86232d194553c8bb51232b0f72f199d8 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 29 Apr 2026 09:43:46 +0000
Subject: [PATCH 19/23] =?UTF-8?q?feat=20:=20ajout=20colonne=20Cumul=20sur?=
 =?UTF-8?q?=20l'=C3=A9cran=20RTT=20(#18)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Affiche le solde RTT à la fin de chaque semaine (report N-1 + somme
totalMinutes des semaines − paiements des mois antérieurs). Permet la
comparaison ligne à ligne avec un suivi RH externe.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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

## Description de la PR

## Modification du .env

## Check list

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

Reviewed-on: https://gitea.malio.fr/MALIO-DEV/SIRH/pulls/18
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
---
 doc/functional-rules.md                       |  1 +
 frontend/components/employees/RttTab.vue      | 37 ++++++++++++-------
 frontend/data/documentation-content.ts        |  1 +
 frontend/services/dto/employee-rtt-summary.ts |  1 +
 src/Dto/Rtt/EmployeeRttWeekSummary.php        |  1 +
 src/State/EmployeeRttSummaryProvider.php      | 12 ++++++
 6 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/doc/functional-rules.md b/doc/functional-rules.md
index 3be0d1d..75a07f7 100644
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -313,6 +313,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
       - les heures payées sont soustraites du disponible RTT (`availableMinutes -= totalPaidMinutes`)
       - affichage: 2 lignes par mois dans le tableau (25% et 50%)
     - colonnes Total 25% et Total 50%: somme base + bonus de chaque tranche
+    - colonne Cumul (dernière colonne): solde RTT à la fin de chaque semaine = `report N-1 + somme totalMinutes des semaines jusqu'à celle-ci − paiements RTT des mois antérieurs au mois de la semaine`. Le paiement d'un mois M n'est déduit qu'à partir des semaines du mois M+1 (cohérent avec la logique de la ligne "Report mois précédent"). Permet la comparaison ligne à ligne avec un suivi RH externe (Excel)
     - ligne Report N-1 (carry rollover): affichée en juin uniquement si carry > 0
     - ligne Report mois précédent: solde cumulé (carry N-1 + semaines antérieures − paiements antérieurs), affichée à partir de juillet (masquée si nul)
     - Reste = Report cumulé + Total du mois − Payé du mois (balance courante en fin de mois)
diff --git a/frontend/components/employees/RttTab.vue b/frontend/components/employees/RttTab.vue
index 12ef983..f0f5c13 100644
--- a/frontend/components/employees/RttTab.vue
+++ b/frontend/components/employees/RttTab.vue
@@ -40,14 +40,15 @@
       <table class="w-full table-fixed border-collapse text-[18px]">
         <colgroup>
           <col />
-          <col class="w-[11%]" />
-          <col class="w-[11%]" />
-          <col class="w-[11%]" />
-          <col class="w-[11%]" />
-          <col class="w-[11%]" />
-          <col class="w-[11%]" />
-          <col class="w-[11%]" />
-          <col class="w-[11%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
+          <col class="w-[10%]" />
         </colgroup>
         <thead>
           <tr>
@@ -59,7 +60,8 @@
             <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Base</th>
             <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">50%</th>
             <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">Total 50%</th>
-            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Total</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">Total</th>
+            <th class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">Cumul</th>
           </tr>
         </thead>
         <tbody>
@@ -73,6 +75,7 @@
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryBase50Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBase50Minutes) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryBonus50Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBonus50Minutes) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(summary!.carryBase50Minutes + summary!.carryBonus50Minutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryBase50Minutes + summary!.carryBonus50Minutes) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(summary!.carryFromPreviousYearMinutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryFromPreviousYearMinutes) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(summary!.carryFromPreviousYearMinutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(summary!.carryFromPreviousYearMinutes) }}</span></td>
           </tr>
 
@@ -86,6 +89,7 @@
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(monthReport.base50) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.base50) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(monthReport.bonus50) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.bonus50) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(monthReport.total50) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.total50) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(monthReport.total) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.total) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(monthReport.total) }} <span class="text-neutral-400">/ {{ formatCentiemes(monthReport.total) }}</span></td>
           </tr>
 
@@ -126,10 +130,14 @@
               <span v-if="week">{{ formatMinutes(week.base50Minutes + week.bonus50Minutes) }}</span>
               <span v-else>0 h</span>
             </td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">
               <span v-if="week">{{ formatMinutes(week.totalMinutes) }}</span>
               <span v-else>0 h</span>
             </td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">
+              <span v-if="week">{{ formatMinutes(week.cumulativeBalanceMinutes) }} <span class="text-neutral-400">/ {{ formatCentiemes(week.cumulativeBalanceMinutes) }}</span></span>
+              <span v-else>&nbsp;</span>
+            </td>
           </tr>
 
           <!-- Total row -->
@@ -142,7 +150,8 @@
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.base50) }}</td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.bonus50) }}</td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2 border-t-2">{{ formatMinutes(totals.total50) }}</td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-t-2">{{ formatMinutes(totals.total) }}</td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2 border-t-2">{{ formatMinutes(totals.total) }}</td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500 border-t-2">-</td>
           </tr>
 
           <!-- Payé row -->
@@ -155,7 +164,8 @@
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBase50Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBase50Minutes : 0) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ currentPayment ? formatMinutes(-currentPayment.paidBonus50Minutes) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -currentPayment.paidBonus50Minutes : 0) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ currentPayment ? formatMinutes(-(currentPayment.paidBase50Minutes + currentPayment.paidBonus50Minutes)) : '0 h' }} <span class="text-neutral-400">/ {{ formatCentiemes(currentPayment ? -(currentPayment.paidBase50Minutes + currentPayment.paidBonus50Minutes) : 0) }}</span></td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(paidTotal) }} <span class="text-neutral-400">/ {{ formatCentiemes(paidTotal) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(paidTotal) }} <span class="text-neutral-400">/ {{ formatCentiemes(paidTotal) }}</span></td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500">-</td>
           </tr>
 
           <!-- Reste row -->
@@ -168,7 +178,8 @@
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(reste.base50) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.base50) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(reste.bonus50) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.bonus50) }}</span></td>
             <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(reste.total50) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.total50) }}</span></td>
-            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500">{{ formatMinutes(reste.total) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.total) }}</span></td>
+            <td class="px-4 py-[10px] text-center font-bold text-primary-500 border border-primary-500 border-r-2">{{ formatMinutes(reste.total) }} <span class="text-neutral-400">/ {{ formatCentiemes(reste.total) }}</span></td>
+            <td class="px-4 py-[10px] text-center text-neutral-500 border border-primary-500">-</td>
           </tr>
         </tbody>
       </table>
diff --git a/frontend/data/documentation-content.ts b/frontend/data/documentation-content.ts
index 284b755..442664c 100644
--- a/frontend/data/documentation-content.ts
+++ b/frontend/data/documentation-content.ts
@@ -482,6 +482,7 @@ export const documentationSections: DocSection[] = [
         blocks: [
           { type: 'list', content: 'Report N-1 : solde de l\'exercice précédent\nAcquis : cumul des heures supplémentaires de l\'exercice en cours\nDisponible : report + acquis − payé\nPayé : RTT convertis en salaire (soustraits du disponible)' },
           { type: 'note', content: 'Les contrats INTERIM et le mode PRESENCE n\'accumulent pas de RTT (affiché à 0).' },
+          { type: 'paragraph', content: 'La colonne "Cumul" affiche le solde RTT à la fin de chaque semaine : Report N-1 + somme des heures hebdomadaires jusqu\'à la semaine concernée − paiements RTT des mois précédents. Un paiement enregistré sur le mois M n\'est déduit qu\'à partir des semaines du mois M+1. Permet la comparaison ligne à ligne avec un suivi RH externe (Excel).' },
         ],
       },
       {
diff --git a/frontend/services/dto/employee-rtt-summary.ts b/frontend/services/dto/employee-rtt-summary.ts
index 5d0dbe5..bf09a03 100644
--- a/frontend/services/dto/employee-rtt-summary.ts
+++ b/frontend/services/dto/employee-rtt-summary.ts
@@ -9,6 +9,7 @@ export type EmployeeRttWeekSummary = {
   base50Minutes: number
   bonus50Minutes: number
   totalMinutes: number
+  cumulativeBalanceMinutes: number
 }
 
 export type RttMonthPayment = {
diff --git a/src/Dto/Rtt/EmployeeRttWeekSummary.php b/src/Dto/Rtt/EmployeeRttWeekSummary.php
index e409869..600a80b 100644
--- a/src/Dto/Rtt/EmployeeRttWeekSummary.php
+++ b/src/Dto/Rtt/EmployeeRttWeekSummary.php
@@ -17,5 +17,6 @@ final class EmployeeRttWeekSummary
         public int $base50Minutes = 0,
         public int $bonus50Minutes = 0,
         public int $totalMinutes = 0,
+        public int $cumulativeBalanceMinutes = 0,
     ) {}
 }
diff --git a/src/State/EmployeeRttSummaryProvider.php b/src/State/EmployeeRttSummaryProvider.php
index dc28e53..bf091e4 100644
--- a/src/State/EmployeeRttSummaryProvider.php
+++ b/src/State/EmployeeRttSummaryProvider.php
@@ -164,6 +164,18 @@ final readonly class EmployeeRttSummaryProvider implements ProviderInterface
             $monthBuckets[$m]['bonus50'] += $payment->getBonus50Minutes();
         }
 
+        $runningCumul = $summary->carryFromPreviousYearMinutes;
+        $prevMonth    = null;
+        foreach ($summary->weeks as $week) {
+            if (null !== $prevMonth && $week->month !== $prevMonth && isset($monthBuckets[$prevMonth])) {
+                $b = $monthBuckets[$prevMonth];
+                $runningCumul -= $b['base25'] + $b['bonus25'] + $b['base50'] + $b['bonus50'];
+            }
+            $runningCumul += $week->totalMinutes;
+            $week->cumulativeBalanceMinutes = $runningCumul;
+            $prevMonth                      = $week->month;
+        }
+
         $monthPayments    = [];
         $totalPaidMinutes = 0;
 

From 6f43c3356f2d4fdf5f4cdee69700eaff95ce4ee1 Mon Sep 17 00:00:00 2001
From: gitea-actions <gitea-actions@local>
Date: Wed, 29 Apr 2026 09:43:56 +0000
Subject: [PATCH 20/23] chore: bump version to v0.1.98

---
 config/version.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/version.yaml b/config/version.yaml
index c16d343..3d7ea44 100644
--- a/config/version.yaml
+++ b/config/version.yaml
@@ -1,2 +1,2 @@
 parameters:
-    app.version: '0.1.97'
+    app.version: '0.1.98'

From eacf52425a1160405cbaed4fb4ccf871b9cfa8e8 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 29 Apr 2026 15:27:00 +0200
Subject: [PATCH 21/23] =?UTF-8?q?fix=20:=20r=C3=A9cap=20salaire=20chauffeu?=
 =?UTF-8?q?r,=20comptage=20des=20repas=20(d=C3=A9jeuner=20+=20d=C3=AEner)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Un jour avec déjeuner ET dîner cochés ne comptait qu'1 repas (||) au lieu de 2.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 doc/functional-rules.md                | 2 +-
 frontend/data/documentation-content.ts | 2 +-
 src/State/SalaryRecapPrintProvider.php | 5 ++++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/doc/functional-rules.md b/doc/functional-rules.md
index 75a07f7..f694146 100644
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -379,7 +379,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 | Maladie - Nombre | Absence code 'M' ou 'AT' | Jours (demi-journées = 0.5) |
 | Maladie - Date | Absence code 'M' ou 'AT' | Dates formatées dd/mm |
 | CHAUFFEUR - PDJ | WorkHour.hasBreakfast | Comptage mois (chauffeurs uniquement) |
-| CHAUFFEUR - REPAS | WorkHour.hasLunch + hasDinner | Comptage mois (chauffeurs uniquement) |
+| CHAUFFEUR - REPAS | WorkHour.hasLunch + hasDinner | Somme sur le mois : +1 par déjeuner coché et +1 par dîner coché (un jour avec les deux compte 2 repas, chauffeurs uniquement) |
 | CHAUFFEUR - NUITEE | WorkHour.hasOvernight | Comptage mois (chauffeurs uniquement) |
 | CHAUFFEUR - samedi | WorkHour (samedi) | Samedis travaillés (chauffeurs uniquement) |
 | Observations | — | Colonne vide pour saisie manuelle |
diff --git a/frontend/data/documentation-content.ts b/frontend/data/documentation-content.ts
index 442664c..4369181 100644
--- a/frontend/data/documentation-content.ts
+++ b/frontend/data/documentation-content.ts
@@ -571,7 +571,7 @@ export const documentationSections: DocSection[] = [
         requiredLevel: 'admin',
         blocks: [
           { type: 'paragraph', content: 'Génère un PDF A4 paysage avec le détail mensuel pour la paie.' },
-          { type: 'list', content: 'Sélecteur de mois (défaut = mois courant)\nDonnées groupées par site\nColonnes : nom, base contrat, jours de présence cadre, heures de nuit, panier de nuit, heures RTT payées, congés (nombre + dates), maladie/AT (nombre + dates), primes conducteur (PDJ, repas, nuitée, samedi), observations' },
+          { type: 'list', content: 'Sélecteur de mois (défaut = mois courant)\nDonnées groupées par site\nColonnes : nom, base contrat, jours de présence cadre, heures de nuit, panier de nuit, heures RTT payées, congés (nombre + dates), maladie/AT (nombre + dates), primes conducteur (PDJ, repas, nuitée, samedi), observations\nColonne « Repas » chauffeur : somme déjeuner + dîner sur le mois (un jour avec les deux compte 2 repas)' },
         ],
       },
       {
diff --git a/src/State/SalaryRecapPrintProvider.php b/src/State/SalaryRecapPrintProvider.php
index 34973fa..0786e01 100644
--- a/src/State/SalaryRecapPrintProvider.php
+++ b/src/State/SalaryRecapPrintProvider.php
@@ -363,7 +363,10 @@ class SalaryRecapPrintProvider implements ProviderInterface
                 if ($wh->getHasBreakfast()) {
                     ++$driverBreakfast;
                 }
-                if ($wh->getHasLunch() || $wh->getHasDinner()) {
+                if ($wh->getHasLunch()) {
+                    ++$driverMeals;
+                }
+                if ($wh->getHasDinner()) {
                     ++$driverMeals;
                 }
                 if ($wh->getHasOvernight()) {

From 78f73ed2e95f1ab761512a4a0a07e15c1d0e7018 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 29 Apr 2026 17:21:59 +0200
Subject: [PATCH 22/23] =?UTF-8?q?feat=20:=20ajout=20des=20jours=20f=C3=A9r?=
 =?UTF-8?q?i=C3=A9s=20sur=20l'export=20PDF=20des=20heures?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Affiche désormais une ligne dédiée pour chaque jour férié (Lun-Ven) avec la mention "Férié : {nom}" et le total créditant les heures contractuelles, comme sur l'écran Heures.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 doc/functional-rules.md                       |  4 +-
 frontend/data/documentation-content.ts        |  2 +-
 .../WorkHours/YearlyHoursExportBuilder.php    | 72 ++++++++++++++++---
 .../employee-yearly-hours/print-all.html.twig | 24 +++++--
 .../employee-yearly-hours/print.html.twig     | 24 +++++--
 5 files changed, 103 insertions(+), 23 deletions(-)

diff --git a/doc/functional-rules.md b/doc/functional-rules.md
index f694146..f142445 100644
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -443,7 +443,8 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 - Accessible depuis la fiche employé (bouton imprimante à droite du nom)
 - Ouvre un drawer pour choisir l'année (civile, Jan-Déc)
 - Génère un PDF avec le détail jour par jour des heures de l'employé
-- Seuls les jours avec heures saisies ou absence sont affichés
+- Seuls les jours avec heures saisies, absence, week-end ou jour férié sont affichés
+- Les jours fériés apparaissent toujours sur une ligne dédiée (fond bleu clair) avec la mention "Férié : {nom}" dans la colonne Absence (même si aucune saisie)
 
 ### Colonnes selon le mode de suivi
 
@@ -461,6 +462,7 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 - TIME non-chauffeur: somme des créneaux matin + après-midi + soir, plus minutes créditées des absences `countAsWorkedHours`
 - Chauffeur: `dayHoursMinutes + nightHoursMinutes + workshopHoursMinutes` + minutes créditées
 - PRESENCE: 0.5 par demi-journée présente (matin/après-midi), max 1.0
+- Jour férié Lun-Ven (hors Forfait, sans absence) : `total = max(saisie + crédit absence, référence contractuelle)` — même règle que l'écran Heures (cf. `HolidayVirtualHoursResolver`). Pour Forfait : pas de crédit virtuel, la ligne férié affiche juste l'éventuelle présence saisie.
 
 ### Nom du fichier
 
diff --git a/frontend/data/documentation-content.ts b/frontend/data/documentation-content.ts
index 4369181..f0a7bce 100644
--- a/frontend/data/documentation-content.ts
+++ b/frontend/data/documentation-content.ts
@@ -589,7 +589,7 @@ export const documentationSections: DocSection[] = [
         requiredLevel: 'admin',
         blocks: [
           { type: 'paragraph', content: 'Génère un PDF par employé avec le détail jour par jour de ses heures sur une année.' },
-          { type: 'list', content: 'Accessible depuis la fiche employé (bouton imprimante)\nChoix de l\'année civile (janvier à décembre)\nColonnes adaptées au mode de suivi (TIME, PRESENCE, conducteur)\nSections séparées en cas de changement de contrat en cours d\'année' },
+          { type: 'list', content: 'Accessible depuis la fiche employé (bouton imprimante)\nChoix de l\'année civile (janvier à décembre)\nColonnes adaptées au mode de suivi (TIME, PRESENCE, conducteur)\nSections séparées en cas de changement de contrat en cours d\'année\nLes jours fériés apparaissent toujours (ligne bleue) avec la mention « Férié : {nom} » dans la colonne Absence ; le total reprend les heures contractuelles créditées (hors Forfait)' },
         ],
       },
     ],
diff --git a/src/Service/WorkHours/YearlyHoursExportBuilder.php b/src/Service/WorkHours/YearlyHoursExportBuilder.php
index b3df9d5..4e1a377 100644
--- a/src/Service/WorkHours/YearlyHoursExportBuilder.php
+++ b/src/Service/WorkHours/YearlyHoursExportBuilder.php
@@ -14,8 +14,10 @@ use App\Enum\TrackingMode;
 use App\Repository\AbsenceRepository;
 use App\Repository\WorkHourRepository;
 use App\Service\Contracts\EmployeeContractResolver;
+use App\Service\PublicHolidayServiceInterface;
 use DateInterval;
 use DateTimeImmutable;
+use Throwable;
 
 class YearlyHoursExportBuilder
 {
@@ -25,6 +27,8 @@ class YearlyHoursExportBuilder
         private EmployeeContractResolver $contractResolver,
         private AbsenceSegmentsResolver $absenceSegmentsResolver,
         private WorkedHoursCreditPolicy $workedHoursCreditPolicy,
+        private PublicHolidayServiceInterface $publicHolidayService,
+        private HolidayVirtualHoursResolver $holidayVirtualHoursResolver,
     ) {}
 
     /**
@@ -56,6 +60,8 @@ class YearlyHoursExportBuilder
         $absences    = $this->absenceRepository->findForPrint($from, $to, $employees);
         $contractMap = $this->contractResolver->resolveForEmployeesAndDays($employees, $days);
         $driverMap   = $this->contractResolver->resolveIsDriverForEmployeesAndDays($employees, $days);
+        $workDaysMap = $this->contractResolver->resolveWorkDaysMinutesForEmployeesAndDays($employees, $days);
+        $holidayMap  = $this->buildHolidayMap($from, $to);
 
         $workHourMap = $this->buildWorkHourMap($workHours);
         $absenceMap  = $this->buildAbsenceMap($absences, $days);
@@ -71,6 +77,8 @@ class YearlyHoursExportBuilder
                 $driverMap[$employeeId] ?? [],
                 $workHourMap[$employeeId] ?? [],
                 $absenceData,
+                $workDaysMap[$employeeId] ?? [],
+                $holidayMap,
             );
 
             if ([] === $segments) {
@@ -205,6 +213,9 @@ class YearlyHoursExportBuilder
     }
 
     /**
+     * @param array<string, ?array<int, int>> $workDaysMinutesByDate
+     * @param array<string, string>           $holidayMap
+     *
      * @return list<array{mode: string, contractName: ?string, rows: list<array>}>
      */
     private function buildSegments(
@@ -213,6 +224,8 @@ class YearlyHoursExportBuilder
         array $driverByDate,
         array $workHoursByDate,
         array $absenceData,
+        array $workDaysMinutesByDate,
+        array $holidayMap,
     ): array {
         $segments    = [];
         $currentMode = null;
@@ -222,7 +235,8 @@ class YearlyHoursExportBuilder
         $firstDataDate = null;
         foreach ($days as $date) {
             $hasRow = null !== ($workHoursByDate[$date] ?? null)
-                || ($absenceData['hasDayAbsence'][$date] ?? false);
+                || ($absenceData['hasDayAbsence'][$date] ?? false)
+                || isset($holidayMap[$date]);
             if ($hasRow) {
                 $firstDataDate = $date;
 
@@ -241,14 +255,16 @@ class YearlyHoursExportBuilder
                 continue;
             }
 
-            $contract  = $contractsByDate[$date] ?? null;
-            $isDriver  = $driverByDate[$date] ?? false;
-            $wh        = $workHoursByDate[$date] ?? null;
-            $hasData   = null !== $wh || ($absenceData['hasDayAbsence'][$date] ?? false);
-            $isoDay    = (int) new DateTimeImmutable($date)->format('N');
-            $isWeekend = $isoDay >= 6;
+            $contract     = $contractsByDate[$date] ?? null;
+            $isDriver     = $driverByDate[$date] ?? false;
+            $wh           = $workHoursByDate[$date] ?? null;
+            $hasData      = null !== $wh || ($absenceData['hasDayAbsence'][$date] ?? false);
+            $holidayLabel = $holidayMap[$date] ?? null;
+            $isHoliday    = null !== $holidayLabel;
+            $isoDay       = (int) new DateTimeImmutable($date)->format('N');
+            $isWeekend    = $isoDay >= 6;
 
-            if (!$hasData && !$isWeekend) {
+            if (!$hasData && !$isWeekend && !$isHoliday) {
                 continue;
             }
 
@@ -275,10 +291,18 @@ class YearlyHoursExportBuilder
 
             $creditedMinutes = $absenceData['credited'][$date] ?? 0;
             $absenceLabel    = $absenceData['labels'][$date] ?? null;
+            $hasAbsence      = $absenceData['hasDayAbsence'][$date] ?? false;
+            $virtualMinutes  = $this->holidayVirtualHoursResolver->resolveVirtualCredit(
+                $contract,
+                new DateTimeImmutable($date),
+                $hasAbsence,
+                $workDaysMinutesByDate[$date] ?? null,
+            );
 
             $row = [
                 'date'         => new DateTimeImmutable($date)->format('d/m/Y'),
                 'absenceLabel' => $absenceLabel,
+                'holidayLabel' => $holidayLabel,
                 'isWeekend'    => $isWeekend,
             ];
 
@@ -297,6 +321,9 @@ class YearlyHoursExportBuilder
                 $nightMin    = $wh?->getNightHoursMinutes() ?? 0;
                 $workshopMin = $wh?->getWorkshopHoursMinutes() ?? 0;
                 $totalMin    = $dayMin + $nightMin + $workshopMin + $creditedMinutes;
+                if ($virtualMinutes > $totalMin) {
+                    $totalMin = $virtualMinutes;
+                }
 
                 $row['dayHours']      = $this->formatMinutes($dayMin);
                 $row['nightHours']    = $this->formatMinutes($nightMin);
@@ -305,6 +332,10 @@ class YearlyHoursExportBuilder
             } else {
                 $metrics = null !== $wh ? $this->computeMetrics($wh) : new WorkMetrics();
                 $metrics->addCreditedMinutes($creditedMinutes);
+                $totalMin = $metrics->totalMinutes;
+                if ($virtualMinutes > $totalMin) {
+                    $totalMin = $virtualMinutes;
+                }
 
                 $row['morningFrom']   = $wh?->getMorningFrom() ?? '';
                 $row['morningTo']     = $wh?->getMorningTo() ?? '';
@@ -312,7 +343,7 @@ class YearlyHoursExportBuilder
                 $row['afternoonTo']   = $wh?->getAfternoonTo() ?? '';
                 $row['eveningFrom']   = $wh?->getEveningFrom() ?? '';
                 $row['eveningTo']     = $wh?->getEveningTo() ?? '';
-                $row['total']         = $this->formatMinutes($metrics->totalMinutes);
+                $row['total']         = $this->formatMinutes($totalMin);
             }
 
             $currentRows[] = $row;
@@ -329,6 +360,29 @@ class YearlyHoursExportBuilder
         return $segments;
     }
 
+    /**
+     * @return array<string, string> Y-m-d => label
+     */
+    private function buildHolidayMap(DateTimeImmutable $from, DateTimeImmutable $to): array
+    {
+        $map       = [];
+        $startYear = (int) $from->format('Y');
+        $endYear   = (int) $to->format('Y');
+
+        try {
+            for ($year = $startYear; $year <= $endYear; ++$year) {
+                $holidays = $this->publicHolidayService->getHolidaysDayByYears('metropole', (string) $year);
+                foreach ($holidays as $date => $label) {
+                    $map[(string) $date] = (string) $label;
+                }
+            }
+        } catch (Throwable) {
+            return [];
+        }
+
+        return $map;
+    }
+
     private function resolveSegmentMode(string $trackingMode, bool $isDriver): string
     {
         if ($isDriver) {
diff --git a/templates/employee-yearly-hours/print-all.html.twig b/templates/employee-yearly-hours/print-all.html.twig
index 41eae5c..94fe44e 100644
--- a/templates/employee-yearly-hours/print-all.html.twig
+++ b/templates/employee-yearly-hours/print-all.html.twig
@@ -76,11 +76,14 @@
         td { font-size: 9px; }
         td.date { text-align: left; font-weight: bold; }
         td.absence { text-align: left; color: #c00; }
+        td.absence .holiday { color: #0277bd; font-weight: 600; }
+        td.absence .holiday.with-absence { display: block; }
         td.time { text-align: center; }
         td.presence { text-align: center; }
         td.total { text-align: center; font-weight: bold; }
         tr.weekend td { background: #f3f3f3; color: #555; }
         tr.weekend td.date { color: #333; }
+        tr.holiday td { background: #e1f5fe; }
 
         .signature-footer {
             page-break-inside: avoid;
@@ -165,9 +168,12 @@
                 </thead>
                 <tbody>
                     {% for row in segment.rows %}
-                        <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                        <tr class="{{ row.isWeekend ? 'weekend' : (row.holidayLabel ? 'holiday' : '') }}">
                             <td class="date">{{ row.date }}</td>
-                            <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                            <td class="absence">
+                                {{ row.absenceLabel ?? '' }}
+                                {% if row.holidayLabel %}<span class="holiday {{ row.absenceLabel ? 'with-absence' : '' }}">Férié : {{ row.holidayLabel }}</span>{% endif %}
+                            </td>
                             <td class="presence">{{ row.presentMorning ? 'X' : '' }}</td>
                             <td class="presence">{{ row.presentAfternoon ? 'X' : '' }}</td>
                             <td class="total">{{ row.total }}</td>
@@ -189,9 +195,12 @@
                 </thead>
                 <tbody>
                     {% for row in segment.rows %}
-                        <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                        <tr class="{{ row.isWeekend ? 'weekend' : (row.holidayLabel ? 'holiday' : '') }}">
                             <td class="date">{{ row.date }}</td>
-                            <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                            <td class="absence">
+                                {{ row.absenceLabel ?? '' }}
+                                {% if row.holidayLabel %}<span class="holiday {{ row.absenceLabel ? 'with-absence' : '' }}">Férié : {{ row.holidayLabel }}</span>{% endif %}
+                            </td>
                             <td class="time">{{ row.dayHours }}</td>
                             <td class="time">{{ row.nightHours }}</td>
                             <td class="time">{{ row.workshopHours }}</td>
@@ -217,9 +226,12 @@
                 </thead>
                 <tbody>
                     {% for row in segment.rows %}
-                        <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                        <tr class="{{ row.isWeekend ? 'weekend' : (row.holidayLabel ? 'holiday' : '') }}">
                             <td class="date">{{ row.date }}</td>
-                            <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                            <td class="absence">
+                                {{ row.absenceLabel ?? '' }}
+                                {% if row.holidayLabel %}<span class="holiday {{ row.absenceLabel ? 'with-absence' : '' }}">Férié : {{ row.holidayLabel }}</span>{% endif %}
+                            </td>
                             <td class="time">{{ row.morningFrom }}</td>
                             <td class="time">{{ row.morningTo }}</td>
                             <td class="time">{{ row.afternoonFrom }}</td>
diff --git a/templates/employee-yearly-hours/print.html.twig b/templates/employee-yearly-hours/print.html.twig
index 4843491..6c7d10d 100644
--- a/templates/employee-yearly-hours/print.html.twig
+++ b/templates/employee-yearly-hours/print.html.twig
@@ -65,11 +65,14 @@
         td { font-size: 9px; }
         td.date { text-align: left; font-weight: bold; }
         td.absence { text-align: left; color: #c00; }
+        td.absence .holiday { color: #0277bd; font-weight: 600; }
+        td.absence .holiday.with-absence { display: block; }
         td.time { text-align: center; }
         td.presence { text-align: center; }
         td.total { text-align: center; font-weight: bold; }
         tr.weekend td { background: #f3f3f3; color: #555; }
         tr.weekend td.date { color: #333; }
+        tr.holiday td { background: #e1f5fe; }
 
         .signature-footer {
             page-break-inside: avoid;
@@ -151,9 +154,12 @@
             </thead>
             <tbody>
                 {% for row in segment.rows %}
-                    <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                    <tr class="{{ row.isWeekend ? 'weekend' : (row.holidayLabel ? 'holiday' : '') }}">
                         <td class="date">{{ row.date }}</td>
-                        <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                        <td class="absence">
+                            {{ row.absenceLabel ?? '' }}
+                            {% if row.holidayLabel %}<span class="holiday {{ row.absenceLabel ? 'with-absence' : '' }}">Férié : {{ row.holidayLabel }}</span>{% endif %}
+                        </td>
                         <td class="presence">{{ row.presentMorning ? 'X' : '' }}</td>
                         <td class="presence">{{ row.presentAfternoon ? 'X' : '' }}</td>
                         <td class="total">{{ row.total }}</td>
@@ -175,9 +181,12 @@
             </thead>
             <tbody>
                 {% for row in segment.rows %}
-                    <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                    <tr class="{{ row.isWeekend ? 'weekend' : (row.holidayLabel ? 'holiday' : '') }}">
                         <td class="date">{{ row.date }}</td>
-                        <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                        <td class="absence">
+                            {{ row.absenceLabel ?? '' }}
+                            {% if row.holidayLabel %}<span class="holiday {{ row.absenceLabel ? 'with-absence' : '' }}">Férié : {{ row.holidayLabel }}</span>{% endif %}
+                        </td>
                         <td class="time">{{ row.dayHours }}</td>
                         <td class="time">{{ row.nightHours }}</td>
                         <td class="time">{{ row.workshopHours }}</td>
@@ -203,9 +212,12 @@
             </thead>
             <tbody>
                 {% for row in segment.rows %}
-                    <tr class="{{ row.isWeekend ? 'weekend' : '' }}">
+                    <tr class="{{ row.isWeekend ? 'weekend' : (row.holidayLabel ? 'holiday' : '') }}">
                         <td class="date">{{ row.date }}</td>
-                        <td class="absence">{{ row.absenceLabel ?? '' }}</td>
+                        <td class="absence">
+                            {{ row.absenceLabel ?? '' }}
+                            {% if row.holidayLabel %}<span class="holiday {{ row.absenceLabel ? 'with-absence' : '' }}">Férié : {{ row.holidayLabel }}</span>{% endif %}
+                        </td>
                         <td class="time">{{ row.morningFrom }}</td>
                         <td class="time">{{ row.morningTo }}</td>
                         <td class="time">{{ row.afternoonFrom }}</td>

From eb5910dffe16cd7ba632b6816f656cf7bf32c408 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 29 Apr 2026 17:27:46 +0200
Subject: [PATCH 23/23] =?UTF-8?q?feat=20:=20surlignage=20des=20jours=20f?=
 =?UTF-8?q?=C3=A9ri=C3=A9s=20sur=20la=20vue=20semaine=20des=20heures?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Quand un employé n'a pas d'absence sur un jour férié, la cellule prend le fond bleu clair (#b3e5fc) et affiche le nom du férié au survol — cohérent avec la vue jour.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 doc/functional-rules.md                       |  1 +
 .../driver-hours/DriverHoursWeekView.vue      | 21 +++++++++--
 frontend/components/hours/HoursWeekView.vue   | 22 +++++++++--
 frontend/data/documentation-content.ts        |  2 +-
 frontend/services/dto/work-hour.ts            |  1 +
 src/Dto/WorkHours/WeeklyDaySummary.php        |  1 +
 src/State/WorkHourWeeklySummaryProvider.php   | 37 +++++++++++++++++++
 .../WorkHourWeeklySummaryProviderTest.php     | 17 ++++++---
 8 files changed, 90 insertions(+), 12 deletions(-)

diff --git a/doc/functional-rules.md b/doc/functional-rules.md
index f142445..b155bdd 100644
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -173,6 +173,7 @@ Documents complementaires:
 - Exclusions configurables: variable d'env `EXCLUDED_PUBLIC_HOLIDAYS` (liste de libellés séparés par virgules). Par défaut `"Lundi de Pentecôte"` — journée de solidarité généralement travaillée. Le filtre s'applique à tous les consommateurs (frontend + calculs backend) en amont du retour du service.
 - Onglet congés: jours fériés affichés sur le calendrier avec fond `rgb(179, 229, 252)` et nom au survol
 - Écran Heures et Heures Conducteurs (vue jour): le nom du férié est affiché dans la colonne Absence sous forme de pill (fond `#b3e5fc`, icône `mdi:calendar-star`), distinct du pill absence
+- Écran Heures et Heures Conducteurs (vue semaine): la cellule du jour férié prend le fond `#b3e5fc` quand l'employé n'a pas d'absence ce jour-là, avec le nom du férié au survol (`title`). Si une absence est posée, la couleur de l'absence prime ; le `title` cumule les deux libellés (`Absence — Férié : Nom`).
 - Règle courante:
   - absences autorisées sur jour férié (création/édition depuis l'écran Heures et le Calendrier). Quand une absence est posée, le crédit virtuel férié est désactivé — c'est le `countAsWorkedHours` du type d'absence qui pilote
   - saisie d'heures ou de jours de présence autorisée — les heures saisies comptent normalement dans le total hebdo et le calcul RTT
diff --git a/frontend/components/driver-hours/DriverHoursWeekView.vue b/frontend/components/driver-hours/DriverHoursWeekView.vue
index 8fc8c16..a750128 100644
--- a/frontend/components/driver-hours/DriverHoursWeekView.vue
+++ b/frontend/components/driver-hours/DriverHoursWeekView.vue
@@ -44,7 +44,7 @@
           class="text-left leading-4 rounded-md px-2 py-1"
           :class="daily.hasAbsence ? 'text-white' : ''"
           :style="getDailyCellStyle(daily)"
-          :title="daily.absenceLabel ?? ''"
+          :title="cellTitle(daily)"
         >
           <div>J {{ formatMinutes(daily.dayMinutes) }}</div>
           <div>N {{ formatMinutes(daily.nightMinutes) }}</div>
@@ -93,12 +93,27 @@
 import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
 import { contractNatureLabel } from '~/utils/contract'
 
+const HOLIDAY_BG_COLOR = '#b3e5fc'
+
 const getDailyCellStyle = (daily: {
   hasAbsence?: boolean
   absenceColor?: string | null
+  holidayLabel?: string | null
 }) => {
-  if (!daily.hasAbsence) return undefined
-  return { backgroundColor: daily.absenceColor || '#dc2626' }
+  if (daily.hasAbsence) return { backgroundColor: daily.absenceColor || '#dc2626' }
+  if (daily.holidayLabel) return { backgroundColor: HOLIDAY_BG_COLOR }
+  return undefined
+}
+
+const cellTitle = (daily: {
+  hasAbsence?: boolean
+  absenceLabel?: string | null
+  holidayLabel?: string | null
+}) => {
+  const parts: string[] = []
+  if (daily.absenceLabel) parts.push(daily.absenceLabel)
+  if (daily.holidayLabel) parts.push(`Férié : ${daily.holidayLabel}`)
+  return parts.join(' — ')
 }
 
 defineProps<{
diff --git a/frontend/components/hours/HoursWeekView.vue b/frontend/components/hours/HoursWeekView.vue
index 7e51ab5..d9033dc 100644
--- a/frontend/components/hours/HoursWeekView.vue
+++ b/frontend/components/hours/HoursWeekView.vue
@@ -27,6 +27,7 @@
             class="flex items-center justify-between rounded-md px-2 py-1 text-xs"
             :class="daily.hasAbsence ? 'text-white' : 'text-primary-500'"
             :style="getDailyCellStyle(daily)"
+            :title="cellTitle(daily)"
           >
             <span class="font-semibold">{{ weekDayHeaders[i]?.label ?? '' }}</span>
             <span v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</span>
@@ -104,7 +105,7 @@
           class="text-left leading-4 rounded-md px-2 py-1"
           :class="daily.hasAbsence ? 'text-white' : ''"
           :style="getDailyCellStyle(daily)"
-          :title="daily.absenceLabel ?? ''"
+          :title="cellTitle(daily)"
         >
           <template v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</template>
           <template v-else>
@@ -153,12 +154,27 @@ const isInterimContract = (contractType?: ContractType | null) => {
   return contractType === CONTRACT_TYPES.INTERIM
 }
 
+const HOLIDAY_BG_COLOR = '#b3e5fc'
+
 const getDailyCellStyle = (daily: {
   hasAbsence?: boolean
   absenceColor?: string | null
+  holidayLabel?: string | null
 }) => {
-  if (!daily.hasAbsence) return undefined
-  return { backgroundColor: daily.absenceColor || '#dc2626' }
+  if (daily.hasAbsence) return { backgroundColor: daily.absenceColor || '#dc2626' }
+  if (daily.holidayLabel) return { backgroundColor: HOLIDAY_BG_COLOR }
+  return undefined
+}
+
+const cellTitle = (daily: {
+  hasAbsence?: boolean
+  absenceLabel?: string | null
+  holidayLabel?: string | null
+}) => {
+  const parts: string[] = []
+  if (daily.absenceLabel) parts.push(daily.absenceLabel)
+  if (daily.holidayLabel) parts.push(`Férié : ${daily.holidayLabel}`)
+  return parts.join(' — ')
 }
 
 defineProps<{
diff --git a/frontend/data/documentation-content.ts b/frontend/data/documentation-content.ts
index f0a7bce..42d405a 100644
--- a/frontend/data/documentation-content.ts
+++ b/frontend/data/documentation-content.ts
@@ -332,7 +332,7 @@ export const documentationSections: DocSection[] = [
         requiredLevel: 'admin',
         blocks: [
           { type: 'paragraph', content: 'La vue semaine est réservée aux administrateurs. Elle affiche une synthèse hebdomadaire par employé avec les heures supplémentaires calculées.' },
-          { type: 'list', content: 'Filtrage par site et par employé\nDétail par jour avec totaux hebdomadaires\nColonnes de calcul : base, heures sup 25%, heures sup 50%, total récupération' },
+          { type: 'list', content: 'Filtrage par site et par employé\nDétail par jour avec totaux hebdomadaires\nColonnes de calcul : base, heures sup 25%, heures sup 50%, total récupération\nLes jours fériés sont signalés sur la cellule du jour : fond bleu clair quand pas d\'absence, nom du férié au survol' },
         ],
       },
       {
diff --git a/frontend/services/dto/work-hour.ts b/frontend/services/dto/work-hour.ts
index bbcfb32..64d0b5b 100644
--- a/frontend/services/dto/work-hour.ts
+++ b/frontend/services/dto/work-hour.ts
@@ -60,6 +60,7 @@ export type WeeklyWorkHourDailySummary = {
   hasDinner?: boolean
   hasOvernight?: boolean
   virtualHolidayMinutes?: number
+  holidayLabel?: string | null
 }
 
 export type WeeklyWorkHourRowSummary = {
diff --git a/src/Dto/WorkHours/WeeklyDaySummary.php b/src/Dto/WorkHours/WeeklyDaySummary.php
index 85416db..7d1b3b8 100644
--- a/src/Dto/WorkHours/WeeklyDaySummary.php
+++ b/src/Dto/WorkHours/WeeklyDaySummary.php
@@ -22,5 +22,6 @@ final class WeeklyDaySummary
         public bool $hasDinner = false,
         public bool $hasOvernight = false,
         public int $virtualHolidayMinutes = 0,
+        public ?string $holidayLabel = null,
     ) {}
 }
diff --git a/src/State/WorkHourWeeklySummaryProvider.php b/src/State/WorkHourWeeklySummaryProvider.php
index 4cdde2b..41a196f 100644
--- a/src/State/WorkHourWeeklySummaryProvider.php
+++ b/src/State/WorkHourWeeklySummaryProvider.php
@@ -22,6 +22,7 @@ use App\Repository\Contract\AbsenceReadRepositoryInterface;
 use App\Repository\Contract\EmployeeScopedRepositoryInterface;
 use App\Repository\Contract\WorkHourReadRepositoryInterface;
 use App\Service\Contracts\EmployeeContractResolver;
+use App\Service\PublicHolidayServiceInterface;
 use App\Service\WorkHours\AbsenceSegmentsResolver;
 use App\Service\WorkHours\DailyReferenceMinutesResolver;
 use App\Service\WorkHours\HolidayVirtualHoursResolver;
@@ -31,6 +32,7 @@ use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\HttpFoundation\RequestStack;
 use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;
 use Symfony\Component\HttpKernel\Exception\UnprocessableEntityHttpException;
+use Throwable;
 
 final readonly class WorkHourWeeklySummaryProvider implements ProviderInterface
 {
@@ -45,6 +47,7 @@ final readonly class WorkHourWeeklySummaryProvider implements ProviderInterface
         private EmployeeContractResolver $contractResolver,
         private DailyReferenceMinutesResolver $dailyReferenceResolver,
         private HolidayVirtualHoursResolver $holidayVirtualHoursResolver,
+        private PublicHolidayServiceInterface $publicHolidayService,
     ) {}
 
     public function provide(Operation $operation, array $uriVariables = [], array $context = []): WorkHourWeeklySummary
@@ -122,6 +125,7 @@ final readonly class WorkHourWeeklySummaryProvider implements ProviderInterface
         $contractNaturesByEmployeeDate = $this->contractResolver->resolveNaturesForEmployeesAndDays($employees, $days);
         $isDriverByEmployeeDate        = $this->contractResolver->resolveIsDriverForEmployeesAndDays($employees, $days);
         $workDaysByEmployeeDate        = $this->contractResolver->resolveWorkDaysMinutesForEmployeesAndDays($employees, $days);
+        $holidayLabelsByDate           = $this->buildHolidayLabelsForDays($days);
         $metricsByEmployeeDate         = [];
         foreach ($workHours as $workHour) {
             $employeeId = $workHour->getEmployee()?->getId();
@@ -324,6 +328,7 @@ final readonly class WorkHourWeeklySummaryProvider implements ProviderInterface
                     hasDinner: $hasDinner,
                     hasOvernight: $hasOvernight,
                     virtualHolidayMinutes: $virtualHolidayMinutes,
+                    holidayLabel: $holidayLabelsByDate[$date] ?? null,
                 );
             }
 
@@ -376,6 +381,38 @@ final readonly class WorkHourWeeklySummaryProvider implements ProviderInterface
         return $rows;
     }
 
+    /**
+     * @param list<string> $days
+     *
+     * @return array<string, string>
+     */
+    private function buildHolidayLabelsForDays(array $days): array
+    {
+        if ([] === $days) {
+            return [];
+        }
+
+        $years = [];
+        foreach ($days as $day) {
+            $years[substr($day, 0, 4)] = true;
+        }
+
+        $map = [];
+
+        try {
+            foreach (array_keys($years) as $year) {
+                $holidays = $this->publicHolidayService->getHolidaysDayByYears('metropole', (string) $year);
+                foreach ($holidays as $date => $label) {
+                    $map[(string) $date] = (string) $label;
+                }
+            }
+        } catch (Throwable) {
+            return [];
+        }
+
+        return $map;
+    }
+
     private function computeMetrics(WorkHour $workHour): WorkMetrics
     {
         $ranges = [
diff --git a/tests/State/WorkHourWeeklySummaryProviderTest.php b/tests/State/WorkHourWeeklySummaryProviderTest.php
index 327ada0..8f53d81 100644
--- a/tests/State/WorkHourWeeklySummaryProviderTest.php
+++ b/tests/State/WorkHourWeeklySummaryProviderTest.php
@@ -66,6 +66,7 @@ final class WorkHourWeeklySummaryProviderTest extends TestCase
             $this->buildResolverStub(),
             new DailyReferenceMinutesResolver(),
             $this->buildHolidayResolver(),
+            $this->buildHolidayService(),
         );
 
         $this->expectException(AccessDeniedHttpException::class);
@@ -128,6 +129,7 @@ final class WorkHourWeeklySummaryProviderTest extends TestCase
             $this->buildWeeklyResolverStub($employees),
             new DailyReferenceMinutesResolver(),
             $this->buildHolidayResolver(),
+            $this->buildHolidayService(),
         );
 
         $result = $provider->provide(new Get());
@@ -179,15 +181,20 @@ final class WorkHourWeeklySummaryProviderTest extends TestCase
     }
 
     private function buildHolidayResolver(array $holidayMap = []): HolidayVirtualHoursResolver
+    {
+        return new HolidayVirtualHoursResolver(
+            new DailyReferenceMinutesResolver(),
+            $this->buildHolidayService($holidayMap),
+            $this->createStub(EmployeeContractResolver::class),
+        );
+    }
+
+    private function buildHolidayService(array $holidayMap = []): PublicHolidayServiceInterface
     {
         $service = $this->createStub(PublicHolidayServiceInterface::class);
         $service->method('getHolidaysDayByYears')->willReturn($holidayMap);
 
-        return new HolidayVirtualHoursResolver(
-            new DailyReferenceMinutesResolver(),
-            $service,
-            $this->createStub(EmployeeContractResolver::class),
-        );
+        return $service;
     }
 
     private function buildResolverStub(): EmployeeContractResolver