/* Gary Le Grill — styles partagés des pages intérieures (preprod) */
:root{--ink:#0a0a0b;--ink2:#141416;--paper:#ece8df;--dim:#8a877f;--acid:#d4ff3a;--hot:#ff4f1f;--violet:#7b5cff;--line:#ffffff1a;--live:#4fd08a;
--sans:'Archivo',system-ui,sans-serif;--serif:'Instrument Serif',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace;--pad:clamp(16px,3vw,40px)}
html.code-mode{--paper:#e9e7e2;--acid:#8fb3ff;--hot:#ff7a45;--violet:#b9a6ff;--dim:#6f727b;--ink:#0b0c0f;--ink2:#121318;--line:#ffffff12;--live:#6fd3a0}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);background:var(--ink);color:var(--paper);overflow-x:hidden;cursor:none;min-height:100vh}
@media (hover:none){body{cursor:auto}}
a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}
::selection{background:var(--acid);color:var(--ink)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:90;opacity:.07;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-4%,-1%)}100%{transform:translate(0,0)}}
/* cursor */
.cur{position:fixed;left:0;top:0;z-index:100;pointer-events:none;mix-blend-mode:difference}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff}
.cur-ring{width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s,margin .35s,background .35s}
.cur-ring span{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s}
.cur.big .cur-ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:#fff}.cur.big .cur-ring span{opacity:1}
@media (hover:none){.cur{display:none}}
/* nav */
nav.top{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:16px var(--pad);background:linear-gradient(var(--ink),transparent)}
.code-mode nav.top{background:#0b0c0fd9;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font:900 22px var(--sans);font-variation-settings:'wdth' 62;letter-spacing:-.02em}.logo sup{font:400 10px var(--mono)}
.code-mode .logo{font-weight:600;font-variation-settings:'wdth' 100}.code-mode .logo:before{content:'~/';color:var(--dim);font-weight:400}
.links{display:flex;gap:26px}.links a{opacity:.7;transition:opacity .2s}.links a:hover,.links a.on{opacity:1}.links a.on:before{content:'● ';color:var(--acid)}
.toggle{border:1px solid #ffffff44;border-radius:99px;padding:7px 12px;background:none;color:var(--paper);cursor:none;display:flex;gap:8px;align-items:center}
.toggle i{width:26px;height:14px;border-radius:9px;background:var(--paper);position:relative;display:inline-block}
.toggle i:after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:var(--ink);transition:left .3s}
.code-mode .toggle i{background:var(--acid)}.code-mode .toggle i:after{left:14px}
@media (max-width:860px){.links{display:none}}
/* layout */
main{padding-top:92px}
.wrap{padding:0 var(--pad)}
.sec{padding:12vh var(--pad)}
.crumb{color:var(--dim);margin-bottom:22px;display:flex;gap:10px;flex-wrap:wrap}.crumb a:hover{color:var(--paper)}
h1.big{font:850 clamp(56px,11vw,190px)/.84 var(--sans);letter-spacing:-.04em;text-transform:uppercase;font-variation-settings:'wdth' 68}
h1.big .serif{color:var(--acid);font-size:.82em}
h2{font:850 clamp(40px,6.5vw,110px)/.88 var(--sans);text-transform:uppercase;letter-spacing:-.035em;font-variation-settings:'wdth' 70}
h2 .serif{color:var(--acid)}
h3{font:800 clamp(22px,2.2vw,34px)/1 var(--sans);letter-spacing:-.02em;text-transform:uppercase;font-variation-settings:'wdth' 75}
.lead{font-size:clamp(18px,1.6vw,24px);line-height:1.45;max-width:720px;color:#d9d5cc}
.code-mode h1.big,.code-mode h2,.code-mode h3{font-weight:500;text-transform:none;font-variation-settings:'wdth' 100;letter-spacing:-.045em}
.code-mode .lead{color:#a9abb2}
.grid{display:grid;gap:16px}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g3,.g4{grid-template-columns:1fr 1fr}}@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{border:1px solid #ffffff40;border-radius:99px;padding:5px 11px;font:11px var(--mono);text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:99px;border:1px solid var(--paper);font:600 14px var(--sans);cursor:none;background:none;color:var(--paper);transition:background .25s,color .25s}
.btn:hover,.btn.solid{background:var(--paper);color:var(--ink)}.btn.solid:hover{background:var(--acid)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.badge{font:11px var(--mono);white-space:nowrap;text-transform:uppercase}.b-live{color:var(--live)}.b-dev{color:#f2c46d}.b-pre{color:var(--hot)}
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s,transform 1.1s cubic-bezier(.2,.9,.1,1)}.rv.in{opacity:1;transform:none}
/* media + effet loupe */
.media{position:relative;overflow:hidden;border-radius:14px;background:var(--ink2)}
.media .art{position:absolute;inset:0}.media .art svg{width:100%;height:100%;display:block}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@property --fr{syntax:'<length>';inherits:true;initial-value:0px}
.fx{position:absolute;inset:0;--fr:0px;transition:--fr .6s cubic-bezier(.2,.8,.2,1)}
.fx-l{position:absolute;inset:0}.fx-l>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,center)}
.fx-top{transform:scale(1.18);transform-origin:var(--mx,50%) var(--my,50%);filter:saturate(1.25) contrast(1.06);-webkit-mask:radial-gradient(circle var(--fr) at var(--mx,50%) var(--my,50%),#000 80%,transparent 100%);mask:radial-gradient(circle var(--fr) at var(--mx,50%) var(--my,50%),#000 80%,transparent 100%)}
.code-mode .fx-base{filter:saturate(.55) brightness(.92)}
.fx-ring{position:absolute;left:var(--mx,50%);top:var(--my,50%);width:calc(var(--fr)*2);height:calc(var(--fr)*2);transform:translate(-50%,-50%);border:1px solid #ffffffaa;border-radius:50%;pointer-events:none;z-index:3;opacity:0;transition:opacity .3s;box-shadow:0 0 40px #0006 inset}
.fxh:hover .fx{--fr:130px}.fxh:hover .fx-ring{opacity:1}
@media (hover:none){.fx-top,.fx-ring{display:none}.code-mode .fx-base{filter:none}}
/* cards */
.card{display:block;position:relative}
.card .media{aspect-ratio:4/5}
.card .meta{padding:14px 2px 0}
.card .meta .mono{color:var(--dim)}
.card h3{margin-top:6px}
.card .media:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(transparent 60%,#0006);pointer-events:none}
/* phones */
.phone{aspect-ratio:9/19;border-radius:40px;background:#111;padding:9px;box-shadow:0 40px 80px -24px #000a,inset 0 0 0 2px #333;position:relative;max-width:300px;width:100%}
.phone:before{content:'';position:absolute;top:17px;left:50%;width:30%;height:20px;transform:translateX(-50%);background:#000;border-radius:20px;z-index:3}
.phone .scr{position:relative;height:100%;border-radius:32px;overflow:hidden;background:#1a1a1e}
.phone .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.phone .scr .art{position:absolute;inset:0}.phone .scr .art svg{width:100%;height:100%}
.phone iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;z-index:4}
.desk-shot{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 80px -40px #000;position:relative;aspect-ratio:16/10;background:var(--ink2)}
.desk-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
/* flow */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.flow span{border:1px solid var(--line);background:var(--ink2);border-radius:10px;padding:12px 14px;font:12.5px var(--mono)}
.flow i{font-style:normal;color:var(--acid)}
.kv{border-top:1px solid var(--line)}.kv div{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.kv dt{color:var(--dim)}.kv dd{line-height:1.5}
@media (max-width:640px){.kv div{grid-template-columns:1fr;gap:6px}}
/* footer */
footer.foot{padding:12vh var(--pad) 40px;border-top:1px solid var(--line);margin-top:6vh}
.foot .cta{font:900 clamp(48px,9vw,160px)/.86 var(--sans);text-transform:uppercase;letter-spacing:-.04em;font-variation-settings:'wdth' 62}
.code-mode .foot .cta{font-weight:500;text-transform:none;font-variation-settings:'wdth' 100;letter-spacing:-.05em}
.foot .cta em{font-family:var(--serif);font-weight:400;color:var(--acid);text-transform:none}
.foot .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:8vh;color:var(--dim)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,calc(100% + 60px));z-index:120;background:var(--paper);color:var(--ink);padding:12px 18px;border-radius:99px;transition:transform .5s cubic-bezier(.2,.9,.1,1)}.toast.on{transform:translate(-50%,0)}
/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:5vh 0 4vh}
.filters button{border:1px solid #ffffff40;background:none;color:var(--paper);border-radius:99px;padding:9px 16px;font:12px var(--mono);text-transform:uppercase;cursor:none;transition:background .2s,color .2s}
.filters button.on,.filters button:hover{background:var(--paper);color:var(--ink)}
.card.hide{display:none}
/* video */
.film{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#000}
.film video,.film .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film .over{position:absolute;inset:auto 0 0 0;padding:24px;display:flex;justify-content:space-between;align-items:end;gap:20px;background:linear-gradient(transparent,#000c);z-index:2}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}