feat(classiques): support extended lines (1-3), bottom clock/info ticker (time=true), and dynamic SNCF Open Data logo resolution

src/pages/SelectAfficheur.js

@@ -25,6 +25,10 @@ export default function SelectAfficheur({ onBack, navigate }) {
     corresp: false
   });
 
+  // Options spécifiques pour les afficheurs Classiques
+  const [extendedLines, setExtendedLines] = useState(0); // 0, 1, 2, 3
+  const [showTime, setShowTime] = useState(false);
+
   const toggleAflPage = (key) => {
     setAflPages(prev => ({ ...prev, [key]: !prev[key] }));
   };
@@ -82,6 +86,13 @@ export default function SelectAfficheur({ onBack, navigate }) {
         if (activeKeys.length > 0) {
           url += `&pages=${activeKeys.join(',')}`;
         }
+      } else if (typeParam === 'classiques') {
+        if (extendedLines > 0) {
+          url += `&extended=${extendedLines}`;
+        }
+        if (showTime) {
+          url += `&time=true`;
+        }
       }
 
       navigate(url);
@@ -96,7 +107,18 @@ export default function SelectAfficheur({ onBack, navigate }) {
     }
     if (typeof navigate === 'function') {
       const kebab = gareParam ? String(gareParam).trim() : '';
-      navigate(`${prefix}/afficheurs/${modeParam}/${typeParam}/quais?gare=${encodeURIComponent(kebab)}&quai=${encodeURIComponent(quai)}`);
+      let url = `${prefix}/afficheurs/${modeParam}/${typeParam}/quais?gare=${encodeURIComponent(kebab)}&quai=${encodeURIComponent(quai)}`;
+
+      if (typeParam === 'classiques') {
+        if (extendedLines > 0) {
+          url += `&extended=${extendedLines}`;
+        }
+        if (showTime) {
+          url += `&time=true`;
+        }
+      }
+
+      navigate(url);
     }
   };
 
@@ -232,6 +254,68 @@ export default function SelectAfficheur({ onBack, navigate }) {
                   </div>
                 </div>
               )}
+
+              {typeParam === 'classiques' && (
+                <div className="launcher-checklist-box">
+                  <div className="launcher-checklist-header">
+                    <span className="launcher-checklist-title">
+                      Options d'affichage Classiques :
+                    </span>
+                  </div>
+
+                  {/* Choix du nombre de lignes étendues */}
+                  <div style={{ marginBottom: '14px' }}>
+                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 700, color: '#002257', marginBottom: '8px' }}>
+                      Lignes étendues (Dessertes défilantes) :
+                    </label>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '6px' }}>
+                      {[0, 1, 2, 3].map((num) => (
+                        <button
+                          key={num}
+                          type="button"
+                          onClick={() => setExtendedLines(num)}
+                          style={{
+                            padding: '8px 4px',
+                            borderRadius: '8px',
+                            border: extendedLines === num ? '2px solid #00439e' : '1px solid #c2dbfe',
+                            background: extendedLines === num ? '#00439e' : '#ffffff',
+                            color: extendedLines === num ? '#ffffff' : '#002257',
+                            fontWeight: 700,
+                            fontSize: '13px',
+                            cursor: 'pointer',
+                            transition: 'all 0.15s ease'
+                          }}
+                        >
+                          {num === 0 ? '0 (Standard)' : `${num} étendue${num > 1 ? 's' : ''}`}
+                        </button>
+                      ))}
+                    </div>
+                    <div style={{ fontSize: '12px', color: '#555', marginTop: '6px' }}>
+                      {extendedLines > 0
+                        ? `Les ${extendedLines} premier${extendedLines > 1 ? 's' : ''} train${extendedLines > 1 ? 's' : ''} s'afficheront sur 2 lignes réduites avec le défilement de toutes les gares.`
+                        : 'Affichage classique compact sans défilement de gares.'}
+                    </div>
+                  </div>
+
+                  {/* Option Afficher l'heure */}
+                  <div style={{ borderTop: '1px solid #e2ebf6', paddingTop: '10px' }}>
+                    <label className="launcher-checkbox-label" style={{ cursor: 'pointer' }}>
+                      <input
+                        type="checkbox"
+                        checked={showTime}
+                        onChange={(e) => setShowTime(e.target.checked)}
+                        className="launcher-checkbox"
+                      />
+                      <span>
+                        <strong>Afficher l'heure & informations</strong>
+                      </span>
+                    </label>
+                    <div style={{ fontSize: '12px', color: '#555', marginLeft: '28px', marginTop: '2px' }}>
+                      Réserve la 10e ligne pour l'horloge numérique [ HH MM SS ] et un bandeau d'information défilant (horaires sur 9 lignes max).
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
 
             <button