RELEASE V4.1.0 : Voici les modifications apportées :

-> Refonte complète des afficheurs AFL départ et arrivée (+ Quais)
-> EVA DÉPARTS + ARRIVÉES

EN COURS DE DÉVELOPPEMENT :
-> REFONTE AFFICHEURS CLASSIQUES
-> IMPLÉMENTATION DONNÉES GTFS / GTFS-RT / SIRI LTE

public/index.html

@@ -3,29 +3,28 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
     <meta name="theme-color" content="#000000" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Afficheurs" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Simulateur d'afficheurs ferroviaires voyageurs (SNCF, AFL, EVA, Classiques)"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+    <title>Afficheurs Ferroviaires</title>
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
     <style>
+      html, body, #root {
+        background-color: #000000;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
       @font-face {
         font-family: 'Achemine';
         src: url('%PUBLIC_URL%/fonts/achemine_regular.ttf') format('truetype');

public/manifest.json

@@ -1,6 +1,7 @@
 {
-  "short_name": "React App",
+  "short_name": "Afficheurs",
-  "name": "Create React App Sample",
+  "name": "Afficheurs Ferroviaires",
+  "description": "Simulateur d'afficheurs ferroviaires voyageurs (SNCF, AFL, EVA, Classiques)",
   "icons": [
     {
       "src": "favicon.ico",
@@ -20,6 +21,7 @@
   ],
   "start_url": ".",
   "display": "standalone",
+  "orientation": "any",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#000000"
 }

src/App.js

@@ -17,6 +17,7 @@ import AFLArriveesQuais from './pages/afficheurs/afl/AFLArriveesQuais';
 import EVAArrivees from './pages/afficheurs/eva/EVAArrivees';
 import EVADeparts from './pages/afficheurs/eva/EVADeparts';
 import SelectAfficheur from './pages/SelectAfficheur';
+import AfficheurViewportWrapper from './components/AfficheurViewportWrapper';
 applyPolyfills().then(() => defineCustomElements(window));
 
 // Petit routeur client sans dépendances externes
@@ -129,34 +130,34 @@ function App() {
   // Routes pour afficheurs : format /afficheurs/{mode}/{type}?gare=...
   // route plus spécifique pour l'afficheur "quais"
   if (route.startsWith('/afficheurs/departs/classiques/quais')) {
-    return <ClassiquesDepartsQuais />;
+    return <AfficheurViewportWrapper><ClassiquesDepartsQuais /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/arrivees/classiques/quais')) {
-    return <ClassiquesArriveesQuais />;
+    return <AfficheurViewportWrapper><ClassiquesArriveesQuais /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/departs/classiques')) {
-    return <ClassiquesDeparts />;
+    return <AfficheurViewportWrapper><ClassiquesDeparts /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/departs/afl/quais')) {
-    return <AFLDepartsQuais />;
+    return <AfficheurViewportWrapper><AFLDepartsQuais /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/departs/afl')) {
-    return <AFLDeparts />;
+    return <AfficheurViewportWrapper><AFLDeparts /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/departs/eva')) {
-    return <EVADeparts />;
+    return <AfficheurViewportWrapper><EVADeparts /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/arrivees/afl/quais')) {
-    return <AFLArriveesQuais />;
+    return <AfficheurViewportWrapper><AFLArriveesQuais /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/arrivees/afl')) {
-    return <AFLArrivees />;
+    return <AfficheurViewportWrapper><AFLArrivees /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/arrivees/eva')) {
-    return <EVAArrivees />;
+    return <AfficheurViewportWrapper><EVAArrivees /></AfficheurViewportWrapper>;
   }
   if (route.startsWith('/afficheurs/arrivees/classiques')) {
-    return <ClassiquesArrivees />;
+    return <AfficheurViewportWrapper><ClassiquesArrivees /></AfficheurViewportWrapper>;
   }
 
   let content;

src/components/AfficheurViewportWrapper.css

@@ -0,0 +1,47 @@
+/* ==========================================================================
+   AFFICHEUR VIEWPORT WRAPPER (PWA 16:9 LETTERBOXING)
+   ========================================================================== */
+
+/* Conteneur plein écran noir */
+.afficheur-pwa-screen-wrapper {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  height: 100dvh !important;
+  background-color: #000000 !important;
+  overflow: hidden !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  z-index: 99999 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box !important;
+  user-select: none !important;
+  -webkit-user-select: none !important;
+  touch-action: none !important;
+}
+
+/* Canvas 16:9 Haute Définition (1920x1080) centré */
+.afficheur-pwa-canvas {
+  width: 1920px !important;
+  height: 1080px !important;
+  min-width: 1920px !important;
+  min-height: 1080px !important;
+  max-width: 1920px !important;
+  max-height: 1080px !important;
+  position: relative !important;
+  overflow: hidden !important;
+  transform-origin: center center !important;
+  flex-shrink: 0 !important;
+  background-color: #000000 !important;
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9) !important;
+  -webkit-backface-visibility: hidden !important;
+  backface-visibility: hidden !important;
+  -webkit-transform-style: preserve-3d !important;
+  transform-style: preserve-3d !important;
+}

src/components/AfficheurViewportWrapper.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import './AfficheurViewportWrapper.css';
+
+/**
+ * AfficheurViewportWrapper
+ * Assure un affichage 16:9 strict (1920x1080) sur tous les appareils
+ * (Mobile portrait, Mobile paysage, Tablettes, Ordinateurs, TV).
+ * Ajoute automatiquement des bordures noires (letterboxing / pillarboxing)
+ * pour conserver fidèlement les proportions du design original sans distorsion.
+ */
+export default function AfficheurViewportWrapper({ children }) {
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    const calculateScale = () => {
+      // Dimensions de la fenêtre d'affichage (support viewport iOS / Android safe area)
+      const w = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || 1920;
+      const h = window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || 1080;
+
+      // Échelle basée sur la résolution standard 1920x1080 (16:9)
+      const scaleX = w / 1920;
+      const scaleY = h / 1080;
+      const s = Math.min(scaleX, scaleY);
+      setScale(s);
+    };
+
+    calculateScale();
+    window.addEventListener('resize', calculateScale);
+    window.addEventListener('orientationchange', calculateScale);
+
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', calculateScale);
+    }
+
+    return () => {
+      window.removeEventListener('resize', calculateScale);
+      window.removeEventListener('orientationchange', calculateScale);
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener('resize', calculateScale);
+      }
+    };
+  }, []);
+
+  return (
+    <div className="afficheur-pwa-screen-wrapper">
+      <div
+        className="afficheur-pwa-canvas"
+        style={{
+          transform: `scale(${scale})`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

src/pages/afficheurs/afl/AFLArrivees.css

@@ -1,78 +1,76 @@
-/* ==========================================================================
+/* AFL ARRIVEES - DESIGN STRICT CONFORME AUX MAQUETTES */
-   AFL ARRIVEES (GRANDS ARRIVEES SNCF) - CSS
-   ========================================================================== */
 
-/* Reset & Global Container */
 .afl-arr-container {
-  font-family: 'Achemine', 'Segoe UI', Arial, sans-serif !important;
+  font-family: 'Achemine', 'Segoe UI', Roboto, sans-serif !important;
-  height: 100vh !important;
+  background-color: #173e31 !important;
-  width: 100vw !important;
+  color: #ffffff !important;
+  width: 100% !important;
+  height: 100% !important;
+  overflow: hidden !important;
   display: flex !important;
   flex-direction: column !important;
-  background-color: #173e31 !important; /* Vert sombre SNCF Arrivées */
-  overflow: hidden !important;
-  color: #ffffff !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  box-sizing: border-box !important;
-  user-select: none !important;
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  user-select: none !important;
+}
+
+.afl-arr-container * {
+  box-sizing: border-box !important;
 }
 
 /* ==========================================================================
-   HEADER (10vh)
+   HEADER (108px)
    ========================================================================== */
 .afl-arr-header {
-  height: 10vh !important;
+  height: 108px !important;
-  min-height: 10vh !important;
+  min-height: 108px !important;
-  max-height: 10vh !important;
+  max-height: 108px !important;
-  background-color: #337862 !important; /* Vert moyen SNCF Arrivées */
+  background-color: #337862 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding: 0 2.5vw !important;
+  padding: 0 48px !important;
   border-bottom: 2px solid #ffffff !important;
-  box-sizing: border-box !important;
-  z-index: 10 !important;
 }
 
 .afl-arr-header-left {
   display: flex !important;
   align-items: center !important;
-  gap: 1.5vw !important;
+  gap: 29px !important;
 }
 
 .afl-arr-header-title {
-  font-size: 6.2vh !important;
+  font-size: 54px !important;
   font-weight: 700 !important;
   color: #ffffff !important;
-  letter-spacing: -0.05vw !important;
+  letter-spacing: -0.96px !important;
   line-height: 1 !important;
 }
 
 .afl-arr-header-center {
   display: flex !important;
   align-items: center !important;
-  gap: 1.2vw !important;
+  gap: 23px !important;
 }
 
 .afl-arr-page-dot {
-  width: 4.5vh !important;
+  width: 49px !important;
-  height: 4.5vh !important;
+  height: 49px !important;
   border-radius: 50% !important;
   background-color: rgba(255, 255, 255, 0.3) !important;
   color: #ffffff !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  font-size: 3.0vh !important;
+  font-size: 24px !important;
   font-weight: 700 !important;
 }
 
 .afl-arr-page-dot--active {
-  background-color: #3dba8b !important; /* Vert clair émeraude actif */
+  background-color: #3dba8b !important;
   color: #173e31 !important;
 }
 
@@ -90,9 +88,9 @@
 }
 
 .afl-arr-clock-main {
-  font-size: 6.2vh !important;
+  font-size: 56px !important;
   line-height: 1 !important;
-  letter-spacing: -0.05vw !important;
+  letter-spacing: -0.96px !important;
 }
 
 /* ==========================================================================
@@ -110,21 +108,20 @@
 
 .afl-arr-row {
   display: flex !important;
-  width: 100vw !important;
+  width: 100% !important;
   border-bottom: 2px solid #ffffff !important;
-  padding-left: 2.5vw !important;
+  padding-left: 48px !important;
-  padding-right: 1.5vw !important;
+  padding-right: 29px !important;
   background-color: #173e31 !important;
-  box-sizing: border-box !important;
 }
 
 /* --------------------------------------------------------------------------
-   MODE ETENDU (20vh)
+   MODE ETENDU (216px)
    -------------------------------------------------------------------------- */
 .afl-arr-row--detailed {
-  height: 20vh !important;
+  height: 216px !important;
-  min-height: 20vh !important;
+  min-height: 216px !important;
-  max-height: 20vh !important;
+  max-height: 216px !important;
   align-items: stretch !important;
 }
 
@@ -138,12 +135,12 @@
 }
 
 /* --------------------------------------------------------------------------
-   MODE REDUIT (10vh) - CENTRAGE PARFAIT DE TOUS LES TEXTES
+   MODE REDUIT (108px) - CENTRAGE PARFAIT DE TOUS LES TEXTES
    -------------------------------------------------------------------------- */
 .afl-arr-row--compact {
-  height: 10vh !important;
+  height: 108px !important;
-  min-height: 10vh !important;
+  min-height: 108px !important;
-  max-height: 10vh !important;
+  max-height: 108px !important;
   align-items: center !important;
 }
 
@@ -157,15 +154,12 @@
   height: 100% !important;
 }
 
