diff --git a/assets/css/crvi-agenda.css b/assets/css/crvi-agenda.css
index dc2536d..41e6124 100644
--- a/assets/css/crvi-agenda.css
+++ b/assets/css/crvi-agenda.css
@@ -151,54 +151,55 @@
 .crvi-timeline {
     display: flex;
     flex-direction: column;
-    margin: 20px auto;
-    padding-left: 80px;
+    margin: 30px auto;
+    padding-left: 100px;
     position: relative;
 }
 
 .crvi-timeline__event {
-    background: #f8f9fa;
-    margin-bottom: 30px;
+    background: #fff;
+    margin-bottom: 20px;
     position: relative;
-    display: flex;
-    border-radius: 8px;
-    box-shadow: 0 15px 30px -6px rgba(50, 50, 93, 0.15),
-                0 9px 18px -9px rgba(0, 0, 0, 0.2);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+    padding: 25px;
+    transition: all 0.3s ease;
 }
 
 .crvi-timeline__event:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 20px 40px -8px rgba(50, 50, 93, 0.2),
-                0 12px 24px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
 }
 
 /* Ligne verticale qui connecte les événements */
 .crvi-timeline__event:after {
     content: "";
-    width: 3px;
-    height: 100%;
-    background: #dee2e6;
+    width: 4px;
+    height: calc(100% + 20px);
     position: absolute;
     top: 50%;
-    left: -57px;
+    left: -74px;
     z-index: 0;
 }
 
-/* Cercle sur la ligne pour chaque événement */
+/* Cercle numéroté sur la ligne */
 .crvi-timeline__event:before {
-    content: "";
+    content: attr(data-number);
     width: 50px;
     height: 50px;
     position: absolute;
     background: #fff;
-    border-radius: 100%;
-    left: -82px;
+    border-radius: 50%;
+    left: -98px;
     top: 50%;
     transform: translateY(-50%);
-    border: 3px solid #dee2e6;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    z-index: 1;
+    border: 4px solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+    font-weight: 700;
+    z-index: 2;
+    color: #fff;
 }
 
 /* Masquer la ligne après le dernier élément */
@@ -206,204 +207,196 @@
     content: none;
 }
 
