/* Public site. Builds on tokens.css and app.css (buttons, badges, cards, forms, thread bubbles).
   Layout: left-aligned text, one column of reading width, product shown early. */
body.site { background: var(--bg-default); }
.site-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--s-8); }
@media (max-width: 760px) { .site-wrap { padding: 0 var(--s-4); } }

/* header */
.site-head { position: sticky; top: 0; z-index: 30; background: var(--bg-default); border-bottom: 1px solid var(--border-subtle); }
.site-head-in { display: flex; align-items: center; gap: var(--s-6); min-height: 64px; }
.site-head .brand { padding: 0; }
.site-nav { display: flex; gap: var(--s-1); }
.site-nav a { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); color: var(--text-subtle); text-decoration: none; font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text-default); background: var(--bg-subtle); }
.site-cta { margin-left: auto; display: flex; gap: var(--s-2); }
.site-burger { display: none; position: relative; }
.site-burger > summary { list-style: none; cursor: pointer; padding: var(--s-2); }
.site-burger > summary::-webkit-details-marker { display: none; }
.site-burger .menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; min-width: 220px; }
@media (max-width: 960px) {
  .site-nav, .site-cta .ghost { display: none; }
  .site-burger { display: block; }
  .site-cta { margin-left: auto; }
}

/* sections */
.section-site { padding: var(--s-16) 0; }
.section-site.tint { background: var(--bg-subtle); }
.section-site.ink { background: var(--bg-inverted); color: var(--text-inverted); }
.section-site.ink a { color: #BFE3E1; }
.section-site h2 { font-size: clamp(26px, 3.4vw, 36px); max-width: 22ch; letter-spacing: -0.02em; }
.lede { font-size: var(--fs-md); color: var(--text-subtle); max-width: 60ch; }
.ink .lede { color: #C9D7E1; }
.section-head { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-8); }
@media (max-width: 760px) { .section-site { padding: var(--s-10) 0; } }

.hero-actions { display: flex; gap: var(--s-3); margin-top: var(--s-8); flex-wrap: wrap; }
.micro { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); }

/* steps, features, proof */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); counter-reset: step; }
.steps > li { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); counter-increment: step; }
.steps > li::before { content: counter(step); width: 32px; height: 32px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--brand-subtle); color: var(--brand-text); font-weight: var(--fw-black); }
.steps ol, ol.steps { margin: 0; padding: 0; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-10); }
.feature { display: flex; flex-direction: column; gap: var(--s-2); }
.feature .icon { color: var(--brand); width: 28px; height: 28px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
@media (max-width: 860px) { .steps, .features, .facts { grid-template-columns: minmax(0, 1fr); } }

/* pricing */
.price-card { border: 1px solid var(--border-default); border-radius: var(--r-xl); padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); background: var(--bg-default); }
.price-card.main { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.price { font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.price small { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-subtle); letter-spacing: 0; }
.ticks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.ticks li { display: flex; gap: var(--s-2); align-items: flex-start; }
.ticks li .icon { color: var(--brand); margin-top: 2px; }
.guarantee { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); background: var(--brand-subtle); color: var(--brand-text); }

/* comparison table */
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.compare th, .compare td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.compare thead th { background: var(--bg-subtle); font-size: var(--fs-xs); color: var(--text-muted); }
.compare td.us { background: #F2FAF9; }
.sources { font-size: var(--fs-xs); color: var(--text-muted); }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.faq details { border-bottom: 1px solid var(--border-subtle); }   /* judge site-19: the whole row is the summary, 44 px at least */
.faq summary { cursor: pointer; font-weight: var(--fw-bold); font-size: var(--fs-md); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 44px; padding: var(--s-4) 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-weight: var(--fw-black); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: var(--s-4); color: var(--text-subtle); max-width: 70ch; }

/* article */
.article { max-width: 720px; margin: 0 auto; padding: var(--s-12) 0; display: flex; flex-direction: column; gap: var(--s-4); }
.article h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.02em; }
.article h2 { margin-top: var(--s-6); font-size: var(--fs-lg); }
.article h3 { margin-top: var(--s-4); }
.article p, .article li { font-size: var(--fs-md); line-height: 1.65; }
.article ul, .article ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.article table { border-collapse: collapse; font-size: var(--fs-sm); }
.article th, .article td { border: 1px solid var(--border-subtle); padding: var(--s-2) var(--s-3); text-align: left; }
.article blockquote { margin: 0; padding-left: var(--s-4); border-left: 3px solid var(--brand); color: var(--text-subtle); }
.byline { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-subtle); }

/* footer */
.site-foot { background: var(--bg-subtle); border-top: 1px solid var(--border-subtle); padding: var(--s-12) 0 var(--s-6); margin-top: var(--s-12); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-8); }
.foot-grid a { color: var(--text-subtle); text-decoration: none; }
.foot-grid a:hover { color: var(--text-default); text-decoration: underline; }
.foot-base { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--border-subtle); color: var(--text-muted); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- pages of the site (part « site », 02/11). One block per component, tokens only. */

/* inner page head: title and lede, no label above the title */
.site-hero { padding: var(--s-12) 0 var(--s-8); }
.site-hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; }
.site-hero .lede { margin-top: var(--s-4); }
.site-hero .hero-actions { margin-top: var(--s-6); }
@media (max-width: 760px) { .site-hero { padding: var(--s-8) 0 var(--s-4); } }

/* split: one idea, its text beside the screen that shows it */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); align-items: center; }
.split.flip > :first-child { order: 2; }
.split-text { display: flex; flex-direction: column; gap: var(--s-3); }
.split-text .lede { font-size: var(--fs-base); }
.split-text ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-1); color: var(--text-subtle); }
.split + .split { margin-top: var(--s-16); }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .split.flip > :first-child { order: 0; }
  .split + .split { margin-top: var(--s-12); }
}

/* steps of one phase (how it works): a brand line on the left, no second numbering */
.steps-list { margin: 0; padding: 0; list-style: none; }
.steps-list > li { padding-left: var(--s-4); border-left: 2px solid var(--brand); }
.steps-list p { color: var(--text-subtle); }

