Revert to original gold-pill CTA — cloud version was off-brand

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>

css/parallax.css

@@ -109,79 +109,86 @@ html, body {
   transform: translate(calc(var(--mx) * -22px), calc(var(--my) * -22px)) scale(1.06);
 }
 
-/* Voile très léger — la vidéo en golden hour est belle, on la laisse vivre.
-   Petit assombrissement vers les bords pour la lisibilité du bouton. */
 .layer-tint {
   background:
-    radial-gradient(ellipse at center, transparent 0%, rgba(5, 5, 24, 0.32) 100%),
+    radial-gradient(ellipse at center, transparent 0%, rgba(5, 5, 24, 0.55) 100%),
-    linear-gradient(180deg, transparent 50%, rgba(5, 5, 24, 0.35) 100%);
+    linear-gradient(180deg, rgba(5, 5, 24, 0.25) 0%, rgba(5, 5, 24, 0.5) 100%);
 }
 
-/* ── BOUTON-NUAGE ────────────────────────────────────────────────────────
+/* ── BOUTON CTA centré ──────────────────────────────────────────────────── */
-   Le nuage tombe du haut jusqu'au centre via animation, ~3.4s avec léger
+.cta-btn {
-   overshoot. Une fois posé, hover scale léger. */
-.cloud-btn {
   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: inline-flex;
   align-items: center;
-  justify-content: center;
+  gap: 16px;
-  text-decoration: none;
+  padding: 22px 56px;
-  width: 520px;
+  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--gold) 100%);
-  height: 360px;
   color: var(--navy);
+  text-decoration: none;
+  border-radius: 50px;
   font-family: 'Poppins', sans-serif;
   font-weight: 700;
-  font-size: 1.4rem;
+  font-size: 1.1rem;
-  letter-spacing: 0.4px;
+  letter-spacing: 0.6px;
+  overflow: hidden;
   white-space: nowrap;
-  filter: drop-shadow(0 28px 38px rgba(20, 20, 50, 0.45));
+  box-shadow:
-  animation: cloud-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both;
+    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);
 }
 
-@keyframes cloud-drop {
+.cta-btn:hover {
-  0%   { transform: translate(-50%, -130vh); opacity: 0; }
+  transform: translate(
-  10%  { opacity: 1; }
+    calc(-50% + var(--mx) * 8px),
-  85%  { transform: translate(-50%, -42%);   opacity: 1; }
+    calc(-50% + var(--my) * 8px)
-  100% { transform: translate(-50%, -50%); }
+  ) 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);
 }
 
-.cloud-btn:hover {
+.cta-btn-shine {
-  transform: translate(-50%, -50%) scale(1.05);
-  /* hover désactive l'animation de chute pour que scale ne saute pas */
-  animation: none;
-}
-
-.cloud-bg {
   position: absolute;
-  inset: 0;
+  top: 0; left: -120%;
-  width: 100%;
+  width: 60%; height: 100%;
-  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
-  object-fit: contain;
+  transform: skewX(-22deg);
+  transition: left 0.7s ease;
   pointer-events: none;
-  z-index: 0;
-  user-select: none;
 }
+.cta-btn:hover .cta-btn-shine { left: 130%; }
 
-/* Texte centré sur le « cœur » du nuage (légèrement plus haut que le centre
+.cta-btn i {
-   géométrique de l'image, parce que le nuage Fluent a une grosse base et un
+  font-size: 0.95rem;
-   sommet bombé). */
-.cloud-content {
-  position: relative;
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  gap: 14px;
-  margin-top: -10px;
-  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
-}
-.cloud-content i {
-  font-size: 1.05rem;
   transition: transform 0.32s ease;
 }
-.cloud-btn:hover .cloud-content i { transform: translateX(6px); }
+.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;   }
+}
 
 /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
@@ -190,9 +197,12 @@ html, body {
   .parallax-logo img { height: 38px; }
   .lang-switcher button { padding: 5px 10px; font-size: 0.74rem; }
 
-  .cloud-btn { width: 360px; height: 250px; font-size: 1.05rem; }
+  .cta-btn {
+    padding: 16px 36px;
+    font-size: 0.98rem;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .cloud-btn { animation: none; }
+  .cta-btn::after { animation: none; }
 }

index.html

@@ -36,12 +36,10 @@
 
     <div class="layer layer-tint"></div>
 
-    <a href="accueil.html" class="cta-btn cloud-btn">
+    <a href="accueil.html" class="cta-btn">
-      <img class="cloud-bg" src="assets/cloud.png" alt="">
+      <span class="cta-btn-shine"></span>
-      <span class="cloud-content">
       <span data-i18n="intro.ctaBtn">Accéder au site</span>
       <i class="fa-solid fa-arrow-right"></i>
-      </span>
     </a>
 
   </main>