/* "C'est quoi le plan ?" — sections specific to this case study. */

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

.p-brand-title { width: 166.789px; }

/* Kit artwork overlapping the hero, positioned on the 1280 canvas. */
.p-hero-img {
  position: absolute;
  top: 272.62px;
  left: 813.03px;
  width: 475px;
  height: 481.378px;
  object-fit: cover;
  pointer-events: none;
}

.p-list-block { width: 447.156px; }
.p-list-block .list { width: 447.156px; }

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

.p-intro { gap: 28px; width: 100%; }
.p-head { gap: 20px; }

.p-context { gap: 6px; width: 420px; }
.p-context__title { width: 100%; }
.p-context .context-card { width: 100%; }

.p-enjeux { gap: 5px; }

/* ---------- Enquêtes ---------- */

.p-enquetes { gap: 49px; width: 100%; }
.p-enquetes > .h2 { width: 100%; }

.p-interviews { gap: 3px; width: 540px; }
.p-objectif { gap: 7px; }
.p-insights { gap: 9px; width: 100%; }

.p-card {
  gap: 10px;
  width: 263.5px;
  align-self: stretch;
}

.p-personas-text { gap: 6px; width: 540px; }

.p-personas { gap: 18px; }
.p-personas__col { gap: 13px; width: 220.59px; }
.p-persona-asso { width: 100%; aspect-ratio: 2053 / 1502; }
.p-persona-elue { width: 100%; aspect-ratio: 2053 / 1636; }
.p-persona-etudiant { width: 512.127px; height: 348.985px; }

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

.p-ideation { gap: 32px; width: 100%; }
.p-ideation > .h2 { width: 100%; }

.p-ideas { gap: 20px; width: 100%; }
.p-ideas__row { align-items: flex-end; }
.p-ideas__row--kit { gap: 15px; }
.p-ideas__row--scenario { gap: 14px; width: 100%; }

.p-patron { width: 271.489px; height: 383.547px; }
.p-scenario { width: 463.308px; height: 246.163px; }

.p-basse { gap: 6px; width: 540px; }

.p-test {
  position: relative;
  width: 100%;
  height: 392px;
}

.p-test__text {
  position: absolute;
  top: 0;
  left: 0;
  gap: 7px;
  width: 540px;
}

.p-test__media {
  position: absolute;
  top: 98px;
  left: 0.35%;
  gap: 13px;
  align-items: flex-end;
  width: 99.65%;
}

.p-test__img { width: 393.227px; height: 294.042px; }

.p-improve {
  position: relative;
  width: 887.5px;
  height: 748.9px;
}

.p-improve > * { position: absolute; }

.p-improve__note { top: 513.9px; left: 642.5px; }
.p-improve__title { width: 311.488px; }
.p-improve__title--1 { top: 82px; left: 0; }
.p-improve__title--2 { top: 32px; left: 524.3px; }
.p-improve__before { top: 121px; left: 2.08px; width: 286.874px; height: 405.282px; }
.p-improve__pyramide { top: 71px; left: 527.5px; width: 304.987px; height: 430.871px; }
.p-improve__manuel { top: 315.7px; left: 322px; width: 306.63px; height: 433.192px; }
.p-improve__arrow { top: 260.5px; left: 298.3px; width: 76.178px; height: 46.626px; }

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

.p-proto { gap: 16px; width: 100%; }
.p-proto > .h2 { width: 100%; }
.p-proto__body { gap: 25px; width: 100%; }

.p-hf { gap: 12px; width: 540px; }
.p-ia { gap: 3px; width: 540px; }

.p-ia-media {
  position: relative;
  width: 627.793px;
  height: 715.282px;
}

.p-ia-media__img { width: 100%; height: 100%; }

.p-ia-media__note {
  position: absolute;
  top: 455.3px;
  left: 326.5px;
}

/* ---------- Test utilisateur final ---------- */

.p-final { gap: 48px; width: 100%; }
.p-final__main { gap: 48px; width: 766.105px; }
.p-final__head { gap: 14px; }
.p-final__intro { gap: 8px; width: 540px; }

.p-stats {
  gap: 14px;
  align-items: flex-end;
  padding: 12px;
  border: 1px solid var(--stroke);
  background: var(--tint);
  color: #7b412b;
  text-align: center;
  white-space: nowrap;
}

.p-stats--interviews { margin-top: 12px; }

.p-stat {
  gap: 7px;
  align-items: center;
}

/* Line-heights equal the cap height, matching Figma's cap-trimmed text boxes. */
.p-stat__value {
  font-weight: 800;
  font-size: 34px;
  line-height: 25px;
}