/* mock: a piece of the app shown on the site, always marked as an example */
.mock { background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.tint .mock { background: var(--bg-default); }
.mock-note { font-size: var(--fs-xs); color: var(--text-muted); }
.mock-event { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); background: var(--bg-default); border: 1px solid var(--border-default);
  border-left: 4px solid var(--brand); border-radius: var(--r-md); }
.mock-event .icon { color: var(--brand); margin-top: 2px; }
.mock-event span { display: block; font-size: var(--fs-sm); color: var(--text-subtle); }
.mock-rule { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--bg-default); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.mock-code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-xs); background: var(--bg-inverted); color: var(--text-inverted);
  border-radius: var(--r-md); padding: var(--s-4); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* modes of the AI: one line per mode, the default marked */
.modes, .split-text .modes { list-style: none; margin: 0; padding: 0; color: var(--text-default); gap: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.modes li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--border-subtle); }
.modes b { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.modes p { color: var(--text-subtle); }
@media (max-width: 600px) { .modes li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }

/* « toujours à toi »: what never leaves without the client, whatever the mode */
.keep { border-radius: var(--r-lg); background: var(--attention-subtle); padding: var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.keep h3 { color: var(--attention); display: flex; gap: var(--s-2); align-items: center; }
.keep ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-1); }

/* calculator: three fields, the result beside them, its hypothesis under it */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.calc-fields { display: flex; flex-direction: column; gap: var(--s-4); }
.calc-out { background: var(--bg-default); border: 1px solid var(--brand); border-radius: var(--r-xl); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.calc-out dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; }
.calc-out dt { font-size: var(--fs-sm); color: var(--text-subtle); }
.calc-out dd { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.calc-out .hypothesis { font-size: var(--fs-sm); color: var(--text-subtle); }
@media (max-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr); } }

/* pricing page */
.price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: stretch; }
.price-card .btn { margin-top: auto; }
.price-line { color: var(--text-subtle); }
.included { border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--s-6); background: var(--bg-subtle); display: flex; flex-direction: column; gap: var(--s-4); }
.included .ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); }
.enterprise { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5) var(--s-6);
  border: 1px solid var(--border-default); border-radius: var(--r-xl); }
.enterprise .stack { gap: var(--s-1); }
.price-brief { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-6); }
@media (max-width: 860px) { .price-grid, .included .ticks { grid-template-columns: minmax(0, 1fr); } }

/* where the data lives (trust page) */
.where { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.where > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--border-subtle); }
.where span { color: var(--text-subtle); }
@media (max-width: 600px) { .where > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }
.warning { border-left: 4px solid var(--attention-strong); background: var(--attention-subtle); border-radius: var(--r-md); padding: var(--s-5) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-2); max-width: 70ch; }

/* status page */
.status-summary { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); font-weight: var(--fw-bold); }
.status-summary.ok { background: var(--success-subtle); color: var(--success); }
.status-summary.ko { background: var(--error-subtle); color: var(--error); }
.status-list { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--bg-default); }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.status-row:last-child { border-bottom: 0; }
.status-row .since { display: block; font-size: var(--fs-sm); color: var(--text-muted); }

/* changelog */
.changelog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.changelog > li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-6); padding: var(--s-8) 0; border-top: 1px solid var(--border-subtle); }
.changelog time { font-weight: var(--fw-bold); color: var(--text-subtle); }
.changelog ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-2); max-width: 70ch; }
@media (max-width: 760px) { .changelog > li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-6) 0; } }

/* help center: a table of contents, then short articles on one page */
.help-toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); }
.help-toc a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border-subtle);
  text-decoration: none; font-weight: var(--fw-bold); color: var(--text-default); }
.help-toc a:hover { color: var(--brand-text); }
.help-toc .icon { color: var(--brand); }
.help-article { scroll-margin-top: 80px; padding: var(--s-8) 0; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--s-3); max-width: 70ch; }
.help-article ol, .help-article ul { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--s-2); }
.help-support { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5) var(--s-6);
  border-radius: var(--r-xl); background: var(--brand-subtle); color: var(--brand-text); margin-top: var(--s-8); }
@media (max-width: 760px) { .help-toc { grid-template-columns: minmax(0, 1fr); } }

/* contact form */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-10); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: var(--s-4); }
.contact-side { display: flex; flex-direction: column; gap: var(--s-5); }
.contact-side > div { display: flex; gap: var(--s-3); align-items: flex-start; }
.contact-side .icon { color: var(--brand); margin-top: 2px; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }

