diff --git a/assets/parachute.lottie b/assets/parachute.lottie
new file mode 100644
index 0000000..dbc5370
Binary files /dev/null and b/assets/parachute.lottie differ
diff --git a/css/parallax.css b/css/parallax.css
index 7510186..0ca2381 100644
--- a/css/parallax.css
+++ b/css/parallax.css
@@ -117,80 +117,101 @@ html, body {
linear-gradient(180deg, transparent 50%, rgba(5, 5, 24, 0.35) 100%);
}
-/* ── BOUTON CTA centré ──────────────────────────────────────────────────── */
-.cta-btn {
+/* ── PARACHUTE + BOUTON-NUAGE ────────────────────────────────────────────
+ Le bloc tombe du haut de l'écran jusqu'au centre via translateY animé,
+ plus rapide que les parachutes de la vidéo (~1.6s vs 7s). Après l'atter-
+ rissage, le parachute Lottie continue à boucler doucement au-dessus
+ du nuage. Aucune parallaxe souris sur ce groupe — la chute est l'effet. */
+.cta-stack {
position: absolute;
top: 50%;
left: 50%;
- /* Bouge légèrement en sens INVERSE des couches → effet de tilt 3D */
- transform: translate(
- calc(-50% + var(--mx) * 8px),
- calc(-50% + var(--my) * 8px)
- );
z-index: 10;
+ display: flex;
+ flex-direction: column;
+ 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;
+}
+.cta-stack > * { pointer-events: auto; }
+
+@keyframes parachute-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 {
+ width: 170px;
+ height: 170px;
+ margin-bottom: -22px;
+ filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
+ pointer-events: none;
+}
+
+/* ── BOUTON-NUAGE ────────────────────────────────────────────────────────
+ Pill blanche moelleuse + 5 puffs en absolu pour la silhouette nuage. */
+.cloud-btn {
+ position: relative;
display: inline-flex;
align-items: center;
- gap: 16px;
- 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;
+ padding: 22px 52px;
+ border-radius: 60px;
+ background: linear-gradient(180deg, #ffffff 0%, #eaf1ff 100%);
+ color: var(--navy);
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 1.1rem;
- letter-spacing: 0.6px;
- overflow: hidden;
+ letter-spacing: 0.4px;
white-space: nowrap;
box-shadow:
- 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),
- transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
+ 0 24px 70px rgba(120, 150, 220, 0.45),
+ 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);
}
-
-.cta-btn:hover {
- transform: translate(
- calc(-50% + var(--mx) * 8px),
- calc(-50% + var(--my) * 8px)
- ) scale(1.04);
+.cloud-btn:hover {
+ transform: 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);
+ 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);
}
-.cta-btn-shine {
+/* Puffs de nuage — 5 boules positionnées autour de la pill */
+.cloud-puff {
position: absolute;
- top: 0; left: -120%;
- width: 60%; height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
- transform: skewX(-22deg);
- transition: left 0.7s ease;
- pointer-events: none;
+ background: linear-gradient(180deg, #ffffff 0%, #e7eefc 100%);
+ border-radius: 50%;
+ box-shadow:
+ inset 0 -3px 6px rgba(180, 200, 235, 0.5),
+ inset 0 2px 0 rgba(255, 255, 255, 0.9);
+ z-index: 0;
}
-.cta-btn:hover .cta-btn-shine { left: 130%; }
+.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%; }
-.cta-btn i {
+.cloud-content {
+ position: relative;
+ z-index: 1;
+ display: inline-flex;
+ align-items: center;
+ gap: 14px;
+}
+.cloud-content i {
font-size: 0.95rem;
transition: transform 0.32s ease;
}
-.cta-btn:hover i { transform: translateX(8px); }
-
-.cta-btn::after {
- content: '';
- position: absolute;
- inset: -3px;
- border-radius: 50px;
- border: 2px solid rgba(197, 165, 90, 0.55);
- animation: ctaPulse 2.8s ease-out infinite;
- pointer-events: none;
-}
-@keyframes ctaPulse {
- 0% { transform: scale(1); opacity: 0.7; }
- 100% { transform: scale(1.18); opacity: 0; }
-}
+.cloud-btn:hover .cloud-content i { transform: translateX(6px); }
/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
@@ -199,12 +220,15 @@ html, body {
.parallax-logo img { height: 38px; }
.lang-switcher button { padding: 5px 10px; font-size: 0.74rem; }
- .cta-btn {
- padding: 16px 36px;
- font-size: 0.98rem;
- }
+ .cta-parachute { width: 130px; height: 130px; margin-bottom: -16px; }
+ .cloud-btn { padding: 16px 34px; font-size: 0.98rem; }
+ .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) {
- .cta-btn::after { animation: none; }
+ .cta-stack { animation: none; }
}
diff --git a/index.html b/index.html
index 3e14ffd..bdec668 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
+
@@ -36,11 +37,22 @@
-
-
- Accéder au site
-
-
+