/* The "try it" pages, loaded after site.css. Everything BRAND says (the band, the words around the
   example, the closing lines, the colophon) is in B's palette and type. The made-up listing keeps a
   quiet look of its own: white, Libre Franklin, warm greys, and the window in the listing's colour,
   as in the home page's screenshots. The window itself is the product's own script, unchanged. */
:root { --l-encre: #24221f; --l-gris: #655f57; --l-filet: #e4e0da; --l-fond: #f6f4f0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 58px; }
.nobr { white-space: nowrap; }

/* ---------- the band: BRAND speaking, on night ---------- */
.bande { background: var(--nuit); color: var(--papier); padding: 14px var(--marge) 13px; }
.bande__rang { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.bande .marque { width: 112px; }
.bande nav { font: 500 14px/1 "Franklin", Arial, sans-serif; }
.bande__dit { margin: 9px 0 0; font: 400 14px/1.42 "Franklin", Arial, sans-serif; color: var(--neige); max-width: 44em; }
.bande__dit b { color: var(--lampe); font-weight: 600; }

/* ---------- the made-up listing ---------- */
.annonce { background: #fff; color: var(--l-encre); font: 400 16px/1.5 "Franklin", Arial, sans-serif; }
.annonce h2 { font-family: "Franklin", Arial, sans-serif; letter-spacing: 0; }
.l-head { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--l-filet); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 var(--marge); height: 46px; }
.l-brand { font-weight: 700; font-size: 18px; letter-spacing: .01em; white-space: nowrap; }
.l-brand small { font-weight: 400; font-size: 13px; color: var(--l-gris); margin-left: 6px; letter-spacing: 0; }
.fict { font: 600 12.5px/1 "Franklin", Arial, sans-serif; background: var(--lampe); color: var(--encre); padding: 5px 7px 4px; white-space: nowrap; }
.gallery { position: relative; }
.gallery__main { position: relative; margin: 0; }
.gallery__main img { width: 100%; height: 168px; object-fit: cover; object-position: 50% 60%; }
.gallery__side { display: none; }
.ph-tag { position: absolute; left: 8px; bottom: 8px; background: rgba(27, 24, 21, .8); color: #fff; font-size: 12px; line-height: 1; padding: 5px 7px; }
.ph-count { left: auto; right: 8px; }
.l-title { padding: 11px var(--marge) 12px; border-bottom: 1px solid var(--l-filet); }
.l-kicker { display: none; margin: 0; font-size: 13px; color: var(--l-gris); }
.annonce .l-h { margin: 0 0 5px; font-weight: 650; font-size: 24px; line-height: 1.12; }
.l-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.l-price strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.l-price span { font-size: 14px; color: var(--l-gris); }

/* the real window lives in this box; transform makes it the containing block of the widget's
   position:fixed panel, so on a phone the window takes this box and not the whole screen */
.dock-cap { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 6px var(--marge) 5px; font: 400 12.5px/1.25 "Franklin", Arial, sans-serif; background: var(--nuit); color: var(--papier); }
.dock-cap b { font-weight: 600; color: var(--lampe); }
.dock { position: relative; transform: translateZ(0); contain: layout paint; height: clamp(380px, calc(100svh - 430px), 560px); background: var(--l-fond); }
.dock__wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-size: 14px; color: var(--l-gris); }

/* ---------- the questions: BRAND's words around the example, on paper ---------- */
.essai { background: var(--papier); color: var(--encre); padding: 22px var(--marge) 26px; font: 400 17px/1.5 "NR", Georgia, serif; }
.essai .rubrique { margin-bottom: 14px; }
.essai h2 { font: 340 30px/1.08 "NR Display", Georgia, serif; letter-spacing: -.01em; margin: 0 0 10px; }
.essai__lede { margin: 0 0 16px; color: var(--gris); }
.script { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--encre); }
.script li { border-bottom: 1px solid var(--filet); padding: 12px 0 13px; display: grid; grid-template-columns: 62px 1fr; gap: 2px 10px; }
.script time { font: 700 13px/1.3 "Franklin", Arial, sans-serif; font-variant-numeric: tabular-nums; padding-top: 4px; }
.script .who { grid-column: 2; font: 500 13px/1.3 "Franklin", Arial, sans-serif; color: var(--gris); }
.script .ask { grid-column: 2; font: italic 400 19px/1.3 "NR", Georgia, serif; }
.script .ans { grid-column: 2; margin: 8px 0 0; font-size: 16px; color: var(--encre); padding-left: 12px; border-left: 2px solid var(--brique); }
.script .ans b { font: 600 14px/1 "Franklin", Arial, sans-serif; margin-right: .3em; }
.script .state { grid-column: 2; margin: 6px 0 0; font: 400 13.5px/1.4 "Franklin", Arial, sans-serif; color: var(--gris); }
.script .state:empty { display: none; }
.go { grid-column: 2; justify-self: start; margin-top: 10px; font: 600 15px/1.2 "Franklin", Arial, sans-serif; text-align: left; background: var(--encre); color: var(--papier); border: 0; border-radius: 0; padding: 11px 15px 12px; cursor: pointer; }
.go:hover { background: var(--brique); }
.go:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.go[disabled] { background: transparent; color: var(--gris); padding: 0; cursor: default; font-weight: 500; }
.essai__note { margin: 14px 0 0; font: 400 14px/1.45 "Franklin", Arial, sans-serif; color: var(--gris); }
.essai__note a { color: var(--encre); font-weight: 600; }

/* the lead email, shown as an email */
.mail { margin: 24px 0 0; }
.mail h3 { margin: 0 0 8px; }
.mail__card { background: #fff; border: 1px solid var(--encre); }
.mail__meta { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--l-filet); font: 400 13.5px/1.45 "Franklin", Arial, sans-serif; display: grid; grid-template-columns: 62px 1fr; gap: 3px 8px; }
.mail__meta dt { color: var(--l-gris); }
.mail__meta dd { margin: 0; overflow-wrap: anywhere; }
.mail__meta .subj { font-weight: 700; }
.mailbody { padding: 12px; font: 12.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #1c1c1c; }
.mailbody p { margin: 0 0 1.5em; }
.mailbody p:last-child { margin-bottom: 0; }
.mailbody p.tight { margin: 0; }
.mailbody dl { margin: 0 0 1.5em; display: grid; grid-template-columns: 17ch minmax(0, 1fr); }
.mailbody dt, .mailbody dd { margin: 0; }
.mailbody ul { margin: 0 0 1.5em; padding: 0 0 0 2ch; list-style: none; }
.mailbody li { padding-left: 2ch; text-indent: -2ch; }
.mailbody li::before { content: "- "; }
.mail__note { margin: 10px 0 0; font: 400 14px/1.45 "Franklin", Arial, sans-serif; color: var(--gris); max-width: 34em; }
.js .mail.is-waiting { display: none; }

/* the rest of the listing */
.l-body { padding: 20px var(--marge) 26px; }
.annonce .l-body h2 { font-weight: 650; font-size: 21px; line-height: 1.2; margin: 0 0 10px; }
.l-body p { margin: 0 0 10px; max-width: 60ch; }
.facts { margin: 14px 0 0; border-top: 1px solid var(--l-filet); }
.facts div { display: grid; grid-template-columns: 128px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--l-filet); font-size: 15.5px; }
.facts dt { color: var(--l-gris); }
.facts dd { margin: 0; }
.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.thumbs figure { margin: 0; }
.thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.thumbs figcaption { font-size: 12.5px; color: var(--l-gris); padding-top: 3px; }
.l-foot { margin: 0; border-top: 1px solid var(--l-filet); padding: 14px var(--marge) 18px; font-size: 13px; color: var(--l-gris); display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }

/* without JavaScript: no window, the transcript stands in for it */
.no-js .dock, .no-js .dock-cap, .no-js .go, .no-js .js-only { display: none; }
.js .no-js-only { display: none; }
.js .script .ans { display: none; }
.js .script li:not(.is-next):not(.is-done) .go { display: none; }

/* ---------- after the listing: BRAND again ---------- */
.fin { margin: 48px var(--marge) 0; }
.fin h2 { max-width: 14em; }
.fin .retour { margin: 22px 0 0; font-size: 18px; }
.page-essai .colophon { margin-top: 56px; }

@media (min-width: 760px) {
  .bande .marque { width: 140px; }
  .gallery__main img { height: 340px; }
  .annonce .l-h { font-size: 34px; }
  .essai h2 { font-size: 36px; }
}

@media (min-width: 1100px) {
  .bande { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding: 16px var(--marge); }
  .bande__rang { display: contents; }
  .bande .marque { grid-column: 1 / 3; grid-row: 1; width: 160px; }
  .bande__dit { grid-column: 3 / 11; grid-row: 1; margin: 0; font-size: 15px; }
  .bande nav { grid-column: 11 / 13; grid-row: 1; justify-self: end; }
  .l-head { height: 54px; }
  .l-brand { font-size: 21px; }
  .l-grid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; grid-template-rows: auto auto 1fr; column-gap: 40px; max-width: 1440px; margin: 0 auto; padding: 24px var(--marge) 0; }
  .gallery { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }
  .gallery__main img { height: 404px; }
  .gallery__side { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; }
  .gallery__side img { width: 100%; height: 199px; object-fit: cover; }
  .l-title { grid-column: 1; grid-row: 2; padding: 18px 0; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; }
  .annonce .l-h { font-size: 40px; margin: 4px 0 0; }
  .l-price { flex-direction: column; align-items: flex-end; gap: 0; }
  .l-price strong { font-size: 28px; }
  .l-kicker { display: block; grid-column: 1 / -1; }
  .side { grid-column: 2; grid-row: 1 / span 3; }
  .side__stick { position: sticky; top: 70px; }
  .dock-cap { padding: 7px 12px 6px; }
  .dock { height: 600px; background: transparent; }
  .essai { grid-column: 1; grid-row: 3; padding: 26px 30px 30px; margin-bottom: 32px; }
  .essai__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .mail { margin-top: 0; }
  .l-body { max-width: 1440px; margin: 0 auto; padding: 8px var(--marge) 40px; display: grid; grid-template-columns: minmax(0, 1fr) 430px; column-gap: 40px; }
  .l-body__main { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .l-body__main > h2:first-child { grid-column: 1 / -1; }
  .l-foot { max-width: 1440px; margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
  .fin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 90px; }
  .fin > .rubrique { grid-column: 1 / 13; }
  .fin h2 { grid-column: 1 / 7; }
  .fin .action, .fin .retour { grid-column: 7 / 13; }
  .fin .retour { margin-top: 14px; }
  .page-essai .colophon { margin-top: 100px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Live demo 2026-10-02: the page's two modes. assets/js/moteur.js sets html.mode-live or html.mode-scripted;
   until it decides, and without JavaScript, the scripted wording shows. */
html:not(.mode-live) .live-only { display: none !important; }
html.mode-live .scripted-only { display: none !important; }
html.mode-live .script .ans { display: none; }
.bande__mode { margin: 6px 0 0; font: 400 12.5px/1.35 "Franklin", Arial, sans-serif; color: var(--neige); opacity: .85; max-width: 44em; }
html.mode-live .bande__mode, html.mode-scripted .bande__mode { opacity: 1; }
html.mode-live .bande__mode::before { content: "\25CF\00A0"; color: var(--lampe); }