/* closing call to action on a dark band */
.cta-final { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.ink .btn.outline { background: transparent; color: var(--text-inverted); border-color: var(--border-strong); }
.ink .btn.outline:hover { background: var(--brand-emphasis); color: var(--text-inverted); }
.ink .micro { color: var(--border-strong); }

/* legal texts in the site's layout */
.article .version { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- home (A.1), on the Stitch board validated by Youssef (design/stitch/01-accueil-desktop-D.html, -mobile.html).
   60-30-10: the page in the neutral grey, cards in white, the hero the only tinted zone. Tokens only. */
body.home { background: var(--bg-subtle); }
.home .section-site { padding: var(--s-10) 0; }
.home .section-head.center { align-items: center; text-align: center; }
.home .section-head.center h2, .cta-home h2 { max-width: none; }
.home .mock-note { margin-top: var(--s-4); }
.center { text-align: center; }
.tile { background: var(--bg-default); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.tile p { color: var(--text-subtle); }
.narrow-tile { max-width: 760px; margin: 0 auto; }

/* hero (A10): centred title, the job that turns above it, the two buttons, then the demo */
.hero { padding: var(--s-16) 0; background: var(--brand-subtle); }
.hero-head { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); max-width: 920px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.hero-go .hero-actions { margin-top: var(--s-3); justify-content: center; }
.audience { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); padding: var(--s-1); margin-bottom: var(--s-3);
  border-radius: var(--r-full); background: color-mix(in srgb, var(--bg-default) 70%, transparent); box-shadow: var(--shadow-card); }
.audience > [aria-hidden] { padding: var(--s-2) var(--s-4); border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--text-subtle); transition: background-color .25s ease, color .25s ease; }
.audience > .on { background: var(--bg-default); color: var(--text-default); box-shadow: var(--shadow-raise); }

/* hero demo (A11, A115): the app's three columns played step by step (site/_home_script.html) */
.film { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head notif" "grid grid" "bar bar"; gap: var(--s-5) var(--s-6);
  margin-top: var(--s-12); padding: var(--s-8); background: var(--bg-default); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.film-head { grid-area: head; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.film-kicker { font-size: var(--fs-xs); color: var(--text-muted); }
.film-head b { font-size: var(--fs-md); }
.film-notif-slot { grid-area: notif; align-self: center; min-height: 40px; }
.film-notif { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); border-radius: var(--r-full); background: var(--bg-default);
  box-shadow: var(--shadow-card), var(--shadow-raise); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.film-notif .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); }
.film-grid { grid-area: grid; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--s-6); align-items: start; }
.film-col { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-4); background: var(--bg-subtle); border-radius: var(--r-lg); }
.film-col-head { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-subtle); }
.film-person { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); border-radius: var(--r-md); }
.film-person.on { background: var(--bg-default); box-shadow: var(--shadow-card); }
.film-person .line1 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.film-person .sub { font-size: var(--fs-xs); color: var(--text-subtle); }
.film-conv-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--bg-default); border-radius: var(--r-md); }
.film-conv-head .badge { margin-left: auto; }
.film .thread { gap: var(--s-3); }
.film .event-line { margin: 0; }
.film .bubble { display: flex; flex-direction: column; gap: var(--s-1); max-width: 85%; }
.film .bubble.us { align-self: flex-end; align-items: flex-end; }
.film .bubble.them { align-self: flex-start; }
.film .bubble .msg { max-width: none; margin: 0; }
.film .msg.us { background: var(--brand); color: var(--text-inverted); }
.film .bubble > .meta { font-size: var(--fs-xs); color: var(--text-muted); padding: 0 var(--s-2); }
.film .slots { font-weight: var(--fw-bold); }
.film .typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: currentColor; animation: caret 1s steps(1) infinite; }
.film [data-at], .film [data-until] { animation: film-in .3s ease-out both; }
@keyframes film-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes caret { 50% { opacity: 0; } }
.film-kv { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.film-kv > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); background: var(--bg-default); border-radius: var(--r-md); }
.film-kv dt { font-size: var(--fs-xs); color: var(--text-muted); }
.film-kv dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.film-bar { grid-area: bar; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); background: var(--bg-subtle); border-radius: var(--r-lg); }
.film-track { height: 4px; border-radius: var(--r-full); background: var(--bg-emphasis); overflow: hidden; }
.film-track span { display: block; height: 100%; background: var(--brand); transform-origin: left center; }
.film-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.film-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.film-steps button { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border: 0;
  border-radius: var(--r-full); background: var(--bg-default); color: var(--text-subtle); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  box-shadow: var(--shadow-card); cursor: pointer; }
.film-steps button[disabled] { cursor: default; }
.film-steps .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-emphasis); font-weight: var(--fw-bold); }
.film-steps .done .n { background: var(--brand); color: var(--text-inverted); }
.film-steps [aria-current] { color: var(--text-default); box-shadow: 0 0 0 2px var(--brand); }
.film-count { display: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
@media (min-width: 1024px) {   /* A11's 7 steps (B155's qualification) on one line: the pause sits by the progress track */
  .film-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-4); }
  .film-controls { display: contents; }
  .film-track { grid-row: 1; grid-column: 1; }
  .film-pause { grid-row: 1; grid-column: 2; }
  .film-steps { grid-row: 2; grid-column: 1 / -1; }
  .film-steps button { padding-right: var(--s-2); }
}
.film-pause[data-paused] .when-playing, .film-pause:not([data-paused]) .when-paused { display: none; }

/* A12, A13: the statement, then the same prospect without and with Mindsef */
.statement { max-width: 880px; margin: 0 auto; text-align: center; font-size: clamp(20px, 2.4vw, 28px); font-weight: var(--fw-bold); line-height: 1.3;
  letter-spacing: -0.02em; text-wrap: balance; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.duo .tile p { font-size: var(--fs-md); }
.duo .tile p.strong-text { color: var(--text-default); }
.tile-foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border-subtle); }

/* A14: the six functions, each with its piece of the app, each leading to its section of /fonctionnalites */
.fn-grid, .trio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.fn-card { position: relative; padding: var(--s-8); }
.fn-card:hover { box-shadow: var(--shadow-card), 0 0 0 1px var(--border-default); }
.fn-card h3 a { color: inherit; text-decoration: none; }
.fn-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-xl); }
.fn-card h3 a:focus-visible { box-shadow: none; }
.fn-card h3 a:focus-visible::after { box-shadow: var(--focus); }
.fn-card > p { font-size: var(--fs-sm); margin-bottom: var(--s-2); }
.fn-icon { width: 40px; height: 40px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--bg-subtle); color: var(--brand); }
.fn-mini { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg);
  background: var(--bg-subtle); font-size: var(--fs-xs); color: var(--text-subtle); }
.fn-mini b { color: var(--text-default); }
.swap { display: inline-grid; justify-items: end; text-align: right; }
.swap > * { grid-area: 1 / 1; transition: opacity .3s ease; }
.swap > :first-child { opacity: 0; }
.mini-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--bg-emphasis); overflow: hidden; }
.mini-bar span { display: block; width: 60%; height: 100%; background: var(--brand); transform-origin: left center; transition: transform .8s ease; }
.wait .swap > :first-child { opacity: 1; }
.wait .swap > :last-child { opacity: 0; }
.wait .mini-bar span { transform: scaleX(0); }
/* A6: each mini-screen is a scene of two steps (ui/_scenes_script.html), its first step as long as the old stagger */
.swap-step { display: inline-flex; justify-content: flex-end; text-align: right; }
.fn-mini [data-at], .talk [data-at] { animation: live-in .35s ease-out both; }
.fn-mini[data-now="1"] .mini-bar span { transform: scaleX(0); }
.fn-card .fn-mini[data-scene] .mini-bar span { transition-delay: 0s; }
.talk-steps { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s-3); }
.talk-pause { align-self: flex-end; }   /* the loop opens on its last step, whole, and can be stopped */
.wait.is-on .swap > :first-child { opacity: 0; }
.wait.is-on .swap > :last-child, .wait.is-on .mini-bar span { opacity: 1; transform: none; }
.fn-card:nth-child(1) .swap > *, .fn-card:nth-child(1) .mini-bar span { transition-delay: .4s; }
.fn-card:nth-child(2) .swap > *, .fn-card:nth-child(2) .mini-bar span { transition-delay: .8s; }
.fn-card:nth-child(3) .swap > *, .fn-card:nth-child(3) .mini-bar span { transition-delay: 1.2s; }
.fn-card:nth-child(4) .swap > *, .fn-card:nth-child(4) .mini-bar span { transition-delay: 1.6s; }
.fn-card:nth-child(5) .swap > *, .fn-card:nth-child(5) .mini-bar span { transition-delay: 2s; }
.fn-card:nth-child(6) .swap > *, .fn-card:nth-child(6) .mini-bar span { transition-delay: 2.4s; }
/* B419: the seventh, the whole row: the first message opened on a finding of the prospect's site */
.fn-card.fn-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--s-6); }
.fn-wide .fn-icon { flex: none; }
.fn-wide-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.fn-wide-text h3, .fn-wide-text p { margin: 0; }
.fn-wide-text p { font-size: var(--fs-sm); }
.fn-wide .fn-mini { margin-top: 0; flex: 0 1 340px; }
.fn-card.fn-wide .swap > * { transition-delay: 2.8s; }

