/* APPWIRE — site vitrine
   Concept : un instrument de mesure. Papier calque froid, encre, outremer.
   Le jaune surligneur marque toujours « là où vous êtes cité ». */

:root{
  --bg:#E8EBE6;
  --bg-2:#DDE1DA;
  --surface:#F5F7F2;
  --ink:#0F1416;
  --muted:#59625F;
  --line:#C3C9C1;
  --accent:#2238F5;
  --accent-ink:#FFFFFF;
  --mark:#FFE36B;
  --brand:#2238F5;        /* bleu du rideau, identique dans les deux thèmes */
  --brand-ink:#FFFFFF;
  --mark-ink:#0F1416;
  --ok:#1D7A4E; --warn:#A6620B; --hot:#C2361F;
  --term-bg:#0F1416; --term-fg:#DCE3DA; --term-dim:#7E8A85;
  --display:"Anybody","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1214; --bg-2:#151B1E; --surface:#182024; --ink:#E6EBE3; --muted:#93A09A; --line:#2A3438;
    --accent:#7F8DFF; --accent-ink:#0E1214; --mark:#E8CC4E; --mark-ink:#0E1214;
    --ok:#5BC48E; --warn:#E3A24A; --hot:#F0745C;
    --term-bg:#070A0B; --term-fg:#DCE3DA; --term-dim:#6E7A75;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1214; --bg-2:#151B1E; --surface:#182024; --ink:#E6EBE3; --muted:#93A09A; --line:#2A3438;
  --accent:#7F8DFF; --accent-ink:#0E1214; --mark:#E8CC4E; --mark-ink:#0E1214;
  --ok:#5BC48E; --warn:#E3A24A; --hot:#F0745C;
  --term-bg:#070A0B; --term-fg:#DCE3DA; --term-dim:#6E7A75;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.eyebrow b{color:var(--accent);font-weight:500}
mark{background:linear-gradient(transparent 12%,var(--mark) 12%,var(--mark) 88%,transparent 88%);color:var(--mark-ink);padding:0 .12em}
.muted{color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* Type scale */
.t-hero{font-size:clamp(46px,8.4vw,128px);line-height:.9;font-weight:800;font-variation-settings:"wdth" 68}
.t-h1{font-size:clamp(40px,6.4vw,92px);line-height:.92;font-weight:800;font-variation-settings:"wdth" 72}
.t-h2{font-size:clamp(32px,4.6vw,62px);line-height:.98;font-weight:700;font-variation-settings:"wdth" 80}
.t-h3{font-size:clamp(22px,2.2vw,28px);line-height:1.1;font-weight:650;font-variation-settings:"wdth" 92}
.lede{font-size:clamp(18px,1.7vw,21px);line-height:1.5;max-width:44ch}
.light{font-weight:300;font-variation-settings:"wdth" 120;color:var(--muted)}

/* Buttons */
.btn{--bb:var(--ink);--bf:var(--bg);display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;line-height:1;padding:15px 22px;border-radius:999px;border:1px solid var(--bb);background:var(--bb);color:var(--bf);text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .45s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover::before{transform:none}
.btn:hover{color:var(--accent-ink);border-color:var(--accent)}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.on-accent{--bb:var(--accent-ink);--bf:var(--accent)}
.btn.on-accent::before{background:var(--ink)}
.btn.on-accent:hover{color:var(--bg);border-color:var(--ink)}
.link{font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:transform .5s var(--ease),background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header.solid{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.site-header.hide{transform:translateY(-100%)}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:68px}
.logo{display:flex;align-items:center;flex:none;text-decoration:none}
.logo img{display:block;height:34px;width:auto}
.site-footer .logo img{height:40px}
.nav{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.nav a{display:block;padding:8px 12px;border-radius:999px;text-decoration:none;font-size:15px;color:var(--muted);transition:color .25s,background .25s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--bg-2)}
.header-cta{padding:11px 18px}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.menu-open .burger span:first-child{top:21px;transform:rotate(45deg)}
.menu-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:45;background:var(--bg);padding:calc(96px + env(safe-area-inset-top,0px)) var(--gutter) 32px;display:flex;flex-direction:column;gap:6px;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
.menu-open .mobile-menu{clip-path:inset(0);visibility:visible}
.mobile-menu a{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 80;font-size:clamp(34px,9vw,56px);line-height:1.1;text-decoration:none}
.mobile-menu a[aria-current="page"]{color:var(--accent)}
.mobile-menu .btn{margin-top:24px;align-self:flex-start;font-family:var(--body);font-size:15px}
@media (max-width:960px){.nav,.header-cta{display:none}.burger{display:block}}

/* Page transition curtain */
.curtain{position:fixed;inset:0;z-index:200;background:var(--brand);display:grid;place-items:center;pointer-events:none;transform:translateY(100%);visibility:hidden}
.curtain > *{grid-area:1/1}
.curtain svg{width:min(80vw,560px);height:auto}
.curtain circle{fill:none;stroke:var(--brand-ink);stroke-opacity:.22}
.curtain-mark{width:clamp(64px,8vw,96px);height:auto}
html.is-entering .curtain{transform:none;visibility:visible}

main{padding-top:68px}
section{position:relative}
.sec{padding-block:clamp(80px,11vw,160px)}
.sec-tight{padding-block:clamp(56px,7vw,96px)}
.sec-head{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head p.lede{margin-top:20px;color:var(--muted)}
@media (max-width:760px){.sec-head{grid-template-columns:minmax(0,1fr);gap:12px}}

/* Split text (lines/words wrapped by JS) */
/* Les mots montent depuis le bas : on ne masque que le bas, pour ne jamais rogner les accents des majuscules. */
.w-mask{display:inline-block;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;clip-path:inset(-.6em -.3em 0 -.3em)}
.w-in{display:inline-block;will-change:transform}

/* HOME HERO */
.hero{padding-block:clamp(56px,9vw,120px) clamp(32px,4vw,56px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.hero-side{display:grid;gap:28px;padding-bottom:10px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}

/* Video stage */
.stage{padding-inline:var(--gutter)}
.stage-frame{position:relative;max-width:var(--max);margin-inline:auto;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--bg-2);will-change:transform,border-radius;box-shadow:0 40px 80px -40px color-mix(in srgb,var(--ink) 40%,transparent)}
.stage-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sound-btn{position:absolute;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;border:0;background:color-mix(in srgb,#0F1416 70%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font:600 14px var(--body);cursor:pointer;transition:transform .3s var(--ease),background .3s}
.sound-btn:hover{transform:scale(1.04);background:#2238F5}
.sound-btn i{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center}
.sound-btn i::before{content:"";border-left:9px solid #0F1416;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.sound-btn.playing i::before{border:0;width:9px;height:10px;margin:0;border-left:3px solid #0F1416;border-right:3px solid #0F1416}
.cursor-pill{position:fixed;left:0;top:0;z-index:60;pointer-events:none;padding:8px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 13px var(--body);opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s,transform .25s var(--ease)}
.cursor-pill.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (max-width:600px){.stage-frame{border-radius:14px}.sound-btn{left:10px;bottom:10px;padding:7px 12px 7px 8px;font-size:12.5px}.sound-btn i{width:22px;height:22px}}

.stage--fx{padding-inline:0}
.stage--fx .stage-frame{max-width:none;border-radius:0;box-shadow:none}

/* Ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding-block:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:48px;width:max-content;will-change:transform}
.ticker span{font-family:var(--mono);font-size:14px;white-space:nowrap;color:var(--muted)}
.ticker span::before{content:"› ";color:var(--accent)}

/* Shift (pinned story) */
.shift-pin{min-height:100vh;display:grid;align-items:center;padding-block:clamp(80px,10vw,120px)}
.shift-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.shift-copy .t-h2{margin-top:18px}
.shift-copy .lede{margin-top:22px;color:var(--muted)}
.shift-state{margin-top:32px;display:flex;gap:10px;font-family:var(--mono);font-size:12.5px}
.shift-state span{padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);transition:all .4s}
.shift-state span.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.screen{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;min-height:440px;overflow:hidden}
.screen-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;margin-bottom:20px;background:var(--bg)}
.screen-bar::before{content:"";width:12px;height:12px;border:2px solid var(--muted);border-radius:50%}
.serp{display:grid;gap:13px}
.serp .r{display:grid;gap:5px}
.serp i{display:block;height:9px;border-radius:2px;background:var(--line)}
.serp .r i:first-child{width:58%;background:color-mix(in srgb,var(--accent) 45%,var(--line))}
.serp .r i:nth-child(2){width:94%}
.serp .r i:nth-child(3){width:72%}
.ai-layer{position:absolute;inset:22px;display:grid;align-content:start;gap:16px}
.ai-layer .q{justify-self:end;max-width:86%;background:var(--bg);border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:15px}
.ai-layer .a{font-size:16.5px;line-height:1.6}
.ai-layer .src{display:flex;gap:8px;flex-wrap:wrap}
.ai-layer .src span{font-family:var(--mono);font-size:11.5px;border:1px solid var(--line);border-radius:6px;padding:4px 8px;color:var(--muted)}
.ai-layer .src span.me{border-color:var(--accent);color:var(--accent)}
@media (max-width:900px){.shift-grid{grid-template-columns:minmax(0,1fr)}.screen{min-height:400px}}

/* Live answer card */
.answer{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -34px color-mix(in srgb,var(--ink) 40%,transparent)}
.answer-top{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.answer-top::-webkit-scrollbar{display:none}
.model{font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:999px;color:var(--muted);white-space:nowrap;border:1px solid transparent;transition:all .35s}
.model.on{color:var(--ink);border-color:var(--line);background:var(--bg)}
.model.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:1px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.answer-body{padding:22px;display:grid;gap:16px}
.answer .q{justify-self:end;max-width:88%;background:var(--bg);border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:15px}
.answer .a{font-size:16px;line-height:1.6;min-height:9.6em}
.cite{font-family:var(--mono);font-size:10.5px;vertical-align:super;color:var(--accent);margin-left:1px}
.caret{display:inline-block;width:8px;height:1.05em;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink .9s steps(1) infinite}
.answer-foot{display:flex;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)}
.answer-foot b{color:var(--ink);font-weight:500}
.tag-ex{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:2px 6px;color:var(--muted)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.demo-grid{grid-template-columns:minmax(0,1fr)}}

/* Horizontal steps */
.hsteps{overflow:hidden}
.hsteps-track{display:flex;gap:clamp(16px,2vw,28px);width:max-content;padding-inline:var(--gutter)}
.hstep{width:min(78vw,460px);flex:none;border-top:2px solid var(--ink);padding-top:22px;display:grid;gap:14px;align-content:start}
.hstep .n{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 60;font-size:clamp(80px,10vw,140px);line-height:.8;color:var(--bg-2);-webkit-text-stroke:1px var(--line)}
.hstep h3{font-size:clamp(26px,2.6vw,34px);font-weight:700;font-variation-settings:"wdth" 86}
.hstep p{color:var(--muted);max-width:40ch}
.hstep code{font-family:var(--mono);font-size:12.5px;background:var(--bg-2);padding:2px 6px;border-radius:4px;color:var(--ink)}
.progress-line{height:2px;background:var(--line);margin:40px var(--gutter) 0;position:relative;max-width:calc(var(--max) - 2*var(--gutter))}
.progress-line i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){.hsteps-track{flex-direction:column;width:auto}.hstep{width:auto}.progress-line{display:none}}

/* Paths (3 ways) */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.path{padding:32px 28px 36px 0;display:grid;gap:16px;align-content:start;text-decoration:none;position:relative;min-width:0}
.path + .path{padding-left:28px;border-left:1px solid var(--line)}
.path .k{font-family:var(--mono);font-size:12px;color:var(--accent)}
.path h3{font-size:clamp(26px,2.8vw,38px);font-weight:700;font-variation-settings:"wdth" 82;transition:transform .5s var(--ease)}
.path p{color:var(--muted)}
.path .go{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-top:8px}
.path .go span{transition:transform .4s var(--ease)}
.path:hover h3{transform:translateX(6px)}
.path:hover .go span{transform:translateX(6px)}
.path::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.path + .path::after{left:0}
.path:hover::after{transform:none}
@media (max-width:860px){.paths{grid-template-columns:minmax(0,1fr)}.path,.path + .path{padding-left:0;border-left:0;border-top:1px solid var(--line)}}

/* Dashboard specimen */
.dash{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.dash-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.dash-bar .site{color:var(--ink);font-weight:500}
.dash-bar .cron{margin-left:auto;display:flex;gap:8px;align-items:center}
.dash-bar code{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:2px 7px;color:var(--ink)}
.dash-grid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr) minmax(0,1.2fr)}
.dash-grid > div{padding:22px 20px;min-width:0;transition:background .5s,opacity .5s}
.dash-grid > div + div{border-left:1px solid var(--line)}
.panel-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;display:flex;justify-content:space-between;gap:8px}
.score{display:flex;align-items:flex-end;gap:10px}
.score .big{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 60;font-size:96px;line-height:.8;font-variant-numeric:tabular-nums}
.score .of{font-family:var(--mono);color:var(--muted);font-size:14px;padding-bottom:6px}
.delta{margin-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--ok)}
.spark{margin-top:18px;width:100%;height:60px;display:block}
.spark .area{fill:color-mix(in srgb,var(--accent) 14%,transparent)}
.spark .ln{fill:none;stroke:var(--accent);stroke-width:2}
.spark .dot{fill:var(--accent)}
.spark .grid{stroke:var(--line);stroke-width:1}
.models{display:grid;gap:13px}
.mrow{display:grid;grid-template-columns:90px minmax(0,1fr) 42px;align-items:center;gap:10px;font-size:14px}
.mrow .track{height:8px;background:var(--bg-2);border-radius:99px;overflow:hidden}
.mrow .fill{height:100%;background:var(--ink);border-radius:99px;width:var(--v);transform-origin:left}
.mrow .pct{font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.mrow.low .fill{background:var(--hot)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.prow .pq{font-family:var(--mono);font-size:12.5px;overflow-wrap:anywhere}
.dots{display:flex;gap:4px}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots i.y{background:var(--accent)}
.actions{display:grid;gap:10px}
.act{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);transition:border-color .25s,transform .25s var(--ease)}
.act:hover{border-color:var(--ink);transform:translateX(3px)}
.act .chk{width:18px;height:18px;border:1.5px solid var(--muted);border-radius:4px;margin-top:2px}
.act b{font-weight:600;font-size:14.5px;display:block}
.act .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chip{font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:4px;border:1px solid currentColor;line-height:1.5}
.chip.hi{color:var(--hot)}.chip.md{color:var(--warn)}.chip.t{color:var(--muted)}.chip.ok{color:var(--ok)}
.dash[data-focus] .dash-grid > div{opacity:.35}
.dash[data-focus="score"] .p-score,.dash[data-focus="models"] .p-models,.dash[data-focus="actions"] .p-actions{opacity:1;background:var(--bg)}
.dash[data-focus="scan"] .dash-bar{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.dash[data-focus="scan"] .dash-grid > div{opacity:.5}
@media (max-width:1020px){.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-grid > div:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media (max-width:640px){.dash-grid{grid-template-columns:minmax(0,1fr)}.dash-grid > div + div{border-left:0;border-top:1px solid var(--line)}.dash-bar .cron{margin-left:0}}

/* Sticky feature walkthrough (Plateforme) */
.walk{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,5vw,80px)}
.walk-steps{display:grid}
.walk-step{min-height:72vh;display:grid;align-content:center;gap:16px;padding-block:40px;opacity:.3;transition:opacity .5s}
.walk-step.on{opacity:1}
.walk-step .k{font-family:var(--mono);font-size:12px;color:var(--accent)}
.walk-step p{color:var(--muted);max-width:44ch}
.walk-step ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:8px;font-size:15.5px}
.walk-step li{padding-left:20px;position:relative}
.walk-step li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:2px;background:var(--accent)}
.walk-visual{position:sticky;top:96px;height:max-content;align-self:start}
.walk-visual .dash-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.walk-visual .dash-grid > div:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
.walk-visual .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.walk-visual .score .big{font-size:84px}
@media (max-width:600px){.walk-visual .dash-grid{grid-template-columns:minmax(0,1fr)}.walk-visual .dash-grid > div + div{border-left:0;border-top:1px solid var(--line)}.walk-visual .actions{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){.walk{grid-template-columns:minmax(0,1fr)}.walk-visual{position:relative;top:0;order:-1}.walk-step{min-height:auto;opacity:1}}

/* Radar */
.radar-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.radar{width:100%;max-width:440px;aspect-ratio:1;justify-self:center}
.radar circle{fill:none;stroke:var(--line)}
.radar .beam{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.radar .arm{stroke:var(--accent);stroke-width:2}
.radar .sweep{transform-origin:200px 200px;animation:spin 5s linear infinite}
.radar .blip{fill:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
.checks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;font-family:var(--mono);font-size:14px}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;padding:13px 0;border-top:1px solid var(--line);align-items:center}
.checks li:last-child{border-bottom:1px solid var(--line)}
.checks .s-ok{color:var(--ok)}.checks .s-ko{color:var(--hot)}
@media (max-width:900px){.radar-block{grid-template-columns:minmax(0,1fr)}}

/* Terminal */
.term{background:var(--term-bg);color:var(--term-fg);border-radius:14px;font-family:var(--mono);font-size:13px;line-height:1.7;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.term-top{display:flex;gap:7px;padding:12px 14px;border-bottom:1px solid #ffffff14;align-items:center}
.term-top i{width:10px;height:10px;border-radius:50%;background:#ffffff26}
.term-top span{margin-left:10px;color:var(--term-dim);font-size:12px}
.term pre{margin:0;padding:20px 22px 24px;overflow-x:auto;white-space:pre;min-height:26em}
.term .d{color:var(--term-dim)}.term .p{color:#9AA8FF}.term .y{color:#F2D86A}.term .g{color:#7ED3A4}.term .u{color:#fff}
.term .ln{display:block}
.code-tabs{display:flex;gap:4px;margin-bottom:12px;flex-wrap:wrap}
.code-tabs button{font:500 13px var(--mono);padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:all .25s}
.code-tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.code{background:var(--term-bg);color:var(--term-fg);border-radius:12px;padding:20px 22px;font:13px/1.7 var(--mono);overflow-x:auto;margin:0;white-space:pre}
.code .k{color:#9AA8FF}.code .s{color:#7ED3A4}.code .d{color:var(--term-dim)}
.copy{float:right;font:500 12px var(--mono);background:#ffffff14;color:var(--term-fg);border:0;border-radius:6px;padding:5px 10px;cursor:pointer}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.tool{padding:26px 24px 28px 0;display:grid;gap:10px;border-bottom:1px solid var(--line);min-width:0}
.tool:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
.tool code{font-family:var(--mono);font-size:15px;color:var(--accent)}
.tool p{color:var(--muted);font-size:15.5px}
.tool .sig{font-family:var(--mono);font-size:12px;color:var(--muted)}
@media (max-width:760px){.tools{grid-template-columns:minmax(0,1fr)}.tool:nth-child(even){padding-left:0;border-left:0}}

/* Timeline (Accompagnement) */
.timeline{position:relative;display:grid;gap:0;padding-left:56px}
.timeline::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline .bar{position:absolute;left:15px;top:8px;width:2px;height:calc(100% - 16px);background:var(--accent);transform-origin:top;transform:scaleY(0)}
.tl-item{position:relative;padding-block:0 clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px 40px}
.tl-item::before{content:"";position:absolute;left:-48px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.tl-item .when{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-top:6px}
.tl-item h3{font-size:clamp(26px,2.8vw,36px);font-weight:700;font-variation-settings:"wdth" 84}
.tl-item p{color:var(--muted);margin-top:10px;max-width:56ch}
@media (max-width:760px){.tl-item{grid-template-columns:minmax(0,1fr)}.timeline{padding-left:40px}.tl-item::before{left:-32px}.timeline::before,.timeline .bar{left:7px}}
.included{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.inc{padding:28px 24px;border:1px solid var(--line);border-radius:14px;display:grid;gap:12px;align-content:start;background:var(--surface);min-width:0;transition:transform .5s var(--ease),border-color .3s}
.inc:hover{transform:translateY(-4px);border-color:var(--ink)}
.inc svg{width:34px;height:34px;color:var(--accent)}
.inc p{color:var(--muted);font-size:15.5px}
@media (max-width:900px){.included{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.included{grid-template-columns:minmax(0,1fr)}}

/* Quote/Statement */
.statement{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 78;font-size:clamp(30px,4.4vw,64px);line-height:1.04;max-width:20ch;text-wrap:balance}
.statement .dim{color:var(--line)}

/* Pricing */
.billing{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;margin-bottom:32px}
.billing button{font:600 14px var(--body);padding:9px 16px;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer;transition:all .3s}
.billing button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.billing small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ok);margin-left:6px}
.billing button[aria-pressed="true"] small{color:var(--mark)}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.offer{border:1px solid var(--line);border-radius:16px;padding:32px 26px;display:flex;flex-direction:column;gap:18px;min-width:0;background:var(--bg);transition:transform .5s var(--ease),box-shadow .5s}
.offer:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px color-mix(in srgb,var(--ink) 40%,transparent)}
.offer.feat{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.offer.feat .muted,.offer.feat li{color:color-mix(in srgb,var(--bg) 70%,var(--ink))}
.offer.feat .btn{--bb:var(--bg);--bf:var(--ink)}
.offer h3{font-size:32px;font-weight:700;font-variation-settings:"wdth" 84}
.price{font-family:var(--display);font-size:52px;font-weight:700;font-variation-settings:"wdth" 66;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.price small{font-family:var(--mono);font-size:13px;font-weight:400;opacity:.7}
.offer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px;color:var(--muted)}
.offer li{padding-left:22px;position:relative}
.offer li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:currentColor}
.offer .btn{margin-top:auto;justify-content:center}
.offer .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){.offers{grid-template-columns:minmax(0,1fr)}}
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.compare{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.compare thead th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--surface)}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}
.compare tr:last-child td{border-bottom:0}
.compare .y{color:var(--accent);font-weight:700}
.compare .n{color:var(--line)}

/* FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-size:clamp(18px,1.6vw,20px);font-weight:600;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:24px;color:var(--accent);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{overflow:hidden}
.faq .ans p{padding-bottom:24px;color:var(--muted);max-width:64ch}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:start}
.form{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,36px)}
.field{display:grid;gap:8px}
.field label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{font:inherit;font-size:16px;padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);transition:border-color .25s,box-shadow .25s;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.field textarea{min-height:120px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.row2{grid-template-columns:minmax(0,1fr)}}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative}
.choice input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.choice label{font:500 14px var(--body);letter-spacing:0;text-transform:none;padding:9px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--ink);transition:all .25s}
.choice input:checked + label{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.choice input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}
.form-msg{font-size:14.5px;color:var(--hot);min-height:1.4em}
.scanlog{font-family:var(--mono);font-size:13px;display:grid;gap:5px;margin-top:4px}
.scanlog div{animation:in .4s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.contact-info{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--line)}
.contact-info div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.contact-info span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}

/* Page heroes (inner pages) */
.page-hero{padding-block:clamp(64px,10vw,140px) clamp(40px,5vw,72px)}
.page-hero .t-h1{margin-top:20px;max-width:16ch}
.page-hero .lede{margin-top:28px;color:var(--muted)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
@media (max-width:900px){.page-hero-grid{grid-template-columns:minmax(0,1fr)}}

/* Legal pages: calm reading layout, no scroll effects */
.legal{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px clamp(32px,6vw,96px);align-items:start}
.legal-nav{position:sticky;top:100px;display:grid;gap:2px;font-size:14.5px}
.legal-nav a{color:var(--muted);text-decoration:none;padding:5px 0;transition:color .2s}
.legal-nav a:hover{color:var(--ink)}
.prose{max-width:68ch;font-size:17px;line-height:1.7;min-width:0}
.prose h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15;font-weight:700;font-variation-settings:"wdth" 86;margin:56px 0 16px;scroll-margin-top:100px}
.prose > h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:650;font-variation-settings:"wdth" 95;margin:32px 0 10px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--accent);overflow-wrap:anywhere}
.prose strong{font-weight:600}
.prose dl{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);margin:0 0 20px;border-top:1px solid var(--line)}
.prose dt,.prose dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.prose dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:15px;padding-right:16px}
.updated{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:20px}
.todo{display:inline-block;font-family:var(--mono);font-size:11.5px;line-height:1.5;letter-spacing:.04em;color:var(--hot);border:1px dashed currentColor;border-radius:4px;padding:1px 7px;vertical-align:1px}
@media (max-width:860px){.legal{grid-template-columns:minmax(0,1fr)}.legal-nav{display:none}}
@media (max-width:520px){.prose dl{grid-template-columns:minmax(0,1fr)}.prose dt{border-bottom:0;padding-bottom:0}}

/* CTA band */
.cta{border-radius:24px;background:var(--accent);color:var(--accent-ink);padding:clamp(32px,6vw,88px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end;position:relative;overflow:hidden;isolation:isolate}
.cta h2{font-size:clamp(36px,5.4vw,78px);line-height:.94;font-weight:800;font-variation-settings:"wdth" 74}
.cta p{opacity:.85;max-width:40ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.cta .rings{position:absolute;right:-160px;top:-160px;width:520px;height:520px;z-index:-1;opacity:.28;pointer-events:none}
.cta .rings circle{fill:none;stroke:var(--accent-ink)}
.cta .rings .arm{stroke:var(--accent-ink);stroke-width:2}
.cta .rings .sweep{transform-origin:260px 260px;animation:spin 8s linear infinite}
@media (max-width:860px){.cta{grid-template-columns:minmax(0,1fr)}}

/* Footer */
.site-footer{margin-top:clamp(80px,10vw,140px);border-top:1px solid var(--line);padding-top:56px;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-grid h4{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--accent)}
.foot-grid .about{color:var(--muted);max-width:32ch;margin-top:14px;font-size:15px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px;font-size:13.5px;color:var(--muted)}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--accent)}
.bigword{display:block;width:100%;height:auto;margin-top:32px;user-select:none}
.bigword text{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 150;font-size:100px;fill:var(--bg-2)}
@media (max-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-grid > div:first-child{grid-column:1/-1}}

/* Reveal fallbacks: content visible without JS */
.js [data-reveal]{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .walk-step{opacity:1}
}

/* Lien vers l'espace client */
.header-login{font-size:15px;color:var(--muted);text-decoration:none;padding:8px 4px;transition:color .25s}
.header-login:hover{color:var(--ink)}
@media (max-width:960px){.header-login{display:none}}