/* ============================================================
   LES VOIX DE FRED — photos-2027.css
   Habillage 2027 de la page Photos (voix-off-comedien-photos.html).
   À charger APRÈS css/sections-2027.css, uniquement sur cette page.
   ============================================================ */

/* ==========================================================
   PAGE PHOTOS (voix-off-comedien-photos.html) — classes .ph-*
   ========================================================== */

/* Fond : on retire la grille fixe propre à cette page, comme ailleurs sur le site */
body.content:has(#ph-gallery)::after,
body.content:has(#ph-gallery)::before { display: none; }

/* En-tête : aligné à gauche comme les autres pages */
.site .ph-hero {
  max-width: 1180px; margin: 0 auto; box-sizing: border-box;
  align-items: flex-start; text-align: left;
  padding: 150px 40px 56px;
}
.site .ph-hero-eyebrow {
  gap: 10px; margin-bottom: 18px;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; color: var(--text-bright);
}
.site .ph-hero-eyebrow::before {
  width: 7px; height: 7px; border-radius: 50%; opacity: 1;
  background: var(--accent); box-shadow: 0 0 10px rgba(0,194,255,0.7);
}
.site .ph-hero-eyebrow::after { display: none; }
.site .ph-hero h1 {
  font-family: 'Outfit', Arial, sans-serif;
  font-size: clamp(56px, 8vw, 112px);
  font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; text-transform: none;
  margin-bottom: 22px;
  background: linear-gradient(180deg, #ffffff 30%, #a9bccd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site .ph-hero-sep { display: none; }
.site .ph-hero-sub { margin: 0; max-width: 34em; font-size: 18px; line-height: 1.65; color: #a9b8c7; }

/* Galerie */
.site .ph-wrap { max-width: 1180px; padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
.site .ph-grid { gap: 16px; margin-bottom: 48px; }
.site .ph-item {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0d141c;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,0.8);
  transition: border-color 0.3s;
}
.site .ph-item:hover { border-color: rgba(0,194,255,0.45); }
.site .ph-item:hover img { transform: scale(1.05); filter: brightness(0.6); }
.site .ph-overlay-icon { border-color: rgba(255,255,255,0.85); background: rgba(0,194,255,0.18); }
.site .ph-caption {
  padding: 14px 16px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: #fff;
}

/* Note de bas de page : encadré discret, bien visible */
.site .ph-note {
  max-width: 720px; margin: 0 auto 72px; padding: 22px 28px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), #0d141c;
  font-size: 16px; color: #a9b8c7;
}

@media (max-width: 860px) {
  .site .ph-hero { padding: 120px 24px 40px; }
  .site .ph-wrap { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 640px) {
  .site .ph-grid { gap: 10px; }
  .site .ph-item { border-radius: 10px; }
  .site .ph-note { margin: 0 0 56px; padding: 18px 20px; font-size: 15px; }
}