/* A15: four replies, four outcomes; the outcome comes after the words, one line after the other */
.outcomes { list-style: none; margin: 0; padding: var(--s-8); }
.outcomes li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-4);
  background: var(--bg-subtle); border-radius: var(--r-lg); }
.outcomes .badge { padding: var(--s-1) var(--s-3); font-size: var(--fs-sm); white-space: normal; transition: opacity .3s ease, transform .3s ease; }
.wait.outcomes .badge { opacity: 0; transform: translateX(-8px); }
.wait.is-on.outcomes .badge { opacity: 1; transform: none; }
.outcomes li:nth-child(2) .badge { transition-delay: .6s; }
.outcomes li:nth-child(3) .badge { transition-delay: 1.2s; }
.outcomes li:nth-child(4) .badge { transition-delay: 1.8s; }

/* A16: the week, Monday to Friday, lit one day after the other */
.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.week .tile { padding: var(--s-8); gap: var(--s-2); transition: opacity .4s ease, transform .4s ease; }
.week b { font-size: var(--fs-sm); color: var(--brand-text); }
.week p { color: var(--text-default); }
.wait.week .tile { opacity: .35; transform: translateY(6px); }
.wait.is-on.week .tile { opacity: 1; transform: none; }
.week .tile:nth-child(2) { transition-delay: .5s; }
.week .tile:nth-child(3) { transition-delay: 1s; }
.week .tile:nth-child(4) { transition-delay: 1.5s; }
.week-end { width: fit-content; max-width: 100%; margin: var(--s-6) auto 0; padding: var(--s-3) var(--s-6); border-radius: var(--r-full); background: var(--bg-default);
  box-shadow: var(--shadow-card); font-weight: var(--fw-medium); text-align: center; }

/* A17: three levels, the switch of one conversation */
.levels { list-style: none; margin: 0; padding: var(--s-1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1);
  background: var(--bg-subtle); border-radius: var(--r-lg); }
.levels li { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-3); border-radius: var(--r-md); }
.levels li.on { background: var(--bg-default); box-shadow: var(--shadow-card); }
.levels b { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.levels span:not(.badge) { font-size: var(--fs-sm); color: var(--text-subtle); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4); background: var(--bg-subtle); border-radius: var(--r-lg); }
.switch-row .stack-0 span { font-size: var(--fs-sm); color: var(--text-subtle); }
.switch-label { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; white-space: nowrap; }
.switch-label:has(input:checked) .when-off, .switch-label:not(:has(input:checked)) .when-on { display: none; }

/* A18: talking to the setter */
.talk .said { align-self: flex-end; max-width: 85%; padding: var(--s-3) var(--s-4); border-radius: var(--r-xl); border-bottom-right-radius: var(--r-xs);
  background: var(--bg-subtle); color: var(--text-default); }
.talk .answer { align-self: flex-start; max-width: 85%; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-xl); border-bottom-left-radius: var(--r-xs); background: var(--bg-subtle); color: var(--text-default); }
.talk p.answer { flex-direction: row; align-items: center; }
.talk .answer > .icon, .talk .answer .inline > .icon:first-child { color: var(--success); }
.talk .answer > .inline:first-child { flex-wrap: nowrap; align-items: flex-start; }
.talk .answer > .inline:first-child .icon { margin-top: 3px; }
.talk-field { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border-radius: var(--r-lg); background: var(--bg-subtle); color: var(--text-muted); font-size: var(--fs-sm); }
.talk-field .send { margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--brand); color: var(--text-inverted); }

/* A19: the objection */
.objection { padding: var(--s-12) var(--s-8); text-align: center; align-items: center; gap: var(--s-4); }
.objection p { font-size: var(--fs-md); max-width: 60ch; }

/* A20: the measured figures (component A1) as three cards */
.home .facts .fact { padding: var(--s-8); gap: var(--s-2); border-top: 0; background: var(--bg-default); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.home .facts .fact .value { color: var(--brand-text); font-size: var(--fs-xl); }
.home .facts .fact .src { margin-top: auto; padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-subtle); color: var(--text-subtle); }

