/* ==========================================================================
   Ad-studio. — « Des marques qu'on remarque »
   Noir + grain, bleu électrique en ponctuation. Le site regarde le visiteur.
   ========================================================================== */
:root{
  --bg:#0A0A0B;
  --bg-2:#111113;
  --panel:#18181B;
  --fg:#EDEBE6;
  --fg-2:#BDBAB3;
  --mute:#7E7D84;
  --line:rgba(237,235,230,.11);
  --line-2:rgba(237,235,230,.22);
  --blue:#2E4BFF;
  --f-sans:"Geist","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-it:"ivypresto-display","Fraunces",Georgia,"Times New Roman",serif;
  --g:clamp(0px,3vw - 8px,40px);
  --ease:cubic-bezier(.7,0,.2,1);
  --out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--blue);color:var(--fg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--blue);outline-offset:3px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;text-wrap:balance}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--fg);color:var(--bg);padding:10px 14px;border-radius:6px}
.skip:focus{top:16px}
.mono{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:400}
.mute{color:var(--mute)}
.fg{color:var(--fg)}
.it{font-family:var(--f-it);font-style:italic;font-weight:300;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.blue{color:var(--blue)}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.in{padding-inline:var(--g);max-width:1680px;margin-inline:auto;width:100%}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);vertical-align:middle}
.h-md{font-size:clamp(40px,5.4vw,96px)!important}

