@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:400 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Onest";src:url(fonts/onest.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ground:#F2F5EF; --surface:#FFFFFF; --ink:#111A15; --muted:#3B4640; --line:#BFCABC;
  --accent:#2238E0; --accent-ink:#FFFFFF; --marker:#FFD54A; --mint:#C6E6D1; --sky:#D3DBFF;
  --wa:#15803D; --shadow:0 18px 50px -24px rgba(22,32,27,.28);
  --display:"Bricolage Grotesque","Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Onest","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --wrap:1180px; --gutter:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0D110F; --surface:#18201B; --ink:#F1F5F0; --muted:#C2CCC5; --line:#3A463E;
  --accent:#A3AEFF; --accent-ink:#0D110F; --marker:#FFD54A; --mint:#1C3527; --sky:#1E2547;
  --wa:#15803D; --shadow:0 18px 50px -24px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --ground:#0D110F; --surface:#18201B; --ink:#F1F5F0; --muted:#C2CCC5; --line:#3A463E;
  --accent:#A3AEFF; --accent-ink:#0D110F; --marker:#FFD54A; --mint:#1C3527; --sky:#1E2547;
  --wa:#15803D; --shadow:0 18px 50px -24px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:132px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(34px,5vw,58px);font-weight:750;font-stretch:80%}
h3{font-size:clamp(22px,2.4vw,28px);font-weight:700;font-stretch:90%}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font:500 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--muted);max-width:60ch}
.mark{background:linear-gradient(transparent 60%,var(--marker) 60%,var(--marker) 92%,transparent 92%);padding:0 .06em}
:root[data-theme="dark"] .mark{color:var(--ink)}
.num{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none;border:2px solid transparent;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-wa{background:var(--wa);color:#fff}
.btn-mail{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{font:750 20px/1 var(--display);font-stretch:85%;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand i{width:12px;height:12px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:7px -7px 0 -2px var(--marker)}
.top nav{display:flex;gap:6px;align-items:center}
.top nav a.lk{font-size:15px;text-decoration:none;padding:8px 12px;border-radius:999px;color:var(--muted)}
.top nav a.lk:hover{background:var(--surface);color:var(--ink)}
.top .btn{padding:10px 16px;font-size:15px}
@media (max-width:900px){.top nav a.lk{display:none}}
@media (max-width:420px){.top .btn span{display:none}.top .btn{padding:10px}}

.hero{padding:clamp(28px,5vw,72px) 0 clamp(36px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(52px,8.6vw,116px);font-weight:800;font-stretch:76%;line-height:.9;letter-spacing:-.025em;margin:20px 0 22px}
.hero h1 .soft{display:block;font-weight:500;font-stretch:100%;font-size:.5em;letter-spacing:-.01em;line-height:1.1;margin-top:.12em;color:var(--muted)}
.hero .sub{font:500 clamp(22px,2.4vw,30px)/1.25 var(--body);letter-spacing:-.01em;max-width:30ch;margin-bottom:18px;text-wrap:balance}
.hero .lead{margin-bottom:28px}
.avail b{font-weight:700;color:var(--accent);white-space:nowrap}
.sub .mark{white-space:nowrap}
.avail{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 12px;border-radius:999px;background:var(--mint);font-size:14px;font-weight:500}
.avail::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px color-mix(in srgb,var(--wa) 25%,transparent)}
.portrait{position:relative;aspect-ratio:1;max-width:420px;justify-self:center;width:100%}
.portrait .blob{position:absolute;inset:7%;border-radius:58% 42% 52% 48%/46% 56% 44% 54%;overflow:hidden;background:var(--sky);box-shadow:var(--shadow)}
.portrait .blob img{width:100%;height:100%;object-fit:cover}
.portrait svg.curve{position:absolute;left:-12%;top:-6%;width:124%;height:auto;pointer-events:none;overflow:visible}
.curve path{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:0}
.curve circle{fill:var(--marker);stroke:var(--ink);stroke-width:2.5}
@media (prefers-reduced-motion:no-preference){.curve path{animation:draw 1.6s .15s ease-out both}@keyframes draw{from{stroke-dashoffset:700}}}
.tag{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:500 13px/1.2 var(--mono);box-shadow:var(--shadow);white-space:nowrap}
.tag b{font-weight:500;color:var(--accent)}
.tag.t1{left:-4%;bottom:12%}
.tag.t2{right:-2%;top:10%}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.portrait{max-width:290px;order:-1}.tag.t1{left:0}.tag.t2{right:0}}

.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);margin-top:clamp(36px,5vw,60px)}
.proof div{padding-top:16px;border-top:2px solid var(--ink)}
.proof b{display:block;font:750 clamp(22px,2.2vw,28px)/1.1 var(--display);font-stretch:85%;margin-bottom:8px}
.proof .num{white-space:nowrap;display:block;font-size:clamp(30px,3.6vw,44px);line-height:1;margin-bottom:8px;letter-spacing:-.02em}
.proof span{font-size:14.5px;color:var(--muted);line-height:1.4;display:block}
@media (max-width:900px){.proof{grid-template-columns:1fr 1fr}}

.switch{position:sticky;top:64px;z-index:15;padding:10px 0;background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.switch .wrap{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}
.switch .wrap::-webkit-scrollbar{display:none}
.switch .q{font-size:14px;color:var(--muted);white-space:nowrap;margin-right:4px}
.chip{white-space:nowrap;text-decoration:none;padding:8px 15px;border-radius:999px;border:1.5px solid var(--muted);background:var(--surface);font-size:15px;font-weight:500}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--ground);border-color:var(--ink)}

