diff --git a/css/parallax.css b/css/parallax.css
index 9c3bdb3..9bdd3dd 100644
--- a/css/parallax.css
+++ b/css/parallax.css
@@ -1,7 +1,7 @@
 /* =========================================================================
    PARALLAX INTRO — MVA Global Fret
-   Page unique, fixe (pas de scroll). Vidéo Terre depuis l'espace + ligne rouge
-   Paris↔Antananarivo + bouton centré. Bouge à la souris.
+   Page unique, fixe (pas de scroll). Vidéo Terre rotative + ligne rouge 3D
+   Paris ↔ Antananarivo (suit la rotation du globe) + bouton centré.
    ========================================================================= */
 
 :root {
@@ -11,8 +11,6 @@
   --gold-light: #e0c98a;
   --red: #ff2a3d;
   --white: #fff;
-  --mx: 0;
-  --my: 0;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -92,54 +90,37 @@ html, body {
   overflow: hidden;
 }
 
+/* Video et SVG partagent EXACTEMENT le même cadrage object-fit:cover.
+   C'est ce qui garantit que la ligne 3D reste alignée avec la Terre. */
 .layer {
   position: absolute;
-  inset: -10% -10%;
+  inset: 0;
+  width: 100%;
+  height: 100%;
   pointer-events: none;
-  will-change: transform;
 }
 
-/* ──────────────────────────────────────────────────────────────────────────
-   COUCHE 1 — VIDÉO Terre depuis l'espace (Pexels 854275, libre)
-   Bouge le PLUS à la souris (effet de profondeur).
-   ────────────────────────────────────────────────────────────────────────── */
 .layer-video {
-  width: 120%;
-  height: 120%;
   object-fit: cover;
   object-position: center;
-  filter: brightness(0.85) saturate(1.1) hue-rotate(-10deg);
-  transform: translate(calc(var(--mx) * -45px), calc(var(--my) * -45px)) scale(1.05);
 }
 
-/* ──────────────────────────────────────────────────────────────────────────
-   COUCHE 2 — Voile bleu nuit (palette MVA)
-   ────────────────────────────────────────────────────────────────────────── */
 .layer-tint {
   background:
-    radial-gradient(ellipse at center, rgba(20, 20, 50, 0.35) 0%, rgba(5, 5, 24, 0.85) 100%),
-    linear-gradient(180deg, rgba(10, 10, 30, 0.55) 0%, rgba(5, 5, 24, 0.7) 100%);
-  inset: 0;
+    radial-gradient(ellipse at center, transparent 0%, rgba(5, 5, 24, 0.55) 100%),
+    linear-gradient(180deg, rgba(5, 5, 24, 0.25) 0%, rgba(5, 5, 24, 0.5) 100%);
 }
 
-/* ──────────────────────────────────────────────────────────────────────────
-   COUCHE 4 — Route Paris ↔ Antananarivo (ligne rouge fine)
-   Bouge légèrement (entre vidéo et bouton), donne une 3ème profondeur.
-   ────────────────────────────────────────────────────────────────────────── */
 .layer-route {
-  inset: 0;
-  transform: translate(calc(var(--mx) * -12px), calc(var(--my) * -12px));
+  display: block;
 }
-.layer-route svg { width: 100%; height: 100%; display: block; }
 
-/* ──────────────────────────────────────────────────────────────────────────
-   BOUTON CTA centré — "Accéder au site"
-   Bouge en sens INVERSE des couches → effet de tilt.
-   ────────────────────────────────────────────────────────────────────────── */
+/* ── BOUTON CTA centré ──────────────────────────────────────────────────── */
 .cta-btn {
   position: absolute;
   top: 50%;
   left: 50%;
+  transform: translate(-50%, -50%);
   z-index: 10;
   display: inline-flex;
   align-items: center;
@@ -159,22 +140,18 @@ html, body {
     0 20px 60px rgba(197, 165, 90, 0.55),
     0 0 0 0 rgba(197, 165, 90, 0.4),
     inset 0 1px 0 rgba(255, 255, 255, 0.45);
-  transition: box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
-  /* Bouge légèrement en sens opposé des couches arrière (effet 3D) */
-  transform: translate(
-    calc(-50% + var(--mx) * 8px),
-    calc(-50% + var(--my) * 8px)
-  );
+  transition: box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
+              transform   0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .cta-btn:hover {
+  transform: translate(-50%, -50%) scale(1.04);
   box-shadow:
     0 28px 75px rgba(197, 165, 90, 0.7),
     0 0 0 12px rgba(197, 165, 90, 0.12),
     inset 0 1px 0 rgba(255, 255, 255, 0.55);
 }
 
-/* Effet shine au hover */
 .cta-btn-shine {
   position: absolute;
   top: 0; left: -120%;
@@ -192,7 +169,6 @@ html, body {
 }
 .cta-btn:hover i { transform: translateX(8px); }
 
-/* Pulse continu autour du bouton */
 .cta-btn::after {
   content: '';
   position: absolute;
@@ -203,8 +179,8 @@ html, body {
   pointer-events: none;
 }
 @keyframes ctaPulse {
-  0%   { transform: scale(1); opacity: 0.7; }
-  100% { transform: scale(1.18); opacity: 0; }
+  0%   { transform: scale(1);    opacity: 0.7; }
+  100% { transform: scale(1.18); opacity: 0;   }
 }
 
 /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@@ -222,5 +198,4 @@ html, body {
 
 @media (prefers-reduced-motion: reduce) {
   .cta-btn::after { animation: none; }
-  .layer-video, .layer-route, .cta-btn { transition: none; }
 }
diff --git a/index.html b/index.html
index 36eaf46..c4e7ccd 100644
--- a/index.html
+++ b/index.html
@@ -28,73 +28,50 @@
 
   <main class="stage">
 
-    <!-- Couche 1 : vidéo Terre depuis l'espace (parallaxe la plus marquée) -->
-    <video class="layer layer-video"
+    <video class="layer layer-video" id="earthVideo"
            autoplay loop muted playsinline preload="auto"
-           poster="https://images.pexels.com/videos/854275/free-video-854275.jpg">
-      <source src="https://videos.pexels.com/video-files/854275/854275-sd_960_540_30fps.mp4" type="video/mp4">
+           poster="videos/earth-poster.jpg">
+      <source src="videos/earth-rotation.mp4" type="video/mp4">
     </video>
 
-    <!-- Couche 2 : voile bleu pour cohérence palette + lisibilité -->
     <div class="layer layer-tint"></div>
 
-    <!-- Couche 4 : route Paris ↔ Antananarivo (ligne rouge brillante + pulse) -->
-    <div class="layer layer-route">
-      <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <filter id="redGlow" x="-50%" y="-50%" width="200%" height="200%">
-            <feGaussianBlur stdDeviation="5" result="blur"/>
-            <feMerge>
-              <feMergeNode in="blur"/>
-              <feMergeNode in="SourceGraphic"/>
-            </feMerge>
-          </filter>
-          <linearGradient id="redLine" x1="0%" y1="0%" x2="100%" y2="100%">
-            <stop offset="0%" stop-color="#ff5b6e" stop-opacity="0.55"/>
-            <stop offset="50%" stop-color="#ff2a3d" stop-opacity="1"/>
-            <stop offset="100%" stop-color="#ff5b6e" stop-opacity="0.55"/>
-          </linearGradient>
-        </defs>
+    <svg class="layer layer-route" id="routeSvg"
+         viewBox="0 0 1280 720" preserveAspectRatio="xMidYMid slice"
+         xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <filter id="redGlow" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="6" result="blur"/>
+          <feMerge>
+            <feMergeNode in="blur"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+        <linearGradient id="redLine" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#ff5b6e" stop-opacity="0.7"/>
+          <stop offset="50%" stop-color="#ff2a3d" stop-opacity="1"/>
+          <stop offset="100%" stop-color="#ff5b6e" stop-opacity="0.7"/>
+        </linearGradient>
+      </defs>
 
-        <!-- Halo flou autour de la ligne -->
-        <path d="M 430 270 Q 620 90 910 600"
-              stroke="#ff2a3d" stroke-width="10" fill="none"
-              opacity="0.25" filter="url(#redGlow)"/>
+      <g id="routeGroup" opacity="0">
+        <path id="routeHalo"  d="" stroke="#ff2a3d"     stroke-width="9" fill="none" opacity="0.3" filter="url(#redGlow)"/>
+        <path id="routeLine"  d="" stroke="url(#redLine)" stroke-width="2" fill="none" stroke-linecap="round" filter="url(#redGlow)"/>
+        <circle id="pulseDot" r="4" fill="#fff" filter="url(#redGlow)"/>
 
-        <!-- Ligne fine principale -->
-        <path id="routePath" d="M 430 270 Q 620 90 910 600"
-              stroke="url(#redLine)" stroke-width="1.5" fill="none"
-              stroke-linecap="round"/>
-
-        <!-- Pulse qui voyage de Paris vers Tana -->
-        <circle r="5" fill="#fff" filter="url(#redGlow)">
-          <animateMotion dur="3.6s" repeatCount="indefinite">
-            <mpath href="#routePath"/>
-          </animateMotion>
-          <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="3.6s" repeatCount="indefinite"/>
-        </circle>
-        <circle r="11" fill="#ff2a3d" opacity="0.6" filter="url(#redGlow)">
-          <animateMotion dur="3.6s" repeatCount="indefinite">
-            <mpath href="#routePath"/>
-          </animateMotion>
-          <animate attributeName="opacity" values="0;0.6;0.6;0" keyTimes="0;0.1;0.9;1" dur="3.6s" repeatCount="indefinite"/>
-        </circle>
-
-        <!-- Points fixes Paris et Antananarivo -->
-        <g transform="translate(430 270)">
-          <circle r="14" fill="#ff2a3d" opacity="0.18"/>
-          <circle r="6" fill="#ff2a3d" opacity="0.45" filter="url(#redGlow)"/>
-          <circle r="3" fill="#fff"/>
+        <g id="pinParis">
+          <circle r="10" fill="#ff2a3d" opacity="0.18"/>
+          <circle r="5"  fill="#ff2a3d" opacity="0.55" filter="url(#redGlow)"/>
+          <circle r="2.5" fill="#fff"/>
         </g>
-        <g transform="translate(910 600)">
-          <circle r="14" fill="#ff2a3d" opacity="0.18"/>
-          <circle r="6" fill="#ff2a3d" opacity="0.45" filter="url(#redGlow)"/>
-          <circle r="3" fill="#fff"/>
+        <g id="pinTana">
+          <circle r="10" fill="#ff2a3d" opacity="0.18"/>
+          <circle r="5"  fill="#ff2a3d" opacity="0.55" filter="url(#redGlow)"/>
+          <circle r="2.5" fill="#fff"/>
         </g>
-      </svg>
-    </div>
+      </g>
+    </svg>
 
-    <!-- Bouton centré : juste "Accéder au site" -->
     <a href="accueil.html" class="cta-btn">
       <span class="cta-btn-shine"></span>
       <span data-i18n="intro.ctaBtn">Accéder au site</span>
@@ -105,7 +82,7 @@
 
   <script src="js/translations.js"></script>
   <script>
-    // ── i18n minimal ─────────────────────────────────────────────────────────
+    /* i18n minimal ------------------------------------------------------- */
     (function () {
       const lang = localStorage.getItem('mva-lang') || 'fr';
       applyLang(lang);
@@ -129,31 +106,144 @@
       }
     })();
 
-    // ── Mouse parallaxe avec easing ──────────────────────────────────────────
+    /* Ligne rouge 3D synchronisée à la rotation de la Terre --------------
+       Calibration empirique sur la vidéo earth-rotation.mp4 :
+         - Centre de la Terre dans le frame 1280×720 : (640, 360)
+         - Rayon visible              : 340 px
+         - Longitude centrale à t=0   : 140°E
+         - Vitesse de rotation        : -5.75°/s (apparent)
+       La SVG utilise viewBox 1280×720 avec preserveAspectRatio="xMidYMid slice",
+       même comportement que le video object-fit:cover → alignement parfait.
+    -------------------------------------------------------------------- */
     (function () {
-      const root = document.documentElement;
-      let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
-      const ease = 0.06;
+      const EARTH_CX  = 640;
+      const EARTH_CY  = 360;
+      const EARTH_R   = 340;
+      const LON0      = 140;     // central longitude visible à t=0
+      const ROT_RATE  = -5.75;   // °/s (négatif = view's central decreases)
 
-      function loop() {
-        currentX += (targetX - currentX) * ease;
-        currentY += (targetY - currentY) * ease;
-        root.style.setProperty('--mx', currentX.toFixed(4));
-        root.style.setProperty('--my', currentY.toFixed(4));
-        requestAnimationFrame(loop);
+      const PARIS = { lat: 48.85, lon:  2.35 };
+      const TANA  = { lat: -18.9, lon: 47.5 };
+
+      const video      = document.getElementById('earthVideo');
+      const routeGroup = document.getElementById('routeGroup');
+      const halo       = document.getElementById('routeHalo');
+      const line       = document.getElementById('routeLine');
+      const pulseDot   = document.getElementById('pulseDot');
+      const pinParis   = document.getElementById('pinParis');
+      const pinTana    = document.getElementById('pinTana');
+
+      const DEG = Math.PI / 180;
+
+      // 3D unit-sphere vector (y axis = north pole, rotation around y)
+      function toCart(latDeg, lonDeg) {
+        const la = latDeg * DEG, lo = lonDeg * DEG;
+        return [Math.cos(la) * Math.sin(lo),
+                Math.sin(la),
+                Math.cos(la) * Math.cos(lo)];
+      }
+      function rotateY(v, angDeg) {
+        const a = angDeg * DEG, c = Math.cos(a), s = Math.sin(a);
+        return [v[0]*c + v[2]*s, v[1], -v[0]*s + v[2]*c];
+      }
+      function project(v) {
+        return {
+          x: EARTH_CX + v[0] * EARTH_R,
+          y: EARTH_CY - v[1] * EARTH_R,
+          z: v[2]                          // > 0 = front side
+        };
+      }
+      // Slerp on great circle
+      function slerp(a, b, t) {
+        const dot = Math.max(-1, Math.min(1, a[0]*b[0] + a[1]*b[1] + a[2]*b[2]));
+        const omega = Math.acos(dot);
+        if (omega < 1e-6) return [a[0], a[1], a[2]];
+        const s = Math.sin(omega);
+        const c1 = Math.sin((1 - t) * omega) / s;
+        const c2 = Math.sin(t * omega) / s;
+        return [a[0]*c1 + b[0]*c2, a[1]*c1 + b[1]*c2, a[2]*c1 + b[2]*c2];
       }
-      loop();
 
-      window.addEventListener('mousemove', (e) => {
-        targetX = (e.clientX / window.innerWidth - 0.5) * 2;
-        targetY = (e.clientY / window.innerHeight - 0.5) * 2;
-      }, { passive: true });
+      const parisVec = toCart(PARIS.lat, PARIS.lon);
+      const tanaVec  = toCart(TANA.lat,  TANA.lon);
 
-      window.addEventListener('deviceorientation', (e) => {
-        if (e.gamma == null || e.beta == null) return;
-        targetX = Math.max(-1, Math.min(1, e.gamma / 30));
-        targetY = Math.max(-1, Math.min(1, (e.beta - 45) / 30));
-      }, { passive: true });
+      // Pre-compute great-circle samples in original (unrotated) space
+      const SAMPLES = 60;
+      const arcVecs = [];
+      for (let i = 0; i <= SAMPLES; i++) arcVecs.push(slerp(parisVec, tanaVec, i / SAMPLES));
+
+      function update() {
+        // Time source : video.currentTime (loops automatically). Fallback : Date.now()
+        const t = (video && !isNaN(video.currentTime)) ? video.currentTime : (performance.now() / 1000);
+
+        // We rotate the world by -(LON0 + ROT_RATE * t) so that the visible
+        // central longitude at time t equals (LON0 + ROT_RATE * t).
+        const rotAngle = -(LON0 + ROT_RATE * t);
+
+        const pPar = project(rotateY(parisVec, rotAngle));
+        const pTan = project(rotateY(tanaVec,  rotAngle));
+
+        // Build the visible portion of the arc
+        let pathD = '';
+        let allPoints = [];
+        let visibleCount = 0;
+        for (const v of arcVecs) {
+          const p = project(rotateY(v, rotAngle));
+          allPoints.push(p);
+          if (p.z > 0) visibleCount++;
+        }
+        if (visibleCount === arcVecs.length) {
+          // Fully visible → smooth single path
+          pathD = 'M ' + allPoints[0].x.toFixed(1) + ' ' + allPoints[0].y.toFixed(1);
+          for (let i = 1; i < allPoints.length; i++) {
+            pathD += ' L ' + allPoints[i].x.toFixed(1) + ' ' + allPoints[i].y.toFixed(1);
+          }
+        } else {
+          // Partial → only emit the consecutive visible run(s)
+          let segOpen = false;
+          for (let i = 0; i < allPoints.length; i++) {
+            const p = allPoints[i];
+            if (p.z > 0) {
+              if (!segOpen) {
+                pathD += (pathD ? ' M ' : 'M ') + p.x.toFixed(1) + ' ' + p.y.toFixed(1);
+                segOpen = true;
+              } else {
+                pathD += ' L ' + p.x.toFixed(1) + ' ' + p.y.toFixed(1);
+              }
+            } else {
+              segOpen = false;
+            }
+          }
+        }
+        line.setAttribute('d', pathD);
+        halo.setAttribute('d', pathD);
+
+        // Pin positions + visibility
+        pinParis.setAttribute('transform', 'translate(' + pPar.x.toFixed(1) + ' ' + pPar.y.toFixed(1) + ')');
+        pinTana .setAttribute('transform', 'translate(' + pTan.x.toFixed(1) + ' ' + pTan.y.toFixed(1) + ')');
+        pinParis.style.opacity = pPar.z > 0 ? 1 : 0;
+        pinTana .style.opacity = pTan.z > 0 ? 1 : 0;
+
+        // Pulse dot — travels Paris → Tana along visible portion in 3.6s loops
+        const pulseT = (t / 3.6) % 1;
+        let idx = Math.floor(pulseT * SAMPLES);
+        if (idx > SAMPLES) idx = SAMPLES;
+        const pPulse = allPoints[idx];
+        if (pPulse && pPulse.z > 0) {
+          pulseDot.setAttribute('cx', pPulse.x.toFixed(1));
+          pulseDot.setAttribute('cy', pPulse.y.toFixed(1));
+          pulseDot.style.opacity = Math.min(1, pPulse.z * 2);
+        } else {
+          pulseDot.style.opacity = 0;
+        }
+
+        // Group opacity = fade out when both pins are on the back side
+        const visFactor = Math.max(0, Math.min(1, (Math.max(pPar.z, pTan.z) + 0.05) * 4));
+        routeGroup.setAttribute('opacity', visFactor.toFixed(2));
+
+        requestAnimationFrame(update);
+      }
+      requestAnimationFrame(update);
     })();
   </script>
 </body>
diff --git a/videos/earth-poster.jpg b/videos/earth-poster.jpg
new file mode 100644
index 0000000..9d2d088
Binary files /dev/null and b/videos/earth-poster.jpg differ
diff --git a/videos/earth-rotation.mp4 b/videos/earth-rotation.mp4
new file mode 100644
index 0000000..2dabf10
Binary files /dev/null and b/videos/earth-rotation.mp4 differ