/* La photothèque.
 *
 * Une galerie patrimoniale : les photographies portent la page, le texte se
 * tient à côté. Aucune pastille, aucun identifiant, aucun état — le fonds
 * garde sa comptabilité pour lui.
 *
 * La grille se construit en `auto-fill` avec un minimum en `min()`, pour que
 * la tuile ne déborde jamais sur un écran étroit. Chaque image porte ses
 * dimensions et un `aspect-ratio` fixe : la place est réservée avant le
 * chargement, et la page ne saute pas sous les yeux du lecteur.
 */

.vhero--ph { background: var(--paper-deep, #efe6d8); }

.ph-serie { padding-top: var(--s-lg); }
.ph-serie__t { margin-bottom: var(--s-2xs); }
.ph-serie__note {
  color: var(--ink-muted); font-size: var(--text-sm);
  max-width: var(--measure); margin: 0 0 var(--s-md);
}

.ph-grille {
  display: grid; gap: var(--s-md);
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
}

.ph-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--paper-card); border: 1px solid var(--rule);
  border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--sh-paper);
  transition: transform var(--d-mid) var(--ease-out), box-shadow var(--d-mid) var(--ease-out);
}
.ph-card:hover, .ph-card:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-lift); }
.ph-card__vue { display: block; background: var(--paper-deep); }
.ph-card__img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; background: var(--paper-deep);
}
.ph-card__txt {
  display: block; padding: var(--s-xs) var(--s-sm) var(--s-sm);
  font-size: var(--text-sm); line-height: 1.45; color: var(--ink-soft);
}

/* ─────────────────────────────────────────────── la fiche d'une photographie */

.ph-fiche { padding-bottom: var(--s-lg); }
.ph-scene {
  margin: var(--s-md) 0 0; background: var(--paper-deep);
  border: 1px solid var(--rule-strong); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--sh-paper);
}
.ph-scene__img {
  display: block; width: 100%; height: auto; max-height: 78vh;
  object-fit: contain; background: var(--paper-deep);
}
.ph-scene__leg { padding: var(--s-sm) var(--s-md); }
.ph-scene__quoi {
  margin: 0; font-family: var(--font-display); font-size: var(--text-lg);
  line-height: 1.25; color: var(--ink);
}
.ph-scene__ou { margin: .2rem 0 0; font-size: var(--text-sm); color: var(--ink-muted); }

.ph-fiche__note {
  margin: var(--s-md) 0 0; max-width: var(--measure);
  font-size: var(--text-sm); color: var(--ink-muted);
}

.ph-nav {
  display: grid; gap: var(--s-sm); align-items: start;
  grid-template-columns: 1fr auto 1fr;
  margin-top: var(--s-lg); padding-top: var(--s-sm);
  border-top: 1px solid var(--rule); font-size: var(--text-sm);
}
.ph-nav__lien { text-decoration: none; color: inherit; display: block; min-width: 0; }
.ph-nav__lien span { display: block; color: var(--ink-muted); font-size: var(--text-xs); }
.ph-nav__lien b {
  display: block; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ph-nav__lien--suiv { text-align: right; }
.ph-nav__lien.is-off { color: var(--ink-muted); }
.ph-nav__retour { white-space: nowrap; align-self: center; }

/* ───────────────────────── la fiche de travail, réservée aux membres ───── */

.ph-travail {
  margin-top: var(--s-lg); border: 1px dashed var(--rule-strong);
  border-radius: var(--r-sm); padding: var(--s-xs) var(--s-sm);
}
.ph-travail summary { cursor: pointer; color: var(--ink-muted); font-size: var(--text-sm); }
.ph-travail__corps { padding-top: var(--s-xs); }
.ph-travail h3 { font-size: var(--text-md); margin: var(--s-sm) 0 var(--s-2xs); }
.ph-hyp__item { padding: var(--s-2xs) 0; border-bottom: 1px solid var(--rule); }
.ph-hyp__item:last-child { border-bottom: 0; }
.ph-hyp__quoi { margin: .15rem 0; font-style: italic; color: var(--ink-soft); }
.ph-hyp__pour, .ph-hyp__contre { margin: .15rem 0; font-size: var(--text-sm); color: var(--ink-muted); }
.ph-hyp__contre { color: var(--st-uncertain, #b06b2a); }
.ph-ident { margin: 0; padding-left: 1.1rem; }
.ph-fiche-tech { margin: 0; display: grid; gap: .15rem; }
.ph-fiche-tech > div { display: flex; gap: .5rem; font-size: var(--text-sm); align-items: baseline; }
.ph-fiche-tech dt { color: var(--ink-muted); flex: 0 0 10rem; margin: 0; }
.ph-fiche-tech dd { margin: 0; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .ph-grille { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--s-sm); }
  .ph-nav { grid-template-columns: 1fr; }
  .ph-nav__lien--suiv { text-align: left; }
  .ph-nav__retour { justify-self: start; }
  .ph-fiche-tech > div { flex-wrap: wrap; }
  .ph-fiche-tech dt { flex-basis: 100%; }
}