/* Layout: une feuille de plan encadrée (Heron) — sections en cellules à filets fins, croix de repérage, axes A-B-C ;
   palette et voix de « Le calque » : papier, graphite, un seul signal minium, bleu de Prusse pour la position. */
:root {
  --bg: oklch(.966 .006 85);
  --surface: oklch(.992 .003 85);
  --surface2: oklch(.946 .007 85);
  --line: oklch(.84 .008 80);
  --line-ctl: oklch(.6 .01 75);
  --ink: oklch(.235 .008 70);
  --ink-2: oklch(.42 .008 70);
  --ink-3: oklch(.55 .008 70);
  --ink-4: oklch(.8 .007 78);
  --signal: oklch(.68 .175 44);
  --signal-ink: oklch(.53 .16 40);
  --signal-bg: oklch(.94 .035 55);
  --on-signal: oklch(.18 .01 60);
  --link: oklch(.47 .1 250);
  --link-bg: oklch(.47 .1 250 / .16);
  --grain: .05;
  --ft: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --fv: "Newsreader", "Iowan Old Style", Georgia, serif;
  --fm: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --cell: clamp(16px, 2.2vw, 28px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(.205 .01 70); --surface: oklch(.235 .01 70); --surface2: oklch(.262 .01 70);
    --line: oklch(.35 .01 70); --line-ctl: oklch(.52 .012 75);
    --ink: oklch(.93 .016 85); --ink-2: oklch(.8 .014 85); --ink-3: oklch(.68 .012 80); --ink-4: oklch(.42 .01 75);
    --signal: oklch(.74 .16 50); --signal-ink: oklch(.79 .14 55); --signal-bg: oklch(.3 .05 50);
    --on-signal: oklch(.18 .01 60); --link: oklch(.76 .09 245); --link-bg: oklch(.76 .09 245 / .2); --grain: .07;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: oklch(.205 .01 70); --surface: oklch(.235 .01 70); --surface2: oklch(.262 .01 70);
  --line: oklch(.35 .01 70); --line-ctl: oklch(.52 .012 75);
  --ink: oklch(.93 .016 85); --ink-2: oklch(.8 .014 85); --ink-3: oklch(.68 .012 80); --ink-4: oklch(.42 .01 75);
  --signal: oklch(.74 .16 50); --signal-ink: oklch(.79 .14 55); --signal-bg: oklch(.3 .05 50);
  --on-signal: oklch(.18 .01 60); --link: oklch(.76 .09 245); --link-bg: oklch(.76 .09 245 / .2); --grain: .07;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  background-color: var(--bg); color: var(--ink);
  font-family: var(--ft); font-size: 16px; line-height: 1.5; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-left: var(--gut); padding-right: var(--gut-r); padding-block: 12px 24px;
  overflow-x: hidden;
}
/* Grain du papier : bruit SVG en surimpression, très léger */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
img, canvas, svg { max-width: 100%; }

.page { max-width: 1680px; margin-inline: auto; border: 1px solid var(--line); border-top: 0; position: relative; }
main > section { border-top: 1px solid var(--line); position: relative; }

/* Typo : grotesque élargie en capitales (titres), Newsreader pour la voix de l'assistant, Plex Mono pour les repères */
.h-xxl, .h-xl, .h-lg, .h-md {
  font-family: var(--ft); font-weight: 720; font-stretch: 116%; text-transform: uppercase;
  letter-spacing: -.028em; line-height: .9;
}
.h-xxl { font-size: clamp(2.5rem, 8.2vw, 8.6rem); }
.h-xl { font-size: clamp(2.2rem, 5.3vw, 5.4rem); }
.h-lg { font-size: clamp(1.75rem, 3.3vw, 3.25rem); line-height: .94; }
.h-md { font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1; }
.eyebrow {
  font-family: var(--fm); font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2); display: inline-flex; align-items: center; gap: .6em;
}
.lead { font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.voice { font-family: var(--fv); font-style: italic; }
.ref { font-family: var(--fm); font-size: .72rem; color: var(--ink-3); letter-spacing: .04em; }
.arr { display: inline-block; transition: transform .35s var(--ease-out); }
.split .w { display: inline-block; }
.split .w > span { display: inline-block; }
#h-hero .w { overflow: hidden; vertical-align: top; padding: .14em 0 .06em; margin: -.14em 0 -.06em; }

/* Les cinq formes de Le calque */
.sh { display: inline-block; width: .62em; height: .62em; flex: none; border: 1.5px solid currentColor; }
.sh-pers { border-radius: 50%; }
.sh-chantier { transform: rotate(45deg) scale(.82); }
.sh-seance { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 0, 50% 90%); }
.sh-piece { clip-path: polygon(0 0, 62% 0, 100% 38%, 100% 100%, 0 100%); }
.sh.fill { background: var(--signal); border-color: var(--signal-ink); }

