/* BONTABLE design system — loaded by every public page of the corporate site.
   1. Tokens  2. Base  3. Shared components  4. Harmonisation of the Tailwind pages  5. Page hooks (home, pricing, forms)
   Header and footer live in site-shell.css; page-family layouts in landing-pages.css, module-detail.css, blog/blog.css, legal.css. */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* Brand */
  --bt-blue: #0061a2;
  --bt-blue-700: #004f86;
  --bt-blue-100: #d6e8f7;
  --bt-blue-50: #edf5fc;
  --bt-orange: #f47721;        /* accent only: dots, illustrations, kickers on dark */
  --bt-cta: #c4500c;           /* action colour: the brand orange deepened until white text reaches AA (4.6:1) */
  --bt-cta-hover: #a5430a;
  --bt-orange-50: #fff2e8;
  --bt-teal: #12a69a;
  --bt-teal-700: #087c70;
  --bt-teal-50: #e4f5f2;
  /* Neutrals */
  --bt-ink: #172033;
  --bt-text: #3b4758;
  --bt-muted: #5a6677;
  --bt-line: #e3e8ef;
  --bt-line-strong: #c9d3df;
  --bt-bg: #f8fafc;
  --bt-tint: #f1f5fa;
  --bt-surface: #ffffff;
  --bt-night: #111a2b;
  --bt-on-night: #c6d0de;
  --bt-danger: #b3261e;
  /* Type */
  --bt-font: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bt-h1: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem);    /* 36 → 60 */
  --bt-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);     /* 28 → 40 */
  --bt-h3: 1.25rem;                                     /* 20 */
  --bt-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);  /* 17 → 19 */
  --bt-body: 1rem;
  --bt-small: .875rem;
  --bt-kicker: .75rem;
  /* Space */
  --bt-gutter: 24px;
  --bt-wrap: 1180px;
  --bt-section: clamp(56px, 7vw, 96px);
  --bt-stack: clamp(28px, 3.5vw, 44px);   /* heading block → content */
  /* Shape */
  --bt-r-sm: 10px;
  --bt-r-md: 14px;    /* buttons, inputs, small tiles */
  --bt-r-lg: 20px;    /* cards */
  --bt-r-xl: 28px;    /* large panels, bands */
  --bt-r-pill: 999px;
  --bt-shadow-1: 0 1px 2px rgba(23, 32, 51, .06);
  --bt-shadow-2: 0 10px 28px rgba(23, 32, 51, .08);
  --bt-shadow-3: 0 28px 64px rgba(23, 32, 51, .14);
  /* Shell */
  --bt-header-h: 72px;
}
@media (max-width: 600px) { :root { --bt-gutter: 18px; --bt-header-h: 64px; } }

/* ---------------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bt-header-h) + 20px); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--bt-font); color: var(--bt-ink); background: var(--bt-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { max-width: 100%; }
img { height: auto; }
::selection { background: var(--bt-blue-100); color: var(--bt-ink); }
/* The header is injected by site-shell.js: its height is reserved here so nothing moves when it arrives. */
:root body > main { padding-top: var(--bt-header-h) !important; }
/* Decorative shapes of the compositions may overhang the page edge: clip (does not create a scroll container, sticky keeps working). */
:root body > main { overflow-x: clip; }
/* Headers and footers that came with a page export are replaced by the shared shell. */
body > header:not(.bt-global-header), body > footer:not(.bt-global-footer) { display: none; }
/* Icon font: fixed box so a late font never reflows the line. */
.material-symbols-outlined { display: inline-block; width: 1em; height: 1em; overflow: hidden; line-height: 1; flex: none; }
:is(h1, h2, h3, h4, button, p) > .material-symbols-outlined { vertical-align: -.18em; }