section{padding:clamp(64px,9vw,120px) 0}
.head{display:grid;gap:16px;margin-bottom:clamp(32px,5vw,56px);max-width:780px}

.chain{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.station{padding:26px 24px 24px;background:var(--surface);border:1px solid var(--line);border-radius:28px 28px 28px 8px;display:grid;gap:12px;align-content:start}
.station .k{font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.station > p{color:var(--muted);font-size:16px}
.station.ai{background:var(--sky);border-color:var(--accent)}
.station ul{margin:2px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.station li{font-size:15px;padding-left:20px;position:relative;line-height:1.45}
.station li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;border:2px solid var(--accent)}
.station .proofline{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);font-size:14px;color:var(--muted)}
.station .proofline .num{color:var(--ink)}
@media (max-width:980px){.chain{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.chain{grid-template-columns:1fr}}

.terrain{border-top:1px solid var(--line)}
.terrain-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:end;margin-bottom:clamp(28px,4vw,44px)}
.terrain-head .big{font:800 clamp(60px,10.5vw,148px)/.82 var(--display);font-stretch:75%;letter-spacing:-.03em;color:var(--accent)}
.terrain-head .head{margin:0}
@media (max-width:760px){.terrain-head{grid-template-columns:1fr;gap:14px}}
.cases{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px)}
.case{background:var(--surface);border:1px solid var(--line);border-radius:36px;padding:clamp(24px,3vw,36px);display:grid;gap:16px;align-content:start}
.case.wide{grid-column:1/-1}
.case > p{color:var(--muted)}
.case .meta{display:flex;flex-wrap:wrap;gap:8px}
.pill{font:500 12.5px/1 var(--mono);padding:7px 11px;border-radius:999px;background:var(--mint);color:var(--ink)}
.pill.b{background:var(--sky)}
.case .what{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.case .what li{padding-left:22px;position:relative;font-size:16px;line-height:1.5}
.case .what li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:2px;background:var(--accent)}
.result{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,36px);padding-top:16px;margin-top:auto;border-top:1px solid var(--line)}
.result div{display:grid;gap:6px;min-width:130px;flex:1}
.result .num{white-space:nowrap;font-size:clamp(28px,3vw,38px);line-height:1;color:var(--accent);letter-spacing:-.02em}
.result span{font-size:14px;color:var(--muted);line-height:1.35}
.src{font-size:12.5px;color:var(--muted);line-height:1.45}
@media (max-width:760px){.cases{grid-template-columns:1fr}}