/* Croix de repérage aux angles */
.reg { position: absolute; width: 15px; height: 15px; z-index: 3; pointer-events: none; }
.reg::before, .reg::after { content: ""; position: absolute; background: var(--ink-3); }
.reg::before { left: 7px; top: 0; width: 1px; height: 15px; }
.reg::after { top: 7px; left: 0; height: 1px; width: 15px; }
.reg.tl { left: 6px; top: 6px; } .reg.tr { right: 6px; top: 6px; } .reg.bl { left: 6px; bottom: 6px; } .reg.br { right: 6px; bottom: 6px; }

/* Barre de navigation */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; display: flex; align-items: stretch;
  background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 56px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; padding: 0 var(--cell); text-decoration: none; font-weight: 760; font-stretch: 118%; letter-spacing: .02em; font-size: 1.05rem; }
.logo { width: 30px; height: 30px; }
.logo-calque { fill: color-mix(in oklab, var(--bg) 70%, transparent); }
.logo-sig { fill: var(--signal); }
.nav-cells { margin-left: auto; display: flex; align-items: stretch; }
.nav-cells > a, .nav-cta {
  position: relative; display: flex; align-items: flex-start; padding: 10px 14px 0; min-width: clamp(96px, 9.5vw, 150px);
  border-left: 1px solid var(--line); font-family: var(--fm); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; transition: background-color .25s var(--ease);
}
.nav-cells > a:hover { background: var(--surface2); }
.tick { position: absolute; right: 5px; bottom: 5px; width: 6px; height: 6px; border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3); }
.nav-cta { color: var(--signal-ink); min-width: clamp(150px, 13vw, 210px); justify-content: space-between; text-align: left; }
.nav-cta .arr { align-self: flex-end; margin-bottom: 8px; }
.nav-cta:hover { background: var(--signal-bg); }
.nav-cta:hover .arr, .hero-cta:hover .arr, .btn-primary:hover .arr { transform: translateX(5px); }

/* 1 · Héros */
.hero-art { position: relative; padding: 34px 34px 30px 40px; border-bottom: 1px solid var(--line); }
.axes { position: absolute; display: flex; font-family: var(--fm); font-size: .62rem; color: var(--ink-3); pointer-events: none; }
.axes span { width: 17px; height: 17px; border: 1px solid var(--line-ctl); border-radius: 50%; display: grid; place-items: center; background: var(--bg); }
.axes-top { left: 40px; right: 34px; top: 9px; justify-content: space-between; }
.axes-left { top: 34px; bottom: 30px; left: 12px; flex-direction: column; justify-content: space-around; }
.stipple { position: relative; margin: 0; aspect-ratio: 16 / 6.2; max-width: 100%; overflow: hidden; background: var(--bg); }
.stipple canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stipple-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; filter: grayscale(1) contrast(1.05); opacity: .85; }
.js-stipple .stipple-fallback { display: none; }
.pin { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; align-items: center; gap: 8px; transform: translate(-6px, -6px); pointer-events: none; }
.pin i { width: 12px; height: 12px; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in oklab, var(--bg) 85%, transparent); flex: none; }
.pin span { font-family: var(--fm); font-size: .68rem; letter-spacing: .03em; background: var(--surface); border: 1px solid var(--ink); padding: 3px 7px; white-space: nowrap; color: var(--ink-2); }
.pin b { font-weight: 600; color: var(--ink); text-transform: uppercase; margin-right: 6px; }
.pin-b span { order: -1; }
.pin-b { transform: translate(calc(-100% + 6px), -6px); }
.dim { position: absolute; left: 40px; right: 34px; bottom: 9px; height: 12px; border-left: 1px solid var(--ink-3); border-right: 1px solid var(--ink-3); display: grid; place-items: center; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--ink-3); }
.dim span { position: relative; background: var(--bg); padding: 0 8px; font-family: var(--fm); font-size: .64rem; color: var(--ink-3); }

