diff --git a/assets/cloud.png b/assets/cloud.png
deleted file mode 100644
index a3a1de1..0000000
Binary files a/assets/cloud.png and /dev/null differ
diff --git a/css/parallax.css b/css/parallax.css
index 9baf2c7..6dc8109 100644
--- a/css/parallax.css
+++ b/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%),
- linear-gradient(180deg, transparent 50%, rgba(5, 5, 24, 0.35) 100%);
+ radial-gradient(ellipse at center, transparent 0%, rgba(5, 5, 24, 0.55) 100%),
+ linear-gradient(180deg, rgba(5, 5, 24, 0.25) 0%, rgba(5, 5, 24, 0.5) 100%);
}
-/* ── BOUTON-NUAGE ────────────────────────────────────────────────────────
- Le nuage tombe du haut jusqu'au centre via animation, ~3.4s avec léger
- overshoot. Une fois posé, hover scale léger. */
-.cloud-btn {
+/* ── BOUTON CTA centré ──────────────────────────────────────────────────── */
+.cta-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;
- text-decoration: none;
- width: 520px;
- height: 360px;
+ 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;
font-family: 'Poppins', sans-serif;
font-weight: 700;
- font-size: 1.4rem;
- letter-spacing: 0.4px;
+ font-size: 1.1rem;
+ letter-spacing: 0.6px;
+ overflow: hidden;
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;
+ 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);
}
-@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-btn:hover {
+ transform: translate(
+ calc(-50% + var(--mx) * 8px),
+ calc(-50% + var(--my) * 8px)
+ ) 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 {
- transform: translate(-50%, -50%) scale(1.05);
- /* hover désactive l'animation de chute pour que scale ne saute pas */
- animation: none;
-}
-
-.cloud-bg {
+.cta-btn-shine {
position: absolute;
- inset: 0;
- width: 100%;
- height: 100%;
- object-fit: contain;
+ 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;
- 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
- 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;
- margin-top: -10px;
- text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
-}
-.cloud-content i {
- font-size: 1.05rem;
+.cta-btn i {
+ font-size: 0.95rem;
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; }
}
diff --git a/index.html b/index.html
index 814d73f..3e14ffd 100644
--- a/index.html
+++ b/index.html
@@ -36,12 +36,10 @@
-
- 
-
- Accéder au site
-
-
+
+
+ Accéder au site
+