/* Landing page Nekketsu v5 : feuille de style complète (tokens, mise en page mobile-first, composants). */
/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

/* ---------- Tokens ---------- */
:root {
  --white: #ffffff; --soft: #f5f5f5; --black: #000000; --grey: #8c8c8c; --line-c: #dbdbdb; --red: #e5523f; --ink: #172024;
  --bg: var(--white); --surface: var(--soft); --fg: var(--ink); --line: var(--line-c); --strong: var(--black);
  --on-accent: var(--ink);
  --font-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --radius: 14px; --r-card: 22px; --r-cap: 28px; --blue: #213d67; --yellow: #f4c95d; --gutter: clamp(16px, 4vw, 48px); --max: 1280px;
  --t-fast: 160ms; --t-mid: 280ms;
  --fs-body: 1.0625rem; --fs-small: 0.875rem; --fs-mono: 0.8125rem;
  --fs-h2: clamp(2.5rem, 6vw, 4.5rem);
}
[data-theme="dark"] {
  --bg: var(--ink); --surface: var(--black); --fg: var(--white); --line: #3a464b; --strong: var(--white);
  --line-c: #3a464b;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--fs-body)/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img { max-width: 100%; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: var(--s2); top: -64px; background: var(--ink); color: var(--white); padding: var(--s1) var(--s2); z-index: 100; border-radius: var(--radius); }
.skip:focus { top: var(--s1); }

.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tag-i { color: var(--red); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: 48px; padding: 0 var(--s3); border-radius: var(--radius);
  font: 600 1rem/1 var(--font-body); text-decoration: none; border: 1px solid var(--strong); cursor: pointer;
  transition: transform var(--t-fast) ease-out, background var(--t-fast) ease-out; white-space: nowrap; }
.btn-primary { background: var(--red); border-color: var(--red); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--fg); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn-ghost:hover { background: var(--surface); }
}

/* ---------- Header ---------- */
.bar-wrap { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: var(--s3); min-height: 72px; }
.brand { padding-block: 12px; font: 400 1.25rem/1 var(--font-display); text-transform: uppercase; text-decoration: none; letter-spacing: 0.02em; }
.sq { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.08em; border-radius: 0.05em; background: var(--red); }
.nav { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 0; margin: 0; padding: var(--s2) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--bg); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28); transform: translateY(105%); visibility: hidden; transition: transform var(--t-mid) cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s var(--t-mid); }
.nav.open { transform: none; visibility: visible; transition-delay: 0s; }
.nav-title { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--s1); font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.nav-x { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--fg); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.nav a { display: flex; align-items: center; min-height: 56px; font: 400 1.75rem/1 var(--font-display); text-transform: uppercase; text-decoration: none; transition: color var(--t-fast); }
.scrim { position: fixed; z-index: 45; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.scrim.on { opacity: 1; visibility: visible; transition-delay: 0s; }
html.menu-open { overflow: hidden; scroll-behavior: auto; }
/* Le chat est plein écran sous 861 px : la page est figée derrière. Au-delà, c'est une fenêtre flottante et la page reste défilable. */
@media (max-width: 860px) { html.chat-open { overflow: hidden; scroll-behavior: auto; } }
@media (hover: hover) { .nav a:hover { color: var(--red); } }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--fg); cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bar .btn { display: none; min-height: 44px; padding: 0 var(--s2); }

/* ---------- Hero ---------- */
.hero { padding-top: var(--s4); background-color: var(--ink); background-image: radial-gradient(#3a464b 1px, transparent 1px); background-size: 24px 24px; color: var(--white);
  --bg: var(--ink); --fg: var(--white); --line: #3a464b; --strong: var(--white); --surface: var(--black); }
[data-theme="dark"] .hero { background-color: var(--black); }
.badge { display: inline-flex; align-items: center; gap: var(--s1); border: 1px solid var(--strong); border-radius: 999px; padding: 6px 12px; white-space: nowrap; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.sec-num span::before { content: "› "; color: var(--red); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4) var(--s3); align-items: start; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s1); margin-bottom: var(--s3); }
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--red); border-radius: 2px; }
.wordmark { font: 400 clamp(4rem, 14vw, 10.5rem)/0.92 var(--font-display); text-transform: uppercase; letter-spacing: -0.005em; color: var(--strong); }
.wordmark .sq { width: 0.17em; height: 0.17em; margin-left: 0.06em; }
.lede { margin-top: var(--s4); max-width: 34ch; font: 500 clamp(1.375rem, 2.4vw, 1.875rem)/1.3 var(--font-body); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s4); }
.hero-tags li { border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; font-size: var(--fs-small); }

.panel { background: var(--ink); color: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink); }
[data-theme="dark"] .panel { background: var(--black); border-color: var(--line); }
.panel-head { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid #3a464b; }
.panel-head .live { display: inline-flex; align-items: center; gap: var(--s1); }
.panel-head .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.flow { padding: var(--s1) var(--s3) var(--s3); }
.flow li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s1); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid #3a464b; }
.flow li:last-child { border-bottom: 0; }
.flow .n { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--line-c); }
.flow strong { display: block; font-weight: 600; }
.flow small { display: block; font-size: var(--fs-small); color: var(--line-c); }
.pill { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-c); color: var(--white); white-space: nowrap; }
.pill.agent { background: var(--red); border-color: var(--red); color: var(--ink); }
.pill.human { background: var(--white); border-color: var(--white); color: var(--ink); }

.ticker { margin-top: var(--s7); overflow: hidden; background: var(--surface); }
.ticker-track { display: flex; width: max-content; animation: tick 40s linear infinite; }
.ticker-track span { font: 400 1.5rem/1 var(--font-display); text-transform: uppercase; padding: var(--s2) var(--s4); white-space: nowrap; }
.ticker-track span:nth-child(3n) { color: var(--red); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.sec { padding-block: var(--s6); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2) var(--s3); padding-bottom: var(--s4); }
.sec-num { display: flex; align-items: center; gap: var(--s2); }
.sec-num::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec-head h2 { font: 400 var(--fs-h2)/1 var(--font-display); text-transform: uppercase; color: var(--strong); }
.sec-head h2 em { font-style: normal; color: var(--red); }
.sec-intro { max-width: 52ch; }


