/* BriseStream site. Colours, type and motif follow the brand charter v1.0 (November 2026):
   Encre on light grounds, Blanc on Nuit, Stream for links and buttons on white, the light variants
   on Nuit, the flow motif in Flux on Nuit only and never behind running text.
   Inter is loaded from Google Fonts with its opsz axis (14..32), so large titles take the display cut.

   Grounds
     body / .nuit            dark ground (Nuit): --fg Blanc, --muted Gris-nuit, links Azur-clair
     .light                  light band (Brume or Blanc): --fg Encre, --muted Gris, links Stream
     Components read --fg --muted --line --surface --link, so the same markup works on both.
   Components (all pages)
     .top .m-menu .foot      header with its no-JS mobile menu, footer
     .btn .btn.ghost         pill buttons
     .sec .sec-head .lead    section rhythm
     .phero                  inner-page hero (copy left, picture right)
     .split .figure          copy and picture side by side
     .rows                   ruled rows (term + description), the spec-sheet rhythm
     .tablewrap table.cmp    comparison tables
     .steps                  numbered steps (numbers only where the order matters)
     .faq                    details/summary list
     .note                   honest-status note
     .cta-band               closing call to action
   Home-only parts (hero video frame, pipeline, targets, failure messages, pack rows) sit at the end. */
