/* Mini prototypes embedded in the case.
   Chat UI mirrors the buycycle iOS reference prototype
   (Initiatives/Buyer XP/.../add-to-listing-app-ios.html): header with bike
   thumbnail + avatar, 6px text bubbles, 8px offer bubbles, 36px CTAs,
   composer with camera icon. Strings from the app's intl_fr.arb.
   Neue Haas Grotesk Text Pro, the app's typeface: local() first where it is
   installed, then the woff2 files subset from the app's fonts (Latin only),
   embedded in the share version. Embedding is Quentin's call (2026-11-05),
   see decisions.md. */
@font-face { font-family: 'BC Haas'; font-weight: 400; font-display: swap; src: local('Neue Haas Grotesk Text Pro 55 Roman'), local('NHaasGroteskTXPro-55Rg'), local('NeueHaasGroteskText Pro'), url('../fonts/nhaas-tx-55Rg.woff2') format('woff2'); }
@font-face { font-family: 'BC Haas'; font-weight: 500; font-display: swap; src: local('Neue Haas Grotesk Text Pro 65 Medium'), local('NHaasGroteskTXPro-65Md'), local('NeueHaasGroteskText Pro Md'), url('../fonts/nhaas-tx-65Md.woff2') format('woff2'); }
@font-face { font-family: 'BC Haas'; font-weight: 700; font-display: swap; src: local('Neue Haas Grotesk Text Pro 75 Bold'), local('NHaasGroteskTXPro-75Bd'), local('NeueHaasGroteskText Pro Bd'), url('../fonts/nhaas-tx-75Bd.woff2') format('woff2'); }

.proto {
  --bg-primary: #FCFCFC;
  --bg-secondary: #F3F3F3;
  --bg-tertiary: #FFFFFF;
  --bg-positive: #E8F8F0;
  --content-primary: #090907;
  --content-primary-reverse: #FCFCFC;
  --content-secondary: #333333;
  --content-tertiary: #535353;
  --border-tertiary: #EAEAEA;
  --border-secondary: #757575;
  --bc-font: 'BC Haas', 'Neue Haas Grotesk Text Pro', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --s: .8;                        /* device scale: 14px chat text renders ~11px */
  --gap: 56px;
}
/* steps sized so two phones always fit the canvas */
@media (min-width: 1240px) and (max-width: 1499px) { .proto { --s: .76; --gap: 32px; } }
@media (min-width: 1240px) and (max-width: 1379px) { .proto { --s: .7; --gap: 24px; } }
@media (min-width: 721px) and (max-width: 960px) { .proto { --s: .72; --gap: 28px; } }
@media (max-width: 720px) { .proto { --s: .78; } }
@media (max-width: 380px) { .proto { --s: .75; } }

