/* Galerie : grille des collections, photos d'une collection, à propos. */
/* ══ Grille des collections ══ */
/* ─── Collections grid ───────────────────────────────────── */
.edition-notice {
  text-align:center; padding:0 2rem 2.5rem;
  font-family:var(--serif); font-style:italic;
  font-size:.95rem; line-height:2; letter-spacing:.03em;
  color:var(--text-mid);
}
.edition-notice .orn { display:block; color:var(--accent); font-size:.7rem; letter-spacing:.2em; margin-bottom:.6rem; opacity:.7; }
.edition-notice em   { font-style:italic; color:var(--accent2); }
.coll-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:1.5rem; }
.coll-card {
  position:relative; aspect-ratio:4/3; overflow:hidden;
  cursor:pointer; border-radius:var(--r);
  background:var(--bg3); border:1px solid var(--border);
}
.coll-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease, opacity .3s; opacity:.82; }
.coll-card:hover img { transform:scale(1.04); opacity:1; }
.coll-card-ov {
  position:absolute; inset:0;
  background:var(--photo-scrim);
  display:flex; align-items:flex-end; padding:1.4rem;
}
/* Le voile est sombre dans LES DEUX thèmes : le nom doit donc rester
   clair, sinon il devient illisible en mode clair où --text est foncé. */
.coll-card-name {
  font-family:var(--serif); font-size:1.2rem; font-weight:400; letter-spacing:.04em;
  color:var(--on-photo); text-shadow:var(--on-photo-shadow);
}
.coll-card-ct   { font-size:.72rem; color:var(--on-photo-dim); letter-spacing:.08em; margin-top:.18rem; text-shadow:var(--on-photo-shadow); }
.coll-empty {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.8rem; color:var(--text-dim);
}
.coll-empty svg { width:44px; height:44px; opacity:.25; }

/* ══ Photos d'une collection ══ */
/* Grille régulière, comme les couvertures de la page d'accueil — et non
   plus une mosaïque en colonnes, qui alignait mal et faisait lire les
   photos de haut en bas colonne par colonne.
   Les photographies sont regroupées par ORIENTATION : 98 % d'entre elles
   sont en 3:2 ou en 2:3, si bien que chaque section peut adopter le
   format exact de ses images. Résultat : quasiment aucun rognage, tout en
   gardant des rangées parfaitement alignées. */

.photos-section + .photos-section { margin-top:3rem; }
.photos-section-title {
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:1rem;
  display:flex; align-items:center; gap:.8rem;
}
.photos-section-title::after {
  content:''; flex:1; height:1px; background:var(--border);
}

.photos-grid { display:grid; gap:.8rem; }
.photos-grid--paysage  { grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
.photos-grid--portrait { grid-template-columns:repeat(auto-fill, minmax(196px,1fr)); }

.photo-wrap {
  position:relative; cursor:pointer; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--border); background:var(--bg3);
}
.photos-grid--paysage  .photo-wrap { aspect-ratio:3/2; }
.photos-grid--portrait .photo-wrap { aspect-ratio:2/3; }

/* height:100% et object-fit remplissent la case sans déformer l'image.
   Les 5 photographies qui ne sont ni en 3:2 ni en 2:3 sont légèrement
   recadrées ; toutes les autres s'affichent entières. */
.photo-wrap img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.photo-wrap:hover img { transform:scale(1.03); }

.photo-ov {
  position:absolute; inset:0;
  background:transparent; transition:background .3s, opacity .3s;
  display:flex; align-items:flex-end; padding:.85rem; opacity:0;
}
.photo-wrap:hover .photo-ov { opacity:1; background:var(--scrim-soft); }
.photo-ref {
  font-size:.7rem; letter-spacing:.13em; font-weight:300;
  color:var(--on-photo); text-shadow:var(--on-photo-shadow);
}

@media(max-width:560px){
  .photos-grid--paysage  { grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); }
  .photos-grid--portrait { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); }
}

/* ══ À propos ══ */
/* ─── About section ──────────────────────────────────────── */
#about-section {
  background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:5.5rem 2rem;
}
.about-inner { max-width:760px; margin:0 auto; text-align:center; }
.about-inner h2 { font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:300; letter-spacing:.05em; margin-bottom:1.8rem; }
.about-rule { display:flex; align-items:center; gap:1rem; margin:1.6rem 0; color:var(--text-dim); font-size:.85rem; }
.about-rule::before, .about-rule::after { content:''; flex:1; height:1px; background:var(--border); }
.about-text p { font-size:.9rem; line-height:2.1; color:var(--text-mid); margin-bottom:1.1rem; }
.about-sig { font-family:var(--serif); font-size:1.1rem; font-style:italic; color:var(--accent2); margin-top:2rem; }