/* Capacités : cartes (source design-system) */
.cap-agents { --accent: var(--blue); --accent-text: var(--blue); }
.cap-prod { --accent: var(--red); --accent-text: var(--red); }
.cap-sites { --accent: var(--ink); --accent-text: var(--ink); }
.cap-data { --accent: var(--grey); --accent-text: var(--ink); }
.caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.cap-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; gap: 10px 12px; align-content: stretch; padding: 20px 22px; border: 1px solid rgba(23, 32, 36, 0.16); border-radius: var(--r-card); background: var(--white); color: var(--ink); box-shadow: 0 8px 24px rgba(23, 32, 36, 0.06); transition: transform var(--t-mid) ease-out; }
.cap-card > * { grid-column: 1 / -1; align-self: start; }
.cap-card .cap-ico { grid-column: 1; grid-row: 1; align-self: center; display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent); }
.cap-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cap-card h3 { grid-column: 2; grid-row: 1; align-self: center; font: 400 clamp(1.375rem, 2vw, 1.625rem)/1 var(--font-display); letter-spacing: -0.005em; text-transform: uppercase; color: var(--accent-text); }
.cap-card .cap-num { grid-column: 3; grid-row: 1; align-self: center; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.08em; color: var(--ink); }
.cap-card p { max-width: 60ch; font-size: 0.9375rem; line-height: 1.5; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; margin-top: auto; padding-top: 4px; }
.chips li { padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--accent) 70%, #ffffff); border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, #ffffff); color: var(--ink); font: 500 0.75rem/1.1 var(--font-body); }
@media (hover: hover) { .cap-card:hover { transform: translateY(-3px); } }
.cap-bridge { margin-top: var(--s4); display: flex; }
.lnk { display: inline-flex; align-items: center; gap: var(--s1); padding: 12px 0 4px; border-bottom: 2px solid var(--red); font-weight: 700; text-decoration: none; transition: gap var(--t-fast) ease-out; }
.lnk::after { content: "↗"; }
.cap-bridge .lnk::after { content: "↓"; }
@media (hover: hover) { .lnk:hover { gap: 14px; } }

/* Boucle (bande encre, frise en 6 colonnes) */
.band { background: var(--ink); color: var(--white); --line: #3a464b; --strong: var(--white); --fg: var(--white); }
.band h2 em { color: var(--yellow); }
.band .sec-num span::before { color: var(--yellow); }
.mode { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); flex-wrap: wrap; }
.mode-opt { min-height: 44px; padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.6); font: 600 var(--fs-small)/1 var(--font-body); cursor: pointer; transition: color var(--t-fast); }
.mode-opt[aria-pressed="true"] { color: var(--white); }
.mode-opt:focus-visible, .switch:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 6px; }
.switch { position: relative; flex: none; width: 52px; height: 30px; padding: 0; border: 1.5px solid var(--line-c); border-radius: 999px; background: transparent; cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--yellow); transition: transform var(--t-mid) ease-out, background var(--t-mid); }
[data-mode="auto"] .switch::after { transform: translateX(22px); background: var(--red); }
/* Système en boucle : rail vertical compact (mobile), frise horizontale dès 1025 px */
.tl { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.tl::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 12px); }
.tl::after { content: ""; position: absolute; left: 12px; top: 18px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--yellow); opacity: 0; animation: tl-sweep-y 8s ease-in-out infinite; }
@keyframes tl-sweep-y { 0% { top: 18px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: calc(100% - 18px); opacity: 0; } }
@keyframes tl-sweep-x { 0% { left: 22px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 22px); opacity: 0; } }
.tl li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 var(--s2); align-items: start; }
.tl-node { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--white); background: var(--ink); color: var(--white); font: 500 12px/1 var(--font-mono); }
.tl-agent .tl-node { background: var(--blue); }
.tl-human .tl-node { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
[data-mode="auto"] .tl-human .tl-node { background: var(--ink); border-color: var(--white); color: var(--white); }
.tl-back .tl-node { border-style: dashed; color: var(--red); font-size: 1rem; }
.tl-back .tl-body { align-self: center; color: var(--line-c); }
.tl-body { display: grid; padding-top: 2px; }
.tl .ey { font: 500 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.tl-q { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--s1); min-height: 44px; cursor: pointer; color: inherit; font: 400 1.375rem/1.1 var(--font-display); text-transform: uppercase; }
.tl-q:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.tl-q .plus { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); transition: transform var(--t-mid) ease-out, background var(--t-fast); }
.tl-q .plus::before { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); }
.tl-q[aria-expanded="true"] .plus { transform: rotate(180deg); background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.tl-more { display: grid; grid-template-rows: 1fr; }
.tl-more > div { overflow: hidden; }
.js .tl-more { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--t-mid) ease-out, visibility 0s var(--t-mid); }
.js .tl-q[aria-expanded="true"] + .tl-more { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.tl .desc { padding-bottom: var(--s1); font-size: var(--fs-small); color: var(--line-c); }
.tl .m-auto { display: none; }
[data-mode="auto"] .tl .m-auto { display: inline; }
[data-mode="auto"] .tl .m-val { display: none; }
.tl-loop { display: none; }
.k-prod { --k: var(--yellow); } .k-data { --k: var(--white); } .k-auto { --k: var(--red); } .k-agent { --k: #7fa2d6; } .k-human { --k: var(--white); }
.ey { display: inline-flex; align-items: center; gap: var(--s1); }
.ey::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--k, var(--white)); flex: none; }
.ey.k-human::before { box-sizing: border-box; width: 10px; height: 10px; border: 2px solid var(--white); border-radius: 50%; background: transparent; }