-/* ==========================================================================
+/* Colonne 1 : Heure & Badge Statut (Centrage synchronisé sur 259px) */
-   COLUMNS LAYOUT
-   ========================================================================== */
-/* Colonne 1 : Heure & Badge Statut (Centrage synchronisé sur 13.5vw) */
 .afl-arr-col-time {
-  width: 13.5vw !important;
+  width: 259px !important;
-  min-width: 13.5vw !important;
+  min-width: 259px !important;
-  max-width: 13.5vw !important;
+  max-width: 259px !important;
-  margin-right: 2.5vw !important;
+  margin-right: 48px !important;
   padding: 0 !important;
   display: flex !important;
   flex-direction: column !important;
@@ -195,10 +189,10 @@
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
-  width: 13.5vw !important;
+  width: 259px !important;
-  min-width: 13.5vw !important;
+  min-width: 259px !important;
-  max-width: 13.5vw !important;
+  max-width: 259px !important;
-  margin-right: 2.5vw !important;
+  margin-right: 48px !important;
 }
 
 .afl-arr-row--compact .afl-arr-col-time .afl-arr-text-time {
@@ -207,25 +201,25 @@
 
 /* Colonne 2 : Type de train / Opérateur & Numéro */
 .afl-arr-col-train {
-  width: 15vw !important;
+  width: 288px !important;
-  min-width: 15vw !important;
+  min-width: 288px !important;
-  max-width: 15vw !important;
+  max-width: 288px !important;
-  margin-right: 2.5vw !important;
+  margin-right: 48px !important;
   padding: 0 !important;
 }
 
-/* Colonne 3 : Provenance & Gares desservies */
+/* Colonne 3 : Destination & Gares desservies */
 .afl-arr-col-dest {
   flex: 1 !important;
   overflow: hidden !important;
-  padding-right: 1.5vw !important;
+  padding-right: 29px !important;
 }
 
 /* Colonne 4 : Voie */
 .afl-arr-col-voie {
-  width: 9.5vw !important;
+  width: 182px !important;
-  min-width: 9.5vw !important;
+  min-width: 182px !important;
-  max-width: 9.5vw !important;
+  max-width: 182px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -235,7 +229,7 @@
    PARTIE HAUTE (LIGNES ETENDUES)
    ========================================================================== */
 .afl-arr-top-row {
-  height: 8.5vh !important;
+  height: 86px !important;
   display: flex !important;
   align-items: flex-end !important;
   width: 100% !important;
@@ -244,25 +238,25 @@
 
 /* Heure */
 .afl-arr-text-time {
-  font-size: 8.0vh !important;
+  font-size: 73px !important;
   font-weight: 800 !important;
   color: #ffff00 !important;
   line-height: 1 !important;
-  letter-spacing: -0.08vw !important;
+  letter-spacing: -0.96px !important;
   margin: 0 !important;
   padding: 0 !important;
 }
 
 .afl-arr-row--compact .afl-arr-text-time {
-  font-size: 8.0vh !important;
+  font-size: 70px !important;
   display: flex !important;
   align-items: center !important;
 }
 
 /* Opérateur */
 .afl-arr-text-op {
-  font-size: 5.0vh !important;
+  font-size: 41px !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   color: #ffffff !important;
   line-height: 1 !important;
   text-transform: uppercase !important;
@@ -273,62 +267,62 @@
 
 /* Destination / Provenance */
 .afl-arr-text-dest {
-  font-size: 8.0vh !important;
+  font-size: 73px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
   line-height: 1 !important;
-  letter-spacing: -0.05vw !important;
+  letter-spacing: -0.96px !important;
   white-space: nowrap !important;
 }
 
 .afl-arr-row--compact .afl-arr-text-dest {
-  font-size: 7.5vh !important;
+  font-size: 70px !important;
 }
 
 /* ==========================================================================
    PARTIE BASSE (LIGNES ETENDUES)
    ========================================================================== */
 .afl-arr-bottom-row {
-  height: 7.5vh !important;
+  height: 76px !important;
   display: flex !important;
   align-items: center !important;
-  margin-top: 1.0vh !important;
+  margin-top: 8px !important;
   width: 100% !important;
   overflow: hidden !important;
 }
 
 /* Numéro de train */
 .afl-arr-text-num {
-  font-size: 4.8vh !important;
+  font-size: 39px !important;
-  font-weight: 700 !important;
+  font-weight: 500 !important;
   color: #ffffff !important;
   line-height: 1 !important;
-  letter-spacing: 0.05vw !important;
+  letter-spacing: 0.96px !important;
   white-space: nowrap !important;
 }
 
 .afl-arr-row--compact .afl-arr-text-num {
-  font-size: 5.2vh !important;
+  font-size: 45px !important;
   display: flex !important;
   align-items: center !important;
 }
 
 /* ==========================================================================
-   STATUS PILLS (DIMENSIONS EXACTES)
+   STATUS PILLS
    ========================================================================== */
 .afl-arr-pill {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
-  gap: 0.8vw !important;
+  gap: 12px !important;
-  padding: 0.5vh 1.4vw 0.5vh 0.6vw !important;
+  padding: 4px 19px 4px 12px !important;
-  border-radius: 3.0vh !important;
+  border-radius: 25px !important;
-  height: 5.8vh !important;
+  height: 50px !important;
   margin: 0 !important;
 }
 
 .afl-arr-pill-text {
-  font-size: 3.6vh !important;
+  font-size: 29px !important;
   font-weight: 700 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
@@ -350,13 +344,13 @@
 }
 
 .afl-arr-icon {
-  width: 4.0vh !important;
+  width: 30px !important;
-  height: 4.0vh !important;
+  height: 30px !important;
   flex-shrink: 0 !important;
 }
 
 /* ==========================================================================
-   GARES DESSERVIES (VIAS - 'VIA' FIXE VERT & DEFILEMENT DES GARES ULTRA-RAPIDE)
+   GARES DESSERVIES (VIAS)
    ========================================================================== */
 .afl-arr-vias-container {
   display: flex !important;
@@ -368,10 +362,10 @@
 }
 
 .afl-arr-vias-label {
-  font-size: 3.6vh !important;
+  font-size: 39px !important;
-  font-weight: 700 !important;
+  font-weight: 500 !important;
-  color: #3dba8b !important; /* Vert menthe SNCF Arrivées */
+  color: #3dba8b !important;
-  margin-right: 0.5vw !important;
+  margin-right: 10px !important;
   flex-shrink: 0 !important;
   vertical-align: baseline !important;
 }
@@ -407,7 +401,7 @@
 }
 
 .afl-arr-vias-stop {
-  font-size: 5.5vh !important;
+  font-size: 39px !important;
   font-weight: 400 !important;
   color: #ffffff !important;
   line-height: 1 !important;
@@ -415,42 +409,42 @@
 }
 
 .afl-arr-vias-chevron {
-  color: #3dba8b !important; /* Chevrons en vert menthe */
+  color: #3dba8b !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
-  margin: 0 0.4vw !important;
+  margin: 0 8px !important;
-  font-size: 5.5vh !important;
+  font-size: 37px !important;
   vertical-align: baseline !important;
 }
 
 /* ==========================================================================
-   VOIE BOX (BLANCHE / PROPORTIONS STRICTES)
+   VOIE BOX
    ========================================================================== */
 .afl-arr-voie-box {
   background-color: #ffffff !important;
-  border-radius: 1.8vh !important;
+  border-radius: 16px !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  gap: 0.2vh !important;
+  gap: 2px !important;
-  width: 8.5vw !important;
+  width: 150px !important;
-  height: 15.2vh !important;
+  height: 157px !important;
-  padding: 0.5vh 0 !important;
+  padding: 5px 0 !important;
-  box-shadow: 0 0.4vh 1.0vh rgba(0, 0, 0, 0.25) !important;
+  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.25) !important;
 }
 
 .afl-arr-voie-label {
   color: #173e31 !important;
-  font-size: 3.5vh !important;
+  font-size: 30px !important;
   font-weight: 600 !important;
   line-height: 1 !important;
-  letter-spacing: -0.02vw !important;
+  letter-spacing: -0.38px !important;
   margin: 0 !important;
 }
 
 .afl-arr-voie-value {
   color: #173e31 !important;
-  font-size: 9.8vh !important;
+  font-size: 93px !important;
   font-weight: 800 !important;
   line-height: 0.9 !important;
   margin: 0 !important;
@@ -467,13 +461,12 @@
 
 .afl-arr-voie-box-compact {
   background-color: #ffffff !important;
-  border-radius: 1.0vh !important;
+  border-radius: 11px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  width: 6.2vw !important;
+  width: 119px !important;
-  height: 7.6vh !important;
+  height: 82px !important;
   padding: 0 !important;
-  box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.25) !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
 }
-

src/pages/afficheurs/afl/AFLArrivees.js

@@ -25,7 +25,7 @@ const formatTimeNoSeconds = (v) => {
   return String(v).slice(0,5).replace(':','h');
 };
 
-const BusIcon = ({ size = '5.5vh', color = 'white', style = {} }) => (
+const BusIcon = ({ size = '59px', color = 'white', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -1068,7 +1068,7 @@ export default function AFLArrivees(){
       {/* HEADER */}
       <header className="afl-arr-header">
         <div className="afl-arr-header-left">
-          <svg width="4.5vh" height="4.5vh" viewBox="0 0 28 28" fill="none" style={{ flexShrink: 0 }}>
+          <svg width="49px" height="49px" viewBox="0 0 28 28" fill="none" style={{ flexShrink: 0 }}>
             {/* Porte de train verticale */}
             <path d="M5 4v20M5 4h3M5 24h3" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
             {/* Silhouette tête */}
@@ -1253,12 +1253,12 @@ export default function AFLArrivees(){
                 )}
               </div>
 
-              {/* ORIGIN & VIAS */}
+              {/* DESTINATION & VIAS */}
               <div className="afl-arr-col-dest">
                 {isDetailed ? (
                   <>
                     <div className="afl-arr-top-row">
-                      {isCarTER && <BusIcon size="5.5vh" color="white" style={{ marginRight: '0.8vw' }} />}
+                      {isCarTER && <BusIcon size="52px" color="white" style={{ marginRight: '15px' }} />}
                       <MarqueeText text={origin} className="afl-arr-text-dest" style={{ flex: 'none' }} />
                     </div>
                     <div className="afl-arr-bottom-row">
@@ -1267,7 +1267,7 @@ export default function AFLArrivees(){
                   </>
                 ) : (
                   <div style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
-                    {isCarTER && <BusIcon size="5.0vh" color="white" style={{ marginRight: '0.8vw' }} />}
+                    {isCarTER && <BusIcon size="49px" color="white" style={{ marginRight: '15px' }} />}
                     <MarqueeText text={origin} className="afl-arr-text-dest" style={{ flex: 'none' }} />
                   </div>
                 )}
@@ -1277,13 +1277,13 @@ export default function AFLArrivees(){
               <div className="afl-arr-col-voie">
                 {isDetailed ? (
                   isSuppressed ? (
-                    <svg viewBox="0 0 24 24" width="8.5vh" height="8.5vh" style={{ flexShrink: 0 }}>
+                    <svg viewBox="0 0 24 24" width="81px" height="81px" style={{ flexShrink: 0 }}>
                       <circle cx="12" cy="12" r="11" fill="#ff5c73" />
                       <path d="M8 8l8 8M16 8l-8 8" stroke="#173e31" strokeWidth="3.2" strokeLinecap="round" />
                     </svg>
                   ) : isCarTER ? (
                     <div className="afl-arr-voie-box afl-arr-voie-box--bus">
-                      <BusIcon size="9.5vh" color="#173e31" />
+                      <BusIcon size="86px" color="#173e31" />
                     </div>
                   ) : showPlatform ? (
                     <div className="afl-arr-voie-box">
@@ -1293,13 +1293,13 @@ export default function AFLArrivees(){
                   ) : null
                 ) : (
                   isSuppressed ? (
-                    <svg viewBox="0 0 24 24" width="6.0vh" height="6.0vh" style={{ flexShrink: 0 }}>
+                    <svg viewBox="0 0 24 24" width="59px" height="59px" style={{ flexShrink: 0 }}>
                       <circle cx="12" cy="12" r="11" fill="#ff5c73" />
                       <path d="M8 8l8 8M16 8l-8 8" stroke="#173e31" strokeWidth="3.2" strokeLinecap="round" />
                     </svg>
                   ) : isCarTER ? (
                     <div className="afl-arr-voie-box-compact">
-                      <BusIcon size="5.2vh" color="#173e31" />
+                      <BusIcon size="52px" color="#173e31" />
                     </div>
                   ) : null
                 )}

src/pages/afficheurs/afl/AFLArriveesQuais.css

@@ -2,13 +2,13 @@
    AFL ARRIVEES QUAIS (AFFICHAGE QUAI ARRIVÉE SNCF) - CSS
    ========================================================================== */
 
-/* Conteneur principal (100vw x 100vh) */
+/* Conteneur principal (100% x 100%) */
 .afl-q-arr-container {
   font-family: 'Achemine', 'Segoe UI', Roboto, sans-serif !important;
-  background-color: #173e31 !important; /* Vert sombre SNCF Arrivées */
+  background-color: #173e31 !important;
   color: #ffffff !important;
-  width: 100vw !important;
+  width: 100% !important;
-  height: 100vh !important;
+  height: 100% !important;
   overflow: hidden !important;
   display: flex !important;
   flex-direction: column !important;
@@ -26,17 +26,17 @@
 }
 
 /* ==========================================================================
-   HEADER (10.5vh) : BANDEAU VERT MOYEN
+   HEADER (113px) : BANDEAU VERT MOYEN
    ========================================================================== */
 .afl-q-arr-header {
-  height: 10.5vh !important;
+  height: 113px !important;
-  min-height: 10.5vh !important;
+  min-height: 113px !important;
-  max-height: 10.5vh !important;
+  max-height: 113px !important;
-  background-color: #337862 !important; /* Vert moyen SNCF Arrivées */
+  background-color: #337862 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding: 0 2.5vw !important;
+  padding: 0 48px !important;
   border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
   position: relative !important;
   z-index: 10 !important;
@@ -45,7 +45,7 @@
 .afl-q-arr-header-left {
   display: flex !important;
   align-items: center !important;
-  gap: 1.2vw !important;
+  gap: 23px !important;
 }
 
 .afl-q-arr-header-icon {
@@ -53,18 +53,18 @@
 }
 
 .afl-q-arr-header-title {
-  font-size: 5.6vh !important;
+  font-size: 60px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
-  letter-spacing: -0.03vw !important;
+  letter-spacing: -0.58px !important;
   line-height: 1 !important;
 }
 
 .afl-q-arr-header-clock {
-  font-size: 5.8vh !important;
+  font-size: 63px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
-  letter-spacing: -0.04vw !important;
+  letter-spacing: -0.77px !important;
   line-height: 1 !important;
 }
 
@@ -74,9 +74,9 @@
 .afl-q-arr-main {
   flex: 1 !important;
   display: flex !important;
-  align-items: flex-start !important; /* Hauteur dynamique du panneau gauche */
+  align-items: flex-start !important;
-  padding: 2.5vh 2.5vw 1.5vh 2.5vw !important;
+  padding: 27px 48px 16px 48px !important;
-  gap: 3.5vw !important;
+  gap: 67px !important;
   overflow: hidden !important;
   position: relative !important;
 }
@@ -85,18 +85,18 @@
    COLONNE GAUCHE (CARTE DU TRAIN - HAUTEUR DYNAMIQUE)
    -------------------------------------------------------------------------- */
 .afl-q-arr-left-card {
-  width: 29.5vw !important;
+  width: 566px !important;
-  min-width: 29.5vw !important;
+  min-width: 566px !important;
-  max-width: 29.5vw !important;
+  max-width: 566px !important;
-  height: auto !important; /* Dynamique selon le nombre d'origines */
+  height: auto !important;
   background-color: rgba(23, 62, 49, 0.90) !important;
   border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
-  border-radius: 1.4vh !important;
+  border-radius: 15px !important;
-  padding: 1.8vh 1.6vw !important;
+  padding: 19px 31px !important;
   display: flex !important;
   flex-direction: column !important;
-  gap: 1.4vh !important;
+  gap: 15px !important;
-  box-shadow: 0 0.8vh 2.0vh rgba(0, 0, 0, 0.35) !important;
+  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.35) !important;
   position: relative !important;
 }
 
@@ -105,27 +105,27 @@
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding-bottom: 1.4vh !important;
+  padding-bottom: 15px !important;
   border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
 }
 
 .afl-q-arr-card-time {
-  font-size: 5.6vh !important;
+  font-size: 60px !important;
   font-weight: 800 !important;
-  color: #ffff00 !important; /* Même couleur jaune que sur AFLArrivees.js */
+  color: #ffff00 !important;
   line-height: 1 !important;
-  letter-spacing: -0.04vw !important;
+  letter-spacing: -0.77px !important;
 }
 
 /* Pastille Statut */
 .afl-q-arr-pill {
   display: inline-flex !important;
   align-items: center !important;
-  gap: 0.6vw !important;
+  gap: 12px !important;
-  padding: 0.5vh 1.0vw 0.5vh 0.7vw !important;
+  padding: 5px 19px 5px 13px !important;
-  border-radius: 2.5vh !important;
+  border-radius: 27px !important;
   background-color: #337862 !important;
-  font-size: 2.4vh !important;
+  font-size: 26px !important;
   font-weight: 700 !important;
   color: #ffffff !important;
   line-height: 1 !important;
@@ -142,37 +142,37 @@
 }
 
 .afl-q-arr-pill-icon {
-  width: 2.6vh !important;
+  width: 28px !important;
-  height: 2.6vh !important;
+  height: 28px !important;
   flex-shrink: 0 !important;
 }
 
 /* Provenances & Numéros */
 .afl-q-arr-dest-block {
-  padding-bottom: 1.4vh !important;
+  padding-bottom: 15px !important;
   border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
   display: flex !important;
   flex-direction: column !important;
-  gap: 0.6vh !important;
+  gap: 6px !important;
 }
 
 .afl-q-arr-dest-title {
-  font-size: 5.6vh !important; /* Grande police pour la gare de provenance */
+  font-size: 60px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
   line-height: 1.05 !important;
-  letter-spacing: -0.03vw !important;
+  letter-spacing: -0.58px !important;
   word-break: break-word !important;
 }
 
 .afl-q-arr-dest-sub {
-  font-size: 2.6vh !important;
+  font-size: 28px !important;
   font-weight: 700 !important;
   color: #9be0c8 !important;
-  letter-spacing: 0.04vw !important;
+  letter-spacing: 0.77px !important;
   text-transform: uppercase !important;
   line-height: 1 !important;
-  margin-top: 0.4vh !important;
+  margin-top: 4px !important;
 }
 
 /* Bas de la carte : Logo du type de train */
@@ -180,31 +180,31 @@
   display: flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
-  padding-top: 0.4vh !important;
+  padding-top: 4px !important;
 }
 
 .afl-q-arr-train-logo-box {
   display: flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
-  max-height: 4.8vh !important;
+  max-height: 52px !important;
 }
 
 .afl-q-arr-train-logo-img {
-  max-height: 4.5vh !important;
+  max-height: 49px !important;
-  max-width: 15vw !important;
+  max-width: 288px !important;
   object-fit: contain !important;
 }
 
 .afl-q-arr-train-logo-text {
   border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
-  border-radius: 0.6vh !important;
+  border-radius: 6px !important;
-  padding: 0.3vh 0.8vw !important;
+  padding: 3px 15px !important;
-  font-size: 2.5vh !important;
+  font-size: 27px !important;
   font-style: italic !important;
   font-weight: 800 !important;
   color: #ffffff !important;
-  letter-spacing: 0.06vw !important;
+  letter-spacing: 1.15px !important;
 }
 
 /* --------------------------------------------------------------------------
@@ -227,16 +227,16 @@
 }
 
 /* ==========================================================================
-   FOOTER : BOX VOIE EN BAS À DROITE (SANS REPÈRES DE QUAI NI COMPOSITION)
+   FOOTER : BOX VOIE EN BAS À DROITE
    ========================================================================== */
 .afl-q-arr-footer {
-  height: 14vh !important;
+  height: 151px !important;
-  min-height: 14vh !important;
+  min-height: 151px !important;
-  max-height: 14vh !important;
+  max-height: 151px !important;
   display: flex !important;
   align-items: flex-end !important;
   justify-content: flex-end !important;
-  padding: 0 2.5vw 1.8vh 2.5vw !important;
+  padding: 0 48px 19px 48px !important;
   position: relative !important;
   z-index: 10 !important;
 }
@@ -246,31 +246,31 @@
    -------------------------------------------------------------------------- */
 .afl-q-arr-voie-box {
   background-color: #ffffff !important;
-  border-radius: 1.2vh !important;
+  border-radius: 13px !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  width: 7.2vw !important;
+  width: 138px !important;
-  min-width: 7.2vw !important;
+  min-width: 138px !important;
-  height: 12.5vh !important;
+  height: 135px !important;
-  padding: 0.4vh 0 !important;
+  padding: 4px 0 !important;
-  box-shadow: 0 0.6vh 1.5vh rgba(0, 0, 0, 0.35) !important;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
   flex-shrink: 0 !important;
 }
 
 .afl-q-arr-voie-label {
   color: #173e31 !important;
-  font-size: 2.4vh !important;
+  font-size: 26px !important;
   font-weight: 600 !important;
   line-height: 1 !important;
-  letter-spacing: -0.02vw !important;
+  letter-spacing: -0.38px !important;
   margin: 0 !important;
 }
 
 .afl-q-arr-voie-value {
   color: #173e31 !important;
-  font-size: 6.8vh !important;
+  font-size: 73px !important;
   font-weight: 800 !important;
   line-height: 0.9 !important;
   margin: 0 !important;

src/pages/afficheurs/afl/AFLArriveesQuais.js

@@ -630,7 +630,7 @@ const AFLArriveesQuais = () => {
       <div className="afl-q-arr-container">
         <header className="afl-q-arr-header">
           <div className="afl-q-arr-header-left">
-            <svg width="5.2vh" height="5.2vh" viewBox="0 0 32 32" fill="none" className="afl-q-arr-header-icon">
+            <svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-arr-header-icon">
               <path d="M6 6v20M6 6h3M6 26h3" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
               <circle cx="12" cy="10" r="2.6" fill="white" />
               <path d="M10 14h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />
@@ -640,7 +640,7 @@ const AFLArriveesQuais = () => {
           </div>
           <div className="afl-q-arr-header-clock">{formatTimeNoSeconds(currentTime)}</div>
         </header>
-        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '4.0vh', color: '#ffffff', fontWeight: 600 }}>
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '43px', color: '#ffffff', fontWeight: 600 }}>
           Aucune arrivée prévue
         </div>
         <footer className="afl-q-arr-footer">
@@ -787,7 +787,7 @@ const AFLArriveesQuais = () => {
       {/* HEADER (10.5vh) */}
       <header className="afl-q-arr-header">
         <div className="afl-q-arr-header-left">
-          <svg width="5.2vh" height="5.2vh" viewBox="0 0 32 32" fill="none" className="afl-q-arr-header-icon">
+          <svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-arr-header-icon">
             <path d="M6 6v20M6 6h3M6 26h3" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
             <circle cx="12" cy="10" r="2.6" fill="white" />
             <path d="M10 14h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />

src/pages/afficheurs/afl/AFLDeparts.css

@@ -4,8 +4,8 @@
   font-family: 'Achemine', 'Segoe UI', Roboto, sans-serif !important;
   background-color: #002d62 !important;
   color: #ffffff !important;
-  width: 100vw !important;
+  width: 100% !important;
-  height: 100vh !important;
+  height: 100% !important;
   overflow: hidden !important;
   display: flex !important;
   flex-direction: column !important;
@@ -14,7 +14,6 @@
   left: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
-  z-index: 9999 !important;
   user-select: none !important;
 }
 
@@ -23,50 +22,50 @@
 }
 
 /* ==========================================================================
-   HEADER (10vh)
+   HEADER (108px)
    ========================================================================== */
 .afl-header {
-  height: 10vh !important;
+  height: 108px !important;
-  min-height: 10vh !important;
+  min-height: 108px !important;
-  max-height: 10vh !important;
+  max-height: 108px !important;
   background-color: #005fa9 !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding: 0 2.5vw !important;
+  padding: 0 48px !important;
   border-bottom: 2px solid #ffffff !important;
 }
 
 .afl-header-left {
   display: flex !important;
   align-items: center !important;
-  gap: 1.2vw !important;
+  gap: 23px !important;
 }
 
 .afl-header-title {
-  font-size: 5.5vh !important;
+  font-size: 54px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
-  letter-spacing: 0.05vw !important;
+  letter-spacing: 0.96px !important;
   line-height: 1 !important;
 }
 
 .afl-header-center {
   display: flex !important;
   align-items: center !important;
-  gap: 0.8vw !important;
+  gap: 15px !important;
 }
 
 .afl-page-dot {
-  width: 3.5vh !important;
+  width: 38px !important;
-  height: 3.5vh !important;
+  height: 38px !important;
   border-radius: 50% !important;
   background: rgba(255, 255, 255, 0.3) !important;
   color: #ffffff !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  font-size: 2.0vh !important;
+  font-size: 22px !important;
   font-weight: 700 !important;
 }
 
@@ -89,16 +88,16 @@
 }
 
 .afl-clock-main {
-  font-size: 6.0vh !important;
+  font-size: 56px !important;
   font-weight: 800 !important;
   line-height: 1 !important;
-  letter-spacing: -0.05vw !important;
+  letter-spacing: -0.96px !important;
 }
 
 .afl-clock-seconds {
-  font-size: 3.5vh !important;
+  font-size: 35px !important;
   font-weight: 700 !important;
-  margin-left: 0.3vw !important;
+  margin-left: 6px !important;
   opacity: 0.85 !important;
   line-height: 1 !important;
 }
@@ -118,20 +117,20 @@
 
 .afl-row {
   display: flex !important;
-  width: 100vw !important;
+  width: 100% !important;
   border-bottom: 2px solid #ffffff !important;
-  padding-left: 2.5vw !important;
+  padding-left: 48px !important;
-  padding-right: 1.5vw !important;
+  padding-right: 29px !important;
   background-color: #002d62 !important;
 }
 
 /* --------------------------------------------------------------------------
-   MODE ETENDU (20vh)
+   MODE ETENDU (216px)
    -------------------------------------------------------------------------- */
 .afl-row--detailed {
-  height: 20vh !important;
+  height: 216px !important;
-  min-height: 20vh !important;
+  min-height: 216px !important;
-  max-height: 20vh !important;
+  max-height: 216px !important;
   align-items: stretch !important;
 }
 
@@ -145,12 +144,12 @@
 }
 
 /* --------------------------------------------------------------------------
-   MODE REDUIT (10vh) - CENTRAGE PARFAIT DE TOUS LES TEXTES
+   MODE REDUIT (108px) - CENTRAGE PARFAIT DE TOUS LES TEXTES
    -------------------------------------------------------------------------- */
 .afl-row--compact {
-  height: 10vh !important;
+  height: 108px !important;
-  min-height: 10vh !important;
+  min-height: 108px !important;
-  max-height: 10vh !important;
+  max-height: 108px !important;
   align-items: center !important;
 }
 
@@ -164,12 +163,12 @@
   height: 100% !important;
 }
 
-/* Colonne 1 : Heure & Badge Statut (Centrage synchronisé sur 13.5vw) */
+/* Colonne 1 : Heure & Badge Statut (Centrage synchronisé sur 259px) */
 .afl-col-time {
-  width: 13.5vw !important;
+  width: 259px !important;
-  min-width: 13.5vw !important;
+  min-width: 259px !important;
-  max-width: 13.5vw !important;
+  max-width: 259px !important;
-  margin-right: 2.5vw !important;
+  margin-right: 48px !important;
   padding: 0 !important;
   display: flex !important;
   flex-direction: column !important;
@@ -199,10 +198,10 @@
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
-  width: 13.5vw !important;
+  width: 259px !important;
-  min-width: 13.5vw !important;
+  min-width: 259px !important;
-  max-width: 13.5vw !important;
+  max-width: 259px !important;
-  margin-right: 2.5vw !important;
+  margin-right: 48px !important;
 }
 
 .afl-row--compact .afl-col-time .afl-text-time {
@@ -211,10 +210,10 @@
 
 /* Colonne 2 : Type de train / Opérateur & Numéro */
 .afl-col-train {
-  width: 15vw !important;
+  width: 288px !important;
-  min-width: 15vw !important;
+  min-width: 288px !important;
-  max-width: 15vw !important;
+  max-width: 288px !important;
-  margin-right: 2.5vw !important;
+  margin-right: 48px !important;
   padding: 0 !important;
 }
 
@@ -222,14 +221,14 @@
 .afl-col-dest {
   flex: 1 !important;
   overflow: hidden !important;
-  padding-right: 1.5vw !important;
+  padding-right: 29px !important;
 }
 
 /* Colonne 4 : Voie */
 .afl-col-voie {
-  width: 9.5vw !important;
+  width: 182px !important;
-  min-width: 9.5vw !important;
+  min-width: 182px !important;
-  max-width: 9.5vw !important;
+  max-width: 182px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
@@ -239,7 +238,7 @@
    PARTIE HAUTE (LIGNES ETENDUES)
    ========================================================================== */
 .afl-top-row {
-  height: 8.5vh !important;
+  height: 86px !important;
   display: flex !important;
   align-items: flex-end !important;
   width: 100% !important;
@@ -248,25 +247,25 @@
 
 /* Heure */
 .afl-text-time {
-  font-size: 8.0vh !important;
+  font-size: 73px !important;
   font-weight: 800 !important;
   color: #ffff00 !important;
   line-height: 1 !important;
-  letter-spacing: -0.08vw !important;
+  letter-spacing: -0.96px !important;
   margin: 0 !important;
   padding: 0 !important;
 }
 
 .afl-row--compact .afl-text-time {
-  font-size: 8.0vh !important;
+  font-size: 70px !important;
   display: flex !important;
   align-items: center !important;
 }
 
 /* Opérateur */
 .afl-text-op {
-  font-size: 5.0vh !important;
+  font-size: 41px !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
   color: #ffffff !important;
   line-height: 1 !important;
   text-transform: uppercase !important;
@@ -275,12 +274,12 @@
   text-overflow: ellipsis !important;
   max-width: 100% !important;
   margin: 0 !important;
-  padding-bottom: 0.3vh !important;
+  padding-bottom: 3px !important;
 }
 
 /* Destination */
 .afl-text-dest {
-  font-size: 8.0vh !important;
+  font-size: 73px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
   line-height: 1 !important;
@@ -290,7 +289,7 @@
 }
 
 .afl-row--compact .afl-text-dest {
-  font-size: 7.5vh !important;
+  font-size: 70px !important;
   display: flex !important;
   align-items: center !important;
 }
@@ -299,47 +298,47 @@
    PARTIE BASSE (LIGNES ETENDUES)
    ========================================================================== */
 .afl-bottom-row {
-  height: 7.5vh !important;
+  height: 76px !important;
   display: flex !important;
   align-items: center !important;
-  margin-top: 1.0vh !important;
+  margin-top: 8px !important;
   width: 100% !important;
   overflow: hidden !important;
 }
 
 /* Numéro de train */
 .afl-text-num {
-  font-size: 4.8vh !important;
+  font-size: 39px !important;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
   color: #ffffff !important;
   line-height: 1 !important;
   margin: 0 !important;
 }
 
 .afl-row--compact .afl-text-num {
-  font-size: 5.2vh !important;
+  font-size: 45px !important;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
   margin: 0 !important;
   display: flex !important;
   align-items: center !important;
 }
 
 /* ==========================================================================
-   STATUS PILLS (DIMENSIONS EXACTES SELON L'IMAGE 1)
+   STATUS PILLS
    ========================================================================== */
 .afl-pill {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
-  gap: 0.8vw !important;
+  gap: 12px !important;
-  padding: 0.5vh 1.4vw 0.5vh 0.6vw !important;
+  padding: 4px 19px 4px 12px !important;
-  border-radius: 3.0vh !important;
+  border-radius: 25px !important;
-  height: 5.8vh !important;
+  height: 50px !important;
   margin: 0 !important;
 }
 
 .afl-pill-text {
-  font-size: 3.6vh !important;
+  font-size: 29px !important;
   font-weight: 700 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
@@ -361,13 +360,13 @@
 }
 
 .afl-icon {
-  width: 4.0vh !important;
+  width: 30px !important;
-  height: 4.0vh !important;
+  height: 30px !important;
   flex-shrink: 0 !important;
 }
 
 /* ==========================================================================
-   GARES DESSERVIES (VIAS - 'VIA' FIXE & DEFILEMENT DES GARES ULTRA-ACCELERE)
+   GARES DESSERVIES (VIAS)
    ========================================================================== */
 .afl-vias-container {
   display: flex !important;
@@ -379,10 +378,10 @@
 }
 
 .afl-vias-label {
-  font-size: 3.6vh !important;
+  font-size: 39px !important;
-  font-weight: 400 !important;
+  font-weight: 500 !important;
   color: #ffffff !important;
-  margin-right: 0.5vw !important;
+  margin-right: 10px !important;
   flex-shrink: 0 !important;
   vertical-align: baseline !important;
 }
@@ -418,7 +417,7 @@
 }
 
 .afl-vias-stop {
-  font-size: 5.5vh !important;
+  font-size: 39px !important;
   font-weight: 400 !important;
   color: #ffffff !important;
   line-height: 1 !important;
@@ -427,41 +426,41 @@
 
 .afl-vias-chevron {
   color: #00c3ff !important;
-  font-weight: 800 !important;
+  font-weight: 700 !important;
-  margin: 0 0.4vw !important;
+  margin: 0 8px !important;
-  font-size: 5.5vh !important;
+  font-size: 37px !important;
   vertical-align: baseline !important;
 }
 
 /* ==========================================================================
-   VOIE BOX (PROPORTIONS ET DESIGN STRICTEMENT CONFORMES A L'IMAGE)
+   VOIE BOX
    ========================================================================== */
 .afl-voie-box {
   background-color: #ffffff !important;
-  border-radius: 1.8vh !important;
+  border-radius: 16px !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  gap: 0.2vh !important;
+  gap: 2px !important;
-  width: 8.5vw !important;
+  width: 150px !important;
-  height: 15.2vh !important;
+  height: 157px !important;
-  padding: 0.5vh 0 !important;
+  padding: 5px 0 !important;
-  box-shadow: 0 0.4vh 1.0vh rgba(0, 0, 0, 0.25) !important;
+  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.25) !important;
 }
 
 .afl-voie-label {
   color: #002d62 !important;
-  font-size: 3.5vh !important;
+  font-size: 30px !important;
   font-weight: 600 !important;
   line-height: 1 !important;
-  letter-spacing: -0.02vw !important;
+  letter-spacing: -0.38px !important;
   margin: 0 !important;
 }
 
 .afl-voie-value {
   color: #002d62 !important;
-  font-size: 9.8vh !important;
+  font-size: 93px !important;
   font-weight: 800 !important;
   line-height: 0.9 !important;
   margin: 0 !important;
@@ -478,12 +477,12 @@
 
 .afl-voie-box-compact {
   background-color: #ffffff !important;
-  border-radius: 1.0vh !important;
+  border-radius: 11px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  width: 6.2vw !important;
+  width: 119px !important;
-  height: 7.6vh !important;
+  height: 82px !important;
   padding: 0 !important;
-  box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.25) !important;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
 }

src/pages/afficheurs/afl/AFLDeparts.js

@@ -25,7 +25,7 @@ const formatTimeNoSeconds = (v) => {
   return String(v).slice(0,5).replace(':','h');
 };
 
-const BusIcon = ({ size = '5.5vh', color = 'white', style = {} }) => (
+const BusIcon = ({ size = '59px', color = 'white', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -1095,7 +1095,7 @@ export default function AFLDeparts(){
       {/* HEADER */}
       <header className="afl-header">
         <div className="afl-header-left">
-          <svg width="4.5vh" height="4.5vh" viewBox="0 0 28 28" fill="none" style={{ flexShrink: 0 }}>
+          <svg width="49px" height="49px" viewBox="0 0 28 28" fill="none" style={{ flexShrink: 0 }}>
             {/* Chevrons >> */}
             <path d="M3 8l4 6-4 6M8 8l4 6-4 6" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
             {/* Silhouette tête */}
@@ -1293,7 +1293,7 @@ export default function AFLDeparts(){
                 {isDetailed ? (
                   <>
                     <div className="afl-top-row">
-                      {isCarTER && <BusIcon size="5.5vh" color="white" style={{ marginRight: '0.8vw' }} />}
+                      {isCarTER && <BusIcon size="52px" color="white" style={{ marginRight: '15px' }} />}
                       <MarqueeText text={destination} className="afl-text-dest" style={{ flex: 'none' }} />
                     </div>
                     <div className="afl-bottom-row">
@@ -1302,7 +1302,7 @@ export default function AFLDeparts(){
                   </>
                 ) : (
                   <div style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
-                    {isCarTER && <BusIcon size="5.0vh" color="white" style={{ marginRight: '0.8vw' }} />}
+                    {isCarTER && <BusIcon size="49px" color="white" style={{ marginRight: '15px' }} />}
                     <MarqueeText text={destination} className="afl-text-dest" style={{ flex: 'none' }} />
                   </div>
                 )}
@@ -1312,13 +1312,13 @@ export default function AFLDeparts(){
               <div className="afl-col-voie">
                 {isDetailed ? (
                   isSuppressed ? (
-                    <svg viewBox="0 0 24 24" width="8.5vh" height="8.5vh" style={{ flexShrink: 0 }}>
+                    <svg viewBox="0 0 24 24" width="81px" height="81px" style={{ flexShrink: 0 }}>
                       <circle cx="12" cy="12" r="11" fill="#ff5c73" />
                       <path d="M8 8l8 8M16 8l-8 8" stroke="#002d62" strokeWidth="3.2" strokeLinecap="round" />
                     </svg>
                   ) : isCarTER ? (
                     <div className="afl-voie-box afl-voie-box--bus">
-                      <BusIcon size="9.5vh" color="#002d62" />
+                      <BusIcon size="86px" color="#002d62" />
                     </div>
                   ) : showPlatform ? (
                     <div className="afl-voie-box">
@@ -1328,13 +1328,13 @@ export default function AFLDeparts(){
                   ) : null
                 ) : (
                   isSuppressed ? (
-                    <svg viewBox="0 0 24 24" width="6.0vh" height="6.0vh" style={{ flexShrink: 0 }}>
+                    <svg viewBox="0 0 24 24" width="59px" height="59px" style={{ flexShrink: 0 }}>
                       <circle cx="12" cy="12" r="11" fill="#ff5c73" />
                       <path d="M8 8l8 8M16 8l-8 8" stroke="#002d62" strokeWidth="3.2" strokeLinecap="round" />
                     </svg>
                   ) : isCarTER ? (
                     <div className="afl-voie-box-compact">
-                      <BusIcon size="5.2vh" color="#002d62" />
+                      <BusIcon size="52px" color="#002d62" />
                     </div>
                   ) : null
                 )}

src/pages/afficheurs/afl/AFLDepartsQuais.css

@@ -8,8 +8,8 @@
   background: radial-gradient(circle at 60% 35%, #151a4a 0%, #0c0f2e 100%) !important;
   background-color: #0c0f2e !important;
   color: #ffffff !important;
-  width: 100vw !important;
+  width: 100% !important;
-  height: 100vh !important;
+  height: 100% !important;
   overflow: hidden !important;
   display: flex !important;
   flex-direction: column !important;
@@ -28,17 +28,17 @@
 }
 
 /* ==========================================================================
-   HEADER (10.5vh)
+   HEADER (113px)
    ========================================================================== */
 .afl-q-header {
-  height: 10.5vh !important;
+  height: 113px !important;
-  min-height: 10.5vh !important;
+  min-height: 113px !important;
-  max-height: 10.5vh !important;
+  max-height: 113px !important;
-  background-color: #38466e !important; /* Couleur bleu ardoise exacte */
+  background-color: #38466e !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding: 0 2.5vw !important;
+  padding: 0 48px !important;
   border-bottom: 1.5px solid rgba(255, 255, 255, 0.12) !important;
   z-index: 10 !important;
 }
@@ -46,53 +46,40 @@
 .afl-q-header-left {
   display: flex !important;
   align-items: center !important;
-  gap: 1.2vw !important;
+  gap: 23px !important;
 }
 
 .afl-q-header-icon {
-  width: 5.2vh !important;
+  width: 56px !important;
-  height: 5.2vh !important;
+  height: 56px !important;
   flex-shrink: 0 !important;
 }
 
 .afl-q-header-title {
-  font-size: 5.0vh !important;
+  font-size: 54px !important;
   font-weight: 700 !important;
   color: #ffffff !important;
-  letter-spacing: -0.03vw !important;
+  letter-spacing: -0.58px !important;
   line-height: 1 !important;
 }
 
 .afl-q-header-clock {
-  font-size: 5.0vh !important;
+  font-size: 54px !important;
   font-weight: 700 !important;
   color: #ffffff !important;
-  letter-spacing: -0.03vw !important;
+  letter-spacing: -0.58px !important;
   line-height: 1 !important;
 }
 
 /* ==========================================================================
-   CORPS PRINCIPAL (75vh)
+   CORPS PRINCIPAL
    ========================================================================== */
 .afl-q-main {
   flex: 1 !important;
   display: flex !important;
-  flex-direction: row !important;
+  align-items: flex-start !important;
-  padding: 2.0vh 2.5vw 0.5vh 2.5vw !important;
+  padding: 27px 48px 16px 48px !important;
-  gap: 3.5vw !important;
+  gap: 67px !important;
-  overflow: hidden !important;
-  position: relative !important;
-}
-
-/* --------------------------------------------------------------------------
-   CORPS PRINCIPAL (MAIN)
-   -------------------------------------------------------------------------- */
-.afl-q-main {
-  flex: 1 !important;
-  display: flex !important;
-  align-items: flex-start !important; /* Hauteur dynamique du panneau gauche */
-  padding: 2.5vh 2.5vw 1.5vh 2.5vw !important;
-  gap: 3.5vw !important;
   overflow: hidden !important;
   position: relative !important;
 }
@@ -101,18 +88,18 @@
    COLONNE GAUCHE (CARTE DU TRAIN - HAUTEUR DYNAMIQUE)
    -------------------------------------------------------------------------- */
 .afl-q-left-card {
-  width: 29.5vw !important;
+  width: 566px !important;
-  min-width: 29.5vw !important;
+  min-width: 566px !important;
-  max-width: 29.5vw !important;
+  max-width: 566px !important;
-  height: auto !important; /* Dynamique selon le nombre de destinations */
+  height: auto !important;
   background-color: rgba(32, 42, 78, 0.90) !important;
   border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
-  border-radius: 1.4vh !important;
+  border-radius: 15px !important;
-  padding: 1.8vh 1.6vw !important;
+  padding: 19px 31px !important;
   display: flex !important;
   flex-direction: column !important;
-  gap: 1.4vh !important;
+  gap: 15px !important;
-  box-shadow: 0 0.8vh 2.0vh rgba(0, 0, 0, 0.35) !important;
+  box-shadow: 0 9px 22px rgba(0, 0, 0, 0.35) !important;
   position: relative !important;
 }
 
@@ -121,27 +108,27 @@
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding-bottom: 1.4vh !important;
+  padding-bottom: 15px !important;
   border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
 }
 
 .afl-q-card-time {
-  font-size: 5.6vh !important;
+  font-size: 60px !important;
   font-weight: 800 !important;
-  color: #ffff00 !important; /* Même couleur jaune que sur AFLDeparts.js */
+  color: #ffff00 !important;
   line-height: 1 !important;
-  letter-spacing: -0.04vw !important;
+  letter-spacing: -0.77px !important;
 }
 
 /* Pastille Statut */
 .afl-q-pill {
   display: inline-flex !important;
   align-items: center !important;
-  gap: 0.6vw !important;
+  gap: 12px !important;
-  padding: 0.5vh 1.0vw 0.5vh 0.7vw !important;
+  padding: 5px 19px 5px 13px !important;
-  border-radius: 2.5vh !important;
+  border-radius: 27px !important;
   background-color: #45527a !important;
-  font-size: 2.4vh !important;
+  font-size: 26px !important;
   font-weight: 700 !important;
   color: #ffffff !important;
   line-height: 1 !important;
@@ -158,37 +145,37 @@
 }
 
 .afl-q-pill-icon {
-  width: 2.6vh !important;
+  width: 28px !important;
-  height: 2.6vh !important;
+  height: 28px !important;
   flex-shrink: 0 !important;
 }
 
 /* Destinations & Numéros */
 .afl-q-dest-block {
-  padding-bottom: 1.4vh !important;
+  padding-bottom: 15px !important;
   border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
   display: flex !important;
   flex-direction: column !important;
-  gap: 0.6vh !important;
+  gap: 6px !important;
 }
 
 .afl-q-dest-title {
-  font-size: 5.6vh !important; /* Grande police pour la gare de destination */
+  font-size: 60px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
   line-height: 1.05 !important;
-  letter-spacing: -0.03vw !important;
+  letter-spacing: -0.58px !important;
   word-break: break-word !important;
 }
 
 .afl-q-dest-sub {
-  font-size: 2.6vh !important;
+  font-size: 28px !important;
   font-weight: 700 !important;
   color: #9bb0d8 !important;
-  letter-spacing: 0.04vw !important;
+  letter-spacing: 0.77px !important;
   text-transform: uppercase !important;
   line-height: 1 !important;
-  margin-top: 0.4vh !important;
+  margin-top: 4px !important;
 }
 
 /* Bas de la carte : Logo du type de train */
@@ -196,31 +183,31 @@
   display: flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
-  padding-top: 0.4vh !important;
+  padding-top: 4px !important;
 }
 
 .afl-q-train-logo-box {
   display: flex !important;
   align-items: center !important;
   justify-content: flex-start !important;
-  max-height: 4.8vh !important;
+  max-height: 52px !important;
 }
 
 .afl-q-train-logo-img {
-  max-height: 4.5vh !important;
+  max-height: 49px !important;
-  max-width: 15vw !important;
+  max-width: 288px !important;
   object-fit: contain !important;
 }
 
 .afl-q-train-logo-text {
   border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
-  border-radius: 0.6vh !important;
+  border-radius: 6px !important;
-  padding: 0.3vh 0.8vw !important;
+  padding: 3px 15px !important;
-  font-size: 2.5vh !important;
+  font-size: 27px !important;
   font-style: italic !important;
   font-weight: 800 !important;
   color: #ffffff !important;
-  letter-spacing: 0.06vw !important;
+  letter-spacing: 1.15px !important;
 }
 
 /* --------------------------------------------------------------------------
@@ -243,16 +230,16 @@
 }
 
 /* ==========================================================================
-   FOOTER : BOX VOIE EN BAS À DROITE (SANS REPÈRES DE QUAI NI COMPOSITION)
+   FOOTER : BOX VOIE EN BAS À DROITE
    ========================================================================== */
 .afl-q-footer {
-  height: 14vh !important;
+  height: 151px !important;
-  min-height: 14vh !important;
+  min-height: 151px !important;
-  max-height: 14vh !important;
+  max-height: 151px !important;
   display: flex !important;
   align-items: flex-end !important;
   justify-content: flex-end !important;
-  padding: 0 2.5vw 1.8vh 2.5vw !important;
+  padding: 0 48px 19px 48px !important;
   position: relative !important;
   z-index: 10 !important;
 }
@@ -262,31 +249,31 @@
    -------------------------------------------------------------------------- */
 .afl-q-voie-box {
   background-color: #ffffff !important;
-  border-radius: 1.2vh !important;
+  border-radius: 13px !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  width: 7.2vw !important;
+  width: 138px !important;
-  min-width: 7.2vw !important;
+  min-width: 138px !important;
-  height: 12.5vh !important;
+  height: 135px !important;
-  padding: 0.4vh 0 !important;
+  padding: 4px 0 !important;
-  box-shadow: 0 0.6vh 1.5vh rgba(0, 0, 0, 0.35) !important;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
   flex-shrink: 0 !important;
 }
 
 .afl-q-voie-label {
   color: #002447 !important;
-  font-size: 2.4vh !important;
+  font-size: 26px !important;
   font-weight: 600 !important;
   line-height: 1 !important;
-  letter-spacing: -0.02vw !important;
+  letter-spacing: -0.38px !important;
   margin: 0 !important;
 }
 
 .afl-q-voie-value {
   color: #002447 !important;
-  font-size: 6.8vh !important;
+  font-size: 73px !important;
   font-weight: 800 !important;
   line-height: 0.9 !important;
   margin: 0 !important;
@@ -294,6 +281,3 @@
   align-items: center !important;
   justify-content: center !important;
 }
-
-
-

src/pages/afficheurs/afl/AFLDepartsQuais.js

@@ -704,7 +704,7 @@ const AFLDepartsQuais = () => {
       <div className="afl-q-container">
         <header className="afl-q-header">
           <div className="afl-q-header-left">
-            <svg width="5.2vh" height="5.2vh" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
+            <svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
               <path d="M4 8l5 5-5 5M11 8l5 5-5 5" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
               <circle cx="21" cy="11" r="2.6" fill="white" />
               <path d="M19 15h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />
@@ -714,7 +714,7 @@ const AFLDepartsQuais = () => {
           </div>
           <div className="afl-q-header-clock">{formatTimeNoSeconds(currentTime)}</div>
         </header>
-        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '4.0vh', color: '#ffffff', fontWeight: 600 }}>
+        <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '43px', color: '#ffffff', fontWeight: 600 }}>
           Aucun départ prévu
         </div>
         <footer className="afl-q-footer">
@@ -868,7 +868,7 @@ const AFLDepartsQuais = () => {
       {/* HEADER (10.5vh) */}
       <header className="afl-q-header">
         <div className="afl-q-header-left">
-          <svg width="5.2vh" height="5.2vh" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
+          <svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
             <path d="M4 8l5 5-5 5M11 8l5 5-5 5" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
             <circle cx="21" cy="11" r="2.6" fill="white" />
             <path d="M19 15h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />

src/pages/afficheurs/classiques/ClassiquesArrivees.css

@@ -30,7 +30,7 @@
 /* Info cause perturbation — slide-in de droite vers la gauche */
 @keyframes infoWrapperGrow {
   from { max-width: 0; }
-  to   { max-width: 30vw; }
+  to   { max-width: 576px; }
 }
 
 @keyframes infoSlideIn {
@@ -52,8 +52,8 @@
   --text-muted:  #7EE0A0;
 
   position: relative;
-  width: 100vw;
+  width: 100%;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
   background: var(--blue-bg);
   font-family: "Achemine", "Arial Narrow", Arial, sans-serif;
@@ -64,12 +64,12 @@
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__watermark {
   position: absolute;
-  right: -9vh;
+  right: -97px;
   top: 50%;
   transform: translateY(-50%) rotate(-90deg);
   transform-origin: center;
   /* Taille géante, très visible comme dans l'image */
-  font-size: 23vh;
+  font-size: 248px;
   color: #216b3e;
   font-weight: 900;
   letter-spacing: 0.05em;
@@ -81,13 +81,13 @@
 }
 
 /* ══════════════════════════════════════════════════════════════════
-   LISTE STATIQUE — 10 lignes sur exactement 100vh
+   LISTE STATIQUE — 10 lignes sur exactement 1080px
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__list {
   list-style: none;
   margin: 0;
   padding: 0;
-  height: 100vh;
+  height: 1080px;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -98,7 +98,7 @@
    MODE DÉFILEMENT — conteneur + track animé
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__scroll-container {
-  height: 100vh;
+  height: 1080px;
   overflow: hidden;
   position: relative;
   z-index: 2;
@@ -114,13 +114,13 @@
 }
 
 /* ══════════════════════════════════════════════════════════════════
-   ROW — chaque ligne occupe 1/10 de 100vh
+   ROW — chaque ligne occupe 1/10 de 1080px
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__row {
   display: flex;
   align-items: center;
-  flex: 0 0 calc(100vh / 10);
+  flex: 0 0 108px;
-  height: calc(100vh / 10);
+  height: 108px;
   min-height: 0;
   padding: 0;
   box-sizing: border-box;
@@ -136,7 +136,7 @@
   justify-content: center;
   align-items: center;
   color: var(--text-white);
-  font-size: 3vh;
+  font-size: 32px;
   text-align: center;
 }
 
@@ -144,20 +144,20 @@
    COL 1 — Logo opérateur  (~9 % largeur)
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__col-logo {
-  width: 9vw;
+  width: 173px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 0 0.4vw;
+  padding: 0 8px;
   box-sizing: border-box;
 }
 
 .aff-classiques-arrivees__logo-box {
   width: 100%;
   /* Logo prend ~65% de la hauteur de la ligne */
-  height: 6vh;
+  height: 65px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -172,7 +172,7 @@
 .aff-classiques-arrivees__logo-text {
   color: var(--text-white);
   font-weight: 700;
-  font-size: 2vh;
+  font-size: 22px;
   text-align: center;
   word-break: break-word;
   line-height: 1.1;
@@ -183,23 +183,23 @@
    Alterne toutes les 4 secondes
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__col-meta {
-  width: 11vw;
+  width: 211px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 0 0.5vw 0 0;
+  padding: 0 10px 0 0;
   box-sizing: border-box;
-  gap: 0.05vh;
+  gap: 1px;
   overflow: hidden;
   text-align: center;
 }
 
 /* Vue normale — type (ex: "MOBIGO") */
 .aff-classiques-arrivees__train-type {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--text-white);
   font-weight: 600;
   line-height: 1.3;
@@ -211,7 +211,7 @@
 
 /* Vue normale — numéro de sillon (ex: "894251") */
 .aff-classiques-arrivees__train-number {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--text-white);
   font-weight: 400;
   line-height: 1.3;
@@ -220,7 +220,7 @@
 
 /* Vue statut — à l'heure */
 .aff-classiques-arrivees__status-ontime {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--text-white);
   font-weight: 400;
   line-height: 1.3;
@@ -236,14 +236,14 @@
 }
 
 .aff-classiques-arrivees__status-label {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--yellow);
   font-weight: 500;
   white-space: nowrap;
 }
 
 .aff-classiques-arrivees__status-value {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--yellow);
   font-weight: 700;
   white-space: nowrap;
@@ -251,7 +251,7 @@
 
 /* Vue statut — supprimé */
 .aff-classiques-arrivees__status-suppressed {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--yellow);
   font-weight: 700;
   white-space: nowrap;
@@ -262,13 +262,13 @@
    Grande, jaune vif (#FFCC00), bold — comme dans l'image
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__col-time {
-  width: 15vw;
+  width: 288px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
-  padding: 0 0.3vw 0 0;
+  padding: 0 6px 0 0;
   box-sizing: border-box;
 }
 
@@ -277,13 +277,13 @@
   color: var(--yellow);
   font-weight: 700;
   /* Grande taille — occupe ~65% de la hauteur de ligne */
-  font-size: 6.5vh;
+  font-size: 70px;
   line-height: 1;
   white-space: nowrap;
 }
 
 /* ══════════════════════════════════════════════════════════════════
-   COL 4 — Destination + Info cause  (flex:1 — prend tout le reste)
+   COL 4 — Origine + Info cause  (flex:1 — prend tout le reste)
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__col-origin {
   flex: 1 1 0;
@@ -292,14 +292,14 @@
   align-items: center;
   overflow: hidden;
   height: 100%;
-  padding-right: 0.5vw;
+  padding-right: 10px;
 }
 
 /* Texte destination — blanc, bold, très grand */
 .aff-classiques-arrivees__destination {
   color: var(--text-white);
   font-weight: 700;
-  font-size: 6.5vh;
+  font-size: 70px;
   line-height: 1;
   white-space: nowrap;
   overflow: hidden;
@@ -326,41 +326,41 @@
 
 .aff-classiques-arrivees__separator {
   color: var(--text-white);
-  font-size: 4.5vh;
+  font-size: 49px;
   font-weight: 200;
   line-height: 1;
   flex-shrink: 0;
-  padding: 0 0.9vw;
+  padding: 0 17px;
 }
 
 .aff-classiques-arrivees__info-text {
   color: var(--text-white);
-  font-size: 1.9vh;
+  font-size: 21px;
   font-weight: 400;
   white-space: normal;
   overflow: hidden;
   line-height: 1.25;
-  max-width: 22vw;
+  max-width: 422px;
 }
 
 /* ══════════════════════════════════════════════════════════════════
    COL 5 — Quai OU icône bus  (~6.5 % largeur)
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__col-platform {
-  width: 6.5vw;
+  width: 125px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   box-sizing: border-box;
-  padding: 0.5vh 0.4vw;
+  padding: 5px 8px;
 }
 
 /* Boîte quai — bordure blanche */
 .aff-classiques-arrivees__platform-box {
-  width: 6vh;
+  width: 65px;
-  height: 6vh;
+  height: 65px;
   border: 2.5px solid rgba(255, 255, 255, 0.88);
   display: flex;
   align-items: center;
@@ -373,7 +373,7 @@
 .aff-classiques-arrivees__platform-text {
   color: var(--text-white);
   font-weight: 700;
-  font-size: 4.5vh;
+  font-size: 49px;
   line-height: 1;
 }
 
@@ -382,8 +382,8 @@
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-arrivees__footer {
   position: absolute;
-  right: 1.2vw;
+  right: 23px;
-  bottom: 0.8vh;
+  bottom: 9px;
   z-index: 30;
   pointer-events: none;
 }
@@ -397,24 +397,24 @@
   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;
+  padding: 4px 21px;
   display: flex;
   align-items: baseline;
-  gap: 0.5vw;
+  gap: 10px;
   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: 4.4vh;
+  font-size: 48px;
   line-height: 1;
 }
 
 .aff-classiques-arrivees__clock-seconds {
   color: var(--yellow);
   font-weight: 800;
-  font-size: 2.7vh;
+  font-size: 29px;
   line-height: 1;
 }
 

src/pages/afficheurs/classiques/ClassiquesArrivees.js

@@ -1172,7 +1172,7 @@ export default function ClassiquesArrivees(){
 		{/* COL 5 : Quai OU icône bus */}
 		<div className="aff-classiques-arrivees__col-platform">
 		  {isSub || isCarTER ? (
-			<img src="/type/track-car.svg" alt="Car" style={{ width: '6.5vh', height: '6.5vh' }} />
+			<img src="/type/track-car.svg" alt="Car" style={{ width: '70px', height: '70px' }} />
 		  ) : showPlatform ? (
 			<div className="aff-classiques-arrivees__platform-box">
 			  <div className="aff-classiques-arrivees__platform-text">{platform}</div>

src/pages/afficheurs/classiques/ClassiquesDeparts.css

@@ -30,7 +30,7 @@
 /* Info cause perturbation — slide-in de droite vers la gauche */
 @keyframes infoWrapperGrow {
   from { max-width: 0; }
-  to   { max-width: 30vw; }
+  to   { max-width: 576px; }
 }
 
 @keyframes infoSlideIn {
@@ -52,8 +52,8 @@
   --text-muted:  #7EB8E0;
 
   position: relative;
-  width: 100vw;
+  width: 100%;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
   background: var(--blue-bg);
   font-family: "Achemine", "Arial Narrow", Arial, sans-serif;
@@ -64,12 +64,12 @@
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__watermark {
   position: absolute;
-  right: -9vh;
+  right: -97px;
   top: 50%;
   transform: translateY(-50%) rotate(-90deg);
   transform-origin: center;
   /* Taille géante, très visible comme dans l'image */
-  font-size: 23vh;
+  font-size: 248px;
   color: #1389D2;
   font-weight: 900;
   letter-spacing: 0.05em;
@@ -81,13 +81,13 @@
 }
 
 /* ══════════════════════════════════════════════════════════════════
-   LISTE STATIQUE — 10 lignes sur exactement 100vh
+   LISTE STATIQUE — 10 lignes sur exactement 1080px
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__list {
   list-style: none;
   margin: 0;
   padding: 0;
-  height: 100vh;
+  height: 1080px;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -98,7 +98,7 @@
    MODE DÉFILEMENT — conteneur + track animé
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__scroll-container {
-  height: 100vh;
+  height: 1080px;
   overflow: hidden;
   position: relative;
   z-index: 2;
@@ -114,13 +114,13 @@
 }
 
 /* ══════════════════════════════════════════════════════════════════
-   ROW — chaque ligne occupe 1/10 de 100vh
+   ROW — chaque ligne occupe 1/10 de 1080px
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__row {
   display: flex;
   align-items: center;
-  flex: 0 0 calc(100vh / 10);
+  flex: 0 0 108px;
-  height: calc(100vh / 10);
+  height: 108px;
   min-height: 0;
   padding: 0;
   box-sizing: border-box;
@@ -136,7 +136,7 @@
   justify-content: center;
   align-items: center;
   color: var(--text-white);
-  font-size: 3vh;
+  font-size: 32px;
   text-align: center;
 }
 
@@ -144,20 +144,20 @@
    COL 1 — Logo opérateur  (~9 % largeur)
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__col-logo {
-  width: 9vw;
+  width: 173px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 0 0.4vw;
+  padding: 0 8px;
   box-sizing: border-box;
 }
 
 .aff-classiques-departs__logo-box {
   width: 100%;
   /* Logo prend ~65% de la hauteur de la ligne */
-  height: 6vh;
+  height: 65px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -172,7 +172,7 @@
 .aff-classiques-departs__logo-text {
   color: var(--text-white);
   font-weight: 700;
-  font-size: 2vh;
+  font-size: 22px;
   text-align: center;
   word-break: break-word;
   line-height: 1.1;
@@ -183,23 +183,23 @@
    Alterne toutes les 4 secondes
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__col-meta {
-  width: 11vw;
+  width: 211px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
-  padding: 0 0.5vw 0 0;
+  padding: 0 10px 0 0;
   box-sizing: border-box;
-  gap: 0.05vh;
+  gap: 1px;
   overflow: hidden;
   text-align: center;
 }
 
 /* Vue normale — type (ex: "MOBIGO") */
 .aff-classiques-departs__train-type {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--text-white);
   font-weight: 600;
   line-height: 1.3;
@@ -211,7 +211,7 @@
 
 /* Vue normale — numéro de sillon (ex: "894251") */
 .aff-classiques-departs__train-number {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--text-white);
   font-weight: 400;
   line-height: 1.3;
@@ -220,7 +220,7 @@
 
 /* Vue statut — à l'heure */
 .aff-classiques-departs__status-ontime {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--text-white);
   font-weight: 400;
   line-height: 1.3;
@@ -236,14 +236,14 @@
 }
 
 .aff-classiques-departs__status-label {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--yellow);
   font-weight: 500;
   white-space: nowrap;
 }
 
 .aff-classiques-departs__status-value {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--yellow);
   font-weight: 700;
   white-space: nowrap;
@@ -251,7 +251,7 @@
 
 /* Vue statut — supprimé */
 .aff-classiques-departs__status-suppressed {
-  font-size: 2.2vh;
+  font-size: 24px;
   color: var(--yellow);
   font-weight: 700;
   white-space: nowrap;
@@ -262,13 +262,13 @@
    Grande, jaune vif (#FFCC00), bold — comme dans l'image
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__col-time {
-  width: 15vw;
+  width: 288px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
-  padding: 0 0.3vw 0 0;
+  padding: 0 6px 0 0;
   box-sizing: border-box;
 }
 
@@ -277,7 +277,7 @@
   color: var(--yellow);
   font-weight: 700;
   /* Grande taille — occupe ~65% de la hauteur de ligne */
-  font-size: 6.5vh;
+  font-size: 70px;
   line-height: 1;
   white-space: nowrap;
 }
@@ -292,14 +292,14 @@
   align-items: center;
   overflow: hidden;
   height: 100%;
-  padding-right: 0.5vw;
+  padding-right: 10px;
 }
 
 /* Texte destination — blanc, bold, très grand */
 .aff-classiques-departs__destination {
   color: var(--text-white);
   font-weight: 700;
-  font-size: 6.5vh;
+  font-size: 70px;
   line-height: 1;
   white-space: nowrap;
   overflow: hidden;
@@ -326,41 +326,41 @@
 
 .aff-classiques-departs__separator {
   color: var(--text-white);
-  font-size: 4.5vh;
+  font-size: 49px;
   font-weight: 200;
   line-height: 1;
   flex-shrink: 0;
-  padding: 0 0.9vw;
+  padding: 0 17px;
 }
 
 .aff-classiques-departs__info-text {
   color: var(--text-white);
-  font-size: 1.9vh;
+  font-size: 21px;
   font-weight: 400;
   white-space: normal;
   overflow: hidden;
   line-height: 1.25;
-  max-width: 22vw;
+  max-width: 422px;
 }
 
 /* ══════════════════════════════════════════════════════════════════
    COL 5 — Quai OU icône bus  (~6.5 % largeur)
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__col-platform {
-  width: 6.5vw;
+  width: 125px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
   box-sizing: border-box;
-  padding: 0.5vh 0.4vw;
+  padding: 5px 8px;
 }
 
 /* Boîte quai — bordure blanche */
 .aff-classiques-departs__platform-box {
-  width: 6vh;
+  width: 65px;
-  height: 6vh;
+  height: 65px;
   border: 2.5px solid rgba(255, 255, 255, 0.88);
   display: flex;
   align-items: center;
@@ -373,7 +373,7 @@
 .aff-classiques-departs__platform-text {
   color: var(--text-white);
   font-weight: 700;
-  font-size: 4.5vh;
+  font-size: 49px;
   line-height: 1;
 }
 
@@ -382,8 +382,8 @@
    ══════════════════════════════════════════════════════════════════ */
 .aff-classiques-departs__footer {
   position: absolute;
-  right: 1.2vw;
+  right: 23px;
-  bottom: 0.8vh;
+  bottom: 9px;
   z-index: 30;
   pointer-events: none;
 }
@@ -397,24 +397,24 @@
   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;
+  padding: 4px 21px;
   display: flex;
   align-items: baseline;
-  gap: 0.5vw;
+  gap: 10px;
   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: 4.4vh;
+  font-size: 48px;
   line-height: 1;
 }
 
 .aff-classiques-departs__clock-seconds {
   color: var(--yellow);
   font-weight: 800;
-  font-size: 2.7vh;
+  font-size: 29px;
   line-height: 1;
 }
 

src/pages/afficheurs/classiques/ClassiquesDeparts.js

@@ -1172,7 +1172,7 @@ export default function ClassiquesDeparts(){
 		{/* 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' }} />
+			<img src="/type/track-car.svg" alt="Car" style={{ width: '70px', height: '70px' }} />
 		  ) : showPlatform ? (
 			<div className="aff-classiques-departs__platform-box">
 			  <div className="aff-classiques-departs__platform-text">{platform}</div>

src/pages/afficheurs/classiques/quais/ClassiquesArriveesQuais.css

@@ -23,8 +23,8 @@ body, html {
 .aff-quais-arrivees-redesign__container {
   display: flex;
   flex-direction: row;
-  width: 100vw;
+  width: 100%;
-  height: 100vh;
+  height: 100%;
   position: relative;
   font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
   background-color: #006330;

src/pages/afficheurs/classiques/quais/ClassiquesDepartsQuais.css

@@ -23,8 +23,8 @@ body, html {
 .aff-quais-departs-redesign__container {
   display: flex;
   flex-direction: row;
-  width: 100vw;
+  width: 100%;
-  height: 100vh;
+  height: 100%;
   position: relative;
   font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
   background-color: #0b376d;

src/pages/afficheurs/eva/EVAArrivees.css

@@ -5,15 +5,15 @@
 /* Container Principal */
 .eva-arr-container {
   font-family: 'Avenir', 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
-  height: 100vh !important;
+  height: 100% !important;
-  width: 100vw !important;
+  width: 100% !important;
   display: flex !important;
   flex-direction: column !important;
   background-color: #000824 !important; /* Bleu nuit très profond EVA */
   overflow: hidden !important;
   color: #ffffff !important;
   margin: 0 !important;
-  padding: 1.2vh 1.8vw !important;
+  padding: 13px 35px !important;
   box-sizing: border-box !important;
   user-select: none !important;
   position: absolute !important;
@@ -25,26 +25,26 @@
    HEADER (En-tête EVA)
    ========================================================================== */
 .eva-arr-header {
-  height: 9.5vh !important;
+  height: 103px !important;
-  min-height: 9.5vh !important;
+  min-height: 103px !important;
-  max-height: 9.5vh !important;
+  max-height: 103px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding: 0 0.5vw !important;
+  padding: 0 10px !important;
-  margin-bottom: 1.0vh !important;
+  margin-bottom: 11px !important;
   box-sizing: border-box !important;
 }
 
 .eva-arr-header-left {
   display: flex !important;
   align-items: center !important;
-  gap: 1.0vw !important;
+  gap: 19px !important;
 }
 
 .eva-arr-header-icon {
-  width: 5.5vh !important;
+  width: 59px !important;
-  height: 5.5vh !important;
+  height: 59px !important;
   flex-shrink: 0 !important;
   color: #00d68f !important;
 }
@@ -52,31 +52,31 @@
 .eva-arr-header-titles {
   display: flex !important;
   align-items: baseline !important;
-  gap: 0.6vw !important;
+  gap: 12px !important;
   white-space: nowrap !important;
 }
 
 .eva-arr-header-title-main {
-  font-size: 5.2vh !important;
+  font-size: 56px !important;
   font-weight: 900 !important;
   color: #ffffff !important;
-  letter-spacing: 0.04vw !important;
+  letter-spacing: 0.77px !important;
   line-height: 1 !important;
   text-transform: uppercase !important;
 }
 
 .eva-arr-header-slash {
-  font-size: 3.8vh !important;
+  font-size: 41px !important;
   font-weight: 700 !important;
   color: #00d68f !important;
   line-height: 1 !important;
 }
 
 .eva-arr-header-title-sub {
-  font-size: 3.2vh !important;
+  font-size: 35px !important;
   font-weight: 700 !important;
   color: #00d68f !important;
-  letter-spacing: 0.02vw !important;
+  letter-spacing: 0.38px !important;
   line-height: 1 !important;
   text-transform: uppercase !important;
 }
@@ -91,23 +91,23 @@
   border: 2.2px solid #00d68f !important;
   background-color: #000824 !important;
   border-radius: 8px !important;
-  padding: 0.5vh 1.0vw !important;
+  padding: 5px 19px !important;
   display: flex !important;
   align-items: baseline !important;
-  gap: 0.5vw !important;
+  gap: 10px !important;
   box-shadow: 0 0 10px rgba(0, 214, 143, 0.15) !important;
 }
 
 .eva-arr-clock-main {
-  font-size: 4.8vh !important;
+  font-size: 52px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
   line-height: 1 !important;
-  letter-spacing: 0.02vw !important;
+  letter-spacing: 0.38px !important;
 }
 
 .eva-arr-clock-seconds {
-  font-size: 3.8vh !important;
+  font-size: 41px !important;
   font-weight: 800 !important;
   color: #00d68f !important;
   line-height: 1 !important;
@@ -121,7 +121,7 @@
   display: flex !important;
   flex-direction: column !important;
   justify-content: flex-start !important;
-  gap: 1.2vh !important;
+  gap: 13px !important;
   padding: 0 !important;
   margin: 0 !important;
   list-style: none !important;
@@ -133,8 +133,8 @@
   border-radius: 10px !important;
   display: flex !important;
   align-items: stretch !important;
-  height: calc((100% - 3.6vh) / 4) !important;
+  height: calc((100% - 39px) / 4) !important;
-  min-height: 12vh !important;
+  min-height: 130px !important;
   box-sizing: border-box !important;
   overflow: hidden !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
@@ -144,27 +144,27 @@
    COLONNE GAUCHE : HEURE & STATUT
    -------------------------------------------------------------------------- */
 .eva-arr-col-time {
-  width: 14.5vw !important;
+  width: 278px !important;
-  min-width: 14.5vw !important;
+  min-width: 278px !important;
-  max-width: 14.5vw !important;
+  max-width: 278px !important;
   background-color: #d7e1f0 !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
   align-items: center !important;
-  padding: 0.8vh 0.6vw !important;
+  padding: 9px 12px !important;
   box-sizing: border-box !important;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
 }
 
 .eva-arr-time-value {
-  font-size: 5.6vh !important;
+  font-size: 60px !important;
   font-weight: 900 !important;
   color: #000c2f !important;
   line-height: 1 !important;
-  margin-bottom: 0.6vh !important;
+  margin-bottom: 6px !important;
-  letter-spacing: -0.02vw !important;
+  letter-spacing: -0.38px !important;
 }
 
 /* Pastilles de statut */
@@ -172,11 +172,11 @@
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  gap: 0.4vw !important;
+  gap: 8px !important;
-  padding: 0.3vh 0.9vw !important;
+  padding: 3px 17px !important;
   border-radius: 20px !important;
   box-sizing: border-box !important;
-  height: 3.8vh !important;
+  height: 41px !important;
 }
 
 .eva-arr-status-pill--ontime {
@@ -196,13 +196,13 @@
 }
 
 .eva-arr-status-icon {
-  width: 2.5vh !important;
+  width: 27px !important;
-  height: 2.5vh !important;
+  height: 27px !important;
   flex-shrink: 0 !important;
 }
 
 .eva-arr-status-text {
-  font-size: 2.2vh !important;
+  font-size: 24px !important;
   font-weight: 700 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
@@ -216,7 +216,7 @@
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
-  padding: 0.6vh 1.8vw !important;
+  padding: 6px 35px !important;
   box-sizing: border-box !important;
   overflow: hidden !important;
   min-width: 0 !important;
@@ -225,18 +225,18 @@
 .eva-arr-origin-row {
   display: flex !important;
   align-items: center !important;
-  gap: 0.8vw !important;
+  gap: 15px !important;
   overflow: hidden !important;
   white-space: nowrap !important;
-  margin-bottom: 0.4vh !important;
+  margin-bottom: 4px !important;
 }
 
 .eva-arr-origin-name {
-  font-size: 5.6vh !important;
+  font-size: 60px !important;
   font-weight: 900 !important;
   color: #000c2f !important;
   line-height: 1.1 !important;
-  letter-spacing: -0.02vw !important;
+  letter-spacing: -0.38px !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
@@ -246,24 +246,24 @@
 .eva-arr-perturb-badge {
   display: inline-flex !important;
   align-items: center !important;
-  gap: 0.4vw !important;
+  gap: 8px !important;
   background-color: #ffa74f !important;
   color: #000c2f !important;
-  padding: 0.4vh 0.8vw !important;
+  padding: 4px 15px !important;
   border-radius: 6px !important;
-  height: 3.4vh !important;
+  height: 37px !important;
   box-sizing: border-box !important;
   flex-shrink: 0 !important;
 }
 
 .eva-arr-perturb-badge-icon {
-  width: 2.4vh !important;
+  width: 26px !important;
-  height: 2.4vh !important;
+  height: 26px !important;
   flex-shrink: 0 !important;
 }
 
 .eva-arr-perturb-badge-text {
-  font-size: 2.2vh !important;
+  font-size: 24px !important;
   font-weight: 700 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
@@ -279,10 +279,10 @@
 }
 
 .eva-arr-vias-label {
-  font-size: 3.5vh !important;
+  font-size: 38px !important;
   font-weight: 700 !important;
-  color: #00c284 !important; /* Vert menthe SNCF */
+  color: #00c284 !important;
-  margin-right: 0.5vw !important;
+  margin-right: 10px !important;
   flex-shrink: 0 !important;
 }
 
@@ -318,7 +318,7 @@
 }
 
 .eva-arr-vias-stop {
-  font-size: 3.5vh !important;
+  font-size: 38px !important;
   font-weight: 500 !important;
   color: #2c3b57 !important;
   line-height: 1 !important;
@@ -327,8 +327,8 @@
 .eva-arr-vias-bullet {
   color: #00c284 !important;
   font-weight: 800 !important;
-  margin: 0 0.5vw !important;
+  margin: 0 10px !important;
-  font-size: 2.8vh !important;
+  font-size: 30px !important;
   display: inline-block !important;
   vertical-align: middle !important;
 }
@@ -347,18 +347,18 @@
 .eva-arr-bus-box {
   background-color: #000c2f !important;
   border-radius: 8px !important;
-  width: 7.0vw !important;
+  width: 134px !important;
   height: 80% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  margin-right: 0.8vw !important;
+  margin-right: 15px !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
 }
 
 .eva-arr-bus-icon {
-  width: 6.0vh !important;
+  width: 65px !important;
-  height: 6.0vh !important;
+  height: 65px !important;
   color: #ffffff !important;
 }
 
@@ -366,25 +366,25 @@
 .eva-arr-voie-box {
   background-color: #000c2f !important;
   border-radius: 8px !important;
-  width: 7.0vw !important;
+  width: 134px !important;
   height: 80% !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  margin-right: 0.8vw !important;
+  margin-right: 15px !important;
   color: #ffffff !important;
 }
 
 .eva-arr-voie-label {
-  font-size: 1.8vh !important;
+  font-size: 19px !important;
   font-weight: 600 !important;
   text-transform: uppercase !important;
   opacity: 0.8 !important;
 }
 
 .eva-arr-voie-val {
-  font-size: 4.5vh !important;
+  font-size: 49px !important;
   font-weight: 900 !important;
   line-height: 1 !important;
 }
@@ -392,8 +392,8 @@
 /* Bloc Opérateur & Numéro Vert Émeraude */
 .eva-arr-train-block {
   background-color: #00d68f !important;
-  width: 10.0vw !important;
+  width: 192px !important;
-  min-width: 10.0vw !important;
+  min-width: 192px !important;
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;
@@ -401,25 +401,25 @@
   justify-content: center !important;
   border-top-right-radius: 10px !important;
   border-bottom-right-radius: 10px !important;
-  padding: 0 0.5vw !important;
+  padding: 0 10px !important;
   box-sizing: border-box !important;
 }
 
 .eva-arr-train-op {
-  font-size: 2.8vh !important;
+  font-size: 30px !important;
   font-weight: 700 !important;
   color: #000c2f !important;
   line-height: 1 !important;
-  margin-bottom: 0.3vh !important;
+  margin-bottom: 3px !important;
   text-transform: uppercase !important;
 }
 
 .eva-arr-train-num {
-  font-size: 4.2vh !important;
+  font-size: 45px !important;
   font-weight: 900 !important;
   color: #000c2f !important;
   line-height: 1 !important;
-  letter-spacing: 0.02vw !important;
+  letter-spacing: 0.38px !important;
 }
 
 /* ==========================================================================
@@ -430,15 +430,15 @@
   border-radius: 10px !important;
   display: flex !important;
   align-items: center !important;
-  padding: 0.8vh 1.8vw !important;
+  padding: 9px 35px !important;
-  margin-top: 1.0vh !important;
+  margin-top: 11px !important;
-  gap: 1.4vw !important;
+  gap: 27px !important;
   box-sizing: border-box !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
   flex-shrink: 0 !important;
-  height: 10.8vh !important;
+  height: 117px !important;
-  min-height: 10.8vh !important;
+  min-height: 117px !important;
-  max-height: 10.8vh !important;
+  max-height: 117px !important;
 }
 
 .eva-arr-bottom-alert-icon-wrapper {
@@ -449,8 +449,8 @@
 }
 
 .eva-arr-bottom-alert-icon {
-  width: 5.8vh !important;
+  width: 63px !important;
-  height: 5.8vh !important;
+  height: 63px !important;
   color: #000c2f !important;
 }
 
@@ -458,8 +458,8 @@
   flex: 1 !important;
   overflow: hidden !important;
   position: relative !important;
-  height: 9.0vh !important;
+  height: 97px !important;
-  max-height: 9.0vh !important;
+  max-height: 97px !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: flex-start !important;
@@ -467,7 +467,7 @@
 
 .eva-arr-bottom-alert-content {
   color: #000c2f !important;
-  font-size: 2.4vh !important;
+  font-size: 26px !important;
   font-weight: 600 !important;
   line-height: 1.25 !important;
   white-space: normal !important;

src/pages/afficheurs/eva/EVAArrivees.js

@@ -26,7 +26,7 @@ const formatTimeWithColon = (v) => {
 };
 
 // Icône Passager avec valise à roulettes + Face avant de train (Logo En-tête EVA Arrivées)
-const EVAArrivalsHeaderIcon = ({ size = '5.5vh', color = '#00d68f', style = {} }) => (
+const EVAArrivalsHeaderIcon = ({ size = '59px', color = '#00d68f', style = {} }) => (
   <svg
     viewBox="0 0 64 64"
     width={size}
@@ -72,7 +72,7 @@ const EVAArrivalsHeaderIcon = ({ size = '5.5vh', color = '#00d68f', style = {} }
 );
 
 // Icône de Bus / Autocar SNCF
-const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
+const EVABusIcon = ({ size = '65px', color = '#ffffff', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -85,7 +85,7 @@ const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
 );
 
 // Icône Information (Badge motif perturbation)
-const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
+const EVAInfoIcon = ({ size = '26px', color = '#000c2f', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -104,7 +104,7 @@ const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
 );
 
 // Icône Information Grande (Bandeau Travaux inférieur)
-const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
+const EVABigAlertIcon = ({ size = '63px', color = '#000c2f', style = {} }) => (
   <svg
     viewBox="0 0 48 48"
     width={size}
@@ -129,7 +129,7 @@ const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
 );
 
 // Icône Horloge pour les pastilles de statut
-const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
+const EVAClockIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -147,7 +147,7 @@ const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) =>
 );
 
 // Icône Suppression (Croix)
-const EVACrossIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
+const EVACrossIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -441,7 +441,6 @@ export default function EVAArrivees() {
 
   const [resolvedGareId, setResolvedGareId] = useState(gareIdParam || null);
   useAnnonceSonoreRealtime(resolvedGareId, 'EVAArrivees');
-  useAutoAnnonce(horaires, currentTime, true);
 
   // Récupération type de gare
   useEffect(() => {
@@ -1068,7 +1067,7 @@ export default function EVAArrivees() {
           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 - 1) return false;
+          if (h._depHM < todayHM) return false;
           if (h._travauxAppliesToday) return false;
           return true;
         });
@@ -1112,8 +1111,9 @@ export default function EVAArrivees() {
         });
 
         const annotated = applyPerturbationsToHoraires(finalList, filteredPerturb || [], null, null, serviceDateStr);
+        const withServiceDate = (annotated || []).map(a => ({ ...a, _serviceDate: serviceDateStr }));
 
-        setHoraires(annotated || []);
+        setHoraires(withServiceDate || []);
         setPerturbations(filteredPerturb || []);
         setTravaux(travauxData || []);
         setTravauxSubstitutions(travauxSubstData || []);
@@ -1140,9 +1140,30 @@ export default function EVAArrivees() {
     return () => clearInterval(delayTimer);
   }, []);
 
+  // Filtrage en temps réel : ne plus afficher les horaires dont l'heure est dépassée
+  const currentHM = currentTime.getHours() * 60 + currentTime.getMinutes();
+  const pad = (n) => String(n).padStart(2, '0');
+  const todayDateStr = `${currentTime.getFullYear()}-${pad(currentTime.getMonth() + 1)}-${pad(currentTime.getDate())}`;
+
+  const activeHoraires = (horaires || []).filter(h => {
+    const sDate = h._serviceDate || h._date;
+    if (!sDate || sDate === todayDateStr) {
+      if (typeof h._depHM === 'number') {
+        const delay = (h._status && typeof h._status.delayMinutes === 'number') ? h._status.delayMinutes : 0;
+        const effectiveHM = h._depHM + delay;
+        if (effectiveHM < currentHM) {
+          return false;
+        }
+      }
+    }
+    return true;
+  });
+
+  useAutoAnnonce(activeHoraires, currentTime, true);
+
   // Pagination : 4 trains par page sur les écrans EVA
   const ITEMS_PER_PAGE = 4;
-  const totalPages = Math.max(1, Math.ceil(horaires.length / ITEMS_PER_PAGE));
+  const totalPages = Math.max(1, Math.ceil(activeHoraires.length / ITEMS_PER_PAGE));
   const [pageIndex, setPageIndex] = useState(lockedPageIndex !== null ? lockedPageIndex : 0);
 
   useEffect(() => {
@@ -1159,7 +1180,8 @@ export default function EVAArrivees() {
     return () => clearInterval(pageInterval);
   }, [lockedPageIndex, totalPages]);
 
-  const displayedHoraires = horaires.slice(pageIndex * ITEMS_PER_PAGE, (pageIndex + 1) * ITEMS_PER_PAGE);
+  const safePageIndex = Math.min(pageIndex, Math.max(0, totalPages - 1));
+  const displayedHoraires = activeHoraires.slice(safePageIndex * ITEMS_PER_PAGE, (safePageIndex + 1) * ITEMS_PER_PAGE);
 
   // Recherche d'un message de travaux ou d'alerte pour le bandeau bas
   const activeTravauxMessage = (() => {
@@ -1208,7 +1230,7 @@ export default function EVAArrivees() {
       <ul className={`eva-arr-list ${activeTravauxMessage ? 'eva-arr-list--with-alert' : ''}`}>
         {displayedHoraires.length === 0 ? (
           <li className="eva-arr-row" key="empty">
-            <div style={{ color: '#000c2f', padding: '24px', fontSize: '2.8vh', fontWeight: 'bold' }}>
+            <div style={{ color: '#000c2f', padding: '24px', fontSize: '30px', fontWeight: 'bold' }}>
               Aucune arrivée prévue pour le moment.
             </div>
           </li>

src/pages/afficheurs/eva/EVADeparts.css

@@ -5,15 +5,15 @@
 /* Container Principal */
 .eva-dep-container {
   font-family: 'Avenir', 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
-  height: 100vh !important;
+  height: 100% !important;
-  width: 100vw !important;
+  width: 100% !important;
   display: flex !important;
   flex-direction: column !important;
   background-color: #000824 !important; /* Bleu nuit très profond EVA */
   overflow: hidden !important;
   color: #ffffff !important;
   margin: 0 !important;
-  padding: 1.2vh 1.8vw !important;
+  padding: 13px 35px !important;
   box-sizing: border-box !important;
   user-select: none !important;
   position: absolute !important;
@@ -25,26 +25,26 @@
    HEADER (En-tête EVA Départs)
    ========================================================================== */
 .eva-dep-header {
-  height: 9.5vh !important;
+  height: 103px !important;
-  min-height: 9.5vh !important;
+  min-height: 103px !important;
-  max-height: 9.5vh !important;
+  max-height: 103px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
-  padding: 0 0.5vw !important;
+  padding: 0 10px !important;
-  margin-bottom: 1.0vh !important;
+  margin-bottom: 11px !important;
   box-sizing: border-box !important;
 }
 
 .eva-dep-header-left {
   display: flex !important;
   align-items: center !important;
-  gap: 1.0vw !important;
+  gap: 19px !important;
 }
 
 .eva-dep-header-icon {
-  width: 5.5vh !important;
+  width: 59px !important;
-  height: 5.5vh !important;
+  height: 59px !important;
   flex-shrink: 0 !important;
   color: #03c5ff !important; /* Bleu cyan/azur vif EVA Départs (#03c5ff) */
 }
@@ -52,31 +52,31 @@
 .eva-dep-header-titles {
   display: flex !important;
   align-items: baseline !important;
-  gap: 0.6vw !important;
+  gap: 12px !important;
   white-space: nowrap !important;
 }
 
 .eva-dep-header-title-main {
-  font-size: 5.2vh !important;
+  font-size: 56px !important;
   font-weight: 900 !important;
   color: #ffffff !important;
-  letter-spacing: 0.04vw !important;
+  letter-spacing: 0.77px !important;
   line-height: 1 !important;
   text-transform: uppercase !important;
 }
 
 .eva-dep-header-slash {
-  font-size: 3.8vh !important;
+  font-size: 41px !important;
   font-weight: 700 !important;
   color: #03c5ff !important;
   line-height: 1 !important;
 }
 
 .eva-dep-header-title-sub {
-  font-size: 3.2vh !important;
+  font-size: 35px !important;
   font-weight: 700 !important;
   color: #03c5ff !important;
-  letter-spacing: 0.02vw !important;
+  letter-spacing: 0.38px !important;
   line-height: 1 !important;
   text-transform: uppercase !important;
 }
@@ -91,23 +91,23 @@
   border: 2.2px solid #03c5ff !important;
   background-color: #000824 !important;
   border-radius: 8px !important;
-  padding: 0.5vh 1.0vw !important;
+  padding: 5px 19px !important;
   display: flex !important;
   align-items: baseline !important;
-  gap: 0.5vw !important;
+  gap: 10px !important;
   box-shadow: 0 0 12px rgba(3, 197, 255, 0.25) !important;
 }
 
 .eva-dep-clock-main {
-  font-size: 4.8vh !important;
+  font-size: 52px !important;
   font-weight: 800 !important;
   color: #ffffff !important;
   line-height: 1 !important;
-  letter-spacing: 0.02vw !important;
+  letter-spacing: 0.38px !important;
 }
 
 .eva-dep-clock-seconds {
-  font-size: 3.8vh !important;
+  font-size: 41px !important;
   font-weight: 800 !important;
   color: #03c5ff !important;
   line-height: 1 !important;
@@ -121,7 +121,7 @@
   display: flex !important;
   flex-direction: column !important;
   justify-content: flex-start !important;
-  gap: 1.2vh !important;
+  gap: 13px !important;
   padding: 0 !important;
   margin: 0 !important;
   list-style: none !important;
@@ -133,8 +133,8 @@
   border-radius: 10px !important;
   display: flex !important;
   align-items: stretch !important;
-  height: calc((100% - 3.6vh) / 4) !important;
+  height: calc((100% - 39px) / 4) !important;
-  min-height: 12vh !important;
+  min-height: 130px !important;
   box-sizing: border-box !important;
   overflow: hidden !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
@@ -144,27 +144,27 @@
    COLONNE GAUCHE : HEURE & STATUT
    -------------------------------------------------------------------------- */
 .eva-dep-col-time {
-  width: 14.5vw !important;
+  width: 278px !important;
-  min-width: 14.5vw !important;
+  min-width: 278px !important;
-  max-width: 14.5vw !important;
+  max-width: 278px !important;
   background-color: #d7e1f0 !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
   align-items: center !important;
-  padding: 0.8vh 0.6vw !important;
+  padding: 9px 12px !important;
   box-sizing: border-box !important;
   border-top-left-radius: 10px !important;
   border-bottom-left-radius: 10px !important;
 }
 
 .eva-dep-time-value {
-  font-size: 5.6vh !important;
+  font-size: 60px !important;
   font-weight: 900 !important;
   color: #000c2f !important;
   line-height: 1 !important;
-  margin-bottom: 0.6vh !important;
+  margin-bottom: 6px !important;
-  letter-spacing: -0.02vw !important;
+  letter-spacing: -0.38px !important;
 }
 
 /* Pastilles de statut */
@@ -172,11 +172,11 @@
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  gap: 0.4vw !important;
+  gap: 8px !important;
-  padding: 0.3vh 0.9vw !important;
+  padding: 3px 17px !important;
   border-radius: 20px !important;
   box-sizing: border-box !important;
-  height: 3.8vh !important;
+  height: 41px !important;
 }
 
 .eva-dep-status-pill--ontime {
@@ -196,13 +196,13 @@
 }
 
 .eva-dep-status-icon {
-  width: 2.5vh !important;
+  width: 27px !important;
-  height: 2.5vh !important;
+  height: 27px !important;
   flex-shrink: 0 !important;
 }
 
 .eva-dep-status-text {
-  font-size: 2.2vh !important;
+  font-size: 24px !important;
   font-weight: 700 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
@@ -216,7 +216,7 @@
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
-  padding: 0.6vh 1.8vw !important;
+  padding: 6px 35px !important;
   box-sizing: border-box !important;
   overflow: hidden !important;
   min-width: 0 !important;
@@ -225,18 +225,18 @@
 .eva-dep-origin-row {
   display: flex !important;
   align-items: center !important;
-  gap: 0.8vw !important;
+  gap: 15px !important;
   overflow: hidden !important;
   white-space: nowrap !important;
-  margin-bottom: 0.4vh !important;
+  margin-bottom: 4px !important;
 }
 
 .eva-dep-origin-name {
-  font-size: 5.6vh !important;
+  font-size: 60px !important;
   font-weight: 900 !important;
   color: #000c2f !important;
   line-height: 1.1 !important;
-  letter-spacing: -0.02vw !important;
+  letter-spacing: -0.38px !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
@@ -246,24 +246,24 @@
 .eva-dep-perturb-badge {
   display: inline-flex !important;
   align-items: center !important;
-  gap: 0.4vw !important;
+  gap: 8px !important;
   background-color: #ffa74f !important;
   color: #000c2f !important;
-  padding: 0.4vh 0.8vw !important;
+  padding: 4px 15px !important;
   border-radius: 6px !important;
-  height: 3.4vh !important;
+  height: 37px !important;
   box-sizing: border-box !important;
   flex-shrink: 0 !important;
 }
 
 .eva-dep-perturb-badge-icon {
-  width: 2.4vh !important;
+  width: 26px !important;
-  height: 2.4vh !important;
+  height: 26px !important;
   flex-shrink: 0 !important;
 }
 
 .eva-dep-perturb-badge-text {
-  font-size: 2.2vh !important;
+  font-size: 24px !important;
   font-weight: 700 !important;
   line-height: 1 !important;
   white-space: nowrap !important;
@@ -279,10 +279,10 @@
 }
 
 .eva-dep-vias-label {
-  font-size: 3.5vh !important;
+  font-size: 38px !important;
   font-weight: 700 !important;
   color: #03c5ff !important; /* Bleu azur EVA Départs (#03c5ff) */
-  margin-right: 0.5vw !important;
+  margin-right: 10px !important;
   flex-shrink: 0 !important;
 }
 
@@ -318,7 +318,7 @@
 }
 
 .eva-dep-vias-stop {
-  font-size: 3.5vh !important;
+  font-size: 38px !important;
   font-weight: 500 !important;
   color: #2c3b57 !important;
   line-height: 1 !important;
@@ -327,8 +327,8 @@
 .eva-dep-vias-bullet {
   color: #03c5ff !important;
   font-weight: 800 !important;
-  margin: 0 0.5vw !important;
+  margin: 0 10px !important;
-  font-size: 2.8vh !important;
+  font-size: 30px !important;
   display: inline-block !important;
   vertical-align: middle !important;
 }
@@ -347,18 +347,18 @@
 .eva-dep-bus-box {
   background-color: #000c2f !important;
   border-radius: 8px !important;
-  width: 7.0vw !important;
+  width: 134px !important;
   height: 80% !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
-  margin-right: 0.8vw !important;
+  margin-right: 15px !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
 }
 
 .eva-dep-bus-icon {
-  width: 6.0vh !important;
+  width: 65px !important;
-  height: 6.0vh !important;
+  height: 65px !important;
   color: #ffffff !important;
 }
 
@@ -366,25 +366,25 @@
 .eva-dep-voie-box {
   background-color: #000c2f !important;
   border-radius: 8px !important;
-  width: 7.0vw !important;
+  width: 134px !important;
   height: 80% !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: center !important;
-  margin-right: 0.8vw !important;
+  margin-right: 15px !important;
   color: #ffffff !important;
 }
 
 .eva-dep-voie-label {
-  font-size: 1.8vh !important;
+  font-size: 19px !important;
   font-weight: 600 !important;
   text-transform: uppercase !important;
   opacity: 0.8 !important;
 }
 
 .eva-dep-voie-val {
-  font-size: 4.5vh !important;
+  font-size: 49px !important;
   font-weight: 900 !important;
   line-height: 1 !important;
 }
@@ -392,8 +392,8 @@
 /* Bloc Opérateur & Numéro Bleu Azur Départs */
 .eva-dep-train-block {
   background-color: #03c5ff !important; /* Bleu cyan/azur #03c5ff */
-  width: 10.0vw !important;
+  width: 192px !important;
-  min-width: 10.0vw !important;
+  min-width: 192px !important;
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;
@@ -401,25 +401,25 @@
   justify-content: center !important;
   border-top-right-radius: 10px !important;
   border-bottom-right-radius: 10px !important;
-  padding: 0 0.5vw !important;
+  padding: 0 10px !important;
   box-sizing: border-box !important;
 }
 
 .eva-dep-train-op {
-  font-size: 2.8vh !important;
+  font-size: 30px !important;
   font-weight: 700 !important;
   color: #000c2f !important;
   line-height: 1 !important;
-  margin-bottom: 0.3vh !important;
+  margin-bottom: 3px !important;
   text-transform: uppercase !important;
 }
 
 .eva-dep-train-num {
-  font-size: 4.2vh !important;
+  font-size: 45px !important;
   font-weight: 900 !important;
   color: #000c2f !important;
   line-height: 1 !important;
-  letter-spacing: 0.02vw !important;
+  letter-spacing: 0.38px !important;
 }
 
 /* ==========================================================================
@@ -430,15 +430,15 @@
   border-radius: 10px !important;
   display: flex !important;
   align-items: center !important;
-  padding: 0.8vh 1.8vw !important;
+  padding: 9px 35px !important;
-  margin-top: 1.0vh !important;
+  margin-top: 11px !important;
-  gap: 1.4vw !important;
+  gap: 27px !important;
   box-sizing: border-box !important;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
   flex-shrink: 0 !important;
-  height: 10.8vh !important;
+  height: 117px !important;
-  min-height: 10.8vh !important;
+  min-height: 117px !important;
-  max-height: 10.8vh !important;
+  max-height: 117px !important;
 }
 
 .eva-dep-bottom-alert-icon-wrapper {
@@ -449,8 +449,8 @@
 }
 
 .eva-dep-bottom-alert-icon {
-  width: 5.8vh !important;
+  width: 63px !important;
-  height: 5.8vh !important;
+  height: 63px !important;
   color: #000c2f !important;
 }
 
@@ -458,8 +458,8 @@
   flex: 1 !important;
   overflow: hidden !important;
   position: relative !important;
-  height: 9.0vh !important;
+  height: 97px !important;
-  max-height: 9.0vh !important;
+  max-height: 97px !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: flex-start !important;
@@ -467,7 +467,7 @@
 
 .eva-dep-bottom-alert-content {
   color: #000c2f !important;
-  font-size: 2.4vh !important;
+  font-size: 26px !important;
   font-weight: 600 !important;
   line-height: 1.25 !important;
   white-space: normal !important;

src/pages/afficheurs/eva/EVADeparts.js

@@ -26,7 +26,7 @@ const formatTimeWithColon = (v) => {
 };
 
 // Icône Passager + Face avant de train (Logo En-tête EVA Départs)
-const EVADeparturesHeaderIcon = ({ size = '5.5vh', color = '#03c5ff', style = {} }) => (
+const EVADeparturesHeaderIcon = ({ size = '59px', color = '#03c5ff', style = {} }) => (
   <svg
     viewBox="0 0 64 64"
     width={size}
@@ -72,7 +72,7 @@ const EVADeparturesHeaderIcon = ({ size = '5.5vh', color = '#03c5ff', style = {}
 );
 
 // Icône de Bus / Autocar SNCF
-const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
+const EVABusIcon = ({ size = '65px', color = '#ffffff', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -85,7 +85,7 @@ const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
 );
 
 // Icône Information (Badge motif perturbation)
-const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
+const EVAInfoIcon = ({ size = '26px', color = '#000c2f', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -104,7 +104,7 @@ const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
 );
 
 // Icône Information Grande (Bandeau Travaux inférieur)
-const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
+const EVABigAlertIcon = ({ size = '63px', color = '#000c2f', style = {} }) => (
   <svg
     viewBox="0 0 48 48"
     width={size}
@@ -125,7 +125,7 @@ const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
 );
 
 // Icône Horloge pour les pastilles de statut
-const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
+const EVAClockIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -143,7 +143,7 @@ const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) =>
 );
 
 // Icône Suppression (Croix)
-const EVACrossIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
+const EVACrossIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
   <svg
     viewBox="0 0 24 24"
     width={size}
@@ -437,7 +437,6 @@ export default function EVADeparts() {
 
   const [resolvedGareId, setResolvedGareId] = useState(gareIdParam || null);
   useAnnonceSonoreRealtime(resolvedGareId, 'EVADeparts');
-  useAutoAnnonce(horaires, currentTime, false);
 
   // Récupération type de gare
   useEffect(() => {
@@ -1084,7 +1083,7 @@ export default function EVADeparts() {
           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 - 1) return false;
+          if (h._depHM < todayHM) return false;
           if (h._travauxAppliesToday) return false;
           return true;
         });
@@ -1128,8 +1127,9 @@ export default function EVADeparts() {
         });
 
         const annotated = applyPerturbationsToHoraires(finalList, filteredPerturb || [], null, null, serviceDateStr);
+        const withServiceDate = (annotated || []).map(a => ({ ...a, _serviceDate: serviceDateStr }));
 
-        setHoraires(annotated || []);
+        setHoraires(withServiceDate || []);
         setPerturbations(filteredPerturb || []);
         setTravaux(travauxData || []);
         setTravauxSubstitutions(travauxSubstData || []);
@@ -1156,9 +1156,30 @@ export default function EVADeparts() {
     return () => clearInterval(delayTimer);
   }, []);
 
+  // Filtrage en temps réel : ne plus afficher les horaires dont l'heure est dépassée
+  const currentHM = currentTime.getHours() * 60 + currentTime.getMinutes();
+  const pad = (n) => String(n).padStart(2, '0');
+  const todayDateStr = `${currentTime.getFullYear()}-${pad(currentTime.getMonth() + 1)}-${pad(currentTime.getDate())}`;
+
+  const activeHoraires = (horaires || []).filter(h => {
+    const sDate = h._serviceDate || h._date;
+    if (!sDate || sDate === todayDateStr) {
+      if (typeof h._depHM === 'number') {
+        const delay = (h._status && typeof h._status.delayMinutes === 'number') ? h._status.delayMinutes : 0;
+        const effectiveHM = h._depHM + delay;
+        if (effectiveHM < currentHM) {
+          return false;
+        }
+      }
+    }
+    return true;
+  });
+
+  useAutoAnnonce(activeHoraires, currentTime, false);
+
   // Pagination : 4 trains par page sur les écrans EVA
   const ITEMS_PER_PAGE = 4;
-  const totalPages = Math.max(1, Math.ceil(horaires.length / ITEMS_PER_PAGE));
+  const totalPages = Math.max(1, Math.ceil(activeHoraires.length / ITEMS_PER_PAGE));
   const [pageIndex, setPageIndex] = useState(lockedPageIndex !== null ? lockedPageIndex : 0);
 
   useEffect(() => {
@@ -1175,7 +1196,8 @@ export default function EVADeparts() {
     return () => clearInterval(pageInterval);
   }, [lockedPageIndex, totalPages]);
 
-  const displayedHoraires = horaires.slice(pageIndex * ITEMS_PER_PAGE, (pageIndex + 1) * ITEMS_PER_PAGE);
+  const safePageIndex = Math.min(pageIndex, Math.max(0, totalPages - 1));
+  const displayedHoraires = activeHoraires.slice(safePageIndex * ITEMS_PER_PAGE, (safePageIndex + 1) * ITEMS_PER_PAGE);
 
   // Recherche d'un message de travaux ou d'alerte pour le bandeau bas
   const activeTravauxMessage = (() => {
@@ -1222,7 +1244,7 @@ export default function EVADeparts() {
       <ul className={`eva-dep-list ${activeTravauxMessage ? 'eva-dep-list--with-alert' : ''}`}>
         {displayedHoraires.length === 0 ? (
           <li className="eva-dep-row" key="empty">
-            <div style={{ color: '#000c2f', padding: '24px', fontSize: '2.8vh', fontWeight: 'bold' }}>
+            <div style={{ color: '#000c2f', padding: '24px', fontSize: '30px', fontWeight: 'bold' }}>
               Aucun départ prévu pour le moment.
             </div>
           </li>