/* ========================================================================== e-FORT — site marketing · v3 Fond de marque en couches. Maquettes produit en HTML plutot qu'en capture. Une seule animation : la trace. ========================================================================== */ :root{ --ink:#06080D; --ink-2:#080B12; --panel:#0D1320; --panel-2:#111827; --panel-hi:#151E30; --line:rgba(255,255,255,.075); --line-hi:rgba(255,255,255,.16); --text:#EEF2F8; --dim:#98A5B8; --dim-2:#6B7A90; --power:#3D8AFA; --metric:#00C896; --target:#7C5CE7; --live:#00B4FF; --warn:#E8B44A; --alert:#FF6B7F; --grad:linear-gradient(100deg,#4E9BFF 0%,#5FE0D8 52%,#00C896 100%); --grad-ai:linear-gradient(100deg,#8B6BFF 0%,#6B8CFF 55%,#4E9BFF 100%); --display:"Archivo",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; --wrap:1180px; --r:14px; --r-lg:20px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--ink);color:var(--text); font-family:var(--body);font-size:17px;line-height:1.7; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--power);outline-offset:3px;border-radius:4px} /* -------------------------------------------------------------------------- LE FOND DE MARQUE — trois couches fixes, rien ne bouge -------------------------------------------------------------------------- */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(1100px 780px at 82% -6%, rgba(61,138,250,.20), transparent 62%), radial-gradient(900px 700px at 8% 24%, rgba(124,92,231,.14), transparent 60%), radial-gradient(1000px 800px at 60% 108%, rgba(0,200,150,.11), transparent 62%), radial-gradient(700px 600px at 100% 62%, rgba(0,180,255,.09), transparent 60%); } body::after{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size:64px 64px; mask-image:radial-gradient(closest-side at 50% 32%, #000 0%, transparent 82%); -webkit-mask-image:radial-gradient(closest-side at 50% 32%, #000 0%, transparent 82%); opacity:.5; } /* --- Typographie -------------------------------------------------------- */ .h1,.h2,.h3{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.02em;margin:0} .h1{font-size:clamp(44px,6.6vw,92px);font-variation-settings:"wdth" 108} .h2{font-size:clamp(32px,4.4vw,58px);font-variation-settings:"wdth" 106} .h3{font-size:clamp(21px,2.1vw,27px);font-variation-settings:"wdth" 100;line-height:1.18} .beat{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block} .beat--ai{background:var(--grad-ai);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block} .kicker{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--dim-2);margin:0 0 20px} .kicker--power{color:var(--power)} .kicker--metric{color:var(--metric)} .kicker--target{color:var(--target)} .kicker--live{color:var(--live)} .lede{font-size:clamp(17px,1.5vw,21px);color:var(--dim);max-width:60ch;margin:24px 0 0;line-height:1.65} .small{font-size:14px;color:var(--dim-2);line-height:1.6} .num{font-family:var(--mono);font-weight:500;font-feature-settings:"tnum";letter-spacing:-.02em} /* --- Structure ---------------------------------------------------------- */ .wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto;position:relative;z-index:1} section{padding:clamp(88px,11vw,158px) 0;position:relative;z-index:1} .sec-head{max-width:820px;margin-bottom:clamp(44px,5.5vw,72px)} .center{text-align:center} .center .lede,.center .sec-head{margin-inline:auto} /* --- La trace ----------------------------------------------------------- */ #trace{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible} #trace path{ fill:none;stroke:url(#traceGrad);stroke-width:1.2;vector-effect:non-scaling-stroke; stroke-linecap:round;opacity:.34;filter:drop-shadow(0 0 9px rgba(61,138,250,.34)); } @media (prefers-reduced-motion:reduce){#trace path{stroke-dasharray:none!important;stroke-dashoffset:0!important}} /* --- En-tete ------------------------------------------------------------ */ .hdr{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,border-color .3s} .hdr--solid{background:rgba(6,8,13,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)} .hdr__in{display:flex;align-items:center;gap:34px;height:70px} .hdr__logo img{height:26px;width:auto} .nav{display:flex;gap:28px;margin-left:auto;align-items:center} .nav a{font-size:14.5px;color:var(--dim);transition:color .16s} .nav a:hover,.nav a[aria-current="page"]{color:var(--text)} .hdr__act{display:flex;gap:12px;align-items:center} .lang{display:flex;border:1px solid var(--line-hi);border-radius:100px;overflow:hidden;background:rgba(255,255,255,.03)} .lang button{background:none;border:0;color:var(--dim-2);font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;padding:6px 12px;border-radius:100px} .lang button[aria-pressed="true"]{background:#fff;color:#06080D} .burger{display:none;background:none;border:0;color:var(--text);padding:6px} /* --- Boutons ------------------------------------------------------------ */ .btn{ display:inline-flex;align-items:center;gap:9px;justify-content:center; padding:14px 26px;border-radius:10px;font-size:15.5px;font-weight:600; border:1px solid transparent;transition:transform .15s,background .18s,border-color .18s,box-shadow .18s; /* Un