/* Cases */
.case { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-block: var(--s3); }
.case + .case { border-top: 1px solid var(--line); }
.case-body { display: grid; gap: var(--s2); align-content: start; }
.case-body h3 { font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.05 var(--font-display); text-transform: uppercase; color: var(--strong); }
.state { display: inline-flex; width: max-content; align-items: center; gap: var(--s1); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--white); }
[data-theme="dark"] .state { background: var(--white); color: var(--ink); }
.state.wip { background: var(--red); color: var(--ink); }
.state.proto { background: transparent; color: var(--fg); border: 1px solid var(--strong); }
[data-theme="dark"] .state.wip { background: var(--red); color: var(--ink); }
[data-theme="dark"] .state.proto { background: transparent; color: var(--fg); }
.viz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2); display: grid; gap: var(--s2); align-content: start; }
.viz-fold > summary { display: none; }
.viz-fold:not([open]) { display: none; }
.viz-head { display: flex; justify-content: space-between; gap: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s1); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps .n { font-family: var(--font-mono); font-size: var(--fs-mono); }
.steps strong { display: block; font-weight: 600; }
.steps small { display: block; font-size: var(--fs-small); }
.steps .pill { color: var(--fg); border-color: var(--line-c); }
[data-theme="dark"] .steps .pill { border-color: var(--grey); }
.steps .pill.agent { background: var(--red); border-color: var(--red); color: var(--ink); }
.steps .pill.human { background: var(--ink); border-color: var(--ink); color: var(--white); }
[data-theme="dark"] .steps .pill.human { background: var(--white); border-color: var(--white); color: var(--ink); }
.src { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
.src span, .pipe { border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius); padding: 12px; font-family: var(--font-mono); font-size: var(--fs-mono); text-align: center; }
.pipe { display: flex; justify-content: space-between; gap: var(--s1); border-style: dashed; }
.dash { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2); display: grid; gap: var(--s2); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.kpi { border: 1px solid var(--line); border-radius: 4px; padding: 8px; font-size: var(--fs-small); display: grid; gap: 8px; }
.kpi > * { display: block; }
.kpi i { height: 8px; width: 60%; background: var(--red); border-radius: 2px; }
.kpi:nth-child(2) i { width: 85%; } .kpi:nth-child(3) i { width: 40%; }
.spark { display: flex; align-items: flex-end; gap: 8px; height: 72px; }
.spark i { flex: 1; background: var(--ink); border-radius: 2px 2px 0 0; }
[data-theme="dark"] .spark i { background: var(--white); }
.spark i:nth-child(1) { height: 30%; } .spark i:nth-child(2) { height: 48%; } .spark i:nth-child(3) { height: 40%; }
.spark i:nth-child(4) { height: 66%; } .spark i:nth-child(5) { height: 58%; } .spark i:nth-child(6) { height: 92%; background: var(--red); }
.log { display: grid; gap: 4px; background: var(--ink); color: var(--white); border-radius: var(--radius); padding: var(--s2); font-family: var(--font-mono); font-size: var(--fs-mono); }
[data-theme="dark"] .log { background: var(--black); border: 1px solid var(--line); }
.log b { color: var(--red); font-weight: 500; }
details.more { }
.case-foot { display: grid; grid-template-columns: auto 1fr; align-items: start; }
.case-foot > .state { grid-area: 1 / 1; z-index: 1; margin-top: 9px; }
.case-foot > details.more { grid-area: 1 / 1 / 2 / -1; }
.case-foot details.more summary { justify-content: flex-end; gap: var(--s1); padding-block: 8px; }
details.more summary { cursor: pointer; padding: var(--s2) 0; font-weight: 600; min-height: 44px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform var(--t-fast); }
details.more[open] summary::after { transform: rotate(45deg); }
.facts { display: grid; gap: var(--s1); padding-bottom: var(--s2); font-size: var(--fs-small); }
.facts li { padding-left: var(--s2); position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--red); border-radius: 1px; }

/* Indication de défilement sous le bandeau */
.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s3) var(--gutter) var(--s4); color: var(--white); text-decoration: none; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.scroll-hint svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint svg { animation: none; } }

