diff --git a/src/components/ui/DateTimeInput.tsx b/src/components/ui/DateTimeInput.tsx
index 4628eca..9e2a9e4 100644
--- a/src/components/ui/DateTimeInput.tsx
+++ b/src/components/ui/DateTimeInput.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Calendar } from 'lucide-react';
+import { useRef } from 'react';
 import {
   formatDateForDateTimeInput,
   parseDateTimeInput,
@@ -23,6 +24,8 @@ export function DateTimeInput({
   className = '',
   onFocus,
 }: DateTimeInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value
       ? parseDateTimeInput(e.target.value)
@@ -30,13 +33,22 @@ export function DateTimeInput({
     onChange(newValue);
   };
 
+  const handleCalendarClick = () => {
+    if (!disabled && inputRef.current) {
+      // Déclencher le calendrier natif du navigateur
+      inputRef.current.showPicker?.();
+    }
+  };
+
   return (
     <div className={`relative flex items-center ${className}`}>
       <Calendar
         size={16}
-        className="absolute left-3 text-[var(--muted-foreground)] pointer-events-none z-10"
+        className="absolute left-3 text-[var(--muted-foreground)] cursor-pointer z-10 hover:text-[var(--primary)] transition-colors"
+        onClick={handleCalendarClick}
       />
       <input
+        ref={inputRef}
         type="datetime-local"
         value={value ? formatDateForDateTimeInput(value) : ''}
         onChange={handleChange}