/* ============================================================
   TerraBiome Technologies — système "bioluminescent laboratory"
   Canvas #222f30 · Inter Tight 400 (unique graisse) · Roboto Mono
   Accent lime #cef79e rationné aux micro-éléments
   ============================================================ */

:root{
  --ink:#222f30;
  --paper:#ffffff;
  --bone:#f7f7f5;
  --graphite:#4d5757;
  --lichen:#c9cbbe;
  --tissue:#e7e8e1;
  --void:#000000;
  --lime:#cef79e;
  --muted:#8fa096;              /* graphite éclairci pour lisibilité sur ink */
  --line-d:#4d5757;             /* hairline sur sombre */
  --line-l:#c9cbbe;             /* hairline sur clair */
  --font-sans:'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --max:1200px;
  --pad:clamp(24px, 6vw, 96px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:17px;
  letter-spacing:-.001em;
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--lime);color:var(--ink)}
b,strong{font-weight:400}

/* ---------- Champ de particules ---------- */
#field{position:fixed;top:0;right:0;width:52vw;height:100vh;pointer-events:none;z-index:0;opacity:.8}
main,.nav,footer{position:relative;z-index:1}

/* ---------- Navigation ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px var(--pad)}
.brand{font-family:var(--font-mono);font-size:14px;letter-spacing:-.008em;color:var(--paper);text-decoration:none;text-transform:uppercase;white-space:nowrap}
.brand span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.menu{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.menu a{
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;
  color:var(--lichen);text-decoration:none;
  padding:7px 14px;border:1px solid transparent;border-radius:12px;
  transition:border-color .2s,color .2s;
}
.menu a:hover,.menu a:focus-visible{border-color:var(--line-d);color:var(--paper)}
.menu a[aria-current="page"]{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.lang{font-family:var(--font-mono);font-size:13px;color:var(--muted);white-space:nowrap}
.lang a{color:var(--muted);text-decoration:none;padding:4px}
.lang a:hover{color:var(--paper)}
.lang .on{color:var(--paper)}
a:focus-visible,button:focus-visible{outline:1px solid var(--lime);outline-offset:3px;border-radius:8px}

/* ---------- Hero ---------- */
.hero{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:60px var(--pad) 88px;max-width:1400px}
.hero.short{min-height:50vh;padding-bottom:48px}
.kicker{
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;
  color:var(--lichen);margin-bottom:40px;display:flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
h1{
  font-weight:400;
  font-size:clamp(42px, 7.2vw, 100px);
  line-height:1.02;
  letter-spacing:-.025em;
  max-width:16ch;
}
h1 em,h2 em{font-style:normal;color:inherit}
.lead{margin-top:40px;max-width:520px;color:var(--muted);font-size:18px;letter-spacing:-.001em;line-height:1.4}
.scrollp{margin-top:72px;display:flex;flex-direction:column;gap:12px;font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--graphite)}
.scrollp .line{width:1px;height:56px;background:var(--line-d)}

.hero .kicker,.hero h1,.hero .lead,.hero .scrollp,.hero .heroStats{
  opacity:0;transform:translateY(12px);
  animation:rise .8s cubic-bezier(.2,.6,.2,1) forwards;
}
.hero h1{animation-delay:.12s}
.hero .lead{animation-delay:.28s}
.hero .heroStats{animation-delay:.42s}
.hero .scrollp{animation-delay:.56s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero .kicker,.hero h1,.hero .lead,.hero .scrollp,.hero .heroStats{animation:none;opacity:1;transform:none}
}

/* ---------- Sections ---------- */
section{padding:88px var(--pad)}
.wrap{max-width:var(--max)}
.hr{border:none;border-top:1px solid var(--line-d);margin:0 var(--pad)}

.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px clamp(32px,6vw,110px);align-items:start;max-width:var(--max)}
h2{font-weight:400;font-size:clamp(30px,3.4vw,42px);line-height:1.15;letter-spacing:-.006em}
.duo>div:first-child h2{color:var(--muted)}
h3{font-size:19px;font-weight:400;letter-spacing:-.001em;margin-bottom:8px}
.duo p,.body p{color:var(--muted);max-width:520px;font-size:17px;line-height:1.45}
.body p+p,.duo .col p+p{margin-top:16px}

.sub{
  display:inline-block;
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;
  color:var(--graphite);
  border:1px solid var(--line-d);border-radius:9999px;
  padding:5px 14px;margin-bottom:22px;
}

.items{list-style:none;display:grid;gap:30px;margin-top:8px}
.items li{border-left:1px solid var(--line-d);padding-left:22px}
.items li p{font-size:16px;color:var(--muted);max-width:460px}

/* ---------- Verticales ---------- */
.vert{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px clamp(32px,6vw,110px);align-items:start;padding:64px var(--pad);max-width:1400px;text-decoration:none;color:inherit}
.vert .no{
  display:inline-block;
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--graphite);
  border:1px solid var(--line-d);border-radius:9999px;padding:5px 14px;margin-bottom:18px;
}
.vert p{color:var(--muted);max-width:500px;font-size:16px;line-height:1.45}
.vert .go{
  display:inline-flex;align-items:center;gap:14px;margin-top:22px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--paper);
}
.vert .go::after{
  content:"→";display:grid;place-items:center;
  width:40px;height:40px;border-radius:8px;background:var(--lime);color:var(--ink);
  font-size:16px;transition:transform .2s;
}
.vert:hover .go::after{transform:translateX(4px)}