.hero-band { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr) minmax(0, .5fr); }
.hero-band h1 { padding: 20px var(--cell) 22px; font-size: clamp(2.1rem, 4.1vw, 4.7rem); }
.hero-lede { border-left: 1px solid var(--line); padding: 20px var(--cell); display: flex; align-items: flex-start; }
.hero-lede p { font-size: .98rem; max-width: 44ch; }
.hero-cta {
  border-left: 1px solid var(--line); padding: 18px var(--cell); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  color: var(--signal-ink); font-family: var(--fm); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; text-align: left;
  transition: background-color .3s var(--ease);
}
.hero-cta .arr { align-self: flex-end; font-size: 1.3rem; }
.hero-cta:hover { background: var(--signal-bg); }

.ticker { border-top: 1px solid var(--line); overflow: hidden; height: 36px; display: flex; align-items: center; color: var(--ink-2); }
.ticker-track { display: flex; align-items: center; gap: 22px; white-space: nowrap; width: max-content; padding-left: 22px; animation: ticker 48s linear infinite; font-family: var(--fm); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.ticker-track .sh { color: var(--signal-ink); width: .7em; height: .7em; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Têtes de section */
.sec-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px var(--cell); padding: clamp(28px, 4vw, 56px) var(--cell) clamp(24px, 3vw, 40px); align-items: end; }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-aside { color: var(--ink-2); font-size: .95rem; max-width: 46ch; justify-self: end; }

/* 2 · Problème */
.pb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.pb-cell { padding: 0 0 26px; display: grid; gap: 14px; align-content: start; min-width: 0; border-left: 1px solid var(--line); }
.pb-cell:first-child { border-left: 0; }
.pb-cell header { display: flex; justify-content: space-between; padding: 10px var(--cell); border-bottom: 1px dashed var(--line); font-family: var(--fm); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.iso { width: 100%; height: clamp(120px, 13vw, 190px); }
.iso path, .iso circle { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.iso .faint { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.iso .cut { stroke: var(--signal); stroke-width: 2; }
.pb-cell h3 { padding: 0 var(--cell); font-size: clamp(1.15rem, 1.55vw, 1.45rem); font-weight: 720; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.015em; line-height: .98; }
.pb-cell p { padding: 0 var(--cell); color: var(--ink-2); font-size: .92rem; max-width: 36ch; }

/* 3 · Preuve */
.reveal-stage { min-height: clamp(300px, 52vh, 560px); display: grid; place-content: center; text-align: center; gap: .1em; padding: 48px var(--cell); }
.reveal-line { line-height: .95; }
@media (min-width: 901px) { .reveal-stage { min-height: calc(100vh - 58px); } }
.reveal-line .c { color: var(--ink); }
.chiffres { border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.chiffres-intro { padding: 22px var(--cell); color: var(--ink-2); font-size: .92rem; border-right: 1px solid var(--line); }
.chiffres-grid { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffres-grid div { padding: 20px var(--cell) 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: 6px; min-width: 0; }
.chiffres-grid div:first-child { border-left: 0; }
.chiffres-grid dt { font-family: var(--fm); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.chiffres-grid dd { margin: 0; font-weight: 700; font-stretch: 118%; font-size: clamp(2.2rem, 4.4vw, 4.4rem); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 4 · Sur le plan */
.terrain-pin { padding-bottom: clamp(24px, 3vw, 40px); }
.terrain-head { padding: clamp(28px, 4vw, 52px) var(--cell) 20px; display: grid; gap: 14px; }
.terrain-stage { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: var(--cell); padding: 0 var(--cell); align-items: start; }
.plan-wrap { position: relative; background: var(--surface); border: 1px solid var(--line); aspect-ratio: 680 / 440; max-width: 100%; overflow: hidden; }
.plan, .calque-sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wall { fill: none; stroke: var(--ink); stroke-width: 7; stroke-linecap: square; }
.win { fill: none; stroke: var(--surface); stroke-width: 4; }
.door { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.stair { stroke: var(--ink-3); stroke-width: 1; }
.hatch-l { stroke: var(--ink-4); stroke-width: 1; }
.axis-v path { stroke: var(--line); stroke-width: 1; stroke-dasharray: 10 4 2 4; fill: none; }
.axis-b circle { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1; }
.axis-t text, .l-dims text, .l-rooms text { font-family: var(--fm); fill: var(--ink-2); }
.axis-t text { font-size: 10px; text-anchor: middle; }
.l-dims text { font-size: 10px; text-anchor: middle; fill: var(--ink-3); }
.dimline { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.l-rooms text { font-size: 10.5px; text-anchor: middle; letter-spacing: .05em; }
.l-rooms .sub { fill: var(--ink-3); font-size: 9.5px; }
.qr-bg { fill: var(--surface); stroke: var(--ink); stroke-width: 1; }
.qr-fg { fill: var(--ink); }
.calque-sheet {
  position: absolute; inset: 0; z-index: 2;
  background: color-mix(in oklab, var(--surface) 38%, transparent);
  border: 1px solid var(--line-ctl); box-shadow: 0 18px 40px -24px oklch(.2 .02 60 / .45);
  backdrop-filter: blur(.6px); transform-origin: 70% 30%;
}
.calque-sheet::after { content: ""; position: absolute; right: -1px; top: -1px; width: 26px; height: 26px; background: linear-gradient(225deg, var(--bg) 50%, var(--surface2) 50%); border-left: 1px solid var(--line-ctl); border-bottom: 1px solid var(--line-ctl); }
.route { fill: none; stroke: var(--signal); stroke-width: 2.6; stroke-dasharray: 8 6; stroke-linecap: round; stroke-linejoin: round; }
.mk rect { stroke-width: 2; }
.mk.done rect { fill: var(--signal); stroke: var(--signal-ink); }
.mk.todo rect { fill: var(--surface); stroke: var(--signal-ink); }
.mk text { font-family: var(--fm); font-size: 11px; font-weight: 600; text-anchor: middle; fill: var(--ink); }
.mk { cursor: pointer; }
.mk:hover rect, .mk.is-sel rect { stroke: var(--ink); stroke-width: 2.6; }
.me-halo { fill: var(--link-bg); }
.me-dot { fill: var(--link); stroke: var(--surface); stroke-width: 2.5; }
.me text { font-family: var(--fm); font-size: 11px; font-weight: 600; fill: var(--link); }
.me .sub { font-weight: 400; fill: var(--ink-2); font-size: 10px; }
.pt-card { position: absolute; z-index: 4; width: min(300px, 80%); background: var(--surface); border: 1px solid var(--ink); padding: 12px 14px; display: grid; gap: 6px; box-shadow: 0 16px 30px -18px oklch(.2 .02 60 / .5); }
.pt-meta { font-family: var(--fm); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--signal-ink); }
.pt-title { font-weight: 650; font-size: .95rem; line-height: 1.3; }
.pt-quote { margin: 0; font-family: var(--fv); font-style: italic; font-size: 1rem; line-height: 1.4; color: var(--ink-2); }
.pt-src { font-family: var(--fm); font-size: .64rem; color: var(--ink-3); }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; display: grid; }
.step { counter-increment: st; border-top: 1px solid var(--line); padding: 16px 0 18px; display: grid; gap: 6px; color: var(--ink-3); transition: color .4s var(--ease); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step-k { font-family: var(--fm); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; display: flex; gap: 10px; align-items: center; }
.step-k::before { content: "0" counter(st); color: var(--ink-3); }
.step p { font-size: .98rem; max-width: 40ch; }
.step.is-on { color: var(--ink); }
.step.is-on .step-k::before { color: var(--signal-ink); }
/* 5 · Témoin */
.temoin-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.stipple-prod { aspect-ratio: 4 / 3; border-right: 1px solid var(--line); }
.stipple-prod figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; z-index: 2;
  padding: 8px var(--cell); font-family: var(--fm); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
  border-top: 1px dashed var(--line);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
}
.temoin-copy { padding: clamp(28px, 4vw, 56px) var(--cell); display: grid; gap: 20px; align-content: start; }
.specs { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.specs li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.specs svg { width: 30px; height: 30px; flex: none; padding: 5px; border: 1px solid var(--line-ctl); border-radius: 50%; }
.specs svg * { fill: none; stroke: var(--ink); stroke-width: 1.4; }

.eclate { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 2fr) minmax(0, .85fr); align-items: center; min-height: clamp(460px, 62vw, 700px); }
.eclate-head { padding: 28px var(--cell); display: grid; gap: 12px; align-self: start; }
.eclate-stage { position: relative; height: clamp(440px, 56vw, 660px); display: grid; place-items: center; overflow: hidden; }
.iso-stage { --gap: 52px; --s: 1; --rz: -45deg; --tx: -90px; position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transform: translateX(var(--tx)) translateY(calc(var(--gap) * 2)) scale(var(--s)) rotateX(58deg) rotateZ(var(--rz)); }
@media (max-width: 1300px) { .iso-stage { --s: .86; } }
.ly { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc(var(--i) * var(--gap))); }
.pl { position: absolute; inset: 0; border: 1.5px solid var(--ink); border-radius: 46px; background: var(--surface); transform-style: preserve-3d; }
.pl::before { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid var(--ink-3); border-radius: inherit; transform: translateZ(-9px); }
.pl i { position: absolute; display: block; }
.bumper { background: transparent; border: 15px solid var(--signal); box-shadow: inset 0 0 0 1.5px var(--signal-ink), 0 0 0 1.5px var(--signal-ink); }
.bumper::before { border-color: var(--signal-ink); }
.front .win { left: 68px; top: 26px; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--ink); box-shadow: 0 0 0 6px var(--surface), 0 0 0 7.5px var(--ink-3); }
.front .btn { left: 74px; top: 112px; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--surface2); }
.pl.cam { inset: 22px 62px 104px 62px; border-radius: 10px; }
.cam .lens { left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 8px var(--surface2), inset 0 0 0 9.5px var(--ink-3); }
.pl.pcb { inset: 16px; border-radius: 30px; background: repeating-linear-gradient(90deg, transparent 0 13px, var(--line) 13px 14px), var(--surface); }
.pcb .chip { left: 64px; top: 66px; width: 40px; height: 40px; border: 1.5px solid var(--ink); background: var(--ink); }
.pcb .ant { left: 118px; top: 24px; width: 34px; height: 16px; border: 1.5px solid var(--ink-2); border-bottom: 0; }
.pcb .mic { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--surface); }
.pcb .m1 { left: 28px; top: 120px; } .pcb .m2 { left: 128px; top: 120px; }
.pl.batt { inset: 34px 30px; border-radius: 10px; background: var(--surface2); }
.batt .cell { left: 14px; right: 14px; top: 14px; height: 50%; border: 1px dashed var(--ink-3); }
.batt .vib { right: 18px; bottom: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink); }
.back .mag { left: 45px; top: 45px; width: 110px; height: 110px; border-radius: 50%; border: 1.5px solid var(--ink); }
.back .mag2 { left: 62px; top: 62px; width: 76px; height: 76px; border-radius: 50%; border: 1px dashed var(--ink-3); }
.elbl {
  position: absolute; left: 100%; top: 100%; transform-origin: 0 0; transform: rotateZ(45deg) rotateX(-58deg) translateY(-50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--fm); font-size: 11.5px; letter-spacing: .04em; color: var(--ink-2);
}
.elbl::before { content: ""; width: 40px; height: 1px; background: var(--ink-3); }
.elbl b { width: 18px; height: 18px; display: grid; place-items: center; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 10px; }
.eclate-list { list-style: none; margin: 0; padding: 28px var(--cell); display: grid; gap: 0; align-self: end; }
.eclate-list li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-2); }
.eclate-list b { font-family: var(--fm); font-size: .72rem; color: var(--signal-ink); }

/* 6 · Produit */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-top: 1px solid var(--line); }
.feat-k { padding: clamp(22px, 3vw, 36px) var(--cell); display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--line); }
.feat-k h3 { font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 720; font-stretch: 114%; text-transform: uppercase; letter-spacing: -.02em; line-height: .95; }
.feat-k p { color: var(--ink-2); font-size: .95rem; max-width: 38ch; }
.feat-ui { margin: clamp(18px, 2.4vw, 32px) var(--cell); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line), 0 24px 48px -36px oklch(.2 .02 60 / .5); min-width: 0; font-size: .92rem; }
.ui-bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 650; font-stretch: 108%; }
.ui-mono { font-family: var(--fm); font-size: .7rem; font-weight: 500; letter-spacing: .05em; color: var(--ink-2); align-self: center; }
.ui-sujets { list-style: none; margin: 0; padding: 0; }
.ui-sujets li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ui-sujets li > .sh { margin-top: .35em; width: .7em; height: .7em; }
.ui-sujets b { display: block; font-weight: 620; }
.ui-sujets .voice { display: block; color: var(--ink-2); font-size: 1rem; line-height: 1.35; margin-top: 2px; }
.ui-cta { font-family: var(--fm); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; background: var(--signal); color: var(--on-signal); white-space: nowrap; border-radius: 3px; }
.ui-cta.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-ctl); }
.ui-done { display: flex; gap: 10px; align-items: center; padding: 12px 16px; color: var(--ink-2); font-size: .88rem; }
.ui-done svg { width: 18px; height: 18px; flex: none; }
.chk { fill: none; stroke: var(--signal-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pv-row:last-child { border-bottom: 0; }
.pv-n { font-family: var(--fm); font-size: .78rem; font-weight: 600; }
.pv-txt { display: grid; gap: 4px; }
.pv-txt .old { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.pv-txt .new { background: linear-gradient(transparent 62%, var(--signal-bg) 62%); }
.pv-q { margin: 0; font-family: var(--fv); font-style: italic; font-size: 1rem; line-height: 1.35; color: var(--ink-2); border-left: 2px solid var(--link); padding-left: 12px; }
.pv-q cite { display: block; margin-top: 6px; font-family: var(--fm); font-style: normal; font-size: .64rem; letter-spacing: .05em; color: var(--link); }
.ui-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); font-size: .85rem; overflow-x: auto; }
.ui-tabs span { padding: 11px 16px; color: var(--ink-2); white-space: nowrap; border-right: 1px solid var(--line); }
.ui-tabs span.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); font-weight: 600; }
.ui-tabs b { font-family: var(--fm); font-weight: 500; font-size: .72rem; margin-left: 6px; color: var(--ink-3); }
.mails { list-style: none; margin: 0; padding: 0; }
.mails li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mails li:last-child { border-bottom: 0; }
.mails .who { font-weight: 620; }
.mails .subj { color: var(--ink-2); }
.mails .draft { grid-column: 1 / -1; margin-top: 8px; font-family: var(--fv); font-size: 1.02rem; line-height: 1.45; background: var(--surface2); border: 1px solid var(--line); padding: 12px 14px; position: relative; }
.mails .draft::before { content: "Réponse prête · à votre façon"; display: block; font-family: var(--fm); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: var(--signal-ink); margin-bottom: 6px; }

