/* Accrochage des treize œuvres, page « La collection ».
   Chaque œuvre est accrochée sur un pan du mur de sa salle (--wall). Tant qu'elle n'a pas été
   vue en salle, elle reste sous une bâche de restauration, ficelée, avec son étiquette. */

/* ---------- La grille ----------
   13 œuvres + un registre (dernier emplacement) qui occupe les colonnes restantes :
   la dernière rangée est toujours pleine. */
.hangs {
  --cols: 2; --rest: 1; --gap: 0.625rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
}
.hangs__end { grid-column: span var(--rest); display: flex; container-type: inline-size; }

@media (min-width: 600px) {
  .hangs--full { --cols: 3; --rest: 2; --gap: 0.875rem; }
}
@media (min-width: 900px) {
  .hangs--full { --cols: 4; --rest: 3; --gap: 1rem; }
}

/* ---------- Un accrochage ---------- */
.hang { container-type: inline-size; display: flex; }
.hang__link { flex: 1; display: flex; text-decoration: none; color: var(--ink); border-radius: var(--radius); }
.hang__link:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.hang__wall {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  padding: 11cqi 8cqi 8cqi;
  background: var(--wall);
  overflow: hidden;
  /* léger jour zénithal sur le mur */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.06));
}
.hangs--full .hang__wall { padding-top: max(16cqi, 2.7rem); }

/* Nom de la salle, peint au pochoir en haut du mur (collection seulement) */
.hang__room {
  position: absolute; top: 5cqi; left: 7cqi; right: 7cqi;
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: clamp(0.62rem, 4.4cqi, 0.8rem); line-height: 1.2;
  color: rgba(247, 245, 239, 0.86);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.hang--light .hang__room { color: var(--ink); } /* encre pleine : lisible sur tous les murs clairs, y compris l'ocre */

/* L'emplacement du cadre : un format portrait fixe, pour que tout s'aligne sur la même ligne d'accrochage */
.hang__slot { position: relative; z-index: 1; width: 60cqi; aspect-ratio: 2 / 3; margin-inline: auto; flex: none; }

.hang__frame {
  position: absolute; inset: 0;
  border: max(3px, 2.4cqi) solid #1d1b19;
  background: #2b2926;
  box-shadow: inset 0 0 0 1px rgba(176, 141, 87, 0.45), 0 1px 0 rgba(0, 0, 0, 0.18), 0 9px 14px -10px rgba(0, 0, 0, 0.65);
}
.hang__img { width: 100%; height: 100%; object-fit: cover; }
.hang[data-state='covered'] .hang__img { visibility: hidden; }

/* Paysage (la Brebis capitoline) : même ligne d'accrochage, cadre plus large que l'emplacement */
.hang--landscape :is(.hang__frame, .tarp) { inset: 17.3% -23% auto -23%; height: 65.4%; }

/* Pied : cartel de l'œuvre vue */
.hang__foot { flex: 1 0 auto; min-height: 38cqi; display: flex; justify-content: center; align-items: flex-start; padding-top: 7cqi; }
.hang__cartel {
  display: grid; gap: 1.4cqi;
  width: fit-content; max-width: 100%;
  background: var(--paper); color: var(--ink);
  padding: 3.4cqi 4.4cqi 4cqi;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.hang__inv { font-family: var(--f-admin); font-size: clamp(0.62rem, 5cqi, 0.78rem); color: var(--ink-2); letter-spacing: 0; }
.hang__n { font-weight: 500; color: var(--ink); }
.hang__title { font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: clamp(0.8rem, 7.4cqi, 1.2rem); line-height: 1.15; text-wrap: balance; }
/* Définition de la figure, sous le titre. */
.hang__role { font-family: var(--f-inscription); font-size: clamp(0.7rem, 5.6cqi, 0.9rem); line-height: 1.3; color: var(--ink-2); text-wrap: pretty; }
.hang__link:hover .hang__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hang[data-state='covered'] .hang__cartel { display: none; }

/* ---------- La version précédente, épinglée ----------
   Sous bâche : l'épreuve d'archive de l'œuvre réelle est épinglée sur la bâche, au-dessus de la cordelette.
   Bâche tombée : elle reste glissée dans le coin bas du cadre, un peu de travers, à côté de la mise à jour. */
.hang__before {
  position: absolute; z-index: 2; left: 50%; top: 5%;
  display: block; padding: 1.3cqi 1.3cqi 3cqi;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(27, 26, 24, 0.14), 0 5px 8px -5px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%) rotate(-2.5deg);
  transition: transform 0.35s var(--ease-out);
}
.hang__before::before { /* épingle */
  content: ''; position: absolute; left: 50%; top: 0.3cqi; width: 2.2cqi; height: 2.2cqi; margin-left: -1.1cqi; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3dfb0, var(--brass) 55%, #6f5530);
}
.hang__before-img { display: block; height: 21cqi; width: auto; max-width: 30cqi; object-fit: cover; }
.hang--landscape .hang__before { top: -8%; }
.hang[data-state='seen'] .hang__before { left: auto; right: -9cqi; top: auto; bottom: -5cqi; transform: rotate(4deg); }
.hang[data-state='seen'] .hang__before::before { display: none; }
.hang[data-state='seen'] .hang__before-img { height: 17cqi; max-width: 24cqi; }
.hang--landscape[data-state='seen'] .hang__before { right: -17cqi; bottom: 12cqi; }
.hang.is-unveiling .hang__before, .hang.is-covering .hang__before { transition: none; }
@media (hover: hover) {
  .hang__link:hover .hang__before { transform: translateX(-50%) rotate(0.5deg); }
  .hang[data-state='seen'] .hang__link:hover .hang__before { transform: rotate(1deg); }
}

/* ---------- La bâche ---------- */
.tarp { position: absolute; inset: 0; }
.hang[data-state='seen'] .tarp { display: none; }

/* Le drap est tendu sur la face du cadre (plis de tension partant des coins supérieurs),
   puis retombe librement sous le cadre en une jupe aux plis irréguliers. */
.tarp__cloth {
  position: absolute; inset: -4% -9% -19% -9%;
  border-radius: 3px 3px 0 0;
  background:
    /* arête supérieure du cadre sous le tissu */
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0 1.2%, rgba(0, 0, 0, 0.1) 3%, transparent 6%),
    /* le drap déborde du cadre et tombe sur les côtés */
    linear-gradient(90deg, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.06) 6%, transparent 10.5%, transparent 89.5%, rgba(0, 0, 0, 0.07) 94%, rgba(0, 0, 0, 0.3)),
    /* plis de tension depuis les coins */
    linear-gradient(118deg, transparent 12%, rgba(0, 0, 0, 0.07) 17%, rgba(255, 255, 255, 0.05) 20%, transparent 25%),
    linear-gradient(-118deg, transparent 14%, rgba(0, 0, 0, 0.06) 19%, rgba(255, 255, 255, 0.05) 22%, transparent 27%),
    linear-gradient(136deg, transparent 4%, rgba(0, 0, 0, 0.08) 7%, transparent 10%),
    linear-gradient(-136deg, transparent 5%, rgba(0, 0, 0, 0.07) 8%, transparent 11%),
    /* jour zénithal */
    linear-gradient(180deg, #bfbcb5, #adaaa3 55%, #9d9a93);
}
/* La jupe, sous le bas du cadre */
.tarp__cloth::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 21%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.06) 9%, transparent 22%),
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.26) 0, rgba(0, 0, 0, 0.1) 4%, rgba(255, 255, 255, 0.1) 9%, rgba(0, 0, 0, 0.16) 15%,
      transparent 20%, rgba(255, 255, 255, 0.12) 28%, rgba(0, 0, 0, 0.13) 35%, transparent 40%,
      rgba(255, 255, 255, 0.09) 49%, rgba(0, 0, 0, 0.17) 57%, rgba(255, 255, 255, 0.1) 65%,
      rgba(0, 0, 0, 0.1) 72%, rgba(255, 255, 255, 0.11) 79%, rgba(0, 0, 0, 0.18) 88%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, #aba8a1, #97948d);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 95% 93%, 88% 88%, 79% 97%, 70% 91%, 61% 100%, 51% 92%, 41% 97%, 33% 89%, 24% 99%, 15% 91%, 7% 96%, 0 89%);
}

