Merge branch 'develop' into feat/week-comments

# Conflicts:
#	src/State/WorkHourWeeklySummaryProvider.php
#	tests/State/WorkHourWeeklySummaryProviderTest.php

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,

frontend/components/AppDrawer.vue

@@ -9,8 +9,15 @@
           <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">
+        <div class="min-h-0 flex-1 overflow-y-auto px-[20px] pb-4 pt-1">
           <slot />
         </div>
       </div>

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()

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>

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>

frontend/components/EmployeeNameFilterInput.vue

@@ -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>

frontend/components/SiteFilterSelector.vue

@@ -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>

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>
@@ -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

frontend/components/driver-hours/DriverHoursWeekView.vue

@@ -47,7 +47,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>
@@ -96,12 +96,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<{

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')

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,20 +150,22 @@
             <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 -->
           <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 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>
@@ -187,41 +198,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 +511,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 +527,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)

frontend/components/hours/HoursDayView.vue

@@ -1,12 +1,180 @@
 <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="getRowContractNature(employee.id)"> — {{ contractNatureLabel(getRowContractNature(employee.id) ?? undefined) }}</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 }"
             >
                 <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>
@@ -44,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)"
@@ -237,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

frontend/components/hours/HoursToolbar.vue

@@ -1,17 +1,90 @@
 <template>
-  <div class="py-6 flex flex-col gap-3">
-      <div class="flex gap-4">
-          <SiteFilterSelector v-if="sites.length > 0 && isAdmin" v-model="selectedSiteIds" :sites="sites" />
-          <div v-if="isAdmin" class="w-80 max-w-full">
-              <EmployeeNameFilterInput v-model="employeeFilter" />
+  <div class="py-4 flex flex-col gap-3 lg:py-6">
+      <!-- Desktop: filters row -->
+      <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">
+              <MalioInputText
+                  v-model="employeeFilter"
+                  label="Recherche d'un employé"
+                  icon-name="mdi:magnify"
+              />
           </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 items-center gap-2 lg:hidden">
+          <div class="flex-1 min-w-0">
+              <MalioInputText
+                  v-model="employeeFilter"
+                  label="Recherche d'un employé"
+                  icon-name="mdi:magnify"
+              />
+          </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">
+                      <MalioSelectCheckbox
+                          v-model="selectedSiteIds"
+                          :options="siteOptions"
+                          groupClass="w-80"
+                          label="Sites"
+                          display-select-all
+                      />
+                  </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 +114,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 +143,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 +155,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 +180,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">
@@ -120,9 +194,8 @@
 <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'
 
 const selectedDate = defineModel<string>('selectedDate', { required: true })
@@ -130,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[]
@@ -140,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
@@ -150,6 +225,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

frontend/components/hours/HoursWeekView.vue

@@ -1,7 +1,72 @@
 <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)"
+            :title="cellTitle(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 }"
@@ -43,7 +108,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>
@@ -92,12 +157,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<{

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)
 }