/* 7 · Comme vous / 8 · Pour qui */
.comme, .pourqui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.comme-k, .pourqui-k { padding: clamp(28px, 4vw, 56px) var(--cell); display: grid; gap: 16px; align-content: start; border-right: 1px solid var(--line); }
.comme-list { list-style: none; margin: 0; padding: 0; }
.comme-list li { padding: 20px var(--cell); border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .98rem; max-width: 70ch; }
.comme-list li:last-child { border-bottom: 0; }
.comme-list b { display: block; color: var(--ink); font-weight: 680; font-stretch: 110%; font-size: 1.15rem; margin-bottom: 4px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:last-child { border-bottom: 0; }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--cell); font-weight: 700; font-stretch: 114%; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.05rem, 1.6vw, 1.35rem); transition: background-color .25s var(--ease); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: var(--surface2); }
.acc summary i { position: relative; width: 14px; height: 14px; flex: none; transition: transform .35s var(--ease-out); }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; background: var(--ink-2); }
.acc summary i::before { left: 0; right: 0; top: 6.5px; height: 1px; }
.acc summary i::after { top: 0; bottom: 0; left: 6.5px; width: 1px; }
.acc details[open] summary i { transform: rotate(45deg); }
.acc details p { padding: 0 var(--cell) 20px; color: var(--ink-2); max-width: 56ch; }