/* ---------- grain & curseur ---------- */
.grain{position:fixed;inset:-25%;will-change:transform;z-index:0;pointer-events:none;opacity:.12;background-size:180px 180px;animation:grain .8s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
.cur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:none}
.cur__d{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--fg);transition:opacity .3s}
.cur__r{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(237,235,230,.32);transition:transform .5s var(--out),background .4s,border-color .4s}
.cur__l{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.5);opacity:0;white-space:nowrap;transition:.4s var(--out)}
.cur.is-on .cur__r{transform:scale(2.6);background:var(--blue);border-color:var(--blue)}
.cur.is-on .cur__l{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cur.is-on .cur__d{opacity:0}
@media (pointer:fine){.has-cur .cur{display:block}.has-cur,.has-cur a,.has-cur button{cursor:none}.has-cur iframe{cursor:auto}}

/* ---------- logo ---------- */
.mark{display:block;overflow:visible}
.mark .bar,.mark .eye-w,.mark .pupil{fill:var(--fg)}
.mark .iris{fill:var(--bg)}
.mark .eye{transform-box:fill-box;transform-origin:center}
.blink .eye{animation:blink 7s infinite}
@keyframes blink{0%,47%,51%,100%{transform:scaleY(1)}49%{transform:scaleY(.06)}}

/* ---------- chargement & transitions de page ---------- */
.loader{position:fixed;inset:0;z-index:99;background:var(--bg);display:grid;place-items:center;animation:killload 0s 5s forwards}
@keyframes killload{to{visibility:hidden;opacity:0}}
.loader.done{opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility 0s .7s}
.loader__in{display:grid;justify-items:center;gap:22px}
.loader .mark{width:96px;height:auto}
.loader .eye{transform:scaleY(.05);transition:transform .55s var(--out)}
.loader.open .eye{transform:scaleY(1)}
.loader__n{font-variant-numeric:tabular-nums;color:var(--mute);min-height:1em}
.pt{position:fixed;inset:0;z-index:98;background:var(--bg);display:grid;place-items:center;clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .6s var(--ease);pointer-events:none}
.pt .mark{width:96px;height:auto}
.pt .eye{transform:scaleY(1);transition:transform .35s var(--ease) .3s}
.pt.on{clip-path:circle(150% at var(--x,50%) var(--y,50%));pointer-events:auto}
.pt.on .eye{transform:scaleY(.05)}

/* ---------- en-tête ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:80;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:14px;padding-left:max(16px,calc(env(safe-area-inset-left,0px) + 20px));padding-right:max(16px,calc(env(safe-area-inset-right,0px) + 20px));mix-blend-mode:difference;color:#fff;transition:transform .6s var(--out)}
.admin-bar .top{top:32px}
.top.hide{transform:translateY(-130%)}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:15px;justify-self:start}
.logo .mark{width:32px;height:24px}
.logo .mark .bar,.logo .mark .eye-w,.logo .mark .pupil{fill:#fff}
.logo .mark .iris{fill:#000}
.nav{display:flex;gap:28px;font-size:14px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
.nav a:hover::after,.nav .current-menu-item a::after{transform:scaleX(1);transform-origin:left}
.top__r{justify-self:end;display:flex;align-items:center;gap:22px;font-size:14px}
.clock{font-variant-numeric:tabular-nums}
.top__cta{padding:9px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;transition:background .4s var(--out),color .4s var(--out)}
.top__cta:hover{background:#fff;color:#000}
.nav{gap:36px}.nav ul{gap:36px}
.burger{display:none;align-items:center;gap:10px;background:none;border:0;padding:6px 0;cursor:pointer;color:inherit}
.burger i{position:relative;width:22px;height:8px}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--out),top .5s var(--out)}
.burger i::before{top:0}.burger i::after{top:6px}
.burger[aria-expanded="true"] i::before{top:3px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:3px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:79;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:calc(110px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)}
.mnav.open{clip-path:inset(0 0 0 0)}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mnav li{overflow:hidden}
.mnav a{display:inline-block;font-size:clamp(40px,11vw,76px);font-weight:500;letter-spacing:-.05em;line-height:1.05;transform:translateY(105%);transition:transform .9s var(--out)}
.mnav.open a{transform:none}
.mnav li:nth-child(2) a{transition-delay:.04s}.mnav li:nth-child(3) a{transition-delay:.08s}.mnav li:nth-child(4) a{transition-delay:.12s}.mnav li:nth-child(5) a{transition-delay:.16s}.mnav li:nth-child(6) a{transition-delay:.2s}.mnav li:nth-child(7) a{transition-delay:.24s}
.mnav .mnav__foot{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:18px}
.mnav .mnav__foot a{font-size:11px;letter-spacing:.09em;transform:none}
html.mnav-on{overflow:hidden}
@media (max-width:1180px){.nav{display:none}.burger{display:flex}.top{grid-template-columns:1fr auto}}
@media (max-width:860px){.clock{display:none}}
@media (max-width:520px){.top__cta{display:none}}
@media (max-width:782px){.admin-bar .top{top:46px}}

/* ---------- boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:17px 26px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:500;font-size:15px;overflow:hidden;isolation:isolate;border:0;cursor:pointer;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--out)}
.btn:hover{color:var(--fg)}
.btn:hover::before{transform:none}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn i{font-style:normal;transition:transform .5s var(--out)}
.btn:hover i{transform:translateX(4px) rotate(-45deg)}

/* ---------- révélations ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln > span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--out)}
.rv.in-view .ln > span{transform:none}
.rv .ln:nth-child(2) > span{transition-delay:.08s}
.rv .ln:nth-child(3) > span{transition-delay:.16s}
.fd{opacity:0;transform:translateY(16px);transition:opacity 1s var(--out),transform 1s var(--out)}
.fd.in-view{opacity:1;transform:none}

/* ---------- médias ---------- */
.media{position:relative;overflow:hidden;background:var(--panel)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.media__ph{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;padding:16px;text-align:center;background:radial-gradient(120% 90% at 70% 20%,rgba(46,75,255,.18),transparent 60%),linear-gradient(160deg,#1C1C20,#0C0C0E)}
.media__ph .mark{width:min(34%,90px);height:auto;opacity:.5}
.media__ph b{font-weight:500;letter-spacing:-.03em;font-size:clamp(14px,1.4vw,22px);color:var(--fg-2)}
.th .media__ph b{display:none}

/* ========== HÉRO + PORTAIL ========== */
.hero{position:relative;height:340vh}
.hero__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero__ui{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;padding-block:calc(96px + env(safe-area-inset-top,0px)) calc(28px + env(safe-area-inset-bottom,0px))}
.hero__logo{position:absolute;left:50%;top:44%;width:min(46vw,64vh,640px);transform:translate(-50%,-50%)}
.hero__logo .mark{width:100%;height:auto;transform-origin:72.77% 23.23%}
.hero__glow{position:absolute;left:50%;top:44%;width:min(80vw,90vh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(46,75,255,.18),rgba(46,75,255,.04) 55%,transparent 75%);pointer-events:none}
.hero__foot{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:end}
.hero h1{font-size:clamp(46px,7.4vw,140px);letter-spacing:-.055em;line-height:.88}
.hero h1 .it{letter-spacing:-.03em}
.hero__side{display:grid;gap:22px;justify-items:start;max-width:36ch;justify-self:end}
.hero__side p{color:var(--fg-2);font-size:clamp(15px,1.1vw,17px)}
.hero__meta{display:flex;justify-content:space-between;gap:16px;color:var(--mute);margin-top:clamp(20px,3vh,32px);padding-top:14px;border-top:1px solid var(--line)}
.hero__meta .scroll{display:inline-flex;align-items:center;gap:10px}
.hero__meta .scroll i{width:1px;height:18px;background:var(--line-2);position:relative;overflow:hidden}
.hero__meta .scroll i::after{content:"";position:absolute;left:0;right:0;top:-50%;height:50%;background:var(--fg);animation:drop 1.6s var(--ease) infinite}
@keyframes drop{to{top:100%}}
.portal{position:absolute;inset:0;overflow:hidden}
.portal__iris{position:absolute;left:0;top:0;border-radius:50%;overflow:hidden;transform-origin:50% 50%;transform:scale(0);will-change:transform}
.portal__in{position:absolute;left:0;top:0;width:100vw;height:100vh;height:100svh;transform-origin:0 0;will-change:transform}
.portal__in > .media{position:absolute;inset:0;transform:scale(var(--ps,1.2))}
.portal__in::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.35),transparent 30%,transparent 55%,rgba(10,10,11,.75));pointer-events:none}
.portal__cap{position:absolute;left:0;right:0;bottom:calc(32px + env(safe-area-inset-bottom,0px));z-index:2}
.portal__cap .in{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.portal__cap h2{font-size:clamp(44px,8vw,150px);letter-spacing:-.055em;line-height:.88}
.portal__cap .mono{text-align:right;color:var(--fg-2)}

/* ========== MANIFESTE ========== */
.mani{position:relative;height:260vh}
.mani__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.mani__k{display:flex;justify-content:space-between;margin-bottom:clamp(24px,4vh,48px);color:var(--mute)}
.mani__t{font-size:clamp(30px,4.5vw,80px);line-height:1.04;letter-spacing:-.045em;font-weight:500;max-width:22ch}
.mani__t .w{opacity:.14;transition:opacity .25s linear}
.mani__t .w.on{opacity:1}
.mani__t .it{color:var(--blue)}
.mani__eye{display:inline-block;width:1.25em;vertical-align:-.12em;margin-inline:.05em}
.mani__eye .mark{width:100%;height:auto}

/* ========== TRAVAUX ========== */
.sec{padding-block:clamp(100px,13vw,200px)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-bottom:clamp(36px,5vw,72px)}
.head h1,.head h2{font-size:clamp(52px,9vw,170px);letter-spacing:-.06em;line-height:.85}
.head sup{font-family:var(--f-mono);font-size:.12em;letter-spacing:.05em;vertical-align:top;margin-left:.3em;color:var(--mute);font-weight:400}
.head p{max-width:34ch;color:var(--fg-2)}
.head__r{display:grid;gap:18px;justify-items:end}
.sec.archive,.sec.page-simple__head{padding-top:calc(80px + clamp(30px,4vw,64px))}
.head--archive{padding-top:0}
.head--archive .mono{display:block;margin-bottom:18px}
.seg{display:inline-flex;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{border:0;background:transparent;padding:9px 14px;border-radius:999px;cursor:pointer;color:var(--mute);font:500 11px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;transition:.3s}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px)}
.filters a{padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;transition:background .3s,color .3s}
.filters a sup{font-family:var(--f-mono);font-size:9px;margin-left:4px;color:var(--mute)}
.filters a:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.filters a.on{background:var(--fg);color:var(--bg)}
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.idx li{border-bottom:1px solid var(--line)}
.idx li[hidden]{display:none}
.idx a{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,.7fr) minmax(0,.45fr) 28px;gap:20px;align-items:center;padding-block:clamp(18px,2.2vw,30px);position:relative;transition:opacity .4s}
.idx h3{font-size:clamp(28px,3.6vw,64px);letter-spacing:-.05em;line-height:1;transition:transform .6s var(--out)}
.idx .cat,.idx .kind{color:var(--mute);font-size:14px}
.idx .arr{justify-self:end;transition:transform .5s var(--out)}
.idx .th{display:none}
@media (hover:hover){.idx:hover a{opacity:.35}.idx:hover a:hover{opacity:1}}
.idx a:hover h3{transform:translateX(16px)}
.idx a:hover .arr{transform:rotate(-45deg);color:var(--blue)}
.grid{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.grid a{display:grid;gap:12px}
.grid a[hidden]{display:none}
.grid .media{aspect-ratio:4/5;border-radius:4px}
.grid .media img{transition:transform 1.2s var(--out)}
.grid a:hover .media img{transform:scale(1.05)}
.grid .cap{display:flex;justify-content:space-between;gap:12px}
.grid h3{font-size:clamp(18px,1.4vw,22px);letter-spacing:-.025em}
.works.is-grid .idx{display:none}
.works.is-grid .grid{display:grid}
.works__all{margin-top:clamp(28px,4vw,56px)}
.peek{position:fixed;left:0;top:0;z-index:70;will-change:transform,translate;width:clamp(240px,21vw,340px);aspect-ratio:4/5;pointer-events:none;display:none;transform:translate(-50%,-50%) scale(0);transition:transform .5s var(--out)}
.peek.on{transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg))}
.peek .media{position:absolute;inset:0;border-radius:4px;opacity:0;transition:opacity .25s}
.peek .media.on{opacity:1}
@media (pointer:fine){.peek{display:block}}

