:root {
  --u: 9px;
  --sol-y: 82vh;
  --ui: #f5f2ec;
  --anthracite: #433d3c;
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  --soie: cubic-bezier(.22, .61, .2, 1);
  --sol: #181512;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--anthracite); scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
html.regard-ouvert { overflow: hidden; }
body { font-family: var(--sans); font-weight: 300; color: var(--ui); overflow-x: clip; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.sprite { position: absolute; }
html.a-souris, html.a-souris * { cursor: none !important; }
html.a-souris { -webkit-user-select: none; user-select: none; }
html.a-souris .sortie__bloc { -webkit-user-select: text; user-select: text; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ---------- La scène : tout est posé en position fixe, le défilement pilote la caméra ---------- */
.motion #stage { position: fixed; left: 0; right: 0; top: 0; height: 100lvh; overflow: hidden; background: var(--mur-actif, var(--anthracite)); }
.motion #salles { position: absolute; inset: 0; }
#defilement { width: 1px; pointer-events: none; }

.salle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; display: none; will-change: transform; color: var(--encre); }
.salle.is-on { display: block; }
.salle.is-prete { display: block; opacity: .001; pointer-events: none; }
.salle.is-on.is-prete { opacity: 1; }

/* la matière du mur avance avec nous ; l'ombre du plafond et la lumière restent attachées à la scène */
.salle__matiere {
  position: absolute; left: -120vw; top: -40vh; height: calc(var(--sol-y) + 40vh); will-change: transform;
  background-color: var(--mur); background-image: var(--matiere, none); background-size: var(--mat-l, 100px) var(--mat-h, 100px);
}
.salle__mur {
  position: absolute; left: -60vw; right: -60vw; top: -40vh; height: calc(var(--sol-y) + 40vh); pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .36) 0, rgba(0, 0, 0, .2) 34%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, .14) 100%);
}
/* la salle des Monuments : un bâtiment industriel. Très grands pans, poutre en béton, sol lissé */
.salle--hall, .salle--monuments, .salle--sortie { --sol: #262522; --reflet: .24; }
.salle--monuments { --poutre: max(calc(var(--u) * 5.6), 58px); }
.salle--monuments .salle__mur::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(40vh + var(--poutre));
  background: var(--grain), linear-gradient(180deg, #8e8c86 0, #a3a19b calc(100% - var(--u) * 1), #6f6d68 100%);
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(0, 0, 0, .34);
}
/* la pénombre de la salle, percée d'un puits de lumière qui suit la souris.
   Un petit dégradé agrandi par la carte graphique : aucun calcul pendant le mouvement. */
.nuit {
  position: absolute; left: 0; top: 0; width: 512px; height: 512px; margin: -256px 0 0 -256px; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(10, 8, 6, 0) 0, rgba(10, 8, 6, .04) 7%, rgba(10, 8, 6, .3) 13%, rgba(10, 8, 6, .7) 21%, rgba(10, 8, 6, .94) 30%, rgba(10, 8, 6, 1) 40%);
}
.salle__sol {
  position: absolute; left: -60vw; right: -60vw; top: var(--sol-y); height: calc(100vh - var(--sol-y) + 60vh); overflow: hidden;
  background: var(--grain), linear-gradient(180deg, color-mix(in srgb, var(--mur) 30%, var(--sol)) 0, var(--sol) calc((100lvh - var(--sol-y)) * .9));
}
/* le joint creux entre le mur et le sol */
.salle__sol::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: max(2px, calc(var(--u) * .2)); background: rgba(0, 0, 0, .6); z-index: 2; }
.salle__sol::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100lvh - var(--sol-y)); background: linear-gradient(180deg, rgba(24, 21, 18, 0) 0, rgba(24, 21, 18, .55) 38%, var(--sol) 88%); pointer-events: none; }
.sol__piste { position: absolute; left: 60vw; top: 0; will-change: transform; }
.piste { position: absolute; left: 0; top: 0; will-change: transform; }

