:root {
  --gutter: 40px;
  --content-pb: 120px;

  --ink: #000;
  --blue: #5186b4;
  --blue-stroke: #d3dae6;
  --accent: #3a5ce8;
  --accent-ink: #3b6a93;
  --tag-bg: #edf5fe;
  --tag-ink: #32526d;
  --card-from: #f6faff;
  --card-to: #ecf5ff;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "Intel One Mono", ui-monospace, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #4b6478;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

h1, h2, h3, h4, h5, p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Page ---------- */

/* The dark band is sized by script.js (--band-h): it starts 440px above the conclusion
   and eases into its darkest colour where the white text begins. */
.page {
  position: relative;
  z-index: 0;
  background:
    linear-gradient(in oklab 180deg, #edf5fe 0, #dfe9f3 110px, #b4c5d5 220px, #7690a7 330px, #4b6478 440px, #4b6478 100%) bottom / 100% var(--band-h, 1100px) no-repeat,
    linear-gradient(180deg, #fff 0, #edf5fe 1157px) top / 100% 1157px no-repeat,
    #edf5fe;
}

.canvas {
  display: flex;
  gap: 60px;
  align-items: flex-start;
  justify-content: flex-end;
  width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  overflow-x: clip;
}

/* ---------- Typography ---------- */

.h1 {
  font-weight: 700;
  font-size: 100px;
  line-height: 100px;
}

.h2 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 60px;
  line-height: 83px;
  letter-spacing: -3px;
}

.h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -1.8px;
}

.h4 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: -1.1px;
}

.h4--30 {
  line-height: 30px;
}

.p {
  font-weight: 500;
  font-size: 17px;
  line-height: 27px;
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 19px;
  flex-shrink: 0;
  width: 256px;
  padding: 90px 0;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brand__title {
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
}

.brand__tags {
  display: flex;
  gap: 10px;
  padding-left: 2px;
}

/* Line-height equals Inter's cap height so the label is optically centred,
   matching the cap-trimmed text box from the design. */
.tag {
  padding: 7px 8px;
  border-radius: 30px;
  background: var(--tag-bg);
  color: var(--tag-ink);
  font-weight: 600;
  font-size: 11px;
  line-height: 8px;
  white-space: nowrap;
}

/* Sommaire: shared styles live in common.css. */

/* ---------- Main column ---------- */

.content {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 76px;
  align-items: flex-start;
  min-width: 0;
  padding: 120px 0 var(--content-pb);
}

.content [id] {
  scroll-margin-top: 40px;
}

/* Bordered image slot: the image fills the inside of a 1px blue stroke. */
.frame {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--blue);
}

.frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cropped slot: image keeps full width and is offset vertically. */
.frame--crop > img {
  top: var(--crop-top, 0);
  bottom: auto;
  height: var(--crop-h);
  object-fit: fill;
}

.note {
  flex-shrink: 0;
  padding: 10px;
  background: #fff;
}

.note p {
  width: 276.825px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.note strong {
  font-weight: 700;
}

.note em {
  font-style: italic;
}

.card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 190px;
  padding: 20px;
  border: 1px solid var(--blue);
}

.card__title {
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}

.card__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
}

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

.intro {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 464.143px;
}

