/* ===================================================================== Couche « spectaculaire » de Rivage — Pop Azur Règles : uniquement transform/opacity (60 fps sur téléphone), déclenché par IntersectionObserver, et tout se désactive avec prefers-reduced-motion. Les propriétés individuelles translate / rotate / scale se composent avec les `transform` inline du design : rien n'est écrasé. Garde-fou : les états initiaux ne s'appliquent que si (posé en tête de page, retiré si fx.js échoue) — sans JS, le site est la maquette statique complète. ===================================================================== */ :root { --ink: #0E0E12; --blue: #1B3DF0; --yel: #FFC93C; --red: #FF5136; --green: #2BB673; --bg: #EEF1F7; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-pop: cubic-bezier(.2, 1.5, .4, 1); } /* Les états initiaux (badges agrandis, notifs décalées…) ne doivent jamais élargir la page sur mobile : clip ne crée pas de zone de défilement, contrairement à hidden (fallback conservé dans base.css). */ html, body { overflow-x: clip; } #maquettes { scroll-margin-top: 90px; } a, button { -webkit-tap-highlight-color: transparent; } /* ---------- Intro : tampon « RIVAGE. » puis rideau circulaire ---------- */ #intro { position: fixed; inset: 0; z-index: 2000; background: var(--bg); display: grid; place-items: center; pointer-events: none; clip-path: circle(120% at 50% 50%); } #intro::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(14,14,18,.18) 1.3px, transparent 1.3px); background-size: 22px 22px; mask-image: radial-gradient(60% 60% at 50% 50%, black, transparent 80%); -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, black, transparent 80%); } .intro-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; background: #fff; border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); border-radius: 26px; padding: 26px 40px; transform: rotate(-3deg); animation: introStamp .6s var(--ease-pop) both; } .intro-logo { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(44px, 9vw, 84px); letter-spacing: -.04em; line-height: 1; } .intro-logo i { font-style: normal; color: var(--red); } .intro-tag { font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .16em; background: var(--yel); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; animation: introTag .5s var(--ease-pop) .25s both; } #intro.out { animation: introOut .6s cubic-bezier(.7, 0, .3, 1) forwards; } #intro.out .intro-card { animation: introCardOut .4s ease-in forwards; } body.no-intro #intro { display: none; } @keyframes introStamp { from { opacity: 0; scale: 2.2; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } } @keyframes introTag { from { opacity: 0; translate: 0 12px; scale: .7; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes introOut { to { clip-path: circle(0% at 50% 50%); } } @keyframes introCardOut { to { opacity: 0; scale: .85; rotate: 6deg; } } /* ---------- Barre de progression + header qui descend ---------- */ #prog { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--blue); z-index: 1100; transform-origin: 0 50%; scale: 0 1; pointer-events: none; } #hdr { translate: 0 -120px; transition: translate .9s var(--ease-pop) .35s; } body.is-in #hdr { translate: 0 0; } /* ---------- Curseur suiveur (souris uniquement) ---------- */ #cur { display: none; position: fixed; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--yel); border: 2px solid var(--ink); pointer-events: none; z-index: 3000; translate: -50% -50%; opacity: 0; transition: width .25s var(--ease-out), height .25s var(--ease-out), background .25s, opacity .3s, scale .15s; } @media (pointer: fine) { #cur { display: block; } } #cur.on { opacity: 1; } #cur.big { width: 44px; height: 44px; background: rgba(255, 201, 60, .35); } #cur.down { scale: .7; } /* ---------- Hero : chorégraphie d'entrée + parallaxe ---------- */ #hero .shape { scale: 0; translate: calc(var(--px, 0px) * var(--k, 0)) calc((var(--py, 0px) + var(--sy, 0px)) * var(--k, 0)); transition: scale 1.1s var(--ease-pop) var(--sd, 0s), translate .35s var(--ease-out); } body.is-in #hero .shape { scale: 1; } .stick300 { scale: 0; rotate: -160deg; translate: calc(var(--px, 0px) * var(--k, 0)) calc(var(--py, 0px) * var(--k, 0)); transition: scale 1.2s var(--ease-pop) 1.1s, rotate 1.2s var(--ease-pop) 1.1s, translate .35s var(--ease-out); } body.is-in .stick300 { scale: 1; rotate: 0deg; } .hero-badge { opacity: 0; translate: 0 -50px; rotate: -14deg; transition: opacity .5s ease .15s, translate .9s var(--ease-pop) .15s, rotate .9s var(--ease-pop) .15s; } body.is-in .hero-badge { opacity: 1; translate: 0 0; rotate: 0deg; } .hero-sub { opacity: 0; translate: -40px 0; transition: opacity .6s ease .55s, translate 1s var(--ease-out) .55s; } body.is-in .hero-sub { opacity: 1; translate: 0 0; } .hero-sub svg path { animation-play-state: paused !important; } body.is-in .hero-sub svg path { animation-play-state: running !important; } .hero-p { opacity: 0; translate: 0 24px; transition: opacity .6s ease 1s, translate .9s var(--ease-out) 1s; } body.is-in .hero-p { opacity: 1; translate: 0 0; } .hero-cta > a { opacity: 0; } body.is-in .hero-cta > a { opacity: 1; animation: popin .8s var(--ease-pop) 1.15s backwards; } body.is-in .hero-cta > a:nth-child(2) { animation-delay: 1.3s; } @keyframes popin { from { opacity: 0; translate: 0 30px; scale: .85; rotate: -3deg; } to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } } /* ---------- Titres : chaque mot surgit ---------- */ .split .w { display: inline-block; opacity: 0; translate: 0 .6em; rotate: 6deg; transition: opacity .55s ease, translate .95s var(--ease-out), rotate .95s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); } .split[data-in] .w { opacity: 1; translate: 0 0; rotate: 0deg; } /* ---------- Reveal au scroll (remplace le CSS injecté par widgets.js) ---------- */ rv-reveal { display: block; opacity: 0; translate: 0 46px; transition: opacity .85s var(--ease-out), translate .85s var(--ease-out); } rv-reveal[data-in] { opacity: 1; translate: 0 0; } /* variante « stickers » : les enfants claquent un par un */ rv-reveal[data-stagger] { opacity: 1; translate: none; transition: none; } rv-reveal[data-stagger] > * { opacity: 0; } rv-reveal[data-stagger][data-in] > * { opacity: 1; animation: slapin .95s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 120ms); } @keyframes slapin { from { opacity: 0; translate: 0 44px; rotate: -2.5deg; scale: .95; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } } /* ---------- Badges de section : effet tampon ---------- */ .badge { opacity: 0; scale: 1.5; rotate: -15deg; transition: opacity .4s ease, scale .7s var(--ease-pop), rotate .7s var(--ease-pop); } .badge[data-in] { opacity: 1; scale: 1; rotate: 0deg; } /* dans un rv-reveal, badge et mots attendent que le conteneur soit visible */ rv-reveal .badge { transition-delay: .25s; } rv-reveal .split .w { transition-delay: calc(.25s + var(--i, 0) * 60ms); } /* ---------- Réalisations : téléphone 3D, bump, loaders ---------- */ #phone { perspective: 1200px; } .bezel { transition: transform .5s var(--ease-out), translate 1s var(--ease-pop), rotate 1s var(--ease-pop), scale 1s var(--ease-pop); transform-style: preserve-3d; translate: 0 70px; rotate: -6deg; scale: .9; } #phone[data-in] .bezel { translate: 0 0; rotate: 0deg; scale: 1; } .bezel.bump { animation: bump .5s var(--ease-pop); } @keyframes bump { 0% { scale: 1; } 35% { scale: .965; } 100% { scale: 1; } } /* sur tactile : le téléphone respire tout seul (léger, pour ne pas re-rasteriser l'iframe en continu), s'arrête sous le doigt, et laisse la main au gyroscope dès qu'il émet */ @media (hover: none) { #phone[data-in] .bezel { animation: phoneIdle 9s ease-in-out 1.2s infinite; } #phone[data-in] .bezel.bump { animation: phoneIdle 9s ease-in-out 1.2s infinite, bump .5s var(--ease-pop); } #phone[data-in] .bezel.hold { animation-play-state: paused; } #phone[data-in] .bezel.gyro { animation: none; } #phone[data-in] .bezel.gyro.bump { animation: bump .5s var(--ease-pop); } } @keyframes phoneIdle { 0%, 100% { transform: rotateY(0deg) rotateX(0deg); } 25% { transform: rotateY(3deg) rotateX(1.5deg); } 50% { transform: rotateY(0deg) rotateX(-1.5deg); } 75% { transform: rotateY(-3deg) rotateX(1deg); } } [data-demo-label].flip { animation: flipin .5s var(--ease-out); } @keyframes flipin { from { opacity: 0; translate: 0 10px; rotate: -2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } } [data-di][aria-pressed="true"] { animation: tabpop .45s var(--ease-pop); } @keyframes tabpop { 0% { scale: 1; } 45% { scale: 1.1; } 100% { scale: 1; } } .slide .ld { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; align-content: center; gap: 12px; background-color: var(--bg); background-image: radial-gradient(rgba(14,14,18,.15) 1.3px, transparent 1.3px); background-size: 18px 18px; transition: opacity .45s ease, visibility 0s linear .45s; } .slide .ld.off { opacity: 0; visibility: hidden; pointer-events: none; } .slide .ld.off .ld-ring { animation-play-state: paused; } .ld-ring { width: 46px; height: 46px; border-radius: 50%; border: 3px dashed var(--ink); animation: spin 3s linear infinite; } .ld-txt { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 10.5px; letter-spacing: .12em; background: var(--yel); border: 2px solid var(--ink); border-radius: 999px; padding: 7px 12px; box-shadow: 3px 3px 0 var(--ink); } /* ---------- Tactile : zones de tap ≥ 44 px (invisibles) + feedback à la pression ---------- */ @media (hover: none) { #hdr a[href^="tel:"], [data-di] { position: relative; } #hdr a[href^="tel:"]::before, [data-di]::before { content: ""; position: absolute; inset: -5px -2px; } .slide > a[target="_blank"]::before { content: ""; position: absolute; inset: -8px -6px; } [data-di]:active, a[href^="tel:"]:active, .slide > a[target="_blank"]:active, [data-head]:active { scale: .96; } } /* ---------- Faites le test : la place n°1 se prend sous vos yeux ---------- */ #results:not([data-in]) .res-comp { visibility: hidden; } #results[data-in] .res-comp { animation: resIn .7s var(--ease-out) .1s backwards; } #results[data-in] .res-comp + .res-comp { animation-delay: .3s; } @keyframes resIn { from { opacity: 0; translate: 0 18px; } to { translate: 0 0; } } .res-you-wrap { height: 0; margin-bottom: -10px; opacity: 0; translate: 0 -18px; scale: .94; transition: height .75s var(--ease-out), margin-bottom .75s var(--ease-out), opacity .5s ease, translate .75s var(--ease-pop), scale .75s var(--ease-pop); } .res-you-wrap.in { margin-bottom: 0; opacity: 1; translate: 0 0; scale: 1; } .res-n1 { display: inline-block; } .res-n1.pulse { animation: n1pulse 2.4s ease-in-out infinite; } @keyframes n1pulse { 0%, 100% { scale: 1; } 50% { scale: 1.3; } } .res-tag { opacity: 0; scale: 2.2; rotate: -12deg; transition: opacity .3s ease, scale .6s var(--ease-pop), rotate .6s var(--ease-pop); } .res-tag.on { opacity: 1; scale: 1; rotate: 0deg; } /* le surlignage jaune se dessine de gauche à droite (même rendu final que le design) */ .hl { background-color: transparent !important; background-image: linear-gradient(var(--yel), var(--yel)) !important; background-repeat: no-repeat !important; background-size: 0% 100% !important; transition: background-size .9s var(--ease-out); } .hl.on { background-size: 100% 100% !important; } /* ---------- Machine à clients ---------- */ #stars i { display: inline-block; font-style: normal; scale: 0; rotate: -60deg; transition: scale .6s var(--ease-pop), rotate .6s var(--ease-pop); } #stars i:nth-child(2) { transition-delay: .11s; } #stars i:nth-child(3) { transition-delay: .22s; } #stars i:nth-child(4) { transition-delay: .33s; } #stars i:nth-child(5) { transition-delay: .44s; } #stars[data-in] i { scale: 1; rotate: 0deg; } #notifs > div { opacity: 0; translate: 36px 0; transition: opacity .5s ease, translate .8s var(--ease-pop); } #notifs > div:nth-child(2) { transition-delay: .35s; } #notifs > div:nth-child(3) { transition-delay: .7s; } #notifs[data-in] > div { opacity: 1; translate: 0 0; } /* le flux : la boîte est verrouillée à 3 lignes par fx.js, seules opacité/translate bougent (zéro reflow) */ #notifs .notif-new { animation: notifIn .7s var(--ease-pop); } @keyframes notifIn { from { opacity: 0; translate: 36px 0; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } } .dot { position: relative; } .dot::after { content: ""; position: absolute; inset: -2px; border-radius: 99px; border: 2px solid var(--green); opacity: 0; animation: ping 2.2s ease-out infinite; } #notifs > div:nth-child(2) .dot::after { animation-delay: .7s; } #notifs > div:nth-child(3) .dot::after { animation-delay: 1.4s; } @keyframes ping { 0% { scale: .6; opacity: .9; } 70%, 100% { scale: 2.4; opacity: 0; } } .chips > span { opacity: 0; scale: .5; rotate: -10deg; transition: opacity .35s ease, scale .6s var(--ease-pop), rotate .6s var(--ease-pop); transition-delay: calc(var(--i, 0) * 80ms); } .chips[data-in] > span { opacity: 1; scale: 1; rotate: 0deg; } /* ---------- Tarifs ---------- */ .checks > span { opacity: 0; translate: -16px 0; transition: opacity .4s ease, translate .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); } .checks[data-in] > span { opacity: 1; translate: 0 0; } .checks > span > span:first-child { display: inline-block; scale: 0; transition: scale .5s var(--ease-pop); transition-delay: calc(var(--i, 0) * 90ms + .15s); } .checks[data-in] > span > span:first-child { scale: 1; } .stamp > div { opacity: 0; } .stamp[data-in] > div { opacity: 1; animation: stampin .6s var(--ease-pop) .25s backwards; } @keyframes stampin { from { opacity: 0; scale: 2.4; rotate: -30deg; } to { opacity: 1; scale: 1; rotate: 0deg; } } /* ---------- Process : les numéros 1-2-3 s'allument en cascade (délai partagé via --d) ---------- */ #process > div > div:first-child > span:first-child { position: relative; scale: 0; transition: scale .6s var(--ease-pop); } #process > div:nth-child(1) > div:first-child > span:first-child { --d: .5s; } #process > div:nth-child(2) > div:first-child > span:first-child { --d: .8s; } #process > div:nth-child(3) > div:first-child > span:first-child { --d: 1.1s; } #process[data-in] > div > div:first-child > span:first-child { scale: 1; transition-delay: var(--d, 0s); } #process[data-in] > div > div:first-child > span:first-child::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; animation: ping 1.2s ease-out 1; animation-delay: calc(var(--d, 0s) + .25s); } /* ---------- Équipe ---------- */ .avatar-ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--yel); color: var(--ink); font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 24px; } /* ---------- CTA final : le bloc claque, les cercles surgissent, le numéro sonne ---------- */ #final { scale: .95; transition: scale .9s var(--ease-pop); } #final[data-in] { scale: 1; } .final-shape { animation: floaty 7s ease-in-out infinite; scale: 0; transition: scale 1s var(--ease-pop) .2s; } .final-shape + .final-shape { animation-duration: 9s; animation-delay: -3s; transition-delay: .4s; } #final[data-in] .final-shape { scale: 1; } #final[data-in] a[href^="tel:"] { animation: ring 4s ease-in-out 1.5s infinite; } body.is-in #hdr a[href^="tel:"] { animation: ring 8s ease-in-out 6s infinite; } @keyframes ring { 0%, 30%, 100% { rotate: 0deg; } 4% { rotate: -5deg; } 8% { rotate: 5deg; } 12% { rotate: -4deg; } 16% { rotate: 3deg; } 20% { rotate: -2deg; } 24% { rotate: 1deg; } } .pcl { position: fixed; width: 12px; height: 12px; border: 2px solid var(--ink); pointer-events: none; z-index: 2500; } /* ===================================================================== États finaux forcés — deux cas : 1) html sans classe .fx : JS désactivé, fx.js absent ou en erreur → la maquette statique, telle quelle. 2) prefers-reduced-motion : idem, et on coupe aussi les animations infinies du design. ===================================================================== */ html:not(.fx) #intro { display: none !important; } html:not(.fx) #hdr, html:not(.fx) .split .w, html:not(.fx) .hero-badge, html:not(.fx) .hero-sub, html:not(.fx) .hero-p, html:not(.fx) .hero-cta > a, html:not(.fx) .stick300, html:not(.fx) .badge, html:not(.fx) #stars i, html:not(.fx) #notifs > div, html:not(.fx) .chips > span, html:not(.fx) .checks > span, html:not(.fx) .checks > span > span:first-child, html:not(.fx) .stamp > div, html:not(.fx) rv-reveal, html:not(.fx) rv-reveal[data-stagger] > *, html:not(.fx) .res-you-wrap, html:not(.fx) .res-tag, html:not(.fx) .bezel, html:not(.fx) #final, html:not(.fx) .final-shape, html:not(.fx) #process > div > div:first-child > span:first-child { opacity: 1 !important; visibility: visible !important; translate: none !important; rotate: none !important; scale: none !important; transition: none !important; animation: none !important; } html:not(.fx) #hero .shape { scale: none !important; translate: none !important; transition: none !important; } html:not(.fx) .res-comp { visibility: visible !important; animation: none !important; } html:not(.fx) .res-you-wrap { height: auto !important; margin-bottom: 0 !important; } html:not(.fx) .hero-sub svg path { animation-play-state: running !important; } html:not(.fx) .hl { background-size: 100% 100% !important; } html:not(.fx) .dot::after, html:not(.fx) .res-n1.pulse, html:not(.fx) .bezel.bump, html:not(.fx) [data-di][aria-pressed="true"], html:not(.fx) .ld-ring, html:not(.fx) #final a[href^="tel:"], html:not(.fx) #hdr a[href^="tel:"] { animation: none !important; } html:not(.fx) #cur, html:not(.fx) #prog, html:not(.fx) .slide .ld { display: none !important; } @media (prefers-reduced-motion: reduce) { #intro { display: none !important; } #hdr, .split .w, .hero-badge, .hero-sub, .hero-p, .hero-cta > a, .stick300, .badge, #stars i, #notifs > div, .chips > span, .checks > span, .checks > span > span:first-child, .stamp > div, rv-reveal, rv-reveal[data-stagger] > *, .res-you-wrap, .res-tag, .bezel, #final, .final-shape, #process > div > div:first-child > span:first-child { opacity: 1 !important; visibility: visible !important; translate: none !important; rotate: none !important; scale: none !important; transition: none !important; animation: none !important; } /* on ne touche pas aux opacités du design (concurrents estompés 0.55 / 0.3, cercle pointillé 0.7) */ #hero .shape { scale: none !important; translate: none !important; transition: none !important; animation: none !important; } .res-comp { visibility: visible !important; animation: none !important; } .res-you-wrap { height: auto !important; margin-bottom: 0 !important; } .hero-sub svg path { animation: none !important; stroke-dashoffset: 0 !important; } .hl { background-size: 100% 100% !important; } .dot::after, .res-n1.pulse, .bezel.bump, [data-di][aria-pressed="true"], .ld-ring, #final a[href^="tel:"], #hdr a[href^="tel:"], #process > div > div:first-child > span:first-child::after { animation: none !important; } /* animations infinies du design lui-même (marquees, stickers flottants, clignotements) */ .mq > div, [data-m="side"], [data-m="live"], [data-m="stick300"], .stamp, [data-m="spinbadge"] svg, [style*="animation:blink"], [style*="animation:wob"], [style*="animation:floaty"] { animation: none !important; } #cur, #prog { display: none !important; } }