/* Fiche publique d'une œuvre : sur le mur de sa salle (couleur a.wall), les deux versions côte à côte
   (la version précédente, photographie d'archive de l'œuvre réelle, et la version actuelle), son cartel,
   puis la notice de la base des collections et la navigation dans la collection. */

/* Fil d'Ariane (signalétique) */
.crumbs { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.crumbs__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.6rem; min-height: 44px; border-top: 1px solid var(--rule); font-family: var(--f-sign); font-stretch: 80%; font-weight: 600; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.crumbs__list li { display: inline-flex; align-items: center; }
.crumbs__list li + li::before { content: '/'; margin-right: 0.6rem; color: var(--ink-3); }
.crumbs__list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.crumbs__list a:hover { text-decoration: underline; }
.crumbs [aria-current] { font-family: var(--f-admin); font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
/* Téléphone : le numéro d'inventaire figure déjà sur le cartel ; le fil tient sur une ligne. */
@media (max-width: 479px) {
  .crumbs__list { flex-wrap: nowrap; justify-content: space-between; gap: var(--s-3); letter-spacing: 0.1em; }
  .crumbs__list li + li::before { content: none; }
  .crumbs__list li:nth-child(2) { text-align: right; line-height: 1.3; padding-block: 0.4rem; }
  .crumbs__list li:last-child { display: none; }
}

/* Le mur de la salle : cimaise en haut, plinthe en bas */
.work-wall {
  --on-wall: #f1ede4;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--wall, var(--plaster-2));
  color: var(--on-wall);
  padding: calc(var(--s-4) + 22px) var(--gutter) calc(var(--s-5) + 14px);
}
.work-wall[data-light] { --on-wall: var(--ink); }
.work-wall::before { content: ''; position: absolute; left: 0; right: 0; top: var(--s-3); height: 1px; background: var(--on-wall); opacity: 0.22; }
.work-wall::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: rgba(0, 0, 0, 0.18); border-top: 1px solid rgba(0, 0, 0, 0.12); }
.work-wall__inner { max-width: var(--wrap); margin-inline: auto; display: grid; justify-items: center; row-gap: var(--s-5); }

/* Plaque de salle (bureau seulement : sur téléphone, le fil d'Ariane la donne déjà) */
.work-room { display: none; font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-wall); border-block: 1px solid currentColor; padding: 0.45rem 0.1rem; max-width: 100%; }

