Replace parallax intro with video bg + red Paris-Tana route

- Background video: aerial cloudscape (Pexels free video, 7.4 MB SD)
  autoplay, loop, muted; fastest mouse parallax (-45px). Hue-shifted
  toward navy and slightly desaturated.
- Earth-from-space photo overlaid in screen blend mode at 78%
  opacity so the cloud motion shows through; medium parallax.
- Navy night tint preserves brand palette and central legibility.
- New SVG route layer: thin red gradient stroke (1.5px) curving
  Paris → Antananarivo, with a glow filter, a soft halo path
  beneath, two fixed pin markers at each endpoint, and a white
  pulse traveling along the path on a 3.6s loop.
- Centered card content was stripped to JUST the gold "Accéder au
  site" button (continuous pulse ring + hover shine + lift).

The full text block (welcome / subtitle / 3 meta stats) is gone.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

css/parallax.css

@@ -1,16 +1,16 @@
 /* =========================================================================
    PARALLAX INTRO — MVA Global Fret
-   Page unique fixe. Parallaxe pilotée à la souris uniquement.
+   Page unique, fixe (pas de scroll). Vidéo de fond + Terre + ligne rouge
-   Photos professionnelles Unsplash, aucun dessin maison.
+   Paris↔Antananarivo + bouton centré. Bouge à la souris.
    ========================================================================= */
 
 :root {
   --navy: #1a1a3e;
   --navy-deep: #050518;
-  --navy-light: #2a2a5e;
   --gold: #c5a55a;
   --gold-light: #e0c98a;
-  --white: #ffffff;
+  --red: #ff2a3d;
+  --white: #fff;
   --mx: 0;
   --my: 0;
 }
@@ -28,14 +28,14 @@ html, body {
   background: var(--navy-deep);
 }
 
-/* ── HEADER MINIMAL ─────────────────────────────────────────────────────── */
+/* ── HEADER ─────────────────────────────────────────────────────────────── */
 .parallax-header {
   position: fixed;
   top: 0; left: 0; right: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 36px;
+  padding: 22px 36px;
   z-index: 50;
 }
 
