diff --git a/src/components/HoraireModal/CirculationCalendar.css b/src/components/HoraireModal/CirculationCalendar.css
index 4cc20a7..eb17da4 100644
--- a/src/components/HoraireModal/CirculationCalendar.css
+++ b/src/components/HoraireModal/CirculationCalendar.css
@@ -191,3 +191,85 @@
   transform: none !important;
   cursor: default;
 }
+
+/* Dark Mode */
+body.dark-mode .cal-templates,
+body.dark-mode .cal-scroll-area,
+body.dark-mode .cal-legend,
+[data-theme="dark"] .cal-templates,
+[data-theme="dark"] .cal-scroll-area,
+[data-theme="dark"] .cal-legend {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .cal-templates-label,
+[data-theme="dark"] .cal-templates-label {
+  color: #e2e8f0;
+}
+
+body.dark-mode .cal-tpl-btn,
+[data-theme="dark"] .cal-tpl-btn {
+  background: #0b111e;
+  border-color: #243247;
+  color: #cbd5e1;
+}
+
+body.dark-mode .cal-tpl-btn:hover,
+[data-theme="dark"] .cal-tpl-btn:hover {
+  background: #1e293b;
+  border-color: #3b82f6;
+  color: #f8fafc;
+}
+
+body.dark-mode .cal-month-title,
+[data-theme="dark"] .cal-month-title {
+  color: #f8fafc;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .cal-header,
+[data-theme="dark"] .cal-header {
+  color: #94a3b8;
+}
+
+body.dark-mode .cal-day,
+[data-theme="dark"] .cal-day {
+  background: #0b111e;
+  border-color: #243247;
+  color: #e2e8f0;
+}
+
+body.dark-mode .cal-day:not(.disabled):not(.empty):hover,
+[data-theme="dark"] .cal-day:not(.disabled):not(.empty):hover {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 1px #38bdf8;
+}
+
+body.dark-mode .cal-day.disabled,
+[data-theme="dark"] .cal-day.disabled {
+  background: #111827;
+  color: #4b5563;
+  border-color: #1f2937;
+}
+
+body.dark-mode .cal-day.weekend,
+[data-theme="dark"] .cal-day.weekend {
+  background: #1f1b13;
+  color: #fcd34d;
+  border-color: #3d2f14;
+}
+
+body.dark-mode .cal-day.ferie,
+[data-theme="dark"] .cal-day.ferie {
+  background: #270d13;
+  color: #fca5a5;
+  border-color: #4c1d24;
+}
+
+body.dark-mode .cal-legend-item,
+[data-theme="dark"] .cal-legend-item {
+  color: #94a3b8;
+}
+
diff --git a/src/components/header/AppHeader.css b/src/components/header/AppHeader.css
index aaca718..6ee96aa 100644
--- a/src/components/header/AppHeader.css
+++ b/src/components/header/AppHeader.css
@@ -526,3 +526,164 @@
   }
 }
 
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .app-header-shell,
+[data-theme="dark"] .app-header-shell {
+  background: #151f30;
+  border-bottom-color: #243247;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+}
+
+body.dark-mode .app-header-title h1,
+[data-theme="dark"] .app-header-title h1 {
+  color: #f8fafc;
+}
+
+body.dark-mode .app-header-title span,
+[data-theme="dark"] .app-header-title span {
+  color: #94a3b8;
+}
+
+body.dark-mode .app-menu-group > a,
+body.dark-mode .app-menu-group > button,
+[data-theme="dark"] .app-menu-group > a,
+[data-theme="dark"] .app-menu-group > button {
+  color: #cbd5e1;
+}
+
+body.dark-mode .app-menu-group > a:hover,
+body.dark-mode .app-menu-group > button:hover,
+body.dark-mode .app-menu-group > a.active,
+body.dark-mode .app-menu-group > button.active,
+[data-theme="dark"] .app-menu-group > a:hover,
+[data-theme="dark"] .app-menu-group > button:hover,
+[data-theme="dark"] .app-menu-group > a.active,
+[data-theme="dark"] .app-menu-group > button.active {
+  background: #1a2a42;
+  color: #38bdf8;
+}
+
+body.dark-mode .app-submenu,
+[data-theme="dark"] .app-submenu {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .app-submenu a,
+[data-theme="dark"] .app-submenu a {
+  color: #cbd5e1;
+}
+
+body.dark-mode .app-submenu a:hover,
+body.dark-mode .app-submenu a.active,
+[data-theme="dark"] .app-submenu a:hover,
+[data-theme="dark"] .app-submenu a.active {
+  background: #1a2a42;
+  color: #38bdf8;
+}
+
+body.dark-mode .app-header-notification-btn,
+[data-theme="dark"] .app-header-notification-btn {
+  background: #0e1726;
+  border-color: #243247;
+  color: #38bdf8;
+}
+
+body.dark-mode .app-notifications-drawer,
+[data-theme="dark"] .app-notifications-drawer {
+  background: #151f30;
+  border-left-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .app-notifications-head,
+[data-theme="dark"] .app-notifications-head {
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .app-notification-item,
+[data-theme="dark"] .app-notification-item {
+  background: #0e1726;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .app-notification-item:hover,
+[data-theme="dark"] .app-notification-item:hover {
+  background: #1a2a42;
+}
+
+body.dark-mode .app-notification-item strong,
+[data-theme="dark"] .app-notification-item strong {
+  color: #f8fafc;
+}
+
+body.dark-mode .app-notification-item span,
+body.dark-mode .app-notification-item small,
+[data-theme="dark"] .app-notification-item span,
+[data-theme="dark"] .app-notification-item small {
+  color: #94a3b8;
+}
+
+body.dark-mode .app-header-user-pill,
+[data-theme="dark"] .app-header-user-pill {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .app-header-user-pill span,
+[data-theme="dark"] .app-header-user-pill span {
+  color: #f8fafc;
+}
+
+body.dark-mode .app-header-user-accordion,
+[data-theme="dark"] .app-header-user-accordion {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .app-header-user-accordion a,
+body.dark-mode .app-header-user-accordion button,
+[data-theme="dark"] .app-header-user-accordion a,
+[data-theme="dark"] .app-header-user-accordion button {
+  color: #cbd5e1;
+}
+
+body.dark-mode .app-header-user-accordion a:hover,
+body.dark-mode .app-header-user-accordion button:hover,
+[data-theme="dark"] .app-header-user-accordion a:hover,
+[data-theme="dark"] .app-header-user-accordion button:hover {
+  background: #1a2a42;
+  color: #38bdf8;
+}
+
+body.dark-mode .app-header-menu-toggle,
+[data-theme="dark"] .app-header-menu-toggle {
+  background: #0e1726;
+  border-color: #243247;
+  color: #38bdf8;
+}
+
+@media (max-width: 980px) {
+  body.dark-mode .app-top-menu,
+  [data-theme="dark"] .app-top-menu {
+    background: #151f30;
+    border-color: #243247;
+  }
+
+  body.dark-mode .app-submenu,
+  [data-theme="dark"] .app-submenu {
+    background: #0e1726;
+  }
+
+  body.dark-mode .app-header-user-accordion,
+  [data-theme="dark"] .app-header-user-accordion {
+    background: #0e1726;
+  }
+}
+
+
diff --git a/src/dark-mode.css b/src/dark-mode.css
index eaf0767..3ccf383 100644
--- a/src/dark-mode.css
+++ b/src/dark-mode.css
@@ -208,61 +208,48 @@ body.dark-mode .service-badge {
 }
 
 /* Dashboard Overrides */
-body.dark-mode .dashboard-page {
-  background-color: #121212 !important;
+body.dark-mode .dashboard-page-root,
+body.dark-mode .dashboard-page,
+[data-theme="dark"] .dashboard-page-root,
+[data-theme="dark"] .dashboard-page {
+  background-color: #0b111e !important;
 }
-body.dark-mode .dashboard-hero {
-  background: linear-gradient(140deg, #1e1e1e 0%, #2a2a2a 70%, #333 100%) !important;
-  color: #e0e0e0 !important;
-  box-shadow: 0 14px 35px rgba(0,0,0,0.5) !important;
+body.dark-mode .dashboard-hero-card,
+[data-theme="dark"] .dashboard-hero-card {
+  background: linear-gradient(135deg, #051829 0%, #0d2847 60%, #15416b 100%) !important;
+  border: 1px solid #243247 !important;
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
 }
-body.dark-mode .dashboard-hero h1,
-body.dark-mode .dashboard-hero p,
-body.dark-mode .dashboard-hero strong,
-body.dark-mode .dashboard-subtitle,
-body.dark-mode .dashboard-kicker {
-  color: #e0e0e0 !important;
+body.dark-mode .dashboard-kpi-card,
+body.dark-mode .dashboard-widget-card,
+body.dark-mode .dashboard-status-bar,
+[data-theme="dark"] .dashboard-kpi-card,
+[data-theme="dark"] .dashboard-widget-card,
+[data-theme="dark"] .dashboard-status-bar {
+  background-color: #151f30 !important;
+  border-color: #243247 !important;
+  color: #f8fafc !important;
 }
-body.dark-mode .stat-card,
-body.dark-mode .dashboard-widget,
-body.dark-mode .widget-header-panel,
-body.dark-mode .widget-content-panel {
-  background-color: #1e1e1e !important;
-  border-color: #333 !important;
-  color: #e0e0e0 !important;
+body.dark-mode .dashboard-incident-item,
+body.dark-mode .dashboard-schedule-item,
+body.dark-mode .dashboard-action-tile,
+[data-theme="dark"] .dashboard-incident-item,
+[data-theme="dark"] .dashboard-schedule-item,
+[data-theme="dark"] .dashboard-action-tile {
+  background-color: #0e1726 !important;
+  border-color: #243247 !important;
+  color: #f8fafc !important;
 }
-body.dark-mode .stat-card-title,
-body.dark-mode .stat-card-value,
-body.dark-mode .stat-card-subtitle,
-body.dark-mode .widget-item-text strong,
-body.dark-mode .perturbation-item-route,
-body.dark-mode .horaire-item-route,
-body.dark-mode .perturbation-item-details,
-body.dark-mode .quick-action-row-left {
-  color: #e0e0e0 !important;
-}
-body.dark-mode .stat-card-icon-wrap {
-  background-color: #333 !important;
-  color: #e0e0e0 !important;
-}
-body.dark-mode .quick-action-row {
-  background-color: #2a2a2a !important;
-  border-color: #333 !important;
-  color: #e0e0e0 !important;
-}
-body.dark-mode .quick-action-row:hover {
-  background-color: #333 !important;
-  color: #fff !important;
-}
-body.dark-mode .quick-action-icon {
-  background-color: #444 !important;
-  color: #e0e0e0 !important;
-}
-body.dark-mode .perturbation-item:hover,
-body.dark-mode .horaire-item:hover {
-  background-color: #2a2a2a !important;
-  border-color: #444 !important;
+body.dark-mode .dashboard-incident-item:hover,
+body.dark-mode .dashboard-schedule-item:hover,
+body.dark-mode .dashboard-action-tile:hover,
+[data-theme="dark"] .dashboard-incident-item:hover,
+[data-theme="dark"] .dashboard-schedule-item:hover,
+[data-theme="dark"] .dashboard-action-tile:hover {
+  background-color: #152238 !important;
+  border-color: #38bdf8 !important;
 }
+
 body.dark-mode .widget-header {
   background-color: #2a2a2a !important;
   border-color: #333 !important;
@@ -565,6 +552,11 @@ body.dark-mode .materiel-roulant-card
 
 body.dark-mode .dashboard-page,
 body.dark-mode .travaux-page,
+body.dark-mode .travaux-page-root,
+body.dark-mode .perturbations-page-root,
+body.dark-mode .gares-page-root,
+body.dark-mode .materiels-page-root,
+body.dark-mode .horaires-page-root,
 body.dark-mode .parametres-page,
 body.dark-mode .tarifs-page,
 body.dark-mode .materiel-roulant-page,
@@ -577,7 +569,7 @@ body.dark-mode .systeme-maj-page,
 body.dark-mode .activer-compte-page,
 body.dark-mode .acces-non-autorise-page,
 body.dark-mode .menu-page {
-  background-color: #121212 !important;
+  background-color: #0b111e !important;
 }
 
 body.dark-mode .premium-checkbox-label.selected {
@@ -586,3 +578,4 @@ body.dark-mode .premium-checkbox-label.selected {
   border-color: #0d47a1 !important;
 }
 
+
diff --git a/src/pages/acces-non-autorise/AccesNonAutorise.css b/src/pages/acces-non-autorise/AccesNonAutorise.css
index e44586c..4cf734e 100644
--- a/src/pages/acces-non-autorise/AccesNonAutorise.css
+++ b/src/pages/acces-non-autorise/AccesNonAutorise.css
@@ -31,3 +31,25 @@
   margin: 0 0 18px;
 }
 
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .acces-non-autorise-card,
+[data-theme="dark"] .acces-non-autorise-card {
+  background: #151f30;
+  border-color: #243247;
+  color: #f8fafc;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .acces-non-autorise-card h2,
+[data-theme="dark"] .acces-non-autorise-card h2 {
+  color: #f8fafc;
+}
+
+body.dark-mode .acces-non-autorise-card p,
+[data-theme="dark"] .acces-non-autorise-card p {
+  color: #94a3b8;
+}
+
+
diff --git a/src/pages/activer-compte/ActiverCompte.css b/src/pages/activer-compte/ActiverCompte.css
index c415219..87ef398 100644
--- a/src/pages/activer-compte/ActiverCompte.css
+++ b/src/pages/activer-compte/ActiverCompte.css
@@ -50,3 +50,28 @@
   }
 }
 
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .activation-account-card,
+[data-theme="dark"] .activation-account-card {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .activation-account-card h3,
+[data-theme="dark"] .activation-account-card h3 {
+  color: #f8fafc;
+}
+
+body.dark-mode .activation-account-card p,
+[data-theme="dark"] .activation-account-card p {
+  color: #cbd5e1;
+}
+
+body.dark-mode .activation-link,
+[data-theme="dark"] .activation-link {
+  color: #38bdf8;
+}
+
+
diff --git a/src/pages/annonces-sonores/AnnoncesSonores.css b/src/pages/annonces-sonores/AnnoncesSonores.css
index 57f9e2d..c74e06b 100644
--- a/src/pages/annonces-sonores/AnnoncesSonores.css
+++ b/src/pages/annonces-sonores/AnnoncesSonores.css
@@ -2058,3 +2058,59 @@
   background-color: var(--as-gray-100);
 }
 
+/* Dark Mode */
+body.dark-mode .annonces-page,
+[data-theme="dark"] .annonces-page {
+  background: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .annonces-page-header,
+body.dark-mode .as-panel,
+body.dark-mode .as-card,
+body.dark-mode .as-modal-content,
+[data-theme="dark"] .annonces-page-header,
+[data-theme="dark"] .as-panel,
+[data-theme="dark"] .as-card,
+[data-theme="dark"] .as-modal-content {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+}
+
+body.dark-mode .annonces-page-header h2,
+[data-theme="dark"] .annonces-page-header h2 {
+  color: #f8fafc;
+}
+
+body.dark-mode .as-input-select,
+body.dark-mode .as-input-text,
+body.dark-mode .as-input-textarea,
+[data-theme="dark"] .as-input-select,
+[data-theme="dark"] .as-input-text,
+[data-theme="dark"] .as-input-textarea {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .as-table th,
+[data-theme="dark"] .as-table th {
+  background-color: #0e1726;
+  border-bottom-color: #243247;
+  color: #94a3b8;
+}
+
+body.dark-mode .as-table td,
+[data-theme="dark"] .as-table td {
+  border-bottom-color: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark-mode .as-table tbody tr:hover,
+[data-theme="dark"] .as-table tbody tr:hover {
+  background-color: #1a273c;
+}
+
+
diff --git a/src/pages/attribution-materiel-roulant/AttributionMaterielRoulant.css b/src/pages/attribution-materiel-roulant/AttributionMaterielRoulant.css
index 283a3ba..c22e8a6 100644
--- a/src/pages/attribution-materiel-roulant/AttributionMaterielRoulant.css
+++ b/src/pages/attribution-materiel-roulant/AttributionMaterielRoulant.css
@@ -373,4 +373,81 @@
   }
 }
 
+/* Dark Mode */
+body.dark-mode .attribution-mr-page,
+[data-theme="dark"] .attribution-mr-page {
+  background-color: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .attribution-mr-header h2,
+[data-theme="dark"] .attribution-mr-header h2 {
+  color: #f8fafc;
+}
+
+body.dark-mode .attribution-mr-description,
+[data-theme="dark"] .attribution-mr-description {
+  color: #94a3b8;
+}
+
+body.dark-mode .attribution-mr-toolbar,
+body.dark-mode .attribution-mr-timeline-wrap,
+[data-theme="dark"] .attribution-mr-toolbar,
+[data-theme="dark"] .attribution-mr-timeline-wrap {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .attribution-mr-direction-btn,
+[data-theme="dark"] .attribution-mr-direction-btn {
+  background: #0b111e;
+  border-color: #243247;
+  color: #cbd5e1;
+}
+
+body.dark-mode .attribution-mr-direction-btn.is-active,
+[data-theme="dark"] .attribution-mr-direction-btn.is-active {
+  background: #0284c7;
+  border-color: #0284c7;
+  color: #ffffff;
+}
+
+body.dark-mode .attribution-mr-gantt-header,
+[data-theme="dark"] .attribution-mr-gantt-header {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .attribution-mr-gantt-row,
+[data-theme="dark"] .attribution-mr-gantt-row {
+  border-bottom-color: #1e293b;
+}
+
+body.dark-mode .attribution-mr-gantt-label,
+[data-theme="dark"] .attribution-mr-gantt-label {
+  background: #111a28;
+  border-right-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .attribution-mr-materiels-group,
+[data-theme="dark"] .attribution-mr-materiels-group {
+  background: #111a28;
+  border-color: #243247;
+}
+
+body.dark-mode .attribution-mr-materiels-group-title,
+[data-theme="dark"] .attribution-mr-materiels-group-title {
+  color: #f8fafc;
+}
+
+body.dark-mode .attribution-mr-materiel-card,
+[data-theme="dark"] .attribution-mr-materiel-card {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+
 
diff --git a/src/pages/attribution-materiel-roulant/VueRoulement.css b/src/pages/attribution-materiel-roulant/VueRoulement.css
index 21f509c..304ccfd 100644
--- a/src/pages/attribution-materiel-roulant/VueRoulement.css
+++ b/src/pages/attribution-materiel-roulant/VueRoulement.css
@@ -196,4 +196,55 @@
 
 .prochains-departs li:last-child {
   border-bottom: none;
+}
+
+/* Dark Mode */
+body.dark-mode .vue-roulement-container,
+[data-theme="dark"] .vue-roulement-container {
+  background-color: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .materiel-card,
+[data-theme="dark"] .materiel-card {
+  background-color: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .materiel-header,
+[data-theme="dark"] .materiel-header {
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .materiel-header h3,
+[data-theme="dark"] .materiel-header h3 {
+  color: #f8fafc;
+}
+
+body.dark-mode .materiel-header p,
+[data-theme="dark"] .materiel-header p {
+  color: #94a3b8;
+}
+
+body.dark-mode .ligne-section h4,
+[data-theme="dark"] .ligne-section h4 {
+  color: #e2e8f0;
+}
+
+body.dark-mode .timeline-body,
+[data-theme="dark"] .timeline-body {
+  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 12 - 1px), #243247 calc(100% / 12 - 1px), #243247 calc(100% / 12));
+}
+
+body.dark-mode .prochains-departs ul,
+[data-theme="dark"] .prochains-departs ul {
+  border-color: #243247;
+  background: #111a28;
+}
+
+body.dark-mode .prochains-departs li,
+[data-theme="dark"] .prochains-departs li {
+  border-bottom-color: #1e293b;
+  color: #e2e8f0;
 }
\ No newline at end of file
diff --git a/src/pages/dashboard/Dashboard.css b/src/pages/dashboard/Dashboard.css
index d97036d..ba42cbd 100644
--- a/src/pages/dashboard/Dashboard.css
+++ b/src/pages/dashboard/Dashboard.css
@@ -1,384 +1,1210 @@
-.dashboard-page {
-  background: #f3f7fc;
+/* ==========================================================================
+   DASHBOARD PAGE — MODERN SNCF DESIGN SYSTEM
+   ========================================================================== */
+
+.dashboard-page-root {
+  min-height: calc(100vh - 72px);
+  background-color: #f1f5f9;
+  padding: 24px 20px 48px;
+  font-family: 'Avenir', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: #0f172a;
 }
 
-.dashboard-page .panel-content {
-  width: min(1380px, 100%);
+.dashboard-container {
+  max-width: 1380px;
   margin: 0 auto;
 }
 
-.dashboard-hero {
-  background: linear-gradient(140deg, #082e4f 0%, #11507e 70%, #1d5f90 100%);
-  border-radius: 16px;
-  color: #f8fbff;
-  padding: 28px;
+/* ==========================================================================
+   1. HERO BANNER
+   ========================================================================== */
+.dashboard-hero-card {
+  background: linear-gradient(135deg, #062743 0%, #0d3b66 50%, #0088ce 100%);
+  border-radius: 18px;
+  padding: 28px 32px;
+  color: #ffffff;
   display: flex;
   justify-content: space-between;
-  gap: 18px;
-  align-items: flex-start;
-  margin-bottom: 22px;
-  box-shadow: 0 14px 35px rgba(8, 46, 79, 0.22);
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 16px 36px rgba(6, 39, 67, 0.22);
+  position: relative;
+  overflow: hidden;
 }
 
-.dashboard-kicker {
-  margin: 0 0 8px;
+.dashboard-hero-card::after {
+  content: '';
+  position: absolute;
+  top: -60px;
+  right: -60px;
+  width: 240px;
+  height: 240px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
+  pointer-events: none;
+}
+
+.dashboard-hero-content {
+  max-width: 760px;
+  z-index: 1;
+}
+
+.dashboard-hero-kicker-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.dashboard-hero-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.14);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
+  color: #e0f2fe;
+}
+
+.dashboard-hero-kicker wcs-mat-icon {
+  font-size: 14px;
+  color: #38bdf8;
+}
+
+.dashboard-region-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(56, 189, 248, 0.2);
+  border: 1px solid rgba(56, 189, 248, 0.4);
+  padding: 4px 12px;
+  border-radius: 999px;
   font-size: 12px;
+  font-weight: 600;
+  color: #f0f9ff;
+}
+
+.dashboard-region-badge wcs-mat-icon {
+  font-size: 14px;
+  color: #7dd3fc;
+}
+
+.dashboard-hero-title {
+  margin: 0 0 10px;
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: #ffffff;
+  line-height: 1.2;
+}
+
+.dashboard-user-greeting {
+  font-weight: 400;
   opacity: 0.9;
 }
 
-.dashboard-hero h1 {
+.dashboard-hero-desc {
   margin: 0;
-  font-size: 32px;
-  color: white;
+  font-size: 14px;
+  line-height: 1.6;
+  color: rgba(240, 249, 255, 0.88);
 }
 
-.dashboard-subtitle {
-  margin: 10px 0 0;
-  max-width: 760px;
-  color: rgba(247, 251, 255, 0.9);
-}
-
-.dashboard-hero-side {
+.dashboard-hero-actions {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 10px;
-}
-
-.dashboard-hero-side p {
-  margin: 0;
-  font-size: 13px;
-  color: rgba(247, 251, 255, 0.92);
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 14px;
-  margin-bottom: 18px;
+  flex-shrink: 0;
+  z-index: 1;
 }
 
-.stat-card {
-  background: #ffffff;
-  border-radius: 12px;
-  padding: 16px;
-  border: 1px solid #dbe3ed;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+.dashboard-sync-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: rgba(240, 249, 255, 0.85);
+  background: rgba(0, 0, 0, 0.18);
+  padding: 4px 10px;
+  border-radius: 999px;
 }
 
-.stat-card-header {
+.dashboard-pulse-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #22c55e;
+  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  animation: pulseGreen 2s infinite;
+}
+
+@keyframes pulseGreen {
+  0% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+  }
+}
+
+.dashboard-btn-group {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 10px;
 }
 
-.stat-card-icon-wrap {
-  width: 38px;
-  height: 38px;
+.dashboard-btn-group wcs-button {
+  --wcs-button-border-radius: 8px;
+}
+
+.dashboard-quick-create-btn {
+  --wcs-button-background-color: rgba(255, 255, 255, 0.15);
+  --wcs-button-color: #ffffff;
+  --wcs-button-border-color: rgba(255, 255, 255, 0.3);
+}
+
+.dashboard-quick-create-btn:hover {
+  --wcs-button-background-color: rgba(255, 255, 255, 0.25);
+}
+
+/* ==========================================================================
+   2. SUPERVISION STATUS BAR
+   ========================================================================== */
+.dashboard-status-bar {
+  background: #ffffff;
+  border: 1px solid #dbe3ed;
+  border-radius: 14px;
+  padding: 14px 20px;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+}
+
+.dashboard-status-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.dashboard-status-indicator {
+  width: 36px;
+  height: 36px;
   border-radius: 10px;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-.stat-card-primary .stat-card-icon-wrap { background: #e9f5ff; color: #0d5f97; }
-.stat-card-warning .stat-card-icon-wrap { background: #fff6e8; color: #b15d06; }
-.stat-card-info .stat-card-icon-wrap { background: #e8f7f8; color: #0f7575; }
-.stat-card-secondary .stat-card-icon-wrap { background: #f4efff; color: #5c3bb8; }
-.stat-card-success .stat-card-icon-wrap { background: #e9f8ef; color: #1f7f3f; }
-
-.stat-card-content {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
+.dashboard-status-indicator.is-success {
+  background: #ecfdf5;
+  color: #10b981;
 }
 
-.stat-card-title {
-  font-size: 12px;
-  color: #556277;
+.dashboard-status-indicator.is-warning {
+  background: #fef2f2;
+  color: #ef4444;
+}
+
+.dashboard-status-indicator.is-info {
+  background: #f0f9ff;
+  color: #0284c7;
+}
+
+.dashboard-status-indicator.is-secondary {
+  background: #f5f3ff;
+  color: #7c3aed;
+}
+
+.dashboard-status-indicator wcs-mat-icon {
+  font-size: 20px;
+}
+
+.dashboard-status-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dashboard-status-label {
+  font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.04em;
+  color: #64748b;
 }
 
-.stat-card-value {
-  font-size: 30px;
-  line-height: 1.2;
-  font-weight: 700;
+.dashboard-status-text strong {
+  font-size: 14px;
   color: #0f172a;
-  margin-top: 2px;
 }
 
-.stat-card-subtitle {
-  font-size: 13px;
-  color: #637287;
+.dashboard-status-divider {
+  width: 1px;
+  height: 32px;
+  background: #e2e8f0;
+  margin: 0 16px;
 }
 
-.widgets-grid {
+/* ==========================================================================
+   3. KPI CARDS
+   ========================================================================== */
+.dashboard-kpis-grid {
   display: grid;
-  grid-template-columns: 1.15fr 1fr;
-  gap: 14px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
 }
 
-.widgets-column {
+.dashboard-kpi-card {
+  background: #ffffff;
+  border: 1px solid #dbe3ed;
+  border-radius: 14px;
+  padding: 18px 20px;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
+  cursor: pointer;
   display: flex;
   flex-direction: column;
-  gap: 14px;
-}
-
-.dashboard-widget {
-  background: #ffffff;
-  border-radius: 12px;
-  border: 1px solid #dbe3ed;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+  transition: all 0.2s ease;
+  position: relative;
   overflow: hidden;
 }
 
-.widget-panel {
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
+.dashboard-kpi-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: #cbd5e1;
+  transition: background 0.2s ease;
 }
 
-.widget-panel:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
+.dashboard-kpi-card.card-horaires::before { background: #0088ce; }
+.dashboard-kpi-card.card-perturbations::before { background: #f59e0b; }
+.dashboard-kpi-card.card-gares::before { background: #10b981; }
+.dashboard-kpi-card.card-lignes::before { background: #8b5cf6; }
+
+.dashboard-kpi-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
+  border-color: #cbd5e1;
 }
 
-.widget-header {
+.dashboard-kpi-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid #e8eef6;
-  background: #f8fbff;
+  margin-bottom: 12px;
 }
 
-.widget-header-panel {
-  background: #ffffff;
-}
-
-.widget-title-icon {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  background: #eef6ff;
-  color: #094074;
-  display: inline-flex;
+.dashboard-kpi-icon-wrapper {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.widget-content-panel {
+.card-horaires .dashboard-kpi-icon-wrapper { background: #e0f2fe; color: #0284c7; }
+.card-perturbations .dashboard-kpi-icon-wrapper { background: #fef3c7; color: #d97706; }
+.card-gares .dashboard-kpi-icon-wrapper { background: #dcfce7; color: #16a34a; }
+.card-lignes .dashboard-kpi-icon-wrapper { background: #ede9fe; color: #7c3aed; }
+
+.dashboard-kpi-badge {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.dashboard-kpi-badge.badge-danger {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.dashboard-kpi-badge.badge-neutral {
+  background: #ecfdf5;
+  color: #16a34a;
+}
+
+.dashboard-kpi-number {
+  font-size: 32px;
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1.1;
+  margin-bottom: 4px;
+}
+
+.dashboard-kpi-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+  margin-bottom: 12px;
+}
+
+.dashboard-kpi-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #64748b;
+  border-top: 1px solid #f1f5f9;
+  padding-top: 10px;
+  margin-top: auto;
+}
+
+.dashboard-kpi-footer wcs-mat-icon {
+  font-size: 14px;
+  transition: transform 0.2s ease;
+}
+
+.dashboard-kpi-card:hover .dashboard-kpi-footer wcs-mat-icon {
+  transform: translateX(3px);
+  color: #0088ce;
+}
+
+/* ==========================================================================
+   4. MAIN GRID LAYOUT
+   ========================================================================== */
+.dashboard-main-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  align-items: flex-start;
+}
+
+.dashboard-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.dashboard-widget-card {
   background: #ffffff;
+  border: 1px solid #dbe3ed;
+  border-radius: 16px;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
+  overflow: hidden;
 }
 
-.widget-link-btn {
-  --wcs-button-font-size: 13px;
+.dashboard-widget-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid #eef2f6;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
-.widget-list-panel {
-  padding: 8px;
+.dashboard-widget-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.widget-header h3 {
+.dashboard-widget-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.dashboard-widget-icon.icon-warning {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.dashboard-widget-icon.icon-info {
+  background: #e0f2fe;
+  color: #0284c7;
+}
+
+.dashboard-widget-icon.icon-primary {
+  background: #e0e7ff;
+  color: #4338ca;
+}
+
+.dashboard-widget-title {
   margin: 0;
   font-size: 16px;
   font-weight: 700;
   color: #0f172a;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
 }
 
-.perturbation-item,
-.horaire-item {
-  padding: 12px;
-  border: 1px solid transparent;
-  border-radius: 10px;
-  margin-bottom: 6px;
+.dashboard-widget-subtitle {
+  font-size: 12px;
+  color: #64748b;
 }
 
-.perturbation-item:last-child,
-.horaire-item:last-child {
-  margin-bottom: 0;
+.dashboard-widget-body {
+  padding: 16px;
 }
 
-.perturbation-item:hover,
-.horaire-item:hover {
-  background: #f7fbff;
-  border-color: #dbe3ed;
-}
-
-.widget-item-main {
+/* Incident Items */
+.dashboard-incident-list {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  flex-direction: column;
   gap: 10px;
 }
 
-.widget-item-text {
-  min-width: 0;
+.dashboard-incident-item {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-.widget-item-text strong {
-  font-size: 14px;
+.dashboard-incident-item:hover {
+  background: #ffffff;
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
+  transform: translateY(-1px);
+}
+
+.dashboard-incident-item.item-suppression {
+  border-left: 4px solid #ef4444;
+}
+
+.dashboard-incident-item.item-retard {
+  border-left: 4px solid #f59e0b;
+}
+
+.dashboard-incident-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dashboard-incident-train-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 700;
   color: #0f172a;
 }
 
-.perturbation-item-header,
-.horaire-item-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  align-items: flex-start;
-}
-
-.perturbation-item-route,
-.horaire-item-route {
-  margin-top: 4px;
-  color: #576579;
-  font-size: 13px;
-}
-
-.perturbation-item-details {
-  margin-top: 8px;
-  display: flex;
-  justify-content: space-between;
-  font-size: 13px;
-  color: #576579;
-  gap: 10px;
-}
-
-.perturbation-item-details span {
+.dashboard-badge-pill {
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
 }
 
-.status-active {
-  color: #1f7f3f;
-  font-weight: 600;
+.dashboard-badge-pill.pill-warning {
+  background: #fef3c7;
+  color: #b45309;
 }
 
-.status-inactive {
-  color: #7b8798;
+.dashboard-badge-pill.pill-danger {
+  background: #fee2e2;
+  color: #b91c1c;
 }
 
-.horaire-item-route {
+.dashboard-badge-pill.pill-info {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.dashboard-incident-route {
   display: flex;
   align-items: center;
   gap: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
 }
 
-.horaire-type-badge {
-  margin-left: 8px;
+.dashboard-incident-route wcs-mat-icon {
+  font-size: 14px;
+  color: #94a3b8;
 }
 
-.quick-actions {
-  padding: 10px;
-  display: grid;
-  gap: 8px;
-}
-
-.quick-action-row {
-  text-decoration: none;
-  color: #1f2937;
-  width: 100%;
-  border: 1px solid #dbe3ed;
-  border-radius: 10px;
-  background: #ffffff;
-  padding: 10px 12px;
+.dashboard-incident-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
-  cursor: pointer;
+  font-size: 12px;
+  color: #64748b;
+  margin-top: 2px;
 }
 
-.quick-action-row:hover {
-  background: #eef6ff;
-  color: #094074;
-}
-
-.quick-action-row-left {
+.dashboard-incident-cause {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  font-weight: 600;
+  gap: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 80%;
 }
 
-.quick-action-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 7px;
-  background: #f3f8ff;
+.dashboard-incident-cause wcs-mat-icon {
+  font-size: 14px;
+}
+
+.dashboard-status-tag {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.dashboard-status-tag.tag-active {
+  color: #dc2626;
+  background: #fef2f2;
+}
+
+.dashboard-status-tag.tag-inactive {
+  color: #64748b;
+  background: #f1f5f9;
+}
+
+/* Quick Action Tiles */
+.dashboard-quick-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.dashboard-action-tile {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 14px 16px;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  transition: all 0.15s ease;
+  color: #0f172a;
+}
+
+.dashboard-action-tile:hover {
+  background: #ffffff;
+  border-color: #0088ce;
+  box-shadow: 0 4px 14px rgba(0, 136, 206, 0.1);
+  transform: translateY(-1px);
+}
+
+.dashboard-action-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.dashboard-action-icon.bg-amber { background: #fef3c7; color: #d97706; }
+.dashboard-action-icon.bg-orange { background: #ffedd5; color: #ea580c; }
+.dashboard-action-icon.bg-sky { background: #e0f2fe; color: #0284c7; }
+.dashboard-action-icon.bg-indigo { background: #e0e7ff; color: #4f46e5; }
+
+.dashboard-action-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.dashboard-action-info strong {
+  font-size: 13px;
+  color: #0f172a;
+}
+
+.dashboard-action-info span {
+  font-size: 11px;
+  color: #64748b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action-chevron {
+  font-size: 18px;
+  color: #94a3b8;
+  transition: transform 0.2s ease, color 0.2s ease;
+}
+
+.dashboard-action-tile:hover .action-chevron {
+  transform: translateX(3px);
+  color: #0088ce;
+}
+
+/* Schedule Items */
+.dashboard-schedule-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dashboard-schedule-item {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 14px 16px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dashboard-schedule-item:hover {
+  background: #ffffff;
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
+  transform: translateY(-1px);
+}
+
+.dashboard-schedule-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dashboard-schedule-badges {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.train-id-badge {
   display: inline-flex;
   align-items: center;
+  gap: 5px;
+  font-size: 13px;
+  font-weight: 800;
+  color: #0f172a;
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  padding: 3px 8px;
+  border-radius: 6px;
+}
+
+.train-id-badge wcs-mat-icon {
+  font-size: 14px;
+  color: #0088ce;
+}
+
+.train-type-pill {
+  font-size: 11px;
+  font-weight: 700;
+  color: #0284c7;
+  background: #e0f2fe;
+  padding: 3px 8px;
+  border-radius: 999px;
+}
+
+.line-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #475569;
+  background: #f1f5f9;
+  padding: 3px 8px;
+  border-radius: 6px;
+}
+
+.line-pill wcs-mat-icon {
+  font-size: 13px;
+  color: #64748b;
+}
+
+.dashboard-schedule-timeline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 4px 0;
+}
+
+.timeline-station {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.timeline-station.arrival {
+  align-items: flex-end;
+}
+
+.station-time {
+  font-size: 16px;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.station-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+}
+
+.timeline-connector {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.connector-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #cbd5e1;
+}
+
+.timeline-connector wcs-mat-icon {
+  position: relative;
+  background: #f8fafc;
+  padding: 0 4px;
+  font-size: 16px;
+  color: #0088ce;
+}
+
+.dashboard-schedule-stops {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #64748b;
+  border-top: 1px solid #f1f5f9;
+  padding-top: 6px;
+}
+
+.dashboard-schedule-stops wcs-mat-icon {
+  font-size: 14px;
+}
+
+/* System summary card */
+.dashboard-system-card {
+  background: linear-gradient(135deg, #0e1726 0%, #151f30 100%);
+  border-radius: 14px;
+  padding: 16px 20px;
+  color: #ffffff;
+}
+
+.dashboard-system-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.dashboard-system-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: rgba(56, 189, 248, 0.15);
+  color: #38bdf8;
+  display: flex;
+  align-items: center;
   justify-content: center;
 }
 
-.quick-action-row-refresh {
-  font: inherit;
+.dashboard-system-header h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #f8fafc;
 }
 
-.dashboard-state {
-  min-height: 190px;
+.dashboard-system-header p {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.dashboard-system-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 12px;
+}
+
+.system-stat-col {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.system-stat-col span {
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.system-stat-col strong {
+  font-size: 18px;
+  color: #f8fafc;
+}
+
+.system-stat-col strong.text-warning {
+  color: #fbbf24;
+}
+
+.system-stat-col strong.text-success {
+  color: #4ade80;
+}
+
+/* States */
+.dashboard-loading-box,
+.dashboard-empty-box {
+  padding: 36px 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #637287;
+  text-align: center;
   gap: 10px;
 }
 
-.dashboard-state-icon {
-  font-size: 44px;
-  opacity: 0.4;
+.dashboard-loading-box span {
+  font-size: 13px;
+  color: #64748b;
 }
 
-@media (max-width: 1080px) {
-  .widgets-grid {
+.dashboard-empty-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 4px;
+}
+
+.dashboard-empty-icon.is-success {
+  background: #ecfdf5;
+  color: #10b981;
+}
+
+.dashboard-empty-icon.is-info {
+  background: #f0f9ff;
+  color: #0284c7;
+}
+
+.dashboard-empty-icon wcs-mat-icon {
+  font-size: 28px;
+}
+
+.dashboard-empty-box h4 {
+  margin: 0;
+  font-size: 15px;
+  color: #0f172a;
+}
+
+.dashboard-empty-box p {
+  margin: 0;
+  font-size: 13px;
+  color: #64748b;
+  max-width: 320px;
+}
+
+/* ==========================================================================
+   5. RESPONSIVE BREAKPOINTS
+   ========================================================================== */
+@media (max-width: 1200px) {
+  .dashboard-kpis-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 980px) {
+  .dashboard-hero-card {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 24px;
+  }
+
+  .dashboard-hero-actions {
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .dashboard-btn-group {
+    width: 100%;
+  }
+
+  .dashboard-btn-group wcs-button {
+    flex: 1;
+  }
+
+  .dashboard-main-grid {
     grid-template-columns: 1fr;
   }
 
-  .dashboard-hero {
+  .dashboard-status-bar {
     flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
   }
 
-  .dashboard-hero-side {
-    align-items: flex-start;
+  .dashboard-status-divider {
+    display: none;
   }
 }
 
-@media (max-width: 700px) {
-  .dashboard-hero {
-    border-radius: 12px;
-    padding: 20px;
+@media (max-width: 640px) {
+  .dashboard-page-root {
+    padding: 14px 12px 36px;
   }
 
-  .dashboard-hero h1 {
+  .dashboard-hero-card {
+    border-radius: 14px;
+    padding: 18px 16px;
+  }
+
+  .dashboard-hero-title {
     font-size: 24px;
   }
 
-  .stat-card-value {
-    font-size: 24px;
+  .dashboard-kpis-grid {
+    grid-template-columns: 1fr;
   }
 
-  .widget-header {
+  .dashboard-quick-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-btn-group {
     flex-direction: column;
-    align-items: flex-start;
-    gap: 8px;
   }
 
-  .quick-action-row {
-    padding: 10px;
-  }
-
-  .horaire-item-route {
-    flex-wrap: wrap;
+  .dashboard-btn-group wcs-button {
+    width: 100%;
   }
 }
 
+/* ==========================================================================
+   6. DARK MODE
+   ========================================================================== */
+body.dark-mode .dashboard-page-root,
+[data-theme="dark"] .dashboard-page-root {
+  background-color: #0b111e;
+  color: #f8fafc;
+}
+
+body.dark-mode .dashboard-hero-card,
+[data-theme="dark"] .dashboard-hero-card {
+  background: linear-gradient(135deg, #051829 0%, #0d2847 60%, #15416b 100%);
+  border: 1px solid #243247;
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .dashboard-status-bar,
+[data-theme="dark"] .dashboard-status-bar {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .dashboard-status-text strong,
+[data-theme="dark"] .dashboard-status-text strong {
+  color: #f8fafc;
+}
+
+body.dark-mode .dashboard-status-label,
+[data-theme="dark"] .dashboard-status-label {
+  color: #94a3b8;
+}
+
+body.dark-mode .dashboard-status-divider,
+[data-theme="dark"] .dashboard-status-divider {
+  background: #243247;
+}
+
+body.dark-mode .dashboard-kpi-card,
+[data-theme="dark"] .dashboard-kpi-card {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .dashboard-kpi-card:hover,
+[data-theme="dark"] .dashboard-kpi-card:hover {
+  border-color: #38bdf8;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .dashboard-kpi-number,
+[data-theme="dark"] .dashboard-kpi-number {
+  color: #f8fafc;
+}
+
+body.dark-mode .dashboard-kpi-title,
+[data-theme="dark"] .dashboard-kpi-title {
+  color: #94a3b8;
+}
+
+body.dark-mode .dashboard-kpi-footer,
+[data-theme="dark"] .dashboard-kpi-footer {
+  border-top-color: #243247;
+  color: #64748b;
+}
+
+body.dark-mode .dashboard-widget-card,
+[data-theme="dark"] .dashboard-widget-card {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .dashboard-widget-header,
+[data-theme="dark"] .dashboard-widget-header {
+  background: #151f30;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .dashboard-widget-title,
+[data-theme="dark"] .dashboard-widget-title {
+  color: #f8fafc;
+}
+
+body.dark-mode .dashboard-widget-subtitle,
+[data-theme="dark"] .dashboard-widget-subtitle {
+  color: #94a3b8;
+}
+
+body.dark-mode .dashboard-incident-item,
+body.dark-mode .dashboard-schedule-item,
+[data-theme="dark"] .dashboard-incident-item,
+[data-theme="dark"] .dashboard-schedule-item {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .dashboard-incident-item:hover,
+body.dark-mode .dashboard-schedule-item:hover,
+[data-theme="dark"] .dashboard-incident-item:hover,
+[data-theme="dark"] .dashboard-schedule-item:hover {
+  background: #152238;
+  border-color: #334e68;
+}
+
+body.dark-mode .dashboard-incident-train-badge,
+[data-theme="dark"] .dashboard-incident-train-badge {
+  color: #f8fafc;
+}
+
+body.dark-mode .dashboard-incident-route,
+[data-theme="dark"] .dashboard-incident-route {
+  color: #cbd5e1;
+}
+
+body.dark-mode .dashboard-incident-cause,
+[data-theme="dark"] .dashboard-incident-cause {
+  color: #94a3b8;
+}
+
+body.dark-mode .dashboard-action-tile,
+[data-theme="dark"] .dashboard-action-tile {
+  background: #0e1726;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .dashboard-action-tile:hover,
+[data-theme="dark"] .dashboard-action-tile:hover {
+  background: #152238;
+  border-color: #38bdf8;
+}
+
+body.dark-mode .dashboard-action-info strong,
+[data-theme="dark"] .dashboard-action-info strong {
+  color: #f8fafc;
+}
+
+body.dark-mode .dashboard-action-info span,
+[data-theme="dark"] .dashboard-action-info span {
+  color: #94a3b8;
+}
+
+body.dark-mode .train-id-badge,
+[data-theme="dark"] .train-id-badge {
+  background: #151f30;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .line-pill,
+[data-theme="dark"] .line-pill {
+  background: #151f30;
+  color: #cbd5e1;
+}
+
+body.dark-mode .station-time,
+[data-theme="dark"] .station-time {
+  color: #f8fafc;
+}
+
+body.dark-mode .station-title,
+[data-theme="dark"] .station-title {
+  color: #94a3b8;
+}
+
+body.dark-mode .connector-line,
+[data-theme="dark"] .connector-line {
+  background: #243247;
+}
+
+body.dark-mode .timeline-connector wcs-mat-icon,
+[data-theme="dark"] .timeline-connector wcs-mat-icon {
+  background: #0e1726;
+}
+
+body.dark-mode .dashboard-schedule-stops,
+[data-theme="dark"] .dashboard-schedule-stops {
+  border-top-color: #1a2a42;
+  color: #94a3b8;
+}
+
+body.dark-mode .dashboard-empty-box h4,
+[data-theme="dark"] .dashboard-empty-box h4 {
+  color: #f8fafc;
+}
+
+body.dark-mode .dashboard-empty-box p,
+[data-theme="dark"] .dashboard-empty-box p {
+  color: #94a3b8;
+}
diff --git a/src/pages/dashboard/Dashboard.js b/src/pages/dashboard/Dashboard.js
index 0d84640..e93655c 100644
--- a/src/pages/dashboard/Dashboard.js
+++ b/src/pages/dashboard/Dashboard.js
@@ -16,6 +16,7 @@ export default function Dashboard() {
 
   // État du chargement
   const [loading, setLoading] = useState(true);
+  const [lastRefreshed, setLastRefreshed] = useState(new Date());
 
   // Perturbations récentes
   const [recentPerturbations, setRecentPerturbations] = useState([]);
@@ -23,12 +24,14 @@ export default function Dashboard() {
   // Horaires récents
   const [recentHoraires, setRecentHoraires] = useState([]);
   const [scopedRegionId, setScopedRegionId] = useState(null);
+  const [currentUser, setCurrentUser] = useState(null);
 
   // Fonction de chargement des données
   const loadDashboardData = useCallback(async () => {
     setLoading(true);
     try {
       const user = getCurrentUser();
+      setCurrentUser(user);
       const regionId = getScopedRegionId(user);
       setScopedRegionId(regionId || null);
 
@@ -88,10 +91,11 @@ export default function Dashboard() {
       });
 
       // Perturbations récentes (5 dernières)
-      setRecentPerturbations(perturbations.slice(0, 5));
+      setRecentPerturbations(perturbations.slice(0, 6));
 
-      // Horaires récents (5 derniers)
-      setRecentHoraires(horaires.slice(0, 5));
+      // Horaires récents (6 derniers)
+      setRecentHoraires(horaires.slice(0, 6));
+      setLastRefreshed(new Date());
 
     } catch (error) {
       console.error('Erreur lors du chargement du dashboard:', error);
@@ -115,224 +119,472 @@ export default function Dashboard() {
     window.location.href = path;
   };
 
-  // Rendu des cartes de statistiques
-  const renderStatCard = (title, value, icon, color = 'primary', subtitle = null) => (
-    <div className={`stat-card stat-card-${color}`}>
-      <div className="stat-card-header">
-        <div className="stat-card-icon-wrap">
-          <wcs-mat-icon icon={icon}></wcs-mat-icon>
-        </div>
-        <div className="stat-card-content">
-          <span className="stat-card-title">{title}</span>
-          <span className="stat-card-value">{loading ? '...' : value}</span>
-          {subtitle && <span className="stat-card-subtitle">{subtitle}</span>}
-        </div>
-      </div>
-    </div>
-  );
-
-  // Rendu de la liste des perturbations récentes
-  const renderRecentPerturbations = () => (
-    <div className="dashboard-widget widget-panel">
-      <div className="widget-header widget-header-panel">
-        <h3>
-          <span className="widget-title-icon"><wcs-mat-icon icon="warning"></wcs-mat-icon></span>
-          Perturbations récentes
-        </h3>
-        <wcs-button
-          className="wcs-secondary wcs-small widget-link-btn"
-          onClick={() => navigate('/perturbations')}
-        >
-          Voir tout
-        </wcs-button>
-      </div>
-      <div className="widget-content widget-content-panel">
-        {loading ? (
-          <div className="dashboard-state widget-state-panel">
-            <wcs-spinner mode="border" />
-            <p>Chargement...</p>
-          </div>
-        ) : recentPerturbations.length === 0 ? (
-          <div className="dashboard-state dashboard-state-empty widget-state-panel">
-            <wcs-mat-icon className="dashboard-state-icon" icon="check_circle"></wcs-mat-icon>
-            <p>Aucune perturbation</p>
-          </div>
-        ) : (
-          <div className="perturbations-list widget-list-panel">
-            {recentPerturbations.map(p => (
-              <div key={p.id} className="perturbation-item widget-list-item">
-                <div className="perturbation-item-header widget-item-main">
-                  <div className="widget-item-text">
-                    <strong>{p.horaire?.numero_train || 'N/A'}</strong>
-                    <span className="perturbation-item-route">
-                      {p.horaire?.gare_depart_nom} → {p.horaire?.gare_arrivee_nom}
-                    </span>
-                  </div>
-                  <wcs-badge className={
-                    p.type_perturbation === 'retard' ? 'wcs-warning' :
-                    p.type_perturbation === 'suppression' ? 'wcs-danger' :
-                    'wcs-info'
-                  }>
-                    {p.type_perturbation === 'retard' ? `Retard +${p.duree_retard_minutes || 0} min` :
-                     p.type_perturbation === 'suppression' ? 'Supprime' :
-                     'Modifié'}
-                  </wcs-badge>
-                </div>
-                <div className="perturbation-item-details">
-                  <span>
-                    <wcs-mat-icon icon="info"></wcs-mat-icon>
-                    {p.cause || 'Non spécifiée'}
-                  </span>
-                  <span className={p.actif ? 'status-active' : 'status-inactive'}>
-                    {p.actif ? '● Active' : '○ Inactive'}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  // Rendu de la liste des horaires récents
-  const renderRecentHoraires = () => (
-    <div className="dashboard-widget widget-panel">
-      <div className="widget-header widget-header-panel">
-        <h3>
-          <span className="widget-title-icon"><wcs-mat-icon icon="schedule"></wcs-mat-icon></span>
-          Horaires récents
-        </h3>
-        <wcs-button
-          className="wcs-secondary wcs-small widget-link-btn"
-          onClick={() => navigate('/horaires')}
-        >
-          Voir tout
-        </wcs-button>
-      </div>
-      <div className="widget-content widget-content-panel">
-        {loading ? (
-          <div className="dashboard-state widget-state-panel">
-            <wcs-spinner mode="border" />
-            <p>Chargement...</p>
-          </div>
-        ) : recentHoraires.length === 0 ? (
-          <div className="dashboard-state dashboard-state-empty widget-state-panel">
-            <wcs-mat-icon className="dashboard-state-icon" icon="train"></wcs-mat-icon>
-            <p>Aucun horaire</p>
-          </div>
-        ) : (
-          <div className="horaires-list widget-list-panel">
-            {recentHoraires.map(h => (
-              <div key={h.id} className="horaire-item widget-list-item">
-                <div className="horaire-item-header widget-item-main">
-                  <div className="widget-item-text">
-                    <strong>{h.numero_train}</strong>
-                    {h.type_train && (
-                      <wcs-badge className="wcs-info horaire-type-badge">
-                        {h.type_train}
-                      </wcs-badge>
-                    )}
-                  </div>
-                  {h.ligne_nom && (
-                    <wcs-badge className="wcs-secondary">{h.ligne_nom}</wcs-badge>
-                  )}
-                </div>
-                <div className="horaire-item-route">
-                  <span>
-                    {h.gare_depart_nom} ({formatHeure(h.heure_depart)})
-                  </span>
-                  <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
-                  <span>
-                    {h.gare_arrivee_nom} ({formatHeure(h.heure_arrivee)})
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  // Rendu des actions rapides
-  const renderQuickActions = () => (
-    <div className="dashboard-widget widget-panel">
-      <div className="widget-header widget-header-panel">
-        <h3>
-          <span className="widget-title-icon"><wcs-mat-icon icon="bolt"></wcs-mat-icon></span>
-          Actions rapides
-        </h3>
-      </div>
-      <div className="widget-content widget-content-panel">
-        <div className="quick-actions">
-          <a className="quick-action-row" href="/perturbations/creer">
-            <span className="quick-action-row-left">
-              <span className="quick-action-icon"><wcs-mat-icon icon="add"></wcs-mat-icon></span>
-              <span>Créer une perturbation</span>
-            </span>
-            <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
-          </a>
-          <a className="quick-action-row" href="/horaires">
-            <span className="quick-action-row-left">
-              <span className="quick-action-icon"><wcs-mat-icon icon="schedule"></wcs-mat-icon></span>
-              <span>Gérer les horaires</span>
-            </span>
-            <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
-          </a>
-          <a className="quick-action-row" href="/gares">
-            <span className="quick-action-row-left">
-              <span className="quick-action-icon"><wcs-mat-icon icon="location_on"></wcs-mat-icon></span>
-              <span>Gérer les gares</span>
-            </span>
-            <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
-          </a>
-          <button className="quick-action-row quick-action-row-refresh" type="button" onClick={loadDashboardData}>
-            <span className="quick-action-row-left">
-              <span className="quick-action-icon"><wcs-mat-icon icon="refresh"></wcs-mat-icon></span>
-              <span>Actualiser les données</span>
-            </span>
-            <wcs-mat-icon icon="refresh"></wcs-mat-icon>
-          </button>
-        </div>
-      </div>
-    </div>
-  );
+  // Ponctualité théorique estimée
+  const calculatePunctuality = () => {
+    if (!stats.horaires.total) return 100;
+    const impacted = stats.perturbations.actives;
+    const rate = Math.max(0, Math.min(100, Math.round(((stats.horaires.total - impacted) / stats.horaires.total) * 100)));
+    return rate;
+  };
 
   return (
-    <div className="sncf-groupe dashboard-page panel-layout">
-      <div className="panel-content">
-        <header className="dashboard-hero">
-          <div>
-            <p className="dashboard-kicker">Panel de gestion</p>
-            <h1>Tableau de bord</h1>
-            <p className="dashboard-subtitle">Suivez l'activite des horaires, perturbations et donnees d'exploitation en temps reel.</p>
+    <div className="dashboard-page-root">
+      <div className="dashboard-container">
+        
+        {/* ================================================================
+            HERO BANNER
+           ================================================================ */}
+        <section className="dashboard-hero-card">
+          <div className="dashboard-hero-content">
+            <div className="dashboard-hero-kicker-row">
+              <span className="dashboard-hero-kicker">
+                <wcs-mat-icon icon="speed"></wcs-mat-icon>
+                Centre de supervision ferroviaire
+              </span>
+              {scopedRegionId && (
+                <span className="dashboard-region-badge">
+                  <wcs-mat-icon icon="location_on"></wcs-mat-icon>
+                  Région : {scopedRegionId}
+                </span>
+              )}
+            </div>
+            
+            <h1 className="dashboard-hero-title">
+              Tableau de bord
+              {currentUser?.nom ? <span className="dashboard-user-greeting">, {currentUser.prenom || currentUser.nom}</span> : null}
+            </h1>
+            
+            <p className="dashboard-hero-desc">
+              Pilotage centralisé des circulations, gestion du plan de transport, détection des aléas et état des infrastructures en temps réel.
+            </p>
           </div>
-          <div className="dashboard-hero-side">
-            <wcs-button className="wcs-primary" onClick={loadDashboardData}>
-              <wcs-mat-icon icon="refresh"></wcs-mat-icon>
-              Actualiser
-            </wcs-button>
-            {scopedRegionId && <p>Region courante : <strong>{scopedRegionId}</strong></p>}
-          </div>
-        </header>
 
-        <div className="stats-grid">
-          {renderStatCard('Horaires', stats.horaires.total, 'schedule', 'primary', `${stats.horaires.actifs} actifs`)}
-          {renderStatCard('Perturbations', stats.perturbations.total, 'warning', 'warning', `${stats.perturbations.actives} actives`)}
-          {renderStatCard('Gares', stats.gares.total, 'location_on', 'info', 'Desservies')}
-          {renderStatCard('Lignes', stats.lignes.total, 'route', 'secondary', 'Actives')}
-          {renderStatCard('Types de trains', stats.typesTrains.total, 'train', 'success', 'Disponibles')}
-          {renderStatCard('Retards', stats.perturbations.retards, 'schedule', 'warning', 'En cours')}
+          <div className="dashboard-hero-actions">
+            <div className="dashboard-sync-status">
+              <span className="dashboard-pulse-dot"></span>
+              <span>Dernière synchro : {lastRefreshed.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })}</span>
+            </div>
+
+            <div className="dashboard-btn-group">
+              <wcs-button
+                className="wcs-primary"
+                onClick={loadDashboardData}
+                disabled={loading}
+              >
+                <wcs-mat-icon icon="refresh"></wcs-mat-icon>
+                Actualiser
+              </wcs-button>
+
+              <wcs-button
+                className="wcs-secondary dashboard-quick-create-btn"
+                onClick={() => navigate('/perturbations/creer')}
+              >
+                <wcs-mat-icon icon="warning"></wcs-mat-icon>
+                Signaler un incident
+              </wcs-button>
+            </div>
+          </div>
+        </section>
+
+        {/* ================================================================
+            SUPERVISION STATUS BAR
+           ================================================================ */}
+        <div className="dashboard-status-bar">
+          <div className="dashboard-status-item">
+            <div className={`dashboard-status-indicator ${stats.perturbations.actives > 0 ? 'is-warning' : 'is-success'}`}>
+              <wcs-mat-icon icon={stats.perturbations.actives > 0 ? 'warning' : 'check_circle'}></wcs-mat-icon>
+            </div>
+            <div className="dashboard-status-text">
+              <span className="dashboard-status-label">État du Réseau</span>
+              <strong>{stats.perturbations.actives > 0 ? `${stats.perturbations.actives} incident(s) en cours` : 'Circulation normale et fluide'}</strong>
+            </div>
+          </div>
+
+          <div className="dashboard-status-divider"></div>
+
+          <div className="dashboard-status-item">
+            <div className="dashboard-status-indicator is-info">
+              <wcs-mat-icon icon="analytics"></wcs-mat-icon>
+            </div>
+            <div className="dashboard-status-text">
+              <span className="dashboard-status-label">Taux de régularité théorique</span>
+              <strong>{calculatePunctuality()}% à l'heure</strong>
+            </div>
+          </div>
+
+          <div className="dashboard-status-divider"></div>
+
+          <div className="dashboard-status-item">
+            <div className="dashboard-status-indicator is-secondary">
+              <wcs-mat-icon icon="train"></wcs-mat-icon>
+            </div>
+            <div className="dashboard-status-text">
+              <span className="dashboard-status-label">Sillons actifs</span>
+              <strong>{stats.horaires.total} circulations programmées</strong>
+            </div>
+          </div>
         </div>
 
-        <div className="widgets-grid">
-          <div className="widgets-column">
-            {renderRecentPerturbations()}
-            {renderQuickActions()}
+        {/* ================================================================
+            KPI CARDS
+           ================================================================ */}
+        <div className="dashboard-kpis-grid">
+          {/* Sillons / Horaires */}
+          <div className="dashboard-kpi-card card-horaires" onClick={() => navigate('/horaires')}>
+            <div className="dashboard-kpi-top">
+              <div className="dashboard-kpi-icon-wrapper">
+                <wcs-mat-icon icon="schedule"></wcs-mat-icon>
+              </div>
+              <span className="dashboard-kpi-badge">{stats.horaires.actifs} actifs</span>
+            </div>
+            <div className="dashboard-kpi-number">{loading ? '...' : stats.horaires.total}</div>
+            <div className="dashboard-kpi-title">Horaires & Sillons</div>
+            <div className="dashboard-kpi-footer">
+              <span>Gérer les plans de transport</span>
+              <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
+            </div>
+          </div>
+
+          {/* Perturbations */}
+          <div className="dashboard-kpi-card card-perturbations" onClick={() => navigate('/perturbations')}>
+            <div className="dashboard-kpi-top">
+              <div className="dashboard-kpi-icon-wrapper">
+                <wcs-mat-icon icon="warning"></wcs-mat-icon>
+              </div>
+              <span className={`dashboard-kpi-badge ${stats.perturbations.actives > 0 ? 'badge-danger' : 'badge-neutral'}`}>
+                {stats.perturbations.actives} actives
+              </span>
+            </div>
+            <div className="dashboard-kpi-number">{loading ? '...' : stats.perturbations.total}</div>
+            <div className="dashboard-kpi-title">Perturbations & Aléas</div>
+            <div className="dashboard-kpi-footer">
+              <span>{stats.perturbations.retards} retards · {stats.perturbations.suppressions} suppressions</span>
+              <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
+            </div>
+          </div>
+
+          {/* Gares */}
+          <div className="dashboard-kpi-card card-gares" onClick={() => navigate('/gares')}>
+            <div className="dashboard-kpi-top">
+              <div className="dashboard-kpi-icon-wrapper">
+                <wcs-mat-icon icon="location_on"></wcs-mat-icon>
+              </div>
+              <span className="dashboard-kpi-badge">Réseau</span>
+            </div>
+            <div className="dashboard-kpi-number">{loading ? '...' : stats.gares.total}</div>
+            <div className="dashboard-kpi-title">Gares & Points d'arrêt</div>
+            <div className="dashboard-kpi-footer">
+              <span>Configuration des quais & services</span>
+              <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
+            </div>
+          </div>
+
+          {/* Lignes */}
+          <div className="dashboard-kpi-card card-lignes" onClick={() => navigate('/horaires')}>
+            <div className="dashboard-kpi-top">
+              <div className="dashboard-kpi-icon-wrapper">
+                <wcs-mat-icon icon="route"></wcs-mat-icon>
+              </div>
+              <span className="dashboard-kpi-badge">Maillage</span>
+            </div>
+            <div className="dashboard-kpi-number">{loading ? '...' : stats.lignes.total}</div>
+            <div className="dashboard-kpi-title">Lignes Commerciales</div>
+            <div className="dashboard-kpi-footer">
+              <span>{stats.typesTrains.total} matériels types</span>
+              <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
+            </div>
           </div>
-          <div className="widgets-column">{renderRecentHoraires()}</div>
         </div>
+
+        {/* ================================================================
+            MAIN PANELS GRID
+           ================================================================ */}
+        <div className="dashboard-main-grid">
+          
+          {/* Colonne gauche : Perturbations et Actions */}
+          <div className="dashboard-column">
+            
+            {/* Widget Perturbations récentes */}
+            <div className="dashboard-widget-card">
+              <div className="dashboard-widget-header">
+                <div className="dashboard-widget-title-wrap">
+                  <div className="dashboard-widget-icon icon-warning">
+                    <wcs-mat-icon icon="warning_amber"></wcs-mat-icon>
+                  </div>
+                  <div>
+                    <h3 className="dashboard-widget-title">Incidents & Perturbations</h3>
+                    <span className="dashboard-widget-subtitle">Derniers aléas déclarés sur le réseau</span>
+                  </div>
+                </div>
+                <wcs-button
+                  className="wcs-secondary wcs-small"
+                  onClick={() => navigate('/perturbations')}
+                >
+                  Tout voir ({stats.perturbations.total})
+                </wcs-button>
+              </div>
+
+              <div className="dashboard-widget-body">
+                {loading ? (
+                  <div className="dashboard-loading-box">
+                    <wcs-spinner mode="border"></wcs-spinner>
+                    <span>Chargement des incidents...</span>
+                  </div>
+                ) : recentPerturbations.length === 0 ? (
+                  <div className="dashboard-empty-box">
+                    <div className="dashboard-empty-icon is-success">
+                      <wcs-mat-icon icon="check_circle_outline"></wcs-mat-icon>
+                    </div>
+                    <h4>Aucune perturbation active</h4>
+                    <p>Toutes les circulations ferroviaires s'effectuent conformément au plan de transport.</p>
+                  </div>
+                ) : (
+                  <div className="dashboard-incident-list">
+                    {recentPerturbations.map(p => (
+                      <div
+                        key={p.id}
+                        className={`dashboard-incident-item ${p.type_perturbation === 'suppression' ? 'item-suppression' : 'item-retard'}`}
+                        onClick={() => navigate(`/perturbations/modifier/${p.id}`)}
+                      >
+                        <div className="dashboard-incident-header">
+                          <div className="dashboard-incident-train-badge">
+                            <wcs-mat-icon icon="train"></wcs-mat-icon>
+                            <strong>{p.horaire?.numero_train || 'Train'}</strong>
+                          </div>
+
+                          <span className={`dashboard-badge-pill ${
+                            p.type_perturbation === 'retard' ? 'pill-warning' :
+                            p.type_perturbation === 'suppression' ? 'pill-danger' :
+                            'pill-info'
+                          }`}>
+                            <wcs-mat-icon icon={p.type_perturbation === 'suppression' ? 'block' : 'schedule'}></wcs-mat-icon>
+                            {p.type_perturbation === 'retard' ? `+${p.duree_retard_minutes || 0} min` :
+                             p.type_perturbation === 'suppression' ? 'Supprimé' :
+                             'Modifié'}
+                          </span>
+                        </div>
+
+                        <div className="dashboard-incident-route">
+                          <span className="station-name">{p.horaire?.gare_depart_nom || 'Départ'}</span>
+                          <wcs-mat-icon icon="trending_flat"></wcs-mat-icon>
+                          <span className="station-name">{p.horaire?.gare_arrivee_nom || 'Arrivée'}</span>
+                        </div>
+
+                        <div className="dashboard-incident-footer">
+                          <span className="dashboard-incident-cause">
+                            <wcs-mat-icon icon="info_outline"></wcs-mat-icon>
+                            {p.cause || 'Motif d\'exploitation non spécifié'}
+                          </span>
+
+                          <span className={`dashboard-status-tag ${p.actif ? 'tag-active' : 'tag-inactive'}`}>
+                            {p.actif ? 'En cours' : 'Résolu'}
+                          </span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Widget Actions Rapides */}
+            <div className="dashboard-widget-card">
+              <div className="dashboard-widget-header">
+                <div className="dashboard-widget-title-wrap">
+                  <div className="dashboard-widget-icon icon-primary">
+                    <wcs-mat-icon icon="bolt"></wcs-mat-icon>
+                  </div>
+                  <div>
+                    <h3 className="dashboard-widget-title">Centre d'actions rapides</h3>
+                    <span className="dashboard-widget-subtitle">Raccourcis de gestion et exploitation</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="dashboard-widget-body">
+                <div className="dashboard-quick-grid">
+                  <a className="dashboard-action-tile" href="/perturbations/creer">
+                    <div className="dashboard-action-icon bg-amber">
+                      <wcs-mat-icon icon="add_alert"></wcs-mat-icon>
+                    </div>
+                    <div className="dashboard-action-info">
+                      <strong>Déclarer un retard / incident</strong>
+                      <span>Ajuster les horaires et diffuser l'information</span>
+                    </div>
+                    <wcs-mat-icon className="action-chevron" icon="chevron_right"></wcs-mat-icon>
+                  </a>
+
+                  <a className="dashboard-action-tile" href="/travaux/creer">
+                    <div className="dashboard-action-icon bg-orange">
+                      <wcs-mat-icon icon="construction"></wcs-mat-icon>
+                    </div>
+                    <div className="dashboard-action-info">
+                      <strong>Programmer des travaux</strong>
+                      <span>Définir des chantiers et bus de substitution</span>
+                    </div>
+                    <wcs-mat-icon className="action-chevron" icon="chevron_right"></wcs-mat-icon>
+                  </a>
+
+                  <a className="dashboard-action-tile" href="/horaires/attribution-quais">
+                    <div className="dashboard-action-icon bg-sky">
+                      <wcs-mat-icon icon="alt_route"></wcs-mat-icon>
+                    </div>
+                    <div className="dashboard-action-info">
+                      <strong>Attribution des voies & quais</strong>
+                      <span>Régulation schématique des départs et arrivées</span>
+                    </div>
+                    <wcs-mat-icon className="action-chevron" icon="chevron_right"></wcs-mat-icon>
+                  </a>
+
+                  <a className="dashboard-action-tile" href="/attribution-materiel-roulant">
+                    <div className="dashboard-action-icon bg-indigo">
+                      <wcs-mat-icon icon="directions_railway"></wcs-mat-icon>
+                    </div>
+                    <div className="dashboard-action-info">
+                      <strong>Roulement du matériel</strong>
+                      <span>Affectation des rames et compositions</span>
+                    </div>
+                    <wcs-mat-icon className="action-chevron" icon="chevron_right"></wcs-mat-icon>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          {/* Colonne droite : Horaires & Circulation */}
+          <div className="dashboard-column">
+            
+            <div className="dashboard-widget-card">
+              <div className="dashboard-widget-header">
+                <div className="dashboard-widget-title-wrap">
+                  <div className="dashboard-widget-icon icon-info">
+                    <wcs-mat-icon icon="schedule"></wcs-mat-icon>
+                  </div>
+                  <div>
+                    <h3 className="dashboard-widget-title">Plan de transport récent</h3>
+                    <span className="dashboard-widget-subtitle">Circulations programmées au référentiel</span>
+                  </div>
+                </div>
+                <wcs-button
+                  className="wcs-secondary wcs-small"
+                  onClick={() => navigate('/horaires')}
+                >
+                  Tous les horaires ({stats.horaires.total})
+                </wcs-button>
+              </div>
+
+              <div className="dashboard-widget-body">
+                {loading ? (
+                  <div className="dashboard-loading-box">
+                    <wcs-spinner mode="border"></wcs-spinner>
+                    <span>Chargement des horaires...</span>
+                  </div>
+                ) : recentHoraires.length === 0 ? (
+                  <div className="dashboard-empty-box">
+                    <div className="dashboard-empty-icon is-info">
+                      <wcs-mat-icon icon="train"></wcs-mat-icon>
+                    </div>
+                    <h4>Aucun horaire enregistré</h4>
+                    <p>Commencez par créer des circulations ou importez une fiche horaire.</p>
+                    <wcs-button
+                      className="wcs-primary wcs-small"
+                      onClick={() => navigate('/horaires')}
+                    >
+                      Ajouter un horaire
+                    </wcs-button>
+                  </div>
+                ) : (
+                  <div className="dashboard-schedule-list">
+                    {recentHoraires.map(h => (
+                      <div
+                        key={h.id}
+                        className="dashboard-schedule-item"
+                        onClick={() => navigate('/horaires')}
+                      >
+                        <div className="dashboard-schedule-header">
+                          <div className="dashboard-schedule-badges">
+                            <span className="train-id-badge">
+                              <wcs-mat-icon icon="train"></wcs-mat-icon>
+                              {h.numero_train}
+                            </span>
+                            {h.type_train && (
+                              <span className="train-type-pill">{h.type_train}</span>
+                            )}
+                          </div>
+                          {h.ligne_nom && (
+                            <span className="line-pill">
+                              <wcs-mat-icon icon="timeline"></wcs-mat-icon>
+                              {h.ligne_nom}
+                            </span>
+                          )}
+                        </div>
+
+                        <div className="dashboard-schedule-timeline">
+                          <div className="timeline-station departure">
+                            <span className="station-time">{formatHeure(h.heure_depart)}</span>
+                            <span className="station-dot"></span>
+                            <span className="station-title">{h.gare_depart_nom || 'Départ'}</span>
+                          </div>
+
+                          <div className="timeline-connector">
+                            <span className="connector-line"></span>
+                            <wcs-mat-icon icon="chevron_right"></wcs-mat-icon>
+                          </div>
+
+                          <div className="timeline-station arrival">
+                            <span className="station-time">{formatHeure(h.heure_arrivee)}</span>
+                            <span className="station-dot"></span>
+                            <span className="station-title">{h.gare_arrivee_nom || 'Arrivée'}</span>
+                          </div>
+                        </div>
+
+                        {h.gares_desservies && h.gares_desservies.length > 0 && (
+                          <div className="dashboard-schedule-stops">
+                            <wcs-mat-icon icon="more_horiz"></wcs-mat-icon>
+                            <span>{h.gares_desservies.length} arrêt(s) intermédiaire(s)</span>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Carte état du système / infos d'exploitation */}
+            <div className="dashboard-system-card">
+              <div className="dashboard-system-header">
+                <div className="dashboard-system-icon">
+                  <wcs-mat-icon icon="storage"></wcs-mat-icon>
+                </div>
+                <div>
+                  <h4>État des services d'exploitation</h4>
+                  <p>Système opérationnel & données à jour</p>
+                </div>
+              </div>
+              <div className="dashboard-system-stats">
+                <div className="system-stat-col">
+                  <span>Circulations</span>
+                  <strong>{stats.horaires.total}</strong>
+                </div>
+                <div className="system-stat-col">
+                  <span>Gares reliées</span>
+                  <strong>{stats.gares.total}</strong>
+                </div>
+                <div className="system-stat-col">
+                  <span>Incidents</span>
+                  <strong className={stats.perturbations.actives > 0 ? 'text-warning' : 'text-success'}>
+                    {stats.perturbations.actives}
+                  </strong>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
       </div>
     </div>
   );
diff --git a/src/pages/gares/Gares.css b/src/pages/gares/Gares.css
index b9159ed..08d37f6 100644
--- a/src/pages/gares/Gares.css
+++ b/src/pages/gares/Gares.css
@@ -1,206 +1,676 @@
-.gares-page {
-  background: #f3f7fc;
+/* ═══════════════════════════════════════════════════════════════════════════
+   GARES & HUBS VOYAGEURS - STYLES MODERNES & DESIGN SYSTEM SNCF
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.gares-page-root {
+  min-height: 100vh;
+  background-color: #f4f7fb;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
-.gares-page-content {
-  width: min(1380px, 100%);
+.gares-modern-container {
+  width: min(1420px, 100%);
   margin: 0 auto;
+  padding: 24px 28px 60px;
+  box-sizing: border-box;
 }
 
-.gares-page-header {
-  background: linear-gradient(140deg, #082e4f 0%, #11507e 70%, #1d5f90 100%);
-  border-radius: 16px;
+/* ═══════════════════════════════════════════════════════════════════════════
+   1. HERO BANNER
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.gares-hero-banner {
+  background: linear-gradient(135deg, #001f3f 0%, #004080 50%, #0074d9 100%);
+  border-radius: 20px;
   color: #f8fbff;
-  padding: 24px;
-  margin-bottom: 14px;
+  padding: 32px 36px;
+  margin-bottom: 24px;
   display: flex;
   justify-content: space-between;
-  gap: 14px;
-  align-items: flex-start;
-  box-shadow: 0 14px 35px rgba(8, 46, 79, 0.22);
+  align-items: center;
+  gap: 24px;
+  box-shadow: 0 16px 36px -10px rgba(0, 64, 128, 0.35);
+  position: relative;
+  overflow: hidden;
 }
 
-.gares-page-kicker {
-  margin: 0 0 8px;
+.gares-hero-banner::after {
+  content: '';
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 260px;
+  height: 260px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.gares-hero-content {
+  max-width: 820px;
+  z-index: 1;
+}
+
+.gares-hero-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.gares-kicker-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fdf2f8;
+  font-size: 11px;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  font-size: 12px;
+  padding: 5px 12px;
+  border-radius: 999px;
 }
 
-.gares-page-header h2 {
+.gares-hero-title {
   margin: 0;
-  font-size: 30px;
-  color: white;
-
+  font-size: 32px;
+  font-weight: 800;
+  color: #ffffff;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
 }
 
-.gares-page-description {
+.gares-hero-subtitle {
   margin: 10px 0 0;
-  color: rgba(247, 251, 255, 0.9);
+  font-size: 14px;
+  line-height: 1.55;
+  color: rgba(240, 248, 255, 0.9);
 }
 
-.gares-header-actions {
-  display: inline-flex;
-  gap: 8px;
-}
-
-.gares-header-import-btn {
-  --wcs-button-background-color: rgba(255, 255, 255, 0.16);
-  --wcs-button-color: #ffffff;
-  --wcs-button-border-color: rgba(255, 255, 255, 0.4);
-}
-
-.gares-toolbar {
-  margin-bottom: 14px;
-  padding: 10px;
-  border-radius: 12px;
-  border: 1px solid #dbe3ed;
-  background: #ffffff;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+.gares-hero-actions {
   display: flex;
-  gap: 10px;
+  align-items: center;
+  gap: 12px;
+  z-index: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   2. KPI CARDS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.gares-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.gares-kpi-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+  position: relative;
+}
+
+.gares-kpi-card:hover {
+  transform: translateY(-2px);
+  border-color: #cbd5e1;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.gares-kpi-card.active {
+  border-color: #0074d9;
+  background: #f0f7ff;
+  box-shadow: 0 8px 24px rgba(0, 116, 217, 0.15);
+}
+
+.gares-kpi-card.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 14px;
+  bottom: 14px;
+  width: 4px;
+  background: #0074d9;
+  border-radius: 0 4px 4px 0;
+}
+
+.gares-kpi-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.kpi-blue { background: #e0f2fe; color: #0284c7; }
+.kpi-purple { background: #f3e8ff; color: #9333ea; }
+.kpi-emerald { background: #d1fae5; color: #059669; }
+.kpi-amber { background: #fef3c7; color: #d97706; }
+
+.gares-kpi-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.gares-kpi-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.gares-kpi-value {
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1.1;
+  margin-top: 2px;
+}
+
+.gares-kpi-subtext {
+  font-size: 11px;
+  color: #94a3b8;
+  margin-top: 2px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   3. CONTROLS & FILTERS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.gares-controls-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.gares-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  border-radius: 12px;
+  padding: 0 16px;
+  height: 46px;
+  transition: all 0.2s ease;
+}
+
+.gares-search-bar:focus-within {
+  background: #ffffff;
+  border-color: #0074d9;
+  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.15);
+}
+
+.gares-modern-input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  color: #1e293b;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.gares-filters-row {
+  display: flex;
+  justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
+  gap: 14px;
 }
 
-.gares-toolbar-input,
-.gares-toolbar-select {
-  min-height: 40px;
-  border: 1px solid #d1dae6;
+.gares-tab-group {
+  display: flex;
+  align-items: center;
+  background: #f1f5f9;
+  padding: 4px;
   border-radius: 10px;
-  padding: 0 12px;
-  font-size: 14px;
-  color: #1f2937;
-  background: #ffffff;
+  gap: 4px;
+  overflow-x: auto;
 }
 
-.gares-toolbar-input {
-  min-width: 240px;
+.gares-tab-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 7px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  white-space: nowrap;
+}
+
+.gares-tab-btn:hover {
+  color: #1e293b;
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.gares-tab-btn.active {
+  background: #ffffff;
+  color: #0f172a;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
 }
 
 .gares-toolbar-reset {
-  min-height: 40px;
-  border: 1px solid #dbe3ed;
-  border-radius: 10px;
-  background: #f8fbff;
-  color: #334155;
-  padding: 0 12px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
+  transition: all 0.15s ease;
 }
 
-.gares-toolbar-count {
-  margin-left: auto;
-  border: 1px solid #dbe3ed;
-  border-radius: 999px;
-  padding: 6px 12px;
-  font-size: 13px;
-  color: #1f2937;
-  background: #f8fbff;
+.gares-toolbar-reset:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+  border-color: #94a3b8;
 }
 
-.gares-page .table-container {
-  border: 1px solid #dbe3ed;
+.view-mode-group {
+  display: flex;
+  background: #f1f5f9;
+  padding: 4px;
+  border-radius: 10px;
+  gap: 4px;
+}
+
+.view-mode-btn {
+  border: none;
+  background: transparent;
+  color: #64748b;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+}
+
+.view-mode-btn.active {
+  background: #ffffff;
+  color: #0074d9;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   4. CARDS GRID VIEW
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.gares-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 18px;
+}
+
+.gare-card-modern {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+.gare-card-modern:hover {
+  transform: translateY(-3px);
+  border-color: #cbd5e1;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
+}
+
+.gare-card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.gare-card-title-box {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.gare-icon-avatar {
+  width: 42px;
+  height: 42px;
   border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+  background: #e0f2fe;
+  color: #0369a1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  flex-shrink: 0;
 }
 
-.gares-page .wcs-table th {
-  background: #f8fbff;
+.gare-card-name {
+  margin: 0 0 4px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.25;
+}
+
+.gare-type-badge {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.badge-ville { background: #dbeafe; color: #1e40af; }
+.badge-interurbaine { background: #fef3c7; color: #92400e; }
+
+.gare-card-details {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.gare-info-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #475569;
+}
+
+.gare-info-item wcs-mat-icon {
+  color: #94a3b8;
+  font-size: 16px;
+}
+
+.gare-transports-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.transport-chip-modern {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 6px;
+  color: #ffffff;
+}
+
+.transport-chip-modern.bus { background: #16a34a; }
+.transport-chip-modern.tram { background: #9333ea; }
+.transport-chip-modern.metro { background: #0284c7; }
+.transport-chip-modern.tram-train { background: #ea580c; }
+.transport-chip-modern.train { background: #475569; }
+
+.gare-services-icons {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding-top: 10px;
+  border-top: 1px dashed #e2e8f0;
+}
+
+.service-icon-pill {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  background: #f1f5f9;
+  color: #64748b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  transition: all 0.15s ease;
+}
+
+.service-icon-pill.active {
+  background: #e0f2fe;
+  color: #0284c7;
+}
+
+.gare-card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 14px;
+  border-top: 1px solid #f1f5f9;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   5. TABLE VIEW
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.gares-table-wrapper {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+}
+
+.gares-modern-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.gares-modern-table thead {
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.gares-modern-table th {
+  padding: 14px 16px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #64748b;
+  letter-spacing: 0.04em;
+}
+
+.gares-modern-table td {
+  padding: 14px 16px;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 13px;
+  color: #334155;
+  vertical-align: middle;
+}
+
+.gares-modern-table tbody tr:hover {
+  background-color: #f8fafc;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   6. MODALS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.gares-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.gares-modal-dialog {
+  background: #ffffff;
+  border-radius: 20px;
+  width: min(920px, 100%);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35);
+  overflow: hidden;
+}
+
+.gares-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 18px 24px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.gares-modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
   color: #0f172a;
 }
 
-.gares-page .wcs-table tr:hover {
-  background: #f7fbff;
+.modal-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid #cbd5e1;
+  background: #ffffff;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
 }
 
-.gares-empty-icon {
-  font-size: 48px;
-}
-
-.gares-action-btn {
-  min-width: 36px;
-}
-
-.gares-modal {
-  max-width: 980px;
-  border: 1px solid #dbe3ed;
-  border-radius: 14px;
-  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
-}
-
-.gares-modal-body {
-  padding: 0;
-}
-
-.gares-modal-alert {
-  margin: 12px 20px 0;
+.modal-close:hover {
+  background: #f1f5f9;
+  color: #0f172a;
 }
 
 .gares-modal-tabs {
   display: flex;
-  border-bottom: 1px solid #e5edf7;
-  padding: 0 20px;
-  gap: 4px;
+  background: #f1f5f9;
+  padding: 6px;
+  border-radius: 12px;
+  margin: 16px 24px 0;
+  gap: 6px;
+  border: 1px solid #e2e8f0;
+  overflow-x: auto;
 }
 
-.gares-modal-tab {
+.gares-modal-tab-btn {
+  flex: 1;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 12px 16px;
-  border: 0;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border: none;
   background: transparent;
-  color: #6b7280;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  border-bottom: 2px solid transparent;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
 }
 
-.gares-modal-tab.active {
-  color: #0b4a7a;
-  border-bottom-color: #0b4a7a;
+.gares-modal-tab-btn:hover {
+  color: #0f172a;
+  background: rgba(255, 255, 255, 0.6);
 }
 
-.gares-modal-content {
-  padding: 20px 24px;
+.gares-modal-tab-btn.active {
+  background: #ffffff;
+  color: #0074d9;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
 }
 
-.gares-form-group-spaced {
-  margin-bottom: 16px;
+.gares-modal-tab-btn wcs-mat-icon {
+  font-size: 18px;
 }
 
-.gares-form-group-spaced-lg {
-  margin-bottom: 20px;
+.gares-modal-body {
+  padding: 24px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.gares-modal-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+/* Form controls */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .gares-form-label {
-  display: block;
-  font-weight: 600;
   font-size: 13px;
-  color: #374151;
-  margin-bottom: 6px;
-}
-
-.gares-transports-select {
-  width: 420px;
-}
-
-.gares-info-layout {
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
+  font-weight: 700;
+  color: #334155;
+  margin-bottom: 2px;
 }
 
 .gares-info-section-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: #1f2937;
   margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 800;
+  color: #0f172a;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding-bottom: 8px;
-  border-bottom: 1px solid #e5e7eb;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  border-bottom: 1px solid #e2e8f0;
 }
 
 .gares-info-grid {
@@ -210,270 +680,448 @@
 }
 
 .gares-info-grid.compact {
-  gap: 8px;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
 
 .gares-col-full {
   grid-column: 1 / -1;
 }
 
-.gares-text-input {
-  width: 100%;
-  padding: 8px 10px;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 14px;
-  box-sizing: border-box;
-}
-
+/* Bool toggle field */
 .gares-bool-field {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px;
-  background: #f9fafb;
-  border-radius: 8px;
-  border: 1px solid #e5e7eb;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 10px 14px;
+  gap: 12px;
 }
 
 .gares-bool-label {
   font-size: 13px;
-  color: #374151;
+  font-weight: 600;
+  color: #334155;
 }
 
 .gares-bool-actions {
-  display: inline-flex;
-  gap: 6px;
+  display: flex;
+  background: #e2e8f0;
+  padding: 2px;
+  border-radius: 8px;
+  gap: 2px;
 }
 
 .gares-bool-btn {
-  padding: 4px 12px;
-  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 5px 12px;
   border: none;
-  cursor: pointer;
+  background: transparent;
+  color: #64748b;
   font-size: 12px;
-  font-weight: 600;
-  background: #e5e7eb;
-  color: #6b7280;
+  font-weight: 700;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.15s ease;
 }
 
 .gares-bool-btn.is-yes {
   background: #16a34a;
-  color: #fff;
+  color: #ffffff;
+  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
 }
 
 .gares-bool-btn.is-no {
-  background: #dc2626;
-  color: #fff;
+  background: #e11d48;
+  color: #ffffff;
+  box-shadow: 0 2px 4px rgba(225, 29, 72, 0.2);
 }
 
-.gares-transport-extended-list {
+/* Quai list */
+.quais-list-modern {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 10px;
+  margin-top: 6px;
 }
 
-.gares-extended-header {
+.quai-row-modern {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.gares-inline-label {
-  margin-bottom: 0;
-}
-
-.gares-extended-count {
-  margin-left: 8px;
-  background: #0088ce;
-  color: #fff;
-  border-radius: 10px;
-  padding: 1px 8px;
-  font-size: 11px;
-  font-weight: 700;
-}
-
-.gares-extended-add-btn {
-  background: #0088ce;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 6px 12px;
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.gares-extended-empty {
+  gap: 12px;
+  background: #f8fafc;
   padding: 10px 14px;
-  background: #f9fafb;
-  border-radius: 8px;
-  border: 1px dashed #d1d5db;
-  color: #9ca3af;
-  font-size: 13px;
-}
-
-.gares-extended-items {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.gares-extended-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr auto;
-  gap: 8px;
-  align-items: center;
-  background: #f9fafb;
-  padding: 10px 12px;
   border-radius: 10px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid #e2e8f0;
 }
 
-.gares-mini-label {
-  font-size: 11px;
-  color: #6b7280;
-  display: block;
-  margin-bottom: 3px;
-}
-
-.gares-extended-remove-btn {
-  background: #dc2626;
-  color: #fff;
-  border: none;
-  border-radius: 6px;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  font-size: 16px;
-}
-
-@media (max-width: 900px) {
-  .gares-page-header {
-    flex-direction: column;
-  }
-
-  .gares-header-actions {
-    width: 100%;
-  }
-
-  .gares-transports-select {
-    width: 100%;
-  }
-
-  .gares-info-grid,
-  .gares-extended-row {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Styling for Hall Management System */
-.halls-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  margin-top: 10px;
-}
-
-.hall-card {
-  background: #ffffff;
-  border: 1px solid #dbe3ed;
+.hall-card-modern {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
-  padding: 16px;
-  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
+  padding: 14px 16px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 }
 
-.hall-header-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.hall-name-input {
-  flex: 1;
-  font-weight: 600;
-  color: #0b4a7a;
-}
-
-.delete-hall-btn-raw {
-  background: #fee2e2;
-  color: #b91c1c;
-  border: 1px solid #fca5a5;
-  border-radius: 8px;
-  padding: 6px 12px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  transition: all 0.2s ease;
-}
-
-.delete-hall-btn-raw:hover {
-  background: #fca5a5;
-  color: #991b1b;
-}
-
-.hall-quais-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px dashed #e5edf7;
-}
-
-.hall-quais-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #6b7280;
-}
-
-.hall-quais-chips {
+.hall-chips-container {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 6px;
 }
 
-.quai-chip-btn {
-  background: #f8fbff;
-  border: 1px solid #dbe3ed;
-  color: #475569;
+.quai-select-chip {
+  padding: 5px 12px;
   border-radius: 8px;
-  padding: 6px 14px;
-  font-size: 13px;
+  border: 1px solid #cbd5e1;
+  background: #ffffff;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  font-weight: 500;
+  transition: all 0.15s ease;
 }
 
-.quai-chip-btn:hover {
-  background: #f1f5f9;
-  border-color: #cbd5e1;
+.quai-select-chip:hover {
+  border-color: #0074d9;
+  color: #0074d9;
 }
 
-.quai-chip-btn.selected {
-  background: #0b4a7a;
-  border-color: #0b4a7a;
+.quai-select-chip.selected {
+  background: #0074d9;
   color: #ffffff;
-  box-shadow: 0 4px 10px rgba(11, 74, 122, 0.25);
+  border-color: #0074d9;
+  box-shadow: 0 2px 6px rgba(0, 116, 217, 0.25);
 }
 
-.quai-chip-btn.selected:hover {
-  background: #08375b;
-  border-color: #08375b;
+/* Responsive */
+@media (max-width: 1024px) {
+  .gares-modern-container {
+    padding: 20px 18px 48px;
+  }
+  .gares-kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .gares-hero-banner {
+    padding: 26px 28px;
+  }
+  .gares-cards-grid {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
 }
 
-.no-quais-hint {
-  font-size: 13px;
+@media (max-width: 768px) {
+  .gares-modern-container {
+    padding: 16px 12px 40px;
+  }
+  .gares-hero-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px 18px;
+    gap: 16px;
+  }
+  .gares-hero-actions {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+  .gares-hero-actions > * {
+    flex: 1;
+    justify-content: center;
+  }
+  .gares-kpi-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .gares-controls-card {
+    padding: 14px;
+  }
+  .gares-filters-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .gares-filter-group {
+    width: 100%;
+  }
+  .gares-cards-grid {
+    grid-template-columns: 1fr;
+  }
+  .gares-info-grid,
+  .gares-info-grid.compact {
+    grid-template-columns: 1fr;
+  }
+  .gares-modal-dialog {
+    width: 95vw;
+    max-height: 95vh;
+  }
+  .gares-modal-header {
+    padding: 14px 18px;
+  }
+  .gares-modal-body {
+    padding: 16px 18px;
+  }
+  .gares-modal-tabs {
+    margin: 12px 16px 0;
+  }
+}
+
+@media (max-width: 480px) {
+  .gares-hero-title {
+    font-size: 24px;
+  }
+  .gares-hero-subtitle {
+    font-size: 13px;
+  }
+  .gare-card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   7. DARK MODE SUPPORT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+body.dark-mode .gares-page-root,
+[data-theme="dark"] .gares-page-root {
+  background-color: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .gares-hero-banner,
+[data-theme="dark"] .gares-hero-banner {
+  background: linear-gradient(135deg, #05162a 0%, #082d4d 50%, #0d4b78 100%);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
+}
+
+body.dark-mode .gares-kpi-card,
+[data-theme="dark"] .gares-kpi-card {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .gares-kpi-card:hover,
+[data-theme="dark"] .gares-kpi-card:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .gares-kpi-card.active,
+[data-theme="dark"] .gares-kpi-card.active {
+  background: #0d2744;
+  border-color: #0088ce;
+  box-shadow: 0 8px 24px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .gares-kpi-label,
+[data-theme="dark"] .gares-kpi-label {
   color: #94a3b8;
-  font-style: italic;
 }
 
-.add-hall-btn {
-  margin-top: 4px;
-  align-self: flex-start;
+body.dark-mode .gares-kpi-value,
+[data-theme="dark"] .gares-kpi-value {
+  color: #f8fafc;
 }
 
+body.dark-mode .gares-kpi-subtext,
+[data-theme="dark"] .gares-kpi-subtext {
+  color: #64748b;
+}
 
+body.dark-mode .kpi-blue,
+[data-theme="dark"] .kpi-blue {
+  background: rgba(2, 132, 199, 0.2);
+  color: #38bdf8;
+}
+
+body.dark-mode .kpi-emerald,
+[data-theme="dark"] .kpi-emerald {
+  background: rgba(22, 163, 74, 0.2);
+  color: #4ade80;
+}
+
+body.dark-mode .kpi-amber,
+[data-theme="dark"] .kpi-amber {
+  background: rgba(217, 119, 6, 0.2);
+  color: #fbbf24;
+}
+
+body.dark-mode .kpi-purple,
+[data-theme="dark"] .kpi-purple {
+  background: rgba(147, 51, 234, 0.2);
+  color: #c084fc;
+}
+
+body.dark-mode .gares-controls-card,
+body.dark-mode .gare-card-modern,
+body.dark-mode .gares-table-wrapper,
+body.dark-mode .gares-modal-dialog,
+body.dark-mode .gares-section-box,
+[data-theme="dark"] .gares-controls-card,
+[data-theme="dark"] .gare-card-modern,
+[data-theme="dark"] .gares-table-wrapper,
+[data-theme="dark"] .gares-modal-dialog,
+[data-theme="dark"] .gares-section-box {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+}
+
+body.dark-mode .gare-card-modern:hover,
+[data-theme="dark"] .gare-card-modern:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .gare-name-title,
+[data-theme="dark"] .gare-name-title {
+  color: #f8fafc;
+}
+
+body.dark-mode .gares-modern-table thead,
+[data-theme="dark"] .gares-modern-table thead {
+  background: #0f172a;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .gares-modern-table th,
+[data-theme="dark"] .gares-modern-table th {
+  color: #94a3b8;
+}
+
+body.dark-mode .gares-modern-table td,
+[data-theme="dark"] .gares-modern-table td {
+  border-bottom-color: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark-mode .gares-modern-table tbody tr:hover,
+[data-theme="dark"] .gares-modern-table tbody tr:hover {
+  background-color: #1a273c;
+}
+
+body.dark-mode .gares-modern-input,
+body.dark-mode .gares-modern-select,
+body.dark-mode .gares-form-input,
+body.dark-mode .gares-form-select,
+body.dark-mode .gares-form-textarea,
+[data-theme="dark"] .gares-modern-input,
+[data-theme="dark"] .gares-modern-select,
+[data-theme="dark"] .gares-form-input,
+[data-theme="dark"] .gares-form-select,
+[data-theme="dark"] .gares-form-textarea {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .gares-modern-input:focus,
+body.dark-mode .gares-modern-select:focus,
+body.dark-mode .gares-form-input:focus,
+body.dark-mode .gares-form-select:focus,
+[data-theme="dark"] .gares-modern-input:focus,
+[data-theme="dark"] .gares-modern-select:focus,
+[data-theme="dark"] .gares-form-input:focus,
+[data-theme="dark"] .gares-form-select:focus {
+  border-color: #0088ce;
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .gares-modal-header,
+body.dark-mode .gares-modal-footer,
+[data-theme="dark"] .gares-modal-header,
+[data-theme="dark"] .gares-modal-footer {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .gares-modal-header h3,
+[data-theme="dark"] .gares-modal-header h3 {
+  color: #f8fafc;
+}
+
+body.dark-mode .gares-modal-tabs,
+[data-theme="dark"] .gares-modal-tabs {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .gares-modal-tab-btn,
+[data-theme="dark"] .gares-modal-tab-btn {
+  color: #94a3b8;
+}
+
+body.dark-mode .gares-modal-tab-btn.active,
+[data-theme="dark"] .gares-modal-tab-btn.active {
+  background: #1e293b;
+  color: #38bdf8;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .quai-select-chip,
+[data-theme="dark"] .quai-select-chip {
+  background: #0b111e;
+  border-color: #243247;
+  color: #cbd5e1;
+}
+
+body.dark-mode .quai-select-chip:hover,
+[data-theme="dark"] .quai-select-chip:hover {
+  border-color: #38bdf8;
+  color: #38bdf8;
+}
+
+body.dark-mode .quai-select-chip.selected,
+[data-theme="dark"] .quai-select-chip.selected {
+  background: #0284c7;
+  color: #ffffff;
+  border-color: #0284c7;
+}
+
+body.dark-mode .service-icon-pill,
+[data-theme="dark"] .service-icon-pill {
+  background: #1e293b;
+  color: #94a3b8;
+}
+
+body.dark-mode .service-icon-pill.active,
+[data-theme="dark"] .service-icon-pill.active {
+  background: rgba(2, 132, 199, 0.25);
+  color: #38bdf8;
+}
+
+body.dark-mode .modal-close,
+[data-theme="dark"] .modal-close {
+  background: #1e293b;
+  border-color: #334155;
+  color: #94a3b8;
+}
+
+body.dark-mode .modal-close:hover,
+[data-theme="dark"] .modal-close:hover {
+  background: #334155;
+  color: #f8fafc;
+}
+
+body.dark-mode .gares-empty-state,
+[data-theme="dark"] .gares-empty-state {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .gares-empty-text,
+[data-theme="dark"] .gares-empty-text {
+  color: #94a3b8;
+}
 
diff --git a/src/pages/gares/Gares.js b/src/pages/gares/Gares.js
index 7c6752d..c5ff48a 100644
--- a/src/pages/gares/Gares.js
+++ b/src/pages/gares/Gares.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import NavPanel from '../../components/nav-panel/NavPanel';
 import { isSupabaseConfigured } from '../../supabaseClient';
 import { getAllGares, createGare, updateGare, deleteGare, mergeGares } from '../../api/gares';
 import { getHorairesCountByQuai } from '../../api/horaires';
@@ -6,15 +7,15 @@ import { canPerform, getCurrentUser } from '../../utils/userUtils';
 import './Gares.css';
 
 // ============================================================================
-// CONSTANTES
+// CONSTANTES & CONFIGURATION
 // ============================================================================
 
-const TRANSPORT_COLORS = {
-  bus: '#8BC34A',
-  tram: '#9C27B0',
-  metro: '#2196F3',
-  'tram-train': '#FF9800',
-  train: null
+const TRANSPORT_CONFIG = {
+  bus: { label: 'Bus', icon: 'directions_bus', className: 'bus' },
+  tram: { label: 'Tram', icon: 'tram', className: 'tram' },
+  metro: { label: 'Métro', icon: 'subway', className: 'metro' },
+  'tram-train': { label: 'Tram-train', icon: 'commute', className: 'tram-train' },
+  train: { label: 'Train', icon: 'train', className: 'train' }
 };
 
 const TRANSPORT_OPTIONS = ['bus', 'tram', 'metro', 'tram-train', 'train'];
@@ -75,24 +76,30 @@ const INITIAL_FORM_STATE = {
   quais_hall: []
 };
 
-// Composant toggle Oui/Non déclaré au niveau supérieur pour éviter de le créer lors du render
+// Composant toggle Oui/Non moderne pour les services
 function BoolField({ label, value, onChange }) {
   return (
-      <div className="gares-bool-field">
-        <span className="gares-bool-label">{label}</span>
-        <div className="gares-bool-actions">
-          <button
-              type="button"
-              onClick={() => onChange(true)}
-              className={`gares-bool-btn ${value === true ? 'is-yes' : ''}`}
-          >Oui</button>
-          <button
-              type="button"
-              onClick={() => onChange(false)}
-              className={`gares-bool-btn ${value === false ? 'is-no' : ''}`}
-          >Non</button>
-        </div>
+    <div className="gares-bool-field">
+      <span className="gares-bool-label">{label}</span>
+      <div className="gares-bool-actions">
+        <button
+          type="button"
+          onClick={() => onChange(true)}
+          className={`gares-bool-btn ${value === true ? 'is-yes' : ''}`}
+        >
+          <wcs-mat-icon icon="check" size="s"></wcs-mat-icon>
+          Oui
+        </button>
+        <button
+          type="button"
+          onClick={() => onChange(false)}
+          className={`gares-bool-btn ${value === false ? 'is-no' : ''}`}
+        >
+          <wcs-mat-icon icon="close" size="s"></wcs-mat-icon>
+          Non
+        </button>
       </div>
+    </div>
   );
 }
 
@@ -110,11 +117,13 @@ export default function Gares() {
   const [gares, setGares] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
-  // Filtrage
+
+  // Filtrage et vue
   const [searchFilter, setSearchFilter] = useState('');
   const [typeFilter, setTypeFilter] = useState('');
+  const [viewMode, setViewMode] = useState('grid'); // 'grid' | 'table'
 
-  // État du formulaire
+  // État du formulaire modal
   const [showModal, setShowModal] = useState(false);
   const [editingGare, setEditingGare] = useState(null);
   const [formData, setFormData] = useState(INITIAL_FORM_STATE);
@@ -122,7 +131,7 @@ export default function Gares() {
   const [saving, setSaving] = useState(false);
   const [activeTab, setActiveTab] = useState('general');
 
-  // État de suppression et fusion
+  // Suppression et fusion
   const [deleteConfirmId, setDeleteConfirmId] = useState(null);
   const [quaisCounts, setQuaisCounts] = useState({});
   const [showMergeModal, setShowMergeModal] = useState(false);
@@ -172,10 +181,9 @@ export default function Gares() {
       const targetQuai = prev.quais.find(q => String(q.clientId) === String(quaiId));
       const oldQuaiName = targetQuai?.nom;
       const newQuais = prev.quais.map(q =>
-          String(q.clientId) === String(quaiId) ? { ...q, [field]: value } : q
+        String(q.clientId) === String(quaiId) ? { ...q, [field]: value } : q
       );
 
-      // Si le nom du quai a changé, on met également à jour son nom dans quais_hall
       let newQuaisHall = prev.quais_hall || [];
       if (field === 'nom' && oldQuaiName && oldQuaiName !== value) {
         newQuaisHall = newQuaisHall.map(h => {
@@ -301,7 +309,6 @@ export default function Gares() {
     };
   }, [showModal, formData.quais.length, updateField, updateQuai]);
 
-
   // ============================================================================
   // CHARGEMENT DES DONNÉES
   // ============================================================================
@@ -324,18 +331,30 @@ export default function Gares() {
   }, []);
 
   useEffect(() => {
-    // Avoid calling setState synchronously inside an effect: defer execution to next tick
     const id = setTimeout(() => { loadGares(); }, 0);
     return () => clearTimeout(id);
   }, [loadGares]);
 
+  // ============================================================================
+  // STATISTIQUES GLOBALES
+  // ============================================================================
+
+  const stats = useMemo(() => {
+    const total = gares.length;
+    const villeCount = gares.filter(g => g.type === 'ville').length;
+    const interurbaineCount = gares.filter(g => g.type === 'interurbaine').length;
+    const totalQuais = gares.reduce((sum, g) => sum + (g.gare_quais?.length || 0), 0);
+
+    return { total, villeCount, interurbaineCount, totalQuais };
+  }, [gares]);
+
   // ============================================================================
   // GESTION DU FORMULAIRE
   // ============================================================================
 
   const openCreateModal = () => {
     if (!canCreateGares) {
-      setFormError('Vous n\'avez pas les droits pour créer une gare.');
+      setFormError("Vous n'avez pas les droits pour créer une gare.");
       return;
     }
     setEditingGare(null);
@@ -349,10 +368,10 @@ export default function Gares() {
 
   const openEditModal = async (gare) => {
     if (!canUpdateGares) {
-      setFormError('Vous n\'avez pas les droits pour modifier une gare.');
+      setFormError("Vous n'avez pas les droits pour modifier une gare.");
       return;
     }
-    
+
     try {
       const { data } = await getHorairesCountByQuai(gare.id, gare.nom);
       setQuaisCounts(data || {});
@@ -365,17 +384,17 @@ export default function Gares() {
       nom: gare.nom || '',
       type: gare.type || 'ville',
       quais: gare.gare_quais?.length > 0
-          ? gare.gare_quais.map(q => ({
-            clientId: q.id || `quai-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
-            id: q.id,
-            nom: q.nom || '',
-            distance_metres: q.distance_metres || 0
-          }))
-          : [createQuaiRow()],
+        ? gare.gare_quais.map(q => ({
+          clientId: q.id || `quai-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`,
+          id: q.id,
+          nom: q.nom || '',
+          distance_metres: q.distance_metres || 0
+        }))
+        : [createQuaiRow()],
       transports: gare.gare_transports?.map(t => t.type) || [],
       informations: gare.informations
-          ? { ...INITIAL_INFORMATIONS_STATE, ...gare.informations }
-          : { ...INITIAL_INFORMATIONS_STATE },
+        ? { ...INITIAL_INFORMATIONS_STATE, ...gare.informations }
+        : { ...INITIAL_INFORMATIONS_STATE },
       quais_hall: (() => {
         const rawHalls = gare.quais_hall?.hall || {};
         return Object.keys(rawHalls).map((name, idx) => ({
@@ -389,12 +408,12 @@ export default function Gares() {
     setActiveTab('general');
     setShowModal(true);
     const initialQuais = gare.gare_quais?.length > 0
-        ? gare.gare_quais.map(q => ({
-          id: q.id,
-          nom: q.nom || '',
-          distance_metres: q.distance_metres || 0
-        }))
-        : [];
+      ? gare.gare_quais.map(q => ({
+        id: q.id,
+        nom: q.nom || '',
+        distance_metres: q.distance_metres || 0
+      }))
+      : [];
     originalTransportsRef.current = gare.gare_transports?.map(t => t.type) || [];
     originalQuaisRef.current = initialQuais;
   };
@@ -423,7 +442,6 @@ export default function Gares() {
     setFormData(prev => {
       const newQuais = prev.quais.filter(q => String(q.clientId) !== String(quaiId));
 
-      // Retirer le quai de tous les halls
       let newQuaisHall = prev.quais_hall || [];
       if (quaiName) {
         newQuaisHall = newQuaisHall.map(h => {
@@ -446,7 +464,7 @@ export default function Gares() {
     });
   };
 
-  // Gestion des halls de la gare
+  // Gestion des halls
   const addHall = () => {
     setFormData(prev => {
       const currentHalls = prev.quais_hall || [];
@@ -529,7 +547,7 @@ export default function Gares() {
       informations: {
         ...prev.informations,
         [type]: (prev.informations[type] || []).map((l, i) =>
-            i === index ? { ...l, [field]: value } : l
+          i === index ? { ...l, [field]: value } : l
         )
       }
     }));
@@ -551,11 +569,11 @@ export default function Gares() {
 
   const handleSave = async () => {
     if (!editingGare && !canCreateGares) {
-      setFormError('Vous n\'avez pas les droits pour créer une gare.');
+      setFormError("Vous n'avez pas les droits pour créer une gare.");
       return;
     }
     if (editingGare && !canUpdateGares) {
-      setFormError('Vous n\'avez pas les droits pour modifier une gare.');
+      setFormError("Vous n'avez pas les droits pour modifier une gare.");
       return;
     }
     setFormError('');
@@ -575,7 +593,6 @@ export default function Gares() {
 
     setSaving(true);
 
-    // Formater quais_hall au format BDD {"hall": {"Nom du Hall": [...]}}
     const formattedQuaisHall = { hall: {} };
     if (Array.isArray(source.quais_hall)) {
       source.quais_hall.forEach(h => {
@@ -585,7 +602,6 @@ export default function Gares() {
       });
     }
 
-    // Préparer les données
     const dataToSave = {
       nom: nom,
       type: source.type,
@@ -601,7 +617,7 @@ export default function Gares() {
       if (!areStringArraysEqual(currentTransports, originalTransportsRef.current || [])) {
         dataToSave.transports = currentTransports;
       }
-      
+
       const currentQuais = source.quais.map(q => ({
         id: q.id,
         nom: q.nom || '',
@@ -612,10 +628,8 @@ export default function Gares() {
       }
     }
 
-
     try {
       let result;
-
       if (editingGare) {
         result = await updateGare(editingGare.id, dataToSave);
       } else {
@@ -629,24 +643,18 @@ export default function Gares() {
         return;
       }
 
-
-      // Mettre à jour l'état local immédiatement avec la gare retournée
       const savedGare = result.data;
       setGares(prev => {
         if (!prev) return [savedGare];
         if (editingGare) {
           return prev.map(g => (g.id === savedGare.id ? savedGare : g));
         }
-        // création : insérer en tête
         return [savedGare, ...prev];
       });
       originalTransportsRef.current = null;
       originalQuaisRef.current = null;
 
-      // Succès
       closeModal();
-      // refresh légère si souhaité : loadGares();
-
     } catch (err) {
       console.error('Exception sauvegarde:', err);
       setFormError('Erreur inattendue lors de la sauvegarde');
@@ -656,12 +664,12 @@ export default function Gares() {
   };
 
   // ============================================================================
-  // SUPPRESSION
+  // SUPPRESSION & FUSION
   // ============================================================================
 
   const handleDelete = async (gareId) => {
     if (!canDeleteGares) {
-      alert('Vous n\'avez pas les droits pour supprimer une gare.');
+      alert("Vous n'avez pas les droits pour supprimer une gare.");
       return;
     }
     const { error: deleteError } = await deleteGare(gareId);
@@ -699,27 +707,14 @@ export default function Gares() {
     return type === 'interurbaine' ? '12 heures' : '30 minutes';
   };
 
-  const renderTransportBadge = (transport) => {
-    const type = transport.type;
-    const key = transport.id || `${type}-${transport.ligne || 'default'}`;
-
-    if (type === 'train') {
-      return (
-          <span key={key} className="transport-badge transport-train" title="Train">
-          🚆
-        </span>
-      );
-    }
+  const renderTransportChip = (transport, idx) => {
+    const type = typeof transport === 'string' ? transport : transport.type;
+    const config = TRANSPORT_CONFIG[type] || { label: type, icon: 'commute', className: 'train' };
 
     return (
-        <span
-            key={key}
-            className="transport-badge"
-            style={{ backgroundColor: TRANSPORT_COLORS[type] }}
-            title={`${type}${transport.ligne ? ` - ${transport.ligne}` : ''}`}
-        >
-        {type.charAt(0).toUpperCase()}
-          {transport.ligne && <small>{transport.ligne}</small>}
+      <span key={`${type}-${idx}`} className={`transport-chip-modern ${config.className}`}>
+        <wcs-mat-icon icon={config.icon} size="s"></wcs-mat-icon>
+        {config.label}
       </span>
     );
   };
@@ -728,558 +723,864 @@ export default function Gares() {
 
   // Gares filtrées
   const filteredGares = useMemo(() => (
-      gares.filter(g => {
-        const matchSearch = !searchFilter || (g.nom || '').toLowerCase().includes(searchFilter.toLowerCase());
-        const matchType = !typeFilter || g.type === typeFilter;
-        return matchSearch && matchType;
-      })
+    gares.filter(g => {
+      const matchSearch = !searchFilter || (g.nom || '').toLowerCase().includes(searchFilter.toLowerCase());
+      const matchType = !typeFilter || g.type === typeFilter;
+      return matchSearch && matchType;
+    })
   ), [gares, searchFilter, typeFilter]);
 
-  const hasSearch = searchFilter.trim().length > 0;
-  const displayedGares = useMemo(() => (
-      hasSearch ? filteredGares : filteredGares.slice(0, 10)
-  ), [hasSearch, filteredGares]);
-  const hiddenByDefault = hasSearch ? 0 : Math.max(0, filteredGares.length - displayedGares.length);
-
-  // ============================================================================
-  // RENDU
-  // ============================================================================
-
   return (
-      <div className="sncf-groupe gares-page panel-layout">
-        <div className="panel-content gares-page-content">
-            <header className="gares-page-header">
-              <div>
-                <p className="gares-page-kicker">Exploitation</p>
-                <h2>Gestion des gares</h2>
-                <p className="gares-page-description">Administrez les gares, quais, transports et informations voyageurs.</p>
-              </div>
-              <div className="gares-header-actions">
-                <wcs-button className="wcs-primary" onClick={openCreateModal} disabled={!canCreateGares}>
-                  <wcs-mat-icon icon="add"></wcs-mat-icon>
-                  Nouvelle gare
-                </wcs-button>
-                <wcs-button className="gares-header-import-btn" onClick={() => { window.location.assign('/gares/import'); }}>
-                  <wcs-mat-icon icon="file_upload"></wcs-mat-icon>
-                  Import GTFS
-                </wcs-button>
-              </div>
-            </header>
+    <div className="sncf-groupe gares-page-root">
+      <div className="panel-layout">
+        <div className="panel-nav">
+          <NavPanel />
+        </div>
+        <div className="panel-content gares-modern-container">
 
-            {/* Erreur globale */}
-            {error && (
-                <wcs-alert intent="error" show>
-                  <span slot="title">Erreur</span>
-                  <span slot="subtitle">{error}</span>
-                </wcs-alert>
-            )}
-
-            {/* Barre de filtrage */}
-            <div className="gares-toolbar">
-              <input
-                  type="search"
-                  className="gares-toolbar-input"
-                  placeholder="Rechercher par nom..."
-                  value={searchFilter}
-                  onChange={e => setSearchFilter(e.target.value)}
-              />
-              <select
-                  className="gares-toolbar-select"
-                  value={typeFilter}
-                  onChange={e => setTypeFilter(e.target.value)}
+          {/* 1. HERO BANNER */}
+          <section className="gares-hero-banner">
+            <div className="gares-hero-content">
+              <div className="gares-hero-tags">
+                <span className="gares-kicker-pill">
+                  <wcs-mat-icon icon="apartment" size="s"></wcs-mat-icon>
+                  Réseau Ferroviaire
+                </span>
+                <span className="gares-kicker-pill">
+                  <wcs-mat-icon icon="hub" size="s"></wcs-mat-icon>
+                  Pôles d'échange
+                </span>
+              </div>
+              <h1 className="gares-hero-title">Gares & Hubs Voyageurs</h1>
+              <p className="gares-hero-subtitle">
+                Gérez l'ensemble des gares, quais de départ, correspondances intermodales et services d'accueil en gare.
+              </p>
+            </div>
+            <div className="gares-hero-actions">
+              <wcs-button
+                className="wcs-primary"
+                onClick={openCreateModal}
+                disabled={!canCreateGares}
               >
-                <option value="">Tous les types</option>
-                <option value="ville">Gare de ville</option>
-                <option value="interurbaine">Interurbaine</option>
-              </select>
-              {(searchFilter || typeFilter) && (
-                  <button className="gares-toolbar-reset" onClick={() => { setSearchFilter(''); setTypeFilter(''); }}>
-                    Réinitialiser
-                  </button>
-              )}
-              <span className="gares-toolbar-count">{displayedGares.length} / {filteredGares.length} gare(s)</span>
+                <wcs-mat-icon icon="add"></wcs-mat-icon>
+                Nouvelle gare
+              </wcs-button>
+              <wcs-button
+                className="wcs-secondary"
+                onClick={() => { window.location.assign('/gares/import'); }}
+              >
+                <wcs-mat-icon icon="file_upload"></wcs-mat-icon>
+                Import GTFS
+              </wcs-button>
+            </div>
+          </section>
+
+          {/* Erreur globale */}
+          {error && (
+            <wcs-alert intent="error" show style={{ marginBottom: '20px' }}>
+              <span slot="title">Erreur</span>
+              <span slot="subtitle">{error}</span>
+            </wcs-alert>
+          )}
+
+          {/* 2. KPI STAT CARDS */}
+          <section className="gares-kpi-grid">
+            <div
+              className={`gares-kpi-card ${typeFilter === '' ? 'active' : ''}`}
+              onClick={() => setTypeFilter('')}
+            >
+              <div className="gares-kpi-icon kpi-blue">
+                <wcs-mat-icon icon="apartment"></wcs-mat-icon>
+              </div>
+              <div className="gares-kpi-info">
+                <span className="gares-kpi-label">Total Gares</span>
+                <span className="gares-kpi-value">{stats.total}</span>
+                <span className="gares-kpi-subtext">Toutes les gares du réseau</span>
+              </div>
             </div>
 
-            {hiddenByDefault > 0 && (
-              <p className="gares-pagination-hint">
-                {hiddenByDefault} gares supplementaires masquees. Utilisez la recherche pour les retrouver.
-              </p>
-            )}
+            <div
+              className={`gares-kpi-card ${typeFilter === 'ville' ? 'active' : ''}`}
+              onClick={() => setTypeFilter(typeFilter === 'ville' ? '' : 'ville')}
+            >
+              <div className="gares-kpi-icon kpi-emerald">
+                <wcs-mat-icon icon="location_city"></wcs-mat-icon>
+              </div>
+              <div className="gares-kpi-info">
+                <span className="gares-kpi-label">Gares de Ville</span>
+                <span className="gares-kpi-value">{stats.villeCount}</span>
+                <span className="gares-kpi-subtext">Affichage quai : 30 min</span>
+              </div>
+            </div>
 
-            {/* Contenu */}
-            {loading ? (
-                <div className="loading-container">
-                  <wcs-spinner></wcs-spinner>
-                  <p>Chargement des gares...</p>
+            <div
+              className={`gares-kpi-card ${typeFilter === 'interurbaine' ? 'active' : ''}`}
+              onClick={() => setTypeFilter(typeFilter === 'interurbaine' ? '' : 'interurbaine')}
+            >
+              <div className="gares-kpi-icon kpi-amber">
+                <wcs-mat-icon icon="alt_route"></wcs-mat-icon>
+              </div>
+              <div className="gares-kpi-info">
+                <span className="gares-kpi-label">Interurbaines</span>
+                <span className="gares-kpi-value">{stats.interurbaineCount}</span>
+                <span className="gares-kpi-subtext">Affichage quai : 12 heures</span>
+              </div>
+            </div>
+
+            <div className="gares-kpi-card">
+              <div className="gares-kpi-icon kpi-purple">
+                <wcs-mat-icon icon="view_column"></wcs-mat-icon>
+              </div>
+              <div className="gares-kpi-info">
+                <span className="gares-kpi-label">Quais Actifs</span>
+                <span className="gares-kpi-value">{stats.totalQuais}</span>
+                <span className="gares-kpi-subtext">Voies réparties</span>
+              </div>
+            </div>
+          </section>
+
+          {/* 3. CONTROLS & FILTERS */}
+          <section className="gares-controls-card">
+            <div className="gares-search-bar">
+              <wcs-mat-icon icon="search" style={{ color: '#94a3b8' }}></wcs-mat-icon>
+              <input
+                type="search"
+                className="gares-modern-input"
+                placeholder="Rechercher une gare par nom ou code..."
+                value={searchFilter}
+                onChange={e => setSearchFilter(e.target.value)}
+              />
+              {searchFilter && (
+                <button
+                  type="button"
+                  onClick={() => setSearchFilter('')}
+                  style={{ background: 'none', border: 'none', color: '#94a3b8', cursor: 'pointer' }}
+                >
+                  <wcs-mat-icon icon="close" size="s"></wcs-mat-icon>
+                </button>
+              )}
+            </div>
+
+            <div className="gares-filters-row">
+              <div className="gares-tab-group">
+                <button
+                  type="button"
+                  className={`gares-tab-btn ${typeFilter === '' ? 'active' : ''}`}
+                  onClick={() => setTypeFilter('')}
+                >
+                  <wcs-mat-icon icon="list" size="s"></wcs-mat-icon>
+                  Toutes ({gares.length})
+                </button>
+                <button
+                  type="button"
+                  className={`gares-tab-btn ${typeFilter === 'ville' ? 'active' : ''}`}
+                  onClick={() => setTypeFilter('ville')}
+                >
+                  <wcs-mat-icon icon="location_city" size="s"></wcs-mat-icon>
+                  Gares de ville ({stats.villeCount})
+                </button>
+                <button
+                  type="button"
+                  className={`gares-tab-btn ${typeFilter === 'interurbaine' ? 'active' : ''}`}
+                  onClick={() => setTypeFilter('interurbaine')}
+                >
+                  <wcs-mat-icon icon="alt_route" size="s"></wcs-mat-icon>
+                  Interurbaines ({stats.interurbaineCount})
+                </button>
+              </div>
+
+              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                {(searchFilter || typeFilter) && (
+                  <button
+                    className="gares-toolbar-reset"
+                    onClick={() => { setSearchFilter(''); setTypeFilter(''); }}
+                  >
+                    Réinitialiser les filtres
+                  </button>
+                )}
+
+                <div className="view-mode-group">
+                  <button
+                    type="button"
+                    className={`view-mode-btn ${viewMode === 'grid' ? 'active' : ''}`}
+                    onClick={() => setViewMode('grid')}
+                    title="Vue en grille"
+                  >
+                    <wcs-mat-icon icon="view_module" size="s"></wcs-mat-icon>
+                  </button>
+                  <button
+                    type="button"
+                    className={`view-mode-btn ${viewMode === 'table' ? 'active' : ''}`}
+                    onClick={() => setViewMode('table')}
+                    title="Vue en tableau"
+                  >
+                    <wcs-mat-icon icon="table_rows" size="s"></wcs-mat-icon>
+                  </button>
                 </div>
-            ) : filteredGares.length === 0 ? (
-                <div className="empty-state">
-                  <wcs-mat-icon className="gares-empty-icon" icon="train"></wcs-mat-icon>
-                  <p>Aucune gare enregistrée</p>
-                  <wcs-button className="wcs-primary" onClick={openCreateModal} disabled={!canCreateGares}>
-                    Créer une gare
-                  </wcs-button>
-                </div>
-            ) : (
-                <div className="table-container">
-                  <table className="wcs-table">
-                    <thead>
-                    <tr>
-                      <th>Nom</th>
-                      <th>Type</th>
-                      <th>Quais</th>
-                      <th>Transports</th>
-                      <th>Temps affichage</th>
-                      <th>Actions</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {displayedGares.map(gare => (
-                        <tr key={gare.id}>
-                          <td><strong>{gare.nom}</strong></td>
-                          <td>
-                        <span className={`station-type-badge ${gare.type}`}>
+              </div>
+            </div>
+          </section>
+
+          {/* 4. CONTENU PRINCIPAL */}
+          {loading ? (
+            <div className="loading-container" style={{ padding: '60px 0', textAlign: 'center' }}>
+              <wcs-spinner></wcs-spinner>
+              <p style={{ marginTop: '12px', color: '#64748b' }}>Chargement des gares...</p>
+            </div>
+          ) : filteredGares.length === 0 ? (
+            <div className="empty-state" style={{ padding: '60px 20px', textAlign: 'center', background: '#ffffff', borderRadius: '16px', border: '1px solid #e2e8f0' }}>
+              <wcs-mat-icon className="gares-empty-icon" icon="apartment" style={{ fontSize: '48px', color: '#94a3b8' }}></wcs-mat-icon>
+              <h3 style={{ marginTop: '16px', color: '#1e293b' }}>Aucune gare trouvée</h3>
+              <p style={{ color: '#64748b', marginBottom: '20px' }}>
+                {searchFilter || typeFilter ? 'Aucun résultat ne correspond à vos filtres.' : 'Commencez par ajouter votre première gare au réseau.'}
+              </p>
+              {canCreateGares && (
+                <wcs-button className="wcs-primary" onClick={openCreateModal}>
+                  <wcs-mat-icon icon="add"></wcs-mat-icon>
+                  Créer une gare
+                </wcs-button>
+              )}
+            </div>
+          ) : viewMode === 'grid' ? (
+            /* 4A. GRID VIEW */
+            <section className="gares-cards-grid">
+              {filteredGares.map(gare => {
+                const info = gare.informations || {};
+                const activeServices = [
+                  { key: 'wifi_gratuit', icon: 'wifi', title: 'WiFi Gratuit' },
+                  { key: 'service_assistance', icon: 'accessible', title: 'Assistance PMR' },
+                  { key: 'espace_attente', icon: 'weekend', title: 'Espace d\'attente' },
+                  { key: 'toilettes', icon: 'wc', title: 'Toilettes' },
+                  { key: 'parking', icon: 'local_parking', title: 'Parking' },
+                  { key: 'velo_libre_service', icon: 'pedal_bike', title: 'Vélos en libre service' },
+                  { key: 'defibrillateur', icon: 'favorite', title: 'Défibrillateur' }
+                ].filter(s => info[s.key] === true);
+
+                return (
+                  <article key={gare.id} className="gare-card-modern">
+                    <div>
+                      <div className="gare-card-header">
+                        <div className="gare-card-title-box">
+                          <div className="gare-icon-avatar">
+                            <wcs-mat-icon icon={gare.type === 'interurbaine' ? 'alt_route' : 'location_city'}></wcs-mat-icon>
+                          </div>
+                          <div>
+                            <h3 className="gare-card-name">{gare.nom}</h3>
+                            <span className={`gare-type-badge ${gare.type === 'interurbaine' ? 'badge-interurbaine' : 'badge-ville'}`}>
+                              {gare.type === 'interurbaine' ? 'Interurbaine' : 'Gare de ville'}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+
+                      <div className="gare-card-details">
+                        <div className="gare-info-item">
+                          <wcs-mat-icon icon="view_column"></wcs-mat-icon>
+                          <span><strong>{gare.gare_quais?.length || 0}</strong> quai(s) configuré(s)</span>
+                        </div>
+                        <div className="gare-info-item">
+                          <wcs-mat-icon icon="schedule"></wcs-mat-icon>
+                          <span>Affichage quai : {getDisplayTime(gare.type)}</span>
+                        </div>
+
+                        {gare.gare_transports && gare.gare_transports.length > 0 && (
+                          <div className="gare-transports-chips">
+                            {gare.gare_transports.map((t, i) => renderTransportChip(t, i))}
+                          </div>
+                        )}
+                      </div>
+
+                      {activeServices.length > 0 && (
+                        <div className="gare-services-icons" title="Services disponibles en gare">
+                          {activeServices.map(s => (
+                            <div key={s.key} className="service-icon-pill active" title={s.title}>
+                              <wcs-mat-icon icon={s.icon} size="s"></wcs-mat-icon>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="gare-card-actions">
+                      <wcs-button
+                        className="wcs-secondary gares-action-btn"
+                        onClick={() => { setGareToMerge(gare); setShowMergeModal(true); }}
+                        disabled={!canUpdateGares}
+                        title="Fusionner avec une autre gare"
+                      >
+                        <wcs-mat-icon icon="merge_type"></wcs-mat-icon>
+                      </wcs-button>
+                      <wcs-button
+                        className="wcs-secondary gares-action-btn"
+                        onClick={() => openEditModal(gare)}
+                        disabled={!canUpdateGares}
+                        title="Modifier la gare"
+                      >
+                        <wcs-mat-icon icon="edit"></wcs-mat-icon>
+                      </wcs-button>
+                      <wcs-button
+                        className="wcs-danger gares-action-btn"
+                        onClick={() => setDeleteConfirmId(gare.id)}
+                        disabled={!canDeleteGares}
+                        title="Supprimer la gare"
+                      >
+                        <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                      </wcs-button>
+                    </div>
+                  </article>
+                );
+              })}
+            </section>
+          ) : (
+            /* 4B. TABLE VIEW */
+            <section className="gares-table-wrapper">
+              <table className="gares-modern-table">
+                <thead>
+                  <tr>
+                    <th>Gare</th>
+                    <th>Type</th>
+                    <th>Quais</th>
+                    <th>Transports</th>
+                    <th>Délai affichage</th>
+                    <th style={{ textAlign: 'right' }}>Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredGares.map(gare => (
+                    <tr key={gare.id}>
+                      <td>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                          <div className="gare-icon-avatar" style={{ width: '32px', height: '32px', fontSize: '16px' }}>
+                            <wcs-mat-icon icon="train" size="s"></wcs-mat-icon>
+                          </div>
+                          <strong>{gare.nom}</strong>
+                        </div>
+                      </td>
+                      <td>
+                        <span className={`gare-type-badge ${gare.type === 'interurbaine' ? 'badge-interurbaine' : 'badge-ville'}`}>
                           {gare.type === 'interurbaine' ? 'Interurbaine' : 'Ville'}
                         </span>
-                          </td>
-                          <td>{gare.gare_quais?.length || 0} quai(s)</td>
-                          <td>
-                            <div className="transports-list">
-                              {gare.gare_transports?.map(t => renderTransportBadge(t))}
-                            </div>
-                          </td>
-                          <td>{getDisplayTime(gare.type)}</td>
-                          <td>
-                            <div className="action-buttons">
-                              <wcs-button className="wcs-secondary gares-action-btn" onClick={() => { setGareToMerge(gare); setShowMergeModal(true); }} disabled={!canUpdateGares} title="Fusionner">
-                                <wcs-mat-icon icon="merge_type"></wcs-mat-icon>
-                              </wcs-button>
-                              <wcs-button className="wcs-secondary gares-action-btn" onClick={() => openEditModal(gare)} disabled={!canUpdateGares}>
-                                <wcs-mat-icon icon="edit"></wcs-mat-icon>
-                              </wcs-button>
-                              <wcs-button className="wcs-danger gares-action-btn" onClick={() => setDeleteConfirmId(gare.id)} disabled={!canDeleteGares}>
-                                <wcs-mat-icon icon="delete"></wcs-mat-icon>
-                              </wcs-button>
-                            </div>
-                          </td>
-                        </tr>
-                    ))}
-                    </tbody>
-                  </table>
+                      </td>
+                      <td>
+                        <wcs-badge className="wcs-info">
+                          {gare.gare_quais?.length || 0} quai(s)
+                        </wcs-badge>
+                      </td>
+                      <td>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
+                          {gare.gare_transports?.map((t, i) => renderTransportChip(t, i))}
+                        </div>
+                      </td>
+                      <td>
+                        <span style={{ fontSize: '13px', color: '#64748b' }}>{getDisplayTime(gare.type)}</span>
+                      </td>
+                      <td>
+                        <div style={{ display: 'flex', gap: '6px', justifyContent: 'flex-end' }}>
+                          <wcs-button
+                            className="wcs-secondary gares-action-btn"
+                            onClick={() => { setGareToMerge(gare); setShowMergeModal(true); }}
+                            disabled={!canUpdateGares}
+                            title="Fusionner"
+                          >
+                            <wcs-mat-icon icon="merge_type"></wcs-mat-icon>
+                          </wcs-button>
+                          <wcs-button
+                            className="wcs-secondary gares-action-btn"
+                            onClick={() => openEditModal(gare)}
+                            disabled={!canUpdateGares}
+                            title="Modifier"
+                          >
+                            <wcs-mat-icon icon="edit"></wcs-mat-icon>
+                          </wcs-button>
+                          <wcs-button
+                            className="wcs-danger gares-action-btn"
+                            onClick={() => setDeleteConfirmId(gare.id)}
+                            disabled={!canDeleteGares}
+                            title="Supprimer"
+                          >
+                            <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                          </wcs-button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </section>
+          )}
+
+          {/* 5. MODAL CRÉATION / ÉDITION */}
+          {showModal && (
+            <div className="gares-modal-overlay" onClick={closeModal}>
+              <div className="gares-modal-dialog" onClick={e => e.stopPropagation()} ref={modalRef}>
+                <div className="gares-modal-header">
+                  <h3>{editingGare ? 'Modifier la gare' : 'Nouvelle gare'}</h3>
+                  <button className="modal-close" onClick={closeModal}>
+                    <wcs-mat-icon icon="close"></wcs-mat-icon>
+                  </button>
                 </div>
-            )}
 
-            {/* Modal création/édition */}
-            {showModal && (
-                <div className="modal-overlay" onClick={closeModal}>
-                  <div className="modal-content modal-xlarge gares-modal" onClick={e => e.stopPropagation()}>
-                    <div className="modal-header">
-                      <h3>{editingGare ? 'Modifier la gare' : 'Nouvelle gare'}</h3>
-                      <button className="modal-close" onClick={closeModal}>×</button>
-                    </div>
+                {/* Tabs navigation */}
+                <div className="gares-modal-tabs">
+                  {[
+                    { key: 'general', label: 'Général', icon: 'train' },
+                    { key: 'quais', label: 'Quais & Transports', icon: 'alt_route' },
+                    { key: 'informations', label: 'Informations & Services', icon: 'info' }
+                  ].map(tab => (
+                    <button
+                      key={tab.key}
+                      type="button"
+                      onClick={() => setActiveTab(tab.key)}
+                      className={`gares-modal-tab-btn ${activeTab === tab.key ? 'active' : ''}`}
+                    >
+                      <wcs-mat-icon icon={tab.icon} size="s" />
+                      {tab.label}
+                    </button>
+                  ))}
+                </div>
 
-                    <div className="modal-body gares-modal-body">
-                      {formError && (
-                          <wcs-alert className="gares-modal-alert" intent="error" show>
-                            <span slot="title">Erreur</span>
-                            <span slot="subtitle">{formError}</span>
-                          </wcs-alert>
-                      )}
+                <div className="gares-modal-body">
+                  {formError && (
+                    <wcs-alert intent="error" show>
+                      <span slot="title">Erreur</span>
+                      <span slot="subtitle">{formError}</span>
+                    </wcs-alert>
+                  )}
 
-                      {/* ── Tabs navigation ── */}
-                      <div className="gares-modal-tabs">
-                        {[
-                          { key: 'general', label: 'Général', icon: 'train' },
-                          { key: 'quais', label: 'Quais & Transports', icon: 'route' },
-                          { key: 'informations', label: 'Informations', icon: 'info' }
-                        ].map(tab => (
-                            <button
-                                key={tab.key}
-                                onClick={() => setActiveTab(tab.key)}
-                                className={`gares-modal-tab ${activeTab === tab.key ? 'active' : ''}`}
-                            >
-                              <wcs-mat-icon icon={tab.icon} size="s" />
-                              {tab.label}
-                            </button>
-                        ))}
+                  {/* TAB 1: GÉNÉRAL */}
+                  {activeTab === 'general' && (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
+                      <div className="form-group">
+                        <label className="gares-form-label">Nom de la gare *</label>
+                        <wcs-input
+                          data-field="nom"
+                          value={formData.nom}
+                          placeholder="Ex: Paris Gare de Lyon"
+                          onInput={(e) => updateField('nom', e.target.value || '')}
+                        />
                       </div>
 
-                      <div className="gares-modal-content">
+                      <div className="form-group">
+                        <label className="gares-form-label">Type de gare *</label>
+                        <wcs-radio-group
+                          value={formData.type}
+                          name="type"
+                          onWcsChange={(e) => {
+                            const val = e.detail?.value ?? e.target?.value;
+                            if (val) updateField('type', val);
+                          }}
+                        >
+                          <wcs-radio value="ville" label="Gare de ville" onClick={() => updateField('type', 'ville')}>
+                            <small slot="description">(Affichage quai : 30 min avant départ)</small>
+                          </wcs-radio>
+                          <wcs-radio value="interurbaine" label="Gare interurbaine" onClick={() => updateField('type', 'interurbaine')}>
+                            <small slot="description">(Affichage quai : 12h avant départ)</small>
+                          </wcs-radio>
+                        </wcs-radio-group>
+                      </div>
+                    </div>
+                  )}
 
-                        {/* ════════════════════════════════════
-                        TAB GÉNÉRAL
-                    ════════════════════════════════════ */}
-                        <div style={{ display: activeTab === 'general' ? 'block' : 'none' }}>
-                            <div>
-                              <div className="form-group gares-form-group-spaced">
-                                <label className="gares-form-label">Nom de la gare *</label>
+                  {/* TAB 2: QUAIS & TRANSPORTS */}
+                  {activeTab === 'quais' && (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+                      {/* Transports */}
+                      <div className="form-group">
+                        <label className="gares-form-label">Transports en commun en correspondance</label>
+                        <wcs-form-field>
+                          <wcs-select
+                            data-field="transports"
+                            className="gares-transports-select"
+                            placeholder="Choisir les types de transport"
+                            value={formData.transports}
+                            multiple size="m"
+                            onWcsChange={(e) => updateField('transports', e.detail?.value || [])}
+                          >
+                            {TRANSPORT_OPTIONS.map(opt => (
+                              <wcs-select-option key={opt} value={opt}>
+                                {TRANSPORT_CONFIG[opt]?.label || opt}
+                              </wcs-select-option>
+                            ))}
+                          </wcs-select>
+                        </wcs-form-field>
+                      </div>
+
+                      {/* Quais */}
+                      <div className="form-group">
+                        <label className="gares-form-label">Quais & Voies</label>
+                        <div className="quais-list-modern">
+                          {formData.quais.map((quai, index) => (
+                            <div key={quai.clientId || quai.id || index} className="quai-row-modern">
+                              <div style={{ flex: 2 }}>
                                 <wcs-input
-                                    data-field="nom"
-                                    value={formData.nom}
-                                    placeholder="Ex: Paris Gare de Lyon"
-                                    onInput={(e) => updateField('nom', e.target.value || '')}
+                                  data-field="quai-nom"
+                                  data-quai-id={quai.clientId}
+                                  value={quai.nom}
+                                  placeholder="Nom du quai (ex: Voie A, Quai 1)"
+                                  onInput={(e) => updateQuai(quai.clientId, 'nom', e.target.value || '')}
                                 />
                               </div>
-
-                              <div className="form-group gares-form-group-spaced">
-                                <label className="gares-form-label">Type de gare *</label>
-                                <wcs-radio-group
-                                    value={formData.type}
-                                    name="type"
-                                    onWcsChange={(e) => {
-                                        const val = e.detail?.value ?? e.target?.value;
-                                        if (val) updateField('type', val);
-                                    }}
+                              <div style={{ flex: 1 }}>
+                                <wcs-input
+                                  data-field="quai-distance"
+                                  data-quai-id={quai.clientId}
+                                  type="number"
+                                  value={quai.distance_metres}
+                                  placeholder="Distance (m)"
+                                  onInput={(e) => updateQuai(quai.clientId, 'distance_metres', parseInt(e.target.value, 10) || 0)}
+                                />
+                              </div>
+                              <div style={{ minWidth: '90px', color: '#64748b', fontSize: '13px' }}>
+                                <wcs-badge className="wcs-info">
+                                  {quaisCounts[quai.nom] ? `${quaisCounts[quai.nom]} horaire(s)` : '0 horaire'}
+                                </wcs-badge>
+                              </div>
+                              {formData.quais.length > 1 && (
+                                <wcs-button
+                                  mode="clear"
+                                  shape="square"
+                                  size="s"
+                                  onClick={() => removeQuai(quai.clientId)}
+                                  title="Supprimer ce quai"
                                 >
-                                  <wcs-radio value="ville" label="Gare de ville" onClick={() => updateField('type', 'ville')}>
-                                    <small slot="description">(Affichage quai: 30 min avant départ)</small>
-                                  </wcs-radio>
-                                  <wcs-radio value="interurbaine" label="Gare interurbaine" onClick={() => updateField('type', 'interurbaine')}>
-                                    <small slot="description">(Affichage quai: 12h avant départ)</small>
-                                  </wcs-radio>
-                                </wcs-radio-group>
-                              </div>
+                                  <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                                </wcs-button>
+                              )}
                             </div>
-                        </div>
-
-                        {/* ════════════════════════════════════
-                        TAB QUAIS & TRANSPORTS
-                    ════════════════════════════════════ */}
-                        <div style={{ display: activeTab === 'quais' ? 'block' : 'none' }}>
-                            <div>
-                              {/* Transports */}
-                              <div className="form-group gares-form-group-spaced-lg">
-                                <label className="gares-form-label">Transports en commun</label>
-                                <wcs-form-field>
-                                  <wcs-select
-                                      data-field="transports"
-                                      className="gares-transports-select"
-                                      placeholder="Choisir les types de transport"
-                                      value={formData.transports}
-                                      multiple size="m"
-                                      onWcsChange={(e) => updateField('transports', e.detail?.value || [])}
-                                  >
-                                    {TRANSPORT_OPTIONS.map(opt => (
-                                        <wcs-select-option key={opt} value={opt}>
-                                          {opt.charAt(0).toUpperCase() + opt.slice(1)}
-                                        </wcs-select-option>
-                                    ))}
-                                  </wcs-select>
-                                </wcs-form-field>
-                              </div>
-
-                              {/* Quais */}
-                              <div className="form-group">
-                                <label className="gares-form-label">Quais</label>
-                                <div className="quais-list">
-                                  {formData.quais.map((quai, index) => (
-                                      <div key={quai.clientId || quai.id || index} className="quai-row">
-                                        <wcs-input
-                                            data-field="quai-nom"
-                                            data-quai-id={quai.clientId}
-                                            value={quai.nom}
-                                            placeholder="Nom du quai (ex: Voie A)"
-                                            onInput={(e) => updateQuai(quai.clientId, 'nom', e.target.value || '')}
-                                        />
-                                        <wcs-input
-                                            data-field="quai-distance"
-                                            data-quai-id={quai.clientId}
-                                            type="number"
-                                            value={quai.distance_metres}
-                                            placeholder="Distance (m)"
-                                            onInput={(e) => updateQuai(quai.clientId, 'distance_metres', parseInt(e.target.value, 10) || 0)}
-                                        />
-                                        <div style={{ alignSelf: 'center', minWidth: '80px', color: '#666', fontSize: '13px' }}>
-                                            {quaisCounts[quai.nom] ? `${quaisCounts[quai.nom]} horaire(s)` : '0 horaire'}
-                                        </div>
-                                        {formData.quais.length > 1 && (
-                                            <wcs-button mode="clear" shape="square" size="s" onClick={() => removeQuai(quai.clientId)}>×</wcs-button>
-                                        )}
-                                      </div>
-                                  ))}
-                                  <wcs-button mode="outline" onClick={addQuai}>
-                                    <wcs-mat-icon icon="add" /> Ajouter un quai
-                                  </wcs-button>
-                                </div>
-                              </div>
-
-                              {/* Halls de la gare */}
-                              <div className="form-group gares-form-group-spaced-lg">
-                                <label className="gares-form-label">Halls de la gare</label>
-                                <div className="halls-list">
-                                  {(formData.quais_hall || []).map((hall) => {
-                                    const associatedQuais = hall.quais || [];
-                                    return (
-                                      <div key={hall.id} className="hall-card">
-                                        <div className="hall-header-row">
-                                          <input
-                                            type="text"
-                                            className="gares-text-input hall-name-input"
-                                            value={hall.name}
-                                            placeholder="Nom du hall (ex: Hall A)"
-                                            onChange={(e) => updateHallName(hall.id, e.target.value)}
-                                          />
-                                          <button
-                                            type="button"
-                                            onClick={() => removeHall(hall.id)}
-                                            className="delete-hall-btn-raw"
-                                          >
-                                            Supprimer le hall
-                                          </button>
-                                        </div>
-                                        <div className="hall-quais-container">
-                                          <span className="hall-quais-title">Quais associés à ce hall :</span>
-                                          <div className="hall-quais-chips">
-                                            {formData.quais.map((quai, qIdx) => {
-                                              if (!quai.nom || quai.nom.trim() === '') return null;
-                                              const isSelected = associatedQuais.includes(quai.nom);
-                                              return (
-                                                <button
-                                                  key={quai.id || quai.clientId || qIdx}
-                                                  type="button"
-                                                  className={`quai-chip-btn ${isSelected ? 'selected' : ''}`}
-                                                  onClick={() => toggleQuaiInHall(hall.id, quai.nom)}
-                                                >
-                                                  {quai.nom}
-                                                </button>
-                                              );
-                                            })}
-                                            {formData.quais.filter(q => q.nom && q.nom.trim() !== '').length === 0 && (
-                                              <span className="no-quais-hint">Veuillez d&apos;abord renseigner des quais ci-dessus pour pouvoir les associer.</span>
-                                            )}
-                                          </div>
-                                        </div>
-                                      </div>
-                                    );
-                                  })}
-                                  <wcs-button mode="outline" onClick={addHall} className="add-hall-btn">
-                                    <wcs-mat-icon icon="add" /> Ajouter un hall
-                                  </wcs-button>
-                                </div>
-                              </div>
-                            </div>
-                        </div>
-
-                        {/* ════════════════════════════════════
-                        TAB INFORMATIONS
-                    ════════════════════════════════════ */}
-                        <div style={{ display: activeTab === 'informations' ? 'block' : 'none' }}>
-                            <div className="gares-info-layout">
-
-                              {/* ── Informations Générales ── */}
-                              <section>
-                                <h4 className="gares-info-section-title">Informations Générales</h4>
-                                <div className="gares-info-grid">
-                                  <div className="gares-col-full">
-                                    <label className="gares-form-label">Adresse de la gare</label>
-                                    <input className="gares-text-input" type="text" value={formData.informations.adresse}
-                                           onChange={e => updateInfo('adresse', e.target.value)}
-                                           placeholder="Ex: 20 Boulevard Diderot, 75012 Paris" />
-                                  </div>
-                                  <div>
-                                    <label className="gares-form-label">Horaires d&apos;ouverture du guichet</label>
-                                    <input className="gares-text-input" type="text" value={formData.informations.horaires_guichet}
-                                           onChange={e => updateInfo('horaires_guichet', e.target.value)}
-                                           placeholder="Ex: 6h00 – 21h30 (Lun-Sam)" />
-                                  </div>
-                                  <div>
-                                    <label className="gares-form-label">Horaires d&apos;ouverture de la gare</label>
-                                    <input className="gares-text-input" type="text" value={formData.informations.horaires_gare}
-                                           onChange={e => updateInfo('horaires_gare', e.target.value)}
-                                           placeholder="Ex: 5h00 – 00h30 (tous les jours)" />
-                                  </div>
-                                  <div className="gares-col-full">
-                                    <BoolField label="Distributeur de titres de transport TER"
-                                               value={formData.informations.distributeur_ter}
-                                               onChange={v => updateInfo('distributeur_ter', v)} />
-                                  </div>
-                                </div>
-                              </section>
-
-                              {/* ── Accessibilité ── */}
-                              <section>
-                                <h4 className="gares-info-section-title">Accessibilité</h4>
-                                <BoolField label="Service d'assistance en gare (ex: Accès Plus)"
-                                           value={formData.informations.service_assistance}
-                                           onChange={v => updateInfo('service_assistance', v)} />
-                              </section>
-
-                              {/* ── Services ── */}
-                              <section>
-                                <h4 className="gares-info-section-title">Services</h4>
-                                <div className="gares-info-grid compact">
-                                  <BoolField label="Espace d'attente" value={formData.informations.espace_attente} onChange={v => updateInfo('espace_attente', v)} />
-                                  <BoolField label="Distributeur de titres TGV" value={formData.informations.distributeur_tgv} onChange={v => updateInfo('distributeur_tgv', v)} />
-                                  <BoolField label="Service Objets trouvés" value={formData.informations.objets_trouves} onChange={v => updateInfo('objets_trouves', v)} />
-                                  <BoolField label="Toilettes" value={formData.informations.toilettes} onChange={v => updateInfo('toilettes', v)} />
-                                  <BoolField label="WIFI Gratuit" value={formData.informations.wifi_gratuit} onChange={v => updateInfo('wifi_gratuit', v)} />
-                                  <BoolField label="Photomaton (photos d'identité)" value={formData.informations.photomaton} onChange={v => updateInfo('photomaton', v)} />
-                                  <BoolField label="Défibrillateur" value={formData.informations.defibrillateur} onChange={v => updateInfo('defibrillateur', v)} />
-                                  <BoolField label="Galeries marchandes" value={formData.informations.galeries_marchandes} onChange={v => updateInfo('galeries_marchandes', v)} />
-                                </div>
-                              </section>
-
-                              {/* ── Voiture ── */}
-                              <section>
-                                <h4 className="gares-info-section-title">Voiture</h4>
-                                <div className="gares-info-grid compact">
-                                  <BoolField label="Dépose minute" value={formData.informations.depose_minute} onChange={v => updateInfo('depose_minute', v)} />
-                                  <BoolField label="Espace prise en charge par taxis" value={formData.informations.espace_taxis} onChange={v => updateInfo('espace_taxis', v)} />
-                                  <BoolField label="Espace dédié VTC" value={formData.informations.espace_vtc} onChange={v => updateInfo('espace_vtc', v)} />
-                                  <BoolField label="Location de voiture" value={formData.informations.location_voiture} onChange={v => updateInfo('location_voiture', v)} />
-                                  <BoolField label="Parking" value={formData.informations.parking} onChange={v => updateInfo('parking', v)} />
-                                </div>
-                              </section>
-
-                              {/* ── Vélo ── */}
-                              <section>
-                                <h4 className="gares-info-section-title">Vélo</h4>
-                                <div className="gares-info-grid compact">
-                                  <BoolField label="Vélo en libre-service" value={formData.informations.velo_libre_service} onChange={v => updateInfo('velo_libre_service', v)} />
-                                  <BoolField label="Parking vélos" value={formData.informations.parking_velos} onChange={v => updateInfo('parking_velos', v)} />
-                                </div>
-                              </section>
-
-                              {/* ── Transports en commun enrichis ── */}
-                              <section>
-                                <h4 className="gares-info-section-title">Transports en commun</h4>
-                                <div className="gares-transport-extended-list">
-                                  {[
-                                    { key: 'lignes_bus', label: 'Bus', icon: '🚌' },
-                                    { key: 'lignes_metro', label: 'Métro', icon: '🚇' },
-                                    { key: 'lignes_tramway', label: 'Tramway', icon: '🚊' },
-                                    { key: 'lignes_car_regional', label: 'Car Régional', icon: '🚍' }
-                                  ].map(({ key, label, icon }) => {
-                                    const lignes = formData.informations[key] || [];
-                                    return (
-                                        <div key={key}>
-                                          <div className="gares-extended-header">
-                                            <label className="gares-form-label gares-inline-label">
-                                              {icon} {label}
-                                              {lignes.length > 0 && (
-                                                  <span className="gares-extended-count">
-                                          {lignes.length}
-                                        </span>
-                                              )}
-                                            </label>
-                                            <button
-                                                onClick={() => addLigneTransport(key)}
-                                                className="gares-extended-add-btn"
-                                            >
-                                              + Ajouter une ligne
-                                            </button>
-                                          </div>
-                                          {lignes.length === 0 ? (
-                                              <div className="gares-extended-empty">
-                                                Aucune ligne {label.toLowerCase()} — cliquez sur &quot;Ajouter une ligne&quot;
-                                              </div>
-                                          ) : (
-                                              <div className="gares-extended-items">
-                                                {lignes.map((ligne, idx) => (
-                                                    <div key={idx} className="gares-extended-row">
-                                                      <div>
-                                                        <label className="gares-mini-label">Nom de la ligne</label>
-                                                        <input className="gares-text-input" type="text" value={ligne.nom}
-                                                               onChange={e => updateLigneTransport(key, idx, 'nom', e.target.value)}
-                                                               placeholder="Ex: Ligne 7" />
-                                                      </div>
-                                                      <div>
-                                                        <label className="gares-mini-label">Terminus A</label>
-                                                        <input className="gares-text-input" type="text" value={ligne.terminus_a}
-                                                               onChange={e => updateLigneTransport(key, idx, 'terminus_a', e.target.value)}
-                                                               placeholder="Ex: La Courneuve" />
-                                                      </div>
-                                                      <div>
-                                                        <label className="gares-mini-label">Terminus B</label>
-                                                        <input className="gares-text-input" type="text" value={ligne.terminus_b}
-                                                               onChange={e => updateLigneTransport(key, idx, 'terminus_b', e.target.value)}
-                                                               placeholder="Ex: Villejuif" />
-                                                      </div>
-                                                      <button
-                                                          onClick={() => removeLigneTransport(key, idx)}
-                                                          className="gares-extended-remove-btn"
-                                                      >×</button>
-                                                    </div>
-                                                ))}
-                                              </div>
-                                          )}
-                                        </div>
-                                    );
-                                  })}
-                                </div>
-                              </section>
-
-                            </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="modal-footer">
-                      <wcs-button className="wcs-secondary" onClick={closeModal} disabled={saving}>Annuler</wcs-button>
-                      <wcs-button className="wcs-primary" onClick={handleSave} disabled={!isFormValid || saving || (!editingGare && !canCreateGares) || (!!editingGare && !canUpdateGares)}>
-                        {saving ? 'Enregistrement...' : (editingGare ? 'Mettre à jour' : 'Créer la gare')}
-                      </wcs-button>
-                    </div>
-                  </div>
-                </div>
-            )}
-
-            {/* Modal confirmation suppression */}
-            {deleteConfirmId && (
-                <div className="modal-overlay" onClick={() => setDeleteConfirmId(null)}>
-                  <div className="modal-content modal-small" onClick={e => e.stopPropagation()}>
-                    <div className="modal-header">
-                      <h3>Confirmer la suppression</h3>
-                    </div>
-                    <div className="modal-body">
-                      <p>Êtes-vous sûr de vouloir supprimer cette gare ?</p>
-                      <p><strong>Cette action est irréversible.</strong></p>
-                    </div>
-                    <div className="modal-footer">
-                      <wcs-button className="wcs-secondary" onClick={() => setDeleteConfirmId(null)}>
-                        Annuler
-                      </wcs-button>
-                      <wcs-button className="wcs-danger" onClick={() => handleDelete(deleteConfirmId)} disabled={!canDeleteGares}>
-                        Supprimer
-                      </wcs-button>
-                    </div>
-                  </div>
-                </div>
-            )}
-
-            {/* Modal de fusion */}
-            {showMergeModal && gareToMerge && (
-                <div className="modal-overlay" onClick={() => setShowMergeModal(false)}>
-                  <div className="modal-content modal-small" onClick={e => e.stopPropagation()}>
-                    <div className="modal-header">
-                      <h3>Fusionner la gare</h3>
-                      <button className="modal-close" onClick={() => setShowMergeModal(false)}>×</button>
-                    </div>
-                    <div className="modal-body">
-                      <p>Vous êtes sur le point de fusionner la gare <strong>{gareToMerge.nom}</strong> avec une autre.</p>
-                      <p>Tous les horaires associés seront transférés vers la gare cible, puis cette gare sera supprimée. <strong>Cette action est irréversible.</strong></p>
-                      <div className="form-group" style={{ marginTop: '15px' }}>
-                        <label className="gares-form-label">Sélectionnez la gare cible à conserver :</label>
-                        <select className="gares-text-input" value={mergeTargetId} onChange={e => setMergeTargetId(e.target.value)}>
-                          <option value="">-- Choisir une gare --</option>
-                          {gares.filter(g => g.id !== gareToMerge.id).map(g => (
-                            <option key={g.id} value={g.id}>{g.nom}</option>
                           ))}
-                        </select>
+                          <wcs-button mode="stroked" onClick={addQuai} style={{ alignSelf: 'flex-start', marginTop: '6px' }}>
+                            <wcs-mat-icon icon="add" />
+                            Ajouter un quai
+                          </wcs-button>
+                        </div>
+                      </div>
+
+                      {/* Halls de la gare */}
+                      <div className="form-group">
+                        <label className="gares-form-label">Halls & Bâtiments Voyageurs</label>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                          {(formData.quais_hall || []).map((hall) => {
+                            const associatedQuais = hall.quais || [];
+                            return (
+                              <div key={hall.id} className="hall-card-modern">
+                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px' }}>
+                                  <input
+                                    type="text"
+                                    className="gares-modern-input"
+                                    style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '6px 12px', background: '#fff' }}
+                                    value={hall.name}
+                                    placeholder="Nom du hall (ex: Hall 1)"
+                                    onChange={(e) => updateHallName(hall.id, e.target.value)}
+                                  />
+                                  <wcs-button mode="clear" size="s" className="wcs-danger" onClick={() => removeHall(hall.id)}>
+                                    <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                                    Supprimer le hall
+                                  </wcs-button>
+                                </div>
+                                <div>
+                                  <span style={{ fontSize: '12px', fontWeight: 600, color: '#64748b', display: 'block', marginBottom: '6px' }}>
+                                    Quais associés à ce hall :
+                                  </span>
+                                  <div className="hall-chips-container">
+                                    {formData.quais.map((quai, qIdx) => {
+                                      if (!quai.nom || quai.nom.trim() === '') return null;
+                                      const isSelected = associatedQuais.includes(quai.nom);
+                                      return (
+                                        <button
+                                          key={quai.id || quai.clientId || qIdx}
+                                          type="button"
+                                          className={`quai-select-chip ${isSelected ? 'selected' : ''}`}
+                                          onClick={() => toggleQuaiInHall(hall.id, quai.nom)}
+                                        >
+                                          {quai.nom}
+                                        </button>
+                                      );
+                                    })}
+                                    {formData.quais.filter(q => q.nom && q.nom.trim() !== '').length === 0 && (
+                                      <span style={{ fontSize: '12px', color: '#94a3b8' }}>Renseignez d'abord des quais ci-dessus pour les associer.</span>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            );
+                          })}
+                          <wcs-button mode="stroked" onClick={addHall} style={{ alignSelf: 'flex-start' }}>
+                            <wcs-mat-icon icon="add" />
+                            Ajouter un hall
+                          </wcs-button>
+                        </div>
                       </div>
                     </div>
-                    <div className="modal-footer">
-                      <wcs-button className="wcs-secondary" onClick={() => setShowMergeModal(false)} disabled={saving}>
-                        Annuler
-                      </wcs-button>
-                      <wcs-button className="wcs-primary" onClick={handleMerge} disabled={!mergeTargetId || saving}>
-                        {saving ? 'Fusion...' : 'Confirmer la fusion'}
-                      </wcs-button>
+                  )}
+
+                  {/* TAB 3: INFORMATIONS & SERVICES */}
+                  {activeTab === 'informations' && (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '22px' }}>
+                      {/* Informations Générales */}
+                      <section>
+                        <h4 className="gares-info-section-title">
+                          <wcs-mat-icon icon="info" size="s"></wcs-mat-icon>
+                          Informations Générales
+                        </h4>
+                        <div className="gares-info-grid">
+                          <div className="gares-col-full">
+                            <label className="gares-form-label">Adresse de la gare</label>
+                            <input
+                              className="gares-modern-input"
+                              style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '8px 12px', background: '#fff' }}
+                              type="text"
+                              value={formData.informations.adresse}
+                              onChange={e => updateInfo('adresse', e.target.value)}
+                              placeholder="Ex: 20 Boulevard Diderot, 75012 Paris"
+                            />
+                          </div>
+                          <div>
+                            <label className="gares-form-label">Horaires du guichet</label>
+                            <input
+                              className="gares-modern-input"
+                              style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '8px 12px', background: '#fff' }}
+                              type="text"
+                              value={formData.informations.horaires_guichet}
+                              onChange={e => updateInfo('horaires_guichet', e.target.value)}
+                              placeholder="Ex: 6h00 – 21h30 (Lun-Sam)"
+                            />
+                          </div>
+                          <div>
+                            <label className="gares-form-label">Horaires de la gare</label>
+                            <input
+                              className="gares-modern-input"
+                              style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '8px 12px', background: '#fff' }}
+                              type="text"
+                              value={formData.informations.horaires_gare}
+                              onChange={e => updateInfo('horaires_gare', e.target.value)}
+                              placeholder="Ex: 5h00 – 00h30 (tous les jours)"
+                            />
+                          </div>
+                          <div className="gares-col-full">
+                            <BoolField
+                              label="Distributeur de titres TER"
+                              value={formData.informations.distributeur_ter}
+                              onChange={v => updateInfo('distributeur_ter', v)}
+                            />
+                          </div>
+                        </div>
+                      </section>
+
+                      {/* Accessibilité */}
+                      <section>
+                        <h4 className="gares-info-section-title">
+                          <wcs-mat-icon icon="accessible" size="s"></wcs-mat-icon>
+                          Accessibilité PMR
+                        </h4>
+                        <BoolField
+                          label="Service d'assistance en gare (Accès Plus / PMR)"
+                          value={formData.informations.service_assistance}
+                          onChange={v => updateInfo('service_assistance', v)}
+                        />
+                      </section>
+
+                      {/* Services */}
+                      <section>
+                        <h4 className="gares-info-section-title">
+                          <wcs-mat-icon icon="room_service" size="s"></wcs-mat-icon>
+                          Services aux voyageurs
+                        </h4>
+                        <div className="gares-info-grid compact">
+                          <BoolField label="Espace d'attente" value={formData.informations.espace_attente} onChange={v => updateInfo('espace_attente', v)} />
+                          <BoolField label="Distributeur de titres TGV" value={formData.informations.distributeur_tgv} onChange={v => updateInfo('distributeur_tgv', v)} />
+                          <BoolField label="Objets trouvés" value={formData.informations.objets_trouves} onChange={v => updateInfo('objets_trouves', v)} />
+                          <BoolField label="Toilettes publiques" value={formData.informations.toilettes} onChange={v => updateInfo('toilettes', v)} />
+                          <BoolField label="WiFi Gratuit" value={formData.informations.wifi_gratuit} onChange={v => updateInfo('wifi_gratuit', v)} />
+                          <BoolField label="Photomaton" value={formData.informations.photomaton} onChange={v => updateInfo('photomaton', v)} />
+                          <BoolField label="Défibrillateur" value={formData.informations.defibrillateur} onChange={v => updateInfo('defibrillateur', v)} />
+                          <BoolField label="Commerces & Galeries" value={formData.informations.galeries_marchandes} onChange={v => updateInfo('galeries_marchandes', v)} />
+                        </div>
+                      </section>
+
+                      {/* Voiture & Vélo */}
+                      <section>
+                        <h4 className="gares-info-section-title">
+                          <wcs-mat-icon icon="directions_car" size="s"></wcs-mat-icon>
+                          Intermodalité Voiture & Vélo
+                        </h4>
+                        <div className="gares-info-grid compact">
+                          <BoolField label="Dépose minute" value={formData.informations.depose_minute} onChange={v => updateInfo('depose_minute', v)} />
+                          <BoolField label="Station Taxis" value={formData.informations.espace_taxis} onChange={v => updateInfo('espace_taxis', v)} />
+                          <BoolField label="Espace VTC" value={formData.informations.espace_vtc} onChange={v => updateInfo('espace_vtc', v)} />
+                          <BoolField label="Location de voiture" value={formData.informations.location_voiture} onChange={v => updateInfo('location_voiture', v)} />
+                          <BoolField label="Parking gare" value={formData.informations.parking} onChange={v => updateInfo('parking', v)} />
+                          <BoolField label="Vélos libre-service" value={formData.informations.velo_libre_service} onChange={v => updateInfo('velo_libre_service', v)} />
+                          <BoolField label="Parking vélos sécurisé" value={formData.informations.parking_velos} onChange={v => updateInfo('parking_velos', v)} />
+                        </div>
+                      </section>
+
+                      {/* Transports en commun enrichis */}
+                      <section>
+                        <h4 className="gares-info-section-title">
+                          <wcs-mat-icon icon="directions_bus" size="s"></wcs-mat-icon>
+                          Lignes de correspondance
+                        </h4>
+                        <div className="gares-transport-extended-list">
+                          {[
+                            { key: 'lignes_bus', label: 'Bus', icon: 'directions_bus' },
+                            { key: 'lignes_metro', label: 'Métro', icon: 'subway' },
+                            { key: 'lignes_tramway', label: 'Tramway', icon: 'tram' },
+                            { key: 'lignes_car_regional', label: 'Car Régional', icon: 'directions_bus' }
+                          ].map(({ key, label, icon }) => {
+                            const lignes = formData.informations[key] || [];
+                            return (
+                              <div key={key} style={{ marginBottom: '14px', border: '1px solid #e2e8f0', borderRadius: '10px', padding: '12px', background: '#f8fafc' }}>
+                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
+                                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontWeight: 700, color: '#334155' }}>
+                                    <wcs-mat-icon icon={icon} size="s"></wcs-mat-icon>
+                                    <span>{label}</span>
+                                    {lignes.length > 0 && (
+                                      <wcs-badge className="wcs-info">{lignes.length}</wcs-badge>
+                                    )}
+                                  </div>
+                                  <wcs-button mode="clear" size="s" onClick={() => addLigneTransport(key)}>
+                                    <wcs-mat-icon icon="add" size="s"></wcs-mat-icon>
+                                    Ajouter une ligne
+                                  </wcs-button>
+                                </div>
+                                {lignes.length === 0 ? (
+                                  <div style={{ fontSize: '12px', color: '#94a3b8', fontStyle: 'italic' }}>
+                                    Aucune ligne {label.toLowerCase()} configurée.
+                                  </div>
+                                ) : (
+                                  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                                    {lignes.map((ligne, idx) => (
+                                      <div key={idx} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr auto', gap: '8px', alignItems: 'center' }}>
+                                        <input
+                                          className="gares-modern-input"
+                                          style={{ border: '1px solid #cbd5e1', borderRadius: '6px', padding: '6px 10px', background: '#fff', fontSize: '13px' }}
+                                          type="text"
+                                          value={ligne.nom}
+                                          onChange={e => updateLigneTransport(key, idx, 'nom', e.target.value)}
+                                          placeholder="Ex: Ligne 7"
+                                        />
+                                        <input
+                                          className="gares-modern-input"
+                                          style={{ border: '1px solid #cbd5e1', borderRadius: '6px', padding: '6px 10px', background: '#fff', fontSize: '13px' }}
+                                          type="text"
+                                          value={ligne.terminus_a}
+                                          onChange={e => updateLigneTransport(key, idx, 'terminus_a', e.target.value)}
+                                          placeholder="Terminus A"
+                                        />
+                                        <input
+                                          className="gares-modern-input"
+                                          style={{ border: '1px solid #cbd5e1', borderRadius: '6px', padding: '6px 10px', background: '#fff', fontSize: '13px' }}
+                                          type="text"
+                                          value={ligne.terminus_b}
+                                          onChange={e => updateLigneTransport(key, idx, 'terminus_b', e.target.value)}
+                                          placeholder="Terminus B"
+                                        />
+                                        <wcs-button mode="clear" shape="square" size="s" onClick={() => removeLigneTransport(key, idx)}>
+                                          <wcs-mat-icon icon="close" size="s"></wcs-mat-icon>
+                                        </wcs-button>
+                                      </div>
+                                    ))}
+                                  </div>
+                                )}
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </section>
                     </div>
+                  )}
+                </div>
+
+                <div className="gares-modal-footer">
+                  <wcs-button className="wcs-secondary" onClick={closeModal} disabled={saving}>
+                    Annuler
+                  </wcs-button>
+                  <wcs-button
+                    className="wcs-primary"
+                    onClick={handleSave}
+                    disabled={!isFormValid || saving || (!editingGare && !canCreateGares) || (!!editingGare && !canUpdateGares)}
+                  >
+                    {saving ? 'Enregistrement...' : (editingGare ? 'Mettre à jour' : 'Créer la gare')}
+                  </wcs-button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Modal confirmation suppression */}
+          {deleteConfirmId && (
+            <div className="gares-modal-overlay" onClick={() => setDeleteConfirmId(null)}>
+              <div className="gares-modal-dialog" style={{ maxWidth: '440px' }} onClick={e => e.stopPropagation()}>
+                <div className="gares-modal-header">
+                  <h3>Confirmer la suppression</h3>
+                  <button className="modal-close" onClick={() => setDeleteConfirmId(null)}>
+                    <wcs-mat-icon icon="close"></wcs-mat-icon>
+                  </button>
+                </div>
+                <div className="gares-modal-body">
+                  <p style={{ margin: 0, color: '#334155' }}>Êtes-vous sûr de vouloir supprimer cette gare ?</p>
+                  <p style={{ margin: '8px 0 0', color: '#e11d48', fontWeight: 600 }}>Cette action est irréversible.</p>
+                </div>
+                <div className="gares-modal-footer">
+                  <wcs-button className="wcs-secondary" onClick={() => setDeleteConfirmId(null)}>
+                    Annuler
+                  </wcs-button>
+                  <wcs-button className="wcs-danger" onClick={() => handleDelete(deleteConfirmId)} disabled={!canDeleteGares}>
+                    <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                    Supprimer
+                  </wcs-button>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Modal de fusion */}
+          {showMergeModal && gareToMerge && (
+            <div className="gares-modal-overlay" onClick={() => setShowMergeModal(false)}>
+              <div className="gares-modal-dialog" style={{ maxWidth: '500px' }} onClick={e => e.stopPropagation()}>
+                <div className="gares-modal-header">
+                  <h3>Fusionner la gare</h3>
+                  <button className="modal-close" onClick={() => setShowMergeModal(false)}>
+                    <wcs-mat-icon icon="close"></wcs-mat-icon>
+                  </button>
+                </div>
+                <div className="gares-modal-body">
+                  <p style={{ margin: 0, color: '#334155' }}>
+                    Vous êtes sur le point de fusionner <strong>{gareToMerge.nom}</strong> avec une autre gare.
+                  </p>
+                  <p style={{ margin: '8px 0 16px', color: '#64748b', fontSize: '13px' }}>
+                    Tous les horaires associés seront transférés vers la gare cible choisie ci-dessous. Cette gare sera ensuite supprimée.
+                  </p>
+                  <div className="form-group">
+                    <label className="gares-form-label">Sélectionnez la gare cible à conserver :</label>
+                    <select
+                      className="gares-modern-input"
+                      style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '10px 12px', background: '#fff', width: '100%' }}
+                      value={mergeTargetId}
+                      onChange={e => setMergeTargetId(e.target.value)}
+                    >
+                      <option value="">-- Choisir une gare --</option>
+                      {gares.filter(g => g.id !== gareToMerge.id).map(g => (
+                        <option key={g.id} value={g.id}>{g.nom}</option>
+                      ))}
+                    </select>
                   </div>
                 </div>
-            )}
+                <div className="gares-modal-footer">
+                  <wcs-button className="wcs-secondary" onClick={() => setShowMergeModal(false)} disabled={saving}>
+                    Annuler
+                  </wcs-button>
+                  <wcs-button className="wcs-primary" onClick={handleMerge} disabled={!mergeTargetId || saving}>
+                    <wcs-mat-icon icon="merge_type"></wcs-mat-icon>
+                    {saving ? 'Fusion...' : 'Confirmer la fusion'}
+                  </wcs-button>
+                </div>
+              </div>
+            </div>
+          )}
+
         </div>
       </div>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/pages/gares/ImportGaresGTFS.js b/src/pages/gares/ImportGaresGTFS.js
index 9293f29..9a016c6 100644
--- a/src/pages/gares/ImportGaresGTFS.js
+++ b/src/pages/gares/ImportGaresGTFS.js
@@ -219,12 +219,32 @@ export default function ImportGaresGTFS() {
     };
 
     return (
-        <div className="panel-layout">
-            <div className="panel-nav"><NavPanel /></div>
-            <div className="panel-content">
-                <wcs-card>
-                    <div style={{ padding: 20 }}>
-                        <h2>Import Gares depuis GTFS</h2>
+        <div className="sncf-groupe gares-page-root">
+            <div className="panel-layout">
+                <div className="panel-nav"><NavPanel /></div>
+                <div className="panel-content gares-modern-container">
+                    <section className="gares-hero-banner">
+                        <div className="gares-hero-content">
+                            <div className="gares-hero-tags">
+                                <span className="gares-kicker-pill">
+                                    <wcs-mat-icon icon="file_upload" size="s"></wcs-mat-icon>
+                                    GTFS Transits
+                                </span>
+                            </div>
+                            <h1 className="gares-hero-title">Import de Gares GTFS</h1>
+                            <p className="gares-hero-subtitle">
+                                Analysez et importez en masse les données d&apos;arrêts et de correspondances depuis un flux GTFS.
+                            </p>
+                        </div>
+                        <div className="gares-hero-actions">
+                            <wcs-button className="wcs-secondary" onClick={() => { window.location.assign('/gares'); }}>
+                                <wcs-mat-icon icon="arrow_back"></wcs-mat-icon>
+                                Retour aux gares
+                            </wcs-button>
+                        </div>
+                    </section>
+
+                    <div className="gares-controls-card">
 
                         {step === 1 && (
                             <div>
@@ -292,7 +312,7 @@ export default function ImportGaresGTFS() {
                                                     <small>{groups[routeName].length} gare(s)</small>
                                                     <wcs-button mode="clear" size="s" onClick={(e) => { e.stopPropagation(); selectAllInGroup(routeName, true); }}>Tout</wcs-button>
                                                     <wcs-button mode="clear" size="s" onClick={(e) => { e.stopPropagation(); selectAllInGroup(routeName, false); }}>Aucun</wcs-button>
-                                                    <span>{expandedRoutes[routeName] ? '▲' : '▼'}</span>
+                                                    <wcs-mat-icon icon={expandedRoutes[routeName] ? 'expand_less' : 'expand_more'} size="s"></wcs-mat-icon>
                                                 </div>
                                             </div>
                                             {expandedRoutes[routeName] && (
@@ -398,7 +418,7 @@ export default function ImportGaresGTFS() {
                         )}
 
                     </div>
-                </wcs-card>
+                </div>
             </div>
         </div>
     );
diff --git a/src/pages/gares/InfoGaresTab.css b/src/pages/gares/InfoGaresTab.css
index ee80d92..e6856fc 100644
--- a/src/pages/gares/InfoGaresTab.css
+++ b/src/pages/gares/InfoGaresTab.css
@@ -236,4 +236,93 @@
   .info-gare-form-grid {
     grid-template-columns: 1fr;
   }
+}
+
+/* Dark Mode */
+body.dark-mode .info-gare-desc-preview,
+[data-theme="dark"] .info-gare-desc-preview {
+  color: #94a3b8;
+}
+
+body.dark-mode .display-dates-info,
+[data-theme="dark"] .display-dates-info {
+  color: #cbd5e1;
+}
+
+body.dark-mode .display-dates-info small,
+[data-theme="dark"] .display-dates-info small {
+  color: #64748b;
+}
+
+body.dark-mode .status-active,
+[data-theme="dark"] .status-active {
+  background: rgba(22, 163, 74, 0.2);
+  color: #4ade80;
+  border-color: rgba(22, 163, 74, 0.4);
+}
+
+body.dark-mode .status-scheduled,
+[data-theme="dark"] .status-scheduled {
+  background: rgba(37, 99, 235, 0.2);
+  color: #60a5fa;
+  border-color: rgba(37, 99, 235, 0.4);
+}
+
+body.dark-mode .status-expired,
+[data-theme="dark"] .status-expired {
+  background: #1e293b;
+  color: #94a3b8;
+  border-color: #334155;
+}
+
+body.dark-mode .target-gare,
+[data-theme="dark"] .target-gare {
+  background: #0d2744;
+  color: #38bdf8;
+  border-color: #0369a1;
+}
+
+body.dark-mode .target-ligne,
+[data-theme="dark"] .target-ligne {
+  background: #2b1307;
+  color: #fb923c;
+  border-color: #7c2d12;
+}
+
+body.dark-mode .target-global,
+[data-theme="dark"] .target-global {
+  background: #250e38;
+  color: #c084fc;
+  border-color: #6b21a8;
+}
+
+body.dark-mode .gare-search-suggestions,
+[data-theme="dark"] .gare-search-suggestions {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .gare-search-suggestions li,
+[data-theme="dark"] .gare-search-suggestions li {
+  color: #e2e8f0;
+}
+
+body.dark-mode .gare-search-suggestions li:hover,
+[data-theme="dark"] .gare-search-suggestions li:hover {
+  background: #1e293b;
+  color: #38bdf8;
+}
+
+body.dark-mode .selected-gare-badge,
+[data-theme="dark"] .selected-gare-badge {
+  background: #0d2744;
+  border-color: #0369a1;
+  color: #38bdf8;
+}
+
+body.dark-mode .info-gare-modal .modal-footer,
+[data-theme="dark"] .info-gare-modal .modal-footer {
+  border-top-color: #243247;
+  background: #0e1726;
 }
\ No newline at end of file
diff --git a/src/pages/gares/InfoGaresTab.js b/src/pages/gares/InfoGaresTab.js
index a561c25..d002ec9 100644
--- a/src/pages/gares/InfoGaresTab.js
+++ b/src/pages/gares/InfoGaresTab.js
@@ -285,17 +285,17 @@ const InfoGaresTab = forwardRef((props, ref) => {
                       <div className="target-info-list">
                         {targetGare && (
                           <span className="target-badge-item target-gare">
-                            🚆 {targetGare}
+                            <wcs-mat-icon icon="train" size="s"></wcs-mat-icon> {targetGare}
                           </span>
                         )}
                         {targetLigne && (
                           <span className="target-badge-item target-ligne">
-                            🎫 Ligne {targetLigne}
+                            <wcs-mat-icon icon="confirmation_number" size="s"></wcs-mat-icon> Ligne {targetLigne}
                           </span>
                         )}
                         {!targetGare && !targetLigne && (
                           <span className="target-badge-item target-global">
-                            🌐 Toutes gares / lignes
+                            <wcs-mat-icon icon="public" size="s"></wcs-mat-icon> Toutes gares / lignes
                           </span>
                         )}
                       </div>
diff --git a/src/pages/gares/RichTextEditor.css b/src/pages/gares/RichTextEditor.css
index 904c49e..ad1c17d 100644
--- a/src/pages/gares/RichTextEditor.css
+++ b/src/pages/gares/RichTextEditor.css
@@ -100,3 +100,49 @@
   pointer-events: none;
   display: block;
 }
+
+/* Dark Mode */
+body.dark-mode .rich-text-editor,
+[data-theme="dark"] .rich-text-editor {
+  background: #0b111e;
+  border-color: #243247;
+}
+
+body.dark-mode .rich-text-editor:focus-within,
+[data-theme="dark"] .rich-text-editor:focus-within {
+  border-color: #0088ce;
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .rte-toolbar,
+[data-theme="dark"] .rte-toolbar {
+  background: #111a28;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .rte-btn,
+[data-theme="dark"] .rte-btn {
+  color: #94a3b8;
+}
+
+body.dark-mode .rte-btn:hover,
+[data-theme="dark"] .rte-btn:hover {
+  background: #1e293b;
+  color: #f8fafc;
+  border-color: #334155;
+}
+
+body.dark-mode .rte-separator,
+[data-theme="dark"] .rte-separator {
+  background: #243247;
+}
+
+body.dark-mode .rte-content,
+[data-theme="dark"] .rte-content {
+  color: #f8fafc;
+}
+
+body.dark-mode .rte-content:empty::before,
+[data-theme="dark"] .rte-content:empty::before {
+  color: #64748b;
+}
diff --git a/src/pages/horaires/AttributionQuaisDepartArrivee.css b/src/pages/horaires/AttributionQuaisDepartArrivee.css
index abb822a..c9b4fda 100644
--- a/src/pages/horaires/AttributionQuaisDepartArrivee.css
+++ b/src/pages/horaires/AttributionQuaisDepartArrivee.css
@@ -87,3 +87,47 @@
   border-color: #0047ab;
   box-shadow: 0 0 0 2px rgba(0, 71, 171, 0.2);
 }
+
+/* Dark Mode */
+body.dark-mode .attribution-depart-arrivee,
+[data-theme="dark"] .attribution-depart-arrivee {
+  background-color: #151f30;
+  color: #f1f5f9;
+  border-color: #243247;
+}
+
+body.dark-mode .attribution-depart-arrivee-header h2,
+[data-theme="dark"] .attribution-depart-arrivee-header h2 {
+  color: #38bdf8;
+}
+
+body.dark-mode .attribution-depart-arrivee-table th,
+[data-theme="dark"] .attribution-depart-arrivee-table th {
+  background-color: #0e1726;
+  color: #94a3b8;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .attribution-depart-arrivee-table td,
+[data-theme="dark"] .attribution-depart-arrivee-table td {
+  border-bottom-color: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark-mode .attribution-depart-arrivee-table tr.row-depart,
+[data-theme="dark"] .attribution-depart-arrivee-table tr.row-depart {
+  background-color: #0d2744;
+}
+
+body.dark-mode .attribution-depart-arrivee-table tr.row-arrivee,
+[data-theme="dark"] .attribution-depart-arrivee-table tr.row-arrivee {
+  background-color: #0e2e21;
+}
+
+body.dark-mode .quai-select,
+[data-theme="dark"] .quai-select {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
diff --git a/src/pages/horaires/AttributionQuaisSchematique.css b/src/pages/horaires/AttributionQuaisSchematique.css
index 6702cf4..ed91850 100644
--- a/src/pages/horaires/AttributionQuaisSchematique.css
+++ b/src/pages/horaires/AttributionQuaisSchematique.css
@@ -362,3 +362,76 @@
   background-color: #fafafa;
   border-radius: 0 0 8px 8px;
 }
+
+/* Dark Mode */
+body.dark-mode .timeline-container,
+[data-theme="dark"] .timeline-container {
+  background-color: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .timeline-header,
+body.dark-mode .quai-label-header,
+[data-theme="dark"] .timeline-header,
+[data-theme="dark"] .quai-label-header {
+  background-color: #0e1726;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .quai-label,
+[data-theme="dark"] .quai-label {
+  background-color: #111a28;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .timeline-track-row,
+[data-theme="dark"] .timeline-track-row {
+  border-color: #243247;
+}
+
+body.dark-mode .hour-mark,
+[data-theme="dark"] .hour-mark {
+  border-left-color: #243247;
+  color: #94a3b8;
+}
+
+body.dark-mode .train-modal-content,
+[data-theme="dark"] .train-modal-content {
+  background-color: #151f30;
+  color: #f8fafc;
+  border: 1px solid #243247;
+}
+
+body.dark-mode .train-modal-header,
+body.dark-mode .train-modal-footer,
+[data-theme="dark"] .train-modal-header,
+[data-theme="dark"] .train-modal-footer {
+  background-color: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .train-modal-header h3,
+[data-theme="dark"] .train-modal-header h3 {
+  color: #38bdf8;
+}
+
+body.dark-mode .train-modal-tabs,
+[data-theme="dark"] .train-modal-tabs {
+  background-color: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .tab-btn,
+[data-theme="dark"] .tab-btn {
+  color: #94a3b8;
+}
+
+body.dark-mode .tab-btn.active,
+[data-theme="dark"] .tab-btn.active {
+  background-color: #1e293b;
+  color: #38bdf8;
+  border-bottom-color: #38bdf8;
+}
+
diff --git a/src/pages/horaires/Horaires.css b/src/pages/horaires/Horaires.css
index 5f9d4d0..38c2335 100644
--- a/src/pages/horaires/Horaires.css
+++ b/src/pages/horaires/Horaires.css
@@ -1,241 +1,566 @@
 :root {
-  --horaires-blue-950: #082e4f;
-  --horaires-blue-900: #0d3d67;
-  --horaires-blue-800: #11507e;
-  --horaires-blue-700: #1d5f90;
+  --horaires-blue-950: #061c2f;
+  --horaires-blue-900: #082e4f;
+  --horaires-blue-800: #0d3d67;
+  --horaires-blue-700: #11507e;
+  --horaires-blue-600: #1d5f90;
   --horaires-blue-500: #0088ce;
+  --horaires-blue-400: #38bdf8;
+  --horaires-blue-100: #e0f2fe;
+  --horaires-blue-50: #f0f9ff;
   --horaires-surface: #ffffff;
-  --horaires-surface-soft: #f7fbff;
-  --horaires-border: #d8e5f3;
-  --horaires-text: #12324e;
-  --horaires-muted: #62809a;
-  --horaires-shadow-soft: 0 8px 26px rgba(8, 46, 79, 0.1);
-  --horaires-shadow-strong: 0 16px 40px rgba(8, 46, 79, 0.2);
+  --horaires-surface-soft: #f8fafc;
+  --horaires-surface-card: #ffffff;
+  --horaires-border: #e2e8f0;
+  --horaires-border-soft: #edf2f7;
+  --horaires-text: #0f172a;
+  --horaires-muted: #64748b;
+  --horaires-shadow-soft: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
+  --horaires-shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
+  --horaires-shadow-strong: 0 20px 40px -15px rgba(8, 46, 79, 0.35);
+  --horaires-radius-sm: 8px;
+  --horaires-radius-md: 12px;
+  --horaires-radius-lg: 16px;
+  --horaires-radius-xl: 20px;
 }
 
-.horaires-page {
+/* Base Layout */
+.horaires-page-root {
   background:
-    radial-gradient(circle at 0 0, rgba(17, 80, 126, 0.14) 0, rgba(17, 80, 126, 0) 35%),
-    radial-gradient(circle at 100% 0, rgba(8, 46, 79, 0.16) 0, rgba(8, 46, 79, 0) 40%),
-    #f2f7fd;
-  min-height: 100%;
+    radial-gradient(circle at 10% 10%, rgba(13, 61, 103, 0.04) 0%, transparent 40%),
+    radial-gradient(circle at 90% 20%, rgba(0, 136, 206, 0.05) 0%, transparent 50%),
+    #f8fafc;
+  min-height: 100vh;
+  width: 100%;
 }
 
-.horaires-page-content {
-  width: min(1460px, 100%);
+.horaires-modern-container {
+  max-width: 1540px;
   margin: 0 auto;
-  padding-bottom: 12px;
+  padding: 24px 32px 60px;
+  box-sizing: border-box;
 }
 
-.horaires-page-header {
-  background: linear-gradient(140deg, var(--horaires-blue-950) 0%, var(--horaires-blue-800) 70%, var(--horaires-blue-700) 100%);
-  border-radius: 18px;
-  color: #f8fbff;
-  padding: 26px;
-  margin-bottom: 16px;
+/* 1. HERO BANNER */
+.horaires-hero-banner {
+  background: linear-gradient(135deg, #082e4f 0%, #0d3d67 40%, #11507e 75%, #0088ce 100%);
+  border-radius: var(--horaires-radius-xl);
+  color: #ffffff;
+  padding: 32px 36px;
+  margin-bottom: 24px;
   display: flex;
   justify-content: space-between;
-  gap: 14px;
-  align-items: flex-start;
+  align-items: center;
+  gap: 24px;
   box-shadow: var(--horaires-shadow-strong);
-  border: 1px solid rgba(255, 255, 255, 0.14);
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
 }
 
-.horaires-page-kicker {
-  margin: 0 0 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+.horaires-hero-banner::after {
+  content: '';
+  position: absolute;
+  top: -40%;
+  right: -10%;
+  width: 420px;
+  height: 420px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.horaires-hero-content {
+  max-width: 820px;
+  position: relative;
+  z-index: 2;
+}
+
+.horaires-hero-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.horaires-kicker-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.14);
+  backdrop-filter: blur(8px);
+  padding: 4px 12px;
+  border-radius: 9999px;
   font-size: 11px;
   font-weight: 700;
-  opacity: 0.86;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #e0f2fe;
+  border: 1px solid rgba(255, 255, 255, 0.18);
 }
 
-.horaires-page-header h2 {
+.horaires-hero-title {
+  margin: 0 0 10px;
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: #ffffff !important;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.horaires-hero-subtitle {
   margin: 0;
-  font-size: 30px;
-  letter-spacing: -0.01em;
-  color: #f8fbff !important;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
+  font-size: 14.5px;
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.92);
 }
 
-.horaires-page-kicker,
-.horaires-page-description {
-  color: #f2f9ff !important;
+.horaires-hero-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
 }
 
-.horaires-page-description {
-  margin: 10px 0 0;
-  color: rgba(247, 251, 255, 0.94);
-  max-width: 780px;
+/* 2. KPI STAT CARDS */
+.horaires-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 18px;
+  margin-bottom: 24px;
 }
 
-.horaires-alert {
-  margin-bottom: 1rem;
-}
-
-.horaires-main-tabs {
-  border-radius: 16px;
+.horaires-kpi-card {
+  background: var(--horaires-surface);
   border: 1px solid var(--horaires-border);
-  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
+  border-radius: var(--horaires-radius-lg);
+  padding: 20px 22px;
+  display: flex;
+  align-items: center;
+  gap: 18px;
   box-shadow: var(--horaires-shadow-soft);
-  padding: 10px 14px 14px;
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: pointer;
+  user-select: none;
+}
+
+.horaires-kpi-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--horaires-shadow-card);
+  border-color: #cbd5e1;
+}
+
+.horaires-kpi-card.active {
+  border-color: var(--horaires-blue-500);
+  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
+  box-shadow: 0 0 0 2px var(--horaires-blue-500), var(--horaires-shadow-card);
+}
+
+.horaires-kpi-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: var(--horaires-radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px;
+  flex-shrink: 0;
+}
+
+.kpi-blue {
+  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
+  color: #0284c7;
+}
+
+.kpi-emerald {
+  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
+  color: #16a34a;
+}
+
+.kpi-amber {
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  color: #d97706;
+}
+
+.kpi-purple {
+  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
+  color: #9333ea;
+}
+
+.horaires-kpi-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.horaires-kpi-label {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--horaires-muted);
+  margin-bottom: 3px;
+}
+
+.horaires-kpi-value {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--horaires-text);
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.horaires-kpi-subtext {
+  font-size: 11.5px;
+  color: #94a3b8;
+  margin-top: 4px;
+  white-space: nowrap;
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.horaires-main-tabs {
-  --wcs-tabs-color: var(--horaires-blue-800);
+/* 3. SEGMENTED MAIN TABS */
+.horaires-main-tabs-nav {
+  display: flex;
+  gap: 8px;
+  background: #ffffff;
+  padding: 8px;
+  border-radius: var(--horaires-radius-lg);
+  border: 1px solid var(--horaires-border);
+  box-shadow: var(--horaires-shadow-soft);
+  margin-bottom: 20px;
+  overflow-x: auto;
+  scrollbar-width: none;
 }
 
+.horaires-main-tabs-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.horaires-main-tab-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 18px;
+  border: none;
+  background: transparent;
+  border-radius: var(--horaires-radius-md);
+  color: var(--horaires-muted);
+  font-size: 13.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  white-space: nowrap;
+}
+
+.horaires-main-tab-btn:hover {
+  background: var(--horaires-surface-soft);
+  color: var(--horaires-text);
+}
+
+.horaires-main-tab-btn.active {
+  background: linear-gradient(135deg, #0d3d67 0%, #11507e 100%);
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(13, 61, 103, 0.25);
+}
+
+.horaires-main-tab-btn.active wcs-mat-icon {
+  color: #38bdf8;
+}
+
+.horaires-main-tab-badge {
+  background: rgba(15, 23, 42, 0.08);
+  color: var(--horaires-muted);
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.18s ease;
+}
+
+.horaires-main-tab-btn.active .horaires-main-tab-badge {
+  background: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+
+/* 4. WORKSPACE & SIDEBAR (Horaires Tab) */
 .horaires-workspace {
   display: flex;
-  gap: 0;
-  min-height: 560px;
-  border-radius: 14px;
+  min-height: 640px;
+  border-radius: var(--horaires-radius-lg);
   overflow: hidden;
-  border: 1px solid #e1eaf4;
-  background: #f6faff;
+  border: 1px solid var(--horaires-border);
+  background: #ffffff;
+  box-shadow: var(--horaires-shadow-card);
 }
 
-.horaires-workspace > div:first-child {
-  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.15);
-  background: linear-gradient(180deg, #0a3558 0%, #0f446f 60%, #12507f 100%) !important;
-  border-right: none !important;
+.horaires-lines-sidebar {
+  flex-shrink: 0;
+  background: linear-gradient(180deg, #092e4f 0%, #0d3d67 50%, #11507e 100%);
+  color: #e2e8f0;
+  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-/* Contraste panneau latéral lignes (normal / secondaire / actif) */
-.horaires-workspace > div:first-child {
-  color: #e8f4ff;
+.horaires-lines-toggle-btn {
+  position: absolute;
+  top: 10px;
+  right: 8px;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: var(--horaires-radius-sm);
+  color: #ffffff;
+  padding: 5px 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
 }
 
-/* Hover / active styles for lignes panel items */
-.horaires-workspace > div:first-child .ligne-item .ligne-name,
-.horaires-workspace > div:first-child .ligne-item .ligne-count,
-.horaires-workspace > div:first-child .ligne-item wcs-mat-icon {
-  transition: color 0.15s ease, background 0.15s ease, font-weight 0.15s ease;
+.horaires-lines-toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.28);
 }
 
-/* When hovering an item, make its text and icon blue and the badge blue like the selected state */
-.horaires-workspace > div:first-child .ligne-item:hover .ligne-name {
-  color: #0088ce !important;
-  font-weight: 700 !important;
-}
-.horaires-workspace > div:first-child .ligne-item:hover wcs-mat-icon {
-  color: #0088ce !important;
-}
-.horaires-workspace > div:first-child .ligne-item:hover .ligne-count {
-  background: #0088ce !important;
-  color: #fff !important;
+.horaires-lines-sidebar-header {
+  padding: 14px 16px 10px;
+  font-weight: 700;
+  font-size: 12px;
+  color: #93c5fd;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-/* Keep selected (active) appearance */
-.horaires-workspace > div:first-child .ligne-item.is-active .ligne-name {
-  color: #0088ce !important;
-  font-weight: 700 !important;
-}
-.horaires-workspace > div:first-child .ligne-item.is-active wcs-mat-icon {
-  color: #0088ce !important;
-}
-.horaires-workspace > div:first-child .ligne-item.is-active .ligne-count {
-  background: #0088ce !important;
-  color: #fff !important;
+.horaires-lines-list {
+  overflow-y: auto;
+  flex: 1;
+  padding: 4px 8px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
 }
 
-.horaires-workspace > div:first-child [style*="color: #374151"],
-.horaires-workspace > div:first-child [style*="color: #1f2937"],
-.horaires-workspace > div:first-child [style*="color: #0088ce"],
-.horaires-workspace > div:first-child [style*="color: #0369a1"],
-.horaires-workspace > div:first-child [style*="color: #0c4a6e"] {
-  color: #f4faff !important;
+.horaires-lines-list::-webkit-scrollbar {
+  width: 5px;
+}
+.horaires-lines-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
 }
 
-.horaires-workspace > div:first-child [style*="color: #6b7280"],
-.horaires-workspace > div:first-child [style*="color: #9ca3af"],
-.horaires-workspace > div:first-child [style*="color: #d1d5db"] {
-  color: #b7d0e3 !important;
+.ligne-item-modern {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  border-radius: var(--horaires-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  transition: all 0.15s ease;
+  gap: 8px;
+  margin-bottom: 2px;
+  color: #cbd5e1;
 }
 
-.horaires-workspace > div:first-child [style*="background: #e5e7eb"],
-.horaires-workspace > div:first-child [style*="background: #f3f4f6"],
-.horaires-workspace > div:first-child [style*="background: #e8f4fd"] {
-  background: rgba(255, 255, 255, 0.14) !important;
+.ligne-item-modern:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
 }
 
-.horaires-workspace > div:first-child [style*="background: #0088ce"] {
-  background: #7dc8f3 !important;
-  color: #05263f !important;
+.ligne-item-modern.is-active {
+  background: linear-gradient(90deg, #0284c7 0%, #0088ce 100%);
+  color: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 136, 206, 0.35);
+  font-weight: 700;
 }
 
-.horaires-workspace > div:first-child button[style*="background: #e8f4fd"] {
-  background: rgba(125, 200, 243, 0.3) !important;
+.ligne-item-modern .ligne-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow: hidden;
+  font-size: 13px;
 }
 
-.horaires-workspace > div:first-child button[style*="background: transparent"]:hover {
-  background: rgba(255, 255, 255, 0.18) !important;
+.ligne-item-modern .ligne-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.horaires-workspace > div:first-child button {
-  border-radius: 10px !important;
+.ligne-item-modern .ligne-count {
+  background: rgba(255, 255, 255, 0.16);
+  color: #ffffff;
+  border-radius: 9999px;
+  padding: 2px 7px;
+  font-size: 11px;
+  font-weight: 700;
+  flex-shrink: 0;
 }
 
+.ligne-item-modern.is-active .ligne-count {
+  background: #ffffff;
+  color: #0284c7;
+}
+
+.horaires-lines-footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 10px 12px;
+  background: rgba(0, 0, 0, 0.12);
+}
+
+.horaires-create-ligne-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px dashed rgba(255, 255, 255, 0.3);
+  border-radius: var(--horaires-radius-sm);
+  padding: 8px 12px;
+  cursor: pointer;
+  color: #e2e8f0;
+  font-size: 12px;
+  font-weight: 600;
+  transition: all 0.15s ease;
+}
+
+.horaires-create-ligne-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: #38bdf8;
+  color: #38bdf8;
+}
+
+/* 5. MAIN CONTENT AREA */
 .horaires-main-content {
   flex: 1;
   min-width: 0;
-  padding: 18px 18px 18px 20px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 255, 0.96) 100%);
+  padding: 20px 24px;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
 }
 
+/* Filter Alert Banner */
+.horaires-filter-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding: 10px 16px;
+  border-radius: var(--horaires-radius-md);
+  font-size: 13.5px;
+}
+
+.horaires-filter-banner.info {
+  background: #f0f9ff;
+  border: 1px solid #bae6fd;
+  color: #0369a1;
+}
+
+.horaires-filter-banner.warning {
+  background: #fefce8;
+  border: 1px solid #fef08a;
+  color: #854d0e;
+}
+
+.horaires-filter-banner-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  font-size: 18px;
+  line-height: 1;
+  opacity: 0.7;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.horaires-filter-banner-close:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+/* Toolbar */
 .horaires-toolbar {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 16px;
+  align-items: center;
   flex-wrap: wrap;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid #dce8f5;
-  border-radius: 12px;
-  background: #f8fbff;
+  gap: 12px;
+  padding: 12px 16px;
+  border: 1px solid var(--horaires-border);
+  border-radius: var(--horaires-radius-md);
+  background: var(--horaires-surface-soft);
+  margin-bottom: 16px;
 }
 
 .horaires-toolbar-left {
   display: flex;
-  gap: 8px;
   align-items: center;
+  gap: 8px;
   flex-wrap: wrap;
-}
-
-.horaires-select-btn {
-  margin-left: 8px;
+  flex: 1;
+  min-width: 320px;
 }
 
 .horaires-search-wrap {
-  margin-left: 6px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  max-width: 380px;
+}
+
+.horaires-search-wrap wcs-mat-icon {
+  position: absolute;
+  left: 12px;
+  color: #94a3b8;
+  pointer-events: none;
 }
 
 .horaires-search-input {
-  padding: 9px 12px;
-  border: 1px solid #c9daeb;
-  border-radius: 10px;
-  min-width: 280px;
-  background: #fff;
+  width: 100%;
+  padding: 9px 12px 9px 36px;
+  border: 1px solid var(--horaires-border);
+  border-radius: var(--horaires-radius-sm);
+  background: #ffffff;
   color: var(--horaires-text);
+  font-size: 13.5px;
   outline: none;
+  transition: all 0.15s ease;
 }
 
 .horaires-search-input:focus {
-  border-color: #61a8d4;
-  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.12);
+  border-color: var(--horaires-blue-500);
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.15);
 }
 
+/* Selection Mode Panel */
 .horaires-selection-panel {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 13px 16px;
-  background: linear-gradient(135deg, #e8f4fd 0%, #f1f9ff 100%);
-  border: 1px solid #8fc4e6;
-  border-radius: 10px;
+  padding: 12px 18px;
+  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
+  border: 1px solid #7dd3fc;
+  border-radius: var(--horaires-radius-md);
   margin-bottom: 16px;
-  gap: 10px;
+  gap: 12px;
   flex-wrap: wrap;
 }
 
@@ -246,322 +571,273 @@
 }
 
 .horaires-selection-count {
-  color: #005f93;
-  font-weight: 600;
+  color: #0369a1;
+  font-weight: 700;
+  font-size: 13.5px;
 }
 
 .horaires-selection-actions {
   display: flex;
   gap: 8px;
+  flex-wrap: wrap;
 }
 
-.horaires-page .table-container {
-  border: 1px solid #d9e6f3;
-  border-radius: 14px;
+/* 6. TABLES */
+.table-container {
+  border: 1px solid var(--horaires-border);
+  border-radius: var(--horaires-radius-md);
   overflow: hidden;
-  background: #fff;
-  box-shadow: 0 10px 30px rgba(8, 46, 79, 0.08);
+  background: #ffffff;
+  box-shadow: var(--horaires-shadow-soft);
+  margin-bottom: 16px;
 }
 
-.horaires-page .wcs-table {
+.horaires-page-root .wcs-table {
+  width: 100%;
   border-collapse: separate;
   border-spacing: 0;
+  text-align: left;
 }
 
-.horaires-page .wcs-table thead tr {
-  background: linear-gradient(90deg, #0f456e 0%, #165989 100%);
+.horaires-page-root .wcs-table thead tr {
+  background: linear-gradient(90deg, #0d3d67 0%, #11507e 100%);
 }
 
-.horaires-page .wcs-table th {
-  color: #f5fbff;
+.horaires-page-root .wcs-table th {
+  color: #ffffff;
   border-bottom: none;
-  font-weight: 600;
+  font-weight: 700;
   font-size: 12px;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
-  padding: 13px 12px;
+  padding: 13px 14px;
 }
 
-.horaires-page .wcs-table td {
-  border-bottom: 1px solid #ebf2fa;
-  padding: 12px;
+.horaires-page-root .wcs-table td {
+  border-bottom: 1px solid var(--horaires-border-soft);
+  padding: 12px 14px;
   color: var(--horaires-text);
+  font-size: 13.5px;
   vertical-align: middle;
 }
 
-.horaires-page .wcs-table tbody tr:hover {
-  background: #f6fbff;
+.horaires-page-root .wcs-table tbody tr:hover {
+  background: #f8fafc;
 }
 
-.horaires-responsive-table td[data-label] {
-  position: relative;
-}
-
-.horaires-page details {
-  border-radius: 10px;
-  background: #f9fcff;
-}
-
-.horaires-page details > summary {
-  color: #10486f;
-}
-
-.horaires-page input,
-.horaires-page select,
-.horaires-page textarea {
-  border: 1px solid #c8d9e9 !important;
-  border-radius: 10px !important;
-  background: #fff;
-  color: var(--horaires-text);
-}
-
-.horaires-page input:focus,
-.horaires-page select:focus,
-.horaires-page textarea:focus {
-  border-color: #64acd8 !important;
-  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.12);
-  outline: none;
-}
-
-.horaires-page .modal-overlay {
-  background: rgba(6, 28, 46, 0.56);
-  backdrop-filter: blur(2px);
-}
-
-.horaires-page .modal-content {
-  border-radius: 16px;
-  border: 1px solid #d5e3f2;
-  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
-  box-shadow: 0 20px 42px rgba(8, 46, 79, 0.28);
-  overflow: hidden;
-}
-
-.horaires-page .modal-header {
-  background: linear-gradient(125deg, #0a3456 0%, #11507e 75%, #1d5f90 100%);
-  color: #f6fbff;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
-}
-
-.horaires-page .modal-header h3,
-.horaires-page .modal-header strong {
-  color: inherit;
-}
-
-.horaires-page .modal-close {
-  color: #f3f9ff;
-}
-
-.horaires-page .modal-body {
-  background: transparent;
-}
-
-.horaires-page .modal-footer {
-  background: #f2f8ff;
-  border-top: 1px solid #dbe7f4;
-}
-
-.horaires-page .form-group label {
-  color: #1d4768;
-  font-weight: 600;
-}
-
-.horaires-loading {
-  color: var(--horaires-muted);
-  padding: 12px;
-}
-
-.horaires-empty-state {
-  text-align: center;
-  padding: 44px;
-  border-radius: 14px;
-  border: 1px dashed #a9c7df;
-  background: linear-gradient(180deg, #f9fcff 0%, #f2f8ff 100%);
-}
-
-.horaires-empty-icon {
-  font-size: 50px;
-  color: #72a8cc;
-}
-
-.horaires-empty-text {
-  color: #557894;
-}
-
-.horaires-main-content > div[style*="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))"] {
-  gap: 18px !important;
-}
-
-.horaires-main-content > div[style*="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))"] > div {
-  border-radius: 14px !important;
-  border: 1px solid #d6e3f1 !important;
-  box-shadow: 0 10px 24px rgba(8, 46, 79, 0.09);
-  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
-}
-
-.horaires-page .quai-row-modal {
-  background: #f8fbff;
-  border-radius: 10px;
-}
-
-.horaires-section-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-  margin-bottom: 16px;
-  padding: 12px 14px;
-  border-radius: 12px;
-  border: 1px solid #d9e7f5;
-  background: linear-gradient(120deg, #f8fbff 0%, #eef6ff 100%);
-}
-
-.horaires-section-title {
-  margin: 0;
-  color: #0d3f66;
-  font-size: 21px;
-}
-
-.horaires-section-description {
-  margin: 0 0 16px;
-  color: #5a7b96;
-}
-
-.horaires-table-full {
-  width: 100%;
+.horaires-page-root .wcs-table tbody tr.horaires-clickable-row {
+  cursor: pointer;
 }
 
 .horaires-row-actions {
   display: flex;
   gap: 6px;
+  align-items: center;
 }
 
-.horaires-empty-state-compact {
-  padding: 36px;
-}
-
-.horaires-search-input-wide {
-  min-width: 300px;
-}
-
-.horaires-clickable-row {
-  cursor: pointer;
-}
-
-.horaires-time-muted {
-  color: #62809a;
-}
-
-.horaires-status-success {
-  color: #138a56;
-  font-weight: 600;
-}
-
-.horaires-status-muted {
-  color: #90a4b7;
-}
-
-.horaires-gare-autocomplete {
-  position: relative;
-}
-
-.horaires-gare-suggestions {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  z-index: 50;
-  border: 1px solid #c9daeb;
-  border-radius: 10px;
-  background: #ffffff;
-  box-shadow: 0 10px 22px rgba(8, 46, 79, 0.16);
-  max-height: 220px;
-  overflow-y: auto;
-}
-
-.horaires-gare-suggestion-item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  border: 0;
-  background: transparent;
-  padding: 9px 11px;
-  color: #12324e;
-  cursor: pointer;
-}
-
-.horaires-gare-suggestion-item:hover {
-  background: #eef6ff;
-  color: #0b4b78;
-}
-
-.horaires-modal-tabs {
-  display: flex;
-  gap: 4px;
-  border-bottom: 1px solid #d8e5f3;
-  background: #eef6ff;
-  padding: 8px 10px 0;
-  flex-shrink: 0;
-  overflow-x: auto;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* Hide scrollbar for a cleaner look */
-.horaires-modal-tabs::-webkit-scrollbar {
-  display: none;
-}
-.horaires-modal-tabs {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.horaires-modal-tabs-alt {
-  margin-bottom: 20px;
-}
-
-.horaires-modal-tab-btn {
-  padding: 10px 14px;
-  border: none;
-  background: transparent;
-  border-radius: 10px 10px 0 0;
-  color: #446884;
-  cursor: pointer;
-  font-weight: 500;
-  border-bottom: 3px solid transparent;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.horaires-modal-tab-btn.is-active {
-  background: #ffffff;
-  color: #0b4b78;
+/* Table elements & Chips */
+.train-num-badge {
   font-weight: 700;
-  border-bottom-color: #0088ce;
-}
-
-.horaires-modal-body-scroll {
-  flex: 1;
-  overflow-y: auto;
-  padding: 20px 24px;
-}
-
-.horaires-form-error {
-  background: #fff1f1;
-  border: 1px solid #f5b5b5;
-  border-radius: 8px;
-  padding: 10px 14px;
-  margin-bottom: 16px;
-  color: #b42318;
+  color: var(--horaires-blue-900);
   font-size: 14px;
 }
 
-.horaires-tab-panel {
-  padding: 4px 2px;
+.train-type-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 11.5px;
+  font-weight: 700;
+  background: #f1f5f9;
+  color: #334155;
+  border: 1px solid #cbd5e1;
 }
 
-.horaires-modal-body {
-  background: linear-gradient(180deg, #fbfdff 0%, #f4f9ff 100%);
+.time-highlight {
+  color: var(--horaires-blue-600);
+  font-weight: 600;
+}
+
+.circ-days-badge {
+  font-size: 12px;
+  color: #475569;
+}
+
+.subst-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: #fee2e2;
+  color: #dc2626;
+  border: 1px solid #fca5a5;
+  padding: 2px 8px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+/* Details & Accordion Rows */
+.horaires-page-root details {
+  background: #f8fafc;
+  border-radius: var(--horaires-radius-sm);
+}
+
+.horaires-page-root details summary {
+  list-style: none;
+  padding: 10px 14px;
+  cursor: pointer;
+  font-weight: 700;
+  color: var(--horaires-blue-800);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: background 0.15s ease;
+}
+
+.horaires-page-root details summary:hover {
+  background: #f1f5f9;
+}
+
+.horaires-page-root details summary::-webkit-details-marker {
+  display: none;
+}
+
+.horaires-page-root details[open] summary wcs-mat-icon {
+  transform: rotate(180deg);
+}
+
+/* 7. CARDS VIEW */
+.horaires-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.horaires-card-item {
+  background: #ffffff;
+  border: 1px solid var(--horaires-border);
+  border-radius: var(--horaires-radius-md);
+  padding: 16px 18px;
+  box-shadow: var(--horaires-shadow-soft);
+  transition: all 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.horaires-card-item:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--horaires-shadow-card);
+  border-color: #cbd5e1;
+}
+
+.horaires-card-item.selected {
+  border-color: var(--horaires-blue-500);
+  background: #f0f9ff;
+  box-shadow: 0 0 0 2px var(--horaires-blue-500);
+}
+
+.horaires-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.horaires-card-route {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--horaires-surface-soft);
+  padding: 10px 12px;
+  border-radius: var(--horaires-radius-sm);
+  margin-bottom: 12px;
+  font-size: 13px;
+}
+
+.horaires-card-route-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.horaires-card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 12px;
+  border-top: 1px solid var(--horaires-border-soft);
+}
+
+/* 8. SECTION HEADERS IN TABS */
+.horaires-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 18px;
+  padding: 14px 18px;
+  border-radius: var(--horaires-radius-md);
+  border: 1px solid var(--horaires-border);
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  box-shadow: var(--horaires-shadow-soft);
+}
+
+.horaires-section-title {
+  margin: 0;
+  color: var(--horaires-blue-900);
+  font-size: 19px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.horaires-section-description {
+  margin: 0 0 16px;
+  color: var(--horaires-muted);
+  font-size: 13.5px;
+  line-height: 1.5;
+}
+
+/* 9. MODALS */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(6, 28, 47, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 20px;
+}
+
+.modal-content {
+  background: #ffffff;
+  border-radius: var(--horaires-radius-lg);
+  border: 1px solid var(--horaires-border);
+  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
+  width: 100%;
+  max-width: 640px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 
 .horaires-modal-large {
@@ -569,313 +845,659 @@
 }
 
 .horaires-modal-medium {
-  max-width: 800px;
+  max-width: 780px;
 }
 
 .horaires-modal-small {
-  max-width: 620px;
+  max-width: 580px;
 }
 
-.horaires-form-group {
+.modal-header {
+  background: linear-gradient(135deg, #082e4f 0%, #0d3d67 60%, #11507e 100%);
+  color: #ffffff;
+  padding: 18px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.modal-close {
+  background: rgba(255, 255, 255, 0.12);
+  border: none;
+  color: #ffffff;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  line-height: 1;
+  transition: all 0.15s ease;
+}
+
+.modal-close:hover {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.modal-body {
+  padding: 22px 26px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.modal-footer {
+  background: var(--horaires-surface-soft);
+  border-top: 1px solid var(--horaires-border);
+  padding: 16px 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  align-items: center;
+}
+
+/* Modal Segmented Tabs */
+.horaires-modal-tabs {
+  display: flex;
+  gap: 6px;
+  background: var(--horaires-surface-soft);
+  padding: 5px;
+  border-radius: var(--horaires-radius-md);
+  border: 1px solid var(--horaires-border);
+  margin-bottom: 20px;
+}
+
+.horaires-modal-tab-btn {
+  flex: 1;
+  padding: 9px 14px;
+  border: none;
+  background: transparent;
+  border-radius: var(--horaires-radius-sm);
+  color: var(--horaires-muted);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+  transition: all 0.18s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.horaires-modal-tab-btn:hover {
+  color: var(--horaires-text);
+}
+
+.horaires-modal-tab-btn.is-active {
+  background: #ffffff;
+  color: var(--horaires-blue-900);
+  font-weight: 700;
+  box-shadow: var(--horaires-shadow-soft);
+}
+
+/* Form Styles */
+.form-group {
   margin-bottom: 16px;
 }
 
+.form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 600;
+  font-size: 13px;
+  color: #334155;
+}
+
 .horaires-field {
   width: 100%;
-  padding: 10px;
+  padding: 9px 12px;
+  border: 1px solid var(--horaires-border);
+  border-radius: var(--horaires-radius-sm);
+  background: #ffffff;
+  color: var(--horaires-text);
+  font-size: 13.5px;
   box-sizing: border-box;
+  outline: none;
+  transition: all 0.15s ease;
+}
+
+.horaires-field:focus {
+  border-color: var(--horaires-blue-500);
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.12);
 }
 
 .horaires-two-cols {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 16px;
-  margin-bottom: 16px;
+  gap: 14px;
+  margin-bottom: 14px;
 }
 
+/* Tracé intermediate stations */
 .horaires-trace-list {
-  margin-top: 12px;
-}
-
-.horaires-trace-empty {
-  color: #7991a5;
-  text-align: center;
-  padding: 20px;
-  background: #f6faff;
-  border: 1px dashed #bfd4e8;
-  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 10px;
 }
 
 .horaires-trace-row {
   display: grid;
-  grid-template-columns: 34px 2fr 1fr auto;
+  grid-template-columns: 28px 1fr 140px auto;
   gap: 8px;
   align-items: center;
-  margin-bottom: 8px;
+  background: var(--horaires-surface-soft);
+  padding: 8px 12px;
+  border-radius: var(--horaires-radius-sm);
+  border: 1px solid var(--horaires-border);
 }
 
 .horaires-trace-index {
-  color: #4f6f89;
-  font-weight: 600;
+  font-weight: 700;
+  color: var(--horaires-blue-800);
+  font-size: 12.5px;
 }
 
+.horaires-trace-empty {
+  color: var(--horaires-muted);
+  text-align: center;
+  padding: 20px;
+  background: var(--horaires-surface-soft);
+  border: 1px dashed var(--horaires-border);
+  border-radius: var(--horaires-radius-sm);
+  font-size: 13px;
+}
+
+/* PDF Upload Card & Area */
 .horaires-pdf-current-card {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  background: linear-gradient(120deg, #f0fdf4 0%, #ecfdf5 100%);
+  gap: 14px;
+  padding: 14px 18px;
+  background: #f0fdf4;
   border: 1px solid #86efac;
-  border-radius: 10px;
-  margin-bottom: 20px;
+  border-radius: var(--horaires-radius-md);
+  margin-bottom: 18px;
 }
 
-.horaires-upload-error {
-  margin-top: 10px;
-  color: #dc2626;
-  font-size: 13px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
+.horaires-upload-dropzone {
+  border: 2px dashed var(--horaires-border);
+  border-radius: var(--horaires-radius-md);
+  padding: 32px 20px;
+  text-align: center;
+  background: var(--horaires-surface-soft);
+  transition: all 0.2s ease;
+  cursor: pointer;
 }
 
-.horaires-upload-loading {
-  margin-top: 12px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #0074d9;
+.horaires-upload-dropzone:hover {
+  border-color: var(--horaires-blue-500);
+  background: #f0f9ff;
 }
 
 .horaires-info-note {
   margin-top: 16px;
   padding: 10px 14px;
   background: #fffbeb;
-  border: 1px solid #fbbf24;
-  border-radius: 8px;
-  font-size: 13px;
+  border: 1px solid #fde68a;
+  border-radius: var(--horaires-radius-sm);
+  font-size: 12.5px;
   color: #92400e;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
+/* Quai Cards in Quai Modal */
 .horaires-trajet-banner {
   margin-bottom: 16px;
-  padding: 10px 14px;
-  background: linear-gradient(120deg, #eaf5ff 0%, #f2f9ff 100%);
-  border: 1px solid #93c5fd;
-  border-radius: 8px;
-  color: #0b4b78;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
+  border: 1px solid #bae6fd;
+  border-radius: var(--horaires-radius-md);
+  color: #0369a1;
+  font-size: 14px;
 }
 
 .horaires-quai-card {
-  margin-bottom: 12px;
-  padding: 12px;
-  background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
-  border: 1px solid #d8e5f3;
-  border-radius: 10px;
+  margin-bottom: 10px;
+  padding: 12px 16px;
+  background: #ffffff;
+  border: 1px solid var(--horaires-border);
+  border-radius: var(--horaires-radius-sm);
+  transition: all 0.15s ease;
+}
+
+.horaires-quai-card:hover {
+  border-color: #cbd5e1;
+  background: var(--horaires-surface-soft);
 }
 
 .horaires-quai-row-modal {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
 }
 
 .horaires-quai-select {
-  padding: 8px;
-  min-width: 220px;
+  padding: 8px 12px;
+  border: 1px solid var(--horaires-border);
+  border-radius: var(--horaires-radius-sm);
+  background: #ffffff;
+  min-width: 200px;
+  font-size: 13px;
+  outline: none;
 }
 
-@media (max-width: 1200px) {
-  .horaires-main-content {
-    padding: 12px;
-  }
-
-  .horaires-search-input {
-    min-width: 220px;
-  }
+.horaires-status-success {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #16a34a;
+  font-weight: 600;
+  font-size: 12.5px;
 }
 
+.horaires-status-muted {
+  color: #94a3b8;
+  font-size: 12.5px;
+}
+
+/* Empty & Loading states */
+.horaires-loading {
+  color: var(--horaires-muted);
+  padding: 24px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.horaires-empty-state {
+  text-align: center;
+  padding: 48px 24px;
+  border-radius: var(--horaires-radius-lg);
+  border: 1px dashed #cbd5e1;
+  background: var(--horaires-surface-soft);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.horaires-empty-icon {
+  font-size: 48px;
+  color: #94a3b8;
+}
+
+.horaires-empty-text {
+  color: #64748b;
+  font-size: 15px;
+  font-weight: 500;
+  margin: 0;
+}
+
+/* Responsive */
 @media (max-width: 1024px) {
-  .horaires-page .table-container {
-    border: none;
-    box-shadow: none;
-    background: transparent;
+  .horaires-modern-container {
+    padding: 20px 18px 48px;
   }
-
-  .horaires-responsive-table {
-    display: block;
-    width: 100%;
-    border: 0;
-    background: transparent;
+  .horaires-kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
-
-  .horaires-responsive-table thead {
-    display: none;
+  .horaires-hero-banner {
+    padding: 26px 28px;
   }
-
-  .horaires-responsive-table tbody {
-    display: grid;
-    gap: 12px;
-  }
-
-  .horaires-responsive-table tbody tr {
-    display: grid;
-    gap: 8px;
-    padding: 12px;
-    border-radius: 14px;
-    border: 1px solid #cfe1f2;
-    background: linear-gradient(145deg, #ffffff 0%, #f3f9ff 100%);
-    box-shadow: 0 10px 24px rgba(8, 46, 79, 0.11);
-  }
-
-  .horaires-responsive-table tbody td {
-    display: grid;
-    grid-template-columns: minmax(130px, 38%) 1fr;
-    gap: 8px;
-    align-items: start;
-    border: 0 !important;
-    padding: 0;
-    min-height: 22px;
-  }
-
-  .horaires-responsive-table tbody td::before {
-    content: attr(data-label);
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    font-weight: 700;
-    color: #19527f;
-    padding-top: 2px;
-  }
-
-  .horaires-responsive-table tbody td[data-label="Actions"],
-  .horaires-responsive-table tbody td[data-label="Action"] {
-    grid-template-columns: 1fr;
-    gap: 10px;
-    margin-top: 2px;
-    padding-top: 8px;
-    border-top: 1px dashed #c7dcef !important;
-  }
-
-  .horaires-responsive-table tbody td[data-label="Actions"]::before,
-  .horaires-responsive-table tbody td[data-label="Action"]::before {
-    padding-top: 0;
-  }
-
-  .horaires-responsive-table .horaires-row-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-  }
-
-  .horaires-responsive-table tbody td[data-label="Sélection"] {
-    grid-template-columns: 1fr;
-  }
-
-  .horaires-responsive-table tbody td[data-label="Sélection"]::before {
-    display: none;
-  }
-
-  .horaires-responsive-table tbody td[colspan] {
-    display: block;
-    padding: 0 !important;
-  }
-
-  .horaires-responsive-table tbody td[colspan]::before {
-    display: none;
-  }
-
-  .horaires-responsive-table details {
-    border: 1px solid #cfe1f2;
-    background: linear-gradient(145deg, #ffffff 0%, #f5faff 100%);
-  }
-
-  .horaires-responsive-table-horaires tbody td[data-label="N° Train"] strong,
-  .horaires-responsive-table-lignes tbody td[data-label="Nom"] strong,
-  .horaires-responsive-table-services tbody td[data-label="Nom"] strong,
-  .horaires-responsive-table-quais tbody td[data-label="N° Train"] strong {
-    color: #0f4e79;
-    font-size: 15px;
-  }
-}
-
-@media (max-width: 980px) {
-  .horaires-main-content {
-    padding-left: 10px;
-  }
-
   .horaires-workspace {
     flex-direction: column;
   }
-
-  .horaires-workspace > div:first-child {
+  .horaires-lines-sidebar {
     width: 100% !important;
     min-width: 100% !important;
-  }
-
-  .horaires-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .horaires-search-wrap,
-  .horaires-select-btn {
-    margin-left: 0;
-  }
-
-  .horaires-search-input {
-    width: 100%;
-    min-width: 0;
-  }
-
-  .horaires-search-input-wide {
-    min-width: 0;
-  }
-
-  .horaires-section-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .horaires-row-actions {
-    flex-wrap: wrap;
-  }
-
-  .horaires-responsive-table tbody td {
-    grid-template-columns: 1fr;
-    gap: 4px;
-  }
-
-  .horaires-responsive-table tbody td::before {
-    font-size: 10px;
-  }
-
-  .horaires-two-cols {
-    grid-template-columns: 1fr;
-  }
-
-  .horaires-trace-row {
-    grid-template-columns: 1fr;
-  }
-
-  .horaires-pdf-current-card {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .horaires-quai-select {
-    width: 100%;
-    min-width: 0;
-  }
-
-  .horaires-page .modal-content {
-    width: min(96vw, 900px);
-  }
-
-  .horaires-page .quai-row-modal {
-    flex-direction: column !important;
-    align-items: flex-start !important;
+    max-height: 240px;
   }
 }
 
+@media (max-width: 768px) {
+  .horaires-modern-container {
+    padding: 16px 12px 40px;
+  }
+  .horaires-hero-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px 18px;
+    gap: 16px;
+  }
+  .horaires-hero-actions {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+  .horaires-hero-actions > * {
+    flex: 1;
+    justify-content: center;
+  }
+  .horaires-kpi-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .horaires-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+  .horaires-toolbar-left {
+    min-width: 0;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .horaires-search-wrap {
+    max-width: 100%;
+  }
+  .horaires-two-cols {
+    grid-template-columns: 1fr;
+  }
+  .horaires-trace-row {
+    grid-template-columns: 24px 1fr;
+    gap: 6px;
+  }
+  .horaires-cards-grid {
+    grid-template-columns: 1fr;
+  }
+  .modal-content {
+    max-width: 95vw;
+    max-height: 95vh;
+  }
+}
+
+@media (max-width: 480px) {
+  .horaires-hero-title {
+    font-size: 24px;
+  }
+  .horaires-hero-subtitle {
+    font-size: 13px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   10. DARK MODE SUPPORT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+body.dark-mode .horaires-page-root,
+[data-theme="dark"] .horaires-page-root {
+  background-color: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .horaires-hero-banner,
+[data-theme="dark"] .horaires-hero-banner {
+  background: linear-gradient(135deg, #05162a 0%, #082d4d 50%, #0d4b78 100%);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
+}
+
+body.dark-mode .horaires-kpi-card,
+[data-theme="dark"] .horaires-kpi-card {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .horaires-kpi-card:hover,
+[data-theme="dark"] .horaires-kpi-card:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .horaires-kpi-card.active,
+[data-theme="dark"] .horaires-kpi-card.active {
+  background: #0d2744;
+  border-color: #0088ce;
+  box-shadow: 0 8px 24px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .horaires-kpi-label,
+[data-theme="dark"] .horaires-kpi-label {
+  color: #94a3b8;
+}
+
+body.dark-mode .horaires-kpi-value,
+[data-theme="dark"] .horaires-kpi-value {
+  color: #f8fafc;
+}
+
+body.dark-mode .horaires-kpi-subtext,
+[data-theme="dark"] .horaires-kpi-subtext {
+  color: #64748b;
+}
+
+body.dark-mode .horaires-main-tabs-nav,
+[data-theme="dark"] .horaires-main-tabs-nav {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .horaires-main-tab-btn,
+[data-theme="dark"] .horaires-main-tab-btn {
+  color: #94a3b8;
+}
+
+body.dark-mode .horaires-main-tab-btn:hover,
+[data-theme="dark"] .horaires-main-tab-btn:hover {
+  background: #1e293b;
+  color: #f8fafc;
+}
+
+body.dark-mode .horaires-main-tab-btn.active,
+[data-theme="dark"] .horaires-main-tab-btn.active {
+  background: linear-gradient(135deg, #0284c7 0%, #0088ce 100%);
+  color: #ffffff;
+}
+
+body.dark-mode .horaires-main-tab-badge,
+[data-theme="dark"] .horaires-main-tab-badge {
+  background: rgba(255, 255, 255, 0.15);
+  color: #cbd5e1;
+}
+
+body.dark-mode .horaires-workspace,
+body.dark-mode .horaires-main-content,
+[data-theme="dark"] .horaires-workspace,
+[data-theme="dark"] .horaires-main-content {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .horaires-lines-sidebar,
+[data-theme="dark"] .horaires-lines-sidebar {
+  background: linear-gradient(180deg, #07192c 0%, #0c2642 50%, #103459 100%);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+body.dark-mode .horaires-toolbar,
+[data-theme="dark"] .horaires-toolbar {
+  background: #0f172a;
+  border-color: #243247;
+}
+
+body.dark-mode .horaires-search-input,
+[data-theme="dark"] .horaires-search-input {
+  background: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .horaires-search-input:focus,
+[data-theme="dark"] .horaires-search-input:focus {
+  border-color: #0088ce;
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .table-container,
+body.dark-mode .horaires-page-root .wcs-table,
+[data-theme="dark"] .table-container,
+[data-theme="dark"] .horaires-page-root .wcs-table {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .horaires-page-root .wcs-table thead tr,
+[data-theme="dark"] .horaires-page-root .wcs-table thead tr {
+  background: #0f172a;
+}
+
+body.dark-mode .horaires-page-root .wcs-table th,
+[data-theme="dark"] .horaires-page-root .wcs-table th {
+  color: #94a3b8;
+}
+
+body.dark-mode .horaires-page-root .wcs-table td,
+[data-theme="dark"] .horaires-page-root .wcs-table td {
+  border-bottom-color: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark-mode .horaires-page-root .wcs-table tbody tr:hover,
+[data-theme="dark"] .horaires-page-root .wcs-table tbody tr:hover {
+  background-color: #1a273c;
+}
+
+body.dark-mode .train-num-badge,
+[data-theme="dark"] .train-num-badge {
+  color: #38bdf8;
+}
+
+body.dark-mode .train-type-pill,
+[data-theme="dark"] .train-type-pill {
+  background: #1e293b;
+  border-color: #334155;
+  color: #cbd5e1;
+}
+
+body.dark-mode .circ-days-badge,
+[data-theme="dark"] .circ-days-badge {
+  color: #94a3b8;
+}
+
+body.dark-mode .horaires-card-item,
+[data-theme="dark"] .horaires-card-item {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .horaires-card-item:hover,
+[data-theme="dark"] .horaires-card-item:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .horaires-card-route,
+[data-theme="dark"] .horaires-card-route {
+  background: #0f172a;
+}
+
+body.dark-mode .horaires-section-header,
+[data-theme="dark"] .horaires-section-header {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .horaires-section-title,
+[data-theme="dark"] .horaires-section-title {
+  color: #f8fafc;
+}
+
+body.dark-mode .modal-content,
+[data-theme="dark"] .modal-content {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .modal-header,
+body.dark-mode .modal-footer,
+[data-theme="dark"] .modal-header,
+[data-theme="dark"] .modal-footer {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .modal-header h3,
+[data-theme="dark"] .modal-header h3 {
+  color: #f8fafc;
+}
+
+body.dark-mode .horaires-field,
+[data-theme="dark"] .horaires-field {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .horaires-field:focus,
+[data-theme="dark"] .horaires-field:focus {
+  border-color: #0088ce;
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .horaires-modal-tabs,
+[data-theme="dark"] .horaires-modal-tabs {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .horaires-modal-tab-btn,
+[data-theme="dark"] .horaires-modal-tab-btn {
+  color: #94a3b8;
+}
+
+body.dark-mode .horaires-modal-tab-btn.is-active,
+[data-theme="dark"] .horaires-modal-tab-btn.is-active {
+  background: #1e293b;
+  color: #38bdf8;
+}
+
+body.dark-mode .horaires-quai-card,
+[data-theme="dark"] .horaires-quai-card {
+  background: #101826;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .horaires-quai-select,
+[data-theme="dark"] .horaires-quai-select {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .horaires-upload-dropzone,
+[data-theme="dark"] .horaires-upload-dropzone {
+  background: #0f172a;
+  border-color: #243247;
+}
+
+body.dark-mode .horaires-empty-state,
+[data-theme="dark"] .horaires-empty-state {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .horaires-empty-text,
+[data-theme="dark"] .horaires-empty-text {
+  color: #94a3b8;
+}
+
diff --git a/src/pages/horaires/Horaires.js b/src/pages/horaires/Horaires.js
index 2672ce5..d96b58e 100644
--- a/src/pages/horaires/Horaires.js
+++ b/src/pages/horaires/Horaires.js
@@ -1,9 +1,8 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import NavPanel from '../../components/nav-panel/NavPanel';
 import './Horaires.css';
 import {
   getAllHoraires,
-  createHoraire,
-  updateHoraire,
   deleteHoraire,
   formatHeure,
   getJoursCirculation,
@@ -14,7 +13,7 @@ import {
 import { getAllMateriels } from '../../api/materielsRoulants';
 import { getAllGares } from '../../api/gares';
 import { getAllTypesTrains } from '../../api/typesTrains';
-import { getAllLignes, createLigne, updateLigne, deleteLigne, uploadFicheHoraire, deleteFicheHoraire } from '../../api/lignes';
+import { getAllLignes, createLigne, updateLigne, deleteLigne, deleteFicheHoraire } from '../../api/lignes';
 import { getAllServicesAnnuels, createServiceAnnuel, updateServiceAnnuel, deleteServiceAnnuel, formatDate } from '../../api/servicesAnnuels';
 import { getAllRegions } from '../../api/regions';
 import { canPerform, getCurrentUser, isRegionFiltered, getUserRegionId } from '../../utils/userUtils';
@@ -25,191 +24,9 @@ import * as XLSX from 'xlsx';
 import HoraireModal from '../../components/HoraireModal/HoraireModal';
 
 export default function Horaires() {
-  // Onglet principal
-  const [mainTab, setMainTab] = useState('horaires');
-  
-  // AssignLigneModal
-  const [assignLigneModalOpen, setAssignLigneModalOpen] = useState(false);
-  const [assignTargetLigne, setAssignTargetLigne] = useState('');
-  const [assignLoading, setAssignLoading] = useState(false);
-
-  // Données
-  const [horaires, setHoraires] = useState([]);
-  const [materiels, setMateriels] = useState([]);
-  const [garesList, setGaresList] = useState([]);
-  const [typesTrainsList, setTypesTrainsList] = useState([]);
-  const [lignes, setLignes] = useState([]);
-  const [servicesAnnuels, setServicesAnnuels] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-
-  // UI
-  const [viewMode, setViewMode] = useState('liste');
-  const [showModal, setShowModal] = useState(false);
-  // eslint-disable-next-line no-unused-vars
-  const [gareSuggestionsOpenFor, setGareSuggestionsOpenFor] = useState(null);
-  const [editingItem, setEditingItem] = useState(null);
-  // eslint-disable-next-line no-unused-vars
-  const [activeTab, setActiveTab] = useState('general');
-  const [saving, setSaving] = useState(false);
-  const [formError, setFormError] = useState('');
-  // Recherche
-  const [searchQuery, setSearchQuery] = useState('');
-
-  // Mode sélection et duplication
-  const [selectionMode, setSelectionMode] = useState(false);
-  const [selectedHoraires, setSelectedHoraires] = useState([]);
-  const [isDuplicating, setIsDuplicating] = useState(false); // Indique si on est en train de modifier un horaire dupliqué
-
-  // Pagination
-  const [currentPage, setCurrentPage] = useState(1);
-  const PAGE_SIZE = 10; // 10 lignes (numéros de train) par page
-
-  // Champs formulaire
-  const [numeroTrain, setNumeroTrain] = useState('');
-  const [typeTrainId, setTypeTrainId] = useState('');
-  const [typeTrainNom, setTypeTrainNom] = useState('');
-  const [ligne, setLigne] = useState('');
-  const [serviceAnnuelId, setServiceAnnuelId] = useState('');
-  const [serviceAnnuelNom, setServiceAnnuelNom] = useState('');
-
-  // gare départ / arrivée stockent id + nom pour affichage
-  const [gareDepartId, setGareDepartId] = useState('');
-  const [gareDepartNom, setGareDepartNom] = useState('');
-  const [heureDepart, setHeureDepart] = useState('');
-
-  const [gareArriveeId, setGareArriveeId] = useState('');
-  const [gareArriveeNom, setGareArriveeNom] = useState('');
-  const [heureArrivee, setHeureArrivee] = useState('');
-
-  const [garesDesservies, setGaresDesservies] = useState([]);
-
-  // jours
-  const [circuleLundi, setCirculeLundi] = useState(true);
-  const [circuleMardi, setCirculeMardi] = useState(true);
-  const [circuleMercredi, setCirculeMercredi] = useState(true);
-  const [circuleJeudi, setCirculeJeudi] = useState(true);
-  const [circuleVendredi, setCirculeVendredi] = useState(true);
-  const [circuleSamedi, setCirculeSamedi] = useState(true);
-  const [circuleDimanche, setCirculeDimanche] = useState(true);
-  const [circuleJoursFeries, setCirculeJoursFeries] = useState(false);
-  const [circuleDimanchesFeries, setCirculeDimanchesFeries] = useState(false);
-  const [joursNonCirculation, setJoursNonCirculation] = useState([]);
-  const [joursPersonnalises, setJoursPersonnalises] = useState([]);
-  // eslint-disable-next-line no-unused-vars
-  const [showJoursPerso, setShowJoursPerso] = useState(false);
-  // Périodes de circulation/non-circulation : [{debut: 'YYYY-MM-DD', fin: 'YYYY-MM-DD', circule: true/false}]
-  // eslint-disable-next-line no-unused-vars
-  const [periodesCirculation, setPeriodesCirculation] = useState([]);
-
-  // matériel
-  const [materielRoulantId, setMaterielRoulantId] = useState(null);
-  // composition de train : [{id: uid_local, materiel_id, materiel_nom, materiel_nom_technique, materiel_image_url, position}]
-  const [compositionTrain, setCompositionTrain] = useState([]);
-  // drag & drop composition
-  // eslint-disable-next-line no-unused-vars
-  const [dragOverIndex, setDragOverIndex] = useState(null);
-
-  // Substitution
-  const [estSubstitution, setEstSubstitution] = useState(false);
-  const [motifSubstitution, setMotifSubstitution] = useState('');
-
-  // États pour les lignes
-  const [showLigneModal, setShowLigneModal] = useState(false);
-  const [editingLigne, setEditingLigne] = useState(null);
-  const [ligneNom, setLigneNom] = useState('');
-  const [ligneCode, setLigneCode] = useState('');
-  const [ligneDepartId, setLigneDepartId] = useState('');
-  const [ligneArriveeId, setLigneArriveeId] = useState('');
-  const [garesTracees, setGaresTracees] = useState([]);
-  // Fiche Horaire
-  const [ligneFHUrl, setLigneFHUrl] = useState('');
-  const [ligneFHFile, setLigneFHFile] = useState(null);
-  const [ligneFHUploading, setLigneFHUploading] = useState(false);
-  const [ligneFHError, setLigneFHError] = useState('');
-  const [ligneModalTab, setLigneModalTab] = useState('infos');
-  const [ligneRegion, setLigneRegion] = useState('');
-  const originalGaresTraceesRef = useRef(null);
-  const [regionsList, setRegionsList] = useState([]);
-
-  // Initialiser quaiAssignments depuis les horaires chargés
-    useEffect(() => {
-    if (!horaires || horaires.length === 0) return;
-    const initial = {};
-    horaires.forEach(h => {
-      if (!h || !h.id) return;
-      const gares = Array.isArray(h.gares_desservies) ? h.gares_desservies : [];
-      // Gare de départ
-      if (h.quai_depart) initial[`${h.id}_depart`] = h.quai_depart;
-      // Gares intermédiaires (depuis JSONB gares_desservies)
-      gares.forEach((g, idx) => {
-        if (g && g.quai) {
-          const key = `gare_${g.ordre ?? idx + 1}`;
-          initial[`${h.id}_${key}`] = g.quai;
-        }
-      });
-      // Gare d'arrivée
-      if (h.quai_arrivee) initial[`${h.id}_arrivee`] = h.quai_arrivee;
-    });
-    setQuaiAssignments(prev => ({ ...initial, ...prev }));
-    }, [horaires]);
-  // Si on arrive avec un paramètre gtfs_import, préremplir la modal d'horaire
-  useEffect(() => {
-    try {
-      const params = new URLSearchParams(window.location.search);
-      const gtfsEncoded = params.get('gtfs_import');
-      if (!gtfsEncoded) return;
-      const decoded = decodeURIComponent(gtfsEncoded);
-      const payload = JSON.parse(decoded);
-      if (!payload) return;
-
-      // Préremplir le formulaire avec les données du payload
-      setEditingItem(null);
-      setIsDuplicating(false);
-      setNumeroTrain(payload.numero_train || '');
-      setTypeTrainId(''); setTypeTrainNom('');
-      setLigne(payload.ligne || '');
-      setGareDepartId(payload.gare_depart_id || ''); setGareDepartNom(payload.gare_depart_nom || ''); setHeureDepart(payload.heure_depart || '');
-      setGareArriveeId(payload.gare_arrivee_id || ''); setGareArriveeNom(payload.gare_arrivee_nom || ''); setHeureArrivee(payload.heure_arrivee || '');
-      setGaresDesservies(Array.isArray(payload.gares_desservies) ? payload.gares_desservies.filter(g => !g.is_depart && !g.is_arrivee) : []);
-      // ouvrir la modale
-      setFormError(''); setActiveTab('general'); setShowModal(true);
-      // Nettoyer l'URL pour éviter ré-ouverture accidentelle
-      try {
-        const u = new URL(window.location.href);
-        u.searchParams.delete('gtfs_import');
-        window.history.replaceState({}, '', u.toString());
-      } catch (e) {
-        // Ne pas bloquer l'utilisateur si le nettoyage de l'URL échoue
-        console.warn('Impossible de nettoyer le paramètre gtfs_import de l\'URL', e);
-      }
-    } catch (e) {
-      console.error('Erreur parsing gtfs_import param:', e);
-    }
-  }, []);
-  const [showServiceModal, setShowServiceModal] = useState(false);
-  const [editingService, setEditingService] = useState(null);
-  const [serviceNom, setServiceNom] = useState('');
-  const [serviceCode, setServiceCode] = useState('');
-  const [serviceDateDebut, setServiceDateDebut] = useState('');
-  const [serviceDateFin, setServiceDateFin] = useState('');
-  const [serviceDescription, setServiceDescription] = useState('');
-
-  // États pour les quais
-  const [showQuaiModal, setShowQuaiModal] = useState(false);
-  const [quaiSelectedHoraire, setQuaiSelectedHoraire] = useState(null);
-  const [quaiAssignments, setQuaiAssignments] = useState({});
-  const [quaiSaving, setQuaiSaving] = useState(false);
-  const [quaiSearchQuery, setQuaiSearchQuery] = useState('');
-  
-  const [quaiViewMode, setQuaiViewMode] = useState('liste'); // 'liste' or 'schematique'
-  const [quaiGareSelectionneeId, setQuaiGareSelectionneeId] = useState('');
-
-  // Panneau latéral lignes
-  const [selectedLigneFilter, setSelectedLigneFilter] = useState(null); // null = toutes les lignes
-  const [lignesPanelOpen, setLignesPanelOpen] = useState(true);
-
   const currentUser = getCurrentUser();
+
+  // Permissions RBAC
   const canCreateHoraires = canPerform(currentUser, 'horaires', 'create');
   const canUpdateHoraires = canPerform(currentUser, 'horaires', 'update');
   const canDeleteHoraires = canPerform(currentUser, 'horaires', 'delete');
@@ -220,12 +37,110 @@ export default function Horaires() {
   const canUpdateServices = canPerform(currentUser, 'horaires', 'update');
   const canDeleteServices = canPerform(currentUser, 'horaires', 'delete');
 
-  // Chargement initial
+  // Onglet principal ('horaires' | 'lignes' | 'services' | 'quais')
+  const [mainTab, setMainTab] = useState('horaires');
+
+  // Données
+  const [horaires, setHoraires] = useState([]);
+  const [materiels, setMateriels] = useState([]);
+  const [garesList, setGaresList] = useState([]);
+  const [typesTrainsList, setTypesTrainsList] = useState([]);
+  const [lignes, setLignes] = useState([]);
+  const [servicesAnnuels, setServicesAnnuels] = useState([]);
+  const [regionsList, setRegionsList] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  // UI Horaires
+  const [viewMode, setViewMode] = useState('liste'); // 'liste' | 'carte'
+  const [showModal, setShowModal] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+  const [isDuplicating, setIsDuplicating] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Mode sélection et duplication
+  const [selectionMode, setSelectionMode] = useState(false);
+  const [selectedHoraires, setSelectedHoraires] = useState([]);
+
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const PAGE_SIZE = 10;
+
+  // Tri
+  const [sortColumn, setSortColumn] = useState('numero_train');
+  const [sortDirection, setSortDirection] = useState('asc');
+
+  // Panneau latéral lignes (Filtre)
+  const [selectedLigneFilter, setSelectedLigneFilter] = useState(null); // null = toutes les lignes, '__none__' = sans ligne, id = id de ligne
+  const [lignesPanelOpen, setLignesPanelOpen] = useState(true);
+
+  // AssignLigneModal
+  const [assignLigneModalOpen, setAssignLigneModalOpen] = useState(false);
+  const [assignTargetLigne, setAssignTargetLigne] = useState('');
+  const [assignLoading, setAssignLoading] = useState(false);
+
+  // Modal Lignes
+  const [showLigneModal, setShowLigneModal] = useState(false);
+  const [editingLigne, setEditingLigne] = useState(null);
+  const [ligneNom, setLigneNom] = useState('');
+  const [ligneCode, setLigneCode] = useState('');
+  const [ligneDepartId, setLigneDepartId] = useState('');
+  const [ligneArriveeId, setLigneArriveeId] = useState('');
+  const [garesTracees, setGaresTracees] = useState([]);
+  const [ligneFHUrl, setLigneFHUrl] = useState('');
+  const [ligneFHFile, setLigneFHFile] = useState(null);
+  const [ligneFHUploading, setLigneFHUploading] = useState(false);
+  const [ligneFHError, setLigneFHError] = useState('');
+  const [ligneModalTab, setLigneModalTab] = useState('infos');
+  const [ligneRegion, setLigneRegion] = useState('');
+  const originalGaresTraceesRef = useRef(null);
+
+  // Modal Services Annuels
+  const [showServiceModal, setShowServiceModal] = useState(false);
+  const [editingService, setEditingService] = useState(null);
+  const [serviceNom, setServiceNom] = useState('');
+  const [serviceCode, setServiceCode] = useState('');
+  const [serviceDateDebut, setServiceDateDebut] = useState('');
+  const [serviceDateFin, setServiceDateFin] = useState('');
+  const [serviceDescription, setServiceDescription] = useState('');
+
+  // États pour l'attribution des quais
+  const [showQuaiModal, setShowQuaiModal] = useState(false);
+  const [quaiSelectedHoraire, setQuaiSelectedHoraire] = useState(null);
+  const [quaiAssignments, setQuaiAssignments] = useState({});
+  const [quaiSaving, setQuaiSaving] = useState(false);
+  const [quaiSearchQuery, setQuaiSearchQuery] = useState('');
+  const [quaiViewMode, setQuaiViewMode] = useState('liste'); // 'liste' | 'schematique' | 'depart_arrivee'
+  const [quaiGareSelectionneeId, setQuaiGareSelectionneeId] = useState('');
+
+  // Form error & saving
+  const [formError, setFormError] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  // Initialiser quaiAssignments depuis les horaires chargés
+  useEffect(() => {
+    if (!horaires || horaires.length === 0) return;
+    const initial = {};
+    horaires.forEach(h => {
+      if (!h || !h.id) return;
+      const gares = Array.isArray(h.gares_desservies) ? h.gares_desservies : [];
+      if (h.quai_depart) initial[`${h.id}_depart`] = h.quai_depart;
+      gares.forEach((g, idx) => {
+        if (g && g.quai) {
+          const key = `gare_${g.ordre ?? idx + 1}`;
+          initial[`${h.id}_${key}`] = g.quai;
+        }
+      });
+      if (h.quai_arrivee) initial[`${h.id}_arrivee`] = h.quai_arrivee;
+    });
+    setQuaiAssignments(prev => ({ ...initial, ...prev }));
+  }, [horaires]);
+
+  // Chargement des données
   const loadData = useCallback(async () => {
     setLoading(true);
     setError('');
     try {
-      // Filtrage RBAC par région
       const user = getCurrentUser();
       const regionId = isRegionFiltered(user) ? getUserRegionId(user) : null;
 
@@ -248,7 +163,6 @@ export default function Horaires() {
       if (!regionsRes.error) setRegionsList(Array.isArray(regionsRes.data) ? regionsRes.data : []);
 
       if (horairesRes.error || materielsRes.error || garesRes.error || typesTrainsRes.error || lignesRes.error || servicesRes.error) {
-        // afficher un message minimal
         setError((horairesRes.error || materielsRes.error || garesRes.error || typesTrainsRes.error || lignesRes.error || servicesRes.error).message || 'Erreur lors du chargement');
       }
     } catch (err) {
@@ -258,775 +172,104 @@ export default function Horaires() {
     setLoading(false);
   }, []);
 
-  useEffect(() => { const id = setTimeout(() => { loadData(); }, 0); return () => clearTimeout(id); }, [loadData]);
+  useEffect(() => {
+    const id = setTimeout(() => { loadData(); }, 0);
+    return () => clearTimeout(id);
+  }, [loadData]);
 
-  // handlers pour assignation
-  const handleAssignSelectedToLigne = async () => {
-    if (selectedHoraires.length === 0 || !assignTargetLigne) return;
-    setAssignLoading(true);
-    
-    const targetLigneObj = lignes.find(l => String(l.id) === assignTargetLigne);
-    const targetNom = targetLigneObj ? targetLigneObj.nom : '';
+  // Si on arrive avec un paramètre gtfs_import, préremplir la modal d'horaire
+  useEffect(() => {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      const gtfsEncoded = params.get('gtfs_import');
+      if (!gtfsEncoded) return;
+      const decoded = decodeURIComponent(gtfsEncoded);
+      const payload = JSON.parse(decoded);
+      if (!payload) return;
 
-    const { error } = await updateHorairesLigneBatch(selectedHoraires, assignTargetLigne, targetNom);
-    if (error) {
-      alert('Erreur lors de l\'attribution.');
-    } else {
-      await loadData();
-      setSelectedHoraires([]);
-      setAssignLigneModalOpen(false);
-      setAssignTargetLigne('');
-      setSelectionMode(false);
-    }
-    setAssignLoading(false);
-  };
+      setEditingItem(payload);
+      setIsDuplicating(false);
+      setShowModal(true);
 
-  // helpers gares desservies (useCallback pour stabilité)
-  // eslint-disable-next-line no-unused-vars
-  const addGareDesservie = useCallback(() => {
-    setGaresDesservies(prev => ([...prev, { id: `new-${Date.now()}`, gare_id: '', gare_nom: '', heure_arrivee: '', heure_depart: '', ordre: prev.length + 1 }]));
-  }, []);
-
-  // eslint-disable-next-line no-unused-vars
-  const updateGareDesservieField = useCallback((index, field, value) => {
-    setGaresDesservies(prev => {
-      const copy = [...prev];
-      copy[index] = { ...copy[index], [field]: value };
-      return copy;
-    });
-  }, []);
-
-  // eslint-disable-next-line no-unused-vars
-  const removeGareDesservie = useCallback((index) => {
-    setGaresDesservies(prev => {
-      const filtered = prev.filter((_, i) => i !== index);
-      return filtered.map((g, i) => ({ ...g, ordre: i + 1 }));
-    });
-  }, []);
-
-  // eslint-disable-next-line no-unused-vars
-  const moveGareUp = useCallback((index) => {
-    if (index === 0) return;
-    setGaresDesservies(prev => {
-      const copy = [...prev];
-      const [moved] = copy.splice(index, 1);
-      copy.splice(index - 1, 0, moved);
-      return copy.map((g, i) => ({ ...g, ordre: i + 1 }));
-    });
-  }, []);
-
-  // eslint-disable-next-line no-unused-vars
-  const moveGareDown = useCallback((index) => {
-    setGaresDesservies(prev => {
-      if (index === prev.length - 1) return prev;
-      const copy = [...prev];
-      const [moved] = copy.splice(index, 1);
-      copy.splice(index + 1, 0, moved);
-      return copy.map((g, i) => ({ ...g, ordre: i + 1 }));
-    });
-  }, []);
-
-  const findGareFromSearch = useCallback((query) => {
-    const value = String(query || '').trim();
-    if (!value) return null;
-    const lower = value.toLowerCase();
-    return garesList.find(g => String(g.id) === value || String(g.nom || '').toLowerCase() === lower) || null;
-  }, [garesList]);
-
-  // eslint-disable-next-line no-unused-vars
-  const applyMainGareSelection = useCallback((value, setId, setNom) => {
-    const selected = findGareFromSearch(value);
-    if (selected) {
-      setId(String(selected.id));
-      setNom(selected.nom || '');
-      return;
-    }
-    setId('');
-    setNom(value || '');
-  }, [findGareFromSearch]);
-
-  // eslint-disable-next-line no-unused-vars
-  const getMatchingGares = useCallback((query) => {
-    const value = String(query || '').trim().toLowerCase();
-    if (!value || value.length < 2) return [];
-    return (garesList || [])
-      .filter(g => String(g?.nom || '').toLowerCase().includes(value))
-      .slice(0, 8);
-  }, [garesList]);
-
-  const resetForm = useCallback(() => {
-    setNumeroTrain('');
-    setTypeTrainId(''); setTypeTrainNom('');
-    setLigne('');
-    setGareDepartId(''); setGareDepartNom(''); setHeureDepart('');
-    setGareArriveeId(''); setGareArriveeNom(''); setHeureArrivee('');
-    setGaresDesservies([]);
-    setCirculeLundi(true); setCirculeMardi(true); setCirculeMercredi(true);
-    setCirculeJeudi(true); setCirculeVendredi(true); setCirculeSamedi(true); setCirculeDimanche(true);
-    setCirculeJoursFeries(false); setCirculeDimanchesFeries(false);
-    setJoursNonCirculation([]); setJoursPersonnalises([]); setShowJoursPerso(false);
-    setMaterielRoulantId(null);
-    setCompositionTrain([]);
-    setDragOverIndex(null);
-    setEstSubstitution(false); setMotifSubstitution('');
-    setServiceAnnuelId(''); setServiceAnnuelNom('');
-    setFormError(''); setActiveTab('general');
-    // NB: ne pas modifier l'état `showModal` ici : resetForm ne doit pas ouvrir/fermer la modale
-    setIsDuplicating(false);
-  }, []);
-
-  // Trouve le service annuel "actif en ce moment".
-  // Critères: champ `actif` truthy et la date courante est entre date_debut et date_fin (inclus).
-  // Si plusieurs correspondent, on prend celui ayant la date_debut la plus récente.
-  // eslint-disable-next-line no-unused-vars
-  const getActiveService = useCallback(() => {
-    if (!Array.isArray(servicesAnnuels) || servicesAnnuels.length === 0) return null;
-    const today = new Date();
-    const inRange = servicesAnnuels.filter(s => s && (s.actif === undefined || s.actif === true) && s.date_debut && s.date_fin).filter(s => {
       try {
-        const start = new Date(s.date_debut);
-        const end = new Date(s.date_fin);
-        // Normaliser heures pour neutraliser fuseaux
-        start.setHours(0,0,0,0);
-        end.setHours(23,59,59,999);
-        return start <= today && today <= end;
-      } catch (e) { return false; }
-    });
-
-    if (inRange.length > 0) {
-      inRange.sort((a, b) => new Date(b.date_debut) - new Date(a.date_debut));
-      return inRange[0];
-    }
-
-    // fallback: prendre le premier marqué actif si présent
-    const fallback = servicesAnnuels.find(s => s && (s.actif === undefined || s.actif === true));
-    return fallback || null;
-  }, [servicesAnnuels]);
-
-  // ============================================================================
-  // GESTION DU MODE SÉLECTION
-  // ============================================================================
-
-  const toggleSelectionMode = () => {
-    setSelectionMode(!selectionMode);
-    setSelectedHoraires([]);
-  };
-
-  const toggleSelectHoraire = (horaireId) => {
-    setSelectedHoraires(prev => {
-      if (prev.includes(horaireId)) {
-        return prev.filter(id => id !== horaireId);
-      } else {
-        return [...prev, horaireId];
+        const u = new URL(window.location.href);
+        u.searchParams.delete('gtfs_import');
+        window.history.replaceState({}, '', u.toString());
+      } catch (e) {
+        console.warn('Impossible de nettoyer le paramètre gtfs_import de l\'URL', e);
       }
-    });
-  };
-
-  // ============================================================================
-  // GESTION DE LA DUPLICATION
-  // ============================================================================
-
-  const LOCALSTORAGE_KEY = 'ferrovia_duplicated_horaire';
-
-  const handleDuplicateSelected = () => {
-    if (selectedHoraires.length === 0) return;
-
-    // On prend le premier horaire sélectionné pour la duplication
-    const horaireId = selectedHoraires[0];
-    const horaireToDuplicate = horaires.find(h => h.id === horaireId);
-
-    if (!horaireToDuplicate) return;
-
-    // Créer une copie de l'horaire sans l'ID (pour éviter les conflits)
-    const duplicatedHoraire = {
-      ...horaireToDuplicate,
-      id: null, // Sera généré par la BDD lors de la sauvegarde
-      numero_train: `${horaireToDuplicate.numero_train} (copie)`,
-      gares_desservies: Array.isArray(horaireToDuplicate.gares_desservies)
-          ? horaireToDuplicate.gares_desservies.map(g => ({ ...g, id: null }))
-          : []
-    };
-
-    // Sauvegarder dans le LocalStorage
-    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(duplicatedHoraire));
-
-    // Quitter le mode sélection
-    setSelectionMode(false);
-    setSelectedHoraires([]);
-
-    // Ouvrir la modale de modification avec les données dupliquées
-    openEditModalFromDuplicate(duplicatedHoraire);
-  };
-
-  // Supprimer les horaires sélectionnés (soft delete via API)
-  const handleDeleteSelected = async () => {
-    if (!canDeleteHoraires) {
-      alert('Vous n\'avez pas les droits pour supprimer des horaires.');
-      return;
+    } catch (e) {
+      console.error('Erreur parsing gtfs_import param:', e);
     }
-    if (!selectedHoraires || selectedHoraires.length === 0) return;
-    if (!window.confirm(`Êtes-vous sûr de vouloir supprimer ${selectedHoraires.length} élément(s) ?`)) return;
-
-    setSaving(true);
-    // Optimistic update : retirer immédiatement de l'UI
-    const toDelete = new Set(selectedHoraires.map(String));
-    setHoraires(prev => prev.filter(h => !toDelete.has(String(h.id))));
-    setSelectedHoraires([]);
-    setSelectionMode(false);
-    try {
-      const promises = Array.from(toDelete).map(id => deleteHoraire(id, false));
-      const results = await Promise.all(promises);
-      const errors = results.filter(r => r && r.error).map(r => r.error?.message || JSON.stringify(r.error));
-      if (errors.length > 0) {
-        alert('Certaines suppressions ont échoué :\n' + errors.join('\n'));
-        await loadData(); // Resync si erreur
-      }
-    } catch (err) {
-      console.error('Erreur lors de la suppression groupée :', err);
-      alert('Erreur lors de la suppression des éléments sélectionnés');
-      await loadData(); // Resync si exception
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  // Exporter les horaires sélectionnés
-  const handleExportSelected = () => {
-    if (!selectedHoraires || selectedHoraires.length === 0) return;
-    
-    const headers = [
-      'id', 'numero_train', 'type_train', 'type_train_id', 'gare_depart_id',
-      'gare_depart_nom', 'heure_depart', 'gare_arrivee_id', 'gare_arrivee_nom',
-      'heure_arrivee', 'circule_lundi', 'circule_mardi', 'circule_mercredi',
-      'circule_jeudi', 'circule_vendredi', 'circule_samedi', 'circule_dimanche',
-      'circule_jours_feries', 'circule_dimanches_feries', 'jours_personnalises',
-      'jours_non_circulation', 'materiel_roulant_id', 'ligne_id', 'ligne_nom',
-      'service_annuel_id', 'service_annuel_nom', 'est_substitution',
-      'motif_substitution', 'actif', 'created_at', 'updated_at', 'deleted_at',
-      'gares_desservies', 'composition_train', 'substitution_disponible', 'region_id'
-    ];
-
-    const dataToExport = horaires
-      .filter(h => selectedHoraires.includes(h.id))
-      .map(h => {
-        const row = {};
-        headers.forEach(header => {
-          let val = h[header];
-          if (Array.isArray(val) || (typeof val === 'object' && val !== null)) {
-            val = JSON.stringify(val);
-          }
-          row[header] = val !== undefined && val !== null ? val : '';
-        });
-        return row;
-      });
-
-    const worksheet = XLSX.utils.json_to_sheet(dataToExport, { header: headers });
-    const workbook = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(workbook, worksheet, 'Horaires');
-    
-    // Déterminer le nom du fichier
-    const uniqueLigneIds = Array.from(new Set(dataToExport.map(h => h.ligne_id).filter(Boolean)));
-    const matchedLignes = uniqueLigneIds.map(id => lignes.find(l => String(l.id) === String(id))).filter(Boolean);
-    
-    let filenameBase = 'export_horaires';
-    if (matchedLignes.length === 1) {
-      const nomLigne = matchedLignes[0].nom || 'Ligne';
-      filenameBase = `export_horaires_${nomLigne.replace(/[^a-zA-Z0-9]/g, '_')}`;
-    } else if (matchedLignes.length > 1) {
-      const codes = matchedLignes.map(l => l.code || 'NOCODE').filter(Boolean);
-      filenameBase = `export_horaires_${codes.join('-')}`;
-    }
-
-    const dateStr = new Date().toISOString().split('T')[0];
-    XLSX.writeFile(workbook, `${filenameBase}_${dateStr}.csv`, { bookType: 'csv' });
-  };
-
-    const openEditModalFromDuplicate = (horaire) => {
-    setEditingItem(horaire);
-    setIsDuplicating(true);
-    setShowModal(true);
-  };
-
-  const openCreateModal = () => {
-    if (!canCreateHoraires) {
-      setFormError('Vous n\'avez pas les droits pour créer un horaire.');
-      return;
-    }
-    setEditingItem(null);
-    setIsDuplicating(false);
-    setShowModal(true);
-  };
-
-  const openEditModal = (horaire) => {
-    if (!canUpdateHoraires) {
-      setFormError('Vous n\'avez pas les droits pour modifier un horaire.');
-      return;
-    }
-    if (!horaire) return;
-    setEditingItem(horaire);
-    setIsDuplicating(false);
-    setShowModal(true);
-  };
-
-  const closeModal = () => {
-    
-    setShowModal(false);
-    setEditingItem(null);
-    resetForm();
-  };
-
-
-  // Sauvegarde
-  // eslint-disable-next-line no-unused-vars
-  const handleSave = async () => {
-    if (!editingItem && !canCreateHoraires) return setFormError('Vous n\'avez pas les droits pour créer un horaire.');
-    if (editingItem && !canUpdateHoraires) return setFormError('Vous n\'avez pas les droits pour modifier un horaire.');
-    setFormError('');
-    if (!numeroTrain) return setFormError('Le numéro de train est requis.');
-    if (!gareDepartId || !gareArriveeId) return setFormError('Les gares de départ et d\'arrivée sont requises.');
-    if (!heureDepart || !heureArrivee) return setFormError('Les heures de départ et d\'arrivée sont requises.');
-
-    setSaving(true);
-    const selLigne = lignes.find(ll => String(ll.id) === String(ligne));
-    const payload = {
-      numero_train: numeroTrain,
-      type_train_id: typeTrainId || null,
-      type_train: typeTrainNom,
-      ligne_id: ligne || null,
-      ligne_nom: selLigne ? selLigne.nom : (typeof ligne === 'string' ? ligne : null),
-      gare_depart_id: gareDepartId,
-      gare_depart_nom: gareDepartNom,
-      heure_depart: heureDepart,
-      gare_arrivee_id: gareArriveeId,
-      gare_arrivee_nom: gareArriveeNom,
-      heure_arrivee: heureArrivee,
-      circule_lundi: circuleLundi,
-      circule_mardi: circuleMardi,
-      circule_mercredi: circuleMercredi,
-      circule_jeudi: circuleJeudi,
-      circule_vendredi: circuleVendredi,
-      circule_samedi: circuleSamedi,
-      circule_dimanche: circuleDimanche,
-      circule_jours_feries: circuleJoursFeries,
-      circule_dimanches_feries: circuleDimanchesFeries,
-      jours_non_circulation: joursNonCirculation,
-      // Fusionne jours uniques et périodes dans jours_personnalises
-      jours_personnalises: [
-        // Jours uniques (format {date, circule})
-        ...joursPersonnalises.filter(j => j && j.date),
-        // Périodes générales (format {debut, fin, circule})
-        ...(
-          Array.isArray(periodesCirculation)
-            ? periodesCirculation.filter(p => p && p.debut && p.fin && p.debut <= p.fin).map(p => ({ debut: p.debut, fin: p.fin, circule: p.circule }))
-            : []
-        )
-      ],
-      materiel_roulant_id: materielRoulantId || null,
-      composition_train: compositionTrain.map((item, idx) => ({
-        materiel_id: item.materiel_id,
-        materiel_nom: item.materiel_nom || '',
-        materiel_nom_technique: item.materiel_nom_technique || '',
-        materiel_image_url: item.materiel_image_url || null,
-        position: idx + 1
-      })),
-      est_substitution: estSubstitution,
-      motif_substitution: estSubstitution ? motifSubstitution : null,
-      service_annuel_id: serviceAnnuelId || null,
-      service_annuel_nom: serviceAnnuelNom || null,
-      actif: true
-    };
-
-    try {
-      let res;
-      if (editingItem && editingItem.id) {
-        // Update existing
-        res = await updateHoraire(editingItem.id, payload, garesDesservies);
-      } else {
-        // Create new
-        // `garesClean` n'existe pas — utiliser `garesDesservies` qui contient la liste des gares saisies
-        res = await createHoraire(payload, garesDesservies, currentUser);
-      }
-
-      if (res?.error) {
-        setFormError(res.error.message || 'Erreur lors de la sauvegarde');
-        setSaving(false);
-        return;
-      }
-
-      // Si c'était une duplication, nettoyer le LocalStorage
-      if (isDuplicating) {
-        
-      }
-
-      await loadData();
-      setSaving(false);
-      closeModal();
-    } catch (err) {
-      console.error(err);
-      setFormError('Erreur inattendue lors de la sauvegarde');
-      setSaving(false);
-    }
-  };
-
-  const handleDelete = async (id) => {
-    if (!canDeleteHoraires) {
-      alert('Vous n\'avez pas les droits pour supprimer un horaire.');
-      return;
-    }
-    if (!id) return;
-    if (!window.confirm('Êtes-vous sûr de vouloir supprimer cet horaire ?')) return;
-    setSaving(true);
-    // Optimistic update : retirer immédiatement de l'UI
-    setHoraires(prev => prev.filter(h => String(h.id) !== String(id)));
-    const { error } = await deleteHoraire(id, false);
-    if (error) {
-      alert('Erreur lors de la suppression: ' + (error.message || 'Erreur'));
-      await loadData(); // Resync si erreur
-    }
-    setSaving(false);
-  };
-
-  const areGaresTraceesEqual = (a, b) => {
-    if (!a || !b) return a === b;
-    if (a.length !== b.length) return false;
-    return a.every((g, i) => {
-      const other = b[i];
-      return String(g.gare_id) === String(other.gare_id) && g.desserte === other.desserte && Number(g.ordre) === Number(other.ordre);
-    });
-  };
-
-  const openCreateLigneModal = () => {
-    if (!canCreateLignes) {
-      setFormError('Vous n\'avez pas les droits pour créer une ligne.');
-      return;
-    }
-    setEditingLigne(null);
-    setLigneNom('');
-    setLigneCode('');
-    setLigneDepartId('');
-    setLigneArriveeId('');
-    setGaresTracees([]);
-    setLigneFHUrl('');
-    setLigneFHFile(null);
-    setLigneFHError('');
-    setLigneModalTab('infos');
-    setLigneRegion('');
-    setShowLigneModal(true);
-  };
-
-  const openEditLigneModal = (ligne) => {
-    if (!canUpdateLignes) {
-      setFormError('Vous n\'avez pas les droits pour modifier une ligne.');
-      return;
-    }
-    if (!ligne) return;
-    setEditingLigne(ligne);
-    setLigneNom(ligne.nom || '');
-    setLigneCode(ligne.code || '');
-    setLigneDepartId(ligne.gare_depart_id || '');
-    setLigneArriveeId(ligne.gare_arrivee_id || '');
-    setGaresTracees(Array.isArray(ligne.lignes_gares) ? ligne.lignes_gares.map(lg => ({
-      id: lg.id,
-      gare_id: lg.gare?.id || '',
-      gare_nom: lg.gare?.nom || '',
-      desserte: lg.desserte || 'tous',
-      ordre: lg.ordre
-    })) : []);
-    setLigneFHUrl(ligne.fh_url || '');
-    setLigneFHFile(null);
-    setLigneFHError('');
-    setLigneModalTab('infos');
-    setLigneRegion(ligne.region || '');
-    setShowLigneModal(true);
-    const initialGares = ligne.lignes_gares ? ligne.lignes_gares.map(lg => ({
-      gare_id: lg.gare?.id || lg.gare_id,
-      desserte: lg.desserte,
-      ordre: lg.ordre
-    })) : [];
-    originalGaresTraceesRef.current = initialGares;
-  };
-
-  const closeLigneModal = () => {
-    setShowLigneModal(false);
-    setEditingLigne(null);
-    originalGaresTraceesRef.current = null;
-  };
-
-  const addGareTracee = useCallback(() => {
-    setGaresTracees(prev => ([...prev, { id: `new-${Date.now()}`, gare_id: '', gare_nom: '', desserte: 'tous', ordre: prev.length + 1 }]));
   }, []);
 
-  const updateGareTraceeField = useCallback((index, field, value) => {
-    setGaresTracees(prev => {
-      const copy = [...prev];
-      copy[index] = { ...copy[index], [field]: value };
-      return copy;
+  // Stats pour les KPI Cards
+  const stats = useMemo(() => {
+    const totalSillons = horaires.length;
+    const totalLignes = lignes.length;
+    const totalServices = servicesAnnuels.length;
+    
+    // Nombre d'horaires avec au moins un quai attribué
+    let quaisAttribues = 0;
+    horaires.forEach(h => {
+      const hasQuaisState = Object.keys(quaiAssignments).some(k => k.startsWith(`${h.id}_`) && quaiAssignments[k]);
+      const hasQuaisBDD = normalizeHoraireDesservies(h).all.some(g => g && g.quai);
+      if (hasQuaisState || hasQuaisBDD) quaisAttribues++;
     });
-  }, []);
 
-  const removeGareTracee = useCallback((index) => {
-    setGaresTracees(prev => {
-      const filtered = prev.filter((_, i) => i !== index);
-      return filtered.map((g, i) => ({ ...g, ordre: i + 1 }));
-    });
-  }, []);
-
-  const handleSaveLigne = async () => {
-    if (!editingLigne && !canCreateLignes) return setFormError('Vous n\'avez pas les droits pour créer une ligne.');
-    if (editingLigne && !canUpdateLignes) return setFormError('Vous n\'avez pas les droits pour modifier une ligne.');
-    setFormError('');
-    if (!ligneNom) return setFormError('Le nom de la ligne est requis.');
-    if (!ligneDepartId || !ligneArriveeId) return setFormError('Les gares de départ et d\'arrivée sont requises.');
-
-    setSaving(true);
-
-    // Gérer l'upload de la fiche horaire si un fichier est sélectionné
-    let fhUrl = ligneFHUrl || null;
-
-    if (ligneFHFile) {
-      setLigneFHUploading(true);
-      // Pour une création, on utilise un ID temporaire ; pour une modif, l'ID existant
-      const tempId = editingLigne?.id || `tmp-${Date.now()}`;
-      const { url, error: uploadErr } = await uploadFicheHoraire(tempId, ligneFHFile);
-      setLigneFHUploading(false);
-
-      if (uploadErr) {
-        setFormError('Erreur lors de l\'upload de la fiche horaire : ' + (uploadErr.message || uploadErr));
-        setSaving(false);
-        return;
-      }
-      fhUrl = url;
-    }
-
-    const payload = {
-      nom: ligneNom,
-      code: ligneCode,
-      gare_depart_id: ligneDepartId,
-      gare_arrivee_id: ligneArriveeId,
-      actif: true,
-      fh_url: fhUrl,
-      region: ligneRegion || null
+    return {
+      totalSillons,
+      totalLignes,
+      totalServices,
+      quaisAttribues
     };
+  }, [horaires, lignes, servicesAnnuels, quaiAssignments]);
 
-    try {
-      let res;
-      if (editingLigne && editingLigne.id) {
-        const currentGaresTracees = garesTracees.map(g => ({
-          gare_id: g.gare_id,
-          desserte: g.desserte,
-          ordre: g.ordre
-        }));
-        
-        const garesTraceesToSend = areGaresTraceesEqual(currentGaresTracees, originalGaresTraceesRef.current) 
-          ? undefined 
-          : garesTracees;
-
-        res = await updateLigne(editingLigne.id, payload, garesTraceesToSend);
-      } else {
-        res = await createLigne(payload, garesTracees);
-      }
-
-      if (res?.error) {
-        setFormError(res.error.message || 'Erreur lors de la sauvegarde');
-        setSaving(false);
-        return;
-      }
-
-      await loadData();
-      setSaving(false);
-      closeLigneModal();
-    } catch (err) {
-      console.error(err);
-      setFormError('Erreur inattendue lors de la sauvegarde');
-      setSaving(false);
+  // Tri et filtrage des horaires
+  const compareNumeroTrain = useCallback((a, b) => {
+    const aStr = String(a?.numero_train || '');
+    const bStr = String(b?.numero_train || '');
+    const aNum = parseInt(aStr, 10);
+    const bNum = parseInt(bStr, 10);
+    if (!isNaN(aNum) && !isNaN(bNum)) {
+      return aNum - bNum;
     }
-  };
-
-  const handleDeleteLigne = async (id) => {
-    if (!canDeleteLignes) {
-      alert('Vous n\'avez pas les droits pour supprimer une ligne.');
-      return;
-    }
-    if (!id || !window.confirm('Êtes-vous sûr de vouloir supprimer cette ligne ?')) return;
-    setSaving(true);
-    const { error } = await deleteLigne(id, true);
-    if (error) alert('Erreur lors de la suppression: ' + (error.message || 'Erreur'));
-    await loadData();
-    setSaving(false);
-  };
-
-  // ============================================================================
-  // GESTION DES SERVICES ANNUELS
-  // ============================================================================
-
-  const openCreateServiceModal = () => {
-    if (!canCreateServices) {
-      setFormError('Vous n\'avez pas les droits pour créer un service annuel.');
-      return;
-    }
-    setEditingService(null);
-    setServiceNom('');
-    setServiceCode('');
-    setServiceDateDebut('');
-    setServiceDateFin('');
-    setServiceDescription('');
-    setShowServiceModal(true);
-  };
-
-  const openEditServiceModal = (service) => {
-    if (!canUpdateServices) {
-      setFormError('Vous n\'avez pas les droits pour modifier un service annuel.');
-      return;
-    }
-    if (!service) return;
-    setEditingService(service);
-    setServiceNom(service.nom || '');
-    setServiceCode(service.code || '');
-    setServiceDateDebut(service.date_debut || '');
-    setServiceDateFin(service.date_fin || '');
-    setServiceDescription(service.description || '');
-    setShowServiceModal(true);
-  };
-
-  const closeServiceModal = () => {
-    setShowServiceModal(false);
-    setEditingService(null);
-  };
-
-  const handleSaveService = async () => {
-    if (!editingService && !canCreateServices) return setFormError('Vous n\'avez pas les droits pour créer un service annuel.');
-    if (editingService && !canUpdateServices) return setFormError('Vous n\'avez pas les droits pour modifier un service annuel.');
-    setFormError('');
-    if (!serviceNom) return setFormError('Le nom du service annuel est requis.');
-    if (!serviceDateDebut || !serviceDateFin) return setFormError('Les dates de début et de fin sont requises.');
-
-    setSaving(true);
-    const payload = {
-      nom: serviceNom,
-      code: serviceCode,
-      date_debut: serviceDateDebut,
-      date_fin: serviceDateFin,
-      description: serviceDescription,
-      actif: true
-    };
-
-    try {
-      let res;
-      if (editingService && editingService.id) {
-        res = await updateServiceAnnuel(editingService.id, payload);
-      } else {
-        res = await createServiceAnnuel(payload);
-      }
-
-      if (res?.error) {
-        setFormError(res.error.message || 'Erreur lors de la sauvegarde');
-        setSaving(false);
-        return;
-      }
-
-      await loadData();
-      setSaving(false);
-      closeServiceModal();
-    } catch (err) {
-      console.error(err);
-      setFormError('Erreur inattendue lors de la sauvegarde');
-      setSaving(false);
-    }
-  };
-
-  const handleDeleteService = async (id) => {
-    if (!canDeleteServices) {
-      alert('Vous n\'avez pas les droits pour supprimer un service annuel.');
-      return;
-    }
-    if (!id || !window.confirm('Êtes-vous sûr de vouloir supprimer ce service annuel ?')) return;
-    setSaving(true);
-    const { error } = await deleteServiceAnnuel(id, true);
-    if (error) alert('Erreur lors de la suppression: ' + (error.message || 'Erreur'));
-    await loadData();
-    setSaving(false);
-  };
-
-  // Render
-
-  // ============================================================================
-  // GESTION DU TRI
-  // ============================================================================
-
-  const [sortColumn, setSortColumn] = useState(null);
-  const [sortDirection, setSortDirection] = useState('asc');
-
-  const handleSort = (column) => {
-    if (sortColumn === column) {
-      // Si on clique sur la même colonne, inverser la direction
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      // Nouvelle colonne, tri ascendant par défaut
-      setSortColumn(column);
-      setSortDirection('asc');
-    }
-  };
-
-  const compareNumeroTrain = useCallback((aValue, bValue) => {
-    const aStr = String(aValue || '');
-    const bStr = String(bValue || '');
-    return aStr.localeCompare(bStr, undefined, { numeric: true, sensitivity: 'base' });
+    return aStr.localeCompare(bStr, undefined, { numeric: true });
   }, []);
 
-  const getSortedHoraires = useCallback((horairesArray) => {
-    if (!sortColumn) return horairesArray;
-
-    return [...horairesArray].sort((a, b) => {
-      let aVal, bVal;
-
+  const getSortedHoraires = useCallback((list) => {
+    if (!sortColumn) return list;
+    return [...list].sort((a, b) => {
+      let comparison = 0;
       switch (sortColumn) {
         case 'numero_train':
-          return sortDirection === 'asc'
-            ? compareNumeroTrain(a?.numero_train, b?.numero_train)
-            : compareNumeroTrain(b?.numero_train, a?.numero_train);
+          comparison = compareNumeroTrain(a, b);
+          break;
         case 'type_train':
-          aVal = a?.type_train || '';
-          bVal = b?.type_train || '';
+          comparison = String(a.type_train || '').localeCompare(String(b.type_train || ''));
           break;
         case 'gare_depart':
-          aVal = a?.gare_depart_nom || '';
-          bVal = b?.gare_depart_nom || '';
+          comparison = String(a.gare_depart_nom || '').localeCompare(String(b.gare_depart_nom || ''));
           break;
         case 'gare_arrivee':
-          aVal = a?.gare_arrivee_nom || '';
-          bVal = b?.gare_arrivee_nom || '';
-          break;
-        case 'heure_depart':
-          aVal = a?.heure_depart || '';
-          bVal = b?.heure_depart || '';
-          break;
-        case 'heure_arrivee':
-          aVal = a?.heure_arrivee || '';
-          bVal = b?.heure_arrivee || '';
+          comparison = String(a.gare_arrivee_nom || '').localeCompare(String(b.gare_arrivee_nom || ''));
           break;
         case 'jours':
-        {
-          const joursA = getJoursCirculation(a);
-          const joursB = getJoursCirculation(b);
-          aVal = joursA.length;
-          bVal = joursB.length;
+          comparison = (getJoursCirculation(a).join(', ') || '').localeCompare(getJoursCirculation(b).join(', ') || '');
+          break;
+        case 'materiel': {
+          const aMat = a.materiel_roulant ? (a.materiel_roulant.nom || a.materiel_roulant.nom_technique) : '';
+          const bMat = b.materiel_roulant ? (b.materiel_roulant.nom || b.materiel_roulant.nom_technique) : '';
+          comparison = aMat.localeCompare(bMat);
+          break;
         }
-          break;
-        case 'materiel':
-          aVal = a?.materiel_roulant?.nom || a?.materiel_roulant?.nom_technique || '';
-          bVal = b?.materiel_roulant?.nom || b?.materiel_roulant?.nom_technique || '';
-          break;
         case 'substitution':
-          aVal = a?.est_substitution ? 1 : 0;
-          bVal = b?.est_substitution ? 1 : 0;
+          comparison = (a.est_substitution ? 1 : 0) - (b.est_substitution ? 1 : 0);
           break;
         default:
-          return 0;
+          comparison = 0;
       }
-
-      if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
-      if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
-      return 0;
+      return sortDirection === 'asc' ? comparison : -comparison;
     });
   }, [sortColumn, sortDirection, compareNumeroTrain]);
 
@@ -1071,47 +314,680 @@ export default function Horaires() {
 
   const sortedHoraires = useMemo(() => getSortedHoraires(filteredHoraires), [filteredHoraires, getSortedHoraires]);
 
+  const handleSort = (column) => {
+    if (sortColumn === column) {
+      setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortColumn(column);
+      setSortDirection('asc');
+    }
+  };
+
   const renderSortIcon = (column) => {
     if (sortColumn !== column) {
-      return <wcs-mat-icon icon="unfold_more" size="s" style={{ marginLeft: 6, opacity: 0.35 }} />;
+      return <wcs-mat-icon icon="unfold_more" size="s" style={{ marginLeft: 6, opacity: 0.4 }} />;
     }
     return sortDirection === 'asc'
         ? <wcs-mat-icon icon="arrow_upward" size="s" style={{ marginLeft: 6 }} />
         : <wcs-mat-icon icon="arrow_downward" size="s" style={{ marginLeft: 6 }} />;
   };
 
-  // Render d'une ligne de tableau pour un horaire
+  // ============================================================================
+  // SÉLECTION & ACTIONS DE MASSE
+  // ============================================================================
+
+  const toggleSelectionMode = () => {
+    setSelectionMode(!selectionMode);
+    setSelectedHoraires([]);
+  };
+
+  const toggleSelectHoraire = (horaireId) => {
+    setSelectedHoraires(prev => {
+      if (prev.includes(horaireId)) {
+        return prev.filter(id => id !== horaireId);
+      } else {
+        return [...prev, horaireId];
+      }
+    });
+  };
+
+  const handleDuplicateSelected = () => {
+    if (selectedHoraires.length === 0) return;
+    if (selectedHoraires.length === 1) {
+      const horaireToDuplicate = horaires.find(h => h.id === selectedHoraires[0]);
+      if (horaireToDuplicate) {
+        setEditingItem(horaireToDuplicate);
+        setIsDuplicating(true);
+        setShowModal(true);
+        setSelectionMode(false);
+        setSelectedHoraires([]);
+      }
+      return;
+    }
+    // Plusieurs éléments
+    const horairesToDuplicate = horaires.filter(h => selectedHoraires.includes(h.id));
+    if (horairesToDuplicate.length === 0) return;
+    setEditingItem(horairesToDuplicate[0]);
+    setIsDuplicating(true);
+    setShowModal(true);
+    setSelectionMode(false);
+    setSelectedHoraires([]);
+  };
+
+  const handleDeleteSelected = async () => {
+    if (!canDeleteHoraires) {
+      alert("Vous n'avez pas les droits pour supprimer des horaires.");
+      return;
+    }
+    if (selectedHoraires.length === 0) return;
+    if (!window.confirm(`Êtes-vous sûr de vouloir supprimer ${selectedHoraires.length} horaire(s) ?`)) return;
+
+    setSaving(true);
+    try {
+      for (const id of selectedHoraires) {
+        await deleteHoraire(id, false);
+      }
+      await loadData();
+      setSelectedHoraires([]);
+      setSelectionMode(false);
+    } catch (err) {
+      console.error(err);
+      alert('Erreur lors de la suppression groupée.');
+    }
+    setSaving(false);
+  };
+
+  const handleExportSelected = () => {
+    if (selectedHoraires.length === 0) return;
+
+    const headers = [
+      'id', 'numero_train', 'type_train_id', 'type_train', 'gare_depart_id',
+      'gare_depart_nom', 'heure_depart', 'gare_arrivee_id', 'gare_arrivee_nom',
+      'heure_arrivee', 'circule_lundi', 'circule_mardi', 'circule_mercredi',
+      'circule_jeudi', 'circule_vendredi', 'circule_samedi', 'circule_dimanche',
+      'circule_jours_feries', 'circule_dimanches_feries', 'jours_personnalises',
+      'jours_non_circulation', 'materiel_roulant_id', 'ligne_id', 'ligne_nom',
+      'service_annuel_id', 'service_annuel_nom', 'est_substitution',
+      'motif_substitution', 'actif', 'created_at', 'updated_at', 'deleted_at',
+      'gares_desservies', 'composition_train', 'substitution_disponible', 'region_id'
+    ];
+
+    const dataToExport = horaires
+      .filter(h => selectedHoraires.includes(h.id))
+      .map(h => {
+        const row = {};
+        headers.forEach(header => {
+          let val = h[header];
+          if (Array.isArray(val) || (typeof val === 'object' && val !== null)) {
+            val = JSON.stringify(val);
+          }
+          row[header] = val !== undefined && val !== null ? val : '';
+        });
+        return row;
+      });
+
+    const worksheet = XLSX.utils.json_to_sheet(dataToExport, { header: headers });
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Horaires');
+    
+    const uniqueLigneIds = Array.from(new Set(dataToExport.map(h => h.ligne_id).filter(Boolean)));
+    const matchedLignes = uniqueLigneIds.map(id => lignes.find(l => String(l.id) === String(id))).filter(Boolean);
+    
+    let filenameBase = 'export_horaires';
+    if (matchedLignes.length === 1) {
+      const nomLigne = matchedLignes[0].nom || 'Ligne';
+      filenameBase = `export_horaires_${nomLigne.replace(/[^a-zA-Z0-9]/g, '_')}`;
+    } else if (matchedLignes.length > 1) {
+      const codes = matchedLignes.map(l => l.code || 'NOCODE').filter(Boolean);
+      filenameBase = `export_horaires_${codes.join('-')}`;
+    }
+
+    const dateStr = new Date().toISOString().split('T')[0];
+    XLSX.writeFile(workbook, `${filenameBase}_${dateStr}.csv`, { bookType: 'csv' });
+  };
+
+  const handleAssignSelectedToLigne = async () => {
+    if (!assignTargetLigne || selectedHoraires.length === 0) return;
+    setAssignLoading(true);
+
+    const targetLigneObj = lignes.find(l => String(l.id) === String(assignTargetLigne));
+    const ligneNomVal = targetLigneObj ? targetLigneObj.nom : null;
+
+    try {
+      const { error: batchError } = await updateHorairesLigneBatch(selectedHoraires, assignTargetLigne, ligneNomVal);
+      if (batchError) {
+        alert("Erreur lors de l'attribution : " + (batchError.message || 'Erreur'));
+        setAssignLoading(false);
+        return;
+      }
+      await loadData();
+      setAssignLigneModalOpen(false);
+      setAssignTargetLigne('');
+      setSelectedHoraires([]);
+      setSelectionMode(false);
+    } catch (err) {
+      console.error('Erreur assignation ligne batch:', err);
+      alert("Erreur inattendue lors de l'attribution.");
+    }
+    setAssignLoading(false);
+  };
+
+  // ============================================================================
+  // GESTION DES MODALES HORAIRES
+  // ============================================================================
+
+  const openCreateModal = () => {
+    if (!canCreateHoraires) {
+      alert("Vous n'avez pas les droits pour créer un horaire.");
+      return;
+    }
+    setEditingItem(null);
+    setIsDuplicating(false);
+    setShowModal(true);
+  };
+
+  const openEditModal = (horaire) => {
+    if (!canUpdateHoraires) {
+      alert("Vous n'avez pas les droits pour modifier un horaire.");
+      return;
+    }
+    if (!horaire) return;
+    setEditingItem(horaire);
+    setIsDuplicating(false);
+    setShowModal(true);
+  };
+
+  const closeModal = () => {
+    setShowModal(false);
+    setEditingItem(null);
+    setIsDuplicating(false);
+  };
+
+  const handleDelete = async (id) => {
+    if (!canDeleteHoraires) {
+      alert("Vous n'avez pas les droits pour supprimer un horaire.");
+      return;
+    }
+    if (!id) return;
+    if (!window.confirm('Êtes-vous sûr de vouloir supprimer cet horaire ?')) return;
+    setSaving(true);
+    setHoraires(prev => prev.filter(h => String(h.id) !== String(id)));
+    const { error: delErr } = await deleteHoraire(id, false);
+    if (delErr) {
+      alert('Erreur lors de la suppression: ' + (delErr.message || 'Erreur'));
+      await loadData();
+    }
+    setSaving(false);
+  };
+
+  // ============================================================================
+  // GESTION DES LIGNES
+  // ============================================================================
+
+  const openCreateLigneModal = () => {
+    if (!canCreateLignes) {
+      alert("Vous n'avez pas les droits pour créer une ligne.");
+      return;
+    }
+    setEditingLigne(null);
+    setLigneNom('');
+    setLigneCode('');
+    setLigneDepartId('');
+    setLigneArriveeId('');
+    setGaresTracees([]);
+    setLigneFHUrl('');
+    setLigneFHFile(null);
+    setLigneFHError('');
+    setLigneModalTab('infos');
+    setLigneRegion('');
+    setFormError('');
+    setShowLigneModal(true);
+  };
+
+  const openEditLigneModal = (ligneItem) => {
+    if (!canUpdateLignes) {
+      alert("Vous n'avez pas les droits pour modifier une ligne.");
+      return;
+    }
+    if (!ligneItem) return;
+    setEditingLigne(ligneItem);
+    setLigneNom(ligneItem.nom || '');
+    setLigneCode(ligneItem.code || '');
+    setLigneDepartId(ligneItem.gare_depart_id || '');
+    setLigneArriveeId(ligneItem.gare_arrivee_id || '');
+    setGaresTracees(Array.isArray(ligneItem.lignes_gares) ? ligneItem.lignes_gares.map(lg => ({
+      id: lg.id,
+      gare_id: lg.gare?.id || lg.gare_id || '',
+      gare_nom: lg.gare?.nom || '',
+      desserte: lg.desserte || 'tous',
+      ordre: lg.ordre
+    })) : []);
+    setLigneFHUrl(ligneItem.fh_url || '');
+    setLigneFHFile(null);
+    setLigneFHError('');
+    setLigneModalTab('infos');
+    setLigneRegion(ligneItem.region || '');
+    setFormError('');
+    setShowLigneModal(true);
+    const initialGares = ligneItem.lignes_gares ? ligneItem.lignes_gares.map(lg => ({
+      gare_id: lg.gare?.id || lg.gare_id,
+      desserte: lg.desserte,
+      ordre: lg.ordre
+    })) : [];
+    originalGaresTraceesRef.current = initialGares;
+  };
+
+  const closeLigneModal = () => {
+    setShowLigneModal(false);
+    setEditingLigne(null);
+    originalGaresTraceesRef.current = null;
+  };
+
+  const addGareTracee = useCallback(() => {
+    setGaresTracees(prev => ([...prev, { id: `new-${Date.now()}`, gare_id: '', gare_nom: '', desserte: 'tous', ordre: prev.length + 1 }]));
+  }, []);
+
+  const updateGareTraceeField = useCallback((index, field, value) => {
+    setGaresTracees(prev => {
+      const copy = [...prev];
+      copy[index] = { ...copy[index], [field]: value };
+      return copy;
+    });
+  }, []);
+
+  const removeGareTracee = useCallback((index) => {
+    setGaresTracees(prev => {
+      const filtered = prev.filter((_, i) => i !== index);
+      return filtered.map((g, i) => ({ ...g, ordre: i + 1 }));
+    });
+  }, []);
+
+  const handleSaveLigne = async () => {
+    if (!editingLigne && !canCreateLignes) return setFormError("Vous n'avez pas les droits pour créer une ligne.");
+    if (editingLigne && !canUpdateLignes) return setFormError("Vous n'avez pas les droits pour modifier une ligne.");
+    setFormError('');
+    if (!ligneNom) return setFormError('Le nom de la ligne est requis.');
+    if (!ligneDepartId || !ligneArriveeId) return setFormError('Les gares de départ et d\'arrivée sont requises.');
+
+    setSaving(true);
+    const payload = {
+      nom: ligneNom,
+      code: ligneCode || null,
+      region: ligneRegion || null,
+      gare_depart_id: ligneDepartId,
+      gare_arrivee_id: ligneArriveeId,
+      actif: true
+    };
+
+    try {
+      let res;
+      if (editingLigne && editingLigne.id) {
+        res = await updateLigne(editingLigne.id, payload, garesTracees);
+      } else {
+        res = await createLigne(payload, garesTracees);
+      }
+
+      if (res?.error) {
+        setFormError(res.error.message || 'Erreur lors de la sauvegarde de la ligne');
+        setSaving(false);
+        return;
+      }
+
+      await loadData();
+      setSaving(false);
+      closeLigneModal();
+    } catch (err) {
+      console.error(err);
+      setFormError('Erreur inattendue lors de la sauvegarde');
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteLigne = async (id) => {
+    if (!canDeleteLignes) {
+      alert("Vous n'avez pas les droits pour supprimer une ligne.");
+      return;
+    }
+    if (!id) return;
+    if (!window.confirm('Êtes-vous sûr de vouloir supprimer cette ligne ?')) return;
+
+    setSaving(true);
+    const { error: delErr } = await deleteLigne(id);
+    if (delErr) {
+      alert('Erreur lors de la suppression: ' + (delErr.message || 'Erreur'));
+    }
+    await loadData();
+    setSaving(false);
+  };
+
+  // ============================================================================
+  // GESTION DES SERVICES ANNUELS
+  // ============================================================================
+
+  const openCreateServiceModal = () => {
+    if (!canCreateServices) {
+      alert("Vous n'avez pas les droits pour créer un service annuel.");
+      return;
+    }
+    setEditingService(null);
+    setServiceNom('');
+    setServiceCode('');
+    setServiceDateDebut('');
+    setServiceDateFin('');
+    setServiceDescription('');
+    setFormError('');
+    setShowServiceModal(true);
+  };
+
+  const openEditServiceModal = (serv) => {
+    if (!canUpdateServices) {
+      alert("Vous n'avez pas les droits pour modifier un service annuel.");
+      return;
+    }
+    if (!serv) return;
+    setEditingService(serv);
+    setServiceNom(serv.nom || '');
+    setServiceCode(serv.code || '');
+    setServiceDateDebut(serv.date_debut ? serv.date_debut.split('T')[0] : '');
+    setServiceDateFin(serv.date_fin ? serv.date_fin.split('T')[0] : '');
+    setServiceDescription(serv.description || '');
+    setFormError('');
+    setShowServiceModal(true);
+  };
+
+  const closeServiceModal = () => {
+    setShowServiceModal(false);
+    setEditingService(null);
+  };
+
+  const handleSaveService = async () => {
+    if (!editingService && !canCreateServices) return setFormError("Vous n'avez pas les droits pour créer un service annuel.");
+    if (editingService && !canUpdateServices) return setFormError("Vous n'avez pas les droits pour modifier un service annuel.");
+    setFormError('');
+    if (!serviceNom) return setFormError('Le nom du service annuel est requis.');
+    if (!serviceDateDebut || !serviceDateFin) return setFormError('Les dates de début et fin sont requises.');
+
+    setSaving(true);
+    const payload = {
+      nom: serviceNom,
+      code: serviceCode || null,
+      date_debut: serviceDateDebut,
+      date_fin: serviceDateFin,
+      description: serviceDescription || null,
+      actif: true
+    };
+
+    try {
+      let res;
+      if (editingService && editingService.id) {
+        res = await updateServiceAnnuel(editingService.id, payload);
+      } else {
+        res = await createServiceAnnuel(payload);
+      }
+
+      if (res?.error) {
+        setFormError(res.error.message || 'Erreur lors de la sauvegarde du service annuel');
+        setSaving(false);
+        return;
+      }
+
+      await loadData();
+      setSaving(false);
+      closeServiceModal();
+    } catch (err) {
+      console.error(err);
+      setFormError('Erreur inattendue lors de la sauvegarde');
+      setSaving(false);
+    }
+  };
+
+  const handleDeleteService = async (id) => {
+    if (!canDeleteServices) {
+      alert("Vous n'avez pas les droits pour supprimer un service annuel.");
+      return;
+    }
+    if (!id) return;
+    if (!window.confirm('Êtes-vous sûr de vouloir supprimer ce service annuel ?')) return;
+
+    setSaving(true);
+    const { error: delErr } = await deleteServiceAnnuel(id);
+    if (delErr) {
+      alert('Erreur lors de la suppression: ' + (delErr.message || 'Erreur'));
+    }
+    await loadData();
+    setSaving(false);
+  };
+
+  // ============================================================================
+  // GESTION DE L'ATTRIBUTION DES QUAIS
+  // ============================================================================
+
+  const getFilteredDesservies = (horaire) => {
+    const normalized = normalizeHoraireDesservies(horaire);
+    const depart = normalized.depart;
+    const arrivee = normalized.arrivee;
+    const sameGare = (a, b) => {
+      if (!a || !b) return false;
+      const aId = a.gare_id || a.id || null;
+      const bId = b.gare_id || b.id || null;
+      if (aId && bId && String(aId) === String(bId)) return true;
+      const aNom = String(a.gare_nom || a.nom || '').trim().toLowerCase();
+      const bNom = String(b.gare_nom || b.nom || '').trim().toLowerCase();
+      return aNom && bNom && aNom === bNom;
+    };
+    const isSameStop = (row, ref) => {
+      if (!row || !ref) return false;
+      return sameGare(row, ref)
+        && String(row.heure_arrivee || '') === String(ref.heure_arrivee || '')
+        && String(row.heure_depart || '') === String(ref.heure_depart || '');
+    };
+    const seen = new Set();
+    return normalized.intermediaires.filter(row => {
+      if (isSameStop(row, depart) || isSameStop(row, arrivee)) return false;
+      const key = `${row.gare_id || row.gare_nom || ''}|${row.heure_arrivee || ''}|${row.heure_depart || ''}|${row.ordre ?? ''}`;
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return true;
+    });
+  };
+
+  const getDesservieKey = (gare, index) => `gare_${gare?.ordre ?? index + 1}`;
+
+  const openQuaiModal = (horaire) => {
+    setQuaiSelectedHoraire(horaire);
+    const assignments = {};
+    const normalizedDesservies = normalizeHoraireDesservies(horaire);
+
+    // Gare de départ
+    const storedDepart = quaiAssignments[`${horaire.id}_depart`] || normalizedDesservies.depart?.quai || horaire.quai_depart || '';
+    if (storedDepart) {
+      const gareDepart = garesList.find(g => String(g.id) === String(horaire.gare_depart_id) || g.nom === horaire.gare_depart_nom);
+      assignments['depart'] = resolveQuaiIdFromNom(gareDepart, storedDepart);
+    } else {
+      assignments['depart'] = '';
+    }
+
+    // Gares desservies
+    const filteredDesservies = normalizedDesservies.intermediaires;
+    filteredDesservies.forEach((g, idx) => {
+      const key = getDesservieKey(g, idx);
+      const stored = quaiAssignments[`${horaire.id}_${key}`] || g.quai || '';
+      if (stored) {
+        const gareObj = garesList.find(gg => String(gg.id) === String(g.gare_id) || gg.nom === g.gare_nom);
+        assignments[key] = resolveQuaiIdFromNom(gareObj, stored);
+      } else {
+        assignments[key] = '';
+      }
+    });
+
+    // Gare d'arrivée
+    const storedArr = quaiAssignments[`${horaire.id}_arrivee`] || normalizedDesservies.arrivee?.quai || horaire.quai_arrivee || '';
+    if (storedArr) {
+      const gareArr = garesList.find(g => String(g.id) === String(horaire.gare_arrivee_id) || g.nom === horaire.gare_arrivee_nom);
+      assignments['arrivee'] = resolveQuaiIdFromNom(gareArr, storedArr);
+    } else {
+      assignments['arrivee'] = '';
+    }
+    setQuaiAssignments(prev => ({ ...prev, [`_modal_${horaire.id}`]: assignments }));
+    setShowQuaiModal(true);
+  };
+
+  const closeQuaiModal = () => {
+    setShowQuaiModal(false);
+    setQuaiSelectedHoraire(null);
+  };
+
+  const handleQuaiChange = (key, value) => {
+    if (!quaiSelectedHoraire) return;
+    setQuaiAssignments(prev => ({
+      ...prev,
+      [`_modal_${quaiSelectedHoraire.id}`]: {
+        ...(prev[`_modal_${quaiSelectedHoraire.id}`] || {}),
+        [key]: value
+      }
+    }));
+  };
+
+  const handleSaveQuais = async (horaireIdFromModal, payloadFromModal) => {
+    const targetHoraireId = horaireIdFromModal || (quaiSelectedHoraire ? quaiSelectedHoraire.id : null);
+    if (!targetHoraireId) return;
+
+    setQuaiSaving(true);
+    try {
+      let quaisParOrdre = {};
+
+      if (payloadFromModal) {
+        quaisParOrdre = payloadFromModal;
+      } else if (quaiSelectedHoraire) {
+        const modalAssignments = quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {};
+        const gares = normalizeHoraireDesservies(quaiSelectedHoraire).intermediaires;
+        gares.forEach((g, idx) => {
+          const key = getDesservieKey(g, idx);
+          const quaiId = modalAssignments[key] || '';
+          const gareObj = garesList.find(gg => String(gg.id) === String(g.gare_id) || gg.nom === g.gare_nom);
+          const quaiObj = gareObj?.gare_quais?.find(q => String(q.id) === String(quaiId));
+          quaisParOrdre[g.ordre ?? idx + 1] = quaiObj ? quaiObj.nom : (quaiId || null);
+        });
+
+        if (Object.prototype.hasOwnProperty.call(modalAssignments, 'depart')) {
+          const departId = modalAssignments['depart'] || '';
+          const gareDepartObj = garesList.find(gg => String(gg.id) === String(quaiSelectedHoraire.gare_depart_id) || gg.nom === quaiSelectedHoraire.gare_depart_nom);
+          const departQuaiObj = gareDepartObj?.gare_quais?.find(q => String(q.id) === String(departId));
+          quaisParOrdre['depart'] = departQuaiObj ? departQuaiObj.nom : (departId || null);
+        }
+        if (Object.prototype.hasOwnProperty.call(modalAssignments, 'arrivee')) {
+          const arriveeId = modalAssignments['arrivee'] || '';
+          const gareArrObj = garesList.find(gg => String(gg.id) === String(quaiSelectedHoraire.gare_arrivee_id) || gg.nom === quaiSelectedHoraire.gare_arrivee_nom);
+          const arriveeQuaiObj = gareArrObj?.gare_quais?.find(q => String(q.id) === String(arriveeId));
+          quaisParOrdre['arrivee'] = arriveeQuaiObj ? arriveeQuaiObj.nom : (arriveeId || null);
+        }
+      }
+
+      const { error: saveErr } = await updateQuaisHoraire(targetHoraireId, quaisParOrdre);
+      if (saveErr) {
+        alert('Erreur lors de la sauvegarde des quais: ' + (saveErr.message || 'Erreur'));
+        setQuaiSaving(false);
+        return;
+      }
+
+      await loadData();
+      if (quaiSelectedHoraire) {
+        closeQuaiModal();
+      }
+    } catch (err) {
+      console.error('Erreur sauvegarde quais:', err);
+      alert('Erreur lors de la sauvegarde des quais');
+    }
+    setQuaiSaving(false);
+  };
+
+  const handleSetDefaultQuais = () => {
+    if (!quaiSelectedHoraire) return;
+    if (!window.confirm('Définir les quais actuels comme quais par défaut pour cet horaire ?')) return;
+    const modalAssignments = quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {};
+    const defaults = { ...quaiAssignments };
+    Object.entries(modalAssignments).forEach(([key, value]) => {
+      defaults[`default_${quaiSelectedHoraire.id}_${key}`] = value;
+    });
+    setQuaiAssignments(defaults);
+    alert('Quais par défaut enregistrés.');
+  };
+
+  const getQuaisForGare = (gareId, gareNom) => {
+    const gareById = gareId ? garesList.find(g => String(g.id) === String(gareId)) : null;
+    const gare = gareById || garesList.find(g => g.nom === gareNom);
+    if (!gare) return [];
+    return gare.gare_quais || [];
+  };
+
+  // ============================================================================
+  // RENDERING HORAIRES TAB
+  // ============================================================================
+
   const renderHoraireRow = (h, i, isNested = false) => (
-      <tr
-          key={h?.id ?? i}
-          style={{
-            cursor: selectionMode ? 'pointer' : 'default',
-            background: selectionMode && selectedHoraires.includes(h?.id) ? '#e0f2fe' : (isNested ? '#f9fafb' : 'transparent')
-          }}
-          onClick={() => selectionMode && h?.id && toggleSelectHoraire(h.id)}
-      >
-        {selectionMode && (
-            <td data-label="Sélection" onClick={e => e.stopPropagation()}>
-              <input
-                  type="checkbox"
-                  checked={selectedHoraires.includes(h?.id)}
-                  onChange={() => h?.id && toggleSelectHoraire(h.id)}
-                  style={{ width: 18, height: 18, cursor: 'pointer' }}
-              />
-            </td>
-        )}
-        <td data-label="N° Train"><strong>{h?.numero_train || '-'}</strong></td>
-        <td data-label="Type">{h?.type_train || '-'}</td>
-        <td data-label="Départ"><div>{h?.gare_depart_nom || '-'}</div><small style={{ color: '#666' }}>{formatHeure(h?.heure_depart)}</small></td>
-        <td data-label="Arrivée"><div>{h?.gare_arrivee_nom || '-'}</div><small style={{ color: '#666' }}>{formatHeure(h?.heure_arrivee)}</small></td>
-        <td data-label="Jours"><small>{getJoursCirculation(h).join(', ') || 'Aucun'}</small></td>
-        <td data-label="Matériel">{h?.materiel_roulant ? <small>{h.materiel_roulant.nom || h.materiel_roulant.nom_technique}</small> : '-'}</td>
-        <td data-label="Substitution">{h?.est_substitution ? <span style={{ color: '#e74c3c', fontWeight: 600 }}>Oui</span> : '-'}</td>
-        <td data-label="Actions" className="horaires-row-actions" onClick={e => e.stopPropagation()}>
-          <wcs-button mode="stroked" onClick={() => openEditModal(h)} disabled={!canUpdateHoraires}>Modifier</wcs-button>
-          <wcs-button mode="stroked" className="wcs-danger" onClick={() => handleDelete(h?.id)} disabled={!canDeleteHoraires}>Supprimer</wcs-button>
+    <tr
+      key={h?.id ?? i}
+      style={{
+        cursor: selectionMode ? 'pointer' : 'default',
+        background: selectionMode && selectedHoraires.includes(h?.id) ? '#e0f2fe' : (isNested ? '#f8fafc' : 'transparent')
+      }}
+      onClick={() => selectionMode && h?.id && toggleSelectHoraire(h.id)}
+    >
+      {selectionMode && (
+        <td onClick={e => e.stopPropagation()} style={{ width: 44 }}>
+          <input
+            type="checkbox"
+            checked={selectedHoraires.includes(h?.id)}
+            onChange={() => h?.id && toggleSelectHoraire(h.id)}
+            style={{ width: 18, height: 18, cursor: 'pointer', accentColor: '#0088ce' }}
+          />
         </td>
-      </tr>
+      )}
+      <td>
+        <span className="train-num-badge">{h?.numero_train || '-'}</span>
+      </td>
+      <td>
+        <span className="train-type-pill">{h?.type_train || '-'}</span>
+      </td>
+      <td>
+        <div style={{ fontWeight: 600 }}>{h?.gare_depart_nom || '-'}</div>
+        <div className="time-highlight">{formatHeure(h?.heure_depart)}</div>
+      </td>
+      <td>
+        <div style={{ fontWeight: 600 }}>{h?.gare_arrivee_nom || '-'}</div>
+        <div className="time-highlight">{formatHeure(h?.heure_arrivee)}</div>
+      </td>
+      <td>
+        <span className="circ-days-badge">{getJoursCirculation(h).join(', ') || 'Aucun'}</span>
+      </td>
+      <td>
+        {h?.materiel_roulant ? (
+          <span style={{ fontSize: 12.5, color: '#334155' }}>
+            {h.materiel_roulant.nom || h.materiel_roulant.nom_technique}
+          </span>
+        ) : '-'}
+      </td>
+      <td>
+        {h?.est_substitution ? (
+          <span className="subst-tag">
+            <wcs-mat-icon icon="warning" size="s" />
+            Substitution
+          </span>
+        ) : (
+          <span style={{ color: '#94a3b8' }}>-</span>
+        )}
+      </td>
+      <td onClick={e => e.stopPropagation()}>
+        <div className="horaires-row-actions">
+          <wcs-button mode="stroked" size="s" onClick={() => openEditModal(h)} disabled={!canUpdateHoraires}>
+            <wcs-mat-icon icon="edit" size="s" /> Modifier
+          </wcs-button>
+          <wcs-button mode="stroked" size="s" className="wcs-danger" onClick={() => handleDelete(h?.id)} disabled={!canDeleteHoraires}>
+            <wcs-mat-icon icon="delete" size="s" /> Supprimer
+          </wcs-button>
+        </div>
+      </td>
+    </tr>
   );
 
   const renderListView = () => {
@@ -1125,7 +1001,6 @@ export default function Horaires() {
     });
     const numeroTrains = Object.keys(groupedHoraires);
 
-    // Pagination: calculer les pages à afficher (on paginate par numéro de train)
     const totalPages = Math.max(1, Math.ceil(numeroTrains.length / PAGE_SIZE));
     const safePage = Math.min(Math.max(1, currentPage), totalPages);
     const startIndex = (safePage - 1) * PAGE_SIZE;
@@ -1135,51 +1010,42 @@ export default function Horaires() {
     const colspan = selectionMode ? 9 : 8;
 
     return (
-        <>
-          <div className="table-container">
-            <table className="wcs-table horaires-table-full horaires-responsive-table horaires-responsive-table-horaires" style={{ width: '100%' }}>
-              <thead>
+      <>
+        <div className="table-container">
+          <table className="wcs-table">
+            <thead>
               <tr>
-                {selectionMode && <th style={{ width: 40 }}></th>}
+                {selectionMode && <th style={{ width: 44 }}></th>}
                 <th onClick={() => handleSort('numero_train')} style={{ cursor: 'pointer', userSelect: 'none' }}>
-                  N° Train
-                  {renderSortIcon('numero_train')}
+                  N° Train {renderSortIcon('numero_train')}
                 </th>
                 <th onClick={() => handleSort('type_train')} style={{ cursor: 'pointer', userSelect: 'none' }}>
-                  Type
-                  {renderSortIcon('type_train')}
+                  Type {renderSortIcon('type_train')}
                 </th>
                 <th onClick={() => handleSort('gare_depart')} style={{ cursor: 'pointer', userSelect: 'none' }}>
-                  Départ
-                  {renderSortIcon('gare_depart')}
+                  Départ {renderSortIcon('gare_depart')}
                 </th>
                 <th onClick={() => handleSort('gare_arrivee')} style={{ cursor: 'pointer', userSelect: 'none' }}>
-                  Arrivée
-                  {renderSortIcon('gare_arrivee')}
+                  Arrivée {renderSortIcon('gare_arrivee')}
                 </th>
                 <th onClick={() => handleSort('jours')} style={{ cursor: 'pointer', userSelect: 'none' }}>
-                  Jours
-                  {renderSortIcon('jours')}
+                  Jours {renderSortIcon('jours')}
                 </th>
                 <th onClick={() => handleSort('materiel')} style={{ cursor: 'pointer', userSelect: 'none' }}>
-                  Matériel
-                  {renderSortIcon('materiel')}
+                  Matériel {renderSortIcon('materiel')}
                 </th>
                 <th onClick={() => handleSort('substitution')} style={{ cursor: 'pointer', userSelect: 'none' }}>
-                  Substitution
-                  {renderSortIcon('substitution')}
+                  Substitution {renderSortIcon('substitution')}
                 </th>
                 <th>Actions</th>
               </tr>
-              </thead>
-              <tbody>
+            </thead>
+            <tbody>
               {visibleNumeroTrains.map(numTrain => {
                 const group = groupedHoraires[numTrain];
-
                 if (!group || group.length === 0) return null;
 
                 if (group.length === 1) {
-                  // Horaire unique - affichage normal
                   return (
                     <React.Fragment key={`group-${numTrain}`}>
                       {renderHoraireRow(group[0], numTrain)}
@@ -1187,33 +1053,36 @@ export default function Horaires() {
                   );
                 }
 
-                // Plusieurs horaires avec le même numéro - accordion dans une seule ligne
+                // Accordion pour trains multiples
                 return (
                   <React.Fragment key={`group-${numTrain}`}>
-                    <tr key={`grp-${numTrain}`}>
-                      <td colSpan={colspan} style={{ padding: 0, borderBottom: '1px solid #e5e7eb' }}>
-                        <details style={{ padding: '8px 12px' }}>
-                          <summary style={{ cursor: 'pointer', fontWeight: 600, padding: '6px 0', listStyle: 'none', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                            <wcs-mat-icon icon="expand_more" size="s" style={{ transition: 'transform 0.2s' }} />
-                            {`${numTrain} (${group.length} horaires)`}
+                    <tr>
+                      <td colSpan={colspan} style={{ padding: 0, borderBottom: '1px solid #e2e8f0' }}>
+                        <details style={{ margin: '4px 8px' }}>
+                          <summary>
+                            <wcs-mat-icon icon="expand_more" size="s" />
+                            <span style={{ fontWeight: 700 }}>{numTrain}</span>
+                            <span style={{ fontSize: 12, color: '#64748b', fontWeight: 500 }}>
+                              ({group.length} sillons programmés)
+                            </span>
                           </summary>
-                          <div style={{ paddingTop: 8, paddingBottom: 12 }}>
-                            <table className="wcs-table horaires-table-full horaires-responsive-table horaires-responsive-table-horaires" style={{ width: '100%', borderCollapse: 'separate' }}>
+                          <div style={{ padding: '8px 12px 14px' }}>
+                            <table className="wcs-table" style={{ width: '100%', background: '#ffffff', borderRadius: 8, overflow: 'hidden' }}>
                               <thead>
-                              <tr>
-                                {selectionMode && <th style={{ width: 40 }}></th>}
-                                <th>N° Train</th>
-                                <th>Type</th>
-                                <th>Départ</th>
-                                <th>Arrivée</th>
-                                <th>Jours</th>
-                                <th>Matériel</th>
-                                <th>Substitution</th>
-                                <th>Actions</th>
-                              </tr>
+                                <tr>
+                                  {selectionMode && <th style={{ width: 44 }}></th>}
+                                  <th>N° Train</th>
+                                  <th>Type</th>
+                                  <th>Départ</th>
+                                  <th>Arrivée</th>
+                                  <th>Jours</th>
+                                  <th>Matériel</th>
+                                  <th>Substitution</th>
+                                  <th>Actions</th>
+                                </tr>
                               </thead>
                               <tbody>
-                              {group.map((h, i) => renderHoraireRow(h, `${numTrain}-${i}`, true))}
+                                {group.map((h, i) => renderHoraireRow(h, `${numTrain}-${i}`, true))}
                               </tbody>
                             </table>
                           </div>
@@ -1223,1375 +1092,1447 @@ export default function Horaires() {
                   </React.Fragment>
                 );
               })}
-              </tbody>
-            </table>
+            </tbody>
+          </table>
+        </div>
 
-            {/* Pagination WCS SNCF - 10 numéros de train par page */}
-            <div style={{ display: 'flex', justifyContent: 'center', marginTop: 12, gap: 8, alignItems: 'center' }}>
-              {/* Utilisation de wcs-pagination si disponible */}
-              <wcs-pagination
-                  value={safePage}
-                  total={totalPages}
-                  onWcsChange={(e) => {
-                    const v = e?.detail?.value ?? e?.detail?.page ?? null;
-                    if (v) setCurrentPage(Number(v));
-                  }}
-              />
-
-              {/* Champ d'entrée de page directe */}
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <input
-                    type="number"
-                    min={1}
-                    max={totalPages}
-                    value={safePage}
-                    onChange={(e) => {
-                      const v = Number(e.target.value || 1);
-                      if (!isNaN(v)) setCurrentPage(Math.min(Math.max(1, v), totalPages));
-                    }}
-                    style={{ width: 80, padding: '6px 8px', border: '1px solid #e5e7eb', borderRadius: 6 }}
-                />
-                <span style={{ color: '#666' }}> / {totalPages}</span>
-              </div>
-
-              {/* Fallback controls (Prev / Next) visibles si wcs-pagination non reconnu */}
-              <div style={{ display: 'flex', gap: 8 }}>
-                <wcs-button mode="stroked" disabled={safePage <= 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>
-                  <wcs-mat-icon icon="chevron_left" size="s" />
-                </wcs-button>
-                <div style={{ display: 'flex', alignItems: 'center', padding: '6px 10px', border: '1px solid #e5e7eb', borderRadius: 6, background: '#fff' }}>
-                  Page {safePage} / {totalPages}
-                </div>
-                <wcs-button mode="stroked" disabled={safePage >= totalPages} onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}>
-                  <wcs-mat-icon icon="chevron_right" size="s" />
-                </wcs-button>
-              </div>
-            </div>
-          </div>{/* fin table-container */}
-        </>
+        {/* Pagination */}
+        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 16, gap: 10, alignItems: 'center' }}>
+          <wcs-button mode="stroked" size="s" disabled={safePage <= 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>
+            <wcs-mat-icon icon="chevron_left" size="s" />
+          </wcs-button>
+          <div style={{ fontSize: 13, color: '#475569', fontWeight: 600 }}>
+            Page {safePage} sur {totalPages} ({numeroTrains.length} trains)
+          </div>
+          <wcs-button mode="stroked" size="s" disabled={safePage >= totalPages} onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}>
+            <wcs-mat-icon icon="chevron_right" size="s" />
+          </wcs-button>
+        </div>
+      </>
     );
   };
 
-  // Remplacer renderCardsView pour paginer aussi la vue cartes
   const renderCardsView = () => {
-    // Pagination pour les cartes (on pagine par horaire individuel) sur la liste filtrée
     const totalPagesCards = Math.max(1, Math.ceil(sortedHoraires.length / PAGE_SIZE));
     const safePageCards = Math.min(Math.max(1, currentPage), totalPagesCards);
     const startCards = (safePageCards - 1) * PAGE_SIZE;
     const endCards = startCards + PAGE_SIZE;
     const visibleHoraires = sortedHoraires.slice(startCards, endCards);
 
-    const renderHoraireCard = (h, i) => (
-      <div
-        key={h?.id ?? i}
-        style={{
-          border: selectionMode && selectedHoraires.includes(h?.id) ? '2px solid #0088ce' : '1px solid #e0e0e0',
-          borderRadius: 8,
-          padding: 16,
-          background: selectionMode && selectedHoraires.includes(h?.id) ? '#e0f2fe' : (h?.est_substitution ? '#fff5f5' : '#fff'),
-          cursor: selectionMode ? 'pointer' : 'default',
-          transition: 'all 0.2s ease'
-        }}
-        onClick={() => selectionMode && h?.id && toggleSelectHoraire(h.id)}
-      >
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
-            {selectionMode && (
-              <input
-                type="checkbox"
-                checked={selectedHoraires.includes(h?.id)}
-                onChange={() => h?.id && toggleSelectHoraire(h.id)}
-                onClick={e => e.stopPropagation()}
-                style={{ width: 20, height: 20, cursor: 'pointer', marginTop: 4 }}
-              />
-            )}
-            <div>
-              <div style={{ fontSize: 18, fontWeight: 600 }}>{h?.numero_train || '-'}</div>
-              <div style={{ fontSize: 12, color: '#666' }}>{h?.type_train || '-'}</div>
-            </div>
-          </div>
-          {h?.est_substitution && <span style={{ background: '#e74c3c', color: '#fff', padding: '2px 8px', borderRadius: 4, height: 'fit-content' }}>Substitution</span>}
-        </div>
-
-        <div style={{ marginTop: 12 }}>
-          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <div><strong>{h?.gare_depart_nom || '-'}</strong><div style={{ color: '#0074d9' }}>{formatHeure(h?.heure_depart)}</div></div>
-            <div><strong>{h?.gare_arrivee_nom || '-'}</strong><div style={{ color: '#0074d9' }}>{formatHeure(h?.heure_arrivee)}</div></div>
-          </div>
-          <div style={{ marginTop: 8, color: '#666' }}>{h?.gares_desservies?.length ? `${h.gares_desservies.length} arrêt(s)` : 'Direct'}</div>
-        </div>
-
-        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12 }} onClick={e => e.stopPropagation()}>
-          <wcs-button mode="stroked" onClick={() => openEditModal(h)} disabled={!canUpdateHoraires}>Modifier</wcs-button>
-          <wcs-button mode="stroked" className="wcs-danger" onClick={() => handleDelete(h?.id)} disabled={!canDeleteHoraires}>Supprimer</wcs-button>
-        </div>
-      </div>
-    );
-
     return (
-        <>
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16 }}>
-            {visibleHoraires.map(renderHoraireCard)}
-          </div>
+      <>
+        <div className="horaires-cards-grid">
+          {visibleHoraires.map((h, idx) => {
+            const isSelected = selectedHoraires.includes(h.id);
+            return (
+              <div
+                key={h.id || idx}
+                className={`horaires-card-item ${isSelected ? 'selected' : ''}`}
+                onClick={() => selectionMode && h?.id && toggleSelectHoraire(h.id)}
+                style={{ cursor: selectionMode ? 'pointer' : 'default' }}
+              >
+                <div className="horaires-card-header">
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                    {selectionMode && (
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={() => h?.id && toggleSelectHoraire(h.id)}
+                        onClick={e => e.stopPropagation()}
+                        style={{ width: 18, height: 18, cursor: 'pointer', accentColor: '#0088ce' }}
+                      />
+                    )}
+                    <div>
+                      <span className="train-num-badge" style={{ fontSize: 16 }}>{h.numero_train || '-'}</span>
+                      <div style={{ marginTop: 2 }}>
+                        <span className="train-type-pill">{h.type_train || '-'}</span>
+                      </div>
+                    </div>
+                  </div>
+                  {h.est_substitution && (
+                    <span className="subst-tag">Substitution</span>
+                  )}
+                </div>
 
-          {/* Pagination cartes */}
-          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 12, gap: 8, alignItems: 'center' }}>
-            <wcs-pagination
-                value={safePageCards}
-                total={totalPagesCards}
-                onWcsChange={(e) => {
-                  const v = e?.detail?.value ?? e?.detail?.page ?? null;
-                  if (v) setCurrentPage(Number(v));
-                }}
-            />
+                <div className="horaires-card-route">
+                  <div className="horaires-card-route-col">
+                    <span style={{ fontWeight: 700, color: '#0f172a' }}>{h.gare_depart_nom || '-'}</span>
+                    <span className="time-highlight">{formatHeure(h.heure_depart)}</span>
+                  </div>
+                  <wcs-mat-icon icon="arrow_forward" size="s" style={{ color: '#94a3b8' }} />
+                  <div className="horaires-card-route-col" style={{ textAlign: 'right' }}>
+                    <span style={{ fontWeight: 700, color: '#0f172a' }}>{h.gare_arrivee_nom || '-'}</span>
+                    <span className="time-highlight">{formatHeure(h.heure_arrivee)}</span>
+                  </div>
+                </div>
 
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <input
-                  type="number"
-                  min={1}
-                  max={totalPagesCards}
-                  value={safePageCards}
-                  onChange={(e) => {
-                    const v = Number(e.target.value || 1);
-                    if (!isNaN(v)) setCurrentPage(Math.min(Math.max(1, v), totalPagesCards));
-                  }}
-                  style={{ width: 80, padding: '6px 8px', border: '1px solid #e5e7eb', borderRadius: 6 }}
-              />
-              <span style={{ color: '#666' }}> / {totalPagesCards}</span>
-            </div>
+                <div style={{ fontSize: 12.5, color: '#64748b', marginBottom: 12 }}>
+                  <div><strong>Jours :</strong> {getJoursCirculation(h).join(', ') || 'Aucun'}</div>
+                  {h.materiel_roulant && (
+                    <div style={{ marginTop: 2 }}>
+                      <strong>Matériel :</strong> {h.materiel_roulant.nom || h.materiel_roulant.nom_technique}
+                    </div>
+                  )}
+                </div>
 
-            <div style={{ display: 'flex', gap: 8 }}>
-              <wcs-button mode="stroked" disabled={safePageCards <= 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>
-                <wcs-mat-icon icon="chevron_left" size="s" />
-              </wcs-button>
-              <div style={{ display: 'flex', alignItems: 'center', padding: '6px 10px', border: '1px solid #e5e7eb', borderRadius: 6, background: '#fff' }}>
-                Page {safePageCards} / {totalPagesCards}
+                <div className="horaires-card-footer" onClick={e => e.stopPropagation()}>
+                  <wcs-button mode="stroked" size="s" onClick={() => openEditModal(h)} disabled={!canUpdateHoraires}>
+                    <wcs-mat-icon icon="edit" size="s" /> Modifier
+                  </wcs-button>
+                  <wcs-button mode="stroked" size="s" className="wcs-danger" onClick={() => handleDelete(h.id)} disabled={!canDeleteHoraires}>
+                    <wcs-mat-icon icon="delete" size="s" /> Supprimer
+                  </wcs-button>
+                </div>
               </div>
-              <wcs-button mode="stroked" disabled={safePageCards >= totalPagesCards} onClick={() => setCurrentPage(p => Math.min(totalPagesCards, p + 1))}>
-                <wcs-mat-icon icon="chevron_right" size="s" />
-              </wcs-button>
-            </div>
+            );
+          })}
+        </div>
+
+        {/* Pagination Cards */}
+        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 16, gap: 10, alignItems: 'center' }}>
+          <wcs-button mode="stroked" size="s" disabled={safePageCards <= 1} onClick={() => setCurrentPage(p => Math.max(1, p - 1))}>
+            <wcs-mat-icon icon="chevron_left" size="s" />
+          </wcs-button>
+          <div style={{ fontSize: 13, color: '#475569', fontWeight: 600 }}>
+            Page {safePageCards} sur {totalPagesCards} ({sortedHoraires.length} horaires)
           </div>
-        </>
+          <wcs-button mode="stroked" size="s" disabled={safePageCards >= totalPagesCards} onClick={() => setCurrentPage(p => Math.min(totalPagesCards, p + 1))}>
+            <wcs-mat-icon icon="chevron_right" size="s" />
+          </wcs-button>
+        </div>
+      </>
     );
   };
 
-  return (
-      <div className="sncf-groupe horaires-page">
-        <style>{`
-        details[open] summary wcs-mat-icon {
-          transform: rotate(180deg);
-        }
-        details summary::-webkit-details-marker {
-          display: none;
-        }
-      `}</style>
-        <div className="panel-layout">
-          <div className="panel-content horaires-page-content">
-            <header className="horaires-page-header">
-              <div>
-                <p className="horaires-page-kicker">Exploitation</p>
-                <h2>Gestion des horaires</h2>
-                <p className="horaires-page-description">Administrez les sillons, lignes, services annuels et attribution des quais.</p>
-              </div>
-            </header>
-
-            {error && <wcs-alert className="horaires-alert" intent="error" show><span slot="title">Erreur</span><span slot="subtitle">{error}</span></wcs-alert>}
-
-            {/* Tabs principaux */}
-            <div className="horaires-main-tabs">
-              <wcs-tabs aria-label="Tabs par défaut" align="start" value={mainTab} onWcsChange={e => setMainTab(e.detail)}>
-                <wcs-tab header="Horaires (Sillons)" item-key="horaires">
-                    {renderHorairesTab()}
-                </wcs-tab>
-                <wcs-tab header="Lignes" item-key="lignes">
-                    {renderLignesTab()}
-                </wcs-tab>
-                <wcs-tab header="Services Annuels" item-key="services">
-                    {renderServicesTab()}
-                </wcs-tab>
-                <wcs-tab header="Attribution des quais" item-key="quais">
-                    {renderQuaisTab()}
-                </wcs-tab>
-            </wcs-tabs>
-            </div>
-
-
-          </div>
-        </div>
-      </div>
-  );
-
-  function renderHorairesTab() {
-    // Calculer le nombre d'horaires par ligne
+  const renderHorairesTab = () => {
     const countByLigne = {};
     (horaires || []).forEach(h => {
       const id = h?.ligne_id || h?.ligne;
       if (id) countByLigne[id] = (countByLigne[id] || 0) + 1;
     });
 
+    const activeLigneObj = selectedLigneFilter && selectedLigneFilter !== '__none__'
+      ? (lignes || []).find(x => String(x?.id) === String(selectedLigneFilter))
+      : null;
+
     return (
-        <div className="horaires-workspace">
+      <div className="horaires-workspace">
+        {/* Panneau latéral Lignes */}
+        <div
+          className="horaires-lines-sidebar"
+          style={{
+            width: lignesPanelOpen ? 260 : 44,
+            minWidth: lignesPanelOpen ? 260 : 44
+          }}
+        >
+          <button
+            className="horaires-lines-toggle-btn"
+            onClick={() => setLignesPanelOpen(p => !p)}
+            title={lignesPanelOpen ? 'Réduire le panneau' : 'Développer le panneau'}
+          >
+            <wcs-mat-icon icon={lignesPanelOpen ? 'chevron_left' : 'chevron_right'} size="s" />
+          </button>
 
-          {/* ── Panneau latéral Lignes ── */}
-          <div style={{
-            width: lignesPanelOpen ? 240 : 40,
-            minWidth: lignesPanelOpen ? 240 : 40,
-            flexShrink: 0,
-            borderRight: '1px solid #e5e7eb',
-            background: '#fafbfc',
-            transition: 'width 0.2s, min-width 0.2s',
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-            position: 'relative'
-          }}>
-            {/* Bouton toggle */}
-            <button
-                onClick={() => setLignesPanelOpen(p => !p)}
-                title={lignesPanelOpen ? 'Réduire le panneau' : 'Développer le panneau'}
-                style={{
-                  position: 'absolute',
-                  top: 8,
-                  right: lignesPanelOpen ? 8 : 4,
-                  zIndex: 2,
-                  background: '#fff',
-                  border: '1px solid #e5e7eb',
-                  borderRadius: 6,
-                  padding: '4px 6px',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  boxShadow: '0 1px 3px rgba(0,0,0,0.08)'
-                }}
-            >
-              <wcs-mat-icon icon={lignesPanelOpen ? 'chevron_left' : 'chevron_right'} size="s" />
-            </button>
+          {lignesPanelOpen && (
+            <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+              <div className="horaires-lines-sidebar-header">
+                <wcs-mat-icon icon="route" size="s" />
+                <span>Lignes du Réseau</span>
+              </div>
 
-            {lignesPanelOpen && (
-                <div style={{ display: 'flex', flexDirection: 'column', height: '100%', paddingTop: 4 }}>
-                  {/* Titre */}
-                  <div style={{ padding: '10px 12px 8px 12px', fontWeight: 700, fontSize: 13, color: '#ffffff', textTransform: 'uppercase', letterSpacing: '0.05em', paddingRight: 40 }}>
-                    Lignes
-                  </div>
-
-                  {/* Liste des lignes */}
-                  <div style={{ overflowY: 'auto', flex: 1 }}>
-                    {/* Item "Toutes les lignes" */}
-                    <button
-                        className={`ligne-item ${selectedLigneFilter === null ? 'is-active' : ''}`}
-                        onClick={() => { setSelectedLigneFilter(null); setCurrentPage(1); }}
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'space-between',
-                          width: '100%',
-                          padding: '9px 12px',
-                          border: 'none',
-                          borderLeft: selectedLigneFilter === null ? '3px solid #0088ce' : '3px solid transparent',
-                          background: selectedLigneFilter === null ? '#e8f4fd' : 'transparent',
-                          cursor: 'pointer',
-                          textAlign: 'left',
-                          transition: 'all 0.15s',
-                          gap: 6
-                        }}
-                        onMouseEnter={e => { if (selectedLigneFilter !== null) e.currentTarget.style.background = '#f3f4f6'; }}
-                        onMouseLeave={e => { if (selectedLigneFilter !== null) e.currentTarget.style.background = 'transparent'; }}
-                    >
-                  <span className="ligne-label" style={{ display: 'flex', alignItems: 'center', gap: 6, fontWeight: selectedLigneFilter === null ? 700 : 400, fontSize: 13, color: selectedLigneFilter === null ? '#0088ce' : '#ffffff', overflow: 'hidden' }}>
-                    <wcs-mat-icon icon="list" size="s" style={{ flexShrink: 0, color: selectedLigneFilter === null ? '#0088ce' : '#feffff' }} />
-                    <span className="ligne-name" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Tous les horaires</span>
-                  </span>
-                      <span className="ligne-count" style={{ background: selectedLigneFilter === null ? '#0088ce' : '#e5e7eb', color: selectedLigneFilter === null ? '#fff' : '#f6f6f6', borderRadius: 10, padding: '1px 7px', fontSize: 11, fontWeight: 600, flexShrink: 0 }}>
-                    {horaires.length}
-                  </span>
-                    </button>
-
-                    {/* Séparateur */}
-                    <div style={{ height: 1, background: '#e5e7eb', margin: '4px 12px' }} />
-
-                    {/* Sans ligne */}
-                    {(() => {
-                      const sansligne = (horaires || []).filter(h => !h?.ligne_id && !h?.ligne);
-                      if (sansligne.length === 0) return null;
-                      return (
-                          <button
-                              className={`ligne-item ${selectedLigneFilter === '__none__' ? 'is-active' : ''}`}
-                              onClick={() => { setSelectedLigneFilter('__none__'); setCurrentPage(1); }}
-                              style={{
-                                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                                width: '100%', padding: '8px 12px', border: 'none',
-                                borderLeft: selectedLigneFilter === '__none__' ? '3px solid #0088ce' : '3px solid transparent',
-                                background: selectedLigneFilter === '__none__' ? '#e8f4fd' : 'transparent',
-                                cursor: 'pointer', textAlign: 'left', transition: 'all 0.15s', gap: 6
-                              }}
-                          >
-                      <span className="ligne-label" style={{ fontSize: 13, color: selectedLigneFilter === '__none__' ? '#0088ce' : '#9ca3af', fontStyle: 'italic', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: selectedLigneFilter === '__none__' ? 700 : 400 }}>
-                        <span className="ligne-name">Sans ligne</span>
-                      </span>
-                            <span className="ligne-count" style={{ background: selectedLigneFilter === '__none__' ? '#0088ce' : '#e5e7eb', color: selectedLigneFilter === '__none__' ? '#fff' : '#6b7280', borderRadius: 10, padding: '1px 7px', fontSize: 11, fontWeight: 600, flexShrink: 0 }}>
-                        {sansligne.length}
-                      </span>
-                          </button>
-                      );
-                    })()}
-
-                    {/* Lignes existantes */}
-                    {(lignes || []).map(l => {
-                      const count = countByLigne[l?.id] || 0;
-                      const isActive = String(selectedLigneFilter) === String(l?.id);
-                      const region = (regionsList || []).find(r => r.id === l?.region);
-                      return (
-                          <button
-                              key={l?.id}
-                              className={`ligne-item ${isActive ? 'is-active' : ''}`}
-                              onClick={() => { setSelectedLigneFilter(l?.id); setCurrentPage(1); }}
-                              style={{
-                                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                                width: '100%', padding: '8px 12px', border: 'none',
-                                borderLeft: isActive ? '3px solid #0088ce' : '3px solid transparent',
-                                background: isActive ? '#e8f4fd' : 'transparent',
-                                cursor: 'pointer', textAlign: 'left', transition: 'all 0.15s', gap: 6
-                              }}
-                              onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = '#f3f4f6'; }}
-                              onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}
-                          >
-                            <div style={{ overflow: 'hidden', flex: 1 }}>
-                              <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-                                <wcs-mat-icon icon="route" size="s" style={{ flexShrink: 0, color: isActive ? '#0088ce' : '#9ca3af' }} />
-                                <span className="ligne-name" style={{ fontSize: 13, fontWeight: isActive ? 700 : 500, color: isActive ? '#0088ce' : '#ffffff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                            {l?.nom || l?.code || `Ligne ${l?.id}`}
-                          </span>
-                              </div>
-                              {(l?.code || region) && (
-                                  <div style={{ fontSize: 11, color: '#9ca3af', marginLeft: 21, marginTop: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                                    {[l?.code, region?.nom].filter(Boolean).join(' · ')}
-                                  </div>
-                              )}
-                            </div>
-                            <span className="ligne-count" style={{ background: isActive ? '#0088ce' : (count > 0 ? '#e5e7eb' : '#f3f4f6'), color: isActive ? '#fff' : (count > 0 ? '#6b7280' : '#d1d5db'), borderRadius: 10, padding: '1px 7px', fontSize: 11, fontWeight: 600, flexShrink: 0 }}>
-                        {count}
-                      </span>
-                          </button>
-                      );
-                    })}
-
-                    {lignes.length === 0 && !loading && (
-                        <div style={{ padding: '16px 12px', fontSize: 12, color: '#9ca3af', textAlign: 'center' }}>
-                          Aucune ligne créée
-                        </div>
-                    )}
-                  </div>
-
-                  {/* Footer : créer une ligne */}
-                  <div style={{ borderTop: '1px solid #e5e7eb', padding: '8px 12px' }}>
-                    <button
-                        onClick={openCreateLigneModal}
-                        disabled={!canCreateLignes}
-                        style={{ display: 'flex', alignItems: 'center', gap: 6, width: '100%', background: 'none', border: '1px dashed #d1d5db', borderRadius: 6, padding: '7px 10px', cursor: 'pointer', color: '#6b7280', fontSize: 12, transition: 'all 0.15s' }}
-                        onMouseEnter={e => { e.currentTarget.style.borderColor = '#0088ce'; e.currentTarget.style.color = '#0088ce'; e.currentTarget.style.background = '#f0f9ff'; }}
-                        onMouseLeave={e => { e.currentTarget.style.borderColor = '#d1d5db'; e.currentTarget.style.color = '#6b7280'; e.currentTarget.style.background = 'none'; }}
-                    >
-                      <wcs-mat-icon icon="add" size="s" />
-                      Créer une ligne
-                    </button>
-                  </div>
-                </div>
-            )}
-          </div>
-
-          {/* ── Contenu principal ── */}
-          <div className="horaires-main-content">
-            {/* Bandeau ligne sélectionnée */}
-            {selectedLigneFilter && selectedLigneFilter !== '__none__' && (() => {
-              const l = (lignes || []).find(x => String(x?.id) === String(selectedLigneFilter));
-              return l ? (
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12, padding: '8px 14px', background: '#e8f4fd', border: '1px solid #93c5fd', borderRadius: 8 }}>
-                    <wcs-mat-icon icon="route" size="s" style={{ color: '#0088ce' }} />
-                    <span style={{ fontWeight: 600, color: '#0c4a6e', fontSize: 14 }}>{l.nom}</span>
-                    {l.code && <span style={{ fontSize: 12, color: '#0369a1', background: '#bae6fd', borderRadius: 4, padding: '1px 7px' }}>{l.code}</span>}
-                    {l.gare_depart?.nom && <span style={{ fontSize: 12, color: '#374151' }}>{l.gare_depart.nom} → {l.gare_arrivee?.nom}</span>}
-                    <button onClick={() => setSelectedLigneFilter(null)} style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#0369a1', fontSize: 18, lineHeight: 1, padding: 2 }} title="Effacer le filtre">×</button>
-                  </div>
-              ) : null;
-            })()}
-
-            {selectedLigneFilter === '__none__' && (
-                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12, padding: '8px 14px', background: '#fef9c3', border: '1px solid #fde047', borderRadius: 8 }}>
-                  <wcs-mat-icon icon="info" size="s" style={{ color: '#d97706' }} />
-                  <span style={{ fontWeight: 500, color: '#92400e', fontSize: 14 }}>Horaires sans ligne attribuée</span>
-                  <button onClick={() => setSelectedLigneFilter(null)} style={{ marginLeft: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#92400e', fontSize: 18, lineHeight: 1, padding: 2 }}>×</button>
-                </div>
-            )}
-
-            {/* Barre d'outils */}
-            <div className="horaires-toolbar">
-              <div className="horaires-toolbar-left">
-                <wcs-button mode={viewMode==='liste'?'plain':'stroked'} onClick={()=>setViewMode('liste')}><wcs-mat-icon icon="list" size="s"/> Liste</wcs-button>
-                <wcs-button mode={viewMode==='carte'?'plain':'stroked'} onClick={()=>setViewMode('carte')}><wcs-mat-icon icon="view_module" size="s"/> Cartes</wcs-button>
-                <wcs-button
-                    mode={selectionMode ? 'plain' : 'stroked'}
-                    onClick={toggleSelectionMode}
-                    className="horaires-select-btn"
+              <div className="horaires-lines-list">
+                {/* Tous les horaires */}
+                <button
+                  className={`ligne-item-modern ${selectedLigneFilter === null ? 'is-active' : ''}`}
+                  onClick={() => { setSelectedLigneFilter(null); setCurrentPage(1); }}
                 >
-                  <wcs-mat-icon icon={selectionMode ? 'close' : 'check_box'} size="s"/>
-                  {selectionMode ? 'Annuler' : 'Sélectionner'}
-                </wcs-button>
-                {/* Champ de recherche */}
-                <div className="horaires-search-wrap">
-                  <input
-                      type="search"
-                      placeholder="Rechercher par N° train, gare…"
-                      value={searchQuery}
-                      onChange={e => { setSearchQuery(e.target.value); setCurrentPage(1); }}
-                      className="horaires-search-input"
-                  />
-                </div>
-              </div>
-              <div style={{ display: 'flex', gap: 8 }}>
-                <wcs-button mode="stroked" onClick={() => { window.location.href = '/horaires/imports'; }} disabled={!canCreateHoraires}>
-                  <wcs-mat-icon icon="upload_file" size="s" /> Import Excel
-                </wcs-button>
-                <wcs-button className="wcs-primary" onClick={openCreateModal} disabled={!canCreateHoraires}><wcs-mat-icon icon="add" size="s"/> Créer un horaire</wcs-button>
-              </div>
-            </div>
+                  <span className="ligne-label">
+                    <wcs-mat-icon icon="list" size="s" />
+                    <span className="ligne-name">Tous les horaires</span>
+                  </span>
+                  <span className="ligne-count">{horaires.length}</span>
+                </button>
 
-            {/* Panel de sélection */}
-            {selectionMode && (
-                <div className="horaires-selection-panel">
-                  <div className="horaires-selection-left">
-                    <wcs-button mode="stroked" size="s" onClick={() => {
-                      if (selectedHoraires.length === filteredHoraires.length && filteredHoraires.length > 0) {
-                        setSelectedHoraires([]);
-                      } else {
-                        setSelectedHoraires(filteredHoraires.map(h => h.id));
-                      }
-                    }}>
-                      <wcs-mat-icon icon={selectedHoraires.length === filteredHoraires.length && filteredHoraires.length > 0 ? 'check_box' : 'check_box_outline_blank'} size="s"/>
-                      {selectedHoraires.length === filteredHoraires.length && filteredHoraires.length > 0 ? 'Tout désélectionner' : 'Tout sélectionner'}
-                    </wcs-button>
-                    <span className="horaires-selection-count">
-                  {selectedHoraires.length} élément(s) sélectionné(s)
-                </span>
-                  </div>
-                  <div className="horaires-selection-actions">
-                    <wcs-button mode="plain" onClick={handleDuplicateSelected} disabled={selectedHoraires.length === 0} style={{ opacity: selectedHoraires.length === 0 ? 0.5 : 1 }}>
-                      <wcs-mat-icon icon="content_copy" size="s"/> Dupliquer
-                    </wcs-button>
-                    <wcs-button mode="plain" onClick={handleExportSelected} disabled={selectedHoraires.length === 0} style={{ opacity: selectedHoraires.length === 0 ? 0.5 : 1 }}>
-                      <wcs-mat-icon icon="file_download" size="s"/> Exporter
-                    </wcs-button>
-                    <wcs-button mode="plain" onClick={() => setAssignLigneModalOpen(true)} disabled={selectedHoraires.length === 0 || !canUpdateHoraires} style={{ opacity: (selectedHoraires.length === 0 || !canUpdateHoraires) ? 0.5 : 1 }}>
-                      <wcs-mat-icon icon="route" size="s"/> Attribuer
-                    </wcs-button>
-                    <wcs-button mode="plain" onClick={handleDeleteSelected} disabled={selectedHoraires.length === 0 || !canDeleteHoraires} style={{ opacity: (selectedHoraires.length === 0 || !canDeleteHoraires) ? 0.5 : 1 }}>
-                      <wcs-mat-icon icon="delete" size="s"/> Supprimer
-                    </wcs-button>
-                  </div>
-                </div>
-            )}
+                <div style={{ height: 1, background: 'rgba(255,255,255,0.1)', margin: '6px 8px' }} />
 
-            {/* Liste/Cartes */}
-            {loading ? (
-                <p className="horaires-loading">Chargement...</p>
-            ) : filteredHoraires.length === 0 ? (
-                <div className="horaires-empty-state">
-                  <wcs-mat-icon className="horaires-empty-icon" icon="schedule" />
-                  <p className="horaires-empty-text">
-                    {selectedLigneFilter
-                        ? 'Aucun horaire pour cette ligne'
-                        : 'Aucun horaire trouvé'}
-                  </p>
-                  <wcs-button className="wcs-primary" onClick={openCreateModal} disabled={!canCreateHoraires}>Créer un horaire</wcs-button>
-                </div>
-            ) : (viewMode === 'liste' ? renderListView() : renderCardsView())}
-
-            {/* Modale Attribution */}
-            {assignLigneModalOpen && (
-                <div className="modal-overlay">
-                    <div className="modal-content" style={{ maxWidth: 500 }}>
-                        <div className="modal-header">
-                            <h3>Attribuer {selectedHoraires.length} horaire(s) à une ligne</h3>
-                            <button className="modal-close" onClick={() => setAssignLigneModalOpen(false)}>×</button>
-                        </div>
-                        <div className="modal-body">
-                            <p style={{ marginBottom: 16 }}>Choisissez la ligne à laquelle vous souhaitez attribuer ces horaires :</p>
-                            <div className="form-group">
-                                <label className="form-label">Ligne cible *</label>
-                                <select className="horaires-field" value={assignTargetLigne} onChange={e => setAssignTargetLigne(e.target.value)}>
-                                    <option value="">Sélectionnez une ligne</option>
-                                    {lignes.map(l => (
-                                        <option key={l.id} value={String(l.id)}>
-                                            {l.nom || l.code || `Ligne ${l.id}`}
-                                        </option>
-                                    ))}
-                                </select>
-                            </div>
-                        </div>
-                        <div className="modal-footer" style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 20 }}>
-                            <wcs-button mode="stroked" onClick={() => setAssignLigneModalOpen(false)} disabled={assignLoading}>
-                                Annuler
-                            </wcs-button>
-                            <wcs-button mode="plain" className="wcs-primary" onClick={handleAssignSelectedToLigne} disabled={!assignTargetLigne || assignLoading}>
-                                {assignLoading ? 'Attribution...' : 'Confirmer'}
-                            </wcs-button>
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            {/* Modal horaires */}
-            {showModal && (
-              <HoraireModal
-                initialData={editingItem}
-                isDuplicating={isDuplicating}
-                onClose={closeModal}
-                onSaveSuccess={(res) => {
-                  loadData();
-                }}
-                lignes={lignes}
-                materiels={materiels}
-                typesTrainsList={typesTrainsList}
-                allGares={garesList}
-                servicesAnnuels={servicesAnnuels}
-                horaires={horaires}
-                currentUser={currentUser}
-                canCreateHoraires={canCreateHoraires}
-                canUpdateHoraires={canUpdateHoraires}
-              />
-            )}
-          </div>
-        </div>
-    );
-  }
-
-  function renderLignesTab() {
-    return (
-    <div className="horaires-tab-panel">
-          <div className="horaires-section-header">
-            <h3 className="horaires-section-title">Gestion des Lignes</h3>
-            <wcs-button className="wcs-primary" onClick={openCreateLigneModal} disabled={!canCreateLignes}><wcs-mat-icon icon="add" size="s"/> Créer une ligne</wcs-button>
-          </div>
-
-          {loading ? <p className="horaires-loading">Chargement...</p> : (lignes.length === 0 ? (
-              <div className="horaires-empty-state horaires-empty-state-compact">
-                <wcs-mat-icon icon="route" className="horaires-empty-icon" />
-                <p className="horaires-empty-text">Aucune ligne trouvée</p>
-                <wcs-button className="wcs-primary" onClick={openCreateLigneModal} disabled={!canCreateLignes}>Créer une ligne</wcs-button>
-              </div>
-          ) : (
-              <div className="table-container">
-                <table className="wcs-table horaires-table-full horaires-responsive-table horaires-responsive-table-lignes">
-                  <thead>
-                  <tr>
-                    <th>Nom</th>
-                    <th>Code</th>
-                    <th>Région</th>
-                    <th>Départ</th>
-                    <th>Arrivée</th>
-                    <th>Gares sur le tracé</th>
-                    <th>Actions</th>
-                  </tr>
-                  </thead>
-                  <tbody>
-                  {lignes.map((l, i) => (
-                      <tr key={l?.id ?? i}>
-                        <td data-label="Nom"><strong>{l?.nom || '-'}</strong></td>
-                        <td data-label="Code">{l?.code || '-'}</td>
-                        <td data-label="Région">{regionsList.find(r => r.id === l?.region)?.nom || '-'}</td>
-                        <td data-label="Départ">{l?.gare_depart?.nom || '-'}</td>
-                        <td data-label="Arrivée">{l?.gare_arrivee?.nom || '-'}</td>
-                        <td data-label="Gares sur le tracé">{l?.lignes_gares?.length || 0} gare(s)</td>
-                        <td data-label="Actions" className="horaires-row-actions">
-                          <wcs-button mode="stroked" onClick={() => openEditLigneModal(l)} disabled={!canUpdateLignes}>Modifier</wcs-button>
-                          <wcs-button mode="stroked" className="wcs-danger" onClick={() => handleDeleteLigne(l?.id)} disabled={!canDeleteLignes}>Supprimer</wcs-button>
-                        </td>
-                      </tr>
-                  ))}
-                  </tbody>
-                </table>
-              </div>
-          ))}
-
-          {/* Modal lignes */}
-          {showLigneModal && renderLigneModal()}
-        </div>
-    );
-  }
-
-  function renderServicesTab() {
-    return (
-        <div className="horaires-tab-panel">
-          <div className="horaires-section-header">
-            <h3 className="horaires-section-title">Gestion des Services Annuels</h3>
-            <wcs-button className="wcs-primary" onClick={openCreateServiceModal} disabled={!canCreateServices}><wcs-mat-icon icon="add" size="s"/> Créer un service annuel</wcs-button>
-          </div>
-
-          {loading ? <p className="horaires-loading">Chargement...</p> : (servicesAnnuels.length === 0 ? (
-              <div className="horaires-empty-state horaires-empty-state-compact">
-                <wcs-mat-icon icon="event" className="horaires-empty-icon" />
-                <p className="horaires-empty-text">Aucun service annuel trouvé</p>
-                <wcs-button className="wcs-primary" onClick={openCreateServiceModal} disabled={!canCreateServices}>Créer un service annuel</wcs-button>
-              </div>
-          ) : (
-              <div className="table-container">
-                <table className="wcs-table horaires-table-full horaires-responsive-table horaires-responsive-table-services">
-                  <thead>
-                  <tr>
-                    <th>Nom</th>
-                    <th>Code</th>
-                    <th>Date début</th>
-                    <th>Date fin</th>
-                    <th>Description</th>
-                    <th>Actions</th>
-                  </tr>
-                  </thead>
-                  <tbody>
-                  {servicesAnnuels.map((s, i) => (
-                      <tr key={s?.id ?? i}>
-                        <td data-label="Nom"><strong>{s?.nom || '-'}</strong></td>
-                        <td data-label="Code">{s?.code || '-'}</td>
-                        <td data-label="Date début">{formatDate(s?.date_debut)}</td>
-                        <td data-label="Date fin">{formatDate(s?.date_fin)}</td>
-                        <td data-label="Description"><small>{s?.description || '-'}</small></td>
-                        <td data-label="Actions" className="horaires-row-actions">
-                          <wcs-button mode="stroked" onClick={() => openEditServiceModal(s)} disabled={!canUpdateServices}>Modifier</wcs-button>
-                          <wcs-button mode="stroked" className="wcs-danger" onClick={() => handleDeleteService(s?.id)} disabled={!canDeleteServices}>Supprimer</wcs-button>
-                        </td>
-                      </tr>
-                  ))}
-                  </tbody>
-                </table>
-              </div>
-          ))}
-
-          {/* Modal services */}
-          {showServiceModal && renderServiceModal()}
-        </div>
-    );
-  }
-
-
-
-  function renderLigneModal() {
-    return (
-        <div className="modal-overlay" onClick={closeLigneModal}>
-          <div className="modal-content horaires-modal-large" onClick={e=>e.stopPropagation()}>
-            <div className="modal-header">
-              <h3>{editingLigne ? 'Modifier la ligne' : 'Nouvelle ligne'}</h3>
-              <button className="modal-close" onClick={closeLigneModal}>×</button>
-            </div>
-            <div className="modal-body horaires-modal-body">
-              {formError && <wcs-alert intent="error" show><span slot="title">Erreur</span><span slot="subtitle">{formError}</span></wcs-alert>}
-
-              {/* Onglets de la modale ligne */}
-              <div className="horaires-modal-tabs horaires-modal-tabs-alt">
-                {[
-                  { key: 'infos', label: 'Informations' },
-                  { key: 'fiches-horaires', label: 'Fiches Horaires' }
-                ].map(tab => (
+                {/* Sans ligne */}
+                {(() => {
+                  const sansLigne = (horaires || []).filter(h => !h?.ligne_id && !h?.ligne);
+                  if (sansLigne.length === 0) return null;
+                  return (
                     <button
-                        key={tab.key}
-                        onClick={() => setLigneModalTab(tab.key)}
-                        className={`horaires-modal-tab-btn ${ligneModalTab === tab.key ? 'is-active' : ''}`}
+                      className={`ligne-item-modern ${selectedLigneFilter === '__none__' ? 'is-active' : ''}`}
+                      onClick={() => { setSelectedLigneFilter('__none__'); setCurrentPage(1); }}
                     >
-                      {tab.label}
+                      <span className="ligne-label">
+                        <wcs-mat-icon icon="help_outline" size="s" />
+                        <span className="ligne-name" style={{ fontStyle: 'italic' }}>Sans ligne</span>
+                      </span>
+                      <span className="ligne-count">{sansLigne.length}</span>
                     </button>
-                ))}
-              </div>
+                  );
+                })()}
 
-              {/* Onglet Informations */}
-              {ligneModalTab === 'infos' && (
-                  <>
-                    <div className="form-group horaires-form-group">
-                      <label>Nom de la ligne *</label>
-                      <input className="horaires-field" type="text" value={ligneNom} onChange={e => setLigneNom(e.target.value)} placeholder="Ex: Paris - Lyon" />
-                    </div>
-
-                    <div className="form-group horaires-form-group">
-                      <label>Code</label>
-                      <input className="horaires-field" type="text" value={ligneCode} onChange={e => setLigneCode(e.target.value)} placeholder="Ex: PL01" />
-                    </div>
-
-                    <div className="form-group horaires-form-group">
-                      <label>Région</label>
-                      <select className="horaires-field" value={ligneRegion} onChange={e => setLigneRegion(e.target.value)}>
-                        <option value="">Aucune région</option>
-                        {regionsList.map(r => <option key={r.id} value={r.id}>{r.nom}</option>)}
-                      </select>
-                    </div>
-
-                    <div className="horaires-two-cols">
-                      <div className="form-group">
-                        <label>Gare de départ *</label>
-                        <select className="horaires-field" value={ligneDepartId} onChange={e => setLigneDepartId(e.target.value)}>
-                          <option value="">Sélectionner une gare</option>
-                          {garesList.map(g => <option key={g.id} value={g.id}>{g.nom}</option>)}
-                        </select>
-                      </div>
-                      <div className="form-group">
-                        <label>Gare d&apos;arrivée *</label>
-                        <select className="horaires-field" value={ligneArriveeId} onChange={e => setLigneArriveeId(e.target.value)}>
-                          <option value="">Sélectionner une gare</option>
-                          {garesList.map(g => <option key={g.id} value={g.id}>{g.nom}</option>)}
-                        </select>
-                      </div>
-                    </div>
-
-                    <div className="form-group horaires-form-group">
-                      <label style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                        <span>Gares sur le tracé</span>
-                        <wcs-button mode="stroked" size="s" onClick={addGareTracee}><wcs-mat-icon icon="add" size="s"/> Ajouter</wcs-button>
-                      </label>
-                      <div className="horaires-trace-list">
-                        {garesTracees.length === 0 ? (
-                            <p className="horaires-trace-empty">Aucune gare intermédiaire</p>
-                        ) : (
-                            garesTracees.map((gt, idx) => (
-                                <div key={gt.id} className="horaires-trace-row">
-                                  <span className="horaires-trace-index">{idx + 1}.</span>
-                                  <select className="horaires-field" value={gt.gare_id} onChange={e => updateGareTraceeField(idx, 'gare_id', e.target.value)}>
-                                    <option value="">Sélectionner une gare</option>
-                                    {garesList.map(g => <option key={g.id} value={g.id}>{g.nom}</option>)}
-                                  </select>
-                                  <select className="horaires-field" value={gt.desserte} onChange={e => updateGareTraceeField(idx, 'desserte', e.target.value)}>
-                                    <option value="tous">Tous les trains</option>
-                                    <option value="partielle">Partielle</option>
-                                  </select>
-                                  <wcs-button mode="stroked" size="s" onClick={() => removeGareTracee(idx)}><wcs-mat-icon icon="delete" size="s"/></wcs-button>
-                                </div>
-                            ))
+                {/* Liste des lignes */}
+                {(lignes || []).map(l => {
+                  const count = countByLigne[l?.id] || 0;
+                  const isActive = String(selectedLigneFilter) === String(l?.id);
+                  const region = (regionsList || []).find(r => r.id === l?.region);
+                  return (
+                    <button
+                      key={l?.id}
+                      className={`ligne-item-modern ${isActive ? 'is-active' : ''}`}
+                      onClick={() => { setSelectedLigneFilter(l?.id); setCurrentPage(1); }}
+                    >
+                      <div style={{ overflow: 'hidden', flex: 1 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                          <wcs-mat-icon icon="route" size="s" />
+                          <span className="ligne-name">{l?.nom || l?.code || `Ligne ${l?.id}`}</span>
+                        </div>
+                        {(l?.code || region) && (
+                          <div style={{ fontSize: 11, color: '#93c5fd', marginLeft: 22, marginTop: 1, opacity: 0.85 }}>
+                            {[l?.code, region?.nom].filter(Boolean).join(' · ')}
+                          </div>
                         )}
                       </div>
-                    </div>
-                  </>
-              )}
+                      <span className="ligne-count">{count}</span>
+                    </button>
+                  );
+                })}
 
-              {/* Onglet Fiches Horaires */}
-              {ligneModalTab === 'fiches-horaires' && (
-                  <div>
-                    <p className="horaires-section-description">
-                      Importez la fiche horaire PDF de cette ligne. Elle sera accessible sur les sites régionaux pour consultation.
-                    </p>
-
-                    {/* Fiche horaire actuelle */}
-                    {ligneFHUrl && !ligneFHFile && (
-                        <div className="horaires-pdf-current-card">
-                          <wcs-mat-icon icon="picture_as_pdf" style={{ color: '#16a34a', fontSize: 28 }} />
-                          <div style={{ flex: 1 }}>
-                            <div style={{ fontWeight: 600, color: '#15803d' }}>Fiche horaire actuelle</div>
-                            <a
-                                href={ligneFHUrl}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                style={{ fontSize: 13, color: '#0074d9', wordBreak: 'break-all' }}
-                            >
-                              {ligneFHUrl}
-                            </a>
-                          </div>
-                          <div style={{ display: 'flex', gap: 8 }}>
-                            <a href={ligneFHUrl} target="_blank" rel="noopener noreferrer">
-                              <wcs-button mode="stroked" size="s">
-                                <wcs-mat-icon icon="open_in_new" size="s"/> Ouvrir
-                              </wcs-button>
-                            </a>
-                            <wcs-button
-                                mode="stroked"
-                                size="s"
-                                onClick={async () => {
-                                  if (!window.confirm('Supprimer la fiche horaire ?')) return;
-                                  if (editingLigne?.id) {
-                                    await deleteFicheHoraire(editingLigne.id);
-                                    await updateLigne(editingLigne.id, {
-                                      nom: ligneNom, code: ligneCode,
-                                      gare_depart_id: ligneDepartId,
-                                      gare_arrivee_id: ligneArriveeId,
-                                      actif: true, fh_url: null
-                                    }, garesTracees);
-                                    await loadData();
-                                  }
-                                  setLigneFHUrl('');
-                                }}
-                                style={{ color: '#dc2626' }}
-                            >
-                              <wcs-mat-icon icon="delete" size="s"/> Supprimer
-                            </wcs-button>
-                          </div>
-                        </div>
-                    )}
-
-                    {/* Zone d'upload */}
-                    <div style={{
-                      border: `2px dashed ${ligneFHFile ? '#0088ce' : '#d1d5db'}`,
-                      borderRadius: 10,
-                      padding: '32px 24px',
-                      textAlign: 'center',
-                      background: ligneFHFile ? '#f0f9ff' : '#fafafa',
-                      transition: 'all 0.2s',
-                      cursor: 'pointer'
-                    }}
-                         onClick={() => document.getElementById('fh-pdf-input').click()}
-                         onDragOver={e => { e.preventDefault(); e.currentTarget.style.borderColor = '#0088ce'; e.currentTarget.style.background = '#f0f9ff'; }}
-                         onDragLeave={e => { e.currentTarget.style.borderColor = ligneFHFile ? '#0088ce' : '#d1d5db'; e.currentTarget.style.background = ligneFHFile ? '#f0f9ff' : '#fafafa'; }}
-                         onDrop={e => {
-                           e.preventDefault();
-                           const file = e.dataTransfer.files?.[0];
-                           if (file && file.type === 'application/pdf') {
-                             setLigneFHFile(file);
-                             setLigneFHError('');
-                           } else {
-                             setLigneFHError('Seuls les fichiers PDF sont acceptés.');
-                           }
-                           e.currentTarget.style.borderColor = '#0088ce';
-                           e.currentTarget.style.background = '#f0f9ff';
-                         }}
-                    >
-                      <input
-                          id="fh-pdf-input"
-                          type="file"
-                          accept="application/pdf,.pdf"
-                          style={{ display: 'none' }}
-                          onChange={e => {
-                            const file = e.target.files?.[0];
-                            if (file) {
-                              if (file.type !== 'application/pdf') {
-                                setLigneFHError('Seuls les fichiers PDF sont acceptés.');
-                                return;
-                              }
-                              setLigneFHFile(file);
-                              setLigneFHError('');
-                            }
-                          }}
-                      />
-                      {ligneFHFile ? (
-                          <div>
-                            <wcs-mat-icon icon="picture_as_pdf" style={{ fontSize: 40, color: '#0088ce', display: 'block', margin: '0 auto 8px' }} />
-                            <div style={{ fontWeight: 600, color: '#0074d9', fontSize: 15 }}>{ligneFHFile.name}</div>
-                            <div style={{ fontSize: 12, color: '#6b7280', marginTop: 4 }}>
-                              {(ligneFHFile.size / 1024).toFixed(1)} Ko — Cliquez pour changer
-                            </div>
-                            <button
-                                onClick={e => { e.stopPropagation(); setLigneFHFile(null); setLigneFHError(''); }}
-                                style={{ marginTop: 10, background: 'none', border: '1px solid #e5e7eb', borderRadius: 6, padding: '4px 12px', cursor: 'pointer', color: '#dc2626', fontSize: 13 }}
-                            >
-                              Retirer le fichier
-                            </button>
-                          </div>
-                      ) : (
-                          <div>
-                            <wcs-mat-icon icon="upload_file" style={{ fontSize: 40, color: '#9ca3af', display: 'block', margin: '0 auto 8px' }} />
-                            <div style={{ fontWeight: 500, color: '#374151', fontSize: 15, marginBottom: 6 }}>
-                              Glissez votre PDF ici ou cliquez pour parcourir
-                            </div>
-                            <div style={{ fontSize: 12, color: '#9ca3af' }}>Fichier PDF uniquement</div>
-                          </div>
-                      )}
-                    </div>
-
-                    {ligneFHError && (
-                        <div className="horaires-upload-error">
-                          <wcs-mat-icon icon="error" size="s" /> {ligneFHError}
-                        </div>
-                    )}
-
-                    {ligneFHUploading && (
-                        <div className="horaires-upload-loading">
-                          <span>Upload en cours...</span>
-                        </div>
-                    )}
-
-                    <div className="horaires-info-note">
-                      <wcs-mat-icon icon="info" size="s" style={{ verticalAlign: 'middle', marginRight: 6 }} />
-                      Le PDF sera enregistré lors de la sauvegarde de la ligne. Il sera consultable sur les pages régionales dédiées aux fiches horaires.
-                    </div>
+                {lignes.length === 0 && !loading && (
+                  <div style={{ padding: '20px 12px', fontSize: 12, color: '#94a3b8', textAlign: 'center' }}>
+                    Aucune ligne configurée
                   </div>
-              )}
+                )}
+              </div>
+
+              <div className="horaires-lines-footer">
+                <button
+                  className="horaires-create-ligne-btn"
+                  onClick={openCreateLigneModal}
+                  disabled={!canCreateLignes}
+                >
+                  <wcs-mat-icon icon="add" size="s" />
+                  Nouvelle ligne
+                </button>
+              </div>
             </div>
-            <div className="modal-footer">
-              <wcs-button mode="stroked" onClick={closeLigneModal} disabled={saving}>Annuler</wcs-button>
-              <wcs-button className="wcs-primary" onClick={handleSaveLigne} disabled={saving || ligneFHUploading || (!editingLigne && !canCreateLignes) || (!!editingLigne && !canUpdateLignes)}>
-                {saving || ligneFHUploading ? 'Enregistrement...' : (editingLigne ? 'Mettre à jour' : 'Créer')}
+          )}
+        </div>
+
+        {/* Contenu principal */}
+        <div className="horaires-main-content">
+          {/* Bandeau de filtre actif */}
+          {activeLigneObj && (
+            <div className="horaires-filter-banner info">
+              <wcs-mat-icon icon="route" size="s" style={{ color: '#0284c7' }} />
+              <div>
+                <strong>Ligne active :</strong> {activeLigneObj.nom}
+                {activeLigneObj.code && <span style={{ marginLeft: 8, background: '#bae6fd', padding: '1px 6px', borderRadius: 4, fontSize: 11, color: '#0369a1' }}>{activeLigneObj.code}</span>}
+                {activeLigneObj.gare_depart?.nom && <span style={{ marginLeft: 8, color: '#475569' }}>({activeLigneObj.gare_depart.nom} → {activeLigneObj.gare_arrivee?.nom})</span>}
+              </div>
+              <button className="horaires-filter-banner-close" onClick={() => setSelectedLigneFilter(null)} title="Effacer le filtre">×</button>
+            </div>
+          )}
+
+          {selectedLigneFilter === '__none__' && (
+            <div className="horaires-filter-banner warning">
+              <wcs-mat-icon icon="info" size="s" style={{ color: '#d97706' }} />
+              <div>
+                <strong>Horaires sans ligne attribuée</strong>
+              </div>
+              <button className="horaires-filter-banner-close" onClick={() => setSelectedLigneFilter(null)}>×</button>
+            </div>
+          )}
+
+          {/* Barre d'outils */}
+          <div className="horaires-toolbar">
+            <div className="horaires-toolbar-left">
+              <div style={{ display: 'flex', background: '#e2e8f0', borderRadius: 8, padding: 3 }}>
+                <button
+                  onClick={() => setViewMode('liste')}
+                  style={{
+                    border: 'none',
+                    background: viewMode === 'liste' ? '#ffffff' : 'transparent',
+                    color: viewMode === 'liste' ? '#0f172a' : '#64748b',
+                    padding: '6px 12px',
+                    borderRadius: 6,
+                    cursor: 'pointer',
+                    fontWeight: 600,
+                    fontSize: 13,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    boxShadow: viewMode === 'liste' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
+                  }}
+                >
+                  <wcs-mat-icon icon="list" size="s" /> Liste
+                </button>
+                <button
+                  onClick={() => setViewMode('carte')}
+                  style={{
+                    border: 'none',
+                    background: viewMode === 'carte' ? '#ffffff' : 'transparent',
+                    color: viewMode === 'carte' ? '#0f172a' : '#64748b',
+                    padding: '6px 12px',
+                    borderRadius: 6,
+                    cursor: 'pointer',
+                    fontWeight: 600,
+                    fontSize: 13,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 6,
+                    boxShadow: viewMode === 'carte' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
+                  }}
+                >
+                  <wcs-mat-icon icon="view_module" size="s" /> Cartes
+                </button>
+              </div>
+
+              <wcs-button
+                mode={selectionMode ? 'plain' : 'stroked'}
+                size="s"
+                onClick={toggleSelectionMode}
+              >
+                <wcs-mat-icon icon={selectionMode ? 'close' : 'check_box'} size="s" />
+                {selectionMode ? 'Annuler la sélection' : 'Sélectionner'}
+              </wcs-button>
+
+              <div className="horaires-search-wrap">
+                <wcs-mat-icon icon="search" size="s" />
+                <input
+                  type="search"
+                  placeholder="Rechercher par N° train, gare, matériel…"
+                  value={searchQuery}
+                  onChange={e => { setSearchQuery(e.target.value); setCurrentPage(1); }}
+                  className="horaires-search-input"
+                />
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+              <wcs-button mode="stroked" size="s" onClick={() => { window.location.href = '/horaires/imports'; }} disabled={!canCreateHoraires}>
+                <wcs-mat-icon icon="upload_file" size="s" /> Import Excel
+              </wcs-button>
+              <wcs-button className="wcs-primary" size="s" onClick={openCreateModal} disabled={!canCreateHoraires}>
+                <wcs-mat-icon icon="add" size="s" /> Nouveau sillon
               </wcs-button>
             </div>
           </div>
+
+          {/* Bandeau d'actions de sélection */}
+          {selectionMode && (
+            <div className="horaires-selection-panel">
+              <div className="horaires-selection-left">
+                <wcs-button
+                  mode="stroked"
+                  size="s"
+                  onClick={() => {
+                    if (selectedHoraires.length === filteredHoraires.length && filteredHoraires.length > 0) {
+                      setSelectedHoraires([]);
+                    } else {
+                      setSelectedHoraires(filteredHoraires.map(h => h.id));
+                    }
+                  }}
+                >
+                  <wcs-mat-icon icon={selectedHoraires.length === filteredHoraires.length && filteredHoraires.length > 0 ? 'check_box' : 'check_box_outline_blank'} size="s" />
+                  {selectedHoraires.length === filteredHoraires.length && filteredHoraires.length > 0 ? 'Tout désélectionner' : 'Tout sélectionner'}
+                </wcs-button>
+                <span className="horaires-selection-count">
+                  {selectedHoraires.length} horaire(s) sélectionné(s)
+                </span>
+              </div>
+              <div className="horaires-selection-actions">
+                <wcs-button mode="stroked" size="s" onClick={handleDuplicateSelected} disabled={selectedHoraires.length === 0}>
+                  <wcs-mat-icon icon="content_copy" size="s" /> Dupliquer
+                </wcs-button>
+                <wcs-button mode="stroked" size="s" onClick={handleExportSelected} disabled={selectedHoraires.length === 0}>
+                  <wcs-mat-icon icon="file_download" size="s" /> Exporter CSV
+                </wcs-button>
+                <wcs-button mode="stroked" size="s" onClick={() => setAssignLigneModalOpen(true)} disabled={selectedHoraires.length === 0 || !canUpdateHoraires}>
+                  <wcs-mat-icon icon="route" size="s" /> Attribuer à une ligne
+                </wcs-button>
+                <wcs-button mode="stroked" size="s" className="wcs-danger" onClick={handleDeleteSelected} disabled={selectedHoraires.length === 0 || !canDeleteHoraires}>
+                  <wcs-mat-icon icon="delete" size="s" /> Supprimer
+                </wcs-button>
+              </div>
+            </div>
+          )}
+
+          {/* Affichage des données */}
+          {loading ? (
+            <div className="horaires-loading">Chargement des horaires en cours...</div>
+          ) : filteredHoraires.length === 0 ? (
+            <div className="horaires-empty-state">
+              <wcs-mat-icon className="horaires-empty-icon" icon="schedule" />
+              <p className="horaires-empty-text">
+                {selectedLigneFilter
+                  ? 'Aucun horaire trouvé pour cette ligne.'
+                  : 'Aucun horaire ne correspond à votre recherche.'}
+              </p>
+              <wcs-button className="wcs-primary" onClick={openCreateModal} disabled={!canCreateHoraires}>
+                <wcs-mat-icon icon="add" size="s" /> Créer un horaire
+              </wcs-button>
+            </div>
+          ) : (
+            viewMode === 'liste' ? renderListView() : renderCardsView()
+          )}
         </div>
+      </div>
     );
-  }
+  };
 
-    function renderQuaisTab() {
-    const getFilteredDesservies = (horaire) => {
-      const normalized = normalizeHoraireDesservies(horaire);
-      const depart = normalized.depart;
-      const arrivee = normalized.arrivee;
-      const sameGare = (a, b) => {
-        if (!a || !b) return false;
-        const aId = a.gare_id || a.id || null;
-        const bId = b.gare_id || b.id || null;
-        if (aId && bId && String(aId) === String(bId)) return true;
-        const aNom = String(a.gare_nom || a.nom || '').trim().toLowerCase();
-        const bNom = String(b.gare_nom || b.nom || '').trim().toLowerCase();
-        return aNom && bNom && aNom === bNom;
-      };
-      const isSameStop = (row, ref) => {
-        if (!row || !ref) return false;
-        return sameGare(row, ref)
-          && String(row.heure_arrivee || '') === String(ref.heure_arrivee || '')
-          && String(row.heure_depart || '') === String(ref.heure_depart || '');
-      };
-      const seen = new Set();
-      return normalized.intermediaires.filter(row => {
-        if (isSameStop(row, depart) || isSameStop(row, arrivee)) return false;
-        const key = `${row.gare_id || row.gare_nom || ''}|${row.heure_arrivee || ''}|${row.heure_depart || ''}|${row.ordre ?? ''}`;
-        if (seen.has(key)) return false;
-        seen.add(key);
-        return true;
-      });
-    };
+  // ============================================================================
+  // RENDERING LIGNES TAB
+  // ============================================================================
 
-    const getDesservieKey = (gare, index) => `gare_${gare?.ordre ?? index + 1}`;
+  const renderLignesTab = () => (
+    <div style={{ background: '#ffffff', borderRadius: 16, border: '1px solid #e2e8f0', padding: 24, boxShadow: '0 4px 20px -2px rgba(15, 23, 42, 0.06)' }}>
+      <div className="horaires-section-header">
+        <h3 className="horaires-section-title">
+          <wcs-mat-icon icon="route" size="m" style={{ color: '#0088ce' }} />
+          Lignes Commerciales & Tracés
+        </h3>
+        <wcs-button className="wcs-primary" onClick={openCreateLigneModal} disabled={!canCreateLignes}>
+          <wcs-mat-icon icon="add" size="s" /> Créer une ligne
+        </wcs-button>
+      </div>
 
-    // Filtrer les horaires selon la recherche
+      <p className="horaires-section-description">
+        Configurez les lignes ferroviaires, définissez les gares d'origine et de destination ainsi que les arrêts intermédiaires sur le tracé.
+      </p>
+
+      {loading ? (
+        <div className="horaires-loading">Chargement des lignes...</div>
+      ) : lignes.length === 0 ? (
+        <div className="horaires-empty-state">
+          <wcs-mat-icon icon="route" className="horaires-empty-icon" />
+          <p className="horaires-empty-text">Aucune ligne configurée</p>
+          <wcs-button className="wcs-primary" onClick={openCreateLigneModal} disabled={!canCreateLignes}>
+            <wcs-mat-icon icon="add" size="s" /> Créer une ligne
+          </wcs-button>
+        </div>
+      ) : (
+        <div className="table-container">
+          <table className="wcs-table">
+            <thead>
+              <tr>
+                <th>Nom de la ligne</th>
+                <th>Code</th>
+                <th>Région</th>
+                <th>Origine / Destination</th>
+                <th>Gares sur le tracé</th>
+                <th>Fiche Horaire PDF</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {lignes.map((l, i) => (
+                <tr key={l?.id ?? i}>
+                  <td><strong>{l?.nom || '-'}</strong></td>
+                  <td>
+                    {l?.code ? (
+                      <span style={{ background: '#e0f2fe', color: '#0369a1', padding: '2px 8px', borderRadius: 4, fontWeight: 700, fontSize: 12 }}>
+                        {l.code}
+                      </span>
+                    ) : '-'}
+                  </td>
+                  <td>{regionsList.find(r => r.id === l?.region)?.nom || '-'}</td>
+                  <td>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                      <span>{l?.gare_depart?.nom || '-'}</span>
+                      <wcs-mat-icon icon="arrow_forward" size="s" style={{ color: '#94a3b8' }} />
+                      <span>{l?.gare_arrivee?.nom || '-'}</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span style={{ background: '#f1f5f9', padding: '2px 8px', borderRadius: 9999, fontSize: 12, fontWeight: 600 }}>
+                      {l?.lignes_gares?.length || 0} arrêt(s)
+                    </span>
+                  </td>
+                  <td>
+                    {l?.fh_url ? (
+                      <a href={l.fh_url} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: '#16a34a', textDecoration: 'none', fontWeight: 600, fontSize: 12.5 }}>
+                        <wcs-mat-icon icon="picture_as_pdf" size="s" /> PDF disponible
+                      </a>
+                    ) : (
+                      <span style={{ color: '#94a3b8', fontSize: 12.5 }}>Aucun PDF</span>
+                    )}
+                  </td>
+                  <td>
+                    <div className="horaires-row-actions">
+                      <wcs-button mode="stroked" size="s" onClick={() => openEditLigneModal(l)} disabled={!canUpdateLignes}>
+                        <wcs-mat-icon icon="edit" size="s" /> Modifier
+                      </wcs-button>
+                      <wcs-button mode="stroked" size="s" className="wcs-danger" onClick={() => handleDeleteLigne(l?.id)} disabled={!canDeleteLignes}>
+                        <wcs-mat-icon icon="delete" size="s" /> Supprimer
+                      </wcs-button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+
+  // ============================================================================
+  // RENDERING SERVICES TAB
+  // ============================================================================
+
+  const renderServicesTab = () => (
+    <div style={{ background: '#ffffff', borderRadius: 16, border: '1px solid #e2e8f0', padding: 24, boxShadow: '0 4px 20px -2px rgba(15, 23, 42, 0.06)' }}>
+      <div className="horaires-section-header">
+        <h3 className="horaires-section-title">
+          <wcs-mat-icon icon="event" size="m" style={{ color: '#0088ce' }} />
+          Services Annuels & Périodes de Circulation
+        </h3>
+        <wcs-button className="wcs-primary" onClick={openCreateServiceModal} disabled={!canCreateServices}>
+          <wcs-mat-icon icon="add" size="s" /> Nouveau service annuel
+        </wcs-button>
+      </div>
+
+      <p className="horaires-section-description">
+        Administrez les grilles de validité temporelle (ex: SA 2025, Service Été 2025) rattachées aux sillons de circulation.
+      </p>
+
+      {loading ? (
+        <div className="horaires-loading">Chargement des services annuels...</div>
+      ) : servicesAnnuels.length === 0 ? (
+        <div className="horaires-empty-state">
+          <wcs-mat-icon icon="event" className="horaires-empty-icon" />
+          <p className="horaires-empty-text">Aucun service annuel configuré</p>
+          <wcs-button className="wcs-primary" onClick={openCreateServiceModal} disabled={!canCreateServices}>
+            <wcs-mat-icon icon="add" size="s" /> Créer un service annuel
+          </wcs-button>
+        </div>
+      ) : (
+        <div className="table-container">
+          <table className="wcs-table">
+            <thead>
+              <tr>
+                <th>Nom du service</th>
+                <th>Code</th>
+                <th>Date de début</th>
+                <th>Date de fin</th>
+                <th>Description</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {servicesAnnuels.map((s, i) => (
+                <tr key={s?.id ?? i}>
+                  <td><strong>{s?.nom || '-'}</strong></td>
+                  <td>
+                    {s?.code ? (
+                      <span style={{ background: '#fef3c7', color: '#92400e', padding: '2px 8px', borderRadius: 4, fontWeight: 700, fontSize: 12 }}>
+                        {s.code}
+                      </span>
+                    ) : '-'}
+                  </td>
+                  <td>{formatDate(s?.date_debut)}</td>
+                  <td>{formatDate(s?.date_fin)}</td>
+                  <td><span style={{ color: '#475569', fontSize: 13 }}>{s?.description || '-'}</span></td>
+                  <td>
+                    <div className="horaires-row-actions">
+                      <wcs-button mode="stroked" size="s" onClick={() => openEditServiceModal(s)} disabled={!canUpdateServices}>
+                        <wcs-mat-icon icon="edit" size="s" /> Modifier
+                      </wcs-button>
+                      <wcs-button mode="stroked" size="s" className="wcs-danger" onClick={() => handleDeleteService(s?.id)} disabled={!canDeleteServices}>
+                        <wcs-mat-icon icon="delete" size="s" /> Supprimer
+                      </wcs-button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+
+  // ============================================================================
+  // RENDERING QUAIS TAB
+  // ============================================================================
+
+  const renderQuaisTab = () => {
     const filteredQuaiHoraires = horaires.filter(h => {
       if (!quaiSearchQuery?.trim()) return true;
       const q = quaiSearchQuery.toLowerCase();
       return (
-          (h.numero_train || '').toLowerCase().includes(q) ||
-          (h.gare_depart_nom || '').toLowerCase().includes(q) ||
-          (h.gare_arrivee_nom || '').toLowerCase().includes(q) ||
-          (h.ligne_nom || '').toLowerCase().includes(q)
+        (h.numero_train || '').toLowerCase().includes(q) ||
+        (h.gare_depart_nom || '').toLowerCase().includes(q) ||
+        (h.gare_arrivee_nom || '').toLowerCase().includes(q) ||
+        (h.ligne_nom || '').toLowerCase().includes(q)
       );
     });
 
-    const openQuaiModal = (horaire) => {
-      setQuaiSelectedHoraire(horaire);
-      // Initialiser les assignments depuis les données existantes
-      const assignments = {};
-      const normalizedDesservies = normalizeHoraireDesservies(horaire);
-
-      // Gare de départ
-      const storedDepart = quaiAssignments[`${horaire.id}_depart`] || normalizedDesservies.depart?.quai || horaire.quai_depart || '';
-      if (storedDepart) {
-        // storedDepart peut être un nom ou un id ; essayer de résoudre en id
-        const gareDepart = garesList.find(g => String(g.id) === String(horaire.gare_depart_id) || g.nom === horaire.gare_depart_nom);
-        assignments['depart'] = resolveQuaiIdFromNom(gareDepart, storedDepart);
-      } else {
-        assignments['depart'] = '';
-      }
-
-      // Gares desservies
-      const filteredDesservies = normalizedDesservies.intermediaires;
-      filteredDesservies.forEach((g, idx) => {
-        const key = getDesservieKey(g, idx);
-        const stored = quaiAssignments[`${horaire.id}_${key}`] || g.quai || '';
-        if (stored) {
-          const gareObj = garesList.find(gg => String(gg.id) === String(g.gare_id) || gg.nom === g.gare_nom);
-          assignments[key] = resolveQuaiIdFromNom(gareObj, stored);
-        } else {
-          assignments[key] = '';
-        }
-      });
-
-      // Gare d'arrivée
-      const storedArr = quaiAssignments[`${horaire.id}_arrivee`] || normalizedDesservies.arrivee?.quai || horaire.quai_arrivee || '';
-      if (storedArr) {
-        const gareArr = garesList.find(g => String(g.id) === String(horaire.gare_arrivee_id) || g.nom === horaire.gare_arrivee_nom);
-        assignments['arrivee'] = resolveQuaiIdFromNom(gareArr, storedArr);
-      } else {
-        assignments['arrivee'] = '';
-      }
-      setQuaiAssignments(prev => ({ ...prev, [`_modal_${horaire.id}`]: assignments }));
-      setShowQuaiModal(true);
-    };
-
-    const closeQuaiModal = () => {
-      setShowQuaiModal(false);
-      setQuaiSelectedHoraire(null);
-    };
-
-    const handleQuaiChange = (key, value) => {
-      if (!quaiSelectedHoraire) return;
-      setQuaiAssignments(prev => ({
-        ...prev,
-        [`_modal_${quaiSelectedHoraire.id}`]: {
-          ...(prev[`_modal_${quaiSelectedHoraire.id}`] || {}),
-          [key]: value
-        }
-      }));
-    };
-
-    const handleSaveQuais = async (horaireIdFromModal, payloadFromModal) => {
-      // Allows both list view modal and schematic view modal to save
-      const targetHoraireId = horaireIdFromModal || (quaiSelectedHoraire ? quaiSelectedHoraire.id : null);
-      if (!targetHoraireId) return;
-
-      setQuaiSaving(true);
-      try {
-        let quaisParOrdre = {};
-
-        if (payloadFromModal) {
-            quaisParOrdre = payloadFromModal;
-        } else if (quaiSelectedHoraire) {
-            const modalAssignments = quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {};
-            const gares = normalizeHoraireDesservies(quaiSelectedHoraire).intermediaires;
-            gares.forEach((g, idx) => {
-              const key = getDesservieKey(g, idx);
-              const quaiId = modalAssignments[key] || '';
-              // Chercher le nom du quai dans la liste de la gare
-              const gareObj = garesList.find(gg => String(gg.id) === String(g.gare_id) || gg.nom === g.gare_nom);
-              const quaiObj = gareObj?.gare_quais?.find(q => String(q.id) === String(quaiId));
-              quaisParOrdre[g.ordre ?? idx + 1] = quaiObj ? quaiObj.nom : (quaiId || null);
-            });
-
-            // Inclure les quais de départ/arrivée
-            if (Object.prototype.hasOwnProperty.call(modalAssignments, 'depart')) {
-              const departId = modalAssignments['depart'] || '';
-              const gareDepartObj = garesList.find(gg => String(gg.id) === String(quaiSelectedHoraire.gare_depart_id) || gg.nom === quaiSelectedHoraire.gare_depart_nom);
-              const departQuaiObj = gareDepartObj?.gare_quais?.find(q => String(q.id) === String(departId));
-              quaisParOrdre['depart'] = departQuaiObj ? departQuaiObj.nom : (departId || null);
-            }
-            if (Object.prototype.hasOwnProperty.call(modalAssignments, 'arrivee')) {
-              const arriveeId = modalAssignments['arrivee'] || '';
-              const gareArrObj = garesList.find(gg => String(gg.id) === String(quaiSelectedHoraire.gare_arrivee_id) || gg.nom === quaiSelectedHoraire.gare_arrivee_nom);
-              const arriveeQuaiObj = gareArrObj?.gare_quais?.find(q => String(q.id) === String(arriveeId));
-              quaisParOrdre['arrivee'] = arriveeQuaiObj ? arriveeQuaiObj.nom : (arriveeId || null);
-            }
-        }
-
-        // Sauvegarder en BDD
-        const { error: saveErr } = await updateQuaisHoraire(targetHoraireId, quaisParOrdre);
-        if (saveErr) {
-          alert('Erreur lors de la sauvegarde des quais: ' + (saveErr.message || 'Erreur'));
-          setQuaiSaving(false);
-          return;
-        }
-
-        // Recharger les horaires pour refléter les quais mis à jour
-        await loadData();
-        if (quaiSelectedHoraire) {
-           closeQuaiModal();
-        }
-      } catch (err) {
-        console.error('Erreur sauvegarde quais:', err);
-        alert('Erreur lors de la sauvegarde des quais');
-      }
-      setQuaiSaving(false);
-    };
-
-    const handleSetDefaultQuais = () => {
-      if (!quaiSelectedHoraire) return;
-      if (!window.confirm('Définir les quais actuels comme quais par défaut pour cet horaire ?')) return;
-      // Copier les quais actuels comme défaut
-      const modalAssignments = quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {};
-      const defaults = { ...quaiAssignments };
-      Object.entries(modalAssignments).forEach(([key, value]) => {
-        defaults[`default_${quaiSelectedHoraire.id}_${key}`] = value;
-      });
-      setQuaiAssignments(defaults);
-      alert('Quais par défaut enregistrés.');
-    };
-
-    // Trouver les quais d'une gare par id (prioritaire) ou nom
-    const getQuaisForGare = (gareId, gareNom) => {
-      const gareById = gareId ? garesList.find(g => String(g.id) === String(gareId)) : null;
-      const gare = gareById || garesList.find(g => g.nom === gareNom);
-      if (!gare) return [];
-      return gare.gare_quais || [];
-    };
-
     return (
-        <div className="horaires-tab-panel">
-          <div className="horaires-section-header">
-            <h3 className="horaires-section-title">Attribution des quais</h3>
-            
-            <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-               {(quaiViewMode === 'schematique' || quaiViewMode === 'depart_arrivee') && (
-                  <select 
-                     value={quaiGareSelectionneeId} 
-                     onChange={(e) => setQuaiGareSelectionneeId(e.target.value)}
-                     style={{ padding: '6px 10px', borderRadius: '4px', border: '1px solid #ccc' }}
-                  >
-                     <option value="">Sélectionner une gare</option>
-                     {garesList.map(g => (
-                        <option key={g.id} value={g.id}>{g.nom}</option>
-                     ))}
-                  </select>
-               )}
-            
-                <div style={{ display: 'flex', background: '#f0f0f0', borderRadius: '6px', padding: '4px' }}>
-                  <button
-                    onClick={() => setQuaiViewMode('liste')}
-                    style={{
-                      border: 'none', background: quaiViewMode === 'liste' ? '#fff' : 'transparent',
-                      color: quaiViewMode === 'liste' ? '#0047ab' : '#555', padding: '6px 12px',
-                      borderRadius: '4px', cursor: 'pointer', fontWeight: quaiViewMode === 'liste' ? 'bold' : 'normal',
-                      boxShadow: quaiViewMode === 'liste' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
-                    }}
-                  >
-                    Liste
-                  </button>
-                  <button
-                    onClick={() => setQuaiViewMode('schematique')}
-                    style={{
-                      border: 'none', background: quaiViewMode === 'schematique' ? '#fff' : 'transparent',
-                      color: quaiViewMode === 'schematique' ? '#0047ab' : '#555', padding: '6px 12px',
-                      borderRadius: '4px', cursor: 'pointer', fontWeight: quaiViewMode === 'schematique' ? 'bold' : 'normal',
-                      boxShadow: quaiViewMode === 'schematique' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
-                    }}
-                  >
-                    Schématique
-                  </button>
-                  <button
-                    onClick={() => setQuaiViewMode('depart_arrivee')}
-                    style={{
-                      border: 'none', background: quaiViewMode === 'depart_arrivee' ? '#fff' : 'transparent',
-                      color: quaiViewMode === 'depart_arrivee' ? '#0047ab' : '#555', padding: '6px 12px',
-                      borderRadius: '4px', cursor: 'pointer', fontWeight: quaiViewMode === 'depart_arrivee' ? 'bold' : 'normal',
-                      boxShadow: quaiViewMode === 'depart_arrivee' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
-                    }}
-                  >
-                    Départs / Arrivées
-                  </button>
-                </div>
+      <div style={{ background: '#ffffff', borderRadius: 16, border: '1px solid #e2e8f0', padding: 24, boxShadow: '0 4px 20px -2px rgba(15, 23, 42, 0.06)' }}>
+        <div className="horaires-section-header">
+          <h3 className="horaires-section-title">
+            <wcs-mat-icon icon="view_column" size="m" style={{ color: '#0088ce' }} />
+            Attribution des Voies & Quais
+          </h3>
 
-                <input
-                    type="search"
-                    placeholder="Rechercher un horaire..."
-                    value={quaiSearchQuery}
-                    onChange={e => setQuaiSearchQuery(e.target.value)}
-                    className="horaires-search-input horaires-search-input-wide"
-                />
+          <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
+            {(quaiViewMode === 'schematique' || quaiViewMode === 'depart_arrivee') && (
+              <select
+                value={quaiGareSelectionneeId}
+                onChange={(e) => setQuaiGareSelectionneeId(e.target.value)}
+                className="horaires-field"
+                style={{ width: 'auto', minWidth: 200 }}
+              >
+                <option value="">Sélectionner une gare</option>
+                {garesList.map(g => (
+                  <option key={g.id} value={g.id}>{g.nom}</option>
+                ))}
+              </select>
+            )}
+
+            <div style={{ display: 'flex', background: '#e2e8f0', borderRadius: 8, padding: 3 }}>
+              <button
+                onClick={() => setQuaiViewMode('liste')}
+                style={{
+                  border: 'none',
+                  background: quaiViewMode === 'liste' ? '#ffffff' : 'transparent',
+                  color: quaiViewMode === 'liste' ? '#0f172a' : '#64748b',
+                  padding: '6px 12px',
+                  borderRadius: 6,
+                  cursor: 'pointer',
+                  fontWeight: 600,
+                  fontSize: 13,
+                  boxShadow: quaiViewMode === 'liste' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
+                }}
+              >
+                Liste
+              </button>
+              <button
+                onClick={() => setQuaiViewMode('schematique')}
+                style={{
+                  border: 'none',
+                  background: quaiViewMode === 'schematique' ? '#ffffff' : 'transparent',
+                  color: quaiViewMode === 'schematique' ? '#0f172a' : '#64748b',
+                  padding: '6px 12px',
+                  borderRadius: 6,
+                  cursor: 'pointer',
+                  fontWeight: 600,
+                  fontSize: 13,
+                  boxShadow: quaiViewMode === 'schematique' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
+                }}
+              >
+                Schématique
+              </button>
+              <button
+                onClick={() => setQuaiViewMode('depart_arrivee')}
+                style={{
+                  border: 'none',
+                  background: quaiViewMode === 'depart_arrivee' ? '#ffffff' : 'transparent',
+                  color: quaiViewMode === 'depart_arrivee' ? '#0f172a' : '#64748b',
+                  padding: '6px 12px',
+                  borderRadius: 6,
+                  cursor: 'pointer',
+                  fontWeight: 600,
+                  fontSize: 13,
+                  boxShadow: quaiViewMode === 'depart_arrivee' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none'
+                }}
+              >
+                Départs / Arrivées
+              </button>
+            </div>
+
+            <div className="horaires-search-wrap" style={{ maxWidth: 260 }}>
+              <wcs-mat-icon icon="search" size="s" />
+              <input
+                type="search"
+                placeholder="Filtrer les sillons..."
+                value={quaiSearchQuery}
+                onChange={e => setQuaiSearchQuery(e.target.value)}
+                className="horaires-search-input"
+              />
             </div>
           </div>
+        </div>
 
-          <p className="horaires-section-description">
-            Cliquez sur un horaire pour attribuer les quais aux différentes gares du parcours.
-          </p>
+        <p className="horaires-section-description">
+          Supervisez et affectez les voies de circulation et quais pour chaque arrêt des trains programmés.
+        </p>
 
-          {loading ? <p className="horaires-loading">Chargement...</p> : quaiViewMode === 'liste' ? (
-             filteredQuaiHoraires.length === 0 ? (
-                <div className="horaires-empty-state horaires-empty-state-compact">
-                  <wcs-mat-icon icon="format_list_numbered" className="horaires-empty-icon" />
-                  <p className="horaires-empty-text">Aucun horaire trouvé</p>
-                </div>
-            ) : (
-                <div className="table-container">
-                  <table className="wcs-table horaires-table-full horaires-responsive-table horaires-responsive-table-quais">
-                    <thead>
-                    <tr>
-                      <th>N° Train</th>
-                      <th>Type</th>
-                      <th>Départ</th>
-                      <th>Arrivée</th>
-                      <th>Ligne</th>
-                      <th>Quais attribués</th>
-                      <th>Action</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {filteredQuaiHoraires.slice(0, 50).map((h, i) => {
-                      const hasQuaisState = Object.keys(quaiAssignments).some(k => k.startsWith(`${h.id}_`) && quaiAssignments[k]);
-                      const hasQuaisBDD = normalizeHoraireDesservies(h).all.some(g => g && g.quai);
-                      const hasQuais = hasQuaisState || hasQuaisBDD;
-                      return (
-                          <tr
-                              key={h.id || i}
-                              className="horaires-clickable-row"
-                              onClick={() => openQuaiModal(h)}
-                          >
-                            <td data-label="N° Train"><strong>{h.numero_train || '-'}</strong></td>
-                            <td data-label="Type">{h.type_train || '-'}</td>
-                            <td data-label="Départ">{h.gare_depart_nom || '-'} <small className="horaires-time-muted">{formatHeure(h.heure_depart)}</small></td>
-                            <td data-label="Arrivée">{h.gare_arrivee_nom || '-'} <small className="horaires-time-muted">{formatHeure(h.heure_arrivee)}</small></td>
-                            <td data-label="Ligne">{h.ligne_nom || '-'}</td>
-                            <td data-label="Quais attribués">
-                              {hasQuais ? (
-                                  <span className="horaires-status-success">
-                            <wcs-mat-icon icon="check_circle" size="s" style={{ verticalAlign: 'middle', marginRight: 4 }} />
-                            Attribués
-                          </span>
-                              ) : (
-                                  <span className="horaires-status-muted">Non attribués</span>
-                              )}
-                            </td>
-                            <td data-label="Action" onClick={e => e.stopPropagation()}>
-                              <wcs-button mode="stroked" size="s" onClick={() => openQuaiModal(h)}>
-                                <wcs-mat-icon icon="edit" size="s" /> Attribuer
-                              </wcs-button>
-                            </td>
-                          </tr>
-                      );
-                    })}
-                    </tbody>
-                  </table>
-                </div>
-            )
-          ) : quaiViewMode === 'schematique' ? (
-            /* Mode schématique */
-            <div style={{ height: '600px', border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden' }}>
-               <AttributionQuaisSchematique 
-                 horaires={filteredQuaiHoraires}
-                 gareSelectionnee={garesList.find(g => String(g.id) === quaiGareSelectionneeId) || null}
-                 onUpdateQuai={handleSaveQuais}
-                 onUpdateQuaisBatch={async (updates) => {
-                    const { error } = await updateQuaisBatch(updates);
-                    if (error) {
-                       alert("Certaines attributions ont échoué.");
-                    }
-                    await loadData();
-                 }}
-               />
+        {loading ? (
+          <div className="horaires-loading">Chargement des attributions de quais...</div>
+        ) : quaiViewMode === 'liste' ? (
+          filteredQuaiHoraires.length === 0 ? (
+            <div className="horaires-empty-state">
+              <wcs-mat-icon icon="view_column" className="horaires-empty-icon" />
+              <p className="horaires-empty-text">Aucun horaire trouvé pour les critères sélectionnés.</p>
             </div>
           ) : (
-            /* Mode départs/arrivées */
-            <div style={{ height: '600px', border: '1px solid #e5e7eb', borderRadius: '8px', overflow: 'hidden' }}>
-               <AttributionQuaisDepartArrivee 
-                 horaires={filteredQuaiHoraires}
-                 gareSelectionnee={garesList.find(g => String(g.id) === quaiGareSelectionneeId) || null}
-                 onUpdateQuai={handleSaveQuais}
-               />
+            <div className="table-container">
+              <table className="wcs-table">
+                <thead>
+                  <tr>
+                    <th>N° Train</th>
+                    <th>Type</th>
+                    <th>Origine</th>
+                    <th>Destination</th>
+                    <th>Ligne</th>
+                    <th>Statut Quai</th>
+                    <th>Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredQuaiHoraires.slice(0, 50).map((h, i) => {
+                    const hasQuaisState = Object.keys(quaiAssignments).some(k => k.startsWith(`${h.id}_`) && quaiAssignments[k]);
+                    const hasQuaisBDD = normalizeHoraireDesservies(h).all.some(g => g && g.quai);
+                    const hasQuais = hasQuaisState || hasQuaisBDD;
+
+                    return (
+                      <tr
+                        key={h.id || i}
+                        className="horaires-clickable-row"
+                        onClick={() => openQuaiModal(h)}
+                      >
+                        <td><strong>{h.numero_train || '-'}</strong></td>
+                        <td><span className="train-type-pill">{h.type_train || '-'}</span></td>
+                        <td>
+                          <div>{h.gare_depart_nom || '-'}</div>
+                          <small className="time-highlight">{formatHeure(h.heure_depart)}</small>
+                        </td>
+                        <td>
+                          <div>{h.gare_arrivee_nom || '-'}</div>
+                          <small className="time-highlight">{formatHeure(h.heure_arrivee)}</small>
+                        </td>
+                        <td>{h.ligne_nom || '-'}</td>
+                        <td>
+                          {hasQuais ? (
+                            <span className="horaires-status-success">
+                              <wcs-mat-icon icon="check_circle" size="s" />
+                              Quais attribués
+                            </span>
+                          ) : (
+                            <span className="horaires-status-muted">Non attribués</span>
+                          )}
+                        </td>
+                        <td onClick={e => e.stopPropagation()}>
+                          <wcs-button mode="stroked" size="s" onClick={() => openQuaiModal(h)}>
+                            <wcs-mat-icon icon="edit" size="s" /> Configurer
+                          </wcs-button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
             </div>
-          )}
-
-          {/* Modal attribution des quais (Mode liste) */}
-          {showQuaiModal && quaiSelectedHoraire && (
-              <div className="modal-overlay" onClick={closeQuaiModal}>
-                <div className="modal-content horaires-modal-medium" onClick={e => e.stopPropagation()}>
-                  <div className="modal-header">
-                    <h3>Attribution des quais - Train {quaiSelectedHoraire.numero_train}</h3>
-                    <button className="modal-close" onClick={closeQuaiModal}>×</button>
-                  </div>
-                  <div className="modal-body horaires-modal-body">
-                    <div className="horaires-trajet-banner">
-                      <strong>{quaiSelectedHoraire.gare_depart_nom}</strong> ({formatHeure(quaiSelectedHoraire.heure_depart)})
-                      → <strong>{quaiSelectedHoraire.gare_arrivee_nom}</strong> ({formatHeure(quaiSelectedHoraire.heure_arrivee)})
-                    </div>
-
-                    {/* Gare de départ */}
-                    <div className="horaires-quai-card">
-                      <div className="quai-row-modal horaires-quai-row-modal">
-                        <div>
-                          <strong>Départ:</strong> {quaiSelectedHoraire.gare_depart_nom}
-                          <small style={{ marginLeft: 8, color: '#666' }}>{formatHeure(quaiSelectedHoraire.heure_depart)}</small>
-                        </div>
-                        <select
-                            className="horaires-quai-select"
-                            value={(quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {})['depart'] || ''}
-                            onChange={e => handleQuaiChange('depart', e.target.value)}
-                        >
-                          <option value="">Aucun quai</option>
-                          {getQuaisForGare(quaiSelectedHoraire.gare_depart_id, quaiSelectedHoraire.gare_depart_nom).map(q => (
-                              <option key={q.id} value={q.id}>{q.nom}</option>
-                          ))}
-                        </select>
-                      </div>
-                    </div>
-
-                    {/* Gares desservies */}
-                    {getFilteredDesservies(quaiSelectedHoraire).map((g, idx) => (
-                        <div key={getDesservieKey(g, idx)} className="horaires-quai-card">
-                          <div className="quai-row-modal horaires-quai-row-modal">
-                            <div>
-                              <strong>Arrêt:</strong> {g.gare_nom}
-                              <small style={{ marginLeft: 8, color: '#666' }}>
-                                {g.heure_arrivee ? formatHeure(g.heure_arrivee) : ''} → {g.heure_depart ? formatHeure(g.heure_depart) : ''}
-                              </small>
-                            </div>
-                            <select
-                                className="horaires-quai-select"
-                                value={(quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {})[getDesservieKey(g, idx)] || ''}
-                                onChange={e => handleQuaiChange(getDesservieKey(g, idx), e.target.value)}
-                            >
-                              <option value="">Aucun quai</option>
-                              {getQuaisForGare(g.gare_id, g.gare_nom).map(q => (
-                                  <option key={q.id} value={q.id}>{q.nom}</option>
-                              ))}
-                            </select>
-                          </div>
-                        </div>
-                    ))}
-
-                    {/* Gare d'arrivée */}
-                    <div className="horaires-quai-card">
-                      <div className="quai-row-modal horaires-quai-row-modal">
-                        <div>
-                          <strong>Arrivée:</strong> {quaiSelectedHoraire.gare_arrivee_nom}
-                          <small style={{ marginLeft: 8, color: '#666' }}>{formatHeure(quaiSelectedHoraire.heure_arrivee)}</small>
-                        </div>
-                        <select
-                            className="horaires-quai-select"
-                            value={(quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {})['arrivee'] || ''}
-                            onChange={e => handleQuaiChange('arrivee', e.target.value)}
-                        >
-                          <option value="">Aucun quai</option>
-                          {getQuaisForGare(quaiSelectedHoraire.gare_arrivee_id, quaiSelectedHoraire.gare_arrivee_nom).map(q => (
-                              <option key={q.id} value={q.id}>{q.nom}</option>
-                          ))}
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="modal-footer" style={{ display: 'flex', justifyContent: 'space-between' }}>
-                    <wcs-button mode="stroked" onClick={handleSetDefaultQuais} disabled={quaiSaving}>
-                      <wcs-mat-icon icon="star" size="s" /> Définir par défaut
-                    </wcs-button>
-                    <div style={{ display: 'flex', gap: 8 }}>
-                      <wcs-button mode="stroked" onClick={closeQuaiModal} disabled={quaiSaving}>Annuler</wcs-button>
-                      <wcs-button className="wcs-primary" onClick={() => handleSaveQuais()} disabled={quaiSaving}>
-                        {quaiSaving ? 'Enregistrement...' : 'Enregistrer'}
-                      </wcs-button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-          )}
-        </div>
+          )
+        ) : quaiViewMode === 'schematique' ? (
+          <div style={{ minHeight: 600, border: '1px solid #e2e8f0', borderRadius: 12, overflow: 'hidden' }}>
+            <AttributionQuaisSchematique
+              horaires={filteredQuaiHoraires}
+              gareSelectionnee={garesList.find(g => String(g.id) === quaiGareSelectionneeId) || null}
+              onUpdateQuai={handleSaveQuais}
+              onUpdateQuaisBatch={async (updates) => {
+                const { error: batchErr } = await updateQuaisBatch(updates);
+                if (batchErr) {
+                  alert("Certaines attributions ont échoué.");
+                }
+                await loadData();
+              }}
+            />
+          </div>
+        ) : (
+          <div style={{ minHeight: 600, border: '1px solid #e2e8f0', borderRadius: 12, overflow: 'hidden' }}>
+            <AttributionQuaisDepartArrivee
+              horaires={filteredQuaiHoraires}
+              gareSelectionnee={garesList.find(g => String(g.id) === quaiGareSelectionneeId) || null}
+              onUpdateQuai={handleSaveQuais}
+            />
+          </div>
+        )}
+      </div>
     );
-  }
+  };
 
-  function renderServiceModal() {
-    return (
-        <div className="modal-overlay" onClick={closeServiceModal}>
-          <div className="modal-content horaires-modal-small" onClick={e=>e.stopPropagation()}>
-            <div className="modal-header">
-              <h3>{editingService ? 'Modifier le service annuel' : 'Nouveau service annuel'}</h3>
-              <button className="modal-close" onClick={closeServiceModal}>×</button>
-            </div>
-            <div className="modal-body horaires-modal-body">
-              {formError && <wcs-alert intent="error" show><span slot="title">Erreur</span><span slot="subtitle">{formError}</span></wcs-alert>}
+  // ============================================================================
+  // RENDERING MODALS (LIGNE, SERVICE, ASSIGN, QUAI)
+  // ============================================================================
 
-              <div className="form-group horaires-form-group">
-                <label>Nom du service *</label>
-                <input className="horaires-field" type="text" value={serviceNom} onChange={e => setServiceNom(e.target.value)} placeholder="Ex: Hiver 2025-2026" />
-              </div>
+  const renderLigneModal = () => (
+    <div className="modal-overlay" onClick={closeLigneModal}>
+      <div className="modal-content horaires-modal-large" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{editingLigne ? 'Modifier la ligne' : 'Nouvelle ligne ferroviaire'}</h3>
+          <button className="modal-close" onClick={closeLigneModal}>×</button>
+        </div>
+        <div className="modal-body">
+          {formError && (
+            <wcs-alert intent="error" show style={{ marginBottom: 16 }}>
+              <span slot="title">Erreur</span>
+              <span slot="subtitle">{formError}</span>
+            </wcs-alert>
+          )}
 
-              <div className="form-group horaires-form-group">
-                <label>Code</label>
-                <input className="horaires-field" type="text" value={serviceCode} onChange={e => setServiceCode(e.target.value)} placeholder="Ex: H2526" />
+          <div className="horaires-modal-tabs">
+            {[
+              { key: 'infos', label: 'Informations & Tracé' },
+              { key: 'fiches-horaires', label: 'Fiche Horaire PDF' }
+            ].map(tab => (
+              <button
+                key={tab.key}
+                onClick={() => setLigneModalTab(tab.key)}
+                className={`horaires-modal-tab-btn ${ligneModalTab === tab.key ? 'is-active' : ''}`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {ligneModalTab === 'infos' && (
+            <>
+              <div className="form-group">
+                <label>Nom commercial de la ligne *</label>
+                <input
+                  className="horaires-field"
+                  type="text"
+                  value={ligneNom}
+                  onChange={e => setLigneNom(e.target.value)}
+                  placeholder="Ex: Paris Montparnasse - Rennes"
+                />
               </div>
 
               <div className="horaires-two-cols">
                 <div className="form-group">
-                  <label>Date de début *</label>
-                  <input className="horaires-field" type="date" value={serviceDateDebut} onChange={e => setServiceDateDebut(e.target.value)} />
+                  <label>Code Ligne</label>
+                  <input
+                    className="horaires-field"
+                    type="text"
+                    value={ligneCode}
+                    onChange={e => setLigneCode(e.target.value)}
+                    placeholder="Ex: L01"
+                  />
                 </div>
                 <div className="form-group">
-                  <label>Date de fin *</label>
-                  <input className="horaires-field" type="date" value={serviceDateFin} onChange={e => setServiceDateFin(e.target.value)} />
+                  <label>Région</label>
+                  <select
+                    className="horaires-field"
+                    value={ligneRegion}
+                    onChange={e => setLigneRegion(e.target.value)}
+                  >
+                    <option value="">Aucune région</option>
+                    {regionsList.map(r => <option key={r.id} value={r.id}>{r.nom}</option>)}
+                  </select>
                 </div>
               </div>
 
-              <div className="form-group horaires-form-group">
-                <label>Description</label>
-                <textarea className="horaires-field" value={serviceDescription} onChange={e => setServiceDescription(e.target.value)} rows={3} placeholder="Description du service annuel" />
+              <div className="horaires-two-cols">
+                <div className="form-group">
+                  <label>Gare de départ (Origine) *</label>
+                  <select
+                    className="horaires-field"
+                    value={ligneDepartId}
+                    onChange={e => setLigneDepartId(e.target.value)}
+                  >
+                    <option value="">Sélectionner une gare</option>
+                    {garesList.map(g => <option key={g.id} value={g.id}>{g.nom}</option>)}
+                  </select>
+                </div>
+                <div className="form-group">
+                  <label>Gare d'arrivée (Destination) *</label>
+                  <select
+                    className="horaires-field"
+                    value={ligneArriveeId}
+                    onChange={e => setLigneArriveeId(e.target.value)}
+                  >
+                    <option value="">Sélectionner une gare</option>
+                    {garesList.map(g => <option key={g.id} value={g.id}>{g.nom}</option>)}
+                  </select>
+                </div>
+              </div>
+
+              <div className="form-group">
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                  <label style={{ margin: 0 }}>Gares intermédiaires sur le tracé</label>
+                  <wcs-button mode="stroked" size="s" onClick={addGareTracee}>
+                    <wcs-mat-icon icon="add" size="s" /> Ajouter une gare
+                  </wcs-button>
+                </div>
+
+                <div className="horaires-trace-list">
+                  {garesTracees.length === 0 ? (
+                    <div className="horaires-trace-empty">Aucun arrêt intermédiaire paramétré</div>
+                  ) : (
+                    garesTracees.map((gt, idx) => (
+                      <div key={gt.id || idx} className="horaires-trace-row">
+                        <span className="horaires-trace-index">{idx + 1}.</span>
+                        <select
+                          className="horaires-field"
+                          value={gt.gare_id}
+                          onChange={e => updateGareTraceeField(idx, 'gare_id', e.target.value)}
+                        >
+                          <option value="">Sélectionner une gare</option>
+                          {garesList.map(g => <option key={g.id} value={g.id}>{g.nom}</option>)}
+                        </select>
+                        <select
+                          className="horaires-field"
+                          value={gt.desserte}
+                          onChange={e => updateGareTraceeField(idx, 'desserte', e.target.value)}
+                        >
+                          <option value="tous">Tous les trains</option>
+                          <option value="partielle">Partielle</option>
+                        </select>
+                        <wcs-button mode="stroked" size="s" onClick={() => removeGareTracee(idx)}>
+                          <wcs-mat-icon icon="delete" size="s" />
+                        </wcs-button>
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+
+          {ligneModalTab === 'fiches-horaires' && (
+            <div>
+              <p className="horaires-section-description">
+                Associez une fiche horaire PDF téléchargeable par les voyageurs sur les portails régionaux.
+              </p>
+
+              {ligneFHUrl && !ligneFHFile && (
+                <div className="horaires-pdf-current-card">
+                  <wcs-mat-icon icon="picture_as_pdf" style={{ color: '#16a34a', fontSize: 32 }} />
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontWeight: 700, color: '#15803d', fontSize: 13.5 }}>Fiche horaire actuellement active</div>
+                    <a
+                      href={ligneFHUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      style={{ fontSize: 12.5, color: '#0088ce', wordBreak: 'break-all' }}
+                    >
+                      {ligneFHUrl}
+                    </a>
+                  </div>
+                  <div style={{ display: 'flex', gap: 6 }}>
+                    <a href={ligneFHUrl} target="_blank" rel="noopener noreferrer">
+                      <wcs-button mode="stroked" size="s">
+                        <wcs-mat-icon icon="open_in_new" size="s" /> Ouvrir
+                      </wcs-button>
+                    </a>
+                    <wcs-button
+                      mode="stroked"
+                      size="s"
+                      onClick={async () => {
+                        if (!window.confirm('Supprimer la fiche horaire ?')) return;
+                        if (editingLigne?.id) {
+                          await deleteFicheHoraire(editingLigne.id);
+                          await updateLigne(editingLigne.id, {
+                            nom: ligneNom,
+                            code: ligneCode,
+                            gare_depart_id: ligneDepartId,
+                            gare_arrivee_id: ligneArriveeId,
+                            actif: true,
+                            fh_url: null
+                          }, garesTracees);
+                          await loadData();
+                        }
+                        setLigneFHUrl('');
+                      }}
+                      style={{ color: '#dc2626' }}
+                    >
+                      <wcs-mat-icon icon="delete" size="s" />
+                    </wcs-button>
+                  </div>
+                </div>
+              )}
+
+              <div
+                className="horaires-upload-dropzone"
+                onClick={() => document.getElementById('fh-pdf-input')?.click()}
+                onDragOver={e => e.preventDefault()}
+                onDrop={e => {
+                  e.preventDefault();
+                  const file = e.dataTransfer.files?.[0];
+                  if (file && file.type === 'application/pdf') {
+                    setLigneFHFile(file);
+                    setLigneFHError('');
+                  } else {
+                    setLigneFHError('Seuls les fichiers PDF sont acceptés.');
+                  }
+                }}
+              >
+                <input
+                  id="fh-pdf-input"
+                  type="file"
+                  accept="application/pdf,.pdf"
+                  style={{ display: 'none' }}
+                  onChange={e => {
+                    const file = e.target.files?.[0];
+                    if (file) {
+                      if (file.type !== 'application/pdf') {
+                        setLigneFHError('Seuls les fichiers PDF sont acceptés.');
+                        return;
+                      }
+                      setLigneFHFile(file);
+                      setLigneFHError('');
+                    }
+                  }}
+                />
+                {ligneFHFile ? (
+                  <div>
+                    <wcs-mat-icon icon="picture_as_pdf" style={{ fontSize: 40, color: '#0088ce', margin: '0 auto 8px', display: 'block' }} />
+                    <div style={{ fontWeight: 700, color: '#0f172a', fontSize: 14 }}>{ligneFHFile.name}</div>
+                    <div style={{ fontSize: 12, color: '#64748b', marginTop: 4 }}>
+                      {(ligneFHFile.size / 1024).toFixed(1)} Ko — Cliquez pour remplacer
+                    </div>
+                    <button
+                      onClick={e => { e.stopPropagation(); setLigneFHFile(null); setLigneFHError(''); }}
+                      style={{ marginTop: 10, background: 'none', border: '1px solid #e2e8f0', borderRadius: 6, padding: '4px 10px', cursor: 'pointer', color: '#dc2626', fontSize: 12 }}
+                    >
+                      Retirer le fichier
+                    </button>
+                  </div>
+                ) : (
+                  <div>
+                    <wcs-mat-icon icon="upload_file" style={{ fontSize: 40, color: '#94a3b8', margin: '0 auto 8px', display: 'block' }} />
+                    <div style={{ fontWeight: 600, color: '#334155', fontSize: 14, marginBottom: 4 }}>
+                      Glissez votre document PDF ici ou cliquez pour parcourir
+                    </div>
+                    <div style={{ fontSize: 12, color: '#94a3b8' }}>Format PDF uniquement</div>
+                  </div>
+                )}
+              </div>
+
+              {ligneFHError && (
+                <div style={{ marginTop: 8, color: '#dc2626', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>
+                  <wcs-mat-icon icon="error" size="s" /> {ligneFHError}
+                </div>
+              )}
+
+              <div className="horaires-info-note">
+                <wcs-mat-icon icon="info" size="s" />
+                Le fichier sera sauvegardé lors de l'enregistrement de la ligne.
               </div>
             </div>
-            <div className="modal-footer">
-              <wcs-button mode="stroked" onClick={closeServiceModal} disabled={saving}>Annuler</wcs-button>
-              <wcs-button className="wcs-primary" onClick={handleSaveService} disabled={saving || (!editingService && !canCreateServices) || (!!editingService && !canUpdateServices)}>{saving ? 'Enregistrement...' : (editingService ? 'Mettre à jour' : 'Créer')}</wcs-button>
+          )}
+        </div>
+        <div className="modal-footer">
+          <wcs-button mode="stroked" onClick={closeLigneModal} disabled={saving}>Annuler</wcs-button>
+          <wcs-button className="wcs-primary" onClick={handleSaveLigne} disabled={saving || ligneFHUploading}>
+            {saving || ligneFHUploading ? 'Enregistrement...' : (editingLigne ? 'Mettre à jour' : 'Créer la ligne')}
+          </wcs-button>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderServiceModal = () => (
+    <div className="modal-overlay" onClick={closeServiceModal}>
+      <div className="modal-content horaires-modal-small" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>{editingService ? 'Modifier le service annuel' : 'Nouveau service annuel'}</h3>
+          <button className="modal-close" onClick={closeServiceModal}>×</button>
+        </div>
+        <div className="modal-body">
+          {formError && (
+            <wcs-alert intent="error" show style={{ marginBottom: 16 }}>
+              <span slot="title">Erreur</span>
+              <span slot="subtitle">{formError}</span>
+            </wcs-alert>
+          )}
+
+          <div className="form-group">
+            <label>Nom du service annuel *</label>
+            <input
+              className="horaires-field"
+              type="text"
+              value={serviceNom}
+              onChange={e => setServiceNom(e.target.value)}
+              placeholder="Ex: Service Annuel 2025"
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Code</label>
+            <input
+              className="horaires-field"
+              type="text"
+              value={serviceCode}
+              onChange={e => setServiceCode(e.target.value)}
+              placeholder="Ex: SA25"
+            />
+          </div>
+
+          <div className="horaires-two-cols">
+            <div className="form-group">
+              <label>Date de début *</label>
+              <input
+                className="horaires-field"
+                type="date"
+                value={serviceDateDebut}
+                onChange={e => setServiceDateDebut(e.target.value)}
+              />
+            </div>
+            <div className="form-group">
+              <label>Date de fin *</label>
+              <input
+                className="horaires-field"
+                type="date"
+                value={serviceDateFin}
+                onChange={e => setServiceDateFin(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="form-group">
+            <label>Description</label>
+            <textarea
+              className="horaires-field"
+              value={serviceDescription}
+              onChange={e => setServiceDescription(e.target.value)}
+              rows={3}
+              placeholder="Remarques et validité du service annuel..."
+            />
+          </div>
+        </div>
+        <div className="modal-footer">
+          <wcs-button mode="stroked" onClick={closeServiceModal} disabled={saving}>Annuler</wcs-button>
+          <wcs-button className="wcs-primary" onClick={handleSaveService} disabled={saving}>
+            {saving ? 'Enregistrement...' : (editingService ? 'Mettre à jour' : 'Créer le service')}
+          </wcs-button>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderAssignLigneModal = () => (
+    <div className="modal-overlay" onClick={() => setAssignLigneModalOpen(false)}>
+      <div className="modal-content horaires-modal-small" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <h3>Attribuer {selectedHoraires.length} sillon(s) à une ligne</h3>
+          <button className="modal-close" onClick={() => setAssignLigneModalOpen(false)}>×</button>
+        </div>
+        <div className="modal-body">
+          <p style={{ marginBottom: 16, color: '#475569', fontSize: 13.5 }}>
+            Sélectionnez la ligne ferroviaire de rattachement pour les sillons sélectionnés :
+          </p>
+          <div className="form-group">
+            <label>Ligne cible *</label>
+            <select
+              className="horaires-field"
+              value={assignTargetLigne}
+              onChange={e => setAssignTargetLigne(e.target.value)}
+            >
+              <option value="">Sélectionnez une ligne</option>
+              {lignes.map(l => (
+                <option key={l.id} value={String(l.id)}>
+                  {l.nom || l.code || `Ligne ${l.id}`}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <div className="modal-footer">
+          <wcs-button mode="stroked" onClick={() => setAssignLigneModalOpen(false)} disabled={assignLoading}>
+            Annuler
+          </wcs-button>
+          <wcs-button className="wcs-primary" onClick={handleAssignSelectedToLigne} disabled={!assignTargetLigne || assignLoading}>
+            {assignLoading ? 'Attribution...' : 'Confirmer'}
+          </wcs-button>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderQuaiModalContent = () => {
+    if (!showQuaiModal || !quaiSelectedHoraire) return null;
+
+    return (
+      <div className="modal-overlay" onClick={closeQuaiModal}>
+        <div className="modal-content horaires-modal-medium" onClick={e => e.stopPropagation()}>
+          <div className="modal-header">
+            <h3>Voies & Quais - Train N° {quaiSelectedHoraire.numero_train}</h3>
+            <button className="modal-close" onClick={closeQuaiModal}>×</button>
+          </div>
+          <div className="modal-body">
+            <div className="horaires-trajet-banner">
+              <strong>{quaiSelectedHoraire.gare_depart_nom}</strong> ({formatHeure(quaiSelectedHoraire.heure_depart)})
+              → <strong>{quaiSelectedHoraire.gare_arrivee_nom}</strong> ({formatHeure(quaiSelectedHoraire.heure_arrivee)})
+            </div>
+
+            {/* Départ */}
+            <div className="horaires-quai-card">
+              <div className="horaires-quai-row-modal">
+                <div>
+                  <strong>Départ :</strong> {quaiSelectedHoraire.gare_depart_nom}
+                  <span style={{ marginLeft: 8, color: '#0088ce', fontWeight: 600 }}>{formatHeure(quaiSelectedHoraire.heure_depart)}</span>
+                </div>
+                <select
+                  className="horaires-quai-select"
+                  value={(quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {})['depart'] || ''}
+                  onChange={e => handleQuaiChange('depart', e.target.value)}
+                >
+                  <option value="">Aucun quai</option>
+                  {getQuaisForGare(quaiSelectedHoraire.gare_depart_id, quaiSelectedHoraire.gare_depart_nom).map(q => (
+                    <option key={q.id} value={q.id}>{q.nom}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            {/* Gares desservies */}
+            {getFilteredDesservies(quaiSelectedHoraire).map((g, idx) => (
+              <div key={getDesservieKey(g, idx)} className="horaires-quai-card">
+                <div className="horaires-quai-row-modal">
+                  <div>
+                    <strong>Arrêt :</strong> {g.gare_nom}
+                    <span style={{ marginLeft: 8, color: '#64748b', fontSize: 12.5 }}>
+                      {g.heure_arrivee ? formatHeure(g.heure_arrivee) : ''} → {g.heure_depart ? formatHeure(g.heure_depart) : ''}
+                    </span>
+                  </div>
+                  <select
+                    className="horaires-quai-select"
+                    value={(quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {})[getDesservieKey(g, idx)] || ''}
+                    onChange={e => handleQuaiChange(getDesservieKey(g, idx), e.target.value)}
+                  >
+                    <option value="">Aucun quai</option>
+                    {getQuaisForGare(g.gare_id, g.gare_nom).map(q => (
+                      <option key={q.id} value={q.id}>{q.nom}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            ))}
+
+            {/* Arrivée */}
+            <div className="horaires-quai-card">
+              <div className="horaires-quai-row-modal">
+                <div>
+                  <strong>Arrivée :</strong> {quaiSelectedHoraire.gare_arrivee_nom}
+                  <span style={{ marginLeft: 8, color: '#0088ce', fontWeight: 600 }}>{formatHeure(quaiSelectedHoraire.heure_arrivee)}</span>
+                </div>
+                <select
+                  className="horaires-quai-select"
+                  value={(quaiAssignments[`_modal_${quaiSelectedHoraire.id}`] || {})['arrivee'] || ''}
+                  onChange={e => handleQuaiChange('arrivee', e.target.value)}
+                >
+                  <option value="">Aucun quai</option>
+                  {getQuaisForGare(quaiSelectedHoraire.gare_arrivee_id, quaiSelectedHoraire.gare_arrivee_nom).map(q => (
+                    <option key={q.id} value={q.id}>{q.nom}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div className="modal-footer" style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <wcs-button mode="stroked" size="s" onClick={handleSetDefaultQuais} disabled={quaiSaving}>
+              <wcs-mat-icon icon="star" size="s" /> Définir comme défaut
+            </wcs-button>
+            <div style={{ display: 'flex', gap: 8 }}>
+              <wcs-button mode="stroked" onClick={closeQuaiModal} disabled={quaiSaving}>Annuler</wcs-button>
+              <wcs-button className="wcs-primary" onClick={() => handleSaveQuais()} disabled={quaiSaving}>
+                {quaiSaving ? 'Enregistrement...' : 'Enregistrer les quais'}
+              </wcs-button>
             </div>
           </div>
         </div>
+      </div>
     );
-  }
+  };
+
+  // ============================================================================
+  // MAIN RETURN
+  // ============================================================================
+
+  return (
+    <div className="sncf-groupe horaires-page-root">
+      <div className="panel-layout">
+        <div className="panel-nav">
+          <NavPanel />
+        </div>
+        <div className="panel-content horaires-modern-container">
+
+          {/* 1. HERO BANNER */}
+          <section className="horaires-hero-banner">
+            <div className="horaires-hero-content">
+              <div className="horaires-hero-tags">
+                <span className="horaires-kicker-pill">
+                  <wcs-mat-icon icon="schedule" size="s" />
+                  Plan de Transport
+                </span>
+                <span className="horaires-kicker-pill">
+                  <wcs-mat-icon icon="route" size="s" />
+                  Sillons & Desserte
+                </span>
+              </div>
+              <h1 className="horaires-hero-title">Gestion des Horaires & Sillons</h1>
+              <p className="horaires-hero-subtitle">
+                Supervisez les sillons de circulation, gérez le tracé des lignes commerciales, configurez les services annuels et administrez l'affectation des voies et quais.
+              </p>
+            </div>
+            <div className="horaires-hero-actions">
+              <wcs-button
+                className="wcs-secondary"
+                onClick={() => { window.location.href = '/horaires/imports'; }}
+                disabled={!canCreateHoraires}
+              >
+                <wcs-mat-icon icon="upload_file" />
+                Import Excel
+              </wcs-button>
+              <wcs-button
+                className="wcs-primary"
+                onClick={openCreateModal}
+                disabled={!canCreateHoraires}
+              >
+                <wcs-mat-icon icon="add" />
+                Nouveau Sillon
+              </wcs-button>
+            </div>
+          </section>
+
+          {/* Erreur globale */}
+          {error && (
+            <wcs-alert intent="error" show style={{ marginBottom: 20 }}>
+              <span slot="title">Erreur</span>
+              <span slot="subtitle">{error}</span>
+            </wcs-alert>
+          )}
+
+          {/* 2. KPI STAT CARDS */}
+          <section className="horaires-kpi-grid">
+            <div
+              className={`horaires-kpi-card ${mainTab === 'horaires' ? 'active' : ''}`}
+              onClick={() => { setMainTab('horaires'); setSelectedLigneFilter(null); }}
+            >
+              <div className="horaires-kpi-icon kpi-blue">
+                <wcs-mat-icon icon="schedule" />
+              </div>
+              <div className="horaires-kpi-info">
+                <span className="horaires-kpi-label">Total Sillons</span>
+                <span className="horaires-kpi-value">{stats.totalSillons}</span>
+                <span className="horaires-kpi-subtext">Circulations paramétrées</span>
+              </div>
+            </div>
+
+            <div
+              className={`horaires-kpi-card ${mainTab === 'lignes' ? 'active' : ''}`}
+              onClick={() => setMainTab('lignes')}
+            >
+              <div className="horaires-kpi-icon kpi-emerald">
+                <wcs-mat-icon icon="route" />
+              </div>
+              <div className="horaires-kpi-info">
+                <span className="horaires-kpi-label">Lignes Actives</span>
+                <span className="horaires-kpi-value">{stats.totalLignes}</span>
+                <span className="horaires-kpi-subtext">Axes commerciaux</span>
+              </div>
+            </div>
+
+            <div
+              className={`horaires-kpi-card ${mainTab === 'services' ? 'active' : ''}`}
+              onClick={() => setMainTab('services')}
+            >
+              <div className="horaires-kpi-icon kpi-amber">
+                <wcs-mat-icon icon="event" />
+              </div>
+              <div className="horaires-kpi-info">
+                <span className="horaires-kpi-label">Services Annuels</span>
+                <span className="horaires-kpi-value">{stats.totalServices}</span>
+                <span className="horaires-kpi-subtext">Périodes de validité</span>
+              </div>
+            </div>
+
+            <div
+              className={`horaires-kpi-card ${mainTab === 'quais' ? 'active' : ''}`}
+              onClick={() => setMainTab('quais')}
+            >
+              <div className="horaires-kpi-icon kpi-purple">
+                <wcs-mat-icon icon="view_column" />
+              </div>
+              <div className="horaires-kpi-info">
+                <span className="horaires-kpi-label">Quais Attribués</span>
+                <span className="horaires-kpi-value">{stats.quaisAttribues}</span>
+                <span className="horaires-kpi-subtext">Voies affectées</span>
+              </div>
+            </div>
+          </section>
+
+          {/* 3. SEGMENTED MAIN TABS */}
+          <div className="horaires-main-tabs-nav">
+            <button
+              className={`horaires-main-tab-btn ${mainTab === 'horaires' ? 'active' : ''}`}
+              onClick={() => setMainTab('horaires')}
+            >
+              <wcs-mat-icon icon="schedule" size="s" />
+              <span>Horaires (Sillons)</span>
+              <span className="horaires-main-tab-badge">{horaires.length}</span>
+            </button>
+
+            <button
+              className={`horaires-main-tab-btn ${mainTab === 'lignes' ? 'active' : ''}`}
+              onClick={() => setMainTab('lignes')}
+            >
+              <wcs-mat-icon icon="route" size="s" />
+              <span>Lignes</span>
+              <span className="horaires-main-tab-badge">{lignes.length}</span>
+            </button>
+
+            <button
+              className={`horaires-main-tab-btn ${mainTab === 'services' ? 'active' : ''}`}
+              onClick={() => setMainTab('services')}
+            >
+              <wcs-mat-icon icon="event" size="s" />
+              <span>Services Annuels</span>
+              <span className="horaires-main-tab-badge">{servicesAnnuels.length}</span>
+            </button>
+
+            <button
+              className={`horaires-main-tab-btn ${mainTab === 'quais' ? 'active' : ''}`}
+              onClick={() => setMainTab('quais')}
+            >
+              <wcs-mat-icon icon="view_column" size="s" />
+              <span>Attribution des quais</span>
+            </button>
+          </div>
+
+          {/* 4. CONTENU DE L'ONGLET SÉLECTIONNÉ */}
+          {mainTab === 'horaires' && renderHorairesTab()}
+          {mainTab === 'lignes' && renderLignesTab()}
+          {mainTab === 'services' && renderServicesTab()}
+          {mainTab === 'quais' && renderQuaisTab()}
+
+          {/* Modales secondaires */}
+          {showLigneModal && renderLigneModal()}
+          {showServiceModal && renderServiceModal()}
+          {assignLigneModalOpen && renderAssignLigneModal()}
+          {renderQuaiModalContent()}
+
+          {/* Modale Horaire (Création / Modification) */}
+          {showModal && (
+            <HoraireModal
+              initialData={editingItem}
+              isDuplicating={isDuplicating}
+              onClose={closeModal}
+              onSaveSuccess={() => {
+                loadData();
+              }}
+              lignes={lignes}
+              materiels={materiels}
+              typesTrainsList={typesTrainsList}
+              allGares={garesList}
+              servicesAnnuels={servicesAnnuels}
+              horaires={horaires}
+              currentUser={currentUser}
+              canCreateHoraires={canCreateHoraires}
+              canUpdateHoraires={canUpdateHoraires}
+            />
+          )}
+
+        </div>
+      </div>
+    </div>
+  );
 }
\ No newline at end of file
diff --git a/src/pages/horaires/ImportsPage.css b/src/pages/horaires/ImportsPage.css
index fdf5fb9..29cf10c 100644
--- a/src/pages/horaires/ImportsPage.css
+++ b/src/pages/horaires/ImportsPage.css
@@ -337,3 +337,103 @@
   box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4) !important;
   transform: translateY(-1px);
 }
+
+/* Dark Mode */
+body.dark-mode .imports-page-container,
+[data-theme="dark"] .imports-page-container {
+  color: #f1f5f9;
+}
+
+body.dark-mode .imports-header p,
+[data-theme="dark"] .imports-header p {
+  color: #94a3b8;
+}
+
+body.dark-mode .stepper-line,
+[data-theme="dark"] .stepper-line {
+  background-color: #243247;
+}
+
+body.dark-mode .step-circle,
+[data-theme="dark"] .step-circle {
+  background-color: #151f30;
+  border-color: #243247;
+  color: #94a3b8;
+}
+
+body.dark-mode .step-item.active .step-circle,
+[data-theme="dark"] .step-item.active .step-circle {
+  background-color: #0d2744;
+  border-color: #38bdf8;
+  color: #38bdf8;
+}
+
+body.dark-mode .step-label,
+[data-theme="dark"] .step-label {
+  color: #94a3b8;
+}
+
+body.dark-mode .step-item.active .step-label,
+[data-theme="dark"] .step-item.active .step-label {
+  color: #f8fafc;
+}
+
+body.dark-mode .step-content-card,
+[data-theme="dark"] .step-content-card {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .upload-dropzone,
+[data-theme="dark"] .upload-dropzone {
+  background: #0b111e;
+  border-color: #243247;
+}
+
+body.dark-mode .import-table-wrapper,
+[data-theme="dark"] .import-table-wrapper {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .import-table th,
+[data-theme="dark"] .import-table th {
+  background: #0e1726;
+  color: #94a3b8;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .import-table td,
+[data-theme="dark"] .import-table td {
+  border-bottom-color: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark-mode .import-table tbody tr:hover,
+[data-theme="dark"] .import-table tbody tr:hover {
+  background-color: #1a273c;
+}
+
+body.dark-mode .step-actions,
+[data-theme="dark"] .step-actions {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .info-box,
+[data-theme="dark"] .info-box {
+  background: #0d2744;
+  border-color: #0284c7;
+}
+
+body.dark-mode .info-box-title,
+[data-theme="dark"] .info-box-title {
+  color: #f8fafc;
+}
+
+body.dark-mode .info-box-text,
+[data-theme="dark"] .info-box-text {
+  color: #cbd5e1;
+}
+
diff --git a/src/pages/informations/Informations.css b/src/pages/informations/Informations.css
index b67c2e2..2ae50f5 100644
--- a/src/pages/informations/Informations.css
+++ b/src/pages/informations/Informations.css
@@ -764,3 +764,38 @@ wcs-tabs[headers-only] {
   border-color: #0b4a7a;
   box-shadow: 0 0 0 3px rgba(11, 74, 122, 0.1);
 }
+
+/* Dark Mode */
+body.dark-mode .informations-page,
+[data-theme="dark"] .informations-page {
+  background-color: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .informations-page-header,
+body.dark-mode .informations-tabs-shell,
+[data-theme="dark"] .informations-page-header,
+[data-theme="dark"] .informations-tabs-shell {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+}
+
+body.dark-mode .informations-page-header-main h2,
+[data-theme="dark"] .informations-page-header-main h2 {
+  color: #f8fafc;
+}
+
+body.dark-mode .informations-page-description,
+[data-theme="dark"] .informations-page-description {
+  color: #94a3b8;
+}
+
+body.dark-mode .ig-select,
+[data-theme="dark"] .ig-select {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
diff --git a/src/pages/login/Login.css b/src/pages/login/Login.css
index 68a141a..388025a 100644
--- a/src/pages/login/Login.css
+++ b/src/pages/login/Login.css
@@ -230,3 +230,52 @@
     justify-content: center;
   }
 }
+
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .admin-login-page,
+[data-theme="dark"] .admin-login-page {
+  background:
+    radial-gradient(ellipse at 15% 20%, rgba(0, 136, 206, 0.15) 0%, transparent 50%),
+    radial-gradient(ellipse at 85% 80%, rgba(131, 47, 112, 0.12) 0%, transparent 50%),
+    #0b111e;
+}
+
+body.dark-mode .admin-login-shell,
+[data-theme="dark"] .admin-login-shell {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
+}
+
+body.dark-mode .admin-login-panel,
+[data-theme="dark"] .admin-login-panel {
+  background: #151f30;
+}
+
+body.dark-mode .admin-login-panel-header h2,
+[data-theme="dark"] .admin-login-panel-header h2 {
+  color: #f8fafc;
+}
+
+body.dark-mode .admin-login-panel-header p,
+[data-theme="dark"] .admin-login-panel-header p {
+  color: #94a3b8;
+}
+
+body.dark-mode .admin-login-form label,
+[data-theme="dark"] .admin-login-form label {
+  color: #94a3b8;
+}
+
+body.dark-mode .admin-login-link,
+[data-theme="dark"] .admin-login-link {
+  color: #38bdf8;
+}
+
+body.dark-mode .admin-login-link:hover,
+[data-theme="dark"] .admin-login-link:hover {
+  color: #7dd3fc;
+}
+
diff --git a/src/pages/materiel-roulant/MaterielCard.js b/src/pages/materiel-roulant/MaterielCard.js
index 6219398..bb183ef 100644
--- a/src/pages/materiel-roulant/MaterielCard.js
+++ b/src/pages/materiel-roulant/MaterielCard.js
@@ -1,169 +1,161 @@
 import React, { useState, useEffect, useRef } from 'react';
 
 export default function MaterielCard({ materiel, onEdit, onDelete }) {
-    const [index, setIndex] = useState(0);
-    const imgContainerRef = useRef(null);
-    const imgRef = useRef(null);
-    const imgs = React.useMemo(() => {
-        if (!materiel) return [];
-        if (Array.isArray(materiel.images) && materiel.images.length > 0) return materiel.images;
-        if (Array.isArray(materiel.image_url) && materiel.image_url.length > 0) return materiel.image_url;
-        if (typeof materiel.image_url === 'string' && materiel.image_url) return [materiel.image_url];
-        return [];
-    }, [materiel]);
+  const [index, setIndex] = useState(0);
+  const imgContainerRef = useRef(null);
+  const imgRef = useRef(null);
+  const imgs = React.useMemo(() => {
+    if (!materiel) return [];
+    if (Array.isArray(materiel.images) && materiel.images.length > 0) return materiel.images;
+    if (Array.isArray(materiel.image_url) && materiel.image_url.length > 0) return materiel.image_url;
+    if (typeof materiel.image_url === 'string' && materiel.image_url) return [materiel.image_url];
+    return [];
+  }, [materiel]);
 
-    const [offsetX, setOffsetX] = useState(0);
-    const [maxOffset, setMaxOffset] = useState(0);
+  const [offsetX, setOffsetX] = useState(0);
+  const [maxOffset, setMaxOffset] = useState(0);
 
-    const recomputeSizes = () => {
-        const c = imgContainerRef.current;
-        const i = imgRef.current;
-        const cw = c ? c.clientWidth : 0;
-        const iw = (i && i.naturalWidth && i.naturalHeight && c) ? Math.round(i.naturalWidth * (c.clientHeight / i.naturalHeight)) : (i ? i.clientWidth : 0);
-        const computedMaxOffset = Math.min(0, Math.floor(cw - iw));
-        setMaxOffset(computedMaxOffset);
-        setOffsetX(prev => Math.max(computedMaxOffset, Math.min(0, prev)));
-    };
+  const recomputeSizes = () => {
+    const c = imgContainerRef.current;
+    const i = imgRef.current;
+    const cw = c ? c.clientWidth : 0;
+    const iw = (i && i.naturalWidth && i.naturalHeight && c) ? Math.round(i.naturalWidth * (c.clientHeight / i.naturalHeight)) : (i ? i.clientWidth : 0);
+    const computedMaxOffset = Math.min(0, Math.floor(cw - iw));
+    setMaxOffset(computedMaxOffset);
+    setOffsetX(prev => Math.max(computedMaxOffset, Math.min(0, prev)));
+  };
 
-    useEffect(() => {
-        recomputeSizes();
-        const onResize = () => recomputeSizes();
-        window.addEventListener('resize', onResize);
-        return () => window.removeEventListener('resize', onResize);
-    }, [index, imgs.length]);
+  useEffect(() => {
+    recomputeSizes();
+    const onResize = () => recomputeSizes();
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, [index, imgs.length]);
 
-    const next = (e) => {
-        e && e.stopPropagation();
-        if (!imgs || imgs.length === 0) return;
-        if (imgs.length > 1) {
-            setIndex((i) => (i + 1) % imgs.length);
-        } else {
-            const c = imgContainerRef.current;
-            if (!c) return;
-            const step = Math.max(80, Math.floor(c.clientWidth / 2));
-            setOffsetX(prev => Math.max(maxOffset, prev - step));
-        }
-    };
+  const next = (e) => {
+    e && e.stopPropagation();
+    if (!imgs || imgs.length === 0) return;
+    if (imgs.length > 1) {
+      setIndex((i) => (i + 1) % imgs.length);
+    } else {
+      const c = imgContainerRef.current;
+      if (!c) return;
+      const step = Math.max(80, Math.floor(c.clientWidth / 2));
+      setOffsetX(prev => Math.max(maxOffset, prev - step));
+    }
+  };
 
-    const prev = (e) => {
-        e && e.stopPropagation();
-        if (!imgs || imgs.length === 0) return;
-        if (imgs.length > 1) {
-            setIndex((i) => (i - 1 + imgs.length) % imgs.length);
-        } else {
-            const c = imgContainerRef.current;
-            if (!c) return;
-            const step = Math.max(80, Math.floor(c.clientWidth / 2));
-            setOffsetX(prev => Math.min(0, prev + step));
-        }
-    };
+  const prev = (e) => {
+    e && e.stopPropagation();
+    if (!imgs || imgs.length === 0) return;
+    if (imgs.length > 1) {
+      setIndex((i) => (i - 1 + imgs.length) % imgs.length);
+    } else {
+      const c = imgContainerRef.current;
+      if (!c) return;
+      const step = Math.max(80, Math.floor(c.clientWidth / 2));
+      setOffsetX(prev => Math.min(0, prev + step));
+    }
+  };
 
-    const current = imgs && imgs.length > 0 ? imgs[index] : null;
+  const current = imgs && imgs.length > 0 ? imgs[index] : null;
 
-    return (
-        <div
-            className="card materiel-card"
+  return (
+    <div
+      className="materiel-card-modern"
+      style={{
+        padding: '16px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        height: '100%'
+      }}
+    >
+      <div>
+        <div style={{ position: 'relative' }}>
+          <div
+            ref={imgContainerRef}
             style={{
-                border: '1px solid #e0e0e0',
-                borderRadius: 8,
-                padding: 12,
-                boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
-                background: '#fff',
-                display: 'flex',
-                flexDirection: 'column',
-                justifyContent: 'space-between',
-                height: '100%'
+              width: '100%',
+              height: 140,
+              borderRadius: 10,
+              marginBottom: 12,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-start',
+              overflow: 'hidden',
+              position: 'relative',
+              background: '#f1f5f9'
             }}
-        >
-            <div>
-                <div style={{ position: 'relative' }}>
-                    <div ref={imgContainerRef} style={{ width: '100%', height: 140, borderRadius: 6, marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'flex-start', overflow: 'hidden', position: 'relative' }}>
-                        {current ? (
-                            <img
-                                ref={imgRef}
-                                src={current}
-                                alt={materiel?.nom || ''}
-                                onLoad={() => recomputeSizes()}
-                                style={{ height: '100%', width: 'auto', objectFit: 'contain', objectPosition: 'left center', display: 'block', transform: `translateX(${offsetX}px)` }}
-                            />
-                        ) : (
-                            <div style={{ width: '100%', height: '100%', background: '#f5f5f5', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999', borderRadius: 6 }}>No image</div>
-                        )}
+          >
+            {current ? (
+              <img
+                ref={imgRef}
+                src={current}
+                alt={materiel?.nom || ''}
+                onLoad={() => recomputeSizes()}
+                style={{ height: '100%', width: 'auto', objectFit: 'contain', objectPosition: 'left center', display: 'block', transform: `translateX(${offsetX}px)` }}
+              />
+            ) : (
+              <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#94a3b8', gap: 4 }}>
+                <wcs-mat-icon icon="train" size="m"></wcs-mat-icon>
+                <span style={{ fontSize: 12 }}>Sans image</span>
+              </div>
+            )}
 
-                        {(() => {
-                            const isMulti = imgs.length > 1;
-                            const canPrev = isMulti ? index > 0 : offsetX < 0;
-                            const canNext = isMulti ? index < imgs.length - 1 : offsetX > maxOffset;
-                            return (
-                                <>
-                                    {canPrev && (
-                                        <button
-                                            aria-label="Précédent"
-                                            onClick={prev}
-                                            style={{
-                                                position: 'absolute',
-                                                left: 6,
-                                                top: '50%',
-                                                transform: 'translateY(-50%)',
-                                                background: 'rgba(0,0,0,0.55)',
-                                                color: '#fff',
-                                                border: 'none',
-                                                borderRadius: 6,
-                                                padding: '8px 10px',
-                                                cursor: 'pointer',
-                                                zIndex: 3,
-                                                boxShadow: '0 2px 6px rgba(0,0,0,0.2)'
-                                            }}
-                                        >
-                                            ‹
-                                        </button>
-                                    )}
+            {(() => {
+              const isMulti = imgs.length > 1;
+              const canPrev = isMulti ? index > 0 : offsetX < 0;
+              const canNext = isMulti ? index < imgs.length - 1 : offsetX > maxOffset;
+              return (
+                <>
+                  {canPrev && (
+                    <button
+                      aria-label="Précédent"
+                      onClick={prev}
+                      className="materiel-card-nav-btn prev"
+                    >
+                      <wcs-mat-icon icon="chevron_left" size="s"></wcs-mat-icon>
+                    </button>
+                  )}
 
-                                    {canNext && (
-                                        <button
-                                            aria-label="Suivant"
-                                            onClick={next}
-                                            style={{
-                                                position: 'absolute',
-                                                right: 6,
-                                                top: '50%',
-                                                transform: 'translateY(-50%)',
-                                                background: 'rgba(0,0,0,0.55)',
-                                                color: '#fff',
-                                                border: 'none',
-                                                borderRadius: 6,
-                                                padding: '8px 10px',
-                                                cursor: 'pointer',
-                                                zIndex: 3,
-                                                boxShadow: '0 2px 6px rgba(0,0,0,0.2)'
-                                            }}
-                                        >
-                                            ›
-                                        </button>
-                                    )}
-                                </>
-                            );
-                        })()}
-                    </div>
+                  {canNext && (
+                    <button
+                      aria-label="Suivant"
+                      onClick={next}
+                      className="materiel-card-nav-btn next"
+                    >
+                      <wcs-mat-icon icon="chevron_right" size="s"></wcs-mat-icon>
+                    </button>
+                  )}
+                </>
+              );
+            })()}
+          </div>
 
-                    <div style={{ marginBottom: 8 }}>
-                        <div style={{ fontWeight: 600, fontSize: 15 }}>{materiel?.nom ?? '-'}</div>
-                        <div style={{ fontSize: 12, color: '#666' }}>{materiel?.nom_technique ?? '-'}</div>
-                    </div>
+          <div style={{ marginBottom: 10 }}>
+            <div style={{ fontWeight: 800, fontSize: 16, color: '#0f172a' }}>{materiel?.nom ?? '-'}</div>
+            <div style={{ fontSize: 12, color: '#64748b', fontWeight: 600 }}>{materiel?.nom_technique ?? '-'}</div>
+          </div>
 
-                    <div style={{ fontSize: 13, color: '#333', marginBottom: 8 }}>
-                        <div>Capacité: <strong>{materiel?.capacite ?? '-'}</strong></div>
-                        <div>Type: <strong>{materiel?.type_train ?? '-'}</strong></div>
-                        <div>Numéro série: <strong>{materiel?.numero_serie ?? '-'}</strong></div>
-                    </div>
-                </div>
-
-                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 8 }}>
-                    <wcs-button onClick={onEdit}>Modifier</wcs-button>
-                    <wcs-button className="wcs-danger" onClick={onDelete}>Supprimer</wcs-button>
-                </div>
-            </div>
+          <div style={{ fontSize: 13, color: '#334155', display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 12 }}>
+            <div>Capacité : <strong>{materiel?.capacite ? `${materiel.capacite} places` : '-'}</strong></div>
+            <div>Type de train : <strong>{materiel?.type_train ?? '-'}</strong></div>
+            <div>N° de série : <strong>{materiel?.numero_serie ?? '-'}</strong></div>
+          </div>
         </div>
-    );
-}
 
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12, borderTop: '1px solid #f1f5f9', paddingTop: 10 }}>
+          <wcs-button className="wcs-secondary" onClick={onEdit}>
+            <wcs-mat-icon icon="edit" size="s"></wcs-mat-icon>
+            Modifier
+          </wcs-button>
+          <wcs-button className="wcs-danger" onClick={onDelete}>
+            <wcs-mat-icon icon="delete" size="s"></wcs-mat-icon>
+            Supprimer
+          </wcs-button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/materiel-roulant/MaterielRoulant.css b/src/pages/materiel-roulant/MaterielRoulant.css
index 8311162..14c3d67 100644
--- a/src/pages/materiel-roulant/MaterielRoulant.css
+++ b/src/pages/materiel-roulant/MaterielRoulant.css
@@ -1,196 +1,401 @@
-.materiels-page {
-  background: #f3f7fc;
+/* ═══════════════════════════════════════════════════════════════════════════
+   MATÉRIEL ROULANT & GESTION DU PARC - DESIGN SYSTEM WCS SNCF
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.materiels-page-root {
+  min-height: 100vh;
+  background-color: #f4f7fb;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
-.materiels-page-content {
-  width: min(1380px, 100%);
+.materiels-modern-container {
+  width: min(1420px, 100%);
   margin: 0 auto;
+  padding: 24px 28px 60px;
+  box-sizing: border-box;
 }
 
-.materiels-page-header {
-  background: linear-gradient(140deg, #082e4f 0%, #11507e 70%, #1d5f90 100%);
-  border-radius: 16px;
+/* ═══════════════════════════════════════════════════════════════════════════
+   1. HERO BANNER
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.materiels-hero-banner {
+  background: linear-gradient(135deg, #0b2545 0%, #134074 50%, #0074d9 100%);
+  border-radius: 20px;
   color: #f8fbff;
-  padding: 24px;
-  margin-bottom: 14px;
+  padding: 32px 36px;
+  margin-bottom: 24px;
   display: flex;
   justify-content: space-between;
-  gap: 14px;
-  align-items: flex-start;
-  box-shadow: 0 14px 35px rgba(8, 46, 79, 0.22);
+  align-items: center;
+  gap: 24px;
+  box-shadow: 0 16px 36px -10px rgba(11, 37, 69, 0.4);
+  position: relative;
+  overflow: hidden;
 }
 
-.materiels-page-kicker {
-  margin: 0 0 8px;
+.materiels-hero-banner::after {
+  content: '';
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 260px;
+  height: 260px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.materiels-hero-content {
+  max-width: 820px;
+  z-index: 1;
+}
+
+.materiels-hero-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.materiels-kicker-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fdf2f8;
+  font-size: 11px;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  font-size: 12px;
-}
-
-.materiels-page-header h2 {
-  margin: 0;
-  font-size: 30px;
-  color: white;
-}
-
-.materiels-page-description {
-  margin: 10px 0 0;
-  color: rgba(247, 251, 255, 0.9);
-}
-
-.materiels-alert {
-  margin-bottom: 1rem;
-}
-
-.materiels-toolbar {
-  margin-bottom: 14px;
-  padding: 10px;
-  border-radius: 12px;
-  border: 1px solid #dbe3ed;
-  background: #ffffff;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.materiels-toolbar-input,
-.materiels-toolbar-select {
-  min-height: 40px;
-  border: 1px solid #d1dae6;
-  border-radius: 10px;
-  padding: 0 12px;
-  font-size: 14px;
-  color: #1f2937;
-  background: #ffffff;
-}
-
-.materiels-toolbar-input {
-  min-width: 240px;
-}
-
-.materiels-toolbar-reset {
-  min-height: 40px;
-  border: 1px solid #dbe3ed;
-  border-radius: 10px;
-  background: #f8fbff;
-  color: #334155;
-  padding: 0 12px;
-  cursor: pointer;
-}
-
-.materiels-toolbar-count {
-  margin-left: auto;
-  border: 1px solid #dbe3ed;
+  padding: 5px 12px;
   border-radius: 999px;
-  padding: 6px 12px;
-  font-size: 13px;
-  color: #1f2937;
-  background: #f8fbff;
 }
 
-.materiels-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 16px;
+.materiels-hero-title {
+  margin: 0;
+  font-size: 32px;
+  font-weight: 800;
+  color: #ffffff;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
 }
 
+.materiels-hero-subtitle {
+  margin: 10px 0 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: rgba(240, 248, 255, 0.9);
+}
+
+.materiels-hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  z-index: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   2. KPI STAT CARDS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.materiels-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.materiels-kpi-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+  position: relative;
+}
+
+.materiels-kpi-card:hover {
+  transform: translateY(-2px);
+  border-color: #cbd5e1;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.materiels-kpi-card.active {
+  border-color: #0074d9;
+  background: #f0f7ff;
+  box-shadow: 0 8px 24px rgba(0, 116, 217, 0.15);
+}
+
+.materiels-kpi-card.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 14px;
+  bottom: 14px;
+  width: 4px;
+  background: #0074d9;
+  border-radius: 0 4px 4px 0;
+}
+
+.materiels-kpi-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.kpi-blue { background: #e0f2fe; color: #0284c7; }
+.kpi-purple { background: #f3e8ff; color: #9333ea; }
+.kpi-emerald { background: #d1fae5; color: #059669; }
+.kpi-amber { background: #fef3c7; color: #d97706; }
+
+.materiels-kpi-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.materiels-kpi-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.materiels-kpi-value {
+  font-size: 26px;
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1.1;
+  margin-top: 2px;
+}
+
+.materiels-kpi-subtext {
+  font-size: 11px;
+  color: #94a3b8;
+  margin-top: 2px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   3. MAIN NAVIGATION TABS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.materiels-main-tabs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  background: #e2e8f0;
+  padding: 6px;
+  border-radius: 14px;
+  width: fit-content;
+}
+
+.materiels-main-tab-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  border: none;
+  background: transparent;
+  color: #475569;
+  font-size: 14px;
+  font-weight: 700;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.materiels-main-tab-btn:hover {
+  color: #0f172a;
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.materiels-main-tab-btn.active {
+  background: #ffffff;
+  color: #0074d9;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   4. LAYOUT & SIDEBAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+
 .materiels-layout {
   display: grid;
   grid-template-columns: 240px 1fr;
-  gap: 14px;
-}
-
-.materiels-main {
-  min-width: 0;
+  gap: 18px;
+  align-items: start;
 }
 
 .materiels-types-sidebar {
-  border: 1px solid #dbe3ed;
-  border-radius: 12px;
-  background: #fff;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
-  padding: 10px;
-  height: fit-content;
-  max-height: calc(100vh - 24px);
-  overflow-y: auto;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
   position: sticky;
-  top: 12px;
+  top: 20px;
 }
 
 .materiels-types-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.materiels-types-close {
-  border: 0;
-  background: transparent;
-  font-size: 18px;
-  cursor: pointer;
-  display: none;
+  margin-bottom: 12px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #475569;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
 .materiels-type-item {
   width: 100%;
-  text-align: left;
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  border-radius: 8px;
-  padding: 8px 10px;
-  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid transparent;
+  background: transparent;
+  border-radius: 10px;
+  padding: 9px 12px;
+  margin-bottom: 4px;
   cursor: pointer;
-  color: #1f2937;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 600;
+  transition: all 0.15s ease;
+}
+
+.materiels-type-item:hover {
+  background: #f1f5f9;
+  color: #0f172a;
 }
 
 .materiels-type-item.active {
-  border-color: #60a5fa;
-  background: #eef6ff;
+  background: #f0f7ff;
+  border-color: #0074d9;
+  color: #0074d9;
+  font-weight: 700;
 }
 
-.materiels-types-toggle {
-  display: none;
-  min-height: 40px;
-  border: 1px solid #d1dae6;
+.materiels-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   5. CONTROLS & TOOLBAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.materiels-controls-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+}
+
+.materiels-search-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
   border-radius: 10px;
-  padding: 0 12px;
-  background: #fff;
+  padding: 0 14px;
+  height: 42px;
+  flex: 1;
+  min-width: 240px;
+  transition: all 0.2s ease;
 }
 
-.materiel-card {
-  border: 1px solid #dbe3ed;
-  border-radius: 12px;
-  padding: 12px;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
-  background: #fff;
+.materiels-search-box:focus-within {
+  background: #ffffff;
+  border-color: #0074d9;
+  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.15);
+}
+
+.materiels-search-input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  font-size: 13px;
+  color: #1e293b;
+  outline: none;
+}
+
+.materiels-filter-select {
+  height: 42px;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  padding: 0 14px;
+  background: #ffffff;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 600;
+  outline: none;
+  cursor: pointer;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   6. CARDS GRID & MATERIEL CARD
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.materiels-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 18px;
+}
+
+.materiel-card-modern {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 100%;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.materiel-card.grouped {
-  padding: 10px;
-}
-
-.materiel-card-media-wrap {
-  position: relative;
+.materiel-card-modern:hover {
+  transform: translateY(-3px);
+  border-color: #cbd5e1;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
 }
 
 .materiel-card-media {
   width: 100%;
-  height: 140px;
-  border-radius: 8px;
-  margin-bottom: 10px;
+  height: 150px;
+  background: #f1f5f9;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   overflow: hidden;
   position: relative;
-  background: #f8fbff;
+  border-bottom: 1px solid #e2e8f0;
 }
 
 .materiel-card-image {
@@ -204,92 +409,78 @@
 .materiel-card-image-empty {
   width: 100%;
   height: 100%;
-  background: #f5f5f5;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  color: #999;
-  border-radius: 6px;
+  color: #94a3b8;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
 }
 
 .materiel-card-nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background: rgba(0, 0, 0, 0.55);
-  color: #fff;
+  background: rgba(15, 23, 42, 0.65);
+  color: #ffffff;
   border: none;
   border-radius: 6px;
   padding: 8px 10px;
   cursor: pointer;
   z-index: 3;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(4px);
+  transition: all 0.15s ease;
 }
 
-.materiel-card-nav-btn.prev {
-  left: 6px;
+.materiel-card-nav-btn:hover {
+  background: rgba(15, 23, 42, 0.85);
 }
 
-.materiel-card-nav-btn.next {
-  right: 6px;
-}
-
-.materiel-card-title-wrap {
-  margin-bottom: 8px;
-}
-
-.materiel-card-title {
-  font-weight: 700;
-  font-size: 15px;
-  color: #0f172a;
-}
-
-.materiel-card-subtitle {
-  font-size: 12px;
-  color: #576579;
-}
-
-.materiel-card-meta {
-  font-size: 13px;
-  color: #223247;
-  margin-bottom: 8px;
-}
-
-.materiel-card-actions {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  margin-top: 8px;
-}
+.materiel-card-nav-btn.prev { left: 8px; }
+.materiel-card-nav-btn.next { right: 8px; }
 
 .materiel-group-list {
+  padding: 14px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .materiel-group-list.scrollable {
-  max-height: 210px;
+  max-height: 220px;
   overflow-y: auto;
-  padding-right: 4px;
 }
 
 .materiel-group-row {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 10px 12px;
   display: flex;
   justify-content: space-between;
-  gap: 8px;
   align-items: center;
+  gap: 10px;
 }
 
 .materiel-group-main {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  color: #1f2937;
+  gap: 3px;
+}
+
+.materiel-serial-pill {
+  font-size: 13px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: 0.02em;
+}
+
+.materiel-desc-text {
   font-size: 12px;
+  color: #64748b;
 }
 
 .materiel-row-actions {
@@ -297,114 +488,548 @@
 }
 
 .materiel-actions-toggle {
-  min-width: 34px;
-  height: 30px;
-  border: 1px solid #d1dae6;
+  min-width: 32px;
+  height: 32px;
+  border: 1px solid #cbd5e1;
   border-radius: 8px;
-  background: #fff;
+  background: #ffffff;
+  color: #475569;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+}
+
+.materiel-actions-toggle:hover {
+  background: #f1f5f9;
+  color: #0f172a;
 }
 
 .materiel-actions-menu {
   position: absolute;
   right: 0;
   top: calc(100% + 6px);
-  z-index: 20;
-  width: 130px;
-  border: 1px solid #dbe3ed;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
-  padding: 4px;
-  display: grid;
+  z-index: 50;
+  width: 140px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
   gap: 4px;
 }
 
 .materiel-actions-menu button {
-  border: 0;
-  background: #fff;
+  border: none;
+  background: transparent;
   border-radius: 6px;
   text-align: left;
-  padding: 7px 8px;
+  padding: 8px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #334155;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.15s ease;
 }
 
 .materiel-actions-menu button:hover {
-  background: #f3f8ff;
+  background: #f1f5f9;
+  color: #0f172a;
 }
 
-.materiels-modal select {
-  width: 100%;
-  min-height: 40px;
-  border: 1px solid #d1dae6;
+.materiel-actions-menu button.danger:hover {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   7. ATTRIBUTION AUTOMATIQUE TAB
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.attribution-grid-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  align-items: start;
+}
+
+.attribution-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+}
+
+.attribution-card-title {
+  margin: 0 0 16px;
+  font-size: 18px;
+  font-weight: 800;
+  color: #0f172a;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.rules-table-container {
+  max-height: 340px;
+  overflow-y: auto;
+  border: 1px solid #e2e8f0;
   border-radius: 10px;
-  padding: 0 12px;
-  font-size: 14px;
-  color: #1f2937;
-  background: #fff;
+  margin-bottom: 20px;
 }
 
-.materiel-card-action-btn {
-  min-width: 88px;
+.attribution-form-box {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
 
-.materiels-empty-state,
-.materiels-loading {
-  text-align: center;
-  padding: 40px;
-  color: #6b7280;
+.rule-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 700;
 }
 
-.materiels-empty-icon {
-  font-size: 48px;
+.rule-status-badge.actif {
+  background: #d1fae5;
+  color: #065f46;
 }
 
-.materiels-modal {
-  border: 1px solid #dbe3ed;
-  border-radius: 14px;
-  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
+.rule-status-badge.inactif {
+  background: #f1f5f9;
+  color: #64748b;
 }
 
-.materiels-file-input {
-  margin-top: 6px;
+/* ═══════════════════════════════════════════════════════════════════════════
+   8. MODAL & FORMS & GENERAL UTILS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.materiels-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
 }
 
-.materiels-file-name {
-  margin-top: 6px;
+.materiels-modal-dialog {
+  background: #ffffff;
+  border-radius: 20px;
+  width: min(720px, 100%);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35);
+  overflow: hidden;
+}
+
+.materiels-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+.materiels-modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.materiels-modal-body {
+  padding: 24px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.materiels-modal-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+/* Shared form controls across pages */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.gares-form-label {
   font-size: 13px;
-  color: #576579;
+  font-weight: 700;
+  color: #334155;
+  margin-bottom: 2px;
 }
 
-@media (max-width: 900px) {
-  .materiels-page-header {
-    flex-direction: column;
-  }
+.gares-modern-input {
+  width: 100%;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: #ffffff;
+  font-size: 13px;
+  color: #1e293b;
+  outline: none;
+  box-sizing: border-box;
+  transition: all 0.2s ease;
+}
 
+.gares-modern-input:focus {
+  border-color: #0074d9;
+  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.15);
+}
+
+.gares-toolbar-reset {
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.gares-toolbar-reset:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+  border-color: #94a3b8;
+}
+
+.modal-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 1px solid #cbd5e1;
+  background: #ffffff;
+  color: #64748b;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+}
+
+.modal-close:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+/* Tables */
+.gares-modern-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.gares-modern-table thead {
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.gares-modern-table th {
+  padding: 12px 16px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #64748b;
+  letter-spacing: 0.04em;
+}
+
+.gares-modern-table td {
+  padding: 12px 16px;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 13px;
+  color: #334155;
+  vertical-align: middle;
+}
+
+.gares-modern-table tbody tr:hover {
+  background-color: #f8fafc;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .materiels-modern-container {
+    padding: 20px 18px 48px;
+  }
+  .materiels-kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .materiels-hero-banner {
+    padding: 26px 28px;
+  }
+  .attribution-grid-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .materiels-modern-container {
+    padding: 16px 12px 40px;
+  }
+  .materiels-hero-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px 18px;
+    gap: 16px;
+  }
+  .materiels-hero-actions {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+  .materiels-hero-actions > * {
+    flex: 1;
+    justify-content: center;
+  }
   .materiels-layout {
     grid-template-columns: 1fr;
   }
-
   .materiels-types-sidebar {
-    display: none;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: min(320px, 92vw);
-    height: 100vh;
-    border-radius: 0;
-    z-index: 50;
-    overflow-y: auto;
+    position: static;
   }
-
-  .materiels-types-sidebar.open {
-    display: block;
+  .materiels-kpi-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
   }
-
-  .materiels-types-close,
-  .materiels-types-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  .materiels-cards-grid {
+    grid-template-columns: 1fr;
+  }
+  .materiels-controls-card {
+    padding: 14px;
+  }
+  .materiels-filters-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
   }
 }
 
+@media (max-width: 480px) {
+  .materiels-hero-title {
+    font-size: 24px;
+  }
+  .materiels-hero-subtitle {
+    font-size: 13px;
+  }
+  .materiel-card-footer {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+  .materiel-card-footer > * {
+    width: 100%;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   10. DARK MODE SUPPORT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+body.dark-mode .materiels-page-root,
+[data-theme="dark"] .materiels-page-root {
+  background-color: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .materiels-hero-banner,
+[data-theme="dark"] .materiels-hero-banner {
+  background: linear-gradient(135deg, #05162a 0%, #082d4d 50%, #0d4b78 100%);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
+}
+
+body.dark-mode .materiels-kpi-card,
+[data-theme="dark"] .materiels-kpi-card {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .materiels-kpi-card:hover,
+[data-theme="dark"] .materiels-kpi-card:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .materiels-kpi-card.active,
+[data-theme="dark"] .materiels-kpi-card.active {
+  background: #0d2744;
+  border-color: #0088ce;
+  box-shadow: 0 8px 24px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .materiels-kpi-label,
+[data-theme="dark"] .materiels-kpi-label {
+  color: #94a3b8;
+}
+
+body.dark-mode .materiels-kpi-value,
+[data-theme="dark"] .materiels-kpi-value {
+  color: #f8fafc;
+}
+
+body.dark-mode .materiels-kpi-subtext,
+[data-theme="dark"] .materiels-kpi-subtext {
+  color: #64748b;
+}
+
+body.dark-mode .materiels-controls-card,
+body.dark-mode .materiel-card-modern,
+body.dark-mode .materiels-types-sidebar,
+body.dark-mode .attribution-card,
+body.dark-mode .modal-content,
+[data-theme="dark"] .materiels-controls-card,
+[data-theme="dark"] .materiel-card-modern,
+[data-theme="dark"] .materiels-types-sidebar,
+[data-theme="dark"] .attribution-card,
+[data-theme="dark"] .modal-content {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+}
+
+body.dark-mode .materiels-nav-btn,
+[data-theme="dark"] .materiels-nav-btn {
+  color: #94a3b8;
+}
+
+body.dark-mode .materiels-nav-btn:hover,
+[data-theme="dark"] .materiels-nav-btn:hover {
+  background: #1e293b;
+  color: #f8fafc;
+}
+
+body.dark-mode .materiels-nav-btn.active,
+[data-theme="dark"] .materiels-nav-btn.active {
+  background: #0d2744;
+  color: #38bdf8;
+}
+
+body.dark-mode .type-train-pill,
+[data-theme="dark"] .type-train-pill {
+  background: #1e293b;
+  border-color: #334155;
+  color: #cbd5e1;
+}
+
+body.dark-mode .type-train-pill:hover,
+[data-theme="dark"] .type-train-pill:hover {
+  border-color: #38bdf8;
+  color: #38bdf8;
+}
+
+body.dark-mode .type-train-pill.active,
+[data-theme="dark"] .type-train-pill.active {
+  background: #0284c7;
+  color: #ffffff;
+  border-color: #0284c7;
+}
+
+body.dark-mode .materiel-card-modern:hover,
+[data-theme="dark"] .materiel-card-modern:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .materiel-card-title,
+[data-theme="dark"] .materiel-card-title {
+  color: #f8fafc;
+}
+
+body.dark-mode .materiels-input,
+body.dark-mode .materiels-select,
+body.dark-mode .materiels-textarea,
+body.dark-mode .materiels-search-bar input,
+[data-theme="dark"] .materiels-input,
+[data-theme="dark"] .materiels-select,
+[data-theme="dark"] .materiels-textarea,
+[data-theme="dark"] .materiels-search-bar input {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .materiels-input:focus,
+body.dark-mode .materiels-select:focus,
+body.dark-mode .materiels-textarea:focus,
+[data-theme="dark"] .materiels-input:focus,
+[data-theme="dark"] .materiels-select:focus,
+[data-theme="dark"] .materiels-textarea:focus {
+  border-color: #0088ce;
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .attribution-rule-item,
+[data-theme="dark"] .attribution-rule-item {
+  background: #101826;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .attribution-rule-item:hover,
+[data-theme="dark"] .attribution-rule-item:hover {
+  background: #1a273c;
+  border-color: #3b82f6;
+}
+
+body.dark-mode .modal-header,
+[data-theme="dark"] .modal-header {
+  background: #0e1726;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .modal-header h3,
+[data-theme="dark"] .modal-header h3 {
+  color: #f8fafc;
+}
+
+body.dark-mode .modal-footer,
+[data-theme="dark"] .modal-footer {
+  background: #0e1726;
+  border-top-color: #243247;
+}
+
+body.dark-mode .materiels-empty-state,
+[data-theme="dark"] .materiels-empty-state {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .materiels-empty-text,
+[data-theme="dark"] .materiels-empty-text {
+  color: #94a3b8;
+}
+
diff --git a/src/pages/materiel-roulant/MaterielRoulant.js b/src/pages/materiel-roulant/MaterielRoulant.js
index 6a7ea4e..0086dcb 100644
--- a/src/pages/materiel-roulant/MaterielRoulant.js
+++ b/src/pages/materiel-roulant/MaterielRoulant.js
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react';
+import NavPanel from '../../components/nav-panel/NavPanel';
 import supabase, { isSupabaseConfigured } from '../../supabaseClient';
 import { getAllMateriels, createMateriel, updateMateriel, deleteMateriel } from '../../api/materielsRoulants';
 import { getAllTypesTrains } from '../../api/typesTrains';
@@ -8,6 +9,10 @@ import { getAllLignes } from '../../api/lignes';
 import { getParametre, upsertParametre } from '../../api/parametres';
 import './MaterielRoulant.css';
 
+// ============================================================================
+// COMPOSANT CARTE GROUPE MATÉRIEL
+// ============================================================================
+
 function MaterielGroupCard({ imageUrl, items, onEdit, onDelete, onDuplicate, canUpdate = true, canDelete = true, canDuplicate = true }) {
   const image = imageUrl || '';
   const [openActionsFor, setOpenActionsFor] = useState(null);
@@ -68,7 +73,7 @@ function MaterielGroupCard({ imageUrl, items, onEdit, onDelete, onDuplicate, can
   };
 
   return (
-    <div className="card materiel-card grouped">
+    <div className="materiel-card-modern">
       <div className="materiel-card-media" ref={imgContainerRef}>
         {image ? (
           <img
@@ -79,20 +84,33 @@ function MaterielGroupCard({ imageUrl, items, onEdit, onDelete, onDuplicate, can
             onLoad={recomputeSizes}
             style={{ transform: `translateX(${offsetX}px)` }}
           />
-        ) : <div className="materiel-card-image-empty">Sans image</div>}
+        ) : (
+          <div className="materiel-card-image-empty">
+            <wcs-mat-icon icon="train" size="l"></wcs-mat-icon>
+            <span>Sans visuel</span>
+          </div>
+        )}
         {image && offsetX < 0 && (
-          <button aria-label="Précédent" onClick={prevImageOffset} className="materiel-card-nav-btn prev">‹</button>
+          <button aria-label="Précédent" onClick={prevImageOffset} className="materiel-card-nav-btn prev">
+            <wcs-mat-icon icon="chevron_left" size="s"></wcs-mat-icon>
+          </button>
         )}
         {image && offsetX > maxOffset && (
-          <button aria-label="Suivant" onClick={nextImageOffset} className="materiel-card-nav-btn next">›</button>
+          <button aria-label="Suivant" onClick={nextImageOffset} className="materiel-card-nav-btn next">
+            <wcs-mat-icon icon="chevron_right" size="s"></wcs-mat-icon>
+          </button>
         )}
       </div>
+
       <div className={`materiel-group-list ${items.length > 2 ? 'scrollable' : ''}`}>
         {items.map((materiel) => (
           <div key={materiel.id} className="materiel-group-row">
             <div className="materiel-group-main">
-              <strong>{materiel.numero_serie || '-'}</strong>
-              <span>{materiel.nom || '-'} · {materiel.nom_technique || '-'}</span>
+              <span className="materiel-serial-pill">Rame n° {materiel.numero_serie || '-'}</span>
+              <span className="materiel-desc-text">
+                {materiel.nom || '-'} · {materiel.nom_technique || '-'}
+                {materiel.capacite ? ` (${materiel.capacite} pl.)` : ''}
+              </span>
             </div>
             <div className="materiel-row-actions" ref={actionsRef}>
               <button
@@ -101,13 +119,22 @@ function MaterielGroupCard({ imageUrl, items, onEdit, onDelete, onDuplicate, can
                 onClick={() => setOpenActionsFor((prev) => (prev === materiel.id ? null : materiel.id))}
                 aria-label="Ouvrir les actions"
               >
-                ...
+                <wcs-mat-icon icon="more_vert" size="s"></wcs-mat-icon>
               </button>
               {openActionsFor === materiel.id && (
                 <div className="materiel-actions-menu">
-                  <button type="button" onClick={() => { setOpenActionsFor(null); onEdit(materiel); }} disabled={!canUpdate}>Modifier</button>
-                  <button type="button" onClick={() => { setOpenActionsFor(null); onDelete(materiel.id); }} disabled={!canDelete}>Supprimer</button>
-                  <button type="button" onClick={() => { setOpenActionsFor(null); onDuplicate(materiel); }} disabled={!canDuplicate}>Dupliquer</button>
+                  <button type="button" onClick={() => { setOpenActionsFor(null); onEdit(materiel); }} disabled={!canUpdate}>
+                    <wcs-mat-icon icon="edit" size="s"></wcs-mat-icon>
+                    Modifier
+                  </button>
+                  <button type="button" onClick={() => { setOpenActionsFor(null); onDuplicate(materiel); }} disabled={!canDuplicate}>
+                    <wcs-mat-icon icon="content_copy" size="s"></wcs-mat-icon>
+                    Dupliquer
+                  </button>
+                  <button type="button" className="danger" onClick={() => { setOpenActionsFor(null); onDelete(materiel.id); }} disabled={!canDelete}>
+                    <wcs-mat-icon icon="delete" size="s"></wcs-mat-icon>
+                    Supprimer
+                  </button>
                 </div>
               )}
             </div>
@@ -118,23 +145,30 @@ function MaterielGroupCard({ imageUrl, items, onEdit, onDelete, onDuplicate, can
   );
 }
 
+// ============================================================================
+// COMPOSANT PRINCIPAL
+// ============================================================================
+
 export default function MaterielRoulant() {
   const currentUser = getCurrentUser();
   const canCreateMateriels = canPerform(currentUser, 'materiel_roulant', 'create');
   const canUpdateMateriels = canPerform(currentUser, 'materiel_roulant', 'update');
   const canDeleteMateriels = canPerform(currentUser, 'materiel_roulant', 'delete');
 
-  // liste
+  // Liste et états
   const [materiels, setMateriels] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+
   // Filtrage
   const [searchFilter, setSearchFilter] = useState('');
   const [typeFilter, setTypeFilter] = useState('');
   const [typesTrains, setTypesTrains] = useState([]);
-  const [showTypesSidebar, setShowTypesSidebar] = useState(false);
 
-  const [activeTab, setActiveTab] = useState('gestion'); // 'gestion' or 'attribution'
+  // Onglet actif
+  const [activeTab, setActiveTab] = useState('gestion'); // 'gestion' | 'attribution'
+
+  // Données d'attribution
   const [lignes, setLignes] = useState([]);
   const [horaires, setHoraires] = useState([]);
   const [rules, setRules] = useState([]);
@@ -147,19 +181,19 @@ export default function MaterielRoulant() {
   const [ruleActif, setRuleActif] = useState(true);
   const [editingRuleId, setEditingRuleId] = useState(null);
 
-  // États attribution automatique
+  // Attribution automatique
   const [proposedAssignments, setProposedAssignments] = useState([]);
   const [assigningAuto, setAssigningAuto] = useState(false);
   const [applyingAuto, setApplyingAuto] = useState(false);
   const [showProposedAssignments, setShowProposedAssignments] = useState(false);
   const [keepManualAssignments, setKeepManualAssignments] = useState(false);
 
-  // modal / formulaire
+  // Modal formulaire matériel
   const [showModal, setShowModal] = useState(false);
   const [editingItem, setEditingItem] = useState(null);
   const modalRef = useRef(null);
 
-  // champs du formulaire
+  // Champs du formulaire matériel
   const [name, setName] = useState('');
   const [techName, setTechName] = useState('');
   const [capacity, setCapacity] = useState('');
@@ -193,18 +227,13 @@ export default function MaterielRoulant() {
       const candidate = randomSerial();
       if (localSet.has(candidate)) { attempts += 1; continue; }
 
-      const { data: existing, error } = await supabase
+      const { data: existing, error: err } = await supabase
         .from('materiel-roulant')
         .select('id')
         .eq('numero_serie', candidate)
         .limit(1);
 
-      if (error) {
-        attempts += 1;
-        continue;
-      }
-
-      if (existing && existing.length > 0) {
+      if (err || (existing && existing.length > 0)) {
         attempts += 1;
         continue;
       }
@@ -316,7 +345,7 @@ export default function MaterielRoulant() {
     }
 
     saveRules(updatedRules);
-    
+
     setRuleLigneId('');
     setRuleTypeTrain('');
     setRuleMinCapacity('');
@@ -388,7 +417,7 @@ export default function MaterielRoulant() {
 
       const proposed = sortedHoraires.map(h => {
         const rule = rules.find(r => r.actif && String(r.ligne_id) === String(h.ligne_id || h.ligne));
-        
+
         if (keepManualAssignments && Array.isArray(h.composition_train) && h.composition_train.length > 0) {
           return {
             horaire: h,
@@ -421,7 +450,7 @@ export default function MaterielRoulant() {
           }
 
           if (rule.nom_technique) {
-            const matchesName = candidates.filter(m => 
+            const matchesName = candidates.filter(m =>
               (m.nom_technique || '').toLowerCase().includes(rule.nom_technique.toLowerCase()) ||
               (m.nom || '').toLowerCase().includes(rule.nom_technique.toLowerCase())
             );
@@ -454,7 +483,6 @@ export default function MaterielRoulant() {
         }
 
         const selectedMr = candidates[0];
-        
         assignedTimelines[selectedMr.id].push({ start: s, end: e });
 
         const proposedComp = [{
@@ -476,7 +504,7 @@ export default function MaterielRoulant() {
             message = `Capacité insuffisante (${mrCap}/${reqCap})`;
           } else if (rule.type_train && rule.type_train !== 'Tous' && selectedMr.type_train !== rule.type_train) {
             status = 'WARNING';
-            message = `Type de train différent (${selectedMr.type_train} au lieu de ${rule.type_train})`;
+            message = `Type différent (${selectedMr.type_train} vs ${rule.type_train})`;
           }
         } else {
           status = 'INFO';
@@ -495,7 +523,7 @@ export default function MaterielRoulant() {
       setShowProposedAssignments(true);
     } catch (err) {
       console.error(err);
-      alert('Erreur lors de l\'attribution automatique.');
+      alert("Erreur lors de l'attribution automatique.");
     } finally {
       setAssigningAuto(false);
     }
@@ -509,9 +537,9 @@ export default function MaterielRoulant() {
 
       for (const item of proposedAssignments) {
         if (item.status === 'KEEP' || item.proposedComposition.length === 0) continue;
-        
-        const { error } = await updateHoraireComposition(item.horaire.id, item.proposedComposition);
-        if (!error) {
+
+        const { error: applyErr } = await updateHoraireComposition(item.horaire.id, item.proposedComposition);
+        if (!applyErr) {
           successCount++;
         } else {
           errorCount++;
@@ -519,26 +547,18 @@ export default function MaterielRoulant() {
       }
 
       alert(`Attribution automatique terminée avec succès !\n- Sillons mis à jour : ${successCount}\n- Échecs : ${errorCount}`);
-      
+
       await loadRulesAndSchedules();
       setShowProposedAssignments(false);
       setProposedAssignments([]);
     } catch (err) {
       console.error(err);
-      alert('Erreur lors de l\'application des affectations.');
+      alert("Erreur lors de l'application des affectations.");
     } finally {
       setApplyingAuto(false);
     }
   };
 
-  useEffect(() => {
-    loadMateriels();
-    loadTypesTrains();
-    ensureUniqueSerial();
-    loadRulesAndSchedules();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const loadTypesTrains = async () => {
     const { data } = await getAllTypesTrains();
     setTypesTrains(Array.isArray(data) ? data : []);
@@ -553,13 +573,31 @@ export default function MaterielRoulant() {
       setError(loadError.message || 'Erreur lors du chargement');
       setMateriels([]);
     } else {
-      // filtrer les éléments nuls ou indéfinis renvoyés par Supabase
       const list = Array.isArray(data) ? data.filter(Boolean) : [];
       setMateriels(list);
     }
     setLoading(false);
   };
 
+  useEffect(() => {
+    loadMateriels();
+    loadTypesTrains();
+    ensureUniqueSerial();
+    loadRulesAndSchedules();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Statistiques
+  const stats = useMemo(() => {
+    const total = materiels.length;
+    const uniqueTypes = new Set(materiels.map(m => m.type_train).filter(Boolean)).size;
+    const totalCapacity = materiels.reduce((sum, m) => sum + (Number(m.capacite) || 0), 0);
+    const activeRulesCount = rules.filter(r => r.actif).length;
+
+    return { total, uniqueTypes, totalCapacity, activeRulesCount };
+  }, [materiels, rules]);
+
+  // Modal
   const openCreateModal = () => {
     if (!canCreateMateriels) return;
     setEditingItem(null);
@@ -571,8 +609,7 @@ export default function MaterielRoulant() {
   };
 
   const openEditModal = (item) => {
-    if (!canUpdateMateriels) return;
-    if (!item) return; // garde: éviter d'ouvrir l'édition sur null
+    if (!canUpdateMateriels || !item) return;
     setEditingItem(item);
     setName(item.nom || '');
     setTechName(item.nom_technique || '');
@@ -591,40 +628,6 @@ export default function MaterielRoulant() {
     setFormError('');
   };
 
-  // Attacher listeners pour webcomponents dans la modal (pattern utilisé dans d'autres pages)
-  useEffect(() => {
-    if (!showModal || !modalRef.current) return;
-    const root = modalRef.current;
-    const inputs = Array.from(root.querySelectorAll('wcs-input, wcs-select, wcs-textarea'));
-
-    const handler = (e) => {
-      try {
-        const el = e.currentTarget || e.target;
-        const field = el.dataset?.field;
-        const val = (e && e.detail && e.detail.value) || (e && e.target && e.target.value) || '';
-        if (!field) return;
-        if (field === 'nom') setName(val || '');
-        if (field === 'nom_technique') setTechName(val || '');
-        if (field === 'capacite') setCapacity(val || '');
-        if (field === 'type_train') setTypeTrain(val || '');
-      } catch (err) { /* ignore */ }
-    };
-
-    inputs.forEach(el => {
-      el.addEventListener('input', handler);
-      el.addEventListener('change', handler);
-      el.addEventListener('wcsChange', handler);
-    });
-
-    return () => {
-      inputs.forEach(el => {
-        try { el.removeEventListener('input', handler); } catch (e) { /* ignore */ }
-        try { el.removeEventListener('change', handler); } catch (e) { /* ignore */ }
-        try { el.removeEventListener('wcsChange', handler); } catch (e) { /* ignore */ }
-      });
-    };
-  }, [showModal]);
-
   const handleFileChange = (e) => {
     const f = e.target.files && e.target.files[0];
     if (f) setImageFile(f);
@@ -652,7 +655,6 @@ export default function MaterielRoulant() {
       nom: name,
       nom_technique: techName,
       capacite: capacity ? Number(capacity) : null,
-      // image_url left to API (uploaded there)
       type_train: typeTrain,
       numero_serie: serial || null,
       updated_at: new Date()
@@ -660,21 +662,15 @@ export default function MaterielRoulant() {
 
     try {
       let res;
+      const isServerId = (id) => (
+        id != null && ((typeof id === 'number' && Number.isFinite(id)) || (/^\d+$/.test(String(id))))
+      );
 
-      // helper: vérifier si id correspond à un id serveur (nombre entier)
-      const isServerId = (id) => {
-        if (id == null) return false;
-        // nombres ou chaînes numériques
-        return (typeof id === 'number' && Number.isFinite(id)) || (/^\d+$/.test(String(id)));
-      };
-
-      const existingServerId = editingItem && isServerId(editingItem.id) ? (typeof editingItem.id === 'number' ? editingItem.id : Number(editingItem.id)) : null;
+      const existingServerId = editingItem && isServerId(editingItem.id) ? Number(editingItem.id) : null;
 
       if (existingServerId !== null) {
-        // update: pass imageFile to API if user selected a new file
         res = await updateMateriel(existingServerId, payload, imageFile);
       } else {
-        // either no editingItem, or editingItem has only a local id -> create a new record on server
         payload.created_at = new Date();
         if (!payload.numero_serie) payload.numero_serie = serial || randomSerial();
         res = await createMateriel(payload, imageFile);
@@ -687,17 +683,14 @@ export default function MaterielRoulant() {
         return;
       }
 
-      // uploadError / uploadFallback gérés par l'API : afficher un avertissement non bloquant
       if (res.uploadError) {
-        const msg = 'Impossible d\'uploader l\'image sur le bucket Supabase et le fallback base64 a également échoué : ' + (res.uploadError.message || JSON.stringify(res.uploadError)) + '. (Enregistrement créé/modifié sans visuel)';
+        const msg = "L'image n'a pas pu être enregistrée sur le bucket. (Enregistrement créé sans visuel)";
         setUploadWarning(msg);
-        console.warn(msg);
       } else if (res.uploadFallback) {
-        const msg = 'Le bucket Supabase Storage est inaccessible. L\'image a été encodée en base64 et sauvegardée directement dans la base de données.';
+        const msg = "Stockage distant indisponible. L'image a été encodée directement.";
         setUploadWarning(msg);
       }
 
-      // Mettre à jour la liste locale
       let saved = res && res.data ? res.data : null;
       if (!saved || saved.id === undefined || saved.id === null) {
         const genId = `local-${Date.now()}-${Math.floor(Math.random()*10000)}`;
@@ -723,35 +716,18 @@ export default function MaterielRoulant() {
     if (!canDeleteMateriels) return;
     setSaving(true);
 
-    // tenter de retrouver le matériel pour extraire un chemin de storage si possible
-    const item = Array.isArray(materiels) ? materiels.find(m => m && String(m.id) === String(id)) : null;
-    let imagePath = null;
-    try {
-      if (item && item.image_url) {
-        // si image_url contient le dossier public/materiel-roulant, extraire la partie après ce préfix
-        const prefix = 'public/materiel-roulant/';
-        const idx = String(item.image_url).indexOf(prefix);
-        if (idx !== -1) {
-          imagePath = String(item.image_url).substring(idx);
-        }
-      }
-    } catch (e) { /* ignore */ }
-
-    // Si id n'est pas un id serveur (ex: local-...), ne pas appeler l'API, juste supprimer côté UI
-    const isServerId = (idToTest) => {
-      if (idToTest == null) return false;
-      return (typeof idToTest === 'number' && Number.isFinite(idToTest)) || (/^\d+$/.test(String(idToTest)));
-    };
+    const isServerId = (idToTest) => (
+      idToTest != null && ((typeof idToTest === 'number' && Number.isFinite(idToTest)) || (/^\d+$/.test(String(idToTest))))
+    );
 
     if (!isServerId(id)) {
-      // suppression locale uniquement
       setMateriels(prev => (Array.isArray(prev) ? prev.filter(m => m && String(m.id) !== String(id)) : []));
       setDeleteConfirmId(null);
       setSaving(false);
       return;
     }
 
-    const { error: delErr } = await deleteMateriel(id, { deleteImage: !!imagePath, imagePath });
+    const { error: delErr } = await deleteMateriel(id);
     if (delErr) {
       console.error('Erreur suppression:', delErr);
       alert('Erreur lors de la suppression: ' + (delErr.message || 'Erreur'));
@@ -765,443 +741,692 @@ export default function MaterielRoulant() {
     setSaving(false);
   };
 
+  // Filtrage
+  const filteredMateriels = useMemo(() => (
+    (Array.isArray(materiels) ? materiels.filter(m => m && typeof m === 'object') : []).filter(m => {
+      const matchSearch = !searchFilter ||
+        (m.nom || '').toLowerCase().includes(searchFilter.toLowerCase()) ||
+        (m.nom_technique || '').toLowerCase().includes(searchFilter.toLowerCase()) ||
+        (m.numero_serie || '').toLowerCase().includes(searchFilter.toLowerCase());
+      const matchType = !typeFilter || m.type_train === typeFilter;
+      return matchSearch && matchType;
+    })
+  ), [materiels, searchFilter, typeFilter]);
+
+  const groupedEntries = useMemo(() => {
+    const grouped = filteredMateriels.reduce((acc, item) => {
+      const key = item.image_url || '__no_image__';
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(item);
+      return acc;
+    }, {});
+
+    return Object.entries(grouped).map(([imageUrl, items]) => ({
+      imageUrl: imageUrl === '__no_image__' ? '' : imageUrl,
+      items
+    }));
+  }, [filteredMateriels]);
+
   return (
-      <div className="sncf-groupe materiels-page panel-layout">
-        <div className="panel-content materiels-page-content">
-            <header className="materiels-page-header">
-              <div>
-                <p className="materiels-page-kicker">Exploitation</p>
-                <h2>Gestion du matériel roulant</h2>
-                <p className="materiels-page-description">Pilotez le parc matériel, ses caractéristiques techniques et ses visuels.</p>
+    <div className="sncf-groupe materiels-page-root">
+      <div className="panel-layout">
+        <div className="panel-nav">
+          <NavPanel />
+        </div>
+        <div className="panel-content materiels-modern-container">
+
+          {/* 1. HERO BANNER */}
+          <section className="materiels-hero-banner">
+            <div className="materiels-hero-content">
+              <div className="materiels-hero-tags">
+                <span className="materiels-kicker-pill">
+                  <wcs-mat-icon icon="train" size="s"></wcs-mat-icon>
+                  Parc Roulant SNCF
+                </span>
+                <span className="materiels-kicker-pill">
+                  <wcs-mat-icon icon="auto_awesome" size="s"></wcs-mat-icon>
+                  Attribution Intelligente
+                </span>
               </div>
+              <h1 className="materiels-hero-title">Matériel Roulant & Flotte</h1>
+              <p className="materiels-hero-subtitle">
+                Gérez le parc de rames, configurations techniques, capacités d'emport et pilotez les attributions automatiques par ligne.
+              </p>
+            </div>
+            <div className="materiels-hero-actions">
               {activeTab === 'gestion' && (
-                <wcs-button className="wcs-primary" onClick={openCreateModal} disabled={!canCreateMateriels}>Créer / Importer un matériel</wcs-button>
+                <wcs-button
+                  className="wcs-primary"
+                  onClick={openCreateModal}
+                  disabled={!canCreateMateriels}
+                >
+                  <wcs-mat-icon icon="add"></wcs-mat-icon>
+                  Nouveau matériel
+                </wcs-button>
               )}
-            </header>
+            </div>
+          </section>
 
-            {error && (
-                <wcs-alert className="materiels-alert" intent="error" show>
-                  <span slot="title">Erreur</span>
-                  <span slot="subtitle">{error}</span>
-                </wcs-alert>
-            )}
+          {/* Erreur globale */}
+          {error && (
+            <wcs-alert intent="error" show style={{ marginBottom: '20px' }}>
+              <span slot="title">Erreur</span>
+              <span slot="subtitle">{error}</span>
+            </wcs-alert>
+          )}
 
-            {/* Onglets */}
-            <div className="materiels-tabs" style={{ display: 'flex', gap: '12px', marginBottom: '24px', borderBottom: '1px solid #ddd', paddingBottom: '12px' }}>
-              <button
-                type="button"
-                style={{
-                  padding: '8px 16px',
-                  background: activeTab === 'gestion' ? '#f2f2f7' : 'transparent',
-                  color: '#333',
-                  border: 'none',
-                  borderBottom: activeTab === 'gestion' ? '3px solid #002244' : '3px solid transparent',
-                  cursor: 'pointer',
-                  fontWeight: 'bold',
-                  fontSize: '1rem',
-                  transition: 'all 0.2s'
-                }}
-                onClick={() => setActiveTab('gestion')}
-              >
-                Gestion du parc
-              </button>
-              <button
-                type="button"
-                style={{
-                  padding: '8px 16px',
-                  background: activeTab === 'attribution' ? '#f2f2f7' : 'transparent',
-                  color: '#333',
-                  border: 'none',
-                  borderBottom: activeTab === 'attribution' ? '3px solid #002244' : '3px solid transparent',
-                  cursor: 'pointer',
-                  fontWeight: 'bold',
-                  fontSize: '1rem',
-                  transition: 'all 0.2s'
-                }}
-                onClick={() => setActiveTab('attribution')}
-              >
-                Attribution Automatique
-              </button>
+          {/* 2. KPI STAT CARDS */}
+          <section className="materiels-kpi-grid">
+            <div
+              className={`materiels-kpi-card ${typeFilter === '' ? 'active' : ''}`}
+              onClick={() => setTypeFilter('')}
+            >
+              <div className="materiels-kpi-icon kpi-blue">
+                <wcs-mat-icon icon="train"></wcs-mat-icon>
+              </div>
+              <div className="materiels-kpi-info">
+                <span className="materiels-kpi-label">Total Rames</span>
+                <span className="materiels-kpi-value">{stats.total}</span>
+                <span className="materiels-kpi-subtext">Matériels enregistrés</span>
+              </div>
             </div>
 
-            {activeTab === 'gestion' ? (
-              <div className="materiels-layout">
-                <aside className={`materiels-types-sidebar ${showTypesSidebar ? 'open' : ''}`}>
-                  <div className="materiels-types-header">
-                    <strong>Types de matériels</strong>
-                    <button type="button" className="materiels-types-close" onClick={() => setShowTypesSidebar(false)}>×</button>
-                  </div>
-                  <button className={`materiels-type-item ${typeFilter === '' ? 'active' : ''}`} onClick={() => setTypeFilter('')}>Tous</button>
-                  {typesTrains.map((type) => (
-                    <button key={type.id} className={`materiels-type-item ${typeFilter === type.nom ? 'active' : ''}`} onClick={() => setTypeFilter(type.nom)}>
-                      {type.nom}
-                    </button>
-                  ))}
-                </aside>
-
-                <div className="materiels-main">
-                  <div className="materiels-toolbar">
-                      <button className="materiels-types-toggle" onClick={() => setShowTypesSidebar(true)}>Types</button>
-                      <input
-                          type="search"
-                          className="materiels-toolbar-input"
-                          placeholder="Rechercher par nom, type..."
-                          value={searchFilter}
-                          onChange={e => setSearchFilter(e.target.value)}
-                      />
-                      <select
-                          className="materiels-toolbar-select"
-                          value={typeFilter}
-                          onChange={e => setTypeFilter(e.target.value)}
-                      >
-                        <option value="">Tous les types</option>
-                        {[...new Set((Array.isArray(materiels) ? materiels : []).map(m => m?.type_train).filter(Boolean))].map(t => (
-                            <option key={t} value={t}>{t}</option>
-                        ))}
-                      </select>
-                      {(searchFilter || typeFilter) && (
-                          <button className="materiels-toolbar-reset" onClick={() => { setSearchFilter(''); setTypeFilter(''); }}>
-                            Réinitialiser
-                          </button>
-                      )}
-                      <span className="materiels-toolbar-count">{materiels.length} matériel(s)</span>
-                  </div>
-
-                  {loading ? (
-                      <div className="materiels-loading">Chargement...</div>
-                  ) : materiels.length === 0 ? (
-                      <div className="empty-state materiels-empty-state">
-                        <wcs-mat-icon className="materiels-empty-icon" icon="directions_railway" />
-                        <p>Aucun matériel roulant trouvé</p>
-                        <wcs-button className="wcs-primary" onClick={openCreateModal} disabled={!canCreateMateriels}>Créer</wcs-button>
-                      </div>
-                  ) : (
-                      <>
-                        {(() => {
-                          const filteredMateriels = (Array.isArray(materiels) ? materiels.filter(m => m && typeof m === 'object') : []).filter(m => {
-                            const matchSearch = !searchFilter || (m.nom || '').toLowerCase().includes(searchFilter.toLowerCase()) || (m.nom_technique || '').toLowerCase().includes(searchFilter.toLowerCase());
-                            const matchType = !typeFilter || m.type_train === typeFilter;
-                            return matchSearch && matchType;
-                          });
-
-                          const grouped = filteredMateriels.reduce((acc, item) => {
-                            const key = item.image_url || '__no_image__';
-                            if (!acc[key]) acc[key] = [];
-                            acc[key].push(item);
-                            return acc;
-                          }, {});
-
-                          const groupedEntries = Object.entries(grouped).map(([imageUrl, items]) => ({ imageUrl: imageUrl === '__no_image__' ? '' : imageUrl, items }));
-
-                          return filteredMateriels.length === 0 ? (
-                              <div className="materiels-loading">
-                                <p>Aucun matériel ne correspond aux filtres</p>
-                              </div>
-                          ) : (
-                              <div className="cards-grid materiels-grid">
-                                {groupedEntries.map((group, idx) => (
-                                    <MaterielGroupCard
-                                      key={`group-${group.imageUrl || 'none'}-${idx}`}
-                                      imageUrl={group.imageUrl}
-                                      items={group.items}
-                                      onEdit={(m) => canUpdateMateriels && openEditModal(m)}
-                                      onDelete={(id) => canDeleteMateriels && setDeleteConfirmId(id)}
-                                      onDuplicate={(m) => handleDuplicate(m)}
-                                      canUpdate={canUpdateMateriels}
-                                      canDelete={canDeleteMateriels}
-                                      canDuplicate={canCreateMateriels}
-                                    />
-                                ))}
-                              </div>
-                          );
-                        })()}
-                      </>
-                  )}
-                </div>
+            <div className="materiels-kpi-card">
+              <div className="materiels-kpi-icon kpi-emerald">
+                <wcs-mat-icon icon="view_column"></wcs-mat-icon>
               </div>
-            ) : (
-              <div className="materiels-layout" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px', alignItems: 'start' }}>
-                {/* Rules manager on the left */}
-                <div className="card" style={{ padding: '24px', background: 'white', borderRadius: '8px', border: '1px solid #ddd' }}>
-                  <h3 style={{ marginTop: 0, marginBottom: '16px', color: '#002244' }}>Règles d'attribution par ligne</h3>
-                  
-                  {/* Rules list */}
-                  <div style={{ marginBottom: '24px', maxHeight: '350px', overflowY: 'auto' }}>
-                    {rules.length === 0 ? (
-                      <p style={{ color: '#666', fontStyle: 'italic' }}>Aucune règle définie. Remplissez le formulaire ci-dessous pour ajouter une règle.</p>
-                    ) : (
-                      <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left' }}>
-                        <thead>
-                          <tr style={{ borderBottom: '2px solid #ddd' }}>
-                            <th style={{ padding: '8px' }}>Ligne</th>
-                            <th style={{ padding: '8px' }}>Matériel Préféré</th>
-                            <th style={{ padding: '8px' }}>Capacité Min</th>
-                            <th style={{ padding: '8px' }}>Statut</th>
-                            <th style={{ padding: '8px', textAlign: 'right' }}>Actions</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {rules.map(rule => (
-                            <tr key={rule.id} style={{ borderBottom: '1px solid #eee' }}>
-                              <td style={{ padding: '8px' }}><strong>{rule.ligne_nom}</strong></td>
-                              <td style={{ padding: '8px' }}>
-                                {rule.type_train}{rule.nom_technique ? ` (${rule.nom_technique})` : ''}
-                              </td>
-                              <td style={{ padding: '8px' }}>{rule.min_capacity || 'N/A'}</td>
-                              <td style={{ padding: '8px' }}>
-                                <span style={{
-                                  padding: '2px 6px',
-                                  borderRadius: '4px',
-                                  fontSize: '0.8rem',
-                                  fontWeight: 'bold',
-                                  background: rule.actif ? '#def7ec' : '#fde8e8',
-                                  color: rule.actif ? '#03543f' : '#9b1c1c'
-                                }}>
-                                  {rule.actif ? 'Actif' : 'Inactif'}
-                                </span>
-                              </td>
-                              <td style={{ padding: '8px', textAlign: 'right' }}>
-                                <button type="button" onClick={() => handleEditRule(rule)} style={{ marginRight: '8px', padding: '4px 8px', background: '#e1e1e1', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Modifier</button>
-                                <button type="button" onClick={() => handleDeleteRule(rule.id)} style={{ padding: '4px 8px', background: '#fde8e8', color: '#e74c3c', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>Supprimer</button>
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
+              <div className="materiels-kpi-info">
+                <span className="materiels-kpi-label">Types de Train</span>
+                <span className="materiels-kpi-value">{stats.uniqueTypes}</span>
+                <span className="materiels-kpi-subtext">Séries distinctes</span>
+              </div>
+            </div>
+
+            <div className="materiels-kpi-card">
+              <div className="materiels-kpi-icon kpi-purple">
+                <wcs-mat-icon icon="airline_seat_recline_normal"></wcs-mat-icon>
+              </div>
+              <div className="materiels-kpi-info">
+                <span className="materiels-kpi-label">Capacité Totale</span>
+                <span className="materiels-kpi-value">{stats.totalCapacity}</span>
+                <span className="materiels-kpi-subtext">Places assises cumulées</span>
+              </div>
+            </div>
+
+            <div className="materiels-kpi-card">
+              <div className="materiels-kpi-icon kpi-amber">
+                <wcs-mat-icon icon="tune"></wcs-mat-icon>
+              </div>
+              <div className="materiels-kpi-info">
+                <span className="materiels-kpi-label">Règles Actives</span>
+                <span className="materiels-kpi-value">{stats.activeRulesCount}</span>
+                <span className="materiels-kpi-subtext">Lignes configurées</span>
+              </div>
+            </div>
+          </section>
+
+          {/* 3. ONGLETS DE NAVIGATION */}
+          <nav className="materiels-main-tabs">
+            <button
+              type="button"
+              className={`materiels-main-tab-btn ${activeTab === 'gestion' ? 'active' : ''}`}
+              onClick={() => setActiveTab('gestion')}
+            >
+              <wcs-mat-icon icon="grid_view" size="s"></wcs-mat-icon>
+              Gestion du parc
+            </button>
+            <button
+              type="button"
+              className={`materiels-main-tab-btn ${activeTab === 'attribution' ? 'active' : ''}`}
+              onClick={() => setActiveTab('attribution')}
+            >
+              <wcs-mat-icon icon="auto_awesome" size="s"></wcs-mat-icon>
+              Attribution Automatique
+            </button>
+          </nav>
+
+          {/* 4. CONTENU PAR ONGLET */}
+          {activeTab === 'gestion' ? (
+            <div className="materiels-layout">
+              {/* Sidebar Types */}
+              <aside className="materiels-types-sidebar">
+                <div className="materiels-types-header">
+                  <span>Séries de Train</span>
+                  <wcs-badge className="wcs-info">{typesTrains.length}</wcs-badge>
+                </div>
+                <button
+                  type="button"
+                  className={`materiels-type-item ${typeFilter === '' ? 'active' : ''}`}
+                  onClick={() => setTypeFilter('')}
+                >
+                  <span>Tous les matériels</span>
+                  <span>{materiels.length}</span>
+                </button>
+                {typesTrains.map((type) => {
+                  const count = materiels.filter(m => m.type_train === type.nom).length;
+                  return (
+                    <button
+                      key={type.id}
+                      type="button"
+                      className={`materiels-type-item ${typeFilter === type.nom ? 'active' : ''}`}
+                      onClick={() => setTypeFilter(typeFilter === type.nom ? '' : type.nom)}
+                    >
+                      <span>{type.nom}</span>
+                      <small style={{ color: '#94a3b8' }}>{count}</small>
+                    </button>
+                  );
+                })}
+              </aside>
+
+              {/* Main Area */}
+              <main className="materiels-main">
+                <div className="materiels-controls-card">
+                  <div className="materiels-search-box">
+                    <wcs-mat-icon icon="search" style={{ color: '#94a3b8' }}></wcs-mat-icon>
+                    <input
+                      type="search"
+                      className="materiels-search-input"
+                      placeholder="Rechercher par nom, nom technique, n° de série..."
+                      value={searchFilter}
+                      onChange={e => setSearchFilter(e.target.value)}
+                    />
+                    {searchFilter && (
+                      <button
+                        type="button"
+                        onClick={() => setSearchFilter('')}
+                        style={{ background: 'none', border: 'none', color: '#94a3b8', cursor: 'pointer' }}
+                      >
+                        <wcs-mat-icon icon="close" size="s"></wcs-mat-icon>
+                      </button>
                     )}
                   </div>
 
-                  {/* Rule Form */}
-                  <div style={{ borderTop: '1px solid #eee', paddingTop: '16px' }}>
-                    <h4 style={{ marginTop: 0, marginBottom: '12px' }}>{editingRuleId ? 'Modifier la règle' : 'Ajouter une règle'}</h4>
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '12px' }}>
-                      <div>
-                        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', fontWeight: 'bold' }}>Ligne</label>
-                        <select className="form-select" value={ruleLigneId} onChange={e => setRuleLigneId(e.target.value)} disabled={!!editingRuleId}>
-                          <option value="">Sélectionner une ligne...</option>
-                          {lignes.map(l => (
-                            <option key={l.id} value={l.id}>{l.nom}</option>
-                          ))}
-                        </select>
-                      </div>
-                      <div>
-                        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', fontWeight: 'bold' }}>Type de train</label>
-                        <select className="form-select" value={ruleTypeTrain} onChange={e => setRuleTypeTrain(e.target.value)}>
-                          <option value="Tous">Tous les types</option>
-                          {typesTrains.map(t => (
-                            <option key={t.id} value={t.nom}>{t.nom}</option>
-                          ))}
-                        </select>
-                      </div>
+                  <select
+                    className="materiels-filter-select"
+                    value={typeFilter}
+                    onChange={e => setTypeFilter(e.target.value)}
+                  >
+                    <option value="">Tous les types de train</option>
+                    {typesTrains.map(t => (
+                      <option key={t.id} value={t.nom}>{t.nom}</option>
+                    ))}
+                  </select>
+
+                  {(searchFilter || typeFilter) && (
+                    <button
+                      type="button"
+                      className="gares-toolbar-reset"
+                      onClick={() => { setSearchFilter(''); setTypeFilter(''); }}
+                    >
+                      Réinitialiser
+                    </button>
+                  )}
+
+                  <wcs-badge className="wcs-info">
+                    {filteredMateriels.length} matériel(s)
+                  </wcs-badge>
+                </div>
+
+                {loading ? (
+                  <div className="loading-container" style={{ padding: '60px 0', textAlign: 'center' }}>
+                    <wcs-spinner></wcs-spinner>
+                    <p style={{ marginTop: '12px', color: '#64748b' }}>Chargement du parc matériel...</p>
+                  </div>
+                ) : filteredMateriels.length === 0 ? (
+                  <div className="empty-state" style={{ padding: '60px 20px', textAlign: 'center', background: '#ffffff', borderRadius: '16px', border: '1px solid #e2e8f0' }}>
+                    <wcs-mat-icon className="materiels-empty-icon" icon="train" style={{ fontSize: '48px', color: '#94a3b8' }}></wcs-mat-icon>
+                    <h3 style={{ marginTop: '16px', color: '#1e293b' }}>Aucun matériel roulant trouvé</h3>
+                    <p style={{ color: '#64748b', marginBottom: '20px' }}>
+                      {searchFilter || typeFilter ? 'Aucun matériel ne correspond à votre recherche.' : 'Ajoutez votre première rame pour constituer votre flotte.'}
+                    </p>
+                    {canCreateMateriels && (
+                      <wcs-button className="wcs-primary" onClick={openCreateModal}>
+                        <wcs-mat-icon icon="add"></wcs-mat-icon>
+                        Créer un matériel
+                      </wcs-button>
+                    )}
+                  </div>
+                ) : (
+                  <div className="materiels-grid">
+                    {groupedEntries.map((group, idx) => (
+                      <MaterielGroupCard
+                        key={`group-${group.imageUrl || 'none'}-${idx}`}
+                        imageUrl={group.imageUrl}
+                        items={group.items}
+                        onEdit={(m) => canUpdateMateriels && openEditModal(m)}
+                        onDelete={(id) => canDeleteMateriels && setDeleteConfirmId(id)}
+                        onDuplicate={(m) => handleDuplicate(m)}
+                        canUpdate={canUpdateMateriels}
+                        canDelete={canDeleteMateriels}
+                        canDuplicate={canCreateMateriels}
+                      />
+                    ))}
+                  </div>
+                )}
+              </main>
+            </div>
+          ) : (
+            /* TAB 2: ATTRIBUTION AUTOMATIQUE */
+            <div className="attribution-grid-layout">
+              {/* Colonne gauche : Règles d'attribution */}
+              <div className="attribution-card">
+                <h3 className="attribution-card-title">
+                  <wcs-mat-icon icon="tune" style={{ color: '#0074d9' }}></wcs-mat-icon>
+                  Règles d'attribution par ligne
+                </h3>
+
+                {/* Table des règles */}
+                <div className="rules-table-container">
+                  {rules.length === 0 ? (
+                    <p style={{ padding: '24px', color: '#64748b', fontStyle: 'italic', textAlign: 'center', margin: 0 }}>
+                      Aucune règle définie. Renseignez le formulaire ci-dessous pour configurer des priorités par ligne.
+                    </p>
+                  ) : (
+                    <table className="gares-modern-table">
+                      <thead>
+                        <tr>
+                          <th>Ligne</th>
+                          <th>Matériel Préféré</th>
+                          <th>Capacité</th>
+                          <th>Statut</th>
+                          <th style={{ textAlign: 'right' }}>Actions</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {rules.map(rule => (
+                          <tr key={rule.id}>
+                            <td><strong>{rule.ligne_nom}</strong></td>
+                            <td>{rule.type_train}{rule.nom_technique ? ` (${rule.nom_technique})` : ''}</td>
+                            <td>{rule.min_capacity ? `${rule.min_capacity} pl.` : '—'}</td>
+                            <td>
+                              <span className={`rule-status-badge ${rule.actif ? 'actif' : 'inactif'}`}>
+                                <wcs-mat-icon icon={rule.actif ? 'check_circle' : 'cancel'} size="s"></wcs-mat-icon>
+                                {rule.actif ? 'Actif' : 'Inactif'}
+                              </span>
+                            </td>
+                            <td>
+                              <div style={{ display: 'flex', gap: '4px', justifyContent: 'flex-end' }}>
+                                <wcs-button mode="clear" size="s" onClick={() => handleEditRule(rule)} title="Modifier">
+                                  <wcs-mat-icon icon="edit" size="s"></wcs-mat-icon>
+                                </wcs-button>
+                                <wcs-button mode="clear" size="s" className="wcs-danger" onClick={() => handleDeleteRule(rule.id)} title="Supprimer">
+                                  <wcs-mat-icon icon="delete" size="s"></wcs-mat-icon>
+                                </wcs-button>
+                              </div>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  )}
+                </div>
+
+                {/* Formulaire ajout/édition règle */}
+                <div className="attribution-form-box">
+                  <h4 style={{ margin: 0, fontSize: '14px', fontWeight: 800, color: '#1e293b' }}>
+                    {editingRuleId ? 'Modifier la règle de ligne' : 'Ajouter une règle de ligne'}
+                  </h4>
+
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+                    <div className="form-group">
+                      <label className="gares-form-label">Ligne ferroviaire</label>
+                      <select
+                        className="gares-modern-input"
+                        style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '8px 10px', background: '#fff', width: '100%' }}
+                        value={ruleLigneId}
+                        onChange={e => setRuleLigneId(e.target.value)}
+                        disabled={!!editingRuleId}
+                      >
+                        <option value="">Sélectionner une ligne...</option>
+                        {lignes.map(l => (
+                          <option key={l.id} value={l.id}>{l.nom}</option>
+                        ))}
+                      </select>
                     </div>
-                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '12px' }}>
-                      <div>
-                        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', fontWeight: 'bold' }}>Capacité minimale</label>
-                        <input type="number" className="search-input" style={{ width: '100%', padding: '0.6rem 0.75rem', fontSize: '1rem', border: '1px solid #ccc', borderRadius: '4px' }} value={ruleMinCapacity} onChange={e => setRuleMinCapacity(e.target.value)} placeholder="Ex: 200" />
-                      </div>
-                      <div>
-                        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.9rem', fontWeight: 'bold' }}>Modèle (contient)</label>
-                        <input type="text" className="search-input" style={{ width: '100%', padding: '0.6rem 0.75rem', fontSize: '1rem', border: '1px solid #ccc', borderRadius: '4px' }} value={ruleNomTechnique} onChange={e => setRuleNomTechnique(e.target.value)} placeholder="Ex: Régiolis" />
-                      </div>
+
+                    <div className="form-group">
+                      <label className="gares-form-label">Type de train souhaité</label>
+                      <select
+                        className="gares-modern-input"
+                        style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '8px 10px', background: '#fff', width: '100%' }}
+                        value={ruleTypeTrain}
+                        onChange={e => setRuleTypeTrain(e.target.value)}
+                      >
+                        <option value="Tous">Tous les types</option>
+                        {typesTrains.map(t => (
+                          <option key={t.id} value={t.nom}>{t.nom}</option>
+                        ))}
+                      </select>
                     </div>
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '16px' }}>
-                      <label style={{ display: 'flex', alignItems: 'center', gap: '6px', cursor: 'pointer' }}>
-                        <input type="checkbox" checked={ruleActif} onChange={e => setRuleActif(e.target.checked)} />
-                        <span>Règle active</span>
-                      </label>
-                      <div>
-                        {editingRuleId && (
-                          <button type="button" onClick={() => {
+                  </div>
+
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+                    <div className="form-group">
+                      <label className="gares-form-label">Capacité minimale</label>
+                      <input
+                        type="number"
+                        className="gares-modern-input"
+                        style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '8px 10px', background: '#fff' }}
+                        value={ruleMinCapacity}
+                        onChange={e => setRuleMinCapacity(e.target.value)}
+                        placeholder="Ex: 250"
+                      />
+                    </div>
+
+                    <div className="form-group">
+                      <label className="gares-form-label">Modèle ou nom technique</label>
+                      <input
+                        type="text"
+                        className="gares-modern-input"
+                        style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '8px 10px', background: '#fff' }}
+                        value={ruleNomTechnique}
+                        onChange={e => setRuleNomTechnique(e.target.value)}
+                        placeholder="Ex: Régiolis"
+                      />
+                    </div>
+                  </div>
+
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '6px' }}>
+                    <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '13px', fontWeight: 600, color: '#334155' }}>
+                      <input
+                        type="checkbox"
+                        checked={ruleActif}
+                        onChange={e => setRuleActif(e.target.checked)}
+                      />
+                      <span>Règle active lors de la génération</span>
+                    </label>
+
+                    <div style={{ display: 'flex', gap: '8px' }}>
+                      {editingRuleId && (
+                        <wcs-button
+                          mode="clear"
+                          onClick={() => {
                             setEditingRuleId(null);
                             setRuleLigneId('');
                             setRuleTypeTrain('');
                             setRuleMinCapacity('');
                             setRuleNomTechnique('');
                             setRuleActif(true);
-                          }} style={{ marginRight: '8px', padding: '6px 12px', background: 'transparent', border: '1px solid #ccc', borderRadius: '4px', cursor: 'pointer' }}>
-                            Annuler
-                          </button>
-                        )}
-                        <wcs-button className="wcs-primary" onClick={handleAddOrUpdateRule}>
-                          {editingRuleId ? 'Mettre à jour la règle' : 'Ajouter la règle'}
-                        </wcs-button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Execution & Preview on the right */}
-                <div className="card" style={{ padding: '24px', background: 'white', borderRadius: '8px', border: '1px solid #ddd' }}>
-                  <h3 style={{ marginTop: 0, marginBottom: '16px', color: '#002244' }}>Exécution de l'attribution</h3>
-                  
-                  <div style={{ background: '#f5f5f7', padding: '16px', borderRadius: '8px', marginBottom: '20px' }}>
-                    <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px', cursor: 'pointer' }}>
-                      <input type="checkbox" checked={keepManualAssignments} onChange={e => setKeepManualAssignments(e.target.checked)} />
-                      <span><strong>Conserver les affectations manuelles existantes</strong></span>
-                    </label>
-                    
-                    <wcs-button className="wcs-primary" onClick={runAutomaticAssignment} disabled={assigningAuto || horaires.length === 0} style={{ width: '100%' }}>
-                      {assigningAuto ? 'Attribution en cours...' : "Lancer l'attribution automatique"}
-                    </wcs-button>
-                  </div>
-
-                  {showProposedAssignments && (
-                    <div>
-                      <h4 style={{ marginTop: 0, marginBottom: '12px' }}>Prévisualisation des affectations proposées</h4>
-                      
-                      <div style={{ maxHeight: '300px', overflowY: 'auto', border: '1px solid #eee', borderRadius: '6px', marginBottom: '16px' }}>
-                        <table style={{ width: '100%', borderCollapse: 'collapse', textAlign: 'left', fontSize: '0.9rem' }}>
-                          <thead>
-                            <tr style={{ background: '#f9fafb', borderBottom: '1px solid #ddd' }}>
-                              <th style={{ padding: '8px' }}>Train</th>
-                              <th style={{ padding: '8px' }}>Ligne</th>
-                              <th style={{ padding: '8px' }}>Matériel proposé</th>
-                              <th style={{ padding: '8px' }}>Statut</th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            {proposedAssignments.map((item, idx) => (
-                              <tr key={`prop-${idx}`} style={{ borderBottom: '1px solid #eee' }}>
-                                <td style={{ padding: '8px' }}><strong>{item.horaire.numero_train}</strong> <span style={{ fontSize: '0.8rem', color: '#666' }}>({formatHeure(item.horaire.heure_depart)})</span></td>
-                                <td style={{ padding: '8px' }}>{item.horaire.ligne_nom}</td>
-                                <td style={{ padding: '8px' }}>
-                                  {item.proposedComposition.length > 0 ? (
-                                    <span>{item.proposedComposition[0].materiel_nom}</span>
-                                  ) : (
-                                    <span style={{ color: '#e74c3c', fontStyle: 'italic' }}>Aucun</span>
-                                  )}
-                                </td>
-                                <td style={{ padding: '8px' }}>
-                                  <span style={{
-                                    padding: '2px 6px',
-                                    borderRadius: '4px',
-                                    fontSize: '0.75rem',
-                                    fontWeight: 'bold',
-                                    background: item.status === 'PERFECT' ? '#def7ec' : item.status === 'KEEP' ? '#e1f5fe' : item.status === 'WARNING' ? '#fef3c7' : '#fde8e8',
-                                    color: item.status === 'PERFECT' ? '#03543f' : item.status === 'KEEP' ? '#0288d1' : item.status === 'WARNING' ? '#92400e' : '#9b1c1c'
-                                  }}>
-                                    {item.message}
-                                  </span>
-                                </td>
-                              </tr>
-                            ))}
-                          </tbody>
-                        </table>
-                      </div>
-
-                      <div style={{ display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
-                        <wcs-button className="wcs-secondary" onClick={() => {
-                          setShowProposedAssignments(false);
-                          setProposedAssignments([]);
-                        }} disabled={applyingAuto}>
+                          }}
+                        >
                           Annuler
                         </wcs-button>
-                        <wcs-button className="wcs-primary" onClick={applyProposedAssignments} disabled={applyingAuto}>
-                          {applyingAuto ? 'Application...' : 'Appliquer et Enregistrer'}
+                      )}
+                      <wcs-button className="wcs-primary" onClick={handleAddOrUpdateRule}>
+                        <wcs-mat-icon icon={editingRuleId ? 'save' : 'add'} size="s"></wcs-mat-icon>
+                        {editingRuleId ? 'Mettre à jour' : 'Ajouter la règle'}
+                      </wcs-button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Colonne droite : Exécution & Aperçu */}
+              <div className="attribution-card">
+                <h3 className="attribution-card-title">
+                  <wcs-mat-icon icon="play_circle" style={{ color: '#16a34a' }}></wcs-mat-icon>
+                  Exécution du moteur d'attribution
+                </h3>
+
+                <div style={{ background: '#f8fafc', border: '1px solid #e2e8f0', borderRadius: '12px', padding: '18px', marginBottom: '20px' }}>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '16px', cursor: 'pointer', fontSize: '13px', fontWeight: 700, color: '#1e293b' }}>
+                    <input
+                      type="checkbox"
+                      checked={keepManualAssignments}
+                      onChange={e => setKeepManualAssignments(e.target.checked)}
+                    />
+                    <span>Conserver les compositions manuelles déjà affectées</span>
+                  </label>
+
+                  <wcs-button
+                    className="wcs-primary"
+                    onClick={runAutomaticAssignment}
+                    disabled={assigningAuto || horaires.length === 0}
+                    style={{ width: '100%' }}
+                  >
+                    <wcs-mat-icon icon="auto_awesome"></wcs-mat-icon>
+                    {assigningAuto ? 'Calcul des affectations...' : "Lancer l'attribution automatique"}
+                  </wcs-button>
+                </div>
+
+                {showProposedAssignments && (
+                  <div>
+                    <h4 style={{ margin: '0 0 12px', fontSize: '14px', fontWeight: 800, color: '#1e293b', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                      <wcs-mat-icon icon="preview" size="s"></wcs-mat-icon>
+                      Aperçu des attributions ({proposedAssignments.length} sillons)
+                    </h4>
+
+                    <div style={{ maxHeight: '320px', overflowY: 'auto', border: '1px solid #e2e8f0', borderRadius: '10px', marginBottom: '16px' }}>
+                      <table className="gares-modern-table" style={{ fontSize: '12px' }}>
+                        <thead>
+                          <tr>
+                            <th>Train</th>
+                            <th>Ligne</th>
+                            <th>Matériel proposé</th>
+                            <th>Résultat</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {proposedAssignments.map((item, idx) => (
+                            <tr key={`prop-${idx}`}>
+                              <td>
+                                <strong>{item.horaire.numero_train}</strong>
+                                <span style={{ fontSize: '11px', color: '#64748b', display: 'block' }}>
+                                  ({formatHeure(item.horaire.heure_depart)})
+                                </span>
+                              </td>
+                              <td>{item.horaire.ligne_nom}</td>
+                              <td>
+                                {item.proposedComposition.length > 0 ? (
+                                  <strong>{item.proposedComposition[0].materiel_nom}</strong>
+                                ) : (
+                                  <span style={{ color: '#e11d48', fontStyle: 'italic' }}>Aucun matériel</span>
+                                )}
+                              </td>
+                              <td>
+                                <wcs-badge
+                                  className={
+                                    item.status === 'PERFECT'
+                                      ? 'wcs-success'
+                                      : item.status === 'KEEP'
+                                      ? 'wcs-info'
+                                      : item.status === 'WARNING'
+                                      ? 'wcs-warning'
+                                      : 'wcs-danger'
+                                  }
+                                >
+                                  {item.message}
+                                </wcs-badge>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+
+                    <div style={{ display: 'flex', gap: '10px', justifyContent: 'flex-end' }}>
+                      <wcs-button
+                        className="wcs-secondary"
+                        onClick={() => {
+                          setShowProposedAssignments(false);
+                          setProposedAssignments([]);
+                        }}
+                        disabled={applyingAuto}
+                      >
+                        Annuler
+                      </wcs-button>
+                      <wcs-button
+                        className="wcs-primary"
+                        onClick={applyProposedAssignments}
+                        disabled={applyingAuto}
+                      >
+                        <wcs-mat-icon icon="check"></wcs-mat-icon>
+                        {applyingAuto ? 'Application...' : 'Valider et Appliquer'}
+                      </wcs-button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* 5. MODAL CRÉATION / ÉDITION MATÉRIEL */}
+          {showModal && (
+            <div className="materiels-modal-overlay" onClick={closeModal}>
+              <div className="materiels-modal-dialog" onClick={e => e.stopPropagation()} ref={modalRef}>
+                <div className="materiels-modal-header">
+                  <h3>{editingItem ? 'Modifier le matériel roulant' : 'Nouveau matériel roulant'}</h3>
+                  <button className="modal-close" onClick={closeModal}>
+                    <wcs-mat-icon icon="close"></wcs-mat-icon>
+                  </button>
+                </div>
+
+                <div className="materiels-modal-body">
+                  {formError && (
+                    <wcs-alert intent="error" show>
+                      <span slot="title">Erreur</span>
+                      <span slot="subtitle">{formError}</span>
+                    </wcs-alert>
+                  )}
+                  {uploadWarning && (
+                    <wcs-alert intent="warning" show>
+                      <span slot="title">Avertissement</span>
+                      <span slot="subtitle">{uploadWarning}</span>
+                    </wcs-alert>
+                  )}
+
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+                    <div className="form-group">
+                      <label className="gares-form-label">Nom commercial *</label>
+                      <input
+                        className="gares-modern-input"
+                        style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '10px 12px', background: '#fff', width: '100%' }}
+                        value={name}
+                        onChange={e => setName(e.target.value)}
+                        placeholder="Ex: Régiolis B 84500"
+                      />
+                    </div>
+
+                    <div className="form-group">
+                      <label className="gares-form-label">Nom technique / Série *</label>
+                      <input
+                        className="gares-modern-input"
+                        style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '10px 12px', background: '#fff', width: '100%' }}
+                        value={techName}
+                        onChange={e => setTechName(e.target.value)}
+                        placeholder="Ex: B 84500"
+                      />
+                    </div>
+                  </div>
+
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+                    <div className="form-group">
+                      <label className="gares-form-label">Capacité (places assises)</label>
+                      <input
+                        type="number"
+                        className="gares-modern-input"
+                        style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '10px 12px', background: '#fff', width: '100%' }}
+                        value={capacity}
+                        onChange={e => setCapacity(e.target.value)}
+                        placeholder="Ex: 220"
+                      />
+                    </div>
+
+                    <div className="form-group">
+                      <label className="gares-form-label">Type de train *</label>
+                      <select
+                        className="gares-modern-input"
+                        style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '10px 12px', background: '#fff', width: '100%' }}
+                        value={typeTrain}
+                        onChange={e => setTypeTrain(e.target.value)}
+                      >
+                        <option value="">Sélectionner un type</option>
+                        {typesTrains.map((type) => (
+                          <option key={type.id} value={type.nom}>{type.nom}</option>
+                        ))}
+                      </select>
+                    </div>
+                  </div>
+
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+                    <div className="form-group">
+                      <label className="gares-form-label">Visuel / Illustration (image)</label>
+                      <input
+                        type="file"
+                        accept="image/*"
+                        onChange={handleFileChange}
+                        style={{ display: 'block', marginTop: '6px', fontSize: '13px' }}
+                      />
+                      {imageFile && (
+                        <span style={{ fontSize: '12px', color: '#16a34a', marginTop: '4px', display: 'block' }}>
+                          Fichier sélectionné : {imageFile.name}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="form-group">
+                      <label className="gares-form-label">Numéro de série</label>
+                      <div style={{ display: 'flex', gap: '8px' }}>
+                        <input
+                          className="gares-modern-input"
+                          style={{ border: '1px solid #cbd5e1', borderRadius: '8px', padding: '10px 12px', background: '#f8fafc', flex: 1, fontWeight: 700 }}
+                          value={serial}
+                          readOnly
+                        />
+                        <wcs-button mode="stroked" type="button" onClick={ensureUniqueSerial} title="Générer un nouveau n°">
+                          <wcs-mat-icon icon="refresh"></wcs-mat-icon>
                         </wcs-button>
                       </div>
                     </div>
-                  )}
+                  </div>
+                </div>
+
+                <div className="materiels-modal-footer">
+                  <wcs-button className="wcs-secondary" onClick={closeModal} disabled={saving}>
+                    Annuler
+                  </wcs-button>
+                  <wcs-button
+                    className="wcs-primary"
+                    onClick={handleSave}
+                    disabled={saving || (!editingItem && !canCreateMateriels) || (!!editingItem && !canUpdateMateriels)}
+                  >
+                    <wcs-mat-icon icon="save"></wcs-mat-icon>
+                    {saving ? 'Enregistrement...' : (editingItem ? 'Mettre à jour' : 'Créer le matériel')}
+                  </wcs-button>
                 </div>
               </div>
-            )}
+            </div>
+          )}
 
-            {/* Modal création/édition */}
-            {showModal && (
-                <div className="modal-overlay" onClick={closeModal}>
-                  <div className="modal-content modal-large materiels-modal" onClick={e => e.stopPropagation()} ref={modalRef}>
-                    <div className="modal-header">
-                      <h3>{editingItem ? `Modifier matériel` : `Nouveau matériel`}</h3>
-                      <button className="modal-close" onClick={closeModal}>×</button>
-                    </div>
-
-                    <div className="modal-body">
-                      {formError && (
-                          <wcs-alert className="materiels-alert" intent="error" show>
-                            <span slot="title">Erreur</span>
-                            <span slot="subtitle">{formError}</span>
-                          </wcs-alert>
-                      )}
-                      {uploadWarning && (
-                          <wcs-alert className="materiels-alert" intent="warning" show>
-                            <span slot="title">Avertissement</span>
-                            <span slot="subtitle">{uploadWarning}</span>
-                          </wcs-alert>
-                      )}
-
-                      <div className="form-row">
-                        <div className="form-group">
-                          <label>Nom du matériel roulant</label>
-                          <wcs-input value={name} placeholder="Ex: Régiolis 345" onWcsChange={(e) => setName(e.detail?.value || '')} data-field="nom" />
-                        </div>
-
-                        <div className="form-group">
-                          <label>Nom technique</label>
-                          <wcs-input value={techName} placeholder="Nom technique" onWcsChange={(e) => setTechName(e.detail?.value || '')} data-field="nom_technique" />
-                        </div>
-                      </div>
-
-                      <div className="form-row">
-                        <div className="form-group">
-                          <label>Capacité</label>
-                          <wcs-input type="number" value={capacity} placeholder="Nombre de places" onWcsChange={(e) => setCapacity(e.detail?.value || '')} data-field="capacite" />
-                        </div>
-
-                        <div className="form-group">
-                          <label>Type de train</label>
-                          <select value={typeTrain} onChange={(e) => setTypeTrain(e.target.value)}>
-                            <option value="">Sélectionner un type</option>
-                            {typesTrains.map((type) => (
-                              <option key={type.id} value={type.nom}>{type.nom}</option>
-                            ))}
-                          </select>
-                        </div>
-                      </div>
-
-                      <div className="form-row">
-                        <div className="form-group">
-                          <label>Visuel (image)</label>
-                          <input className="materiels-file-input" type="file" accept="image/*" onChange={handleFileChange} />
-                          {imageFile && <div className="materiels-file-name">Fichier sélectionné: {imageFile.name}</div>}
-                        </div>
-
-                        <div className="form-group">
-                          <label>Numéro de série</label>
-                          <wcs-input value={serial} readonly data-field="numero_serie" />
-                          <wcs-button type="button" onClick={ensureUniqueSerial}>Regenerer</wcs-button>
-                        </div>
-                      </div>
-
-                    </div>
-
-                    <div className="modal-footer">
-                      <wcs-button className="wcs-secondary" onClick={closeModal} disabled={saving}>Annuler</wcs-button>
-                      <wcs-button className="wcs-primary" onClick={handleSave} disabled={saving || (!editingItem && !canCreateMateriels) || (!!editingItem && !canUpdateMateriels)}>{saving ? 'Enregistrement...' : (editingItem ? 'Mettre à jour' : 'Créer')}</wcs-button>
-                    </div>
-                  </div>
+          {/* Modal confirmation suppression */}
+          {deleteConfirmId && (
+            <div className="materiels-modal-overlay" onClick={() => setDeleteConfirmId(null)}>
+              <div className="materiels-modal-dialog" style={{ maxWidth: '440px' }} onClick={e => e.stopPropagation()}>
+                <div className="materiels-modal-header">
+                  <h3>Confirmer la suppression</h3>
+                  <button className="modal-close" onClick={() => setDeleteConfirmId(null)}>
+                    <wcs-mat-icon icon="close"></wcs-mat-icon>
+                  </button>
                 </div>
-            )}
-
-            {/* Modal confirmation suppression */}
-            {deleteConfirmId && (
-                <div className="modal-overlay" onClick={() => setDeleteConfirmId(null)}>
-                  <div className="modal-content modal-small" onClick={e => e.stopPropagation()}>
-                    <div className="modal-header">
-                      <h3>Confirmer la suppression</h3>
-                    </div>
-                    <div className="modal-body">
-                      <p>Êtes-vous sûr de vouloir supprimer ce matériel ?</p>
-                      <p><strong>Cette action est irréversible.</strong></p>
-                    </div>
-                    <div className="modal-footer">
-                      <wcs-button className="wcs-secondary" onClick={() => setDeleteConfirmId(null)}>Annuler</wcs-button>
-                      <wcs-button className="wcs-danger" onClick={() => handleDelete(deleteConfirmId)}>Supprimer</wcs-button>
-                    </div>
-                  </div>
+                <div className="materiels-modal-body">
+                  <p style={{ margin: 0, color: '#334155' }}>Êtes-vous sûr de vouloir supprimer ce matériel ?</p>
+                  <p style={{ margin: '8px 0 0', color: '#e11d48', fontWeight: 600 }}>Cette action est irréversible.</p>
                 </div>
-            )}
+                <div className="materiels-modal-footer">
+                  <wcs-button className="wcs-secondary" onClick={() => setDeleteConfirmId(null)}>
+                    Annuler
+                  </wcs-button>
+                  <wcs-button className="wcs-danger" onClick={() => handleDelete(deleteConfirmId)}>
+                    <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                    Supprimer
+                  </wcs-button>
+                </div>
+              </div>
+            </div>
+          )}
 
         </div>
       </div>
+    </div>
   );
 }
diff --git a/src/pages/menu/MenuRegional.css b/src/pages/menu/MenuRegional.css
index e4c27ff..afdedd2 100644
--- a/src/pages/menu/MenuRegional.css
+++ b/src/pages/menu/MenuRegional.css
@@ -645,3 +645,175 @@
     grid-template-columns: 1fr;
   }
 }
+
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .menu-regional-page .panel-content,
+[data-theme="dark"] .menu-regional-page .panel-content {
+  background: #0b111e;
+}
+
+body.dark-mode .menu-page-header,
+[data-theme="dark"] .menu-page-header {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .menu-page-header-main h2,
+[data-theme="dark"] .menu-page-header-main h2 {
+  color: #f8fafc;
+}
+
+body.dark-mode .menu-page-kicker,
+body.dark-mode .menu-page-description,
+[data-theme="dark"] .menu-page-kicker,
+[data-theme="dark"] .menu-page-description {
+  color: #94a3b8;
+}
+
+body.dark-mode .menu-page-region,
+[data-theme="dark"] .menu-page-region {
+  color: #cbd5e1;
+}
+
+body.dark-mode .menu-card,
+[data-theme="dark"] .menu-card {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .menu-card-title,
+[data-theme="dark"] .menu-card-title {
+  color: #f8fafc;
+}
+
+body.dark-mode .menu-card-desc,
+body.dark-mode .menu-card-meta,
+[data-theme="dark"] .menu-card-desc,
+[data-theme="dark"] .menu-card-meta {
+  color: #94a3b8;
+}
+
+body.dark-mode .structure-panel,
+body.dark-mode .edit-panel,
+body.dark-mode .menu-simple-card,
+body.dark-mode .menu-editor,
+body.dark-mode .menu-hier-editor,
+[data-theme="dark"] .structure-panel,
+[data-theme="dark"] .edit-panel,
+[data-theme="dark"] .menu-simple-card,
+[data-theme="dark"] .menu-editor,
+[data-theme="dark"] .menu-hier-editor {
+  background: #151f30;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .structure-panel-header,
+body.dark-mode .edit-panel-header,
+[data-theme="dark"] .structure-panel-header,
+[data-theme="dark"] .edit-panel-header {
+  background: #0e1726;
+  border-bottom-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .menu-element,
+body.dark-mode .sous-element-row,
+body.dark-mode .brique-row,
+[data-theme="dark"] .menu-element,
+[data-theme="dark"] .sous-element-row,
+[data-theme="dark"] .brique-row {
+  border-color: #243247;
+}
+
+body.dark-mode .menu-element-row:hover,
+[data-theme="dark"] .menu-element-row:hover {
+  background: #1a2a42;
+}
+
+body.dark-mode .menu-element-row.selected,
+[data-theme="dark"] .menu-element-row.selected {
+  background: #1e3a8a;
+}
+
+body.dark-mode .menu-element-label,
+[data-theme="dark"] .menu-element-label {
+  color: #f8fafc;
+}
+
+body.dark-mode .sous-elements-list,
+[data-theme="dark"] .sous-elements-list {
+  background: #0e1726;
+}
+
+body.dark-mode .sous-element-row:hover,
+[data-theme="dark"] .sous-element-row:hover {
+  background: #1a2a42;
+}
+
+body.dark-mode .sous-element-row.selected,
+[data-theme="dark"] .sous-element-row.selected {
+  background: #1e3a8a;
+}
+
+body.dark-mode .briques-list,
+[data-theme="dark"] .briques-list {
+  background: #0b111e;
+  border-top-color: #243247;
+}
+
+body.dark-mode .brique-row:hover,
+[data-theme="dark"] .brique-row:hover {
+  background: #1a2a42;
+}
+
+body.dark-mode .brique-row.selected,
+[data-theme="dark"] .brique-row.selected {
+  background: #1e3a8a;
+}
+
+body.dark-mode .form-field label,
+body.dark-mode .menu-field label,
+[data-theme="dark"] .form-field label,
+[data-theme="dark"] .menu-field label {
+  color: #94a3b8;
+}
+
+body.dark-mode .form-field input,
+body.dark-mode .form-field select,
+body.dark-mode .form-field textarea,
+body.dark-mode .menu-field input,
+body.dark-mode .menu-field select,
+[data-theme="dark"] .form-field input,
+[data-theme="dark"] .form-field select,
+[data-theme="dark"] .form-field textarea,
+[data-theme="dark"] .menu-field input,
+[data-theme="dark"] .menu-field select {
+  background: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .menu-node,
+body.dark-mode .menu-editor-item,
+[data-theme="dark"] .menu-node,
+[data-theme="dark"] .menu-editor-item {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .menu-node.nested,
+[data-theme="dark"] .menu-node.nested {
+  background: #0b111e;
+  border-color: #243247;
+}
+
+body.dark-mode .menu-toggle,
+[data-theme="dark"] .menu-toggle {
+  color: #f8fafc;
+}
+
diff --git a/src/pages/messagerie/Messagerie.css b/src/pages/messagerie/Messagerie.css
index 7215757..d95d40b 100644
--- a/src/pages/messagerie/Messagerie.css
+++ b/src/pages/messagerie/Messagerie.css
@@ -177,3 +177,61 @@
   }
 }
 
+/* Dark Mode */
+body.dark-mode .messagerie-sidebar,
+body.dark-mode .messagerie-main,
+[data-theme="dark"] .messagerie-sidebar,
+[data-theme="dark"] .messagerie-main {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .messagerie-thread-item,
+[data-theme="dark"] .messagerie-thread-item {
+  background: #111a28;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .messagerie-thread-item.active,
+[data-theme="dark"] .messagerie-thread-item.active {
+  background: #0d2744;
+  border-color: #0088ce;
+}
+
+body.dark-mode .messagerie-conversation,
+[data-theme="dark"] .messagerie-conversation {
+  background: #0b111e;
+}
+
+body.dark-mode .messagerie-bubble,
+[data-theme="dark"] .messagerie-bubble {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .messagerie-bubble.mine,
+[data-theme="dark"] .messagerie-bubble.mine {
+  background: #0d2744;
+  border-color: #0369a1;
+}
+
+body.dark-mode .messagerie-compose-head,
+body.dark-mode .messagerie-compose-box,
+[data-theme="dark"] .messagerie-compose-head,
+[data-theme="dark"] .messagerie-compose-box {
+  border-color: #243247;
+}
+
+body.dark-mode .messagerie-compose-head select,
+body.dark-mode .messagerie-compose-box textarea,
+[data-theme="dark"] .messagerie-compose-head select,
+[data-theme="dark"] .messagerie-compose-box textarea {
+  background: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+
diff --git a/src/pages/mon-compte/MonCompte.css b/src/pages/mon-compte/MonCompte.css
index 9a0dbcc..b07d955 100644
--- a/src/pages/mon-compte/MonCompte.css
+++ b/src/pages/mon-compte/MonCompte.css
@@ -122,3 +122,69 @@
   }
 }
 
+@media (max-width: 600px) {
+  .mon-compte-page-header {
+    padding: 16px;
+  }
+
+  .mon-compte-card {
+    padding: 14px;
+  }
+
+  .mon-compte-actions wcs-button {
+    width: 100%;
+  }
+}
+
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .mon-compte-page,
+[data-theme="dark"] .mon-compte-page {
+  background: #0b111e;
+}
+
+body.dark-mode .mon-compte-page-header,
+[data-theme="dark"] .mon-compte-page-header {
+  background: linear-gradient(140deg, #151f30 0%, #1a2a42 60%, #203554 100%);
+  border: 1px solid #243247;
+  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .mon-compte-card,
+[data-theme="dark"] .mon-compte-card {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  color: #f8fafc;
+}
+
+body.dark-mode .mon-compte-card .form-group label,
+[data-theme="dark"] .mon-compte-card .form-group label {
+  color: #94a3b8;
+}
+
+body.dark-mode .mon-compte-card input,
+[data-theme="dark"] .mon-compte-card input {
+  background: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .mon-compte-card input:focus,
+[data-theme="dark"] .mon-compte-card input:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
+}
+
+body.dark-mode .mon-compte-meta,
+[data-theme="dark"] .mon-compte-meta {
+  color: #94a3b8;
+}
+
+body.dark-mode .mon-compte-loading,
+[data-theme="dark"] .mon-compte-loading {
+  color: #94a3b8;
+}
+
+
diff --git a/src/pages/pages-gestion/EditeurPage.css b/src/pages/pages-gestion/EditeurPage.css
index 273daba..d38dd19 100644
--- a/src/pages/pages-gestion/EditeurPage.css
+++ b/src/pages/pages-gestion/EditeurPage.css
@@ -438,3 +438,174 @@ h1.preview-titre {
   font-size: 12px;
   margin: 0;
 }
+
+@media (max-width: 900px) {
+  .editeur-layout,
+  .cms-page-editor {
+    grid-template-columns: 1fr;
+  }
+
+  .editeur-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .preview-toolbar {
+    padding: 10px 16px;
+  }
+
+  .preview-content {
+    padding: 30px 16px;
+  }
+}
+
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .editeur-page-container,
+[data-theme="dark"] .editeur-page-container {
+  background-color: #0b111e;
+  color: #f8fafc;
+}
+
+body.dark-mode .editeur-header,
+[data-theme="dark"] .editeur-header {
+  background: #151f30;
+  border: 1px solid #243247;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .page-builder,
+[data-theme="dark"] .page-builder {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .builder-item,
+[data-theme="dark"] .builder-item {
+  border-color: #243247;
+  background: #0e1726;
+}
+
+body.dark-mode .item-controls,
+[data-theme="dark"] .item-controls {
+  background: #151f30;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .comp-name,
+[data-theme="dark"] .comp-name {
+  color: #94a3b8;
+}
+
+body.dark-mode .comp-edit label,
+[data-theme="dark"] .comp-edit label {
+  color: #94a3b8;
+}
+
+body.dark-mode .comp-edit input,
+body.dark-mode .comp-edit textarea,
+body.dark-mode .comp-edit select,
+[data-theme="dark"] .comp-edit input,
+[data-theme="dark"] .comp-edit textarea,
+[data-theme="dark"] .comp-edit select {
+  background: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .sidebar-section,
+[data-theme="dark"] .sidebar-section {
+  background: #151f30;
+  border: 1px solid #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .sidebar-section h3,
+[data-theme="dark"] .sidebar-section h3 {
+  border-bottom-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .comp-tool,
+[data-theme="dark"] .comp-tool {
+  border-color: #243247;
+  background: #0e1726;
+  color: #f8fafc;
+}
+
+body.dark-mode .comp-tool:hover,
+[data-theme="dark"] .comp-tool:hover {
+  background: #1a2a42;
+  border-color: #38bdf8;
+}
+
+body.dark-mode .cms-builder,
+[data-theme="dark"] .cms-builder {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .cms-block,
+[data-theme="dark"] .cms-block {
+  border-color: #243247;
+}
+
+body.dark-mode .cms-block-header,
+[data-theme="dark"] .cms-block-header {
+  background: #0e1726;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .cms-block-title,
+[data-theme="dark"] .cms-block-title {
+  color: #f8fafc;
+}
+
+body.dark-mode .cms-sidebar,
+[data-theme="dark"] .cms-sidebar {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .cms-block-add,
+[data-theme="dark"] .cms-block-add {
+  border-color: #243247;
+  background: #0e1726;
+  color: #38bdf8;
+}
+
+body.dark-mode .cms-block-add:hover,
+[data-theme="dark"] .cms-block-add:hover {
+  background: #1a2a42;
+}
+
+body.dark-mode .cms-label,
+[data-theme="dark"] .cms-label {
+  color: #94a3b8;
+}
+
+body.dark-mode .cms-input,
+body.dark-mode .cms-select,
+body.dark-mode .cms-textarea,
+[data-theme="dark"] .cms-input,
+[data-theme="dark"] .cms-select,
+[data-theme="dark"] .cms-textarea {
+  background: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .cms-checkbox,
+[data-theme="dark"] .cms-checkbox {
+  color: #f8fafc;
+}
+
+body.dark-mode .titre-input,
+[data-theme="dark"] .titre-input {
+  background: #151f30;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
diff --git a/src/pages/pages-gestion/PagesGestion.css b/src/pages/pages-gestion/PagesGestion.css
index a037010..dbfc786 100644
--- a/src/pages/pages-gestion/PagesGestion.css
+++ b/src/pages/pages-gestion/PagesGestion.css
@@ -52,3 +52,56 @@
   display: flex;
   gap: 10px;
 }
+
+@media (max-width: 768px) {
+  .pages-gestion-container {
+    padding: 12px;
+  }
+
+  .header-actions {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+}
+
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .pages-gestion-container,
+[data-theme="dark"] .pages-gestion-container {
+  background: #0b111e;
+  color: #f8fafc;
+}
+
+body.dark-mode .wcs-table,
+[data-theme="dark"] .wcs-table {
+  background: #151f30;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .wcs-table th,
+[data-theme="dark"] .wcs-table th {
+  background-color: #0e1726;
+  color: #94a3b8;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .wcs-table td,
+[data-theme="dark"] .wcs-table td {
+  border-bottom-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .badge-statut.publie,
+[data-theme="dark"] .badge-statut.publie {
+  background-color: rgba(34, 197, 94, 0.15);
+  color: #4ade80;
+}
+
+body.dark-mode .badge-statut.brouillon,
+[data-theme="dark"] .badge-statut.brouillon {
+  background-color: rgba(234, 179, 8, 0.15);
+  color: #fde047;
+}
+
diff --git a/src/pages/parametres/Parametres.css b/src/pages/parametres/Parametres.css
index 03ac440..d817133 100644
--- a/src/pages/parametres/Parametres.css
+++ b/src/pages/parametres/Parametres.css
@@ -208,3 +208,142 @@
   }
 }
 
+@media (max-width: 600px) {
+  .param-logo-bg-controls {
+    flex-direction: column;
+  }
+}
+
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .parametres-page,
+[data-theme="dark"] .parametres-page {
+  background: #0b111e;
+}
+
+body.dark-mode .parametres-page-header,
+[data-theme="dark"] .parametres-page-header {
+  background: linear-gradient(140deg, #151f30 0%, #1a2a42 60%, #203554 100%);
+  border: 1px solid #243247;
+  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .parametres-main-card,
+[data-theme="dark"] .parametres-main-card {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .parametres-tabs,
+[data-theme="dark"] .parametres-tabs {
+  background: #0e1726;
+  border-color: #243247;
+}
+
+body.dark-mode .parametres-tab-btn,
+[data-theme="dark"] .parametres-tab-btn {
+  color: #94a3b8;
+}
+
+body.dark-mode .parametres-tab-btn:hover,
+[data-theme="dark"] .parametres-tab-btn:hover {
+  color: #f8fafc;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+body.dark-mode .parametres-tab-btn.active,
+[data-theme="dark"] .parametres-tab-btn.active {
+  background: #0088ce;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(0, 136, 206, 0.4);
+}
+
+body.dark-mode .parametres-page .table-container,
+[data-theme="dark"] .parametres-page .table-container {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .parametres-page .wcs-table th,
+[data-theme="dark"] .parametres-page .wcs-table th {
+  background: #0e1726;
+  color: #94a3b8;
+}
+
+body.dark-mode .parametres-page .wcs-table td,
+[data-theme="dark"] .parametres-page .wcs-table td {
+  border-bottom-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .parametres-page .wcs-table tr:hover,
+[data-theme="dark"] .parametres-page .wcs-table tr:hover {
+  background: #1a2a42;
+}
+
+body.dark-mode .parametres-page .form-group label,
+body.dark-mode .parametres-page label,
+[data-theme="dark"] .parametres-page .form-group label,
+[data-theme="dark"] .parametres-page label {
+  color: #94a3b8;
+}
+
+body.dark-mode .parametres-page input,
+body.dark-mode .parametres-page select,
+body.dark-mode .parametres-page textarea,
+[data-theme="dark"] .parametres-page input,
+[data-theme="dark"] .parametres-page select,
+[data-theme="dark"] .parametres-page textarea {
+  background: #0b111e;
+  border-color: #243247 !important;
+  color: #f8fafc;
+}
+
+body.dark-mode .parametres-page input:focus,
+body.dark-mode .parametres-page select:focus,
+body.dark-mode .parametres-page textarea:focus,
+[data-theme="dark"] .parametres-page input:focus,
+[data-theme="dark"] .parametres-page select:focus,
+[data-theme="dark"] .parametres-page textarea:focus {
+  border-color: #38bdf8 !important;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
+}
+
+body.dark-mode .parametres-page .modal-content,
+[data-theme="dark"] .parametres-page .modal-content {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.6);
+  color: #f8fafc;
+}
+
+body.dark-mode .parametres-page .modal-header,
+[data-theme="dark"] .parametres-page .modal-header {
+  background: #0e1726;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .parametres-page .modal-footer,
+[data-theme="dark"] .parametres-page .modal-footer {
+  background: #0e1726;
+  border-top-color: #243247;
+}
+
+body.dark-mode .param-logo-bg-btn,
+[data-theme="dark"] .param-logo-bg-btn {
+  background: #0b111e;
+  border-color: #243247;
+  color: #94a3b8;
+}
+
+body.dark-mode .param-logo-bg-btn.active,
+[data-theme="dark"] .param-logo-bg-btn.active {
+  background: #0088ce;
+  border-color: #0088ce;
+  color: #ffffff;
+}
+
+
diff --git a/src/pages/perturbations/CreerPerturbation.js b/src/pages/perturbations/CreerPerturbation.js
index 68ab679..2a60b19 100644
--- a/src/pages/perturbations/CreerPerturbation.js
+++ b/src/pages/perturbations/CreerPerturbation.js
@@ -146,7 +146,7 @@ export default function CreerPerturbation() {
 
   const handleSelectSingleHoraire = useCallback((h) => {
     setSelectedHoraires([h]);
-    setSearchQuery(`${h.numero_train} - ${h.gare_depart_nom} → ${h.gare_arrivee_nom}`);
+    setSearchQuery(`${h.numero_train} - ${h.gare_depart_nom} vers ${h.gare_arrivee_nom}`);
     setShowResults(false);
     setPerturbationsArretsMap({ [h.id]: buildArretFromHoraire(h) });
     setOpenTrains({ [h.id]: true });
@@ -184,13 +184,33 @@ export default function CreerPerturbation() {
       
       if (checked) {
         if (!types.includes(typeValue)) types.push(typeValue);
-        if (typeValue === 'retard') { a.manual_retard = true; a.retard_minutes = a.retard_minutes || 0; }
-        if (typeValue === 'arret_prolonge') { a.manual_arret_prolonge = true; a.arret_prolonge_minutes = a.arret_prolonge_minutes || 0; }
+        if (typeValue === 'retard') { 
+          a.manual_retard = true; 
+          a.retard_minutes = Number(a.retard_minutes) > 0 ? a.retard_minutes : 15; 
+        }
+        if (typeValue === 'reduction_retard') {
+          a.manual_reduction = true;
+          a.reduction_retard_minutes = Number(a.reduction_retard_minutes) > 0 ? a.reduction_retard_minutes : 5;
+        }
+        if (typeValue === 'arret_prolonge') { 
+          a.manual_arret_prolonge = true; 
+          a.arret_prolonge_minutes = Number(a.arret_prolonge_minutes) > 0 ? a.arret_prolonge_minutes : 5; 
+        }
         if (typeValue === 'modification_parcours') { a.is_nouveau_terminus = false; a.is_nouvelle_origine = false; }
       } else {
         types = types.filter(t => t !== typeValue);
-        if (typeValue === 'retard') { a.manual_retard = false; a.retard_minutes = 0; }
-        if (typeValue === 'arret_prolonge') { a.manual_arret_prolonge = false; a.arret_prolonge_minutes = 0; }
+        if (typeValue === 'retard') { 
+          a.manual_retard = false; 
+          a.retard_minutes = 0; 
+        }
+        if (typeValue === 'reduction_retard') {
+          a.manual_reduction = false;
+          a.reduction_retard_minutes = 0;
+        }
+        if (typeValue === 'arret_prolonge') { 
+          a.manual_arret_prolonge = false; 
+          a.arret_prolonge_minutes = 0; 
+        }
         if (typeValue === 'arret_supprime') { a.is_nouveau_terminus = false; a.is_nouvelle_origine = false; }
         if (typeValue === 'modification_parcours') { a.is_nouveau_terminus = false; a.is_nouvelle_origine = false; }
       }
@@ -209,10 +229,24 @@ export default function CreerPerturbation() {
       nextArr[index] = { ...nextArr[index], [field]: value };
       
       if (field === 'retard_minutes') {
-        nextArr[index].manual_retard = true;
-        nextArr[index].retard_minutes = Number(value) || 0;
+        const mins = Number(value) || 0;
+        nextArr[index].retard_minutes = mins;
+        nextArr[index].manual_retard = mins > 0;
         const types = [...(nextArr[index].types_perturbation || [])];
-        if (!types.includes('retard')) types.push('retard');
+        if (mins > 0 && !types.includes('retard')) types.push('retard');
+        nextArr[index].types_perturbation = types;
+        nextArr[index].type_perturbation = getPrimaryType(types);
+      }
+      if (field === 'reduction_retard_minutes') {
+        const mins = Number(value) || 0;
+        nextArr[index].reduction_retard_minutes = mins;
+        nextArr[index].manual_reduction = mins > 0;
+        const types = [...(nextArr[index].types_perturbation || [])];
+        if (mins > 0 && !types.includes('reduction_retard')) types.push('reduction_retard');
+        else if (mins === 0) {
+          const idx = types.indexOf('reduction_retard');
+          if (idx !== -1) types.splice(idx, 1);
+        }
         nextArr[index].types_perturbation = types;
         nextArr[index].type_perturbation = getPrimaryType(types);
       }
@@ -538,8 +572,10 @@ export default function CreerPerturbation() {
           </div>
           <div className="horaire-display-content" style={{ maxHeight: '200px', overflowY: 'auto' }}>
             {selectedHoraires.map(h => (
-              <div key={h.id} style={{ padding: '8px 0', borderBottom: '1px solid #eee' }}>
-                <strong>Train {h.numero_train}</strong> ({h.ligne_nom || 'N/A'}) - {h.gare_depart_nom} → {h.gare_arrivee_nom}
+              <div key={h.id} style={{ padding: '8px 0', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                <strong>Train {h.numero_train}</strong> ({h.ligne_nom || 'N/A'}) - {h.gare_depart_nom}
+                <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '13px', margin: '0 4px', color: '#94a3b8' }}></wcs-mat-icon>
+                {h.gare_arrivee_nom}
               </div>
             ))}
           </div>
@@ -573,8 +609,8 @@ export default function CreerPerturbation() {
               style={{ padding: '12px 16px', background: '#e9ecef', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
               onClick={() => toggleTrainAccordion(h.id)}
             >
-              <h4 style={{ margin: 0, fontSize: '1rem', color: '#333' }}>
-                Train {h.numero_train} ({h.gare_depart_nom} → {h.gare_arrivee_nom})
+              <h4 style={{ margin: 0, fontSize: '1rem', color: '#333', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                Train {h.numero_train} ({h.gare_depart_nom} <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '13px' }}></wcs-mat-icon> {h.gare_arrivee_nom})
               </h4>
               <wcs-mat-icon icon={openTrains[h.id] ? 'expand_less' : 'expand_more'} style={{ color: '#555' }} />
             </div>
@@ -677,8 +713,10 @@ export default function CreerPerturbation() {
                         Départ : {formatHeure(h.heure_depart)}
                       </span>
                     </div>
-                    <div>
-                      {h.gare_depart_nom} → {h.gare_arrivee_nom}
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                      <span>{h.gare_depart_nom}</span>
+                      <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '13px', margin: '0 4px', color: '#94a3b8' }}></wcs-mat-icon>
+                      <span>{h.gare_arrivee_nom}</span>
                     </div>
                     <div style={{ fontSize: '0.9rem', color: '#4b5563' }}>
                       Matériel actuel : {h.composition_train?.map(c => `${c.materiel_nom}`).join(', ') || 'Aucun'}
@@ -717,7 +755,7 @@ export default function CreerPerturbation() {
             <select id="sillon" value={sillonSubstitutionId} onChange={e => setSillonSubstitutionId(e.target.value)} className="form-select">
               <option value="">Aucun</option>
               {horaires.filter(h => h.id !== selectedHoraires[0].id).slice(0, 50).map(h => (
-                <option key={h.id} value={h.id}>{h.numero_train} - {h.gare_depart_nom} → {h.gare_arrivee_nom}</option>
+                <option key={h.id} value={h.id}>{h.numero_train} - {h.gare_depart_nom} vers {h.gare_arrivee_nom}</option>
               ))}
             </select>
           </div>
@@ -762,29 +800,76 @@ export default function CreerPerturbation() {
 
   // ── Rendu principal ───────────────────────────────────────────────────────
   return (
-    <div className="sncf-groupe">
+    <div className="sncf-groupe perturbations-page-root">
       <div className="panel-layout">
         <div className="panel-nav"><NavPanel /></div>
-        <div className="panel-content">
-          <header className="page-header">
-            <h1>Créer une perturbation</h1>
-            <p className="page-description">
-              Étape {currentStep === 'horaire' ? '1' : '2'} / 2 —{' '}
-              {currentStep === 'horaire' ? 'Sélection des horaires' : 'Configuration'}
-            </p>
+        <div className="panel-content perturbations-modern-container">
+          {/* Header Banner */}
+          <header className="page-header-modern">
+            <div className="header-info">
+              <div className="perturbations-hero-tags" style={{ marginBottom: '8px' }}>
+                <span className="perturbations-kicker-pill">
+                  <wcs-mat-icon icon="add_alert"></wcs-mat-icon>
+                  Déclaration d'incident
+                </span>
+                {scopedRegionId && (
+                  <span className="perturbations-region-badge">
+                    <wcs-mat-icon icon="place"></wcs-mat-icon>
+                    Région : {scopedRegionId}
+                  </span>
+                )}
+              </div>
+              <h1>Déclarer une perturbation sur les circulations</h1>
+              <p>Signalez un retard, une suppression d'arrêt ou une modification de parcours en temps réel.</p>
+            </div>
+
+            <div className="header-actions">
+              <wcs-button className="wcs-secondary" mode="stroked" onClick={handleCancel}>
+                <wcs-mat-icon icon="close" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                Annuler
+              </wcs-button>
+            </div>
           </header>
-          <div className="creation-container">
-            <div className="creation-main">
+
+          {/* Stepper */}
+          <div className="stepper-horizontal">
+            <div 
+              className={`step-item ${currentStep === 'horaire' ? 'active' : 'completed'}`}
+              onClick={() => setCurrentStep('horaire')}
+              style={{ cursor: 'pointer' }}
+            >
+              <div className="step-icon">
+                {currentStep === 'perturbation' ? <wcs-mat-icon icon="check" style={{ fontSize: '14px' }}></wcs-mat-icon> : '1'}
+              </div>
+              <span>1. Sélection des trains</span>
+            </div>
+            <div className="step-divider"></div>
+            <div 
+              className={`step-item ${currentStep === 'perturbation' ? 'active' : ''}`}
+              onClick={() => selectedHoraires.length > 0 && setCurrentStep('perturbation')}
+              style={{ cursor: selectedHoraires.length > 0 ? 'pointer' : 'not-allowed' }}
+            >
+              <div className="step-icon">2</div>
+              <span>2. Configuration de l'incident & Parcours</span>
+            </div>
+          </div>
+
+          <div className="creation-layout-modern">
+            <div className="creation-main-content">
               {currentStep === 'horaire' && renderStepHoraire()}
               {currentStep === 'perturbation' && renderStepPerturbation()}
             </div>
-            <div className="creation-preview">
+
+            <div className="sticky-sidebar">
               {selectedHoraires.length === 1 && (
                 <ParcoursPreview arrets={perturbationsArretsMap[selectedHoraires[0].id]} />
               )}
               {selectedHoraires.length > 1 && (
-                <div style={{ padding: '15px', color: '#666', fontStyle: 'italic', background: '#f9f9f9', borderRadius: '8px', border: '1px solid #ddd' }}>
-                  Aperçu du parcours non disponible lors de la sélection multiple. Veuillez vous référer aux accordéons détaillés.
+                <div className="summary-card">
+                  <h3>Sélection multiple ({selectedHoraires.length} trains)</h3>
+                  <p style={{ fontSize: '13px', color: '#64748b', margin: 0 }}>
+                    Configurez le motif commun et ajustez les arrêts de chaque train via les accordéons.
+                  </p>
                 </div>
               )}
             </div>
diff --git a/src/pages/perturbations/ModifierPerturbation.js b/src/pages/perturbations/ModifierPerturbation.js
index 6fa8ab3..07fa952 100644
--- a/src/pages/perturbations/ModifierPerturbation.js
+++ b/src/pages/perturbations/ModifierPerturbation.js
@@ -106,12 +106,16 @@ export default function ModifierPerturbation() {
 
         // Arrêts
         if (arretsData.length > 0) {
-          setPerturbationsArrets(arretsData.map(a => ({
+          const mapped = arretsData.map(a => ({
             ...a,
+            manual_retard: a.manual_retard ?? (Number(a.retard_ajoute || a.retard_minutes) > 0),
+            manual_reduction: a.manual_reduction ?? (Number(a.reduction_retard_minutes) > 0),
+            reduction_retard_minutes: Number(a.reduction_retard_minutes) || 0,
             types_perturbation: Array.isArray(a.types_perturbation)
               ? a.types_perturbation
               : (a.type_perturbation ? [a.type_perturbation] : [])
-          })));
+          }));
+          setPerturbationsArrets(recomputePropagation(mapped));
         } else {
           setPerturbationsArrets(buildArretFromHoraire(horaire));
         }
@@ -148,12 +152,23 @@ export default function ModifierPerturbation() {
       let types = [...(a.types_perturbation || [])];
       if (checked) {
         if (!types.includes(typeValue)) types.push(typeValue);
-        if (typeValue === 'retard') { a.manual_retard = true; a.retard_minutes = a.retard_minutes || 0; }
-        if (typeValue === 'arret_prolonge') { a.manual_arret_prolonge = true; a.arret_prolonge_minutes = a.arret_prolonge_minutes || 0; }
+        if (typeValue === 'retard') { 
+          a.manual_retard = true; 
+          a.retard_minutes = Number(a.retard_minutes) > 0 ? a.retard_minutes : 15; 
+        }
+        if (typeValue === 'reduction_retard') {
+          a.manual_reduction = true;
+          a.reduction_retard_minutes = Number(a.reduction_retard_minutes) > 0 ? a.reduction_retard_minutes : 5;
+        }
+        if (typeValue === 'arret_prolonge') { 
+          a.manual_arret_prolonge = true; 
+          a.arret_prolonge_minutes = Number(a.arret_prolonge_minutes) > 0 ? a.arret_prolonge_minutes : 5; 
+        }
         if (typeValue === 'modification_parcours') { a.is_nouveau_terminus = false; a.is_nouvelle_origine = false; }
       } else {
         types = types.filter(t => t !== typeValue);
         if (typeValue === 'retard') { a.manual_retard = false; a.retard_minutes = 0; }
+        if (typeValue === 'reduction_retard') { a.manual_reduction = false; a.reduction_retard_minutes = 0; }
         if (typeValue === 'arret_prolonge') { a.manual_arret_prolonge = false; a.arret_prolonge_minutes = 0; }
         if (typeValue === 'arret_supprime') { a.is_nouveau_terminus = false; a.is_nouvelle_origine = false; }
         if (typeValue === 'modification_parcours') { a.is_nouveau_terminus = false; a.is_nouvelle_origine = false; }
@@ -170,10 +185,24 @@ export default function ModifierPerturbation() {
       const next = [...prev];
       next[index] = { ...next[index], [field]: value };
       if (field === 'retard_minutes') {
-        next[index].manual_retard = true;
-        next[index].retard_minutes = Number(value) || 0;
+        const mins = Number(value) || 0;
+        next[index].retard_minutes = mins;
+        next[index].manual_retard = mins > 0;
         const types = [...(next[index].types_perturbation || [])];
-        if (!types.includes('retard')) types.push('retard');
+        if (mins > 0 && !types.includes('retard')) types.push('retard');
+        next[index].types_perturbation = types;
+        next[index].type_perturbation = getPrimaryType(types);
+      }
+      if (field === 'reduction_retard_minutes') {
+        const mins = Number(value) || 0;
+        next[index].reduction_retard_minutes = mins;
+        next[index].manual_reduction = mins > 0;
+        const types = [...(next[index].types_perturbation || [])];
+        if (mins > 0 && !types.includes('reduction_retard')) types.push('reduction_retard');
+        else if (mins === 0) {
+          const idx = types.indexOf('reduction_retard');
+          if (idx !== -1) types.splice(idx, 1);
+        }
         next[index].types_perturbation = types;
         next[index].type_perturbation = getPrimaryType(types);
       }
@@ -512,8 +541,10 @@ export default function ModifierPerturbation() {
                         Départ : {formatHeure(h.heure_depart)}
                       </span>
                     </div>
-                    <div>
-                      {h.gare_depart_nom} → {h.gare_arrivee_nom}
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                      <span>{h.gare_depart_nom}</span>
+                      <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '13px', margin: '0 4px', color: '#94a3b8' }}></wcs-mat-icon>
+                      <span>{h.gare_arrivee_nom}</span>
                     </div>
                     <div style={{ fontSize: '0.9rem', color: '#4b5563' }}>
                       Matériel actuel : {h.composition_train?.map(c => `${c.materiel_nom}`).join(', ') || 'Aucun'}
@@ -552,7 +583,7 @@ export default function ModifierPerturbation() {
             <select id="sillon" value={sillonSubstitutionId} onChange={e => setSillonSubstitutionId(e.target.value)} className="form-select">
               <option value="">Aucun</option>
               {horaires.filter(h => h.id !== selectedHoraire?.id).slice(0, 50).map(h => (
-                <option key={h.id} value={h.id}>{h.numero_train} - {h.gare_depart_nom} → {h.gare_arrivee_nom}</option>
+                <option key={h.id} value={h.id}>{h.numero_train} - {h.gare_depart_nom} vers {h.gare_arrivee_nom}</option>
               ))}
             </select>
           </div>
@@ -597,21 +628,22 @@ export default function ModifierPerturbation() {
 
   // ── États de chargement / erreur ──────────────────────────────────────────
   if (loading) return (
-    <div className="sncf-groupe">
+    <div className="sncf-groupe perturbations-page-root">
       <div className="panel-layout">
         <div className="panel-nav"><NavPanel /></div>
-        <div className="panel-content">
-          <div className="loading-state"><wcs-spinner mode="border" /><p>Chargement de la perturbation...</p></div>
+        <div className="panel-content perturbations-modern-container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '60vh' }}>
+          <wcs-spinner mode="border" style={{ width: '48px', height: '48px', color: '#0088ce' }}></wcs-spinner>
+          <p style={{ marginTop: '16px', color: '#64748b', fontWeight: 600 }}>Chargement de la perturbation...</p>
         </div>
       </div>
     </div>
   );
 
   if (error || !selectedHoraire) return (
-    <div className="sncf-groupe">
+    <div className="sncf-groupe perturbations-page-root">
       <div className="panel-layout">
         <div className="panel-nav"><NavPanel /></div>
-        <div className="panel-content">
+        <div className="panel-content perturbations-modern-container">
           <wcs-message mode="danger"><wcs-mat-icon icon="error" />{error || 'Perturbation introuvable'}</wcs-message>
           <wcs-button className="wcs-secondary" onClick={() => (window.location.href = '/perturbations')}>Retour à la liste</wcs-button>
         </div>
@@ -621,23 +653,67 @@ export default function ModifierPerturbation() {
 
   // ── Rendu principal ───────────────────────────────────────────────────────
   return (
-    <div className="sncf-groupe">
+    <div className="sncf-groupe perturbations-page-root">
       <div className="panel-layout">
         <div className="panel-nav"><NavPanel /></div>
-        <div className="panel-content">
-          <header className="page-header">
-            <h1>Modifier une perturbation</h1>
-            <p className="page-description">
-              Étape {currentStep === 'horaire' ? '1' : '2'} / 2 —{' '}
-              {currentStep === 'horaire' ? 'Horaire perturbé' : 'Configuration'}
-            </p>
+        <div className="panel-content perturbations-modern-container">
+          {/* Header Banner */}
+          <header className="page-header-modern">
+            <div className="header-info">
+              <div className="perturbations-hero-tags" style={{ marginBottom: '8px' }}>
+                <span className="perturbations-kicker-pill">
+                  <wcs-mat-icon icon="edit"></wcs-mat-icon>
+                  Modification d'incident
+                </span>
+                {selectedHoraire?.numero_train && (
+                  <span className="perturbations-region-badge">
+                    <wcs-mat-icon icon="train"></wcs-mat-icon>
+                    Train : <strong>{selectedHoraire.numero_train}</strong>
+                  </span>
+                )}
+              </div>
+              <h1>Modifier la perturbation</h1>
+              <p>Mettez à jour les retards, motifs, arrêts impactés et composition.</p>
+            </div>
+
+            <div className="header-actions">
+              <wcs-button className="wcs-secondary" mode="stroked" onClick={handleCancel}>
+                <wcs-mat-icon icon="close" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                Annuler
+              </wcs-button>
+            </div>
           </header>
-          <div className="creation-container">
-            <div className="creation-main">
+
+          {/* Stepper */}
+          <div className="stepper-horizontal">
+            <div 
+              className={`step-item ${currentStep === 'horaire' ? 'active' : 'completed'}`}
+              onClick={() => setCurrentStep('horaire')}
+              style={{ cursor: 'pointer' }}
+            >
+              <div className="step-icon">
+                {currentStep === 'perturbation' ? <wcs-mat-icon icon="check" style={{ fontSize: '14px' }}></wcs-mat-icon> : '1'}
+              </div>
+              <span>1. Train concerné</span>
+            </div>
+            <div className="step-divider"></div>
+            <div 
+              className={`step-item ${currentStep === 'perturbation' ? 'active' : ''}`}
+              onClick={() => setCurrentStep('perturbation')}
+              style={{ cursor: 'pointer' }}
+            >
+              <div className="step-icon">2</div>
+              <span>2. Configuration des arrêts & propagation</span>
+            </div>
+          </div>
+
+          <div className="creation-layout-modern">
+            <div className="creation-main-content">
               {currentStep === 'horaire' && renderStepHoraire()}
               {currentStep === 'perturbation' && renderStepPerturbation()}
             </div>
-            <div className="creation-preview">
+
+            <div className="sticky-sidebar">
               <ParcoursPreview arrets={perturbationsArrets} />
             </div>
           </div>
diff --git a/src/pages/perturbations/Perturbations.css b/src/pages/perturbations/Perturbations.css
index 6817ec9..4639709 100644
--- a/src/pages/perturbations/Perturbations.css
+++ b/src/pages/perturbations/Perturbations.css
@@ -1,1132 +1,1842 @@
-/* ============================================= */
-/* Styles de page principaux                   */
-/* ============================================= */
+/* ═══════════════════════════════════════════════════════════════════════════
+   PERTURBATIONS - STYLES MODERNES & DESIGN SYSTEM
+   ═══════════════════════════════════════════════════════════════════════════ */
 
-.page-header {
-  margin-bottom: 2rem;
+.perturbations-page-root {
+  min-height: 100vh;
+  background-color: #f4f7fb;
 }
 
-.page-header h1 {
-  margin: 0 0 0.5rem 0;
-  font-size: 2rem;
-  color: var(--wcs-gray-900, #1a1a1a);
+.perturbations-modern-container {
+  width: min(1420px, 100%);
+  margin: 0 auto;
+  padding: 24px 28px 60px;
+  box-sizing: border-box;
 }
 
-.page-description {
-  margin: 0;
-  color: var(--wcs-gray-600, #666);
-  font-size: 1rem;
-}
+/* ═══════════════════════════════════════════════════════════════════════════
+   1. HERO BANNER
+   ═══════════════════════════════════════════════════════════════════════════ */
 
-.actions-bar {
+.perturbations-hero-banner {
+  background: linear-gradient(135deg, #240b36 0%, #4a154b 50%, #c31432 100%);
+  border-radius: 20px;
+  color: #f8fbff;
+  padding: 32px 36px;
+  margin-bottom: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
+  gap: 24px;
+  box-shadow: 0 16px 36px -10px rgba(74, 21, 75, 0.35);
+  position: relative;
+  overflow: hidden;
+}
+
+.perturbations-hero-banner::after {
+  content: '';
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 260px;
+  height: 260px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.perturbations-hero-content {
+  max-width: 820px;
+  z-index: 1;
+}
+
+.perturbations-hero-tags {
+  display: flex;
   flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
 }
 
-.search-container {
-  flex: 1;
-  max-width: 400px;
-  min-width: 200px;
+.perturbations-kicker-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fdf2f8;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 5px 12px;
+  border-radius: 999px;
 }
 
-.loading-state {
+.perturbations-region-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: #fdf2f8;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 999px;
+}
+
+.perturbations-hero-title {
+  margin: 0;
+  font-size: 32px;
+  font-weight: 800;
+  color: #ffffff;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.perturbations-hero-subtitle {
+  margin: 10px 0 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: rgba(253, 242, 248, 0.9);
+}
+
+.perturbations-hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  z-index: 1;
+}
+
+.perturbations-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 12px 22px;
+  border-radius: 12px;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.35);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+}
+
+.perturbations-btn-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px rgba(225, 29, 72, 0.45);
+}
+
+.perturbations-btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.perturbations-btn-primary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.perturbations-btn-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #ffffff;
+  color: #334155;
+  border: 1px solid #cbd5e1;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 18px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.perturbations-btn-outline:hover {
+  background: #f8fafc;
+  border-color: #94a3b8;
+  color: #0f172a;
+}
+
+.perturbations-btn-danger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 18px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.perturbations-btn-danger:hover:not(:disabled) {
+  background: #ef4444;
+  color: #ffffff;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   2. KPI CARDS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.perturbations-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.perturbations-kpi-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+  position: relative;
+  outline: none;
+}
+
+.perturbations-kpi-card:hover {
+  transform: translateY(-2px);
+  border-color: #cbd5e1;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.perturbations-kpi-card.active {
+  border-color: #e11d48;
+  background: #fff5f7;
+  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.12);
+}
+
+.perturbations-kpi-card.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 14px;
+  bottom: 14px;
+  width: 4px;
+  background: #e11d48;
+  border-radius: 0 4px 4px 0;
+}
+
+.kpi-icon-wrapper.kpi-retard {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.kpi-icon-wrapper.kpi-suppr {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.kpi-icon-wrapper.kpi-modif {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.live-pulse-red {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 10px;
+  height: 10px;
+  background-color: #ef4444;
+  border-radius: 50%;
+  animation: pulse-ring-red 1.8s infinite;
+}
+
+@keyframes pulse-ring-red {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   3. CONTROLS & FILTERS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.perturbations-controls-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 1rem;
-  gap: 1rem;
+  gap: 14px;
 }
 
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 3rem 1rem;
-  text-align: center;
-  color: var(--wcs-gray-600, #666);
-}
-
-.empty-state wcs-mat-icon {
-  font-size: 4rem;
-  color: var(--wcs-gray-400, #999);
-  margin-bottom: 1rem;
-}
-
-.empty-state p {
-  margin: 0.5rem 0;
-  font-size: 1.1rem;
-}
-
-.empty-state .hint {
-  font-size: 0.9rem;
-  color: var(--wcs-gray-500, #888);
-}
-
-/* ============================================= */
-/* Accordéon des perturbations                 */
-/* ============================================= */
-
-.perturbations-accordion {
-  margin-top: 2rem;
-}
-
-.accordion-header-content {
+.perturbations-search-bar {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 12px;
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  border-radius: 12px;
+  padding: 0 16px;
+  height: 46px;
+  transition: all 0.2s ease;
+}
+
+.perturbations-search-bar:focus-within {
+  background: #ffffff;
+  border-color: #e11d48;
+  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
+}
+
+.perturbations-modern-input {
   width: 100%;
-  flex-wrap: wrap;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  color: #1e293b;
+  outline: none;
 }
 
-.horaire-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.horaire-route {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex: 1;
-  color: var(--wcs-gray-700);
-}
-
-.horaire-route .time {
-  font-family: monospace;
-  font-weight: bold;
-  color: var(--wcs-primary);
-}
-
-.perturbations-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1rem 0;
-}
-
-.perturbation-card {
-  border-left: 4px solid var(--wcs-gray-300);
-}
-
-.perturbation-card.retard {
-  border-left-color: var(--wcs-warning);
-}
-
-.perturbation-card.suppression {
-  border-left-color: var(--wcs-danger);
-}
-
-.perturbation-card.modification_parcours {
-  border-left-color: var(--wcs-info);
-}
-
-.perturbation-header {
+.perturbations-filters-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1rem;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 14px;
 }
 
-.perturbation-header > div:first-child {
+.perturbations-tab-group {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  background: #f1f5f9;
+  padding: 4px;
+  border-radius: 10px;
+  gap: 4px;
+  overflow-x: auto;
 }
 
-.retard-info {
-  font-weight: bold;
-  color: var(--wcs-warning);
+.perturbations-tab-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 7px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  white-space: nowrap;
 }
 
-.perturbation-actions {
+.perturbations-tab-btn:hover {
+  color: #1e293b;
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.perturbations-tab-btn.active {
+  background: #ffffff;
+  color: #0f172a;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+}
+
+.range-picker-inline {
   display: flex;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 8px;
 }
 
-.perturbation-details {
+.range-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+}
+
+.days-number-input {
+  width: 60px;
+  padding: 6px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  text-align: center;
+}
+
+.date-input-sm {
+  padding: 6px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #1e293b;
+}
+
+.range-arrow {
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.perturbations-results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 0 4px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   4. GROUPED TRAIN CARDS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.perturbations-cards-stack {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 18px;
 }
 
-.detail-row {
-  display: flex;
-  gap: 0.5rem;
+.train-group-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
+  transition: all 0.2s ease;
 }
 
-.detail-row strong {
-  min-width: 180px;
-  color: var(--wcs-gray-700);
+.train-group-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
 }
 
-.detail-row span {
-  flex: 1;
-}
-
-/* Page de création/modification */
-.creation-container {
-  display: flex;
-  gap: 2rem;
-  margin-top: 2rem;
-}
-
-.creation-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.creation-preview {
-  width: 400px;
-  position: sticky;
-  top: 2rem;
-  align-self: flex-start;
-}
-
-.step-container {
-  background: white;
-  border-radius: 8px;
-  padding: 2rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.step-header {
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 2px solid var(--wcs-gray-200);
-}
-
-.step-header h2 {
-  margin: 0 0 0.5rem 0;
-  color: var(--wcs-primary);
-}
-
-.step-header p {
-  margin: 0;
-  color: var(--wcs-gray-600);
-}
-
-.form-section {
-  margin-bottom: 2rem;
-}
-
-.form-section h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.1rem;
-  color: var(--wcs-gray-800);
-}
-
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--wcs-gray-700);
-}
-
-.form-group.required label::after {
-  content: ' *';
-  color: var(--wcs-danger);
-}
-
-.form-row {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.horaire-display {
-  background: var(--wcs-gray-50);
-  border-radius: 8px;
-  padding: 1.5rem;
-  margin-top: 1rem;
-}
-
-.horaire-display-header {
+.train-group-header {
+  padding: 16px 22px;
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--wcs-gray-200);
+  justify-content: space-between;
+  gap: 20px;
+  flex-wrap: wrap;
 }
 
-.horaire-display-header h4 {
-  margin: 0;
+.train-id-badge {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.train-type-pill {
+  background: #0f172a;
+  color: #ffffff;
+  font-size: 11px;
+  font-weight: 800;
+  padding: 4px 8px;
+  border-radius: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.train-num {
+  font-size: 18px;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.train-route-bar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
   flex: 1;
 }
 
-.horaire-display-content {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.horaire-display-row {
+.station-step {
   display: flex;
-  gap: 0.5rem;
+  align-items: center;
+  gap: 8px;
 }
 
-.horaire-display-row strong {
-  min-width: 120px;
-  color: var(--wcs-gray-700);
+.station-step .time-badge {
+  font-family: 'Roboto Mono', monospace;
+  font-weight: 700;
+  font-size: 14px;
+  background: #ffffff;
+  padding: 3px 8px;
+  border-radius: 6px;
+  border: 1px solid #cbd5e1;
+  color: #0f172a;
 }
 
+.station-step .station-label {
+  font-weight: 600;
+  color: #334155;
+  font-size: 14px;
+}
+
+.route-arrow-icon {
+  color: #94a3b8;
+  display: flex;
+  align-items: center;
+}
+
+.train-meta-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ligne-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 8px;
+}
+
+.incidents-count-pill {
+  background: #fee2e2;
+  color: #b91c1c;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: 999px;
+}
+
+/* Incidents Sublist */
+.incidents-sublist {
+  display: flex;
+  flex-direction: column;
+}
+
+.incident-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 22px;
+  border-left: 6px solid #cbd5e1;
+  border-bottom: 1px solid #f1f5f9;
+  gap: 16px;
+  transition: background 0.15s ease;
+}
+
+.incident-row:last-child {
+  border-bottom: none;
+}
+
+.incident-row:hover {
+  background: #fafbfc;
+}
+
+.incident-border-warning { border-left-color: #f59e0b; }
+.incident-border-danger { border-left-color: #ef4444; }
+.incident-border-info { border-left-color: #0284c7; }
+.incident-border-secondary { border-left-color: #64748b; }
+
+.incident-main-col {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+  flex-wrap: wrap;
+}
+
+.incident-type-tag {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 170px;
+}
+
+.type-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.retard-chip {
+  background: #fffbeb;
+  color: #b45309;
+  border: 1px solid #fde68a;
+  font-size: 12px;
+  font-weight: 800;
+  padding: 2px 8px;
+  border-radius: 6px;
+}
+
+.incident-cause-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 220px;
+}
+
+.cause-badge {
+  background: #f1f5f9;
+  color: #334155;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 6px;
+}
+
+.cause-details-text {
+  font-size: 13px;
+  color: #64748b;
+}
+
+.incident-dates-tag {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #64748b;
+  background: #f8fafc;
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid #e2e8f0;
+}
+
+.inactive-badge-tag {
+  font-size: 11px;
+  background: #f1f5f9;
+  color: #94a3b8;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.incident-actions-col {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.btn-incident-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   5. TABLE VIEW
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.perturbations-table-wrapper {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+}
+
+.perturbations-modern-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.perturbations-modern-table thead {
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.perturbations-modern-table th {
+  padding: 14px 16px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #64748b;
+  letter-spacing: 0.04em;
+}
+
+.perturbations-modern-table td {
+  padding: 14px 16px;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 13px;
+  color: #334155;
+  vertical-align: middle;
+}
+
+.perturbations-modern-table tbody tr:hover {
+  background-color: #f8fafc;
+}
+
+.table-type-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.table-train-cell {
+  display: flex;
+  flex-direction: column;
+}
+
+.table-route-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.route-arrow-sm {
+  color: #94a3b8;
+  font-size: 11px;
+}
+
+.table-cause-cell {
+  display: flex;
+  flex-direction: column;
+}
+
+.table-cause-sub {
+  font-size: 11px;
+  color: #64748b;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   6. DETAILS MODAL & STATES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.perturbations-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  animation: modalFadeIn 0.2s ease-out;
+}
+
+.perturbations-detail-modal {
+  background: #ffffff;
+  border-radius: 20px;
+  width: min(800px, 100%);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35);
+  overflow: hidden;
+  animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.modal-cause-detail-box {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.modal-notes-box {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.notes-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #64748b;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.train-id-pill {
+  background: #e2e8f0;
+  color: #0f172a;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+
+.badge-warning { background: #fef3c7; color: #b45309; }
+.badge-danger { background: #fee2e2; color: #b91c1c; }
+.badge-info { background: #e0f2fe; color: #0369a1; }
+.badge-secondary { background: #f1f5f9; color: #475569; }
+
+.perturbations-loading-box, .perturbations-empty-box, .perturbations-error-box {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  padding: 60px 24px;
+  text-align: center;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
+}
+
+.empty-icon-green {
+  width: 72px;
+  height: 72px;
+  background: #dcfce7;
+  color: #16a34a;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  margin-bottom: 16px;
+}
+
+.perturbations-empty-box h3, .perturbations-loading-box h3, .perturbations-error-box h3 {
+  margin: 0 0 8px;
+  color: #0f172a;
+  font-size: 20px;
+}
+
+.perturbations-empty-box p, .perturbations-loading-box p, .perturbations-error-box p {
+  margin: 0 auto 24px;
+  max-width: 480px;
+  color: #64748b;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   7. FORMULAIRES CREER & MODIFIER PERTURBATIONS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.page-header-modern {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  padding: 24px 28px;
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
+}
+
+.header-info h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.header-info p {
+  margin: 4px 0 0;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.stepper-horizontal {
+  display: flex;
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 12px 18px;
+  margin-bottom: 24px;
+  gap: 8px;
+  overflow-x: auto;
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
+}
+
+.step-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  border-radius: 10px;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.step-item.active {
+  background: #fff1f2;
+  color: #e11d48;
+}
+
+.step-item.completed {
+  color: #16a34a;
+}
+
+.step-item .step-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #f1f5f9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.step-item.active .step-icon {
+  background: #e11d48;
+  color: #ffffff;
+}
+
+.step-item.completed .step-icon {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.step-divider {
+  width: 24px;
+  height: 2px;
+  background: #e2e8f0;
+  flex-shrink: 0;
+}
+
+.creation-layout-modern {
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 24px;
+}
+
+@media (max-width: 1024px) {
+  .creation-layout-modern {
+    grid-template-columns: 1fr;
+  }
+}
+
+.creation-main-content {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
+}
+
+.sticky-sidebar {
+  position: sticky;
+  top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.summary-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
+}
+
+.summary-card h3 {
+  margin: 0 0 14px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.summary-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px dashed #e2e8f0;
+  font-size: 13px;
+}
+
+.summary-row .label {
+  color: #64748b;
+}
+
+.summary-row .value {
+  font-weight: 600;
+  color: #0f172a;
+}
+
+.input-control, .form-select, .form-textarea {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  font-size: 14px;
+  color: #1e293b;
+  box-sizing: border-box;
+}
+
+.input-control:focus, .form-select:focus, .form-textarea:focus {
+  outline: none;
+  border-color: #e11d48;
+  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   8. PARCOURS TIMELINE & APERÇU LATÉRAL
+   ═══════════════════════════════════════════════════════════════════════════ */
+
 .parcours-preview {
-  background: white;
-  border-radius: 8px;
-  padding: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 20px 22px;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
 }
 
 .parcours-preview h3 {
-  margin: 0 0 1.5rem 0;
-  font-size: 1.1rem;
-  color: var(--wcs-gray-800);
+  margin: 0 0 16px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #0f172a;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .parcours-line {
   position: relative;
-  padding-left: 2rem;
+  padding: 6px 0;
+  margin-left: 4px;
+}
+
+.parcours-line::before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  bottom: 14px;
+  left: 7px;
+  width: 3px;
+  background: #e2e8f0;
+  border-radius: 2px;
+  z-index: 1;
 }
 
 .parcours-stop {
   position: relative;
-  padding: 0.75rem 0;
+  padding-left: 28px;
+  padding-bottom: 18px;
+  display: flex;
+  flex-direction: column;
+}
+
+.parcours-stop:last-child {
+  padding-bottom: 0;
 }
 
 .parcours-stop::before {
   content: '';
   position: absolute;
-  left: -1.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 12px;
-  height: 12px;
+  left: 1px;
+  top: 3px;
+  width: 15px;
+  height: 15px;
   border-radius: 50%;
-  background: var(--wcs-primary);
-  border: 3px solid white;
-  box-shadow: 0 0 0 2px var(--wcs-primary);
-}
-
-.parcours-stop.supprimee::before {
-  background: var(--wcs-danger);
-  box-shadow: 0 0 0 2px var(--wcs-danger);
-}
-
-.parcours-stop.ajoutee::before {
-  background: var(--wcs-success);
-  box-shadow: 0 0 0 2px var(--wcs-success);
+  background: #ffffff;
+  border: 3px solid #0088ce;
+  box-shadow: 0 0 0 2px #ffffff;
+  z-index: 2;
+  transition: all 0.2s ease;
 }
 
 .parcours-stop.modifiee::before {
-  background: var(--wcs-warning);
-  box-shadow: 0 0 0 2px var(--wcs-warning);
+  border-color: #f59e0b;
+  background: #fffbeb;
 }
 
-.parcours-stop:not(:last-child)::after {
-  content: '';
-  position: absolute;
-  left: -1.125rem;
-  top: calc(50% + 6px);
-  width: 2px;
-  height: calc(100% - 6px);
-  background: var(--wcs-gray-300);
+.parcours-stop.supprimee::before {
+  border-color: #ef4444;
+  background: #fee2e2;
 }
 
 .parcours-stop-info {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  gap: 2px;
 }
 
 .parcours-stop-name {
-  font-weight: 500;
-  color: var(--wcs-gray-800);
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
 }
 
 .parcours-stop.supprimee .parcours-stop-name {
   text-decoration: line-through;
-  color: var(--wcs-danger);
+  color: #94a3b8;
 }
 
 .parcours-stop-times {
+  font-size: 11px;
+  color: #64748b;
+  font-family: 'Roboto Mono', monospace, sans-serif;
   display: flex;
-  gap: 0.5rem;
-  font-size: 0.9rem;
-  color: var(--wcs-gray-600);
-  font-family: monospace;
+  gap: 8px;
 }
 
 .parcours-stop-badge {
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
+  font-size: 11px !important;
 }
 
-.step-actions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 2rem;
-  padding-top: 2rem;
-  border-top: 2px solid var(--wcs-gray-200);
-}
-
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.radio-option {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border: 2px solid var(--wcs-gray-300);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.radio-option:hover {
-  border-color: var(--wcs-primary);
-  background: var(--wcs-gray-50);
-}
-
-.radio-option input[type="radio"]:checked + label {
-  font-weight: 600;
-  color: var(--wcs-primary);
-}
-
-/* ============================================= */
-/* Styles pour les accordéons d'arrêts          */
-/* ============================================= */
+/* ═══════════════════════════════════════════════════════════════════════════
+   9. ACCORDÉONS D'ARRÊTS & GESTION PARCOURS
+   ═══════════════════════════════════════════════════════════════════════════ */
 
 .parcours-accordion {
   display: flex;
   flex-direction: column;
+  gap: 10px;
 }
 
 .arret-accordion-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-left: 4px solid #cbd5e1;
+  border-radius: 12px;
+  overflow: hidden;
   transition: all 0.2s ease;
-}
-
-.arret-accordion-card:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
 }
 
 .arret-accordion-card.has-perturbation {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
 }
 
 .arret-accordion-card.supprime {
-  opacity: 0.85;
+  background: #fef5f5;
 }
 
-.arret-accordion-card .accordion-header:hover {
-  background: #f5f5f5;
-}
-
-/* Badge de retard cumulé */
-.retard-cumule-badge {
-  font-size: 0.75rem;
-  color: #e67e22;
-  font-weight: 500;
-}
-
-/* Styles pour les boutons de modification parcours */
-.modification-parcours-buttons {
+.arret-accordion-header {
+  padding: 14px 18px;
+  cursor: pointer;
   display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  background: #ffffff;
+  transition: background 0.15s ease;
 }
 
-.modification-parcours-buttons wcs-button {
-  flex: 1;
-  min-width: 200px;
+.arret-accordion-header:hover {
+  background: #f8fafc;
 }
 
-/* ============================================= */
-/* Styles formulaires (créer / modifier)       */
-/* ============================================= */
+/* ═══════════════════════════════════════════════════════════════════════════
+   10. RECHERCHE D'HORAIRES & RÉSULTATS
+   ═══════════════════════════════════════════════════════════════════════════ */
 
-.section-hint {
-  color: #666;
-  font-size: 0.9rem;
-  margin: -0.5rem 0 1rem 0;
+.step-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.form-select {
-  width: 100%;
-  max-width: 420px;
-  padding: 0.7rem 1rem;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background: white;
+.step-header h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  color: #0f172a;
 }
 
-.form-textarea {
-  width: 100%;
-  padding: 0.7rem 1rem;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  resize: vertical;
+.step-header p {
+  margin: 4px 0 0;
+  font-size: 13px;
+  color: #64748b;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #334155;
+  margin-bottom: 6px;
+}
+
+.form-group.required label::after {
+  content: ' *';
+  color: #ef4444;
 }
 
 .checkbox-label {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 8px;
   cursor: pointer;
-  font-weight: 500;
+  font-size: 14px;
+  font-weight: 600;
+  color: #334155;
 }
 
-.checkbox-label input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
+.form-section {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #e2e8f0;
 }
 
-.step-actions-right {
-  display: flex;
-  gap: 0.5rem;
+.form-section:last-of-type {
+  border-bottom: none;
 }
 
-/* ── Recherche horaire ── */
+.form-section h3 {
+  margin: 0 0 6px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+}
 
-.loading-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 0;
-  color: #666;
+.section-hint {
+  font-size: 13px;
+  color: #64748b;
+  margin: 0 0 16px;
 }
 
 .search-form {
   display: flex;
-  gap: 0.5rem;
+  gap: 10px;
   align-items: center;
+  margin-top: 8px;
 }
 
 .search-input {
   flex: 1;
-  padding: 0.7rem 1rem;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  min-width: 0;
+  padding: 10px 14px;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  font-size: 14px;
+  color: #1e293b;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.search-input:focus {
+  border-color: #e11d48;
+  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
 }
 
 .results-count {
-  margin-top: 0.4rem;
-  padding: 0.4rem 0.75rem;
-  background: #f5f5f5;
-  border-radius: 4px;
-  color: #666;
-  font-size: 0.88rem;
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 600;
+  margin-top: 8px;
 }
 
 .horaire-results {
   max-height: 380px;
   overflow-y: auto;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  margin-top: 0.5rem;
-  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  margin-top: 14px;
+  background: #ffffff;
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
 }
 
 .horaire-result-item {
-  padding: 0.75rem 1rem;
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f1f5f9;
   cursor: pointer;
-  border-bottom: 1px solid #eee;
-  transition: background 0.15s;
-}
-
-.horaire-result-item:hover {
-  background: #f8f9fa;
-}
-
-.horaire-result-item.selected {
-  background: #f0f7ff;
+  transition: all 0.15s ease;
 }
 
 .horaire-result-item:last-child {
   border-bottom: none;
 }
 
+.horaire-result-item:hover {
+  background: #f8fafc;
+}
+
+.horaire-result-item.selected {
+  background: #fff1f2;
+  border-left: 4px solid #e11d48;
+}
+
 .horaire-result-header {
   display: flex;
-  gap: 0.5rem;
   align-items: center;
-  margin-bottom: 0.3rem;
+  gap: 10px;
+  margin-bottom: 4px;
+  font-size: 14px;
+}
+
+.horaire-result-header strong {
+  color: #0f172a;
+  font-size: 15px;
 }
 
 .horaire-result-route {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  font-size: 0.9rem;
-  color: #555;
+  gap: 8px;
+  font-size: 13px;
+  color: #475569;
 }
 
 .time-chip {
-  font-family: monospace;
-  font-weight: 600;
-  background: #f0f0f0;
-  padding: 0.1rem 0.4rem;
-  border-radius: 3px;
-  font-size: 0.85rem;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  padding: 2px 7px;
+  border-radius: 6px;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 12px;
+  font-weight: 700;
+  color: #0f172a;
 }
 
 .no-results {
-  padding: 1rem;
-  color: #999;
+  padding: 32px;
   text-align: center;
+  color: #94a3b8;
+  font-size: 14px;
 }
 
-/* ── Éditeur jours de perturbation ── */
+.horaire-display {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.horaire-display-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.horaire-display-header h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.step-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 32px;
+  padding-top: 20px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.step-actions-right {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   11. ÉDITEUR DE JOURS DE PERTURBATION
+   ═══════════════════════════════════════════════════════════════════════════ */
 
 .jours-perturbation-editor {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 12px;
+  margin-top: 10px;
 }
 
 .jour-row {
   display: flex;
-  gap: 0.75rem;
-  align-items: flex-end;
+  align-items: center;
+  gap: 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 12px 16px;
   flex-wrap: wrap;
-  padding: 0.75rem 1rem;
-  background: #f8f9fa;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
 }
 
 .jour-type-selector {
   display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  min-width: 200px;
+  gap: 4px;
+  background: #e2e8f0;
+  padding: 3px;
+  border-radius: 8px;
 }
 
 .jour-type-option {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 0.35rem;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 6px;
   cursor: pointer;
-  font-size: 0.9rem;
-  padding: 0.3rem 0.6rem;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  background: white;
-  transition: all 0.15s;
+  color: #64748b;
+  transition: all 0.15s ease;
 }
 
 .jour-type-option.active {
-  border-color: var(--wcs-primary, #0088ce);
-  background: #e8f4fd;
-  font-weight: 600;
-  color: var(--wcs-primary, #0088ce);
+  background: #ffffff;
+  color: #0f172a;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
 }
 
-.jour-type-option input[type="radio"] {
+.jour-type-option input {
   display: none;
 }
 
 .jour-field {
   display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
+  align-items: center;
+  gap: 8px;
 }
 
 .jour-field label {
-  font-size: 0.78rem;
-  color: #666;
-  font-weight: 500;
-}
-
-.date-input {
-  padding: 0.55rem 0.75rem;
-  font-size: 0.95rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background: white;
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
 }
 
 .periode-fields {
   display: flex;
-  gap: 0.6rem;
+  align-items: center;
+  gap: 12px;
   flex-wrap: wrap;
 }
 
+.date-input {
+  padding: 6px 10px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #1e293b;
+  background: #ffffff;
+}
+
+.date-input:focus {
+  border-color: #e11d48;
+  outline: none;
+}
+
 .jour-remove-btn {
-  align-self: flex-end;
-  background: none;
+  background: #fee2e2;
+  color: #b91c1c;
   border: none;
-  cursor: pointer;
-  color: #e74c3c;
-  padding: 0.3rem;
-  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
-  transition: background 0.15s;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  margin-left: auto;
 }
 
 .jour-remove-btn:hover {
-  background: #fef5f5;
+  background: #ef4444;
+  color: #ffffff;
 }
 
-/* ============================================= */
-/* Modern Design for Perturbations Page        */
-/* ============================================= */
+/* ═══════════════════════════════════════════════════════════════════════════
+   12. MODAL DÉTAILS
+   ═══════════════════════════════════════════════════════════════════════════ */
 
-:root {
-  --primary: #0074d9;
-  --success: #16a34a;
-  --warning: #f39c12;
-  --danger: #e74c3c;
-  --muted: #666;
-  --card-bg: #fff;
-  --panel-bg: #fafafa;
-}
-
-.page-header {
+.modal-top-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 2.5rem;
-  gap: 2rem;
-}
-
-.header-main h1 {
-  margin: 0 0 0.5rem 0;
-  font-size: 2.25rem;
-  font-weight: 700;
-  color: var(--wcs-gray-900, #1a1a1a);
-  letter-spacing: -0.02em;
-}
-
-.page-description {
-  margin: 0;
-  color: var(--wcs-gray-600, #666);
-  font-size: 1.1rem;
-  max-width: 600px;
-}
-
-/* Toolbar */
-.toolbar-container {
-  display: flex;
-  background: white;
-  padding: 1.25rem;
-  border-radius: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-  margin-bottom: 2rem;
-  border: 1px solid var(--wcs-gray-200);
-}
-
-.search-wrapper {
-  flex: 1;
-  max-width: 500px;
-}
-
-/* Loading & Empty States */
-.loading-state-full {
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  padding: 5rem 1rem;
-  background: white;
-  border-radius: 12px;
-  gap: 1.5rem;
+  padding: 20px 24px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
 }
 
-.loading-state-full p {
-  color: var(--wcs-gray-600);
-  font-weight: 500;
-}
-
-.empty-state-modern {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 5rem 1rem;
-  background: white;
-  border-radius: 16px;
-  text-align: center;
-  border: 2px dashed var(--wcs-gray-300);
-}
-
-.empty-state-icon {
-  width: 80px;
-  height: 80px;
-  background: #f0fdf4;
-  color: #16a34a;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1.5rem;
-}
-
-.empty-state-modern h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.5rem;
-  color: var(--wcs-gray-900);
-}
-
-.empty-state-modern p {
-  color: var(--wcs-gray-600);
-  max-width: 400px;
-  margin-bottom: 1.5rem;
-}
-
-/* Modern Grid & Cards */
-.perturbations-grid-modern {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.horaire-group-card {
-  background: white;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
-  border: 1px solid var(--wcs-gray-200);
-  transition: transform 0.2s ease;
-}
-
-.horaire-header {
-  display: flex;
-  align-items: center;
-  padding: 1.25rem 1.5rem;
-  background: #f8f9fa;
-  border-bottom: 1px solid var(--wcs-gray-200);
-  gap: 2rem;
-  flex-wrap: wrap;
-}
-
-.horaire-badge-numero {
-  display: flex;
-  flex-direction: column;
-  min-width: 100px;
-}
-
-.train-type-mini {
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  font-weight: 700;
-  color: var(--wcs-primary);
-  letter-spacing: 0.05em;
-}
-
-.train-number-bold {
-  font-size: 1.25rem;
+.modal-header-info h2 {
+  margin: 4px 0 0;
+  font-size: 18px;
   font-weight: 800;
-  color: var(--wcs-gray-900);
+  color: #0f172a;
 }
 
-.horaire-route-main {
+.modal-badges-row {
   display: flex;
   align-items: center;
-  gap: 1.5rem;
-  flex: 1;
+  gap: 8px;
 }
 
-.route-stop {
-  display: flex;
-  flex-direction: column;
-}
-
-.route-time {
-  font-family: 'Roboto Mono', monospace;
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: var(--wcs-gray-900);
-}
-
-.route-city {
-  font-size: 0.95rem;
-  color: var(--wcs-gray-600);
-  font-weight: 500;
-}
-
-.route-arrow {
-  color: var(--wcs-gray-400);
-}
-
-.horaire-meta {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.ligne-tag {
-  background: var(--wcs-gray-100);
-  padding: 0.25rem 0.75rem;
-  border-radius: 20px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--wcs-gray-700);
-}
-
-.count-badge {
-  font-weight: 700 !important;
-}
-
-/* Sublist of perturbations */
-.perturbations-sublist {
-  display: flex;
-  flex-direction: column;
-}
-
-.perturbation-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.25rem 1.5rem;
-  border-left: 6px solid #ddd;
-  transition: background 0.2s ease;
-}
-
-.perturbation-item:not(:last-child) {
-  border-bottom: 1px solid var(--wcs-gray-100);
-}
-
-.perturbation-item:hover {
-  background: #fafafa;
-}
-
-.perturbation-item.border-warning { border-left-color: #f39c12; }
-.perturbation-item.border-danger { border-left-color: #e74c3c; }
-.perturbation-item.border-info { border-left-color: #3498db; }
-
-.item-main-info {
-  display: flex;
-  align-items: center;
-  gap: 2rem;
-  flex: 1;
-  flex-wrap: wrap;
-}
-
-.item-type-tag {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  min-width: 180px;
-}
-
-.type-label {
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.retard-amount {
-  background: #fff8e6;
-  color: #f39c12;
-  padding: 0.1rem 0.5rem;
-  border-radius: 4px;
-  font-weight: 800;
-}
-
-.item-cause {
-  flex: 1;
-  min-width: 250px;
-  font-size: 1rem;
-}
-
-.cause-details {
-  color: var(--wcs-gray-600);
-  font-weight: 400;
-}
-
-.item-time {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--wcs-gray-600);
-  font-size: 0.9rem;
-  background: var(--wcs-gray-50);
-  padding: 0.4rem 0.75rem;
-  border-radius: 6px;
-}
-
-.inactive-badge {
-  opacity: 0.7;
-}
-
-.item-actions {
-  display: flex;
-  gap: 0.5rem;
-  margin-left: 1.5rem;
-}
-
-/* Utilities for colors */
-.text-warning { color: #f39c12; }
-.text-danger { color: #e74c3c; }
-.text-info { color: #3498db; }
-
-/* Responsive adjustments */
-@media (max-width: 1024px) {
-  .horaire-header {
-    gap: 1rem;
-  }
-  .item-main-info {
-    gap: 1rem;
-  }
-}
-
-/* Page de création/modification moderne */
-.page-header-modern {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 3rem;
-  background: white;
-  padding: 1.5rem 2rem;
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-}
-
-.header-info h1 {
-  margin: 0;
-  font-size: 1.75rem;
-  color: var(--wcs-primary);
-}
-
-.header-info p {
-  margin: 0.25rem 0 0 0;
-  color: var(--wcs-gray-600);
-}
-
-.stepper-horizontal {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: 0.5rem;
-}
-
-.step-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 999px;
+.modal-close-btn {
   background: transparent;
-  border: 1px solid transparent;
-  color: var(--muted);
+  border: none;
+  font-size: 18px;
+  color: #64748b;
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
 }
 
-.step-item.active { background: rgba(0,116,217,0.08); color: var(--primary); border-color: rgba(0,116,217,0.12); }
-.step-item.completed { background: rgba(22,163,74,0.08); color: var(--success); border-color: rgba(22,163,74,0.12); }
-
-.step-icon {
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  width:36px;
-  height:36px;
-  border-radius:50%;
-  background: rgba(0,0,0,0.04);
+.modal-close-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
 }
 
-.step-label {
-  font-weight:600;
-  font-size:0.95rem;
+.modal-body-content {
+  padding: 24px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
-.step-divider {
-  width:1px;
-  height:28px;
-  background:#e9eef6;
-}
-
-.creation-layout-modern {
+.modal-summary-cards {
   display: grid;
-  grid-template-columns: 1fr 320px;
-  gap: 1.25rem;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
 }
 
-@media (max-width: 980px) {
-  .creation-layout-modern { grid-template-columns: 1fr; }
+.modal-card-stat {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.creation-main-content {
-  background: var(--card-bg);
-  border-radius: 10px;
-  padding: 1.25rem;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+.stat-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #64748b;
+  margin-bottom: 2px;
 }
 
-.creation-sidebar .sticky-sidebar { position: sticky; top: 16px; }
-
-/* Parcours preview */
-.parcours-preview { margin-bottom: 1rem; }
-.parcours-line { display:flex; flex-direction:column; gap:0.5rem; }
-.parcours-stop { display:flex; justify-content:space-between; align-items:center; padding:0.6rem; border-radius:8px; border:1px solid #f0f4f8; background:var(--card-bg); }
-.parcours-stop.modifiee { background:#fffaf0; }
-.parcours-stop.supprimee { background:#fff5f5; text-decoration:line-through; color:#8a8a8a; }
-.parcours-stop-info { display:flex; gap:0.75rem; align-items:center; }
-.parcours-stop-name { font-weight:600; }
-.parcours-stop-times { color:var(--muted); font-size:0.9rem; }
-.parcours-stop-badge { margin-left:6px; }
-
-/* Arret accordion card */
-.arret-accordion-card { border-radius:8px; overflow:hidden; transition: box-shadow 0.15s; }
-.arret-accordion-card .accordion-header { display:flex; justify-content:space-between; padding:1rem; cursor:pointer; align-items:center; }
-.arret-accordion-card .accordion-content { padding:1rem; background:var(--panel-bg); border-top:1px solid #eef2f6; }
-
-/* Badges / pills */
-.type-pill { display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 0.8rem; border-radius:999px; font-weight:600; font-size:0.9rem; border:2px solid transparent; }
-.type-pill.retard { color:var(--warning); background:rgba(243,156,18,0.06); border-color:rgba(243,156,18,0.12); }
-.type-pill.supprime { color:var(--danger); background:rgba(231,76,60,0.04); border-color:rgba(231,76,60,0.12); }
-.type-pill.prolonge { color:var(--primary); background:rgba(52,152,219,0.06); border-color:rgba(52,152,219,0.12); }
-.type-pill.modif { color:#6a3fa8; background:rgba(155,89,182,0.06); border-color:rgba(155,89,182,0.12); }
-
-/* Form groups */
-.form-group { margin-bottom:1rem; }
-.form-group label { display:block; font-weight:600; margin-bottom:0.5rem; color:#333; }
-.input-control { width:100%; padding:0.75rem 1rem; border-radius:8px; border:1px solid #e3e8ef; font-size:1rem; }
-.input-control:focus { outline:none; box-shadow:0 0 0 4px rgba(0,116,217,0.06); border-color:var(--primary); }
-.textarea-control { min-height:100px; }
-
-/* Form actions */
-.step-actions { display:flex; justify-content:space-between; gap:0.5rem; margin-top:1.25rem; }
-.actions-right { display:flex; gap:0.5rem; }
-
-/* Summary card */
-.summary-card { background:#fff; border:1px solid #eef2f6; border-radius:8px; padding:1rem; margin-top:1rem; }
-.summary-card h3 { margin-top:0; }
-.summary-row { display:flex; justify-content:space-between; padding:0.35rem 0; border-bottom:1px dashed #f0f4f8; }
-.summary-row .label { color:var(--muted); }
-.summary-row .value { font-weight:600; }
-
-/* Buttons fallback style (light) */
-.btn-ghost { background:transparent; border:1px solid #e6eefc; padding:0.5rem 0.9rem; border-radius:6px; cursor:pointer; }
-.btn-primary { background:var(--primary); color:white; padding:0.6rem 0.9rem; border-radius:6px; border:none; cursor:pointer; }
-.btn-secondary { background:#fff; border:1px solid #dbe9ff; padding:0.6rem 0.9rem; border-radius:6px; cursor:pointer; }
-
-/* Small utilities */
-.small-muted { color:var(--muted); font-size:0.9rem; }
-.flex-row { display:flex; gap:0.75rem; align-items:center; }
-
-/* Fine tune responsiveness */
-@media (max-width:600px) {
-  .stepper-horizontal { overflow:auto; }
-  .stepper-horizontal .step-item { flex:0 0 auto; }
+.modal-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 10px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
 }
+
+.modal-footer-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+  .perturbations-modern-container {
+    padding: 20px 18px 48px;
+  }
+  .perturbations-kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .perturbations-hero-banner {
+    padding: 26px 28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .perturbations-modern-container {
+    padding: 16px 12px 40px;
+  }
+  .perturbations-hero-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px 18px;
+    gap: 16px;
+  }
+  .perturbations-hero-actions {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+  .perturbations-btn-primary {
+    width: 100%;
+    justify-content: center;
+  }
+  .perturbations-kpi-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .perturbations-controls-card {
+    padding: 14px;
+  }
+  .perturbations-filters-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .perturbations-filter-group {
+    width: 100%;
+  }
+  .train-group-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .incident-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .incident-actions-col {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  .modal-summary-cards {
+    grid-template-columns: 1fr;
+  }
+  .form-columns-2 {
+    grid-template-columns: 1fr;
+  }
+  .form-sticky-bottom-bar {
+    flex-direction: column;
+    gap: 14px;
+    align-items: stretch;
+    padding: 14px 16px;
+  }
+  .bottom-bar-btns {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+  .bottom-bar-btns > * {
+    flex: 1;
+    justify-content: center;
+  }
+  .perturbations-stepper-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .perturbations-hero-title {
+    font-size: 24px;
+  }
+  .perturbations-hero-subtitle {
+    font-size: 13px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   10. DARK MODE SUPPORT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+body.dark-mode .perturbations-page-root,
+[data-theme="dark"] .perturbations-page-root {
+  background-color: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .perturbations-hero-banner,
+[data-theme="dark"] .perturbations-hero-banner {
+  background: linear-gradient(135deg, #180620 0%, #300c31 50%, #880d22 100%);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
+}
+
+body.dark-mode .perturbations-kpi-card,
+[data-theme="dark"] .perturbations-kpi-card {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .perturbations-kpi-card:hover,
+[data-theme="dark"] .perturbations-kpi-card:hover {
+  border-color: #f43f5e;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .perturbations-kpi-card.active,
+[data-theme="dark"] .perturbations-kpi-card.active {
+  background: #2a0e19;
+  border-color: #e11d48;
+  box-shadow: 0 8px 24px rgba(225, 29, 72, 0.25);
+}
+
+body.dark-mode .perturbations-kpi-card .kpi-label,
+[data-theme="dark"] .perturbations-kpi-card .kpi-label {
+  color: #94a3b8;
+}
+
+body.dark-mode .perturbations-kpi-card .kpi-value,
+[data-theme="dark"] .perturbations-kpi-card .kpi-value {
+  color: #f8fafc;
+}
+
+body.dark-mode .perturbations-kpi-card .kpi-subtext,
+[data-theme="dark"] .perturbations-kpi-card .kpi-subtext {
+  color: #64748b;
+}
+
+body.dark-mode .kpi-icon-wrapper.kpi-retard,
+[data-theme="dark"] .kpi-icon-wrapper.kpi-retard {
+  background: rgba(217, 119, 6, 0.2);
+  color: #fbbf24;
+}
+
+body.dark-mode .kpi-icon-wrapper.kpi-suppr,
+[data-theme="dark"] .kpi-icon-wrapper.kpi-suppr {
+  background: rgba(225, 29, 72, 0.2);
+  color: #fb7185;
+}
+
+body.dark-mode .kpi-icon-wrapper.kpi-modif,
+[data-theme="dark"] .kpi-icon-wrapper.kpi-modif {
+  background: rgba(2, 132, 199, 0.2);
+  color: #38bdf8;
+}
+
+body.dark-mode .perturbations-controls-card,
+body.dark-mode .train-group-card,
+body.dark-mode .perturbation-detail-card,
+body.dark-mode .modal-content,
+[data-theme="dark"] .perturbations-controls-card,
+[data-theme="dark"] .train-group-card,
+[data-theme="dark"] .perturbation-detail-card,
+[data-theme="dark"] .modal-content {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+}
+
+body.dark-mode .train-group-header,
+[data-theme="dark"] .train-group-header {
+  background: #111a28;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .incident-row,
+[data-theme="dark"] .incident-row {
+  border-bottom-color: #1e293b;
+}
+
+body.dark-mode .incident-row:hover,
+[data-theme="dark"] .incident-row:hover {
+  background-color: #1a273c;
+}
+
+body.dark-mode .parcours-step-card,
+[data-theme="dark"] .parcours-step-card {
+  background: #101826;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .parcours-step-card.retard,
+[data-theme="dark"] .parcours-step-card.retard {
+  background: #251206;
+  border-color: #92400e;
+}
+
+body.dark-mode .parcours-step-card.on-time,
+[data-theme="dark"] .parcours-step-card.on-time {
+  background: #082136;
+  border-color: #0284c7;
+}
+
+body.dark-mode .parcours-step-card.supprime,
+[data-theme="dark"] .parcours-step-card.supprime {
+  background: #28080f;
+  border-color: #9f1239;
+}
+
+body.dark-mode .perturbations-input,
+body.dark-mode .perturbations-select,
+body.dark-mode .perturbations-textarea,
+body.dark-mode .perturbations-search-bar input,
+[data-theme="dark"] .perturbations-input,
+[data-theme="dark"] .perturbations-select,
+[data-theme="dark"] .perturbations-textarea,
+[data-theme="dark"] .perturbations-search-bar input {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .perturbations-input:focus,
+body.dark-mode .perturbations-select:focus,
+body.dark-mode .perturbations-textarea:focus,
+[data-theme="dark"] .perturbations-input:focus,
+[data-theme="dark"] .perturbations-select:focus,
+[data-theme="dark"] .perturbations-textarea:focus {
+  border-color: #e11d48;
+  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25);
+}
+
+body.dark-mode .perturbations-btn-outline,
+[data-theme="dark"] .perturbations-btn-outline {
+  background: #151f30;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+body.dark-mode .perturbations-btn-outline:hover,
+[data-theme="dark"] .perturbations-btn-outline:hover {
+  background: #1e293b;
+  border-color: #64748b;
+  color: #ffffff;
+}
+
+body.dark-mode .perturbations-empty-state,
+[data-theme="dark"] .perturbations-empty-state {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .perturbations-empty-text,
+[data-theme="dark"] .perturbations-empty-text {
+  color: #94a3b8;
+}
+
+body.dark-mode .modal-header,
+[data-theme="dark"] .modal-header {
+  background: #0e1726;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .modal-footer-bar,
+[data-theme="dark"] .modal-footer-bar {
+  background: #0e1726;
+  border-top-color: #243247;
+}
+
diff --git a/src/pages/perturbations/Perturbations.js b/src/pages/perturbations/Perturbations.js
index eef09d9..6f4e809 100644
--- a/src/pages/perturbations/Perturbations.js
+++ b/src/pages/perturbations/Perturbations.js
@@ -1,13 +1,11 @@
-/* eslint-disable no-unused-vars */
-import React, { useState, useEffect, useCallback } from 'react';
-// Pas de router dans ce fichier : utiliser window.location.href pour la navigation (cohérent avec le projet)
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import NavPanel from '../../components/nav-panel/NavPanel';
 import {
   getPerturbationsGroupedByHoraire,
   deletePerturbation
 } from '../../api/perturbations';
 import { formatHeure } from '../../api/horaires';
-import { canPerform, getCurrentUser, isRegionFiltered, getUserRegionId } from '../../utils/userUtils';
+import { canPerform, getCurrentUser, getScopedRegionId } from '../../utils/userUtils';
 import './Perturbations.css';
 
 export default function Perturbations() {
@@ -20,23 +18,35 @@ export default function Perturbations() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
+  const [scopedRegionId, setScopedRegionId] = useState(null);
 
   // Filtrage par date : mode et dates (par défaut aujourd'hui)
-  const [filterMode, setFilterMode] = useState('today'); // 'today' | 'past' | 'future' | 'range'
-  const todayStr = (() => { const d = new Date(); d.setHours(0,0,0,0); return d.toISOString().slice(0,10); })();
-  const [startDate, setStartDate] = useState(todayStr); // YYYY-MM-DD
+  const [filterMode, setFilterMode] = useState('today'); // 'today' | 'past' | 'future' | 'range' | 'all'
+  const todayStr = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d.toISOString().slice(0, 10);
+  }, []);
+
+  const [startDate, setStartDate] = useState(todayStr);
   const [endDate, setEndDate] = useState(todayStr);
-  const [futureDays, setFutureDays] = useState(7); // window for 'future' mode
+  const [futureDays, setFutureDays] = useState(7);
+
+  // Filtre par type d'incident
+  const [typeFilter, setTypeFilter] = useState('all'); // 'all' | 'retard' | 'suppression' | 'modification_parcours'
+  const [viewMode, setViewMode] = useState('grouped'); // 'grouped' | 'table'
+  const [selectedPerturbationDetail, setSelectedPerturbationDetail] = useState(null);
 
   // Helpers pour normaliser les dates (midnight local)
   const toMidnight = (d) => {
     if (!d) return null;
     const x = new Date(d);
-    x.setHours(0,0,0,0);
+    x.setHours(0, 0, 0, 0);
     return x;
   };
 
-  const getRangeFromMode = () => {
+  const getRangeFromMode = useCallback(() => {
+    if (filterMode === 'all') return { start: null, end: null };
     const today = toMidnight(new Date());
     if (filterMode === 'today') return { start: today, end: today };
     if (filterMode === 'past') {
@@ -51,49 +61,25 @@ export default function Perturbations() {
     }
     // range
     return { start: startDate ? toMidnight(startDate) : null, end: endDate ? toMidnight(endDate) : null };
-  };
+  }, [filterMode, futureDays, startDate, endDate]);
 
-  const perturbationIntersectsRange = (p, start, end) => {
+  const perturbationIntersectsRange = useCallback((p, start, end) => {
     if (!p || !p.date_debut) return false;
     const pStart = toMidnight(new Date(p.date_debut));
     const pEnd = p.date_fin ? toMidnight(new Date(p.date_fin)) : pStart;
     if (start && pEnd < start) return false;
     if (end && pStart > end) return false;
     return true;
-  };
-
-  // Liste filtrée de groupes prête pour l'affichage (tableau [horaireId, group])
-  const { start: _start, end: _end } = getRangeFromMode();
-  const filteredGroups = Object.entries(perturbationsGrouped || {})
-      .map(([id, group]) => {
-        const filteredPerturbations = (group.perturbations || []).filter(p => perturbationIntersectsRange(p, _start, _end));
-        return [id, { ...group, perturbations: filteredPerturbations }];
-      })
-      .filter(([_, group]) => (group.perturbations || []).length > 0)
-      .filter(([_, group]) => {
-        if (!searchQuery || !searchQuery.trim()) return true;
-        const q = searchQuery.toLowerCase();
-        const h = group.horaire || {};
-        const inHoraire = (h.numero_train || '').toString().toLowerCase().includes(q)
-            || (h.gare_depart_nom || '').toLowerCase().includes(q)
-            || (h.gare_arrivee_nom || '').toLowerCase().includes(q)
-            || (h.ligne_nom || '').toLowerCase().includes(q);
-        const inPert = (group.perturbations || []).some(p => (
-            (p.cause || '').toString().toLowerCase().includes(q) ||
-            (p.cause_details || '').toString().toLowerCase().includes(q) ||
-            (p.type_perturbation || '').toString().toLowerCase().includes(q)
-        ));
-        return inHoraire || inPert;
-      });
+  }, []);
 
   // Charger les perturbations
   const loadPerturbations = useCallback(async () => {
     setLoading(true);
     setError('');
     try {
-      // Filtrage RBAC par région
       const user = getCurrentUser();
-      const regionId = isRegionFiltered(user) ? getUserRegionId(user) : null;
+      const regionId = getScopedRegionId(user);
+      setScopedRegionId(regionId || null);
 
       const { data, error: err } = await getPerturbationsGroupedByHoraire(regionId);
       if (err) {
@@ -114,73 +100,137 @@ export default function Perturbations() {
     loadPerturbations();
   }, [loadPerturbations]);
 
+  // Statistiques KPIs globales
+  const stats = useMemo(() => {
+    let totalIncidents = 0;
+    let retards = 0;
+    let totalRetardMins = 0;
+    let suppressions = 0;
+    let modifications = 0;
+    let activeTrainsCount = 0;
+
+    Object.values(perturbationsGrouped || {}).forEach(group => {
+      const perts = group.perturbations || [];
+      if (perts.length > 0) activeTrainsCount++;
+      perts.forEach(p => {
+        totalIncidents++;
+        if (p.type_perturbation === 'retard') {
+          retards++;
+          totalRetardMins += Number(p.duree_retard_minutes || 0);
+        } else if (p.type_perturbation === 'suppression') {
+          suppressions++;
+        } else if (p.type_perturbation === 'modification_parcours') {
+          modifications++;
+        }
+      });
+    });
+
+    return { totalIncidents, retards, totalRetardMins, suppressions, modifications, activeTrainsCount };
+  }, [perturbationsGrouped]);
+
+  // Liste filtrée de groupes prête pour l'affichage (tableau [horaireId, group])
+  const filteredGroups = useMemo(() => {
+    const { start: _start, end: _end } = getRangeFromMode();
+
+    return Object.entries(perturbationsGrouped || {})
+      .map(([id, group]) => {
+        let perts = (group.perturbations || []).filter(p => perturbationIntersectsRange(p, _start, _end));
+
+        // Filtre par type
+        if (typeFilter !== 'all') {
+          perts = perts.filter(p => p.type_perturbation === typeFilter);
+        }
+
+        return [id, { ...group, perturbations: perts }];
+      })
+      .filter(([_, group]) => (group.perturbations || []).length > 0)
+      .filter(([_, group]) => {
+        if (!searchQuery || !searchQuery.trim()) return true;
+        const q = searchQuery.toLowerCase();
+        const h = group.horaire || {};
+        const inHoraire =
+          (h.numero_train || '').toString().toLowerCase().includes(q) ||
+          (h.gare_depart_nom || '').toLowerCase().includes(q) ||
+          (h.gare_arrivee_nom || '').toLowerCase().includes(q) ||
+          (h.ligne_nom || '').toLowerCase().includes(q);
+        const inPert = (group.perturbations || []).some(p =>
+          (p.cause || '').toString().toLowerCase().includes(q) ||
+          (p.cause_details || '').toString().toLowerCase().includes(q) ||
+          (p.type_perturbation || '').toString().toLowerCase().includes(q)
+        );
+        return inHoraire || inPert;
+      });
+  }, [perturbationsGrouped, getRangeFromMode, perturbationIntersectsRange, typeFilter, searchQuery]);
+
   // Supprimer une perturbation
-  const handleDelete = async (id) => {
-    if (!canDeletePerturbations) {
-      alert('Vous n\'avez pas les droits pour supprimer une perturbation.');
+  const handleDelete = async (id, e) => {
+    if (e) e.stopPropagation();
+    if (!canDeleteTravauxPermissionCheck()) {
+      alert("Vous n'avez pas les droits pour supprimer une perturbation.");
       return;
     }
     if (!window.confirm('Êtes-vous sûr de vouloir supprimer cette perturbation ?')) {
       return;
     }
 
-    // Optimistic update : retirer immédiatement de l'UI
     const snapshot = perturbationsGrouped;
     setPerturbationsGrouped(prev => {
       const next = {};
       Object.keys(prev).forEach(key => {
-        const filtered = prev[key].filter(p => String(p.id) !== String(id));
-        if (filtered.length > 0) next[key] = filtered;
+        const filtered = (prev[key].perturbations || prev[key] || []).filter(p => String(p.id) !== String(id));
+        if (filtered.length > 0) {
+          next[key] = { ...prev[key], perturbations: filtered };
+        }
       });
       return next;
     });
 
+    if (selectedPerturbationDetail && String(selectedPerturbationDetail.perturbation.id) === String(id)) {
+      setSelectedPerturbationDetail(null);
+    }
+
     try {
       const { error: err } = await deletePerturbation(id);
       if (err) {
         alert('Erreur lors de la suppression de la perturbation : ' + (err.message || 'Erreur'));
-        console.error(err);
-        // Rollback
         setPerturbationsGrouped(snapshot);
         await loadPerturbations();
       }
     } catch (err) {
       alert('Erreur lors de la suppression de la perturbation');
-      console.error(err);
       setPerturbationsGrouped(snapshot);
       await loadPerturbations();
     }
   };
 
-  // Naviguer vers la page de création
+  const canDeleteTravauxPermissionCheck = () => canDeletePerturbations;
+
   const handleCreateNew = () => {
     if (!canCreatePerturbations) {
-      alert('Vous n\'avez pas les droits pour créer une perturbation.');
+      alert("Vous n'avez pas les droits pour créer une perturbation.");
       return;
     }
     window.location.href = '/perturbations/creer';
   };
 
-  // Naviguer vers la page de modification
-  const handleEdit = (id) => {
+  const handleEdit = (id, e) => {
+    if (e) e.stopPropagation();
     if (!canUpdatePerturbations) {
-      alert('Vous n\'avez pas les droits pour modifier une perturbation.');
+      alert("Vous n'avez pas les droits pour modifier une perturbation.");
       return;
     }
     window.location.href = `/perturbations/modifier/${id}`;
   };
 
-  // Obtenir le label du type de perturbation
   const getTypeLabel = (type) => {
     switch (type) {
       case 'retard': return 'Retard';
       case 'suppression': return 'Suppression';
       case 'modification_parcours': return 'Modification de parcours';
-      default: return type;
+      default: return type || 'Incident';
     }
   };
 
-  // Obtenir la couleur WCS du type de perturbation
   const getTypeColor = (type) => {
     switch (type) {
       case 'retard': return 'warning';
@@ -190,7 +240,6 @@ export default function Perturbations() {
     }
   };
 
-  // Obtenir l'icône WCS du type de perturbation
   const getTypeIcon = (type) => {
     switch (type) {
       case 'retard': return 'schedule';
@@ -200,7 +249,6 @@ export default function Perturbations() {
     }
   };
 
-  // Formatter la cause (valeur -> libellé)
   const formatCause = (cause) => {
     const MAP = {
       'incident_technique': 'Incident technique',
@@ -209,224 +257,691 @@ export default function Perturbations() {
       'travaux': 'Travaux',
       'mouvement_social': 'Mouvement social',
       'intervention_police': 'Intervention police',
-      'affluence': 'Affluence',
-      'malveillance': 'Malveillance',
+      'affluence': 'Affluence exceptionnelle',
+      'malveillance': 'Acte de malveillance',
       'indisponibilite_materiel': 'Indisponibilité du matériel',
-      'modification_materiel': 'Modification du matériel',
-      'autre': 'Autre'
+      'modification_materiel': 'Modification de matériel',
+      'autre': 'Autre motif'
     };
     if (!cause && cause !== 0) return '—';
     return MAP[cause] || cause;
   };
 
+  const formatDate = (date) => {
+    if (!date) return '—';
+    return new Date(date).toLocaleDateString('fr-FR', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric'
+    });
+  };
+
   return (
-      <div className="sncf-groupe">
-        <div className="panel-layout">
-          <div className="panel-nav">
-            <NavPanel />
-          </div>
+    <div className="sncf-groupe perturbations-page-root">
+      <div className="panel-layout">
+        <div className="panel-nav">
+          <NavPanel />
+        </div>
 
-          <div className="panel-content">
-            <header className="page-header">
-              <div className="header-main">
-                <h1>Gestion des Perturbations</h1>
-                <p className="page-description">
-                  Consultez et gérez les incidents affectant le réseau ferroviaire en temps réel.
-                </p>
-              </div>
-              <div className="header-actions">
-                <wcs-button className="wcs-primary" onClick={handleCreateNew} disabled={!canCreatePerturbations}>
-                  <wcs-mat-icon icon="add" slot="prefix"></wcs-mat-icon>
-                  Perturber un horaire
-                </wcs-button>
-              </div>
-            </header>
-
-            {/* Barre d'outils (recherche + filtres potentiels) */}
-            <div className="toolbar-container">
-              <div className="search-wrapper">
-                <wcs-input
-                    placeholder="Rechercher par train, gare ou ligne..."
-                    value={searchQuery}
-                    onWcsChange={(e) => setSearchQuery(e.detail.value)}
-                    auto-focus
-                >
-                  <wcs-mat-icon icon="search" slot="prefix"></wcs-mat-icon>
-                </wcs-input>
-              </div>
-
-              {/* Date filter controls */}
-              <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginLeft: 12 }}>
-                <wcs-button mode={filterMode === 'today' ? 'raised' : 'stroked'} onClick={() => { setFilterMode('today'); setStartDate(todayStr); setEndDate(todayStr); }}>
-                  Aujourd&apos;hui
-                </wcs-button>
-                <wcs-button mode={filterMode === 'past' ? 'raised' : 'stroked'} onClick={() => setFilterMode('past')}>
-                  Passées
-                </wcs-button>
-                <wcs-button mode={filterMode === 'future' ? 'raised' : 'stroked'} onClick={() => setFilterMode('future')}>
-                  À venir
-                </wcs-button>
-                <wcs-button mode={filterMode === 'range' ? 'raised' : 'stroked'} onClick={() => setFilterMode('range')}>
-                  Personnalisé
-                </wcs-button>
-
-                {filterMode === 'future' && (
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                      <label style={{ fontSize: 12, color: '#666' }}>jours</label>
-                      <input type="number" min="1" value={futureDays} onChange={(e) => setFutureDays(Number(e.target.value || 7))} style={{ width: 70, padding: '6px 8px' }} />
-                    </div>
+        <div className="panel-content perturbations-modern-container">
+          {/* Hero Banner Header */}
+          <header className="perturbations-hero-banner">
+            <div className="perturbations-hero-content">
+              <div className="perturbations-hero-tags">
+                <span className="perturbations-kicker-pill">
+                  <wcs-mat-icon icon="sensors"></wcs-mat-icon>
+                  Centre Opérationnel & Gestion des Incidents
+                </span>
+                {scopedRegionId && (
+                  <span className="perturbations-region-badge">
+                    <wcs-mat-icon icon="place"></wcs-mat-icon>
+                    Région : <strong>{scopedRegionId}</strong>
+                  </span>
                 )}
+              </div>
+              <h1 className="perturbations-hero-title">Gestion des Perturbations</h1>
+              <p className="perturbations-hero-subtitle">
+                Surveillez les retards, suppressions et modifications de parcours sur les circulations en temps réel.
+              </p>
+            </div>
 
-                {filterMode === 'range' && (
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                      <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
-                      <span style={{ color: '#666' }}>→</span>
-                      <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
-                    </div>
-                )}
+            <div className="perturbations-hero-actions">
+              <wcs-button
+                className="wcs-primary"
+                onClick={handleCreateNew}
+                disabled={!canCreatePerturbations}
+                title={!canCreatePerturbations ? "Droits insuffisants" : "Perturber un horaire"}
+              >
+                <wcs-mat-icon icon="add_alert" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                <span>Perturber un horaire</span>
+              </wcs-button>
+            </div>
+          </header>
+
+          {/* KPI Cards Dashboard */}
+          <section className="perturbations-kpi-grid">
+            <div
+              className={`perturbations-kpi-card ${typeFilter === 'all' ? 'active' : ''}`}
+              onClick={() => setTypeFilter('all')}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="kpi-icon-wrapper kpi-all">
+                <wcs-mat-icon icon="warning_amber"></wcs-mat-icon>
+              </div>
+              <div className="kpi-info">
+                <span className="kpi-label">Total Incidents</span>
+                <div className="kpi-value-row">
+                  <span className="kpi-value">{stats.totalIncidents}</span>
+                  <span className="kpi-subtext">{stats.activeTrainsCount} train{stats.activeTrainsCount > 1 ? 's' : ''}</span>
+                </div>
               </div>
             </div>
 
-            {/* État du chargement */}
-            {loading ? (
-                <div className="loading-state-full">
-                  <wcs-spinner mode="border" size="l"></wcs-spinner>
-                  <p>Récupération des données d&apos;exploitation...</p>
-                </div>
-            ) : error ? (
-                <div className="error-message-container">
-                  <wcs-message mode="danger">
-                    <wcs-mat-icon icon="error_outline" slot="prefix"></wcs-mat-icon>
-                    {error}
-                  </wcs-message>
-                  <wcs-button mode="stroked" className="wcs-primary" onClick={loadPerturbations}>
-                    Réessayer
-                  </wcs-button>
-                </div>
-            ) : filteredGroups.length === 0 ? (
-                <div className="empty-state-modern">
-                  <div className="empty-state-icon">
-                    <wcs-mat-icon icon="sentiment_satisfied" size="xl"></wcs-mat-icon>
-                  </div>
-                  <h3>Tout est au vert</h3>
-                  <p>
-                    {searchQuery
-                        ? 'Aucune perturbation ne correspond à votre recherche.'
-                        : 'Aucun incident n\'est actuellement signalé sur le périmètre sélectionné.'}
-                  </p>
-                  {searchQuery && (
-                      <wcs-button mode="stroked" className="wcs-secondary" onClick={() => setSearchQuery('')}>
-                        Réinitialiser la recherche
-                      </wcs-button>
+            <div
+              className={`perturbations-kpi-card ${typeFilter === 'retard' ? 'active' : ''}`}
+              onClick={() => setTypeFilter('retard')}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="kpi-icon-wrapper kpi-retard">
+                <wcs-mat-icon icon="schedule"></wcs-mat-icon>
+              </div>
+              <div className="kpi-info">
+                <span className="kpi-label">Retards</span>
+                <div className="kpi-value-row">
+                  <span className="kpi-value text-warning">{stats.retards}</span>
+                  {stats.totalRetardMins > 0 && (
+                    <span className="kpi-subtext">+{stats.totalRetardMins} min cumulées</span>
                   )}
                 </div>
-            ) : (
-                <div className="perturbations-grid-modern">
-                  {filteredGroups.map(([horaireId, group]) => {
-                    const horaire = group.horaire;
-                    const perturbations = group.perturbations;
+              </div>
+            </div>
 
-                    return (
-                        <div key={horaireId} className="horaire-group-card">
-                          {/* En-tête de l'horaire */}
-                          <div className="horaire-header">
-                            <div className="horaire-badge-numero">
-                              <span className="train-type-mini">{horaire?.type_train || 'TER'}</span>
-                              <span className="train-number-bold">{horaire?.numero_train || 'N/A'}</span>
-                            </div>
-
-                            <div className="horaire-route-main">
-                              <div className="route-stop">
-                                <span className="route-time">{formatHeure(horaire?.heure_depart)}</span>
-                                <span className="route-city">{horaire?.gare_depart_nom}</span>
-                              </div>
-                              <div className="route-arrow">
-                                <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
-                              </div>
-                              <div className="route-stop">
-                                <span className="route-time">{formatHeure(horaire?.heure_arrivee)}</span>
-                                <span className="route-city">{horaire?.gare_arrivee_nom}</span>
-                              </div>
-                            </div>
-
-                            <div className="horaire-meta">
-                              {horaire?.ligne_nom && (
-                                  <span className="ligne-tag">{horaire.ligne_nom}</span>
-                              )}
-                              <wcs-badge className="wcs-danger count-badge">
-                                {perturbations.length} incident{perturbations.length > 1 ? 's' : ''}
-                              </wcs-badge>
-                            </div>
-                          </div>
-
-                          {/* Liste des perturbations pour cet horaire */}
-                          <div className="perturbations-sublist">
-                            {perturbations.map((perturbation) => (
-                                <div
-                                    key={perturbation.id}
-                                    className={`perturbation-item border-${getTypeColor(perturbation.type_perturbation)}`}
-                                >
-                                  <div className="item-main-info">
-                                    <div className="item-type-tag">
-                                      <wcs-mat-icon icon={getTypeIcon(perturbation.type_perturbation)} className={`text-${getTypeColor(perturbation.type_perturbation)}`}></wcs-mat-icon>
-                                      <span className="type-label">{getTypeLabel(perturbation.type_perturbation)}</span>
-                                      {perturbation.type_perturbation === 'retard' && perturbation.duree_retard_minutes && (
-                                          <span className="retard-amount">+{perturbation.duree_retard_minutes}&apos;</span>
-                                      )}
-                                    </div>
-
-                                    <div className="item-cause">
-                                      <strong>{formatCause(perturbation.cause)}</strong>
-                                      {perturbation.cause_details && (
-                                          <span className="cause-details"> : {perturbation.cause_details}</span>
-                                      )}
-                                    </div>
-
-                                    <div className="item-time">
-                                      <wcs-mat-icon icon="event"></wcs-mat-icon>
-                                      <span>
-                                {new Date(perturbation.date_debut).toLocaleDateString('fr-FR')}
-                                        {perturbation.date_fin && (
-                                            <> → {new Date(perturbation.date_fin).toLocaleDateString('fr-FR')}</>
-                                        )}
-                              </span>
-                                    </div>
-
-                                    {!perturbation.actif && (
-                                        <wcs-badge className="wcs-secondary inactive-badge">Historisé / Inactif</wcs-badge>
-                                    )}
-                                  </div>
-
-                                  <div className="item-actions">
-                                    <wcs-button
-                                        mode="stroked"
-                                        className="wcs-secondary wcs-small"
-                                        onClick={() => handleEdit(perturbation.id)}
-                                        disabled={!canUpdatePerturbations}
-                                        title="Modifier l'incident"
-                                    >
-                                      <wcs-mat-icon icon="edit"></wcs-mat-icon>
-                                    </wcs-button>
-                                    <wcs-button
-                                        mode="stroked"
-                                        className="wcs-danger wcs-small"
-                                        onClick={() => handleDelete(perturbation.id)}
-                                        disabled={!canDeletePerturbations}
-                                        title="Supprimer l'incident"
-                                    >
-                                      <wcs-mat-icon icon="delete"></wcs-mat-icon>
-                                    </wcs-button>
-                                  </div>
-                                </div>
-                            ))}
-                          </div>
-                        </div>
-                    );
-                  })}
+            <div
+              className={`perturbations-kpi-card ${typeFilter === 'suppression' ? 'active' : ''}`}
+              onClick={() => setTypeFilter('suppression')}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="kpi-icon-wrapper kpi-suppr">
+                {stats.suppressions > 0 && <span className="live-pulse-red"></span>}
+                <wcs-mat-icon icon="cancel"></wcs-mat-icon>
+              </div>
+              <div className="kpi-info">
+                <span className="kpi-label">Suppressions</span>
+                <div className="kpi-value-row">
+                  <span className="kpi-value text-danger">{stats.suppressions}</span>
+                  <span className="kpi-subtext">Trains annulés</span>
                 </div>
+              </div>
+            </div>
+
+            <div
+              className={`perturbations-kpi-card ${typeFilter === 'modification_parcours' ? 'active' : ''}`}
+              onClick={() => setTypeFilter('modification_parcours')}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="kpi-icon-wrapper kpi-modif">
+                <wcs-mat-icon icon="alt_route"></wcs-mat-icon>
+              </div>
+              <div className="kpi-info">
+                <span className="kpi-label">Modifications parcours</span>
+                <div className="kpi-value-row">
+                  <span className="kpi-value text-info">{stats.modifications}</span>
+                  <span className="kpi-subtext">Origines / Terminus</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Controls & Filter Bar */}
+          <section className="perturbations-controls-card">
+            {/* Search Input */}
+            <div className="perturbations-search-bar">
+              <wcs-mat-icon icon="search" className="search-icon"></wcs-mat-icon>
+              <input
+                type="text"
+                className="perturbations-modern-input"
+                placeholder="Rechercher par numéro de train, gare, ligne, motif..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  className="btn-clear-search"
+                  onClick={() => setSearchQuery('')}
+                  title="Effacer la recherche"
+                >
+                  <wcs-mat-icon icon="close"></wcs-mat-icon>
+                </button>
+              )}
+            </div>
+
+            {/* Date Filters & Controls */}
+            <div className="perturbations-filters-row">
+              {/* Date Mode Pills */}
+              <div className="perturbations-tab-group">
+                <button
+                  type="button"
+                  className={`perturbations-tab-btn ${filterMode === 'today' ? 'active' : ''}`}
+                  onClick={() => { setFilterMode('today'); setStartDate(todayStr); setEndDate(todayStr); }}
+                >
+                  Aujourd'hui
+                </button>
+                <button
+                  type="button"
+                  className={`perturbations-tab-btn ${filterMode === 'future' ? 'active' : ''}`}
+                  onClick={() => setFilterMode('future')}
+                >
+                  À venir
+                </button>
+                <button
+                  type="button"
+                  className={`perturbations-tab-btn ${filterMode === 'past' ? 'active' : ''}`}
+                  onClick={() => setFilterMode('past')}
+                >
+                  Passées
+                </button>
+                <button
+                  type="button"
+                  className={`perturbations-tab-btn ${filterMode === 'range' ? 'active' : ''}`}
+                  onClick={() => setFilterMode('range')}
+                >
+                  Personnalisé
+                </button>
+                <button
+                  type="button"
+                  className={`perturbations-tab-btn ${filterMode === 'all' ? 'active' : ''}`}
+                  onClick={() => setFilterMode('all')}
+                >
+                  Toutes
+                </button>
+              </div>
+
+              {/* Dynamic Range Controls */}
+              {filterMode === 'future' && (
+                <div className="range-picker-inline">
+                  <span className="range-label">Horizon :</span>
+                  <input
+                    type="number"
+                    min="1"
+                    max="90"
+                    value={futureDays}
+                    onChange={(e) => setFutureDays(Number(e.target.value || 7))}
+                    className="days-number-input"
+                  />
+                  <span className="range-label">jours</span>
+                </div>
+              )}
+
+              {filterMode === 'range' && (
+                <div className="range-picker-inline">
+                  <input
+                    type="date"
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
+                    className="date-input-sm"
+                  />
+                  <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '14px', margin: '0 4px', color: '#94a3b8' }}></wcs-mat-icon>
+                  <input
+                    type="date"
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
+                    className="date-input-sm"
+                  />
+                </div>
+              )}
+
+              {/* View Switcher */}
+              <div className="view-mode-toggle">
+                <button
+                  type="button"
+                  className={`btn-view-mode ${viewMode === 'grouped' ? 'active' : ''}`}
+                  onClick={() => setViewMode('grouped')}
+                  title="Vue Groupée par Train"
+                >
+                  <wcs-mat-icon icon="dashboard"></wcs-mat-icon>
+                </button>
+                <button
+                  type="button"
+                  className={`btn-view-mode ${viewMode === 'table' ? 'active' : ''}`}
+                  onClick={() => setViewMode('table')}
+                  title="Vue Tableau compact"
+                >
+                  <wcs-mat-icon icon="view_list"></wcs-mat-icon>
+                </button>
+              </div>
+            </div>
+          </section>
+
+          {/* Results Summary Bar */}
+          <div className="perturbations-results-header">
+            <span className="results-count-text">
+              <strong>{filteredGroups.length}</strong> train{filteredGroups.length > 1 ? 's' : ''} perturbé{filteredGroups.length > 1 ? 's' : ''}
+              {typeFilter !== 'all' && <span className="filter-badge-applied"> • Filtre : {getTypeLabel(typeFilter)}</span>}
+              {searchQuery && <span> pour « <em>{searchQuery}</em> »</span>}
+            </span>
+
+            {(searchQuery || typeFilter !== 'all' || filterMode !== 'today') && (
+              <button
+                type="button"
+                className="btn-reset-filters"
+                onClick={() => {
+                  setSearchQuery('');
+                  setTypeFilter('all');
+                  setFilterMode('today');
+                  setStartDate(todayStr);
+                  setEndDate(todayStr);
+                }}
+              >
+                <wcs-mat-icon icon="restart_alt"></wcs-mat-icon>
+                Réinitialiser les filtres
+              </button>
             )}
           </div>
+
+          {/* Main Content Area */}
+          {loading ? (
+            <div className="perturbations-loading-box">
+              <wcs-spinner mode="border" style={{ width: '40px', height: '40px', color: '#0088ce' }}></wcs-spinner>
+              <h3>Chargement des perturbations en temps réel...</h3>
+              <p>Connexion aux flux d'exploitation ferroviaire...</p>
+            </div>
+          ) : error ? (
+            <div className="perturbations-error-box">
+              <wcs-mat-icon icon="error_outline" className="error-icon"></wcs-mat-icon>
+              <h3>Erreur de chargement</h3>
+              <p>{error}</p>
+              <button type="button" className="perturbations-btn-primary" onClick={loadPerturbations}>
+                Réessayer
+              </button>
+            </div>
+          ) : filteredGroups.length === 0 ? (
+            <div className="perturbations-empty-box">
+              <div className="empty-icon-green">
+                <wcs-mat-icon icon="verified"></wcs-mat-icon>
+              </div>
+              <h3>Trafic normal • Réseau au vert</h3>
+              <p>
+                {searchQuery || typeFilter !== 'all' || filterMode !== 'today'
+                  ? 'Aucune perturbation ne correspond à vos filtres sélectionnés.'
+                  : 'Aucun incident n\'est actuellement signalé sur les circulations de ce périmètre.'}
+              </p>
+              {searchQuery || typeFilter !== 'all' || filterMode !== 'today' ? (
+                <button
+                  type="button"
+                  className="perturbations-btn-outline"
+                  onClick={() => {
+                    setSearchQuery('');
+                    setTypeFilter('all');
+                    setFilterMode('today');
+                    setStartDate(todayStr);
+                    setEndDate(todayStr);
+                  }}
+                >
+                  Afficher les perturbations du jour
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  className="perturbations-btn-primary"
+                  onClick={handleCreateNew}
+                  disabled={!canCreatePerturbations}
+                >
+                  <wcs-mat-icon icon="add_alert"></wcs-mat-icon>
+                  Déclarer un incident
+                </button>
+              )}
+            </div>
+          ) : viewMode === 'grouped' ? (
+            /* Grouped Train Cards View */
+            <div className="perturbations-cards-stack">
+              {filteredGroups.map(([horaireId, group]) => {
+                const horaire = group.horaire || {};
+                const perturbations = group.perturbations || [];
+
+                return (
+                  <article key={horaireId} className="train-group-card">
+                    {/* Header Train Summary */}
+                    <div className="train-group-header">
+                      <div className="train-id-badge">
+                        <span className="train-type-pill">{horaire.type_train || 'TER'}</span>
+                        <strong className="train-num">{horaire.numero_train || 'N/A'}</strong>
+                      </div>
+
+                      <div className="train-route-bar">
+                        <div className="station-step">
+                          <span className="time-badge">{formatHeure(horaire.heure_depart)}</span>
+                          <span className="station-label">{horaire.gare_depart_nom || 'Départ'}</span>
+                        </div>
+                        <div className="route-arrow-icon">
+                          <wcs-mat-icon icon="arrow_forward"></wcs-mat-icon>
+                        </div>
+                        <div className="station-step">
+                          <span className="time-badge">{formatHeure(horaire.heure_arrivee)}</span>
+                          <span className="station-label">{horaire.gare_arrivee_nom || 'Arrivée'}</span>
+                        </div>
+                      </div>
+
+                      <div className="train-meta-right">
+                        {horaire.ligne_nom && (
+                          <span className="ligne-badge">
+                            <wcs-mat-icon icon="trending_up"></wcs-mat-icon>
+                            {horaire.ligne_nom}
+                          </span>
+                        )}
+                        <span className="incidents-count-pill">
+                          {perturbations.length} incident{perturbations.length > 1 ? 's' : ''}
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Disruption Items Sub-List */}
+                    <div className="incidents-sublist">
+                      {perturbations.map((p) => {
+                        const colorClass = getTypeColor(p.type_perturbation);
+                        const icon = getTypeIcon(p.type_perturbation);
+
+                        return (
+                          <div key={p.id} className={`incident-row incident-border-${colorClass}`}>
+                            <div className="incident-main-col">
+                              <div className="incident-type-tag">
+                                <wcs-mat-icon icon={icon} className={`text-${colorClass}`}></wcs-mat-icon>
+                                <strong className="type-title">{getTypeLabel(p.type_perturbation)}</strong>
+                                {p.type_perturbation === 'retard' && p.duree_retard_minutes && (
+                                  <span className="retard-chip">+{p.duree_retard_minutes} min</span>
+                                )}
+                              </div>
+
+                              <div className="incident-cause-box">
+                                <span className="cause-badge">{formatCause(p.cause)}</span>
+                                {p.cause_details && <span className="cause-details-text">{p.cause_details}</span>}
+                              </div>
+
+                              <div className="incident-dates-tag">
+                                <wcs-mat-icon icon="calendar_today"></wcs-mat-icon>
+                                <span>{formatDate(p.date_debut)}</span>
+                                {p.date_fin && (
+                                  <>
+                                    <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '13px', margin: '0 4px', verticalAlign: 'middle' }}></wcs-mat-icon>
+                                    <span>{formatDate(p.date_fin)}</span>
+                                  </>
+                                )}
+                              </div>
+
+                              {!p.actif && (
+                                <span className="inactive-badge-tag">Historisé</span>
+                              )}
+                            </div>
+
+                            <div className="incident-actions-col">
+                              <button
+                                type="button"
+                                className="btn-incident-action btn-preview"
+                                onClick={() => setSelectedPerturbationDetail({ horaire, perturbation: p })}
+                                title="Voir les détails complets"
+                              >
+                                <wcs-mat-icon icon="info"></wcs-mat-icon>
+                                <span>Détails</span>
+                              </button>
+
+                              <button
+                                type="button"
+                                className="btn-incident-action btn-edit"
+                                onClick={(e) => handleEdit(p.id, e)}
+                                disabled={!canUpdatePerturbations}
+                                title="Modifier cette perturbation"
+                              >
+                                <wcs-mat-icon icon="edit"></wcs-mat-icon>
+                                <span>Modifier</span>
+                              </button>
+
+                              <button
+                                type="button"
+                                className="btn-incident-action btn-delete"
+                                onClick={(e) => handleDelete(p.id, e)}
+                                disabled={!canDeletePerturbations}
+                                title="Supprimer la perturbation"
+                              >
+                                <wcs-mat-icon icon="delete_outline"></wcs-mat-icon>
+                              </button>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          ) : (
+            /* Table View */
+            <div className="perturbations-table-wrapper">
+              <table className="perturbations-modern-table">
+                <thead>
+                  <tr>
+                    <th>Type</th>
+                    <th>Train & Ligne</th>
+                    <th>Itinéraire</th>
+                    <th>Motif & Cause</th>
+                    <th>Période</th>
+                    <th>Statut</th>
+                    <th className="th-actions">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredGroups.flatMap(([horaireId, group]) => {
+                    const horaire = group.horaire || {};
+                    return (group.perturbations || []).map((p) => {
+                      const colorClass = getTypeColor(p.type_perturbation);
+                      const icon = getTypeIcon(p.type_perturbation);
+
+                      return (
+                        <tr key={p.id}>
+                          <td>
+                            <div className="table-type-cell">
+                              <wcs-mat-icon icon={icon} className={`text-${colorClass}`}></wcs-mat-icon>
+                              <strong className={`type-title text-${colorClass}`}>{getTypeLabel(p.type_perturbation)}</strong>
+                              {p.type_perturbation === 'retard' && p.duree_retard_minutes && (
+                                <span className="retard-chip">+{p.duree_retard_minutes}'</span>
+                              )}
+                            </div>
+                          </td>
+                          <td>
+                            <div className="table-train-cell">
+                              <strong>{horaire.type_train || 'TER'} {horaire.numero_train}</strong>
+                              {horaire.ligne_nom && <span className="table-ligne-sub">{horaire.ligne_nom}</span>}
+                            </div>
+                          </td>
+                          <td>
+                            <div className="table-route-cell">
+                              <span>{horaire.gare_depart_nom} ({formatHeure(horaire.heure_depart)})</span>
+                              <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '13px', margin: '0 4px', color: '#94a3b8' }}></wcs-mat-icon>
+                              <span>{horaire.gare_arrivee_nom} ({formatHeure(horaire.heure_arrivee)})</span>
+                            </div>
+                          </td>
+                          <td>
+                            <div className="table-cause-cell">
+                              <strong>{formatCause(p.cause)}</strong>
+                              {p.cause_details && <span className="table-cause-sub">{p.cause_details}</span>}
+                            </div>
+                          </td>
+                          <td>
+                            <div className="table-date-cell">
+                              <span>{formatDate(p.date_debut)}</span>
+                              {p.date_fin && (
+                                <>
+                                  <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '12px', margin: '0 4px', color: '#94a3b8' }}></wcs-mat-icon>
+                                  <span>{formatDate(p.date_fin)}</span>
+                                </>
+                              )}
+                            </div>
+                          </td>
+                          <td>
+                            <span className={`status-pill ${p.actif ? 'badge-ongoing' : 'badge-inactive'}`}>
+                              {p.actif ? 'Actif' : 'Historisé'}
+                            </span>
+                          </td>
+                          <td>
+                            <div className="table-actions-cell">
+                              <button
+                                type="button"
+                                className="btn-table-icon"
+                                onClick={() => setSelectedPerturbationDetail({ horaire, perturbation: p })}
+                                title="Détails"
+                              >
+                                <wcs-mat-icon icon="info"></wcs-mat-icon>
+                              </button>
+                              <button
+                                type="button"
+                                className="btn-table-icon btn-table-edit"
+                                onClick={(e) => handleEdit(p.id, e)}
+                                disabled={!canUpdatePerturbations}
+                                title="Modifier"
+                              >
+                                <wcs-mat-icon icon="edit"></wcs-mat-icon>
+                              </button>
+                              <button
+                                type="button"
+                                className="btn-table-icon btn-table-delete"
+                                onClick={(e) => handleDelete(p.id, e)}
+                                disabled={!canDeletePerturbations}
+                                title="Supprimer"
+                              >
+                                <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                              </button>
+                            </div>
+                          </td>
+                        </tr>
+                      );
+                    });
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {/* Details Modal */}
+          {selectedPerturbationDetail && (
+            <div className="perturbations-modal-overlay" onClick={() => setSelectedPerturbationDetail(null)}>
+              <div className="perturbations-detail-modal" onClick={(e) => e.stopPropagation()}>
+                {/* Modal Header */}
+                <div className="modal-top-header">
+                  <div className="modal-header-info">
+                    <div className="modal-badges-row">
+                      <span className={`status-pill badge-${getTypeColor(selectedPerturbationDetail.perturbation.type_perturbation)}`}>
+                        <wcs-mat-icon icon={getTypeIcon(selectedPerturbationDetail.perturbation.type_perturbation)}></wcs-mat-icon>
+                        {getTypeLabel(selectedPerturbationDetail.perturbation.type_perturbation)}
+                      </span>
+                      {selectedPerturbationDetail.horaire?.numero_train && (
+                        <span className="train-id-pill">
+                          Train {selectedPerturbationDetail.horaire.numero_train}
+                        </span>
+                      )}
+                    </div>
+                    <h2>Détails de l'incident ferroviaire</h2>
+                  </div>
+                  <button
+                    type="button"
+                    className="modal-close-btn"
+                    onClick={() => setSelectedPerturbationDetail(null)}
+                    title="Fermer"
+                  >
+                    <wcs-mat-icon icon="close"></wcs-mat-icon>
+                  </button>
+                </div>
+
+                {/* Modal Body */}
+                <div className="modal-body-content">
+                  <div className="modal-summary-cards">
+                    <div className="modal-card-stat">
+                      <wcs-mat-icon icon="directions_railway"></wcs-mat-icon>
+                      <div>
+                        <span className="stat-label">Sillon concerné</span>
+                        <strong style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px' }}>
+                          {selectedPerturbationDetail.horaire?.gare_depart_nom} ({formatHeure(selectedPerturbationDetail.horaire?.heure_depart)})
+                          <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '14px', margin: '0 4px' }}></wcs-mat-icon>
+                          {selectedPerturbationDetail.horaire?.gare_arrivee_nom} ({formatHeure(selectedPerturbationDetail.horaire?.heure_arrivee)})
+                        </strong>
+                      </div>
+                    </div>
+
+                    <div className="modal-card-stat">
+                      <wcs-mat-icon icon="calendar_month"></wcs-mat-icon>
+                      <div>
+                        <span className="stat-label">Dates d'application</span>
+                        <strong style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px' }}>
+                          {formatDate(selectedPerturbationDetail.perturbation.date_debut)}
+                          {selectedPerturbationDetail.perturbation.date_fin && (
+                            <>
+                              <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '14px', margin: '0 4px' }}></wcs-mat-icon>
+                              {formatDate(selectedPerturbationDetail.perturbation.date_fin)}
+                            </>
+                          )}
+                        </strong>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="modal-section">
+                    <h3 className="modal-section-title">
+                      <wcs-mat-icon icon="report_problem"></wcs-mat-icon>
+                      Motif & Cause de l'incident
+                    </h3>
+                    <div className="modal-cause-detail-box">
+                      <strong>{formatCause(selectedPerturbationDetail.perturbation.cause)}</strong>
+                      {selectedPerturbationDetail.perturbation.cause_details && (
+                        <p>{selectedPerturbationDetail.perturbation.cause_details}</p>
+                      )}
+                      {selectedPerturbationDetail.perturbation.notes && (
+                        <div className="modal-notes-box">
+                          <span className="notes-label">Notes d'exploitation :</span>
+                          <p>{selectedPerturbationDetail.perturbation.notes}</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* Modal Footer */}
+                <div className="modal-footer-bar">
+                  <wcs-button
+                    className="wcs-secondary"
+                    mode="stroked"
+                    onClick={() => setSelectedPerturbationDetail(null)}
+                  >
+                    Fermer
+                  </wcs-button>
+
+                  <div className="modal-footer-right" style={{ display: 'flex', gap: '10px' }}>
+                    <wcs-button
+                      className="wcs-danger"
+                      mode="stroked"
+                      onClick={() => handleDelete(selectedPerturbationDetail.perturbation.id)}
+                      disabled={!canDeletePerturbations}
+                    >
+                      <wcs-mat-icon icon="delete" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                      Supprimer
+                    </wcs-button>
+                    <wcs-button
+                      className="wcs-primary"
+                      onClick={() => handleEdit(selectedPerturbationDetail.perturbation.id)}
+                      disabled={!canUpdatePerturbations}
+                    >
+                      <wcs-mat-icon icon="edit" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                      Modifier l'incident
+                    </wcs-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
         </div>
       </div>
+    </div>
   );
 }
diff --git a/src/pages/perturbations/perturbationsUtils.js b/src/pages/perturbations/perturbationsUtils.js
index 0aacd75..b5b4769 100644
--- a/src/pages/perturbations/perturbationsUtils.js
+++ b/src/pages/perturbations/perturbationsUtils.js
@@ -27,10 +27,11 @@ export function doesHoraireCirculateOnDate(horaire, dateString) {
 
 
 export const TYPES_PERTURBATION_ARRET = [
-  { value: 'retard',               label: 'Retard',                   color: '#f39c12', bg: '#fff8e6', icon: 'schedule'  },
-  { value: 'arret_supprime',       label: 'Arrêt Supprimé',           color: '#e74c3c', bg: '#fef5f5', icon: 'cancel'    },
-  { value: 'modification_parcours',label: 'Modification de parcours', color: '#9b59b6', bg: '#f5f0ff', icon: 'alt_route' },
-  { value: 'arret_prolonge',       label: 'Arrêt Prolongé',           color: '#3498db', bg: '#e8f4fd', icon: 'timelapse' },
+  { value: 'retard',               label: 'Retard (+)',                   color: '#f39c12', bg: '#fff8e6', icon: 'schedule'  },
+  { value: 'reduction_retard',     label: 'Réduction / Rattrapage (-)',   color: '#059669', bg: '#ecfdf5', icon: 'fast_forward' },
+  { value: 'arret_supprime',       label: 'Arrêt Supprimé',               color: '#e74c3c', bg: '#fef5f5', icon: 'cancel'    },
+  { value: 'modification_parcours',label: 'Modification de parcours',     color: '#9b59b6', bg: '#f5f0ff', icon: 'alt_route' },
+  { value: 'arret_prolonge',       label: 'Arrêt Prolongé',               color: '#3498db', bg: '#e8f4fd', icon: 'timelapse' },
 ];
 
 export const CAUSES_PERTURBATION = [
@@ -59,6 +60,7 @@ export function getPrimaryType(types) {
   if (types.includes('modification_parcours')) return 'modification_parcours';
   if (types.includes('arret_supprime'))        return 'arret_supprime';
   if (types.includes('arret_prolonge'))        return 'arret_prolonge';
+  if (types.includes('reduction_retard'))      return 'reduction_retard';
   if (types.includes('retard'))                return 'retard';
   return types[0];
 }
@@ -71,12 +73,15 @@ export function buildArretFromHoraire(horaire) {
         types_perturbation: [],
         type_perturbation: '',
         retard_minutes: 0,
+        reduction_retard_minutes: 0,
         retard_cumule: 0,
+        retard_entrant: 0,
         arret_prolonge_minutes: 0,
         cause_arret: '',
         is_nouveau_terminus: false,
         is_nouvelle_origine: false,
         manual_retard: false,
+        manual_reduction: false,
         manual_arret_prolonge: false,
     };
 
@@ -94,24 +99,71 @@ export function recomputePropagation(arrets) {
     if (!arrets || arrets.length === 0) return arrets;
 
     let cumulativeDelay = 0;
+    let hadDelayEarlier = false;
 
-    return arrets.map((arret) => {
-        const newArret = { ...arret };
+    return arrets.map((arret, idx) => {
+        const newArret = { ...arret, index: idx };
+        const isSupprime = (newArret.types_perturbation || []).includes('arret_supprime');
 
-        const currentDelay = Number(newArret.retard_minutes) || 0;
+        const manualRetard = Number(newArret.retard_minutes) || 0;
+        const reductionRetard = Number(newArret.reduction_retard_minutes) || 0;
         const prolongedStopTime = Number(newArret.arret_prolonge_minutes) || 0;
 
-        cumulativeDelay += currentDelay + prolongedStopTime;
-        newArret.retard_cumule = cumulativeDelay;
-
-        const types = Array.isArray(newArret.types_perturbation) ? [...newArret.types_perturbation] : [];
-
-        if (currentDelay > 0 && !types.includes('retard')) {
-            types.push('retard');
+        // Enregistrer le retard entrant à cet arrêt
+        const delayBeforeStop = cumulativeDelay;
+        if (delayBeforeStop > 0 || manualRetard > 0 || prolongedStopTime > 0) {
+            hadDelayEarlier = true;
         }
 
-        if (prolongedStopTime > 0 && !types.includes('arret_prolonge')) {
-            types.push('arret_prolonge');
+        // Ajouter les retards déclarés spécifiquement à cet arrêt
+        if (newArret.manual_retard) {
+            cumulativeDelay += manualRetard;
+        }
+        if (newArret.manual_arret_prolonge) {
+            cumulativeDelay += prolongedStopTime;
+        }
+        // Appliquer la réduction / rattrapage de retard
+        if (reductionRetard > 0) {
+            cumulativeDelay = Math.max(0, cumulativeDelay - reductionRetard);
+        }
+
+        newArret.retard_cumule = cumulativeDelay;
+        newArret.retard_entrant = delayBeforeStop;
+        // Retard rattrapé : il y avait un retard et le train est maintenant remis à l'heure
+        newArret.retard_rattrape = hadDelayEarlier && cumulativeDelay === 0 && (delayBeforeStop > 0 || reductionRetard > 0);
+
+        let types = Array.isArray(newArret.types_perturbation)
+            ? [...newArret.types_perturbation]
+            : (newArret.type_perturbation ? [newArret.type_perturbation] : []);
+
+        if (!isSupprime) {
+            if (cumulativeDelay > 0) {
+                if (!types.includes('retard')) {
+                    types.push('retard');
+                }
+                newArret.is_propagated_delay = !newArret.manual_retard;
+            } else {
+                if (!newArret.manual_retard) {
+                    types = types.filter(t => t !== 'retard');
+                    newArret.is_propagated_delay = false;
+                }
+            }
+
+            if (reductionRetard > 0) {
+                if (!types.includes('reduction_retard')) {
+                    types.push('reduction_retard');
+                }
+            } else if (!newArret.manual_reduction) {
+                types = types.filter(t => t !== 'reduction_retard');
+            }
+
+            if (prolongedStopTime > 0) {
+                if (!types.includes('arret_prolonge')) {
+                    types.push('arret_prolonge');
+                }
+            } else if (!newArret.manual_arret_prolonge) {
+                types = types.filter(t => t !== 'arret_prolonge');
+            }
         }
 
         newArret.types_perturbation = types;
@@ -123,7 +175,7 @@ export function recomputePropagation(arrets) {
 
 /** Construit le payload API et les modifications de parcours depuis l'état du formulaire */
 export function buildPayload({ selectedHoraire, perturbationsArrets, cause, causeDetails, sillonSubstitutionId, joursPerturbation, actif, notes }) {
-  const hasRetard      = perturbationsArrets.some(a => (a.types_perturbation || []).some(t => ['retard', 'arret_prolonge'].includes(t)));
+  const hasRetard      = perturbationsArrets.some(a => (a.types_perturbation || []).some(t => ['retard', 'arret_prolonge', 'reduction_retard'].includes(t)) || (a.retard_cumule > 0));
   const hasSuppression = perturbationsArrets.some(a => (a.types_perturbation || []).includes('arret_supprime'));
   const hasModif       = perturbationsArrets.some(a => (a.types_perturbation || []).includes('modification_parcours'));
 
@@ -131,24 +183,23 @@ export function buildPayload({ selectedHoraire, perturbationsArrets, cause, caus
   if (hasModif) typePerturbation = 'modification_parcours';
   else if (hasSuppression && !hasRetard) typePerturbation = 'suppression';
 
-  const retardTotal = perturbationsArrets.reduce((acc, a) => {
-    let add = 0;
-    if (a.manual_retard)        add += Number(a.retard_minutes) || 0;
-    if (a.manual_arret_prolonge) add += Number(a.arret_prolonge_minutes) || 0;
-    return acc + add;
-  }, 0);
+  const maxDelay = Math.max(0, ...perturbationsArrets.map(a => Number(a.retard_cumule) || 0));
 
   const modificationsParcours = perturbationsArrets
-    .filter(a => (a.types_perturbation || []).length > 0)
+    .filter(a => (a.types_perturbation || []).length > 0 || (a.retard_cumule > 0 && !((a.types_perturbation || []).includes('arret_supprime'))))
     .map(a => ({
-      gare_nom:               a.gare_nom,
-      type_modification:      getPrimaryType(a.types_perturbation),
-      types_perturbation:     a.types_perturbation,
-      retard_minutes:         a.retard_minutes || null,
-      arret_prolonge_minutes: a.arret_prolonge_minutes || null,
-      cause:                  a.cause_arret,
-      is_nouveau_terminus:    a.is_nouveau_terminus,
-      is_nouvelle_origine:    a.is_nouvelle_origine,
+      gare_nom:                 a.gare_nom,
+      type_modification:        getPrimaryType(a.types_perturbation) || (a.retard_cumule > 0 ? 'retard' : ''),
+      types_perturbation:       a.types_perturbation?.length > 0 ? a.types_perturbation : (a.retard_cumule > 0 ? ['retard'] : []),
+      retard_minutes:           a.retard_cumule > 0 ? a.retard_cumule : (a.retard_minutes || null),
+      retard_ajoute:            a.manual_retard ? (a.retard_minutes || 0) : 0,
+      reduction_retard_minutes: a.reduction_retard_minutes || null,
+      retard_cumule:            a.retard_cumule || null,
+      arret_prolonge_minutes:   a.arret_prolonge_minutes || null,
+      cause:                    a.cause_arret || cause,
+      is_nouveau_terminus:      a.is_nouveau_terminus,
+      is_nouvelle_origine:      a.is_nouvelle_origine,
+      is_propagated_delay:      !!a.is_propagated_delay,
     }));
 
   const allDates = (joursPerturbation || []).flatMap(j =>
@@ -161,7 +212,7 @@ export function buildPayload({ selectedHoraire, perturbationsArrets, cause, caus
   const payload = {
     ...(selectedHoraire ? { horaire_id: selectedHoraire.id } : {}),
     type_perturbation:      typePerturbation,
-    duree_retard_minutes:   retardTotal > 0 ? retardTotal : null,
+    duree_retard_minutes:   maxDelay > 0 ? maxDelay : null,
     cause,
     cause_details:          causeDetails || null,
     sillon_substitution_id: sillonSubstitutionId || null,
@@ -200,18 +251,19 @@ export function ArretCard({ arret, index, isOpen, onToggle, onToggleType, onArre
     ? arret.types_perturbation
     : (arret.type_perturbation ? [arret.type_perturbation] : []);
   const primaryType = getPrimaryType(types);
-  const hasPerturbation = types.length > 0;
+  const hasPerturbation = types.length > 0 || (arret.retard_cumule > 0) || (arret.reduction_retard_minutes > 0) || arret.retard_rattrape;
   const isSupp = types.includes('arret_supprime');
 
   const borderColor = primaryType === 'retard'                ? '#f39c12'
+    : primaryType === 'reduction_retard'     ? '#059669'
     : primaryType === 'arret_supprime'       ? '#e74c3c'
     : primaryType === 'arret_prolonge'       ? '#3498db'
     : primaryType === 'modification_parcours'? '#9b59b6'
-    : '#ddd';
+    : (arret.retard_cumule > 0 ? '#f39c12' : '#ddd');
 
   const inputStyle = (border) => ({
-    padding: '0.6rem 0.75rem', fontSize: '1rem',
-    border: `1px solid ${border}`, borderRadius: '4px', background: 'white',
+    padding: '0.6rem 0.75rem', fontSize: '0.95rem',
+    border: `1px solid ${border}`, borderRadius: '6px', background: 'white',
   });
 
   return (
@@ -251,12 +303,27 @@ export function ArretCard({ arret, index, isOpen, onToggle, onToggleType, onArre
             <div style={{ display: 'flex', gap: '0.75rem', fontSize: '0.85rem', color: '#666', marginTop: '0.2rem' }}>
               {arret.heure_arrivee && <span>Arr: {formatHeure(arret.heure_arrivee)}</span>}
               {arret.heure_depart  && <span>Dép: {formatHeure(arret.heure_depart)}</span>}
-              {tempsArret !== null  && <span style={{ color: '#0088ce' }}>⏱ {tempsArret} min</span>}
+              {tempsArret !== null  && <span style={{ color: '#0088ce' }}><wcs-mat-icon icon="schedule" style={{ fontSize: '13px', verticalAlign: 'middle', marginRight: '2px' }}></wcs-mat-icon>{tempsArret} min</span>}
             </div>
           </div>
           {hasPerturbation && (
             <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-              {types.includes('retard')               && <wcs-badge className="wcs-warning">Retard +{arret.retard_minutes} min</wcs-badge>}
+              {(types.includes('retard') || arret.retard_cumule > 0) && !isSupp && (
+                <wcs-badge className="wcs-warning">
+                  {arret.manual_retard
+                    ? `Retard +${arret.retard_minutes} min${arret.retard_cumule && arret.retard_cumule !== arret.retard_minutes ? ` (cumul: +${arret.retard_cumule} min)` : ''}`
+                    : `Retard +${arret.retard_cumule} min (propagé)`}
+                </wcs-badge>
+              )}
+              {arret.reduction_retard_minutes > 0 && !isSupp && (
+                <wcs-badge className="wcs-success">Rattrapage -{arret.reduction_retard_minutes} min</wcs-badge>
+              )}
+              {arret.retard_rattrape && !isSupp && (
+                <wcs-badge className="wcs-info" style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                  <wcs-mat-icon icon="info" style={{ fontSize: '13px' }}></wcs-mat-icon>
+                  Arrivée à l'heure
+                </wcs-badge>
+              )}
               {types.includes('arret_supprime')       && <wcs-badge className="wcs-danger">Supprimé</wcs-badge>}
               {types.includes('arret_prolonge')       && <wcs-badge className="wcs-info">Prolongé +{arret.arret_prolonge_minutes} min</wcs-badge>}
               {types.includes('modification_parcours') && (
@@ -280,7 +347,7 @@ export function ArretCard({ arret, index, isOpen, onToggle, onToggleType, onArre
               ['Heure d\'arrivée', arret.heure_arrivee ? formatHeure(arret.heure_arrivee) : '—', 'heure_arrivee'],
               ['Heure de départ',  arret.heure_depart  ? formatHeure(arret.heure_depart)  : '—', 'heure_depart'],
               ['Temps d\'arrêt',   tempsArret !== null  ? `${tempsArret} min`              : '—', null],
-              ['Retard actuel',   arret.retard_cumule > 0 ? `${arret.retard_cumule} min` : '—', null],
+              ['Retard estimé à ce point', arret.retard_cumule > 0 ? `+${arret.retard_cumule} min` : (arret.retard_rattrape ? 'Arrivée à l\'heure (rattrapé)' : 'À l\'heure'), null],
             ].map(([lbl, val, field]) => (
               <div key={lbl}>
                 <label style={{ display: 'block', fontSize: '0.72rem', color: '#888', marginBottom: '0.2rem' }}>{lbl}</label>
@@ -343,12 +410,18 @@ export function ArretCard({ arret, index, isOpen, onToggle, onToggleType, onArre
           {/* Retard */}
           {types.includes('retard') && (
             <div style={{ marginTop: '1rem', padding: '1rem', background: '#fff8e6', borderRadius: '6px', border: '1px solid #f39c12' }}>
+              {arret.is_propagated_delay && (
+                <div style={{ marginBottom: '10px', padding: '6px 10px', background: '#fef3c7', borderRadius: '4px', fontSize: '0.85rem', color: '#92400e', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                  <wcs-mat-icon icon="info" style={{ fontSize: '15px' }}></wcs-mat-icon>
+                  <span>Retard reporté depuis les arrêts précédents : <strong>+{arret.retard_cumule} min</strong>.</span>
+                </div>
+              )}
               <label style={{ display: 'block', fontWeight: 500, marginBottom: '0.4rem', color: '#8a6d3b' }}>
-                Temps de retard (minutes)
+                {arret.is_propagated_delay ? 'Retard supplémentaire à cet arrêt (minutes)' : 'Temps de retard (minutes)'}
               </label>
-              <input type="number" min="1" placeholder="Ex: 15" value={arret.retard_minutes || ''}
+              <input type="number" min="0" placeholder={arret.is_propagated_delay ? "0 (retard propagé)" : "Ex: 15"} value={arret.retard_minutes || ''}
                 onChange={e => onArretChange(index, 'retard_minutes', parseInt(e.target.value, 10) || 0)}
-                style={{ ...inputStyle('#f39c12'), width: '150px' }} />
+                style={{ ...inputStyle('#f39c12'), width: '180px' }} />
               <label style={{ display: 'block', fontWeight: 500, marginBottom: '0.4rem', color: '#8a6d3b', marginTop: '0.75rem' }}>Cause du retard</label>
               <input type="text" placeholder="Ex : Incident technique, travaux..." value={arret.cause_arret || ''}
                 onChange={e => onArretChange(index, 'cause_arret', e.target.value)}
@@ -356,6 +429,41 @@ export function ArretCard({ arret, index, isOpen, onToggle, onToggleType, onArre
             </div>
           )}
 
+          {/* Réduction / Rattrapage de retard */}
+          {types.includes('reduction_retard') && (
+            <div style={{ marginTop: '1rem', padding: '1rem', background: '#ecfdf5', borderRadius: '6px', border: '1px solid #10b981' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px', color: '#065f46', fontWeight: 600, fontSize: '0.92rem' }}>
+                <wcs-mat-icon icon="fast_forward" style={{ fontSize: '18px' }}></wcs-mat-icon>
+                <span>Rattrapage / Réduction du retard</span>
+              </div>
+              <p style={{ fontSize: '0.85rem', color: '#047857', margin: '0 0 10px' }}>
+                Indiquez le temps rattrapé sur ce tronçon ou arrêt pour diminuer le retard cumulé reporté.
+              </p>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }}>
+                <div>
+                  <label style={{ display: 'block', fontWeight: 500, marginBottom: '0.4rem', color: '#065f46', fontSize: '0.85rem' }}>
+                    Temps réduit / rattrapé (minutes)
+                  </label>
+                  <input
+                    type="number"
+                    min="1"
+                    placeholder="Ex: 5"
+                    value={arret.reduction_retard_minutes || ''}
+                    onChange={e => onArretChange(index, 'reduction_retard_minutes', parseInt(e.target.value, 10) || 0)}
+                    style={{ ...inputStyle('#10b981'), width: '150px' }}
+                  />
+                </div>
+                {arret.retard_entrant > 0 && (
+                  <div style={{ padding: '8px 12px', background: '#ffffff', borderRadius: '6px', border: '1px solid #a7f3d0', fontSize: '0.85rem', color: '#065f46' }}>
+                    Retard en entrée : <strong>+{arret.retard_entrant} min</strong>
+                    <wcs-mat-icon icon="arrow_forward" style={{ fontSize: '12px', margin: '0 6px', verticalAlign: 'middle' }}></wcs-mat-icon>
+                    Sortie : <strong>{arret.retard_cumule > 0 ? `+${arret.retard_cumule} min` : "À l'heure"}</strong>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
           {/* Arrêt prolongé */}
           {types.includes('arret_prolonge') && (
             <div style={{ marginTop: '1rem', padding: '1rem', background: '#e8f4fd', borderRadius: '6px', border: '1px solid #3498db' }}>
@@ -401,8 +509,8 @@ export function ArretCard({ arret, index, isOpen, onToggle, onToggleType, onArre
                 )}
               </div>
               {(arret.is_nouveau_terminus || arret.is_nouvelle_origine) && (
-                <p style={{ fontSize: '0.83rem', color: '#27ae60', marginTop: '0.6rem', marginBottom: 0 }}>
-                  ✓ {arret.is_nouveau_terminus ? 'Terminus' : 'Origine'} désigné — les arrêts {arret.is_nouveau_terminus ? 'suivants' : 'précédents'} seront supprimés.
+                <p style={{ fontSize: '0.83rem', color: '#27ae60', marginTop: '0.6rem', marginBottom: 0, display: 'flex', alignItems: 'center', gap: '4px' }}>
+                  <wcs-mat-icon icon="check" style={{ fontSize: '14px' }}></wcs-mat-icon> {arret.is_nouveau_terminus ? 'Terminus' : 'Origine'} désigné — les arrêts {arret.is_nouveau_terminus ? 'suivants' : 'précédents'} seront supprimés.
                 </p>
               )}
             </div>
@@ -505,8 +613,9 @@ export function ParcoursPreview({ arrets }) {
           const types = Array.isArray(arret.types_perturbation)
             ? arret.types_perturbation
             : (arret.type_perturbation ? [arret.type_perturbation] : []);
-          const hasPerturbation = types.length > 0;
           const isSupp = types.includes('arret_supprime');
+          const displayRetard = arret.retard_cumule || arret.retard_minutes || 0;
+          const hasPerturbation = types.length > 0 || (displayRetard > 0 && !isSupp) || arret.retard_rattrape;
           const modClass = !hasPerturbation ? '' : isSupp ? 'supprimee' : 'modifiee';
           const causeLabel = arret.cause_arret?.trim() || null;
 
@@ -520,7 +629,22 @@ export function ParcoursPreview({ arrets }) {
                 </div>
               </div>
               <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap', marginTop: '0.25rem' }}>
-                {types.includes('retard')               && <wcs-badge className="wcs-warning parcours-stop-badge">+{arret.retard_minutes} min</wcs-badge>}
+                {displayRetard > 0 && !isSupp && (
+                  <wcs-badge className="wcs-warning parcours-stop-badge">
+                    +{displayRetard} min{arret.is_propagated_delay ? ' (propagé)' : ''}
+                  </wcs-badge>
+                )}
+                {arret.reduction_retard_minutes > 0 && !isSupp && (
+                  <wcs-badge className="wcs-success parcours-stop-badge">
+                    -{arret.reduction_retard_minutes} min (rattrapé)
+                  </wcs-badge>
+                )}
+                {arret.retard_rattrape && !isSupp && (
+                  <wcs-badge className="wcs-info parcours-stop-badge" style={{ display: 'inline-flex', alignItems: 'center', gap: '3px' }}>
+                    <wcs-mat-icon icon="info" style={{ fontSize: '11px' }}></wcs-mat-icon>
+                    Arrivée à l'heure
+                  </wcs-badge>
+                )}
                 {types.includes('arret_supprime')       && <wcs-badge className="wcs-danger parcours-stop-badge">Supprimé</wcs-badge>}
                 {types.includes('arret_prolonge')       && <wcs-badge className="wcs-info parcours-stop-badge">+{arret.arret_prolonge_minutes} min</wcs-badge>}
                 {types.includes('modification_parcours') && (
diff --git a/src/pages/quais/AttributionQuais.css b/src/pages/quais/AttributionQuais.css
index df611ce..1dde2a5 100644
--- a/src/pages/quais/AttributionQuais.css
+++ b/src/pages/quais/AttributionQuais.css
@@ -643,3 +643,55 @@
     overflow-x: auto;
   }
 }
+
+/* Dark Mode */
+body.dark-mode .quais-sidebar,
+[data-theme="dark"] .quais-sidebar {
+  background: #111a28;
+  border-color: #243247;
+}
+
+body.dark-mode .quais-sidebar-header,
+[data-theme="dark"] .quais-sidebar-header {
+  background: #0e1726;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .quais-sidebar-header h2,
+[data-theme="dark"] .quais-sidebar-header h2 {
+  color: #f8fafc;
+}
+
+body.dark-mode .quais-gare-nom,
+[data-theme="dark"] .quais-gare-nom {
+  color: #f1f5f9;
+}
+
+body.dark-mode .quais-gare-item:hover,
+[data-theme="dark"] .quais-gare-item:hover {
+  background: #1e293b;
+}
+
+body.dark-mode .quais-gare-item.selected,
+[data-theme="dark"] .quais-gare-item.selected {
+  background: #0d2744;
+}
+
+body.dark-mode .quais-main,
+body.dark-mode .quais-main-header,
+body.dark-mode .quais-day-selector,
+[data-theme="dark"] .quais-main,
+[data-theme="dark"] .quais-main-header,
+[data-theme="dark"] .quais-day-selector {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .quais-horaire-card,
+[data-theme="dark"] .quais-horaire-card {
+  background: #111a28;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
diff --git a/src/pages/systeme-maj/SystemeMaj.css b/src/pages/systeme-maj/SystemeMaj.css
index 6ebdab2..1f264b2 100644
--- a/src/pages/systeme-maj/SystemeMaj.css
+++ b/src/pages/systeme-maj/SystemeMaj.css
@@ -114,27 +114,66 @@
 }
 
 /* Dark mode adjustments */
-body.dark-mode .maj-header {
-  border-bottom-color: #333;
+body.dark-mode .maj-content,
+[data-theme="dark"] .maj-content {
+  background: transparent;
 }
 
-body.dark-mode .maj-title h3 {
-  color: #e0e0e0;
+body.dark-mode .maj-card,
+[data-theme="dark"] .maj-card {
+  background: #151f30;
+  border: 1px solid #243247;
+  color: #f8fafc;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+  border-radius: 12px;
+  padding: 20px;
 }
 
-body.dark-mode .alert-new-version {
-  background: #451a03;
+body.dark-mode .maj-header,
+[data-theme="dark"] .maj-header {
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .maj-title h3,
+[data-theme="dark"] .maj-title h3 {
+  color: #f8fafc;
+}
+
+body.dark-mode .maj-actions p,
+[data-theme="dark"] .maj-actions p {
+  color: #94a3b8;
+}
+
+body.dark-mode .alert-new-version,
+[data-theme="dark"] .alert-new-version {
+  background: rgba(245, 158, 11, 0.12);
   border-color: #f59e0b;
 }
 
-body.dark-mode .alert-new-version strong {
+body.dark-mode .alert-new-version strong,
+[data-theme="dark"] .alert-new-version strong {
   color: #fde68a;
 }
 
-body.dark-mode .alert-new-version p {
+body.dark-mode .alert-new-version p,
+[data-theme="dark"] .alert-new-version p {
   color: #fcd34d;
 }
 
-body.dark-mode .progress-text {
+body.dark-mode .progress-text,
+[data-theme="dark"] .progress-text {
   color: #38bdf8;
 }
+
+@media (max-width: 600px) {
+  .maj-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .alert-new-version {
+    flex-direction: column;
+  }
+}
+
diff --git a/src/pages/tarifs/Tarifs.css b/src/pages/tarifs/Tarifs.css
index 7636175..fc275d9 100644
--- a/src/pages/tarifs/Tarifs.css
+++ b/src/pages/tarifs/Tarifs.css
@@ -273,4 +273,140 @@
   font-size: 0.9rem;
   color: #12324e;
   margin-bottom: 10px;
+}
+
+/* ==========================================================================
+   DARK MODE
+   ========================================================================== */
+body.dark-mode .tarifs-page,
+[data-theme="dark"] .tarifs-page {
+  background: #0b111e;
+}
+
+body.dark-mode .tarifs-page-header,
+[data-theme="dark"] .tarifs-page-header {
+  background: linear-gradient(140deg, #151f30 0%, #1a2a42 60%, #203554 100%);
+  border: 1px solid #243247;
+  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4);
+}
+
+body.dark-mode .tarifs-main-card,
+[data-theme="dark"] .tarifs-main-card {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .tarif-card,
+[data-theme="dark"] .tarif-card {
+  background: #151f30;
+  border-color: #243247;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+}
+
+body.dark-mode .tarif-title h4,
+[data-theme="dark"] .tarif-title h4 {
+  color: #f8fafc;
+}
+
+body.dark-mode .tarif-description,
+[data-theme="dark"] .tarif-description {
+  color: #94a3b8;
+}
+
+body.dark-mode .meta-item,
+[data-theme="dark"] .meta-item {
+  background: #0b111e;
+  border-color: #243247;
+}
+
+body.dark-mode .meta-label,
+[data-theme="dark"] .meta-label {
+  color: #94a3b8;
+}
+
+body.dark-mode .meta-value,
+[data-theme="dark"] .meta-value {
+  color: #f8fafc;
+}
+
+body.dark-mode .region-chip,
+[data-theme="dark"] .region-chip {
+  background: rgba(0, 136, 206, 0.15);
+  color: #38bdf8;
+  border: 1px solid rgba(0, 136, 206, 0.3);
+}
+
+body.dark-mode .tarif-tab-button,
+[data-theme="dark"] .tarif-tab-button {
+  background: #0b111e;
+  border-color: #243247;
+  color: #94a3b8;
+}
+
+body.dark-mode .tarif-tab-button.active,
+[data-theme="dark"] .tarif-tab-button.active {
+  background: #0088ce;
+  border-color: #0088ce;
+  color: #ffffff;
+}
+
+body.dark-mode .tarif-details-card,
+[data-theme="dark"] .tarif-details-card {
+  background: #0b111e;
+  border-color: #243247;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .tarif-details-section h4,
+[data-theme="dark"] .tarif-details-section h4 {
+  color: #f8fafc;
+}
+
+body.dark-mode .empty-state-modern,
+[data-theme="dark"] .empty-state-modern {
+  background: #0b111e;
+  border-color: #243247;
+}
+
+body.dark-mode .empty-state-modern h3,
+[data-theme="dark"] .empty-state-modern h3 {
+  color: #f8fafc;
+}
+
+body.dark-mode .empty-state-modern p,
+[data-theme="dark"] .empty-state-modern p {
+  color: #94a3b8;
+}
+
+body.dark-mode .tarifs-state-block,
+[data-theme="dark"] .tarifs-state-block {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .tarif-add-button,
+[data-theme="dark"] .tarif-add-button {
+  background: #151f30;
+  border-color: #243247;
+  color: #38bdf8;
+}
+
+body.dark-mode .tarif-add-button:hover,
+[data-theme="dark"] .tarif-add-button:hover {
+  background: #1a2a42;
+}
+
+body.dark-mode .form-card input,
+body.dark-mode .form-card textarea,
+[data-theme="dark"] .form-card input,
+[data-theme="dark"] .form-card textarea {
+  background: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .tarif-checkbox,
+[data-theme="dark"] .tarif-checkbox {
+  color: #f8fafc;
 }
\ No newline at end of file
diff --git a/src/pages/travaux/CreerTravaux.js b/src/pages/travaux/CreerTravaux.js
index 9ee421f..6ffb625 100644
--- a/src/pages/travaux/CreerTravaux.js
+++ b/src/pages/travaux/CreerTravaux.js
@@ -8,13 +8,13 @@ import './Travaux.css';
 import RichTextEditor from '../gares/RichTextEditor';
 
 const JOURS_SEMAINE = [
-  { value: 'lundi', label: 'Lundi' },
-  { value: 'mardi', label: 'Mardi' },
-  { value: 'mercredi', label: 'Mercredi' },
-  { value: 'jeudi', label: 'Jeudi' },
-  { value: 'vendredi', label: 'Vendredi' },
-  { value: 'samedi', label: 'Samedi' },
-  { value: 'dimanche', label: 'Dimanche' }
+  { value: 'lundi', label: 'Lundi', short: 'Lun' },
+  { value: 'mardi', label: 'Mardi', short: 'Mar' },
+  { value: 'mercredi', label: 'Mercredi', short: 'Mer' },
+  { value: 'jeudi', label: 'Jeudi', short: 'Jeu' },
+  { value: 'vendredi', label: 'Vendredi', short: 'Ven' },
+  { value: 'samedi', label: 'Samedi', short: 'Sam' },
+  { value: 'dimanche', label: 'Dimanche', short: 'Dim' }
 ];
 
 export default function CreerTravaux() {
@@ -25,9 +25,9 @@ export default function CreerTravaux() {
   const [description, setDescription] = useState('');
   const [dateDebut, setDateDebut] = useState('');
   const [dateFin, setDateFin] = useState('');
-  const [joursTravaux, setJoursTravaux] = useState([]);
-  const [heureDebut, setHeureDebut] = useState('');
-  const [heureFin, setHeureFin] = useState('');
+  const [joursTravaux, setJoursTravaux] = useState(['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche']);
+  const [heureDebut, setHeureDebut] = useState('22:00');
+  const [heureFin, setHeureFin] = useState('06:00');
   const [actif, setActif] = useState(true);
 
   // Substitutions
@@ -96,21 +96,33 @@ export default function CreerTravaux() {
     }
   };
 
+  const selectAllDays = () => {
+    setJoursTravaux(JOURS_SEMAINE.map(j => j.value));
+  };
+
+  const selectWeekdays = () => {
+    setJoursTravaux(['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi']);
+  };
+
+  const selectWeekend = () => {
+    setJoursTravaux(['samedi', 'dimanche']);
+  };
+
   const formatHeure = (heure) => heure ? heure.substring(0, 5) : '—';
 
   const navigate = (path) => { window.location.href = path; };
 
   const handleCreate = async () => {
     if (!canCreateTravaux) {
-      alert('Vous n\'avez pas les droits pour créer des travaux.');
+      alert("Vous n'avez pas les droits pour créer des travaux.");
       return;
     }
     if (!titre.trim() || !dateDebut || !dateFin || joursTravaux.length === 0 || !heureDebut || !heureFin) {
-      alert('Veuillez remplir tous les champs obligatoires');
+      alert('Veuillez remplir tous les champs obligatoires (*)');
       return;
     }
     if (new Date(dateFin) < new Date(dateDebut)) {
-      alert('La date de fin doit être postérieure à la date de début');
+      alert('La date de fin doit être postérieure ou égale à la date de début.');
       return;
     }
 
@@ -134,171 +146,348 @@ export default function CreerTravaux() {
       const { error } = await createTravaux(payload, substitutionsIds);
 
       if (error) {
-        alert('Erreur lors de la création des travaux');
+        alert('Erreur lors de la création des travaux : ' + (error.message || 'Erreur'));
       } else {
         navigate('/travaux');
       }
     } catch (err) {
-      alert('Une erreur inattendue s\'est produite');
+      alert("Une erreur inattendue s'est produite");
     } finally {
       setSaving(false);
     }
   };
 
   return (
-    <div className="sncf-groupe panel-layout">
-      <div className="panel-nav"><NavPanel /></div>
-      <div className="panel-content travaux-form-page-content">
+    <div className="sncf-groupe travaux-page-root">
+      <div className="panel-layout">
+        <div className="panel-nav">
+          <NavPanel />
+        </div>
         
-        <header className="travaux-page-header" style={{ borderBottom: 'none', padding: '0 0 30px 0', background: 'transparent' }}>
-          <div>
-            <p className="travaux-page-kicker">Création</p>
-            <h1>Créer des travaux</h1>
-            <p className="travaux-page-description">Planifiez de nouveaux travaux et leurs substitutions.</p>
-          </div>
-          <wcs-button className="wcs-secondary" onClick={() => navigate('/travaux')}>
-            <wcs-mat-icon icon="close"></wcs-mat-icon> Annuler
-          </wcs-button>
-        </header>
-
-        <div className="travaux-glass-card">
-          <h2 className="travaux-section-title"><wcs-mat-icon icon="info"></wcs-mat-icon> Informations Générales</h2>
-          <p className="travaux-section-subtitle">Saisissez un titre clair et une description détaillée pour ces travaux.</p>
-          
-          <div className="premium-input-group">
-            <label className="premium-label">Titre des travaux *</label>
-            <input type="text" className="premium-input" placeholder="Ex: Maintenance des voies Paris-Lyon" value={titre} onChange={(e) => setTitre(e.target.value)} />
-          </div>
-          
-          <div className="premium-input-group">
-            <label className="premium-label">Description détaillée</label>
-            <RichTextEditor value={description} onChange={setDescription} placeholder="Contexte opérationnel, impacts prévus..." />
-          </div>
-
-          <div className="premium-input-group">
-            <label className="premium-label">Ligne ferroviaire associée</label>
-            <select 
-              className="premium-input" 
-              value={selectedLigneId} 
-              onChange={(e) => setSelectedLigneId(e.target.value)}
-              disabled={loadingLignes}
-            >
-              <option value="">Sélectionner une ligne (optionnel)</option>
-              {lignes.map(l => (
-                <option key={l.id} value={l.id}>{l.nom}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div className="travaux-glass-card">
-          <h2 className="travaux-section-title"><wcs-mat-icon icon="event"></wcs-mat-icon> Planification</h2>
-          <p className="travaux-section-subtitle">Définissez la période, les jours concernés et la plage horaire d'intervention.</p>
-
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}>
-            <div className="premium-input-group">
-              <label className="premium-label">Date de début *</label>
-              <input type="date" className="premium-input" value={dateDebut} onChange={(e) => setDateDebut(e.target.value)} />
+        <div className="panel-content travaux-form-page-content">
+          {/* Header Banner */}
+          <header className="travaux-form-header-modern">
+            <div className="form-header-main">
+              <button type="button" className="btn-back-link" onClick={() => navigate('/travaux')}>
+                <wcs-mat-icon icon="arrow_back"></wcs-mat-icon>
+                <span>Retour aux travaux</span>
+              </button>
+              <div className="form-title-group">
+                <span className="travaux-kicker-pill">
+                  <wcs-mat-icon icon="add_circle"></wcs-mat-icon>
+                  Nouveau Chantier
+                </span>
+                <h1>Déclarer des travaux sur le réseau</h1>
+                <p>Planifiez une coupure, des restrictions de circulation et les substitutions associées.</p>
+              </div>
             </div>
-            <div className="premium-input-group">
-              <label className="premium-label">Date de fin *</label>
-              <input type="date" className="premium-input" value={dateFin} onChange={(e) => setDateFin(e.target.value)} />
-            </div>
-            <div className="premium-input-group">
-              <label className="premium-label">Heure de début *</label>
-              <input type="time" className="premium-input" value={heureDebut} onChange={(e) => setHeureDebut(e.target.value)} />
-            </div>
-            <div className="premium-input-group">
-              <label className="premium-label">Heure de fin *</label>
-              <input type="time" className="premium-input" value={heureFin} onChange={(e) => setHeureFin(e.target.value)} />
-            </div>
-          </div>
 
-          <div className="premium-input-group" style={{ marginTop: '10px' }}>
-            <label className="premium-label">Jours de travaux *</label>
-            <div className="premium-checkbox-group">
-              {JOURS_SEMAINE.map((jour) => (
-                <label key={jour.value} className={`premium-checkbox-label ${joursTravaux.includes(jour.value) ? 'selected' : ''}`}>
-                  <input type="checkbox" checked={joursTravaux.includes(jour.value)} onChange={() => toggleJour(jour.value)} />
-                  {jour.label}
-                </label>
-              ))}
+            <div className="form-header-actions">
+              <wcs-button className="wcs-secondary" mode="stroked" onClick={() => navigate('/travaux')}>
+                Annuler
+              </wcs-button>
+              <wcs-button 
+                className="wcs-primary" 
+                onClick={handleCreate}
+                disabled={saving || !canCreateTravaux}
+              >
+                {saving ? (
+                  <>
+                    <wcs-spinner mode="border" style={{ width: '16px', height: '16px', marginRight: '6px' }}></wcs-spinner>
+                    <span>Enregistrement...</span>
+                  </>
+                ) : (
+                  <>
+                    <wcs-mat-icon icon="save" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                    <span>Créer le chantier</span>
+                  </>
+                )}
+              </wcs-button>
             </div>
-          </div>
-        </div>
+          </header>
 
-        <div className="travaux-glass-card">
-          <h2 className="travaux-section-title"><wcs-mat-icon icon="swap_horiz"></wcs-mat-icon> Substitutions (Optionnel)</h2>
-          <p className="travaux-section-subtitle">Gérez les trains ou cars de substitution associés à ces travaux.</p>
-
-          <label className={`premium-checkbox-label ${substitutionsActive ? 'selected' : ''}`} style={{ display: 'inline-flex', marginBottom: '20px' }}>
-            <input type="checkbox" checked={substitutionsActive} onChange={(e) => setSubstitutionsActive(e.target.checked)} />
-            Activer la recherche de substitutions
-          </label>
-
-          {substitutionsActive && (
-            <div>
-              <div className="premium-input-group" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <input type="text" className="premium-input" placeholder="Numéro de train, gare..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} onKeyPress={(e) => { if (e.key === 'Enter') handleSearchHoraires(); }} />
-                <wcs-button className="wcs-primary" onClick={handleSearchHoraires} style={{ flexShrink: 0, height: '46px' }}>Rechercher</wcs-button>
+          <div className="travaux-form-grid">
+            {/* Section 1 : Informations générales */}
+            <div className="travaux-glass-card">
+              <div className="section-title-wrap">
+                <div className="section-icon-box">
+                  <wcs-mat-icon icon="info"></wcs-mat-icon>
+                </div>
+                <div>
+                  <h2 className="travaux-section-title">Informations Générales</h2>
+                  <p className="travaux-section-subtitle">Définissez l'intitulé, la ligne concernée et les consignes d'exploitation.</p>
+                </div>
+              </div>
+              
+              <div className="premium-input-group">
+                <label className="premium-label">Titre des travaux *</label>
+                <input 
+                  type="text" 
+                  className="premium-input" 
+                  placeholder="Ex: Rénovation caténaire et voies Paris vers Lyon" 
+                  value={titre} 
+                  onChange={(e) => setTitre(e.target.value)} 
+                />
               </div>
 
-              {horairesSelectionnes.length > 0 && (
-                <div style={{ marginTop: '20px', background: '#eff6ff', padding: '15px', borderRadius: '10px', border: '1px solid #bfdbfe' }}>
-                  <h4 style={{ margin: '0 0 10px 0', color: '#1d4ed8' }}>{horairesSelectionnes.length} Substitution(s) Sélectionnée(s)</h4>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                    {horairesSelectionnes.map(h => (
-                      <div key={h.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fff', padding: '10px', borderRadius: '8px', border: '1px solid #dbeafe' }}>
-                        <div>
-                          <strong style={{ color: '#1e293b' }}>{h.numero_train}</strong> <span style={{ color: '#64748b', fontSize: '0.9rem' }}>— {h.gare_depart_nom} → {h.gare_arrivee_nom}</span>
-                        </div>
-                        <wcs-button className="wcs-danger wcs-small" onClick={() => toggleHoraireSelection(h)}><wcs-mat-icon icon="close"></wcs-mat-icon></wcs-button>
-                      </div>
-                    ))}
+              <div className="premium-input-group">
+                <label className="premium-label">Ligne ferroviaire associée</label>
+                <select 
+                  className="premium-input" 
+                  value={selectedLigneId} 
+                  onChange={(e) => setSelectedLigneId(e.target.value)}
+                  disabled={loadingLignes}
+                >
+                  <option value="">Sélectionner une ligne (optionnel)</option>
+                  {lignes.map(l => (
+                    <option key={l.id} value={l.id}>{l.nom || l.numero || `Ligne ${l.id}`}</option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="premium-input-group">
+                <label className="premium-label">Description détaillée & Informations voyageurs</label>
+                <RichTextEditor 
+                  value={description} 
+                  onChange={setDescription} 
+                  placeholder="Détaillez les impacts prévus, motifs techniques, gares concernées..." 
+                />
+              </div>
+            </div>
+
+            {/* Section 2 : Planification & Calendrier */}
+            <div className="travaux-glass-card">
+              <div className="section-title-wrap">
+                <div className="section-icon-box">
+                  <wcs-mat-icon icon="calendar_month"></wcs-mat-icon>
+                </div>
+                <div>
+                  <h2 className="travaux-section-title">Planification & Horaires</h2>
+                  <p className="travaux-section-subtitle">Période de validité du chantier, jours impactés et créneaux journaliers.</p>
+                </div>
+              </div>
+
+              <div className="form-columns-2">
+                <div className="premium-input-group">
+                  <label className="premium-label">Date de début *</label>
+                  <input type="date" className="premium-input" value={dateDebut} onChange={(e) => setDateDebut(e.target.value)} />
+                </div>
+                <div className="premium-input-group">
+                  <label className="premium-label">Date de fin *</label>
+                  <input type="date" className="premium-input" value={dateFin} onChange={(e) => setDateFin(e.target.value)} />
+                </div>
+              </div>
+
+              <div className="form-columns-2">
+                <div className="premium-input-group">
+                  <label className="premium-label">Heure de début journalière *</label>
+                  <input type="time" className="premium-input" value={heureDebut} onChange={(e) => setHeureDebut(e.target.value)} />
+                </div>
+                <div className="premium-input-group">
+                  <label className="premium-label">Heure de fin journalière *</label>
+                  <input type="time" className="premium-input" value={heureFin} onChange={(e) => setHeureFin(e.target.value)} />
+                </div>
+              </div>
+
+              <div className="premium-input-group" style={{ marginTop: '12px' }}>
+                <div className="days-header-row">
+                  <label className="premium-label">Jours impactés dans la semaine *</label>
+                  <div className="days-shortcuts">
+                    <button type="button" className="btn-shortcut" onClick={selectAllDays}>Tous les jours</button>
+                    <button type="button" className="btn-shortcut" onClick={selectWeekdays}>Semaine</button>
+                    <button type="button" className="btn-shortcut" onClick={selectWeekend}>Week-end</button>
                   </div>
                 </div>
-              )}
 
-              {showResults && (
-                <div style={{ marginTop: '20px' }}>
-                  <h4 style={{ marginBottom: '10px', color: '#334155' }}>Résultats ({horairesDisponibles.length})</h4>
-                  {loadingHoraires ? (
-                    <div style={{ padding: '20px', textAlign: 'center' }}><wcs-spinner></wcs-spinner></div>
-                  ) : (
-                    <div style={{ maxHeight: '300px', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                      {horairesDisponibles.map(h => {
-                        const isSelected = horairesSelectionnes.some(hs => hs.id === h.id);
-                        return (
-                          <div key={h.id} onClick={() => toggleHoraireSelection(h)} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px', background: isSelected ? '#eff6ff' : '#f8fafc', border: `1px solid ${isSelected ? '#3b82f6' : '#e2e8f0'}`, borderRadius: '8px', cursor: 'pointer' }}>
-                            <div>
-                              <strong style={{ color: '#1e293b', marginRight: '8px' }}>{h.numero_train}</strong>
-                              {h.type_train && <span style={{ fontSize: '0.8rem', background: '#e2e8f0', padding: '2px 6px', borderRadius: '4px', marginRight: '8px' }}>{h.type_train}</span>}
-                              <span style={{ color: '#64748b', fontSize: '0.9rem' }}>{h.gare_depart_nom} ({formatHeure(h.heure_depart)}) → {h.gare_arrivee_nom} ({formatHeure(h.heure_arrivee)})</span>
+                <div className="premium-checkbox-group">
+                  {JOURS_SEMAINE.map((jour) => (
+                    <label key={jour.value} className={`premium-checkbox-label ${joursTravaux.includes(jour.value) ? 'selected' : ''}`}>
+                      <input type="checkbox" checked={joursTravaux.includes(jour.value)} onChange={() => toggleJour(jour.value)} />
+                      <span>{jour.label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Section 3 : Substitutions */}
+            <div className="travaux-glass-card">
+              <div className="section-title-wrap">
+                <div className="section-icon-box">
+                  <wcs-mat-icon icon="swap_horiz"></wcs-mat-icon>
+                </div>
+                <div>
+                  <h2 className="travaux-section-title">Plan de Transport de Substitution</h2>
+                  <p className="travaux-section-subtitle">Associez des cars ou trains spéciaux pour remplacer les circulations supprimées.</p>
+                </div>
+              </div>
+
+              <label className={`premium-toggle-switch ${substitutionsActive ? 'active' : ''}`}>
+                <input 
+                  type="checkbox" 
+                  checked={substitutionsActive} 
+                  onChange={(e) => setSubstitutionsActive(e.target.checked)} 
+                />
+                <span className="switch-slider"></span>
+                <span className="switch-text">
+                  <strong>Activer le plan de substitution pour ce chantier</strong>
+                  <small>Permet de relier des horaires de cars ou trains de substitution actifs</small>
+                </span>
+              </label>
+
+              {substitutionsActive && (
+                <div className="substitutions-module-body">
+                  <div className="substitutions-search-bar">
+                    <div className="search-input-wrap">
+                      <wcs-mat-icon icon="search" className="search-icon"></wcs-mat-icon>
+                      <input 
+                        type="text" 
+                        className="premium-input" 
+                        placeholder="Rechercher par numéro de train, gare de départ ou terminus..." 
+                        value={searchQuery} 
+                        onChange={(e) => setSearchQuery(e.target.value)} 
+                        onKeyDown={(e) => { if (e.key === 'Enter') handleSearchHoraires(); }} 
+                      />
+                    </div>
+                    <wcs-button 
+                      className="wcs-primary" 
+                      onClick={handleSearchHoraires}
+                      disabled={loadingHoraires}
+                    >
+                      <wcs-mat-icon icon="search" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                      <span>Rechercher</span>
+                    </wcs-button>
+                  </div>
+
+                  {/* Horaires sélectionnés */}
+                  {horairesSelectionnes.length > 0 && (
+                    <div className="selected-subs-container">
+                      <div className="selected-subs-header">
+                        <h4>
+                          <wcs-mat-icon icon="check_circle" style={{ color: '#0088ce', marginRight: '6px' }}></wcs-mat-icon>
+                          {horairesSelectionnes.length} circulation{horairesSelectionnes.length > 1 ? 's' : ''} de substitution sélectionnée{horairesSelectionnes.length > 1 ? 's' : ''}
+                        </h4>
+                      </div>
+                      <div className="selected-subs-list">
+                        {horairesSelectionnes.map(h => (
+                          <div key={h.id} className="selected-sub-card">
+                            <div className="sub-main-col">
+                              <div className="sub-num-badge">
+                                <wcs-mat-icon icon="directions_bus"></wcs-mat-icon>
+                                <strong>{h.numero_train || 'Train'}</strong>
+                                {h.type_train && <wcs-badge className="wcs-info" shape="round">{h.type_train}</wcs-badge>}
+                              </div>
+                              <div className="sub-route">
+                                <span>{h.gare_depart_nom} ({formatHeure(h.heure_depart)})</span>
+                                <wcs-mat-icon icon="arrow_forward" className="arrow-icon"></wcs-mat-icon>
+                                <span>{h.gare_arrivee_nom} ({formatHeure(h.heure_arrivee)})</span>
+                              </div>
                             </div>
-                            {isSelected && <wcs-mat-icon icon="check_circle" style={{ color: '#3b82f6' }}></wcs-mat-icon>}
+                            <button 
+                              type="button" 
+                              className="btn-remove-sub" 
+                              onClick={() => toggleHoraireSelection(h)}
+                              title="Retirer cette substitution"
+                            >
+                              <wcs-mat-icon icon="close"></wcs-mat-icon>
+                            </button>
                           </div>
-                        );
-                      })}
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Résultats de recherche */}
+                  {showResults && (
+                    <div className="search-results-section">
+                      <div className="search-results-header">
+                        <h4>Résultats disponibles ({horairesDisponibles.length})</h4>
+                        <span className="results-hint">Cliquez sur une circulation pour l'ajouter ou la retirer</span>
+                      </div>
+
+                      {loadingHoraires ? (
+                        <div className="search-loading-box">
+                          <wcs-spinner mode="border"></wcs-spinner>
+                          <p>Recherche des circulations en cours...</p>
+                        </div>
+                      ) : horairesDisponibles.length === 0 ? (
+                        <div className="search-empty-box">
+                          <p>Aucun horaire de substitution trouvé pour « {searchQuery} ».</p>
+                        </div>
+                      ) : (
+                        <div className="subs-results-list">
+                          {horairesDisponibles.map(h => {
+                            const isSelected = horairesSelectionnes.some(hs => hs.id === h.id);
+                            return (
+                              <div 
+                                key={h.id} 
+                                className={`sub-result-card ${isSelected ? 'is-selected' : ''}`}
+                                onClick={() => toggleHoraireSelection(h)}
+                              >
+                                <div className="result-info">
+                                  <div className="result-badge-row">
+                                    <strong>{h.numero_train}</strong>
+                                    {h.type_train && <wcs-badge className="wcs-info" shape="round">{h.type_train}</wcs-badge>}
+                                    {h.ligne_nom && <wcs-badge className="wcs-secondary" shape="round">{h.ligne_nom}</wcs-badge>}
+                                  </div>
+                                  <div className="result-route-row">
+                                    <span>{h.gare_depart_nom} ({formatHeure(h.heure_depart)})</span>
+                                    <wcs-mat-icon icon="arrow_forward" className="arrow-icon"></wcs-mat-icon>
+                                    <span>{h.gare_arrivee_nom} ({formatHeure(h.heure_arrivee)})</span>
+                                  </div>
+                                </div>
+                                <div className="result-checkbox">
+                                  <wcs-mat-icon icon={isSelected ? "check_box" : "check_box_outline_blank"} className={isSelected ? "icon-checked" : ""}></wcs-mat-icon>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
               )}
             </div>
-          )}
+          </div>
+
+          {/* Bottom Action Bar */}
+          <div className="form-sticky-bottom-bar">
+            <label className={`premium-checkbox-label ${actif ? 'selected' : ''}`}>
+              <input type="checkbox" checked={actif} onChange={(e) => setActif(e.target.checked)} />
+              <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <wcs-badge className={actif ? "wcs-success" : "wcs-secondary"} shape="round">
+                  <wcs-mat-icon icon={actif ? "visibility" : "visibility_off"} style={{ fontSize: '13px', marginRight: '4px' }}></wcs-mat-icon>
+                  {actif ? 'Chantier Actif et visible' : 'Chantier Inactif / Masqué'}
+                </wcs-badge>
+              </span>
+            </label>
+
+            <div className="bottom-bar-btns">
+              <wcs-button className="wcs-secondary" mode="stroked" onClick={() => navigate('/travaux')}>
+                Annuler
+              </wcs-button>
+              <wcs-button 
+                className="wcs-primary" 
+                onClick={handleCreate}
+                disabled={saving || !canCreateTravaux}
+              >
+                {saving ? (
+                  <>
+                    <wcs-spinner mode="border" style={{ width: '16px', height: '16px', marginRight: '6px' }}></wcs-spinner>
+                    <span>Enregistrement...</span>
+                  </>
+                ) : (
+                  <>
+                    <wcs-mat-icon icon="check" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                    <span>Enregistrer les travaux</span>
+                  </>
+                )}
+              </wcs-button>
+            </div>
+          </div>
+
         </div>
-
-        <div className="premium-actions">
-          <label className={`premium-checkbox-label ${actif ? 'selected' : ''}`} style={{ marginRight: 'auto' }}>
-            <input type="checkbox" checked={actif} onChange={(e) => setActif(e.target.checked)} />
-            {actif ? '✔ Travaux Actifs' : 'Travaux Inactifs'}
-          </label>
-
-          <wcs-button className="wcs-secondary" onClick={() => navigate('/travaux')}>Annuler</wcs-button>
-          <wcs-button className="wcs-primary" onClick={handleCreate} disabled={saving || !canCreateTravaux}>
-            {saving ? <wcs-spinner></wcs-spinner> : 'Enregistrer les travaux'}
-          </wcs-button>
-        </div>
-
       </div>
     </div>
   );
diff --git a/src/pages/travaux/ModifierTravaux.js b/src/pages/travaux/ModifierTravaux.js
index acef7b0..3ab04b2 100644
--- a/src/pages/travaux/ModifierTravaux.js
+++ b/src/pages/travaux/ModifierTravaux.js
@@ -8,13 +8,13 @@ import './Travaux.css';
 import RichTextEditor from '../gares/RichTextEditor';
 
 const JOURS_SEMAINE = [
-  { value: 'lundi', label: 'Lundi' },
-  { value: 'mardi', label: 'Mardi' },
-  { value: 'mercredi', label: 'Mercredi' },
-  { value: 'jeudi', label: 'Jeudi' },
-  { value: 'vendredi', label: 'Vendredi' },
-  { value: 'samedi', label: 'Samedi' },
-  { value: 'dimanche', label: 'Dimanche' }
+  { value: 'lundi', label: 'Lundi', short: 'Lun' },
+  { value: 'mardi', label: 'Mardi', short: 'Mar' },
+  { value: 'mercredi', label: 'Mercredi', short: 'Mer' },
+  { value: 'jeudi', label: 'Jeudi', short: 'Jeu' },
+  { value: 'vendredi', label: 'Vendredi', short: 'Ven' },
+  { value: 'samedi', label: 'Samedi', short: 'Sam' },
+  { value: 'dimanche', label: 'Dimanche', short: 'Dim' }
 ];
 
 export default function ModifierTravaux() {
@@ -141,23 +141,36 @@ export default function ModifierTravaux() {
     }
   };
 
-  const formatHeure = (heure) => (heure ? heure.substring(0,5) : '—');
+  const selectAllDays = () => {
+    setJoursTravaux(JOURS_SEMAINE.map(j => j.value));
+  };
+
+  const selectWeekdays = () => {
+    setJoursTravaux(['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi']);
+  };
+
+  const selectWeekend = () => {
+    setJoursTravaux(['samedi', 'dimanche']);
+  };
+
+  const formatHeure = (heure) => (heure ? heure.substring(0, 5) : '—');
 
   const navigate = (path) => { window.location.href = path; };
 
   const handleUpdate = async () => {
     if (!canUpdateTravaux) {
-      alert('Vous n\'avez pas les droits pour modifier des travaux.');
+      alert("Vous n'avez pas les droits pour modifier des travaux.");
       return;
     }
     if (!titre.trim() || !dateDebut || !dateFin || joursTravaux.length === 0 || !heureDebut || !heureFin) {
-      alert('Veuillez remplir tous les champs obligatoires');
+      alert('Veuillez remplir tous les champs obligatoires (*)');
       return;
     }
     if (new Date(dateFin) < new Date(dateDebut)) {
-      alert('La date de fin doit être postérieure à la date de début');
+      alert('La date de fin doit être postérieure ou égale à la date de début.');
       return;
     }
+
     setSaving(true);
     try {
       const payload = {
@@ -177,12 +190,12 @@ export default function ModifierTravaux() {
       const subsIds = substitutionsActive ? horairesSelectionnes.map(h => h.id) : [];
       const { error } = await updateTravaux(id, payload, subsIds);
       if (error) {
-        alert('Erreur lors de la mise à jour');
+        alert('Erreur lors de la mise à jour : ' + (error.message || 'Erreur'));
       } else {
         navigate('/travaux');
       }
     } catch (err) {
-      alert('Erreur inattendue');
+      alert("Une erreur inattendue s'est produite lors de la mise à jour.");
     } finally {
       setSaving(false);
     }
@@ -190,169 +203,349 @@ export default function ModifierTravaux() {
 
   if (loading) {
     return (
-      <div className="sncf-groupe panel-layout">
-        <div className="panel-nav"><NavPanel /></div>
-        <div className="panel-content travaux-form-page-content" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-          <wcs-spinner mode="border" />
+      <div className="sncf-groupe travaux-page-root">
+        <div className="panel-layout">
+          <div className="panel-nav"><NavPanel /></div>
+          <div className="panel-content travaux-form-page-content" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '60vh' }}>
+            <wcs-spinner mode="border" style={{ width: '48px', height: '48px', color: '#0088ce' }}></wcs-spinner>
+            <p style={{ marginTop: '16px', color: '#64748b', fontWeight: 600 }}>Chargement des données du chantier...</p>
+          </div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="sncf-groupe panel-layout">
-      <div className="panel-nav"><NavPanel /></div>
-      <div className="panel-content travaux-form-page-content">
+    <div className="sncf-groupe travaux-page-root">
+      <div className="panel-layout">
+        <div className="panel-nav">
+          <NavPanel />
+        </div>
         
-        <header className="travaux-page-header" style={{ borderBottom: 'none', padding: '0 0 30px 0', background: 'transparent' }}>
-          <div>
-            <p className="travaux-page-kicker">Modification</p>
-            <h1>Modifier les travaux</h1>
-            <p className="travaux-page-description">Mettez à jour les informations et les substitutions.</p>
-          </div>
-          <wcs-button className="wcs-secondary" onClick={() => navigate('/travaux')}>
-            <wcs-mat-icon icon="close"></wcs-mat-icon> Annuler
-          </wcs-button>
-        </header>
-
-        <div className="travaux-glass-card">
-          <h2 className="travaux-section-title"><wcs-mat-icon icon="info"></wcs-mat-icon> Informations Générales</h2>
-          <p className="travaux-section-subtitle">Mettez à jour le titre et la description détaillée pour ces travaux.</p>
-          
-          <div className="premium-input-group">
-            <label className="premium-label">Titre des travaux *</label>
-            <input type="text" className="premium-input" placeholder="Ex: Maintenance des voies Paris-Lyon" value={titre} onChange={(e) => setTitre(e.target.value)} />
-          </div>
-          
-          <div className="premium-input-group">
-            <label className="premium-label">Description détaillée</label>
-            <RichTextEditor value={description} onChange={setDescription} placeholder="Contexte opérationnel, impacts prévus..." />
-          </div>
-
-          <div className="premium-input-group">
-            <label className="premium-label">Ligne ferroviaire associée</label>
-            <select 
-              className="premium-input" 
-              value={selectedLigneId} 
-              onChange={(e) => setSelectedLigneId(e.target.value)}
-              disabled={loadingLignes}
-            >
-              <option value="">Sélectionner une ligne (optionnel)</option>
-              {lignes.map(l => (
-                <option key={l.id} value={l.id}>{l.nom}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div className="travaux-glass-card">
-          <h2 className="travaux-section-title"><wcs-mat-icon icon="event"></wcs-mat-icon> Planification</h2>
-          <p className="travaux-section-subtitle">Définissez la période, les jours concernés et la plage horaire d'intervention.</p>
-
-          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px' }}>
-            <div className="premium-input-group">
-              <label className="premium-label">Date de début *</label>
-              <input type="date" className="premium-input" value={dateDebut} onChange={(e) => setDateDebut(e.target.value)} />
+        <div className="panel-content travaux-form-page-content">
+          {/* Header Banner */}
+          <header className="travaux-form-header-modern">
+            <div className="form-header-main">
+              <button type="button" className="btn-back-link" onClick={() => navigate('/travaux')}>
+                <wcs-mat-icon icon="arrow_back"></wcs-mat-icon>
+                <span>Retour aux travaux</span>
+              </button>
+              <div className="form-title-group">
+                <span className="travaux-kicker-pill">
+                  <wcs-mat-icon icon="edit"></wcs-mat-icon>
+                  Modification Chantier
+                </span>
+                <h1>Modifier les travaux : {titre || 'Chantier'}</h1>
+                <p>Mettez à jour les caractéristiques, le calendrier et les substitutions associées.</p>
+              </div>
             </div>
-            <div className="premium-input-group">
-              <label className="premium-label">Date de fin *</label>
-              <input type="date" className="premium-input" value={dateFin} onChange={(e) => setDateFin(e.target.value)} />
-            </div>
-            <div className="premium-input-group">
-              <label className="premium-label">Heure de début *</label>
-              <input type="time" className="premium-input" value={heureDebut} onChange={(e) => setHeureDebut(e.target.value)} />
-            </div>
-            <div className="premium-input-group">
-              <label className="premium-label">Heure de fin *</label>
-              <input type="time" className="premium-input" value={heureFin} onChange={(e) => setHeureFin(e.target.value)} />
-            </div>
-          </div>
 
-          <div className="premium-input-group" style={{ marginTop: '10px' }}>
-            <label className="premium-label">Jours de travaux *</label>
-            <div className="premium-checkbox-group">
-              {JOURS_SEMAINE.map((jour) => (
-                <label key={jour.value} className={`premium-checkbox-label ${joursTravaux.includes(jour.value) ? 'selected' : ''}`}>
-                  <input type="checkbox" checked={joursTravaux.includes(jour.value)} onChange={() => toggleJour(jour.value)} />
-                  {jour.label}
-                </label>
-              ))}
+            <div className="form-header-actions">
+              <wcs-button className="wcs-secondary" mode="stroked" onClick={() => navigate('/travaux')}>
+                Annuler
+              </wcs-button>
+              <wcs-button 
+                className="wcs-primary" 
+                onClick={handleUpdate}
+                disabled={saving || !canUpdateTravaux}
+              >
+                {saving ? (
+                  <>
+                    <wcs-spinner mode="border" style={{ width: '16px', height: '16px', marginRight: '6px' }}></wcs-spinner>
+                    <span>Enregistrement...</span>
+                  </>
+                ) : (
+                  <>
+                    <wcs-mat-icon icon="save" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                    <span>Enregistrer les modifications</span>
+                  </>
+                )}
+              </wcs-button>
             </div>
-          </div>
-        </div>
+          </header>
 
-        <div className="travaux-glass-card">
-          <h2 className="travaux-section-title"><wcs-mat-icon icon="swap_horiz"></wcs-mat-icon> Substitutions (Optionnel)</h2>
-          <p className="travaux-section-subtitle">Gérez les trains ou cars de substitution associés à ces travaux.</p>
-
-          <label className={`premium-checkbox-label ${substitutionsActive ? 'selected' : ''}`} style={{ display: 'inline-flex', marginBottom: '20px' }}>
-            <input type="checkbox" checked={substitutionsActive} onChange={(e) => setSubstitutionsActive(e.target.checked)} />
-            Activer la recherche de substitutions
-          </label>
-
-          {substitutionsActive && (
-            <div>
-              <div className="premium-input-group" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-                <input type="text" className="premium-input" placeholder="Numéro de train, gare..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} onKeyPress={(e) => { if (e.key === 'Enter') handleSearchHoraires(); }} />
-                <wcs-button className="wcs-primary" onClick={handleSearchHoraires} style={{ flexShrink: 0, height: '46px' }}>Rechercher</wcs-button>
+          <div className="travaux-form-grid">
+            {/* Section 1 : Informations générales */}
+            <div className="travaux-glass-card">
+              <div className="section-title-wrap">
+                <div className="section-icon-box">
+                  <wcs-mat-icon icon="info"></wcs-mat-icon>
+                </div>
+                <div>
+                  <h2 className="travaux-section-title">Informations Générales</h2>
+                  <p className="travaux-section-subtitle">Définissez l'intitulé, la ligne concernée et les consignes d'exploitation.</p>
+                </div>
+              </div>
+              
+              <div className="premium-input-group">
+                <label className="premium-label">Titre des travaux *</label>
+                <input 
+                  type="text" 
+                  className="premium-input" 
+                  placeholder="Ex: Rénovation caténaire et voies Paris vers Lyon" 
+                  value={titre} 
+                  onChange={(e) => setTitre(e.target.value)} 
+                />
               </div>
 
-              {horairesSelectionnes.length > 0 && (
-                <div style={{ marginTop: '20px', background: '#eff6ff', padding: '15px', borderRadius: '10px', border: '1px solid #bfdbfe' }}>
-                  <h4 style={{ margin: '0 0 10px 0', color: '#1d4ed8' }}>{horairesSelectionnes.length} Substitution(s) Sélectionnée(s)</h4>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                    {horairesSelectionnes.map(h => (
-                      <div key={h.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fff', padding: '10px', borderRadius: '8px', border: '1px solid #dbeafe' }}>
-                        <div>
-                          <strong style={{ color: '#1e293b' }}>{h.numero_train}</strong> <span style={{ color: '#64748b', fontSize: '0.9rem' }}>— {h.gare_depart_nom} → {h.gare_arrivee_nom}</span>
-                        </div>
-                        <wcs-button className="wcs-danger wcs-small" onClick={() => toggleHoraireSelection(h)}><wcs-mat-icon icon="close"></wcs-mat-icon></wcs-button>
-                      </div>
-                    ))}
+              <div className="premium-input-group">
+                <label className="premium-label">Ligne ferroviaire associée</label>
+                <select 
+                  className="premium-input" 
+                  value={selectedLigneId} 
+                  onChange={(e) => setSelectedLigneId(e.target.value)}
+                  disabled={loadingLignes}
+                >
+                  <option value="">Sélectionner une ligne (optionnel)</option>
+                  {lignes.map(l => (
+                    <option key={l.id} value={l.id}>{l.nom || l.numero || `Ligne ${l.id}`}</option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="premium-input-group">
+                <label className="premium-label">Description détaillée & Informations voyageurs</label>
+                <RichTextEditor 
+                  value={description} 
+                  onChange={setDescription} 
+                  placeholder="Détaillez les impacts prévus, motifs techniques, gares concernées..." 
+                />
+              </div>
+            </div>
+
+            {/* Section 2 : Planification & Calendrier */}
+            <div className="travaux-glass-card">
+              <div className="section-title-wrap">
+                <div className="section-icon-box">
+                  <wcs-mat-icon icon="calendar_month"></wcs-mat-icon>
+                </div>
+                <div>
+                  <h2 className="travaux-section-title">Planification & Horaires</h2>
+                  <p className="travaux-section-subtitle">Période de validité du chantier, jours impactés et créneaux journaliers.</p>
+                </div>
+              </div>
+
+              <div className="form-columns-2">
+                <div className="premium-input-group">
+                  <label className="premium-label">Date de début *</label>
+                  <input type="date" className="premium-input" value={dateDebut} onChange={(e) => setDateDebut(e.target.value)} />
+                </div>
+                <div className="premium-input-group">
+                  <label className="premium-label">Date de fin *</label>
+                  <input type="date" className="premium-input" value={dateFin} onChange={(e) => setDateFin(e.target.value)} />
+                </div>
+              </div>
+
+              <div className="form-columns-2">
+                <div className="premium-input-group">
+                  <label className="premium-label">Heure de début journalière *</label>
+                  <input type="time" className="premium-input" value={heureDebut} onChange={(e) => setHeureDebut(e.target.value)} />
+                </div>
+                <div className="premium-input-group">
+                  <label className="premium-label">Heure de fin journalière *</label>
+                  <input type="time" className="premium-input" value={heureFin} onChange={(e) => setHeureFin(e.target.value)} />
+                </div>
+              </div>
+
+              <div className="premium-input-group" style={{ marginTop: '12px' }}>
+                <div className="days-header-row">
+                  <label className="premium-label">Jours impactés dans la semaine *</label>
+                  <div className="days-shortcuts">
+                    <button type="button" className="btn-shortcut" onClick={selectAllDays}>Tous les jours</button>
+                    <button type="button" className="btn-shortcut" onClick={selectWeekdays}>Semaine</button>
+                    <button type="button" className="btn-shortcut" onClick={selectWeekend}>Week-end</button>
                   </div>
                 </div>
-              )}
 
-              {showResults && (
-                <div style={{ marginTop: '20px' }}>
-                  <h4 style={{ marginBottom: '10px', color: '#334155' }}>Résultats ({horairesDisponibles.length})</h4>
-                  {loadingHoraires ? (
-                    <div style={{ padding: '20px', textAlign: 'center' }}><wcs-spinner></wcs-spinner></div>
-                  ) : (
-                    <div style={{ maxHeight: '300px', overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: '8px' }}>
-                      {horairesDisponibles.map(h => {
-                        const isSelected = horairesSelectionnes.some(hs => hs.id === h.id);
-                        return (
-                          <div key={h.id} onClick={() => toggleHoraireSelection(h)} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px', background: isSelected ? '#eff6ff' : '#f8fafc', border: `1px solid ${isSelected ? '#3b82f6' : '#e2e8f0'}`, borderRadius: '8px', cursor: 'pointer' }}>
-                            <div>
-                              <strong style={{ color: '#1e293b', marginRight: '8px' }}>{h.numero_train}</strong>
-                              {h.type_train && <span style={{ fontSize: '0.8rem', background: '#e2e8f0', padding: '2px 6px', borderRadius: '4px', marginRight: '8px' }}>{h.type_train}</span>}
-                              <span style={{ color: '#64748b', fontSize: '0.9rem' }}>{h.gare_depart_nom} ({formatHeure(h.heure_depart)}) → {h.gare_arrivee_nom} ({formatHeure(h.heure_arrivee)})</span>
+                <div className="premium-checkbox-group">
+                  {JOURS_SEMAINE.map((jour) => (
+                    <label key={jour.value} className={`premium-checkbox-label ${joursTravaux.includes(jour.value) ? 'selected' : ''}`}>
+                      <input type="checkbox" checked={joursTravaux.includes(jour.value)} onChange={() => toggleJour(jour.value)} />
+                      <span>{jour.label}</span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Section 3 : Substitutions */}
+            <div className="travaux-glass-card">
+              <div className="section-title-wrap">
+                <div className="section-icon-box">
+                  <wcs-mat-icon icon="swap_horiz"></wcs-mat-icon>
+                </div>
+                <div>
+                  <h2 className="travaux-section-title">Plan de Transport de Substitution</h2>
+                  <p className="travaux-section-subtitle">Associez des cars ou trains spéciaux pour remplacer les circulations supprimées.</p>
+                </div>
+              </div>
+
+              <label className={`premium-toggle-switch ${substitutionsActive ? 'active' : ''}`}>
+                <input 
+                  type="checkbox" 
+                  checked={substitutionsActive} 
+                  onChange={(e) => setSubstitutionsActive(e.target.checked)} 
+                />
+                <span className="switch-slider"></span>
+                <span className="switch-text">
+                  <strong>Activer le plan de substitution pour ce chantier</strong>
+                  <small>Permet de relier des horaires de cars ou trains de substitution actifs</small>
+                </span>
+              </label>
+
+              {substitutionsActive && (
+                <div className="substitutions-module-body">
+                  <div className="substitutions-search-bar">
+                    <div className="search-input-wrap">
+                      <wcs-mat-icon icon="search" className="search-icon"></wcs-mat-icon>
+                      <input 
+                        type="text" 
+                        className="premium-input" 
+                        placeholder="Rechercher par numéro de train, gare de départ ou terminus..." 
+                        value={searchQuery} 
+                        onChange={(e) => setSearchQuery(e.target.value)} 
+                        onKeyDown={(e) => { if (e.key === 'Enter') handleSearchHoraires(); }} 
+                      />
+                    </div>
+                    <wcs-button 
+                      className="wcs-primary" 
+                      onClick={handleSearchHoraires}
+                      disabled={loadingHoraires}
+                    >
+                      <wcs-mat-icon icon="search" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                      <span>Rechercher</span>
+                    </wcs-button>
+                  </div>
+
+                  {/* Horaires sélectionnés */}
+                  {horairesSelectionnes.length > 0 && (
+                    <div className="selected-subs-container">
+                      <div className="selected-subs-header">
+                        <h4>
+                          <wcs-mat-icon icon="check_circle" style={{ color: '#0088ce', marginRight: '6px' }}></wcs-mat-icon>
+                          {horairesSelectionnes.length} circulation{horairesSelectionnes.length > 1 ? 's' : ''} de substitution sélectionnée{horairesSelectionnes.length > 1 ? 's' : ''}
+                        </h4>
+                      </div>
+                      <div className="selected-subs-list">
+                        {horairesSelectionnes.map(h => (
+                          <div key={h.id} className="selected-sub-card">
+                            <div className="sub-main-col">
+                              <div className="sub-num-badge">
+                                <wcs-mat-icon icon="directions_bus"></wcs-mat-icon>
+                                <strong>{h.numero_train || 'Train'}</strong>
+                                {h.type_train && <wcs-badge className="wcs-info" shape="round">{h.type_train}</wcs-badge>}
+                              </div>
+                              <div className="sub-route">
+                                <span>{h.gare_depart_nom} ({formatHeure(h.heure_depart)})</span>
+                                <wcs-mat-icon icon="arrow_forward" className="arrow-icon"></wcs-mat-icon>
+                                <span>{h.gare_arrivee_nom} ({formatHeure(h.heure_arrivee)})</span>
+                              </div>
                             </div>
-                            {isSelected && <wcs-mat-icon icon="check_circle" style={{ color: '#3b82f6' }}></wcs-mat-icon>}
+                            <button 
+                              type="button" 
+                              className="btn-remove-sub" 
+                              onClick={() => toggleHoraireSelection(h)}
+                              title="Retirer cette substitution"
+                            >
+                              <wcs-mat-icon icon="close"></wcs-mat-icon>
+                            </button>
                           </div>
-                        );
-                      })}
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Résultats de recherche */}
+                  {showResults && (
+                    <div className="search-results-section">
+                      <div className="search-results-header">
+                        <h4>Résultats disponibles ({horairesDisponibles.length})</h4>
+                        <span className="results-hint">Cliquez sur une circulation pour l'ajouter ou la retirer</span>
+                      </div>
+
+                      {loadingHoraires ? (
+                        <div className="search-loading-box">
+                          <wcs-spinner mode="border"></wcs-spinner>
+                          <p>Recherche des circulations en cours...</p>
+                        </div>
+                      ) : horairesDisponibles.length === 0 ? (
+                        <div className="search-empty-box">
+                          <p>Aucun horaire de substitution trouvé pour « {searchQuery} ».</p>
+                        </div>
+                      ) : (
+                        <div className="subs-results-list">
+                          {horairesDisponibles.map(h => {
+                            const isSelected = horairesSelectionnes.some(hs => hs.id === h.id);
+                            return (
+                              <div 
+                                key={h.id} 
+                                className={`sub-result-card ${isSelected ? 'is-selected' : ''}`}
+                                onClick={() => toggleHoraireSelection(h)}
+                              >
+                                <div className="result-info">
+                                  <div className="result-badge-row">
+                                    <strong>{h.numero_train}</strong>
+                                    {h.type_train && <wcs-badge className="wcs-info" shape="round">{h.type_train}</wcs-badge>}
+                                    {h.ligne_nom && <wcs-badge className="wcs-secondary" shape="round">{h.ligne_nom}</wcs-badge>}
+                                  </div>
+                                  <div className="result-route-row">
+                                    <span>{h.gare_depart_nom} ({formatHeure(h.heure_depart)})</span>
+                                    <wcs-mat-icon icon="arrow_forward" className="arrow-icon"></wcs-mat-icon>
+                                    <span>{h.gare_arrivee_nom} ({formatHeure(h.heure_arrivee)})</span>
+                                  </div>
+                                </div>
+                                <div className="result-checkbox">
+                                  <wcs-mat-icon icon={isSelected ? "check_box" : "check_box_outline_blank"} className={isSelected ? "icon-checked" : ""}></wcs-mat-icon>
+                                </div>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
               )}
             </div>
-          )}
+          </div>
+
+          {/* Bottom Action Bar */}
+          <div className="form-sticky-bottom-bar">
+            <label className={`premium-checkbox-label ${actif ? 'selected' : ''}`}>
+              <input type="checkbox" checked={actif} onChange={(e) => setActif(e.target.checked)} />
+              <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                <wcs-badge className={actif ? "wcs-success" : "wcs-secondary"} shape="round">
+                  <wcs-mat-icon icon={actif ? "visibility" : "visibility_off"} style={{ fontSize: '13px', marginRight: '4px' }}></wcs-mat-icon>
+                  {actif ? 'Chantier Actif et visible' : 'Chantier Inactif / Masqué'}
+                </wcs-badge>
+              </span>
+            </label>
+
+            <div className="bottom-bar-btns">
+              <wcs-button className="wcs-secondary" mode="stroked" onClick={() => navigate('/travaux')}>
+                Annuler
+              </wcs-button>
+              <wcs-button 
+                className="wcs-primary" 
+                onClick={handleUpdate}
+                disabled={saving || !canUpdateTravaux}
+              >
+                {saving ? (
+                  <>
+                    <wcs-spinner mode="border" style={{ width: '16px', height: '16px', marginRight: '6px' }}></wcs-spinner>
+                    <span>Enregistrement...</span>
+                  </>
+                ) : (
+                  <>
+                    <wcs-mat-icon icon="check" style={{ marginRight: '6px' }}></wcs-mat-icon>
+                    <span>Enregistrer les modifications</span>
+                  </>
+                )}
+              </wcs-button>
+            </div>
+          </div>
+
         </div>
-
-        <div className="premium-actions">
-          <label className={`premium-checkbox-label ${actif ? 'selected' : ''}`} style={{ marginRight: 'auto' }}>
-            <input type="checkbox" checked={actif} onChange={(e) => setActif(e.target.checked)} />
-            {actif ? '✔ Travaux Actifs' : 'Travaux Inactifs'}
-          </label>
-
-          <wcs-button className="wcs-secondary" onClick={() => navigate('/travaux')}>Annuler</wcs-button>
-          <wcs-button className="wcs-primary" onClick={handleUpdate} disabled={saving || !canUpdateTravaux}>
-            {saving ? <wcs-spinner></wcs-spinner> : 'Enregistrer les modifications'}
-          </wcs-button>
-        </div>
-
       </div>
     </div>
   );
diff --git a/src/pages/travaux/Travaux.css b/src/pages/travaux/Travaux.css
index 0687cc7..50b23bd 100644
--- a/src/pages/travaux/Travaux.css
+++ b/src/pages/travaux/Travaux.css
@@ -1,281 +1,1475 @@
 /* ═══════════════════════════════════════════════════════════════════════════
-   TRAVAUX - STYLES
+   TRAVAUX - STYLES MODERNES & FORMULAIRES
    ═══════════════════════════════════════════════════════════════════════════ */
 
-/* Page liste travaux */
-.travaux-page {
-  background: #f3f7fc;
+/* Configuration de base */
+.travaux-page-root {
+  min-height: 100vh;
+  background-color: #f4f7fb;
 }
 
-.travaux-page-content {
-  width: min(1380px, 100%);
+.travaux-modern-container {
+  width: min(1420px, 100%);
   margin: 0 auto;
+  padding: 24px 28px 60px;
+  box-sizing: border-box;
 }
 
-.travaux-form-page-content {
-  width: 100%;
-  max-width: none;
-}
+/* ═══════════════════════════════════════════════════════════════════════════
+   1. HERO BANNER
+   ═══════════════════════════════════════════════════════════════════════════ */
 
-.travaux-page-header {
-  background: linear-gradient(140deg, #082e4f 0%, #11507e 70%, #1d5f90 100%);
-  border-radius: 16px;
+.travaux-hero-banner {
+  background: linear-gradient(135deg, #072746 0%, #0d4b78 50%, #17659e 100%);
+  border-radius: 20px;
   color: #f8fbff;
-  padding: 26px;
-  margin-bottom: 14px;
+  padding: 32px 36px;
+  margin-bottom: 24px;
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  gap: 18px;
-  box-shadow: 0 14px 35px rgba(8, 46, 79, 0.22);
+  align-items: center;
+  gap: 24px;
+  box-shadow: 0 16px 36px -10px rgba(7, 39, 70, 0.35);
+  position: relative;
+  overflow: hidden;
 }
 
-.travaux-page-kicker {
-  margin: 0 0 8px;
+.travaux-hero-banner::after {
+  content: '';
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 260px;
+  height: 260px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.travaux-hero-content {
+  max-width: 820px;
+  z-index: 1;
+}
+
+.travaux-hero-tags {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.travaux-kicker-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #e2f0fc;
+  font-size: 11px;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  font-size: 12px;
-}
-
-.travaux-page-header h1 {
-  margin: 0;
-  color: white;
-  font-size: 30px;
-}
-
-.travaux-page-description {
-  margin: 10px 0 0;
-  color: rgba(247, 251, 255, 0.9);
-  max-width: 680px;
-}
-
-.travaux-page-region {
-  margin: 10px 0 0;
-  font-size: 13px;
-  color: rgba(247, 251, 255, 0.95);
-}
-
-.travaux-create-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.travaux-toolbar {
-  margin-bottom: 14px;
-  padding: 10px;
-  border-radius: 12px;
-  border: 1px solid #dbe3ed;
-  background: #ffffff;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  align-items: center;
-}
-
-.travaux-search-box {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid #dbe3ed;
-  border-radius: 10px;
-  padding: 0 12px;
-  min-height: 42px;
-  width: min(700px, 100%);
-  background: #f8fbff;
-}
-
-.travaux-search-input {
-  border: 0;
-  background: transparent;
-  width: 100%;
-  font-size: 14px;
-  color: #1f2937;
-}
-
-.travaux-search-input:focus {
-  outline: none;
-}
-
-.travaux-count-pill {
-  border: 1px solid #dbe3ed;
+  padding: 5px 12px;
   border-radius: 999px;
-  padding: 6px 12px;
-  font-size: 13px;
-  color: #1f2937;
-  background: #f8fbff;
+}
+
+.travaux-kicker-pill wcs-mat-icon {
+  font-size: 14px;
+}
+
+.travaux-region-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  color: #f1f7ff;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 999px;
+}
+
+.travaux-region-badge wcs-mat-icon {
+  font-size: 14px;
+}
+
+.travaux-hero-title {
+  margin: 0;
+  font-size: 32px;
+  font-weight: 800;
+  color: #ffffff;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.travaux-hero-subtitle {
+  margin: 10px 0 0;
+  font-size: 14px;
+  line-height: 1.55;
+  color: rgba(240, 247, 255, 0.88);
+}
+
+.travaux-hero-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  z-index: 1;
+}
+
+/* Boutons modernes */
+.travaux-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: linear-gradient(135deg, #0088ce 0%, #006da6 100%);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 12px 22px;
+  border-radius: 12px;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(0, 136, 206, 0.35);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
 }
 
-.travaux-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-  gap: 14px;
+.travaux-btn-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, #0099e6 0%, #007bbd 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 22px rgba(0, 136, 206, 0.45);
 }
 
-.travaux-card {
+.travaux-btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.travaux-btn-primary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.travaux-btn-outline {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   background: #ffffff;
-  border-radius: 12px;
-  border: 1px solid #dbe3ed;
-  overflow: hidden;
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+  color: #334155;
+  border: 1px solid #d1d9e2;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 18px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.travaux-card:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
-}
-
-.travaux-card-header {
-  padding: 14px 16px;
-  border-bottom: 1px solid #e8eef6;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 10px;
-  background: #ffffff;
-}
-
-.travaux-card-header h3 {
-  margin: 0 0 6px;
-  font-size: 16px;
+.travaux-btn-outline:hover {
+  background: #f8fafc;
+  border-color: #94a3b8;
   color: #0f172a;
-  font-weight: 700;
 }
 
-.travaux-description {
-  margin: 0;
-  font-size: 13px;
-  color: #576579;
-  line-height: 1.5;
+.travaux-btn-danger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 10px 18px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.travaux-card-body {
-  padding: 12px 16px;
+.travaux-btn-danger:hover:not(:disabled) {
+  background: #ef4444;
+  color: #ffffff;
+  border-color: #ef4444;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   2. KPI CARDS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.travaux-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.travaux-kpi-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 18px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+  position: relative;
+  outline: none;
+}
+
+.travaux-kpi-card:hover {
+  transform: translateY(-2px);
+  border-color: #cbd5e1;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
+}
+
+.travaux-kpi-card.active {
+  border-color: #0088ce;
+  background: #f4faff;
+  box-shadow: 0 8px 24px rgba(0, 136, 206, 0.12);
+}
+
+.travaux-kpi-card.active::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 14px;
+  bottom: 14px;
+  width: 4px;
+  background: #0088ce;
+  border-radius: 0 4px 4px 0;
+}
+
+.kpi-icon-wrapper {
+  width: 46px;
+  height: 46px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.kpi-icon-wrapper.kpi-all {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.kpi-icon-wrapper.kpi-ongoing {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.kpi-icon-wrapper.kpi-upcoming {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+.kpi-icon-wrapper.kpi-subs {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.live-pulse {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 10px;
+  height: 10px;
+  background-color: #22c55e;
+  border-radius: 50%;
+  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  animation: pulse-ring 1.8s infinite;
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+  }
+}
+
+.kpi-info {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+}
+
+.kpi-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 2px;
+}
+
+.kpi-value-row {
+  display: flex;
+  align-items: baseline;
   gap: 8px;
 }
 
-.travaux-info-row {
+.kpi-value {
+  font-size: 24px;
+  font-weight: 800;
+  color: #0f172a;
+  line-height: 1;
+}
+
+.kpi-subtext {
+  font-size: 12px;
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.text-success { color: #16a34a !important; }
+.text-warning { color: #d97706 !important; }
+.text-primary { color: #0284c7 !important; }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   3. TOOLBAR & CONTROLS
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.travaux-controls-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.travaux-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #f8fafc;
+  border: 1px solid #cbd5e1;
+  border-radius: 12px;
+  padding: 0 16px;
+  height: 46px;
+  transition: all 0.2s ease;
+}
+
+.travaux-search-bar:focus-within {
+  background: #ffffff;
+  border-color: #0088ce;
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.15);
+}
+
+.search-icon {
+  color: #64748b;
+  font-size: 20px;
+}
+
+.travaux-modern-input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  font-size: 14px;
+  color: #1e293b;
+  outline: none;
+}
+
+.travaux-modern-input::placeholder {
+  color: #94a3b8;
+}
+
+.btn-clear-search {
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: all 0.15s;
+}
+
+.btn-clear-search:hover {
+  background: #e2e8f0;
+  color: #334155;
+}
+
+.travaux-filters-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 10px;
-  border: 1px solid transparent;
-  border-radius: 9px;
-  padding: 8px 10px;
+  flex-wrap: wrap;
+  gap: 14px;
 }
 
-.travaux-info-row:hover {
-  background: #f7fbff;
-  border-color: #dbe3ed;
+.travaux-tab-group {
+  display: flex;
+  align-items: center;
+  background: #f1f5f9;
+  padding: 4px;
+  border-radius: 10px;
+  gap: 4px;
+  overflow-x: auto;
 }
 
-.info-label {
+.travaux-tab-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: #64748b;
   font-size: 13px;
-  color: #576579;
+  font-weight: 600;
+  padding: 7px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  white-space: nowrap;
+}
+
+.travaux-tab-btn:hover {
+  color: #1e293b;
+  background: rgba(255, 255, 255, 0.6);
+}
+
+.travaux-tab-btn.active {
+  background: #ffffff;
+  color: #0f172a;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
+}
+
+.tab-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+}
+
+.dot-ongoing { background-color: #16a34a; }
+.dot-upcoming { background-color: #eab308; }
+.dot-past { background-color: #94a3b8; }
+.dot-inactive { background-color: #ef4444; }
+
+.travaux-dropdown-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.custom-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.select-icon {
+  position: absolute;
+  left: 12px;
+  color: #64748b;
+  font-size: 18px;
+  pointer-events: none;
+}
+
+.travaux-select {
+  appearance: none;
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  padding: 8px 32px 8px 36px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #334155;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  transition: all 0.2s ease;
+}
+
+.travaux-select:focus {
+  outline: none;
+  border-color: #0088ce;
+  box-shadow: 0 0 0 2px rgba(0, 136, 206, 0.15);
+}
+
+.view-mode-toggle {
+  display: flex;
+  align-items: center;
+  background: #f1f5f9;
+  border-radius: 8px;
+  padding: 2px;
+}
+
+.btn-view-mode {
+  background: transparent;
+  border: none;
+  color: #64748b;
+  padding: 6px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+}
+
+.btn-view-mode.active {
+  background: #ffffff;
+  color: #0088ce;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
+}
+
+/* Results header */
+.travaux-results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 0 4px;
+}
+
+.results-count-text {
+  font-size: 14px;
+  color: #475569;
+}
+
+.results-count-text strong {
+  color: #0f172a;
+}
+
+.filter-badge-applied {
+  color: #0088ce;
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.btn-reset-filters {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: #0088ce;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.15s;
+}
+
+.btn-reset-filters:hover {
+  background: #e0f2fe;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   4. CARDS GRID
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.travaux-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  gap: 20px;
+}
+
+.travaux-modern-card {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+.travaux-modern-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.09);
+  border-color: #cbd5e1;
+}
+
+.travaux-modern-card.card-inactive {
+  background: #fafbfc;
+  opacity: 0.88;
+}
+
+/* Top bar in card */
+.card-top-bar {
+  padding: 16px 18px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.card-status-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+
+.badge-ongoing {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.badge-upcoming {
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.badge-past {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.badge-inactive {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.ligne-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: #e0f2fe;
+  color: #0369a1;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 9px;
+  border-radius: 999px;
+}
+
+.ligne-pill wcs-mat-icon {
+  font-size: 13px;
+}
+
+.btn-quick-toggle {
+  background: transparent;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #64748b;
+  transition: all 0.18s ease;
+}
+
+.btn-quick-toggle:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.btn-quick-toggle.is-active {
+  color: #0088ce;
+  background: #f0f9ff;
+  border-color: #bae6fd;
+}
+
+/* Card Main Info */
+.card-main-info {
+  padding: 16px 18px 12px;
+  cursor: pointer;
+}
+
+.card-title {
+  margin: 0 0 8px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  transition: color 0.15s ease;
+}
+
+.card-main-info:hover .card-title {
+  color: #0088ce;
+}
+
+.card-desc-preview {
+  margin: 0;
+  font-size: 13px;
+  color: #64748b;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.card-desc-empty {
+  margin: 0;
+  font-size: 12px;
+  font-style: italic;
+  color: #94a3b8;
+}
+
+/* Metadata section */
+.card-metadata-section {
+  padding: 0 18px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.meta-item-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  background: #f8fafc;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid #edf2f7;
+}
+
+.meta-icon-col {
+  color: #0088ce;
+  font-size: 18px;
+  margin-top: 2px;
+}
+
+.meta-content-col {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.meta-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.meta-value-strong {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.meta-subvalue {
+  font-size: 11px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.meta-hours-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.night-badge {
+  background: #ede9fe;
+  color: #6d28d9;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+}
+
+.night-badge-sm {
+  background: #ede9fe;
+  color: #6d28d9;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 5px;
+  border-radius: 4px;
+  margin-left: 4px;
+}
+
+/* Days chips */
+.meta-days-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.days-chip-row {
+  display: flex;
+  gap: 4px;
+}
+
+.day-chip {
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+  transition: all 0.15s ease;
+}
+
+.day-chip.active {
+  background: #0088ce;
+  color: #ffffff;
+}
+
+.day-chip.inactive {
+  background: #f1f5f9;
+  color: #94a3b8;
+}
+
+.day-chip.sm {
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
+  border-radius: 4px;
+}
+
+/* Substitutions Banner */
+.card-substitutions-banner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.card-substitutions-banner:hover {
+  background: #dcfce7;
+  border-color: #86efac;
+}
+
+.subs-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #166534;
+}
+
+.subs-badge wcs-mat-icon {
+  font-size: 16px;
+}
+
+.subs-badge.clickable {
+  cursor: pointer;
+  background: #f0fdf4;
+  padding: 4px 8px;
+  border-radius: 6px;
+  border: 1px solid #bbf7d0;
+  display: inline-flex;
+}
+
+.subs-view-link {
+  font-size: 11px;
+  font-weight: 600;
+  color: #15803d;
+}
+
+/* Card footer actions */
+.card-footer-actions {
+  padding: 12px 18px;
+  background: #f8fafc;
+  border-top: 1px solid #f1f5f9;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.footer-right-btns {
   display: flex;
   align-items: center;
   gap: 6px;
 }
 
-.info-value {
-  font-size: 13px;
-  color: #0f172a;
+.btn-card-action {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 8px;
+  font-size: 12px;
   font-weight: 600;
-  text-align: right;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  border: 1px solid transparent;
 }
 
-.travaux-card-footer {
-  padding: 12px 16px;
-  border-top: 1px solid #e8eef6;
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
+.btn-preview {
   background: #ffffff;
+  border-color: #e2e8f0;
+  color: #475569;
 }
 
-.travaux-action-btn {
+.btn-preview:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.btn-edit {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.btn-edit:hover:not(:disabled) {
+  background: #bae6fd;
+}
+
+.btn-delete {
+  background: #fee2e2;
+  color: #b91c1c;
+  padding: 6px 8px;
+}
+
+.btn-delete:hover:not(:disabled) {
+  background: #fecaca;
+}
+
+.btn-card-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   5. TABLE VIEW
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.travaux-table-wrapper {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
+}
+
+.travaux-modern-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.travaux-modern-table thead {
+  background: #f8fafc;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.travaux-modern-table th {
+  padding: 14px 16px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #64748b;
+  letter-spacing: 0.04em;
+}
+
+.travaux-modern-table td {
+  padding: 14px 16px;
+  border-bottom: 1px solid #f1f5f9;
+  font-size: 13px;
+  color: #334155;
+  vertical-align: middle;
+}
+
+.travaux-modern-table tbody tr {
+  transition: background-color 0.15s ease;
+}
+
+.travaux-modern-table tbody tr:hover {
+  background-color: #f8fafc;
+}
+
+.travaux-modern-table tr.tr-inactive {
+  background-color: #fafbfc;
+  opacity: 0.85;
+}
+
+.table-title-cell {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.table-travail-title {
+  color: #0f172a;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.table-title-cell:hover .table-travail-title {
+  color: #0088ce;
+}
+
+.table-ligne-sub {
   display: inline-flex;
   align-items: center;
   gap: 4px;
+  color: #0369a1;
+  font-size: 11px;
+  font-weight: 600;
 }
 
-.travaux-empty-state {
-  text-align: center;
-  padding: 52px 24px;
-  color: #637287;
+.table-ligne-sub wcs-mat-icon {
+  font-size: 12px;
+}
+
+.table-date-cell, .table-time-cell {
+  font-weight: 500;
+  color: #1e293b;
+  white-space: nowrap;
+}
+
+.table-actions-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.btn-table-icon {
+  background: transparent;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #64748b;
+  transition: all 0.15s ease;
+}
+
+.btn-table-icon:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.btn-table-edit:hover:not(:disabled) {
+  background: #e0f2fe;
+  color: #0369a1;
+  border-color: #bae6fd;
+}
+
+.btn-table-delete:hover:not(:disabled) {
+  background: #fee2e2;
+  color: #b91c1c;
+  border-color: #fca5a5;
+}
+
+.th-actions {
+  text-align: right;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   6. DETAILS MODAL
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.travaux-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  animation: modalFadeIn 0.2s ease-out;
+}
+
+@keyframes modalFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.travaux-detail-modal {
   background: #ffffff;
-  border: 1px solid #dbe3ed;
+  border-radius: 20px;
+  width: min(840px, 100%);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35);
+  overflow: hidden;
+  animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes modalSlideUp {
+  from { transform: translateY(20px) scale(0.97); opacity: 0; }
+  to { transform: translateY(0) scale(1); opacity: 1; }
+}
+
+.modal-top-header {
+  padding: 24px 28px;
+  border-bottom: 1px solid #e2e8f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  background: #f8fafc;
+}
+
+.modal-header-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.modal-badges-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.modal-top-header h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.modal-close-btn {
+  background: transparent;
+  border: none;
+  color: #64748b;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.modal-close-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+.modal-body-content {
+  padding: 24px 28px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.modal-summary-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.modal-card-stat {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.travaux-empty-icon {
-  font-size: 56px;
-  opacity: 0.35;
+.modal-card-stat.full-width {
+  grid-column: span 2;
 }
 
-.travaux-empty-state h3 {
-  margin: 10px 0 6px;
+.modal-card-stat wcs-mat-icon {
+  font-size: 24px;
+  color: #0088ce;
+}
+
+.modal-card-stat .stat-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #64748b;
+  margin-bottom: 2px;
+}
+
+.modal-card-stat strong {
+  font-size: 14px;
+  color: #0f172a;
+}
+
+.modal-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.modal-section-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.modal-section-title wcs-mat-icon {
+  font-size: 18px;
+  color: #0088ce;
+}
+
+.modal-rich-desc {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 16px;
+  font-size: 14px;
+  line-height: 1.6;
   color: #334155;
 }
 
-.travaux-empty-state p {
-  margin: 0 0 1rem 0;
+.modal-substitutions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
-.travaux-state {
-  text-align: center;
-  padding: 52px 24px;
-  color: #637287;
+.substitution-detail-card {
   background: #ffffff;
-  border: 1px solid #dbe3ed;
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
 }
 
-.travaux-state-loading p {
-  margin-top: 10px;
+.sub-train-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #0f172a;
 }
 
-@media (max-width: 768px) {
-  .travaux-page-header {
-    flex-direction: column;
-    padding: 20px;
-  }
-
-  .travaux-toolbar {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .travaux-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .travaux-count-pill {
-    width: fit-content;
-  }
+.sub-train-badge wcs-mat-icon {
+  color: #16a34a;
+}
+
+.sub-train-type {
+  font-size: 11px;
+  background: #f1f5f9;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: #475569;
+}
+
+.sub-route-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.sub-station {
+  display: flex;
+  flex-direction: column;
+}
+
+.sub-station .station-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.sub-station .station-time {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.sub-arrow {
+  color: #94a3b8;
+  font-size: 18px;
+}
+
+.sub-ligne-tag {
+  font-size: 11px;
+  background: #e0f2fe;
+  color: #0369a1;
+  padding: 3px 8px;
+  border-radius: 6px;
+  font-weight: 600;
+}
+
+.empty-substitutions-box {
+  background: #f8fafc;
+  border: 1px dashed #cbd5e1;
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.modal-footer-bar {
+  padding: 18px 28px;
+  border-top: 1px solid #e2e8f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f8fafc;
+}
+
+.modal-footer-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   7. LOADING & EMPTY STATES
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.travaux-loading-container {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  padding: 60px 20px;
+  text-align: center;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
+}
+
+.modern-spinner-wrap {
+  display: inline-flex;
+  margin-bottom: 16px;
+}
+
+.travaux-loading-container h3 {
+  margin: 0 0 6px;
+  color: #0f172a;
+  font-size: 18px;
+}
+
+.travaux-loading-container p {
+  margin: 0;
+  color: #64748b;
+  font-size: 14px;
+}
+
+.travaux-empty-modern {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  padding: 60px 24px;
+  text-align: center;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
+}
+
+.empty-icon-bubble {
+  width: 72px;
+  height: 72px;
+  background: #f1f5f9;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748b;
+  font-size: 32px;
+  margin-bottom: 16px;
+}
+
+.travaux-empty-modern h3 {
+  margin: 0 0 8px;
+  color: #0f172a;
+  font-size: 20px;
+}
+
+.travaux-empty-modern p {
+  margin: 0 auto 24px;
+  max-width: 480px;
+  color: #64748b;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.empty-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   8. FORMULAIRES DE CRÉATION & MODIFICATION (Conserve la rétrocompatibilité)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.travaux-form-page-content {
+  background-color: #f3f6f8;
+  padding: 40px;
+  min-height: 100vh;
+  width: 100%;
 }
 
-/* Conteneur de création */
 .creation-container {
-  margin-top: 2rem;
+  margin-top: 1.5rem;
   width: 100%;
 }
 
 .step-container {
   background: #ffffff;
-  border-radius: 12px;
+  border-radius: 16px;
   border: 1px solid #dbe3ed;
   padding: 2rem;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
   width: 100%;
   box-sizing: border-box;
+  animation: fadeIn 0.35s ease-out;
 }
 
 .step-header {
@@ -285,23 +1479,23 @@
 .step-header h2 {
   margin: 0 0 0.5rem 0;
   color: #0f172a;
+  font-size: 22px;
 }
 
 .step-header p {
   margin: 0;
   color: #576579;
-  font-size: 0.875rem;
+  font-size: 0.9rem;
 }
 
-/* Indicateur d'étapes */
 .steps-indicator {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 1.2rem 0;
-  padding: 1rem;
+  padding: 1.2rem;
   background: #ffffff;
-  border-radius: 12px;
+  border-radius: 16px;
   border: 1px solid #dbe3ed;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
 }
@@ -314,451 +1508,64 @@
 }
 
 .step-number {
-  width: 40px;
-  height: 40px;
+  width: 42px;
+  height: 42px;
   border-radius: 50%;
-  background: #e0e0e0;
-  color: #999;
+  background: #e2e8f0;
+  color: #64748b;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 600;
-  font-size: 1.125rem;
+  font-weight: 700;
+  font-size: 1.1rem;
   transition: all 0.3s;
 }
 
 .step-item.active .step-number {
-  background: var(--wcs-primary, #0088ce);
+  background: #0088ce;
   color: white;
 }
 
 .step-item.completed .step-number {
-  background: #28a745;
+  background: #16a34a;
   color: white;
 }
 
 .step-label {
   font-size: 0.875rem;
-  color: #999;
+  color: #64748b;
   font-weight: 500;
 }
 
 .step-item.active .step-label {
-  color: #333;
-  font-weight: 600;
+  color: #0f172a;
+  font-weight: 700;
 }
 
 .step-line {
   width: 100px;
   height: 2px;
-  background: #e0e0e0;
+  background: #e2e8f0;
   margin: 0 1rem;
 }
 
-@media (max-width: 768px) {
-  .travaux-grid-2 {
-    grid-template-columns: 1fr;
-  }
-
-  .travaux-search-row {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .travaux-actions-inline {
-    flex-direction: column;
-  }
-
-  .steps-indicator {
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .step-line {
-    width: 2px;
-    height: 40px;
-    margin: 0;
-  }
-}
-
-/* Sections de formulaire */
-.form-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.travaux-form-layout {
-  gap: 14px;
-}
-
-.travaux-form-card {
-  border: 1px solid #dbe3ed;
-  border-radius: 12px;
-  padding: 14px;
-  background: #ffffff;
-}
-
-.travaux-form-card-title {
-  margin: 0;
-  font-size: 16px;
-  color: #0f172a;
-}
-
-.travaux-form-card-subtitle {
-  margin: 6px 0 12px;
-  color: #576579;
-  font-size: 13px;
-}
-
-.travaux-form-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.travaux-grid-2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.form-group.required label::after {
-  content: ' *';
-  color: #dc3545;
-}
-
-.form-group label {
-  font-weight: 500;
-  color: #27364a;
-  font-size: 0.9375rem;
-}
-
-.travaux-input,
-.travaux-textarea {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  font-size: 1rem;
-  border: 1px solid #d1dae6;
-  border-radius: 10px;
-  background: #ffffff;
-  box-sizing: border-box;
-}
-
-.travaux-textarea {
-  resize: vertical;
-}
-
-.travaux-input:focus,
-.travaux-textarea:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
-}
-
-.travaux-inline-check {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.travaux-check-input {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-}
-
-.travaux-hidden-checkbox {
-  margin-right: 8px;
-}
-
-.travaux-search-row {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.travaux-inline-loading {
-  padding: 2rem;
-  text-align: center;
-}
-
-.travaux-inline-empty {
-  text-align: center;
-  color: #8a96a8;
-  padding: 2rem;
-}
-
-.travaux-ok-icon {
-  color: #28a745;
-}
-
-.travaux-actions-inline {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.travaux-actions-end {
-  margin-top: 1.5rem;
-  justify-content: flex-end;
-}
-
-/* Sélecteur de jours */
-.jours-selector {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 0.75rem;
-}
-
-.jour-checkbox {
-  padding: 0.75rem 1rem;
-  border: 2px solid #e0e0e0;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 500;
-  background: white;
-}
-
-.jour-checkbox:hover {
-  border-color: var(--wcs-primary, #0088ce);
-  background: #f0f8ff;
-}
-
-.jour-checkbox.selected {
-  border-color: var(--wcs-primary, #0088ce);
-  background: var(--wcs-primary, #0088ce);
-  color: white;
-}
-
-.jour-checkbox input[type="checkbox"] {
-  display: none;
-}
-
-/* Substitutions */
-.substitutions-selectionnees {
-  margin-top: 1.5rem;
-  padding: 1rem;
-  background: #f8f9fa;
-  border-radius: 6px;
-}
-
-.substitutions-selectionnees h4 {
-  margin: 0 0 1rem 0;
-  font-size: 1rem;
-  color: #333;
-}
-
-.horaires-selected-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.horaire-selected-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: white;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-}
-
-.horaire-selected-item strong {
-  margin-right: 0.5rem;
-}
-
-.horaire-route {
-  display: block;
-  font-size: 0.875rem;
-  color: #666;
-  margin-top: 0.25rem;
-}
-
-/* Résultats de recherche */
-.horaires-search-results {
-  margin-top: 1.5rem;
-}
-
-.horaires-search-results h4 {
-  margin: 0 0 1rem 0;
-  font-size: 1rem;
-  color: #333;
-}
-
-.horaires-results-list {
-  max-height: 400px;
-  overflow-y: auto;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-}
-
-.horaire-result-item {
-  padding: 1rem;
-  border-bottom: 1px solid #f0f0f0;
-  cursor: pointer;
-  transition: background 0.2s;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.horaire-result-item:last-child {
-  border-bottom: none;
-}
-
-.horaire-result-item:hover {
-  background: #f8f9fa;
-}
-
-.horaire-result-item.selected {
-  background: #e8f4f8;
-  border-left: 3px solid var(--wcs-primary, #0088ce);
-}
-
-.horaire-result-item strong {
-  margin-right: 0.5rem;
-}
-
-/* Résumé */
-.resume-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.resume-card {
-  background: #f8f9fa;
-  border-radius: 8px;
-  padding: 1.5rem;
-  border: 1px solid #e0e0e0;
-}
-
-.resume-card h3 {
-  margin: 0 0 1.5rem 0;
-  font-size: 1.125rem;
-  color: #333;
-  display: flex;
-  align-items: center;
-}
-
-.resume-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.resume-row:last-child {
-  border-bottom: none;
-}
-
-.resume-label {
-  font-weight: 500;
-  color: #666;
-  font-size: 0.9375rem;
-}
-
-.resume-value {
-  color: #333;
-  font-size: 0.9375rem;
-}
-
-.substitutions-resume-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.substitution-resume-item {
-  padding: 0.75rem 1rem;
-  background: white;
-  border-radius: 6px;
-  border: 1px solid #e0e0e0;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.substitution-resume-item strong {
-  margin-right: 0.5rem;
-}
-
-.substitution-resume-item span {
-  font-size: 0.875rem;
-  color: #666;
-}
-
-/* Actions */
-.step-actions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 2rem;
-  padding-top: 2rem;
-  border-top: 1px solid #e0e0e0;
-}
-
-/* Animations */
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.travaux-card {
-  animation: fadeIn 0.3s ease-out;
-}
-
-.step-container {
-  animation: fadeIn 0.4s ease-out;
-}
-
-
-.travaux-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 1.5rem;
-}
-.travaux-form-page-content {
-  background-color: #f3f6f8;
-  padding: 40px;
-  min-height: 100vh;
-}
-
 .travaux-glass-card {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
   border-radius: 16px;
   padding: 30px;
   margin-bottom: 24px;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
+
 .travaux-glass-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 15px 50px rgba(0,0,0,0.08);
+  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
 }
 
 .travaux-section-title {
-  font-family: 'Inter', sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
   color: #1e293b;
@@ -767,8 +1574,9 @@
   align-items: center;
   gap: 10px;
 }
+
 .travaux-section-title wcs-mat-icon {
-  color: #3b82f6;
+  color: #0088ce;
 }
 
 .travaux-section-subtitle {
@@ -805,8 +1613,8 @@
 .premium-input:focus {
   outline: none;
   background: #ffffff;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+  border-color: #0088ce;
+  box-shadow: 0 0 0 4px rgba(0, 136, 206, 0.12);
 }
 
 .premium-checkbox-group {
@@ -829,13 +1637,15 @@
   color: #475569;
   user-select: none;
 }
+
 .premium-checkbox-label:hover {
   background: #f1f5f9;
 }
+
 .premium-checkbox-label.selected {
   background: #eff6ff;
-  border-color: #3b82f6;
-  color: #1d4ed8;
+  border-color: #0088ce;
+  color: #0088ce;
 }
 
 .premium-checkbox-label input {
@@ -851,17 +1661,933 @@
   border-top: 1px solid #e2e8f0;
 }
 
-@media (max-width: 768px) {
-  .travaux-form-page-content {
-    padding: 20px 15px;
+.jours-selector {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 0.75rem;
+}
+
+.jour-checkbox {
+  padding: 0.75rem 1rem;
+  border: 2px solid #e2e8f0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  background: white;
+  color: #475569;
+}
+
+.jour-checkbox:hover {
+  border-color: #0088ce;
+  background: #f0f8ff;
+}
+
+.jour-checkbox.selected {
+  border-color: #0088ce;
+  background: #0088ce;
+  color: white;
+}
+
+.jour-checkbox input[type="checkbox"] {
+  display: none;
+}
+
+.substitutions-selectionnees {
+  margin-top: 1.5rem;
+  padding: 1.2rem;
+  background: #f8fafc;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+}
+
+.substitutions-selectionnees h4 {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  color: #0f172a;
+}
+
+.horaires-selected-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.horaire-selected-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.85rem 1.1rem;
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
+}
+
+.horaires-search-results {
+  margin-top: 1.5rem;
+}
+
+.horaires-search-results h4 {
+  margin: 0 0 1rem 0;
+  font-size: 1rem;
+  color: #0f172a;
+}
+
+.horaires-results-list {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.horaire-result-item {
+  padding: 1rem 1.2rem;
+  border-bottom: 1px solid #f1f5f9;
+  cursor: pointer;
+  transition: background 0.2s;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.horaire-result-item:last-child {
+  border-bottom: none;
+}
+
+.horaire-result-item:hover {
+  background: #f8fafc;
+}
+
+.horaire-result-item.selected {
+  background: #e8f4f8;
+  border-left: 3px solid #0088ce;
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
   }
-  .travaux-glass-card {
-    padding: 20px;
-  }
-  .premium-actions {
-    flex-direction: column-reverse;
-  }
-  .premium-actions > * {
-    width: 100%;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   9. RESPONSIVE
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 1100px) {
+  .travaux-kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .travaux-modern-container {
+    padding: 16px 14px 40px;
+  }
+
+  .travaux-hero-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 24px 20px;
+  }
+
+  .travaux-hero-actions {
+    width: 100%;
+  }
+
+  .travaux-btn-primary {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .travaux-kpi-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .travaux-filters-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .travaux-dropdown-group {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .custom-select-wrapper, .travaux-select {
+    width: 100%;
+  }
+
+  .travaux-cards-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-summary-cards {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-card-stat.full-width {
+    grid-column: span 1;
+  }
+
+  .substitution-detail-card {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   10. ENHANCED FORM STYLES (CreerTravaux & ModifierTravaux)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.travaux-form-header-modern {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  padding: 24px 28px;
+  margin-bottom: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
+}
+
+.btn-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: #0088ce;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  margin-bottom: 8px;
+  transition: transform 0.15s ease;
+}
+
+.btn-back-link:hover {
+  transform: translateX(-3px);
+}
+
+.form-title-group h1 {
+  margin: 6px 0 4px;
+  font-size: 24px;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.form-title-group p {
+  margin: 0;
+  font-size: 14px;
+  color: #64748b;
+}
+
+.form-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.travaux-form-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.section-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 22px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.section-icon-box {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: #e0f2fe;
+  color: #0369a1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.form-columns-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.days-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.days-shortcuts {
+  display: flex;
+  gap: 6px;
+}
+
+.btn-shortcut {
+  background: #f1f5f9;
+  border: none;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #475569;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-shortcut:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+/* Toggle Switch */
+.premium-toggle-switch {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  padding: 16px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.premium-toggle-switch.active {
+  background: #f0fdf4;
+  border-color: #86efac;
+}
+
+.premium-toggle-switch input {
+  display: none;
+}
+
+.switch-slider {
+  width: 44px;
+  height: 24px;
+  background: #cbd5e1;
+  border-radius: 999px;
+  position: relative;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+
+.switch-slider::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #ffffff;
+  border-radius: 50%;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.premium-toggle-switch.active .switch-slider {
+  background: #16a34a;
+}
+
+.premium-toggle-switch.active .switch-slider::after {
+  transform: translateX(20px);
+}
+
+.switch-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.switch-text strong {
+  font-size: 14px;
+  color: #0f172a;
+}
+
+.switch-text small {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.substitutions-module-body {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.substitutions-search-bar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.search-input-wrap {
+  flex: 1;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input-wrap .search-icon {
+  position: absolute;
+  left: 14px;
+  color: #64748b;
+  pointer-events: none;
+}
+
+.search-input-wrap .premium-input {
+  padding-left: 42px;
+}
+
+.selected-subs-container {
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.selected-subs-header h4 {
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #166534;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.selected-subs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.selected-sub-card {
+  background: #ffffff;
+  border: 1px solid #bbf7d0;
+  border-radius: 10px;
+  padding: 10px 14px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.sub-main-col {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.sub-num-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  color: #0f172a;
+}
+
+.train-tag {
+  background: #e2e8f0;
+  color: #334155;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.sub-route {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #475569;
+}
+
+.arrow-icon {
+  font-size: 16px;
+  color: #94a3b8;
+}
+
+.btn-remove-sub {
+  background: #fee2e2;
+  border: 1px solid #fca5a5;
+  color: #b91c1c;
+  border-radius: 6px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-remove-sub:hover {
+  background: #ef4444;
+  color: #ffffff;
+}
+
+.search-results-section {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.search-results-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.search-results-header h4 {
+  margin: 0;
+  font-size: 14px;
+  color: #0f172a;
+}
+
+.results-hint {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.subs-results-list {
+  max-height: 320px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.sub-result-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.sub-result-card:hover {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
+}
+
+.sub-result-card.is-selected {
+  background: #eff6ff;
+  border-color: #0088ce;
+}
+
+.result-badge-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.ligne-tag-sm {
+  background: #f1f5f9;
+  color: #475569;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.result-route-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #64748b;
+}
+
+.icon-checked {
+  color: #0088ce;
+}
+
+.search-loading-box, .search-empty-box {
+  padding: 24px;
+  text-align: center;
+  color: #64748b;
+}
+
+/* Bottom Bar */
+.form-sticky-bottom-bar {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  padding: 18px 24px;
+  margin-top: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
+}
+
+.bottom-bar-btns {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+@media (max-width: 1024px) {
+  .travaux-modern-container {
+    padding: 20px 18px 48px;
+  }
+  .travaux-kpi-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .travaux-hero-banner {
+    padding: 26px 28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .travaux-modern-container {
+    padding: 16px 12px 40px;
+  }
+  .travaux-form-header-modern {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 14px;
+  }
+  .form-header-actions {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+  .form-header-actions > * {
+    flex: 1;
+    justify-content: center;
+  }
+  .form-columns-2 {
+    grid-template-columns: 1fr;
+  }
+  .form-sticky-bottom-bar {
+    flex-direction: column;
+    gap: 14px;
+    align-items: stretch;
+    padding: 14px 16px;
+  }
+  .bottom-bar-btns {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+  .bottom-bar-btns > * {
+    flex: 1;
+    justify-content: center;
+  }
+  .travaux-hero-banner {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px 18px;
+    gap: 16px;
+  }
+  .travaux-hero-actions {
+    width: 100%;
+    display: flex;
+    gap: 8px;
+  }
+  .travaux-hero-actions > * {
+    flex: 1;
+    justify-content: center;
+  }
+  .travaux-kpi-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+  .travaux-controls-card {
+    padding: 14px;
+  }
+  .travaux-filters-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+  .travaux-filter-group {
+    width: 100%;
+  }
+  .travaux-stepper-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    padding: 12px;
+  }
+  .travaux-stepper-item {
+    justify-content: flex-start;
+  }
+}
+
+@media (max-width: 480px) {
+  .travaux-hero-title {
+    font-size: 24px;
+  }
+  .travaux-hero-subtitle {
+    font-size: 13px;
+  }
+  .travaux-card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   10. DARK MODE SUPPORT
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+body.dark-mode .travaux-page-root,
+[data-theme="dark"] .travaux-page-root {
+  background-color: #0b111e;
+  color: #f1f5f9;
+}
+
+body.dark-mode .travaux-hero-banner,
+[data-theme="dark"] .travaux-hero-banner {
+  background: linear-gradient(135deg, #05162a 0%, #082d4d 50%, #0d4b78 100%);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.6);
+}
+
+body.dark-mode .travaux-kpi-card,
+[data-theme="dark"] .travaux-kpi-card {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .travaux-kpi-card:hover,
+[data-theme="dark"] .travaux-kpi-card:hover {
+  border-color: #3b82f6;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+body.dark-mode .travaux-kpi-card.active,
+[data-theme="dark"] .travaux-kpi-card.active {
+  background: #0d2744;
+  border-color: #0088ce;
+  box-shadow: 0 8px 24px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .travaux-kpi-card .kpi-label,
+[data-theme="dark"] .travaux-kpi-card .kpi-label {
+  color: #94a3b8;
+}
+
+body.dark-mode .travaux-kpi-card .kpi-value,
+[data-theme="dark"] .travaux-kpi-card .kpi-value {
+  color: #f8fafc;
+}
+
+body.dark-mode .travaux-kpi-card .kpi-subtext,
+[data-theme="dark"] .travaux-kpi-card .kpi-subtext {
+  color: #64748b;
+}
+
+body.dark-mode .kpi-icon-wrapper.kpi-all,
+[data-theme="dark"] .kpi-icon-wrapper.kpi-all {
+  background: #1e293b;
+  color: #94a3b8;
+}
+
+body.dark-mode .kpi-icon-wrapper.kpi-ongoing,
+[data-theme="dark"] .kpi-icon-wrapper.kpi-ongoing {
+  background: rgba(22, 163, 74, 0.2);
+  color: #4ade80;
+}
+
+body.dark-mode .kpi-icon-wrapper.kpi-upcoming,
+[data-theme="dark"] .kpi-icon-wrapper.kpi-upcoming {
+  background: rgba(217, 119, 6, 0.2);
+  color: #fbbf24;
+}
+
+body.dark-mode .kpi-icon-wrapper.kpi-subs,
+[data-theme="dark"] .kpi-icon-wrapper.kpi-subs {
+  background: rgba(2, 132, 199, 0.2);
+  color: #38bdf8;
+}
+
+body.dark-mode .travaux-controls-card,
+body.dark-mode .travaux-card,
+body.dark-mode .travaux-form-card,
+body.dark-mode .travaux-form-header-modern,
+body.dark-mode .form-sticky-bottom-bar,
+body.dark-mode .search-results-section,
+[data-theme="dark"] .travaux-controls-card,
+[data-theme="dark"] .travaux-card,
+[data-theme="dark"] .travaux-form-card,
+[data-theme="dark"] .travaux-form-header-modern,
+[data-theme="dark"] .form-sticky-bottom-bar,
+[data-theme="dark"] .search-results-section {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+}
+
+body.dark-mode .travaux-stepper-header,
+[data-theme="dark"] .travaux-stepper-header {
+  background: #101826;
+  border-color: #243247;
+}
+
+body.dark-mode .travaux-stepper-item,
+[data-theme="dark"] .travaux-stepper-item {
+  color: #94a3b8;
+}
+
+body.dark-mode .travaux-stepper-item.is-active,
+[data-theme="dark"] .travaux-stepper-item.is-active {
+  color: #38bdf8;
+}
+
+body.dark-mode .travaux-stepper-item.is-done,
+[data-theme="dark"] .travaux-stepper-item.is-done {
+  color: #4ade80;
+}
+
+body.dark-mode .travaux-modern-table,
+body.dark-mode .travaux-table-wrapper,
+[data-theme="dark"] .travaux-modern-table,
+[data-theme="dark"] .travaux-table-wrapper {
+  background: #151f30;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .travaux-modern-table thead,
+[data-theme="dark"] .travaux-modern-table thead {
+  background: #0f172a;
+  border-bottom-color: #243247;
+}
+
+body.dark-mode .travaux-modern-table th,
+[data-theme="dark"] .travaux-modern-table th {
+  color: #94a3b8;
+}
+
+body.dark-mode .travaux-modern-table td,
+[data-theme="dark"] .travaux-modern-table td {
+  border-bottom-color: #1e293b;
+  color: #e2e8f0;
+}
+
+body.dark-mode .travaux-modern-table tbody tr:hover,
+[data-theme="dark"] .travaux-modern-table tbody tr:hover {
+  background-color: #1a273c;
+}
+
+body.dark-mode .travaux-input,
+body.dark-mode .travaux-select,
+body.dark-mode .travaux-textarea,
+body.dark-mode .travaux-search-bar input,
+body.dark-mode .form-field-input,
+body.dark-mode .form-field-select,
+body.dark-mode .form-field-textarea,
+[data-theme="dark"] .travaux-input,
+[data-theme="dark"] .travaux-select,
+[data-theme="dark"] .travaux-textarea,
+[data-theme="dark"] .travaux-search-bar input,
+[data-theme="dark"] .form-field-input,
+[data-theme="dark"] .form-field-select,
+[data-theme="dark"] .form-field-textarea {
+  background-color: #0b111e;
+  border-color: #243247;
+  color: #f8fafc;
+}
+
+body.dark-mode .travaux-input:focus,
+body.dark-mode .travaux-select:focus,
+body.dark-mode .travaux-textarea:focus,
+body.dark-mode .form-field-input:focus,
+body.dark-mode .form-field-select:focus,
+[data-theme="dark"] .travaux-input:focus,
+[data-theme="dark"] .travaux-select:focus,
+[data-theme="dark"] .travaux-textarea:focus,
+[data-theme="dark"] .form-field-input:focus,
+[data-theme="dark"] .form-field-select:focus {
+  border-color: #0088ce;
+  box-shadow: 0 0 0 3px rgba(0, 136, 206, 0.25);
+}
+
+body.dark-mode .travaux-impact-card,
+body.dark-mode .sub-result-card,
+[data-theme="dark"] .travaux-impact-card,
+[data-theme="dark"] .sub-result-card {
+  background: #101826;
+  border-color: #243247;
+  color: #f1f5f9;
+}
+
+body.dark-mode .sub-result-card:hover,
+[data-theme="dark"] .sub-result-card:hover {
+  background: #1a273c;
+  border-color: #3b82f6;
+}
+
+body.dark-mode .sub-result-card.is-selected,
+[data-theme="dark"] .sub-result-card.is-selected {
+  background: #0d2744;
+  border-color: #0088ce;
+}
+
+body.dark-mode .travaux-btn-outline,
+[data-theme="dark"] .travaux-btn-outline {
+  background: #151f30;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+body.dark-mode .travaux-btn-outline:hover,
+[data-theme="dark"] .travaux-btn-outline:hover {
+  background: #1e293b;
+  border-color: #64748b;
+  color: #ffffff;
+}
+
+body.dark-mode .travaux-empty-state,
+[data-theme="dark"] .travaux-empty-state {
+  background: #151f30;
+  border-color: #243247;
+}
+
+body.dark-mode .travaux-empty-text,
+[data-theme="dark"] .travaux-empty-text {
+  color: #94a3b8;
+}
+
+
diff --git a/src/pages/travaux/Travaux.js b/src/pages/travaux/Travaux.js
index 9806071..b2f118f 100644
--- a/src/pages/travaux/Travaux.js
+++ b/src/pages/travaux/Travaux.js
@@ -1,15 +1,27 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { getAllTravaux, deleteTravaux } from '../../api/travaux';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import NavPanel from '../../components/nav-panel/NavPanel';
+import { getAllTravaux, deleteTravaux, updateTravaux } from '../../api/travaux';
+import { getAllLignes } from '../../api/lignes';
 import { canPerform, getCurrentUser, getScopedRegionId } from '../../utils/userUtils';
 import './Travaux.css';
 
 const stripHtml = (html) => {
   if (!html) return '';
-  const tmp = document.createElement("DIV");
+  const tmp = document.createElement('DIV');
   tmp.innerHTML = html;
-  return tmp.textContent || tmp.innerText || "";
+  return tmp.textContent || tmp.innerText || '';
 };
 
+const JOURS_ORDER = [
+  { key: 'lundi', short: 'Lun', initial: 'L' },
+  { key: 'mardi', short: 'Mar', initial: 'M' },
+  { key: 'mercredi', short: 'Mer', initial: 'M' },
+  { key: 'jeudi', short: 'Jeu', initial: 'J' },
+  { key: 'vendredi', short: 'Ven', initial: 'V' },
+  { key: 'samedi', short: 'Sam', initial: 'S' },
+  { key: 'dimanche', short: 'Dim', initial: 'D' },
+];
+
 export default function Travaux() {
   const currentUser = getCurrentUser();
   const canCreateTravaux = canPerform(currentUser, 'travaux', 'create');
@@ -17,10 +29,16 @@ export default function Travaux() {
   const canDeleteTravaux = canPerform(currentUser, 'travaux', 'delete');
 
   const [travaux, setTravaux] = useState([]);
+  const [lignes, setLignes] = useState([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
-  const [filteredTravaux, setFilteredTravaux] = useState([]);
+  const [statusFilter, setStatusFilter] = useState('all'); // all, ongoing, upcoming, past, inactive, substitutions
+  const [selectedLigne, setSelectedLigne] = useState('all');
+  const [sortBy, setSortBy] = useState('date_desc'); // date_desc, date_asc, title_asc, substitutions_desc
+  const [viewMode, setViewMode] = useState('grid'); // grid | table
   const [scopedRegionId, setScopedRegionId] = useState(null);
+  const [selectedTravailDetail, setSelectedTravailDetail] = useState(null);
+  const [actionLoadingId, setActionLoadingId] = useState(null);
 
   // Charger les travaux
   const loadTravaux = useCallback(async () => {
@@ -28,19 +46,25 @@ export default function Travaux() {
     try {
       const regionId = getScopedRegionId(getCurrentUser());
       setScopedRegionId(regionId || null);
-      const { data, error } = await getAllTravaux(regionId);
-      if (!error && data) {
-        setTravaux(data);
-        setFilteredTravaux(data);
+      
+      const [travauxRes, lignesRes] = await Promise.all([
+        getAllTravaux(regionId),
+        getAllLignes(regionId)
+      ]);
+
+      if (!travauxRes.error && travauxRes.data) {
+        setTravaux(travauxRes.data);
       } else {
-        console.error('Erreur lors du chargement des travaux:', error);
+        console.error('Erreur chargement travaux:', travauxRes.error);
         setTravaux([]);
-        setFilteredTravaux([]);
+      }
+
+      if (!lignesRes.error && lignesRes.data) {
+        setLignes(lignesRes.data);
       }
     } catch (err) {
-      console.error('Exception lors du chargement:', err);
+      console.error('Exception chargement:', err);
       setTravaux([]);
-      setFilteredTravaux([]);
     } finally {
       setLoading(false);
     }
@@ -50,223 +74,965 @@ export default function Travaux() {
     loadTravaux();
   }, [loadTravaux]);
 
-  // Recherche
-  useEffect(() => {
-    if (!searchQuery.trim()) {
-      setFilteredTravaux(travaux);
-    } else {
-      const query = searchQuery.toLowerCase();
-      const filtered = travaux.filter(t =>
-        t.titre?.toLowerCase().includes(query) ||
-        stripHtml(t.description).toLowerCase().includes(query)
-      );
-      setFilteredTravaux(filtered);
+  // Helpers de dates
+  const toMidnight = (d) => {
+    if (!d) return null;
+    const x = new Date(d);
+    x.setHours(0, 0, 0, 0);
+    return x;
+  };
+
+  const today = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }, []);
+
+  const getTravailStatus = useCallback((t) => {
+    if (!t.actif) return { code: 'inactive', label: 'Inactif', wcsBadgeClass: 'wcs-secondary', icon: 'pause_circle' };
+    
+    const start = t.date_debut ? toMidnight(t.date_debut) : null;
+    const end = t.date_fin ? toMidnight(t.date_fin) : null;
+
+    if (start && start > today) {
+      return { code: 'upcoming', label: 'À venir', wcsBadgeClass: 'wcs-warning', icon: 'event' };
     }
-  }, [searchQuery, travaux]);
+    if (end && end < today) {
+      return { code: 'past', label: 'Terminé', wcsBadgeClass: 'wcs-secondary', icon: 'check_circle' };
+    }
+    return { code: 'ongoing', label: 'En cours', wcsBadgeClass: 'wcs-success', icon: 'play_circle' };
+  }, [today]);
+
+  // Statistiques KPIs
+  const stats = useMemo(() => {
+    const total = travaux.length;
+    let ongoing = 0;
+    let upcoming = 0;
+    let past = 0;
+    let inactive = 0;
+    let totalSubstitutions = 0;
+
+    travaux.forEach(t => {
+      const st = getTravailStatus(t);
+      if (st.code === 'ongoing') ongoing++;
+      else if (st.code === 'upcoming') upcoming++;
+      else if (st.code === 'past') past++;
+      else if (st.code === 'inactive') inactive++;
+
+      if (t.substitutions && t.substitutions.length > 0) {
+        totalSubstitutions += t.substitutions.length;
+      }
+    });
+
+    return { total, ongoing, upcoming, past, inactive, totalSubstitutions };
+  }, [travaux, getTravailStatus]);
+
+  // Filtrage et Tri
+  const filteredTravaux = useMemo(() => {
+    let result = [...travaux];
+
+    // Recherche plein texte
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(t => {
+        const inTitle = (t.titre || '').toLowerCase().includes(q);
+        const inDesc = stripHtml(t.description).toLowerCase().includes(q);
+        const inLigne = (t.ligne_nom || '').toLowerCase().includes(q);
+        const inSubs = (t.substitutions || []).some(s => {
+          const h = s.horaire || {};
+          return (
+            (h.numero_train || '').toString().toLowerCase().includes(q) ||
+            (h.gare_depart_nom || '').toLowerCase().includes(q) ||
+            (h.gare_arrivee_nom || '').toLowerCase().includes(q) ||
+            (h.ligne_nom || '').toLowerCase().includes(q)
+          );
+        });
+        return inTitle || inDesc || inLigne || inSubs;
+      });
+    }
+
+    // Filtre statut
+    if (statusFilter !== 'all') {
+      if (statusFilter === 'substitutions') {
+        result = result.filter(t => t.substitutions && t.substitutions.length > 0);
+      } else {
+        result = result.filter(t => getTravailStatus(t).code === statusFilter);
+      }
+    }
+
+    // Filtre ligne
+    if (selectedLigne !== 'all') {
+      result = result.filter(t => String(t.ligne_id || t.ligne_nom) === String(selectedLigne));
+    }
+
+    // Tri
+    result.sort((a, b) => {
+      if (sortBy === 'date_desc') {
+        return new Date(b.date_debut || 0) - new Date(a.date_debut || 0);
+      }
+      if (sortBy === 'date_asc') {
+        return new Date(a.date_debut || 0) - new Date(b.date_debut || 0);
+      }
+      if (sortBy === 'title_asc') {
+        return (a.titre || '').localeCompare(b.titre || '');
+      }
+      if (sortBy === 'substitutions_desc') {
+        return (b.substitutions?.length || 0) - (a.substitutions?.length || 0);
+      }
+      return 0;
+    });
+
+    return result;
+  }, [travaux, searchQuery, statusFilter, selectedLigne, sortBy, getTravailStatus]);
 
   // Supprimer un travail
-  const handleDelete = async (id) => {
+  const handleDelete = async (id, e) => {
+    if (e) e.stopPropagation();
     if (!canDeleteTravaux) {
-      alert('Vous n\'avez pas les droits pour supprimer des travaux.');
+      alert("Vous n'avez pas les droits pour supprimer des travaux.");
       return;
     }
     if (!window.confirm('Êtes-vous sûr de vouloir supprimer ces travaux ?')) {
       return;
     }
 
-    // Optimistic update : retirer immédiatement de l'UI
     const prevTravaux = travaux;
-    const prevFiltered = filteredTravaux;
     setTravaux(prev => prev.filter(t => String(t.id) !== String(id)));
-    setFilteredTravaux(prev => prev.filter(t => String(t.id) !== String(id)));
+    if (selectedTravailDetail && String(selectedTravailDetail.id) === String(id)) {
+      setSelectedTravailDetail(null);
+    }
 
     try {
       const { error } = await deleteTravaux(id);
       if (error) {
         alert('Erreur lors de la suppression : ' + (error.message || 'Erreur'));
-        console.error('Erreur suppression:', error);
-        // Rollback
         setTravaux(prevTravaux);
-        setFilteredTravaux(prevFiltered);
-        await loadTravaux();
       }
     } catch (err) {
-      console.error('Exception lors de la suppression:', err);
-      alert('Une erreur inattendue s\'est produite');
+      alert("Une erreur inattendue s'est produite lors de la suppression");
       setTravaux(prevTravaux);
-      setFilteredTravaux(prevFiltered);
-      await loadTravaux();
     }
   };
 
-  // Formater les jours
-  const formatJours = (jours) => {
-    if (!jours || jours.length === 0) return '—';
-    const joursMap = {
-      'lundi': 'Lun',
-      'mardi': 'Mar',
-      'mercredi': 'Mer',
-      'jeudi': 'Jeu',
-      'vendredi': 'Ven',
-      'samedi': 'Sam',
-      'dimanche': 'Dim'
-    };
-    return jours.map(j => joursMap[j] || j).join(', ');
+  // Basculer l'état actif/inactif
+  const handleToggleActif = async (travail, e) => {
+    if (e) e.stopPropagation();
+    if (!canUpdateTravaux) {
+      alert("Vous n'avez pas les droits pour modifier des travaux.");
+      return;
+    }
+
+    const newActif = !travail.actif;
+    setActionLoadingId(travail.id);
+
+    // Optimistic update
+    setTravaux(prev => prev.map(t => t.id === travail.id ? { ...t, actif: newActif } : t));
+    if (selectedTravailDetail && selectedTravailDetail.id === travail.id) {
+      setSelectedTravailDetail(prev => ({ ...prev, actif: newActif }));
+    }
+
+    try {
+      const { error } = await updateTravaux(travail.id, { actif: newActif });
+      if (error) {
+        alert("Erreur lors de la mise à jour : " + (error.message || 'Erreur'));
+        setTravaux(prev => prev.map(t => t.id === travail.id ? { ...t, actif: !newActif } : t));
+      }
+    } catch (err) {
+      console.error(err);
+      setTravaux(prev => prev.map(t => t.id === travail.id ? { ...t, actif: !newActif } : t));
+    } finally {
+      setActionLoadingId(null);
+    }
   };
 
-  // Formater les dates
+  // Formatage des dates
   const formatDate = (date) => {
     if (!date) return '—';
-    return new Date(date).toLocaleDateString('fr-FR');
+    return new Date(date).toLocaleDateString('fr-FR', {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric'
+    });
+  };
+
+  const formatShortDate = (date) => {
+    if (!date) return '—';
+    return new Date(date).toLocaleDateString('fr-FR', {
+      day: 'numeric',
+      month: 'short'
+    });
   };
 
-  // Formater les heures
   const formatHeure = (heure) => {
     if (!heure) return '—';
     return heure.substring(0, 5);
   };
 
+  const calculateDuration = (start, end) => {
+    if (!start || !end) return null;
+    const s = new Date(start);
+    const e = new Date(end);
+    const diffTime = Math.abs(e - s);
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+    return diffDays;
+  };
+
+  const isNightShift = (startH, endH) => {
+    if (!startH || !endH) return false;
+    const startHour = parseInt(startH.split(':')[0], 10);
+    const endHour = parseInt(endH.split(':')[0], 10);
+    return startHour >= 20 || startHour <= 5 || endHour <= 6;
+  };
+
   const navigate = (path) => {
     window.location.href = path;
   };
 
   return (
-    <div className="sncf-groupe travaux-page panel-layout">
-      <div className="panel-content travaux-page-content">
-        <header className="travaux-page-header">
-          <div>
-            <p className="travaux-page-kicker">Gestion</p>
-            <h1>Travaux et substitutions</h1>
-            <p className="travaux-page-description">
-              Pilotez les travaux sur les lignes et le suivi des substitutions associees.
-            </p>
-            {scopedRegionId && <p className="travaux-page-region">Region : <strong>{scopedRegionId}</strong></p>}
-          </div>
-          <wcs-button className="wcs-primary travaux-create-btn" onClick={() => canCreateTravaux && navigate('/travaux/creer')} disabled={!canCreateTravaux}>
-            <wcs-mat-icon icon="add"></wcs-mat-icon>
-            Creer des travaux
-          </wcs-button>
-        </header>
+    <div className="sncf-groupe travaux-page-root">
+      <div className="panel-layout">
+        <div className="panel-nav">
+          <NavPanel />
+        </div>
+        
+        <div className="panel-content travaux-modern-container">
+          {/* Header Hero Banner */}
+          <header className="travaux-hero-banner">
+            <div className="travaux-hero-content">
+              <div className="travaux-hero-tags">
+                <wcs-badge className="wcs-light" shape="round">
+                  <wcs-mat-icon icon="construction"></wcs-mat-icon>
+                  Supervision Infrastructure
+                </wcs-badge>
+                {scopedRegionId && (
+                  <wcs-badge className="wcs-info" shape="round">
+                    <wcs-mat-icon icon="place"></wcs-mat-icon>
+                    Région : {scopedRegionId}
+                  </wcs-badge>
+                )}
+              </div>
+              <h1 className="travaux-hero-title">Travaux et substitutions</h1>
+              <p className="travaux-hero-subtitle">
+                Supervisez les chantiers sur les lignes ferroviaires, suivez les fenêtres de coupure et pilotez les substitutions.
+              </p>
+            </div>
+            
+            <div className="travaux-hero-actions">
+              <wcs-button 
+                className="wcs-primary"
+                onClick={() => canCreateTravaux && navigate('/travaux/creer')} 
+                disabled={!canCreateTravaux}
+              >
+                <wcs-mat-icon icon="add" slot="prefix"></wcs-mat-icon>
+                Déclarer des travaux
+              </wcs-button>
+            </div>
+          </header>
 
-        <section className="travaux-toolbar">
-          <div className="travaux-search-box">
-            <wcs-mat-icon icon="search"></wcs-mat-icon>
-            <input
-              type="text"
-              className="travaux-search-input"
-              placeholder="Rechercher par titre ou description..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-          </div>
-          <span className="travaux-count-pill">{filteredTravaux.length} element(s)</span>
-        </section>
+          {/* KPI Dashboard Cards */}
+          <section className="travaux-kpi-grid">
+            <div 
+              className={`travaux-kpi-card ${statusFilter === 'all' ? 'active' : ''}`}
+              onClick={() => setStatusFilter('all')}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="kpi-icon-wrapper kpi-all">
+                <wcs-mat-icon icon="engineering"></wcs-mat-icon>
+              </div>
+              <div className="kpi-info">
+                <span className="kpi-label">Total chantiers</span>
+                <div className="kpi-value-row">
+                  <span className="kpi-value">{stats.total}</span>
+                </div>
+              </div>
+            </div>
 
-        {loading ? (
-          <div className="travaux-state travaux-state-loading">
-            <wcs-spinner mode="border" />
-            <p>Chargement des travaux...</p>
-          </div>
-        ) : filteredTravaux.length === 0 ? (
-          <div className="travaux-empty-state">
-            <wcs-mat-icon className="travaux-empty-icon" icon="construction"></wcs-mat-icon>
-            <h3>Aucun travaux</h3>
-            <p>
-              {searchQuery
-                ? 'Aucun travaux ne correspond a votre recherche'
-                : 'Commencez par creer des travaux'}
-            </p>
-            {!searchQuery && (
-              <wcs-button className="wcs-primary travaux-create-btn" onClick={() => canCreateTravaux && navigate('/travaux/creer')} disabled={!canCreateTravaux}>
-                <wcs-mat-icon icon="add"></wcs-mat-icon>
-                Creer des travaux
+            <div 
+              className={`travaux-kpi-card ${statusFilter === 'ongoing' ? 'active' : ''}`}
+              onClick={() => setStatusFilter('ongoing')}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="kpi-icon-wrapper kpi-ongoing">
+                <wcs-mat-icon icon="published_with_changes"></wcs-mat-icon>
+              </div>
+              <div className="kpi-info">
+                <span className="kpi-label">En cours aujourd'hui</span>
+                <div className="kpi-value-row">
+                  <span className="kpi-value text-success">{stats.ongoing}</span>
+                  <span className="kpi-subtext">Actifs sur le réseau</span>
+                </div>
+              </div>
+            </div>
+
+            <div 
+              className={`travaux-kpi-card ${statusFilter === 'upcoming' ? 'active' : ''}`}
+              onClick={() => setStatusFilter('upcoming')}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="kpi-icon-wrapper kpi-upcoming">
+                <wcs-mat-icon icon="event_upcoming"></wcs-mat-icon>
+              </div>
+              <div className="kpi-info">
+                <span className="kpi-label">Planifiés à venir</span>
+                <div className="kpi-value-row">
+                  <span className="kpi-value text-warning">{stats.upcoming}</span>
+                  <span className="kpi-subtext">À démarrer</span>
+                </div>
+              </div>
+            </div>
+
+            <div 
+              className={`travaux-kpi-card ${statusFilter === 'substitutions' ? 'active' : ''}`}
+              onClick={() => setStatusFilter('substitutions')}
+              role="button"
+              tabIndex={0}
+            >
+              <div className="kpi-icon-wrapper kpi-subs">
+                <wcs-mat-icon icon="swap_horiz"></wcs-mat-icon>
+              </div>
+              <div className="kpi-info">
+                <span className="kpi-label">Substitutions associées</span>
+                <div className="kpi-value-row">
+                  <span className="kpi-value text-primary">{stats.totalSubstitutions}</span>
+                  <span className="kpi-subtext">Trains et autocars</span>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Control Bar & Filters */}
+          <section className="travaux-controls-card">
+            <div className="travaux-search-bar">
+              <wcs-input
+                placeholder="Rechercher par titre, ligne, gares ou mot-clé..."
+                value={searchQuery}
+                onWcsChange={(e) => setSearchQuery(e.detail.value || '')}
+              >
+                <wcs-mat-icon icon="search" slot="prefix"></wcs-mat-icon>
+              </wcs-input>
+              {searchQuery && (
+                <wcs-button mode="clear" shape="small" className="wcs-secondary" onClick={() => setSearchQuery('')}>
+                  <wcs-mat-icon icon="close"></wcs-mat-icon>
+                </wcs-button>
+              )}
+            </div>
+
+            <div className="travaux-filters-row">
+              {/* Status Filter Tabs using WCS Buttons */}
+              <div className="travaux-tab-group">
+                <wcs-button
+                  mode={statusFilter === 'all' ? 'raised' : 'stroked'}
+                  className={statusFilter === 'all' ? 'wcs-primary' : 'wcs-secondary'}
+                  shape="small"
+                  onClick={() => setStatusFilter('all')}
+                >
+                  Tous ({stats.total})
+                </wcs-button>
+                <wcs-button
+                  mode={statusFilter === 'ongoing' ? 'raised' : 'stroked'}
+                  className={statusFilter === 'ongoing' ? 'wcs-success' : 'wcs-secondary'}
+                  shape="small"
+                  onClick={() => setStatusFilter('ongoing')}
+                >
+                  En cours ({stats.ongoing})
+                </wcs-button>
+                <wcs-button
+                  mode={statusFilter === 'upcoming' ? 'raised' : 'stroked'}
+                  className={statusFilter === 'upcoming' ? 'wcs-warning' : 'wcs-secondary'}
+                  shape="small"
+                  onClick={() => setStatusFilter('upcoming')}
+                >
+                  À venir ({stats.upcoming})
+                </wcs-button>
+                <wcs-button
+                  mode={statusFilter === 'past' ? 'raised' : 'stroked'}
+                  className={statusFilter === 'past' ? 'wcs-secondary' : 'wcs-secondary'}
+                  shape="small"
+                  onClick={() => setStatusFilter('past')}
+                >
+                  Terminés ({stats.past})
+                </wcs-button>
+                <wcs-button
+                  mode={statusFilter === 'inactive' ? 'raised' : 'stroked'}
+                  className={statusFilter === 'inactive' ? 'wcs-danger' : 'wcs-secondary'}
+                  shape="small"
+                  onClick={() => setStatusFilter('inactive')}
+                >
+                  Inactifs ({stats.inactive})
+                </wcs-button>
+              </div>
+
+              {/* Ligne, Sort & View Mode */}
+              <div className="travaux-dropdown-group">
+                {lignes.length > 0 && (
+                  <div className="custom-select-wrapper">
+                    <wcs-mat-icon icon="train" className="select-icon"></wcs-mat-icon>
+                    <select
+                      className="travaux-select"
+                      value={selectedLigne}
+                      onChange={(e) => setSelectedLigne(e.target.value)}
+                    >
+                      <option value="all">Toutes les lignes</option>
+                      {lignes.map(l => (
+                        <option key={l.id} value={l.id}>
+                          {l.nom || l.numero || `Ligne ${l.id}`}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                )}
+
+                <div className="custom-select-wrapper">
+                  <wcs-mat-icon icon="sort" className="select-icon"></wcs-mat-icon>
+                  <select
+                    className="travaux-select"
+                    value={sortBy}
+                    onChange={(e) => setSortBy(e.target.value)}
+                  >
+                    <option value="date_desc">Date de début (récent)</option>
+                    <option value="date_asc">Date de début (ancien)</option>
+                    <option value="title_asc">Titre (A à Z)</option>
+                    <option value="substitutions_desc">Plus de substitutions</option>
+                  </select>
+                </div>
+
+                {/* View switcher */}
+                <div className="view-mode-toggle">
+                  <wcs-button
+                    mode={viewMode === 'grid' ? 'raised' : 'stroked'}
+                    className={viewMode === 'grid' ? 'wcs-primary' : 'wcs-secondary'}
+                    shape="small"
+                    onClick={() => setViewMode('grid')}
+                    title="Vue Grille / Cartes"
+                  >
+                    <wcs-mat-icon icon="grid_view"></wcs-mat-icon>
+                  </wcs-button>
+                  <wcs-button
+                    mode={viewMode === 'table' ? 'raised' : 'stroked'}
+                    className={viewMode === 'table' ? 'wcs-primary' : 'wcs-secondary'}
+                    shape="small"
+                    onClick={() => setViewMode('table')}
+                    title="Vue Tableau compact"
+                  >
+                    <wcs-mat-icon icon="view_list"></wcs-mat-icon>
+                  </wcs-button>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          {/* Results Summary Bar */}
+          <div className="travaux-results-header">
+            <span className="results-count-text">
+              <strong>{filteredTravaux.length}</strong> chantier{filteredTravaux.length > 1 ? 's' : ''} trouvé{filteredTravaux.length > 1 ? 's' : ''}
+              {searchQuery && <span> pour la recherche « <em>{searchQuery}</em> »</span>}
+              {statusFilter !== 'all' && <span className="filter-badge-applied"> • Filtre : {statusFilter}</span>}
+            </span>
+
+            {(searchQuery || statusFilter !== 'all' || selectedLigne !== 'all') && (
+              <wcs-button 
+                mode="clear" 
+                shape="small" 
+                className="wcs-primary"
+                onClick={() => {
+                  setSearchQuery('');
+                  setStatusFilter('all');
+                  setSelectedLigne('all');
+                }}
+              >
+                <wcs-mat-icon icon="restart_alt" slot="prefix"></wcs-mat-icon>
+                Réinitialiser les filtres
               </wcs-button>
             )}
           </div>
-        ) : (
-          <div className="travaux-grid">
-            {filteredTravaux.map((t) => (
-              <article key={t.id} className="travaux-card">
-                <div className="travaux-card-header">
-                  <div>
-                    <h3>{t.titre}</h3>
-                    {t.description && (
-                      <div className="travaux-description" dangerouslySetInnerHTML={{ __html: t.description }} />
+
+          {/* Main Content Area: Loading / Empty / Grid / Table */}
+          {loading ? (
+            <div className="travaux-loading-container">
+              <wcs-spinner mode="border"></wcs-spinner>
+              <h3>Chargement des travaux en cours...</h3>
+              <p>Synchronisation avec l'infrastructure réseau...</p>
+            </div>
+          ) : filteredTravaux.length === 0 ? (
+            <div className="travaux-empty-modern">
+              <div className="empty-icon-bubble">
+                <wcs-mat-icon icon="construction"></wcs-mat-icon>
+              </div>
+              <h3>Aucun chantier trouvé</h3>
+              <p>
+                {searchQuery || statusFilter !== 'all' || selectedLigne !== 'all'
+                  ? 'Aucun résultat ne correspond à vos filtres de recherche actuels.'
+                  : 'Aucun chantier de travaux n\'est actuellement déclaré dans ce périmètre.'}
+              </p>
+              <div className="empty-actions">
+                {searchQuery || statusFilter !== 'all' || selectedLigne !== 'all' ? (
+                  <wcs-button 
+                    mode="stroked" 
+                    className="wcs-secondary" 
+                    onClick={() => {
+                      setSearchQuery('');
+                      setStatusFilter('all');
+                      setSelectedLigne('all');
+                    }}
+                  >
+                    Réinitialiser les filtres
+                  </wcs-button>
+                ) : (
+                  <wcs-button
+                    className="wcs-primary"
+                    onClick={() => canCreateTravaux && navigate('/travaux/creer')}
+                    disabled={!canCreateTravaux}
+                  >
+                    <wcs-mat-icon icon="add" slot="prefix"></wcs-mat-icon>
+                    Créer des travaux
+                  </wcs-button>
+                )}
+              </div>
+            </div>
+          ) : viewMode === 'grid' ? (
+            /* Cards Grid View */
+            <div className="travaux-cards-grid">
+              {filteredTravaux.map((t) => {
+                const status = getTravailStatus(t);
+                const duration = calculateDuration(t.date_debut, t.date_fin);
+                const isNight = isNightShift(t.heure_debut, t.heure_fin);
+                const jours = t.jours_travaux || [];
+
+                return (
+                  <article key={t.id} className={`travaux-modern-card ${!t.actif ? 'card-inactive' : ''}`}>
+                    {/* Top Card Bar */}
+                    <div className="card-top-bar">
+                      <div className="card-status-container">
+                        <wcs-badge className={status.wcsBadgeClass} shape="round">
+                          <wcs-mat-icon icon={status.icon}></wcs-mat-icon>
+                          {status.label}
+                        </wcs-badge>
+                        {t.ligne_nom && (
+                          <wcs-badge className="wcs-info" shape="round">
+                            <wcs-mat-icon icon="trending_up"></wcs-mat-icon>
+                            {t.ligne_nom}
+                          </wcs-badge>
+                        )}
+                      </div>
+
+                      {/* Quick Active Toggle */}
+                      <wcs-button
+                        mode="clear"
+                        shape="small"
+                        className={t.actif ? "wcs-primary" : "wcs-secondary"}
+                        onClick={(e) => handleToggleActif(t, e)}
+                        title={t.actif ? "Désactiver ce chantier" : "Activer ce chantier"}
+                        disabled={!canUpdateTravaux || actionLoadingId === t.id}
+                      >
+                        <wcs-mat-icon icon={t.actif ? "visibility" : "visibility_off"}></wcs-mat-icon>
+                      </wcs-button>
+                    </div>
+
+                    {/* Card Title & Description Preview */}
+                    <div className="card-main-info" onClick={() => setSelectedTravailDetail(t)} role="button" tabIndex={0}>
+                      <h2 className="card-title" title={t.titre}>{t.titre}</h2>
+                      
+                      {t.description ? (
+                        <p className="card-desc-preview">
+                          {stripHtml(t.description)}
+                        </p>
+                      ) : (
+                        <p className="card-desc-empty">Aucune description détaillée renseignée.</p>
+                      )}
+                    </div>
+
+                    {/* Meta Info Section */}
+                    <div className="card-metadata-section">
+                      {/* Timeline / Dates */}
+                      <div className="meta-item-box">
+                        <div className="meta-icon-col">
+                          <wcs-mat-icon icon="calendar_month"></wcs-mat-icon>
+                        </div>
+                        <div className="meta-content-col">
+                          <span className="meta-label">Période d'intervention</span>
+                          <span className="meta-value-strong">
+                            {formatShortDate(t.date_debut)} au {formatDate(t.date_fin)}
+                          </span>
+                          {duration && <span className="meta-subvalue">{duration} jour{duration > 1 ? 's' : ''} au total</span>}
+                        </div>
+                      </div>
+
+                      {/* Horaires */}
+                      <div className="meta-item-box">
+                        <div className="meta-icon-col">
+                          <wcs-mat-icon icon={isNight ? "bedtime" : "schedule"}></wcs-mat-icon>
+                        </div>
+                        <div className="meta-content-col">
+                          <span className="meta-label">Créneau horaire</span>
+                          <div className="meta-hours-row">
+                            <span className="meta-value-strong">
+                              {formatHeure(t.heure_debut)} - {formatHeure(t.heure_fin)}
+                            </span>
+                            {isNight && <wcs-badge className="wcs-secondary" shape="round">Nuit</wcs-badge>}
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Jours actifs */}
+                      <div className="meta-days-section">
+                        <span className="meta-label">Jours impactés</span>
+                        <div className="days-chip-row">
+                          {JOURS_ORDER.map(j => {
+                            const isSelected = jours.includes(j.key);
+                            return (
+                              <span 
+                                key={j.key} 
+                                className={`day-chip ${isSelected ? 'active' : 'inactive'}`}
+                                title={`${j.short} : ${isSelected ? 'Impacté' : 'Non impacté'}`}
+                              >
+                                {j.initial}
+                              </span>
+                            );
+                          })}
+                        </div>
+                      </div>
+
+                      {/* Substitutions info pill */}
+                      {t.substitutions && t.substitutions.length > 0 ? (
+                        <div className="card-substitutions-banner" onClick={() => setSelectedTravailDetail(t)}>
+                          <div className="subs-badge">
+                            <wcs-mat-icon icon="swap_horiz"></wcs-mat-icon>
+                            <span>{t.substitutions.length} substitution{t.substitutions.length > 1 ? 's' : ''}</span>
+                          </div>
+                          <span className="subs-view-link">Voir le détail</span>
+                        </div>
+                      ) : null}
+                    </div>
+
+                    {/* Card Actions Footer */}
+                    <div className="card-footer-actions">
+                      <wcs-button
+                        mode="stroked"
+                        shape="small"
+                        className="wcs-secondary"
+                        onClick={() => setSelectedTravailDetail(t)}
+                        title="Consulter les détails"
+                      >
+                        <wcs-mat-icon icon="info" slot="prefix"></wcs-mat-icon>
+                        Détails
+                      </wcs-button>
+
+                      <div className="footer-right-btns">
+                        <wcs-button
+                          mode="stroked"
+                          shape="small"
+                          className="wcs-primary"
+                          onClick={() => canUpdateTravaux && navigate(`/travaux/modifier/${t.id}`)}
+                          disabled={!canUpdateTravaux}
+                          title="Modifier les travaux"
+                        >
+                          <wcs-mat-icon icon="edit" slot="prefix"></wcs-mat-icon>
+                          Modifier
+                        </wcs-button>
+
+                        <wcs-button
+                          mode="stroked"
+                          shape="small"
+                          className="wcs-danger"
+                          onClick={(e) => handleDelete(t.id, e)}
+                          disabled={!canDeleteTravaux}
+                          title="Supprimer définitivement"
+                        >
+                          <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                        </wcs-button>
+                      </div>
+                    </div>
+                  </article>
+                );
+              })}
+            </div>
+          ) : (
+            /* Table View */
+            <div className="travaux-table-wrapper">
+              <table className="travaux-modern-table wcs-table">
+                <thead>
+                  <tr>
+                    <th>Statut</th>
+                    <th>Titre et Ligne</th>
+                    <th>Période</th>
+                    <th>Horaires</th>
+                    <th>Jours</th>
+                    <th>Substitutions</th>
+                    <th className="th-actions">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredTravaux.map((t) => {
+                    const status = getTravailStatus(t);
+                    const isNight = isNightShift(t.heure_debut, t.heure_fin);
+                    const jours = t.jours_travaux || [];
+
+                    return (
+                      <tr key={t.id} className={!t.actif ? 'tr-inactive' : ''}>
+                        <td>
+                          <wcs-badge className={status.wcsBadgeClass} shape="round">
+                            <wcs-mat-icon icon={status.icon}></wcs-mat-icon>
+                            {status.label}
+                          </wcs-badge>
+                        </td>
+                        <td>
+                          <div className="table-title-cell" onClick={() => setSelectedTravailDetail(t)}>
+                            <strong className="table-travail-title">{t.titre}</strong>
+                            {t.ligne_nom && (
+                              <span className="table-ligne-sub">
+                                <wcs-mat-icon icon="trending_up"></wcs-mat-icon>
+                                {t.ligne_nom}
+                              </span>
+                            )}
+                          </div>
+                        </td>
+                        <td>
+                          <div className="table-date-cell">
+                            <span>{formatShortDate(t.date_debut)} au {formatDate(t.date_fin)}</span>
+                          </div>
+                        </td>
+                        <td>
+                          <div className="table-time-cell">
+                            <span>{formatHeure(t.heure_debut)} - {formatHeure(t.heure_fin)}</span>
+                            {isNight && <wcs-badge className="wcs-secondary" shape="round">Nuit</wcs-badge>}
+                          </div>
+                        </td>
+                        <td>
+                          <div className="days-chip-row compact">
+                            {JOURS_ORDER.map(j => (
+                              <span 
+                                key={j.key} 
+                                className={`day-chip sm ${jours.includes(j.key) ? 'active' : 'inactive'}`}
+                              >
+                                {j.initial}
+                              </span>
+                            ))}
+                          </div>
+                        </td>
+                        <td>
+                          {t.substitutions && t.substitutions.length > 0 ? (
+                            <wcs-badge className="wcs-success" shape="round">
+                              <wcs-mat-icon icon="swap_horiz"></wcs-mat-icon>
+                              {t.substitutions.length}
+                            </wcs-badge>
+                          ) : (
+                            <span className="text-muted">—</span>
+                          )}
+                        </td>
+                        <td>
+                          <div className="table-actions-cell">
+                            <wcs-button
+                              mode="stroked"
+                              shape="small"
+                              className="wcs-secondary"
+                              onClick={() => setSelectedTravailDetail(t)}
+                              title="Aperçu"
+                            >
+                              <wcs-mat-icon icon="visibility"></wcs-mat-icon>
+                            </wcs-button>
+                            <wcs-button
+                              mode="stroked"
+                              shape="small"
+                              className="wcs-primary"
+                              onClick={() => canUpdateTravaux && navigate(`/travaux/modifier/${t.id}`)}
+                              disabled={!canUpdateTravaux}
+                              title="Modifier"
+                            >
+                              <wcs-mat-icon icon="edit"></wcs-mat-icon>
+                            </wcs-button>
+                            <wcs-button
+                              mode="stroked"
+                              shape="small"
+                              className="wcs-danger"
+                              onClick={(e) => handleDelete(t.id, e)}
+                              disabled={!canDeleteTravaux}
+                              title="Supprimer"
+                            >
+                              <wcs-mat-icon icon="delete"></wcs-mat-icon>
+                            </wcs-button>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {/* Modal / Slide-in Details Preview */}
+          {selectedTravailDetail && (
+            <div className="travaux-modal-overlay" onClick={() => setSelectedTravailDetail(null)}>
+              <div className="travaux-detail-modal" onClick={(e) => e.stopPropagation()}>
+                {/* Modal Header */}
+                <div className="modal-top-header">
+                  <div className="modal-header-info">
+                    <div className="modal-badges-row">
+                      {(() => {
+                        const status = getTravailStatus(selectedTravailDetail);
+                        return (
+                          <wcs-badge className={status.wcsBadgeClass} shape="round">
+                            <wcs-mat-icon icon={status.icon}></wcs-mat-icon>
+                            {status.label}
+                          </wcs-badge>
+                        );
+                      })()}
+                      {selectedTravailDetail.ligne_nom && (
+                        <wcs-badge className="wcs-info" shape="round">
+                          <wcs-mat-icon icon="trending_up"></wcs-mat-icon>
+                          {selectedTravailDetail.ligne_nom}
+                        </wcs-badge>
+                      )}
+                    </div>
+                    <h2>{selectedTravailDetail.titre}</h2>
+                  </div>
+                  <wcs-button 
+                    mode="clear"
+                    shape="small"
+                    className="wcs-secondary"
+                    onClick={() => setSelectedTravailDetail(null)}
+                    title="Fermer"
+                  >
+                    <wcs-mat-icon icon="close"></wcs-mat-icon>
+                  </wcs-button>
+                </div>
+
+                {/* Modal Body */}
+                <div className="modal-body-content">
+                  {/* Grid of Key Info */}
+                  <div className="modal-summary-cards">
+                    <div className="modal-card-stat">
+                      <wcs-mat-icon icon="calendar_today"></wcs-mat-icon>
+                      <div>
+                        <span className="stat-label">Période</span>
+                        <strong>Du {formatDate(selectedTravailDetail.date_debut)} au {formatDate(selectedTravailDetail.date_fin)}</strong>
+                      </div>
+                    </div>
+
+                    <div className="modal-card-stat">
+                      <wcs-mat-icon icon="schedule"></wcs-mat-icon>
+                      <div>
+                        <span className="stat-label">Horaires journaliers</span>
+                        <strong>{formatHeure(selectedTravailDetail.heure_debut)} à {formatHeure(selectedTravailDetail.heure_fin)}</strong>
+                      </div>
+                    </div>
+
+                    <div className="modal-card-stat full-width">
+                      <wcs-mat-icon icon="event_repeat"></wcs-mat-icon>
+                      <div>
+                        <span className="stat-label">Jours d'application</span>
+                        <div className="days-chip-row" style={{ marginTop: '6px' }}>
+                          {JOURS_ORDER.map(j => {
+                            const isSelected = (selectedTravailDetail.jours_travaux || []).includes(j.key);
+                            return (
+                              <span 
+                                key={j.key} 
+                                className={`day-chip ${isSelected ? 'active' : 'inactive'}`}
+                              >
+                                {j.short}
+                              </span>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Description Section */}
+                  <div className="modal-section">
+                    <h3 className="modal-section-title">
+                      <wcs-mat-icon icon="subject"></wcs-mat-icon>
+                      Description et consignes d'exploitation
+                    </h3>
+                    {selectedTravailDetail.description ? (
+                      <div 
+                        className="modal-rich-desc"
+                        dangerouslySetInnerHTML={{ __html: selectedTravailDetail.description }} 
+                      />
+                    ) : (
+                      <p className="text-muted">Aucune description renseignée.</p>
+                    )}
+                  </div>
+
+                  {/* Substitutions Section */}
+                  <div className="modal-section">
+                    <h3 className="modal-section-title">
+                      <wcs-mat-icon icon="swap_horiz"></wcs-mat-icon>
+                      Plan de transport de substitution ({selectedTravailDetail.substitutions?.length || 0})
+                    </h3>
+                    {selectedTravailDetail.substitutions && selectedTravailDetail.substitutions.length > 0 ? (
+                      <div className="modal-substitutions-list">
+                        {selectedTravailDetail.substitutions.map((sub, idx) => {
+                          const h = sub.horaire || {};
+                          return (
+                            <div key={sub.id || idx} className="substitution-detail-card">
+                              <div className="sub-train-badge">
+                                <wcs-mat-icon icon="directions_bus"></wcs-mat-icon>
+                                <strong>{h.numero_train ? `Train ${h.numero_train}` : 'Substitution'}</strong>
+                                {h.type_train && <wcs-badge className="wcs-secondary">{h.type_train}</wcs-badge>}
+                              </div>
+                              <div className="sub-route-info">
+                                <div className="sub-station">
+                                  <span className="station-name">{h.gare_depart_nom || 'Départ'}</span>
+                                  <span className="station-time">{formatHeure(h.heure_depart)}</span>
+                                </div>
+                                <wcs-mat-icon icon="arrow_forward" className="sub-arrow"></wcs-mat-icon>
+                                <div className="sub-station">
+                                  <span className="station-name">{h.gare_arrivee_nom || 'Arrivée'}</span>
+                                  <span className="station-time">{formatHeure(h.heure_arrivee)}</span>
+                                </div>
+                              </div>
+                              {h.ligne_nom && <wcs-badge className="wcs-info">{h.ligne_nom}</wcs-badge>}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <div className="empty-substitutions-box">
+                        <p>Aucun train ou autocar de substitution n'est associé à ce chantier de travaux.</p>
+                      </div>
                     )}
                   </div>
-                  <wcs-badge className={t.actif ? 'wcs-success' : 'wcs-secondary'}>
-                    {t.actif ? 'Actif' : 'Inactif'}
-                  </wcs-badge>
                 </div>
 
-                <div className="travaux-card-body">
-                  <div className="travaux-info-row">
-                    <span className="info-label">
-                      <wcs-mat-icon icon="calendar_today"></wcs-mat-icon>
-                      Periode
-                    </span>
-                    <span className="info-value">
-                      {formatDate(t.date_debut)} - {formatDate(t.date_fin)}
-                    </span>
-                  </div>
-
-                  <div className="travaux-info-row">
-                    <span className="info-label">
-                      <wcs-mat-icon icon="event"></wcs-mat-icon>
-                      Jours
-                    </span>
-                    <span className="info-value">{formatJours(t.jours_travaux)}</span>
-                  </div>
-
-                  <div className="travaux-info-row">
-                    <span className="info-label">
-                      <wcs-mat-icon icon="schedule"></wcs-mat-icon>
-                      Horaires
-                    </span>
-                    <span className="info-value">
-                      {formatHeure(t.heure_debut)} - {formatHeure(t.heure_fin)}
-                    </span>
-                  </div>
-
-                  {t.ligne_nom && (
-                    <div className="travaux-info-row">
-                      <span className="info-label">
-                        <wcs-mat-icon icon="trending_up"></wcs-mat-icon>
-                        Ligne
-                      </span>
-                      <span className="info-value">{t.ligne_nom}</span>
-                    </div>
-                  )}
-
-                  {t.substitutions && t.substitutions.length > 0 && (
-                    <div className="travaux-info-row">
-                      <span className="info-label">
-                        <wcs-mat-icon icon="swap_horiz"></wcs-mat-icon>
-                        Substitutions
-                      </span>
-                      <span className="info-value">
-                        {t.substitutions.length} train{t.substitutions.length > 1 ? 's' : ''}
-                      </span>
-                    </div>
-                  )}
-                </div>
-
-                <div className="travaux-card-footer">
-                  <wcs-button className="wcs-secondary wcs-small travaux-action-btn" onClick={() => canUpdateTravaux && navigate(`/travaux/modifier/${t.id}`)} disabled={!canUpdateTravaux}>
-                    <wcs-mat-icon icon="edit"></wcs-mat-icon>
-                    Modifier
-                  </wcs-button>
-                  <wcs-button className="wcs-danger wcs-small travaux-action-btn" onClick={() => handleDelete(t.id)} disabled={!canDeleteTravaux}>
-                    <wcs-mat-icon icon="delete"></wcs-mat-icon>
-                    Supprimer
+                {/* Modal Footer */}
+                <div className="modal-footer-bar">
+                  <wcs-button
+                    mode="stroked"
+                    className="wcs-secondary"
+                    onClick={() => setSelectedTravailDetail(null)}
+                  >
+                    Fermer
                   </wcs-button>
+
+                  <div className="modal-footer-right">
+                    <wcs-button
+                      mode="stroked"
+                      className="wcs-danger"
+                      onClick={() => handleDelete(selectedTravailDetail.id)}
+                      disabled={!canDeleteTravaux}
+                    >
+                      <wcs-mat-icon icon="delete" slot="prefix"></wcs-mat-icon>
+                      Supprimer
+                    </wcs-button>
+                    <wcs-button
+                      className="wcs-primary"
+                      onClick={() => navigate(`/travaux/modifier/${selectedTravailDetail.id}`)}
+                      disabled={!canUpdateTravaux}
+                    >
+                      <wcs-mat-icon icon="edit" slot="prefix"></wcs-mat-icon>
+                      Modifier le chantier
+                    </wcs-button>
+                  </div>
                 </div>
-              </article>
-            ))}
-          </div>
-        )}
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );
 }
-