/* ============================================================ Couche d'ambiance "IA avancée" — partagée par toutes les pages du site (vitrine + espace client). Injectée via /static/js/ambient.js, qui ajoute les éléments .ambient-layer / .ambient-particles au et gère le scroll. Respecte prefers-reduced-motion partout (animations désactivées). ============================================================ */ .ambient-layer, .ambient-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .ambient-gradient { position: absolute; inset: -20%; background: radial-gradient(circle at 18% 18%, rgba(10,10,10,.05), transparent 45%), radial-gradient(circle at 85% 75%, rgba(10,10,10,.035), transparent 50%); animation: ambient-gradient-shift 80s ease-in-out infinite alternate; } .ambient-grid { position: absolute; inset: -10%; background-image: linear-gradient(rgba(10,10,10,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,10,.025) 1px, transparent 1px); background-size: 56px 56px; animation: ambient-grid-drift 110s linear infinite; } .ambient-halo { position: absolute; border-radius: 50%; filter: blur(70px); background: radial-gradient(circle, rgba(10,10,10,.05), transparent 70%); animation: ambient-halo-float 50s ease-in-out infinite; } .ambient-halo.h1 { width: 460px; height: 460px; top: -160px; left: -120px; } .ambient-halo.h2 { width: 380px; height: 380px; top: 30%; right: -160px; animation-duration: 64s; animation-direction: reverse; } .ambient-halo.h3 { width: 420px; height: 420px; bottom: -180px; left: 28%; animation-duration: 72s; background: radial-gradient(circle, rgba(10,10,10,.035), transparent 70%); } .ambient-noise { position: absolute; inset: 0; opacity: .025; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } .ambient-particle { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: rgba(10,10,10,.15); animation-name: ambient-particle-drift; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes ambient-gradient-shift { from { transform: translate(0, 0); } to { transform: translate(-4%, 3%); } } @keyframes ambient-grid-drift { from { transform: translate(0, 0); } to { transform: translate(56px, 56px); } } @keyframes ambient-halo-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(80px, -60px) scale(1.08); } } @keyframes ambient-particle-drift { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-110vh); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ambient-gradient, .ambient-grid, .ambient-halo, .ambient-particle { animation: none !important; } } /* ============================================================ Navigation flottante — disparition / apparition au scroll ============================================================ */ nav, .header { transition: transform .6s ease-out, box-shadow .3s ease-out; } nav.ambient-nav-hidden, .header.ambient-nav-hidden { transform: translateY(-100%); } nav.ambient-scrolled { box-shadow: 0 8px 30px rgba(10,10,10,.06); } .header.ambient-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.35); } @media (prefers-reduced-motion: reduce) { nav, .header { transition: none; } nav.ambient-nav-hidden, .header.ambient-nav-hidden { transform: none; } } /* ============================================================ Boutons — glow subtil + déplacement 2-3px au survol ============================================================ */ .btn-primary, .btn-outline, .btn-light, .btn-outline-light, .nav-cta, .demo-link, .process-cta, .btn { transition: background .25s ease-out, color .25s ease-out, transform .25s ease-out, box-shadow .25s ease-out, border-color .25s ease-out; } .btn-primary:hover, .btn-light:hover, .nav-cta:hover, .process-cta:hover, .demo-link:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(10,10,10,.18); } .btn-outline:hover, .btn-outline-light:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10,10,10,.10); } @media (prefers-reduced-motion: reduce) { .btn-primary:hover, .btn-light:hover, .nav-cta:hover, .process-cta:hover, .demo-link:hover, .btn:hover, .btn-outline:hover, .btn-outline-light:hover { transform: none; box-shadow: none; } } /* ============================================================ Tarifs — élévation Premium pour l'offre mise en avant ============================================================ */ .pricing-card.featured { box-shadow: 0 30px 70px -30px rgba(0,0,0,.5), 0 0 60px rgba(255,255,255,.1); } /* ============================================================ Espace client — cartes flottantes & panneaux translucides ============================================================ */ .card { background: rgba(255,255,255,.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 20px 48px -28px rgba(10,10,10,.25); transition: transform .6s ease-out, box-shadow .6s ease-out; } .card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 28px 56px -28px rgba(10,10,10,.3); } /* ============================================================ Apparition progressive générique (sections, cartes) ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease-out, transform .7s ease-out; } .reveal.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .card, .card:hover { transform: none; box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 20px 48px -28px rgba(10,10,10,.25); transition: none; } }