/* ============================================================
   PAGES PROJET — le haut de page est un plan, pas une affiche
   ============================================================ */

.proj__ouverture{position:relative; height:min(86vh,880px); overflow:hidden; background:var(--noir)}
.proj__ouverture img{width:100%; height:100%; object-fit:cover; transform:scale(1.08)}
.proj__carton{
  position:absolute; left:0; right:0; bottom:0;
  padding:5rem var(--marge) 2.6rem;
  background:linear-gradient(to top, rgba(11,11,10,.96) 0%, rgba(11,11,10,.6) 50%, rgba(11,11,10,0) 100%);
}
.proj__titre{
  font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(2.1rem,5.4vw,4.6rem); line-height:.98; margin:0;
}
.proj__ar{display:block; margin-top:.55rem; font-size:1.05rem; color:var(--gris)}

.proj__fiche{
  display:grid; grid-template-columns:repeat(12,1fr); gap:2.6rem 1.4rem;
  padding:9vh var(--marge) 7vh;
}
.proj__retour{
  grid-column:1/-1; font-family:"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gris); text-decoration:none;
}
.proj__retour:hover{color:var(--clair)}
.proj__specs{grid-column:1/span 6}
.proj__specs .spec{
  display:flex; gap:1.5rem; padding:.8rem 0;
  border-bottom:1px solid rgba(237,234,228,.1);
}
.proj__specs label{
  font-family:"SFMono-Regular",Menlo,Consolas,monospace; font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gris);
  min-width:9rem; flex:0 0 9rem;
}
.proj__specs span{font-size:.95rem; color:var(--clair)}
.proj__affiche{grid-column:8/span 3; margin:0; align-self:start}
.proj__affiche img{width:100%; height:auto; display:block; border:1px solid rgba(237,234,228,.1)}
.proj__video{grid-column:1/span 8; margin-top:2vh}
.proj__video .teaser-box{
  position:relative; display:block; cursor:pointer; overflow:hidden;
  aspect-ratio:16/9; background:#141311;
}
/* on force le cadre : le reste (bouton lecture, accroche) se pose par-dessus */
.proj__video .teaser-box img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; display:block;
}
.proj__video .play-btn,.proj__video .teaser-hint{position:absolute; z-index:2}

/* les planches : mosaique decalee a deux colonnes, une large de temps en temps */
.proj__planches{padding:0 var(--marge) 12vh}
.project-stills{display:grid; grid-template-columns:repeat(2,1fr); gap:2.4rem 1.6rem}
.project-stills .vue{grid-column:auto; margin:0; position:relative}
.project-stills .vue:nth-child(even)  {margin-top:5.5rem}
.project-stills .vue.wide            {grid-column:1/-1; margin-top:2rem}
.project-stills .vue__lien{display:block; overflow:hidden; background:#141311}
.project-stills .vue img{width:100%; height:auto; aspect-ratio:auto; display:block}

@media (max-width:900px){
  .project-stills{grid-template-columns:1fr; gap:1.4rem}
  .project-stills .vue:nth-child(even){margin-top:0}
  .proj__video{grid-column:1/-1}
}

@media (max-width:900px){
  .proj__specs{grid-column:1/-1}
  .proj__affiche{grid-column:1/span 5}
  .proj__ouverture{height:56vh}
}