:root :is(a, button, summary, [role="tab"], [tabindex]):focus-visible { outline: 2px solid var(--bt-blue); outline-offset: 3px; border-radius: 6px; }
:root :is(.bt-global-footer, .bt-on-night, .bt-module-cta, .blog-cta, .legal-contact) :is(a, button):focus-visible { outline-color: #fff; }

.bt-skip { position: fixed; left: 16px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: var(--bt-r-md); background: var(--bt-ink); color: #fff; font-weight: 700; text-decoration: none; transition: top .15s ease; }
.bt-skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- 3. Shared components */

/* Buttons: one shape everywhere. Filled = the one action we want; ghost = everything else. */
.bt-button, .bt-btn, .button, .bt-tab-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--bt-r-md);
  font: 700 .9375rem/1.2 var(--bt-font); letter-spacing: 0; text-decoration: none; text-align: center; cursor: pointer;
  background: var(--bt-cta); color: #fff; box-shadow: 0 1px 2px rgba(23, 32, 51, .12);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
:root .bt-btn { min-height: 48px; padding: 12px 22px; border-radius: var(--bt-r-md); font-size: .9375rem; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
:root .bt-btn.bt-btn--primary, .bt-button, .bt-button.alt, .button, .bt-tab-cta { background: var(--bt-cta); color: #fff; }
:root .bt-btn.bt-btn--primary:hover, .bt-button:hover, .button:hover, .bt-tab-cta:hover { background: var(--bt-cta-hover); box-shadow: 0 6px 16px rgba(196, 80, 12, .24); }
:root .bt-btn.bt-btn--ghost, .bt-button.ghost { background: var(--bt-surface); color: var(--bt-ink); border-color: var(--bt-line-strong); box-shadow: none; }
:root .bt-btn.bt-btn--ghost:hover, .bt-button.ghost:hover { background: var(--bt-surface); border-color: var(--bt-blue); color: var(--bt-blue); box-shadow: none; }
:root .bt-btn.bt-btn--onblue { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
:root .bt-btn.bt-btn--onblue:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
:root .bt-btn.bt-btn--lg { min-height: 54px; padding: 14px 28px; font-size: 1rem; }
:root .bt-btn .material-symbols-outlined { font-size: 20px; }
.bt-button:active, .bt-btn:active, .button:active { transform: translateY(1px); }
:root :is(.bt-btn, .bt-button)[disabled], :root :is(.bt-btn, .bt-button)[aria-busy="true"] { opacity: .65; cursor: progress; box-shadow: none; }

/* Text link with arrow */
.bt-link { display: inline-flex; align-items: center; gap: 6px; color: var(--bt-blue); font-weight: 700; text-decoration: none; }
.bt-link::after { content: '→'; transition: transform .18s ease; }
.bt-link:hover::after { transform: translateX(3px); }

.bt-inline { color: var(--bt-blue); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Kicker (small uppercase label above a heading) */
.bt-kicker { display: inline-block; color: var(--bt-blue); font-size: var(--bt-kicker); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Badges */
.bt-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.bt-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 11px; border-radius: var(--bt-r-pill); background: var(--bt-teal-50); color: #06655b; font-size: .75rem; font-weight: 700; line-height: 1.2; }
.bt-badge.addon { background: var(--bt-orange-50); color: #96400a; }
.bt-badge.soon { background: #eceff3; color: #45505f; }
.bt-badge.new { background: var(--bt-blue-50); color: var(--bt-blue-700); }

/* Cards: an open column under a rule, not a boxed tile. The icon is a plain glyph. */
.bt-card { padding: 22px 0 0; border-top: 1px solid var(--bt-line-strong); }
.bt-card h3 { margin: 0 0 8px; font-size: var(--bt-h3); line-height: 1.25; letter-spacing: -.01em; color: var(--bt-ink); }
.bt-card p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--bt-text); }
.bt-card img { width: 100%; height: 170px; margin-bottom: 16px; object-fit: cover; border-radius: var(--bt-r-md); background: var(--bt-tint); }
.bt-icon { display: block; margin: 0 0 12px; color: var(--bt-blue); line-height: 1; }
.bt-icon .material-symbols-outlined { font-size: 26px; }

/* Dark call-to-action band (bottom of most pages) */
.bt-module-cta, .blog-cta { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: var(--bt-section); padding: clamp(28px, 4vw, 48px); border-radius: var(--bt-r-xl); background: var(--bt-night); color: #fff; }
:root .bt-module-cta h2, :root .blog-cta h2 { max-width: none; margin: 0; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -.02em; }
:root .bt-module-cta p, :root .blog-cta p { margin: 10px 0 0; max-width: 620px; color: var(--bt-on-night); line-height: 1.6; }
.bt-module-cta .bt-button, .blog-cta .button { flex: none; white-space: nowrap; }
@media (max-width: 800px) { .bt-module-cta, .blog-cta { display: block; } .bt-module-cta .bt-button, .blog-cta .button { margin-top: 22px; width: 100%; } }

/* Reveal on scroll. The hidden state exists only once site-enhancements.js has confirmed it can reveal
   (IntersectionObserver present, motion allowed): without the script every section is simply visible. */
.bt-reveal-on .bt-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1); }
.bt-reveal-on .bt-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bt-reveal-on .bt-reveal { opacity: 1; transform: none; } }
@media print { .bt-reveal-on .bt-reveal { opacity: 1 !important; transform: none !important; } }

/* ---------------------------------------------------------------- 4. Harmonisation of the Tailwind pages
   These pages keep their utility classes; colours, radii, shadows and the type scale come from their inline
   Tailwind theme (kept in step with the tokens above by site-tools/restyle.py). The rules below align what a
   theme cannot: fluid headings, section rhythm, and decorative motion. */
:root main h1 { font-size: var(--bt-h1); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
:root main :is(h2, h3).text-headline-xl { font-size: var(--bt-h2); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
:root main :is(h2, h3).text-headline-lg { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
:root main span.text-headline-xl { font-size: var(--bt-h2); line-height: 1.1; }
:root main .text-body-lg { text-wrap: pretty; }
/* Section kickers of the Tailwind pages (the small uppercase line above a title). */
:root main .text-label-sm.uppercase.tracking-widest { font-size: var(--bt-kicker); line-height: 1.35; letter-spacing: .12em; }
:root .animate-pulse, :root .animate-bounce, :root .animate-ping { animation: none; }
/* Section rhythm: more air between sections than between a heading and its own content. */
:root main section.py-space-xl { padding-top: calc(var(--bt-section) / 2); padding-bottom: calc(var(--bt-section) / 2); }
:root main section > .text-center.mb-16, :root main section > .mb-16 { margin-bottom: var(--bt-stack); }
/* Mock-up controls inside illustrations are not navigation: keep them comfortable to tap all the same. */
:root main :is(.lang-btn, .branch-btn) { min-height: 44px; }
:root main .faq-toggle { min-height: 56px; text-align: left; }
:root main .faq-toggle > span:first-child { font-size: 1.0625rem; line-height: 1.4; font-weight: 600; letter-spacing: -.005em; }

/* ---------------------------------------------------------------- 5. Page hooks */

/* Home — hero */
.bt-home-hero { padding-top: clamp(40px, 6vw, 80px) !important; padding-bottom: clamp(32px, 4vw, 56px) !important; }
.bt-home-hero .bt-hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 0 0 36px; padding: 0; list-style: none; color: var(--bt-text); font-size: .9375rem; font-weight: 600; }
.bt-home-hero .bt-hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.bt-home-hero .bt-hero-facts li::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--bt-teal-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23087c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }

/* Forms (#contact-demo-form on /demander-une-demo/ and /contact/) */
:root #contact-demo-form label[for], :root #contact-demo-form .bt-field-label { font-size: .875rem; line-height: 1.35; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bt-ink); }
:root #contact-demo-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--bt-line-strong); border-radius: var(--bt-r-md);
  background: var(--bt-surface); color: var(--bt-ink); font: 400 1rem/1.4 var(--bt-font); box-shadow: none; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:root #contact-demo-form textarea { min-height: 112px; resize: vertical; }
:root #contact-demo-form ::placeholder { color: #7a8595; opacity: 1; }
:root #contact-demo-form :is(input, select, textarea):hover { border-color: #9aa8b9; }
:root #contact-demo-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: var(--bt-blue); box-shadow: 0 0 0 3px rgba(0, 97, 162, .22); }
:root #contact-demo-form :is(input, select, textarea):user-invalid { border-color: var(--bt-danger); box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); }
:root #contact-demo-form label:has(> input[type="checkbox"]), :root #contact-demo-form label:has(> input[type="radio"]) {
  min-height: 48px; padding: 10px 14px; border: 1px solid var(--bt-line-strong); border-radius: var(--bt-r-md); background: var(--bt-surface);
  color: var(--bt-ink); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
:root #contact-demo-form label:has(> input:checked) { border-color: var(--bt-blue); background: var(--bt-blue-50); color: var(--bt-blue-700); box-shadow: inset 0 0 0 1px var(--bt-blue); }
:root #contact-demo-form label:has(> input:focus-visible) { outline: 2px solid var(--bt-blue); outline-offset: 2px; }
:root #contact-demo-form input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--bt-blue); }
:root #contact-demo-form [type="submit"] { min-height: 52px; }
:root #form-success-banner { align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid #9fdcd3; border-radius: var(--bt-r-md); background: var(--bt-teal-50); color: #06443e; font-size: .9375rem; line-height: 1.5; animation: none; }
:root #form-success-banner:not(.hidden) { display: flex; }
:root #form-success-banner .material-symbols-outlined { font-size: 24px; color: var(--bt-teal-700); }
.bt-form-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--bt-muted); font-size: .875rem; line-height: 1.45; }

/* Touch screens: small controls of the interactive mock-ups keep their look but get a 44 px hit area. */
@media (pointer: coarse) {
  :root main button { position: relative; }
  :root main button::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  :root main a[href^="mailto:"], :root main a[href^="tel:"], .bt-link, .bt-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 600px) {
  :root main .px-margin { padding-left: var(--bt-gutter); padding-right: var(--bt-gutter); }
}

/* ---------------------------------------------------------------- 6. Image slots (.bt-shot)
   One component for every product picture. The file lives in /assets/shots/<name>.(png|jpg|webp); build.php and
   restyle.py render the <img> when the file exists and a labelled placeholder when it does not.
   Types: phone 9:19.5 · desktop 16:10 in a browser frame · tablet 3:4 · photo 3:2. */
.bt-shot { margin: 0; display: flex; justify-content: center; }
.bt-shot__frame { position: relative; width: 100%; overflow: hidden; background-color: #f3f6fa; }
.bt-shot__frame > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.bt-shot__ph { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 7%; }
.bt-shot__label { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--bt-line); border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--bt-muted); font: 500 .6875rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; overflow-wrap: anywhere; }
.bt-shot__label b { color: var(--bt-ink); font-weight: 600; }
.bt-shot__label i { font-style: normal; }
/* phone */
.bt-shot--phone .bt-shot__frame { width: min(280px, 70vw); aspect-ratio: 9 / 19.5; border: 9px solid var(--bt-night); border-radius: 42px; box-shadow: 0 0 0 1px #2b3649, var(--bt-shadow-3); }
.bt-shot--phone .bt-shot__frame::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 9px; width: 26%; height: 14px; border-radius: 99px; background: var(--bt-night); transform: translateX(-50%); }
.bt-shot--phone.is-empty .bt-shot__frame { background-image: linear-gradient(#dde5ef, #dde5ef), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#d6e3f0, #d6e3f0); background-repeat: no-repeat; background-size: 44% 2.2%, 84% 12%, 84% 12%, 84% 12%, 84% 6%; background-position: 14% 11%, 50% 21%, 50% 37%, 50% 53%, 50% 72%; }
/* desktop: browser window */
.bt-shot--desktop .bt-shot__frame { aspect-ratio: 1600 / 1068; border: 1px solid var(--bt-line-strong); border-radius: 14px; background-color: #fff; box-shadow: var(--bt-shadow-3); }
.bt-shot--desktop .bt-shot__frame::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6.4%; border-bottom: 1px solid var(--bt-line); background: radial-gradient(circle, #cfd8e3 3.5px, transparent 4px) 14px 50% / 9px 9px no-repeat, radial-gradient(circle, #cfd8e3 3.5px, transparent 4px) 30px 50% / 9px 9px no-repeat, radial-gradient(circle, #cfd8e3 3.5px, transparent 4px) 46px 50% / 9px 9px no-repeat, #f6f8fb; }
.bt-shot--desktop .bt-shot__frame > img, .bt-shot--desktop .bt-shot__ph { position: absolute; inset: 6.4% 0 0; width: 100%; height: 93.6%; }
.bt-shot--desktop.is-empty .bt-shot__ph { padding: 3%; background-color: #f3f6fa; background-image: linear-gradient(#e6ecf3, #e6ecf3), linear-gradient(#dde5ef, #dde5ef), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#e8eef5, #e8eef5); background-repeat: no-repeat; background-size: 17% 100%, 26% 4%, 24% 20%, 24% 20%, 24% 20%, 76% 38%; background-position: 0 0, 26% 9%, 27.5% 24%, 61% 24%, 94.5% 24%, 87% 78%; }
/* tablet (kiosk): portrait */
.bt-shot--tablet .bt-shot__frame { width: min(340px, 76vw); aspect-ratio: 3 / 4; border: 12px solid var(--bt-night); border-radius: 30px; box-shadow: 0 0 0 1px #2b3649, var(--bt-shadow-3); }
.bt-shot--tablet.is-empty .bt-shot__frame { background-image: linear-gradient(#dde5ef, #dde5ef), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#e8eef5, #e8eef5), linear-gradient(#d6e3f0, #d6e3f0); background-repeat: no-repeat; background-size: 40% 3%, 40% 24%, 40% 24%, 40% 24%, 40% 24%, 84% 7%; background-position: 12% 8%, 12% 22%, 88% 22%, 12% 56%, 88% 56%, 50% 80%; }
/* photo */
.bt-shot--photo .bt-shot__frame { aspect-ratio: 3 / 2; border-radius: var(--bt-r-lg); }
.bt-shot--photo .bt-shot__frame > img { object-position: center; }
.bt-shot--photo.is-empty .bt-shot__frame { border: 1px solid var(--bt-line); background: linear-gradient(160deg, #eef2f7 0%, #e2e9f1 100%); }
.bt-shot--photo.is-empty .bt-shot__ph { align-items: center; }
.bt-night .bt-shot--photo.is-empty .bt-shot__frame { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }

/* ---------------------------------------------------------------- 7. Editorial blocks: home page (.bt-home) and the other hand-made pages (.bt-ed) */
.bt-wrap { max-width: calc(var(--bt-wrap) + 2 * var(--bt-gutter)); margin: 0 auto; padding-left: var(--bt-gutter); padding-right: var(--bt-gutter); }
:root :is(.bt-home, .bt-ed) h2 { margin: 0; color: var(--bt-ink); font-size: var(--bt-h2); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
:is(.bt-home, .bt-ed) p { margin: 0; color: var(--bt-text); font-size: var(--bt-lead); line-height: 1.65; text-wrap: pretty; }
.bt-home-hero { padding-top: clamp(40px, 6vw, 80px) !important; padding-bottom: clamp(32px, 4vw, 56px) !important; }
.bt-home-screen { padding-bottom: calc(var(--bt-section) * .75); }
.bt-home-screen .bt-shot__frame { max-width: 1040px; }
/* for whom: one line of links */
.bt-linkrow { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid var(--bt-line-strong); border-bottom: 1px solid var(--bt-line-strong); }
.bt-linkrow > span { display: flex; align-items: center; padding: 0 28px 0 0; color: var(--bt-muted); font-size: .9375rem; font-weight: 600; }
.bt-linkrow a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 14px 20px; border-left: 1px solid var(--bt-line); color: var(--bt-ink); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.bt-linkrow a::after { content: '→'; color: var(--bt-blue); transition: transform .18s ease; }
.bt-linkrow a:hover { background: #fff; color: var(--bt-blue); }
.bt-linkrow a:hover::after { transform: translateX(3px); }
/* statement + the one compact list */
.bt-statement { padding: var(--bt-section) 0 calc(var(--bt-section) * .5); }
.bt-statement__lead { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 80px); align-items: end; }
:root :is(.bt-home, .bt-ed) .bt-statement__lead h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; }
.bt-statement__lead h2 em { font-style: normal; color: var(--bt-blue); }
.bt-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.bt-quad li { padding-top: 18px; border-top: 2px solid var(--bt-ink); }
.bt-quad h3 { margin: 0 0 8px; color: var(--bt-ink); font-size: 1.375rem; letter-spacing: -.02em; font-weight: 700; }
:is(.bt-home, .bt-ed) .bt-quad p { font-size: 1rem; line-height: 1.6; }
.bt-quad a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--bt-blue); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.bt-quad a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* alternating image / text bands */
.bt-band { padding: calc(var(--bt-section) * .75) 0; }
.bt-band > .bt-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bt-band--phone > .bt-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.bt-band--flip > .bt-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.bt-band--flip .bt-band__media { order: 2; }
.bt-band__media--stage { padding: clamp(28px, 4vw, 56px) 0; border-radius: var(--bt-r-xl); background: var(--bt-tint); }
.bt-band__text p { margin-top: 18px; max-width: 54ch; }
.bt-band__links { display: grid; margin: 28px 0 0; padding: 0; max-width: 480px; list-style: none; border-top: 1px solid var(--bt-line-strong); }
.bt-band__links a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 0; border-bottom: 1px solid var(--bt-line); color: var(--bt-ink); font-weight: 700; text-decoration: none; }
.bt-band__links a small { color: var(--bt-muted); font-size: .875rem; font-weight: 500; text-align: right; }
.bt-band__links a:hover { color: var(--bt-blue); }
/* dark statement */
.bt-night { margin: calc(var(--bt-section) * .5) 0; padding: var(--bt-section) 0; background: var(--bt-night); color: #fff; }
.bt-night > .bt-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
:root :is(.bt-home, .bt-ed) .bt-night h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.05; letter-spacing: -.035em; }
:is(.bt-home, .bt-ed) .bt-night p { margin-top: 20px; max-width: 50ch; color: var(--bt-on-night); }
.bt-night__facts { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 36px 0 0; padding: 0; list-style: none; }
.bt-night__facts li { color: var(--bt-on-night); font-size: .9375rem; line-height: 1.4; }
.bt-night__facts b { display: block; color: #fff; font-size: 2rem; line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
/* pricing teaser */
.bt-teaser { padding: var(--bt-section) 0 calc(var(--bt-section) * .5); }
.bt-teaser > .bt-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.bt-teaser__price { margin-top: 28px !important; color: var(--bt-ink) !important; font-size: clamp(3rem, 2rem + 4vw, 5rem) !important; line-height: 1 !important; letter-spacing: -.04em; font-weight: 700; }
.bt-teaser__price small { font-size: 1.125rem; letter-spacing: 0; font-weight: 600; color: var(--bt-text); }
.bt-teaser__sub { margin-top: 12px !important; font-size: 1rem !important; color: var(--bt-muted) !important; }
.bt-teaser__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bt-line-strong); }
.bt-teaser__list li { padding: 16px 0; border-bottom: 1px solid var(--bt-line); color: var(--bt-ink); font-size: 1.0625rem; font-weight: 600; }
.bt-teaser__list li small { display: block; margin-top: 2px; color: var(--bt-muted); font-size: .9375rem; font-weight: 400; }
.bt-teaser__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 900px) {
  .bt-linkrow { grid-template-columns: 1fr 1fr; }
  .bt-linkrow > span { grid-column: 1 / -1; min-height: 48px; padding: 0; }
  .bt-linkrow a { border-left: 0; border-top: 1px solid var(--bt-line); padding: 14px 12px 14px 0; }
  .bt-linkrow a:nth-of-type(even) { padding-left: 16px; border-left: 1px solid var(--bt-line); }
  .bt-statement__lead, .bt-band > .bt-wrap, .bt-band--phone > .bt-wrap, .bt-band--flip > .bt-wrap, .bt-night > .bt-wrap, .bt-teaser > .bt-wrap { grid-template-columns: 1fr; }
  .bt-band--flip .bt-band__media { order: 0; }
  .bt-quad { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
}
@media (max-width: 520px) { .bt-linkrow { grid-template-columns: 1fr; } .bt-linkrow a:nth-of-type(even) { padding-left: 0; border-left: 0; } .bt-quad { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 8. Pricing page: the package (.bt-plan) */
.bt-plan { max-width: 1040px; margin: 0 auto; padding: clamp(24px, 4vw, 56px); border: 1px solid var(--bt-line); border-top: 4px solid var(--bt-ink); border-radius: var(--bt-r-lg); background: var(--bt-surface); box-shadow: var(--bt-shadow-2); text-align: left; }
.bt-plan__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(24px, 5vw, 72px); align-items: start; }
:root main .bt-plan__name { margin: 0; color: var(--bt-ink); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 700; }
.bt-plan__promise { max-width: 40ch; margin: 12px 0 0; color: var(--bt-text); font-size: var(--bt-lead); line-height: 1.55; }
.bt-plan__price { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.bt-price-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--bt-line-strong); border-radius: var(--bt-r-pill); background: var(--bt-tint); }
:root .bt-price-toggle .period-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--bt-r-pill); background: transparent; color: var(--bt-text); font: 700 .9375rem/1.2 var(--bt-font); cursor: pointer; }
:root .bt-price-toggle .period-btn[aria-pressed="true"] { background: var(--bt-ink); color: #fff; }
:root .bt-price-toggle .period-btn small { padding: 2px 8px; border-radius: var(--bt-r-pill); background: var(--bt-teal-50); color: #06655b; font-size: .75rem; font-weight: 700; }
.bt-plan__amount { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--bt-ink); font-weight: 700; line-height: 1; }
.bt-plan__amount span { font-size: 1.25rem; color: var(--bt-text); font-weight: 600; }
.bt-plan__amount b { font-size: clamp(4.5rem, 3rem + 6vw, 7rem); letter-spacing: -.05em; font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-plan__sub { max-width: 36ch; margin: 0; color: var(--bt-muted); font-size: .9375rem; line-height: 1.5; text-align: right; }
.bt-plan__facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bt-line-strong); border-bottom: 1px solid var(--bt-line-strong); }
.bt-plan__facts li { padding: 20px 16px 20px 0; color: var(--bt-text); font-size: .9375rem; line-height: 1.4; }
.bt-plan__facts li + li { padding-left: 20px; border-left: 1px solid var(--bt-line); }
.bt-plan__facts b { display: block; margin-bottom: 4px; color: var(--bt-ink); font-size: 1.75rem; line-height: 1.1; letter-spacing: -.03em; }
.bt-plan__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(24px, 3vw, 36px); }
.bt-plan__foot p { flex: 1 1 320px; margin: 0; color: var(--bt-muted); font-size: .9375rem; line-height: 1.55; }
/* what is included: four calm groups, detail on demand */
.bt-included { max-width: 1040px; margin: var(--bt-section) auto 0; text-align: left; }
:root main .bt-included > h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.18; letter-spacing: -.02em; font-weight: 700; color: var(--bt-ink); }
.bt-included > p { max-width: 60ch; margin: 12px 0 0; color: var(--bt-text); font-size: var(--bt-lead); line-height: 1.6; }
.bt-included__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); margin-top: 32px; align-items: start; }
.bt-included__group { padding: 26px 0; border-top: 1px solid var(--bt-line-strong); }
.bt-included__group h3 { margin: 0 0 8px; color: var(--bt-ink); font-size: 1.25rem; letter-spacing: -.015em; font-weight: 700; }
.bt-included__group > p { margin: 0; color: var(--bt-text); font-size: 1.0625rem; line-height: 1.6; }
.bt-included__group details { margin-top: 8px; }
.bt-included__group summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--bt-blue); font-size: .9375rem; font-weight: 700; cursor: pointer; list-style: none; }
.bt-included__group summary::-webkit-details-marker { display: none; }
.bt-included__group summary::after { content: '+'; font-size: 1.125rem; line-height: 1; }
.bt-included__group details[open] summary::after { content: '–'; }
.bt-included__group ul { margin: 6px 0 4px; padding: 0 0 0 18px; color: var(--bt-text); font-size: 1rem; line-height: 1.6; }
.bt-included__group li { margin: 8px 0; }
.bt-included__group li::marker { color: var(--bt-line-strong); }
.bt-included__group .bt-link { min-height: 44px; font-size: .9375rem; }
:root .bt-addon-card { border: 1px dashed var(--bt-line-strong); background: transparent; box-shadow: none; }
@media (max-width: 860px) {
  .bt-plan__head { grid-template-columns: 1fr; }
  .bt-plan__price { align-items: flex-start; }
  .bt-plan__sub { text-align: left; }
  .bt-plan__facts { grid-template-columns: 1fr 1fr; }
  .bt-plan__facts li, .bt-plan__facts li + li { padding: 16px 12px 16px 0; border-left: 0; border-bottom: 1px solid var(--bt-line); }
  .bt-plan__facts li:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .bt-included__grid { grid-template-columns: 1fr; }
  .bt-plan__foot .bt-btn { width: 100%; }
}

/* ---------------------------------------------------------------- 9. Editorial pages (.bt-ed): solutions, canaux, a-propos, demos, contact */
.bt-ed-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); background: var(--bt-tint); }
:root .bt-ed-hero h1 { max-width: 18ch; margin: 0; color: var(--bt-ink); font-size: var(--bt-h1); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
:is(.bt-home, .bt-ed) .bt-ed-hero p { max-width: 58ch; margin-top: 22px; }
.bt-ed-hero .bt-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bt-ed-hero--plain { background: none; padding-bottom: clamp(24px, 4vw, 40px); }
.bt-ed-photo { padding: 0 0 var(--bt-section); }
.bt-ed-photo .bt-shot__frame { aspect-ratio: 21 / 9; }
.bt-ed-section { padding: calc(var(--bt-section) * .75) 0; }
.bt-ed-section > .bt-wrap > p { max-width: 60ch; margin-top: 16px; }
/* ruled rows: title on the left, text on the right */
.bt-rows { margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--bt-ink); }
.bt-rows li { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) auto; gap: 8px clamp(20px, 4vw, 56px); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--bt-line); }
.bt-rows h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; color: var(--bt-ink); font-size: 1.25rem; line-height: 1.3; letter-spacing: -.015em; font-weight: 700; }
:is(.bt-home, .bt-ed) .bt-rows p { font-size: 1.0625rem; line-height: 1.6; }
.bt-rows a { display: inline-flex; align-items: center; min-height: 44px; color: var(--bt-blue); font-size: .9375rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.bt-rows a::after { content: '→'; margin-left: 6px; }
.bt-rows a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* three steps with typographic numerals */
.bt-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 56px); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
.bt-steps3 span { display: block; color: var(--bt-blue); font-size: 2.5rem; line-height: 1; letter-spacing: -.04em; font-weight: 300; }
.bt-steps3 h3 { margin: 14px 0 6px; color: var(--bt-ink); font-size: 1.125rem; font-weight: 700; }
:is(.bt-home, .bt-ed) .bt-steps3 p { font-size: 1rem; line-height: 1.6; }
.bt-aside-note { max-width: 760px; margin: clamp(28px, 4vw, 44px) 0 0; padding-left: 20px; border-left: 2px solid var(--bt-teal); }
:is(.bt-home, .bt-ed) .bt-aside-note p { font-size: 1rem; }
.bt-ed .bt-night { margin-bottom: 0; }
.bt-ed .bt-night .bt-link, .bt-night a.bt-inline { color: #9fd0f3; }
.bt-ed .bt-night .bt-shot--desktop .bt-shot__frame { box-shadow: 0 28px 64px rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .12); }
.bt-ed .bt-linkrow a { font-size: 1rem; }
.bt-night .bt-band__links { margin-top: 0; max-width: none; border-top-color: rgba(255, 255, 255, .3); }
.bt-night .bt-band__links a { color: #fff; border-bottom-color: rgba(255, 255, 255, .14); }
.bt-night .bt-band__links a small { color: var(--bt-on-night); }
.bt-night .bt-band__links a:hover { color: #9fd0f3; }
/* closing treatments: pages do not all end the same way */
.bt-end { padding: var(--bt-section) 0; }
.bt-end--line .bt-wrap > div { padding-top: clamp(28px, 4vw, 44px); border-top: 2px solid var(--bt-ink); }
:root :is(.bt-home, .bt-ed) .bt-end--line h2, :root .bt-end--line h2 { max-width: 24ch; margin: 0; color: var(--bt-ink); font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
.bt-end--line p { max-width: 58ch; margin: 16px 0 0; color: var(--bt-text); font-size: var(--bt-lead); line-height: 1.6; }
.bt-end .bt-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bt-end--split .bt-wrap > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: clamp(28px, 4vw, 48px); border-radius: var(--bt-r-xl); background: var(--bt-tint); }
.bt-end--split .bt-wrap > div > div:first-child { flex: 1 1 420px; }
:root :is(.bt-home, .bt-ed) .bt-end--split h2, :root .bt-end--split h2 { max-width: 26ch; margin: 0; color: var(--bt-ink); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.bt-end--split p { max-width: 60ch; margin: 12px 0 0; color: var(--bt-text); font-size: 1.0625rem; line-height: 1.6; }
.bt-end--split .bt-page-actions { margin-top: 0; }
@media (max-width: 900px) {
  .bt-rows li { grid-template-columns: 1fr; padding: 20px 0; }
  .bt-steps3 { grid-template-columns: 1fr; }
  .bt-ed-photo .bt-shot__frame { aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) { .bt-end .bt-page-actions .bt-button, .bt-ed-hero .bt-page-actions .bt-button { flex: 1 1 100%; } }

/* ---------------------------------------------------------------- 10. Compositions and motion
   Vocabulary (all transform/opacity, all switched off by prefers-reduced-motion):
   rise      page-load sequence of a hero composition (.bt-compose children)
   reveal    sections fade up when they enter the viewport; list items follow with a stagger (.bt-stg, --i)
   parallax  layered pictures drift a few pixels while scrolling ([data-parallax], --py set by site-enhancements.js)
   crossfade the showcase swaps screens (.bt-showcase), its timer is the progress bar of the active step
   float     small chips breathe (.bt-hub__chip, .bt-compose__chip)
   marquee   one line of channel names (.bt-marquee)
   lift      cards, thumbs and screens rise slightly on hover */
[data-parallax] { translate: 0 var(--py, 0px); will-change: translate; }
@keyframes bt-rise { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes bt-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bt-marquee { to { transform: translateX(-50%); } }
.bt-reveal-on .bt-reveal .bt-stg { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .3, 1); }
.bt-reveal-on .bt-reveal.is-visible .bt-stg { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms + 120ms); }

/* hero composition: desktop screen, overlapping phone, one HTML chip, a tinted shape behind */
.bt-compose { position: relative; isolation: isolate; max-width: 1080px; margin: 0 auto; padding: 0 7% 6% 0; }
.bt-compose__shape { position: absolute; z-index: -1; inset: -7% -5% 10% 22%; border-radius: 48px; background: linear-gradient(135deg, var(--bt-blue-100), var(--bt-teal-50) 60%, var(--bt-orange-50)); transform: rotate(-2deg); }
.bt-compose__phone { position: absolute; right: 0; bottom: 0; width: 21%; }
.bt-compose__phone .bt-shot__frame, .bt-pair .bt-shot__frame { width: 100%; border-width: clamp(4px, .7vw, 9px); border-radius: clamp(18px, 3.2vw, 42px); }
.bt-compose__phone .bt-shot__frame::before, .bt-pair .bt-shot__frame::before { top: 4%; height: 2.4%; min-height: 6px; }
.bt-compose__phone .bt-shot__label, .bt-shot--mini .bt-shot__label, .bt-shot--zoom .bt-shot__label { display: none; }
.bt-compose__chip { position: absolute; left: -3%; top: 16%; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 12px 34px; border: 1px solid var(--bt-line); border-radius: 14px; background: #fff; box-shadow: var(--bt-shadow-2); color: var(--bt-muted); font-size: .8125rem; line-height: 1.35; }
.bt-compose__chip::before { content: ''; position: absolute; left: 14px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--bt-teal); box-shadow: 0 0 0 4px var(--bt-teal-50); }
.bt-compose__chip b { color: var(--bt-ink); font-size: .9375rem; }
/* phone pair */
.bt-pair { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 6%; padding: 4% 8% 12%; }
.bt-pair::before { content: ''; position: absolute; z-index: 0; left: 50%; top: 50%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0) 70%); transform: translate(-50%, -50%); }
.bt-pair > div { position: relative; flex: 0 1 240px; min-width: 0; }
.bt-pair__b { margin-top: 14%; }
/* full screen + a zoomed detail of the same picture */
.bt-zoomed { position: relative; padding: 0 5% 9% 0; }
.bt-zoomed__detail { position: absolute; right: 0; bottom: 0; width: 40%; border: 5px solid #fff; border-radius: 18px; box-shadow: var(--bt-shadow-3); overflow: hidden; }
.bt-zoomed__detail:has(.is-empty) { display: none; }
.bt-shot--zoom .bt-shot__frame { aspect-ratio: 4 / 3; border: 0; border-radius: 0; box-shadow: none; }
.bt-shot--zoom .bt-shot__frame::before { display: none; }
.bt-shot--zoom .bt-shot__frame > img { inset: 0; height: 100%; transform: scale(2.3); transform-origin: var(--zx, 78%) var(--zy, 38%); }
/* two screens stacked at an angle */
.bt-stack { position: relative; padding: 9% 0 0; }
.bt-stack__back { position: absolute; top: 0; right: -4%; width: 76%; opacity: .92; rotate: 2.5deg; }
.bt-stack__back .bt-shot__label { display: none; }
.bt-stack__front { position: relative; width: 88%; }
/* hub: one screen, the channels around it */
.bt-hub { position: relative; padding: 9% 4%; }
.bt-hub__chip { position: absolute; left: var(--x); top: var(--y); z-index: 2; padding: 8px 14px; border-radius: var(--bt-r-pill); background: #fff; color: var(--bt-ink); font-size: .875rem; font-weight: 700; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); white-space: nowrap; }
.bt-hub__chip::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c, var(--bt-teal)); }
/* marquee */
.bt-marquee { overflow: hidden; padding: 18px 0; border-top: 1px solid var(--bt-line); border-bottom: 1px solid var(--bt-line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.bt-marquee__track { display: flex; gap: 56px; width: max-content; color: var(--bt-ink); font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.bt-marquee__track span::after { content: '·'; margin-left: 56px; color: var(--bt-orange); }
/* vignette: a concrete moment */
.bt-vignette { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; padding: calc(var(--bt-section) * .6) 0; }
.bt-vignette time { color: var(--bt-blue); font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: .95; letter-spacing: -.05em; font-weight: 300; font-variant-numeric: tabular-nums; }
:is(.bt-home, .bt-ed) .bt-vignette p { max-width: 46ch; color: var(--bt-ink); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); line-height: 1.35; letter-spacing: -.015em; font-weight: 500; }
/* sans / avec */
.bt-versus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(28px, 4vw, 44px); border-radius: var(--bt-r-lg); overflow: hidden; border: 1px solid var(--bt-line); }
.bt-versus__col { padding: clamp(22px, 3vw, 40px); background: var(--bt-tint); }
.bt-versus__col--with { background: var(--bt-night); color: #fff; }
.bt-versus h3 { margin: 0 0 14px; color: var(--bt-muted); font-size: 1rem; font-weight: 700; }
.bt-versus__col--with h3 { color: #9fd0f3; }
.bt-versus ul { margin: 0; padding: 0; list-style: none; }
.bt-versus li { padding: 14px 0; border-top: 1px solid var(--bt-line-strong); color: var(--bt-text); font-size: 1.0625rem; line-height: 1.5; }
.bt-versus__col--with li { border-top-color: rgba(255, 255, 255, .16); color: #fff; }
/* showcase: "une journée avec BONTABLE" */
.bt-showcase { padding: var(--bt-section) 0; background: var(--bt-tint); }
.bt-showcase__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.bt-showcase__toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--bt-line-strong); border-radius: var(--bt-r-pill); background: #fff; color: var(--bt-ink); font: 600 .875rem/1 var(--bt-font); cursor: pointer; }
.bt-showcase__body { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(28px, 4vw, 48px); }
.bt-showcase__steps { margin: 0; padding: 0; list-style: none; }
.bt-showcase__steps button { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 2px 12px; width: 100%; padding: 16px 0 16px 0; border: 0; border-top: 1px solid var(--bt-line-strong); background: none; color: var(--bt-muted); font: inherit; text-align: left; cursor: pointer; transition: color .2s ease; }
.bt-showcase__steps time { grid-row: 1 / 3; font-size: 1.125rem; font-weight: 300; font-variant-numeric: tabular-nums; color: inherit; }
.bt-showcase__steps b { color: var(--bt-text); font-size: 1.125rem; letter-spacing: -.01em; transition: color .2s ease; }
.bt-showcase__steps span { display: none; font-size: .9688rem; line-height: 1.5; color: var(--bt-text); }
.bt-showcase__steps button[aria-selected="true"] { color: var(--bt-blue); }
.bt-showcase__steps button[aria-selected="true"] b { color: var(--bt-ink); }
.bt-showcase__steps button[aria-selected="true"] span { display: block; }
.bt-showcase__steps button::after { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--bt-blue); transform: scaleX(0); transform-origin: left; }
.bt-showcase__steps button[aria-selected="true"]::after { animation: bt-progress 6s linear forwards; }
.bt-showcase.is-paused .bt-showcase__steps button::after { animation-play-state: paused; }
.bt-showcase__frames { display: grid; }
.bt-showcase__frame { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(.985); transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }
.bt-showcase__frame.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* strip of small screens */
.bt-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: clamp(36px, 5vw, 64px) auto 0; }
.bt-strip__item { display: block; color: var(--bt-ink); font-size: .9375rem; font-weight: 700; text-decoration: none; text-align: left; transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
.bt-strip__item:nth-child(even) { margin-top: 22px; }
.bt-strip__item span { display: block; margin-top: 12px; }
.bt-strip__item span::after { content: ' →'; color: var(--bt-blue); }
.bt-strip__item:hover { transform: translateY(-6px); }
.bt-shot--mini .bt-shot__frame { border-radius: 10px; box-shadow: var(--bt-shadow-2); }
.bt-shot--mini .bt-shot__ph { padding: 0; }
/* lift on the pictures of the bands */
.bt-band__media .bt-shot__frame, .bt-mod-media .bt-shot__frame { transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease; }
.bt-band__media:hover .bt-shot--desktop:not(.bt-shot--zoom) .bt-shot__frame, .bt-mod-media:hover .bt-shot__frame { transform: translateY(-4px); }
.bt-band__links a::after { content: '→'; order: 3; margin-left: 4px; color: var(--bt-blue); opacity: 0; transform: translateX(-6px); transition: opacity .18s ease, transform .18s ease; }
.bt-band__links a:hover::after { opacity: 1; transform: none; }
.bt-band__links a small { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .bt-compose__main { animation: bt-rise .7s cubic-bezier(.2, .7, .3, 1) both; }
  .bt-compose__phone { animation: bt-rise .7s cubic-bezier(.2, .7, .3, 1) .18s both; }
  .bt-compose__chip { animation: bt-rise .6s cubic-bezier(.2, .7, .3, 1) .5s both, bt-float 6s ease-in-out 1.2s infinite; }
  .bt-ed-hero h1, .bt-home-hero h1 { animation: bt-rise .6s cubic-bezier(.2, .7, .3, 1) both; }
  .bt-ed-hero p, .bt-ed-hero .bt-page-actions { animation: bt-rise .6s cubic-bezier(.2, .7, .3, 1) .12s both; }
  .bt-hub__chip { animation: bt-float 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .bt-marquee__track { animation: bt-marquee 38s linear infinite; }
  .bt-marquee:hover .bt-marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { translate: none; }
  .bt-marquee__track { flex-wrap: wrap; width: auto; gap: 8px 32px; white-space: normal; }
  .bt-marquee__track span[aria-hidden] { display: none; }
  .bt-marquee__track span::after { margin-left: 32px; }
  .bt-showcase__toggle { display: none; }
  .bt-showcase__steps button::after { animation: none !important; }
  .bt-showcase__steps button[aria-selected="true"]::after { transform: scaleX(1); }
}
@media (max-width: 900px) {
  .bt-showcase__body, .bt-versus, .bt-vignette { grid-template-columns: 1fr; }
  .bt-strip { grid-template-columns: repeat(4, 62vw); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .bt-strip__item { scroll-snap-align: start; }
  .bt-strip__item:nth-child(even) { margin-top: 0; }
  .bt-compose { padding-right: 5%; }
  .bt-compose__chip { display: none; }
  .bt-compose__phone { width: 24%; }
  .bt-hub__chip { font-size: .75rem; padding: 6px 10px; }
  [data-parallax] { translate: none; }
}