/* A21: the short calculator, three sliders and the result beside them */
.home-calc { max-width: 960px; margin: 0 auto; padding: var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.home-calc .calc-fields { display: flex; flex-direction: column; gap: var(--s-6); }
.slider { display: flex; flex-direction: column; gap: var(--s-2); }
.slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.slider label { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.slider output { font-weight: var(--fw-bold); color: var(--brand-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.slider input[type=range] { width: 100%; height: 28px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.home-calc .calc-out { border: 0; border-radius: var(--r-lg); background: var(--bg-subtle); padding: var(--s-6); }
.home-calc .calc-out dl > div { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg-default); }
.home-calc .calc-out .wide { grid-column: 1 / -1; }
.home-calc .calc-out .line { flex-direction: row; align-items: center; justify-content: space-between; }
.home-calc .calc-out .line dd { font-size: var(--fs-md); }
.home-calc .calc-out dd.key { color: var(--brand-text); }
.home-calc .calc-out .hypothesis { font-size: var(--fs-xs); }
.calc-link { font-size: var(--fs-sm); font-weight: var(--fw-bold); }

/* A22, A23 */
.trio-cards h3 { margin-top: var(--s-2); }
.faq-cards .faq { max-width: 760px; margin: 0 auto; border-top: 0; gap: var(--s-3); }
.faq-cards .faq details { padding: 0; border-bottom: 0; background: var(--bg-default); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.faq-cards .faq summary { align-items: center; min-height: 44px; padding: var(--s-5) var(--s-6); font-size: var(--fs-base); }
.faq-cards .faq details > div { margin: 0; padding: 0 var(--s-6) var(--s-5); }

/* A8: the closing band on the page's neutral background, three ways out */
.cta-home .cta-final { align-items: center; text-align: center; }
.cta-home .hero-actions { justify-content: center; margin-top: var(--s-2); }

@media (max-width: 1023px) {
  .film-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .film-list { display: none; }
  .fn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .home .section-site { padding: var(--s-10) 0; }
  .hero { padding: var(--s-10) 0; }
  .hero-head { align-items: stretch; text-align: left; }
  .audience { align-self: flex-start; }
  .hero-go .hero-actions { flex-direction: column; }
  .hero-go .hero-actions .btn { width: 100%; }
  .film { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "grid" "bar" "notif"; gap: var(--s-4); margin-top: var(--s-8); padding: var(--s-4); }
  .film-notif-slot { align-self: stretch; }
  .film-notif { width: 100%; border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); }
  .film-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .film-steps { display: none; }
  .film-count { display: block; }
  .film-pause { min-height: 44px; }
  .statement { text-align: left; }
  .tile { padding: var(--s-6) var(--s-4); }
  .duo, .fn-grid, .trio-cards, .week, .levels, .home-calc { grid-template-columns: minmax(0, 1fr); }
  .week { gap: var(--s-3); }
  .switch-row { flex-direction: column; align-items: flex-start; }
  .objection { text-align: left; align-items: flex-start; padding: var(--s-8) var(--s-4); }
  .week .tile { padding: var(--s-5) var(--s-4); }
  .audience { padding: 0; justify-content: flex-start; border-radius: var(--r-lg); }
  .audience > [aria-hidden] { padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); }
  .fn-card .fn-icon { display: none; }
  .fn-card.fn-wide { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .fn-wide .fn-mini { flex: none; }
  .home .facts .fact { padding: var(--s-6) var(--s-4); }
  .home-calc { padding: var(--s-6) var(--s-4); }
  .home-calc .calc-out { padding: var(--s-4); }
  .slider input[type=range] { height: 44px; }
  .home .section-head.center { align-items: flex-start; text-align: left; }
  .cta-home .cta-final { align-items: stretch; text-align: left; }
  .cta-home .hero-actions { flex-direction: column; }
  .cta-home .hero-actions .btn { width: 100%; }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .audience > [aria-hidden]:not(.on) { display: none; }
}

/* ---------- /tarifs (A.4), on the Stitch board validated by Youssef (design/stitch/02-tarifs-desktop.html). 60-30-10: the
   page in the neutral grey, cards in white, no tinted zone; the accent for the selected period and the chosen card. */
body.tarifs { background: var(--bg-subtle); }
.tarifs .section-site { padding: var(--s-10) 0; }
.tarifs-hero { padding-bottom: 0; }
.tarifs-hero .site-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tarifs-hero h1 { max-width: 26ch; text-wrap: balance; }
.tarifs .section-site h2 { max-width: none; }
.tarifs-hero .lede { max-width: 64ch; }
.tarifs .section-site:first-of-type { padding-top: var(--s-8); }
.period { align-self: center; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); padding: var(--s-1);
  border-radius: var(--r-full); background: var(--bg-emphasis); }
.period button { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--text-default); font-weight: var(--fw-bold); cursor: pointer; }
.period [aria-pressed="true"] { background: var(--bg-default); box-shadow: var(--shadow-card), var(--shadow-raise); }
.tarifs .price-card { border: 0; box-shadow: var(--shadow-card); }
.tarifs .price-card.main { box-shadow: 0 0 0 2px var(--brand); }
.tarifs .price-card > p:not(.price) { color: var(--text-subtle); }
.price-notes { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-2); text-align: center; }
.price-notes p { font-size: var(--fs-sm); color: var(--text-subtle); }
.price-notes b { color: var(--text-default); }
.covers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.covers .tile { flex-direction: row; align-items: flex-start; }
.covers .icon { color: var(--brand); margin-top: 3px; }
.covers p { color: var(--text-default); }
.included-tile .ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-8); }
.included-tile .ticks li.wide { grid-column: 1 / -1; }
.holds { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--border-subtle); }
.holds .icon { color: var(--brand); margin-top: 2px; }
.holds ul { margin: var(--s-1) 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); color: var(--text-subtle); }
.holds b { color: var(--text-default); }
.enterprise-tile { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); }
.calc-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.calc-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.calc-side h3 { font-size: var(--fs-md); }
.calc-side .field input { font-size: var(--fs-md); }
.calc-results { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--border-subtle); }
.calc-side:last-child .calc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc-results .wide { grid-column: 1 / -1; }
.calc-results dt { font-size: var(--fs-xs); color: var(--text-subtle); }
.calc-results dd { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--brand-text); font-variant-numeric: tabular-nums; }
.calc-results .wide dd { font-size: var(--fs-base); color: var(--text-default); }
.calc-side:last-child .calc-results dd { font-size: var(--fs-md); }
.calc-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-6); margin-top: var(--s-4); }
.calc-foot summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: var(--fw-bold); color: var(--brand-text); }
.calc-foot ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-1); color: var(--text-subtle); }
.calc-foot .hypothesis { max-width: 60ch; font-size: var(--fs-xs); color: var(--text-subtle); }
.tarifs .faq-cards .faq { max-width: none; }
@media (max-width: 760px) {
  .tarifs .section-site { padding: var(--s-8) 0; }
  .tarifs-hero .site-wrap { align-items: flex-start; text-align: left; }
  .period { align-self: stretch; }
  .period button { flex: 1 1 auto; justify-content: center; padding: 0 var(--s-3); white-space: nowrap; }
  .price-notes { text-align: left; }
  .covers, .calc-sides, .included-tile .ticks { grid-template-columns: minmax(0, 1fr); }
  .calc-sides { gap: var(--s-8); }
  .calc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-side:last-child .calc-results { grid-template-columns: minmax(0, 1fr); }
  .calc-foot { flex-direction: column; }
  .enterprise-tile { flex-direction: column; align-items: stretch; }
  .tarifs .price-card { padding: var(--s-6) var(--s-4); }
}

