/* ═══════════════════════════════════════════════════════════════════════
   Pixware Studio — base.css
   Tokens · reset · typographie · header · footer · boutons · utilitaires
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Syne";src:url("../fonts/Syne-400-800.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/SpaceMono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/SpaceMono-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#06060A; --bg-2:#0B0B12; --bg-3:#12121C;
  --fg:#F4F4F8; --fg-2:#C9C9D6; --muted:#8E8EA3;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  --acc:#8B7CFF; --acc-2:#D9FF5C; --acc-soft:rgba(139,124,255,.16);
  --dartrak:#2FB587; --grimoire:#E9A55C; --multiplico:#5CC8B8;
  --font-display:"Syne",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:14px; --radius-lg:24px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --header-h:72px; --container:1200px; --gutter:clamp(20px,5vw,64px);
  color-scheme:dark;
}

/* ── reset ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100svh}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--acc-2);color:var(--bg)}
:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px;border-radius:4px}

/* grain */
body::after{content:"";position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.06;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.6s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-2%,1%)}40%{transform:translate(1%,-2%)}60%{transform:translate(-1%,2%)}80%{transform:translate(2%,-1%)}}

/* ── langue : un seul DOM, deux langues ───────────────────────────── */
html[data-lang="fr"] body [lang="en"]{display:none!important}
html[data-lang="en"] body [lang="fr"]{display:none!important}

/* ── typographie ──────────────────────────────────────────────────── */
.display{font:800 clamp(3rem,9.5vw,8.75rem)/.92 var(--font-display);letter-spacing:-.045em;text-wrap:balance}
.h2{font:700 clamp(2rem,4.6vw,3.75rem)/1.02 var(--font-display);letter-spacing:-.035em;text-wrap:balance}
.h3{font:700 1.5rem/1.15 var(--font-display);letter-spacing:-.02em}
.lead{font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.55;color:var(--fg-2);text-wrap:pretty}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted)}
.eyebrow{font:400 .74rem/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--acc-2);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:8px;height:8px;background:currentColor;flex:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.link{text-decoration:none;position:relative;display:inline-block}
.link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.link:hover::after{transform:scaleX(1);transform-origin:left}

