/* Accueil : l'entrée du musée, l'affiche de l'exposition, le hall d'accueil, puis le musée. */

/* ---------- L'exposition (plein écran, sous l'entrée) ----------
   L'entrée de l'exposition, où descend le bouton « Entrer » de l'entrée du musée : la Cène mise à jour, pâlie sur
   l'enduit comme une fresque ancienne, en fond. D'un côté, la bannière de l'exposition, comme celles qui pendent
   dans les halls des musées ; de l'autre, comme un carton d'invitation, le Département qui la présente, son titre,
   le chapeau, les boutons et ses crédits. En arrivant, chaque élément monte à sa place. Image : src/data/refectory.js ;
   statue : src/data/artworks.js. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: 100svh;
  color: var(--ink);
}
.hero__art { position: absolute; inset: 0; z-index: -1; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; opacity: 0.72; filter: saturate(0.85); }
.hero__art::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 56% at 50% 50%, rgba(233, 230, 223, 0.93), rgba(233, 230, 223, 0.82) 55%, rgba(233, 230, 223, 0.55) 100%),
    linear-gradient(180deg, var(--plaster), rgba(233, 230, 223, 0) 14%, rgba(233, 230, 223, 0) 80%, var(--plaster));
}
.hero__inner { display: grid; justify-items: center; gap: var(--s-5); padding-block: var(--s-6); }

/* La bannière de l'exposition, comme celles qui pendent dans les halls des musées : une toile bordeaux imprimée,
   tendue entre deux tringles de laiton et suspendue au plafond par deux câbles. L'impression : le titre en équerre,
   qui encadre Zeus et son shaker (« The Past, » monte le long du bord gauche, « Updated. » continue en haut vers la
   droite), et au pied, sous un filet, le logo du musée et la mention de l'exposition. Par-dessus, les fourreaux cousus, les plis et
   la trame de la toile. Les tailles du texte suivent la largeur de la toile (cqi). */
.hero__banner { display: grid; justify-items: center; }
.kakemono { position: relative; margin: 0; width: min(46vw, 20svh, 15rem); display: flex; flex-direction: column; align-items: center; }
/* Les deux câbles, jusqu'au plafond. */
.kakemono::before, .kakemono::after {
  content: ''; position: absolute; bottom: calc(100% - 4px); width: 1px; height: 100vh;
  background: linear-gradient(180deg, rgba(80, 76, 70, 0), rgba(80, 76, 70, 0.6) 45%);
}
.kakemono::before { left: 8%; }
.kakemono::after { right: 8%; }
.kakemono__rod {
  position: relative; z-index: 2;
  width: calc(100% + 18px); height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ecd6a4 0%, #c29d63 38%, #8a6a3b 100%);
  box-shadow: 0 1px 1px rgba(27, 26, 24, 0.3);
}
.kakemono__rod::before, .kakemono__rod::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f5e3b8, #b08d57 55%, #6f5530);
}
.kakemono__rod::before { left: -6px; }
.kakemono__rod::after { right: -6px; }
.kakemono__cloth {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 1 / 2; margin-block: -4px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'past updated' 'past statue' 'foot foot';
  column-gap: 3%;
  padding: 17% 4% 13% 5%;
  container-type: inline-size;
  color: #f4ecdf;
  background: var(--bordeaux);
  box-shadow: 18px 26px 38px -22px rgba(27, 26, 24, 0.6), 0 2px 4px rgba(27, 26, 24, 0.2);
}
/* Le titre en équerre, dans la voix du musée (Bodoni), en capitales. */
.kakemono__title { display: contents; }
/* « Updated. » tout en haut, juste au-dessus de la virgule de « The Past, », jusqu'au bord droit. */
.kakemono__updated { grid-area: updated; align-self: start; margin-top: 1.5cqw; font-family: var(--f-inscription); font-weight: 500; font-size: 16.3cqw; line-height: 0.8; letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
/* « The Past, » se lit de bas en haut, le long du bord gauche, du filet du bas jusque sous « Updated. ». Écrit
   à la verticale, il compte en largeur de toile (cqw) : en cqi, son axe serait la hauteur. Avec « Updated. », il
   encadre Zeus. */
.kakemono__past {
  grid-area: past; align-self: end; justify-self: start;
  writing-mode: vertical-rl; rotate: 180deg;
  font-family: var(--f-inscription); font-weight: 500; font-size: 23.1cqw; line-height: 0.78; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
/* Zeus remplit l'intérieur du cadre, de « Updated. » au filet du bas : l'image prend toute la hauteur de la case,
   centrée ; ses marges transparentes (la statue n'occupe que les trois quarts de sa largeur) débordent sans se voir. */
.kakemono__statue { grid-area: statue; position: relative; min-height: 0; margin-top: 1.5cqw; }
.kakemono__statue img { position: absolute; bottom: 0; left: 50%; width: auto; max-width: none; height: min(100%, 137cqw); translate: -50% 0; }
/* Au pied : le logo du musée et la mention de l'exposition. */
.kakemono__foot {
  grid-area: foot; display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqi;
  margin-top: 5cqi; padding-top: 4cqi; border-top: 1px solid rgba(244, 236, 223, 0.45);
}
.kakemono__logo { font-size: 6.4cqi; line-height: 1; }
.kakemono__credit { display: grid; justify-items: end; gap: 1.2cqi; text-align: right; }
.kakemono__kind { font-family: var(--f-inscription); font-style: italic; font-size: 5cqi; line-height: 1; }
.kakemono__dept {
  max-width: 34cqi;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 2.7cqi; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.85;
}
/* Les fourreaux cousus, en haut et en bas, où passent les tringles. */
.kakemono__sleeve { position: absolute; left: 0; right: 0; pointer-events: none; }
.kakemono__sleeve--top { top: 0; height: 5.5%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.12)); border-bottom: 1px dashed rgba(255, 240, 225, 0.3); }
.kakemono__sleeve--bottom { bottom: 0; height: 4.5%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.12)); border-top: 1px dashed rgba(255, 240, 225, 0.3); }
/* La toile : sa trame, et ses plis, qui ombrent aussi l'impression. */
.kakemono__cloth::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.07) 8%, rgba(0, 0, 0, 0.06) 21%, rgba(255, 255, 255, 0.1) 37%, rgba(0, 0, 0, 0.1) 53%, rgba(255, 255, 255, 0.06) 69%, rgba(0, 0, 0, 0.12) 85%, rgba(0, 0, 0, 0.32));
}