/* Console d'agent (hero) */
.hero .panel { background: var(--black); border-color: #3a464b; }
.panel-head .ill { color: var(--line-c); }
.trace { padding: var(--s2) var(--s3) var(--s3); display: grid; gap: var(--s1); font-family: var(--font-mono); font-size: var(--fs-mono); }
.trace li { display: grid; grid-template-columns: 48px 72px minmax(0, 1fr); gap: var(--s1); padding: 8px 0; border-bottom: 1px solid #3a464b; animation: trace-in 320ms ease-out both; animation-delay: calc(var(--i) * 700ms + 400ms); }
.trace li:last-child { border-bottom: 0; }
.trace .t { color: var(--line-c); }
.trace .who { color: var(--red); }
.trace .who.h { color: var(--white); }
.trace .msg { overflow-wrap: anywhere; }
.trace .cur { display: inline-block; width: 8px; height: 1em; background: var(--red); vertical-align: text-bottom; margin-left: 4px; animation: blink 1s steps(2) infinite; }
@keyframes trace-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
.console-foot { display: flex; flex-wrap: wrap; gap: var(--s1); padding: var(--s2) var(--s3); border-top: 1px solid #3a464b; }
.console-foot .pill.agent { background: var(--red); border-color: var(--red); color: var(--ink); }

/* Schémas des cas clients en console sombre */
.viz { background: var(--ink); color: var(--white); --bg: var(--black); --fg: var(--white); --line: #3a464b; --strong: var(--white); --surface: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .viz { background: var(--black); --bg: var(--ink); border-color: var(--line); }
.viz .steps .pill { border-color: var(--grey); }
.viz .steps .pill.agent { background: var(--red); border-color: var(--red); color: var(--ink); }
.viz .steps .pill.human { background: var(--white); border-color: var(--white); color: var(--ink); }
.viz .spark i { background: var(--white); }
.viz .spark i:nth-child(6) { background: var(--red); }
.viz .log { background: var(--black); border: 1px solid var(--line); }
[data-theme="dark"] .viz .log { background: var(--ink); }

/* Diagnostic express */
.cta .cta-head { display: grid; gap: var(--s1); align-content: start; }
.cta .cta-head .eyebrow { margin-bottom: 0; }
.cta .cta-side { justify-items: stretch; gap: var(--s1); }
/* Agent de diagnostic (chat) */
.chat { position: fixed; z-index: 80; inset: 0; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; background: var(--white); color: var(--ink); visibility: hidden; opacity: 0; transform: translateY(16px); transition: opacity 0.2s, transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.24s; }
.chat[data-open] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.chat-x { flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.75rem; line-height: 1; cursor: pointer; }
@media (hover: hover) { .chat-x:hover { background: var(--soft); } }
.chat-x:focus-visible { outline: 3px solid var(--red); outline-offset: -2px; }
.launcher { display: none; }
.mbar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--ink); transform: translateY(110%); transition: transform var(--t-mid) cubic-bezier(0.2, 0.8, 0.2, 1); }
.mbar.show { transform: none; }
html.chat-open .mbar, html.menu-open .mbar { transform: translateY(110%); }
.mbar-cta { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 0; border-radius: 14px; background: var(--white); color: var(--ink); font: 700 1rem/1 var(--font-body); cursor: pointer; }
.mbar-cta::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--red); }
.mbar-menu { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #3a464b; border-radius: 14px; background: transparent; color: var(--white); cursor: pointer; }
.mbar-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.mbar button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
@media (min-width: 861px) {
  .mbar { display: none; }
  .chat { inset: auto 24px 100px auto; width: min(400px, calc(100vw - 48px)); height: min(640px, calc(100dvh - 128px)); border-radius: var(--r-card); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
  .launcher { position: fixed; z-index: 55; right: 24px; bottom: 24px; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: var(--red); color: var(--white); cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast); }
  .launcher svg { grid-area: 1 / 1; width: 30px; height: 30px; }
  .launcher .i-close { display: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .launcher[aria-expanded="true"] .i-chat { display: none; }
  .launcher[aria-expanded="true"] .i-close { display: block; }
  @media (hover: hover) { .launcher:hover { transform: scale(1.06); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38); } }
  .launcher:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
}
.chat-head { padding-top: calc(14px + env(safe-area-inset-top)); }
.notify { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); width: 100%; }
.notify label { font-weight: 600; }
.notify-row { display: flex; align-items: center; gap: var(--s1); padding: 4px 4px 4px 22px; border: 1px solid var(--white); border-radius: 999px; background: var(--black); }
.notify-row:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.notify-row:has(input[aria-invalid="true"]) { border: 2px solid var(--red); padding: 3px 3px 3px 21px; }
.notify input { flex: 1 1 0; width: 0; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--white); font: 400 1rem/1 var(--font-body); outline: 0; }
.notify-row .btn { flex: none; }
.notify-msg { font-size: var(--fs-small); }
.notify-msg:empty { display: none; }
.notify-msg.err::before { content: "Erreur : "; font-weight: 600; }
.notify-msg.ok::before { content: "✓ "; font-weight: 600; }
.cta-alt { margin: 0; font-size: var(--fs-small); }
.cta-alt .lnk { padding: 12px 0 4px; border-top: 0; border-left: 0; border-right: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid rgba(23, 32, 36, 0.12); }
.chat-av { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); }
.chat-av::after { content: ""; position: absolute; inset: 0; margin: auto; width: 11px; height: 11px; border-radius: 3px; background: var(--red); }
.chat-name { font-weight: 700; line-height: 1.2; }
.chat-status { display: flex; align-items: center; gap: 6px; font: 500 0.75rem/1.4 var(--font-mono); color: rgba(23, 32, 36, 0.65); }
.chat-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2f9e63; }
.chat-status[data-state="off"]::before { background: #c8372d; }
.chat-tag { margin-left: auto; margin-right: 4px; padding: 4px 8px; border: 1px solid rgba(23, 32, 36, 0.35); border-radius: 999px; font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(23, 32, 36, 0.7); }
.chat-log { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
.msg { display: flex; gap: 8px; animation: msg-in 0.18s ease-out both; }
.msg-av { flex: none; position: relative; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--ink); }
.msg-av::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 2px; background: var(--red); }
.bub { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--soft); font-size: 0.9375rem; line-height: 1.5; max-width: 88%; overflow-wrap: anywhere; }
.msg-u { justify-content: flex-end; }
.msg-u .bub { border-radius: 18px 18px 6px 18px; background: var(--ink); color: var(--white); max-width: 85%; }
.typing { display: inline-flex; gap: 4px; align-items: center; min-height: 1.5em; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); animation: typing-dot 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
.qr { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 32px; animation: msg-in 0.18s ease-out both; }
.qr button, .chat-btn { min-height: 44px; padding: 0 14px; border: 1px solid rgba(23, 32, 36, 0.28); border-radius: 999px; background: var(--white); color: var(--ink); font: 600 0.875rem/1.2 var(--font-body); text-align: left; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
@media (hover: hover) { .qr button:hover, .chat-btn:hover { background: var(--soft); border-color: var(--ink); } }
.chat-btn.primary { background: var(--ink); border-color: var(--ink); color: var(--white); }
@media (hover: hover) { .chat-btn.primary:hover { background: var(--black); } }
.qr button:focus-visible, .chat-btn:focus-visible, .chat-form button:focus-visible, .chat-form input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.fiche { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(23, 32, 36, 0.18); border-radius: 14px; background: var(--white); font-size: 0.875rem; line-height: 1.45; }
.fiche dl { display: grid; gap: 8px; margin: 0; }
.fiche dt { font: 500 0.6875rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(23, 32, 36, 0.6); }
.fiche dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.fiche p { margin: 0; }
.fiche .lnk { justify-self: start; padding-block: 8px 2px; }
.nx { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 32px; animation: msg-in 0.18s ease-out both; }
.mail-row { display: flex; align-items: center; gap: 6px; margin-left: 32px; padding: 4px 4px 4px 16px; border: 1px solid rgba(23, 32, 36, 0.35); border-radius: 999px; background: var(--white); animation: msg-in 0.18s ease-out both; }
.mail-row:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.mail-row:has(input[aria-invalid="true"]) { border: 2px solid var(--red); padding: 3px 3px 3px 15px; }
.mail-row input { flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 400 1rem/1 var(--font-body); outline: 0; }
.mail-row .chat-btn { flex: none; }
.chat-form { display: flex; gap: 8px; padding: 12px 12px 8px; border-top: 1px solid rgba(23, 32, 36, 0.12); }
.chat-form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: 400 1rem/1 var(--font-body); }
.chat-form button { flex: none; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--red); color: var(--ink); font: 600 1.25rem/1 var(--font-body); cursor: pointer; transition: opacity var(--t-fast); }
.chat-form button:disabled { background: #c9c9c9; cursor: default; }
.chat-fine { margin: 0; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); font-size: 0.6875rem; line-height: 1.35; color: rgba(23, 32, 36, 0.62); }

