/* Notice d'œuvre — gabarit « base des collections ».
   La notice suit la largeur de son conteneur (requêtes de conteneur) : tiroir étroit de la visite
   ou colonne large de la fiche publique. Fond transparent. Un conteneur sombre peut surcharger
   --n-ink, --n-ink-2, --n-rule et --n-strong (ex. .drawer .notice { --n-ink: var(--paper); … }). */

.notice {
  --n-ink: var(--ink);
  --n-ink-2: var(--ink-2);
  --n-rule: var(--rule);
  --n-strong: var(--ink);
  container: notice / inline-size;
  color: var(--n-ink);
  font-family: var(--f-sign);
}

/* En-tête : inventaire (administration), titre (inscription), sujet (signalétique) */
.notice__head { display: grid; gap: 0.55rem; padding-bottom: var(--s-4); border-bottom: 1.5px solid var(--n-strong); }
.notice__inv { display: flex; flex-wrap: wrap; gap: 0.2rem 0; font-family: var(--f-admin); font-size: 0.76rem; line-height: 1.5; color: var(--n-ink-2); }
.notice__inv span { white-space: nowrap; }
.notice__inv span + span::before { content: ''; display: inline-block; width: 1px; height: 0.8em; margin: 0 0.7em; background: var(--n-rule); vertical-align: -0.05em; }
/* Étroit : le numéro d'inventaire seul sur sa ligne, salle et piste dessous */
.notice__inv span:first-child { flex-basis: 100%; }
.notice__inv span:nth-child(2)::before { display: none; }
.notice__title { font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 1.25rem + 3.2cqi, 2.5rem); line-height: 1.08; letter-spacing: -0.005em; text-wrap: balance; }
.notice__context { font-family: var(--f-inscription); font-size: 1rem; line-height: 1.4; color: var(--n-ink-2); }
.notice__subject { font-stretch: 78%; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--n-ink-2); }
/* Définition de la figure, sous le titre : la voix de l'institution, sans un mot de trop. */
.notice__role { font-family: var(--f-inscription); font-size: 1.05rem; line-height: 1.4; color: var(--n-ink-2); }

/* Vignette facultative */
.notice__image { margin: var(--s-4) 0 0; width: 6.5rem; }
.notice__image img { width: 100%; height: auto; outline: 1px solid var(--n-rule); outline-offset: -1px; }

/* Champs de la fiche : une ligne par champ, sur filets fins */
.notice__facts { margin: 0; }
.notice__row { display: grid; gap: 0.2rem; padding: 0.85rem 0 0.9rem; border-bottom: 1px solid var(--n-rule); }
.notice__label { font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--n-ink-2); line-height: 1.5; }
.notice__value { margin: 0; font-size: 0.97rem; line-height: 1.5; }
.notice__materials { display: block; font-weight: 600; }
.notice__extra { display: block; margin-top: 0.2rem; font-family: var(--f-admin); font-size: 0.8rem; color: var(--n-ink-2); }
.notice__row--condition .notice__value { font-family: var(--f-admin); font-size: 0.86rem; }

/* Texte de la notice */
.notice__text { max-width: var(--measure); }
.notice__text p { font-size: 1rem; line-height: 1.62; }
.notice__text p + p { margin-top: 0.85em; }

/* Sources repliées */
.notice__sources { border-bottom: 1px solid var(--n-rule); }
.notice__sources summary { display: flex; align-items: center; gap: 0.8rem; min-height: 48px; padding: 0.35rem 0; cursor: pointer; list-style: none; }
.notice__sources summary::-webkit-details-marker { display: none; }
.notice__sources summary::after { content: '+'; margin-left: auto; font-family: var(--f-admin); font-size: 1.05rem; line-height: 1; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid var(--n-rule); border-radius: var(--radius); }
.notice__sources[open] summary::after { content: '\2212'; }
.notice__sources summary:hover .notice__label { color: var(--n-ink); }
.notice__count { font-family: var(--f-admin); font-size: 0.74rem; color: var(--n-ink-2); }
.notice__sources ul { list-style: none; display: grid; padding: 0 0 var(--s-2); }
.notice__sources a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.93rem; line-height: 1.35; text-decoration-color: var(--n-rule); }
.notice__sources a:hover { text-decoration-color: currentColor; }
.notice__sources a::after { content: '\2197' / ''; flex: none; margin-left: 0.45em; font-family: var(--f-admin); font-size: 0.8em; }