/* ---------- Le reflet sur le sol ciré ---------- */
.reflet { position: absolute; transform: scaleY(-1); background: var(--passe, #efeadf); opacity: var(--reflet, .17); filter: blur(calc(var(--u) * .7)); overflow: hidden; }
.reflet img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.reflet--porte { background-size: cover; background-position: center; opacity: .5; }

/* ---------- L'œuvre : la lumière sur le mur, l'ombre portée, le cadre, le verre ---------- */
.piece { position: absolute; }
.pool {
  position: absolute; left: 50%; top: 50%; width: 178%; height: 158%; transform: translate(-50%, -57%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 238, 212, var(--pool, .24)), rgba(255, 238, 212, 0));
}
.frame {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 calc(var(--u) * 1.1) calc(var(--u) * 2.8) calc(var(--u) * .3) rgba(0, 0, 0, var(--ombre, .34));
  border-style: solid; border-width: var(--baguette);
  border-color:
    color-mix(in srgb, var(--cadre) 78%, #fff)
    color-mix(in srgb, var(--cadre) 92%, #000)
    color-mix(in srgb, var(--cadre) 62%, #000);
}
.frame:focus-visible { outline: 1px solid var(--encre); outline-offset: calc(var(--u) * .7); }
.mat { position: absolute; inset: 0; display: block; background: var(--passe, #f1ecdf); }
.win {
  position: absolute; inset: var(--marge); display: block; overflow: hidden; background: #d9d4c8;
  box-shadow: 0 0 0 1.5px #fbf9f4, 0 0 0 2.5px rgba(0, 0, 0, .15);
}
.win img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s linear; }
.win img.is-pret { opacity: 1; }
.win::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3), inset 0 0 1px rgba(0, 0, 0, .3); pointer-events: none; }

/* La lampe de tableau, et sa lumière qui descend sur le tirage : elle réveille les détails sans voiler les noirs */
.lampe {
  position: absolute; left: 50%; bottom: calc(100% + var(--u) * .62); width: min(36%, calc(var(--u) * 26)); height: max(5px, calc(var(--u) * .7)); transform: translateX(-50%); pointer-events: none;
  border-radius: 99px; background: linear-gradient(180deg, #5a5245 0, #2d2822 46%, #151310 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.lampe::before { content: ""; position: absolute; left: 50%; top: 100%; width: max(2px, calc(var(--u) * .22)); height: calc(var(--u) * .66); transform: translateX(-50%); background: #2d2822; }
.lampe::after { content: ""; position: absolute; left: -16%; right: -16%; top: 60%; height: calc(var(--u) * 2.4); background: radial-gradient(closest-side, rgba(255, 240, 214, .72), rgba(255, 240, 214, 0)); }
.eclairage {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(95% 82% at 50% 0, rgba(255, 247, 232, .16) 0, rgba(255, 247, 232, .05) 46%, rgba(255, 247, 232, 0) 82%);
}

/* ---------- Le cartel ---------- */
.cartel {
  position: absolute; left: calc(100% + var(--u) * 2.4); bottom: 0; width: var(--cartel-l);
  padding: calc(var(--u) * .95) calc(var(--u) * 1.1);
  background: #f5f2eb; color: #2a2622; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  font-size: clamp(10.5px, calc(var(--u) * 1.22), 13px); line-height: 1.32;
}
.cartel span { display: block; font-size: .8em; letter-spacing: .16em; opacity: .55; margin-bottom: .45em; }
.cartel b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.32em; line-height: 1.1; }
.cartel small { display: block; font-size: 1em; margin-top: .4em; opacity: .85; }
.cartel em { display: block; font-style: normal; opacity: .62; margin-top: .15em; }
.est-etroit .cartel { left: 0; bottom: auto; top: calc(100% + var(--u) * 2.2); }

/* ---------- Le titre de la salle, en lettres posées sur le mur ---------- */
.lettrage { position: absolute; color: var(--encre); white-space: nowrap; }
.lettrage small { display: block; font-size: clamp(11px, calc(var(--u) * 1.3), 14px); letter-spacing: .34em; text-transform: uppercase; font-weight: 400; opacity: .9; }
.lettrage h1, .lettrage h2 { font-family: var(--serif); font-weight: 300; font-size: max(40px, calc(var(--u) * 8.6)); line-height: 1; margin: .2em 0 .24em -.03em; }
.lettrage p { font-size: clamp(12px, calc(var(--u) * 1.45), 15px); font-weight: 400; line-height: 1.55; opacity: .9; white-space: normal; max-width: max(190px, calc(var(--u) * 26)); }
.est-etroit .lettrage { width: calc(100vw - 48px); }
.est-etroit .lettrage p { max-width: none; }
.est-etroit .banc { display: none; }

/* ---------- La porte vers la salle suivante ---------- */
.porte { position: absolute; }
.porte svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.porte__g { fill: color-mix(in srgb, var(--mur) 58%, #000); }
.porte__d { fill: color-mix(in srgb, var(--mur) 72%, #000); }
.porte__h { fill: color-mix(in srgb, var(--mur) 42%, #000); }
.porte__b { fill: color-mix(in srgb, var(--mur) 18%, var(--sol)); }
.porte__entrer { position: absolute; inset: 0; width: 100%; height: 100%; }
.porte__titre { position: absolute; right: calc(100% + var(--u) * 3); top: 32%; width: max(150px, calc(var(--u) * 20)); text-align: right; color: var(--encre); }
.porte__titre small { display: block; font-size: clamp(10.5px, calc(var(--u) * 1.2), 13px); letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.porte__titre span { display: block; font-family: var(--serif); font-weight: 300; font-size: max(26px, calc(var(--u) * 3.6)); line-height: 1.1; margin-top: .22em; }
.est-etroit .porte__titre { right: auto; left: 50%; top: auto; bottom: calc(100% + var(--u) * 3); transform: translateX(-50%); width: 80vw; text-align: center; }

/* ---------- Le banc, au premier plan ---------- */
.banc { position: absolute; left: 0; top: calc(var(--sol-y) - var(--u) * 5.86); width: calc(var(--u) * 43.35); aspect-ratio: 1.5 / .605; will-change: transform; pointer-events: none; }
.banc canvas { display: block; width: 100%; height: 100%; }

/* ---------- Le hall et la sortie ---------- */
/* le monogramme : de fines tiges posées sur le mur, qui se tracent à l'arrivée */
.logo { position: relative; aspect-ratio: 410 / 433; margin: 0 auto; }
.logo svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.logo__plein { stroke: var(--encre); }
.logo__ombre { stroke: #16120d; opacity: .36; filter: blur(calc(var(--u) * .3)); will-change: transform; }
/* le reflet qui parcourt les traits, une fois le logo tracé */
.motion .logo__reflet { animation: ombreVient 1s linear 3.3s backwards; }
.calme .logo__reflet { display: none; }
.motion .logo__plein path { stroke-dasharray: 1; animation: tracer 2.3s var(--soie) backwards; }
.motion .logo__plein path:nth-child(1) { animation-delay: .5s; }
.motion .logo__plein path:nth-child(2) { animation-delay: .85s; }
.motion .logo__plein path:nth-child(3) { animation-delay: 1.2s; }
.motion .logo__plein path:nth-child(4) { animation-delay: 1.55s; }
.motion .logo__ombre { animation: ombreVient 1.8s linear 2.2s backwards; }
@keyframes tracer { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ombreVient { from { opacity: 0; } }
.hall__bloc { position: absolute; transform: translateX(-50%); text-align: center; color: var(--encre); }
.hall__nom { font-weight: inherit; margin-top: calc(var(--u) * 3.6); font-size: clamp(19px, calc(var(--u) * 3.2), 36px); letter-spacing: .24em; padding-left: .24em; white-space: nowrap; }
.hall__nom span { display: inline-block; }
.motion .hall__nom span { animation: lettre 1.3s var(--soie) backwards; animation-delay: calc(1.5s + var(--i) * 85ms); }
@keyframes lettre { from { opacity: 0; transform: translateY(.6em); filter: blur(5px); } }
.motion .hall__themes { animation: apparait 1.6s linear 3s backwards; }
@keyframes apparait { from { opacity: 0; } }
.hall__themes { margin-top: calc(var(--u) * 1.5); font-size: clamp(10.5px, calc(var(--u) * 1.15), 12.5px); letter-spacing: .24em; text-transform: uppercase; opacity: .82; white-space: nowrap; }
.est-etroit .hall__nom { margin-top: 14px; font-size: 17px; letter-spacing: .16em; padding-left: .16em; }
.hall__themes a { padding: 1em .15em; transition: opacity .3s linear; }
.hall__themes a:hover { text-decoration: underline; text-underline-offset: .45em; }
.est-etroit .hall__themes { letter-spacing: .12em; font-size: 10px; margin-top: 8px; }
/* l'invitation à entrer : un fil qui file vers la porte */
.hall__indice { position: absolute; transform: translateX(-100%); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1.2); color: var(--encre); font-size: clamp(10px, calc(var(--u) * 1.1), 12px); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.est-etroit .hall__indice { display: none; }
.hall__indice span { opacity: .85; }
.hall__indice i { display: block; width: calc(var(--u) * 9); height: 1px; background: currentColor; opacity: .6; transform-origin: 0 50%; animation: fil 3.4s var(--soie) infinite; }
@keyframes fil { 0% { transform: scaleX(0); transform-origin: 0 50%; } 55% { transform: scaleX(1); transform-origin: 0 50%; } 56% { transform-origin: 100% 50%; } 100% { transform: scaleX(0); transform-origin: 100% 50%; } }

.sortie__bloc { position: absolute; left: 50%; top: calc(var(--sol-y) * .5); transform: translate(-50%, -50%); width: min(90vw, calc(var(--u) * 80)); text-align: center; color: var(--encre); opacity: 0; }
.sortie__bloc .logo { width: max(84px, calc(var(--u) * 15)); margin: 0 auto calc(var(--u) * 3.6); }
.sortie__bloc h1, .sortie__bloc h2 { font-family: var(--serif); font-weight: 300; font-size: max(34px, calc(var(--u) * 6)); line-height: 1.05; }
.sortie__bloc p { margin-top: .7em; font-size: clamp(14px, calc(var(--u) * 1.8), 18px); opacity: .75; }
.sortie__mail { display: inline-block; margin-top: 1.1em; font-family: var(--serif); font-size: max(22px, calc(var(--u) * 3.1)); border-bottom: 1px solid currentColor; padding-bottom: .08em; }
.sortie__liens { list-style: none; padding: 0; margin-top: 1.6em; font-size: clamp(11px, calc(var(--u) * 1.25), 13px); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }

/* ---------- Le passage de la porte : la photo de la salle suivante ---------- */
#portail { position: absolute; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
#portailCadre { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0; will-change: transform; }
#portailImg { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; }
#portailVoile { position: absolute; inset: 0; background: #0b0a09; opacity: 0; }
#titre { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #f6f0e6; pointer-events: none; opacity: 0; }
#titre small { display: block; font-size: clamp(11px, 1.7vmin, 15px); letter-spacing: .4em; text-transform: uppercase; }
#titre strong { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(54px, 15vmin, 170px); line-height: 1; margin-top: .14em; }

#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(112% 104% at 50% 42%, rgba(12, 9, 6, 0) 44%, rgba(12, 9, 6, var(--vig, .3)) 100%); }
.salle__relief { position: absolute; display: block; pointer-events: none; }
/* pendant le passage d'une porte, on ne garde que le mur et la photo clef */
.piece, .lettrage, .porte__titre, .hall__bloc, .hall__indice, .banc { transition: opacity .45s linear; }
.de-pres .piece:not(.piece--clef), .de-pres .cartel, .de-pres .lampe, .de-pres .lettrage, .de-pres .porte__titre, .de-pres .hall__bloc, .de-pres .hall__indice, .de-pres .banc { opacity: 0; }
/* et un halo chaud au cœur du faisceau, sur le mur seulement */
.salle__eclat {
  position: absolute; left: 0; top: 0; width: 512px; height: 512px; margin: -256px 0 0 -256px; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(255, 238, 212, 1) 0, rgba(255, 238, 212, .56) 24%, rgba(255, 238, 212, .18) 55%, rgba(255, 238, 212, 0) 100%);
}

/* ---------- En-tête, plan de la galerie ---------- */
#haut { position: fixed; left: 0; right: 0; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: max(16px, 2.4vmin) clamp(18px, 3vw, 40px); pointer-events: none; color: var(--ui); transition: color .9s linear; }
#haut a { pointer-events: auto; }
.haut__logo { display: block; position: relative; width: clamp(26px, 3.5vmin, 36px); aspect-ratio: 410 / 433; opacity: 0; transition: opacity .9s linear; }
.haut__logo svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.haut__logo::after { content: ""; position: absolute; inset: -12px; }
.est-dedans .haut__logo { opacity: 1; }
#lienContact { font-size: clamp(12px, 1.7vmin, 15px); letter-spacing: .26em; text-transform: uppercase; padding: 14px 16px; margin: -14px -16px; }

/* le plan et la mention sont posés sur le sol, toujours sombre */
#plan { position: fixed; left: clamp(18px, 3vw, 40px); bottom: clamp(16px, 3vmin, 30px); z-index: 20; color: #e9e2d5; }
#planNom { font-size: clamp(10.5px, 1.45vmin, 13px); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 9px; white-space: nowrap; }
#planSalles { position: relative; display: flex; gap: 3px; height: 16px; }
.plan__salle { display: block; font-size: 0; height: 100%; border: 1px solid currentColor; opacity: .42; transition: opacity .5s linear; position: relative; }
.plan__salle::after { content: ""; position: absolute; inset: -9px -1px; }
.plan__salle:hover, .plan__salle.is-la { opacity: 1; }
#planPoint { position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: currentColor; pointer-events: none; will-change: transform; }
#pied { position: fixed; right: clamp(18px, 3vw, 40px); bottom: clamp(16px, 3vmin, 30px); z-index: 20; display: flex; align-items: center; gap: 30px; color: #e9e2d5; }
#lienMentions { padding: 12px; margin: -12px; opacity: .62; font-size: clamp(10px, 1.25vmin, 12px); letter-spacing: .14em; transition: opacity .3s linear; }
#boutonSon { display: none; padding: 12px; margin: -12px; opacity: .62; transition: opacity .3s linear; }
#boutonLumiere { display: flex; align-items: center; gap: 8px; padding: 12px; margin: -12px; opacity: .62; font-size: clamp(10px, 1.25vmin, 12px); letter-spacing: .14em; white-space: nowrap; transition: opacity .3s linear; }
#boutonLumiere svg { display: block; width: 12px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#boutonLumiere:hover, #boutonLumiere:focus-visible { opacity: 1; }
#boutonLumiere[aria-pressed="true"] svg path { fill: currentColor; fill-opacity: .25; }
.est-etroit #boutonLumiere span { display: none; }
.est-etroit #pied { gap: 26px; }
#planTout { display: none; margin-left: 14px; padding: 8px 10px; margin-block: -8px; opacity: .62; font-size: clamp(10px, 1.25vmin, 12px); letter-spacing: .14em; white-space: nowrap; transition: opacity .3s linear; }
.est-dedans #planTout { display: block; }
#planTout:hover, #planTout:focus-visible { opacity: 1; }
.a-souris #boutonSon { display: block; }
#lienMentions:hover, #boutonSon:hover, #boutonSon:focus-visible { opacity: 1; }
#boutonSon svg { display: block; width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
#boutonSon .barre, #boutonSon[aria-pressed="true"] .ondes { display: none; }
#boutonSon[aria-pressed="true"] .barre { display: inline; }

#rideau { position: fixed; inset: 0; z-index: 25; background: var(--anthracite); pointer-events: none; opacity: 0; transition: opacity .45s linear; }
#rideau.is-ferme { opacity: 1; }
#rideau.is-intro { opacity: 1; transition: opacity 1.8s linear; }

/* ---------- Regarder de près ---------- */
#regard { position: fixed; inset: 0; z-index: 30; display: none; color: #f3ede2; }
#regard.is-ouvert { display: block; }
#regardFond { position: absolute; inset: 0; background: color-mix(in srgb, var(--mur-actif, #222) 22%, #0c0b0a); opacity: 0; transition: opacity .9s var(--soie); }
#regard.is-visible #regardFond { opacity: 1; }
#regardImg { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; box-shadow: 0 1.4vmin 7vmin rgba(0, 0, 0, .34); }
#regardTexte, .regard__btn { opacity: 0; transition: opacity .7s linear; }
#regard.is-visible #regardTexte, #regard.is-visible .regard__btn { opacity: 1; transition-delay: .35s; }
#regardTexte { position: absolute; left: 50%; bottom: max(18px, 3.4vmin); transform: translateX(-50%); width: min(62vw, 720px); text-align: center; font-size: clamp(11px, 1.5vmin, 13px); line-height: 1.4; }
#regardTexte b { font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 2.8vmin, 26px); display: block; }
#regardTexte span { letter-spacing: .2em; opacity: .62; }
.regard__btn { position: absolute; font-size: clamp(10.5px, 1.45vmin, 13px); letter-spacing: .24em; text-transform: uppercase; padding: 12px; }
#regardFermer { right: clamp(8px, 2.4vw, 30px); top: max(8px, 1.6vmin); }
#regardPrec { left: clamp(8px, 2.4vw, 30px); bottom: max(12px, 3vmin); }
#regardSuiv { right: clamp(8px, 2.4vw, 30px); bottom: max(12px, 3vmin); }

/* ---------- Le curseur : le collimateur d'un Nikon Z, blanc au repos, vert quand la mise au point est faite ---------- */
#curseur { position: fixed; left: 0; top: 0; z-index: 40; width: 0; height: 0; pointer-events: none; color: var(--ui); opacity: 0; transition: opacity .6s linear, color .12s linear; will-change: transform; }
.a-souris #curseur.est-la { opacity: 1; }
.visee { position: absolute; left: 0; top: 0; width: 0; height: 0; --l: 23px; --h: 16px; filter: drop-shadow(0 0 .7px rgba(14, 11, 9, .95)); }
.visee b { position: absolute; left: 0; top: 0; width: 9px; height: 7px; border: 0 solid currentColor; transition: transform .5s var(--soie); }
.visee b:nth-child(1) { border-width: 1.5px 0 0 1.5px; transform: translate(calc(var(--l) * -1), calc(var(--h) * -1)); }
.visee b:nth-child(2) { border-width: 1.5px 1.5px 0 0; transform: translate(calc(var(--l) - 9px), calc(var(--h) * -1)); }
.visee b:nth-child(3) { border-width: 0 0 1.5px 1.5px; transform: translate(calc(var(--l) * -1), calc(var(--h) - 7px)); }
.visee b:nth-child(4) { border-width: 0 1.5px 1.5px 0; transform: translate(calc(var(--l) - 9px), calc(var(--h) - 7px)); }
.visee i { position: absolute; left: -5px; top: -3.5px; width: 10px; height: 7px; border: 1px solid currentColor; transition: opacity .3s linear; }
#curseur span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 0 1px rgba(14, 11, 9, .9), 0 0 5px rgba(14, 11, 9, .8); opacity: 0; transition: opacity .5s linear; white-space: nowrap; }
#curseur.au-sol, #regard.is-ouvert ~ #curseur:not(.est-presse) { color: #fff; }
#curseur[data-mode="cadre"], #curseur[data-mode="porte"], #curseur.est-presse { color: #63e05b; }
#curseur[data-mode="cadre"] .visee, #curseur[data-mode="porte"] .visee { --l: 62px; --h: 42px; }
#curseur[data-mode="cadre"] .visee i, #curseur[data-mode="porte"] .visee i, #curseur[data-mode="lien"] .visee i { opacity: 0; }
#curseur[data-mode="cadre"] span, #curseur[data-mode="porte"] span { opacity: 1; }
#curseur[data-mode="lien"] .visee { --l: 16px; --h: 11px; }
#curseur.en-rafale .visee { animation: tirRafale .1s linear infinite; }
@keyframes tirRafale { from { transform: scale(.88); } }

@media (max-width: 720px) {
  #plan { bottom: auto; left: auto; right: 18px; top: 18px; text-align: right; color: var(--ui); transition: color .9s linear; }
  #planNom { margin-bottom: 6px; font-size: 10px; letter-spacing: .14em; }
  #planSalles { height: 9px; justify-content: flex-end; }
  #lienContact { display: none; }
  .regard__btn { padding: 10px; }
  #regardTexte { width: 56vw; }
}

/* ---------- Sans animation : la même exposition, en simple défilement ---------- */
.calme .nuit, .calme .lampe, .calme .eclairage, .calme #portail, .calme #vignette, .calme #titre, .calme #defilement, .calme #plan, .calme #curseur, .calme #rideau,
.calme .salle__matiere, .calme .salle__eclat, .calme .salle__mur, .calme .salle__sol, .calme .porte, .calme .banc, .calme .pool, .calme .hall__indice { display: none; }
.calme .salle { display: block; position: static; width: auto; height: auto; padding: 80px clamp(18px, 6vw, 90px); background: var(--mur); will-change: auto; }
.calme .piste { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 56px 40px; align-items: end; will-change: auto; }
.calme .lettrage, .calme .hall__bloc { position: static; grid-column: 1 / -1; white-space: normal; }
.calme .hall__bloc .logo { width: min(70vw, 380px); margin: 0 auto; }
.calme .piece { position: relative; }
.calme .frame { position: relative; height: auto; --baguette: 4px; }
.calme .mat { position: static; padding: 6%; }
.calme .win { position: relative; inset: auto; aspect-ratio: var(--r); }
.calme .win img { opacity: 1; }
.calme .cartel { position: static; width: auto; margin-top: 14px; --cartel-l: auto; }
/* ---------- La vue d'ensemble d'une salle ---------- */
#ensemble { position: fixed; inset: 0; z-index: 28; display: none; overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, 3vw, 40px); background: #0f0e0d; color: #e9e2d5; opacity: 0; transition: opacity .5s linear; }
#ensemble.is-ouvert { display: block; }
#ensemble.is-visible { opacity: 1; }
.ensemble__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: clamp(18px, 3vmin, 30px); }
#ensembleTitre { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 3.4vmin, 34px); line-height: 1.15; }
#ensembleFermer { padding: 12px; margin: -12px; font-size: clamp(10.5px, 1.45vmin, 13px); letter-spacing: .24em; text-transform: uppercase; }
#ensembleGrille { display: flex; flex-wrap: wrap; gap: clamp(5px, .9vmin, 9px); }
#ensembleGrille::after { content: ""; flex: 999 1 0; }
.vignette { --h: clamp(120px, 25vh, 270px); position: relative; display: block; flex: var(--r) 1 calc(var(--r) * var(--h)); aspect-ratio: var(--r); overflow: hidden; background: #1a1816; }
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--soie); }
.vignette span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; text-align: left; font-family: var(--serif); font-size: clamp(15px, 2vmin, 19px); color: #fff; background: linear-gradient(180deg, rgba(10, 8, 6, 0), rgba(10, 8, 6, .62)); opacity: 0; transition: opacity .35s linear; }
.vignette:hover img, .vignette:focus-visible img { transform: scale(1.035); }
.vignette:hover span, .vignette:focus-visible span { opacity: 1; }
#ensemble.is-visible .vignette { animation: apparait .7s linear calc(var(--i) * 45ms) backwards; }

/* ---------- La lumière éteinte : le mur disparaît, les photos restent dans leur passe-partout blanc ---------- */
.salle__eteint { position: absolute; inset: -100vh -100vw; background: #0a0908; opacity: 0; transition: opacity 1.2s linear; pointer-events: none; }
.sol__eteint { position: absolute; inset: 0; background: #060505; opacity: 0; transition: opacity 1.2s linear; pointer-events: none; }
html.noir .salle__eteint, html.noir .sol__eteint { opacity: 1; }
html.noir .salle { --encre: #efe9dd !important; }
html.noir #haut, html.noir #plan, html.noir #curseur:not([data-mode="cadre"]):not([data-mode="porte"]):not(.est-presse) { color: #efe9dd; }
.frame { transition: border-color 1.2s linear, box-shadow 1.2s linear; }
.mat { transition: background-color 1.2s linear; }
.cartel { transition: background-color 1.2s linear, color 1.2s linear, box-shadow 1.2s linear; }
.eclairage { transition: opacity 1.2s linear; }
.lettrage, .hall__bloc, .porte__titre { transition: color 1.2s linear, opacity .45s linear; }
html.noir .frame { border-color: #1b1a18; box-shadow: none; }
html.noir .pool { background: radial-gradient(closest-side, rgba(255, 238, 212, .055), rgba(255, 238, 212, 0)); }
html.noir .cartel { background-color: transparent; color: #d8d2c6; box-shadow: none; }
html.noir .banc { opacity: .3; }
html.noir .porte svg { opacity: .28; }
html.noir .logo__ombre { opacity: 0; }
html.noir.calme .salle { background: #0a0908; }
html.noir.calme #pied { background: #0a0908; color: #d8d2c6; }
.calme #planTout, .calme #boutonSon { display: none; }

.calme .hall__bloc { transform: none; }
.calme #haut { position: absolute; color: var(--anthracite); }
.calme #pied { position: static; display: block; padding: 24px; text-align: right; color: var(--anthracite); background: var(--mur-actif, #dfddd8); }
.calme #lienMentions { padding: 0; margin: 0; opacity: 1; }
.calme .sortie__bloc { position: static; transform: none; width: auto; opacity: 1; }

/* Les photos ne se glissent pas hors de la page et n'ouvrent pas le menu d'enregistrement au doigt */
.win img, #regardImg, #portailImg { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }