- overflow-y: auto pour scroll vertical quand le menu déborde
- height: 100dvh (dynamic viewport) pour meilleur rendu mobile (barre URL)
- -webkit-overflow-scrolling: touch (smooth iOS)
- overscroll-behavior: contain (pas de scroll-chain sur le body en dessous)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Avant: border-left 4px (juste à gauche).
Maintenant: border 2px tout autour pour bien encadrer.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
J'utilisais --space-xxl qui n'existe pas dans le système (les vraies
variables sont --space-2xl/3xl). Du coup margin-top tombait à 0 et le
bloc collait au formulaire.
Corrigé : margin-top=96px (--space-3xl) + max-width réduit à 680px
pour un meilleur centrage visuel.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Avant : le bloc 'Rappel tarifaire' était collé en bas de la colonne droite,
créant un déséquilibre visuel avec le formulaire plus court à gauche.
Maintenant : sorti de la grille, centré avec max-width 720px sous les
deux colonnes, en grille 2 colonnes sur ses items pour une lecture
plus dense et équilibrée.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Retirer les icônes <i> minuscules à côté de chaque étape
- Ajouter le style CSS .steps-grid (grille 3 colonnes desktop, stack mobile)
- Ajouter le style .step-card (carte blanche, ombre, hover lift)
- Badge numéroté agrandi (64px) avec drop-shadow doré
- Ligne dorée discrète qui relie les 3 étapes en desktop
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Remplace le prix unique de 6 000 Ar par 3 paliers (5/10/20 kg) plus
une ligne « Nous contacter » pour les colis plus lourds.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
User wanted a more deliberate descent. Bumps the transform transition
from 1.2 s to 2.2 s and the opacity transition from 0.5 s to 0.9 s.
Easing kept (slight overshoot spring). Halo delay (1 s) unchanged so
it kicks in mid-emerge while the button is still settling.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Hide the gold pill button at page load (opacity 0, scale 0.05,
translated 27 vh up — roughly where the plane is when it crosses
the viewport center). When the plane's progress reaches 0.5, the
tick loop adds a `.revealed` class to .cta-btn; CSS variables flip
and a 1.2 s spring transition lands the button at viewport center
at full size.
Pulse halo (::after) is dormant until the .revealed class lands,
so it doesn't waste cycles on a hidden element. Hover scale (1.04)
re-introduced on `.cta-btn.revealed:hover` with the original 0.32 s
transition so it doesn't fight the slow emerge tween.
Plane and parcel logic untouched.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
User-supplied aerial illustration of Antananarivo (Lake Anosy + Rova
hill + surrounding city, 1920px wide JPG, 241 KB) replaces the
parachute-drop video as the static intro backdrop. The video files
are deleted from /videos.
The plane no longer orbits a scroll timeline. Now:
- Page is a single viewport, no scroll, no act labels, no scroll hint.
- Mouse X (0..1) drives plane.position.x from -16 (offscreen left) to
+16 (offscreen right), with plane.position.y descending from +5 to
-2 — so the plane enters from the upper-left and exits lower-right.
- Pitch/roll/yaw lerp toward small targets that depend on mouse X, so
the plane banks naturally as it crosses.
- Background image gets a softer mouse parallax (-16/-10px) via the
existing --mx/--my CSS vars, now updated from intro-scene.js.
- Three.js cloud spheres are gone; the photo is the entire backdrop.
- ScrollTrigger + the GSAP timeline are removed; the page no longer
needs gsap at all (the script tag stayed for now in case it comes
back, but the dependency could be dropped on a future pass).
- CTA button is back to plain visible/centered, no reveal animation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Restructure the page so the first 4 viewports of scroll drive a
Three.js scene composited on top of the Antananarivo parachute video.
What's there:
- Three.js (ESM, r158 via importmap) renders a low-poly cargo airliner
built from primitives: cylinder fuselage, cone nose, sphere cockpit
(dark glass + emissive), box wings/tail/fin, cylinder engines with
torus intakes, gold trim band, navy fin with gold logo box. No
external model file.
- Hemisphere + directional + ambient lights tuned for golden-hour fill.
- 14 cloud spheres scattered around the plane, slowly rotating.
- GSAP + ScrollTrigger drive a single progress value scrubbed against
scroll position. Inside the rAF loop, the camera arcs from rear-left
(-0.6 rad) to front-right (+1.1 rad), radius dipping mid-flight, and
the plane rolls slightly with scroll.
- Three act labels (Paris CDG / Vol cargo / Antananarivo) cross-fade at
20%/40%-60%/72% scroll positions via a chained gsap timeline.
- Gold CTA button stays opacity:0 + pointer-events:none until the last
~10% of scroll, then fades and scales in. Hover transform rebuilt
without the old mouse-parallax tilt (fights the scroll animation).
- Scroll hint pill (chevron + "Faites défiler") at the bottom of the
first viewport, fades out on first scroll event.
- prefers-reduced-motion shortcut: scroll stage hidden, CTA visible,
no animation. Page reverts to a static screen with the video bg.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Hero animation: a 3D airliner enters from the lower-left climbing,
crosses the viewport at near-1:1 scale around 50% of the timeline,
then exits top-right and shrinks. CTA stays hidden during the flyby
and fades in once the plane has cleared the frame; the gold pulse
halo is delayed to start with the reveal.
The plane asset is microsoft/fluentui-emoji's Airplane/3D, MIT.
Total intro is ~3.9s before the CTA is interactable; reduced-motion
short-circuits the whole sequence and shows the button immediately.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
User didn't like the cloud look. Roll the button back to the gold
pill from c52ac51 (gold gradient, shine sweep, pulse halo, mouse
parallax tilt). Keep the parachute video swap, just restore the CTA
styling.
Drop assets/cloud.png — no longer referenced.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The Lottie parachute was floating above the cloud as an extra layer,
which felt busy. Strip it out — the dotlottie player script tag, the
.cta-stack wrapper, the .cta-parachute rule, and assets/parachute.json
all go.
The cloud is now the only landing element. Bumped width 360→520 and
height 200→360 so the Fluent cloud renders much larger; bumped font
size 1.15→1.4rem; added a small negative margin-top to seat the text
on the cloud's "body" (Fluent's base is heavy, the body sits a bit
above the geometric center).
Drop animation moved off the wrapper onto the button itself, with the
:hover rule overriding animation:none + applying the centered scale
transform so hover doesn't fight the keyframe.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three iterations on the entrance animation:
- Edit the dotLottie animation in place: drop the "parcel" and
"clouds_comp" layers so only the parachute itself remains. Save the
result as plain JSON (parachute.json, 15 KB) instead of zipped
.lottie since PowerShell's Compress-Archive produces a ZIP that
the dotlottie player can't decode.
- Replace the five CSS cloud puffs with a single cloud illustration
from the user (cloud.png, transparent background) sat behind the
CTA text. Bigger, less abstract, more on-brand.
- Stretch the drop keyframes from 1.6s to 3.4s — still well below the
~7s the parachute boxes in the background video take to land.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the gold pill with a fluffy cloud-shaped button — pill base
plus five absolutely-positioned puffs (three on top, two on the
bottom) all in white-to-pale-blue gradient with subtle inner shadow
to read as 3D.
Cradle the button in a 170px LottieFiles parachute (Elmer Vergara's
"Falling Parcel", licensed under Lottie Simple, hosted in
assets/parachute.lottie at 3.7 KB). The whole stack drops in from
above the viewport over 1.6s with a slight overshoot, much faster
than the boxes in the background video, then the parachute keeps
looping in place.
Mouse parallax dropped from the button — it would fight the entrance
animation. Video parallax stays.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Swap the rotating Earth backdrop for an AI-generated golden-hour shot
of Antananarivo's skyline with navy cardboard boxes parachuting in
from across the frame. The hero box at center gets the MVA Global Fret
shield overlaid for the last second of the loop, so each cycle ends
on a brand reveal.
Pipeline: source video cropped (bottom 150px) to remove the HeyGen
watermark, audio stripped, MVA logo composited on the foreground box
from t=4 to t=5 with a 0.3s alpha fade-in, re-encoded to H.264 at CRF
22 (1.1 MB total).
Tint overlay softened — the original navy gradient was tuned for the
dark space backdrop and was crushing the golden hour light.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Tracking the line against the rotating globe was finicky and never
quite aligned. Strip out the SVG route, the great-circle slerp, the
3D projection and the debug overlay — the rotating Earth alone is
the visual now.
Re-add a subtle mouse parallax: the video shifts up to 22px against
the cursor, the CTA button tilts 8px the opposite way for a 3D feel.
On mobile, deviceorientation drives the same vars.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace the Pexels stock clip with a higher-quality Earth-from-space loop
hosted in /videos (720p, 60s, slowed 2x, 12 MB). The static SVG arc is
gone — the route is now computed every frame from a 3D projection that
follows the globe's rotation:
- France (48.85N, 2.35E) and Antananarivo (-18.9N, 47.5E) are placed on
a unit sphere, then rotated around the Y axis to match the apparent
central longitude of the video at each frame (LON0=140 deg, omega
=-5.75 deg/s, calibrated empirically from sample frames).
- A great-circle arc is sampled with slerp and projected
orthographically; only the front-side portion (z > 0) is drawn.
- Pins fade out when their city rotates behind the globe; the whole
group fades out when both endpoints are on the back side.
Mouse parallax dropped — it would desync the SVG from the video and
break alignment.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace clouds video (Pexels 2098989) with actual Earth-from-space footage
(Pexels 854275 — Europe/Africa visible + orbiting satellite) and remove
the static Unsplash Earth photo layer that was overlaying the video.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 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>
Previous SVG illustrations and emojis were dropped per user feedback.
The new intro is a single fixed viewport (no scroll) where every
layer reacts to mouse movement only:
Layer 1 — Real photo: Earth at night from space (NASA / Unsplash),
slow parallax (-18px max).
Layer 2 — Navy gradient tint to anchor the brand palette and
ensure central card legibility.
Layer 3 — Real photo: aerial sunset clouds (Unsplash), 28%
opacity with mix-blend-mode soft-light, faster
parallax (-32px max).
Layer 4 — Gold radial glow that follows the cursor (mix-blend
screen), giving an interactive "spotlight" feel.
Layer 5 — 12 floating gold particles with continuous CSS
animation, fastest parallax (-55px max).
Center card (glassmorphism, navy + gold border, blur 24px) tilts in
the OPPOSITE direction (+12px) for a 3D depth illusion. The CTA
button has a continuous pulse ring, hover lift + shine sweep, and
routes to accueil.html.
Mobile: device-orientation events drive the parallax instead of
mouse. prefers-reduced-motion kills all animations.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The new index.html is a 3-act scroll-driven storytelling intro:
Act 1 (Tarmac at sunset)
Sunset gradient sky, mountain silhouettes, hangar, runway with
centerline lights. Inline SVG cargo plane (MVA-branded gold tail)
sits on the ground while box emojis cycle up a loading ramp.
Act 2 (Take-off at dusk)
Dusk sky, two parallax cloud layers and distant mountains. The
plane translates diagonally up-and-right with a slight tilt and
a glowing contrail, sized down progressively.
Act 3 (Arrival at night)
Deep navy night sky with twinkling stars, a glowing moon, and
the Madagascar coastline silhouette. A small plane fades in
descending toward the island, then a centered CTA block reveals:
"Bienvenue à bord" with the gold "Accéder au site" button that
routes to accueil.html (the real homepage).
Implementation:
- Pure CSS layered scenes; no library
- Scroll progress driven by a single CSS custom property --scroll
(0→1) updated via rAF, layers transform off it
- Mouse-move parallax on layers via --mx/--my (skipped on touch)
- Inline SVG plane reused across the 3 scenes
- All text is i18n-driven with a new `intro` section in FR/EN/MG
Architecture changes:
- index.html → new parallax intro
- accueil.html → former index.html content (full homepage)
- All nav/logo/footer links updated index.html → accueil.html across
the 8 existing pages
- Mobile-nav on accueil.html now also includes Service Commande
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Bundle the actual SVG logos in images/payment-logos/ and reference
them with <img> instead of Font Awesome glyphs:
- mvola.svg (from mvola.mg, the green wordmark)
- orange.svg (Wikimedia Commons, square orange)
- airtel.svg (Wikimedia Commons, red wordmark)
- visa.svg (Wikimedia Commons)
- mastercard.svg (Wikimedia Commons)
New CSS block (.payment-logos-grid + .payment-logo-card) gives a
clean 4-column white-card layout with hover lift, gold border tint
on hover, and a 2-column responsive layout on mobile. The bank-card
slot now displays both Visa and Mastercard logos side-by-side.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The default .pricing-card has both a 3px gold border AND a 6px gold
gradient bar on top (::before). On the Service Commande page that
combination made the top edge look much thicker than the sides.
Add a .pricing-card--flat modifier that hides the ::before bar and
trims the border to 2px, then apply it to the commission card.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace the cramped map-container layout with a polished map-card
- Centered section header (h2 + gold-line + subtitle) above the card
- Navy gradient header inside the card with gold location icon
- Address displayed in the header alongside an "open in Google Maps" CTA
- Increased map height to 420px (320px on mobile)
- Soft shadow and gold-tinted border for premium feel
- Added mapSubtitle translation key (FR/EN/MG)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