/* Mention de l'auteur */
.notice__composition { padding-top: var(--s-3); font-family: var(--f-admin); font-size: 0.74rem; line-height: 1.5; color: var(--n-ink-2); }

/* Conteneur large : libellés en colonne, comme une fiche d'inventaire */
@container notice (min-width: 34rem) {
  .notice__inv span:first-child { flex-basis: auto; }
  .notice__inv span:nth-child(2)::before { display: inline-block; }
  .notice__row { grid-template-columns: 10.5rem minmax(0, 1fr); gap: var(--s-4); padding: 0.95rem 0 1rem; }
  .notice__label { padding-top: 0.2rem; }
  .notice__sources summary { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) auto; gap: var(--s-4); }
  .notice__sources summary::after { margin-left: 0; }
  .notice__sources ul { padding-left: calc(10.5rem + var(--s-4)); }
  .notice__composition { padding-left: calc(10.5rem + var(--s-4)); }
  .notice--with-image .notice__head { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); }
  .notice--with-image .notice__head > * { grid-column: 1; }
  .notice--with-image .notice__head > .notice__image { grid-column: 2; grid-row: 1 / span 4; margin: 0; align-self: start; }
}
@container notice (min-width: 46rem) {
  .notice__row { grid-template-columns: 12.5rem minmax(0, 1fr); }
  .notice__sources summary { grid-template-columns: 12.5rem minmax(0, 1fr) auto; }
  .notice__sources ul, .notice__composition { padding-left: calc(12.5rem + var(--s-4)); }
  .notice__text p:first-child { font-size: 1.08rem; }
}

/* ---------- Version précédente : photographie d'archive et historique des versions ----------
   Partagés par la notice (vignette), la fenêtre de la visite et la fiche d'œuvre (src/templates/original.js).
   L'original est une épreuve d'archive épinglée sur un passe-partout de papier, posée sur l'enduit ;
   la composition est accrochée sur le mur de sa salle (--wall). Pas d'inclinaison, pas d'effet. */

.archive { margin: 0; }
.archive__mount {
  position: relative;
  padding: var(--mat, 0.3rem) var(--mat, 0.3rem) calc(var(--mat, 0.3rem) + var(--mat-b, 0px));
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(27, 26, 24, 0.12), 0 10px 18px -12px rgba(27, 26, 24, 0.5);
}
.archive__img { display: block; }
/* Épingle en laiton, au milieu du bord supérieur du passe-partout. */
.archive__mount::before {
  content: ''; position: absolute; left: 50%; top: calc(var(--mat, 0.3rem) / 2);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3dfb0, var(--brass) 55%, #6f5530);
  box-shadow: 0 1px 1.5px rgba(27, 26, 24, 0.45);
}
/* Étiquette d'archive, tapée à la machine sur la marge basse du passe-partout. */
.archive__tag {
  position: absolute; left: var(--mat); bottom: calc((var(--mat) + var(--mat-b) - 0.62rem) / 2);
  font-family: var(--f-admin); font-size: 0.62rem; line-height: 1; color: var(--ink-2); white-space: nowrap;
}
.archive__caption { display: grid; gap: 0.35rem; max-width: 38rem; }
.archive__text { font-family: var(--f-sign); font-size: 0.95rem; line-height: 1.5; color: var(--n-ink, var(--ink)); }
.archive__credit { font-family: var(--f-admin); font-size: 0.72rem; line-height: 1.5; color: var(--n-ink-2, var(--ink-2)); }
.archive__credit a { color: inherit; text-decoration-color: var(--rule); }
.archive__credit a:hover { text-decoration-color: currentColor; }
/* Référence provisoire (image à remplacer par une image libre) : mention discrète, filet pointillé. */
.archive__credit--provisional { justify-self: start; padding: 0.1rem 0.45rem; border: 1px dashed var(--rule); border-radius: var(--radius); }