/* ========== REGARDS ========== */
.gal{position:relative}
.gal__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,32px)}
.gal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.gal__head h2{font-size:clamp(44px,6.5vw,120px);letter-spacing:-.06em;line-height:.85}
.gal__head p{max-width:32ch;color:var(--fg-2)}
.gal__track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;padding-inline:max(16px,env(safe-area-inset-left,0px));will-change:transform;align-items:flex-end}
.gal__track::before,.gal__track::after{content:"";flex:0 0 var(--g)}
.ph{flex:0 0 auto;display:grid;gap:12px;transform:skewX(var(--sk,0deg));transform-origin:bottom}
.ph .media{height:min(58vh,560px);aspect-ratio:var(--ar,3/4);max-width:84vw;border-radius:4px}
.ph .media img{left:-8%;width:116%;transform:translateX(var(--px,0))}
.ph .cap{display:flex;justify-content:space-between;gap:12px}
.ph .cap b{font-weight:500;font-size:17px;letter-spacing:-.02em}
.gal__foot{display:flex;align-items:center;gap:18px}
.bar{flex:1;height:1px;background:var(--line);position:relative}
.bar i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0))}

/* ========== EXPERTISES ========== */
.exp{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.exp li{border-bottom:1px solid var(--line)}
.exp button{width:100%;display:grid;grid-template-columns:56px minmax(0,1fr) 40px;gap:20px;align-items:center;padding-block:clamp(18px,2.2vw,30px);background:none;border:0;text-align:left;cursor:pointer}
.exp h3{font-size:clamp(28px,3.6vw,64px);letter-spacing:-.05em;line-height:1}
.exp .pm{justify-self:end;width:22px;height:22px;position:relative}
.exp .pm::before,.exp .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .5s var(--out)}
.exp .pm::after{transform:rotate(90deg)}
.exp li.open .pm::after{transform:rotate(0)}
.exp__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--out)}
.exp li.open .exp__body{grid-template-rows:1fr}
.exp__body > div{overflow:hidden}
.exp__in{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1fr);gap:20px;padding-bottom:clamp(22px,2.6vw,36px)}
.exp__in p{grid-column:2;font-size:clamp(17px,1.4vw,21px);color:var(--fg-2);max-width:42ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.tags span{padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}

/* ========== SPÉCIALISTE E-COMMERCE ========== */
.eco{position:relative;padding-block:clamp(100px,13vw,200px) 0;border-top:1px solid var(--line);overflow:hidden}
.eco::before{content:"";position:absolute;right:-20vmax;top:10%;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(closest-side,rgba(46,75,255,.12),transparent 70%);pointer-events:none}
.eco__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(32px,6vw,120px);align-items:start}
.eco__sticky{position:sticky;top:clamp(100px,16vh,160px);display:grid;gap:24px;justify-items:start}
.eco h2{font-size:clamp(52px,7.6vw,140px);letter-spacing:-.06em;line-height:.86}
.eco__sticky p{color:var(--fg-2);font-size:clamp(17px,1.3vw,20px);max-width:36ch}
.eco__steps{list-style:none;margin:0;padding:0 0 0 clamp(44px,5vw,80px);position:relative;display:grid}
.eco__rail{position:absolute;left:clamp(10px,1.4vw,22px);top:12px;bottom:12px;width:1px;background:var(--line-2)}
.eco__fill{position:absolute;inset:0;background:var(--blue);transform-origin:top;transform:scaleY(var(--p,0));box-shadow:0 0 10px var(--blue)}
.eco__eye{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:34px;transform:translate(-50%,-50%);padding:6px 0;background:var(--bg)}
.eco__eye .mark{width:100%;height:auto}
.eco__step{display:grid;gap:12px;padding-block:clamp(28px,4vw,56px);border-bottom:1px solid var(--line);opacity:.32;transition:opacity .6s var(--out)}
.eco__step:first-of-type{padding-top:0}
.eco__step.on{opacity:1}
.eco__step h3{font-size:clamp(30px,3.6vw,62px);letter-spacing:-.05em;line-height:1}
.eco__step p{color:var(--fg-2);font-size:clamp(16px,1.25vw,19px);max-width:44ch}
.eco__tools{margin-top:clamp(70px,9vw,140px);border-block:1px solid var(--line);padding-block:clamp(16px,2vw,24px);overflow:hidden;font-size:clamp(14px,1.4vw,22px);letter-spacing:.06em}
.eco__track{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);width:max-content;animation:tools 40s linear infinite}
.eco__track i{display:block;width:clamp(26px,2.4vw,38px)}
.eco__track i .mark{width:100%;height:auto}
.eco__track i .mark .bar{fill:var(--blue)}
.eco__tools:hover .eco__track{animation-play-state:paused}
@keyframes tools{to{transform:translateX(-50%)}}
@media (max-width:900px){
  .eco__in{grid-template-columns:minmax(0,1fr)}
  .eco__sticky{position:static}
}

/* ========== MÉTHODE ========== */
.method{padding-top:clamp(90px,11vw,170px);padding-bottom:clamp(100px,13vw,200px)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.step{padding:clamp(20px,2vw,30px) clamp(0px,1.4vw,24px) 0 0;display:grid;gap:16px;align-content:start}
.step + .step{padding-left:clamp(14px,1.4vw,24px);border-left:1px solid var(--line)}
.step .mark{width:58px;height:auto}
.step .mark .bar{fill:var(--line-2)}
.step h3{font-size:clamp(24px,2.2vw,36px);letter-spacing:-.04em}
.step p{color:var(--fg-2);max-width:30ch}

/* ========== AVIS ========== */
.quo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(28px,6vw,110px);align-items:start}
.quo__side{display:grid;gap:22px}
.quo__side h2{font-size:clamp(34px,3.4vw,56px);letter-spacing:-.045em;line-height:.95}
.quo__bars{display:flex;gap:6px}
.quo__bars button{flex:1;height:14px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.quo__bars button::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line)}
.quo__bars button i{position:absolute;left:0;right:0;top:6px;height:2px;background:var(--fg);transform-origin:left;transform:scaleX(0)}
.quo__bars button.done i{transform:scaleX(1)}
.quo__bars button.on i{animation:fill 7s linear forwards}
.quo:hover .quo__bars button.on i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.quo__stack{display:grid}
.q{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transform:translateY(16px);filter:blur(6px);transition:opacity .8s var(--out),transform .8s var(--out),filter .8s,visibility .8s}
.q.on{opacity:1;visibility:visible;transform:none;filter:none}
.q blockquote{margin:0;font-size:clamp(28px,3.4vw,58px);letter-spacing:-.04em;line-height:1.08}
.q figcaption{margin-top:24px;color:var(--mute)}

