Désactivation des annonces sonores et refonte responsive mobile/tablette des pages de guidage WCS

src/App.js

@@ -72,57 +72,125 @@ function App() {
   const prefix = source === 'supabase' ? '/ferrovia' : '';
   const cleanRoute = (route.replace(/^\/ferrovia/, '') || '/');
 
-  // Composant Home explicite (panels cliquables)
+  // Composant Home moderne & responsive pour Mobile, Tablette et Desktop
   function Home({ navigate, prefix, source }) {
-    const panelStyle = {
-      width: '42%',
-      cursor: 'pointer',
-      padding: 24,
-      borderRadius: 10,
-      boxShadow: '0 4px 12px rgba(0,0,0,0.08)',
-      background: '#fff',
-      textAlign: 'center',
-      border: '1px solid #e0e8f6',
-      transition: 'transform 0.15s ease'
-    };
+    const POPULAR_HOME_GARES = [
+      'Paris-Gare-de-Lyon',
+      'Besançon-Viotte',
+      'Dijon-Ville',
+      'Lyon-Part-Dieu',
+      'Marseille-Saint-Charles',
+      'Lille-Flandres',
+      'Strasbourg',
+      'Bordeaux-Saint-Jean'
+    ];
 
     return (
-      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '32px 24px', alignItems: 'center', background: '#e9f0ff', borderRadius: '12px' }}>
-        <div style={{ width: '100%', textAlign: 'center', marginBottom: 20 }}>
-          <div style={{ display: 'inline-block', padding: '4px 12px', borderRadius: '20px', background: source === 'supabase' ? '#e6f4ea' : '#e8f0fe', color: source === 'supabase' ? '#137333' : '#1a73e8', fontWeight: 600, fontSize: '13px', marginBottom: '8px' }}>
-            {source === 'supabase' ? 'Mode Base de Données (Ferrovia)' : 'Mode Officiel SNCF (GTFS / Temps Réel)'}
-          </div>
-          <h1 style={{ margin: '8px 0', fontSize: 28, color: '#002257' }}>Accueil</h1>
-          <p style={{ margin: '4px 0 16px', color: '#555' }}>
-            {source === 'supabase'
-              ? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
-              : "Consultez les afficheurs connectés aux flux réels GTFS et Open Data SNCF."}
-          </p>
-        </div>
-
-        <div style={{ display: 'flex', justifyContent: 'space-around', width: '100%', maxWidth: '800px' }}>
-          <div
-            role="button"
-            tabIndex={0}
-            onClick={() => { try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {} navigate(`${prefix}/departs`); }}
-            onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ' ? (function(){ try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {} navigate(`${prefix}/departs`); })() : null)}
-            style={panelStyle}
-            aria-label="Accéder aux départs"
-          >
-            <h2 style={{ color: '#00439e', marginTop: 0 }}>🚆 Départs</h2>
-            <p style={{ color: '#666', fontSize: '14px' }}>Consultez les prochains départs d'une gare. Choisissez une gare et le style d'afficheur.</p>
+      <div className="launcher-container">
+        {/* Carte de bienvenue */}
+        <div className="launcher-card">
+          <div className="launcher-header">
+            <div>
+              <h1 className="launcher-title">🚅 Téléaffichage Ferroviaire SNCF</h1>
+              <p className="launcher-subtitle">
+                {source === 'supabase'
+                  ? "Consultez les afficheurs basés sur les données de votre BDD Supabase."
+                  : "Simulateur d'écrans de gare officiels connectés en direct aux flux GTFS & Open Data SNCF."}
+              </p>
+            </div>
+            <span className={`launcher-badge ${source === 'supabase' ? 'launcher-badge--supabase' : ''}`}>
+              {source === 'supabase' ? '🗄️ Mode Supabase' : '🌐 Mode SNCF Live'}
+            </span>
           </div>
 
-          <div
-            role="button"
-            tabIndex={0}
-            onClick={() => { try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {} navigate(`${prefix}/arrivees`); }}
-            onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ' ? (function(){ try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {} navigate(`${prefix}/arrivees`); })() : null)}
-            style={panelStyle}
-            aria-label="Accéder aux arrivées"
-          >
-            <h2 style={{ color: '#00439e', marginTop: 0 }}>🏁 Arrivées</h2>
-            <p style={{ color: '#666', fontSize: '14px' }}>Consultez les prochaines arrivées d'une gare en temps réel.</p>
+          {/* Cartes principales : Départs / Arrivées */}
+          <div className="launcher-grid launcher-grid--2col">
+            <div
+              className="launcher-select-card"
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
+                navigate(`${prefix}/departs`);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
+                  navigate(`${prefix}/departs`);
+                }
+              }}
+            >
+              <div>
+                <span className="launcher-card-icon">🚆</span>
+                <span className="launcher-card-tag launcher-card-tag--modern">Départs</span>
+                <h2 className="launcher-card-title">Prochains Départs</h2>
+                <p className="launcher-card-desc">
+                  Consultez les trains au départ, leurs voies, retards et dessertes complètes.
+                </p>
+              </div>
+              <div style={{ marginTop: 12 }}>
+                <span className="launcher-btn launcher-btn--primary">
+                  Consulter les Départs ›
+                </span>
+              </div>
+            </div>
+
+            <div
+              className="launcher-select-card"
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
+                navigate(`${prefix}/arrivees`);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  try { sessionMemory.set('afficheurMode', 'arrivees'); } catch (e) {}
+                  navigate(`${prefix}/arrivees`);
+                }
+              }}
+            >
+              <div>
+                <span className="launcher-card-icon">🏁</span>
+                <span className="launcher-card-tag launcher-card-tag--modern">Arrivées</span>
+                <h2 className="launcher-card-title">Prochaines Arrivées</h2>
+                <p className="launcher-card-desc">
+                  Suivez en direct les trains attendus en gare, provenances et voies assignées.
+                </p>
+              </div>
+              <div style={{ marginTop: 12 }}>
+                <span className="launcher-btn launcher-btn--secondary">
+                  Consulter les Arrivées ›
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Raccourcis rapides vers les gares */}
+          <div className="launcher-chips-container" style={{ marginTop: '8px' }}>
+            <span className="launcher-chips-label">Accès direct par gare :</span>
+            <div className="launcher-chips-list">
+              {POPULAR_HOME_GARES.map((gName) => (
+                <button
+                  key={gName}
+                  type="button"
+                  className="launcher-chip"
+                  onClick={() => {
+                    try { sessionMemory.set('afficheurMode', 'departs'); } catch (e) {}
+                    navigate(`${prefix}/afficheurs/${encodeURIComponent(gName)}?mode=departs`);
+                  }}
+                >
+                  📍 {gName.replace(/-/g, ' ')}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Présentation des types d'afficheurs */}
+          <div style={{ borderTop: '1px solid #e2ebf6', paddingTop: '20px', marginTop: '20px' }}>
+            <div style={{ fontSize: '13px', color: '#5f6368', lineHeight: 1.6 }}>
+              ✨ <strong>Formats disponibles :</strong> Afficheurs Fluides & Lumineux (AFL), Téléaffichage historique (Classiques), Écrans Vidéo Voyageurs (EVA) et Écrans par Quai / Voie.
+            </div>
           </div>
         </div>
       </div>