/* « Recherche sur mesure » — the bespoke-search wizard (rides tokens.css). */
  :root { --font: var(--font-sans); }

  /* Error red — PO-sanctioned exception (2026-08-19), for the contact gate's
     inline error SENTENCES only: never a border, a state or an icon. Same
     four-block theme dance as tokens.css (the toggle must win both ways);
     tempered on lacquer, where the deep red would drown. */
  :root { --error: #8e1f22; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --error: #d98a80; }
  }
  :root[data-theme="dark"] { --error: #d98a80; }
  :root[data-theme="light"] { --error: #8e1f22; }
  * { box-sizing: border-box; margin: 0; }
  html, body { height: 100%; }
  body {
    font-family: var(--font);
    background: var(--page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
  input, textarea { font: inherit; color: var(--ink); }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* ═══ Shell ═══ */
  /* Below the site's fixed header — the wizard fills the remaining viewport. */
  #stage { display: flex; flex-direction: column; height: 100dvh; padding-top: var(--header-h); }

  header.bar {
    flex: none;
    border-bottom: 1px solid var(--hairline);
    padding: 0 clamp(20px, 5vw, 56px);
  }
  .bar-row {
    display: flex; align-items: center; justify-content: flex-end;
    padding-top: 16px; gap: 16px; min-height: 18px;
  }
  .stepcount {
    font-size: 12px; letter-spacing: 0.08em; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .stepcount b { color: var(--ink); font-weight: 700; }

  /* Fil d'Ariane = the progress instrument. Six equal columns, one per chapter:
     the name is the breadcrumb, the hairline beneath it is the progress — done
     chapters are full ink, the active one fills as its steps pass. One object,
     not three competing devices. */
  nav.chaprail {
    --rail-gap: clamp(10px, 1.8vw, 26px);
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: var(--rail-gap);
    padding: 14px 0 18px;
  }
  .chap { display: flex; flex-direction: column; gap: 9px; text-align: left; min-width: 0; padding: 0; position: relative; }
  /* A hair-thin chevron in each gutter — the reading direction, whispered */
  .chap:not(:last-child)::after {
    content: "›";
    position: absolute; top: -1px; right: calc(var(--rail-gap) / -2);
    transform: translateX(50%);
    font-size: 17px; line-height: 15px; font-weight: 250; font-stretch: 100%;
    color: var(--hairline-strong);
    pointer-events: none;
    transition: color var(--dur) var(--ease), font-weight var(--dur) var(--ease);
  }
  /* A passed chevron inks in with the position — it follows the border, not the memory */
  .chap[data-pos="past"]:not(:last-child)::after { color: var(--ink); font-weight: 450; }
  /* Achievement mark: a green check drawn after the name of every traversed
     chapter. Hand-drawn in CSS (the ✓ glyph falls outside Archivo's latin
     subset and rendered thin from a fallback font). */
  .chap.is-checked .nm::after {
    content: "";
    display: inline-block;
    width: 10px; height: 5px;
    margin-left: 7px;
    margin-bottom: 2px;
    border-left: 2.5px solid #16a34a;
    border-bottom: 2.5px solid #16a34a;
    transform: rotate(-45deg);
  }
  .chap .nm {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: var(--tracking-label);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--muted); font-weight: 500; font-stretch: 88%;
    transition: color var(--dur) var(--ease), font-weight var(--dur) var(--ease), font-stretch var(--dur-slow) var(--ease);
  }
  .chap .seg { height: 2px; background: var(--hairline); overflow: hidden; }
  .chap .seg i {
    display: block; height: 100%; width: 0%;
    background: var(--ink); transition: width var(--dur-slow) var(--ease);
  }
  /* Arrival: the rail stages in, each chapter rising out of the page in reading
     order — the site's group-in grammar verbatim (16px, 0.6s), one beat apart.
     Load-only: the .chap nodes never remount, so navigation never replays it. */
  @media (prefers-reduced-motion: no-preference) {
    .chap { animation: rail-in 0.8s var(--ease) both; }
    .chap:nth-child(1) { animation-delay: 140ms; }
    .chap:nth-child(2) { animation-delay: 230ms; }
    .chap:nth-child(3) { animation-delay: 320ms; }
    .chap:nth-child(4) { animation-delay: 410ms; }
    .chap:nth-child(5) { animation-delay: 500ms; }
    .chap:nth-child(6) { animation-delay: 590ms; }
  }
  @keyframes rail-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  .chap[data-state="active"] .nm { color: var(--ink); font-weight: 750; font-stretch: 116%; }
  .chap[data-state="done"] .nm { color: var(--ink); }
  .chap[data-state="done"] { cursor: pointer; }
  .chap[data-state="done"]:hover .nm { text-decoration: underline; text-underline-offset: 4px; }
  .chap[data-state="todo"] { cursor: default; }

  /* Below 960px the names give way: segments alone, active chapter written out */
  .mobchap {
    display: none;
    font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--muted); padding: 10px 0 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mobchap b { color: var(--ink); font-weight: 700; font-stretch: 108%; }
  @media (max-width: 959px) {
    nav.chaprail { gap: 8px; padding: 14px 0 0; }
    .chap .nm { display: none; }
    .chap:not(:last-child)::after { display: none; }
    /* The page count rides ON the chapter line (PO 2026-08-19) — its own bar
       row stands down, one line of header height given back to the deck. */
    .bar-row { display: none; }
    .mobchap { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
    .mobchap .mobtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobchap .mobcount { flex: none; font-variant-numeric: tabular-nums; }
    .mobchap .mobcount b { color: var(--ink); font-weight: 700; }
  }
  /* Intro & done: no step to count — the mobile rail and label stand down */
  header.bar.no-count .mobchap { display: none; }
  @media (max-width: 959px) {
    header.bar.no-count nav.chaprail { display: none; }
  }

  /* ═══ Slides ═══ */
  main.deck { flex: 1; position: relative; overflow: hidden; }
  section.step {
    position: absolute; inset: 0;
    overflow-y: auto;
    padding: clamp(28px, 6vh, 72px) clamp(20px, 5vw, 56px) 40px;
    display: none;
    opacity: 0;
  }
  section.step.is-active { display: block; opacity: 1; }
  /* Entrance grammar. The SECTION itself never moves (a moving ancestor would
     drag the text diagonally). The slide belongs to the CONTROLS — they sweep
     in laterally, staggered like the listing's filter rail — and the WRITING
     arrives a beat later, straight up out of the blur: the site's `text-focus`,
     verbatim (showroom.css). */
  @keyframes inNext { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: none; } }
  @keyframes inPrev { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .step.slide-in-next
      :is(.qblock, .grid2, textarea.big, .starters, .swatches, .rank-hint,
          .eq-wrap, .eq-help, .recap, .col > .fld, .bz-btn-fill[data-next], .intro-meta) {
      animation: inNext 0.6s var(--ease) both;
    }
    .step.slide-in-prev
      :is(.qblock, .grid2, textarea.big, .starters, .swatches, .rank-hint,
          .eq-wrap, .eq-help, .recap, .col > .fld, .bz-btn-fill[data-next], .intro-meta) {
      animation: inPrev 0.6s var(--ease) both;
    }
    .step:is(.slide-in-next, .slide-in-prev)
      :is(.qblock:nth-of-type(2), .starters, .rank-hint, .eq-help, .intro-meta) {
      animation-delay: 55ms;
    }
    .step:is(.slide-in-next, .slide-in-prev) .qblock:nth-of-type(3) {
      animation-delay: 110ms;
    }
    /* The writing follows — pure vertical, no lateral component */
    .step:is(.slide-in-next, .slide-in-prev) .kicker {
      animation: text-focus 0.65s var(--ease) 260ms both;
    }
    .step:is(.slide-in-next, .slide-in-prev) :is(h1.q, .intro-display) {
      animation: text-focus 0.85s var(--ease) 320ms both;
    }
    .step:is(.slide-in-next, .slide-in-prev) :is(p.sub, .intro-body) {
      animation: text-focus 0.65s var(--ease) 380ms both;
    }
  }
  @keyframes text-focus {
    from { opacity: 0; transform: translateY(14px); filter: blur(10px); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .chap .seg i, .chap .nm { transition: none; }
  }

  .col { max-width: 720px; }
  .kicker {
    font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px;
  }
  /* Below 960px the header already names the chapter (.mobchap) — no echo */
  @media (max-width: 959px) { .kicker { display: none; } }
  h1.q {
    font-size: clamp(26px, 4.2vw, 40px); line-height: 1.08;
    letter-spacing: var(--tracking-display); font-weight: 700; font-stretch: 105%;
    text-wrap: balance; margin-bottom: 10px;
  }
  p.sub { color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 56ch; margin-bottom: 30px; }

  /* ═══ Intro ═══ */
  #s-intro { display: none; align-items: center; }
  #s-intro.is-active { display: flex; }
  .intro-inner { max-width: 860px; }
  .intro-display {
    /* House hero ceiling (DESIGN.md): 84px — and « LA RECHERCHE » must hold one line */
    font-size: clamp(40px, 6.4vw, 84px); line-height: 0.95; font-weight: 800;
    letter-spacing: var(--tracking-display); text-transform: uppercase;
    font-stretch: 112%;
  }
  .intro-body { color: var(--muted); font-size: clamp(17px, 1.05vw + 13px, 21px); line-height: 1.6; max-width: 68ch; margin: 28px 0 40px; }
  .intro-meta { font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); margin-top: 18px; }

  /* ═══ Controls ═══ */
  .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 22px; max-width: 720px; }
  .fld { display: flex; flex-direction: column; gap: 7px; }
  .fld label { font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
  .fld input[type="text"], .fld input[type="email"], .fld input[type="tel"] {
    background: transparent; border: none; border-bottom: 1px solid var(--hairline-strong);
    border-radius: 0; padding: 10px 2px; font-size: 17px;
    transition: border-color var(--dur-fast) var(--ease);
  }
  .fld input:focus { outline: none; border-bottom-color: var(--ink); }
  .fld input::placeholder, textarea.big::placeholder { color: var(--muted); opacity: 0.55; }
  /* Invalid = the site's form grammar (heavier rule + the sentence in words),
     with ONE licensed departure: the sentence itself is red (PO 2026-08-19,
     `--error` above) — never colour alone, the words and the rule still carry it. */
  .fld input[aria-invalid="true"] {
    border-bottom-width: 2px; border-bottom-color: var(--ink); padding-bottom: 9px;
  }
  .fld-error { font-size: 12.5px; font-weight: 600; color: var(--error); line-height: 1.45; }
  .fld-error::before { content: "— "; }
  .fld-error[hidden] { display: none; }
  /* The email-or-phone sentence speaks for the PAIR: one line under both columns. */
  .fld-error--span { grid-column: 1 / -1; margin-top: -8px; }
  /* The error autoscroll anchors the field block here — a breath from the top,
     clear of the iPhone keyboard and its autofill accessory bar. */
  .fld { scroll-margin-top: 12px; }
  /* The step is short: without ballast there is no scroll room to LIFT the
     offending field to the top (the keyboard + iOS autofill bar own the lower
     half). While the gate refuses, the step grows slack below; it leaves when
     the gate opens. Mobile only — desktop centres without help. */
  @media (max-width: 760px) {
    #s-contact.gate-errors { padding-bottom: 60vh; }
  }
  /* Free-writing surface: a quiet panel that grows with the words */
  textarea.big {
    width: 100%; max-width: 720px; min-height: 132px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 16px 18px;
    font-size: 16px; line-height: 1.6;
    resize: none;
    field-sizing: content;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  }
  textarea.big:hover { border-color: var(--hairline-strong); }
  textarea.big:focus, textarea.big:focus-visible {
    outline: none; border-color: var(--ink); background: var(--page);
  }
  /* Starter words — dashed like the equipment labels: words you can pick up */
  .starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; max-width: 720px; }
  .starters-label { font-size: 12px; color: var(--muted); margin-right: 4px; }
  .starter {
    font-size: 13px; padding: 7px 12px; min-height: 34px;
    border: 1px dashed var(--hairline-strong); border-radius: var(--radius);
    color: var(--ink); background: transparent;
    transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .starter:hover { border-color: var(--ink); border-style: solid; }
  .starter.used { opacity: 0.35; border-style: solid; cursor: default; }

  .bz-chips { display: flex; flex-wrap: wrap; gap: 10px; max-width: 760px; }
  .bz-chip {
    border: 1px solid var(--hairline-strong); border-radius: var(--radius);
    padding: 12px 20px; font-size: 15px; min-height: 46px;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .bz-chip:hover { border-color: var(--ink); }
  .bz-chip[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }

  .qblock { margin-bottom: 34px; }
  .qblock > .qlabel { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
  .qblock > .qlabel small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

  /* ═══ Color ranking ═══ */
  .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; max-width: 760px; }
  .sw {
    position: relative; border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: 12px 10px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .sw:hover { border-color: var(--ink); }
  .sw .dot { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline-strong); }
  .sw .nm { font-size: 12.5px; color: var(--ink); }
  .sw .rk {
    position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--ink); color: var(--page); font-size: 12px; font-weight: 700;
    display: none; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
  }
  .sw[data-rank] { border-color: var(--ink); }
  .sw[data-rank] .rk { display: flex; }
  .sw-custom input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--hairline-strong); text-align: center; font-size: 12.5px; padding: 2px; }
  .sw-custom input:focus { outline: none; border-bottom-color: var(--ink); }
  .rank-hint { font-size: 12px; color: var(--muted); margin-top: 14px; }

  /* ═══ Equipment — labels dropped into the sheet's columns ═══ */
  .eq-wrap { overflow-x: auto; padding-bottom: 8px; }
  .eq-table { min-width: 700px; max-width: 1120px; }
  .eq-legend {
    display: grid; grid-template-columns: minmax(170px, 250px) repeat(5, minmax(100px, 1fr));
    align-items: end; gap: 0; border-bottom: 1px solid var(--hairline-strong);
    padding-bottom: 10px;
  }
  .eq-legend span { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.25; padding: 0 6px; }
  .eq-row {
    display: grid; grid-template-columns: minmax(170px, 250px) repeat(5, minmax(100px, 1fr));
    align-items: stretch; gap: 0; border-bottom: 1px dashed var(--hairline);
  }
  .eq-row .lbl { font-size: 15px; padding: 12px 14px 12px 0; }
  .eq-row .lbl small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; line-height: 1.35; }
  .eq-cell {
    border-left: 1px dashed var(--hairline);
    min-height: 54px; padding: 6px 5px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
  }
  .eq-cell:hover { background: var(--surface); }
  .eq-cell.is-target { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
  .tick { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); flex: none; }
  .tag {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    border: 1px solid var(--ink); border-radius: var(--radius); background: var(--page);
    font-size: 11px; line-height: 1.2; padding: 3px 5px 3px 7px;
  }
  .tag i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tag .x { color: var(--muted); font-size: 12px; padding: 0 2px; cursor: pointer; }
  .tag .x:hover { color: var(--ink); }

  /* The tray: this row's vocabulary, waiting to be placed */
  .tray { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
  .tchip {
    font-size: 11.5px; border: 1px dashed var(--hairline-strong); border-radius: var(--radius);
    padding: 4px 9px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
    transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .tchip:hover { border-color: var(--ink); }
  .tchip.armed { background: var(--ink); color: var(--page); border-style: solid; border-color: var(--ink); cursor: grabbing; }
  .tchip.used { opacity: 0.4; }
  .tchip.ghost {
    position: fixed; z-index: 99; pointer-events: none; opacity: 0.92;
    transform: translate(-50%, -80%); background: var(--ink); color: var(--page); border-style: solid;
  }
  .tfree {
    width: 86px; background: transparent; border: none; border-bottom: 1px dashed var(--hairline-strong);
    font-size: 11.5px; padding: 4px 2px;
  }
  .tfree:focus { outline: none; border-bottom-color: var(--ink); border-bottom-style: solid; }
  .tfree::placeholder { color: var(--muted); opacity: 0.6; }
  .eq-help { font-size: 12px; color: var(--muted); margin-top: 14px; }

  /* Criterion-level badge (the sheet's plain cross, worn next to the row's name) */
  .crit-badge {
    display: inline-block; margin-left: 8px; vertical-align: middle;
    font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    border: 1px solid var(--ink); border-radius: var(--radius); padding: 2px 6px;
  }
  .crit-badge:empty { display: none; }

  /* Mobile filing summary — replaces the five columns below 760px */
  .filed { display: none; }

  @media (max-width: 760px) {
    .eq-table { min-width: 0; max-width: none; }
    .eq-legend { display: none; }
    .eq-row { display: block; padding: 13px 0; }
    .eq-row .lbl { padding: 12px 0 0; }
    .eq-cell { display: none; }
    .tchip { touch-action: manipulation; cursor: pointer; }
    .crit-name { border-bottom: 1px dashed var(--hairline-strong); padding-bottom: 1px; }
    .filed { display: block; margin-top: 9px; }
    .filed div { font-size: 12.5px; line-height: 1.7; }
    .filed b {
      font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
      font-size: 10px; color: var(--muted); margin-right: 7px;
    }
  }

  /* Bottom sheet (mobile): touch a label, choose its column */
  #sheet-scrim {
    position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.38);
    opacity: 0; transition: opacity var(--dur) var(--ease);
  }
  #sheet-scrim.on { opacity: 1; }
  #sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
    background: var(--page); border-top: 1px solid var(--hairline-strong);
    padding: 18px clamp(16px, 5vw, 32px) calc(16px + env(safe-area-inset-bottom));
    transform: translateY(102%); transition: transform var(--dur) var(--ease);
  }
  #sheet.on { transform: none; }
  .sheet-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
  .sheet-title span { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
  .sheet-levels { display: grid; gap: 8px; }
  .sheet-level {
    border: 1px solid var(--hairline-strong); border-radius: var(--radius);
    min-height: 48px; font-size: 14px;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .sheet-level[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
  .sheet-remove {
    margin-top: 12px; width: 100%; min-height: 44px; color: var(--muted); font-size: 13px;
    border: 1px dashed var(--hairline-strong); border-radius: var(--radius);
  }
  .sheet-remove:hover { color: var(--ink); border-color: var(--ink); }
  @media (prefers-reduced-motion: reduce) { #sheet, #sheet-scrim { transition: none; } }

  /* ═══ Recap ═══ */
  .recap { display: grid; gap: 14px; max-width: 760px; }
  .card {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    background: var(--surface); padding: 18px 20px 16px;
  }
  .card .hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .card .hd b { font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; }
  .card .hd button { font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--hairline-strong); padding-bottom: 1px; }
  .card .hd button:hover { color: var(--ink); border-bottom-color: var(--ink); }
  .card .bd { font-size: 14.5px; line-height: 1.65; }
  .card .bd .mut { color: var(--muted); }

  /* ═══ Footer nav — three voices only: back, skip, continue.
     The Enter affordance lives INSIDE the button (↵); the gate message is the
     only free text, and only when it blocks. ═══ */
  footer.bz-nav {
    flex: none; border-top: 1px solid var(--hairline);
    padding: 14px clamp(20px, 5vw, 56px) calc(14px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 18px;
  }
  .bz-btn {
    border-radius: var(--radius); padding: 13px 26px; font-size: 14px; font-weight: 600;
    letter-spacing: 0.02em; min-height: 48px; white-space: nowrap;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .bz-btn-fill { background: var(--ink); color: var(--page); }
  .bz-btn-fill:hover { background: var(--ink-lift); }
  .bz-btn-fill:disabled { opacity: 0.35; cursor: not-allowed; }
  .bz-btn-fill .arr { display: inline-block; margin-left: 12px; transition: transform var(--dur-fast) var(--ease); }
  .bz-btn-fill:hover .arr { transform: translateX(3px); }
  .bz-btn-ghost { color: var(--muted); padding-left: 0; }
  .bz-btn-ghost:hover { color: var(--ink); }
  .bz-btn-ghost .arr { display: inline-block; margin-right: 8px; margin-left: 0; transition: transform var(--dur-fast) var(--ease); }
  .bz-btn-ghost:hover .arr { transform: translateX(-3px); }
  .foot-note { flex: 1; text-align: right; font-size: 13px; line-height: 1.4; color: var(--muted); }
  .btn-skip {
    color: var(--muted); font-size: 13.5px; padding: 4px 1px; min-height: 0; border-radius: 0;
    border-bottom: 1px solid var(--hairline-strong);
  }
  .btn-skip:hover { color: var(--ink); border-bottom-color: var(--ink); }
  .nav-right { display: flex; align-items: center; gap: 22px; }
  @media (max-width: 640px) {
    /* The gate hint takes its own full-width line ABOVE the voices — squeezed
       between the buttons it wrapped into porridge (PO, mobile pass). */
    footer.bz-nav { gap: 8px 10px; flex-wrap: wrap; justify-content: space-between; }
    .foot-note { flex: 1 1 100%; order: -1; text-align: left; }
    .foot-note:empty { display: none; }
    .nav-right { gap: 14px; }
    .bz-btn { padding: 12px 18px; font-size: 13.5px; }
    .btn-skip { font-size: 12.5px; }
    .foot-note { font-size: 12px; }
  }
  /* Mobile: the chrome closes symmetrically — the footer takes the HEADER's
     exact height (--header-h compacts to 58px with it, PO 2026-08-19), the
     voices resize to fit; 44px keeps the iOS touch minimum. */
  @media (max-width: 760px) {
    footer.bz-nav {
      box-sizing: border-box;
      min-height: calc(var(--header-h) + env(safe-area-inset-bottom, 0px));
      padding-top: 7px;
      padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
      align-items: center;
    }
    .bz-btn { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
  }

  /* Done */
  .done-mark { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
  .gate-extra { margin-top: 6px; }
  [hidden] { display: none !important; }

  /* Honeypot — visually removed, present for bots only. */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* ═══ Concierge co-pilot (Lot 3) — page-scoped adjustments ═══
     The launcher and the mobile toast must clear the wizard's footer voices:
     « Continuer » lives bottom-right on every width, exactly where the site
     parks them. This stylesheet only loads on /sur-mesure, so the bare
     selectors stay scoped to the wizard. */
  .concierge-tab { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
  .concierge-toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  @media (max-width: 640px) {
    /* Above the compact header-height footer, with a breath. */
    .concierge-tab { bottom: calc(var(--header-h) + 20px + env(safe-area-inset-bottom, 0px)); }
    .concierge-toast { bottom: calc(var(--header-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  }

  /* ═══ In-layout dock (PO 2026-08-10) — THIS PAGE ONLY ═══
     Open, the panel takes its PLACE in the composition instead of floating
     over it: the tunnel yields its width, so the chapter rail stays whole and
     the footer voices stay reachable beside the conversation. Wide screens
     only — below the threshold the wizard's own responsive design needs the
     full viewport, and the site-wide overlay behaviour returns (phones keep
     the full-screen panel + toast). */
  @media (min-width: 1200px) {
    #stage { transition: padding-right var(--dur-slow) var(--ease); }
    body:has(.concierge[data-open="true"]) #stage,
    html[data-concierge-preopen] #stage { padding-right: min(420px, 100%); }
    /* Furniture, not a floating sheet: the hairline seam is enough. */
    .concierge { box-shadow: none; }

    /* The seam lines meet: the panel's input bar shares the footer's border
       height, exactly like the panel head shares the site header's (same
       one-extra-pixel trick — the border sits INSIDE the pinned height). */
    footer.bz-nav,
    .concierge__form {
      box-sizing: border-box;
      height: 77px;
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  /* Docked but narrow (the tunnel keeps < ~960px): the rail borrows its own
     compact form — segments alone, the active chapter written out — the exact
     treatment it already takes below 960px of viewport. Names that clip would
     lie; the compact rail never does. */
  @media (min-width: 1200px) and (max-width: 1379px) {
    body:has(.concierge[data-open="true"]) nav.chaprail,
    html[data-concierge-preopen] nav.chaprail { gap: 8px; padding: 14px 0 0; }
    body:has(.concierge[data-open="true"]) .chap .nm,
    html[data-concierge-preopen] .chap .nm { display: none; }
    body:has(.concierge[data-open="true"]) .chap:not(:last-child)::after,
    html[data-concierge-preopen] .chap:not(:last-child)::after { display: none; }
    body:has(.concierge[data-open="true"]) .mobchap,
    html[data-concierge-preopen] .mobchap { display: block; }
    /* The desktop bar row already carries the count — no echo on the chapter line. */
    body:has(.concierge[data-open="true"]) .mobchap .mobcount,
    html[data-concierge-preopen] .mobchap .mobcount { display: none; }
    body:has(.concierge[data-open="true"]) header.bar.no-count .mobchap,
    html[data-concierge-preopen] header.bar.no-count .mobchap { display: none; }
    body:has(.concierge[data-open="true"]) header.bar.no-count nav.chaprail,
    html[data-concierge-preopen] header.bar.no-count nav.chaprail { display: none; }
    body:has(.concierge[data-open="true"]) .kicker,
    html[data-concierge-preopen] .kicker { display: none; }
  }