/* Dans la notice : vignette à gauche, légende et crédit à droite. */
.archive--thumb { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.4rem var(--s-3); align-items: start; }
.archive--thumb .archive__mount { box-shadow: 0 0 0 1px var(--n-rule, var(--rule)), 0 8px 14px -10px rgba(27, 26, 24, 0.45); }
.archive--thumb .archive__mount::before { display: none; }
.archive--thumb .archive__img { width: 100%; height: auto; }
.archive--thumb .archive__text { font-size: 0.93rem; }
.notice__row--original .notice__value p { font-size: 0.97rem; line-height: 1.5; }
.notice__row--original .notice__value .archive__credit { margin-top: 0.3rem; font-size: 0.72rem; }
.notice__compared { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-sign); font-stretch: 85%; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration-color: var(--n-rule); }
.notice__compared::before { content: '\2191' / ''; margin-right: 0.45em; font-family: var(--f-admin); }
.notice__compared:hover { text-decoration-color: currentColor; }

/* Historique des versions : deux panneaux, l'un sous l'autre ; côte à côte dès que le conteneur le permet.
   Chaque « plaque » prend la hauteur de son image à la largeur du panneau (--own = largeur / hauteur),
   plafonnée ; côte à côte, les deux plaques prennent la même hauteur (--ar, le rapport le plus large). */
.compare { container: compare / inline-size; --mount: 0.6rem; --mount-b: 1rem; } /* marges du passe-partout : côtés, bas (étiquette) */
.compare__grid { display: grid; gap: var(--s-5); }
.compare__panel { container: panel / inline-size; min-width: 0; display: grid; align-content: start; gap: 0.75rem; }
.compare__label {
  display: flex; flex-wrap: wrap; gap: 0 0.4em; padding-bottom: 0.45rem; border-bottom: 1.5px solid var(--ink);
  font-family: var(--f-sign); font-stretch: 78%; font-weight: 700; font-size: 0.74rem; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase;
}
.compare__label .version-label__date { font-family: var(--f-admin); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.compare figure { margin: 0; }
.compare__plate {
  --pad: clamp(0.75rem, 5cqi, 1.75rem);
  --mat: 0px;
  --mat-b: 0px;
  --r: var(--own);
  --cap: 64svh;
  --ph: min(var(--cap), calc((100cqi - 2 * var(--pad) - 2 * var(--mat)) / var(--r) + 2 * var(--pad) + 2 * var(--mat) + var(--mat-b)));
  height: var(--ph);
  display: grid; place-items: center;
  padding: var(--pad);
  border-radius: var(--radius);
}
.compare__plate--before { --mat: var(--mount); --mat-b: var(--mount-b); background: var(--plaster); box-shadow: inset 0 0 0 1px rgba(27, 26, 24, 0.08); }
.compare__plate--before .archive__mount { max-width: 100%; }
.compare__plate--before .archive__img { width: auto; height: auto; max-width: 100%; max-height: calc(var(--ph) - 2 * var(--pad) - 2 * var(--mat) - var(--mat-b)); }
.compare__plate--after { background: var(--wall, var(--plaster-2)); }
.compare__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(var(--ph) - 2 * var(--pad)); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 24px 36px -26px rgba(0, 0, 0, 0.85); }
.compare .archive__caption { margin-top: 0.8rem; }
.compare__title { font-family: var(--f-inscription); font-style: italic; font-weight: 500; font-size: 1.15rem; line-height: 1.25; }
.compare__role { font-family: var(--f-inscription); font-size: 0.98rem; line-height: 1.35; color: var(--ink-2); }

@container compare (min-width: 40rem) {
  .compare__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-4); }
  /* Même hauteur pour les deux plaques : même rapport (--ar) et mêmes marges (celles du passe-partout). */
  .compare__plate {
    --r: var(--ar);
    --cap: clamp(18rem, calc(100svh - 25rem), 40rem);
    --ph: min(var(--cap), calc((100cqi - 2 * var(--pad) - 2 * var(--mount)) / var(--r) + 2 * var(--pad) + 2 * var(--mount) + var(--mount-b)));
  }
}