.wdx { --wdx-gutter: var(--hb-gutter); --wdx-orange: var(--hb-color-orange); }
.wdx-dot { color: var(--wdx-orange); font-weight: inherit; }
.wdx-section { padding: var(--in-pad) var(--wdx-gutter); }
.wdx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.wdx-actions .hb-instinct__ghost svg { rotate: 90deg; }
.wdx-compare {
  position: fixed;
  z-index: 45;
  right: 16px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid #10211930;
  border-radius: 10px;
  background: #e9ede2f2;
  color: var(--hb-color-ink);
  backdrop-filter: blur(14px);
  font: 500 11px/1 var(--hb-font-body);
}
.wdx-compare > span { margin-inline: 10px; white-space: nowrap; }
.wdx-compare a { display: grid; place-items: center; width: 38px; height: 36px; border-radius: 6px; }
.wdx-compare a:hover { background: var(--hb-color-lime); }
.wdx-compare a[aria-current='page'] { background: var(--hb-color-forest); color: var(--hb-color-paper); }

.wdx-hero { position: relative; isolation: isolate; padding: 140px var(--wdx-gutter) 58px; }
.wdx-hero__copy { position: relative; z-index: 1; min-width: 0; }
.wdx-hero .hb-breadcrumb { margin-bottom: 25px; }
.wdx-hero__title { display: block; margin: 23px 0 0; }
.wdx-hero__title:not(.hb-hero-headline) { font-family: var(--hb-font-heading); font-weight: 500; font-size: clamp(62px, 8.7vw, 152px); line-height: .9; letter-spacing: -.073em; }
.wdx-hero__intro { margin-top: 28px; }
.wdx-hero__intro > p { max-width: 35ch; color: var(--in-soft); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.5; }
.wdx-cover { position: relative; min-width: 0; overflow: hidden; }
.wdx-cover__responsive { display: block; width: 100%; height: 100%; }
.wdx-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wdx-cover figcaption { position: absolute; left: 16px; bottom: 16px; padding: 8px 11px; border-radius: 6px; background: var(--hb-color-paper); color: var(--hb-color-forest); font: 500 10px/1 var(--hb-font-body); letter-spacing: .11em; text-transform: uppercase; }

.wdx--calque .wdx-hero { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: end; gap: 24px; padding-right: 24px; }
.wdx--calque .wdx-hero__copy { padding-bottom: 32px; }
.wdx--calque .wdx-cover { height: clamp(390px, 43vw, 650px); border-radius: 8px 34px 8px 8px; }
.wdx--calque .wdx-cover img { object-position: center 55%; }

.wdx--plein .wdx-hero { display: grid; align-items: end; min-height: max(720px, 100svh); color: var(--hb-color-paper); background: var(--hb-color-forest); }
.wdx--plein .wdx-cover { position: absolute; z-index: -2; inset: 0; }
.wdx--plein .wdx-cover img { object-position: 67% center; }
.wdx--plein .wdx-cover__responsive img { object-position: 100% center; }
.wdx--plein .wdx-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #08130ee8, #08130e55 47%, transparent 76%), linear-gradient(0deg, #08130ed9, transparent 65%); }

.wdx--signature .wdx-hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: end; gap: 34px; color: var(--hb-color-forest); background: var(--wdx-orange); }
.wdx--signature .wdx-hero__title { font-size: clamp(60px, 7.9vw, 142px); }
.wdx--signature .wdx-hero .wdx-dot, .wdx--signature .wdx-hero .hb-instinct__eyebrow svg { color: var(--hb-color-paper); fill: currentColor; }
.wdx--signature .wdx-hero .hb-breadcrumb { color: var(--hb-color-forest); }
.wdx--signature .wdx-hero .hb-button { background: var(--hb-color-forest); color: var(--hb-color-paper); }
.wdx--signature .wdx-cover { height: clamp(360px, 37vw, 600px); border-radius: 2px 2px 32px 2px; }
.wdx--signature .wdx-cover img { object-position: center 50%; }

.wdx--parcours .wdx-hero { padding-bottom: 0; }
.wdx--parcours .wdx-cover { margin-top: 36px; height: clamp(230px, 34vw, 530px); border-radius: var(--in-radius); }
.wdx--parcours .wdx-cover img { object-position: center 54%; }
@media (min-width: 1000px) {
  .wdx--parcours .wdx-hero__copy { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); column-gap: 36px; align-items: end; }
  .wdx--parcours .wdx-hero__copy > :is(nav, .hb-instinct__eyebrow) { grid-column: 1 / -1; }
  .wdx--parcours .wdx-hero__intro { margin-bottom: 4px; }
}