/* Le texte, comme un carton d'invitation : le Département qui présente, le titre de l'exposition, le chapeau, les
   boutons, puis les crédits en petit. */
.hero__text { display: grid; justify-items: center; text-align: center; }
.hero__by {
  max-width: 34em; text-wrap: balance;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.74rem; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase;
}
.hero__by .obj-i { text-transform: none; }
.hero__presents { margin-top: 0.3rem; font-family: var(--f-inscription); font-style: italic; font-size: var(--step-1); line-height: 1.3; color: var(--ink-2); }
.hero__title {
  margin-top: var(--s-2);
  font-family: var(--f-inscription); font-weight: 500;
  font-size: clamp(2.8rem, 1.4rem + 6vw, 6.4rem); line-height: 0.95; letter-spacing: -0.015em; text-wrap: balance;
}
.hero__lede {
  margin-top: var(--s-4); max-width: 34em;
  font-family: var(--f-inscription); font-style: italic; font-size: 1.02rem; line-height: 1.4; text-wrap: balance; color: var(--ink-2);
}
.hero__actions { margin-top: var(--s-4); display: grid; gap: var(--s-2); width: 100%; }
.hero__cta { width: 100%; }
/* « Visiter l'exposition → » y entre ; « Préparer sa visite ↓ » descend vers la section suivante. */
.hero__cta span { transition: translate 0.3s var(--ease-out); }
.hero__cta--enter:hover span { translate: 3px 0; }
.hero__cta--down:hover span { translate: 0 3px; }
/* Les crédits de l'exposition, en petit, sous un filet. */
.hero__credits { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid var(--rule); list-style: none; font-family: var(--f-admin); font-size: 0.74rem; line-height: 1.6; color: var(--ink-2); }

/* Téléphone : une bannière plus petite, pour que la section tienne dans l'écran. */
@media (max-width: 599px) {
  .hero__inner { gap: var(--s-4); padding-block: var(--s-4) var(--s-5); }
  .kakemono { width: min(30vw, 16svh, 13rem); }
  .hero__title { font-size: 2.5rem; }
  .hero__lede { font-size: 0.95rem; }
}
/* Petit téléphone : la bannière rapetisse encore ; les crédits, en petit, peuvent passer sous le pli. */
@media (max-width: 599px) and (max-height: 760px) {
  .kakemono { width: min(26vw, 13svh, 13rem); }
}
@media (min-width: 600px) {
  .hero__actions { display: flex; flex-wrap: wrap; justify-content: center; width: auto; }
  .hero__cta { width: auto; }
  .hero__lede { font-size: var(--step-1); }
}
/* Bureau : la bannière à gauche, le texte à droite, aligné à gauche. */
@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5.5rem); align-items: center; justify-items: stretch; }
  /* La bannière suit la hauteur de l'écran. */
  .kakemono { width: min(100%, 22rem, calc((100svh - 9rem) * 0.48)); }
  .hero__text { justify-items: start; text-align: left; container-type: inline-size; }
  .hero__actions { justify-content: flex-start; }
  .hero__title { font-size: min(6.4rem, 14cqi, 12vh); }
  .hero__lede { max-width: 30em; }
}