/* Éléments UI de la source : boutons, hero, statuts, bandes */
.btn { gap: 12px; padding: 8px 8px 8px 24px; border-radius: 999px; background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 700; }
.btn::after { content: "→"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: var(--ink); font-weight: 400; transition: transform var(--t-fast) ease-out; }
@media (hover: hover) { .btn:hover::after { transform: translateX(3px); } }
.hero .btn, .cta .btn, [data-theme="dark"] .btn { background: var(--white); border-color: var(--white); color: var(--ink); }
.hero-tags li { font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.hero-tags a { color: inherit; text-decoration: none; display: block; position: relative; }
.hero-tags a::after { content: ""; position: absolute; inset: -10px -4px; }
.hero-tags li { transition: transform var(--t-mid) ease-out; }
.hero-tags li:focus-within { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (hover: hover) { .hero-tags li:hover { transform: translateY(-2px); } }
.hero-tags .ht-agents { background: var(--blue); border-color: rgba(255, 255, 255, 0.28); color: var(--white); }
.hero-tags .ht-prod { background: var(--yellow); border-color: transparent; color: var(--ink); }
.ticker { background: var(--yellow); color: var(--ink); }
.ticker-track span:nth-child(3n) { color: var(--ink); }
.ticker-track span::after { content: ""; display: inline-block; width: 9px; height: 9px; margin-left: 56px; border-radius: 2px; background: var(--red); vertical-align: middle; }
.scroll-hint { flex-direction: row; width: max-content; margin: 18px auto var(--s4); padding: 14px 0 3px; gap: 10px; border-bottom: 2px solid var(--red); font: 600 1.0625rem/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
.panel, .viz, .work { border-radius: var(--r-card); }
.state, [data-theme="dark"] .state { background: var(--blue); color: var(--white); }
.state.wip, [data-theme="dark"] .state.wip { background: var(--yellow); color: var(--ink); }
.state.proto, [data-theme="dark"] .state.proto { background: transparent; color: var(--fg); border: 1px solid var(--strong); }
.viz .steps .pill.agent { background: var(--blue); border-color: #7fa2d6; color: var(--white); }
.viz .steps .pill.human { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
/* Thème : clair / sombre / système. Compact (icône active), il s'ouvre au survol, au focus ou au toucher. */
.ts-wrap { position: relative; z-index: 5; flex: none; width: 44px; height: 44px; margin-left: auto; }
.ts { --i: 0; --b: 38px; position: absolute; top: 0; right: 0; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); }
.ts::before { content: ""; position: absolute; top: 3px; left: 3px; width: var(--b); height: var(--b); border-radius: 50%; background: var(--bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); transform: translateX(calc(var(--i) * var(--b))); }
.ts:not([data-open])::before { transform: none; }
.ts[data-open] { box-shadow: 0 8px 24px rgba(23, 32, 36, 0.16); }
.ts-ready.ts::before { transition: transform var(--t-mid) cubic-bezier(0.2, 0.8, 0.2, 1); }
.ts-ready.ts { transition: box-shadow var(--t-mid); }
.ts button { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: var(--b); height: var(--b); padding: 0; overflow: hidden; border: 0; border-radius: 50%; background: transparent; color: color-mix(in srgb, var(--fg) 55%, transparent); cursor: pointer; }
.ts-ready.ts button { transition: width var(--t-mid) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--t-fast), color var(--t-fast); }
.ts:not([data-open]) button[aria-checked="false"] { width: 0; opacity: 0; pointer-events: none; }
.ts button[aria-checked="true"] { color: var(--fg); }
@media (hover: hover) { .ts button:hover { color: var(--fg); } }
.ts button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ts svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Transition de thème : le nouveau thème se révèle du bas vers le haut (View Transitions API) */
html[data-vt="rect"]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="rect"]::view-transition-new(root) { mix-blend-mode: normal; animation: nk-theme-reveal 400ms ease-out; }
@keyframes nk-theme-reveal { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { html[data-vt]::view-transition-old(root), html[data-vt]::view-transition-new(root) { animation: none !important; } }

.band-soft { background: var(--surface); }
.band-soft .cx-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--strong); }
.band-soft .cx-tab[aria-selected="true"] .n { padding: 4px 8px; border-radius: 999px; background: var(--yellow); color: var(--ink); }

/* Flux : pointillés et nœuds qui relient les étapes */
.trace li { grid-template-columns: 16px 44px 56px minmax(0, 1fr); position: relative; border-bottom: 0; }
.trace li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); align-self: center; justify-self: center; position: relative; z-index: 1; }
.trace li:last-child::before { background: var(--white); }
.trace li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 50%; bottom: -50%; border-left: 2px dashed rgba(255, 255, 255, 0.4); }
.steps li { position: relative; border-bottom: 0; }
.steps .n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.5); }
[data-theme="dark"] .steps .n { background: var(--black); }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 50%; bottom: -50%; border-left: 2px dashed rgba(255, 255, 255, 0.5); }
.src, .pipe { position: relative; }
.src::after, .pipe::after { content: ""; position: absolute; left: 50%; top: 100%; height: var(--s2); border-left: 2px dashed rgba(255, 255, 255, 0.5); }
.src::before, .pipe::before { content: "▾"; position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); font-size: 0.75rem; line-height: 1; color: rgba(255, 255, 255, 0.8); z-index: 1; }