/* Language switcher (B408): a small menu in the header, a line of links in the footer. */
.site-lang { position: relative; }
.site-lang > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--s-1); padding: var(--s-2); }
.site-lang > summary::-webkit-details-marker { display: none; }
.site-lang .menu { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; min-width: 160px; }
.site-lang [aria-current], .site-langs [aria-current] { font-weight: 600; }
.site-langs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-3); }
@media (max-width: 960px) { .site-cta .site-lang { display: none; } }   /* in the phone menu instead */
/* B421: the line above the header that offers the visitor the language of his browser: discreet, one link, one close. */
.lang-offer { background: var(--bg-subtle); border-bottom: 1px solid var(--border-subtle); color: var(--text-subtle); }
.lang-offer p { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; margin: 0 auto; }
.lang-offer span { flex: 1; min-width: 0; }            /* the text and its link wrap together, the close stays on the row */
.lang-offer a { min-height: 44px; display: inline-flex; align-items: center; font-weight: var(--fw-medium); }
.lang-offer .btn { flex: none; }
.legal-language { padding: var(--s-3); border-radius: var(--r-2, 8px); background: var(--bg-subtle); }

/* /fonctionnalites (A28): the Stitch board 17 kept by Youssef on 05/11. The top, the bar of the 7 steps held under the
   header, then one section per step on a grey page, the screen on 6 of the 12 columns and the text on the other 6, sides
   alternating. Each screen plays once seen (ui/_scenes_script.html: [data-now] is the step on screen). */
.feat-hero { padding: var(--s-16) 0 var(--s-10); background: var(--bg-subtle); text-align: center; }
.feat-hero .site-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.feat-hero h1 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.03em; max-width: 24ch; text-wrap: balance; }
.feat-hero .lede { font-size: var(--fs-md); max-width: 52ch; }
.feat-hero .hero-actions { margin-top: var(--s-4); justify-content: center; }
.feat-bar { position: sticky; top: 65px; z-index: 20; background: var(--bg-default); box-shadow: 0 1px 0 var(--border-subtle); }
.feat-bar-in { display: flex; justify-content: center; gap: var(--s-1); padding: var(--s-3) 0; overflow-x: auto; scrollbar-width: none; }
.feat-bar-in::-webkit-scrollbar { display: none; }
.feat-bar a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4); border-radius: var(--r-full); color: var(--text-subtle);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; }
.feat-bar a:hover { background: var(--bg-subtle); color: var(--text-default); }
.feat-steps { display: flex; flex-direction: column; gap: var(--s-10); padding: var(--s-10) 0 var(--s-8); background: var(--bg-subtle); }
.feat-page .cta-home { padding: var(--s-6) 0 var(--s-10); }
.feat-page .site-foot { margin-top: 0; }
.feat-step { scroll-margin-top: 136px; }
.feat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6); align-items: center; }
.feat-shot { grid-column: 1 / span 6; min-width: 0; }
.feat-text { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding-left: var(--s-6); }
.flip .feat-shot { grid-column: 7 / span 6; order: 2; }
.flip .feat-text { grid-column: 1 / span 6; order: 1; padding: 0 var(--s-6) 0 0; }
.feat-text h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.025em; }
.feat-text .lede { font-size: var(--fs-md); }
.feat-plus { display: flex; align-items: center; gap: var(--s-2); color: var(--brand-text); font-weight: var(--fw-medium); }
.feat-example { margin-top: var(--s-3); padding: var(--s-4) var(--s-6); border-radius: var(--r-lg); background: var(--bg-default); box-shadow: var(--shadow-card); }
.feat-guard { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text-subtle); }
.feat-guard .icon { margin-top: 2px; color: var(--text-muted); }

