V2.0.0 : VOICI LES MODIFICATIONS MAJEURS APPRTÉES DANS CETTE VERSION :

-> REFONTE DU DESIGN DES AFFICHEURS CLASSIQUES (GÉNÉRAL + QUAIS) -> IMPLÉMENTATION DU DESIGN AFL : GÉNÉRAL ET QUAIS -> CHOIX DE LA SÉLECTION DES TYPES D'AFFICHEURS (GÉNÉRAL / QUAIS) UNE FOIS LE TYPE D'AFFICHEUR SÉLECTIONNÉS EN COURS DE DÉVELOPPEMENT : -> IMPLÉMENTATION DES PERTURBATION DU LANDEMAIN POUR LES HORAIRES DU LANDEMAIN AFFICHÉS AVANT MINUIT. -> IMPLÉMENTATION DES AFFICHEURS D'INFORMATIONS / INFOS TRAVAUX, etc... (AFFICHEURS AFL)
2026-06-14 22:02:08 +02:00
1 parent f0d9ed9ee7
commit f06ebbaf48
@@ -1,17 +1,6 @@
-/* Copié depuis ClassiquesDeparts.css — styles identiques pour les arrivées */
-
-:where(.classiques-arrivees-container, .aff-quais__container--arrivees) {
-  /* variables locales aux composants Arrivées (ne pas définir sur :root) */
-  --green-dark: #2d522c; /* bande foncée */
-  --green: #38723c; /* bande claire */
-  --accent-yellow: #e1c14c; /* heure */
-  --white: #f3f3f3;
-  --rows: 9; /* 9 horaires visibles + 1 footer */
-  --footer-height: 100px; /* hauteur de la dernière 'ligne' servant de footer */
-  --watermark-green: rgb(75, 154, 84);
-}
-
-/* Déclaration des fontes Achemine (dans public/fonts/) */
+/* ══════════════════════════════════════════════════════════════════
+   Fontes Achemine
+   ══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Achemine';
  src: url('/public/fonts/achemine_regular.ttf') format('truetype');
@@ -34,365 +23,400 @@
  font-display: swap;
 }

-.classiques-arrivees-container{
+/* ══════════════════════════════════════════════════════════════════
+   ANIMATIONS
+   ══════════════════════════════════════════════════════════════════ */
+
+/* Info cause perturbation — slide-in de droite vers la gauche */
+@keyframes infoWrapperGrow {
+  from { max-width: 0; }
+  to   { max-width: 30vw; }
+}
+
+@keyframes infoSlideIn {
+  from { transform: translateX(100%); opacity: 0; }
+  40%  { opacity: 1; }
+  to   { transform: translateX(0%);   opacity: 1; }
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   CONTENEUR PRINCIPAL
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__container {
+  /* Couleurs inspirées du vrai afficheur SNCF */
+  --yellow:      #FFCC00;
+  --blue-bg:     #1e4a30;
+  --blue-odd:    #216b3e;
+  --blue-even:   #16552a;
+  --text-white:  #ffffff;
+  --text-muted:  #7EE0A0;
+
  position: relative;
-  width: 100%;
+  width: 100vw;
  height: 100vh;
-  /* autoriser l'affichage des boîtes agrandies qui débordent des lignes */
-  overflow: visible;
-  font-family: "Achemine", "Helvetica Neue", Arial, sans-serif;
-  background: var(--green-dark);
-  /* plus de padding-bottom : le footer sera superposé en position absolute */
-}
-
-.station-box-arrivees{
-  position: absolute;
-  left: 18px;
-  top: 12px;
-  color: #ffffff;
-  background: rgba(0,0,0,0.08);
-  padding: 6px 10px;
-  border-radius: 6px;
-  font-weight: 700;
-  z-index: 40;
-}
-
-.classiques-arrivees-container{
-  border-bottom-right-radius: 10px;
-  border-bottom-left-radius: 4px;
-}
-
-.arrivees-list{
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  /* La liste occupe toute la hauteur de l'écran; le footer sera affiché
-     en position absolue par-dessus la partie inférieure. */
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.arrivee-row{
-  display: flex;
-  /* laisser les colonnes occuper toute la hauteur de la ligne, puis centrer leur contenu */
-  align-items: stretch;
-  box-sizing: border-box;
-  padding: 0 1.2vw;
-  /* Répartit l'espace en var(--rows) parts ; on utilise 100% / var(--rows) pour que
-     9 lignes + 1 footer occupent l'écran de façon uniforme. */
-  flex: 0 0 calc(100% / var(--rows));
-  min-height: 50px; /* garde une bonne hauteur sur petits écrans */
-  max-height: 120px;
-  position: relative; /* pour positionner la .platform-box en absolu */
-  overflow: visible; /* laisser la platform-box déborder si agrandie */
-}
-
-.arrivee-row:nth-child(odd){
-  background: var(--green);
-}
-.arrivee-row:nth-child(even){
-  background: var(--green-dark);
-}
-
-/* Cacher la dernière ligne qui sera sous le footer */
-/* ne plus cacher la dernière ligne — on laisse le footer la recouvrir visuellement */
-
-.col-logo-arrivees{
-  max-width: 100px;
-  display:flex;
-  /* organiser verticalement les éléments et les centrer verticalement */
-  flex-direction: column;
-  justify-content: center; /* centre verticalement le contenu (logo + meta) */
-  align-items: flex-start; /* garder l'alignement horizontal à gauche */
-  flex: 0 0 10%; /* largeur fixe pour se comporter comme une colonne de tableau */
-}
-.logo-box-arrivees{
-  /* pastille/logo : ne pas forcer la hauteur pour permettre l'empilement vertical */
-  height: auto;
-  width: 100px;
-  display:flex;
-  align-items:flex-start;
-  justify-content:center;
-  font-weight:800;
-  font-size: clamp(14px, 1.6vw, 20px);
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  align-self: flex-start; /* centrer la pastille dans la colonne */
-}
-
-/* Logo SVG chargé depuis public/type */
-.op-logo-arrivees{
-  max-width: 90%;
-  max-height: 100%;
-  height: auto;
-}
-
-/* Texte à l'intérieur de la pastille/logo (quai) */
-.logo-text-arrivees{
-  text-align: center;
-  /* taille plus grande, responsive ; s'assure qu'elle reste lisible sur petits et grands écrans */
-  font-size: 20px;
-  line-height: 1;
-  letter-spacing: 0.5px;
-}
-
-
-.col-time-arrivees{
-  max-width: 15%;
-  padding-left: 20px;
-  display:flex;
-  /* colonne verticale : centrer verticalement l'heure */
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 18%; /* largeur fixe pour alignement table-like */
-}
-.time-arrivees{
-  color: var(--accent-yellow);
-  font-weight:850;
-  /* tailles responsives similaires à l'image */
-  font-size: clamp(26px, 7.5vw, 70px);
-  line-height: 1;
-  display: flex;
-  align-items: baseline; /* centre le chiffre verticalement */
-  height: auto;
-  width: 100%; /* occupe toute la colonne pour être centré */
-  text-align: center;
-}
-
-.col-destination-arrivees{
-  flex: 1 1 auto; /* colonne flexible qui prend l'espace restant */
-  display: flex;
-  /* colonne verticale : centrer verticalement la destination */
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start; /* garder le texte aligné à gauche */
-}
-.destination-arrivees{
-  color: var(--white);
-  font-weight: 500;
-  font-size: clamp(28px, 8vw, 80px);
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
+  background: var(--blue-bg);
+  font-family: "Achemine", "Arial Narrow", Arial, sans-serif;
 }

-.col-platform-arrivees{
-  /* La colonne laisse la boîte gérer sa taille ; on aligne la boîte à droite
-     et l'on centre verticalement pour qu'elle suive la hauteur de la ligne. */
-  display:flex;
-  flex: 0 0 8%;
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: 0.5vw;
-  box-sizing: border-box;
-}
-.platform-box-arrivees{
-  /* Boîte quai : garder un format carré mais ne pas forcer l'étirement vertical */
-  height: 90px; /* limite maximale, garde l'aspect visuel */
-  width: 90px;
-  aspect-ratio: 1 / 1; /* carré strict */
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  background: transparent; /* intérieur transparent pour montrer la couleur de la ligne */
-  border-radius: 12px;
-  box-sizing: border-box;
-  border: 4px solid #ffffff; /* bord blanc épais */
-  padding: 8px; /* espace intérieur pour éloigner le texte du bord */
-  flex: 0 0 auto;
-  align-self: center;
-}
-.platform-text-arrivees{
-  color: #ffffff;
-  font-weight: 900;
-  /* réduire légèrement la taille du texte afin qu'il ne touche pas la bordure */
-  font-size: clamp(60px, 2.6vw, 100px);
-  line-height:1;
-  letter-spacing: 0.8px;
-}
-/* removed duplicated/corrupted block */
-
-.col-train-type-arrivees{
-  max-width: 9%;
-  display:flex;
-  /* colonne verticale : centrer verticalement l'heure */
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
-  flex: 0 0 18%; /* largeur fixe pour alignement table-like */
-}
-.train-type-box-arrivees{
-  height: auto;
-  aspect-ratio: 1 / 1;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  background: transparent;
-  border-radius: 10px;
-  box-sizing: border-box;
-}
-.train-type-fallback-arrivees{ text-align:center; }
-
-
-.train-meta-arrivees{
-  flex-direction:column;
-  align-items:flex-start;
-  /* centrer verticalement sans forcer la hauteur (pour permettre l'empilement) */
-  justify-content: center;
-  color: #ffffff;
-  height: auto;
-  flex: 0 0 auto;
-}
-.train-meta-arrivees .op-name-arrivees{
-  font-weight:900;
-  font-size:1.50rem; /* plus visible */
-  padding-left: 20px;
-  line-height:1;
-  justify-content: flex-start;
-  text-align: left; /* aligner à gauche dans la colonne */
-}
-.train-meta-arrivees .op-number-arrivees{
-  font-weight:500;
-  font-size:1.25rem;
-  padding-left: 20px;
-  text-align: left; /* aligner à gauche */
-  margin: 0 0 2px 0;
-}
-
-.train-meta-arrivees.status-delayed-arrivees .op-name-arrivees,
-.train-meta-arrivees.status-delayed-arrivees .op-number-arrivees,
-.train-meta-arrivees.status-suppressed-arrivees .op-name-arrivees,
-.train-meta-arrivees.status-suppressed-arrivees .op-number-arrivees{
-  color: var(--accent-yellow);
-}
-
-/* Si on veut un alignement plus spécifique quand train-meta apparaît dans la colonne de type */
-.col-train-type-arrivees .train-meta-arrivees{ align-items: flex-start; justify-content: center; }
-.col-train-type-arrivees .train-meta-arrivees .op-name-arrivees,
-.col-train-type-arrivees .train-meta-arrivees .op-number-arrivees{ text-align: left; }
-
-.watermark-arrivees{
+/* ══════════════════════════════════════════════════════════════════
+   WATERMARK "arrivées" — pivotée à 90°, fixée à droite
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__watermark {
  position: absolute;
-  /* placer strictement à droite et faire déborder le watermark en dehors de l'afficheur */
-  right: -6vw; /* décalage vers l'extérieur pour qu'il soit strictement à droite */
+  right: -9vh;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
-  font-size: 10.8vw;
-  color: var(--watermark-green);
-  font-weight:800;
-  letter-spacing: 6px;
+  /* Taille géante, très visible comme dans l'image */
+  font-size: 23vh;
+  color: #216b3e;
+  font-weight: 900;
+  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
-  /* s'assurer qu'il soit au-dessus des lignes */
-  z-index: 45;
+  z-index: 1;
+  white-space: nowrap;
+  opacity: 0.3; /* Opacité diminuée */
 }

-.helpline-arrivees{
-  position: absolute;
-  right: 18px;
-  top: 12px;
-  width:80px;
-  height:80px;
-  border-radius:6px;
-  border:3px solid #fff;
-  color:#fff;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  font-weight:900;
+/* ══════════════════════════════════════════════════════════════════
+   LISTE STATIQUE — 10 lignes sur exactement 100vh
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 2;
 }

-.clock-container-arrivees{
-  position: relative; /* contenu positionné par le footer */
-  pointer-events: none;
-  z-index: 30; /* au-dessus du footer */
-  display: inline-flex;
-  align-items: center;
-  height: 100%; /* prendra la hauteur de la ligne footer */
+/* ══════════════════════════════════════════════════════════════════
+   MODE DÉFILEMENT — conteneur + track animé
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__scroll-container {
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
 }
-.clock-box-arrivees{
-  display: inline-flex;
+
+/* Le track contient 2× les données pour une boucle seamless */
+.aff-classiques-arrivees__scroll-track {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   ROW — chaque ligne occupe 1/10 de 100vh
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__row {
+  display: flex;
  align-items: center;
-  justify-content: center;
-  background: var(--green-dark); /* fond foncé interne comme sur la maquette */
-  border-radius: 10px;
-  padding: 4px 8px; /* réduire padding pour diminuer légèrement la taille globale */
-  border: 6px solid #ffffff; /* bordure un peu moins épaisse */
-  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
+  flex: 0 0 calc(100vh / 10);
+  height: calc(100vh / 10);
+  min-height: 0;
+  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
-  /* hauteur adaptée pour rentrer exactement dans la ligne footer */
-  height: calc(var(--footer-height) - 12px);
-  min-height: 34px;
 }

-.afficheur-footer-arrivees{
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: var(--footer-height);
+/* Alternance de tons bleus (comme l'image) */
+.aff-classiques-arrivees__row:nth-child(odd)  { background: var(--blue-odd); }
+.aff-classiques-arrivees__row:nth-child(even) { background: var(--blue-even); }
+
+.aff-classiques-arrivees__row--empty {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-white);
+  font-size: 3vh;
+  text-align: center;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 1 — Logo opérateur  (~9 % largeur)
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__col-logo {
+  width: 9vw;
+  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
-  pointer-events: none;
-  z-index: 20; /* en dessous de l'horloge */
-}
-.afficheur-footer-arrivees .footer-inner-arrivees{
-  width: 100%;
  height: 100%;
-  position: relative;
+  padding: 0 0.4vw;
+  box-sizing: border-box;
+}
+
+.aff-classiques-arrivees__logo-box {
+  width: 100%;
+  /* Logo prend ~65% de la hauteur de la ligne */
+  height: 6vh;
  display: flex;
-  align-items: center; /* centre verticalement le contenu (la clock) */
-  justify-content: flex-end; /* place la clock à droite */
-  padding-right: 12px; /* espace entre le bord et la clock pour le coin arrondi */
-  /* léger dégradé pour donner l'effet de bande plus claire en haut */
-  background: linear-gradient(to bottom, rgba(11,123,180,0.18) 0%, var(--green-dark) 30%);
-  box-shadow: inset 0 6px 0 rgba(0,0,0,0.08);
-  /* arrondir côté droit comme sur la maquette */
-
+  align-items: center;
+  justify-content: center;
 }

-/* légère ligne (accent) en haut du footer pour séparer visuellement */
-.afficheur-footer-arrivees .footer-inner-arrivees::before{
-  content: '';
+.aff-classiques-arrivees__op-logo {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.aff-classiques-arrivees__logo-text {
+  color: var(--text-white);
+  font-weight: 700;
+  font-size: 2vh;
+  text-align: center;
+  word-break: break-word;
+  line-height: 1.1;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 2 — Type + Numéro  OU  Statut  (~11 % largeur)
+   Alterne toutes les 4 secondes
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__col-meta {
+  width: 11vw;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 0.5vw 0 0;
+  box-sizing: border-box;
+  gap: 0.05vh;
+  overflow: hidden;
+  text-align: center;
+}
+
+/* Vue normale — type (ex: "MOBIGO") */
+.aff-classiques-arrivees__train-type {
+  font-size: 2.2vh;
+  color: var(--text-white);
+  font-weight: 600;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+/* Vue normale — numéro de sillon (ex: "894251") */
+.aff-classiques-arrivees__train-number {
+  font-size: 2.2vh;
+  color: var(--text-white);
+  font-weight: 400;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+/* Vue statut — à l'heure */
+.aff-classiques-arrivees__status-ontime {
+  font-size: 2.2vh;
+  color: var(--text-white);
+  font-weight: 400;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+/* Vue statut — retardé */
+.aff-classiques-arrivees__status-delayed {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1.15;
+}
+
+.aff-classiques-arrivees__status-label {
+  font-size: 2.2vh;
+  color: var(--yellow);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.aff-classiques-arrivees__status-value {
+  font-size: 2.2vh;
+  color: var(--yellow);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* Vue statut — supprimé */
+.aff-classiques-arrivees__status-suppressed {
+  font-size: 2.2vh;
+  color: var(--yellow);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 3 — Heure  (~15 % largeur)
+   Grande, jaune vif (#FFCC00), bold — comme dans l'image
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__col-time {
+  width: 15vw;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  padding: 0 0.3vw 0 0;
+  box-sizing: border-box;
+}
+
+.aff-classiques-arrivees__time {
+  /* Jaune vif exactement comme dans la vidéo/image */
+  color: var(--yellow);
+  font-weight: 700;
+  /* Grande taille — occupe ~65% de la hauteur de ligne */
+  font-size: 6.5vh;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 4 — Destination + Info cause  (flex:1 — prend tout le reste)
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__col-origin {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  height: 100%;
+  padding-right: 0.5vw;
+}
+
+/* Texte destination — blanc, bold, très grand */
+.aff-classiques-arrivees__destination {
+  color: var(--text-white);
+  font-weight: 700;
+  font-size: 6.5vh;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* ─── Wrapper animé cause perturbation ────────────────────────── */
+.aff-classiques-arrivees__info-wrapper {
+  flex-shrink: 0;
+  overflow: hidden;
+  max-width: 0;
+  animation: infoWrapperGrow 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.aff-classiques-arrivees__info-inner {
+  display: flex;
+  align-items: center;
+  transform: translateX(100%);
+  animation: infoSlideIn 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  white-space: nowrap;
+}
+
+.aff-classiques-arrivees__separator {
+  color: var(--text-white);
+  font-size: 4.5vh;
+  font-weight: 200;
+  line-height: 1;
+  flex-shrink: 0;
+  padding: 0 0.9vw;
+}
+
+.aff-classiques-arrivees__info-text {
+  color: var(--text-white);
+  font-size: 1.9vh;
+  font-weight: 400;
+  white-space: normal;
+  overflow: hidden;
+  line-height: 1.25;
+  max-width: 22vw;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 5 — Quai OU icône bus  (~6.5 % largeur)
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__col-platform {
+  width: 6.5vw;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0.5vh 0.4vw;
+}
+
+/* Boîte quai — bordure blanche */
+.aff-classiques-arrivees__platform-box {
+  width: 6vh;
+  height: 6vh;
+  border: 2.5px solid rgba(255, 255, 255, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  background: transparent;
+  box-sizing: border-box;
+}
+
+.aff-classiques-arrivees__platform-text {
+  color: var(--text-white);
+  font-weight: 700;
+  font-size: 4.5vh;
+  line-height: 1;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   HORLOGE — superposée en bas à droite  (z-index élevé)
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-arrivees__footer {
  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 8px;
-  background: rgba(255,255,255,0.03);
+  right: 1.2vw;
+  bottom: 0.8vh;
+  z-index: 30;
  pointer-events: none;
-  border-top-right-radius: 12px;
 }
-.clock-main-arrivees{
-  color: #ffffff;
-  font-weight: 800;
-  /* légèrement plus petit pour tenir dans le footer */
-  font-size: clamp(28px, 4.2vw, 60px);
-  line-height: 1;
-  font-family: "Achemine", "Helvetica Neue", Arial, sans-serif;
-  margin-right: 6px;
+
+.aff-classiques-arrivees__clock-container {
+  display: flex;
+  align-items: center;
 }
-.clock-seconds-arrivees{
-  color: var(--accent-yellow);
+
+.aff-classiques-arrivees__clock-box {
+  border: 2.5px solid rgba(255, 255, 255, 0.88);
+  background: rgba(0, 51, 102, 0.93);
+  border-radius: 8px;
+  padding: 0.4vh 1.1vw;
+  display: flex;
+  align-items: baseline;
+  gap: 0.5vw;
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
+}
+
+.aff-classiques-arrivees__clock-main {
+  color: var(--text-white);
  font-weight: 800;
-  font-size: clamp(16px, 2.8vw, 36px);
+  font-size: 4.4vh;
  line-height: 1;
 }

-/* Ajustements pour petits écrans */
-@media (max-width: 700px){
-  .col-logo-arrivees{width: 18%;}
-  .col-time-arrivees{width: 24%;}
-  .watermark-arrivees{display:none}
+.aff-classiques-arrivees__clock-seconds {
+  color: var(--yellow);
+  font-weight: 800;
+  font-size: 2.7vh;
+  line-height: 1;
 }

-
-
-
-
-
+/* masqué */
+.aff-classiques-arrivees__station-box { display: none; }
@@ -1,15 +1,6 @@
-
-.aff-classiques-departs__container{
-  --blue-dark: #173771; /* bande foncée */
-  --blue: #275e9f; /* bande claire */
-  --accent-yellow: #e1c14c; /* heure */
-  --white: #f3f3f3;
-  --rows: 9; /* 9 horaires visibles + 1 footer */
-  --footer-height: 100px; /* hauteur de la dernière 'ligne' servant de footer */
-  --watermark-blue: rgba(10,120,180,0.15);
-}
-
-/* Déclaration des fontes Achemine (dans public/fonts/) */
+/* ══════════════════════════════════════════════════════════════════
+   Fontes Achemine
+   ══════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Achemine';
  src: url('/public/fonts/achemine_regular.ttf') format('truetype');
@@ -32,367 +23,400 @@
  font-display: swap;
 }

-/* Conteneur plein écran pour l'afficheur */
-.aff-classiques-departs__container{
+/* ══════════════════════════════════════════════════════════════════
+   ANIMATIONS
+   ══════════════════════════════════════════════════════════════════ */
+
+/* Info cause perturbation — slide-in de droite vers la gauche */
+@keyframes infoWrapperGrow {
+  from { max-width: 0; }
+  to   { max-width: 30vw; }
+}
+
+@keyframes infoSlideIn {
+  from { transform: translateX(100%); opacity: 0; }
+  40%  { opacity: 1; }
+  to   { transform: translateX(0%);   opacity: 1; }
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   CONTENEUR PRINCIPAL
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__container {
+  /* Couleurs inspirées du vrai afficheur SNCF */
+  --yellow:      #FFCC00;
+  --blue-bg:     #003a79;
+  --blue-odd:    #0163ab;
+  --blue-even:   #003a79;
+  --text-white:  #ffffff;
+  --text-muted:  #7EB8E0;
+
  position: relative;
-  width: 100%;
+  width: 100vw;
  height: 100vh;
-  /* autoriser l'affichage des boîtes agrandies qui débordent des lignes */
-  overflow: visible;
-  font-family: "Achemine", "Helvetica Neue", Arial, sans-serif;
-  background: var(--blue-dark);
-  /* plus de padding-bottom : le footer sera superposé en position absolute */
-}
-
-/* Boîte affichant le nom de la gare configuré via ?gare=Nom-de-la-gare */
-.aff-classiques-departs__station-box{
-  position: absolute;
-  left: 18px;
-  top: 12px;
-  color: #ffffff;
-  background: rgba(0,0,0,0.08);
-  padding: 6px 10px;
-  border-radius: 6px;
-  font-weight: 700;
-  z-index: 40;
-}
-
-/* arrondir légèrement le bas de l'afficheur pour coller à la maquette */
-.aff-classiques-departs__container{
-  border-bottom-right-radius: 10px;
-  border-bottom-left-radius: 4px;
-}
-
-/* Liste des lignes (bandes horizontales) */
-.aff-classiques-departs__list{
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  /* La liste occupe toute la hauteur de l'écran; le footer sera affiché
-     en position absolue par-dessus la partie inférieure. */
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.aff-classiques-departs__row{
-  display: flex;
-  /* laisser les colonnes occuper toute la hauteur de la ligne, puis centrer leur contenu */
-  align-items: stretch;
-  box-sizing: border-box;
-  padding: 0 1.2vw;
-  /* Répartit l'espace en var(--rows) parts ; on utilise 100% / var(--rows) pour que
-     9 lignes + 1 footer occupent l'écran de façon uniforme. */
-  flex: 0 0 calc(100% / var(--rows));
-  min-height: 50px; /* garde une bonne hauteur sur petits écrans */
-  max-height: 120px;
-  position: relative; /* pour positionner la .platform-box en absolu */
-  overflow: visible; /* laisser la platform-box déborder si agrandie */
-}
-
-.aff-classiques-departs__row:nth-child(odd){
-  background: var(--blue);
-}
-.aff-classiques-departs__row:nth-child(even){
-  background: var(--blue-dark);
-}
-
-/* Colonne logo */
-.aff-classiques-departs__col-logo{
-  max-width: 100px;
-  display:flex;
-  /* organiser verticalement les éléments et les centrer verticalement */
-  flex-direction: column;
-  justify-content: center; /* centre verticalement le contenu (logo + meta) */
-  align-items: flex-start; /* garder l'alignement horizontal à gauche */
-  flex: 0 0 10%; /* largeur fixe pour se comporter comme une colonne de tableau */
-}
-.aff-classiques-departs__logo-box{
-  /* pastille/logo : ne pas forcer la hauteur pour permettre l'empilement vertical */
-  height: auto;
-  width: 100px;
-  display:flex;
-  align-items:flex-start;
-  justify-content:center;
-  font-weight:800;
-  font-size: clamp(14px, 1.6vw, 20px);
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  align-self: flex-start; /* centrer la pastille dans la colonne */
-}
-
-/* Logo SVG chargé depuis public/type */
-.aff-classiques-departs__op-logo{
-  max-width: 90%;
-  max-height: 100%;
-  height: auto;
-}
-
-/* Texte à l'intérieur de la pastille/logo (quai) */
-.aff-classiques-departs__logo-text{
-  text-align: center;
-  /* taille plus grande, responsive ; s'assure qu'elle reste lisible sur petits et grands écrans */
-  font-size: 20px;
-  line-height: 1;
-  letter-spacing: 0.5px;
-}
-
-
-/* Colonne heure */
-.aff-classiques-departs__col-time{
-  max-width: 15%;
-  padding-left: 20px;
-  display:flex;
-  /* colonne verticale : centrer verticalement l'heure */
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 18%; /* largeur fixe pour alignement table-like */
-}
-.aff-classiques-departs__time{
-  color: var(--accent-yellow);
-  font-weight:850;
-  /* tailles responsives similaires à l'image */
-  font-size: clamp(26px, 7.5vw, 70px);
-  line-height: 1;
-  display: flex;
-  align-items: baseline; /* centre le chiffre verticalement */
-  height: auto;
-  width: 100%; /* occupe toute la colonne pour être centré */
-  text-align: center;
-}
-
-/* Destination */
-.aff-classiques-departs__col-destination{
-  flex: 1 1 auto; /* colonne flexible qui prend l'espace restant */
-  display: flex;
-  /* colonne verticale : centrer verticalement la destination */
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start; /* garder le texte aligné à gauche */
-}
-.aff-classiques-departs__destination{
-  color: var(--white);
-  font-weight: 500;
-  font-size: clamp(28px, 8vw, 80px);
-  white-space: nowrap;
-  text-overflow: ellipsis;
  overflow: hidden;
+  background: var(--blue-bg);
+  font-family: "Achemine", "Arial Narrow", Arial, sans-serif;
 }

-/* Colonne Platform (quai) affichée à droite de chaque ligne */
-.aff-classiques-departs__col-platform{
-  /* La colonne laisse la boîte gérer sa taille ; on aligne la boîte à droite
-     et l'on centre verticalement pour qu'elle suive la hauteur de la ligne. */
-  display:flex;
-  flex: 0 0 8%;
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: 0.5vw;
-  box-sizing: border-box;
-}
-.aff-classiques-departs__platform-box{
-  /* Boîte quai : garder un format carré mais ne pas forcer l'étirement vertical */
-  height: 90px; /* limite maximale, garde l'aspect visuel */
-  width: 90px;
-  aspect-ratio: 1 / 1; /* carré strict */
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  background: transparent; /* intérieur transparent pour montrer la couleur de la ligne */
-  border-radius: 12px;
-  box-sizing: border-box;
-  border: 4px solid #ffffff; /* bord blanc épais */
-  padding: 8px; /* espace intérieur pour éloigner le texte du bord */
-  flex: 0 0 auto;
-  align-self: center;
-}
-.aff-classiques-departs__platform-text{
-  color: #ffffff;
-  font-weight: 900;
-  /* réduire légèrement la taille du texte afin qu'il ne touche pas la bordure */
-  font-size: clamp(60px, 2.6vw, 100px);
-  line-height:1;
-  letter-spacing: 0.8px;
-}
-
-/* Colonne Type de train (victoire de la séparation avec la colonne logo) */
-.aff-classiques-departs__col-train-type{
-  max-width: 9%;
-  display:flex;
-  /* colonne verticale : centrer verticalement l'heure */
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
-  flex: 0 0 18%; /* largeur fixe pour alignement table-like */
-}
-.aff-classiques-departs__train-type-box{
-  height: auto;
-  aspect-ratio: 1 / 1;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  background: transparent;
-  border-radius: 10px;
-  box-sizing: border-box;
-}
-.aff-classiques-departs__train-type-fallback{ text-align:center; }
-
-
-/* Numéro de train / opérateur (texte sous logo) */
-.aff-classiques-departs__train-meta{
-  flex-direction:column;
-  align-items:flex-start;
-  /* centrer verticalement sans forcer la hauteur (pour permettre l'empilement) */
-  justify-content: center;
-  color: #ffffff;
-  height: auto;
-  flex: 0 0 auto;
-}
-.aff-classiques-departs__train-meta .aff-classiques-departs__op-name{
-  font-weight:900;
-  font-size:1.50rem; /* plus visible */
-  padding-left: 20px;
-  line-height:1;
-  justify-content: flex-start;
-  text-align: left; /* aligner à gauche dans la colonne */
-}
-.aff-classiques-departs__train-meta .aff-classiques-departs__op-number{
-  font-weight:500;
-  font-size:1.25rem;
-  padding-left: 20px;
-  text-align: left; /* aligner à gauche */
-  margin: 0 0 2px 0;
-}
-
-/* Statuts spéciaux : retardé / supprimé doivent ressortir en jaune */
-.aff-classiques-departs__train-meta.aff-classiques-departs__train-meta--delayed .aff-classiques-departs__op-name,
-.aff-classiques-departs__train-meta.aff-classiques-departs__train-meta--delayed .aff-classiques-departs__op-number,
-.aff-classiques-departs__train-meta.aff-classiques-departs__train-meta--suppressed .aff-classiques-departs__op-name,
-.aff-classiques-departs__train-meta.aff-classiques-departs__train-meta--suppressed .aff-classiques-departs__op-number{
-  color: var(--accent-yellow);
-}
-
-/* Si on veut un alignement plus spécifique quand train-meta apparaît dans la colonne de type */
-.aff-classiques-departs__col-train-type .aff-classiques-departs__train-meta{ align-items: flex-start; justify-content: center; }
-.aff-classiques-departs__col-train-type .aff-classiques-departs__train-meta .aff-classiques-departs__op-name,
-.aff-classiques-departs__col-train-type .aff-classiques-departs__train-meta .aff-classiques-departs__op-number{ text-align: left; }
-
-/* Watermark vertical à droite */
-.aff-classiques-departs__watermark{
+/* ══════════════════════════════════════════════════════════════════
+   WATERMARK "départs" — pivotée à 90°, fixée à droite
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__watermark {
  position: absolute;
-  right: 8px;
+  right: -9vh;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
-  font-size: 10.8vw;
-  color: var(--watermark-blue);
-  font-weight:800;
-  letter-spacing: 6px;
+  /* Taille géante, très visible comme dans l'image */
+  font-size: 23vh;
+  color: #1389D2;
+  font-weight: 900;
+  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
+  z-index: 1;
+  white-space: nowrap;
+  opacity: 0.3; /* Opacité diminuée */
 }

-/* Petite pastille H en haut à droite (optionnelle) */
-.aff-classiques-departs__helpline{
-  position: absolute;
-  right: 18px;
-  top: 12px;
-  width:80px;
-  height:80px;
-  border-radius:6px;
-  border:3px solid #fff;
-  color:#fff;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  font-weight:900;
+/* ══════════════════════════════════════════════════════════════════
+   LISTE STATIQUE — 10 lignes sur exactement 100vh
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 2;
 }

-/* Horloge en bas à droite, proche du bord droit (à 400px du bord droit) */
-.aff-classiques-departs__clock-container{
-  position: relative; /* contenu positionné par le footer */
-  pointer-events: none;
-  z-index: 30; /* au-dessus du footer */
-  display: inline-flex;
-  align-items: center;
-  height: 100%; /* prendra la hauteur de la ligne footer */
+/* ══════════════════════════════════════════════════════════════════
+   MODE DÉFILEMENT — conteneur + track animé
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__scroll-container {
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
 }
-.aff-classiques-departs__clock-box{
-  display: inline-flex;
+
+/* Le track contient 2× les données pour une boucle seamless */
+.aff-classiques-departs__scroll-track {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   ROW — chaque ligne occupe 1/10 de 100vh
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__row {
+  display: flex;
  align-items: center;
-  justify-content: center;
-  background: var(--blue-dark); /* fond foncé interne comme sur la maquette */
-  border-radius: 10px;
-  padding: 4px 8px; /* réduire padding pour diminuer légèrement la taille globale */
-  border: 6px solid #ffffff; /* bordure un peu moins épaisse */
-  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
+  flex: 0 0 calc(100vh / 10);
+  height: calc(100vh / 10);
+  min-height: 0;
+  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
-  /* hauteur adaptée pour rentrer exactement dans la ligne footer */
-  height: calc(var(--footer-height) - 12px);
-  min-height: 34px;
 }

-/* Footer visuel : barre foncée en bas qui chevauche la liste */
-.aff-classiques-departs__footer{
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: var(--footer-height);
+/* Alternance de tons bleus (comme l'image) */
+.aff-classiques-departs__row:nth-child(odd)  { background: var(--blue-odd); }
+.aff-classiques-departs__row:nth-child(even) { background: var(--blue-even); }
+
+.aff-classiques-departs__row--empty {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--text-white);
+  font-size: 3vh;
+  text-align: center;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 1 — Logo opérateur  (~9 % largeur)
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__col-logo {
+  width: 9vw;
+  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
-  pointer-events: none;
-  z-index: 20; /* en dessous de l'horloge */
-}
-.aff-classiques-departs__footer .aff-classiques-departs__footer-inner{
-  width: 100%;
  height: 100%;
-  position: relative;
+  padding: 0 0.4vw;
+  box-sizing: border-box;
+}
+
+.aff-classiques-departs__logo-box {
+  width: 100%;
+  /* Logo prend ~65% de la hauteur de la ligne */
+  height: 6vh;
  display: flex;
-  align-items: center; /* centre verticalement le contenu (la clock) */
-  justify-content: flex-end; /* place la clock à droite */
-  padding-right: 12px; /* espace entre le bord et la clock pour le coin arrondi */
-  /* léger dégradé pour donner l'effet de bande plus claire en haut */
-  background: linear-gradient(to bottom, rgba(11,123,180,0.18) 0%, var(--blue-dark) 30%);
-  box-shadow: inset 0 6px 0 rgba(0,0,0,0.08);
-  /* arrondir côté droit comme sur la maquette */
-
+  align-items: center;
+  justify-content: center;
 }

-/* légère ligne (accent) en haut du footer pour séparer visuellement */
-.aff-classiques-departs__footer .aff-classiques-departs__footer-inner::before{
-  content: '';
+.aff-classiques-departs__op-logo {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.aff-classiques-departs__logo-text {
+  color: var(--text-white);
+  font-weight: 700;
+  font-size: 2vh;
+  text-align: center;
+  word-break: break-word;
+  line-height: 1.1;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 2 — Type + Numéro  OU  Statut  (~11 % largeur)
+   Alterne toutes les 4 secondes
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__col-meta {
+  width: 11vw;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 0.5vw 0 0;
+  box-sizing: border-box;
+  gap: 0.05vh;
+  overflow: hidden;
+  text-align: center;
+}
+
+/* Vue normale — type (ex: "MOBIGO") */
+.aff-classiques-departs__train-type {
+  font-size: 2.2vh;
+  color: var(--text-white);
+  font-weight: 600;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+/* Vue normale — numéro de sillon (ex: "894251") */
+.aff-classiques-departs__train-number {
+  font-size: 2.2vh;
+  color: var(--text-white);
+  font-weight: 400;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+/* Vue statut — à l'heure */
+.aff-classiques-departs__status-ontime {
+  font-size: 2.2vh;
+  color: var(--text-white);
+  font-weight: 400;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+/* Vue statut — retardé */
+.aff-classiques-departs__status-delayed {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1.15;
+}
+
+.aff-classiques-departs__status-label {
+  font-size: 2.2vh;
+  color: var(--yellow);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.aff-classiques-departs__status-value {
+  font-size: 2.2vh;
+  color: var(--yellow);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* Vue statut — supprimé */
+.aff-classiques-departs__status-suppressed {
+  font-size: 2.2vh;
+  color: var(--yellow);
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 3 — Heure  (~15 % largeur)
+   Grande, jaune vif (#FFCC00), bold — comme dans l'image
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__col-time {
+  width: 15vw;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  padding: 0 0.3vw 0 0;
+  box-sizing: border-box;
+}
+
+.aff-classiques-departs__time {
+  /* Jaune vif exactement comme dans la vidéo/image */
+  color: var(--yellow);
+  font-weight: 700;
+  /* Grande taille — occupe ~65% de la hauteur de ligne */
+  font-size: 6.5vh;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 4 — Destination + Info cause  (flex:1 — prend tout le reste)
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__col-destination {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  height: 100%;
+  padding-right: 0.5vw;
+}
+
+/* Texte destination — blanc, bold, très grand */
+.aff-classiques-departs__destination {
+  color: var(--text-white);
+  font-weight: 700;
+  font-size: 6.5vh;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* ─── Wrapper animé cause perturbation ────────────────────────── */
+.aff-classiques-departs__info-wrapper {
+  flex-shrink: 0;
+  overflow: hidden;
+  max-width: 0;
+  animation: infoWrapperGrow 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.aff-classiques-departs__info-inner {
+  display: flex;
+  align-items: center;
+  transform: translateX(100%);
+  animation: infoSlideIn 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  white-space: nowrap;
+}
+
+.aff-classiques-departs__separator {
+  color: var(--text-white);
+  font-size: 4.5vh;
+  font-weight: 200;
+  line-height: 1;
+  flex-shrink: 0;
+  padding: 0 0.9vw;
+}
+
+.aff-classiques-departs__info-text {
+  color: var(--text-white);
+  font-size: 1.9vh;
+  font-weight: 400;
+  white-space: normal;
+  overflow: hidden;
+  line-height: 1.25;
+  max-width: 22vw;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   COL 5 — Quai OU icône bus  (~6.5 % largeur)
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__col-platform {
+  width: 6.5vw;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0.5vh 0.4vw;
+}
+
+/* Boîte quai — bordure blanche */
+.aff-classiques-departs__platform-box {
+  width: 6vh;
+  height: 6vh;
+  border: 2.5px solid rgba(255, 255, 255, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  background: transparent;
+  box-sizing: border-box;
+}
+
+.aff-classiques-departs__platform-text {
+  color: var(--text-white);
+  font-weight: 700;
+  font-size: 4.5vh;
+  line-height: 1;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   HORLOGE — superposée en bas à droite  (z-index élevé)
+   ══════════════════════════════════════════════════════════════════ */
+.aff-classiques-departs__footer {
  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 8px;
-  background: rgba(255,255,255,0.03);
+  right: 1.2vw;
+  bottom: 0.8vh;
+  z-index: 30;
  pointer-events: none;
-  border-top-right-radius: 12px;
 }
-.aff-classiques-departs__clock-main{
-  color: #ffffff;
-  font-weight: 800;
-  /* légèrement plus petit pour tenir dans le footer */
-  font-size: clamp(28px, 4.2vw, 60px);
-  line-height: 1;
-  font-family: "Achemine", "Helvetica Neue", Arial, sans-serif;
-  margin-right: 6px;
+
+.aff-classiques-departs__clock-container {
+  display: flex;
+  align-items: center;
 }
-.aff-classiques-departs__clock-seconds{
-  color: var(--accent-yellow);
+
+.aff-classiques-departs__clock-box {
+  border: 2.5px solid rgba(255, 255, 255, 0.88);
+  background: rgba(0, 51, 102, 0.93);
+  border-radius: 8px;
+  padding: 0.4vh 1.1vw;
+  display: flex;
+  align-items: baseline;
+  gap: 0.5vw;
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
+}
+
+.aff-classiques-departs__clock-main {
+  color: var(--text-white);
  font-weight: 800;
-  font-size: clamp(16px, 2.8vw, 36px);
+  font-size: 4.4vh;
  line-height: 1;
 }

-/* Ajustements pour petits écrans */
-@media (max-width: 700px){
-  .aff-classiques-departs__col-logo{width: 18%;}
-  .aff-classiques-departs__col-time{width: 24%;}
-
+.aff-classiques-departs__clock-seconds {
+  color: var(--yellow);
+  font-weight: 800;
+  font-size: 2.7vh;
+  line-height: 1;
 }
+
+/* masqué */
+.aff-classiques-departs__station-box { display: none; }
@@ -1,7 +1,8 @@
-
 import React, { useEffect, useState, useCallback } from 'react';
 import './ClassiquesDeparts.css';
 import supabase from '../../../lib/supabase';
+import Logo from '../../../components/Logo';
+import MarqueeText from '../../../components/MarqueeText';

 // Helper utilitaire : format HHhMM sans secondes (ex: 06h44)
 const formatTimeNoSeconds = (v) => {
@@ -22,46 +23,15 @@ const formatTimeNoSeconds = (v) => {
  return String(v).slice(0,5).replace(':','h');
 };

-// Données proviennent exclusivement de la table `horaires`.
-function Logo({op}){
-  // Tente de charger un logo SVG depuis /type/ en fonction de l'opérateur.
-  // mapping pour opérateurs connus -> noms de fichiers dans public/type
-  const mapping = {
-	'TGV inOUI': 'logo-inoui.svg',
-	'TGV inOUI ': 'logo-inoui.svg',
-	'TGV': 'logo-tgv.svg',
-	'TER': 'sncf-voyageurs-logo.png',
-	'MOBIGO': 'logo-mobigo.svg',
-	'TGV Lyria': 'logo-lyria.svg',
-	'TGV Lyria ': 'logo-lyria.svg',
-  };
-
-  const defaultFileFromOp = (name) => {
-	if (!name) return null;
-	// nettoyer et fabriquer un nom plausible : "logo-<slug>.svg"
-	const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
-	return `logo-${slug}.svg`;
-  };
-
-  const fileName = mapping[op] || mapping[op.split(' ')[0]] || defaultFileFromOp(op);
-
-  const [hasImg, setHasImg] = React.useState(true);
-
-  return (
-	<div className="aff-classiques-departs__logo-box" aria-hidden>
-	  {hasImg && fileName ? (
-		<img
-		  src={`/type/${fileName}`}
-		  alt={op}
-		  className="aff-classiques-departs__op-logo"
-		  onError={()=> setHasImg(false)}
-		/>
-	  ) : (
-		<div className="aff-classiques-departs__logo-text" aria-hidden>{op.split(' ')[0]}</div>
-	  )}
-	</div>
-  );
-}
+const isSubstitution = (h) => {
+  if (!h) return false;
+  if (h.substitution_disponible === true) return true;
+  const subFlag = h.substitution === true || h.is_substitution === true || h.isSubstitution === true;
+  const subStr = (typeof h.substitution === 'string' && ['true','1','yes','y','t'].includes(h.substitution.toLowerCase()));
+  const typeMatch = h.type_train && /subst|substitut|remplac/i.test(String(h.type_train));
+  const commentMatch = h.comment && /subst|substitut|remplac/i.test(String(h.comment));
+  return Boolean(subFlag || subStr || typeMatch || commentMatch);
+};

 // (La fonction TrainType a été retirée car la colonne affiche désormais directement les
 // informations via .train-meta dans la colonne .col-train-type)
@@ -95,13 +65,17 @@ export default function ClassiquesDeparts(){
  const gareIdParam = params.get('gare_id') || params.get('gareId');
  // gérer les +, décoder et remplacer les tirets par des espaces
  const gareDisplay = gareParam ? decodeURIComponent(String(gareParam).replace(/\+/g, ' ')).replace(/-/g, ' ') : null;
+  // Mode défilement (marquee vertical infini) si ?defilement=true dans l'URL
+  const defilementMode = params.get('defilement') === 'true';

  // debug flag activable via ?debug=1 or ?debug=true
  const debugEnabled = (params.get('debug') === '1' || String(params.get('debug')).toLowerCase() === 'true');
  const debug = useCallback((...args) => { if (debugEnabled) console.debug(...args); }, [debugEnabled]);

-  // État pour alterner l'affichage toutes les 3 secondes
+  // Alterner toutes les 2 secondes entre type+numéro et statut
  const [showStatus, setShowStatus] = useState(false);
+  // Afficher la cause de perturbation 5s, cacher 5s (cycle indépendant)
+  const [showInfoCause, setShowInfoCause] = useState(true);
  // État pour l'heure actuelle, mise à jour chaque seconde pour la logique d'affichage du quai
  const [currentTime, setCurrentTime] = useState(new Date());

@@ -123,6 +97,38 @@ export default function ClassiquesDeparts(){
  // debug des données brutes renvoyées par Supabase
  const [rawDebug, setRawDebug] = useState({ count: 0, sample: [] });

+  // Récupérer le type de gare une seule fois au montage ou quand les paramètres changent
+  useEffect(() => {
+    let mounted = true;
+    const fetchStationType = async () => {
+      try {
+        let fetchedType = null;
+        if (gareIdParam) {
+          const { data: gdata, error: gerr } = await supabase.from('gares').select('id,type').eq('id', gareIdParam).limit(1);
+          if (!gerr && gdata && gdata.length) fetchedType = gdata[0] && gdata[0].type;
+        } else if (gareDisplay) {
+          const flexNeedle = `%${String(gareDisplay).replace(/[-_+\s]+/g, '%')}%`;
+          const { data: gdata, error: gerr } = await supabase.from('gares').select('id,type,nom').ilike('nom', flexNeedle);
+          if (!gerr && gdata && gdata.length) {
+            const exactMatch = gdata.find(g => {
+              const n1 = String(g.nom || '').normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().replace(/[-_+\s]+/g, ' ').trim();
+              const n2 = String(gareDisplay || '').normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().replace(/[-_+\s]+/g, ' ').trim();
+              return n1 === n2;
+            });
+            fetchedType = exactMatch ? exactMatch.type : gdata[0].type;
+          }
+        }
+        if (mounted) {
+          setStationType(fetchedType ? String(fetchedType).toLowerCase() : null);
+        }
+      } catch (e) { /* ignore */ }
+    };
+    if (supabase) {
+      fetchStationType();
+    }
+    return () => { mounted = false; };
+  }, [gareIdParam, gareDisplay]);
+
  // --- Helpers pour perturbations (définis ici pour éviter use-before-define dans useEffect) ---
  const normalizeName = useCallback((s) => {
 	if (!s) return '';
@@ -252,12 +258,19 @@ export default function ClassiquesDeparts(){
  }, []);

  // retourne le threshold (en minutes) pour afficher le quai selon le type de gare
-  const thresholdForStationType = useCallback((type) => {
-	if (!type) return 0;
-	const t = String(type).trim().toLowerCase();
-	if (t === 'interurbaine' || t.includes('interurb')) return 360; // 6 heures
-	if (t === 'ville' || t.includes('ville')) return 30; // 30 minutes
-	return 0;
+  const thresholdForStationType = useCallback((typeGare) => {
+	const tG = String(typeGare || '').trim().toLowerCase();
+    
+    // Vérification du type de gare
+	if (tG === 'interurbaine' || tG.includes('interurb')) {
+      return 360; // 6 heures
+    }
+	if (tG === 'ville' || tG.includes('ville')) {
+      return 30; // 30 minutes
+    }
+    
+	// par défaut, 30 minutes
+	return 30;
  }, []);

  const formatTimeFromHM = useCallback((totalMinutes) => {
@@ -354,81 +367,172 @@ export default function ClassiquesDeparts(){
  }, [buildPerturbMap, normalizeName, debug]);


+  // serviceDate (YYYY-MM-DD) optional: forces the evaluation date for perturbations when horaire._date is missing
  // serviceDate (YYYY-MM-DD) optional: forces the evaluation date for perturbations when horaire._date is missing
  const computeStatusForHoraireAtStop = useCallback((horaire, stationId, stationName, idx, serviceDate = null) => {
-	const found = findPerturbsForHoraireAndStop(horaire, stationId, stationName, idx) || [];
-				try { debug('computeStatusForHoraireAtStop', { id: horaire && horaire.id, numero: horaire && (horaire.numero_train || horaire.numero), stationId, stationName, found: found.length }); } catch (e) {}
+    const map = idx || buildPerturbMap();
+    const allPerturbs = [];
+    const hId = horaire && (horaire.id || horaire.horaire_id || horaire.numero || horaire.numero_train);
+    const number = horaire && (horaire.numero_train || horaire.number || horaire.numero || horaire.train_number);
+    
+    if (map) {
+      const addedIds = new Set();
+      const addP = (p) => {
+        if (p && !addedIds.has(p.id)) {
+          addedIds.add(p.id);
+          allPerturbs.push(p);
+        }
+      };
+      if (hId != null && map.byHoraire && map.byHoraire[String(hId)]) {
+        map.byHoraire[String(hId)].forEach(addP);
+      }
+      if (number != null && map.byNumber && map.byNumber[String(number)]) {
+        map.byNumber[String(number)].forEach(addP);
+      }
+      if (stationId != null && map.byStopId && map.byStopId[String(stationId)]) {
+        map.byStopId[String(stationId)].forEach(x => addP(x.perturbation));
+      }
+      if (stationName && map.byStopName) {
+        const key = normalizeName(stationName);
+        if (map.byStopName[key]) map.byStopName[key].forEach(x => addP(x.perturbation));
+        for (const existingKey of Object.keys(map.byStopName)) {
+          if (existingKey.includes(key) || key.includes(existingKey)) {
+            map.byStopName[existingKey].forEach(x => addP(x.perturbation));
+          }
+        }
+      }
+      const trainStops = getStops(horaire);
+      if (Array.isArray(trainStops)) {
+        trainStops.forEach(s => {
+          const sId = s.gare_id || s.gareId || s.id || s.code;
+          const sName = s.gare_nom || s.nom || s.name || s.stop_name;
+          if (sId != null && map.byStopId && map.byStopId[String(sId)]) {
+            map.byStopId[String(sId)].forEach(x => addP(x.perturbation));
+          }
+          if (sName && map.byStopName) {
+            const skey = normalizeName(sName);
+            if (map.byStopName[skey]) map.byStopName[skey].forEach(x => addP(x.perturbation));
+          }
+        });
+      }
+      if (map.global) {
+        map.global.forEach(addP);
+      }
+    }

-	const toYMD = (v) => { if (!v) return null; const d = new Date(v); if (isNaN(d.getTime())) return null; return d.toISOString().slice(0,10); };
-	let horaireYmd = toYMD(horaire && (horaire._date || horaire.date || horaire.date_service || horaire.service_date));
-	if (!horaireYmd && serviceDate) horaireYmd = serviceDate;
+    const toYMD = (v) => { if (!v) return null; const d = new Date(v); if (isNaN(d.getTime())) return null; return d.toISOString().slice(0, 10); };
+    let horaireYmd = toYMD(horaire && (horaire._date || horaire.date || horaire.date_service || horaire.service_date));
+    if (!horaireYmd && serviceDate) horaireYmd = serviceDate;

-	let maxDelay = null;
+    let maxDelay = null;
+    let isSuppressed = false;
+    let causeDetails = '';

-	for (const p of found) {
-	  // date filter: if perturbation carries explicit dates or jours_perturbation, check they match horaireYmd
-	  try {
-		if (horaireYmd) {
-		  const pDate = toYMD(p.date || p.date_service || p.start_date || p.date_debut);
-		  const db = toYMD(p.date_debut || p.start_date);
-		  const df = toYMD(p.date_fin || p.end_date);
-		  if (pDate && pDate !== horaireYmd) { debug('perturbation date mismatch', p.id); continue; }
-		  if (db && df && !(horaireYmd >= db && horaireYmd <= df)) { debug('perturbation date-range mismatch', p.id); continue; }
-		}
-	  } catch (e) { /* ignore date parse errors -> assume applies */ }
+    for (const p of allPerturbs) {
+      try {
+        if (horaireYmd) {
+          const pDate = toYMD(p.date || p.date_service);
+          const db = toYMD(p.date_debut || p.start_date);
+          const df = toYMD(p.date_fin || p.end_date);
+          if (pDate && pDate !== horaireYmd) continue;
+          if (db && df && !(horaireYmd >= db && horaireYmd <= df)) continue;
+        }
+      } catch (e) {}
+      try {
+        const joursSet = getPerturbationJours(p);
+        if (joursSet && horaireYmd && !joursSet.has(horaireYmd)) continue;
+      } catch (e) {}

-	  // also check jours_perturbation (may be inside perturbations_arrets wrapper)
-	  try {
-		const joursSet = getPerturbationJours(p);
-		if (joursSet && horaireYmd) {
-		  if (!joursSet.has(horaireYmd)) { debug('perturbation jours mismatch', p.id); continue; }
-		}
-	  } catch (e) {}
+      const ref = p.horaire_id || p.horaire || p.horaireId || p.numero_train || p.train_number || p.numero;
+      const numberRef = p.number || p.train_number || p.numero || p.numero_train;
+      const appliesByRef = ref && (String(ref) === String(horaire.id) || String(ref) === String(horaire.numero_train) || String(ref) === String(horaire.numero));
+      const appliesByNumber = numberRef && (String(numberRef) === String(horaire.numero_train) || String(numberRef) === String(horaire.numero) || String(numberRef) === String(horaire.number));
+      
+      const parsedObj = parsePerturbArretsObject(p) || { arrets: [], jours: null };
+      const arrets = parsedObj.arrets || [];

-	  const parsedObj = parsePerturbArretsObject(p) || { arrets: [], jours: null };
-	  const arrets = parsedObj.arrets || [];
-	  let matched = false;
-			for (const a of arrets) {
-				const aId = a.gare_id || a.gareId || a.id || a.station_id || a.stationId || a.uic || a.code;
-				const aName = a.gare_nom || a.nom || a.name || a.station_name || a.station_nom;
-				const na = normalizeName(aName || '');
-				const ns = normalizeName(stationName || '');
-				const nameMatches = stationName && (na === ns || na.includes(ns) || ns.includes(na));
-				if ((stationId != null && String(aId) === String(stationId)) || nameMatches) {
-		  matched = true;
-		  const t = (a.type_perturbation || a.type || '').toString().toLowerCase();
-		  if (t.includes('arret_supprime') || /suppressed|supprim/.test(t)) return { label: 'supprimé', detail: '', delayMinutes: null };
-		  if (t.includes('retard') || t.includes('delay') || /retard/.test(t)) {
-			const d = parseDelayMinutesFromArret(a) || parseDelayMinutesFromArret(p) || 0;
-			if (maxDelay == null || d > maxDelay) maxDelay = d;
-		  }
-		}
-	  }
+      const trainStops = getStops(horaire);
+      let trainStopMatch = false;

-	  if (!matched) {
-		// top-level perturbation that references the horaire/numero
-		const ref = p.horaire_id || p.horaire || p.horaireId || p.numero_train || p.train_number || p.numero;
-		const numberRef = p.number || p.train_number || p.numero || p.numero_train;
-		const appliesByRef = ref && (String(ref) === String(horaire.id) || String(ref) === String(horaire.numero_train) || String(ref) === String(horaire.numero));
-		const appliesByNumber = numberRef && (String(numberRef) === String(horaire.numero_train) || String(numberRef) === String(horaire.numero) || String(numberRef) === String(horaire.number));
-		const isGlobal = (!Array.isArray(arrets) || arrets.length === 0) && !ref && !numberRef;
-		if (appliesByRef || appliesByNumber || isGlobal) {
-		  const t = (p.type_perturbation || p.type || '').toString().toLowerCase();
-		  if (t.includes('arret_supprime') || /suppressed|supprim/.test(t)) return { label: 'supprimé', detail: '', delayMinutes: null };
-		  if (t.includes('retard') || t.includes('delay') || /retard/.test(t)) {
-			const d = parseDelayMinutesFromArret(p) || 0;
-			if (maxDelay == null || d > maxDelay) maxDelay = d;
-		  }
-		}
-	  }
-	}
+      const matchesTarget = (a) => {
+        if (!stationName && stationId == null) return false;
+        const aId = a.gare_id || a.gareId || a.id || a.station_id || a.stationId || a.uic || a.code;
+        const aName = a.gare_nom || a.nom || a.name || a.station_name || a.station_nom;
+        if (stationId != null && String(aId) === String(stationId)) return true;
+        if (stationName && aName) {
+          const na = normalizeName(aName);
+          const ns = normalizeName(stationName);
+          return na === ns;
+        }
+        return false;
+      };

-	if (maxDelay != null) return { label: `retardé +${maxDelay}min.`, detail: '', delayMinutes: maxDelay };
-	return { label: "à l'heure", detail: '', delayMinutes: null };
-  }, [findPerturbsForHoraireAndStop, parsePerturbArretsObject, getPerturbationJours, parseDelayMinutesFromArret, normalizeName, debug]);
+      for (const a of arrets) {
+        const aId = a.gare_id || a.gareId || a.id || a.uic || a.code;
+        const aName = a.gare_nom || a.nom || a.name || a.station_name || a.station_nom;
+        const na = normalizeName(aName || '');
+
+        const isTarget = matchesTarget(a);
+        let isTrainStop = false;
+        if (trainStops && Array.isArray(trainStops)) {
+          isTrainStop = trainStops.some(s => {
+            const sId = s.gare_id || s.gareId || s.id || s.code;
+            const sName = s.gare_nom || s.nom || s.name || s.stop_name;
+            if (sId != null && aId != null && String(sId) === String(aId)) return true;
+            if (sName && aName) {
+              const ns = normalizeName(sName);
+              return ns === na;
+            }
+            return false;
+          });
+        }
+        const originName = normalizeName(horaire.gare_depart_nom || horaire.gare_depart || '');
+        const destName = normalizeName(horaire.gare_arrivee_nom || horaire.gare_arrivee || '');
+        if (originName === na || destName === na) isTrainStop = true;
+
+        if (isTrainStop) trainStopMatch = true;
+
+        if (isTarget) {
+          const t = (a.type_perturbation || a.type || '').toString().toLowerCase();
+          if (t.includes('arret_supprime') || /suppressed|supprim/.test(t)) {
+            isSuppressed = true;
+          }
+        }
+      }
+
+      const isGlobal = (arrets.length === 0) && !ref && !numberRef;
+      const applies = appliesByRef || appliesByNumber || trainStopMatch || isGlobal;
+
+      if (applies) {
+        const t = (p.type_perturbation || p.type || '').toString().toLowerCase();
+        if (t.includes('arret_supprime') || /suppressed|supprim/.test(t)) {
+          isSuppressed = true;
+        }
+
+        for (const a of arrets) {
+          const tType = (a.type_perturbation || a.type || '').toString().toLowerCase();
+          if (tType.includes('retard') || tType.includes('delay') || /retard/.test(tType)) {
+            const d = parseDelayMinutesFromArret(a) || parseDelayMinutesFromArret(p) || 0;
+            if (maxDelay == null || d > maxDelay) maxDelay = d;
+          }
+        }
+        if (t.includes('retard') || t.includes('delay') || /retard/.test(t)) {
+          const d = parseDelayMinutesFromArret(p) || 0;
+          if (maxDelay == null || d > maxDelay) maxDelay = d;
+        }
+        if (p.cause_details) {
+          causeDetails = p.cause_details;
+        }
+      }
+    }
+
+    if (isSuppressed) return { label: 'supprimé', detail: '', delayMinutes: null, causeDetails };
+    if (maxDelay != null) return { label: `retardé +${maxDelay}min.`, detail: '', delayMinutes: maxDelay, causeDetails };
+    return { label: "à l'heure", detail: '', delayMinutes: null, causeDetails };
+  }, [buildPerturbMap, getPerturbationJours, parsePerturbArretsObject, parseDelayMinutesFromArret, normalizeName, getStops]);

  // Applique les perturbations à une liste d'horaires : calcule status par arrêt et met à jour l'heure affichée
-  const applyPerturbationsToHoraires = useCallback((list = [], perturbList = perturbations, displayStationId = null, displayStationName = null, serviceDate = null) => {
+  const applyPerturbationsToHoraires = useCallback((list = [], perturbList = [], displayStationId = null, displayStationName = null, serviceDate = null) => {
 	const map = buildPerturbMap(perturbList || []);
    // fallback to global display station context
    const targetStationId = displayStationId || gareIdParam || null;
@@ -449,22 +553,6 @@ export default function ClassiquesDeparts(){
      // compute display time using delay at the display station if any
 	  const displayStatus = computeStatusForHoraireAtStop(horaire, targetStationId, targetStationName, map, serviceDate);
 	  let displayTime = horaire._displayTime || formatTimeNoSeconds(horaire.heure_depart || horaire.time || horaire.heure || '');
-      if (displayStatus && typeof displayStatus.delayMinutes === 'number' && !isNaN(displayStatus.delayMinutes)) {
-        if (typeof horaire._depHM === 'number') {
-          displayTime = formatTimeFromHM(horaire._depHM + displayStatus.delayMinutes);
-        } else {
-          const tryParse = (s) => {
-            if (!s) return null;
-            const m = String(s).match(/(\d{1,2}):(\d{2})/);
-            if (m) return parseInt(m[1],10)*60 + parseInt(m[2],10);
-            const d = new Date(s);
-            if (!isNaN(d.getTime())) return d.getHours()*60 + d.getMinutes();
-            return null;
-          };
-          const base = tryParse(horaire._rawTime || horaire.heure_depart || horaire.time || horaire.heure || '');
-          if (typeof base === 'number') displayTime = formatTimeFromHM(base + displayStatus.delayMinutes);
-        }
-      }
 	  horaire._stopsStatus = stopsStatus;
 	  // prefer platform from stop data (quai) if available
 	  const stopForStation = (stops || []).find(s => {
@@ -472,20 +560,36 @@ export default function ClassiquesDeparts(){
 		const nm = s.gare_nom || s.nom || s.name || s.stop_name || '';
 		const ns = normalizeName(nm || '');
 		const target = normalizeName(targetStationName || '');
-		return (targetStationId && String(sid) === String(targetStationId)) || (targetStationName && (ns === target || ns.includes(target) || target.includes(ns)));
+		return (targetStationId && String(sid) === String(targetStationId)) || (targetStationName && ns === target);
 	  }) || null;
 	  horaire._status = displayStatus;
 	  horaire._displayTime = displayTime;
-	  horaire._displayPlatform = (stopForStation && (stopForStation.quai || stopForStation.platform || stopForStation.quay)) || horaire.platform || '';
+	  // utiliser quai en priorité
+	  horaire._displayPlatform = (stopForStation && (stopForStation.quai || stopForStation.quai_reel || stopForStation.platform || stopForStation.quay)) || horaire.quai || horaire.quai_reel || horaire.platform || '';
 	  return horaire;
 	});
-  }, [buildPerturbMap, computeStatusForHoraireAtStop, formatTimeFromHM, perturbations, gareDisplay, gareIdParam, getStops, normalizeName]);
+  }, [buildPerturbMap, computeStatusForHoraireAtStop, gareDisplay, gareIdParam, getStops, normalizeName]);

  useEffect(() => {
-	const id = setInterval(() => setShowStatus(s => !s), 3000);
+	// Alternance toutes les 4 secondes (type+numéro ↔ statut)
+	const id = setInterval(() => setShowStatus(s => !s), 4000);
 	return () => clearInterval(id);
  }, []);

+  // Cycle 5s visible / 5s caché pour la cause de perturbation
+  useEffect(() => {
+	let timeoutId;
+	const scheduleCycle = (currentlyVisible) => {
+	  timeoutId = setTimeout(() => {
+		setShowInfoCause(!currentlyVisible);
+		scheduleCycle(!currentlyVisible);
+	  }, 5000);
+	};
+	setShowInfoCause(true);
+	scheduleCycle(true);
+	return () => clearTimeout(timeoutId);
+  }, []);
+
  // Récupération Supabase — maintenant avec polling pour synchroniser sans recharger la page
  useEffect(() => {
    let mounted = true;
@@ -554,29 +658,6 @@ export default function ClassiquesDeparts(){

 		// stocker la liste complète (non filtrée) pour associer horaire_id -> numero_train
        if (mounted) setAllHoraires(parsedHoraires || []);
-
-        // Récupérer le type de gare depuis la table `gares` si possible
-        try {
-          let fetchedType = null;
-          if (gareIdParam) {
-            const { data: gdata, error: gerr } = await supabase.from('gares').select('id,type').eq('id', gareIdParam).limit(1);
-            if (!gerr && gdata && gdata.length) fetchedType = gdata[0] && gdata[0].type;
-          } else if (gareDisplay) {
-            const needle = `%${gareDisplay}%`;
-            try {
-              const { data: gdata, error: gerr } = await supabase.from('gares').select('id,type').or(`nom.ilike.${needle},name.ilike.${needle}`).limit(1);
-              if (!gerr && gdata && gdata.length) fetchedType = gdata[0] && gdata[0].type;
-            } catch (e) {
-              try {
-                const { data: gdata } = await supabase.from('gares').select('id,type').ilike('nom', needle).limit(1);
-                if (gdata && gdata.length) fetchedType = gdata[0] && gdata[0].type;
-              } catch (err) { /* ignore */ }
-            }
-          }
-          if (mounted) {
-            setStationType(fetchedType ? String(fetchedType).toLowerCase() : null);
-          }
-        } catch (e) { /* ignore errors reading gares table */ }
 		// Filtrer par gare : garder uniquement les horaires qui DESSERVENT la gare ciblée
 		// (soit comme gare_depart, soit comme un arrêt intermédiaire dans `stops` / `gares_desservies`)
 		// Exclure les horaires pour lesquels la gare ciblée est la gare d'arrivée finale (terminus)
@@ -586,11 +667,11 @@ export default function ClassiquesDeparts(){
 		  displayHoraires = displayHoraires.filter(h => {
 			// Exclure si la gare ciblée est la gare d'arrivée finale
 			const destName = normalizeName((h.gare_arrivee_nom || h.gare_arrivee || '').toString());
-			if (destName && (destName === normalized || destName.includes(normalized) || normalized.includes(destName))) return false;
+			if (destName === normalized) return false;

 			// Inclure si gare de départ correspond
 			const departName = normalizeName((h.gare_depart_nom || h.gare_depart_name || h.gare_depart || '').toString());
-			if (departName && (departName === normalized || departName.includes(normalized) || normalized.includes(departName))) return true;
+			if (departName === normalized) return true;

 			// Chercher dans les arrêts desservis ; ignorer si l'arrêt est le terminus (isLast ou index==max)
 			const stopsList = getStops(h);
@@ -607,7 +688,7 @@ export default function ClassiquesDeparts(){
 				if (!stopName) continue;
 				const isTerminus = Boolean(s.isLast || s.is_last || (typeof s.index !== 'undefined' && maxIdx != null && Number(s.index) === maxIdx));
 				if (isTerminus) continue;
-				if (stopName === normalized || stopName.includes(normalized) || normalized.includes(stopName)) return true;
+				if (stopName === normalized) return true;
 			  }
 			}
 			return false;
@@ -820,23 +901,14 @@ export default function ClassiquesDeparts(){
 		  return false;
 		};

-		const isSubstitution = (h) => {
-		  if (!h) return false;
-		  // nouvelle colonne spécifique
-		  if (h.substitution_disponible === true) return true;
-		  // anciennes variantes
-		  const subFlag = h.substitution === true || h.is_substitution === true || h.isSubstitution === true;
-		  const subStr = (typeof h.substitution === 'string' && ['true','1','yes','y','t'].includes(h.substitution.toLowerCase()));
-		  const typeMatch = h.type_train && /subst|substitut|remplac/i.test(String(h.type_train));
-		  const commentMatch = h.comment && /subst|substitut|remplac/i.test(String(h.comment));
-		  return Boolean(subFlag || subStr || typeMatch || commentMatch);
-		};
+

 		// compute linkage and travaux applicability per horaire
 		const enriched = enrich.map(h => {
 		  let linked = false;
 		  let appliesToday = false;
 		  let appliesTomorrow = false;
+		  let linkedTravaux = null;
 		  for (const t of travauxList) {
 			// Extraire identifiants de ligne (différentes variantes possibles)
 			const tLine = t.ligne_id || t.ligne || t.line_id || t.line || t.ligneId || t.lineId;
@@ -856,12 +928,19 @@ export default function ClassiquesDeparts(){
 			}

 			const ref = t.horaire_id || t.horaire || t.horaireId || t.numero_train || t.train_number || t.numero;
-			if (ref && (String(ref) === String(h.id) || String(ref) === String(h.numero_train) || String(ref) === String(h.numero))) linked = true;
-			if (!appliesToday && travauxApplies(t,h,today)) appliesToday = true;
-			if (!appliesTomorrow && travauxApplies(t,h,tomorrow)) appliesTomorrow = true;
-			if (linked && appliesToday && appliesTomorrow) break;
+			let matchRef = ref && (String(ref) === String(h.id) || String(ref) === String(h.numero_train) || String(ref) === String(h.numero));
+			if (matchRef) linked = true;
+			
+			const appT = travauxApplies(t,h,today);
+			const appY = travauxApplies(t,h,tomorrow);
+			if (appT) appliesToday = true;
+			if (appY) appliesTomorrow = true;
+			
+			if (matchRef || appT || appY) {
+			  linkedTravaux = t;
+			}
 		  }
-		  return { ...h, _linkedToTravaux: linked, _travauxAppliesToday: appliesToday, _travauxAppliesTomorrow: appliesTomorrow };
+		  return { ...h, _linkedToTravaux: linked, _travauxAppliesToday: appliesToday, _travauxAppliesTomorrow: appliesTomorrow, _linkedTravauxObj: linkedTravaux };
 		});

 		// Build today and tomorrow candidate lists
@@ -869,7 +948,7 @@ export default function ClassiquesDeparts(){
 		  if (h._date && h._date !== todayStr) return false;
 		  if (!circulatesOn(h, today)) return false;
 		  if (typeof h._depHM !== 'number') return false;
-		  if (h._depHM <= todayHM) return false;
+		  if (h._depHM < todayHM - 1) return false;

 		  // if travaux apply at this horaire today, hide regular horaires
 		  if (h._travauxAppliesToday && !isSubstitution(h)) return false;
@@ -910,21 +989,21 @@ export default function ClassiquesDeparts(){

 		// Construire un index local des perturbations à partir des données fraîchement récupérées
 		// Filtrer pour ne garder que les perturbations applicables aujourd'hui (éviter d'appliquer les perturbations d'hier)
-		const todayYmd = new Date().toLocaleDateString('en-CA');
+
 		const filteredPerturb = (perturbData || []).filter(p => {
 		  try {
 			const toYMD = (v) => { if (!v) return null; const d = new Date(v); if (isNaN(d.getTime())) return null; return d.toISOString().slice(0,10); };
-			const pDate = toYMD(p.date || p.date_service || p.start_date || p.date_debut);
+			const pDate = toYMD(p.date || p.date_service);
 			const db = toYMD(p.date_debut || p.start_date);
 			const df = toYMD(p.date_fin || p.end_date);
-			// si pDate fourni et ne correspond pas à aujourd'hui -> ignorer
-			if (pDate && pDate !== todayYmd) return false;
-			// si fourche de dates fournie et aujourd'hui n'est pas dans l'intervalle -> ignorer
-			if (db && df && !(todayYmd >= db && todayYmd <= df)) return false;
-			// si jours_perturbation fourni -> vérifier qu'aujourd'hui en fait partie
+			// si pDate fourni et ne correspond pas à la date de service -> ignorer
+			if (pDate && pDate !== serviceDateStr) return false;
+			// si fourche de dates fournie et la date de service n'est pas dans l'intervalle -> ignorer
+			if (db && df && !(serviceDateStr >= db && serviceDateStr <= df)) return false;
+			// si jours_perturbation fourni -> vérifier que la date de service en fait partie
 			try {
 			  const joursSet = getPerturbationJours(p);
-			  if (joursSet && !joursSet.has(todayYmd)) return false;
+			  if (joursSet && !joursSet.has(serviceDateStr)) return false;
 			} catch (e) {
 			  // ignore parse errors and keep perturbation
 			}
@@ -952,8 +1031,8 @@ export default function ClassiquesDeparts(){
 		// Debug: log first few annotated horaires
 								try { debug('annotated horaires sample', annotated.slice(0,6).map(a => ({ id: a.id, numero: a.numero_train || a.numero, _status: a._status, _displayTime: a._displayTime }))); } catch (e) {}

-		// afficher seulement les 9 premières lignes sur l'afficheur
-		setHoraires((annotated || []).slice(0, 9));
+		// 10 lignes en mode normal, 20 en mode défilement
+		setHoraires((annotated || []).slice(0, defilementMode ? 20 : 10));
 		setPerturbations(filteredPerturb || []);
 		setTravaux(travauxData || []);
 	  } catch (err) {
@@ -972,124 +1051,223 @@ export default function ClassiquesDeparts(){
 	const intervalId = setInterval(fetchData, intervalMs);

 	return () => { mounted = false; clearInterval(intervalId); };
-  }, [gareDisplay, gareIdParam, buildPerturbMap, computeStatusForHoraireAtStop, findPerturbsForHoraireAndStop, normalizeName, formatTimeFromHM, applyPerturbationsToHoraires, debug, getStops, getPerturbationJours]);
+  }, [gareDisplay, gareIdParam, buildPerturbMap, computeStatusForHoraireAtStop, findPerturbsForHoraireAndStop, normalizeName, formatTimeFromHM, applyPerturbationsToHoraires, debug, getStops, getPerturbationJours, defilementMode]);

  // Helpers pour perturbations (memoized plus haut)

+  // Création des lignes vides pour créer l'espace
+  const emptyRows = Array.from({ length: 10 }).map((_, i) => ({ _isEmpty: true, id: `empty-${i}` }));
+
+  // Liste de lignes à rendre (horaires + espace + horaires + espace en mode défilement pour boucle infinie)
+  const rowsToRender = defilementMode 
+	? [...horaires, ...emptyRows, ...horaires, ...emptyRows] 
+	: horaires;
+
+  // Calcul dynamique de l'animation CSS
+  useEffect(() => {
+    if (defilementMode && horaires.length > 0) {
+      // Nombre de lignes de données
+      const dataRows = horaires.length;
+      // 10 lignes vides
+      const emptyRowsCount = 10;
+
+      // Temps pour défiler les données (2s par ligne au lieu de 1s)
+      const dataScrollTime = dataRows * 2;
+      // Temps pour défiler l'espace vide (2s par ligne)
+      const emptyScrollTime = emptyRowsCount * 2;
+      // Temps de pause de 10 secondes
+      const pauseTime = 10;
+      
+      // Durée totale d'un cycle (défilement + pause)
+      const totalAnimationTime = dataScrollTime + emptyScrollTime + pauseTime;
+
+      // Calcul des pourcentages pour l'animation
+      // On commence à 0
+      // À la fin du défilement des données, on a défilé de (dataRows / (totalCycleRows * 2)) * 100% de la hauteur totale
+      // À la fin du défilement de l'espace, on a défilé de (totalCycleRows / (totalCycleRows * 2)) * 100% (soit 50%)
+      // Ensuite on fait une pause pendant 10 secondes (donc le % de temps avance, mais pas la translation)
+      
+      const scrollEndPercent = ((dataScrollTime + emptyScrollTime) / totalAnimationTime) * 100;
+
+      const styleSheet = document.createElement("style");
+      styleSheet.innerText = `
+        @keyframes customScrollMarquee {
+          0% { transform: translateY(0); }
+          ${scrollEndPercent}% { transform: translateY(-50%); }
+          100% { transform: translateY(-50%); }
+        }
+        .aff-classiques-departs__scroll-track {
+          animation: customScrollMarquee ${totalAnimationTime}s linear infinite !important;
+        }
+      `;
+      document.head.appendChild(styleSheet);
+      
+      return () => {
+        document.head.removeChild(styleSheet);
+      };
+    }
+  }, [defilementMode, horaires]);
+
+
+  const renderRow = (h, idx) => {
+	if (h._isEmpty) {
+	  return <li className="aff-classiques-departs__row" key={`empty-${idx}`} style={{ background: 'transparent' }}></li>;
+	}
+
+	const horaire = h || {};
+	const op = horaire.type_train || horaire.op || '';
+	const isCarTER = (op === 'Car TER' || op === 'Autocar');
+	const time = horaire._displayTime || formatTimeNoSeconds(horaire.heure_depart || horaire.time || horaire.heure || '');
+	const destination = horaire.gare_arrivee_nom || '';
+	const platform = (horaire._displayPlatform || '').toString().trim();
+	const stationId = horaire.gare_depart_id || horaire.gare_id || horaire.origin_id || (gareIdParam || null);
+	const stationName = gareDisplay || horaire.gare_depart_nom || horaire.gare_depart || horaire.origin_name || null;
+	const status = horaire._status || computeStatusForHoraireAtStop(horaire, stationId, stationName, buildPerturbMap(perturbations));
+	const isSuppressed = status && status.label === 'supprimé';
+	const isDelayed    = status && status.label && String(status.label).startsWith('retardé');
+	
+	let showPlatform = !isSuppressed && Boolean(platform);
+	if (showPlatform) {
+	  const nowHM = currentTime.getHours()*60 + currentTime.getMinutes();
+	  const sched = (typeof horaire._depHM === 'number') ? horaire._depHM : parseTimeHM(horaire.heure_depart || horaire.time || horaire.heure || horaire._rawTime || '');
+	  const threshold = thresholdForStationType(stationType);
+	  if (typeof sched === 'number') {
+		let diff = sched - nowHM;
+		// Gérer le passage à minuit
+		if (diff < -720) { // e.g., now 23:00, sched 01:00, diff is ~ -22 hours
+		  diff += 1440; // treat as next day
+		}
+		showPlatform = (diff >= 0 && diff <= threshold);
+	  } else {
+		showPlatform = false;
+	  }
+	}
+
+	const isSub = isSubstitution(horaire);
+	const infoText = isSub
+	  ? (horaire.motif_substitution && horaire.motif_substitution !== 'TRAVAUX' && horaire.motif_substitution !== 'Travaux.' ? horaire.motif_substitution : 'Autocar cour de la gare Plateforme 14')
+	  : (status && status.causeDetails ? status.causeDetails : '');
+	const trainNumber = horaire.numero_train || horaire.numero || horaire.number || '';
+
+	return (
+	  <li className="aff-classiques-departs__row" key={idx}>
+
+		{/* COL 1 : Logo opérateur */}
+		<div className="aff-classiques-departs__col-logo">
+		  {isCarTER ? (
+			<div className="aff-classiques-departs__logo-box">
+			  <img src="/type/sncf-voyageurs-logo.png" alt="SNCF Voyageurs" className="aff-classiques-departs__op-logo" />
+			</div>
+		  ) : (
+			<Logo
+			  op={op}
+			  classNameBox="aff-classiques-departs__logo-box"
+			  classNameImg="aff-classiques-departs__op-logo"
+			  classNameText="aff-classiques-departs__logo-text"
+			/>
+		  )}
+		</div>
+
+		{/* COL 2 : Type + Numéro (4s) OU Statut (4s) */}
+		<div className="aff-classiques-departs__col-meta">
+		  {showStatus ? (
+			isSuppressed ? (
+			  <div className="aff-classiques-departs__status-suppressed">supprimé</div>
+			) : isDelayed ? (
+			  <div className="aff-classiques-departs__status-delayed">
+				<div className="aff-classiques-departs__status-label">retard</div>
+				<div className="aff-classiques-departs__status-value">{status.delayMinutes} min.</div>
+			  </div>
+			) : (
+			  <div className="aff-classiques-departs__status-ontime">à l'heure</div>
+			)
+		  ) : (
+			<>
+			  <div className="aff-classiques-departs__train-type">{op}</div>
+			  <div className="aff-classiques-departs__train-number">{trainNumber}</div>
+			</>
+		  )}
+		</div>
+
+		{/* COL 3 : Heure (grande, jaune) */}
+		<div className="aff-classiques-departs__col-time">
+		  <div className="aff-classiques-departs__time">{time}</div>
+		</div>
+
+		{/* COL 4 : Destination + Info cause (slide-in 5s/5s) */}
+		<div className="aff-classiques-departs__col-destination">
+		  <MarqueeText text={destination} className="aff-classiques-departs__destination" />
+		  {showInfoCause && infoText ? (
+			<div className="aff-classiques-departs__info-wrapper">
+			  <div className="aff-classiques-departs__info-inner">
+				<div className="aff-classiques-departs__separator">|</div>
+				<div className="aff-classiques-departs__info-text">{infoText}</div>
+			  </div>
+			</div>
+		  ) : null}
+		</div>
+
+		{/* COL 5 : Quai OU icône bus */}
+		<div className="aff-classiques-departs__col-platform">
+		  {isSub || isCarTER ? (
+			<img src="/type/track-car.svg" alt="Car" style={{ width: '6.5vh', height: '6.5vh' }} />
+		  ) : showPlatform ? (
+			<div className="aff-classiques-departs__platform-box">
+			  <div className="aff-classiques-departs__platform-text">{platform}</div>
+			</div>
+		  ) : null}
+		</div>
+
+	  </li>
+	);
+  };
+
  return (
 	<div className="aff-classiques-departs__container">
-	  {/* nom de la gare configurable via ?gare=Nom-de-la-gare */}
+
+	  {/* Watermark "départs" — diagonal droite */}
 	  <div className="aff-classiques-departs__watermark">départs</div>
-	  <ul className="aff-classiques-departs__list">
-		{horaires.length === 0 ? (
-		  <li className="aff-classiques-departs__row aff-classiques-departs__row--empty" key="empty">
-			<div>Aucun horaire disponible.</div>
+
+	  {defilementMode ? (
+		/* ── MODE DÉFILEMENT : marquee vertical infini ── */
+		<div className="aff-classiques-departs__scroll-container">
+		  {horaires.length === 0 ? (
+			<ul className="aff-classiques-departs__list">
+			  <li className="aff-classiques-departs__row aff-classiques-departs__row--empty">
+				<div>Aucun horaire disponible.</div>
+			  </li>
+			</ul>
+		  ) : (
+			<ul
+			  className="aff-classiques-departs__scroll-track"
+			>
+			  {rowsToRender.map((h, idx) => renderRow(h, idx))}
+			</ul>
+		  )}
+		</div>
+	  ) : (
+		/* ── MODE NORMAL : 10 lignes statiques ── */
+		<ul className="aff-classiques-departs__list">
+		  {horaires.length === 0 ? (
+			<li className="aff-classiques-departs__row aff-classiques-departs__row--empty" key="empty">
+			  <div>Aucun horaire disponible.</div>
 			  <div style={{fontSize:'0.8rem', opacity:0.8}}>lignes brutes renvoyées : {rawDebug.count}</div>
 			  {rawDebug.count > 0 && rawDebug.sample && rawDebug.sample.length > 0 ? (
-				  <pre style={{maxHeight: 160, overflow: 'auto', fontSize: '0.75rem', marginTop: 8, background: '#111', color:'#fff', padding:8}}>
-				{JSON.stringify(rawDebug.sample.slice(0,2), null, 2).slice(0,1000)}{JSON.stringify(rawDebug.sample.slice(0,2), null, 2).length > 1000 ? '…(truncated)' : ''}
-			  </pre>
-			) : null}
-		  </li>
-		) : horaires.map((h, idx) => {
-		  const horaire = h || {};
-		  const op = horaire.type_train || horaire.op || '';
-		  const number = horaire.numero_train || horaire.number || horaire.numero || '';
-		  // Use enriched display time (computed during fetch) — fallback to formatting raw fields
-		  let time = horaire._displayTime || formatTimeNoSeconds(horaire.heure_depart || horaire.time || horaire.heure || '');
-
-		  const destination = horaire.gare_arrivee_nom || '';
-		  const platform = (horaire._displayPlatform || horaire.platform || '').toString().trim();
-		  // attachedPerturbs/rowObj previously used for mocked status; status is now computed from perturbations per stop
-
-		  // determine station context (the display station) — prefer explicit gareIdParam/gareDisplay if provided
-		  const stationId = horaire.gare_depart_id || horaire.gare_id || horaire.origin_id || (gareIdParam || null);
-		  const stationName = (gareDisplay) ? gareDisplay : (horaire.gare_depart_nom || horaire.gare_depart || horaire.origin_name || null);
-
-		  // prefer precomputed status and display time (synchronisé depuis la BDD) — sinon calculer à la volée
-		  const status = horaire._status || computeStatusForHoraireAtStop(horaire, stationId, stationName, buildPerturbMap(perturbations));
-
-          if (status && status.label === 'supprimé' && showStatus) {
-            time = '';
-          }
-		  // if the status is 'supprimé' and the component is currently showing the status (showStatus toggles every 3s), hide the time
-		  if (status && status.label === 'supprimé' && showStatus) {
-			time = '';
-		  } else if (!horaire._displayTime && status && typeof status.delayMinutes === 'number' && !isNaN(status.delayMinutes)) {
-			// if we have _depHM (minutes since midnight) use it
-			if (typeof horaire._depHM === 'number') {
-			  time = formatTimeFromHM(horaire._depHM + status.delayMinutes);
-			} else {
-			  // fallback: try to parse original time string
-			  const tryParse = (s) => {
-				if (!s) return null;
-				const m = String(s).match(/(\d{1,2}):(\d{2})/);
-				if (m) return parseInt(m[1],10)*60 + parseInt(m[2],10);
-				const d = new Date(s);
-				if (!isNaN(d.getTime())) return d.getHours()*60 + d.getMinutes();
-				return null;
-			  };
-			  const base = tryParse(horaire.heure_depart || horaire.time || horaire.heure || horaire._rawTime || '');
-			  if (typeof base === 'number') time = formatTimeFromHM(base + status.delayMinutes);
-			}
-		  }
-		  const statusClass = status.label === 'supprimé' ? 'aff-classiques-departs__train-meta--suppressed' : (status.label && String(status.label).startsWith('retardé') ? 'aff-classiques-departs__train-meta--delayed' : '');
-
-		  // Ne pas afficher le quai si le train est supprimé ou si aucun quai n'est défini
-		  let showPlatform = !(status && status.label === 'supprimé') && Boolean(platform);
-		  if (showPlatform) {
-			const nowHM = currentTime.getHours()*60 + currentTime.getMinutes(); // Use currentTime
-			const sched = (typeof horaire._depHM === 'number') ? horaire._depHM : parseTimeHM(horaire.heure_depart || horaire.time || horaire.heure || horaire._rawTime || '');
-			const threshold = thresholdForStationType(stationType);
-			if (typeof sched === 'number' && typeof threshold === 'number' && threshold > 0) {
-			  // n'afficher le quai que si l'heure courante est au moins (scheduled - threshold)
-			  showPlatform = (nowHM >= (sched - threshold));
-			}
-		  }
-
-		  return (
-			<li className="aff-classiques-departs__row" key={idx}>
-			  <div className="aff-classiques-departs__col-logo">
-				<Logo op={op} />
-			  </div>
-			  <div className="aff-classiques-departs__col-train-type">
-				{showStatus ? (
-				  <div className={`aff-classiques-departs__train-meta aff-classiques-departs__train-status ${statusClass}`} aria-live="polite">
-					<div className="aff-classiques-departs__op-name">{status.label}</div>
-					<div className="aff-classiques-departs__op-number">{status.detail}</div>
-				  </div>
-				) : (
-				  <div className="aff-classiques-departs__train-meta">
-					<div className="aff-classiques-departs__op-name">{op}</div>
-					<div className="aff-classiques-departs__op-number">{number}</div>
-				  </div>
-				)}
-			  </div>
-			  <div className="aff-classiques-departs__col-time">
-				<div className="aff-classiques-departs__time">{time}</div>
-			  </div>
-			  <div className="aff-classiques-departs__col-destination">
-				<div className="aff-classiques-departs__destination">{destination}</div>
-			  </div>
-			  {showPlatform ? (
-				<div className="aff-classiques-departs__col-platform">
-				  <div className="aff-classiques-departs__platform-box">
-					<div className="aff-classiques-departs__platform-text">{platform}</div>
-				  </div>
-				</div>
+				<pre style={{maxHeight:160, overflow:'auto', fontSize:'0.75rem', marginTop:8, background:'#111', color:'#fff', padding:8}}>
+				  {JSON.stringify(rawDebug.sample.slice(0,2), null, 2).slice(0,1000)}
+				  {JSON.stringify(rawDebug.sample.slice(0,2), null, 2).length > 1000 ? '…(truncated)' : ''}
+				</pre>
 			  ) : null}
 			</li>
-		  );
-		})}
-	  </ul>
-				  {/* Footer visuel de l'afficheur — barre foncée en bas */}
-		<div className="aff-classiques-departs__footer" aria-hidden>
-			<div className="aff-classiques-departs__footer-inner">
-				<Clock />
+		  ) : horaires.map((h, idx) => renderRow(h, idx))}
+		</ul>
+	  )}

-			</div>
-		</div>
+	  {/* Horloge — superposée en bas à droite */}
+	  <div className="aff-classiques-departs__footer" aria-hidden>
+		<Clock />
+	  </div>

 	</div>
  )
-}
+}
@@ -1,475 +1,337 @@
-
-
-.achemine-font-face {
-    /* helper placeholder (no output) */
+@font-face {
+  font-family: 'Achemine';
+  src: url('/public/fonts/achemine_regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
@font-face {
-    font-family: 'Achemine';
-    src: url('/public/fonts/achemine_regular.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: 'Achemine';
-    src: url('/public/fonts/achemine_bold.ttf') format('truetype');
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
-.aff-quais__left--strict {
-    width: 100%;
-    max-width: 0;
-    min-width: 700px;
-    background: var(--white);
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    /* Remonter l'ensemble du contenu vers le bas pour laisser la place au logo en haut */
-    padding: 140px 32px 24px 32px;
-    box-sizing: border-box;
-    position: relative;
-    /* leave space at bottom for the footer (height 86px) */
-    height: calc(100vh - 86px);
-    overflow: hidden;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    box-shadow: none;
-}
-.aff-quais__left--strict,
-.aff-quais__left--strict * {
-    font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
-    /* Ensure the left strict zone text uses the intended color (fallback to green-dark) */
-    color: #2d522c;
-}
-.aff-quais__type-logo--strict{
-    position: absolute;
-    top: 18px;
-    /* positionné à gauche dans la zone blanche (à droite du logo opérateur) */
-    /* tout à gauche de la zone blanche */
-    left: 32px;
-    width: 120px;
-    height: auto;
-    object-fit: contain;
-    z-index: 5;
-    pointer-events: none;
-}
-.aff-quais__sncf-logo--strict {
-    width: 86px;
-    height: auto;
-    margin-bottom: 18px;
-    margin-left: 0;
-    margin-top: 0;
-    position: absolute;
-    top: 18px;
-    /* placé à droite du logo du type */
-    left: 140px;
-    z-index: 4;
-}
-.aff-quais__watermark {
-    position: absolute;
-    /* move watermark further to the right */
-    right: -180px;
-    top: 70%;
-    transform: translateY(-50%) rotate(-90deg);
-    /* police agrandie de 200% */
-    font-size: 200px;
-    color: var(--watermark-green);
-    opacity: 0.07;
-    font-weight: 800;
-    letter-spacing: 6px;
-    pointer-events: none;
-    user-select: none;
-    z-index: 0;
-}
-.aff-quais__row--time-status {
-    display: flex;
-    align-items: flex-end;
-    gap: 18px;
-    margin-bottom: 18px;
-    z-index: 1;
-}
-.aff-quais__time--strict {
-    color: var(--green-dark);
-    font-weight: 800;
-    /* police agrandie de 200% */
-    font-size: 112px;
-    line-height: 1;
-    letter-spacing: 0.5px;
-    margin-right: 12px;
+  font-family: 'Achemine';
+  src: url('/public/fonts/achemine_bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
 }

-/* Wrapper that contains both the big time and the smaller status when alternating.
-   Keeps the layout width/height stable so alternating does not reflow the surrounding text. */
-.aff-quais__time-status-wrapper {
-    position: relative;
-    display: inline-block; /* width is determined by the time element in normal flow */
-    height: 112px; /* match .aff-quais__time font-size so status can be aligned at bottom */
-    vertical-align: bottom;
-    overflow: visible;
+body, html {
+  margin: 0;
+  padding: 0;
+  background-color: #006330; /* Green theme */
+  overflow: hidden;
 }

-.aff-quais__time-status-wrapper .aff-quais__time--strict {
-    position: relative; /* keep in flow to define wrapper width */
-    display: block;
-    top: 0;
-    left: 0;
-    transition: opacity 180ms linear;
+.aff-quais-arrivees-redesign__container {
+  display: flex;
+  flex-direction: row;
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
+  background-color: #006330;
+  color: #fff;
+  overflow: hidden;
 }

-.aff-quais__time-status-wrapper .aff-quais__time-status--strict {
-    position: absolute; /* overlay on the same horizontal position */
-    left: 0;
-    right: 0;
-    bottom: 0; /* align to bottom similar to previous align-self:flex-end */
-    transition: opacity 180ms linear;
+.aff-quais-arrivees-redesign__empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }

-.aff-quais__time-status-wrapper .hidden { opacity: 0; pointer-events: none; }
-.aff-quais__time-status-wrapper .visible { opacity: 1; }
-.aff-quais__time-status--strict {
-    color: var(--accent-yellow);
-    /* police agrandie de 200% */
-    font-size: 44px;
-    font-weight: 400;
-    opacity: 1;
-    align-self: flex-end;
-    margin-bottom: 14px;
-}
-.aff-quais__destination--strict {
-    margin-top: 10px;
-    margin-bottom: 0;
-    color: var(--green-dark);
-    z-index: 1;
-}
-.aff-quais__destination-line1--strict {
-    /* police agrandie de 200% */
-    font-size: 76px;
-    font-weight: 800;
-    line-height: 1.1;
-}
-.aff-quais__destination-line2--strict {
-    /* police agrandie de 200% */
-    font-size: 76px;
-    font-weight: 800;
-    line-height: 1.1;
-}
-.aff-quais__train-id--strict {
-    margin-top: 12px;
-    color: var(--green-dark);
-    font-weight: 700;
-    /* police agrandie de 200% */
-    font-size: 44px;
-    letter-spacing: 0.5px;
-    z-index: 1;
-}
-.aff-quais__train-number--strict {
-    color: var(--green-dark);
-    font-weight: 400;
-    /* police agrandie de 200% */
-    font-size: 44px;
-}
-.aff-quais__quai{
-    margin-top: 8px;
-    color: var(--green-dark);
-    font-weight:800;
-    background: rgba(255,255,255,0.08);
-    padding:6px 10px;
-    border-radius:6px;
-    display:inline-block;
+.aff-quais-arrivees-redesign__empty-text {
+  font-size: 6rem;
+  font-weight: 700;
+  color: #ffffff;
+  text-align: center;
 }

-/* central divider */
-.aff-quais__divider{
-    width:18px;
-    background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.18));
-    display:flex;
-    justify-content:center;
-    align-items:flex-start;
-    padding-top:36px;
-}
-.aff-quais__divider:before{
-    content:'';
-    width:6px;
-    background: transparent;
-    box-shadow: 0 18px 0 0 #f0e34f, 0 54px 0 0 #f0e34f, 0 90px 0 0 #f0e34f, 0 126px 0 0 #f0e34f, 0 162px 0 0 #f0e34f, 0 198px 0 0 #f0e34f;
-    display:block;
-    border-radius:4px;
+/* =========================================================
+   LEFT PANEL
+   ========================================================= */
+.aff-quais-arrivees-redesign__left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 35%;
+  bottom: 80px;
+  background-color: #f3eef4; /* Lilac/Light Grey background */
+  box-sizing: border-box;
+  padding: 30px 40px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }

-/* Right panel with stops */
-.aff-quais__right{
-    flex:1;
-    background: linear-gradient(180deg,var(--green) 0%, var(--green-dark) 100%);
-    display:flex;
-    align-items:center;
-    box-sizing:border-box;
-    padding: 24px 36px;
-}
-.aff-quais__stops-box{
-    width:100%;
-    max-width:820px;
-    margin-left:24px;
-}
-.aff-quais__stops-list{
-    list-style:none;
-    margin:0;
-    padding:0;
-    width:100%;
-}
-.aff-quais__stop{
-    display:flex;
-    align-items:center;
-    gap:18px;
-    padding: 10px 16px;
-    color:#fff;
-    font-size:30px;
-    line-height:1.1;
-}
-.aff-quais__bullet{
-    width:14px;
-    height:14px;
-    background: #bbd258; /* yellow bullet */
-    border-radius:50%;
-    display:inline-block;
-    box-shadow: 0 0 0 4px rgba(240,227,79,0.06) inset;
-}
-.aff-quais__stop--active{
-    background: rgba(155,123,224,0.15);
-    border-radius:6px;
-}
-.aff-quais__stop--active .aff-quais__bullet{
-    background:#9b7be0; /* purple for final */
-}
-.aff-quais__stop-text{
-    flex:1;
-    padding-left:6px;
+.aff-quais-arrivees-redesign__sncf-logo {
+  width: 90px;
+  height: auto;
+  margin-bottom: 25px;
+  z-index: 2;
 }

-/* --- STRICT STYLES FOR RIGHT PANEL --- */
-
-.aff-quais__right--strict {
-    flex: 1;
-    /* use arrivals green gradient */
-    background: linear-gradient(180deg, var(--green) -100%, var(--green-dark) 100%);
-    display: flex;
-    align-items: flex-start;
-    justify-content: flex-start;
-    padding: 48px 0 48px 0;
-    min-width: 0;
-    /* leave space for footer */
-    height: calc(100vh - 86px);
-    box-sizing: border-box;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    box-shadow: none;
-    position: relative; /* anchor for the stops rail */
+.aff-quais-arrivees-redesign__time-status {
+  display: flex;
+  align-items: baseline;
+  gap: 15px;
+  margin-bottom: 5px;
+  z-index: 2;
 }

-.aff-quais__stops-list--strict {
-    list-style: none;
-    margin: 0;
-    /* variables pour contrôler la colonne de pastilles */
-    --rail-gap: 72px; /* espacement vertical entre pastilles (ajuster si nécessaire) */
-    --rail-offset: 24px; /* décalage vertical initial pour aligner la première pastille */
-    --rail-left: 28px; /* position X du rail inside right panel */
-    --rail-width: 12px; /* largeur du rail/pastille */
-    --ul-padding: 56px; /* padding-left actuel de la liste */
-    /* laisser un espace modéré à gauche pour la colonne de points */
-    padding: 0 0 0 var(--ul-padding);
-    width: 100%;
-    max-width: 600px;
-    position: relative;
+.aff-quais-arrivees-redesign__time {
+  color: #006330; /* Green theme text */
+  font-weight: 700;
+  font-size: 7.5rem;
+  line-height: 1;
 }

-/* élément rail explicite (utilisé pour afficher la colonne de pastilles) */
-.aff-quais__stops-rail{
-    position: absolute;
-    /* position relative to the right panel container */
-    left: calc(var(--rail-left) - 8px);
-    top: 0;
-    bottom: 0;
-    /* make rail clearly visible and wide enough */
-    width: 30px;
-    z-index: 2;
-    pointer-events: none;
-    /* base color: same as destination rectangle */
-    background-color: rgba(255,255,255,0.06);
-    overflow: visible;
+.aff-quais-arrivees-redesign__status {
+  color: #006330; /* Green theme status */
+  font-weight: 700;
+  font-size: 2.4rem;
+  line-height: 1;
 }

-.aff-quais__rail-dot{
-    display: block;
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    /* size is set dynamically from JS to match rail width */
-    width: auto;
-    height: auto;
-    border-radius: 50%;
-    background: var(--accent-yellow);
-    box-shadow: 0 0 0 4px rgba(255,230,102,0.06) inset;
+.aff-quais-arrivees-redesign__destination {
+  color: #006330; /* Green theme destination (origin) */
+  font-weight: 700;
+  font-size: 5.5rem; /* Slightly smaller to fit 2 lines if needed */
+  line-height: 1.1;
+  margin-bottom: 5px;
+  z-index: 2;
+  white-space: normal; /* Allow wrapping */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 13rem; /* Prevent overflowing panel */
 }

-.aff-quais__stop--strict {
-    display: flex;
-    align-items: center;
-    /* agrandi de 150% */
-    font-size: calc(2.1rem * 1.5);
-    color: #fff;
-    font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
-    font-weight: 400;
-    /* espacement augmenté entre les noms des gares */
-    margin-bottom: 18px;
-    line-height: 1.18;
-    padding: 0 0 0 0;
-    position: relative; /* each li is positioned so its ::before aligns with the rail */
+.aff-quais-arrivees-redesign__train-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 2;
 }

-.aff-quais__stop-bullet--strict {
-    /* bullets individuels masqués : on utilise une barre verticale */
-    display: none;
+.aff-quais-arrivees-redesign__train-type {
+  color: #006330; /* Green theme train type */
+  font-weight: 700;
+  font-size: 2.2rem;
+  letter-spacing: 0.5px;
 }

-/* pastille positionnée pour chaque item, alignée sur la colonne (rail) */
-.aff-quais__stop--strict::before{
-    /* disable per-item pseudo pastille — rail handles the dots */
-    display: none;
+.aff-quais-arrivees-redesign__train-number {
+  color: #7e8a80; /* Grey/Green train number */
+  font-weight: 400;
+  font-size: 2.2rem;
+  letter-spacing: 0.5px;
 }

-/* barre verticale de points jaunes pour la liste des gares */
-/* removed ::before — using explicit .aff-quais__stops-rail element instead */
-
-.aff-quais__stop-text--strict{ /* ensure text doesn't overlap the rail */
-    padding-left: 6px;
+.aff-quais-arrivees-redesign__icons {
+  position: absolute;
+  bottom: 20px;
+  left: 40px;
+  display: flex;
+  align-items: center;
+  z-index: 2;
 }

-.aff-quais__status--alert{
-    color: #ffe600;
-    font-weight: 800;
+.aff-quais-arrivees-redesign__watermark {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+  transform-origin: right center;
+  font-size: 17rem; /* Massive size */
+  color: #dbebdf; /* Light green/grey watermark */
+  font-weight: 700;
+  z-index: 1;
+  pointer-events: none;
+  user-select: none;
+  letter-spacing: 1.5rem;
+  line-height: 1;
+  white-space: nowrap;
 }

-.aff-quais__stop-text--strict {
-    display: inline-block;
-    font-size: inherit;
-    font-weight: inherit;
-    color: inherit;
+/* =========================================================
+   RIGHT PANEL
+   ========================================================= */
+.aff-quais-arrivees-redesign__right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 65%;
+  bottom: 80px;
+  background-color: #006330; /* Green theme */
+  box-sizing: border-box;
+  padding: 30px 0 30px 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }

-.aff-quais__stop--strict-dest {
-    font-weight: 800;
-    background: rgba(255,255,255,0.08);
-    color: var(--green-dark);
-    border-radius: 6px;
-    padding: 2px 32px 2px 0;
-    margin-left: -45px;
-    width: auto;
-
-    padding-left: 45px;
+.aff-quais-arrivees-redesign__provenance-title {
+  font-size: 3.4rem;
+  color: #dbeb1a; /* Yellow provenance header */
+  margin-left: 60px;
+  margin-bottom: 20px;
+  font-weight: 700;
 }

-/* Ensure the highlighted destination stop text is white for readability */
-.aff-quais__stop--strict-dest .aff-quais__stop-text--strict {
-    color: #ffffff !important;
+.aff-quais-arrivees-redesign__stops-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 60px; /* Space from left edge */
+  width: 100%;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px; /* Closer spacing between stops */
 }

-.aff-quais__container--strict.aff-quais__container--arrivees {
-    display: flex;
-    flex-direction: row;
-    width: 100vw;
-    height: 100vh;
-    min-height: 0;
-    min-width: 0;
-    background: var(--green-dark);
-    box-sizing: border-box;
-    overflow: hidden;
-    /* make container positioned so the absolute footer can be placed relative to it */
-    position: relative;
+.aff-quais-arrivees-redesign__stop {
+  display: flex;
+  align-items: center;
+  font-size: 3.4rem;
+  font-weight: 400;
+  color: #ffffff;
+  position: relative;
+  min-height: 42px;
+  padding-left: 50px; /* Space for rail and bullet */
 }

-.aff-quais__separator--strict {
-    width: 14px;
-    min-width: 14px;
-    max-width: 14px;
-    background: var(--green-dark);
-    /* align separator with the panels which leave room for footer */
-    height: calc(100vh - 86px);
-    display: block;
-    z-index: 2;
+/* Bullet styling */
+.aff-quais-arrivees-redesign__stop-bullet {
+  position: absolute;
+  left: 0; /* Centered on 24px rail: (24-16)/2 = 4 */
+  margin-left: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px; /* Slightly larger bullet */
+  height: 16px;
+  background-color: #fbec22;
+  border-radius: 50%;
+  z-index: 4;
 }

-@media (max-width: 900px) {
-    .aff-quais__right--strict {
-        padding: 18px 0 18px 0;
-    }
-    /* moins d'espace en haut sur petits écrans */
-    .aff-quais__left--strict { padding-top: 80px; }
-    .aff-quais__stops-list--strict {
-        padding-left: 12px;
-    }
-    .aff-quais__stop--strict {
-        font-size: 1.1rem;
-    }
-    .aff-quais__stop-bullet--strict {
-        width: 8px;
-        height: 8px;
-        margin-right: 8px;
-    }
-    .aff-quais__stop--strict-dest {
-        padding: 1px 6px 1px 0;
-        border-radius: 4px;
-    }
+.aff-quais-arrivees-redesign__stop-text {
+  position: relative;
+  z-index: 4;
+  white-space: nowrap;
+  letter-spacing: 0.5px;
+  padding-left: 10px; /* Space from bullet */
 }

-/* --- END STRICT STYLES FOR RIGHT PANEL --- */
-
-.aff-quais__footer{
-    position:absolute;
-    left:0;
-    right:0;
-    bottom:0;
-    height:86px;
-    pointer-events:none;
-}
-.aff-quais__footer-inner{
-    display:flex;
-    justify-content:space-between;
-    align-items:center;
-    height:100%;
-    padding: 0 28px;
-    background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.25));
-}
-.aff-quais__footer-left{
-    color:#fff;
-    font-weight:700;
-    font-size:20px;
-}
-/* CLOCK BOX - unified */
-.aff-quais__clock-box{
-    background: var(--green-dark);
-    color:#fff;
-    padding: 6px 12px;
-    border-radius: 6px;
-    border: 4px solid #ffffff;
-}
-.aff-quais__clock-main{
-    font-size:18px;
-    font-weight:800;
+/* The vertical rail segments drawn behind each bullet */
+.aff-quais-arrivees-redesign__stop::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 24px; /* Much wider rail */
+  background-color: #8fa993; /* Light green-grey rail color */
+  top: -10px;
+  bottom: -10px;
+  z-index: 1;
 }

-/* position the clock bottom-right inside a small white rounded box like on the image */
-.aff-quais__footer-right{
-    position:relative;
-}
-.aff-quais__clock{
-    position:relative;
-}
-@media (max-width: 900px){
-    .aff-quais__left{width:42%;}
-    .aff-quais__destination-line1{font-size:36px}
-    .aff-quais__destination-line2{font-size:28px}
-    .aff-quais__time{font-size:48px}
+/* Rail starts at the first bullet's center */
+.aff-quais-arrivees-redesign__stop:first-child::before {
+  top: 50%;
 }

+/* Last stop has no rail continuing below */
+.aff-quais-arrivees-redesign__stop:last-child::before {
+  bottom: 50%;
+}
+
+/* =========================================================
+   FOOTER
+   ========================================================= */
+.aff-quais-arrivees-redesign__footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+  background-color: #006330; /* Green theme */
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 40px;
+  z-index: 10;
+}
+
+.aff-quais-arrivees-redesign__footer-left {
+  font-size: 3rem;
+  font-weight: 700;
+  color: #ffffff;
+  font-style: italic;
+  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
+  letter-spacing: 0.5px;
+}
+
+.aff-quais-arrivees-redesign__footer-right {
+  display: flex;
+  align-items: center;
+}
+
+.aff-quais-arrivees-redesign__clock {
+  border: 2px solid #ffffff;
+  padding: 4px 14px;
+  font-size: 3rem;
+  font-weight: 700;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
+}
+
+.aff-quais-arrivees-redesign__clock-s {
+  color: #f5a623;
+}
+
+.aff-quais-arrivees-redesign__time--long-text {
+  font-size: 3.5rem !important;
+  line-height: 1.2 !important;
+}
+
+.aff-quais-arrivees-redesign__time--suppressed,
+.aff-quais-arrivees-redesign__status--suppressed {
+  color: #ff4c5b !important;
+}
+
+.aff-quais-arrivees-redesign__time--delayed,
+.aff-quais-arrivees-redesign__status--delayed {
+  color: #ff9e43 !important;
+}
+
+/* Disrupted Stop styling */
+.aff-quais-arrivees-redesign__stop-text--suppressed {
+  text-decoration: line-through;
+  color: #ff4c5b;
+  opacity: 0.6;
+}
+
+.aff-quais-arrivees-redesign__stop-text--delayed {
+  color: #ff9e43;
+}
+
+.aff-quais-arrivees-redesign__stop-status-badge {
+  font-size: 2.2rem;
+  font-weight: bold;
+  margin-left: 10px;
+}
+
+.aff-quais-arrivees-redesign__stop-status-badge--suppressed {
+  color: #ff4c5b;
+}
+
+.aff-quais-arrivees-redesign__stop-status-badge--delayed {
+  color: #ff9e43;
+}

@@ -1,7 +1,3 @@
-/* Partie gauche strictement comme l'image */
-.achemine-font-face {
-  /* helper placeholder (no output) */
-}
@font-face {
  font-family: 'Achemine';
  src: url('/public/fonts/achemine_regular.ttf') format('truetype');
@@ -16,473 +12,333 @@
  font-style: normal;
  font-display: swap;
 }
-.aff-quais__left--strict {
-  width: 100%;
-  max-width: 0;
-  min-width: 700px;
-  background: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  /* Remonter l'ensemble du contenu vers le bas pour laisser la place au logo en haut */
-  padding: 140px 32px 24px 32px;
-  box-sizing: border-box;
-  position: relative;
-  /* leave space at bottom for the footer (height 86px) */
-  height: calc(100vh - 86px);
-  overflow: hidden;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  box-shadow: none;
-}
-.aff-quais__left--strict,
-.aff-quais__left--strict * {
-  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
-}

-/* Apply blue color specifically for departures container only (avoid being overridden by arrivées stylesheet)
-   Use :not(.aff-quais__container--arrivees) to scope to departures */
-.aff-quais__container--strict:not(.aff-quais__container--arrivees) .aff-quais__left--strict,
-.aff-quais__container--strict:not(.aff-quais__container--arrivees) .aff-quais__left--strict * {
-  color: #0d4a87;
-}
-
-/* Strong override for departures container: ensure destination title isn't black/green due to other styles */
-.aff-quais__container--depart .aff-quais__left--strict,
-.aff-quais__container--depart .aff-quais__left--strict * {
-  color: #0d4a87 !important;
-}
-.aff-quais__type-logo--strict{
-  position: absolute;
-  top: 18px;
-  /* positionné à gauche dans la zone blanche (à droite du logo opérateur) */
-  /* tout à gauche de la zone blanche */
-  left: 32px;
-  width: 120px;
-  height: auto;
-  object-fit: contain;
-  z-index: 5;
-  pointer-events: none;
-}
-.aff-quais__sncf-logo--strict {
-  width: 86px;
-  height: auto;
-  margin-bottom: 18px;
-  margin-left: 0;
-  margin-top: 0;
-  position: absolute;
-  top: 18px;
-  /* placé à droite du logo du type */
-  left: 140px;
-  z-index: 4;
-}
-.aff-quais__watermark {
-  position: absolute;
-  /* move watermark further to the right */
-  right: -180px;
-  top: 70%;
-  transform: translateY(-50%) rotate(-90deg);
-  /* police agrandie de 200% */
-  font-size: 200px;
-  color: rgba(23,55,113,0.07);
-  font-weight: 800;
-  letter-spacing: 6px;
-  pointer-events: none;
-  user-select: none;
-  z-index: 0;
-}
-.aff-quais__row--time-status {
-  display: flex;
-  align-items: flex-end;
-  gap: 18px;
-  margin-bottom: 18px;
-  z-index: 1;
-}
-.aff-quais__time--strict {
-  color: #0d4a87;
-  font-weight: 800;
-  /* police agrandie de 200% */
-  font-size: 112px;
-  line-height: 1;
-  letter-spacing: 0.5px;
-  margin-right: 12px;
-}
-
-/* Wrapper that contains both the big time and the smaller status when alternating.
-   Keeps the layout width/height stable so alternating does not reflow the surrounding text. */
-.aff-quais__time-status-wrapper {
-  position: relative;
-  display: inline-block; /* width is determined by the time element in normal flow */
-  height: 112px; /* match .aff-quais__time font-size so status can be aligned at bottom */
-  vertical-align: bottom;
-  overflow: visible;
-}
-
-.aff-quais__time-status-wrapper .aff-quais__time--strict {
-  position: relative; /* keep in flow to define wrapper width */
-  display: block;
-  top: 0;
-  left: 0;
-  transition: opacity 180ms linear;
-}
-
-.aff-quais__time-status-wrapper .aff-quais__time-status--strict {
-  position: absolute; /* overlay on the same horizontal position */
-  left: 0;
-  right: 0;
-  bottom: 0; /* align to bottom similar to previous align-self:flex-end */
-  transition: opacity 180ms linear;
-}
-
-.aff-quais__time-status-wrapper .hidden { opacity: 0; pointer-events: none; }
-.aff-quais__time-status-wrapper .visible { opacity: 1; }
-.aff-quais__time-status--strict {
-  color: #0d4a87;
-  /* police agrandie de 200% */
-  font-size: 44px;
-  font-weight: 400;
-  opacity: 1;
-  align-self: flex-end;
-  margin-bottom: 14px;
-}
-.aff-quais__destination--strict {
-  margin-top: 10px;
-  margin-bottom: 0;
-  color: #0d4a87;
-  z-index: 1;
-}
-.aff-quais__destination-line1--strict {
-  /* police agrandie de 200% */
-  font-size: 76px;
-  font-weight: 800;
-  line-height: 1.1;
-}
-.aff-quais__destination-line2--strict {
-  /* police agrandie de 200% */
-  font-size: 76px;
-  font-weight: 800;
-  line-height: 1.1;
-}
-.aff-quais__train-id--strict {
-  margin-top: 12px;
-  color: #0d4a87;
-  font-weight: 700;
-  /* police agrandie de 200% */
-  font-size: 44px;
-  letter-spacing: 0.5px;
-  z-index: 1;
-}
-.aff-quais__train-number--strict {
-  color: #0d4a87;
-  font-weight: 400;
-  /* police agrandie de 200% */
-  font-size: 44px;
-}
-.aff-quais__quai{
-  margin-top: 8px;
-  color:#0d4a87;
-  font-weight:800;
-  background: rgba(23,55,113,0.08);
-  padding:6px 10px;
-  border-radius:6px;
-  display:inline-block;
-}
-
-/* central divider */
-.aff-quais__divider{
-  width:18px;
-  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(255, 255, 255, 0.18));
-  display:flex;
-  justify-content:center;
-  align-items:flex-start;
-  padding-top:36px;
-}
-.aff-quais__divider:before{
-  content:'';
-  width:6px;
-  background: transparent;
-  box-shadow: 0 18px 0 0 #f0e34f, 0 54px 0 0 #f0e34f, 0 90px 0 0 #f0e34f, 0 126px 0 0 #f0e34f, 0 162px 0 0 #f0e34f, 0 198px 0 0 #f0e34f;
-  display:block;
-  border-radius:4px;
-}
-
-/* Right panel with stops */
-.aff-quais__right{
-  flex:1;
-  background: linear-gradient(180deg,#205aa1 0%, #144b85 100%);
-  display:flex;
-  align-items:center;
-  box-sizing:border-box;
-  padding: 24px 36px;
-}
-.aff-quais__stops-box{
-  width:100%;
-  max-width:820px;
-  margin-left:24px;
-}
-.aff-quais__stops-list{
-  list-style:none;
-  margin:0;
-  padding:0;
-  width:100%;
-}
-.aff-quais__stop{
-  display:flex;
-  align-items:center;
-  gap:18px;
-  padding: 10px 16px;
-  color:#fff;
-  font-size:30px;
-  line-height:1.1;
-}
-.aff-quais__bullet{
-  width:14px;
-  height:14px;
-  background: #bbd258; /* yellow bullet */
-  border-radius:50%;
-  display:inline-block;
-  box-shadow: 0 0 0 4px rgba(240,227,79,0.06) inset;
-}
-.aff-quais__stop--active{
-  background: rgba(155,123,224,0.15);
-  border-radius:6px;
-}
-.aff-quais__stop--active .aff-quais__bullet{
-  background:#9b7be0; /* purple for final */
-}
-.aff-quais__stop-text{
-  flex:1;
-  padding-left:6px;
-}
-
-/* --- STRICT STYLES FOR RIGHT PANEL --- */
-
-.aff-quais__right--strict {
-  flex: 1;
-  background: #205aa1; /* fond bleu uniforme */
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: 48px 0 48px 0;
-  min-width: 0;
-  /* leave space for footer */
-  height: calc(100vh - 86px);
-  box-sizing: border-box;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  box-shadow: none;
-  position: relative; /* anchor for the stops rail */
-}
-
-.aff-quais__stops-list--strict {
-  list-style: none;
+body, html {
  margin: 0;
-  /* variables pour contrôler la colonne de pastilles */
-  --rail-gap: 72px; /* espacement vertical entre pastilles (ajuster si nécessaire) */
-  --rail-offset: 24px; /* décalage vertical initial pour aligner la première pastille */
-  --rail-left: 28px; /* position X du rail inside right panel */
-  --rail-width: 12px; /* largeur du rail/pastille */
-  --ul-padding: 56px; /* padding-left actuel de la liste */
-  /* laisser un espace modéré à gauche pour la colonne de points */
-  padding: 0 0 0 var(--ul-padding);
-  width: 100%;
-  max-width: 600px;
-  position: relative;
+  padding: 0;
+  background-color: #0b376d;
+  overflow: hidden;
 }

-/* élément rail explicite (utilisé pour afficher la colonne de pastilles) */
-.aff-quais__stops-rail{
-  position: absolute;
-  /* position relative to the right panel container */
-  left: calc(var(--rail-left) - 8px);
-  top: 0;
-  bottom: 0;
-  /* make rail clearly visible and wide enough */
-  width: 30px;
-  z-index: 2;
-  pointer-events: none;
-  /* base color: same as destination rectangle */
-  background-color: #b6d2f7;
-  overflow: visible;
-}
-
-.aff-quais__rail-dot{
-  display: block;
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  /* size is set dynamically from JS to match rail width */
-  width: auto;
-  height: auto;
-  border-radius: 50%;
-  background: #b9d25a;
-  box-shadow: 0 0 0 4px rgba(255,230,102,0.06) inset;
-}
-
-.aff-quais__stop--strict {
-  display: flex;
-  align-items: center;
-  /* agrandi de 150% */
-  font-size: calc(2.1rem * 1.5);
-  color: #fff;
-  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
-  font-weight: 400;
-  /* espacement augmenté entre les noms des gares */
-  margin-bottom: 18px;
-  line-height: 1.18;
-  padding: 0 0 0 0;
-  position: relative; /* each li is positioned so its ::before aligns with the rail */
-}
-
-.aff-quais__stop-bullet--strict {
-  /* bullets individuels masqués : on utilise une barre verticale */
-  display: none;
-}
-
-/* pastille positionnée pour chaque item, alignée sur la colonne (rail) */
-.aff-quais__stop--strict::before{
-  /* disable per-item pseudo pastille — rail handles the dots */
-  display: none;
-}
-
-/* barre verticale de points jaunes pour la liste des gares */
-/* removed ::before — using explicit .aff-quais__stops-rail element instead */
-
-.aff-quais__stop-text--strict{ /* ensure text doesn't overlap the rail */
-  padding-left: 6px;
-}
-
-.aff-quais__status--alert{
-  color: #ffe600;
-  font-weight: 800;
-}
-
-.aff-quais__stop-text--strict {
-  display: inline-block;
-  font-size: inherit;
-  font-weight: inherit;
-  color: inherit;
-}
-
-.aff-quais__stop--strict-dest {
-  font-weight: 800;
-  background: #b6d2f7;
-  color: #205aa1;
-  border-radius: 6px;
-  padding: 2px 32px 2px 0;
-  margin-left: -45px;
-  width: auto;
-
-  padding-left: 45px;
-}
-
-/* Ensure the highlighted destination stop text is always white for readability */
-.aff-quais__stop--strict-dest .aff-quais__stop-text--strict {
-  color: #ffffff !important;
-}
-
-.aff-quais__container--strict {
+.aff-quais-departs-redesign__container {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
-  min-height: 0;
-  min-width: 0;
-  /* Palette locale pour l'afficheur départs : évite la palette arrivées importée ailleurs */
-  --blue: #205aa1;
-  --blue-dark: #144b85;
-  --accent-yellow: #e1c14c;
-  --white: #ffffff;
-  --watermark-blue: rgba(23,55,113,0.07);
-  background: var(--blue);
-  box-sizing: border-box;
-  overflow: hidden;
-  /* make container positioned so the absolute footer can be placed relative to it */
  position: relative;
+  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
+  background-color: #0b376d;
+  color: #fff;
+  overflow: hidden;
 }

-.aff-quais__separator--strict {
-  width: 14px;
-  min-width: 14px;
-  max-width: 14px;
-  background: #205aa1;
-  /* align separator with the panels which leave room for footer */
-  height: calc(100vh - 86px);
-  display: block;
+.aff-quais-departs-redesign__empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.aff-quais-departs-redesign__empty-text {
+  font-size: 6rem;
+  font-weight: 700;
+  color: #ffffff;
+  text-align: center;
+}
+
+/* =========================================================
+   LEFT PANEL
+   ========================================================= */
+.aff-quais-departs-redesign__left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 35%;
+  bottom: 80px;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  padding: 30px 40px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.aff-quais-departs-redesign__sncf-logo {
+  width: 90px;
+  height: auto;
+  margin-bottom: 25px;
  z-index: 2;
 }

-@media (max-width: 900px) {
-  .aff-quais__right--strict {
-    padding: 18px 0 18px 0;
-  }
-  /* moins d'espace en haut sur petits écrans */
-  .aff-quais__left--strict { padding-top: 80px; }
-  .aff-quais__stops-list--strict {
-    padding-left: 12px;
-  }
-  .aff-quais__stop--strict {
-    font-size: 1.1rem;
-  }
-  .aff-quais__stop-bullet--strict {
-    width: 8px;
-    height: 8px;
-    margin-right: 8px;
-  }
-  .aff-quais__stop--strict-dest {
-    padding: 1px 6px 1px 0;
-    border-radius: 4px;
-  }
+.aff-quais-departs-redesign__time-status {
+  display: flex;
+  align-items: baseline;
+  gap: 15px;
+  margin-bottom: 5px;
+  z-index: 2;
 }

-/* --- END STRICT STYLES FOR RIGHT PANEL --- */
-
-.aff-quais__footer{
-  position:absolute;
-  left:0;
-  right:0;
-  bottom:0;
-  height:86px;
-  pointer-events:none;
-}
-.aff-quais__footer-inner{
-  display:flex;
-  justify-content:space-between;
-  align-items:center;
-  height:100%;
-  padding: 0 28px;
-  background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.25));
-}
-.aff-quais__footer-left{
-  color:#fff;
-  font-weight:700;
-  font-size:20px;
-}
-/* CLOCK BOX - unified */
-.aff-quais__clock-box{
-  background: rgba(23,55,113,0.9);
-  color:#fff;
-  padding: 6px 12px;
-  border-radius: 6px;
-  border: 4px solid #ffffff;
-}
-.aff-quais__clock-main{
-  font-size:18px;
-  font-weight:800;
+.aff-quais-departs-redesign__time {
+  color: #0b376d;
+  font-weight: 700;
+  font-size: 7.5rem;
+  line-height: 1;
 }

-/* position the clock bottom-right inside a small white rounded box like on the image */
-.aff-quais__footer-right{
-  position:relative;
-}
-.aff-quais__clock{
-  position:relative;
-}
-@media (max-width: 900px){
-  .aff-quais__left{width:42%;}
-  .aff-quais__destination-line1{font-size:36px}
-  .aff-quais__destination-line2{font-size:28px}
-  .aff-quais__time{font-size:48px}
+.aff-quais-departs-redesign__status {
+  color: #0b376d;
+  font-weight: 700;
+  font-size: 2.4rem;
+  line-height: 1;
+}
+
+.aff-quais-departs-redesign__destination {
+  color: #0b376d;
+  font-weight: 700;
+  font-size: 5.5rem; /* Slightly smaller to fit 2 lines if needed */
+  line-height: 1.1;
+  margin-bottom: 5px;
+  z-index: 2;
+  white-space: normal; /* Allow wrapping */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: 13rem; /* Prevent overflowing panel */
+}
+
+.aff-quais-departs-redesign__train-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 2;
+}
+
+.aff-quais-departs-redesign__train-type {
+  color: #0b376d;
+  font-weight: 700;
+  font-size: 2.2rem;
+  letter-spacing: 0.5px;
+}
+
+.aff-quais-departs-redesign__train-number {
+  color: #929bb0;
+  font-weight: 400;
+  font-size: 2.2rem;
+  letter-spacing: 0.5px;
+}
+
+.aff-quais-departs-redesign__icons {
+  position: absolute;
+  bottom: 20px;
+  left: 40px;
+  display: flex;
+  align-items: center;
+  z-index: 2;
+}
+
+.aff-quais-departs-redesign__watermark {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%) rotate(-90deg);
+  transform-origin: right center;
+  font-size: 17rem; /* Massive size */
+  color: #e5e8ed;
+  font-weight: 700;
+  z-index: 1;
+  pointer-events: none;
+  user-select: none;
+  letter-spacing: 1.5rem;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* =========================================================
+   RIGHT PANEL
+   ========================================================= */
+.aff-quais-departs-redesign__right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 65%;
+  bottom: 80px;
+  background-color: #0b376d;
+  box-sizing: border-box;
+  padding: 30px 0 30px 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.aff-quais-departs-redesign__stops-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 60px; /* Space from left edge */
+  width: 100%;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px; /* Closer spacing between stops */
+}
+
+.aff-quais-departs-redesign__stop {
+  display: flex;
+  align-items: center;
+  font-size: 3.4rem;
+  font-weight: 400;
+  color: #ffffff;
+  position: relative;
+  min-height: 42px;
+  padding-left: 50px; /* Space for rail and bullet */
+}
+
+/* Bullet styling */
+.aff-quais-departs-redesign__stop-bullet {
+  position: absolute;
+  left: 0; /* Centered on 24px rail: (24-16)/2 = 4 */
+  margin-left: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px; /* Slightly larger bullet */
+  height: 16px;
+  background-color: #fbec22;
+  border-radius: 50%;
+  z-index: 4;
+}
+
+.aff-quais-departs-redesign__stop-text {
+  position: relative;
+  z-index: 4;
+  white-space: nowrap;
+  letter-spacing: 0.5px;
+  padding-left: 10px; /* Space from bullet */
+}
+
+/* The vertical rail segments drawn behind each bullet */
+.aff-quais-departs-redesign__stop::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 24px; /* Much wider rail */
+  background-color: #5c538f;
+  top: -10px;
+  bottom: -10px;
+  z-index: 1;
+}
+
+/* Rail extends all the way to the top */
+.aff-quais-departs-redesign__stop:first-child::before {
+  top: -1000px;
+}
+
+/* Last stop has no rail continuing below */
+.aff-quais-departs-redesign__stop:last-child::before {
+  display: none;
+}
+
+/* Highlighted Destination Stop */
+.aff-quais-departs-redesign__stop--dest {
+  font-weight: 700;
+}
+
+.aff-quais-departs-redesign__stop--dest .aff-quais-departs-redesign__stop-text {
+  background-color: #5c538f;
+  padding: 4px 20px 4px 60px; /* Increased left padding to cover bullet */
+  margin-left: -60px; /* Pull back to exactly align with left:0 */
+  border-radius: 4px;
+  position: relative;
+  z-index: 3; /* Behind the bullet (z-index 4) */
+  display: inline-block;
+}
+
+/* =========================================================
+   FOOTER
+   ========================================================= */
+.aff-quais-departs-redesign__footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
+  background-color: #0b376d;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 40px;
+  z-index: 10;
+}
+
+.aff-quais-departs-redesign__footer-left {
+  font-size: 3rem;
+  font-weight: 700;
+  color: #ffffff;
+  font-style: italic;
+  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
+  letter-spacing: 0.5px;
+}
+
+.aff-quais-departs-redesign__footer-right {
+  display: flex;
+  align-items: center;
+}
+
+.aff-quais-departs-redesign__clock {
+  border: 2px solid #ffffff;
+  padding: 4px 14px;
+  font-size: 3rem;
+  font-weight: 700;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
+}
+
+.aff-quais-departs-redesign__clock-s {
+  color: #f5a623;
+}
+
+.aff-quais-departs-redesign__time--long-text {
+  font-size: 3.5rem !important;
+  line-height: 1.2 !important;
+}
+
+.aff-quais-departs-redesign__time--suppressed,
+.aff-quais-departs-redesign__status--suppressed {
+  color: #ff4c5b !important;
+}
+
+.aff-quais-departs-redesign__time--delayed,
+.aff-quais-departs-redesign__status--delayed {
+  color: #ff9e43 !important;
+}
+
+/* Disrupted Stop styling */
+.aff-quais-departs-redesign__stop-text--suppressed {
+  text-decoration: line-through;
+  color: #ff4c5b;
+  opacity: 0.6;
+}
+
+.aff-quais-departs-redesign__stop-text--delayed {
+  color: #ff9e43;
+}
+
+.aff-quais-departs-redesign__stop-status-badge {
+  font-size: 2.2rem;
+  font-weight: bold;
+  margin-left: 10px;
+}
+
+.aff-quais-departs-redesign__stop-status-badge--suppressed {
+  color: #ff4c5b;
+}
+
+.aff-quais-departs-redesign__stop-status-badge--delayed {
+  color: #ff9e43;
 }

@@ -1,70 +1,6 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import './ClassiquesDepartsQuais.css';
 import supabase from '../../../../lib/supabase';
-
-// Hook pour récupérer la map des logos depuis /type/data.json
-function useTypeLogos(){
-  const [map, setMap] = useState({ default: '/type/quais/logo-sncf-color.svg' });
-  useEffect(() => {
-    let mounted = true;
-
-    const load = async () => {
-      const candidates = ['/type/quais/data-color.json', '/type/data.json'];
-      for(const url of candidates){
-        try{
-          const res = await fetch(url);
-          if(!res.ok) continue;
-          const data = await res.json();
-          if(!mounted) return;
-          const logos = {};
-          if(Array.isArray(data.logos)){
-            data.logos.forEach(item => {
-              // item.file is expected (ex: logo-tgv.svg). If absent, try to extract from path
-              let file = item.file;
-              if(!file && item.path){
-                const parts = String(item.path).split('/');
-                file = parts[parts.length-1];
-              }
-              if(!file) return;
-              const basename = file.replace(/\.[^/.]+$/, '');
-              const semantic = basename.replace(/^logo-/, '');
-              const key = semantic.toUpperCase().replace(/[^A-Z0-9]+/g, '-');
-              // Prefer color logos in the 'quais' subfolder if data came from the quais file
-              if(url.includes('/quais/')){
-                logos[key] = `/type/quais/${file}`;
-              } else {
-                logos[key] = `/type/${file}`;
-              }
-            });
-          }
-          logos.default = logos['SNCF-VOYAGEURS-LOGO'] || logos['SNFC-VOYAGEURS-LOGO'] || logos['SNCF'] || '/type/sncf-voyageurs-logo.png';
-          setMap(logos);
-          return;
-        }catch(e){
-          // try next candidate (ignore error and continue loop)
-        }
-      }
-      // no candidate succeeded — keep fallback
-    };
-
-    load();
-    return () => { mounted = false; };
-  }, []);
-  return map;
-}
-
-function getTypeLogo(type, TYPE_LOGOS_MAP){
-  const map = TYPE_LOGOS_MAP || { default: '/type/sncf-voyageurs-logo.png' };
-  if(!type) return map.default;
-  const norm = String(type).toUpperCase().replace(/[^A-Z0-9]+/g, '-');
-  if(map[norm]) return map[norm];
-  const keys = Object.keys(map).filter(k => k !== 'default');
-  for(const k of keys){
-    if(k.includes(norm) || norm.includes(k)) return map[k];
-  }
-  return map.default;
-}
-
 function Clock() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
@@ -75,20 +11,15 @@ function Clock() {
  const mm = String(now.getMinutes()).padStart(2,'0');
  const ss = String(now.getSeconds()).padStart(2,'0');
  return (
-    <div className="aff-quais__clock">
-      <div className="aff-quais__clock-box"><span className="aff-quais__clock-main">{hh}:{mm}:{ss}</span></div>
+    <div className="aff-quais-departs-redesign__clock">
+      <span>{hh}</span>
+      <span>{mm}</span>
+      <span className="aff-quais-departs-redesign__clock-s">{ss}</span>
    </div>
  );
 }

-export default function ClassiquesDepartsQuais(){
-  const typeLogos = useTypeLogos();
-
-  const rightRef = useRef(null);
-  const stopsListRef = useRef(null);
-  const railRef = useRef(null);
-
-  // fallback mock strict (utilisé uniquement si aucune donnée réelle n'est trouvée)
+export default function ClassiquesDepartsQuais() {
  const mock = {
    time: '16h44',
    status: "à l'heure",
@@ -101,26 +32,37 @@ export default function ClassiquesDepartsQuais(){
    ],
  };

-  // état pour l'horaire sélectionné
  const [selectedHoraire, setSelectedHoraire] = useState(null);
  const [loadingHoraire, setLoadingHoraire] = useState(false);
-  const [horaireError, setHoraireError] = useState(null);
-  const [candidatesCount, setCandidatesCount] = useState(0);
-  // type de la gare (récupéré depuis la table gares)
+  const [, setHoraireError] = useState(null);
+  const [, setCandidatesCount] = useState(0);
  const [stationType, setStationType] = useState(null);
-  // Heure actuelle mise à jour chaque seconde pour la logique de seuil
  const [currentTime, setCurrentTime] = useState(new Date());
+  const [alternateDelayPhase, setAlternateDelayPhase] = useState(true);
+  const [alternateCancelPhase, setAlternateCancelPhase] = useState(true);

  useEffect(() => {
    const id = setInterval(() => setCurrentTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

-  // perturbations/travaux (récupérées depuis Supabase)
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setAlternateDelayPhase(prev => !prev);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setAlternateCancelPhase(prev => !prev);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
  const [perturbations, setPerturbations] = useState([]);
  const [, setTravaux] = useState([]);

-  // helpers locaux (simples) — similaires à ceux du composant principal
  const weekdayNameForColumn = useCallback((d) => {
    const i = d.getDay();
    switch(i) {
@@ -141,20 +83,19 @@ export default function ClassiquesDepartsQuais(){
    const day = d.getDate();
    const s = `${y}-${String(m).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
    const holidays = [
-      `${y}-01-01`, // Jour de l'an
-      `${y}-05-01`, // Fête du Travail
-      `${y}-05-08`, // Victoire 1945
-      `${y}-07-14`, // Fête nationale
-      `${y}-08-15`, // Assomption
-      `${y}-11-01`, // Toussaint
-      `${y}-11-11`, // Armistice 1918
-      `${y}-12-25`, // Noël
+      `${y}-01-01`,
+      `${y}-05-01`,
+      `${y}-05-08`,
+      `${y}-07-14`,
+      `${y}-08-15`,
+      `${y}-11-01`,
+      `${y}-11-11`,
+      `${y}-12-25`,
    ];
-    // Dates variables pour 2026
    if (y === 2026) {
-      holidays.push('2026-04-06'); // Lundi de Pâques
-      holidays.push('2026-05-14'); // Ascension
-      holidays.push('2026-05-25'); // Lundi de Pentecôte
+      holidays.push('2026-04-06');
+      holidays.push('2026-05-14');
+      holidays.push('2026-05-25');
    }
    return holidays.includes(s);
  }, []);
@@ -215,8 +156,6 @@ export default function ClassiquesDepartsQuais(){
    return String(v).slice(0,5).replace(':','h');
  }, []);

-  // ...existing code...
-
  const formatTimeFromHM = useCallback((totalMinutes) => {
    if (typeof totalMinutes !== 'number' || isNaN(totalMinutes)) return '';
    const m = ((totalMinutes % 1440) + 1440) % 1440;
@@ -225,24 +164,21 @@ export default function ClassiquesDepartsQuais(){
    return `${hh}h${mm}`;
  }, []);

-  // retourne le threshold (en minutes) pour afficher le quai selon le type de gare
  const thresholdForStationType = useCallback((type) => {
    if (!type) return 0;
    const t = String(type).trim().toLowerCase();
-    if (t === 'interurbaine' || t.includes('interurb')) return 360; // 6 heures
-    if (t === 'ville' || t.includes('ville')) return 30; // 30 minutes
+    if (t === 'interurbaine' || t.includes('interurb')) return 360;
+    if (t === 'ville' || t.includes('ville')) return 30;
    return 0;
  }, []);

-  // lecture des query params pour gare & quai
  const paramsForThis = new URLSearchParams(window.location.search || '');
  const gareParam = paramsForThis.get('gare');
  const gareIdParam = paramsForThis.get('gare_id') || paramsForThis.get('gareId');
  const quaiParam = paramsForThis.get('quai');
-  const debugEnabled = (paramsForThis.get('debug') === '1' || String(paramsForThis.get('debug')).toLowerCase() === 'true');
+
  const gareDisplayParam = gareParam ? decodeURIComponent(String(gareParam).replace(/\+/g,' ')).replace(/-/g,' ') : null;

-  // helper: obtenir la liste d'arrêts d'un horaire (supporte plusieurs noms de champs)
  const getStops = (h) => {
    if (!h) return [];
    if (Array.isArray(h.stops) && h.stops.length) return h.stops;
@@ -255,13 +191,12 @@ export default function ClassiquesDepartsQuais(){
      if (!raw) continue;
      if (Array.isArray(raw)) return raw;
      if (typeof raw === 'string') {
-        try { const parsed = JSON.parse(raw); if (Array.isArray(parsed)) return parsed; } catch (e) { /* ignore */ }
+        try { const parsed = JSON.parse(raw); if (Array.isArray(parsed)) return parsed; } catch (e) {}
      }
    }
    return [];
  };

-  // --- Helpers pour perturbations (copiées/adaptées depuis ClassiquesDeparts) ---
  const safeParseArrets = (p) => {
    const raw = p && (p.perturbations_arrets || p.arrets || p.arrets_perturbations);
    if (!raw) return [];
@@ -386,7 +321,7 @@ export default function ClassiquesDepartsQuais(){
    for (const p of found) {
      try {
        if (horaireYmd) {
-          const pDate = toYMD(p.date || p.date_service || p.start_date || p.date_debut);
+          const pDate = toYMD(p.date || p.date_service);
          const db = toYMD(p.date_debut || p.start_date);
          const df = toYMD(p.date_fin || p.end_date);
          if (pDate && pDate !== horaireYmd) continue;
@@ -436,7 +371,15 @@ export default function ClassiquesDepartsQuais(){
    return { label: "à l'heure", detail: '', delayMinutes: null };
  }, [findPerturbsForHoraireAndStop, parseDelayMinutesFromArret, getPerturbationJours, normalizeName, parsePerturbArretsObject]);

-  // Fetch perturbations & travaux from Supabase periodically
+  const perturbMap = React.useMemo(() => buildPerturbMap(perturbations || []), [perturbations, buildPerturbMap]);
+  const serviceDate = React.useMemo(() => {
+    const todayYmd = new Date().toLocaleDateString('en-CA');
+    const tomorrow = new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    const tomorrowYmd = tomorrow.toLocaleDateString('en-CA');
+    return selectedHoraire && selectedHoraire.isTomorrow ? tomorrowYmd : todayYmd;
+  }, [selectedHoraire]);
+
  useEffect(() => {
    let mounted = true;
    let inFlight = false;
@@ -452,19 +395,32 @@ export default function ClassiquesDepartsQuais(){
        ]);
        if (!mounted) return;
        if (pError || tError) {
-          // ignore quietly — keep previous data
        } else {
-          // Filter perturbations to those applicable today
          const todayYmd = new Date().toLocaleDateString('en-CA');
+          const tomorrow = new Date();
+          tomorrow.setDate(tomorrow.getDate() + 1);
+          const tomorrowYmd = tomorrow.toLocaleDateString('en-CA');
+
          const filteredPerturb = (perturbData || []).filter(p => {
            try {
              const toYMD = (v) => { if (!v) return null; const d = new Date(v); if (isNaN(d.getTime())) return null; return d.toISOString().slice(0,10); };
-              const pDate = toYMD(p.date || p.date_service || p.start_date || p.date_debut);
+              const pDate = toYMD(p.date || p.date_service);
              const db = toYMD(p.date_debut || p.start_date);
              const df = toYMD(p.date_fin || p.end_date);
-              if (pDate && pDate !== todayYmd) return false;
-              if (db && df && !(todayYmd >= db && todayYmd <= df)) return false;
-              try { const joursSet = getPerturbationJours(p); if (joursSet && !joursSet.has(todayYmd)) return false; } catch (e) {}
+              
+              const appliesToToday = (!pDate || pDate === todayYmd) && (!db || !df || (todayYmd >= db && todayYmd <= df));
+              const appliesToTomorrow = (!pDate || pDate === tomorrowYmd) && (!db || !df || (tomorrowYmd >= db && tomorrowYmd <= df));
+              
+              if (!appliesToToday && !appliesToTomorrow) return false;
+
+              try {
+                const joursSet = getPerturbationJours(p);
+                if (joursSet) {
+                  const hasToday = joursSet.has(todayYmd);
+                  const hasTomorrow = joursSet.has(tomorrowYmd);
+                  if (!hasToday && !hasTomorrow) return false;
+                }
+              } catch (e) {}
              return true;
            } catch (e) { return true; }
          });
@@ -472,7 +428,6 @@ export default function ClassiquesDepartsQuais(){
          setTravaux(travauxData || []);
        }
      } catch (e) {
-        // ignore
      } finally {
        inFlight = false;
      }
@@ -482,7 +437,6 @@ export default function ClassiquesDepartsQuais(){
    return () => { mounted = false; clearInterval(id); };
  }, [getPerturbationJours]);

-  // Annotate selectedHoraire with computed status when perturbations change
  useEffect(() => {
    if (!selectedHoraire || !selectedHoraire.horaire) return;
    const horaire = selectedHoraire.horaire;
@@ -491,20 +445,36 @@ export default function ClassiquesDepartsQuais(){
    const stationName = stop ? (typeof stop === 'string' ? stop : (stop.gare_nom || stop.nom || stop.name || stop.stop_name || '')) : null;
    try {
      const map = buildPerturbMap(perturbations || []);
-      const status = computeStatusForHoraireAtStop(horaire, stationId, stationName, map, null);
-      // keep original scheduled time for display (_displayTime)
+      
+      const todayYmd = new Date().toLocaleDateString('en-CA');
+      const tomorrow = new Date();
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      const tomorrowYmd = tomorrow.toLocaleDateString('en-CA');
+      const serviceDate = selectedHoraire.isTomorrow ? tomorrowYmd : todayYmd;
+
+      const status = computeStatusForHoraireAtStop(horaire, stationId, stationName, map, serviceDate);
      const originalBase = parseTimeHM(selectedHoraire.rawTime || horaire.heure_depart || horaire.time || horaire.heure);
      const displayTimeOriginal = (typeof originalBase === 'number') ? formatTimeFromHM(originalBase) : (selectedHoraire.rawTime ? formatTimeNoSeconds(selectedHoraire.rawTime) : (horaire.heure_depart || horaire.time || horaire.heure ? formatTimeNoSeconds(horaire.heure_depart || horaire.time || horaire.heure) : null));
-      // compute updated time (delayed) but store separately — do not override the original displayed time
      let updatedTime = null;
      if (status && typeof status.delayMinutes === 'number' && !Number.isNaN(status.delayMinutes) && typeof originalBase === 'number') {
        updatedTime = formatTimeFromHM(originalBase + status.delayMinutes);
      }
-      setSelectedHoraire(prev => ({ ...(prev||{}), horaire: { ...(prev && prev.horaire ? prev.horaire : {}), _status: status }, _displayTime: displayTimeOriginal, _updatedTime: updatedTime }));
-    } catch (e) { /* ignore */ }
+
+      // Guard to prevent infinite render loop: only set selectedHoraire if status or time actually changed
+      const statusChanged = !horaire._status || horaire._status.label !== status.label || horaire._status.delayMinutes !== status.delayMinutes;
+      const timeChanged = selectedHoraire._displayTime !== displayTimeOriginal || selectedHoraire._updatedTime !== updatedTime;
+
+      if (statusChanged || timeChanged) {
+        setSelectedHoraire(prev => ({ 
+          ...(prev||{}), 
+          horaire: { ...(prev && prev.horaire ? prev.horaire : {}), _status: status }, 
+          _displayTime: displayTimeOriginal, 
+          _updatedTime: updatedTime 
+        }));
+      }
+    } catch (e) {}
  }, [selectedHoraire, perturbations, buildPerturbMap, computeStatusForHoraireAtStop, parseTimeHM, formatTimeFromHM, formatTimeNoSeconds]);

-  // récupérer depuis Supabase le prochain départ correspondant au couple (gare, quai)
  useEffect(() => {
    let mounted = true;
    async function loadNextForQuai() {
@@ -517,17 +487,23 @@ export default function ClassiquesDepartsQuais(){
        return;
      }
      try {
-        // Récupérer le type de la gare
        let fetchedType = null;
        try {
          if (gareIdParam) {
            const { data: g } = await supabase.from('gares').select('type').eq('gare_id', gareIdParam).single();
            if (g) fetchedType = g.type;
          } else if (gareDisplayParam) {
-            const { data: g } = await supabase.from('gares').select('type').ilike('nom', `%${gareDisplayParam}%`).limit(1).single();
-            if (g) fetchedType = g.type;
+            const { data: gdata } = await supabase.from('gares').select('type,nom').ilike('nom', `%${gareDisplayParam}%`);
+            if (gdata && gdata.length) {
+              const exactMatch = gdata.find(g => {
+                const n1 = String(g.nom || '').normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().replace(/[-_+\s]+/g, ' ').trim();
+                const n2 = String(gareDisplayParam || '').normalize('NFD').replace(/\p{M}/gu, '').toLowerCase().replace(/[-_+\s]+/g, ' ').trim();
+                return n1 === n2;
+              });
+              fetchedType = exactMatch ? exactMatch.type : gdata[0].type;
+            }
          }
-        } catch (e) { /* ignore */ }
+        } catch (e) {}
        if (mounted) setStationType(fetchedType);

        const { data: all, error } = await supabase.from('horaires').select('id, *');
@@ -555,15 +531,12 @@ export default function ClassiquesDepartsQuais(){
        for (const h of all) {
          if (!h) continue;

-          // Filtrage par jour de circulation
          const circulatesToday = circulatesOn(h, now);
          const circulatesTomorrow = circulatesOn(h, tomorrow);
          if (!circulatesToday && !circulatesTomorrow) continue;

-          // build stops list (support multiple field names)
          const stops = getStops(h);

-          // compute max index for terminus detection if stops contain index
          let maxIdx = null;
          if (Array.isArray(stops) && stops.length) {
            for (const st of stops) {
@@ -574,34 +547,24 @@ export default function ClassiquesDepartsQuais(){
            }
          }

-          // find matching stop (by name or by gare_id)
          let stopMatch = null;
-          // check horaire-level depart name first
          if (normalizedTarget) {
-            // exclude horaires where the target gare is the final destination (terminus)
            const destNameNorm = normalizeName(h.gare_arrivee_nom || h.gare_arrivee || '');
            if (destNameNorm && (destNameNorm === normalizedTarget || destNameNorm.includes(normalizedTarget) || normalizedTarget.includes(destNameNorm))) {
-              // gare ciblée est la gare d'arrivée finale -> ne pas considérer cet horaire
-              // skip to next horaire
            } else {
              const departName = normalizeName(h.gare_depart_nom || h.gare_depart || h.origin_name || '');
              if (departName && (departName === normalizedTarget || departName.includes(normalizedTarget) || normalizedTarget.includes(departName))) {
-                // créer un stopMatch initial à partir du niveau horaire
                let initialStop = { heure_depart: h.heure_depart || h.time || h.heure, gare_nom: h.gare_depart_nom || h.gare_depart };
-                // si la liste stops contient un objet correspondant à la gare de départ, préférer cet objet
                if (Array.isArray(stops) && stops.length) {
                  for (const s of stops) {
                    const rawName = (typeof s === 'string') ? s : (s.gare_nom || s.nom || s.name || s.stop_name || s.station || '');
                    const nm = normalizeName(rawName);
                    if (!nm) continue;
                    if (nm === normalizedTarget || nm.includes(normalizedTarget) || normalizedTarget.includes(nm)) {
-                      // prefer the stops entry (it may contain platform/quai information)
-                      // but preserve a horaire-level time if the stop entry lacks heure_depart
                      if (typeof s === 'object') {
                        if (!s.heure_depart && initialStop.heure_depart) s.heure_depart = initialStop.heure_depart;
                        initialStop = s;
                      } else {
-                        // s is string name — keep initialStop but set gare_nom
                        initialStop.gare_nom = s;
                      }
                      break;
@@ -613,15 +576,12 @@ export default function ClassiquesDepartsQuais(){
            }
          }

-          // if gare_id param present, try to match by id as well
          if (!stopMatch && gareIdParam) {
            const gid = String(gareIdParam);
-            // check horaire-level id
            const departId = h.gare_depart_id || h.gare_id || h.origin_id || null;
            if (departId != null && String(departId) === gid) {
              stopMatch = { heure_depart: h.heure_depart || h.time || h.heure, gare_id: departId, gare_nom: h.gare_depart_nom || h.gare_depart };
            }
-            // check stops list ids
            if (!stopMatch && Array.isArray(stops) && stops.length) {
              for (const s of stops) {
                const sid = s.gare_id || s.gareId || s.id || s.stop_id || s.stopId || null;
@@ -630,35 +590,29 @@ export default function ClassiquesDepartsQuais(){
            }
          }

-          // if still no match, try match by normalized name inside stops
          if (!stopMatch && normalizedTarget && Array.isArray(stops) && stops.length) {
            for (const s of stops) {
-              // support both string entries and object entries
              const rawName = (typeof s === 'string') ? s : (s.gare_nom || s.nom || s.name || s.stop_name || s.stopName || s.station || s.station_name || '');
              const nm = normalizeName(rawName);
              if (!nm) continue;
              if (nm === normalizedTarget || nm.includes(normalizedTarget) || normalizedTarget.includes(nm)) {
-                // detect if this stop is a terminus (isLast / is_last / index == maxIdx)
                const isTerminus = Boolean((typeof s === 'object') && (s.isLast || s.is_last || s.isTerminus || (typeof s.index !== 'undefined' && maxIdx != null && Number(s.index) === maxIdx)));
-                if (isTerminus) continue; // ne pas considérer les terminus
+                if (isTerminus) continue;
                stopMatch = s;
                break;
              }
            }
          }
-          if (!stopMatch) continue; // this horaire does not serve the target gare (or match failed)
+          if (!stopMatch) continue;

-          // determine platform/quai for this stop/horaire
          const platform = (stopMatch && (stopMatch.quai || stopMatch.platform || stopMatch.quay)) || h.platform || h.quai || '';
          const normPlatform = String(platform || '').toLowerCase().replace(/\s+/g,'');

-          // if targetQuai is set, ensure it matches (loose compare: contains or equals)
          if (targetQuai) {
-            if (!normPlatform) continue; // no platform info -> skip
+            if (!normPlatform) continue;
            if (!(normPlatform === targetQuai || normPlatform.includes(targetQuai) || targetQuai.includes(normPlatform))) continue;
          }

-          // Ne garder que les horaires qui ont un départ au stop (on ne veut pas afficher les arrivées)
          const stopIsObject = stopMatch && typeof stopMatch === 'object';
          const hasDeparture = stopIsObject && (
            typeof stopMatch.heure_depart !== 'undefined' || typeof stopMatch.departure_time !== 'undefined' || typeof stopMatch.departure !== 'undefined' || typeof stopMatch.time !== 'undefined' || typeof stopMatch.departureTime !== 'undefined' || typeof stopMatch.horaire_time !== 'undefined'
@@ -666,15 +620,12 @@ export default function ClassiquesDepartsQuais(){
          const hasArrivalOnly = stopIsObject && !hasDeparture && (
            typeof stopMatch.heure_arrivee !== 'undefined' || typeof stopMatch.arrival_time !== 'undefined' || typeof stopMatch.arrivee !== 'undefined' || typeof stopMatch.arrival !== 'undefined'
          );
-          // si le stop correspond mais n'a que l'heure d'arrivée (pas de départ), ignorer cet horaire — on veut uniquement des départs
          if (stopIsObject && hasArrivalOnly) continue;

-          // pick time from stopMatch (si on a une heure de départ) ou fallback au niveau horaire
          const rawTime = (hasDeparture ? (stopMatch.heure_depart || stopMatch.time || stopMatch.heure || stopMatch.departure_time || stopMatch.departure || stopMatch.departureTime || stopMatch.horaire_time) : (h.heure_depart || h.time || h.heure || h.departure_time || h.departure || h.departureTime || h.horaire_time));
          const depHM = parseTimeHM(rawTime);
          if (depHM == null) continue;

-          // compute minutes until departure (allow next-day wrap)
          let minutesUntil = depHM - nowHM;
          if (minutesUntil < 0) minutesUntil = depHM + 24*60 - nowHM;

@@ -688,13 +639,15 @@ export default function ClassiquesDepartsQuais(){
          return;
        }

-        // split into today (circulatesToday AND depHM > nowHM) and tomorrow (circulatesTomorrow AND (depHM <= nowHM OR not circulatesToday))
        const todayCandidates = candidates.filter(c => c.circulatesToday && c.depHM > nowHM).sort((a,b) => a.depHM - b.depHM);
        const tomorrowCandidates = candidates.filter(c => c.circulatesTomorrow && (c.depHM <= nowHM || !c.circulatesToday)).sort((a,b) => a.depHM - b.depHM);

        let chosen = null;
-        if (todayCandidates.length > 0) chosen = todayCandidates[0];
-        else if (tomorrowCandidates.length > 0) chosen = tomorrowCandidates[0];
+        if (todayCandidates.length > 0) {
+          chosen = { ...todayCandidates[0], isTomorrow: false };
+        } else if (tomorrowCandidates.length > 0) {
+          chosen = { ...tomorrowCandidates[0], isTomorrow: true };
+        }

        if (mounted) {
          setCandidatesCount(candidates.length);
@@ -712,232 +665,149 @@ export default function ClassiquesDepartsQuais(){
    return () => { mounted = false; };
  }, [gareDisplayParam, gareIdParam, quaiParam, parseTimeHM, normalizeName, circulatesOn]);

-  // toggle flag to alternate time/status when needed (observe selectedHoraire.status when present)
-  const [showTime, setShowTime] = useState(true);
-  // derive a simple status label string to use in the dependency array (avoids complex expressions)
-  const _selectedStatusLabel = (() => {
-    const horaireObj = selectedHoraire && selectedHoraire.horaire ? selectedHoraire.horaire : null;
-    const computedLabel = horaireObj && horaireObj._status && horaireObj._status.label ? String(horaireObj._status.label) : null;
-    const rawStatus = horaireObj && horaireObj.status ? (typeof horaireObj.status === 'string' ? horaireObj.status : (horaireObj.status && horaireObj.status.label ? String(horaireObj.status.label) : null)) : null;
-    return String(computedLabel || rawStatus || mock.status || '').toLowerCase();
+  // Rail is handled purely in CSS for better performance and alignment
+  const showPlatform = (() => {
+    const sched = selectedHoraire ? selectedHoraire.depHM : null;
+    if (sched === null || !stationType) return true;
+    const nowHM = currentTime.getHours() * 60 + currentTime.getMinutes();
+    const threshold = thresholdForStationType(stationType);
+    return nowHM >= (sched - threshold);
  })();

-  useEffect(()=>{
-    let id = null;
-    if (/retard|supprim/.test(_selectedStatusLabel)) {
-      // ensure we start by showing the time
-      setShowTime(true);
-      id = setInterval(() => setShowTime(prev => !prev), 3000);
-    } else {
-      setShowTime(true);
-    }
-    return () => { if (id) clearInterval(id); };
-  }, [_selectedStatusLabel, mock.status]);
-
-  // compute and position the rail so it covers from first stop center to last stop center
-  useEffect(() => {
-    function updateRail(){
-      const rail = railRef.current;
-      const list = stopsListRef.current;
-      const right = rightRef.current;
-      if(!rail || !list || !right) return;
-      const items = Array.from(list.querySelectorAll('li'));
-      if(items.length === 0) return;
-      const first = items[0];
-      // find destination (last with dest class) or fallback to last item
-      const last = items.find(el => el.classList.contains('aff-quais__stop--strict-dest')) || items[items.length-1];
-
-      const rightRect = right.getBoundingClientRect();
-      const firstRect = first.getBoundingClientRect();
-      const lastRect = last.getBoundingClientRect();
-
-      const firstCenterY = firstRect.top + firstRect.height/4 - rightRect.top;
-      const lastCenterY = lastRect.top + lastRect.height/2 - rightRect.top;
-
-      // add small padding so rail extends a bit beyond centers
-      const pad = 9;
-      const top = Math.max(0, firstCenterY - pad);
-      const height = Math.max(8, (lastCenterY - firstCenterY) + pad*2);
-
-      // compute horizontal position so dots are centered next to the text
-      const firstText = first.querySelector('.aff-quais__stop-text--strict') || first.querySelector('.aff-quais__stop-text');
-      const textRect = firstText ? firstText.getBoundingClientRect() : firstRect;
-      const centerX = (textRect.left - rightRect.left) - 28; // place rail left of text by ~20px
-      const railWidth = 35;
-      const left = centerX - railWidth/2;
-
-      // apply styles for the rail rectangle
-      rail.style.top = `${Math.round(top)}px`;
-      rail.style.height = `${Math.round(height)}px`;
-      rail.style.left = `${Math.round(left)}px`;
-      rail.style.width = `${railWidth}px`;
-      // remove background-image reliance and render individual dots as DOM children
-      // clear existing dots
-      while (rail.firstChild) rail.removeChild(rail.firstChild);
-
-      // create a dot element for each item and position it exactly at the item's vertical center
-      const railWidthComputed = parseInt(rail.style.width, 8) || railWidth;
-      items.forEach(it => {
-        const r = it.getBoundingClientRect();
-        const centerY = r.top + r.height/2 - (rightRect.top + top);
-        const dot = document.createElement('span');
-        dot.className = 'aff-quais__rail-dot';
-        dot.style.position = 'absolute';
-        dot.style.left = '50%';
-        dot.style.transform = 'translate(-50%, -50%)';
-        dot.style.top = `${Math.round(centerY)}px`;
-        // set dot diameter to rail width
-        dot.style.width = `${railWidthComputed}px`;
-        dot.style.height = `${railWidthComputed}px`;
-        dot.style.borderRadius = '50%';
-        dot.style.background = '#ffe600';
-        dot.style.boxShadow = '0 0 0 4px rgba(255,230,102,0.06) inset';
-        rail.appendChild(dot);
-      });
-    }
-
-    updateRail();
-    window.addEventListener('resize', updateRail);
-    const obs = new MutationObserver(updateRail);
-    const listNode = stopsListRef.current;
-    if(listNode) obs.observe(listNode, { childList:true, subtree:true });
-    return ()=>{
-      window.removeEventListener('resize', updateRail);
-      if(obs) obs.disconnect();
-    };
-  }, [selectedHoraire]);
-  // Observer changement des stops via selectedHoraire
-  // Re-run rail effect lorsque selectedHoraire change (les stops affichés changent)
-
-  const displayTimeOrStatus = () => {
-    const horaire = selectedHoraire && selectedHoraire.horaire ? selectedHoraire.horaire : null;
-    const statusStrFromField = horaire ? (horaire.status || mock.status) : mock.status;
-    const statusObj = horaire && horaire._status ? horaire._status : null;
-    // prefer precomputed _displayTime if available
-    const time = selectedHoraire && selectedHoraire._displayTime ? selectedHoraire._displayTime : (horaire ? formatTimeNoSeconds(selectedHoraire.rawTime || horaire.heure_depart || horaire.time || horaire.heure) : mock.time);
-
-    // build canonical status label when we have computed status object
-    let canonicalStatus = null;
-    if (statusObj) {
-      if (typeof statusObj.delayMinutes === 'number' && !Number.isNaN(statusObj.delayMinutes)) {
-        canonicalStatus = `retardé +${Math.round(statusObj.delayMinutes)} min.`;
-      } else if (statusObj.label && String(statusObj.label).toLowerCase().includes('supprim')) {
-        canonicalStatus = 'supprimé';
-      } else if (statusObj.label) {
-        canonicalStatus = String(statusObj.label);
-      }
-    }
-
-    const s = (canonicalStatus || statusStrFromField || '').toLowerCase();
-    const isAlert = s.includes('retard') || s.includes('supprim');
-    const label = canonicalStatus || statusStrFromField || '';
-
-    // Logique de seuil d'affichage du quai
-    const nowHM = currentTime.getHours() * 60 + currentTime.getMinutes();
-    const sched = selectedHoraire && selectedHoraire.depHM ? selectedHoraire.depHM : null;
-    const threshold = thresholdForStationType(stationType);
-    const showPlatform = (sched !== null) ? (nowHM >= (sched - threshold)) : true;
-
-    if (!showPlatform) {
-      return (
-        <span className="aff-quais__time-status-wrapper" aria-live="polite">
-          <span className="aff-quais__time aff-quais__time--strict visible">--h--</span>
-        </span>
-      );
-    }
-
-    // Always render both time and status inside a fixed-size wrapper to avoid layout shift
+  if (!loadingHoraire && !selectedHoraire) {
    return (
-      <span className="aff-quais__time-status-wrapper" aria-live="polite">
-        <span className={`aff-quais__time aff-quais__time--strict ${showTime ? 'visible' : 'hidden'}`}>{time}</span>
-        <span className={`aff-quais__time-status aff-quais__time-status--strict aff-quais__status--alert ${(!showTime && isAlert) ? 'visible' : 'hidden'}`}>{label}</span>
-      </span>
+      <div className="aff-quais-departs-redesign__container aff-quais-departs-redesign__empty">
+        <div className="aff-quais-departs-redesign__empty-text">Aucun Départ Prévu</div>
+        <div className="aff-quais-departs-redesign__footer">
+          <div className="aff-quais-departs-redesign__footer-left"></div>
+          <div className="aff-quais-departs-redesign__footer-right">
+            <Clock />
+          </div>
+        </div>
+      </div>
    );
  }

-    return (
-    <div className="aff-quais__container aff-quais__container--strict aff-quais__container--depart">
-      <div className="aff-quais__left aff-quais__left--strict">
-        {/* logo (depuis le type de train) */}
-        {(() => {
-          const horaire = selectedHoraire && selectedHoraire.horaire ? selectedHoraire.horaire : null;
-          const trainType = horaire ? (horaire.trainType || horaire.train_type || horaire.type_train || horaire.op || horaire.operator) : mock.trainType;
-          return <img src={getTypeLogo(trainType, typeLogos)} alt={trainType || 'train'} className="aff-quais__type-logo--strict" />;
-        })()}
+  return (
+    <div className="aff-quais-departs-redesign__container">
+      {/* LEFT PANEL: White Background */}
+      <div className="aff-quais-departs-redesign__left">
+        {/* SNCF Logo */}
+        <img src="/type/quais/logo-sncf-color.svg" alt="SNCF" className="aff-quais-departs-redesign__sncf-logo" />

-        <div className="aff-quais__watermark" aria-hidden>départ</div>
-        {/* affichage des états de chargement / erreur pour debug */}
-        {horaireError ? <div className="aff-quais__error" style={{color:'crimson',fontSize:'0.9rem',marginTop:6}}>{horaireError}</div> : null}
-        {loadingHoraire ? <div className="aff-quais__loading" style={{color:'#666',fontSize:'0.85rem',marginTop:6}}>Chargement...</div> : null}
-        {debugEnabled ? (
-          <div style={{marginTop:8, fontSize:'0.78rem', color:'#333'}}>
-            <div>Candidates: {candidatesCount}</div>
-            {selectedHoraire ? <pre style={{maxHeight:120,overflow:'auto',background:'#f7f7f7',padding:6}}>{JSON.stringify(selectedHoraire, null, 2)}</pre> : null}
-          </div>
-        ) : null}
-        {/* logo du type en haut à droite */}
-        <div className="aff-quais__row aff-quais__row--time-status">
+        <div className="aff-quais-departs-redesign__time-status">
          {(() => {
            const horaire = selectedHoraire && selectedHoraire.horaire ? selectedHoraire.horaire : null;
-            const status = horaire ? (horaire.status || (horaire._status && horaire._status.label) || mock.status) : mock.status;
-            const time = horaire ? formatTimeNoSeconds(selectedHoraire.rawTime || horaire.heure_depart || horaire.time || horaire.heure) : mock.time;
-            const isAlert = (status || '').toLowerCase().includes('retard') || (status || '').toLowerCase().includes('supprim');
-            if (isAlert) return displayTimeOrStatus();
+            const statusObj = horaire && horaire._status ? horaire._status : null;
+            const isSuppressed = statusObj && statusObj.label === 'supprimé';
+            const isDelayed = statusObj && typeof statusObj.delayMinutes === 'number';
+            const delayMinutes = statusObj ? statusObj.delayMinutes : null;
+
+            let timeText = horaire ? formatTimeNoSeconds(selectedHoraire.rawTime || horaire.heure_depart || horaire.time || horaire.heure) : mock.time;
+            let statusText = horaire ? (horaire.status || (statusObj && statusObj.label) || mock.status) : mock.status;
+
+            if (showPlatform) {
+              if (isSuppressed) {
+                if (!alternateCancelPhase) {
+                  timeText = 'supprimé';
+                  statusText = '';
+                } else {
+                  statusText = 'supprimé';
+                }
+              } else if (isDelayed) {
+                if (!alternateDelayPhase) {
+                  timeText = `retardé +${delayMinutes} min`;
+                  statusText = '';
+                } else {
+                  statusText = `retardé +${delayMinutes} min`;
+                }
+              }
+            } else {
+              timeText = '--h--';
+              statusText = '';
+            }
+
+            const isTimeSuppressed = isSuppressed && !alternateCancelPhase;
+            const isTimeDelayed = isDelayed && !alternateDelayPhase;
+
+            const isLongText = timeText.length > 5;
+            let timeClass = '';
+            if (isLongText) timeClass += ' aff-quais-departs-redesign__time--long-text';
+            if (isTimeSuppressed) timeClass += ' aff-quais-departs-redesign__time--suppressed';
+            if (isTimeDelayed) timeClass += ' aff-quais-departs-redesign__time--delayed';
+
+            let statusClass = '';
+            if (isSuppressed) statusClass += ' aff-quais-departs-redesign__status--suppressed';
+            if (isDelayed) statusClass += ' aff-quais-departs-redesign__status--delayed';
+
            return (
              <>
-                <span className="aff-quais__time aff-quais__time--strict">{time}</span>
-                <span className="aff-quais__time-status aff-quais__time-status--strict">{status}</span>
+                <span className={`aff-quais-departs-redesign__time${timeClass}`}>{timeText}</span>
+                {statusText && <span className={`aff-quais-departs-redesign__status${statusClass}`}>{String(statusText).toLowerCase()}</span>}
              </>
            );
          })()}
        </div>
-        <div className="aff-quais__destination aff-quais__destination--strict">
+
+        <div className="aff-quais-departs-redesign__destination">
          {(() => {
            const horaire = selectedHoraire && selectedHoraire.horaire ? selectedHoraire.horaire : null;
-            const stop = selectedHoraire && selectedHoraire.stop ? selectedHoraire.stop : null;
-            // destinationBig is the final destination of the train (gare_arrivee_*). The second line should be the station name of the stop on the route (if present) — avoid duplicating final destination.
-            const destinationBig = horaire ? (horaire.gare_arrivee_nom || horaire.gare_arrivee || horaire.destination || '') : mock.destinationBig;
-            const rawDestExpr = (stop ? ((typeof stop === 'string') ? stop : (stop.gare_nom || stop.nom || stop.name || stop.stop_name || '')) : (horaire ? (horaire.destination_station || '') : mock.destinationStation));
-            return (
-              <>
-                <div className="aff-quais__destination-line1 aff-quais__destination-line1--strict">{destinationBig}</div>
-
-              </>
-            );
+            return showPlatform ? (horaire ? (horaire.gare_arrivee_nom || horaire.gare_arrivee || horaire.destination || '') : mock.destinationBig) : '--';
          })()}
        </div>
-        <div className="aff-quais__train-id aff-quais__train-id--strict">{(() => {
-          const horaire = selectedHoraire && selectedHoraire.horaire ? selectedHoraire.horaire : null;
-          const trainType = horaire ? (horaire.trainType || horaire.train_type || horaire.type_train || horaire.op || horaire.operator) : mock.trainType;
-          const trainNumber = horaire ? (horaire.numero_train || horaire.numero || horaire.number || '') : mock.trainNumber;
-          return (<>{trainType}&nbsp;&nbsp;<span className="aff-quais__train-number--strict">{trainNumber}</span></>);
-        })()}</div>
+
+        <div className="aff-quais-departs-redesign__train-info">
+          {(() => {
+            const horaire = selectedHoraire && selectedHoraire.horaire ? selectedHoraire.horaire : null;
+            const trainType = horaire ? (horaire.trainType || horaire.train_type || horaire.type_train || horaire.op || horaire.operator) : mock.trainType;
+            const trainNumber = horaire ? (horaire.numero_train || horaire.numero || horaire.number || '') : mock.trainNumber;
+            return showPlatform ? (
+              <>
+                <span className="aff-quais-departs-redesign__train-type">{trainType}</span>
+                <span className="aff-quais-departs-redesign__train-number">{trainNumber}</span>
+              </>
+            ) : '';
+          })()}
+        </div>
+
+        {/* Accessibility Icons */}
+        <div className="aff-quais-departs-redesign__icons">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#7e859b" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="4" r="1.5" fill="#7e859b" />
+            <path d="M9 13a4 4 0 0 0 4 4h3" />
+            <path d="M12 7.5v6" />
+            <path d="M8 20a5 5 0 1 1 5-5" />
+          </svg>
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#7e859b" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: '12px' }}>
+            <circle cx="5.5" cy="17.5" r="3.5" />
+            <circle cx="18.5" cy="17.5" r="3.5" />
+            <path d="M15 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-3 11.5V14l-3-3 4-3 2 3h2" />
+          </svg>
+        </div>
+
+        {/* Watermark */}
+        <div className="aff-quais-departs-redesign__watermark">départ</div>
      </div>
-      <div className="aff-quais__separator--strict" aria-hidden></div>
-      <div className="aff-quais__right aff-quais__right--strict" ref={rightRef}>
-        {/* barre verticale de points (élément explicite pour fiabilité) */}
-        <div className="aff-quais__stops-rail" aria-hidden ref={railRef} />
-        <ul className="aff-quais__stops-list--strict" ref={stopsListRef}>
+
+      {/* RIGHT PANEL: Blue Background with Stops */}
+      <div className="aff-quais-departs-redesign__right">
+        <ul className="aff-quais-departs-redesign__stops-list">
          {(() => {
+            if (!showPlatform) return null;
            const horaire = selectedHoraire && selectedHoraire.horaire ? selectedHoraire.horaire : null;
-            // utiliser la helper getStops pour supporter plusieurs formats
            let stops = horaire ? getStops(horaire) : [];
            if (!Array.isArray(stops) || stops.length === 0) {
-              // fallback parsing si la colonne est une chaîne JSON
              if (horaire && typeof horaire.stops === 'string') {
                try { const p = JSON.parse(horaire.stops); if (Array.isArray(p)) stops = p; } catch (e) { /* ignore */ }
              }
            }
            if (!Array.isArray(stops) || stops.length === 0) stops = mock.stops || [];

-            // construire une liste propre en extrayant un label pour chaque stop
            const labeled = stops.map((stop, idx) => {
              let label = '';
              if (typeof stop === 'string') label = stop;
              else if (stop && typeof stop === 'object') {
-                // vérifier plusieurs clés possibles
                label = stop.gare_nom || stop.nom || stop.name || stop.stop_name || stop.stopName || stop.station_name || stop.station || stop.label || stop.stop || stop.name_gare || (stop.properties && (stop.properties.name || stop.properties.stop_name)) || '';
-                // si l'objet possède une clé 'stop' qui est elle-même un objet
                if (!label && stop.stop && typeof stop.stop === 'object') {
                  label = stop.stop.name || stop.stop.stop_name || '';
                }
@@ -948,7 +818,6 @@ export default function ClassiquesDepartsQuais(){

            if (labeled.length === 0) return null;

-            // trouver l'index du stop correspondant à la gare demandée (selectedHoraire.stop)
            let matchedIndex = -1;
            try {
              if (selectedHoraire && selectedHoraire.stop) {
@@ -957,7 +826,6 @@ export default function ClassiquesDepartsQuais(){
                const targetId = (typeof target === 'object') ? (target.gare_id || target.gareId || target.id || target.stop_id || target.stopId || null) : null;
                for (let i = 0; i < stops.length; i++) {
                  const s = stops[i];
-                  // compare by id first if available
                  if (targetId != null) {
                    const sid = (s && typeof s === 'object') ? (s.gare_id || s.gareId || s.id || s.stop_id || s.stopId || null) : null;
                    if (sid != null && String(sid) === String(targetId)) { matchedIndex = i; break; }
@@ -968,11 +836,8 @@ export default function ClassiquesDepartsQuais(){
              }
            } catch (e) { /* ignore */ }

-            // filtrer pour ne garder que les prochains arrêts après la gare renseignée
-            let subsequent = labeled.filter(it => (matchedIndex >= 0) ? (it.idx > matchedIndex) : true);
-            // trier par idx pour être sûr
+            let subsequent = labeled.filter(it => (matchedIndex >= 0) ? (it.idx >= matchedIndex) : true);
            subsequent = subsequent.sort((a,b) => a.idx - b.idx);
-            // Remove consecutive duplicate labels (case-insensitive)
            if (subsequent.length > 1) {
              const collapsed = [];
              for (const it of subsequent) {
@@ -985,28 +850,45 @@ export default function ClassiquesDepartsQuais(){
              }
              subsequent = collapsed;
            }
-            // si aucun arrêt après (ou pas de match) on peut retourner null ou le fallback; ici on renvoie le fallback si tout échoue
            if (subsequent.length === 0) return null;

            return subsequent.map((item, mapIndex) => {
-              const isLast = item.idx === (stops.length - 1);
+              const isLast = mapIndex === subsequent.length - 1;
+              const stop = item.original || {};
+              const stopId = stop.gare_id || stop.gareId || stop.id || stop.stop_id || stop.stopId || null;
+              const stopStatus = computeStatusForHoraireAtStop(horaire, stopId, item.label, perturbMap, serviceDate);
+              const isStopSuppressed = stopStatus && stopStatus.label === 'supprimé';
+              const isStopDelayed = stopStatus && typeof stopStatus.delayMinutes === 'number';
+              const stopDelayMin = stopStatus ? stopStatus.delayMinutes : null;
+
+              let stopTextClass = '';
+              if (isStopSuppressed) stopTextClass += ' aff-quais-departs-redesign__stop-text--suppressed';
+              if (isStopDelayed) stopTextClass += ' aff-quais-departs-redesign__stop-text--delayed';
+
              return (
-                <li key={`${item.label}-${item.idx}-${mapIndex}`} className={isLast ? 'aff-quais__stop--strict aff-quais__stop--strict-dest' : 'aff-quais__stop--strict'}>
-                  <span className="aff-quais__stop-bullet--strict" />
-                  <span className="aff-quais__stop-text--strict">{item.label}</span>
+                <li key={`${item.label}-${item.idx}-${mapIndex}`} className={`aff-quais-departs-redesign__stop ${isLast ? 'aff-quais-departs-redesign__stop--dest' : ''}`}>
+                  <span className="aff-quais-departs-redesign__stop-bullet" />
+                  <span className={`aff-quais-departs-redesign__stop-text${stopTextClass}`}>
+                    {item.label}
+                    {isStopSuppressed && <span className="aff-quais-departs-redesign__stop-status-badge aff-quais-departs-redesign__stop-status-badge--suppressed"> (non desservi)</span>}
+                    {isStopDelayed && <span className="aff-quais-departs-redesign__stop-status-badge aff-quais-departs-redesign__stop-status-badge--delayed"> (+{stopDelayMin} min)</span>}
+                  </span>
                </li>
              );
            });
          })()}
        </ul>
      </div>
-      {/* footer band same as classic departures with clock on the right */}
-      <div className="aff-quais__footer" aria-hidden>
-        <div className="aff-quais__footer-inner">
-          <div className="aff-quais__footer-left"></div>
-          <div className="aff-quais__footer-right"><Clock /></div>
+
+      {/* BOTTOM FOOTER: Full Width */}
+      <div className="aff-quais-departs-redesign__footer">
+        <div className="aff-quais-departs-redesign__footer-left">
+          ain.
+        </div>
+        <div className="aff-quais-departs-redesign__footer-right">
+          <Clock />
        </div>
      </div>
    </div>
  );
-}
+}