/* ============================================================ NETAIX — Design System V2 (B+C premium) — socle partagé Tokens dark/light · atmosphère · nav · boutons · footer · helpers Fonts attendues dans le : Montserrat (display, = site actuel), Inter (body), JetBrains Mono (eyebrow labels). ============================================================ */ /* ===== TOKENS — LIGHT (azur souverain, défaut) ===== */ :root{ --bg:#f4f7fb; --bg-2:#eaf1f8; --surface:#ffffff; --panel:#eef3f9; --line:#dde7f1; --line-2:#cdd9e6; --ink:#0b2238; --ink-2:#566f88; --ink-3:#8499ad; --navy:#1F4E79; --navy-deep:#143a5c; --cyan:#00B0F0; --azure:#2a7fff; --cyan-soft:#e2f4ff; --btn-bg:var(--navy); --btn-fg:#fff; --btn-bg-h:var(--navy-deep); --btn-glow:0 14px 30px -16px rgba(31,78,121,.4); --grad:linear-gradient(120deg,#1F4E79,#00B0F0 70%,#2a7fff); --grad-text:linear-gradient(110deg,#1F4E79,#0096cc 55%,#2a7fff); --logo-stroke:#1F4E79; --logo-text:#0b2238; --logo-div:#cdd9e6; --logo-faint:.22; --logo-strong:.66; --au1:rgba(0,176,240,.16); --au2:rgba(31,78,121,.12); --au3:rgba(42,127,255,.1); --grid:rgba(31,78,121,.045); --grid-show:0; --grain:.035; --glass:rgba(255,255,255,.7); --glass-line:rgba(31,78,121,.1); --shadow-lg:0 40px 90px -45px rgba(15,40,70,.4); } /* ===== TOKENS — DARK (nocturne, = look app) ===== */ html.dark{ --bg:#070a11; --bg-2:#0a0e16; --surface:#0c121b; --panel:rgba(255,255,255,.035); --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.13); --ink:#eaf0f7; --ink-2:#93a2b4; --ink-3:#5d6b7d; --navy:#2a5e8c; --navy-deep:#1F4E79; --cyan:#00B0F0; --azure:#3d8bff; --cyan-soft:rgba(0,176,240,.13); --btn-bg:var(--cyan); --btn-fg:#04212e; --btn-bg-h:#2bc4ff; --btn-glow:0 16px 38px -14px rgba(0,176,240,.55); --grad:linear-gradient(120deg,#0a3a66,#00B0F0 70%,#3d8bff); --grad-text:linear-gradient(110deg,#7fe0ff,#00B0F0 50%,#5b9bff); --logo-stroke:#fff; --logo-text:#eaf0f7; --logo-div:rgba(255,255,255,.14); --logo-faint:.2; --logo-strong:.62; --au1:rgba(0,176,240,.18); --au2:rgba(31,78,121,.22); --au3:rgba(61,139,255,.16); --grid:rgba(255,255,255,.028); --grid-show:1; --grain:.05; --glass:rgba(255,255,255,.04); --glass-line:rgba(255,255,255,.1); --shadow-lg:0 50px 120px -50px rgba(0,0,0,.85); } /* ===== RESET & BASE ===== */ *,*::before,*::after{box-sizing:border-box; margin:0; padding:0} html{scroll-behavior:smooth} body{background:var(--bg); color:var(--ink); font-family:'Inter',ui-sans-serif,system-ui,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; transition:background .4s,color .4s} a{color:inherit} img{max-width:100%} /* ===== ATMOSPHÈRE (aurora + grille + grain) ===== */ .aurora{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden} .aurora b{position:absolute; border-radius:50%; filter:blur(70px); opacity:.9} .aurora .a1{width:760px; height:760px; top:-280px; right:-160px; background:radial-gradient(circle,var(--au1),transparent 65%); animation:nx-drift1 22s ease-in-out infinite} .aurora .a2{width:680px; height:680px; top:-200px; left:-220px; background:radial-gradient(circle,var(--au2),transparent 62%); animation:nx-drift2 26s ease-in-out infinite} .aurora .a3{width:600px; height:600px; top:520px; right:6%; background:radial-gradient(circle,var(--au3),transparent 60%); animation:nx-drift1 30s ease-in-out infinite reverse} @keyframes nx-drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,50px) scale(1.12)}} @keyframes nx-drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,30px) scale(1.08)}} .grid-bg{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grid-show); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:60px 60px; mask:radial-gradient(1100px 760px at 60% 0%,#000,transparent 78%)} .grain{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain); mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .container{max-width:1180px; margin:0 auto; padding:0 40px; position:relative; z-index:1} @media(max-width:680px){.container{padding:0 22px}} /* ===== NAV ===== */ .nav{position:sticky; top:0; z-index:100; transition:.3s} .nav.scrolled{background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--line)} .nav nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0} .logo svg{height:30px; display:block} .nav-links{display:flex; gap:30px; font-size:14px; color:var(--ink-2)} .nav-links a{color:inherit; text-decoration:none; position:relative; transition:.2s} .nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px; background:var(--cyan); transition:right .25s} .nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{right:0} .nav-right{display:flex; align-items:center; gap:14px} .nav-login{font-size:14px; color:var(--ink-2); text-decoration:none}.nav-login:hover{color:var(--ink)} .theme-btn{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--ink-2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.18s} .theme-btn:hover{color:var(--ink); border-color:var(--ink-3)} .theme-btn .moon{display:none}html.dark .theme-btn .moon{display:block}html.dark .theme-btn .sun{display:none} @media(max-width:900px){.nav-links{display:none}} /* ===== BOUTONS ===== */ .btn{position:relative; display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600; transition:.2s; overflow:hidden} .btn-cta{font-size:14px; padding:9px 18px; background:var(--btn-bg); color:var(--btn-fg); border-radius:10px} .btn-cta::after{content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg); transition:left .6s} .btn-cta:hover{transform:translateY(-1px); box-shadow:var(--btn-glow)}.btn-cta:hover::after{left:130%} .btn-primary{font-size:15.5px; padding:15px 30px; background:var(--btn-bg); color:var(--btn-fg); border-radius:12px; box-shadow:var(--btn-glow)} .btn-primary::after{content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); transition:left .65s} .btn-primary:hover{transform:translateY(-2px); box-shadow:var(--btn-glow)}.btn-primary:hover::after{left:135%} .btn-ghost{font-size:15.5px; padding:15px 24px; border:1px solid var(--line-2); border-radius:12px; color:var(--ink); background:var(--surface)} .btn-ghost:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px)} /* ===== SECTIONS (helpers) ===== */ section.block{padding:112px 0; position:relative; z-index:1} .sec-head{text-align:center; max-width:680px; margin:0 auto 56px} .eyebrow{display:inline-block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); font-family:'JetBrains Mono',monospace; margin-bottom:16px} h1{font-family:'Montserrat',sans-serif; font-weight:800; line-height:1.04; letter-spacing:-.02em} h2{font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(2rem,4vw,3rem); line-height:1.1; letter-spacing:-.015em; margin-bottom:16px} h3,h4{font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:-.01em} .sec-head p{font-size:17px; color:var(--ink-2); line-height:1.6} .lede{font-size:19px; color:var(--ink-2); line-height:1.58} .lede b{color:var(--ink); font-weight:600} .gt{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent} /* ===== REVEAL au scroll ===== */ .reveal{opacity:0; transform:translateY(30px); filter:blur(6px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease} .reveal.in{opacity:1; transform:none; filter:blur(0)} .reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s} /* ===== FOOTER ===== */ footer{border-top:1px solid var(--line); margin-top:30px; padding:60px 0 40px; position:relative; z-index:1} .foot{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px} @media(max-width:760px){.foot{grid-template-columns:1fr 1fr; gap:30px}} .foot .brand p{font-size:14px; color:var(--ink-2); margin-top:16px; max-width:26em; line-height:1.6} .foot h4{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px} .foot a{display:block; font-size:14px; color:var(--ink-2); text-decoration:none; margin-bottom:11px; transition:.18s} .foot a:hover{color:var(--cyan)} .foot-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3)} .foot-bottom .made{display:inline-flex; align-items:center; gap:7px} .foot-bottom .made b{color:var(--ink-2); font-weight:600}