/* Variante 6 — 間 Ma — l'intervalle. Blanc, trait fin, espace négatif, un seul détail noir. */
@font-face{font-family:Inter;src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .55s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vt-in 1.1s cubic-bezier(.16,1,.3,1) both}
::view-transition-group(pic){animation-duration:1.1s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
@keyframes vt-out{to{opacity:0;filter:blur(6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
:root{--paper:#f7f7f5;--ink:#111;--g1:#8b8b86;--g2:#c9c9c4;--hl:#e2e2dd;--m:clamp(20px,4.2vw,72px);--col:calc((100vw - 2*var(--m))/12);
 --ease:cubic-bezier(.16,1,.3,1);--slow:1.6s;--mono:"Geist Mono",ui-monospace,monospace;--jp:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif JP",serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font:400 15px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-width:thin;scrollbar-color:var(--g2) transparent}
body{min-height:100vh;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
.mono{font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;font-weight:400}
.kanji{font-family:var(--jp);font-weight:300}
.skip{position:fixed;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* en-tête */
.hd{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;padding:26px var(--m);pointer-events:none;mix-blend-mode:difference;color:#fff}
.hd>*{pointer-events:auto}
.logo{display:flex;flex-direction:column;line-height:1.15}
.logo b{font-weight:500;font-size:14px;letter-spacing:-.01em}
.logo span{font-weight:300;font-size:14px;opacity:.6}
.nav{display:flex;gap:28px}
.nav a{position:relative;padding:2px 0;opacity:.62;transition:opacity .5s}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:5px;margin-top:-3px;background:currentColor}
.nav .lng{opacity:1;padding-left:22px;border-left:1px solid currentColor}

/* l'axe : un trait vertical, et le seul carré noir qui y glisse */
.axis{position:fixed;top:0;bottom:0;right:calc(var(--m)*.5);width:1px;background:var(--hl);z-index:30;pointer-events:none}
.axis i{position:absolute;left:-3px;top:0;width:7px;height:7px;background:var(--ink);transform:translateY(calc(var(--sp,0)*(100vh - 7px)));transition:transform .2s linear}
.dot{position:fixed;left:0;top:0;width:7px;height:7px;background:var(--ink);z-index:60;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:width .5s var(--ease),height .5s var(--ease),background .5s,border-color .5s,opacity .4s;border:1px solid transparent}
.dot.on{opacity:1}.dot.big{width:44px;height:44px;background:transparent;border-color:var(--ink)}
@media (pointer:fine){html.cur,html.cur a,html.cur button{cursor:none}}

/* apparitions lentes */
.rv{opacity:0;transform:translateY(28px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.rv.in{opacity:1;transform:none}
.fr{display:block;overflow:hidden;background:var(--hl)}
.fr img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 2.4s var(--ease),opacity 1.2s;clip-path:inset(100% 0 0 0);transition:clip-path 1.8s var(--ease),transform 2.4s var(--ease)}
.in .fr img,.fr.in img{clip-path:inset(0 0 0 0);transform:scale(1)}

/* accueil */
.hero{position:relative;height:100vh;min-height:560px;display:grid;grid-template-columns:repeat(12,1fr);padding:0 var(--m);column-gap:0}
.v-title{grid-column:1/3;grid-row:1;align-self:end;margin-bottom:9vh;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:200;font-size:clamp(34px,4.4vw,72px);line-height:1;letter-spacing:-.02em;display:flex;gap:.25em;white-space:nowrap}
.v-title em{font-style:normal;color:var(--g1);font-weight:200}
.hero-f{grid-column:3/13;grid-row:1;margin-top:13vh;height:74vh;position:relative;overflow:hidden}
.hero-f img{width:100%;height:100%;object-fit:cover;clip-path:inset(0 50% 0 50%);transform:scale(1.08);transition:clip-path 2.6s cubic-bezier(.7,0,.15,1) .9s,transform 4s var(--ease) .9s}
.hero-f::before{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:var(--ink);transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.7,0,.3,1),opacity .6s 2s;z-index:1}
.ready .hero-f::before{transform:scaleY(1);opacity:0}
.ready .hero-f img{clip-path:inset(0 0 0 0);transform:scale(1)}
.hero-ma{position:absolute;left:calc(var(--m) + var(--col)*2);bottom:3.2vh;display:flex;align-items:baseline;gap:14px;color:var(--g1)}
.hero-ma .kanji{font-size:22px;color:var(--ink)}
.cue{position:absolute;right:var(--m);bottom:3.2vh;display:flex;align-items:center;gap:12px;color:var(--g1)}
.cue i{display:block;width:1px;height:38px;background:var(--ink);transform-origin:top;animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ma-q{padding:32vh var(--m) 30vh;display:grid;grid-template-columns:repeat(12,1fr)}
.ma-q .q{grid-column:5/12;font-weight:200;font-size:clamp(28px,3.6vw,58px);line-height:1.12;letter-spacing:-.025em}
.ma-q .q2{grid-column:5/9;margin-top:9vh;color:var(--g1);font-weight:300;font-size:17px;transition-delay:.25s}
.sect{display:flex;gap:18px;color:var(--g1);padding:0 var(--m);margin-bottom:12vh}
.sect span{color:var(--ink)}
.sels{padding-bottom:20vh}
.sg{display:grid;grid-template-columns:repeat(12,1fr);column-gap:calc(var(--col)*.25);row-gap:16vh;padding:0 var(--m)}
.sel{grid-column:var(--c)/span var(--w);margin-top:calc(var(--dy)*1vh);display:block}
.sel .fr{aspect-ratio:4/3}
.sel:nth-child(3n+2) .fr{aspect-ratio:3/4}
.sel .cap{display:grid;grid-template-columns:3.2em 1fr;gap:4px 0;margin-top:16px}
.sel .cap b{font-weight:400;font-size:15px;line-height:1.35}
.sel .cap .m{grid-column:2;color:var(--g1)}
.sel .n{color:var(--g1);position:relative}
.sel:hover .fr img{transform:scale(1.025)}
.sel .n::after{content:"";position:absolute;left:0;top:6px;width:6px;height:6px;background:var(--ink);transform:scale(0);transition:transform .6s var(--ease)}
.sel:hover .n{color:transparent}.sel:hover .n::after{transform:scale(1)}
.allp{padding:22vh var(--m) 0;display:grid;grid-template-columns:repeat(12,1fr)}
.allp a{grid-column:6/13;display:flex;align-items:baseline;gap:22px;font-weight:200;font-size:clamp(34px,5vw,84px);letter-spacing:-.03em;line-height:1;border-bottom:1px solid var(--ink);padding-bottom:18px}
.allp a .mono{color:var(--g1)}
.allp a i{font-style:normal;margin-left:auto;transition:transform 1s var(--ease)}
.allp a:hover i{transform:translateX(14px)}
.skh{padding:12vh 0 22vh}
.skr{display:flex;gap:calc(var(--col)*.6);padding:0 var(--m) 0 calc(var(--m) + var(--col)*2);align-items:flex-start}
.skm{flex:1;max-width:220px;transition-delay:calc(var(--i)*.12s)}
.skm:nth-child(even){margin-top:8vh}
.skm img{transition:transform 1.4s var(--ease)}.skm:hover img{transform:translateY(-6px)}
.lnk{display:flex;gap:28px;padding:9vh var(--m) 0 calc(var(--m) + var(--col)*2)}
.lnk a{border-bottom:1px solid var(--ink);padding-bottom:3px}
.bur{padding:6vh 0 26vh}
.bur .big{padding:0 var(--m) 0 calc(var(--m) + var(--col)*2);font-weight:200;font-size:clamp(26px,3vw,46px);line-height:1.2;letter-spacing:-.02em}
.bur .big span{color:var(--g1)}

/* portfolio */
.pf{padding:22vh var(--m) 18vh}
.pf-h{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:10vh}
.pf-h h1{font-weight:200;font-size:clamp(48px,8vw,140px);letter-spacing:-.045em;line-height:.9}
.pf-h sup{font-size:11px;vertical-align:top;margin-left:10px;letter-spacing:.09em;color:var(--g1)}
.tools{display:flex;gap:40px;flex-wrap:wrap}
.tools [role=group]{display:flex;gap:18px}
.tg{color:var(--g1);font:inherit;letter-spacing:inherit;text-transform:inherit;position:relative;transition:color .4s}
.tg.on,.tg:hover{color:var(--ink)}
.tg.on::before{content:"";position:absolute;left:-11px;top:50%;width:5px;height:5px;margin-top:-3px;background:var(--ink)}
.pf-b{display:grid;grid-template-columns:1fr calc(var(--col)*3.6);gap:calc(var(--col)*.6);align-items:start}
.pl{list-style:none;border-top:1px solid var(--ink)}
.pl li{border-bottom:1px solid var(--hl)}
.pl li.off{display:none}
.pl a{display:grid;grid-template-columns:3.4em 1fr 11em 13em 3.6em;gap:16px;align-items:baseline;padding:15px 0;transition:opacity .6s}
.pl .t{font-size:17px;font-weight:300;letter-spacing:-.01em;transition:transform .9s var(--ease)}
.pl .c,.pl .n{color:var(--g1)}.pl .y{text-align:right}
.pl:hover a{opacity:.3}.pl a:hover{opacity:1}
.pl a:hover .t{transform:translateX(14px)}
.pl a .n{position:relative}
.pl a:hover .n::after{content:"";position:absolute;left:0;top:5px;width:6px;height:6px;background:var(--ink)}.pl a:hover .n{color:transparent}
.win{position:sticky;top:20vh;aspect-ratio:4/5;background:var(--hl);overflow:hidden}
.win-i{position:absolute;inset:0}
.win-i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.1s var(--ease),transform 2.2s var(--ease)}
.win-i img.on{opacity:1;transform:scale(1)}
.win figcaption{position:absolute;left:0;top:calc(100% + 12px);color:var(--g1)}
.win{overflow:visible}.win-i{overflow:hidden;background:var(--hl)}
.pp{display:none;grid-template-columns:repeat(6,1fr);gap:7vh calc(var(--col)*.3)}
.pp .pc.off{display:none}
.pp .fr{aspect-ratio:1;margin-bottom:10px;position:relative}
.pp .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--g1);font-size:9px}
.pp .pc>.mono{display:block;color:var(--g1);transition:color .4s}.pp .pc:hover>.mono{color:var(--ink)}
.pp .pc:nth-child(4n+2){margin-top:5vh}
.pf[data-view=plan] .pf-b{display:none}.pf[data-view=plan] .pp{display:grid}

/* emaki : défilement horizontal piloté par la molette (projets, croquis) */
.emaki{position:relative}
.em-s{position:sticky;top:0;height:100vh;overflow:hidden}
.em-t{display:flex;align-items:center;gap:calc(var(--col)*.9);height:100%;padding:0 0 0 var(--m);will-change:transform;width:max-content}
.pt{width:min(30rem,calc(var(--col)*4));flex:none;align-self:center}
.crumbs{display:flex;gap:26px;color:var(--g1);margin-bottom:6vh}
.crumbs a{color:var(--ink)}
.pt h1{font-weight:200;font-size:clamp(30px,3.1vw,52px);line-height:1.06;letter-spacing:-.03em}
.pt .sub{margin-top:18px;color:var(--g1);font-weight:300}
.txt{margin-top:4.5vh;max-width:34em}.txt p{font-weight:300;font-size:14.5px;line-height:1.7}.txt p+p{margin-top:.9em}
.facts{margin-top:5vh;border-top:1px solid var(--ink)}
.facts div{display:grid;grid-template-columns:8.5em 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--hl);font-size:13px}
.facts dt{color:var(--g1)}
.hint{margin-top:5vh;color:var(--g1)}.hint span{color:var(--ink)}
.gi{flex:none;--h:66vh}
.gi.land{--h:52vh}.sk.gi{--h:60vh}
.sk.gi.wide{--h:44vh}
.gi:nth-of-type(odd){margin-top:12vh}.gi:nth-of-type(even){margin-top:-10vh}
.gi button{display:block;overflow:hidden;background:var(--hl);cursor:zoom-in}
.gi img{height:var(--h);width:auto;max-width:none;transition:transform 2s var(--ease)}
.gi button:hover img{transform:scale(1.02)}
.gi figcaption{margin-top:12px;color:var(--g1);max-width:44ch}
.gi figcaption span{color:var(--ink);margin-right:12px}
.gi figcaption a{color:var(--ink);border-bottom:1px solid}
.gi.soon{width:calc(var(--col)*5);height:52vh;background:var(--hl);display:grid;place-items:center;color:var(--g1)}
.em-end{flex:none;width:calc(var(--col)*2);height:1px}
.em-bar{position:absolute;left:var(--m);right:calc(var(--m)*1.4);bottom:28px;height:1px;background:var(--hl)}
.em-bar i{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--ep,0))}
[data-first] img{view-transition-name:pic}
.p-sk .gi button{background:#fff}
.nextp{position:relative;display:grid;grid-template-columns:repeat(12,1fr);align-items:end;min-height:78vh;padding:0 var(--m) 14vh;border-top:1px solid var(--hl)}
.nextp .mono{grid-column:2/8;grid-row:1;align-self:start;padding-top:14vh;color:var(--g1)}
.nextp b{grid-column:2/9;grid-row:1;font-weight:200;font-size:clamp(34px,5.4vw,92px);line-height:1;letter-spacing:-.04em;transition:transform 1.2s var(--ease)}
.nextp .fr{grid-column:10/13;grid-row:1;aspect-ratio:3/4;align-self:center}
.nextp .fr img,.nextp .fr.in img{clip-path:inset(0 0 100% 0)}
.nextp:hover .fr img{clip-path:inset(0);transform:scale(1)}
.nextp:hover b{transform:translateX(18px)}

/* à propos */
.ab-h{display:grid;grid-template-columns:repeat(12,1fr);padding:22vh var(--m) 16vh;align-items:end}
.ab-t{grid-column:1/6;grid-row:1;padding-right:calc(var(--col)*.5)}
.ab-t .mono{color:var(--g1);margin-bottom:5vh}
.ab-t h1{font-weight:200;font-size:clamp(28px,3vw,50px);line-height:1.12;letter-spacing:-.025em}
.portrait{grid-column:6/13;grid-row:1}
.portrait img{width:100%;height:auto}
.portrait figcaption{margin-top:12px;color:var(--g1)}
.ab{padding:0 var(--m) 20vh}
.blk{display:grid;grid-template-columns:repeat(12,1fr);padding:12vh 0;border-top:1px solid var(--hl)}
.blk .bn{grid-column:1/3;color:var(--g1)}
.blk>div{grid-column:4/11}
.blk h2{color:var(--g1);margin-bottom:5vh}
.blk h3{font-weight:400;font-size:16px;margin-bottom:8px}
.blk p{font-weight:300;font-size:15.5px;line-height:1.75;max-width:40em}.blk p+p{margin-top:1em}
.blk .big{font-weight:200;font-size:clamp(26px,2.8vw,44px);line-height:1.15;letter-spacing:-.02em;margin-bottom:5vh}
.blk .big.sm{font-size:clamp(22px,2.2vw,34px);margin:0}
.notions{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8vh calc(var(--col)*.6)}
.notions li .mono{display:block;margin-bottom:14px;color:var(--ink)}
.cols2{columns:2;column-gap:calc(var(--col)*.6)}.cols2 p{break-inside:avoid;margin-bottom:1em}
.journey{display:grid;gap:7vh}
.quote p{font-weight:200;font-size:clamp(30px,3.6vw,58px);line-height:1.1;letter-spacing:-.025em}
.quote cite{display:block;margin-top:3vh;font-style:normal;color:var(--g1)}
.edu{list-style:none}.edu li{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--hl)}
.muted{color:var(--g1)}
.blk ul:not(.edu){padding-left:1.1em}.blk li{font-weight:300}

/* contact */
.ct{padding:26vh var(--m) 22vh;display:grid;grid-template-columns:repeat(12,1fr)}
.ct h1{grid-column:1/10;font-weight:200;font-size:clamp(36px,5.6vw,96px);line-height:1.02;letter-spacing:-.04em;margin-bottom:16vh}
.ct>p{grid-column:1/-1}
.cl{grid-column:5/13}
.cl div{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--hl);font-weight:300;font-size:clamp(17px,1.5vw,22px)}
.cl div:first-child{border-top-color:var(--ink)}
.cl dt{color:var(--g1);padding-top:6px}
.cl a{transition:opacity .4s}.cl a:hover{opacity:.5}
.soc{display:flex;gap:22px;flex-wrap:wrap}

/* pied */
.ft{background:#efefec;padding:12vh var(--m) 5vh}
.ft-g{display:grid;grid-template-columns:repeat(12,1fr);gap:28px 0;font-weight:300;font-size:13.5px;line-height:1.7}
.ft-g>div:nth-child(1){grid-column:1/4}.ft-g>div:nth-child(2){grid-column:5/8}.ft-g>div:nth-child(3){grid-column:8/11}.ft-g>div:nth-child(4){grid-column:11/13}
.ft-g .mono{display:block;color:var(--g1);margin-bottom:10px}
.ft .kanji{font-size:64px;line-height:1}
.ft .soc{flex-direction:column;gap:0}
.ft-c{grid-column:1/-1!important;margin-top:10vh;color:var(--g1);display:flex;justify-content:space-between}
.ft-c br{display:none}.ft-c em{font-style:normal}

/* visionneuse */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:rgba(247,247,245,.97);padding:0}
.lb::backdrop{background:transparent}
.lb[open]{display:grid;grid-template-columns:20vw 1fr 20vw;align-items:center;animation:vt-in .8s var(--ease)}
.lb figure{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8vh 0}
.lb img{max-height:80vh;width:auto;object-fit:contain}
.lb figcaption{margin-top:14px;color:var(--g1);text-align:center;max-width:60ch}
.lb-x{position:absolute;top:26px;right:var(--m);z-index:2}
.lb-p,.lb-n{height:100vh;cursor:w-resize}.lb-n{cursor:e-resize}
.lb-p::after,.lb-n::after{content:"";display:block;width:34px;height:1px;background:var(--ink);margin:auto}

/* mobile / mouvement réduit : tout redevient vertical et calme */
@media (max-width:820px){
 :root{--m:20px}
 .hd{padding:18px var(--m)}
 .nav{position:fixed;left:0;right:0;bottom:0;justify-content:space-between;gap:0;padding:16px var(--m) calc(16px + env(safe-area-inset-bottom))}
 .nav a[aria-current]::before{display:none}
 .nav .lng{padding-left:14px}
 .cue{display:none}.hero-ma{bottom:8vh;left:calc(var(--m) + (100vw - 2*var(--m))/6)}
 .axis{display:none}
 .hero{grid-template-columns:repeat(6,1fr);height:100svh}
 .v-title{grid-column:1/2;font-size:30px;margin-bottom:12vh}
 .hero-f{grid-column:2/7;margin-top:15vh;height:66svh;margin-right:calc(var(--m)*-1)}

 .ma-q{padding:18vh var(--m)}.ma-q .q{grid-column:2/13}.ma-q .q2{grid-column:3/13}
 .sg{grid-template-columns:repeat(6,1fr);row-gap:9vh}
 .sel{grid-column:1/-1!important;margin-top:0}
 .sel:nth-child(even){grid-column:2/-1!important}
 .sel:nth-child(3n){grid-column:1/6!important}
 .allp a{grid-column:1/-1}
 .skr{padding:0 var(--m);overflow-x:auto;gap:16px}.skm{flex:0 0 42vw}
 .lnk,.bur .big{padding-left:var(--m)}
 .pf{padding-top:16vh}
 .pf-b{grid-template-columns:1fr}.win{display:none}
 .pl a{grid-template-columns:2.6em 1fr 3em}.pl .c{display:none}.pl .t{font-size:15.5px}
 .pp{grid-template-columns:1fr 1fr}.pp .pc:nth-child(4n+2){margin-top:0}.pp .pc:nth-child(even){margin-top:4vh}
 .ab-h{grid-template-columns:1fr;padding-top:16vh}.ab-t,.portrait{grid-column:1;grid-row:auto}.portrait{margin-top:7vh}
 .blk{grid-template-columns:1fr;padding:8vh 0}.blk .bn{margin-bottom:3vh}.blk>div{grid-column:1}
 .notions{grid-template-columns:1fr}.cols2{columns:1}
 .ct{grid-template-columns:1fr}.ct h1,.cl{grid-column:1}.cl div{grid-template-columns:1fr;gap:4px}
 .ft-g>div{grid-column:1/-1!important}
 .nextp .mono,.nextp b{grid-column:1/-1}.nextp .fr{display:none}
 .lb[open]{grid-template-columns:15vw 1fr 15vw}
}
@media (max-width:820px),(prefers-reduced-motion:reduce){
 .em-s{position:static;height:auto;overflow:visible}
 .em-t{flex-direction:column;align-items:stretch;width:auto;padding:16vh var(--m) 10vh;gap:7vh;transform:none!important}
 .pt{width:auto}
 .gi{margin:0!important}
 .gi img{width:100%;height:auto}
 .gi.soon{width:auto;height:40vh}
 .em-bar,.em-end,.hint span{display:none}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:.01s!important;animation-duration:.01s!important}
 .rv{opacity:1;transform:none}.fr img,.hero-f img{clip-path:none!important;transform:none!important}
}

