/* ───────────── CH 8 · « Fermé. Entrez. » ─────────────
   Lights are opacity alone, movement is transform alone: no blur, no filter, nothing that repaints while walking. */
#musee { background: #050505; color: #E4E0D4; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.mu-scene { position: absolute; inset: 0; overflow: hidden; background: #050505; }
.mu-scene[hidden] { display: none; }
.mu-black { position: absolute; inset: 0; background: #050505; opacity: 0; pointer-events: none; z-index: 5; }
.mu-ink { font-family: 'Bangers', var(--f-display); color: #F2E7CF; font-weight: 400; line-height: 1; }
.ink-arrow { width: 2.2em; height: .84em; vertical-align: -.04em; fill: currentColor; }
.ink-arrow.is-back { transform: scaleX(-1); }
#musee button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }

/* the site's layers that would run over every frame: no use here */
body[data-ch="8"] #signal .scanlines, body[data-ch="8"] #signal .tracking, body[data-ch="8"] #signal .live { display: none; }

/* the door */
.md-cam { position: absolute; left: 0; will-change: transform; }
.md-img { display: block; width: 100%; height: 100%; }
.md-plaque { position: absolute; margin: 0; display: grid; place-content: center; text-align: center; line-height: 1.12; color: #D8CDB2; font-family: var(--f-serif); font-style: italic; opacity: .9; pointer-events: none; }
.md-plaque span { display: block; }
/* his frame and name: the frame and ticket of the site's items (.den-mark, .den-tip), which show when the mouse is on him */
#musee .md-man { position: absolute; border: 1px dashed transparent; }
#musee .md-man:hover, #musee .md-man:focus-visible { border-color: rgba(244, 233, 200, .75); background: rgba(255, 210, 140, .05); }
.md-name.den-tip { filter: none; box-shadow: 0 6px 14px rgba(0, 0, 0, .5); padding: 7px 13px 7px 20px; gap: 1px; justify-items: center; text-align: center; white-space: nowrap; top: calc(100% + 6px); }
.md-name b { font-size: 21px; }
.md-name [lang="ar"] { font-family: var(--f-ar-display); font-size: 18px; line-height: 1.1; color: #A32A1C; }
.md-box { position: absolute; overflow: hidden; cursor: pointer; }
.md-slide { position: absolute; inset: 0; will-change: transform; }
.md-shutter { display: block; width: 100%; height: 100%; }
#musee .md-go { position: absolute; }
#musee .md-go:focus-visible { outline: 2px solid #F6C81E; outline-offset: 2px; }
.mu-door { touch-action: pinch-zoom; }
.md-say { position: absolute; z-index: 3; opacity: 0; pointer-events: none; transform-origin: 63% 99%; }
.md-say svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.md-say path { fill: #F4EFE2; stroke: #14120F; stroke-width: 3; stroke-linejoin: round; }
.md-say p { position: absolute; left: 7%; right: 5%; top: 3%; height: 47%; margin: 0; display: grid; place-items: center; font-family: 'Bangers', var(--f-display); line-height: 1; color: #14120F; white-space: nowrap; }

/* the hall: the browser's own sideways scroll, the smoothest a phone has */
.mh-scroll { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pinch-zoom; }
.mh-scroll::-webkit-scrollbar { display: none; }
.mh-wall { position: relative; }
.mh-img { position: absolute; top: 0; width: calc(var(--u) * 3840); height: 100%; }
.mh-img.is-flip { transform: scaleX(-1); }
#musee .mh-work { position: absolute; box-sizing: border-box; background: #F4EEE2; border: max(3px, calc(var(--u) * 11)) solid #2A211A; padding: max(5px, calc(var(--u) * 20)); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 26) rgba(40, 24, 8, .4); }
.mh-work img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mh-sign { position: absolute; left: calc(var(--u) * 1654); top: calc(var(--u) * 1400); margin: 0; width: calc(var(--u) * 560); font-size: max(16px, calc(var(--u) * 36)); text-align: center; opacity: .7; }
.mh-hint { position: absolute; left: 50%; bottom: max(62px, calc(env(safe-area-inset-bottom) + 56px)); transform: translateX(-50%); margin: 0; font-size: 21px; white-space: nowrap; pointer-events: none; transition: opacity .5s; }
.mh-hint.gone, .mh-hint[hidden] { opacity: 0; }
.mh-count { position: absolute; left: 16px; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; font-size: 20px; padding: 10px 2px; opacity: .8; pointer-events: none; }
.mh-plain { position: absolute; inset: 0; z-index: 4; background: url('../assets/musee/wall.webp') repeat-x 0 0 / auto 100%; opacity: 0; pointer-events: none; }

/* the ways out: the site's exit sign, standing in the room: ink on nothing, no glass and no glow. Closed to its figure, it opens under the mouse */
#musee .mu-sign { --sig: #1C1610; position: absolute; opacity: 1; padding: 7px 12px 8px 10px; color: var(--sig); background: transparent; border: 1px solid currentColor; box-shadow: none; }
#musee .mu-sign:hover, #musee .mu-sign:focus-visible { background: transparent; box-shadow: none; outline: none; }
#musee .mu-sign::before, #musee .mu-sign::after { content: none; }
#musee .mu-sign .fc-man { width: 26px; height: 26px; }
#musee .mu-sign .fc-man svg { filter: none; animation: none; }
#musee .mu-sign .fc-txt :is(b, [lang="ar"]) { text-shadow: none; }
#musee .mu-sign .fc-to { color: inherit; text-shadow: none; }
#musee .mu-sign .fc-to kbd { color: inherit; border-color: currentColor; }
#musee .mh-out { --sig: #F2E7CF; top: auto; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); } /* the hall's sign stands on the dark floor: ink wouldn't show */
@media (max-width: 760px) {
  #musee .mu-sign { padding: 6px 8px; }
  #musee .mu-sign .fc-man { width: 24px; height: 24px; }
}

/* the wall: plain plaster, one work to a screen */
.mw-stage { position: absolute; inset: 0; overflow: hidden; }
.mw-track { position: absolute; left: 0; top: 0; bottom: 0; width: 0; will-change: transform; }
.mw-p { position: absolute; top: 0; height: 100%; background-image: url('../assets/musee/wall.webp'); background-repeat: repeat-x; }
#musee .mw-work { position: absolute; left: 50%; top: calc(var(--cy, .49) * 100%); transform: translate(-50%, -50%); }
.mw-frame { position: relative; display: block; border: 1px solid rgba(36, 28, 22, .85); box-shadow: 0 5px 20px rgba(40, 24, 8, .22); }
.mw-frame img { display: block; width: var(--w); height: var(--h); opacity: 0; transition: opacity .2s ease; }
.mw-frame img.in { opacity: 1; }
.mu-wall.leaving .mw-p > * { opacity: 0 !important; transition: opacity .3s ease !important; transition-delay: 0s !important; }
.mw-p.lit /* the work's own light: a dark sheet over it that lifts */
/* the title: small and quiet, near the work */
.mw-cap { position: absolute; left: var(--cap-left, 16px); top: var(--cap-top, auto); bottom: var(--cap-bottom, auto); width: var(--cap-w, 220px); font-family: var(--f-serif); font-size: 15px; line-height: 1.25; color: #2E251A; pointer-events: none; }
.mw-cap b { font-weight: 400; font-style: italic; font-size: 16px; }
.mw-cap i[lang="ar"] { font-style: normal; font-family: var(--f-ar); font-size: 15px; color: #5C4E3C; margin-inline-start: .4em; }
.mw-cap small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.2; color: #5C4E3C; }

/* his sentence, after the last work */
.mw-quote { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(84vw, 760px); margin: 0; text-align: center; color: #241C16; }
.mw-quote blockquote { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: clamp(27px, 4.4vw, 50px); line-height: 1.2; }
.mw-quote figcaption { margin-top: 20px; font-family: var(--f-serif); font-size: 15px; line-height: 1.3; color: #54473A; }
.mw-hud { position: absolute; left: 14px; right: 14px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 3; display: flex; align-items: center; gap: 4px; }
#musee .mw-b { color: #2E251A; font-family: var(--f-serif); font-style: italic; font-size: 16px; line-height: 1; padding: 11px 7px; white-space: nowrap; display: inline-flex; align-items: center; gap: .4em; }
#musee .mw-b .ink-arrow { width: 44px; height: 17px; transition: translate .25s ease; }
#musee .mw-next:hover .ink-arrow, #musee .mw-next:focus-visible .ink-arrow { translate: 4px 0; }
#musee .mw-prev:hover .ink-arrow, #musee .mw-home:hover .ink-arrow, #musee .mw-prev:focus-visible .ink-arrow, #musee .mw-home:focus-visible .ink-arrow { translate: -4px 0; }
#musee .mw-b:focus-visible { outline: 1px solid #2E251A; outline-offset: 2px; }
#musee .mw-home { margin-right: auto; position: relative; top: auto; right: auto; }
.mw-pos { font-family: var(--f-serif); font-size: 13.5px; font-variant-numeric: tabular-nums; color: #54473A; white-space: nowrap; padding: 0 2px; }
#musee .mw-prev[hidden] { display: none; }
.mw-dark { position: absolute; inset: 0; z-index: 4; background: #050505; opacity: 0; pointer-events: none; }

/* on the plaster the channel's name and the cursor turn to ink */
body[data-mu="wall"] #signal .ident-latin { color: #14120F; }
body[data-mu="wall"] #signal .ident-ar { color: #A32A1C; }
body:is([data-mu="wall"], [data-mu="hall"]) #cursor i { border-color: #14120F; }
body:is([data-mu="wall"], [data-mu="hall"]) #cursor .cur-tc { color: #14120F; }

/* up close */
/* only the work: the remote and its tab step aside, or they sit on the title */
body.is-on[data-mu="up"]:not(.in-screening) #remote { transform: translate(-50%, calc(100% + 80px)); pointer-events: none; }
body[data-mu="up"]:not(.in-screening) #remote::before, body[data-mu="up"]:not(.in-screening) #remote::after { display: none; }
.mu-up { position: absolute; inset: 0; z-index: 8; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #070707; touch-action: pinch-zoom; }
.mu-up[hidden] { display: none; }
.mu-up-img { width: 100%; height: 100%; object-fit: contain; padding: 54px 10px 6px; box-sizing: border-box; }
.mu-up-cap { margin: 0; min-height: 22px; padding: 4px 16px max(14px, env(safe-area-inset-bottom)); text-align: center; font-family: var(--f-serif); font-size: 16px; line-height: 1.25; color: rgba(236, 231, 220, .85); }
.mu-up-cap small { display: block; font-size: .78em; color: rgba(236, 231, 220, .55); }
.mu-up-cap .mu-up-q { margin-top: 3px; font-style: italic; color: rgba(236, 231, 220, .78); }
.mu-up-cap [lang="ar"] { font-family: var(--f-ar); margin-left: .4em; color: rgba(236, 231, 220, .65); }
#musee .mu-up-x { position: absolute; left: 14px; top: max(52px, calc(env(safe-area-inset-top) + 44px)); font-size: 22px; padding: 8px; }

@media (min-width: 761px) {
  #musee .mh-out { bottom: 16px; right: 28px; }
  #musee .mw-b { font-size: 17px; }
  .mw-pos { font-size: 15px; padding: 0 8px; }
  .mw-hud { left: 26px; right: 26px; bottom: 16px; }
  .mh-count { left: 28px; bottom: 16px; }
  #musee .mu-up-x { top: 56px; left: clamp(16px, 3vw, 40px); }
  .mu-up-img { padding: 20px 20px 6px; }
}
/* a phone held sideways: little height, nothing crowds the work */
@media (max-height: 480px) {
  .mw-cap small { display: none; }
}

/* on a touch screen: the first tap lights his frame and ticket and shows « Regarder l’épisode » beneath; a second tap
   on him or on it opens the episode, a tap elsewhere puts the card away */
#musee .md-watch { position: absolute; z-index: 3; transform: translateX(-50%) translateY(6px); display: none; align-items: center; gap: 8px; padding: 10px 16px;
  background: #A32A1C; color: #f8efe0; font: 800 14px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .55); opacity: 0; transition: opacity .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
#musee .md-man.armed { border-color: rgba(244, 233, 200, .75); background: rgba(255, 210, 140, .05); }
#musee .md-man.armed .den-tip { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }
#musee .md-man.armed ~ .md-watch { display: inline-flex; opacity: 1; transform: translateX(-50%); }

/* « En direct » shows on the museum's first page, the closed door, and leaves once you are inside */
body[data-ch="8"]:has(.mu-door:not([hidden])) #signal .live { display: grid; }