/* "Visite interactive" — sections specific to this case study. */

.page--visite .content { gap: 76px; }

/* ---------- Intro ---------- */

.v-intro { gap: 48px; }
.v-head { gap: 22px; }

.v-retro {
  position: relative;
  width: 399px;
  height: 357.5px;
}

.v-retro__title {
  position: absolute;
  top: -11px;
  left: 0;
  white-space: nowrap;
}

.v-retro__card {
  position: absolute;
  top: 45.5px;
  left: 0;
}

/* ---------- Recherche ---------- */

.v-recherche { gap: 10px; }
.v-recherche .h2 { white-space: nowrap; }
.v-probl { gap: 24px; }
.v-probl__intro { gap: 7px; }
.v-probl__intro .h3 { white-space: nowrap; }

.v-questions { gap: 32px; }

.v-question {
  gap: 12px;
  width: 270px;
}

/* ---------- Idéation ---------- */

.v-ideation { gap: 52px; }
.v-ideation__top { gap: 24px; }
.v-ideation__text { gap: 5px; }
.v-ideation__text .h2 { white-space: nowrap; }

.v-termes { gap: 32px; }

.v-termes__img {
  width: 230.199px;
  height: 322.456px;
}

.v-termes__img img { object-position: bottom; }

.v-termes__list {
  gap: 36px;
  font-weight: 600;
  font-size: 15px;
  line-height: 18px;
  white-space: nowrap;
}

.v-termes__col { gap: 6px; }
.v-termes__col--light { color: var(--accent-ink); }
.v-termes__col--dark { color: var(--accent-ink-dark); }

.v-solutions { gap: 1px; }
.v-solutions .h4 { white-space: nowrap; }
.v-solutions__body { gap: 15px; }
.v-solutions__cards { width: 873px; }

.v-sol-card {
  gap: 15px;
  width: 258px;
  min-height: 190px;
}

.v-sol-card__reco {
  gap: 2px;
}

.v-solutions__note {
  display: flex;
  justify-content: center;
  width: 258px;
}

/* ---------- Prototypage ---------- */

.v-proto { gap: 31px; }
.v-block { gap: 18px; }
.v-block__intro { gap: 8px; }
.v-block__intro .h3 { white-space: nowrap; }

/* Iterations: screens on the left, arrows at x 196, notes at x 236. */
.v-iterations {
  position: relative;
  width: 445px;
  height: 1663.126px;
}

.v-it {
  position: absolute;
  left: 0;
}

.v-it--1 { top: 0; width: 184.134px; height: 393.126px; }
.v-it--3 { top: 847px; width: 178.909px; height: 392.259px; }
.v-it--4 { top: 1270px; width: 179.305px; height: 393.126px; }

.v-it--2 {
  top: 423.13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 186.49px;
  height: 393.126px;
}

.v-it--2 .frame {
  flex: none;
  width: 184.647px;
  height: 392.262px;
  border-radius: 14px;
  transform: rotate(-0.27deg);
  --crop-top: -6.59%;
  --crop-left: -170.67%;
  --crop-w: 301.91%;
  --crop-h: 116.91%;
}

.v-arrow {
  position: absolute;
  left: 196px;
  width: 32.93px;
  height: 5.7735px;
}

.v-it-note {
  position: absolute;
  left: 236px;
}

.v-it-note .p3 { width: 189px; }

/* QR code posters */
.v-posters-row {
  gap: 24px;
  align-items: center;
}

.v-posters {
  position: relative;
  flex-shrink: 0;
  width: 583.875px;
  height: 237.911px;
}

.v-poster {
  position: absolute;
  top: 0;
  object-fit: cover;
}

.v-poster--1 { left: 0; width: 165.824px; height: 234.697px; }
.v-poster--2 { left: 205.4px; width: 168.075px; height: 237.911px; }
.v-poster--3 { left: 415.8px; width: 168.075px; height: 237.91px; }

