@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{--bg:#F1EDE4;--ink:#151412;--mute:#7A756B;--m:4vw;--g:16px;--serif:"Norman","Instrument Serif","Times New Roman",serif;--sans:"Hanken Grotesk",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--ink);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column;animation:in .4s ease both;transition:opacity .35s ease}
body.out{opacity:0}
@keyframes in{from{opacity:0}}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
img{display:block;max-width:100%;-webkit-user-drag:none}
.n{font-variant-numeric:tabular-nums}
.meta{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.hd{display:flex;justify-content:space-between;align-items:baseline;padding:22px var(--m);position:relative;z-index:5}
.name{font:400 26px/1 var(--serif);letter-spacing:.005em}
.hd nav{display:flex;gap:28px;font-size:14px}
.hd [aria-current]{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.ft{display:flex;justify-content:space-between;gap:16px;padding:64px var(--m) 24px;font-size:13px;color:var(--mute);margin-top:auto}
.ft .lk{display:flex;gap:20px}
main{flex:1}

/* Accueil : liste verticale par défaut (mobile, sans JS) */
.home{padding-top:48px}
.home .meta{padding:0 var(--m) 40px;line-height:1.6}
.hint{display:none}
.canvas{list-style:none;padding:0 var(--m);display:flex;flex-direction:column;gap:56px}
.it a{display:block}
.it:nth-child(even){width:78%;margin-left:auto}
.top{display:flex;align-items:baseline;gap:12px;margin-bottom:10px;min-width:0}
.top .n,.top .y{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.top .t{flex:1;min-width:0;font:400 24px/1.1 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.it img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

/* Accueil : bande horizontale à faire glisser (ordinateur, tablette) */
.cv .home-page{height:100vh;overflow:hidden}
.cv .home-page .hd{position:fixed;left:0;right:0;top:0}
.cv .home{position:fixed;inset:0;padding:40px 0 0;display:flex;align-items:center;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.cv .home.drag{cursor:grabbing}
.cv .canvas{--h:clamp(280px,62vh,1100px);flex-direction:row;gap:2.2vw;width:max-content;padding:0 var(--m);will-change:transform}
.cv .it,.cv .it:nth-child(even){flex:none;width:calc(var(--h)*.8);margin:0}
.cv .top .t{font-size:26px}
.cv .home .meta{position:fixed;left:var(--m);bottom:22px;padding:0;z-index:5}
.cv .hint{display:inline}
.cv .home-page .ft{position:fixed;right:var(--m);bottom:0;padding:0 0 22px;z-index:5;margin:0}
.cv .home-page .ft .loc{display:none}
.cur{position:fixed;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:7;opacity:0;transition:scale .2s}
.cur.on{opacity:1}
.cur.drag{scale:.5}
@media (pointer:fine){.cv .home{cursor:none}}

/* Page projet */
.ph{padding:96px var(--m) 56px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g)}
.ph .meta{grid-column:1/-1;margin-bottom:20px}
.ph h1{grid-column:1/-1;font:400 clamp(42px,8vw,134px)/.95 var(--serif);letter-spacing:0;text-transform:uppercase;overflow-wrap:break-word}
.ph dl{grid-column:1/5;margin-top:44px;font-size:13px}
.ph dl div{display:flex;gap:16px}
.ph dt{color:var(--mute);min-width:56px}
.ph .d{grid-column:5/11;margin-top:44px;max-width:38em}
.ph .d p+p{margin-top:.9em}
.ph h1+.d{grid-column:1/8}
.gal{display:flex;flex-direction:column;gap:12px;padding:0 var(--m)}
.fg{width:100%}
.fg.col{width:min(100%,52vw);margin:0 auto}
.fg img{width:100%;height:auto}
.js .fg{opacity:0;transition:opacity .5s ease}
.js .fg.in{opacity:1}
.pn{display:flex;justify-content:space-between;padding:72px var(--m) 0;font:400 22px/1 var(--serif)}

/* À propos / Contact */
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding:0 var(--m)}
.about{padding-top:40px}
.about .top{row-gap:32px}
.pt{grid-column:1/6}
.pt img{width:100%;height:auto}
.tx{grid-column:7/12;font-size:17px;max-width:30em}
.tx p+p{margin-top:1.1em}
.lst{margin-top:96px}
.lst h2,.cta h2{grid-column:1/4;font:400 30px/1 var(--serif)}
.lst ol,.lst ul{grid-column:5/13;list-style:none;columns:2;column-gap:var(--g)}
.lst li{padding:6px 0;break-inside:avoid}
.lst ol .n{display:inline-block;width:3em;color:var(--mute);font-size:13px}
.lst .exp{grid-column:5/13;columns:1}
.exp li{display:grid;grid-template-columns:11em 1fr;column-gap:var(--g);padding:14px 0;border-top:1px solid rgba(21,20,18,.14)}
.exp .per{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.exp strong{font-weight:500}
.exp .tt{color:var(--mute)}
.cta{padding:120px var(--m) 0}
.cta h2{font-size:clamp(52px,10vw,168px);letter-spacing:-.02em;line-height:.9}
.cta a{display:inline-block;margin-top:28px;font-size:17px;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.contact{padding:96px var(--m) 0}
.contact .big{display:block;font:400 clamp(30px,5.4vw,92px)/1.1 var(--serif);letter-spacing:-.01em;margin-top:24px;overflow-wrap:anywhere}
.contact .big+.big{margin-top:.1em}
.contact a.big:hover{text-decoration:underline;text-decoration-thickness:1px}
.soc{margin-top:56px;font-size:17px}

@media (max-width:899px){
  :root{--m:5vw}
  .name{font-size:22px}
  .ph h1,.ph dl,.ph .d,.ph h1+.d{grid-column:1/-1}
  .ph .d{margin-top:28px}
  .fg.col{width:100%}
  .pt,.tx{grid-column:1/-1}
  .lst h2{grid-column:1/-1;margin-bottom:20px}
  .lst ol,.lst ul,.lst .exp{grid-column:1/-1;columns:1}
  .exp li{grid-template-columns:1fr;row-gap:4px}
  .pn{font-size:18px}
  .ft{flex-direction:column;gap:8px}
}
@media (min-width:2000px){html{font-size:17px}}
@media (prefers-reduced-motion:reduce){
  body{animation:none;transition:none}
  .js .fg,.cur{transition:none}
}