/* GLiTCH Museum — la visite. Une salle plein écran par œuvre, mobile d'abord.
   Mur de vraie couleur (--wall), sol de dalles de pierre claire en perspective, avec plinthe, statue posée au sol
   à bonne distance du mur, potelets de laiton et cordon de velours au premier plan (src/client/visit.js). Le cartel est un bandeau de papier en bas (mobile) ou un cartel
   posé en bas à gauche (bureau). */

.page-visit {
  --v-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='m16 9.5 5 5m0-5-5 5'/%3E%3C/svg%3E");
  --v-speaker-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");
  --v-headphones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 14v-2a7 7 0 0 1 14 0v2'/%3E%3Crect x='3.5' y='13.5' width='4' height='6.5' rx='1'/%3E%3Crect x='16.5' y='13.5' width='4' height='6.5' rx='1'/%3E%3C/svg%3E");
  overflow: hidden;
  overscroll-behavior: none;
  background: #0b0a09;
}

/* En-tête posé sur le mur : sa couleur suit la salle (clair sur mur foncé, encre sur mur clair). */
.page-visit .masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  max-width: none; margin: 0;
  padding-top: calc(0.7rem + env(safe-area-inset-top, 0px)); padding-bottom: 0.4rem;
  color: #f1ece2;
  transition: color 0.6s ease;
}
.page-visit[data-tone='light'] .masthead { color: var(--ink); }
.page-visit .masthead :is(.lang, .sound-toggle, .menu-button) { min-height: 44px; }
.page-visit .masthead .lang { min-width: 44px; justify-content: center; }
.page-visit .masthead__brand { min-height: 44px; align-content: center; }
.page-visit .toast { bottom: calc(var(--v-band, 0px) + 1rem); }
/* Focus : le bordeaux disparaît sur le noir et sur les murs sombres ; le contour prend la couleur du texte posé sur le mur. */
.page-visit .masthead :focus-visible { outline-color: #f1ece2; }
.page-visit[data-tone='light'] .masthead :focus-visible { outline-color: var(--ink); }
.visit__info :focus-visible { outline-color: var(--fg); }
.visit[data-tone='dark'] > .visit__guide :is(.ag-pill, .ag-device):focus-visible { outline-color: #f1ece2; }
@media (max-width: 600px) {
  .page-visit .masthead { grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
  .page-visit .masthead__brand { min-width: 0; }
  /* Le nom passe à la ligne plutôt que de pousser le plan du musée hors de l'écran. */
  .page-visit .masthead__name { white-space: normal; font-size: clamp(0.9rem, 3.84vw, 1.05rem); letter-spacing: 0.08em; line-height: 1.1; }
  .page-visit .masthead__tools { gap: 0.35rem; }
  .page-visit .masthead :is(.lang, .sound-toggle, .menu-button) { padding: 0.4rem 0.55rem; font-size: 0.7rem; letter-spacing: 0.06em; white-space: nowrap; }
}
@media (max-width: 480px) {
  /* Écrans étroits : le bouton de son devient un pictogramme (le texte reste lu par les lecteurs d'écran). */
  .page-visit .sound-toggle { font-size: 0 !important; width: 44px; justify-content: center; padding: 0 !important; }
  .page-visit .sound-toggle::before {
    content: ''; width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--v-speaker) center / contain no-repeat; mask: var(--v-speaker) center / contain no-repeat;
  }
  .page-visit .sound-toggle[data-state='on']::before { -webkit-mask-image: var(--v-speaker-on); mask-image: var(--v-speaker-on); }
}

.visit {
  --fg: #f1ece2;
  --fg-2: rgba(241, 236, 226, 0.74);
  --v-cartel-w: clamp(18rem, 27vw, 23.5rem);
  /* Grain d'enduit et marbrures, en SVG (quelques centaines d'octets, aucun fichier). */
  --v-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --v-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  position: fixed; inset: 0;
  color: var(--fg);
}
.visit[data-tone='light'] { --fg: var(--ink); --fg-2: var(--ink-2); }
/* Salles sombres : un voile sous l'en-tête et la barre d'information, pour que le texte clair reste lisible
   sous la lumière zénithale du mur. */
.visit::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 15; pointer-events: none;
  height: calc(var(--v-info-b, 7rem) + 2.5rem);
  background: linear-gradient(rgba(11, 10, 9, 0.52), rgba(11, 10, 9, 0.36) calc(100% - 3.5rem), rgba(11, 10, 9, 0.13) calc(100% - 1.5rem), rgba(11, 10, 9, 0));
  opacity: 0; transition: opacity 0.6s ease;
}
.visit[data-tone='dark']::before { opacity: 1; }

.v-icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- La scène ---------- */

.visit__stage {
  position: absolute; inset: 0; overflow: hidden;
  background: #0b0a09;
  touch-action: pinch-zoom;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.visit__loading {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 46%;
  text-align: center; color: rgba(241, 236, 226, 0.66); font-family: var(--f-admin); font-size: 0.8rem;
  animation: v-fade 0.6s 0.5s both;
}

.room { position: absolute; inset: 0; overflow: hidden; }
.room__wall {
  position: absolute; inset: 0;
  background-color: var(--wall);
  background-image:
    radial-gradient(ellipse 58% 62% at var(--cx, 50%) -6%, rgba(255, 238, 206, 0.34), rgba(255, 238, 206, 0) 72%),
    radial-gradient(ellipse 130% 95% at 50% 38%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.3) 100%);
  /* Embrasures : visibles pendant le travelling d'une salle à l'autre. */
  box-shadow: inset 30px 0 42px -30px rgba(0, 0, 0, 0.55), inset -30px 0 42px -30px rgba(0, 0, 0, 0.55);
}
.room__wall::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--v-grain), var(--v-mottle);
  mix-blend-mode: overlay; opacity: 0.16;
}