-/* Section icône/date à gauche */
-.crvi-timeline__event__icon {
-    border-radius: 8px 0 0 8px;
-    background: #e9ecef;
+/* Container pour date/heure dans l'événement */
+.crvi-timeline__event__header {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    min-width: 120px;
-    padding: 20px;
-    position: relative;
+    margin-bottom: 15px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid #f0f0f0;
 }
 
-.crvi-timeline__event__icon i {
-    font-size: 2rem;
-    margin-bottom: 10px;
-    color: #6c757d;
+.crvi-timeline__event__date-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.crvi-timeline__event__date-icon {
+    width: 50px;
+    height: 50px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+}
+
+.crvi-timeline__event__date-info {
+    display: flex;
+    flex-direction: column;
 }
 
 .crvi-timeline__event__date {
-    color: #495057;
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 3px;
+}
+
+.crvi-timeline__event__time {
     font-size: 0.85rem;
-    font-weight: 600;
-    text-align: center;
-    line-height: 1.4;
-}
-
-/* Contenu de l'événement */
-.crvi-timeline__event__content {
-    padding: 20px;
-    flex-grow: 1;
-    background: #fff;
-    border-radius: 0 8px 8px 0;
+    opacity: 0.8;
 }
 
+/* Titre de l'événement */
 .crvi-timeline__event__title {
     font-size: 1.1rem;
-    line-height: 1.4;
-    text-transform: uppercase;
-    font-weight: 600;
-    color: #495057;
-    letter-spacing: 0.5px;
+    font-weight: 700;
     margin-bottom: 15px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
-.crvi-timeline__event__description {
-    color: #525f7f;
-    font-size: 0.9rem;
+/* Description/contenu */
+.crvi-timeline__event__content {
+    font-size: 0.95rem;
     line-height: 1.6;
+    color: #555;
 }
 
-/* Type d'événement : Par défaut (gris clair) */
+.crvi-timeline__event__content .mb-2 {
+    margin-bottom: 10px;
+}
+
+.crvi-timeline__event__content strong {
+    color: #333;
+    font-weight: 600;
+}
+
+/* Type d'événement : Par défaut (gris) */
 .crvi-timeline__event--default {
-    background: #f8f9fa;
+    background: #f8f9fb;
+    border-left: 4px solid #9ca3af;
 }
 
 .crvi-timeline__event--default:before {
-    background: #e9ecef;
-    border-color: #adb5bd;
+    background: #e5e7eb;
+    border-color: #9ca3af;
+    color: #6b7280;
 }
 
 .crvi-timeline__event--default:after {
-    background: #adb5bd;
+    background: #d1d5db;
 }
 
-.crvi-timeline__event--default .crvi-timeline__event__icon {
-    background: #e9ecef;
-}
-
-.crvi-timeline__event--default .crvi-timeline__event__icon i {
-    color: #6c757d;
-}
-
-.crvi-timeline__event--default .crvi-timeline__event__date {
-    color: #495057;
+.crvi-timeline__event--default .crvi-timeline__event__date-icon {
+    background: #e5e7eb;
+    color: #6b7280;
 }
 
+.crvi-timeline__event--default .crvi-timeline__event__date,
 .crvi-timeline__event--default .crvi-timeline__event__title {
-    color: #495057;
+    color: #6b7280;
 }
 
 /* Type d'événement : Prévu (bleu) */
 .crvi-timeline__event--prevu {
-    background: #e7f1ff;
+    background: #eff6ff;
+    border-left: 4px solid #3b82f6;
 }
 
 .crvi-timeline__event--prevu:before {
-    background: #cfe2ff;
-    border-color: #0d6efd;
+    background: #3b82f6;
+    border-color: #2563eb;
+    color: #fff;
 }
 
 .crvi-timeline__event--prevu:after {
-    background: #0d6efd;
+    background: #3b82f6;
 }
 
-.crvi-timeline__event--prevu .crvi-timeline__event__icon {
-    background: #0d6efd;
-}
-
-.crvi-timeline__event--prevu .crvi-timeline__event__icon i {
-    color: #fff;
-}
-
-.crvi-timeline__event--prevu .crvi-timeline__event__date {
+.crvi-timeline__event--prevu .crvi-timeline__event__date-icon {
+    background: #3b82f6;
     color: #fff;
 }
 
+.crvi-timeline__event--prevu .crvi-timeline__event__date,
 .crvi-timeline__event--prevu .crvi-timeline__event__title {
-    color: #0d6efd;
+    color: #2563eb;
 }
 
 /* Type d'événement : Présent (vert) */
 .crvi-timeline__event--present {
-    background: #d1f4e0;
+    background: #f0fdf4;
+    border-left: 4px solid #22c55e;
 }
 
 .crvi-timeline__event--present:before {
-    background: #a3e7c2;
-    border-color: #198754;
+    background: #22c55e;
+    border-color: #16a34a;
+    color: #fff;
 }
 
 .crvi-timeline__event--present:after {
-    background: #198754;
+    background: #22c55e;
 }
 
-.crvi-timeline__event--present .crvi-timeline__event__icon {
-    background: #198754;
-}
-
-.crvi-timeline__event--present .crvi-timeline__event__icon i {
-    color: #fff;
-}
-
-.crvi-timeline__event--present .crvi-timeline__event__date {
+.crvi-timeline__event--present .crvi-timeline__event__date-icon {
+    background: #22c55e;
     color: #fff;
 }
 
+.crvi-timeline__event--present .crvi-timeline__event__date,
 .crvi-timeline__event--present .crvi-timeline__event__title {
-    color: #198754;
+    color: #16a34a;
 }
 
 /* Type d'événement : Incident/Absence (rouge) */
 .crvi-timeline__event--incident {
-    background: #ffe5e5;
+    background: #fef2f2;
+    border-left: 4px solid #ef4444;
 }
 
 .crvi-timeline__event--incident:before {
-    background: #ffccd5;
-    border-color: #dc3545;
+    background: #ef4444;
+    border-color: #dc2626;
+    color: #fff;
 }
 
 .crvi-timeline__event--incident:after {
-    background: #dc3545;
+    background: #ef4444;
 }
 
-.crvi-timeline__event--incident .crvi-timeline__event__icon {
-    background: #dc3545;
-}
-
-.crvi-timeline__event--incident .crvi-timeline__event__icon i {
-    color: #fff;
-}
-
-.crvi-timeline__event--incident .crvi-timeline__event__date {
+.crvi-timeline__event--incident .crvi-timeline__event__date-icon {
+    background: #ef4444;
     color: #fff;
 }
 
+.crvi-timeline__event--incident .crvi-timeline__event__date,
 .crvi-timeline__event--incident .crvi-timeline__event__title {
-    color: #dc3545;
+    color: #dc2626;
 }
 
 /* Responsive */
 @media (max-width: 768px) {
     .crvi-timeline {
-        padding-left: 40px;
-    }
-    
-    .crvi-timeline__event {
-        flex-direction: column;
-    }
-    
-    .crvi-timeline__event__icon {
-        border-radius: 8px 8px 0 0;
-        min-width: auto;
-    }
-    
-    .crvi-timeline__event__content {
-        border-radius: 0 0 8px 8px;
+        padding-left: 50px;
     }
     
     .crvi-timeline__event:before {
-        width: 30px;
-        height: 30px;
-        left: -42px;
+        width: 35px;
+        height: 35px;
+        left: -68px;
+        font-size: 0.9rem;
     }
     
     .crvi-timeline__event:after {
-        left: -27px;
-        width: 2px;
+        left: -53px;
+        width: 3px;
+    }
+    
+    .crvi-timeline__event__header {
+        flex-direction: column;
+        align-items: flex-start;
     }
 } 
\ No newline at end of file
diff --git a/assets/js/modules/agenda-modal-buttons.js b/assets/js/modules/agenda-modal-buttons.js
index 3625031..1b7baec 100644
--- a/assets/js/modules/agenda-modal-buttons.js
+++ b/assets/js/modules/agenda-modal-buttons.js
@@ -488,57 +488,63 @@ function displayHistoriqueTimeline(historiqueData) {
             eventType = 'prevu'; // Bleu
             icon = 'fa-clock';
         } else {
-            eventType = 'default'; // Gris clair
+            eventType = 'default'; // Gris
             icon = 'fa-calendar-alt';
         }
         
         const isLastItem = index === historiqueData.length - 1;
+        const eventNumber = index + 1;
         
         html += `
-            <div class="crvi-timeline__event crvi-timeline__event--${eventType} ${isLastItem ? 'crvi-timeline__event--last' : ''}">
-                <div class="crvi-timeline__event__icon">
-                    <i class="fas ${icon}"></i>
-                    <div class="crvi-timeline__event__date">
-                        ${dateFormatted}<br>${heureFormatted}
+            <div class="crvi-timeline__event crvi-timeline__event--${eventType} ${isLastItem ? 'crvi-timeline__event--last' : ''}" data-number="${eventNumber}">
+                <div class="crvi-timeline__event__header">
+                    <div class="crvi-timeline__event__date-wrapper">
+                        <div class="crvi-timeline__event__date-icon">
+                            <i class="fas ${icon}"></i>
+                        </div>
+                        <div class="crvi-timeline__event__date-info">
+                            <div class="crvi-timeline__event__date">${dateFormatted}</div>
+                            <div class="crvi-timeline__event__time">${heureFormatted}</div>
+                        </div>
                     </div>
                 </div>
+                
+                <div class="crvi-timeline__event__title">
+                    ${hasIncident ? '<i class="fas fa-exclamation-triangle me-2"></i>' : ''}
+                    ${rdv.type || 'Rendez-vous'}
+                </div>
+                
                 <div class="crvi-timeline__event__content">
-                    <div class="crvi-timeline__event__title">
-                        ${hasIncident ? '<i class="fas fa-exclamation-triangle me-2"></i>' : ''}
-                        ${rdv.type || 'Rendez-vous'}
+                    <div class="mb-2">
+                        <strong><i class="fas fa-user-md me-2"></i>Intervenant:</strong> ${intervenantNom}
                     </div>
-                    <div class="crvi-timeline__event__description">
+                    <div class="mb-2">
+                        <strong><i class="fas fa-tools me-2"></i>Type d'intervention:</strong> ${typeInterventionNom}
+                    </div>
+                    ${rdv.statut ? `
                         <div class="mb-2">
-                            <strong><i class="fas fa-user-md me-2"></i>Intervenant:</strong> ${intervenantNom}
+                            <strong><i class="fas fa-info-circle me-2"></i>Statut:</strong> 
+                            <span class="badge bg-${eventType === 'present' ? 'success' : eventType === 'prevu' ? 'primary' : eventType === 'incident' ? 'danger' : 'secondary'}">${rdv.statut}</span>
                         </div>
+                    ` : ''}
+                    ${rdv.commentaire ? `
                         <div class="mb-2">
-                            <strong><i class="fas fa-tools me-2"></i>Type d'intervention:</strong> ${typeInterventionNom}
+                            <strong><i class="fas fa-comment me-2"></i>Commentaire:</strong> ${rdv.commentaire}
                         </div>
-                        ${rdv.statut ? `
-                            <div class="mb-2">
-                                <strong><i class="fas fa-info-circle me-2"></i>Statut:</strong> 
-                                <span class="badge bg-${eventType === 'present' ? 'success' : eventType === 'prevu' ? 'primary' : eventType === 'incident' ? 'danger' : 'secondary'}">${rdv.statut}</span>
+                    ` : ''}
+                    ${hasIncident ? `
+                        <div class="alert alert-danger mt-3 mb-0" style="background-color: #fee; border-left: 4px solid #dc3545; padding: 12px;">
+                            <strong><i class="fas fa-exclamation-triangle me-2"></i>Incident signalé</strong>
+                            <div class="mt-2">
+                                <strong>Résumé:</strong> ${rdv.incident.resume_incident || 'Non renseigné'}
                             </div>
-                        ` : ''}
-                        ${rdv.commentaire ? `
-                            <div class="mb-2">
-                                <strong><i class="fas fa-comment me-2"></i>Commentaire:</strong> ${rdv.commentaire}
-                            </div>
-                        ` : ''}
-                        ${hasIncident ? `
-                            <div class="alert alert-danger mt-3 mb-0">
-                                <strong><i class="fas fa-exclamation-triangle me-2"></i>Incident signalé</strong>
+                            ${rdv.incident.commentaire_incident ? `
                                 <div class="mt-2">
-                                    <strong>Résumé:</strong> ${rdv.incident.resume_incident || 'Non renseigné'}
+                                    <strong>Commentaire:</strong> ${rdv.incident.commentaire_incident}
                                 </div>
-                                ${rdv.incident.commentaire_incident ? `
-                                    <div class="mt-2">
-                                        <strong>Commentaire:</strong> ${rdv.incident.commentaire_incident}
-                                    </div>
-                                ` : ''}
-                            </div>
-                        ` : ''}
-                    </div>
+                            ` : ''}
+                        </div>
+                    ` : ''}
                 </div>
             </div>
         `;