feat(classiques): enforce uniform physical scroll speed across all marquees and match clock box design from img 1

src/components/MarqueeText.js

@@ -1,23 +1,42 @@
 import React, { useRef, useState, useEffect } from 'react';
 import './MarqueeText.css';
 
-const MarqueeText = ({ text, className, style, duration = '10s' }) => {
+const DEFAULT_SPEED = 50; // pixels per second for uniform, calm scrolling
+
+const MarqueeText = ({ text, className, style, speed = DEFAULT_SPEED, duration }) => {
   const containerRef = useRef(null);
   const textRef = useRef(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
-
-  const formattedDuration = typeof duration === 'number' ? `${duration}s` : duration;
+  const [computedDuration, setComputedDuration] = useState('20s');
 
   useEffect(() => {
-    const checkOverflow = () => {
+    const updateMarquee = () => {
       if (containerRef.current && textRef.current) {
-        setIsOverflowing(textRef.current.scrollWidth > containerRef.current.clientWidth);
+        const containerWidth = containerRef.current.clientWidth;
+        const textWidth = textRef.current.scrollWidth;
+        const overflowing = textWidth > containerWidth;
+        setIsOverflowing(overflowing);
+
+        if (overflowing) {
+          if (duration) {
+            setComputedDuration(typeof duration === 'number' ? `${duration}s` : duration);
+          } else {
+            const totalDistance = textWidth + containerWidth;
+            const seconds = totalDistance / speed;
+            setComputedDuration(`${seconds.toFixed(2)}s`);
+          }
+        }
       }
     };
-    checkOverflow();
-    window.addEventListener('resize', checkOverflow);
-    return () => window.removeEventListener('resize', checkOverflow);
-  }, [text]);
+
+    updateMarquee();
+    window.addEventListener('resize', updateMarquee);
+    const timer = setTimeout(updateMarquee, 100);
+    return () => {
+      window.removeEventListener('resize', updateMarquee);
+      clearTimeout(timer);
+    };
+  }, [text, speed, duration]);
 
   return (
     <div className={`marquee-container ${className || ''}`} ref={containerRef} style={{ ...style, overflow: 'hidden', whiteSpace: 'nowrap', width: '100%', flex: '1 1 0' }}>
@@ -26,7 +45,7 @@ const MarqueeText = ({ text, className, style, duration = '10s' }) => {
         ref={textRef} 
         style={{ 
           display: 'inline-block', 
-          animation: isOverflowing ? `marquee-scroll ${formattedDuration} linear infinite` : 'none',
+          animation: isOverflowing ? `marquee-scroll ${computedDuration} linear infinite` : 'none',
           paddingLeft: isOverflowing ? '100%' : '0',
           fontSize: 'inherit',
           fontWeight: 'inherit',

src/pages/afficheurs/classiques/ClassiquesArrivees.css

@@ -356,8 +356,8 @@
   justify-content: space-between;
   box-sizing: border-box;
   padding-left: 24px;
-  padding-right: 12px;
-  background: linear-gradient(180deg, #13571d 0%, #0a2d0f 100%) !important;
+  padding-right: 14px;
+  background: linear-gradient(180deg, #165b21 0%, #0a2d0f 100%) !important;
   position: relative;
   z-index: 25;
   border-top: 1.5px solid rgba(255, 255, 255, 0.18);
@@ -383,22 +383,22 @@
 
 .aff-classiques-arrivees__bottom-clock {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  border: 3.5px solid #ffffff;
+  border: 2.5px solid rgba(255, 255, 255, 0.85);
   border-radius: 6px;
-  padding: 4px 16px;
-  background: #0d3613;
+  padding: 6px 14px 4px 14px;
+  background: rgba(10, 42, 16, 0.45);
   font-family: "Achemine", sans-serif;
   flex-shrink: 0;
-  margin-right: 6px;
+  margin-right: 4px;
   box-sizing: border-box;
-  height: 76px;
-  gap: 12px;
+  height: 74px;
+  gap: 8px;
 }
 
 .aff-classiques-arrivees__bottom-clock-hm {
-  font-size: 54px;
+  font-size: 52px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 1.5px;
@@ -406,10 +406,11 @@
 }
 
 .aff-classiques-arrivees__bottom-clock-s {
-  font-size: 54px;
+  font-size: 34px;
   font-weight: 700;
   line-height: 1;
-  letter-spacing: 1.5px;
+  letter-spacing: 0.5px;
   color: var(--yellow) !important;
-  margin-top: 0;
+  margin-top: 1px;
+  margin-left: 2px;
 }

src/pages/afficheurs/classiques/ClassiquesArrivees.js

@@ -1314,7 +1314,7 @@ export default function ClassiquesArrivees(){
             <div className="aff-classiques-arrivees__sub-stops">
               <MarqueeText
                 className="aff-classiques-arrivees__sub-stops-marquee"
-                duration="38s"
+                speed={50}
                 text={
                   <span className="aff-classiques-arrivees__stops-chain">
                     {stopsList.map((stopName, sIdx) => (

src/pages/afficheurs/classiques/ClassiquesDeparts.css

@@ -356,8 +356,8 @@
   justify-content: space-between;
   box-sizing: border-box;
   padding-left: 24px;
-  padding-right: 12px;
-  background: linear-gradient(180deg, #07418a 0%, #00225e 100%) !important;
+  padding-right: 14px;
+  background: linear-gradient(180deg, #093c83 0%, #001f55 100%) !important;
   position: relative;
   z-index: 25;
   border-top: 1.5px solid rgba(255, 255, 255, 0.18);
@@ -383,22 +383,22 @@
 
 .aff-classiques-departs__bottom-clock {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
-  border: 3.5px solid #ffffff;
+  border: 2.5px solid rgba(255, 255, 255, 0.85);
   border-radius: 6px;
-  padding: 4px 16px;
-  background: #001e40;
+  padding: 6px 14px 4px 14px;
+  background: rgba(0, 24, 64, 0.45);
   font-family: "Achemine", sans-serif;
   flex-shrink: 0;
-  margin-right: 6px;
+  margin-right: 4px;
   box-sizing: border-box;
-  height: 76px;
-  gap: 12px;
+  height: 74px;
+  gap: 8px;
 }
 
 .aff-classiques-departs__bottom-clock-hm {
-  font-size: 54px;
+  font-size: 52px;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 1.5px;
@@ -406,10 +406,11 @@
 }
 
 .aff-classiques-departs__bottom-clock-s {
-  font-size: 54px;
+  font-size: 34px;
   font-weight: 700;
   line-height: 1;
-  letter-spacing: 1.5px;
+  letter-spacing: 0.5px;
   color: var(--yellow) !important;
-  margin-top: 0;
+  margin-top: 1px;
+  margin-left: 2px;
 }

src/pages/afficheurs/classiques/ClassiquesDeparts.js

@@ -1311,7 +1311,7 @@ export default function ClassiquesDeparts(){
             <div className="aff-classiques-departs__sub-stops">
               <MarqueeText
                 className="aff-classiques-departs__sub-stops-marquee"
-                duration="38s"
+                speed={50}
                 text={
                   <span className="aff-classiques-departs__stops-chain">
                     {stopsList.map((stopName, sIdx) => (