.project-narrative {
  counter-reset: process-step;
}

.process-step {
  counter-increment: process-step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: var(--space-2xs) var(--space-sm);
  margin-block: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-soft);
}

.process-step:last-child {
  border-bottom: none;
}

.process-step-head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: baseline;
  gap: var(--space-sm);
}

.process-step-number {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--sun);
}
.process-step-number::before {
  content: counter(process-step, decimal-leading-zero);
}

.process-step-title {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--flame);
  text-transform: none;
}

.process-step-text {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  color: var(--white);
  white-space: pre-line;
  line-height: 1.6;
}

@media (min-width: 40em) {
  .process-step-text {
    grid-column: 2 / -1;
  }
}

/* --- Images : mobile = simple stack vertical --- */
.process-step-images {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-2xs);
}

.process-step-images img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  background: var(--surface-1);
  aspect-ratio: 4 / 3;
}

/* ---------- 1 image ---------- */
.process-step-images--1 img {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}

/* ---------- 2 images ---------- */
@media (min-width: 40em) {
  .process-step-images--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .process-step-images--2 img {
    aspect-ratio: 16 / 9;
  }
}

/* ---------- 3 images ---------- */
.process-step-images--3 img:first-child {
  aspect-ratio: 16 / 9;
}

@media (min-width: 40em) {
  .process-step-images--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .process-step-images--3 img:first-child {
    grid-column: 1 / -1;
  }
  .process-step-images--3 img:nth-child(2),
  .process-step-images--3 img:nth-child(3) {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 60em) {
  .process-step-images--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .process-step-images--3 img:first-child {
    grid-column: auto;
    aspect-ratio: 1 / 1;
  }
}

/* ---------- 4 et 6 images ---------- */
@media (min-width: 40em) {
  .process-step-images--4,
  .process-step-images--6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60em) {
  .process-step-images--4,
  .process-step-images--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.process-step-images--6 img:nth-child(3),
.process-step-images--6 img:nth-child(4) {
  aspect-ratio: 16 / 10;
}
.process-step-images--6 img:not(:nth-child(3)):not(:nth-child(4)) {
  aspect-ratio: 2 / 1;
}

/* ---------- 5 images (mosaïque) ---------- */
@media (min-width: 40em) {
  .process-step-images--5 {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  .process-step-images--5 img:nth-child(1),
  .process-step-images--5 img:nth-child(2) {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }

  .process-step-images--5 img:nth-child(3) {
    grid-column: 2 / 4;
    aspect-ratio: 16 / 10;
  }

  .process-step-images--5 img:nth-child(4),
  .process-step-images--5 img:nth-child(5) {
    grid-column: span 2;
    aspect-ratio: 1.8 / 1;
  }
}