/* 9 · Pilote : la seule bande inversée de la page */
.pilote { background: var(--ink); color: var(--bg); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pilote .reg::before, .pilote .reg::after { background: color-mix(in oklab, var(--bg) 55%, var(--ink)); }
.pilote .eyebrow, .pilote .lead { color: color-mix(in oklab, var(--bg) 72%, var(--ink)); }
.pilote-k { padding: clamp(36px, 5vw, 72px) var(--cell); display: grid; gap: 22px; align-content: start; }
.pilote-side { border-left: 1px solid color-mix(in oklab, var(--bg) 22%, var(--ink)); display: grid; align-content: space-between; }
.countdown { padding: clamp(28px, 4vw, 56px) var(--cell) 20px; display: grid; gap: 6px; }
.cd-n { font-weight: 760; font-stretch: 122%; font-size: clamp(4.5rem, 10vw, 9rem); line-height: .82; letter-spacing: -.04em; color: var(--signal); font-variant-numeric: tabular-nums; }
.cd-l, .cd-d { font-family: var(--fm); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.cd-d { color: color-mix(in oklab, var(--bg) 62%, var(--ink)); }
.pilote-facts { margin: 0; border-top: 1px solid color-mix(in oklab, var(--bg) 22%, var(--ink)); }
.pilote-facts div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px var(--cell); border-bottom: 1px solid color-mix(in oklab, var(--bg) 22%, var(--ink)); }
.pilote-facts div:last-child { border-bottom: 0; }
.pilote-facts dt { font-family: var(--fm); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--bg) 62%, var(--ink)); padding-top: 2px; }
.pilote-facts dd { margin: 0; font-size: .95rem; }