.intro__head {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pills {
  display: flex;
  gap: 19px;
}

.pill {
  padding: 8px 10px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  white-space: nowrap;
}

.intro__lead {
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
}

.context {
  position: relative;
  width: 399.028px;
  height: 282.021px;
}

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

.context__card {
  position: absolute;
  top: 45.5px;
  left: 0;
  padding: 20px;
  border: 1px solid var(--blue-stroke);
  background: linear-gradient(207.92deg, var(--card-from) 15.62%, var(--card-to) 84.38%);
}

.context__card .p {
  width: 378.028px;
}

.hero-phone {
  position: absolute;
  top: 156.643px;
  left: 571.83px;
  width: 352.101px;
  height: 625.857px;
  overflow: hidden;
  pointer-events: none;
}

.hero-phone img {
  position: absolute;
  top: -18.41%;
  left: -94.05%;
  width: 280.04%;
  height: 118.16%;
  max-width: none;
}

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

.enquete {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 892.529px;
}

.interviews {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.interviews .p { max-width: 540px; }

.stats {
  display: flex;
  gap: 34px;
  align-items: flex-end;
  align-self: flex-start;
  padding: 12px;
  color: var(--accent-ink);
  text-align: center;
  white-space: nowrap;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
}

.stat__value {
  font-weight: 800;
  font-size: 34px;
  line-height: 25px;
}

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

.method {
  display: flex;
  gap: 21px;
  align-items: center;
  height: 419.317px;
}

.method__grid {
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 409.658px;
}

.frame--grilles {
  width: 100%;
  aspect-ratio: 2198 / 1166;
}

.method__insights {
  position: relative;
  width: 201.1px;
  height: 419.317px;
}

.method__insights .h4 {
  white-space: nowrap;
}

.frame--insights {
  position: absolute;
  top: 62.17px;
  left: 0;
  width: 201.1px;
  height: 357.143px;
}

.findings {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}

.card--finding {
  gap: 10px;
  width: 263.5px;
  background: linear-gradient(211.88deg, var(--card-from) 15.62%, var(--card-to) 84.38%);
}

.personas {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 513.028px;
}

.personas__row {
  display: flex;
  gap: 20px;
  align-items: center;
}

.personas__thumbs {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-shrink: 0;
  width: 180.291px;
}

.frame--persona-thumb {
  width: 100%;
  aspect-ratio: 843 / 596;
}

.frame--persona-main {
  width: 688.866px;
  height: 487.028px;
}

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

.ideation {
  display: flex;
  flex-direction: column;
  gap: 52px;
  width: 100%;
}

.ideation__intro {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 540px;
}

.solutions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 873.93px;
}

.card--solution {
  gap: 15px;
  width: 258px;
  background: linear-gradient(212.43deg, var(--card-from) 15.62%, var(--card-to) 84.38%);
}

.card__reco {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card__label {
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  text-transform: uppercase;
}

.archi {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 567px;
}

.archi__intro {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 540px;
}

.archi__title {
  width: 341.863px;
}

.archi__media {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.frame--postits-1 {
  width: 244.793px;
  height: 326.391px;
}

.archi__side {
  display: flex;
  flex-direction: column;
  width: 243.427px;
}

/* The photo is portrait in the source and shown rotated a quarter turn. */
.rotated {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 243.027px;
  height: 182.27px;
}

.frame--postits-2 {
  flex: none;
  width: 182.27px;
  height: 243.027px;
  transform: rotate(90deg);
}

.note--archi p {
  width: 223.427px;
}

.zoning {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.zoning__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 540px;
}

.zoning__media {
  display: flex;
  gap: 19px;
  align-items: flex-start;
}

.sketches {
  position: relative;
  flex-shrink: 0;
  width: 396.647px;
  height: 351.114px;
}

.sketches::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--blue);
  pointer-events: none;
}

/* Positions are percentages of the 396.647 × 351.114 board so it can scale. */
.sketches img {
  position: absolute;
  height: 32.742%;
  object-fit: cover;
}

.zoning__details {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-shrink: 0;
  width: 485.367px;
}

.zoning__row {
  display: flex;
  align-items: flex-end;
}

.zoning__row--first {
  gap: 13px;
}

.zoning__row--second {
  gap: 15px;
  justify-content: flex-end;
}

.frame--zoning-a {
  width: 173.532px;
  height: 253.875px;
}

.frame--zoning-b {
  width: 173.542px;
  height: 251.676px;
}

.note--zoning p + p {
  margin-top: 20px;
}

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

.proto {
  display: flex;
  flex-direction: column;
  gap: 31px;
  width: 860.349px;
}

.proto__ai {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.proto__ai-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 540px;
}

.proto__ai-media {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.proto__ai-images {
  position: relative;
  flex-shrink: 0;
  width: 544.118px;
  height: 396.968px;
}

.frame--ai-desktop {
  position: absolute;
  top: 1.39px;
  left: 0;
  width: 317.803px;
  height: 395.573px;
  --crop-h: 173.74%;
}

.frame--ai-mobile {
  position: absolute;
  top: 0;
  left: 332.8px;
  width: 211.315px;
  height: 193.968px;
  --crop-h: 235.6%;
  --crop-top: -135.6%;
}

.proto__figma {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 852.236px;
}

.proto__figma-row {
  display: flex;
  gap: 44px;
  align-items: flex-start;
}

.proto__step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.proto__step--first { width: 438.774px; }
.proto__step--first .h4 { width: 197.175px; }
.proto__step--final { width: 369.462px; }
.proto__step--final .h4 { width: 167.075px; }

.proto__step-body {
  display: flex;
  align-items: flex-start;
}

.proto__step--first .proto__step-body { gap: 11px; }
.proto__step--final .proto__step-body { gap: 13px; }

.frame--iteration {
  width: 186.483px;
  height: 326.478px;
  --crop-h: 124.47%;
}

.frame--final {
  width: 96.099px;
  height: 369.645px;
}

.note--iteration p { width: 220.107px; }
.note--final p { width: 237.832px; }

.maquette {
  display: flex;
  flex-direction: column;
  gap: 19px;
  width: 803.359px;
}

.maquette__row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.frame--maquette-31 {
  width: 392.691px;
  aspect-ratio: 387.318 / 386.049;
  --crop-h: 132.61%;
}

.maquette__side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  width: 385.839px;
}

.frame--maquette-30 {
  width: 100%;
  height: 212.009px;
  --crop-h: 169.28%;
}

.frame--maquette-13 {
  width: 100%;
  aspect-ratio: 421.173 / 247.947;
  --crop-h: 163.02%;
  --crop-top: -9.63%;
}

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

.conclusion {
  display: flex;
  gap: 49px;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 17px;
  line-height: 27px;
}

.conclusion strong {
  font-weight: 700;
}

.conclusion__col--next { width: 401.178px; }
.conclusion__col--retro { width: 417.879px; }

.conclusion ol {
  list-style: decimal;
}

.conclusion li {
  margin-left: 25.5px;
}

/* =========================================================
   Responsive
   ≥1280px is the Figma frame as designed; below that the
   fixed measurements become maxima and rows wrap.
   ========================================================= */

/* ---------- Tablet landscape (sidebar kept) ---------- */

@media (max-width: 1279px) {
  :root {
    --gutter: 32px;
    --bleed-left: calc(-1 * (var(--gutter) + 296px));
  }

  .canvas {
    width: 100%;
    padding: 0 var(--gutter);
    gap: 40px;
  }

  .content > * {
    max-width: 100%;
  }

  /* Intro + phone */
  .intro { width: 58%; }
  .pills { flex-wrap: wrap; row-gap: 12px; }

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

  .context__title {
    position: static;
    margin-top: -11px;
  }

  .context__card {
    position: static;
  }

  .context__card .p { width: auto; }

  .hero-phone {
    left: auto;
    right: calc(-1 * var(--gutter));
    width: 38%;
    max-width: 352.101px;
    height: auto;
    aspect-ratio: 352.101 / 625.857;
  }

  /* Enquêtes */
  .enquete { width: 100%; }
  .interviews { height: auto; }

  .method {
    flex-wrap: wrap;
    height: auto;
  }

  .method__grid {
    flex: 1 1 300px;
    width: auto;
    max-width: 409.658px;
  }

  .method__insights {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
  }

  .frame--insights {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 201.1 / 357.143;
  }

  .findings,
  .cards,
  .personas { height: auto; }

  .card {
    height: auto;
    min-height: 190px;
  }

  .card--finding { flex: 1 1 200px; width: auto; max-width: 263.5px; }
  .card--solution { flex: 1 1 200px; width: auto; max-width: 258px; }

  .personas__thumbs { width: 20.28%; }

  .frame--persona-main {
    flex: 1 1 0;
    width: auto;
    height: auto;
    aspect-ratio: 688.866 / 487.028;
  }

  /* Idéation */
  .ideation__intro { width: auto; max-width: 540px; }
  .solutions { width: 100%; }
  .archi { width: auto; max-width: 567px; }
  .archi__title { max-width: 341.863px; width: auto; }
  .zoning__intro { width: auto; max-width: 540px; }

  .zoning__media { flex-wrap: wrap; }

  .sketches {
    width: 100%;
    max-width: 396.647px;
    height: auto;
    aspect-ratio: 396.647 / 351.114;
  }

  .zoning__details {
    width: auto;
    max-width: 485.367px;
  }

  /* Prototypage */
  .proto,
  .proto__figma,
  .maquette { width: 100%; }

  .proto__ai-intro { width: auto; max-width: 540px; }

  .proto__ai-media,
  .proto__figma-row,
  .maquette__row { flex-wrap: wrap; }

  .proto__figma-row { row-gap: 32px; }

  .proto__ai-images {
    width: 100%;
    max-width: 544.118px;
    height: auto;
    aspect-ratio: 544.118 / 396.968;
  }

  .frame--ai-desktop { top: 0.351%; width: 58.407%; height: 99.649%; }
  .frame--ai-mobile { left: 61.163%; width: 38.836%; height: 48.863%; }

  .proto__step--first,
  .proto__step--final { width: auto; max-width: 100%; }

  .frame--maquette-31 {
    flex: 1 1 300px;
    width: auto;
    max-width: 392.691px;
  }

  .maquette__side {
    flex: 1 1 300px;
    width: auto;
    max-width: 385.839px;
  }

  .frame--maquette-30 {
    height: auto;
    aspect-ratio: 385.839 / 212.009;
  }

  /* Conclusion */
  .conclusion {
    position: relative;
    flex-wrap: wrap;
    align-items: flex-start;
    align-self: stretch;
    row-gap: 32px;
  }

  .conclusion__col--next,
  .conclusion__col--retro {
    flex: 1 1 300px;
    width: auto;
    max-width: 417.879px;
  }
}

/* ---------- Tablet portrait: sommaire becomes a sticky top bar ---------- */

@media (max-width: 1023px) {
  :root {
    --gutter: 24px;
    --content-pb: 96px;
    --bleed-left: calc(-1 * var(--gutter));
  }

  .canvas {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Top bar: back arrow, then the sommaire as progress + chips. */
  .sidebar {
    z-index: 20;
    flex-direction: row;
    align-items: center;
    width: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0;
    gap: 0;
    border-bottom: 1px solid #dfe5ee;
    background: rgba(248, 251, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .sidebar .back-button { align-self: center; }

  .brand { display: none; }

  .toc {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .toc__header {
    position: static;
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 52px;
    padding: 0 12px;
    border-bottom: 0;
    border-right: 1px solid #000;
    background: none;
  }

  .toc__header::after,
  .toc__connector,
  .toc__marker,
  .toc__marker-active,
  .toc__halo,
  .toc__arrow { display: none; }

  .toc__header-marker,
  .toc__title,
  .toc__progress { position: static; }

  .toc__list {
    position: static;
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
    padding: 10px var(--gutter) 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .toc__list::-webkit-scrollbar { display: none; }

  .toc .toc__list > .toc__item {
    flex: none;
    margin-top: 0;
  }

  .toc .toc__item a {
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    line-height: 30px;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .toc .toc__item.is-current a { border-color: #000; color: #000; box-shadow: none; }

  .content {
    padding-top: 40px;
  }

  .content [id] { scroll-margin-top: 72px; }

  .hero-phone { top: 40px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --content-pb: 80px;
  }

  .toc__title { display: none; }

  .content {
    gap: 56px;
    padding-top: 32px;
  }

  .h1 { font-size: 64px; line-height: 64px; }
  .h2 { font-size: 44px; line-height: 56px; letter-spacing: -2.2px; }
  .h3 { font-size: 28px; line-height: 34px; letter-spacing: -1.4px; }

  .pills { gap: 10px; }
  .pill { padding: 6px 10px; font-size: 16px; line-height: 20px; }

  .intro { width: 100%; }

  .context__title,
  .context__card { margin-left: 0; }

  .hero-phone {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-end;
    width: min(280px, 75%);
    margin-right: calc(-1 * var(--gutter));
  }

  .stats { gap: 24px; }

  .card--finding,
  .card--solution { flex-basis: 100%; max-width: none; }

  .personas__row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .personas__thumbs {
    order: 1;
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }

  .frame--persona-thumb { flex: 1 1 0; width: auto; }
  .frame--persona-main { flex: none; width: 100%; }

  .content .note {
    flex-shrink: 1;
    min-width: 0;
  }

  .content .note p { width: auto; }

  /* Architecture: stack the photos; the rotated one keeps its quarter turn. */
  .archi__media { flex-direction: column; }

  .frame--postits-1 {
    width: 100%;
    height: auto;
    aspect-ratio: 244.793 / 326.391;
  }

  .archi__side { width: 100%; }

  .rotated {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 243.027 / 182.27;
  }

  .frame--postits-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 133.333%;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .zoning__details { width: 100%; }

  .zoning__row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .frame--zoning-a,
  .frame--zoning-b {
    align-self: flex-start;
    width: 60%;
    height: auto;
  }

  .frame--zoning-a { aspect-ratio: 173.532 / 253.875; }
  .frame--zoning-b { aspect-ratio: 173.542 / 251.676; }

  .proto__step-body { flex-wrap: wrap; row-gap: 12px; }
  .proto__step-body .note { flex: 1 1 200px; }

  .conclusion__col--next,
  .conclusion__col--retro { flex-basis: 100%; max-width: none; }
}