/* Homepage case cards, "glyph" covers (6 Oct 2026). Hulusi chose cover 2a
   (review page previews/case-covers-all.html) for every project: the
   photograph fades out left to right, the site's ASCII field grows where it
   fades (assets/js/case-glyph.js), the product floats on the right. One
   system, two variables per card:
     --ground        the colour the photograph fades into (the client's world)
     data-glyphs     the characters of the field (the client's domain)
   Cards with no photograph yet get the field across the whole card.
   The scroll drift reuses case-parallax.js (--case-phone-y, --case-scene-y). */

.case-category .case-stage.case-stage--glyph[data-case-art] { overflow: hidden; isolation: isolate; background: var(--ground, #121417); color: #fff; }

/* ---------- Photograph, shade, field ---------- */
.glyph__photo { position: absolute; inset: 0 auto 0 0; z-index: 0; width: 64%; height: 100%; max-width: none; object-fit: cover; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 25%, rgb(0 0 0 / .45) 55%, transparent 95%); mask-image: linear-gradient(90deg, #000 25%, rgb(0 0 0 / .45) 55%, transparent 95%);
  transform: translate3d(0, calc(var(--case-scene-y, 0px) * .6), 0) scale(1.04); }
.glyph__shade { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 50%), linear-gradient(to top, rgb(0 0 0 / .35), rgb(0 0 0 / 0) 40%); }
.glyph__field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- The product ---------- */
.glyph__product { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translate3d(0, calc(var(--case-phone-y, 0px) * .5), 0); }
.glyph__product img { position: absolute; display: block; width: auto; max-width: none; }
.glyph__shot { border-radius: 4px; box-shadow: 0 24px 48px -16px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .08); }
.glyph__phone { filter: drop-shadow(0 24px 30px rgb(0 0 0 / .45)); }
.glyph__product[data-shots="2"] .glyph__shot--1 { right: 20%; top: 11%; height: 50%; }
.glyph__product[data-shots="2"] .glyph__shot--2 { right: 5%; top: 40%; height: 50%; }
.glyph__product[data-shots="1"] .glyph__shot { right: 5%; top: 14%; height: 72%; max-width: 58%; object-fit: cover; object-position: left top; }
.glyph__product[data-phones="2"] .glyph__phone--1 { right: 24%; top: 8%; height: 84%; }
.glyph__product[data-phones="2"] .glyph__phone--2 { right: 5%; top: 14%; height: 84%; }
.glyph__product[data-phones="1"] .glyph__phone { right: 12%; top: 7%; height: 86%; }
/* Three phones (E.ON, Lena 8 Oct): a fan like her mockup. The first is cut at
   its top and the last at its foot in her file, so they sit on those edges. */
.glyph__product[data-phones="3"] .glyph__phone--1 { right: 40%; top: 0; height: 64%; }
.glyph__product[data-phones="3"] .glyph__phone--2 { right: 20%; top: 9%; height: 80%; }
.glyph__product[data-phones="3"] .glyph__phone--3 { right: 3%; top: auto; bottom: 0; height: 52%; }