/* ── layout ───────────────────────────────────────────────────────── */
.container{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto}
.section{padding-block:clamp(80px,12vw,160px)}
.section-head{display:grid;grid-template-columns:1.1fr .9fr;gap:32px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.section-head .eyebrow{margin-bottom:22px}
@media (max-width:820px){.section-head{grid-template-columns:1fr}}

/* ── header ───────────────────────────────────────────────────────── */
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:linear-gradient(90deg,var(--acc),var(--acc-2));transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:var(--gutter);padding-inline:round(down,var(--gutter),7px);transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(6,6,10,.62);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-color:var(--line)}
/* marque : P en pixels qui se compose depuis le quadrillage + lockup Pixware / STUDIO */
.brand{position:relative;display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--fg);isolation:isolate}
.brand-mark{width:30px;height:30px;overflow:visible;flex:none}
.brand-mark .px{fill:var(--acc);transform-box:fill-box;transform-origin:center}
.brand-mark .px.lime{fill:var(--acc-2)}
html.js .brand-mark .px{opacity:0;transform:translate(calc(var(--dx)*15px),calc(var(--dy)*15px)) scale(.25);transition:transform .9s var(--ease-out),opacity .35s linear;transition-delay:calc(var(--i)*55ms + .2s)}
html.js.loaded .brand-mark .px{opacity:1;transform:none}
html.js.from-pre .brand-mark .px{transition-duration:.25s;transition-delay:0s}
html.loaded .brand-mark .px.lime{animation:pxblink 3.4s steps(1,end) 2.6s infinite}
@keyframes pxblink{0%,88%{opacity:1}90%,95%{opacity:.15}97%,100%{opacity:1}}
.brand:hover .brand-mark .px{animation:pxjit .45s steps(2,end) both}
.brand:hover .brand-mark .px.lime{animation:pxjit .45s steps(2,end) both,pxblink 3.4s steps(1,end) infinite}
@keyframes pxjit{40%{transform:translate(calc(var(--dx)*5px),calc(var(--dy)*-5px))}}
.brand-word{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.brand-pix{font:700 1.02rem/1 var(--font-display);letter-spacing:-.02em}
.brand-studio{font:700 .56rem/1 var(--font-display);letter-spacing:.38em;text-transform:uppercase;color:var(--acc-2);margin-top:3px;margin-right:-.38em;text-shadow:0 0 10px color-mix(in srgb,var(--acc-2) 55%,transparent)}
.brand-word i{display:inline-block;font-style:normal}
html.js .brand-word i{opacity:0;transform:translateY(5px) scale(.7);transition:opacity .2s steps(2,end),transform .5s var(--ease-out);transition-delay:calc(var(--i)*38ms + .55s)}
html.js .brand-studio i{transition-delay:calc(var(--i)*38ms + .85s)}
html.js.loaded .brand-word i{opacity:1;transform:none}
html.js.from-pre .brand-word i{transition-delay:calc(var(--i)*30ms + .15s)}
.brand:hover .brand-pix i{animation:letterjit .4s steps(2,end) both}
.brand:hover .brand-pix i:nth-child(even){animation-name:letterjit2}
@keyframes letterjit{50%{transform:translateY(-2px)}}
@keyframes letterjit2{50%{transform:translateY(2px)}}
.brand-scan{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;background:var(--acc-2);box-shadow:0 0 14px var(--acc-2);opacity:0;pointer-events:none}
html.loaded .brand-scan{animation:scan 1s var(--ease-in-out) .5s both}
.brand:hover .brand-scan{animation:scan2 .7s var(--ease-in-out) both}
@keyframes scan{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes scan2{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.site-nav ul{display:flex;gap:clamp(20px,3vw,40px);align-items:center}
.site-nav a{font:400 .76rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--fg-2);position:relative;padding:6px 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acc-2);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.site-nav a:hover{color:var(--fg)}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header-right{display:flex;align-items:center;gap:18px}
.lang-switch{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px}
.lang-switch button{font:700 .7rem/1 var(--font-mono);letter-spacing:.08em;padding:7px 11px;border-radius:999px;color:var(--muted);transition:background .3s,color .3s}
.lang-switch button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.lang-switch button:hover:not([aria-pressed="true"]){color:var(--fg)}
.burger{display:none;width:44px;height:44px;position:relative;margin-right:-10px}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--fg);transition:transform .45s var(--ease-in-out),top .45s var(--ease-in-out),opacity .3s}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
body.menu-open .burger span:first-child{top:21px;transform:rotate(45deg)}
body.menu-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:820px){
  .burger{display:block}
  .site-nav{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-content:center;transform:translateY(-102%);transition:transform .7s var(--ease-in-out);visibility:hidden}
  body.menu-open .site-nav{transform:none;visibility:visible}
  body.menu-open{overflow:hidden}
  .site-nav ul{flex-direction:column;gap:22px;text-align:center}
  .site-nav a{font:700 clamp(2rem,9vw,3rem)/1 var(--font-display);letter-spacing:-.03em;text-transform:none;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .7s var(--ease-out)}
  body.menu-open .site-nav a{opacity:1;transform:none;transition-delay:calc(var(--i,0)*70ms + .25s)}
  .site-nav a::after{display:none}
}

/* ── boutons ──────────────────────────────────────────────────────── */
.btn{--pad:17px 28px;position:relative;display:inline-flex;align-items:center;gap:12px;padding:var(--pad);border-radius:999px;font:700 .76rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line-2);color:var(--fg);overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s,transform .45s var(--ease-out);will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);transform:translateY(101%);transition:transform .55s var(--ease-out);border-radius:inherit}
.btn:hover{color:var(--bg);border-color:var(--fg)}
.btn:hover::before{transform:none}
.btn-primary{background:var(--acc-2);color:var(--bg);border-color:var(--acc-2)}
.btn-primary::before{background:var(--fg)}
.btn-primary:hover{color:var(--bg)}
.btn-arrow{width:14px;height:14px;transition:transform .45s var(--ease-out)}
.btn:hover .btn-arrow{transform:translate(4px,-4px)}
.btn-sm{--pad:12px 18px;font-size:.7rem}

