/* ==========================================================================
   Fiches projets : le nom en grand, la scène (maquette + vidéo), le récit
   (contexte, rôle, défis, outils, résultat), la galerie, le projet suivant.
   ========================================================================== */

.btn--small { min-height: 2.75rem; padding: 0 1.15rem; font-size: var(--step-small); }

.p-hero {
  padding: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 6rem)) var(--gutter) clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  display: grid;
  gap: var(--space-4);
}
.p-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: var(--step-small);
  color: var(--muted);
  transition: color var(--t-hover) ease;
}
.p-back svg { width: 1rem; height: 1rem; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .p-back:hover { color: var(--ink); }
  .p-back:hover svg { transform: translateX(-3px); }
}
.p-title {
  font-size: clamp(3.75rem, 0.5rem + 15vw, 15rem);
  line-height: 0.84;
  letter-spacing: var(--track-display);
  font-weight: 820;
  text-wrap: nowrap;
  view-transition-name: project-title;
}
.p-title--long { font-size: clamp(3rem, 0.2rem + 11.5vw, 12rem); text-wrap: balance; }
.p-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-4);
  align-items: start;
}
.p-lead { grid-column: 1 / span 7; max-width: 34ch; }
.p-intro .facts { grid-column: 8 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Scène principale */
.p-stage { padding: clamp(1rem, 0.5rem + 2vw, 2.5rem) var(--gutter) var(--section); }
.p-stage .macbook { --w: min(100%, 72rem); margin-inline: auto; }
.p-stage--phone { display: grid; place-items: center; }
.p-stage--phone .iphone { --w: clamp(240px, 26vw, 360px); }

/* Trio d'iPhones en 3D CSS (fiches des applications) : s'ouvre au survol. */
.trio {
  --w: clamp(140px, 19vw, 290px);
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1600px;
  padding-block: clamp(1rem, 0.5rem + 2vw, 3rem);
}
.trio .iphone { margin-inline: calc(var(--w) * -0.1); transition: transform 900ms var(--ease-out); }
.trio .iphone:nth-child(1) { transform: rotateY(26deg) translate3d(4%, 3%, -90px) scale(0.9); }
.trio .iphone:nth-child(2) { z-index: 2; transform: translate3d(0, 0, 40px); }
.trio .iphone:nth-child(3) { transform: rotateY(-26deg) translate3d(-4%, 3%, -90px) scale(0.9); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .trio:hover .iphone:nth-child(1) { transform: rotateY(16deg) translate3d(-10%, 1%, -60px) scale(0.92); }
  .trio:hover .iphone:nth-child(2) { transform: translate3d(0, -2%, 70px); }
  .trio:hover .iphone:nth-child(3) { transform: rotateY(-16deg) translate3d(10%, 1%, -60px) scale(0.92); }
}

/* Récit : titres de rubrique à gauche, texte à droite */
.p-story { padding: 0 var(--gutter) var(--section); display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem); }
.p-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-2);
}
.p-block h2 {
  grid-column: 1 / span 4;
  font-size: var(--step-lead);
  letter-spacing: var(--track-head);
}
.p-block > div { grid-column: 6 / span 7; display: grid; gap: var(--space-3); max-width: 44rem; }
.p-block p { max-width: var(--measure); }
.p-block ul:not(.chips) { padding-left: 1.1em; display: grid; gap: 0.75rem; max-width: var(--measure); }
.p-block li::marker { color: var(--accent-text); }

/* Galerie */
.p-gallery {
  padding: 0 var(--gutter) var(--section);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(3rem, 2rem + 5vw, 7rem);
}
.p-gallery > * { grid-column: 1 / -1; min-width: 0; }
.p-gallery > .shot--tall { grid-column: 3 / span 8; }
.p-gallery__head { display: grid; gap: var(--space-2); }
.p-gallery__head h2 { font-size: var(--step-head); letter-spacing: var(--track-head); }
.p-gallery__head p { max-width: 50ch; color: var(--muted); }
.shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.shot { display: grid; gap: 0.8rem; }
.shot figcaption { font-size: var(--step-small); color: var(--muted); }
.shot--wide { grid-column: 1 / -1; }
.shot--left { grid-column: 1 / span 7; }
.shot--right { grid-column: 6 / -1; margin-top: clamp(3rem, 2rem + 8vw, 10rem); }
.shot--half-a { grid-column: 1 / span 6; }
.shot--half-b { grid-column: 7 / -1; margin-top: clamp(2rem, 1rem + 6vw, 7rem); }
.shot--tall { grid-column: 3 / span 8; }