/* ---------- Name, figure, credit ---------- */
.case-category .case-stage--glyph .case-art__credit { z-index: 1; left: 2rem; bottom: 2rem; max-width: 40%; color: #fff; }
.case-category .case-stage--glyph .case-art__credit h4 { font-size: clamp(1.75rem, 3.4vw, 3.25rem); line-height: 1; letter-spacing: -.045em; font-weight: 500; margin-bottom: .5rem; }
.case-category .case-stage--glyph .case-art__tag { padding: 0; background: none; color: #fff; opacity: .8; font-size: .9375rem; }
.case-category .case-stage.case-stage--glyph .case-stage__kpi { z-index: 1; left: 2rem; top: 2rem; right: auto; bottom: auto; padding: .75rem 1rem; background: #fff; color: var(--ed-ink, #121417); border: 0; border-radius: 4px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.case-category .case-stage--glyph .case-stage__value { font-size: clamp(1.625rem, 2.6vw, 2.5rem); }
.case-category .case-stage--glyph .case-stage__value span { font-size: .52em; }
.case-category .case-stage--glyph .case-stage__label { color: var(--ed-muted, #51565e); }
.glyph__credit { position: absolute; z-index: 1; right: 1rem; bottom: .75rem; font-size: .8125rem; color: rgb(255 255 255 / .6); pointer-events: none; }
.case-stage--glyph .case-stage__link:focus-visible { outline: 2px solid #fff; outline-offset: -4px; box-shadow: none; }

/* B (sharp): square figure box. */
html[data-style="industrial"] .case-category .case-stage.case-stage--glyph .case-stage__kpi { border-radius: 0; }

/* Homepage cards: the left side carries the identity (Hulusi, 8 Oct 2026:
   "we have a big space there, fill it with the KPIs, move the client logo
   and category there"). Logo in white and category at the top, the KPI
   large at the foot, on a soft shade over the photo. The caption under the
   card keeps the name and the sentence. On small screens the card has no
   room: the logo and category stay in the caption, the KPI keeps its box. */
@media (min-width: 761px) {
  .case-category .case-stage.case-stage--glyph .case-stage__side { position: absolute; z-index: 2; inset: 0 auto 0 0; width: min(36%, 28rem); padding: clamp(1.75rem, 3vw, 2.75rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; color: #fff; pointer-events: none; isolation: isolate; }
  .case-category .case-stage.case-stage--glyph .case-stage__side::before { content: ""; position: absolute; z-index: -1; inset: 0 -70% 0 0; background: linear-gradient(90deg, rgb(0 0 0 / .52), rgb(0 0 0 / .26) 40%, transparent); }
  .case-side__id { display: grid; justify-items: start; gap: .875rem; }
  .case-side__logo { display: block; height: min(calc(var(--logo-h, 1.6rem) * 1.1), 2.25rem); width: auto; max-width: min(100%, 10rem); object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
  .case-side__word { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }
  .case-side__tag { font-size: .9375rem; line-height: 1.3; color: rgb(255 255 255 / .78); }
  .case-category .case-stage.case-stage--glyph .case-stage__side .case-stage__kpi { position: static; inset: auto; width: auto; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
  .case-category .case-stage.case-stage--glyph .case-stage__side .case-stage__value { margin: 0; font-size: clamp(3rem, 5.2vw, 4.75rem); line-height: .9; letter-spacing: -.06em; font-weight: 500; color: #fff; }
  .case-category .case-stage.case-stage--glyph .case-stage__side .case-stage__value span { font-size: .45em; letter-spacing: -.02em; color: rgb(255 255 255 / .78); }
  .case-category .case-stage.case-stage--glyph .case-stage__side .case-stage__label { margin: .625rem 0 0; max-width: 17rem; font-size: .9375rem; line-height: 1.4; color: rgb(255 255 255 / .82); }
  .case-category__slide:has(.case-stage__side) :is(.case-caption__logo, .case-caption__tag) { display: none; }
}
/* Round 2 (Hulusi, 8 Oct: "no need for one more name under it; move
   everything about the project inside the card; use the part below for a
   testimonial from the client, a small floating card"). The project's
   sentence joins the KPI at the foot of the left side; under the card only
   a real client quote, on the three projects that have one (Book Village,
   SMC Compliance, Artway: their homepage testimonials, verbatim), set
   plainly under the card: photo, sentence, name and title. No box (Hulusi:
   "simply minimal, I don't want a floating card"). */
@media (min-width: 761px) {
  .case-side__foot { display: grid; gap: 1rem; justify-items: start; }
  .case-side__text { margin: 0; max-width: 24rem; font-size: 1rem; line-height: 1.5; color: rgb(255 255 255 / .84); }
  /* Long sentences (Hulusi, 8 Oct: two lines then "I didn't like the
     hover"): the sentence lives under the card again, in full, outside it.
     The copy in the card is not shown; the caption carries only the
     sentence (no name, logo or category repeated). */
  .case-side__text { display: none; }
  .case-category__slide:has(.case-stage__side) .case-caption__id { display: none; }
  .case-category__slide:has(.case-stage__side) .case-caption__body p { max-width: 46rem; }
}
@media (max-width: 760px) {
  .case-side__foot { display: contents; }
  .case-side__text { display: none; }
}

@media (max-width: 760px) {
  .case-category .case-stage.case-stage--glyph .case-stage__side { display: contents; }
  .case-side__id { display: none; }
}

/* ---------- Small screens: product on top, name at the foot ---------- */
@media (max-width: 760px) {
  .glyph__photo { width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 90%); mask-image: linear-gradient(180deg, #000 30%, transparent 90%); }
  .glyph__product[data-shots="2"] .glyph__shot--1 { right: 26%; top: 8%; height: 34%; }
  .glyph__product[data-shots="2"] .glyph__shot--2 { right: 4%; top: 26%; height: 34%; }
  .glyph__product[data-shots="1"] .glyph__shot { right: 4%; top: 10%; height: 46%; max-width: 88%; }
  .glyph__product[data-phones="2"] .glyph__phone--1 { right: 32%; top: 6%; height: 62%; }
  .glyph__product[data-phones="2"] .glyph__phone--2 { right: 6%; top: 10%; height: 62%; }
  .glyph__product[data-phones="3"] .glyph__phone--1 { right: 44%; top: 0; height: 46%; }
  .glyph__product[data-phones="3"] .glyph__phone--2 { right: 22%; top: 6%; height: 58%; }
  .glyph__product[data-phones="3"] .glyph__phone--3 { right: 4%; top: 22%; bottom: auto; height: 40%; }
  .glyph__product[data-phones="1"] .glyph__phone { right: 50%; translate: 50% 0; top: 5%; height: 64%; }
  .case-category .case-stage--glyph .case-art__credit { left: 1rem; bottom: 1rem; max-width: 70%; }
  .case-category .case-stage--glyph .case-art__credit h4 { font-size: 1.5rem; }
  .case-category .case-stage--glyph .case-art__credit > div { display: none; }
  .case-category .case-stage.case-stage--glyph .case-stage__kpi { left: auto; right: 1rem; top: auto; bottom: 1rem; padding: .5rem .75rem; }
  .case-category .case-stage--glyph .case-stage__value { font-size: 1.375rem; }
  .case-category .case-stage--glyph .case-stage__label { font-size: .8125rem; max-width: 8rem; }
  .glyph__credit { display: none; }
}
@media (prefers-reduced-motion: reduce) { .glyph__photo, .glyph__product { transform: none; } }

/* ---------- The same cover, small (6 Oct 2026) ----------
   Réalisations grid (behind each project tile, it rises on hover as the
   photos did) and the "D'autres projets" cards at the foot of each case page.
   Same photograph, ground, characters and product as the homepage card; the
   name and figure stay with the tile or card around it. Markup in spans, so it
   can sit inside a link. */
.glyph-cover { position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; background: var(--ground, #121417); color: #fff; }
.glyph-cover > span { display: block; }
.glyph-cover .glyph__photo { width: 64%; height: 100%; object-fit: cover; }
.glyph-cover .glyph__product img { width: auto; max-width: none; object-fit: initial; transition: none; }
.glyph-cover .glyph__shot { border-radius: 3px; box-shadow: 0 16px 32px -12px rgb(0 0 0 / .5); }
.glyph-cover .glyph__product[data-shots="1"] .glyph__shot { right: 6%; top: 14%; height: 64%; max-width: 70%; object-fit: cover; object-position: left top; }
.glyph-cover .glyph__product[data-shots="2"] .glyph__shot--1 { right: 22%; top: 10%; height: 44%; }
.glyph-cover .glyph__product[data-shots="2"] .glyph__shot--2 { right: 5%; top: 34%; height: 44%; }
.glyph-cover .glyph__product[data-phones="1"] .glyph__phone { right: 10%; top: 8%; height: 84%; }
.glyph-cover .glyph__credit { font-size: .8125rem; color: rgb(255 255 255 / .75); text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
.glyph-cover .glyph__product[data-phones="2"] .glyph__phone--1 { right: 26%; top: 8%; height: 80%; }
.glyph-cover .glyph__product[data-phones="2"] .glyph__phone--2 { right: 6%; top: 13%; height: 80%; }
.glyph-cover .glyph__product[data-phones="3"] .glyph__phone--1 { right: 42%; top: 0; height: 60%; }
.glyph-cover .glyph__product[data-phones="3"] .glyph__phone--2 { right: 22%; top: 9%; height: 76%; }
.glyph-cover .glyph__product[data-phones="3"] .glyph__phone--3 { right: 4%; top: auto; bottom: 0; height: 50%; }
/* Case pages, "D'autres projets": the figure pill holds the foot left. */
.co__media .glyph-cover .glyph__credit { top: .75rem; left: 1rem; right: auto; bottom: auto; max-width: 46%; line-height: 1.3; }
/* Réalisations tiles: the line and figure take the foot, the arrow the top
   right, and on hover the logo moves to the top left. The product sits
   between the logo and the text, the photo credit becomes the
   last line under the figure. */
.rg-cover.glyph-cover .glyph__product { transform: none; }
.rg-cover.glyph-cover .glyph__product[data-shots="1"] .glyph__shot { right: 6%; top: 21%; height: 38%; max-width: 76%; }
.rg-cover.glyph-cover .glyph__product[data-shots="2"] .glyph__shot--1 { right: 26%; top: 21%; height: 27%; }
.rg-cover.glyph-cover .glyph__product[data-shots="2"] .glyph__shot--2 { right: 6%; top: 32%; height: 27%; }
.rg-cover.glyph-cover .glyph__product[data-phones="1"] .glyph__phone { right: 14%; top: 17%; height: 44%; }
.rg-cover.glyph-cover .glyph__product[data-phones="2"] .glyph__phone--1 { right: 30%; top: 17%; height: 44%; }
.rg-cover.glyph-cover .glyph__product[data-phones="2"] .glyph__phone--2 { right: 10%; top: 20%; height: 44%; }
.rg-cover.glyph-cover .glyph__product[data-phones="3"] .glyph__phone--1 { right: 40%; top: 14%; height: 36%; }
.rg-cover.glyph-cover .glyph__product[data-phones="3"] .glyph__phone--2 { right: 22%; top: 18%; height: 44%; }
.rg-cover.glyph-cover .glyph__product[data-phones="3"] .glyph__phone--3 { right: 6%; top: 30%; bottom: auto; height: 32%; }
.rg-cover.glyph-cover .glyph__credit { right: 1.125rem; left: 1.125rem; bottom: .625rem; z-index: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-reveal:has(.glyph__credit) .rg-info { bottom: 2.125rem; }
@media (max-width: 760px) {
  .glyph-cover .glyph__photo { width: 64%; -webkit-mask-image: linear-gradient(90deg, #000 25%, rgb(0 0 0 / .45) 55%, transparent 95%); mask-image: linear-gradient(90deg, #000 25%, rgb(0 0 0 / .45) 55%, transparent 95%); }
  .glyph-cover .glyph__credit { display: block; }
}

/* ---------- Case-page heroes (6 Oct 2026) ----------
   The plate behind the phones (or Sortlist's laptop) takes the project's
   cover: its ground, its photograph fading out to the right, the field where
   it fades. The devices, their rise and the figure stay as they were; the
   figure turns white on the dark ground. */
.hx__plate.hx__plate--glyph { isolation: isolate; background: var(--ground, #121417); }
.hx__plate--glyph > .hx__bg, .hx__plate--glyph > .hx__credit { display: none !important; }
.hx__plate--glyph .glyph__photo { width: 58%; }
.hx__plate--glyph .dv__kpi b, .hx__plate--glyph .dv__kpi li + li b { color: #fff; }
.hx__plate--glyph .dv__kpi span { color: rgb(255 255 255 / .85); }
.hx__plate--glyph .dv img { filter: drop-shadow(0 30px 40px rgb(0 0 0 / .45)); }
.hx__plate--glyph .glyph__credit { right: auto; left: clamp(1.5rem, 5%, 3.5rem); bottom: 1rem; z-index: 3; color: rgb(255 255 255 / .7); text-shadow: 0 1px 2px rgb(0 0 0 / .6); }
@media (max-width: 760px) { .hx__plate--glyph .glyph__credit { display: block; top: .75rem; right: 1rem; bottom: auto; } }

/* ---------- Case pages, the plates below the hero (6 Oct 2026) ----------
   Hulusi: "what about rest of the page, update all". The blue watercolour
   plates (sticky screen stage, proof cell with the phone, media cards) take
   the case's ground; case-glyph.js draws the field behind their content. */
.case-detail[data-glyph-case] :is(.bl__stage, .pf__cell--shot, .cp__card--media, .cp__shot--phone) { background: var(--ground, #121417); isolation: isolate; }
.case-detail[data-glyph-case] .cp__shot--phone { position: relative; }
.case-detail[data-glyph-case] .pf__cap { color: #fff; background: linear-gradient(rgb(0 0 0 / 0), var(--ground, #121417) 45%); }
.case-detail[data-glyph-case] :is(.bl__shot .dvc, .pf__cell--shot > img, .cp__card--media .dvc) { filter: drop-shadow(0 30px 50px rgb(0 0 0 / .45)); }
.case-detail[data-glyph-case] .bl__shot > img { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
@media (max-width: 899px) { .case-detail[data-glyph-case] .bl__stage { position: relative; } }

/* Plate textures (case-plates.js): photo on the screen stage, the client's
   light on the smaller cells; the others reviewable with ?plate=. */
.plate-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.plate-fx > img, .plate-fx > canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.plate-fx::after { content: ""; position: absolute; inset: 0; }
.plate-fx[data-fx="photo"] > img { filter: saturate(.9) brightness(1.15) contrast(1.05); transform: scale(1.06); }
.plate-fx[data-fx="photo"]::after { background: linear-gradient(180deg, color-mix(in srgb, var(--ground) 20%, transparent), color-mix(in srgb, var(--ground) 70%, transparent)); }
.plate-fx[data-fx="echo"] > img { inset: -25%; width: 150%; height: 150%; filter: blur(56px) saturate(1.6); opacity: .75; }
.plate-fx[data-fx="echo"]::after { background: color-mix(in srgb, var(--ground) 35%, transparent); }
.plate-fx[data-fx="light"] { background:
  radial-gradient(70% 80% at 85% 105%, color-mix(in srgb, var(--accent, #0052f8) 60%, transparent), transparent 70%),
  radial-gradient(55% 60% at 5% -5%, color-mix(in srgb, var(--accent, #0052f8) 28%, transparent), transparent 70%); }
.plate-fx[data-fx="light"]::after { opacity: .22; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.plate-fx[data-fx="dream"] { background: #eef2f7; }
.plate-fx[data-fx="dream"]::after { content: none; }
.plate-fx[data-fx="halftone"]::after { background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ground) 70%, transparent)); }

/* Carousel arrows (Hulusi, 8 Oct 2026: "not visible enough, make them a
   bit more stylish"). Solid white squares with a soft lift, so they read on
   any photo; brand blue on hover with the arrow nudging its way; a clear
   focus ring; the end of the rail is quiet but still solid. */
.case-category .case-category__controls button { width: 3.25rem; height: 3.25rem; background: #fff; color: var(--ed-ink, #121417); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 28px -10px rgb(0 0 0 / .45), 0 0 0 1px rgb(18 20 23 / .06); transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms ease, opacity 200ms ease; }
.case-category .case-category__controls button svg { width: 1.25rem; height: 1.25rem; transition: transform 260ms cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .case-category .case-category__controls button:hover:not(:disabled) { background: var(--brand, #0052f8); color: #fff; box-shadow: 0 14px 32px -12px rgb(0 82 248 / .6); }
  .case-category .case-category__controls button[data-case-prev]:hover:not(:disabled) svg { transform: translateX(-3px); }
  .case-category .case-category__controls button[data-case-next]:hover:not(:disabled) svg { transform: translateX(3px); }
}
.case-category .case-category__controls button:active:not(:disabled) { transform: scale(.96); background: var(--brand, #0052f8); color: #fff; }
.case-category .case-category__controls button:focus-visible { outline: 2px solid var(--brand, #0052f8); outline-offset: 3px; }
.case-category .case-category__controls button:disabled { opacity: 1; background: rgb(255 255 255 / .9); color: rgb(18 20 23 / .3); box-shadow: 0 6px 18px -10px rgb(0 0 0 / .35); }
@media (max-width: 760px) { .case-category .case-category__controls button { width: 2.75rem; height: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .case-category .case-category__controls button, .case-category .case-category__controls button svg { transition: none; } .case-category .case-category__controls button:active:not(:disabled) { transform: none; } }

/* ---------- Dream covers (13 Oct) ----------
   Hulusi: "update case study covers also". Each homepage case card takes a
   plate from the Figma AI_Bg package in the Brosam style (the characters are
   in the plate, so the live field is off) instead of Lena's photograph. The
   logo, the product and the shade for the white text stay. Remove data-dream
   from a card to bring its photograph back. */
.case-category .case-stage.case-stage--glyph[data-case-art][data-dream] { background: var(--ground, #121417) var(--dream) center / cover no-repeat; }
/* Hulusi, 13 Oct: "combine the real imagery with the dreamy plate", not
   with the ASCII animation. The photograph comes back on the left and
   dissolves (its own mask) into the plate; the live field stays off. */
.case-stage--glyph[data-dream] .glyph__photo { display: block; }
.case-stage--glyph[data-dream] .glyph__shade { background: linear-gradient(90deg, rgb(6 14 40 / .5), rgb(6 14 40 / 0) 45%), linear-gradient(to top, rgb(6 14 40 / .35), rgb(6 14 40 / 0) 40%); }
.case-stage--glyph[data-dream="033"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-033.webp"); }
.case-stage--glyph[data-dream="043"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-043.webp"); }
.case-stage--glyph[data-dream="061"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-061.webp"); }
.case-stage--glyph[data-dream="078"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-078.webp"); }
.case-stage--glyph[data-dream="081"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-081.webp"); }
.case-stage--glyph[data-dream="086"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-086.webp"); }
.case-stage--glyph[data-dream="088"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-088.webp"); }
.case-stage--glyph[data-dream="094"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-094.webp"); }
.case-stage--glyph[data-dream="095"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-095.webp"); }
.case-stage--glyph[data-dream="096"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-096.webp"); }
.case-stage--glyph[data-dream="097"] { --dream: url("../../img/backgrounds/dream/figma/hero/ai-bg-097.webp"); }

/* Small covers (réalisations grid, "D'autres projets") take the same
   combination as the homepage cards (13 Oct): the project's plate as ground,
   the photograph dissolving into it, no live field. */
.glyph-cover[data-dream] { background: var(--ground, #121417) var(--dream) center / cover no-repeat; }
.glyph-cover[data-dream="033"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-033.webp"); }
.glyph-cover[data-dream="043"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-043.webp"); }
.glyph-cover[data-dream="061"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-061.webp"); }
.glyph-cover[data-dream="078"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-078.webp"); }
.glyph-cover[data-dream="081"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-081.webp"); }
.glyph-cover[data-dream="086"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-086.webp"); }
.glyph-cover[data-dream="088"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-088.webp"); }
.glyph-cover[data-dream="094"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-094.webp"); }
.glyph-cover[data-dream="095"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-095.webp"); }
.glyph-cover[data-dream="096"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-096.webp"); }
.glyph-cover[data-dream="097"] { --dream: url("../../img/backgrounds/dream/figma/card/ai-bg-097.webp"); }