feat: smooth scroll animation and back-to-top button

css/styles.css

@@ -347,7 +347,7 @@ img {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 20px 20px 25px 20px;
+    padding: 16px 40px;
     background-color: var(--main-bg);
     position: sticky;
     top: 0;
@@ -357,72 +357,8 @@ img {
     max-width: calc(100vw - 250px);
     margin-bottom: 20px;
     margin-left: -20px;
-    padding-left: 40px;
-    padding-right: 40px;
     box-sizing: border-box;
-}
+    gap: 16px;
-
-.search-container {
-    flex: 1;
-    max-width: 600px;
-    margin: 0 auto;
-}
-
-.search-container form {
-    display: flex;
-    position: relative;
-}
-
-.search-container input {
-    width: 100%;
-    padding: 12px 45px 12px 15px;
-    border: 1px solid #e0e0e0;
-    border-radius: 25px;
-    background-color: #f8f8f8;
-    font-size: 16px;
-    transition: all 0.3s ease;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    color: var(--text-color);
-}
-
-.search-container input:focus {
-    outline: none;
-    border-color: var(--primary-red);
-    background-color: white;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.search-container input::placeholder {
-    color: #9e9e9e;
-    transition: opacity 0.3s ease;
-}
-
-.search-container input:focus::placeholder {
-    opacity: 0.7;
-}
-
-.search-container button {
-    position: absolute;
-    right: 5px;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: var(--primary-red);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 35px;
-    height: 35px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    transition: all 0.3s ease;
-}
-
-.search-container button:hover {
-    background-color: #d40000;
-    transform: translateY(-50%) scale(1.05);
 }
 
 .social-icons, .action-icons {
@@ -2054,19 +1990,18 @@ img {
     .sidebar {
         width: 70px;
     }
-    
+
     .main-content, .footer {
         margin-left: 70px;
         width: calc(100% - 70px);
     }
-    
+
-    /* Ajuster le header pour le mode sidebar compact */
     .header {
         width: 100%;
         max-width: calc(100vw - 70px);
         margin-left: -20px;
-        padding-left: 40px;
+        padding-left: 24px;
-        padding-right: 40px;
+        padding-right: 24px;
         box-sizing: border-box;
     }
     
@@ -2127,26 +2062,21 @@ img {
         width: 100%;
     }
     
-    /* Ajuster le header pour l'affichage mobile */
     .header {
         width: 100vw;
         max-width: 100vw;
         margin-left: -20px;
-        padding-left: 20px;
+        padding-left: 16px;
-        padding-right: 20px;
+        padding-right: 16px;
         box-sizing: border-box;
         position: relative;
         left: 0;
     }
-    
+
     .mobile-menu-toggle {
         display: block;
     }
-    
+
-    .search-container {
-        max-width: 60%;
-    }
-    
     .social-icons {
         display: none;
     }
@@ -2329,8 +2259,14 @@ i.icon-tiktok,
 }
 
 [data-theme="dark"] .header i.icon-tiktok,
-[data-theme="dark"] .header .fab.fa-tiktok.icon-tiktok {
+[data-theme="dark"] .header .fab.fa-tiktok.icon-tiktok,
-    color: #ffffff !important; /* Blanc TikTok en mode sombre - header seulement */
+[data-theme="dark"] .sidebar i.icon-tiktok,
+[data-theme="dark"] .sidebar .fab.fa-tiktok.icon-tiktok,
+[data-theme="dark"] .mobile-menu i.icon-tiktok,
+[data-theme="dark"] .mobile-menu .fab.fa-tiktok.icon-tiktok,
+[data-theme="dark"] .footer i.icon-tiktok,
+[data-theme="dark"] .footer .fab.fa-tiktok.icon-tiktok {
+    color: #ffffff !important;
 }
 
 i.icon-tiktok-accent {
@@ -3298,4 +3234,57 @@ i.icon-mastodon,
     }
 }
 
- 
+ 
+/* ============================================================
+   BACK TO TOP BUTTON
+   ============================================================ */
+
+#back-to-top {
+    position: fixed;
+    bottom: 32px;
+    right: 32px;
+    z-index: 900;
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    border: none;
+    background: #FF0000;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 16px rgba(255, 0, 0, 0.45);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(12px);
+    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s ease;
+}
+
+#back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+#back-to-top:hover {
+    background: #cc0000;
+    transform: translateY(-3px);
+    box-shadow: 0 8px 24px rgba(255, 0, 0, 0.5);
+}
+
+#back-to-top:active {
+    transform: scale(0.9);
+    transition-duration: 0.08s;
+}
+
+@media (max-width: 768px) {
+    #back-to-top {
+        bottom: 20px;
+        right: 16px;
+        width: 40px;
+        height: 40px;
+        font-size: 15px;
+    }
+}

js/main.js

@@ -406,6 +406,50 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
     
+    // Scroll animé vers les sections depuis les badges hero et les liens de navigation
+    document.querySelectorAll('a[href^="#"]').forEach(function(link) {
+        link.addEventListener('click', function(e) {
+            const targetId = this.getAttribute('href').slice(1);
+            const target = document.getElementById(targetId);
+            if (!target) return;
+
+            e.preventDefault();
+
+            // Fermer le menu mobile si ouvert
+            if (mobileMenu && mobileMenu.classList.contains('active')) {
+                mobileMenu.classList.remove('active');
+                document.body.style.overflow = '';
+            }
+
+            const offset = 24;
+            const top = target.getBoundingClientRect().top + window.scrollY - offset;
+
+            window.scrollTo({ top: top, behavior: 'smooth' });
+
+            // Highlight de la section à l'arrivée
+            const duration = Math.min(
+                600 + Math.abs(top - window.scrollY) / 4,
+                1200
+            );
+            setTimeout(function() {
+                target.classList.add('section-arrive');
+                setTimeout(function() { target.classList.remove('section-arrive'); }, 900);
+            }, duration);
+        });
+    });
+
+    // Bouton retour en haut
+    const backToTop = document.getElementById('back-to-top');
+    if (backToTop) {
+        window.addEventListener('scroll', function() {
+            backToTop.classList.toggle('visible', window.scrollY > 300);
+        }, { passive: true });
+
+        backToTop.addEventListener('click', function() {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    }
+
     // Scroll vers le haut avec effet moderne quand on clique sur le logo du footer
     const footerLogo = document.querySelector('.footer-logo');
     if (footerLogo) {
@@ -416,4 +460,23 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         });
     }
+
+    // Auto-resize des iframes de profil social (TikTok, Instagram)
+    // Ces plateformes envoient des postMessage avec leur hauteur réelle
+    window.addEventListener('message', function(e) {
+        if (!e.data || !e.origin) return;
+        try {
+            const data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
+            const height = data.height ?? data.contentHeight ?? data['height'];
+            if (!height || typeof height !== 'number' || height < 100) return;
+
+            document.querySelectorAll('.platform-profile-iframe').forEach(function(iframe) {
+                try {
+                    if (new URL(iframe.src).origin === e.origin) {
+                        iframe.style.height = Math.ceil(height) + 'px';
+                    }
+                } catch (_) {}
+            });
+        } catch (_) {}
+    });
 });