/* Graphen Studio — page projet

   Deux colonnes : à gauche la fiche du projet fixe (sticky),
   à droite la galerie déroulante. */

body { display: block; }

.proj {
  display: grid;
  grid-template-columns: var(--side) 1fr;
  column-gap: 10px;
  padding: 0 10px;
}

.proj__side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  /* padding-top dégage le bouton Menu fixe (top:20px, chrome.js), même
     marge que .side-tagline sur l'accueil */
  padding: 64px 10px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 64px;
  overflow: hidden;
}

.proj__side > * { animation: proj-in .6s var(--ease-out) both; }
.proj__side > *:nth-child(1) { animation-delay: .02s; }
.proj__side > *:nth-child(2) { animation-delay: .08s; }
.proj__side > *:nth-child(3) { animation-delay: .14s; }
.proj__side > *:nth-child(4) { animation-delay: .2s; }
.proj__side > *:nth-child(5) { animation-delay: .26s; }
@keyframes proj-in { from { opacity: 0; transform: translateY(10px); } }

.proj__toggle { display: flex; gap: 4px; }
.proj__toggle button[aria-pressed="true"] .roll { --c1: var(--ink); --c2: var(--grey-2); }
.proj__toggle button[aria-pressed="false"] .roll { --c1: var(--grey); --c2: var(--ink); }

.proj__row { display: grid; grid-template-columns: 90px 1fr; column-gap: 10px; }
.proj__label { color: var(--grey); }
.proj__value { font: inherit; font-weight: 500; margin: 0; }

.proj__meta { display: flex; flex-direction: column; gap: 4px; }

.proj__credits-label { color: var(--grey-2); margin-bottom: 8px; }
.proj__credits p + p { margin-top: 2px; }

/* Galerie : les visuels se suivent sans gouttière — le mouvement de défilement
   (voir projet.js) fait remonter chaque visuel jusqu'au bord bas du précédent,
   qui se rétracte au même rythme. Un espace entre eux casserait le raccord. */
.proj__gallery {
  display: flex;
  flex-direction: column;
  padding: 5px 0 0;
  animation: proj-fade .8s var(--ease-out) both;
}
@keyframes proj-fade { from { opacity: 0; } }

/* Un visuel est un carré, et il ne dépasse jamais la hauteur de l'écran :
   le mouvement de défilement plus bas épingle chaque visuel au bord haut et
   le rétracte au rythme du défilement. Plus haut que la fenêtre, il ne se
   verrait jamais en entier et le raccord avec le suivant se déferait. Les
   10px retirés sont ceux du collage (PIN dans projet.js) et de la marge
   qu'ouvre .proj__gallery. */
.proj__shot {
  width: min(100%, calc(100dvh - 10px));
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transform-origin: center top;
  backface-visibility: hidden;
  will-change: transform;
}
.proj__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

.proj__list { display: flex; flex-direction: column; gap: 3px; padding: 20px 0; }
.proj__list .row {
  display: block;
  grid-template-columns: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
}
.proj__list .row:first-child { border-top: 1px solid var(--line); }

/* ================= Tablette et mobile ================= */

@media (max-width: 1199px) {
  .proj { grid-template-columns: minmax(0, 1fr); padding: 68px 10px 0; }
  .proj__side {
    position: static;
    height: auto;
    padding: 0 0 40px;
    gap: 32px;
  }
}

@media (max-width: 809px) {
  .proj__row { grid-template-columns: 76px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .proj__side > *, .proj__gallery { animation: none; opacity: 1; transform: none; }
  .proj__shot { transform: none; will-change: auto; }
}