.v-poster-arrow {
  position: absolute;
  top: 113.23px;
  width: 34.575px;
  height: 11.547px;
}

/* Maquette */
.v-maquette { gap: 40px; }

.v-declinaisons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 504.733px;
  height: 273.64px;
}

.v-declinaisons .frame {
  flex: none;
  width: 503.462px;
  height: 271.275px;
  transform: rotate(-0.27deg);
}

.v-maquette__cols { gap: 49px; }
.v-maquette__col { gap: 10px; }

.v-code { width: 346.821px; height: 271.272px; }
.v-graphisme { width: 298.386px; height: 217.626px; }

/* ---------- Conclusion ---------- */

.v-conclusion { gap: 49px; }

/* ---------- Responsive ---------- */

@media (max-width: 1279px) {
  .content .p,
  .content .p3,
  .content .h2,
  .content .h3 { max-width: 100%; }

  .v-retro {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: auto;
    height: auto;
  }

  .v-retro__title {
    position: static;
    margin-top: -11px;
    white-space: normal;
  }

  .v-retro__card {
    position: static;
  }

  .v-questions { flex-wrap: wrap; row-gap: 28px; }
  .v-termes { flex-wrap: wrap; }
  .v-solutions__cards { width: 100%; }
  .v-sol-card { max-width: 258px; }

  .v-posters-row,
  .v-maquette__cols { flex-wrap: wrap; row-gap: 24px; }

  .v-declinaisons {
    width: 100%;
    max-width: 504.733px;
    height: auto;
    aspect-ratio: 504.733 / 273.64;
  }

  .v-declinaisons .frame {
    width: 99.75%;
    height: auto;
    aspect-ratio: 503.462 / 271.275;
  }
}

@media (max-width: 767px) {
  .v-recherche .h2,
  .v-ideation__text .h2,
  .v-probl__intro .h3,
  .v-block__intro .h3 { white-space: normal; }

  .v-question { width: 100%; }
  .v-sol-card { max-width: none; }
  .v-solutions__note { width: 100%; }

  /* Iterations become a vertical flow: each screen followed by its notes. */
  .v-iterations {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: auto;
  }

  .v-it,
  .v-it-note { position: static; top: auto !important; left: auto; }

  /* Image slots stay the positioning context of their image. */
  .v-it.frame { position: relative; }

  .v-it { align-self: center; }
  .v-it--2 .frame { transform: none; }
  .v-arrow { display: none; }

  /* Screen, its "Problèmes identifiés", then the "Changements" leading to the next screen. */
  .v-it--1 { order: 1; }
  .v-iterations > :nth-child(6) { order: 2; }
  .v-iterations > :nth-child(8) { order: 3; }
  .v-it--2 { order: 4; }
  .v-iterations > :nth-child(10) { order: 5; }
  .v-iterations > :nth-child(12) { order: 6; }
  .v-it--3 { order: 7; }
  .v-iterations > :nth-child(14) { order: 8; }
  .v-iterations > :nth-child(16) { order: 9; }
  .v-it--4 { order: 10; }

  .v-it-note .p3 { width: auto; }

  /* Posters scale down as one block. */
  .v-posters {
    width: 100%;
    height: auto;
    aspect-ratio: 583.875 / 237.911;
  }

  .v-poster--1 { width: 28.4%; height: 98.65%; }
  .v-poster--2 { left: 35.18%; width: 28.79%; height: 100%; }
  .v-poster--3 { left: 71.21%; width: 28.79%; height: 100%; }

  .v-poster-arrow { top: 47.6%; width: 5.92%; height: auto; }
  .v-posters > .v-poster-arrow:nth-child(2) { left: 28.91% !important; }
  .v-posters > .v-poster-arrow:nth-child(4) { left: 64.77% !important; }

  .v-code,
  .v-graphisme {
    width: 100%;
    height: auto;
  }

  .v-code { aspect-ratio: 346.821 / 271.272; }
  .v-graphisme { max-width: 298.386px; aspect-ratio: 298.386 / 217.626; }
}