/* Works */
.works { position: relative; display: flex; align-items: start; gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); --od-gap: var(--s3); }
.works::-webkit-scrollbar { display: none; }
/* Filtres des réalisations : pastille glissante + libellé inversé sous la pastille (propriétés animées en phase) */
@property --wf-l { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --wf-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
.wf { display: none; position: relative; max-width: 100%; margin-bottom: var(--s3); }
.js .wf { display: block; width: max-content; }
.wf-viewport { overflow-x: auto; scrollbar-width: none; border-radius: 999px; --m-l: 0px; --m-r: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--m-l), #000 calc(100% - var(--m-r)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--m-l), #000 calc(100% - var(--m-r)), transparent 100%); }
.wf-viewport::-webkit-scrollbar { display: none; }
.wf-list { position: relative; isolation: isolate; display: inline-flex; gap: 2px; width: max-content; padding: 3px; border-radius: 999px; background: var(--surface); --wf-l: 0px; --wf-r: 0px; }
.wf-ready .wf-list { transition: --wf-l 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), --wf-r 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.wf-pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: var(--wf-l); right: var(--wf-r); border-radius: 999px; background: var(--strong); }
.wf-list button { position: relative; z-index: 1; min-height: 44px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: color-mix(in srgb, var(--fg) 68%, transparent); font: 600 var(--fs-small)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: color var(--t-fast); }
.wf-list button:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
@media (hover: hover) { .wf-list button:hover { color: var(--fg); } }
.wf-over { position: absolute; z-index: 2; inset: 0; display: inline-flex; gap: 2px; padding: 3px; pointer-events: none; color: var(--bg); clip-path: inset(3px var(--wf-r) 3px var(--wf-l) round 999px); }
.wf-over span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; font: 600 var(--fs-small)/1 var(--font-body); white-space: nowrap; }
.wf-arrow { position: absolute; z-index: 3; top: 0; bottom: 0; display: none; place-items: center; width: 36px; padding: 0; border: 0; background: transparent; color: var(--fg); cursor: pointer; }
.wf-arrow::before { content: ""; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.wf-next::before { transform: rotate(-135deg); }
.wf-prev { left: 0; } .wf-next { right: 0; }
.wf[data-overflow="true"] .wf-arrow { display: grid; }
.wf-arrow:disabled { opacity: 0; pointer-events: none; }
.wf-arrow:focus-visible { outline: 3px solid var(--red); outline-offset: -4px; border-radius: 999px; }
.work.is-in { animation: work-in 0.18s ease-out both; }
@keyframes work-in { from { opacity: 0; transform: translateY(4px); } }
.work[hidden] { display: none; }
.work { display: grid; grid-template-rows: auto 1fr; flex: 0 0 82%; scroll-snap-align: start; row-gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); text-decoration: none; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.shot-art { background: var(--ink); }
.shot-art svg, .shot-art img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 78%; max-height: 82%; }
.shot-art svg { width: 78%; }
.art-graph { filter: invert(1) brightness(2.6); mix-blend-mode: lighten; object-fit: contain; }
.art-panel { border-radius: var(--radius); object-fit: contain; }
.work-body { display: grid; gap: var(--s1); align-content: start; padding: 20px; }
.work-body h3 { font: 400 1.5rem/1.1 var(--font-display); text-transform: uppercase; color: var(--strong); }

/* Outils : une seule ligne de logos qui défile (bande pleine largeur) */
.tools-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tools-track { display: flex; width: max-content; animation: tools-scroll 80s linear infinite; }
.tools-marquee:hover .tools-track, .tools-marquee:focus-within .tools-track { animation-play-state: paused; }
.tools-group { display: flex; flex: none; gap: var(--s1); padding-right: var(--s1); }
.tools-group li { display: grid; place-items: center; flex: none; width: 72px; height: 52px; border: 1px solid var(--line-c); border-radius: var(--radius); background: var(--white); }
.tools-group svg { width: 28px; height: 28px; }
@keyframes tools-scroll { to { transform: translateX(-50%); } }

/* Method */
.method-lead { max-width: 56ch; font-size: 1.25rem; font-weight: 500; margin-bottom: var(--s5); }
.cx { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-top: var(--s2); }
.cx-list { display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; }
.cx-list::-webkit-scrollbar { display: none; }
.cx-tab { display: flex; align-items: baseline; gap: var(--s2); text-align: left; background: transparent; color: var(--fg); border: 0; flex: none; padding: var(--s2) 0; min-height: 56px; cursor: pointer; font: 400 1.375rem/1.1 var(--font-display); text-transform: uppercase; transition: padding var(--t-mid) ease-out; }
.cx-tab .n { font: 500 var(--fs-mono)/1 var(--font-mono); color: var(--fg); }
.cx-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--red); }
.cx-panel { display: none; gap: var(--s2); }
.cx-panel.on { display: grid; }
.cx-panel h3 { font: 400 clamp(2rem, 4vw, 3rem)/1 var(--font-display); text-transform: uppercase; color: var(--strong); }
.cx-panel p { max-width: 60ch; }

