/* Ouverture : une porte s'ouvre sur la salle, le logo rejoint l'en-tête, la caméra pivote vers le site */
.seuil{--W:100vw;--H:100vh;--D:100vw;--Pr:60vw;--beton:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .29  0 0 0 0 .27  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer}
.seuil-face{position:absolute;left:0;top:0;width:var(--W);height:var(--H);overflow:hidden;backface-visibility:hidden}
.seuil-room{position:absolute;inset:0;perspective:var(--Pr);perspective-origin:50% 50%;background:#e9e7e2}
.seuil-box{position:absolute;inset:0;transform-style:preserve-3d}
.sw{position:absolute}
.sw-back{left:0;top:0;width:var(--W);height:var(--H);transform:translateZ(calc(var(--D) * -1));
  background:radial-gradient(ellipse 30% 45% at 50% 40%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),radial-gradient(ellipse 70% 90% at 50% 10%,#fbfaf7,#eceae5 75%,#e2dfd9)}
.sw-left{left:0;top:0;width:var(--D);height:var(--H);transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(90deg,#cfccc6,#e4e2dd 55%,#efede9)}
.sw-right{left:calc(var(--W) - var(--D));top:0;width:var(--D);height:var(--H);transform-origin:100% 50%;transform:rotateY(-90deg);background:linear-gradient(90deg,#efede9,#e4e2dd 45%,#cfccc6)}
.sw-floor{left:0;top:var(--H);width:var(--W);height:var(--D);transform-origin:50% 0;transform:rotateX(-90deg);
  background:radial-gradient(ellipse 30% 18% at 50% 96%,rgba(255,255,255,.4),rgba(255,255,255,0)),radial-gradient(ellipse 60% 30% at 50% 40%,rgba(255,255,255,.18),transparent),linear-gradient(90deg,transparent 10%,rgba(255,255,255,.13) 26%,transparent 42% 54%,rgba(255,255,255,.13) 70%,transparent 86%),var(--beton) 0 0/45% auto,linear-gradient(0deg,#c6c3bd,#b8b5af 60%,#aeaba5)}
.sw-ceil{left:0;bottom:var(--H);width:var(--W);height:var(--D);transform-origin:50% 100%;transform:rotateX(90deg);
  background:linear-gradient(90deg,rgba(60,58,54,.16) 1px,transparent 1px) 0 0/16.66% 100%,linear-gradient(0deg,rgba(60,58,54,.14) 1px,transparent 1px) 0 0/100% 9%,radial-gradient(ellipse 18% 6% at 30% 40%,rgba(90,88,84,.12),transparent),radial-gradient(ellipse 14% 9% at 72% 66%,rgba(90,88,84,.1),transparent),var(--beton) 0 0/34% auto,linear-gradient(0deg,#a8a6a1,#b8b6b1 60%,#afada8)}
.sw-back::after,.sw-left::after,.sw-right::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.2%;background:linear-gradient(#d8d5cf,#c9c6c0)}
/* Peints sur le plafond : en plans 3D distincts, Chrome découpe les murs contre eux et en perd des morceaux. */
.neon{position:absolute;top:calc(var(--D) * (.988 - var(--z)));width:calc(var(--W) * .17);height:calc(var(--D) * .012);background:linear-gradient(90deg,#8d8c88,#fbfbf7 6%,#fff 50%,#fbfbf7 94%,#8d8c88);box-shadow:0 0 calc(var(--H) * .02) rgba(250,250,240,.75)}
.band{position:absolute;left:0;right:0;top:0;height:9%;border-bottom:1px solid rgba(0,0,0,.08);
  background:repeating-linear-gradient(90deg,#4d4c48 0 2px,#8b8984 2px 6px) 10% 45%/7% 52% no-repeat,repeating-linear-gradient(90deg,#4d4c48 0 2px,#8b8984 2px 6px) 46% 45%/7% 52% no-repeat,repeating-linear-gradient(90deg,#4d4c48 0 2px,#8b8984 2px 6px) 82% 45%/7% 52% no-repeat,var(--beton) 0 0/30% auto,linear-gradient(#a3a19c,#b3b1ac)}
.sart{position:absolute;margin:0;box-shadow:0 18px 40px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.18)}
.sart img{display:block;width:100%;height:100%;object-fit:cover}
.sart-logo{height:calc(var(--H) * .3);aspect-ratio:301/381;left:50%;top:47%;transform:translate(-50%,-50%);border:calc(var(--H) * .006) solid #111;background:#efede8}
.sart-side{height:calc(var(--H) * .26);max-width:calc(var(--D) * .34);top:44%;transform:translateY(-50%)}
.sw-left .sart-side{right:15%}
.sw-right .sart-side{left:15%}
.seuil-cartel{position:absolute;margin:0;left:calc(50% + var(--H) * .15);top:calc(47% + var(--H) * .1);width:calc(var(--H) * .12);background:#fff;padding:calc(var(--H) * .008);box-shadow:0 1px 2px rgba(0,0,0,.12);font:600 calc(var(--H) * .0115)/1.25 var(--f-t);letter-spacing:.04em;color:#222}
.seuil-cartel span{display:block;font:400 calc(var(--H) * .01)/1.3 var(--f-s);color:#666;margin-top:.3em}
@media (orientation:portrait){.seuil-cartel{left:50%;top:calc(47% + var(--H) * .175);transform:translateX(-50%)}}
.door{position:absolute;top:0;width:calc(var(--W) / 2);height:var(--H);transform-style:preserve-3d}
.door i{position:absolute;inset:0;backface-visibility:hidden}
.door .ext{background:linear-gradient(90deg,#070707,#121212 50%,#0b0b0b)}
.door .ext::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e2e0db,#d6d3cd);opacity:var(--o,0)}
.door .int{transform:rotateY(180deg);background:linear-gradient(90deg,#e6e4df,#d9d6d0);box-shadow:inset 0 0 0 calc(var(--H) * .012) #dedbd5,inset 0 0 0 calc(var(--H) * .014) #cfccc5}
.door-l{left:0;transform-origin:0 50%}
.door-l .ext{box-shadow:inset -1px 0 0 rgba(255,255,255,.07)}
.door-r{left:50%;transform-origin:100% 50%}
.door-r .ext{box-shadow:inset 1px 0 0 rgba(255,255,255,.07)}
.seuil-dim{position:absolute;inset:0;background:#000;opacity:.55;pointer-events:none}
.seuil-seam{position:absolute;left:50%;top:0;width:2px;height:100%;margin-left:-1px;background:linear-gradient(transparent,rgba(255,252,240,.95) 12%,#fffdf5 50%,rgba(255,252,240,.95) 88%,transparent);transform:scaleY(0);box-shadow:0 0 18px 2px rgba(255,248,225,.5)}
.seuil-cap{position:absolute;margin:0;left:var(--pad);bottom:34px;font:500 12px var(--f-t);letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.6}
/* Couche propre : sans elle, Chrome peint le logo sous la salle pendant le pivot. */
.seuil-fly{position:fixed;z-index:101;display:none;pointer-events:none;will-change:transform}
.seuil-on .bar-logo img{visibility:hidden}
.rm .seuil,html:not(.js) .seuil,.ready .seuil,.seen .seuil{display:none}

/* Héros */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;gap:28px;padding:96px var(--pad) 80px}
.hero-title{font:650 clamp(72px,13vw,230px)/.82 var(--f-t);white-space:nowrap;--w:70;font-variation-settings:"wdth" var(--w);text-transform:uppercase;letter-spacing:-.01em;margin:14px 0 14px}
.hero-title a{text-decoration:none}
.hero-txt{min-width:0}
.hero-title--long{white-space:normal;text-wrap:balance;font-size:clamp(52px,6.2vw,120px);line-height:.86}
.hero-artist{font:400 clamp(24px,2.6vw,38px)/1.2 var(--f-s)}
.hero-dates{font:500 15px/1.6 var(--f-t);margin-top:20px}
.hero-dates span{opacity:.65}
.hero-media{position:relative;justify-self:center;width:min(78vw,calc(66svh * var(--r,.8)));background:#EDEDED}
.hero-img,.hero-gl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.has-gl .hero-img{visibility:hidden}
.hero-cap{position:absolute;left:0;right:0;top:calc(100% + 10px);font:500 11px/1.4 var(--f-t);letter-spacing:.04em;opacity:.65}
.scroll-cue{position:absolute;left:0;right:0;bottom:22px;width:52px;margin:auto;color:inherit}
.seuil-replay{position:absolute;left:var(--pad);bottom:34px;display:flex;align-items:center;gap:8px;padding:6px 0;border:0;background:none;color:inherit;font:500 11px var(--f-t);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;opacity:.6;transition:opacity .3s}
.seuil-replay:hover,.seuil-replay:focus-visible{opacity:1}
.seuil-replay svg{transition:transform .6s var(--ease)}
.seuil-replay:hover svg{transform:rotate(-180deg)}
.is-past .seuil-replay{opacity:0;pointer-events:none}
.rm .seuil-replay,html:not(.js) .seuil-replay{display:none}
.scroll-cue span{display:grid;place-items:center;width:52px;height:52px;border:1px solid currentColor;border-radius:50%;transition:opacity .4s,transform .4s var(--ease)}
.scroll-cue svg{animation:cue-bob 1.8s var(--ease) infinite}
.scroll-cue:hover span{transform:scale(1.08)}
.is-past .scroll-cue{pointer-events:none}
.is-past .scroll-cue span{opacity:0;transform:translateY(12px)}
@keyframes cue-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
.rm .scroll-cue svg{animation:none}
#suite{scroll-margin-top:-90px}
@media (max-width:979px){.hero{padding-bottom:116px}}
@media (min-width:980px){.hero{grid-template-columns:1.25fr 1fr;align-items:center;padding-top:110px}.hero-media{justify-self:end;width:min(34vw,calc(68svh * var(--r,.8)))}}
@media (max-width:700px){.hero-title{white-space:normal;font-size:clamp(56px,17vw,96px)}}

/* Entrer dans l'œuvre */
.zoom-pin{position:relative;height:100svh;overflow:hidden;display:grid;place-items:center}
.zoom-frame{display:block;width:min(46vw,calc(52svh * .705));box-shadow:0 30px 60px rgba(0,0,0,.25);overflow:hidden}
.zoom-frame img{width:100%;height:100%;object-fit:cover}
.zoom--artiste .zoom-frame{transform-origin:50% 28%}
.zoom-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:min(62vw,calc(54svh * var(--cols) / var(--rows) * .8));box-shadow:none}
.zoom-cell{display:block;text-decoration:none;flex:0 0 calc((100% - (var(--cols) - 1) * 6px) / var(--cols));aspect-ratio:4/5;overflow:hidden;background:#2B2B2B}
.zoom-cell img{width:100%;height:100%;object-fit:cover;transition:filter .5s var(--ease)}
.zoom-cell-nom{transition:opacity .5s var(--ease)}
.zoom-grid.is-focus .zoom-cell:not(.is-on) img{filter:brightness(.28) grayscale(.4)}
.zoom-grid.is-focus .zoom-cell:not(.is-on) .zoom-cell-nom{opacity:.25}
.zoom-names a{transition:opacity .4s,background-size .4s var(--ease)}
.zoom-names.is-focus a:not(.is-on){opacity:.4}
.zoom-names a.is-on{background-size:100% 2px}
.zoom-cell-nom{display:grid;place-items:center;height:100%;padding:10%;text-align:center;font:650 clamp(14px,1.4vw,22px)/1 var(--f-t);font-variation-settings:"wdth" 62;text-transform:uppercase;color:#CFCFCF}
.zoom-names{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:12px;max-width:min(1200px,84vw)}
.zoom-names a{font:650 clamp(26px,3.4vw,60px)/.95 var(--f-t);font-variation-settings:"wdth" 62;text-transform:uppercase;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease)}
.zoom-names a:hover,.zoom-names a:focus-visible{background-size:100% 2px}
.zoom-names li:not(:last-child) a::after{content:","}
.zoom--groupe .zoom-over::before{content:"";position:absolute;z-index:-1;inset:-30svh calc(-1 * var(--pad)) -72px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6))}
@media (max-width:700px){.zoom-grid{width:min(78vw,calc(60svh * 2 / var(--rows-m) * .8))}.zoom-cell{flex-basis:calc((100% - 6px) / 2)}.zoom--groupe .zoom-cartel-noms{display:none}}
.zoom-cartel{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);font:500 13px/1.6 var(--f-t)}
.zoom-cartel span span,.zoom-cartel .kicker{opacity:.6}
.zoom-over{position:absolute;inset:auto var(--pad) 72px var(--pad);color:#fff;opacity:0;visibility:hidden;text-shadow:0 1px 30px rgba(0,0,0,.35)}
.zoom-big{font:650 clamp(40px,7.5vw,130px)/.92 var(--f-t);font-variation-settings:"wdth" 62;text-transform:uppercase;margin-top:12px;max-width:16ch}
.zoom-link{display:inline-flex;gap:10px;align-items:center;margin-top:26px;padding:14px 24px;border:1px solid currentColor;border-radius:999px;text-decoration:none;font:600 13px var(--f-t);letter-spacing:.14em;text-transform:uppercase;text-shadow:none;transition:background .3s,color .3s}
.zoom-link:hover,.zoom-link:focus-visible{background:#fff;color:#111}
.zoom-link span{transition:transform .3s}
.zoom-link:hover span{transform:translateX(4px)}
@media (max-width:700px){.zoom-cartel{top:90px;transform:none}}
.rm .zoom-pin,html:not(.js) .zoom-pin{height:auto;display:block;padding:14vh 0}
.rm .zoom-over,html:not(.js) .zoom-over{position:static;opacity:1;visibility:visible;color:inherit;text-shadow:none;padding:30px var(--pad) 0}
.rm .zoom-cartel,html:not(.js) .zoom-cartel{position:static;transform:none;padding:0 var(--pad) 30px}
.rm .zoom-frame,html:not(.js) .zoom-frame{margin:0 auto}

/* La galerie */
.pres{padding:18vh var(--pad) 20vh;display:grid;gap:56px}
.pres-media{position:relative;margin-bottom:8%}
.pres-main{aspect-ratio:4/3;overflow:hidden}
.pres-main img,.pres-sub img{width:100%;height:100%;object-fit:cover}
.pres-sub{position:absolute;right:-5%;bottom:-12%;width:38%;aspect-ratio:4/3;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.18)}
.pres-cap{font:500 11px/1.4 var(--f-t);letter-spacing:.04em;opacity:.65;margin-top:12px;max-width:52%}
.pres-lede{font:400 clamp(30px,3.2vw,52px)/1.12 var(--f-s);letter-spacing:-.015em;max-width:20ch;margin:22px 0 28px}
.pres-body{font:400 19px/1.6 var(--f-s);max-width:40ch;opacity:.85;margin-bottom:36px}
@media (min-width:980px){.pres{grid-template-columns:1.15fr 1fr;gap:8vw;align-items:center}.pres--seule{grid-template-columns:1fr}.pres--seule .pres-txt{margin-left:16vw}}
@media (max-width:979px){.pres-sub{right:0}}

/* Artistes */
.art{position:relative;padding:18vh 0 20vh;overflow:hidden}
.art-k{padding:0 var(--pad);margin-bottom:5vh}
.mq{overflow:hidden}
.mq-row{display:flex;width:max-content;white-space:nowrap;font:650 clamp(54px,10vw,170px)/1.04 var(--f-t);font-variation-settings:"wdth" 62;text-transform:uppercase}
.mq-in{flex:0 0 auto;padding-right:.3em;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.4px currentColor}
.mq-in a{text-decoration:none;transition:-webkit-text-fill-color .3s}
.mq-in a:hover,.mq-in a:focus-visible{-webkit-text-fill-color:currentColor}
.art .mq-row{color:#F5F5F2}
.rm .mq-row,html:not(.js) .mq-row{flex-wrap:wrap;white-space:normal;width:auto;padding:0 var(--pad)}
.rm .mq-in,html:not(.js) .mq-in{flex:1 1 auto}