/* ---------- Indicateurs circulaires ---------- */
.heroStats{display:flex;gap:clamp(24px,4vw,64px);margin-top:56px;flex-wrap:wrap}
.circ{display:flex;flex-direction:column;align-items:center;gap:14px;width:150px}
.circ svg{width:126px;height:126px;overflow:visible}
.circ .n{font-size:32px;font-weight:400;fill:var(--paper);font-family:var(--font-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.circ figcaption{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--graphite);text-align:center;max-width:150px;line-height:1.23}
.arc{stroke:var(--lime);stroke-width:1.4;fill:none;stroke-linecap:round}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;
  font-family:var(--font-mono);font-size:14px;letter-spacing:-.008em;text-transform:uppercase;
  color:var(--ink);background:var(--paper);text-decoration:none;
  border:1px solid var(--paper);border-radius:8px;
  padding:12px 20px;transition:opacity .2s;
}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent;border-color:var(--line-d);color:var(--paper)}
.btn.ghost:hover{border-color:var(--lichen);opacity:1}

/* ---------- CTA ---------- */
.cta{padding:120px var(--pad);max-width:var(--max)}
.cta h2{max-width:18ch;margin-bottom:36px;color:var(--paper)}

/* ---------- Pipeline ---------- */
.pipeWrap{max-width:var(--max)}
.pstages{display:grid;grid-template-columns:minmax(180px,2fr) 5fr;gap:8px 24px;padding-bottom:14px;border-bottom:1px solid var(--line-d)}
.pstages .pcol{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--graphite)}
.plabels{display:grid;grid-template-columns:repeat(5,1fr)}
.plabels span{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--graphite);text-align:center}
.prow{display:grid;grid-template-columns:minmax(180px,2fr) 5fr;gap:8px 24px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(77,87,87,.4)}
.pmeta h3{font-size:16px;margin:0 0 6px}
.ptag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--graphite)}
.ptag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.pbar{position:relative;height:8px;border-radius:9999px;background:rgba(77,87,87,.35);overflow:hidden}
.pbar::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(20% - 1px),rgba(201,203,190,.25) calc(20% - 1px),rgba(201,203,190,.25) 20%)}
.pbar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:9999px;background:var(--lime);transition:width 1.3s cubic-bezier(.2,.6,.2,1)}
.pbar.in i{width:var(--w)}
@media (prefers-reduced-motion:reduce){.pbar i{transition:none}}

/* ---------- Bande claire ---------- */
.light{background:var(--bone);color:var(--ink)}
.light h2,.light .pmeta h3,.light h3{color:var(--ink)}
.light p,.light .plabels span,.light .pcol,.light .ptag,.light figcaption{color:var(--graphite)}
.light .sub{color:var(--graphite);border-color:var(--line-l)}
.light .pstages{border-bottom-color:var(--line-l)}
.light .prow{border-bottom-color:var(--tissue)}
.light .pbar{background:var(--tissue)}
.light .pbar::before{background:repeating-linear-gradient(to right,transparent 0,transparent calc(20% - 1px),rgba(77,87,87,.25) calc(20% - 1px),rgba(77,87,87,.25) 20%)}
.light .note{color:var(--graphite);border-top-color:var(--line-l)}
.light .ref{border-left-color:var(--line-l)}
.light .ref h3{color:var(--ink)}
.light .ref p,.light .ref .src{color:var(--graphite)}
.light .ref .tag{color:var(--graphite)}
.light .ref a{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- Références ---------- */
.ref{border-left:1px solid var(--line-d);padding-left:24px;max-width:680px}
.ref+.ref{margin-top:48px}
.ref .tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--muted)}
.ref .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.ref h3{font-size:24px;letter-spacing:-.14px;line-height:1.25;margin:10px 0 6px}
.ref .src{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-bottom:10px}
.ref p{font-size:16px;color:var(--muted)}
.ref a{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--paper);text-decoration:none;border-bottom:1px solid var(--lime);padding-bottom:3px;display:inline-block;margin-top:12px}

/* ---------- Note ---------- */
.note{font-size:14px;color:var(--muted);max-width:580px;border-top:1px solid var(--line-d);padding-top:20px;margin-top:88px}

/* ---------- Photos ---------- */
.pic{border:1px solid var(--line-d);border-radius:16px;overflow:hidden;margin-top:32px;max-width:560px;background:rgba(0,0,0,.15)}
.pic img{width:100%;display:block}
.pic figcaption{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--muted);padding:12px 16px}
.vert .pic{margin-top:24px;max-width:480px}

/* ---------- Graphiques ---------- */
.gfx{margin-top:36px;max-width:920px}
.gfx svg{width:100%;height:auto;display:block}
.gfx-s{max-width:520px}
.flow{margin-top:52px;max-width:920px}
.flow svg{width:100%;height:auto;display:block}
.vico{width:44px;height:44px;margin-bottom:18px;display:block;opacity:.95}

/* ---------- Footer ---------- */
footer{
  background:var(--void);
  padding:72px var(--pad) 56px;margin-top:100px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;
  font-size:14px;color:var(--graphite);
}
footer .fbrand{font-family:var(--font-mono);font-size:14px;color:var(--paper);text-transform:uppercase;margin-bottom:14px}
footer p{max-width:280px;line-height:1.5;color:#8a938c}
footer h4{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--graphite);font-weight:400;margin-bottom:14px}
footer a{font-family:var(--font-mono);font-size:13px;color:#8a938c;text-decoration:none;display:block;padding:3px 0;transition:color .2s}
footer a:hover{color:var(--paper)}
footer address{font-style:normal;line-height:1.7;color:#8a938c}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  #field{width:100vw;opacity:.4}
  .duo,.vert{grid-template-columns:1fr}
  .hero{min-height:62vh}
  .nav{flex-wrap:wrap}
  .menu{gap:6px;justify-content:flex-start;width:100%;order:3}
}
@media (max-width:700px){
  .pstages{display:none}
  .prow{grid-template-columns:1fr;gap:10px}
}