/* CTA + footer */
.cta { background: var(--ink); color: var(--white); padding-block: var(--s5); }
[data-theme="dark"] .cta { background: var(--black); border-top: 1px solid var(--line); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) var(--s3); align-items: start; }
.cta h2 { font: 400 clamp(2rem, 4.2vw, 3.25rem)/1 var(--font-display); text-transform: uppercase; }
.cta h2 span { color: var(--red); }
.cta-side { display: grid; gap: var(--s2); justify-items: start; }
.cta .btn-ghost { color: var(--white); border-color: var(--white); }
.foot { background-color: var(--ink); background-image: radial-gradient(#3a464b 1px, transparent 1px); background-size: 24px 24px; color: var(--white); border-top: 1px solid #3a464b; padding-block: var(--s4) calc(var(--s4) + 84px + env(safe-area-inset-bottom)); }
[data-theme="dark"] .foot { background-color: var(--black); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); align-items: center; }
.foot-word { font: 400 1.5rem/1 var(--font-display); text-transform: uppercase; }


/* ---------- Responsive : mobile first (base = mobile, on ajoute avec min-width) ---------- */
@media (min-width: 641px) {
  .brand { font-size: 1.5rem; }
  .hero { padding-top: var(--s6); }
  .tools-group li { width: 80px; height: 58px; }
  .tools-group svg { width: 32px; height: 32px; }
  .works { --od-cols: 2; display: grid; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; }
  .work { flex: none; }
  .src { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trace li { grid-template-columns: 16px 48px 72px minmax(0, 1fr); }
  .flow li { grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s2); }
  .steps li { gap: var(--s2); }
  .viz { padding: var(--s3); }
}
@media (min-width: 861px) {
  .ts-wrap { margin-left: 0; }
  .bar .btn { display: inline-flex; }
  .nav { position: static; z-index: auto; flex-direction: row; gap: var(--s3); margin: 0 auto; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none; visibility: visible; transition: none; }
  .nav-title, .scrim { display: none; }
  .nav a { min-height: 0; padding: var(--s1) 0; border-bottom: 2px solid transparent; font: 500 var(--fs-small)/1.6 var(--font-body); text-transform: none; }
  @media (hover: hover) { .nav a:hover { color: inherit; border-color: var(--red); } }
  .foot { padding-bottom: var(--s4); }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .sec { padding-block: var(--s7); }
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero-main { grid-column: 1 / -1; }
  .hero-panel { grid-column: 8 / span 5; }
  .sec-head { padding-bottom: var(--s5); }
  .works { --od-cols: 3; }
  .wf-list button, .wf-over span { min-height: 38px; padding: 0 var(--s2); }
  .tl { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 22px; }
  .tl::before { left: 22px; right: 0; top: 22px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 6px, transparent 6px 12px); }
  .tl::after { top: 22px; left: 22px; margin-top: -6px; animation-name: tl-sweep-x; }
  .tl li { grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px auto; gap: var(--s1); }
  .tl-node { width: 44px; height: 44px; font-size: 13px; }
  .tl .tl-back { display: none; }
  .tl-body { padding-top: var(--s1); gap: 6px; }
  .tl-q { pointer-events: none; min-height: 0; font-size: clamp(1.25rem, 1.9vw, 1.75rem); }
  .tl-q .plus { display: none; }
  .tl-more, .js .tl-more { grid-template-rows: 1fr; visibility: visible; }
  .tl-loop { display: block; position: relative; height: 26px; margin: var(--s3) 0 0 22px; border: 2px dashed rgba(255, 255, 255, 0.5); border-top: 0; border-radius: 0 0 16px 16px; }
  .tl-loop span { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); padding: 0 12px; background: var(--ink); font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); white-space: nowrap; }
  .case { grid-template-columns: repeat(12, minmax(0, 1fr)); padding-block: var(--s5); }
  .case + .case { border-top: 0; }
  .case-body { grid-column: 1 / span 5; }
  .viz-fold { grid-column: 7 / span 6; }
  .cx { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cx-list { grid-column: 1 / span 4; display: grid; gap: 0; align-content: start; overflow: visible; }
  .cx-tab { font-size: 1.75rem; }
  .cx-tab[aria-selected="true"], .band-soft .cx-tab[aria-selected="true"] { padding-left: var(--s2); }
  .cx-tab[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--red); }
  .band-soft .cx-tab[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--strong); }
  .cx-panels { grid-column: 6 / span 7; }
  .cta-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; gap: var(--s1) var(--s3); align-items: center; }
  .cta .cta-head, .cta .cta-side { display: contents; }
  .cta-head .eyebrow { grid-column: 1 / span 7; grid-row: 1; }
  .cta-head h2 { grid-column: 1 / span 7; grid-row: 2; }
  .cta-head > p:last-child { grid-column: 1 / span 7; grid-row: 3; }
  .cta-side .notify { grid-column: 8 / span 5; grid-row: 2; }
  .cta-side .notify-fine { grid-column: 8 / span 5; grid-row: 3; }
  .cta-side .cta-alt { grid-column: 8 / span 5; grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-ready.ts::before, .ts-ready.ts, .ts-ready.ts button { transition: none; }
  html { scroll-behavior: auto; }
  .tools-marquee { overflow-x: auto; }
  .tl::after { animation: none; display: none; }
  .msg, .qr, .nx, .mail-row, .typing i { animation: none; }
  .chat, .nav, .scrim, .mbar, .launcher { transition: none; }
  .wf-ready .wf-list { transition: none; }
  .work.is-in { animation: none; }
  .tl-more, .tl-q .plus { transition: none; }
  .ticker-track, .tools-track, .panel-head .live::before, .trace li, .trace .cur { animation: none; }
  .btn, .cx-tab { transition: none; }
}

/* Pied de page : liens légaux */
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); text-decoration: none; }
@media (hover: hover) { .foot-links a:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; } }

/* Bandeau de consentement (mesure d'audience) */
.consent { position: fixed; z-index: 75; left: 0; right: 0; bottom: 0; padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom)); border: 1px solid #3a464b; border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--ink); color: var(--white); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35); transform: translateY(110%); visibility: hidden; transition: transform var(--t-mid) cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s var(--t-mid); outline: 0; }
.consent[data-open] { transform: none; visibility: visible; transition-delay: 0s; }
.consent p { margin: 8px 0 0; font-size: var(--fs-small); line-height: 1.5; color: rgba(255, 255, 255, 0.74); }
.consent p.consent-t { margin: 0; font: 400 1.5rem/1.1 var(--font-display); text-transform: uppercase; color: var(--white); }
.consent a { color: var(--white); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.consent-actions { display: flex; gap: 8px; margin-top: 16px; }
.consent-actions button { flex: 1; min-height: 48px; padding: 0 16px; border: 2px solid var(--white); border-radius: 999px; font: 700 0.9375rem/1 var(--font-body); cursor: pointer; }
.consent-ok { background: var(--white); color: var(--ink); }
.consent-no { background: transparent; color: var(--white); }
.consent button:focus-visible, .consent a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
@media (min-width: 861px) { .consent { left: 24px; right: auto; bottom: 24px; width: min(420px, calc(100vw - 48px)); padding: 22px; border-bottom: 1px solid #3a464b; border-radius: var(--r-card); } }
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }
.foot-links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; font: 500 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); cursor: pointer; }
@media (hover: hover) { .foot-links button:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; } }