.room__scene { position: absolute; inset: 0; transform-origin: 0 0; }
.room__img { position: absolute; max-width: none; pointer-events: none; -webkit-user-drag: none; }
/* Le reflet de la statue sur la pierre polie : la même image, retournée sous le socle, à peine visible. */
.room__reflet {
  position: absolute; max-width: none; pointer-events: none; transform: scaleY(-1); opacity: 0.14;
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0) 28%); mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0) 28%);
}

/* Sol de dalles de pierre claire, dessiné en perspective par la visite (SVG), avec plinthe au pied du mur ; par-dessus,
   le grain et les nuances de la pierre. */
.room__floor { position: absolute; overflow: hidden; background: #cfc8ba; }
.room__floor .floor { position: absolute; inset: 0; width: 100%; height: 100%; }
.room__floor::after { content: ''; position: absolute; inset: 0; background-image: var(--v-grain), var(--v-mottle); mix-blend-mode: overlay; opacity: 0.26; pointer-events: none; }
/* La plinthe appartient au mur : une bande plus sombre, posée sur le sol (ombre portée sans flou). */
.room__floor { box-shadow: 0 calc(-1 * var(--plinth, 10px)) 0 0 color-mix(in srgb, var(--wall) 56%, #1a130b); }

.room__cord { position: absolute; overflow: visible; pointer-events: none; max-width: none; }

/* Salle F : estrade basse en pierre, lumière rare, pas de cordon. */
.room--dais .room__floor { filter: brightness(0.4) saturate(0.7); }
.room--dais .floor__pool { opacity: 0.4; }
.room__dais {
  position: absolute;
  background: linear-gradient(to bottom, #c9c1b3 0, #bcb4a5 var(--top, 12px), #7e776b calc(var(--top, 12px) + 1px), #9a9285 45%, #6f685d 100%);
  filter: brightness(0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* L'alcôve : une niche plus sombre, cintrée, sans cordon. */
.room--alcove .room__wall {
  background-image:
    radial-gradient(ellipse 58% 62% at var(--cx, 50%) -6%, rgba(255, 238, 206, 0.22), rgba(255, 238, 206, 0) 72%),
    radial-gradient(ellipse 110% 90% at 50% 45%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.42) 100%);
}
.room__niche {
  position: absolute;
  background:
    radial-gradient(ellipse 70% 42% at 50% 6%, rgba(255, 236, 204, 0.16), rgba(255, 236, 204, 0) 70%),
    color-mix(in srgb, var(--wall) 50%, #0e0b07);
  box-shadow:
    0 0 0 clamp(5px, 0.7vw, 9px) color-mix(in srgb, var(--wall) 84%, #fff),
    inset 0 24px 46px rgba(0, 0, 0, 0.5),
    inset 16px 0 30px -12px rgba(0, 0, 0, 0.4),
    inset -16px 0 30px -12px rgba(0, 0, 0, 0.4);
}
.room--alcove .room__floor { filter: brightness(0.82); }

/* Le noir de l'amorce : un seul cercle de lumière, bord doux, léger halo autour. */
.room__dark {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at var(--sx, 50%) var(--sy, 42%), rgba(0, 0, 0, 0) calc(var(--sr, 90px) * 0.97), rgba(255, 236, 204, 0.05) var(--sr, 90px), rgba(0, 0, 0, 0) calc(var(--sr, 90px) * 1.9)),
    radial-gradient(circle at var(--sx, 50%) var(--sy, 42%), rgba(9, 8, 7, 0) calc(var(--sr, 90px) * 0.76), rgb(9, 8, 7) var(--sr, 90px));
}

/* Panneau de sortie : il reste allumé dans le noir. */
.room__exit {
  position: absolute; z-index: 3; margin: 0;
  top: calc(var(--v-info-b, 7rem) + 0.5rem); right: var(--gutter);
  max-width: min(15.5rem, calc(100% - 2 * var(--gutter)));
}
@media (max-width: 999px) {
  /* Bandeau bas : le panneau de sortie court sur toute la largeur, en deux lignes. */
  .room__exit { left: var(--gutter); max-width: none; }
  .room__exit .exit-sign { width: 100%; font-size: 0.62rem !important; padding: 0.45rem 0.6rem !important; }
}
.room__exit .exit-sign {
  align-items: flex-start; font-size: 0.68rem; line-height: 1.3; padding: 0.55rem 0.7rem;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.88), 0 0 26px rgba(24, 170, 96, 0.38);
}
.room__exit .v-icon { width: 1.7em; height: 1.7em; stroke-width: 2.2; margin-top: 0.1em; }

/* ---------- Couloir (avis au public) ---------- */

.room--corridor { color: var(--ink); }
.room--corridor .room__wall { background-color: var(--plaster); }
.corridor__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 17%;
  background: linear-gradient(to bottom, rgba(20, 16, 12, 0.25), rgba(20, 16, 12, 0) 22px), linear-gradient(to bottom, #bdb5a6, #d5cec1 30%, #c7bfb1);
  box-shadow: 0 -10px 0 0 #b9b3a7;
}
.corridor {
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: calc(var(--v-info-b, 7rem) + 0.5rem); bottom: 19%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.25rem, 4vh, 2.25rem);
}
.corridor__plate, .visit__plate {
  background: #1f1e1b; color: #fff;
  font-family: var(--f-sign); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: clamp(0.95rem, 0.85rem + 0.6vw, 1.3rem); line-height: 1.2;
  padding: 0.6rem 1.1rem; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  max-width: 100%; text-align: center;
}
.corridor__avis { width: min(26rem, calc(100% - 0.75rem)); transform: rotate(-1.4deg); }
@media (min-width: 700px) { .corridor__avis { transform: translateX(-4%) rotate(-1.4deg); } }
.corridor__avis .avis__text { font-size: var(--step-0); }
.corridor__ok { min-height: 48px; }

/* ---------- Informations du haut : progression et salle ---------- */

.visit__info {
  position: absolute; z-index: 20; left: 0; right: 0; top: var(--v-mast, 4rem);
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.15rem var(--gutter) 0;
  color: var(--fg); transition: color 0.6s ease;
  pointer-events: none;
}
.visit__info > * { pointer-events: auto; }
.visit[data-phase='loading'] .visit__info { opacity: 0; }
.visit__prev {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; color: inherit; border: 1px solid currentColor; border-radius: var(--radius);
}
.visit__where { min-width: 0; padding-top: 0.3rem; }
.visit__progress {
  font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.35;
}
.visit__sep { margin-inline: 0.55em; opacity: 0.55; }
.visit__ticks { list-style: none; display: flex; gap: 3px; margin-top: 0.45rem; }
.visit__ticks li { width: 12px; height: 2px; background: currentColor; opacity: 0.24; }
.visit__ticks li.is-past { opacity: 0.6; }
.visit__ticks li.is-current { opacity: 1; height: 4px; margin-top: -1px; }
.visit__noticket { font-family: var(--f-admin); font-size: 0.72rem; line-height: 1.45; margin-top: 0.5rem; max-width: 30rem; }
.visit__noticket a { display: inline-block; padding-block: 0.85rem; margin-block: -0.65rem; }

/* Plaque de signalétique suspendue, en arrivant dans une nouvelle salle. */
.visit__plate {
  position: absolute; z-index: 22; left: 50%; transform: translateX(-50%);
  top: calc(var(--v-info-b, 7rem) + 1.1rem);
  width: max-content; max-width: calc(100% - 2 * var(--gutter));
  pointer-events: none;
}
@media (max-width: 999px) { .visit[data-room='alcove'] .visit__plate { top: calc(var(--v-exit-b, 10rem) + 1.4rem); } }
.visit__plate::before, .visit__plate::after {
  content: ''; position: absolute; bottom: 100%; width: 1px; height: 1.1rem; background: rgba(0, 0, 0, 0.55);
}
.visit__plate::before { left: 18%; }
.visit__plate::after { right: 18%; }

/* ---------- Sous-titres (convention télévisuelle) ---------- */

.visit__subs {
  position: absolute; z-index: 25; left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--v-band, 0px) + var(--v-guide, 0px) + 1rem);
  display: flex; justify-content: center; pointer-events: none;
}
.visit__sub {
  max-width: 36rem; text-align: center;
  font-family: var(--f-sign); font-weight: 500; font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem); line-height: 1.55;
}
.visit__sub span {
  background: rgba(0, 0, 0, 0.84); color: var(--sub-voice); padding: 0.12em 0.45em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.visit__sub[data-kind='guard'] span { color: var(--sub-guard); }
.visit__sub[data-kind='sfx'] span { color: var(--sub-sfx); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-stretch: 85%; }
.visit__sub[data-kind='silence'] span { color: rgba(255, 255, 255, 0.72); background: rgba(0, 0, 0, 0.55); font-style: italic; }

/* ---------- Le cartel ---------- */

.vcartel {
  position: absolute; z-index: 30; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 0.5rem; row-gap: 0.3rem; align-items: center;
  background-color: var(--paper); color: var(--ink);
  /* Ombres de défilement : elles n'apparaissent que si une partie du cartel est cachée. */
  background-image:
    linear-gradient(var(--paper) 40%, rgba(247, 245, 239, 0)),
    linear-gradient(rgba(247, 245, 239, 0), var(--paper) 60%),
    radial-gradient(farthest-side at 50% 0, rgba(27, 26, 24, 0.22), rgba(27, 26, 24, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(27, 26, 24, 0.22), rgba(27, 26, 24, 0));
  background-position: top, bottom, top, bottom;
  background-size: 100% 2.5rem, 100% 2.5rem, 100% 0.9rem, 100% 0.9rem;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  padding: 0.8rem var(--gutter) calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(27, 26, 24, 0.16);
  transition: transform 0.45s var(--ease-camera), visibility 0s;
  /* Écrans bas (ou zoom fort) : le cartel défile plutôt que de sortir de l'écran. */
  max-height: calc(100dvh - var(--v-info-b, 7rem) - 0.5rem);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(27, 26, 24, 0.3) transparent;
}
.vcartel:focus { outline: none; }
/* Audioguide ouvert (rangé dans le bandeau) : le boîtier déborde du cartel, au-dessus de l'en-tête. */
.vcartel:has(.ag[data-open='true']) { overflow: visible; z-index: 45; }
.vcartel > * { grid-column: 1 / -1; }
.visit:is([data-phase='loading'], [data-phase='corridor']) .vcartel {
  transform: translateY(105%); visibility: hidden;
  transition: transform 0.4s var(--ease-camera), visibility 0s 0.4s;
}

.vcartel__room {
  grid-column: 1; grid-row: 1;
  font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.1em; line-height: 1.25; text-transform: uppercase; color: var(--ink-2);
}
.vcartel__inv { grid-column: 1; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-admin); font-size: 0.72rem; color: var(--ink-2); }
.vcartel__guide { grid-column: 2; grid-row: 1; justify-self: end; margin-block: -0.35rem; }
.vcartel__guide .visit__guide { position: static; }
.vcartel__fold {
  grid-column: 3; grid-row: 1; width: 44px; height: 44px; margin: -0.6rem -0.5rem -0.5rem 0;
  display: grid; place-items: center; background: transparent; border: 0; color: var(--ink);
}
.vcartel[data-folded] .vcartel__fold .v-icon { transform: rotate(180deg); }

.vcartel__id { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.85rem; align-items: start; }
.vcartel__names { display: grid; gap: 0.3rem; align-content: start; min-width: 0; }
/* Amorce : le titre de l'œuvre en grand, sans italique ; il repasse en italique de cartel à la révélation. */
.vcartel__figure { font-family: var(--f-inscription); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.35rem); line-height: 1.04; letter-spacing: 0.01em; text-wrap: balance; }
.vcartel:not([data-state='amorce']) .vcartel__figure { display: none; }
.vcartel__title { font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: clamp(1.35rem, 1.12rem + 1vw, 2.05rem); line-height: 1.08; text-wrap: balance; }
/* Définition de la figure : la voix de l'institution, sans un mot de trop. */
.vcartel__role { font-family: var(--f-inscription); font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem); line-height: 1.35; color: var(--ink-2); }
.vcartel__materials { font-family: var(--f-admin); font-size: 0.78rem; line-height: 1.45; }
.vcartel__extra { display: block; color: var(--ink-2); }