.wdx--ecrans .wdx-hero { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 32px; align-items: center; color: var(--hb-color-paper); background: var(--hb-color-forest); }
.wdx--ecrans .wdx-hero__title { font-size: clamp(56px, 6.9vw, 121px); }
.wdx--ecrans .wdx-hero__copy .wdx-hero__title { color: var(--hb-color-lime); }
.wdx--ecrans .wdx-hero__intro { margin-top: 23px; }

.wdx-calque-panel { background: var(--hb-color-forest); color: var(--hb-color-paper); }
.wdx-comparison { --wdx-split: 50%; max-width: 1060px; margin-inline: auto; }
.wdx-comparison__canvas { position: relative; overflow: hidden; border-radius: 16px; background: var(--hb-color-paper); cursor: ew-resize; touch-action: pan-y; user-select: none; }
.wdx-comparison__wire { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--wdx-split)) 0 0); }
.wdx-comparison__divider { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--wdx-split); width: 2px; background: var(--wdx-orange); }
.wdx-comparison__divider b { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 42px; height: 42px; translate: -50% -50%; border-radius: 50%; background: var(--wdx-orange); color: var(--hb-color-forest); }
.wdx-comparison__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 16px; font-size: 13px; }
.wdx-comparison__bar input { width: 100%; min-height: 35px; accent-color: var(--wdx-orange); cursor: ew-resize; }