@supports (animation-timeline: view()) {
  @keyframes hero-in { from { opacity: 0; translate: 0 2rem; } }
  .hero__banner, .hero__text > * { animation: hero-in linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__banner, .hero__text > * { animation: none !important; }
}

/* ---------- L'entrée (plein écran, avant l'exposition) ----------
   Le hall de marbre pâli en tons d'enduit, net comme une gravure (scripts/entree.mjs), sous un voile d'enduit
   qui éclaircit l'en-tête, le centre et le bas (le bas rejoint la Cène de la section suivante). Par-dessus le voile,
   ses six statues, seules en couleur, dorées. Dans le hall, la plaque d'accueil, noire et dorée, avec le mot du
   mécène. Au chargement, le hall apparaît, puis les statues ; la plaque apparaît, puis le mot du mécène. En
   descendant, le tout s'efface et le hall glisse moins vite que la page. Sur l'accueil, l'en-tête flotte sur l'entrée,
   sans fond. */
.page-home .masthead { position: absolute; left: 0; right: 0; z-index: 3; }
.entrance {
  --gold: #c9a86a; --obj: var(--gold); --light: #f3efe6;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  min-height: calc(100svh - 2.1rem);
  padding: clamp(6.5rem, 14vh, 9rem) var(--gutter) clamp(4.5rem, 11vh, 6.5rem);
  color: var(--ink); background: var(--plaster);
}

/* Les calques, de bas en haut : le hall, le voile, les statues, le grain. Le hall et les statues ont le même
   cadrage, au pixel près. */
.entrance__art { position: absolute; inset: 0; z-index: -1; background: var(--plaster); }
.entrance__art > *, .entrance__statues > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.entrance__art img { object-fit: cover; object-position: 50% 42%; }
.entrance__veil {
  background:
    radial-gradient(ellipse 50% 40% at 50% 46%, rgba(233, 230, 223, 0.7), rgba(233, 230, 223, 0.35) 60%, rgba(233, 230, 223, 0) 100%),
    linear-gradient(180deg, rgba(233, 230, 223, 0.85), rgba(233, 230, 223, 0.3) 24%, rgba(233, 230, 223, 0.2) 60%, rgba(233, 230, 223, 0.12) 85%);
}
/* Le bas de l'entrée se fond dans l'enduit, comme le haut de la section suivante (même quand le hall glisse). */
.entrance::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 9%; pointer-events: none;
  background: linear-gradient(180deg, rgba(233, 230, 223, 0), var(--plaster));
}
.entrance__grain {
  opacity: 0.1; mix-blend-mode: overlay; pointer-events: none;
  background-image: 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Dans le hall, la plaque d'accueil, noire et dorée, dans la voix du musée : le titre de la page et son slogan,
   puis, sous un filet doré, le mot du mécène (le récit, signé). */
.entrance__inner { display: grid; justify-items: center; gap: var(--s-6); width: min(100%, 62rem); }
.entrance__plaque {
  position: relative; width: min(37rem, 100%); padding: 2.1rem 2.2rem 1.9rem; text-align: center;
  background: linear-gradient(155deg, #1b1a1c, #0c0c0d 58%, #131214);
  border: 1px solid rgba(201, 168, 106, 0.6);
  box-shadow: inset 0 0 0 7px #0d0d0e, inset 0 0 0 8px rgba(201, 168, 106, 0.3), 0 30px 50px -30px rgba(27, 26, 24, 0.6);
}
/* Les quatre rivets de la plaque. */
.entrance__plaque::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 17px 17px, #d8c08c 0 2px, rgba(0, 0, 0, 0.55) 2.6px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 17px) 17px, #d8c08c 0 2px, rgba(0, 0, 0, 0.55) 2.6px, transparent 3.6px),
    radial-gradient(circle at 17px calc(100% - 17px), #d8c08c 0 2px, rgba(0, 0, 0, 0.55) 2.6px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 17px) calc(100% - 17px), #d8c08c 0 2px, rgba(0, 0, 0, 0.55) 2.6px, transparent 3.6px);
}
.entrance__welcome { display: grid; justify-items: center; gap: 0.75rem; margin: 0; }
/* L'espacement des lettres s'ajoute aussi après la dernière : autant à gauche, pour rester au centre. */
.entrance__welcome-to {
  padding-left: 0.32em;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.78rem; line-height: 1; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.entrance__welcome-name { font-family: var(--f-inscription); font-weight: 500; font-size: clamp(2.2rem, 1.5rem + 1.7vw, 3.1rem); line-height: 1; letter-spacing: 0.01em; color: var(--light); }
.entrance__tagline { margin-top: 0.85rem; font-family: var(--f-inscription); font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.3; text-wrap: balance; color: #d9d3c7; }
/* Sous un filet doré, le mot du mécène : sa devise (une phrase par ligne sur grand écran), puis son nom et sa qualité. */
.entrance__patron { margin: 0; }
.entrance__patron::before { content: ''; display: block; width: 2.5rem; height: 1px; margin: 1.1rem auto 0.95rem; background: var(--gold); opacity: 0.8; }
.entrance__patron-quote { margin: 0; font-family: var(--f-inscription); font-style: italic; font-size: 0.98rem; line-height: 1.45; color: #c9c2b4; }
.entrance__patron-quote p { text-wrap: balance; }
.entrance__patron-sig { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.6rem; margin-top: 0.65rem; }
.entrance__patron-name {
  padding-left: 0.28em;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
}
.entrance__patron-role { font-family: var(--f-inscription); font-size: 0.88rem; color: #a9a293; }
/* « Entrer » : descend jusqu'à l'entrée de l'exposition, la section suivante. */
.entrance__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.entrance__enter span { transition: translate 0.3s var(--ease-out); }
.entrance__enter:hover span { translate: 0 3px; }
.entrance__credit {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--s-3);
  text-align: center; font-family: var(--f-admin); font-size: 0.7rem; line-height: 1.5; color: var(--ink-3);
}
.entrance__credit a { color: inherit; text-decoration-color: rgba(27, 26, 24, 0.3); }
html:has(.entrance) { scroll-behavior: smooth; }

/* Au chargement : le hall apparaît en reculant un peu, puis les statues ; la plaque apparaît, puis le mot du mécène. */
@keyframes entrance-light { from { opacity: 0; scale: 1.06; } }
@keyframes entrance-fade { from { opacity: 0; } }
@keyframes entrance-rise { from { opacity: 0; translate: 0 0.8rem; filter: blur(6px); } }
.entrance__art { animation: entrance-light 2.8s var(--ease-out) both; }
.entrance__statues { animation: entrance-fade 1.6s ease 1.1s both; }
.entrance__plaque, .entrance__actions, .entrance__credit { animation: entrance-rise 1.1s var(--ease-out) both; }
.entrance__plaque { animation-delay: 0.35s; }
.entrance__patron { animation: entrance-fade 1s ease 1.05s both; }
.entrance__actions { animation-delay: 1.4s; }
.entrance__credit { animation-delay: 1.9s; }

/* En descendant : le hall glisse moins vite que la page, le texte s'efface (navigateurs qui le savent faire). */
@supports (animation-timeline: view()) {
  @keyframes entrance-parallax { to { translate: 0 30%; } }
  @keyframes entrance-leave { to { opacity: 0; translate: 0 -3rem; } }
  .entrance { view-timeline: --entrance block; }
  .entrance__art { animation: entrance-light 2.8s var(--ease-out) both, entrance-parallax linear both; animation-timeline: auto, --entrance; animation-range: normal, exit; }
  .entrance__inner { animation: entrance-leave linear both; animation-timeline: --entrance; animation-range: exit 0% exit 60%; }
}

@media (max-width: 599px) {
  .entrance { min-height: calc(100svh - 3rem); padding-top: 5.5rem; }
  .entrance__inner { gap: var(--s-4); }
  .entrance__plaque { padding: 1.6rem 1.3rem 1.45rem; }
  .entrance__welcome-name { font-size: 2.15rem; }
  .entrance__patron-quote { font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance__art, .entrance__statues, .entrance__inner, .entrance__inner *, .entrance__inner *::before, .entrance__credit { animation: none !important; }
}

/* ---------- Le hall d'accueil (un écran, sur ordinateur) ----------
   Pour qui reste dans le hall plutôt que d'entrer dans l'exposition : le panneau d'information émaillé et le tableau
   à lettres des actualités, côte à côte ; dessous, la plaque du règlement intérieur sous le panneau, et sous le
   tableau les deux boutons : la boutique souvenir (bordeaux, comme « Visiter l'exposition »), puis la descente vers
   le musée. */
.hall { padding: var(--s-6) 0 var(--s-7); }
.hall__head { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: 1.5px solid var(--ink); margin-bottom: var(--s-5); }
.hall__title { font-family: var(--f-inscription); font-weight: 500; font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.005em; }
.hall__lede { max-width: 40ch; font-family: var(--f-inscription); font-style: italic; font-size: var(--step-1); line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.hall__walls { display: grid; gap: var(--s-5); }
.hall__foot { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.hall__actions { display: grid; gap: var(--s-2); }
@media (min-width: 700px) {
  .hall__rules { justify-self: start; }
  /* les deux boutons se partagent toute la largeur du tableau des actualités */
  .hall__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hall__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: end; }
}
@media (min-width: 1000px) {
  /* le hall tient dans l'écran, comme les deux sections d'avant */
  .hall { min-height: 100svh; display: grid; align-content: center; padding: var(--s-5) 0; }
  .hall__head { margin-bottom: var(--s-4); }
  .hall__walls { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); }
  /* dessous, calés sur les deux murs : la plaque sous le panneau, les boutons sous le tableau */
  .hall__foot { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); align-items: center; margin-top: var(--s-4); }
}

/* La plaque du règlement intérieur, émaillée et vissée comme dans le hall : le lien vers sa page. */
.hall__rules {
  position: relative; display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius);
  background: radial-gradient(130% 140% at 22% 0%, #2c2b28 0%, var(--ink) 70%);
  color: var(--paper); text-decoration: none;
  box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(247, 245, 239, 0.75), 0 14px 22px -18px rgba(0, 0, 0, 0.8);
}
.hall__rules::before, .hall__rules::after {
  content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0dcaa 0 18%, var(--brass) 45%, #6f5530 100%);
}
.hall__rules::before { left: 9px; }
.hall__rules::after { right: 9px; }
.hall__rules-title { font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; }
.hall__rules-text { font-family: var(--f-inscription); font-style: italic; font-size: 0.98rem; color: rgba(247, 245, 239, 0.78); }
.hall__rules:hover .hall__rules-title { text-decoration: underline; text-underline-offset: 0.25em; }
.hall__rules:focus-visible { outline-offset: 4px; }
/* « Visiter la boutique souvenir → » y mène ; « En savoir plus sur le musée ↓ » descend vers la section suivante. */
.hall__cta { text-align: center; }
.hall__cta span { transition: translate 0.3s var(--ease-out); }
.hall__cta--shop:hover span { translate: 3px 0; }
.hall__cta--more:hover span { translate: 0 3px; }
/* Ordinateur étroit : les libellés tiennent encore sur une ligne dans leur moitié du tableau. */
@media (min-width: 1000px) and (max-width: 1229px) {
  .hall__cta { padding-inline: 0.8rem; font-size: 0.82rem; letter-spacing: 0.06em; }
}

/* Panneau d'information émaillé, comme à l'entrée */
.infopanel { background: #fbfaf6; border: 2px solid var(--ink); border-radius: var(--radius); }
.infopanel__head {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--ink); color: #fbfaf6;
  padding: 0.7rem 1rem;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--step-1); line-height: 1.1;
}
.infopanel__pictogram {
  flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em;
  background: #fbfaf6; color: var(--ink); border-radius: var(--radius);
  font-size: 0.95em;
}
/* le i dessiné occupe la place qu'aurait le caractère (2000 unités par em) */
.infopanel__pictogram svg { width: 0.3265em; height: 1.525em; fill: currentColor; }
.infopanel__list { margin: 0; }
.infopanel__row { display: grid; gap: 0.35rem; padding: 0.95rem 1rem; border-top: 1px solid var(--rule); }
.infopanel__row:first-child { border-top: 0; }
.infopanel__row dt {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem;
}
.infopanel__n {
  flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  font-family: var(--f-sign); font-stretch: 100%; font-weight: 800; font-size: 0.78rem; letter-spacing: 0;
}
.infopanel__row dd { margin: 0; line-height: 1.5; }
@media (min-width: 600px) {
  .infopanel__row { grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: 1.25rem; align-items: baseline; padding-inline: 1.25rem; }
  .infopanel__row dt { align-self: start; }
}
@media (min-width: 1000px) {
  .infopanel { display: flex; flex-direction: column; }
  .infopanel__list { flex: 1; display: flex; flex-direction: column; }
  .infopanel__row { flex: 1; grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 1rem; padding-block: 0.6rem; }
  .infopanel__row dd { font-size: 0.95rem; line-height: 1.45; }
}

/* Fiche de poste punaisée */
.recruit {
  position: relative;
  max-width: 26rem; width: 100%;
  background: var(--paper);
  padding: 2.4rem 1.4rem 1.4rem;
  rotate: 1.2deg;
  box-shadow: 0 1px 0 rgba(27, 26, 24, 0.06), 0 16px 22px -20px rgba(27, 26, 24, 0.7);
}
.recruit__pin {
  position: absolute; top: 0.8rem; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #d8d4cc 0 12%, #6d6a64 40%, #1b1a18 100%);
  box-shadow: 1px 2px 2px rgba(27, 26, 24, 0.35);
}
.recruit__kind {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem;
  color: var(--ink-2);
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink);
}
.recruit__ref { font-family: var(--f-admin); font-weight: 400; text-transform: none; letter-spacing: 0; }
.recruit__title {
  margin-top: 1rem;
  font-family: var(--f-sign); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: var(--step-2); line-height: 1.05;
}
.recruit__text { margin-top: 0.8rem; font-family: var(--f-admin); font-size: 0.88rem; line-height: 1.6; }
/* Le tampon, en travers du coin, comme sur les vrais avis : le poste est vacant depuis 1995. */
.recruit__stamp { position: absolute; right: 1.2rem; bottom: 1.1rem; font-size: 1rem; transform: rotate(-8deg); }
/* la dernière ligne laisse la place du tampon */
.recruit__closing { margin-top: 1rem; padding: 0.7rem 5.8rem 0 0; border-top: 1px dashed var(--ink-3); font-family: var(--f-admin); font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); }

/* Tableau à lettres du hall : les actualités, une ligne par rainure */
.board {
  --pitch: 1.625rem;
  --letters: #f2eee5;
  position: relative;
  padding: var(--pitch) clamp(1rem, 4vw, 2.5rem) var(--pitch);
  color: var(--letters);
  background-color: #252321;
  /* rainures du feutre : une ligne de texte par rainure */
  background-image: repeating-linear-gradient(180deg,
    transparent 0 calc(var(--pitch) - 3px),
    rgba(0, 0, 0, 0.5) calc(var(--pitch) - 3px) calc(var(--pitch) - 1px),
    rgba(255, 255, 255, 0.055) calc(var(--pitch) - 1px) var(--pitch));
  border: 12px solid #5a4533;
  border-color: #6b523d #503d2d #43331f #5d4734;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 10px 18px -12px rgba(0, 0, 0, 0.7);
  line-height: var(--pitch);
}
.board__title {
  font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.32em;
  font-size: 0.95rem; line-height: var(--pitch); text-align: center;
  margin-bottom: var(--pitch);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.board__list { list-style: none; display: grid; gap: var(--pitch); }
.board__item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: var(--s-2); }
.board__date { font-family: var(--f-admin); font-weight: 500; font-size: 0.95rem; line-height: var(--pitch); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.board__text {
  font-family: var(--f-sign); font-stretch: 88%; font-weight: 500; letter-spacing: 0.02em;
  font-size: 0.98rem; line-height: var(--pitch);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
@media (min-width: 820px) and (max-width: 999px) {
  .board__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); }
}
@media (min-width: 1000px) {
  .board { --pitch: 1.5rem; }
}
/* Écran d'ordinateur moins haut : le hall se resserre pour tenir encore dans l'écran. */
@media (min-width: 1000px) and (max-height: 820px) {
  .hall { padding-block: var(--s-4); }
  .hall__head { padding-top: var(--s-2); margin-bottom: var(--s-3); }
  .hall__title { font-size: var(--step-3); }
  .hall__lede { font-size: 1.05rem; }
  .hall__foot { margin-top: var(--s-3); }
  .infopanel__head { padding-block: 0.5rem; font-size: 1.1rem; }
  .infopanel__row { padding-block: 0.4rem; }
  .infopanel__row dd { font-size: 0.9rem; line-height: 1.4; }
  .board { --pitch: 1.35rem; }
  .board__text { font-size: 0.92rem; }
}

/* ---------- Le musée (un écran, sur ordinateur) ----------
   Les coulisses du musée : le texte ; le mot du conservateur, sur un post-it collé au mur ; la fiche de poste
   punaisée ; puis six pièces du musée, en petit, chacune avec son cartel. */
.museum { padding: var(--s-6) 0 var(--s-7); }
.museum__head {
  display: grid; grid-template-areas: 'intro' 'note' 'recruit'; gap: var(--s-5); justify-items: center;
  padding-top: var(--s-3); border-top: 1.5px solid var(--ink); margin-bottom: var(--s-6);
}
.museum__intro { grid-area: intro; justify-self: stretch; }
.museum__title { font-family: var(--f-inscription); font-weight: 500; font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.005em; }
.museum__text { margin-top: var(--s-3); max-width: 44ch; color: var(--ink-2); text-wrap: pretty; }
.museum__head .recruit { grid-area: recruit; }

/* Le mot du conservateur, sur un post-it collé au mur, un peu de travers : un extrait de sa page, qui y renvoie. Le
   bas du papier se décolle : l'ombre y est plus longue. */
.note {
  grid-area: note; position: relative; margin: 0;
  width: min(100%, 17.5rem); min-height: 17.5rem;
  display: grid; align-content: start; gap: 0.7rem;
  padding: 1.4rem 1.35rem 0.5rem;
  background: linear-gradient(172deg, #fdf6c3 0%, #f9eea4 60%, #f4e48f 100%);
  color: var(--ink);
  rotate: -2.5deg;
  box-shadow: 0 1px 1px rgba(27, 26, 24, 0.1), 0 2px 5px -2px rgba(27, 26, 24, 0.12), 10px 18px 18px -15px rgba(27, 26, 24, 0.6);
}
.note__quote { margin: 0; font-family: var(--f-inscription); font-style: italic; font-size: 1.02rem; line-height: 1.38; text-wrap: pretty; }
.note__by { font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 0.66rem; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(27, 26, 24, 0.72); }
.note__link {
  justify-self: start; padding-block: 0.6rem;
  font-family: var(--f-sign); font-stretch: 82%; font-weight: 700; font-size: 0.7rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase;
}
.note__link:hover { color: var(--bordeaux); }
@media (min-width: 600px) and (max-width: 999px) {
  .museum__head { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'intro intro' 'note recruit'; column-gap: var(--s-5); align-items: start; }
}
@media (min-width: 1000px) {
  /* le musée tient dans l'écran, comme le hall */
  .museum { min-height: 100svh; display: grid; align-content: center; padding: var(--s-5) 0; }
  .museum__head { grid-template-columns: minmax(0, 5fr) minmax(0, 3.2fr) minmax(0, 3.8fr); grid-template-areas: 'intro note recruit'; column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-bottom: var(--s-6); }
  .note { margin-top: var(--s-3); }
  .museum__head .recruit { justify-self: end; margin-top: var(--s-2); }
}

/* Les pièces du musée, au mur, en petit : l'objet, puis son cartel (le lien couvre les deux). Les objets sont dessinés
   à l'échelle de leur place (cqi). */
.pieces { list-style: none; display: grid; gap: var(--s-4); }
.pieces__item { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-3); align-items: center; }
.pieces__object { container-type: inline-size; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.pieces__object > * { transition: translate 0.3s var(--ease-out); }
.pieces__item:hover .pieces__object > * { translate: 0 -3px; }
.pieces__cartel { display: grid; gap: 0.25rem; align-content: start; }
.pieces__title { font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 0.8rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; }
.pieces__title a { text-decoration: none; }
.pieces__title a::after { content: ''; position: absolute; inset: 0; }
.pieces__title a:focus-visible { outline: none; }
.pieces__title a:focus-visible::after { outline: 2px solid var(--bordeaux); outline-offset: 4px; }
.pieces__item:hover .pieces__title a { text-decoration: underline; text-decoration-color: var(--bordeaux); }
.pieces__arrow { display: inline-block; margin-left: 0.45em; transition: translate 0.2s var(--ease-out); }
.pieces__item:hover .pieces__arrow { translate: 3px 0; }
.pieces__text { font-size: 0.86rem; line-height: 1.42; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 600px) {
  .pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
  .pieces__item { grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start; }
  .pieces__cartel { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--ink); }
}
@media (min-width: 1000px) {
  .pieces { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 1.75rem); }
}
/* Écran d'ordinateur moins haut : le musée se resserre pour tenir encore dans l'écran. */
@media (min-width: 1000px) and (max-height: 820px) {
  .museum { padding-block: var(--s-4); }
  .museum__head { padding-top: var(--s-2); margin-bottom: var(--s-3); }
  .museum__title { font-size: var(--step-3); }
  .museum__text { font-size: 0.95rem; }
  .note { width: min(100%, 15.5rem); min-height: 15.5rem; padding: 1.1rem 1.1rem 0.35rem; gap: 0.5rem; }
  .note__quote { font-size: 0.92rem; }
  .museum__head .recruit { padding: 2rem 1.15rem 1.1rem; }
  .museum__head .recruit__text { font-size: 0.82rem; line-height: 1.5; }
  .pieces__object { aspect-ratio: 16 / 10; }
}
/* Au survol : l'étiquette des objets trouvés se balance à son clou ; le panneau de sortie vacille, un instant. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pieces__item--lost:hover .piece-tag { animation: tag-swing 1.8s ease-in-out; }
  .pieces__item--shop:hover .piece-exit { animation: exit-flicker 0.7s steps(1) 1; }
}
@keyframes tag-swing {
  0%, 100% { rotate: 7deg; }
  18% { rotate: -3deg; }
  38% { rotate: 13deg; }
  58% { rotate: 3deg; }
  78% { rotate: 9deg; }
}
@keyframes exit-flicker {
  0%, 60%, 100% { filter: none; }
  12% { filter: brightness(0.5); }
  22% { filter: brightness(1.12); }
  36% { filter: brightness(0.65); }
}

/* La collection : le constat d'état du visiteur, pincé sur sa planchette d'isorel ; une case par œuvre, noircie
   quand l'œuvre a été vue en salle (script en ligne, dans home.js). */
.piece-constat {
  position: relative; display: block;
  width: 44cqi; padding: 6.4cqi 3cqi 3cqi;
  border-radius: 2.2cqi;
  background: linear-gradient(165deg, #8a6947, #6d5135 55%, #5d4430);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 13cqi 10cqi -10cqi rgba(27, 26, 24, 0.6);
  rotate: -1.5deg;
}
.piece-constat__clip {
  position: absolute; z-index: 1; top: 1.8cqi; left: 50%; width: 22cqi; height: 6.2cqi; margin-left: -11cqi;
  border-radius: 1cqi 1cqi 2.2cqi 2.2cqi;
  background: linear-gradient(180deg, #f3f3f0, #c3c2bd 40%, #8f8e89 58%, #d3d2cd 92%, #a09f9a);
  box-shadow: 0 0.5cqi 0.8cqi rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* l'anneau du levier */
.piece-constat__clip::before {
  content: ''; position: absolute; bottom: calc(100% - 0.7cqi); left: 50%; width: 9cqi; height: 2.6cqi; margin-left: -4.5cqi;
  border: 0.8cqi solid #a8a7a2; border-bottom: 0; border-radius: 2.4cqi 2.4cqi 0 0;
}
.piece-constat__sheet {
  display: grid; justify-items: start; gap: 2cqi;
  padding: 6cqi 3.4cqi 3.6cqi;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0.3cqi 0.6cqi rgba(0, 0, 0, 0.3);
}
.piece-constat__title { justify-self: stretch; padding-bottom: 1.3cqi; border-bottom: 0.3cqi solid var(--ink); font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 2.5cqi; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.piece-constat__count { margin-top: 0.6cqi; font-family: var(--f-admin); font-weight: 500; font-size: 7cqi; line-height: 1; font-variant-numeric: tabular-nums; }
.piece-constat__sep { color: var(--ink-3); }
.piece-constat__label { margin-top: -1cqi; font-family: var(--f-admin); font-size: 2.1cqi; line-height: 1.2; color: var(--ink-2); }
.piece-constat__marks { display: flex; flex-wrap: wrap; gap: 0.5cqi; }
.piece-constat__marks span { width: 1.9cqi; aspect-ratio: 1; border: 0.35cqi solid var(--ink); }
.piece-constat__marks span.is-seen { background: var(--ink); }
/* les lignes des observations, laissées vides */
.piece-constat__lines { justify-self: stretch; height: 13.2cqi; margin-top: 0.6cqi; background: repeating-linear-gradient(180deg, transparent 0 calc(3.3cqi - 1px), rgba(27, 26, 24, 0.22) calc(3.3cqi - 1px) 3.3cqi); }

/* Les objets trouvés : une étiquette de papier kraft, suspendue à un clou par sa ficelle. */
.piece-tag { position: relative; width: 29cqi; margin-top: 13cqi; rotate: 7deg; transform-origin: 50% -12cqi; filter: drop-shadow(0 1.2cqi 1.2cqi rgba(27, 26, 24, 0.3)); }
.piece-tag::before { content: ''; position: absolute; z-index: 1; bottom: calc(100% - 7cqi); left: 50%; width: 0.6cqi; height: 19cqi; margin-left: -0.3cqi; background: #b9ab8f; border-radius: 1cqi; }
.piece-tag::after { content: ''; position: absolute; top: -13cqi; left: 50%; width: 2cqi; height: 2cqi; margin: -1cqi 0 0 -1cqi; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9d5cc, #57534c 70%); }
.piece-tag__body {
  display: grid; align-content: start; gap: 1cqi;
  aspect-ratio: 1 / 1.75; padding: 13cqi 2.6cqi 3cqi;
  background:
    radial-gradient(circle at 50% 6.8cqi, #efe4c9 0 3.4cqi, rgba(0, 0, 0, 0.12) 3.5cqi, transparent 3.7cqi),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04), transparent 40%, rgba(255, 255, 255, 0.06)),
    #d6b47a;
  clip-path: polygon(24% 0, 76% 0, 100% 13%, 100% 100%, 0 100%, 0 13%);
  -webkit-mask: radial-gradient(circle at 50% 6.8cqi, transparent 1.8cqi, #000 1.9cqi);
  mask: radial-gradient(circle at 50% 6.8cqi, transparent 1.8cqi, #000 1.9cqi);
  color: #2a241a;
}
.piece-tag__kind { padding-bottom: 1.2cqi; border-bottom: 0.3cqi solid currentColor; font-family: var(--f-sign); font-stretch: 75%; font-weight: 800; font-size: 2.9cqi; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
.piece-tag__n, .piece-tag__object, .piece-tag__place { font-family: var(--f-admin); font-size: 2.5cqi; line-height: 1.3; }
.piece-tag__object { font-weight: 500; }

/* La main courante : une page du registre relié du gardien, lignée, avec sa double marge rouge. */
.piece-log {
  display: grid; align-content: start; overflow: hidden;
  width: 52cqi; aspect-ratio: 3 / 4; padding: 4.2cqi 3cqi 3cqi;
  border-left: 2.2cqi solid #2d2b28;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 13cqi 10cqi -10cqi rgba(0, 0, 0, 0.55);
}
.piece-log__title { padding-bottom: 1.2cqi; border-bottom: 0.5cqi solid var(--ink); font-family: var(--f-sign); font-stretch: 75%; font-weight: 800; font-size: 4.1cqi; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; }
/* un filet par ligne d'écriture, d'un bord à l'autre de la page ; la marge entre l'heure et le texte */
.piece-log__entries {
  --lh: 3.4cqi; --m: calc(3cqi + 10.6cqi);
  display: grid; grid-template-columns: 10.6cqi minmax(0, 1fr); align-content: start;
  margin-inline: -3cqi; padding-inline: 3cqi;
  background:
    linear-gradient(90deg, transparent calc(var(--m) - 1.3cqi), rgba(192, 57, 43, 0.55) 0 calc(var(--m) - 1.05cqi), transparent 0 calc(var(--m) - 0.7cqi), rgba(192, 57, 43, 0.55) 0 calc(var(--m) - 0.45cqi), transparent 0),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 0.25cqi), rgba(27, 26, 24, 0.17) 0 var(--lh));
  font-family: var(--f-admin); font-size: 1.95cqi; line-height: var(--lh);
}
.piece-log__time { color: var(--ink-2); white-space: nowrap; }
.piece-log__text { padding-left: 0.4cqi; }

/* La mission : le panneau du chantier des collections, et la prochaine version. */
.piece-site {
  display: grid; justify-items: center; align-content: center;
  width: 70cqi; aspect-ratio: 3 / 2; padding: 3cqi 4cqi;
  border: 3.2cqi solid transparent;
  background: linear-gradient(#fbfaf6, #fbfaf6) padding-box, repeating-linear-gradient(135deg, var(--ink) 0 3.2cqi, var(--hazard) 3.2cqi 6.4cqi) border-box;
  color: var(--ink); text-align: center;
  box-shadow: 0 13cqi 10cqi -10cqi rgba(0, 0, 0, 0.5);
}
.piece-site__title { font-family: var(--f-sign); font-stretch: 75%; font-weight: 800; font-size: 4.6cqi; line-height: 1.05; letter-spacing: 0.04em; text-transform: uppercase; }
.piece-site__next { margin-top: 2cqi; padding-top: 2cqi; border-top: 0.4cqi solid var(--ink); font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 2.3cqi; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.piece-site__real { margin-top: 1.6cqi; font-family: var(--f-inscription); font-style: italic; font-size: 8.8cqi; line-height: 1; }

/* Les Amis du Musée : la carte de la page des Amis, en petit (sa rosace de laiton, son double cadre), sans avantages. */
.piece-member {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  width: 72cqi; aspect-ratio: 1012 / 638; padding: 5.4cqi 5.6cqi 4.6cqi;
  border-radius: 2.4cqi;
  background:
    radial-gradient(circle at 84% 56%, transparent 0 19cqi, var(--paper) 19.4cqi),
    repeating-radial-gradient(circle at 84% 56%, transparent 0 1.05cqi, rgba(176, 141, 87, 0.3) 1.05cqi 1.3cqi),
    var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(27, 26, 24, 0.08), 0 13cqi 10cqi -10cqi rgba(27, 26, 24, 0.55);
}
.piece-member::before, .piece-member::after { content: ''; position: absolute; border: solid var(--ink); }
.piece-member::before { inset: 1.5cqi; border-width: 0.3cqi; border-radius: 1.5cqi; }
.piece-member::after { inset: 2.2cqi; border-width: 0.15cqi; border-radius: 1cqi; }
.piece-member__society, .piece-member__no { padding-bottom: 1.6cqi; border-bottom: 0.25cqi solid var(--ink); }
.piece-member__society { font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 2.3cqi; line-height: 1.2; letter-spacing: 0.08em; }
.piece-member__no { padding-left: 2cqi; font-family: var(--f-admin); font-size: 1.9cqi; line-height: 1.45; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.piece-member__name { grid-column: 1 / -1; align-self: end; padding-bottom: 0.5cqi; border-bottom: 0.15cqi solid var(--ink); font-family: var(--f-inscription); font-style: italic; font-size: 6.8cqi; line-height: 1.15; }
.piece-member__perks { grid-column: 1 / -1; padding-top: 2cqi; font-family: var(--f-admin); font-size: 2.3cqi; line-height: 1.5; }

/* La boutique : le panneau de sortie, vert, lumineux, suspendu à deux câbles. */
.piece-exit {
  position: relative; display: inline-flex; align-items: center; gap: 2.4cqi;
  margin-top: 12cqi; padding: 2.6cqi 3.6cqi 2.6cqi 3cqi;
  border-radius: 1cqi;
  background: var(--exit); color: #fff;
  font-family: var(--f-sign); font-stretch: 80%; font-weight: 800; font-size: 7.2cqi; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: inset 0 0 0 0.7cqi rgba(255, 255, 255, 0.9), 0 0 9cqi rgba(14, 122, 69, 0.3), 0 13cqi 10cqi -10cqi rgba(0, 0, 0, 0.45);
}
.piece-exit svg { flex: none; width: 12.5cqi; height: auto; }
.piece-exit::before, .piece-exit::after { content: ''; position: absolute; bottom: 100%; width: 1px; height: 26cqi; background: var(--ink-3); }
.piece-exit::before { left: 16%; }
.piece-exit::after { right: 16%; }

@media (prefers-reduced-motion: reduce) {
  .pieces__object > *, .pieces__arrow, .hall__cta span { transition: none; }
}