/* 10 · Appel */
.cta { padding: clamp(56px, 8vw, 120px) var(--cell); display: grid; justify-items: center; text-align: center; gap: 22px; }
.cta h2 { max-width: 16ch; }
.cta-sub { color: var(--ink-2); }
.cta-grid { position: absolute; inset: 10px 12px; display: flex; justify-content: space-between; pointer-events: none; font-family: var(--fm); font-size: .62rem; color: var(--ink-3); }
.btn-primary {
  display: inline-flex; align-items: center; gap: 22px; padding: 14px 18px 14px 20px; background: var(--signal); color: var(--on-signal);
  border: 1px solid var(--signal-ink); font-family: var(--fm); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.btn-primary:hover { background: color-mix(in oklab, var(--signal) 86%, var(--ink)); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { padding: 11px 16px; border: 1px solid var(--line-ctl); font-family: var(--fm); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; }
.btn-ghost:hover { background: var(--surface2); }

/* Pied */
.foot { border-top: 1px solid var(--line); }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
.foot-claim { padding: 22px var(--cell); font-weight: 720; font-stretch: 114%; text-transform: uppercase; font-size: 1.15rem; line-height: 1; max-width: 18ch; }
.foot-cols nav { padding: 22px var(--cell); display: grid; gap: 8px; align-content: start; border-left: 1px solid var(--line); font-size: .92rem; }
.foot-cols nav a, .foot-cols nav button { text-decoration: none; text-align: left; width: fit-content; }
.foot-cols nav a:hover, .foot-cols nav button:hover { color: var(--signal-ink); }
.wordmark { display: block; width: 100%; height: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; }
.wordmark text { font-family: var(--ft); font-weight: 800; font-stretch: 125%; font-size: 214px; fill: none; stroke: var(--ink); stroke-width: 1.1; letter-spacing: -.01em; }
.wm-guides path { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 6; fill: none; }
.wm-marks circle { fill: var(--signal); }
.foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 12px var(--cell); font-family: var(--fm); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

/* Demande de démo (maquette) */
.demo { position: fixed; inset: 0; z-index: 80; }
.demo-scrim { position: absolute; inset: 0; background: oklch(.2 .01 60 / .38); backdrop-filter: blur(2px); }
.demo-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--bg); border-left: 1px solid var(--ink);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px);
}
.demo-head { display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px; border-bottom: 1px solid var(--line); }
.demo-head h2 { font-weight: 720; font-stretch: 116%; text-transform: uppercase; font-size: 1.3rem; letter-spacing: -.01em; }
.demo-x { width: 36px; height: 36px; border: 1px solid var(--line-ctl); font-size: 1.3rem; line-height: 1; }
.demo-body { padding: 8px 20px 28px; display: grid; gap: 4px; }
.f { border: 0; margin: 0; padding: 14px 0 10px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); min-width: 0; }
.f > span, .f legend { font-family: var(--fm); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 0; }
.f legend { margin-bottom: 8px; }
.f input:not([type="radio"]):not([type="checkbox"]) { font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent; border: 0; padding: 4px 0; width: 100%; }
.f input:focus-visible { outline: none; box-shadow: 0 1px 0 var(--link); }
.seg, .chips, .slots { display: flex; flex-wrap: wrap; gap: 6px; }
.seg input, .chips input, .slots input { position: absolute; opacity: 0; pointer-events: none; }
.seg label, .chips label, .slots label { padding: 8px 12px; border: 1px solid var(--line-ctl); font-size: .88rem; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.seg input:checked + label, .chips input:checked + label, .slots input:checked + label { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg input:focus-visible + label, .chips input:focus-visible + label, .slots input:focus-visible + label { outline: 2px solid var(--link); outline-offset: 2px; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slots .day { grid-column: 1 / -1; font-family: var(--fm); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding-top: 6px; }
.slots label { text-align: center; font-family: var(--fm); font-size: .8rem; }
.demo-send { margin-top: 18px; justify-content: space-between; }
.demo-done { padding: 40px 20px; display: grid; gap: 14px; justify-items: start; }
.demo-done svg { width: 64px; height: 64px; }
.done-box { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.done-t { font-weight: 720; font-stretch: 116%; text-transform: uppercase; font-size: 1.8rem; line-height: 1; }
.done-s { font-family: var(--fv); font-size: 1.15rem; line-height: 1.45; color: var(--ink-2); max-width: 36ch; }
.f-err { box-shadow: 0 1px 0 var(--signal-ink); }

/* Petits écrans */
@media (max-width: 1100px) {
  .nav-cells > a { min-width: 0; }
  .hero-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-band h1 { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .hero-lede { border-left: 0; }
  .eclate { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .eclate-list { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cell); }
}
@media (max-width: 900px) {
  .nav-cells > a { display: none; }
  .sec-head, .temoin-top, .feat, .comme, .pourqui, .pilote, .terrain-stage, .chiffres { grid-template-columns: minmax(0, 1fr); }
  .sec-aside { justify-self: start; }
  .pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-cell:nth-child(3) { border-left: 0; }
  .pb-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .chiffres-intro { border-right: 0; border-bottom: 1px solid var(--line); }
  .stipple-prod { border-right: 0; border-bottom: 1px solid var(--line); }
  .feat-k, .comme-k, .pourqui-k { border-right: 0; border-bottom: 1px solid var(--line); }
  .pilote-side { border-left: 0; border-top: 1px solid color-mix(in oklab, var(--bg) 22%, var(--ink)); }
  .eclate { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .eclate-stage { height: 420px; }
  .iso-stage { --s: .78; --tx: -60px; }
  .eclate-list { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-claim { grid-column: 1 / -1; border-bottom: 1px solid var(--line); max-width: none; }
  .foot-cols nav:first-of-type { border-left: 0; }
}
@media (max-width: 600px) {
  body { padding-block: 0 16px; }
  .hero-art { padding: 26px 10px 26px 26px; }
  .axes-top { left: 26px; right: 10px; }
  .axes-left { left: 4px; }
  .axes span { width: 15px; height: 15px; }
  .dim { left: 26px; right: 10px; }
  .stipple:not(.stipple-prod) { aspect-ratio: 4 / 3.3; }
  .pin span { display: none; }
  .hero-band { grid-template-columns: minmax(0, 1fr); }
  .hero-cta { border-left: 0; border-top: 1px solid var(--line); flex-direction: row; align-items: center; min-height: 56px; }
  .hero-cta .arr { align-self: center; }
  .nav-cta { min-width: 0; padding: 0 14px; align-items: center; gap: 12px; }
  .nav-cta .arr { align-self: center; margin: 0; }
  .pb-grid, .chiffres-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pb-grid { grid-template-columns: minmax(0, 1fr); }
  .pb-cell { border-left: 0; border-top: 1px solid var(--line); }
  .pb-cell:first-child { border-top: 0; }
  .chiffres-grid div:nth-child(3) { border-left: 0; }
  .chiffres-grid div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .iso-stage { --s: .62; --tx: -10px; }
  .elbl { gap: 0; }
  .elbl::before { width: 22px; }
  .elbl { font-size: 0; }
  .elbl b { font-size: 10px; }
  .pv-row { grid-template-columns: 36px minmax(0, 1fr); }
  .pv-q { grid-column: 2; }
  .mails li { grid-template-columns: minmax(0, 1fr); }
  .ui-sujets li { grid-template-columns: auto minmax(0, 1fr); }
  .ui-sujets .ui-cta { grid-column: 2; justify-self: start; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-grid span:nth-child(2), .cta-grid span:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}