/* ========== PAGE PROJET ========== */
.sp-hero{position:relative;height:100vh;height:100svh;overflow:hidden}
.sp-hero__img{position:absolute;inset:0;clip-path:circle(var(--r,0%) at 50% 46%);transition:clip-path 1.5s var(--ease) .15s}
.ready .sp-hero__img{--r:150%}
.sp-hero__img .media{position:absolute;inset:0;transform:translateY(var(--hy,0)) scale(var(--hs,1.08))}
.sp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.45),transparent 28%,transparent 50%,rgba(10,10,11,.85));pointer-events:none}
.sp-hero__ui{position:absolute;inset:0;z-index:2;display:flex;padding-block:calc(84px + env(safe-area-inset-top,0px)) calc(36px + env(safe-area-inset-bottom,0px))}
.sp-hero__ui .in{display:flex;flex-direction:column;justify-content:space-between}
.sp-hero__top{display:flex;justify-content:space-between;gap:16px;color:var(--fg-2)}
.sp-hero__top a:hover{color:var(--fg)}
.sp-hero h1{font-size:clamp(56px,12vw,230px);letter-spacing:-.065em;line-height:.84;font-weight:600}
.sp-hero__kind{font-size:clamp(24px,2.8vw,48px);margin-top:10px;color:var(--fg-2)}
.sp-info{padding-block:clamp(70px,9vw,140px)}
.sp-info .in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);align-items:start}
.sp-info__lead p{font-size:clamp(24px,2.6vw,44px);letter-spacing:-.035em;line-height:1.12;max-width:26ch}
.sp-info__meta{margin:0;display:grid;border-top:1px solid var(--line-2)}
.sp-info__meta div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.sp-info__meta dt{color:var(--mute)}
.sp-info__meta dd{margin:0;color:var(--fg);text-transform:none;letter-spacing:0;font-family:var(--f-sans);font-size:15px}
.sp-info__meta a{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:4px}
.browser{border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:0 0 0 1px var(--line-2),0 60px 140px -60px rgba(46,75,255,.45)}
.browser__bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--mute)}
.browser__dots{display:flex;gap:6px}
.browser__dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.browser__url{justify-self:center;padding:6px 14px;border-radius:999px;background:rgba(237,235,230,.05);color:var(--fg-2);text-transform:none;letter-spacing:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser__bar a:hover{color:var(--fg)}
.browser__view{position:relative;height:min(78vh,820px);background:#fff}
.browser__view iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.browser__hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(10,10,11,.8);color:var(--fg);padding:8px 12px;border-radius:999px;pointer-events:none;transition:opacity .6s;white-space:nowrap}
.browser:hover .browser__hint,.reel__frame:hover .browser__hint{opacity:0}
.browser__cover,.browser__cover .media{position:absolute;inset:0}

/* présentation d'un site : ordinateur + téléphone */
.show{position:relative;padding-bottom:clamp(70px,9vw,140px)}
.show--scroll{height:260vh;padding-bottom:0}
.show--scroll .show__pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-block:calc(70px + env(safe-area-inset-top,0px)) 24px}
.show__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(18px,2.4vw,36px)}
.show__head h2{letter-spacing:-.055em;line-height:.88}
.show--scroll .show__head h2{font-size:clamp(34px,4.4vw,80px)!important}
.show__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.show__stage{position:relative}
.show__stage.has-phone{padding-right:clamp(40px,9vw,170px)}
.show--scroll .browser__view{height:max(300px,calc(100svh - 300px))}
.show__hint{margin-top:14px;text-align:center}
.scr{position:absolute;inset:0;overflow:hidden;background:var(--panel)}
.scr[hidden],[hidden]{display:none!important}
.scr__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.scr__long{position:absolute;left:0;right:0;top:0;transform:translateY(var(--sy,0px));will-change:transform}
.scr__long img{display:block;width:100%;height:auto}
.scr--live{background:#fff}
.scr--live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.phone{position:absolute;right:0;bottom:clamp(-30px,-2vw,-10px);width:clamp(130px,15vw,250px);aspect-ratio:9/19.5;border-radius:clamp(20px,2.4vw,38px);background:#050506;padding:clamp(5px,.6vw,9px);box-shadow:0 0 0 1px var(--line-2),0 50px 120px -30px rgba(0,0,0,.9),0 40px 120px -60px rgba(46,75,255,.55);z-index:2}
.phone__notch{position:absolute;left:50%;top:clamp(9px,1vw,15px);width:32%;height:clamp(8px,.9vw,14px);transform:translateX(-50%);border-radius:999px;background:#050506;z-index:3}
.phone__view{position:relative;width:100%;height:100%;border-radius:clamp(15px,1.9vw,30px);overflow:hidden;background:var(--panel)}
@media (max-width:700px){
  .show--scroll{height:220vh}
  .show__stage.has-phone{padding-right:0;padding-bottom:40px}
  .phone{width:34vw;right:-6px;bottom:0}
  .show--scroll .browser__view{height:max(260px,calc(100svh - 330px))}
}

/* présentation plein écran, sans cadre */
.reel{position:relative;padding-bottom:clamp(60px,8vw,120px)}
.reel--pin{height:280vh;padding-bottom:0}
.reel__pin{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)}
.reel--pin .reel__pin{position:sticky;top:0;height:100vh;height:100svh;padding-block:calc(72px + env(safe-area-inset-top,0px)) 0;justify-content:flex-start}
.reel__bar .in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.reel__frame{position:relative;flex:1;min-height:60vh;overflow:hidden;background:var(--panel);clip-path:inset(0 var(--fx,4%) var(--fb,0px) var(--fx,4%) round var(--fr,14px))}
.reel:not(.reel--pin) .reel__frame{height:min(80vh,860px);flex:none}
.reel__frame > a.scr .media{position:absolute;inset:0}
/* film du site : on voit toujours l'image entière (16:9), à la hauteur de l'écran */
.reel--video.reel--pin{height:170vh}
.reel__frame--video{flex:none;min-height:0;align-self:center;width:min(100%,calc((100svh - 160px) * 16 / 9));aspect-ratio:16/9}
.reel__frame--video .scr__video{object-fit:contain;background:#0A0A0B}
.cuts{padding-block:clamp(70px,9vw,140px)}
.cuts__in{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:end}
.cuts__in--solo{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center}
.cuts__txt{font-size:clamp(40px,5.4vw,96px);letter-spacing:-.055em;line-height:.9}
.cut{margin:0;display:grid;gap:12px}
.cut__screen{position:relative;overflow:hidden;border-radius:10px;background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.cut--wide .cut__screen{aspect-ratio:16/10}
.cut--mob .cut__screen{aspect-ratio:9/19.5;border-radius:clamp(16px,2vw,28px);max-width:340px;justify-self:end;width:100%}
.cut--mob{justify-items:end}
@media (max-width:700px){
  .reel--pin{height:220vh}
  .reel__bar .seg{display:none}
  .cuts__in,.cuts__in--solo{grid-template-columns:minmax(0,1fr)}
  .cut--mob,.cut--mob .cut__screen{justify-self:center;justify-items:center;max-width:260px}
}

/* le grain reste sur le noir, jamais sur les images : le contenu passe au-dessus */
main#contenu,.end{position:relative;z-index:1}

/* showreel */
.sr{position:relative;height:230vh}
.sr__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sr__frame{position:absolute;inset:0;overflow:hidden;background:var(--panel);transform:scale(var(--fs,.55));border-radius:var(--sr,30px);will-change:transform}
.sr__frame video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--ss,1.15))}
.sr__t{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:.12em;font-size:clamp(70px,15vw,290px);letter-spacing:-.07em;line-height:1;color:#fff;mix-blend-mode:difference;pointer-events:none;opacity:var(--so,1)}
.sr__t span{display:inline-block;transform:translateX(calc(var(--tx,0vw) * -1))}
.sr__t span + span{transform:translateX(var(--tx,0vw))}
.sr__cap{position:absolute;left:0;right:0;bottom:clamp(20px,3vw,40px);color:#fff;mix-blend-mode:difference}
.sr__cap .in{display:flex;justify-content:space-between;gap:20px}
.sec{padding-block:clamp(80px,10vw,150px)}
.band{padding-bottom:clamp(30px,4vw,60px)}

/* l'œil : l'image à travers les lettres */
.works:has(+ .ey){padding-bottom:clamp(30px,4vw,60px)}
.ey{position:relative;height:calc(var(--n) * 200vh + 40vh)}
.ey__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ey__st{position:absolute;inset:0;opacity:0;isolation:isolate}
.ey__img{position:absolute;inset:0;transform:scale(var(--is,1.1))}
.ey__img img{width:100%;height:100%;object-fit:cover;display:block}
.ey__mask{will-change:transform,opacity;position:absolute;inset:-2px;display:flex;align-items:center;justify-content:center;background:#0A0A0B;color:#fff;mix-blend-mode:multiply;opacity:var(--mo,1);transform:scale(var(--ms,1));transform-origin:var(--ox,50%) 50%}
.ey__w{display:flex;font-weight:700;font-size:clamp(80px,19vw,380px);letter-spacing:-.075em;line-height:1;white-space:nowrap;overflow:hidden;padding:.06em .1em .1em}
.ey__w i{font-style:normal;display:inline-block;transform:translateY(var(--cy,110%))}
.ey__cap{position:absolute;left:0;right:0;bottom:clamp(26px,4vw,56px);opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0)) * 20px));color:#fff}
.ey__cap .in{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.ey__c{font-size:clamp(22px,2.6vw,46px);letter-spacing:-.04em;line-height:1.05;max-width:16ch;text-align:right;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.ey__mask--logo{flex-direction:column;gap:clamp(18px,3vw,40px)}
.ey__logo{width:clamp(220px,40vw,640px);transform:scale(var(--ls,.8))}
.ey__logo .mark{width:100%;height:auto;display:block}
.ey__logo .mark .bar,.ey__logo .mark .eye-w,.ey__logo .mark .pupil{fill:#fff}
.ey__logo .mark .iris{fill:#0A0A0B}
.ey__end{font-size:clamp(40px,6.4vw,124px);letter-spacing:-.06em;line-height:.95;font-weight:600;text-align:center;opacity:var(--eo,0);transform:translateY(calc((1 - var(--eo,0)) * 30px))}
.ey__end .it{font-weight:300}
.ey__grain{position:absolute;inset:-25%;pointer-events:none;opacity:var(--go,.12);background-size:180px 180px;animation:grain .8s steps(4) infinite;z-index:5}
.ey__h{position:absolute;left:max(16px,calc(var(--g) + 16px));top:calc(84px + env(safe-area-inset-top,0px));color:#fff;mix-blend-mode:difference}
@media (max-width:700px){.ey__c{display:none}}

/* défilé des projets : l'image s'ouvre, le nom se coupe en deux */
.works:has(+ .fx){padding-bottom:clamp(30px,4vw,60px)}
.fx{position:relative;height:calc((var(--n) * 85 + 60) * 1vh)}
.fx__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.fx__it{position:absolute;inset:0;opacity:0;pointer-events:none;clip-path:inset(var(--cy,40%) var(--cx,38%) round 14px)}
.fx__it.on{pointer-events:auto}
.fx__img{position:absolute;inset:0;transform:scale(var(--is,1.25))}
.fx__img img{width:100%;height:100%;object-fit:cover;display:block}
.fx__it::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,.3)}
.fx__words{position:absolute;inset:0;pointer-events:none;color:#fff;mix-blend-mode:difference}
.fx__w{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:.14em;font-size:clamp(44px,min(10.5vw,calc(150vw / var(--len,8))),210px);letter-spacing:-.065em;line-height:1;white-space:nowrap;opacity:0}
.fx__w span{display:inline-block;transform:translateX(calc(var(--tx,0vw) * -1))}
.fx__w span + span{transform:translateX(var(--tx,0vw))}
.fx__meta{position:absolute;left:0;right:0;bottom:clamp(22px,3vw,40px);color:#fff;mix-blend-mode:difference}
.fx__meta .in{display:flex;justify-content:space-between;align-items:center;gap:20px}
.fx__kinds{position:relative;display:grid;text-align:center}
.fx__kinds span{grid-area:1/1;opacity:0;transition:opacity .4s var(--out)}
.fx__kinds span.on{opacity:1}
.fx__bar{position:absolute;left:0;right:0;top:0;height:2px;background:transparent}
.fx__bar i{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--fp,0))}
@media (max-width:700px){.fx__w{flex-direction:column;gap:0}.fx__kinds{display:none}}

/* bande d'images animée */
.works:has(+ .band){padding-bottom:clamp(36px,4vw,64px)}
.band{position:relative;display:grid;gap:clamp(10px,1.2vw,18px);padding-block:clamp(20px,3vw,40px) clamp(70px,9vw,140px);overflow:hidden;--skew:0deg}
.band__row{overflow:hidden;transform:skewY(var(--skew));transition:transform .4s var(--out)}
.band__track{display:flex;gap:clamp(10px,1.2vw,18px);width:max-content;animation:band 60s linear infinite;will-change:transform}
.band__row--rev .band__track{animation-direction:reverse;animation-duration:70s}
.band:hover .band__track{animation-play-state:paused}
@keyframes band{to{transform:translateX(-50%)}}
.band__it{position:relative;flex:none;height:clamp(180px,26vw,400px);aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--panel)}
.band__row--rev .band__it{aspect-ratio:3/2}
.band__it img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 1.2s var(--out),filter .8s var(--out)}
.band__it:hover img{transform:scale(1.12)}
.band:hover .band__it:not(:hover) img{filter:brightness(.45) grayscale(.6)}
.band__cap{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(10,10,11,.6);backdrop-filter:blur(8px);color:var(--fg);opacity:0;transform:translateY(8px);transition:opacity .5s var(--out),transform .5s var(--out)}
.band__it:hover .band__cap{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.band__track{animation:none}}

/* à propos */
.about__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,7vw,130px);align-items:center}
.about__media{position:relative;padding-bottom:clamp(40px,8vw,120px)}
.about__pic,.about__pic2{margin:0;overflow:hidden;border-radius:4px;background:var(--panel)}
.about__pic{aspect-ratio:4/5;width:86%}
.about__pic img,.about__pic2 img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1.6s var(--out),filter 1s var(--out)}
.about__pic.in-view img{transform:scale(1.001)}
.about__pic:hover img{filter:grayscale(.2) contrast(1.05)}
.about__pic img{transform:scale(1.12)}
.about__pic2{position:absolute;right:0;bottom:0;width:40%;aspect-ratio:4/5;box-shadow:0 0 0 8px var(--bg)}
.about__k{display:block;margin-bottom:clamp(22px,3vw,36px)}
.about h2{font-size:clamp(44px,6.2vw,108px);letter-spacing:-.055em;line-height:.92}
.about h2 .it{color:var(--fg-2)}
.about__body{display:grid;gap:1.1em;margin-top:clamp(28px,3.4vw,48px);max-width:620px;font-size:clamp(16px,1.15vw,18px);color:var(--fg-2);line-height:1.6}
.about__body .about__lead{font-size:clamp(19px,1.6vw,25px);color:var(--fg);line-height:1.4;letter-spacing:-.015em}
.about__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:clamp(30px,3.6vw,52px) 0 0;max-width:620px}
.about__facts div{border-top:1px solid var(--line);padding:14px 0 16px;display:grid;gap:6px}
.about__facts dt{color:var(--mute)}
.about__facts dd{margin:0;color:var(--fg);text-transform:none;letter-spacing:0;font-family:var(--f-sans);font-size:15px}
.about__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.4vw,46px)}
@media (max-width:900px){
  .about__in{grid-template-columns:minmax(0,1fr)}
  .about__media{max-width:520px}
}
@media (max-width:520px){.about__facts{grid-template-columns:minmax(0,1fr)}}

