/* =====================================================================
   PIERRE PINTO — Pages projet & R&D
   Déroulé éditorial : hero typographique, médias pleine largeur,
   galeries en grille, crédits, projet suivant.
   ===================================================================== */

/* ===================== STRUCTURE ===================== */
.project {
  padding-top: 16vh;            /* dégage le header fixe */
}

.project > section,
.project > a.p-next {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ===================== HERO ===================== */
.p-hero { margin-bottom: 4vh; }

.p-hero__index {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  letter-spacing: .18em;
  margin-bottom: 1.5vh;
}

.p-hero__title {
  font-size: var(--fs-display);
  line-height: 1.02;
  font-weight: var(--w-thin);
  letter-spacing: -.015em;
}

.p-hero__meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 2vw;
  margin: 4vh 0 3vh;
  padding-top: 2vh;
  border-top: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: .14em;
}

.p-hero__cat { color: var(--ink-soft); }

.p-hero__services {
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.8em;
  justify-content: center;
}

.p-hero__year { text-align: right; color: var(--ink-soft); }

/* ===================== MÉDIAS ===================== */
.p-media {
  position: relative;
  background: var(--frame-bg);
  overflow: hidden;
}

.p-media img,
.p-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.p-media--hero { aspect-ratio: 16 / 9; max-height: 86vh; margin-inline: auto; }

/* hover discret sur les images de galerie */
.p-media img {
  transform: scale(1);
  transition: transform 1.2s var(--ease-out);
}
.p-gallery .p-media:hover img { transform: scale(1.035); }

/* ===================== BLOCS TEXTE ===================== */
.p-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 4vw;
  padding-top: 12vh;
  padding-bottom: 12vh;
}

.p-intro__tag {
  font-size: clamp(18px, 2.1vw, 32px);
  line-height: 1.35;
  font-weight: var(--w-thin);
  letter-spacing: -.005em;
}

.p-intro__txt {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 62ch;
  align-self: end;
}

/* étiquette "Plus de détails" plus discrète */
.p-intro--details .p-intro__tag {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-soft);
  font-weight: var(--w-light);
}
.p-intro--details .p-intro__txt { color: var(--ink); align-self: start; }

/* ===================== VIDÉO PRINCIPALE ===================== */
.p-video { padding-bottom: 2vw; }
.p-video .p-media { aspect-ratio: 16 / 9; }
.p-video--full { padding-left: 0; padding-right: 0; }   /* pleine largeur */

/* ===================== BOUCLES (background) ===================== */
.p-loops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;          /* ratios différents : alignement haut */
  gap: 2vw;
  padding-bottom: 2vw;
}
.p-loops .p-media { aspect-ratio: 16 / 9; }

/* iframes Vimeo en mode background : on masque les interactions */
.p-media--loop iframe { pointer-events: none; }

/* ===================== GALERIES =====================
   Grille déstructurée 12 colonnes. Chaque image garde son format natif
   (aucun recadrage) ; le JS classe chaque figure selon son ratio réel :
   g-pano (anamorphique) · g-land (paysage) · g-small (carré/portrait),
   avec alternance gauche/droite et décalages verticaux. */
.p-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6vh 2vw;
  align-items: start;
  padding-top: 2vw;
  padding-bottom: 4vw;
}

.p-gallery .p-media { grid-column: 1 / -1; }   /* défaut avant classification */
.p-gallery .p-media img {
  width: 100%;
  height: auto;          /* format natif respecté */
  object-fit: unset;
}

/* anamorphique : pleine largeur */
.p-gallery .g-pano  { grid-column: 1 / -1; }

/* paysage standard : 7 colonnes, alterné */
.p-gallery .g-land.g-left  { grid-column: 1 / span 7; }
.p-gallery .g-land.g-right { grid-column: 6 / -1; }

/* carré / portrait : 5 colonnes, alterné */
.p-gallery .g-small.g-left  { grid-column: 2 / span 5; }
.p-gallery .g-small.g-right { grid-column: 7 / span 5; }

/* respiration verticale déstructurée */
.p-gallery .g-shift { margin-top: 8vh; }
.p-gallery .g-sink  { margin-top: 4vh; }

/* ===================== NOTE / CLÔTURE ===================== */
.p-note,
.p-closing {
  padding-top: 12vh;
  padding-bottom: 12vh;
  display: grid;
}

.p-note p,
.p-closing p {
  font-size: clamp(18px, 2.1vw, 32px);
  line-height: 1.45;
  font-weight: var(--w-thin);
  max-width: 34ch;
  margin: 0 auto;
  text-align: center;
}

/* ===================== CRÉDITS ===================== */
.p-credits {
  padding-top: 2vh;
  padding-bottom: 12vh;
}

.p-credits dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4vh 3vw;
  max-width: 1100px;
  margin: 0 auto;
}

.p-credits dt {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-soft);
  margin-bottom: 1vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid var(--line);
}

.p-credits dd { font-size: var(--fs-body); line-height: 1.6; }

/* ===================== PROJET SUIVANT ===================== */
.p-next {
  display: block;
  padding-top: 10vh;
  padding-bottom: 0;
}

.p-next__label {
  display: block;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink-soft);
  margin-bottom: 1.6vh;
}

.p-next__name {
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: var(--fs-display);
  line-height: 1.05;
  font-weight: var(--w-thin);
  letter-spacing: -.015em;
  margin-bottom: 4vh;
}

.p-next .p-media { aspect-ratio: 16 / 7; }

.p-next .p-media img { transition: transform 1.4s var(--ease-out); }
.p-next:hover .p-media img { transform: scale(1.04); }

/* ===================== R&D — LABORATOIRE ===================== */
.lab-head { padding-bottom: 6vh; }

.lab-head__txt {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 3vh;
}

.lab {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.lab .p-media { aspect-ratio: 16 / 10; }
.lab .p-media--wide { grid-column: 1 / -1; aspect-ratio: 16 / 8; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px) {
  .project { padding-top: 14vh; }

  .p-hero__meta { grid-template-columns: 1fr; gap: 1.2vh; }
  .p-hero__services { justify-content: start; }
  .p-hero__year { text-align: left; }

  .p-intro { grid-template-columns: 1fr; gap: 3vh; padding-top: 8vh; padding-bottom: 8vh; }
  .p-loops, .lab { grid-template-columns: 1fr; }
  .lab .p-media--wide { aspect-ratio: 16 / 10; }

  /* galeries : tout en pleine largeur, décalages neutralisés */
  .p-gallery .p-media,
  .p-gallery .g-land.g-left, .p-gallery .g-land.g-right,
  .p-gallery .g-small.g-left, .p-gallery .g-small.g-right { grid-column: 1 / -1; }
  .p-gallery .g-shift, .p-gallery .g-sink { margin-top: 0; }

  .p-note, .p-closing { padding-top: 8vh; padding-bottom: 8vh; }
}