.how{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.how div{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:2px solid var(--ink)}
.how p{color:var(--muted)}
@media (max-width:900px){.how{grid-template-columns:1fr}}

.path{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px)}
.path .side{display:grid;gap:18px;align-content:start}
.path .side ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;color:var(--muted);font-size:15.5px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.timeline .when{font:500 14px/1.6 var(--mono);color:var(--muted)}
.timeline b{font-weight:600}
.timeline p{color:var(--muted);font-size:15.5px;margin-top:2px}
@media (max-width:900px){.path{grid-template-columns:1fr}.timeline li{grid-template-columns:1fr;gap:2px}}

.contact{padding-bottom:clamp(48px,7vw,96px)}
.contact-card{background:#16201B;color:#F2F5EF;border-radius:48px 48px 48px 12px;padding:clamp(30px,6vw,72px);display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,48px);align-items:end}
:root[data-theme="dark"] .contact-card{background:#1E2547}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact-card{background:#1E2547}}
.contact-card h2{font-size:clamp(38px,6vw,76px)}
.contact-card .lead{color:#C9D2CB;margin-top:16px}
.contact-card .btn-row{flex-direction:column;align-items:stretch}
.contact-card .btn{justify-content:center;padding:18px 24px;font-size:17px}
.contact-card .btn-mail{background:transparent;color:#F2F5EF;border-color:#F2F5EF}
.contact-card small{color:#AEB8B1;font-size:14px;text-align:center}
@media (max-width:900px){.contact-card{grid-template-columns:1fr}}
footer{padding:24px 0 40px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
footer a{color:var(--muted)}
.theme-btn{background:none;border:1.5px solid var(--line);color:var(--ink);border-radius:999px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;flex:none}
.theme-btn svg{width:18px;height:18px}

.fab{position:fixed;right:16px;bottom:16px;z-index:30;display:none;width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;align-items:center;justify-content:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
.fab svg{width:28px;height:28px}
@media (max-width:900px){.fab{display:flex}footer{padding-bottom:96px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Agents IA : la section qui ouvre la page, sur fond sombre dans les deux themes */
.ia{background:#111A15;color:#F1F5F0;border-radius:48px;margin:8px clamp(8px,1.5vw,20px)}
:root[data-theme="dark"] .ia{background:#161D3D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ia{background:#161D3D}}
.ia .eyebrow{color:#FFD54A}
.ia .lead{color:#CBD4CD}
.ia h2{color:#F1F5F0}
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.agent{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:24px;display:grid;gap:12px;align-content:start}
.agent h3{color:#F1F5F0}
.agent p{color:#CBD4CD;font-size:16px}
.agent .state{justify-self:start;display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--mono);padding:7px 11px;border-radius:999px;background:rgba(60,199,122,.16);color:#7FE3A8}
.agent .state::before{content:"";width:8px;height:8px;border-radius:50%;background:#3CC77A;box-shadow:0 0 0 3px rgba(60,199,122,.25)}
.agent .state.proto{background:rgba(255,213,74,.14);color:#FFD54A}
.agent .state.proto::before{background:#FFD54A;box-shadow:0 0 0 3px rgba(255,213,74,.25)}
@media (prefers-reduced-motion:no-preference){.agent .state:not(.proto)::before{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(60,199,122,0)}}}
.agent .cadence{margin-top:auto;padding-top:12px;border-top:1px dashed rgba(255,255,255,.2);font:500 13px/1.4 var(--mono);color:#E6ECE7}
.deploy{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,48px);margin-top:clamp(28px,4vw,44px);padding:clamp(24px,3.5vw,40px);border-radius:36px;background:#F1F5F0;color:#111A15}
.deploy h3{margin-bottom:14px}
.deploy ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.deploy li{padding-left:22px;position:relative;line-height:1.45}
.deploy li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:#2238E0}
.deploy p{color:#3B4640;margin-bottom:20px}
@media (max-width:980px){.agents{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.agents{grid-template-columns:1fr}.deploy{grid-template-columns:1fr}.ia{border-radius:32px}}