.p-stat__label {
  font-weight: 400;
  font-size: 16px;
  line-height: 12px;
}

.p-workshop { gap: 20px; width: 100%; }
.p-workshop__photos { gap: 21px; width: 326.482px; }
.p-workshop__text { gap: 7px; width: 415.045px; }

.p-photo-1 {
  width: 100%;
  aspect-ratio: 927.852 / 701.967;
  --crop-top: -42.2%;
  --crop-h: 176.24%;
}

.p-photo-2 {
  width: 100%;
  aspect-ratio: 321.245 / 233.5;
  --crop-top: -29.51%;
  --crop-left: -19.21%;
  --crop-w: 119.21%;
  --crop-h: 218.68%;
}

.p-results { gap: 9px; width: 100%; }

/* Figma "Pink Gradient" paint style: white to #fff4f0, top to bottom. */
.p-card--result { background: linear-gradient(180deg, #fff 0%, #fff4f0 100%); }

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

.p-conclusion { gap: 45px; width: 100%; }

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

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

  /* Fixed Figma heights give way to the content once columns get narrower. */
  .p-intro,
  .p-enquetes,
  .p-ideation,
  .p-ideas,
  .p-basse,
  .p-proto,
  .p-final,
  .p-final__main,
  .p-conclusion { height: auto; }

  .page--plan .content { gap: 76px; }
  .p-ideation { gap: 32px; }

  .p-hero-img {
    top: 200px;
    left: auto;
    right: 0;
    width: 30%;
    height: auto;
    aspect-ratio: 475 / 481.378;
  }

  .p-head { max-width: 62%; }

  .p-list-block,
  .p-list-block .list,
  .p-context,
  .p-interviews,
  .p-personas-text,
  .p-hf,
  .p-ia,
  .p-final__main,
  .p-final__intro { width: auto; max-width: 100%; }

  .p-personas,
  .p-ideas__row,
  .p-workshop { flex-wrap: wrap; row-gap: 16px; }

  .p-persona-etudiant {
    width: 100%;
    max-width: 512.127px;
    height: auto;
    aspect-ratio: 512.127 / 348.985;
  }

  .p-scenario {
    width: 100%;
    max-width: 463.308px;
    height: auto;
    aspect-ratio: 463.308 / 246.163;
  }

  /* Absolute compositions return to the flow. */
  .p-test,
  .p-improve,
  .p-ia-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    height: auto;
  }

  .p-test__text,
  .p-test__media,
  .p-improve > *,
  .p-ia-media__note { position: static; top: auto; left: auto; }

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

  .p-test__text { width: auto; }
  .p-test__media { flex-wrap: wrap; width: auto; }

  .p-test__img {
    width: 100%;
    max-width: 393.227px;
    height: auto;
    aspect-ratio: 393.227 / 294.042;
  }

  .p-improve__arrow { display: none; }

  /* "Première version" then "Version finale" in reading order. */
  .p-improve__title--1 { order: 0; }
  .p-improve__title { margin-bottom: -7px; }
  .p-improve__before { order: 1; }
  .p-improve__title--2 { order: 2; margin-top: 16px; }
  .p-improve__pyramide { order: 3; }
  .p-improve__manuel { order: 4; }
  .p-improve__note { order: 5; }

  .p-improve__before,
  .p-improve__pyramide,
  .p-improve__manuel {
    width: 100%;
    max-width: 306.63px;
    height: auto;
    aspect-ratio: 596 / 842;
  }

  .p-ia-media__img {
    width: 100%;
    max-width: 627.793px;
    height: auto;
    aspect-ratio: 627.793 / 715.282;
  }
}

@media (max-width: 1023px) {
  .p-brand-title,
  .page--plan .brand__tags { display: none; }

  .p-hero-img { top: 120px; }
}

@media (max-width: 767px) {
  .p-head { max-width: 100%; }

  /* Artwork moves into the flow, between the top bar and the content. */
  .p-hero-img {
    position: static;
    order: 1;
    width: min(320px, 85%);
    margin: 32px auto 0;
  }

  .page--plan .content { order: 2; }

  .p-context__title { white-space: normal; }
  .p-personas__col { flex-direction: row; width: 100%; }
  .p-personas__col > * { flex: 1 1 0; width: auto; }
  .p-patron { width: min(271.489px, 100%); height: auto; aspect-ratio: 271.489 / 383.547; }
  .p-workshop__photos,
  .p-workshop__text { width: 100%; }
  .p-workshop__text .p3 { width: auto !important; }
  .p-card { max-width: none; }
}