/* ============================================
   TRIKROMI — Page Photos+
   Hero (titre + tags + image) → section noire avec MOSAÏQUE 3 colonnes
   (formats variés / masonry) → contact. Réutilise style.css / creativ.css.
   ============================================ */

/* ---------- BLOC SUR FOND NOIR (même principe que Vidéos+) ---------- */
.page-photos .vid-block {
  width: 100%;
  background: #0a0a0a;
  margin-top: clamp(40px, 4.5vw, 86px);
  padding-top: clamp(46px, 5vw, 96px);
  padding-bottom: clamp(60px, 6.4vw, 123px);
}
.page-photos .vid-block__head {
  padding: 0 var(--page-margin);
  margin-bottom: clamp(36px, 4vw, 76px);
}
.page-photos .vid-num {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 19px);
  font-weight: 400;
  color: #adadad;
  margin-bottom: clamp(8px, 0.9vw, 16px);
}
.page-photos .vid-block__title {
  font-family: var(--font-body);
  font-size: clamp(20px, 2.3vw, 44px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.05em;
  color: #fff;
}
.page-photos .vid-block__title strong { font-weight: 600; }

/* ---------- MOSAÏQUE 3 COLONNES (masonry via CSS multi-colonnes) ---------- */
.page-photos .photo-wall {
  padding: 0 var(--page-margin);
  column-count: 3;
  column-gap: clamp(14px, 1.6vw, 30px);
}
.page-photos .photo-wall img {
  width: 100%;
  display: block;
  margin-bottom: clamp(14px, 1.6vw, 30px);
  border-radius: var(--radius-md);          /* 25px */
  break-inside: avoid;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.45s ease, filter 0.45s ease;
  will-change: transform;
}
.page-photos .photo-wall img:hover { transform: translateY(-4px) scale(1.02); }

/* Placeholders : simulent des formats variés pour l'aperçu de la mosaïque.
   >>> À RETIRER une fois les vraies photos (déjà en formats variés) intégrées. */
.page-photos .photo-wall img.ph-tall   { aspect-ratio: 3 / 4; }
.page-photos .photo-wall img.ph-port   { aspect-ratio: 4 / 5; }
.page-photos .photo-wall img.ph-square { aspect-ratio: 1 / 1; }
.page-photos .photo-wall img.ph-land   { aspect-ratio: 4 / 3; }
.page-photos .photo-wall img.ph-wide   { aspect-ratio: 16 / 10; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) { .page-photos .photo-wall { column-count: 2; } }
@media (max-width: 640px) { .page-photos .photo-wall { column-count: 1; } }
/* Contact séparé du bloc noir */
.page-photos .contact { padding-top: clamp(56px, 5.5vw, 96px); }

/* ---------- IMAGE HAUT : bande fine (format maquette, comme tarifs) ---------- */
.page-photos .cr-fullimg img {
  aspect-ratio: 1916 / 410;
  max-height: 56vh;
}
/* Dimensions réelles dans le HTML (back-office) : on garde les proportions */
.page-photos .photo-wall img { height: auto; }