/* ==========================================================================
   Paraty Chalé. The design system, one file (24 Sep 2026, built to the plan's section 3f).
   "Offering memorandum meets boutique hotel": the photographs do the work, the interface disappears.

   Scar tissue carried over from hebrew-world-site (read before changing anything visual):
   - The sticky header is FULLY OPAQUE. Never backdrop-filter: on mobile GPUs a blurred sticky header
     made the page paint nothing below it (3 Sep 2026, on Andrey's phone).
   - The honeypot (.hp) is hidden by CLIPPING, never by a negative offset (a negative offset widened a page
     to 10,374px once).
   - Logical properties (padding-inline, inset-inline-end, text-align: start) everywhere.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts
   Self-hosted Google Fonts (OFL), downloaded 24 Sep 2026: Fraunces (variable opsz 9..144, wght 300..400, plus
   300 italic) for display, Manrope (variable wght 400..600) for text. The files are in fonts/. The rules live HERE,
   not in a fonts.css, so the page waits on one stylesheet (Lighthouse: the hero image was held by two).
   EN, PT and ES all sit inside the latin subset; latin-ext only downloads if a page ever needs it. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/fraunces-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 400;font-display:swap;src:url(/fonts/fraunces-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 400;font-display:swap;src:url(/fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  /* Contrast is computed against these exact values (plan 3f); keep them. */
  --bg-dark:   #0e1712;   /* near-black forest green: header, hero, proof strip, numbers band, footer */
  --bg-dark-2: #18251d;   /* a table surface on the dark bands */
  --bg:        #f3eee4;   /* bone: the body */
  --bg-2:      #e8dfcf;   /* sand: alternate surface, image frames, table stripes */
  --ink:       #17201b;   /* text on bone, 13.6:1 */
  --muted:     #5c665f;   /* secondary text on bone, 5.3:1 (4.5:1 on sand) */
  --paper:     #f3eee4;   /* text on the dark bands, 15.5:1 */
  --haze:      #9fb0b3;   /* labels and secondary text on dark, 8.6:1 */
  --gold:      #c9973f;   /* numerals on dark, the primary button, the active language. Text ON gold is always --ink */
  --line:      rgba(23, 32, 27, .16);     /* rules on bone */
  --line-dark: rgba(243, 238, 228, .18);  /* rules on dark */

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap: 1160px;
  --gutter: 20px;
  --sec: 72px;
  --hdr: 60px;
}
@media (min-width: 960px) { :root { --gutter: 40px; --sec: 120px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- type (plan 3f) */
h1 { font: 300 clamp(2.5rem, 6.2vw, 4.75rem)/1.02 var(--serif); letter-spacing: -0.015em; }
h2 { font: 300 clamp(1.75rem, 3.4vw, 2.75rem)/1.1 var(--serif); color: var(--ink); }
.eyebrow { font: 600 .72rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); margin-bottom: 16px; }
.body { max-width: 62ch; }
.numeral { display: block; font: 300 clamp(2.4rem, 5vw, 3.75rem)/1 var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; }
.price { font: 400 2rem/1.1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.price .cur { font: 500 .6em/1 var(--sans); vertical-align: .55em; margin-inline-end: .14em; }
.label { font: 500 .9rem/1.4 var(--sans); color: var(--muted); }
.quote { font: italic 300 1.35rem/1.4 var(--serif); }
.muted { color: var(--muted); }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { text-decoration-thickness: 2px; }

/* the dark bands */
.sec--dark, .hero, .proof, .foot { background: var(--bg-dark); color: var(--paper); }
.sec--dark h2 { color: var(--paper); }
.sec--dark .eyebrow, .foot .eyebrow { color: var(--haze); }
.sec--dark .label { color: var(--haze); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 1px solid transparent; border-radius: 4px; font: 600 .95rem/1.2 var(--sans); letter-spacing: .02em; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--line { border-color: var(--paper); color: var(--paper); background: transparent; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { cursor: progress; }

/* ---------------------------------------------------------------- 1. header */
.hdr { position: sticky; top: 0; z-index: 20; height: var(--hdr); background: var(--bg-dark); }  /* opaque, never backdrop-filter */
.hdr__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { font: 400 1.15rem/1 var(--serif); color: var(--paper); text-decoration: none; white-space: nowrap; }
.hdr__nav { display: flex; align-items: center; }
.lang { padding: 12px 7px; font: 600 .78rem/1 var(--sans); letter-spacing: .06em; color: var(--haze); text-decoration: none; }
.lang[aria-current] { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; margin-inline-start: 10px; padding-inline: 12px; border: 1px solid var(--haze); border-radius: 4px; color: var(--paper); font: 600 .8rem/1 var(--sans); letter-spacing: .02em; text-decoration: none; }
.pill__ic { width: 16px; height: 16px; fill: currentColor; flex: none; }
@media (max-width: 599px) {
  .pill { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .pill__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ---------------------------------------------------------------- 2. hero */
.hero { position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: max(540px, calc(100vh - var(--hdr))); min-height: max(540px, calc(100svh - var(--hdr))); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 23, 18, .88) 0%, rgba(14, 23, 18, .35) 45%, rgba(14, 23, 18, 0) 75%); }
/* The spec's scrim darkens by height; on a phone (and under the sun at 1280) the text block reaches above the dark
   forest onto the bright ridge. So the text block carries its own darkening too, fading in over the 96px above the
   eyebrow: it follows the text at any screen height. The sun stays bright. */
.hero__in { --fade: 64px; position: relative; z-index: 1; width: 100%; padding-block: var(--fade) 40px; }
.hero__in::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);  /* full-bleed; .hero clips it */
  background: linear-gradient(to top, rgba(14, 23, 18, .45) 0%, rgba(14, 23, 18, .45) calc(100% - var(--fade)), rgba(14, 23, 18, 0) 100%); }
.hero__text { max-width: 44rem; }
.hero .eyebrow { color: var(--paper); }
.hero h1 { color: var(--paper); }
.hero__sub { max-width: 34ch; margin-top: 20px; font: 400 1.1rem/1.5 var(--sans); color: var(--haze); }
.hero__btns { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.hero__confirm { margin-top: 14px; font-size: .8rem; color: var(--haze); }
@media (min-width: 600px) { .hero__btns { flex-direction: row; } }
@media (min-width: 960px) { .hero__in { --fade: 96px; padding-bottom: 72px; } .hero__sub { max-width: 46ch; } }

/* ---------------------------------------------------------------- 3. proof strip */
.proof { border-block: 1px solid var(--line-dark); }
.proof__list { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; padding-block: 44px; }
.proof__label { display: block; max-width: 24ch; margin-top: 10px; font-size: .9rem; line-height: 1.4; color: var(--haze); }
@media (min-width: 960px) { .proof__list { grid-template-columns: repeat(4, 1fr); gap: 40px; padding-block: 64px; } }

/* ---------------------------------------------------------------- sections and grid */
.sec { padding-block: var(--sec); }
.sec--sand { background: var(--bg-2); }
.sec--flush { padding-top: 0; }
.grid { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; }
  .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
}

/* ---------------------------------------------------------------- 4. the place */
#place h2 { max-width: 22ch; }
.nearby { margin-top: 4px; border-top: 1px solid var(--line); }
.nearby div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.nearby dd { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.frame { overflow: hidden; border-radius: 6px; background: var(--bg-2); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--photo { aspect-ratio: 4 / 3; }
.map { margin-top: 16px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--bg-2); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
.map__link { margin-top: 12px; font-size: .95rem; }
@media (min-width: 960px) { #place .col-5 { padding-top: 8px; } }

/* ---------------------------------------------------------------- 5. for sale */
.h2-measure { max-width: 24ch; }
.cards { display: grid; gap: 56px; margin-top: 48px; }
.card__plan { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 22px; padding: 12px; border: 0; border-radius: 6px; background: var(--bg-2); cursor: zoom-in; }
.card__plan img { width: 100%; height: 100%; object-fit: contain; }
.card .eyebrow { margin-bottom: 8px; }
.card__size { font-weight: 500; }
.card__rooms { margin-top: 4px; font-size: .95rem; color: var(--muted); }
.card .price { margin-top: 18px; }
.card__link { display: inline-block; margin-top: 10px; font-size: .95rem; }
.bundle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-top: 56px; }
.bundle .eyebrow { margin: 0; }
.sale__incl { max-width: 62ch; margin-top: 12px; }
.sale__ref { max-width: 72ch; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 960px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 64px; } }

/* the plan lightbox: native <dialog>, the one shadow on the site */
.lightbox { max-width: 100vw; max-height: 100vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgba(14, 23, 18, .92); }
.lightbox__fig { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; border-radius: 6px; background: #fff; box-shadow: 0 24px 64px rgba(0, 0, 0, .5); }
.lightbox__pdf { color: var(--paper); font-weight: 500; }
.lightbox__close { position: fixed; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--paper); font: 400 2rem/1 var(--sans); cursor: pointer; }

/* ---------------------------------------------------------------- 6. the numbers */
.numbers { margin-top: 48px; gap: 56px; }
.numtable { padding: 28px 24px; border-radius: 4px; background: var(--bg-dark-2); }
.numtable li { padding-block: 16px; border-top: 1px solid var(--line-dark); }
.numtable li:last-child { padding-bottom: 0; }
.numbers h3 { margin-bottom: 8px; }
.fig { display: block; font: 300 1.6rem/1.15 var(--serif); color: var(--gold); font-variant-numeric: tabular-nums; }
.fig__label { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.4; color: var(--haze); }
/* side by side when both amounts fit whole ("$3,000" does on a phone, "US$ 3.000" does not): they wrap, never split */
.ownfig__list { display: flex; flex-wrap: wrap; gap: 24px 56px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.ownfig__list li { max-width: 100%; }
.ownfig__list .numeral { white-space: nowrap; }
.ownfig__illus { max-width: 52ch; margin-top: 32px; color: var(--haze); font-size: 1rem; }
.sec--dark .link { color: var(--paper); }
/* the existing chalet, inside: photos + rating line on the dark band (20 Oct 2026) */
.exist { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line-dark); }
.exist__photos { display: grid; gap: 20px; margin-top: 20px; }
.exist__photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--bg-dark-2); }
.exist__photos figcaption { margin-top: 10px; font-size: .9rem; line-height: 1.4; color: var(--haze); }
.exist__rating { max-width: 62ch; margin-top: 28px; color: var(--haze); font-size: 1rem; }
.exist__quotes { display: grid; gap: 36px; margin-top: 48px; }
.exist .quote { font-size: 1.2rem; color: var(--paper); }
.exist .quote footer { margin-top: 10px; font: 500 .85rem/1.4 var(--sans); color: var(--haze); }
@media (min-width: 960px) { .exist__quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
@media (min-width: 720px) { .exist__photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 960px) { .ownfig { padding-top: 28px; } }

/* ---------------------------------------------------------------- 7. the owner */
.frame--portrait { aspect-ratio: 4 / 5; }
.owner__text .quote { max-width: 30em; margin-top: 24px; }
.owner__langs { margin-top: 24px; }
@media (min-width: 960px) { .owner__text { align-self: center; padding-inline-start: 32px; } }

/* ---------------------------------------------------------------- 8. ownership */
.docs { display: grid; margin-top: 40px; column-gap: 56px; }
.docs li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.docs li:first-child { border-top: 1px solid var(--line); }
.docs__name { font-weight: 500; }
.docs__status { color: var(--muted); text-align: end; white-space: nowrap; }
@media (min-width: 960px) { .docs:not(.docs--single) { grid-template-columns: 1fr 1fr; } .docs:not(.docs--single) li:nth-child(2) { border-top: 1px solid var(--line); } }

/* ---------------------------------------------------------------- 10. the form */
.form-wrap { max-width: calc(560px + 2 * var(--gutter)); }
.form { margin-top: 36px; }
.form .label { display: block; margin: 20px 0 8px; }
.form .label:first-of-type { margin-top: 0; }
.input { display: block; width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); font: 400 1rem/1.4 var(--sans); }
.input:focus { outline: 2px solid var(--gold); outline-offset: 0; }
textarea.input { height: auto; padding: 14px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235c665f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; }
.form .btn { margin-top: 32px; }
.form__note { margin-top: 14px; font-size: .85rem; color: var(--muted); }
.form__err { margin-top: 14px; font-weight: 500; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }  /* clipped, never a negative offset */

/* ---------------------------------------------------------------- 11. footer */
.foot { padding-block: 56px; }
.foot .grid { gap: 28px; }
.foot__addr { margin-top: 10px; font-size: .95rem; color: var(--haze); }
.foot__links li + li { margin-top: 8px; }
.foot__langs .link + .link { margin-inline-start: 14px; }
.foot__credit { font-size: .8rem; color: var(--haze); }
@media (min-width: 960px) { .foot__credit { align-self: end; text-align: end; } }

/* ---------------------------------------------------------------- thanks page */
.page-thanks { background: var(--bg-dark); color: var(--paper); }
.thanks { display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100svh; padding: 28px var(--gutter) 32px; text-align: center; }
.thanks__box { width: 100%; max-width: 560px; margin-block: auto; padding-block: 56px; }
.thanks h1 { color: var(--paper); }
.thanks__line { margin-top: 20px; font-size: 1.1rem; color: var(--haze); }
.thanks__btns { display: grid; gap: 12px; margin-top: 40px; }
.thanks__after { margin-top: 28px; font-size: .95rem; color: var(--haze); }
.thanks__addr { font-size: .8rem; color: var(--haze); }

/* ---------------------------------------------------------------- dossier page */
.dbar { position: sticky; top: 0; z-index: 20; background: var(--bg-dark); }  /* opaque */
.dbar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: calc(820px + 2 * var(--gutter)); height: 48px; margin-inline: auto; padding-inline: var(--gutter); }
.dbar__pdf { color: var(--paper); font: 600 .85rem/1 var(--sans); }
.dossier { max-width: calc(820px + 2 * var(--gutter)); margin-inline: auto; padding: 56px var(--gutter) 104px; }
.dossier h1 { color: var(--ink); }
.dsec { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
.dsec h2 { margin-bottom: 28px; }
.dtable { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.dtable th, .dtable td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.dtable thead th { padding-block: 10px; font: 600 .72rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.dtable tbody tr:nth-child(even) { background: var(--bg-2); }
.dtable tbody th { font-weight: 500; }
.nightly td { text-align: end; }
.dfig { margin-top: 32px; }
.dfig img { width: 100%; border-radius: 6px; }
.dfig--plan img { padding: 12px; background: #fff; }
.dfig--tall img { width: auto; max-height: 720px; }
.dfig figcaption { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.dfigs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.dfigs .fig { color: var(--ink); font-size: 2rem; }
.dfigs .fig__label { color: var(--muted); }
.dquote { max-width: 34em; margin-top: 40px; padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.dquote footer { margin-top: 10px; font-style: normal; }
.contact li + li { margin-top: 10px; }
@media (max-width: 719px) {
  /* the offer table becomes one block per chalet on a phone: no sideways scroll */
  .offer thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .offer tr { display: block; padding: 12px 12px; border-bottom: 1px solid var(--line); }
  .offer td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border: 0; text-align: end; }
  .offer td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: .85rem; text-align: start; }
}

/* ---------------------------------------------------------------- print (the dossier PDF) */
@page { size: A4; margin: 14mm; }
@media print {
  .hdr, .dbar { display: none; }
  html, body { background: var(--bg); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dossier { max-width: none; padding: 0; }
  .dsec + .dsec { break-before: page; border-top: 0; margin-top: 0; padding-top: 0; }
  .dsec:first-of-type { margin-top: 40px; }
  .dfig { break-inside: avoid; }
  .dossier img { max-height: 90vh; width: auto; max-width: 100%; }
  .dtable tr { break-inside: avoid; }
}