Strip parcel from parachute Lottie, swap cloud puffs for image, slow drop

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>

css/parallax.css

@@ -132,7 +132,7 @@ html, body {
   align-items: center;
   pointer-events: none;
   transform: translate(-50%, -50%);
-  animation: parachute-drop 1.6s cubic-bezier(0.34, 0.4, 0.5, 1) 0.2s both;
+  animation: parachute-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both;
 }
 .cta-stack > * { pointer-events: auto; }
 
@@ -152,53 +152,36 @@ html, body {
 }
 
 /* ── BOUTON-NUAGE ────────────────────────────────────────────────────────
-   Pill blanche moelleuse + 5 puffs en absolu pour la silhouette nuage. */
+   Image de nuage 3D en fond, débordant le texte. Le texte est devant. */
 .cloud-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   text-decoration: none;
-  padding: 22px 52px;
+  width: 360px;
-  border-radius: 60px;
+  height: 200px;
-  background: linear-gradient(180deg, #ffffff 0%, #eaf1ff 100%);
   color: var(--navy);
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
-  font-size: 1.1rem;
+  font-size: 1.15rem;
   letter-spacing: 0.4px;
   white-space: nowrap;
-  box-shadow:
+  filter: drop-shadow(0 22px 30px rgba(20, 20, 50, 0.45));
-    0 24px 70px rgba(120, 150, 220, 0.45),
+  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
-    0 6px 18px rgba(20, 20, 50, 0.18),
-    inset 0 -3px 8px rgba(180, 200, 235, 0.5),
-    inset 0 2px 0 rgba(255, 255, 255, 0.95);
-  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
-              box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-.cloud-btn:hover {
-  transform: scale(1.04);
-  box-shadow:
-    0 30px 85px rgba(120, 150, 220, 0.55),
-    0 10px 24px rgba(20, 20, 50, 0.22),
-    inset 0 -3px 8px rgba(180, 200, 235, 0.5),
-    inset 0 2px 0 rgba(255, 255, 255, 1);
 }
+.cloud-btn:hover { transform: scale(1.05); }
 
-/* Puffs de nuage — 5 boules positionnées autour de la pill */
+.cloud-bg {
-.cloud-puff {
   position: absolute;
-  background: linear-gradient(180deg, #ffffff 0%, #e7eefc 100%);
+  inset: 0;
-  border-radius: 50%;
+  width: 100%;
-  box-shadow:
+  height: 100%;
-    inset 0 -3px 6px rgba(180, 200, 235, 0.5),
+  object-fit: contain;
-    inset 0 2px 0 rgba(255, 255, 255, 0.9);
+  pointer-events: none;
   z-index: 0;
+  user-select: none;
 }
-.cloud-puff-tl { width: 60px; height: 60px; top: -22px; left: 8%;  }
-.cloud-puff-tm { width: 52px; height: 52px; top: -32px; left: 50%; transform: translateX(-50%); }
-.cloud-puff-tr { width: 56px; height: 56px; top: -22px; right: 8%; }
-.cloud-puff-bl { width: 44px; height: 44px; bottom: -18px; left: 22%; }
-.cloud-puff-br { width: 48px; height: 48px; bottom: -20px; right: 22%; }
 
 .cloud-content {
   position: relative;
@@ -206,6 +189,8 @@ html, body {
   display: inline-flex;
   align-items: center;
   gap: 14px;
+  padding-top: 8px;       /* aligne sur le « cœur » du nuage */
+  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
 }
 .cloud-content i {
   font-size: 0.95rem;
@@ -221,12 +206,7 @@ html, body {
   .lang-switcher button { padding: 5px 10px; font-size: 0.74rem; }
 
   .cta-parachute { width: 130px; height: 130px; margin-bottom: -16px; }
-  .cloud-btn { padding: 16px 34px; font-size: 0.98rem; }
+  .cloud-btn { width: 280px; height: 160px; font-size: 1rem; }
-  .cloud-puff-tl { width: 50px; height: 50px; top: -22px; }
-  .cloud-puff-tm { width: 44px; height: 44px; top: -26px; }
-  .cloud-puff-tr { width: 46px; height: 46px; top: -22px; }
-  .cloud-puff-bl { width: 38px; height: 38px; bottom: -16px; }
-  .cloud-puff-br { width: 42px; height: 42px; bottom: -18px; }
 }
 
 @media (prefers-reduced-motion: reduce) {

index.html

@@ -39,14 +39,10 @@
 
     <div class="cta-stack">
       <dotlottie-wc class="cta-parachute"
-        src="assets/parachute.lottie"
+        src="assets/parachute.json"
         autoplay loop></dotlottie-wc>
       <a href="accueil.html" class="cta-btn cloud-btn">
-        <span class="cloud-puff cloud-puff-tl"></span>
+        <img class="cloud-bg" src="assets/cloud.png" alt="">
-        <span class="cloud-puff cloud-puff-tm"></span>
-        <span class="cloud-puff cloud-puff-tr"></span>
-        <span class="cloud-puff cloud-puff-bl"></span>
-        <span class="cloud-puff cloud-puff-br"></span>
         <span class="cloud-content">
           <span data-i18n="intro.ctaBtn">Accéder au site</span>
           <i class="fa-solid fa-arrow-right"></i>