.wdx-demo { container-type: inline-size; color: #eef1e6; background: #142b20; }
.wdx-demo__chrome { display: flex; align-items: center; gap: 5px; min-height: 33px; padding: 0 12px; color: #526151; background: #e2e7db; font-size: 10px; }
.wdx-demo__chrome i { width: 5px; height: 5px; border-radius: 50%; background: #677963; }
.wdx-demo__chrome i:first-child { background: var(--wdx-orange); }
.wdx-demo__chrome > span { margin-inline: auto; }
.wdx-demo__site { padding: clamp(16px, 4.8cqw, 50px); }
.wdx-demo__brand { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #e9ede24d; font: 500 clamp(16px, 3.4cqw, 26px)/1 var(--hb-font-heading); }
.wdx-demo__brand span { align-self: center; font: 400 10px/1.2 var(--hb-font-body); }
.wdx-demo__layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(14px, 4cqw, 36px); margin-top: 20px; }
.wdx-demo__copy small { display: block; margin-bottom: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.wdx-demo__copy strong { display: block; font: 500 clamp(26px, 8.5cqw, 83px)/.91 var(--hb-font-heading); letter-spacing: -.068em; }
.wdx-demo__copy > span { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 9px; border-radius: 4px; background: var(--wdx-orange); color: var(--hb-color-forest); font-size: 10px; }
.wdx-demo__copy > span svg { width: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.wdx-demo__photo { overflow: hidden; aspect-ratio: 1.24; border-radius: 6px; }
.wdx-demo__photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.wdx-demo--wire { background: #e8e7de; color: #425045; }
.wdx-demo--wire .wdx-demo__brand { border-color: #8b9687; }
.wdx-demo--wire .wdx-demo__copy strong { color: #596658; }
.wdx-demo--wire .wdx-demo__copy > span { background: transparent; outline: 1px solid #6d796c; }
.wdx-demo--wire .wdx-demo__photo { border: 1px solid #8a9688; background: linear-gradient(to top right, transparent 49.6%, #a6afa3 50%, transparent 50.4%), linear-gradient(to bottom right, transparent 49.6%, #a6afa3 50%, transparent 50.4%), #d9ded3; }
@container (max-width: 390px) {
  .wdx-demo__brand span { display: none; }
  .wdx-demo__layout { grid-template-columns: 1fr; margin-top: 12px; }
  .wdx-demo__copy > span { margin-top: 10px; }
  .wdx-demo__copy small { margin-bottom: 8px; }
  .wdx-demo__photo { aspect-ratio: 2; }
}

.wdx-device { min-width: 0; padding: 10px; border: 1px solid #e9ede24a; border-radius: 16px; background: #1f3529; }
.wdx-device__bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--hb-color-paper); font: 500 10px/1 var(--hb-font-body); }
.wdx-device__controls { display: flex; gap: 3px; }
.wdx-device__controls button { padding: 9px 10px; border-radius: 6px; color: inherit; }
.wdx-device__controls button:hover, .wdx-device__controls button[aria-pressed='true'] { color: var(--hb-color-forest); background: var(--hb-color-lime); }
.wdx-device__stage { display: grid; place-items: center; min-height: 320px; padding: 9px; border-radius: 8px; background: #0b1b13; }
.wdx-device__shell { width: var(--device-width, 100%); min-width: min(100%, 188px); overflow: hidden; border: 1px solid #e9ede248; border-radius: 8px; }

.wdx-formats__grid { display: grid; gap: 22px; }
.wdx-formats--strip .wdx-formats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wdx-format__photo { position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: 14px; background: var(--hb-color-forest); }
.wdx-format__photo img { width: 100%; height: 100%; object-fit: cover; }
.wdx-format__copy { padding-top: 18px; }
.wdx-format__index { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; color: var(--in-soft); font: 500 10px/1.3 var(--hb-font-body); text-transform: uppercase; letter-spacing: .12em; }
.wdx-format__index span { padding-left: 12px; border-left: 1px solid var(--in-rule); }
.wdx-format h3 { font-size: clamp(26px, 3vw, 54px); letter-spacing: -.055em; }
.wdx-format__copy > p:last-child { max-width: 40ch; margin-top: 10px; color: var(--in-soft); font-size: 15px; line-height: 1.6; }

.wdx-formats--chapters { background: var(--hb-color-forest); color: var(--hb-color-paper); }
.wdx-formats--chapters .wdx-formats__grid { gap: 62px; }
.wdx-formats--chapters .wdx-format { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: center; gap: clamp(22px, 6vw, 86px); }
.wdx-formats--chapters .wdx-format:nth-child(even) { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
.wdx-formats--chapters .wdx-format:nth-child(even) .wdx-format__photo { grid-area: 1 / 2; }
.wdx-formats--chapters .wdx-format__photo { aspect-ratio: 1.8; }
.wdx-formats--chapters .wdx-format h3 { font-size: clamp(38px, 5.2vw, 78px); }

.wdx-formats--mosaic .wdx-formats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.wdx-formats--mosaic .wdx-format { position: relative; display: grid; align-items: end; grid-column: span 2; min-height: clamp(280px, 32vw, 520px); overflow: hidden; border-radius: var(--in-radius); color: var(--hb-color-paper); background: var(--hb-color-forest); isolation: isolate; }
.wdx-formats--mosaic .wdx-format:is(:first-child, :last-child) { grid-column: span 3; }
.wdx-formats--mosaic .wdx-format__photo { position: absolute; inset: 0; z-index: -1; border-radius: 0; aspect-ratio: auto; }
.wdx-formats--mosaic .wdx-format__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #09160fe8, #09160f08 77%); }
.wdx-formats--mosaic .wdx-format__copy { padding: clamp(22px, 3.3vw, 45px); }
.ws--final > .wdx-formats { padding-bottom: 0; }

.wdx-formats--compact .wdx-formats__grid, .wdx-formats--matrix .wdx-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wdx-formats--compact .wdx-format { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: 20px; border-top: 1px solid var(--in-rule); padding: 15px 0; }
.wdx-formats--compact .wdx-format__copy, .wdx-formats--matrix .wdx-format__copy { padding-top: 0; }
.wdx-formats--matrix .wdx-format { border-top: 1px solid var(--in-rule); padding: 24px 0 28px; }

.wdx-journey__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; gap: clamp(24px, 7vw, 105px); }
.wdx-journey__visual { position: sticky; top: 120px; overflow: hidden; aspect-ratio: 1.3; border-radius: var(--in-radius); background: var(--hb-color-forest); }
.wdx-journey__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.wdx-journey__visual img.is-active { opacity: 1; }
.wdx-journey__steps li { display: grid; align-content: center; min-height: 230px; padding: 25px 0; border-top: 1px solid var(--in-rule); }
.wdx-journey__steps li > span { color: var(--hb-color-muted); font: 500 11px/1.4 var(--hb-font-body); letter-spacing: .12em; }
.wdx-journey__steps h3 { margin: 12px 0; font-size: clamp(34px, 5vw, 74px); letter-spacing: -.06em; }
.wdx-journey__steps p { max-width: 40ch; color: var(--in-soft); line-height: 1.6; }

.wdx-delivery__title h2 { margin-top: 23px; font-size: clamp(45px, 5.9vw, 100px); line-height: .94; letter-spacing: -.066em; }
.wdx-delivery__lead { max-width: 36ch; margin-top: 20px; color: var(--in-soft); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; }

.wdx-delivery--calque { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: center; gap: clamp(30px, 6.5vw, 116px); }
.wdx-blueprint {
  --plan-ink: #d4e2b489;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.08;
  border-radius: 8px 32px 8px 8px;
  background: linear-gradient(90deg, #d4e2b41f 1px, transparent 1px), linear-gradient(#d4e2b41f 1px, transparent 1px), var(--hb-color-pine);
  background-size: 24px 24px;
  color: var(--hb-color-lime);
}
.wdx-blueprint figcaption, .wdx-blueprint__scale { position: absolute; inset: 5% 6% auto; display: flex; justify-content: space-between; gap: 5px; font: 500 10px/1.2 var(--hb-font-body); letter-spacing: .12em; }
.wdx-blueprint__scale { inset: auto 6% 5%; opacity: .65; }
.wdx-blueprint__desktop, .wdx-blueprint__phone { position: absolute; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--plan-ink); background: var(--hb-color-pine); }
.wdx-blueprint__desktop { inset: 21% 20% 22% 9%; grid-template: 14% 1fr 22% / .85fr 1.15fr; }
.wdx-blueprint__desktop i, .wdx-blueprint__phone i { border: 1px solid var(--plan-ink); }
.wdx-blueprint__desktop i:first-child, .wdx-blueprint__desktop i:last-child { grid-column: 1 / -1; }
.wdx-blueprint__desktop i:nth-child(3), .wdx-blueprint__phone i:nth-child(2) { background: linear-gradient(to top right, transparent 49.5%, var(--plan-ink) 50%, transparent 50.5%); }
.wdx-blueprint__phone { inset: 43% 9% 13% 70%; grid-template-rows: 14% 1fr 24%; border-color: var(--wdx-orange); }
.wdx-blueprint__mark { position: absolute; top: 12%; right: 11%; width: clamp(15px, 2vw, 28px); color: var(--wdx-orange); }
.wdx-blueprint__mark svg { width: 100%; fill: currentColor; }
.wdx-layers { margin-top: 28px; border-top: 1px solid var(--in-rule); }
.wdx-layers details { border-bottom: 1px solid var(--in-rule); }
.wdx-layers summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 15px 0; list-style: none; cursor: pointer; }
.wdx-layers summary::-webkit-details-marker { display: none; }
.wdx-layers summary > span:first-child { color: var(--hb-color-muted); font-size: 11px; }
.wdx-layers h3 { font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -.035em; }
.wdx-layers__plus::before { content: '+'; color: var(--hb-color-ink); }
.wdx-layers details[open] .wdx-layers__plus::before { content: '−'; }
.wdx-layers dl { margin: 0 30px 18px 38px; }
.wdx-layers dt { margin-top: 9px; font-weight: 500; font-size: 14px; }
.wdx-layers dd { margin: 2px 0 0; color: var(--in-soft); font-size: 14px; line-height: 1.5; }

.wdx-delivery--plein { color: var(--hb-color-paper); background: var(--hb-color-forest); }
.wdx-backstage { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(420px, 45vw, 700px); padding: 90px var(--wdx-gutter) 78px; overflow: hidden; }
.wdx-backstage > img, .wdx-backstage::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.wdx-backstage > img { z-index: -2; object-fit: cover; object-position: 65% 50%; }
.wdx-backstage::before { content: ''; z-index: -1; background: linear-gradient(90deg, #08130ee0, #08130e3d 63%, transparent), linear-gradient(0deg, #102119 0%, #10211900 53%); }
.wdx-backstage__label { position: absolute; inset: auto var(--wdx-gutter) 18px; display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #e9ede25e; padding-top: 10px; color: #e9ede2ba; font: 500 10px/1.4 var(--hb-font-body); letter-spacing: .12em; }
.wdx-backstage__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px clamp(22px, 4vw, 72px); padding: 26px var(--wdx-gutter) clamp(42px, 6vw, 94px); }
.wdx-backstage__notes article > span, .wdx-swatches article > span { font: 500 10px/1.5 var(--hb-font-body); letter-spacing: .14em; }
.wdx-backstage__notes article > span { color: var(--hb-color-lime); }
.wdx-backstage__notes h3 { margin: 10px 0 6px; font-size: clamp(24px, 2.65vw, 42px); }
.wdx-backstage__notes p { max-width: 34ch; color: var(--in-soft); font-size: 15px; line-height: 1.6; }

.wdx-delivery--signature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.wdx-swatches { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 9px; padding-block: 8px; }
.wdx-swatches article { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) 32px; align-items: start; gap: 12px; min-height: 115px; padding: clamp(18px, 2.1vw, 32px); border-radius: 3px; }
.wdx-swatches article:first-child { grid-column: 1 / 12; background: var(--hb-color-forest); color: var(--hb-color-paper); }
.wdx-swatches article:nth-child(2) { grid-column: 3 / -1; background: var(--hb-color-lime); }
.wdx-swatches article:last-child { grid-column: 2 / -1; background: var(--wdx-orange); }
.wdx-swatches article > span { opacity: .8; }
.wdx-swatches h3 { font-size: clamp(25px, 3.1vw, 45px); line-height: .95; letter-spacing: -.055em; }
.wdx-swatches p { max-width: 30ch; margin-top: 8px; font-size: 14px; line-height: 1.55; }
.wdx-swatches svg { width: 100%; fill: currentColor; }

.wdx-handoff { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); overflow: hidden; border-radius: var(--in-radius); color: var(--hb-color-paper); background: var(--hb-color-forest); }
.wdx-handoff figure { position: relative; min-width: 0; }
.wdx-handoff img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.wdx-handoff__copy { padding: clamp(32px, 4.8vw, 76px); }
.wdx-handoff .wdx-delivery__title h2 { font-size: clamp(40px, 4.8vw, 74px); }
.wdx-handoff dl { margin: 26px 0 0; border-top: 1px solid var(--in-rule); }
.wdx-handoff dl > div { display: grid; grid-template-columns: minmax(100px, .75fr) minmax(0, 1.25fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--in-rule); }
.wdx-handoff dt { color: var(--hb-color-lime); font-size: 14px; font-weight: 500; }
.wdx-handoff dd { margin: 0; color: var(--in-soft); font-size: 14px; line-height: 1.55; }

.wdx-delivery--ecrans { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(28px, 6vw, 90px); background: var(--hb-color-lime); }
.wdx-release { border: 1px solid #1021193b; border-radius: 16px; overflow: hidden; background: var(--hb-color-paper); }
.wdx-release__bar { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 12px 16px; color: var(--hb-color-paper); background: var(--hb-color-forest); font: 500 9px/1.4 var(--hb-font-body); letter-spacing: .1em; }
.wdx-release__bar > span:first-child { display: flex; gap: 4px; }
.wdx-release__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--hb-color-lime); }
.wdx-release__bar i:first-child { background: var(--wdx-orange); }
.wdx-release li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 17px clamp(14px, 2.3vw, 30px); }
.wdx-release li + li { border-top: 1px solid var(--in-rule); }
.wdx-release li > span:last-child { color: var(--hb-color-muted); font: 500 9px/1.4 var(--hb-font-body); letter-spacing: .1em; }
.wdx-release h3 { font-size: clamp(24px, 2.8vw, 40px); }
.wdx-release li p { max-width: 36ch; margin-top: 5px; color: var(--in-soft); font-size: 14px; line-height: 1.5; }
.wdx-release__symbol { position: relative; display: block; width: 54px; height: 54px; border-radius: 9px; background: #1021190c; color: var(--hb-color-forest); }
.wdx-release__symbol::before, .wdx-release__symbol::after { content: ''; position: absolute; box-sizing: border-box; border: 1px solid currentColor; }
.wdx-release__symbol--devices::before { inset: 14px 14px 19px 10px; border-radius: 2px; }
.wdx-release__symbol--devices::after { inset: 24px 9px 12px 34px; border-radius: 2px; background: var(--hb-color-lime); }
.wdx-release__symbol--search::before { inset: 13px 18px 19px 12px; border-radius: 50%; }
.wdx-release__symbol--search::after { width: 11px; border-width: 1px 0 0; top: 33px; left: 31px; rotate: 45deg; }
.wdx-release__symbol--edit::before { inset: 14px 16px 12px 13px; border-radius: 2px; }
.wdx-release__symbol--edit::after { width: 24px; height: 5px; top: 24px; left: 20px; border-radius: 2px; rotate: -43deg; background: var(--hb-color-lime); }

@media (prefers-reduced-motion: no-preference) {
  .wdx-hero__copy { animation: hb-instinct-fade .9s var(--hb-ease) both; }
  .wdx-hero > .wdx-cover img { animation: hb-instinct-settle 2.6s var(--hb-ease) both; }
  .wdx-format__photo img { transition: transform .65s var(--hb-ease); }
  .wdx-format:hover .wdx-format__photo img { transform: scale(1.04); }
  .wdx-device__shell { transition: width .55s var(--hb-ease); }
  .wdx-journey__visual img { transition: opacity .65s var(--hb-ease); }
}

@media (max-width: 900px) {
  .wdx-formats--strip .wdx-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wdx-formats--compact .wdx-format { grid-template-columns: minmax(0, 1fr); gap: 13px; }
}
@media (max-width: 760px) {
  .wdx { --wdx-gutter: var(--hb-gutter-mobile); }
  .wdx-section { padding-block: 54px; }
  .wdx-hero { padding: 108px var(--wdx-gutter) 28px; }
  .wdx-hero .hb-breadcrumb { margin-bottom: 15px; }
  .wdx .wdx-hero__title { margin-top: 15px; }
  .wdx .wdx-hero__title:not(.hb-hero-headline) { font-size: clamp(38px, 11vw, 70px); }
  .wdx-hero__intro { margin-top: 16px; }
  .wdx-hero__intro > p { font-size: 15px; }
  .wdx-actions { gap: 8px 12px; margin-top: 16px; }
  .wdx-actions .hb-button { min-width: 0; min-height: 44px; padding: 12px; }
  .wdx-actions .hb-instinct__ghost { min-height: 32px; font-size: 12px; gap: 7px; }
  .wdx--calque .wdx-hero, .wdx--signature .wdx-hero, .wdx--ecrans .wdx-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-inline: var(--wdx-gutter); }
  .wdx--calque .wdx-hero__copy { padding-bottom: 0; }
  .wdx--calque .wdx-cover, .wdx--signature .wdx-cover { height: clamp(230px, 67vw, 360px); }
  .wdx--plein .wdx-hero { min-height: 450px; }
  .wdx--plein .wdx-cover img { object-position: 69% center; }
  .wdx--plein .wdx-cover__responsive img { object-position: 50% center; }
  .wdx--plein .wdx-hero::after { background: linear-gradient(90deg, #08130ed9, #08130e4f), linear-gradient(0deg, #08130ed9, transparent 85%); }
  .wdx--parcours .wdx-cover { height: 225px; margin-top: 22px; }
  .wdx-device__stage { min-height: 225px; }
  .wdx-device__bar > span { display: none; }
  .wdx-format__copy > p:last-child { font-size: 14px; }
  .wdx-formats--chapters .wdx-formats__grid { gap: 38px; }
  .wdx-formats--chapters .wdx-format, .wdx-formats--chapters .wdx-format:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wdx-formats--chapters .wdx-format:nth-child(even) .wdx-format__photo { grid-area: auto; }
  .wdx-formats--mosaic .wdx-formats__grid { grid-template-columns: minmax(0, 1fr); }
  .wdx-formats--mosaic .wdx-format, .wdx-formats--mosaic .wdx-format:is(:first-child, :last-child) { grid-column: auto; }
  .wdx-formats--matrix .wdx-formats__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wdx-journey__grid { grid-template-columns: minmax(0, 1fr); }
  .wdx-journey__visual { position: relative; top: auto; }
  .wdx-journey__steps li { min-height: 0; }
  .wdx-delivery--calque, .wdx-delivery--signature, .wdx-delivery--ecrans, .wdx-handoff { grid-template-columns: minmax(0, 1fr); }
  .wdx-delivery__title h2, .wdx-handoff .wdx-delivery__title h2 { font-size: clamp(36px, 10vw, 54px); }
  .wdx-blueprint { grid-row: 2; }
  .wdx-backstage { min-height: 390px; padding-block: 56px 60px; }
  .wdx-backstage__notes { grid-template-columns: minmax(0, 1fr); }
  .wdx-swatches article { grid-template-columns: minmax(0, 1fr) 26px; gap: 7px; }
  .wdx-swatches article > span { grid-column: 1 / -1; }
  .wdx-swatches article:nth-child(n) { grid-column: 1 / -1; }
  .wdx-handoff figure { aspect-ratio: 1.35; }
  .wdx-handoff__copy { padding: 25px 21px; }
  .wdx-handoff dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .wdx-release li { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .wdx-release li > span:last-child { grid-column: 2; }
  .wdx-release__symbol { scale: .85; transform-origin: left center; }
  .wdx-compare { right: 8px; bottom: max(7px, env(safe-area-inset-bottom)); }
  .wdx-compare a { width: 34px; height: 34px; }
}