/* the screens */
.fscreen { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-6); border-radius: var(--r-xl); background: var(--bg-default); box-shadow: var(--shadow-card); }
.fscreen-head { display: flex; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border-subtle); }
.fscreen-head > b { flex: 1; min-width: 0; font-size: var(--fs-md); }
.fscreen-head > .icon { color: var(--text-subtle); }
.fscreen-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fscreen-chips span { padding: 4px var(--s-3); border-radius: var(--r-sm); background: var(--bg-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.fscreen-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.fscreen-rows li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-subtle); }
.fscreen-rows .avatar .icon { color: var(--text-subtle); }
.fscreen-foot { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-subtle); }
.fscreen-bar { display: block; flex: 1; min-width: 60px; height: 6px; border-radius: var(--r-full); background: var(--bg-emphasis); overflow: hidden; }
.fscreen-bar span { display: block; width: 100%; height: 100%; background: var(--brand); transform-origin: left center; transition: transform .9s ease; }
.fscreen [data-fill] span { transform: scaleX(.72); }
.fscreen[data-now="1"] [data-fill] span { transform: scaleX(.25); }
.fscreen[data-now="2"] [data-fill] span { transform: scaleX(.55); }
.fscreen-thread { min-height: 0; }
.fscreen .thread .event-line { align-self: flex-start; padding: 2px 0; }
.fscreen .msg.draft { align-self: auto; }
.fscreen-voice { display: flex; align-items: center; gap: var(--s-2); }
.fscreen-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.fscreen-wave i { display: block; width: 3px; height: 50%; border-radius: 2px; background: currentColor; opacity: .55; }
.fscreen-wave i:nth-child(2n) { height: 90%; } .fscreen-wave i:nth-child(3n) { height: 30%; }
.fscreen[data-now="1"] .fscreen-wave i { animation: fscreen-wave .8s ease-in-out infinite alternate; }
.fscreen-wave i:nth-child(2) { animation-delay: .1s; } .fscreen-wave i:nth-child(3) { animation-delay: .2s; } .fscreen-wave i:nth-child(4) { animation-delay: .3s; }
.fscreen-wave i:nth-child(5) { animation-delay: .4s; } .fscreen-wave i:nth-child(6) { animation-delay: .5s; } .fscreen-wave i:nth-child(7) { animation-delay: .6s; }
.fscreen-event { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--brand-subtle); color: var(--brand-text); }
.fscreen-event span span { font-size: var(--fs-sm); color: var(--text-subtle); }
.fscreen .fscreen-event[data-at] { animation: fscreen-slide .7s cubic-bezier(.2, .9, .3, 1.15) both; }
.fscreen-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fscreen-kv { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.fscreen-kv > div { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-subtle); }
.fscreen-kv dt { flex: none; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-subtle); }
.fscreen-kv dd { flex: 1; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: right; }
.fscreen-kv dd .fscreen-bar { max-width: 160px; }
.fscreen-alert { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--attention-subtle); color: var(--attention);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.fscreen-alert .icon { margin-top: 2px; }
.fscreen-note { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--success); }
.fscreen-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.fscreen-funnel li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-subtle); }
.fscreen-funnel .fscreen-bar { height: 12px; border-radius: var(--r-sm); }
.fscreen-funnel li > span:first-child { display: block; }
.fscreen-funnel li > span:first-child::first-letter { text-transform: uppercase; }
.fscreen-funnel li:nth-child(2) .fscreen-bar span { transform: scaleX(.64); transition-delay: .1s; }
.fscreen-funnel li:nth-child(3) .fscreen-bar span { transform: scaleX(.34); transition-delay: .2s; }
.fscreen-funnel li:nth-child(4) .fscreen-bar span { transform: scaleX(.24); transition-delay: .3s; }
.fscreen-funnel li:nth-child(5) .fscreen-bar span { transform: scaleX(.12); transition-delay: .4s; }
.fscreen[data-now="1"] .fscreen-funnel .fscreen-bar span { transform: scaleX(.02); }
.fscreen-advice { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-subtle); }
.fscreen-advice .inline > .icon { color: var(--attention); }
@keyframes fscreen-wave { to { transform: scaleY(.35); } }
@keyframes fscreen-slide { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@media (max-width: 1023px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .feat-shot, .flip .feat-shot, .feat-text, .flip .feat-text { grid-column: 1 / -1; order: 0; padding: 0; }
  .feat-steps { gap: var(--s-12); padding: var(--s-10) 0; }
  .feat-bar-in { justify-content: flex-start; }
  .feat-bar a { min-height: 44px; }
}
@media (max-width: 760px) {
  .feat-hero { padding: var(--s-10) 0 var(--s-8); text-align: left; }
  .feat-hero .site-wrap { align-items: flex-start; }
  .feat-hero .hero-actions { justify-content: flex-start; }
  .fscreen { padding: var(--s-4); }
  .feat-example { padding: var(--s-3) var(--s-4); }
  .fscreen-funnel li { grid-template-columns: 80px minmax(0, 1fr); }
  .feat-bar { top: 57px; }
}

/* /comment-ca-marche (B416, A40, A41, A43): the Stitch board 20 kept by Youssef on 05/11. A grey page, white cards: the
   main demo on 7 and 5 columns, the three times, started in an afternoon, the example from end to end. The demo loops
   and the three times play once seen (ui/_scenes_script.html: [data-now] is the step on screen). */
.how-page #main { background: var(--bg-subtle); }
.how-page .feat-hero { background: transparent; }
.how-page .section-site { padding: var(--s-8) 0; }
.how-page .tile { padding: var(--s-6); }
.how-page .cta-home { padding: var(--s-6) 0 var(--s-10); }
.how-page .site-foot { margin-top: 0; }
.how-demo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; padding: var(--s-6);
  border-radius: var(--r-xl); background: var(--bg-default); box-shadow: var(--shadow-card); }
.how-thread { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.how-who { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg); background: var(--bg-subtle); }
.how-demo .thread { gap: var(--s-3); }
.how-demo .bubble { display: flex; flex-direction: column; gap: 2px; max-width: 88%; }
.how-demo .bubble.us { align-self: flex-end; align-items: flex-end; }
.how-demo .bubble.them { align-self: flex-start; }
.how-demo .bubble .msg { max-width: none; margin: 0; font-size: var(--fs-sm); }
.how-demo .msg.us { background: var(--brand); color: var(--text-inverted); border: 2px solid transparent; }
.how-demo .msg.draft { align-self: auto; }
.how-demo .bubble > .meta { font-size: var(--fs-xs); color: var(--text-muted); padding: 0 var(--s-2); }
.how-demo .event-line { align-self: flex-start; margin: 0; padding: 2px 0; }
.how-demo .slots { font-weight: var(--fw-bold); }
.how-fixed mark { padding: 0 3px; border-radius: 3px; background: color-mix(in srgb, var(--text-inverted) 28%, transparent); color: inherit; font-weight: var(--fw-bold); }
.how-demo .typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: currentColor; animation: live-caret 1s steps(1) infinite; }
.how-demo [data-at], .how-demo [data-until], .how-time [data-at], .how-time [data-until] { animation: live-in .35s ease-out both; }
.how-rules { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-3); border-radius: var(--r-lg); background: var(--bg-subtle); }
.how-rules-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.how-rules-head b { font-size: var(--fs-md); }
.how-rule-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.how-rule-list li { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-default); }
.how-rule-list li > .icon { margin-top: 2px; color: var(--success); }
.how-rule-list .how-new { box-shadow: 0 0 0 2px var(--brand); }
.how-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.how-n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--r-full); background: var(--bg-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-default); }
.how-mini { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg); background: var(--bg-subtle); }
.how-time .how-mini p { color: var(--text-default); }
.how-edit { font-size: var(--fs-sm); }
.how-edit s { color: var(--text-muted); }
.how-edit ins { padding: 0 3px; border-radius: 3px; background: var(--brand-subtle); color: var(--brand-text); text-decoration: none; font-weight: var(--fw-medium); }
.how-gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); width: 100%; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.how-gauge { display: block; width: 100%; height: 10px; border-radius: var(--r-full); background: var(--bg-emphasis); overflow: hidden; }
.how-gauge span { display: block; height: 100%; background: var(--brand); transform-origin: left center; transform: scaleX(.86); transition: transform 1.6s ease; }
.how-time[data-now="1"] .how-gauge span { transform: scaleX(.3); }
.how-piles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.how-piles li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--bg-default); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.how-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.how-step { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-subtle); }
.how-big { font-size: 44px; font-weight: var(--fw-black); line-height: 1; letter-spacing: -0.03em; color: var(--text-default) !important; }
.how-chip { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg-subtle);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-default) !important; }
.how-chip .icon { color: var(--brand); }
@media (max-width: 1023px) {
  .how-demo, .how-three { grid-template-columns: minmax(0, 1fr); }
  .how-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .how-page .section-site { padding: var(--s-6) 0; }
  .how-demo, .how-page .tile { padding: var(--s-4); }
  .how-four { grid-template-columns: minmax(0, 1fr); }
}
.how-page .section-head.center { align-items: center; text-align: center; }
.how-page .section-head.center h2 { max-width: none; }
.how-page .section-site + .section-site { padding-top: var(--s-6); }
/* Blog (judge site-19): the search field has the field style, the category chips are 44 px targets on a phone */
.blog-search .input { flex: 1; min-width: 0; width: auto; }
@media (max-width: 760px) {
  .blog-categories .badge { min-height: 44px; display: inline-flex; align-items: center; }
}
.how-analysis { margin-top: var(--s-4); font-size: var(--fs-sm); }
.how-analysis span { color: var(--text-subtle); }
.how-analysis .how-analysis-lines { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s-2); color: var(--text-default); }
.how-analysis [data-at] { animation: live-in .35s ease-out both; }

