/* 13 Oct 2026: the media cells fall back to the soft cloud plate (053); case-plates.js lays the project's own dream plate over it. */
/* Case study pages, the written sections (30 Sept 2026, round 2). Hulusi:
   the first pass was sharp tables with no visuals, not the homepage's
   language. Now the homepage's own pattern (editorial.css .ed-frame and
   .ed-card): a centred heading, then a soft grey frame holding white
   rounded cards, each card pairing its words with a real screen of the
   project or a photograph of the team. No hairlines, no numbering columns.
   Copy comes from build-pages.py (COPY); a section with no copy is left out. */
.cp { width: min(100% - 3rem, 75rem); margin: clamp(4rem, 8vw, 7rem) auto 0; color: var(--ed-ink, #121417); }
.cp__head { max-width: 40rem; margin: 0 auto 2rem; text-align: center; }
.cp__head h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
.cp__head p { margin: .75rem 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ed-muted, #51565e); }
.cp__head a { color: var(--ed-ink, #121417); font-weight: 500; text-underline-offset: .2em; }
.cp__frame { display: grid; gap: .75rem; padding: .75rem; border-radius: 2rem; background: var(--ed-frame, #eaecee); }
.cp__card { position: relative; overflow: hidden; border-radius: 1.25rem; background: var(--surface, #fff); }
.cp__n { display: block; margin-bottom: 1.25rem; font-size: .875rem; font-weight: 500; color: var(--brand, #0052f8); font-variant-numeric: tabular-nums; }
.cp__card h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 500; }
.cp__card p { margin: .5rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--ed-muted, #51565e); }

/* Context: the words on the left, a screen standing in the right card. */
.cp__frame--context { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.cp__card--text { padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 2rem; }
.cp__card--text > div { align-self: end; }
/* The context's title lives inside its card (Hulusi), in the same size as the section headings. */
.cp__in-title { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; }
.cp__lead { font-size: clamp(1.25rem, 1.8vw, 1.625rem) !important; line-height: 1.35 !important; letter-spacing: -.02em; color: var(--ed-ink, #121417) !important; }
.cp__card--text p + p { margin-top: 1.25rem; }
.cp__card--media { min-height: 22rem; display: grid; place-items: end center; background: var(--ed-blue-wash, #e9f0ff) url("../../img/backgrounds/dream/figma/card/ai-bg-053.webp") center / cover; }
.cp__card--media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cp__card--media.cp__card--phone { padding: 2.5rem 2.5rem 0; }
.cp__card--media.cp__card--phone .dvc { width: min(15rem, 72%); filter: drop-shadow(0 30px 50px rgb(0 20 80 / .35)); }

/* Built: one card per deliverable, its screen at the foot. */
.cp__frame--built { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp__frame--built.cp__frame--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp__card--built { display: grid; grid-template-rows: auto auto auto 1fr; padding: 1.75rem 1.75rem 0; }
.cp__shot { position: relative; margin-top: 1.5rem; height: 13rem; border-radius: 1rem 1rem 0 0; overflow: hidden; background: var(--ed-frame, #eaecee); }
.cp__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cp__shot--phone { display: grid; place-items: end center; background: var(--ed-blue-wash, #e9f0ff); padding: 1.25rem 1.25rem 0; }
.cp__shot--phone .dvc { width: 10rem; filter: drop-shadow(0 18px 30px rgb(0 20 80 / .3)); }

/* How: the three phases, a photograph of the team over each. */
.cp__frame--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp__card--phase > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cp__phase { padding: 1.5rem 1.5rem 1.75rem; }
.cp__phase ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.cp__phase li { position: relative; padding-left: 1.125rem; font-size: .9375rem; line-height: 1.5; color: var(--ed-muted, #51565e); }
.cp__phase li::before { content: ""; position: absolute; left: 0; top: .6em; width: .375rem; height: .375rem; border-radius: 50%; background: var(--brand, #0052f8); }

/* Results: the figures as cards, the first in cobalt. */
.cp__frame--results { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cp__card--figure { display: grid; gap: .5rem; align-content: end; min-height: 12rem; padding: 1.75rem; }
.cp__card--figure b { font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1; letter-spacing: -.05em; font-weight: 500; font-variant-numeric: tabular-nums; }
.cp__card--figure.is-first { background: var(--brand, #0052f8); color: #fff; }
.cp__card--figure span { font-size: 1rem; color: var(--ed-muted, #51565e); }
.cp__card--figure.is-first span { color: rgb(255 255 255 / .8); }
.cp__card--note { display: grid; align-content: end; padding: 1.75rem; }
.cp__card--note p { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ed-ink, #121417); }

/* The header plate for web projects: the laptop with the site on its screen. */
.dv--laptop .cc__laptop { position: absolute; left: 40%; bottom: -6%; width: 56%; aspect-ratio: 1306 / 1123; transform: none; opacity: 1; --t: 1; animation: dv-rise 1300ms cubic-bezier(.2, .8, .2, 1) both; }
.dv--laptop .cc__laptop .cc__device { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 26px 34px rgb(18 32 80 / .22)); }
.dv--laptop .cc__laptop .cc__screen { position: absolute; left: 9.01%; top: 2.97%; width: 81.5%; height: 61.3%; overflow: hidden; border-radius: .4% / .6%; background: #fff; }
.dv--laptop .cc__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

@media (max-width: 899px) {
  .cp__frame--context, .cp__frame--built, .cp__frame--built.cp__frame--3, .cp__frame--3 { grid-template-columns: 1fr; }
  .cp__frame { border-radius: 1.5rem; }
  .dv--laptop .cc__laptop { left: 6%; width: 100%; bottom: -4%; }
}
@media (prefers-reduced-motion: reduce) { .dv--laptop .cc__laptop { animation: none; } }

/* A real screen inside a real bezel (Lena's iPhone render with its display
   cleared, the Dynamic Island kept). The screen sits under the bezel at the
   measured display box: left 4.08%, top 2%, width 90.7%, height 96.25%,
   corners 13.48% / 6.23%. Cards that stand the phone on their bottom edge
   show its top part only (.dvc--tall shows more). */
.dvc { position: relative; display: block; aspect-ratio: 785 / 1600; overflow: hidden; }
.dvc__bezel { position: absolute; inset: 0; width: 100%; height: 100%; }
.dvc__screen { position: absolute; left: 4.08%; top: 2%; width: 90.7%; height: 96.25%; object-fit: cover; object-position: top; border-radius: 13.48% / 6.23%; background: #fff; }
.cp__shot--phone .dvc, .cp__card--media.cp__card--phone .dvc { aspect-ratio: auto; height: 100%; }
.cp__shot--phone .dvc { height: auto; aspect-ratio: 785 / 1600; }
.cp__shot--phone { align-items: end; }

/* ================= Round 4 (30 Sept): one shape per section =================
   Hulusi: everything sat in the same card grid, boring. Each section has its
   own shape now. Shared: a small cobalt kicker instead of a centred H2. */
.cx__kicker { margin: 0 0 1rem; font-size: .9375rem; font-weight: 500; color: var(--brand, #0052f8); }

/* Le contexte: a statement set large, the screen bleeding off the right edge. */
/* One column for every section (Hulusi, 1 Oct: each section had its own
   width): the hero's 75rem. The context's media is the only thing that
   leaves it, bleeding to the window's right edge. */
.cx { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); width: min(100% - 3rem, 75rem); margin: clamp(4rem, 8vw, 7rem) auto 0; color: var(--ed-ink, #121417); }
.cx__statement { margin: 0; max-width: 16em; font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.12; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
.cx__more { margin: 1.5rem 0 0; max-width: 34rem; font-size: 1.0625rem; line-height: 1.55; color: var(--ed-muted, #51565e); }
/* The phone stands in a soft cobalt ground that fades into the page, and
   runs out of it at the bottom: a device leaving the frame, not a cropped
   picture (Hulusi, 1 Oct). The web screen keeps its bleed off the right. */
.cx__media { position: relative; min-height: 26rem; }
.cx__media--phone { align-self: stretch; height: clamp(30rem, 54vh, 38rem); margin-right: min(-1.5rem, calc(37.5rem - 50vw)); }
.cx__media--phone::before { content: ""; position: absolute; inset: 0 0 0 -10%; border-radius: 2rem 0 0 2rem; background: radial-gradient(120% 90% at 70% 100%, rgb(0 82 248 / .22) 0, rgb(0 82 248 / .06) 45%, rgb(0 82 248 / 0) 75%); }
/* The phone is sized from the ground's height so its top always stays inside the section; only its foot leaves. */
.cx__media--phone .dvc { position: absolute; left: 14%; bottom: -10%; height: 104%; width: auto; aspect-ratio: 785 / 1600; filter: drop-shadow(0 40px 60px rgb(0 20 80 / .3)); }
.cx__media--web { overflow: hidden; }
.cx__media--web { margin-right: min(-1.5rem, calc(37.5rem - 50vw)); }
.cx__media--web img { position: absolute; left: 0; top: 50%; width: 100%; max-width: none; translate: 0 -50%; border-radius: 14px; box-shadow: 0 0 0 1px rgb(18 20 23 / .08), 0 40px 70px -36px rgb(18 32 80 / .45); }

/* Ce que nous avons construit: a list on the left, the active line's screen on the right. */
.bl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); width: min(100% - 3rem, 75rem); margin: clamp(5rem, 10vw, 8rem) auto 0; color: var(--ed-ink, #121417); }
.bl__rows { list-style: none; margin: 0; padding: 0; }
.bl__row { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--ed-line, #d8dce1); cursor: default; transition: opacity 240ms ease; }
.bl__row:last-child { border-bottom: 1px solid var(--ed-line, #d8dce1); }
.bl__n { grid-row: 1 / span 2; font-size: .9375rem; color: var(--ed-muted, #51565e); font-variant-numeric: tabular-nums; padding-top: .35rem; }
.bl__row h3 { margin: 0; font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 500; transition: color 240ms ease; }
.bl__row p { grid-column: 2; margin: .5rem 0 0; max-width: 30rem; font-size: 1rem; line-height: 1.5; color: var(--ed-muted, #51565e); }
.bl__row:not(.is-on) { opacity: .45; }
.bl__row.is-on h3 { color: var(--brand, #0052f8); }
.bl__stage { position: sticky; top: 6rem; align-self: start; display: grid; place-items: center; height: min(60vh, 34rem); border-radius: 1.5rem; background: var(--ed-blue-wash, #e9f0ff) url("../../img/backgrounds/dream/figma/plate/ai-bg-053.webp") center / cover; overflow: hidden; }
.bl__shot { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity 320ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1); }
.bl__shot.is-on { opacity: 1; transform: none; }
.bl__shot .dvc { width: min(15rem, 46%); aspect-ratio: 785 / 1600; height: auto; filter: drop-shadow(0 30px 50px rgb(0 20 80 / .35)); }
.bl__shot > img { width: 86%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgb(18 20 23 / .08), 0 30px 60px -30px rgb(18 32 80 / .5); }

/* Comment nous avons travaillé: a line across the page, three stops. */
.tl { width: min(100% - 3rem, 75rem); margin: clamp(5rem, 10vw, 8rem) auto 0; color: var(--ed-ink, #121417); }
.tl__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.tl__lede { margin: 0; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.3; letter-spacing: -.02em; }
.tl__lede a { color: var(--brand, #0052f8); text-decoration: none; }
.tl__line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); position: relative; }
.tl__line::before { content: ""; position: absolute; left: 0; right: 0; top: calc(9rem + 1.5rem + .4rem); height: 2px; background: var(--ed-line, #d8dce1); }
.tl__stop { position: relative; display: grid; gap: .25rem; }
.tl__stop > img { display: block; width: 100%; height: 9rem; object-fit: cover; border-radius: 12px; margin-bottom: 1.5rem; }
.tl__dot { display: block; width: .875rem; height: .875rem; border-radius: 50%; background: var(--brand, #0052f8); box-shadow: 0 0 0 4px #fff; margin-bottom: 1rem; }
.tl__n { font-size: .875rem; color: var(--ed-muted, #51565e); font-variant-numeric: tabular-nums; }
.tl__stop h3 { margin: 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; }
.tl__stop ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.tl__stop ul li { font-size: .9375rem; line-height: 1.5; color: var(--ed-muted, #51565e); }

@media (max-width: 899px) {
  .cx, .bl, .tl__head, .tl__line { grid-template-columns: 1fr; }
  .cx { padding-right: 1.5rem; } .cx__media { min-height: 20rem; } .cx__media--web img { position: static; width: 100%; translate: none; }
  .bl__stage { position: static; height: 22rem; }
  .tl__line::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bl__shot, .bl__row, .bl__row h3 { transition: none; } }

/* Ce qu'en dit le client: the portrait on the left, the quote large. */
.tm { width: min(100% - 3rem, 75rem); margin: clamp(5rem, 10vw, 8rem) auto 0; color: var(--ed-ink, #121417); }
.tm__frame { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: .75rem; padding: .75rem; border-radius: 2rem; background: var(--ed-frame, #eaecee); }
.tm__portrait { display: block; width: 100%; height: 100%; min-height: 24rem; object-fit: cover; object-position: center 20%; border-radius: 1.25rem; }
.tm__body { display: grid; align-content: center; padding: clamp(1.75rem, 3.5vw, 3.5rem); border-radius: 1.25rem; background: var(--surface, #fff); }
.tm__quote { margin: 0; }
.tm__quote p { margin: 0; font-size: clamp(1.375rem, 2.2vw, 1.875rem); line-height: 1.3; letter-spacing: -.025em; font-weight: 500; text-wrap: pretty; }
.tm__who { display: grid; gap: .125rem; margin: 1.75rem 0 0; font-size: 1rem; }
.tm__who span { color: var(--ed-muted, #51565e); }
.tm__proof { display: inline-flex; align-items: center; gap: .5rem; margin: 1.5rem 0 0; font-size: .875rem; color: var(--ed-muted, #51565e); }
.tm__proof svg { width: 1rem; height: 1rem; color: var(--brand, #0052f8); }
@media (max-width: 899px) { .tm__frame { grid-template-columns: 1fr; } .tm__portrait { min-height: 16rem; aspect-ratio: 4 / 3; } }

/* ================= The proof bento (1 Oct) =================
   Results and the client's word in one composition: the key figure in
   cobalt top left, the portrait beside it, the quote under the figure,
   smaller figures and the result line filling the rest. Same frame and
   cards as the homepage; the grid changes shape with what exists. */
.pf { width: min(100% - 3rem, 75rem); margin: clamp(5rem, 10vw, 8rem) auto 0; color: var(--ed-ink, #121417); }
.pf__title { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; }
.pf__title span { color: var(--ed-muted, #6b7280); }
.pf__grid { display: grid; gap: .75rem; padding: .75rem; border-radius: 2rem; background: var(--ed-frame, #eaecee); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pf__cell { border-radius: 1.25rem; background: var(--surface, #fff); overflow: hidden; }
.pf__cell--key { grid-column: span 5; display: grid; align-content: end; gap: .5rem; min-height: 16rem; padding: 1.75rem; background: var(--brand, #0052f8); color: #fff; }
.pf__cell--key b { font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: .95; letter-spacing: -.06em; font-weight: 500; font-variant-numeric: tabular-nums; }
.pf__cell--key span { font-size: 1.0625rem; color: rgb(255 255 255 / .85); }
.pf__cell--portrait { grid-column: span 7; min-height: 16rem; }
.pf__cell--portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.pf__cell--quote { grid-column: span 8; display: grid; align-content: center; padding: clamp(1.75rem, 3vw, 2.75rem); }
.pf__cell--quote blockquote { margin: 0; }
.pf__cell--quote blockquote p { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; text-wrap: pretty; }
.pf__who { display: grid; gap: .125rem; margin: 1.5rem 0 0; font-size: 1rem; }
.pf__who span { color: var(--ed-muted, #51565e); }
.pf__proof { display: inline-flex; align-items: center; gap: .5rem; margin: 1.25rem 0 0; font-size: .875rem; color: var(--ed-muted, #51565e); }
.pf__proof svg { width: 1rem; height: 1rem; color: var(--brand, #0052f8); }
.pf__cell--figure { grid-column: span 4; display: grid; align-content: end; gap: .375rem; min-height: 11rem; padding: 1.5rem; }
.pf__cell--figure b { font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: -.05em; font-weight: 500; font-variant-numeric: tabular-nums; }
.pf__cell--figure span { font-size: .9375rem; color: var(--ed-muted, #51565e); }
.pf__cell--note { grid-column: span 4; display: grid; align-content: end; padding: 1.5rem; }
.pf__cell--note p { margin: 0; font-size: 1rem; line-height: 1.5; }
/* With no quote: the key figure left, the others and the note share the rest of the row. */
/* No quote: the key figure takes two columns, every other cell one; the
   generator sets --n to the number of columns needed. */
.pf--figures .pf__grid { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.pf--figures .pf__cell { grid-column: auto; min-height: 16rem; }
.pf--figures .pf__cell--key { grid-column: span 2; }
.pf--figures .pf__cell--shot { grid-column: span 2; min-height: 18rem; }
.pf--figures .pf__cell--shot > img { width: 46%; top: 6%; }
@media (max-width: 899px) { .pf__grid > .pf__cell { grid-column: 1 / -1 !important; } .pf__cell--portrait { min-height: 0; aspect-ratio: 4 / 3; } }

/* The laptop scene's heading and the "other cases" block sit on the same column as everything else. */
.case-detail .mac__intro, .case-detail .case-detail__others { width: min(100% - 3rem, 75rem); margin-inline: auto; padding-inline: 0; }

/* The cell beside the quote: a second real screen of the product on the
   cobalt ground, the result line as its caption. */
.pf__cell--shot { grid-column: span 4; position: relative; display: grid; align-items: end; min-height: 20rem; background: var(--ed-blue-wash, #e9f0ff) url("../../img/backgrounds/dream/figma/card/ai-bg-053.webp") center / cover; }
.pf__cell--shot > img { position: absolute; left: 50%; top: 8%; width: 62%; height: auto; translate: -50% 0; filter: drop-shadow(0 24px 40px rgb(0 20 80 / .35)); }
.pf__cap { position: relative; margin: 0; padding: 1.25rem 1.5rem; font-size: .9375rem; line-height: 1.45; color: var(--ed-ink, #121417); background: linear-gradient(rgb(255 255 255 / 0), rgb(255 255 255 / .9) 40%); }