.vcartel__amorce { display: grid; gap: 0.55rem; margin-top: 0.35rem; }
.vcartel__hint { font-family: var(--f-admin); font-size: 0.72rem; color: var(--ink-2); }
.vcartel__reveal { width: 100%; }
.vcartel__keys { display: none; font-family: var(--f-admin); font-size: 0.68rem; line-height: 1.45; color: var(--ink-2); margin-top: 0.5rem; }
@media (hover: hover) and (pointer: fine) {
  .vcartel__hint { display: none; }
  .vcartel__keys { display: block; }
}

.vcartel__after { display: grid; gap: 0.5rem; margin-top: 0.3rem; }
.vcartel__wait { font-family: var(--f-admin); font-size: 0.78rem; color: var(--ink-2); }
/* Bandeau : « Salle suivante » et les trois outils sur une ligne quand ils tiennent ; sinon les outils passent
   sur une ligne à eux, en cases égales (le bouton garde son libellé entier). */
.vcartel__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: stretch; max-width: 36rem; }
.vcartel__next, .vcartel__exit { flex: 999 1 9rem; min-width: 0; padding-inline: 0.85rem; font-size: 0.82rem; letter-spacing: 0.07em; line-height: 1.15; text-align: center; }
.vcartel__tools { list-style: none; display: flex; gap: 0.4rem; flex: 1 0 auto; }
.vcartel__tools > li { flex: 1 1 0; }
.vcartel__tools .vtool { width: 100%; }
@media (max-width: 420px) {
  .vcartel__actions, .vcartel__tools { gap: 0.3rem; }
  .vcartel__next .v-icon, .vcartel__exit .v-icon { display: none; }
  .vcartel__next, .vcartel__exit { padding-inline: 0.6rem; letter-spacing: 0.05em; }
  /* Le numéro d'inventaire ne doit jamais être coupé : la pastille garde son voyant, un casque et le numéro de piste
     (le mot « Audioguide » reste lu par les lecteurs d'écran). */
  .vcartel__guide .ag-pill__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vcartel__guide .ag-pill { gap: 0.45rem; padding-left: 0.6rem; }
  .vcartel__guide .ag-pill::before {
    content: ''; order: 1; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--v-headphones) center / contain no-repeat; mask: var(--v-headphones) center / contain no-repeat;
  }
  .vcartel__guide .ag-pill__n { order: 2; }
}
.vtool {
  min-width: 44px; min-height: 48px; height: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0; background: transparent; color: var(--ink);
  border: 1px solid rgba(27, 26, 24, 0.34); border-radius: var(--radius);
  font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; line-height: 1.2;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.vtool:hover { border-color: var(--ink); background: rgba(27, 26, 24, 0.05); }
.vtool[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vtool__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vcartel__end { border-top: 2px solid var(--ink); margin-top: 0.3rem; padding-top: 0.2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; }
.vcartel__end-text { grid-column: 1 / -1; }
.vcartel__end-title { font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
.vcartel__end-text { font-family: var(--f-inscription); font-style: italic; font-size: 1.05rem; line-height: 1.3; }
/* Téléphones bas : la dernière salle garde la place pour le Scribe (le panneau de sortie dit déjà la même chose). */
@media (max-width: 999px) and (max-height: 780px) and (orientation: portrait) { .vcartel__end-text { display: none; } }
.vcartel__refectory { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.vcartel__hall { justify-self: end; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* États du cartel : amorce (figure seule), révélation en cours, révélé. */
.vcartel[data-state='amorce'] :is(.vcartel__inv, .vcartel__title, .vcartel__materials, .vcartel__after) { display: none; }
.vcartel[data-state='revealing'] :is(.vcartel__room, .vcartel__amorce, .vcartel__title, .vcartel__materials, .vcartel__after) { display: none; }
.vcartel[data-state='revealed'] :is(.vcartel__room, .vcartel__amorce) { display: none; }
.vcartel:not([data-state='revealed']) .vcartel__fold { display: none; }
.vcartel[data-wait] .vcartel__actions, .vcartel[data-wait] .vcartel__end { display: none; }
.vcartel[data-folded] :is(.vcartel__figure, .vcartel__role, .vcartel__before, .vcartel__materials, .vcartel__end) { display: none; }

.vcartel[data-state='revealed'] .vcartel__inv { animation: v-rise 0.3s var(--ease-out) both; }
.vcartel[data-state='revealed'] .vcartel__title { animation: v-rise 0.35s 0.05s var(--ease-out) both; }
.vcartel[data-state='revealed'] .vcartel__materials { animation: v-rise 0.35s 0.2s var(--ease-out) both; }
.vcartel[data-state='revealed'] .vcartel__after { animation: v-rise 0.35s 0.85s var(--ease-out) both; }
.vcartel[data-state='revealed'] .vcartel__actions { animation: v-fade 0.4s var(--ease-out) both; }

@keyframes v-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes v-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Version précédente : l'œuvre réelle, photographie d'archive ----------
   En vignette dans le cartel, dès l'amorce : à côté du titre sur téléphone (avec son seul intitulé), sous le titre
   sur ordinateur (avec sa date, l'œuvre, le crédit court et « Voir l'évolution »). Après la révélation, la vignette
   ouvre l'historique des versions. Épreuve : .archive__mount (notice.css). */

.vbefore__fig { margin: 0; }
.vbefore__open { display: block; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in; border-radius: 1px; }
.vbefore__open:disabled { cursor: default; }
.vbefore__open:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.vbefore__mount { display: block; }
.vbefore__img { display: block; width: auto; height: auto; max-width: 100%; }
.vbefore__label { font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; text-transform: uppercase; }
.vbefore__label .version-label__date { font-family: var(--f-admin); font-stretch: normal; font-weight: 400; letter-spacing: 0; text-transform: none; }
.vbefore__work { font-family: var(--f-admin); font-size: 0.72rem; line-height: 1.4; }
.vbefore__credit { font-size: 0.62rem; line-height: 1.4; color: var(--ink-2); }
.vbefore__credit .nowrap { white-space: nowrap; }
.vbefore__open:not(:disabled):hover .vbefore__mount { box-shadow: 0 0 0 1px var(--ink-3), 0 8px 14px -8px rgba(27, 26, 24, 0.6); }

/* Téléphone : la vignette à côté du titre, son intitulé dessous. */
.vcartel__before:has(> .vbefore[hidden]) { display: none; }
.vcartel__before > .vbefore:not([hidden]) { display: block; }
.vcartel__before .vbefore__fig { display: grid; justify-items: center; gap: 0.3rem; width: 4.6rem; }
.vcartel__before .vbefore__caption { display: grid; justify-items: center; }
.vcartel__before .vbefore__label { font-size: 0.58rem; line-height: 1.15; letter-spacing: 0.06em; text-align: center; color: var(--ink-2); }
.vcartel__before :is(.version-label__date, .vbefore__work, .vbefore__credit) { display: none; }
.vcartel__before .vbefore__mount { --mat: 0.2rem; --mat-b: 0px; box-shadow: 0 0 0 1px var(--rule), 0 6px 10px -8px rgba(27, 26, 24, 0.5); }
.vcartel__before .vbefore__mount::before { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.vcartel__before .vbefore__img { max-width: 4.2rem; max-height: 4.4rem; }
.vcartel[data-state='revealing'] .vcartel__before { opacity: 0.4; }

/* Audioguide : l'appareil est dessiné (et sa hauteur plafonnée) par src/client/audioguide.js.
   Ouvert, il passe au-dessus de l'en-tête, pour que « Ranger » réponde toujours. */
.visit__guide { position: absolute; z-index: 30; right: var(--gutter); bottom: calc(var(--v-band, 0px) + 0.6rem); color: var(--ink); }
.visit__guide:has(.ag[data-open='true']) { z-index: 45; }
.visit:is([data-phase='loading'], [data-phase='corridor']) .visit__guide { visibility: hidden; }

/* Sans JavaScript. */
.visit__nojs {
  position: absolute; inset: 0; z-index: 60; overflow: auto;
  display: grid; align-content: center; justify-items: start; gap: 1rem;
  padding: 6rem var(--gutter) 3rem; background: var(--plaster); color: var(--ink);
}
.visit__nojs-text { font-family: var(--f-inscription); font-size: var(--step-2); line-height: 1.2; max-width: 32rem; }

/* ---------- Tiroir de la notice ---------- */

.vdrawer {
  position: fixed; inset: auto 0 0 0; margin: 0;
  width: 100%; max-width: 100%; height: 90dvh; max-height: 90dvh;
  padding: 0; border: 0; border-top: 1px solid rgba(27, 26, 24, 0.2);
  background: var(--paper); color: var(--ink); overflow: hidden;
}
.vdrawer::backdrop { background: rgba(12, 11, 10, 0.6); }
.vdrawer__inner {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
}
.vdrawer__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--paper); border-bottom: 2px solid var(--ink);
  padding: 0.75rem 0 0.6rem; margin-bottom: 1.25rem;
}
.vdrawer__kicker { font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.vdrawer__close {
  min-height: 44px; padding: 0.5rem 0.8rem; background: none; border: 1px solid currentColor; border-radius: var(--radius);
  font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.vdrawer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.vdrawer__work { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Historique des versions : version précédente et version actuelle ----------
   Ouvert depuis le cartel, après la révélation seulement. Feuille montante sur mobile, fenêtre centrée sur bureau.
   Les deux panneaux (src/templates/original.js) sont mis en forme dans notice.css. */

.vcompare {
  position: fixed; inset: auto 0 0 0; margin: 0;
  width: 100%; max-width: 100%; height: 92dvh; max-height: 92dvh;
  padding: 0; border: 0; border-top: 1px solid rgba(27, 26, 24, 0.2);
  background: var(--paper); color: var(--ink); overflow: hidden;
}
.vcompare::backdrop { background: rgba(12, 11, 10, 0.72); }
.vcompare__inner {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--gutter) calc(1.75rem + env(safe-area-inset-bottom, 0px));
}
.vcompare__bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--paper); border-bottom: 2px solid var(--ink);
  padding: 0.75rem 0 0.6rem; margin-bottom: 1.1rem;
}
.vcompare__kicker { font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.vcompare__close {
  flex: none; min-height: 44px; padding: 0.5rem 0.8rem; background: none; border: 1px solid currentColor; border-radius: var(--radius);
  font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.vcompare__close:hover { background: var(--ink); color: var(--paper); }
.vcompare__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 1.25rem; }
.vcompare__heading { display: grid; gap: 0.3rem; flex: 1 1 16rem; min-width: 0; }
.vcompare__title { font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.08; }
.vcompare__role { font-family: var(--f-inscription); font-size: 1.02rem; line-height: 1.35; color: var(--ink-2); }
.vcompare__inv { font-family: var(--f-admin); font-size: 0.76rem; color: var(--ink-2); }
/* Tampon administratif, très discret (décoratif : l'intitulé de la fenêtre le dit déjà). */
.vcompare__stamp { flex: none; margin: 0 0.35rem 0.15rem auto; font-size: 0.64rem; border-width: 2px; opacity: 0.5; }

@media (min-width: 1000px) and (min-height: 600px) {
  .vcompare {
    inset: 0; margin: auto;
    width: min(70rem, calc(100vw - 2 * var(--gutter))); height: fit-content; max-height: calc(100dvh - 2 * var(--gutter));
    border: 1px solid rgba(27, 26, 24, 0.2);
  }
  .vcompare__inner { height: auto; max-height: calc(100dvh - 2 * var(--gutter)); padding-bottom: 2rem; }
}

/* ---------- Bureau (et téléphone à l'horizontale) : cartel posé en bas à gauche ---------- */

@media (min-width: 1000px), (orientation: landscape) and (max-height: 560px) and (min-width: 640px) {
  .vcartel {
    left: var(--gutter); right: auto; bottom: var(--gutter);
    width: var(--v-cartel-w);
    max-height: calc(100dvh - var(--v-info-b, 7rem) - var(--gutter) - 0.75rem);
    padding: 1.05rem 1.2rem 1.15rem;
    border: 1px solid rgba(27, 26, 24, 0.14);
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.35rem;
  }
  .vcartel__room, .vcartel__inv { grid-row: auto; }
  .vcartel__guide { display: none; }
  .vcartel__fold { display: none !important; }
  .vcartel[data-folded] :is(.vcartel__figure, .vcartel__role, .vcartel__before, .vcartel__materials, .vcartel__end) { display: revert; }
  .vcartel__actions { flex-direction: column; flex-wrap: nowrap; margin-top: 0.35rem; }
  .vcartel__next, .vcartel__exit { flex: none; justify-content: space-between; }
  .vcartel__tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; flex: none; }
  .vtool { justify-content: flex-start; padding: 0.5rem 0.6rem; min-height: 44px; width: 100%; }
  .vtool__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  /* Les sous-titres et la plaque de salle, centrés sur la statue (à droite du cartel), au-dessus de l'audioguide. */
  .visit__subs { left: calc(var(--v-cartel-w) + 2 * var(--gutter)); right: var(--gutter); bottom: calc(var(--v-guide, 0px) + var(--gutter) + 0.9rem); }
  .visit__plate { left: calc((100% + var(--v-cartel-w) + var(--gutter)) / 2); max-width: calc(100% - var(--v-cartel-w) - 3 * var(--gutter)); }
  .visit__guide { bottom: var(--gutter); }
  .vdrawer { inset: 0 0 0 auto; width: min(34rem, 100vw); height: 100dvh; max-height: 100dvh; border-top: 0; border-left: 1px solid rgba(27, 26, 24, 0.2); }
  .vdrawer__inner { padding-top: env(safe-area-inset-top, 0px); }
}
/* Bureau : l'œuvre (titre, définition, matériaux), puis, sous un filet, la version précédente : la vignette (elle ouvre
   la comparaison des versions) et son intitulé à côté. Le téléphone à l'horizontale garde la vignette à côté du titre. */
@media (min-width: 1000px) {
  .vcartel__compare { display: none; }
  .vcartel__id { display: contents; }
  .vcartel__before { order: 1; margin-top: 0.35rem; padding-top: 0.85rem; border-top: 1px solid var(--rule); }
  .vcartel__amorce, .vcartel__after, .vcartel__keys { order: 2; }
  .vcartel__before .vbefore__fig { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: start; column-gap: 0.9rem; width: auto; }
  .vcartel__before .vbefore__caption { justify-items: start; gap: 0.2rem; padding-top: 0.15rem; }
  .vcartel__before .vbefore__label { font-size: 0.64rem; line-height: 1.3; letter-spacing: 0.12em; text-align: left; color: var(--ink); }
  /* la date sous l'intitulé, sans le point de séparation */
  .vcartel__before .version-label__date { display: block; margin-top: 0.1rem; }
  .vcartel__before .version-label__date > [aria-hidden] { display: none; }
  .vcartel__before :is(.vbefore__work, .vbefore__credit) { display: block; }
  .vcartel__before .vbefore__img { max-width: 4.8rem; max-height: 6rem; }
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 640px) {
  /* Téléphone à l'horizontale : cartel resserré, outils en pictogrammes comme sur mobile ; le reste défile. */
  .vcartel { padding: 0.7rem 0.9rem 0.8rem; row-gap: 0.2rem; }
  .vcartel__keys { display: none; }
  .vcartel__actions { margin-top: 0.2rem; }
  .vcartel__tools { display: flex; }
  .vcartel__tools > li { flex: 1 1 0; }
  .vtool { justify-content: center; padding: 0; min-width: 44px; }
  .vtool__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Le panneau de sortie et la plaque de salle se tiennent à droite du cartel. */
  .room__exit { left: calc(var(--v-cartel-w) + 2 * var(--gutter)); }
  .visit__plate { left: calc((100% + var(--v-cartel-w) + var(--gutter)) / 2); max-width: calc(100% - var(--v-cartel-w) - 3 * var(--gutter)); }
  .vcartel__figure { font-size: 1.5rem; }
  .vcartel__title { font-size: 1.25rem; }
  .visit__subs { left: calc(var(--v-cartel-w) + 2 * var(--gutter)); right: var(--gutter); bottom: calc(var(--v-guide, 0px) + var(--gutter) + 0.4rem); }
  .visit__sub { font-size: 0.9rem; line-height: 1.5; }
}

/* Les raccourcis clavier ne servent à rien sur un écran tactile. */
@media (hover: none) and (pointer: coarse) { .vcartel__keys { display: none; } }

/* ---------- Mode tournage (/visite/?tournage#slug) ----------
   Une salle jouée seule dans un cadre vertical 9:16, sans interface, pour enregistrer une vidéo.
   Les tailles suivent le cadre (unités cqw / cqh). Déroulé : src/client/visit.js, tournage(). */
html[data-tournage] body { background: #000; }
html[data-tournage] :is(.masthead, .skip, .toast) { display: none !important; }
.visit[data-tournage] { inset: 0; margin: auto; width: min(100vw, calc(100vh * 9 / 16)); height: min(100vh, calc(100vw * 16 / 9)); container-type: size; }
.visit[data-tournage]::before { display: none; }
.visit[data-tournage] :is(.visit__info, .vcartel, .visit__guide, .visit__plate, .vbefore, .room__exit) { display: none !important; }
.visit[data-tournage] .visit__subs { left: 6cqw; right: 6cqw; bottom: 6cqh; }
.visit[data-tournage] .visit__sub { max-width: none; font-size: 4.3cqw; line-height: 1.55; }
.vtour { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.vtour[data-running] { pointer-events: auto; }
.vtour__card { position: absolute; inset: 0; pointer-events: auto; }
.vtour__start { display: grid; place-content: center; justify-items: center; gap: 1.2rem; padding: 8cqw; background: rgba(11, 10, 9, 0.88); color: #f1ece2; text-align: center; }
.vtour__hint { max-width: 32ch; font-family: var(--f-admin); font-size: 0.8rem; line-height: 1.5; color: rgba(241, 236, 226, 0.72); }
.vtour__card--before, .vtour__card--final {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqh;
  padding: 8cqh 8cqw; background: var(--plaster); color: var(--ink); text-align: center;
}
.vtour__brand { font-size: 5.6cqw; line-height: 1; }
.vtour__i { color: var(--bordeaux); }
.vtour__label { display: grid; gap: 0.35em; font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 3.2cqw; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; }
.vtour__date { font-family: var(--f-admin); font-stretch: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.vtour__print { position: relative; margin: 0; padding: 1.8cqw 1.8cqw 4.5cqw; background: var(--paper); box-shadow: 0 1.4cqh 2.8cqh -1.4cqh rgba(27, 26, 24, 0.6); }
.vtour__print::before { content: ''; position: absolute; left: 50%; top: 0.5cqw; width: 1.4cqw; height: 1.4cqw; margin-left: -0.7cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3dfb0, var(--brass) 55%, #6f5530); }
.vtour__print img { display: block; width: auto; height: auto; max-width: 72cqw; max-height: 56cqh; }
.vtour__work { max-width: 80cqw; font-family: var(--f-admin); font-size: 3cqw; line-height: 1.45; color: var(--ink-2); }
.vtour__card.vtour__lower { inset: 4cqh 6cqw auto; padding: 2.4cqh 5cqw; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 0.8cqh 2cqh -1cqh rgba(0, 0, 0, 0.45); }
.vtour__title { font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: 6.4cqw; line-height: 1.08; text-wrap: balance; }
.vtour__role { margin-top: 0.8cqh; font-family: var(--f-inscription); font-size: 3.7cqw; line-height: 1.3; color: var(--ink-2); text-wrap: balance; }
.vtour__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2.5cqw; width: 100%; }
.vtour__pair figure { margin: 0; display: grid; justify-items: center; gap: 1.4cqh; min-width: 0; }
.vtour__pair img { display: block; width: auto; height: auto; max-width: 100%; max-height: 40cqh; box-shadow: 0 1.2cqh 2cqh -1.2cqh rgba(27, 26, 24, 0.7); }
.vtour__pair .vtour__label { font-size: 2.3cqw; }
.vtour__arrow { font-family: var(--f-admin); font-size: 6cqw; color: var(--ink-2); }
.vtour__sig { font-family: var(--f-inscription); font-style: italic; font-size: 5.2cqw; }
.vtour__host { font-family: var(--f-admin); font-size: 3.4cqw; letter-spacing: 0.04em; }