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

src/pages/Displays.js

@@ -8,10 +8,42 @@ export default function Displays({ onBack, navigate }) {
   const prefix = source === 'supabase' ? '/ferrovia' : '';
 
   const types = [
-    { id: 'classiques', label: 'Classiques' },
-    { id: 'eva', label: 'EVA' },
-    { id: 'afl', label: 'AFL' },
-    { id: 'transilien', label: 'TRANSILIEN' }
+    {
+      id: 'afl',
+      label: 'AFL',
+      sublabel: 'Afficheurs Fluides & Lumineux',
+      tag: 'Recommandé / Moderne',
+      tagType: 'modern',
+      icon: '🖥️',
+      desc: 'Écrans modernes haute lisibilité avec cycles Départs / Arrivées, Informations trafic, Sécurité et Correspondances.'
+    },
+    {
+      id: 'classiques',
+      label: 'Classiques',
+      sublabel: 'Téléaffichage Historique',
+      tag: 'Rétro / Vintage',
+      tagType: 'retro',
+      icon: '📺',
+      desc: 'Reproduction des moniteurs cathodiques et écrans à palettes historiques des gares SNCF.'
+    },
+    {
+      id: 'eva',
+      label: 'EVA',
+      sublabel: 'Écrans Vidéo Voyageurs',
+      tag: 'Gares Connectées',
+      tagType: 'modern',
+      icon: '📱',
+      desc: 'Écrans d\'information enrichis avec multimédia, infogare et dessertes complètes.'
+    },
+    {
+      id: 'transilien',
+      label: 'Transilien',
+      sublabel: 'Réseau Île-de-France',
+      tag: 'Régional IDF',
+      tagType: 'retro',
+      icon: '🚊',
+      desc: 'Afficheurs dédiés aux lignes RER et Transilien SNCF (lignes C, D, E, H, J, L, N, P, R, U).'
+    }
   ];
 
   // Nettoyage du chemin pour extraire la gare même avec /ferrovia
@@ -49,68 +81,98 @@ export default function Displays({ onBack, navigate }) {
   }
   if (!mode) mode = 'departs';
 
+  const formattedGareName = gare ? gare.replace(/-/g, ' ') : 'Non sélectionnée';
+
   return (
-    <div style={{ padding: 20 }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
-        <h1 style={{ margin: 0 }}>Choisissez un type d'afficheur</h1>
-        <span style={{
-          fontSize: '12px',
-          fontWeight: '600',
-          padding: '4px 10px',
-          borderRadius: '12px',
-          background: source === 'supabase' ? '#e6f4ea' : '#e8f0fe',
-          color: source === 'supabase' ? '#137333' : '#1a73e8'
-        }}>
-          {source === 'supabase' ? '🗄️ BDD Ferrovia' : '🌐 SNCF (GTFS)'}
-        </span>
+    <div className="launcher-container">
+      {/* Stepper */}
+      <div className="launcher-stepper">
+        <div className="launcher-step launcher-step--completed">
+          <span className="launcher-step-num">✓</span>
+          <span>{formattedGareName}</span>
+        </div>
+        <span className="launcher-step-separator">›</span>
+        <div className="launcher-step launcher-step--active">
+          <span className="launcher-step-num">2</span>
+          <span>Type d'afficheur</span>
+        </div>
+        <span className="launcher-step-separator">›</span>
+        <div className="launcher-step">
+          <span className="launcher-step-num">3</span>
+          <span>Options & Affichage</span>
+        </div>
       </div>
 
-      {gare && <p>Gare sélectionnée : <strong>{gare}</strong></p>}
-      <p>Mode sélectionné : <strong>{mode === 'arrivees' ? 'Arrivées' : 'Départs'}</strong></p>
-
-      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 16 }}>
-        {types.map((t) => (
-          <div
-            key={t.id}
-            role="button"
-            tabIndex={0}
-            style={{ width: 220, padding: 16, borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.08)', background: '#fff', cursor: 'pointer' }}
-            onClick={() => {
-              if (typeof navigate === 'function') {
-                const kebab = gare ? String(gare).trim().replace(/\s+/g, '-').replace(/\//g, '/') : '';
-                navigate(`${prefix}/select-afficheur?gare=${encodeURIComponent(kebab)}&mode=${mode}&type=${t.id}`);
-                return;
-              }
-              alert(`${t.label} pour ${gare || '—'}`);
-            }}
-          >
-            <h3 style={{ margin: '0 0 8px' }}>{t.label}</h3>
-            <p style={{ margin: 0, color: '#555' }}>Afficher le style {t.label} pour la gare {gare || ''}.</p>
+      <div className="launcher-card">
+        {/* Header */}
+        <div className="launcher-header">
+          <div>
+            <h1 className="launcher-title">Sélectionnez le style d'afficheur</h1>
+            <p className="launcher-subtitle">
+              Gare : <strong style={{ color: '#002257' }}>{formattedGareName}</strong> • Mode : <strong style={{ color: '#00439e' }}>{mode === 'arrivees' ? '🏁 Arrivées' : '🚆 Départs'}</strong>
+            </p>
           </div>
-        ))}
-      </div>
+          <span className={`launcher-badge ${source === 'supabase' ? 'launcher-badge--supabase' : ''}`}>
+            {source === 'supabase' ? '🗄️ BDD Ferrovia' : '🌐 SNCF GTFS'}
+          </span>
+        </div>
 
-      <div style={{ marginTop: 24 }}>
-        <WcsButton
-          mode="plain"
-          className="wcs-primary"
-          onClick={() => {
-            try {
+        {/* Grille de sélection tactile des styles d'afficheurs */}
+        <div className="launcher-grid launcher-grid--4col">
+          {types.map((t) => (
+            <div
+              key={t.id}
+              className="launcher-select-card"
+              role="button"
+              tabIndex={0}
+              onClick={() => {
+                if (typeof navigate === 'function') {
+                  const kebab = gare ? String(gare).trim().replace(/\s+/g, '-').replace(/\//g, '/') : '';
+                  navigate(`${prefix}/select-afficheur?gare=${encodeURIComponent(kebab)}&mode=${mode}&type=${t.id}`);
+                }
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  const kebab = gare ? String(gare).trim().replace(/\s+/g, '-').replace(/\//g, '/') : '';
+                  navigate(`${prefix}/select-afficheur?gare=${encodeURIComponent(kebab)}&mode=${mode}&type=${t.id}`);
+                }
+              }}
+            >
+              <div>
+                <span className="launcher-card-icon">{t.icon}</span>
+                <span className={`launcher-card-tag ${t.tagType === 'retro' ? 'launcher-card-tag--retro' : 'launcher-card-tag--modern'}`}>
+                  {t.tag}
+                </span>
+                <h2 className="launcher-card-title">{t.label}</h2>
+                <div style={{ fontSize: '13px', fontWeight: 600, color: '#00439e', marginBottom: '8px' }}>{t.sublabel}</div>
+                <p className="launcher-card-desc">{t.desc}</p>
+              </div>
+
+              <div style={{ marginTop: 12 }}>
+                <span className="launcher-btn launcher-btn--secondary" style={{ padding: '8px 12px', fontSize: '14px' }}>
+                  Choisir ce style ›
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Navigation retour */}
+        <div className="launcher-footer-nav">
+          <WcsButton
+            mode="plain"
+            onClick={() => {
               if (typeof onBack === 'function') {
                 onBack();
-                return;
+              } else if (navigate) {
+                navigate(`${prefix}/${mode}`);
               }
-            } catch (e) {}
-
-            if (typeof window !== 'undefined' && window.history && window.history.length > 1) {
-              window.history.back();
-            } else {
-              window.location.href = prefix || '/';
-            }
-          }}
-          label="Retour"
-        />
+            }}
+            label="← Changer de gare"
+          />
+        </div>
       </div>
     </div>
   );
 }
+