/* Cordelette nouée autour de la bâche */
.tarp__cord {
  position: absolute; left: -9%; right: -9%; top: 31%; height: 5%;
  border-bottom: max(1.5px, 0.9cqi) solid #cbb98f;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
}
.tarp__cord::before { /* ficelle de l'étiquette */
  content: ''; position: absolute; left: 50%; top: calc(100% - 1px); width: max(1px, 0.5cqi); height: 8cqi;
  background: #cbb98f; transform: translateX(-50%);
}
.tarp__cord::after { /* nœud */
  content: ''; position: absolute; left: 50%; bottom: 0; width: 3.6cqi; height: 3.6cqi; border-radius: 50%;
  background: #cbb98f; box-shadow: inset -0.6cqi -0.6cqi 0 rgba(0, 0, 0, 0.22);
  transform: translate(-50%, 50%);
}

/* Étiquette de constat, pendue à la ficelle */
.tarp__tag {
  --hole: 3.4cqi;
  position: absolute; left: 50%; top: calc(36% + 8cqi - var(--hole));
  width: 72cqi; margin-left: -36cqi;
  display: grid; justify-items: center; gap: 1cqi;
  padding: calc(var(--hole) * 2 + 1.2cqi) 3.6cqi 4cqi;
  background: var(--paper);
  text-align: center;
  clip-path: polygon(14% 0, 86% 0, 100% 10%, 100% 100%, 0 100%, 0 10%);
  -webkit-mask: radial-gradient(circle at 50% var(--hole), transparent 1.1cqi, #000 1.3cqi);
  mask: radial-gradient(circle at 50% var(--hole), transparent 1.1cqi, #000 1.3cqi);
  transform: rotate(-4deg);
  transform-origin: 50% var(--hole);
  transition: transform 0.35s var(--ease-out);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.tarp__status {
  font-family: var(--f-sign); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: clamp(0.625rem, 5.4cqi, 0.8rem); line-height: 1.15; color: var(--ink);
  padding-bottom: 1.4cqi; border-bottom: 1px solid var(--rule); width: 100%;
}
.tarp__inv { font-family: var(--f-admin); font-size: clamp(0.64rem, 5.2cqi, 0.8rem); color: var(--ink-2); line-height: 1.2; }
.tarp__figure { font-family: var(--f-inscription); font-weight: 500; font-size: clamp(0.85rem, 7.6cqi, 1.25rem); line-height: 1.1; color: var(--ink); text-wrap: balance; }
.hang--landscape .tarp__cloth { inset: -6% -5% -28% -5%; }
.hang--landscape .tarp__cloth::after { height: 26%; }
.hang--landscape .tarp__cord { top: 20%; left: -5%; right: -5%; }
.hang--landscape .tarp__cord::before { height: 5cqi; }
.hang--landscape .tarp__tag { top: calc(25% + 5cqi - var(--hole)); width: 64cqi; margin-left: -32cqi; }

@media (hover: hover) {
  .hang__link:hover .tarp__tag { transform: rotate(1.5deg); }
}

/* Dévoilement : la ficelle se défait, la bâche tombe. */
.hang.is-unveiling .tarp { display: block; animation: tarp-off 700ms cubic-bezier(0.5, 0, 0.75, 0.3) forwards; }
.hang.is-unveiling .hang__cartel { animation: cartel-in 240ms 520ms both; }
.hang.is-covering .tarp { animation: tarp-on 520ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes tarp-off {
  0% { transform: translateY(0); }
  14% { transform: translateY(-2.5%); }
  100% { transform: translateY(190%) rotate(2deg); }
}
@keyframes tarp-on {
  0% { transform: translateY(-150%); }
  82% { transform: translateY(1.5%); }
  100% { transform: translateY(0); }
}
@keyframes cartel-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Le registre (dernier emplacement) ---------- */
.ledger {
  flex: 1;
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--paper); color: var(--ink);
  border-top: 3px solid var(--ink);
  padding: 0.9rem 0.9rem 1rem;
  font-family: var(--f-admin);
}
.ledger__status {
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; color: var(--ink-2);
}
.ledger__count { font-family: var(--f-admin); font-weight: 500; font-size: clamp(1.7rem, 15cqi, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; margin-top: 0.4rem; }
.ledger__sep { color: var(--ink-3); }
.ledger__label { font-size: 0.8rem; line-height: 1.35; color: var(--ink-2); }
.ledger__note { font-size: 0.8rem; line-height: 1.45; color: var(--ink-2); margin-top: 0.6rem; max-width: 40ch; }
.ledger__actions { margin-top: auto; padding-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.ledger__link {
  margin-top: auto;
  display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start;
  font-family: var(--f-sign); font-stretch: 82%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.35em;
}
.ledger__actions .ledger__link { margin-top: 0; }
.ledger__link:hover { color: var(--bordeaux); }
.ledger__reset { min-height: 44px; padding: 0.6rem 1rem; font-size: 0.8rem; }

/* Cases du procès-verbal : une par œuvre, cochée quand elle a été vue en salle */
.ledger__marks { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 0.8rem)); gap: 0.3rem; margin-top: 0.7rem; }
.ledger__marks li { aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 1px; }
.ledger__marks li.is-seen { background: var(--ink); }

@container (min-width: 420px) {
  .ledger {
    display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
    column-gap: 2.5rem; align-content: stretch; padding: 1.1rem 1.4rem 1.3rem;
  }
  .ledger__status { grid-column: 1 / -1; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
  .ledger__count { grid-column: 1; grid-row: 2; margin-top: 1rem; }
  .ledger__label { grid-column: 1; grid-row: 3; }
  .ledger__marks { grid-column: 2; grid-row: 2; align-self: end; grid-template-columns: repeat(13, minmax(0, 1rem)); margin-top: 1rem; margin-bottom: 0.35rem; }
  .ledger__note { grid-column: 2; grid-row: 3; margin-top: 0.2rem; }
  .ledger__actions, .ledger > .ledger__link { grid-column: 1 / -1; grid-row: 4; align-self: end; }
  .ledger__actions { padding-top: 1.5rem; }
}

/* ---------- Page « La collection » ---------- */
.collection-page__head { display: grid; gap: var(--s-3); padding-block: var(--s-6) var(--s-5); }
.collection-page__title { font-family: var(--f-inscription); font-weight: 500; font-size: var(--step-5); line-height: 0.95; letter-spacing: -0.01em; }
.collection-page__intro { max-width: 46ch; font-size: var(--step-1); line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) {
  .collection-page__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-6); align-items: end; padding-block: var(--s-7) var(--s-6); }
  .collection-page__head .eyebrow { grid-column: 1 / -1; }
  .collection-page__intro { padding-bottom: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tarp__tag, .hang__before { transition: none; }
}