stylé de ouf 2

src/pages/index.astro

@@ -82,11 +82,11 @@ const schemaOrg = {
                 <p id="panel-desc" class="panel-desc"></p>
                 <hr>
 
-                <details class="accordion">
+                <details class="accordion" open>
                     <summary>SPÉCIFICATIONS TECHNIQUES <span>↓</span></summary>
                     <div class="accordion-body" id="panel-specs"></div>
                 </details>
-                <details class="accordion">
+                <details class="accordion" open>
                     <summary>NOTES DE CONCEPTION <span>↓</span></summary>
                     <div class="accordion-body" id="panel-notes"></div>
                 </details>
@@ -211,7 +211,7 @@ const schemaOrg = {
                 <div class="nl-right">
                     <div class="nl-form" style="pointer-events: auto;">
                         <p class="mono-sm" style="line-height: 1.9; margin-bottom: 0.5rem;">Commandes sur mesure, questions techniques,<br>ou simplement dire bonjour.</p>
-                        <a href="https://wa.me/33XXXXXXXXX" target="_blank" rel="noopener" class="whatsapp-btn" aria-label="Nous contacter sur WhatsApp">
+                        <a href="https://wa.me/33651755191" target="_blank" rel="noopener" class="whatsapp-btn" aria-label="Nous contacter sur WhatsApp">
                             <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;">
                                 <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                             </svg>
@@ -265,7 +265,7 @@ const schemaOrg = {
                 <button type="submit" class="contact-submit">
                     ENVOYER LE MESSAGE →
                 </button>
-                <p class="mono-sm contact-note"><span class="blink">■</span> REDIRECTION VERS VOTRE CLIENT MAIL</p>
+                <p class="mono-sm contact-note"><span class="blink">■</span> REDIRECTION VERS WHATSAPP</p>
             </form>
         </div>
     </div>

src/scripts/main.js

@@ -46,10 +46,10 @@ document.addEventListener('DOMContentLoaded', () => {
             const x = e.clientX;
             const y = e.clientY;
 
-            cursorH.style.left = (x - 20) + 'px';
+            cursorH.style.left = (x - 16) + 'px';
             cursorH.style.top = y + 'px';
             cursorV.style.left = x + 'px';
-            cursorV.style.top = (y - 20) + 'px';
+            cursorV.style.top = (y - 16) + 'px';
             cursorCenter.style.left = x + 'px';
             cursorCenter.style.top = y + 'px';
             cursorCoords.style.left = (x + 16) + 'px';
@@ -85,6 +85,12 @@ document.addEventListener('DOMContentLoaded', () => {
         attachCursorHover(document.querySelectorAll(
             'a, button, input, .product-card, summary, .panel-close'
         ));
+
+        // WhatsApp hover — green center dot
+        document.querySelectorAll('.whatsapp-btn').forEach(el => {
+            el.addEventListener('mouseenter', () => cursorCenter.classList.add('cad-whatsapp'));
+            el.addEventListener('mouseleave', () => cursorCenter.classList.remove('cad-whatsapp'));
+        });
     }
 
     // ==========================================================
@@ -131,8 +137,70 @@ document.addEventListener('DOMContentLoaded', () => {
     //  3. GSAP SCROLL ANIMATIONS — CAD REVEAL
     // ==========================================================
 
-    // ---- Hero parallax ----
+    // ---- Header fade in ----
+    const header = document.querySelector('.header');
+    if (header) {
+        gsap.fromTo(header,
+            { opacity: 0, y: -10 },
+            { opacity: 1, y: 0, duration: 0.5, ease: 'power2.out' }
+        );
+    }
+
+    // ---- Hero animations (scroll-triggered, replay in/out) ----
+    const heroLabel = document.querySelector('.hero-left .label');
+    const heroH1 = document.querySelector('.hero-left h1');
+    const heroSubs = document.querySelectorAll('.hero-sub');
     const heroImg = document.querySelector('.hero-img');
+    const heroRight = document.querySelector('.hero-right');
+
+    const heroTl = gsap.timeline({
+        defaults: { ease: 'power3.out' },
+        scrollTrigger: {
+            trigger: '.hero',
+            start: 'top 95%',
+            end: 'bottom 5%',
+            toggleActions: 'play reverse play reverse',
+        },
+    });
+
+    if (heroLabel) {
+        heroTl.fromTo(heroLabel,
+            { opacity: 0, x: -20 },
+            { opacity: 1, x: 0, duration: 0.6 },
+            0.1
+        );
+    }
+
+    if (heroH1) {
+        heroTl.fromTo(heroH1,
+            { opacity: 0, y: 40, clipPath: 'inset(0 0 100% 0)' },
+            { opacity: 1, y: 0, clipPath: 'inset(0 0 0% 0)', duration: 1 },
+            0.2
+        );
+    }
+
+    heroSubs.forEach((sub, i) => {
+        heroTl.fromTo(sub,
+            { opacity: 0, y: 20 },
+            { opacity: 1, y: 0, duration: 0.6 },
+            0.5 + i * 0.15
+        );
+    });
+
+    if (heroImg && heroRight) {
+        heroTl.fromTo(heroRight,
+            { clipPath: 'inset(0 0 0 100%)' },
+            { clipPath: 'inset(0 0 0 0%)', duration: 1.2, ease: 'power4.inOut' },
+            0.3
+        );
+        heroTl.fromTo(heroImg,
+            { scale: 1.15, opacity: 0 },
+            { scale: 1, opacity: 0.92, duration: 1.4, ease: 'power2.out' },
+            0.4
+        );
+    }
+
+    // Hero parallax on scroll
     if (heroImg) {
         gsap.to(heroImg, {
             yPercent: 15,
@@ -153,22 +221,28 @@ document.addEventListener('DOMContentLoaded', () => {
         line.className = 'cad-construction-line';
         collectionHeader.appendChild(line);
 
-        gsap.from(line, {
+        gsap.fromTo(line,
-            scaleX: 0,
+            { scaleX: 0 },
-            transformOrigin: 'left center',
+            {
-            duration: 0.8,
+                scaleX: 1,
-            ease: 'power2.out',
+                transformOrigin: 'left center',
-            scrollTrigger: {
+                duration: 0.8,
-                trigger: collectionHeader,
+                ease: 'power2.out',
-                start: 'top 85%',
+                scrollTrigger: {
-            },
+                    trigger: collectionHeader,
-        });
+                    start: 'top 95%',
+                    end: 'bottom 5%',
+                    toggleActions: 'play reverse play reverse',
+                },
+            }
+        );
     }
 
-    // ---- Product cards: simple fade-in on scroll ----
+    // ---- Product cards: scale + fade reveal on scroll (replays) ----
     const cards = document.querySelectorAll('.product-card');
 
-    cards.forEach((card) => {
+    cards.forEach((card, i) => {
+        const imgWrap = card.querySelector('.card-img-wrap');
         const img = card.querySelector('.card-img-wrap img');
         const meta = card.querySelector('.card-meta');
 
@@ -177,39 +251,52 @@ document.addEventListener('DOMContentLoaded', () => {
         const tl = gsap.timeline({
             scrollTrigger: {
                 trigger: card,
-                start: 'top 88%',
+                start: 'top 95%',
-                toggleActions: 'play none none none',
+                end: 'bottom 5%',
+                toggleActions: 'play reverse play reverse',
             },
         });
 
-        // Simple fade + slide up
+        // Clip-path reveal + scale + fade
+        tl.fromTo(imgWrap,
+            { clipPath: 'inset(8% 8% 8% 8%)' },
+            { clipPath: 'inset(0% 0% 0% 0%)', duration: 0.8, ease: 'power3.out' },
+            0
+        );
+
         tl.fromTo(img,
-            { opacity: 0, y: 20 },
+            { opacity: 0, scale: 1.12 },
-            { opacity: 1, y: 0, duration: 0.6, ease: 'power2.out' },
+            { opacity: 1, scale: 1, duration: 0.9, ease: 'power2.out' },
             0
         );
 
         if (meta) {
             tl.fromTo(meta,
-                { opacity: 0, y: 8 },
+                { opacity: 0, y: 15 },
-                { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' },
+                { opacity: 1, y: 0, duration: 0.5, ease: 'power2.out' },
-                0.2
+                0.25
             );
         }
     });
 
-    // ---- Newsletter section: slide in ----
+    // ---- Newsletter section: slide in (replays) ----
     const nlLeft = document.querySelector('.nl-left');
     const nlRight = document.querySelector('.nl-right');
     if (nlLeft && nlRight) {
-        gsap.from(nlLeft, {
+        gsap.fromTo(nlLeft,
-            opacity: 0, x: -30, duration: 0.7, ease: 'power2.out',
+            { opacity: 0, x: -40 },
-            scrollTrigger: { trigger: '.newsletter', start: 'top 80%' },
+            {
-        });
+                opacity: 1, x: 0, duration: 0.7, ease: 'power2.out',
-        gsap.from(nlRight, {
+                scrollTrigger: { trigger: '.newsletter', start: 'top 95%', end: 'bottom 5%', toggleActions: 'play reverse play reverse' },
-            opacity: 0, x: 30, duration: 0.7, ease: 'power2.out', delay: 0.15,
+            }
-            scrollTrigger: { trigger: '.newsletter', start: 'top 80%' },
+        );
-        });
+        gsap.fromTo(nlRight,
+            { opacity: 0, x: 40 },
+            {
+                opacity: 1, x: 0, duration: 0.7, ease: 'power2.out', delay: 0.15,
+                scrollTrigger: { trigger: '.newsletter', start: 'top 95%', end: 'bottom 5%', toggleActions: 'play reverse play reverse' },
+            }
+        );
     }
 
     // ==========================================================
@@ -336,7 +423,7 @@ document.addEventListener('DOMContentLoaded', () => {
         checkoutSubmitBtn.textContent = 'PROCÉDER AU PAIEMENT →';
         checkoutForm.reset();
 
-        panel.querySelectorAll('details').forEach(d => d.removeAttribute('open'));
+        panel.querySelectorAll('details').forEach(d => d.setAttribute('open', ''));
         panel.classList.add('is-open');
         panel.setAttribute('aria-hidden', 'false');
         document.body.style.overflow = 'hidden';
@@ -511,7 +598,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
-    // Form → mailto
+    // Form → WhatsApp
     if (contactForm) {
         contactForm.addEventListener('submit', (e) => {
             e.preventDefault();
@@ -520,9 +607,8 @@ document.addEventListener('DOMContentLoaded', () => {
             const subject = document.getElementById('contact-subject').value.trim() || 'Contact depuis rebours.studio';
             const message = document.getElementById('contact-message').value.trim();
 
-            const body = `${message}\n\n— ${name}\n${email}`;
+            const text = `*${subject}*\n\n${message}\n\n— ${name}\n${email}`;
-            const mailto = `mailto:contact@rebours.fr?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+            window.open(`https://wa.me/33651755191?text=${encodeURIComponent(text)}`, '_blank');
-            window.location.href = mailto;
         });
     }