/* A86, A6: the demo of /demo in tabs by situation (site/_demo_tabs.html), each tab a screen of the app replayed
   (site/_demo_scene.html) on the app's own components. Without JavaScript the five screens stand one under the other;
   with it ([data-on]) they share one cell, so a tab never moves the page; the tabs wrap on a phone, 44 px each. */
.dtabs { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.dtabs-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.dtabs-head h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }
.dtabs-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dtabs-bar [role="tab"] { min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--border-default); border-radius: var(--r-full);
  background: var(--bg-default); color: var(--text-default); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; }
.dtabs-bar [role="tab"]:hover { background: var(--bg-subtle); }
.dtabs-bar [role="tab"][aria-selected="true"] { background: var(--text-default); border-color: var(--text-default); color: var(--bg-default); }
.dtabs-bar [role="tab"]:focus-visible { outline: none; box-shadow: var(--focus); }
.dtabs-panels { display: flex; flex-direction: column; gap: var(--s-10); }
.dtabs[data-on] .dtabs-panels { display: grid; }
.dtabs[data-on] .dtabs-panel { grid-area: 1 / 1; }
.dtabs[data-on] .dtabs-panel-title { display: none; }
.dtabs-panel[data-off] { visibility: hidden; }
.dtabs-panel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "title title" "screen say"; grid-template-rows: auto 1fr;
  align-items: start; align-content: start; gap: var(--s-3) var(--s-8); min-width: 0; border-radius: var(--r-xl); }
.dtabs-panel:focus-visible { outline: none; box-shadow: var(--focus); }
.dtabs-panel-title { grid-area: title; font-size: var(--fs-md); }
.dtabs-panel > .dscreen { grid-area: screen; align-self: stretch; }   /* every tab as tall as the tallest: one card size */
.dtabs-say { grid-area: say; padding-top: var(--s-6); font-size: var(--fs-md); line-height: 1.45; color: var(--text-default); }
.dscreen { gap: var(--s-3); }
.dscreen-body { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--s-4); min-width: 0; }
.dscreen .thread { gap: var(--s-2); }
.dscreen-composer { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border-subtle); }
.dscreen .draft-box { border: 1px solid var(--border-subtle); background: var(--bg-subtle); }
.dscreen-text { margin: 0; padding: var(--s-3) var(--s-4); min-height: 4.6em; font-size: var(--fs-sm); line-height: 1.5; }
.dscreen .btn { pointer-events: none; }
.dscreen-press { box-shadow: 0 0 0 4px var(--brand-subtle); }
.dscreen .dscreen-press[data-at] { animation: dscreen-press .7s ease-out both; }
@keyframes dscreen-press { 0% { transform: none; } 45% { transform: scale(.93); } 100% { transform: none; } }
.dscreen-piles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dscreen-piles li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-lg); background: var(--bg-subtle); }
.dscreen-piles li.on { background: var(--brand-subtle); }
.dscreen-piles li.on .pile-name, .dscreen-piles li.on .n { color: var(--brand-text); }
.dscreen-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dscreen-list li { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border-subtle); }
.dscreen-list li > .badge { flex: none; margin-top: 2px; }
.dscreen-line { display: block; margin-top: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bg-subtle); font-size: var(--fs-sm); line-height: 1.45; }
.dscreen-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.dscreen-week { display: flex; flex-direction: column; }
.dscreen-cols, .dscreen-rdv { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); margin: 0; }
.dscreen-cols { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bg-muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-subtle); }
.dscreen-day { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-3) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-subtle); }
.dscreen-rdv { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.dscreen-who { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.dscreen-rdv.dscreen-new { border-radius: var(--r-md); background: var(--brand-subtle); }
.dscreen .dscreen-new[data-at] { animation: fscreen-slide .7s cubic-bezier(.2, .9, .3, 1.15) both; }
@media (max-width: 600px) {
  .dscreen-cols, .dscreen-rdv { grid-template-columns: minmax(0, 1fr) auto auto; }
  .dscreen-proof { display: none; }
}
@media (max-width: 600px) {
  .dscreen-list li { flex-wrap: wrap; }
  .dscreen-list li > .badge { margin-left: calc(28px + var(--s-3)); }
}
@media (max-width: 1023px) {
  .dtabs-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "say" "screen"; grid-template-rows: auto auto 1fr; }
  .dtabs-say { padding-top: 0; font-size: var(--fs-base); }
}
@media (max-width: 760px) {        /* on a phone, as the home film: each tab its own height, the page below never stares at a hole */
  .dtabs[data-on] .dtabs-panels { display: block; }
  .dtabs-panel[data-off] { display: none; }
}