/* ============================================================ SIGNON — Version animée : calques d'animation (GSAP + Lenis) Charge APRÈS styles.css + sections.css. Les états masqués ne s'appliquent que si .js-anim est présent (ajouté en uniquement si JS actif ET motion autorisé) — donc no-JS / prefers-reduced-motion affichent tout normalement. ============================================================ */ /* ---- Lenis : laisser Lenis piloter le défilement ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ---- Barre de progression de lecture ---- */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 300; pointer-events: none; background: transparent; opacity: 0; transition: opacity .4s ease; } .js-anim .scroll-progress { opacity: 1; } .scroll-progress > i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left center; background: var(--grad); box-shadow: 0 1px 10px rgba(0,108,205,.45); } /* ---- Découpage des titres en mots (reveal) ---- */ .word { display: inline-block; } .word-i { display: inline-block; will-change: transform; } /* ============================================================ ÉTATS MASQUÉS INITIAUX (uniquement sous .js-anim) ============================================================ */ /* HERO — au-dessus de la ligne de flottaison : on masque en CSS pour éviter tout flash avant l'exécution de GSAP */ .js-anim .hero-copy .reveal { opacity: 0; } .js-anim #hero-title .w > span { opacity: 0; } .js-anim .hero-visual { opacity: 0; } /* Blob d'ambiance supplémentaire */ .hero-blob.b3 { width: 360px; height: 360px; top: 34%; left: 42%; background: radial-gradient(circle at 50% 50%, #d9ccff, transparent 70%); opacity: .3; } /* ============================================================ FEUILLE DE ROUTE — tracé animé du connecteur (le trait se dessine ; .drawn ajouté par GSAP à l'entrée) ============================================================ */ .js-anim .roadmap .rm-step::before { transform: scaleX(0); transform-origin: left center; } .roadmap.drawn .rm-step::before { transform: scaleX(1); transition: transform .55s cubic-bezier(.45,0,.2,1); } .roadmap.drawn .rm-step:nth-of-type(2)::before { transition-delay: .16s; } .roadmap.drawn .rm-step:nth-of-type(3)::before { transition-delay: .32s; } .roadmap.drawn .rm-step:nth-of-type(4)::before { transition-delay: .48s; } @media (max-width: 820px) { .js-anim .roadmap .rm-step::before { transform: scaleY(0); transform-origin: top center; } .roadmap.drawn .rm-step::before { transform: scaleY(1); } } /* ============================================================ MICRO-INTERACTIONS ============================================================ */ /* Boutons magnétiques : GSAP pilote translate ; on neutralise le lift CSS au survol pour éviter le conflit de transform */ .js-anim .btn-primary { will-change: transform; } /* Lueur douce qui suit le curseur sur les cartes */ .mode-card, .price-card, .feat-card { --mx: 50%; --my: 0%; } .js-anim .mode-card, .js-anim .price-card, .js-anim .feat-card { position: relative; } .js-anim .mode-card > *, .js-anim .price-card > *, .js-anim .feat-card > * { position: relative; z-index: 1; } .js-anim .mode-card::before, .js-anim .price-card::before, .js-anim .feat-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s ease; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(0,108,205,.10), transparent 62%); } .js-anim .mode-card:hover::before, .js-anim .price-card:hover::before, .js-anim .feat-card:hover::before { opacity: 1; } /* mode-card a déjà un ::after (barre d'accent) — on s'assure qu'il reste au-dessus de la lueur */ .mode-card::after { z-index: 2; } /* ============================================================ COMMENT ÇA MARCHE — connecteur dessiné + mise en avant cyclique ============================================================ */ .js-anim .hiw-steps .hiw-step::before, .js-anim .hiw-steps .hiw-step::after { transform: scaleY(0); transform-origin: top center; } .hiw-steps.hiw-drawn .hiw-step::before, .hiw-steps.hiw-drawn .hiw-step::after { transform: scaleY(1); transition: transform .5s cubic-bezier(.45,0,.2,1); } .hiw-steps.hiw-drawn .hiw-step:nth-of-type(2)::before { transition-delay: .18s; } .hiw-steps.hiw-drawn .hiw-step:nth-of-type(2)::after { transition-delay: .30s; } .hiw-steps.hiw-drawn .hiw-step:nth-of-type(3)::before { transition-delay: .42s; } .hiw-stage.is-live .hiw-step .hiw-num, .hiw-stage.is-live .hiw-step .hiw-text { opacity: .5; transition: opacity .4s ease; } .hiw-stage.is-live .hiw-step.active .hiw-num, .hiw-stage.is-live .hiw-step.active .hiw-text { opacity: 1; } /* phrase de clôture « tapée » en fin de scroll (section verrouillée) */ .hiw-outro { grid-column: 1 / -1; margin: clamp(20px, 3vw, 34px) 0 0; text-align: center; font-size: clamp(20px, 3vw, 30px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; min-height: 1.2em; } .hiw-outro-txt { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hiw-caret { display: none; width: 3px; height: 1em; vertical-align: -3px; margin-left: 4px; background: var(--accent); border-radius: 2px; } .js-anim .hiw-caret { display: inline-block; animation: hiwCaret 1s steps(1) infinite; } @keyframes hiwCaret { 50% { opacity: 0; } } /* ============================================================ SÉCURITÉ — prefers-reduced-motion : tout visible, aucune transition (en principe .js-anim n'est pas posé dans ce cas, ceci est un filet) ============================================================ */ @media (prefers-reduced-motion: reduce) { .hero-copy .reveal, #hero-title .w > span, .hero-visual { opacity: 1 !important; } .roadmap .rm-step::before { transform: none !important; transition: none !important; } .scroll-progress { display: none; } .hero-blob { animation: none !important; } } /* SIGNON brand logo — draw-in (same as identity page) */ .brand-svg{height:38px;width:auto;display:block;overflow:visible;transform-origin:center center;animation:lgBreathe 6s ease-in-out 2.8s infinite} @keyframes lgDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes lgFade{from{opacity:0}to{opacity:1}} @keyframes lgBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.016)}} @media (prefers-reduced-motion: reduce){.brand-svg{animation:none !important}.brand-svg path{animation:none !important;opacity:1 !important;stroke-dashoffset:0 !important}}