/* =====================================================
   MAXIME DUFLOT — Pages : Projet Photo & Vidéo
   ===================================================== */

/* ────────────────────────────────────────
   PARTAGÉ (photo + vidéo)
   ──────────────────────────────────────── */

/* Lien retour */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-soft);
  transition: color 0.25s, gap 0.3s;
}
.back-link:hover { color: var(--rust); gap: 12px; }

/* Tableau méta (lieu / date / prestation) */
.meta-key {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 1px;
}
.meta-val { font-size: 14px; font-weight: 300; color: var(--ink); }

/* CTA bas de page projet */
.project-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 var(--gutter) 100px;
  text-align: center;
}
.project-cta--no-gallery {
  padding-top: clamp(80px, 12vw, 120px);
}
.project-cta-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--rust);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.project-cta-eyebrow::before, .project-cta-eyebrow::after {
  content: '';
  width: 28px; height: 1px;
  background: var(--rust);
  opacity: 0.5;
}
.project-cta-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.project-cta-title em { font-style: italic; color: var(--rust); }

/* ────────────────────────────────────────
   PROJET PHOTO
   ──────────────────────────────────────── */

.project-hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: var(--nav-h);
}
.project-hero-text {
  padding: 60px 60px 60px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.project-hero-text .back-link { margin-bottom: 48px; }

.project-type {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.project-type::before { content: ''; width: 24px; height: 1px; background: var(--rust); }

.project-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(48px, 6.5vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.project-title em { font-style: italic; }
.project-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 440px;
  margin-bottom: 40px;
}
.project-meta-table {
  display: grid;
  grid-template-columns: 90px 1fr;
  row-gap: 12px;
  padding: 28px 0;
  border-top: 1px solid rgba(28, 24, 20, 0.12);
  border-bottom: 1px solid rgba(28, 24, 20, 0.12);
  margin-bottom: 36px;
}

.project-hero-photo { position: relative; overflow: hidden; }
.project-hero-ph {
  width: 100%; height: 100%;
  background: linear-gradient(145deg, #d8c8a8 0%, #a88058 50%, #3a2010 100%);
}
.project-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-hero-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(28,24,20,0.18) 100%);
}
.project-hero-tag {
  position: absolute;
  bottom: 32px; left: 32px;
  background: var(--paper);
  padding: 14px 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  border: 1px solid rgba(28, 24, 20, 0.12);
  z-index: 2;
}
.project-hero-tag span {
  display: block;
  font-style: normal;
  font-size: 10px;
  font-family: var(--font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

/* Galerie photo */
.gallery { padding: 4px 0 150px; }
.gallery-row { display: grid; gap: 4px; margin-bottom: 4px; }
.gallery-row-1  { grid-template-columns: 1fr; }
.gallery-row-3  { grid-template-columns: 1fr 1fr 1fr; }
.gallery-row-2  { grid-template-columns: 1fr 1fr; }
.gallery-row-2l { grid-template-columns: 1.5fr 1fr; }
.gallery-row-2r { grid-template-columns: 1fr 1.5fr; }

.gph { display: block; width: 100%; }
img.gph { object-fit: cover; }
.gph-s { height: 300px; }
.gph-m { height: 420px; }
.gph-l { height: 540px; }

/* Placeholders couleur galerie */
.g1 { background: linear-gradient(155deg, #c8b890 0%, #907048 60%, #2a1808 100%); }
.g2 { background: linear-gradient(155deg, #e0d4bc 0%, #b89870 60%, #5a3a20 100%); }
.g3 { background: linear-gradient(145deg, #d8d0c4 0%, #a09080 60%, #3a2818 100%); }
.g4 { background: linear-gradient(170deg, #1a1a18 0%, #2a2820 60%, #4a4440 100%); }
.g5 { background: linear-gradient(155deg, #c8d4b0 0%, #889858 60%, #2a3818 100%); }
.g6 { background: linear-gradient(145deg, #d8c0a0 0%, #a07848 60%, #3a1808 100%); }
.g7 { background: linear-gradient(160deg, #c0b0a0 0%, #806050 60%, #2a1808 100%); }

/* Hover zoom galerie */
.gallery-row .gph { transition: transform 1.4s cubic-bezier(.16,1,.3,1); overflow: hidden; }
.gallery-row div:hover .gph { transform: scale(1.03); }
.gallery-row > div { overflow: hidden; }

/* ────────────────────────────────────────
   PROJET VIDÉO
   ──────────────────────────────────────── */

/* Lien retour (positionné absolument sur fond sombre) */
.back-link-dark {
  position: absolute;
  top: calc(var(--nav-h) + 20px);
  left: var(--gutter);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(246,241,230,0.6);
  transition: color 0.25s, gap 0.3s;
}
.back-link-dark:hover { color: rgba(246,241,230,0.95); gap: 12px; }

/* Lecteur vidéo plein largeur */
.video-hero { padding-top: calc(var(--nav-h) + 56px); background: #0c0a08; position: relative; }
.video-player { width: 100%; aspect-ratio: 16/9; background: #080604; position: relative; overflow: hidden; }
.video-bg {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, #2a2520 0%, #1a1210 50%, #0f0d0a 100%);
}
.video-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(183,93,58,0.12) 0%, transparent 60%);
}
.video-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 28px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  display: flex;
  align-items: center;
  gap: 16px;
}
.vc-play { width: 32px; height: 32px; cursor: pointer; opacity: 0.9; flex-shrink: 0; transition: opacity 0.2s; }
.vc-play:hover { opacity: 1; }
.vc-time { font-family: var(--font-sans); font-size: 12px; color: rgba(255,255,255,0.8); letter-spacing: 0.04em; white-space: nowrap; }
.vc-progress {
  flex: 1; height: 2px;
  background: rgba(255,255,255,0.25);
  position: relative; cursor: pointer; border-radius: 1px;
}
.vc-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; background: white; border-radius: 1px; }
.vc-icons { display: flex; gap: 14px; align-items: center; }
.vc-icon { width: 20px; height: 20px; cursor: pointer; opacity: 0.75; transition: opacity 0.2s; }
.vc-icon:hover { opacity: 1; }

/* Info vidéo */
.video-info { padding: 100px var(--gutter); background: var(--paper-soft); }
.video-info-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: start;
}
.video-type {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.video-type::before { content: ''; width: 24px; height: 1px; background: var(--rust); }
.video-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.video-title em { font-style: italic; }
.video-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: 40px;
}
.video-info-right { padding-top: 12px; }
.video-meta-table {
  display: grid;
  grid-template-columns: 90px 1fr;
  row-gap: 14px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(28, 24, 20, 0.12);
  margin-bottom: 28px;
}

/* Extraits (stills) */
.extraits { padding: 0 var(--gutter) 100px; background: var(--paper-soft); }
.extraits-inner { max-width: var(--content-max); margin: 0 auto; }
.extraits-label { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.extraits-label span {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.extraits-label::after { content: ''; flex: 1; height: 1px; background: rgba(28,24,20,0.12); }
.extraits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.extrait-item {
  overflow: hidden;
  aspect-ratio: 16/10;
  position: relative;
}
.ep { width: 100%; height: 100%; }

/* Placeholders extraits */
.ep-1 { background: linear-gradient(150deg, #d8c090 0%, #a07838 60%, #2a1808 100%); }
.ep-2 { background: linear-gradient(155deg, #b8d0c8 0%, #608090 50%, #1a2828 100%); }
.ep-3 { background: linear-gradient(145deg, #d8c4a8 0%, #a08060 60%, #3a2010 100%); }
.ep-4 { background: linear-gradient(160deg, #1a1a18 0%, #2a2820 60%, #4a4438 100%); }
.ep-5 { background: linear-gradient(155deg, #d0b890 0%, #a07840 60%, #2a1808 100%); }
.ep-6 { background: linear-gradient(150deg, #2a2018 0%, #4a3828 50%, #7a6040 100%); }

/* CTA vidéo (fond papier-deep) */
.project-cta-video {
  background: var(--paper-deep);
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Lecteur vidéo immersif (YouTube embed) */
.project-video-player {
  padding: 60px 0 100px;
  background: #0c0a08;
}
.project-video-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.project-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #080604;
}
.project-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   RESPONSIVE POLISH
   ========================================================================== */

@media (max-width: 767px) {
  .project-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .project-hero-text {
    padding: clamp(72px, 13vw, 100px) var(--gutter) clamp(58px, 10vw, 78px);
  }
  .project-hero-text .back-link { margin-bottom: 38px; }
  .project-type { margin-bottom: 20px; }
  .project-title {
    font-size: clamp(46px, 11vw, 78px);
    line-height: 1;
  }
  .project-desc {
    max-width: none;
    font-size: 14.5px;
    line-height: 1.78;
    margin-bottom: 34px;
  }
  .project-meta-table {
    grid-template-columns: minmax(78px, 0.32fr) 1fr;
    row-gap: 14px;
    padding: 24px 0;
    margin-bottom: 0;
  }
  .project-hero-photo {
    height: clamp(320px, 72vw, 520px);
  }
  .project-hero-tag {
    bottom: 22px;
    left: var(--gutter);
    padding: 12px 18px;
  }

  .gallery {
    padding: clamp(42px, 9vw, 68px) var(--gutter) clamp(108px, 17vw, 144px);
  }
  .gallery-row {
    gap: 14px;
    margin-bottom: 14px;
  }
  .gallery-row-3 { grid-template-columns: 1fr 1fr; }
  .gallery-row-3 > :first-child { grid-column: 1 / -1; }
  .gallery-row-2,
  .gallery-row-2l,
  .gallery-row-2r {
    grid-template-columns: 1fr;
  }
  .gph {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .gph-l { aspect-ratio: 3 / 2; }
  .gallery-row-3 > :first-child .gph { aspect-ratio: 3 / 2; }

  .video-hero { padding-top: calc(var(--nav-h) + 48px); }
  .video-player {
    aspect-ratio: 4 / 5;
    min-height: 360px;
  }
  .video-controls { padding: 22px var(--gutter) 18px; gap: 12px; }
  .video-info { padding: clamp(78px, 13vw, 110px) var(--gutter); }
  .video-info-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .video-title {
    font-size: clamp(44px, 11vw, 76px);
    line-height: 1;
  }
  .video-desc {
    max-width: none;
    font-size: 14.5px;
    line-height: 1.78;
    margin-bottom: 34px;
  }
  .video-info-right { padding-top: 0; }
  .video-meta-table {
    grid-template-columns: minmax(78px, 0.32fr) 1fr;
    row-gap: 14px;
  }
  .extraits {
    padding: 0 var(--gutter) clamp(86px, 15vw, 120px);
  }
  .extraits-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .extrait-item { aspect-ratio: 16 / 10; }
  .extrait-item:nth-child(3n + 1) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
  .project-cta {
    gap: 26px;
    padding-bottom: clamp(82px, 15vw, 112px);
  }
  .project-cta-video {
    padding-top: clamp(82px, 15vw, 112px);
  }
}

@media (max-width: 479px) {
  .project-hero-text {
    padding: clamp(62px, 14vw, 82px) var(--gutter) clamp(54px, 12vw, 68px);
  }
  .project-title {
    font-size: clamp(42px, 12vw, 60px);
    letter-spacing: 0;
  }
  .project-meta-table,
  .video-meta-table {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .meta-key { padding-top: 8px; }
  .meta-key:first-child { padding-top: 0; }
  .gallery {
    padding-top: 34px;
  }
  .gallery-row-3 { grid-template-columns: 1fr; }
  .gph,
  .gph-l,
  .gallery-row-3 > :first-child .gph {
    aspect-ratio: 4 / 5;
  }
  .gallery-row:nth-child(2) .gph { aspect-ratio: 3 / 2; }
  .back-link-dark {
    top: calc(var(--nav-h) + 16px);
    font-size: 14px;
  }
  .video-player {
    min-height: 340px;
  }
  .vc-icons { display: none; }
  .vc-time { font-size: 11px; }
  .video-title {
    font-size: clamp(42px, 12vw, 62px);
    letter-spacing: 0;
  }
  .extraits-grid { grid-template-columns: 1fr; }
  .extrait-item { aspect-ratio: 16 / 9; }
  .extrait-item:nth-child(3n + 1) { grid-column: auto; aspect-ratio: 16 / 9; }
  .project-cta-title {
    font-size: clamp(36px, 10vw, 52px);
    line-height: 1.05;
    letter-spacing: 0;
  }
}

/* ── Galerie Masonry ─────────────────────────────────────────── */

.gallery-masonry {
  columns: 3;
  column-gap: 4px;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 4px;
  overflow: hidden;
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}
.gallery-item:hover img { transform: scale(1.03); }

@media (max-width: 900px) {
  .gallery-masonry { columns: 2; column-gap: 8px; }
  .gallery-item { margin-bottom: 8px; }
}

@media (max-width: 479px) {
  .gallery-masonry { columns: 1; }
}