RELEASE V5.5.0 : Voici les modifications apportées :

-> Implémentation des afficheurs "Sécurité"; "Informations" et "Correspondances" pour les afficheurs AFL

FONCTIONNALITÉS EN COURS DE DÉVELOPPEMENT :

-> REFONTE DU DESIGN DES AFFICHEURS CLASSIQUES

src/pages/SelectAfficheur.js

@@ -16,6 +16,29 @@ export default function SelectAfficheur({ onBack, navigate }) {
   const [manualPlatform, setManualPlatform] = useState('');
   const [loading, setLoading] = useState(true);
 
+  // État des pages sélectionnées pour les afficheurs AFL
+  const [aflPages, setAflPages] = useState({
+    horaires: true,
+    infos: false,
+    securite1: false,
+    securite2: false,
+    corresp: false
+  });
+
+  const toggleAflPage = (key) => {
+    setAflPages(prev => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const selectAllAflPages = (all) => {
+    setAflPages({
+      horaires: true,
+      infos: all,
+      securite1: all,
+      securite2: all,
+      corresp: all
+    });
+  };
+
   // Decode and format station name for display
   const decodedGare = gareParam
     ? decodeURIComponent(String(gareParam).replace(/\+/g, ' ')).replace(/-/g, ' ')
@@ -49,7 +72,19 @@ export default function SelectAfficheur({ onBack, navigate }) {
   const handleGeneral = () => {
     if (typeof navigate === 'function') {
       const kebab = gareParam ? String(gareParam).trim() : '';
-      navigate(`${prefix}/afficheurs/${modeParam}/${typeParam}?gare=${encodeURIComponent(kebab)}`);
+      let url = `${prefix}/afficheurs/${modeParam}/${typeParam}?gare=${encodeURIComponent(kebab)}`;
+
+      if (typeParam === 'afl') {
+        const activeKeys = Object.entries(aflPages)
+          .filter(([_, active]) => active)
+          .map(([key]) => key);
+
+        if (activeKeys.length > 0) {
+          url += `&pages=${activeKeys.join(',')}`;
+        }
+      }
+
+      navigate(url);
     }
   };
 
@@ -65,9 +100,16 @@ export default function SelectAfficheur({ onBack, navigate }) {
     }
   };
 
+  const handleSinglePage = (pageKey) => {
+    if (typeof navigate === 'function') {
+      const kebab = gareParam ? String(gareParam).trim() : '';
+      navigate(`${prefix}/afficheurs/${modeParam}/${typeParam}?gare=${encodeURIComponent(kebab)}&page=${pageKey}`);
+    }
+  };
+
   return (
     <div style={{
-      maxWidth: '650px',
+      maxWidth: '780px',
       margin: '40px auto',
       padding: '32px',
       backgroundColor: '#ffffff',
@@ -102,7 +144,7 @@ export default function SelectAfficheur({ onBack, navigate }) {
         fontSize: '16px',
         lineHeight: 1.5
       }}>
-        Pour la gare de <strong>{decodedGare}</strong> en mode <strong>{modeParam === 'arrivees' ? 'Arrivées' : 'Départs'}</strong>.
+        Pour la gare de <strong>{decodedGare}</strong> en mode <strong>{modeParam === 'arrivees' ? 'Arrivées' : 'Départs'}</strong> (Style : <strong>{typeParam.toUpperCase()}</strong>).
       </p>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px', marginBottom: '32px' }}>
@@ -117,11 +159,112 @@ export default function SelectAfficheur({ onBack, navigate }) {
           alignItems: 'flex-start',
           background: '#fafbfc'
         }}>
-          <div>
+          <div style={{ width: '100%' }}>
             <h3 style={{ margin: '0 0 12px 0', color: '#00439e', fontSize: '20px' }}>Afficheur Général</h3>
-            <p style={{ margin: '0 0 20px 0', color: '#666', fontSize: '14px', lineHeight: 1.4 }}>
-              Affiche la liste complète de tous les trains programmés pour cette gare.
+            <p style={{ margin: '0 0 16px 0', color: '#666', fontSize: '14px', lineHeight: 1.4 }}>
+              Affiche la liste des trains programmés avec possibilité d'inclure les pages d'informations et services.
             </p>
+
+            {typeParam === 'afl' && (
+              <div style={{
+                background: '#ffffff',
+                border: '1px solid #d0e1fd',
+                borderRadius: '8px',
+                padding: '14px',
+                marginBottom: '20px'
+              }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
+                  <span style={{ fontSize: '13px', fontWeight: 700, color: '#002257' }}>
+                    Pages à inclure dans la rotation :
+                  </span>
+                  <div style={{ display: 'flex', gap: '6px' }}>
+                    <button
+                      type="button"
+                      onClick={() => selectAllAflPages(true)}
+                      style={{
+                        background: 'none',
+                        border: 'none',
+                        color: '#00439e',
+                        fontSize: '11px',
+                        fontWeight: 600,
+                        cursor: 'pointer',
+                        textDecoration: 'underline'
+                      }}
+                    >
+                      Tout cocher
+                    </button>
+                    <span style={{ color: '#ccc', fontSize: '11px' }}>|</span>
+                    <button
+                      type="button"
+                      onClick={() => selectAllAflPages(false)}
+                      style={{
+                        background: 'none',
+                        border: 'none',
+                        color: '#666',
+                        fontSize: '11px',
+                        fontWeight: 600,
+                        cursor: 'pointer',
+                        textDecoration: 'underline'
+                      }}
+                    >
+                      Horaires seuls
+                    </button>
+                  </div>
+                </div>
+
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: '#222', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={aflPages.horaires}
+                      onChange={() => toggleAflPage('horaires')}
+                      style={{ width: '16px', height: '16px', accentColor: '#00439e' }}
+                    />
+                    <span><strong>Page 1 & 2</strong> (Horaires des trains)</span>
+                  </label>
+
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: '#222', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={aflPages.infos}
+                      onChange={() => toggleAflPage('infos')}
+                      style={{ width: '16px', height: '16px', accentColor: '#00439e' }}
+                    />
+                    <span><strong>Informations</strong> (Trafic & Travaux)</span>
+                  </label>
+
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: '#222', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={aflPages.securite1}
+                      onChange={() => toggleAflPage('securite1')}
+                      style={{ width: '16px', height: '16px', accentColor: '#00439e' }}
+                    />
+                    <span><strong>Sécurité 1</strong> (Bagages / Objets délaissés)</span>
+                  </label>
+
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: '#222', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={aflPages.securite2}
+                      onChange={() => toggleAflPage('securite2')}
+                      style={{ width: '16px', height: '16px', accentColor: '#00439e' }}
+                    />
+                    <span><strong>Sécurité 2</strong> (Vigipirate / Alerte 3117)</span>
+                  </label>
+
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '13px', color: '#222', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={aflPages.corresp}
+                      onChange={() => toggleAflPage('corresp')}
+                      style={{ width: '16px', height: '16px', accentColor: '#00439e' }}
+                    />
+                    <span><strong>Correspondances</strong> (Transports urbains & bus)</span>
+                  </label>
+                </div>
+              </div>
+            )}
           </div>
           <button
             onClick={handleGeneral}
@@ -171,7 +314,7 @@ export default function SelectAfficheur({ onBack, navigate }) {
                       value={selectedPlatform}
                       onChange={(e) => {
                         setSelectedPlatform(e.target.value);
-                        setManualPlatform(''); // Reset manual entry on selection
+                        setManualPlatform('');
                       }}
                       style={{
                         width: '100%',
@@ -234,6 +377,56 @@ export default function SelectAfficheur({ onBack, navigate }) {
         </div>
       </div>
 
+      {typeParam === 'afl' && (
+        <div style={{
+          borderTop: '1px solid #eef2f8',
+          paddingTop: '20px',
+          marginBottom: '20px'
+        }}>
+          <h4 style={{ margin: '0 0 10px 0', fontSize: '14px', color: '#555', fontWeight: 600 }}>
+            Accès direct à une page AFL spécifique (fixe) :
+          </h4>
+          <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+            <button
+              onClick={() => handleSinglePage('1')}
+              style={{ padding: '6px 12px', fontSize: '12px', borderRadius: '4px', border: '1px solid #ccc', background: '#fff', cursor: 'pointer' }}
+            >
+              Horaires (Page 1)
+            </button>
+            <button
+              onClick={() => handleSinglePage('2')}
+              style={{ padding: '6px 12px', fontSize: '12px', borderRadius: '4px', border: '1px solid #ccc', background: '#fff', cursor: 'pointer' }}
+            >
+              Horaires (Page 2)
+            </button>
+            <button
+              onClick={() => handleSinglePage('infos')}
+              style={{ padding: '6px 12px', fontSize: '12px', borderRadius: '4px', border: '1px solid #ccc', background: '#fff', cursor: 'pointer' }}
+            >
+              Informations
+            </button>
+            <button
+              onClick={() => handleSinglePage('securite1')}
+              style={{ padding: '6px 12px', fontSize: '12px', borderRadius: '4px', border: '1px solid #ccc', background: '#fff', cursor: 'pointer' }}
+            >
+              Sécurité 1
+            </button>
+            <button
+              onClick={() => handleSinglePage('securite2')}
+              style={{ padding: '6px 12px', fontSize: '12px', borderRadius: '4px', border: '1px solid #ccc', background: '#fff', cursor: 'pointer' }}
+            >
+              Sécurité 2
+            </button>
+            <button
+              onClick={() => handleSinglePage('corresp')}
+              style={{ padding: '6px 12px', fontSize: '12px', borderRadius: '4px', border: '1px solid #ccc', background: '#fff', cursor: 'pointer' }}
+            >
+              Correspondances
+            </button>
+          </div>
+        </div>
+      )}
+
       <div style={{
         borderTop: '1px solid #eeeeee',
         paddingTop: '20px',
@@ -255,3 +448,4 @@ export default function SelectAfficheur({ onBack, navigate }) {
     </div>
   );
 }
+