/* Inscription : mention de consentement, emplacement de l'anti-robot */
.notify-fine { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: rgba(255, 255, 255, 0.74); }
.notify-fine a { color: var(--white); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ts-slot:empty { display: none; }
.ts-slot { margin-top: 4px; }

/* Fenêtre « être prévenu·e de l'ouverture » : trois étapes, ouverte depuis la fin du diagnostic */
.contact { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-card); background: var(--white); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden; }
.contact::backdrop { background: rgba(0, 0, 0, 0.55); }
.contact-in { display: grid; gap: 16px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 24px; }
.contact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.contact-head h2 { margin: 0; font: 700 1.25rem/1.2 var(--font-body); }
.contact-head p { margin: 4px 0 0; font-size: 0.875rem; color: rgba(23, 32, 36, 0.7); }
.contact-x { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.csteps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cstep-btn { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 8px 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cstep-btn:disabled { cursor: default; }
.cnum { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(23, 32, 36, 0.35); border-radius: 50%; font: 600 0.875rem/1 var(--font-body); }
.cstep[data-state="open"] .cnum { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cstep[data-state="done"] .cnum { background: var(--soft); }
.cstep[data-state="todo"] .cstep-t { color: rgba(23, 32, 36, 0.5); }
.cstep-t { display: grid; gap: 2px; padding-top: 5px; font-weight: 600; }
.cstep-v { font-weight: 400; font-size: 0.875rem; color: rgba(23, 32, 36, 0.7); overflow-wrap: anywhere; }
.cstep-v:empty { display: none; }
.cstep-body { display: grid; gap: 12px; padding: 4px 0 12px 44px; }
.cstep-body[hidden] { display: none; }
.copts { display: grid; gap: 8px; }
.copts button { min-height: 48px; padding: 10px 14px; border: 1px solid rgba(23, 32, 36, 0.2); border-radius: 12px; background: var(--soft); color: var(--ink); font: 400 1rem/1.3 var(--font-body); text-align: left; cursor: pointer; }
.copts button[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
@media (hover: hover) { .copts button:hover { border-color: var(--ink); } }
.cfield { display: grid; gap: 6px; }
.cfield label { font-size: 0.875rem; font-weight: 600; }
.cfield .opt { font-weight: 400; color: rgba(23, 32, 36, 0.6); }
.cfield input { min-height: 48px; padding: 0 14px; border: 1px solid rgba(23, 32, 36, 0.3); border-radius: 12px; background: var(--white); color: var(--ink); font: 400 1rem/1 var(--font-body); }
.cfield input[aria-invalid="true"] { border: 2px solid var(--red); padding: 0 13px; }
.contact :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cerr { margin: 0; font-size: 0.875rem; color: #b3261e; }
.cerr:empty { display: none; }
.crecap { display: grid; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); font-size: 0.9375rem; }
.crecap dt { font: 500 0.6875rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(23, 32, 36, 0.6); }
.crecap dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.cfine { margin: 0; font-size: 0.8125rem; color: rgba(23, 32, 36, 0.7); }
.cfine a { color: inherit; }
.cdone { display: grid; gap: 12px; padding: 4px 0; }
.cdone[hidden] { display: none; }
.cdone p { margin: 0; }
.cdone-t { font-weight: 700; font-size: 1.125rem; }
.contact .chat-btn { justify-self: start; }

.csteps[hidden] { display: none; }
.contact[data-done] .contact-head { justify-content: flex-end; }
.contact[data-done] .contact-head > div { display: none; }

/* Tablette : le champ d'inscription garde une largeur raisonnable */
@media (min-width: 641px) and (max-width: 1024px) {
  .cta-side .notify, .cta-side .notify-fine, .cta-side .cta-alt { max-width: 520px; }
}

.foot-tag span { display: block; }
.btn { font-family: var(--font-body); cursor: pointer; }

/* Ordinateur portable (13-14 pouces) : on resserre le héros pour que le bandeau et « Pour les plus curieux » restent au-dessus de la ligne de flottaison */
@media (min-width: 861px) {
  .hero { padding-top: var(--s4); }
  .eyebrow { margin-bottom: var(--s2); }
  .wordmark { font-size: clamp(4rem, min(14vw, 22vh), 10.5rem); }
  .lede { margin-top: var(--s3); }
  .hero-actions, .hero-tags { margin-top: var(--s3); }
  .ticker { margin-top: var(--s5); }
  .scroll-hint { margin: 12px auto var(--s2); padding: 10px 0 3px; }
}
@media (min-width: 861px) and (max-height: 720px) {
  .wordmark { font-size: clamp(4rem, min(14vw, 18vh), 10.5rem); }
  .lede { margin-top: var(--s2); font-size: 1.25rem; }
  .hero-actions, .hero-tags { margin-top: var(--s2); }
  .ticker { margin-top: var(--s4); }
}

/* Ordinateur : le héros remplit exactement le premier écran, « Pour les plus curieux » est tout en bas */
@media (min-width: 861px) {
  .hero { display: flex; flex-direction: column; min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); }
  .hero > .wrap { margin-block: auto; }
  .hero > .ticker { margin-top: var(--s4); }
  .hero > .scroll-hint { margin-bottom: 0; padding-bottom: var(--s2); }
}

/* Pied de page : NEKKETSU, la phrase et les liens alignés à gauche ; la mention du domaine à droite */
@media (min-width: 641px) {
  .foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); align-items: center; }
  .foot-word, .foot-tag, .foot-links { grid-column: 1; }
  .foot-tag { margin: 0; }
  .foot-in > .mono { grid-column: 2; grid-row: 3; padding-right: 76px; }
}