/* page Regards */
.rg-hero{padding-top:calc(80px + clamp(40px,6vw,100px));padding-bottom:clamp(70px,9vw,140px)}
.rg-hero__in{position:relative}
.rg-hero h1{font-size:clamp(90px,19vw,360px);letter-spacing:-.07em;line-height:.8;margin-top:24px}
.rg-hero__eye{position:absolute;right:var(--g);top:0;width:clamp(120px,22vw,380px)}
.rg-hero__eye .mark{width:100%;height:auto}
.rg-hero__eye .mark .bar{fill:var(--fg)}.rg-hero__eye .mark .eye-w{fill:var(--fg)}.rg-hero__eye .mark .iris{fill:var(--bg)}.rg-hero__eye .mark .pupil{fill:var(--blue)}
.rg-hero__lead{max-width:560px;margin-top:clamp(28px,3vw,44px);font-size:clamp(18px,1.5vw,23px);line-height:1.45;color:var(--fg-2)}
.rg-toc{list-style:none;margin:clamp(36px,4vw,60px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rg-toc a{display:inline-flex;gap:8px;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);transition:background .4s var(--out),color .4s var(--out)}
.rg-toc a:hover{background:var(--fg);color:var(--bg)}
.rg-ch{position:relative}
.rg-ch__cover{position:relative;display:block;height:100vh;height:100svh;overflow:hidden}
.rg-ch__img{position:absolute;inset:-12% 0;will-change:transform}
.rg-ch__img .media,.rg-ch__img img{width:100%;height:100%;object-fit:cover;display:block}
.rg-ch__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.15),transparent 30%,transparent 55%,rgba(10,10,11,.75))}
.rg-ch__cap{position:absolute;left:0;right:0;bottom:clamp(30px,5vw,70px);z-index:2}
.rg-ch__cap h2{font-size:clamp(64px,12vw,230px);letter-spacing:-.065em;line-height:.85;margin-top:12px}
.rg-ch__kind{display:block;font-size:clamp(22px,2.4vw,40px);color:var(--fg-2);margin-top:10px}
.rg-ch__strip{padding-block:clamp(40px,5vw,80px) clamp(90px,11vw,170px)}
.rg-ch__ex{max-width:560px;font-size:clamp(18px,1.4vw,22px);color:var(--fg-2);line-height:1.45}
.rg-ch__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px);margin-block:clamp(28px,3.4vw,48px)}
.rg-ch__ph{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--panel)}
.rg-ch__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--out),filter .8s var(--out)}
.rg-ch__ph:hover img{transform:scale(1.08)}
.rg-ch__row:hover .rg-ch__ph:not(:hover) img{filter:brightness(.5) grayscale(.5)}
@media (max-width:900px){.rg-ch__row{grid-template-columns:repeat(3,minmax(0,1fr))}.rg-hero__eye{position:static;width:120px;margin-bottom:20px}}