.devices {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
}
.devices .iphone { --w: clamp(150px, 17vw, 250px); }
.devices .ipad { --w: clamp(260px, 30vw, 440px); }
.devices figure { display: grid; gap: 0.8rem; justify-items: center; }
.devices figcaption { font-size: var(--step-small); color: var(--muted); text-align: center; max-width: 22ch; }

/* Bande d'écrans d'application, défilable horizontalement */
.screens {
  display: flex;
  gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 1rem var(--gutter) 2rem;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
}
.screens figure { flex: none; display: grid; gap: 0.8rem; scroll-snap-align: center; }
.screens .iphone { --w: clamp(170px, 19vw, 250px); }
.screens figcaption { font-size: var(--step-small); color: var(--muted); max-width: 24ch; }

/* Films (page motion design) */
.films { padding: 0 var(--gutter) var(--section); display: grid; gap: clamp(4rem, 2rem + 6vw, 8rem); }
.film-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-3);
  align-items: center;
}
.film-block .film__media { grid-column: 2 / span 4; max-width: 24rem; width: 100%; justify-self: end; aspect-ratio: 9 / 16; background: #000; }
.film-block .film-block__text { grid-column: 7 / span 5; display: grid; gap: var(--space-3); }
.film-block:nth-child(even) .film__media { grid-column: 8 / span 4; justify-self: start; grid-row: 1; }
.film-block:nth-child(even) .film-block__text { grid-column: 2 / span 5; grid-row: 1; }
.film-block h2 { font-size: var(--step-head); letter-spacing: var(--track-head); line-height: 1; }
.film-block .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Transcription du texte à l'écran (accessibilité) */
.transcript { background: var(--surface); }
.transcript summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: 0.6rem 1rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::after {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--t-ui) var(--ease-out);
}
.transcript[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.transcript p { padding: 0 1rem 1rem; color: var(--muted); font-size: var(--step-small); }
.films__note { max-width: 60ch; }

/* Projet suivant */
.p-next {
  display: grid;
  gap: 0.75rem;
  padding: var(--section) var(--gutter);
  background: var(--surface);
}
.p-next__label { color: var(--muted); font-weight: 600; }
.p-next__link {
  justify-self: start;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: clamp(3rem, 0.6rem + 11vw, 11rem);
  font-weight: 820;
  line-height: 0.88;
  letter-spacing: var(--track-display);
  transition: color var(--t-ui) ease;
}
.p-next__link svg { width: 0.5em; height: 0.5em; flex: none; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .p-next__link:hover { color: var(--accent-text); }
  .p-next__link:hover svg { transform: translateX(0.08em); }
}

/* Pages de texte (mentions légales, 404) */
.text-page { padding: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 6rem)) var(--gutter) var(--section); display: grid; gap: var(--space-4); }
.text-page h1 { font-size: clamp(3rem, 1rem + 8vw, 8rem); letter-spacing: var(--track-display); line-height: 0.9; }
.text-page section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--space-2); }
.text-page h2 { grid-column: 1 / span 4; font-size: var(--step-lead); letter-spacing: -0.02em; }
.text-page section > div { grid-column: 6 / span 7; display: grid; gap: var(--space-2); max-width: var(--measure); }

@media (max-width: 900px) {
  .p-title { text-wrap: balance; }
  .p-lead, .p-intro .facts { grid-column: 1 / -1; }
  .p-block h2, .p-block > div { grid-column: 1 / -1; }
  .shot--left, .shot--right, .shot--half-a, .shot--half-b, .shot--tall { grid-column: 1 / -1; margin-top: 0; }
  .film-block .film__media,
  .film-block:nth-child(even) .film__media { grid-column: 1 / -1; grid-row: auto; justify-self: center; max-width: 20rem; }
  .film-block .film-block__text,
  .film-block:nth-child(even) .film-block__text { grid-column: 1 / -1; grid-row: auto; }
  .text-page h2, .text-page section > div { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .p-intro .facts { grid-template-columns: 1fr; }
  .film-block .facts { grid-template-columns: 1fr; }
}