Drop the parachute, scale cloud up to 520x360, fit text inside

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>

css/parallax.css

@@ -117,61 +117,43 @@ html, body {
     linear-gradient(180deg, transparent 50%, rgba(5, 5, 24, 0.35) 100%);
 }
 
-/* ── PARACHUTE + BOUTON-NUAGE ────────────────────────────────────────────
+/* ── BOUTON-NUAGE ────────────────────────────────────────────────────────
-   Le bloc tombe du haut de l'écran jusqu'au centre via translateY animé,
+   Le nuage tombe du haut jusqu'au centre via animation, ~3.4s avec léger
-   plus rapide que les parachutes de la vidéo (~1.6s vs 7s). Après l'atter-
+   overshoot. Une fois posé, hover scale léger. */
-   rissage, le parachute Lottie continue à boucler doucement au-dessus
+.cloud-btn {
-   du nuage. Aucune parallaxe souris sur ce groupe — la chute est l'effet. */
-.cta-stack {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 10;
-  display: flex;
+  display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  pointer-events: none;
+  justify-content: center;
-  transform: translate(-50%, -50%);
+  text-decoration: none;
-  animation: parachute-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both;
+  width: 520px;
+  height: 360px;
+  color: var(--navy);
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 1.4rem;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
+  filter: drop-shadow(0 28px 38px rgba(20, 20, 50, 0.45));
+  animation: cloud-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both;
 }
-.cta-stack > * { pointer-events: auto; }
 
-@keyframes parachute-drop {
+@keyframes cloud-drop {
   0%   { transform: translate(-50%, -130vh); opacity: 0; }
   10%  { opacity: 1; }
   85%  { transform: translate(-50%, -42%);   opacity: 1; }
   100% { transform: translate(-50%, -50%); }
 }
 
-.cta-parachute {
+.cloud-btn:hover {
-  width: 170px;
+  transform: translate(-50%, -50%) scale(1.05);
-  height: 170px;
+  /* hover désactive l'animation de chute pour que scale ne saute pas */
-  margin-bottom: -22px;
+  animation: none;
-  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
-  pointer-events: none;
 }
 
-/* ── BOUTON-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;
-  width: 360px;
-  height: 200px;
-  color: var(--navy);
-  font-family: 'Poppins', sans-serif;
-  font-weight: 700;
-  font-size: 1.15rem;
-  letter-spacing: 0.4px;
-  white-space: nowrap;
-  filter: drop-shadow(0 22px 30px rgba(20, 20, 50, 0.45));
-  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-.cloud-btn:hover { transform: scale(1.05); }
-
 .cloud-bg {
   position: absolute;
   inset: 0;
@@ -183,17 +165,20 @@ html, body {
   user-select: none;
 }
 
+/* Texte centré sur le « cœur » du nuage (légèrement plus haut que le centre
+   géométrique de l'image, parce que le nuage Fluent a une grosse base et un
+   sommet bombé). */
 .cloud-content {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 14px;
-  padding-top: 8px;       /* aligne sur le « cœur » du nuage */
+  margin-top: -10px;
-  text-shadow: 0 1px 2px rgba(255,255,255,0.7);
+  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
 }
 .cloud-content i {
-  font-size: 0.95rem;
+  font-size: 1.05rem;
   transition: transform 0.32s ease;
 }
 .cloud-btn:hover .cloud-content i { transform: translateX(6px); }
@@ -205,10 +190,9 @@ html, body {
   .parallax-logo img { height: 38px; }
   .lang-switcher button { padding: 5px 10px; font-size: 0.74rem; }
 
-  .cta-parachute { width: 130px; height: 130px; margin-bottom: -16px; }
+  .cloud-btn { width: 360px; height: 250px; font-size: 1.05rem; }
-  .cloud-btn { width: 280px; height: 160px; font-size: 1rem; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .cta-stack { animation: none; }
+  .cloud-btn { animation: none; }
 }

index.html

@@ -11,7 +11,6 @@
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
   <link rel="stylesheet" href="css/parallax.css">
-  <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.6.2/dist/dotlottie-wc.js" type="module"></script>
 </head>
 <body class="parallax-body">
 
@@ -37,10 +36,6 @@
 
     <div class="layer layer-tint"></div>
 
-    <div class="cta-stack">
-      <dotlottie-wc class="cta-parachute"
-        src="assets/parachute.json"
-        autoplay loop></dotlottie-wc>
     <a href="accueil.html" class="cta-btn cloud-btn">
       <img class="cloud-bg" src="assets/cloud.png" alt="">
       <span class="cloud-content">
@@ -48,7 +43,6 @@
         <i class="fa-solid fa-arrow-right"></i>
       </span>
     </a>
-    </div>
 
   </main>