/* ============================================================ Ajustements pour la version statique autonome (clone Strikingly) ============================================================ */ /* Défilement fluide pour les ancres de navigation */ html { scroll-behavior: smooth; } /* Sécurité : rien ne doit déborder horizontalement */ body { overflow-x: hidden; } /* Masquer d'éventuels résidus de widgets supprimés */ #s-mobile-shopping-cart-new, .mobile-cart-icon, .s-cookie-notification-bar, #fb-root { display: none !important; } /* ------------------------------------------------------------ 1) ANIMATIONS À L'APPARITION (révélation au défilement) La classe .reveal-on n'est ajoutée sur QUE si IntersectionObserver est disponible (voir le script en ). Si le JS échoue ou est absent, aucun contenu n'est masqué. La section des témoignages est exclue (carrousel géré à part). ------------------------------------------------------------ */ html.reveal-on #s-content .s-section .s-component { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; } html.reveal-on #s-content .s-section .s-component.is-visible { opacity: 1; transform: none; } /* Ne jamais masquer le contenu du carrousel de témoignages ni le pied de page */ html.reveal-on #s-content .s-slider-section .s-component, html.reveal-on #s-content .s-slider-section .s-component.is-visible, html.reveal-on #s-content [class*="footer"] .s-component, html.reveal-on #s-content [class*="footer"] .s-component.is-visible { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html.reveal-on #s-content .s-section .s-component { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ------------------------------------------------------------ 2) CARROUSEL DES TÉMOIGNAGES (repiloté sans Slick/jQuery) Le JS ajoute la classe .sc-ready après avoir purgé les styles inline figés de Slick et retiré les slides clonés. ------------------------------------------------------------ */ .s-slider-section .slick-slider.sc-ready .slick-list { overflow: hidden; transition: height .4s ease; } .s-slider-section .slick-slider.sc-ready .slick-track { display: flex; align-items: flex-start; width: auto !important; transform: translateX(0); transition: transform .6s ease; will-change: transform; } .s-slider-section .slick-slider.sc-ready .slick-slide { flex: 0 0 100%; width: 100% !important; max-width: 100%; height: auto; float: none; display: block; } /* Flèches et points de pagination natifs : cliquables et au-dessus du contenu */ .s-slider-section .prev-button, .s-slider-section .next-button, .s-slider-section .selector-wrapper { cursor: pointer; z-index: 30; } .s-slider-section .slide-selectors-inner { z-index: 30; } /* ------------------------------------------------------------ 3) Section « À bientôt » : cadrage remonté vers le visage (le centrage d'origine coupait le visage) + section un peu plus haute pour mieux la mettre en valeur. ------------------------------------------------------------ */ #section-f_53d62f6e-cfac-4a8a-b63b-2f8174f965f0 .s-bg-image { background-position: 50% 20% !important; min-height: 500px !important; }