/* Fonts: Inter, latin subset, with its optical-size and weight axes, served from this site. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin-opsz.woff2') format('woff2'); }

/* Language hint (English pages, French browser): one polite bar, never a redirect. */
.lang-hint { position: fixed; z-index: 45; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: calc(100% - 32px); padding: 12px 14px 12px 18px; border-radius: 14px; background: #102236f2; color: #fff; border: 1px solid #ffffff22; box-shadow: 0 20px 50px -18px #000; font-size: 15px; }
.lang-hint a { color: var(--bs-brise-clair); font-weight: 600; }
.lang-hint button { background: none; border: 0; color: var(--gris-nuit); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.lang-hint button:hover { color: #fff; }

:root {
  --bs-brise: #19C3B1; --bs-azur: #1F9DEB; --bs-stream: #2F62F2;
  --bs-encre: #0E1E2E; --bs-nuit: #0B1726; --bs-brume: #EEF3F4; --bs-blanc: #FFFFFF;
  --bs-brise-clair: #2DD4BF; --bs-azur-clair: #38A9F5; --bs-stream-clair: #6A86FF; --bs-flux: #1B3550;
  --gris: #4A5B6E; --gris-nuit: #A9B8C9;
  --panneau: #102236; --trait: #E1E8EC; --trait-nuit: #1F3A57;
  --app-bg: #0B1726; --app-surface: #112236; --app-raised: #172C44; --app-pressed: #1B3550;
  --app-line: #1B3550; --app-line-strong: #2A4766; --app-muted: #A9B8C8;
  --good: #3DDC97; --warning: #FFB84D; --critical: #FF7A7A; --rec: #FF5A5F;
  --r: 16px; --r-s: 10px;
  --titres: 'Inter', system-ui, sans-serif; --texte: 'Inter', system-ui, sans-serif;
  --page: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* dark ground tokens (default) */
  --fg: #fff; --muted: var(--gris-nuit); --faint: #8FA3B8; --line: #ffffff14; --line-strong: #ffffff26;
  --surface: #102236; --link: var(--bs-azur-clair); --accent: var(--bs-brise-clair); --ghost-border: #36506D;
}
.light {
  --fg: var(--bs-encre); --muted: var(--gris); --faint: #5B6B7E; --line: var(--trait); --line-strong: #CBD6DC;
  --surface: #fff; --link: var(--bs-stream); --accent: var(--bs-stream); --ghost-border: #C9D5DC;
  background: var(--bs-brume); color: var(--fg);
}
.light.white { background: #fff; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #4A5B6E var(--bs-nuit); caret-color: var(--bs-stream); scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font: 400 17px/1.6 var(--texte); color: var(--fg); background: var(--bs-nuit); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
::selection { background: #2DD4BF4D; color: #fff; }
.light ::selection { background: #2F62F233; color: var(--bs-encre); }
:focus-visible { outline: 3px solid var(--bs-brise-clair); outline-offset: 3px; border-radius: 4px; }
.light :focus-visible { outline-color: var(--bs-stream); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 60; background: #fff; color: var(--bs-encre); padding: 10px 16px; border-radius: var(--r-s); }
.skip:focus { top: 12px; }
.wrap { width: min(var(--page), 100% - 48px); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { font-family: var(--titres); font-weight: 600; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; letter-spacing: -0.03em; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.012em; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 62ch; }
.prose { max-width: 66ch; color: var(--muted); }
.prose p + p { margin-top: 1em; }
.prose strong, .prose b { color: var(--fg); font-weight: 600; }
.small { font-size: 14px; color: var(--faint); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; position: relative; overflow: hidden;
  border-radius: 999px; border: 1px solid transparent; font: 600 16px/1 var(--texte); text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--bs-stream); color: #fff; transition: background .15s, transform .15s, border-color .15s; }
.btn:hover { background: #2453d6; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--ghost-border); }
.btn.ghost:hover { border-color: var(--fg); background: transparent; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .62; cursor: not-allowed; transform: none; }
.btn:not(.ghost):not(:disabled)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #ffffff40 50%, transparent 65%); transform: translateX(-120%); transition: transform .6s; }
.btn:not(.ghost):not(:disabled):hover::after { transform: translateX(120%); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn.sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.soon { font: 600 11px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: #ffffff14; }
.light .soon { background: #0E1E2E14; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); }
.textlink:hover { text-decoration-color: currentColor; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font: 500 14px/1 var(--texte); border: 1px solid var(--trait-nuit); color: var(--gris-nuit); background: #0B1726b3; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-brise-clair); box-shadow: 0 0 0 4px #2DD4BF26; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { box-shadow: 0 0 0 7px #2DD4BF00; } }

/* Header */
.top { position: sticky; top: 0; z-index: 40; background: #0B1726e6; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid #ffffff14; color: #fff; }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.top .brand { flex: none; }
.top .logo { width: 164px; padding: 4px 0; }
.top nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; }
.top nav a { color: var(--gris-nuit); text-decoration: none; font: 500 15px/1 var(--texte); padding: 8px 0; border-bottom: 2px solid transparent; }
.top nav a:hover { color: #fff; }
.top nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--bs-brise-clair); }
.top .tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid #36506D; color: var(--gris-nuit); border-radius: 999px; height: 34px; min-width: 44px; padding: 0 10px; font: 600 13px/1 var(--texte); letter-spacing: .06em; text-decoration: none; }
.lang:hover { color: #fff; border-color: #fff; }
.gh-link { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--gris-nuit); }
.gh-link:hover { color: #fff; }
.gh-link svg { width: 22px; height: 22px; }
.m-menu { display: none; }
.m-menu summary { list-style: none; cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #36506D; color: #fff; }
.m-menu summary::-webkit-details-marker { display: none; }
.m-menu summary svg { width: 20px; height: 20px; }
.m-menu .x { display: none; }
.m-menu[open] .x { display: block; } .m-menu[open] .b { display: none; }
.m-panel { position: absolute; left: 0; right: 0; top: 72px; background: var(--bs-nuit); border-bottom: 1px solid #ffffff1f; padding: 8px 0 28px; max-height: calc(100vh - 72px); overflow: auto; box-shadow: 0 40px 60px -30px #000; }
.m-panel a { display: block; padding: 14px 0; color: #fff; text-decoration: none; font: 500 19px/1.2 var(--texte); border-bottom: 1px solid #ffffff12; }
.m-panel a[aria-current="page"] { color: var(--bs-brise-clair); }
.m-panel .sub { padding-left: 16px; font-size: 16px; color: var(--gris-nuit); }
@media (max-width: 1120px) {
  .top nav { display: none; }
  .m-menu { display: block; }
  .top .logo { width: 140px; }
}
@media (max-width: 420px) { .top .wrap { gap: 10px; } .top .tools { gap: 8px; } .top .btn.sm { padding: 0 14px; } .top .gh-link { display: none; } .top .logo { width: 124px; } }

/* Footer */
.foot { position: relative; padding: 72px 0 40px; background: var(--bs-nuit); color: #fff; }
.foot::before { content: ""; position: absolute; inset: -1px 0 auto; height: 3px; background: linear-gradient(90deg, var(--bs-brise-clair) 0 33.34%, var(--bs-azur-clair) 0 66.67%, var(--bs-stream-clair) 0); }
.foot .cols { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 36px; }
.foot .logo { width: 188px; margin-bottom: 18px; }
.foot .fth { margin: 0 0 16px; font: 600 14px/1 var(--texte); color: #fff; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot a { color: var(--gris-nuit); text-decoration: none; font-size: 15px; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot .about { color: var(--gris-nuit); font-size: 15px; max-width: 300px; }
.foot .status { display: inline-flex; margin-top: 18px; }
.foot .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid #ffffff14; color: #8FA3B8; font-size: 14px; }
.foot .base a { color: #8FA3B8; font-size: 14px; }
@media (max-width: 960px) { .foot .cols { grid-template-columns: 1fr 1fr 1fr; } .foot .cols > :first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

/* Flow motif */
.flux { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.flux path { fill: none; stroke: var(--bs-flux); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.flow-mark { position: relative; width: var(--mw, 120px); aspect-ratio: 162 / 184; margin-inline: auto; z-index: 1; }
.flow-mark > img { position: relative; width: 100%; height: 100%; }
.flow-mark .flux { display: none; }
.grid-bg { position: relative; isolation: isolate; }
.grid-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px); background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 65% 70% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 65% 70% at 50% 40%, #000 20%, transparent 75%); }

/* Sections */
.sec { position: relative; padding: clamp(72px, 9vw, 120px) 0; isolation: isolate; }
.sec.tight { padding: clamp(48px, 6vw, 80px) 0; }
.sec-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-head .lead { color: var(--muted); }
.stack { display: grid; gap: 20px; }

/* Inner page hero */
.phero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 88px); background: var(--bs-nuit); }
.phero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.phero.solo .wrap { grid-template-columns: minmax(0, 860px); }
.phero .copy { display: grid; gap: 22px; justify-items: start; position: relative; z-index: 2; }
.phero h1 span { color: var(--bs-brise-clair); }
.phero .lead { color: var(--gris-nuit); }
.phero .crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 4px; list-style: none; font-size: 14px; color: var(--faint); }
.phero .crumbs li + li::before { content: "/"; margin-right: 6px; color: #4A5B6E; }
.phero .crumbs a { color: var(--gris-nuit); text-decoration: none; }
.phero .crumbs a:hover { color: #fff; text-decoration: underline; }
.phero .vis { position: relative; z-index: 1; }
.phero .vis::before { content: ""; position: absolute; inset: 6% 2% 4%; z-index: -1; filter: blur(60px); background: radial-gradient(45% 55% at 28% 45%, #2F62F260, transparent 70%), radial-gradient(40% 50% at 74% 55%, #19C3B14a, transparent 70%); }
.phero .mark { position: absolute; right: -40px; top: 50%; translate: 0 -50%; width: 340px; aspect-ratio: 162/184; z-index: 0; opacity: .0; }
@media (max-width: 960px) { .phero .wrap { grid-template-columns: 1fr; } .phero .vis { order: 2; } }

/* Pictures */
.shot { margin: 0; }
.shot img, .shot video { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px #ffffff1a, 0 40px 90px -30px #000; background: var(--app-bg); }
.light .shot img { box-shadow: 0 0 0 1px #0E1E2E1a, 0 36px 70px -30px #0E1E2E80; }
.shot figcaption { margin-top: 14px; font-size: 14px; color: var(--faint); max-width: 62ch; }
.crop { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px #ffffff1a, 0 40px 90px -30px #000; background: var(--app-bg); aspect-ratio: var(--ar, 16/10); }
.light .crop { box-shadow: 0 0 0 1px #0E1E2E1a, 0 36px 70px -30px #0E1E2E80; }
.crop img { position: absolute; width: var(--zoom, 100%); max-width: none; height: auto; left: var(--x, 0); top: var(--y, 0); }

/* Split */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split.rev > :first-child { order: 2; }
.split .copy { display: grid; gap: 18px; justify-items: start; }
.split.top-aligned { align-items: start; }
@media (max-width: 960px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } }
.checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; color: var(--muted); }
.checks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
.checks li b { color: var(--fg); font-weight: 600; }

/* Ruled rows: the spec-sheet rhythm */
.rows { margin: 0; border-top: 2px solid var(--fg); }
.rows > div { display: grid; grid-template-columns: minmax(150px, 17em) 1fr; gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rows dt { font: 600 18px/1.35 var(--titres); letter-spacing: -0.01em; }
.rows dd { margin: 0; color: var(--muted); }
.rows dd b { color: var(--fg); font-weight: 600; }
.rows.cols2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; border-top: 0; }
.rows.cols2 > div { border-top: 1px solid var(--line-strong); grid-template-columns: 1fr; gap: 6px; }
.rows .tagm { display: inline-block; margin-left: 8px; font: 600 11px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; border: 1px dashed var(--faint); color: var(--faint); vertical-align: 2px; }
@media (max-width: 760px) { .rows > div { grid-template-columns: 1fr; gap: 4px; } .rows.cols2 { grid-template-columns: 1fr; } }

/* Tables */
.tablewrap { overflow-x: auto; border-radius: var(--r-s); -webkit-overflow-scrolling: touch; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 620px; }
table.cmp caption { text-align: left; color: var(--faint); font-size: 14px; padding-bottom: 12px; caption-side: bottom; padding-top: 12px; }
table.cmp th, table.cmp td { text-align: left; padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { font: 600 13px/1.2 var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--fg); }
table.cmp tbody th { font-weight: 600; color: var(--fg); width: 24%; }
table.cmp td { color: var(--muted); }
table.cmp td b { color: var(--fg); font-weight: 600; }
table.cmp td.ok::before, table.cmp td.part::before, table.cmp td.mod::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: 0; }
table.cmp td.ok::before { background: var(--good); } .light table.cmp td.ok::before { background: #14946A; }
table.cmp td.part::before { background: var(--warning); } .light table.cmp td.part::before { background: #C77700; }
table.cmp td.mod::before { background: transparent; border: 2px dashed var(--faint); }
table.cmp .num { white-space: nowrap; }

/* Steps */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 0; border-top: 2px solid var(--fg); }
.steps li { counter-increment: s; padding: 24px 28px 8px 0; display: grid; align-content: start; gap: 8px; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 600 14px/1 var(--titres); color: var(--accent); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 20px; }
.steps p { color: var(--muted); font-size: 16px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .steps li, .steps li + li { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* Notes */
.note { display: grid; gap: 8px; padding: 22px 26px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); max-width: 760px; }
.light .note { background: #fff; }
.note b { font-weight: 600; color: var(--fg); }
.note p { color: var(--muted); font-size: 16px; }

/* Two-up lists with a heading each (no icon cards) */
.pairs { display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 40px clamp(32px, 5vw, 72px); }
.pairs > div { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--fg); }
.pairs p { color: var(--muted); }
.pairs h3 { font-size: 21px; }
@media (max-width: 860px) { .pairs { grid-template-columns: 1fr; gap: 32px; } }

/* Link lists to sibling pages */
.nextlinks { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); border-top: 1px solid var(--line-strong); }
.nextlinks a { display: grid; gap: 6px; padding: 24px 24px 24px 0; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); }
.nextlinks a + a { padding-left: 24px; border-left: 1px solid var(--line); }
.nextlinks b { font: 600 19px/1.3 var(--titres); letter-spacing: -0.01em; }
.nextlinks span { color: var(--muted); font-size: 15px; }
.nextlinks b::after { content: " →"; color: var(--accent); transition: margin .2s; }
.nextlinks a:hover b::after { margin-left: 6px; }
@media (max-width: 860px) { .nextlinks { grid-template-columns: 1fr; } .nextlinks a, .nextlinks a + a { padding: 20px 0; border-left: 0; } }

/* Feature index (hub) */
.fx { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 5vw, 72px); }
.fx a.item { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 28px 0; border-top: 1px solid var(--line-strong); color: var(--fg); text-decoration: none; }
.fx a.item h3 { font-size: 24px; letter-spacing: -0.02em; }
.fx a.item p { color: var(--muted); max-width: 46ch; }
.fx a.item .more { color: var(--link); font-weight: 600; font-size: 15px; }
.fx a.item:hover h3 { color: var(--link); }
@media (max-width: 760px) { .fx { grid-template-columns: 1fr; } }

/* Chips list */
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.chips li { list-style: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-strong); font-size: 15px; color: var(--fg); }
.chips .mod { color: var(--faint); border-style: dashed; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font: 600 18px/1.35 var(--titres); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 1; color: var(--accent); transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; color: var(--muted); max-width: 66ch; }
.faq details > div p + p { margin-top: .8em; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.7fr; gap: 64px; align-items: start; }
.faq-layout .head { display: grid; gap: 18px; justify-items: start; position: sticky; top: 100px; }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group > h2 { font-size: 26px; margin-bottom: 14px; letter-spacing: -0.02em; }
@media (max-width: 860px) { .faq-layout { grid-template-columns: 1fr; gap: 32px; } .faq-layout .head { position: static; } }

/* CTA band */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding: clamp(72px, 9vw, 120px) 0; background: var(--bs-nuit); border-top: 1px solid #ffffff12; }
.cta-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.cta-band h2 { font-size: clamp(32px, 4.6vw, 58px); max-width: 16em; margin-bottom: 14px; }
.cta-band .lead { margin-bottom: 28px; }
.cta-band .flow-mark { --mw: clamp(150px, 16vw, 230px); margin: 0; }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: 1fr; } .cta-band .flow-mark { display: none; } }
@media (min-width: 1100px) { .cta-band .flow-mark .flux { display: block; inset: auto; right: 18%; top: -110%; height: 320%; width: min(44vw, 700px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 62%); mask-image: linear-gradient(90deg, transparent, #000 62%); } }

/* Long-form text (legal) */
.legal { padding: 72px 0 112px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.1; margin: 14px 0 20px; }
.legal h2 { font-size: 24px; line-height: 1.3; letter-spacing: -0.015em; margin: 48px 0 12px; }
.legal p, .legal li { color: var(--bs-encre); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 22px; margin: 12px 0 0; display: grid; gap: 6px; }
.legal .todo { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-s); background: #FFF4E5; border: 1px solid #F3C98B; color: #6B3D00; font-size: 15px; }
.legal mark { background: #FFF4E5; color: #6B3D00; padding: 0 4px; border-radius: 4px; }
.legal a { color: var(--bs-stream); }

/* Reveal: only where JS runs, and only on a few blocks */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s var(--ease); }
.js .reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* Placeholder marker (links and values the owner still has to decide) */
[data-placeholder] { }

/* ===== Download page ===== */
.dl-card { display: grid; gap: 22px; padding: 32px; border-radius: 20px; background: linear-gradient(160deg, #102236, #0B1726); border: 1px solid #ffffff1a; box-shadow: 0 40px 80px -40px #000; position: relative; }
.dl-card .row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dl-card .os { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #2F62F233; color: var(--bs-stream-clair); flex: none; }
.dl-card .os svg { width: 24px; height: 24px; }
.dl-card h2 { font-size: 26px; letter-spacing: -0.02em; }
.dl-card .meta { color: var(--gris-nuit); font-size: 15px; }
.dl-card hr { border: 0; border-top: 1px solid #ffffff14; margin: 0; width: 100%; }
.dl-card .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dl-card .two a, .dl-card .two div { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid #ffffff1a; color: #fff; text-decoration: none; }
.dl-card .two b { font-weight: 600; font-size: 15px; }
.dl-card .two span { color: var(--gris-nuit); font-size: 14px; }
@media (max-width: 520px) { .dl-card { padding: 22px; } .dl-card .two { grid-template-columns: 1fr; } }
.code { font: 500 14px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; padding: 14px 16px; border-radius: 10px; background: #060E18; color: #DCE5EE; border: 1px solid #ffffff14; overflow-x: auto; white-space: pre; }
.light .code { background: #0B1726; }

/* ===== Pack previews (packs page and home) ===== */
.pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.pack-grid img { width: 100%; height: auto; aspect-ratio: 16/9; border-radius: 10px; box-shadow: 0 0 0 1px #ffffff14, 0 18px 40px -20px #000; background: #060E18; }
.light .pack-grid img { box-shadow: 0 0 0 1px #0E1E2E1a, 0 18px 36px -22px #0E1E2E80; }
.pack-grid figcaption, .pack-grid span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 960px) { .pack-grid { grid-template-columns: repeat(2, 1fr); } }
.price { font: 700 22px/1 var(--titres); color: var(--fg); padding: 8px 14px; border-radius: 12px; background: #ffffff0d; border: 1px solid #ffffff1a; display: inline-block; }
.light .price { background: #fff; border-color: var(--line-strong); }

/* ===== Home ===== */
.hero { position: relative; padding: 64px 0 0; overflow: hidden; isolation: isolate; background: var(--bs-nuit); }
.hero-copy { display: grid; justify-items: center; text-align: center; gap: 22px; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(48px, 8vw, 104px); line-height: .98; letter-spacing: -0.04em; font-weight: 700; }
.hero h1 span { color: var(--bs-brise-clair); }
.hero .lead { max-width: 600px; }
.hero .ctas { justify-content: center; }
.hero .reassure { color: var(--faint); font-size: 14px; }
.stage { position: relative; margin-top: 56px; padding-bottom: 64px; }
.stage::before { content: ""; position: absolute; inset: 4% 4% 10%; z-index: -1; filter: blur(60px);
  background: radial-gradient(45% 55% at 28% 45%, #2F62F270, transparent 70%), radial-gradient(40% 50% at 74% 55%, #19C3B150, transparent 70%), radial-gradient(30% 30% at 50% 100%, #1F9DEB40, transparent 70%); }
.frame { --tilt: 0deg; position: relative; z-index: 1; transform: perspective(2000px) rotateX(var(--tilt)); transform-origin: 50% 0; }
.frame-glow { position: absolute; inset: -1px; border-radius: 15px; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(140deg, #6A86FF80, #ffffff10 30%, #ffffff08 70%, #2DD4BF80);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.app { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--app-bg); border-radius: 14px; overflow: hidden; box-shadow: 0 60px 140px -30px #000000c0, 0 0 0 1px #00000060; }
.float { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: #102236e6; border: 1px solid #ffffff1a; box-shadow: 0 20px 50px -18px #000; font: 500 14px/1.25 var(--texte); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: bob 7s ease-in-out infinite; }
.float small { display: block; color: var(--gris-nuit); font-size: 12px; }
.f1 { right: -52px; top: 58%; } .f2 { left: calc(56% - 130px); top: -30px; animation-delay: -2.5s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.under { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 88px; color: #7F93A8; font-size: 13px; }
.play { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid #36506D; color: var(--gris-nuit); border-radius: 999px; height: 34px; padding: 0 14px; font: 500 13px/1 var(--texte); cursor: pointer; }
.play:hover { color: #fff; border-color: #fff; }
.play svg { width: 12px; height: 12px; }
.play .i-play, .paused .play .i-pause { display: none; }
.paused .play .i-play { display: block; }
.paused .float, .paused .pill i { animation-play-state: paused; }
@media (min-width: 1100px) {
  .flow-mark .flux { display: block; inset: auto; right: 19%; top: -110%; height: 320%; width: min(46vw, 760px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 62%); mask-image: linear-gradient(90deg, transparent, #000 62%); }
  .hero-mark { position: absolute; margin: 0; top: 96px; right: max(24px, calc((100% - var(--page)) / 2 - 20px)); --mw: clamp(170px, 16vw, 236px); }
}
.hero-mark { margin-top: 56px; --mw: 96px; }

.facts { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; border-block: 1px solid #ffffff12; }
.facts li { list-style: none; padding: 26px 22px; border-left: 1px solid #ffffff12; font-size: 15px; line-height: 1.4; color: var(--gris-nuit); }
.facts li:first-child { border-left: 0; }
.facts b { display: block; color: #fff; font-weight: 600; margin-bottom: 4px; }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 0; padding: 72px 0 56px; list-style: none; }
.three li { --c: var(--bs-brise-clair); display: grid; align-content: start; gap: 8px; border-top: 2px solid var(--c); padding-top: 22px; }
.three li.c-azur { --c: var(--bs-azur-clair); } .three li.c-stream { --c: var(--bs-stream-clair); }
.three b { font: 600 clamp(40px, 4.6vw, 60px)/1 var(--titres); letter-spacing: -0.04em; color: #fff; }
.three h2 { font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c); margin-top: 6px; }
.three p { color: var(--gris-nuit); font-size: 16px; line-height: 1.5; max-width: 300px; }
.three a { width: fit-content; margin-top: 6px; font-size: 15px; font-weight: 500; color: #fff; text-decoration-color: var(--c); text-decoration-thickness: 2px; }
.three a:hover { color: var(--c); }

.pipe { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.wire { position: absolute; left: 10%; right: 10%; top: 38px; height: 2px; background: linear-gradient(90deg, #2DD4BF55, #6A86FF55); overflow: hidden; }
.wire::after { content: ""; position: absolute; inset: 0; width: 22%; background: linear-gradient(90deg, transparent, #2DD4BF, #fff, transparent); animation: travel 2.6s linear infinite; }
@keyframes travel { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
.station { position: relative; display: grid; align-content: start; justify-items: center; text-align: center; gap: 12px; }
.station .ic { width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(160deg, #172C44, #0D1A2B); border: 1px solid #2A4766; box-shadow: 0 0 0 6px var(--bs-nuit), 0 18px 40px -16px #000; color: #fff; }
.station .ic svg { width: 32px; height: 32px; }
.station:nth-child(5) .ic { color: var(--bs-brise-clair); border-color: #2DD4BF88; box-shadow: 0 0 0 6px var(--bs-nuit), 0 0 40px -6px #2DD4BF77; }
.station h3 { font-size: 18px; }
.station p { font-size: 14px; color: var(--gris-nuit); max-width: 190px; line-height: 1.45; }

.goals { margin-top: 88px; display: grid; grid-template-columns: 1.1fr 1.5fr; gap: 56px; align-items: center; }
.size { padding: 32px; border-radius: 20px; background: linear-gradient(160deg, #102236, #0B1726); border: 1px solid #ffffff12; }
.size h3, .size .t { font-size: 15px; font-weight: 500; color: var(--gris-nuit); letter-spacing: 0; margin-bottom: 26px; }
.bar { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px 16px; margin-top: 18px; }
.bar span { font-size: 14px; color: var(--gris-nuit); }
.bar div { height: 46px; border-radius: 10px; display: flex; align-items: center; padding: 0 14px; font: 700 20px/1 var(--texte); font-variant-numeric: tabular-nums; }
.bar .obs { background: repeating-linear-gradient(135deg, #1F3A57 0 8px, #1A3150 8px 16px); color: var(--gris-nuit); width: 100%; }
.bar .us { width: 8%; min-width: 128px; background: linear-gradient(90deg, #19C3B1, #1F9DEB); color: var(--bs-nuit); box-shadow: 0 0 36px -6px #2DD4BF99; white-space: nowrap; }
.size .foot-note { margin-top: 20px; font-size: 13px; color: #7F93A8; }
.nums { display: grid; grid-template-columns: 1fr 1fr; }
.nums div { padding: 26px 28px; border-left: 1px solid #ffffff14; border-top: 1px solid #ffffff14; }
.nums div:nth-child(-n+2) { border-top: 0; } .nums div:nth-child(odd) { border-left: 0; }
.nums b { display: block; font: 700 clamp(44px, 5vw, 64px)/1 var(--titres); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-bottom: 10px; color: #fff; }
.nums span { color: var(--gris-nuit); font-size: 15px; line-height: 1.45; display: block; }
.nums b small { font-size: .4em; letter-spacing: -0.01em; margin-left: .3em; }
.goal-tag { display: inline-flex; align-items: center; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; border: 1px solid #2DD4BF55; color: var(--bs-brise-clair); font: 600 12px/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; }

.chip { display: inline-flex; align-items: center; gap: .45em; height: 2.1em; padding: 0 .8em; border-radius: 999px; background: var(--app-surface); border: 1px solid var(--app-line); color: var(--app-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dot { width: .6em; height: .6em; border-radius: 50%; background: var(--good); flex: none; }
.fails { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fail { position: relative; padding: 28px; border-radius: 20px; background: linear-gradient(160deg, #102236, #0B1726); border: 1px solid #ffffff12; display: grid; gap: 22px; align-content: start; }
.fail h3 { font-size: 22px; }
.ui { font: 500 14px/1.4 var(--texte); display: grid; gap: 10px; color: #E6EDF4; }
.ui .row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 10px; background: #0B1726; border: 1px solid var(--app-line); }
.ui .row span:nth-child(2) { flex: 1; }
.ui .row .chip { font-size: 12px; height: 26px; }
.ui .row.warn { border-color: #FFB84D66; background: #FFB84D0d; }
.ui .row.warn .dot { background: var(--warning); box-shadow: 0 0 8px var(--warning); }
.ui .row.warn em { font-style: normal; color: var(--warning); font-weight: 600; font-size: 13px; }
.toast { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--app-raised); border: 1px solid var(--app-line-strong); box-shadow: 0 16px 40px -18px #000; }
.toast svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.toast.w svg { color: var(--warning); } .toast.g svg { color: var(--good); }
.rec-file { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: #0B1726; border: 1px solid var(--app-line); }
.rec-file .wave { flex: 1; height: 34px; width: auto; } .rec-file .rest { flex: .45; height: 34px; width: auto; }
.rec-file svg { width: 22px; height: 22px; color: #8FA3B8; flex: none; }
.chips-note { text-align: center; margin-top: 18px; color: #7F93A8; font-size: 14px; }

.marquee { display: grid; gap: 16px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.track { display: flex; gap: 16px; width: max-content; animation: drift 80s linear infinite; }
.track.rev { animation-direction: reverse; animation-duration: 95s; }
.marquee:hover .track, .paused-packs .track { animation-play-state: paused; }
.packs-ctl { display: flex; justify-content: flex-end; margin-top: 14px; }
.packs-ctl .play { width: 34px; padding: 0; justify-content: center; }
.paused-packs .play .i-pause { display: none; } .paused-packs .play .i-play { display: block; }
@keyframes drift { to { transform: translateX(calc(-50% - 8px)); } }
.track img { width: 288px; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; box-shadow: 0 0 0 1px #ffffff14, 0 18px 40px -20px #000; flex: none; }
.studio-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 48px; font-size: 18px; color: var(--gris-nuit); }
.studio-line b { color: #fff; font-weight: 600; }

@media (max-width: 1100px) {
  .float { display: none; }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .facts li:nth-child(4) { border-left: 0; } .facts li:nth-child(n+4) { border-top: 1px solid #ffffff12; }
}
@media (max-width: 860px) {
  .pipe { grid-template-columns: 1fr; gap: 28px; justify-items: start; }
  .wire { left: 38px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(#2DD4BF55, #6A86FF55); }
  .wire::after { width: 100%; height: 22%; background: linear-gradient(transparent, #2DD4BF, #fff, transparent); animation-name: travel-y; }
  @keyframes travel-y { from { transform: translateY(-100%); } to { transform: translateY(460%); } }
  .station { grid-template-columns: 78px 1fr; justify-items: start; text-align: left; column-gap: 20px; row-gap: 4px; }
  .station .ic { grid-row: span 2; } .station p { max-width: none; }
  .goals, .fails { grid-template-columns: 1fr; gap: 40px; }
  .three { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li { border-left: 0 !important; border-top: 1px solid #ffffff12; padding: 20px 6px; }
  .facts li:nth-child(even) { padding-left: 16px; border-left: 1px solid #ffffff12 !important; }
  .facts li:first-child, .facts li:nth-child(2) { border-top: 0; }
  .facts li:last-child { grid-column: 1 / -1; padding-left: 6px; border-left: 0 !important; }
  .nums div { padding: 20px 14px; }
  .bar { grid-template-columns: 1fr; }
  .size { padding: 22px; }
  .under { margin-top: 20px; flex-direction: column; align-items: flex-start; }
  .track img { width: 220px; }
  .studio-line { text-align: center; }
  .hero { padding-top: 48px; }
}

/* Packs page */
.packrow { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line-strong); align-items: start; }
.packrow:last-child { border-bottom: 1px solid var(--line-strong); }
.looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.looks figure { margin: 0; }
.looks img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; background: #060E18; box-shadow: 0 0 0 1px #ffffff14, 0 14px 30px -18px #000; }
.looks figcaption, .pack-grid figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.pack-grid { gap: 16px; }
.pack-grid figure { margin: 0; }
@media (max-width: 760px) { .packrow { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 480px) { .looks { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Ruled rows inside a split column stack their term over their text. */
.split .rows > div { grid-template-columns: 1fr; gap: 4px; }

code { font: 500 .88em ui-monospace, SFMono-Regular, Consolas, monospace; padding: .1em .4em; border-radius: 6px; background: #ffffff14; word-break: break-word; }
.light code { background: #0E1E2E12; }
.split.top-aligned .copy:first-child { padding-top: 0; }