/* Accueil plein écran (22 oct. 2026) : le paysage occupe toute la fenêtre, bord à bord */
html:has(body.home){scrollbar-width:none}
html:has(body.home)::-webkit-scrollbar{display:none}
.home .hero{display:block;position:relative;width:100%;height:100vh;height:100dvh;min-height:0;padding:0;margin:0;overflow:hidden;background:#0d0d0c;color:#fff}
.home .hero-f{position:absolute;inset:0;margin:0;height:auto;width:auto;grid-column:auto}
.home .hero-f img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 55%}
.home .hero-f::before{background:#fff}
.home .hero-f::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 32%,rgba(0,0,0,0) 55%),linear-gradient(0deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%),linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 18%)}
.home .v-title{position:absolute;z-index:2;left:var(--m);bottom:11vh;margin:0;color:#fff;text-shadow:0 1px 24px rgba(0,0,0,.25);opacity:0;transition:opacity 1.6s var(--ease) 1.8s}
.home .v-title em{color:rgba(255,255,255,.72)}
.home.ready .v-title{opacity:1}
.home .hero-ma{z-index:2;left:calc(var(--m) + var(--col)*1.4);bottom:4.2vh;color:rgba(255,255,255,.8)}
.home .hero-ma .kanji{color:#fff}
.home .cue{z-index:2;right:calc(var(--m) + 14px);bottom:4.2vh;color:rgba(255,255,255,.8)}
.home .cue i{background:#fff}
.fs{position:absolute;z-index:2;left:50%;bottom:4.2vh;transform:translateX(-50%);display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.72);padding:6px 4px;transition:color .5s}
.fs:hover{color:#fff}
.fs::before{content:"";width:9px;height:9px;border:1px solid currentColor}
.fs[hidden]{display:none}
@media (max-width:820px){
 .home .hero{height:100vh;height:100dvh}
 .home .v-title{font-size:34px;bottom:auto;top:96px;left:var(--m)}
 .home .hero-ma{left:var(--m);bottom:calc(74px + env(safe-area-inset-bottom))}
 .home .hero-f img{object-position:50% 50%}
 .home .hero-f::after{background:linear-gradient(90deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 60%),linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 32%),linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%)}
 .fs{display:none}
}
/* en-tête lisible sur la photo, puis retour au mode « différence » sur le papier */
.home.on-hero .hd{mix-blend-mode:normal;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.home.on-hero .nav a{opacity:.85}.home.on-hero .nav a:hover{opacity:1}
.home.on-hero .axis{background:rgba(255,255,255,.35)}.home.on-hero .axis i{background:#fff}
/* titre conservé pour l'accessibilité, mais invisible : le logo suffit */
.sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;padding:0!important;margin:-1px!important;border:0!important}
/* === Tuiles Architecture : grille par rangées, tuiles identiques, ordre chronologique lisible (2026-10-23) === */
.pp{grid-template-columns:repeat(4,minmax(0,1fr));gap:6vh calc(var(--col)*.3);align-items:start;grid-auto-flow:row}
.pp .pc,.pp .pc:nth-child(n){margin-top:0!important;display:block;min-width:0}
.pp .pc.off{display:none}
.pp .fr{aspect-ratio:4/3!important;width:100%;height:auto;margin-bottom:10px;position:relative}
.pp .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp .pc>.mono{display:block}
.pp .pcy{color:var(--ink);margin-top:2px}
@media (max-width:820px){
 .pp{grid-template-columns:repeat(2,minmax(0,1fr));gap:5vh 12px}
 .pp .pc:nth-child(n){margin-top:0!important}
}
/* Accueil : projets choisis en rangées régulières, tuiles identiques */
.sg.sg-u{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(var(--col)*.35);row-gap:9vh;align-items:start}
.sg.sg-u .sel,.sg.sg-u .sel:nth-child(n){grid-column:auto!important;margin-top:0!important}
.sg.sg-u .sel .fr,.sg.sg-u .sel:nth-child(n) .fr{aspect-ratio:4/3!important;position:relative}
.sg.sg-u .sel .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.sg.sg-u{grid-template-columns:minmax(0,1fr);row-gap:7vh}}
/* Accueil plein écran : largeur et hauteur exactes de la fenêtre */
.home .hero{width:100%;height:100vh;height:100dvh}

/* ===================== v4 — SEO + beauté (23 oct. 2026) ===================== */
/* une seule famille : Inter partout (les petites capitales remplacent la police mono) */
:root{--mono:Inter,system-ui,sans-serif;--m:clamp(24px,5.4vw,104px)}
.mono{font-family:Inter,system-ui,sans-serif;font-size:10.5px;letter-spacing:.14em;font-weight:450;font-variant-numeric:tabular-nums}
.kanji,.ft-m{display:none!important}
.ft-g>div:nth-child(2){grid-column:1/4}
/* transitions lentes, en fondu */
::view-transition-old(root){animation:v4-out 1s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:v4-in 1.6s cubic-bezier(.4,0,.2,1) both}
::view-transition-group(pic){animation-duration:1.4s}
@keyframes v4-out{to{opacity:0}}
@keyframes v4-in{from{opacity:0}}
.rv{transform:translateY(10px);transition:opacity 2s cubic-bezier(.4,0,.2,1),transform 2.2s var(--ease)}
.fr picture{display:contents}
.fr img,.nextp .fr img,.nextp .fr.in img{clip-path:none!important;opacity:0;transform:scale(1.015);transition:opacity 1.8s cubic-bezier(.4,0,.2,1),transform 2.4s var(--ease),filter 1.2s}
.in .fr img,.fr.in img,.in.fr img{opacity:1;transform:scale(1)}
.home .hero-f::before{display:none}
.home .hero-f img{clip-path:none!important;opacity:0;transform:scale(1.025);transition:opacity 2.6s cubic-bezier(.4,0,.2,1) .2s,transform 7s var(--ease) .2s}
.home.ready .hero-f img{opacity:1;transform:scale(1)}
/* survol discret des vignettes */
.pp .pc:hover .fr img,.sel:hover .fr img,.nextp:hover .fr img{transform:scale(1.03);filter:brightness(.97)}
.pp .pc .fr img,.sel .fr img{transition:opacity 1.8s cubic-bezier(.4,0,.2,1),transform 1.6s var(--ease),filter 1.2s}
.pp .pc>.mono{transition:color .8s}
/* plus d'espace blanc */
.pf{padding-top:26vh;padding-bottom:24vh}
.pf-h{margin-bottom:14vh}
.pp{gap:11vh calc(var(--col)*.5)}
.pp .fr{margin-bottom:16px}
.sg.sg-u{row-gap:14vh;column-gap:calc(var(--col)*.5)}
.sel .cap{margin-top:20px}
.sect{margin-bottom:14vh}
.ma-q{padding:36vh var(--m) 34vh}
.skh{padding:16vh 0 26vh}
.bur{padding:10vh 0 30vh}
.em-t{gap:calc(var(--col)*1.1)}
.txt p,.blk p{line-height:1.8}
.nextp .fr{aspect-ratio:4/3}
/* cadre « à venir » */
.gi.soon,.pp .ph{letter-spacing:.14em}
/* curseur avant / après (croquis ↔ projet) */
.ba-f{position:relative;height:var(--h);width:calc(var(--h)*var(--r));overflow:hidden;background:#fff;--p:50;touch-action:pan-y}
.ba-f img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:contain;background:#fff}
.ba-b{object-fit:cover!important}
.ba-a{clip-path:inset(0 calc(100% - var(--p)*1%) 0 0);transition:clip-path .12s linear}
.ba-l{position:absolute;top:0;bottom:0;left:calc(var(--p)*1%);width:1px;background:var(--ink);pointer-events:none}
.ba-l::after{content:"";position:absolute;top:50%;left:-4px;width:9px;height:9px;margin-top:-4px;background:var(--ink)}
.ba-t{position:absolute;top:14px;padding:3px 7px;background:rgba(247,247,245,.86);color:var(--ink);pointer-events:none}
.ba-t1{left:14px}.ba-t2{right:14px}
.ba-f input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.ba-f:focus-within{outline:1px solid var(--ink);outline-offset:4px}
/* bouton menu : caché sur ordinateur */
.mnu{display:none}
@media (max-width:820px){
 :root{--m:22px}
 .pf{padding-top:18vh}
 .pp{gap:7vh 14px}
 .sg.sg-u{row-gap:9vh}
 .ma-q{padding:22vh var(--m)}
 .ba-f{width:100%;height:auto}
 /* menu mobile discret : un mot en haut à droite, la liste s'ouvre en fondu */
 .mnu{display:block;position:relative;z-index:3;padding:4px 0 4px 16px;letter-spacing:.16em}
 .hd .logo{position:relative;z-index:3}
 .nav{position:fixed;inset:0;bottom:auto;height:100vh;height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;padding:0 var(--m);background:var(--paper);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s linear .9s;z-index:2}
 .nav a{font-family:Inter,system-ui,sans-serif;font-size:30px;font-weight:200;letter-spacing:-.02em;text-transform:none;opacity:1;color:var(--ink)}
 .nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
 .nav .lng{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:450;border:0;padding:0;margin-top:5vh;color:var(--g1)}
 html.menu-open{overflow:hidden}
 html.menu-open .nav{opacity:1;visibility:visible;transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s}
 html.menu-open body .hd{mix-blend-mode:normal!important;color:var(--ink)!important;text-shadow:none!important}
 .home .hero-ma{bottom:calc(28px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.fr img,.home .hero-f img{opacity:1!important}}

/* panneaux de texte supplémentaires dans un projet */
.pt-x{width:min(32rem,calc(var(--col)*4.4))}
.pt-x .txt{margin-top:2.5vh}
.pt-x .facts{margin-top:2.5vh}
.pt-x .facts dd{line-height:1.6}
@media (max-width:820px){.pt-x{width:auto}}

/* ===== OUVERTURE DE L’ACCUEIL — À GARDER DÉFINITIVEMENT (demande de Johny, 23 oct. 2026) =====
   La photo paysage s’ouvre en deux depuis le centre (trait vertical, puis volets qui s’écartent).
   Code d’origine (règles .hero-f img / .ready .hero-f img plus haut) ; il avait été neutralisé par le
   bloc « v4 — SEO + beauté » (fondu au noir + zoom). Ce bloc doit rester le DERNIER du fichier. */
.home .hero-f::before{display:block}
.home .hero-f img{opacity:1;clip-path:inset(0 50% 0 50%)!important;transform:scale(1.08);transition:clip-path 2.6s cubic-bezier(.7,0,.15,1) .9s,transform 4s var(--ease) .9s}
.home.ready .hero-f img{clip-path:inset(0 0 0 0)!important;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.home .hero-f img,.home.ready .hero-f img{clip-path:none!important;transform:none!important}}