/* ─────────────────────────────────────────────────────────────────────────────
   public/css/exhibition-page.css
   Fiches individuelles de l'exposition « Réconciliation avec le Vivant » :
   une œuvre, un artiste. Pages GÉNÉRÉES par scripts/build-exhibition-pages.js
   dans public/artworks/ et public/artists/.

   POURQUOI UNE FEUILLE ET PAS UN BLOC INLINE. Les autres pages du site portent
   leur CSS dans un <style> en tête — c'est tenable quand la page est écrite une
   fois à la main. Ici il y a QUARANTE-HUIT pages produites par un gabarit : le
   même bloc y serait recopié quarante-huit fois, et la moindre retouche
   demanderait de tout régénérer pour un changement de couleur. Une feuille
   externe, en prime, n'est téléchargée qu'une fois pour toute la visite.

   Les tokens (--paper, --ink, --rule, --accent-text) et la bascule sombre
   viennent de /css/nav-c4c.css, que ces pages chargent aussi pour leur barre de
   navigation. Rien n'est redéclaré ici : une valeur en double finit toujours
   par diverger.
   ───────────────────────────────────────────────────────────────────────────── */

.fiche {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 40px 72px;
}

/* Fil d'Ariane — c'est aussi lui qui porte le lien de remontée vers le
   catalogue. Une fiche atteinte depuis un moteur de recherche arrive sans
   historique : sans ce fil, elle est un cul-de-sac. */
.fiche-fil {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fiche-fil a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; }
.fiche-fil a:hover { color: var(--ink); border-bottom-color: currentColor; }
.fiche-fil span[aria-hidden] { color: var(--ink-4); }

/* Deux colonnes : le visuel d'un côté, le texte de l'autre. L'image reste
   collante au défilement sur grand écran — une note d'intention se lit en
   regardant l'œuvre, pas après l'avoir perdue de vue. */
.fiche-corps {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.fiche-media { margin: 0; position: sticky; top: calc(var(--nav1-h) + var(--nav2-h) + 20px); }
.fiche-media img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
/* Portrait d'artiste : cadre carré, l'image est cadrée dedans. Les 23 photos
   n'ont pas le même format (de 200×200 à 600×900) et une colonne qui change de
   hauteur d'une fiche à l'autre donne l'impression de pages mal faites. */
.fiche-media.portrait img { aspect-ratio: 1 / 1; object-fit: cover; }

.fiche-sur-titre {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.fiche-titre {
  font-family: var(--f-display);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 0 0 14px;
}
.fiche-auteur { font-family: var(--f-body); font-size: 18px; margin: 0 0 28px; }
.fiche-auteur a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid transparent; }
.fiche-auteur a:hover { border-bottom-color: currentColor; }

/* Le texte long. `lang="en"` est posé sur ce bloc dans le HTML : les notices
   viennent de la CMS d'origine et sont rédigées en anglais. Le déclarer permet
   au lecteur d'écran de changer de voix et au moteur de ne pas croire à du
   français bancal. */
.fiche-texte { font-family: var(--f-body); font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.fiche-texte p { margin: 0 0 18px; }
.fiche-texte p:last-child { margin-bottom: 0; }

/* Tableau des mentions : année, dimensions, prêteur, lieux d'exposition.
   Une liste de définitions plutôt qu'un tableau — ce sont des paires
   étiquette/valeur, pas une grille de données. */
.fiche-mentions {
  margin: 34px 0 0;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
}
.fiche-mentions dt {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  padding: 14px 28px 14px 0;
  border-bottom: 1px solid var(--rule);
}
.fiche-mentions dd {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.fiche-mentions dd a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid transparent; }
.fiche-mentions dd a:hover { border-bottom-color: currentColor; }

/* Les villes d'une œuvre sont des LIENS vers /editions/<slug> depuis que ces
   pages existent : une œuvre montrée à Paris et à Florence donne accès aux deux
   accrochages. Le sélecteur reste sur la classe, pas sur l'élément — la pastille
   a été un <span> inerte, et le jour où une édition disparaîtrait des données
   elle le redeviendrait sans que la feuille bouge. */
.fiche-villes { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-villes .ville {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 5px 10px;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
a.ville:hover { color: var(--accent-text); border-color: var(--accent-text); }

.fiche-lien-externe {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono, var(--f-body));
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 13px 24px;
  text-decoration: none;
  margin-top: 30px;
  transition: background .2s, color .2s;
}
.fiche-lien-externe:hover { background: var(--ink); color: var(--paper); }

/* ── Bloc « du même artiste » / « autres œuvres » ─────────────────────────── */
.fiche-suite { border-top: 2px solid var(--ink); margin-top: 64px; padding-top: 40px; }
.fiche-suite h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 26px;
}
.fiche-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.fiche-vignette {
  background: var(--paper);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: background .2s;
}
.fiche-vignette:hover { background: var(--paper-2); }
.fiche-vignette img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
  margin-bottom: 12px;
  background: var(--paper-2);
}
.fiche-vignette.portrait img { aspect-ratio: 1 / 1; }
.fiche-vignette b { font-family: var(--f-body); font-size: 13px; font-weight: 600; line-height: 18px; }
.fiche-vignette span {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ── Précédente / suivante ────────────────────────────────────────────────── */
/* Parcourir le catalogue sans repasser par la liste. L'ordre est celui de
   reconciliation.json, c'est-à-dire l'accrochage voulu par le commissariat. */
.fiche-pagination {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--rule);
  margin-top: 48px;
  padding-top: 22px;
}
.fiche-pagination a {
  font-family: var(--f-mono, var(--f-body));
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  max-width: 45%;
}
.fiche-pagination a:hover { color: var(--ink); }
.fiche-pagination a:last-child { text-align: right; }
.fiche-pagination b { display: block; font-family: var(--f-body); font-size: 14px; font-weight: 500;
                      text-transform: none; letter-spacing: 0; color: var(--ink); margin-top: 5px; }

@media (max-width: 900px) {
  .fiche-corps { grid-template-columns: 1fr; gap: 32px; }
  .fiche-media { position: static; }
}
@media (max-width: 767px) {
  .fiche { padding: 32px 16px 56px; }
  .fiche-mentions { grid-template-columns: 1fr; }
  .fiche-mentions dt { padding-bottom: 0; border-bottom: 0; }
  .fiche-mentions dd { padding-top: 6px; }
}