/* page Contact */
.ct-hero{padding-top:calc(80px + clamp(40px,6vw,100px))}
.ct-hero__top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:24px}
.ct-hero h1{font-size:clamp(60px,10vw,190px);letter-spacing:-.065em;line-height:.86}
.ct-hero__eye{width:clamp(110px,16vw,280px);flex:none}
.ct-hero__eye .mark{width:100%;height:auto}
.ct-hero__eye .mark .bar,.ct-hero__eye .mark .eye-w{fill:var(--fg)}.ct-hero__eye .mark .iris{fill:var(--bg)}.ct-hero__eye .mark .pupil{fill:var(--blue)}
.ct-main{padding-block:clamp(60px,8vw,120px) clamp(80px,10vw,150px)}
.ct-main__in{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:start}
.ct-form{display:grid;gap:clamp(34px,4vw,56px)}
.ct-form fieldset{border:0;margin:0;padding:0;display:grid;gap:18px}
.ct-form legend{padding:0;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:14px 22px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:clamp(15px,1.2vw,18px);transition:background .35s var(--out),color .35s var(--out),box-shadow .35s var(--out)}
.chip:hover span{box-shadow:inset 0 0 0 1px var(--fg)}
.chip input:checked + span{background:var(--fg);color:var(--bg)}
.chip input:focus-visible + span{outline:1.5px solid var(--blue);outline-offset:3px}
.ct-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-fields label{display:grid;gap:10px}
.ct-fields .full{grid-column:1/-1}
.ct-fields input,.ct-fields textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--fg);font:inherit;font-size:clamp(18px,1.5vw,24px);padding:10px 0 14px;outline:0;transition:border-color .4s var(--out);resize:vertical}
.ct-fields input:focus,.ct-fields textarea:focus{border-bottom-color:var(--blue)}
.ct-fields ::placeholder{color:var(--mute)}
.ct-send{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.ct-side{display:grid;gap:clamp(30px,3.4vw,48px);position:sticky;top:110px}
.ct-side > div{display:grid;gap:12px;justify-items:start;border-top:1px solid var(--line);padding-top:18px}
.ct-side p{color:var(--fg-2)}
.ct-side ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ct-mail{font-size:clamp(22px,2vw,34px);letter-spacing:-.035em;word-break:break-all}
.end--min{padding-top:0}
@media (max-width:900px){.ct-main__in,.ct-fields{grid-template-columns:minmax(0,1fr)}.ct-side{position:static}.ct-hero__eye{display:none}}

/* page À propos */
.ab-hero{padding-top:calc(80px + clamp(30px,4vw,64px));padding-bottom:clamp(60px,8vw,120px)}
.ab-hero__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:end}
.ab-hero h1{font-size:clamp(54px,8.6vw,160px);letter-spacing:-.06em;line-height:.88;margin-top:22px}
.ab-hero h1 .it{display:inline-block;font-size:.62em;color:var(--fg-2);margin-top:.15em}
.ab-hero__lead{margin-top:clamp(28px,3.4vw,48px);max-width:640px;font-size:clamp(19px,1.6vw,25px);line-height:1.4;letter-spacing:-.015em}
.ab-hero__pic{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--panel)}
.ab-hero__pic img,.ab-story__pic img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)}
.ab-hero__pic figcaption{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;background:rgba(10,10,11,.6);backdrop-filter:blur(8px)}
.ab-hero__pic figcaption .mark{width:26px;height:auto}
.ab-hero__pic figcaption .mark .bar,.ab-hero__pic figcaption .mark .eye-w,.ab-hero__pic figcaption .mark .pupil{fill:var(--fg)}
.ab-hero__pic figcaption .mark .iris{fill:var(--bg)}
.ab-story__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(30px,6vw,110px);align-items:center;padding-block:clamp(40px,6vw,90px)}
.ab-story__pic{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:4px;max-width:420px}
.ab-story__txt{display:grid;gap:1.1em;font-size:clamp(20px,2vw,32px);line-height:1.3;letter-spacing:-.025em;color:var(--fg-2)}
.ab-story__txt p:first-child{color:var(--fg)}
.ab-path__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(30px,6vw,110px);align-items:start}
.ab-path__side{position:sticky;top:110px;display:grid;gap:16px}
.ab-path h2{font-size:clamp(54px,7vw,128px);letter-spacing:-.06em;line-height:.9}
.ab-path__list{position:relative;list-style:none;margin:0;padding:0 0 0 clamp(26px,3vw,48px)}
.ab-path__line{position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
.ab-path__line i{position:absolute;inset:0;transition:none;background:var(--blue);box-shadow:0 0 10px var(--blue);transform-origin:top;transform:scaleY(var(--p,0))}
.ab-path__eye{position:absolute;left:50%;top:calc(var(--p,0) * 100%);width:48px;transform:translate(-50%,-50%);padding:8px 0;background:var(--bg);z-index:2}
.ab-path__eye .mark{width:100%;height:auto;display:block}
.ab-step{position:relative;display:grid;grid-template-columns:minmax(90px,.32fr) minmax(0,1fr);gap:clamp(16px,3vw,48px);padding-block:clamp(26px,3.4vw,48px);border-top:1px solid var(--line)}
.ab-step:first-child{border-top:0;padding-top:0}
.ab-step::before{content:"";position:absolute;left:calc(-1 * clamp(26px,3vw,48px) - 4px);top:clamp(34px,4.2vw,58px);width:9px;height:9px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.ab-step:first-child::before{top:10px}
.ab-step.on::before{background:var(--blue);box-shadow:0 0 12px var(--blue)}
.ab-step__y{font-size:clamp(34px,4vw,68px);letter-spacing:-.05em;line-height:1;color:var(--mute);font-variant-numeric:tabular-nums;transition:color .6s var(--out)}
.ab-step.on .ab-step__y{color:var(--fg)}
.ab-step__b{display:grid;gap:8px;align-content:start}
.ab-step h3{font-size:clamp(22px,2.2vw,36px);letter-spacing:-.035em;line-height:1.05}
.ab-step p{color:var(--fg-2);max-width:52ch;margin-top:6px}
.ab-skills{padding-bottom:clamp(60px,8vw,120px)}
.ab-skills__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,48px)}
.ab-skills__list li{display:flex;align-items:baseline;gap:18px;padding-block:clamp(16px,1.8vw,26px);border-top:1px solid var(--line);font-size:clamp(24px,2.6vw,44px);letter-spacing:-.045em;line-height:1.05}
.ab-tools{margin:0 0 clamp(90px,11vw,170px)}
@media (max-width:900px){
  .ab-hero__in,.ab-story__in,.ab-path__in{grid-template-columns:minmax(0,1fr)}
  .ab-hero__pic{max-width:520px}
  .ab-path__side{position:static}
  .ab-skills__list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){.ab-step{grid-template-columns:minmax(0,1fr);gap:6px}}

