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

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>
+  );
+}