create-crm-tmp 2.0.0 → 2.1.0

package/template/src/app/(dashboard)/agenda/page.tsx

@@ -1,14 +1,15 @@
 'use client';
 
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback, type ReactElement } from 'react';
 import { useUserRole } from '@/hooks/use-user-role';
-import { cn } from '@/lib/utils';
+import { cn, devToast } from '@/lib/utils';
 import {
   Calendar,
   Clock,
   User,
   CheckCircle2,
   Circle,
+  Loader2,
   ChevronLeft,
   ChevronRight,
   Video,
@@ -23,18 +24,62 @@ import {
 } from 'lucide-react';
 import { LazyEditor as Editor, type DefaultTemplateRef } from '@/components/lazy-editor';
 import Link from 'next/link';
-import {
-  AgendaMonthSkeleton,
-  AgendaWeekSkeleton,
-  AgendaDaySkeleton,
-} from '@/components/skeleton';
+import { AgendaMonthSkeleton, AgendaWeekSkeleton, AgendaDaySkeleton } from '@/components/skeleton';
 import { useSession } from '@/lib/auth-client';
 import { ProtectedPage } from '@/components/protected-page';
 import { useConfirm } from '@/hooks/use-confirm';
 import { useAppToast } from '@/contexts/app-toast-context';
 import { useFetch } from '@/hooks/use-fetch';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { DateTimePicker } from '@/components/ui/datetime-picker';
+import { ConfigErrorAlert } from '@/components/config-error-alert';
+import { CONFIG_LINKS } from '@/lib/config-links';
+import { requestRemindersRefresh } from '@/lib/reminder-state';
+import { scheduledAtPayloadToIso, toLocalDateTimeInput } from '@/lib/date-utils';
+import {
+  googleAgendaEventCardChromeStyle,
+  googleAgendaEventChromeStyle,
+  googleAgendaEventLocalTimeRange,
+  googleCalendarsForEventTargetPicker,
+  localCalendarDateKey,
+  normalizeAgendaGoogleEventColor,
+} from '@/lib/google-calendar-agenda';
 import useSWR from 'swr';
 
+interface GoogleAgendaEventRow {
+  googleEventId: string;
+  calendarId: string;
+  title: string;
+  start: string;
+  end: string;
+  htmlLink?: string | null;
+  allDay: boolean;
+  allDayStartDate?: string;
+  allDayEndExclusive?: string;
+}
+
+/** Titre affiché sur la barre fusionnée (semaine) : horaires début–fin si événement horaire. */
+function googleWeekMergedBarLabel(ev: GoogleAgendaEventRow): string {
+  if (ev.allDay) return ev.title;
+  const { start, end } = googleAgendaEventLocalTimeRange(ev);
+  const timeFmt: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' };
+  const dayFmt: Intl.DateTimeFormatOptions = { day: '2-digit', month: '2-digit' };
+  const t0 = start.toLocaleTimeString('fr-FR', timeFmt);
+  const t1 = end.toLocaleTimeString('fr-FR', timeFmt);
+  const d0 = localCalendarDateKey(start);
+  const d1 = localCalendarDateKey(end);
+  const range =
+    d0 === d1
+      ? `${t0} – ${t1}`
+      : `${start.toLocaleDateString('fr-FR', dayFmt)} ${t0} – ${end.toLocaleDateString('fr-FR', dayFmt)} ${t1}`;
+  return `${ev.title} · ${range}`;
+}
+
 interface Task {
   id: string;
   type: 'CALL' | 'MEETING' | 'EMAIL' | 'OTHER' | 'VIDEO_CONFERENCE' | 'TASK';
@@ -44,6 +89,8 @@ interface Task {
   completed: boolean;
   reminderMinutesBefore?: number | null;
   googleMeetLink?: string | null;
+  googleEventId?: string | null;
+  googleCalendarId?: string | null;
   durationMinutes?: number | null;
   internalNote?: string | null;
   contact: {
@@ -55,19 +102,49 @@ interface Task {
     id: string;
     name: string;
   };
+  createdBy?: {
+    id: string;
+    name: string | null;
+  } | null;
 }
 
-
 // Couleurs par type d'événement
-const TYPE_COLORS = {
-  CALL: '#8B5CF6', // Violet pour les appels
-  EMAIL: '#6366F1', // Indigo pour les emails
-  OTHER: '#64748B', // Gris pour autres tâches
-  TASK: '#6366F1', // Indigo pour les tâches
-  MEETING: '#3B82F6', // Bleu pour les rendez-vous physiques
-  VIDEO_CONFERENCE: '#10B981', // Vert pour Google Meet
+const TYPE_COLORS: Record<string, { bg: string; border: string; text: string; icon: string }> = {
+  CALL: { bg: '#EDE9FE', border: '#8B5CF6', text: '#5B21B6', icon: '#7C3AED' },
+  EMAIL: { bg: '#E0E7FF', border: '#6366F1', text: '#3730A3', icon: '#4F46E5' },
+  OTHER: { bg: '#F1F5F9', border: '#94A3B8', text: '#334155', icon: '#64748B' },
+  TASK: { bg: '#DBEAFE', border: '#3B82F6', text: '#1E3A8A', icon: '#2563EB' },
+  MEETING: { bg: '#FEF3C7', border: '#F59E0B', text: '#92400E', icon: '#D97706' },
+  VIDEO_CONFERENCE: { bg: '#D1FAE5', border: '#10B981', text: '#064E3B', icon: '#059669' },
+  PHYSICAL_APPOINTMENT: { bg: '#FFE4E6', border: '#F43F5E', text: '#881337', icon: '#E11D48' },
 };
 
+const DEFAULT_EVENT_COLOR = { bg: '#E0E7FF', border: '#6366F1', text: '#3730A3', icon: '#4F46E5' };
+
+/** Palette distincte pour identifier les utilisateurs quand « Voir les autres utilisateurs » est actif */
+const USER_COLORS: Array<{ bg: string; border: string; text: string; icon: string }> = [
+  { bg: '#DBEAFE', border: '#2563EB', text: '#1E3A8A', icon: '#1D4ED8' },
+  { bg: '#FEF3C7', border: '#D97706', text: '#92400E', icon: '#B45309' },
+  { bg: '#D1FAE5', border: '#059669', text: '#064E3B', icon: '#047857' },
+  { bg: '#EDE9FE', border: '#7C3AED', text: '#5B21B6', icon: '#6D28D9' },
+  { bg: '#FFE4E6', border: '#E11D48', text: '#881337', icon: '#BE123C' },
+  { bg: '#E0E7FF', border: '#4F46E5', text: '#3730A3', icon: '#4338CA' },
+  { bg: '#FCE7F3', border: '#DB2777', text: '#831843', icon: '#BE185D' },
+  { bg: '#CCFBF1', border: '#0D9488', text: '#134E4A', icon: '#0F766E' },
+  { bg: '#FFEDD5', border: '#EA580C', text: '#9A3412', icon: '#C2410C' },
+  { bg: '#E4E4E7', border: '#52525B', text: '#27272A', icon: '#3F3F46' },
+  { bg: '#FDE68A', border: '#F59E42', text: '#854D0E', icon: '#D97706' },
+  { bg: '#C7D2FE', border: '#6366F1', text: '#1E40AF', icon: '#3B82F6' },
+  { bg: '#BBF7D0', border: '#22C55E', text: '#166534', icon: '#16A34A' },
+  { bg: '#FDBA74', border: '#EA580C', text: '#9A3412', icon: '#C2410C' },
+  { bg: '#FECACA', border: '#DC2626', text: '#7F1D1D', icon: '#EF4444' },
+  { bg: '#F3E8FF', border: '#A21CAF', text: '#581C87', icon: '#C026D3' },
+  { bg: '#CCFBF1', border: '#14B8A6', text: '#115E59', icon: '#0E7490' },
+  { bg: '#FAE8FF', border: '#D946EF', text: '#701A75', icon: '#A21CAF' },
+  { bg: '#DCFCE7', border: '#22D3EE', text: '#0E7490', icon: '#0891B2' },
+  { bg: '#F1F5F9', border: '#64748B', text: '#334155', icon: '#64748B' },
+];
+
 const TASK_TYPE_LABELS = {
   CALL: 'Appel téléphonique',
   MEETING: 'RDV',
@@ -79,10 +156,177 @@ const TASK_TYPE_LABELS = {
 
 const HOURS = Array.from({ length: 17 }, (_, i) => i + 7); // 7h à minuit (0h)
 
-// Fonction pour obtenir la couleur d'un événement basée sur son type
-const getEventColor = (task: Task): string => {
-  return TYPE_COLORS[task.type] || '#6366F1';
-};
+/** Infobulle pour créneaux étroits (colonnes qui se chevauchent) — rendu en portail pour éviter overflow. */
+function WeekAgendaOverlapTooltip({
+  show,
+  title,
+  description,
+  footer,
+  children,
+}: {
+  show: boolean;
+  title: string;
+  description?: string;
+  /** Troisième ligne (ex. « Par … »). */
+  footer?: string;
+  children: ReactElement;
+}) {
+  if (!show) return children;
+  const detailCls =
+    'text-popover-foreground/80 mt-1 text-[11px] leading-snug';
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side="top" align="start">
+        <p className="text-popover-foreground font-semibold leading-snug">{title}</p>
+        {description ? <p className={detailCls}>{description}</p> : null}
+        {footer ? <p className={detailCls}>{footer}</p> : null}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+interface EventLayout {
+  task: Task;
+  startMinutes: number;
+  endMinutes: number;
+  column: number;
+  totalColumns: number;
+}
+
+type WeekAgendaLayoutPayload =
+  | { kind: 'task'; task: Task }
+  | { kind: 'google'; event: GoogleAgendaEventRow };
+
+interface CombinedEventLayout {
+  payload: WeekAgendaLayoutPayload;
+  startMinutes: number;
+  endMinutes: number;
+  column: number;
+  totalColumns: number;
+}
+
+function layoutOverlappingBySchedule(
+  entries: Array<{ id: string; payload: WeekAgendaLayoutPayload; startDate: Date; endDate: Date }>,
+  day: Date,
+  gridStartHour: number,
+  gridEndHour: number,
+): CombinedEventLayout[] {
+  const dayStart = new Date(day);
+  dayStart.setHours(0, 0, 0, 0);
+  const gridStart = new Date(day);
+  gridStart.setHours(gridStartHour, 0, 0, 0);
+  const gridEnd = new Date(day);
+  gridEnd.setHours(gridEndHour, 0, 0, 0);
+
+  const events = entries
+    .map((entry) => {
+      const taskStart = entry.startDate;
+      const taskEnd = entry.endDate;
+
+      let effStart = taskStart < dayStart ? dayStart : taskStart;
+      effStart = effStart < gridStart ? gridStart : effStart;
+      const effEnd = taskEnd > gridEnd ? gridEnd : taskEnd;
+
+      const startMin = effStart.getHours() * 60 + effStart.getMinutes();
+      const endMin = Math.max(startMin + 15, effEnd.getHours() * 60 + effEnd.getMinutes());
+
+      return { id: entry.id, payload: entry.payload, startMin, endMin };
+    })
+    .sort((a, b) => a.startMin - b.startMin || b.endMin - a.endMin);
+
+  const columns: typeof events[] = [];
+
+  for (const ev of events) {
+    let placed = false;
+    for (let c = 0; c < columns.length; c++) {
+      const lastInCol = columns[c][columns[c].length - 1];
+      if (lastInCol.endMin <= ev.startMin) {
+        columns[c].push(ev);
+        placed = true;
+        break;
+      }
+    }
+    if (!placed) {
+      columns.push([ev]);
+    }
+  }
+
+  const colIndex = new Map<string, number>();
+  columns.forEach((col, idx) => {
+    for (const ev of col) colIndex.set(ev.id, idx);
+  });
+
+  const groups: { id: string; payload: WeekAgendaLayoutPayload; startMin: number; endMin: number; column: number }[][] =
+    [];
+  const assigned = new Set<string>();
+
+  for (const ev of events) {
+    if (assigned.has(ev.id)) continue;
+
+    const group: typeof events = [ev];
+    assigned.add(ev.id);
+
+    let groupEnd = ev.endMin;
+    for (const other of events) {
+      if (assigned.has(other.id)) continue;
+      if (other.startMin < groupEnd) {
+        group.push(other);
+        assigned.add(other.id);
+        groupEnd = Math.max(groupEnd, other.endMin);
+      }
+    }
+
+    groups.push(group.map((e) => ({ ...e, column: colIndex.get(e.id) ?? 0 })));
+  }
+
+  const result: CombinedEventLayout[] = [];
+  for (const group of groups) {
+    const maxCol = Math.max(...group.map((e) => e.column)) + 1;
+    for (const e of group) {
+      result.push({
+        payload: e.payload,
+        startMinutes: e.startMin,
+        endMinutes: e.endMin,
+        column: e.column,
+        totalColumns: maxCol,
+      });
+    }
+  }
+
+  return result;
+}
+
+function layoutOverlappingEvents(
+  tasks: Task[],
+  day: Date,
+  gridStartHour: number,
+  gridEndHour: number,
+): EventLayout[] {
+  const entries = tasks.map((task) => {
+    const taskStart = new Date(task.scheduledAt);
+    const duration = task.durationMinutes || 30;
+    const taskEnd = new Date(taskStart.getTime() + duration * 60000);
+    return {
+      id: task.id,
+      payload: { kind: 'task' as const, task },
+      startDate: taskStart,
+      endDate: taskEnd,
+    };
+  });
+  return layoutOverlappingBySchedule(entries, day, gridStartHour, gridEndHour).map((x) => {
+    if (x.payload.kind !== 'task') {
+      throw new Error('layoutOverlappingEvents: tâche attendue');
+    }
+    return {
+      task: x.payload.task,
+      startMinutes: x.startMinutes,
+      endMinutes: x.endMinutes,
+      column: x.column,
+      totalColumns: x.totalColumns,
+    };
+  });
+}
 
 const formatHourLabel = (hour: number) => {
   return new Date(0, 0, 0, hour).toLocaleTimeString('fr-FR', {
@@ -127,12 +371,29 @@ function getTasksUrl({
   return `/api/tasks?${sp.toString()}`;
 }
 
+type GoogleCalendarOption = { id: string; summary: string; primary?: boolean; accessRole?: string };
+
+function pickDefaultCalendarId(
+  data: { defaultGoogleCalendarId?: string | null } | undefined,
+  writable: GoogleCalendarOption[],
+): string {
+  const pref = data?.defaultGoogleCalendarId;
+  if (pref && writable.some((w) => w.id === pref)) return pref;
+  const p = writable.find((c) => c.primary);
+  return p?.id || writable[0]?.id || 'primary';
+}
+
 export default function AgendaPage() {
   const { data: session } = useSession();
   const { isAdmin, hasPermission } = useUserRole();
   const { confirm, ConfirmDialog } = useConfirm();
   const toast = useAppToast();
   const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set());
+  const userChipsScrollRef = useRef<HTMLDivElement>(null);
+  const [userChipsScrollEdges, setUserChipsScrollEdges] = useState({
+    canScrollPrev: false,
+    canScrollNext: false,
+  });
   const [currentDate, setCurrentDate] = useState(new Date());
   const [view, setView] = useState<'month' | 'week' | 'day'>('week');
   const [showCreateTaskModal, setShowCreateTaskModal] = useState(false);
@@ -160,6 +421,10 @@ export default function AgendaPage() {
   });
   const [showOtherUsersEvents, setShowOtherUsersEvents] = useState(false);
   const [showFiltersMenu, setShowFiltersMenu] = useState(false);
+  /** Listes bas de page : section événements Google Calendar repliable (mois / semaine / jour) */
+  const [monthGoogleEventsOpen, setMonthGoogleEventsOpen] = useState(false);
+  const [weekGoogleEventsOpen, setWeekGoogleEventsOpen] = useState(false);
+  const [dayGoogleEventsOpen, setDayGoogleEventsOpen] = useState(true);
   const filtersMenuRef = useRef<HTMLDivElement>(null);
   const [showCreateMeetModal, setShowCreateMeetModal] = useState(false);
   const [showCreateMeetingModal, setShowCreateMeetingModal] = useState(false);
@@ -178,6 +443,7 @@ export default function AgendaPage() {
   const meetEditorRef = useRef<DefaultTemplateRef | null>(null);
   const [creatingMeet, setCreatingMeet] = useState(false);
   const [meetError, setMeetError] = useState('');
+  const [meetErrorConfigLink, setMeetErrorConfigLink] = useState<string | null>(null);
   const [meetData, setMeetData] = useState<{
     title: string;
     description: string;
@@ -188,6 +454,7 @@ export default function AgendaPage() {
     internalNote: string;
     contactId: string;
     addToGoogleCalendar: boolean;
+    googleCalendarId: string;
   }>({
     title: '',
     description: '',
@@ -198,6 +465,7 @@ export default function AgendaPage() {
     internalNote: '',
     contactId: '',
     addToGoogleCalendar: true,
+    googleCalendarId: '',
   });
 
   // États pour rendez-vous physique
@@ -214,6 +482,7 @@ export default function AgendaPage() {
     attendees: string[];
     contactId: string;
     addToGoogleCalendar: boolean;
+    googleCalendarId: string;
   }>({
     title: '',
     description: '',
@@ -224,13 +493,63 @@ export default function AgendaPage() {
     attendees: [],
     contactId: '',
     addToGoogleCalendar: true,
+    googleCalendarId: '',
   });
 
-  const { data: googleStatus } = useFetch<{ connected?: boolean }>('/api/auth/google/status');
+  const { data: googleStatus } = useFetch<{
+    calendar?: { connected?: boolean; email?: string | null };
+  }>('/api/auth/google/status');
   useEffect(() => {
-    setGoogleConnected(Boolean(googleStatus?.connected));
+    setGoogleConnected(Boolean(googleStatus?.calendar?.connected));
   }, [googleStatus]);
 
+  const googleCalendarsKey = googleConnected ? '/api/settings/google-calendar/calendars' : null;
+  const { data: gCalPayload } = useSWR<{
+    calendars?: GoogleCalendarOption[];
+    defaultGoogleCalendarId?: string | null;
+    agendaVisibleGoogleCalendarIds?: string[];
+    agendaGoogleEventColor?: string | null;
+    error?: string;
+    needsGoogleReconnect?: boolean;
+  }>(googleCalendarsKey, async (url: string) => {
+    const response = await fetch(url);
+    return response.json();
+  });
+
+  const writableCalendars = useMemo(
+    () =>
+      (gCalPayload?.calendars ?? []).filter(
+        (c) => c.accessRole === 'owner' || c.accessRole === 'writer',
+      ),
+    [gCalPayload?.calendars],
+  );
+
+  /** Uniquement les calendriers cochés dans Paramètres → Afficher dans l'agenda (si préférence enregistrée). */
+  const targetGoogleCalendars = useMemo(
+    () =>
+      googleCalendarsForEventTargetPicker(
+        writableCalendars,
+        gCalPayload?.agendaVisibleGoogleCalendarIds,
+      ),
+    [writableCalendars, gCalPayload?.agendaVisibleGoogleCalendarIds],
+  );
+
+  const gCalChrome = useMemo(
+    () =>
+      googleAgendaEventChromeStyle(
+        normalizeAgendaGoogleEventColor(gCalPayload?.agendaGoogleEventColor),
+      ),
+    [gCalPayload?.agendaGoogleEventColor],
+  );
+
+  const gCalCardChrome = useMemo(
+    () =>
+      googleAgendaEventCardChromeStyle(
+        normalizeAgendaGoogleEventColor(gCalPayload?.agendaGoogleEventColor),
+      ),
+    [gCalPayload?.agendaGoogleEventColor],
+  );
+
   // Édition d'un Google Meet
   const [showEditMeetModal, setShowEditMeetModal] = useState(false);
   const [editingMeetTask, setEditingMeetTask] = useState<Task | null>(null);
@@ -253,6 +572,7 @@ export default function AgendaPage() {
     reminderMinutesBefore: number | null;
     contactId: string;
     addToGoogleCalendar: boolean;
+    googleCalendarId: string;
   }>({
     type: 'TASK',
     title: '',
@@ -261,6 +581,7 @@ export default function AgendaPage() {
     reminderMinutesBefore: null,
     contactId: '',
     addToGoogleCalendar: false,
+    googleCalendarId: '',
   });
 
   // Détail / édition d'une tâche générique (non liée à un contact)
@@ -270,18 +591,22 @@ export default function AgendaPage() {
   const [taskDetailLoading, setTaskDetailLoading] = useState(false);
   const [taskDeleteLoading, setTaskDeleteLoading] = useState(false);
   const taskDetailEditorRef = useRef<DefaultTemplateRef | null>(null);
-  const hasTriggeredGoogleSheetSyncRef = useRef(false);
   const [taskDetailData, setTaskDetailData] = useState<{
     title: string;
     description: string;
     scheduledAt: string;
     completed: boolean;
+    googleCalendarId: string;
+    reminderMinutesBefore: number | null;
   }>({
     title: '',
     description: '',
     scheduledAt: '',
     completed: false,
+    googleCalendarId: '',
+    reminderMinutesBefore: null,
   });
+  const [taskCompleteQuickSaving, setTaskCompleteQuickSaving] = useState(false);
 
   const canViewOtherUsersEvents = hasPermission('tasks.view_other_users_events');
   const { data: contactsData } = useFetch<ContactsResponse>('/api/contacts?limit=1000');
@@ -291,11 +616,73 @@ export default function AgendaPage() {
   );
   const users = useMemo(() => usersData ?? [], [usersData]);
 
+  const userColorById = useMemo(() => {
+    const map = new Map<string, (typeof USER_COLORS)[number]>();
+    users.forEach((u, index) => {
+      map.set(u.id, USER_COLORS[index % USER_COLORS.length]);
+    });
+    return map;
+  }, [users]);
+
+  const getEventColor = useCallback(
+    (task: Task) => {
+      if (showOtherUsersEvents && task.assignedUser) {
+        return userColorById.get(task.assignedUser.id) ?? DEFAULT_EVENT_COLOR;
+      }
+      return TYPE_COLORS[task.type] || DEFAULT_EVENT_COLOR;
+    },
+    [showOtherUsersEvents, userColorById],
+  );
+
+  const scrollUserChipsBy = useCallback((direction: 'prev' | 'next') => {
+    const el = userChipsScrollRef.current;
+    if (!el) return;
+    const step = Math.min(280, Math.max(120, el.clientWidth * 0.75));
+    el.scrollBy({ left: direction === 'next' ? step : -step, behavior: 'smooth' });
+  }, []);
+
+  /** Défilement horizontal à la souris + mise à jour des flèches (pavé tactile inchangé). */
+  useEffect(() => {
+    if (!showOtherUsersEvents || users.length === 0) return;
+    const el = userChipsScrollRef.current;
+    if (!el) return;
+
+    const updateEdges = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = el;
+      const maxScroll = scrollWidth - clientWidth;
+      setUserChipsScrollEdges({
+        canScrollPrev: scrollLeft > 1,
+        canScrollNext: maxScroll > 1 && scrollLeft < maxScroll - 1,
+      });
+    };
+
+    updateEdges();
+    el.addEventListener('scroll', updateEdges, { passive: true });
+
+    const onWheel = (e: WheelEvent) => {
+      if (el.scrollWidth <= el.clientWidth) return;
+      if (e.shiftKey) return;
+      if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+      e.preventDefault();
+      el.scrollLeft += e.deltaY;
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+
+    const ro = new ResizeObserver(updateEdges);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener('scroll', updateEdges);
+      el.removeEventListener('wheel', onWheel);
+      ro.disconnect();
+    };
+  }, [showOtherUsersEvents, users.length]);
+
   useEffect(() => {
     if (!meetError) return;
+    if (meetErrorConfigLink) return; // Affiché dans la modal via ConfigErrorAlert
     toast.error(meetError);
     setMeetError('');
-  }, [meetError, toast]);
+  }, [meetError, meetErrorConfigLink, toast]);
   useEffect(() => {
     if (!meetingError) return;
     toast.error(meetingError);
@@ -322,26 +709,6 @@ export default function AgendaPage() {
     setSelectedUserIds(new Set(users.map((u) => u.id)));
   }, [canViewOtherUsersEvents, selectedUserIds.size, users]);
 
-  // Synchronisation automatique Google Sheets
-  useEffect(() => {
-    if (hasTriggeredGoogleSheetSyncRef.current) {
-      return;
-    }
-    hasTriggeredGoogleSheetSyncRef.current = true;
-
-    const syncGoogleSheet = async () => {
-      try {
-        await fetch('/api/integrations/google-sheet/sync', {
-          method: 'POST',
-        });
-      } catch (err) {
-        console.error('Erreur lors de la synchronisation Google Sheets:', err);
-      }
-    };
-
-    syncGoogleSheet();
-  }, []);
-
   // Fermer le menu de filtres en cliquant en dehors
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -484,6 +851,173 @@ export default function AgendaPage() {
     await mutateTasks();
   };
 
+  const googleEventsKey =
+    googleConnected && session
+      ? `/api/agenda/google-events?startDate=${encodeURIComponent(dateRange.start.toISOString())}&endDate=${encodeURIComponent(dateRange.end.toISOString())}`
+      : null;
+  const { data: googleEventsResponse } = useSWR<{ events: GoogleAgendaEventRow[] }>(
+    googleEventsKey,
+    async (url: string) => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error('Erreur événements Google');
+      return response.json();
+    },
+  );
+  const rawGoogleEvents = googleEventsResponse?.events ?? [];
+
+  const standaloneGoogleEvents = useMemo(() => {
+    const linked = new Set(
+      tasks.map((t) => t.googleEventId).filter((x): x is string => Boolean(x)),
+    );
+    return rawGoogleEvents.filter((e) => !linked.has(e.googleEventId));
+  }, [rawGoogleEvents, tasks]);
+
+  const googleEventsInDateRange = useMemo(() => {
+    const rangeStart = dateRange.start.getTime();
+    const rangeEnd = dateRange.end.getTime();
+    return standaloneGoogleEvents.filter((ev) => {
+      const { start: evS, end: evE } = googleAgendaEventLocalTimeRange(ev);
+      return evS.getTime() <= rangeEnd && evE.getTime() >= rangeStart;
+    });
+  }, [standaloneGoogleEvents, dateRange.start, dateRange.end]);
+
+  const googleForDayList = useMemo(() => {
+    return standaloneGoogleEvents.filter((ev) => {
+      if (ev.allDay && ev.allDayStartDate && ev.allDayEndExclusive) {
+        const k = localCalendarDateKey(currentDate);
+        return ev.allDayStartDate <= k && k < ev.allDayEndExclusive;
+      }
+      const dayStart = new Date(currentDate);
+      dayStart.setHours(0, 0, 0, 0);
+      const dayEnd = new Date(currentDate);
+      dayEnd.setHours(23, 59, 59, 999);
+      const taskStart = new Date(ev.start);
+      const taskEnd = new Date(ev.end);
+      return taskStart < dayEnd && taskEnd > dayStart;
+    });
+  }, [standaloneGoogleEvents, currentDate]);
+
+  const googleForDayListAllDay = useMemo(
+    () =>
+      [...googleForDayList]
+        .filter((ev) => ev.allDay)
+        .sort(
+          (a, b) =>
+            googleAgendaEventLocalTimeRange(a).start.getTime() -
+            googleAgendaEventLocalTimeRange(b).start.getTime(),
+        ),
+    [googleForDayList],
+  );
+
+  const googleForDayListTimed = useMemo(
+    () =>
+      [...googleForDayList]
+        .filter((ev) => !ev.allDay)
+        .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()),
+    [googleForDayList],
+  );
+
+  /** Barres fusionnées en haut de semaine (all-day + événements avec horaire sur plusieurs jours). */
+  const weekAllDayGoogleBars = useMemo(() => {
+    const anchor = new Date(currentDate);
+    const dow = anchor.getDay() === 0 ? 7 : anchor.getDay();
+    anchor.setDate(anchor.getDate() - (dow - 1));
+    const weekDays: Date[] = [];
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(anchor);
+      d.setDate(anchor.getDate() + i);
+      weekDays.push(d);
+    }
+    const weekFirstKey = localCalendarDateKey(weekDays[0]);
+    const weekLastKey = localCalendarDateKey(weekDays[6]);
+
+    const seen = new Set<string>();
+    const candidates: Array<{
+      ev: GoogleAgendaEventRow;
+      spanStartKey: string;
+      spanEndKey: string;
+    }> = [];
+    for (const ev of standaloneGoogleEvents) {
+      const id = `${ev.calendarId}\0${ev.googleEventId}`;
+      if (seen.has(id)) continue;
+
+      let spanStartKey = '';
+      let spanEndKey = '';
+      if (ev.allDay && ev.allDayStartDate && ev.allDayEndExclusive) {
+        // all-day : end exclusif Google => end inclusif local = endExclusive - 1 jour
+        spanStartKey = ev.allDayStartDate;
+        const [ey, em, ed] = ev.allDayEndExclusive.split('-').map(Number);
+        const endExclusiveLocal = new Date(ey, em - 1, ed, 0, 0, 0, 0);
+        endExclusiveLocal.setDate(endExclusiveLocal.getDate() - 1);
+        spanEndKey = localCalendarDateKey(endExclusiveLocal);
+      } else {
+        const { start, end } = googleAgendaEventLocalTimeRange(ev);
+        const startKey = localCalendarDateKey(start);
+        const endKey = localCalendarDateKey(end);
+        // Évènement horaire multi-jours : affichage en barre haute comme Google Calendar.
+        if (startKey >= endKey) continue;
+        spanStartKey = startKey;
+        spanEndKey = endKey;
+      }
+
+      if (spanEndKey < weekFirstKey || spanStartKey > weekLastKey) continue;
+      seen.add(id);
+      candidates.push({ ev, spanStartKey, spanEndKey });
+    }
+
+    if (candidates.length === 0) return null;
+
+    type SpanItem = { ev: GoogleAgendaEventRow; startIdx: number; endIdx: number };
+    const withSpan: SpanItem[] = [];
+    for (const item of candidates) {
+      let firstIdx = -1;
+      let lastIdx = -1;
+      for (let i = 0; i < 7; i++) {
+        const k = localCalendarDateKey(weekDays[i]);
+        if (k >= item.spanStartKey && k <= item.spanEndKey) {
+          if (firstIdx < 0) firstIdx = i;
+          lastIdx = i;
+        }
+      }
+      if (firstIdx >= 0 && lastIdx >= 0) {
+        withSpan.push({ ev: item.ev, startIdx: firstIdx, endIdx: lastIdx });
+      }
+    }
+
+    if (withSpan.length === 0) return null;
+
+    withSpan.sort((a, b) => {
+      if (a.startIdx !== b.startIdx) return a.startIdx - b.startIdx;
+      return b.endIdx - b.startIdx - (a.endIdx - a.startIdx);
+    });
+
+    const lanes: Array<Array<{ start: number; end: number }>> = [];
+    const placed: Array<{
+      ev: GoogleAgendaEventRow;
+      startIdx: number;
+      endIdx: number;
+      lane: number;
+    }> = [];
+
+    for (const item of withSpan) {
+      const interval = { start: item.startIdx, end: item.endIdx };
+      let lane = 0;
+      while (true) {
+        if (!lanes[lane]) lanes[lane] = [];
+        const occupied = lanes[lane];
+        const clash = occupied.some((o) => o.start <= interval.end && interval.start <= o.end);
+        if (!clash) {
+          occupied.push(interval);
+          placed.push({ ev: item.ev, startIdx: item.startIdx, endIdx: item.endIdx, lane });
+          break;
+        }
+        lane++;
+      }
+    }
+
+    return { placed, rowCount: lanes.length };
+  }, [standaloneGoogleEvents, currentDate]);
+
   // Filtrer les tâches selon les filtres sélectionnés
   const filteredTasks = useMemo(() => {
     return tasks.filter((task) => {
@@ -578,6 +1112,22 @@ export default function AgendaPage() {
     });
   };
 
+  const getGoogleEventsForDate = (date: Date) => {
+    return standaloneGoogleEvents.filter((ev) => {
+      if (ev.allDay && ev.allDayStartDate && ev.allDayEndExclusive) {
+        const k = localCalendarDateKey(date);
+        return ev.allDayStartDate <= k && k < ev.allDayEndExclusive;
+      }
+      const taskStart = new Date(ev.start);
+      const taskEnd = new Date(ev.end);
+      const dayStart = new Date(date);
+      dayStart.setHours(0, 0, 0, 0);
+      const dayEnd = new Date(date);
+      dayEnd.setHours(23, 59, 59, 999);
+      return taskStart < dayEnd && taskEnd > dayStart;
+    });
+  };
+
   const formatTime = (dateString: string) => {
     return new Date(dateString).toLocaleTimeString('fr-FR', {
       hour: '2-digit',
@@ -600,18 +1150,73 @@ export default function AgendaPage() {
   };
 
   const toggleTaskComplete = async (taskId: string, currentStatus: boolean) => {
+    const next = !currentStatus;
+    await mutateTasks(
+      (prev) => {
+        const list = Array.isArray(prev) ? prev : [];
+        return list.map((t) => (t.id === taskId ? { ...t, completed: next } : t));
+      },
+      { revalidate: false },
+    );
     try {
       const response = await fetch(`/api/tasks/${taskId}`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ completed: !currentStatus }),
+        body: JSON.stringify({ completed: next }),
       });
+      if (!response.ok) {
+        const data = await response.json().catch(() => ({}));
+        toast.error(devToast('Impossible de mettre à jour le statut', data.error));
+        await mutateTasks(undefined, { revalidate: true });
+        return;
+      }
+      await mutateTasks(undefined, { revalidate: true });
+      requestRemindersRefresh();
+    } catch (e) {
+      toast.error(devToast('Impossible de se connecter au serveur. Vérifiez votre connexion internet.', e));
+      await mutateTasks(undefined, { revalidate: true });
+    }
+  };
 
-      if (response.ok) {
-        fetchTasks();
+  const handleAgendaModalQuickSetCompleted = async (nextCompleted: boolean) => {
+    if (!selectedTask || taskCompleteQuickSaving) return;
+    if (taskDetailData.completed === nextCompleted) return;
+
+    setTaskCompleteQuickSaving(true);
+    const prevCompleted = taskDetailData.completed;
+    const taskId = selectedTask.id;
+
+    setTaskDetailData((d) => ({ ...d, completed: nextCompleted }));
+    setSelectedTask((t) => (t ? { ...t, completed: nextCompleted } : null));
+    await mutateTasks(
+      (prev) => {
+        const list = Array.isArray(prev) ? prev : [];
+        return list.map((x) => (x.id === taskId ? { ...x, completed: nextCompleted } : x));
+      },
+      { revalidate: false },
+    );
+
+    try {
+      const response = await fetch(`/api/tasks/${taskId}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ completed: nextCompleted }),
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Impossible de mettre à jour le statut');
       }
-    } catch (error) {
-      console.error('Erreur lors de la mise à jour de la tâche:', error);
+      setTaskDetailData((d) => ({ ...d, completed: data.completed }));
+      setSelectedTask((t) => (t && t.id === data.id ? { ...t, ...data } : t));
+      await mutateTasks(undefined, { revalidate: true });
+      requestRemindersRefresh();
+    } catch (e) {
+      setTaskDetailData((d) => ({ ...d, completed: prevCompleted }));
+      setSelectedTask((t) => (t ? { ...t, completed: prevCompleted } : null));
+      await mutateTasks(undefined, { revalidate: true });
+      toast.error(devToast('Impossible de mettre à jour la tâche. Veuillez réessayer.', e));
+    } finally {
+      setTaskCompleteQuickSaving(false);
     }
   };
 
@@ -640,13 +1245,17 @@ export default function AgendaPage() {
           type: createTaskData.type,
           title: createTaskData.title || null,
           description: createTaskData.description,
-          scheduledAt: createTaskData.scheduledAt,
+          scheduledAt: scheduledAtPayloadToIso(createTaskData.scheduledAt),
           contactId: createTaskData.contactId || undefined,
           reminderMinutesBefore:
             typeof createTaskData.reminderMinutesBefore === 'number'
               ? createTaskData.reminderMinutesBefore
               : null,
           addToGoogleCalendar: createTaskData.addToGoogleCalendar,
+          googleCalendarId:
+            createTaskData.addToGoogleCalendar && createTaskData.googleCalendarId
+              ? createTaskData.googleCalendarId
+              : undefined,
         }),
       });
 
@@ -664,12 +1273,23 @@ export default function AgendaPage() {
         reminderMinutesBefore: null,
         contactId: '',
         addToGoogleCalendar: true,
+        googleCalendarId: '',
       });
       setTaskContactSearch('');
       setTaskContactDropdownOpen(false);
-      await fetchTasks();
+      await mutateTasks(
+        (prev) => {
+          const list = Array.isArray(prev) ? prev : [];
+          if (list.some((t) => t.id === data.id)) return list;
+          return [...list, data];
+        },
+        { revalidate: true },
+      );
+      requestRemindersRefresh();
     } catch (error: unknown) {
-      setCreateTaskError(error instanceof Error ? error.message : 'Erreur lors de la création de la tâche');
+      setCreateTaskError(
+        devToast('Erreur lors de la création de la tâche', error),
+      );
     } finally {
       setCreatingTask(false);
     }
@@ -705,6 +1325,7 @@ export default function AgendaPage() {
         setMeetError(
           'Vous devez connecter votre compte Google dans les paramètres avant de pouvoir créer un Google Meet.',
         );
+        setMeetErrorConfigLink(CONFIG_LINKS.googleCalendar);
         setCreatingMeet(false);
         return;
       }
@@ -715,23 +1336,32 @@ export default function AgendaPage() {
         body: JSON.stringify({
           title: meetData.title,
           description: htmlContent || '',
-          scheduledAt: meetData.scheduledAt,
+          scheduledAt: scheduledAtPayloadToIso(meetData.scheduledAt),
           durationMinutes: meetData.durationMinutes,
           attendees: meetData.attendees.filter((email) => email.trim() !== ''),
           reminderMinutesBefore: meetData.reminderMinutesBefore,
           internalNote: meetData.internalNote || null,
           contactId: meetData.contactId || undefined,
           addToGoogleCalendar: meetData.addToGoogleCalendar,
+          googleCalendarId:
+            meetData.addToGoogleCalendar && meetData.googleCalendarId
+              ? meetData.googleCalendarId
+              : undefined,
         }),
       });
 
       const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || 'Erreur lors de la création du Google Meet');
+        setMeetError(devToast('Erreur lors de la création du Google Meet', data.error));
+        if (data.configLink) setMeetErrorConfigLink(data.configLink);
+        setCreatingMeet(false);
+        return;
       }
 
       setShowCreateMeetModal(false);
+      setMeetError('');
+      setMeetErrorConfigLink(null);
       setMeetData({
         title: '',
         description: '',
@@ -742,13 +1372,23 @@ export default function AgendaPage() {
         internalNote: '',
         contactId: '',
         addToGoogleCalendar: true,
+        googleCalendarId: '',
       });
       setMeetContactSearch('');
       setMeetContactDropdownOpen(false);
       meetEditorRef.current?.injectHTML('');
-      await fetchTasks();
+      await mutateTasks(
+        (prev) => {
+          const list = Array.isArray(prev) ? prev : [];
+          if (list.some((t) => t.id === data.id)) return list;
+          return [...list, data];
+        },
+        { revalidate: true },
+      );
+      requestRemindersRefresh();
     } catch (err: unknown) {
-      setMeetError(err instanceof Error ? err.message : 'Erreur inconnue');
+      setMeetError(devToast('Erreur lors de la création du Google Meet', err));
+      setMeetErrorConfigLink(null);
     } finally {
       setCreatingMeet(false);
     }
@@ -794,13 +1434,17 @@ export default function AgendaPage() {
           type: 'MEETING',
           title: meetingData.title || null,
           description: htmlContent || '',
-          scheduledAt: meetingData.scheduledAt,
+          scheduledAt: scheduledAtPayloadToIso(meetingData.scheduledAt),
           reminderMinutesBefore: meetingData.reminderMinutesBefore ?? null,
           notifyContact: meetingData.notifyContact,
           internalNote: meetingData.internalNote || null,
           attendees: meetingData.attendees.filter((email) => email.trim() !== ''),
           contactId: meetingData.contactId || undefined,
           addToGoogleCalendar: meetingData.addToGoogleCalendar,
+          googleCalendarId:
+            meetingData.addToGoogleCalendar && meetingData.googleCalendarId
+              ? meetingData.googleCalendarId
+              : undefined,
         }),
       });
 
@@ -821,13 +1465,22 @@ export default function AgendaPage() {
         attendees: [],
         contactId: '',
         addToGoogleCalendar: true,
+        googleCalendarId: '',
       });
       setMeetingContactSearch('');
       setMeetingContactDropdownOpen(false);
       meetingEditorRef.current?.injectHTML('');
-      await fetchTasks();
+      await mutateTasks(
+        (prev) => {
+          const list = Array.isArray(prev) ? prev : [];
+          if (list.some((t) => t.id === data.id)) return list;
+          return [...list, data];
+        },
+        { revalidate: true },
+      );
+      requestRemindersRefresh();
     } catch (err: unknown) {
-      setMeetingError(err instanceof Error ? err.message : 'Erreur inconnue');
+      setMeetingError(devToast('Erreur lors de la création du rendez-vous', err));
     } finally {
       setCreatingMeeting(false);
     }
@@ -838,8 +1491,10 @@ export default function AgendaPage() {
     setTaskDetailData({
       title: task.title || '',
       description: task.description || '',
-      scheduledAt: task.scheduledAt,
+      scheduledAt: toLocalDateTimeInput(task.scheduledAt),
       completed: task.completed,
+      googleCalendarId: task.googleCalendarId || 'primary',
+      reminderMinutesBefore: task.reminderMinutesBefore ?? null,
     });
     setTaskDetailError('');
     setShowTaskDetailModal(true);
@@ -903,8 +1558,10 @@ export default function AgendaPage() {
         body: JSON.stringify({
           title: taskDetailData.title || null,
           description: htmlContent,
-          scheduledAt: taskDetailData.scheduledAt,
+          scheduledAt: scheduledAtPayloadToIso(taskDetailData.scheduledAt),
           completed: taskDetailData.completed,
+          googleCalendarId: taskDetailData.googleCalendarId || undefined,
+          reminderMinutesBefore: taskDetailData.reminderMinutesBefore ?? null,
         }),
       });
 
@@ -913,11 +1570,23 @@ export default function AgendaPage() {
         throw new Error(data.error || 'Erreur lors de la mise à jour de la tâche');
       }
 
+      const previousCalendarId = selectedTask.googleCalendarId || 'primary';
+      const nextCalendarId = taskDetailData.googleCalendarId || 'primary';
+      if (previousCalendarId !== nextCalendarId) {
+        const selectedCalendar = targetGoogleCalendars.find((c) => c.id === nextCalendarId);
+        toast.success(
+          `Calendrier mis à jour${selectedCalendar ? ` : ${selectedCalendar.summary}` : ''}`,
+        );
+      }
+
       setShowTaskDetailModal(false);
       setSelectedTask(null);
       await fetchTasks();
+      requestRemindersRefresh();
     } catch (error: unknown) {
-      setTaskDetailError(error instanceof Error ? error.message : 'Erreur lors de la mise à jour de la tâche');
+      setTaskDetailError(
+        devToast('Erreur lors de la mise à jour de la tâche', error),
+      );
     } finally {
       setTaskDetailLoading(false);
     }
@@ -954,8 +1623,11 @@ export default function AgendaPage() {
       setShowTaskDetailModal(false);
       setSelectedTask(null);
       await fetchTasks();
+      requestRemindersRefresh();
     } catch (error: unknown) {
-      setTaskDetailError(error instanceof Error ? error.message : 'Erreur lors de la suppression de la tâche');
+      setTaskDetailError(
+        devToast('Erreur lors de la suppression de la tâche', error),
+      );
     } finally {
       setTaskDeleteLoading(false);
     }
@@ -965,7 +1637,7 @@ export default function AgendaPage() {
     const scheduled = new Date(task.scheduledAt);
     setEditingMeetTask(task);
     setEditMeetData({
-      scheduledAt: scheduled.toISOString(),
+      scheduledAt: toLocalDateTimeInput(scheduled),
       durationMinutes: task.durationMinutes ?? 30,
     });
     setEditMeetError('');
@@ -990,7 +1662,7 @@ export default function AgendaPage() {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          scheduledAt: editMeetData.scheduledAt,
+          scheduledAt: scheduledAtPayloadToIso(editMeetData.scheduledAt),
           durationMinutes: editMeetData.durationMinutes,
         }),
       });
@@ -1004,13 +1676,15 @@ export default function AgendaPage() {
       setEditingMeetTask(null);
       setEditMeetLoading(false);
       await fetchTasks();
+      requestRemindersRefresh();
     } catch (error: unknown) {
-      setEditMeetError(error instanceof Error ? error.message : 'Erreur lors de la mise à jour du rendez-vous');
+      setEditMeetError(
+        devToast('Erreur lors de la mise à jour du rendez-vous', error),
+      );
       setEditMeetLoading(false);
     }
   };
 
-
   // Ne pas afficher le skeleton global, on l'affiche par vue
 
   // Fonction pour formater la date pour l'affichage dans le header
@@ -1070,23 +1744,24 @@ export default function AgendaPage() {
 
   return (
     <ProtectedPage requiredPermission={['tasks.view_all', 'tasks.view_own']}>
+      <TooltipProvider delayDuration={400}>
       <div className="kb-tab-scope bg-surface-page flex h-full flex-col">
         {/* Header avec titre et navigation */}
-        <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8">
+        <div className="border-border bg-background/95 border-b px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8">
           {/* Titre et informations de date */}
           <div className="mb-4 flex items-start justify-between gap-4">
             <div className="flex items-start gap-4">
               {/* Date actuelle en grand */}
               <div className="flex flex-col">
-                <div className="text-3xl font-bold text-foreground">{formatCurrentDay().day}</div>
-                <div className="text-xs font-medium text-muted-foreground uppercase">
+                <div className="text-foreground text-3xl font-bold">{formatCurrentDay().day}</div>
+                <div className="text-muted-foreground text-xs font-medium uppercase">
                   {formatCurrentDay().month}
                 </div>
               </div>
               <div className="flex flex-col">
-                <h1 className="text-2xl font-bold text-foreground">Agenda</h1>
-                <p className="mt-1 text-sm text-muted-foreground">{formatCurrentMonthYear()}</p>
-                <p className="text-xs text-muted-foreground/80">{formatHeaderDateRange()}</p>
+                <h1 className="text-foreground text-2xl font-bold">Agenda</h1>
+                <p className="text-muted-foreground mt-1 text-sm">{formatCurrentMonthYear()}</p>
+                <p className="text-muted-foreground/80 text-xs">{formatHeaderDateRange()}</p>
               </div>
             </div>
 
@@ -1094,24 +1769,52 @@ export default function AgendaPage() {
             <div className="flex items-center gap-2">
               <button
                 type="button"
-                onClick={() => setShowCreateMeetModal(true)}
-                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-green-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 sm:px-4 sm:text-sm"
+                onClick={() => {
+                  if (!googleConnected) {
+                    toast.errorConfigRequired(
+                      'Connectez votre compte Google dans les paramètres avant de créer un Google Meet.',
+                      CONFIG_LINKS.googleCalendar,
+                    );
+                    return;
+                  }
+                  setMeetData((d) => ({
+                    ...d,
+                    googleCalendarId: pickDefaultCalendarId(gCalPayload, targetGoogleCalendars),
+                  }));
+                  setShowCreateMeetModal(true);
+                }}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-green-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-green-700 focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2 focus-visible:outline-none sm:px-4 sm:text-sm"
               >
                 <Video className="h-4 w-4" />
                 <span className="hidden sm:inline">Google Meet</span>
               </button>
               <button
                 type="button"
-                onClick={() => setShowCreateMeetingModal(true)}
-                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400/30 focus-visible:ring-offset-2 sm:px-4 sm:text-sm"
+                onClick={() => {
+                  setMeetingData((d) => ({
+                    ...d,
+                    googleCalendarId: pickDefaultCalendarId(gCalPayload, targetGoogleCalendars),
+                  }));
+                  setShowCreateMeetingModal(true);
+                }}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-gray-400/30 focus-visible:ring-offset-2 focus-visible:outline-none sm:px-4 sm:text-sm"
               >
                 <Calendar className="h-4 w-4" />
                 <span className="hidden sm:inline">Rendez-vous</span>
               </button>
               <button
                 type="button"
-                onClick={() => setShowCreateTaskModal(true)}
-                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-primary px-3 py-2 text-xs font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 sm:px-4 sm:text-sm"
+                onClick={() => {
+                  setCreateTaskData((d) => ({
+                    ...d,
+                    googleCalendarId:
+                      targetGoogleCalendars.length > 0
+                        ? pickDefaultCalendarId(gCalPayload, targetGoogleCalendars)
+                        : '',
+                  }));
+                  setShowCreateTaskModal(true);
+                }}
+                className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-primary inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-xs font-semibold shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:px-4 sm:text-sm"
               >
                 <Bookmark className="h-4 w-4" />
                 <span className="hidden sm:inline">Tâche</span>
@@ -1120,111 +1823,141 @@ export default function AgendaPage() {
             </div>
           </div>
 
-          {/* Filtres et navigation */}
-          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
-            {/* Filtres d'événements */}
-            <div className="flex items-center gap-2">
-              <button
-                type="button"
-                onClick={() =>
-                  setFilters({
-                    tasks: true,
-                    meetings: true,
-                    googleMeets: true,
-                  })
-                }
-                className={cn(
-                  'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2',
-                  filters.tasks && filters.meetings && filters.googleMeets
-                    ? 'bg-muted text-foreground'
-                    : 'bg-card text-muted-foreground hover:bg-muted',
-                )}
-              >
-                Tous les événements
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  setFilters({
-                    tasks: true,
-                    meetings: false,
-                    googleMeets: false,
-                  })
-                }
-                className={cn(
-                  'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2',
-                  filters.tasks && !filters.meetings && !filters.googleMeets
-                    ? 'bg-muted text-foreground'
-                    : 'bg-card text-muted-foreground hover:bg-muted',
-                )}
-              >
-                Tâches
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  setFilters({
-                    tasks: false,
-                    meetings: true,
-                    googleMeets: false,
-                  })
-                }
-                className={cn(
-                  'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2',
-                  !filters.tasks && filters.meetings && !filters.googleMeets
-                    ? 'bg-muted text-foreground'
-                    : 'bg-card text-muted-foreground hover:bg-muted',
-                )}
-              >
-                Rendez-vous
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  setFilters({
-                    tasks: false,
-                    meetings: false,
-                    googleMeets: true,
-                  })
-                }
-                className={cn(
-                  'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2',
-                  !filters.tasks && !filters.meetings && filters.googleMeets
-                    ? 'bg-muted text-foreground'
-                    : 'bg-card text-muted-foreground hover:bg-muted',
+          {/* Filtres et navigation : sur lg, une seule ligne — filtres | utilisateurs (scroll) | nav */}
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between lg:gap-3">
+            <div className="flex min-w-0 flex-1 flex-col gap-2 lg:flex-row lg:items-center lg:gap-2">
+              {/* Filtres + toggle admin (ne rétrécit pas sur grand écran) */}
+              <div className="flex shrink-0 flex-wrap items-center gap-2">
+                <button
+                  type="button"
+                  onClick={() =>
+                    setFilters({
+                      tasks: true,
+                      meetings: true,
+                      googleMeets: true,
+                    })
+                  }
+                  className={cn(
+                    'focus-visible:ring-primary/40 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+                    filters.tasks && filters.meetings && filters.googleMeets
+                      ? 'bg-muted text-foreground'
+                      : 'bg-card text-muted-foreground hover:bg-muted',
+                  )}
+                >
+                  Tous les événements
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    setFilters({
+                      tasks: true,
+                      meetings: false,
+                      googleMeets: false,
+                    })
+                  }
+                  className={cn(
+                    'focus-visible:ring-primary/40 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+                    filters.tasks && !filters.meetings && !filters.googleMeets
+                      ? 'bg-muted text-foreground'
+                      : 'bg-card text-muted-foreground hover:bg-muted',
+                  )}
+                >
+                  Tâches
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    setFilters({
+                      tasks: false,
+                      meetings: true,
+                      googleMeets: false,
+                    })
+                  }
+                  className={cn(
+                    'focus-visible:ring-primary/40 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+                    !filters.tasks && filters.meetings && !filters.googleMeets
+                      ? 'bg-muted text-foreground'
+                      : 'bg-card text-muted-foreground hover:bg-muted',
+                  )}
+                >
+                  Rendez-vous
+                </button>
+                <button
+                  type="button"
+                  onClick={() =>
+                    setFilters({
+                      tasks: false,
+                      meetings: false,
+                      googleMeets: true,
+                    })
+                  }
+                  className={cn(
+                    'focus-visible:ring-primary/40 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+                    !filters.tasks && !filters.meetings && filters.googleMeets
+                      ? 'bg-muted text-foreground'
+                      : 'bg-card text-muted-foreground hover:bg-muted',
+                  )}
+                >
+                  Google Meet
+                </button>
+                {hasPermission('tasks.view_other_users_events') && (
+                  <>
+                    {/* Filtre par utilisateur (affiché quand "Voir les autres utilisateurs" est actif) */}
+                    <div className="bg-border mx-2 h-6 w-px" />
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setShowOtherUsersEvents(!showOtherUsersEvents);
+                        // Réinitialiser le filtre utilisateur
+                        if (users.length > 0) {
+                          setSelectedUserIds(new Set(users.map((u) => u.id)));
+                        }
+                      }}
+                      className={cn(
+                        'focus-visible:ring-primary/40 cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+                        showOtherUsersEvents
+                          ? 'bg-muted text-foreground'
+                          : 'bg-card text-muted-foreground hover:bg-muted',
+                      )}
+                    >
+                      Voir les autres utilisateurs
+                    </button>
+                  </>
                 )}
-              >
-                Google Meet
-              </button>
-              {hasPermission('tasks.view_other_users_events') && (
+              </div>
+
+              {/* Bande utilisateurs : entre filtres et navigation sur grand écran (flex-1 + scroll) */}
+              {hasPermission('tasks.view_other_users_events') && showOtherUsersEvents && (
                 <>
-                  {/* Filtre par utilisateur (affiché quand "Voir les autres utilisateurs" est actif) */}
-                  <div className="mx-2 h-6 w-px bg-border" />
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowOtherUsersEvents(!showOtherUsersEvents);
-                      // Réinitialiser le filtre utilisateur
-                      if (users.length > 0) {
-                        setSelectedUserIds(new Set(users.map((u) => u.id)));
-                      }
-                    }}
-                    className={cn(
-                      'cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2',
-                      showOtherUsersEvents
-                        ? 'bg-muted text-foreground'
-                        : 'bg-card text-muted-foreground hover:bg-muted',
-                    )}
-                  >
-                    Voir les autres utilisateurs
-                  </button>
-                  {showOtherUsersEvents && (
-                    <>
-                      <div className="mx-2 h-6 w-px bg-border" />
-                      {users.length > 0 ? (
-                        <div className="flex flex-wrap items-center gap-2">
+                  <div className="bg-border mx-0.5 hidden h-6 w-px shrink-0 lg:block" aria-hidden />
+                  {users.length > 0 ? (
+                    <div className="border-border bg-muted/30 flex min-h-8 min-w-0 w-full flex-1 flex-col gap-1 rounded-lg border px-1.5 py-1 lg:min-w-0">
+                      <p className="text-muted-foreground px-0.5 text-[10px] font-medium tracking-wide uppercase lg:hidden">
+                        Utilisateurs
+                      </p>
+                      <div className="flex min-h-8 min-w-0 items-stretch gap-0">
+                        {(userChipsScrollEdges.canScrollPrev ||
+                          userChipsScrollEdges.canScrollNext) && (
+                            <button
+                              type="button"
+                              onClick={() => scrollUserChipsBy('prev')}
+                              disabled={!userChipsScrollEdges.canScrollPrev}
+                              className="text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-primary/40 shrink-0 cursor-pointer rounded-md border border-transparent p-0.5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-30"
+                              aria-label="Faire défiler la liste des utilisateurs vers la gauche"
+                            >
+                              <ChevronLeft className="h-3.5 w-3.5" />
+                            </button>
+                          )}
+                        <div
+                          ref={userChipsScrollRef}
+                          role="group"
+                          aria-label="Filtrer par utilisateur"
+                          title="Molette de la souris : faire défiler horizontalement"
+                          className="flex min-w-0 flex-1 flex-nowrap gap-1.5 overflow-x-auto overscroll-x-contain py-0.5 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+                        >
                           {users.map((user) => {
                             const isSelected = selectedUserIds.has(user.id);
+                            const colors = userColorById.get(user.id) ?? DEFAULT_EVENT_COLOR;
                             return (
                               <button
                                 key={user.id}
@@ -1239,49 +1972,76 @@ export default function AgendaPage() {
                                   setSelectedUserIds(newSelected);
                                 }}
                                 className={cn(
-                                  'cursor-pointer rounded-full border px-3 py-1.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2',
+                                  'focus-visible:ring-primary/40 inline-flex shrink-0 cursor-pointer snap-start items-center gap-1.5 rounded-full border px-2 py-1 text-[11px] font-medium leading-tight transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
                                   isSelected
-                                    ? 'border-blue-600 bg-blue-600 text-blue-950 shadow-sm hover:bg-blue-700'
-                                    : 'border-border bg-card text-muted-foreground hover:bg-muted',
+                                    ? 'border-transparent text-white shadow-sm hover:opacity-95'
+                                    : 'border-border bg-card text-foreground hover:bg-muted/80',
                                 )}
+                                style={
+                                  isSelected
+                                    ? {
+                                      backgroundColor: colors.border,
+                                      borderColor: colors.border,
+                                    }
+                                    : {
+                                      borderColor: `${colors.border}55`,
+                                    }
+                                }
                                 title={user.name}
                               >
-                                <span className="max-w-[100px] truncate">{user.name}</span>
+                                <span
+                                  className="h-1.5 w-1.5 shrink-0 rounded-full ring-1 ring-white/40"
+                                  style={{ backgroundColor: colors.border }}
+                                  aria-hidden
+                                />
+                                <span className="max-w-[120px] truncate">{user.name}</span>
                               </button>
                             );
                           })}
                         </div>
-                      ) : (
-                        <div className="text-xs text-muted-foreground">
-                          Chargement des utilisateurs...
-                        </div>
-                      )}
-                    </>
+                        {(userChipsScrollEdges.canScrollPrev ||
+                          userChipsScrollEdges.canScrollNext) && (
+                            <button
+                              type="button"
+                              onClick={() => scrollUserChipsBy('next')}
+                              disabled={!userChipsScrollEdges.canScrollNext}
+                              className="text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:ring-primary/40 shrink-0 cursor-pointer rounded-md border border-transparent p-0.5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-30"
+                              aria-label="Faire défiler la liste des utilisateurs vers la droite"
+                            >
+                              <ChevronRight className="h-3.5 w-3.5" />
+                            </button>
+                          )}
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="text-muted-foreground min-w-0 flex-1 text-xs">
+                      Chargement des utilisateurs...
+                    </div>
                   )}
                 </>
               )}
             </div>
 
             {/* Navigation et sélecteur de vue */}
-            <div className="flex items-center gap-2">
+            <div className="flex shrink-0 items-center gap-2">
               {/* Navigation de date */}
-              <div className="flex items-center gap-1 rounded-lg border border-border bg-card p-1">
+              <div className="border-border bg-card flex items-center gap-1 rounded-lg border p-1">
                 <button
                   onClick={() => navigateDate('prev')}
-                  className="cursor-pointer rounded-md p-1.5 text-muted-foreground transition-colors duration-200 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                  className="text-muted-foreground hover:bg-muted focus-visible:ring-primary cursor-pointer rounded-md p-1.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                   aria-label="Date précédente"
                 >
                   <ChevronLeft className="h-4 w-4" />
                 </button>
                 <button
                   onClick={goToToday}
-                  className="cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors duration-200 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                  className="text-muted-foreground hover:bg-muted focus-visible:ring-primary cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                 >
                   Aujourd&apos;hui
                 </button>
                 <button
                   onClick={() => navigateDate('next')}
-                  className="cursor-pointer rounded-md p-1.5 text-muted-foreground transition-colors duration-200 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                  className="text-muted-foreground hover:bg-muted focus-visible:ring-primary cursor-pointer rounded-md p-1.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
                   aria-label="Date suivante"
                 >
                   <ChevronRight className="h-4 w-4" />
@@ -1292,7 +2052,7 @@ export default function AgendaPage() {
               <select
                 value={view}
                 onChange={(e) => setView(e.target.value as 'month' | 'week' | 'day')}
-                className="cursor-pointer rounded-lg border border-border bg-card px-3 py-1.5 text-xs font-medium text-muted-foreground focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                className="border-border bg-card text-muted-foreground focus:border-primary/50 focus:ring-primary/20 cursor-pointer rounded-lg border px-3 py-1.5 text-xs font-medium focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
               >
                 <option value="month">Vue mois</option>
                 <option value="week">Vue semaine</option>
@@ -1310,20 +2070,33 @@ export default function AgendaPage() {
                   <AgendaMonthSkeleton />
                 </div>
               ) : (
-                <div className="m-4 rounded-xl border border-border bg-card shadow-(--shadow-card) sm:m-6 lg:m-8">
-                  <div className="sticky top-0 z-30 grid grid-cols-7 rounded-t-xl border-b border-border bg-muted shadow-md">
+                <div className="border-border bg-card m-4 rounded-xl border shadow-(--shadow-card) sm:m-6 lg:m-8">
+                  <div className="border-border bg-muted sticky top-0 z-30 grid grid-cols-7 rounded-t-xl border-b shadow-md">
                     {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map((day) => (
                       <div
                         key={day}
-                        className="border-r border-border px-4 py-4 text-center text-xs font-medium tracking-wide text-muted-foreground uppercase last:border-r-0"
+                        className="border-border text-muted-foreground border-r px-4 py-4 text-center text-xs font-medium tracking-wide uppercase last:border-r-0"
                       >
                         {day}
                       </div>
                     ))}
                   </div>
-                  <div className="grid grid-cols-7 divide-x divide-y divide-border">
+                  <div className="divide-border grid grid-cols-7 divide-x divide-y">
                     {getDaysInMonth().map((day, index) => {
                       const dayTasks = getTasksForDate(day.date);
+                      const dayGoogleMonth = getGoogleEventsForDate(day.date);
+                      const mergedForMonth = [
+                        ...dayTasks.map((t) => ({
+                          kind: 'task' as const,
+                          task: t,
+                          sort: new Date(t.scheduledAt).getTime(),
+                        })),
+                        ...dayGoogleMonth.map((ev) => ({
+                          kind: 'google' as const,
+                          ev,
+                          sort: googleAgendaEventLocalTimeRange(ev).start.getTime(),
+                        })),
+                      ].sort((a, b) => a.sort - b.sort);
                       const isToday = day.date.toDateString() === new Date().toDateString();
 
                       return (
@@ -1334,7 +2107,7 @@ export default function AgendaPage() {
                             setView('day');
                           }}
                           className={cn(
-                            'min-h-[120px] cursor-pointer p-2 transition-colors duration-200 hover:bg-muted/60',
+                            'hover:bg-muted/60 min-h-[120px] cursor-pointer p-2 transition-colors duration-200',
                             !day.isCurrentMonth && 'bg-muted/40',
                             isToday && 'bg-blue-50/50',
                           )}
@@ -1358,71 +2131,91 @@ export default function AgendaPage() {
                             )}
                           </div>
                           <div className="space-y-1" onClick={(e) => e.stopPropagation()}>
-                            {dayTasks.slice(0, 3).map((task) => {
-                              const eventColor = getEventColor(task);
-                              return (
-                                <div
-                                  key={task.id}
-                                  onClick={() => openTaskDetailModal(task)}
-                                  className={cn(
+                            {mergedForMonth.slice(0, 3).map((row) => {
+                              if (row.kind === 'google') {
+                                const ev = row.ev;
+                                return (
+                                  <div
+                                    key={`gcal-${ev.calendarId}-${ev.googleEventId}`}
+                                    onClick={() => {
+                                      if (ev.htmlLink) {
+                                        globalThis.open(ev.htmlLink, '_blank', 'noopener,noreferrer');
+                                      }
+                                    }}
+                                    className="block cursor-pointer rounded-md border border-solid px-2 py-1.5 text-xs transition-colors hover:brightness-[0.97]"
+                                    style={{
+                                      backgroundColor: gCalChrome.backgroundColor,
+                                      borderColor: gCalChrome.borderColor,
+                                      color: gCalChrome.color,
+                                    }}
+                                    title="Google Calendar"
+                                  >
+                                    <div className="flex items-center gap-1">
+                                      <Calendar
+                                        className="h-3.5 w-3.5 shrink-0"
+                                        style={{ color: gCalChrome.iconColor }}
+                                      />
+                                      <span className="min-w-0 flex-1 truncate font-semibold">
+                                        {ev.allDay ? 'Journée' : formatTime(ev.start)} {ev.title}
+                                      </span>
+                                    </div>
+                                  </div>
+                                );
+                              }
+                              const task = row.task;
+                              const colors = getEventColor(task);
+                              return (
+                                <div
+                                  key={task.id}
+                                  onClick={() => openTaskDetailModal(task)}
+                                  className={cn(
                                     'block cursor-pointer rounded-md px-2 py-1.5 text-xs transition-colors hover:opacity-90 hover:shadow-sm',
                                     task.completed && 'opacity-60',
                                   )}
                                   style={{
-                                    backgroundColor: `${eventColor}15`,
-                                    borderLeft: `3px solid ${eventColor}`,
+                                    backgroundColor: colors.bg,
+                                    borderLeft: `3px solid ${colors.border}`,
+                                    color: colors.text,
                                   }}
                                   title={`${TASK_TYPE_LABELS[task.type]} - ${task.title || 'Sans titre'}`}
                                 >
-                                  <div className="flex flex-col gap-0.5">
-                                    <div className="flex items-center gap-1.5">
-                                      {task.type === 'VIDEO_CONFERENCE' && (
-                                        <Video className="h-3 w-3 shrink-0 text-green-600" />
-                                      )}
-                                      {task.type === 'MEETING' && (
-                                        <Users className="h-3 w-3 shrink-0 text-blue-600" />
+                                  <div className="flex items-center gap-1">
+                                    <button
+                                      type="button"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        toggleTaskComplete(task.id, task.completed);
+                                      }}
+                                      className="shrink-0 rounded p-0.5 transition-colors hover:bg-white/70"
+                                      style={{ color: colors.icon }}
+                                      aria-label={
+                                        task.completed
+                                          ? 'Marquer comme non terminée'
+                                          : 'Marquer comme terminée'
+                                      }
+                                    >
+                                      {task.completed ? (
+                                        <CheckCircle2 className="h-3.5 w-3.5" />
+                                      ) : (
+                                        <Circle className="h-3.5 w-3.5" />
                                       )}
-                                      {task.type === 'CALL' && (
-                                        <Phone className="h-3 w-3 shrink-0 text-purple-600" />
+                                    </button>
+                                    <div
+                                      className={cn(
+                                        'min-w-0 flex-1 truncate leading-tight font-semibold',
+                                        task.completed && 'line-through opacity-60',
                                       )}
-                                      <div
-                                        className={cn(
-                                          'truncate leading-tight font-semibold',
-                                          task.completed
-                                            ? 'text-gray-400 line-through'
-                                            : 'text-gray-900',
-                                        )}
-                                      >
-                                        {formatTime(task.scheduledAt)}{' '}
-                                        {task.title || TASK_TYPE_LABELS[task.type]}
-                                      </div>
+                                    >
+                                      {formatTime(task.scheduledAt)}{' '}
+                                      {task.title || TASK_TYPE_LABELS[task.type]}
                                     </div>
-                                    {task.contact && (
-                                      <div
-                                        className={cn(
-                                          'truncate overflow-hidden text-[10px] leading-tight font-medium',
-                                          task.completed
-                                            ? 'text-gray-400 line-through'
-                                            : 'text-gray-700',
-                                        )}
-                                        title={`${task.contact.firstName} ${task.contact.lastName}`}
-                                      >
-                                        {task.contact.firstName} {task.contact.lastName}
-                                      </div>
-                                    )}
-                                    {showOtherUsersEvents &&
-                                      session?.user?.id !== task.assignedUser?.id && (
-                                        <div className="mt-0.5 text-right text-[9px] leading-tight text-gray-500 italic">
-                                          {task.assignedUser?.name || 'Ancien utilisateur'}
-                                        </div>
-                                      )}
                                   </div>
                                 </div>
                               );
                             })}
-                            {dayTasks.length > 3 && (
+                            {mergedForMonth.length > 3 && (
                               <div className="px-2 text-xs text-gray-500">
-                                +{dayTasks.length - 3} autre(s)
+                                +{mergedForMonth.length - 3} autre(s)
                               </div>
                             )}
                           </div>
@@ -1475,6 +2268,70 @@ export default function AgendaPage() {
                     })}
                   </div>
                   <div className="overflow-auto">
+                    {weekAllDayGoogleBars ? (
+                      <div className="flex shrink-0 border-b border-gray-200 bg-slate-50/90">
+                        <div
+                          className="flex w-[60px] shrink-0 items-start justify-end border-r border-gray-200 py-2 pr-2 text-right text-[10px] font-medium leading-tight tracking-wide text-gray-400 uppercase"
+                          style={{
+                            minHeight:
+                              weekAllDayGoogleBars.rowCount > 0
+                                ? `${24 + weekAllDayGoogleBars.rowCount * 28}px`
+                                : undefined,
+                          }}
+                        >
+                          <span className="max-w-[52px]">Toute la journée</span>
+                        </div>
+                        <div className="relative min-h-9 min-w-0 flex-1">
+                          <div className="pointer-events-none absolute inset-0 grid grid-cols-7">
+                            {Array.from({ length: 7 }, (_, i) => (
+                              <div
+                                key={`allday-gridline-${i}`}
+                                className={cn('border-l border-gray-100', i === 0 && 'border-l-0')}
+                              />
+                            ))}
+                          </div>
+                          <div
+                            className="relative z-[1] grid grid-cols-7 gap-y-1 px-0.5 py-1.5"
+                            style={{
+                              gridTemplateRows: `repeat(${weekAllDayGoogleBars.rowCount}, minmax(24px, auto))`,
+                            }}
+                          >
+                            {weekAllDayGoogleBars.placed.map(
+                              ({ ev, startIdx, endIdx, lane }) => {
+                                const span = endIdx - startIdx + 1;
+                                const mergedLabel = googleWeekMergedBarLabel(ev);
+                                return (
+                                  <button
+                                    key={`gcal-allday-span-${ev.calendarId}-${ev.googleEventId}`}
+                                    type="button"
+                                    className="flex min-h-6 min-w-0 cursor-pointer items-center gap-1 truncate rounded border border-solid px-1.5 py-1 text-left text-[11px] font-semibold shadow-sm transition-colors hover:brightness-[0.97]"
+                                    style={{
+                                      gridColumn: `${startIdx + 1} / span ${span}`,
+                                      gridRow: lane + 1,
+                                      backgroundColor: gCalChrome.backgroundColor,
+                                      borderColor: gCalChrome.borderColor,
+                                      color: gCalChrome.color,
+                                    }}
+                                    onClick={() => {
+                                      if (ev.htmlLink) {
+                                        globalThis.open(ev.htmlLink, '_blank', 'noopener,noreferrer');
+                                      }
+                                    }}
+                                    title={mergedLabel}
+                                  >
+                                    <Calendar
+                                      className="h-3 w-3 shrink-0"
+                                      style={{ color: gCalChrome.iconColor }}
+                                    />
+                                    <span className="min-w-0 truncate">{mergedLabel}</span>
+                                  </button>
+                                );
+                              },
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ) : null}
                     <div
                       className="relative grid"
                       style={{ gridTemplateColumns: '60px repeat(7, 1fr)' }}
@@ -1543,6 +2400,35 @@ export default function AgendaPage() {
                       {getWeekDays().map((day) => {
                         // Récupérer toutes les tâches du jour (incluant celles qui continuent depuis un jour précédent)
                         const dayTasks = getTasksForDate(day);
+                        const dayGoogleTimed = getGoogleEventsForDate(day).filter((ev) => {
+                          if (ev.allDay) return false;
+                          const { start, end } = googleAgendaEventLocalTimeRange(ev);
+                          const startKey = localCalendarDateKey(start);
+                          const endKey = localCalendarDateKey(end);
+                          // Les événements horaires multi-jours sont rendus dans la bande haute.
+                          return startKey === endKey;
+                        });
+                        const weekCombinedEntries = [
+                          ...dayTasks.map((task) => {
+                            const taskStart = new Date(task.scheduledAt);
+                            const duration = task.durationMinutes || 30;
+                            return {
+                              id: task.id,
+                              payload: { kind: 'task' as const, task },
+                              startDate: taskStart,
+                              endDate: new Date(taskStart.getTime() + duration * 60000),
+                            };
+                          }),
+                          ...dayGoogleTimed.map((ev) => {
+                            const { start, end } = googleAgendaEventLocalTimeRange(ev);
+                            return {
+                              id: `gcal-${ev.calendarId}-${ev.googleEventId}`,
+                              payload: { kind: 'google' as const, event: ev },
+                              startDate: start,
+                              endDate: end,
+                            };
+                          }),
+                        ];
 
                         const isToday =
                           currentTime && day.toDateString() === currentTime.toDateString();
@@ -1577,139 +2463,177 @@ export default function AgendaPage() {
                                 </div>
                               )}
 
-                            {/* Afficher les tâches positionnées absolument */}
-                            {dayTasks.map((task) => {
-                              const taskStart = new Date(task.scheduledAt);
-                              const duration = task.durationMinutes || 30;
-                              const taskEnd = new Date(taskStart.getTime() + duration * 60000);
-
-                              // Début et fin du jour actuel
-                              const dayStart = new Date(day);
-                              dayStart.setHours(0, 0, 0, 0);
-                              const dayEnd = new Date(day);
-                              dayEnd.setHours(23, 59, 59, 999);
-
-                              // Début de la grille visible (7h)
-                              const gridStart = new Date(day);
-                              gridStart.setHours(HOURS[0], 0, 0, 0);
-
-                              // Fin de la grille visible (dernière heure + 1)
-                              const gridEnd = new Date(day);
-                              gridEnd.setHours(HOURS[HOURS.length - 1] + 1, 0, 0, 0);
-
-                              // Calculer l'heure effective de début pour ce jour (dans la grille visible)
-                              let effectiveStart = taskStart < dayStart ? dayStart : taskStart;
-                              effectiveStart =
-                                effectiveStart < gridStart ? gridStart : effectiveStart;
-
-                              let effectiveEnd = taskEnd > dayEnd ? dayEnd : taskEnd;
-                              effectiveEnd = effectiveEnd > gridEnd ? gridEnd : effectiveEnd;
-
-                              // Calculer les minutes depuis le début du jour
-                              const startHour = effectiveStart.getHours();
-                              const startMinute = effectiveStart.getMinutes();
-                              const startMinutes = startHour * 60 + startMinute;
-
-                              // Calculer la durée effective pour ce jour (en minutes)
-                              const effectiveDuration = Math.round(
-                                (effectiveEnd.getTime() - effectiveStart.getTime()) / 60000,
-                              );
-
-                              const startKey = `${startMinutes}`;
-                              const sameSlotTasks = dayTasks.filter((t) => {
-                                const tStart = new Date(t.scheduledAt);
-                                let tEffectiveStart = tStart < dayStart ? dayStart : tStart;
-                                tEffectiveStart =
-                                  tEffectiveStart < gridStart ? gridStart : tEffectiveStart;
-                                const th = tEffectiveStart.getHours();
-                                const tm = tEffectiveStart.getMinutes();
-                                const ts = th * 60 + tm;
-                                return ts === startMinutes;
-                              });
-                              const slotIndex = sameSlotTasks.findIndex((t) => t.id === task.id);
-                              const slotCount = sameSlotTasks.length || 1;
+                            {/* Afficher les tâches et événements Google positionnés absolument */}
+                            {layoutOverlappingBySchedule(
+                              weekCombinedEntries,
+                              day,
+                              HOURS[0],
+                              HOURS[HOURS.length - 1] + 1,
+                            ).map((layout) => {
+                              const { payload, startMinutes, endMinutes, column, totalColumns } =
+                                layout;
 
                               const top = (startMinutes - HOURS[0] * 60) * (slotHeight / 60);
-                              const height = effectiveDuration * (slotHeight / 60);
+                              const height = Math.max((endMinutes - startMinutes) * (slotHeight / 60), 24);
+
+                              const widthPercent = 100 / totalColumns;
+                              const leftPercent = column * widthPercent;
+
+                              if (payload.kind === 'google') {
+                                const ev = payload.event;
+                                const { start: gStart, end: gEnd } =
+                                  googleAgendaEventLocalTimeRange(ev);
+                                const gRange = `${gStart.toLocaleTimeString('fr-FR', {
+                                  hour: '2-digit',
+                                  minute: '2-digit',
+                                })} – ${gEnd.toLocaleTimeString('fr-FR', {
+                                  hour: '2-digit',
+                                  minute: '2-digit',
+                                })}`;
+                                const overlapTooltip = totalColumns > 1;
+                                return (
+                                  <WeekAgendaOverlapTooltip
+                                    key={`gcal-${ev.calendarId}-${ev.googleEventId}`}
+                                    show={overlapTooltip}
+                                    title={ev.title || 'Événement Google Calendar'}
+                                    description={`${gRange} · Google Calendar`}
+                                  >
+                                    <div
+                                      className="absolute z-10 cursor-pointer overflow-hidden rounded-md border border-solid px-2 py-1 text-xs shadow-sm transition-[filter,box-shadow] hover:z-20 hover:brightness-[0.97]"
+                                      style={{
+                                        top: `${top}px`,
+                                        height: `${height}px`,
+                                        minHeight: '24px',
+                                        left: `calc(${leftPercent}% + 2px)`,
+                                        width: `calc(${widthPercent}% - 4px)`,
+                                        backgroundColor: gCalChrome.backgroundColor,
+                                        borderColor: gCalChrome.borderColor,
+                                        color: gCalChrome.color,
+                                      }}
+                                      onClick={() => {
+                                        if (ev.htmlLink) {
+                                          globalThis.open(ev.htmlLink, '_blank', 'noopener,noreferrer');
+                                        }
+                                      }}
+                                      title={
+                                        overlapTooltip
+                                          ? undefined
+                                          : `Événement Google Calendar — ${ev.title} · ${gRange}`
+                                      }
+                                    >
+                                      <div className="flex min-w-0 items-center gap-1">
+                                        <Calendar
+                                          className="h-3 w-3 shrink-0"
+                                          style={{ color: gCalChrome.iconColor }}
+                                        />
+                                        <span className="truncate font-semibold">{ev.title}</span>
+                                      </div>
+                                    </div>
+                                  </WeekAgendaOverlapTooltip>
+                                );
+                              }
 
-                              const widthPercent = 100 / slotCount;
-                              const leftPercent = slotIndex * widthPercent;
+                              const task = payload.task;
+                              const colors = getEventColor(task);
+                              const taskStartDt = new Date(task.scheduledAt);
+                              const taskEndDt = new Date(
+                                taskStartDt.getTime() +
+                                  (task.durationMinutes || 30) * 60000,
+                              );
+                              const taskRange = `${formatTime(task.scheduledAt)} – ${taskEndDt.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`;
+                              const taskTitleLine = task.title || TASK_TYPE_LABELS[task.type];
+                              const contactLine = task.contact
+                                ? [task.contact.firstName, task.contact.lastName]
+                                    .filter(Boolean)
+                                    .join(' ')
+                                    .trim()
+                                : '';
+                              const assigneeName =
+                                task.assignedUser?.name?.trim() || 'Ancien utilisateur';
+                              const taskTipDesc = [
+                                TASK_TYPE_LABELS[task.type],
+                                taskRange,
+                                contactLine || null,
+                              ]
+                                .filter(Boolean)
+                                .join(' · ');
+                              const overlapTooltip = totalColumns > 1;
 
-                              const eventColor = getEventColor(task);
                               return (
-                                <div
-                                  key={`${task.id}-${startKey}`}
-                                  className={cn(
-                                    'absolute z-10 cursor-pointer rounded-md px-2 py-1.5 text-xs shadow-sm transition-all hover:shadow-md',
-                                    task.completed && 'opacity-60',
-                                  )}
-                                  style={{
-                                    top: `${top}px`,
-                                    height: `${height}px`,
-                                    minHeight: '32px',
-                                    backgroundColor: `${eventColor}15`,
-                                    borderLeft: `3px solid ${eventColor}`,
-                                    left: `calc(${leftPercent}% + 4px)`,
-                                    width: `calc(${widthPercent}% - 8px)`,
-                                  }}
-                                  onClick={() => openTaskDetailModal(task)}
+                                <WeekAgendaOverlapTooltip
+                                  key={task.id}
+                                  show={overlapTooltip}
+                                  title={taskTitleLine}
+                                  description={taskTipDesc}
+                                  footer={`Par ${assigneeName}`}
                                 >
-                                  <div className="flex h-full flex-col justify-between gap-0.5">
-                                    <div className="flex items-start gap-1.5">
-                                      {task.type === 'VIDEO_CONFERENCE' && (
-                                        <Video className="mt-0.5 h-3 w-3 shrink-0 text-green-600" />
-                                      )}
-                                      {task.type === 'MEETING' && (
-                                        <Users className="mt-0.5 h-3 w-3 shrink-0 text-blue-600" />
-                                      )}
-                                      {task.type === 'CALL' && (
-                                        <Phone className="mt-0.5 h-3 w-3 shrink-0 text-purple-600" />
-                                      )}
-                                      <div
-                                        className={cn(
-                                          'flex-1 truncate leading-tight font-semibold',
-                                          task.completed
-                                            ? 'text-gray-400 line-through'
-                                            : 'text-gray-900',
-                                        )}
-                                        title={task.title || TASK_TYPE_LABELS[task.type]}
-                                      >
-                                        {task.title || TASK_TYPE_LABELS[task.type]}
-                                      </div>
-                                      {task.contact && (
-                                        <Link
-                                          href={`/contacts/${task.contact.id}`}
-                                          onClick={(e) => e.stopPropagation()}
-                                          className="mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-800 transition-colors hover:bg-blue-200"
-                                          title="Voir le contact"
+                                  <div
+                                    className={cn(
+                                      'absolute z-10 cursor-pointer overflow-hidden rounded-md px-2 py-1 text-xs shadow-sm transition-shadow hover:z-20 hover:shadow-md',
+                                      task.completed && 'opacity-60',
+                                    )}
+                                    style={{
+                                      top: `${top}px`,
+                                      height: `${height}px`,
+                                      minHeight: '24px',
+                                      backgroundColor: colors.bg,
+                                      borderLeft: `3px solid ${colors.border}`,
+                                      color: colors.text,
+                                      left: `calc(${leftPercent}% + 2px)`,
+                                      width: `calc(${widthPercent}% - 4px)`,
+                                    }}
+                                    onClick={() => openTaskDetailModal(task)}
+                                  >
+                                    <div className="flex h-full flex-col overflow-hidden">
+                                      <div className="flex min-w-0 items-start gap-1">
+                                        <button
+                                          type="button"
+                                          onClick={(e) => {
+                                            e.stopPropagation();
+                                            toggleTaskComplete(task.id, task.completed);
+                                          }}
+                                          className="mt-0.5 shrink-0 rounded p-0.5 transition-colors hover:bg-white/40"
+                                          style={{ color: colors.icon }}
+                                          aria-label={
+                                            task.completed
+                                              ? 'Marquer comme non terminée'
+                                              : 'Marquer comme terminée'
+                                          }
                                         >
-                                          <Eye className="h-3 w-3" />
-                                        </Link>
-                                      )}
-                                    </div>
-                                    {/* <div className="flex min-w-0 flex-col gap-0.5">
-                                      {task.contact && (
+                                          {task.completed ? (
+                                            <CheckCircle2 className="h-3 w-3" />
+                                          ) : (
+                                            <Circle className="h-3 w-3" />
+                                          )}
+                                        </button>
                                         <div
                                           className={cn(
-                                            'truncate overflow-hidden text-[10px] leading-tight font-medium',
-                                            task.completed
-                                              ? 'text-gray-400 line-through'
-                                              : 'text-gray-700',
+                                            'min-w-0 flex-1 truncate leading-tight font-semibold',
+                                            task.completed && 'line-through opacity-60',
                                           )}
-                                          title={`${task.contact.firstName} ${task.contact.lastName}`}
+                                          title={
+                                            overlapTooltip
+                                              ? undefined
+                                              : task.title || TASK_TYPE_LABELS[task.type]
+                                          }
                                         >
-                                          {task.contact.firstName} {task.contact.lastName}
+                                          {task.title || TASK_TYPE_LABELS[task.type]}
                                         </div>
-                                      )}
-                                      {showOtherUsersEvents &&
-                                        session?.user?.id !== task.assignedUser?.id && (
-                                          <div className="text-right text-[9px] leading-tight text-gray-500 italic">
-                                            {task.assignedUser?.name || 'Ancien utilisateur'}
-                                          </div>
+                                        {task.contact && (
+                                          <Link
+                                            href={`/contacts/${task.contact.id}`}
+                                            onClick={(e) => e.stopPropagation()}
+                                            className="mt-0.5 inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-white/40"
+                                            style={{ color: colors.icon }}
+                                            title="Voir le contact"
+                                          >
+                                            <Eye className="h-2.5 w-2.5" />
+                                          </Link>
                                         )}
-                                    </div> */}
+                                      </div>
+                                    </div>
                                   </div>
-                                </div>
+                                </WeekAgendaOverlapTooltip>
                               );
                             })}
 
@@ -1734,133 +2658,207 @@ export default function AgendaPage() {
                 Toutes les tâches de la semaine
               </h2>
               <div className="space-y-3">
-                {filteredTasks.length === 0 ? (
+                {filteredTasks.length === 0 && googleEventsInDateRange.length === 0 ? (
                   <div className="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
-                    <p className="text-gray-500">Aucune tâche pour cette semaine</p>
+                    <p className="text-gray-500">Aucun événement pour cette semaine</p>
                   </div>
                 ) : (
-                  filteredTasks.map((task) => {
-                    const TaskContent = (
-                      <div className="flex items-start justify-between">
-                        <div className="flex-1">
-                          <div className="flex items-center gap-2">
-                            <button
-                              type="button"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                toggleTaskComplete(task.id, task.completed);
-                              }}
-                              className="cursor-pointer text-gray-400 hover:text-blue-600"
-                            >
-                              {task.completed ? (
-                                <CheckCircle2 className="h-5 w-5 text-blue-600" />
-                              ) : (
-                                <Circle className="h-5 w-5" />
-                              )}
-                            </button>
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2">
-                                {task.type === 'VIDEO_CONFERENCE' && (
-                                  <Video className="h-4 w-4 text-green-600" />
+                  <>
+                    {filteredTasks.map((task) => {
+                      const TaskContent = (
+                        <div className="flex items-start justify-between">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2">
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  toggleTaskComplete(task.id, task.completed);
+                                }}
+                                className="cursor-pointer text-gray-400 hover:text-blue-600"
+                              >
+                                {task.completed ? (
+                                  <CheckCircle2 className="h-5 w-5 text-blue-600" />
+                                ) : (
+                                  <Circle className="h-5 w-5" />
                                 )}
-                                {task.type === 'MEETING' && (
-                                  <Users className="h-4 w-4 text-blue-600" />
+                              </button>
+                              <div className="flex-1">
+                                <div className="flex items-center gap-2">
+                                  {task.type === 'VIDEO_CONFERENCE' && (
+                                    <Video className="h-4 w-4 text-green-600" />
+                                  )}
+                                  {task.type === 'MEETING' && (
+                                    <Users className="h-4 w-4 text-blue-600" />
+                                  )}
+                                  {task.type === 'CALL' && (
+                                    <Phone className="h-4 w-4 text-purple-600" />
+                                  )}
+                                  <span className="text-sm font-medium text-gray-600">
+                                    {TASK_TYPE_LABELS[task.type]}
+                                  </span>
+                                </div>
+                                <h3
+                                  className={cn(
+                                    'mt-1 text-base font-semibold',
+                                    task.completed ? 'text-gray-400 line-through' : 'text-gray-900',
+                                  )}
+                                >
+                                  {task.title || TASK_TYPE_LABELS[task.type]}
+                                </h3>
+                                {task.contact && (
+                                  <div className="mt-2 inline-flex max-w-full items-center gap-1.5 overflow-hidden rounded-md bg-blue-50 px-2.5 py-1 text-sm font-medium text-blue-700">
+                                    <User className="h-4 w-4 shrink-0" />
+                                    <span className="truncate">
+                                      {task.contact.firstName} {task.contact.lastName}
+                                    </span>
+                                    <Link
+                                      href={`/contacts/${task.contact.id}`}
+                                      onClick={(e) => e.stopPropagation()}
+                                      className="ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200"
+                                      title="Voir le contact"
+                                    >
+                                      <Eye className="h-3 w-3" />
+                                    </Link>
+                                  </div>
                                 )}
-                                {task.type === 'CALL' && (
-                                  <Phone className="h-4 w-4 text-purple-600" />
+                                {task.googleMeetLink && (
+                                  <div className="mt-2 flex flex-wrap items-center gap-2">
+                                    <button
+                                      type="button"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        if (task.googleMeetLink) {
+                                          globalThis.open(
+                                            task.googleMeetLink,
+                                            '_blank',
+                                            'noopener,noreferrer',
+                                          );
+                                        }
+                                      }}
+                                      className="inline-flex items-center gap-1.5 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
+                                    >
+                                      <Video className="h-4 w-4" />
+                                      <span>Rejoindre Google Meet</span>
+                                      <ExternalLink className="h-3 w-3" />
+                                    </button>
+                                    <button
+                                      type="button"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        openEditMeetModal(task);
+                                      }}
+                                      className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                                    >
+                                      Modifier le rendez-vous
+                                    </button>
+                                  </div>
                                 )}
-                                <span className="text-sm font-medium text-gray-600">
-                                  {TASK_TYPE_LABELS[task.type]}
-                                </span>
+                                <div className="mt-2 flex items-center gap-4 text-sm text-gray-500">
+                                  <div className="flex items-center gap-1">
+                                    <Clock className="h-4 w-4" />
+                                    {formatTime(task.scheduledAt)}
+                                  </div>
+                                  <div className="flex items-center gap-1">
+                                    <Calendar className="h-4 w-4" />
+                                    {new Date(task.scheduledAt).toLocaleDateString('fr-FR')}
+                                  </div>
+                                  {isAdmin && (
+                                    <div className="flex items-center gap-1">
+                                      <User className="h-4 w-4" />
+                                      {task.assignedUser?.name || 'Ancien utilisateur'}
+                                    </div>
+                                  )}
+                                </div>
                               </div>
-                              <h3
-                                className={cn(
-                                  'mt-1 text-base font-semibold',
-                                  task.completed ? 'text-gray-400 line-through' : 'text-gray-900',
-                                )}
+                            </div>
+                          </div>
+                        </div>
+                      );
+
+                      return (
+                        <div
+                          key={task.id}
+                          className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-blue-300 hover:shadow-md"
+                          onClick={() => openTaskDetailModal(task)}
+                        >
+                          {TaskContent}
+                        </div>
+                      );
+                    })}
+                    {googleEventsInDateRange.length > 0 && (
+                      <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                        <button
+                          type="button"
+                          onClick={() => setWeekGoogleEventsOpen((o) => !o)}
+                          className="flex w-full items-center justify-between gap-3 px-5 py-3.5 text-left transition-colors hover:bg-gray-50 sm:px-6"
+                          aria-expanded={weekGoogleEventsOpen}
+                        >
+                          <div className="flex min-w-0 flex-1 items-center gap-2.5">
+                            <Calendar className="h-5 w-5 shrink-0 text-blue-600" />
+                            <span className="font-semibold text-gray-900">
+                              Événements Google Calendar
+                            </span>
+                            <span className="shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
+                              {googleEventsInDateRange.length}
+                            </span>
+                          </div>
+                          <ChevronDown
+                            className={cn(
+                              'h-5 w-5 shrink-0 text-gray-500 transition-transform duration-200',
+                              weekGoogleEventsOpen && 'rotate-180',
+                            )}
+                          />
+                        </button>
+                        {weekGoogleEventsOpen && (
+                          <div className="space-y-3 border-t border-gray-100 bg-slate-50/80 px-5 py-4 sm:px-6">
+                            {googleEventsInDateRange.map((ev) => (
+                              <div
+                                key={`gcal-week-${ev.calendarId}-${ev.googleEventId}`}
+                                className="cursor-pointer rounded-xl border border-solid px-5 py-4 shadow-sm transition-colors hover:brightness-[0.98] sm:px-6"
+                                style={{
+                                  backgroundColor: gCalCardChrome.backgroundColor,
+                                  borderColor: gCalCardChrome.borderColor,
+                                }}
+                                onClick={() => {
+                                  if (ev.htmlLink) {
+                                    globalThis.open(ev.htmlLink, '_blank', 'noopener,noreferrer');
+                                  }
+                                }}
                               >
-                                {task.title || TASK_TYPE_LABELS[task.type]}
-                              </h3>
-                              {task.contact && (
-                                <div className="mt-2 inline-flex max-w-full items-center gap-1.5 overflow-hidden rounded-md bg-blue-50 px-2.5 py-1 text-sm font-medium text-blue-700">
-                                  <User className="h-4 w-4 shrink-0" />
-                                  <span className="truncate">
-                                    {task.contact.firstName} {task.contact.lastName}
-                                  </span>
-                                  <Link
-                                    href={`/contacts/${task.contact.id}`}
-                                    onClick={(e) => e.stopPropagation()}
-                                    className="ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                    title="Voir le contact"
-                                  >
-                                    <Eye className="h-3 w-3" />
-                                  </Link>
-                                </div>
-                              )}
-                              {task.googleMeetLink && (
-                                <div className="mt-2 flex flex-wrap items-center gap-2">
-                                  <button
-                                    type="button"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      if (task.googleMeetLink) {
-                                        globalThis.open(
-                                          task.googleMeetLink,
-                                          '_blank',
-                                          'noopener,noreferrer',
-                                        );
-                                      }
-                                    }}
-                                    className="inline-flex items-center gap-1.5 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
-                                  >
-                                    <Video className="h-4 w-4" />
-                                    <span>Rejoindre Google Meet</span>
-                                    <ExternalLink className="h-3 w-3" />
-                                  </button>
-                                  <button
-                                    type="button"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      openEditMeetModal(task);
-                                    }}
-                                    className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
-                                  >
-                                    Modifier le rendez-vous
-                                  </button>
-                                </div>
-                              )}
-                              <div className="mt-2 flex items-center gap-4 text-sm text-gray-500">
-                                <div className="flex items-center gap-1">
-                                  <Clock className="h-4 w-4" />
-                                  {formatTime(task.scheduledAt)}
-                                </div>
-                                <div className="flex items-center gap-1">
+                                <div
+                                  className="flex items-center gap-2 text-sm font-medium"
+                                  style={{ color: gCalCardChrome.iconColor }}
+                                >
                                   <Calendar className="h-4 w-4" />
-                                  {new Date(task.scheduledAt).toLocaleDateString('fr-FR')}
+                                  <span>Google Calendar</span>
                                 </div>
-                                {isAdmin && (
+                                <h3
+                                  className="mt-1 text-base font-semibold"
+                                  style={{ color: gCalCardChrome.color }}
+                                >
+                                  {ev.title}
+                                </h3>
+                                <div
+                                  className="mt-2 flex flex-wrap items-center gap-4 text-sm"
+                                  style={{ color: gCalCardChrome.iconColor }}
+                                >
+                                  <div className="flex items-center gap-1">
+                                    <Clock className="h-4 w-4" />
+                                    {ev.allDay ? 'Journée entière' : formatTime(ev.start)}
+                                  </div>
                                   <div className="flex items-center gap-1">
-                                    <User className="h-4 w-4" />
-                                    {task.assignedUser?.name || 'Ancien utilisateur'}
+                                    <Calendar className="h-4 w-4" />
+                                    {new Date(ev.start).toLocaleDateString('fr-FR')}
                                   </div>
-                                )}
+                                </div>
                               </div>
-                            </div>
+                            ))}
                           </div>
-                        </div>
-                      </div>
-                    );
-
-                    return (
-                      <div
-                        key={task.id}
-                        className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-blue-300 hover:shadow-md"
-                        onClick={() => toggleTaskComplete(task.id, task.completed)}
-                      >
-                        {TaskContent}
+                        )}
                       </div>
-                    );
-                  })
+                    )}
+                  </>
                 )}
               </div>
             </div>
@@ -1875,23 +2873,273 @@ export default function AgendaPage() {
                 </div>
               ) : (
                 <div className="space-y-3 p-4 sm:p-6 lg:p-8">
-                  {filteredTasks.length === 0 ? (
+                  {filteredTasks.length === 0 && googleForDayList.length === 0 ? (
                     <div className="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
-                      <p className="text-gray-500">Aucune tâche pour cette journée</p>
+                      <p className="text-gray-500">Aucun événement pour cette journée</p>
                     </div>
                   ) : (
-                    filteredTasks.map((task) => {
+                    <>
+                      {filteredTasks.map((task) => {
+                        const TaskContent = (
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              <div className="flex items-center gap-2">
+                                <button
+                                  type="button"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    toggleTaskComplete(task.id, task.completed);
+                                  }}
+                                  className="cursor-pointer text-gray-400 hover:text-blue-600"
+                                >
+                                  {task.completed ? (
+                                    <CheckCircle2 className="h-5 w-5 text-blue-600" />
+                                  ) : (
+                                    <Circle className="h-5 w-5" />
+                                  )}
+                                </button>
+                                <div className="flex-1">
+                                  <div className="flex items-center gap-2">
+                                    {task.type === 'VIDEO_CONFERENCE' && (
+                                      <Video className="h-4 w-4 text-green-600" />
+                                    )}
+                                    {task.type === 'MEETING' && (
+                                      <Users className="h-4 w-4 text-blue-600" />
+                                    )}
+                                    {task.type === 'CALL' && (
+                                      <Phone className="h-4 w-4 text-purple-600" />
+                                    )}
+                                    <span className="text-sm font-medium text-gray-600">
+                                      {TASK_TYPE_LABELS[task.type]}
+                                    </span>
+                                  </div>
+                                  <h3
+                                    className={cn(
+                                      'mt-1 text-base font-semibold',
+                                      task.completed ? 'text-gray-400 line-through' : 'text-gray-900',
+                                    )}
+                                  >
+                                    {task.title || TASK_TYPE_LABELS[task.type]}
+                                  </h3>
+                                  {task.contact && (
+                                    <div className="mt-2 inline-flex max-w-full items-center gap-1.5 overflow-hidden rounded-md bg-blue-50 px-2.5 py-1 text-sm font-medium text-blue-700">
+                                      <User className="h-4 w-4 shrink-0" />
+                                      <span className="truncate">
+                                        {task.contact.firstName} {task.contact.lastName}
+                                      </span>
+                                    </div>
+                                  )}
+                                  {task.googleMeetLink && (
+                                    <div className="mt-2 flex flex-wrap items-center gap-2">
+                                      <button
+                                        type="button"
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          if (task.googleMeetLink) {
+                                            globalThis.open(
+                                              task.googleMeetLink,
+                                              '_blank',
+                                              'noopener,noreferrer',
+                                            );
+                                          }
+                                        }}
+                                        className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
+                                      >
+                                        <Video className="h-4 w-4" />
+                                        <span>Rejoindre Google Meet</span>
+                                        <ExternalLink className="h-3 w-3" />
+                                      </button>
+                                      <button
+                                        type="button"
+                                        onClick={(e) => {
+                                          e.stopPropagation();
+                                          openEditMeetModal(task);
+                                        }}
+                                        className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
+                                      >
+                                        Modifier le rendez-vous
+                                      </button>
+                                    </div>
+                                  )}
+                                  <div className="mt-2 flex items-center gap-4 text-sm text-gray-500">
+                                    <div className="flex items-center gap-1">
+                                      <Clock className="h-4 w-4" />
+                                      {formatTime(task.scheduledAt)}
+                                    </div>
+                                    <div className="flex items-center gap-1">
+                                      <Calendar className="h-4 w-4" />
+                                      {new Date(task.scheduledAt).toLocaleDateString('fr-FR')}
+                                    </div>
+                                    {isAdmin && (
+                                      <div className="flex items-center gap-1">
+                                        <User className="h-4 w-4" />
+                                        {task.assignedUser?.name || 'Ancien utilisateur'}
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        );
+
+                        return (
+                          <div
+                            key={task.id}
+                            className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-blue-300 hover:shadow-md"
+                            onClick={() => openTaskDetailModal(task)}
+                          >
+                            {TaskContent}
+                          </div>
+                        );
+                      })}
+                      {googleForDayList.length > 0 && (
+                        <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                          <button
+                            type="button"
+                            onClick={() => setDayGoogleEventsOpen((o) => !o)}
+                            className="flex w-full items-center justify-between gap-3 px-5 py-3.5 text-left transition-colors hover:bg-gray-50 sm:px-6"
+                            aria-expanded={dayGoogleEventsOpen}
+                          >
+                            <div className="flex min-w-0 flex-1 items-center gap-2.5">
+                              <Calendar className="h-5 w-5 shrink-0 text-blue-600" />
+                              <span className="font-semibold text-gray-900">
+                                Événements Google Calendar
+                              </span>
+                              <span className="shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
+                                {googleForDayList.length}
+                              </span>
+                            </div>
+                            <ChevronDown
+                              className={cn(
+                                'h-5 w-5 shrink-0 text-gray-500 transition-transform duration-200',
+                                dayGoogleEventsOpen && 'rotate-180',
+                              )}
+                            />
+                          </button>
+                          {dayGoogleEventsOpen && (
+                            <div className="space-y-3 border-t border-gray-100 bg-slate-50/80 px-5 py-4 sm:px-6">
+                              {googleForDayListAllDay.length > 0 && (
+                                <div
+                                  className="rounded-xl border border-solid p-3 shadow-sm"
+                                  style={{
+                                    backgroundColor: gCalCardChrome.backgroundColor,
+                                    borderColor: gCalCardChrome.borderColor,
+                                  }}
+                                >
+                                  <p
+                                    className="mb-2 text-xs font-semibold tracking-wide uppercase"
+                                    style={{ color: gCalCardChrome.iconColor }}
+                                  >
+                                    Toute la journée
+                                  </p>
+                                  <div className="flex flex-col gap-2">
+                                    {googleForDayListAllDay.map((ev) => (
+                                      <button
+                                        key={`gcal-day-allday-${ev.calendarId}-${ev.googleEventId}`}
+                                        type="button"
+                                        className="w-full cursor-pointer rounded-lg border border-solid px-3 py-2 text-left text-sm font-semibold shadow-sm transition-colors hover:brightness-[0.97]"
+                                        style={{
+                                          backgroundColor: gCalChrome.backgroundColor,
+                                          borderColor: gCalChrome.borderColor,
+                                          color: gCalChrome.color,
+                                        }}
+                                        onClick={() => {
+                                          if (ev.htmlLink) {
+                                            globalThis.open(
+                                              ev.htmlLink,
+                                              '_blank',
+                                              'noopener,noreferrer',
+                                            );
+                                          }
+                                        }}
+                                      >
+                                        <div className="flex items-center gap-2">
+                                          <Calendar
+                                            className="h-4 w-4 shrink-0"
+                                            style={{ color: gCalChrome.iconColor }}
+                                          />
+                                          <span className="min-w-0 flex-1 truncate">{ev.title}</span>
+                                        </div>
+                                      </button>
+                                    ))}
+                                  </div>
+                                </div>
+                              )}
+                              {googleForDayListTimed.map((ev) => (
+                                <div
+                                  key={`gcal-day-${ev.calendarId}-${ev.googleEventId}`}
+                                  className="cursor-pointer rounded-xl border border-solid px-5 py-4 shadow-sm transition-colors hover:brightness-[0.98] sm:px-6"
+                                  style={{
+                                    backgroundColor: gCalCardChrome.backgroundColor,
+                                    borderColor: gCalCardChrome.borderColor,
+                                  }}
+                                  onClick={() => {
+                                    if (ev.htmlLink) {
+                                      globalThis.open(ev.htmlLink, '_blank', 'noopener,noreferrer');
+                                    }
+                                  }}
+                                >
+                                  <div
+                                    className="flex items-center gap-2 text-sm font-medium"
+                                    style={{ color: gCalCardChrome.iconColor }}
+                                  >
+                                    <Calendar className="h-4 w-4" />
+                                    <span>Google Calendar</span>
+                                  </div>
+                                  <h3
+                                    className="mt-1 text-base font-semibold"
+                                    style={{ color: gCalCardChrome.color }}
+                                  >
+                                    {ev.title}
+                                  </h3>
+                                  <div
+                                    className="mt-2 flex flex-wrap items-center gap-4 text-sm"
+                                    style={{ color: gCalCardChrome.iconColor }}
+                                  >
+                                    <div className="flex items-center gap-1">
+                                      <Clock className="h-4 w-4" />
+                                      {ev.allDay ? 'Journée entière' : formatTime(ev.start)}
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Liste des tâches du mois (en bas) — même padding horizontal que la vue semaine */}
+          {view === 'month' && !loading && (
+            <div className="mt-6 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
+              <h2 className="mb-4 text-lg font-semibold text-gray-900">
+                Toutes les tâches du mois
+              </h2>
+              <div className="space-y-3">
+                {filteredTasks.length === 0 && googleEventsInDateRange.length === 0 ? (
+                  <div className="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
+                    <p className="text-gray-500">Aucun événement pour ce mois</p>
+                  </div>
+                ) : (
+                  <>
+                    {filteredTasks.map((task) => {
                       const TaskContent = (
-                        <div className="flex items-start justify-between">
-                          <div className="flex-1">
-                            <div className="flex items-center gap-2">
+                        <div className="flex items-start justify-between gap-4">
+                          <div className="min-w-0 flex-1">
+                            <div className="flex items-start gap-3">
                               <button
                                 type="button"
                                 onClick={(e) => {
                                   e.stopPropagation();
                                   toggleTaskComplete(task.id, task.completed);
                                 }}
-                                className="cursor-pointer text-gray-400 hover:text-blue-600"
+                                className="mt-0.5 shrink-0 cursor-pointer text-gray-400 hover:text-blue-600"
                               >
                                 {task.completed ? (
                                   <CheckCircle2 className="h-5 w-5 text-blue-600" />
@@ -1928,6 +3176,14 @@ export default function AgendaPage() {
                                     <span className="truncate">
                                       {task.contact.firstName} {task.contact.lastName}
                                     </span>
+                                    <Link
+                                      href={`/contacts/${task.contact.id}`}
+                                      onClick={(e) => e.stopPropagation()}
+                                      className="ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200"
+                                      title="Voir le contact"
+                                    >
+                                      <Eye className="h-3 w-3" />
+                                    </Link>
                                   </div>
                                 )}
                                 {task.googleMeetLink && (
@@ -1944,7 +3200,7 @@ export default function AgendaPage() {
                                           );
                                         }
                                       }}
-                                      className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
+                                      className="inline-flex items-center gap-1.5 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
                                     >
                                       <Video className="h-4 w-4" />
                                       <span>Rejoindre Google Meet</span>
@@ -1987,153 +3243,86 @@ export default function AgendaPage() {
                       return (
                         <div
                           key={task.id}
-                          className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-blue-300 hover:shadow-md"
+                          className="cursor-pointer rounded-xl border border-gray-200 bg-white px-5 py-4 shadow-sm transition-colors hover:border-blue-300 hover:shadow-md sm:px-6"
                           onClick={() => openTaskDetailModal(task)}
                         >
                           {TaskContent}
                         </div>
                       );
-                    })
-                  )}
-                </div>
-              )}
-            </>
-          )}
-
-          {/* Liste des tâches du mois (en bas) */}
-          {view === 'month' && !loading && (
-            <div className="mt-6">
-              <h2 className="mb-4 text-lg font-semibold text-gray-900">
-                Toutes les tâches du mois
-              </h2>
-              <div className="space-y-3">
-                {filteredTasks.length === 0 ? (
-                  <div className="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
-                    <p className="text-gray-500">Aucune tâche pour ce mois</p>
-                  </div>
-                ) : (
-                  filteredTasks.map((task) => {
-                    const TaskContent = (
-                      <div className="flex items-start justify-between">
-                        <div className="flex-1">
-                          <div className="flex items-center gap-2">
-                            <button
-                              type="button"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                toggleTaskComplete(task.id, task.completed);
-                              }}
-                              className="cursor-pointer text-gray-400 hover:text-blue-600"
-                            >
-                              {task.completed ? (
-                                <CheckCircle2 className="h-5 w-5 text-blue-600" />
-                              ) : (
-                                <Circle className="h-5 w-5" />
-                              )}
-                            </button>
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2">
-                                {task.type === 'VIDEO_CONFERENCE' && (
-                                  <Video className="h-4 w-4 text-green-600" />
-                                )}
-                                {task.type === 'MEETING' && (
-                                  <Users className="h-4 w-4 text-blue-600" />
-                                )}
-                                {task.type === 'CALL' && (
-                                  <Phone className="h-4 w-4 text-purple-600" />
-                                )}
-                                <span className="text-sm font-medium text-gray-600">
-                                  {TASK_TYPE_LABELS[task.type]}
-                                </span>
-                              </div>
-                              <h3
-                                className={cn(
-                                  'mt-1 text-base font-semibold',
-                                  task.completed ? 'text-gray-400 line-through' : 'text-gray-900',
-                                )}
+                    })}
+                    {googleEventsInDateRange.length > 0 && (
+                      <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+                        <button
+                          type="button"
+                          onClick={() => setMonthGoogleEventsOpen((o) => !o)}
+                          className="flex w-full items-center justify-between gap-3 px-5 py-3.5 text-left transition-colors hover:bg-gray-50 sm:px-6"
+                          aria-expanded={monthGoogleEventsOpen}
+                        >
+                          <div className="flex min-w-0 flex-1 items-center gap-2.5">
+                            <Calendar className="h-5 w-5 shrink-0 text-blue-600" />
+                            <span className="font-semibold text-gray-900">
+                              Événements Google Calendar
+                            </span>
+                            <span className="shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
+                              {googleEventsInDateRange.length}
+                            </span>
+                          </div>
+                          <ChevronDown
+                            className={cn(
+                              'h-5 w-5 shrink-0 text-gray-500 transition-transform duration-200',
+                              monthGoogleEventsOpen && 'rotate-180',
+                            )}
+                          />
+                        </button>
+                        {monthGoogleEventsOpen && (
+                          <div className="space-y-3 border-t border-gray-100 bg-slate-50/80 px-5 py-4 sm:px-6">
+                            {googleEventsInDateRange.map((ev) => (
+                              <div
+                                key={`gcal-month-${ev.calendarId}-${ev.googleEventId}`}
+                                className="cursor-pointer rounded-xl border border-solid px-5 py-4 shadow-sm transition-colors hover:brightness-[0.98] sm:px-6"
+                                style={{
+                                  backgroundColor: gCalCardChrome.backgroundColor,
+                                  borderColor: gCalCardChrome.borderColor,
+                                }}
+                                onClick={() => {
+                                  if (ev.htmlLink) {
+                                    globalThis.open(ev.htmlLink, '_blank', 'noopener,noreferrer');
+                                  }
+                                }}
                               >
-                                {task.title || TASK_TYPE_LABELS[task.type]}
-                              </h3>
-                              {task.contact && (
-                                <div className="mt-2 inline-flex max-w-full items-center gap-1.5 overflow-hidden rounded-md bg-blue-50 px-2.5 py-1 text-sm font-medium text-blue-700">
-                                  <User className="h-4 w-4 shrink-0" />
-                                  <span className="truncate">
-                                    {task.contact.firstName} {task.contact.lastName}
-                                  </span>
-                                  <Link
-                                    href={`/contacts/${task.contact.id}`}
-                                    onClick={(e) => e.stopPropagation()}
-                                    className="ml-1 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-800 hover:bg-blue-200"
-                                    title="Voir le contact"
-                                  >
-                                    <Eye className="h-3 w-3" />
-                                  </Link>
-                                </div>
-                              )}
-                              {task.googleMeetLink && (
-                                <div className="mt-2 flex flex-wrap items-center gap-2">
-                                  <button
-                                    type="button"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      if (task.googleMeetLink) {
-                                        globalThis.open(
-                                          task.googleMeetLink,
-                                          '_blank',
-                                          'noopener,noreferrer',
-                                        );
-                                      }
-                                    }}
-                                    className="inline-flex items-center gap-1.5 rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
-                                  >
-                                    <Video className="h-4 w-4" />
-                                    <span>Rejoindre Google Meet</span>
-                                    <ExternalLink className="h-3 w-3" />
-                                  </button>
-                                  <button
-                                    type="button"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      openEditMeetModal(task);
-                                    }}
-                                    className="inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-50"
-                                  >
-                                    Modifier le rendez-vous
-                                  </button>
-                                </div>
-                              )}
-                              <div className="mt-2 flex items-center gap-4 text-sm text-gray-500">
-                                <div className="flex items-center gap-1">
-                                  <Clock className="h-4 w-4" />
-                                  {formatTime(task.scheduledAt)}
-                                </div>
-                                <div className="flex items-center gap-1">
+                                <div
+                                  className="flex items-center gap-2 text-sm font-medium"
+                                  style={{ color: gCalCardChrome.iconColor }}
+                                >
                                   <Calendar className="h-4 w-4" />
-                                  {new Date(task.scheduledAt).toLocaleDateString('fr-FR')}
+                                  <span>Google Calendar</span>
                                 </div>
-                                {isAdmin && (
+                                <h3
+                                  className="mt-1 text-base font-semibold"
+                                  style={{ color: gCalCardChrome.color }}
+                                >
+                                  {ev.title}
+                                </h3>
+                                <div
+                                  className="mt-2 flex flex-wrap items-center gap-4 text-sm"
+                                  style={{ color: gCalCardChrome.iconColor }}
+                                >
                                   <div className="flex items-center gap-1">
-                                    <User className="h-4 w-4" />
-                                    {task.assignedUser?.name || 'Ancien utilisateur'}
+                                    <Clock className="h-4 w-4" />
+                                    {ev.allDay ? 'Journée entière' : formatTime(ev.start)}
                                   </div>
-                                )}
+                                  <div className="flex items-center gap-1">
+                                    <Calendar className="h-4 w-4" />
+                                    {new Date(ev.start).toLocaleDateString('fr-FR')}
+                                  </div>
+                                </div>
                               </div>
-                            </div>
+                            ))}
                           </div>
-                        </div>
-                      </div>
-                    );
-
-                    return (
-                      <div
-                        key={task.id}
-                        className="cursor-pointer rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-colors hover:border-blue-300 hover:shadow-md"
-                        onClick={() => openTaskDetailModal(task)}
-                      >
-                        {TaskContent}
+                        )}
                       </div>
-                    );
-                  })
+                    )}
+                  </>
                 )}
               </div>
             </div>
@@ -2142,8 +3331,8 @@ export default function AgendaPage() {
 
         {/* Modal d'édition de Google Meet */}
         {showEditMeetModal && editingMeetTask && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
-            <div className="flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+            <div className="ui-scale-in flex max-h-[90vh] w-full max-w-2xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
               {/* En-tête fixe */}
               <div className="shrink-0 border-b border-gray-100 pb-4">
                 <div className="flex items-center justify-between">
@@ -2183,55 +3372,21 @@ export default function AgendaPage() {
                 className="flex-1 space-y-4 overflow-y-auto pt-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               >
                 <div className="space-y-2">
-                  <p className="text-sm font-medium text-gray-700">Date & heure *</p>
-                  <div className="grid grid-cols-[3fr,2fr] gap-2">
-                    <input
-                      type="date"
-                      required
-                      value={
-                        editMeetData.scheduledAt
-                          ? editMeetData.scheduledAt.split('T')[0]
-                          : new Date(editingMeetTask.scheduledAt).toISOString().split('T')[0]
-                      }
-                      onChange={(e) => {
-                        const time =
-                          editMeetData.scheduledAt && editMeetData.scheduledAt.includes('T')
-                            ? editMeetData.scheduledAt.split('T')[1]
-                            : new Date(editingMeetTask.scheduledAt)
-                                .toISOString()
-                                .split('T')[1]
-                                .slice(0, 5);
-                        setEditMeetData({
-                          ...editMeetData,
-                          scheduledAt: `${e.target.value}T${time || '09:00'}`,
-                        });
-                      }}
-                      className="block w-full rounded-xl border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    />
-                    <input
-                      type="time"
-                      required
-                      value={
-                        editMeetData.scheduledAt && editMeetData.scheduledAt.includes('T')
-                          ? editMeetData.scheduledAt.split('T')[1].slice(0, 5)
-                          : new Date(editingMeetTask.scheduledAt)
-                              .toISOString()
-                              .split('T')[1]
-                              .slice(0, 5)
-                      }
-                      onChange={(e) => {
-                        const datePart =
-                          editMeetData.scheduledAt && editMeetData.scheduledAt.includes('T')
-                            ? editMeetData.scheduledAt.split('T')[0]
-                            : new Date(editingMeetTask.scheduledAt).toISOString().split('T')[0];
-                        setEditMeetData({
-                          ...editMeetData,
-                          scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
-                        });
-                      }}
-                      className="block w-full rounded-xl border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                    />
-                  </div>
+                  <label className="text-sm font-medium text-gray-700">Date & heure *</label>
+                  <DateTimePicker
+                    required
+                    value={
+                      editMeetData.scheduledAt
+                        ? toLocalDateTimeInput(editMeetData.scheduledAt)
+                        : ''
+                    }
+                    onChange={(v) =>
+                      setEditMeetData({
+                        ...editMeetData,
+                        scheduledAt: v,
+                      })
+                    }
+                  />
                 </div>
 
                 <div className="space-y-2">
@@ -2244,7 +3399,7 @@ export default function AgendaPage() {
                         durationMinutes: Number(e.target.value),
                       })
                     }
-                    className="mt-1 block w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                   >
                     <option value={15}>15 minutes</option>
                     <option value={30}>30 minutes</option>
@@ -2270,7 +3425,6 @@ export default function AgendaPage() {
                     </a>
                   </div>
                 )}
-
               </form>
 
               {/* Pied de modal fixe */}
@@ -2291,7 +3445,7 @@ export default function AgendaPage() {
                     type="submit"
                     form="edit-meet-form"
                     disabled={editMeetLoading}
-                    className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                    className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                   >
                     {editMeetLoading ? 'Enregistrement...' : 'Enregistrer les modifications'}
                   </button>
@@ -2303,8 +3457,8 @@ export default function AgendaPage() {
 
         {/* Modal de création de tâche (générique, non liée à un contact) */}
         {showCreateTaskModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-6 backdrop-blur-sm sm:p-8">
-            <div className="flex max-h-[90vh] w-full max-w-4xl flex-col rounded-2xl bg-white p-6 shadow-xl">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-6 backdrop-blur-sm sm:p-8">
+            <div className="ui-scale-in flex max-h-[90vh] w-full max-w-4xl flex-col rounded-2xl bg-white p-6 shadow-xl">
               {/* En-tête fixe */}
               <div className="shrink-0 border-b border-gray-100 pb-4">
                 <div className="flex items-start justify-between gap-4">
@@ -2329,6 +3483,7 @@ export default function AgendaPage() {
                         reminderMinutesBefore: null,
                         contactId: '',
                         addToGoogleCalendar: false,
+                        googleCalendarId: '',
                       });
                     }}
                     className="cursor-pointer rounded-full p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
@@ -2343,28 +3498,73 @@ export default function AgendaPage() {
               <form
                 id="create-task-form"
                 onSubmit={handleCreateTaskFromAgenda}
-                className="flex-1 space-y-6 overflow-y-auto px-2 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                className="flex-1 space-y-4 overflow-y-auto px-2 pt-3 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               >
                 {/* Ajouter à Google Calendar */}
-                <div className="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-                  <input
-                    type="checkbox"
-                    id="task-add-to-calendar"
-                    checked={createTaskData.addToGoogleCalendar}
-                    onChange={(e) =>
-                      setCreateTaskData({
-                        ...createTaskData,
-                        addToGoogleCalendar: e.target.checked,
-                      })
-                    }
-                    className="h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-gray-400/30"
-                  />
-                  <label
-                    htmlFor="task-add-to-calendar"
-                    className="cursor-pointer text-sm font-medium text-gray-700"
-                  >
-                    Ajouter à Google Calendar
-                  </label>
+                <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id="task-add-to-calendar"
+                      checked={createTaskData.addToGoogleCalendar}
+                      onChange={(e) => {
+                        const checked = e.target.checked;
+                        setCreateTaskData({
+                          ...createTaskData,
+                          addToGoogleCalendar: checked,
+                          googleCalendarId:
+                            checked &&
+                              !createTaskData.googleCalendarId &&
+                              targetGoogleCalendars.length > 0
+                              ? pickDefaultCalendarId(gCalPayload, targetGoogleCalendars)
+                              : createTaskData.googleCalendarId,
+                        });
+                      }}
+                      className="h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-gray-400/30"
+                    />
+                    <label
+                      htmlFor="task-add-to-calendar"
+                      className="cursor-pointer text-sm font-medium text-gray-700"
+                    >
+                      Ajouter à Google Calendar
+                    </label>
+                  </div>
+                  {gCalPayload?.needsGoogleReconnect && (
+                    <p className="text-xs text-amber-800">
+                      Reconnectez Google dans Paramètres → Intégrations pour lister vos calendriers
+                      partagés.
+                    </p>
+                  )}
+                  {googleConnected &&
+                    createTaskData.addToGoogleCalendar &&
+                    targetGoogleCalendars.length > 0 && (
+                      <div>
+                        <label
+                          htmlFor="task-google-calendar"
+                          className="block text-sm font-medium text-gray-700"
+                        >
+                          Calendrier cible
+                        </label>
+                        <select
+                          id="task-google-calendar"
+                          value={createTaskData.googleCalendarId || 'primary'}
+                          onChange={(e) =>
+                            setCreateTaskData({
+                              ...createTaskData,
+                              googleCalendarId: e.target.value,
+                            })
+                          }
+                          className="mt-1 block w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                        >
+                          {targetGoogleCalendars.map((c) => (
+                            <option key={c.id} value={c.id}>
+                              {c.summary}
+                              {c.primary ? ' (principal)' : ''}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    )}
                 </div>
 
                 {/* Contact (optionnel) */}
@@ -2407,7 +3607,7 @@ export default function AgendaPage() {
                               placeholder="Rechercher un contact..."
                               value={taskContactSearch}
                               onChange={(e) => setTaskContactSearch(e.target.value)}
-                              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                               autoFocus
                             />
                           </div>
@@ -2479,56 +3679,27 @@ export default function AgendaPage() {
                         title: e.target.value,
                       })
                     }
-                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder="Ex : Relance client"
                   />
                 </div>
 
-                {/* Date & heure */}
-                <div className="grid gap-4 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <p className="text-sm font-medium text-gray-700">Date & heure *</p>
-                    <div className="grid grid-cols-[3fr,2fr] gap-2">
-                      <input
-                        type="date"
-                        required
-                        value={
-                          createTaskData.scheduledAt ? createTaskData.scheduledAt.split('T')[0] : ''
-                        }
-                        onChange={(e) => {
-                          const time =
-                            createTaskData.scheduledAt && createTaskData.scheduledAt.includes('T')
-                              ? createTaskData.scheduledAt.split('T')[1]
-                              : '09:00';
-                          setCreateTaskData({
-                            ...createTaskData,
-                            scheduledAt: `${e.target.value}T${time}`,
-                          });
-                        }}
-                        className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      />
-                      <input
-                        type="time"
-                        required
-                        value={
-                          createTaskData.scheduledAt && createTaskData.scheduledAt.includes('T')
-                            ? createTaskData.scheduledAt.split('T')[1].slice(0, 5)
-                            : ''
-                        }
-                        onChange={(e) => {
-                          const datePart =
-                            createTaskData.scheduledAt && createTaskData.scheduledAt.includes('T')
-                              ? createTaskData.scheduledAt.split('T')[0]
-                              : new Date().toISOString().split('T')[0];
-                          setCreateTaskData({
-                            ...createTaskData,
-                            scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
-                          });
-                        }}
-                        className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      />
-                    </div>
-                  </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-gray-700">Date & heure *</label>
+                  <DateTimePicker
+                    required
+                    value={
+                      createTaskData.scheduledAt
+                        ? toLocalDateTimeInput(createTaskData.scheduledAt)
+                        : ''
+                    }
+                    onChange={(v) =>
+                      setCreateTaskData({
+                        ...createTaskData,
+                        scheduledAt: v,
+                      })
+                    }
+                  />
                 </div>
 
                 {/* Rappel */}
@@ -2542,7 +3713,7 @@ export default function AgendaPage() {
                         reminderMinutesBefore: e.target.value ? Number(e.target.value) : null,
                       })
                     }
-                    className="mt-1 block w-full cursor-pointer rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full cursor-pointer rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                   >
                     <option value="">Aucun rappel</option>
                     <option value="5">5 minutes avant</option>
@@ -2565,11 +3736,10 @@ export default function AgendaPage() {
                       })
                     }
                     rows={4}
-                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder="Ajoutez les détails de la tâche (contexte, actions à mener, etc.)"
                   />
                 </div>
-
               </form>
 
               {/* Pied de modal fixe */}
@@ -2588,6 +3758,7 @@ export default function AgendaPage() {
                         reminderMinutesBefore: null,
                         contactId: '',
                         addToGoogleCalendar: true,
+                        googleCalendarId: '',
                       });
                     }}
                     className="w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
@@ -2598,7 +3769,7 @@ export default function AgendaPage() {
                     type="submit"
                     form="create-task-form"
                     disabled={creatingTask}
-                    className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                    className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                   >
                     {creatingTask ? 'Création...' : 'Créer la tâche'}
                   </button>
@@ -2610,8 +3781,8 @@ export default function AgendaPage() {
 
         {/* Modal de création de Google Meet */}
         {showCreateMeetModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
-            <div className="flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+            <div className="ui-scale-in flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
               {/* En-tête fixe */}
               <div className="shrink-0 border-b border-gray-100 pb-4">
                 <div className="flex items-center justify-between">
@@ -2631,8 +3802,10 @@ export default function AgendaPage() {
                         internalNote: '',
                         contactId: '',
                         addToGoogleCalendar: true,
+                        googleCalendarId: '',
                       });
                       setMeetError('');
+                      setMeetErrorConfigLink(null);
                     }}
                     className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
                     type="button"
@@ -2648,6 +3821,9 @@ export default function AgendaPage() {
                 onSubmit={handleCreateMeet}
                 className="flex-1 space-y-4 overflow-y-auto px-1 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               >
+                {meetError && meetErrorConfigLink && (
+                  <ConfigErrorAlert message={meetError} configLink={meetErrorConfigLink} />
+                )}
                 {/* Contact (optionnel) */}
                 <div className="relative" ref={meetContactRef}>
                   <label className="block text-sm font-medium text-gray-700">
@@ -2686,7 +3862,7 @@ export default function AgendaPage() {
                               placeholder="Rechercher un contact..."
                               value={meetContactSearch}
                               onChange={(e) => setMeetContactSearch(e.target.value)}
-                              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                               autoFocus
                             />
                           </div>
@@ -2753,53 +3929,23 @@ export default function AgendaPage() {
                     required
                     value={meetData.title}
                     onChange={(e) => setMeetData({ ...meetData, title: e.target.value })}
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder="Ex: Rendez-vous avec..."
                   />
                 </div>
 
                 <div className="grid gap-4 md:grid-cols-2">
                   <div className="space-y-2">
-                    <p className="text-sm font-medium text-gray-700">Date & heure *</p>
-                    <div className="grid grid-cols-[3fr,2fr] gap-2">
-                      <input
-                        type="date"
-                        required
-                        value={meetData.scheduledAt ? meetData.scheduledAt.split('T')[0] : ''}
-                        onChange={(e) => {
-                          const time =
-                            meetData.scheduledAt && meetData.scheduledAt.includes('T')
-                              ? meetData.scheduledAt.split('T')[1]
-                              : '';
-                          setMeetData({
-                            ...meetData,
-                            scheduledAt: time
-                              ? `${e.target.value}T${time}`
-                              : `${e.target.value}T09:00`,
-                          });
-                        }}
-                        className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      />
-                      <input
-                        type="time"
-                        value={
-                          meetData.scheduledAt && meetData.scheduledAt.includes('T')
-                            ? meetData.scheduledAt.split('T')[1].slice(0, 5)
-                            : ''
-                        }
-                        onChange={(e) => {
-                          const datePart =
-                            meetData.scheduledAt && meetData.scheduledAt.includes('T')
-                              ? meetData.scheduledAt.split('T')[0]
-                              : new Date().toISOString().split('T')[0];
-                          setMeetData({
-                            ...meetData,
-                            scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
-                          });
-                        }}
-                        className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      />
-                    </div>
+                    <label className="text-sm font-medium text-gray-700">Date & heure *</label>
+                    <DateTimePicker
+                      required
+                      value={
+                        meetData.scheduledAt
+                          ? toLocalDateTimeInput(meetData.scheduledAt)
+                          : ''
+                      }
+                      onChange={(v) => setMeetData({ ...meetData, scheduledAt: v })}
+                    />
                   </div>
 
                   <div className="space-y-2">
@@ -2812,7 +3958,7 @@ export default function AgendaPage() {
                           durationMinutes: Number(e.target.value),
                         })
                       }
-                      className="mt-1 block w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                      className="mt-1 block w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     >
                       <option value="15">15 minutes</option>
                       <option value="30">30 minutes</option>
@@ -2824,6 +3970,32 @@ export default function AgendaPage() {
                   </div>
                 </div>
 
+                {targetGoogleCalendars.length > 0 && meetData.addToGoogleCalendar && (
+                  <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
+                    <label
+                      htmlFor="meet-google-calendar"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      Calendrier Google (événement + lien Meet)
+                    </label>
+                    <select
+                      id="meet-google-calendar"
+                      value={meetData.googleCalendarId || 'primary'}
+                      onChange={(e) =>
+                        setMeetData({ ...meetData, googleCalendarId: e.target.value })
+                      }
+                      className="mt-1 block w-full cursor-pointer rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                    >
+                      {targetGoogleCalendars.map((c) => (
+                        <option key={c.id} value={c.id}>
+                          {c.summary}
+                          {c.primary ? ' (principal)' : ''}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                )}
+
                 <div>
                   <label className="block text-sm font-medium text-gray-700">Rappel</label>
                   <select
@@ -2834,7 +4006,7 @@ export default function AgendaPage() {
                         reminderMinutesBefore: e.target.value ? Number(e.target.value) : null,
                       })
                     }
-                    className="mt-1 block w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                   >
                     <option value="">Aucun rappel</option>
                     <option value="5">5 minutes avant</option>
@@ -2861,7 +4033,7 @@ export default function AgendaPage() {
                       })
                     }
                     rows={4}
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder={`email1@example.com
 email2@example.com`}
                   />
@@ -2887,7 +4059,7 @@ email2@example.com`}
                     value={meetData.internalNote}
                     onChange={(e) => setMeetData({ ...meetData, internalNote: e.target.value })}
                     rows={3}
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder="Ajoutez une note personnelle qui ne sera pas partagée dans l'email..."
                   />
                   <p className="mt-1 text-xs text-gray-500">
@@ -2895,7 +4067,6 @@ email2@example.com`}
                     participants.
                   </p>
                 </div>
-
               </form>
 
               {/* Pied de modal fixe */}
@@ -2915,6 +4086,7 @@ email2@example.com`}
                         internalNote: '',
                         contactId: '',
                         addToGoogleCalendar: true,
+                        googleCalendarId: '',
                       });
                       setMeetError('');
                     }}
@@ -2926,7 +4098,7 @@ email2@example.com`}
                     type="submit"
                     form="meet-form"
                     disabled={creatingMeet}
-                    className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                    className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                   >
                     {creatingMeet ? 'Création...' : 'Créer le Google Meet'}
                   </button>
@@ -2938,8 +4110,8 @@ email2@example.com`}
 
         {/* Modal de création de rendez-vous physique */}
         {showCreateMeetingModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
-            <div className="flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+            <div className="ui-scale-in flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
               {/* En-tête fixe */}
               <div className="shrink-0 border-b border-gray-100 pb-4">
                 <div className="flex items-center justify-between">
@@ -2959,6 +4131,7 @@ email2@example.com`}
                         attendees: [],
                         contactId: '',
                         addToGoogleCalendar: true,
+                        googleCalendarId: '',
                       });
                       setMeetingError('');
                     }}
@@ -2977,25 +4150,61 @@ email2@example.com`}
                 className="flex-1 space-y-6 overflow-y-auto px-2 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               >
                 {/* Ajouter à Google Calendar */}
-                <div className="flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 p-3">
-                  <input
-                    type="checkbox"
-                    id="meeting-add-to-calendar"
-                    checked={meetingData.addToGoogleCalendar}
-                    onChange={(e) =>
-                      setMeetingData({
-                        ...meetingData,
-                        addToGoogleCalendar: e.target.checked,
-                      })
-                    }
-                    className="h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-gray-400/30"
-                  />
-                  <label
-                    htmlFor="meeting-add-to-calendar"
-                    className="cursor-pointer text-sm font-medium text-gray-700"
-                  >
-                    Ajouter à Google Calendar
-                  </label>
+                <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id="meeting-add-to-calendar"
+                      checked={meetingData.addToGoogleCalendar}
+                      onChange={(e) => {
+                        const checked = e.target.checked;
+                        setMeetingData({
+                          ...meetingData,
+                          addToGoogleCalendar: checked,
+                          googleCalendarId:
+                            checked &&
+                              !meetingData.googleCalendarId &&
+                              targetGoogleCalendars.length > 0
+                              ? pickDefaultCalendarId(gCalPayload, targetGoogleCalendars)
+                              : meetingData.googleCalendarId,
+                        });
+                      }}
+                      className="h-4 w-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-gray-400/30"
+                    />
+                    <label
+                      htmlFor="meeting-add-to-calendar"
+                      className="cursor-pointer text-sm font-medium text-gray-700"
+                    >
+                      Ajouter à Google Calendar
+                    </label>
+                  </div>
+                  {googleConnected &&
+                    meetingData.addToGoogleCalendar &&
+                    targetGoogleCalendars.length > 0 && (
+                      <div>
+                        <label
+                          htmlFor="meeting-google-calendar"
+                          className="block text-sm font-medium text-gray-700"
+                        >
+                          Calendrier cible
+                        </label>
+                        <select
+                          id="meeting-google-calendar"
+                          value={meetingData.googleCalendarId || 'primary'}
+                          onChange={(e) =>
+                            setMeetingData({ ...meetingData, googleCalendarId: e.target.value })
+                          }
+                          className="mt-1 block w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                        >
+                          {targetGoogleCalendars.map((c) => (
+                            <option key={c.id} value={c.id}>
+                              {c.summary}
+                              {c.primary ? ' (principal)' : ''}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    )}
                 </div>
 
                 {/* Contact (optionnel) */}
@@ -3036,7 +4245,7 @@ email2@example.com`}
                               placeholder="Rechercher un contact..."
                               value={meetingContactSearch}
                               onChange={(e) => setMeetingContactSearch(e.target.value)}
-                              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                               autoFocus
                             />
                           </div>
@@ -3102,54 +4311,22 @@ email2@example.com`}
                     type="text"
                     value={meetingData.title}
                     onChange={(e) => setMeetingData({ ...meetingData, title: e.target.value })}
-                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder="Ex : Rendez-vous avec le client"
                   />
                 </div>
 
-                <div className="grid gap-4 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <p className="text-sm font-medium text-gray-700">Date & heure *</p>
-                    <div className="grid grid-cols-[3fr,2fr] gap-2">
-                      <input
-                        type="date"
-                        required
-                        value={meetingData.scheduledAt ? meetingData.scheduledAt.split('T')[0] : ''}
-                        onChange={(e) => {
-                          const time =
-                            meetingData.scheduledAt && meetingData.scheduledAt.includes('T')
-                              ? meetingData.scheduledAt.split('T')[1]
-                              : '';
-                          setMeetingData({
-                            ...meetingData,
-                            scheduledAt: time
-                              ? `${e.target.value}T${time}`
-                              : `${e.target.value}T09:00`,
-                          });
-                        }}
-                        className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      />
-                      <input
-                        type="time"
-                        value={
-                          meetingData.scheduledAt && meetingData.scheduledAt.includes('T')
-                            ? meetingData.scheduledAt.split('T')[1].slice(0, 5)
-                            : ''
-                        }
-                        onChange={(e) => {
-                          const datePart =
-                            meetingData.scheduledAt && meetingData.scheduledAt.includes('T')
-                              ? meetingData.scheduledAt.split('T')[0]
-                              : new Date().toISOString().split('T')[0];
-                          setMeetingData({
-                            ...meetingData,
-                            scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
-                          });
-                        }}
-                        className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      />
-                    </div>
-                  </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-gray-700">Date & heure *</label>
+                  <DateTimePicker
+                    required
+                    value={
+                      meetingData.scheduledAt
+                        ? toLocalDateTimeInput(meetingData.scheduledAt)
+                        : ''
+                    }
+                    onChange={(v) => setMeetingData({ ...meetingData, scheduledAt: v })}
+                  />
                 </div>
 
                 <div className="space-y-2">
@@ -3162,7 +4339,7 @@ email2@example.com`}
                         reminderMinutesBefore: e.target.value ? Number(e.target.value) : null,
                       })
                     }
-                    className="mt-1 block w-full cursor-pointer rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full cursor-pointer rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                   >
                     <option value="">Aucun rappel</option>
                     <option value="5">5 minutes avant</option>
@@ -3189,7 +4366,7 @@ email2@example.com`}
                       })
                     }
                     rows={4}
-                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder={`email1@example.com
 email2@example.com`}
                   />
@@ -3235,7 +4412,8 @@ email2@example.com`}
                     Note personnelle
                   </label>
                   <p className="mt-1 text-xs text-gray-500">
-                    Cette note ne sera pas visible par les invités s&apos;ils sont prévenus par email.
+                    Cette note ne sera pas visible par les invités s&apos;ils sont prévenus par
+                    email.
                   </p>
                   <textarea
                     value={meetingData.internalNote}
@@ -3243,11 +4421,10 @@ email2@example.com`}
                       setMeetingData({ ...meetingData, internalNote: e.target.value })
                     }
                     rows={3}
-                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                    className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder="Ajoutez une note personnelle qui ne sera pas partagée..."
                   />
                 </div>
-
               </form>
 
               {/* Pied de modal fixe */}
@@ -3267,6 +4444,7 @@ email2@example.com`}
                         attendees: [],
                         contactId: '',
                         addToGoogleCalendar: true,
+                        googleCalendarId: '',
                       });
                       setMeetingError('');
                     }}
@@ -3278,7 +4456,7 @@ email2@example.com`}
                     type="submit"
                     form="meeting-form"
                     disabled={creatingMeeting}
-                    className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                    className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                   >
                     {creatingMeeting ? 'Création...' : 'Créer le rendez-vous'}
                   </button>
@@ -3290,20 +4468,17 @@ email2@example.com`}
 
         {/* Modal de détail / édition d'une tâche */}
         {showTaskDetailModal && selectedTask && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-6 backdrop-blur-sm sm:p-8">
-            <div className="flex max-h-[90vh] w-full max-w-4xl flex-col rounded-2xl bg-white p-6 shadow-xl">
+          <div className="ui-fade-in fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-6 backdrop-blur-sm sm:p-8">
+            <div className="ui-scale-in flex max-h-[90vh] w-full max-w-4xl flex-col rounded-2xl bg-white p-6 shadow-xl">
               {/* En-tête */}
               <div className="shrink-0 border-b border-gray-100 pb-4">
                 <div className="flex items-start justify-between gap-4">
-                  <div>
-                    <h2 className="text-lg font-semibold text-gray-900 sm:text-xl">
-                      Détail de l&apos;événement
-                    </h2>
-                    <p className="mt-1 text-xs text-gray-500 sm:text-sm">
+                  <div className="min-w-0">
+                    <h2 className="truncate text-lg font-semibold text-gray-900 sm:text-xl">
                       {selectedTask.contact
-                        ? `Événement lié au contact ${selectedTask.contact.firstName || ''} ${selectedTask.contact.lastName || ''}`.trim()
-                        : 'Tâche personnelle non liée à un contact.'}
-                    </p>
+                        ? `${TASK_TYPE_LABELS[selectedTask.type]} · ${[selectedTask.contact.firstName, selectedTask.contact.lastName].filter(Boolean).join(' ').trim()}`
+                        : TASK_TYPE_LABELS[selectedTask.type]}
+                    </h2>
                   </div>
                   <button
                     type="button"
@@ -3331,73 +4506,121 @@ email2@example.com`}
               <form
                 id="task-detail-form"
                 onSubmit={handleUpdateTaskDetail}
-                className="flex-1 space-y-6 overflow-y-auto px-2 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                className="flex-1 space-y-4 overflow-y-auto px-2 pt-4 pb-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               >
-                {/* Informations du contact (si présent) */}
-                {selectedTask.contact && (
-                  <div className="rounded-lg border border-blue-200 bg-blue-50 p-4">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-3">
-                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100 text-blue-700">
-                          <User className="h-5 w-5" />
-                        </div>
-                        <div>
-                          <p className="text-sm font-medium text-gray-900">
-                            {selectedTask.contact.firstName} {selectedTask.contact.lastName}
-                          </p>
-                          <p className="text-xs text-gray-500">Contact associé</p>
+                {/* Bandeau compact : contact + créateur */}
+                <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                  {selectedTask.contact && (
+                    <div className="rounded-lg border border-blue-200 bg-blue-50 px-2.5 py-2">
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="flex min-w-0 items-center gap-2.5">
+                          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-blue-100 text-blue-700">
+                            <User className="h-4 w-4" />
+                          </div>
+                          <div className="min-w-0">
+                            <p className="truncate text-sm font-medium text-gray-900">
+                              {selectedTask.contact.firstName} {selectedTask.contact.lastName}
+                            </p>
+                            <p className="text-xs text-gray-500">Contact associé</p>
+                          </div>
                         </div>
+                        <Link
+                          href={`/contacts/${selectedTask.contact.id}`}
+                          className="inline-flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md border border-blue-300 bg-white px-2.5 py-1.5 text-xs font-medium text-blue-700 transition-colors hover:bg-blue-50"
+                        >
+                          <Eye className="h-3.5 w-3.5" />
+                          Voir
+                        </Link>
                       </div>
-                      <Link
-                        href={`/contacts/${selectedTask.contact.id}`}
-                        className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-blue-300 bg-white px-3 py-2 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-50"
-                      >
-                        <Eye className="h-4 w-4" />
-                        Voir le contact
-                      </Link>
                     </div>
-                  </div>
-                )}
+                  )}
 
-                {/* Type de tâche */}
-                <div>
-                  <label className="block text-sm font-medium text-gray-700">
-                    Type d&apos;événement
-                  </label>
-                  <div className="mt-1 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2.5 text-sm text-gray-700">
-                    {TASK_TYPE_LABELS[selectedTask.type]}
+                  <div className="rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2">
+                    <div className="flex items-center gap-2.5">
+                      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-gray-700 shadow-sm">
+                        <User className="h-4 w-4" />
+                      </div>
+                      <div className="min-w-0">
+                        <p className="truncate text-sm font-medium text-gray-900">
+                          {selectedTask.createdBy?.name?.trim() || 'Utilisateur inconnu'}
+                        </p>
+                        <p className="text-xs text-gray-500">Créé par</p>
+                      </div>
+                    </div>
                   </div>
                 </div>
 
-                {/* Lien Google Meet (si présent) */}
-                {selectedTask.googleMeetLink && (
-                  <div>
-                    <label className="block text-sm font-medium text-gray-700">Google Meet</label>
-                    <div className="mt-1">
+                {/* Statut — action immédiate, très visible */}
+                <div
+                  className={cn(
+                    'rounded-xl border-2 p-3 transition-colors',
+                    taskDetailData.completed
+                      ? 'border-emerald-200 bg-emerald-50/90'
+                      : 'border-amber-200 bg-amber-50/70',
+                  )}
+                >
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div>
+                      <p className="text-xs font-semibold tracking-wide text-gray-600 uppercase">
+                        Statut
+                      </p>
+                      <p className="mt-1 text-sm font-medium text-gray-900">
+                        {taskDetailData.completed
+                          ? 'Cet événement est marqué comme terminé'
+                          : 'Cet événement est à faire'}
+                      </p>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
                       <button
                         type="button"
-                        onClick={() => {
-                          if (selectedTask.googleMeetLink) {
-                            globalThis.open(
-                              selectedTask.googleMeetLink,
-                              '_blank',
-                              'noopener,noreferrer',
-                            );
-                          }
-                        }}
-                        className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-4 py-2.5 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
+                        disabled={taskCompleteQuickSaving}
+                        onClick={() => handleAgendaModalQuickSetCompleted(false)}
+                        className={cn(
+                          'inline-flex min-h-10 min-w-24 items-center justify-center rounded-lg px-3 py-1.5 text-sm font-semibold transition-colors',
+                          !taskDetailData.completed
+                            ? 'bg-white text-amber-900 shadow-sm ring-2 ring-amber-400'
+                            : 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50',
+                        )}
                       >
-                        <Video className="h-4 w-4" />
-                        Rejoindre Google Meet
-                        <ExternalLink className="h-3 w-3" />
+                        {taskCompleteQuickSaving && !taskDetailData.completed ? (
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                          'À faire'
+                        )}
+                      </button>
+                      <button
+                        type="button"
+                        disabled={taskCompleteQuickSaving}
+                        onClick={() => handleAgendaModalQuickSetCompleted(true)}
+                        className={cn(
+                          'inline-flex min-h-10 min-w-24 items-center justify-center rounded-lg px-3 py-1.5 text-sm font-semibold transition-colors',
+                          taskDetailData.completed
+                            ? 'bg-emerald-600 text-white shadow-sm ring-2 ring-emerald-800/30'
+                            : 'border border-emerald-300 bg-white text-emerald-800 hover:bg-emerald-50',
+                        )}
+                      >
+                        {taskCompleteQuickSaving && taskDetailData.completed ? (
+                          <Loader2 className="h-4 w-4 animate-spin text-white" />
+                        ) : (
+                          'Terminé'
+                        )}
                       </button>
                     </div>
                   </div>
-                )}
+                  <p className="mt-2 hidden text-xs text-gray-600 sm:block">
+                    Le statut est enregistré tout de suite. Vous pouvez ensuite modifier le reste et
+                    cliquer sur « Enregistrer les modifications ».
+                  </p>
+                </div>
 
-                {/* Titre + statut */}
-                <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-                  <div className="flex-1">
+                <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <label className="block text-sm font-medium text-gray-700">
+                      Type d&apos;événement
+                    </label>
+                    <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-700">
+                      {TASK_TYPE_LABELS[selectedTask.type]}
+                    </div>
                     <label className="block text-sm font-medium text-gray-700">
                       Titre (optionnel)
                     </label>
@@ -3410,72 +4633,81 @@ email2@example.com`}
                           title: e.target.value,
                         })
                       }
-                      className="mt-1 block w-full rounded-xl border border-gray-300 px-4 py-2.5 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                      className="block w-full rounded-xl border border-gray-300 px-3 py-2 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       placeholder="Ex : Relance client"
                     />
                   </div>
-                  <label className="flex cursor-pointer items-center gap-2 text-sm text-gray-700">
-                    <input
-                      type="checkbox"
-                      checked={taskDetailData.completed}
-                      onChange={(e) =>
+                  <div className="space-y-2">
+                    {googleConnected && targetGoogleCalendars.length > 0 && (
+                      <>
+                        <label
+                          htmlFor="task-detail-google-calendar"
+                          className="block text-sm font-medium text-gray-700"
+                        >
+                          Calendrier cible
+                        </label>
+                        <select
+                          id="task-detail-google-calendar"
+                          value={taskDetailData.googleCalendarId || 'primary'}
+                          onChange={(e) =>
+                            setTaskDetailData({
+                              ...taskDetailData,
+                              googleCalendarId: e.target.value,
+                            })
+                          }
+                          className="block w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                        >
+                          {targetGoogleCalendars.map((c) => (
+                            <option key={c.id} value={c.id}>
+                              {c.summary}
+                              {c.primary ? ' (principal)' : ''}
+                            </option>
+                          ))}
+                        </select>
+                      </>
+                    )}
+                    <label className="block text-sm font-medium text-gray-700">Date & heure *</label>
+                    <DateTimePicker
+                      required
+                      value={
+                        taskDetailData.scheduledAt
+                          ? toLocalDateTimeInput(taskDetailData.scheduledAt)
+                          : ''
+                      }
+                      onChange={(v) =>
                         setTaskDetailData({
                           ...taskDetailData,
-                          completed: e.target.checked,
+                          scheduledAt: v,
                         })
                       }
-                      className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2"
                     />
-                    <span>Marquer comme terminée</span>
-                  </label>
+                  </div>
                 </div>
 
-                {/* Date & heure + priorité */}
-                <div className="grid gap-4">
-                  <div className="space-y-2">
-                    <p className="text-sm font-medium text-gray-700">Date & heure *</p>
-                    <div className="grid grid-cols-2 gap-2">
-                      <input
-                        type="date"
-                        required
-                        value={
-                          taskDetailData.scheduledAt ? taskDetailData.scheduledAt.split('T')[0] : ''
-                        }
-                        onChange={(e) => {
-                          const time =
-                            taskDetailData.scheduledAt && taskDetailData.scheduledAt.includes('T')
-                              ? taskDetailData.scheduledAt.split('T')[1]
-                              : '09:00';
-                          setTaskDetailData({
-                            ...taskDetailData,
-                            scheduledAt: `${e.target.value}T${time}`,
-                          });
-                        }}
-                        className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      />
-                      <input
-                        type="time"
-                        required
-                        value={
-                          taskDetailData.scheduledAt && taskDetailData.scheduledAt.includes('T')
-                            ? taskDetailData.scheduledAt.split('T')[1].slice(0, 5)
-                            : ''
-                        }
-                        onChange={(e) => {
-                          const datePart =
-                            taskDetailData.scheduledAt && taskDetailData.scheduledAt.includes('T')
-                              ? taskDetailData.scheduledAt.split('T')[0]
-                              : new Date().toISOString().split('T')[0];
-                          setTaskDetailData({
-                            ...taskDetailData,
-                            scheduledAt: `${datePart}T${e.target.value || '09:00'}`,
-                          });
+                {selectedTask.googleMeetLink && (
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700">Google Meet</label>
+                    <div className="mt-1">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (selectedTask.googleMeetLink) {
+                            globalThis.open(
+                              selectedTask.googleMeetLink,
+                              '_blank',
+                              'noopener,noreferrer',
+                            );
+                          }
                         }}
-                        className="block w-full rounded-xl border border-gray-300 px-2 py-1.5 text-xs text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
-                      />
+                        className="inline-flex cursor-pointer items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-100"
+                      >
+                        <Video className="h-4 w-4" />
+                        Rejoindre Google Meet
+                        <ExternalLink className="h-3 w-3" />
+                      </button>
                     </div>
                   </div>
-                </div>
+                )}
 
                 {/* Note personnelle (si présente) */}
                 {selectedTask.internalNote && (
@@ -3502,6 +4734,28 @@ email2@example.com`}
                   </p>
                 </div>
 
+                <div className="space-y-2">
+                  <p className="text-sm font-medium text-gray-700">Rappel</p>
+                  <select
+                    value={taskDetailData.reminderMinutesBefore ?? ''}
+                    onChange={(e) =>
+                      setTaskDetailData({
+                        ...taskDetailData,
+                        reminderMinutesBefore: e.target.value ? Number(e.target.value) : null,
+                      })
+                    }
+                    className="block w-full rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+                  >
+                    <option value="">Aucun rappel</option>
+                    <option value="5">5 minutes avant</option>
+                    <option value="10">10 minutes avant</option>
+                    <option value="15">15 minutes avant</option>
+                    <option value="30">30 minutes avant</option>
+                    <option value="60">1 heure avant</option>
+                    <option value="120">2 heures avant</option>
+                    <option value="1440">1 jour avant</option>
+                  </select>
+                </div>
               </form>
 
               {/* Pied de modal */}
@@ -3531,7 +4785,7 @@ email2@example.com`}
                       type="submit"
                       form="task-detail-form"
                       disabled={taskDetailLoading}
-                      className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
+                      className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
                     >
                       {taskDetailLoading ? 'Enregistrement...' : 'Enregistrer les modifications'}
                     </button>
@@ -3543,6 +4797,7 @@ email2@example.com`}
         )}
       </div>
       <ConfirmDialog />
+      </TooltipProvider>
     </ProtectedPage>
   );
 }