/* contenu des projets (blocs Gutenberg) */
.entry{padding-bottom:clamp(70px,9vw,140px)}
.entry__in > *{max-width:760px;margin-inline:auto;margin-block:0 1.4em}
.entry__in > p,.entry__in > ul,.entry__in > ol{font-size:clamp(17px,1.3vw,20px);color:var(--fg-2);line-height:1.6}
.entry__in > h2,.entry__in > h3{font-size:clamp(30px,3.4vw,56px);letter-spacing:-.045em;line-height:1;color:var(--fg);margin-top:1.4em}
.entry__in > h3{font-size:clamp(22px,2vw,32px)}
.entry__in a{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:4px}
.entry__in > .alignwide{max-width:1400px}
.entry__in > .alignfull{max-width:none;width:100vw;margin-left:calc(50% - 50vw);margin-right:0}
.entry__in figure{margin-block:0 clamp(14px,1.6vw,24px)}
.entry__in > figure,.entry__in > .wp-block-image,.entry__in > .wp-block-gallery,.entry__in > .wp-block-columns,.entry__in > .wp-block-video,.entry__in > .wp-block-embed{max-width:1400px}
.entry__in img{display:block;width:100%;height:auto;border-radius:4px}
.entry__in .alignfull img{border-radius:0}
.entry__in figcaption,.entry__in .wp-element-caption{font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-top:10px;text-align:left}
.entry__in .wp-block-columns{display:flex;gap:clamp(14px,1.6vw,24px);margin-bottom:clamp(14px,1.6vw,24px)}
.entry__in .wp-block-column{flex:1;min-width:0}
.entry__in .wp-block-column > *:last-child{margin-bottom:0}
/* images côte à côte : même hauteur (léger recadrage si les formats diffèrent) */
.entry__in .wp-block-columns{align-items:stretch}
.entry__in .wp-block-column:has(> figure.wp-block-image:only-child){display:flex}
.entry__in .wp-block-column > figure.wp-block-image:only-child{display:flex;flex-direction:column;flex:1;margin:0}
.entry__in .wp-block-column > figure.wp-block-image:only-child img{flex:1;min-height:0;height:100%;object-fit:cover}
.entry__in .wp-block-gallery{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,24px)}
.entry__in .wp-block-gallery figure{flex:1 1 calc(50% - 24px);margin:0}
.entry__in .wp-block-gallery.columns-3 figure{flex-basis:calc(33.33% - 24px)}
.entry__in blockquote{border:0;margin-inline:auto;padding:0;font-size:clamp(26px,3vw,48px);letter-spacing:-.04em;line-height:1.1;color:var(--fg)}
.entry__in video,.entry__in iframe{width:100%;border-radius:4px}
.reveal-img{clip-path:inset(12% 0 0 0);transform:translateY(40px);transition:clip-path 1.3s var(--out),transform 1.3s var(--out)}
.reveal-img.in-view{clip-path:inset(0 0 0 0);transform:none}