@@ -46,15 +46,15 @@ html, body {
   color: var(--white);
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
-  letter-spacing: 1px;
+  letter-spacing: 1.2px;
-  font-size: 0.95rem;
+  font-size: 0.92rem;
   text-transform: uppercase;
   user-select: none;
 }
 .parallax-logo img {
   height: 44px;
   width: auto;
-  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
+  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.65));
 }
 
 .lang-switcher {
@@ -90,293 +90,148 @@ html, body {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  perspective: 1000px;
 }
 
 .layer {
   position: absolute;
-  inset: -8% -8%;            /* Marge pour que la parallaxe ne révèle pas les bords */
+  inset: -10% -10%;
   pointer-events: none;
   will-change: transform;
 }
 
 /* ──────────────────────────────────────────────────────────────────────────
-   COUCHE 1 — Terre depuis l'espace (background le plus profond)
+   COUCHE 1 — VIDÉO de nuages aériens (Pexels, libre)
-   Photo : NASA / Unsplash @nasa
+   Bouge le PLUS à la souris (effet de profondeur).
    ────────────────────────────────────────────────────────────────────────── */
-.layer-earth {
+.layer-video {
-  background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=2400&q=85');
+  width: 120%;
-  background-size: cover;
+  height: 120%;
-  background-position: center;
+  object-fit: cover;
-  /* Bouge légèrement à la souris */
+  object-position: center;
-  transform: translate(calc(var(--mx) * -18px), calc(var(--my) * -18px)) scale(1.04);
+  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 pour assombrir et amener la palette de marque
+   COUCHE 2 — TERRE depuis l'espace (photo NASA / Unsplash)
+   Superposée à la vidéo en mode screen → on voit la motion en transparence.
+   ────────────────────────────────────────────────────────────────────────── */
+.layer-earth {
+  background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=2400&q=85') center/cover no-repeat;
+  opacity: 0.78;
+  mix-blend-mode: screen;
+  transform: translate(calc(var(--mx) * -22px), calc(var(--my) * -22px)) scale(1.04);
+}
+
+/* ──────────────────────────────────────────────────────────────────────────
+   COUCHE 3 — Voile bleu nuit (palette MVA)
    ────────────────────────────────────────────────────────────────────────── */
 .layer-tint {
   background:
-    radial-gradient(ellipse at center, rgba(26, 26, 62, 0.4) 0%, rgba(5, 5, 24, 0.85) 100%),
+    radial-gradient(ellipse at center, rgba(20, 20, 50, 0.35) 0%, rgba(5, 5, 24, 0.85) 100%),
-    linear-gradient(180deg, rgba(26, 26, 62, 0.5) 0%, rgba(5, 5, 24, 0.7) 100%);
+    linear-gradient(180deg, rgba(10, 10, 30, 0.55) 0%, rgba(5, 5, 24, 0.7) 100%);
   inset: 0;
 }
 
 /* ──────────────────────────────────────────────────────────────────────────
-   COUCHE 3 — Nuages au coucher de soleil (vue aérienne)
+   COUCHE 4 — Route Paris ↔ Antananarivo (ligne rouge fine)
-   Mode soft-light pour fusionner avec la Terre
+   Bouge légèrement (entre vidéo et bouton), donne une 3ème profondeur.
-   Photo : Unsplash
    ────────────────────────────────────────────────────────────────────────── */
-.layer-clouds {
+.layer-route {
-  background-image: url('https://images.unsplash.com/photo-1530908295418-a12e326966ba?w=2400&q=85');
-  background-size: cover;
-  background-position: center;
-  opacity: 0.28;
-  mix-blend-mode: soft-light;
-  transform: translate(calc(var(--mx) * -32px), calc(var(--my) * -32px)) scale(1.06);
-}
-
-/* ──────────────────────────────────────────────────────────────────────────
-   COUCHE 4 — Halo doré central qui suit la souris
-   ────────────────────────────────────────────────────────────────────────── */
-.layer-glow {
-  background: radial-gradient(circle at calc(50% + var(--mx) * 8%) calc(50% + var(--my) * 8%),
-    rgba(197, 165, 90, 0.22) 0%,
-    rgba(197, 165, 90, 0.10) 25%,
-    transparent 55%);
   inset: 0;
-  mix-blend-mode: screen;
+  transform: translate(calc(var(--mx) * -12px), calc(var(--my) * -12px));
 }
+.layer-route svg { width: 100%; height: 100%; display: block; }
 
 /* ──────────────────────────────────────────────────────────────────────────
-   COUCHE 5 — Particules dorées flottantes (parallaxe la plus rapide)
+   BOUTON CTA centré — "Accéder au site"
+   Bouge en sens INVERSE des couches → effet de tilt.
    ────────────────────────────────────────────────────────────────────────── */
-.layer-particles {
+.cta-btn {
-  inset: 0;
-  transform: translate(calc(var(--mx) * -55px), calc(var(--my) * -55px));
-}
-.particle {
-  position: absolute;
-  border-radius: 50%;
-  background: radial-gradient(circle, #fff 0%, var(--gold) 50%, transparent 100%);
-  pointer-events: none;
-  filter: blur(0.5px);
-  animation: float 14s ease-in-out infinite;
-}
-.particle::after {
-  content: '';
-  position: absolute;
-  inset: -4px;
-  border-radius: 50%;
-  background: radial-gradient(circle, rgba(197, 165, 90, 0.5) 0%, transparent 70%);
-  filter: blur(4px);
-}
-.p1  { top: 12%; left: 8%;  width: 4px; height: 4px; animation-delay: 0s;     animation-duration: 12s; }
-.p2  { top: 22%; left: 78%; width: 3px; height: 3px; animation-delay: -2s;    animation-duration: 16s; }
-.p3  { top: 35%; left: 18%; width: 5px; height: 5px; animation-delay: -5s;    animation-duration: 14s; }
-.p4  { top: 48%; left: 88%; width: 2px; height: 2px; animation-delay: -8s;    animation-duration: 18s; }
-.p5  { top: 60%; left: 14%; width: 4px; height: 4px; animation-delay: -3s;    animation-duration: 13s; }
-.p6  { top: 72%; left: 72%; width: 3px; height: 3px; animation-delay: -6s;    animation-duration: 17s; }
-.p7  { top: 82%; left: 30%; width: 5px; height: 5px; animation-delay: -1s;    animation-duration: 15s; }
-.p8  { top: 18%; left: 48%; width: 2px; height: 2px; animation-delay: -7s;    animation-duration: 19s; }
-.p9  { top: 40%; left: 56%; width: 3px; height: 3px; animation-delay: -4s;    animation-duration: 14s; }
-.p10 { top: 88%; left: 92%; width: 4px; height: 4px; animation-delay: -9s;    animation-duration: 16s; }
-.p11 { top: 6%;  left: 35%; width: 3px; height: 3px; animation-delay: -10s;   animation-duration: 13s; }
-.p12 { top: 92%; left: 56%; width: 2px; height: 2px; animation-delay: -11s;   animation-duration: 17s; }
-
-@keyframes float {
-  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
-  25%      { transform: translate(20px, -30px); opacity: 1; }
-  50%      { transform: translate(-15px, -50px); opacity: 0.6; }
-  75%      { transform: translate(-25px, -20px); opacity: 1; }
-}
-
-/* ──────────────────────────────────────────────────────────────────────────
-   CARTE CENTRALE — CTA
-   ────────────────────────────────────────────────────────────────────────── */
-.center-card {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 10;
-  text-align: center;
-  width: min(560px, calc(100vw - 40px));
-  padding: 50px 50px 44px;
-  background: rgba(13, 13, 36, 0.45);
-  border: 1px solid rgba(197, 165, 90, 0.25);
-  border-radius: 28px;
-  backdrop-filter: blur(24px) saturate(140%);
-  -webkit-backdrop-filter: blur(24px) saturate(140%);
-  box-shadow:
-    0 30px 80px rgba(0, 0, 0, 0.55),
-    inset 0 1px 0 rgba(255, 255, 255, 0.08);
-  /* La carte bouge en sens INVERSE des autres couches (effet de tilt 3D) */
-  transform: translate(
-    calc(-50% + var(--mx) * 12px),
-    calc(-50% + var(--my) * 12px)
-  );
-  transition: transform 0.05s linear;
-}
-
-/* Halo doré derrière la carte */
-.center-card::before {
-  content: '';
-  position: absolute;
-  inset: -2px;
-  border-radius: 28px;
-  background: linear-gradient(135deg, rgba(197, 165, 90, 0.6), transparent 40%, transparent 60%, rgba(197, 165, 90, 0.4));
-  z-index: -1;
-  opacity: 0.5;
-  filter: blur(8px);
-}
-
-.card-pretitle {
-  font-family: 'Poppins', sans-serif;
-  font-weight: 500;
-  letter-spacing: 8px;
-  text-transform: uppercase;
-  color: var(--gold);
-  font-size: 0.78rem;
-  margin-bottom: 14px;
-  opacity: 0.92;
-}
-
-.card-title {
-  font-family: 'Poppins', sans-serif;
-  font-size: clamp(2rem, 4.6vw, 3.4rem);
-  font-weight: 800;
-  letter-spacing: -1px;
-  line-height: 1;
-  background: linear-gradient(135deg, #fff 0%, #c5a55a 55%, #fff 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
-}
-
-.card-line {
-  width: 64px;
-  height: 2px;
-  background: var(--gold);
-  margin: 22px auto 18px;
-  border-radius: 1px;
-  position: relative;
-}
-.card-line::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--gold);
-  filter: blur(4px);
-  opacity: 0.6;
-}
-
-.card-subtitle {
-  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
-  font-weight: 300;
-  color: rgba(255, 255, 255, 0.8);
-  line-height: 1.55;
-  letter-spacing: 0.3px;
-  max-width: 420px;
-  margin: 0 auto 36px;
-}
-
-/* ── BOUTON CTA ─────────────────────────────────────────────────────────── */
-.cta-btn {
-  position: relative;
   display: inline-flex;
   align-items: center;
-  gap: 14px;
+  gap: 16px;
-  padding: 18px 44px;
+  padding: 22px 56px;
   background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
   color: var(--navy);
   text-decoration: none;
   border-radius: 50px;
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
-  font-size: 1.02rem;
+  font-size: 1.1rem;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.6px;
   overflow: hidden;
+  white-space: nowrap;
   box-shadow:
-    0 14px 40px rgba(197, 165, 90, 0.5),
+    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.4);
+    inset 0 1px 0 rgba(255, 255, 255, 0.45);
-  transition: all 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
-  z-index: 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)
+  );
 }
+
+.cta-btn:hover {
+  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%;
-  width: 50%; height: 100%;
+  width: 60%; height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
-  transform: skewX(-20deg);
+  transform: skewX(-22deg);
   transition: left 0.7s ease;
-}
+  pointer-events: none;
-.cta-btn:hover {
-  transform: translateY(-4px) scale(1.02);
-  box-shadow:
-    0 22px 55px rgba(197, 165, 90, 0.65),
-    0 0 0 10px rgba(197, 165, 90, 0.12),
-    inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 .cta-btn:hover .cta-btn-shine { left: 130%; }
+
 .cta-btn i {
   font-size: 0.95rem;
   transition: transform 0.32s ease;
 }
-.cta-btn:hover i { transform: translateX(6px); }
+.cta-btn:hover i { transform: translateX(8px); }
 
-/* Pulse autour du bouton (continu) */
+/* Pulse continu autour du bouton */
 .cta-btn::after {
   content: '';
   position: absolute;
   inset: -3px;
   border-radius: 50px;
-  border: 2px solid rgba(197, 165, 90, 0.5);
+  border: 2px solid rgba(197, 165, 90, 0.55);
-  animation: ctaPulse 2.5s ease-out infinite;
+  animation: ctaPulse 2.8s ease-out infinite;
   pointer-events: none;
 }
 @keyframes ctaPulse {
-  0% { transform: scale(1); opacity: 0.6; }
+  0%   { transform: scale(1); opacity: 0.7; }
   100% { transform: scale(1.18); opacity: 0; }
 }
 
-/* ── META INFOS SOUS LE BOUTON ──────────────────────────────────────────── */
-.card-meta {
-  margin-top: 32px;
-  display: flex;
-  justify-content: center;
-  gap: 14px;
-  flex-wrap: wrap;
-  color: rgba(255, 255, 255, 0.6);
-  font-size: 0.82rem;
-}
-.card-meta span { display: inline-flex; align-items: center; gap: 8px; }
-.card-meta i { color: var(--gold); font-size: 0.85rem; }
-.meta-sep { color: rgba(197, 165, 90, 0.4); padding: 0 4px; }
-
 /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .parallax-header { padding: 14px 18px; }
   .parallax-logo span { display: none; }
-  .parallax-logo img { height: 40px; }
+  .parallax-logo img { height: 38px; }
   .lang-switcher button { padding: 5px 10px; font-size: 0.74rem; }
 
-  .center-card {
+  .cta-btn {
-    width: calc(100vw - 28px);
+    padding: 16px 36px;
-    padding: 36px 28px 32px;
+    font-size: 0.98rem;
-    border-radius: 22px;
   }
-  .card-pretitle { letter-spacing: 5px; font-size: 0.72rem; }
-  .card-subtitle { font-size: 0.92rem; margin-bottom: 28px; }
-  .cta-btn { padding: 14px 30px; font-size: 0.95rem; }
-
-  .card-meta { gap: 10px; font-size: 0.76rem; }
-  .meta-sep { display: none; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .particle, .cta-btn::after { animation: none; }
+  .cta-btn::after { animation: none; }
-  .layer-earth, .layer-clouds, .layer-particles, .center-card { transition: none; }
+  .layer-video, .layer-earth, .layer-route, .cta-btn { transition: none; }
 }

index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>MVA Global Fret — Bienvenue</title>
-  <meta name="description" content="MVA Global Fret — Le pont aérien entre Paris et Antananarivo. Bienvenue à bord.">
+  <meta name="description" content="MVA Global Fret — Le pont aérien entre Paris et Antananarivo.">
   <link rel="icon" type="image/png" href="PNG MVA GLOBAL FRET.png">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -14,7 +14,6 @@
 </head>
 <body class="parallax-body">
 
-  <!-- Header minimal -->
   <header class="parallax-header">
     <div class="parallax-logo" aria-label="MVA Global Fret">
       <img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret">
@@ -27,59 +26,84 @@
     </div>
   </header>
 
-  <!-- Stage parallaxe : tout est sur une seule page, contrôlé par la souris -->
   <main class="stage">
 
-    <!-- Couche 1 : Terre vue depuis l'espace (la plus loin, parallaxe la plus lente) -->
+    <!-- Couche 1 : vidéo de nuages aériens (parallaxe la plus marquée) -->
+    <video class="layer layer-video"
+           autoplay loop muted playsinline preload="auto"
+           poster="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1600&q=70">
+      <source src="https://videos.pexels.com/video-files/2098989/2098989-sd_960_540_30fps.mp4" type="video/mp4">
+    </video>
+
+    <!-- Couche 2 : Terre vue depuis l'espace (par-dessus la vidéo, blend) -->
     <div class="layer layer-earth"></div>
 
-    <!-- Couche 2 : voile bleu pour assombrir + assurer la lisibilité -->
+    <!-- Couche 3 : voile bleu pour cohérence palette + lisibilité -->
     <div class="layer layer-tint"></div>
 
-    <!-- Couche 3 : nuages aériens au coucher de soleil (blend mode pour fusionner) -->
+    <!-- Couche 4 : route Paris ↔ Antananarivo (ligne rouge brillante + pulse) -->
-    <div class="layer layer-clouds"></div>
+    <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>
 
-    <!-- Couche 4 : halo doré central -->
+        <!-- Halo flou autour de la ligne -->
-    <div class="layer layer-glow"></div>
+        <path d="M 430 270 Q 620 90 910 600"
+              stroke="#ff2a3d" stroke-width="10" fill="none"
+              opacity="0.25" filter="url(#redGlow)"/>
 
-    <!-- Couche 5 : particules dorées flottantes (la plus rapide) -->
+        <!-- Ligne fine principale -->
-    <div class="layer layer-particles">
+        <path id="routePath" d="M 430 270 Q 620 90 910 600"
-      <span class="particle p1"></span>
+              stroke="url(#redLine)" stroke-width="1.5" fill="none"
-      <span class="particle p2"></span>
+              stroke-linecap="round"/>
-      <span class="particle p3"></span>
+
-      <span class="particle p4"></span>
+        <!-- Pulse qui voyage de Paris vers Tana -->
-      <span class="particle p5"></span>
+        <circle r="5" fill="#fff" filter="url(#redGlow)">
-      <span class="particle p6"></span>
+          <animateMotion dur="3.6s" repeatCount="indefinite">
-      <span class="particle p7"></span>
+            <mpath href="#routePath"/>
-      <span class="particle p8"></span>
+          </animateMotion>
-      <span class="particle p9"></span>
+          <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="3.6s" repeatCount="indefinite"/>
-      <span class="particle p10"></span>
+        </circle>
-      <span class="particle p11"></span>
+        <circle r="11" fill="#ff2a3d" opacity="0.6" filter="url(#redGlow)">
-      <span class="particle p12"></span>
+          <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>
+        <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>
+      </svg>
     </div>
 
-    <!-- Carte centrale : CTA -->
+    <!-- Bouton centré : juste "Accéder au site" -->
-    <div class="center-card">
-      <div class="card-pretitle" data-i18n="intro.pretitle">Bienvenue chez</div>
-      <h1 class="card-title">MVA Global Fret</h1>
-      <div class="card-line"></div>
-      <p class="card-subtitle" data-i18n="intro.subtitle">Le pont aérien entre Paris et Madagascar</p>
-
     <a href="accueil.html" class="cta-btn">
       <span class="cta-btn-shine"></span>
       <span data-i18n="intro.ctaBtn">Accéder au site</span>
       <i class="fa-solid fa-arrow-right"></i>
     </a>
 
-      <div class="card-meta">
-        <span><i class="fa-solid fa-plane"></i> <span data-i18n="intro.metaShipments">2 envois / semaine</span></span>
-        <span class="meta-sep">·</span>
-        <span><i class="fa-solid fa-clock"></i> <span data-i18n="intro.metaDelay">2 semaines depuis Paris</span></span>
-        <span class="meta-sep">·</span>
-        <span><i class="fa-solid fa-tag"></i> <span data-i18n="intro.metaPrice">70 000 Ar / kg</span></span>
-      </div>
-    </div>
-
   </main>
 
   <script src="js/translations.js"></script>
@@ -108,11 +132,11 @@
       }
     })();
 
-    // ── Mouse parallaxe avec easing fluide ───────────────────────────────────
+    // ── Mouse parallaxe avec easing ──────────────────────────────────────────
     (function () {
       const root = document.documentElement;
       let targetX = 0, targetY = 0, currentX = 0, currentY = 0;
-      const ease = 0.07;
+      const ease = 0.06;
 
       function loop() {
         currentX += (targetX - currentX) * ease;
@@ -128,7 +152,6 @@
         targetY = (e.clientY / window.innerHeight - 0.5) * 2;
       }, { passive: true });
 
-      // Mobile : effet basé sur l'orientation de l'appareil
       window.addEventListener('deviceorientation', (e) => {
         if (e.gamma == null || e.beta == null) return;
         targetX = Math.max(-1, Math.min(1, e.gamma / 30));