/* ── Stage: phones side by side, highlight follows the demo ── */
.proto .stage { display: flex; justify-content: center; gap: var(--gap); }
.proto .slot { display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1), filter .45s; }
.proto .slot-label { font-size: 13px; color: var(--ink-2, #464646); display: flex; align-items: center; gap: 8px; }
.proto .slot-label .step { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--rule, #E6E6E6); font-size: 11px; color: var(--ink-3, #737373); font-variant-numeric: tabular-nums; transition: background .3s, color .3s, border-color .3s; }
.proto .slot.is-active .step { background: var(--ink, #111); border-color: var(--ink, #111); color: #fff; }
.proto .slot-text { width: calc(426px * var(--s)); min-height: 3.4em; text-align: center; display: grid; }
.proto .slot-caption, .proto .slot-summary { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; text-wrap: balance; }
.proto .slot-caption { font-size: 14px; line-height: 1.45; color: var(--ink-2, #464646); }
.proto .slot-summary { font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--ink, #111); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.proto .slot-caption.is-shown, .proto .slot-summary.is-shown { opacity: 1; transform: none; }
.proto.is-playing .slot { opacity: .32; transform: scale(.97); filter: saturate(.6); }
.proto.is-playing .slot.is-active { opacity: 1; transform: none; filter: none; }

.proto .proto-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
.proto .proto-cap { font-size: 14px; line-height: 1.5; color: var(--ink-3, #737373); text-align: center; max-width: 52ch; text-wrap: pretty; }
.proto .play {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px 0 14px; border-radius: 999px;
  background: var(--ink, #111); color: #fff; border: 0;
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer;
  transition: transform .15s ease, opacity .2s;
}
.proto .play:hover { transform: translateY(-1px); }
.proto .play:active { transform: scale(.97); }
.proto .play svg { width: 18px; height: 18px; }
.proto .play[disabled] { opacity: .45; cursor: default; transform: none; }

/* Mobile: one phone at a time */
@media (max-width: 720px) {
  .proto .slot { display: none; }
  .proto .slot.is-shown { display: flex; }
  .proto.is-playing .slot.is-active { display: flex; }
  .proto .switch { display: inline-flex; }
}
.proto .switch { display: none; padding: 3px; gap: 2px; border: 1px solid var(--rule, #E6E6E6); border-radius: 10px; background: #fff; margin-bottom: 18px; }
.proto .switch button { font: inherit; font-size: 13px; border: 0; background: none; color: var(--ink-3, #737373); padding: 7px 12px; border-radius: 7px; cursor: pointer; }
.proto .switch button[aria-pressed="true"] { background: var(--ink, #111); color: #fff; }
.proto .switch-wrap { display: flex; justify-content: center; }

/* ── iPhone 17 Pro frame (402 × 874 pt screen), scaled by --s ── */
.iphone { width: calc(426px * var(--s)); height: calc(898px * var(--s)); flex: none; }
.iphone > .hw {
  width: 426px; height: 898px; transform: scale(var(--s)); transform-origin: 0 0;
  border-radius: 68px; padding: 12px; position: relative;
  background: #1d1d1f;
  box-shadow: inset 0 0 0 1.5px #8e8e93, inset 0 0 0 4px #2c2c2e, 0 2px 4px rgba(0,0,0,.08), 0 40px 80px -30px rgba(0,0,0,.35);
}
.iphone .screen {
  width: 402px; height: 874px; border-radius: 56px; overflow: hidden; position: relative;
  background: var(--bg-primary); display: flex; flex-direction: column;
  font-family: var(--bc-font); color: var(--content-primary); letter-spacing: 0;
  -webkit-font-smoothing: antialiased; user-select: none;
}
.iphone .island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 126px; height: 37px; border-radius: 20px; background: #000; z-index: 5; }

/* status bar */
.st { height: 54px; flex: none; padding: 18px 30px 0 46px; display: flex; justify-content: space-between; align-items: center; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', sans-serif; font-weight: 600; font-size: 17px; color: #000; }
.st .lv { display: flex; gap: 6px; align-items: center; }
.st svg { display: block; }

/* header */
.hd { height: 71px; flex: none; padding: 4px 16px 8px 8px; display: flex; align-items: center; gap: 8px; background: var(--bg-primary); border-bottom: 1px solid var(--border-tertiary); }
.hd .back { width: 24px; height: 24px; flex: none; color: var(--content-primary); }
.hd .det { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.hd .bike { position: relative; width: 80px; height: 45.333px; flex: none; }
.hd .bike img { width: 80px; height: 45.333px; border-radius: 3px; object-fit: cover; display: block; background: #d6d6d6; }
.hd .bike .av { position: absolute; left: 61px; top: 32.333px; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--bg-primary); color: #fff; font-size: 10px; font-weight: 500; display: grid; place-items: center; }
.hd .tx { flex: 1; min-width: 0; }
.hd .tt { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd .pr { font-size: 14px; line-height: 21px; color: var(--content-secondary); margin: 0; }
.hd .opt { width: 20px; height: 20px; flex: none; }

/* body */
.bd { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding-bottom: 12px; overflow: hidden; }
.prot { display: flex; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid var(--border-tertiary); margin-bottom: auto; }
.prot svg { width: 24px; height: 24px; flex: none; }
.prot p { font-size: 12px; line-height: 18px; color: var(--content-tertiary); margin: 0; }
.msgs { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-direction: column; gap: 4px; padding: 0 16px; animation: bc-in .32s cubic-bezier(.2,.8,.2,1) both; }
.row.me { align-items: flex-end; }
.row.them { align-items: flex-start; }
.m { display: flex; gap: 4px; align-items: flex-end; max-width: 100%; }
.m .av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 500; }
.m .av.self { background: linear-gradient(135deg, #d4b896, #a07c52); }
.bub { border: 1px solid var(--border-tertiary); background: var(--bg-primary); border-radius: 6px; padding: 12px; max-width: 268px; font-size: 14px; line-height: 21px; }
.bub p { margin: 0; }
.bub.sent { background: var(--bg-secondary); border-color: var(--bg-secondary); }
.bub.offer { border-radius: 8px; }
.bub.deal { background: var(--bg-positive); border-color: var(--bg-positive); }
.bub b { font-weight: 500; }
.bub .sub { display: block; font-size: 12px; line-height: 18px; color: var(--content-tertiary); }
.ts { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--content-tertiary); }
.ts svg { width: 18px; height: 12px; }
.typing { display: inline-flex; gap: 4px; padding: 16px 14px; border: 1px solid var(--border-tertiary); border-radius: 6px; background: var(--bg-primary); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a9a9a; animation: bc-dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
.trans { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 16px; font-size: 12px; line-height: 18px; color: var(--content-tertiary); }
.trans svg { width: 12px; height: 12px; }
.ctas { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.cta { width: 100%; height: 36px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 14px; line-height: 21px; padding: 8px 12px; border: 0; cursor: pointer; transition: transform .12s ease, opacity .12s ease, background-color .15s; }
.cta.primary { background: var(--content-primary); color: var(--content-primary-reverse); font-weight: 500; border-radius: 10px; box-shadow: 0 2px 8px 0 rgba(9,9,7,.3); }
.cta.secondary { background: transparent; color: var(--content-primary); border: 1px solid var(--border-secondary); border-radius: 6px; }
.cta.is-pressed, .cta:active { transform: scale(.97); }
.cta.secondary.is-pressed { background: var(--bg-secondary); }
.cta.primary.is-pressed { opacity: .8; }
.bub.has-action { display: flex; flex-direction: column; gap: 10px; position: relative; }

/* "La seule différence": shown at rest, before play */
.diff-hint {
  position: absolute; left: calc(100% + 10px); bottom: 9px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 12px 7px 9px; border-radius: 999px;
  background: #1D4ED8; color: #fff; font-size: 15px; line-height: 1; font-weight: 500;
  box-shadow: 0 6px 16px -6px rgba(29,78,216,.6);
  animation: hint-nudge 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
.diff-hint svg { width: 15px; height: 15px; }
.cta-md.hinted { box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 5px #1D4ED8; }
@keyframes hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }

/* time jump inside the thread (message_date_divider) */
.day-divider { display: flex; align-items: center; gap: 12px; padding: 4px 16px; font-size: 12px; line-height: 18px; color: var(--content-tertiary); animation: bc-in .4s cubic-bezier(.2,.8,.2,1) both; }
.day-divider::before, .day-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-tertiary); }
.cta-md { height: 40px; padding: 0 12px; border-radius: 8px; border: 0; font-family: inherit; font-size: 14px; line-height: 21px; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.cta-md.primary { background: var(--content-primary); color: var(--content-primary-reverse); box-shadow: 0 2px 8px 0 rgba(9,9,7,.3); }
.cta-md.is-pressed, .cta-md:active { transform: scale(.97); opacity: .85; }
.cta:focus-visible, .cta-md:focus-visible { outline: 2px solid var(--content-primary); outline-offset: 2px; }

/* composer */
.cw { flex: none; background: var(--bg-secondary); }
.cmp { padding: 16px 16px 0; display: flex; align-items: center; gap: 12px; }
.cmp .in { flex: 1; height: 46px; background: #fff; border: 1px solid var(--border-tertiary); border-radius: 6px; padding: 0 16px; display: flex; align-items: center; font-size: 14px; color: var(--content-tertiary); }
.cmp svg { width: 24px; height: 24px; flex: none; }
.home { height: 34px; position: relative; }
.home::after { content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 100px; background: var(--content-primary); }

@keyframes bc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bc-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) {
  .row, .day-divider, .diff-hint { animation: none; }
  .typing i { animation: none; opacity: .6; }
  .proto .slot { transition: none; }
}

/* ═══ Fees prototype (frais.js) ═══ */
.proto .reset { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule, #E6E6E6); background: #fff; font: inherit; font-size: 14px; color: var(--ink, #111); cursor: pointer; }
.proto .reset svg { width: 16px; height: 16px; }
.proto .reset[hidden] { display: none; }

/* tap hint above a CTA */
.ctas.has-hint { position: relative; }
.ctas.has-hint:has(.tap-hint) { margin-top: 40px; }
.tap-hint {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 12px 8px 14px; border-radius: 999px; background: #1D4ED8; color: #fff;
  font-size: 15px; line-height: 1; font-weight: 500; box-shadow: 0 6px 16px -6px rgba(29,78,216,.6);
  animation: tap-bob 1.6s cubic-bezier(.4,0,.2,1) infinite; z-index: 2;
}
.tap-hint svg { width: 15px; height: 15px; }
.cta.hinted { box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 5px #1D4ED8; }
@keyframes tap-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }

/* admin / status message (status_message.dart) */
.status-msg { border-top: 1px solid var(--border-tertiary); padding: 16px 16px 0; }
.status-msg b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; }
.status-msg.fresh { animation: hero-in .6s cubic-bezier(.2,.8,.2,1) .15s both; }
.status-msg p { margin: 4px 0 4px; font-size: 14px; line-height: 21px; color: var(--content-secondary); }

/* bottom sheet (accept_offer_bottom_modal.dart) */
.scrim { position: absolute; inset: 0; background: rgba(9,9,7,.4); opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 6; cursor: pointer; }
.scrim.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
  background: #fff; border-radius: 16px 16px 0 0; padding: 16px 16px 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -8px 30px -12px rgba(9,9,7,.25);
  transform: translateY(105%);
  /* iOS sheet feel: quick start, long soft settle; closing is faster */
  transition: transform .30s cubic-bezier(.4,0,1,1);
}
.sheet.is-open { transition: transform .5s cubic-bezier(.32,.72,0,1); }
.sheet.is-open { transform: none; }
.sh-title { margin: 0; padding: 16px 0; text-align: center; font-size: 18px; line-height: 27px; font-weight: 400; }
.sh-div { border: 0; border-top: 1px solid var(--border-tertiary); margin: 0 0 16px; }
.sh-div.strong { border-top-color: var(--border-secondary); margin: 16px 0; }
.sh-sub { margin: 0 0 16px; font-size: 14px; line-height: 21px; font-weight: 500; }
.sh-lines { display: flex; flex-direction: column; gap: 16px; }
.sh-line { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 21px; }
.sh-total { font-weight: 700; }
.sh-desc { margin: 16px 0; font-size: 14px; line-height: 21px; }
.btn-lg { height: 48px; border-radius: 12px; border: 0; font-family: inherit; font-size: 16px; line-height: 24px; cursor: pointer; padding: 0 16px; }
.btn-lg + .btn-lg { margin-top: 8px; }
.btn-lg.primary { background: var(--content-primary); color: #fff; box-shadow: 0 2px 8px 0 rgba(9,9,7,.3); }
.btn-lg.secondary { background: #fff; color: var(--content-primary); border: 1.5px solid var(--border-secondary); }
.sheet .home { height: 34px; }
/* moderation sheet (bad_message_detail_modal.dart): centred, icon, title, text, evidence */
.mod-sheet { padding: 24px 16px 0; gap: 16px; text-align: center; }
.mod-ic { align-self: center; display: grid; place-items: center; width: 48px; height: 48px; }
.mod-ic svg { width: 40px; height: 40px; color: var(--content-alert, #B91C1C); }
.mod-t { margin: 0; font-size: 18px; line-height: 27px; font-weight: 400; text-wrap: balance; }
.mod-p { margin: 0; font-size: 14px; line-height: 21px; color: var(--content-primary); }
.mod-ev { text-align: left; padding: 12px; border-radius: 4px; background: var(--bg-secondary); }
.mod-ev small { display: block; font-size: 12px; line-height: 18px; color: var(--content-tertiary, #737373); }
.mod-ev p { margin: 4px 0 0; font-size: 14px; line-height: 21px; color: #B91C1C; }
.mod-sheet .btn-lg { margin-top: 4px; }
/* "Bloqué par buycycle" under a moderated message */
.row .ts.blocked { color: #B91C1C; gap: 6px; }
.row .ts.blocked .bi { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #B91C1C; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.row .ts.blocked .t { color: var(--content-tertiary, #737373); }

/* checkout (checkout_details_screen.dart), slides in from the right */
.checkout {
  position: absolute; inset: 0; z-index: 8; background: var(--bg-primary);
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .38s cubic-bezier(.2,.8,.2,1);
  box-shadow: -12px 0 30px -18px rgba(0,0,0,.3);
}
.checkout.is-in { transform: none; }
.co-bar { height: 56px; flex: none; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid var(--border-tertiary); font-size: 16px; font-weight: 500; }
.co-back { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; padding: 4px; color: var(--content-primary); cursor: pointer; }
.co-back svg { width: 24px; height: 24px; }
.co-body { flex: 1; min-height: 0; overflow: hidden; padding: 16px; display: flex; flex-direction: column; }
.co-card { display: flex; gap: 12px; align-items: center; }
.co-card img { width: 106px; height: 60px; border-radius: 6px; object-fit: cover; }
.co-card small { display: block; font-size: 14px; line-height: 21px; }
.co-card b { display: block; font-size: 20px; line-height: 28px; font-weight: 700; }
.co-h { display: flex; align-items: center; gap: 8px; margin: 24px 0 12px; font-size: 20px; line-height: 28px; font-weight: 700; }
.co-h svg { width: 26px; height: 26px; flex: none; }
.co-addr { margin: 0; font-size: 14px; line-height: 21px; color: var(--content-secondary); }
.co-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--content-primary); border-radius: 8px; font-size: 14px; line-height: 21px; }
.co-opt span:nth-child(2) { flex: 1; }
.co-opt .radio { width: 18px; height: 18px; border-radius: 50%; border: 5px solid var(--content-primary); flex: none; }
.co-promo { margin: 20px 0 0; font-size: 16px; line-height: 24px; text-decoration: underline; }
.co-sum { margin: 24px 0 12px; font-size: 20px; line-height: 28px; font-weight: 700; }
.co-line { display: flex; justify-content: space-between; font-size: 16px; line-height: 24px; color: var(--content-tertiary); }
.co-line + .co-line { margin-top: 8px; }
.co-line b { font-weight: 500; }
.co-line.co-total { color: var(--content-primary); font-weight: 500; border-top: 1px solid var(--border-tertiary); padding-top: 8px; }
.co-bp { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; padding: 8px; border-radius: 8px; background: var(--bg-positive); color: #146C43; }
.co-bp svg { width: 21px; height: 21px; flex: none; }
.co-bp p { margin: 0; font-size: 14px; line-height: 21px; }
.co-bp b { font-weight: 500; }
.co-foot { flex: none; padding: 12px 16px 0; border-top: 1px solid var(--border-tertiary); display: flex; flex-direction: column; }
.co-foot .home { height: 34px; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
  .hero-wall .row.fresh, .hero-wall .status-msg.fresh, .hero-wall .claim-status.fresh, .hero-wall .cta.is-pressed, .hero-wall .stars svg.pop { animation: none; }
  .tap-hint { animation: none; }
  .sheet, .checkout, .scrim { transition: none; }
}

/* ═══ Hero wall (hero.js) ═══ */
.proto.hero-wall { --s: 1; --others: 1; --labels: 1; --cap: 40px; --cue: 1; }
.hero-wall {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  height: 240vh; margin-top: 56px;
}
.wall-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg, #fff); }
.wall {
  position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform;
  display: grid; grid-template-columns: repeat(4, 426px); column-gap: 120px; row-gap: 100px;
}
.wall-item { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--cap) * .9); }
.wall-item:not(.is-focus) { opacity: var(--others); }
.wall-item figcaption {
  opacity: var(--labels); font-size: var(--cap); line-height: 1.3; color: var(--ink, #111);
  text-align: center; letter-spacing: -0.01em; max-width: 426px;
}
.wall-item figcaption .n { color: var(--ink-3, #737373); margin-right: .5em; font-variant-numeric: tabular-nums; }
.wall-item figcaption em { display: block; font-style: normal; color: var(--ink-3, #737373); font-size: .85em; }
.hero-wall.is-static { height: 100vh; }
.hero-wall.is-static .wall-sticky { position: relative; }
/* scroll cue, only at the very start */
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid var(--rule, #E6E6E6);
  font-size: 13px; color: var(--ink-2, #464646); opacity: var(--cue); pointer-events: none;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.25);
}
.scroll-cue svg { width: 14px; height: 14px; animation: cue-bob 1.6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes cue-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
.hero-wall.is-static .scroll-cue { display: none; }

/* looping screens: only what is new animates in */
.hero-wall .veil { position: absolute; inset: 0; z-index: 20; background: var(--bg-primary); pointer-events: none; }
.hero-wall .row.still { animation: none; }
/* new elements arrive softly, a beat after the thread starts gliding */
.hero-wall .row.fresh,
.hero-wall .status-msg.fresh,
.hero-wall .claim-status.fresh { animation: hero-in .6s cubic-bezier(.2,.8,.2,1) .1s both; transform-origin: 50% 100%; }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
/* a press reads as a press: eased, held */
.hero-wall .cta.is-pressed { animation: hero-press .22s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes hero-press { to { transform: scale(.96); opacity: .82; } }
/* stars fill one after the other */
.hero-wall .stars svg.pop { animation: star-pop .42s cubic-bezier(.34,1.56,.64,1) both; transform-origin: 50% 55%; }
@keyframes star-pop { from { transform: scale(.4); opacity: .2; } to { transform: none; opacity: 1; } }
/* typing dots breathe a little slower */
.hero-wall .typing i { animation-duration: 1.2s; }
.media-grid img { width: 100%; height: 100%; object-fit: cover; display: block; background: #eaeaea; }

@media (max-width: 720px) {
  .wall { grid-template-columns: repeat(2, 426px); column-gap: 90px; row-gap: 80px; }
  .wall-item:not(.on-mobile) { display: none; }
  .hero-wall { height: 220vh; }
}

/* media message: 3 photos + 1 video */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 236px; border-radius: 8px; overflow: hidden; }
.media-grid .cell { position: relative; aspect-ratio: 1; display: block; }
.media-grid .play-dot { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(9,9,7,.55); }
.media-grid .play-dot::after { content: ''; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.media-grid .dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(9,9,7,.6); color: #fff; font-size: 11px; line-height: 16px; }

.claim-status { margin: 0 16px; padding: 10px 12px; border-radius: 6px; background: var(--bg-secondary); font-size: 13px; line-height: 19px; color: var(--content-secondary); text-decoration: underline; }
.review-card { margin: 0 16px; padding: 16px; border: 1px solid var(--border-tertiary); border-radius: 8px; background: #fff; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.review-card b { font-size: 16px; line-height: 24px; font-weight: 500; }
.review-card p { margin: 0; font-size: 12px; line-height: 18px; color: var(--content-tertiary); }
.stars { display: inline-flex; gap: 6px; }
.stars svg { width: 30px; height: 30px; }

/* ═══ 2023 screens: comments and offers (commentaires.js, offres.js) ═══ */
.proto[data-proto="commentaires"], .proto[data-proto="offres"] { --s: .7; }
.pair { display: flex; gap: clamp(24px, 4vw, 48px); justify-content: center; align-items: flex-start; }
.pair > div { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pair .slot-label { font-size: 13px; color: var(--ink-2, #464646); }
.bw-scale { zoom: .66; }
[data-proto="offres"] .bw-scale { zoom: .62; }
@media (max-width: 1100px) { .bw-scale { zoom: .52; } [data-proto="offres"] .bw-scale { zoom: .48; } }
@media (max-width: 720px) {
  .pair { flex-direction: column; align-items: center; }
  .proto[data-proto="commentaires"], .proto[data-proto="offres"] { --s: .74; }
  .bw-scale { zoom: .4; } [data-proto="offres"] .bw-scale { zoom: .37; }
}

.browser { width: var(--bw); background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #DADADA; box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); font-family: 'Helvetica Neue', -apple-system, Helvetica, Arial, sans-serif; color: #090907; text-align: left; }
.bw-bar { height: 38px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #F1F1F0; border-bottom: 1px solid #E2E2E0; }
.bw-bar .dots { display: flex; gap: 7px; }
.bw-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: #D3D3D1; }
.bw-bar .url { flex: 1; max-width: 460px; margin: 0 auto; height: 24px; border-radius: 6px; background: #fff; font-size: 12px; color: #737373; display: flex; align-items: center; padding: 0 10px; }
.w-av { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 500; flex: none; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border: 1px solid #090907; border-radius: 4px; font-size: 13px; background: #fff; }
.w-btn.dark { background: #090907; color: #fff; }
.w-btn.sm { height: 30px; font-size: 12px; }

.w23 { padding-bottom: 28px; }
.w23-nav { display: flex; align-items: center; gap: 22px; padding: 14px 28px; border-bottom: 1px solid #EEE; font-size: 14px; font-weight: 500; }
.w23-nav .logo { font-size: 22px; font-style: italic; letter-spacing: -0.02em; margin-right: 28px; }
.w23-nav .sp { flex: 1; }
.w23-nav .sell { background: #090907; color: #fff; padding: 7px 12px; border-radius: 4px; font-size: 12px; }
.w23-pdp { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 22px 28px 26px; border-bottom: 1px solid #EEE; }
.w23-pdp img { width: 240px; height: 150px; object-fit: cover; border-radius: 4px; }
.w23-pdp small { font-size: 12px; color: #535353; text-decoration: underline; }
.w23-pdp h4 { margin: 8px 0 6px; font-size: 22px; font-weight: 500; }
.w23-pdp .price { margin: 0 0 14px; font-size: 20px; color: #CE3C53; font-weight: 500; }
.w23-pdp .price s { color: #737373; font-size: 15px; margin-left: 6px; }
.w23-pdp .w-btn { display: flex; width: 230px; margin-bottom: 8px; }
.w23-h { margin: 26px 28px 8px; font-size: 20px; font-weight: 400; }
.w23-warn { margin: 0 28px 14px; font-size: 13px; line-height: 1.55; color: #737373; max-width: 560px; transition: color .5s, background-color .5s, box-shadow .5s; border-radius: 4px; }
.w23-field { margin: 0 28px; border: 1px solid #DDD; border-radius: 4px; font-size: 13px; color: #9a9a9a; }
.w23-field > span { display: block; padding: 14px 16px 36px; }
.w23-field > div { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 8px 16px; border-top: 1px solid #EEE; }
.w23-sub { margin: 22px 28px 6px; font-size: 14px; font-weight: 500; }
.wc { display: flex; gap: 12px; padding: 14px 28px 4px 40px; }
.wc.nested { padding: 14px 0 0; }
.wc-body { flex: 1; }
.wc-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wc-head .tag { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: #F3F3F3; color: #535353; }
.wc-head .helpful { margin-left: auto; font-size: 11px; color: #9a9a9a; }
.wc small { font-size: 11px; color: #9a9a9a; }
.wc p { margin: 8px 0 6px; font-size: 13px; line-height: 1.5; color: #333; }
.wc .reply { font-size: 12px; color: #737373; }

/* app 2023 */
.screen.a23 { font-family: 'Helvetica Neue', -apple-system, Helvetica, Arial, sans-serif; background: #fff; }
.a23-bar { height: 52px; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 0 12px; font-size: 18px; }
.a23-bar .arrow { font-size: 24px; }
.a23-bar b { text-align: center; font-weight: 600; }
.a23-count { margin: 4px 16px 0; padding-bottom: 8px; font-size: 14px; color: #535353; border-bottom: 1px solid #EEE; }
.a23-list { flex: 1; overflow: hidden; padding: 14px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.ac { display: flex; gap: 10px; align-items: flex-start; }
.ac-box { flex: 1; background: #F3F3F3; padding: 10px 12px; }
.ac-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ac-head b { font-weight: 500; color: #333; }
.ac-head .more { margin-left: auto; letter-spacing: 1px; }
.ac-head .seller { background: #333; color: #fff; font-size: 13px; padding: 1px 5px; }
.ac-box p { margin: 6px 0; font-size: 15px; line-height: 1.4; color: #090907; }
.ac-meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: #333; }
.ac-meta .orig { display: inline-flex; align-items: center; gap: 4px; color: #535353; }
.ac-meta .orig svg { width: 12px; height: 12px; }
.ac-meta .rep { margin-left: auto; }
.ac-reply { display: flex; gap: 8px; margin-top: 10px; }
.a23-input { display: flex; align-items: center; gap: 14px; margin: 10px 16px 0; }
.a23-input .fld { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 1px solid #090907; font-size: 14px; color: #535353; }
.a23-input .fld > span { flex: 1; }
.a23-input svg { width: 22px; height: 22px; color: #090907; display: block; }
.a23-input .send { display: inline-flex; }
.w23-side li { list-style: none; }
.screen.a23 .home { height: 34px; margin-top: auto; position: relative; }

.a23-bike { display: flex; gap: 14px; padding: 14px 16px 10px; background: #F7F7F7; }
.a23-bike img { width: 110px; height: 96px; object-fit: cover; }
.a23-bike small { display: block; font-size: 13px; }
.a23-bike b { display: block; font-size: 17px; }
.a23-bike .acc { display: inline-block; font-size: 12px; padding: 3px 8px; background: #FFF7ED; color: #B45309; margin-bottom: 6px; }
.a23-bike .pr { font-size: 15px; font-weight: 500; }
.a23-chips { display: flex; gap: 8px; padding: 0 16px 12px; background: #F7F7F7; font-size: 12px; }
.a23-chips span { background: #E9E9E9; padding: 4px 10px; }
.a23-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 16px 6px; font-size: 15px; text-align: center; }
.a23-tabs span { padding: 8px 0; background: #F3F3F3; }
.a23-tabs .on { background: #090907; color: #fff; }
.a23-offers { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 8px; background: #F7F7F7; padding: 8px 0; }
.ao { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: #fff; }
.ao > div { flex: 1; }
.ao-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.ao .t { font-size: 12px; padding: 2px 7px; }
.ao .t.new { background: #FFF1EC; color: #EA580C; }
.ao .t.counter, .ao .t.final { background: #EFF6FF; color: #1D4ED8; }
.ao .t.declined { background: #EEE; color: #333; }
.ao .dot { width: 7px; height: 7px; border-radius: 50%; background: #DC2626; }
.ao p { margin: 2px 0 0; font-size: 19px; font-weight: 600; }
.ao p.strike { text-decoration: line-through; color: #9a9a9a; }
.ao small { font-size: 12px; color: #535353; }
.ao .chev { font-size: 26px; color: #333; }

/* web offers */
.w23-prof { display: grid; grid-template-columns: 210px 1fr; gap: 26px; padding: 24px 28px; background: linear-gradient(#F1EEE8 0 110px, #fff 110px); }
.w23-side { list-style: none; margin: 0; padding: 14px 10px; background: #fff; border-radius: 6px; font-size: 13px; align-self: start; }
.w23-side li { padding: 9px 12px; border-radius: 4px; }
.w23-side li.on { background: #090907; color: #fff; }
.w23-offers h4 { margin: 4px 0 18px; font-size: 22px; font-weight: 400; }
.w23-card { background: #fff; border: 1px solid #EEE; border-radius: 6px; padding: 18px; }
.w23-ct { margin: 0 0 14px; font-size: 17px; }
.w23-bike { display: flex; gap: 12px; align-items: center; }
.w23-bike img { width: 86px; height: 60px; object-fit: cover; border-radius: 3px; }
.w23-bike b { display: block; font-size: 15px; font-weight: 500; }
.w23-bike small { font-size: 11px; color: #535353; text-decoration: underline; }
.w23-bike .orig { margin-left: auto; font-size: 11px; color: #CE3C53; align-self: flex-start; }
.w23-thread { margin: 14px 0 0 98px; padding: 12px 16px; background: #FBF7F3; border-radius: 4px; }
.w23-thread .lbl { margin: 0 0 8px; font-size: 12px; color: #737373; }
.w23-o { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.w23-o b { display: block; font-weight: 500; }
.w23-o em { font-style: normal; color: #CE3C53; font-size: 15px; }
.w23-o.me { justify-content: flex-end; text-align: right; margin-top: 10px; }
.w23-o .final { display: inline-block; margin-left: 6px; font-size: 9px; padding: 1px 6px; border-radius: 8px; background: #F59E0B; color: #fff; }
.w23-fee { margin: 10px 0 0 98px; font-size: 12px; color: #535353; }
.w23-actions { margin: 12px 0 0 auto; width: 380px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.w23-actions .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; padding: 0; animation: none; }
.w23-actions .inp { height: 34px; border: 1px solid #DDD; border-radius: 4px; display: flex; align-items: center; padding: 0 10px; color: #9a9a9a; }
.w23-actions .tog { display: inline-flex; align-items: center; gap: 8px; }
.w23-actions .tog i { width: 30px; height: 16px; border-radius: 9px; background: #DDD; }

/* the one moving part on the comments visual */
[data-proto="commentaires"] .late { opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
[data-proto="commentaires"].is-revealed .late { opacity: 1; transform: none; }
[data-proto="commentaires"] mark.leak { background: transparent; color: inherit; border-radius: 3px; transition: background-color .5s .7s, color .5s .7s; padding: 0 2px; }
[data-proto="commentaires"].is-revealed mark.leak { background: #FFEBEB; color: #B91C1C; }
[data-proto="commentaires"].is-revealed .w23-warn { color: #92400E; background: #FFFBEB; box-shadow: 0 0 0 6px #FFFBEB; transition-delay: 1.1s; }
@media (prefers-reduced-motion: reduce) { [data-proto="commentaires"] * { transition: none !important; } }

/* app-only 2023 visuals */
.proto[data-proto="commentaires"] { --s: .8; }
.proto[data-proto="offres"] { --s: .76; }
@media (min-width: 1240px) and (max-width: 1379px) { .proto[data-proto="offres"] { --s: .7; } }
@media (max-width: 720px) { .proto[data-proto="commentaires"], .proto[data-proto="offres"] { --s: .75; } .pair { gap: 28px; } }
.a23-bike { position: relative; }
.a23-bike .pr s { color: #9a9a9a; font-weight: 400; font-size: 13px; margin-left: 4px; }
.a23-bike .more-sq { position: absolute; right: 16px; top: 14px; width: 24px; height: 24px; background: #090907; color: #fff; display: grid; place-items: center; font-size: 12px; letter-spacing: 1px; }
.a23-chips .chev { background: none; margin-left: auto; font-size: 20px; line-height: 1; padding: 0 0 0 4px; }
.od-thread { flex: 1; padding: 18px 16px; display: flex; flex-direction: column; gap: 18px; }
.od-row { display: flex; gap: 10px; align-items: flex-start; }
.od-row.me { justify-content: flex-end; text-align: right; }
.od-row > div { display: flex; flex-direction: column; align-items: flex-start; }
.od-row.me > div { align-items: flex-end; }
.od-name { display: inline-block; font-size: 15px; padding: 1px 6px; background: #EEE; color: #333; }
.od-name.you { background: #090907; color: #fff; }
.od-box { margin: 4px 0 4px; padding: 10px 12px; background: #F3F3F3; font-size: 16px; color: #333; display: inline-flex; align-items: center; gap: 6px; }
.od-box b { font-weight: 500; }
.od-box.declined { color: #DC2626; }
.od-box .x { width: 18px; height: 18px; border-radius: 50%; background: #DC2626; color: #fff; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.od-row small { font-size: 12px; color: #535353; }
.od-sheet { margin-top: auto; background: #F3F3F3; padding: 16px; }
.od-sh-h { display: flex; justify-content: space-between; font-size: 16px; }
.od-sh-h span { font-size: 22px; line-height: 1; }
.od-sheet p { margin: 2px 0; font-size: 12px; color: #333; }
.od-sheet .fx { color: #1D4ED8; margin: 8px 0 10px; }
.od-sh-row { display: grid; grid-template-columns: 1.1fr 1fr .9fr; gap: 8px; }
.od-sh-row > span { height: 38px; display: grid; place-items: center; font-size: 15px; border: 1px solid #090907; background: #fff; }
.od-sh-row .inp { border-radius: 0; border-color: #fff; color: #9a9a9a; display: flex; align-items: center; justify-content: flex-start; padding-left: 12px; transition: border-color .2s; }
.od-sh-row .inp.typing { border-color: #090907; }
.od-sh-row .inp.filled { color: #090907; }
.od-sh-row .inp .caret { display: none; width: 1.5px; height: 18px; margin-left: 2px; background: #090907; }
.od-sh-row .inp.typing .caret { display: inline-block; animation: od-blink 1s steps(1) infinite; }
@keyframes od-blink { 50% { opacity: 0; } }
.od-sh-row .send { transition: background .15s, color .15s; }
.od-sh-row .send.is-pressed { background: #090907; color: #fff; animation: hero-press .22s cubic-bezier(.4,0,.2,1) forwards; }
.od-new { animation: hero-in .6s cubic-bezier(.2,.8,.2,1) both; }
.od-new.still { animation: none; }
.screen.a23 .od-veil { position: absolute; inset: 0; z-index: 20; background: #fff; pointer-events: none; }
.screen.a23 { display: flex; flex-direction: column; }

/* 2023 app product page (commentaires.js) */
.proto[data-proto="commentaires"] { --s: .76; }
@media (min-width: 1240px) and (max-width: 1379px) { .proto[data-proto="commentaires"] { --s: .7; } }
@media (max-width: 720px) { .proto[data-proto="commentaires"] { --s: .75; } }
.pair .slot-label .step { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; border: 1px solid var(--rule, #E6E6E6); font-size: 11px; color: var(--ink-3, #737373); }
.p23 { position: relative; }
.p23-top { height: 48px; flex: none; display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; padding: 0 12px; font-size: 16px; }
.p23-top b { text-align: center; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p23-top .ic svg { width: 22px; height: 22px; display: block; }
.p23-scroll { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.p23-page { transition: transform 1.7s cubic-bezier(.65,0,.35,1); padding-bottom: 20px; }
.p23-hero { position: relative; height: 240px; }
.p23-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p23-hero .cert { position: absolute; left: 10px; top: 10px; background: #146C43; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 3px; }
.p23-hero .fav { position: absolute; right: 12px; top: 10px; width: 22px; color: #fff; }
.p23-hero .fav svg { width: 22px; height: 22px; }
.p23-hero .pager { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 5px; background: rgba(255,255,255,.85); padding: 4px 8px; border-radius: 10px; }
.p23-hero .pager i { width: 5px; height: 5px; border-radius: 50%; background: #BBB; }
.p23-hero .pager i.on { width: 14px; border-radius: 3px; background: #090907; }
.p23-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px 0; }
.p23-thumbs img { width: 100%; height: 58px; object-fit: cover; display: block; opacity: .85; }
.p23-chips { display: flex; gap: 6px; padding: 10px 16px 4px; font-size: 12px; }
.p23-chips span { background: #EEE; padding: 4px 8px; }
.p23-title { padding: 8px 16px 0; }
.p23-title small { font-size: 14px; }
.p23-title h4 { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.p23-price { display: flex; align-items: center; gap: 8px; }
.p23-price b { font-size: 24px; font-weight: 600; }
.p23-price s { color: #737373; font-size: 13px; }
.p23-price .buy { margin-left: auto; background: #090907; color: #fff; padding: 8px 40px; font-size: 14px; }
.p23-stats { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #535353; margin: 8px 0 0; }
.p23-stats svg { width: 14px; height: 14px; }
.p23-desc { margin: 10px 16px; font-size: 13px; line-height: 1.5; color: #333; }
.p23-card { margin: 10px 16px; padding: 14px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); font-size: 14px; }
.p23-card .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.p23-card small { display: block; font-size: 12px; color: #737373; }
.p23-btn { display: grid; place-items: center; height: 42px; margin: 10px 16px 0; border: 1px solid #090907; font-size: 14px; }
.p23-btn.dark { background: #090907; color: #fff; }
.p23-sec { margin: 22px 16px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #535353; }
.p23-acc { margin: 0 16px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.p23-acc span { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 14px; border-bottom: 1px solid #F0F0F0; }
.p23-acc span::after { content: '+'; font-size: 18px; line-height: 1; }
.p23-comments { padding: 0 16px; display: flex; flex-direction: column; gap: 14px; }
.p23-c { display: flex; gap: 10px; align-items: flex-start; }
.p23-c p { margin: 0; font-size: 13px; line-height: 1.4; color: #333; }
.p23-c .h { display: flex; gap: 8px; align-items: baseline; }
.p23-c .h b { font-size: 14px; color: #090907; font-weight: 500; }
.p23-c .h small { font-size: 11px; color: #9a9a9a; }
.p23-c .orig, .c23 .orig { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #535353; font-weight: 500; margin-top: 4px; }
.p23-c .orig svg, .c23 .orig svg { width: 12px; height: 12px; }
.p23-btn.leave { margin-top: 16px; height: 36px; font-size: 13px; }
.p23-sim { margin: 22px 16px 0; font-size: 20px; font-weight: 500; }
.p23-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 4px 26px; border-top: 1px solid #EEE; background: #fff; }
.p23-tabs span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #A9A9A9; }
.p23-tabs span.on { color: #090907; }
.p23-tabs svg { width: 22px; height: 22px; }
.p23-tabs small { font-size: 10px; }

/* 2023 comments screen */
.c23-bike { margin: 8px 16px 0; padding: 14px; border-radius: 12px; box-shadow: 0 4px 18px rgba(0,0,0,.1); display: grid; grid-template-columns: 100px 1fr; gap: 14px; }
.c23-bike img { width: 100px; height: 88px; object-fit: cover; border-radius: 6px; }
.c23-bike span { display: block; font-size: 14px; }
.c23-bike b { display: block; font-size: 17px; font-weight: 500; }
.c23-bike .op { margin-top: 8px; }
.c23-bike .p23-chips { grid-column: 1 / -1; padding: 0; }
.c23-count { margin: 18px 16px 0; padding-bottom: 10px; font-size: 14px; color: #535353; border-bottom: 1px solid #EEE; }
.c23-list { flex: 1; min-height: 0; overflow: hidden; padding: 14px 16px 6px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.c23 { display: flex; gap: 10px; align-items: flex-start; }
.c23-box { flex: 1; background: #F3F3F3; border-radius: 6px; padding: 8px 10px; }
.c23 p { margin: 0; font-size: 14px; line-height: 1.4; color: #333; }
.c23 .h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.c23 .h b { font-size: 15px; color: #090907; font-weight: 500; }
.c23 .h small { font-size: 12px; color: #737373; }
.c23 .h .more { margin-left: auto; font-size: 11px; letter-spacing: 1px; }
.c23 .h .seller { background: #333; color: #fff; font-size: 11px; padding: 0 5px; }
.c23 .m { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.c23 .m b { font-size: 13px; color: #090907; }
.c23-reply { display: flex; gap: 8px; margin-top: 10px; }
.c23-input { display: flex; align-items: center; gap: 12px; padding: 12px 16px 0; background: #F3F3F3; margin-top: 8px; }
.c23-input .fld { flex: 1; display: flex; align-items: center; height: 42px; padding: 0 12px; border-radius: 6px; background: #fff; font-size: 14px; color: #9a9a9a; }
.c23-input .fld > span { flex: 1; }
.c23-input svg { width: 22px; height: 22px; display: block; color: #737373; }
.screen.a23 .c23-input + .home { background: #F3F3F3; }

/* ═══ State model (etats.js) ═══ */
.sm { position: relative; min-height: 380px; display: flex; flex-direction: column; justify-content: center; }
.sm-tree { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .09; transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); transform: scale(.98); pointer-events: none; }
.sm-model, .sm-stats { position: relative; transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1); }
.proto.show-tree .sm-tree { opacity: 1; transform: none; }
.proto.show-tree .sm-model, .proto.show-tree .sm-stats { opacity: 0; transform: scale(.98); pointer-events: none; }
.sm-model { display: flex; align-items: flex-start; justify-content: center; gap: 0; }
.sm-col { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 150px; }
.sm-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink, #111); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.sm-node { width: 168px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--rule, #E6E6E6); text-align: center; }
.sm-node b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.sm-node small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3, #737373); }
.sm-node.state { border-color: var(--ink, #111); }
.sm-node.exit { border-style: dashed; background: transparent; width: 150px; }
.sm-node.out.ok { background: #E8F8F0; border-color: #CDEEDC; }
.sm-node.out.ok b { color: #146C43; }
.sm-node.out.ko { background: #FFF7ED; border-color: #FBE3C8; }
.sm-node.out.ko b { color: #B45309; }
.sm-loop, .sm-note, .sm-after { font-size: 12.5px; color: var(--ink-3, #737373); text-align: center; max-width: 170px; line-height: 1.4; }
.sm-note { color: var(--ink-2, #464646); }
.sm-exits { margin-top: 6px; }
.sm-outcomes { gap: 10px; }
.sm-arrow { align-self: flex-start; margin-top: 40px; width: 64px; position: relative; text-align: center; }
.sm-arrow::before { content: ''; position: absolute; left: 6px; right: 10px; top: 22px; height: 1px; background: var(--ink-3, #737373); }
.sm-arrow::after { content: ''; position: absolute; right: 8px; top: 18px; width: 7px; height: 7px; border-top: 1px solid var(--ink-3, #737373); border-right: 1px solid var(--ink-3, #737373); transform: rotate(45deg); }
.sm-arrow span { display: block; font-size: 11.5px; line-height: 1.3; color: var(--ink-3, #737373); min-height: 18px; padding-top: 32px; }
.sm-stats { display: flex; justify-content: center; gap: clamp(20px, 5vw, 56px); margin: 34px 0 0; }
.sm-stats div { text-align: center; }
.sm-stats dt { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sm-stats dd { margin: 0; font-size: 12.5px; color: var(--ink-3, #737373); max-width: 150px; }
.proto .sm-toggle .t-close { display: none; }
.proto.show-tree .sm-toggle .t-open { display: none; }
.proto.show-tree .sm-toggle .t-close { display: inline; }
@media (max-width: 900px) {
  .sm-model { flex-direction: column; align-items: center; }
  .sm-arrow { margin: 0; width: 100%; height: 44px; }
  .sm-arrow::before { left: 50%; right: auto; top: 4px; bottom: 6px; width: 1px; height: auto; }
  .sm-arrow::after { left: calc(50% - 3px); right: auto; top: auto; bottom: 6px; transform: rotate(135deg); }
  .sm-arrow span { padding: 12px 0 0 calc(50% + 14px); text-align: left; }
  .sm-tree { object-fit: cover; object-position: left center; }
  .sm-stats { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .sm-tree, .sm-model, .sm-stats { transition: none; } }

/* ═══ State model v2 (etats.js): tree → folded → four states ═══ */
.sm2 { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 18px 22px; max-width: 720px; margin: 0 auto; }
.sm2-tree { margin: 0; display: flex; align-items: center; gap: 16px; }
.sm2-thumb { flex: none; width: 144px; height: 96px; padding: 0; border: 1px solid var(--rule, #E6E6E6); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.sm2-thumb:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); }
.sm2-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; display: block; }
.sm2-tree figcaption { max-width: 230px; font-size: 14px; line-height: 1.45; color: var(--ink-2, #464646); text-wrap: pretty; }
.sm2-tree figcaption b { color: var(--ink, #111); font-weight: 500; }
.sm2-fold { display: flex; align-items: center; gap: 10px; color: var(--ink-3, #737373); font-size: 14px; white-space: nowrap; }
.sm2-fold::before { content: ''; width: 34px; height: 1px; background: currentColor; }
.sm2-fold b { color: var(--ink, #111); font-weight: 500; }
.sm2-model { grid-column: 1 / -1; margin-top: 10px; }
.sm2-svg { display: block; width: 100%; max-width: 700px; margin: 0 auto; height: auto; overflow: visible; font-family: var(--font, inherit); }
.sm2-box rect { fill: #fff; stroke: var(--ink, #111); stroke-width: 1.2; }
.sm2-box .t { font-size: 17px; font-weight: 500; fill: var(--ink, #111); letter-spacing: -0.01em; }
.sm2-box .s { font-size: 13.5px; fill: var(--ink-3, #737373); }
.sm2-box.ok rect { fill: #E8F8F0; stroke: #146C43; stroke-width: .8; }
.sm2-box.ok .t { fill: #146C43; }
.sm2-box.ko rect { fill: #FFF7ED; stroke: #B45309; stroke-width: .8; }
.sm2-box.ko .t { fill: #B45309; }
.sm2-box.open rect { fill: transparent; stroke: var(--ink-3, #737373); stroke-dasharray: 4 4; stroke-width: 1; }
.sm2-box.open .t { fill: var(--ink-2, #464646); font-size: 14px; font-weight: 400; }
.sm2-line { stroke: var(--ink-3, #737373); stroke-width: 1.2; }
.sm2-line.ok { stroke: #146C43; }
.sm2-line.ko { stroke: #B45309; }
.sm2-line.dash { stroke-dasharray: 4 4; }
.sm2-lbl { font-size: 13.5px; fill: var(--ink-3, #737373); }
.sm2-note { font-size: 13.5px; fill: var(--ink-2, #464646); }
.sm2-num circle { fill: var(--ink, #111); }
.sm2-num text { font-size: 12px; fill: #fff; font-variant-numeric: tabular-nums; }
.sm2-list { display: none; }
.sm2-full { position: relative; margin-top: 8px; }
.sm2-full img { width: 100%; display: block; border-radius: 10px; border: 1px solid var(--rule, #E6E6E6); background: #fff; }
.sm2-close { display: block; margin: 16px auto 0; height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--ink, #111); color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.proto.show-tree .sm2 { display: none; }
@media (max-width: 720px) {
  .sm2 { grid-template-columns: 1fr; gap: 14px; }
  .sm2-tree { flex-direction: column; align-items: flex-start; }
  .sm2-thumb { width: 100%; height: 150px; }
  .sm2-fold::before { width: 20px; }
  .sm2-svg { display: none; }
  .sm2-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; }
  .sm2-list li { display: flex; gap: 14px; align-items: flex-start; position: relative; padding-bottom: 18px; }
  .sm2-list li:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 1px; background: var(--ink-3, #737373); }
  .sm2-list .n { flex: none; width: 23px; height: 23px; border-radius: 50%; background: var(--ink, #111); color: #fff; font-size: 12px; display: grid; place-items: center; }
  .sm2-list b { display: block; font-size: 16px; font-weight: 500; }
  .sm2-list small { display: block; font-size: 13.5px; color: var(--ink-3, #737373); line-height: 1.45; }
  .sm2-list .pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
  .sm2-list .pair2 > span { padding: 10px 12px; border-radius: 10px; }
  .sm2-list .ok { background: #E8F8F0; } .sm2-list .ok b { color: #146C43; }
  .sm2-list .ko { background: #FFF7ED; } .sm2-list .ko b { color: #B45309; }
}
/* v2 tuning: the stage centres with flex, so the grid must claim the full
   width or the SVG shrinks to ~0.78 and the type gets small */
.sm2 { max-width: none; width: 100%; }
.sm2-thumb img { object-fit: contain; object-position: center; padding: 6px; }
.sm2-list li::before { display: none !important; }
.sm2-list li { padding-left: 0 !important; }

/* ═══ Annotated current chat (regles.js) ═══ */
.proto[data-proto="regles"] { --s: .8; }
@media (min-width: 1240px) and (max-width: 1379px) { .proto[data-proto="regles"] { --s: .72; } }
.rules { display: grid; grid-template-columns: auto minmax(0, 440px); gap: clamp(28px, 5vw, 64px); align-items: center; justify-content: center; width: 100%; }
.rules-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rules-col li { padding: 0 !important; margin: 0 !important; }
.rules-col li::before { display: none !important; }
.rn { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; font: inherit; color: inherit; cursor: pointer; transition: background-color .25s, border-color .25s; }
.rn:hover, .rn[aria-pressed="true"] { background: #fff; border-color: var(--rule, #E6E6E6); }
.rn .n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ink, #111); font-size: 12px; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s; }
.rn[aria-pressed="true"] .n { background: #1D4ED8; border-color: #1D4ED8; color: #fff; }
.rn b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink, #111); }
.rn small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-3, #737373); text-wrap: pretty; }
.rz { position: absolute; z-index: 9; border-radius: 12px; border: 2.5px solid #1D4ED8; background: rgba(29, 78, 216, .06); opacity: 0; transform: scale(.985); transition: opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.rz.on { opacity: 1; transform: none; }
.rz-n { position: absolute; top: -14px; right: -14px; width: 28px; height: 28px; border-radius: 50%; background: #1D4ED8; color: #fff; font-size: 15px; display: grid; place-items: center; font-family: var(--font, sans-serif); }
@media (max-width: 900px) {
  .rules { grid-template-columns: 1fr; justify-items: center; }
  .rules-col { width: 100%; max-width: 460px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .rz, .rn, .rn .n { transition: none; } }

/* ── Admin message: spec + uses (admin.js). Figma 2005:146074 ── */
.adm { border-top: 1px solid var(--border-tertiary); padding: 16px 16px 16px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-primary); }
.adm b { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--content-primary); text-wrap: pretty; }
.adm p { margin: 0; font-size: 14px; line-height: 21px; color: var(--content-secondary); text-wrap: pretty; }
.adm .ts { align-self: flex-start; }
.adm-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.adm-link { height: 36px; border: 0; background: none; font-family: inherit; font-size: 14px; line-height: 21px; color: var(--content-primary); text-decoration: underline; text-underline-offset: 3px; cursor: default; }
.adm.fresh { animation: hero-in .5s cubic-bezier(.2,.8,.2,1) both; }
.adm-proto .rz { border-radius: 8px; }
.adm-proto .row { animation: none; }
.adm-proto .veil { position: absolute; inset: 0; z-index: 8; background: var(--bg-primary); pointer-events: none; }
.adm-side { display: flex; flex-direction: column; gap: 24px; }
.adm-side .rules-col { gap: 2px; }
.adm-side .rn { padding: 10px 14px; }
.adm-uses { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 14px; }
.adm-uses-l { width: 100%; font-size: 13px; color: var(--ink-3, #737373); margin-bottom: 2px; }
.adm-use { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border: 1px solid var(--rule, #E6E6E6); border-radius: 10px; background: transparent; font: inherit; font-size: 14px; color: var(--ink, #111); cursor: pointer; transition: background-color .25s, border-color .25s; }
.adm-use small { font-size: 12px; color: var(--ink-3, #737373); }
.adm-use:hover { background: #fff; }
.adm-use[aria-pressed="true"] { background: #fff; border-color: var(--ink, #111); }
@media (prefers-reduced-motion: reduce) { .adm.fresh { animation: none; } .adm-use { transition: none; } }

/* ═══ Shipping case: before, chat banner + separate order page (shipping/protos/avant.js) ═══ */
.proto[data-proto="avant"] { --s: .7; }
.av1 .pair-app { width: calc(426px * var(--s)); }
.av1-banner { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 14px; background: var(--bg-secondary); border-bottom: 1px solid var(--border-tertiary); }
.av1-banner p { margin: 0 0 4px; font-size: 14px; line-height: 21px; color: var(--content-secondary); }
.av1-banner .cta { cursor: default; }
.av1 .bd { justify-content: flex-start; padding-top: 16px; }
.av1-later { display: contents; }
.av1 .row.still { animation: none; }
.av1-bar { height: 52px; flex: none; display: grid; grid-template-columns: 24px 1fr 20px; align-items: center; gap: 8px; padding: 0 16px 0 12px; border-bottom: 1px solid var(--border-tertiary); }
.av1-bar b { text-align: center; font-size: 16px; font-weight: 500; }
.av1-bar .back { width: 24px; height: 24px; }
.av1-bar .opt { width: 20px; height: 20px; }
.av1-scroll { flex: 1; min-height: 0; overflow: hidden; }
.av1-page { transition: transform 1.6s cubic-bezier(.45,0,.2,1); }
.av1-photo img { width: 100%; height: 210px; object-fit: cover; display: block; background: #d6d6d6; }
.av1-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-tertiary); margin: 0 16px; padding-left: 0; padding-right: 0; }
.av1-head small { display: block; font-size: 13px; color: var(--content-tertiary); }
.av1-head b { font-size: 18px; line-height: 26px; font-weight: 500; }
.av1-rows { margin: 0; padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 21px; }
.av1-rows div { display: flex; justify-content: space-between; }
.av1-rows dt { color: var(--content-tertiary); }
.av1-rows dd { margin: 0; }
.av1-support { margin: 6px 16px 0; width: calc(100% - 32px); cursor: default; }
.av1-status { padding: 22px 16px 6px; display: flex; flex-direction: column; gap: 2px; }
.av1-status b { font-size: 17px; font-weight: 500; }
.av1-status small { font-size: 12px; color: var(--content-tertiary); transition: color .4s; }
.av1-steps { list-style: none; margin: 0; padding: 0 0 24px; }
.av1-step { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--border-tertiary); color: var(--content-tertiary); transition: background-color .5s, color .5s; }
.av1-step > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.av1-step .n { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 4px; background: var(--border-tertiary); color: var(--content-tertiary); font-size: 12px; font-weight: 500; transition: background-color .5s, color .5s; }
.av1-step b { font-size: 15px; line-height: 22px; font-weight: 500; }
.av1-step .d { margin: 0; font-size: 13px; line-height: 19px; }
.av1-step .d:empty { display: none; }
.av1-step.is-done, .av1-step.is-current { color: var(--content-primary); }
.av1-step.is-done .n, .av1-step.is-current .n { background: var(--content-primary); color: var(--content-primary-reverse); }
.av1-step.is-done .d { color: var(--content-secondary); }
.av1-step.is-current { background: var(--bg-secondary); }
.av1-follow { display: none; cursor: default; margin-top: 2px; }
.av1-step.is-current .av1-follow { display: flex; }
.av1-track { display: flex; align-items: center; gap: 6px; height: 10px; }
.av1-track i { flex: 1; height: 3px; border-radius: 2px; background: var(--border-tertiary); position: relative; overflow: hidden; }
.av1-track i::after { content: ''; position: absolute; inset: 0; background: var(--content-primary); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.av1-track i:nth-child(-n+2)::after { transform: none; }
.av1-track.full i::after { transform: none; }
.av1-track.full i:nth-child(3)::after { transition-delay: .2s; }
.av1-track.full i:nth-child(4)::after { transition-delay: .4s; }
.av1-moved .av1-step[data-k="ship"] { animation: av1-flash 1.2s ease .3s; }
.av1-moved .av1-upd { color: var(--content-primary); }
@keyframes av1-flash { 0% { background: #DCE9FF; } 100% { background: var(--bg-secondary); } }
.av1-cap { margin: 0; min-height: 3em; font-size: 14px; line-height: 1.45; color: var(--ink-2, #464646); text-align: center; text-wrap: balance; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.av1-cap.is-shown { opacity: 1; transform: none; }
/* the banner never changes: a brief outline says so */
.av1-silent .av1-banner { animation: av1-still 1.6s ease; }
@keyframes av1-still { 0%, 100% { box-shadow: inset 0 0 0 0 transparent; } 30%, 70% { box-shadow: inset 0 0 0 2px #1D4ED8; } }
@media (max-width: 720px) { .proto[data-proto="avant"] { --s: .74; } .pair.av1 { flex-direction: column-reverse; } .av1 .slot-label .step { display: none; } }
@media (prefers-reduced-motion: reduce) { .av1-page, .av1-step, .av1-track i::after { transition: none; } .av1-moved .av1-step, .av1-silent .av1-banner { animation: none; } }
.proto .av1-steps > li { padding: 14px 16px; margin: 0; }
.proto .av1-steps > li::before { content: none; display: none; }

/* ═══ Shipping case: the two flows as a metro map (shipping/protos/parcours.js) ═══ */
.pc { --buyer: #1D4ED8; --seller: #B45309; --bc: #111111; --carrier: #15803D; --l-b: #111; --l-c: #8A8A8A; width: 100%; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; font-family: inherit; color: var(--ink, #111); }
.pc-stats { display: flex; justify-content: center; gap: clamp(24px, 5vw, 56px); margin: 0 0 8px; }
.pc-stats > div { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; }
.pc-stats dd { margin: 0; font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--ink, #111); font-variant-numeric: tabular-nums; }
.pc-stats dt { font-size: 13px; color: var(--ink-3, #737373); }
@media (max-width: 720px) { .pc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin-bottom: 20px; } }
.pc-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--rule, #E6E6E6); border-radius: 10px; background: #fff; }
.pc-switch button { font: inherit; font-size: 13px; border: 0; background: none; color: var(--ink-3, #737373); padding: 7px 12px; border-radius: 7px; cursor: pointer; }
.pc-switch button[aria-pressed="true"] { background: var(--ink, #111); color: #fff; }
.proto .pc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2, #464646); }
.proto .pc-legend li { padding: 0; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.proto .pc-legend li::before { content: none; }
.pc-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
[data-who="buyer"] { --c: var(--buyer); } [data-who="seller"] { --c: var(--seller); } [data-who="bc"] { --c: var(--bc); } [data-who="carrier"] { --c: var(--carrier); }

.pc-map { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; column-gap: 8px; row-gap: 34px; padding: 8px 0 4px; }
.pc-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pc-band { stroke: #EDEBE6; stroke-width: 26; stroke-linecap: round; }
.pc-track { fill: none; stroke-width: 4; stroke-linecap: round; transition: opacity .35s, stroke .35s; }
.pc-track.pc-s, .pc-track.pc-b { stroke: var(--l-b); }
.pc-track.pc-c { stroke: var(--l-c); }
.pc-leg span { display: block; text-align: center; font-size: 12px; line-height: 22px; color: var(--ink-3, #737373); white-space: nowrap; }
.pc-leg-v span { text-align: left; }
.pc-tag { position: relative; z-index: 1; font-size: 12px; color: var(--ink-3, #737373); align-self: end; white-space: nowrap; }
.pc-tag-b { grid-column: 3 / 6; grid-row: 1; justify-self: center; }
.pc-tag-c { grid-column: 3 / 6; grid-row: 5; align-self: start; justify-self: center; }
.pc-st { position: relative; z-index: 1; grid-column: var(--pos); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: opacity .35s; }
.pc-st.pc-b { grid-row: 2; } .pc-st.pc-s { grid-row: 3; } .pc-st.pc-c { grid-row: 4; }
.pc-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--c); box-shadow: 0 0 0 3px #fff; transition: transform .2s, background .2s; }
.pc-st[aria-pressed="true"] .pc-dot { background: var(--c); transform: scale(1.25); }
.pc-st:focus-visible { outline: none; }
.pc-st:focus-visible .pc-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink, #111); }
.pc-tx { display: flex; flex-direction: column; gap: 2px; max-width: 112px; }
.pc-st.pc-b { flex-direction: column-reverse; }
.pc-who { font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--c); }
.pc-tx b { font-size: 15px; line-height: 1.25; font-weight: 500; }
.pc-st:hover .pc-tx b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* one line in focus */
[data-line="b"] .pc-st.pc-c, [data-line="c"] .pc-st.pc-b { opacity: .25; }
[data-line="b"] .pc-track.pc-c, [data-line="c"] .pc-track.pc-b, [data-line="b"] .pc-leg.pc-c, [data-line="c"] .pc-leg.pc-b, [data-line="b"] .pc-tag-c, [data-line="c"] .pc-tag-b { opacity: .2; }
[data-line="c"] .pc-track.pc-c { stroke: var(--l-b); }

/* the thread: the admin message at the selected station */
.pc-thread { display: flex; flex-direction: column; gap: 8px; max-width: 460px; width: 100%; margin: 0 auto; }
.pc-thread-l { font-size: 12px; color: var(--ink-3, #737373); text-align: center; }
.pc-adm { --bg-primary: #FCFCFC; --content-primary: #090907; --content-secondary: #333; --border-tertiary: #EAEAEA; border: 1px solid #EAEAEA; border-radius: 10px; font-family: var(--bc-font); min-height: 96px; }

@media (max-width: 720px) {
  .pc-map { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: auto; row-gap: 40px; column-gap: 0; }
  .pc-tag { display: none; }
  .pc-band { stroke-width: 22; }
  .pc-st, .pc-st.pc-b { flex-direction: row; align-items: flex-start; text-align: left; grid-column: 1; grid-row: var(--r); }
  .pc-st.pc-s { grid-column: 1 / 3; }
  .pc-st.pc-c { grid-column: 2; }
  .pc-st.pc-b, .pc-st.pc-s, .pc-st.pc-c { grid-row: var(--r); }
  .pc-dot { flex: none; margin-top: 2px; }
  .pc-tx { max-width: 130px; }
  .pc-st.pc-s .pc-tx { max-width: 220px; }
  .pc-tag { white-space: normal; padding-left: 28px; }
  .pc-leg { display: none; }
  .pc-tag-b { grid-column: 1; grid-row: 3; }
  .pc-tag-c { grid-column: 2; grid-row: 3; align-self: end; }
}
@media (prefers-reduced-motion: reduce) { .pc-track, .pc-st, .pc-dot { transition: none; } }

/* ═══ Shipping case: admin message, both sides, three moments (shipping/protos/admin.js) ═══ */
.proto[data-proto="admin"] { --s: .7; }
.sx { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sx-phones { display: flex; justify-content: center; gap: var(--gap); }
.sx-slot { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sx-slot .slot-label { font-size: 13px; color: var(--ink-2, #464646); }
.sx-progress { flex: none; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border-tertiary); background: var(--bg-secondary); font-size: 14px; color: var(--content-primary); }
.sx-progress span { font-weight: 500; }
.sx-progress svg { width: 20px; height: 20px; }
.sx-bd { gap: 0; }
.sx-bd .msgs { gap: 14px; padding-bottom: 4px; }
.adm.past b, .adm.past p { color: var(--content-tertiary); }
.sx .adm { position: relative; }
.sx .adm > .sx-pin { position: absolute; top: 14px; right: 12px; }
.sx .adm:has(> .sx-pin) { padding-right: 44px; }
.sx-ctas { position: relative; padding-top: 12px; }
.sx-ctas .cta { cursor: default; }
.sx-ctas > .sx-pin { position: absolute; top: 0; right: 6px; z-index: 3; }
.sx-pin { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1D4ED8; color: #fff; font-size: 12px; font-weight: 600; font-family: var(--font, inherit); line-height: 1; box-shadow: 0 0 0 3px var(--bg-primary, #fff); flex: none; }
.proto .sx-key { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 0; font-size: 14px; color: var(--ink-2, #464646); }
.proto .sx-key li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.proto .sx-key li::before { content: none; display: none; }
.proto .sx-key .sx-pin { box-shadow: none; }
.sx-moments { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--rule, #E6E6E6); border-radius: 10px; background: #fff; }
.sx-moments button { font: inherit; font-size: 14px; border: 0; background: none; color: var(--ink-3, #737373); padding: 8px 16px; border-radius: 7px; cursor: pointer; }
.sx-moments button[aria-pressed="true"] { background: var(--ink, #111); color: #fff; }
@media (max-width: 720px) { .proto[data-proto="admin"] { --s: .74; } .sx-phones { flex-direction: column; align-items: center; gap: 28px; } }

@media (max-width: 720px) { .sx-slot.is-actor { order: -1; } }

/* ═══ Shipping case: packing step (shipping/protos/emballage.js), from "Pack the Order v2" mobile ═══ */
.proto[data-proto="emballage"] { --s: .7; }
.pk-pair .pair-app { width: calc(426px * var(--s)); }
.pk-nav { flex: none; height: 60px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--border-tertiary); }
.pk-nav .back { width: 24px; height: 24px; }
.pk-nav b { font-size: 24px; line-height: 32px; font-weight: 500; color: var(--content-primary); }
.pk-scroll { flex: 1; min-height: 0; overflow: hidden; }
.pk-page { display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 140px; transition: transform 1.1s cubic-bezier(.45,0,.2,1); }
.pk-urgency { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, #090907 0%, #1a1a1a 100%); color: #FCFCFC; }
.pk-urgency::before { content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, #2F4B02 0%, transparent 60%); opacity: .8; filter: blur(20px); }
.pk-urgency > * { position: relative; }
.pk-urgency b { font-size: 18px; line-height: 27px; font-weight: 700; }
.pk-urgency p { margin: 0; font-size: 14px; line-height: 21px; color: rgba(255,255,255,.75); }
.pk-urgency strong { color: #FCFCFC; font-weight: 500; }
.pk-video { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--border-tertiary); border-radius: 12px; background: #fff; }
.pk-play { width: 44px; height: 44px; border-radius: 50%; background: var(--content-primary); color: #FCFCFC; display: grid; place-items: center; flex: none; }
.pk-play svg { width: 16px; height: 16px; margin-left: 2px; }
.pk-video b { display: block; font-size: 14px; line-height: 21px; font-weight: 700; color: var(--content-primary); }
.pk-video small { font-size: 12px; line-height: 18px; color: var(--content-tertiary); }
.pk-context { display: flex; flex-direction: column; gap: 8px; }
.pk-context b { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--content-primary); }
.pk-context p { margin: 0; font-size: 14px; line-height: 21px; color: var(--content-tertiary); }
.pk-progress { display: flex; flex-direction: column; gap: 8px; }
.pk-track { height: 4px; border-radius: 2px; background: #EAEAEA; overflow: hidden; }
.pk-track i { display: block; height: 100%; width: 0; background: var(--content-primary); border-radius: 2px; transition: width .4s cubic-bezier(.4,0,.2,1), background .3s; }
.pk-track.full i { background: #146C43; }
.pk-progress small { font-size: 14px; line-height: 21px; color: var(--content-tertiary); }
.pk-steps { display: flex; flex-direction: column; margin-top: -24px; }
.pk-step { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--border-tertiary); transition: opacity .3s; }
.pk-step:last-child { border-bottom: 0; }
.pk-step.locked { opacity: .35; }
.pk-ind { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-secondary); display: grid; place-items: center; flex: none; font-size: 14px; font-weight: 700; color: var(--content-primary); transition: background .2s, color .2s; }
.pk-ind svg { width: 14px; height: 14px; }
.pk-step.complete .pk-ind { background: #146C43; color: #fff; }
.pk-step.optional .pk-ind { background: transparent; border: 2px dashed #D0D0D0; color: #A9A9A9; font-weight: 500; }
.pk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-tx b { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--content-primary); }
.pk-tx small { font-size: 13px; line-height: 19px; color: var(--content-tertiary); }
.pk-step.complete .pk-tx b { color: var(--content-tertiary); }
.pk-step.optional .pk-tx b { color: var(--content-tertiary); font-weight: 400; }
.pk-step.optional .pk-tx small { color: #A9A9A9; }
.pk-btn { flex: none; padding: 7px 14px; border: 1.5px solid #090907; border-radius: 10px; font-size: 14px; line-height: 21px; font-weight: 500; color: var(--content-primary); }
.pk-btn.dark { background: #090907; color: #FCFCFC; }
.pk-step.complete .pk-btn, .pk-step.optional .pk-btn { border-color: #D0D0D0; background: transparent; color: var(--content-tertiary); font-weight: 400; }
.pk-thumbs { width: 100%; display: flex; gap: 4px; padding-left: 44px; }
.pk-thumbs:empty { display: none; }
.pk-th { width: 40px; height: 30px; border-radius: 4px; overflow: hidden; background: #EAEAEA; animation: hero-in .35s cubic-bezier(.2,.8,.2,1) both; }
.pk-th:nth-child(2) { animation-delay: .12s; } .pk-th:nth-child(3) { animation-delay: .24s; }
.pk-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-box { display: block; width: 100%; height: 100%; position: relative; background: linear-gradient(160deg, #D7B98C, #B88E5C); }
.pk-box::after { content: ''; position: absolute; left: 0; right: 0; top: 46%; height: 3px; background: rgba(240,230,210,.8); }
.pk-box-open { background: linear-gradient(160deg, #3B3B3B 0 38%, #C9A472 38%); }
.pk-box-inside { background: radial-gradient(circle at 50% 55%, #2A2A2A 0 30%, #C9A472 31%); }
.pk-box-inside::after, .pk-box-open::after { display: none; }
.pk-box-id::before { content: 'BC-28'; position: absolute; left: 4px; bottom: 3px; font-size: 7px; font-weight: 700; color: #333; }
.pk-terms { display: flex; flex-direction: column; gap: 16px; transition: opacity .3s; }
.pk-terms.locked { opacity: .35; }
.pk-terms b { font-size: 18px; line-height: 27px; font-weight: 500; color: var(--content-secondary); }
.pk-terms label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--content-secondary); }
.pk-cb { width: 20px; height: 20px; flex: none; margin-top: 1px; border: 1px solid #757575; border-radius: 4px; background: #fff; position: relative; transition: background .2s, border-color .2s; }
.pk-cb.on { background: #090907; border-color: #090907; }
.pk-cb.on::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #FCFCFC; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pk-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 44px 16px 0; background: linear-gradient(180deg, rgba(252,252,252,0) 1%, #FCFCFC 39%); }
.pk-main { display: flex; align-items: center; justify-content: center; height: 49px; border-radius: 6px; background: #EAEAEA; color: var(--content-tertiary); font-size: 16px; transition: background .3s, color .3s, transform .12s; }
.pk-main.on { background: #090907; color: #FCFCFC; }
.pk-main.is-pressed { transform: scale(.97); opacity: .85; }
.pk-cta .home { height: 34px; }
@media (max-width: 720px) { .proto[data-proto="emballage"] { --s: .74; } }
@media (prefers-reduced-motion: reduce) { .pk-page, .pk-track i, .pk-th { transition: none; animation: none; } }

/* ═══ Shipping case: sale confirmation subflow (shipping/protos/confirmation.js), from the hub "Confirm sale" ═══ */
.proto[data-proto="confirmation"] { --s: .74; }
.cf { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cf-cap { width: calc(426px * var(--s) + 80px); }
.cf .screen { position: relative; }
.cf-chat { position: absolute; inset: 0; display: flex; flex-direction: column; }
.cf-panel { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; background: var(--bg-primary); padding-top: 54px; transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); }
.cf-panel.open { transform: none; }
.cf-head { flex: none; display: flex; align-items: center; gap: 16px; padding: 16px; border-bottom: 1px solid var(--border-tertiary); background: #fff; }
.cf-head .back { width: 24px; height: 24px; }
.cf-head b { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--content-primary); }
.cf-body { flex: 1; min-height: 0; overflow: hidden; padding: 20px 16px 0; display: flex; flex-direction: column; gap: 14px; }
.cf-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.cf-bar i { flex: 1; height: 8px; border-radius: 4px; background: #EAEAEA; transition: background .3s; }
.cf-bar i.on { background: #090907; }
.cf-banner { padding: 16px; border-radius: 12px; background: linear-gradient(229deg, #FDFDA0 0%, #DAFDA0 100%); display: flex; flex-direction: column; gap: 8px; }
.cf-banner b { display: flex; align-items: center; gap: 8px; font-size: 18px; line-height: 24px; font-weight: 700; color: var(--content-primary); }
.cf-truck svg { width: 24px; height: 24px; display: block; }
.cf-banner p { margin: 0; font-size: 14px; line-height: 21px; color: var(--content-secondary); }
.cf-h { margin: 6px 0 2px; font-size: 18px; line-height: 24px; font-weight: 500; color: var(--content-primary); }
.cf-row { display: flex; gap: 12px; }
.cf-row > .cf-field { flex: 1; min-width: 0; }
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field > span:first-child { font-size: 14px; color: var(--content-tertiary); }
.cf-input { height: 48px; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--border-tertiary); border-radius: 8px; background: #fff; font-size: 14px; color: var(--content-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .25s; }
.cf-field.select .cf-input { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23535353' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.cf-field.date .cf-input { color: #A9A9A9; }
.cf-input.focus { border-color: #090907; }
.cf-field.date .cf-input.set { color: var(--content-primary); }
.cf-input.cf-time-in { width: 92px; }
.cf-time { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--content-primary); }
.cf-check { margin: 4px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--content-secondary); }
.cf-cb { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 4px; border: 1px solid #757575; background: #fff; position: relative; }
.cf-check.on .cf-cb { background: #090907; border-color: #090907; }
.cf-check.on .cf-cb::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cf-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; color: var(--content-primary); }
.cf-title.big { font-size: 24px; line-height: 32px; }
.cf-p { margin: 0; font-size: 15px; line-height: 23px; color: var(--content-secondary); }
.cf-p.cf-small { font-size: 14px; line-height: 22px; }
.cf-p strong { font-weight: 500; color: var(--content-primary); }
.cf-link { margin: 0; font-size: 14px; color: var(--content-primary); text-decoration: underline; text-underline-offset: 3px; }
.cf-kit { display: flex; gap: 10px; height: 132px; }
.cf-kit-main { flex: 1; border-radius: 8px; background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); display: grid; place-items: center; }
.cf-kit-main i { width: 64%; height: 54%; border-radius: 4px; background: linear-gradient(160deg, #D7B98C, #B88E5C); box-shadow: inset 0 -10px 0 rgba(0,0,0,.08); }
.cf-kit-side { width: 86px; display: flex; flex-direction: column; gap: 10px; }
.cf-kit-side i { flex: 1; border-radius: 8px; background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); }
.cf-sum b { display: block; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--content-primary); margin-bottom: 6px; }
.cf-sum p { margin: 0; font-size: 14px; line-height: 22px; color: var(--content-secondary); }
.cf-earn { padding: 14px 16px; border: 1px solid var(--border-tertiary); border-radius: 12px; background: #fff; }
.cf-earn b { display: block; font-size: 16px; font-weight: 700; color: var(--content-primary); margin-bottom: 8px; }
.cf-earn p { margin: 0; display: flex; justify-content: space-between; font-size: 14px; line-height: 24px; color: var(--content-secondary); }
.cf-earn p.tot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-tertiary); font-weight: 500; color: var(--content-primary); }
.cf-foot { flex: none; padding: 16px 16px 0; border-top: 1px solid var(--border-tertiary); background: var(--bg-secondary); }
.cf-cta { height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 6px; background: #090907; color: #FCFCFC; font-size: 15px; transition: transform .12s, opacity .12s; }
.cf-cta svg { width: 16px; height: 16px; }
.cf-cta.is-pressed { transform: scale(.97); opacity: .85; }
.cf-foot .home { height: 34px; }
.cf-steps button { padding: 8px 12px; font-size: 13px; }
@media (max-width: 720px) { .cf-steps { flex-wrap: wrap; justify-content: center; } .cf-cap { width: auto; max-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .cf-panel { transition: none; } }

/* ═══ Shipping case: admin-message registry next to the thread (shipping/protos/registre.js) ═══ */
.proto[data-proto="registre"] { --s: .64; }
.rg-pair { display: flex; align-items: center; justify-content: center; gap: 28px; }
.rg-left { flex: 0 1 auto; min-width: 0; }
.rg-scale { zoom: .62; }
.rg-right { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: none; }
.rg-right .slot-label { font-size: 13px; color: var(--ink-2, #464646); }
.rg { padding: 28px 32px 32px; font-family: var(--bc-font); color: #090907; background: #FCFCFC; }
.rg-title { margin: 0 0 4px; font-size: 26px; line-height: 34px; font-weight: 500; }
.rg-count { margin: 0 0 18px; font-size: 14px; color: #535353; }
.rg-count b { font-weight: 500; color: #090907; }
.rg-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.rg-table th { text-align: left; font-size: 12px; font-weight: 500; color: #535353; padding: 10px 10px; border-bottom: 1px solid #EAEAEA; background: #F3F3F3; white-space: nowrap; }
.rg-table td { padding: 11px 10px; border-bottom: 1px solid #EAEAEA; vertical-align: middle; }
.rg-row { cursor: pointer; transition: background-color .2s; }
.rg-row:hover { background: #F7F7F7; }
.rg-row.open { background: #F3F3F3; }
.rg-row:focus-visible { outline: 2px solid #090907; outline-offset: -2px; }
.rg-id, .rg-step, .rg-axis { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; }
.rg-id { font-size: 12px; font-weight: 500; white-space: nowrap; }
.rg-step { font-size: 12px; color: #535353; text-align: center; }
.rg-label { font-size: 13px; color: #333; white-space: nowrap; }
.rg-h { font-weight: 500; }
.rg-phase { font-size: 12px; color: #535353; white-space: nowrap; }
.rg-axis { display: inline-flex; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .3px; white-space: nowrap; }
.rg-pk { background: #FFF7ED; color: #EA580C; } .rg-h { } .rg-axis.rg-h { background: #EFF6FF; color: #1D4ED8; } .rg-dh { background: #E8F8F0; color: #146C43; } .rg-u { background: #090907; color: #FCFCFC; }
.rg-pov { display: inline-flex; font-size: 12px; font-weight: 500; padding: 4px 8px; border-radius: 4px; text-transform: capitalize; }
.rg-seller { background: #EFF6FF; color: #1D4ED8; } .rg-buyer { background: #E8F8F0; color: #146C43; }
.rg-detail td { padding: 0; border-bottom: 1px solid #EAEAEA; background: #F3F3F3; }
.rg-detail div { padding: 4px 24px 18px; display: flex; flex-direction: column; gap: 6px; }
.rg-k { font-size: 11px; font-weight: 500; color: #A9A9A9; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.rg-detail p { margin: 0; font-size: 14px; line-height: 21px; color: #333; display: flex; gap: 6px; flex-wrap: wrap; }
.rg-act { display: inline-flex; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 4px; background: #EAEAEA; color: #333; }
.rg-act.primary { background: #090907; color: #FCFCFC; }
@media (max-width: 1099px) { .rg-scale { zoom: .5; } }
@media (max-width: 720px) { .rg-pair { flex-direction: column; } .rg-scale { zoom: .4; } .proto[data-proto="registre"] { --s: .74; } }

/* ═══ Shipping hero "le relais" (relais.js) ═══ */
.proto[data-proto="relais"] { --s: .62; --gap: 48px; }
.proto[data-proto="relais"] .proto-cap:empty { display: none; }
.proto[data-proto="relais"] .proto-foot { margin-top: 24px; }
.rl-phones { display: flex; justify-content: center; gap: var(--gap); }
.rl-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; transition: opacity .45s cubic-bezier(.2,.8,.2,1); }
.rl-slot.is-wait .iphone { opacity: .72; transition: opacity .45s cubic-bezier(.2,.8,.2,1); }
.rl-slot .iphone { transition: opacity .45s cubic-bezier(.2,.8,.2,1); }
.rl-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rl-who { font-size: 13px; color: var(--ink-3, #737373); }
.rl-turn {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; color: var(--ink-2, #464646); background: #fff; border: 1px solid var(--rule, #E6E6E6);
  white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s;
}
.rl-turn.is-mine { background: var(--ink, #111); border-color: var(--ink, #111); color: #fff; font-weight: 500; }
.rl .adm.past b { color: var(--content-tertiary); }
.rl .adm.past p { color: var(--content-tertiary); }
.rl-ctas { animation: hero-in .5s cubic-bezier(.2,.8,.2,1) .15s both; }
.rl-ctas .cta { cursor: default; }
/* strip of days */
.rl-days {
  --p: 0; position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); width: min(100%, 760px);
}
.rl-days::before, .rl-days::after {
  content: ''; position: absolute; top: 5px; height: 1px; left: calc(50% / var(--n)); right: calc(50% / var(--n));
  background: var(--rule, #E6E6E6);
}
.rl-days::after { background: var(--ink, #111); right: auto; width: calc((100% - 100% / var(--n)) * var(--p)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.proto .rl-days li { margin: 0; padding: 0; display: flex; justify-content: center; }
.proto .rl-days li::before { content: none; display: none; }
.rl-days button {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; border: 0; background: none; padding: 0 2px 4px; cursor: pointer; color: var(--ink-3, #737373);
}
.rl-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 1px solid #C9C9C9; transition: background-color .3s, border-color .3s, transform .3s; }
.rl-day { font-size: 12px; font-variant-numeric: tabular-nums; }
.rl-lab { font-size: 13px; line-height: 1.3; text-align: center; color: var(--ink-2, #464646); }
.rl-days button.is-done .rl-dot { background: var(--ink, #111); border-color: var(--ink, #111); }
.rl-days button[aria-current] .rl-dot { background: var(--ink, #111); border-color: var(--ink, #111); transform: scale(1.35); }
.rl-days button[aria-current] .rl-lab { color: var(--ink, #111); font-weight: 500; }
.rl-days button:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 4px; border-radius: 6px; }
@media (min-width: 1240px) and (max-width: 1379px) { .proto[data-proto="relais"] { --s: .58; } }
@media (max-width: 720px) { .proto[data-proto="relais"] { --s: .46; --gap: 24px; } }
@media (max-width: 520px) {
  .proto[data-proto="relais"] { --s: .36; --gap: 14px; }
  .rl-turn { height: 26px; padding: 0 10px; font-size: 12px; }
  .rl-lab { display: none; }
  .rl-days button[aria-current] .rl-lab { display: block; position: absolute; top: 100%; white-space: nowrap; }
  .rl-days { padding-bottom: 20px; }
}
@media (max-width: 379px) { .proto[data-proto="relais"] { --s: .34; } }
@media (prefers-reduced-motion: reduce) { .rl-ctas { animation: none; } .rl-days::after { transition: none; } }

/* ═══ Shipping Hub (pages/shipping/protos/hub.js) ═══ */
.hb-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hb-scale { zoom: .66; }
.hb { display: flex; min-height: 640px; font-family: var(--bc-font); color: #090907; background: #FCFCFC; text-align: left; }
.hb-side { flex: none; width: 200px; background: #0A0A0A; color: #E5E5E5; padding: 18px 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.hb-side p { margin: 0; }
.hb-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 16px; margin-bottom: 8px !important; border-bottom: 1px solid #1F1F1F; }
.hb-logo { width: 24px; height: 24px; border-radius: 6px; background: #FCFCFC; }
.hb-brand b { font-size: 14px; font-weight: 500; color: #fff; }
.hb-brand small { margin-left: auto; font-size: 11px; background: #262626; border-radius: 4px; padding: 2px 6px; color: #D4D4D4; }
.hb-group { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8A8A8A; padding: 12px 8px 4px; }
.hb-item { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 7px 8px; border-radius: 6px; color: #D4D4D4; }
.hb-item small { font-size: 10px; background: #262626; border-radius: 4px; padding: 1px 6px; color: #A3A3A3; }
.hb-item.on { background: #262626; color: #fff; font-weight: 500; }
.hb-foot { margin-top: auto !important; padding: 16px 8px 0; font-size: 10px; line-height: 15px; color: #8A8A8A; border-top: 1px solid #1F1F1F; }
.hb-main { flex: 1; min-width: 0; padding: 28px 32px 32px; }
.hb-main p { margin: 0; }
.hb-h1 { margin: 0 0 14px; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.01em; }
.hb-sec { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8A8A8A; margin-bottom: 8px !important; }
.hb-h2 { font-size: 18px; font-weight: 600; margin: 4px 0 4px !important; }
.hb-p { font-size: 13px; line-height: 19px; color: #535353; max-width: 620px; margin-bottom: 14px !important; }
.hb-sub { font-size: 13px; font-weight: 600; margin: 4px 0 8px !important; }
.hb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px !important; }
.hb-chips span { font-size: 12px; padding: 5px 10px; border-radius: 6px; background: #F1F1F0; color: #535353; font-weight: 500; }
.hb-chips span.on { background: #090907; color: #FCFCFC; }
.hb-chips.six span { font-size: 11px; padding: 4px 8px; }
.hb-tabs { display: flex; gap: 18px; border-bottom: 1px solid #EAEAEA; margin-bottom: 16px !important; }
.hb-tabs span { font-size: 12px; color: #737373; padding: 0 0 9px; }
.hb-tabs span.on { color: #090907; font-weight: 500; box-shadow: inset 0 -2px #090907; }
.hb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 17px; border: 1px solid #EAEAEA; }
.hb-table th { text-align: left; font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #737373; background: #F5F5F4; padding: 8px 10px; border-bottom: 1px solid #EAEAEA; white-space: nowrap; }
.hb-table td { padding: 7px 10px; border-bottom: 1px solid #EFEFEF; }
.hb-table tr.hl td { background: #F1F1F0; font-weight: 500; }
.hb-mono { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; color: #535353; }
.hb-id { color: #090907; white-space: nowrap; }
.hb-vars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.hb-vlabel { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #737373; margin-bottom: 6px !important; }
.hb-mini { border: 1px solid #E6E6E6; border-radius: 12px; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.hb-mt { font-size: 15px; font-weight: 600; }
.hb-banner { background: #0E0E0C; color: #D4D4D4; border-radius: 8px; padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; line-height: 14px; }
.hb-banner b { color: #fff; font-size: 12px; font-weight: 600; }
.hb-mh { font-size: 12px; font-weight: 600; line-height: 16px; }
.hb-mc { font-size: 10.5px; color: #737373; }
.hb-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid #EFEFEF; }
.hb-rows li { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: center; font-size: 11px; line-height: 14px; padding: 7px 0; border-bottom: 1px solid #EFEFEF; }
.hb-rows .n { width: 18px; height: 18px; border-radius: 50%; background: #F1F1F0; font-size: 10px; display: grid; place-items: center; color: #535353; }
.hb-rows .a { font-size: 10px; font-weight: 500; border: 1px solid #D4D4D4; border-radius: 4px; padding: 2px 6px; }
.hb-mini .diff { box-shadow: -3px 0 0 #090907; }
.hb-rows li.diff { padding-left: 6px; margin-left: 0; }
.hb-banner.diff { box-shadow: -3px 0 0 #090907, 0 0 0 0; }
.hb-cta { align-self: stretch; text-align: center; font-size: 11px; font-weight: 500; background: #090907; color: #fff; border-radius: 6px; padding: 8px; margin-top: 2px; }
.hb-prog { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 8px; max-width: 640px; font-size: 12px; color: #535353; margin-bottom: 8px; }
.hb-prog b { font-weight: 600; color: #090907; }
.hb-prog i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #EFEFEF; overflow: hidden; }
.hb-prog em { display: block; height: 100%; background: #146C43; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.hb-qg { font-size: 13px; font-weight: 600; margin: 16px 0 6px !important; }
.hb-qa { list-style: none; margin: 0; padding: 0; max-width: 680px; border: 1px solid #EAEAEA; border-radius: 8px; }
.hb-qa li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; padding: 9px 12px; font-size: 12.5px; line-height: 18px; color: #333; border-bottom: 1px solid #EFEFEF; transition: color .3s; }
.hb-qa li:last-child { border-bottom: 0; }
.hb-qa .cb { width: 16px; height: 16px; margin-top: 1px; border-radius: 4px; border: 1.5px solid #BDBDBD; transition: background-color .25s, border-color .25s; position: relative; }
.hb-qa li.on .cb { background: #146C43; border-color: #146C43; }
.hb-qa li.on .cb::after { content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hb-qa li.on { color: #737373; }
/* the case page styles every p and li; reset them inside the hub frame */
.case-section .hb p, .case-section .hb li { color: inherit; margin: 0; padding-left: 0; text-wrap: wrap; }
.case-section .hb li::before { content: none; }
.case-section .hb .hb-item { color: #D4D4D4; } .case-section .hb .hb-item.on { color: #fff; }
.case-section .hb .hb-group, .case-section .hb .hb-foot { color: #8A8A8A; }
.case-section .hb .hb-p, .case-section .hb .hb-mc { color: #535353; }
.case-section .hb .hb-sec, .case-section .hb .hb-vlabel { color: #737373; }
.case-section .hb .hb-sec { margin-bottom: 8px; } .case-section .hb .hb-p { margin-bottom: 14px; } .case-section .hb .hb-sub { margin: 4px 0 8px; }
.case-section .hb .hb-chips { margin-bottom: 12px; } .case-section .hb .hb-tabs { margin-bottom: 16px; } .case-section .hb .hb-h2 { margin: 4px 0; }
.case-section .hb .hb-vlabel { margin-bottom: 6px; } .case-section .hb .hb-qg { margin: 16px 0 6px; } .case-section .hb .hb-brand { padding: 0 8px 16px; margin-bottom: 8px; }
.case-section .hb .hb-foot { margin-top: auto; padding: 16px 8px 0; } .case-section .hb .hb-item { padding: 7px 8px; } .case-section .hb .hb-group { padding: 12px 8px 4px; }
.case-section .hb .hb-rows li { padding: 7px 0; } .case-section .hb .hb-rows li.diff { padding-left: 6px; } .case-section .hb .hb-qa li { padding: 9px 12px; color: #333; } .case-section .hb .hb-qa li.on { color: #737373; }
@media (max-width: 1099px) { .hb-scale { zoom: .54; } }
@media (max-width: 720px) { .hb-side { display: none; } .hb-scale { zoom: .42; } [data-proto="hub"] .browser { --bw: 800px !important; } }
@media (prefers-reduced-motion: reduce) { .hb-prog em, .hb-qa li, .hb-qa .cb { transition: none; } }