/* projet suivant */
.next{position:relative;display:block;overflow:hidden;border-top:1px solid var(--line);padding-block:clamp(80px,12vw,180px)}
.next__img{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--out)}
.next__img .media{position:absolute;inset:0;transform:scale(1.08);transition:transform 1.4s var(--out)}
.next__img::after{content:"";position:absolute;inset:0;background:rgba(10,10,11,.55)}
.next:hover .next__img{opacity:1}
.next:hover .next__img .media{transform:scale(1)}
.next__in{position:relative;display:grid;gap:16px}
.next__t{font-size:clamp(56px,12vw,230px);letter-spacing:-.065em;line-height:.84;font-weight:600;transition:transform .8s var(--out)}
.next:hover .next__t{transform:translateX(clamp(10px,2vw,40px))}

/* page simple & 404 */
.page-simple__head{padding-bottom:clamp(40px,5vw,70px)}
.page-simple__head h1,.page-title{font-size:clamp(52px,9vw,170px);letter-spacing:-.06em;line-height:.85;margin-top:18px}
.e404{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-block:120px}
.e404 .in{display:grid;gap:26px;justify-items:start}
.e404__eye{width:clamp(110px,14vw,200px)}
.e404__eye .mark{width:100%;height:auto}
.e404 h1{font-size:clamp(52px,9vw,170px);letter-spacing:-.06em;line-height:.88}
.e404 p{color:var(--fg-2);font-size:clamp(17px,1.3vw,20px)}
.e404__act{display:flex;flex-wrap:wrap;gap:10px}
.nav-links{display:flex;gap:10px;margin-top:30px}
.nav-links a,.nav-links span{padding:10px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2)}

/* ========== CONTACT ========== */
.end{position:relative;padding-block:clamp(110px,14vw,200px) 0;overflow:hidden;border-top:1px solid var(--line)}
.end__glow{position:absolute;left:50%;top:40%;width:120vmax;height:70vmax;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(46,75,255,.14),transparent 70%);pointer-events:none}
.end__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center;margin-top:24px}
.end__eye{width:clamp(110px,15vw,230px)}
.end__eye .mark{width:100%;height:auto}
.end h2{font-size:clamp(64px,12.5vw,240px);letter-spacing:-.065em;line-height:.84;font-weight:600}
.end__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end;margin-top:clamp(40px,6vw,90px)}
.mail{font-size:clamp(28px,4.6vw,82px);letter-spacing:-.05em;font-weight:500;line-height:1;overflow-wrap:anywhere;user-select:all;background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 100%/0 2px;transition:background-size .7s var(--out)}
.mail:hover{background-size:100% 2px}
.end__act{display:flex;flex-wrap:wrap;gap:10px}
.foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(60px,8vw,120px);padding-block:22px calc(26px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--mute)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:var(--fg)}
.foot a:hover{color:var(--blue)}
.foot .r{text-align:right}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:96;transform:translate(-50%,16px);opacity:0;background:var(--blue);color:var(--fg);padding:12px 18px;border-radius:999px;transition:.45s var(--out);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero__foot,.quo,.end__row,.sp-info .in{grid-template-columns:minmax(0,1fr)}
  .hero__side{justify-self:start}
  .head__r{justify-items:start}
  .hero__logo{width:70vw;top:38%}
  .idx a{grid-template-columns:64px minmax(0,1fr) 22px;gap:4px 14px}
  .idx .kind,.idx .num{display:none}
  .idx .th{display:block;grid-row:span 2;width:64px;aspect-ratio:4/5;border-radius:3px}
  .idx h3{grid-column:2}
  .idx .cat{grid-column:2;grid-row:2}
  .idx .arr{grid-column:3;grid-row:1}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .step:nth-child(3){border-left:0;padding-left:0}
  .exp__in{grid-template-columns:minmax(0,1fr)}
  .exp__in p{grid-column:1}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .r{text-align:left}
  .gal__head p{display:none}
  .browser__view{height:70vh}
  .entry__in .wp-block-columns{flex-direction:column}
}
@media (max-width:560px){
  .end__top{grid-template-columns:minmax(0,1fr)}
  .exp button{grid-template-columns:36px minmax(0,1fr) 28px}
  .hero__meta span:nth-child(n+2){display:none}
  .sp-info__meta div{grid-template-columns:90px minmax(0,1fr)}
  .browser__bar{grid-template-columns:auto 1fr}
  .browser__bar > a{display:none}
}
@media (prefers-reduced-motion:reduce){
  .grain,.blink .eye,.hero__meta .scroll i::after,.eco__track{animation:none}
  .eco__step{opacity:1}
  .ln > span,.fd,.reveal-img{transform:none!important;opacity:1!important;clip-path:none!important;transition:none}
  .sp-hero__img{--r:150%;transition:none}
}