Activation du scroll tactile fluide sur mobile et tablette pour les pages de guidage

public/index.html

@@ -17,13 +17,21 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Afficheurs Ferroviaires</title>
     <style>
-      html, body, #root {
+      html, body {
-        background-color: #000000;
+        background-color: #f3f6fb;
         margin: 0;
         padding: 0;
         width: 100%;
-        height: 100%;
+        min-height: 100%;
-        overflow: hidden;
+        overflow-x: hidden;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+      #root {
+        width: 100%;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
       }
       @font-face {
         font-family: 'Achemine';

src/App.js

@@ -250,9 +250,8 @@ function App() {
   return (
     <div className="sncf-voyageurs" style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
       <wcs-galactic app-name="Affichage Ferroviaire" version="1.0.0">
-
+        {source === 'supabase' ? (
-        <wcs-galactic-menu-item>
+          <wcs-galactic-menu-item>
-          {source === 'supabase' ? (
             <a
               href="/"
               onClick={(e) => { e.preventDefault(); navigate('/'); }}
@@ -261,14 +260,12 @@ function App() {
             >
               🌐 Passer en mode SNCF Live
             </a>
-          ) : (
+          </wcs-galactic-menu-item>
-              <a></a>
+        ) : null}
-          )}
-        </wcs-galactic-menu-item>
       </wcs-galactic>
 
       <header style={{ padding: 12, background: source === 'supabase' ? '#003366' : '#00439e', color: '#fff', transition: 'background 0.3s' }}>
-        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div style={{ maxWidth: 1000, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 8px' }}>
           <div>
             <h1 style={{ margin: 0, fontSize: 20 }}>
               {source === 'supabase' ? 'Affichage Ferroviaire — BDD Supabase (/ferrovia)' : 'Affichage Ferroviaire — SNCF GTFS / Temps Réel'}
@@ -281,8 +278,8 @@ function App() {
         </div>
       </header>
 
-      <main style={{ flex: 1, background: '#f3f6fb' }}>
+      <main style={{ flex: 1, background: '#f3f6fb', overflowY: 'visible', width: '100%' }}>
-        <div style={{ maxWidth: 1000, margin: '24px auto' }}>{content}</div>
+        <div style={{ maxWidth: 1000, margin: '16px auto', width: '100%' }}>{content}</div>
       </main>
 
       <wcs-footer>

src/styles/Launcher.css

@@ -21,19 +21,31 @@
   --sncf-shadow-hover: 0 8px 28px rgba(0, 34, 87, 0.14);
 }
 
-/* Conteneur principal responsive */
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  -webkit-overflow-scrolling: touch !important;
+}
+
+/* Conteneur principal responsive avec défilement fluide */
 .launcher-container {
   width: 100%;
   max-width: 980px;
   margin: 0 auto;
-  padding: 16px;
+  padding: 16px 16px 48px 16px;
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  overflow-y: visible;
 }
 
 @media (min-width: 768px) {
   .launcher-container {
-    padding: 24px 32px;
+    padding: 24px 32px 64px 32px;
   }
 }