Added few functions

components/TrajetDetailModal.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import dynamic from 'next/dynamic';
 import TrajetForm from './TrajetForm';
+import { getParticipationRef } from '@/lib/participation-ref';
+import { useBodyScrollLock } from '@/lib/body-scroll-lock';
 import ValidationModal from './ValidationModal';
 import ConfirmModal from './ConfirmModal';
 import { useNotification } from './NotificationProvider';
@@ -25,6 +27,7 @@ interface Trajet {
   commentaire?: string | null;
   instructions?: string | null;
   statut: string;
+  participations?: { id: string }[];
   adherent: {
     id: string;
     nom: string;
@@ -50,6 +53,7 @@ interface TrajetDetailModalProps {
 
 export default function TrajetDetailModal({ trajet, onClose, onUpdate }: TrajetDetailModalProps) {
   const { showNotification } = useNotification();
+  useBodyScrollLock(true);
   const [showEditForm, setShowEditForm] = useState(false);
   const [showValidationModal, setShowValidationModal] = useState(false);
   const [showCancelConfirm, setShowCancelConfirm] = useState(false);
@@ -219,6 +223,11 @@ export default function TrajetDetailModal({ trajet, onClose, onUpdate }: TrajetD
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-3 mb-1">
                 <h2 className="text-xl sm:text-2xl font-semibold text-gray-900">Détails du trajet</h2>
+                {trajet.participations?.[0] && (
+                  <span className="px-2 py-1 text-xs font-mono font-medium rounded-lg bg-lblue/10 text-lblue border border-lblue/20 flex-shrink-0" title="Référence de prescription">
+                    {getParticipationRef(trajet.participations[0].id)}
+                  </span>
+                )}
                 <span className={`px-2.5 sm:px-3 py-1 sm:py-1.5 text-xs sm:text-sm font-semibold rounded-lg border flex-shrink-0 ${getStatutColor(trajet.statut)}`}>
                   {trajet.statut}
                 </span>