/* ── reveal ───────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(32px);filter:blur(6px);transition:opacity .8s linear,transform 1s var(--ease-out),filter .8s linear;transition-delay:calc(var(--i,0)*90ms)}
.reveal.in{opacity:1;transform:none;filter:none}
[data-stagger]>*{transition-delay:calc(var(--i,0)*90ms)}
.reveal-scale{transform:scale(.94) translateY(16px)}
.reveal-left{transform:translateX(-40px)}

/* ── curseur ──────────────────────────────────────────────────────── */
body.has-cursor,body.has-cursor *{cursor:none!important}
#cursor{position:fixed;left:0;top:0;z-index:9500;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .3s}
#cursor.visible{opacity:1}
.cursor-dot{position:absolute;width:6px;height:6px;background:#fff;transform:translate(calc(var(--dx) - 3px),calc(var(--dy) - 3px))}
.cursor-ring{position:absolute;width:38px;height:38px;border:1px solid #fff;transform:translate(calc(var(--x) - 19px),calc(var(--y) - 19px)) scale(1);transition:transform .08s linear,width .3s,height .3s,background .3s}
#cursor.is-hovering .cursor-ring{transform:translate(calc(var(--x) - 19px),calc(var(--y) - 19px)) scale(1.7) rotate(45deg);background:rgba(255,255,255,.12)}
#cursor.is-pressing .cursor-ring{transform:translate(calc(var(--x) - 19px),calc(var(--y) - 19px)) scale(.75)}

/* ── preloader ────────────────────────────────────────────────────── */
#preloader{position:fixed;inset:0;z-index:10000;background:var(--bg);display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path .85s var(--ease-in-out) .1s}
#preloader.done{clip-path:inset(100% 0 0 0)}
.pre-grid{display:grid;grid-template-columns:repeat(4,16px);gap:6px}
.pre-grid i{width:16px;height:16px;border-radius:3px;background:var(--acc);opacity:0;transform:scale(.2);animation:preIn .55s var(--ease-out) forwards;animation-delay:calc(var(--i)*38ms + .05s)}
.pre-grid i.off{visibility:hidden}
.pre-grid i:last-child{background:var(--acc-2)}
@keyframes preIn{to{opacity:1;transform:none}}
#preloader.done .pre-grid{opacity:0;transition:opacity .25s}

/* ── footer ───────────────────────────────────────────────────────── */
.site-footer .container{container-type:inline-size}
.site-footer{position:relative;margin-top:clamp(40px,8vw,120px);border-top:1px solid var(--line);padding-top:clamp(56px,8vw,96px);overflow:hidden}
.footer-brand{margin-bottom:clamp(40px,6vw,80px)}
.footer-giant{font:800 12.67cqw/.8 var(--font-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--line-2);user-select:none;white-space:nowrap;transition:color .8s var(--ease-out),-webkit-text-stroke-color .8s;text-align:center}
@supports not (font-size:1cqw){.footer-giant{font-size:clamp(2.5rem,9.6vw,13rem)}}
.footer-brand:hover .footer-giant{color:var(--fg);-webkit-text-stroke-color:transparent}
.footer-studio{display:flex;justify-content:flex-end;margin-top:.12em;padding-right:1.2%}
.footer-studio span{font:800 clamp(1rem,2.9cqw,2.4rem)/1 var(--font-display);letter-spacing:.34em;text-transform:uppercase;color:var(--acc-2);opacity:.22}
.footer-brand.in .footer-studio span{animation:neon 1.9s steps(1,end) .35s both}
@keyframes neon{0%{opacity:.22;text-shadow:none}10%{opacity:1;text-shadow:0 0 18px var(--acc-2)}16%{opacity:.3;text-shadow:none}26%{opacity:1;text-shadow:0 0 18px var(--acc-2)}34%{opacity:.45;text-shadow:none}42%,100%{opacity:1;text-shadow:0 0 22px color-mix(in srgb,var(--acc-2) 70%,transparent),0 0 64px color-mix(in srgb,var(--acc-2) 30%,transparent)}}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px clamp(24px,4vw,64px);padding-bottom:56px}
.footer-col h4{font:400 .72rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.footer-col ul{display:grid;gap:12px}
.footer-col a{text-decoration:none;color:var(--fg-2);font-size:.95rem}
.footer-col a:hover{color:var(--fg)}
.footer-col p{color:var(--fg-2);font-size:.95rem;max-width:36ch}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;padding-block:24px 32px;border-top:1px solid var(--line);font:400 .74rem/1.6 var(--font-mono);color:var(--muted)}
@media (max-width:900px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-cols{grid-template-columns:1fr}}

/* ── transitions de page (cross-document) ─────────────────────────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .35s var(--ease-in-out) both}
::view-transition-new(root){animation:vtIn .55s var(--ease-out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-12px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(16px)}}

/* ── mouvement réduit ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body::after{animation:none}
  .reveal,[data-stagger]>*{opacity:1;transform:none;filter:none;transition:none}
  .btn,.btn::before,.link::after{transition:none}
  html.js .brand-mark .px,html.js .brand-word i{opacity:1;transform:none;transition:none}
  .brand-mark .px,.brand-scan,.brand-pix i,.footer-studio span{animation:none!important}
  .footer-studio span{opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}