/* VERSION 1, Tunnel : noir profond, cuivre, Unbounded + Hanken Grotesk. Mobile d'abord. */
:root{--ink:#07070a;--ink2:#0f0f13;--bone:#efe9df;--accent:#e0a36a;--mut:rgba(239,233,223,.68);--line:rgba(239,233,223,.14);--pad:clamp(18px,4vw,56px);--ease:cubic-bezier(.23,1,.32,1);--disp:'Unbounded',system-ui,sans-serif;--body:'Hanken Grotesk',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.v1{font-family:var(--body);color:var(--bone);background:var(--ink);overflow-x:hidden;line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:300;letter-spacing:-.03em;line-height:1.02}
/* en-tête */
.top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:20px;padding:14px var(--pad);padding-top:max(14px,env(safe-area-inset-top));background:linear-gradient(180deg,rgba(7,7,10,.85),rgba(7,7,10,0))}
.top{--lh0:78px;--lh1:36px}.brand{display:block;margin-right:auto;line-height:0}.top .logo-img{height:var(--lh1);width:auto}.js .top .logo-img{height:var(--lh,var(--lh0))}.logo-img{width:auto}
.nav{display:none;gap:clamp(18px,3vw,40px)}.nav a{text-decoration:none;font-size:15px;opacity:.72;transition:opacity .2s}.nav a:hover,.nav a[aria-current]{opacity:1}
.cta{display:inline-block;background:var(--accent);color:#1a0f06;font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .16s var(--ease),background .2s;min-height:44px;line-height:1.2}
.cta:active{transform:scale(.97)}.cta.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1.5px var(--line)}
.top .cta{display:none}
.burger{width:46px;height:46px;border:0;background:rgba(239,233,223,.08);border-radius:50%;display:grid;place-content:center;gap:7px;cursor:pointer}.burger i{display:block;width:20px;height:1.6px;background:var(--bone);transition:transform .3s var(--ease)}
.burger[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}.burger[aria-expanded=true] i:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:var(--ink);padding:110px var(--pad) 40px;display:flex;flex-direction:column;justify-content:space-between}
.menu nav{display:grid;gap:6px}.menu nav a{font-family:var(--disp);font-weight:300;font-size:clamp(34px,10vw,64px);letter-spacing:-.03em;text-decoration:none;padding:8px 0}.menu p{color:var(--mut);font-size:17px;line-height:1.8}
@media(min-width:900px){.nav{display:flex}.top .cta{display:inline-block}.burger{display:none}.top{--lh0:128px;--lh1:44px}}
/* accueil : tunnel */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:pan-y}
#vig{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at center,transparent 45%,rgba(7,7,10,.78) 100%)}
#bar{position:fixed;left:0;top:0;height:3px;background:var(--accent);width:0;z-index:70}
.ui{position:fixed;z-index:5;pointer-events:none}.ui a{pointer-events:auto}
#intro{inset:0;display:grid;place-items:center;text-align:center;padding:0 5vw}
.wm{line-height:0;animation:in 1.2s var(--ease) both}.wm img{display:block;width:min(84vw,1120px);height:auto;margin:0 auto}
#intro p{margin-top:24px;font-size:clamp(16px,1.6vw,22px);opacity:.78;animation:in 1.2s .25s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
#hint{position:fixed;bottom:max(26px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.2em;opacity:.6;z-index:5;animation:bob 2.2s ease-in-out infinite;pointer-events:none}
@keyframes bob{50%{transform:translate(-50%,8px)}}
#meta{left:var(--pad);right:var(--pad);bottom:max(22px,env(safe-area-inset-bottom));max-width:640px;opacity:0}
#meta .sec{font-size:14px;color:var(--accent);margin-bottom:10px}#meta .nm{font-family:var(--disp);font-weight:300;font-size:clamp(24px,5.6vw,60px);line-height:1.04;letter-spacing:-.03em}
#meta .loc{margin-top:10px;font-size:16px;opacity:.78}
#meta .more{display:inline-flex;align-items:center;gap:10px;margin-top:18px;background:var(--bone);color:#111;text-decoration:none;font-weight:600;padding:13px 22px;border-radius:999px;min-height:44px;pointer-events:auto}
#meta .more::after{content:"→"}
#count{right:var(--pad);top:96px;font-family:var(--disp);font-weight:300;font-size:clamp(22px,3vw,44px);opacity:0}#count small{font-size:.4em;opacity:.55}
.chap{inset:0;display:grid;align-content:center;padding:90px var(--pad) 30px;opacity:0;visibility:hidden}
.chap h2{font-size:clamp(30px,6vw,98px);max-width:16ch}.chap p{margin-top:22px;font-size:clamp(16px,1.6vw,21px);line-height:1.55;max-width:46ch;opacity:.85}
.chap .team{display:grid;grid-template-columns:repeat(2,auto);gap:12px 36px;margin-top:26px;font-size:16px;justify-content:start}.chap .team b{display:block;font-weight:600}.chap .team span{opacity:.62;font-size:14px}
.chap .big{font-family:var(--disp);font-weight:300;font-size:clamp(34px,8vw,128px);line-height:.98;letter-spacing:-.04em}
.chap .row{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:26px;font-size:clamp(16px,1.7vw,22px)}.chap .row a{color:var(--accent);text-decoration:none}
.chap-cta{margin-top:26px!important;display:flex;flex-wrap:wrap;gap:10px}
.home .seo{position:relative;z-index:6;background:var(--ink2);padding:clamp(60px,9vw,120px) var(--pad)}
.home #track{height:1500vh;pointer-events:none}
.seo h2{font-size:clamp(28px,5vw,64px);margin-bottom:28px}
.plist{list-style:none;display:grid;gap:0;grid-template-columns:1fr}.plist a{display:block;padding:16px 0;border-top:1px solid var(--line);text-decoration:none;font-family:var(--disp);font-weight:300;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.02em;transition:padding .35s var(--ease),color .2s}
.plist a:hover{padding-left:14px;color:var(--accent)}
@media(min-width:900px){.plist{grid-template-columns:1fr 1fr;column-gap:50px}.chap .team{grid-template-columns:repeat(4,auto)}#meta{bottom:clamp(24px,5vh,60px)}}
/* pages intérieures */
.inner main{padding-top:92px}
.pg-head{padding:clamp(40px,8vw,110px) var(--pad) 30px}
.kick{color:var(--accent);font-size:15px;margin-bottom:14px}
.pg-head h1{font-size:clamp(38px,8vw,128px);max-width:16ch}.lead{margin-top:22px;max-width:56ch;font-size:clamp(17px,1.7vw,22px);opacity:.85}
.filters{display:flex;gap:8px;overflow-x:auto;margin-top:30px;padding-bottom:6px;scrollbar-width:none}.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;border:1.5px solid var(--line);background:transparent;color:var(--bone);padding:10px 18px;border-radius:999px;font:500 15px var(--body);cursor:pointer;min-height:44px;transition:background .2s,color .2s}
.filters button[aria-pressed=true]{background:var(--accent);color:#1a0f06;border-color:var(--accent)}
.grid-p{display:grid;grid-template-columns:1fr;gap:14px;padding:20px var(--pad) 90px}
@media(min-width:640px){.grid-p{grid-template-columns:1fr 1fr}}@media(min-width:1100px){.grid-p{grid-template-columns:repeat(3,1fr);gap:20px}}
.pcard{position:relative;display:block;overflow:hidden;background:#15151a;aspect-ratio:4/3;text-decoration:none}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,7,10,.88))}
.pc-t{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:grid;gap:3px}.pc-t small{color:var(--accent);font-size:13px}.pc-t b{font-family:var(--disp);font-weight:300;font-size:clamp(19px,2vw,26px);letter-spacing:-.02em;line-height:1.1}.pc-t em{font-style:normal;opacity:.75;font-size:14px}
@media(hover:hover){.pcard:hover img{transform:scale(1.07)}}
/* fiche projet */
.inner.project main{padding-top:0}
.p-hero{position:relative;min-height:78svh;display:flex;align-items:flex-end;overflow:hidden}
.p-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 18s ease-out both}
@keyframes kb{from{transform:scale(1.08)}to{transform:none}}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,10,.55),rgba(7,7,10,0) 30%,rgba(7,7,10,.92))}
.p-hero-in{position:relative;z-index:2;padding:110px var(--pad) clamp(28px,5vw,64px);max-width:1100px}
.crumb{display:inline-block;margin-bottom:26px;text-decoration:none;font-size:15px;opacity:.8}
.p-hero h1{font-size:clamp(34px,8vw,120px)}.p-hero .sub{margin-top:14px;font-size:clamp(16px,1.8vw,22px);opacity:.88;max-width:40ch}.p-hero .place{margin-top:8px;color:var(--accent);font-size:17px}
.p-body{display:grid;gap:30px;padding:clamp(40px,7vw,100px) var(--pad);grid-template-columns:1fr}
@media(min-width:900px){.p-body{grid-template-columns:minmax(260px,1fr) 2fr;gap:70px}}
.facts{display:grid;gap:0;align-content:start}.facts>div{padding:14px 0;border-top:1px solid var(--line)}.facts dt{font-size:13px;color:var(--accent)}.facts dd{margin-top:3px;font-size:17px}
.txt p{font-size:clamp(17px,1.6vw,21px);line-height:1.65;margin-bottom:1.1em;max-width:62ch;opacity:.92}.txt.wide p{max-width:72ch}
.h3{font-size:clamp(22px,2.4vw,32px);margin:34px 0 14px}.prog{list-style:none;display:grid;gap:0}.prog li{padding:13px 0 13px 28px;border-top:1px solid var(--line);position:relative;font-size:17px}.prog li::before{content:"";position:absolute;left:2px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.floors{padding:20px var(--pad) 70px}.floors h2,.gal h2{font-size:clamp(26px,4vw,52px);margin-bottom:22px}
[role=tab]{flex:none;border:1.5px solid var(--line);background:transparent;color:var(--bone);padding:11px 20px;border-radius:999px;font:600 15px var(--body);cursor:pointer;min-height:44px}
[role=tab][aria-selected=true]{background:var(--accent);color:#1a0f06;border-color:var(--accent)}
.fp{display:grid;gap:22px;margin-top:20px}@media(min-width:900px){.fp{grid-template-columns:1.3fr 1fr;align-items:start}}
.plans{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}.plans a{flex:0 0 min(86%,540px);scroll-snap-align:start;background:#fff;display:block;padding:10px}.plans a:only-child{flex-basis:100%}.plans img{width:100%;height:auto;max-height:68svh;object-fit:contain}
table{width:100%;border-collapse:collapse;font-size:16px}th,td{text-align:left;padding:13px 10px;border-top:1px solid var(--line)}th{color:var(--accent);font-weight:500;font-size:13px}td:last-child,th:last-child{text-align:right;white-space:nowrap}
.gal{padding:20px var(--pad) 40px}
.masonry{columns:1;column-gap:12px}@media(min-width:560px){.masonry{columns:2}}@media(min-width:900px){.masonry{columns:3}}
.masonry a{display:block;break-inside:avoid;margin-bottom:12px;overflow:hidden;background:#15151a;position:relative}
.masonry img{width:100%;height:auto;transition:transform .9s var(--ease)}
.masonry a::after{content:"+";position:absolute;right:12px;bottom:10px;width:38px;height:38px;border-radius:50%;background:rgba(7,7,10,.6);display:grid;place-items:center;font-size:22px}
@media(hover:hover){.masonry a:hover img{transform:scale(1.05)}}
.p-next{display:grid;grid-template-columns:1fr;gap:12px;padding:20px var(--pad) 40px}@media(min-width:700px){.p-next{grid-template-columns:1fr 1fr}}
.pn{position:relative;display:block;overflow:hidden;aspect-ratio:16/8;text-decoration:none;background:#15151a}.pn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .4s,transform 1s var(--ease)}.pn:hover img{opacity:.75;transform:scale(1.05)}
.pn span,.pn b{position:relative;z-index:2;display:block;padding-left:20px}.pn span{padding-top:20px;font-size:14px;color:var(--accent)}.pn b{font-family:var(--disp);font-weight:300;font-size:clamp(20px,2.4vw,30px);margin-top:6px;padding-right:20px}.pn.r{text-align:right}.pn.r span,.pn.r b{padding-left:20px;padding-right:20px}
.cta-band{padding:clamp(60px,9vw,130px) var(--pad);text-align:left}.cta-band h2{font-size:clamp(30px,6vw,92px);max-width:14ch;margin-bottom:26px}.cta-band p{display:flex;flex-wrap:wrap;gap:10px}
.miss ol{list-style:none;counter-reset:m;padding:0 var(--pad)}.miss{padding:30px 0 50px}.miss h2,.teamp h2{font-size:clamp(26px,4vw,52px);padding:0 var(--pad);margin-bottom:20px}
.miss li{padding:20px 0;border-top:1px solid var(--line);font-family:var(--disp);font-weight:300;font-size:clamp(22px,3.4vw,44px);letter-spacing:-.02em}
.teamp{padding:30px 0 70px}.teamp ul{list-style:none;padding:0 var(--pad);display:grid;gap:0}@media(min-width:700px){.teamp ul{grid-template-columns:1fr 1fr}}
.teamp li{padding:20px 0;border-top:1px solid var(--line)}.teamp b{display:block;font-size:20px;font-weight:600}.teamp span{opacity:.65}
.contact{display:grid;gap:36px;padding:10px var(--pad) 90px}@media(min-width:900px){.contact{grid-template-columns:1fr 1.2fr;gap:70px}}
.ci p{font-size:clamp(20px,2.4vw,30px);font-family:var(--disp);font-weight:300;padding:12px 0;border-top:1px solid var(--line)}.ci a{text-decoration:none;color:var(--accent)}
.form{display:grid;gap:16px}.form label{display:grid;gap:7px;font-size:14px;color:var(--mut)}
.form input,.form select,.form textarea{width:100%;background:var(--ink2);border:1.5px solid var(--line);color:var(--bone);padding:14px;border-radius:10px;font:17px var(--body);min-height:48px}.form select{color-scheme:dark}.form select option{background:var(--ink2);color:var(--bone)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)}.note{font-size:13px;color:var(--mut)}
/* pied de page */
.foot{position:relative;z-index:6;background:var(--ink2);padding:clamp(50px,7vw,100px) var(--pad) 28px;border-top:1px solid var(--line)}
.foot-in{display:grid;gap:34px;grid-template-columns:1fr}@media(min-width:760px){.foot-in{grid-template-columns:1.3fr 1fr 1fr 1.2fr}}
.foot h2{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--accent);margin-bottom:14px}.foot ul{list-style:none;display:grid;gap:9px;font-size:15px}.foot a{text-decoration:none;opacity:.85}.foot a:hover{opacity:1;color:var(--accent)}
.foot-brand p{margin-top:16px;color:var(--mut);font-size:14px;max-width:34ch}.legal{margin-top:40px;font-size:13px;color:var(--mut);border-top:1px solid var(--line);padding-top:18px}
.lb figcaption{font-family:var(--body)}

/* sans WebGL : la page d accueil reste lisible (liste des projets) */
.nogl #gl,.nogl #vig,.nogl .ui,.nogl #hint,.nogl #bar{display:none}.nogl #track{height:0}.nogl .home .seo{padding-top:120px}
#bgs{left:var(--pad);top:84px;display:flex;flex-wrap:wrap;gap:6px;font-size:12px;letter-spacing:.08em}
#bgs a{color:var(--bone);text-decoration:none;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(7,7,10,.5);backdrop-filter:blur(6px)}
#bgs a[aria-current]{border-color:var(--accent);color:var(--accent)}

@media(max-width:700px){#count{top:138px}}

.fxtog{position:fixed;right:var(--pad);bottom:max(22px,env(safe-area-inset-bottom));z-index:60;background:rgba(239,233,223,.08);color:var(--bone);border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;min-height:44px;font:600 14px var(--body);cursor:pointer;backdrop-filter:blur(6px)}
.fxtog[aria-pressed=false]{opacity:.55;text-decoration:line-through}
.fxtog:active{transform:scale(.97)}

/* accueil : le nom n'apparaît qu'une fois à l'ouverture (icône en haut, nom dans le héros ; le logo complet se révèle au défilement) */
body.p2 #intro{place-items:end center;padding-bottom:12vh}body.p2 .wm img{width:84vw}
body.p2 .tag{display:block;margin-top:14px;padding-left:.5em;font-size:12px;font-weight:600;letter-spacing:.5em;color:var(--accent);animation:in 1.2s .15s var(--ease) both}
body.p2 #intro p{margin-top:10px;font-size:15px;opacity:.7}
body.p2 .top{--lh0:64px;--lh1:36px}body.p2 .top .logo-img{clip-path:inset(0 calc((1 - var(--k,1))*67%) 0 0)}
body.home #bgs{top:auto;bottom:max(20px,env(safe-area-inset-bottom))}
@media(min-width:900px){body.p2 #intro{padding-bottom:11vh}body.p2 .wm img{width:min(56vw,760px)}body.p2 .tag{font-size:14px;margin-top:16px}body.p2 #intro p{margin-top:12px;font-size:17px}body.p2 .top{--lh0:84px;--lh1:44px}}
@media(max-width:700px){body.home #bgs{top:98px;bottom:auto}}