/* La composition, éclairée par une applique en laiton */
.work-print { position: relative; margin: 0; width: min(100%, calc(min(55svh, 520px) * var(--ratio))); }
.work-print img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio); background: rgba(0, 0, 0, 0.18); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 30px 44px -30px rgba(0, 0, 0, 0.85); }
.work-print__lamp { position: absolute; left: 50%; top: -22px; width: 42%; height: 7px; transform: translateX(-50%); background: linear-gradient(#d4b680, #8c6c3c); border-radius: 1px 1px 3px 3px; }
.work-print__lamp::before { content: ''; position: absolute; left: 50%; top: 100%; width: 3px; height: 15px; margin-left: -1.5px; background: #7d6036; }
.work-print::after { content: ''; position: absolute; z-index: -1; left: -35%; right: -35%; top: -40px; height: 70%; background: radial-gradient(50% 60% at 50% 0%, rgba(255, 243, 219, 0.2), rgba(255, 243, 219, 0) 100%); pointer-events: none; }
.work-wall[data-light] .work-print::after { background: radial-gradient(50% 60% at 50% 0%, rgba(255, 250, 238, 0.45), rgba(255, 250, 238, 0) 100%); }

/* ---------- Les deux versions, à la même hauteur ----------
   --rb, --ra : rapports largeur / hauteur de la version précédente et de la version actuelle (works.js).
   --h : hauteur commune, la plus grande qui laisse tenir les deux images, la flèche et les marges dans la
   largeur disponible (--avail), plafonnée par la hauteur de l'écran. Le passe-partout de l'original compte
   dans cette hauteur : les deux cadres s'alignent en haut comme en bas. */
.work-wall__inner { container: wall / inline-size; }
.work-versions {
  --mat: clamp(0.35rem, 1.2cqi, 0.6rem);
  --mat-b: clamp(0.8rem, 2.2cqi, 1.1rem);
  --gap: clamp(0.4rem, 1.6cqi, 1rem);
  --arrow: clamp(1.4rem, 5cqi, 3.2rem);
  --avail: 100cqi;
  --h: min(60svh, 640px, calc((var(--avail) - 2 * var(--gap) - var(--arrow) - 2 * var(--mat)) / (var(--rb) + var(--ra)) + (var(--mat-b) + 2 * var(--mat)) * var(--rb) / (var(--rb) + var(--ra))));
  width: 100%;
  display: grid;
  grid-template-columns: auto var(--arrow) auto;
  justify-content: center;
  align-items: start;
  column-gap: var(--gap);
  row-gap: 0.9rem;
}
.work-version { margin: 0; display: grid; justify-items: center; align-content: start; gap: 0.6rem; min-width: 0; }
.work-version--before .archive__mount { padding: var(--mat) var(--mat) calc(var(--mat) + var(--mat-b)); }
.work-version--before .archive__img { height: calc(var(--h) - 2 * var(--mat) - var(--mat-b)); width: auto; max-width: none; background: rgba(0, 0, 0, 0.12); }
.work-version--before .archive__tag { font-size: clamp(0.5rem, 1.1cqi, 0.62rem); }
.work-version--after { position: relative; width: auto; isolation: isolate; }
/* Applique et halo de la version actuelle (mêmes que .work-print) : la mise à jour est éclairée, l'archive non. */
.work-version--after::after { content: ''; position: absolute; z-index: -1; left: -35%; right: -35%; top: -40px; height: 70%; background: radial-gradient(50% 60% at 50% 0%, rgba(255, 243, 219, 0.2), rgba(255, 243, 219, 0) 100%); pointer-events: none; }
.work-wall[data-light] .work-version--after::after { background: radial-gradient(50% 60% at 50% 0%, rgba(255, 250, 238, 0.45), rgba(255, 250, 238, 0) 100%); }
.work-version--after .work-version__img { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 30px 44px -30px rgba(0, 0, 0, 0.85); }
.work-version--after .work-version__img { height: var(--h); width: auto; max-width: none; aspect-ratio: var(--ra); }
.work-versions__update {
  height: var(--h);
  display: grid; align-content: center; justify-items: center; gap: 0.5rem;
  color: var(--on-wall);
}
.work-versions__arrow { font-family: var(--f-admin); font-size: clamp(1.1rem, 3cqi, 1.9rem); line-height: 1; }
.work-versions__word {
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: clamp(0.5rem, 1.25cqi, 0.7rem);
  letter-spacing: 0.14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0.8;
}
.version-label { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.1em; font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: clamp(0.6rem, 1.5cqi, 0.76rem); line-height: 1.35; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; }
.version-label__date { font-family: var(--f-admin); font-stretch: normal; font-weight: 400; letter-spacing: 0; text-transform: none; }
.work-version__label { color: var(--on-wall); }
.work-versions__credit {
  grid-column: 1 / -1; justify-self: center; max-width: 46rem; margin-top: 0.2rem;
  display: grid; gap: 0.15rem; text-align: center;
  font-family: var(--f-admin); font-size: 0.7rem; line-height: 1.5; color: var(--on-wall);
}
.work-versions__credit .archive__credit { color: inherit; opacity: 0.8; font-size: 0.66rem; }
.work-wall[data-light] .work-versions__credit .archive__credit { opacity: 1; } /* murs clairs : encre pleine */
.work-versions__credit a { color: inherit; text-decoration-color: currentColor; text-decoration-thickness: 1px; }

/* Deux paysages (la Louve) : l'un au-dessus de l'autre sur téléphone. */
@container wall (max-width: 599px) {
  .work-versions--stack { grid-template-columns: minmax(0, 1fr); }
  .work-versions--stack .work-versions__update { height: auto; display: flex; justify-content: center; align-items: center; gap: 0.6rem; }
  .work-versions--stack .work-version--after { margin-top: 24px; }
  .work-versions--stack .work-versions__arrow { transform: rotate(90deg); }
  .work-versions--stack .work-versions__word { writing-mode: horizontal-tb; transform: none; }
  .work-versions--stack .work-version--before .archive__img,
  .work-versions--stack .work-version--after .work-version__img { height: auto; width: 100%; max-width: 100%; }
  .work-versions--stack .work-version--before .archive__mount { width: 100%; }
  .work-versions--stack .work-version--after { width: 100%; }
}

/* Le cartel (papier) */
.work-label { width: 100%; max-width: 34rem; justify-self: stretch; margin-inline: auto; display: grid; gap: 0.45rem; background: var(--paper); color: var(--ink); padding: var(--s-4); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14); text-align: left; }
.work-label__inv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; font-family: var(--f-admin); font-size: 0.76rem; color: var(--ink-2); }
.work-label__title { margin-top: 0.2rem; font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.45rem); line-height: 1.06; }
.work-label__role { font-family: var(--f-inscription); font-size: 1.08rem; line-height: 1.35; }
.work-label__subject { font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.work-label__context { font-family: var(--f-inscription); font-size: 0.98rem; line-height: 1.4; color: var(--ink-2); }
.work-label__materials { margin-top: 0.3rem; padding-top: 0.65rem; border-top: 1px solid var(--rule); font-family: var(--f-admin); font-size: 0.82rem; line-height: 1.5; }
.work-label__actions { display: grid; gap: 0.6rem; margin-top: 0.7rem; }
/* La prochaine version, en vrai : un cadre en pointillés, comme un emplacement réservé (page La mission) */
.work-label__next { font-family: var(--f-admin); font-size: 0.82rem; line-height: 1.5; }
.work-label__next a { display: block; padding: 0.55rem 0.7rem 0.6rem; border: 1.5px dashed color-mix(in srgb, var(--ink) 55%, transparent); text-decoration: none; }
.work-label__next a:hover { border-style: solid; border-color: var(--ink); }
.work-label__next-name { display: block; margin-bottom: 0.1rem; font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.work-label__visit { width: 100%; }
.work-label__more { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.work-label__acquire { display: grid; align-content: center; gap: 0.1rem; min-height: 44px; padding-block: 0.2rem; text-decoration: none; }
.work-label__acquire-text { font-weight: 600; font-size: 0.93rem; line-height: 1.3; text-decoration: underline; text-decoration-color: var(--bordeaux); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.work-label__acquire:hover .work-label__acquire-text { color: var(--bordeaux); }
.work-label__price { font-family: var(--f-admin); font-size: 0.72rem; line-height: 1.4; color: var(--ink-2); }
.work-label__share { flex: none; min-height: 44px; padding: 0.5rem 0.85rem; background: transparent; border: 1px solid var(--ink); border-radius: var(--radius); font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; }
.work-label__share:hover { background: var(--ink); color: var(--paper); }

/* Bureau : l'œuvre au centre du mur, la plaque de salle à gauche, le cartel à droite à hauteur d'œil */
@media (min-width: 1000px) {
  .work-wall { padding-block: calc(var(--s-6) + 10px) calc(var(--s-6) + 14px); }
  .work-wall__inner { grid-template-columns: minmax(0, 1fr) auto minmax(20rem, 1fr); column-gap: var(--s-6); align-items: end; }
  .work-room { display: block; grid-column: 1; grid-row: 1; align-self: start; justify-self: end; }
  .work-print { grid-column: 2; grid-row: 1; width: min(calc(min(66svh, 760px) * var(--ratio)), 50vw); }
  .work-label { grid-column: 3; grid-row: 1; justify-self: start; max-width: 23rem; margin: 0; }
  .work-wall--landscape .work-room { display: none; }

  /* Les deux versions prennent le mur ; le cartel se tient à droite (en dessous pour les paysages). */
  .work-wall--versions .work-wall__inner { grid-template-columns: minmax(0, 1fr) 21rem; column-gap: var(--s-5); align-items: center; }
  .work-wall--versions .work-room { display: none; }
  .work-wall--versions .work-versions { grid-column: 1; grid-row: 1; --avail: calc(100cqi - 21rem - var(--s-5)); --h: min(62svh, 660px, calc((var(--avail) - 2 * var(--gap) - var(--arrow) - 2 * var(--mat)) / (var(--rb) + var(--ra)) + (var(--mat-b) + 2 * var(--mat)) * var(--rb) / (var(--rb) + var(--ra)))); }
  .work-wall--versions .work-version--after { width: auto; }
  .work-wall--versions .work-label { grid-column: 2; grid-row: 1; justify-self: stretch; max-width: none; }
  .work-wall--versions.work-wall--landscape .work-wall__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); }
  .work-wall--versions.work-wall--landscape .work-versions { --avail: 100cqi; --h: min(50svh, 500px, calc((var(--avail) - 2 * var(--gap) - var(--arrow) - 2 * var(--mat)) / (var(--rb) + var(--ra)) + (var(--mat-b) + 2 * var(--mat)) * var(--rb) / (var(--rb) + var(--ra)))); }
  .work-wall--versions.work-wall--landscape .work-label { grid-column: 1; grid-row: 2; max-width: 40rem; justify-self: center; }
}

/* La notice de la base des collections */
.work-record { padding: var(--s-6) var(--gutter) var(--s-6); }
@media (min-width: 860px) { .work-record { padding-top: var(--s-7); } }
.work-record__inner { max-width: var(--wrap); margin-inline: auto; display: grid; gap: var(--s-4); }
.work-record__head { display: grid; gap: 0.35rem; align-content: start; padding-top: var(--s-3); border-top: 1.5px solid var(--ink); }
.work-record__db { font-family: var(--f-admin); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.work-record__title { font-family: var(--f-sign); font-stretch: 78%; font-weight: 800; font-size: var(--step-2); line-height: 1.02; letter-spacing: 0.04em; text-transform: uppercase; }
.work-record__id { font-family: var(--f-admin); font-size: 0.8rem; line-height: 1.6; color: var(--ink-2); }
.work-record__body { border-top: 1.5px solid var(--ink); }
@media (min-width: 860px) {
  .work-record__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-6); }
  .work-record__head { position: sticky; top: var(--s-4); }
}

/* Œuvre précédente / suivante. Les deux liens partagent les trois rangées de la grille (subgrid) :
   si « Œuvre précédente » passe sur deux lignes, inventaire et nom restent alignés en face. */
.work-pager { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }
.work-pager__link { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; gap: 0.3rem; min-height: 44px; padding: var(--s-4) var(--s-3) var(--s-4) 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); text-decoration: none; }
.work-pager__link--next { justify-items: end; text-align: right; padding: var(--s-4) 0 var(--s-4) var(--s-3); border-left: 1px solid var(--rule); }
.work-pager__dir { font-family: var(--f-sign); font-stretch: 80%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.work-pager__inv { font-family: var(--f-admin); font-size: 0.74rem; color: var(--ink-2); }
.work-pager__name { font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: var(--step-2); line-height: 1.1; }
.work-pager__link:hover .work-pager__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.work-pager__link:hover .work-pager__dir { color: var(--bordeaux); }